@saas-ui/forms 2.0.0-next.2 → 2.0.0-next.21

package/dist/index.mjs

@@ -1,75 +1,80 @@
-import * as React8 from 'react';
-import React8__default, { useState } from 'react';
-import { __DEV__, cx, runIfFn, callAllHandlers, get as get$1 } from '@chakra-ui/utils';
-import { useForm, FormProvider, useFormContext, Controller, useFieldArray, useWatch, get } from 'react-hook-form';
-export { Controller, FormProvider, appendErrors, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch } from 'react-hook-form';
-import { forwardRef, NumberInput as NumberInput$1, NumberInputField, NumberInputStepper, NumberIncrementStepper, NumberDecrementStepper, InputRightElement, Button, InputGroup, Input, RadioGroup, Stack, Radio, useMultiStyleConfig, MenuButton, omitThemingProps, useFormControl, Menu, chakra, MenuList, MenuOptionGroup, MenuItemOption, Select as Select$1, Switch, Checkbox, HStack, PinInput, FormControl, FormLabel, Text, Box, FormHelperText, FormErrorMessage, useMergeRefs, Textarea, PinInputField, useTheme, SimpleGrid, useStyleConfig } from '@chakra-ui/react';
-import { ViewIcon, ViewOffIcon, ChevronDownIcon, MinusIcon, AddIcon } from '@chakra-ui/icons';
+import * as React12 from 'react';
+import React12__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, useMultiStyleConfig, useFormControlContext, MenuButton, omitThemingProps, Menu, chakra, 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';
-import { StepperProvider, useStepper, useStep, useStepperContext, StepperStep, StepperContainer, StepperSteps } from '@saas-ui/core';
 
-// src/display-field.tsx
+// src/form-context.tsx
+var FormContext = React12.createContext(null);
+var useFormContext = () => {
+  const context = React12.useContext(FormContext);
+  const hookContext = useFormContext$1();
+  if (!context) {
+    throw new Error("FormProvider must be used within a Form component");
+  }
+  return {
+    ...hookContext,
+    ...context
+  };
+};
+var useFieldProps = (name) => {
+  var _a;
+  const parsedName = name == null ? void 0 : name.replace(/\.[0-9]/g, ".$");
+  const context = useFormContext();
+  return ((_a = context == null ? void 0 : context.fields) == null ? void 0 : _a[parsedName]) || {};
+};
+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 }) });
+};
 var DisplayField = ({
   name,
   label,
   placeholder,
   ...props
 }) => {
-  return /* @__PURE__ */ React8.createElement(FormControl, {
-    ...props
-  }, label ? /* @__PURE__ */ React8.createElement(FormLabel, {
-    htmlFor: name
-  }, label) : null, /* @__PURE__ */ React8.createElement(Text, {
-    fontSize: "md"
-  }, /* @__PURE__ */ React8.createElement(FormValue, {
-    name
-  })));
+  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 }) })
+  ] });
 };
-if (__DEV__) {
-  DisplayField.displayName = "DisplayField";
-}
+DisplayField.displayName = "DisplayField";
 var FormValue = ({ name }) => {
   const { getValues } = useFormContext();
   return getValues(name) || null;
 };
-if (__DEV__) {
-  FormValue.displayName = "FormValue";
-}
+FormValue.displayName = "FormValue";
 var NumberInput = forwardRef((props, ref) => {
-  const { hideStepper, incrementIcon, decrementIcon, ...rest } = props;
-  return /* @__PURE__ */ React8.createElement(NumberInput$1, {
-    ...rest,
-    ref
-  }, /* @__PURE__ */ React8.createElement(NumberInputField, null), !hideStepper && /* @__PURE__ */ React8.createElement(NumberInputStepper, null, /* @__PURE__ */ React8.createElement(NumberIncrementStepper, {
-    children: incrementIcon
-  }), /* @__PURE__ */ React8.createElement(NumberDecrementStepper, {
-    children: decrementIcon
-  })));
+  const {
+    hideStepper,
+    incrementIcon = /* @__PURE__ */ jsx(ChevronUpIcon, {}),
+    decrementIcon = /* @__PURE__ */ jsx(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 })
+    ] })
+  ] });
 });
 NumberInput.defaultProps = {
   hideStepper: false
 };
-if (__DEV__) {
-  NumberInput.displayName = "NumberInput";
-}
+NumberInput.displayName = "NumberInput";
 var InputRightButton = forwardRef(
   (props, ref) => {
-    return /* @__PURE__ */ React8.createElement(InputRightElement, {
-      w: "auto",
-      px: "1",
-      py: "1",
-      alignItems: "stretch"
-    }, /* @__PURE__ */ React8.createElement(Button, {
-      ref,
-      height: "auto",
-      ...props
-    }));
+    return /* @__PURE__ */ jsx(InputRightElement, { w: "auto", px: "1", py: "1", alignItems: "stretch", children: /* @__PURE__ */ jsx(Button, { ref, height: "auto", ...props }) });
   }
 );
 InputRightButton.id = "InputRightElement";
 InputRightButton.displayName = "InputRightButton";
-
-// src/password-input/password-input.tsx
 var PasswordInput = forwardRef(
   (props, ref) => {
     const {
@@ -80,6 +85,7 @@ var PasswordInput = forwardRef(
       width,
       size,
       variant,
+      leftAddon,
       ...inputProps
     } = props;
     const [show, setShow] = useState(false);
@@ -87,186 +93,260 @@ var PasswordInput = forwardRef(
     const label = show ? "Hide password" : "Show password";
     let icon;
     if (show) {
-      icon = viewIcon || /* @__PURE__ */ React8__default.createElement(ViewIcon, null);
+      icon = viewIcon || /* @__PURE__ */ jsx(ViewIcon, {});
     } else {
-      icon = viewOffIcon || /* @__PURE__ */ React8__default.createElement(ViewOffIcon, null);
+      icon = viewOffIcon || /* @__PURE__ */ jsx(ViewOffIcon, {});
     }
     const groupProps = {
       width: w || width,
       size,
       variant
     };
-    return /* @__PURE__ */ React8__default.createElement(InputGroup, {
-      ...groupProps
-    }, /* @__PURE__ */ React8__default.createElement(Input, {
-      ...inputProps,
-      ref,
-      type: show ? "text" : "password",
-      autoComplete: show ? "off" : autoComplete
-    }), /* @__PURE__ */ React8__default.createElement(InputRightButton, {
-      onClick: handleClick,
-      "aria-label": label,
-      variant: "ghost"
-    }, icon));
+    return /* @__PURE__ */ jsxs(InputGroup, { ...groupProps, children: [
+      leftAddon,
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          ...inputProps,
+          ref,
+          type: show ? "text" : "password",
+          autoComplete: show ? "off" : autoComplete
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        InputRightButton,
+        {
+          onClick: handleClick,
+          "aria-label": label,
+          variant: "ghost",
+          children: icon
+        }
+      )
+    ] });
   }
 );
-if (__DEV__) {
-  PasswordInput.displayName = "PasswordInput";
-}
+PasswordInput.displayName = "PasswordInput";
+var mapNestedFields = (name, children) => {
+  return React12.Children.map(children, (child) => {
+    if (React12.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 React12.cloneElement(child, {
+        ...child.props,
+        name: `${name}.${childName}`
+      });
+    }
+    return child;
+  });
+};
+var mapOptions = (options) => {
+  return options.map((option) => {
+    if (typeof option === "string") {
+      return {
+        label: option,
+        value: option
+      };
+    }
+    return option;
+  });
+};
 var RadioInput = forwardRef(
-  ({ options, spacing, direction, ...props }, ref) => {
+  ({ options: optionsProp, spacing, direction, ...props }, ref) => {
     const { onBlur, onChange, ...groupProps } = props;
-    return /* @__PURE__ */ React8.createElement(RadioGroup, {
-      onChange,
-      ...groupProps
-    }, /* @__PURE__ */ React8.createElement(Stack, {
-      spacing,
-      direction
-    }, options.map(({ value, label, ...radioProps }, i) => {
-      return /* @__PURE__ */ React8.createElement(Radio, {
-        key: i,
-        onBlur,
-        value,
-        ref,
-        ...radioProps
-      }, label || value);
-    })));
+    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(
+        Radio,
+        {
+          onBlur,
+          value,
+          ref,
+          ...radioProps,
+          children: label || value
+        },
+        i
+      );
+    }) }) });
   }
 );
