@preply/ds-docs 11.0.0 → 11.1.0

package/dist/assets/IntegrationWithReactHookForm.stories-9EImL3zR.js

@@ -1,467 +0,0 @@
-import{R as x,j as y}from"./iframe-B_74HtSc.js";import{s as Jt,R as Yt}from"./RatingInput.stories-BKAXF4Qv.js";import{L as rt}from"./LayoutFlex-DXRMJ9FH.js";import{H as zt}from"./Heading-Cj8Si45g.js";import{T as it}from"./TextField-BSJgR_zK.js";import{N as Kt}from"./NumberField-klmIiQAi.js";import{b as Gt,a as re}from"./SelectField-DU60q2LU.js";import{P as at}from"./PasswordField-BjqiXySY.js";import{T as Zt}from"./TextareaField-DUqOyVK5.js";import{F as oe}from"./FormControl-Zqf1cIwP.js";import{S as Qt}from"./Slider-B8ndK7PX.js";import{R as Xt}from"./RangeSlider-MZqvjtBp.js";import{S as er}from"./Switch-Dyoj_Z1P.js";import{a as tr,S as fe}from"./SingleSelectChips-CDtny-H7.js";import{a as rr,M as Re}from"./MultiSelectChips-CBnEtn4N.js";import{a as ir,D as st}from"./DismissibleChips-YCE2ttV-.js";import{C as ar}from"./Checkbox-U8uzIr-e.js";import{B as lt}from"./Button-C0Um_QuO.js";import"./preload-helper-Dp1pzeXC.js";import"./Stars-BSTkfC0i.js";import"./index-DIqvfT2b.js";import"./TokyoUIStarFilled-CF0iG37X.js";import"./render-icon-MT6RlyNs.js";import"./useControllableState-BB4EHwEp.js";import"./useStableCallback-D5P5kDx5.js";import"./componentNames-hc9KR2nX.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./layout-relative.module-BIZVul8q.js";import"./text-accent-BQ9POoE5.js";import"./text-centered-BEaaxMgl.js";import"./Input-DuW1_5SG.js";import"./InputContainer-Cmdo_xyq.js";import"./TokyoUIChevronDown-DiBNbDdz.js";import"./TokyoUICheckmark-BHJrELn_.js";import"./Icon-CC0yjdx9.js";import"./breakpoints-BfMlrtxE.js";import"./index-Cnv20V_M.js";import"./index-W3BB_3go.js";import"./TokyoUIEye-oyrTN--k.js";import"./FieldButton-DpHF49o_.js";import"./useMergeRefs-CFhXCqbA.js";import"./message-DJT5rp5J.js";import"./createRequiredContext-B3Arn9-D.js";import"./CountryFlag-D40CtNEa.js";import"./TokyoUIClose-BfMyMrDa.js";import"./VisuallyHidden-fvo3PSUE.js";import"./shared-strings-ThL9KyH0.js";import"./useMergeRefs-Caz9hOck.js";import"./ButtonBase-HkSfLFbE.js";import"./Spinner-8-RB4YZR.js";import"./useHostname-CbpnzdHv.js";import"./index-CC6DAVyL.js";var Se=e=>e.type==="checkbox",me=e=>e instanceof Date,J=e=>e==null;const Ct=e=>typeof e=="object";var T=e=>!J(e)&&!Array.isArray(e)&&Ct(e)&&!me(e),kt=e=>T(e)&&e.target?Se(e.target)?e.target.checked:e.target.value:e,sr=e=>e.substring(0,e.search(/\.\d+(\.|$)/))||e,Rt=(e,i)=>e.has(sr(i)),lr=e=>{const i=e.constructor&&e.constructor.prototype;return T(i)&&i.hasOwnProperty("isPrototypeOf")},Oe=typeof window<"u"&&typeof window.HTMLElement<"u"&&typeof document<"u";function O(e){let i;const t=Array.isArray(e),a=typeof FileList<"u"?e instanceof FileList:!1;if(e instanceof Date)i=new Date(e);else if(!(Oe&&(e instanceof Blob||a))&&(t||T(e)))if(i=t?[]:Object.create(Object.getPrototypeOf(e)),!t&&!lr(e))i=e;else for(const o in e)e.hasOwnProperty(o)&&(i[o]=O(e[o]));else return e;return i}var _e=e=>/^\w*$/.test(e),L=e=>e===void 0,Ie=e=>Array.isArray(e)?e.filter(Boolean):[],Ne=e=>Ie(e.replace(/["|']|\]/g,"").split(/\.|\[/)),m=(e,i,t)=>{if(!i||!T(e))return t;const a=(_e(i)?[i]:Ne(i)).reduce((o,l)=>J(o)?o:o[l],e);return L(a)||a===e?L(e[i])?t:e[i]:a},Y=e=>typeof e=="boolean",_=(e,i,t)=>{let a=-1;const o=_e(i)?[i]:Ne(i),l=o.length,u=l-1;for(;++a<l;){const c=o[a];let k=t;if(a!==u){const R=e[c];k=T(R)||Array.isArray(R)?R:isNaN(+o[a+1])?{}:[]}if(c==="__proto__"||c==="constructor"||c==="prototype")return;e[c]=k,e=e[c]}};const Ve={BLUR:"blur",FOCUS_OUT:"focusout",CHANGE:"change"},Z={onBlur:"onBlur",onChange:"onChange",onSubmit:"onSubmit",onTouched:"onTouched",all:"all"},ae={max:"max",min:"min",maxLength:"maxLength",minLength:"minLength",pattern:"pattern",required:"required",validate:"validate"},Vt=x.createContext(null);Vt.displayName="HookFormContext";const He=()=>x.useContext(Vt);var Et=(e,i,t,a=!0)=>{const o={defaultValues:i._defaultValues};for(const l in e)Object.defineProperty(o,l,{get:()=>{const u=l;return i._proxyFormState[u]!==Z.all&&(i._proxyFormState[u]=!a||Z.all),t&&(t[u]=!0),e[u]}});return o};const Ue=typeof window<"u"?x.useLayoutEffect:x.useEffect;function nr(e){const i=He(),{control:t=i.control,disabled:a,name:o,exact:l}=e||{},[u,c]=x.useState(t._formState),k=x.useRef({isDirty:!1,isLoading:!1,dirtyFields:!1,touchedFields:!1,validatingFields:!1,isValidating:!1,isValid:!1,errors:!1});return Ue(()=>t._subscribe({name:o,formState:k.current,exact:l,callback:R=>{!a&&c({...t._formState,...R})}}),[o,a,l]),x.useEffect(()=>{k.current.isValid&&t._setValid(!0)},[t]),x.useMemo(()=>Et(u,t,k.current,!1),[u,t])}var z=e=>typeof e=="string",At=(e,i,t,a,o)=>z(e)?(a&&i.watch.add(e),m(t,e,o)):Array.isArray(e)?e.map(l=>(a&&i.watch.add(l),m(t,l))):(a&&(i.watchAll=!0),t),je=e=>J(e)||!Ct(e);function le(e,i,t=new WeakSet){if(je(e)||je(i))return e===i;if(me(e)&&me(i))return e.getTime()===i.getTime();const a=Object.keys(e),o=Object.keys(i);if(a.length!==o.length)return!1;if(t.has(e)||t.has(i))return!0;t.add(e),t.add(i);for(const l of a){const u=e[l];if(!o.includes(l))return!1;if(l!=="ref"){const c=i[l];if(me(u)&&me(c)||T(u)&&T(c)||Array.isArray(u)&&Array.isArray(c)?!le(u,c,t):u!==c)return!1}}return!0}function or(e){const i=He(),{control:t=i.control,name:a,defaultValue:o,disabled:l,exact:u,compute:c}=e||{},k=x.useRef(o),R=x.useRef(c),b=x.useRef(void 0);R.current=c;const F=x.useMemo(()=>t._getWatch(a,k.current),[t,a]),[p,U]=x.useState(R.current?R.current(F):F);return Ue(()=>t._subscribe({name:a,formState:{values:!0},exact:u,callback:N=>{if(!l){const h=At(a,t._names,N.values||t._formValues,!1,k.current);if(R.current){const S=R.current(h);le(S,b.current)||(U(S),b.current=S)}else U(h)}}}),[t,l,a,u]),x.useEffect(()=>t._removeUnmounted()),p}function ur(e){const i=He(),{name:t,disabled:a,control:o=i.control,shouldUnregister:l,defaultValue:u}=e,c=Rt(o._names.array,t),k=x.useMemo(()=>m(o._formValues,t,m(o._defaultValues,t,u)),[o,t,u]),R=or({control:o,name:t,defaultValue:k,exact:!0}),b=nr({control:o,name:t,exact:!0}),F=x.useRef(e),p=x.useRef(void 0),U=x.useRef(o.register(t,{...e.rules,value:R,...Y(e.disabled)?{disabled:e.disabled}:{}}));F.current=e;const N=x.useMemo(()=>Object.defineProperties({},{invalid:{enumerable:!0,get:()=>!!m(b.errors,t)},isDirty:{enumerable:!0,get:()=>!!m(b.dirtyFields,t)},isTouched:{enumerable:!0,get:()=>!!m(b.touchedFields,t)},isValidating:{enumerable:!0,get:()=>!!m(b.validatingFields,t)},error:{enumerable:!0,get:()=>m(b.errors,t)}}),[b,t]),h=x.useCallback(P=>U.current.onChange({target:{value:kt(P),name:t},type:Ve.CHANGE}),[t]),S=x.useCallback(()=>U.current.onBlur({target:{value:m(o._formValues,t),name:t},type:Ve.BLUR}),[t,o._formValues]),ge=x.useCallback(P=>{const I=m(o._fields,t);I&&P&&(I._f.ref={focus:()=>P.focus&&P.focus(),select:()=>P.select&&P.select(),setCustomValidity:B=>P.setCustomValidity(B),reportValidity:()=>P.reportValidity()})},[o._fields,t]),w=x.useMemo(()=>({name:t,value:R,...Y(a)||b.disabled?{disabled:b.disabled||a}:{},onChange:h,onBlur:S,ref:ge}),[t,a,b.disabled,h,S,ge,R]);return x.useEffect(()=>{const P=o._options.shouldUnregister||l,I=p.current;I&&I!==t&&!c&&o.unregister(I),o.register(t,{...F.current.rules,...Y(F.current.disabled)?{disabled:F.current.disabled}:{}});const B=(ie,X)=>{const ce=m(o._fields,ie);ce&&ce._f&&(ce._f.mount=X)};if(B(t,!0),P){const ie=O(m(o._options.defaultValues,t,F.current.defaultValue));_(o._defaultValues,t,ie),L(m(o._formValues,t))&&_(o._formValues,t,ie)}return!c&&o.register(t),p.current=t,()=>{(c?P&&!o._state.action:P)?o.unregister(t):B(t,!1)}},[t,o,c,l]),x.useEffect(()=>{o._setDisabledField({disabled:a,name:t})},[a,t,o]),x.useMemo(()=>({field:w,formState:b,fieldState:N}),[w,b,N])}const ue=e=>e.render(ur(e));var cr=(e,i,t,a,o)=>i?{...t[e],types:{...t[e]&&t[e].types?t[e].types:{},[a]:o||!0}}:{},we=e=>Array.isArray(e)?e:[e],nt=()=>{let e=[];return{get observers(){return e},next:o=>{for(const l of e)l.next&&l.next(o)},subscribe:o=>(e.push(o),{unsubscribe:()=>{e=e.filter(l=>l!==o)}}),unsubscribe:()=>{e=[]}}};function _t(e,i){const t={};for(const a in e)if(e.hasOwnProperty(a)){const o=e[a],l=i[a];if(o&&T(o)&&l){const u=_t(o,l);T(u)&&(t[a]=u)}else e[a]&&(t[a]=l)}return t}var $=e=>T(e)&&!Object.keys(e).length,We=e=>e.type==="file",Q=e=>typeof e=="function",Ee=e=>{if(!Oe)return!1;const i=e?e.ownerDocument:0;return e instanceof(i&&i.defaultView?i.defaultView.HTMLElement:HTMLElement)},Bt=e=>e.type==="select-multiple",$e=e=>e.type==="radio",dr=e=>$e(e)||Se(e),Te=e=>Ee(e)&&e.isConnected;function fr(e,i){const t=i.slice(0,-1).length;let a=0;for(;a<t;)e=L(e)?a++:e[i[a++]];return e}function mr(e){for(const i in e)if(e.hasOwnProperty(i)&&!L(e[i]))return!1;return!0}function D(e,i){const t=Array.isArray(i)?i:_e(i)?[i]:Ne(i),a=t.length===1?e:fr(e,t),o=t.length-1,l=t[o];return a&&delete a[l],o!==0&&(T(a)&&$(a)||Array.isArray(a)&&mr(a))&&D(e,t.slice(0,-1)),e}var gr=e=>{for(const i in e)if(Q(e[i]))return!0;return!1};function Pt(e){return Array.isArray(e)||T(e)&&!gr(e)}function qe(e,i={}){for(const t in e)Pt(e[t])?(i[t]=Array.isArray(e[t])?[]:{},qe(e[t],i[t])):L(e[t])||(i[t]=!0);return i}function ve(e,i,t){t||(t=qe(i));for(const a in e)Pt(e[a])?L(i)||je(t[a])?t[a]=qe(e[a],Array.isArray(e[a])?[]:{}):ve(e[a],J(i)?{}:i[a],t[a]):t[a]=!le(e[a],i[a]);return t}const ot={value:!1,isValid:!1},ut={value:!0,isValid:!0};var Lt=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&&!L(e[0].attributes.value)?L(e[0].value)||e[0].value===""?ut:{value:e[0].value,isValid:!0}:ut:ot}return ot},Mt=(e,{valueAsNumber:i,valueAsDate:t,setValueAs:a})=>L(e)?e:i?e===""?NaN:e&&+e:t&&z(e)?new Date(e):a?a(e):e;const ct={isValid:!1,value:null};var Dt=e=>Array.isArray(e)?e.reduce((i,t)=>t&&t.checked&&!t.disabled?{isValid:!0,value:t.value}:i,ct):ct;function dt(e){const i=e.ref;return We(i)?i.files:$e(i)?Dt(e.refs).value:Bt(i)?[...i.selectedOptions].map(({value:t})=>t):Se(i)?Lt(e.refs).value:Mt(L(i.value)?e.ref.value:i.value,e)}var yr=(e,i,t,a)=>{const o={};for(const l of e){const u=m(i,l);u&&_(o,l,u._f)}return{criteriaMode:t,names:[...e],fields:o,shouldUseNativeValidation:a}},Ae=e=>e instanceof RegExp,be=e=>L(e)?e:Ae(e)?e.source:T(e)?Ae(e.value)?e.value.source:e.value:e,ft=e=>({isOnSubmit:!e||e===Z.onSubmit,isOnBlur:e===Z.onBlur,isOnChange:e===Z.onChange,isOnAll:e===Z.all,isOnTouch:e===Z.onTouched});const mt="AsyncFunction";var hr=e=>!!e&&!!e.validate&&!!(Q(e.validate)&&e.validate.constructor.name===mt||T(e.validate)&&Object.values(e.validate).find(i=>i.constructor.name===mt)),vr=e=>e.mount&&(e.required||e.min||e.max||e.maxLength||e.minLength||e.pattern||e.validate),gt=(e,i,t)=>!t&&(i.watchAll||i.watch.has(e)||[...i.watch].some(a=>e.startsWith(a)&&/^\.\w+/.test(e.slice(a.length))));const Fe=(e,i,t,a)=>{for(const o of t||Object.keys(e)){const l=m(e,o);if(l){const{_f:u,...c}=l;if(u){if(u.refs&&u.refs[0]&&i(u.refs[0],o)&&!a)return!0;if(u.ref&&i(u.ref,u.name)&&!a)return!0;if(Fe(c,i))break}else if(T(c)&&Fe(c,i))break}}};function yt(e,i,t){const a=m(e,t);if(a||_e(t))return{error:a,name:t};const o=t.split(".");for(;o.length;){const l=o.join("."),u=m(i,l),c=m(e,l);if(u&&!Array.isArray(u)&&t!==l)return{name:t};if(c&&c.type)return{name:l,error:c};if(c&&c.root&&c.root.type)return{name:`${l}.root`,error:c.root};o.pop()}return{name:t}}var pr=(e,i,t,a)=>{t(e);const{name:o,...l}=e;return $(l)||Object.keys(l).length>=Object.keys(i).length||Object.keys(l).find(u=>i[u]===(!a||Z.all))},br=(e,i,t)=>!e||!i||e===i||we(e).some(a=>a&&(t?a===i:a.startsWith(i)||i.startsWith(a))),xr=(e,i,t,a,o)=>o.isOnAll?!1:!t&&o.isOnTouch?!(i||e):(t?a.isOnBlur:o.isOnBlur)?!e:(t?a.isOnChange:o.isOnChange)?e:!0,wr=(e,i)=>!Ie(m(e,i)).length&&D(e,i),Fr=(e,i,t)=>{const a=we(m(e,t));return _(a,"root",i[t]),_(e,t,a),e};function ht(e,i,t="validate"){if(z(e)||Array.isArray(e)&&e.every(z)||Y(e)&&!e)return{type:t,message:z(e)?e:"",ref:i}}var he=e=>T(e)&&!Ae(e)?e:{value:e,message:""},vt=async(e,i,t,a,o,l)=>{const{ref:u,refs:c,required:k,maxLength:R,minLength:b,min:F,max:p,pattern:U,validate:N,name:h,valueAsNumber:S,mount:ge}=e._f,w=m(t,h);if(!ge||i.has(h))return{};const P=c?c[0]:u,I=C=>{o&&P.reportValidity&&(P.setCustomValidity(Y(C)?"":C||""),P.reportValidity())},B={},ie=$e(u),X=Se(u),ce=ie||X,G=(S||We(u))&&L(u.value)&&L(w)||Ee(u)&&u.value===""||w===""||Array.isArray(w)&&!w.length,de=cr.bind(null,h,a,B),ee=(C,E,M,H=ae.maxLength,W=ae.minLength)=>{const te=C?E:M;B[h]={type:C?H:W,message:te,ref:u,...de(C?H:W,te)}};if(l?!Array.isArray(w)||!w.length:k&&(!ce&&(G||J(w))||Y(w)&&!w||X&&!Lt(c).isValid||ie&&!Dt(c).isValid)){const{value:C,message:E}=z(k)?{value:!!k,message:k}:he(k);if(C&&(B[h]={type:ae.required,message:E,ref:P,...de(ae.required,E)},!a))return I(E),B}if(!G&&(!J(F)||!J(p))){let C,E;const M=he(p),H=he(F);if(!J(w)&&!isNaN(w)){const W=u.valueAsNumber||w&&+w;J(M.value)||(C=W>M.value),J(H.value)||(E=W<H.value)}else{const W=u.valueAsDate||new Date(w),te=Ce=>new Date(new Date().toDateString()+" "+Ce),pe=u.type=="time",ye=u.type=="week";z(M.value)&&w&&(C=pe?te(w)>te(M.value):ye?w>M.value:W>new Date(M.value)),z(H.value)&&w&&(E=pe?te(w)<te(H.value):ye?w<H.value:W<new Date(H.value))}if((C||E)&&(ee(!!C,M.message,H.message,ae.max,ae.min),!a))return I(B[h].message),B}if((R||b)&&!G&&(z(w)||l&&Array.isArray(w))){const C=he(R),E=he(b),M=!J(C.value)&&w.length>+C.value,H=!J(E.value)&&w.length<+E.value;if((M||H)&&(ee(M,C.message,E.message),!a))return I(B[h].message),B}if(U&&!G&&z(w)){const{value:C,message:E}=he(U);if(Ae(C)&&!w.match(C)&&(B[h]={type:ae.pattern,message:E,ref:u,...de(ae.pattern,E)},!a))return I(E),B}if(N){if(Q(N)){const C=await N(w,t),E=ht(C,P);if(E&&(B[h]={...E,...de(ae.validate,E.message)},!a))return I(E.message),B}else if(T(N)){let C={};for(const E in N){if(!$(C)&&!a)break;const M=ht(await N[E](w,t),P,E);M&&(C={...M,...de(E,M.message)},I(M.message),a&&(B[h]=C))}if(!$(C)&&(B[h]={ref:P,...C},!a))return B}}return I(!0),B};const Sr={mode:Z.onSubmit,reValidateMode:Z.onChange,shouldFocusError:!0};function Cr(e={}){let i={...Sr,...e},t={submitCount:0,isDirty:!1,isReady:!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},a={},o=T(i.defaultValues)||T(i.values)?O(i.defaultValues||i.values)||{}:{},l=i.shouldUnregister?{}:O(o),u={action:!1,mount:!1,watch:!1},c={mount:new Set,disabled:new Set,unMount:new Set,array:new Set,watch:new Set},k,R=0;const b={isDirty:!1,dirtyFields:!1,validatingFields:!1,touchedFields:!1,isValidating:!1,isValid:!1,errors:!1};let F={...b};const p={array:nt(),state:nt()},U=i.criteriaMode===Z.all,N=r=>s=>{clearTimeout(R),R=setTimeout(r,s)},h=async r=>{if(!i.disabled&&(b.isValid||F.isValid||r)){const s=i.resolver?$((await X()).errors):await G(a,!0);s!==t.isValid&&p.state.next({isValid:s})}},S=(r,s)=>{!i.disabled&&(b.isValidating||b.validatingFields||F.isValidating||F.validatingFields)&&((r||Array.from(c.mount)).forEach(n=>{n&&(s?_(t.validatingFields,n,s):D(t.validatingFields,n))}),p.state.next({validatingFields:t.validatingFields,isValidating:!$(t.validatingFields)}))},ge=(r,s=[],n,g,f=!0,d=!0)=>{if(g&&n&&!i.disabled){if(u.action=!0,d&&Array.isArray(m(a,r))){const v=n(m(a,r),g.argA,g.argB);f&&_(a,r,v)}if(d&&Array.isArray(m(t.errors,r))){const v=n(m(t.errors,r),g.argA,g.argB);f&&_(t.errors,r,v),wr(t.errors,r)}if((b.touchedFields||F.touchedFields)&&d&&Array.isArray(m(t.touchedFields,r))){const v=n(m(t.touchedFields,r),g.argA,g.argB);f&&_(t.touchedFields,r,v)}(b.dirtyFields||F.dirtyFields)&&(t.dirtyFields=ve(o,l)),p.state.next({name:r,isDirty:ee(r,s),dirtyFields:t.dirtyFields,errors:t.errors,isValid:t.isValid})}else _(l,r,s)},w=(r,s)=>{_(t.errors,r,s),p.state.next({errors:t.errors})},P=r=>{t.errors=r,p.state.next({errors:t.errors,isValid:!1})},I=(r,s,n,g)=>{const f=m(a,r);if(f){const d=m(l,r,L(n)?m(o,r):n);L(d)||g&&g.defaultChecked||s?_(l,r,s?d:dt(f._f)):M(r,d),u.mount&&h()}},B=(r,s,n,g,f)=>{let d=!1,v=!1;const V={name:r};if(!i.disabled){if(!n||g){(b.isDirty||F.isDirty)&&(v=t.isDirty,t.isDirty=V.isDirty=ee(),d=v!==V.isDirty);const A=le(m(o,r),s);v=!!m(t.dirtyFields,r),A?D(t.dirtyFields,r):_(t.dirtyFields,r,!0),V.dirtyFields=t.dirtyFields,d=d||(b.dirtyFields||F.dirtyFields)&&v!==!A}if(n){const A=m(t.touchedFields,r);A||(_(t.touchedFields,r,n),V.touchedFields=t.touchedFields,d=d||(b.touchedFields||F.touchedFields)&&A!==n)}d&&f&&p.state.next(V)}return d?V:{}},ie=(r,s,n,g)=>{const f=m(t.errors,r),d=(b.isValid||F.isValid)&&Y(s)&&t.isValid!==s;if(i.delayError&&n?(k=N(()=>w(r,n)),k(i.delayError)):(clearTimeout(R),k=null,n?_(t.errors,r,n):D(t.errors,r)),(n?!le(f,n):f)||!$(g)||d){const v={...g,...d&&Y(s)?{isValid:s}:{},errors:t.errors,name:r};t={...t,...v},p.state.next(v)}},X=async r=>{S(r,!0);const s=await i.resolver(l,i.context,yr(r||c.mount,a,i.criteriaMode,i.shouldUseNativeValidation));return S(r),s},ce=async r=>{const{errors:s}=await X(r);if(r)for(const n of r){const g=m(s,n);g?_(t.errors,n,g):D(t.errors,n)}else t.errors=s;return s},G=async(r,s,n={valid:!0})=>{for(const g in r){const f=r[g];if(f){const{_f:d,...v}=f;if(d){const V=c.array.has(d.name),A=f._f&&hr(f._f);A&&b.validatingFields&&S([d.name],!0);const K=await vt(f,c.disabled,l,U,i.shouldUseNativeValidation&&!s,V);if(A&&b.validatingFields&&S([d.name]),K[d.name]&&(n.valid=!1,s))break;!s&&(m(K,d.name)?V?Fr(t.errors,K,d.name):_(t.errors,d.name,K[d.name]):D(t.errors,d.name))}!$(v)&&await G(v,s,n)}}return n.valid},de=()=>{for(const r of c.unMount){const s=m(a,r);s&&(s._f.refs?s._f.refs.every(n=>!Te(n)):!Te(s._f.ref))&&Be(r)}c.unMount=new Set},ee=(r,s)=>!i.disabled&&(r&&s&&_(l,r,s),!le(Ce(),o)),C=(r,s,n)=>At(r,c,{...u.mount?l:L(s)?o:z(r)?{[r]:s}:s},n,s),E=r=>Ie(m(u.mount?l:o,r,i.shouldUnregister?m(o,r,[]):[])),M=(r,s,n={})=>{const g=m(a,r);let f=s;if(g){const d=g._f;d&&(!d.disabled&&_(l,r,Mt(s,d)),f=Ee(d.ref)&&J(s)?"":s,Bt(d.ref)?[...d.ref.options].forEach(v=>v.selected=f.includes(v.value)):d.refs?Se(d.ref)?d.refs.forEach(v=>{(!v.defaultChecked||!v.disabled)&&(Array.isArray(f)?v.checked=!!f.find(V=>V===v.value):v.checked=f===v.value||!!f)}):d.refs.forEach(v=>v.checked=v.value===f):We(d.ref)?d.ref.value="":(d.ref.value=f,d.ref.type||p.state.next({name:r,values:O(l)})))}(n.shouldDirty||n.shouldTouch)&&B(r,f,n.shouldTouch,n.shouldDirty,!0),n.shouldValidate&&ye(r)},H=(r,s,n)=>{for(const g in s){if(!s.hasOwnProperty(g))return;const f=s[g],d=r+"."+g,v=m(a,d);(c.array.has(r)||T(f)||v&&!v._f)&&!me(f)?H(d,f,n):M(d,f,n)}},W=(r,s,n={})=>{const g=m(a,r),f=c.array.has(r),d=O(s);_(l,r,d),f?(p.array.next({name:r,values:O(l)}),(b.isDirty||b.dirtyFields||F.isDirty||F.dirtyFields)&&n.shouldDirty&&p.state.next({name:r,dirtyFields:ve(o,l),isDirty:ee(r,d)})):g&&!g._f&&!J(d)?H(r,d,n):M(r,d,n),gt(r,c)&&p.state.next({...t,name:r}),p.state.next({name:u.mount?r:void 0,values:O(l)})},te=async r=>{u.mount=!0;const s=r.target;let n=s.name,g=!0;const f=m(a,n),d=A=>{g=Number.isNaN(A)||me(A)&&isNaN(A.getTime())||le(A,m(l,n,A))},v=ft(i.mode),V=ft(i.reValidateMode);if(f){let A,K;const ke=s.type?dt(f._f):kt(r),ne=r.type===Ve.BLUR||r.type===Ve.FOCUS_OUT,Ut=!vr(f._f)&&!i.resolver&&!m(t.errors,n)&&!f._f.deps||xr(ne,m(t.touchedFields,n),t.isSubmitted,V,v),Me=gt(n,c,ne);_(l,n,ke),ne?(!s||!s.readOnly)&&(f._f.onBlur&&f._f.onBlur(r),k&&k(0)):f._f.onChange&&f._f.onChange(r);const De=B(n,ke,ne),Wt=!$(De)||Me;if(!ne&&p.state.next({name:n,type:r.type,values:O(l)}),Ut)return(b.isValid||F.isValid)&&(i.mode==="onBlur"?ne&&h():ne||h()),Wt&&p.state.next({name:n,...Me?{}:De});if(!ne&&Me&&p.state.next({...t}),i.resolver){const{errors:et}=await X([n]);if(d(ke),g){const $t=yt(t.errors,a,n),tt=yt(et,a,$t.name||n);A=tt.error,n=tt.name,K=$(et)}}else S([n],!0),A=(await vt(f,c.disabled,l,U,i.shouldUseNativeValidation))[n],S([n]),d(ke),g&&(A?K=!1:(b.isValid||F.isValid)&&(K=await G(a,!0)));g&&(f._f.deps&&(!Array.isArray(f._f.deps)||f._f.deps.length>0)&&ye(f._f.deps),ie(n,K,A,De))}},pe=(r,s)=>{if(m(t.errors,s)&&r.focus)return r.focus(),1},ye=async(r,s={})=>{let n,g;const f=we(r);if(i.resolver){const d=await ce(L(r)?r:f);n=$(d),g=r?!f.some(v=>m(d,v)):n}else r?(g=(await Promise.all(f.map(async d=>{const v=m(a,d);return await G(v&&v._f?{[d]:v}:v)}))).every(Boolean),!(!g&&!t.isValid)&&h()):g=n=await G(a);return p.state.next({...!z(r)||(b.isValid||F.isValid)&&n!==t.isValid?{}:{name:r},...i.resolver||!r?{isValid:n}:{},errors:t.errors}),s.shouldFocus&&!g&&Fe(a,pe,r?f:c.mount),g},Ce=(r,s)=>{let n={...u.mount?l:o};return s&&(n=_t(s.dirtyFields?t.dirtyFields:t.touchedFields,n)),L(r)?n:z(r)?m(n,r):r.map(g=>m(n,g))},Je=(r,s)=>({invalid:!!m((s||t).errors,r),isDirty:!!m((s||t).dirtyFields,r),error:m((s||t).errors,r),isValidating:!!m(t.validatingFields,r),isTouched:!!m((s||t).touchedFields,r)}),Tt=r=>{r&&we(r).forEach(s=>D(t.errors,s)),p.state.next({errors:r?t.errors:{}})},Ye=(r,s,n)=>{const g=(m(a,r,{_f:{}})._f||{}).ref,f=m(t.errors,r)||{},{ref:d,message:v,type:V,...A}=f;_(t.errors,r,{...A,...s,ref:g}),p.state.next({name:r,errors:t.errors,isValid:!1}),n&&n.shouldFocus&&g&&g.focus&&g.focus()},jt=(r,s)=>Q(r)?p.state.subscribe({next:n=>"values"in n&&r(C(void 0,s),n)}):C(r,s,!0),ze=r=>p.state.subscribe({next:s=>{br(r.name,s.name,r.exact)&&pr(s,r.formState||b,Ht,r.reRenderRoot)&&r.callback({values:{...l},...t,...s,defaultValues:o})}}).unsubscribe,qt=r=>(u.mount=!0,F={...F,...r.formState},ze({...r,formState:F})),Be=(r,s={})=>{for(const n of r?we(r):c.mount)c.mount.delete(n),c.array.delete(n),s.keepValue||(D(a,n),D(l,n)),!s.keepError&&D(t.errors,n),!s.keepDirty&&D(t.dirtyFields,n),!s.keepTouched&&D(t.touchedFields,n),!s.keepIsValidating&&D(t.validatingFields,n),!i.shouldUnregister&&!s.keepDefaultValue&&D(o,n);p.state.next({values:O(l)}),p.state.next({...t,...s.keepDirty?{isDirty:ee()}:{}}),!s.keepIsValid&&h()},Ke=({disabled:r,name:s})=>{(Y(r)&&u.mount||r||c.disabled.has(s))&&(r?c.disabled.add(s):c.disabled.delete(s))},Pe=(r,s={})=>{let n=m(a,r);const g=Y(s.disabled)||Y(i.disabled);return _(a,r,{...n||{},_f:{...n&&n._f?n._f:{ref:{name:r}},name:r,mount:!0,...s}}),c.mount.add(r),n?Ke({disabled:Y(s.disabled)?s.disabled:i.disabled,name:r}):I(r,!0,s.value),{...g?{disabled:s.disabled||i.disabled}:{},...i.progressive?{required:!!s.required,min:be(s.min),max:be(s.max),minLength:be(s.minLength),maxLength:be(s.maxLength),pattern:be(s.pattern)}:{},name:r,onChange:te,onBlur:te,ref:f=>{if(f){Pe(r,s),n=m(a,r);const d=L(f.value)&&f.querySelectorAll&&f.querySelectorAll("input,select,textarea")[0]||f,v=dr(d),V=n._f.refs||[];if(v?V.find(A=>A===d):d===n._f.ref)return;_(a,r,{_f:{...n._f,...v?{refs:[...V.filter(Te),d,...Array.isArray(m(o,r))?[{}]:[]],ref:{type:d.type,name:r}}:{ref:d}}}),I(r,!1,void 0,d)}else n=m(a,r,{}),n._f&&(n._f.mount=!1),(i.shouldUnregister||s.shouldUnregister)&&!(Rt(c.array,r)&&u.action)&&c.unMount.add(r)}}},Le=()=>i.shouldFocusError&&Fe(a,pe,c.mount),Ot=r=>{Y(r)&&(p.state.next({disabled:r}),Fe(a,(s,n)=>{const g=m(a,n);g&&(s.disabled=g._f.disabled||r,Array.isArray(g._f.refs)&&g._f.refs.forEach(f=>{f.disabled=g._f.disabled||r}))},0,!1))},Ge=(r,s)=>async n=>{let g;n&&(n.preventDefault&&n.preventDefault(),n.persist&&n.persist());let f=O(l);if(p.state.next({isSubmitting:!0}),i.resolver){const{errors:d,values:v}=await X();t.errors=d,f=O(v)}else await G(a);if(c.disabled.size)for(const d of c.disabled)D(f,d);if(D(t.errors,"root"),$(t.errors)){p.state.next({errors:{}});try{await r(f,n)}catch(d){g=d}}else s&&await s({...t.errors},n),Le(),setTimeout(Le);if(p.state.next({isSubmitted:!0,isSubmitting:!1,isSubmitSuccessful:$(t.errors)&&!g,submitCount:t.submitCount+1,errors:t.errors}),g)throw g},It=(r,s={})=>{m(a,r)&&(L(s.defaultValue)?W(r,O(m(o,r))):(W(r,s.defaultValue),_(o,r,O(s.defaultValue))),s.keepTouched||D(t.touchedFields,r),s.keepDirty||(D(t.dirtyFields,r),t.isDirty=s.defaultValue?ee(r,O(m(o,r))):ee()),s.keepError||(D(t.errors,r),b.isValid&&h()),p.state.next({...t}))},Ze=(r,s={})=>{const n=r?O(r):o,g=O(n),f=$(r),d=f?o:g;if(s.keepDefaultValues||(o=n),!s.keepValues){if(s.keepDirtyValues){const v=new Set([...c.mount,...Object.keys(ve(o,l))]);for(const V of Array.from(v))m(t.dirtyFields,V)?_(d,V,m(l,V)):W(V,m(d,V))}else{if(Oe&&L(r))for(const v of c.mount){const V=m(a,v);if(V&&V._f){const A=Array.isArray(V._f.refs)?V._f.refs[0]:V._f.ref;if(Ee(A)){const K=A.closest("form");if(K){K.reset();break}}}}if(s.keepFieldsRef)for(const v of c.mount)W(v,m(d,v));else a={}}l=i.shouldUnregister?s.keepDefaultValues?O(o):{}:O(d),p.array.next({values:{...d}}),p.state.next({values:{...d}})}c={mount:s.keepDirtyValues?c.mount:new Set,unMount:new Set,array:new Set,disabled:new Set,watch:new Set,watchAll:!1,focus:""},u.mount=!b.isValid||!!s.keepIsValid||!!s.keepDirtyValues,u.watch=!!i.shouldUnregister,p.state.next({submitCount:s.keepSubmitCount?t.submitCount:0,isDirty:f?!1:s.keepDirty?t.isDirty:!!(s.keepDefaultValues&&!le(r,o)),isSubmitted:s.keepIsSubmitted?t.isSubmitted:!1,dirtyFields:f?{}:s.keepDirtyValues?s.keepDefaultValues&&l?ve(o,l):t.dirtyFields:s.keepDefaultValues&&r?ve(o,r):s.keepDirty?t.dirtyFields:{},touchedFields:s.keepTouched?t.touchedFields:{},errors:s.keepErrors?t.errors:{},isSubmitSuccessful:s.keepIsSubmitSuccessful?t.isSubmitSuccessful:!1,isSubmitting:!1,defaultValues:o})},Qe=(r,s)=>Ze(Q(r)?r(l):r,s),Nt=(r,s={})=>{const n=m(a,r),g=n&&n._f;if(g){const f=g.refs?g.refs[0]:g.ref;f.focus&&(f.focus(),s.shouldSelect&&Q(f.select)&&f.select())}},Ht=r=>{t={...t,...r}},Xe={control:{register:Pe,unregister:Be,getFieldState:Je,handleSubmit:Ge,setError:Ye,_subscribe:ze,_runSchema:X,_focusError:Le,_getWatch:C,_getDirty:ee,_setValid:h,_setFieldArray:ge,_setDisabledField:Ke,_setErrors:P,_getFieldArray:E,_reset:Ze,_resetDefaultValues:()=>Q(i.defaultValues)&&i.defaultValues().then(r=>{Qe(r,i.resetOptions),p.state.next({isLoading:!1})}),_removeUnmounted:de,_disableForm:Ot,_subjects:p,_proxyFormState:b,get _fields(){return a},get _formValues(){return l},get _state(){return u},set _state(r){u=r},get _defaultValues(){return o},get _names(){return c},set _names(r){c=r},get _formState(){return t},get _options(){return i},set _options(r){i={...i,...r}}},subscribe:qt,trigger:ye,register:Pe,handleSubmit:Ge,watch:jt,setValue:W,getValues:Ce,reset:Qe,resetField:It,clearErrors:Tt,unregister:Be,setError:Ye,setFocus:Nt,getFieldState:Je};return{...Xe,formControl:Xe}}function kr(e={}){const i=x.useRef(void 0),t=x.useRef(void 0),[a,o]=x.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(!i.current)if(e.formControl)i.current={...e.formControl,formState:a},e.defaultValues&&!Q(e.defaultValues)&&e.formControl.reset(e.defaultValues,e.resetOptions);else{const{formControl:u,...c}=Cr(e);i.current={...c,formState:a}}const l=i.current.control;return l._options=e,Ue(()=>{const u=l._subscribe({formState:l._proxyFormState,callback:()=>o({...l._formState}),reRenderRoot:!0});return o(c=>({...c,isReady:!0})),l._formState.isReady=!0,u},[l]),x.useEffect(()=>l._disableForm(e.disabled),[l,e.disabled]),x.useEffect(()=>{e.mode&&(l._options.mode=e.mode),e.reValidateMode&&(l._options.reValidateMode=e.reValidateMode)},[l,e.mode,e.reValidateMode]),x.useEffect(()=>{e.errors&&(l._setErrors(e.errors),l._focusError())},[l,e.errors]),x.useEffect(()=>{e.shouldUnregister&&l._subjects.state.next({values:l._getWatch()})},[l,e.shouldUnregister]),x.useEffect(()=>{if(l._proxyFormState.isDirty){const u=l._getDirty();u!==a.isDirty&&l._subjects.state.next({isDirty:u})}},[l,a.isDirty]),x.useEffect(()=>{e.values&&!le(e.values,t.current)?(l._reset(e.values,{keepFieldsRef:!0,...l._options.resetOptions}),t.current=e.values,o(u=>({...u}))):l._resetDefaultValues()},[l,e.values]),x.useEffect(()=>{l._state.mount||(l._setValid(),l._state.mount=!0),l._state.watch&&(l._state.watch=!1,l._subjects.state.next({...l._formState})),l._removeUnmounted()}),i.current.formState=Et(a,l),i.current}const{userEvent:j,expect:q,within:se,waitFor:pt,fn:Rr}=__STORYBOOK_MODULE_TEST__,Ri={title:"Guides/Integration with React Hook Form",args:{onSubmit:Rr()}},xe={render:function(i){const t=()=>{var k,R,b,F,p,U,N;const{register:a,handleSubmit:o,formState:{errors:l},reset:u,control:c}=kr({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 y.jsx("div",{style:{maxWidth:"600px",margin:"0 auto",padding:"20px"},children:y.jsxs(rt,{direction:"column",gap:"16",children:[y.jsx(zt,{variant:"extraLarge",tag:"h1",children:"User Registration Form"}),y.jsxs("form",{onSubmit:o(i.onSubmit),style:{display:"contents"},noValidate:!0,children:[y.jsx(it,{label:"Full Name",...a("fullName",{required:"Full name is required"}),error:(k=l.fullName)==null?void 0:k.message,required:!0}),y.jsx(it,{label:"Email",type:"email",...a("email",{required:"Email is required"}),error:(R=l.email)==null?void 0:R.message,required:!0}),y.jsx(Kt,{label:"Age",...a("age",{valueAsNumber:!0,required:"Age is required",min:{value:18,message:"You must be at least 18 years old"}}),min:18,max:120,error:(b=l.age)==null?void 0:b.message,required:!0}),y.jsx(ue,{name:"country",control:c,rules:{required:"Country is required"},render:({field:h})=>{var S;return y.jsxs(Gt,{ref:h.ref,label:"Country",placeholder:"",error:(S=l.country)==null?void 0:S.message,required:!0,disabled:h.disabled,value:h.value,onBlur:h.onBlur,onValueChange:h.onChange,children:[y.jsx(re,{value:"us",children:"United States"}),y.jsx(re,{value:"ca",children:"Canada"}),y.jsx(re,{value:"uk",children:"United Kingdom"}),y.jsx(re,{value:"de",children:"Germany"}),y.jsx(re,{value:"fr",children:"France"}),y.jsx(re,{value:"it",children:"Italy"}),y.jsx(re,{value:"es",children:"Spain"}),y.jsx(re,{value:"au",children:"Australia"}),y.jsx(re,{value:"jp",children:"Japan"}),y.jsx(re,{value:"other",children:"Other"})]})}}),y.jsx(at,{label:"Password",...a("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:(F=l.password)==null?void 0:F.message,required:!0}),y.jsx(at,{label:"Confirm Password",...a("confirmPassword",{required:"Please confirm your password",validate:(h,S)=>h===S.password||"Passwords do not match"}),error:(p=l.confirmPassword)==null?void 0:p.message,required:!0}),y.jsx(Zt,{label:"Bio",...a("bio",{maxLength:{value:500,message:"Bio must be less than 500 characters"}}),error:(U=l.bio)==null?void 0:U.message}),y.jsx(ue,{name:"experienceLevel",control:c,rules:{validate:{minValue:h=>h<50?"Must be above 50":!0}},render:({field:h})=>{var S;return y.jsx(oe,{label:"Experience Level",error:(S=l.experienceLevel)==null?void 0:S.message,children:y.jsx(Qt,{value:h.value,onValueChange:h.onChange,min:0,max:100,"aria-label":"Experience Level"})})}}),y.jsx(ue,{name:"priceRange",control:c,rules:{validate:{minValue:([h])=>h<=25?"Minimum must be above 25":!0,maxValue:([,h])=>h>=75?"Maximum must be below 75":!0}},render:({field:h})=>{var S;return y.jsx(oe,{label:"Price",error:(S=l.priceRange)==null?void 0:S.message,children:y.jsx(Xt,{value:h.value,onValueChange:h.onChange,min:0,max:100,"aria-label":"Price Range"})})}}),y.jsx(ue,{name:"emailNotifications",control:c,render:({field:h})=>{var S;return y.jsx(oe,{label:"Email Notifications",description:"Receive updates and newsletters via email",error:(S=l.emailNotifications)==null?void 0:S.message,children:y.jsx(er,{checked:h.value,onCheckedChange:h.onChange,"aria-label":"Email Notifications"})})}}),y.jsx(ue,{control:c,name:"englishLevel",rules:{required:"English level is required"},render:({field:h})=>y.jsx(oe,{label:"English Level",required:!0,children:y.jsxs(tr,{"aria-label":"English Level",value:h.value,onValueChange:h.onChange,children:[y.jsx(fe,{value:"a0",children:"A0"}),y.jsx(fe,{value:"a1",children:"A1"}),y.jsx(fe,{value:"a2",children:"A2"}),y.jsx(fe,{value:"b1",children:"B1"}),y.jsx(fe,{value:"b2",children:"B2"}),y.jsx(fe,{value:"c1",children:"C1"}),y.jsx(fe,{value:"c2",children:"C2"})]})})}),y.jsx(ue,{control:c,name:"skills",rules:{required:"Skills are required"},render:({field:h})=>y.jsx(oe,{label:"Skills",required:!0,children:y.jsxs(rr,{"aria-label":"Skills",value:h.value,onValueChange:h.onChange,children:[y.jsx(Re,{value:"vocabulary",children:"Vocabulary"}),y.jsx(Re,{value:"speaking",children:"Speaking"}),y.jsx(Re,{value:"listening",children:"Listening"}),y.jsx(Re,{value:"reading",children:"Reading"})]})})}),y.jsx(ue,{control:c,name:"marketing",rules:{required:"Marketing is required"},render:({field:h})=>y.jsx(oe,{label:"Marketing",description:"How do you want to receive marketing communications?",required:!0,children:y.jsxs(ir,{"aria-label":"Marketing",value:h.value,onValueChange:h.onChange,children:[y.jsx(st,{value:"emails",children:"Marketing emails"}),y.jsx(st,{value:"push",children:"Push notifications"})]})})}),y.jsx(oe,{label:"Accept Privacy Policy",description:"I accept the Privacy Policy",error:(N=l.privacyPolicyAccepted)==null?void 0:N.message,hideLabel:!0,children:y.jsx(ar,{...a("privacyPolicyAccepted",{required:"You must accept the Privacy Policy"})})}),y.jsx(ue,{name:"registrationExperience",control:c,render:({field:h})=>{var S;return y.jsx(oe,{label:"Rate the registration experience",description:"Was the form easy to understand?",error:(S=l.registrationExperience)==null?void 0:S.message,id:"registrationExperienceField",children:y.jsx(Yt,{value:h.value,onValueChange:h.onChange})})}}),y.jsxs(rt,{gap:"12",padding:["20","0","0"],justifyContent:"end",children:[y.jsx(lt,{onClick:()=>u(),variant:"secondary",children:"Reset"}),y.jsx(lt,{submitsForm:!0,children:"Submit"})]})]})]})})};return y.jsx(t,{})},play:async({args:e,canvasElement:i,step:t})=>{const a=se(i);await t("Fill full name field",async()=>{await j.type(a.getByRole("textbox",{name:"Full Name"}),"John Doe")}),await t("Fill email field",async()=>{await j.type(a.getByRole("textbox",{name:"Email"}),"john.doe@example.com")}),await t("Fill age field",async()=>{await j.clear(a.getByRole("spinbutton",{name:"Age"})),await j.type(a.getByRole("spinbutton",{name:"Age"}),"25")}),await t("Fill country field",async()=>{a.getByRole("combobox",{name:"Country"}).focus(),await j.keyboard("{Enter}".repeat(2))}),await t("Fill password field",async()=>{await j.type(a.getByLabelText(/^Password/),"TestPassword123!")}),await t("Fill confirm password field",async()=>{await j.type(a.getByLabelText(/^Confirm Password/),"TestPassword123!")}),await t("Fill bio field",async()=>{await j.type(a.getByRole("textbox",{name:"Bio"}),"I am a software engineer with 5 years of experience.")}),await t("Move experience level slider",async()=>{a.getByRole("slider",{name:"Experience Level"}).focus(),await j.keyboard("{ArrowRight}".repeat(5))}),await t("Move price range slider minimum",async()=>{a.getByRole("slider",{name:"Minimum Price Range"}).focus(),await j.keyboard("{ArrowRight}".repeat(2))}),await t("Move price range slider maximum",async()=>{a.getByRole("slider",{name:"Maximum Price Range"}).focus(),await j.keyboard("{ArrowLeft}".repeat(2))}),await t("Select english level",async()=>{const l=a.getByRole("listbox",{name:"English Level"}),u=se(l).getByRole("option",{name:"B2"});await j.click(u)}),await t("Select reading skill",async()=>{const l=a.getByRole("listbox",{name:"Skills"}),u=se(l).getByRole("option",{name:"Reading"});await j.click(u)}),await t("Select listening skill",async()=>{const l=a.getByRole("listbox",{name:"Skills"}),u=se(l).getByRole("option",{name:"Listening"});await j.click(u)}),await t("Dismiss push notifications",async()=>{const l=a.getByRole("list",{name:"Marketing"}),u=se(l).getByRole("button",{name:"Remove Push notifications"});await j.click(u)}),await t("Accept privacy policy",async()=>{const l=a.getByRole("checkbox",{name:"Accept Privacy Policy"});await j.click(l)}),await t("Toggle email notifications",async()=>{await j.click(a.getByRole("switch",{name:"Email Notifications"}))});const o=i.querySelector("#registrationExperienceField");if(!o)throw new Error("#registrationExperienceField is not in the canvas");if(!(o instanceof HTMLElement))throw new Error("#registrationExperienceField is not a valid HTMLElement");await t("Rate the registration form",async()=>{await Jt({value:5,rating:o})}),await t("Submit the form",async()=>{await j.click(a.getByRole("button",{name:"Submit"}))}),await t("Assert that onSubmit was called with correct data",async()=>{await pt(()=>{q(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},q.anything())})}),await t("Reset the form",async()=>{await j.click(a.getByRole("button",{name:"Reset"}))}),await t("Assert all fields are cleared",async()=>{await pt(()=>{q(a.getByRole("textbox",{name:"Full Name"})).not.toHaveValue(),q(a.getByRole("textbox",{name:"Email"})).not.toHaveValue(),q(a.getByRole("spinbutton",{name:"Age"})).not.toHaveValue(),q(a.getByRole("combobox",{name:"Country"})).not.toHaveValue(),q(a.getByLabelText(/^Password/)).not.toHaveValue(),q(a.getByLabelText(/^Confirm Password/)).not.toHaveValue(),q(a.getByRole("textbox",{name:"Bio"})).not.toHaveValue(),q(a.getByRole("checkbox",{name:"Accept Privacy Policy"})).not.toBeChecked(),q(a.getByRole("switch",{name:"Email Notifications"})).toHaveAttribute("aria-checked","true"),q(a.getByRole("slider",{name:"Experience Level"})).toHaveAttribute("aria-valuenow","50"),q(a.getByRole("slider",{name:"Minimum Price Range"})).toHaveAttribute("aria-valuenow","25"),q(a.getByRole("slider",{name:"Maximum Price Range"})).toHaveAttribute("aria-valuenow","75");const l=a.getByRole("listbox",{name:"English Level"});se(l).getAllByRole("option").forEach(R=>{q(R).toHaveAttribute("aria-selected","false")});const u=a.getByRole("listbox",{name:"Skills"});se(u).getAllByRole("option").forEach(R=>{q(R).toHaveAttribute("aria-selected","false")});const c=a.getByRole("list",{name:"Marketing"});q(se(c).getByRole("button",{name:"Remove Marketing emails"})).toBeVisible(),q(se(c).getByRole("button",{name:"Remove Push notifications"})).toBeVisible();const k=i.querySelector("#registrationExperienceField");if(!k)throw new Error("#registrationExperienceField is not in the canvas");if(!(k instanceof HTMLElement))throw new Error("#registrationExperienceField is not a valid HTMLElement");q(k).toHaveAttribute("aria-valuetext","0 out of 5")})})}};var bt,xt,wt,Ft,St;xe.parameters={...xe.parameters,docs:{...(bt=xe.parameters)==null?void 0:bt.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');
-      });
-    });
-  }
-}`,...(wt=(xt=xe.parameters)==null?void 0:xt.docs)==null?void 0:wt.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.`,...(St=(Ft=xe.parameters)==null?void 0:Ft.docs)==null?void 0:St.description}}};const Vi=["IntegrationWithReactHookForm"];export{xe as IntegrationWithReactHookForm,Vi as __namedExportsOrder,Ri as default};

