@saas-ui/forms 2.5.1 → 2.5.2

package/dist/index.js

@@ -156,23 +156,36 @@ FormValue.displayName = "FormValue";
 var React6 = __toESM(require("react"));
 
 // src/fields-context.tsx
-var import_react14 = __toESM(require("react"));
+var import_react2 = __toESM(require("react"));
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var FieldsContext = import_react2.default.createContext(null);
+var FieldsProvider = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FieldsContext.Provider, { value: props.value, children: props.children });
+};
+var useFieldsContext = () => {
+  return import_react2.default.useContext(FieldsContext);
+};
+var useField = (type, fallback) => {
+  var _a;
+  const context = import_react2.default.useContext(FieldsContext);
+  return ((_a = context == null ? void 0 : context.fields) == null ? void 0 : _a[type]) || fallback;
+};
 
 // src/default-fields.tsx
-var import_react13 = require("@chakra-ui/react");
+var import_react14 = require("@chakra-ui/react");
 
 // src/number-input/number-input.tsx
-var import_react2 = require("@chakra-ui/react");
+var import_react3 = require("@chakra-ui/react");
 var import_core = require("@saas-ui/core");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var Input = (0, import_react2.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react2.NumberInputField, { ref, ...props }));
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Input = (0, import_react3.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react3.NumberInputField, { ref, ...props }));
 Input.displayName = "NumberInputField";
 Input.id = "Input";
-var NumberInput = (0, import_react2.forwardRef)((props, ref) => {
+var NumberInput = (0, import_react3.forwardRef)((props, ref) => {
   const {
     hideStepper = false,
-    incrementIcon = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core.ChevronUpIcon, {}),
-    decrementIcon = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core.ChevronDownIcon, {}),
+    incrementIcon = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core.ChevronUpIcon, {}),
+    decrementIcon = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core.ChevronDownIcon, {}),
     leftAddon,
     rightAddon,
     placeholder,
@@ -180,39 +193,39 @@ var NumberInput = (0, import_react2.forwardRef)((props, ref) => {
     ...rest
   } = props;
   const fieldProps = { placeholder, ..._fieldProps };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react2.NumberInput, { ...rest, ref, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react2.InputGroup, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react3.NumberInput, { ...rest, ref, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react3.InputGroup, { children: [
       leftAddon,
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Input, { ...fieldProps }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Input, { ...fieldProps }),
       rightAddon
     ] }),
-    !hideStepper && !rightAddon ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react2.NumberInputStepper, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react2.NumberIncrementStepper, { children: incrementIcon }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react2.NumberDecrementStepper, { children: decrementIcon })
+    !hideStepper && !rightAddon ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react3.NumberInputStepper, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react3.NumberIncrementStepper, { children: incrementIcon }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react3.NumberDecrementStepper, { children: decrementIcon })
     ] }) : null
   ] });
 });
 NumberInput.displayName = "NumberInput";
 
 // src/password-input/password-input.tsx
-var import_react4 = require("react");
-var import_react5 = require("@chakra-ui/react");
+var import_react5 = require("react");
+var import_react6 = require("@chakra-ui/react");
 var import_icons = require("@saas-ui/core/icons");
 
 // src/input-right-button/input-right-button.tsx
