@ultraviolet/form 4.0.0-beta.0 → 4.0.0-beta.10

package/dist/components/CheckboxGroupField/index.cjs

@@ -16,12 +16,12 @@ const CheckboxGroupField = ({
   control,
   children,
   onChange,
-  label = "",
   error: customError,
   name,
   required = false,
   shouldUnregister = false,
   validate,
+  legend = "",
   ...props
 }) => {
   const {
@@ -73,8 +73,8 @@ const CheckboxGroupField = ({
     }
     onChange?.(event.currentTarget.value);
   }, error: getError({
-    label
-  }, error) ?? customError, name, required, children });
+    label: legend
+  }, error) ?? customError, name, required, legend, children });
 };
 CheckboxGroupField.Checkbox = ui.CheckboxGroup.Checkbox;
 exports.CheckboxGroupField = CheckboxGroupField;

package/dist/components/CheckboxGroupField/index.d.ts

@@ -2,9 +2,9 @@ import { CheckboxGroup } from '@ultraviolet/ui';
 import type { ComponentProps } from 'react';
 import type { FieldPath, FieldValues } from 'react-hook-form';
 import type { BaseFieldProps } from '../../types';
-type CheckboxGroupFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TFieldName> & Omit<ComponentProps<typeof CheckboxGroup>, 'value' | 'onChange'>;
+type CheckboxGroupFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = Omit<BaseFieldProps<TFieldValues, TFieldName>, 'label'> & Omit<ComponentProps<typeof CheckboxGroup>, 'value' | 'onChange'>;
 export declare const CheckboxGroupField: {
-    <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ control, children, onChange, label, error: customError, name, required, shouldUnregister, validate, ...props }: CheckboxGroupFieldProps<TFieldValues, TFieldName>): import("@emotion/react/jsx-runtime").JSX.Element;
+    <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ control, children, onChange, error: customError, name, required, shouldUnregister, validate, legend, ...props }: CheckboxGroupFieldProps<TFieldValues, TFieldName>): import("@emotion/react/jsx-runtime").JSX.Element;
     Checkbox: ({ onFocus, onBlur, disabled, error, name, value, children, helper, className, autoFocus, "data-testid": dataTestId, required, }: Omit<({
         error?: string | import("react").ReactNode;
         size?: number;

package/dist/components/CheckboxGroupField/index.js

@@ -14,12 +14,12 @@ const CheckboxGroupField = ({
   control,
   children,
   onChange,
-  label = "",
   error: customError,
   name,
   required = false,
   shouldUnregister = false,
   validate,
+  legend = "",
   ...props
 }) => {
   const {
@@ -71,8 +71,8 @@ const CheckboxGroupField = ({
     }
     onChange?.(event.currentTarget.value);
   }, error: getError({
-    label
-  }, error) ?? customError, name, required, children });
+    label: legend
+  }, error) ?? customError, name, required, legend, children });
 };
 CheckboxGroupField.Checkbox = CheckboxGroup.Checkbox;
 export {

package/dist/components/DateField/index.cjs

@@ -15,25 +15,15 @@ const DateField = ({
   control,
   label = "",
   format,
-  locale,
-  maxDate: maxDate$1,
   minDate: minDate$1,
-  disabled,
+  maxDate: maxDate$1,
   onChange,
   onBlur,
-  onFocus,
   validate,
-  autoFocus = false,
-  excludeDates,
   selectsRange,
-  size,
-  placeholder,
-  tooltip,
-  clearable,
-  "data-testid": dataTestId,
-  shouldUnregister = false,
   showMonthYearPicker,
-  input = "text"
+  shouldUnregister = false,
+  ...props
 }) => {
   const {
     getError
@@ -56,14 +46,14 @@ const DateField = ({
       }
     }
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.DateInput, { name: field.name, label, placeholder, value: Array.isArray(field.value) ? void 0 : field.value, format: format || ((value) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.DateInput, { ...props, name: field.name, label, value: Array.isArray(field.value) ? void 0 : field.value, format: format || ((value) => {
     if (!value) return "";
     const date = parseDate(value);
     return showMonthYearPicker ? date.toLocaleDateString(void 0, {
       year: "numeric",
       month: "numeric"
     }) : date.toLocaleDateString();
-  }), locale, required, onChange: (val) => {
+  }), required, onChange: (val) => {
     if (val && val instanceof Date) {
       onChange?.(val);
       const newDate = parseDate(val);
@@ -84,10 +74,10 @@ const DateField = ({
   }, onBlur: (e) => {
     field.onBlur();
     onBlur?.(e);
-  }, onFocus, maxDate: maxDate$1, size, minDate: minDate$1, error: getError({
+  }, maxDate: maxDate$1, minDate: minDate$1, error: getError({
     minDate: minDate$1,
     maxDate: maxDate$1,
     label
-  }, error), disabled, autoFocus, excludeDates, selectsRange, showMonthYearPicker, "data-testid": dataTestId, clearable, tooltip, startDate: selectsRange && Array.isArray(field.value) ? field.value[0] : void 0, endDate: selectsRange && Array.isArray(field.value) ? field.value[1] : void 0, input });
+  }, error), selectsRange, showMonthYearPicker, startDate: selectsRange && Array.isArray(field.value) ? field.value[0] : void 0, endDate: selectsRange && Array.isArray(field.value) ? field.value[1] : void 0 });
 };
 exports.DateField = DateField;

package/dist/components/DateField/index.d.ts

@@ -1,17 +1,7 @@
 import { DateInput } from '@ultraviolet/ui';
-import type { ComponentProps, FocusEvent } from 'react';
+import type { ComponentProps } from 'react';
 import type { FieldPath, FieldValues } from 'react-hook-form';
 import type { BaseFieldProps } from '../../types';
-type DateFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TFieldName> & Omit<ComponentProps<typeof DateInput>, 'maxDate' | 'minDate' | 'disabled' | 'required' | 'locale' | 'name' | 'onChange' | 'onFocus' | 'onBlur' | 'autoFocus' | 'stardDate' | 'endDate'> & {
-    maxDate?: Date;
-    minDate?: Date;
-    disabled?: boolean;
-    required?: boolean;
-    locale?: string;
-    onBlur?: (event: FocusEvent<HTMLElement>) => void;
-    onFocus?: (value: FocusEvent<HTMLElement>) => void;
-    autoFocus?: boolean;
-    placeholder?: string;
-};
-export declare const DateField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ required, name, control, label, format, locale, maxDate, minDate, disabled, onChange, onBlur, onFocus, validate, autoFocus, excludeDates, selectsRange, size, placeholder, tooltip, clearable, "data-testid": dataTestId, shouldUnregister, showMonthYearPicker, input, }: DateFieldProps<TFieldValues, TFieldName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+type DateFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TFieldName> & Omit<ComponentProps<typeof DateInput>, 'required' | 'name' | 'onChange' | 'value'>;
+export declare const DateField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ required, name, control, label, format, minDate, maxDate, onChange, onBlur, validate, selectsRange, showMonthYearPicker, shouldUnregister, ...props }: DateFieldProps<TFieldValues, TFieldName>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/DateField/index.js

