@preply/ds-docs 11.0.0 → 11.1.0

package/dist/assets/IntegrationWithReactHookForm.stories-CW7Lqen8.js

@@ -0,0 +1,467 @@
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{t as i}from"./Heading-CEZfMm-F.js";import{t as a}from"./Button-DnVrHohm.js";import{r as o}from"./AlertBannerAction-BSNrnhbi.js";import{t as s}from"./Checkbox-DEB6VLYS.js";import{n as c,t as l}from"./SingleSelectChips-BuIHP3oW.js";import{n as u,t as d}from"./MultiSelectChips-DLTwAQne.js";import{n as f,t as p}from"./DismissibleChips-Dv66pNAL.js";import{t as m}from"./FormControl-cSvM3XwI.js";import{t as h}from"./LayoutFlex-DdWp4cl3.js";import{t as g}from"./NumberField-BAofx_Ni.js";import{t as _}from"./PasswordField-ByApWpbK.js";import{n as v,t as y}from"./RatingInput-B9JvC6a9.js";import{r as b,t as x}from"./SelectField-_eSdIkCW.js";import{t as ee}from"./Slider-BjEfhJ_o.js";import{t as S}from"./RangeSlider-BshsrfHH.js";import{t as C}from"./Switch-DPX8X1b7.js";import{t as w}from"./TextareaField-D-D245Qp.js";import{t as T}from"./TextField-zS8J7vJP.js";import{setRating as E,t as te}from"./RatingInput.stories-CZaxR49A.js";function D(e){let t,n=Array.isArray(e),r=typeof FileList<`u`?e instanceof FileList:!1;if(e instanceof Date)t=new Date(e);else if(!(be&&(e instanceof Blob||r))&&(n||F(e)))if(t=n?[]:Object.create(Object.getPrototypeOf(e)),!n&&!ye(e))t=e;else for(let n in e)e.hasOwnProperty(n)&&(t[n]=D(e[n]));else return e;return t}function ne(e){let t=we(),{control:n=t.control,disabled:r,name:i,exact:a}=e||{},[o,s]=M.useState(n._formState),c=M.useRef({isDirty:!1,isLoading:!1,dirtyFields:!1,touchedFields:!1,validatingFields:!1,isValidating:!1,isValid:!1,errors:!1});return Ee(()=>n._subscribe({name:i,formState:c.current,exact:a,callback:e=>{!r&&s({...n._formState,...e})}}),[i,r,a]),M.useEffect(()=>{c.current.isValid&&n._setValid(!0)},[n]),M.useMemo(()=>Te(o,n,c.current,!1),[o,n])}function O(e,t,n=new WeakSet){if(Oe(e)||Oe(t))return e===t;if(N(e)&&N(t))return e.getTime()===t.getTime();let r=Object.keys(e),i=Object.keys(t);if(r.length!==i.length)return!1;if(n.has(e)||n.has(t))return!0;n.add(e),n.add(t);for(let a of r){let r=e[a];if(!i.includes(a))return!1;if(a!==`ref`){let e=t[a];if(N(r)&&N(e)||F(r)&&F(e)||Array.isArray(r)&&Array.isArray(e)?!O(r,e,n):r!==e)return!1}}return!0}function re(e){let t=we(),{control:n=t.control,name:r,defaultValue:i,disabled:a,exact:o,compute:s}=e||{},c=M.useRef(i),l=M.useRef(s),u=M.useRef(void 0);l.current=s;let d=M.useMemo(()=>n._getWatch(r,c.current),[n,r]),[f,p]=M.useState(l.current?l.current(d):d);return Ee(()=>n._subscribe({name:r,formState:{values:!0},exact:o,callback:e=>{if(!a){let t=De(r,n._names,e.values||n._formValues,!1,c.current);if(l.current){let e=l.current(t);O(e,u.current)||(p(e),u.current=e)}else p(t)}}}),[n,a,r,o]),M.useEffect(()=>n._removeUnmounted()),f}function ie(e){let t=we(),{name:n,disabled:r,control:i=t.control,shouldUnregister:a,defaultValue:o}=e,s=ve(i._names.array,n),c=re({control:i,name:n,defaultValue:M.useMemo(()=>z(i._formValues,n,z(i._defaultValues,n,o)),[i,n,o]),exact:!0}),l=ne({control:i,name:n,exact:!0}),u=M.useRef(e),d=M.useRef(void 0),f=M.useRef(i.register(n,{...e.rules,value:c,...B(e.disabled)?{disabled:e.disabled}:{}}));u.current=e;let p=M.useMemo(()=>Object.defineProperties({},{invalid:{enumerable:!0,get:()=>!!z(l.errors,n)},isDirty:{enumerable:!0,get:()=>!!z(l.dirtyFields,n)},isTouched:{enumerable:!0,get:()=>!!z(l.touchedFields,n)},isValidating:{enumerable:!0,get:()=>!!z(l.validatingFields,n)},error:{enumerable:!0,get:()=>z(l.errors,n)}}),[l,n]),m=M.useCallback(e=>f.current.onChange({target:{value:ge(e),name:n},type:Se.CHANGE}),[n]),h=M.useCallback(()=>f.current.onBlur({target:{value:z(i._formValues,n),name:n},type:Se.BLUR}),[n,i._formValues]),g=M.useCallback(e=>{let t=z(i._fields,n);t&&e&&(t._f.ref={focus:()=>e.focus&&e.focus(),select:()=>e.select&&e.select(),setCustomValidity:t=>e.setCustomValidity(t),reportValidity:()=>e.reportValidity()})},[i._fields,n]),_=M.useMemo(()=>({name:n,value:c,...B(r)||l.disabled?{disabled:l.disabled||r}:{},onChange:m,onBlur:h,ref:g}),[n,r,l.disabled,m,h,g,c]);return M.useEffect(()=>{let e=i._options.shouldUnregister||a,t=d.current;t&&t!==n&&!s&&i.unregister(t),i.register(n,{...u.current.rules,...B(u.current.disabled)?{disabled:u.current.disabled}:{}});let r=(e,t)=>{let n=z(i._fields,e);n&&n._f&&(n._f.mount=t)};if(r(n,!0),e){let e=D(z(i._options.defaultValues,n,u.current.defaultValue));V(i._defaultValues,n,e),L(z(i._formValues,n))&&V(i._formValues,n,e)}return!s&&i.register(n),d.current=n,()=>{(s?e&&!i._state.action:e)?i.unregister(n):r(n,!1)}},[n,i,s,a]),M.useEffect(()=>{i._setDisabledField({disabled:r,name:n})},[r,n,i]),M.useMemo(()=>({field:_,formState:l,fieldState:p}),[_,l,p])}function ae(e,t){let n={};for(let r in e)if(e.hasOwnProperty(r)){let i=e[r],a=t[r];if(i&&F(i)&&a){let e=ae(i,a);F(e)&&(n[r]=e)}else e[r]&&(n[r]=a)}return n}function k(e,t){let n=t.slice(0,-1).length,r=0;for(;r<n;)e=L(e)?r++:e[t[r++]];return e}function oe(e){for(let t in e)if(e.hasOwnProperty(t)&&!L(e[t]))return!1;return!0}function A(e,t){let n=Array.isArray(t)?t:I(t)?[t]:R(t),r=n.length===1?e:k(e,n),i=n.length-1,a=n[i];return r&&delete r[a],i!==0&&(F(r)&&K(r)||Array.isArray(r)&&oe(r))&&A(e,n.slice(0,-1)),e}function se(e){return Array.isArray(e)||F(e)&&!Re(e)}function j(e,t={}){for(let n in e)se(e[n])?(t[n]=Array.isArray(e[n])?[]:{},j(e[n],t[n])):L(e[n])||(t[n]=!0);return t}function ce(e,t,n){n||=j(t);for(let r in e)se(e[r])?L(t)||Oe(n[r])?n[r]=j(e[r],Array.isArray(e[r])?[]:{}):ce(e[r],P(t)?{}:t[r],n[r]):n[r]=!O(e[r],t[r]);return n}function le(e){let t=e.ref;return Me(t)?t.files:Fe(t)?We(e.refs).value:Pe(t)?[...t.selectedOptions].map(({value:e})=>e):me(t)?Ve(e.refs).value:He(L(t.value)?e.ref.value:t.value,e)}function ue(e,t,n){let r=z(e,n);if(r||I(n))return{error:r,name:n};let i=n.split(`.`);for(;i.length;){let r=i.join(`.`),a=z(t,r),o=z(e,r);if(a&&!Array.isArray(a)&&n!==r)return{name:n};if(o&&o.type)return{name:r,error:o};if(o&&o.root&&o.root.type)return{name:`${r}.root`,error:o.root};i.pop()}return{name:n}}function de(e,t,n=`validate`){if(W(e)||Array.isArray(e)&&e.every(W)||B(e)&&!e)return{type:n,message:W(e)?e:``,ref:t}}function fe(e={}){let t={...ot,...e},n={submitCount:0,isDirty:!1,isReady:!1,isLoading:q(t.defaultValues),isValidating:!1,isSubmitted:!1,isSubmitting:!1,isSubmitSuccessful:!1,isValid:!1,touchedFields:{},dirtyFields:{},validatingFields:{},errors:t.errors||{},disabled:t.disabled||!1},r={},i=(F(t.defaultValues)||F(t.values))&&D(t.defaultValues||t.values)||{},a=t.shouldUnregister?{}:D(i),o={action:!1,mount:!1,watch:!1},s={mount:new Set,disabled:new Set,unMount:new Set,array:new Set,watch:new Set},c,l=0,u={isDirty:!1,dirtyFields:!1,validatingFields:!1,touchedFields:!1,isValidating:!1,isValid:!1,errors:!1},d={...u},f={array:je(),state:je()},p=t.criteriaMode===H.all,m=e=>t=>{clearTimeout(l),l=setTimeout(e,t)},h=async e=>{if(!t.disabled&&(u.isValid||d.isValid||e)){let e=t.resolver?K((await S()).errors):await w(r,!0);e!==n.isValid&&f.state.next({isValid:e})}},g=(e,r)=>{!t.disabled&&(u.isValidating||u.validatingFields||d.isValidating||d.validatingFields)&&((e||Array.from(s.mount)).forEach(e=>{e&&(r?V(n.validatingFields,e,r):A(n.validatingFields,e))}),f.state.next({validatingFields:n.validatingFields,isValidating:!K(n.validatingFields)}))},_=(e,s=[],c,l,p=!0,m=!0)=>{if(l&&c&&!t.disabled){if(o.action=!0,m&&Array.isArray(z(r,e))){let t=c(z(r,e),l.argA,l.argB);p&&V(r,e,t)}if(m&&Array.isArray(z(n.errors,e))){let t=c(z(n.errors,e),l.argA,l.argB);p&&V(n.errors,e,t),rt(n.errors,e)}if((u.touchedFields||d.touchedFields)&&m&&Array.isArray(z(n.touchedFields,e))){let t=c(z(n.touchedFields,e),l.argA,l.argB);p&&V(n.touchedFields,e,t)}(u.dirtyFields||d.dirtyFields)&&(n.dirtyFields=ce(i,a)),f.state.next({name:e,isDirty:E(e,s),dirtyFields:n.dirtyFields,errors:n.errors,isValid:n.isValid})}else V(a,e,s)},v=(e,t)=>{V(n.errors,e,t),f.state.next({errors:n.errors})},y=e=>{n.errors=e,f.state.next({errors:n.errors,isValid:!1})},b=(e,t,n,s)=>{let c=z(r,e);if(c){let r=z(a,e,L(n)?z(i,e):n);L(r)||s&&s.defaultChecked||t?V(a,e,t?r:le(c._f)):re(e,r),o.mount&&h()}},x=(e,r,a,o,s)=>{let c=!1,l=!1,p={name:e};if(!t.disabled){if(!a||o){(u.isDirty||d.isDirty)&&(l=n.isDirty,n.isDirty=p.isDirty=E(),c=l!==p.isDirty);let t=O(z(i,e),r);l=!!z(n.dirtyFields,e),t?A(n.dirtyFields,e):V(n.dirtyFields,e,!0),p.dirtyFields=n.dirtyFields,c||=(u.dirtyFields||d.dirtyFields)&&l!==!t}if(a){let t=z(n.touchedFields,e);t||(V(n.touchedFields,e,a),p.touchedFields=n.touchedFields,c||=(u.touchedFields||d.touchedFields)&&t!==a)}c&&s&&f.state.next(p)}return c?p:{}},ee=(e,r,i,a)=>{let o=z(n.errors,e),s=(u.isValid||d.isValid)&&B(r)&&n.isValid!==r;if(t.delayError&&i?(c=m(()=>v(e,i)),c(t.delayError)):(clearTimeout(l),c=null,i?V(n.errors,e,i):A(n.errors,e)),(i?!O(o,i):o)||!K(a)||s){let t={...a,...s&&B(r)?{isValid:r}:{},errors:n.errors,name:e};n={...n,...t},f.state.next(t)}},S=async e=>{g(e,!0);let n=await t.resolver(a,t.context,Ge(e||s.mount,r,t.criteriaMode,t.shouldUseNativeValidation));return g(e),n},C=async e=>{let{errors:t}=await S(e);if(e)for(let r of e){let e=z(t,r);e?V(n.errors,r,e):A(n.errors,r)}else n.errors=t;return t},w=async(e,r,i={valid:!0})=>{for(let o in e){let c=e[o];if(c){let{_f:e,...o}=c;if(e){let o=s.array.has(e.name),l=c._f&&Xe(c._f);l&&u.validatingFields&&g([e.name],!0);let d=await at(c,s.disabled,a,p,t.shouldUseNativeValidation&&!r,o);if(l&&u.validatingFields&&g([e.name]),d[e.name]&&(i.valid=!1,r))break;!r&&(z(d,e.name)?o?it(n.errors,d,e.name):V(n.errors,e.name,d[e.name]):A(n.errors,e.name))}!K(o)&&await w(o,r,i)}}return i.valid},T=()=>{for(let e of s.unMount){let t=z(r,e);t&&(t._f.refs?t._f.refs.every(e=>!Le(e)):!Le(t._f.ref))&&I(e)}s.unMount=new Set},E=(e,n)=>!t.disabled&&(e&&n&&V(a,e,n),!O(de(),i)),te=(e,t,n)=>De(e,s,{...o.mount?a:L(t)?i:W(e)?{[e]:t}:t},n,t),ne=e=>xe(z(o.mount?a:i,e,t.shouldUnregister?z(i,e,[]):[])),re=(e,t,n={})=>{let i=z(r,e),o=t;if(i){let n=i._f;n&&(!n.disabled&&V(a,e,He(t,n)),o=Ne(n.ref)&&P(t)?``:t,Pe(n.ref)?[...n.ref.options].forEach(e=>e.selected=o.includes(e.value)):n.refs?me(n.ref)?n.refs.forEach(e=>{(!e.defaultChecked||!e.disabled)&&(Array.isArray(o)?e.checked=!!o.find(t=>t===e.value):e.checked=o===e.value||!!o)}):n.refs.forEach(e=>e.checked=e.value===o):Me(n.ref)?n.ref.value=``:(n.ref.value=o,n.ref.type||f.state.next({name:e,values:D(a)})))}(n.shouldDirty||n.shouldTouch)&&x(e,o,n.shouldTouch,n.shouldDirty,!0),n.shouldValidate&&j(e)},ie=(e,t,n)=>{for(let i in t){if(!t.hasOwnProperty(i))return;let a=t[i],o=e+`.`+i,c=z(r,o);(s.array.has(e)||F(a)||c&&!c._f)&&!N(a)?ie(o,a,n):re(o,a,n)}},k=(e,t,c={})=>{let l=z(r,e),p=s.array.has(e),m=D(t);V(a,e,m),p?(f.array.next({name:e,values:D(a)}),(u.isDirty||u.dirtyFields||d.isDirty||d.dirtyFields)&&c.shouldDirty&&f.state.next({name:e,dirtyFields:ce(i,a),isDirty:E(e,m)})):l&&!l._f&&!P(m)?ie(e,m,c):re(e,m,c),Qe(e,s)&&f.state.next({...n,name:e}),f.state.next({name:o.mount?e:void 0,values:D(a)})},oe=async e=>{o.mount=!0;let i=e.target,l=i.name,m=!0,_=z(r,l),v=e=>{m=Number.isNaN(e)||N(e)&&isNaN(e.getTime())||O(e,z(a,l,e))},y=Je(t.mode),b=Je(t.reValidateMode);if(_){let o,C,T=i.type?le(_._f):ge(e),E=e.type===Se.BLUR||e.type===Se.FOCUS_OUT,te=!Ze(_._f)&&!t.resolver&&!z(n.errors,l)&&!_._f.deps||nt(E,z(n.touchedFields,l),n.isSubmitted,b,y),ne=Qe(l,s,E);V(a,l,T),E?(!i||!i.readOnly)&&(_._f.onBlur&&_._f.onBlur(e),c&&c(0)):_._f.onChange&&_._f.onChange(e);let O=x(l,T,E),re=!K(O)||ne;if(!E&&f.state.next({name:l,type:e.type,values:D(a)}),te)return(u.isValid||d.isValid)&&(t.mode===`onBlur`?E&&h():E||h()),re&&f.state.next({name:l,...ne?{}:O});if(!E&&ne&&f.state.next({...n}),t.resolver){let{errors:e}=await S([l]);if(v(T),m){let t=ue(n.errors,r,l),i=ue(e,r,t.name||l);o=i.error,l=i.name,C=K(e)}}else g([l],!0),o=(await at(_,s.disabled,a,p,t.shouldUseNativeValidation))[l],g([l]),v(T),m&&(o?C=!1:(u.isValid||d.isValid)&&(C=await w(r,!0)));m&&(_._f.deps&&(!Array.isArray(_._f.deps)||_._f.deps.length>0)&&j(_._f.deps),ee(l,C,o,O))}},se=(e,t)=>{if(z(n.errors,t)&&e.focus)return e.focus(),1},j=async(e,i={})=>{let a,o,c=Ae(e);if(t.resolver){let t=await C(L(e)?e:c);a=K(t),o=e?!c.some(e=>z(t,e)):a}else e?(o=(await Promise.all(c.map(async e=>{let t=z(r,e);return await w(t&&t._f?{[e]:t}:t)}))).every(Boolean),!(!o&&!n.isValid)&&h()):o=a=await w(r);return f.state.next({...!W(e)||(u.isValid||d.isValid)&&a!==n.isValid?{}:{name:e},...t.resolver||!e?{isValid:a}:{},errors:n.errors}),i.shouldFocus&&!o&&$e(r,se,e?c:s.mount),o},de=(e,t)=>{let r={...o.mount?a:i};return t&&(r=ae(t.dirtyFields?n.dirtyFields:n.touchedFields,r)),L(e)?r:W(e)?z(r,e):e.map(e=>z(r,e))},fe=(e,t)=>({invalid:!!z((t||n).errors,e),isDirty:!!z((t||n).dirtyFields,e),error:z((t||n).errors,e),isValidating:!!z(n.validatingFields,e),isTouched:!!z((t||n).touchedFields,e)}),pe=e=>{e&&Ae(e).forEach(e=>A(n.errors,e)),f.state.next({errors:e?n.errors:{}})},M=(e,t,i)=>{let a=(z(r,e,{_f:{}})._f||{}).ref,{ref:o,message:s,type:c,...l}=z(n.errors,e)||{};V(n.errors,e,{...l,...t,ref:a}),f.state.next({name:e,errors:n.errors,isValid:!1}),i&&i.shouldFocus&&a&&a.focus&&a.focus()},he=(e,t)=>q(e)?f.state.subscribe({next:n=>`values`in n&&e(te(void 0,t),n)}):te(e,t,!0),_e=e=>f.state.subscribe({next:t=>{tt(e.name,t.name,e.exact)&&et(t,e.formState||u,Fe,e.reRenderRoot)&&e.callback({values:{...a},...n,...t,defaultValues:i})}}).unsubscribe,ye=e=>(o.mount=!0,d={...d,...e.formState},_e({...e,formState:d})),I=(e,o={})=>{for(let c of e?Ae(e):s.mount)s.mount.delete(c),s.array.delete(c),o.keepValue||(A(r,c),A(a,c)),!o.keepError&&A(n.errors,c),!o.keepDirty&&A(n.dirtyFields,c),!o.keepTouched&&A(n.touchedFields,c),!o.keepIsValidating&&A(n.validatingFields,c),!t.shouldUnregister&&!o.keepDefaultValue&&A(i,c);f.state.next({values:D(a)}),f.state.next({...n,...o.keepDirty?{isDirty:E()}:{}}),!o.keepIsValid&&h()},R=({disabled:e,name:t})=>{(B(e)&&o.mount||e||s.disabled.has(t))&&(e?s.disabled.add(t):s.disabled.delete(t))},U=(e,n={})=>{let a=z(r,e),c=B(n.disabled)||B(t.disabled);return V(r,e,{...a||{},_f:{...a&&a._f?a._f:{ref:{name:e}},name:e,mount:!0,...n}}),s.mount.add(e),a?R({disabled:B(n.disabled)?n.disabled:t.disabled,name:e}):b(e,!0,n.value),{...c?{disabled:n.disabled||t.disabled}:{},...t.progressive?{required:!!n.required,min:qe(n.min),max:qe(n.max),minLength:qe(n.minLength),maxLength:qe(n.maxLength),pattern:qe(n.pattern)}:{},name:e,onChange:oe,onBlur:oe,ref:c=>{if(c){U(e,n),a=z(r,e);let t=L(c.value)&&c.querySelectorAll&&c.querySelectorAll(`input,select,textarea`)[0]||c,o=Ie(t),s=a._f.refs||[];if(o?s.find(e=>e===t):t===a._f.ref)return;V(r,e,{_f:{...a._f,...o?{refs:[...s.filter(Le),t,...Array.isArray(z(i,e))?[{}]:[]],ref:{type:t.type,name:e}}:{ref:t}}}),b(e,!1,void 0,t)}else a=z(r,e,{}),a._f&&(a._f.mount=!1),(t.shouldUnregister||n.shouldUnregister)&&!(ve(s.array,e)&&o.action)&&s.unMount.add(e)}}},Ce=()=>t.shouldFocusError&&$e(r,se,s.mount),we=e=>{B(e)&&(f.state.next({disabled:e}),$e(r,(t,n)=>{let i=z(r,n);i&&(t.disabled=i._f.disabled||e,Array.isArray(i._f.refs)&&i._f.refs.forEach(t=>{t.disabled=i._f.disabled||e}))},0,!1))},Te=(e,i)=>async o=>{let c;o&&(o.preventDefault&&o.preventDefault(),o.persist&&o.persist());let l=D(a);if(f.state.next({isSubmitting:!0}),t.resolver){let{errors:e,values:t}=await S();n.errors=e,l=D(t)}else await w(r);if(s.disabled.size)for(let e of s.disabled)A(l,e);if(A(n.errors,`root`),K(n.errors)){f.state.next({errors:{}});try{await e(l,o)}catch(e){c=e}}else i&&await i({...n.errors},o),Ce(),setTimeout(Ce);if(f.state.next({isSubmitted:!0,isSubmitting:!1,isSubmitSuccessful:K(n.errors)&&!c,submitCount:n.submitCount+1,errors:n.errors}),c)throw c},Ee=(e,t={})=>{z(r,e)&&(L(t.defaultValue)?k(e,D(z(i,e))):(k(e,t.defaultValue),V(i,e,D(t.defaultValue))),t.keepTouched||A(n.touchedFields,e),t.keepDirty||(A(n.dirtyFields,e),n.isDirty=t.defaultValue?E(e,D(z(i,e))):E()),t.keepError||(A(n.errors,e),u.isValid&&h()),f.state.next({...n}))},Oe=(e,c={})=>{let l=e?D(e):i,d=D(l),p=K(e),m=p?i:d;if(c.keepDefaultValues||(i=l),!c.keepValues){if(c.keepDirtyValues){let e=new Set([...s.mount,...Object.keys(ce(i,a))]);for(let t of Array.from(e))z(n.dirtyFields,t)?V(m,t,z(a,t)):k(t,z(m,t))}else{if(be&&L(e))for(let e of s.mount){let t=z(r,e);if(t&&t._f){let e=Array.isArray(t._f.refs)?t._f.refs[0]:t._f.ref;if(Ne(e)){let t=e.closest(`form`);if(t){t.reset();break}}}}if(c.keepFieldsRef)for(let e of s.mount)k(e,z(m,e));else r={}}a=t.shouldUnregister?c.keepDefaultValues?D(i):{}:D(m),f.array.next({values:{...m}}),f.state.next({values:{...m}})}s={mount:c.keepDirtyValues?s.mount:new Set,unMount:new Set,array:new Set,disabled:new Set,watch:new Set,watchAll:!1,focus:``},o.mount=!u.isValid||!!c.keepIsValid||!!c.keepDirtyValues,o.watch=!!t.shouldUnregister,f.state.next({submitCount:c.keepSubmitCount?n.submitCount:0,isDirty:p?!1:c.keepDirty?n.isDirty:!!(c.keepDefaultValues&&!O(e,i)),isSubmitted:c.keepIsSubmitted?n.isSubmitted:!1,dirtyFields:p?{}:c.keepDirtyValues?c.keepDefaultValues&&a?ce(i,a):n.dirtyFields:c.keepDefaultValues&&e?ce(i,e):c.keepDirty?n.dirtyFields:{},touchedFields:c.keepTouched?n.touchedFields:{},errors:c.keepErrors?n.errors:{},isSubmitSuccessful:c.keepIsSubmitSuccessful?n.isSubmitSuccessful:!1,isSubmitting:!1,defaultValues:i})},G=(e,t)=>Oe(q(e)?e(a):e,t),ke=(e,t={})=>{let n=z(r,e),i=n&&n._f;if(i){let e=i.refs?i.refs[0]:i.ref;e.focus&&(e.focus(),t.shouldSelect&&q(e.select)&&e.select())}},Fe=e=>{n={...n,...e}},Re={control:{register:U,unregister:I,getFieldState:fe,handleSubmit:Te,setError:M,_subscribe:_e,_runSchema:S,_focusError:Ce,_getWatch:te,_getDirty:E,_setValid:h,_setFieldArray:_,_setDisabledField:R,_setErrors:y,_getFieldArray:ne,_reset:Oe,_resetDefaultValues:()=>q(t.defaultValues)&&t.defaultValues().then(e=>{G(e,t.resetOptions),f.state.next({isLoading:!1})}),_removeUnmounted:T,_disableForm:we,_subjects:f,_proxyFormState:u,get _fields(){return r},get _formValues(){return a},get _state(){return o},set _state(e){o=e},get _defaultValues(){return i},get _names(){return s},set _names(e){s=e},get _formState(){return n},get _options(){return t},set _options(e){t={...t,...e}}},subscribe:ye,trigger:j,register:U,handleSubmit:Te,watch:he,setValue:k,getValues:de,reset:G,resetField:Ee,clearErrors:pe,unregister:I,setError:M,setFocus:ke,getFieldState:fe};return{...Re,formControl:Re}}function pe(e={}){let t=M.useRef(void 0),n=M.useRef(void 0),[r,i]=M.useState({isDirty:!1,isValidating:!1,isLoading:q(e.defaultValues),isSubmitted:!1,isSubmitting:!1,isSubmitSuccessful:!1,isValid:!1,submitCount:0,dirtyFields:{},touchedFields:{},validatingFields:{},errors:e.errors||{},disabled:e.disabled||!1,isReady:!1,defaultValues:q(e.defaultValues)?void 0:e.defaultValues});if(!t.current)if(e.formControl)t.current={...e.formControl,formState:r},e.defaultValues&&!q(e.defaultValues)&&e.formControl.reset(e.defaultValues,e.resetOptions);else{let{formControl:n,...i}=fe(e);t.current={...i,formState:r}}let a=t.current.control;return a._options=e,Ee(()=>{let e=a._subscribe({formState:a._proxyFormState,callback:()=>i({...a._formState}),reRenderRoot:!0});return i(e=>({...e,isReady:!0})),a._formState.isReady=!0,e},[a]),M.useEffect(()=>a._disableForm(e.disabled),[a,e.disabled]),M.useEffect(()=>{e.mode&&(a._options.mode=e.mode),e.reValidateMode&&(a._options.reValidateMode=e.reValidateMode)},[a,e.mode,e.reValidateMode]),M.useEffect(()=>{e.errors&&(a._setErrors(e.errors),a._focusError())},[a,e.errors]),M.useEffect(()=>{e.shouldUnregister&&a._subjects.state.next({values:a._getWatch()})},[a,e.shouldUnregister]),M.useEffect(()=>{if(a._proxyFormState.isDirty){let e=a._getDirty();e!==r.isDirty&&a._subjects.state.next({isDirty:e})}},[a,r.isDirty]),M.useEffect(()=>{e.values&&!O(e.values,n.current)?(a._reset(e.values,{keepFieldsRef:!0,...a._options.resetOptions}),n.current=e.values,i(e=>({...e}))):a._resetDefaultValues()},[a,e.values]),M.useEffect(()=>{a._state.mount||(a._setValid(),a._state.mount=!0),a._state.watch&&(a._state.watch=!1,a._subjects.state.next({...a._formState})),a._removeUnmounted()}),t.current.formState=Te(r,a),t.current}var M,me,N,P,he,F,ge,_e,ve,ye,be,I,L,xe,R,z,B,V,Se,H,U,Ce,we,Te,Ee,W,De,Oe,G,ke,Ae,je,K,Me,q,Ne,Pe,Fe,Ie,Le,Re,ze,Be,Ve,He,Ue,We,Ge,Ke,qe,Je,Ye,Xe,Ze,Qe,$e,et,tt,nt,rt,it,J,at,ot,st=t((()=>{M=e(n(),1),me=e=>e.type===`checkbox`,N=e=>e instanceof Date,P=e=>e==null,he=e=>typeof e==`object`,F=e=>!P(e)&&!Array.isArray(e)&&he(e)&&!N(e),ge=e=>F(e)&&e.target?me(e.target)?e.target.checked:e.target.value:e,_e=e=>e.substring(0,e.search(/\.\d+(\.|$)/))||e,ve=(e,t)=>e.has(_e(t)),ye=e=>{let t=e.constructor&&e.constructor.prototype;return F(t)&&t.hasOwnProperty(`isPrototypeOf`)},be=typeof window<`u`&&window.HTMLElement!==void 0&&typeof document<`u`,I=e=>/^\w*$/.test(e),L=e=>e===void 0,xe=e=>Array.isArray(e)?e.filter(Boolean):[],R=e=>xe(e.replace(/["|']|\]/g,``).split(/\.|\[/)),z=(e,t,n)=>{if(!t||!F(e))return n;let r=(I(t)?[t]:R(t)).reduce((e,t)=>P(e)?e:e[t],e);return L(r)||r===e?L(e[t])?n:e[t]:r},B=e=>typeof e==`boolean`,V=(e,t,n)=>{let r=-1,i=I(t)?[t]:R(t),a=i.length,o=a-1;for(;++r<a;){let t=i[r],a=n;if(r!==o){let n=e[t];a=F(n)||Array.isArray(n)?n:isNaN(+i[r+1])?{}:[]}if(t===`__proto__`||t===`constructor`||t===`prototype`)return;e[t]=a,e=e[t]}},Se={BLUR:`blur`,FOCUS_OUT:`focusout`,CHANGE:`change`},H={onBlur:`onBlur`,onChange:`onChange`,onSubmit:`onSubmit`,onTouched:`onTouched`,all:`all`},U={max:`max`,min:`min`,maxLength:`maxLength`,minLength:`minLength`,pattern:`pattern`,required:`required`,validate:`validate`},Ce=M.createContext(null),Ce.displayName=`HookFormContext`,we=()=>M.useContext(Ce),Te=(e,t,n,r=!0)=>{let i={defaultValues:t._defaultValues};for(let a in e)Object.defineProperty(i,a,{get:()=>{let i=a;return t._proxyFormState[i]!==H.all&&(t._proxyFormState[i]=!r||H.all),n&&(n[i]=!0),e[i]}});return i},Ee=typeof window<`u`?M.useLayoutEffect:M.useEffect,W=e=>typeof e==`string`,De=(e,t,n,r,i)=>W(e)?(r&&t.watch.add(e),z(n,e,i)):Array.isArray(e)?e.map(e=>(r&&t.watch.add(e),z(n,e))):(r&&(t.watchAll=!0),n),Oe=e=>P(e)||!he(e),G=e=>e.render(ie(e)),ke=(e,t,n,r,i)=>t?{...n[e],types:{...n[e]&&n[e].types?n[e].types:{},[r]:i||!0}}:{},Ae=e=>Array.isArray(e)?e:[e],je=()=>{let e=[];return{get observers(){return e},next:t=>{for(let n of e)n.next&&n.next(t)},subscribe:t=>(e.push(t),{unsubscribe:()=>{e=e.filter(e=>e!==t)}}),unsubscribe:()=>{e=[]}}},K=e=>F(e)&&!Object.keys(e).length,Me=e=>e.type===`file`,q=e=>typeof e==`function`,Ne=e=>{if(!be)return!1;let t=e?e.ownerDocument:0;return e instanceof(t&&t.defaultView?t.defaultView.HTMLElement:HTMLElement)},Pe=e=>e.type===`select-multiple`,Fe=e=>e.type===`radio`,Ie=e=>Fe(e)||me(e),Le=e=>Ne(e)&&e.isConnected,Re=e=>{for(let t in e)if(q(e[t]))return!0;return!1},ze={value:!1,isValid:!1},Be={value:!0,isValid:!0},Ve=e=>{if(Array.isArray(e)){if(e.length>1){let t=e.filter(e=>e&&e.checked&&!e.disabled).map(e=>e.value);return{value:t,isValid:!!t.length}}return e[0].checked&&!e[0].disabled?e[0].attributes&&!L(e[0].attributes.value)?L(e[0].value)||e[0].value===``?Be:{value:e[0].value,isValid:!0}:Be:ze}return ze},He=(e,{valueAsNumber:t,valueAsDate:n,setValueAs:r})=>L(e)?e:t?e===``?NaN:e&&+e:n&&W(e)?new Date(e):r?r(e):e,Ue={isValid:!1,value:null},We=e=>Array.isArray(e)?e.reduce((e,t)=>t&&t.checked&&!t.disabled?{isValid:!0,value:t.value}:e,Ue):Ue,Ge=(e,t,n,r)=>{let i={};for(let n of e){let e=z(t,n);e&&V(i,n,e._f)}return{criteriaMode:n,names:[...e],fields:i,shouldUseNativeValidation:r}},Ke=e=>e instanceof RegExp,qe=e=>L(e)?e:Ke(e)?e.source:F(e)?Ke(e.value)?e.value.source:e.value:e,Je=e=>({isOnSubmit:!e||e===H.onSubmit,isOnBlur:e===H.onBlur,isOnChange:e===H.onChange,isOnAll:e===H.all,isOnTouch:e===H.onTouched}),Ye=`AsyncFunction`,Xe=e=>!!e&&!!e.validate&&!!(q(e.validate)&&e.validate.constructor.name===Ye||F(e.validate)&&Object.values(e.validate).find(e=>e.constructor.name===Ye)),Ze=e=>e.mount&&(e.required||e.min||e.max||e.maxLength||e.minLength||e.pattern||e.validate),Qe=(e,t,n)=>!n&&(t.watchAll||t.watch.has(e)||[...t.watch].some(t=>e.startsWith(t)&&/^\.\w+/.test(e.slice(t.length)))),$e=(e,t,n,r)=>{for(let i of n||Object.keys(e)){let n=z(e,i);if(n){let{_f:e,...a}=n;if(e){if(e.refs&&e.refs[0]&&t(e.refs[0],i)&&!r||e.ref&&t(e.ref,e.name)&&!r)return!0;if($e(a,t))break}else if(F(a)&&$e(a,t))break}}},et=(e,t,n,r)=>{n(e);let{name:i,...a}=e;return K(a)||Object.keys(a).length>=Object.keys(t).length||Object.keys(a).find(e=>t[e]===(!r||H.all))},tt=(e,t,n)=>!e||!t||e===t||Ae(e).some(e=>e&&(n?e===t:e.startsWith(t)||t.startsWith(e))),nt=(e,t,n,r,i)=>i.isOnAll?!1:!n&&i.isOnTouch?!(t||e):(n?r.isOnBlur:i.isOnBlur)?!e:(n?r.isOnChange:i.isOnChange)?e:!0,rt=(e,t)=>!xe(z(e,t)).length&&A(e,t),it=(e,t,n)=>{let r=Ae(z(e,n));return V(r,`root`,t[n]),V(e,n,r),e},J=e=>F(e)&&!Ke(e)?e:{value:e,message:``},at=async(e,t,n,r,i,a)=>{let{ref:o,refs:s,required:c,maxLength:l,minLength:u,min:d,max:f,pattern:p,validate:m,name:h,valueAsNumber:g,mount:_}=e._f,v=z(n,h);if(!_||t.has(h))return{};let y=s?s[0]:o,b=e=>{i&&y.reportValidity&&(y.setCustomValidity(B(e)?``:e||``),y.reportValidity())},x={},ee=Fe(o),S=me(o),C=ee||S,w=(g||Me(o))&&L(o.value)&&L(v)||Ne(o)&&o.value===``||v===``||Array.isArray(v)&&!v.length,T=ke.bind(null,h,r,x),E=(e,t,n,r=U.maxLength,i=U.minLength)=>{let a=e?t:n;x[h]={type:e?r:i,message:a,ref:o,...T(e?r:i,a)}};if(a?!Array.isArray(v)||!v.length:c&&(!C&&(w||P(v))||B(v)&&!v||S&&!Ve(s).isValid||ee&&!We(s).isValid)){let{value:e,message:t}=W(c)?{value:!!c,message:c}:J(c);if(e&&(x[h]={type:U.required,message:t,ref:y,...T(U.required,t)},!r))return b(t),x}if(!w&&(!P(d)||!P(f))){let e,t,n=J(f),i=J(d);if(!P(v)&&!isNaN(v)){let r=o.valueAsNumber||v&&+v;P(n.value)||(e=r>n.value),P(i.value)||(t=r<i.value)}else{let r=o.valueAsDate||new Date(v),a=e=>new Date(new Date().toDateString()+` `+e),s=o.type==`time`,c=o.type==`week`;W(n.value)&&v&&(e=s?a(v)>a(n.value):c?v>n.value:r>new Date(n.value)),W(i.value)&&v&&(t=s?a(v)<a(i.value):c?v<i.value:r<new Date(i.value))}if((e||t)&&(E(!!e,n.message,i.message,U.max,U.min),!r))return b(x[h].message),x}if((l||u)&&!w&&(W(v)||a&&Array.isArray(v))){let e=J(l),t=J(u),n=!P(e.value)&&v.length>+e.value,i=!P(t.value)&&v.length<+t.value;if((n||i)&&(E(n,e.message,t.message),!r))return b(x[h].message),x}if(p&&!w&&W(v)){let{value:e,message:t}=J(p);if(Ke(e)&&!v.match(e)&&(x[h]={type:U.pattern,message:t,ref:o,...T(U.pattern,t)},!r))return b(t),x}if(m){if(q(m)){let e=de(await m(v,n),y);if(e&&(x[h]={...e,...T(U.validate,e.message)},!r))return b(e.message),x}else if(F(m)){let e={};for(let t in m){if(!K(e)&&!r)break;let i=de(await m[t](v,n),y,t);i&&(e={...i,...T(t,i.message)},b(i.message),r&&(x[h]=e))}if(!K(e)&&(x[h]={ref:y,...e},!r))return x}}return b(!0),x},ot={mode:H.onSubmit,reValidateMode:H.onChange,shouldFocusError:!0}})),Y,X,Z,Q,ct,lt,ut,$,dt;t((()=>{e(n(),1),o(),st(),v(),te(),Y=r(),{userEvent:X,expect:Z,within:Q,waitFor:ct,fn:lt}=__STORYBOOK_MODULE_TEST__,ut={title:`Guides/Integration with React Hook Form`,args:{onSubmit:lt()}},$={render:function(e){return(0,Y.jsx)(()=>{let{register:t,handleSubmit:n,formState:{errors:r},reset:o,control:v}=pe({defaultValues:{fullName:``,email:``,age:void 0,country:``,password:``,confirmPassword:``,bio:``,privacyPolicyAccepted:!1,experienceLevel:50,priceRange:[25,75],emailNotifications:!0,englishLevel:null,skills:[],marketing:[`emails`,`push`],registrationExperience:0}});return(0,Y.jsx)(`div`,{style:{maxWidth:`600px`,margin:`0 auto`,padding:`20px`},children:(0,Y.jsxs)(h,{direction:`column`,gap:`16`,children:[(0,Y.jsx)(i,{variant:`extraLarge`,tag:`h1`,children:`User Registration Form`}),(0,Y.jsxs)(`form`,{onSubmit:n(e.onSubmit),style:{display:`contents`},noValidate:!0,children:[(0,Y.jsx)(T,{label:`Full Name`,...t(`fullName`,{required:`Full name is required`}),error:r.fullName?.message,required:!0}),(0,Y.jsx)(T,{label:`Email`,type:`email`,...t(`email`,{required:`Email is required`}),error:r.email?.message,required:!0}),(0,Y.jsx)(g,{label:`Age`,...t(`age`,{valueAsNumber:!0,required:`Age is required`,min:{value:18,message:`You must be at least 18 years old`}}),min:18,max:120,error:r.age?.message,required:!0}),(0,Y.jsx)(G,{name:`country`,control:v,rules:{required:`Country is required`},render:({field:e})=>(0,Y.jsxs)(x,{ref:e.ref,label:`Country`,placeholder:``,error:r.country?.message,required:!0,disabled:e.disabled,value:e.value,onBlur:e.onBlur,onValueChange:e.onChange,children:[(0,Y.jsx)(b,{value:`us`,children:`United States`}),(0,Y.jsx)(b,{value:`ca`,children:`Canada`}),(0,Y.jsx)(b,{value:`uk`,children:`United Kingdom`}),(0,Y.jsx)(b,{value:`de`,children:`Germany`}),(0,Y.jsx)(b,{value:`fr`,children:`France`}),(0,Y.jsx)(b,{value:`it`,children:`Italy`}),(0,Y.jsx)(b,{value:`es`,children:`Spain`}),(0,Y.jsx)(b,{value:`au`,children:`Australia`}),(0,Y.jsx)(b,{value:`jp`,children:`Japan`}),(0,Y.jsx)(b,{value:`other`,children:`Other`})]})}),(0,Y.jsx)(_,{label:`Password`,...t(`password`,{required:`Password is required`,minLength:{value:8,message:`Password must be at least 8 characters`},pattern:{value:/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]/,message:`Password must contain at least one uppercase letter, one lowercase letter, one number, and one special character`}}),error:r.password?.message,required:!0}),(0,Y.jsx)(_,{label:`Confirm Password`,...t(`confirmPassword`,{required:`Please confirm your password`,validate:(e,t)=>e===t.password||`Passwords do not match`}),error:r.confirmPassword?.message,required:!0}),(0,Y.jsx)(w,{label:`Bio`,...t(`bio`,{maxLength:{value:500,message:`Bio must be less than 500 characters`}}),error:r.bio?.message}),(0,Y.jsx)(G,{name:`experienceLevel`,control:v,rules:{validate:{minValue:e=>e<50?`Must be above 50`:!0}},render:({field:e})=>(0,Y.jsx)(m,{label:`Experience Level`,error:r.experienceLevel?.message,children:(0,Y.jsx)(ee,{value:e.value,onValueChange:e.onChange,min:0,max:100,"aria-label":`Experience Level`})})}),(0,Y.jsx)(G,{name:`priceRange`,control:v,rules:{validate:{minValue:([e])=>e<=25?`Minimum must be above 25`:!0,maxValue:([,e])=>e>=75?`Maximum must be below 75`:!0}},render:({field:e})=>(0,Y.jsx)(m,{label:`Price`,error:r.priceRange?.message,children:(0,Y.jsx)(S,{value:e.value,onValueChange:e.onChange,min:0,max:100,"aria-label":`Price Range`})})}),(0,Y.jsx)(G,{name:`emailNotifications`,control:v,render:({field:e})=>(0,Y.jsx)(m,{label:`Email Notifications`,description:`Receive updates and newsletters via email`,error:r.emailNotifications?.message,children:(0,Y.jsx)(C,{checked:e.value,onCheckedChange:e.onChange,"aria-label":`Email Notifications`})})}),(0,Y.jsx)(G,{control:v,name:`englishLevel`,rules:{required:`English level is required`},render:({field:e})=>(0,Y.jsx)(m,{label:`English Level`,required:!0,children:(0,Y.jsxs)(l,{"aria-label":`English Level`,value:e.value,onValueChange:e.onChange,children:[(0,Y.jsx)(c,{value:`a0`,children:`A0`}),(0,Y.jsx)(c,{value:`a1`,children:`A1`}),(0,Y.jsx)(c,{value:`a2`,children:`A2`}),(0,Y.jsx)(c,{value:`b1`,children:`B1`}),(0,Y.jsx)(c,{value:`b2`,children:`B2`}),(0,Y.jsx)(c,{value:`c1`,children:`C1`}),(0,Y.jsx)(c,{value:`c2`,children:`C2`})]})})}),(0,Y.jsx)(G,{control:v,name:`skills`,rules:{required:`Skills are required`},render:({field:e})=>(0,Y.jsx)(m,{label:`Skills`,required:!0,children:(0,Y.jsxs)(d,{"aria-label":`Skills`,value:e.value,onValueChange:e.onChange,children:[(0,Y.jsx)(u,{value:`vocabulary`,children:`Vocabulary`}),(0,Y.jsx)(u,{value:`speaking`,children:`Speaking`}),(0,Y.jsx)(u,{value:`listening`,children:`Listening`}),(0,Y.jsx)(u,{value:`reading`,children:`Reading`})]})})}),(0,Y.jsx)(G,{control:v,name:`marketing`,rules:{required:`Marketing is required`},render:({field:e})=>(0,Y.jsx)(m,{label:`Marketing`,description:`How do you want to receive marketing communications?`,required:!0,children:(0,Y.jsxs)(p,{"aria-label":`Marketing`,value:e.value,onValueChange:e.onChange,children:[(0,Y.jsx)(f,{value:`emails`,children:`Marketing emails`}),(0,Y.jsx)(f,{value:`push`,children:`Push notifications`})]})})}),(0,Y.jsx)(m,{label:`Accept Privacy Policy`,description:`I accept the Privacy Policy`,error:r.privacyPolicyAccepted?.message,hideLabel:!0,children:(0,Y.jsx)(s,{...t(`privacyPolicyAccepted`,{required:`You must accept the Privacy Policy`})})}),(0,Y.jsx)(G,{name:`registrationExperience`,control:v,render:({field:e})=>(0,Y.jsx)(m,{label:`Rate the registration experience`,description:`Was the form easy to understand?`,error:r.registrationExperience?.message,id:`registrationExperienceField`,children:(0,Y.jsx)(y,{value:e.value,onValueChange:e.onChange})})}),(0,Y.jsxs)(h,{gap:`12`,padding:[`20`,`0`,`0`],justifyContent:`end`,children:[(0,Y.jsx)(a,{onClick:()=>o(),variant:`secondary`,children:`Reset`}),(0,Y.jsx)(a,{submitsForm:!0,children:`Submit`})]})]})]})})},{})},play:async({args:e,canvasElement:t,step:n})=>{let r=Q(t);await n(`Fill full name field`,async()=>{await X.type(r.getByRole(`textbox`,{name:`Full Name`}),`John Doe`)}),await n(`Fill email field`,async()=>{await X.type(r.getByRole(`textbox`,{name:`Email`}),`john.doe@example.com`)}),await n(`Fill age field`,async()=>{await X.clear(r.getByRole(`spinbutton`,{name:`Age`})),await X.type(r.getByRole(`spinbutton`,{name:`Age`}),`25`)}),await n(`Fill country field`,async()=>{r.getByRole(`combobox`,{name:`Country`}).focus(),await X.keyboard(`{Enter}`.repeat(2))}),await n(`Fill password field`,async()=>{await X.type(r.getByLabelText(/^Password/),`TestPassword123!`)}),await n(`Fill confirm password field`,async()=>{await X.type(r.getByLabelText(/^Confirm Password/),`TestPassword123!`)}),await n(`Fill bio field`,async()=>{await X.type(r.getByRole(`textbox`,{name:`Bio`}),`I am a software engineer with 5 years of experience.`)}),await n(`Move experience level slider`,async()=>{r.getByRole(`slider`,{name:`Experience Level`}).focus(),await X.keyboard(`{ArrowRight}`.repeat(5))}),await n(`Move price range slider minimum`,async()=>{r.getByRole(`slider`,{name:`Minimum Price Range`}).focus(),await X.keyboard(`{ArrowRight}`.repeat(2))}),await n(`Move price range slider maximum`,async()=>{r.getByRole(`slider`,{name:`Maximum Price Range`}).focus(),await X.keyboard(`{ArrowLeft}`.repeat(2))}),await n(`Select english level`,async()=>{let e=Q(r.getByRole(`listbox`,{name:`English Level`})).getByRole(`option`,{name:`B2`});await X.click(e)}),await n(`Select reading skill`,async()=>{let e=Q(r.getByRole(`listbox`,{name:`Skills`})).getByRole(`option`,{name:`Reading`});await X.click(e)}),await n(`Select listening skill`,async()=>{let e=Q(r.getByRole(`listbox`,{name:`Skills`})).getByRole(`option`,{name:`Listening`});await X.click(e)}),await n(`Dismiss push notifications`,async()=>{let e=Q(r.getByRole(`list`,{name:`Marketing`})).getByRole(`button`,{name:`Remove Push notifications`});await X.click(e)}),await n(`Accept privacy policy`,async()=>{let e=r.getByRole(`checkbox`,{name:`Accept Privacy Policy`});await X.click(e)}),await n(`Toggle email notifications`,async()=>{await X.click(r.getByRole(`switch`,{name:`Email Notifications`}))});let i=t.querySelector(`#registrationExperienceField`);if(!i)throw Error(`#registrationExperienceField is not in the canvas`);if(!(i instanceof HTMLElement))throw Error(`#registrationExperienceField is not a valid HTMLElement`);await n(`Rate the registration form`,async()=>{await E({value:5,rating:i})}),await n(`Submit the form`,async()=>{await X.click(r.getByRole(`button`,{name:`Submit`}))}),await n(`Assert that onSubmit was called with correct data`,async()=>{await ct(()=>{Z(e.onSubmit).toHaveBeenCalledWith({fullName:`John Doe`,email:`john.doe@example.com`,age:25,country:`us`,password:`TestPassword123!`,confirmPassword:`TestPassword123!`,bio:`I am a software engineer with 5 years of experience.`,privacyPolicyAccepted:!0,experienceLevel:55,priceRange:[27,73],emailNotifications:!1,englishLevel:`b2`,skills:[`reading`,`listening`],marketing:[`emails`],registrationExperience:5},Z.anything())})}),await n(`Reset the form`,async()=>{await X.click(r.getByRole(`button`,{name:`Reset`}))}),await n(`Assert all fields are cleared`,async()=>{await ct(()=>{Z(r.getByRole(`textbox`,{name:`Full Name`})).not.toHaveValue(),Z(r.getByRole(`textbox`,{name:`Email`})).not.toHaveValue(),Z(r.getByRole(`spinbutton`,{name:`Age`})).not.toHaveValue(),Z(r.getByRole(`combobox`,{name:`Country`})).not.toHaveValue(),Z(r.getByLabelText(/^Password/)).not.toHaveValue(),Z(r.getByLabelText(/^Confirm Password/)).not.toHaveValue(),Z(r.getByRole(`textbox`,{name:`Bio`})).not.toHaveValue(),Z(r.getByRole(`checkbox`,{name:`Accept Privacy Policy`})).not.toBeChecked(),Z(r.getByRole(`switch`,{name:`Email Notifications`})).toHaveAttribute(`aria-checked`,`true`),Z(r.getByRole(`slider`,{name:`Experience Level`})).toHaveAttribute(`aria-valuenow`,`50`),Z(r.getByRole(`slider`,{name:`Minimum Price Range`})).toHaveAttribute(`aria-valuenow`,`25`),Z(r.getByRole(`slider`,{name:`Maximum Price Range`})).toHaveAttribute(`aria-valuenow`,`75`),Q(r.getByRole(`listbox`,{name:`English Level`})).getAllByRole(`option`).forEach(e=>{Z(e).toHaveAttribute(`aria-selected`,`false`)}),Q(r.getByRole(`listbox`,{name:`Skills`})).getAllByRole(`option`).forEach(e=>{Z(e).toHaveAttribute(`aria-selected`,`false`)});let e=r.getByRole(`list`,{name:`Marketing`});Z(Q(e).getByRole(`button`,{name:`Remove Marketing emails`})).toBeVisible(),Z(Q(e).getByRole(`button`,{name:`Remove Push notifications`})).toBeVisible();let n=t.querySelector(`#registrationExperienceField`);if(!n)throw Error(`#registrationExperienceField is not in the canvas`);if(!(n instanceof HTMLElement))throw Error(`#registrationExperienceField is not a valid HTMLElement`);Z(n).toHaveAttribute(`aria-valuetext`,`0 out of 5`)})})}},$.parameters={...$.parameters,docs:{...$.parameters?.docs,source:{originalSource:`{
+  render: function Story(args) {
+    /**
+     * This \`Story\` component is a hacky workaround; without it, the
+     * react-hook-form \`Controller\` component causes a memory leak (and
+     * subsequent crash) on submit.
+     *
+     * We're not sure why yet, but it may have to do with the fact that the
+     * Storybook \`render\` function isn't actually a component, and so some
+     * code inside \`Controller\` runs in an unexpected context.
+     */
+    const Story = () => {
+      const {
+        register,
+        handleSubmit,
+        formState: {
+          errors
+        },
+        reset,
+        control
+      } = useForm<FormData>({
+        defaultValues: {
+          fullName: '',
+          email: '',
+          age: undefined,
+          country: '',
+          password: '',
+          confirmPassword: '',
+          bio: '',
+          privacyPolicyAccepted: false,
+          experienceLevel: 50,
+          priceRange: [25, 75],
+          emailNotifications: true,
+          englishLevel: null,
+          skills: [],
+          marketing: ['emails', 'push'],
+          registrationExperience: 0
+        }
+      });
+      return <div style={{
+        maxWidth: '600px',
+        margin: '0 auto',
+        padding: '20px'
+      }}>
+                    <LayoutFlex direction="column" gap="16">
+                        <Heading variant="extraLarge" tag="h1">
+                            User Registration Form
+                        </Heading>
+
+                        <form onSubmit={handleSubmit(args.onSubmit)} style={{
+            display: 'contents'
+          }}
+          // Since we're using react-hook-form, we can disable the default HTML5 validation
+          // to keep error messages visually consistent
+          noValidate>
+                            <TextField label="Full Name" {...register('fullName', {
+              required: 'Full name is required'
+            })} error={errors.fullName?.message} required />
+
+                            <TextField label="Email" type="email" {...register('email', {
+              required: 'Email is required'
+            })} error={errors.email?.message} required />
+
+                            <NumberField label="Age" {...register('age', {
+              valueAsNumber: true,
+              required: 'Age is required',
+              min: {
+                value: 18,
+                message: 'You must be at least 18 years old'
+              }
+            })} min={18} max={120} error={errors.age?.message} required />
+
+                            <Controller name="country" control={control} rules={{
+              required: 'Country is required'
+            }} render={({
+              field
+            }) => <SelectField ref={field.ref} label="Country" placeholder="" error={errors.country?.message} required disabled={field.disabled} value={field.value} onBlur={field.onBlur} onValueChange={field.onChange}>
+                                        <SelectFieldOption value="us">
+                                            United States
+                                        </SelectFieldOption>
+                                        <SelectFieldOption value="ca">Canada</SelectFieldOption>
+                                        <SelectFieldOption value="uk">
+                                            United Kingdom
+                                        </SelectFieldOption>
+                                        <SelectFieldOption value="de">Germany</SelectFieldOption>
+                                        <SelectFieldOption value="fr">France</SelectFieldOption>
+                                        <SelectFieldOption value="it">Italy</SelectFieldOption>
+                                        <SelectFieldOption value="es">Spain</SelectFieldOption>
+                                        <SelectFieldOption value="au">Australia</SelectFieldOption>
+                                        <SelectFieldOption value="jp">Japan</SelectFieldOption>
+                                        <SelectFieldOption value="other">Other</SelectFieldOption>
+                                    </SelectField>} />
+
+                            <PasswordField label="Password" {...register('password', {
+              required: 'Password is required',
+              minLength: {
+                value: 8,
+                message: 'Password must be at least 8 characters'
+              },
+              pattern: {
+                value: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)(?=.*[@$!%*?&])[A-Za-z\\d@$!%*?&]/,
+                message: 'Password must contain at least one uppercase letter, one lowercase letter, one number, and one special character'
+              }
+            })} error={errors.password?.message} required />
+
+                            <PasswordField label="Confirm Password" {...register('confirmPassword', {
+              required: 'Please confirm your password',
+              validate: (value, formValues) => value === formValues.password || 'Passwords do not match'
+            })} error={errors.confirmPassword?.message} required />
+
+                            <TextareaField label="Bio" {...register('bio', {
+              maxLength: {
+                value: 500,
+                message: 'Bio must be less than 500 characters'
+              }
+            })} error={errors.bio?.message} />
+
+                            <Controller name="experienceLevel" control={control} rules={{
+              validate: {
+                minValue: value => {
+                  if (value < 50) {
+                    return 'Must be above 50';
+                  }
+                  return true;
+                }
+              }
+            }} render={({
+              field
+            }) => <FormControl label="Experience Level" error={errors.experienceLevel?.message}>
+                                        <Slider value={field.value} onValueChange={field.onChange} min={0} max={100} aria-label="Experience Level" />
+                                    </FormControl>} />
+
+                            <Controller name="priceRange" control={control} rules={{
+              validate: {
+                minValue: ([min]) => {
+                  if (min <= 25) {
+                    return 'Minimum must be above 25';
+                  }
+                  return true;
+                },
+                maxValue: ([, max]) => {
+                  if (max >= 75) {
+                    return 'Maximum must be below 75';
+                  }
+                  return true;
+                }
+              }
+            }} render={({
+              field
+            }) => <FormControl label="Price" error={errors.priceRange?.message}>
+                                        <RangeSlider value={field.value} onValueChange={field.onChange} min={0} max={100} aria-label="Price Range" />
+                                    </FormControl>} />
+
+                            <Controller name="emailNotifications" control={control} render={({
+              field
+            }) => <FormControl label="Email Notifications" description="Receive updates and newsletters via email" error={errors.emailNotifications?.message}>
+                                        <Switch checked={field.value} onCheckedChange={field.onChange} aria-label="Email Notifications" />
+                                    </FormControl>} />
+
+                            <Controller control={control} name="englishLevel" rules={{
+              required: 'English level is required'
+            }} render={({
+              field
+            }) => <FormControl label="English Level" required>
+                                        <SingleSelectChips aria-label="English Level" value={field.value} onValueChange={field.onChange}>
+                                            <SingleSelectChipsItem value="a0">
+                                                A0
+                                            </SingleSelectChipsItem>
+                                            <SingleSelectChipsItem value="a1">
+                                                A1
+                                            </SingleSelectChipsItem>
+                                            <SingleSelectChipsItem value="a2">
+                                                A2
+                                            </SingleSelectChipsItem>
+                                            <SingleSelectChipsItem value="b1">
+                                                B1
+                                            </SingleSelectChipsItem>
+                                            <SingleSelectChipsItem value="b2">
+                                                B2
+                                            </SingleSelectChipsItem>
+                                            <SingleSelectChipsItem value="c1">
+                                                C1
+                                            </SingleSelectChipsItem>
+                                            <SingleSelectChipsItem value="c2">
+                                                C2
+                                            </SingleSelectChipsItem>
+                                        </SingleSelectChips>
+                                    </FormControl>} />
+
+                            <Controller control={control} name="skills" rules={{
+              required: 'Skills are required'
+            }} render={({
+              field
+            }) => <FormControl label="Skills" required>
+                                        <MultiSelectChips aria-label="Skills" value={field.value} onValueChange={field.onChange}>
+                                            <MultiSelectChipsItem value="vocabulary">
+                                                Vocabulary
+                                            </MultiSelectChipsItem>
+                                            <MultiSelectChipsItem value="speaking">
+                                                Speaking
+                                            </MultiSelectChipsItem>
+                                            <MultiSelectChipsItem value="listening">
+                                                Listening
+                                            </MultiSelectChipsItem>
+                                            <MultiSelectChipsItem value="reading">
+                                                Reading
+                                            </MultiSelectChipsItem>
+                                        </MultiSelectChips>
+                                    </FormControl>} />
+
+                            <Controller control={control} name="marketing" rules={{
+              required: 'Marketing is required'
+            }} render={({
+              field
+            }) => <FormControl label="Marketing" description="How do you want to receive marketing communications?" required>
+                                        <DismissibleChips aria-label="Marketing" value={field.value} onValueChange={field.onChange}>
+                                            <DismissibleChipsItem value="emails">
+                                                Marketing emails
+                                            </DismissibleChipsItem>
+                                            <DismissibleChipsItem value="push">
+                                                Push notifications
+                                            </DismissibleChipsItem>
+                                        </DismissibleChips>
+                                    </FormControl>} />
+
+                            <FormControl label="Accept Privacy Policy" description="I accept the Privacy Policy" error={errors.privacyPolicyAccepted?.message} hideLabel>
+                                <Checkbox {...register('privacyPolicyAccepted', {
+                required: 'You must accept the Privacy Policy'
+              })} />
+                            </FormControl>
+
+                            <Controller name="registrationExperience" control={control} render={({
+              field
+            }) => <FormControl label="Rate the registration experience" description="Was the form easy to understand?" error={errors.registrationExperience?.message} id="registrationExperienceField">
+                                        <RatingInput value={field.value} onValueChange={field.onChange} />
+                                    </FormControl>} />
+
+                            <LayoutFlex gap="12" padding={['20', '0', '0']} justifyContent="end">
+                                <Button onClick={() => reset()} variant="secondary">
+                                    Reset
+                                </Button>
+                                <Button submitsForm>Submit</Button>
+                            </LayoutFlex>
+                        </form>
+                    </LayoutFlex>
+                </div>;
+    };
+    return <Story />;
+  },
+  play: async ({
+    args,
+    canvasElement,
+    step
+  }) => {
+    const canvas = within(canvasElement);
+    await step('Fill full name field', async () => {
+      await userEvent.type(canvas.getByRole('textbox', {
+        name: 'Full Name'
+      }), 'John Doe');
+    });
+    await step('Fill email field', async () => {
+      await userEvent.type(canvas.getByRole('textbox', {
+        name: 'Email'
+      }), 'john.doe@example.com');
+    });
+    await step('Fill age field', async () => {
+      await userEvent.clear(canvas.getByRole('spinbutton', {
+        name: 'Age'
+      }));
+      await userEvent.type(canvas.getByRole('spinbutton', {
+        name: 'Age'
+      }), '25');
+    });
+    await step('Fill country field', async () => {
+      canvas.getByRole('combobox', {
+        name: 'Country'
+      }).focus();
+      await userEvent.keyboard('{Enter}'.repeat(2));
+    });
+    await step('Fill password field', async () => {
+      // Password fields doesn't have implicit role, so we need to use getByLabelText
+      await userEvent.type(canvas.getByLabelText(/^Password/), 'TestPassword123!');
+    });
+    await step('Fill confirm password field', async () => {
+      // Password fields doesn't have implicit role, so we need to use getByLabelText
+      await userEvent.type(canvas.getByLabelText(/^Confirm Password/), 'TestPassword123!');
+    });
+    await step('Fill bio field', async () => {
+      await userEvent.type(canvas.getByRole('textbox', {
+        name: 'Bio'
+      }), 'I am a software engineer with 5 years of experience.');
+    });
+    await step('Move experience level slider', async () => {
+      const experienceSlider = canvas.getByRole('slider', {
+        name: 'Experience Level'
+      });
+      experienceSlider.focus();
+      await userEvent.keyboard('{ArrowRight}'.repeat(5));
+    });
+    await step('Move price range slider minimum', async () => {
+      const priceRangeMin = canvas.getByRole('slider', {
+        name: 'Minimum Price Range'
+      });
+      priceRangeMin.focus();
+      await userEvent.keyboard('{ArrowRight}'.repeat(2));
+    });
+    await step('Move price range slider maximum', async () => {
+      const priceRangeMax = canvas.getByRole('slider', {
+        name: 'Maximum Price Range'
+      });
+      priceRangeMax.focus();
+      await userEvent.keyboard('{ArrowLeft}'.repeat(2));
+    });
+    await step('Select english level', async () => {
+      const englishLevels = canvas.getByRole('listbox', {
+        name: 'English Level'
+      });
+      const b2 = within(englishLevels).getByRole('option', {
+        name: 'B2'
+      });
+      await userEvent.click(b2);
+    });
+    await step('Select reading skill', async () => {
+      const skills = canvas.getByRole('listbox', {
+        name: 'Skills'
+      });
+      const reading = within(skills).getByRole('option', {
+        name: 'Reading'
+      });
+      await userEvent.click(reading);
+    });
+    await step('Select listening skill', async () => {
+      const skills = canvas.getByRole('listbox', {
+        name: 'Skills'
+      });
+      const listening = within(skills).getByRole('option', {
+        name: 'Listening'
+      });
+      await userEvent.click(listening);
+    });
+    await step('Dismiss push notifications', async () => {
+      const marketing = canvas.getByRole('list', {
+        name: 'Marketing'
+      });
+      const push = within(marketing).getByRole('button', {
+        name: 'Remove Push notifications'
+      });
+      await userEvent.click(push);
+    });
+    await step('Accept privacy policy', async () => {
+      const privacyPolicy = canvas.getByRole('checkbox', {
+        name: 'Accept Privacy Policy'
+      });
+      await userEvent.click(privacyPolicy);
+    });
+    await step('Toggle email notifications', async () => {
+      await userEvent.click(canvas.getByRole('switch', {
+        name: 'Email Notifications'
+      }));
+    });
+    const rating = canvasElement.querySelector('#registrationExperienceField');
+    if (!rating) throw new Error('#registrationExperienceField is not in the canvas');
+    if (!(rating instanceof HTMLElement)) throw new Error('#registrationExperienceField is not a valid HTMLElement');
+    await step('Rate the registration form', async () => {
+      await setRating({
+        value: 5,
+        rating
+      });
+    });
+    await step('Submit the form', async () => {
+      await userEvent.click(canvas.getByRole('button', {
+        name: 'Submit'
+      }));
+    });
+    await step('Assert that onSubmit was called with correct data', async () => {
+      await waitFor(() => {
+        expect(args.onSubmit).toHaveBeenCalledWith({
+          fullName: 'John Doe',
+          email: 'john.doe@example.com',
+          age: 25,
+          country: 'us',
+          password: 'TestPassword123!',
+          confirmPassword: 'TestPassword123!',
+          bio: 'I am a software engineer with 5 years of experience.',
+          privacyPolicyAccepted: true,
+          experienceLevel: 55,
+          priceRange: [27, 73],
+          emailNotifications: false,
+          englishLevel: 'b2',
+          skills: ['reading', 'listening'],
+          marketing: ['emails'],
+          registrationExperience: 5
+        }, expect.anything());
+      });
+    });
+    await step('Reset the form', async () => {
+      await userEvent.click(canvas.getByRole('button', {
+        name: 'Reset'
+      }));
+    });
+    await step('Assert all fields are cleared', async () => {
+      await waitFor(() => {
+        expect(canvas.getByRole('textbox', {
+          name: 'Full Name'
+        })).not.toHaveValue();
+        expect(canvas.getByRole('textbox', {
+          name: 'Email'
+        })).not.toHaveValue();
+        expect(canvas.getByRole('spinbutton', {
+          name: 'Age'
+        })).not.toHaveValue();
+        expect(canvas.getByRole('combobox', {
+          name: 'Country'
+        })).not.toHaveValue();
+
+        // Password fields doesn't have implicit role, so we need to use getByLabelText
+        expect(canvas.getByLabelText(/^Password/)).not.toHaveValue();
+        expect(canvas.getByLabelText(/^Confirm Password/)).not.toHaveValue();
+        expect(canvas.getByRole('textbox', {
+          name: 'Bio'
+        })).not.toHaveValue();
+        expect(canvas.getByRole('checkbox', {
+          name: 'Accept Privacy Policy'
+        })).not.toBeChecked();
+        expect(canvas.getByRole('switch', {
+          name: 'Email Notifications'
+        })).toHaveAttribute('aria-checked', 'true');
+        expect(canvas.getByRole('slider', {
+          name: 'Experience Level'
+        })).toHaveAttribute('aria-valuenow', '50');
+        expect(canvas.getByRole('slider', {
+          name: 'Minimum Price Range'
+        })).toHaveAttribute('aria-valuenow', '25');
+        expect(canvas.getByRole('slider', {
+          name: 'Maximum Price Range'
+        })).toHaveAttribute('aria-valuenow', '75');
+        const levelChips = canvas.getByRole('listbox', {
+          name: 'English Level'
+        });
+        within(levelChips).getAllByRole('option').forEach(option => {
+          expect(option).toHaveAttribute('aria-selected', 'false');
+        });
+        const skillsChips = canvas.getByRole('listbox', {
+          name: 'Skills'
+        });
+        within(skillsChips).getAllByRole('option').forEach(option => {
+          expect(option).toHaveAttribute('aria-selected', 'false');
+        });
+        const marketingChips = canvas.getByRole('list', {
+          name: 'Marketing'
+        });
+        expect(within(marketingChips).getByRole('button', {
+          name: 'Remove Marketing emails'
+        })).toBeVisible();
+        expect(within(marketingChips).getByRole('button', {
+          name: 'Remove Push notifications'
+        })).toBeVisible();
+        const rating = canvasElement.querySelector('#registrationExperienceField');
+        if (!rating) throw new Error('#registrationExperienceField is not in the canvas');
+        if (!(rating instanceof HTMLElement)) throw new Error('#registrationExperienceField is not a valid HTMLElement');
+        expect(rating).toHaveAttribute('aria-valuetext', '0 out of 5');
+      });
+    });
+  }
+}`,...$.parameters?.docs?.source},description:{story:`This example demonstrates how to integrate design system fields with react-hook-form.
+
+See [react-hook-form docs](https://react-hook-form.com/docs) for more information.`,...$.parameters?.docs?.description}}},dt=[`IntegrationWithReactHookForm`]}))();export{$ as IntegrationWithReactHookForm,dt as __namedExportsOrder,ut as default};