-if (__DEV__) {
-  RadioInput.displayName = "RadioInput";
-}
-var SelectButton = forwardRef((props, ref) => {
-  const styles = useMultiStyleConfig("Input", props);
-  const focusStyles = styles.field._focusVisible;
-  const height = styles.field.h || styles.field.height;
-  const buttonStyles = {
-    fontWeight: "normal",
-    textAlign: "left",
-    color: "inherit",
-    _active: {
-      bg: "transparent"
-    },
-    minH: height,
-    _focus: focusStyles,
-    _expanded: focusStyles,
-    ...styles.field,
-    h: "auto"
-  };
-  return /* @__PURE__ */ React8.createElement(MenuButton, {
-    as: Button,
-    ...props,
-    ref,
-    sx: buttonStyles
-  });
+RadioInput.displayName = "RadioInput";
+var [SelectProvider, useSelectContext] = createContext({
+  strict: true
 });
-if (__DEV__) {
-  SelectButton.displayName = "SelectButton";
-}
-var Select = forwardRef((props, ref) => {
+var useSelect = (props) => {
   const {
     name,
-    options,
-    children,
-    onChange,
-    defaultValue,
     value,
+    defaultValue,
+    onChange,
+    multiple,
     placeholder,
+    options: optionsProp,
     isDisabled,
-    leftIcon,
-    rightIcon = /* @__PURE__ */ React8.createElement(ChevronDownIcon, null),
-    multiple,
-    size,
-    variant,
-    menuListProps,
-    renderValue = (value2) => value2 == null ? void 0 : value2.join(", "),
-    ...rest
+    renderValue = (value2) => typeof value2 === "string" ? value2 : value2 == null ? void 0 : value2.join(", ")
   } = props;
-  const menuProps = omitThemingProps(rest);
-  const [currentValue, setCurrentValue] = React8.useState(value || defaultValue);
+  const [currentValue, setCurrentValue] = useControllableState({
+    value,
+    defaultValue,
+    onChange
+  });
   const controlProps = useFormControl({ name });
+  const options = React12__default.useMemo(
+    () => optionsProp && mapOptions(optionsProp),
+    [optionsProp]
+  );
   const handleChange = (value2) => {
     setCurrentValue(value2);
-    onChange == null ? void 0 : onChange(value2);
-  };
-  const buttonProps = {
-    isDisabled,
-    leftIcon,
-    rightIcon,
-    size,
-    variant
   };
-  const getDisplayValue = React8.useCallback(
+  const getDisplayValue = React12__default.useCallback(
     (value2) => {
       if (!options) {
         return value2;
       }
       for (const option of options) {
-        if (option.label && option.value === value2) {
-          return option.label;
+        if (option.value === value2) {
+          return option.label || option.value;
         }
       }
       return value2;
     },
     [options]
   );
-  const displayValue = currentValue ? (Array.isArray(currentValue) ? currentValue : [currentValue]).map(
-    getDisplayValue
-  ) : [];
-  return /* @__PURE__ */ React8.createElement(Menu, {
-    ...menuProps,
-    closeOnSelect: !multiple
-  }, /* @__PURE__ */ React8.createElement(chakra.div, {
-    className: cx("sui-select")
-  }, /* @__PURE__ */ React8.createElement(SelectButton, {
-    ref,
-    ...buttonProps
-  }, renderValue(displayValue) || placeholder), /* @__PURE__ */ React8.createElement(MenuList, {
-    maxH: "60vh",
-    overflowY: "auto",
-    ...menuListProps
-  }, /* @__PURE__ */ React8.createElement(MenuOptionGroup, {
-    defaultValue: defaultValue || value,
-    onChange: handleChange,
-    type: multiple ? "checkbox" : "radio"
-  }, options ? options.map(({ value: value2, label, ...rest2 }, i) => /* @__PURE__ */ React8.createElement(MenuItemOption, {
-    key: i,
-    value: value2,
-    ...rest2
-  }, label || value2)) : children)), /* @__PURE__ */ React8.createElement(chakra.input, {
-    ...controlProps,
-    name,
-    type: "hidden",
+  const displayValue = React12__default.useMemo(
+    () => currentValue ? (Array.isArray(currentValue) ? currentValue : [currentValue]).map(
+      getDisplayValue
+    ) : [],
+    [currentValue, getDisplayValue]
+  );
+  return {
+    defaultValue,
     value: currentValue,
-    className: "saas-select__input"
-  })));
+    displayValue,
+    renderValue,
+    onChange: handleChange,
+    options,
+    multiple,
+    controlProps,
+    placeholder,
+    isDisabled
+  };
+};
+var SelectButton = forwardRef(
+  (props, ref) => {
+    var _a, _b, _c, _d, _e;
+    const styles = useMultiStyleConfig("SuiSelect", props);
+    const {
+      displayValue,
+      renderValue,
+      placeholder,
+      isDisabled: isSelectDisabled
+    } = useSelectContext();
+    const context = useFormControlContext();
+    const {
+      isInvalid,
+      isReadOnly,
+      isDisabled,
+      isFocused,
+      isRequired,
+      id,
+      onBlur,
+      onFocus
+    } = context || {};
+    const { rightIcon = /* @__PURE__ */ jsx(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;
+    const height = ((_d = styles.field) == null ? void 0 : _d.h) || ((_e = styles.field) == null ? void 0 : _e.height);
+    const buttonStyles = {
+      fontWeight: "normal",
+      textAlign: "left",
+      color: "inherit",
+      _active: {
+        bg: "transparent"
+      },
+      minH: height,
+      _focus: focusStyles,
+      _expanded: focusStyles,
+      _readOnly: readOnlyStyles,
+      _invalid: invalid,
+      ...styles.field,
+      h: "auto"
+    };
+    return /* @__PURE__ */ jsx(
+      MenuButton,
+      {
+        as: Button,
+        id: id || React12.useId(),
+        ...buttonStyles,
+        ...rest,
+        onFocus,
+        onBlur,
+        isDisabled: isDisabled || isSelectDisabled,
+        "data-invalid": dataAttr(isInvalid),
+        "data-read-only": dataAttr(isReadOnly),
+        "data-focus": dataAttr(isFocused),
+        "data-required": dataAttr(isRequired),
+        rightIcon,
+        ref,
+        children: renderValue(displayValue) || placeholder
+      }
+    );
+  }
+);
+SelectButton.displayName = "SelectButton";
+var Select = forwardRef((props, ref) => {
+  const { name, children, isDisabled, multiple, ...rest } = props;
+  const menuProps = omitThemingProps(rest);
+  const context = useSelect(props);
+  const { value, controlProps } = context;
+  return /* @__PURE__ */ jsx(SelectProvider, { value: context, children: /* @__PURE__ */ jsx(Menu, { ...menuProps, closeOnSelect: !multiple, children: /* @__PURE__ */ jsxs(chakra.div, { className: cx("sui-select"), children: [
+    children,
+    /* @__PURE__ */ jsx(
+      chakra.input,
+      {
+        ...controlProps,
+        ref,
+        name,
+        type: "hidden",
+        value: value || "",
+        className: "saas-select__input"
+      }
+    )
+  ] }) }) });
 });
-if (__DEV__) {
-  Select.displayName = "Select";
-}
+var SelectList = (props) => {
+  const { defaultValue, value, options, multiple, onChange } = useSelectContext();
+  return /* @__PURE__ */ jsx(MenuList, { maxH: "100vh", overflowY: "auto", ...props, children: /* @__PURE__ */ jsx(
+    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
+    }
+  ) });
+};
+Select.displayName = "Select";
+var SelectOption = forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ jsx(MenuItemOption, { ref, ...props });
+  }
+);
+SelectOption.id = "MenuItemOption";
+SelectOption.displayName = "SelectOption";
 var NativeSelect = forwardRef(
   ({ options, children, ...props }, ref) => {
-    return /* @__PURE__ */ React8.createElement(Select$1, {
-      ref,
-      ...props
-    }, children || (options == null ? void 0 : options.map(({ value, label }) => {
-      return /* @__PURE__ */ React8.createElement("option", {
-        key: value,
-        value
-      }, label || value);
-    })));
+    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);
+    })) });
   }
 );
