@saas-ui/forms 2.0.0-next.19 → 2.0.0-next.20

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @saas-ui/forms
 
+## 2.0.0-next.20
+
+### Minor Changes
+
+- a9ca90dd: Updated to Chakra UI 2.6.x
+
+### Patch Changes
+
+- Updated dependencies [2b639656]
+  - @saas-ui/core@2.0.0-next.17
+
 ## 2.0.0-next.19
 
 ### Patch Changes

package/dist/index.d.ts

@@ -4,7 +4,7 @@ import * as react_hook_form from 'react-hook-form';
 import { FieldValues, FieldPath, RegisterOptions, UseFormReturn as UseFormReturn$1, UseFieldArrayReturn, UseFormProps, WatchObserver, SubmitHandler, SubmitErrorHandler, ResolverOptions, ResolverResult, FormProviderProps as FormProviderProps$1 } from 'react-hook-form';
 export { BatchFieldArrayUpdate, ChangeHandler, Control, Controller, ControllerFieldState, ControllerProps, ControllerRenderProps, CriteriaMode, CustomElement, DeepMap, DeepPartial, DeepPartialSkipArrayKey, DefaultValues, DelayCallback, EmptyObject, ErrorOption, EventType, FieldArray, FieldArrayMethodProps, FieldArrayWithId, Field as FieldDef, FieldElement, FieldError, FieldErrors, FieldName, FieldNamesMarkedBoolean, FieldRefs, FieldValue, FieldValues, FormProviderProps, FormState, FormStateProxy, FormStateSubjectRef, GetIsDirty, InternalFieldErrors, InternalFieldName, InternalNameSet, IsAny, IsFlatObject, KeepStateOptions, LiteralUnion, Message, Mode, MultipleFieldErrors, Names, NativeFieldValue, NestedValue, NonUndefined, Noop, Primitive, ReadFormState, Ref, RefCallBack, RegisterOptions, Resolver, ResolverError, ResolverOptions, ResolverResult, ResolverSuccess, SetFieldValue, SetValueConfig, Subjects, SubmitErrorHandler, SubmitHandler, TriggerConfig, UnpackNestedValue, UseControllerProps, UseControllerReturn, UseFieldArrayProps, UseFieldArrayReturn, UseFormClearErrors, UseFormGetValues, UseFormHandleSubmit, UseFormProps, UseFormRegister, UseFormRegisterReturn, UseFormReset, UseFormResetField, UseFormReturn, UseFormSetError, UseFormSetFocus, UseFormSetValue, UseFormStateProps, UseFormStateReturn, UseFormTrigger, UseFormUnregister, UseFormWatch, UseWatchProps, Validate, ValidateResult, ValidationMode, ValidationRule, ValidationValue, ValidationValueMessage, WatchInternal, WatchObserver, appendErrors, useController, useFieldArray, useForm, useFormState, useWatch } from 'react-hook-form';
 import { MaybeRenderProp } from '@chakra-ui/react-utils';
-import { UseStepperReturn, UseStepperProps, StepperStepsProps } from '@saas-ui/core';
+import { StepsProps, StepsItemProps, UseStepperReturn, UseStepperProps } from '@saas-ui/core';
 import { NumberInputProps as NumberInputProps$1, InputProps, RadioProps, RadioGroupProps, SystemProps, StackDirection, MenuProps, ButtonProps, MenuListProps, MenuItemOptionProps, SelectProps as SelectProps$1, TextareaProps, SwitchProps, CheckboxProps, UsePinInputProps, FormControlProps, SimpleGridProps, ResponsiveValue, FormLabelProps, HTMLChakraProps, ThemingProps } from '@chakra-ui/react';
 import { FocusableElement } from '@chakra-ui/utils';
 import * as _chakra_ui_system_dist_system_types from '@chakra-ui/system/dist/system.types';
@@ -571,6 +571,70 @@ type FormComponent = (<TSchema = unknown, TFieldValues extends FieldValues = Fie
 };
 type GetResolver = <TFieldValues extends FieldValues, TContext extends object>(schema: unknown) => (values: TFieldValues, context: TContext | undefined, options: ResolverOptions<TFieldValues>) => Promise<ResolverResult<TFieldValues>>;
 
