♻️(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/DatePicker/DatePicker.spec.tsx

@@ -1448,4 +1448,15 @@ describe("<DatePicker/>", () => {
     // Make sure value is selected, with the same time as the initial value.
     screen.getByText(`Value = 2023-04-12T12:00:00.000Z|`);
   });
+
+  it("renders with className", async () => {
+    render(
+      <CunninghamProvider>
+        <DatePicker label="Date" className="my-custom-class" />
+      </CunninghamProvider>,
+    );
+    expect(
+      document.querySelector(".c__field.my-custom-class"),
+    ).toBeInTheDocument();
+  });
 });

packages/react/src/components/Forms/DatePicker/DatePickerAux.tsx

@@ -57,6 +57,7 @@ export type DatePickerAuxProps = PropsWithChildren &
 const DatePickerAux = forwardRef(
   (
     {
+      className,
       pickerState,
       pickerProps,
       onClear,
@@ -86,7 +87,7 @@ const DatePickerAux = forwardRef(
       <I18nProvider locale={locale || currentLocale}>
         <Field
           {...props}
-          className={classNames({
+          className={classNames(className, {
             "c__date-picker__range__container": isRange,
           })}
         >

packages/react/src/components/Forms/DatePicker/DateRangePicker.spec.tsx

@@ -1175,4 +1175,18 @@ describe("<DateRangePicker/>", () => {
       datepickerEnd: "",
     });
   });
+  it("renders with className", async () => {
+    render(
+      <CunninghamProvider>
+        <DateRangePicker
+          startLabel="Start"
+          endLabel="End"
+          className="my-custom-class"
+        />
+      </CunninghamProvider>,
+    );
+    expect(
+      document.querySelector(".c__field.my-custom-class"),
+    ).toBeInTheDocument();
+  });
 });