-if (__DEV__) {
-  NativeSelect.displayName = "NativeSelect";
-}
-
-// src/field.tsx
-var inputTypes = {};
-var defaultInputType = "text";
-var getInput = (type) => {
-  return inputTypes[type] || inputTypes[defaultInputType];
-};
+NativeSelect.displayName = "NativeSelect";
 var getError = (name, formState) => {
   return get(formState.errors, name);
 };
@@ -274,25 +354,17 @@ var BaseField = (props) => {
   const { name, label, help, hideLabel, children, ...controlProps } = props;
   const { formState } = useFormContext();
   const error = getError(name, formState);
-  return /* @__PURE__ */ React8.createElement(FormControl, {
-    ...controlProps,
-    isInvalid: !!error
-  }, label && !hideLabel ? /* @__PURE__ */ React8.createElement(FormLabel, null, label) : null, /* @__PURE__ */ React8.createElement(Box, null, children, help && !(error == null ? void 0 : error.message) ? /* @__PURE__ */ React8.createElement(FormHelperText, null, help) : null, (error == null ? void 0 : error.message) && /* @__PURE__ */ React8.createElement(FormErrorMessage, null, error == null ? void 0 : error.message)));
+  return /* @__PURE__ */ jsxs(FormControl, { ...controlProps, isInvalid: !!error, children: [
+    label && !hideLabel ? /* @__PURE__ */ jsx(FormLabel, { children: label }) : null,
+    /* @__PURE__ */ jsxs(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 })
+    ] })
+  ] });
 };