-var import_react3 = require("@chakra-ui/react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var InputRightButton = (0, import_react3.forwardRef)(
+var import_react4 = require("@chakra-ui/react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var InputRightButton = (0, import_react4.forwardRef)(
   (props, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react3.InputRightElement, { w: "auto", px: "1", py: "1", alignItems: "stretch", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react3.Button, { ref, height: "auto", ...props }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react4.InputRightElement, { w: "auto", px: "1", py: "1", alignItems: "stretch", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react4.Button, { ref, height: "auto", ...props }) });
   }
 );
 InputRightButton.id = "InputRightElement";
 InputRightButton.displayName = "InputRightButton";
 
 // src/password-input/password-input.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var PasswordInput = (0, import_react5.forwardRef)(
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var PasswordInput = (0, import_react6.forwardRef)(
   (props, ref) => {
     const {
       viewIcon,
@@ -225,24 +238,24 @@ var PasswordInput = (0, import_react5.forwardRef)(
       leftAddon,
       ...inputProps
     } = props;
-    const [show, setShow] = (0, import_react4.useState)(false);
+    const [show, setShow] = (0, import_react5.useState)(false);
     const handleClick = () => setShow(!show);
     const label = show ? "Hide password" : "Show password";
     let icon;
     if (show) {
-      icon = viewIcon || /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icons.ViewIcon, {});
+      icon = viewIcon || /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons.ViewIcon, {});
     } else {
-      icon = viewOffIcon || /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icons.ViewOffIcon, {});
+      icon = viewOffIcon || /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons.ViewOffIcon, {});
     }
     const groupProps = {
       width: w || width,
       size,
       variant
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react5.InputGroup, { ...groupProps, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react6.InputGroup, { ...groupProps, children: [
       leftAddon,
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        import_react5.Input,
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        import_react6.Input,
         {
           ...inputProps,
           ref,
@@ -250,7 +263,7 @@ var PasswordInput = (0, import_react5.forwardRef)(
           autoComplete: show ? "off" : autoComplete
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         InputRightButton,
         {
           onClick: handleClick,
@@ -265,20 +278,20 @@ var PasswordInput = (0, import_react5.forwardRef)(
 PasswordInput.displayName = "PasswordInput";
 
 // src/radio/radio-input.tsx
-var import_react6 = require("@chakra-ui/react");
+var import_react7 = require("@chakra-ui/react");
 
 // src/utils.ts
-var React3 = __toESM(require("react"));
+var React4 = __toESM(require("react"));
 var mapNestedFields = (name, children) => {
-  return React3.Children.map(children, (child) => {
-    if (React3.isValidElement(child) && child.props.name) {
+  return React4.Children.map(children, (child) => {
+    if (React4.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 React3.cloneElement(child, {
+      return React4.cloneElement(child, {
         ...child.props,
         name: `${name}.${childName}`
       });
@@ -299,14 +312,14 @@ var mapOptions = (options) => {
 };
 
 // src/radio/radio-input.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var RadioInput = (0, import_react6.forwardRef)(
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var RadioInput = (0, import_react7.forwardRef)(
   ({ options: optionsProp, spacing, direction, ...props }, ref) => {
     const { onBlur, onChange, ...groupProps } = props;
     const options = mapOptions(optionsProp);
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react6.RadioGroup, { onChange, ...groupProps, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react6.Stack, { spacing, direction, children: options.map(({ value, label, ...radioProps }, i) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-        import_react6.Radio,
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react7.RadioGroup, { onChange, ...groupProps, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react7.Stack, { spacing, direction, children: options.map(({ value, label, ...radioProps }, i) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        import_react7.Radio,
         {
           onBlur,
           value,
@@ -322,15 +335,15 @@ var RadioInput = (0, import_react6.forwardRef)(
 RadioInput.displayName = "RadioInput";
 
 // src/select/select.tsx
-var import_react9 = require("@chakra-ui/react");
+var import_react10 = require("@chakra-ui/react");
 var import_utils3 = require("@chakra-ui/utils");
 var import_core2 = require("@saas-ui/core");
 
 // src/select/select-context.tsx
-var import_react7 = require("@chakra-ui/react");
+var import_react8 = require("@chakra-ui/react");
 var import_react_utils = require("@chakra-ui/react-utils");
-var import_react8 = __toESM(require("react"));
-var [SelectStylesProvider, useSelectStyles] = (0, import_react7.createStylesContext)("SuiSelect");
+var import_react9 = __toESM(require("react"));
+var [SelectStylesProvider, useSelectStyles] = (0, import_react8.createStylesContext)("SuiSelect");
 var [SelectProvider, useSelectContext] = (0, import_react_utils.createContext)({
   strict: true
 });
@@ -346,20 +359,20 @@ var useSelect = (props) => {
     isDisabled,
     renderValue = (value2) => typeof value2 === "string" ? value2 : value2 == null ? void 0 : value2.join(", ")
   } = props;
-  const [currentValue, setCurrentValue] = (0, import_react7.useControllableState)({
+  const [currentValue, setCurrentValue] = (0, import_react8.useControllableState)({
     value,
     defaultValue,
     onChange
   });
-  const controlProps = (0, import_react7.useFormControl)({ name });
-  const options = import_react8.default.useMemo(
+  const controlProps = (0, import_react8.useFormControl)({ name });
+  const options = import_react9.default.useMemo(
     () => optionsProp && mapOptions(optionsProp),
     [optionsProp]
   );
   const handleChange = (value2) => {
     setCurrentValue(value2);
   };
-  const getDisplayValue = import_react8.default.useCallback(
+  const getDisplayValue = import_react9.default.useCallback(
     (value2) => {
       if (!options) {
         return value2;
@@ -373,7 +386,7 @@ var useSelect = (props) => {
     },
     [options]
   );
-  const displayValue = import_react8.default.useMemo(
+  const displayValue = import_react9.default.useMemo(
     () => currentValue ? (Array.isArray(currentValue) ? currentValue : [currentValue]).map(
       getDisplayValue
     ) : [],
@@ -394,8 +407,8 @@ var useSelect = (props) => {
 };
 
 // src/select/select.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var SelectButton = (0, import_react9.forwardRef)(
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var SelectButton = (0, import_react10.forwardRef)(
   (props, ref) => {
     var _a, _b, _c, _d, _e;
     const {
@@ -404,7 +417,7 @@ var SelectButton = (0, import_react9.forwardRef)(
       placeholder,
       isDisabled: isSelectDisabled
     } = useSelectContext();
-    const context = (0, import_react9.useFormControlContext)();
+    const context = (0, import_react10.useFormControlContext)();
     const styles = useSelectStyles();
     const {
       isInvalid,
@@ -416,7 +429,7 @@ var SelectButton = (0, import_react9.forwardRef)(
       onBlur,
       onFocus
     } = context || {};
-    const { rightIcon = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_core2.ChevronDownIcon, {}), ...rest } = props;
+    const { rightIcon = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core2.ChevronDownIcon, {}), ...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;
@@ -438,9 +451,9 @@ var SelectButton = (0, import_react9.forwardRef)(
       h: "auto",
       ...props.sx
     };
-    const buttonProps = (0, import_react9.useMenuButton)(rest, ref);
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      import_react9.Button,
+    const buttonProps = (0, import_react10.useMenuButton)(rest, ref);
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      import_react10.Button,
       {
         ...buttonProps,
         sx: buttonStyles,
@@ -453,8 +466,8 @@ var SelectButton = (0, import_react9.forwardRef)(
         "data-focus": (0, import_utils3.dataAttr)(isFocused),
         "data-required": (0, import_utils3.dataAttr)(isRequired),
         rightIcon,
-        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          import_react9.chakra.span,
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          import_react10.chakra.span,
           {
             __css: {
               display: "block",
@@ -472,16 +485,16 @@ var SelectButton = (0, import_react9.forwardRef)(
   }
 );
 SelectButton.displayName = "SelectButton";
-var Select = (0, import_react9.forwardRef)((props, ref) => {
+var Select = (0, import_react10.forwardRef)((props, ref) => {
   const { name, children, isDisabled, multiple, ...rest } = props;
-  const styles = (0, import_react9.useMultiStyleConfig)("SuiSelect", props);
-  const menuProps = (0, import_react9.omitThemingProps)(rest);
+  const styles = (0, import_react10.useMultiStyleConfig)("SuiSelect", props);
+  const menuProps = (0, import_react10.omitThemingProps)(rest);
   const context = useSelect(props);
   const { value, controlProps } = context;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SelectProvider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SelectStylesProvider, { value: styles, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react9.Menu, { ...menuProps, closeOnSelect: !multiple, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react9.chakra.div, { className: (0, import_utils3.cx)("sui-select"), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SelectProvider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SelectStylesProvider, { value: styles, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react10.Menu, { ...menuProps, closeOnSelect: !multiple, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react10.chakra.div, { className: (0, import_utils3.cx)("sui-select"), children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      import_react9.chakra.input,
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      import_react10.chakra.input,
       {
         ...controlProps,
         ref,
@@ -495,33 +508,33 @@ var Select = (0, import_react9.forwardRef)((props, ref) => {
 });
 var SelectList = (props) => {
   const { defaultValue, value, options, multiple, onChange } = useSelectContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react9.MenuList, { maxH: "100vh", overflowY: "auto", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    import_react9.MenuOptionGroup,
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react10.MenuList, { maxH: "100vh", overflowY: "auto", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    import_react10.MenuOptionGroup,
     {
       defaultValue: defaultValue || value,
       value,
       onChange,
       type: multiple ? "checkbox" : "radio",
-      children: options ? options.map(({ value: value2, label, ...rest }, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SelectOption, { value: value2, ...rest, children: label || value2 }, i)) : props.children
+      children: options ? options.map(({ value: value2, label, ...rest }, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SelectOption, { value: value2, ...rest, children: label || value2 }, i)) : props.children
     }
   ) });
 };
 Select.displayName = "Select";
-var SelectOption = (0, import_react9.forwardRef)(
+var SelectOption = (0, import_react10.forwardRef)(
   (props, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react9.MenuItemOption, { ref, ...props });
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react10.MenuItemOption, { ref, ...props });
   }
 );
 SelectOption.id = "MenuItemOption";
 SelectOption.displayName = "SelectOption";
 
 // src/select/native-select.tsx
-var import_react10 = require("@chakra-ui/react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var NativeSelect = (0, import_react10.forwardRef)(
+var import_react11 = require("@chakra-ui/react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var NativeSelect = (0, import_react11.forwardRef)(
   ({ options, children, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react10.Select, { ref, ...props, children: children || (options == null ? void 0 : options.map(({ value, label }) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value, children: label || value }, value);
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react11.Select, { ref, ...props, children: children || (options == null ? void 0 : options.map(({ value, label }) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value, children: label || value }, value);
     })) });
   }
 );
@@ -529,15 +542,15 @@ NativeSelect.displayName = "NativeSelect";
 
 // src/create-field.tsx
 var import_react_hook_form3 = require("react-hook-form");
-var import_react12 = require("@chakra-ui/react");
+var import_react13 = require("@chakra-ui/react");
 var import_utils4 = require("@chakra-ui/utils");
-var import_utils5 = require("@saas-ui/core/utils");
+var import_core4 = require("@saas-ui/core");
 
 // src/base-field.tsx
 var import_react_hook_form2 = require("react-hook-form");
-var import_react11 = require("@chakra-ui/react");
+var import_react12 = require("@chakra-ui/react");
 var import_core3 = require("@saas-ui/core");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var getError = (name, formState) => {
   return (0, import_react_hook_form2.get)(formState.errors, name);
 };
@@ -565,21 +578,21 @@ var useBaseField = (props) => {
 };
 var BaseField = (props) => {
   const { controlProps, label, help, hideLabel, error } = useBaseField(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react11.FormControl, { ...controlProps, isInvalid: !!error, children: [
-    label && !hideLabel ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react11.FormLabel, { children: label }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react11.Box, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react12.FormControl, { ...controlProps, isInvalid: !!error, children: [
+    label && !hideLabel ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react12.FormLabel, { children: label }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react12.Box, { children: [
       props.children,
-      help && !(error == null ? void 0 : error.message) ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react11.FormHelperText, { children: help }) : null,
-      (error == null ? void 0 : error.message) && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react11.FormErrorMessage, { children: error == null ? void 0 : error.message })
+      help && !(error == null ? void 0 : error.message) ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react12.FormHelperText, { children: help }) : null,
+      (error == null ? void 0 : error.message) && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react12.FormErrorMessage, { children: error == null ? void 0 : error.message })
     ] })
   ] });
 };
 BaseField.displayName = "BaseField";
 
 // src/create-field.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var _createField = (InputComponent, { displayName, hideLabel, getBaseField: getBaseFieldProp }) => {
-  const Field2 = (0, import_react12.forwardRef)((props, ref) => {
+  const Field2 = (0, import_react13.forwardRef)((props, ref) => {
     var _a;
     const { id, name, label, isRequired, rules } = props;
     const inputRules = {
@@ -589,7 +602,7 @@ var _createField = (InputComponent, { displayName, hideLabel, getBaseField: getB
     const fieldContext = useFieldsContext();
     const getBaseField = (_a = fieldContext == null ? void 0 : fieldContext.getBaseField) != null ? _a : getBaseFieldProp;
     const { extraProps, BaseField: BaseField2 } = getBaseField();
-    const [, inputProps] = (0, import_utils5.splitProps)(
+    const [, inputProps] = (0, import_core4.splitProps)(
       props,
       [
         "children",
@@ -602,7 +615,7 @@ var _createField = (InputComponent, { displayName, hideLabel, getBaseField: getB
         "help"
       ].concat(extraProps)
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(BaseField2, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(BaseField2, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       InputComponent,
       {
         ref,
@@ -618,24 +631,24 @@ var _createField = (InputComponent, { displayName, hideLabel, getBaseField: getB
   return Field2;
 };
 var withControlledInput = (InputComponent) => {
-  return (0, import_react12.forwardRef)(
+  return (0, import_react13.forwardRef)(
     ({ name, rules, ...inputProps }, ref) => {
       const { control } = useFormContext();
       const onChange = inputProps.onChange;
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         import_react_hook_form3.Controller,
         {
           name,
           control,
           rules,
-          render: ({ field: { ref: _ref, ...field } }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          render: ({ field: { ref: _ref, ...field } }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             InputComponent,
             {
               ...field,
               ...inputProps,
               onChange: (0, import_utils4.callAllHandlers)(onChange, field.onChange),
               onBlur: (0, import_utils4.callAllHandlers)(inputProps.onBlur, field.onBlur),
-              ref: (0, import_react12.useMergeRefs)(ref, _ref)
+              ref: (0, import_react13.useMergeRefs)(ref, _ref)
             }
           )
         }
@@ -644,19 +657,19 @@ var withControlledInput = (InputComponent) => {
   );
 };
 var withUncontrolledInput = (InputComponent) => {
-  return (0, import_react12.forwardRef)(
+  return (0, import_react13.forwardRef)(
     ({ name, rules, ...inputProps }, ref) => {
       const { register } = useFormContext();
       const { ref: _ref, ...field } = register(name, rules);
       const onChange = inputProps.onChange;
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         InputComponent,
         {
           ...field,
           ...inputProps,
           onChange: (0, import_utils4.callAllHandlers)(onChange, field.onChange),
           onBlur: (0, import_utils4.callAllHandlers)(inputProps.onBlur, field.onBlur),
-          ref: (0, import_react12.useMergeRefs)(ref, _ref)
+          ref: (0, import_react13.useMergeRefs)(ref, _ref)
         }
       );
     }
@@ -682,12 +695,12 @@ var createField = (component, options) => {
 };
 
 // src/default-fields.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var InputField = createField(
-  (0, import_react13.forwardRef)(({ type = "text", leftAddon, rightAddon, size, ...rest }, ref) => {
-    const input = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react13.Input, { type, size, ...rest, ref });
+  (0, import_react14.forwardRef)(({ type = "text", leftAddon, rightAddon, size, ...rest }, ref) => {
+    const input = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react14.Input, { type, size, ...rest, ref });
     if (leftAddon || rightAddon) {
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react13.InputGroup, { size, children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react14.InputGroup, { size, children: [
         leftAddon,
         input,
         rightAddon
@@ -703,23 +716,23 @@ var NumberInputField2 = createField(
   }
 );
 var PasswordInputField = createField(
-  (0, import_react13.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PasswordInput, { ref, ...props }))
+  (0, import_react14.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PasswordInput, { ref, ...props }))
 );
-var TextareaField = createField(import_react13.Textarea);
+var TextareaField = createField(import_react14.Textarea);
 var SwitchField = createField(
-  (0, import_react13.forwardRef)(({ type, value, ...rest }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react13.Switch, { isChecked: !!value, ...rest, ref });
+  (0, import_react14.forwardRef)(({ type, value, ...rest }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react14.Switch, { isChecked: !!value, ...rest, ref });
   }),
   {
     isControlled: true
   }
 );
 var SelectField = createField(
-  (0, import_react13.forwardRef)((props, ref) => {
+  (0, import_react14.forwardRef)((props, ref) => {
     const { buttonProps, listProps, ...rest } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Select, { ref, ...rest, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SelectButton, { ...buttonProps }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SelectList, { ...listProps })
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Select, { ref, ...rest, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SelectButton, { ...buttonProps }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SelectList, { ...listProps })
     ] });
   }),
   {
@@ -727,8 +740,8 @@ var SelectField = createField(
   }
 );
 var CheckboxField = createField(
-  (0, import_react13.forwardRef)(({ label, type, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react13.Checkbox, { ref, ...props, children: label });
+  (0, import_react14.forwardRef)(({ label, type, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react14.Checkbox, { ref, ...props, children: label });
   }),
   {
     hideLabel: true
@@ -744,13 +757,13 @@ var NativeSelectField = createField(
   }
 );
 var PinField = createField(
-  (0, import_react13.forwardRef)((props, ref) => {
+  (0, import_react14.forwardRef)((props, ref) => {
     const { pinLength = 4, pinType, spacing, ...inputProps } = props;
     const inputs = [];
     for (let i = 0; i < pinLength; i++) {
-      inputs.push(/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react13.PinInputField, { ref }, i));
+      inputs.push(/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react14.PinInputField, { ref }, i));
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react13.HStack, { spacing, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react13.PinInput, { ...inputProps, type: pinType, children: inputs }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react14.HStack, { spacing, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react14.PinInput, { ...inputProps, type: pinType, children: inputs }) });
   }),
   {
     isControlled: true
@@ -772,28 +785,6 @@ var defaultFieldTypes = {
   "native-select": NativeSelectField
 };
 
-// src/fields-context.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var FieldsContext = import_react14.default.createContext(null);
-var FieldsProvider = (props) => {
-  const fields = { ...defaultFieldTypes, ...props.value.fields };
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    FieldsContext.Provider,
-    {
-      value: { fields, getBaseField: props.value.getBaseField },
-      children: props.children
-    }
-  );
-};
-var useFieldsContext = () => {
-  return import_react14.default.useContext(FieldsContext);
-};
-var useField = (type) => {
-  var _a;
-  const context = import_react14.default.useContext(FieldsContext);
-  return ((_a = context == null ? void 0 : context.fields) == null ? void 0 : _a[type]) || InputField;
-};
-
 // src/field.tsx
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var defaultInputType = "text";
@@ -801,7 +792,7 @@ 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);
+    const InputComponent = useField((overrides == null ? void 0 : overrides.type) || type, InputField);
     return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(InputComponent, { ref, ...props, ...overrides });
   }
 );
@@ -811,7 +802,7 @@ var React9 = __toESM(require("react"));
 
 // src/layout.tsx
 var import_react15 = require("@chakra-ui/react");
-var import_utils6 = require("@chakra-ui/utils");
+var import_utils5 = require("@chakra-ui/utils");
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var FormLayoutItem = ({ children }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react15.chakra.div, { children });
@@ -831,7 +822,7 @@ var FormLayout = ({ children, ...props }) => {
     import_react15.SimpleGrid,
     {
       ...gridProps,
-      className: (0, import_utils6.cx)("sui-form__layout", props.className),
+      className: (0, import_utils5.cx)("sui-form__layout", props.className),
       children
     }
   );
@@ -913,7 +904,7 @@ var useArrayFieldAddButton = () => {
 };
 
 // src/array-field.tsx
-var import_utils8 = require("@chakra-ui/utils");
+var import_utils7 = require("@chakra-ui/utils");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var ArrayFieldRow = ({
   children,
@@ -970,7 +961,7 @@ ArrayFieldAddButton.displayName = "ArrayFieldAddButton";
 var ArrayField = (0, import_react16.forwardRef)(
   (props, ref) => {
     const { children, ...containerProps } = props;
-    const rowFn = (0, import_utils8.isFunction)(children) ? children : (fields) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children: fields.map(({ id }, index) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ArrayFieldRow, { index, children }, id)) || null });
+    const rowFn = (0, import_utils7.isFunction)(children) ? children : (fields) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children: fields.map(({ id }, index) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ArrayFieldRow, { index, children }, id)) || null });
     return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(ArrayFieldContainer, { ref, ...containerProps, children: [
       /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ArrayFieldRows, { children: rowFn }),
       /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ArrayFieldAddButton, {})
@@ -1188,13 +1179,13 @@ DisplayIf.displayName = "DisplayIf";
 // src/step-form.tsx
 var React12 = __toESM(require("react"));
 var import_react19 = require("@chakra-ui/react");
-var import_utils10 = require("@chakra-ui/utils");
-var import_core5 = require("@saas-ui/core");
+var import_utils9 = require("@chakra-ui/utils");
+var import_core6 = require("@saas-ui/core");
 
 // src/use-step-form.tsx
 var React11 = __toESM(require("react"));
 var import_react_utils3 = require("@chakra-ui/react-utils");
-var import_core4 = require("@saas-ui/core");
+var import_core5 = require("@saas-ui/core");
 var [StepFormProvider, useStepFormContext] = (0, import_react_utils3.createContext)({
   name: "StepFormContext",
   errorMessage: "useStepFormContext: `context` is undefined. Seems you forgot to wrap step form components in `<StepForm />`"
@@ -1207,7 +1198,7 @@ function useStepForm(props) {
     fieldResolver,
     ...rest
   } = props;
-  const stepper = (0, import_core4.useStepper)(rest);
+  const stepper = (0, import_core5.useStepper)(rest);
   const [options, setOptions] = React11.useState(stepsOptions);
   const { activeStep, isLastStep, nextStep } = stepper;
   const [steps, updateSteps] = React11.useState({});
@@ -1273,7 +1264,7 @@ function useStepForm(props) {
 }
 function useFormStep(props) {
   const { name, schema, resolver, onSubmit } = props;
-  const step = (0, import_core4.useStep)({ name });
+  const step = (0, import_core5.useStep)({ name });
   const { steps, updateStep } = useStepFormContext();
   React11.useEffect(() => {
     updateStep({ name, schema, resolver, onSubmit });
@@ -1287,7 +1278,7 @@ function useFormStep(props) {
 // src/step-form.tsx
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var FormStepper = (props) => {
-  const { activeIndex, setIndex } = (0, import_core5.useStepperContext)();
+  const { activeIndex, setIndex } = (0, import_core6.useStepperContext)();
   const {
     children,
     orientation,
@@ -1302,7 +1293,7 @@ var FormStepper = (props) => {
     if (React12.isValidElement(child) && (child == null ? void 0 : child.type) === FormStep) {
       const { isCompleted } = useFormStep(child.props);
       return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-        import_core5.StepsItem,
+        import_core6.StepsItem,
         {
           render,
           name: child.props.name,
@@ -1320,7 +1311,7 @@ var FormStepper = (props) => {
     onChangeProp == null ? void 0 : onChangeProp(i);
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-    import_core5.Steps,
+    import_core6.Steps,
     {
       orientation,
       step: activeIndex,
@@ -1336,32 +1327,32 @@ var FormStep = (props) => {
   const { name, children, className, onSubmit, ...rest } = props;
   const step = useFormStep({ name, onSubmit });
   const { isActive } = step;
-  return isActive ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react19.chakra.div, { ...rest, className: (0, import_utils10.cx)("sui-form__step", className), children }) : null;
+  return isActive ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react19.chakra.div, { ...rest, className: (0, import_utils9.cx)("sui-form__step", className), children }) : null;
 };
 FormStep.displayName = "FormStep";
 var PrevButton = (props) => {
-  const { isFirstStep, isCompleted, prevStep } = (0, import_core5.useStepperContext)();
+  const { isFirstStep, isCompleted, prevStep } = (0, import_core6.useStepperContext)();
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     import_react19.Button,
     {
       isDisabled: isFirstStep || isCompleted,
       children: "Back",
       ...props,
-      className: (0, import_utils10.cx)("sui-form__prev-button", props.className),
-      onClick: (0, import_utils10.callAllHandlers)(props.onClick, prevStep)
+      className: (0, import_utils9.cx)("sui-form__prev-button", props.className),
+      onClick: (0, import_utils9.callAllHandlers)(props.onClick, prevStep)
     }
   );
 };
 PrevButton.displayName = "PrevButton";
 var NextButton = (props) => {
   const { label = "Next", submitLabel = "Complete", ...rest } = props;
-  const { isLastStep, isCompleted } = (0, import_core5.useStepperContext)();
+  const { isLastStep, isCompleted } = (0, import_core6.useStepperContext)();
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     SubmitButton,
     {
       ...rest,
       isDisabled: isCompleted,
-      className: (0, import_utils10.cx)("sui-form__next-button", props.className),
+      className: (0, import_utils9.cx)("sui-form__next-button", props.className),
       children: isLastStep || isCompleted ? submitLabel : label
     }
   );
@@ -1369,7 +1360,7 @@ var NextButton = (props) => {
 NextButton.displayName = "NextButton";
 
 // src/field-resolver.ts
-var import_utils11 = require("@chakra-ui/utils");
+var import_utils10 = require("@chakra-ui/utils");
 var mapFields = (schema) => schema && Object.entries(schema).map(([name, props]) => {
   const { items, label, title, ...field } = props;
   return {
@@ -1385,7 +1376,7 @@ var objectFieldResolver = (schema) => {
   };
   const getNestedFields = (name) => {
     var _a;
-    const field = (0, import_utils11.get)(schema, name);
+    const field = (0, import_utils10.get)(schema, name);
     if (!field)
       return [];
     if (((_a = field.items) == null ? void 0 : _a.type) === "object") {
@@ -1418,7 +1409,7 @@ var import_react21 = require("@chakra-ui/react");
 // src/form.tsx
 var React13 = __toESM(require("react"));
 var import_react20 = require("@chakra-ui/react");
-var import_utils12 = require("@chakra-ui/utils");
+var import_utils11 = require("@chakra-ui/utils");
 var import_react_hook_form8 = require("react-hook-form");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var Form = (0, import_react20.forwardRef)(
@@ -1490,8 +1481,8 @@ var Form = (0, import_react20.forwardRef)(
             ref,
             onSubmit: handleSubmit(onSubmit, onError),
             ...rest,
-            className: (0, import_utils12.cx)("sui-form", props.className),
-            children: (0, import_utils12.runIfFn)(_children, {
+            className: (0, import_utils11.cx)("sui-form", props.className),
+            children: (0, import_utils11.runIfFn)(_children, {
               Field,
               DisplayIf,
               ArrayField,
@@ -1522,7 +1513,11 @@ function createForm({
         fieldResolver: fieldResolverProp,
         ...rest
       } = props;
-      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(FieldsProvider, { value: { fields, getBaseField }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      const fieldsContext = {
+        fields: { ...defaultFieldTypes, ...fields },
+        getBaseField
+      };
+      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(FieldsProvider, { value: fieldsContext, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         Form,
         {
           ref,
@@ -1541,8 +1536,8 @@ function createForm({
 // src/create-step-form.tsx
 var import_react22 = require("react");
 var import_react23 = require("@chakra-ui/react");
-var import_core6 = require("@saas-ui/core");
-var import_utils13 = require("@chakra-ui/utils");
+var import_core7 = require("@saas-ui/core");
+var import_utils12 = require("@chakra-ui/utils");
 var import_jsx_runtime22 = require("react/jsx-runtime");
 function createStepForm({
   fields,
@@ -1559,7 +1554,14 @@ function createStepForm({
     });
     const { getFormProps, ...ctx } = stepper;
     const context = (0, import_react22.useMemo)(() => ctx, [ctx]);
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core6.StepperProvider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(StepFormProvider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(FieldsProvider, { value: { fields, getBaseField }, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Form, { ref, ...rest, ...getFormProps(), children: (0, import_utils13.runIfFn)(children, {
+    const fieldsContext = {
+      fields: {
+        ...defaultFieldTypes,
+        ...fields
+      },
+      getBaseField
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core7.StepperProvider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(StepFormProvider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(FieldsProvider, { value: fieldsContext, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Form, { ref, ...rest, ...getFormProps(), children: (0, import_utils12.runIfFn)(children, {
       ...stepper,
       Field,
       FormStep,