@saas-ui/forms 2.0.5 → 2.1.1

package/dist/index.mjs

@@ -1,19 +1,16 @@
-import * as React11 from 'react';
-import React11__default, { useState, useMemo } from 'react';
-import { useFormContext as useFormContext$1, useForm, FormProvider as FormProvider$1, useFieldArray, useWatch, get, Controller } from 'react-hook-form';
-export { Controller, appendErrors, useController, useFieldArray, useForm, useFormState, useWatch } from 'react-hook-form';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { forwardRef, NumberInput as NumberInput$1, NumberInputField, NumberInputStepper, NumberIncrementStepper, NumberDecrementStepper, InputRightElement, Button, InputGroup, Input, RadioGroup, Stack, Radio, createStylesContext, useFormControlContext, useMenuButton, chakra, useMultiStyleConfig, omitThemingProps, Menu, MenuItemOption, Select as Select$1, Switch, Checkbox, HStack, PinInput, FormControl, FormLabel, Text, useControllableState, useFormControl, MenuList, MenuOptionGroup, Box, FormHelperText, FormErrorMessage, PinInputField, useTheme, SimpleGrid, useStyleConfig, useMergeRefs, Textarea } from '@chakra-ui/react';
-import { ChevronUpIcon, ChevronDownIcon, useStepper, useStep, useStepperContext, StepsItem, Steps, StepperProvider } from '@saas-ui/core';
-import { ViewIcon, ViewOffIcon, MinusIcon, PlusIcon } from '@saas-ui/core/icons';
-import { dataAttr, cx, isFunction, runIfFn, callAllHandlers, get as get$1 } from '@chakra-ui/utils';
-import { createContext } from '@chakra-ui/react-utils';
+'use client'
 
 // src/form-context.tsx
-var FormContext = React11.createContext(null);
+import * as React from "react";
+import {
+  FormProvider as HookFormProvider,
+  useFormContext as useHookFormContext
+} from "react-hook-form";
+import { jsx } from "react/jsx-runtime";
+var FormContext = React.createContext(null);
 var useFormContext = () => {
-  const context = React11.useContext(FormContext);
-  const hookContext = useFormContext$1();
+  const context = React.useContext(FormContext);
+  const hookContext = useHookFormContext();
   if (!context) {
     throw new Error("FormProvider must be used within a Form component");
   }
@@ -30,8 +27,16 @@ var useFieldProps = (name) => {
 };
 var FormProvider = (props) => {
   const { children, fieldResolver, schema, fields, ...rest } = props;
-  return /* @__PURE__ */ jsx(FormProvider$1, { ...rest, children: /* @__PURE__ */ jsx(FormContext.Provider, { value: { fieldResolver, schema, fields }, children }) });
+  return /* @__PURE__ */ jsx(HookFormProvider, { ...rest, children: /* @__PURE__ */ jsx(FormContext.Provider, { value: { fieldResolver, schema, fields }, children }) });
 };
+
+// src/display-field.tsx
+import {
+  Text,
+  FormControl,
+  FormLabel
+} from "@chakra-ui/react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var DisplayField = ({
   name,
   label,
@@ -39,8 +44,8 @@ var DisplayField = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxs(FormControl, { ...props, children: [
-    label ? /* @__PURE__ */ jsx(FormLabel, { htmlFor: name, children: label }) : null,
-    /* @__PURE__ */ jsx(Text, { fontSize: "md", children: /* @__PURE__ */ jsx(FormValue, { name }) })
+    label ? /* @__PURE__ */ jsx2(FormLabel, { htmlFor: name, children: label }) : null,
+    /* @__PURE__ */ jsx2(Text, { fontSize: "md", children: /* @__PURE__ */ jsx2(FormValue, { name }) })
   ] });
 };
 DisplayField.displayName = "DisplayField";
@@ -49,18 +54,49 @@ var FormValue = ({ name }) => {
   return getValues(name) || null;
 };
 FormValue.displayName = "FormValue";
