@saas-ui/forms 1.5.3 → 2.0.0-next.1

package/dist/index.js

@@ -1,2 +1,1251 @@
-var e=require("react"),r=require("@chakra-ui/utils"),t=require("react-hook-form"),n=require("@chakra-ui/react"),a=require("@saas-ui/number-input"),l=require("@saas-ui/password-input"),o=require("@saas-ui/radio"),i=require("@saas-ui/select"),u=require("@chakra-ui/system"),s=require("@chakra-ui/icons"),d=require("@saas-ui/button"),c=require("@chakra-ui/react-utils"),m=require("@saas-ui/stepper");function p(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach(function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}}),r.default=e,r}var f=/*#__PURE__*/p(e);function v(){return v=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},v.apply(this,arguments)}function h(e,r){if(null==e)return{};var t,n,a={},l=Object.keys(e);for(n=0;n<l.length;n++)r.indexOf(t=l[n])>=0||(a[t]=e[t]);return a}var x=["name","label","placeholder"],b=function(e){var r=e.name,t=e.label,a=h(e,x);/*#__PURE__*/return f.createElement(n.FormControl,a,t?/*#__PURE__*/f.createElement(n.FormLabel,{htmlFor:r},t):null,/*#__PURE__*/f.createElement(n.Text,{fontSize:"md"},/*#__PURE__*/f.createElement(F,{name:r})))};r.__DEV__&&(b.displayName="DisplayField");var F=function(e){var r=e.name;return(0,t.useFormContext().getValues)(r)||null};r.__DEV__&&(F.displayName="FormValue");var y=["name","label","help","hideLabel","children"],E=["id","name","label","help","isDisabled","isInvalid","isReadOnly","isRequired","rules"],_=["name","rules"],C=["ref"],g=["name","rules"],S=["ref"],N=["type","leftAddon","rightAddon","size"],R=["type","value"],V=["label","type"],A=["pinLength","pinType","spacing"],w={},D=function(e){var r=e.name,a=e.label,l=e.help,o=e.hideLabel,i=e.children,u=h(e,y),s=function(e,r){return t.get(r.errors,e)}(r,t.useFormContext().formState);/*#__PURE__*/return f.createElement(n.FormControl,v({},u,{isInvalid:!!s}),a&&!o?/*#__PURE__*/f.createElement(n.FormLabel,null,a):null,/*#__PURE__*/f.createElement(n.Box,null,i,!l||null!=s&&s.message?null:/*#__PURE__*/f.createElement(n.FormHelperText,null,l),(null==s?void 0:s.message)&&/*#__PURE__*/f.createElement(n.FormErrorMessage,null,null==s?void 0:s.message)))};r.__DEV__&&(D.displayName="BaseField");var k=f.forwardRef(function(e,r){var t=e.type;/*#__PURE__*/return f.createElement(w[void 0===t?"text":t]||w.text,v({ref:r},e))}),I=function(e){return n.forwardRef(function(a,l){var o=a.name,i=a.rules,u=h(a,_),s=t.useFormContext();/*#__PURE__*/return f.createElement(t.Controller,{name:o,control:s.control,rules:i,render:function(t){var a=t.field,o=a.ref,i=h(a,C);/*#__PURE__*/return f.createElement(e,v({},i,u,{onChange:r.callAllHandlers(u.onChange,i.onChange),onBlur:r.callAllHandlers(u.onBlur,i.onBlur),ref:n.useMergeRefs(l,o)}))}})})},P=function(e){return n.forwardRef(function(a,l){var o=a.name,i=a.rules,u=h(a,g),s=(0,t.useFormContext().register)(o,i),d=s.ref,c=h(s,S);/*#__PURE__*/return f.createElement(e,v({},c,u,{onChange:r.callAllHandlers(u.onChange,c.onChange),onBlur:r.callAllHandlers(u.onBlur,c.onBlur),ref:n.useMergeRefs(l,d)}))})},L=function(e,r,t){var a=function(e,r){var t=r.displayName,a=r.hideLabel,l=r.BaseField,o=n.forwardRef(function(r,t){var n=r.id,o=r.name,i=r.label,u=r.help,s=r.isDisabled,d=r.isInvalid,c=r.isReadOnly,m=r.isRequired,p=r.rules,x=h(r,E),b=v({required:m},p);/*#__PURE__*/return f.createElement(l,{id:n,name:o,label:i,help:u,hideLabel:a,isDisabled:s,isInvalid:d,isReadOnly:c,isRequired:m},/*#__PURE__*/f.createElement(e,v({ref:t,id:n,name:o,label:a?i:void 0,rules:b},x)))});return o.displayName=t,o}(null!=t&&t.isControlled?I(r):P(r),{displayName:e.split("-").map(function(e){return e.charAt(0).toUpperCase()+e.slice(1)}).join("")+"Field",hideLabel:null==t?void 0:t.hideLabel,BaseField:(null==t?void 0:t.BaseField)||D});return w[e]=a,a},B=L("text",n.forwardRef(function(e,r){var t=e.type,a=void 0===t?"text":t,l=e.leftAddon,o=e.rightAddon,i=e.size,u=h(e,N),s=/*#__PURE__*/f.createElement(n.Input,v({type:a,size:i},u,{ref:r}));return l||o?/*#__PURE__*/f.createElement(n.InputGroup,{size:i},l,s,o):s})),O=L("number",a.NumberInput,{isControlled:!0}),j=L("password",n.forwardRef(function(e,r){/*#__PURE__*/return f.createElement(l.PasswordInput,v({ref:r},e))})),q=L("textarea",n.Textarea),M=L("switch",n.forwardRef(function(e,r){var t=e.value,a=h(e,R);/*#__PURE__*/return f.createElement(n.Switch,v({isChecked:!!t},a,{ref:r}))}),{isControlled:!0}),U=L("select",i.Select,{isControlled:!0}),H=L("checkbox",n.forwardRef(function(e,r){var t=e.label,a=h(e,V);/*#__PURE__*/return f.createElement(n.Checkbox,v({ref:r},a),t)}),{hideLabel:!0}),z=L("radio",o.RadioInput,{isControlled:!0}),T=L("native-select",i.NativeSelect,{isControlled:!0}),W=L("pin",n.forwardRef(function(e,r){for(var t=e.pinLength,a=void 0===t?4:t,l=e.pinType,o=e.spacing,i=h(e,A),u=[],s=0;s<a;s++)u.push(/*#__PURE__*/f.createElement(n.PinInputField,{key:s,ref:r}));/*#__PURE__*/return f.createElement(n.HStack,{spacing:o},/*#__PURE__*/f.createElement(n.PinInput,v({},i,{type:l}),u))}),{isControlled:!0}),G=["items","label","title"],J=function(e){return e&&Object.entries(e).map(function(e){var r=e[0],t=e[1],n=t.label,a=t.title;return v({},h(t,G),{name:r,label:n||a})})},K=function(e){return{getFields:function(){return J(e)},getNestedFields:function(t){var n,a=r.get(e,t);return a?"object"===(null==(n=a.items)?void 0:n.type)?J(a.items.properties):"object"===a.type?J(a.properties):[a.items]:[]}}},Q=["mode","resolver","reValidateMode","shouldFocusError","shouldUnregister","shouldUseNativeValidation","criteriaMode","delayError","schema","defaultValues","onChange","onSubmit","onError","formRef","children"],X=n.forwardRef(function(e,a){var l=e.mode,o=void 0===l?"all":l,i=e.resolver,u=e.reValidateMode,s=e.shouldFocusError,d=e.shouldUnregister,c=e.shouldUseNativeValidation,m=e.criteriaMode,p=e.delayError,x=e.schema,b=e.defaultValues,F=e.onChange,y=e.onSubmit,E=e.onError,_=e.formRef,C=e.children,g=h(e,Q),S={mode:o,resolver:i,defaultValues:b,reValidateMode:u,shouldFocusError:s,shouldUnregister:d,shouldUseNativeValidation:c,criteriaMode:m,delayError:p};x&&!i&&(S.resolver=null==X.getResolver?void 0:X.getResolver(x));var N=t.useForm(S),R=N.handleSubmit;return f.useImperativeHandle(a,function(){return N},[a,N]),f.useEffect(function(){var e;return F&&(e=N.watch(F)),function(){var r;return null==(r=e)?void 0:r.unsubscribe()}},[N,F]),/*#__PURE__*/f.createElement(t.FormProvider,N,/*#__PURE__*/f.createElement(n.chakra.form,v({ref:_,onSubmit:R(y,E)},g,{className:r.cx("saas-form",e.className)}),r.runIfFn(C,N)))});X.getFieldResolver=K,r.__DEV__&&(X.displayName="Form");var Y=["children"],Z=function(e){/*#__PURE__*/return f.createElement(n.chakra.div,null,e.children)};r.__DEV__&&(Z.displayName="FormLayoutItem");var $=function(e){var t,a,l,o=e.children,i=h(e,Y),u=v({},null!=(t=null==(a=n.useTheme().components)||null==(l=a.FormLayout)?void 0:l.defaultProps)?t:{spacing:4},i);/*#__PURE__*/return f.createElement(n.SimpleGrid,v({},u,{className:r.cx("saas-form__layout",i.className)}),f.Children.map(o,function(e){return f.isValidElement(e)?/*#__PURE__*/f.createElement(Z,null,e):e}))};r.__DEV__&&($.displayName="FormLayout");var ee=function(e,r){return f.Children.map(r,function(r){return f.isValidElement(r)&&r.props.name?f.cloneElement(r,v({},r.props,{name:e+"."+r.props.name})):r})},re=c.createContext({name:"ArrayFieldContext"}),te=re[0],ne=re[1],ae=c.createContext({name:"ArrayFieldRowContext"}),le=ae[0],oe=ae[1],ie=function(e){var r=e.name,n=e.defaultValue,a=void 0===n?{}:n,l=e.keyName,o=e.min,i=e.max,u=t.useFormContext();return v({},t.useFieldArray({control:u.control,name:r,keyName:l}),{name:r,defaultValue:a,min:o,max:i})},ue=function(e){var r=e.index,n=t.useFormContext().clearErrors,a=ne(),l=a.name,o=a.remove,i=a.fields;return f.useEffect(function(){n(l)},[]),{index:r,isFirst:0===r,isLast:r===i.length-1,name:l+"."+r,remove:f.useCallback(function(){n(l),o(r)},[r])}},se=function(){var e=oe(),r=e.isFirst,t=e.remove,n=ne(),a=n.min;return{onClick:function(){return t()},isDisabled:r&&!!(a&&n.fields.length<=a)}},de=function(){var e=ne(),r=e.append,t=e.defaultValue,n=e.max;return{onClick:function(){return r(t,{shouldFocus:!1})},isDisabled:!!(n&&e.fields.length>=n)}},ce=["children","index"],me=["children"],pe=["children"],fe=["name","defaultValue","keyName","min","max","children"],ve=function(e){var r=e.children,t=e.index,n=h(e,ce);/*#__PURE__*/return f.createElement(xe,{index:t},/*#__PURE__*/f.createElement(he,n,r),/*#__PURE__*/f.createElement(be,null))};r.__DEV__&&(ve.displayName="ArrayFieldRow");var he=function(e){var r=e.children,t=h(e,me),n=oe().name;/*#__PURE__*/return f.createElement($,v({flex:"1",mr:"2"},t),ee(n,r))};r.__DEV__&&(he.displayName="ArrayFieldRowFields");var xe=function(e){var r=e.children,t=ue({index:e.index});/*#__PURE__*/return f.createElement(le,{value:t},/*#__PURE__*/f.createElement(u.chakra.div,{__css:{display:"flex",flexDirection:"row",alignItems:"flex-end",width:"100%",mb:4}},r))};r.__DEV__&&(xe.displayName="ArrayFieldRowContainer");var be=function(e){/*#__PURE__*/return f.createElement(d.IconButton,v({icon:/*#__PURE__*/f.createElement(s.MinusIcon,null),"aria-label":"Remove row"},se(),e))};r.__DEV__&&(be.displayName="ArrayFieldRemoveButton");var Fe=function(e){/*#__PURE__*/return f.createElement(d.IconButton,v({icon:/*#__PURE__*/f.createElement(s.AddIcon,null),"aria-label":"Add row",float:"right"},de(),e))};r.__DEV__&&(Fe.displayName="ArrayFieldAddButton");var ye=u.forwardRef(function(e,r){var t=e.children,n=h(e,pe);/*#__PURE__*/return f.createElement(_e,v({ref:r},n),/*#__PURE__*/f.createElement(Ee,null,function(e){/*#__PURE__*/return f.createElement(f.Fragment,null,e.map(function(e,r){/*#__PURE__*/return f.createElement(ve,{key:e.id,index:r},t)}))}),/*#__PURE__*/f.createElement(Fe,null))});r.__DEV__&&(ye.displayName="ArrayField");var Ee=function(e){return(0,e.children)(ne().fields)};r.__DEV__&&(Ee.displayName="ArrayFieldRows");var _e=f.forwardRef(function(e,r){var t=e.name,n=e.defaultValue,a=e.keyName,l=e.min,o=e.max,i=e.children,u=h(e,fe),s=ie({name:t,defaultValue:n,keyName:a,min:l,max:o});return f.useImperativeHandle(r,function(){return s},[r,s]),/*#__PURE__*/f.createElement(te,{value:s},/*#__PURE__*/f.createElement(D,v({name:t},u),i))});r.__DEV__&&(_e.displayName="ArrayFieldContainer");var Ce=["name","label","hideLabel","children","columns","spacing"],ge=function(e){var r=n.useStyleConfig("FormLegend");/*#__PURE__*/return f.createElement(n.FormLabel,v({as:"legend",sx:r},e))},Se=function(e){var r=e.name,t=e.label,a=e.hideLabel,l=e.children,o=e.columns,i=e.spacing,u=h(e,Ce);/*#__PURE__*/return f.createElement(n.FormControl,v({name:r,as:"fieldset"},u),/*#__PURE__*/f.createElement(ge,{display:a?"none":"block"},t),/*#__PURE__*/f.createElement($,{columns:o,gridGap:i},ee(r,l)))};r.__DEV__&&(Se.displayName="ObjectField");var Ne=["name","type"],Re=["schema","fieldResolver","focusFirstField"],Ve=["name","type","defaultValue"],Ae=function(e,r){var t;return null==(t=e.getNestedFields(r))?void 0:t.map(function(e,r){var t=e.name,n=e.type,a=h(e,Ne);/*#__PURE__*/return f.createElement(k,v({key:t||r,name:t,type:n},a))})},we=function(e){var r=e.schema,n=e.fieldResolver,a=e.focusFirstField,l=h(e,Re),o=f.useMemo(function(){return n||X.getFieldResolver(r)},[r,n]),i=f.useMemo(function(){return o.getFields()},[o]),u=t.useFormContext();return f.useEffect(function(){var e;a&&null!=(e=i[0])&&e.name&&u.setFocus(i[0].name)},[r,n,a]),/*#__PURE__*/f.createElement($,l,i.map(function(e){var r=e.name,t=e.type,n=h(e,Ve);return"array"===t?/*#__PURE__*/f.createElement(ye,v({key:r,name:r},n),Ae(o,r)):"object"===t?/*#__PURE__*/f.createElement(Se,v({key:r,name:r},n),Ae(o,r)):/*#__PURE__*/f.createElement(k,v({key:r,name:r,type:t},n))}))};r.__DEV__&&(we.displayName="Fields");var De=["children","disableIfUntouched","disableIfInvalid","isDisabled","isLoading"],ke=f.forwardRef(function(e,r){var n=e.children,a=e.disableIfUntouched,l=e.disableIfInvalid,o=e.isDisabled,i=e.isLoading,u=h(e,De),s=t.useFormContext().formState;/*#__PURE__*/return f.createElement(d.Button,v({},u,{ref:r,type:"submit",isLoading:s.isSubmitting||i,isDisabled:a&&!s.isDirty||l&&!s.isValid||o}),n)});ke.defaultProps={variant:"primary",children:"Submit",disableIfUntouched:!1,disableIfInvalid:!1},r.__DEV__&&(ke.displayName="SubmitButton");var Ie=["schema","submitLabel","fieldResolver","children"],Pe=n.forwardRef(function(e,r){var t=e.schema,n=e.submitLabel,a=void 0===n?"Submit":n,l=e.fieldResolver,o=e.children,i=h(e,Ie);/*#__PURE__*/return f.createElement(X,v({},i,{schema:t,ref:r}),/*#__PURE__*/f.createElement($,null,/*#__PURE__*/f.createElement(we,{schema:t,fieldResolver:l}),a&&/*#__PURE__*/f.createElement(ke,null,a),o))});r.__DEV__&&(Pe.displayName="AutoForm");var Le=function(e){var r=e.children,n=e.condition;return(void 0===n?function(e){return!!e}:n)(t.useWatch({name:e.name,defaultValue:e.defaultValue,disabled:e.isDisabled,exact:e.isExact}),t.useFormContext())?r:null};r.__DEV__&&(Le.displayName="DisplayIf");var Be=["onChange"],Oe=c.createContext({name:"StepFormContext",errorMessage:"useStepFormContext: `context` is undefined. Seems you forgot to wrap step form components in `<StepForm />`"}),je=Oe[0],qe=Oe[1];function Me(e){var r=h(e,Be),t=m.useStepper(r),n=t.activeStep,a=t.isLastStep,l=t.nextStep,o=f.useState({}),i=o[0],u=o[1],s=f.useCallback(function(r){var o;return Promise.resolve(function(u,s){try{var d=function(){function u(e){return o?e:Promise.resolve(null==s.onSubmit?void 0:s.onSubmit(r,t)).then(function(){l()})}var s=i[n],d=function(){if(a)return Promise.resolve(null==e.onSubmit?void 0:e.onSubmit(r)).then(function(){c(v({},s,{isCompleted:!0})),l(),o=1})}();return d&&d.then?d.then(u):u(d)}()}catch(e){return}return d&&d.then?d.then(void 0,function(){}):d}())},[i,n,a]),d=f.useCallback(function(){var e=i[n];return{onSubmit:s,schema:null==e?void 0:e.schema,resolver:null==e?void 0:e.resolver}},[i,s,n]),c=f.useCallback(function(e){u(function(r){var t;return v({},r,((t={})[e.name]=e,t))})},[i]);return v({getFormProps:d,updateStep:c,steps:i},t)}function Ue(e){var r=e.name,t=e.schema,n=e.resolver,a=e.onSubmit,l=m.useStep({name:r}),o=qe(),i=o.steps,u=o.updateStep;return f.useEffect(function(){u({name:r,schema:t,resolver:n,onSubmit:a})},[r,t]),v({},l,i[r]||{name:r,schema:t})}var He=["children"],ze=["getFormProps"],Te=["children","orientation","variant","colorScheme","size"],We=["name","schema","resolver","children","className","onSubmit"],Ge=["label","submitLabel"],Je=f.forwardRef(function(e,t){var n=e.children,a=h(e,He),l=Me(e),o=l.getFormProps,i=h(l,ze),u=f.useMemo(function(){return i},[i]);/*#__PURE__*/return f.createElement(m.StepperProvider,{value:u},/*#__PURE__*/f.createElement(je,{value:u},/*#__PURE__*/f.createElement(X,v({ref:t},a,o()),r.runIfFn(n,l))))}),Ke=function(e){var t=e.name,n=e.schema,a=e.resolver,l=e.children,o=e.className,i=e.onSubmit,s=h(e,We);return Ue({name:t,schema:n,resolver:a,onSubmit:i}).isActive?/*#__PURE__*/f.createElement(u.chakra.div,v({},s,{className:r.cx("saas-form__step",o)}),l):null};r.__DEV__&&(Ke.displayName="FormStep");var Qe=function(e){var t=m.useStepperContext(),n=t.prevStep;/*#__PURE__*/return f.createElement(d.Button,v({isDisabled:t.isFirstStep||t.isCompleted,label:"Back"},e,{className:r.cx("saas-form__prev-button",e.className),onClick:r.callAllHandlers(e.onClick,n)}))};r.__DEV__&&(Qe.displayName="PrevButton");var Xe=function(e){var t=e.label,n=void 0===t?"Next":t,a=e.submitLabel,l=void 0===a?"Complete":a,o=h(e,Ge),i=m.useStepperContext(),u=i.isLastStep,s=i.isCompleted;/*#__PURE__*/return f.createElement(ke,v({},o,{isDisabled:s,className:r.cx("saas-form__next-button",e.className)}),u||s?l:n)};r.__DEV__&&(Xe.displayName="NextButton"),Object.defineProperty(exports,"Controller",{enumerable:!0,get:function(){return t.Controller}}),Object.defineProperty(exports,"FormProvider",{enumerable:!0,get:function(){return t.FormProvider}}),Object.defineProperty(exports,"appendErrors",{enumerable:!0,get:function(){return t.appendErrors}}),Object.defineProperty(exports,"useController",{enumerable:!0,get:function(){return t.useController}}),Object.defineProperty(exports,"useFieldArray",{enumerable:!0,get:function(){return t.useFieldArray}}),Object.defineProperty(exports,"useForm",{enumerable:!0,get:function(){return t.useForm}}),Object.defineProperty(exports,"useFormContext",{enumerable:!0,get:function(){return t.useFormContext}}),Object.defineProperty(exports,"useFormState",{enumerable:!0,get:function(){return t.useFormState}}),Object.defineProperty(exports,"useWatch",{enumerable:!0,get:function(){return t.useWatch}}),exports.ArrayField=ye,exports.ArrayFieldAddButton=Fe,exports.ArrayFieldContainer=_e,exports.ArrayFieldProvider=te,exports.ArrayFieldRemoveButton=be,exports.ArrayFieldRow=ve,exports.ArrayFieldRowContainer=xe,exports.ArrayFieldRowFields=he,exports.ArrayFieldRowProvider=le,exports.ArrayFieldRows=Ee,exports.AutoForm=Pe,exports.BaseField=D,exports.CheckboxField=H,exports.DisplayField=b,exports.DisplayIf=Le,exports.Field=k,exports.Fields=we,exports.Form=X,exports.FormLayout=$,exports.FormLegend=ge,exports.FormStep=Ke,exports.FormStepper=function(e){var r=m.useStepperContext(),t=r.activeIndex,n=r.setIndex,a=e.children,l=e.orientation,o=e.variant,i=e.colorScheme,u=e.size,s=h(e,Te),d=f.Children.map(a,function(e){if(f.isValidElement(e)&&(null==e?void 0:e.type)===Ke){var r=Ue(e.props);/*#__PURE__*/return f.createElement(m.StepperStep,v({name:e.props.name,title:e.props.title,isCompleted:r.isCompleted},s),e.props.children)}return e}),c=f.useCallback(function(e){n(e)},[]);/*#__PURE__*/return f.createElement(m.StepperContainer,{orientation:l,step:t,variant:o,colorScheme:i,size:u,onChange:c},/*#__PURE__*/f.createElement(m.StepperSteps,v({mb:"4"},e),d))},exports.FormValue=F,exports.InputField=B,exports.NativeSelectField=T,exports.NextButton=Xe,exports.NumberInputField=O,exports.ObjectField=Se,exports.PasswordInputField=j,exports.PinField=W,exports.PrevButton=Qe,exports.RadioField=z,exports.SelectField=U,exports.StepForm=Je,exports.StepFormProvider=je,exports.SubmitButton=ke,exports.SwitchField=M,exports.TextareaField=q,exports.WatchField=function(e){var r=e.name,n=e.defaultValue,a=e.isDisabled,l=e.isExact,o=t.useFormContext(),i=t.useWatch({name:r,defaultValue:n,disabled:a,exact:l});return e.children(i,o)||null},exports.objectFieldResolver=K,exports.registerFieldType=L,exports.useArrayField=ie,exports.useArrayFieldAddButton=de,exports.useArrayFieldContext=ne,exports.useArrayFieldRemoveButton=se,exports.useArrayFieldRow=ue,exports.useArrayFieldRowContext=oe,exports.useFormStep=Ue,exports.useStepForm=Me,exports.useStepFormContext=qe,exports.withControlledInput=I,exports.withUncontrolledInput=P;
-//# sourceMappingURL=index.js.map
+'use strict';
+
+var React8 = require('react');
+var utils = require('@chakra-ui/utils');
+var reactHookForm = require('react-hook-form');
+var react = require('@chakra-ui/react');
+var icons = require('@chakra-ui/icons');
+var reactUtils = require('@chakra-ui/react-utils');
+var core = require('@saas-ui/core');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React8__namespace = /*#__PURE__*/_interopNamespaceDefault(React8);
+
+// src/display-field.tsx
+var DisplayField = ({
+  name,
+  label,
+  placeholder,
+  ...props
+}) => {
+  return /* @__PURE__ */ React8__namespace.createElement(react.FormControl, {
+    ...props
+  }, label ? /* @__PURE__ */ React8__namespace.createElement(react.FormLabel, {
+    htmlFor: name
+  }, label) : null, /* @__PURE__ */ React8__namespace.createElement(react.Text, {
+    fontSize: "md"
+  }, /* @__PURE__ */ React8__namespace.createElement(FormValue, {
+    name
+  })));
+};
+if (utils.__DEV__) {
+  DisplayField.displayName = "DisplayField";
+}
+var FormValue = ({ name }) => {
+  const { getValues } = reactHookForm.useFormContext();
+  return getValues(name) || null;
+};
+if (utils.__DEV__) {
+  FormValue.displayName = "FormValue";
+}
+var NumberInput = react.forwardRef((props, ref) => {
+  const { hideStepper, incrementIcon, decrementIcon, ...rest } = props;
+  return /* @__PURE__ */ React8__namespace.createElement(react.NumberInput, {
+    ...rest,
+    ref
+  }, /* @__PURE__ */ React8__namespace.createElement(react.NumberInputField, null), !hideStepper && /* @__PURE__ */ React8__namespace.createElement(react.NumberInputStepper, null, /* @__PURE__ */ React8__namespace.createElement(react.NumberIncrementStepper, {
+    children: incrementIcon
+  }), /* @__PURE__ */ React8__namespace.createElement(react.NumberDecrementStepper, {
+    children: decrementIcon
+  })));
+});
+NumberInput.defaultProps = {
+  hideStepper: false
+};
+if (utils.__DEV__) {
+  NumberInput.displayName = "NumberInput";
+}
+var InputRightButton = react.forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ React8__namespace.createElement(react.InputRightElement, {
+      w: "auto",
+      px: "1",
+      py: "1",
+      alignItems: "stretch"
+    }, /* @__PURE__ */ React8__namespace.createElement(react.Button, {
+      ref,
+      height: "auto",
+      ...props
+    }));
+  }
+);
+InputRightButton.id = "InputRightElement";
+InputRightButton.displayName = "InputRightButton";
+
+// src/password-input/password-input.tsx
+var PasswordInput = react.forwardRef(
+  (props, ref) => {
+    const {
+      viewIcon,
+      viewOffIcon,
+      autoComplete,
+      w,
+      width,
+      size,
+      variant,
+      ...inputProps
+    } = props;
+    const [show, setShow] = React8.useState(false);
+    const handleClick = () => setShow(!show);
+    const label = show ? "Hide password" : "Show password";
+    let icon;
+    if (show) {
+      icon = viewIcon || /* @__PURE__ */ React8.createElement(icons.ViewIcon, null);
+    } else {
+      icon = viewOffIcon || /* @__PURE__ */ React8.createElement(icons.ViewOffIcon, null);
+    }
+    const groupProps = {
+      width: w || width,
+      size,
+      variant
+    };
+    return /* @__PURE__ */ React8.createElement(react.InputGroup, {
+      ...groupProps
+    }, /* @__PURE__ */ React8.createElement(react.Input, {
+      ...inputProps,
+      ref,
+      type: show ? "text" : "password",
+      autoComplete: show ? "off" : autoComplete
+    }), /* @__PURE__ */ React8.createElement(InputRightButton, {
+      onClick: handleClick,
+      "aria-label": label,
+      variant: "ghost"
+    }, icon));
+  }
+);
+if (utils.__DEV__) {
+  PasswordInput.displayName = "PasswordInput";
+}
+var RadioInput = react.forwardRef(
+  ({ options, spacing, direction, ...props }, ref) => {
+    const { onBlur, onChange, ...groupProps } = props;
+    return /* @__PURE__ */ React8__namespace.createElement(react.RadioGroup, {
+      onChange,
+      ...groupProps
+    }, /* @__PURE__ */ React8__namespace.createElement(react.Stack, {
+      spacing,
+      direction
+    }, options.map(({ value, label, ...radioProps }, i) => {
+      return /* @__PURE__ */ React8__namespace.createElement(react.Radio, {
+        key: i,
+        onBlur,
+        value,
+        ref,
+        ...radioProps
+      }, label || value);
+    })));
+  }
+);
+if (utils.__DEV__) {
+  RadioInput.displayName = "RadioInput";
+}
+var SelectButton = react.forwardRef((props, ref) => {
+  const styles = react.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__namespace.createElement(react.MenuButton, {
+    as: react.Button,
+    ...props,
+    ref,
+    sx: buttonStyles
+  });
+});
+if (utils.__DEV__) {
+  SelectButton.displayName = "SelectButton";
+}
+var Select = react.forwardRef((props, ref) => {
+  const {
+    name,
+    options,
+    children,
+    onChange,
+    defaultValue,
+    value,
+    placeholder,
+    isDisabled,
+    leftIcon,
+    rightIcon = /* @__PURE__ */ React8__namespace.createElement(icons.ChevronDownIcon, null),
+    multiple,
+    size,
+    variant,
+    menuListProps,
+    renderValue = (value2) => value2 == null ? void 0 : value2.join(", "),
+    ...rest
+  } = props;
+  const menuProps = react.omitThemingProps(rest);
+  const [currentValue, setCurrentValue] = React8__namespace.useState(value || defaultValue);
+  const controlProps = react.useFormControl({ name });
+  const handleChange = (value2) => {
+    setCurrentValue(value2);
+    onChange == null ? void 0 : onChange(value2);
+  };
+  const buttonProps = {
+    isDisabled,
+    leftIcon,
+    rightIcon,
+    size,
+    variant
+  };
+  const getDisplayValue = React8__namespace.useCallback(
+    (value2) => {
+      if (!options) {
+        return value2;
+      }
+      for (const option of options) {
+        if (option.label && option.value === value2) {
+          return option.label;
+        }
+      }
+      return value2;
+    },
+    [options]
+  );
+  const displayValue = currentValue ? (Array.isArray(currentValue) ? currentValue : [currentValue]).map(
+    getDisplayValue
+  ) : [];
+  return /* @__PURE__ */ React8__namespace.createElement(react.Menu, {
+    ...menuProps,
+    closeOnSelect: !multiple
+  }, /* @__PURE__ */ React8__namespace.createElement(react.chakra.div, {
+    className: utils.cx("sui-select")
+  }, /* @__PURE__ */ React8__namespace.createElement(SelectButton, {
+    ref,
+    ...buttonProps
+  }, renderValue(displayValue) || placeholder), /* @__PURE__ */ React8__namespace.createElement(react.MenuList, {
+    maxH: "60vh",
+    overflowY: "auto",
+    ...menuListProps
+  }, /* @__PURE__ */ React8__namespace.createElement(react.MenuOptionGroup, {
+    defaultValue: defaultValue || value,
+    onChange: handleChange,
+    type: multiple ? "checkbox" : "radio"
+  }, options ? options.map(({ value: value2, label, ...rest2 }, i) => /* @__PURE__ */ React8__namespace.createElement(react.MenuItemOption, {
+    key: i,
+    value: value2,
+    ...rest2
+  }, label || value2)) : children)), /* @__PURE__ */ React8__namespace.createElement(react.chakra.input, {
+    ...controlProps,
+    name,
+    type: "hidden",
+    value: currentValue,
+    className: "saas-select__input"
+  })));
+});
+if (utils.__DEV__) {
+  Select.displayName = "Select";
+}
+var NativeSelect = react.forwardRef(
+  ({ options, children, ...props }, ref) => {
+    return /* @__PURE__ */ React8__namespace.createElement(react.Select, {
+      ref,
+      ...props
+    }, children || (options == null ? void 0 : options.map(({ value, label }) => {
+      return /* @__PURE__ */ React8__namespace.createElement("option", {
+        key: value,
+        value
+      }, label || value);
+    })));
+  }
+);
+if (utils.__DEV__) {
+  NativeSelect.displayName = "NativeSelect";
+}
+
+// src/field.tsx
+var inputTypes = {};
+var defaultInputType = "text";
+var getInput = (type) => {
+  return inputTypes[type] || inputTypes[defaultInputType];
+};
+var getError = (name, formState) => {
+  return reactHookForm.get(formState.errors, name);
+};
+var BaseField = (props) => {
+  const { name, label, help, hideLabel, children, ...controlProps } = props;
+  const { formState } = reactHookForm.useFormContext();
+  const error = getError(name, formState);
+  return /* @__PURE__ */ React8__namespace.createElement(react.FormControl, {
+    ...controlProps,
+    isInvalid: !!error
+  }, label && !hideLabel ? /* @__PURE__ */ React8__namespace.createElement(react.FormLabel, null, label) : null, /* @__PURE__ */ React8__namespace.createElement(react.Box, null, children, help && !(error == null ? void 0 : error.message) ? /* @__PURE__ */ React8__namespace.createElement(react.FormHelperText, null, help) : null, (error == null ? void 0 : error.message) && /* @__PURE__ */ React8__namespace.createElement(react.FormErrorMessage, null, error == null ? void 0 : error.message)));
+};
+if (utils.__DEV__) {
+  BaseField.displayName = "BaseField";
+}
+var Field = React8__namespace.forwardRef(
+  (props, ref) => {
+    const { type = defaultInputType } = props;
+    const InputComponent = getInput(type);
+    return /* @__PURE__ */ React8__namespace.createElement(InputComponent, {
+      ref,
+      ...props
+    });
+  }
+);
+var createField = (InputComponent, { displayName, hideLabel, BaseField: BaseField2 }) => {
+  const Field2 = react.forwardRef((props, ref) => {
+    const {
+      id,
+      name,
+      label,
+      help,
+      isDisabled,
+      isInvalid,
+      isReadOnly,
+      isRequired,
+      rules,
+      ...inputProps
+    } = props;
+    const inputRules = {
+      required: isRequired,
+      ...rules
+    };
+    return /* @__PURE__ */ React8__namespace.createElement(BaseField2, {
+      id,
+      name,
+      label,
+      help,
+      hideLabel,
+      isDisabled,
+      isInvalid,
+      isReadOnly,
+      isRequired
+    }, /* @__PURE__ */ React8__namespace.createElement(InputComponent, {
+      ref,
+      id,
+      name,
+      label: hideLabel ? label : void 0,
+      rules: inputRules,
+      ...inputProps
+    }));
+  });
+  Field2.displayName = displayName;
+  return Field2;
+};
+var withControlledInput = (InputComponent) => {
+  return react.forwardRef(
+    ({ name, rules, ...inputProps }, ref) => {
+      const { control } = reactHookForm.useFormContext();
+      return /* @__PURE__ */ React8__namespace.createElement(reactHookForm.Controller, {
+        name,
+        control,
+        rules,
+        render: ({ field: { ref: _ref, ...field } }) => /* @__PURE__ */ React8__namespace.createElement(InputComponent, {
+          ...field,
+          ...inputProps,
+          onChange: utils.callAllHandlers(inputProps.onChange, field.onChange),
+          onBlur: utils.callAllHandlers(inputProps.onBlur, field.onBlur),
+          ref: react.useMergeRefs(ref, _ref)
+        })
+      });
+    }
+  );
+};
+var withUncontrolledInput = (InputComponent) => {
+  return react.forwardRef(
+    ({ name, rules, ...inputProps }, ref) => {
+      const { register } = reactHookForm.useFormContext();
+      const { ref: _ref, ...field } = register(name, rules);
+      return /* @__PURE__ */ React8__namespace.createElement(InputComponent, {
+        ...field,
+        ...inputProps,
+        onChange: utils.callAllHandlers(inputProps.onChange, field.onChange),
+        onBlur: utils.callAllHandlers(inputProps.onBlur, field.onBlur),
+        ref: react.useMergeRefs(ref, _ref)
+      });
+    }
+  );
+};
+var registerFieldType = (type, component, options) => {
+  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`,
+    hideLabel: options == null ? void 0 : options.hideLabel,
+    BaseField: (options == null ? void 0 : options.BaseField) || BaseField
+  });
+  inputTypes[type] = Field2;
+  return Field2;
+};
+var InputField = registerFieldType(
+  "text",
+  react.forwardRef(({ type = "text", leftAddon, rightAddon, size, ...rest }, ref) => {
+    const input = /* @__PURE__ */ React8__namespace.createElement(react.Input, {
+      type,
+      size,
+      ...rest,
+      ref
+    });
+    if (leftAddon || rightAddon) {
+      return /* @__PURE__ */ React8__namespace.createElement(react.InputGroup, {
+        size
+      }, leftAddon, input, rightAddon);
+    }
+    return input;
+  })
+);
+var NumberInputField2 = registerFieldType(
+  "number",
+  NumberInput,
+  {
+    isControlled: true
+  }
+);
+var PasswordInputField = registerFieldType(
+  "password",
+  react.forwardRef((props, ref) => /* @__PURE__ */ React8__namespace.createElement(PasswordInput, {
+    ref,
+    ...props
+  }))
+);
+var TextareaField = registerFieldType(
+  "textarea",
+  react.Textarea
+);
+var SwitchField = registerFieldType(
+  "switch",
+  react.forwardRef(({ type, value, ...rest }, ref) => {
+    return /* @__PURE__ */ React8__namespace.createElement(react.Switch, {
+      isChecked: !!value,
+      ...rest,
+      ref
+    });
+  }),
+  {
+    isControlled: true
+  }
+);
+var SelectField = registerFieldType("select", Select, {
+  isControlled: true
+});
+var CheckboxField = registerFieldType(
+  "checkbox",
+  react.forwardRef(({ label, type, ...props }, ref) => {
+    return /* @__PURE__ */ React8__namespace.createElement(react.Checkbox, {
+      ref,
+      ...props
+    }, label);
+  }),
+  {
+    hideLabel: true
+  }
+);
+var RadioField = registerFieldType(
+  "radio",
+  RadioInput,
+  {
+    isControlled: true
+  }
+);
+var NativeSelectField = registerFieldType(
+  "native-select",
+  NativeSelect,
+  { isControlled: true }
+);
+var PinField = registerFieldType(
+  "pin",
+  react.forwardRef((props, ref) => {
+    const { pinLength = 4, pinType, spacing, ...inputProps } = props;
+    const inputs = [];
+    for (let i = 0; i < pinLength; i++) {
+      inputs.push(/* @__PURE__ */ React8__namespace.createElement(react.PinInputField, {
+        key: i,
+        ref
+      }));
+    }
+    return /* @__PURE__ */ React8__namespace.createElement(react.HStack, {
+      spacing
+    }, /* @__PURE__ */ React8__namespace.createElement(react.PinInput, {
+      ...inputProps,
+      type: pinType
+    }, 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 = utils.get(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 };
+};
+
+// src/form.tsx
+var Form = react.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 = reactHookForm.useForm(form);
+    const { handleSubmit } = methods;
+    React8__namespace.useImperativeHandle(formRef, () => methods, [formRef, methods]);
+    React8__namespace.useEffect(() => {
+      let subscription;
+      if (onChange) {
+        subscription = methods.watch(onChange);
+      }
+      return () => subscription == null ? void 0 : subscription.unsubscribe();
+    }, [methods, onChange]);
+    const Field2 = React8__namespace.useMemo(
+      () => (props2) => /* @__PURE__ */ React8__namespace.createElement(Field, {
+        ...props2
+      }),
+      []
+    );
+    return /* @__PURE__ */ React8__namespace.createElement(reactHookForm.FormProvider, {
+      ...methods
+    }, /* @__PURE__ */ React8__namespace.createElement(react.chakra.form, {
+      ref,
+      onSubmit: handleSubmit(onSubmit, onError),
+      ...rest,
+      className: utils.cx("sui-form", props.className)
+    }, utils.runIfFn(children, {
+      Field: Field2,
+      ...methods
+    })));
+  }
+);
+Form.getFieldResolver = objectFieldResolver;
+Form.displayName = "Form";
+function createForm({ resolver }) {
+  const CreateForm = (props) => {
+    const { schema, ...rest } = props;
+    return /* @__PURE__ */ React8__namespace.createElement(Form, {
+      resolver: resolver == null ? void 0 : resolver(props.schema),
+      ...rest
+    });
+  };
+  return CreateForm;
+}
+var FormLayoutItem = ({ children }) => {
+  return /* @__PURE__ */ React8__namespace.createElement(react.chakra.div, null, children);
+};
+if (utils.__DEV__) {
+  FormLayoutItem.displayName = "FormLayoutItem";
+}
+var FormLayout = ({ children, ...props }) => {
+  var _a, _b, _c;
+  const theme = react.useTheme();
+  const defaultProps = (_c = (_b = (_a = theme.components) == null ? void 0 : _a.FormLayout) == null ? void 0 : _b.defaultProps) != null ? _c : {
+    spacing: 4
+  };
+  const gridProps = {
+    ...defaultProps,
+    ...props
+  };
+  return /* @__PURE__ */ React8__namespace.createElement(react.SimpleGrid, {
+    ...gridProps,
+    className: utils.cx("sui-form__layout", props.className)
+  }, React8__namespace.Children.map(children, (child) => {
+    if (React8__namespace.isValidElement(child)) {
+      return /* @__PURE__ */ React8__namespace.createElement(FormLayoutItem, null, child);
+    }
+    return child;
+  }));
+};
+if (utils.__DEV__) {
+  FormLayout.displayName = "FormLayout";
+}
+var mapNestedFields = (name, children) => {
+  return React8__namespace.Children.map(children, (child) => {
+    if (React8__namespace.isValidElement(child) && child.props.name) {
+      return React8__namespace.cloneElement(child, {
+        ...child.props,
+        name: `${name}.${child.props.name}`
+      });
+    }
+    return child;
+  });
+};
+var [ArrayFieldProvider, useArrayFieldContext] = reactUtils.createContext({
+  name: "ArrayFieldContext"
+});
+var [ArrayFieldRowProvider, useArrayFieldRowContext] = reactUtils.createContext({
+  name: "ArrayFieldRowContext"
+});
+var useArrayField = ({
+  name,
+  defaultValue = {},
+  keyName,
+  min,
+  max
+}) => {
+  const { control } = reactHookForm.useFormContext();
+  const context = reactHookForm.useFieldArray({
+    control,
+    name,
+    keyName
+  });
+  return {
+    ...context,
+    name,
+    defaultValue,
+    min,
+    max
+  };
+};
+var useArrayFieldRow = ({ index }) => {
+  const { clearErrors } = reactHookForm.useFormContext();
+  const { name, remove, fields } = useArrayFieldContext();
+  React8__namespace.useEffect(() => {
+    clearErrors(name);
+  }, []);
+  return {
+    index,
+    isFirst: index === 0,
+    isLast: index === fields.length - 1,
+    name: `${name}.${index}`,
+    remove: React8__namespace.useCallback(() => {
+      clearErrors(name);
+      remove(index);
+    }, [index])
+  };
+};
+var useArrayFieldRemoveButton = () => {
+  const { isFirst, remove } = useArrayFieldRowContext();
+  const { min, fields } = useArrayFieldContext();
+  const isDisabled = isFirst && !!(min && fields.length <= min);
+  return {
+    onClick: () => remove(),
+    isDisabled
+  };
+};
+var useArrayFieldAddButton = () => {
+  const { append, defaultValue, max, fields } = useArrayFieldContext();
+  const isDisabled = !!(max && fields.length >= max);
+  return {
+    onClick: () => append(defaultValue, {
+      shouldFocus: false
+    }),
+    isDisabled
+  };
+};
+
+// src/array-field.tsx
+var ArrayFieldRow = ({
+  children,
+  index,
+  ...rowFieldsProps
+}) => {
+  return /* @__PURE__ */ React8__namespace.createElement(ArrayFieldRowContainer, {
+    index
+  }, /* @__PURE__ */ React8__namespace.createElement(ArrayFieldRowFields, {
+    ...rowFieldsProps
+  }, children), /* @__PURE__ */ React8__namespace.createElement(ArrayFieldRemoveButton, null));
+};
+if (utils.__DEV__) {
+  ArrayFieldRow.displayName = "ArrayFieldRow";
+}
+var ArrayFieldRowFields = ({
+  children,
+  ...layoutProps
+}) => {
+  const { name } = useArrayFieldRowContext();
+  return /* @__PURE__ */ React8__namespace.createElement(FormLayout, {
+    flex: "1",
+    mr: "2",
+    ...layoutProps
+  }, mapNestedFields(name, children));
+};
+if (utils.__DEV__) {
+  ArrayFieldRowFields.displayName = "ArrayFieldRowFields";
+}
+var ArrayFieldRowContainer = ({
+  children,
+  index
+}) => {
+  const context = useArrayFieldRow({ index });
+  const styles = {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "flex-end",
+    width: "100%",
+    mb: 4
+  };
+  return /* @__PURE__ */ React8__namespace.createElement(ArrayFieldRowProvider, {
+    value: context
+  }, /* @__PURE__ */ React8__namespace.createElement(react.chakra.div, {
+    __css: styles
+  }, children));
+};
+if (utils.__DEV__) {
+  ArrayFieldRowContainer.displayName = "ArrayFieldRowContainer";
+}
+var ArrayFieldRemoveButton = (props) => {
+  return /* @__PURE__ */ React8__namespace.createElement(react.Button, {
+    "aria-label": "Remove row",
+    ...useArrayFieldRemoveButton(),
+    ...props
+  }, props.children || /* @__PURE__ */ React8__namespace.createElement(icons.MinusIcon, null));
+};
+if (utils.__DEV__) {
+  ArrayFieldRemoveButton.displayName = "ArrayFieldRemoveButton";
+}
+var ArrayFieldAddButton = (props) => {
+  return /* @__PURE__ */ React8__namespace.createElement(react.Button, {
+    "aria-label": "Add row",
+    float: "right",
+    ...useArrayFieldAddButton(),
+    ...props
+  }, props.children || /* @__PURE__ */ React8__namespace.createElement(icons.AddIcon, null));
+};
+if (utils.__DEV__) {
+  ArrayFieldAddButton.displayName = "ArrayFieldAddButton";
+}
+var ArrayField = react.forwardRef(
+  (props, ref) => {
+    const { children, ...containerProps } = props;
+    return /* @__PURE__ */ React8__namespace.createElement(ArrayFieldContainer, {
+      ref,
+      ...containerProps
+    }, /* @__PURE__ */ React8__namespace.createElement(ArrayFieldRows, null, (fields) => /* @__PURE__ */ React8__namespace.createElement(React8__namespace.Fragment, null, fields.map(({ id }, index) => /* @__PURE__ */ React8__namespace.createElement(ArrayFieldRow, {
+      key: id,
+      index
+    }, children)))), /* @__PURE__ */ React8__namespace.createElement(ArrayFieldAddButton, null));
+  }
+);
+if (utils.__DEV__) {
+  ArrayField.displayName = "ArrayField";
+}
+var ArrayFieldRows = ({
+  children
+}) => {
+  const { fields } = useArrayFieldContext();
+  return children(fields);
+};
+if (utils.__DEV__) {
+  ArrayFieldRows.displayName = "ArrayFieldRows";
+}
+var ArrayFieldContainer = React8__namespace.forwardRef(
+  ({
+    name,
+    defaultValue,
+    keyName,
+    min,
+    max,
+    children,
+    ...fieldProps
+  }, ref) => {
+    const context = useArrayField({
+      name,
+      defaultValue,
+      keyName,
+      min,
+      max
+    });
+    React8__namespace.useImperativeHandle(ref, () => context, [ref, context]);
+    return /* @__PURE__ */ React8__namespace.createElement(ArrayFieldProvider, {
+      value: context
+    }, /* @__PURE__ */ React8__namespace.createElement(BaseField, {
+      name,
+      ...fieldProps
+    }, children));
+  }
+);
+if (utils.__DEV__) {
+  ArrayFieldContainer.displayName = "ArrayFieldContainer";
+}
+var FormLegend = (props) => {
+  const styles = react.useStyleConfig("SuiFormLegend");
+  return /* @__PURE__ */ React8__namespace.createElement(react.FormLabel, {
+    as: "legend",
+    sx: styles,
+    ...props
+  });
+};
+var ObjectField = (props) => {
+  const { name, label, hideLabel, children, columns, spacing, ...fieldProps } = props;
+  return /* @__PURE__ */ React8__namespace.createElement(react.FormControl, {
+    name,
+    as: "fieldset",
+    ...fieldProps
+  }, /* @__PURE__ */ React8__namespace.createElement(FormLegend, {
+    display: hideLabel ? "none" : "block"
+  }, label), /* @__PURE__ */ React8__namespace.createElement(FormLayout, {
+    columns,
+    gridGap: spacing
+  }, mapNestedFields(name, children)));
+};
+if (utils.__DEV__) {
+  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__namespace.createElement(Field, {
+      key: name2 || i,
+      name: name2,
+      type,
+      ...nestedFieldProps
+    })
+  );
+};
+var Fields = ({
+  schema,
+  fieldResolver,
+  focusFirstField,
+  ...props
+}) => {
+  const resolver = React8__namespace.useMemo(
+    () => fieldResolver || Form.getFieldResolver(schema),
+    [schema, fieldResolver]
+  );
+  const fields = React8__namespace.useMemo(() => resolver.getFields(), [resolver]);
+  const form = reactHookForm.useFormContext();
+  React8__namespace.useEffect(() => {
+    var _a;
+    if (focusFirstField && ((_a = fields[0]) == null ? void 0 : _a.name)) {
+      form.setFocus(fields[0].name);
+    }
+  }, [schema, fieldResolver, focusFirstField]);
+  return /* @__PURE__ */ React8__namespace.createElement(FormLayout, {
+    ...props
+  }, fields.map(
+    ({
+      name,
+      type,
+      defaultValue,
+      ...fieldProps
+    }) => {
+      if (type === "array") {
+        return /* @__PURE__ */ React8__namespace.createElement(ArrayField, {
+          key: name,
+          name,
+          ...fieldProps
+        }, mapNestedFields2(resolver, name));
+      } else if (type === "object") {
+        return /* @__PURE__ */ React8__namespace.createElement(ObjectField, {
+          key: name,
+          name,
+          ...fieldProps
+        }, mapNestedFields2(resolver, name));
+      }
+      return /* @__PURE__ */ React8__namespace.createElement(Field, {
+        key: name,
+        name,
+        type,
+        ...fieldProps
+      });
+    }
+  ));
+};
+Fields.displayName = "Fields";
+var SubmitButton = react.forwardRef(
+  (props, ref) => {
+    const {
+      children = "Submit",
+      disableIfUntouched,
+      disableIfInvalid,
+      isDisabled: isDisabledProp,
+      isLoading,
+      ...rest
+    } = props;
+    const { formState } = reactHookForm.useFormContext();
+    const isDisabled = disableIfUntouched && !formState.isDirty || disableIfInvalid && !formState.isValid || isDisabledProp;
+    return /* @__PURE__ */ React8__namespace.createElement(react.Button, {
+      ...rest,
+      ref,
+      type: "submit",
+      isLoading: formState.isSubmitting || isLoading,
+      isDisabled
+    }, children);
+  }
+);
+SubmitButton.defaultProps = {
+  variant: "primary",
+  disableIfUntouched: false,
+  disableIfInvalid: false
+};
+SubmitButton.displayName = "SubmitButton";
+
+// src/auto-form.tsx
+var AutoForm = react.forwardRef(
+  (props, ref) => {
+    const {
+      schema,
+      submitLabel = "Submit",
+      fieldResolver,
+      children,
+      ...rest
+    } = props;
+    return /* @__PURE__ */ React8__namespace.createElement(Form, {
+      ...rest,
+      schema,
+      ref
+    }, /* @__PURE__ */ React8__namespace.createElement(FormLayout, null, /* @__PURE__ */ React8__namespace.createElement(Fields, {
+      schema,
+      fieldResolver
+    }), submitLabel && /* @__PURE__ */ React8__namespace.createElement(SubmitButton, null, submitLabel), children));
+  }
+);
+AutoForm.displayName = "AutoForm";
+var DisplayIf = ({
+  children,
+  name,
+  defaultValue,
+  isDisabled,
+  isExact,
+  condition = (value) => !!value
+}) => {
+  const value = reactHookForm.useWatch({
+    name,
+    defaultValue,
+    disabled: isDisabled,
+    exact: isExact
+  });
+  const context = reactHookForm.useFormContext();
+  return condition(value, context) ? children : null;
+};
+if (utils.__DEV__) {
+  DisplayIf.displayName = "DisplayIf";
+}
+var [StepFormProvider, useStepFormContext] = reactUtils.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 stepper = core.useStepper(rest);
+  const { activeStep, isLastStep, nextStep } = stepper;
+  const [steps, updateSteps] = React8__namespace.useState({});
+  const onSubmitStep = React8__namespace.useCallback(
+    async (data) => {
+      var _a, _b;
+      try {
+        const step = steps[activeStep];
+        if (isLastStep) {
+          await ((_a = props.onSubmit) == null ? void 0 : _a.call(props, data));
+          updateStep({
+            ...step,
+            isCompleted: true
+          });
+          nextStep();
+          return;
+        }
+        await ((_b = step.onSubmit) == null ? void 0 : _b.call(step, data, stepper));
+        nextStep();
+      } catch (e) {
+      }
+    },
+    [steps, activeStep, isLastStep]
+  );
+  const getFormProps = React8__namespace.useCallback(() => {
+    const step = steps[activeStep];
+    return {
+      onSubmit: onSubmitStep,
+      schema: step == null ? void 0 : step.schema,
+      resolver: step == null ? void 0 : step.resolver
+    };
+  }, [steps, onSubmitStep, activeStep]);
+  const updateStep = React8__namespace.useCallback(
+    (step) => {
+      updateSteps((steps2) => {
+        return {
+          ...steps2,
+          [step.name]: step
+        };
+      });
+    },
+    [steps]
+  );
+  return {
+    getFormProps,
+    updateStep,
+    steps,
+    ...stepper
+  };
+}
+function useFormStep(props) {
+  const { name, schema, resolver, onSubmit } = props;
+  const step = core.useStep({ name });
+  const { steps, updateStep } = useStepFormContext();
+  React8__namespace.useEffect(() => {
+    updateStep({ name, schema, resolver, onSubmit });
+  }, [name, schema]);
+  return {
+    ...step,
+    ...steps[name] || { name, schema }
+  };
+}
+
+// src/step-form.tsx
+var StepForm = React8__namespace.forwardRef(
+  (props, ref) => {
+    const { children, ...rest } = props;
+    const stepper = useStepForm(props);
+    const { getFormProps, ...ctx } = stepper;
+    const context = React8__namespace.useMemo(() => ctx, [ctx]);
+    return /* @__PURE__ */ React8__namespace.createElement(core.StepperProvider, {
+      value: context
+    }, /* @__PURE__ */ React8__namespace.createElement(StepFormProvider, {
+      value: context
+    }, /* @__PURE__ */ React8__namespace.createElement(Form, {
+      ref,
+      ...rest,
+      ...getFormProps()
+    }, utils.runIfFn(children, stepper))));
+  }
+);
+var FormStepper = (props) => {
+  const { activeIndex, setIndex } = core.useStepperContext();
+  const { children, orientation, variant, colorScheme, size, ...rest } = props;
+  const elements = React8__namespace.Children.map(children, (child) => {
+    if (React8__namespace.isValidElement(child) && (child == null ? void 0 : child.type) === FormStep) {
+      const { isCompleted } = useFormStep(child.props);
+      return /* @__PURE__ */ React8__namespace.createElement(core.StepperStep, {
+        name: child.props.name,
+        title: child.props.title,
+        isCompleted,
+        ...rest
+      }, child.props.children);
+    }
+    return child;
+  });
+  const onChange = React8__namespace.useCallback((i) => {
+    setIndex(i);
+  }, []);
+  return /* @__PURE__ */ React8__namespace.createElement(core.StepperContainer, {
+    orientation,
+    step: activeIndex,
+    variant,
+    colorScheme,
+    size,
+    onChange
+  }, /* @__PURE__ */ React8__namespace.createElement(core.StepperSteps, {
+    mb: "4",
+    ...props
+  }, elements));
+};
+var FormStep = (props) => {
+  const { name, schema, resolver, children, className, onSubmit, ...rest } = props;
+  const step = useFormStep({ name, schema, resolver, onSubmit });
+  const { isActive } = step;
+  return isActive ? /* @__PURE__ */ React8__namespace.createElement(react.chakra.div, {
+    ...rest,
+    className: utils.cx("sui-form__step", className)
+  }, children) : null;
+};
+if (utils.__DEV__) {
+  FormStep.displayName = "FormStep";
+}
+var PrevButton = (props) => {
+  const { isFirstStep, isCompleted, prevStep } = core.useStepperContext();
+  return /* @__PURE__ */ React8__namespace.createElement(react.Button, {
+    isDisabled: isFirstStep || isCompleted,
+    label: "Back",
+    ...props,
+    className: utils.cx("sui-form__prev-button", props.className),
+    onClick: utils.callAllHandlers(props.onClick, prevStep)
+  });
+};
+if (utils.__DEV__) {
+  PrevButton.displayName = "PrevButton";
+}
+var NextButton = (props) => {
+  const { label = "Next", submitLabel = "Complete", ...rest } = props;
+  const { isLastStep, isCompleted } = core.useStepperContext();
+  return /* @__PURE__ */ React8__namespace.createElement(SubmitButton, {
+    ...rest,
+    isDisabled: isCompleted,
+    className: utils.cx("sui-form__next-button", props.className)
+  }, isLastStep || isCompleted ? submitLabel : label);
+};
+if (utils.__DEV__) {
+  NextButton.displayName = "NextButton";
+}
+var WatchField = (props) => {
+  const { name, defaultValue, isDisabled, isExact } = props;
+  const form = reactHookForm.useFormContext();
+  const field = reactHookForm.useWatch({
+    name,
+    defaultValue,
+    disabled: isDisabled,
+    exact: isExact
+  });
+  return props.children(field, form) || null;
+};
+
+Object.defineProperty(exports, 'Controller', {
+  enumerable: true,
+  get: function () { return reactHookForm.Controller; }
+});
+Object.defineProperty(exports, 'FormProvider', {
+  enumerable: true,
+  get: function () { return reactHookForm.FormProvider; }
+});
+Object.defineProperty(exports, 'appendErrors', {
+  enumerable: true,
+  get: function () { return reactHookForm.appendErrors; }
+});
+Object.defineProperty(exports, 'useController', {
+  enumerable: true,
+  get: function () { return reactHookForm.useController; }
+});
+Object.defineProperty(exports, 'useFieldArray', {
+  enumerable: true,
+  get: function () { return reactHookForm.useFieldArray; }
+});
+Object.defineProperty(exports, 'useForm', {
+  enumerable: true,
+  get: function () { return reactHookForm.useForm; }
+});
+Object.defineProperty(exports, 'useFormContext', {
+  enumerable: true,
+  get: function () { return reactHookForm.useFormContext; }
+});
+Object.defineProperty(exports, 'useFormState', {
+  enumerable: true,
+  get: function () { return reactHookForm.useFormState; }
+});
+Object.defineProperty(exports, 'useWatch', {
+  enumerable: true,
+  get: function () { return reactHookForm.useWatch; }
+});
+exports.ArrayField = ArrayField;
+exports.ArrayFieldAddButton = ArrayFieldAddButton;
+exports.ArrayFieldContainer = ArrayFieldContainer;
+exports.ArrayFieldProvider = ArrayFieldProvider;
+exports.ArrayFieldRemoveButton = ArrayFieldRemoveButton;
+exports.ArrayFieldRow = ArrayFieldRow;
+exports.ArrayFieldRowContainer = ArrayFieldRowContainer;
+exports.ArrayFieldRowFields = ArrayFieldRowFields;
+exports.ArrayFieldRowProvider = ArrayFieldRowProvider;
+exports.ArrayFieldRows = ArrayFieldRows;
+exports.AutoForm = AutoForm;
+exports.BaseField = BaseField;
+exports.CheckboxField = CheckboxField;
+exports.DisplayField = DisplayField;
+exports.DisplayIf = DisplayIf;
+exports.Field = Field;
+exports.Fields = Fields;
+exports.Form = Form;
+exports.FormLayout = FormLayout;
+exports.FormLegend = FormLegend;
+exports.FormStep = FormStep;
+exports.FormStepper = FormStepper;
+exports.FormValue = FormValue;
+exports.InputField = InputField;
+exports.InputRightButton = InputRightButton;
+exports.NativeSelect = NativeSelect;
+exports.NativeSelectField = NativeSelectField;
+exports.NextButton = NextButton;
+exports.NumberInputField = NumberInputField2;
+exports.ObjectField = ObjectField;
+exports.PasswordInput = PasswordInput;
+exports.PasswordInputField = PasswordInputField;
+exports.PinField = PinField;
+exports.PrevButton = PrevButton;
+exports.RadioField = RadioField;
+exports.Select = Select;
+exports.SelectField = SelectField;
+exports.StepForm = StepForm;
+exports.StepFormProvider = StepFormProvider;
+exports.SubmitButton = SubmitButton;
+exports.SwitchField = SwitchField;
+exports.TextareaField = TextareaField;
+exports.WatchField = WatchField;
+exports.createForm = createForm;
+exports.objectFieldResolver = objectFieldResolver;
+exports.registerFieldType = registerFieldType;
+exports.useArrayField = useArrayField;
+exports.useArrayFieldAddButton = useArrayFieldAddButton;
+exports.useArrayFieldContext = useArrayFieldContext;
+exports.useArrayFieldRemoveButton = useArrayFieldRemoveButton;
+exports.useArrayFieldRow = useArrayFieldRow;
+exports.useArrayFieldRowContext = useArrayFieldRowContext;
+exports.useFormStep = useFormStep;
+exports.useStepForm = useStepForm;
+exports.useStepFormContext = useStepFormContext;
+exports.withControlledInput = withControlledInput;
+exports.withUncontrolledInput = withUncontrolledInput;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map