+type StepsOptions<TSchema, TName extends string = string> = {
+    /**
+     * The step name
+     */
+    name: TName;
+    /**
+     * Schema
+     */
+    schema?: TSchema;
+}[];
+interface StepFormProps<TSteps extends StepsOptions<any> = StepsOptions<any>, TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TFieldTypes = FieldProps<TFieldValues>> extends UseStepFormProps<TSteps, TFieldValues, TContext, TFieldTypes> {
+}
+interface FormStepOptions<TName extends string = string> {
+    /**
+     * The step name
+     */
+    name: TName;
+    /**
+     * Schema
+     */
+    schema?: any;
+    /**
+     * Hook Form Resolver
+     */
+    resolver?: any;
+}
+interface FormStepperProps extends StepsProps, ThemingProps<'Stepper'> {
+    render?: StepsItemProps['render'];
+}
+/**
+ * Renders a stepper that displays progress above the form.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/step-form
+ */
+declare const FormStepper: React$1.FC<FormStepperProps>;
+interface FormStepProps<TName extends string = string> extends FormStepOptions<TName>, Omit<HTMLChakraProps<'div'>, 'onSubmit'> {
+    onSubmit?: FormStepSubmitHandler;
+}
+/**
+ * The form step containing fields for a specific step.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/step-form
+ */
+declare const FormStep: {
+    <TName extends string = string>(props: FormStepProps<TName>): JSX.Element | null;
+    displayName: string;
+};
+/**
+ * A button that this opens the previous step when clicked. Disabled on the first step.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/step-form
+ */
+declare const PrevButton: React$1.FC<ButtonProps>;
+interface NextButtonProps extends Omit<ButtonProps, 'children'> {
+    submitLabel?: string;
+    label?: string;
+}
+/**
+ * A button that submits the active step.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/step-form
+ */
+declare const NextButton: React$1.FC<NextButtonProps>;
+
 interface StepState {
     name: string;
     schema?: any;
@@ -587,14 +651,21 @@ interface StepFormContext extends UseStepperReturn {
 declare const StepFormProvider: React$1.Provider<StepFormContext>;
 declare const useStepFormContext: () => StepFormContext;
 
-interface StepFormRenderContext<TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TFieldTypes = FieldProps<TFieldValues>> extends UseStepFormReturn<TFieldValues> {
+type StepName<T extends {
+    [k: number]: {
+        readonly name: string;
+    };
+}> = T[number]['name'];
+interface StepFormRenderContext<TSteps extends StepsOptions<any> = StepsOptions<any>, TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TFieldTypes = FieldProps<TFieldValues>> extends UseStepFormReturn<TFieldValues> {
     Field: React$1.FC<TFieldTypes & React$1.RefAttributes<FocusableElement>>;
+    FormStep: React$1.FC<FormStepProps<StepName<TSteps>>>;
     DisplayIf: React$1.FC<DisplayIfProps<TFieldValues>>;
     ArrayField: React$1.FC<ArrayFieldProps<TFieldValues> & React$1.RefAttributes<UseArrayFieldReturn>>;
     ObjectField: React$1.FC<ObjectFieldProps<TFieldValues>>;
 }
-interface UseStepFormProps<TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TFieldTypes = FieldProps<TFieldValues>> extends Omit<UseStepperProps, 'onChange'>, Omit<FormProps<any, TFieldValues, TContext, TFieldTypes>, 'children'> {
-    children: MaybeRenderProp<StepFormRenderContext<TFieldValues, TContext, TFieldTypes>>;
+interface UseStepFormProps<TSteps extends StepsOptions<any> = StepsOptions<any>, TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TFieldTypes = FieldProps<TFieldValues>> extends Omit<UseStepperProps, 'onChange'>, Omit<FormProps<any, TFieldValues, TContext, TFieldTypes>, 'children'> {
+    steps?: TSteps;
+    children: MaybeRenderProp<StepFormRenderContext<TSteps, TFieldValues, TContext, TFieldTypes>>;
 }
 interface UseStepFormReturn<TFieldValues extends FieldValues = FieldValues> extends UseStepperReturn {
     getFormProps(): {
@@ -605,7 +676,7 @@ interface UseStepFormReturn<TFieldValues extends FieldValues = FieldValues> exte
     updateStep(step: any): void;
     steps: Record<string, any>;
 }
-declare function useStepForm<TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TFieldTypes = FieldProps<TFieldValues>>(props: UseStepFormProps<TFieldValues, TContext, TFieldTypes>): UseStepFormReturn<TFieldValues>;
+declare function useStepForm<TSteps extends StepsOptions<any> = StepsOptions<any>, TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TFieldTypes = FieldProps<TFieldValues>>(props: UseStepFormProps<TSteps, TFieldValues, TContext, TFieldTypes>): UseStepFormReturn<TFieldValues>;
 interface UseFormStepProps {
     name: string;
     schema?: any;
@@ -614,7 +685,7 @@ interface UseFormStepProps {
 }
 declare function useFormStep(props: UseFormStepProps): StepState;
 
-interface CreateFormProps<FieldDefs> {
+interface CreateFormProps$1<FieldDefs> {
     resolver?: GetResolver;
     fieldResolver?: GetFieldResolver;
     fields?: FieldDefs extends Record<string, React__default.FC<any>> ? FieldDefs : never;
@@ -625,7 +696,7 @@ type FormType<FieldDefs, ExtraProps = object, ExtraOverrides = object> = (<TSche
     displayName?: string;
     id?: string;
 };
-declare function createForm<FieldDefs>({ resolver, fieldResolver, fields, }?: CreateFormProps<FieldDefs>): FormType<FieldDefs, object, object>;
+declare function createForm<FieldDefs>({ resolver, fieldResolver, fields, }?: CreateFormProps$1<FieldDefs>): FormType<FieldDefs, object, object>;
 
 interface DisplayFieldProps extends FormControlProps, Omit<FieldProps, 'type' | 'label'> {
 }
@@ -674,56 +745,6 @@ declare const FieldsProvider: React__default.FC<{
 }>;
 declare const useField: (type: string) => React__default.FC<any>;
 
-interface StepFormProps<TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TFieldTypes = FieldProps<TFieldValues>> extends UseStepFormProps<TFieldValues, TContext, TFieldTypes> {
-}
-interface FormStepOptions {
-    /**
-     * The step name
-     */
-    name: string;
-    /**
-     * Schema
-     */
-    schema?: any;
-    /**
-     * Hook Form Resolver
-     */
-    resolver?: any;
-}
-interface FormStepperProps extends StepperStepsProps, ThemingProps<'Stepper'> {
-}
-/**
- * Renders a stepper that displays progress above the form.
- *
- * @see Docs https://saas-ui.dev/docs/components/forms/step-form
- */
-declare const FormStepper: React$1.FC<FormStepperProps>;
-interface FormStepProps extends FormStepOptions, Omit<HTMLChakraProps<'div'>, 'onSubmit'> {
-    onSubmit?: FormStepSubmitHandler;
-}
-/**
- * The form step containing fields for a specific step.
- *
- * @see Docs https://saas-ui.dev/docs/components/forms/step-form
- */
-declare const FormStep: React$1.FC<FormStepProps>;
-/**
- * A button that this opens the previous step when clicked. Disabled on the first step.
- *
- * @see Docs https://saas-ui.dev/docs/components/forms/step-form
- */
-declare const PrevButton: React$1.FC<ButtonProps>;
-interface NextButtonProps extends Omit<ButtonProps, 'children'> {
-    submitLabel?: string;
-    label?: string;
-}
-/**
- * A button that submits the active step.
- *
- * @see Docs https://saas-ui.dev/docs/components/forms/step-form
- */
-declare const NextButton: React$1.FC<NextButtonProps>;
-
 type FormProviderProps<TFieldValues extends FieldValues = FieldValues, TContext = any, TSchema = any> = FormProviderProps$1<TFieldValues, TContext> & {
     fieldResolver?: FieldResolver;
     schema?: TSchema;
@@ -789,17 +810,36 @@ interface CreateFieldOptions {
  */
 declare const createField: <TProps extends object>(component: React$1.FC<TProps>, options?: CreateFieldOptions) => React$1.FC<TProps & BaseFieldProps<react_hook_form.FieldValues, string>>;
 
+type StepFormType<FieldDefs, ExtraProps = object, ExtraOverrides = object> = (<TSteps extends StepsOptions<any> = StepsOptions<any>, TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TFieldTypes = FieldProps<TFieldValues>>(props: UseStepFormProps<TSteps, TFieldValues, TContext, TFieldTypes> & {
+    ref?: React__default.ForwardedRef<HTMLFormElement>;
+}) => React__default.ReactElement) & {
+    displayName?: string;
+    id?: string;
+};
+interface CreateFormProps<FieldDefs> {
+    resolver?: GetResolver;
+    fieldResolver?: GetFieldResolver;
+    fields?: FieldDefs extends Record<string, React__default.FC<any>> ? FieldDefs : never;
+}
+declare function createStepForm<FieldDefs = any, ExtraProps = object, ExtraOverrides = object>({ fields, resolver, fieldResolver }?: CreateFormProps<FieldDefs>): StepFormType<FieldDefs, ExtraProps, ExtraOverrides>;
+
+/**
+ * Form component.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/form
+ */
 declare const Form: FormType<unknown, object, object>;
+
 /**
- * The wrapper component provides context, state, and focus management.
+ * Multi-step form component.
  *
  * @see Docs https://saas-ui.dev/docs/components/forms/step-form
  */
-declare const StepForm: (<TFieldValues extends react_hook_form.FieldValues = react_hook_form.FieldValues, TContext extends object = object, TFieldTypes = FieldProps<TFieldValues>>(props: UseStepFormProps<TFieldValues, TContext, TFieldTypes> & {
+declare const StepForm: (<TSteps extends StepsOptions<any> = StepsOptions<any>, TFieldValues extends react_hook_form.FieldValues = react_hook_form.FieldValues, TContext extends object = object, TFieldTypes = FieldProps<TFieldValues>>(props: UseStepFormProps<TSteps, TFieldValues, TContext, TFieldTypes> & {
     ref?: React$1.ForwardedRef<HTMLFormElement> | undefined;
 }) => React$1.ReactElement<any, string | React$1.JSXElementConstructor<any>>) & {
     displayName?: string | undefined;
     id?: string | undefined;
 };
 
-export { ArrayField, ArrayFieldAddButton, ArrayFieldButtonProps, ArrayFieldContainer, ArrayFieldContainerProps, ArrayFieldOptions, ArrayFieldProps, ArrayFieldProvider, ArrayFieldRemoveButton, ArrayFieldRow, ArrayFieldRowContainer, ArrayFieldRowFields, ArrayFieldRowFieldsProps, ArrayFieldRowProvider, ArrayFieldRows, ArrayFieldRowsProps, AutoFields, BaseField, BaseFieldProps, Form$1 as BaseForm, CheckboxField, CreateFieldOptions, CreateFormProps, DefaultFieldOverrides, DefaultFields, DisplayField, DisplayFieldProps, DisplayIf, DisplayIfProps, Field, FieldOptions, FieldProps, FieldResolver, FieldRules, FieldsProps, FieldsProvider, Form, FormComponent, FormLayout, FormLayoutProps, FormLegend, FormProps, FormProvider, FormRenderContext, FormStep, FormStepOptions, FormStepProps, FormStepSubmitHandler, FormStepper, FormStepperProps, FormType, FormValue, GetFieldResolver, InputField, InputFieldProps, InputRightButton, InputRightButtonProps, NativeSelect, NativeSelectField, NativeSelectProps, NextButton, NextButtonProps, NumberInputField, NumberInputFieldProps, ObjectField, ObjectFieldProps, ObjectSchema, Option, PasswordInput, PasswordInputField, PasswordInputProps, PinField, PinFieldProps, PrevButton, RadioField, RadioInput, RadioInputProps, RadioOption, RadioOptions, Select, SelectButton, SelectButtonProps, SelectField, SelectList, SelectListProps, SelectOption, SelectProps, StepForm, StepFormContext, StepFormProps, StepFormProvider, StepState, SubmitButton, SubmitButtonProps, SwitchField, TextareaField, UseArrayFieldReturn, UseArrayFieldRowProps, UseArrayFieldRowReturn, UseFormStepProps, UseStepFormProps, UseStepFormReturn, WatchField, WatchFieldProps, WithFields, createField, createForm, defaultFieldTypes, objectFieldResolver, useArrayField, useArrayFieldAddButton, useArrayFieldContext, useArrayFieldRemoveButton, useArrayFieldRow, useArrayFieldRowContext, useField, useFormContext, useFormStep, useStepForm, useStepFormContext };
+export { ArrayField, ArrayFieldAddButton, ArrayFieldButtonProps, ArrayFieldContainer, ArrayFieldContainerProps, ArrayFieldOptions, ArrayFieldProps, ArrayFieldProvider, ArrayFieldRemoveButton, ArrayFieldRow, ArrayFieldRowContainer, ArrayFieldRowFields, ArrayFieldRowFieldsProps, ArrayFieldRowProvider, ArrayFieldRows, ArrayFieldRowsProps, AutoFields, BaseField, BaseFieldProps, Form$1 as BaseForm, CheckboxField, CreateFieldOptions, CreateFormProps$1 as CreateFormProps, DefaultFieldOverrides, DefaultFields, DisplayField, DisplayFieldProps, DisplayIf, DisplayIfProps, Field, FieldOptions, FieldProps, FieldResolver, FieldRules, FieldsProps, FieldsProvider, Form, FormComponent, FormLayout, FormLayoutProps, FormLegend, FormProps, FormProvider, FormRenderContext, FormStep, FormStepOptions, FormStepProps, FormStepSubmitHandler, FormStepper, FormStepperProps, FormType, FormValue, GetFieldResolver, InputField, InputFieldProps, InputRightButton, InputRightButtonProps, NativeSelect, NativeSelectField, NativeSelectProps, NextButton, NextButtonProps, NumberInputField, NumberInputFieldProps, ObjectField, ObjectFieldProps, ObjectSchema, Option, PasswordInput, PasswordInputField, PasswordInputProps, PinField, PinFieldProps, PrevButton, RadioField, RadioInput, RadioInputProps, RadioOption, RadioOptions, Select, SelectButton, SelectButtonProps, SelectField, SelectList, SelectListProps, SelectOption, SelectProps, StepForm, StepFormContext, StepFormProps, StepFormProvider, StepState, StepsOptions, SubmitButton, SubmitButtonProps, SwitchField, TextareaField, UseArrayFieldReturn, UseArrayFieldRowProps, UseArrayFieldRowReturn, UseFormStepProps, UseStepFormProps, UseStepFormReturn, WatchField, WatchFieldProps, WithFields, createField, createForm, createStepForm, defaultFieldTypes, objectFieldResolver, useArrayField, useArrayFieldAddButton, useArrayFieldContext, useArrayFieldRemoveButton, useArrayFieldRow, useArrayFieldRowContext, useField, useFormContext, useFormStep, useStepForm, useStepFormContext };

package/dist/index.js

@@ -914,8 +914,9 @@ var [StepFormProvider, useStepFormContext] = reactUtils.createContext({
   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 = core.useStepper(rest);
+  const [options, setOptions] = React12__namespace.useState(stepsOptions);
   const { activeStep, isLastStep, nextStep } = stepper;
   const [steps, updateSteps] = React12__namespace.useState({});
   const onSubmitStep = React12__namespace.useCallback(
@@ -944,19 +945,26 @@ function useStepForm(props) {
     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 = React12__namespace.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,
@@ -979,13 +987,23 @@ function useFormStep(props) {
 }
 var FormStepper = (props) => {
   const { activeIndex, setIndex } = core.useStepperContext();
-  const { children, orientation, variant, colorScheme, size, ...rest } = props;
+  const {
+    children,
+    orientation,
+    variant,
+    colorScheme,
+    size,
+    onChange: onChangeProp,
+    render,
+    ...rest
+  } = props;
   const elements = React12__namespace.Children.map(children, (child) => {
     if (React12__namespace.isValidElement(child) && (child == null ? void 0 : child.type) === FormStep) {
       const { isCompleted } = useFormStep(child.props);
       return /* @__PURE__ */ jsxRuntime.jsx(
-        core.StepperStep,
+        core.StepsItem,
         {
+          render,
           name: child.props.name,
           title: child.props.title,
           isCompleted,
@@ -998,9 +1016,10 @@ var FormStepper = (props) => {
   });
   const onChange = React12__namespace.useCallback((i) => {
     setIndex(i);
+    onChangeProp == null ? void 0 : onChangeProp(i);
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    core.StepperContainer,
+    core.Steps,
     {
       orientation,
       step: activeIndex,
@@ -1008,13 +1027,13 @@ var FormStepper = (props) => {
       colorScheme,
       size,
       onChange,
-      children: /* @__PURE__ */ jsxRuntime.jsx(core.StepperSteps, { mb: "4", ...props, children: elements })
+      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__ */ jsxRuntime.jsx(react.chakra.div, { ...rest, className: utils.cx("sui-form__step", className), children }) : null;
 };
@@ -1191,25 +1210,30 @@ function createForm({
   DefaultForm.id = "Form";
   return DefaultForm;
 }
-function createStepForm(Form4) {
+function createStepForm({ fields, resolver, fieldResolver } = {}) {
   const StepForm2 = react.forwardRef((props, ref) => {
-    const { children, ...rest } = props;
-    const stepper = useStepForm(props);
+    const { children, steps, ...rest } = props;
+    const stepper = useStepForm({
+      resolver,
+      fieldResolver,
+      ...props
+    });
     const { getFormProps, ...ctx } = stepper;
     const context = React12.useMemo(() => ctx, [ctx]);
-    return /* @__PURE__ */ jsxRuntime.jsx(core.StepperProvider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsx(StepFormProvider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsx(Form4, { ref, ...rest, ...getFormProps(), children: utils.runIfFn(children, {
+    return /* @__PURE__ */ jsxRuntime.jsx(core.StepperProvider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsx(StepFormProvider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsx(FieldsProvider, { value: fields || {}, children: /* @__PURE__ */ jsxRuntime.jsx(Form2, { ref, ...rest, ...getFormProps(), children: utils.runIfFn(children, {
       ...stepper,
       Field,
+      FormStep,
       DisplayIf,
       ArrayField,
       ObjectField
-    }) }) }) });
+    }) }) }) }) });
   });
-  StepForm2.displayName = `Step${Form4.displayName || Form4.name}`;
+  StepForm2.displayName = `Step${Form2.displayName || Form2.name}`;
   return StepForm2;
 }
-var Form3 = createForm();
-var StepForm = createStepForm(Form3);
+var Form2 = createForm();
+var StepForm = createStepForm();
 
 Object.defineProperty(exports, 'Controller', {
   enumerable: true,
@@ -1257,7 +1281,7 @@ exports.DisplayField = DisplayField;
 exports.DisplayIf = DisplayIf;
 exports.Field = Field;
 exports.FieldsProvider = FieldsProvider;
-exports.Form = Form3;
+exports.Form = Form2;
 exports.FormLayout = FormLayout;
 exports.FormLegend = FormLegend;
 exports.FormProvider = FormProvider;
@@ -1290,6 +1314,7 @@ exports.TextareaField = TextareaField;
 exports.WatchField = WatchField;
 exports.createField = createField;
 exports.createForm = createForm;
+exports.createStepForm = createStepForm;
 exports.defaultFieldTypes = defaultFieldTypes;
 exports.objectFieldResolver = objectFieldResolver;
 exports.useArrayField = useArrayField;