@ultraviolet/form 6.0.0-beta.9 → 6.0.1

package/dist/components/SubmitErrorAlert/index.js

@@ -1,13 +1,9 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { Alert } from "@ultraviolet/ui";
 import { useFormState } from "react-hook-form";
-const SubmitErrorAlert = ({
-  className
-}) => {
-  const {
-    errors
-  } = useFormState();
+const SubmitErrorAlert = ({ className }) => {
+  const { errors } = useFormState();
   return errors?.root?.["submit"]?.message ? /* @__PURE__ */ jsx(Alert, { className, sentiment: "danger", children: errors.root["submit"].message }) : null;
 };
 export {

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

@@ -6,13 +6,14 @@ type SwitchButtonFieldProps<TFieldValues extends FieldValues, TFieldName extends
     name: FieldPath<TFieldValues>;
 };
 declare const SwitchButtonField: {
-    <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, size, control, shouldUnregister, onBlur, onChange, onFocus, tooltip, className, ...props }: SwitchButtonFieldProps<TFieldValues, TFieldName>): import("@emotion/react/jsx-runtime").JSX.Element;
-    Option: ({ value, children, "data-testid": dataTestId, disabled, tooltip, }: {
+    <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, size, control, shouldUnregister, onBlur, onChange, onFocus, tooltip, className, ...props }: SwitchButtonFieldProps<TFieldValues, TFieldName>): import("react/jsx-runtime").JSX.Element;
+    Option: ({ value, children, "data-testid": dataTestId, disabled, tooltip, style, }: {
         value: string;
         children: import("react").ReactNode;
         "data-testid"?: string;
         disabled?: boolean;
         tooltip?: string;
-    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+        style?: import("react").CSSProperties;
+    }) => import("react/jsx-runtime").JSX.Element;
 };
 export { SwitchButtonField };