@@ -13,25 +13,15 @@ const DateField = ({
   control,
   label = "",
   format,
-  locale,
-  maxDate,
   minDate,
-  disabled,
+  maxDate,
   onChange,
   onBlur,
-  onFocus,
   validate,
-  autoFocus = false,
-  excludeDates,
   selectsRange,
-  size,
-  placeholder,
-  tooltip,
-  clearable,
-  "data-testid": dataTestId,
-  shouldUnregister = false,
   showMonthYearPicker,
-  input = "text"
+  shouldUnregister = false,
+  ...props
 }) => {
   const {
     getError
@@ -54,14 +44,14 @@ const DateField = ({
       }
     }
   });
-  return /* @__PURE__ */ jsx(DateInput, { name: field.name, label, placeholder, value: Array.isArray(field.value) ? void 0 : field.value, format: format || ((value) => {
+  return /* @__PURE__ */ jsx(DateInput, { ...props, name: field.name, label, value: Array.isArray(field.value) ? void 0 : field.value, format: format || ((value) => {
     if (!value) return "";
     const date = parseDate(value);
     return showMonthYearPicker ? date.toLocaleDateString(void 0, {
       year: "numeric",
       month: "numeric"
     }) : date.toLocaleDateString();
-  }), locale, required, onChange: (val) => {
+  }), required, onChange: (val) => {
     if (val && val instanceof Date) {
       onChange?.(val);
       const newDate = parseDate(val);
@@ -82,11 +72,11 @@ const DateField = ({
   }, onBlur: (e) => {
     field.onBlur();
     onBlur?.(e);
-  }, onFocus, maxDate, size, minDate, error: getError({
+  }, maxDate, minDate, error: getError({
     minDate,
     maxDate,
     label
-  }, error), disabled, autoFocus, excludeDates, selectsRange, showMonthYearPicker, "data-testid": dataTestId, clearable, tooltip, startDate: selectsRange && Array.isArray(field.value) ? field.value[0] : void 0, endDate: selectsRange && Array.isArray(field.value) ? field.value[1] : void 0, input });
+  }, error), selectsRange, showMonthYearPicker, startDate: selectsRange && Array.isArray(field.value) ? field.value[0] : void 0, endDate: selectsRange && Array.isArray(field.value) ? field.value[1] : void 0 });
 };
 export {
   DateField

package/dist/components/Form/index.cjs

@@ -2,9 +2,28 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
+const _styled = require("@emotion/styled/base");
 const reactHookForm = require("react-hook-form");
 const defaultErrors = require("./defaultErrors.cjs");
 const index = require("../../providers/ErrorContext/index.cjs");
+const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+const _styled__default = /* @__PURE__ */ _interopDefaultCompat(_styled);
+function _EMOTION_STRINGIFIED_CSS_ERROR__() {
+  return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
+}
+const StyledForm = /* @__PURE__ */ _styled__default.default("form", process.env.NODE_ENV === "production" ? {
+  target: "ep3wzi00"
+} : {
+  target: "ep3wzi00",
+  label: "StyledForm"
+})(process.env.NODE_ENV === "production" ? {
+  name: "49aokf",
+  styles: "display:contents"
+} : {
+  name: "49aokf",
+  styles: "display:contents/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL2Zvcm0vc3JjL2NvbXBvbmVudHMvRm9ybS9pbmRleC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0I4QiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay91bHRyYXZpb2xldC91bHRyYXZpb2xldC9wYWNrYWdlcy9mb3JtL3NyYy9jb21wb25lbnRzL0Zvcm0vaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiJ3VzZSBjbGllbnQnXG5cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IHR5cGUgeyBSZWFjdE5vZGUgfSBmcm9tICdyZWFjdCdcbmltcG9ydCB0eXBlIHsgRmllbGRWYWx1ZXMsIFVzZUZvcm1SZXR1cm4gfSBmcm9tICdyZWFjdC1ob29rLWZvcm0nXG5pbXBvcnQgeyBGb3JtUHJvdmlkZXIgfSBmcm9tICdyZWFjdC1ob29rLWZvcm0nXG5pbXBvcnQgeyBFcnJvclByb3ZpZGVyIH0gZnJvbSAnLi4vLi4vcHJvdmlkZXJzJ1xuaW1wb3J0IHR5cGUgeyBGb3JtRXJyb3JzIH0gZnJvbSAnLi4vLi4vdHlwZXMnXG5pbXBvcnQgeyBkZWZhdWx0RXJyb3JzIH0gZnJvbSAnLi9kZWZhdWx0RXJyb3JzJ1xuXG50eXBlIE9uU3VibWl0UmV0dXJuID0gc3RyaW5nIHwgbnVsbCB8IHVuZGVmaW5lZCB8IHZvaWRcblxudHlwZSBGb3JtUHJvcHM8VEZpZWxkVmFsdWVzIGV4dGVuZHMgRmllbGRWYWx1ZXM+ID0ge1xuICBjaGlsZHJlbj86IFJlYWN0Tm9kZVxuICBlcnJvcnM6IEZvcm1FcnJvcnNcbiAgbmFtZT86IHN0cmluZ1xuICBvblN1Ym1pdDogKGRhdGE6IFRGaWVsZFZhbHVlcykgPT4gUHJvbWlzZTxPblN1Ym1pdFJldHVybj4gfCBPblN1Ym1pdFJldHVyblxuICBtZXRob2RzOiBVc2VGb3JtUmV0dXJuPFRGaWVsZFZhbHVlcz5cbn1cblxuY29uc3QgU3R5bGVkRm9ybSA9IHN0eWxlZC5mb3JtYFxuICBkaXNwbGF5OiBjb250ZW50cztcbmBcblxuZXhwb3J0IGNvbnN0IEZvcm0gPSA8VEZpZWxkVmFsdWVzIGV4dGVuZHMgRmllbGRWYWx1ZXM+KHtcbiAgY2hpbGRyZW4sXG4gIG1ldGhvZHMsXG4gIGVycm9ycyxcbiAgb25TdWJtaXQsXG4gIG5hbWUsXG59OiBGb3JtUHJvcHM8VEZpZWxkVmFsdWVzPikgPT4ge1xuICBjb25zdCBoYW5kbGVTdWJtaXQgPSBtZXRob2RzLmhhbmRsZVN1Ym1pdChhc3luYyB2YWx1ZXMgPT4ge1xuICAgIGNvbnN0IHJlc3VsdCA9IGF3YWl0IG9uU3VibWl0KHZhbHVlcylcblxuICAgIGlmIChyZXN1bHQpIHtcbiAgICAgIG1ldGhvZHMuc2V0RXJyb3IoJ3Jvb3Quc3VibWl0Jywge1xuICAgICAgICB0eXBlOiAnY3VzdG9tJyxcbiAgICAgICAgbWVzc2FnZTogcmVzdWx0LFxuICAgICAgfSlcbiAgICB9XG4gIH0pXG5cbiAgcmV0dXJuIChcbiAgICA8Rm9ybVByb3ZpZGVyIHsuLi5tZXRob2RzfT5cbiAgICAgIDxFcnJvclByb3ZpZGVyIGVycm9ycz17eyAuLi5kZWZhdWx0RXJyb3JzLCAuLi5lcnJvcnMgfX0+XG4gICAgICAgIDxTdHlsZWRGb3JtXG4gICAgICAgICAgb25TdWJtaXQ9e2FzeW5jIGUgPT4ge1xuICAgICAgICAgICAgZS5wcmV2ZW50RGVmYXVsdCgpXG4gICAgICAgICAgICBlLnN0b3BQcm9wYWdhdGlvbigpXG4gICAgICAgICAgICBhd2FpdCBoYW5kbGVTdWJtaXQoZSlcbiAgICAgICAgICB9fVxuICAgICAgICAgIG5hbWU9e25hbWV9XG4gICAgICAgICAgbm9WYWxpZGF0ZVxuICAgICAgICA+XG4gICAgICAgICAge2NoaWxkcmVufVxuICAgICAgICA8L1N0eWxlZEZvcm0+XG4gICAgICA8L0Vycm9yUHJvdmlkZXI+XG4gICAgPC9Gb3JtUHJvdmlkZXI+XG4gIClcbn1cbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
 const Form = ({
   children,
   methods,
@@ -24,7 +43,7 @@ const Form = ({
   return /* @__PURE__ */ jsxRuntime.jsx(reactHookForm.FormProvider, { ...methods, children: /* @__PURE__ */ jsxRuntime.jsx(index.ErrorProvider, { errors: {
     ...defaultErrors.defaultErrors,
     ...errors
-  }, children: /* @__PURE__ */ jsxRuntime.jsx("form", { onSubmit: async (e) => {
+  }, children: /* @__PURE__ */ jsxRuntime.jsx(StyledForm, { onSubmit: async (e) => {
     e.preventDefault();
     e.stopPropagation();
     await handleSubmit(e);

package/dist/components/Form/index.js

@@ -1,8 +1,25 @@
 "use client";
 import { jsx } from "@emotion/react/jsx-runtime";
+import _styled from "@emotion/styled/base";
 import { FormProvider } from "react-hook-form";
 import { defaultErrors } from "./defaultErrors.js";
 import { ErrorProvider } from "../../providers/ErrorContext/index.js";
+function _EMOTION_STRINGIFIED_CSS_ERROR__() {
+  return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
+}
+const StyledForm = /* @__PURE__ */ _styled("form", process.env.NODE_ENV === "production" ? {
+  target: "ep3wzi00"
+} : {
+  target: "ep3wzi00",
+  label: "StyledForm"
+})(process.env.NODE_ENV === "production" ? {
+  name: "49aokf",
+  styles: "display:contents"
+} : {
+  name: "49aokf",
+  styles: "display:contents/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL2Zvcm0vc3JjL2NvbXBvbmVudHMvRm9ybS9pbmRleC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0I4QiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay91bHRyYXZpb2xldC91bHRyYXZpb2xldC9wYWNrYWdlcy9mb3JtL3NyYy9jb21wb25lbnRzL0Zvcm0vaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiJ3VzZSBjbGllbnQnXG5cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IHR5cGUgeyBSZWFjdE5vZGUgfSBmcm9tICdyZWFjdCdcbmltcG9ydCB0eXBlIHsgRmllbGRWYWx1ZXMsIFVzZUZvcm1SZXR1cm4gfSBmcm9tICdyZWFjdC1ob29rLWZvcm0nXG5pbXBvcnQgeyBGb3JtUHJvdmlkZXIgfSBmcm9tICdyZWFjdC1ob29rLWZvcm0nXG5pbXBvcnQgeyBFcnJvclByb3ZpZGVyIH0gZnJvbSAnLi4vLi4vcHJvdmlkZXJzJ1xuaW1wb3J0IHR5cGUgeyBGb3JtRXJyb3JzIH0gZnJvbSAnLi4vLi4vdHlwZXMnXG5pbXBvcnQgeyBkZWZhdWx0RXJyb3JzIH0gZnJvbSAnLi9kZWZhdWx0RXJyb3JzJ1xuXG50eXBlIE9uU3VibWl0UmV0dXJuID0gc3RyaW5nIHwgbnVsbCB8IHVuZGVmaW5lZCB8IHZvaWRcblxudHlwZSBGb3JtUHJvcHM8VEZpZWxkVmFsdWVzIGV4dGVuZHMgRmllbGRWYWx1ZXM+ID0ge1xuICBjaGlsZHJlbj86IFJlYWN0Tm9kZVxuICBlcnJvcnM6IEZvcm1FcnJvcnNcbiAgbmFtZT86IHN0cmluZ1xuICBvblN1Ym1pdDogKGRhdGE6IFRGaWVsZFZhbHVlcykgPT4gUHJvbWlzZTxPblN1Ym1pdFJldHVybj4gfCBPblN1Ym1pdFJldHVyblxuICBtZXRob2RzOiBVc2VGb3JtUmV0dXJuPFRGaWVsZFZhbHVlcz5cbn1cblxuY29uc3QgU3R5bGVkRm9ybSA9IHN0eWxlZC5mb3JtYFxuICBkaXNwbGF5OiBjb250ZW50cztcbmBcblxuZXhwb3J0IGNvbnN0IEZvcm0gPSA8VEZpZWxkVmFsdWVzIGV4dGVuZHMgRmllbGRWYWx1ZXM+KHtcbiAgY2hpbGRyZW4sXG4gIG1ldGhvZHMsXG4gIGVycm9ycyxcbiAgb25TdWJtaXQsXG4gIG5hbWUsXG59OiBGb3JtUHJvcHM8VEZpZWxkVmFsdWVzPikgPT4ge1xuICBjb25zdCBoYW5kbGVTdWJtaXQgPSBtZXRob2RzLmhhbmRsZVN1Ym1pdChhc3luYyB2YWx1ZXMgPT4ge1xuICAgIGNvbnN0IHJlc3VsdCA9IGF3YWl0IG9uU3VibWl0KHZhbHVlcylcblxuICAgIGlmIChyZXN1bHQpIHtcbiAgICAgIG1ldGhvZHMuc2V0RXJyb3IoJ3Jvb3Quc3VibWl0Jywge1xuICAgICAgICB0eXBlOiAnY3VzdG9tJyxcbiAgICAgICAgbWVzc2FnZTogcmVzdWx0LFxuICAgICAgfSlcbiAgICB9XG4gIH0pXG5cbiAgcmV0dXJuIChcbiAgICA8Rm9ybVByb3ZpZGVyIHsuLi5tZXRob2RzfT5cbiAgICAgIDxFcnJvclByb3ZpZGVyIGVycm9ycz17eyAuLi5kZWZhdWx0RXJyb3JzLCAuLi5lcnJvcnMgfX0+XG4gICAgICAgIDxTdHlsZWRGb3JtXG4gICAgICAgICAgb25TdWJtaXQ9e2FzeW5jIGUgPT4ge1xuICAgICAgICAgICAgZS5wcmV2ZW50RGVmYXVsdCgpXG4gICAgICAgICAgICBlLnN0b3BQcm9wYWdhdGlvbigpXG4gICAgICAgICAgICBhd2FpdCBoYW5kbGVTdWJtaXQoZSlcbiAgICAgICAgICB9fVxuICAgICAgICAgIG5hbWU9e25hbWV9XG4gICAgICAgICAgbm9WYWxpZGF0ZVxuICAgICAgICA+XG4gICAgICAgICAge2NoaWxkcmVufVxuICAgICAgICA8L1N0eWxlZEZvcm0+XG4gICAgICA8L0Vycm9yUHJvdmlkZXI+XG4gICAgPC9Gb3JtUHJvdmlkZXI+XG4gIClcbn1cbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
 const Form = ({
   children,
   methods,
@@ -22,7 +39,7 @@ const Form = ({
   return /* @__PURE__ */ jsx(FormProvider, { ...methods, children: /* @__PURE__ */ jsx(ErrorProvider, { errors: {
     ...defaultErrors,
     ...errors
-  }, children: /* @__PURE__ */ jsx("form", { onSubmit: async (e) => {
+  }, children: /* @__PURE__ */ jsx(StyledForm, { onSubmit: async (e) => {
     e.preventDefault();
     e.stopPropagation();
     await handleSubmit(e);

package/dist/components/NumberInputFieldV2/index.cjs

@@ -7,32 +7,19 @@ const reactHookForm = require("react-hook-form");
 const isInteger = require("../../validators/isInteger.cjs");
 const index = require("../../providers/ErrorContext/index.cjs");
 const NumberInputFieldV2 = ({
-  disabled,
   control,
   max = Number.MAX_SAFE_INTEGER,
   min = 0,
   name,
   onChange,
   onBlur,
-  size,
   step,
-  unit,
-  tooltip,
-  className,
   label,
-  labelDescription,
-  id,
-  placeholder,
-  success,
-  helper,
-  controls = true,
   "aria-label": ariaLabel,
-  "data-testid": dataTestId,
   required,
-  autoFocus,
-  readOnly,
   shouldUnregister = false,
-  validate
+  validate,
+  ...props
 }) => {
   const {
     getError
@@ -56,17 +43,17 @@ const NumberInputFieldV2 = ({
       }
     }
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.NumberInputV2, { name: field.name, value: field.value, disabled, onBlur: (event) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.NumberInputV2, { ...props, name: field.name, value: field.value, onBlur: (event) => {
     field.onBlur();
     onBlur?.(event);
   }, onChange: (newValue) => {
     field.onChange(newValue);
     onChange?.(newValue);
-  }, max, min, size, step, className, "data-testid": dataTestId, id, label, labelDescription, placeholder, error: getError({
+  }, max, min, step, label, error: getError({
     label: label ?? ariaLabel ?? name,
     max,
     min,
     isInteger: step
-  }, error), success, helper, tooltip, unit, "aria-label": ariaLabel, autoFocus, readOnly, required, controls });
+  }, error), "aria-label": ariaLabel, required });
 };
 exports.NumberInputFieldV2 = NumberInputFieldV2;

package/dist/components/NumberInputFieldV2/index.d.ts

@@ -2,8 +2,6 @@ import { NumberInputV2 } from '@ultraviolet/ui';
 import type { ComponentProps } from 'react';
 import type { FieldPath, FieldValues } from 'react-hook-form';
 import type { BaseFieldProps } from '../../types';
-type NumberInputV2Props<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TFieldName> & Partial<Pick<ComponentProps<typeof NumberInputV2>, 'disabled' | 'id' | 'onBlur' | 'onChange' | 'onFocus' | 'value' | 'data-testid' | 'label' | 'aria-label' | 'tooltip' | 'unit' | 'size' | 'step' | 'className' | 'placeholder' | 'error' | 'success' | 'helper' | 'labelDescription' | 'autoFocus' | 'readOnly' | 'min' | 'max' | 'controls'>> & {
-    className?: string;
-};
-export declare const NumberInputFieldV2: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ disabled, control, max, min, name, onChange, onBlur, size, step, unit, tooltip, className, label, labelDescription, id, placeholder, success, helper, controls, "aria-label": ariaLabel, "data-testid": dataTestId, required, autoFocus, readOnly, shouldUnregister, validate, }: NumberInputV2Props<TFieldValues, TFieldName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+type NumberInputV2Props<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TFieldName> & Omit<ComponentProps<typeof NumberInputV2>, 'onChange' | 'value'>;
+export declare const NumberInputFieldV2: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ control, max, min, name, onChange, onBlur, step, label, "aria-label": ariaLabel, required, shouldUnregister, validate, ...props }: NumberInputV2Props<TFieldValues, TFieldName>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/NumberInputFieldV2/index.js

@@ -5,32 +5,19 @@ import { useController } from "react-hook-form";
 import { isInteger } from "../../validators/isInteger.js";
 import { useErrors } from "../../providers/ErrorContext/index.js";
 const NumberInputFieldV2 = ({
-  disabled,
   control,
   max = Number.MAX_SAFE_INTEGER,
   min = 0,
   name,
   onChange,
   onBlur,
-  size,
   step,
-  unit,
-  tooltip,
-  className,
   label,
-  labelDescription,
-  id,
-  placeholder,
-  success,
-  helper,
-  controls = true,
   "aria-label": ariaLabel,
-  "data-testid": dataTestId,
   required,
-  autoFocus,
-  readOnly,
   shouldUnregister = false,
-  validate
+  validate,
+  ...props
 }) => {
   const {
     getError
@@ -54,18 +41,18 @@ const NumberInputFieldV2 = ({
       }
     }
   });
-  return /* @__PURE__ */ jsx(NumberInputV2, { name: field.name, value: field.value, disabled, onBlur: (event) => {
+  return /* @__PURE__ */ jsx(NumberInputV2, { ...props, name: field.name, value: field.value, onBlur: (event) => {
     field.onBlur();
     onBlur?.(event);
   }, onChange: (newValue) => {
     field.onChange(newValue);
     onChange?.(newValue);
-  }, max, min, size, step, className, "data-testid": dataTestId, id, label, labelDescription, placeholder, error: getError({
+  }, max, min, step, label, error: getError({
     label: label ?? ariaLabel ?? name,
     max,
     min,
     isInteger: step
-  }, error), success, helper, tooltip, unit, "aria-label": ariaLabel, autoFocus, readOnly, required, controls });
+  }, error), "aria-label": ariaLabel, required });
 };
 export {
   NumberInputFieldV2

package/dist/components/RadioGroupField/index.cjs

@@ -11,11 +11,10 @@ const RadioGroupField = ({
   onChange,
   required,
   children,
-  label = "",
   error: customError,
   shouldUnregister = false,
   validate,
-  legend,
+  legend = "",
   ...props
 }) => {
   const {
@@ -39,8 +38,8 @@ const RadioGroupField = ({
     field.onChange(event);
     onChange?.(event.target.value);
   }, required, value: field.value, error: getError({
-    label
-  }, error) ?? customError, legend: legend ?? "", children });
+    label: legend
+  }, error) ?? customError, legend, children });
 };
 RadioGroupField.Radio = ui.RadioGroup.Radio;
 exports.RadioGroupField = RadioGroupField;

package/dist/components/RadioGroupField/index.d.ts

@@ -2,9 +2,9 @@ import { RadioGroup } from '@ultraviolet/ui';
 import type { ComponentProps, JSX } from 'react';
 import type { FieldPath, FieldValues } from 'react-hook-form';
 import type { BaseFieldProps } from '../../types';
-type RadioGroupFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TFieldName> & Omit<ComponentProps<typeof RadioGroup>, 'value' | 'onChange' | 'legend'> & Partial<Pick<ComponentProps<typeof RadioGroup>, 'legend'>>;
+type RadioGroupFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = Omit<BaseFieldProps<TFieldValues, TFieldName>, 'label'> & Omit<ComponentProps<typeof RadioGroup>, 'value' | 'onChange' | 'legend'> & Partial<Pick<ComponentProps<typeof RadioGroup>, 'legend'>>;
 export declare const RadioGroupField: {
-    <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ control, name, onChange, required, children, label, error: customError, shouldUnregister, validate, legend, ...props }: RadioGroupFieldProps<TFieldValues, TFieldName>): JSX.Element;
+    <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ control, name, onChange, required, children, error: customError, shouldUnregister, validate, legend, ...props }: RadioGroupFieldProps<TFieldValues, TFieldName>): JSX.Element;
     Radio: ({ onFocus, onBlur, disabled, error, name, value, label, helper, className, autoFocus, onKeyDown, tooltip, "data-testid": dataTestId, }: Omit<({
         error?: import("react").ReactNode;
         value: string | number;

package/dist/components/RadioGroupField/index.js

@@ -9,11 +9,10 @@ const RadioGroupField = ({
   onChange,
   required,
   children,
-  label = "",
   error: customError,
   shouldUnregister = false,
   validate,
-  legend,
+  legend = "",
   ...props
 }) => {
   const {
@@ -37,8 +36,8 @@ const RadioGroupField = ({
     field.onChange(event);
     onChange?.(event.target.value);
   }, required, value: field.value, error: getError({
-    label
-  }, error) ?? customError, legend: legend ?? "", children });
+    label: legend
+  }, error) ?? customError, legend, children });
 };
 RadioGroupField.Radio = RadioGroup.Radio;
 export {

package/dist/components/SelectableCardField/index.cjs

@@ -9,23 +9,17 @@ const SelectableCardField = ({
   control,
   value,
   onChange,
-  showTick,
   type,
-  disabled,
-  children,
-  className,
   onFocus,
   onBlur,
   required,
-  tooltip,
-  id,
   label,
   shouldUnregister = false,
   validate,
   productIcon,
   illustration,
-  "data-testid": dataTestId,
-  "aria-label": ariaLabel
+  "aria-label": ariaLabel,
+  ...props
 }) => {
   const {
     field,
@@ -42,7 +36,7 @@ const SelectableCardField = ({
     }
   });
   const isChecked = type === "checkbox" && Array.isArray(field.value) && value ? (field.value ?? []).includes(value) : field.value === value;
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.SelectableCard, { ...productIcon ? {
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.SelectableCard, { ...props, ...productIcon ? {
     productIcon
   } : {
     illustration
@@ -50,7 +44,7 @@ const SelectableCardField = ({
     label
   } : {
     "aria-label": ariaLabel
-  }, isError: !!error, showTick, checked: isChecked, className, disabled, onChange: (event) => {
+  }, isError: !!error, checked: isChecked, onChange: (event) => {
     if (type === "checkbox") {
       const fieldValue = field.value ?? [];
       if (fieldValue?.includes(event.currentTarget.value)) {
@@ -67,6 +61,6 @@ const SelectableCardField = ({
     onBlur?.(event);
   }, onFocus: (event) => {
     onFocus?.(event);
-  }, type, id, tooltip, value: value ?? "", name: field.name, "data-testid": dataTestId, children });
+  }, type, value: value ?? "", name: field.name });
 };
 exports.SelectableCardField = SelectableCardField;

package/dist/components/SelectableCardField/index.d.ts

@@ -1,15 +1,7 @@
 import { SelectableCard } from '@ultraviolet/ui';
 import type { ComponentProps } from 'react';
 import type { FieldPath, FieldValues } from 'react-hook-form';
-import type { BaseFieldProps, LabelProp } from '../../types';
-type SelectableCardFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = Omit<BaseFieldProps<TFieldValues, TFieldName>, 'label'> & Partial<Pick<ComponentProps<typeof SelectableCard>, 'disabled' | 'onBlur' | 'onFocus' | 'showTick' | 'type' | 'id' | 'children' | 'tooltip' | 'data-testid'>> & {
-    className?: string;
-} & ({
-    illustration?: ComponentProps<typeof SelectableCard>['illustration'];
-    productIcon?: never;
-} | {
-    productIcon?: ComponentProps<typeof SelectableCard>['productIcon'];
-    illustration?: never;
-}) & LabelProp;
-export declare const SelectableCardField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, control, value, onChange, showTick, type, disabled, children, className, onFocus, onBlur, required, tooltip, id, label, shouldUnregister, validate, productIcon, illustration, "data-testid": dataTestId, "aria-label": ariaLabel, }: SelectableCardFieldProps<TFieldValues, TFieldName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+import type { BaseFieldProps } from '../../types';
+type SelectableCardFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = Omit<BaseFieldProps<TFieldValues, TFieldName>, 'label'> & Omit<ComponentProps<typeof SelectableCard>, 'name' | 'onChange' | 'value'>;
+export declare const SelectableCardField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, control, value, onChange, type, onFocus, onBlur, required, label, shouldUnregister, validate, productIcon, illustration, "aria-label": ariaLabel, ...props }: SelectableCardFieldProps<TFieldValues, TFieldName>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/SelectableCardField/index.js

@@ -7,23 +7,17 @@ const SelectableCardField = ({
   control,
   value,
   onChange,
-  showTick,
   type,
-  disabled,
-  children,
-  className,
   onFocus,
   onBlur,
   required,
-  tooltip,
-  id,
   label,
   shouldUnregister = false,
   validate,
   productIcon,
   illustration,
-  "data-testid": dataTestId,
-  "aria-label": ariaLabel
+  "aria-label": ariaLabel,
+  ...props
 }) => {
   const {
     field,
@@ -40,7 +34,7 @@ const SelectableCardField = ({
     }
   });
   const isChecked = type === "checkbox" && Array.isArray(field.value) && value ? (field.value ?? []).includes(value) : field.value === value;
-  return /* @__PURE__ */ jsx(SelectableCard, { ...productIcon ? {
+  return /* @__PURE__ */ jsx(SelectableCard, { ...props, ...productIcon ? {
     productIcon
   } : {
     illustration
@@ -48,7 +42,7 @@ const SelectableCardField = ({
     label
   } : {
     "aria-label": ariaLabel
-  }, isError: !!error, showTick, checked: isChecked, className, disabled, onChange: (event) => {
+  }, isError: !!error, checked: isChecked, onChange: (event) => {
     if (type === "checkbox") {
       const fieldValue = field.value ?? [];
       if (fieldValue?.includes(event.currentTarget.value)) {
@@ -65,7 +59,7 @@ const SelectableCardField = ({
     onBlur?.(event);
   }, onFocus: (event) => {
     onFocus?.(event);
-  }, type, id, tooltip, value: value ?? "", name: field.name, "data-testid": dataTestId, children });
+  }, type, value: value ?? "", name: field.name });
 };
 export {
   SelectableCardField

package/dist/components/SelectableCardGroupField/index.cjs

@@ -6,21 +6,17 @@ const ui = require("@ultraviolet/ui");
 const reactHookForm = require("react-hook-form");
 const index = require("../../providers/ErrorContext/index.cjs");
 const SelectableCardGroupField = ({
-  className,
-  legend,
+  legend = "",
   control,
   name,
   onChange,
   required = false,
-  children,
-  label = "",
   error: customError,
-  helper,
   columns = 1,
-  showTick,
   type = "radio",
   shouldUnregister = false,
-  validate
+  validate,
+  ...props
 }) => {
   const {
     getError
@@ -39,7 +35,7 @@ const SelectableCardGroupField = ({
       validate
     }
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.SelectableCardGroup, { legend, name, type, showTick, value: field.value, onChange: (event) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.SelectableCardGroup, { ...props, legend, name, type, value: field.value, onChange: (event) => {
     if (type === "checkbox") {
       const fieldValue = field.value ?? [];
       if (fieldValue?.includes(event.currentTarget.value)) {
@@ -52,8 +48,8 @@ const SelectableCardGroupField = ({
     }
     onChange?.(event.currentTarget.value);
   }, error: getError({
-    label
-  }, error) ?? customError, className, columns, helper, required, children });
+    label: legend
+  }, error) ?? customError, columns, required });
 };
 SelectableCardGroupField.Card = ui.SelectableCardGroup.Card;
 exports.SelectableCardGroupField = SelectableCardGroupField;