package/dist/assets/LayoutFlex-7DoB3s9X.css

@@ -1 +0,0 @@
-[data-preply-ds-component=LayoutFlex]{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;padding:0;margin:0;list-style:none;font-weight:inherit;border:none;text-align:inherit;border-spacing:0}[data-preply-ds-component=LayoutFlex][data-ds-nowrap=true]{-ms-flex-wrap:nowrap;flex-wrap:nowrap}[data-preply-ds-component=LayoutFlex][data-ds-columnreverse=row-fwd]{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}[data-preply-ds-component=LayoutFlex][data-ds-columnreverse=row-rev]{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}[data-preply-ds-component=LayoutFlex][data-ds-columnreverse=column-fwd]{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}[data-preply-ds-component=LayoutFlex][data-ds-columnreverse=column-rev]{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}[data-preply-ds-component=LayoutFlex][data-ds-direction=column],[data-preply-ds-component=LayoutFlex][data-ds-direction*='"_":"column"']{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}[data-preply-ds-component=LayoutFlex][data-ds-direction=column-reverse],[data-preply-ds-component=LayoutFlex][data-ds-direction*='"_":"column-reverse"']{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}[data-preply-ds-component=LayoutFlex][data-ds-direction=row],[data-preply-ds-component=LayoutFlex][data-ds-direction*='"_":"row"']{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}[data-preply-ds-component=LayoutFlex][data-ds-direction=row-reverse],[data-preply-ds-component=LayoutFlex][data-ds-direction*='"_":"row-reverse"']{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}@media (min-width: 400px){[data-preply-ds-component=LayoutFlex][data-ds-direction*='"narrow-l":"column"']{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}[data-preply-ds-component=LayoutFlex][data-ds-direction*='"narrow-l":"column-reverse"']{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}[data-preply-ds-component=LayoutFlex][data-ds-direction*='"narrow-l":"row"']{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}[data-preply-ds-component=LayoutFlex][data-ds-direction*='"narrow-l":"row-reverse"']{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}}@media (min-width: 700px){[data-preply-ds-component=LayoutFlex][data-ds-direction*='"medium-s":"column"']{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}[data-preply-ds-component=LayoutFlex][data-ds-direction*='"medium-s":"column-reverse"']{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}[data-preply-ds-component=LayoutFlex][data-ds-direction*='"medium-s":"row"']{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}[data-preply-ds-component=LayoutFlex][data-ds-direction*='"medium-s":"row-reverse"']{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}}@media (min-width: 880px){[data-preply-ds-component=LayoutFlex][data-ds-direction*='"medium-l":"column"']{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}[data-preply-ds-component=LayoutFlex][data-ds-direction*='"medium-l":"column-reverse"']{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}[data-preply-ds-component=LayoutFlex][data-ds-direction*='"medium-l":"row"']{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}[data-preply-ds-component=LayoutFlex][data-ds-direction*='"medium-l":"row-reverse"']{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}}@media (min-width: 1200px){[data-preply-ds-component=LayoutFlex][data-ds-direction*='"wide-s":"column"']{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}[data-preply-ds-component=LayoutFlex][data-ds-direction*='"wide-s":"column-reverse"']{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}[data-preply-ds-component=LayoutFlex][data-ds-direction*='"wide-s":"row"']{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}[data-preply-ds-component=LayoutFlex][data-ds-direction*='"wide-s":"row-reverse"']{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}}@media (min-width: 1900px){[data-preply-ds-component=LayoutFlex][data-ds-direction*='"wide-l":"column"']{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}[data-preply-ds-component=LayoutFlex][data-ds-direction*='"wide-l":"column-reverse"']{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}[data-preply-ds-component=LayoutFlex][data-ds-direction*='"wide-l":"row"']{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}[data-preply-ds-component=LayoutFlex][data-ds-direction*='"wide-l":"row-reverse"']{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}}[data-preply-ds-component=LayoutFlex][data-ds-justifycontent=center],[data-preply-ds-component=LayoutFlex][data-ds-justifycontent*='"_":"center"']{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}[data-preply-ds-component=LayoutFlex][data-ds-justifycontent=start],[data-preply-ds-component=LayoutFlex][data-ds-justifycontent*='"_":"start"']{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}[data-preply-ds-component=LayoutFlex][data-ds-justifycontent=end],[data-preply-ds-component=LayoutFlex][data-ds-justifycontent*='"_":"end"']{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}[data-preply-ds-component=LayoutFlex][data-ds-justifycontent=space-between],[data-preply-ds-component=LayoutFlex][data-ds-justifycontent*='"_":"space-between"']{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}[data-preply-ds-component=LayoutFlex][data-ds-justifycontent=space-around],[data-preply-ds-component=LayoutFlex][data-ds-justifycontent*='"_":"space-around"']{-ms-flex-pack:distribute;justify-content:space-around}[data-preply-ds-component=LayoutFlex][data-ds-justifycontent=space-evenly],[data-preply-ds-component=LayoutFlex][data-ds-justifycontent*='"_":"space-evenly"']{-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly}@media (min-width: 400px){[data-preply-ds-component=LayoutFlex][data-ds-justifycontent*='"narrow-l":"center"']{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}[data-preply-ds-component=LayoutFlex][data-ds-justifycontent*='"narrow-l":"start"']{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}[data-preply-ds-component=LayoutFlex][data-ds-justifycontent*='"narrow-l":"end"']{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}[data-preply-ds-component=LayoutFlex][data-ds-justifycontent*='"narrow-l":"space-between"']{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}[data-preply-ds-component=LayoutFlex][data-ds-justifycontent*='"narrow-l":"space-around"']{-ms-flex-pack:distribute;justify-content:space-around}[data-preply-ds-component=LayoutFlex][data-ds-justifycontent*='"narrow-l":"space-evenly"']{-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly}}@media (min-width: 700px){[data-preply-ds-component=LayoutFlex][data-ds-justifycontent*='"medium-s":"center"']{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}[data-preply-ds-component=LayoutFlex][data-ds-justifycontent*='"medium-s":"start"']{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}[data-preply-ds-component=LayoutFlex][data-ds-justifycontent*='"medium-s":"end"']{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}[data-preply-ds-component=LayoutFlex][data-ds-justifycontent*='"medium-s":"space-between"']{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}[data-preply-ds-component=LayoutFlex][data-ds-justifycontent*='"medium-s":"space-around"']{-ms-flex-pack:distribute;justify-content:space-around}[data-preply-ds-component=LayoutFlex][data-ds-justifycontent*='"medium-s":"space-evenly"']{-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly}}@media (min-width: 880px){[data-preply-ds-component=LayoutFlex][data-ds-justifycontent*='"medium-l":"center"']{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}[data-preply-ds-component=LayoutFlex][data-ds-justifycontent*='"medium-l":"start"']{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}[data-preply-ds-component=LayoutFlex][data-ds-justifycontent*='"medium-l":"end"']{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}[data-preply-ds-component=LayoutFlex][data-ds-justifycontent*='"medium-l":"space-between"']{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}[data-preply-ds-component=LayoutFlex][data-ds-justifycontent*='"medium-l":"space-around"']{-ms-flex-pack:distribute;justify-content:space-around}[data-preply-ds-component=LayoutFlex][data-ds-justifycontent*='"medium-l":"space-evenly"']{-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly}}@media (min-width: 1200px){[data-preply-ds-component=LayoutFlex][data-ds-justifycontent*='"wide-s":"center"']{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}[data-preply-ds-component=LayoutFlex][data-ds-justifycontent*='"wide-s":"start"']{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}[data-preply-ds-component=LayoutFlex][data-ds-justifycontent*='"wide-s":"end"']{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}[data-preply-ds-component=LayoutFlex][data-ds-justifycontent*='"wide-s":"space-between"']{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}[data-preply-ds-component=LayoutFlex][data-ds-justifycontent*='"wide-s":"space-around"']{-ms-flex-pack:distribute;justify-content:space-around}[data-preply-ds-component=LayoutFlex][data-ds-justifycontent*='"wide-s":"space-evenly"']{-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly}}@media (min-width: 1900px){[data-preply-ds-component=LayoutFlex][data-ds-justifycontent*='"wide-l":"center"']{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}[data-preply-ds-component=LayoutFlex][data-ds-justifycontent*='"wide-l":"start"']{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}[data-preply-ds-component=LayoutFlex][data-ds-justifycontent*='"wide-l":"end"']{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}[data-preply-ds-component=LayoutFlex][data-ds-justifycontent*='"wide-l":"space-between"']{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}[data-preply-ds-component=LayoutFlex][data-ds-justifycontent*='"wide-l":"space-around"']{-ms-flex-pack:distribute;justify-content:space-around}[data-preply-ds-component=LayoutFlex][data-ds-justifycontent*='"wide-l":"space-evenly"']{-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly}}[data-preply-ds-component=LayoutFlex][data-ds-alignitems=center],[data-preply-ds-component=LayoutFlex][data-ds-alignitems*='"_":"center"']{-webkit-box-align:center;-ms-flex-align:center;align-items:center}[data-preply-ds-component=LayoutFlex][data-ds-alignitems=start],[data-preply-ds-component=LayoutFlex][data-ds-alignitems*='"_":"start"']{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}[data-preply-ds-component=LayoutFlex][data-ds-alignitems=end],[data-preply-ds-component=LayoutFlex][data-ds-alignitems*='"_":"end"']{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}[data-preply-ds-component=LayoutFlex][data-ds-alignitems=stretch],[data-preply-ds-component=LayoutFlex][data-ds-alignitems*='"_":"stretch"']{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}[data-preply-ds-component=LayoutFlex][data-ds-alignitems=baseline],[data-preply-ds-component=LayoutFlex][data-ds-alignitems*='"_":"baseline"']{-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline}@media (min-width: 400px){[data-preply-ds-component=LayoutFlex][data-ds-alignitems*='"narrow-l":"center"']{-webkit-box-align:center;-ms-flex-align:center;align-items:center}[data-preply-ds-component=LayoutFlex][data-ds-alignitems*='"narrow-l":"start"']{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}[data-preply-ds-component=LayoutFlex][data-ds-alignitems*='"narrow-l":"end"']{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}[data-preply-ds-component=LayoutFlex][data-ds-alignitems*='"narrow-l":"stretch"']{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}[data-preply-ds-component=LayoutFlex][data-ds-alignitems*='"narrow-l":"baseline"']{-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline}}@media (min-width: 700px){[data-preply-ds-component=LayoutFlex][data-ds-alignitems*='"medium-s":"center"']{-webkit-box-align:center;-ms-flex-align:center;align-items:center}[data-preply-ds-component=LayoutFlex][data-ds-alignitems*='"medium-s":"start"']{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}[data-preply-ds-component=LayoutFlex][data-ds-alignitems*='"medium-s":"end"']{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}[data-preply-ds-component=LayoutFlex][data-ds-alignitems*='"medium-s":"stretch"']{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}[data-preply-ds-component=LayoutFlex][data-ds-alignitems*='"medium-s":"baseline"']{-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline}}@media (min-width: 880px){[data-preply-ds-component=LayoutFlex][data-ds-alignitems*='"medium-l":"center"']{-webkit-box-align:center;-ms-flex-align:center;align-items:center}[data-preply-ds-component=LayoutFlex][data-ds-alignitems*='"medium-l":"start"']{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}[data-preply-ds-component=LayoutFlex][data-ds-alignitems*='"medium-l":"end"']{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}[data-preply-ds-component=LayoutFlex][data-ds-alignitems*='"medium-l":"stretch"']{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}[data-preply-ds-component=LayoutFlex][data-ds-alignitems*='"medium-l":"baseline"']{-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline}}@media (min-width: 1200px){[data-preply-ds-component=LayoutFlex][data-ds-alignitems*='"wide-s":"center"']{-webkit-box-align:center;-ms-flex-align:center;align-items:center}[data-preply-ds-component=LayoutFlex][data-ds-alignitems*='"wide-s":"start"']{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}[data-preply-ds-component=LayoutFlex][data-ds-alignitems*='"wide-s":"end"']{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}[data-preply-ds-component=LayoutFlex][data-ds-alignitems*='"wide-s":"stretch"']{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}[data-preply-ds-component=LayoutFlex][data-ds-alignitems*='"wide-s":"baseline"']{-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline}}@media (min-width: 1900px){[data-preply-ds-component=LayoutFlex][data-ds-alignitems*='"wide-l":"center"']{-webkit-box-align:center;-ms-flex-align:center;align-items:center}[data-preply-ds-component=LayoutFlex][data-ds-alignitems*='"wide-l":"start"']{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}[data-preply-ds-component=LayoutFlex][data-ds-alignitems*='"wide-l":"end"']{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}[data-preply-ds-component=LayoutFlex][data-ds-alignitems*='"wide-l":"stretch"']{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}[data-preply-ds-component=LayoutFlex][data-ds-alignitems*='"wide-l":"baseline"']{-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline}}

