@preply/ds-docs 3.5.1 → 3.6.0

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

@@ -0,0 +1,439 @@
+import{j as y}from"./jsx-runtime-BTJTZTIL.js";import{e as C}from"./index-Cb9e4tly.js";import{f as Ut,w as re,u as M,a as rt,e as O}from"./index-Ctq3gFTp.js";import{L as it}from"./LayoutFlex-C3k4b85b.js";import{H as Wt}from"./Heading-BLxyLk9f.js";import{T as st}from"./TextField-lnCw6vFm.js";import{N as $t}from"./NumberField-RsSQ3jKy.js";import{S as Jt,a as Z}from"./SelectField-JmD-rzDd.js";import{P as at}from"./PasswordField-Dxf_bax6.js";import{T as zt}from"./TextareaField-BDRAFgn6.js";import{F as ne}from"./FormControl-BBd1k1n3.js";import{S as Yt}from"./Slider-CIF6srIP.js";import{R as Gt}from"./RangeSlider-BYDrLADZ.js";import{S as Kt}from"./Switch-Dw6ODsdd.js";import{a as Zt,S as oe}from"./SingleSelectChips-DLCTUr2z.js";import{a as Qt,M as Ce}from"./MultiSelectChips-CwiPSabU.js";import{a as Xt,D as lt}from"./DismissibleChips-D0spWwKB.js";import{C as er}from"./Checkbox-Bknyi3M6.js";import{B as nt}from"./Button-C5gzVt4K.js";import"./index-ChsGqxH_.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./layout-relative.module-ChaXrVQQ.js";import"./classNames-BUL1Zq7e.js";import"./defaults-Clr6nbGc.js";import"./index-DdzHuZ-Y.js";import"./componentNames-NXEPEzbR.js";import"./text-accent-DZDDtpIt.js";import"./text-centered-CznToR0o.js";import"./Input-MEZGWQfc.js";import"./InputContainer-BZsD6GIE.js";import"./TokyoUIExpand-oMdXmNcg.js";import"./Icon-CsnSNslb.js";import"./render-icon-BT0Aq7PA.js";import"./TokyoUIEye-CteyS9_g.js";import"./FieldButton-DkkntNzT.js";import"./index-DSVnVYmz.js";import"./tslib.es6-BntfKcQG.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./useMergeRefs-D_RfOOSs.js";import"./index-C6wF8VM1.js";import"./message-BqoANQez.js";import"./index-Bt5ip-xO.js";import"./index-BPrLDK9Y.js";import"./index-C7hTFOIV.js";import"./createRequiredContext-BW3-EdwI.js";import"./CountryFlag-DNvfZC7z.js";import"./getCountryFlagUrl-CP-PpZV_.js";import"./TokyoUIClose-thK8sk63.js";import"./shared-strings-BzaHC9x5.js";import"./useMergeRefs-SFH7Mw4x.js";import"./ButtonBase-D5O3MkG2.js";import"./Spinner-T-vTyHiv.js";import"./useHostname-Y3PlXofY.js";import"./index-CC6DAVyL.js";var Se=e=>e.type==="checkbox",ue=e=>e instanceof Date,H=e=>e==null;const St=e=>typeof e=="object";var V=e=>!H(e)&&!Array.isArray(e)&&St(e)&&!ue(e),Ft=e=>V(e)&&e.target?Se(e.target)?e.target.checked:e.target.value:e,tr=e=>e.substring(0,e.search(/\.\d+(\.|$)/))||e,kt=(e,i)=>e.has(tr(i)),rr=e=>{const i=e.constructor&&e.constructor.prototype;return V(i)&&i.hasOwnProperty("isPrototypeOf")},Oe=typeof window<"u"&&typeof window.HTMLElement<"u"&&typeof document<"u";function U(e){let i;const t=Array.isArray(e),s=typeof FileList<"u"?e instanceof FileList:!1;if(e instanceof Date)i=new Date(e);else if(e instanceof Set)i=new Set(e);else if(!(Oe&&(e instanceof Blob||s))&&(t||V(e)))if(i=t?[]:{},!t&&!rr(e))i=e;else for(const l in e)e.hasOwnProperty(l)&&(i[l]=U(e[l]));else return e;return i}var Ee=e=>Array.isArray(e)?e.filter(Boolean):[],_=e=>e===void 0,f=(e,i,t)=>{if(!i||!V(e))return t;const s=Ee(i.split(/[,[\].]+?/)).reduce((l,n)=>H(l)?l:l[n],e);return _(s)||s===e?_(e[i])?t:e[i]:s},Y=e=>typeof e=="boolean",Ne=e=>/^\w*$/.test(e),Ct=e=>Ee(e.replace(/["|']|\]/g,"").split(/\.|\[/)),R=(e,i,t)=>{let s=-1;const l=Ne(i)?[i]:Ct(i),n=l.length,c=n-1;for(;++s<n;){const m=l[s];let w=t;if(s!==c){const A=e[m];w=V(A)||Array.isArray(A)?A:isNaN(+l[s+1])?{}:[]}if(m==="__proto__"||m==="constructor"||m==="prototype")return;e[m]=w,e=e[m]}return e};const Ae={BLUR:"blur",FOCUS_OUT:"focusout",CHANGE:"change"},K={onBlur:"onBlur",onChange:"onChange",onSubmit:"onSubmit",onTouched:"onTouched",all:"all"},ie={max:"max",min:"min",maxLength:"maxLength",minLength:"minLength",pattern:"pattern",required:"required",validate:"validate"},ir=C.createContext(null),He=()=>C.useContext(ir);var Rt=(e,i,t,s=!0)=>{const l={defaultValues:i._defaultValues};for(const n in e)Object.defineProperty(l,n,{get:()=>{const c=n;return i._proxyFormState[c]!==K.all&&(i._proxyFormState[c]=!s||K.all),t&&(t[c]=!0),e[c]}});return l},W=e=>V(e)&&!Object.keys(e).length,At=(e,i,t,s)=>{t(e);const{name:l,...n}=e;return W(n)||Object.keys(n).length>=Object.keys(i).length||Object.keys(n).find(c=>i[c]===(!s||K.all))},xe=e=>Array.isArray(e)?e:[e],_t=(e,i,t)=>!e||!i||e===i||xe(e).some(s=>s&&(t?s===i:s.startsWith(i)||i.startsWith(s)));function Ue(e){const i=C.useRef(e);i.current=e,C.useEffect(()=>{const t=!e.disabled&&i.current.subject&&i.current.subject.subscribe({next:i.current.next});return()=>{t&&t.unsubscribe()}},[e.disabled])}function sr(e){const i=He(),{control:t=i.control,disabled:s,name:l,exact:n}=e||{},[c,m]=C.useState(t._formState),w=C.useRef(!0),A=C.useRef({isDirty:!1,isLoading:!1,dirtyFields:!1,touchedFields:!1,validatingFields:!1,isValidating:!1,isValid:!1,errors:!1}),S=C.useRef(l);return S.current=l,Ue({disabled:s,next:h=>w.current&&_t(S.current,h.name,n)&&At(h,A.current,t._updateFormState)&&m({...t._formState,...h}),subject:t._subjects.state}),C.useEffect(()=>(w.current=!0,A.current.isValid&&t._updateValid(!0),()=>{w.current=!1}),[t]),C.useMemo(()=>Rt(c,t,A.current,!1),[c,t])}var X=e=>typeof e=="string",Vt=(e,i,t,s,l)=>X(e)?(s&&i.watch.add(e),f(t,e,l)):Array.isArray(e)?e.map(n=>(s&&i.watch.add(n),f(t,n))):(s&&(i.watchAll=!0),t);function ar(e){const i=He(),{control:t=i.control,name:s,defaultValue:l,disabled:n,exact:c}=e||{},m=C.useRef(s);m.current=s,Ue({disabled:n,subject:t._subjects.values,next:S=>{_t(m.current,S.name,c)&&A(U(Vt(m.current,t._names,S.values||t._formValues,!1,l)))}});const[w,A]=C.useState(t._getWatch(s,l));return C.useEffect(()=>t._removeUnmounted()),w}function lr(e){const i=He(),{name:t,disabled:s,control:l=i.control,shouldUnregister:n}=e,c=kt(l._names.array,t),m=ar({control:l,name:t,defaultValue:f(l._formValues,t,f(l._defaultValues,t,e.defaultValue)),exact:!0}),w=sr({control:l,name:t,exact:!0}),A=C.useRef(l.register(t,{...e.rules,value:m,...Y(e.disabled)?{disabled:e.disabled}:{}})),S=C.useMemo(()=>Object.defineProperties({},{invalid:{enumerable:!0,get:()=>!!f(w.errors,t)},isDirty:{enumerable:!0,get:()=>!!f(w.dirtyFields,t)},isTouched:{enumerable:!0,get:()=>!!f(w.touchedFields,t)},isValidating:{enumerable:!0,get:()=>!!f(w.validatingFields,t)},error:{enumerable:!0,get:()=>f(w.errors,t)}}),[w,t]),h=C.useMemo(()=>({name:t,value:m,...Y(s)||w.disabled?{disabled:w.disabled||s}:{},onChange:B=>A.current.onChange({target:{value:Ft(B),name:t},type:Ae.CHANGE}),onBlur:()=>A.current.onBlur({target:{value:f(l._formValues,t),name:t},type:Ae.BLUR}),ref:B=>{const $=f(l._fields,t);$&&B&&($._f.ref={focus:()=>B.focus(),select:()=>B.select(),setCustomValidity:E=>B.setCustomValidity(E),reportValidity:()=>B.reportValidity()})}}),[t,l._formValues,s,w.disabled,m,l._fields]);return C.useEffect(()=>{const B=l._options.shouldUnregister||n,$=(E,T)=>{const p=f(l._fields,E);p&&p._f&&(p._f.mount=T)};if($(t,!0),B){const E=U(f(l._options.defaultValues,t));R(l._defaultValues,t,E),_(f(l._formValues,t))&&R(l._formValues,t,E)}return!c&&l.register(t),()=>{(c?B&&!l._state.action:B)?l.unregister(t):$(t,!1)}},[t,l,c,n]),C.useEffect(()=>{l._updateDisabledField({disabled:s,fields:l._fields,name:t})},[s,t,l]),C.useMemo(()=>({field:h,formState:w,fieldState:S}),[h,w,S])}const fe=e=>e.render(lr(e));var nr=(e,i,t,s,l)=>i?{...t[e],types:{...t[e]&&t[e].types?t[e].types:{},[s]:l||!0}}:{},ot=e=>({isOnSubmit:!e||e===K.onSubmit,isOnBlur:e===K.onBlur,isOnChange:e===K.onChange,isOnAll:e===K.all,isOnTouch:e===K.onTouched}),ut=(e,i,t)=>!t&&(i.watchAll||i.watch.has(e)||[...i.watch].some(s=>e.startsWith(s)&&/^\.\w+/.test(e.slice(s.length))));const we=(e,i,t,s)=>{for(const l of t||Object.keys(e)){const n=f(e,l);if(n){const{_f:c,...m}=n;if(c){if(c.refs&&c.refs[0]&&i(c.refs[0],l)&&!s)return!0;if(c.ref&&i(c.ref,c.name)&&!s)return!0;if(we(m,i))break}else if(V(m)&&we(m,i))break}}};var or=(e,i,t)=>{const s=xe(f(e,t));return R(s,"root",i[t]),R(e,t,s),e},We=e=>e.type==="file",Q=e=>typeof e=="function",_e=e=>{if(!Oe)return!1;const i=e?e.ownerDocument:0;return e instanceof(i&&i.defaultView?i.defaultView.HTMLElement:HTMLElement)},Re=e=>X(e),$e=e=>e.type==="radio",Ve=e=>e instanceof RegExp;const ct={value:!1,isValid:!1},dt={value:!0,isValid:!0};var Bt=e=>{if(Array.isArray(e)){if(e.length>1){const i=e.filter(t=>t&&t.checked&&!t.disabled).map(t=>t.value);return{value:i,isValid:!!i.length}}return e[0].checked&&!e[0].disabled?e[0].attributes&&!_(e[0].attributes.value)?_(e[0].value)||e[0].value===""?dt:{value:e[0].value,isValid:!0}:dt:ct}return ct};const ft={isValid:!1,value:null};var Et=e=>Array.isArray(e)?e.reduce((i,t)=>t&&t.checked&&!t.disabled?{isValid:!0,value:t.value}:i,ft):ft;function mt(e,i,t="validate"){if(Re(e)||Array.isArray(e)&&e.every(Re)||Y(e)&&!e)return{type:t,message:Re(e)?e:"",ref:i}}var me=e=>V(e)&&!Ve(e)?e:{value:e,message:""},gt=async(e,i,t,s,l,n)=>{const{ref:c,refs:m,required:w,maxLength:A,minLength:S,min:h,max:B,pattern:$,validate:E,name:T,valueAsNumber:p,mount:P}=e._f,F=f(t,T);if(!P||i.has(T))return{};const ee=m?m[0]:c,te=x=>{l&&ee.reportValidity&&(ee.setCustomValidity(Y(x)?"":x||""),ee.reportValidity())},L={},ce=$e(c),Fe=Se(c),le=ce||Fe,de=(p||We(c))&&_(c.value)&&_(F)||_e(c)&&c.value===""||F===""||Array.isArray(F)&&!F.length,J=nr.bind(null,T,s,L),ke=(x,k,D,N=ie.maxLength,G=ie.minLength)=>{const z=x?k:D;L[T]={type:x?N:G,message:z,ref:c,...J(x?N:G,z)}};if(n?!Array.isArray(F)||!F.length:w&&(!le&&(de||H(F))||Y(F)&&!F||Fe&&!Bt(m).isValid||ce&&!Et(m).isValid)){const{value:x,message:k}=Re(w)?{value:!!w,message:w}:me(w);if(x&&(L[T]={type:ie.required,message:k,ref:ee,...J(ie.required,k)},!s))return te(k),L}if(!de&&(!H(h)||!H(B))){let x,k;const D=me(B),N=me(h);if(!H(F)&&!isNaN(F)){const G=c.valueAsNumber||F&&+F;H(D.value)||(x=G>D.value),H(N.value)||(k=G<N.value)}else{const G=c.valueAsDate||new Date(F),z=ve=>new Date(new Date().toDateString()+" "+ve),ge=c.type=="time",ye=c.type=="week";X(D.value)&&F&&(x=ge?z(F)>z(D.value):ye?F>D.value:G>new Date(D.value)),X(N.value)&&F&&(k=ge?z(F)<z(N.value):ye?F<N.value:G<new Date(N.value))}if((x||k)&&(ke(!!x,D.message,N.message,ie.max,ie.min),!s))return te(L[T].message),L}if((A||S)&&!de&&(X(F)||n&&Array.isArray(F))){const x=me(A),k=me(S),D=!H(x.value)&&F.length>+x.value,N=!H(k.value)&&F.length<+k.value;if((D||N)&&(ke(D,x.message,k.message),!s))return te(L[T].message),L}if($&&!de&&X(F)){const{value:x,message:k}=me($);if(Ve(x)&&!F.match(x)&&(L[T]={type:ie.pattern,message:k,ref:c,...J(ie.pattern,k)},!s))return te(k),L}if(E){if(Q(E)){const x=await E(F,t),k=mt(x,ee);if(k&&(L[T]={...k,...J(ie.validate,k.message)},!s))return te(k.message),L}else if(V(E)){let x={};for(const k in E){if(!W(x)&&!s)break;const D=mt(await E[k](F,t),ee,k);D&&(x={...D,...J(k,D.message)},te(D.message),s&&(L[T]=x))}if(!W(x)&&(L[T]={ref:ee,...x},!s))return L}}return te(!0),L};function ur(e,i){const t=i.slice(0,-1).length;let s=0;for(;s<t;)e=_(e)?s++:e[i[s++]];return e}function cr(e){for(const i in e)if(e.hasOwnProperty(i)&&!_(e[i]))return!1;return!0}function j(e,i){const t=Array.isArray(i)?i:Ne(i)?[i]:Ct(i),s=t.length===1?e:ur(e,t),l=t.length-1,n=t[l];return s&&delete s[n],l!==0&&(V(s)&&W(s)||Array.isArray(s)&&cr(s))&&j(e,t.slice(0,-1)),e}var je=()=>{let e=[];return{get observers(){return e},next:l=>{for(const n of e)n.next&&n.next(l)},subscribe:l=>(e.push(l),{unsubscribe:()=>{e=e.filter(n=>n!==l)}}),unsubscribe:()=>{e=[]}}},Ie=e=>H(e)||!St(e);function ae(e,i){if(Ie(e)||Ie(i))return e===i;if(ue(e)&&ue(i))return e.getTime()===i.getTime();const t=Object.keys(e),s=Object.keys(i);if(t.length!==s.length)return!1;for(const l of t){const n=e[l];if(!s.includes(l))return!1;if(l!=="ref"){const c=i[l];if(ue(n)&&ue(c)||V(n)&&V(c)||Array.isArray(n)&&Array.isArray(c)?!ae(n,c):n!==c)return!1}}return!0}var Pt=e=>e.type==="select-multiple",dr=e=>$e(e)||Se(e),Te=e=>_e(e)&&e.isConnected,Lt=e=>{for(const i in e)if(Q(e[i]))return!0;return!1};function Be(e,i={}){const t=Array.isArray(e);if(V(e)||t)for(const s in e)Array.isArray(e[s])||V(e[s])&&!Lt(e[s])?(i[s]=Array.isArray(e[s])?[]:{},Be(e[s],i[s])):H(e[s])||(i[s]=!0);return i}function Dt(e,i,t){const s=Array.isArray(e);if(V(e)||s)for(const l in e)Array.isArray(e[l])||V(e[l])&&!Lt(e[l])?_(i)||Ie(t[l])?t[l]=Array.isArray(e[l])?Be(e[l],[]):{...Be(e[l])}:Dt(e[l],H(i)?{}:i[l],t[l]):t[l]=!ae(e[l],i[l]);return t}var he=(e,i)=>Dt(e,i,Be(i)),Mt=(e,{valueAsNumber:i,valueAsDate:t,setValueAs:s})=>_(e)?e:i?e===""?NaN:e&&+e:t&&X(e)?new Date(e):s?s(e):e;function qe(e){const i=e.ref;return We(i)?i.files:$e(i)?Et(e.refs).value:Pt(i)?[...i.selectedOptions].map(({value:t})=>t):Se(i)?Bt(e.refs).value:Mt(_(i.value)?e.ref.value:i.value,e)}var fr=(e,i,t,s)=>{const l={};for(const n of e){const c=f(i,n);c&&R(l,n,c._f)}return{criteriaMode:t,names:[...e],fields:l,shouldUseNativeValidation:s}},pe=e=>_(e)?e:Ve(e)?e.source:V(e)?Ve(e.value)?e.value.source:e.value:e;const yt="AsyncFunction";var mr=e=>!!e&&!!e.validate&&!!(Q(e.validate)&&e.validate.constructor.name===yt||V(e.validate)&&Object.values(e.validate).find(i=>i.constructor.name===yt)),gr=e=>e.mount&&(e.required||e.min||e.max||e.maxLength||e.minLength||e.pattern||e.validate);function vt(e,i,t){const s=f(e,t);if(s||Ne(t))return{error:s,name:t};const l=t.split(".");for(;l.length;){const n=l.join("."),c=f(i,n),m=f(e,n);if(c&&!Array.isArray(c)&&t!==n)return{name:t};if(m&&m.type)return{name:n,error:m};l.pop()}return{name:t}}var yr=(e,i,t,s,l)=>l.isOnAll?!1:!t&&l.isOnTouch?!(i||e):(t?s.isOnBlur:l.isOnBlur)?!e:(t?s.isOnChange:l.isOnChange)?e:!0,vr=(e,i)=>!Ee(f(e,i)).length&&j(e,i);const hr={mode:K.onSubmit,reValidateMode:K.onChange,shouldFocusError:!0};function pr(e={}){let i={...hr,...e},t={submitCount:0,isDirty:!1,isLoading:Q(i.defaultValues),isValidating:!1,isSubmitted:!1,isSubmitting:!1,isSubmitSuccessful:!1,isValid:!1,touchedFields:{},dirtyFields:{},validatingFields:{},errors:i.errors||{},disabled:i.disabled||!1},s={},l=V(i.defaultValues)||V(i.values)?U(i.defaultValues||i.values)||{}:{},n=i.shouldUnregister?{}:U(l),c={action:!1,mount:!1,watch:!1},m={mount:new Set,disabled:new Set,unMount:new Set,array:new Set,watch:new Set},w,A=0;const S={isDirty:!1,dirtyFields:!1,validatingFields:!1,touchedFields:!1,isValidating:!1,isValid:!1,errors:!1},h={values:je(),array:je(),state:je()},B=ot(i.mode),$=ot(i.reValidateMode),E=i.criteriaMode===K.all,T=r=>a=>{clearTimeout(A),A=setTimeout(r,a)},p=async r=>{if(!i.disabled&&(S.isValid||r)){const a=i.resolver?W((await le()).errors):await J(s,!0);a!==t.isValid&&h.state.next({isValid:a})}},P=(r,a)=>{!i.disabled&&(S.isValidating||S.validatingFields)&&((r||Array.from(m.mount)).forEach(o=>{o&&(a?R(t.validatingFields,o,a):j(t.validatingFields,o))}),h.state.next({validatingFields:t.validatingFields,isValidating:!W(t.validatingFields)}))},F=(r,a=[],o,g,d=!0,u=!0)=>{if(g&&o&&!i.disabled){if(c.action=!0,u&&Array.isArray(f(s,r))){const v=o(f(s,r),g.argA,g.argB);d&&R(s,r,v)}if(u&&Array.isArray(f(t.errors,r))){const v=o(f(t.errors,r),g.argA,g.argB);d&&R(t.errors,r,v),vr(t.errors,r)}if(S.touchedFields&&u&&Array.isArray(f(t.touchedFields,r))){const v=o(f(t.touchedFields,r),g.argA,g.argB);d&&R(t.touchedFields,r,v)}S.dirtyFields&&(t.dirtyFields=he(l,n)),h.state.next({name:r,isDirty:x(r,a),dirtyFields:t.dirtyFields,errors:t.errors,isValid:t.isValid})}else R(n,r,a)},ee=(r,a)=>{R(t.errors,r,a),h.state.next({errors:t.errors})},te=r=>{t.errors=r,h.state.next({errors:t.errors,isValid:!1})},L=(r,a,o,g)=>{const d=f(s,r);if(d){const u=f(n,r,_(o)?f(l,r):o);_(u)||g&&g.defaultChecked||a?R(n,r,a?u:qe(d._f)):N(r,u),c.mount&&p()}},ce=(r,a,o,g,d)=>{let u=!1,v=!1;const b={name:r};if(!i.disabled){const q=!!(f(s,r)&&f(s,r)._f&&f(s,r)._f.disabled);if(!o||g){S.isDirty&&(v=t.isDirty,t.isDirty=b.isDirty=x(),u=v!==b.isDirty);const I=q||ae(f(l,r),a);v=!!(!q&&f(t.dirtyFields,r)),I||q?j(t.dirtyFields,r):R(t.dirtyFields,r,!0),b.dirtyFields=t.dirtyFields,u=u||S.dirtyFields&&v!==!I}if(o){const I=f(t.touchedFields,r);I||(R(t.touchedFields,r,o),b.touchedFields=t.touchedFields,u=u||S.touchedFields&&I!==o)}u&&d&&h.state.next(b)}return u?b:{}},Fe=(r,a,o,g)=>{const d=f(t.errors,r),u=S.isValid&&Y(a)&&t.isValid!==a;if(i.delayError&&o?(w=T(()=>ee(r,o)),w(i.delayError)):(clearTimeout(A),w=null,o?R(t.errors,r,o):j(t.errors,r)),(o?!ae(d,o):d)||!W(g)||u){const v={...g,...u&&Y(a)?{isValid:a}:{},errors:t.errors,name:r};t={...t,...v},h.state.next(v)}},le=async r=>{P(r,!0);const a=await i.resolver(n,i.context,fr(r||m.mount,s,i.criteriaMode,i.shouldUseNativeValidation));return P(r),a},de=async r=>{const{errors:a}=await le(r);if(r)for(const o of r){const g=f(a,o);g?R(t.errors,o,g):j(t.errors,o)}else t.errors=a;return a},J=async(r,a,o={valid:!0})=>{for(const g in r){const d=r[g];if(d){const{_f:u,...v}=d;if(u){const b=m.array.has(u.name),q=d._f&&mr(d._f);q&&S.validatingFields&&P([g],!0);const I=await gt(d,m.disabled,n,E,i.shouldUseNativeValidation&&!a,b);if(q&&S.validatingFields&&P([g]),I[u.name]&&(o.valid=!1,a))break;!a&&(f(I,u.name)?b?or(t.errors,I,u.name):R(t.errors,u.name,I[u.name]):j(t.errors,u.name))}!W(v)&&await J(v,a,o)}}return o.valid},ke=()=>{for(const r of m.unMount){const a=f(s,r);a&&(a._f.refs?a._f.refs.every(o=>!Te(o)):!Te(a._f.ref))&&Pe(r)}m.unMount=new Set},x=(r,a)=>!i.disabled&&(r&&a&&R(n,r,a),!ae(Je(),l)),k=(r,a,o)=>Vt(r,m,{...c.mount?n:_(a)?l:X(r)?{[r]:a}:a},o,a),D=r=>Ee(f(c.mount?n:l,r,i.shouldUnregister?f(l,r,[]):[])),N=(r,a,o={})=>{const g=f(s,r);let d=a;if(g){const u=g._f;u&&(!u.disabled&&R(n,r,Mt(a,u)),d=_e(u.ref)&&H(a)?"":a,Pt(u.ref)?[...u.ref.options].forEach(v=>v.selected=d.includes(v.value)):u.refs?Se(u.ref)?u.refs.length>1?u.refs.forEach(v=>(!v.defaultChecked||!v.disabled)&&(v.checked=Array.isArray(d)?!!d.find(b=>b===v.value):d===v.value)):u.refs[0]&&(u.refs[0].checked=!!d):u.refs.forEach(v=>v.checked=v.value===d):We(u.ref)?u.ref.value="":(u.ref.value=d,u.ref.type||h.values.next({name:r,values:{...n}})))}(o.shouldDirty||o.shouldTouch)&&ce(r,d,o.shouldTouch,o.shouldDirty,!0),o.shouldValidate&&ve(r)},G=(r,a,o)=>{for(const g in a){const d=a[g],u=`${r}.${g}`,v=f(s,u);(m.array.has(r)||V(d)||v&&!v._f)&&!ue(d)?G(u,d,o):N(u,d,o)}},z=(r,a,o={})=>{const g=f(s,r),d=m.array.has(r),u=U(a);R(n,r,u),d?(h.array.next({name:r,values:{...n}}),(S.isDirty||S.dirtyFields)&&o.shouldDirty&&h.state.next({name:r,dirtyFields:he(l,n),isDirty:x(r,u)})):g&&!g._f&&!H(u)?G(r,u,o):N(r,u,o),ut(r,m)&&h.state.next({...t}),h.values.next({name:c.mount?r:void 0,values:{...n}})},ge=async r=>{c.mount=!0;const a=r.target;let o=a.name,g=!0;const d=f(s,o),u=()=>a.type?qe(d._f):Ft(r),v=b=>{g=Number.isNaN(b)||ue(b)&&isNaN(b.getTime())||ae(b,f(n,o,b))};if(d){let b,q;const I=u(),se=r.type===Ae.BLUR||r.type===Ae.FOCUS_OUT,Ot=!gr(d._f)&&!i.resolver&&!f(t.errors,o)&&!d._f.deps||yr(se,f(t.touchedFields,o),t.isSubmitted,$,B),De=ut(o,m,se);R(n,o,I),se?(d._f.onBlur&&d._f.onBlur(r),w&&w(0)):d._f.onChange&&d._f.onChange(r);const Me=ce(o,I,se,!1),Nt=!W(Me)||De;if(!se&&h.values.next({name:o,type:r.type,values:{...n}}),Ot)return S.isValid&&(i.mode==="onBlur"&&se?p():se||p()),Nt&&h.state.next({name:o,...De?{}:Me});if(!se&&De&&h.state.next({...t}),i.resolver){const{errors:et}=await le([o]);if(v(I),g){const Ht=vt(t.errors,s,o),tt=vt(et,s,Ht.name||o);b=tt.error,o=tt.name,q=W(et)}}else P([o],!0),b=(await gt(d,m.disabled,n,E,i.shouldUseNativeValidation))[o],P([o]),v(I),g&&(b?q=!1:S.isValid&&(q=await J(s,!0)));g&&(d._f.deps&&ve(d._f.deps),Fe(o,q,b,Me))}},ye=(r,a)=>{if(f(t.errors,a)&&r.focus)return r.focus(),1},ve=async(r,a={})=>{let o,g;const d=xe(r);if(i.resolver){const u=await de(_(r)?r:d);o=W(u),g=r?!d.some(v=>f(u,v)):o}else r?(g=(await Promise.all(d.map(async u=>{const v=f(s,u);return await J(v&&v._f?{[u]:v}:v)}))).every(Boolean),!(!g&&!t.isValid)&&p()):g=o=await J(s);return h.state.next({...!X(r)||S.isValid&&o!==t.isValid?{}:{name:r},...i.resolver||!r?{isValid:o}:{},errors:t.errors}),a.shouldFocus&&!g&&we(s,ye,r?d:m.mount),g},Je=r=>{const a={...c.mount?n:l};return _(r)?a:X(r)?f(a,r):r.map(o=>f(a,o))},ze=(r,a)=>({invalid:!!f((a||t).errors,r),isDirty:!!f((a||t).dirtyFields,r),error:f((a||t).errors,r),isValidating:!!f(t.validatingFields,r),isTouched:!!f((a||t).touchedFields,r)}),jt=r=>{r&&xe(r).forEach(a=>j(t.errors,a)),h.state.next({errors:r?t.errors:{}})},Ye=(r,a,o)=>{const g=(f(s,r,{_f:{}})._f||{}).ref,d=f(t.errors,r)||{},{ref:u,message:v,type:b,...q}=d;R(t.errors,r,{...q,...a,ref:g}),h.state.next({name:r,errors:t.errors,isValid:!1}),o&&o.shouldFocus&&g&&g.focus&&g.focus()},Tt=(r,a)=>Q(r)?h.values.subscribe({next:o=>r(k(void 0,a),o)}):k(r,a,!0),Pe=(r,a={})=>{for(const o of r?xe(r):m.mount)m.mount.delete(o),m.array.delete(o),a.keepValue||(j(s,o),j(n,o)),!a.keepError&&j(t.errors,o),!a.keepDirty&&j(t.dirtyFields,o),!a.keepTouched&&j(t.touchedFields,o),!a.keepIsValidating&&j(t.validatingFields,o),!i.shouldUnregister&&!a.keepDefaultValue&&j(l,o);h.values.next({values:{...n}}),h.state.next({...t,...a.keepDirty?{isDirty:x()}:{}}),!a.keepIsValid&&p()},Ge=({disabled:r,name:a,field:o,fields:g})=>{(Y(r)&&c.mount||r||m.disabled.has(a))&&(r?m.disabled.add(a):m.disabled.delete(a),ce(a,qe(o?o._f:f(g,a)._f),!1,!1,!0))},Le=(r,a={})=>{let o=f(s,r);const g=Y(a.disabled)||Y(i.disabled);return R(s,r,{...o||{},_f:{...o&&o._f?o._f:{ref:{name:r}},name:r,mount:!0,...a}}),m.mount.add(r),o?Ge({field:o,disabled:Y(a.disabled)?a.disabled:i.disabled,name:r}):L(r,!0,a.value),{...g?{disabled:a.disabled||i.disabled}:{},...i.progressive?{required:!!a.required,min:pe(a.min),max:pe(a.max),minLength:pe(a.minLength),maxLength:pe(a.maxLength),pattern:pe(a.pattern)}:{},name:r,onChange:ge,onBlur:ge,ref:d=>{if(d){Le(r,a),o=f(s,r);const u=_(d.value)&&d.querySelectorAll&&d.querySelectorAll("input,select,textarea")[0]||d,v=dr(u),b=o._f.refs||[];if(v?b.find(q=>q===u):u===o._f.ref)return;R(s,r,{_f:{...o._f,...v?{refs:[...b.filter(Te),u,...Array.isArray(f(l,r))?[{}]:[]],ref:{type:u.type,name:r}}:{ref:u}}}),L(r,!1,void 0,u)}else o=f(s,r,{}),o._f&&(o._f.mount=!1),(i.shouldUnregister||a.shouldUnregister)&&!(kt(m.array,r)&&c.action)&&m.unMount.add(r)}}},Ke=()=>i.shouldFocusError&&we(s,ye,m.mount),qt=r=>{Y(r)&&(h.state.next({disabled:r}),we(s,(a,o)=>{const g=f(s,o);g&&(a.disabled=g._f.disabled||r,Array.isArray(g._f.refs)&&g._f.refs.forEach(d=>{d.disabled=g._f.disabled||r}))},0,!1))},Ze=(r,a)=>async o=>{let g;o&&(o.preventDefault&&o.preventDefault(),o.persist&&o.persist());let d=U(n);if(m.disabled.size)for(const u of m.disabled)R(d,u,void 0);if(h.state.next({isSubmitting:!0}),i.resolver){const{errors:u,values:v}=await le();t.errors=u,d=v}else await J(s);if(j(t.errors,"root"),W(t.errors)){h.state.next({errors:{}});try{await r(d,o)}catch(u){g=u}}else a&&await a({...t.errors},o),Ke(),setTimeout(Ke);if(h.state.next({isSubmitted:!0,isSubmitting:!1,isSubmitSuccessful:W(t.errors)&&!g,submitCount:t.submitCount+1,errors:t.errors}),g)throw g},It=(r,a={})=>{f(s,r)&&(_(a.defaultValue)?z(r,U(f(l,r))):(z(r,a.defaultValue),R(l,r,U(a.defaultValue))),a.keepTouched||j(t.touchedFields,r),a.keepDirty||(j(t.dirtyFields,r),t.isDirty=a.defaultValue?x(r,U(f(l,r))):x()),a.keepError||(j(t.errors,r),S.isValid&&p()),h.state.next({...t}))},Qe=(r,a={})=>{const o=r?U(r):l,g=U(o),d=W(r),u=d?l:g;if(a.keepDefaultValues||(l=o),!a.keepValues){if(a.keepDirtyValues){const v=new Set([...m.mount,...Object.keys(he(l,n))]);for(const b of Array.from(v))f(t.dirtyFields,b)?R(u,b,f(n,b)):z(b,f(u,b))}else{if(Oe&&_(r))for(const v of m.mount){const b=f(s,v);if(b&&b._f){const q=Array.isArray(b._f.refs)?b._f.refs[0]:b._f.ref;if(_e(q)){const I=q.closest("form");if(I){I.reset();break}}}}s={}}n=i.shouldUnregister?a.keepDefaultValues?U(l):{}:U(u),h.array.next({values:{...u}}),h.values.next({values:{...u}})}m={mount:a.keepDirtyValues?m.mount:new Set,unMount:new Set,array:new Set,disabled:new Set,watch:new Set,watchAll:!1,focus:""},c.mount=!S.isValid||!!a.keepIsValid||!!a.keepDirtyValues,c.watch=!!i.shouldUnregister,h.state.next({submitCount:a.keepSubmitCount?t.submitCount:0,isDirty:d?!1:a.keepDirty?t.isDirty:!!(a.keepDefaultValues&&!ae(r,l)),isSubmitted:a.keepIsSubmitted?t.isSubmitted:!1,dirtyFields:d?{}:a.keepDirtyValues?a.keepDefaultValues&&n?he(l,n):t.dirtyFields:a.keepDefaultValues&&r?he(l,r):a.keepDirty?t.dirtyFields:{},touchedFields:a.keepTouched?t.touchedFields:{},errors:a.keepErrors?t.errors:{},isSubmitSuccessful:a.keepIsSubmitSuccessful?t.isSubmitSuccessful:!1,isSubmitting:!1})},Xe=(r,a)=>Qe(Q(r)?r(n):r,a);return{control:{register:Le,unregister:Pe,getFieldState:ze,handleSubmit:Ze,setError:Ye,_executeSchema:le,_getWatch:k,_getDirty:x,_updateValid:p,_removeUnmounted:ke,_updateFieldArray:F,_updateDisabledField:Ge,_getFieldArray:D,_reset:Qe,_resetDefaultValues:()=>Q(i.defaultValues)&&i.defaultValues().then(r=>{Xe(r,i.resetOptions),h.state.next({isLoading:!1})}),_updateFormState:r=>{t={...t,...r}},_disableForm:qt,_subjects:h,_proxyFormState:S,_setErrors:te,get _fields(){return s},get _formValues(){return n},get _state(){return c},set _state(r){c=r},get _defaultValues(){return l},get _names(){return m},set _names(r){m=r},get _formState(){return t},set _formState(r){t=r},get _options(){return i},set _options(r){i={...i,...r}}},trigger:ve,register:Le,handleSubmit:Ze,watch:Tt,setValue:z,getValues:Je,reset:Xe,resetField:It,clearErrors:jt,unregister:Pe,setError:Ye,setFocus:(r,a={})=>{const o=f(s,r),g=o&&o._f;if(g){const d=g.refs?g.refs[0]:g.ref;d.focus&&(d.focus(),a.shouldSelect&&Q(d.select)&&d.select())}},getFieldState:ze}}function br(e={}){const i=C.useRef(void 0),t=C.useRef(void 0),[s,l]=C.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,defaultValues:Q(e.defaultValues)?void 0:e.defaultValues});i.current||(i.current={...pr(e),formState:s});const n=i.current.control;return n._options=e,Ue({subject:n._subjects.state,next:c=>{At(c,n._proxyFormState,n._updateFormState,!0)&&l({...n._formState})}}),C.useEffect(()=>n._disableForm(e.disabled),[n,e.disabled]),C.useEffect(()=>{if(n._proxyFormState.isDirty){const c=n._getDirty();c!==s.isDirty&&n._subjects.state.next({isDirty:c})}},[n,s.isDirty]),C.useEffect(()=>{e.values&&!ae(e.values,t.current)?(n._reset(e.values,n._options.resetOptions),t.current=e.values,l(c=>({...c}))):n._resetDefaultValues()},[e.values,n]),C.useEffect(()=>{e.errors&&n._setErrors(e.errors)},[e.errors,n]),C.useEffect(()=>{n._state.mount||(n._updateValid(),n._state.mount=!0),n._state.watch&&(n._state.watch=!1,n._subjects.state.next({...n._formState})),n._removeUnmounted()}),C.useEffect(()=>{e.shouldUnregister&&n._subjects.values.next({values:n._getWatch()})},[e.shouldUnregister,n]),i.current.formState=Rt(s,n),i.current}const ki={title:"Guides/Integration with React Hook Form",args:{onSubmit:Ut(e=>{console.log("Form submitted:",e)})}},be={render:function(i){const t=()=>{var w,A,S,h,B,$,E,T;const{register:s,handleSubmit:l,formState:{errors:n},reset:c,control:m}=br({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"]}});return y.jsx("div",{style:{maxWidth:"600px",margin:"0 auto",padding:"20px"},children:y.jsxs(it,{direction:"column",gap:"16",children:[y.jsx(Wt,{variant:"extraLarge",tag:"h1",children:"User Registration Form"}),y.jsxs("form",{onSubmit:l(i.onSubmit),style:{display:"contents"},noValidate:!0,children:[y.jsx(st,{label:"Full Name",...s("fullName",{required:"Full name is required"}),error:(w=n.fullName)==null?void 0:w.message,required:!0}),y.jsx(st,{label:"Email",type:"email",...s("email",{required:"Email is required"}),error:(A=n.email)==null?void 0:A.message,required:!0}),y.jsx($t,{label:"Age",...s("age",{valueAsNumber:!0,required:"Age is required",min:{value:18,message:"You must be at least 18 years old"}}),min:18,max:120,error:(S=n.age)==null?void 0:S.message,required:!0}),y.jsxs(Jt,{label:"Country",placeholder:"",...s("country",{required:"Country is required"}),error:(h=n.country)==null?void 0:h.message,required:!0,children:[y.jsx(Z,{value:"us",children:"United States"}),y.jsx(Z,{value:"ca",children:"Canada"}),y.jsx(Z,{value:"uk",children:"United Kingdom"}),y.jsx(Z,{value:"de",children:"Germany"}),y.jsx(Z,{value:"fr",children:"France"}),y.jsx(Z,{value:"it",children:"Italy"}),y.jsx(Z,{value:"es",children:"Spain"}),y.jsx(Z,{value:"au",children:"Australia"}),y.jsx(Z,{value:"jp",children:"Japan"}),y.jsx(Z,{value:"other",children:"Other"})]}),y.jsx(at,{label:"Password",...s("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:(B=n.password)==null?void 0:B.message,required:!0}),y.jsx(at,{label:"Confirm Password",...s("confirmPassword",{required:"Please confirm your password",validate:(p,P)=>p===P.password||"Passwords do not match"}),error:($=n.confirmPassword)==null?void 0:$.message,required:!0}),y.jsx(zt,{label:"Bio",...s("bio",{maxLength:{value:500,message:"Bio must be less than 500 characters"}}),error:(E=n.bio)==null?void 0:E.message}),y.jsx(fe,{name:"experienceLevel",control:m,rules:{validate:{minValue:p=>p<50?"Must be above 50":!0}},render:({field:p})=>{var P;return y.jsx(ne,{label:"Experience Level",error:(P=n.experienceLevel)==null?void 0:P.message,children:y.jsx(Yt,{value:p.value,onValueChange:p.onChange,min:0,max:100,"aria-label":"Experience Level"})})}}),y.jsx(fe,{name:"priceRange",control:m,rules:{validate:{minValue:([p])=>p<=25?"Minimum must be above 25":!0,maxValue:([,p])=>p>=75?"Maximum must be below 75":!0}},render:({field:p})=>{var P;return y.jsx(ne,{label:"Price",error:(P=n.priceRange)==null?void 0:P.message,children:y.jsx(Gt,{value:p.value,onValueChange:p.onChange,min:0,max:100,"aria-label":"Price Range"})})}}),y.jsx(fe,{name:"emailNotifications",control:m,render:({field:p})=>{var P;return y.jsx(ne,{label:"Email Notifications",description:"Receive updates and newsletters via email",error:(P=n.emailNotifications)==null?void 0:P.message,children:y.jsx(Kt,{checked:p.value,onCheckedChange:p.onChange,"aria-label":"Email Notifications"})})}}),y.jsx(fe,{control:m,name:"englishLevel",rules:{required:"English level is required"},render:({field:p})=>y.jsx(ne,{label:"English Level",required:!0,children:y.jsxs(Zt,{"aria-label":"English Level",value:p.value,onValueChange:p.onChange,children:[y.jsx(oe,{value:"a0",children:"A0"}),y.jsx(oe,{value:"a1",children:"A1"}),y.jsx(oe,{value:"a2",children:"A2"}),y.jsx(oe,{value:"b1",children:"B1"}),y.jsx(oe,{value:"b2",children:"B2"}),y.jsx(oe,{value:"c1",children:"C1"}),y.jsx(oe,{value:"c2",children:"C2"})]})})}),y.jsx(fe,{control:m,name:"skills",rules:{required:"Skills are required"},render:({field:p})=>y.jsx(ne,{label:"Skills",required:!0,children:y.jsxs(Qt,{"aria-label":"Skills",value:p.value,onValueChange:p.onChange,children:[y.jsx(Ce,{value:"vocabulary",children:"Vocabulary"}),y.jsx(Ce,{value:"speaking",children:"Speaking"}),y.jsx(Ce,{value:"listening",children:"Listening"}),y.jsx(Ce,{value:"reading",children:"Reading"})]})})}),y.jsx(fe,{control:m,name:"marketing",rules:{required:"Marketing is required"},render:({field:p})=>y.jsx(ne,{label:"Marketing",description:"How do you want to receive marketing communications?",required:!0,children:y.jsxs(Xt,{"aria-label":"Marketing",value:p.value,onValueChange:p.onChange,children:[y.jsx(lt,{value:"emails",children:"Marketing emails"}),y.jsx(lt,{value:"push",children:"Push notifications"})]})})}),y.jsx(ne,{label:"Accept Privacy Policy",description:"I accept the Privacy Policy",error:(T=n.privacyPolicyAccepted)==null?void 0:T.message,hideLabel:!0,children:y.jsx(er,{...s("privacyPolicyAccepted",{required:"You must accept the Privacy Policy"})})}),y.jsxs(it,{gap:"12",padding:["20","0","0"],justifyContent:"end",children:[y.jsx(nt,{onClick:()=>c(),variant:"secondary",children:"Reset"}),y.jsx(nt,{submitsForm:!0,children:"Submit"})]})]})]})})};return y.jsx(t,{})},play:async({args:e,canvasElement:i,step:t})=>{const s=re(i);await t("Fill full name field",async()=>{await M.type(s.getByRole("textbox",{name:"Full Name"}),"John Doe")}),await t("Fill email field",async()=>{await M.type(s.getByRole("textbox",{name:"Email"}),"john.doe@example.com")}),await t("Fill age field",async()=>{await M.clear(s.getByRole("spinbutton",{name:"Age"})),await M.type(s.getByRole("spinbutton",{name:"Age"}),"25")}),await t("Fill country field",async()=>{await M.selectOptions(s.getByRole("combobox",{name:"Country"}),"us")}),await t("Fill password field",async()=>{await M.type(s.getByLabelText(/^Password/),"TestPassword123!")}),await t("Fill confirm password field",async()=>{await M.type(s.getByLabelText(/^Confirm Password/),"TestPassword123!")}),await t("Fill bio field",async()=>{await M.type(s.getByRole("textbox",{name:"Bio"}),"I am a software engineer with 5 years of experience.")}),await t("Move experience level slider",async()=>{s.getByRole("slider",{name:"Experience Level"}).focus(),await M.keyboard("{ArrowRight}".repeat(5))}),await t("Move price range slider minimum",async()=>{s.getByRole("slider",{name:"Minimum Price Range"}).focus(),await M.keyboard("{ArrowRight}".repeat(2))}),await t("Move price range slider maximum",async()=>{s.getByRole("slider",{name:"Maximum Price Range"}).focus(),await M.keyboard("{ArrowLeft}".repeat(2))}),await t("Select english level",async()=>{const l=s.getByRole("listbox",{name:"English Level"}),n=re(l).getByRole("option",{name:"B2"});await M.click(n)}),await t("Select reading skill",async()=>{const l=s.getByRole("listbox",{name:"Skills"}),n=re(l).getByRole("option",{name:"Reading"});await M.click(n)}),await t("Select listening skill",async()=>{const l=s.getByRole("listbox",{name:"Skills"}),n=re(l).getByRole("option",{name:"Listening"});await M.click(n)}),await t("Dismiss push notifications",async()=>{const l=s.getByRole("list",{name:"Marketing"}),n=re(l).getByRole("button",{name:"Remove Push notifications"});await M.click(n)}),await t("Accept privacy policy",async()=>{const l=s.getByRole("checkbox",{name:"Accept Privacy Policy"});await M.click(l)}),await t("Toggle email notifications",async()=>{await M.click(s.getByRole("switch",{name:"Email Notifications"}))}),await t("Submit the form",async()=>{await M.click(s.getByRole("button",{name:"Submit"}))}),await t("Assert that onSubmit was called with correct data",async()=>{await rt(()=>{O(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"]},O.anything())})}),await t("Reset the form",async()=>{await M.click(s.getByRole("button",{name:"Reset"}))}),await t("Assert all fields are cleared",async()=>{await rt(()=>{O(s.getByRole("textbox",{name:"Full Name"})).not.toHaveValue(),O(s.getByRole("textbox",{name:"Email"})).not.toHaveValue(),O(s.getByRole("spinbutton",{name:"Age"})).not.toHaveValue(),O(s.getByRole("combobox",{name:"Country"})).not.toHaveValue(),O(s.getByLabelText(/^Password/)).not.toHaveValue(),O(s.getByLabelText(/^Confirm Password/)).not.toHaveValue(),O(s.getByRole("textbox",{name:"Bio"})).not.toHaveValue(),O(s.getByRole("checkbox",{name:"Accept Privacy Policy"})).not.toBeChecked(),O(s.getByRole("switch",{name:"Email Notifications"})).toHaveAttribute("aria-checked","true"),O(s.getByRole("slider",{name:"Experience Level"})).toHaveAttribute("aria-valuenow","50"),O(s.getByRole("slider",{name:"Minimum Price Range"})).toHaveAttribute("aria-valuenow","25"),O(s.getByRole("slider",{name:"Maximum Price Range"})).toHaveAttribute("aria-valuenow","75");const l=s.getByRole("listbox",{name:"English Level"});re(l).getAllByRole("option").forEach(m=>{O(m).toHaveAttribute("aria-selected","false")});const n=s.getByRole("listbox",{name:"Skills"});re(n).getAllByRole("option").forEach(m=>{O(m).toHaveAttribute("aria-selected","false")});const c=s.getByRole("list",{name:"Marketing"});O(re(c).getByRole("button",{name:"Remove Marketing emails"})).toBeVisible(),O(re(c).getByRole("button",{name:"Remove Push notifications"})).toBeVisible()})})}};var ht,pt,bt,xt,wt;be.parameters={...be.parameters,docs:{...(ht=be.parameters)==null?void 0:ht.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']
+        }
+      });
+      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 />
+
+                            <SelectField label="Country" placeholder="" {...register('country', {
+              required: 'Country is required'
+            })} error={errors.country?.message} required>
+                                <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>
+
+                            <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 () => {
+      await userEvent.selectOptions(canvas.getByRole('combobox', {
+        name: 'Country'
+      }), 'us');
+    });
+    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'
+      }));
+    });
+    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']
+        }, 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();
+      });
+    });
+  }
+}`,...(bt=(pt=be.parameters)==null?void 0:pt.docs)==null?void 0:bt.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.`,...(wt=(xt=be.parameters)==null?void 0:xt.docs)==null?void 0:wt.description}}};const Ci=["IntegrationWithReactHookForm"];export{be as IntegrationWithReactHookForm,Ci as __namedExportsOrder,ki as default};

