@ultraviolet/form 4.0.0-beta.9 → 4.0.1

package/dist/components/KeyValueField/index.cjs

@@ -5,7 +5,7 @@ const jsxRuntime = require("@emotion/react/jsx-runtime");
 const icons = require("@ultraviolet/icons");
 const ui = require("@ultraviolet/ui");
 const reactHookForm = require("react-hook-form");
-const index = require("../TextInputFieldV2/index.cjs");
+const index = require("../TextInputField/index.cjs");
 const KeyValueField = ({
   name,
   inputKey,
@@ -20,30 +20,30 @@ const KeyValueField = ({
     append,
     remove
   } = reactHookForm.useFieldArray({
-    name,
-    control
+    control,
+    name
   });
   const canAdd = fields.length !== void 0 && fields.length < maxSize;
   const maxSizeReachedTooltip = addButton.maxSizeReachedTooltip ?? `Cannot add more than ${maxSize} elements`;
   return /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { gap: 3, children: [
-    fields.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, { gap: 3, children: fields.map((field, index$1) => /* @__PURE__ */ jsxRuntime.jsxs(ui.Row, { templateColumns: "1fr 1fr auto", gap: 2, alignItems: "end", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(index.TextInputField, { readOnly, required: inputKey.required, name: `${name}.${index$1}.key`, label: inputKey.label, regex: inputKey.regex }),
-      /* @__PURE__ */ jsxRuntime.jsx(index.TextInputField, { readOnly, required: inputValue.required, name: `${name}.${index$1}.value`, label: inputValue.label, placeholder: inputValue.placeholder, type: inputValue.type, autoComplete: "off", regex: inputValue.regex }),
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { disabled: readOnly, "data-testid": `remove-button-${index$1}`, variant: "outlined", sentiment: "danger", size: "large", onClick: () => remove(index$1), children: /* @__PURE__ */ jsxRuntime.jsx(icons.DeleteIcon, {}) })
+    fields.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, { gap: 3, children: fields.map((field, index$1) => /* @__PURE__ */ jsxRuntime.jsxs(ui.Row, { alignItems: "end", gap: 2, templateColumns: "1fr 1fr auto", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(index.TextInputField, { label: inputKey.label, name: `${name}.${index$1}.key`, readOnly, regex: inputKey.regex, required: inputKey.required }),
+      /* @__PURE__ */ jsxRuntime.jsx(index.TextInputField, { autoComplete: "off", label: inputValue.label, name: `${name}.${index$1}.value`, placeholder: inputValue.placeholder, readOnly, regex: inputValue.regex, required: inputValue.required, type: inputValue.type }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { "data-testid": `remove-button-${index$1}`, disabled: readOnly, onClick: () => remove(index$1), sentiment: "danger", size: "large", variant: "outlined", children: /* @__PURE__ */ jsxRuntime.jsx(icons.DeleteIcon, {}) })
     ] }, field.id)) }) : null,
     /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, { direction: "row", justifyContent: "flex-start", children: /* @__PURE__ */ jsxRuntime.jsxs(
       ui.Button,
       {
         "data-testid": "add-button",
-        variant: "outlined",
-        sentiment: "primary",
-        fullWidth: addButton.fullWidth,
         disabled: !canAdd || readOnly,
-        tooltip: !canAdd ? maxSizeReachedTooltip : addButton.tooltip,
+        fullWidth: addButton.fullWidth,
         onClick: () => append({
           key: "",
           value: ""
         }),
+        sentiment: "primary",
+        tooltip: !canAdd ? maxSizeReachedTooltip : addButton.tooltip,
+        variant: "outlined",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(icons.PlusIcon, {}),
           addButton.name

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

@@ -1,15 +1,15 @@
 import { Button } from '@ultraviolet/ui';
 import type { ComponentProps } from 'react';
 import type { Control, FieldArrayPath, FieldValues } from 'react-hook-form';
-import { TextInputField as TextInputFieldV2 } from '../TextInputFieldV2';
+import { TextInputField } from '../TextInputField';
 type InputKeyProps = {
-    label: ComponentProps<typeof TextInputFieldV2>['label'];
-    required?: ComponentProps<typeof TextInputFieldV2>['required'];
-    regex?: ComponentProps<typeof TextInputFieldV2>['regex'];
+    label: ComponentProps<typeof TextInputField>['label'];
+    required?: ComponentProps<typeof TextInputField>['required'];
+    regex?: ComponentProps<typeof TextInputField>['regex'];
 };
 type InputValueProps = {
-    type?: ComponentProps<typeof TextInputFieldV2>['type'];
-    placeholder?: ComponentProps<typeof TextInputFieldV2>['placeholder'];
+    type?: ComponentProps<typeof TextInputField>['type'];
+    placeholder?: ComponentProps<typeof TextInputField>['placeholder'];
 } & InputKeyProps;
 type AddButtonProps = {
     name: ComponentProps<typeof Button>['children'];

package/dist/components/KeyValueField/index.js

@@ -3,7 +3,7 @@ import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { DeleteIcon, PlusIcon } from "@ultraviolet/icons";
 import { Stack, Row, Button } from "@ultraviolet/ui";
 import { useFieldArray } from "react-hook-form";
-import { TextInputField } from "../TextInputFieldV2/index.js";
+import { TextInputField } from "../TextInputField/index.js";
 const KeyValueField = ({
   name,
   inputKey,
@@ -18,30 +18,30 @@ const KeyValueField = ({
     append,
     remove
   } = useFieldArray({
-    name,
-    control
+    control,
+    name
   });
   const canAdd = fields.length !== void 0 && fields.length < maxSize;
   const maxSizeReachedTooltip = addButton.maxSizeReachedTooltip ?? `Cannot add more than ${maxSize} elements`;
   return /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
-    fields.length > 0 ? /* @__PURE__ */ jsx(Stack, { gap: 3, children: fields.map((field, index) => /* @__PURE__ */ jsxs(Row, { templateColumns: "1fr 1fr auto", gap: 2, alignItems: "end", children: [
-      /* @__PURE__ */ jsx(TextInputField, { readOnly, required: inputKey.required, name: `${name}.${index}.key`, label: inputKey.label, regex: inputKey.regex }),
-      /* @__PURE__ */ jsx(TextInputField, { readOnly, required: inputValue.required, name: `${name}.${index}.value`, label: inputValue.label, placeholder: inputValue.placeholder, type: inputValue.type, autoComplete: "off", regex: inputValue.regex }),
-      /* @__PURE__ */ jsx(Button, { disabled: readOnly, "data-testid": `remove-button-${index}`, variant: "outlined", sentiment: "danger", size: "large", onClick: () => remove(index), children: /* @__PURE__ */ jsx(DeleteIcon, {}) })
+    fields.length > 0 ? /* @__PURE__ */ jsx(Stack, { gap: 3, children: fields.map((field, index) => /* @__PURE__ */ jsxs(Row, { alignItems: "end", gap: 2, templateColumns: "1fr 1fr auto", children: [
+      /* @__PURE__ */ jsx(TextInputField, { label: inputKey.label, name: `${name}.${index}.key`, readOnly, regex: inputKey.regex, required: inputKey.required }),
+      /* @__PURE__ */ jsx(TextInputField, { autoComplete: "off", label: inputValue.label, name: `${name}.${index}.value`, placeholder: inputValue.placeholder, readOnly, regex: inputValue.regex, required: inputValue.required, type: inputValue.type }),
+      /* @__PURE__ */ jsx(Button, { "data-testid": `remove-button-${index}`, disabled: readOnly, onClick: () => remove(index), sentiment: "danger", size: "large", variant: "outlined", children: /* @__PURE__ */ jsx(DeleteIcon, {}) })
     ] }, field.id)) }) : null,
     /* @__PURE__ */ jsx(Stack, { direction: "row", justifyContent: "flex-start", children: /* @__PURE__ */ jsxs(
       Button,
       {
         "data-testid": "add-button",
-        variant: "outlined",
-        sentiment: "primary",
-        fullWidth: addButton.fullWidth,
         disabled: !canAdd || readOnly,
-        tooltip: !canAdd ? maxSizeReachedTooltip : addButton.tooltip,
+        fullWidth: addButton.fullWidth,
         onClick: () => append({
           key: "",
           value: ""
         }),
+        sentiment: "primary",
+        tooltip: !canAdd ? maxSizeReachedTooltip : addButton.tooltip,
+        variant: "outlined",
         children: [
           /* @__PURE__ */ jsx(PlusIcon, {}),
           addButton.name

package/dist/components/NumberInputField/index.cjs

@@ -4,26 +4,22 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const ui = require("@ultraviolet/ui");
 const reactHookForm = require("react-hook-form");
+const isInteger = require("../../validators/isInteger.cjs");
 const index = require("../../providers/ErrorContext/index.cjs");
 const NumberInputField = ({
-  disabled,
-  maxValue,
-  minValue,
+  control,
+  max = Number.MAX_SAFE_INTEGER,
+  min = 0,
   name,
   onChange,
   onBlur,
-  onFocus,
-  onMaxCrossed,
-  onMinCrossed,
-  required,
-  size,
   step,
-  text,
-  className,
   label,
+  "aria-label": ariaLabel,
+  required,
   shouldUnregister = false,
   validate,
-  control
+  ...props
 }) => {
   const {
     getError
@@ -34,26 +30,30 @@ const NumberInputField = ({
       error
     }
   } = reactHookForm.useController({
-    name,
-    shouldUnregister,
     control,
+    name,
     rules: {
-      max: maxValue,
-      min: minValue,
+      max,
+      min,
       required,
-      validate
-    }
+      validate: {
+        ...validate,
+        isInteger: isInteger.isInteger(step)
+      }
+    },
+    shouldUnregister
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.NumberInput, { name: field.name, value: field.value, disabled, onBlur: (event) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.NumberInput, { ...props, "aria-label": ariaLabel, error: getError({
+    isInteger: step,
+    label: label ?? ariaLabel ?? name,
+    max,
+    min
+  }, error), label, max, min, name: field.name, onBlur: (event) => {
     field.onBlur();
     onBlur?.(event);
-  }, onChange: (event) => {
-    field.onChange(event ?? null);
-    onChange?.(event);
-  }, onFocus, maxValue, minValue, onMinCrossed, onMaxCrossed, size, step, text, className, label, error: getError({
-    label: label ?? "",
-    max: maxValue,
-    min: minValue
-  }, error) });
+  }, onChange: (newValue) => {
+    field.onChange(newValue);
+    onChange?.(newValue);
+  }, required, step, value: field.value });
 };
 exports.NumberInputField = NumberInputField;

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

@@ -1,13 +1,7 @@
 import { NumberInput } from '@ultraviolet/ui';
-import type { ComponentProps, FocusEventHandler } from 'react';
+import type { ComponentProps } from 'react';
 import type { FieldPath, FieldValues } from 'react-hook-form';
 import type { BaseFieldProps } from '../../types';
-type NumberInputValueFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TFieldName> & Partial<Pick<ComponentProps<typeof NumberInput>, 'disabled' | 'maxValue' | 'minValue' | 'onMaxCrossed' | 'onMinCrossed' | 'size' | 'step' | 'text' | 'className'>> & {
-    onBlur?: FocusEventHandler<HTMLInputElement>;
-    onFocus?: FocusEventHandler<HTMLInputElement>;
-};
-/**
- * @deprecated This component is deprecated, use `NumberInputFieldV2` instead.
- */
-export declare const NumberInputField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ disabled, maxValue, minValue, name, onChange, onBlur, onFocus, onMaxCrossed, onMinCrossed, required, size, step, text, className, label, shouldUnregister, validate, control, }: NumberInputValueFieldProps<TFieldValues, TFieldName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+type NumberInputProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TFieldName> & Omit<ComponentProps<typeof NumberInput>, 'onChange'>;
+export declare const NumberInputField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ control, max, min, name, onChange, onBlur, step, label, "aria-label": ariaLabel, required, shouldUnregister, validate, ...props }: NumberInputProps<TFieldValues, TFieldName>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/NumberInputField/index.js

@@ -2,26 +2,22 @@
 import { jsx } from "@emotion/react/jsx-runtime";
 import { NumberInput } from "@ultraviolet/ui";
 import { useController } from "react-hook-form";
+import { isInteger } from "../../validators/isInteger.js";
 import { useErrors } from "../../providers/ErrorContext/index.js";
 const NumberInputField = ({
-  disabled,
-  maxValue,
-  minValue,
+  control,
+  max = Number.MAX_SAFE_INTEGER,
+  min = 0,
   name,
   onChange,
   onBlur,
-  onFocus,
-  onMaxCrossed,
-  onMinCrossed,
-  required,
-  size,
   step,
-  text,
-  className,
   label,
+  "aria-label": ariaLabel,
+  required,
   shouldUnregister = false,
   validate,
-  control
+  ...props
 }) => {
   const {
     getError
@@ -32,27 +28,31 @@ const NumberInputField = ({
       error
     }
   } = useController({
-    name,
-    shouldUnregister,
     control,
+    name,
     rules: {
-      max: maxValue,
-      min: minValue,
+      max,
+      min,
       required,
-      validate
-    }
+      validate: {
+        ...validate,
+        isInteger: isInteger(step)
+      }
+    },
+    shouldUnregister
   });
-  return /* @__PURE__ */ jsx(NumberInput, { name: field.name, value: field.value, disabled, onBlur: (event) => {
+  return /* @__PURE__ */ jsx(NumberInput, { ...props, "aria-label": ariaLabel, error: getError({
+    isInteger: step,
+    label: label ?? ariaLabel ?? name,
+    max,
+    min
+  }, error), label, max, min, name: field.name, onBlur: (event) => {
     field.onBlur();
     onBlur?.(event);
-  }, onChange: (event) => {
-    field.onChange(event ?? null);
-    onChange?.(event);
-  }, onFocus, maxValue, minValue, onMinCrossed, onMaxCrossed, size, step, text, className, label, error: getError({
-    label: label ?? "",
-    max: maxValue,
-    min: minValue
-  }, error) });
+  }, onChange: (newValue) => {
+    field.onChange(newValue);
+    onChange?.(newValue);
+  }, required, step, value: field.value });
 };
 export {
   NumberInputField

package/dist/components/RadioField/index.cjs

@@ -30,13 +30,13 @@ const RadioField = ({
       error
     }
   } = reactHookForm.useController({
-    name,
     control,
-    shouldUnregister,
+    name,
     rules: {
       required,
       validate
-    }
+    },
+    shouldUnregister
   });
   const errorLabel = react.useMemo(() => {
     if (label && typeof label === "string") {
@@ -47,14 +47,14 @@ const RadioField = ({
     }
     return name;
   }, [label, name, ariaLabel]);
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.Radio, { ...props, name: field.name, checked: field.value === value, disabled, error: getError({
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Radio, { ...props, checked: field.value === value, disabled, error: getError({
     label: errorLabel
-  }, error), onChange: () => {
-    field.onChange(value);
-    onChange?.(value);
-  }, onBlur: (event) => {
+  }, error), name: field.name, onBlur: (event) => {
     field.onBlur();
     onBlur?.(event);
+  }, onChange: () => {
+    field.onChange(value);
+    onChange?.(value);
   }, onFocus, required, value: value ?? "", ...label ? {
     label
   } : {

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

@@ -1,10 +1,7 @@
 import { Radio } from '@ultraviolet/ui';
-import { type ComponentProps } from 'react';
+import type { ComponentProps } from 'react';
 import type { FieldPath, FieldValues } from 'react-hook-form';
 import type { BaseFieldProps } from '../../types';
 type RadioFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = Omit<BaseFieldProps<TFieldValues, TFieldName>, 'label'> & Omit<ComponentProps<typeof Radio>, 'value' | 'onChange'>;
-/**
- * @deprecated This component is deprecated, use `RadioGroupField` instead.
- */
 export declare const RadioField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ control, disabled, name, onBlur, label, onChange, onFocus, required, value, shouldUnregister, validate, "aria-label": ariaLabel, ...props }: RadioFieldProps<TFieldValues, TFieldName>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/RadioField/index.js

@@ -28,13 +28,13 @@ const RadioField = ({
       error
     }
   } = useController({
-    name,
     control,
-    shouldUnregister,
+    name,
     rules: {
       required,
       validate
-    }
+    },
+    shouldUnregister
   });
   const errorLabel = useMemo(() => {
     if (label && typeof label === "string") {
@@ -45,14 +45,14 @@ const RadioField = ({
     }
     return name;
   }, [label, name, ariaLabel]);
-  return /* @__PURE__ */ jsx(Radio, { ...props, name: field.name, checked: field.value === value, disabled, error: getError({
+  return /* @__PURE__ */ jsx(Radio, { ...props, checked: field.value === value, disabled, error: getError({
     label: errorLabel
-  }, error), onChange: () => {
-    field.onChange(value);
-    onChange?.(value);
-  }, onBlur: (event) => {
+  }, error), name: field.name, onBlur: (event) => {
     field.onBlur();
     onBlur?.(event);
+  }, onChange: () => {
+    field.onChange(value);
+    onChange?.(value);
   }, onFocus, required, value: value ?? "", ...label ? {
     label
   } : {

package/dist/components/RadioGroupField/index.cjs

@@ -26,20 +26,20 @@ const RadioGroupField = ({
       error
     }
   } = reactHookForm.useController({
-    name,
     control,
-    shouldUnregister,
+    name,
     rules: {
       required,
       validate
-    }
+    },
+    shouldUnregister
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.RadioGroup, { ...props, name: field.name, onChange: (event) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.RadioGroup, { ...props, error: getError({
+    label: legend
+  }, error) ?? customError, legend, name: field.name, onChange: (event) => {
     field.onChange(event);
     onChange?.(event.target.value);
-  }, required, value: field.value, error: getError({
-    label: legend
-  }, error) ?? customError, legend, children });
+  }, required, value: field.value, children });
 };
 RadioGroupField.Radio = ui.RadioGroup.Radio;
 exports.RadioGroupField = RadioGroupField;

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

@@ -5,15 +5,25 @@ import type { BaseFieldProps } from '../../types';
 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, 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;
+    Radio: ({ onFocus, onBlur, disabled, error, value, label, helper, className, autoFocus, onKeyDown, tooltip, "data-testid": dataTestId, }: {
         value: string | number;
+        onBlur?: import("react").FocusEventHandler<HTMLInputElement> | undefined;
+        disabled?: boolean | undefined | undefined;
+        className?: string | undefined;
+        ref?: import("react").Ref<HTMLInputElement> | undefined;
+        label?: import("react").ReactNode;
+        autoFocus?: boolean | undefined | undefined;
+        id?: string | undefined | undefined;
+        onClick?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
+        onFocus?: import("react").FocusEventHandler<HTMLInputElement> | undefined;
+        tabIndex?: number | undefined | undefined;
+        error?: import("react").ReactNode;
         helper?: import("react").ReactNode;
-        className?: string;
-        'data-testid'?: string;
-        tooltip?: string;
-    } & Required<Pick<import("react").InputHTMLAttributes<HTMLInputElement>, "onChange">> & (Pick<import("react").InputHTMLAttributes<HTMLInputElement>, "required" | "onBlur" | "disabled" | "name" | "autoFocus" | "id" | "onClick" | "onFocus" | "tabIndex" | "checked" | "onKeyDown"> & import("node_modules/@ultraviolet/ui/dist/types").LabelProp)) & import("react").RefAttributes<HTMLInputElement>, "required" | "onChange" | "checked"> & {
-        name?: string;
+        'data-testid'?: string | undefined;
+        tooltip?: string | undefined;
+        'aria-label'?: string | undefined;
+        key?: import("react").Key | null | undefined;
+        onKeyDown?: import("react").KeyboardEventHandler<HTMLInputElement> | undefined;
     }) => import("@emotion/react/jsx-runtime").JSX.Element;
 };
 export {};

package/dist/components/RadioGroupField/index.js

@@ -24,20 +24,20 @@ const RadioGroupField = ({
       error
     }
   } = useController({
-    name,
     control,
-    shouldUnregister,
+    name,
     rules: {
       required,
       validate
-    }
+    },
+    shouldUnregister
   });
-  return /* @__PURE__ */ jsx(RadioGroup, { ...props, name: field.name, onChange: (event) => {
+  return /* @__PURE__ */ jsx(RadioGroup, { ...props, error: getError({
+    label: legend
+  }, error) ?? customError, legend, name: field.name, onChange: (event) => {
     field.onChange(event);
     onChange?.(event.target.value);
-  }, required, value: field.value, error: getError({
-    label: legend
-  }, error) ?? customError, legend, children });
+  }, required, value: field.value, children });
 };
 RadioGroupField.Radio = RadioGroup.Radio;
 export {

package/dist/components/SelectInputField/index.cjs

@@ -6,97 +6,45 @@ const ui = require("@ultraviolet/ui");
 const react = require("react");
 const reactHookForm = require("react-hook-form");
 const index = require("../../providers/ErrorContext/index.cjs");
-const identity = (x) => x;
 const SelectInputField = ({
-  animation,
-  animationDuration,
-  animationOnChange,
-  children,
-  className,
-  disabled,
-  // error: errorProp,
-  format: formatProp = identity,
-  // formatOnBlur,
-  id,
-  inputId,
-  isClearable,
-  isLoading,
-  isSearchable,
   label = "",
-  maxLength,
-  menuPortalTarget,
-  minLength,
-  multiple,
-  name,
   onBlur,
-  onChange,
-  onFocus,
-  options: optionsProp,
-  parse: parseProp = identity,
-  placeholder,
-  readOnly,
   required,
-  noTopLabel,
-  emptyState,
-  customStyle,
+  name,
+  "aria-label": ariaLabel,
   shouldUnregister = false,
-  "data-testid": dataTestId,
-  validate
+  control,
+  validate,
+  onChange,
+  multiselect,
+  ...props
 }) => {
-  const options = react.useMemo(() => optionsProp || react.Children.toArray(children).flat().filter(Boolean).map(({
-    props: {
-      children: labelChild,
-      ...option
-    }
-  }) => ({
-    ...option,
-    label: labelChild
-  })), [optionsProp, children]);
-  const parse = react.useMemo(() => multiple ? parseProp : (option) => parseProp(option?.value ?? null, name), [multiple, parseProp, name]);
-  const format = react.useCallback((val) => {
-    if (multiple) return formatProp(val, name);
-    const find = (opts, valueToFind) => opts?.find((option) => option.value === valueToFind);
-    let selected = "";
-    if (val && options) {
-      selected = find(options, val);
-      if (!selected) {
-        selected = options.map((curr) => find(curr.options, val)).filter(identity);
-        if (Array.isArray(selected) && selected.length === 0) {
-          selected = "";
-        }
-      }
-    }
-    return formatProp(selected, name);
-  }, [formatProp, multiple, name, options]);
-  const {
-    getError
-  } = index.useErrors();
   const {
     field,
     fieldState: {
       error
     }
   } = reactHookForm.useController({
+    control,
     name,
-    shouldUnregister,
     rules: {
       required,
-      minLength: minLength || required ? 1 : void 0,
-      maxLength,
       validate
-    }
+    },
+    shouldUnregister
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.SelectInput, { name: field.name, animation, animationDuration, animationOnChange, className, disabled, error: getError({
-    label,
-    minLength,
-    maxLength
-  }, error), id, inputId, isClearable, isLoading, isMulti: multiple, customStyle, isSearchable, menuPortalTarget, onBlur: (event) => {
+  const {
+    getError
+  } = index.useErrors();
+  const handleChange = react.useCallback((value) => {
+    onChange?.(value);
+    field.onChange(value);
+  }, [onChange, field]);
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.SelectInput, { "aria-label": ariaLabel, error: getError({
+    label: label ?? ariaLabel ?? name
+  }, error), label, multiselect, name: field.name, onBlur: (event) => {
     field.onBlur();
     onBlur?.(event);
-  }, onChange: (event, action) => {
-    field.onChange(parse(event));
-    onChange?.(event, action);
-  }, onFocus, options, placeholder, readOnly, noTopLabel, required, value: format(field.value), emptyState, "data-testid": dataTestId, children });
+  }, onChange: handleChange, required, value: field.value, ...props });
 };
-SelectInputField.Option = ui.SelectInput.Option;
 exports.SelectInputField = SelectInputField;