+
+// src/field.tsx
+import * as React6 from "react";
+
+// src/fields-context.tsx
+import React5 from "react";
+
+// src/default-fields.tsx
+import {
+  forwardRef as forwardRef8,
+  Input as Input2,
+  Textarea,
+  Checkbox,
+  Switch,
+  InputGroup as InputGroup2,
+  PinInputField,
+  HStack,
+  PinInput
+} from "@chakra-ui/react";
+
+// src/number-input/number-input.tsx
+import {
+  forwardRef,
+  NumberInput as ChakraNumberInput,
+  NumberInputField,
+  NumberInputStepper,
+  NumberIncrementStepper,
+  NumberDecrementStepper
+} from "@chakra-ui/react";
+import { ChevronDownIcon, ChevronUpIcon } from "@saas-ui/core";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var NumberInput = forwardRef((props, ref) => {
   const {
     hideStepper,
-    incrementIcon = /* @__PURE__ */ jsx(ChevronUpIcon, {}),
-    decrementIcon = /* @__PURE__ */ jsx(ChevronDownIcon, {}),
+    incrementIcon = /* @__PURE__ */ jsx3(ChevronUpIcon, {}),
+    decrementIcon = /* @__PURE__ */ jsx3(ChevronDownIcon, {}),
     ...rest
   } = props;
-  return /* @__PURE__ */ jsxs(NumberInput$1, { ...rest, ref, children: [
-    /* @__PURE__ */ jsx(NumberInputField, {}),
-    !hideStepper && /* @__PURE__ */ jsxs(NumberInputStepper, { children: [
-      /* @__PURE__ */ jsx(NumberIncrementStepper, { children: incrementIcon }),
-      /* @__PURE__ */ jsx(NumberDecrementStepper, { children: decrementIcon })
+  return /* @__PURE__ */ jsxs2(ChakraNumberInput, { ...rest, ref, children: [
+    /* @__PURE__ */ jsx3(NumberInputField, {}),
+    !hideStepper && /* @__PURE__ */ jsxs2(NumberInputStepper, { children: [
+      /* @__PURE__ */ jsx3(NumberIncrementStepper, { children: incrementIcon }),
+      /* @__PURE__ */ jsx3(NumberDecrementStepper, { children: decrementIcon })
     ] })
   ] });
 });
@@ -68,14 +104,30 @@ NumberInput.defaultProps = {
   hideStepper: false
 };
 NumberInput.displayName = "NumberInput";
-var InputRightButton = forwardRef(
+
+// src/password-input/password-input.tsx
+import { useState } from "react";
+import { forwardRef as forwardRef3, InputGroup, Input } from "@chakra-ui/react";
+import { ViewIcon, ViewOffIcon } from "@saas-ui/core/icons";
+
+// src/input-right-button/input-right-button.tsx
+import {
+  Button,
+  forwardRef as forwardRef2,
+  InputRightElement
+} from "@chakra-ui/react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var InputRightButton = forwardRef2(
   (props, ref) => {
-    return /* @__PURE__ */ jsx(InputRightElement, { w: "auto", px: "1", py: "1", alignItems: "stretch", children: /* @__PURE__ */ jsx(Button, { ref, height: "auto", ...props }) });
+    return /* @__PURE__ */ jsx4(InputRightElement, { w: "auto", px: "1", py: "1", alignItems: "stretch", children: /* @__PURE__ */ jsx4(Button, { ref, height: "auto", ...props }) });
   }
 );
 InputRightButton.id = "InputRightElement";
 InputRightButton.displayName = "InputRightButton";
-var PasswordInput = forwardRef(
+
+// src/password-input/password-input.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var PasswordInput = forwardRef3(
   (props, ref) => {
     const {
       viewIcon,
@@ -93,18 +145,18 @@ var PasswordInput = forwardRef(
     const label = show ? "Hide password" : "Show password";
     let icon;
     if (show) {
-      icon = viewIcon || /* @__PURE__ */ jsx(ViewIcon, {});
+      icon = viewIcon || /* @__PURE__ */ jsx5(ViewIcon, {});
     } else {
-      icon = viewOffIcon || /* @__PURE__ */ jsx(ViewOffIcon, {});
+      icon = viewOffIcon || /* @__PURE__ */ jsx5(ViewOffIcon, {});
     }
     const groupProps = {
       width: w || width,
       size,
       variant
     };
-    return /* @__PURE__ */ jsxs(InputGroup, { ...groupProps, children: [
+    return /* @__PURE__ */ jsxs3(InputGroup, { ...groupProps, children: [
       leftAddon,
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx5(
         Input,
         {
           ...inputProps,
@@ -113,7 +165,7 @@ var PasswordInput = forwardRef(
           autoComplete: show ? "off" : autoComplete
         }
       ),
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx5(
         InputRightButton,
         {
           onClick: handleClick,
@@ -126,16 +178,27 @@ var PasswordInput = forwardRef(
   }
 );
 PasswordInput.displayName = "PasswordInput";
+
+// src/radio/radio-input.tsx
+import {
+  forwardRef as forwardRef4,
+  Stack,
+  RadioGroup,
+  Radio
+} from "@chakra-ui/react";
+
+// src/utils.ts
+import * as React3 from "react";
 var mapNestedFields = (name, children) => {
-  return React11.Children.map(children, (child) => {
-    if (React11.isValidElement(child) && child.props.name) {
+  return React3.Children.map(children, (child) => {
+    if (React3.isValidElement(child) && child.props.name) {
       let childName = child.props.name;
       if (childName.includes(".")) {
         childName = childName.replace(/^.*\.(.*)/, "$1");
       } else if (childName.includes(".$")) {
         childName = childName.replace(/^.*\.\$(.*)/, "$1");
       }
-      return React11.cloneElement(child, {
+      return React3.cloneElement(child, {
         ...child.props,
         name: `${name}.${childName}`
       });
@@ -154,12 +217,15 @@ var mapOptions = (options) => {
     return option;
   });
 };
-var RadioInput = forwardRef(
+
+// src/radio/radio-input.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var RadioInput = forwardRef4(
   ({ options: optionsProp, spacing, direction, ...props }, ref) => {
     const { onBlur, onChange, ...groupProps } = props;
     const options = mapOptions(optionsProp);
-    return /* @__PURE__ */ jsx(RadioGroup, { onChange, ...groupProps, children: /* @__PURE__ */ jsx(Stack, { spacing, direction, children: options.map(({ value, label, ...radioProps }, i) => {
-      return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx6(RadioGroup, { onChange, ...groupProps, children: /* @__PURE__ */ jsx6(Stack, { spacing, direction, children: options.map(({ value, label, ...radioProps }, i) => {
+      return /* @__PURE__ */ jsx6(
         Radio,
         {
           onBlur,
@@ -174,8 +240,34 @@ var RadioInput = forwardRef(
   }
 );
 RadioInput.displayName = "RadioInput";
+
+// src/select/select.tsx
+import {
+  chakra,
+  forwardRef as forwardRef5,
+  Menu,
+  MenuList,
+  MenuItemOption,
+  MenuOptionGroup,
+  Button as Button2,
+  omitThemingProps,
+  useMultiStyleConfig,
+  useFormControlContext,
+  useMenuButton
+} from "@chakra-ui/react";
+import { cx, dataAttr } from "@chakra-ui/utils";
+import { ChevronDownIcon as ChevronDownIcon2 } from "@saas-ui/core";
+
+// src/select/select-context.tsx
+import {
+  createStylesContext,
+  useControllableState,
+  useFormControl
+} from "@chakra-ui/react";
+import { createContext as createContext2 } from "@chakra-ui/react-utils";
+import React4 from "react";
 var [SelectStylesProvider, useSelectStyles] = createStylesContext("SuiSelect");
-var [SelectProvider, useSelectContext] = createContext({
+var [SelectProvider, useSelectContext] = createContext2({
   strict: true
 });
 var useSelect = (props) => {
@@ -196,14 +288,14 @@ var useSelect = (props) => {
     onChange
   });
   const controlProps = useFormControl({ name });
-  const options = React11__default.useMemo(
+  const options = React4.useMemo(
     () => optionsProp && mapOptions(optionsProp),
     [optionsProp]
   );
   const handleChange = (value2) => {
     setCurrentValue(value2);
   };
-  const getDisplayValue = React11__default.useCallback(
+  const getDisplayValue = React4.useCallback(
     (value2) => {
       if (!options) {
         return value2;
@@ -217,7 +309,7 @@ var useSelect = (props) => {
     },
     [options]
   );
-  const displayValue = React11__default.useMemo(
+  const displayValue = React4.useMemo(
     () => currentValue ? (Array.isArray(currentValue) ? currentValue : [currentValue]).map(
       getDisplayValue
     ) : [],
@@ -236,7 +328,10 @@ var useSelect = (props) => {
     isDisabled
   };
 };
-var SelectButton = forwardRef(
+
+// src/select/select.tsx
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+var SelectButton = forwardRef5(
   (props, ref) => {
     var _a, _b, _c, _d, _e;
     const {
@@ -257,7 +352,7 @@ var SelectButton = forwardRef(
       onBlur,
       onFocus
     } = context || {};
-    const { rightIcon = /* @__PURE__ */ jsx(ChevronDownIcon, {}), ...rest } = props;
+    const { rightIcon = /* @__PURE__ */ jsx7(ChevronDownIcon2, {}), ...rest } = props;
     const focusStyles = (_a = styles.field) == null ? void 0 : _a._focusVisible;
     const readOnlyStyles = (_b = styles.field) == null ? void 0 : _b._readOnly;
     const invalid = (_c = styles.field) == null ? void 0 : _c._invalid;
@@ -276,14 +371,15 @@ var SelectButton = forwardRef(
       _invalid: invalid,
       minW: 0,
       ...styles.field,
-      h: "auto"
+      h: "auto",
+      ...props.sx
     };
     const buttonProps = useMenuButton(rest, ref);
-    return /* @__PURE__ */ jsx(
-      Button,
+    return /* @__PURE__ */ jsx7(
+      Button2,
       {
         ...buttonProps,
-        ...buttonStyles,
+        sx: buttonStyles,
         id: id || buttonProps.id,
         ...rest,
         onFocus,
@@ -294,7 +390,7 @@ var SelectButton = forwardRef(
         "data-focus": dataAttr(isFocused),
         "data-required": dataAttr(isRequired),
         rightIcon,
-        children: /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsx7(
           chakra.span,
           {
             __css: {
@@ -313,15 +409,15 @@ var SelectButton = forwardRef(
   }
 );
 SelectButton.displayName = "SelectButton";
-var Select = forwardRef((props, ref) => {
+var Select = forwardRef5((props, ref) => {
   const { name, children, isDisabled, multiple, ...rest } = props;
   const styles = useMultiStyleConfig("SuiSelect", props);
   const menuProps = omitThemingProps(rest);
   const context = useSelect(props);
   const { value, controlProps } = context;
-  return /* @__PURE__ */ jsx(SelectProvider, { value: context, children: /* @__PURE__ */ jsx(SelectStylesProvider, { value: styles, children: /* @__PURE__ */ jsx(Menu, { ...menuProps, closeOnSelect: !multiple, children: /* @__PURE__ */ jsxs(chakra.div, { className: cx("sui-select"), children: [
+  return /* @__PURE__ */ jsx7(SelectProvider, { value: context, children: /* @__PURE__ */ jsx7(SelectStylesProvider, { value: styles, children: /* @__PURE__ */ jsx7(Menu, { ...menuProps, closeOnSelect: !multiple, children: /* @__PURE__ */ jsxs4(chakra.div, { className: cx("sui-select"), children: [
     children,
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx7(
       chakra.input,
       {
         ...controlProps,
@@ -336,33 +432,56 @@ var Select = forwardRef((props, ref) => {
 });
 var SelectList = (props) => {
   const { defaultValue, value, options, multiple, onChange } = useSelectContext();
-  return /* @__PURE__ */ jsx(MenuList, { maxH: "100vh", overflowY: "auto", ...props, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx7(MenuList, { maxH: "100vh", overflowY: "auto", ...props, children: /* @__PURE__ */ jsx7(
     MenuOptionGroup,
     {
       defaultValue: defaultValue || value,
       value,
       onChange,
       type: multiple ? "checkbox" : "radio",
-      children: options ? options.map(({ value: value2, label, ...rest }, i) => /* @__PURE__ */ jsx(SelectOption, { value: value2, ...rest, children: label || value2 }, i)) : props.children
+      children: options ? options.map(({ value: value2, label, ...rest }, i) => /* @__PURE__ */ jsx7(SelectOption, { value: value2, ...rest, children: label || value2 }, i)) : props.children
     }
   ) });
 };
 Select.displayName = "Select";
-var SelectOption = forwardRef(
+var SelectOption = forwardRef5(
   (props, ref) => {
-    return /* @__PURE__ */ jsx(MenuItemOption, { ref, ...props });
+    return /* @__PURE__ */ jsx7(MenuItemOption, { ref, ...props });
   }
 );
 SelectOption.id = "MenuItemOption";
 SelectOption.displayName = "SelectOption";
-var NativeSelect = forwardRef(
+
+// src/select/native-select.tsx
+import {
+  forwardRef as forwardRef6,
+  Select as ChakraSelect
+} from "@chakra-ui/react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var NativeSelect = forwardRef6(
   ({ options, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(Select$1, { ref, ...props, children: children || (options == null ? void 0 : options.map(({ value, label }) => {
-      return /* @__PURE__ */ jsx("option", { value, children: label || value }, value);
+    return /* @__PURE__ */ jsx8(ChakraSelect, { ref, ...props, children: children || (options == null ? void 0 : options.map(({ value, label }) => {
+      return /* @__PURE__ */ jsx8("option", { value, children: label || value }, value);
     })) });
   }
 );
 NativeSelect.displayName = "NativeSelect";
+
+// src/create-field.tsx
+import { Controller } from "react-hook-form";
+import { forwardRef as forwardRef7, useMergeRefs } from "@chakra-ui/react";
+import { callAllHandlers } from "@chakra-ui/utils";
+
+// src/base-field.tsx
+import { get } from "react-hook-form";
+import {
+  Box,
+  FormControl as FormControl2,
+  FormLabel as FormLabel2,
+  FormHelperText,
+  FormErrorMessage
+} from "@chakra-ui/react";
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 var getError = (name, formState) => {
   return get(formState.errors, name);
 };
@@ -370,18 +489,21 @@ var BaseField = (props) => {
   const { name, label, help, hideLabel, children, ...controlProps } = props;
   const { formState } = useFormContext();
   const error = getError(name, formState);
-  return /* @__PURE__ */ jsxs(FormControl, { ...controlProps, isInvalid: !!error, children: [
-    label && !hideLabel ? /* @__PURE__ */ jsx(FormLabel, { children: label }) : null,
-    /* @__PURE__ */ jsxs(Box, { children: [
+  return /* @__PURE__ */ jsxs5(FormControl2, { ...controlProps, isInvalid: !!error, children: [
+    label && !hideLabel ? /* @__PURE__ */ jsx9(FormLabel2, { children: label }) : null,
+    /* @__PURE__ */ jsxs5(Box, { children: [
       children,
-      help && !(error == null ? void 0 : error.message) ? /* @__PURE__ */ jsx(FormHelperText, { children: help }) : null,
-      (error == null ? void 0 : error.message) && /* @__PURE__ */ jsx(FormErrorMessage, { children: error == null ? void 0 : error.message })
+      help && !(error == null ? void 0 : error.message) ? /* @__PURE__ */ jsx9(FormHelperText, { children: help }) : null,
+      (error == null ? void 0 : error.message) && /* @__PURE__ */ jsx9(FormErrorMessage, { children: error == null ? void 0 : error.message })
     ] })
   ] });
 };
 BaseField.displayName = "BaseField";
+
+// src/create-field.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
 var _createField = (InputComponent, { displayName, hideLabel, BaseField: BaseField2 }) => {
-  const Field2 = forwardRef((props, ref) => {
+  const Field2 = forwardRef7((props, ref) => {
     const {
       id,
       name,
@@ -398,7 +520,7 @@ var _createField = (InputComponent, { displayName, hideLabel, BaseField: BaseFie
       required: isRequired,
       ...rules
     };
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx10(
       BaseField2,
       {
         id,
@@ -410,7 +532,7 @@ var _createField = (InputComponent, { displayName, hideLabel, BaseField: BaseFie
         isInvalid,
         isReadOnly,
         isRequired,
-        children: /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsx10(
           InputComponent,
           {
             ref,
@@ -428,16 +550,16 @@ var _createField = (InputComponent, { displayName, hideLabel, BaseField: BaseFie
   return Field2;
 };
 var withControlledInput = (InputComponent) => {
-  return forwardRef(
+  return forwardRef7(
     ({ name, rules, ...inputProps }, ref) => {
       const { control } = useFormContext();
-      return /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsx10(
         Controller,
         {
           name,
           control,
           rules,
-          render: ({ field: { ref: _ref, ...field } }) => /* @__PURE__ */ jsx(
+          render: ({ field: { ref: _ref, ...field } }) => /* @__PURE__ */ jsx10(
             InputComponent,
             {
               ...field,
@@ -453,11 +575,11 @@ var withControlledInput = (InputComponent) => {
   );
 };
 var withUncontrolledInput = (InputComponent) => {
-  return forwardRef(
+  return forwardRef7(
     ({ name, rules, ...inputProps }, ref) => {
       const { register } = useFormContext();
       const { ref: _ref, ...field } = register(name, rules);
-      return /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsx10(
         InputComponent,
         {
           ...field,
@@ -485,11 +607,14 @@ var createField = (component, options) => {
   });
   return Field2;
 };
+
+// src/default-fields.tsx
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 var InputField = createField(
-  forwardRef(({ type = "text", leftAddon, rightAddon, size, ...rest }, ref) => {
-    const input = /* @__PURE__ */ jsx(Input, { type, size, ...rest, ref });
+  forwardRef8(({ type = "text", leftAddon, rightAddon, size, ...rest }, ref) => {
+    const input = /* @__PURE__ */ jsx11(Input2, { type, size, ...rest, ref });
     if (leftAddon || rightAddon) {
-      return /* @__PURE__ */ jsxs(InputGroup, { size, children: [
+      return /* @__PURE__ */ jsxs6(InputGroup2, { size, children: [
         leftAddon,
         input,
         rightAddon
@@ -505,22 +630,22 @@ var NumberInputField2 = createField(
   }
 );
 var PasswordInputField = createField(
-  forwardRef((props, ref) => /* @__PURE__ */ jsx(PasswordInput, { ref, ...props }))
+  forwardRef8((props, ref) => /* @__PURE__ */ jsx11(PasswordInput, { ref, ...props }))
 );
 var TextareaField = createField(Textarea);
 var SwitchField = createField(
-  forwardRef(({ type, value, ...rest }, ref) => {
-    return /* @__PURE__ */ jsx(Switch, { isChecked: !!value, ...rest, ref });
+  forwardRef8(({ type, value, ...rest }, ref) => {
+    return /* @__PURE__ */ jsx11(Switch, { isChecked: !!value, ...rest, ref });
   }),
   {
     isControlled: true
   }
 );
 var SelectField = createField(
-  forwardRef((props, ref) => {
-    return /* @__PURE__ */ jsxs(Select, { ref, ...props, children: [
-      /* @__PURE__ */ jsx(SelectButton, {}),
-      /* @__PURE__ */ jsx(SelectList, {})
+  forwardRef8((props, ref) => {
+    return /* @__PURE__ */ jsxs6(Select, { ref, ...props, children: [
+      /* @__PURE__ */ jsx11(SelectButton, {}),
+      /* @__PURE__ */ jsx11(SelectList, {})
     ] });
   }),
   {
@@ -528,8 +653,8 @@ var SelectField = createField(
   }
 );
 var CheckboxField = createField(
-  forwardRef(({ label, type, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(Checkbox, { ref, ...props, children: label });
+  forwardRef8(({ label, type, ...props }, ref) => {
+    return /* @__PURE__ */ jsx11(Checkbox, { ref, ...props, children: label });
   }),
   {
     hideLabel: true
@@ -542,13 +667,13 @@ var NativeSelectField = createField(NativeSelect, {
   isControlled: true
 });
 var PinField = createField(
-  forwardRef((props, ref) => {
+  forwardRef8((props, ref) => {
     const { pinLength = 4, pinType, spacing, ...inputProps } = props;
     const inputs = [];
     for (let i = 0; i < pinLength; i++) {
-      inputs.push(/* @__PURE__ */ jsx(PinInputField, { ref }, i));
+      inputs.push(/* @__PURE__ */ jsx11(PinInputField, { ref }, i));
     }
-    return /* @__PURE__ */ jsx(HStack, { spacing, children: /* @__PURE__ */ jsx(PinInput, { ...inputProps, type: pinType, children: inputs }) });
+    return /* @__PURE__ */ jsx11(HStack, { spacing, children: /* @__PURE__ */ jsx11(PinInput, { ...inputProps, type: pinType, children: inputs }) });
   }),
   {
     isControlled: true
@@ -569,28 +694,47 @@ var defaultFieldTypes = {
   pin: PinField,
   "native-select": NativeSelectField
 };
-var FieldsContext = React11__default.createContext(
+
+// src/fields-context.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+var FieldsContext = React5.createContext(
   null
 );
 var FieldsProvider = (props) => {
   const fields = { ...defaultFieldTypes, ...props.value };
-  return /* @__PURE__ */ jsx(FieldsContext.Provider, { value: fields, children: props.children });
+  return /* @__PURE__ */ jsx12(FieldsContext.Provider, { value: fields, children: props.children });
 };
 var useField = (type) => {
-  const context = React11__default.useContext(FieldsContext);
+  const context = React5.useContext(FieldsContext);
   return (context == null ? void 0 : context[type]) || InputField;
 };
+
+// src/field.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
 var defaultInputType = "text";
-var Field = React11.forwardRef(
+var Field = React6.forwardRef(
   (props, ref) => {
     const { type = defaultInputType, name } = props;
     const overrides = useFieldProps(name);
     const InputComponent = useField((overrides == null ? void 0 : overrides.type) || type);
-    return /* @__PURE__ */ jsx(InputComponent, { ref, ...props, ...overrides });
+    return /* @__PURE__ */ jsx13(InputComponent, { ref, ...props, ...overrides });
   }
 );
+
+// src/fields.tsx
+import * as React10 from "react";
+
+// src/layout.tsx
+import * as React7 from "react";
+import {
+  chakra as chakra2,
+  SimpleGrid,
+  useTheme
+} from "@chakra-ui/react";
+import { cx as cx2 } from "@chakra-ui/utils";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var FormLayoutItem = ({ children }) => {
-  return /* @__PURE__ */ jsx(chakra.div, { children });
+  return /* @__PURE__ */ jsx14(chakra2.div, { children });
 };
 FormLayoutItem.displayName = "FormLayoutItem";
 var FormLayout = ({ children, ...props }) => {
@@ -603,14 +747,14 @@ var FormLayout = ({ children, ...props }) => {
     ...defaultProps,
     ...props
   };
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx14(
     SimpleGrid,
     {
       ...gridProps,
-      className: cx("sui-form__layout", props.className),
-      children: React11.Children.map(children, (child) => {
-        if (React11.isValidElement(child)) {
-          return /* @__PURE__ */ jsx(FormLayoutItem, { children: child });
+      className: cx2("sui-form__layout", props.className),
+      children: React7.Children.map(children, (child) => {
+        if (React7.isValidElement(child)) {
+          return /* @__PURE__ */ jsx14(FormLayoutItem, { children: child });
         }
         return child;
       })
@@ -618,10 +762,26 @@ var FormLayout = ({ children, ...props }) => {
   );
 };
 FormLayout.displayName = "FormLayout";
-var [ArrayFieldProvider, useArrayFieldContext] = createContext({
+
+// src/array-field.tsx
+import * as React9 from "react";
+import {
+  chakra as chakra3,
+  forwardRef as forwardRef11,
+  Button as Button3
+} from "@chakra-ui/react";
+import { PlusIcon, MinusIcon } from "@saas-ui/core/icons";
+
+// src/use-array-field.tsx
+import * as React8 from "react";
+import {
+  useFieldArray
+} from "react-hook-form";
+import { createContext as createContext3 } from "@chakra-ui/react-utils";
+var [ArrayFieldProvider, useArrayFieldContext] = createContext3({
   name: "ArrayFieldContext"
 });
-var [ArrayFieldRowProvider, useArrayFieldRowContext] = createContext({
+var [ArrayFieldRowProvider, useArrayFieldRowContext] = createContext3({
   name: "ArrayFieldRowContext"
 });
 var useArrayField = ({
@@ -648,7 +808,7 @@ var useArrayField = ({
 var useArrayFieldRow = ({ index }) => {
   const { clearErrors } = useFormContext();
   const { name, remove, fields } = useArrayFieldContext();
-  React11.useEffect(() => {
+  React8.useEffect(() => {
     clearErrors(name);
   }, []);
   return {
@@ -656,7 +816,7 @@ var useArrayFieldRow = ({ index }) => {
     isFirst: index === 0,
     isLast: index === fields.length - 1,
     name: `${name}.${index}`,
-    remove: React11.useCallback(() => {
+    remove: React8.useCallback(() => {
       clearErrors(name);
       remove(index);
     }, [index])
@@ -681,14 +841,18 @@ var useArrayFieldAddButton = () => {
     isDisabled
   };
 };
+
+// src/array-field.tsx
+import { isFunction } from "@chakra-ui/utils";
+import { Fragment, jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
 var ArrayFieldRow = ({
   children,
   index,
   ...rowFieldsProps
 }) => {
-  return /* @__PURE__ */ jsxs(ArrayFieldRowContainer, { index, children: [
-    /* @__PURE__ */ jsx(ArrayFieldRowFields, { ...rowFieldsProps, children }),
-    /* @__PURE__ */ jsx(ArrayFieldRemoveButton, {})
+  return /* @__PURE__ */ jsxs7(ArrayFieldRowContainer, { index, children: [
+    /* @__PURE__ */ jsx15(ArrayFieldRowFields, { ...rowFieldsProps, children }),
+    /* @__PURE__ */ jsx15(ArrayFieldRemoveButton, {})
   ] });
 };
 ArrayFieldRow.displayName = "ArrayFieldRow";
@@ -697,7 +861,7 @@ var ArrayFieldRowFields = ({
   ...layoutProps
 }) => {
   const { name } = useArrayFieldRowContext();
-  return /* @__PURE__ */ jsx(FormLayout, { flex: "1", mr: "2", ...layoutProps, children: mapNestedFields(name, children) });
+  return /* @__PURE__ */ jsx15(FormLayout, { flex: "1", mr: "2", ...layoutProps, children: mapNestedFields(name, children) });
 };
 ArrayFieldRowFields.displayName = "ArrayFieldRowFields";
 var ArrayFieldRowContainer = ({
@@ -713,33 +877,33 @@ var ArrayFieldRowContainer = ({
     width: "100%",
     mb: 4
   };
-  return /* @__PURE__ */ jsx(ArrayFieldRowProvider, { value: context, children: /* @__PURE__ */ jsx(chakra.div, { ...rest, __css: styles, children }) });
+  return /* @__PURE__ */ jsx15(ArrayFieldRowProvider, { value: context, children: /* @__PURE__ */ jsx15(chakra3.div, { ...rest, __css: styles, children }) });
 };
 ArrayFieldRowContainer.displayName = "ArrayFieldRowContainer";
 var ArrayFieldRemoveButton = (props) => {
-  return /* @__PURE__ */ jsx(Button, { "aria-label": "Remove row", ...useArrayFieldRemoveButton(), ...props, children: props.children || /* @__PURE__ */ jsx(MinusIcon, {}) });
+  return /* @__PURE__ */ jsx15(Button3, { "aria-label": "Remove row", ...useArrayFieldRemoveButton(), ...props, children: props.children || /* @__PURE__ */ jsx15(MinusIcon, {}) });
 };
 ArrayFieldRemoveButton.displayName = "ArrayFieldRemoveButton";
 var ArrayFieldAddButton = (props) => {
-  return /* @__PURE__ */ jsx(
-    Button,
+  return /* @__PURE__ */ jsx15(
+    Button3,
     {
       "aria-label": "Add row",
       float: "right",
       ...useArrayFieldAddButton(),
       ...props,
-      children: props.children || /* @__PURE__ */ jsx(PlusIcon, {})
+      children: props.children || /* @__PURE__ */ jsx15(PlusIcon, {})
     }
   );
 };
 ArrayFieldAddButton.displayName = "ArrayFieldAddButton";
-var ArrayField = forwardRef(
+var ArrayField = forwardRef11(
   (props, ref) => {
     const { children, ...containerProps } = props;
-    const rowFn = isFunction(children) ? children : (fields) => /* @__PURE__ */ jsx(Fragment, { children: fields.map(({ id }, index) => /* @__PURE__ */ jsx(ArrayFieldRow, { index, children }, id)) || null });
-    return /* @__PURE__ */ jsxs(ArrayFieldContainer, { ref, ...containerProps, children: [
-      /* @__PURE__ */ jsx(ArrayFieldRows, { children: rowFn }),
-      /* @__PURE__ */ jsx(ArrayFieldAddButton, {})
+    const rowFn = isFunction(children) ? children : (fields) => /* @__PURE__ */ jsx15(Fragment, { children: fields.map(({ id }, index) => /* @__PURE__ */ jsx15(ArrayFieldRow, { index, children }, id)) || null });
+    return /* @__PURE__ */ jsxs7(ArrayFieldContainer, { ref, ...containerProps, children: [
+      /* @__PURE__ */ jsx15(ArrayFieldRows, { children: rowFn }),
+      /* @__PURE__ */ jsx15(ArrayFieldAddButton, {})
     ] });
   }
 );
@@ -751,7 +915,7 @@ var ArrayFieldRows = ({
   return children(fields);
 };
 ArrayFieldRows.displayName = "ArrayFieldRows";
-var ArrayFieldContainer = React11.forwardRef(
+var ArrayFieldContainer = React9.forwardRef(
   ({
     name,
     defaultValue,
@@ -769,14 +933,22 @@ var ArrayFieldContainer = React11.forwardRef(
       min: min || (overrides == null ? void 0 : overrides.min),
       max: max || (overrides == null ? void 0 : overrides.max)
     });
-    React11.useImperativeHandle(ref, () => context, [ref, context]);
-    return /* @__PURE__ */ jsx(ArrayFieldProvider, { value: context, children: /* @__PURE__ */ jsx(BaseField, { name, ...fieldProps, ...overrides, children }) });
+    React9.useImperativeHandle(ref, () => context, [ref, context]);
+    return /* @__PURE__ */ jsx15(ArrayFieldProvider, { value: context, children: /* @__PURE__ */ jsx15(BaseField, { name, ...fieldProps, ...overrides, children }) });
   }
 );
 ArrayFieldContainer.displayName = "ArrayFieldContainer";
+
+// src/object-field.tsx
+import {
+  FormControl as FormControl3,
+  FormLabel as FormLabel3,
+  useStyleConfig
+} from "@chakra-ui/react";
+import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
 var FormLegend = (props) => {
   const styles = useStyleConfig("SuiFormLegend");
-  return /* @__PURE__ */ jsx(FormLabel, { as: "legend", sx: styles, ...props });
+  return /* @__PURE__ */ jsx16(FormLabel3, { as: "legend", sx: styles, ...props });
 };
 var ObjectField = (props) => {
   const {
@@ -791,9 +963,9 @@ var ObjectField = (props) => {
   const { hideLabel, columns, spacing, ...overrides } = useFieldProps(
     name
   );
-  return /* @__PURE__ */ jsxs(FormControl, { name, as: "fieldset", ...fieldProps, ...overrides, children: [
-    /* @__PURE__ */ jsx(FormLegend, { display: hideLabelProp || hideLabel ? "none" : "block", children: label }),
-    /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs8(FormControl3, { name, as: "fieldset", ...fieldProps, ...overrides, children: [
+    /* @__PURE__ */ jsx16(FormLegend, { display: hideLabelProp || hideLabel ? "none" : "block", children: label }),
+    /* @__PURE__ */ jsx16(
       FormLayout,
       {
         columns: columnsProp || columns,
@@ -804,10 +976,13 @@ var ObjectField = (props) => {
   ] });
 };
 ObjectField.displayName = "ObjectField";
+
+// src/fields.tsx
+import { jsx as jsx17 } from "react/jsx-runtime";
 var mapNestedFields2 = (resolver, name) => {
   var _a;
   return (_a = resolver.getNestedFields(name)) == null ? void 0 : _a.map(
-    ({ name: name2, type, ...nestedFieldProps }, i) => /* @__PURE__ */ jsx(
+    ({ name: name2, type, ...nestedFieldProps }, i) => /* @__PURE__ */ jsx17(
       Field,
       {
         name: name2,
@@ -827,10 +1002,10 @@ var AutoFields = ({
   const context = useFormContext();
   const schema = schemaProp || context.schema;
   const fieldResolver = fieldResolverProp || context.fieldResolver;
-  const resolver = React11.useMemo(() => fieldResolver, [schema, fieldResolver]);
-  const fields = React11.useMemo(() => resolver == null ? void 0 : resolver.getFields(), [resolver]);
+  const resolver = React10.useMemo(() => fieldResolver, [schema, fieldResolver]);
+  const fields = React10.useMemo(() => resolver == null ? void 0 : resolver.getFields(), [resolver]);
   const form = useFormContext();
-  React11.useEffect(() => {
+  React10.useEffect(() => {
     var _a;
     if (focusFirstField && ((_a = fields == null ? void 0 : fields[0]) == null ? void 0 : _a.name)) {
       form.setFocus(fields[0].name);
@@ -839,7 +1014,7 @@ var AutoFields = ({
   if (!resolver) {
     return null;
   }
-  return /* @__PURE__ */ jsx(FormLayout, { ...props, children: fields == null ? void 0 : fields.map(
+  return /* @__PURE__ */ jsx17(FormLayout, { ...props, children: fields == null ? void 0 : fields.map(
     ({
       name,
       type,
@@ -847,16 +1022,21 @@ var AutoFields = ({
       ...fieldProps
     }) => {
       if (type === "array") {
-        return /* @__PURE__ */ jsx(ArrayField, { name, ...fieldProps, children: mapNestedFields2(resolver, name) }, name);
+        return /* @__PURE__ */ jsx17(ArrayField, { name, ...fieldProps, children: mapNestedFields2(resolver, name) }, name);
       } else if (type === "object") {
-        return /* @__PURE__ */ jsx(ObjectField, { name, ...fieldProps, children: mapNestedFields2(resolver, name) }, name);
+        return /* @__PURE__ */ jsx17(ObjectField, { name, ...fieldProps, children: mapNestedFields2(resolver, name) }, name);
       }
-      return /* @__PURE__ */ jsx(Field, { name, type, ...fieldProps }, name);
+      return /* @__PURE__ */ jsx17(Field, { name, type, ...fieldProps }, name);
     }
   ) });
 };
 AutoFields.displayName = "Fields";
-var SubmitButton = forwardRef(
+
+// src/submit-button.tsx
+import { useFormContext as useFormContext2 } from "react-hook-form";
+import { Button as Button4, forwardRef as forwardRef12 } from "@chakra-ui/react";
+import { jsx as jsx18 } from "react/jsx-runtime";
+var SubmitButton = forwardRef12(
   (props, ref) => {
     const {
       children = "Submit",
@@ -866,10 +1046,10 @@ var SubmitButton = forwardRef(
       isLoading,
       ...rest
     } = props;
-    const { formState } = useFormContext$1();
+    const { formState } = useFormContext2();
     const isDisabled = disableIfUntouched && !formState.isDirty || disableIfInvalid && !formState.isValid || isDisabledProp;
-    return /* @__PURE__ */ jsx(
-      Button,
+    return /* @__PURE__ */ jsx18(
+      Button4,
       {
         ...rest,
         ref,
@@ -887,6 +1067,11 @@ SubmitButton.defaultProps = {
   disableIfInvalid: false
 };
 SubmitButton.displayName = "SubmitButton";
+
+// src/display-if.tsx
+import {
+  useWatch
+} from "react-hook-form";
 var DisplayIf = ({
   children,
   name,
@@ -905,7 +1090,28 @@ var DisplayIf = ({
   return condition(value, context) ? children : null;
 };
 DisplayIf.displayName = "DisplayIf";
-var [StepFormProvider, useStepFormContext] = createContext({
+
+// src/step-form.tsx
+import * as React12 from "react";
+import {
+  chakra as chakra4,
+  Button as Button5
+} from "@chakra-ui/react";
+import { callAllHandlers as callAllHandlers2, cx as cx3 } from "@chakra-ui/utils";
+import {
+  Steps,
+  StepsItem,
+  useStepperContext
+} from "@saas-ui/core";
+
+// src/use-step-form.tsx
+import * as React11 from "react";
+import { createContext as createContext4 } from "@chakra-ui/react-utils";
+import {
+  useStepper,
+  useStep
+} from "@saas-ui/core";
+var [StepFormProvider, useStepFormContext] = createContext4({
   name: "StepFormContext",
   errorMessage: "useStepFormContext: `context` is undefined. Seems you forgot to wrap step form components in `<StepForm />`"
 });
@@ -981,6 +1187,9 @@ function useFormStep(props) {
     ...steps[name] || { name, schema }
   };
 }
+
+// src/step-form.tsx
+import { jsx as jsx19 } from "react/jsx-runtime";
 var FormStepper = (props) => {
   const { activeIndex, setIndex } = useStepperContext();
   const {
@@ -993,10 +1202,10 @@ var FormStepper = (props) => {
     render,
     ...rest
   } = props;
-  const elements = React11.Children.map(children, (child) => {
-    if (React11.isValidElement(child) && (child == null ? void 0 : child.type) === FormStep) {
+  const elements = React12.Children.map(children, (child) => {
+    if (React12.isValidElement(child) && (child == null ? void 0 : child.type) === FormStep) {
       const { isCompleted } = useFormStep(child.props);
-      return /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsx19(
         StepsItem,
         {
           render,
@@ -1010,11 +1219,11 @@ var FormStepper = (props) => {
     }
     return child;
   });
-  const onChange = React11.useCallback((i) => {
+  const onChange = React12.useCallback((i) => {
     setIndex(i);
     onChangeProp == null ? void 0 : onChangeProp(i);
   }, []);
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx19(
     Steps,
     {
       orientation,
@@ -1031,19 +1240,19 @@ var FormStep = (props) => {
   const { name, children, className, onSubmit, ...rest } = props;
   const step = useFormStep({ name, onSubmit });
   const { isActive } = step;
-  return isActive ? /* @__PURE__ */ jsx(chakra.div, { ...rest, className: cx("sui-form__step", className), children }) : null;
+  return isActive ? /* @__PURE__ */ jsx19(chakra4.div, { ...rest, className: cx3("sui-form__step", className), children }) : null;
 };
 FormStep.displayName = "FormStep";
 var PrevButton = (props) => {
   const { isFirstStep, isCompleted, prevStep } = useStepperContext();
-  return /* @__PURE__ */ jsx(
-    Button,
+  return /* @__PURE__ */ jsx19(
+    Button5,
     {
       isDisabled: isFirstStep || isCompleted,
       children: "Back",
       ...props,
-      className: cx("sui-form__prev-button", props.className),
-      onClick: callAllHandlers(props.onClick, prevStep)
+      className: cx3("sui-form__prev-button", props.className),
+      onClick: callAllHandlers2(props.onClick, prevStep)
     }
   );
 };
@@ -1051,17 +1260,20 @@ PrevButton.displayName = "PrevButton";
 var NextButton = (props) => {
   const { label = "Next", submitLabel = "Complete", ...rest } = props;
   const { isLastStep, isCompleted } = useStepperContext();
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx19(
     SubmitButton,
     {
       ...rest,
       isDisabled: isCompleted,
-      className: cx("sui-form__next-button", props.className),
+      className: cx3("sui-form__next-button", props.className),
       children: isLastStep || isCompleted ? submitLabel : label
     }
   );
 };
 NextButton.displayName = "NextButton";
+
+// src/field-resolver.ts
+import { get as get2 } from "@chakra-ui/utils";
 var mapFields = (schema) => schema && Object.entries(schema).map(([name, { items, label, title, ...field }]) => {
   return {
     ...field,
@@ -1076,7 +1288,7 @@ var objectFieldResolver = (schema) => {
   };
   const getNestedFields = (name) => {
     var _a;
-    const field = get$1(schema, name);
+    const field = get2(schema, name);
     if (!field)
       return [];
     if (((_a = field.items) == null ? void 0 : _a.type) === "object") {
@@ -1088,10 +1300,13 @@ var objectFieldResolver = (schema) => {
   };
   return { getFields, getNestedFields };
 };
+
+// src/watch-field.tsx
+import { useWatch as useWatch2 } from "react-hook-form";
 var WatchField = (props) => {
   const { name, defaultValue, isDisabled, isExact } = props;
   const form = useFormContext();
-  const field = useWatch({
+  const field = useWatch2({
     name,
     defaultValue,
     disabled: isDisabled,
@@ -1099,7 +1314,16 @@ var WatchField = (props) => {
   });
   return props.children(field, form) || null;
 };
-var Form = forwardRef(
+
+// src/form.tsx
+import * as React13 from "react";
+import { chakra as chakra5, forwardRef as forwardRef13 } from "@chakra-ui/react";
+import { cx as cx4, runIfFn } from "@chakra-ui/utils";
+import {
+  useForm
+} from "react-hook-form";
+import { jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
+var Form = forwardRef13(
   (props, ref) => {
     const {
       mode = "all",
@@ -1140,8 +1364,8 @@ var Form = forwardRef(
     };
     const methods = useForm(form);
     const { handleSubmit } = methods;
-    React11.useImperativeHandle(formRef, () => methods, [formRef, methods]);
-    React11.useEffect(() => {
+    React13.useImperativeHandle(formRef, () => methods, [formRef, methods]);
+    React13.useEffect(() => {
       let subscription;
       if (onChange) {
         subscription = methods.watch(onChange);
@@ -1150,25 +1374,25 @@ var Form = forwardRef(
     }, [methods, onChange]);
     let _children = children;
     if (!_children && fieldResolver) {
-      _children = /* @__PURE__ */ jsxs(FormLayout, { children: [
-        /* @__PURE__ */ jsx(AutoFields, {}),
-        /* @__PURE__ */ jsx(SubmitButton, { ...fields == null ? void 0 : fields.submit })
+      _children = /* @__PURE__ */ jsxs9(FormLayout, { children: [
+        /* @__PURE__ */ jsx20(AutoFields, {}),
+        /* @__PURE__ */ jsx20(SubmitButton, { ...fields == null ? void 0 : fields.submit })
       ] });
     }
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx20(
       FormProvider,
       {
         ...methods,
         schema,
         fieldResolver,
         fields,
-        children: /* @__PURE__ */ jsx(
-          chakra.form,
+        children: /* @__PURE__ */ jsx20(
+          chakra5.form,
           {
             ref,
             onSubmit: handleSubmit(onSubmit, onError),
             ...rest,
-            className: cx("sui-form", props.className),
+            className: cx4("sui-form", props.className),
             children: runIfFn(_children, {
               Field,
               DisplayIf,
@@ -1183,15 +1407,19 @@ var Form = forwardRef(
   }
 );
 Form.displayName = "Form";
+
+// src/create-form.tsx
+import { forwardRef as forwardRef14 } from "@chakra-ui/react";
+import { jsx as jsx21 } from "react/jsx-runtime";
 function createForm({
   resolver,
   fieldResolver = objectFieldResolver,
   fields
 } = {}) {
-  const DefaultForm = forwardRef(
+  const DefaultForm = forwardRef14(
     (props, ref) => {
       const { schema, ...rest } = props;
-      return /* @__PURE__ */ jsx(FieldsProvider, { value: fields || {}, children: /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsx21(FieldsProvider, { value: fields || {}, children: /* @__PURE__ */ jsx21(
         Form,
         {
           ref,
@@ -1206,8 +1434,15 @@ function createForm({
   DefaultForm.id = "Form";
   return DefaultForm;
 }
+
+// src/create-step-form.tsx
+import { useMemo as useMemo2 } from "react";
+import { forwardRef as forwardRef15 } from "@chakra-ui/react";
+import { StepperProvider } from "@saas-ui/core";
+import { runIfFn as runIfFn2 } from "@chakra-ui/utils";
+import { jsx as jsx22 } from "react/jsx-runtime";
 function createStepForm({ fields, resolver, fieldResolver } = {}) {
-  const StepForm2 = forwardRef((props, ref) => {
+  const StepForm2 = forwardRef15((props, ref) => {
     const { children, steps, ...rest } = props;
     const stepper = useStepForm({
       resolver,
@@ -1215,8 +1450,8 @@ function createStepForm({ fields, resolver, fieldResolver } = {}) {
       ...props
     });
     const { getFormProps, ...ctx } = stepper;
-    const context = useMemo(() => ctx, [ctx]);
-    return /* @__PURE__ */ jsx(StepperProvider, { value: context, children: /* @__PURE__ */ jsx(StepFormProvider, { value: context, children: /* @__PURE__ */ jsx(FieldsProvider, { value: fields || {}, children: /* @__PURE__ */ jsx(Form, { ref, ...rest, ...getFormProps(), children: runIfFn(children, {
+    const context = useMemo2(() => ctx, [ctx]);
+    return /* @__PURE__ */ jsx22(StepperProvider, { value: context, children: /* @__PURE__ */ jsx22(StepFormProvider, { value: context, children: /* @__PURE__ */ jsx22(FieldsProvider, { value: fields || {}, children: /* @__PURE__ */ jsx22(Form, { ref, ...rest, ...getFormProps(), children: runIfFn2(children, {
       ...stepper,
       Field,
       FormStep,
@@ -1228,9 +1463,91 @@ function createStepForm({ fields, resolver, fieldResolver } = {}) {
   StepForm2.displayName = `Step${Form.displayName || Form.name}`;
   return StepForm2;
 }
+
+// src/index.ts
+import {
+  appendErrors,
+  useController,
+  useFieldArray as useFieldArray2,
+  useForm as useForm2,
+  useFormState,
+  useWatch as useWatch3,
+  Controller as Controller2
+} from "react-hook-form";
 var Form2 = createForm();
 var StepForm = createStepForm();
-
-export { ArrayField, ArrayFieldAddButton, ArrayFieldContainer, ArrayFieldProvider, ArrayFieldRemoveButton, ArrayFieldRow, ArrayFieldRowContainer, ArrayFieldRowFields, ArrayFieldRowProvider, ArrayFieldRows, AutoFields, BaseField, Form as BaseForm, CheckboxField, DisplayField, DisplayIf, Field, FieldsProvider, Form2 as Form, FormLayout, FormLegend, FormProvider, FormStep, FormStepper, FormValue, InputField, InputRightButton, NativeSelect, NativeSelectField, NextButton, NumberInputField2 as NumberInputField, ObjectField, PasswordInput, PasswordInputField, PinField, PrevButton, RadioField, RadioInput, Select, SelectButton, SelectField, SelectList, SelectOption, StepForm, StepFormProvider, SubmitButton, SwitchField, TextareaField, WatchField, createField, createForm, createStepForm, defaultFieldTypes, objectFieldResolver, useArrayField, useArrayFieldAddButton, useArrayFieldContext, useArrayFieldRemoveButton, useArrayFieldRow, useArrayFieldRowContext, useField, useFormContext, useFormStep, useStepForm, useStepFormContext };
-//# sourceMappingURL=out.js.map
+export {
+  ArrayField,
+  ArrayFieldAddButton,
+  ArrayFieldContainer,
+  ArrayFieldProvider,
+  ArrayFieldRemoveButton,
+  ArrayFieldRow,
+  ArrayFieldRowContainer,
+  ArrayFieldRowFields,
+  ArrayFieldRowProvider,
+  ArrayFieldRows,
+  AutoFields,
+  BaseField,
+  Form as BaseForm,
+  CheckboxField,
+  Controller2 as Controller,
+  DisplayField,
+  DisplayIf,
+  Field,
+  FieldsProvider,
+  Form2 as Form,
+  FormLayout,
+  FormLegend,
+  FormProvider,
+  FormStep,
+  FormStepper,
+  FormValue,
+  InputField,
+  InputRightButton,
+  NativeSelect,
+  NativeSelectField,
+  NextButton,
+  NumberInputField2 as NumberInputField,
+  ObjectField,
+  PasswordInput,
+  PasswordInputField,
+  PinField,
+  PrevButton,
+  RadioField,
+  RadioInput,
+  Select,
+  SelectButton,
+  SelectField,
+  SelectList,
+  SelectOption,
+  StepForm,
+  StepFormProvider,
+  SubmitButton,
+  SwitchField,
+  TextareaField,
+  WatchField,
+  appendErrors,
+  createField,
+  createForm,
+  createStepForm,
+  defaultFieldTypes,
+  objectFieldResolver,
+  useArrayField,
+  useArrayFieldAddButton,
+  useArrayFieldContext,
+  useArrayFieldRemoveButton,
+  useArrayFieldRow,
+  useArrayFieldRowContext,
+  useController,
+  useField,
+  useFieldArray2 as useFieldArray,
+  useForm2 as useForm,
+  useFormContext,
+  useFormState,
+  useFormStep,
+  useStepForm,
+  useStepFormContext,
+  useWatch3 as useWatch
+};
 //# sourceMappingURL=index.mjs.map