package/dist/assets/LayoutFlex-C3k4b85b.js

@@ -0,0 +1 @@
+import{j as F}from"./jsx-runtime-BTJTZTIL.js";import{r as N}from"./index-Cb9e4tly.js";import{f as U}from"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import{g as f,s as j,a as E,b as H}from"./layout-relative.module-ChaXrVQQ.js";import{f as $,g as G,L as k}from"./defaults-Clr6nbGc.js";import{g as J}from"./index-DdzHuZ-Y.js";import{w as B}from"./componentNames-NXEPEzbR.js";const t=void 0;function Y(a){const{nowrap:e}=a;return e?!0:t}function r(a){return JSON.stringify(a)}function M(a){const{direction:e,column:u,reverse:n}=a;return e===void 0?!n&&!u?{applyThrough:"direction",directionAttr:$}:{applyThrough:"columnReverse",columnReverseAttr:`${u?"column":"row"}-${n?"rev":"fwd"}`}:typeof e=="string"?{applyThrough:"direction",directionAttr:e}:{applyThrough:"direction",directionAttr:r(e)}}function W(a){const{justifyContent:e}=a;return e===void 0?t:typeof e=="string"?e:r(e)}function X(a){const{alignItems:e}=a;return e===void 0?t:typeof e=="string"?e:r(e)}function z(a){const{gap:e}=a;return e===void 0?t:typeof e=="string"?e:r(e)}function K(a){const{padding:e}=a;return e===void 0?{applyThrough:"attr",attr:G}:typeof e=="string"||typeof e=="number"?{applyThrough:"attr",attr:e}:Array.isArray(e)?{applyThrough:"classnames",classNames:f(e)}:r(e).includes("[")?{applyThrough:"classnames",classNames:f(e)}:{applyThrough:"attr",attr:JSON.stringify(e)}}function Q(a){const{hide:e,inline:u}=a;if(e===void 0)return t;const n=u?"inline-flex":"flex";if(typeof e=="boolean")return e?"hide":n;let l=r(e);return l=l.replace(/true/g,'"hide"'),l=l.replace(/false/g,`"${n}"`),l}function Z(a){const{relative:e}=a;return e===void 0?t:e===!0?!0:e===!1?t:r(e)}const ee={},m=N.forwardRef(function(e,u){const{gap:n,hide:l,column:o,nowrap:g,inline:y,dataset:h,reverse:A,padding:L,children:R,relative:x,direction:P,alignItems:T,justifyContent:w,tag:S=k,..._}=e,d=[ee.LayoutFlex,j.LayoutGap,E.LayoutHide,H.LayoutRelative],D=z({gap:n}),b=Y({nowrap:g}),q=Z({relative:x}),V=Q({hide:l,inline:y}),I=X({alignItems:T}),O=W({justifyContent:w});let v=t,p=t;const i=M({direction:P,column:o,reverse:A});i.applyThrough==="columnReverse"?p=i.columnReverseAttr:v=i.directionAttr;let c=t;const s=K({padding:L});s.applyThrough==="classnames"?d.push(...s.classNames):c=s.attr;const C={...U(_),ref:u,className:d.join(" "),"data-ds-gap":D,"data-ds-nowrap":b,"data-ds-padding":c,"data-ds-display":V,"data-ds-relative":q,"data-ds-direction":v,"data-ds-alignitems":I,"data-ds-columnreverse":p,"data-ds-justifycontent":O,...J(h,{preplyDsComponent:B.LayoutFlex})};return F.jsx(S,{...C,children:R})});try{m.displayName="LayoutFlex",m.__docgenInfo={description:"A CSS `flex` wrapper.",displayName:"LayoutFlex",props:{gap:{defaultValue:null,description:"",name:"gap",required:!1,type:{name:"enum",value:[{value:'"xs"'},{value:'"s"'},{value:'"m"'},{value:'"l"'},{value:'"xl"'},{value:'"2xs"'},{value:'"24"'},{value:'"32"'},{value:'"48"'},{value:'"64"'},{value:'"96"'},{value:'"160"'},{value:'"none"'},{value:'"3xs"'},{value:"ResponsiveProp<LayoutGap>"},{value:'"0"'},{value:'"1"'},{value:'"2"'},{value:'"4"'},{value:'"6"'},{value:'"8"'},{value:'"12"'},{value:'"16"'},{value:'"20"'},{value:"ResponsiveProp<Spacing>"}]}},padding:{defaultValue:null,description:"",name:"padding",required:!1,type:{name:"enum",value:[{value:'"xs"'},{value:'"s"'},{value:'"m"'},{value:'"l"'},{value:'"xl"'},{value:'"2xs"'},{value:'"24"'},{value:'"32"'},{value:'"48"'},{value:'"64"'},{value:'"96"'},{value:'"160"'},{value:'"none"'},{value:'"3xs"'},{value:'"0"'},{value:'"1"'},{value:'"2"'},{value:'"4"'},{value:'"6"'},{value:'"8"'},{value:'"12"'},{value:'"16"'},{value:'"20"'},{value:"[LayoutPadding, LayoutPadding]"},{value:"[LayoutPadding, LayoutPadding, LayoutPadding]"},{value:"[LayoutPadding, LayoutPadding, LayoutPadding, LayoutPadding]"},{value:"[Spacing, Spacing]"},{value:"[Spacing, Spacing, Spacing]"},{value:"[Spacing, Spacing, Spacing, Spacing]"},{value:"ResponsiveProp<ShortHand<LayoutPadding> | ShortHand<Spacing>>"}]}},nowrap:{defaultValue:null,description:"",name:"nowrap",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},column:{defaultValue:null,description:"@deprecated Use `direction` instead.",name:"column",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},reverse:{defaultValue:null,description:"@deprecated Use `direction` instead.",name:"reverse",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},direction:{defaultValue:null,description:"",name:"direction",required:!1,type:{name:"enum",value:[{value:'"column"'},{value:'"row"'},{value:'"row-reverse"'},{value:'"column-reverse"'},{value:"ResponsiveProp<LayoutFlexDirection>"}]}},justifyContent:{defaultValue:null,description:"",name:"justifyContent",required:!1,type:{name:"enum",value:[{value:'"center"'},{value:'"start"'},{value:'"end"'},{value:'"space-between"'},{value:'"space-around"'},{value:'"space-evenly"'},{value:"ResponsiveProp<LayoutJustifyContent>"}]}},alignItems:{defaultValue:null,description:"",name:"alignItems",required:!1,type:{name:"enum",value:[{value:'"center"'},{value:'"start"'},{value:'"end"'},{value:'"stretch"'},{value:'"baseline"'},{value:"ResponsiveProp<LayoutAlignItems>"}]}},tag:{defaultValue:null,description:"",name:"tag",required:!1,type:{name:"enum",value:[{value:'"p"'},{value:'"div"'},{value:'"span"'},{value:'"main"'},{value:'"header"'},{value:'"footer"'},{value:'"article"'},{value:'"section"'},{value:'"ul"'},{value:'"ol"'},{value:'"li"'},{value:'"fieldset"'},{value:'"table"'},{value:'"th"'},{value:'"tr"'},{value:'"td"'},{value:'"thead"'},{value:'"tfoot"'},{value:'"tbody"'},{value:'"caption"'},{value:'"figure"'},{value:'"figcaption"'}]}},hide:{defaultValue:null,description:"",name:"hide",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:"ResponsiveProp<boolean>"}]}},relative:{defaultValue:null,description:"",name:"relative",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:"ResponsiveProp<boolean>"}]}},inline:{defaultValue:null,description:"",name:"inline",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: HTMLElement | null) => void"},{value:"RefObject<HTMLElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}export{m as L};