@preply/ds-docs 7.1.0 → 8.0.0

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

@@ -1,460 +0,0 @@
-import{j as y}from"./jsx-runtime-BTJTZTIL.js";import{e as x}from"./index-Cb9e4tly.js";import{f as Jt,w as se,u as q,a as rt,e as O}from"./index-Dk_MCKuE.js";import{s as zt,R as Yt}from"./RatingInput.stories-BmhUO-vY.js";import{L as it}from"./LayoutFlex-BkczeydK.js";import{H as Gt}from"./Heading-CzIRSKAr.js";import{T as at}from"./TextField-BRDwFAhX.js";import{N as Kt}from"./NumberField-CmClnfq6.js";import{S as Zt,a as ie}from"./SelectField-ByfZzt_b.js";import{P as st}from"./PasswordField-DAL68lC4.js";import{T as Qt}from"./TextareaField-BUSqPXn3.js";import{F as ce}from"./FormControl-BIPOTQBb.js";import{S as Xt}from"./Slider-GGejckz6.js";import{R as er}from"./RangeSlider-BKOYT1ZU.js";import{S as tr}from"./Switch-B-jGiz3C.js";import{a as rr,S as fe}from"./SingleSelectChips-D7f85tAs.js";import{a as ir,M as Re}from"./MultiSelectChips-9U0Tnh2Z.js";import{a as ar,D as lt}from"./DismissibleChips-BGcUuQYK.js";import{C as sr}from"./Checkbox-BnqXU33n.js";import{B as nt}from"./Button-C-6rDSzI.js";import"./index-ChsGqxH_.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./index-B-lxVbXh.js";import"./v4-CtRu48qb.js";import"./Stars-DGzJFzmk.js";import"./index-DWSmmBvQ.js";import"./tslib.es6-C7pnyCjR.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./TokyoUIStarFilled-CVOoYvsY.js";import"./render-icon-BT0Aq7PA.js";import"./useControllableState-DKskwY-e.js";import"./classNames-9hsFPPZv.js";import"./index-qlqSh81O.js";import"./componentNames-k0j3gHgH.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./layout-relative.module-FOVgic7W.js";import"./defaults-_YAxqn11.js";import"./text-accent-VILyY3zt.js";import"./text-centered-BFb64PJw.js";import"./Input-CfV08vH7.js";import"./InputContainer-Cnv--ROK.js";import"./TokyoUIChevronDown-CEw5hWWz.js";import"./Icon-BsfKiFZj.js";import"./TokyoUIEye-CteyS9_g.js";import"./FieldButton-DAY3HLuQ.js";import"./useMergeRefs-D_RfOOSs.js";import"./message-CSdaKtIj.js";import"./index-Cc-bXjHe.js";import"./index-BqT8peiM.js";import"./index-s7KTOhR7.js";import"./index-BPCsOyHr.js";import"./index-DR63UjCN.js";import"./createRequiredContext-DPmvfWRz.js";import"./CountryFlag-DuiC2miK.js";import"./TokyoUIClose-thK8sk63.js";import"./VisuallyHidden-CZd13GOS.js";import"./shared-strings-DFzxd8lM.js";import"./useMergeRefs-SFH7Mw4x.js";import"./ButtonBase-h431KMrY.js";import"./Spinner-qiZily8k.js";import"./useHostname-PsilflFC.js";import"./index-CC6DAVyL.js";var Se=e=>e.type==="checkbox",ge=e=>e instanceof Date,z=e=>e==null;const kt=e=>typeof e=="object";var j=e=>!z(e)&&!Array.isArray(e)&&kt(e)&&!ge(e),Ct=e=>j(e)&&e.target?Se(e.target)?e.target.checked:e.target.value:e,lr=e=>e.substring(0,e.search(/\.\d+(\.|$)/))||e,Rt=(e,i)=>e.has(lr(i)),nr=e=>{const i=e.constructor&&e.constructor.prototype;return j(i)&&i.hasOwnProperty("isPrototypeOf")},Oe=typeof window<"u"&&typeof window.HTMLElement<"u"&&typeof document<"u";function I(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||j(e)))if(i=t?[]:Object.create(Object.getPrototypeOf(e)),!t&&!nr(e))i=e;else for(const o in e)e.hasOwnProperty(o)&&(i[o]=I(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||!j(e))return t;const a=(_e(i)?[i]:Ne(i)).reduce((o,l)=>z(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,c=l-1;for(;++a<l;){const u=o[a];let k=t;if(a!==c){const C=e[u];k=j(C)||Array.isArray(C)?C:isNaN(+o[a+1])?{}:[]}if(u==="__proto__"||u==="constructor"||u==="prototype")return;e[u]=k,e=e[u]}};const Ve={BLUR:"blur",FOCUS_OUT:"focusout",CHANGE:"change"},Q={onBlur:"onBlur",onChange:"onChange",onSubmit:"onSubmit",onTouched:"onTouched",all:"all"},le={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 c=l;return i._proxyFormState[c]!==Q.all&&(i._proxyFormState[c]=!a||Q.all),t&&(t[c]=!0),e[c]}});return o};const Ue=typeof window<"u"?x.useLayoutEffect:x.useEffect;function or(e){const i=He(),{control:t=i.control,disabled:a,name:o,exact:l}=e||{},[c,u]=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:C=>{!a&&u({...t._formState,...C})}}),[o,a,l]),x.useEffect(()=>{k.current.isValid&&t._setValid(!0)},[t]),x.useMemo(()=>Et(c,t,k.current,!1),[c,t])}var G=e=>typeof e=="string",At=(e,i,t,a,o)=>G(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=>z(e)||!kt(e);function ne(e,i,t=new WeakSet){if(je(e)||je(i))return e===i;if(ge(e)&&ge(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 c=e[l];if(!o.includes(l))return!1;if(l!=="ref"){const u=i[l];if(ge(c)&&ge(u)||j(c)&&j(u)||Array.isArray(c)&&Array.isArray(u)?!ne(c,u,t):c!==u)return!1}}return!0}function cr(e){const i=He(),{control:t=i.control,name:a,defaultValue:o,disabled:l,exact:c,compute:u}=e||{},k=x.useRef(o),C=x.useRef(u),b=x.useRef(void 0);C.current=u;const F=x.useMemo(()=>t._getWatch(a,k.current),[t,a]),[p,W]=x.useState(C.current?C.current(F):F);return Ue(()=>t._subscribe({name:a,formState:{values:!0},exact:c,callback:H=>{if(!l){const V=At(a,t._names,H.values||t._formValues,!1,k.current);if(C.current){const v=C.current(V);ne(v,b.current)||(W(v),b.current=v)}else W(V)}}}),[t,l,a,c]),x.useEffect(()=>t._removeUnmounted()),p}function ur(e){const i=He(),{name:t,disabled:a,control:o=i.control,shouldUnregister:l,defaultValue:c}=e,u=Rt(o._names.array,t),k=x.useMemo(()=>m(o._formValues,t,m(o._defaultValues,t,c)),[o,t,c]),C=cr({control:o,name:t,defaultValue:k,exact:!0}),b=or({control:o,name:t,exact:!0}),F=x.useRef(e),p=x.useRef(void 0),W=x.useRef(o.register(t,{...e.rules,value:C,...Y(e.disabled)?{disabled:e.disabled}:{}}));F.current=e;const H=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]),V=x.useCallback(P=>W.current.onChange({target:{value:Ct(P),name:t},type:Ve.CHANGE}),[t]),v=x.useCallback(()=>W.current.onBlur({target:{value:m(o._formValues,t),name:t},type:Ve.BLUR}),[t,o._formValues]),D=x.useCallback(P=>{const N=m(o._fields,t);N&&P&&(N._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:C,...Y(a)||b.disabled?{disabled:b.disabled||a}:{},onChange:V,onBlur:v,ref:D}),[t,a,b.disabled,V,v,D,C]);return x.useEffect(()=>{const P=o._options.shouldUnregister||l,N=p.current;N&&N!==t&&!u&&o.unregister(N),o.register(t,{...F.current.rules,...Y(F.current.disabled)?{disabled:F.current.disabled}:{}});const B=(ae,ee)=>{const ue=m(o._fields,ae);ue&&ue._f&&(ue._f.mount=ee)};if(B(t,!0),P){const ae=I(m(o._options.defaultValues,t,F.current.defaultValue));_(o._defaultValues,t,ae),L(m(o._formValues,t))&&_(o._formValues,t,ae)}return!u&&o.register(t),p.current=t,()=>{(u?P&&!o._state.action:P)?o.unregister(t):B(t,!1)}},[t,o,u,l]),x.useEffect(()=>{o._setDisabledField({disabled:a,name:t})},[a,t,o]),x.useMemo(()=>({field:w,formState:b,fieldState:H}),[w,b,H])}const me=e=>e.render(ur(e));var dr=(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],ot=()=>{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&&j(o)&&l){const c=_t(o,l);j(c)&&(t[a]=c)}else e[a]&&(t[a]=l)}return t}var J=e=>j(e)&&!Object.keys(e).length,We=e=>e.type==="file",X=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",fr=e=>$e(e)||Se(e),Te=e=>Ee(e)&&e.isConnected;function mr(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 gr(e){for(const i in e)if(e.hasOwnProperty(i)&&!L(e[i]))return!1;return!0}function T(e,i){const t=Array.isArray(i)?i:_e(i)?[i]:Ne(i),a=t.length===1?e:mr(e,t),o=t.length-1,l=t[o];return a&&delete a[l],o!==0&&(j(a)&&J(a)||Array.isArray(a)&&gr(a))&&T(e,t.slice(0,-1)),e}var yr=e=>{for(const i in e)if(X(e[i]))return!0;return!1};function Pt(e){return Array.isArray(e)||j(e)&&!yr(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],z(i)?{}:i[a],t[a]):t[a]=!ne(e[a],i[a]);return t}const ct={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:ct}return ct},Mt=(e,{valueAsNumber:i,valueAsDate:t,setValueAs:a})=>L(e)?e:i?e===""?NaN:e&&+e:t&&G(e)?new Date(e):a?a(e):e;const dt={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,dt):dt;function ft(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 hr=(e,i,t,a)=>{const o={};for(const l of e){const c=m(i,l);c&&_(o,l,c._f)}return{criteriaMode:t,names:[...e],fields:o,shouldUseNativeValidation:a}},Ae=e=>e instanceof RegExp,be=e=>L(e)?e:Ae(e)?e.source:j(e)?Ae(e.value)?e.value.source:e.value:e,mt=e=>({isOnSubmit:!e||e===Q.onSubmit,isOnBlur:e===Q.onBlur,isOnChange:e===Q.onChange,isOnAll:e===Q.all,isOnTouch:e===Q.onTouched});const gt="AsyncFunction";var vr=e=>!!e&&!!e.validate&&!!(X(e.validate)&&e.validate.constructor.name===gt||j(e.validate)&&Object.values(e.validate).find(i=>i.constructor.name===gt)),pr=e=>e.mount&&(e.required||e.min||e.max||e.maxLength||e.minLength||e.pattern||e.validate),yt=(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:c,...u}=l;if(c){if(c.refs&&c.refs[0]&&i(c.refs[0],o)&&!a)return!0;if(c.ref&&i(c.ref,c.name)&&!a)return!0;if(Fe(u,i))break}else if(j(u)&&Fe(u,i))break}}};function ht(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("."),c=m(i,l),u=m(e,l);if(c&&!Array.isArray(c)&&t!==l)return{name:t};if(u&&u.type)return{name:l,error:u};if(u&&u.root&&u.root.type)return{name:`${l}.root`,error:u.root};o.pop()}return{name:t}}var br=(e,i,t,a)=>{t(e);const{name:o,...l}=e;return J(l)||Object.keys(l).length>=Object.keys(i).length||Object.keys(l).find(c=>i[c]===(!a||Q.all))},xr=(e,i,t)=>!e||!i||e===i||we(e).some(a=>a&&(t?a===i:a.startsWith(i)||i.startsWith(a))),wr=(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,Fr=(e,i)=>!Ie(m(e,i)).length&&T(e,i),Sr=(e,i,t)=>{const a=we(m(e,t));return _(a,"root",i[t]),_(e,t,a),e};function vt(e,i,t="validate"){if(G(e)||Array.isArray(e)&&e.every(G)||Y(e)&&!e)return{type:t,message:G(e)?e:"",ref:i}}var he=e=>j(e)&&!Ae(e)?e:{value:e,message:""},pt=async(e,i,t,a,o,l)=>{const{ref:c,refs:u,required:k,maxLength:C,minLength:b,min:F,max:p,pattern:W,validate:H,name:V,valueAsNumber:v,mount:D}=e._f,w=m(t,V);if(!D||i.has(V))return{};const P=u?u[0]:c,N=S=>{o&&P.reportValidity&&(P.setCustomValidity(Y(S)?"":S||""),P.reportValidity())},B={},ae=$e(c),ee=Se(c),ue=ae||ee,Z=(v||We(c))&&L(c.value)&&L(w)||Ee(c)&&c.value===""||w===""||Array.isArray(w)&&!w.length,de=dr.bind(null,V,a,B),te=(S,E,M,U=le.maxLength,$=le.minLength)=>{const re=S?E:M;B[V]={type:S?U:$,message:re,ref:c,...de(S?U:$,re)}};if(l?!Array.isArray(w)||!w.length:k&&(!ue&&(Z||z(w))||Y(w)&&!w||ee&&!Lt(u).isValid||ae&&!Dt(u).isValid)){const{value:S,message:E}=G(k)?{value:!!k,message:k}:he(k);if(S&&(B[V]={type:le.required,message:E,ref:P,...de(le.required,E)},!a))return N(E),B}if(!Z&&(!z(F)||!z(p))){let S,E;const M=he(p),U=he(F);if(!z(w)&&!isNaN(w)){const $=c.valueAsNumber||w&&+w;z(M.value)||(S=$>M.value),z(U.value)||(E=$<U.value)}else{const $=c.valueAsDate||new Date(w),re=ke=>new Date(new Date().toDateString()+" "+ke),pe=c.type=="time",ye=c.type=="week";G(M.value)&&w&&(S=pe?re(w)>re(M.value):ye?w>M.value:$>new Date(M.value)),G(U.value)&&w&&(E=pe?re(w)<re(U.value):ye?w<U.value:$<new Date(U.value))}if((S||E)&&(te(!!S,M.message,U.message,le.max,le.min),!a))return N(B[V].message),B}if((C||b)&&!Z&&(G(w)||l&&Array.isArray(w))){const S=he(C),E=he(b),M=!z(S.value)&&w.length>+S.value,U=!z(E.value)&&w.length<+E.value;if((M||U)&&(te(M,S.message,E.message),!a))return N(B[V].message),B}if(W&&!Z&&G(w)){const{value:S,message:E}=he(W);if(Ae(S)&&!w.match(S)&&(B[V]={type:le.pattern,message:E,ref:c,...de(le.pattern,E)},!a))return N(E),B}if(H){if(X(H)){const S=await H(w,t),E=vt(S,P);if(E&&(B[V]={...E,...de(le.validate,E.message)},!a))return N(E.message),B}else if(j(H)){let S={};for(const E in H){if(!J(S)&&!a)break;const M=vt(await H[E](w,t),P,E);M&&(S={...M,...de(E,M.message)},N(M.message),a&&(B[V]=S))}if(!J(S)&&(B[V]={ref:P,...S},!a))return B}}return N(!0),B};const kr={mode:Q.onSubmit,reValidateMode:Q.onChange,shouldFocusError:!0};function Cr(e={}){let i={...kr,...e},t={submitCount:0,isDirty:!1,isReady:!1,isLoading:X(i.defaultValues),isValidating:!1,isSubmitted:!1,isSubmitting:!1,isSubmitSuccessful:!1,isValid:!1,touchedFields:{},dirtyFields:{},validatingFields:{},errors:i.errors||{},disabled:i.disabled||!1},a={},o=j(i.defaultValues)||j(i.values)?I(i.defaultValues||i.values)||{}:{},l=i.shouldUnregister?{}:I(o),c={action:!1,mount:!1,watch:!1},u={mount:new Set,disabled:new Set,unMount:new Set,array:new Set,watch:new Set},k,C=0;const b={isDirty:!1,dirtyFields:!1,validatingFields:!1,touchedFields:!1,isValidating:!1,isValid:!1,errors:!1};let F={...b};const p={array:ot(),state:ot()},W=i.criteriaMode===Q.all,H=r=>s=>{clearTimeout(C),C=setTimeout(r,s)},V=async r=>{if(!i.disabled&&(b.isValid||F.isValid||r)){const s=i.resolver?J((await ee()).errors):await Z(a,!0);s!==t.isValid&&p.state.next({isValid:s})}},v=(r,s)=>{!i.disabled&&(b.isValidating||b.validatingFields||F.isValidating||F.validatingFields)&&((r||Array.from(u.mount)).forEach(n=>{n&&(s?_(t.validatingFields,n,s):T(t.validatingFields,n))}),p.state.next({validatingFields:t.validatingFields,isValidating:!J(t.validatingFields)}))},D=(r,s=[],n,g,f=!0,d=!0)=>{if(g&&n&&!i.disabled){if(c.action=!0,d&&Array.isArray(m(a,r))){const h=n(m(a,r),g.argA,g.argB);f&&_(a,r,h)}if(d&&Array.isArray(m(t.errors,r))){const h=n(m(t.errors,r),g.argA,g.argB);f&&_(t.errors,r,h),Fr(t.errors,r)}if((b.touchedFields||F.touchedFields)&&d&&Array.isArray(m(t.touchedFields,r))){const h=n(m(t.touchedFields,r),g.argA,g.argB);f&&_(t.touchedFields,r,h)}(b.dirtyFields||F.dirtyFields)&&(t.dirtyFields=ve(o,l)),p.state.next({name:r,isDirty:te(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})},N=(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:ft(f._f)):M(r,d),c.mount&&V()}},B=(r,s,n,g,f)=>{let d=!1,h=!1;const R={name:r};if(!i.disabled){if(!n||g){(b.isDirty||F.isDirty)&&(h=t.isDirty,t.isDirty=R.isDirty=te(),d=h!==R.isDirty);const A=ne(m(o,r),s);h=!!m(t.dirtyFields,r),A?T(t.dirtyFields,r):_(t.dirtyFields,r,!0),R.dirtyFields=t.dirtyFields,d=d||(b.dirtyFields||F.dirtyFields)&&h!==!A}if(n){const A=m(t.touchedFields,r);A||(_(t.touchedFields,r,n),R.touchedFields=t.touchedFields,d=d||(b.touchedFields||F.touchedFields)&&A!==n)}d&&f&&p.state.next(R)}return d?R:{}},ae=(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=H(()=>w(r,n)),k(i.delayError)):(clearTimeout(C),k=null,n?_(t.errors,r,n):T(t.errors,r)),(n?!ne(f,n):f)||!J(g)||d){const h={...g,...d&&Y(s)?{isValid:s}:{},errors:t.errors,name:r};t={...t,...h},p.state.next(h)}},ee=async r=>{v(r,!0);const s=await i.resolver(l,i.context,hr(r||u.mount,a,i.criteriaMode,i.shouldUseNativeValidation));return v(r),s},ue=async r=>{const{errors:s}=await ee(r);if(r)for(const n of r){const g=m(s,n);g?_(t.errors,n,g):T(t.errors,n)}else t.errors=s;return s},Z=async(r,s,n={valid:!0})=>{for(const g in r){const f=r[g];if(f){const{_f:d,...h}=f;if(d){const R=u.array.has(d.name),A=f._f&&vr(f._f);A&&b.validatingFields&&v([d.name],!0);const K=await pt(f,u.disabled,l,W,i.shouldUseNativeValidation&&!s,R);if(A&&b.validatingFields&&v([d.name]),K[d.name]&&(n.valid=!1,s))break;!s&&(m(K,d.name)?R?Sr(t.errors,K,d.name):_(t.errors,d.name,K[d.name]):T(t.errors,d.name))}!J(h)&&await Z(h,s,n)}}return n.valid},de=()=>{for(const r of u.unMount){const s=m(a,r);s&&(s._f.refs?s._f.refs.every(n=>!Te(n)):!Te(s._f.ref))&&Be(r)}u.unMount=new Set},te=(r,s)=>!i.disabled&&(r&&s&&_(l,r,s),!ne(ke(),o)),S=(r,s,n)=>At(r,u,{...c.mount?l:L(s)?o:G(r)?{[r]:s}:s},n,s),E=r=>Ie(m(c.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)&&z(s)?"":s,Bt(d.ref)?[...d.ref.options].forEach(h=>h.selected=f.includes(h.value)):d.refs?Se(d.ref)?d.refs.forEach(h=>{(!h.defaultChecked||!h.disabled)&&(Array.isArray(f)?h.checked=!!f.find(R=>R===h.value):h.checked=f===h.value||!!f)}):d.refs.forEach(h=>h.checked=h.value===f):We(d.ref)?d.ref.value="":(d.ref.value=f,d.ref.type||p.state.next({name:r,values:I(l)})))}(n.shouldDirty||n.shouldTouch)&&B(r,f,n.shouldTouch,n.shouldDirty,!0),n.shouldValidate&&ye(r)},U=(r,s,n)=>{for(const g in s){if(!s.hasOwnProperty(g))return;const f=s[g],d=r+"."+g,h=m(a,d);(u.array.has(r)||j(f)||h&&!h._f)&&!ge(f)?U(d,f,n):M(d,f,n)}},$=(r,s,n={})=>{const g=m(a,r),f=u.array.has(r),d=I(s);_(l,r,d),f?(p.array.next({name:r,values:I(l)}),(b.isDirty||b.dirtyFields||F.isDirty||F.dirtyFields)&&n.shouldDirty&&p.state.next({name:r,dirtyFields:ve(o,l),isDirty:te(r,d)})):g&&!g._f&&!z(d)?U(r,d,n):M(r,d,n),yt(r,u)&&p.state.next({...t,name:r}),p.state.next({name:c.mount?r:void 0,values:I(l)})},re=async r=>{c.mount=!0;const s=r.target;let n=s.name,g=!0;const f=m(a,n),d=A=>{g=Number.isNaN(A)||ge(A)&&isNaN(A.getTime())||ne(A,m(l,n,A))},h=mt(i.mode),R=mt(i.reValidateMode);if(f){let A,K;const Ce=s.type?ft(f._f):Ct(r),oe=r.type===Ve.BLUR||r.type===Ve.FOCUS_OUT,Ut=!pr(f._f)&&!i.resolver&&!m(t.errors,n)&&!f._f.deps||wr(oe,m(t.touchedFields,n),t.isSubmitted,R,h),Me=yt(n,u,oe);_(l,n,Ce),oe?(!s||!s.readOnly)&&(f._f.onBlur&&f._f.onBlur(r),k&&k(0)):f._f.onChange&&f._f.onChange(r);const De=B(n,Ce,oe),Wt=!J(De)||Me;if(!oe&&p.state.next({name:n,type:r.type,values:I(l)}),Ut)return(b.isValid||F.isValid)&&(i.mode==="onBlur"?oe&&V():oe||V()),Wt&&p.state.next({name:n,...Me?{}:De});if(!oe&&Me&&p.state.next({...t}),i.resolver){const{errors:et}=await ee([n]);if(d(Ce),g){const $t=ht(t.errors,a,n),tt=ht(et,a,$t.name||n);A=tt.error,n=tt.name,K=J(et)}}else v([n],!0),A=(await pt(f,u.disabled,l,W,i.shouldUseNativeValidation))[n],v([n]),d(Ce),g&&(A?K=!1:(b.isValid||F.isValid)&&(K=await Z(a,!0)));g&&(f._f.deps&&(!Array.isArray(f._f.deps)||f._f.deps.length>0)&&ye(f._f.deps),ae(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 ue(L(r)?r:f);n=J(d),g=r?!f.some(h=>m(d,h)):n}else r?(g=(await Promise.all(f.map(async d=>{const h=m(a,d);return await Z(h&&h._f?{[d]:h}:h)}))).every(Boolean),!(!g&&!t.isValid)&&V()):g=n=await Z(a);return p.state.next({...!G(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:u.mount),g},ke=(r,s)=>{let n={...c.mount?l:o};return s&&(n=_t(s.dirtyFields?t.dirtyFields:t.touchedFields,n)),L(r)?n:G(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=>T(t.errors,s)),p.state.next({errors:r?t.errors:{}})},ze=(r,s,n)=>{const g=(m(a,r,{_f:{}})._f||{}).ref,f=m(t.errors,r)||{},{ref:d,message:h,type:R,...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)=>X(r)?p.state.subscribe({next:n=>"values"in n&&r(S(void 0,s),n)}):S(r,s,!0),Ye=r=>p.state.subscribe({next:s=>{xr(r.name,s.name,r.exact)&&br(s,r.formState||b,Ht,r.reRenderRoot)&&r.callback({values:{...l},...t,...s,defaultValues:o})}}).unsubscribe,qt=r=>(c.mount=!0,F={...F,...r.formState},Ye({...r,formState:F})),Be=(r,s={})=>{for(const n of r?we(r):u.mount)u.mount.delete(n),u.array.delete(n),s.keepValue||(T(a,n),T(l,n)),!s.keepError&&T(t.errors,n),!s.keepDirty&&T(t.dirtyFields,n),!s.keepTouched&&T(t.touchedFields,n),!s.keepIsValidating&&T(t.validatingFields,n),!i.shouldUnregister&&!s.keepDefaultValue&&T(o,n);p.state.next({values:I(l)}),p.state.next({...t,...s.keepDirty?{isDirty:te()}:{}}),!s.keepIsValid&&V()},Ge=({disabled:r,name:s})=>{(Y(r)&&c.mount||r||u.disabled.has(s))&&(r?u.disabled.add(s):u.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}}),u.mount.add(r),n?Ge({disabled:Y(s.disabled)?s.disabled:i.disabled,name:r}):N(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:re,onBlur:re,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,h=fr(d),R=n._f.refs||[];if(h?R.find(A=>A===d):d===n._f.ref)return;_(a,r,{_f:{...n._f,...h?{refs:[...R.filter(Te),d,...Array.isArray(m(o,r))?[{}]:[]],ref:{type:d.type,name:r}}:{ref:d}}}),N(r,!1,void 0,d)}else n=m(a,r,{}),n._f&&(n._f.mount=!1),(i.shouldUnregister||s.shouldUnregister)&&!(Rt(u.array,r)&&c.action)&&u.unMount.add(r)}}},Le=()=>i.shouldFocusError&&Fe(a,pe,u.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))},Ke=(r,s)=>async n=>{let g;n&&(n.preventDefault&&n.preventDefault(),n.persist&&n.persist());let f=I(l);if(p.state.next({isSubmitting:!0}),i.resolver){const{errors:d,values:h}=await ee();t.errors=d,f=I(h)}else await Z(a);if(u.disabled.size)for(const d of u.disabled)T(f,d);if(T(t.errors,"root"),J(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:J(t.errors)&&!g,submitCount:t.submitCount+1,errors:t.errors}),g)throw g},It=(r,s={})=>{m(a,r)&&(L(s.defaultValue)?$(r,I(m(o,r))):($(r,s.defaultValue),_(o,r,I(s.defaultValue))),s.keepTouched||T(t.touchedFields,r),s.keepDirty||(T(t.dirtyFields,r),t.isDirty=s.defaultValue?te(r,I(m(o,r))):te()),s.keepError||(T(t.errors,r),b.isValid&&V()),p.state.next({...t}))},Ze=(r,s={})=>{const n=r?I(r):o,g=I(n),f=J(r),d=f?o:g;if(s.keepDefaultValues||(o=n),!s.keepValues){if(s.keepDirtyValues){const h=new Set([...u.mount,...Object.keys(ve(o,l))]);for(const R of Array.from(h))m(t.dirtyFields,R)?_(d,R,m(l,R)):$(R,m(d,R))}else{if(Oe&&L(r))for(const h of u.mount){const R=m(a,h);if(R&&R._f){const A=Array.isArray(R._f.refs)?R._f.refs[0]:R._f.ref;if(Ee(A)){const K=A.closest("form");if(K){K.reset();break}}}}if(s.keepFieldsRef)for(const h of u.mount)$(h,m(d,h));else a={}}l=i.shouldUnregister?s.keepDefaultValues?I(o):{}:I(d),p.array.next({values:{...d}}),p.state.next({values:{...d}})}u={mount:s.keepDirtyValues?u.mount:new Set,unMount:new Set,array:new Set,disabled:new Set,watch:new Set,watchAll:!1,focus:""},c.mount=!b.isValid||!!s.keepIsValid||!!s.keepDirtyValues,c.watch=!!i.shouldUnregister,p.state.next({submitCount:s.keepSubmitCount?t.submitCount:0,isDirty:f?!1:s.keepDirty?t.isDirty:!!(s.keepDefaultValues&&!ne(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(X(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&&X(f.select)&&f.select())}},Ht=r=>{t={...t,...r}},Xe={control:{register:Pe,unregister:Be,getFieldState:Je,handleSubmit:Ke,setError:ze,_subscribe:Ye,_runSchema:ee,_focusError:Le,_getWatch:S,_getDirty:te,_setValid:V,_setFieldArray:D,_setDisabledField:Ge,_setErrors:P,_getFieldArray:E,_reset:Ze,_resetDefaultValues:()=>X(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 c},set _state(r){c=r},get _defaultValues(){return o},get _names(){return u},set _names(r){u=r},get _formState(){return t},get _options(){return i},set _options(r){i={...i,...r}}},subscribe:qt,trigger:ye,register:Pe,handleSubmit:Ke,watch:jt,setValue:$,getValues:ke,reset:Qe,resetField:It,clearErrors:Tt,unregister:Be,setError:ze,setFocus:Nt,getFieldState:Je};return{...Xe,formControl:Xe}}function Rr(e={}){const i=x.useRef(void 0),t=x.useRef(void 0),[a,o]=x.useState({isDirty:!1,isValidating:!1,isLoading:X(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:X(e.defaultValues)?void 0:e.defaultValues});if(!i.current)if(e.formControl)i.current={...e.formControl,formState:a},e.defaultValues&&!X(e.defaultValues)&&e.formControl.reset(e.defaultValues,e.resetOptions);else{const{formControl:c,...u}=Cr(e);i.current={...u,formState:a}}const l=i.current.control;return l._options=e,Ue(()=>{const c=l._subscribe({formState:l._proxyFormState,callback:()=>o({...l._formState}),reRenderRoot:!0});return o(u=>({...u,isReady:!0})),l._formState.isReady=!0,c},[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 c=l._getDirty();c!==a.isDirty&&l._subjects.state.next({isDirty:c})}},[l,a.isDirty]),x.useEffect(()=>{e.values&&!ne(e.values,t.current)?(l._reset(e.values,{keepFieldsRef:!0,...l._options.resetOptions}),t.current=e.values,o(c=>({...c}))):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 Ti={title:"Guides/Integration with React Hook Form",args:{onSubmit:Jt(e=>{console.log("Form submitted:",e)})}},xe={render:function(i){const t=()=>{var k,C,b,F,p,W,H,V;const{register:a,handleSubmit:o,formState:{errors:l},reset:c,control:u}=Rr({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(it,{direction:"column",gap:"16",children:[y.jsx(Gt,{variant:"extraLarge",tag:"h1",children:"User Registration Form"}),y.jsxs("form",{onSubmit:o(i.onSubmit),style:{display:"contents"},noValidate:!0,children:[y.jsx(at,{label:"Full Name",...a("fullName",{required:"Full name is required"}),error:(k=l.fullName)==null?void 0:k.message,required:!0}),y.jsx(at,{label:"Email",type:"email",...a("email",{required:"Email is required"}),error:(C=l.email)==null?void 0:C.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.jsxs(Zt,{label:"Country",placeholder:"",...a("country",{required:"Country is required"}),error:(F=l.country)==null?void 0:F.message,required:!0,children:[y.jsx(ie,{value:"us",children:"United States"}),y.jsx(ie,{value:"ca",children:"Canada"}),y.jsx(ie,{value:"uk",children:"United Kingdom"}),y.jsx(ie,{value:"de",children:"Germany"}),y.jsx(ie,{value:"fr",children:"France"}),y.jsx(ie,{value:"it",children:"Italy"}),y.jsx(ie,{value:"es",children:"Spain"}),y.jsx(ie,{value:"au",children:"Australia"}),y.jsx(ie,{value:"jp",children:"Japan"}),y.jsx(ie,{value:"other",children:"Other"})]}),y.jsx(st,{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:(p=l.password)==null?void 0:p.message,required:!0}),y.jsx(st,{label:"Confirm Password",...a("confirmPassword",{required:"Please confirm your password",validate:(v,D)=>v===D.password||"Passwords do not match"}),error:(W=l.confirmPassword)==null?void 0:W.message,required:!0}),y.jsx(Qt,{label:"Bio",...a("bio",{maxLength:{value:500,message:"Bio must be less than 500 characters"}}),error:(H=l.bio)==null?void 0:H.message}),y.jsx(me,{name:"experienceLevel",control:u,rules:{validate:{minValue:v=>v<50?"Must be above 50":!0}},render:({field:v})=>{var D;return y.jsx(ce,{label:"Experience Level",error:(D=l.experienceLevel)==null?void 0:D.message,children:y.jsx(Xt,{value:v.value,onValueChange:v.onChange,min:0,max:100,"aria-label":"Experience Level"})})}}),y.jsx(me,{name:"priceRange",control:u,rules:{validate:{minValue:([v])=>v<=25?"Minimum must be above 25":!0,maxValue:([,v])=>v>=75?"Maximum must be below 75":!0}},render:({field:v})=>{var D;return y.jsx(ce,{label:"Price",error:(D=l.priceRange)==null?void 0:D.message,children:y.jsx(er,{value:v.value,onValueChange:v.onChange,min:0,max:100,"aria-label":"Price Range"})})}}),y.jsx(me,{name:"emailNotifications",control:u,render:({field:v})=>{var D;return y.jsx(ce,{label:"Email Notifications",description:"Receive updates and newsletters via email",error:(D=l.emailNotifications)==null?void 0:D.message,children:y.jsx(tr,{checked:v.value,onCheckedChange:v.onChange,"aria-label":"Email Notifications"})})}}),y.jsx(me,{control:u,name:"englishLevel",rules:{required:"English level is required"},render:({field:v})=>y.jsx(ce,{label:"English Level",required:!0,children:y.jsxs(rr,{"aria-label":"English Level",value:v.value,onValueChange:v.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(me,{control:u,name:"skills",rules:{required:"Skills are required"},render:({field:v})=>y.jsx(ce,{label:"Skills",required:!0,children:y.jsxs(ir,{"aria-label":"Skills",value:v.value,onValueChange:v.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(me,{control:u,name:"marketing",rules:{required:"Marketing is required"},render:({field:v})=>y.jsx(ce,{label:"Marketing",description:"How do you want to receive marketing communications?",required:!0,children:y.jsxs(ar,{"aria-label":"Marketing",value:v.value,onValueChange:v.onChange,children:[y.jsx(lt,{value:"emails",children:"Marketing emails"}),y.jsx(lt,{value:"push",children:"Push notifications"})]})})}),y.jsx(ce,{label:"Accept Privacy Policy",description:"I accept the Privacy Policy",error:(V=l.privacyPolicyAccepted)==null?void 0:V.message,hideLabel:!0,children:y.jsx(sr,{...a("privacyPolicyAccepted",{required:"You must accept the Privacy Policy"})})}),y.jsx(me,{name:"registrationExperience",control:u,render:({field:v})=>{var D;return y.jsx(ce,{label:"Rate the registration experience",description:"Was the form easy to understand?",error:(D=l.registrationExperience)==null?void 0:D.message,id:"registrationExperienceField",children:y.jsx(Yt,{value:v.value,onValueChange:v.onChange})})}}),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 a=se(i);await t("Fill full name field",async()=>{await q.type(a.getByRole("textbox",{name:"Full Name"}),"John Doe")}),await t("Fill email field",async()=>{await q.type(a.getByRole("textbox",{name:"Email"}),"john.doe@example.com")}),await t("Fill age field",async()=>{await q.clear(a.getByRole("spinbutton",{name:"Age"})),await q.type(a.getByRole("spinbutton",{name:"Age"}),"25")}),await t("Fill country field",async()=>{await q.selectOptions(a.getByRole("combobox",{name:"Country"}),"us")}),await t("Fill password field",async()=>{await q.type(a.getByLabelText(/^Password/),"TestPassword123!")}),await t("Fill confirm password field",async()=>{await q.type(a.getByLabelText(/^Confirm Password/),"TestPassword123!")}),await t("Fill bio field",async()=>{await q.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 q.keyboard("{ArrowRight}".repeat(5))}),await t("Move price range slider minimum",async()=>{a.getByRole("slider",{name:"Minimum Price Range"}).focus(),await q.keyboard("{ArrowRight}".repeat(2))}),await t("Move price range slider maximum",async()=>{a.getByRole("slider",{name:"Maximum Price Range"}).focus(),await q.keyboard("{ArrowLeft}".repeat(2))}),await t("Select english level",async()=>{const l=a.getByRole("listbox",{name:"English Level"}),c=se(l).getByRole("option",{name:"B2"});await q.click(c)}),await t("Select reading skill",async()=>{const l=a.getByRole("listbox",{name:"Skills"}),c=se(l).getByRole("option",{name:"Reading"});await q.click(c)}),await t("Select listening skill",async()=>{const l=a.getByRole("listbox",{name:"Skills"}),c=se(l).getByRole("option",{name:"Listening"});await q.click(c)}),await t("Dismiss push notifications",async()=>{const l=a.getByRole("list",{name:"Marketing"}),c=se(l).getByRole("button",{name:"Remove Push notifications"});await q.click(c)}),await t("Accept privacy policy",async()=>{const l=a.getByRole("checkbox",{name:"Accept Privacy Policy"});await q.click(l)}),await t("Toggle email notifications",async()=>{await q.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 zt({value:5,rating:o})}),await t("Submit the form",async()=>{await q.click(a.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"],registrationExperience:5},O.anything())})}),await t("Reset the form",async()=>{await q.click(a.getByRole("button",{name:"Reset"}))}),await t("Assert all fields are cleared",async()=>{await rt(()=>{O(a.getByRole("textbox",{name:"Full Name"})).not.toHaveValue(),O(a.getByRole("textbox",{name:"Email"})).not.toHaveValue(),O(a.getByRole("spinbutton",{name:"Age"})).not.toHaveValue(),O(a.getByRole("combobox",{name:"Country"})).not.toHaveValue(),O(a.getByLabelText(/^Password/)).not.toHaveValue(),O(a.getByLabelText(/^Confirm Password/)).not.toHaveValue(),O(a.getByRole("textbox",{name:"Bio"})).not.toHaveValue(),O(a.getByRole("checkbox",{name:"Accept Privacy Policy"})).not.toBeChecked(),O(a.getByRole("switch",{name:"Email Notifications"})).toHaveAttribute("aria-checked","true"),O(a.getByRole("slider",{name:"Experience Level"})).toHaveAttribute("aria-valuenow","50"),O(a.getByRole("slider",{name:"Minimum Price Range"})).toHaveAttribute("aria-valuenow","25"),O(a.getByRole("slider",{name:"Maximum Price Range"})).toHaveAttribute("aria-valuenow","75");const l=a.getByRole("listbox",{name:"English Level"});se(l).getAllByRole("option").forEach(C=>{O(C).toHaveAttribute("aria-selected","false")});const c=a.getByRole("listbox",{name:"Skills"});se(c).getAllByRole("option").forEach(C=>{O(C).toHaveAttribute("aria-selected","false")});const u=a.getByRole("list",{name:"Marketing"});O(se(u).getByRole("button",{name:"Remove Marketing emails"})).toBeVisible(),O(se(u).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");O(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 />
-
-                            <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>
-
-                            <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 () => {
-      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'
-      }));
-    });
-    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 ji=["IntegrationWithReactHookForm"];export{xe as IntegrationWithReactHookForm,ji as __namedExportsOrder,Ti as default};

package/dist/assets/IntlFormattedCurrency.stories-BMYzNxPt.js

@@ -1 +0,0 @@
-import{j as t}from"./jsx-runtime-BTJTZTIL.js";import{r as u,e as G}from"./index-Cb9e4tly.js";import"./index-DWSmmBvQ.js";import{a as z,b as J,L as K,W as I,T as Q,c as X,l as $,d as N,e as Y,f as v,I as Z,u as tt}from"./constants-DVSid1Xr.js";import{u as et}from"./index-C5uDgNEj.js";import{T as D}from"./Text-DVl1HBkZ.js";import{N as A}from"./NumberField-CmClnfq6.js";import{L as b}from"./LayoutFlex-BkczeydK.js";import{L as rt}from"./LayoutGrid-B5JJKgNY.js";import{H as ot}from"./Heading-CzIRSKAr.js";import{B as nt}from"./Button-C-6rDSzI.js";import{C as st}from"./Checkbox-BnqXU33n.js";import"./index-ChsGqxH_.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./tslib.es6-C7pnyCjR.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./styled-components.browser.esm-COuAnjOv.js";import"./getTokenVar-4Jlty0xz.js";import"./constants-DTpaCXm6.js";import"./tokens-BYLcI6Lk.js";import"./text-accent-VILyY3zt.js";import"./classNames-9hsFPPZv.js";import"./text-centered-BFb64PJw.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./componentNames-k0j3gHgH.js";import"./index-qlqSh81O.js";import"./defaults-_YAxqn11.js";import"./FormControl-BIPOTQBb.js";import"./message-CSdaKtIj.js";import"./index-Cc-bXjHe.js";import"./Input-CfV08vH7.js";import"./InputContainer-Cnv--ROK.js";import"./layout-relative.module-FOVgic7W.js";import"./breakpoints-BfMlrtxE.js";import"./layout-relative-Rn-Bns4t.js";import"./constants-DYYVurUY.js";import"./render-icon-BT0Aq7PA.js";import"./ButtonBase-h431KMrY.js";import"./Spinner-qiZily8k.js";import"./useMergeRefs-SFH7Mw4x.js";import"./useHostname-PsilflFC.js";import"./index-CC6DAVyL.js";const at={rounded:{currencyDisplay:"narrowSymbol",maximumFractionDigits:0},short:{currencyDisplay:"narrowSymbol"},explicit:{currencyDisplay:"code",compactDisplay:"long"}},T=({currency:n,variant:r})=>({...{style:"currency",currency:n,currencySign:"standard",numberingSystem:"latn"},...at[r]}),_={id:"-",ja:"～",ko:"~",th:" – ",zh:"–"},it="–",j=({formattedString:n,locale:r,showPlusSign:a})=>{const m=a?z(n):n;return K.includes(r)?J(m):m},F=()=>{const{formatNumber:n,locale:r}=et(),a=({value:o,currency:i,showPlusSign:c=!1})=>{const s=n(o,T({currency:i,variant:"short"}));return j({formattedString:s,locale:r,showPlusSign:c})},m=({value:o,currency:i,showPlusSign:c=!1})=>{const s=n(o,T({currency:i,variant:"rounded"}));return j({formattedString:s,locale:r,showPlusSign:c})},p=({value:o,currency:i,showPlusSign:c=!1})=>{const s=n(o,T({currency:i,variant:"explicit"}));return j({formattedString:s,locale:r,showPlusSign:c})},f=({value:o,currency:i,variant:c="short",showPlusSign:s=!1})=>{switch(c){case"rounded":return m({value:o,currency:i,showPlusSign:s});case"explicit":return p({value:o,currency:i,showPlusSign:s});case"short":default:return a({value:o,currency:i,showPlusSign:s})}},h=({startValue:o,endValue:i,currency:c,variant:s="short",showPlusSign:d=!1})=>{if(o===i)return f({value:o,currency:c,variant:s,showPlusSign:d});const g=Object.keys(_).includes(r)?_[r]:it,y=f({value:o,currency:c,variant:s}),x=f({value:i,currency:c,variant:s}),L=`${y}${g}${x}`;return j({formattedString:L,locale:r,showPlusSign:d})};return{formatCurrencyShort:a,formatCurrencyRounded:m,formatCurrencyExplicit:p,formatCurrencyRange:({startValue:o,endValue:i,currency:c,variant:s="short",showPlusSign:d=!1})=>{const g=T({currency:c,variant:s});if("formatRange"in Intl.NumberFormat.prototype){const x=new Intl.NumberFormat(r,g).formatRange(o,i);return j({formattedString:x,locale:r,showPlusSign:d})}return h({startValue:o,endValue:i,currency:c,variant:s,showPlusSign:d})}}};function ct(...n){const{formatCurrencyShort:r}=F(),a=r(...n);return t.jsx(I,{children:a})}function lt(...n){const{formatCurrencyRounded:r}=F(),a=r(...n);return t.jsx(I,{children:a})}function dt(...n){const{formatCurrencyExplicit:r}=F(),a=r(...n);return t.jsx(I,{children:a})}function mt(...n){const{formatCurrencyRange:r}=F(),a=r(...n);return t.jsx(I,{children:a})}const E={CurrencyShort:ct,CurrencyRounded:lt,CurrencyExplicit:dt,CurrencyRange:mt},k=["rounded","short","explicit","range"],H=["BRL","GBP","EUR","PLN","USD","UAH"],M=()=>{const[n,r]=u.useState(""),[a,m]=u.useState(""),[p,f]=u.useState(!1),[h,w]=u.useState(12.34),[o,i]=u.useState(10),[c,s]=u.useState(20),[d,g]=u.useState(!1),y=e=>{e!==void 0&&w(e)},x=e=>{e!==void 0&&i(e)},L=e=>{e!==void 0&&s(e)},B=(e,l)=>e==="range"?t.jsx(E.CurrencyRange,{currency:l,startValue:o,endValue:c,variant:"short",showPlusSign:d}):e==="rounded"?t.jsx(E.CurrencyRounded,{currency:l,value:h,showPlusSign:d}):e==="explicit"?t.jsx(E.CurrencyExplicit,{currency:l,value:h,showPlusSign:d}):t.jsx(E.CurrencyShort,{currency:l,value:h,showPlusSign:d}),W=({variant:e,currency:l,isEvenGroup:C,isFirstRow:O})=>t.jsxs("tr",{onMouseEnter:()=>m(`${e}-${l}`),children:[O?t.jsx(v,{"data-iscentered":!0,"data-isevengroup":C,rowSpan:k.length,"data-ishighlighted":a.includes(l),children:t.jsx(D,{variant:"large-semibold",children:l})}):null,t.jsx(v,{"data-isevengroup":C,"data-ishighlighted":`${e}-${l}`===a,children:e}),$.map(R=>t.jsx(v,{onMouseEnter:()=>{r(R),m(`${e}-${l}`)},"data-ishighlighted":R===n||`${e}-${l}`===a,"data-isevengroup":C,children:t.jsx(Z,{textComponent:"span",locale:tt[R],children:B(e,l)})},`${e}-${l}-${R}`))]},`${e}-${l}`),q=()=>t.jsxs(t.Fragment,{children:[t.jsxs("tr",{children:[t.jsx(N,{}),t.jsx(N,{}),$.map(e=>t.jsx(N,{onMouseEnter:()=>r(e),children:e},e))]}),H.map((e,l)=>t.jsxs(G.Fragment,{children:[k.map((C,O)=>W({variant:C,currency:e,isEvenGroup:l%2===1,isFirstRow:O===0})),l<H.length-1&&t.jsx("tr",{children:t.jsx(Y,{colSpan:$.length+2})})]},e))]});return t.jsxs(rt,{padding:"12",gap:"16",columns:["1fr"],children:[t.jsx(ot,{variant:"medium",tag:"h3",children:"Currency formatting using Intl.NumberFormat"}),t.jsxs(b,{direction:"row",gap:"12",alignItems:"center",children:[t.jsx(A,{label:"Value",value:h,onValueChange:y,useLegacyRequiredLabel:!0}),t.jsx(A,{label:"Range start",value:o,onValueChange:x,useLegacyRequiredLabel:!0}),t.jsx(A,{label:"Range end",value:c,onValueChange:L,useLegacyRequiredLabel:!0})]}),t.jsxs(b,{direction:"row",gap:"12",alignItems:"center",children:[t.jsx(st,{checked:d,onCheckedChange:()=>g(!d)}),t.jsx("label",{htmlFor:"show-plus-sign",children:t.jsx(D,{variant:"default-semibold",accent:"primary",children:'Show "+" sign'})})]}),t.jsx(b,{direction:"row",children:t.jsx(nt,{size:"small",onClick:()=>f(!p),children:p?"Hide Options":"Show my browser options"})}),p?t.jsx("pre",{children:JSON.stringify(new Intl.NumberFormat().resolvedOptions(),null,2)}):null,t.jsx(b,{direction:"column",gap:"4",children:t.jsx(Q,{children:t.jsx(X,{onMouseLeave:()=>{r(""),m("")},children:t.jsx("tbody",{children:q()})})})})]})},ee={title:"IntlFormatted/IntlFormattedCurrency",component:M,parameters:{layout:"fullscreen",chromatic:{disableSnapshot:!0}}},ut=()=>t.jsx(M,{}),S=ut.bind({});S.tags=["!autodocs","!a11y-test"];var U,P,V;S.parameters={...S.parameters,docs:{...(U=S.parameters)==null?void 0:U.docs,source:{originalSource:"() => <CurrencyTable />",...(V=(P=S.parameters)==null?void 0:P.docs)==null?void 0:V.source}}};const re=["Default"];export{S as Default,re as __namedExportsOrder,ee as default};

package/dist/assets/IntlFormattedDateTime.stories-ZBusegeN.js

@@ -1 +0,0 @@
-import{_ as r}from"./iframe-C3SpczPa.js";import{j as e}from"./jsx-runtime-BTJTZTIL.js";import{r as D,e as O}from"./index-Cb9e4tly.js";import{L as lt,b as ut,g as _t,W as k,h as G,i as K,j as z,k as Y,T as ct,c as ft,m as pt,l as b,d as S,f as Tt,I as Dt,u as gt,C as vt,t as ht,n as V,o as P}from"./constants-DVSid1Xr.js";import{T as y}from"./Text-DVl1HBkZ.js";import{L as Et}from"./LayoutGrid-B5JJKgNY.js";import{H as xt}from"./Heading-CzIRSKAr.js";import{L as j}from"./LayoutFlex-BkczeydK.js";import{T as yt}from"./TextField-BRDwFAhX.js";import{S as M,a as R}from"./SelectField-ByfZzt_b.js";import{N as At}from"./NumberField-CmClnfq6.js";import{C as wt}from"./Checkbox-BnqXU33n.js";import{L as It}from"./Link-CjAvDgdX.js";import"./index-DWSmmBvQ.js";import{u as jt,d as Rt}from"./index-C5uDgNEj.js";import"./index-ChsGqxH_.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./tslib.es6-C7pnyCjR.js";import"./styled-components.browser.esm-COuAnjOv.js";import"./getTokenVar-4Jlty0xz.js";import"./constants-DTpaCXm6.js";import"./tokens-BYLcI6Lk.js";import"./text-accent-VILyY3zt.js";import"./classNames-9hsFPPZv.js";import"./text-centered-BFb64PJw.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./componentNames-k0j3gHgH.js";import"./index-qlqSh81O.js";import"./defaults-_YAxqn11.js";import"./breakpoints-BfMlrtxE.js";import"./layout-relative.module-FOVgic7W.js";import"./layout-relative-Rn-Bns4t.js";import"./constants-DYYVurUY.js";import"./FormControl-BIPOTQBb.js";import"./message-CSdaKtIj.js";import"./index-Cc-bXjHe.js";import"./Input-CfV08vH7.js";import"./InputContainer-Cnv--ROK.js";import"./TokyoUIChevronDown-CEw5hWWz.js";import"./Icon-BsfKiFZj.js";import"./render-icon-BT0Aq7PA.js";import"./useMergeRefs-SFH7Mw4x.js";import"./useHostname-PsilflFC.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";const N=Rt({dateAndTime:{id:"preply-ds.intl_formatted.date_and_time.v3.text",defaultMessage:"{date} • {time}",description:"Formerly intl_formatted.date_and_time.v3.text"},dateAndTimeRange:{id:"preply-ds.intl_formatted.date_and_time_range.v3.text",defaultMessage:"{date} • {timeRange}",description:"Formerly intl_formatted.date_and_time_range.v3.text"},dateTimeAndDateTime:{id:"preply-ds.intl_formatted.date_time_and_date_time.text",defaultMessage:"{dateTimeStart} - {dateTimeEnd}",description:"Formerly intl_formatted.date_time_and_date_time.text"}}),H=({formattedDate:t,locale:a,isCapitalized:i})=>lt.includes(a)?ut(t):i?_t(t):t,L=()=>{const{formatMessage:t,locale:a}=jt();return{formatDateAndTime:({date:m,time:d,isCapitalized:l})=>{const n=t(N.dateAndTime,{date:m,time:d});return H({formattedDate:n,locale:a,isCapitalized:l})},formatDateAndTimeRange:({date:m,timeRange:d,isCapitalized:l})=>{const n=t(N.dateAndTimeRange,{date:m,timeRange:d});return H({formattedDate:n,locale:a,isCapitalized:l})},formatDateTimeAndDateTime:({dateTimeStart:m,dateTimeEnd:d,isCapitalized:l})=>{const n=t(N.dateTimeAndDateTime,{dateTimeStart:m,dateTimeEnd:d});return H({formattedDate:n,locale:a,isCapitalized:l})}}};function Lt(...t){const{formatDateAndTime:a}=L(),i=a(...t);return e.jsx(k,{children:i})}function Ft(...t){const{formatDateAndTimeRange:a}=L(),i=a(...t);return e.jsx(k,{children:i})}function Ot(...t){const{formatDateTimeAndDateTime:a}=L(),i=a(...t);return e.jsx(k,{children:i})}const C={DateAndTime:Lt,DateAndTimeRange:Ft,DateTimeAndDateTime:Ot},bt=60,St=60*1e3,Vt="https://preply.atlassian.net/wiki/spaces/PKB/pages/4410572869/How+to+format+a+date+and+time+in+the+WEB",Pt=[{Formatter:({date:t,dateStart:a,dateEnd:i,countryCode:_,isCapitalized:o,dateFormatterName:m,timeFormatterName:d})=>{const l=V(),n=P(),f=l[m??""]({date:t,dateStart:a,dateEnd:i,isCapitalized:o}),v=n[d??""]({date:t,dateStart:a,dateEnd:i,countryCode:_});return e.jsx(C.DateAndTime,{date:f,time:v,isCapitalized:o})},labels:["DateAndTime","formatDateAndTime"],tags:["✅ all-usages"],timeFormatterName:"formatTime"},{Formatter:({date:t,dateStart:a,dateEnd:i,countryCode:_,isCapitalized:o,dateFormatterName:m,timeFormatterName:d})=>{const l=V(),n=P(),f=l[m??""]({date:t,dateStart:a,dateEnd:i,isCapitalized:o}),v=n[d??""]({date:t,dateStart:a,dateEnd:i,countryCode:_});return e.jsx(C.DateAndTimeRange,{date:f,timeRange:v,isCapitalized:o})},labels:["DateAndTimeRange","formatDateAndTimeRange"],tags:["✅ all-usages"],timeFormatterName:"formatTimeRange"},{Formatter:({date:t,dateStart:a,dateEnd:i,countryCode:_,isCapitalized:o,dateFormatterName:m,timeFormatterName:d})=>{const l=V(),n=P(),{formatDateAndTime:f}=L(),v=l[m??""]({date:t,dateStart:a,dateEnd:i,isCapitalized:o}),x=l[m??""]({date:t,dateStart:a,dateEnd:i,isCapitalized:o}),F=n[d??""]({date:t,countryCode:_}),A=n[d??""]({date:i,countryCode:_}),h=f({date:v,time:F,isCapitalized:o}),w=f({date:x,time:A,isCapitalized:o});return e.jsx(C.DateTimeAndDateTime,{dateTimeStart:h,dateTimeEnd:w,isCapitalized:o})},labels:["DateTimeAndDateTime","formatDateTimeAndDateTime"],tags:["✅ all-usages"],timeFormatterName:"formatTime"}],Mt=t=>!Number.isNaN(t.getTime()),Z=(t,a)=>new Date(t.getTime()+a*bt*St),J=t=>/^[A-Z]/.test(t),Nt={en:async()=>(await r(async()=>{const{default:t}=await import("./en-G84BH_1n.js");return{default:t}},[],import.meta.url)).default,es:async()=>(await r(async()=>{const{default:t}=await import("./es-DQVkemFv.js");return{default:t}},[],import.meta.url)).default,fr:async()=>(await r(async()=>{const{default:t}=await import("./fr-BcLiTgq7.js");return{default:t}},[],import.meta.url)).default,de:async()=>(await r(async()=>{const{default:t}=await import("./de-Dlbpp59k.js");return{default:t}},[],import.meta.url)).default,it:async()=>(await r(async()=>{const{default:t}=await import("./it-pZyEaQWA.js");return{default:t}},[],import.meta.url)).default,ua:async()=>(await r(async()=>{const{default:t}=await import("./ua-bj7Aexlc.js");return{default:t}},[],import.meta.url)).default,pl:async()=>(await r(async()=>{const{default:t}=await import("./pl-BOFPBVWX.js");return{default:t}},[],import.meta.url)).default,pt:async()=>(await r(async()=>{const{default:t}=await import("./pt-BkmYyzxs.js");return{default:t}},[],import.meta.url)).default,tr:async()=>(await r(async()=>{const{default:t}=await import("./tr-Bf_b0nAs.js");return{default:t}},[],import.meta.url)).default,id:async()=>(await r(async()=>{const{default:t}=await import("./id-Bocjc-Mv.js");return{default:t}},[],import.meta.url)).default,zh:async()=>(await r(async()=>{const{default:t}=await import("./zh-C1Fh0tbO.js");return{default:t}},[],import.meta.url)).default,ja:async()=>(await r(async()=>{const{default:t}=await import("./ja-D8fyyfh5.js");return{default:t}},[],import.meta.url)).default,ko:async()=>(await r(async()=>{const{default:t}=await import("./ko-wYJn68A1.js");return{default:t}},[],import.meta.url)).default,ar:async()=>(await r(async()=>{const{default:t}=await import("./ar-DkMEkT7-.js");return{default:t}},[],import.meta.url)).default,nl:async()=>(await r(async()=>{const{default:t}=await import("./nl-jR5jW0y1.js");return{default:t}},[],import.meta.url)).default,ro:async()=>(await r(async()=>{const{default:t}=await import("./ro-C7ZMV5Oi.js");return{default:t}},[],import.meta.url)).default,ru:async()=>(await r(async()=>{const{default:t}=await import("./ru-BQ8nnmSG.js");return{default:t}},[],import.meta.url)).default,sv:async()=>(await r(async()=>{const{default:t}=await import("./sv-DHqzGn-P.js");return{default:t}},[],import.meta.url)).default,th:async()=>(await r(async()=>{const{default:t}=await import("./th-DBBwcwZx.js");return{default:t}},[],import.meta.url)).default,cs:async()=>(await r(async()=>{const{default:t}=await import("./cs-CumF8En8.js");return{default:t}},[],import.meta.url)).default,tw:async()=>(await r(async()=>{const{default:t}=await import("./tw-CumF8En8.js");return{default:t}},[],import.meta.url)).default,hk:async()=>(await r(async()=>{const{default:t}=await import("./hk-CumF8En8.js");return{default:t}},[],import.meta.url)).default},et=()=>{const[t,a]=D.useState(""),[i,_]=D.useState(""),[o,m]=D.useState({en:{},es:{},fr:{},de:{},it:{},uk:{},pl:{},pt:{},tr:{},id:{},zh:{},ja:{},ko:{},ar:{},nl:{},ro:{},ru:{},sv:{},th:{},cs:{},"zh-TW":{},"zh-HK":{}});D.useEffect(()=>{(async()=>{try{const c=await Promise.all(Object.entries(Nt).map(async([p,g])=>{const T=await g();return[p,T]}));m(Object.fromEntries(c))}catch(c){console.error("Failed to load locale messages:",c)}})()},[]);const d=Object.keys(o.en).length!==0,n=new Date().toISOString().slice(0,16),f=1,v=G,[x,F]=D.useState(n),A=Mt(new Date(x)),h=new Date(A?x:n),[w,at]=D.useState(f),U=w??f,rt=Z(h,U),[W,it]=D.useState(v),ot=W===Y?vt[0]:"",[B,nt]=D.useState(!1),[$,st]=D.useState("formatDateShort"),mt=[...K.flatMap(u=>u.labels.filter(c=>!J(c))),...z.flatMap(u=>u.labels.filter(c=>!J(c)))],dt=u=>{var q;const c=U===f&&((q=u.extraData)!=null&&q.defaultDurationHours)?Z(h,u.extraData.defaultDurationHours):rt,p=u.labels,g=p[0],T=u.timeFormatterName;return e.jsxs("tr",{onMouseEnter:()=>_(g),children:[e.jsxs(S,{children:[p.map(s=>e.jsxs(O.Fragment,{children:[e.jsx(y,{variant:"small-regular-italic",children:s}),e.jsx("br",{})]},s)),e.jsx(y,{variant:"small-regular",children:u.tags.map(s=>e.jsxs(O.Fragment,{children:[s,e.jsx("br",{})]},s))}),T?e.jsxs(O.Fragment,{children:[e.jsx(M,{label:"Date formatter",value:$,onValueChange:st,children:mt.map(s=>e.jsx(R,{value:s,children:s},s))}),e.jsx(M,{label:"Time formatter",value:T,children:e.jsx(R,{value:T,children:T},T)})]},`${g}-${T}`):null]}),b.map(s=>e.jsx(Tt,{onMouseEnter:()=>{a(s),_(g)},"data-ishighlighted":s===t||g===i,"data-iscentered":!0,children:e.jsx(Dt,{locale:gt[s],messages:o[s],textComponent:"span",children:e.jsx(u.Formatter,{date:h,dateEnd:c,dateStart:h,countryCode:ot,isCapitalized:B,dateFormatterName:$,timeFormatterName:T})})},`${g}-${s}`))]},g)},I=({title:u,variations:c})=>e.jsxs(e.Fragment,{children:[e.jsx("tr",{children:e.jsx(pt,{colSpan:b.length+1,children:e.jsx(y,{variant:"large-semibold",children:u})})}),e.jsxs("tr",{children:[e.jsx(S,{}),b.map(p=>e.jsx(S,{onMouseEnter:()=>a(p),children:p},p))]}),c.map(p=>dt(p))]});return d?e.jsxs(Et,{padding:"12",gap:"16",columns:["1fr"],children:[e.jsx(xt,{variant:"medium",tag:"h3",children:"Date and Time formatting tool"}),e.jsxs(j,{direction:"row",gap:"12",children:[e.jsx(yt,{label:"Date time",value:x,onValueChange:F,hasError:!A,useLegacyRequiredLabel:!0}),e.jsx(At,{label:"Range duration (hours)",value:w,onValueChange:at,useLegacyRequiredLabel:!0}),e.jsxs(M,{label:"Time Format",value:W,onValueChange:it,useLegacyRequiredLabel:!0,children:[e.jsx(R,{value:Y,children:"12h format (AM/PM)"}),e.jsx(R,{value:G,children:"24h format"})]}),e.jsxs(j,{direction:"column",gap:"16",children:[e.jsx(y,{variant:"default-regular",children:"Is Capitalized?"}),e.jsx(wt,{checked:B,onCheckedChange:nt})]})]}),e.jsx(j,{direction:"row",children:e.jsx(It,{href:Vt,opensInNewTab:!0,children:e.jsx(y,{variant:"default-semibold",accent:"info",children:"Confluence article with more examples and rules"})})}),e.jsx(j,{direction:"column",gap:"4",children:e.jsx(ct,{children:e.jsx(ft,{onMouseLeave:()=>{a(""),_("")},children:e.jsxs("tbody",{children:[I({title:"Abbreviated Dates (IntlFormattedDate)",variations:K}),I({title:"Extended Dates (IntlFormattedDate)",variations:z}),I({title:"Time (IntlFormattedTime)",variations:ht}),I({title:"Date and Time Aggregators (IntlFormattedAggregatedDateTime)",variations:Pt})]})})})})]}):"Loading..."},Le={title:"IntlFormatted/IntlFormattedDateTime",component:et,parameters:{layout:"fullscreen",chromatic:{disableSnapshot:!0}}},Ht=()=>e.jsx(et,{}),E=Ht.bind({});E.args={};E.tags=["!autodocs","!a11y-test"];var Q,X,tt;E.parameters={...E.parameters,docs:{...(Q=E.parameters)==null?void 0:Q.docs,source:{originalSource:"() => <DateTable />",...(tt=(X=E.parameters)==null?void 0:X.docs)==null?void 0:tt.source}}};const Fe=["Default"];export{E as Default,Fe as __namedExportsOrder,Le as default};