-if (__DEV__) {
-  BaseField.displayName = "BaseField";
-}
-var Field = React8.forwardRef(
-  (props, ref) => {
-    const { type = defaultInputType } = props;
-    const InputComponent = getInput(type);
-    return /* @__PURE__ */ React8.createElement(InputComponent, {
-      ref,
-      ...props
-    });
-  }
-);
-var createField = (InputComponent, { displayName, hideLabel, BaseField: BaseField2 }) => {
+BaseField.displayName = "BaseField";
+var _createField = (InputComponent, { displayName, hideLabel, BaseField: BaseField2 }) => {
   const Field2 = forwardRef((props, ref) => {
     const {
       id,
@@ -310,24 +382,31 @@ var createField = (InputComponent, { displayName, hideLabel, BaseField: BaseFiel
       required: isRequired,
       ...rules
     };
-    return /* @__PURE__ */ React8.createElement(BaseField2, {
-      id,
-      name,
-      label,
-      help,
-      hideLabel,
-      isDisabled,
-      isInvalid,
-      isReadOnly,
-      isRequired
-    }, /* @__PURE__ */ React8.createElement(InputComponent, {
-      ref,
-      id,
-      name,
-      label: hideLabel ? label : void 0,
-      rules: inputRules,
-      ...inputProps
-    }));
+    return /* @__PURE__ */ jsx(
+      BaseField2,
+      {
+        id,
+        name,
+        label,
+        help,
+        hideLabel,
+        isDisabled,
+        isInvalid,
+        isReadOnly,
+        isRequired,
+        children: /* @__PURE__ */ jsx(
+          InputComponent,
+          {
+            ref,
+            id,
+            name,
+            label: hideLabel ? label : void 0,
+            rules: inputRules,
+            ...inputProps
+          }
+        )
+      }
+    );
   });
   Field2.displayName = displayName;
   return Field2;
@@ -336,18 +415,24 @@ var withControlledInput = (InputComponent) => {
   return forwardRef(
     ({ name, rules, ...inputProps }, ref) => {
       const { control } = useFormContext();
-      return /* @__PURE__ */ React8.createElement(Controller, {
-        name,
-        control,
-        rules,
-        render: ({ field: { ref: _ref, ...field } }) => /* @__PURE__ */ React8.createElement(InputComponent, {
-          ...field,
-          ...inputProps,
-          onChange: callAllHandlers(inputProps.onChange, field.onChange),
-          onBlur: callAllHandlers(inputProps.onBlur, field.onBlur),
-          ref: useMergeRefs(ref, _ref)
-        })
-      });
+      return /* @__PURE__ */ jsx(
+        Controller,
+        {
+          name,
+          control,
+          rules,
+          render: ({ field: { ref: _ref, ...field } }) => /* @__PURE__ */ jsx(
+            InputComponent,
+            {
+              ...field,
+              ...inputProps,
+              onChange: callAllHandlers(inputProps.onChange, field.onChange),
+              onBlur: callAllHandlers(inputProps.onBlur, field.onBlur),
+              ref: useMergeRefs(ref, _ref)
+            }
+          )
+        }
+      );
     }
   );
 };
@@ -356,277 +441,167 @@ var withUncontrolledInput = (InputComponent) => {
     ({ name, rules, ...inputProps }, ref) => {
       const { register } = useFormContext();
       const { ref: _ref, ...field } = register(name, rules);
-      return /* @__PURE__ */ React8.createElement(InputComponent, {
-        ...field,
-        ...inputProps,
-        onChange: callAllHandlers(inputProps.onChange, field.onChange),
-        onBlur: callAllHandlers(inputProps.onBlur, field.onBlur),
-        ref: useMergeRefs(ref, _ref)
-      });
+      return /* @__PURE__ */ jsx(
+        InputComponent,
+        {
+          ...field,
+          ...inputProps,
+          onChange: callAllHandlers(inputProps.onChange, field.onChange),
+          onBlur: callAllHandlers(inputProps.onBlur, field.onBlur),
+          ref: useMergeRefs(ref, _ref)
+        }
+      );
     }
   );
 };
-var registerFieldType = (type, component, options) => {
+var createField = (component, options) => {
+  var _a;
   let InputComponent;
   if (options == null ? void 0 : options.isControlled) {
     InputComponent = withControlledInput(component);
   } else {
     InputComponent = withUncontrolledInput(component);
   }
-  const Field2 = createField(InputComponent, {
-    displayName: `${type.split("-").map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join("")}Field`,
+  const Field2 = _createField(InputComponent, {
+    displayName: `${(_a = component.displayName) != null ? _a : "Custom"}Field`,
     hideLabel: options == null ? void 0 : options.hideLabel,
     BaseField: (options == null ? void 0 : options.BaseField) || BaseField
   });
-  inputTypes[type] = Field2;
   return Field2;
 };
-var InputField = registerFieldType(
-  "text",
+var InputField = createField(
   forwardRef(({ type = "text", leftAddon, rightAddon, size, ...rest }, ref) => {
-    const input = /* @__PURE__ */ React8.createElement(Input, {
-      type,
-      size,
-      ...rest,
-      ref
-    });
+    const input = /* @__PURE__ */ jsx(Input, { type, size, ...rest, ref });
     if (leftAddon || rightAddon) {
-      return /* @__PURE__ */ React8.createElement(InputGroup, {
-        size
-      }, leftAddon, input, rightAddon);
+      return /* @__PURE__ */ jsxs(InputGroup, { size, children: [
+        leftAddon,
+        input,
+        rightAddon
+      ] });
     }
     return input;
   })
 );
-var NumberInputField2 = registerFieldType(
-  "number",
+var NumberInputField2 = createField(
   NumberInput,
   {
     isControlled: true
   }
 );
-var PasswordInputField = registerFieldType(
-  "password",
-  forwardRef((props, ref) => /* @__PURE__ */ React8.createElement(PasswordInput, {
-    ref,
-    ...props
-  }))
+var PasswordInputField = createField(
+  forwardRef((props, ref) => /* @__PURE__ */ jsx(PasswordInput, { ref, ...props }))
 );
-var TextareaField = registerFieldType(
-  "textarea",
-  Textarea
-);
-var SwitchField = registerFieldType(
-  "switch",
+var TextareaField = createField(Textarea);
+var SwitchField = createField(
   forwardRef(({ type, value, ...rest }, ref) => {
-    return /* @__PURE__ */ React8.createElement(Switch, {
-      isChecked: !!value,
-      ...rest,
-      ref
-    });
+    return /* @__PURE__ */ jsx(Switch, { isChecked: !!value, ...rest, ref });
   }),
   {
     isControlled: true
   }
 );
-var SelectField = registerFieldType("select", Select, {
-  isControlled: true
-});
-var CheckboxField = registerFieldType(
-  "checkbox",
-  forwardRef(({ label, type, ...props }, ref) => {
-    return /* @__PURE__ */ React8.createElement(Checkbox, {
-      ref,
-      ...props
-    }, label);
+var SelectField = createField(
+  forwardRef((props, ref) => {
+    return /* @__PURE__ */ jsxs(Select, { ref, ...props, children: [
+      /* @__PURE__ */ jsx(SelectButton, {}),
+      /* @__PURE__ */ jsx(SelectList, {})
+    ] });
   }),
   {
-    hideLabel: true
+    isControlled: true
   }
 );
-var RadioField = registerFieldType(
-  "radio",
-  RadioInput,
+var CheckboxField = createField(
+  forwardRef(({ label, type, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Checkbox, { ref, ...props, children: label });
+  }),
   {
-    isControlled: true
+    hideLabel: true
   }
 );
-var NativeSelectField = registerFieldType(
-  "native-select",
-  NativeSelect,
-  { isControlled: true }
-);
-var PinField = registerFieldType(
-  "pin",
+var RadioField = createField(RadioInput, {
+  isControlled: true
+});
+var NativeSelectField = createField(NativeSelect, {
+  isControlled: true
+});
+var PinField = createField(
   forwardRef((props, ref) => {
     const { pinLength = 4, pinType, spacing, ...inputProps } = props;
     const inputs = [];
     for (let i = 0; i < pinLength; i++) {
-      inputs.push(/* @__PURE__ */ React8.createElement(PinInputField, {
-        key: i,
-        ref
-      }));
+      inputs.push(/* @__PURE__ */ jsx(PinInputField, { ref }, i));
     }
-    return /* @__PURE__ */ React8.createElement(HStack, {
-      spacing
-    }, /* @__PURE__ */ React8.createElement(PinInput, {
-      ...inputProps,
-      type: pinType
-    }, inputs));
+    return /* @__PURE__ */ jsx(HStack, { spacing, children: /* @__PURE__ */ jsx(PinInput, { ...inputProps, type: pinType, children: inputs }) });
   }),
   {
     isControlled: true
   }
 );
-var mapFields = (schema) => schema && Object.entries(schema).map(([name, { items, label, title, ...field }]) => {
-  return {
-    ...field,
-    name,
-    label: label || title || name
-  };
-});
-var objectFieldResolver = (schema) => {
-  const getFields = () => {
-    return mapFields(schema);
-  };
-  const getNestedFields = (name) => {
-    var _a;
-    const field = get$1(schema, name);
-    if (!field)
-      return [];
-    if (((_a = field.items) == null ? void 0 : _a.type) === "object") {
-      return mapFields(field.items.properties);
-    } else if (field.type === "object") {
-      return mapFields(field.properties);
-    }
-    return [field.items];
-  };
-  return { getFields, getNestedFields };
+var defaultFieldTypes = {
+  text: InputField,
+  email: InputField,
+  url: InputField,
+  phone: InputField,
+  number: NumberInputField2,
+  password: PasswordInputField,
+  textarea: TextareaField,
+  switch: SwitchField,
+  select: SelectField,
+  checkbox: CheckboxField,
+  radio: RadioField,
+  pin: PinField,
+  "native-select": NativeSelectField
 };
-
-// src/form.tsx
-var Form = forwardRef(
+var FieldsContext = React12__default.createContext(
+  null
+);
+var FieldsProvider = (props) => {
+  const fields = { ...defaultFieldTypes, ...props.value };
+  return /* @__PURE__ */ jsx(FieldsContext.Provider, { value: fields, children: props.children });
+};
+var useField = (type) => {
+  const context = React12__default.useContext(FieldsContext);
+  return (context == null ? void 0 : context[type]) || InputField;
+};
+var defaultInputType = "text";
+var Field = React12.forwardRef(
   (props, ref) => {
-    var _a;
-    const {
-      mode = "all",
-      resolver,
-      reValidateMode,
-      shouldFocusError,
-      shouldUnregister,
-      shouldUseNativeValidation,
-      criteriaMode,
-      delayError,
-      schema,
-      defaultValues,
-      values,
-      context,
-      resetOptions,
-      onChange,
-      onSubmit,
-      onError,
-      formRef,
-      children,
-      ...rest
-    } = props;
-    const form = {
-      mode,
-      resolver,
-      defaultValues,
-      values,
-      reValidateMode,
-      shouldFocusError,
-      shouldUnregister,
-      shouldUseNativeValidation,
-      criteriaMode,
-      delayError,
-      context,
-      resetOptions
-    };
-    if (schema && !resolver) {
-      form.resolver = (_a = Form.getResolver) == null ? void 0 : _a.call(Form, schema);
-    }
-    const methods = useForm(form);
-    const { handleSubmit } = methods;
-    React8.useImperativeHandle(formRef, () => methods, [formRef, methods]);
-    React8.useEffect(() => {
-      let subscription;
-      if (onChange) {
-        subscription = methods.watch(onChange);
-      }
-      return () => subscription == null ? void 0 : subscription.unsubscribe();
-    }, [methods, onChange]);
-    const Field2 = React8.useMemo(
-      () => (props2) => /* @__PURE__ */ React8.createElement(Field, {
-        ...props2
-      }),
-      []
-    );
-    return /* @__PURE__ */ React8.createElement(FormProvider, {
-      ...methods
-    }, /* @__PURE__ */ React8.createElement(chakra.form, {
-      ref,
-      onSubmit: handleSubmit(onSubmit, onError),
-      ...rest,
-      className: cx("sui-form", props.className)
-    }, runIfFn(children, {
-      Field: Field2,
-      ...methods
-    })));
+    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 });
   }
 );
-Form.getFieldResolver = objectFieldResolver;
-Form.displayName = "Form";
-function createForm({ resolver }) {
-  const CreateForm = (props) => {
-    const { schema, ...rest } = props;
-    return /* @__PURE__ */ React8.createElement(Form, {
-      resolver: resolver == null ? void 0 : resolver(props.schema),
-      ...rest
-    });
-  };
-  return CreateForm;
-}
 var FormLayoutItem = ({ children }) => {
-  return /* @__PURE__ */ React8.createElement(chakra.div, null, children);
+  return /* @__PURE__ */ jsx(chakra.div, { children });
 };
-if (__DEV__) {
-  FormLayoutItem.displayName = "FormLayoutItem";
-}
+FormLayoutItem.displayName = "FormLayoutItem";
 var FormLayout = ({ children, ...props }) => {
   var _a, _b, _c;
   const theme = useTheme();
-  const defaultProps = (_c = (_b = (_a = theme.components) == null ? void 0 : _a.FormLayout) == null ? void 0 : _b.defaultProps) != null ? _c : {
+  const defaultProps = (_c = (_b = (_a = theme.components) == null ? void 0 : _a.SuiFormLayout) == null ? void 0 : _b.defaultProps) != null ? _c : {
     spacing: 4
   };
   const gridProps = {
     ...defaultProps,
     ...props
   };
-  return /* @__PURE__ */ React8.createElement(SimpleGrid, {
-    ...gridProps,
-    className: cx("sui-form__layout", props.className)
-  }, React8.Children.map(children, (child) => {
-    if (React8.isValidElement(child)) {
-      return /* @__PURE__ */ React8.createElement(FormLayoutItem, null, child);
-    }
-    return child;
-  }));
-};
-if (__DEV__) {
-  FormLayout.displayName = "FormLayout";
-}
-var mapNestedFields = (name, children) => {
-  return React8.Children.map(children, (child) => {
-    if (React8.isValidElement(child) && child.props.name) {
-      return React8.cloneElement(child, {
-        ...child.props,
-        name: `${name}.${child.props.name}`
-      });
+  return /* @__PURE__ */ jsx(
+    SimpleGrid,
+    {
+      ...gridProps,
+      className: cx("sui-form__layout", props.className),
+      children: React12.Children.map(children, (child) => {
+        if (React12.isValidElement(child)) {
+          return /* @__PURE__ */ jsx(FormLayoutItem, { children: child });
+        }
+        return child;
+      })
     }
-    return child;
-  });
+  );
 };
+FormLayout.displayName = "FormLayout";
 var [ArrayFieldProvider, useArrayFieldContext] = createContext({
   name: "ArrayFieldContext"
 });
@@ -657,7 +632,7 @@ var useArrayField = ({
 var useArrayFieldRow = ({ index }) => {
   const { clearErrors } = useFormContext();
   const { name, remove, fields } = useArrayFieldContext();
-  React8.useEffect(() => {
+  React12.useEffect(() => {
     clearErrors(name);
   }, []);
   return {
@@ -665,7 +640,7 @@ var useArrayFieldRow = ({ index }) => {
     isFirst: index === 0,
     isLast: index === fields.length - 1,
     name: `${name}.${index}`,
-    remove: React8.useCallback(() => {
+    remove: React12.useCallback(() => {
       clearErrors(name);
       remove(index);
     }, [index])
@@ -690,39 +665,29 @@ var useArrayFieldAddButton = () => {
     isDisabled
   };
 };
-
-// src/array-field.tsx
 var ArrayFieldRow = ({
   children,
   index,
   ...rowFieldsProps
 }) => {
-  return /* @__PURE__ */ React8.createElement(ArrayFieldRowContainer, {
-    index
-  }, /* @__PURE__ */ React8.createElement(ArrayFieldRowFields, {
-    ...rowFieldsProps
-  }, children), /* @__PURE__ */ React8.createElement(ArrayFieldRemoveButton, null));
+  return /* @__PURE__ */ jsxs(ArrayFieldRowContainer, { index, children: [
+    /* @__PURE__ */ jsx(ArrayFieldRowFields, { ...rowFieldsProps, children }),
+    /* @__PURE__ */ jsx(ArrayFieldRemoveButton, {})
+  ] });
 };
-if (__DEV__) {
-  ArrayFieldRow.displayName = "ArrayFieldRow";
-}
+ArrayFieldRow.displayName = "ArrayFieldRow";
 var ArrayFieldRowFields = ({
   children,
   ...layoutProps
 }) => {
   const { name } = useArrayFieldRowContext();
-  return /* @__PURE__ */ React8.createElement(FormLayout, {
-    flex: "1",
-    mr: "2",
-    ...layoutProps
-  }, mapNestedFields(name, children));
+  return /* @__PURE__ */ jsx(FormLayout, { flex: "1", mr: "2", ...layoutProps, children: mapNestedFields(name, children) });
 };
-if (__DEV__) {
-  ArrayFieldRowFields.displayName = "ArrayFieldRowFields";
-}
+ArrayFieldRowFields.displayName = "ArrayFieldRowFields";
 var ArrayFieldRowContainer = ({
   children,
-  index
+  index,
+  ...rest
 }) => {
   const context = useArrayFieldRow({ index });
   const styles = {
@@ -732,61 +697,45 @@ var ArrayFieldRowContainer = ({
     width: "100%",
     mb: 4
   };
-  return /* @__PURE__ */ React8.createElement(ArrayFieldRowProvider, {
-    value: context
-  }, /* @__PURE__ */ React8.createElement(chakra.div, {
-    __css: styles
-  }, children));
+  return /* @__PURE__ */ jsx(ArrayFieldRowProvider, { value: context, children: /* @__PURE__ */ jsx(chakra.div, { ...rest, __css: styles, children }) });
 };
-if (__DEV__) {
-  ArrayFieldRowContainer.displayName = "ArrayFieldRowContainer";
-}
+ArrayFieldRowContainer.displayName = "ArrayFieldRowContainer";
 var ArrayFieldRemoveButton = (props) => {
-  return /* @__PURE__ */ React8.createElement(Button, {
-    "aria-label": "Remove row",
-    ...useArrayFieldRemoveButton(),
-    ...props
-  }, props.children || /* @__PURE__ */ React8.createElement(MinusIcon, null));
+  return /* @__PURE__ */ jsx(Button, { "aria-label": "Remove row", ...useArrayFieldRemoveButton(), ...props, children: props.children || /* @__PURE__ */ jsx(MinusIcon, {}) });
 };
-if (__DEV__) {
-  ArrayFieldRemoveButton.displayName = "ArrayFieldRemoveButton";
-}
+ArrayFieldRemoveButton.displayName = "ArrayFieldRemoveButton";
 var ArrayFieldAddButton = (props) => {
-  return /* @__PURE__ */ React8.createElement(Button, {
-    "aria-label": "Add row",
-    float: "right",
-    ...useArrayFieldAddButton(),
-    ...props
-  }, props.children || /* @__PURE__ */ React8.createElement(AddIcon, null));
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      "aria-label": "Add row",
+      float: "right",
+      ...useArrayFieldAddButton(),
+      ...props,
+      children: props.children || /* @__PURE__ */ jsx(PlusIcon, {})
+    }
+  );
 };
-if (__DEV__) {
-  ArrayFieldAddButton.displayName = "ArrayFieldAddButton";
-}
+ArrayFieldAddButton.displayName = "ArrayFieldAddButton";
 var ArrayField = forwardRef(
   (props, ref) => {
     const { children, ...containerProps } = props;
-    return /* @__PURE__ */ React8.createElement(ArrayFieldContainer, {
-      ref,
-      ...containerProps
-    }, /* @__PURE__ */ React8.createElement(ArrayFieldRows, null, (fields) => /* @__PURE__ */ React8.createElement(React8.Fragment, null, fields.map(({ id }, index) => /* @__PURE__ */ React8.createElement(ArrayFieldRow, {
-      key: id,
-      index
-    }, children)))), /* @__PURE__ */ React8.createElement(ArrayFieldAddButton, null));
+    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, {})
+    ] });
   }
 );
-if (__DEV__) {
-  ArrayField.displayName = "ArrayField";
-}
+ArrayField.displayName = "ArrayField";
 var ArrayFieldRows = ({
   children
 }) => {
   const { fields } = useArrayFieldContext();
   return children(fields);
 };
-if (__DEV__) {
-  ArrayFieldRows.displayName = "ArrayFieldRows";
-}
-var ArrayFieldContainer = React8.forwardRef(
+ArrayFieldRows.displayName = "ArrayFieldRows";
+var ArrayFieldContainer = React12.forwardRef(
   ({
     name,
     defaultValue,
@@ -796,81 +745,85 @@ var ArrayFieldContainer = React8.forwardRef(
     children,
     ...fieldProps
   }, ref) => {
+    const overrides = useFieldProps(name);
     const context = useArrayField({
       name,
       defaultValue,
       keyName,
-      min,
-      max
+      min: min || (overrides == null ? void 0 : overrides.min),
+      max: max || (overrides == null ? void 0 : overrides.max)
     });
-    React8.useImperativeHandle(ref, () => context, [ref, context]);
-    return /* @__PURE__ */ React8.createElement(ArrayFieldProvider, {
-      value: context
-    }, /* @__PURE__ */ React8.createElement(BaseField, {
-      name,
-      ...fieldProps
-    }, children));
+    React12.useImperativeHandle(ref, () => context, [ref, context]);
+    return /* @__PURE__ */ jsx(ArrayFieldProvider, { value: context, children: /* @__PURE__ */ jsx(BaseField, { name, ...fieldProps, ...overrides, children }) });
   }
 );
-if (__DEV__) {
-  ArrayFieldContainer.displayName = "ArrayFieldContainer";
-}
+ArrayFieldContainer.displayName = "ArrayFieldContainer";
 var FormLegend = (props) => {
   const styles = useStyleConfig("SuiFormLegend");
-  return /* @__PURE__ */ React8.createElement(FormLabel, {
-    as: "legend",
-    sx: styles,
-    ...props
-  });
+  return /* @__PURE__ */ jsx(FormLabel, { as: "legend", sx: styles, ...props });
 };
 var ObjectField = (props) => {
-  const { name, label, hideLabel, children, columns, spacing, ...fieldProps } = props;
-  return /* @__PURE__ */ React8.createElement(FormControl, {
+  const {
     name,
-    as: "fieldset",
+    label,
+    hideLabel: hideLabelProp,
+    children,
+    columns: columnsProp,
+    spacing: spacingProp,
     ...fieldProps
-  }, /* @__PURE__ */ React8.createElement(FormLegend, {
-    display: hideLabel ? "none" : "block"
-  }, label), /* @__PURE__ */ React8.createElement(FormLayout, {
-    columns,
-    gridGap: spacing
-  }, mapNestedFields(name, children)));
+  } = 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(
+      FormLayout,
+      {
+        columns: columnsProp || columns,
+        gridGap: spacingProp || spacing,
+        children: mapNestedFields(name, children)
+      }
+    )
+  ] });
 };
-if (__DEV__) {
-  ObjectField.displayName = "ObjectField";
-}
+ObjectField.displayName = "ObjectField";
 var mapNestedFields2 = (resolver, name) => {
   var _a;
   return (_a = resolver.getNestedFields(name)) == null ? void 0 : _a.map(
-    ({ name: name2, type, ...nestedFieldProps }, i) => /* @__PURE__ */ React8.createElement(Field, {
-      key: name2 || i,
-      name: name2,
-      type,
-      ...nestedFieldProps
-    })
+    ({ name: name2, type, ...nestedFieldProps }, i) => /* @__PURE__ */ jsx(
+      Field,
+      {
+        name: name2,
+        type,
+        ...nestedFieldProps
+      },
+      name2 || i
+    )
   );
 };
-var Fields = ({
-  schema,
-  fieldResolver,
+var AutoFields = ({
+  schema: schemaProp,
+  fieldResolver: fieldResolverProp,
   focusFirstField,
   ...props
 }) => {
-  const resolver = React8.useMemo(
-    () => fieldResolver || Form.getFieldResolver(schema),
-    [schema, fieldResolver]
-  );
-  const fields = React8.useMemo(() => resolver.getFields(), [resolver]);
+  const context = useFormContext();
+  const schema = schemaProp || context.schema;
+  const fieldResolver = fieldResolverProp || context.fieldResolver;
+  const resolver = React12.useMemo(() => fieldResolver, [schema, fieldResolver]);
+  const fields = React12.useMemo(() => resolver == null ? void 0 : resolver.getFields(), [resolver]);
   const form = useFormContext();
-  React8.useEffect(() => {
+  React12.useEffect(() => {
     var _a;
-    if (focusFirstField && ((_a = fields[0]) == null ? void 0 : _a.name)) {
+    if (focusFirstField && ((_a = fields == null ? void 0 : fields[0]) == null ? void 0 : _a.name)) {
       form.setFocus(fields[0].name);
     }
   }, [schema, fieldResolver, focusFirstField]);
-  return /* @__PURE__ */ React8.createElement(FormLayout, {
-    ...props
-  }, fields.map(
+  if (!resolver) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(FormLayout, { ...props, children: fields == null ? void 0 : fields.map(
     ({
       name,
       type,
@@ -878,28 +831,15 @@ var Fields = ({
       ...fieldProps
     }) => {
       if (type === "array") {
-        return /* @__PURE__ */ React8.createElement(ArrayField, {
-          key: name,
-          name,
-          ...fieldProps
-        }, mapNestedFields2(resolver, name));
+        return /* @__PURE__ */ jsx(ArrayField, { name, ...fieldProps, children: mapNestedFields2(resolver, name) }, name);
       } else if (type === "object") {
-        return /* @__PURE__ */ React8.createElement(ObjectField, {
-          key: name,
-          name,
-          ...fieldProps
-        }, mapNestedFields2(resolver, name));
+        return /* @__PURE__ */ jsx(ObjectField, { name, ...fieldProps, children: mapNestedFields2(resolver, name) }, name);
       }
-      return /* @__PURE__ */ React8.createElement(Field, {
-        key: name,
-        name,
-        type,
-        ...fieldProps
-      });
+      return /* @__PURE__ */ jsx(Field, { name, type, ...fieldProps }, name);
     }
-  ));
+  ) });
 };
-Fields.displayName = "Fields";
+AutoFields.displayName = "Fields";
 var SubmitButton = forwardRef(
   (props, ref) => {
     const {
@@ -910,15 +850,19 @@ var SubmitButton = forwardRef(
       isLoading,
       ...rest
     } = props;
-    const { formState } = useFormContext();
+    const { formState } = useFormContext$1();
     const isDisabled = disableIfUntouched && !formState.isDirty || disableIfInvalid && !formState.isValid || isDisabledProp;
-    return /* @__PURE__ */ React8.createElement(Button, {
-      ...rest,
-      ref,
-      type: "submit",
-      isLoading: formState.isSubmitting || isLoading,
-      isDisabled
-    }, children);
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        ...rest,
+        ref,
+        type: "submit",
+        isLoading: formState.isSubmitting || isLoading,
+        isDisabled,
+        children
+      }
+    );
   }
 );
 SubmitButton.defaultProps = {
@@ -927,28 +871,6 @@ SubmitButton.defaultProps = {
   disableIfInvalid: false
 };
 SubmitButton.displayName = "SubmitButton";
-
-// src/auto-form.tsx
-var AutoForm = forwardRef(
-  (props, ref) => {
-    const {
-      schema,
-      submitLabel = "Submit",
-      fieldResolver,
-      children,
-      ...rest
-    } = props;
-    return /* @__PURE__ */ React8.createElement(Form, {
-      ...rest,
-      schema,
-      ref
-    }, /* @__PURE__ */ React8.createElement(FormLayout, null, /* @__PURE__ */ React8.createElement(Fields, {
-      schema,
-      fieldResolver
-    }), submitLabel && /* @__PURE__ */ React8.createElement(SubmitButton, null, submitLabel), children));
-  }
-);
-AutoForm.displayName = "AutoForm";
 var DisplayIf = ({
   children,
   name,
@@ -966,19 +888,18 @@ var DisplayIf = ({
   const context = useFormContext();
   return condition(value, context) ? children : null;
 };
-if (__DEV__) {
-  DisplayIf.displayName = "DisplayIf";
-}
+DisplayIf.displayName = "DisplayIf";
 var [StepFormProvider, useStepFormContext] = createContext({
   name: "StepFormContext",
   errorMessage: "useStepFormContext: `context` is undefined. Seems you forgot to wrap step form components in `<StepForm />`"
 });
 function useStepForm(props) {
-  const { onChange, ...rest } = props;
+  const { onChange, steps: stepsOptions, resolver, ...rest } = props;
   const stepper = useStepper(rest);
+  const [options, setOptions] = React12.useState(stepsOptions);
   const { activeStep, isLastStep, nextStep } = stepper;
-  const [steps, updateSteps] = React8.useState({});
-  const onSubmitStep = React8.useCallback(
+  const [steps, updateSteps] = React12.useState({});
+  const onSubmitStep = React12.useCallback(
     async (data) => {
       var _a, _b;
       try {
@@ -999,24 +920,31 @@ function useStepForm(props) {
     },
     [steps, activeStep, isLastStep]
   );
-  const getFormProps = React8.useCallback(() => {
+  const getFormProps = React12.useCallback(() => {
     const step = steps[activeStep];
     return {
       onSubmit: onSubmitStep,
       schema: step == null ? void 0 : step.schema,
-      resolver: step == null ? void 0 : step.resolver
+      resolver: (step == null ? void 0 : step.schema) ? (
+        /* @todo fix resolver type */
+        resolver == null ? void 0 : resolver(step.schema)
+      ) : void 0
     };
   }, [steps, onSubmitStep, activeStep]);
-  const updateStep = React8.useCallback(
+  const updateStep = React12.useCallback(
     (step) => {
+      const stepOptions = options == null ? void 0 : options.find((s) => s.name === step.name);
       updateSteps((steps2) => {
         return {
           ...steps2,
-          [step.name]: step
+          [step.name]: {
+            ...step,
+            schema: stepOptions == null ? void 0 : stepOptions.schema
+          }
         };
       });
     },
-    [steps]
+    [steps, options]
   );
   return {
     getFormProps,
@@ -1029,7 +957,7 @@ function useFormStep(props) {
   const { name, schema, resolver, onSubmit } = props;
   const step = useStep({ name });
   const { steps, updateStep } = useStepFormContext();
-  React8.useEffect(() => {
+  React12.useEffect(() => {
     updateStep({ name, schema, resolver, onSubmit });
   }, [name, schema]);
   return {
@@ -1037,92 +965,113 @@ function useFormStep(props) {
     ...steps[name] || { name, schema }
   };
 }
-
-// src/step-form.tsx
-var StepForm = React8.forwardRef(
-  (props, ref) => {
-    const { children, ...rest } = props;
-    const stepper = useStepForm(props);
-    const { getFormProps, ...ctx } = stepper;
-    const context = React8.useMemo(() => ctx, [ctx]);
-    return /* @__PURE__ */ React8.createElement(StepperProvider, {
-      value: context
-    }, /* @__PURE__ */ React8.createElement(StepFormProvider, {
-      value: context
-    }, /* @__PURE__ */ React8.createElement(Form, {
-      ref,
-      ...rest,
-      ...getFormProps()
-    }, runIfFn(children, stepper))));
-  }
-);
 var FormStepper = (props) => {
   const { activeIndex, setIndex } = useStepperContext();
-  const { children, orientation, variant, colorScheme, size, ...rest } = props;
-  const elements = React8.Children.map(children, (child) => {
-    if (React8.isValidElement(child) && (child == null ? void 0 : child.type) === FormStep) {
+  const {
+    children,
+    orientation,
+    variant,
+    colorScheme,
+    size,
+    onChange: onChangeProp,
+    render,
+    ...rest
+  } = props;
+  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__ */ React8.createElement(StepperStep, {
-        name: child.props.name,
-        title: child.props.title,
-        isCompleted,
-        ...rest
-      }, child.props.children);
+      return /* @__PURE__ */ jsx(
+        StepsItem,
+        {
+          render,
+          name: child.props.name,
+          title: child.props.title,
+          isCompleted,
+          ...rest,
+          children: child.props.children
+        }
+      );
     }
     return child;
   });
-  const onChange = React8.useCallback((i) => {
+  const onChange = React12.useCallback((i) => {
     setIndex(i);
+    onChangeProp == null ? void 0 : onChangeProp(i);
   }, []);
-  return /* @__PURE__ */ React8.createElement(StepperContainer, {
-    orientation,
-    step: activeIndex,
-    variant,
-    colorScheme,
-    size,
-    onChange
-  }, /* @__PURE__ */ React8.createElement(StepperSteps, {
-    mb: "4",
-    ...props
-  }, elements));
+  return /* @__PURE__ */ jsx(
+    Steps,
+    {
+      orientation,
+      step: activeIndex,
+      variant,
+      colorScheme,
+      size,
+      onChange,
+      children: elements
+    }
+  );
 };
 var FormStep = (props) => {
-  const { name, schema, resolver, children, className, onSubmit, ...rest } = props;
-  const step = useFormStep({ name, schema, resolver, onSubmit });
+  const { name, children, className, onSubmit, ...rest } = props;
+  const step = useFormStep({ name, onSubmit });
   const { isActive } = step;
-  return isActive ? /* @__PURE__ */ React8.createElement(chakra.div, {
-    ...rest,
-    className: cx("sui-form__step", className)
-  }, children) : null;
+  return isActive ? /* @__PURE__ */ jsx(chakra.div, { ...rest, className: cx("sui-form__step", className), children }) : null;
 };
-if (__DEV__) {
-  FormStep.displayName = "FormStep";
-}
+FormStep.displayName = "FormStep";
 var PrevButton = (props) => {
   const { isFirstStep, isCompleted, prevStep } = useStepperContext();
-  return /* @__PURE__ */ React8.createElement(Button, {
-    isDisabled: isFirstStep || isCompleted,
-    label: "Back",
-    ...props,
-    className: cx("sui-form__prev-button", props.className),
-    onClick: callAllHandlers(props.onClick, prevStep)
-  });
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      isDisabled: isFirstStep || isCompleted,
+      children: "Back",
+      ...props,
+      className: cx("sui-form__prev-button", props.className),
+      onClick: callAllHandlers(props.onClick, prevStep)
+    }
+  );
 };
-if (__DEV__) {
-  PrevButton.displayName = "PrevButton";
-}
+PrevButton.displayName = "PrevButton";
 var NextButton = (props) => {
   const { label = "Next", submitLabel = "Complete", ...rest } = props;
   const { isLastStep, isCompleted } = useStepperContext();
-  return /* @__PURE__ */ React8.createElement(SubmitButton, {
-    ...rest,
-    isDisabled: isCompleted,
-    className: cx("sui-form__next-button", props.className)
-  }, isLastStep || isCompleted ? submitLabel : label);
+  return /* @__PURE__ */ jsx(
+    SubmitButton,
+    {
+      ...rest,
+      isDisabled: isCompleted,
+      className: cx("sui-form__next-button", props.className),
+      children: isLastStep || isCompleted ? submitLabel : label
+    }
+  );
+};
+NextButton.displayName = "NextButton";
+var mapFields = (schema) => schema && Object.entries(schema).map(([name, { items, label, title, ...field }]) => {
+  return {
+    ...field,
+    name,
+    label: label || title || name
+    // json schema compatibility
+  };
+});
+var objectFieldResolver = (schema) => {
+  const getFields = () => {
+    return mapFields(schema);
+  };
+  const getNestedFields = (name) => {
+    var _a;
+    const field = get$1(schema, name);
+    if (!field)
+      return [];
+    if (((_a = field.items) == null ? void 0 : _a.type) === "object") {
+      return mapFields(field.items.properties);
+    } else if (field.type === "object") {
+      return mapFields(field.properties);
+    }
+    return [field.items];
+  };
+  return { getFields, getNestedFields };
 };
-if (__DEV__) {
-  NextButton.displayName = "NextButton";
-}
 var WatchField = (props) => {
   const { name, defaultValue, isDisabled, isExact } = props;
   const form = useFormContext();
@@ -1134,7 +1083,138 @@ var WatchField = (props) => {
   });
   return props.children(field, form) || null;
 };
+var Form = forwardRef(
+  (props, ref) => {
+    const {
+      mode = "all",
+      resolver,
+      fieldResolver,
+      fields,
+      reValidateMode,
+      shouldFocusError,
+      shouldUnregister,
+      shouldUseNativeValidation,
+      criteriaMode,
+      delayError,
+      schema,
+      defaultValues,
+      values,
+      context,
+      resetOptions,
+      onChange,
+      onSubmit,
+      onError,
+      formRef,
+      children,
+      ...rest
+    } = props;
+    const form = {
+      mode,
+      resolver,
+      defaultValues,
+      values,
+      reValidateMode,
+      shouldFocusError,
+      shouldUnregister,
+      shouldUseNativeValidation,
+      criteriaMode,
+      delayError,
+      context,
+      resetOptions
+    };
+    const methods = useForm(form);
+    const { handleSubmit } = methods;
+    React12.useImperativeHandle(formRef, () => methods, [formRef, methods]);
+    React12.useEffect(() => {
+      let subscription;
+      if (onChange) {
+        subscription = methods.watch(onChange);
+      }
+      return () => subscription == null ? void 0 : subscription.unsubscribe();
+    }, [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 })
+      ] });
+    }
+    return /* @__PURE__ */ jsx(
+      FormProvider,
+      {
+        ...methods,
+        schema,
+        fieldResolver,
+        fields,
+        children: /* @__PURE__ */ jsx(
+          chakra.form,
+          {
+            ref,
+            onSubmit: handleSubmit(onSubmit, onError),
+            ...rest,
+            className: cx("sui-form", props.className),
+            children: runIfFn(_children, {
+              Field,
+              DisplayIf,
+              ArrayField,
+              ObjectField,
+              ...methods
+            })
+          }
+        )
+      }
+    );
+  }
+);
+Form.displayName = "Form";
+function createForm({
+  resolver,
+  fieldResolver = objectFieldResolver,
+  fields
+} = {}) {
+  const DefaultForm = forwardRef(
+    (props, ref) => {
+      const { schema, ...rest } = props;
+      return /* @__PURE__ */ jsx(FieldsProvider, { value: fields || {}, children: /* @__PURE__ */ jsx(
+        Form,
+        {
+          ref,
+          resolver: resolver == null ? void 0 : resolver(props.schema),
+          fieldResolver: fieldResolver == null ? void 0 : fieldResolver(schema),
+          ...rest
+        }
+      ) });
+    }
+  );
+  DefaultForm.displayName = "Form";
+  DefaultForm.id = "Form";
+  return DefaultForm;
+}
+function createStepForm({ fields, resolver, fieldResolver } = {}) {
+  const StepForm2 = forwardRef((props, ref) => {
+    const { children, steps, ...rest } = props;
+    const stepper = useStepForm({
+      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(Form2, { ref, ...rest, ...getFormProps(), children: runIfFn(children, {
+      ...stepper,
+      Field,
+      FormStep,
+      DisplayIf,
+      ArrayField,
+      ObjectField
+    }) }) }) }) });
+  });
+  StepForm2.displayName = `Step${Form2.displayName || Form2.name}`;
+  return StepForm2;
+}
+var Form2 = createForm();
+var StepForm = createStepForm();
 
-export { ArrayField, ArrayFieldAddButton, ArrayFieldContainer, ArrayFieldProvider, ArrayFieldRemoveButton, ArrayFieldRow, ArrayFieldRowContainer, ArrayFieldRowFields, ArrayFieldRowProvider, ArrayFieldRows, AutoForm, BaseField, CheckboxField, DisplayField, DisplayIf, Field, Fields, Form, FormLayout, FormLegend, FormStep, FormStepper, FormValue, InputField, InputRightButton, NativeSelect, NativeSelectField, NextButton, NumberInputField2 as NumberInputField, ObjectField, PasswordInput, PasswordInputField, PinField, PrevButton, RadioField, Select, SelectField, StepForm, StepFormProvider, SubmitButton, SwitchField, TextareaField, WatchField, createForm, objectFieldResolver, registerFieldType, useArrayField, useArrayFieldAddButton, useArrayFieldContext, useArrayFieldRemoveButton, useArrayFieldRow, useArrayFieldRowContext, useFormStep, useStepForm, useStepFormContext, withControlledInput, withUncontrolledInput };
+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
 //# sourceMappingURL=index.mjs.map