package/dist/components/SwitchButtonField/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { SwitchButton } from "@ultraviolet/ui";
 import { useController } from "react-hook-form";
 const SwitchButtonField = ({
@@ -14,20 +14,33 @@ const SwitchButtonField = ({
   className,
   ...props
 }) => {
-  const {
-    field
-  } = useController({
+  const { field } = useController({
     control,
     name,
     shouldUnregister
   });
-  return /* @__PURE__ */ jsx(SwitchButton, { ...props, className, name, onBlur: (event) => {
-    field.onBlur();
-    onBlur?.(event);
-  }, onChange: (event) => {
-    field.onChange(event);
-    onChange?.(event.target);
-  }, onFocus, size, tooltip, value: field.value });
+  return /* @__PURE__ */ jsx(
+    SwitchButton,
+    {
+      ...props,
+      className,
+      name,
+      onBlur: (event) => {
+        field.onBlur();
+        onBlur?.(event);
+      },
+      onChange: (event) => {
+        field.onChange(event);
+        onChange?.(
+          event.target
+        );
+      },
+      onFocus,
+      size,
+      tooltip,
+      value: field.value
+    }
+  );
 };
 SwitchButtonField.Option = SwitchButton.Option;
 export {

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

@@ -5,4 +5,4 @@ import type { BaseFieldProps } from '../../types';
 export type TagInputFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TFieldName> & Omit<ComponentProps<typeof TagInput>, 'name' | 'onChange' | 'value'> & {
     regex?: (RegExp | RegExp[])[];
 };
-export declare const TagInputField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ regex: regexes, control, name, onChange, required, shouldUnregister, label, validate, "aria-label": ariaLabel, ...props }: TagInputFieldProps<TFieldValues, TFieldName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const TagInputField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ regex: regexes, control, name, onChange, required, shouldUnregister, label, validate, "aria-label": ariaLabel, ...props }: TagInputFieldProps<TFieldValues, TFieldName>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/TagInputField/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { TagInput } from "@ultraviolet/ui";
 import { useController } from "react-hook-form";
 import { validateRegex } from "../../utils/validateRegex.js";
@@ -16,14 +16,10 @@ const TagInputField = ({
   "aria-label": ariaLabel,
   ...props
 }) => {
-  const {
-    getError
-  } = useErrors();
+  const { getError } = useErrors();
   const {
     field,
-    fieldState: {
-      error
-    }
+    fieldState: { error }
   } = useController({
     control,
     name,
@@ -38,13 +34,24 @@ const TagInputField = ({
       }
     }
   });
-  return /* @__PURE__ */ jsx(TagInput, { ...props, "aria-label": ariaLabel, error: getError({
-    label: label ?? ariaLabel ?? name,
-    regex: regexes
-  }, error), label, name: field.name, onChange: (newTags) => {
-    field.onChange(newTags);
-    onChange?.(newTags);
-  }, value: field.value });
+  return /* @__PURE__ */ jsx(
+    TagInput,
+    {
+      ...props,
+      "aria-label": ariaLabel,
+      error: getError(
+        { label: label ?? ariaLabel ?? name, regex: regexes },
+        error
+      ),
+      label,
+      name: field.name,
+      onChange: (newTags) => {
+        field.onChange(newTags);
+        onChange?.(newTags);
+      },
+      value: field.value
+    }
+  );
 };
 export {
   TagInputField

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

@@ -9,4 +9,4 @@ export type TextAreaFieldProps<TFieldValues extends FieldValues, TFieldName exte
 /**
  * This component offers a form field based on Ultraviolet UI TextArea component
  */
-export declare const TextAreaField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ control, label, onChange, minLength, maxLength, name, onBlur, onKeyDown, required, regex: regexes, submitOnEnter, validate, "aria-label": ariaLabel, ...props }: TextAreaFieldProps<TFieldValues, TFieldName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const TextAreaField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ control, label, onChange, minLength, maxLength, name, onBlur, onKeyDown, required, regex: regexes, submitOnEnter, validate, "aria-label": ariaLabel, ...props }: TextAreaFieldProps<TFieldValues, TFieldName>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/TextAreaField/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { TextArea } from "@ultraviolet/ui";
 import { useController } from "react-hook-form";
 import { validateRegex } from "../../utils/validateRegex.js";
@@ -20,14 +20,10 @@ const TextAreaField = ({
   "aria-label": ariaLabel,
   ...props
 }) => {
-  const {
-    getError
-  } = useErrors();
+  const { getError } = useErrors();
   const {
     field,
-    fieldState: {
-      error
-    }
+    fieldState: { error }
   } = useController({
     control,
     name,
@@ -47,9 +43,7 @@ const TextAreaField = ({
     if (submitOnEnter && event.key === "Enter" && !event.shiftKey) {
       event.preventDefault();
       event.stopPropagation();
-      const {
-        form
-      } = event.currentTarget;
+      const { form } = event.currentTarget;
       if (form) {
         const submitEvent = new Event("submit", {
           bubbles: true,
@@ -61,23 +55,37 @@ const TextAreaField = ({
       onKeyDown?.(event);
     }
   };
-  return /* @__PURE__ */ jsx(TextArea, { ...props, error: getError({
-    label: label ?? ariaLabel ?? name,
-    maxLength,
-    minLength,
-    regex: regexes,
-    value: field.value
-  }, error), maxLength, minLength, name, onBlur: (event) => {
-    onBlur?.(event);
-    field.onBlur();
-  }, onChange: (event) => {
-    field.onChange(event);
-    onChange?.(event);
-  }, onKeyDown: onKeyDownHandler, required, value: field.value, ...label ? {
-    label
-  } : {
-    "aria-label": ariaLabel
-  } });
+  return /* @__PURE__ */ jsx(
+    TextArea,
+    {
+      ...props,
+      error: getError(
+        {
+          label: label ?? ariaLabel ?? name,
+          maxLength,
+          minLength,
+          regex: regexes,
+          value: field.value
+        },
+        error
+      ),
+      maxLength,
+      minLength,
+      name,
+      onBlur: (event) => {
+        onBlur?.(event);
+        field.onBlur();
+      },
+      onChange: (event) => {
+        field.onChange(event);
+        onChange?.(event);
+      },
+      onKeyDown: onKeyDownHandler,
+      required,
+      value: field.value,
+      ...label ? { label } : { "aria-label": ariaLabel }
+    }
+  );
 };
 export {
   TextAreaField

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

@@ -8,5 +8,5 @@ type TextInputFieldProps<TFieldValues extends FieldValues, TFieldName extends Fi
 /**
  * This component offers a form field based on Ultraviolet UI TextInput component
  */
-export declare const TextInputField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ regex: regexes, onChange, label, required, name, onBlur, minLength, maxLength, "aria-label": ariaLabel, shouldUnregister, validate, control, ...props }: TextInputFieldProps<TFieldValues, TFieldName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const TextInputField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ regex: regexes, onChange, label, required, name, onBlur, minLength, maxLength, "aria-label": ariaLabel, shouldUnregister, validate, control, ...props }: TextInputFieldProps<TFieldValues, TFieldName>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/TextInputField/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { TextInput } from "@ultraviolet/ui";
 import { useController } from "react-hook-form";
 import { validateRegex } from "../../utils/validateRegex.js";
@@ -19,14 +19,10 @@ const TextInputField = ({
   control,
   ...props
 }) => {
-  const {
-    getError
-  } = useErrors();
+  const { getError } = useErrors();
   const {
     field,
-    fieldState: {
-      error
-    }
+    fieldState: { error }
   } = useController({
     control,
     name,
@@ -43,19 +39,39 @@ const TextInputField = ({
     },
     shouldUnregister
   });
-  return /* @__PURE__ */ jsx(TextInput, { ...props, "aria-label": ariaLabel, error: getError({
-    label: label ?? ariaLabel ?? name,
-    maxLength,
-    minLength,
-    regex: regexes,
-    value: field.value
-  }, error), label, maxLength, minLength, name, onBlur: (event) => {
-    onBlur?.(event);
-    field.onBlur();
-  }, onChange: (event) => {
-    field.onChange(event);
-    onChange?.(event.target.value);
-  }, required, value: field.value === void 0 ? "" : field.value });
+  return /* @__PURE__ */ jsx(
+    TextInput,
+    {
+      ...props,
+      "aria-label": ariaLabel,
+      error: getError(
+        {
+          label: label ?? ariaLabel ?? name,
+          maxLength,
+          minLength,
+          regex: regexes,
+          value: field.value
+        },
+        error
+      ),
+      label,
+      maxLength,
+      minLength,
+      name,
+      onBlur: (event) => {
+        onBlur?.(event);
+        field.onBlur();
+      },
+      onChange: (event) => {
+        field.onChange(event);
+        onChange?.(
+          event.target.value
+        );
+      },
+      required,
+      value: field.value === void 0 ? "" : field.value
+    }
+  );
 };
 export {
   TextInputField

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

@@ -7,5 +7,5 @@ type TimeInputFieldProps<TFieldValues extends FieldValues, TFieldName extends Fi
  * This component offers a form field based on Ultraviolet UI TimeInput component
  *  @experimental This component is experimental and may be subject to breaking changes in the future.
  */
-export declare const TimeInputField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ onChange, label, required, name, onBlur, "aria-label": ariaLabel, shouldUnregister, control, ...props }: TimeInputFieldProps<TFieldValues, TFieldName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const TimeInputField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ onChange, label, required, name, onBlur, "aria-label": ariaLabel, shouldUnregister, control, ...props }: TimeInputFieldProps<TFieldValues, TFieldName>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/TimeInputField/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { TimeInput } from "@ultraviolet/ui";
 import { useController } from "react-hook-form";
 import { useErrors } from "../../providers/ErrorContext/index.js";
@@ -14,14 +14,10 @@ const TimeInputField = ({
   control,
   ...props
 }) => {
-  const {
-    getError
-  } = useErrors();
+  const { getError } = useErrors();
   const {
     field,
-    fieldState: {
-      error
-    }
+    fieldState: { error }
   } = useController({
     control,
     name,
@@ -30,16 +26,30 @@ const TimeInputField = ({
     },
     shouldUnregister
   });
-  return /* @__PURE__ */ jsx(TimeInput, { ...props, error: getError({
-    label: label ?? ariaLabel ?? name,
-    value: field.value
-  }, error), label, onBlur: (event) => {
-    onBlur?.(event);
-    field.onBlur();
-  }, onChange: (value) => {
-    field.onChange(value);
-    onChange?.(value);
-  }, required, value: field.value });
+  return /* @__PURE__ */ jsx(
+    TimeInput,
+    {
+      ...props,
+      error: getError(
+        {
+          label: label ?? ariaLabel ?? name,
+          value: field.value
+        },
+        error
+      ),
+      label,
+      onBlur: (event) => {
+        onBlur?.(event);
+        field.onBlur();
+      },
+      onChange: (value) => {
+        field.onChange(value);
+        onChange?.(value);
+      },
+      required,
+      value: field.value
+    }
+  );
 };
 export {
   TimeInputField

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

@@ -6,5 +6,5 @@ type ToggleFieldProps<TFieldValues extends FieldValues, TFieldName extends Field
     parse?: (value: boolean) => PathValue<TFieldValues, TFieldName>;
     format?: (value: PathValue<TFieldValues, TFieldName>) => boolean;
 };
-export declare const ToggleField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, name, control, onChange, required, parse, format, shouldUnregister, validate, "aria-label": ariaLabel, ...props }: ToggleFieldProps<TFieldValues, TFieldName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ToggleField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, name, control, onChange, required, parse, format, shouldUnregister, validate, "aria-label": ariaLabel, ...props }: ToggleFieldProps<TFieldValues, TFieldName>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ToggleField/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { Toggle } from "@ultraviolet/ui";
 import { useController } from "react-hook-form";
 import { useErrors } from "../../providers/ErrorContext/index.js";
@@ -18,9 +18,7 @@ const ToggleField = ({
 }) => {
   const {
     field,
-    fieldState: {
-      error
-    }
+    fieldState: { error }
   } = useController({
     control,
     name,
@@ -30,25 +28,38 @@ const ToggleField = ({
     },
     shouldUnregister
   });
-  const {
-    getError
-  } = useErrors();
+  const { getError } = useErrors();
   const transformedValue = () => {
     if (format) {
       return format(field.value);
     }
     return field.value;
   };
-  return /* @__PURE__ */ jsx(Toggle, { ...props, checked: transformedValue(), error: getError({
-    label: typeof label === "string" ? label : ariaLabel ?? name
-  }, error), label, name: field.name, onChange: (event) => {
-    if (parse) {
-      field.onChange(parse(event.target.checked));
-    } else {
-      field.onChange(event);
+  return /* @__PURE__ */ jsx(
+    Toggle,
+    {
+      ...props,
+      checked: transformedValue(),
+      error: getError(
+        { label: typeof label === "string" ? label : ariaLabel ?? name },
+        error
+      ),
+      label,
+      name: field.name,
+      onChange: (event) => {
+        if (parse) {
+          field.onChange(parse(event.target.checked));
+        } else {
+          field.onChange(event);
+        }
+        onChange?.(
+          event.target.checked
+        );
+      },
+      ref: field.ref,
+      required
     }
-    onChange?.(event.target.checked);
-  }, ref: field.ref, required });
+  );
 };
 export {
   ToggleField

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

@@ -4,8 +4,8 @@ import type { FieldPath, FieldValues } from 'react-hook-form';
 import type { BaseFieldProps } from '../../types';
 type ToggleGroupFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TFieldName> & Omit<ComponentProps<typeof ToggleGroup>, 'value' | 'onChange'>;
 export declare const ToggleGroupField: {
-    <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ legend, control, onChange, error: customError, name, required, shouldUnregister, validate, ...props }: ToggleGroupFieldProps<TFieldValues, TFieldName>): import("@emotion/react/jsx-runtime").JSX.Element;
-    Toggle: ({ disabled, name, value, label, helper, error, className, "data-testid": dataTestId, }: Omit<{
+    <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ legend, control, onChange, error: customError, name, required, shouldUnregister, validate, ...props }: ToggleGroupFieldProps<TFieldValues, TFieldName>): import("react/jsx-runtime").JSX.Element;
+    Toggle: ({ disabled, name, value, label, helper, error, className, "data-testid": dataTestId, style, }: Omit<{
         id?: string;
         checked?: boolean;
         name?: string;
@@ -21,8 +21,8 @@ export declare const ToggleGroupField: {
         required?: boolean;
         error?: boolean | string;
         'data-testid'?: string;
-    } & Pick<import("react").InputHTMLAttributes<HTMLInputElement>, "value"> & import("react").RefAttributes<HTMLInputElement>, "required" | "onChange" | "checked"> & {
+    } & Pick<import("react").InputHTMLAttributes<HTMLInputElement>, "value" | "style"> & import("react").RefAttributes<HTMLInputElement>, "required" | "onChange" | "checked"> & {
         value: string;
-    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    }) => import("react/jsx-runtime").JSX.Element;
 };
 export {};

package/dist/components/ToggleGroupField/index.js

@@ -0,0 +1,61 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { ToggleGroup } from "@ultraviolet/ui";
+import { useController } from "react-hook-form";
+import { useErrors } from "../../providers/ErrorContext/index.js";
+const ToggleGroupField = ({
+  legend = "",
+  control,
+  onChange,
+  error: customError,
+  name,
+  required = false,
+  shouldUnregister = false,
+  validate,
+  ...props
+}) => {
+  const { getError } = useErrors();
+  const {
+    field,
+    fieldState: { error }
+  } = useController({
+    control,
+    name,
+    rules: {
+      validate: {
+        ...required ? { required: (value2) => value2.length > 0 } : void 0,
+        ...validate
+      }
+    },
+    shouldUnregister
+  });
+  const value = field.value;
+  return /* @__PURE__ */ jsx(
+    ToggleGroup,
+    {
+      ...props,
+      error: customError ?? getError({ label: legend }, error),
+      legend,
+      name: field.name,
+      onChange: (event) => {
+        if (value.includes(event.currentTarget.value)) {
+          const newValue = value.filter(
+            (currentValue) => currentValue !== event.currentTarget.value
+          );
+          field.onChange(newValue);
+          onChange?.(newValue);
+        } else {
+          const newValue = [...value, event.currentTarget.value];
+          field.onChange(newValue);
+          onChange?.(newValue);
+        }
+      },
+      required,
+      value
+    }
+  );
+};
+ToggleGroupField.Toggle = ToggleGroup.Toggle;
+export {
+  ToggleGroupField
+};

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

@@ -5,5 +5,5 @@ import type { BaseFieldProps } from '../../types';
 type UnitInputFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TFieldName> & Omit<ComponentProps<typeof UnitInput>, 'value' | 'onChange' | 'label'> & {
     optionName?: string;
 };
-export declare const UnitInputField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, max, min, onChange, onChangeUnitValue, label, required, shouldUnregister, validate, control, optionName, ...props }: UnitInputFieldProps<TFieldValues, TFieldName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const UnitInputField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, max, min, onChange, onChangeUnitValue, label, required, shouldUnregister, validate, control, optionName, ...props }: UnitInputFieldProps<TFieldValues, TFieldName>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/UnitInputField/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { UnitInput } from "@ultraviolet/ui";
 import { useController } from "react-hook-form";
 import { useErrors } from "../../providers/ErrorContext/index.js";
@@ -17,22 +17,13 @@ const UnitInputField = ({
   optionName,
   ...props
 }) => {
-  const {
-    getError
-  } = useErrors();
-  const {
-    field: unitField
-  } = useController({
+  const { getError } = useErrors();
+  const { field: unitField } = useController({
     name: optionName ?? `${name}-unit`,
-    rules: {
-      required
-    },
+    rules: { required },
     shouldUnregister
   });
-  const {
-    field: valueField,
-    fieldState: valueFieldState
-  } = useController({
+  const { field: valueField, fieldState: valueFieldState } = useController({
     control,
     name,
     rules: {
@@ -43,15 +34,28 @@ const UnitInputField = ({
     },
     shouldUnregister
   });
-  return /* @__PURE__ */ jsx(UnitInput, { ...props, error: getError({
-    label
-  }, valueFieldState.error), label, max, min, name, onChange: (event) => {
-    valueField.onChange(event);
-    onChange?.(event);
-  }, onChangeUnitValue: (event) => {
-    unitField.onChange(event);
-    onChangeUnitValue?.(event);
-  }, required, unitValue: unitField.value, value: valueField.value });
+  return /* @__PURE__ */ jsx(
+    UnitInput,
+    {
+      ...props,
+      error: getError({ label }, valueFieldState.error),
+      label,
+      max,
+      min,
+      name,
+      onChange: (event) => {
+        valueField.onChange(event);
+        onChange?.(event);
+      },
+      onChangeUnitValue: (event) => {
+        unitField.onChange(event);
+        onChangeUnitValue?.(event);
+      },
+      required,
+      unitValue: unitField.value,
+      value: valueField.value
+    }
+  );
 };
 export {
   UnitInputField

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

@@ -3,5 +3,5 @@ import type { ComponentProps } from 'react';
 import type { FieldPath, FieldValues } from 'react-hook-form';
 import type { BaseFieldProps } from '../../types';
 type VerificationCodeFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TFieldName> & Omit<ComponentProps<typeof VerificationCode>, 'value'>;
-export declare const VerificationCodeField: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ fields, inputId, label, name, onChange, required, validate, ...props }: VerificationCodeFieldProps<TFieldValues, TName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const VerificationCodeField: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ fields, inputId, label, name, onChange, required, validate, ...props }: VerificationCodeFieldProps<TFieldValues, TName>) => import("react/jsx-runtime").JSX.Element;
 export {};