♻️(react) make className standard across components

The className prop was sometimes set onto the nested element and
sometimes on the container element, which was not consistent. Now
we always set the className onto the upmost element.

packages/react/src/components/Forms/FileUploader/index.spec.tsx

@@ -1,6 +1,7 @@
 import { act, render, screen } from "@testing-library/react";
 import React, { useRef, useState } from "react";
 import userEvent from "@testing-library/user-event";
+import { expect } from "vitest";
 import { CunninghamProvider } from ":/components/Provider";
 import {
   FileUploader,
@@ -273,6 +274,17 @@ describe("<FileUploader />", () => {
       });
       screen.getByText("Value: |");
     });
+
+    it("renders with className", async () => {
+      render(
+        <CunninghamProvider>
+          <FileUploader className="my-custom-class" />
+        </CunninghamProvider>,
+      );
+      expect(
+        document.querySelector(".c__field.my-custom-class"),
+      ).toBeInTheDocument();
+    });
   });
   describe("Multi", () => {
     const expectFiles = (expectedFiles: { name: string; specs: string }[]) => {

packages/react/src/components/Forms/FileUploader/index.tsx

@@ -28,7 +28,7 @@ export interface FileUploaderRefType {
 export const FileUploader = forwardRef<FileUploaderRefType, FileUploaderProps>(
   ({ fullWidth, ...props }, ref) => {
     return (
-      <Field fullWidth={fullWidth}>
+      <Field fullWidth={fullWidth} className={props.className}>
         {props.multiple ? (
           <FileUploaderMulti {...props} ref={ref} />
         ) : (