package/dist/assets/LayoutFlex-CTH6ELdm.js

@@ -1 +0,0 @@
-import{am as j,an as E,r as S,L as $,g as b,j as G}from"./iframe-B_74HtSc.js";import{f as B}from"./filterAttributesPassedByRadixUIAtRuntime-Bye2JkZ0.js";import{g,s as H,a as J,l as Y,b as W}from"./layout-relative.module-1z75aSwo-Dcy7i8oK.js";import{w as X}from"./componentNames-hc9KR2nX.js";const r=void 0;function k(e){const{nowrap:t}=e;return t?!0:r}function i(e){return JSON.stringify(e)}function q(e){const{direction:t,column:a,reverse:n}=e;return t===void 0?!n&&!a?{applyThrough:"direction",directionAttr:j}:{applyThrough:"columnReverse",columnReverseAttr:`${a?"column":"row"}-${n?"rev":"fwd"}`}:typeof t=="string"?{applyThrough:"direction",directionAttr:t}:{applyThrough:"direction",directionAttr:i(t)}}function z(e){const{justifyContent:t}=e;return t===void 0?r:typeof t=="string"?t:i(t)}function K(e){const{alignItems:t}=e;return t===void 0?r:typeof t=="string"?t:i(t)}function M(e){const{gap:t}=e;return t===void 0?r:typeof t=="string"?t:i(t)}function Q(e){const{padding:t}=e;return t===void 0?{applyThrough:"attr",attr:E}:typeof t=="string"||typeof t=="number"?{applyThrough:"attr",attr:t}:Array.isArray(t)?{applyThrough:"classnames",classNames:g(t)}:i(t).includes("[")?{applyThrough:"classnames",classNames:g(t)}:{applyThrough:"attr",attr:JSON.stringify(t)}}function V(e){const{hide:t,inline:a}=e;if(t===void 0)return r;const n=a?"inline-flex":"flex";if(typeof t=="boolean")return t?"hide":n;let s=i(t);return s=s.replace(/true/g,'"hide"'),s=s.replace(/false/g,`"${n}"`),s}function Z(e){const{relative:t}=e;return t===void 0?r:t===!0?!0:t===!1?r:i(t)}const tt={},et=S.forwardRef(function(t,a){const{gap:n,hide:s,column:l,nowrap:y,inline:m,dataset:A,reverse:h,padding:v,children:T,relative:R,direction:L,alignItems:x,justifyContent:D,tag:w=$,..._}=t,d=[tt.LayoutFlex,H.LayoutGap,J.LayoutHide,Y.layoutPadding,W.LayoutRelative],N=M({gap:n}),O=k({nowrap:y}),F=Z({relative:R}),I=V({hide:s,inline:m}),P=K({alignItems:x}),U=z({justifyContent:D});let c=r,p=r;const o=q({direction:L,column:l,reverse:h});o.applyThrough==="columnReverse"?p=o.columnReverseAttr:c=o.directionAttr;let f=r;const u=Q({padding:v});u.applyThrough==="classnames"?d.push(...u.classNames):f=u.attr;const C={...B(_),ref:a,className:d.join(" "),"data-ds-gap":N,"data-ds-nowrap":O,"data-ds-padding":f,"data-ds-display":I,"data-ds-relative":F,"data-ds-direction":c,"data-ds-alignitems":P,"data-ds-columnreverse":p,"data-ds-justifycontent":U,...b(A,{preplyDsComponent:X.LayoutFlex})};return G.jsx(w,{...C,children:T})});et.__docgenInfo={description:"",methods:[],displayName:"LayoutFlex"};export{et as L};