@preply/ds-docs 3.1.1-beta.857b0ab30a03b836ac6c63997eeb17f464e3510c.0 → 3.1.1-beta.b0da64e44680627847663be4d78ebeebea8c6944.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (115) hide show
  1. package/dist/assets/{00.LayoutFlex.stories-Dx9Eo2na.js → 00.LayoutFlex.stories-DkJ1Fct8.js} +1 -1
  2. package/dist/assets/{00.applications-4_kAf65R.js → 00.applications-DafzJmd1.js} +1 -1
  3. package/dist/assets/{00.favicons.guide-WmsjYzsU.js → 00.favicons.guide-brvegHPR.js} +1 -1
  4. package/dist/assets/{00.token-explorer-DDWWO9yw.js → 00.token-explorer-NZgPJYgK.js} +1 -1
  5. package/dist/assets/{00.using-responsive-props-Db1CE2Bn.js → 00.using-responsive-props-BtIgzDL1.js} +1 -1
  6. package/dist/assets/{01.semantic-tokens-BGh7M0eY.js → 01.semantic-tokens-Cxg5O7jx.js} +1 -1
  7. package/dist/assets/{01.using-shorthand-props-DlhDhuqe.js → 01.using-shorthand-props-C6ZNaf9k.js} +1 -1
  8. package/dist/assets/{10.Combinations.stories-Wf-NooK0.js → 10.Combinations.stories-DptYuvtA.js} +1 -1
  9. package/dist/assets/{10.fonts.guide-9-b6LwTC.js → 10.fonts.guide-BhCFCZBy.js} +1 -1
  10. package/dist/assets/{10.ssr-VCBg9dbk.js → 10.ssr-CETLnXz1.js} +1 -1
  11. package/dist/assets/{11.languageFont.explorer-fCUE9Req.js → 11.languageFont.explorer-Bc-g6XOq.js} +1 -1
  12. package/dist/assets/{11.ssr.app-router-DK46wtcG.js → 11.ssr.app-router-m2a2--0f.js} +1 -1
  13. package/dist/assets/{20.libraries-FpWvhQac.js → 20.libraries-CNNM7ENy.js} +1 -1
  14. package/dist/assets/{30.icons.explorer-CIrIe9zZ.js → 30.icons.explorer-DxZiwHrt.js} +1 -1
  15. package/dist/assets/{30.storybook-8XKIrOG2.js → 30.storybook-BVWKWFVN.js} +1 -1
  16. package/dist/assets/{40.illustrations.explorer-DWDPZG1O.js → 40.illustrations.explorer-qWSryWlk.js} +1 -1
  17. package/dist/assets/{90.advanced-BrSJ75kb.js → 90.advanced-DvRy2sIG.js} +1 -1
  18. package/dist/assets/{Accordion-Bn_7bQpK.js → Accordion-_oiPELIS.js} +3 -3
  19. package/dist/assets/{Accordion.stories-IHPoH-rI.js → Accordion.stories-DW84iZId.js} +1 -1
  20. package/dist/assets/{Accordion.tests.stories-D80ku7JR.js → Accordion.tests.stories-HLUGZQBK.js} +1 -1
  21. package/dist/assets/{AlertDialog.stories-BDaUfcmP.js → AlertDialog.stories-CEKRc6cm.js} +1 -1
  22. package/dist/assets/{Badge.stories-BxGvNozr.js → Badge.stories-Cx4CCSPq.js} +1 -1
  23. package/dist/assets/{Box.stories-BCCuYnrC.js → Box.stories-DsaKJbMG.js} +1 -1
  24. package/dist/assets/{Button-BumqXQgN.js → Button-CcY3QSgD.js} +2 -2
  25. package/dist/assets/{Button.stories-DA25kI-7.js → Button.stories-CdendaHV.js} +1 -1
  26. package/dist/assets/{ButtonBase-OAaaGRgi.js → ButtonBase-CiON5Gq9.js} +1 -1
  27. package/dist/assets/{Checkbox-CsXsO8bL.js → Checkbox-DH5o6aup.js} +2 -2
  28. package/dist/assets/{Checkbox.stories-C-vlyqxy.js → Checkbox.stories-sHbc4DyM.js} +1 -1
  29. package/dist/assets/{Checkbox.tests.stories-Bn0cGiYz.js → Checkbox.tests.stories-DX5vQTZm.js} +1 -1
  30. package/dist/assets/{Chips.stories-Dln8xBho.js → Chips.stories-BencIUny.js} +1 -1
  31. package/dist/assets/{Color-YHDXOIA2-DdMC8kO4.js → Color-YHDXOIA2-XZioejW2.js} +1 -1
  32. package/dist/assets/CountryFlag-ps90L8eN.js +49 -0
  33. package/dist/assets/{Dialog.stories-C7JVGkL3.js → Dialog.stories-Cf4RM2h2.js} +1 -1
  34. package/dist/assets/{DocsRenderer-CFRXHY34-BUR9I9U1.js → DocsRenderer-CFRXHY34-CerFBhAM.js} +1 -1
  35. package/dist/assets/Flag.stories-DEKGHg3O.js +90 -0
  36. package/dist/assets/{Flag.test.stories-GCtORN0m.js → Flag.test.stories-k_dwOPsD.js} +1 -1
  37. package/dist/assets/{Heading-D79pA8cG.js → Heading-sy1TMpjs.js} +2 -2
  38. package/dist/assets/{Heading.stories-FhR8Ieuz.js → Heading.stories-mFaQtYkx.js} +1 -1
  39. package/dist/assets/{Icon-D4cMo1we.js → Icon-DLiSwEfT.js} +1 -1
  40. package/dist/assets/{Icon-RSC-Yp03gSP9.js → Icon-RSC-DR17Q0N5.js} +1 -1
  41. package/dist/assets/{Icon.stories-DlJ1cDyb.js → Icon.stories-C98JIL87.js} +1 -1
  42. package/dist/assets/IconButton-BnLs_P5O.js +8 -0
  43. package/dist/assets/{Input-B7MlX4U9.js → Input-Br6FM_ov.js} +3 -3
  44. package/dist/assets/{IntegrationWithReactHookForm.stories-CFvk5m0u.js → IntegrationWithReactHookForm.stories-CjkAXxSi.js} +1 -1
  45. package/dist/assets/{LayoutFlex-oRwI31fW.js → LayoutFlex-CDxj6nng.js} +1 -1
  46. package/dist/assets/{LayoutFlexItem-RxfNp994.js → LayoutFlexItem-DcbU1Wtg.js} +1 -1
  47. package/dist/assets/{LayoutGrid.stories-CAvHZzVw.js → LayoutGrid.stories-Dvap6nXA.js} +1 -1
  48. package/dist/assets/{LayoutGridItem-AvP_ZkC5.js → LayoutGridItem-DczUihq7.js} +1 -1
  49. package/dist/assets/{Link.stories-Kb5m59aP.js → Link.stories-DQM626ga.js} +1 -1
  50. package/dist/assets/NumberField-DtZiz9gx.js +4 -0
  51. package/dist/assets/{NumberField.stories-D-g-_JoA.js → NumberField.stories-BvnypoI2.js} +1 -1
  52. package/dist/assets/{ObserveIntersection-CvDmrhxS.js → ObserveIntersection-QIlV9twe.js} +1 -1
  53. package/dist/assets/{ObserveIntersection.stories-CJbpJ7AX.js → ObserveIntersection.stories-BnaX-I6k.js} +1 -1
  54. package/dist/assets/{OnboardingTooltip-Lspn1J1n.js → OnboardingTooltip-Drdxs-mL.js} +1 -1
  55. package/dist/assets/{OnboardingTooltip.stories-BSTAbBKq.js → OnboardingTooltip.stories-BalK-N-K.js} +1 -1
  56. package/dist/assets/{OnboardingTooltip.tests.stories-C3TfZDQZ.js → OnboardingTooltip.tests.stories-tVOg5MTR.js} +1 -1
  57. package/dist/assets/{OnboardingTour-J68z1zuj.js → OnboardingTour-CHuPsA7n.js} +1 -1
  58. package/dist/assets/{OnboardingTour.stories-D3Z3aBlG.js → OnboardingTour.stories-DU1CbGJb.js} +2 -2
  59. package/dist/assets/{OnboardingTour.tests.stories-DgM_E88t.js → OnboardingTour.tests.stories-C7a8Rmsv.js} +1 -1
  60. package/dist/assets/PasswordField-DmJwowu1.js +4 -0
  61. package/dist/assets/{PasswordField.stories-CoxGxN0y.js → PasswordField.stories-DePlhGin.js} +1 -1
  62. package/dist/assets/{PreplyLogo.stories-CoKY5vmY.js → PreplyLogo.stories-CxkodPun.js} +1 -1
  63. package/dist/assets/{ProgressBar.stories-D-zAEKVA.js → ProgressBar.stories-CvN4M4Mq.js} +1 -1
  64. package/dist/assets/{ProgressSteps.stories-BZpbJxJ4.js → ProgressSteps.stories-CPDR8zsn.js} +1 -1
  65. package/dist/assets/{SelectField-DVUeHaUI.js → SelectField-DjLknbw4.js} +7 -7
  66. package/dist/assets/{SelectField.stories-l2h7AeUs.js → SelectField.stories-CWLAqY36.js} +1 -1
  67. package/dist/assets/{ShowOnIntersection.stories-B24bNVFn.js → ShowOnIntersection.stories-BeGWC-Z4.js} +1 -1
  68. package/dist/assets/{Steps-Cnv3Nys-.js → Steps-LOo3xjBg.js} +1 -1
  69. package/dist/assets/{Steps.stories-DcSCPhwD.js → Steps.stories-DHdbOtvE.js} +1 -1
  70. package/dist/assets/{Text-C3jprdij.js → Text-CH4wZQv6.js} +1 -1
  71. package/dist/assets/{Text.stories-CGHOveiR.js → Text.stories-DcJ53GNv.js} +1 -1
  72. package/dist/assets/TextField-CErKn01e.js +4 -0
  73. package/dist/assets/{TextField.stories-DQBz69MT.js → TextField.stories-DqDKfEbc.js} +1 -1
  74. package/dist/assets/{TextHighlighted.stories-BepOj0Ru.js → TextHighlighted.stories-DOQ3Cny3.js} +1 -1
  75. package/dist/assets/{TextInline.stories-E8plGh4A.js → TextInline.stories-Db7MLcaa.js} +1 -1
  76. package/dist/assets/{TextareaField-vuK19L40.js → TextareaField-CXN-lN3Y.js} +6 -6
  77. package/dist/assets/{TextareaField.stories-CykA4cDO.js → TextareaField.stories-BPG4HgXb.js} +1 -1
  78. package/dist/assets/{Toast.stories-Bi9S1Grd.js → Toast.stories-Cb8tqWaO.js} +1 -1
  79. package/dist/assets/{Tooltip.stories-B1e9vr5u.js → Tooltip.stories-DwcA4Tb6.js} +1 -1
  80. package/dist/assets/{Tooltip.tests.stories-QA7Lh6Tu.js → Tooltip.tests.stories-DRBWtsl0.js} +1 -1
  81. package/dist/assets/{breakpoints-CpqGBjYO.js → breakpoints-17pQbwrA.js} +1 -1
  82. package/dist/assets/{breakpoints-CmMCxJmD.js → breakpoints-ZcizX0pH.js} +1 -1
  83. package/dist/assets/{breakpoints-ysnexzv-.js → breakpoints-_MTj6Tgh.js} +1 -1
  84. package/dist/assets/{changelog-COau0gJf.js → changelog-C38tZgD3.js} +1 -1
  85. package/dist/assets/{entry-preview-C4N2xCt5.js → entry-preview-pq7Z7DEg.js} +1 -1
  86. package/dist/assets/{getTokenVar-CUHKNeJD.js → getTokenVar-CStyxwr3.js} +1 -1
  87. package/dist/assets/{hover-VvQeuGyg.js → hover-BqprrboH.js} +1 -1
  88. package/dist/assets/{hover-DXcaKjLt.js → hover-C_XsDK4s.js} +1 -1
  89. package/dist/assets/{hover-GSE0CvmS.js → hover-CrxTgoLG.js} +1 -1
  90. package/dist/assets/{iframe-D0A79CBI.js → iframe-BMnDNOZI.js} +2 -2
  91. package/dist/assets/{index-DueYSiMN.js → index-D2GTvH-Y.js} +1 -1
  92. package/dist/assets/{index-DJz3jMTz.js → index-yZrUxwWw.js} +3 -3
  93. package/dist/assets/{intro-UMrunOuq.js → intro-CgRaz0NU.js} +1 -1
  94. package/dist/assets/{migrating-from-less-BqEJZLZ5.js → migrating-from-less-DSoSpfnJ.js} +1 -1
  95. package/dist/assets/{playground.stories-BhNG8Jgk.js → playground.stories-C-Sl-AMj.js} +33 -33
  96. package/dist/assets/{preview-iHfxidwg.js → preview-3wk0ugl8.js} +2 -2
  97. package/dist/assets/{preview-Bk7AZmud.js → preview-B_L7GhCJ.js} +1 -1
  98. package/dist/assets/{preview-CcucgJy3.js → preview-DkQEncOB.js} +1 -1
  99. package/dist/assets/{tokens-BuSmlz1z.js → tokens-Cy39NJA5.js} +1 -1
  100. package/dist/assets/{tokens-D0SjH8dK.js → tokens-DgTNh4rN.js} +1 -1
  101. package/dist/assets/{tokens-DOJLI2G7.js → tokens-uKFcWV14.js} +1 -1
  102. package/dist/assets/{usePortalElement-Byczyvc6.js → usePortalElement-VI40uldV.js} +1 -1
  103. package/dist/assets/{welcome-CFbV1cfg.js → welcome-DPhQTv2R.js} +1 -1
  104. package/dist/assets/{zeroheight-ChMVcLJ3.js → zeroheight-DbqVK-Vl.js} +1 -1
  105. package/dist/iframe.html +1 -1
  106. package/dist/index.json +1 -1
  107. package/dist/preview-stats.json +875 -875
  108. package/dist/project.json +1 -1
  109. package/package.json +3 -3
  110. package/dist/assets/CountryFlag-CJV53jf1.js +0 -48
  111. package/dist/assets/Flag.stories-Bfpeo5_i.js +0 -110
  112. package/dist/assets/IconButton-DNz6Hldb.js +0 -8
  113. package/dist/assets/NumberField-DyKjoAC-.js +0 -4
  114. package/dist/assets/PasswordField-BkVjxPtF.js +0 -4
  115. package/dist/assets/TextField-X8bB9C1g.js +0 -4
@@ -1,4 +1,4 @@
1
- import{j as w}from"./jsx-runtime-BYouaCF_.js";import{e as U}from"./index-B3evPFBL.js";import{f as Bt,w as Et,u as M,a as Ye,e as $}from"./index-DDyIDR-R.js";import{L as Ke}from"./LayoutFlex-oRwI31fW.js";import{H as Dt}from"./Heading-D79pA8cG.js";import{T as Ze}from"./TextField-X8bB9C1g.js";import{N as Rt}from"./NumberField-DyKjoAC-.js";import{S as Tt,a as J}from"./SelectField-DVUeHaUI.js";import{P as Ge}from"./PasswordField-BkVjxPtF.js";import{T as Ct}from"./TextareaField-vuK19L40.js";import{F as Ot}from"./FormControl-DD3JEwg1.js";import{C as Lt}from"./Checkbox-CsXsO8bL.js";import{B as Qe}from"./Button-BumqXQgN.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./layout-relative.module-ed9bC4H4.js";import"./classNames-BUL1Zq7e.js";import"./defaults-B1rzzf6M.js";import"./index-DdzHuZ-Y.js";import"./componentNames-CVVyamkx.js";import"./text-accent-DZDDtpIt.js";import"./text-centered-CznToR0o.js";import"./Input-B7MlX4U9.js";import"./InputContainer-C1TOTxt4.js";import"./TokyoUIExpand-DThzqohx.js";import"./Icon-D4cMo1we.js";import"./render-icon-CVTdrNe-.js";import"./TokyoUIEye-BsOt8ZdC.js";import"./FieldButton-xxvyfVcj.js";import"./index-BfBdt3zW.js";import"./tslib.es6-BntfKcQG.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./useMergeRefs-BKVZOB6R.js";import"./index-DRKYGVyc.js";import"./message-BraTJ16C.js";import"./useMergeRefs-CeyIhNgY.js";import"./ButtonBase-OAaaGRgi.js";import"./Spinner-BCTJunNM.js";import"./useHostname-CH18gHFj.js";import"./index-CC6DAVyL.js";var he=e=>e.type==="checkbox",oe=e=>e instanceof Date,C=e=>e==null;const mt=e=>typeof e=="object";var _=e=>!C(e)&&!Array.isArray(e)&&mt(e)&&!oe(e),qt=e=>_(e)&&e.target?he(e.target)?e.target.checked:e.target.value:e,Nt=e=>e.substring(0,e.search(/\.\d+(\.|$)/))||e,jt=(e,s)=>e.has(Nt(s)),Ut=e=>{const s=e.constructor&&e.constructor.prototype;return _(s)&&s.hasOwnProperty("isPrototypeOf")},Ce=typeof window<"u"&&typeof window.HTMLElement<"u"&&typeof document<"u";function j(e){let s;const r=Array.isArray(e),i=typeof FileList<"u"?e instanceof FileList:!1;if(e instanceof Date)s=new Date(e);else if(e instanceof Set)s=new Set(e);else if(!(Ce&&(e instanceof Blob||i))&&(r||_(e)))if(s=r?[]:{},!r&&!Ut(e))s=e;else for(const n in e)e.hasOwnProperty(n)&&(s[n]=j(e[n]));else return e;return s}var Se=e=>Array.isArray(e)?e.filter(Boolean):[],S=e=>e===void 0,y=(e,s,r)=>{if(!s||!_(e))return r;const i=Se(s.split(/[,[\].]+?/)).reduce((n,l)=>C(n)?n:n[l],e);return S(i)||i===e?S(e[s])?r:e[s]:i},z=e=>typeof e=="boolean",Oe=e=>/^\w*$/.test(e),gt=e=>Se(e.replace(/["|']|\]/g,"").split(/\.|\[/)),A=(e,s,r)=>{let i=-1;const n=Oe(s)?[s]:gt(s),l=n.length,f=l-1;for(;++i<l;){const m=n[i];let D=r;if(i!==f){const L=e[m];D=_(L)||Array.isArray(L)?L:isNaN(+n[i+1])?{}:[]}if(m==="__proto__"||m==="constructor"||m==="prototype")return;e[m]=D,e=e[m]}return e};const Xe={BLUR:"blur",FOCUS_OUT:"focusout"},W={onBlur:"onBlur",onChange:"onChange",onSubmit:"onSubmit",onTouched:"onTouched",all:"all"},X={max:"max",min:"min",maxLength:"maxLength",minLength:"minLength",pattern:"pattern",required:"required",validate:"validate"};U.createContext(null);var It=(e,s,r,i=!0)=>{const n={defaultValues:s._defaultValues};for(const l in e)Object.defineProperty(n,l,{get:()=>{const f=l;return s._proxyFormState[f]!==W.all&&(s._proxyFormState[f]=!i||W.all),e[f]}});return n},O=e=>_(e)&&!Object.keys(e).length,Ht=(e,s,r,i)=>{r(e);const{name:n,...l}=e;return O(l)||Object.keys(l).length>=Object.keys(s).length||Object.keys(l).find(f=>s[f]===W.all)},xe=e=>Array.isArray(e)?e:[e];function Mt(e){const s=U.useRef(e);s.current=e,U.useEffect(()=>{const r=!e.disabled&&s.current.subject&&s.current.subject.subscribe({next:s.current.next});return()=>{r&&r.unsubscribe()}},[e.disabled])}var K=e=>typeof e=="string",Wt=(e,s,r,i,n)=>K(e)?(i&&s.watch.add(e),y(r,e,n)):Array.isArray(e)?e.map(l=>(i&&s.watch.add(l),y(r,l))):(i&&(s.watchAll=!0),r),$t=(e,s,r,i,n)=>s?{...r[e],types:{...r[e]&&r[e].types?r[e].types:{},[i]:n||!0}}:{},et=e=>({isOnSubmit:!e||e===W.onSubmit,isOnBlur:e===W.onBlur,isOnChange:e===W.onChange,isOnAll:e===W.all,isOnTouch:e===W.onTouched}),tt=(e,s,r)=>!r&&(s.watchAll||s.watch.has(e)||[...s.watch].some(i=>e.startsWith(i)&&/^\.\w+/.test(e.slice(i.length))));const ve=(e,s,r,i)=>{for(const n of r||Object.keys(e)){const l=y(e,n);if(l){const{_f:f,...m}=l;if(f){if(f.refs&&f.refs[0]&&s(f.refs[0],n)&&!i)return!0;if(f.ref&&s(f.ref,f.name)&&!i)return!0;if(ve(m,s))break}else if(_(m)&&ve(m,s))break}}};var Jt=(e,s,r)=>{const i=xe(y(e,r));return A(i,"root",s[r]),A(e,r,i),e},Le=e=>e.type==="file",Y=e=>typeof e=="function",Fe=e=>{if(!Ce)return!1;const s=e?e.ownerDocument:0;return e instanceof(s&&s.defaultView?s.defaultView.HTMLElement:HTMLElement)},we=e=>K(e),qe=e=>e.type==="radio",Ae=e=>e instanceof RegExp;const rt={value:!1,isValid:!1},st={value:!0,isValid:!0};var vt=e=>{if(Array.isArray(e)){if(e.length>1){const s=e.filter(r=>r&&r.checked&&!r.disabled).map(r=>r.value);return{value:s,isValid:!!s.length}}return e[0].checked&&!e[0].disabled?e[0].attributes&&!S(e[0].attributes.value)?S(e[0].value)||e[0].value===""?st:{value:e[0].value,isValid:!0}:st:rt}return rt};const at={isValid:!1,value:null};var ht=e=>Array.isArray(e)?e.reduce((s,r)=>r&&r.checked&&!r.disabled?{isValid:!0,value:r.value}:s,at):at;function it(e,s,r="validate"){if(we(e)||Array.isArray(e)&&e.every(we)||z(e)&&!e)return{type:r,message:we(e)?e:"",ref:s}}var ue=e=>_(e)&&!Ae(e)?e:{value:e,message:""},ot=async(e,s,r,i,n,l)=>{const{ref:f,refs:m,required:D,maxLength:L,minLength:F,min:h,max:se,pattern:ae,validate:I,name:T,valueAsNumber:Z,mount:ee}=e._f,b=y(r,T);if(!ee||s.has(T))return{};const G=m?m[0]:f,Q=p=>{n&&G.reportValidity&&(G.setCustomValidity(z(p)?"":p||""),G.reportValidity())},V={},le=qe(f),pe=he(f),ie=le||pe,ne=(Z||Le(f))&&S(f.value)&&S(b)||Fe(f)&&f.value===""||b===""||Array.isArray(b)&&!b.length,q=$t.bind(null,T,i,V),be=(p,x,P,R=X.maxLength,H=X.minLength)=>{const N=p?x:P;V[T]={type:p?R:H,message:N,ref:f,...q(p?R:H,N)}};if(l?!Array.isArray(b)||!b.length:D&&(!ie&&(ne||C(b))||z(b)&&!b||pe&&!vt(m).isValid||le&&!ht(m).isValid)){const{value:p,message:x}=we(D)?{value:!!D,message:D}:ue(D);if(p&&(V[T]={type:X.required,message:x,ref:G,...q(X.required,x)},!i))return Q(x),V}if(!ne&&(!C(h)||!C(se))){let p,x;const P=ue(se),R=ue(h);if(!C(b)&&!isNaN(b)){const H=f.valueAsNumber||b&&+b;C(P.value)||(p=H>P.value),C(R.value)||(x=H<R.value)}else{const H=f.valueAsDate||new Date(b),N=fe=>new Date(new Date().toDateString()+" "+fe),ce=f.type=="time",de=f.type=="week";K(P.value)&&b&&(p=ce?N(b)>N(P.value):de?b>P.value:H>new Date(P.value)),K(R.value)&&b&&(x=ce?N(b)<N(R.value):de?b<R.value:H<new Date(R.value))}if((p||x)&&(be(!!p,P.message,R.message,X.max,X.min),!i))return Q(V[T].message),V}if((L||F)&&!ne&&(K(b)||l&&Array.isArray(b))){const p=ue(L),x=ue(F),P=!C(p.value)&&b.length>+p.value,R=!C(x.value)&&b.length<+x.value;if((P||R)&&(be(P,p.message,x.message),!i))return Q(V[T].message),V}if(ae&&!ne&&K(b)){const{value:p,message:x}=ue(ae);if(Ae(p)&&!b.match(p)&&(V[T]={type:X.pattern,message:x,ref:f,...q(X.pattern,x)},!i))return Q(x),V}if(I){if(Y(I)){const p=await I(b,r),x=it(p,G);if(x&&(V[T]={...x,...q(X.validate,x.message)},!i))return Q(x.message),V}else if(_(I)){let p={};for(const x in I){if(!O(p)&&!i)break;const P=it(await I[x](b,r),G,x);P&&(p={...P,...q(x,P.message)},Q(P.message),i&&(V[T]=p))}if(!O(p)&&(V[T]={ref:G,...p},!i))return V}}return Q(!0),V};function zt(e,s){const r=s.slice(0,-1).length;let i=0;for(;i<r;)e=S(e)?i++:e[s[i++]];return e}function Yt(e){for(const s in e)if(e.hasOwnProperty(s)&&!S(e[s]))return!1;return!0}function k(e,s){const r=Array.isArray(s)?s:Oe(s)?[s]:gt(s),i=r.length===1?e:zt(e,r),n=r.length-1,l=r[n];return i&&delete i[l],n!==0&&(_(i)&&O(i)||Array.isArray(i)&&Yt(i))&&k(e,r.slice(0,-1)),e}var Ee=()=>{let e=[];return{get observers(){return e},next:n=>{for(const l of e)l.next&&l.next(n)},subscribe:n=>(e.push(n),{unsubscribe:()=>{e=e.filter(l=>l!==n)}}),unsubscribe:()=>{e=[]}}},Te=e=>C(e)||!mt(e);function re(e,s){if(Te(e)||Te(s))return e===s;if(oe(e)&&oe(s))return e.getTime()===s.getTime();const r=Object.keys(e),i=Object.keys(s);if(r.length!==i.length)return!1;for(const n of r){const l=e[n];if(!i.includes(n))return!1;if(n!=="ref"){const f=s[n];if(oe(l)&&oe(f)||_(l)&&_(f)||Array.isArray(l)&&Array.isArray(f)?!re(l,f):l!==f)return!1}}return!0}var pt=e=>e.type==="select-multiple",Kt=e=>qe(e)||he(e),De=e=>Fe(e)&&e.isConnected,bt=e=>{for(const s in e)if(Y(e[s]))return!0;return!1};function _e(e,s={}){const r=Array.isArray(e);if(_(e)||r)for(const i in e)Array.isArray(e[i])||_(e[i])&&!bt(e[i])?(s[i]=Array.isArray(e[i])?[]:{},_e(e[i],s[i])):C(e[i])||(s[i]=!0);return s}function xt(e,s,r){const i=Array.isArray(e);if(_(e)||i)for(const n in e)Array.isArray(e[n])||_(e[n])&&!bt(e[n])?S(s)||Te(r[n])?r[n]=Array.isArray(e[n])?_e(e[n],[]):{..._e(e[n])}:xt(e[n],C(s)?{}:s[n],r[n]):r[n]=!re(e[n],s[n]);return r}var ye=(e,s)=>xt(e,s,_e(s)),wt=(e,{valueAsNumber:s,valueAsDate:r,setValueAs:i})=>S(e)?e:s?e===""?NaN:e&&+e:r&&K(e)?new Date(e):i?i(e):e;function Re(e){const s=e.ref;return Le(s)?s.files:qe(s)?ht(e.refs).value:pt(s)?[...s.selectedOptions].map(({value:r})=>r):he(s)?vt(e.refs).value:wt(S(s.value)?e.ref.value:s.value,e)}var Zt=(e,s,r,i)=>{const n={};for(const l of e){const f=y(s,l);f&&A(n,l,f._f)}return{criteriaMode:r,names:[...e],fields:n,shouldUseNativeValidation:i}},me=e=>S(e)?e:Ae(e)?e.source:_(e)?Ae(e.value)?e.value.source:e.value:e;const lt="AsyncFunction";var Gt=e=>!!e&&!!e.validate&&!!(Y(e.validate)&&e.validate.constructor.name===lt||_(e.validate)&&Object.values(e.validate).find(s=>s.constructor.name===lt)),Qt=e=>e.mount&&(e.required||e.min||e.max||e.maxLength||e.minLength||e.pattern||e.validate);function nt(e,s,r){const i=y(e,r);if(i||Oe(r))return{error:i,name:r};const n=r.split(".");for(;n.length;){const l=n.join("."),f=y(s,l),m=y(e,l);if(f&&!Array.isArray(f)&&r!==l)return{name:r};if(m&&m.type)return{name:l,error:m};n.pop()}return{name:r}}var Xt=(e,s,r,i,n)=>n.isOnAll?!1:!r&&n.isOnTouch?!(s||e):(r?i.isOnBlur:n.isOnBlur)?!e:(r?i.isOnChange:n.isOnChange)?e:!0,er=(e,s)=>!Se(y(e,s)).length&&k(e,s);const tr={mode:W.onSubmit,reValidateMode:W.onChange,shouldFocusError:!0};function rr(e={}){let s={...tr,...e},r={submitCount:0,isDirty:!1,isLoading:Y(s.defaultValues),isValidating:!1,isSubmitted:!1,isSubmitting:!1,isSubmitSuccessful:!1,isValid:!1,touchedFields:{},dirtyFields:{},validatingFields:{},errors:s.errors||{},disabled:s.disabled||!1},i={},n=_(s.defaultValues)||_(s.values)?j(s.defaultValues||s.values)||{}:{},l=s.shouldUnregister?{}:j(n),f={action:!1,mount:!1,watch:!1},m={mount:new Set,disabled:new Set,unMount:new Set,array:new Set,watch:new Set},D,L=0;const F={isDirty:!1,dirtyFields:!1,validatingFields:!1,touchedFields:!1,isValidating:!1,isValid:!1,errors:!1},h={values:Ee(),array:Ee(),state:Ee()},se=et(s.mode),ae=et(s.reValidateMode),I=s.criteriaMode===W.all,T=t=>a=>{clearTimeout(L),L=setTimeout(t,a)},Z=async t=>{if(!s.disabled&&(F.isValid||t)){const a=s.resolver?O((await ie()).errors):await q(i,!0);a!==r.isValid&&h.state.next({isValid:a})}},ee=(t,a)=>{!s.disabled&&(F.isValidating||F.validatingFields)&&((t||Array.from(m.mount)).forEach(o=>{o&&(a?A(r.validatingFields,o,a):k(r.validatingFields,o))}),h.state.next({validatingFields:r.validatingFields,isValidating:!O(r.validatingFields)}))},b=(t,a=[],o,d,c=!0,u=!0)=>{if(d&&o&&!s.disabled){if(f.action=!0,u&&Array.isArray(y(i,t))){const g=o(y(i,t),d.argA,d.argB);c&&A(i,t,g)}if(u&&Array.isArray(y(r.errors,t))){const g=o(y(r.errors,t),d.argA,d.argB);c&&A(r.errors,t,g),er(r.errors,t)}if(F.touchedFields&&u&&Array.isArray(y(r.touchedFields,t))){const g=o(y(r.touchedFields,t),d.argA,d.argB);c&&A(r.touchedFields,t,g)}F.dirtyFields&&(r.dirtyFields=ye(n,l)),h.state.next({name:t,isDirty:p(t,a),dirtyFields:r.dirtyFields,errors:r.errors,isValid:r.isValid})}else A(l,t,a)},G=(t,a)=>{A(r.errors,t,a),h.state.next({errors:r.errors})},Q=t=>{r.errors=t,h.state.next({errors:r.errors,isValid:!1})},V=(t,a,o,d)=>{const c=y(i,t);if(c){const u=y(l,t,S(o)?y(n,t):o);S(u)||d&&d.defaultChecked||a?A(l,t,a?u:Re(c._f)):R(t,u),f.mount&&Z()}},le=(t,a,o,d,c)=>{let u=!1,g=!1;const v={name:t};if(!s.disabled){const B=!!(y(i,t)&&y(i,t)._f&&y(i,t)._f.disabled);if(!o||d){F.isDirty&&(g=r.isDirty,r.isDirty=v.isDirty=p(),u=g!==v.isDirty);const E=B||re(y(n,t),a);g=!!(!B&&y(r.dirtyFields,t)),E||B?k(r.dirtyFields,t):A(r.dirtyFields,t,!0),v.dirtyFields=r.dirtyFields,u=u||F.dirtyFields&&g!==!E}if(o){const E=y(r.touchedFields,t);E||(A(r.touchedFields,t,o),v.touchedFields=r.touchedFields,u=u||F.touchedFields&&E!==o)}u&&c&&h.state.next(v)}return u?v:{}},pe=(t,a,o,d)=>{const c=y(r.errors,t),u=F.isValid&&z(a)&&r.isValid!==a;if(s.delayError&&o?(D=T(()=>G(t,o)),D(s.delayError)):(clearTimeout(L),D=null,o?A(r.errors,t,o):k(r.errors,t)),(o?!re(c,o):c)||!O(d)||u){const g={...d,...u&&z(a)?{isValid:a}:{},errors:r.errors,name:t};r={...r,...g},h.state.next(g)}},ie=async t=>{ee(t,!0);const a=await s.resolver(l,s.context,Zt(t||m.mount,i,s.criteriaMode,s.shouldUseNativeValidation));return ee(t),a},ne=async t=>{const{errors:a}=await ie(t);if(t)for(const o of t){const d=y(a,o);d?A(r.errors,o,d):k(r.errors,o)}else r.errors=a;return a},q=async(t,a,o={valid:!0})=>{for(const d in t){const c=t[d];if(c){const{_f:u,...g}=c;if(u){const v=m.array.has(u.name),B=c._f&&Gt(c._f);B&&F.validatingFields&&ee([d],!0);const E=await ot(c,m.disabled,l,I,s.shouldUseNativeValidation&&!a,v);if(B&&F.validatingFields&&ee([d]),E[u.name]&&(o.valid=!1,a))break;!a&&(y(E,u.name)?v?Jt(r.errors,E,u.name):A(r.errors,u.name,E[u.name]):k(r.errors,u.name))}!O(g)&&await q(g,a,o)}}return o.valid},be=()=>{for(const t of m.unMount){const a=y(i,t);a&&(a._f.refs?a._f.refs.every(o=>!De(o)):!De(a._f.ref))&&Ve(t)}m.unMount=new Set},p=(t,a)=>!s.disabled&&(t&&a&&A(l,t,a),!re(Ne(),n)),x=(t,a,o)=>Wt(t,m,{...f.mount?l:S(a)?n:K(t)?{[t]:a}:a},o,a),P=t=>Se(y(f.mount?l:n,t,s.shouldUnregister?y(n,t,[]):[])),R=(t,a,o={})=>{const d=y(i,t);let c=a;if(d){const u=d._f;u&&(!u.disabled&&A(l,t,wt(a,u)),c=Fe(u.ref)&&C(a)?"":a,pt(u.ref)?[...u.ref.options].forEach(g=>g.selected=c.includes(g.value)):u.refs?he(u.ref)?u.refs.length>1?u.refs.forEach(g=>(!g.defaultChecked||!g.disabled)&&(g.checked=Array.isArray(c)?!!c.find(v=>v===g.value):c===g.value)):u.refs[0]&&(u.refs[0].checked=!!c):u.refs.forEach(g=>g.checked=g.value===c):Le(u.ref)?u.ref.value="":(u.ref.value=c,u.ref.type||h.values.next({name:t,values:{...l}})))}(o.shouldDirty||o.shouldTouch)&&le(t,c,o.shouldTouch,o.shouldDirty,!0),o.shouldValidate&&fe(t)},H=(t,a,o)=>{for(const d in a){const c=a[d],u=`${t}.${d}`,g=y(i,u);(m.array.has(t)||_(c)||g&&!g._f)&&!oe(c)?H(u,c,o):R(u,c,o)}},N=(t,a,o={})=>{const d=y(i,t),c=m.array.has(t),u=j(a);A(l,t,u),c?(h.array.next({name:t,values:{...l}}),(F.isDirty||F.dirtyFields)&&o.shouldDirty&&h.state.next({name:t,dirtyFields:ye(n,l),isDirty:p(t,u)})):d&&!d._f&&!C(u)?H(t,u,o):R(t,u,o),tt(t,m)&&h.state.next({...r}),h.values.next({name:f.mount?t:void 0,values:{...l}})},ce=async t=>{f.mount=!0;const a=t.target;let o=a.name,d=!0;const c=y(i,o),u=()=>a.type?Re(c._f):qt(t),g=v=>{d=Number.isNaN(v)||oe(v)&&isNaN(v.getTime())||re(v,y(l,o,v))};if(c){let v,B;const E=u(),te=t.type===Xe.BLUR||t.type===Xe.FOCUS_OUT,Vt=!Qt(c._f)&&!s.resolver&&!y(r.errors,o)&&!c._f.deps||Xt(te,y(r.touchedFields,o),r.isSubmitted,ae,se),ke=tt(o,m,te);A(l,o,E),te?(c._f.onBlur&&c._f.onBlur(t),D&&D(0)):c._f.onChange&&c._f.onChange(t);const Be=le(o,E,te,!1),Pt=!O(Be)||ke;if(!te&&h.values.next({name:o,type:t.type,values:{...l}}),Vt)return F.isValid&&(s.mode==="onBlur"&&te?Z():te||Z()),Pt&&h.state.next({name:o,...ke?{}:Be});if(!te&&ke&&h.state.next({...r}),s.resolver){const{errors:Je}=await ie([o]);if(g(E),d){const kt=nt(r.errors,i,o),ze=nt(Je,i,kt.name||o);v=ze.error,o=ze.name,B=O(Je)}}else ee([o],!0),v=(await ot(c,m.disabled,l,I,s.shouldUseNativeValidation))[o],ee([o]),g(E),d&&(v?B=!1:F.isValid&&(B=await q(i,!0)));d&&(c._f.deps&&fe(c._f.deps),pe(o,B,v,Be))}},de=(t,a)=>{if(y(r.errors,a)&&t.focus)return t.focus(),1},fe=async(t,a={})=>{let o,d;const c=xe(t);if(s.resolver){const u=await ne(S(t)?t:c);o=O(u),d=t?!c.some(g=>y(u,g)):o}else t?(d=(await Promise.all(c.map(async u=>{const g=y(i,u);return await q(g&&g._f?{[u]:g}:g)}))).every(Boolean),!(!d&&!r.isValid)&&Z()):d=o=await q(i);return h.state.next({...!K(t)||F.isValid&&o!==r.isValid?{}:{name:t},...s.resolver||!t?{isValid:o}:{},errors:r.errors}),a.shouldFocus&&!d&&ve(i,de,t?c:m.mount),d},Ne=t=>{const a={...f.mount?l:n};return S(t)?a:K(t)?y(a,t):t.map(o=>y(a,o))},je=(t,a)=>({invalid:!!y((a||r).errors,t),isDirty:!!y((a||r).dirtyFields,t),error:y((a||r).errors,t),isValidating:!!y(r.validatingFields,t),isTouched:!!y((a||r).touchedFields,t)}),Ft=t=>{t&&xe(t).forEach(a=>k(r.errors,a)),h.state.next({errors:t?r.errors:{}})},Ue=(t,a,o)=>{const d=(y(i,t,{_f:{}})._f||{}).ref,c=y(r.errors,t)||{},{ref:u,message:g,type:v,...B}=c;A(r.errors,t,{...B,...a,ref:d}),h.state.next({name:t,errors:r.errors,isValid:!1}),o&&o.shouldFocus&&d&&d.focus&&d.focus()},At=(t,a)=>Y(t)?h.values.subscribe({next:o=>t(x(void 0,a),o)}):x(t,a,!0),Ve=(t,a={})=>{for(const o of t?xe(t):m.mount)m.mount.delete(o),m.array.delete(o),a.keepValue||(k(i,o),k(l,o)),!a.keepError&&k(r.errors,o),!a.keepDirty&&k(r.dirtyFields,o),!a.keepTouched&&k(r.touchedFields,o),!a.keepIsValidating&&k(r.validatingFields,o),!s.shouldUnregister&&!a.keepDefaultValue&&k(n,o);h.values.next({values:{...l}}),h.state.next({...r,...a.keepDirty?{isDirty:p()}:{}}),!a.keepIsValid&&Z()},Ie=({disabled:t,name:a,field:o,fields:d})=>{(z(t)&&f.mount||t||m.disabled.has(a))&&(t?m.disabled.add(a):m.disabled.delete(a),le(a,Re(o?o._f:y(d,a)._f),!1,!1,!0))},Pe=(t,a={})=>{let o=y(i,t);const d=z(a.disabled)||z(s.disabled);return A(i,t,{...o||{},_f:{...o&&o._f?o._f:{ref:{name:t}},name:t,mount:!0,...a}}),m.mount.add(t),o?Ie({field:o,disabled:z(a.disabled)?a.disabled:s.disabled,name:t}):V(t,!0,a.value),{...d?{disabled:a.disabled||s.disabled}:{},...s.progressive?{required:!!a.required,min:me(a.min),max:me(a.max),minLength:me(a.minLength),maxLength:me(a.maxLength),pattern:me(a.pattern)}:{},name:t,onChange:ce,onBlur:ce,ref:c=>{if(c){Pe(t,a),o=y(i,t);const u=S(c.value)&&c.querySelectorAll&&c.querySelectorAll("input,select,textarea")[0]||c,g=Kt(u),v=o._f.refs||[];if(g?v.find(B=>B===u):u===o._f.ref)return;A(i,t,{_f:{...o._f,...g?{refs:[...v.filter(De),u,...Array.isArray(y(n,t))?[{}]:[]],ref:{type:u.type,name:t}}:{ref:u}}}),V(t,!1,void 0,u)}else o=y(i,t,{}),o._f&&(o._f.mount=!1),(s.shouldUnregister||a.shouldUnregister)&&!(jt(m.array,t)&&f.action)&&m.unMount.add(t)}}},He=()=>s.shouldFocusError&&ve(i,de,m.mount),_t=t=>{z(t)&&(h.state.next({disabled:t}),ve(i,(a,o)=>{const d=y(i,o);d&&(a.disabled=d._f.disabled||t,Array.isArray(d._f.refs)&&d._f.refs.forEach(c=>{c.disabled=d._f.disabled||t}))},0,!1))},Me=(t,a)=>async o=>{let d;o&&(o.preventDefault&&o.preventDefault(),o.persist&&o.persist());let c=j(l);if(m.disabled.size)for(const u of m.disabled)A(c,u,void 0);if(h.state.next({isSubmitting:!0}),s.resolver){const{errors:u,values:g}=await ie();r.errors=u,c=g}else await q(i);if(k(r.errors,"root"),O(r.errors)){h.state.next({errors:{}});try{await t(c,o)}catch(u){d=u}}else a&&await a({...r.errors},o),He(),setTimeout(He);if(h.state.next({isSubmitted:!0,isSubmitting:!1,isSubmitSuccessful:O(r.errors)&&!d,submitCount:r.submitCount+1,errors:r.errors}),d)throw d},St=(t,a={})=>{y(i,t)&&(S(a.defaultValue)?N(t,j(y(n,t))):(N(t,a.defaultValue),A(n,t,j(a.defaultValue))),a.keepTouched||k(r.touchedFields,t),a.keepDirty||(k(r.dirtyFields,t),r.isDirty=a.defaultValue?p(t,j(y(n,t))):p()),a.keepError||(k(r.errors,t),F.isValid&&Z()),h.state.next({...r}))},We=(t,a={})=>{const o=t?j(t):n,d=j(o),c=O(t),u=c?n:d;if(a.keepDefaultValues||(n=o),!a.keepValues){if(a.keepDirtyValues){const g=new Set([...m.mount,...Object.keys(ye(n,l))]);for(const v of Array.from(g))y(r.dirtyFields,v)?A(u,v,y(l,v)):N(v,y(u,v))}else{if(Ce&&S(t))for(const g of m.mount){const v=y(i,g);if(v&&v._f){const B=Array.isArray(v._f.refs)?v._f.refs[0]:v._f.ref;if(Fe(B)){const E=B.closest("form");if(E){E.reset();break}}}}i={}}l=s.shouldUnregister?a.keepDefaultValues?j(n):{}:j(u),h.array.next({values:{...u}}),h.values.next({values:{...u}})}m={mount:a.keepDirtyValues?m.mount:new Set,unMount:new Set,array:new Set,disabled:new Set,watch:new Set,watchAll:!1,focus:""},f.mount=!F.isValid||!!a.keepIsValid||!!a.keepDirtyValues,f.watch=!!s.shouldUnregister,h.state.next({submitCount:a.keepSubmitCount?r.submitCount:0,isDirty:c?!1:a.keepDirty?r.isDirty:!!(a.keepDefaultValues&&!re(t,n)),isSubmitted:a.keepIsSubmitted?r.isSubmitted:!1,dirtyFields:c?{}:a.keepDirtyValues?a.keepDefaultValues&&l?ye(n,l):r.dirtyFields:a.keepDefaultValues&&t?ye(n,t):a.keepDirty?r.dirtyFields:{},touchedFields:a.keepTouched?r.touchedFields:{},errors:a.keepErrors?r.errors:{},isSubmitSuccessful:a.keepIsSubmitSuccessful?r.isSubmitSuccessful:!1,isSubmitting:!1})},$e=(t,a)=>We(Y(t)?t(l):t,a);return{control:{register:Pe,unregister:Ve,getFieldState:je,handleSubmit:Me,setError:Ue,_executeSchema:ie,_getWatch:x,_getDirty:p,_updateValid:Z,_removeUnmounted:be,_updateFieldArray:b,_updateDisabledField:Ie,_getFieldArray:P,_reset:We,_resetDefaultValues:()=>Y(s.defaultValues)&&s.defaultValues().then(t=>{$e(t,s.resetOptions),h.state.next({isLoading:!1})}),_updateFormState:t=>{r={...r,...t}},_disableForm:_t,_subjects:h,_proxyFormState:F,_setErrors:Q,get _fields(){return i},get _formValues(){return l},get _state(){return f},set _state(t){f=t},get _defaultValues(){return n},get _names(){return m},set _names(t){m=t},get _formState(){return r},set _formState(t){r=t},get _options(){return s},set _options(t){s={...s,...t}}},trigger:fe,register:Pe,handleSubmit:Me,watch:At,setValue:N,getValues:Ne,reset:$e,resetField:St,clearErrors:Ft,unregister:Ve,setError:Ue,setFocus:(t,a={})=>{const o=y(i,t),d=o&&o._f;if(d){const c=d.refs?d.refs[0]:d.ref;c.focus&&(c.focus(),a.shouldSelect&&Y(c.select)&&c.select())}},getFieldState:je}}function sr(e={}){const s=U.useRef(void 0),r=U.useRef(void 0),[i,n]=U.useState({isDirty:!1,isValidating:!1,isLoading:Y(e.defaultValues),isSubmitted:!1,isSubmitting:!1,isSubmitSuccessful:!1,isValid:!1,submitCount:0,dirtyFields:{},touchedFields:{},validatingFields:{},errors:e.errors||{},disabled:e.disabled||!1,defaultValues:Y(e.defaultValues)?void 0:e.defaultValues});s.current||(s.current={...rr(e),formState:i});const l=s.current.control;return l._options=e,Mt({subject:l._subjects.state,next:f=>{Ht(f,l._proxyFormState,l._updateFormState)&&n({...l._formState})}}),U.useEffect(()=>l._disableForm(e.disabled),[l,e.disabled]),U.useEffect(()=>{if(l._proxyFormState.isDirty){const f=l._getDirty();f!==i.isDirty&&l._subjects.state.next({isDirty:f})}},[l,i.isDirty]),U.useEffect(()=>{e.values&&!re(e.values,r.current)?(l._reset(e.values,l._options.resetOptions),r.current=e.values,n(f=>({...f}))):l._resetDefaultValues()},[e.values,l]),U.useEffect(()=>{e.errors&&l._setErrors(e.errors)},[e.errors,l]),U.useEffect(()=>{l._state.mount||(l._updateValid(),l._state.mount=!0),l._state.watch&&(l._state.watch=!1,l._subjects.state.next({...l._formState})),l._removeUnmounted()}),U.useEffect(()=>{e.shouldUnregister&&l._subjects.values.next({values:l._getWatch()})},[e.shouldUnregister,l]),s.current.formState=It(i,l),s.current}const zr={title:"Guides/Integration with React Hook Form",args:{onSubmit:Bt(e=>{console.log("Form submitted:",e)})}},ge={render:function(s){var f,m,D,L,F,h,se,ae;const{register:r,handleSubmit:i,formState:{errors:n},reset:l}=sr({defaultValues:{fullName:"",email:"",age:void 0,country:"",password:"",confirmPassword:"",bio:"",privacyPolicyAccepted:!1}});return w.jsx("div",{style:{maxWidth:"600px",margin:"0 auto",padding:"20px"},children:w.jsxs(Ke,{direction:"column",gap:"16",children:[w.jsx(Dt,{variant:"extraLarge",tag:"h1",children:"User Registration Form"}),w.jsxs("form",{onSubmit:i(s.onSubmit),style:{display:"contents"},noValidate:!0,children:[w.jsx(Ze,{label:"Full Name",...r("fullName",{required:"Full name is required"}),error:(f=n.fullName)==null?void 0:f.message,required:!0}),w.jsx(Ze,{label:"Email",type:"email",...r("email",{required:"Email is required"}),error:(m=n.email)==null?void 0:m.message,required:!0}),w.jsx(Rt,{label:"Age",...r("age",{valueAsNumber:!0,required:"Age is required",min:{value:18,message:"You must be at least 18 years old"}}),min:18,max:120,error:(D=n.age)==null?void 0:D.message,required:!0}),w.jsxs(Tt,{label:"Country",placeholder:"",...r("country",{required:"Country is required"}),error:(L=n.country)==null?void 0:L.message,required:!0,children:[w.jsx(J,{value:"us",children:"United States"}),w.jsx(J,{value:"ca",children:"Canada"}),w.jsx(J,{value:"uk",children:"United Kingdom"}),w.jsx(J,{value:"de",children:"Germany"}),w.jsx(J,{value:"fr",children:"France"}),w.jsx(J,{value:"it",children:"Italy"}),w.jsx(J,{value:"es",children:"Spain"}),w.jsx(J,{value:"au",children:"Australia"}),w.jsx(J,{value:"jp",children:"Japan"}),w.jsx(J,{value:"other",children:"Other"})]}),w.jsx(Ge,{label:"Password",...r("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=n.password)==null?void 0:F.message,required:!0}),w.jsx(Ge,{label:"Confirm Password",...r("confirmPassword",{required:"Please confirm your password",validate:(I,T)=>I===T.password||"Passwords do not match"}),error:(h=n.confirmPassword)==null?void 0:h.message,required:!0}),w.jsx(Ct,{label:"Bio",...r("bio",{maxLength:{value:500,message:"Bio must be less than 500 characters"}}),error:(se=n.bio)==null?void 0:se.message}),w.jsx(Ot,{label:"Accept Privacy Policy",description:"I accept the Privacy Policy",error:(ae=n.privacyPolicyAccepted)==null?void 0:ae.message,hideLabel:!0,children:w.jsx(Lt,{...r("privacyPolicyAccepted",{required:"You must accept the Privacy Policy"})})}),w.jsxs(Ke,{gap:"12",padding:["20","0","0"],justifyContent:"end",children:[w.jsx(Qe,{onClick:()=>l(),variant:"secondary",children:"Reset"}),w.jsx(Qe,{submitsForm:!0,children:"Submit"})]})]})]})})},play:async({args:e,canvasElement:s,step:r})=>{const i=Et(s);await r("Fill all form fields",async()=>{console.log(await i.findAllByRole("textbox")),await M.type(i.getByRole("textbox",{name:"Full Name"}),"John Doe"),await M.type(i.getByRole("textbox",{name:"Email"}),"john.doe@example.com"),await M.clear(i.getByRole("spinbutton",{name:"Age"})),await M.type(i.getByRole("spinbutton",{name:"Age"}),"25"),await M.selectOptions(i.getByRole("combobox",{name:"Country"}),"us"),await M.type(i.getByLabelText(/^Password/),"TestPassword123!"),await M.type(i.getByLabelText(/^Confirm Password/),"TestPassword123!"),await M.type(i.getByRole("textbox",{name:"Bio"}),"I am a software engineer with 5 years of experience."),await M.click(i.getByRole("checkbox",{name:"Accept Privacy Policy"}))}),await r("Submit the form",async()=>{await M.click(i.getByRole("button",{name:"Submit"}))}),await r("Assert that onSubmit was called with correct data",async()=>{await Ye(()=>{$(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},$.anything())})}),await r("Reset the form",async()=>{await M.click(i.getByRole("button",{name:"Reset"}))}),await r("Assert all fields are cleared",async()=>{await Ye(()=>{$(i.getByRole("textbox",{name:"Full Name"})).not.toHaveValue(),$(i.getByRole("textbox",{name:"Email"})).not.toHaveValue(),$(i.getByRole("spinbutton",{name:"Age"})).not.toHaveValue(),$(i.getByRole("combobox",{name:"Country"})).not.toHaveValue(),$(i.getByLabelText(/^Password/)).not.toHaveValue(),$(i.getByLabelText(/^Confirm Password/)).not.toHaveValue(),$(i.getByRole("textbox",{name:"Bio"})).not.toHaveValue(),$(i.getByRole("checkbox",{name:"Accept Privacy Policy"})).not.toBeChecked()})})}};var ut,ct,dt,ft,yt;ge.parameters={...ge.parameters,docs:{...(ut=ge.parameters)==null?void 0:ut.docs,source:{originalSource:`{
1
+ import{j as w}from"./jsx-runtime-BYouaCF_.js";import{e as U}from"./index-B3evPFBL.js";import{f as Bt,w as Et,u as M,a as Ye,e as $}from"./index-DDyIDR-R.js";import{L as Ke}from"./LayoutFlex-CDxj6nng.js";import{H as Dt}from"./Heading-sy1TMpjs.js";import{T as Ze}from"./TextField-CErKn01e.js";import{N as Rt}from"./NumberField-DtZiz9gx.js";import{S as Tt,a as J}from"./SelectField-DjLknbw4.js";import{P as Ge}from"./PasswordField-DmJwowu1.js";import{T as Ct}from"./TextareaField-CXN-lN3Y.js";import{F as Ot}from"./FormControl-DD3JEwg1.js";import{C as Lt}from"./Checkbox-DH5o6aup.js";import{B as Qe}from"./Button-CcY3QSgD.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./layout-relative.module-ed9bC4H4.js";import"./classNames-BUL1Zq7e.js";import"./defaults-B1rzzf6M.js";import"./index-DdzHuZ-Y.js";import"./componentNames-CVVyamkx.js";import"./text-accent-DZDDtpIt.js";import"./text-centered-CznToR0o.js";import"./Input-Br6FM_ov.js";import"./InputContainer-C1TOTxt4.js";import"./TokyoUIExpand-DThzqohx.js";import"./Icon-DLiSwEfT.js";import"./render-icon-CVTdrNe-.js";import"./TokyoUIEye-BsOt8ZdC.js";import"./FieldButton-xxvyfVcj.js";import"./index-BfBdt3zW.js";import"./tslib.es6-BntfKcQG.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./useMergeRefs-BKVZOB6R.js";import"./index-DRKYGVyc.js";import"./message-BraTJ16C.js";import"./useMergeRefs-CeyIhNgY.js";import"./ButtonBase-CiON5Gq9.js";import"./Spinner-BCTJunNM.js";import"./useHostname-CH18gHFj.js";import"./index-CC6DAVyL.js";var he=e=>e.type==="checkbox",oe=e=>e instanceof Date,C=e=>e==null;const mt=e=>typeof e=="object";var _=e=>!C(e)&&!Array.isArray(e)&&mt(e)&&!oe(e),qt=e=>_(e)&&e.target?he(e.target)?e.target.checked:e.target.value:e,Nt=e=>e.substring(0,e.search(/\.\d+(\.|$)/))||e,jt=(e,s)=>e.has(Nt(s)),Ut=e=>{const s=e.constructor&&e.constructor.prototype;return _(s)&&s.hasOwnProperty("isPrototypeOf")},Ce=typeof window<"u"&&typeof window.HTMLElement<"u"&&typeof document<"u";function j(e){let s;const r=Array.isArray(e),i=typeof FileList<"u"?e instanceof FileList:!1;if(e instanceof Date)s=new Date(e);else if(e instanceof Set)s=new Set(e);else if(!(Ce&&(e instanceof Blob||i))&&(r||_(e)))if(s=r?[]:{},!r&&!Ut(e))s=e;else for(const n in e)e.hasOwnProperty(n)&&(s[n]=j(e[n]));else return e;return s}var Se=e=>Array.isArray(e)?e.filter(Boolean):[],S=e=>e===void 0,y=(e,s,r)=>{if(!s||!_(e))return r;const i=Se(s.split(/[,[\].]+?/)).reduce((n,l)=>C(n)?n:n[l],e);return S(i)||i===e?S(e[s])?r:e[s]:i},z=e=>typeof e=="boolean",Oe=e=>/^\w*$/.test(e),gt=e=>Se(e.replace(/["|']|\]/g,"").split(/\.|\[/)),A=(e,s,r)=>{let i=-1;const n=Oe(s)?[s]:gt(s),l=n.length,f=l-1;for(;++i<l;){const m=n[i];let D=r;if(i!==f){const L=e[m];D=_(L)||Array.isArray(L)?L:isNaN(+n[i+1])?{}:[]}if(m==="__proto__"||m==="constructor"||m==="prototype")return;e[m]=D,e=e[m]}return e};const Xe={BLUR:"blur",FOCUS_OUT:"focusout"},W={onBlur:"onBlur",onChange:"onChange",onSubmit:"onSubmit",onTouched:"onTouched",all:"all"},X={max:"max",min:"min",maxLength:"maxLength",minLength:"minLength",pattern:"pattern",required:"required",validate:"validate"};U.createContext(null);var It=(e,s,r,i=!0)=>{const n={defaultValues:s._defaultValues};for(const l in e)Object.defineProperty(n,l,{get:()=>{const f=l;return s._proxyFormState[f]!==W.all&&(s._proxyFormState[f]=!i||W.all),e[f]}});return n},O=e=>_(e)&&!Object.keys(e).length,Ht=(e,s,r,i)=>{r(e);const{name:n,...l}=e;return O(l)||Object.keys(l).length>=Object.keys(s).length||Object.keys(l).find(f=>s[f]===W.all)},xe=e=>Array.isArray(e)?e:[e];function Mt(e){const s=U.useRef(e);s.current=e,U.useEffect(()=>{const r=!e.disabled&&s.current.subject&&s.current.subject.subscribe({next:s.current.next});return()=>{r&&r.unsubscribe()}},[e.disabled])}var K=e=>typeof e=="string",Wt=(e,s,r,i,n)=>K(e)?(i&&s.watch.add(e),y(r,e,n)):Array.isArray(e)?e.map(l=>(i&&s.watch.add(l),y(r,l))):(i&&(s.watchAll=!0),r),$t=(e,s,r,i,n)=>s?{...r[e],types:{...r[e]&&r[e].types?r[e].types:{},[i]:n||!0}}:{},et=e=>({isOnSubmit:!e||e===W.onSubmit,isOnBlur:e===W.onBlur,isOnChange:e===W.onChange,isOnAll:e===W.all,isOnTouch:e===W.onTouched}),tt=(e,s,r)=>!r&&(s.watchAll||s.watch.has(e)||[...s.watch].some(i=>e.startsWith(i)&&/^\.\w+/.test(e.slice(i.length))));const ve=(e,s,r,i)=>{for(const n of r||Object.keys(e)){const l=y(e,n);if(l){const{_f:f,...m}=l;if(f){if(f.refs&&f.refs[0]&&s(f.refs[0],n)&&!i)return!0;if(f.ref&&s(f.ref,f.name)&&!i)return!0;if(ve(m,s))break}else if(_(m)&&ve(m,s))break}}};var Jt=(e,s,r)=>{const i=xe(y(e,r));return A(i,"root",s[r]),A(e,r,i),e},Le=e=>e.type==="file",Y=e=>typeof e=="function",Fe=e=>{if(!Ce)return!1;const s=e?e.ownerDocument:0;return e instanceof(s&&s.defaultView?s.defaultView.HTMLElement:HTMLElement)},we=e=>K(e),qe=e=>e.type==="radio",Ae=e=>e instanceof RegExp;const rt={value:!1,isValid:!1},st={value:!0,isValid:!0};var vt=e=>{if(Array.isArray(e)){if(e.length>1){const s=e.filter(r=>r&&r.checked&&!r.disabled).map(r=>r.value);return{value:s,isValid:!!s.length}}return e[0].checked&&!e[0].disabled?e[0].attributes&&!S(e[0].attributes.value)?S(e[0].value)||e[0].value===""?st:{value:e[0].value,isValid:!0}:st:rt}return rt};const at={isValid:!1,value:null};var ht=e=>Array.isArray(e)?e.reduce((s,r)=>r&&r.checked&&!r.disabled?{isValid:!0,value:r.value}:s,at):at;function it(e,s,r="validate"){if(we(e)||Array.isArray(e)&&e.every(we)||z(e)&&!e)return{type:r,message:we(e)?e:"",ref:s}}var ue=e=>_(e)&&!Ae(e)?e:{value:e,message:""},ot=async(e,s,r,i,n,l)=>{const{ref:f,refs:m,required:D,maxLength:L,minLength:F,min:h,max:se,pattern:ae,validate:I,name:T,valueAsNumber:Z,mount:ee}=e._f,b=y(r,T);if(!ee||s.has(T))return{};const G=m?m[0]:f,Q=p=>{n&&G.reportValidity&&(G.setCustomValidity(z(p)?"":p||""),G.reportValidity())},V={},le=qe(f),pe=he(f),ie=le||pe,ne=(Z||Le(f))&&S(f.value)&&S(b)||Fe(f)&&f.value===""||b===""||Array.isArray(b)&&!b.length,q=$t.bind(null,T,i,V),be=(p,x,P,R=X.maxLength,H=X.minLength)=>{const N=p?x:P;V[T]={type:p?R:H,message:N,ref:f,...q(p?R:H,N)}};if(l?!Array.isArray(b)||!b.length:D&&(!ie&&(ne||C(b))||z(b)&&!b||pe&&!vt(m).isValid||le&&!ht(m).isValid)){const{value:p,message:x}=we(D)?{value:!!D,message:D}:ue(D);if(p&&(V[T]={type:X.required,message:x,ref:G,...q(X.required,x)},!i))return Q(x),V}if(!ne&&(!C(h)||!C(se))){let p,x;const P=ue(se),R=ue(h);if(!C(b)&&!isNaN(b)){const H=f.valueAsNumber||b&&+b;C(P.value)||(p=H>P.value),C(R.value)||(x=H<R.value)}else{const H=f.valueAsDate||new Date(b),N=fe=>new Date(new Date().toDateString()+" "+fe),ce=f.type=="time",de=f.type=="week";K(P.value)&&b&&(p=ce?N(b)>N(P.value):de?b>P.value:H>new Date(P.value)),K(R.value)&&b&&(x=ce?N(b)<N(R.value):de?b<R.value:H<new Date(R.value))}if((p||x)&&(be(!!p,P.message,R.message,X.max,X.min),!i))return Q(V[T].message),V}if((L||F)&&!ne&&(K(b)||l&&Array.isArray(b))){const p=ue(L),x=ue(F),P=!C(p.value)&&b.length>+p.value,R=!C(x.value)&&b.length<+x.value;if((P||R)&&(be(P,p.message,x.message),!i))return Q(V[T].message),V}if(ae&&!ne&&K(b)){const{value:p,message:x}=ue(ae);if(Ae(p)&&!b.match(p)&&(V[T]={type:X.pattern,message:x,ref:f,...q(X.pattern,x)},!i))return Q(x),V}if(I){if(Y(I)){const p=await I(b,r),x=it(p,G);if(x&&(V[T]={...x,...q(X.validate,x.message)},!i))return Q(x.message),V}else if(_(I)){let p={};for(const x in I){if(!O(p)&&!i)break;const P=it(await I[x](b,r),G,x);P&&(p={...P,...q(x,P.message)},Q(P.message),i&&(V[T]=p))}if(!O(p)&&(V[T]={ref:G,...p},!i))return V}}return Q(!0),V};function zt(e,s){const r=s.slice(0,-1).length;let i=0;for(;i<r;)e=S(e)?i++:e[s[i++]];return e}function Yt(e){for(const s in e)if(e.hasOwnProperty(s)&&!S(e[s]))return!1;return!0}function k(e,s){const r=Array.isArray(s)?s:Oe(s)?[s]:gt(s),i=r.length===1?e:zt(e,r),n=r.length-1,l=r[n];return i&&delete i[l],n!==0&&(_(i)&&O(i)||Array.isArray(i)&&Yt(i))&&k(e,r.slice(0,-1)),e}var Ee=()=>{let e=[];return{get observers(){return e},next:n=>{for(const l of e)l.next&&l.next(n)},subscribe:n=>(e.push(n),{unsubscribe:()=>{e=e.filter(l=>l!==n)}}),unsubscribe:()=>{e=[]}}},Te=e=>C(e)||!mt(e);function re(e,s){if(Te(e)||Te(s))return e===s;if(oe(e)&&oe(s))return e.getTime()===s.getTime();const r=Object.keys(e),i=Object.keys(s);if(r.length!==i.length)return!1;for(const n of r){const l=e[n];if(!i.includes(n))return!1;if(n!=="ref"){const f=s[n];if(oe(l)&&oe(f)||_(l)&&_(f)||Array.isArray(l)&&Array.isArray(f)?!re(l,f):l!==f)return!1}}return!0}var pt=e=>e.type==="select-multiple",Kt=e=>qe(e)||he(e),De=e=>Fe(e)&&e.isConnected,bt=e=>{for(const s in e)if(Y(e[s]))return!0;return!1};function _e(e,s={}){const r=Array.isArray(e);if(_(e)||r)for(const i in e)Array.isArray(e[i])||_(e[i])&&!bt(e[i])?(s[i]=Array.isArray(e[i])?[]:{},_e(e[i],s[i])):C(e[i])||(s[i]=!0);return s}function xt(e,s,r){const i=Array.isArray(e);if(_(e)||i)for(const n in e)Array.isArray(e[n])||_(e[n])&&!bt(e[n])?S(s)||Te(r[n])?r[n]=Array.isArray(e[n])?_e(e[n],[]):{..._e(e[n])}:xt(e[n],C(s)?{}:s[n],r[n]):r[n]=!re(e[n],s[n]);return r}var ye=(e,s)=>xt(e,s,_e(s)),wt=(e,{valueAsNumber:s,valueAsDate:r,setValueAs:i})=>S(e)?e:s?e===""?NaN:e&&+e:r&&K(e)?new Date(e):i?i(e):e;function Re(e){const s=e.ref;return Le(s)?s.files:qe(s)?ht(e.refs).value:pt(s)?[...s.selectedOptions].map(({value:r})=>r):he(s)?vt(e.refs).value:wt(S(s.value)?e.ref.value:s.value,e)}var Zt=(e,s,r,i)=>{const n={};for(const l of e){const f=y(s,l);f&&A(n,l,f._f)}return{criteriaMode:r,names:[...e],fields:n,shouldUseNativeValidation:i}},me=e=>S(e)?e:Ae(e)?e.source:_(e)?Ae(e.value)?e.value.source:e.value:e;const lt="AsyncFunction";var Gt=e=>!!e&&!!e.validate&&!!(Y(e.validate)&&e.validate.constructor.name===lt||_(e.validate)&&Object.values(e.validate).find(s=>s.constructor.name===lt)),Qt=e=>e.mount&&(e.required||e.min||e.max||e.maxLength||e.minLength||e.pattern||e.validate);function nt(e,s,r){const i=y(e,r);if(i||Oe(r))return{error:i,name:r};const n=r.split(".");for(;n.length;){const l=n.join("."),f=y(s,l),m=y(e,l);if(f&&!Array.isArray(f)&&r!==l)return{name:r};if(m&&m.type)return{name:l,error:m};n.pop()}return{name:r}}var Xt=(e,s,r,i,n)=>n.isOnAll?!1:!r&&n.isOnTouch?!(s||e):(r?i.isOnBlur:n.isOnBlur)?!e:(r?i.isOnChange:n.isOnChange)?e:!0,er=(e,s)=>!Se(y(e,s)).length&&k(e,s);const tr={mode:W.onSubmit,reValidateMode:W.onChange,shouldFocusError:!0};function rr(e={}){let s={...tr,...e},r={submitCount:0,isDirty:!1,isLoading:Y(s.defaultValues),isValidating:!1,isSubmitted:!1,isSubmitting:!1,isSubmitSuccessful:!1,isValid:!1,touchedFields:{},dirtyFields:{},validatingFields:{},errors:s.errors||{},disabled:s.disabled||!1},i={},n=_(s.defaultValues)||_(s.values)?j(s.defaultValues||s.values)||{}:{},l=s.shouldUnregister?{}:j(n),f={action:!1,mount:!1,watch:!1},m={mount:new Set,disabled:new Set,unMount:new Set,array:new Set,watch:new Set},D,L=0;const F={isDirty:!1,dirtyFields:!1,validatingFields:!1,touchedFields:!1,isValidating:!1,isValid:!1,errors:!1},h={values:Ee(),array:Ee(),state:Ee()},se=et(s.mode),ae=et(s.reValidateMode),I=s.criteriaMode===W.all,T=t=>a=>{clearTimeout(L),L=setTimeout(t,a)},Z=async t=>{if(!s.disabled&&(F.isValid||t)){const a=s.resolver?O((await ie()).errors):await q(i,!0);a!==r.isValid&&h.state.next({isValid:a})}},ee=(t,a)=>{!s.disabled&&(F.isValidating||F.validatingFields)&&((t||Array.from(m.mount)).forEach(o=>{o&&(a?A(r.validatingFields,o,a):k(r.validatingFields,o))}),h.state.next({validatingFields:r.validatingFields,isValidating:!O(r.validatingFields)}))},b=(t,a=[],o,d,c=!0,u=!0)=>{if(d&&o&&!s.disabled){if(f.action=!0,u&&Array.isArray(y(i,t))){const g=o(y(i,t),d.argA,d.argB);c&&A(i,t,g)}if(u&&Array.isArray(y(r.errors,t))){const g=o(y(r.errors,t),d.argA,d.argB);c&&A(r.errors,t,g),er(r.errors,t)}if(F.touchedFields&&u&&Array.isArray(y(r.touchedFields,t))){const g=o(y(r.touchedFields,t),d.argA,d.argB);c&&A(r.touchedFields,t,g)}F.dirtyFields&&(r.dirtyFields=ye(n,l)),h.state.next({name:t,isDirty:p(t,a),dirtyFields:r.dirtyFields,errors:r.errors,isValid:r.isValid})}else A(l,t,a)},G=(t,a)=>{A(r.errors,t,a),h.state.next({errors:r.errors})},Q=t=>{r.errors=t,h.state.next({errors:r.errors,isValid:!1})},V=(t,a,o,d)=>{const c=y(i,t);if(c){const u=y(l,t,S(o)?y(n,t):o);S(u)||d&&d.defaultChecked||a?A(l,t,a?u:Re(c._f)):R(t,u),f.mount&&Z()}},le=(t,a,o,d,c)=>{let u=!1,g=!1;const v={name:t};if(!s.disabled){const B=!!(y(i,t)&&y(i,t)._f&&y(i,t)._f.disabled);if(!o||d){F.isDirty&&(g=r.isDirty,r.isDirty=v.isDirty=p(),u=g!==v.isDirty);const E=B||re(y(n,t),a);g=!!(!B&&y(r.dirtyFields,t)),E||B?k(r.dirtyFields,t):A(r.dirtyFields,t,!0),v.dirtyFields=r.dirtyFields,u=u||F.dirtyFields&&g!==!E}if(o){const E=y(r.touchedFields,t);E||(A(r.touchedFields,t,o),v.touchedFields=r.touchedFields,u=u||F.touchedFields&&E!==o)}u&&c&&h.state.next(v)}return u?v:{}},pe=(t,a,o,d)=>{const c=y(r.errors,t),u=F.isValid&&z(a)&&r.isValid!==a;if(s.delayError&&o?(D=T(()=>G(t,o)),D(s.delayError)):(clearTimeout(L),D=null,o?A(r.errors,t,o):k(r.errors,t)),(o?!re(c,o):c)||!O(d)||u){const g={...d,...u&&z(a)?{isValid:a}:{},errors:r.errors,name:t};r={...r,...g},h.state.next(g)}},ie=async t=>{ee(t,!0);const a=await s.resolver(l,s.context,Zt(t||m.mount,i,s.criteriaMode,s.shouldUseNativeValidation));return ee(t),a},ne=async t=>{const{errors:a}=await ie(t);if(t)for(const o of t){const d=y(a,o);d?A(r.errors,o,d):k(r.errors,o)}else r.errors=a;return a},q=async(t,a,o={valid:!0})=>{for(const d in t){const c=t[d];if(c){const{_f:u,...g}=c;if(u){const v=m.array.has(u.name),B=c._f&&Gt(c._f);B&&F.validatingFields&&ee([d],!0);const E=await ot(c,m.disabled,l,I,s.shouldUseNativeValidation&&!a,v);if(B&&F.validatingFields&&ee([d]),E[u.name]&&(o.valid=!1,a))break;!a&&(y(E,u.name)?v?Jt(r.errors,E,u.name):A(r.errors,u.name,E[u.name]):k(r.errors,u.name))}!O(g)&&await q(g,a,o)}}return o.valid},be=()=>{for(const t of m.unMount){const a=y(i,t);a&&(a._f.refs?a._f.refs.every(o=>!De(o)):!De(a._f.ref))&&Ve(t)}m.unMount=new Set},p=(t,a)=>!s.disabled&&(t&&a&&A(l,t,a),!re(Ne(),n)),x=(t,a,o)=>Wt(t,m,{...f.mount?l:S(a)?n:K(t)?{[t]:a}:a},o,a),P=t=>Se(y(f.mount?l:n,t,s.shouldUnregister?y(n,t,[]):[])),R=(t,a,o={})=>{const d=y(i,t);let c=a;if(d){const u=d._f;u&&(!u.disabled&&A(l,t,wt(a,u)),c=Fe(u.ref)&&C(a)?"":a,pt(u.ref)?[...u.ref.options].forEach(g=>g.selected=c.includes(g.value)):u.refs?he(u.ref)?u.refs.length>1?u.refs.forEach(g=>(!g.defaultChecked||!g.disabled)&&(g.checked=Array.isArray(c)?!!c.find(v=>v===g.value):c===g.value)):u.refs[0]&&(u.refs[0].checked=!!c):u.refs.forEach(g=>g.checked=g.value===c):Le(u.ref)?u.ref.value="":(u.ref.value=c,u.ref.type||h.values.next({name:t,values:{...l}})))}(o.shouldDirty||o.shouldTouch)&&le(t,c,o.shouldTouch,o.shouldDirty,!0),o.shouldValidate&&fe(t)},H=(t,a,o)=>{for(const d in a){const c=a[d],u=`${t}.${d}`,g=y(i,u);(m.array.has(t)||_(c)||g&&!g._f)&&!oe(c)?H(u,c,o):R(u,c,o)}},N=(t,a,o={})=>{const d=y(i,t),c=m.array.has(t),u=j(a);A(l,t,u),c?(h.array.next({name:t,values:{...l}}),(F.isDirty||F.dirtyFields)&&o.shouldDirty&&h.state.next({name:t,dirtyFields:ye(n,l),isDirty:p(t,u)})):d&&!d._f&&!C(u)?H(t,u,o):R(t,u,o),tt(t,m)&&h.state.next({...r}),h.values.next({name:f.mount?t:void 0,values:{...l}})},ce=async t=>{f.mount=!0;const a=t.target;let o=a.name,d=!0;const c=y(i,o),u=()=>a.type?Re(c._f):qt(t),g=v=>{d=Number.isNaN(v)||oe(v)&&isNaN(v.getTime())||re(v,y(l,o,v))};if(c){let v,B;const E=u(),te=t.type===Xe.BLUR||t.type===Xe.FOCUS_OUT,Vt=!Qt(c._f)&&!s.resolver&&!y(r.errors,o)&&!c._f.deps||Xt(te,y(r.touchedFields,o),r.isSubmitted,ae,se),ke=tt(o,m,te);A(l,o,E),te?(c._f.onBlur&&c._f.onBlur(t),D&&D(0)):c._f.onChange&&c._f.onChange(t);const Be=le(o,E,te,!1),Pt=!O(Be)||ke;if(!te&&h.values.next({name:o,type:t.type,values:{...l}}),Vt)return F.isValid&&(s.mode==="onBlur"&&te?Z():te||Z()),Pt&&h.state.next({name:o,...ke?{}:Be});if(!te&&ke&&h.state.next({...r}),s.resolver){const{errors:Je}=await ie([o]);if(g(E),d){const kt=nt(r.errors,i,o),ze=nt(Je,i,kt.name||o);v=ze.error,o=ze.name,B=O(Je)}}else ee([o],!0),v=(await ot(c,m.disabled,l,I,s.shouldUseNativeValidation))[o],ee([o]),g(E),d&&(v?B=!1:F.isValid&&(B=await q(i,!0)));d&&(c._f.deps&&fe(c._f.deps),pe(o,B,v,Be))}},de=(t,a)=>{if(y(r.errors,a)&&t.focus)return t.focus(),1},fe=async(t,a={})=>{let o,d;const c=xe(t);if(s.resolver){const u=await ne(S(t)?t:c);o=O(u),d=t?!c.some(g=>y(u,g)):o}else t?(d=(await Promise.all(c.map(async u=>{const g=y(i,u);return await q(g&&g._f?{[u]:g}:g)}))).every(Boolean),!(!d&&!r.isValid)&&Z()):d=o=await q(i);return h.state.next({...!K(t)||F.isValid&&o!==r.isValid?{}:{name:t},...s.resolver||!t?{isValid:o}:{},errors:r.errors}),a.shouldFocus&&!d&&ve(i,de,t?c:m.mount),d},Ne=t=>{const a={...f.mount?l:n};return S(t)?a:K(t)?y(a,t):t.map(o=>y(a,o))},je=(t,a)=>({invalid:!!y((a||r).errors,t),isDirty:!!y((a||r).dirtyFields,t),error:y((a||r).errors,t),isValidating:!!y(r.validatingFields,t),isTouched:!!y((a||r).touchedFields,t)}),Ft=t=>{t&&xe(t).forEach(a=>k(r.errors,a)),h.state.next({errors:t?r.errors:{}})},Ue=(t,a,o)=>{const d=(y(i,t,{_f:{}})._f||{}).ref,c=y(r.errors,t)||{},{ref:u,message:g,type:v,...B}=c;A(r.errors,t,{...B,...a,ref:d}),h.state.next({name:t,errors:r.errors,isValid:!1}),o&&o.shouldFocus&&d&&d.focus&&d.focus()},At=(t,a)=>Y(t)?h.values.subscribe({next:o=>t(x(void 0,a),o)}):x(t,a,!0),Ve=(t,a={})=>{for(const o of t?xe(t):m.mount)m.mount.delete(o),m.array.delete(o),a.keepValue||(k(i,o),k(l,o)),!a.keepError&&k(r.errors,o),!a.keepDirty&&k(r.dirtyFields,o),!a.keepTouched&&k(r.touchedFields,o),!a.keepIsValidating&&k(r.validatingFields,o),!s.shouldUnregister&&!a.keepDefaultValue&&k(n,o);h.values.next({values:{...l}}),h.state.next({...r,...a.keepDirty?{isDirty:p()}:{}}),!a.keepIsValid&&Z()},Ie=({disabled:t,name:a,field:o,fields:d})=>{(z(t)&&f.mount||t||m.disabled.has(a))&&(t?m.disabled.add(a):m.disabled.delete(a),le(a,Re(o?o._f:y(d,a)._f),!1,!1,!0))},Pe=(t,a={})=>{let o=y(i,t);const d=z(a.disabled)||z(s.disabled);return A(i,t,{...o||{},_f:{...o&&o._f?o._f:{ref:{name:t}},name:t,mount:!0,...a}}),m.mount.add(t),o?Ie({field:o,disabled:z(a.disabled)?a.disabled:s.disabled,name:t}):V(t,!0,a.value),{...d?{disabled:a.disabled||s.disabled}:{},...s.progressive?{required:!!a.required,min:me(a.min),max:me(a.max),minLength:me(a.minLength),maxLength:me(a.maxLength),pattern:me(a.pattern)}:{},name:t,onChange:ce,onBlur:ce,ref:c=>{if(c){Pe(t,a),o=y(i,t);const u=S(c.value)&&c.querySelectorAll&&c.querySelectorAll("input,select,textarea")[0]||c,g=Kt(u),v=o._f.refs||[];if(g?v.find(B=>B===u):u===o._f.ref)return;A(i,t,{_f:{...o._f,...g?{refs:[...v.filter(De),u,...Array.isArray(y(n,t))?[{}]:[]],ref:{type:u.type,name:t}}:{ref:u}}}),V(t,!1,void 0,u)}else o=y(i,t,{}),o._f&&(o._f.mount=!1),(s.shouldUnregister||a.shouldUnregister)&&!(jt(m.array,t)&&f.action)&&m.unMount.add(t)}}},He=()=>s.shouldFocusError&&ve(i,de,m.mount),_t=t=>{z(t)&&(h.state.next({disabled:t}),ve(i,(a,o)=>{const d=y(i,o);d&&(a.disabled=d._f.disabled||t,Array.isArray(d._f.refs)&&d._f.refs.forEach(c=>{c.disabled=d._f.disabled||t}))},0,!1))},Me=(t,a)=>async o=>{let d;o&&(o.preventDefault&&o.preventDefault(),o.persist&&o.persist());let c=j(l);if(m.disabled.size)for(const u of m.disabled)A(c,u,void 0);if(h.state.next({isSubmitting:!0}),s.resolver){const{errors:u,values:g}=await ie();r.errors=u,c=g}else await q(i);if(k(r.errors,"root"),O(r.errors)){h.state.next({errors:{}});try{await t(c,o)}catch(u){d=u}}else a&&await a({...r.errors},o),He(),setTimeout(He);if(h.state.next({isSubmitted:!0,isSubmitting:!1,isSubmitSuccessful:O(r.errors)&&!d,submitCount:r.submitCount+1,errors:r.errors}),d)throw d},St=(t,a={})=>{y(i,t)&&(S(a.defaultValue)?N(t,j(y(n,t))):(N(t,a.defaultValue),A(n,t,j(a.defaultValue))),a.keepTouched||k(r.touchedFields,t),a.keepDirty||(k(r.dirtyFields,t),r.isDirty=a.defaultValue?p(t,j(y(n,t))):p()),a.keepError||(k(r.errors,t),F.isValid&&Z()),h.state.next({...r}))},We=(t,a={})=>{const o=t?j(t):n,d=j(o),c=O(t),u=c?n:d;if(a.keepDefaultValues||(n=o),!a.keepValues){if(a.keepDirtyValues){const g=new Set([...m.mount,...Object.keys(ye(n,l))]);for(const v of Array.from(g))y(r.dirtyFields,v)?A(u,v,y(l,v)):N(v,y(u,v))}else{if(Ce&&S(t))for(const g of m.mount){const v=y(i,g);if(v&&v._f){const B=Array.isArray(v._f.refs)?v._f.refs[0]:v._f.ref;if(Fe(B)){const E=B.closest("form");if(E){E.reset();break}}}}i={}}l=s.shouldUnregister?a.keepDefaultValues?j(n):{}:j(u),h.array.next({values:{...u}}),h.values.next({values:{...u}})}m={mount:a.keepDirtyValues?m.mount:new Set,unMount:new Set,array:new Set,disabled:new Set,watch:new Set,watchAll:!1,focus:""},f.mount=!F.isValid||!!a.keepIsValid||!!a.keepDirtyValues,f.watch=!!s.shouldUnregister,h.state.next({submitCount:a.keepSubmitCount?r.submitCount:0,isDirty:c?!1:a.keepDirty?r.isDirty:!!(a.keepDefaultValues&&!re(t,n)),isSubmitted:a.keepIsSubmitted?r.isSubmitted:!1,dirtyFields:c?{}:a.keepDirtyValues?a.keepDefaultValues&&l?ye(n,l):r.dirtyFields:a.keepDefaultValues&&t?ye(n,t):a.keepDirty?r.dirtyFields:{},touchedFields:a.keepTouched?r.touchedFields:{},errors:a.keepErrors?r.errors:{},isSubmitSuccessful:a.keepIsSubmitSuccessful?r.isSubmitSuccessful:!1,isSubmitting:!1})},$e=(t,a)=>We(Y(t)?t(l):t,a);return{control:{register:Pe,unregister:Ve,getFieldState:je,handleSubmit:Me,setError:Ue,_executeSchema:ie,_getWatch:x,_getDirty:p,_updateValid:Z,_removeUnmounted:be,_updateFieldArray:b,_updateDisabledField:Ie,_getFieldArray:P,_reset:We,_resetDefaultValues:()=>Y(s.defaultValues)&&s.defaultValues().then(t=>{$e(t,s.resetOptions),h.state.next({isLoading:!1})}),_updateFormState:t=>{r={...r,...t}},_disableForm:_t,_subjects:h,_proxyFormState:F,_setErrors:Q,get _fields(){return i},get _formValues(){return l},get _state(){return f},set _state(t){f=t},get _defaultValues(){return n},get _names(){return m},set _names(t){m=t},get _formState(){return r},set _formState(t){r=t},get _options(){return s},set _options(t){s={...s,...t}}},trigger:fe,register:Pe,handleSubmit:Me,watch:At,setValue:N,getValues:Ne,reset:$e,resetField:St,clearErrors:Ft,unregister:Ve,setError:Ue,setFocus:(t,a={})=>{const o=y(i,t),d=o&&o._f;if(d){const c=d.refs?d.refs[0]:d.ref;c.focus&&(c.focus(),a.shouldSelect&&Y(c.select)&&c.select())}},getFieldState:je}}function sr(e={}){const s=U.useRef(void 0),r=U.useRef(void 0),[i,n]=U.useState({isDirty:!1,isValidating:!1,isLoading:Y(e.defaultValues),isSubmitted:!1,isSubmitting:!1,isSubmitSuccessful:!1,isValid:!1,submitCount:0,dirtyFields:{},touchedFields:{},validatingFields:{},errors:e.errors||{},disabled:e.disabled||!1,defaultValues:Y(e.defaultValues)?void 0:e.defaultValues});s.current||(s.current={...rr(e),formState:i});const l=s.current.control;return l._options=e,Mt({subject:l._subjects.state,next:f=>{Ht(f,l._proxyFormState,l._updateFormState)&&n({...l._formState})}}),U.useEffect(()=>l._disableForm(e.disabled),[l,e.disabled]),U.useEffect(()=>{if(l._proxyFormState.isDirty){const f=l._getDirty();f!==i.isDirty&&l._subjects.state.next({isDirty:f})}},[l,i.isDirty]),U.useEffect(()=>{e.values&&!re(e.values,r.current)?(l._reset(e.values,l._options.resetOptions),r.current=e.values,n(f=>({...f}))):l._resetDefaultValues()},[e.values,l]),U.useEffect(()=>{e.errors&&l._setErrors(e.errors)},[e.errors,l]),U.useEffect(()=>{l._state.mount||(l._updateValid(),l._state.mount=!0),l._state.watch&&(l._state.watch=!1,l._subjects.state.next({...l._formState})),l._removeUnmounted()}),U.useEffect(()=>{e.shouldUnregister&&l._subjects.values.next({values:l._getWatch()})},[e.shouldUnregister,l]),s.current.formState=It(i,l),s.current}const zr={title:"Guides/Integration with React Hook Form",args:{onSubmit:Bt(e=>{console.log("Form submitted:",e)})}},ge={render:function(s){var f,m,D,L,F,h,se,ae;const{register:r,handleSubmit:i,formState:{errors:n},reset:l}=sr({defaultValues:{fullName:"",email:"",age:void 0,country:"",password:"",confirmPassword:"",bio:"",privacyPolicyAccepted:!1}});return w.jsx("div",{style:{maxWidth:"600px",margin:"0 auto",padding:"20px"},children:w.jsxs(Ke,{direction:"column",gap:"16",children:[w.jsx(Dt,{variant:"extraLarge",tag:"h1",children:"User Registration Form"}),w.jsxs("form",{onSubmit:i(s.onSubmit),style:{display:"contents"},noValidate:!0,children:[w.jsx(Ze,{label:"Full Name",...r("fullName",{required:"Full name is required"}),error:(f=n.fullName)==null?void 0:f.message,required:!0}),w.jsx(Ze,{label:"Email",type:"email",...r("email",{required:"Email is required"}),error:(m=n.email)==null?void 0:m.message,required:!0}),w.jsx(Rt,{label:"Age",...r("age",{valueAsNumber:!0,required:"Age is required",min:{value:18,message:"You must be at least 18 years old"}}),min:18,max:120,error:(D=n.age)==null?void 0:D.message,required:!0}),w.jsxs(Tt,{label:"Country",placeholder:"",...r("country",{required:"Country is required"}),error:(L=n.country)==null?void 0:L.message,required:!0,children:[w.jsx(J,{value:"us",children:"United States"}),w.jsx(J,{value:"ca",children:"Canada"}),w.jsx(J,{value:"uk",children:"United Kingdom"}),w.jsx(J,{value:"de",children:"Germany"}),w.jsx(J,{value:"fr",children:"France"}),w.jsx(J,{value:"it",children:"Italy"}),w.jsx(J,{value:"es",children:"Spain"}),w.jsx(J,{value:"au",children:"Australia"}),w.jsx(J,{value:"jp",children:"Japan"}),w.jsx(J,{value:"other",children:"Other"})]}),w.jsx(Ge,{label:"Password",...r("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=n.password)==null?void 0:F.message,required:!0}),w.jsx(Ge,{label:"Confirm Password",...r("confirmPassword",{required:"Please confirm your password",validate:(I,T)=>I===T.password||"Passwords do not match"}),error:(h=n.confirmPassword)==null?void 0:h.message,required:!0}),w.jsx(Ct,{label:"Bio",...r("bio",{maxLength:{value:500,message:"Bio must be less than 500 characters"}}),error:(se=n.bio)==null?void 0:se.message}),w.jsx(Ot,{label:"Accept Privacy Policy",description:"I accept the Privacy Policy",error:(ae=n.privacyPolicyAccepted)==null?void 0:ae.message,hideLabel:!0,children:w.jsx(Lt,{...r("privacyPolicyAccepted",{required:"You must accept the Privacy Policy"})})}),w.jsxs(Ke,{gap:"12",padding:["20","0","0"],justifyContent:"end",children:[w.jsx(Qe,{onClick:()=>l(),variant:"secondary",children:"Reset"}),w.jsx(Qe,{submitsForm:!0,children:"Submit"})]})]})]})})},play:async({args:e,canvasElement:s,step:r})=>{const i=Et(s);await r("Fill all form fields",async()=>{console.log(await i.findAllByRole("textbox")),await M.type(i.getByRole("textbox",{name:"Full Name"}),"John Doe"),await M.type(i.getByRole("textbox",{name:"Email"}),"john.doe@example.com"),await M.clear(i.getByRole("spinbutton",{name:"Age"})),await M.type(i.getByRole("spinbutton",{name:"Age"}),"25"),await M.selectOptions(i.getByRole("combobox",{name:"Country"}),"us"),await M.type(i.getByLabelText(/^Password/),"TestPassword123!"),await M.type(i.getByLabelText(/^Confirm Password/),"TestPassword123!"),await M.type(i.getByRole("textbox",{name:"Bio"}),"I am a software engineer with 5 years of experience."),await M.click(i.getByRole("checkbox",{name:"Accept Privacy Policy"}))}),await r("Submit the form",async()=>{await M.click(i.getByRole("button",{name:"Submit"}))}),await r("Assert that onSubmit was called with correct data",async()=>{await Ye(()=>{$(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},$.anything())})}),await r("Reset the form",async()=>{await M.click(i.getByRole("button",{name:"Reset"}))}),await r("Assert all fields are cleared",async()=>{await Ye(()=>{$(i.getByRole("textbox",{name:"Full Name"})).not.toHaveValue(),$(i.getByRole("textbox",{name:"Email"})).not.toHaveValue(),$(i.getByRole("spinbutton",{name:"Age"})).not.toHaveValue(),$(i.getByRole("combobox",{name:"Country"})).not.toHaveValue(),$(i.getByLabelText(/^Password/)).not.toHaveValue(),$(i.getByLabelText(/^Confirm Password/)).not.toHaveValue(),$(i.getByRole("textbox",{name:"Bio"})).not.toHaveValue(),$(i.getByRole("checkbox",{name:"Accept Privacy Policy"})).not.toBeChecked()})})}};var ut,ct,dt,ft,yt;ge.parameters={...ge.parameters,docs:{...(ut=ge.parameters)==null?void 0:ut.docs,source:{originalSource:`{
2
2
  render: function Story(args) {
3
3
  const {
4
4
  register,
@@ -1 +1 @@
1
- import{j as F}from"./jsx-runtime-BYouaCF_.js";import{r as N}from"./index-B3evPFBL.js";import{f as U}from"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import{g as f,s as j,a as E,b as H}from"./layout-relative.module-ed9bC4H4.js";import{e as $,f as G,L as k}from"./defaults-B1rzzf6M.js";import{g as J}from"./index-DdzHuZ-Y.js";import{w as B}from"./componentNames-CVVyamkx.js";const t=void 0;function Y(a){const{nowrap:e}=a;return e?!0:t}function r(a){return JSON.stringify(a)}function M(a){const{direction:e,column:u,reverse:n}=a;return e===void 0?!n&&!u?{applyThrough:"direction",directionAttr:$}:{applyThrough:"columnReverse",columnReverseAttr:`${u?"column":"row"}-${n?"rev":"fwd"}`}:typeof e=="string"?{applyThrough:"direction",directionAttr:e}:{applyThrough:"direction",directionAttr:r(e)}}function W(a){const{justifyContent:e}=a;return e===void 0?t:typeof e=="string"?e:r(e)}function X(a){const{alignItems:e}=a;return e===void 0?t:typeof e=="string"?e:r(e)}function z(a){const{gap:e}=a;return e===void 0?t:typeof e=="string"?e:r(e)}function K(a){const{padding:e}=a;return e===void 0?{applyThrough:"attr",attr:G}:typeof e=="string"||typeof e=="number"?{applyThrough:"attr",attr:e}:Array.isArray(e)?{applyThrough:"classnames",classNames:f(e)}:r(e).includes("[")?{applyThrough:"classnames",classNames:f(e)}:{applyThrough:"attr",attr:JSON.stringify(e)}}function Q(a){const{hide:e,inline:u}=a;if(e===void 0)return t;const n=u?"inline-flex":"flex";if(typeof e=="boolean")return e?"hide":n;let l=r(e);return l=l.replace(/true/g,'"hide"'),l=l.replace(/false/g,`"${n}"`),l}function Z(a){const{relative:e}=a;return e===void 0?t:e===!0?!0:e===!1?t:r(e)}const ee={},m=N.forwardRef(function(e,u){const{gap:n,hide:l,column:o,nowrap:g,inline:y,dataset:h,reverse:A,padding:L,children:R,relative:x,direction:P,alignItems:T,justifyContent:w,tag:S=k,..._}=e,d=[ee.LayoutFlex,j.LayoutGap,E.LayoutHide,H.LayoutRelative],D=z({gap:n}),b=Y({nowrap:g}),q=Z({relative:x}),V=Q({hide:l,inline:y}),I=X({alignItems:T}),O=W({justifyContent:w});let v=t,p=t;const i=M({direction:P,column:o,reverse:A});i.applyThrough==="columnReverse"?p=i.columnReverseAttr:v=i.directionAttr;let c=t;const s=K({padding:L});s.applyThrough==="classnames"?d.push(...s.classNames):c=s.attr;const C={...U(_),ref:u,className:d.join(" "),"data-ds-gap":D,"data-ds-nowrap":b,"data-ds-padding":c,"data-ds-display":V,"data-ds-relative":q,"data-ds-direction":v,"data-ds-alignitems":I,"data-ds-columnreverse":p,"data-ds-justifycontent":O,...J(h,{preplyDsComponent:B.LayoutFlex})};return F.jsx(S,{...C,children:R})});try{m.displayName="LayoutFlex",m.__docgenInfo={description:"A CSS `flex` wrapper.",displayName:"LayoutFlex",props:{gap:{defaultValue:null,description:"",name:"gap",required:!1,type:{name:"enum",value:[{value:'"xs"'},{value:'"s"'},{value:'"m"'},{value:'"l"'},{value:'"xl"'},{value:'"2xs"'},{value:'"none"'},{value:'"3xs"'},{value:"ResponsiveProp<LayoutGap>"},{value:'"0"'},{value:'"1"'},{value:'"2"'},{value:'"4"'},{value:'"8"'},{value:'"12"'},{value:'"16"'},{value:'"20"'},{value:'"24"'},{value:'"32"'},{value:'"48"'},{value:'"64"'},{value:'"96"'},{value:'"160"'},{value:"ResponsiveProp<Spacing>"}]}},padding:{defaultValue:null,description:"",name:"padding",required:!1,type:{name:"enum",value:[{value:'"xs"'},{value:'"s"'},{value:'"m"'},{value:'"l"'},{value:'"xl"'},{value:'"2xs"'},{value:'"none"'},{value:'"3xs"'},{value:'"0"'},{value:'"1"'},{value:'"2"'},{value:'"4"'},{value:'"8"'},{value:'"12"'},{value:'"16"'},{value:'"20"'},{value:'"24"'},{value:'"32"'},{value:'"48"'},{value:'"64"'},{value:'"96"'},{value:'"160"'},{value:"[LayoutPadding, LayoutPadding]"},{value:"[LayoutPadding, LayoutPadding, LayoutPadding]"},{value:"[LayoutPadding, LayoutPadding, LayoutPadding, LayoutPadding]"},{value:"[Spacing, Spacing]"},{value:"[Spacing, Spacing, Spacing]"},{value:"[Spacing, Spacing, Spacing, Spacing]"},{value:"ResponsiveProp<ShortHand<LayoutPadding> | ShortHand<Spacing>>"}]}},nowrap:{defaultValue:null,description:"",name:"nowrap",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},column:{defaultValue:null,description:"@deprecated Use `direction` instead.",name:"column",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},reverse:{defaultValue:null,description:"@deprecated Use `direction` instead.",name:"reverse",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},direction:{defaultValue:null,description:"",name:"direction",required:!1,type:{name:"enum",value:[{value:'"column"'},{value:'"row"'},{value:'"row-reverse"'},{value:'"column-reverse"'},{value:"ResponsiveProp<LayoutFlexDirection>"}]}},justifyContent:{defaultValue:null,description:"",name:"justifyContent",required:!1,type:{name:"enum",value:[{value:'"center"'},{value:'"start"'},{value:'"end"'},{value:'"space-between"'},{value:'"space-around"'},{value:'"space-evenly"'},{value:"ResponsiveProp<LayoutJustifyContent>"}]}},alignItems:{defaultValue:null,description:"",name:"alignItems",required:!1,type:{name:"enum",value:[{value:'"center"'},{value:'"start"'},{value:'"end"'},{value:'"stretch"'},{value:'"baseline"'},{value:"ResponsiveProp<LayoutAlignItems>"}]}},tag:{defaultValue:null,description:"",name:"tag",required:!1,type:{name:"enum",value:[{value:'"p"'},{value:'"div"'},{value:'"span"'},{value:'"main"'},{value:'"header"'},{value:'"footer"'},{value:'"article"'},{value:'"section"'},{value:'"ul"'},{value:'"ol"'},{value:'"li"'},{value:'"fieldset"'},{value:'"table"'},{value:'"th"'},{value:'"tr"'},{value:'"td"'},{value:'"thead"'},{value:'"tfoot"'},{value:'"tbody"'},{value:'"caption"'},{value:'"figure"'},{value:'"figcaption"'}]}},hide:{defaultValue:null,description:"",name:"hide",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:"ResponsiveProp<boolean>"}]}},relative:{defaultValue:null,description:"",name:"relative",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:"ResponsiveProp<boolean>"}]}},inline:{defaultValue:null,description:"",name:"inline",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: HTMLElement | null) => void"},{value:"RefObject<HTMLElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}export{m as L};
1
+ import{j as F}from"./jsx-runtime-BYouaCF_.js";import{r as N}from"./index-B3evPFBL.js";import{f as U}from"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import{g as f,s as j,a as E,b as H}from"./layout-relative.module-ed9bC4H4.js";import{e as $,f as G,L as k}from"./defaults-B1rzzf6M.js";import{g as J}from"./index-DdzHuZ-Y.js";import{w as B}from"./componentNames-CVVyamkx.js";const t=void 0;function Y(a){const{nowrap:e}=a;return e?!0:t}function r(a){return JSON.stringify(a)}function M(a){const{direction:e,column:u,reverse:n}=a;return e===void 0?!n&&!u?{applyThrough:"direction",directionAttr:$}:{applyThrough:"columnReverse",columnReverseAttr:`${u?"column":"row"}-${n?"rev":"fwd"}`}:typeof e=="string"?{applyThrough:"direction",directionAttr:e}:{applyThrough:"direction",directionAttr:r(e)}}function W(a){const{justifyContent:e}=a;return e===void 0?t:typeof e=="string"?e:r(e)}function X(a){const{alignItems:e}=a;return e===void 0?t:typeof e=="string"?e:r(e)}function z(a){const{gap:e}=a;return e===void 0?t:typeof e=="string"?e:r(e)}function K(a){const{padding:e}=a;return e===void 0?{applyThrough:"attr",attr:G}:typeof e=="string"||typeof e=="number"?{applyThrough:"attr",attr:e}:Array.isArray(e)?{applyThrough:"classnames",classNames:f(e)}:r(e).includes("[")?{applyThrough:"classnames",classNames:f(e)}:{applyThrough:"attr",attr:JSON.stringify(e)}}function Q(a){const{hide:e,inline:u}=a;if(e===void 0)return t;const n=u?"inline-flex":"flex";if(typeof e=="boolean")return e?"hide":n;let l=r(e);return l=l.replace(/true/g,'"hide"'),l=l.replace(/false/g,`"${n}"`),l}function Z(a){const{relative:e}=a;return e===void 0?t:e===!0?!0:e===!1?t:r(e)}const ee={},m=N.forwardRef(function(e,u){const{gap:n,hide:l,column:o,nowrap:g,inline:y,dataset:h,reverse:A,padding:L,children:R,relative:x,direction:P,alignItems:T,justifyContent:w,tag:S=k,..._}=e,d=[ee.LayoutFlex,j.LayoutGap,E.LayoutHide,H.LayoutRelative],D=z({gap:n}),b=Y({nowrap:g}),q=Z({relative:x}),V=Q({hide:l,inline:y}),I=X({alignItems:T}),O=W({justifyContent:w});let v=t,p=t;const i=M({direction:P,column:o,reverse:A});i.applyThrough==="columnReverse"?p=i.columnReverseAttr:v=i.directionAttr;let c=t;const s=K({padding:L});s.applyThrough==="classnames"?d.push(...s.classNames):c=s.attr;const C={...U(_),ref:u,className:d.join(" "),"data-ds-gap":D,"data-ds-nowrap":b,"data-ds-padding":c,"data-ds-display":V,"data-ds-relative":q,"data-ds-direction":v,"data-ds-alignitems":I,"data-ds-columnreverse":p,"data-ds-justifycontent":O,...J(h,{preplyDsComponent:B.LayoutFlex})};return F.jsx(S,{...C,children:R})});try{m.displayName="LayoutFlex",m.__docgenInfo={description:"A CSS `flex` wrapper.",displayName:"LayoutFlex",props:{gap:{defaultValue:null,description:"",name:"gap",required:!1,type:{name:"enum",value:[{value:'"xs"'},{value:'"s"'},{value:'"m"'},{value:'"l"'},{value:'"xl"'},{value:'"2xs"'},{value:'"24"'},{value:'"32"'},{value:'"48"'},{value:'"64"'},{value:'"96"'},{value:'"160"'},{value:'"none"'},{value:'"2"'},{value:'"4"'},{value:'"8"'},{value:'"0"'},{value:'"12"'},{value:'"16"'},{value:'"3xs"'},{value:'"1"'},{value:'"20"'},{value:"ResponsiveProp<LayoutGap>"},{value:"ResponsiveProp<Spacing>"}]}},padding:{defaultValue:null,description:"",name:"padding",required:!1,type:{name:"enum",value:[{value:'"xs"'},{value:'"s"'},{value:'"m"'},{value:'"l"'},{value:'"xl"'},{value:'"2xs"'},{value:'"24"'},{value:'"32"'},{value:'"48"'},{value:'"64"'},{value:'"96"'},{value:'"160"'},{value:'"none"'},{value:'"2"'},{value:'"4"'},{value:'"8"'},{value:'"0"'},{value:'"12"'},{value:'"16"'},{value:'"3xs"'},{value:'"1"'},{value:'"20"'},{value:"[Spacing, Spacing]"},{value:"[Spacing, Spacing, Spacing]"},{value:"[Spacing, Spacing, Spacing, Spacing]"},{value:"[LayoutPadding, LayoutPadding]"},{value:"[LayoutPadding, LayoutPadding, LayoutPadding]"},{value:"[LayoutPadding, LayoutPadding, LayoutPadding, LayoutPadding]"},{value:"ResponsiveProp<ShortHand<Spacing> | ShortHand<LayoutPadding>>"}]}},nowrap:{defaultValue:null,description:"",name:"nowrap",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},column:{defaultValue:null,description:"@deprecated Use `direction` instead.",name:"column",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},reverse:{defaultValue:null,description:"@deprecated Use `direction` instead.",name:"reverse",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},direction:{defaultValue:null,description:"",name:"direction",required:!1,type:{name:"enum",value:[{value:'"row"'},{value:'"column"'},{value:'"row-reverse"'},{value:'"column-reverse"'},{value:"ResponsiveProp<LayoutFlexDirection>"}]}},justifyContent:{defaultValue:null,description:"",name:"justifyContent",required:!1,type:{name:"enum",value:[{value:'"center"'},{value:'"start"'},{value:'"end"'},{value:'"space-between"'},{value:'"space-around"'},{value:'"space-evenly"'},{value:"ResponsiveProp<LayoutJustifyContent>"}]}},alignItems:{defaultValue:null,description:"",name:"alignItems",required:!1,type:{name:"enum",value:[{value:'"center"'},{value:'"start"'},{value:'"end"'},{value:'"stretch"'},{value:'"baseline"'},{value:"ResponsiveProp<LayoutAlignItems>"}]}},tag:{defaultValue:null,description:"",name:"tag",required:!1,type:{name:"enum",value:[{value:'"p"'},{value:'"div"'},{value:'"span"'},{value:'"td"'},{value:'"li"'},{value:'"th"'},{value:'"tr"'},{value:'"article"'},{value:'"figure"'},{value:'"main"'},{value:'"table"'},{value:'"header"'},{value:'"footer"'},{value:'"section"'},{value:'"ul"'},{value:'"ol"'},{value:'"fieldset"'},{value:'"thead"'},{value:'"tfoot"'},{value:'"tbody"'},{value:'"caption"'},{value:'"figcaption"'}]}},hide:{defaultValue:null,description:"",name:"hide",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:"ResponsiveProp<boolean>"}]}},relative:{defaultValue:null,description:"",name:"relative",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:"ResponsiveProp<boolean>"}]}},inline:{defaultValue:null,description:"",name:"inline",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: HTMLElement | null) => void"},{value:"RefObject<HTMLElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}export{m as L};
@@ -1 +1 @@
1
- import{j as x}from"./jsx-runtime-BYouaCF_.js";import{r as I}from"./index-B3evPFBL.js";import{g as _,a as F,b as g}from"./align-self-BM6l9H5Z.js";import{f as w}from"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import{m as b,b as R}from"./classNames-BUL1Zq7e.js";import{w as e}from"./componentNames-CVVyamkx.js";import{g as C}from"./index-DdzHuZ-Y.js";import{L as N}from"./defaults-B1rzzf6M.js";const A="LayoutFlexItem__dKOq-",q={LayoutFlexItem:A,"LayoutFlexItem--stretch":"LayoutFlexItem--stretch__iab5M","LayoutFlexItem--no-stretch":"LayoutFlexItem--no-stretch__-1TuH","LayoutFlexItem--narrow-l--stretch":"LayoutFlexItem--narrow-l--stretch__3ll6c","LayoutFlexItem--narrow-l--no-stretch":"LayoutFlexItem--narrow-l--no-stretch__ObDkL","LayoutFlexItem--medium-s--stretch":"LayoutFlexItem--medium-s--stretch__3Ry1a","LayoutFlexItem--medium-s--no-stretch":"LayoutFlexItem--medium-s--no-stretch__KB7hy","LayoutFlexItem--medium-l--stretch":"LayoutFlexItem--medium-l--stretch__roskH","LayoutFlexItem--medium-l--no-stretch":"LayoutFlexItem--medium-l--no-stretch__g5WGB","LayoutFlexItem--wide-s--stretch":"LayoutFlexItem--wide-s--stretch__xMSyv","LayoutFlexItem--wide-s--no-stretch":"LayoutFlexItem--wide-s--no-stretch__3voIB","LayoutFlexItem--wide-l--stretch":"LayoutFlexItem--wide-l--stretch__AfLMQ","LayoutFlexItem--wide-l--no-stretch":"LayoutFlexItem--wide-l--no-stretch__LA45O"},t=I.forwardRef(function({children:l,alignSelf:s,stretch:u=!1,tag:o,hide:n,relative:r,dataset:m,...i},c){const d=b(q,e.LayoutFlexItem,R("stretch","no-stretch",u)),v=_(s),p=F(n),y=g(r),f=[...d,...v,...p,...y],L=o??N,h={...w(i),ref:c,className:f.join(" "),...C(m,{preplyDsComponent:e.LayoutFlexItem})};return x.jsx(L,{...h,children:l})});try{t.displayName="LayoutFlexItem",t.__docgenInfo={description:"",displayName:"LayoutFlexItem",props:{alignSelf:{defaultValue:null,description:"",name:"alignSelf",required:!1,type:{name:"enum",value:[{value:'"center"'},{value:'"start"'},{value:'"end"'},{value:'"stretch"'},{value:"ResponsiveProp<LayoutAlignSelf>"}]}},stretch:{defaultValue:{value:"false"},description:"",name:"stretch",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:"ResponsiveProp<boolean>"}]}},tag:{defaultValue:null,description:"",name:"tag",required:!1,type:{name:"enum",value:[{value:'"p"'},{value:'"div"'},{value:'"span"'},{value:'"main"'},{value:'"header"'},{value:'"footer"'},{value:'"article"'},{value:'"section"'},{value:'"ul"'},{value:'"ol"'},{value:'"li"'},{value:'"fieldset"'},{value:'"table"'},{value:'"th"'},{value:'"tr"'},{value:'"td"'},{value:'"thead"'},{value:'"tfoot"'},{value:'"tbody"'},{value:'"caption"'},{value:'"figure"'},{value:'"figcaption"'}]}},hide:{defaultValue:null,description:"",name:"hide",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:"ResponsiveProp<boolean>"}]}},relative:{defaultValue:null,description:"",name:"relative",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:"ResponsiveProp<boolean>"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: HTMLElement | null) => void"},{value:"RefObject<HTMLElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}export{t as L};
1
+ import{j as x}from"./jsx-runtime-BYouaCF_.js";import{r as I}from"./index-B3evPFBL.js";import{g as _,a as F,b as g}from"./align-self-BM6l9H5Z.js";import{f as w}from"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import{m as b,b as R}from"./classNames-BUL1Zq7e.js";import{w as e}from"./componentNames-CVVyamkx.js";import{g as C}from"./index-DdzHuZ-Y.js";import{L as N}from"./defaults-B1rzzf6M.js";const A="LayoutFlexItem__dKOq-",q={LayoutFlexItem:A,"LayoutFlexItem--stretch":"LayoutFlexItem--stretch__iab5M","LayoutFlexItem--no-stretch":"LayoutFlexItem--no-stretch__-1TuH","LayoutFlexItem--narrow-l--stretch":"LayoutFlexItem--narrow-l--stretch__3ll6c","LayoutFlexItem--narrow-l--no-stretch":"LayoutFlexItem--narrow-l--no-stretch__ObDkL","LayoutFlexItem--medium-s--stretch":"LayoutFlexItem--medium-s--stretch__3Ry1a","LayoutFlexItem--medium-s--no-stretch":"LayoutFlexItem--medium-s--no-stretch__KB7hy","LayoutFlexItem--medium-l--stretch":"LayoutFlexItem--medium-l--stretch__roskH","LayoutFlexItem--medium-l--no-stretch":"LayoutFlexItem--medium-l--no-stretch__g5WGB","LayoutFlexItem--wide-s--stretch":"LayoutFlexItem--wide-s--stretch__xMSyv","LayoutFlexItem--wide-s--no-stretch":"LayoutFlexItem--wide-s--no-stretch__3voIB","LayoutFlexItem--wide-l--stretch":"LayoutFlexItem--wide-l--stretch__AfLMQ","LayoutFlexItem--wide-l--no-stretch":"LayoutFlexItem--wide-l--no-stretch__LA45O"},t=I.forwardRef(function({children:l,alignSelf:s,stretch:u=!1,tag:o,hide:n,relative:r,dataset:m,...i},c){const d=b(q,e.LayoutFlexItem,R("stretch","no-stretch",u)),v=_(s),p=F(n),y=g(r),f=[...d,...v,...p,...y],L=o??N,h={...w(i),ref:c,className:f.join(" "),...C(m,{preplyDsComponent:e.LayoutFlexItem})};return x.jsx(L,{...h,children:l})});try{t.displayName="LayoutFlexItem",t.__docgenInfo={description:"",displayName:"LayoutFlexItem",props:{alignSelf:{defaultValue:null,description:"",name:"alignSelf",required:!1,type:{name:"enum",value:[{value:'"center"'},{value:'"start"'},{value:'"end"'},{value:'"stretch"'},{value:"ResponsiveProp<LayoutAlignSelf>"}]}},stretch:{defaultValue:{value:"false"},description:"",name:"stretch",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:"ResponsiveProp<boolean>"}]}},tag:{defaultValue:null,description:"",name:"tag",required:!1,type:{name:"enum",value:[{value:'"p"'},{value:'"div"'},{value:'"span"'},{value:'"td"'},{value:'"li"'},{value:'"th"'},{value:'"tr"'},{value:'"article"'},{value:'"figure"'},{value:'"main"'},{value:'"table"'},{value:'"header"'},{value:'"footer"'},{value:'"section"'},{value:'"ul"'},{value:'"ol"'},{value:'"fieldset"'},{value:'"thead"'},{value:'"tfoot"'},{value:'"tbody"'},{value:'"caption"'},{value:'"figcaption"'}]}},hide:{defaultValue:null,description:"",name:"hide",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:"ResponsiveProp<boolean>"}]}},relative:{defaultValue:null,description:"",name:"relative",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:"ResponsiveProp<boolean>"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: HTMLElement | null) => void"},{value:"RefObject<HTMLElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}export{t as L};
@@ -1,4 +1,4 @@
1
- import{j as t}from"./jsx-runtime-BYouaCF_.js";import{L as e,a as h}from"./LayoutGridItem-AvP_ZkC5.js";import{S as n,a as m}from"./consts-KAYct7Gj.js";import"./index-B3evPFBL.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./classNames-BUL1Zq7e.js";import"./breakpoints-BfMlrtxE.js";import"./layout-relative.module-ed9bC4H4.js";import"./align-self-BM6l9H5Z.js";import"./constants-DYYVurUY.js";import"./defaults-B1rzzf6M.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./index-DdzHuZ-Y.js";import"./componentNames-CVVyamkx.js";const G={title:"components/LayoutGrid",component:h,subcomponents:{LayoutGridItem:e},argTypes:{gap:{description:n},padding:{description:m},columns:{description:n},justifyContent:{description:n},alignItems:{description:n},justifyItems:{description:n},hide:{description:n},relative:{description:n}}},o=()=>t.jsxs(h,{columns:4,alignItems:"start",gap:"xs",children:[t.jsx(e,{children:t.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"0.25rem"},children:[t.jsx("div",{style:{height:"2ch",backgroundColor:"hotpink"}}),t.jsx("div",{style:{height:"2ch",backgroundColor:"hotpink"}})]})}),t.jsx(e,{alignSelf:"end",children:t.jsx("div",{style:{height:"2ch",backgroundColor:"hotpink"}})}),t.jsx("div",{style:{height:"2ch",backgroundColor:"hotpink"}}),t.jsx("div",{style:{height:"2ch",backgroundColor:"hotpink"}})]});o.storyName="LayoutGrid";const i={parameters:{chromatic:{disableSnapshot:!0}},args:{gap:"16",columns:3,alignItems:"start",children:t.jsxs(t.Fragment,{children:[t.jsx("div",{style:{minWidth:"100px",minHeight:50,backgroundColor:"hotpink"},children:" "}),t.jsx("div",{style:{minWidth:"100px",minHeight:75,backgroundColor:"hotpink"},children:" "}),t.jsx("div",{style:{minWidth:"100px",minHeight:100,backgroundColor:"hotpink",textAlign:"center"}})]}),dataset:{qaid:"layout-grid"}},argTypes:{dataset:{control:"object"},columns:{control:"number"},justifyItems:{control:"select"},hide:{control:"boolean"},relative:{control:"boolean"},children:{control:!1}}};var r,s,a;o.parameters={...o.parameters,docs:{...(r=o.parameters)==null?void 0:r.docs,source:{originalSource:`() => <LayoutGrid columns={4} alignItems="start" gap="xs">
1
+ import{j as t}from"./jsx-runtime-BYouaCF_.js";import{L as e,a as h}from"./LayoutGridItem-DczUihq7.js";import{S as n,a as m}from"./consts-KAYct7Gj.js";import"./index-B3evPFBL.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./classNames-BUL1Zq7e.js";import"./breakpoints-BfMlrtxE.js";import"./layout-relative.module-ed9bC4H4.js";import"./align-self-BM6l9H5Z.js";import"./constants-DYYVurUY.js";import"./defaults-B1rzzf6M.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./index-DdzHuZ-Y.js";import"./componentNames-CVVyamkx.js";const G={title:"components/LayoutGrid",component:h,subcomponents:{LayoutGridItem:e},argTypes:{gap:{description:n},padding:{description:m},columns:{description:n},justifyContent:{description:n},alignItems:{description:n},justifyItems:{description:n},hide:{description:n},relative:{description:n}}},o=()=>t.jsxs(h,{columns:4,alignItems:"start",gap:"xs",children:[t.jsx(e,{children:t.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"0.25rem"},children:[t.jsx("div",{style:{height:"2ch",backgroundColor:"hotpink"}}),t.jsx("div",{style:{height:"2ch",backgroundColor:"hotpink"}})]})}),t.jsx(e,{alignSelf:"end",children:t.jsx("div",{style:{height:"2ch",backgroundColor:"hotpink"}})}),t.jsx("div",{style:{height:"2ch",backgroundColor:"hotpink"}}),t.jsx("div",{style:{height:"2ch",backgroundColor:"hotpink"}})]});o.storyName="LayoutGrid";const i={parameters:{chromatic:{disableSnapshot:!0}},args:{gap:"16",columns:3,alignItems:"start",children:t.jsxs(t.Fragment,{children:[t.jsx("div",{style:{minWidth:"100px",minHeight:50,backgroundColor:"hotpink"},children:" "}),t.jsx("div",{style:{minWidth:"100px",minHeight:75,backgroundColor:"hotpink"},children:" "}),t.jsx("div",{style:{minWidth:"100px",minHeight:100,backgroundColor:"hotpink",textAlign:"center"}})]}),dataset:{qaid:"layout-grid"}},argTypes:{dataset:{control:"object"},columns:{control:"number"},justifyItems:{control:"select"},hide:{control:"boolean"},relative:{control:"boolean"},children:{control:!1}}};var r,s,a;o.parameters={...o.parameters,docs:{...(r=o.parameters)==null?void 0:r.docs,source:{originalSource:`() => <LayoutGrid columns={4} alignItems="start" gap="xs">
2
2
  <LayoutGridItem>
3
3
  <div style={{
4
4
  display: 'flex',
@@ -1 +1 @@
1
- import{j as g}from"./jsx-runtime-BYouaCF_.js";import{r as j}from"./index-B3evPFBL.js";import{a as I,m as _,s as y}from"./classNames-BUL1Zq7e.js";import{B as P}from"./breakpoints-BfMlrtxE.js";import{s as V,g as S}from"./layout-relative.module-ed9bC4H4.js";import{a as w,b as h,g as q}from"./align-self-BM6l9H5Z.js";import{k as O,f as D,L as b}from"./defaults-B1rzzf6M.js";import{f as C}from"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import{g as N}from"./index-DdzHuZ-Y.js";import{w as G}from"./componentNames-CVVyamkx.js";const U="LayoutGrid__SRDdo",R={LayoutGrid:U,"LayoutGrid--justify-content-center":"LayoutGrid--justify-content-center__vI9m1","LayoutGrid--justify-content-start":"LayoutGrid--justify-content-start__oyqGC","LayoutGrid--justify-content-end":"LayoutGrid--justify-content-end__RMTO2","LayoutGrid--justify-content-space-between":"LayoutGrid--justify-content-space-between__lvZnD","LayoutGrid--justify-content-space-around":"LayoutGrid--justify-content-space-around__Tl4FE","LayoutGrid--justify-content-space-evenly":"LayoutGrid--justify-content-space-evenly__KzBOQ","LayoutGrid--narrow-l--justify-content-center":"LayoutGrid--narrow-l--justify-content-center__nQPPi","LayoutGrid--narrow-l--justify-content-start":"LayoutGrid--narrow-l--justify-content-start__K7PbL","LayoutGrid--narrow-l--justify-content-end":"LayoutGrid--narrow-l--justify-content-end__UHZNO","LayoutGrid--narrow-l--justify-content-space-between":"LayoutGrid--narrow-l--justify-content-space-between__hgFor","LayoutGrid--narrow-l--justify-content-space-around":"LayoutGrid--narrow-l--justify-content-space-around__Ec1Tu","LayoutGrid--narrow-l--justify-content-space-evenly":"LayoutGrid--narrow-l--justify-content-space-evenly__TjQzB","LayoutGrid--medium-s--justify-content-center":"LayoutGrid--medium-s--justify-content-center__2xRJU","LayoutGrid--medium-s--justify-content-start":"LayoutGrid--medium-s--justify-content-start__5YYfG","LayoutGrid--medium-s--justify-content-end":"LayoutGrid--medium-s--justify-content-end__tNaVV","LayoutGrid--medium-s--justify-content-space-between":"LayoutGrid--medium-s--justify-content-space-between__Yw2DU","LayoutGrid--medium-s--justify-content-space-around":"LayoutGrid--medium-s--justify-content-space-around__GzjIX","LayoutGrid--medium-s--justify-content-space-evenly":"LayoutGrid--medium-s--justify-content-space-evenly__wtV7Y","LayoutGrid--medium-l--justify-content-center":"LayoutGrid--medium-l--justify-content-center__6Z3HK","LayoutGrid--medium-l--justify-content-start":"LayoutGrid--medium-l--justify-content-start__eCE0H","LayoutGrid--medium-l--justify-content-end":"LayoutGrid--medium-l--justify-content-end__WUHhq","LayoutGrid--medium-l--justify-content-space-between":"LayoutGrid--medium-l--justify-content-space-between__dzn5s","LayoutGrid--medium-l--justify-content-space-around":"LayoutGrid--medium-l--justify-content-space-around__1jJy-","LayoutGrid--medium-l--justify-content-space-evenly":"LayoutGrid--medium-l--justify-content-space-evenly__SALxb","LayoutGrid--wide-s--justify-content-center":"LayoutGrid--wide-s--justify-content-center__O2AmA","LayoutGrid--wide-s--justify-content-start":"LayoutGrid--wide-s--justify-content-start__M128c","LayoutGrid--wide-s--justify-content-end":"LayoutGrid--wide-s--justify-content-end__Edf7b","LayoutGrid--wide-s--justify-content-space-between":"LayoutGrid--wide-s--justify-content-space-between__sCWUj","LayoutGrid--wide-s--justify-content-space-around":"LayoutGrid--wide-s--justify-content-space-around__OqKb-","LayoutGrid--wide-s--justify-content-space-evenly":"LayoutGrid--wide-s--justify-content-space-evenly__BqAco","LayoutGrid--wide-l--justify-content-center":"LayoutGrid--wide-l--justify-content-center__WT24m","LayoutGrid--wide-l--justify-content-start":"LayoutGrid--wide-l--justify-content-start__pavdA","LayoutGrid--wide-l--justify-content-end":"LayoutGrid--wide-l--justify-content-end__US-V2","LayoutGrid--wide-l--justify-content-space-between":"LayoutGrid--wide-l--justify-content-space-between__31Ivo","LayoutGrid--wide-l--justify-content-space-around":"LayoutGrid--wide-l--justify-content-space-around__sbmBA","LayoutGrid--wide-l--justify-content-space-evenly":"LayoutGrid--wide-l--justify-content-space-evenly__VBy-1","LayoutGrid--align-items-center":"LayoutGrid--align-items-center__cAn-E","LayoutGrid--align-items-start":"LayoutGrid--align-items-start__iIBPs","LayoutGrid--align-items-end":"LayoutGrid--align-items-end__bi0Vt","LayoutGrid--align-items-stretch":"LayoutGrid--align-items-stretch__vyo1N","LayoutGrid--align-items-baseline":"LayoutGrid--align-items-baseline__iWU1b","LayoutGrid--narrow-l--align-items-center":"LayoutGrid--narrow-l--align-items-center__L5fan","LayoutGrid--narrow-l--align-items-start":"LayoutGrid--narrow-l--align-items-start__EZBkc","LayoutGrid--narrow-l--align-items-end":"LayoutGrid--narrow-l--align-items-end__igLCn","LayoutGrid--narrow-l--align-items-stretch":"LayoutGrid--narrow-l--align-items-stretch__jsoOx","LayoutGrid--narrow-l--align-items-baseline":"LayoutGrid--narrow-l--align-items-baseline__HJvGK","LayoutGrid--medium-s--align-items-center":"LayoutGrid--medium-s--align-items-center__YHCsG","LayoutGrid--medium-s--align-items-start":"LayoutGrid--medium-s--align-items-start__-x5jL","LayoutGrid--medium-s--align-items-end":"LayoutGrid--medium-s--align-items-end__5vxaA","LayoutGrid--medium-s--align-items-stretch":"LayoutGrid--medium-s--align-items-stretch__Oo3Jn","LayoutGrid--medium-s--align-items-baseline":"LayoutGrid--medium-s--align-items-baseline__N5jnU","LayoutGrid--medium-l--align-items-center":"LayoutGrid--medium-l--align-items-center__sOLNh","LayoutGrid--medium-l--align-items-start":"LayoutGrid--medium-l--align-items-start__LlPIM","LayoutGrid--medium-l--align-items-end":"LayoutGrid--medium-l--align-items-end__kMMCT","LayoutGrid--medium-l--align-items-stretch":"LayoutGrid--medium-l--align-items-stretch__R0zx-","LayoutGrid--medium-l--align-items-baseline":"LayoutGrid--medium-l--align-items-baseline__EaOdU","LayoutGrid--wide-s--align-items-center":"LayoutGrid--wide-s--align-items-center__Ve-ZD","LayoutGrid--wide-s--align-items-start":"LayoutGrid--wide-s--align-items-start__28Z74","LayoutGrid--wide-s--align-items-end":"LayoutGrid--wide-s--align-items-end__TDXOu","LayoutGrid--wide-s--align-items-stretch":"LayoutGrid--wide-s--align-items-stretch__nHuLT","LayoutGrid--wide-s--align-items-baseline":"LayoutGrid--wide-s--align-items-baseline__pnhzS","LayoutGrid--wide-l--align-items-center":"LayoutGrid--wide-l--align-items-center__JTXQd","LayoutGrid--wide-l--align-items-start":"LayoutGrid--wide-l--align-items-start__Ghu5o","LayoutGrid--wide-l--align-items-end":"LayoutGrid--wide-l--align-items-end__6ReFW","LayoutGrid--wide-l--align-items-stretch":"LayoutGrid--wide-l--align-items-stretch__O0QQv","LayoutGrid--wide-l--align-items-baseline":"LayoutGrid--wide-l--align-items-baseline__sQjwX","LayoutGrid--justify-items-stretch":"LayoutGrid--justify-items-stretch__M9QcQ","LayoutGrid--justify-items-center":"LayoutGrid--justify-items-center__oTKUc","LayoutGrid--justify-items-start":"LayoutGrid--justify-items-start__VYPnF","LayoutGrid--justify-items-end":"LayoutGrid--justify-items-end__8CwwZ","LayoutGrid--narrow-l--justify-items-stretch":"LayoutGrid--narrow-l--justify-items-stretch__kvCGG","LayoutGrid--narrow-l--justify-items-center":"LayoutGrid--narrow-l--justify-items-center__3ItXk","LayoutGrid--narrow-l--justify-items-start":"LayoutGrid--narrow-l--justify-items-start__Bhi3s","LayoutGrid--narrow-l--justify-items-end":"LayoutGrid--narrow-l--justify-items-end__gc2Ku","LayoutGrid--medium-s--justify-items-stretch":"LayoutGrid--medium-s--justify-items-stretch__tuwxD","LayoutGrid--medium-s--justify-items-center":"LayoutGrid--medium-s--justify-items-center__atoXy","LayoutGrid--medium-s--justify-items-start":"LayoutGrid--medium-s--justify-items-start__TmFN1","LayoutGrid--medium-s--justify-items-end":"LayoutGrid--medium-s--justify-items-end__jfl4-","LayoutGrid--medium-l--justify-items-stretch":"LayoutGrid--medium-l--justify-items-stretch__H23wm","LayoutGrid--medium-l--justify-items-center":"LayoutGrid--medium-l--justify-items-center__U-RzH","LayoutGrid--medium-l--justify-items-start":"LayoutGrid--medium-l--justify-items-start__0UVBd","LayoutGrid--medium-l--justify-items-end":"LayoutGrid--medium-l--justify-items-end__GDL0T","LayoutGrid--wide-s--justify-items-stretch":"LayoutGrid--wide-s--justify-items-stretch__3eMVC","LayoutGrid--wide-s--justify-items-center":"LayoutGrid--wide-s--justify-items-center__i7AtD","LayoutGrid--wide-s--justify-items-start":"LayoutGrid--wide-s--justify-items-start__O80gc","LayoutGrid--wide-s--justify-items-end":"LayoutGrid--wide-s--justify-items-end__IleZr","LayoutGrid--wide-l--justify-items-stretch":"LayoutGrid--wide-l--justify-items-stretch__P8KTm","LayoutGrid--wide-l--justify-items-center":"LayoutGrid--wide-l--justify-items-center__sXqXH","LayoutGrid--wide-l--justify-items-start":"LayoutGrid--wide-l--justify-items-start__QngDX","LayoutGrid--wide-l--justify-items-end":"LayoutGrid--wide-l--justify-items-end__wa8k8","LayoutGrid--columns":"LayoutGrid--columns__rVisq","LayoutGrid--columns-narrow-l":"LayoutGrid--columns-narrow-l__UBDfA","LayoutGrid--columns-medium-s":"LayoutGrid--columns-medium-s__lzA5l","LayoutGrid--columns-medium-l":"LayoutGrid--columns-medium-l__CM0CJ","LayoutGrid--columns-wide-s":"LayoutGrid--columns-wide-s__RUz4B","LayoutGrid--columns-wide-l":"LayoutGrid--columns-wide-l__qXJC-"},x="LayoutGrid",E=Object.keys(P),f=e=>typeof e=="number"?`repeat(${e}, 1fr)`:e.join(" "),H=e=>typeof e=="object"&&!Array.isArray(e)?Object.entries(e).reduce((a,[u,t])=>({...a,...t?{[u]:f(t)}:{}}),{_:f(e._)}):{_:f(e)},k=e=>{if(!e)return{classNames:[],style:{}};const a=H(e),u=E.filter(i=>a[i]),t=I(R,x,["columns",...u.map(i=>`columns-${i}`)]),n=u.reduce((i,s)=>({...i,[`--columns-${s}`]:a[s]}),{"--columns":a._});return{classNames:t,style:n}},z="LayoutGap",M=e=>_(V,z,[y("gap",e)]),Y="LayoutGrid",B=(e,a)=>{const{gap:u=O,padding:t=D,justifyContent:n,alignItems:i,justifyItems:s,hide:l,relative:r}=a||{},o=_(R,Y,[y("justify-content",n),y("align-items",i),y("justify-items",s)]),d=M(u),m=S(t),c=w(l,"grid"),L=h(r);return[...o,...d,...m,...c,...L]},v=j.forwardRef(function({dataset:a,children:u,...t},n){const{tag:i=b,columns:s}=t,l=B("grid",t),{style:r,classNames:o}=k(s),d=[...l,...o],m={...C(t),ref:n,className:d.join(" "),style:r,...N(a,{preplyDsComponent:G.LayoutGrid})};return g.jsx(i,{...m,children:u})});try{v.displayName="LayoutGrid",v.__docgenInfo={description:"A CSS `grid` wrapper.",displayName:"LayoutGrid",props:{gap:{defaultValue:null,description:"",name:"gap",required:!1,type:{name:"enum",value:[{value:'"xs"'},{value:'"s"'},{value:'"m"'},{value:'"l"'},{value:'"xl"'},{value:'"2xs"'},{value:'"none"'},{value:'"3xs"'},{value:"ResponsiveProp<LayoutGap>"},{value:'"0"'},{value:'"1"'},{value:'"2"'},{value:'"4"'},{value:'"8"'},{value:'"12"'},{value:'"16"'},{value:'"20"'},{value:'"24"'},{value:'"32"'},{value:'"48"'},{value:'"64"'},{value:'"96"'},{value:'"160"'},{value:"ResponsiveProp<Spacing>"}]}},padding:{defaultValue:null,description:"",name:"padding",required:!1,type:{name:"enum",value:[{value:'"xs"'},{value:'"s"'},{value:'"m"'},{value:'"l"'},{value:'"xl"'},{value:'"2xs"'},{value:'"none"'},{value:'"3xs"'},{value:'"0"'},{value:'"1"'},{value:'"2"'},{value:'"4"'},{value:'"8"'},{value:'"12"'},{value:'"16"'},{value:'"20"'},{value:'"24"'},{value:'"32"'},{value:'"48"'},{value:'"64"'},{value:'"96"'},{value:'"160"'},{value:"[LayoutPadding, LayoutPadding]"},{value:"[LayoutPadding, LayoutPadding, LayoutPadding]"},{value:"[LayoutPadding, LayoutPadding, LayoutPadding, LayoutPadding]"},{value:"[Spacing, Spacing]"},{value:"[Spacing, Spacing, Spacing]"},{value:"[Spacing, Spacing, Spacing, Spacing]"},{value:"ResponsiveProp<ShortHand<LayoutPadding> | ShortHand<Spacing>>"}]}},columns:{defaultValue:null,description:"The `number` of columns, or a `string[]` of `grid-template-columns`.\n@see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns}",name:"columns",required:!1,type:{name:"enum",value:[{value:"number"},{value:"string[]"},{value:"ResponsiveProp<number | string[]>"}]}},justifyContent:{defaultValue:null,description:"",name:"justifyContent",required:!1,type:{name:"enum",value:[{value:'"center"'},{value:'"start"'},{value:'"end"'},{value:'"space-between"'},{value:'"space-around"'},{value:'"space-evenly"'},{value:"ResponsiveProp<LayoutJustifyContent>"}]}},alignItems:{defaultValue:null,description:"",name:"alignItems",required:!1,type:{name:"enum",value:[{value:'"center"'},{value:'"start"'},{value:'"end"'},{value:'"stretch"'},{value:'"baseline"'},{value:"ResponsiveProp<LayoutAlignItems>"}]}},justifyItems:{defaultValue:null,description:"",name:"justifyItems",required:!1,type:{name:"enum",value:[{value:'"center"'},{value:'"start"'},{value:'"end"'},{value:'"stretch"'},{value:"ResponsiveProp<LayoutJustifyItems>"}]}},tag:{defaultValue:null,description:"",name:"tag",required:!1,type:{name:"enum",value:[{value:'"p"'},{value:'"div"'},{value:'"span"'},{value:'"main"'},{value:'"header"'},{value:'"footer"'},{value:'"article"'},{value:'"section"'},{value:'"ul"'},{value:'"ol"'},{value:'"li"'},{value:'"fieldset"'},{value:'"table"'},{value:'"th"'},{value:'"tr"'},{value:'"td"'},{value:'"thead"'},{value:'"tfoot"'},{value:'"tbody"'},{value:'"caption"'},{value:'"figure"'},{value:'"figcaption"'}]}},hide:{defaultValue:null,description:"",name:"hide",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:"ResponsiveProp<boolean>"}]}},relative:{defaultValue:null,description:"",name:"relative",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:"ResponsiveProp<boolean>"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: HTMLElement | null) => void"},{value:"RefObject<HTMLElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}const K="LayoutGridItem__GF0yx",Q={LayoutGridItem:K},p=j.forwardRef(function({children:a,alignSelf:u,tag:t,hide:n,relative:i,dataset:s,...l},r){const o=_(Q,G.LayoutGridItem,[]),d=q(u),m=w(n),c=h(i),L=[...o,...d,...m,...c],A=t??b,T={...C(l),ref:r,className:L.join(" "),...N(s,{preplyDsComponent:G.LayoutGridItem})};return g.jsx(A,{...T,children:a})});try{p.displayName="LayoutGridItem",p.__docgenInfo={description:"",displayName:"LayoutGridItem",props:{alignSelf:{defaultValue:null,description:"",name:"alignSelf",required:!1,type:{name:"enum",value:[{value:'"center"'},{value:'"start"'},{value:'"end"'},{value:'"stretch"'},{value:"ResponsiveProp<LayoutAlignSelf>"}]}},tag:{defaultValue:null,description:"",name:"tag",required:!1,type:{name:"enum",value:[{value:'"p"'},{value:'"div"'},{value:'"span"'},{value:'"main"'},{value:'"header"'},{value:'"footer"'},{value:'"article"'},{value:'"section"'},{value:'"ul"'},{value:'"ol"'},{value:'"li"'},{value:'"fieldset"'},{value:'"table"'},{value:'"th"'},{value:'"tr"'},{value:'"td"'},{value:'"thead"'},{value:'"tfoot"'},{value:'"tbody"'},{value:'"caption"'},{value:'"figure"'},{value:'"figcaption"'}]}},hide:{defaultValue:null,description:"",name:"hide",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:"ResponsiveProp<boolean>"}]}},relative:{defaultValue:null,description:"",name:"relative",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:"ResponsiveProp<boolean>"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: HTMLElement | null) => void"},{value:"RefObject<HTMLElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}export{p as L,v as a};
1
+ import{j as g}from"./jsx-runtime-BYouaCF_.js";import{r as j}from"./index-B3evPFBL.js";import{a as I,m as _,s as y}from"./classNames-BUL1Zq7e.js";import{B as P}from"./breakpoints-BfMlrtxE.js";import{s as V,g as S}from"./layout-relative.module-ed9bC4H4.js";import{a as w,b as h,g as q}from"./align-self-BM6l9H5Z.js";import{k as O,f as D,L as b}from"./defaults-B1rzzf6M.js";import{f as C}from"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import{g as N}from"./index-DdzHuZ-Y.js";import{w as G}from"./componentNames-CVVyamkx.js";const U="LayoutGrid__SRDdo",R={LayoutGrid:U,"LayoutGrid--justify-content-center":"LayoutGrid--justify-content-center__vI9m1","LayoutGrid--justify-content-start":"LayoutGrid--justify-content-start__oyqGC","LayoutGrid--justify-content-end":"LayoutGrid--justify-content-end__RMTO2","LayoutGrid--justify-content-space-between":"LayoutGrid--justify-content-space-between__lvZnD","LayoutGrid--justify-content-space-around":"LayoutGrid--justify-content-space-around__Tl4FE","LayoutGrid--justify-content-space-evenly":"LayoutGrid--justify-content-space-evenly__KzBOQ","LayoutGrid--narrow-l--justify-content-center":"LayoutGrid--narrow-l--justify-content-center__nQPPi","LayoutGrid--narrow-l--justify-content-start":"LayoutGrid--narrow-l--justify-content-start__K7PbL","LayoutGrid--narrow-l--justify-content-end":"LayoutGrid--narrow-l--justify-content-end__UHZNO","LayoutGrid--narrow-l--justify-content-space-between":"LayoutGrid--narrow-l--justify-content-space-between__hgFor","LayoutGrid--narrow-l--justify-content-space-around":"LayoutGrid--narrow-l--justify-content-space-around__Ec1Tu","LayoutGrid--narrow-l--justify-content-space-evenly":"LayoutGrid--narrow-l--justify-content-space-evenly__TjQzB","LayoutGrid--medium-s--justify-content-center":"LayoutGrid--medium-s--justify-content-center__2xRJU","LayoutGrid--medium-s--justify-content-start":"LayoutGrid--medium-s--justify-content-start__5YYfG","LayoutGrid--medium-s--justify-content-end":"LayoutGrid--medium-s--justify-content-end__tNaVV","LayoutGrid--medium-s--justify-content-space-between":"LayoutGrid--medium-s--justify-content-space-between__Yw2DU","LayoutGrid--medium-s--justify-content-space-around":"LayoutGrid--medium-s--justify-content-space-around__GzjIX","LayoutGrid--medium-s--justify-content-space-evenly":"LayoutGrid--medium-s--justify-content-space-evenly__wtV7Y","LayoutGrid--medium-l--justify-content-center":"LayoutGrid--medium-l--justify-content-center__6Z3HK","LayoutGrid--medium-l--justify-content-start":"LayoutGrid--medium-l--justify-content-start__eCE0H","LayoutGrid--medium-l--justify-content-end":"LayoutGrid--medium-l--justify-content-end__WUHhq","LayoutGrid--medium-l--justify-content-space-between":"LayoutGrid--medium-l--justify-content-space-between__dzn5s","LayoutGrid--medium-l--justify-content-space-around":"LayoutGrid--medium-l--justify-content-space-around__1jJy-","LayoutGrid--medium-l--justify-content-space-evenly":"LayoutGrid--medium-l--justify-content-space-evenly__SALxb","LayoutGrid--wide-s--justify-content-center":"LayoutGrid--wide-s--justify-content-center__O2AmA","LayoutGrid--wide-s--justify-content-start":"LayoutGrid--wide-s--justify-content-start__M128c","LayoutGrid--wide-s--justify-content-end":"LayoutGrid--wide-s--justify-content-end__Edf7b","LayoutGrid--wide-s--justify-content-space-between":"LayoutGrid--wide-s--justify-content-space-between__sCWUj","LayoutGrid--wide-s--justify-content-space-around":"LayoutGrid--wide-s--justify-content-space-around__OqKb-","LayoutGrid--wide-s--justify-content-space-evenly":"LayoutGrid--wide-s--justify-content-space-evenly__BqAco","LayoutGrid--wide-l--justify-content-center":"LayoutGrid--wide-l--justify-content-center__WT24m","LayoutGrid--wide-l--justify-content-start":"LayoutGrid--wide-l--justify-content-start__pavdA","LayoutGrid--wide-l--justify-content-end":"LayoutGrid--wide-l--justify-content-end__US-V2","LayoutGrid--wide-l--justify-content-space-between":"LayoutGrid--wide-l--justify-content-space-between__31Ivo","LayoutGrid--wide-l--justify-content-space-around":"LayoutGrid--wide-l--justify-content-space-around__sbmBA","LayoutGrid--wide-l--justify-content-space-evenly":"LayoutGrid--wide-l--justify-content-space-evenly__VBy-1","LayoutGrid--align-items-center":"LayoutGrid--align-items-center__cAn-E","LayoutGrid--align-items-start":"LayoutGrid--align-items-start__iIBPs","LayoutGrid--align-items-end":"LayoutGrid--align-items-end__bi0Vt","LayoutGrid--align-items-stretch":"LayoutGrid--align-items-stretch__vyo1N","LayoutGrid--align-items-baseline":"LayoutGrid--align-items-baseline__iWU1b","LayoutGrid--narrow-l--align-items-center":"LayoutGrid--narrow-l--align-items-center__L5fan","LayoutGrid--narrow-l--align-items-start":"LayoutGrid--narrow-l--align-items-start__EZBkc","LayoutGrid--narrow-l--align-items-end":"LayoutGrid--narrow-l--align-items-end__igLCn","LayoutGrid--narrow-l--align-items-stretch":"LayoutGrid--narrow-l--align-items-stretch__jsoOx","LayoutGrid--narrow-l--align-items-baseline":"LayoutGrid--narrow-l--align-items-baseline__HJvGK","LayoutGrid--medium-s--align-items-center":"LayoutGrid--medium-s--align-items-center__YHCsG","LayoutGrid--medium-s--align-items-start":"LayoutGrid--medium-s--align-items-start__-x5jL","LayoutGrid--medium-s--align-items-end":"LayoutGrid--medium-s--align-items-end__5vxaA","LayoutGrid--medium-s--align-items-stretch":"LayoutGrid--medium-s--align-items-stretch__Oo3Jn","LayoutGrid--medium-s--align-items-baseline":"LayoutGrid--medium-s--align-items-baseline__N5jnU","LayoutGrid--medium-l--align-items-center":"LayoutGrid--medium-l--align-items-center__sOLNh","LayoutGrid--medium-l--align-items-start":"LayoutGrid--medium-l--align-items-start__LlPIM","LayoutGrid--medium-l--align-items-end":"LayoutGrid--medium-l--align-items-end__kMMCT","LayoutGrid--medium-l--align-items-stretch":"LayoutGrid--medium-l--align-items-stretch__R0zx-","LayoutGrid--medium-l--align-items-baseline":"LayoutGrid--medium-l--align-items-baseline__EaOdU","LayoutGrid--wide-s--align-items-center":"LayoutGrid--wide-s--align-items-center__Ve-ZD","LayoutGrid--wide-s--align-items-start":"LayoutGrid--wide-s--align-items-start__28Z74","LayoutGrid--wide-s--align-items-end":"LayoutGrid--wide-s--align-items-end__TDXOu","LayoutGrid--wide-s--align-items-stretch":"LayoutGrid--wide-s--align-items-stretch__nHuLT","LayoutGrid--wide-s--align-items-baseline":"LayoutGrid--wide-s--align-items-baseline__pnhzS","LayoutGrid--wide-l--align-items-center":"LayoutGrid--wide-l--align-items-center__JTXQd","LayoutGrid--wide-l--align-items-start":"LayoutGrid--wide-l--align-items-start__Ghu5o","LayoutGrid--wide-l--align-items-end":"LayoutGrid--wide-l--align-items-end__6ReFW","LayoutGrid--wide-l--align-items-stretch":"LayoutGrid--wide-l--align-items-stretch__O0QQv","LayoutGrid--wide-l--align-items-baseline":"LayoutGrid--wide-l--align-items-baseline__sQjwX","LayoutGrid--justify-items-stretch":"LayoutGrid--justify-items-stretch__M9QcQ","LayoutGrid--justify-items-center":"LayoutGrid--justify-items-center__oTKUc","LayoutGrid--justify-items-start":"LayoutGrid--justify-items-start__VYPnF","LayoutGrid--justify-items-end":"LayoutGrid--justify-items-end__8CwwZ","LayoutGrid--narrow-l--justify-items-stretch":"LayoutGrid--narrow-l--justify-items-stretch__kvCGG","LayoutGrid--narrow-l--justify-items-center":"LayoutGrid--narrow-l--justify-items-center__3ItXk","LayoutGrid--narrow-l--justify-items-start":"LayoutGrid--narrow-l--justify-items-start__Bhi3s","LayoutGrid--narrow-l--justify-items-end":"LayoutGrid--narrow-l--justify-items-end__gc2Ku","LayoutGrid--medium-s--justify-items-stretch":"LayoutGrid--medium-s--justify-items-stretch__tuwxD","LayoutGrid--medium-s--justify-items-center":"LayoutGrid--medium-s--justify-items-center__atoXy","LayoutGrid--medium-s--justify-items-start":"LayoutGrid--medium-s--justify-items-start__TmFN1","LayoutGrid--medium-s--justify-items-end":"LayoutGrid--medium-s--justify-items-end__jfl4-","LayoutGrid--medium-l--justify-items-stretch":"LayoutGrid--medium-l--justify-items-stretch__H23wm","LayoutGrid--medium-l--justify-items-center":"LayoutGrid--medium-l--justify-items-center__U-RzH","LayoutGrid--medium-l--justify-items-start":"LayoutGrid--medium-l--justify-items-start__0UVBd","LayoutGrid--medium-l--justify-items-end":"LayoutGrid--medium-l--justify-items-end__GDL0T","LayoutGrid--wide-s--justify-items-stretch":"LayoutGrid--wide-s--justify-items-stretch__3eMVC","LayoutGrid--wide-s--justify-items-center":"LayoutGrid--wide-s--justify-items-center__i7AtD","LayoutGrid--wide-s--justify-items-start":"LayoutGrid--wide-s--justify-items-start__O80gc","LayoutGrid--wide-s--justify-items-end":"LayoutGrid--wide-s--justify-items-end__IleZr","LayoutGrid--wide-l--justify-items-stretch":"LayoutGrid--wide-l--justify-items-stretch__P8KTm","LayoutGrid--wide-l--justify-items-center":"LayoutGrid--wide-l--justify-items-center__sXqXH","LayoutGrid--wide-l--justify-items-start":"LayoutGrid--wide-l--justify-items-start__QngDX","LayoutGrid--wide-l--justify-items-end":"LayoutGrid--wide-l--justify-items-end__wa8k8","LayoutGrid--columns":"LayoutGrid--columns__rVisq","LayoutGrid--columns-narrow-l":"LayoutGrid--columns-narrow-l__UBDfA","LayoutGrid--columns-medium-s":"LayoutGrid--columns-medium-s__lzA5l","LayoutGrid--columns-medium-l":"LayoutGrid--columns-medium-l__CM0CJ","LayoutGrid--columns-wide-s":"LayoutGrid--columns-wide-s__RUz4B","LayoutGrid--columns-wide-l":"LayoutGrid--columns-wide-l__qXJC-"},x="LayoutGrid",E=Object.keys(P),f=e=>typeof e=="number"?`repeat(${e}, 1fr)`:e.join(" "),H=e=>typeof e=="object"&&!Array.isArray(e)?Object.entries(e).reduce((a,[u,t])=>({...a,...t?{[u]:f(t)}:{}}),{_:f(e._)}):{_:f(e)},k=e=>{if(!e)return{classNames:[],style:{}};const a=H(e),u=E.filter(i=>a[i]),t=I(R,x,["columns",...u.map(i=>`columns-${i}`)]),n=u.reduce((i,s)=>({...i,[`--columns-${s}`]:a[s]}),{"--columns":a._});return{classNames:t,style:n}},z="LayoutGap",M=e=>_(V,z,[y("gap",e)]),Y="LayoutGrid",B=(e,a)=>{const{gap:u=O,padding:t=D,justifyContent:n,alignItems:i,justifyItems:s,hide:l,relative:r}=a||{},o=_(R,Y,[y("justify-content",n),y("align-items",i),y("justify-items",s)]),d=M(u),m=S(t),c=w(l,"grid"),L=h(r);return[...o,...d,...m,...c,...L]},v=j.forwardRef(function({dataset:a,children:u,...t},n){const{tag:i=b,columns:s}=t,l=B("grid",t),{style:r,classNames:o}=k(s),d=[...l,...o],m={...C(t),ref:n,className:d.join(" "),style:r,...N(a,{preplyDsComponent:G.LayoutGrid})};return g.jsx(i,{...m,children:u})});try{v.displayName="LayoutGrid",v.__docgenInfo={description:"A CSS `grid` wrapper.",displayName:"LayoutGrid",props:{gap:{defaultValue:null,description:"",name:"gap",required:!1,type:{name:"enum",value:[{value:'"xs"'},{value:'"s"'},{value:'"m"'},{value:'"l"'},{value:'"xl"'},{value:'"2xs"'},{value:'"24"'},{value:'"32"'},{value:'"48"'},{value:'"64"'},{value:'"96"'},{value:'"160"'},{value:'"none"'},{value:'"2"'},{value:'"4"'},{value:'"8"'},{value:'"0"'},{value:'"12"'},{value:'"16"'},{value:'"3xs"'},{value:'"1"'},{value:'"20"'},{value:"ResponsiveProp<LayoutGap>"},{value:"ResponsiveProp<Spacing>"}]}},padding:{defaultValue:null,description:"",name:"padding",required:!1,type:{name:"enum",value:[{value:'"xs"'},{value:'"s"'},{value:'"m"'},{value:'"l"'},{value:'"xl"'},{value:'"2xs"'},{value:'"24"'},{value:'"32"'},{value:'"48"'},{value:'"64"'},{value:'"96"'},{value:'"160"'},{value:'"none"'},{value:'"2"'},{value:'"4"'},{value:'"8"'},{value:'"0"'},{value:'"12"'},{value:'"16"'},{value:'"3xs"'},{value:'"1"'},{value:'"20"'},{value:"[Spacing, Spacing]"},{value:"[Spacing, Spacing, Spacing]"},{value:"[Spacing, Spacing, Spacing, Spacing]"},{value:"[LayoutPadding, LayoutPadding]"},{value:"[LayoutPadding, LayoutPadding, LayoutPadding]"},{value:"[LayoutPadding, LayoutPadding, LayoutPadding, LayoutPadding]"},{value:"ResponsiveProp<ShortHand<Spacing> | ShortHand<LayoutPadding>>"}]}},columns:{defaultValue:null,description:"The `number` of columns, or a `string[]` of `grid-template-columns`.\n@see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns}",name:"columns",required:!1,type:{name:"enum",value:[{value:"number"},{value:"string[]"},{value:"ResponsiveProp<number | string[]>"}]}},justifyContent:{defaultValue:null,description:"",name:"justifyContent",required:!1,type:{name:"enum",value:[{value:'"center"'},{value:'"start"'},{value:'"end"'},{value:'"space-between"'},{value:'"space-around"'},{value:'"space-evenly"'},{value:"ResponsiveProp<LayoutJustifyContent>"}]}},alignItems:{defaultValue:null,description:"",name:"alignItems",required:!1,type:{name:"enum",value:[{value:'"center"'},{value:'"start"'},{value:'"end"'},{value:'"stretch"'},{value:'"baseline"'},{value:"ResponsiveProp<LayoutAlignItems>"}]}},justifyItems:{defaultValue:null,description:"",name:"justifyItems",required:!1,type:{name:"enum",value:[{value:'"center"'},{value:'"start"'},{value:'"end"'},{value:'"stretch"'},{value:"ResponsiveProp<LayoutJustifyItems>"}]}},tag:{defaultValue:null,description:"",name:"tag",required:!1,type:{name:"enum",value:[{value:'"p"'},{value:'"div"'},{value:'"span"'},{value:'"td"'},{value:'"li"'},{value:'"th"'},{value:'"tr"'},{value:'"article"'},{value:'"figure"'},{value:'"main"'},{value:'"table"'},{value:'"header"'},{value:'"footer"'},{value:'"section"'},{value:'"ul"'},{value:'"ol"'},{value:'"fieldset"'},{value:'"thead"'},{value:'"tfoot"'},{value:'"tbody"'},{value:'"caption"'},{value:'"figcaption"'}]}},hide:{defaultValue:null,description:"",name:"hide",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:"ResponsiveProp<boolean>"}]}},relative:{defaultValue:null,description:"",name:"relative",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:"ResponsiveProp<boolean>"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: HTMLElement | null) => void"},{value:"RefObject<HTMLElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}const K="LayoutGridItem__GF0yx",Q={LayoutGridItem:K},p=j.forwardRef(function({children:a,alignSelf:u,tag:t,hide:n,relative:i,dataset:s,...l},r){const o=_(Q,G.LayoutGridItem,[]),d=q(u),m=w(n),c=h(i),L=[...o,...d,...m,...c],A=t??b,T={...C(l),ref:r,className:L.join(" "),...N(s,{preplyDsComponent:G.LayoutGridItem})};return g.jsx(A,{...T,children:a})});try{p.displayName="LayoutGridItem",p.__docgenInfo={description:"",displayName:"LayoutGridItem",props:{alignSelf:{defaultValue:null,description:"",name:"alignSelf",required:!1,type:{name:"enum",value:[{value:'"center"'},{value:'"start"'},{value:'"end"'},{value:'"stretch"'},{value:"ResponsiveProp<LayoutAlignSelf>"}]}},tag:{defaultValue:null,description:"",name:"tag",required:!1,type:{name:"enum",value:[{value:'"p"'},{value:'"div"'},{value:'"span"'},{value:'"td"'},{value:'"li"'},{value:'"th"'},{value:'"tr"'},{value:'"article"'},{value:'"figure"'},{value:'"main"'},{value:'"table"'},{value:'"header"'},{value:'"footer"'},{value:'"section"'},{value:'"ul"'},{value:'"ol"'},{value:'"fieldset"'},{value:'"thead"'},{value:'"tfoot"'},{value:'"tbody"'},{value:'"caption"'},{value:'"figcaption"'}]}},hide:{defaultValue:null,description:"",name:"hide",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:"ResponsiveProp<boolean>"}]}},relative:{defaultValue:null,description:"",name:"relative",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:"ResponsiveProp<boolean>"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: HTMLElement | null) => void"},{value:"RefObject<HTMLElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}export{p as L,v as a};
@@ -1,4 +1,4 @@
1
- import{j as e}from"./jsx-runtime-BYouaCF_.js";import{T as n}from"./Text-C3jprdij.js";import{r as k}from"./index-B3evPFBL.js";import{f as Q}from"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import{g as Z}from"./defaults-B1rzzf6M.js";import{u as ee}from"./useHostname-CH18gHFj.js";import{m as ae,s as x,b as f}from"./classNames-BUL1Zq7e.js";import{w as y}from"./componentNames-CVVyamkx.js";import{a as ne,g as te}from"./index-DdzHuZ-Y.js";import{g as d}from"./getTokenVar-DU_DEzTd.js";import{c as u}from"./tokens-DXy5hgn5.js";import"./text-accent-DZDDtpIt.js";import"./text-centered-CznToR0o.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./constants-BgBLeZzp.js";const re="Link__Jw0hc",ie={Link:re,"Link--inline":"Link--inline__aWJxC","Link--noUnderline":"Link--noUnderline__vuCBO","Link--variant-accentDark":"Link--variant-accentDark__5RCSd","Link--variant-accentDark--dsInternalSimulation-hover":"Link--variant-accentDark--dsInternalSimulation-hover__5vv1U","Link--variant-accentDark--dsInternalSimulation-active":"Link--variant-accentDark--dsInternalSimulation-active__-PYgd","Link--variant-accentDarkInverted":"Link--variant-accentDarkInverted__5GVfk","Link--variant-accentDarkInverted--dsInternalSimulation-hover":"Link--variant-accentDarkInverted--dsInternalSimulation-hover__u7g4B","Link--variant-accentDarkInverted--dsInternalSimulation-active":"Link--variant-accentDarkInverted--dsInternalSimulation-active__4bGgk","Link--variant-neutral":"Link--variant-neutral__v0PFp","Link--variant-neutral--dsInternalSimulation-hover":"Link--variant-neutral--dsInternalSimulation-hover__L-hBv","Link--variant-neutral--dsInternalSimulation-active":"Link--variant-neutral--dsInternalSimulation-active__5rs0z","Link--variant-neutralInverted":"Link--variant-neutralInverted__t9Ijl","Link--variant-neutralInverted--dsInternalSimulation-hover":"Link--variant-neutralInverted--dsInternalSimulation-hover__H50Xt","Link--variant-neutralInverted--dsInternalSimulation-active":"Link--variant-neutralInverted--dsInternalSimulation-active__Irr0h","Link--variant-unsetColors":"Link--variant-unsetColors__EEbF5","Link--variant-unsetColors--dsInternalSimulation-hover":"Link--variant-unsetColors--dsInternalSimulation-hover__vMIu6","Link--variant-unsetColors--dsInternalSimulation-active":"Link--variant-unsetColors--dsInternalSimulation-active__wlGTN"},a=k.forwardRef(function(E,P){const{variant:v=Z,href:R,download:A,opensInNewTab:H,nofollow:M,assistiveText:B,onClick:O,as:p,url:F,dataset:G,children:m,inline:J,dsInternalSimulation:z,noUnderline:W,...X}=E,$=ee(),K=ae(ie,y.Link,[x(`variant-${v}--dsInternalSimulation`,z),x("variant",v),f("inline",void 0,J),f("noUnderline",void 0,W)]),c=R||F,Y=c?ne($,c,H,M):{},h={...Q(X),ref:P,href:c,download:A,"aria-label":B,onClick:O,className:K.join(" "),...te(G,{preplyDsComponent:y.Link})};return p?k.cloneElement(p,{...h},m):e.jsx("a",{...h,...Y,children:m})});try{a.displayName="Link",a.__docgenInfo={description:`This is an inline element and will inherit font-size, line-height and
1
+ import{j as e}from"./jsx-runtime-BYouaCF_.js";import{T as n}from"./Text-CH4wZQv6.js";import{r as k}from"./index-B3evPFBL.js";import{f as Q}from"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import{g as Z}from"./defaults-B1rzzf6M.js";import{u as ee}from"./useHostname-CH18gHFj.js";import{m as ae,s as x,b as f}from"./classNames-BUL1Zq7e.js";import{w as y}from"./componentNames-CVVyamkx.js";import{a as ne,g as te}from"./index-DdzHuZ-Y.js";import{g as d}from"./getTokenVar-DU_DEzTd.js";import{c as u}from"./tokens-DXy5hgn5.js";import"./text-accent-DZDDtpIt.js";import"./text-centered-CznToR0o.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./constants-BgBLeZzp.js";const re="Link__Jw0hc",ie={Link:re,"Link--inline":"Link--inline__aWJxC","Link--noUnderline":"Link--noUnderline__vuCBO","Link--variant-accentDark":"Link--variant-accentDark__5RCSd","Link--variant-accentDark--dsInternalSimulation-hover":"Link--variant-accentDark--dsInternalSimulation-hover__5vv1U","Link--variant-accentDark--dsInternalSimulation-active":"Link--variant-accentDark--dsInternalSimulation-active__-PYgd","Link--variant-accentDarkInverted":"Link--variant-accentDarkInverted__5GVfk","Link--variant-accentDarkInverted--dsInternalSimulation-hover":"Link--variant-accentDarkInverted--dsInternalSimulation-hover__u7g4B","Link--variant-accentDarkInverted--dsInternalSimulation-active":"Link--variant-accentDarkInverted--dsInternalSimulation-active__4bGgk","Link--variant-neutral":"Link--variant-neutral__v0PFp","Link--variant-neutral--dsInternalSimulation-hover":"Link--variant-neutral--dsInternalSimulation-hover__L-hBv","Link--variant-neutral--dsInternalSimulation-active":"Link--variant-neutral--dsInternalSimulation-active__5rs0z","Link--variant-neutralInverted":"Link--variant-neutralInverted__t9Ijl","Link--variant-neutralInverted--dsInternalSimulation-hover":"Link--variant-neutralInverted--dsInternalSimulation-hover__H50Xt","Link--variant-neutralInverted--dsInternalSimulation-active":"Link--variant-neutralInverted--dsInternalSimulation-active__Irr0h","Link--variant-unsetColors":"Link--variant-unsetColors__EEbF5","Link--variant-unsetColors--dsInternalSimulation-hover":"Link--variant-unsetColors--dsInternalSimulation-hover__vMIu6","Link--variant-unsetColors--dsInternalSimulation-active":"Link--variant-unsetColors--dsInternalSimulation-active__wlGTN"},a=k.forwardRef(function(E,P){const{variant:v=Z,href:R,download:A,opensInNewTab:H,nofollow:M,assistiveText:B,onClick:O,as:p,url:F,dataset:G,children:m,inline:J,dsInternalSimulation:z,noUnderline:W,...X}=E,$=ee(),K=ae(ie,y.Link,[x(`variant-${v}--dsInternalSimulation`,z),x("variant",v),f("inline",void 0,J),f("noUnderline",void 0,W)]),c=R||F,Y=c?ne($,c,H,M):{},h={...Q(X),ref:P,href:c,download:A,"aria-label":B,onClick:O,className:K.join(" "),...te(G,{preplyDsComponent:y.Link})};return p?k.cloneElement(p,{...h},m):e.jsx("a",{...h,...Y,children:m})});try{a.displayName="Link",a.__docgenInfo={description:`This is an inline element and will inherit font-size, line-height and
2
2
  font-weight from the parent context. If you need to customise any of these
3
3
  styles, all you have to do is wrap the <Link> in a Text or TextInline
4
4
  component.`,displayName:"Link",props:{variant:{defaultValue:null,description:"",name:"variant",required:!1,type:{name:"enum",value:[{value:'"accentDark"'},{value:'"neutral"'},{value:'"accentDarkInverted"'},{value:'"neutralInverted"'},{value:'"unsetColors"'}]}},href:{defaultValue:null,description:"",name:"href",required:!1,type:{name:"enum",value:[{value:"string"}]}},download:{defaultValue:null,description:`When provided, instructs the browser to download the target (the file
@@ -0,0 +1,4 @@
1
+ import{j as u}from"./jsx-runtime-BYouaCF_.js";import{r as q}from"./index-B3evPFBL.js";import{F as V}from"./FormControl-DD3JEwg1.js";import{w as g}from"./componentNames-CVVyamkx.js";import{I as H}from"./Input-Br6FM_ov.js";const t=q.forwardRef(function({id:i,label:d,description:s,error:m,required:o,inputDataset:p,dataset:v,hideLabel:f,onClick:c,onValueChange:e,onChange:a,hasError:y,className:I,style:L,...b},h){const E=l=>{a==null||a(l);const n=l.target.value;e==null||e(n?Number(n):void 0)};return u.jsx(V,{id:i,label:d,description:s,error:m,hasError:y,required:o,dataset:v,hideLabel:f,onClick:c,preplyDsComponent:g.NumberField,children:u.jsx(H,{...b,type:"number",ref:h,dataset:p,onChange:E})})});try{t.displayName="NumberField",t.__docgenInfo={description:"",displayName:"NumberField",props:{id:{defaultValue:null,description:`The id to be passed to the input element.
2
+ If not provided, will be generated for accessibility purposes.`,name:"id",required:!1,type:{name:"enum",value:[{value:"string"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLDivElement> & MouseEventHandler<HTMLInputElement>"}]}},error:{defaultValue:null,description:"Error message to display when the field has an invalid value.",name:"error",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},description:{defaultValue:null,description:`Additional descriptive text that appears below the input field
3
+ to provide more context or instructions to the user.`,name:"description",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},required:{defaultValue:null,description:`Indicates if the field is required. When false, adds a "Optional"
4
+ indicator next to the label.`,name:"required",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},hasError:{defaultValue:null,description:"Whether the field has an error.\n@deprecated Use `error` prop to exlicitly describe the error to users",name:"hasError",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},label:{defaultValue:null,description:"The field label. This is needed for accessibility purposes, but can be\nhidden using the `hideLabel` prop.",name:"label",required:!0,type:{name:"enum",value:[{value:"undefined"},{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},hideLabel:{defaultValue:null,description:"Use this to hide the `label` visually, but keep it in the accessibility\ntree.",name:"hideLabel",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},name:{defaultValue:null,description:"",name:"name",required:!1,type:{name:"enum",value:[{value:"string"}]}},placeholder:{defaultValue:null,description:"",name:"placeholder",required:!1,type:{name:"enum",value:[{value:"string"}]}},disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},onCopy:{defaultValue:null,description:"",name:"onCopy",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLInputElement>"}]}},onCut:{defaultValue:null,description:"",name:"onCut",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLInputElement>"}]}},onPaste:{defaultValue:null,description:"",name:"onPaste",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLInputElement>"}]}},onFocus:{defaultValue:null,description:"",name:"onFocus",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<HTMLInputElement>"}]}},onBlur:{defaultValue:null,description:"",name:"onBlur",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<HTMLInputElement>"}]}},onChange:{defaultValue:null,description:"",name:"onChange",required:!1,type:{name:"enum",value:[{value:"ChangeEventHandler<HTMLInputElement>"}]}},onKeyDown:{defaultValue:null,description:"",name:"onKeyDown",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<HTMLInputElement>"}]}},onKeyUp:{defaultValue:null,description:"",name:"onKeyUp",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<HTMLInputElement>"}]}},button:{defaultValue:null,description:"",name:"button",required:!1,type:{name:"enum",value:[{value:"ReactElement<any, string | JSXElementConstructor<any>>"}]}},icon:{defaultValue:null,description:"",name:"icon",required:!1,type:{name:"enum",value:[{value:"ReactElement<any, string | JSXElementConstructor<any>>"}]}},readOnly:{defaultValue:null,description:"",name:"readOnly",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},maxLength:{defaultValue:null,description:"",name:"maxLength",required:!1,type:{name:"enum",value:[{value:"number"}]}},value:{defaultValue:null,description:"",name:"value",required:!1,type:{name:"enum",value:[{value:"number"}]}},defaultValue:{defaultValue:null,description:"",name:"defaultValue",required:!1,type:{name:"enum",value:[{value:"number"}]}},onValueChange:{defaultValue:null,description:"",name:"onValueChange",required:!1,type:{name:"enum",value:[{value:"(value: number | undefined) => void"}]}},min:{defaultValue:null,description:"",name:"min",required:!1,type:{name:"enum",value:[{value:"number"}]}},max:{defaultValue:null,description:"",name:"max",required:!1,type:{name:"enum",value:[{value:"number"}]}},step:{defaultValue:null,description:"",name:"step",required:!1,type:{name:"enum",value:[{value:"number"}]}},inputDataset:{defaultValue:null,description:"",name:"inputDataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: HTMLInputElement | null) => void"},{value:"RefObject<HTMLInputElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}export{t as N};
@@ -1,4 +1,4 @@
1
- import{j as g}from"./jsx-runtime-BYouaCF_.js";import{r as re}from"./index-B3evPFBL.js";import{a as se}from"./chunk-D5ZWXAHU-BhFjjRSl.js";import{f as r,w as x,e as n,u as w}from"./index-DDyIDR-R.js";import{F as te}from"./TokyoUIPhone-BHLDT6dz.js";import{F as ie}from"./TokyoUIAttach-BvBvQVx_.js";import{I as ne}from"./Icon-D4cMo1we.js";import{N as ae}from"./NumberField-DyKjoAC-.js";import{F as ce}from"./FieldButton-xxvyfVcj.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./v4-CtRu48qb.js";import"./text-accent-DZDDtpIt.js";import"./classNames-BUL1Zq7e.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-CVTdrNe-.js";import"./componentNames-CVVyamkx.js";import"./index-DdzHuZ-Y.js";import"./defaults-B1rzzf6M.js";import"./FormControl-DD3JEwg1.js";import"./index-DRKYGVyc.js";import"./index-BfBdt3zW.js";import"./tslib.es6-BntfKcQG.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./message-BraTJ16C.js";import"./Input-B7MlX4U9.js";import"./InputContainer-C1TOTxt4.js";const qe={title:"components/NumberField",component:ae,args:{name:"number",label:"Number",defaultValue:void 0,placeholder:"Enter a number",dataset:{testid:"field",foo:"bar"},inputDataset:{testid:"input",foo:"bar"},onChange:r(),onValueChange:r(),onBlur:r(),onFocus:r(),onClick:r(),onCopy:r(),onKeyDown:r(),onKeyUp:r(),onPaste:r()}},c={play:async({canvasElement:a,step:e,args:t})=>{const o=x(a),i=o.getByTestId("field"),s=o.getByTestId("input");await e("it should render correct label",async()=>{const oe=x(i).getByTestId("label");n(oe).toHaveTextContent("Number"),n(s).toHaveAccessibleName("Number")}),await e("it should call onFocus when the input is focused",async()=>{s.focus(),n(t.onFocus).toHaveBeenCalled()}),await e("it should call callback when the value changes",async()=>{await w.type(s,"42"),n(t.onValueChange).toHaveBeenCalledWith(42),n(t.onChange).toHaveBeenCalled()}),await e("it should call onBlur when the input is blurred",async()=>{await w.keyboard("{tab}"),n(t.onBlur).toHaveBeenCalled()}),await e("it should render the dataset props",async()=>{n(i).toHaveAttribute("data-testid","field"),n(i).toHaveAttribute("data-foo","bar"),n(s).toHaveAttribute("data-testid","input"),n(s).toHaveAttribute("data-foo","bar")})}},l={render:function(e){const[t,o]=re.useState(e.value);return g.jsx(ae,{...e,value:t,onChange:i=>{var s;o(Number(i.target.value)),(s=e.onChange)==null||s.call(e,i)}})},args:{label:"Controlled NumberField",placeholder:"Enter a number...",value:42},play:async({canvas:a,step:e})=>{await e("it should render the correct initial value",async()=>{const t=a.getByTestId("input");await n(t).toHaveValue(42)}),await e("it should update the value when the user types",async()=>{const t=a.getByTestId("input");await w.clear(t),await w.type(t,"100"),n(t).toHaveValue(100)})}},u={args:{icon:g.jsx(ne,{svg:te,dataset:{testid:"icon"}})},play:async({canvas:a,step:e})=>{await e("it should render the icon",async()=>{const t=a.getByTestId("icon");n(t).toBeInTheDocument()})}},d={args:{description:"Enter a valid number"},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input"),o=a.getByTestId("description");await e("it should render the description",async()=>{n(t).toHaveAccessibleDescription("Enter a valid number"),n(o).toHaveTextContent("Enter a valid number")})}},p={args:{required:!0},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input"),o=a.getByTestId("label");await e("it should render correct label",async()=>{n(t).toHaveAccessibleName("Number"),n(o).toHaveTextContent("Number • Required")}),await e("it should render required attribute",async()=>{n(t).toHaveAttribute("required")})}},m={args:{hideLabel:!0},play:async({canvas:a,step:e})=>{await e("it should render correct a11y label",async()=>{const t=a.getByTestId("input");n(t).toHaveAccessibleName("Number")})}},b={args:{error:"This is an error message"},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input"),o=a.getByTestId("error");await e("it should render the error message",async()=>{n(t).toHaveAccessibleErrorMessage("This is an error message"),n(o).toHaveTextContent("This is an error message")})}},h={args:{disabled:!0},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input");await e("it should render the disabled input",async()=>{n(t).toHaveAttribute("disabled")})}},y={args:{readOnly:!0},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input");await e("it should render the read only input",async()=>{n(t).toHaveAttribute("readonly")})}},v={parameters:{chromatic:{disableSnapshot:!0}},args:{label:"Number of lessons",placeholder:"How about 3?",description:"These lessons will be scheduled automatically"},argTypes:{label:{control:"text"},placeholder:{control:"text"},description:{control:"text"},error:{control:"text"},value:{control:"number"},defaultValue:{control:"number"},inputDataset:{control:"object"},dataset:{control:"object"},id:{control:"text"},required:{control:"boolean"},hideLabel:{control:"boolean"},name:{control:"text"},disabled:{control:"boolean"},readOnly:{control:"boolean"},min:{control:"number"},max:{control:"number"},step:{control:"number"},icon:{options:["None","With Icon"],mapping:{None:void 0,"With Icon":g.jsx(ne,{svg:te})},control:"select"},button:{options:["None","With Button"],mapping:{None:void 0,"With Button":g.jsx(ce,{svg:ie,assistiveText:"Do the thing",onClick:se("field button clicked")})},control:"select"},maxLength:{control:"number"},hasError:{table:{disable:!0}}}};var B,T,H,f,I;c.parameters={...c.parameters,docs:{...(B=c.parameters)==null?void 0:B.docs,source:{originalSource:`{
1
+ import{j as g}from"./jsx-runtime-BYouaCF_.js";import{r as re}from"./index-B3evPFBL.js";import{a as se}from"./chunk-D5ZWXAHU-BhFjjRSl.js";import{f as r,w as x,e as n,u as w}from"./index-DDyIDR-R.js";import{F as te}from"./TokyoUIPhone-BHLDT6dz.js";import{F as ie}from"./TokyoUIAttach-BvBvQVx_.js";import{I as ne}from"./Icon-DLiSwEfT.js";import{N as ae}from"./NumberField-DtZiz9gx.js";import{F as ce}from"./FieldButton-xxvyfVcj.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./v4-CtRu48qb.js";import"./text-accent-DZDDtpIt.js";import"./classNames-BUL1Zq7e.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-CVTdrNe-.js";import"./componentNames-CVVyamkx.js";import"./index-DdzHuZ-Y.js";import"./defaults-B1rzzf6M.js";import"./FormControl-DD3JEwg1.js";import"./index-DRKYGVyc.js";import"./index-BfBdt3zW.js";import"./tslib.es6-BntfKcQG.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./message-BraTJ16C.js";import"./Input-Br6FM_ov.js";import"./InputContainer-C1TOTxt4.js";const qe={title:"components/NumberField",component:ae,args:{name:"number",label:"Number",defaultValue:void 0,placeholder:"Enter a number",dataset:{testid:"field",foo:"bar"},inputDataset:{testid:"input",foo:"bar"},onChange:r(),onValueChange:r(),onBlur:r(),onFocus:r(),onClick:r(),onCopy:r(),onKeyDown:r(),onKeyUp:r(),onPaste:r()}},c={play:async({canvasElement:a,step:e,args:t})=>{const o=x(a),i=o.getByTestId("field"),s=o.getByTestId("input");await e("it should render correct label",async()=>{const oe=x(i).getByTestId("label");n(oe).toHaveTextContent("Number"),n(s).toHaveAccessibleName("Number")}),await e("it should call onFocus when the input is focused",async()=>{s.focus(),n(t.onFocus).toHaveBeenCalled()}),await e("it should call callback when the value changes",async()=>{await w.type(s,"42"),n(t.onValueChange).toHaveBeenCalledWith(42),n(t.onChange).toHaveBeenCalled()}),await e("it should call onBlur when the input is blurred",async()=>{await w.keyboard("{tab}"),n(t.onBlur).toHaveBeenCalled()}),await e("it should render the dataset props",async()=>{n(i).toHaveAttribute("data-testid","field"),n(i).toHaveAttribute("data-foo","bar"),n(s).toHaveAttribute("data-testid","input"),n(s).toHaveAttribute("data-foo","bar")})}},l={render:function(e){const[t,o]=re.useState(e.value);return g.jsx(ae,{...e,value:t,onChange:i=>{var s;o(Number(i.target.value)),(s=e.onChange)==null||s.call(e,i)}})},args:{label:"Controlled NumberField",placeholder:"Enter a number...",value:42},play:async({canvas:a,step:e})=>{await e("it should render the correct initial value",async()=>{const t=a.getByTestId("input");await n(t).toHaveValue(42)}),await e("it should update the value when the user types",async()=>{const t=a.getByTestId("input");await w.clear(t),await w.type(t,"100"),n(t).toHaveValue(100)})}},u={args:{icon:g.jsx(ne,{svg:te,dataset:{testid:"icon"}})},play:async({canvas:a,step:e})=>{await e("it should render the icon",async()=>{const t=a.getByTestId("icon");n(t).toBeInTheDocument()})}},d={args:{description:"Enter a valid number"},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input"),o=a.getByTestId("description");await e("it should render the description",async()=>{n(t).toHaveAccessibleDescription("Enter a valid number"),n(o).toHaveTextContent("Enter a valid number")})}},p={args:{required:!0},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input"),o=a.getByTestId("label");await e("it should render correct label",async()=>{n(t).toHaveAccessibleName("Number"),n(o).toHaveTextContent("Number • Required")}),await e("it should render required attribute",async()=>{n(t).toHaveAttribute("required")})}},m={args:{hideLabel:!0},play:async({canvas:a,step:e})=>{await e("it should render correct a11y label",async()=>{const t=a.getByTestId("input");n(t).toHaveAccessibleName("Number")})}},b={args:{error:"This is an error message"},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input"),o=a.getByTestId("error");await e("it should render the error message",async()=>{n(t).toHaveAccessibleErrorMessage("This is an error message"),n(o).toHaveTextContent("This is an error message")})}},h={args:{disabled:!0},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input");await e("it should render the disabled input",async()=>{n(t).toHaveAttribute("disabled")})}},y={args:{readOnly:!0},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input");await e("it should render the read only input",async()=>{n(t).toHaveAttribute("readonly")})}},v={parameters:{chromatic:{disableSnapshot:!0}},args:{label:"Number of lessons",placeholder:"How about 3?",description:"These lessons will be scheduled automatically"},argTypes:{label:{control:"text"},placeholder:{control:"text"},description:{control:"text"},error:{control:"text"},value:{control:"number"},defaultValue:{control:"number"},inputDataset:{control:"object"},dataset:{control:"object"},id:{control:"text"},required:{control:"boolean"},hideLabel:{control:"boolean"},name:{control:"text"},disabled:{control:"boolean"},readOnly:{control:"boolean"},min:{control:"number"},max:{control:"number"},step:{control:"number"},icon:{options:["None","With Icon"],mapping:{None:void 0,"With Icon":g.jsx(ne,{svg:te})},control:"select"},button:{options:["None","With Button"],mapping:{None:void 0,"With Button":g.jsx(ce,{svg:ie,assistiveText:"Do the thing",onClick:se("field button clicked")})},control:"select"},maxLength:{control:"number"},hasError:{table:{disable:!0}}}};var B,T,H,f,I;c.parameters={...c.parameters,docs:{...(B=c.parameters)==null?void 0:B.docs,source:{originalSource:`{
2
2
  play: async ({
3
3
  canvasElement,
4
4
  step,
@@ -5,4 +5,4 @@ Triggers a callback when the wrapped component intersects with the viewport.
5
5
  This can be useful in several use cases. Examples:
6
6
 
7
7
  - Track an experiment, once a certain component scrolls into view.
8
- - Trigger an animation, or a feature (e.g.: onboarding instructions).`,displayName:"ObserveIntersection",props:{onIntersect:{defaultValue:null,description:"",name:"onIntersect",required:!0,type:{name:"() => void"}},once:{defaultValue:null,description:"",name:"once",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},threshold:{defaultValue:null,description:"",name:"threshold",required:!1,type:{name:"enum",value:[{value:"number"}]}},tag:{defaultValue:null,description:"",name:"tag",required:!1,type:{name:"enum",value:[{value:'"p"'},{value:'"div"'},{value:'"span"'},{value:'"main"'},{value:'"header"'},{value:'"footer"'},{value:'"article"'},{value:'"section"'},{value:'"ul"'},{value:'"ol"'},{value:'"li"'},{value:'"fieldset"'},{value:'"table"'},{value:'"th"'},{value:'"tr"'},{value:'"td"'},{value:'"thead"'},{value:'"tfoot"'},{value:'"tbody"'},{value:'"caption"'},{value:'"figure"'},{value:'"figcaption"'}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}}}}}catch{}export{o as O};
8
+ - Trigger an animation, or a feature (e.g.: onboarding instructions).`,displayName:"ObserveIntersection",props:{onIntersect:{defaultValue:null,description:"",name:"onIntersect",required:!0,type:{name:"() => void"}},once:{defaultValue:null,description:"",name:"once",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},threshold:{defaultValue:null,description:"",name:"threshold",required:!1,type:{name:"enum",value:[{value:"number"}]}},tag:{defaultValue:null,description:"",name:"tag",required:!1,type:{name:"enum",value:[{value:'"p"'},{value:'"div"'},{value:'"span"'},{value:'"td"'},{value:'"li"'},{value:'"th"'},{value:'"tr"'},{value:'"article"'},{value:'"figure"'},{value:'"main"'},{value:'"table"'},{value:'"header"'},{value:'"footer"'},{value:'"section"'},{value:'"ul"'},{value:'"ol"'},{value:'"fieldset"'},{value:'"thead"'},{value:'"tfoot"'},{value:'"tbody"'},{value:'"caption"'},{value:'"figcaption"'}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}}}}}catch{}export{o as O};
@@ -1,4 +1,4 @@
1
- import{j as t}from"./jsx-runtime-BYouaCF_.js";import{r as a}from"./index-B3evPFBL.js";import{O as i}from"./ObserveIntersection-CvDmrhxS.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./index-DdzHuZ-Y.js";import"./defaults-B1rzzf6M.js";import"./componentNames-CVVyamkx.js";const h={title:"components/ObserveIntersection",component:i,parameters:{tags:["!test"],chromatic:{disableSnapshot:!0}}},e=()=>{const[o,c]=a.useState(!1);return t.jsxs("div",{tabIndex:0,style:{height:"200px",overflowY:"scroll",position:"relative"},children:[t.jsx("div",{style:{position:"sticky",top:"2px"},children:o?"Intersected":"Scroll down to intersect"}),t.jsx("div",{style:{height:"400px",display:"flex",alignItems:"end"},children:t.jsx(i,{onIntersect:()=>c(!0),children:"Observer"})})]})};e.storyName="ObserveIntersection";var s,n,r;e.parameters={...e.parameters,docs:{...(s=e.parameters)==null?void 0:s.docs,source:{originalSource:`() => {
1
+ import{j as t}from"./jsx-runtime-BYouaCF_.js";import{r as a}from"./index-B3evPFBL.js";import{O as i}from"./ObserveIntersection-QIlV9twe.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./index-DdzHuZ-Y.js";import"./defaults-B1rzzf6M.js";import"./componentNames-CVVyamkx.js";const h={title:"components/ObserveIntersection",component:i,parameters:{tags:["!test"],chromatic:{disableSnapshot:!0}}},e=()=>{const[o,c]=a.useState(!1);return t.jsxs("div",{tabIndex:0,style:{height:"200px",overflowY:"scroll",position:"relative"},children:[t.jsx("div",{style:{position:"sticky",top:"2px"},children:o?"Intersected":"Scroll down to intersect"}),t.jsx("div",{style:{height:"400px",display:"flex",alignItems:"end"},children:t.jsx(i,{onIntersect:()=>c(!0),children:"Observer"})})]})};e.storyName="ObserveIntersection";var s,n,r;e.parameters={...e.parameters,docs:{...(s=e.parameters)==null?void 0:s.docs,source:{originalSource:`() => {
2
2
  const [isIntersecting, setIsIntersecting] = useState(false);
3
3
  return (
4
4
  // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- This element is interactive; it's scrollable.
@@ -1,4 +1,4 @@
1
- import{j as t}from"./jsx-runtime-BYouaCF_.js";import{r as n}from"./index-B3evPFBL.js";import{R as _,A as q,P as x,C as O,a as N,b as E}from"./index-jPlWeKki.js";import{F as k}from"./TokyoUIClose-DFIfVIfy.js";import{I as P}from"./Icon-D4cMo1we.js";import{T as j}from"./Text-C3jprdij.js";import{B as D}from"./Button-BumqXQgN.js";import{H as T}from"./Heading-D79pA8cG.js";import{u as S}from"./index-BfBdt3zW.js";import{g as L}from"./shared-strings-CcWGHelY.js";import{g as M}from"./PortalElementProvider-D4ltrA8j.js";import{g as H}from"./index-DdzHuZ-Y.js";import{w as X}from"./componentNames-CVVyamkx.js";import{M as J}from"./message-BraTJ16C.js";const B="content__KHgp9",F="header__CaLti",U="close__3s-VD",A="footer__X5qXF",G="arrow__0pg-s",o={content:B,header:F,close:U,footer:A,arrow:G},z=e=>{e.scrollIntoViewIfNeeded?e.scrollIntoViewIfNeeded(!1):e.scrollIntoView({behavior:"auto",block:"nearest",inline:"nearest"})},m=({open:e,onOpenChange:i,disabled:r,title:u,text:s,children:a,side:l,dataset:h,actionLabel:g=t.jsx(J,{id:"preply-ds.onboardingTooltip.actionLabel",defaultMessage:"Got it",description:"Default onboarding tooltip action label. Used to acknowledge and close the tooltip."}),actionOnClick:b,actionHref:y,counter:C,autoScroll:v=!0})=>{const{formatMessage:I}=S(),w=M(),f=n.useId(),V=n.useId(),d=n.useId(),c=n.useRef(null);return n.useEffect(()=>{e&&c.current&&v&&z(c.current)},[v,e]),r?a:t.jsxs(_,{open:e,onOpenChange:i,children:[t.jsx(q,{ref:c,id:d,asChild:!0,children:a}),t.jsx(x,{container:w,children:t.jsxs(O,{onInteractOutside:R=>{R.preventDefault()},side:l,className:o.content,"aria-labelledby":f,"aria-describedby":`${d} ${V}`,...H(h,{preplyDsComponent:X.OnboardingTooltip}),children:[t.jsxs("div",{className:o.header,children:[t.jsx(N,{className:o.close,"aria-label":I(L.close),"data-testid":"close",children:t.jsx(P,{accent:"inverted",svg:k})}),t.jsx(T,{tag:"h1",variant:"small",accent:"inverted",id:f,"aria-describedby":d,children:u})]}),t.jsx(j,{variant:"default-regular",accent:"inverted",children:s}),t.jsxs("div",{className:o.footer,children:[C,t.jsx(D,{variant:"inverted",size:"small",onClick:b,href:y,dataset:{testid:"action"},wrap:!0,children:g})]}),t.jsx(E,{"aria-hidden":!0,className:o.arrow,width:18,height:11})]})})]})},p=e=>{const[i,r]=n.useState(!0),u=a=>{var l;a||(l=e.onClose)==null||l.call(e),r(a)},s=()=>{var a,l;(a=e.actionOnClick)==null||a.call(e),r(!1),(l=e.onClose)==null||l.call(e)};return t.jsx(m,{...e,open:i,onOpenChange:u,actionOnClick:s})};try{m.displayName="InternalOnboardingTooltip",m.__docgenInfo={description:"",displayName:"InternalOnboardingTooltip",props:{title:{defaultValue:null,description:"",name:"title",required:!0,type:{name:"enum",value:[{value:"undefined"},{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},text:{defaultValue:null,description:"",name:"text",required:!0,type:{name:"enum",value:[{value:"undefined"},{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},disabled:{defaultValue:null,description:"Disables tooltip completely",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},onClose:{defaultValue:null,description:"Called when the tooltip is closed",name:"onClose",required:!1,type:{name:"enum",value:[{value:"() => void"}]}},actionLabel:{defaultValue:{value:`(
1
+ import{j as t}from"./jsx-runtime-BYouaCF_.js";import{r as n}from"./index-B3evPFBL.js";import{R as _,A as q,P as x,C as O,a as N,b as E}from"./index-jPlWeKki.js";import{F as k}from"./TokyoUIClose-DFIfVIfy.js";import{I as P}from"./Icon-DLiSwEfT.js";import{T as j}from"./Text-CH4wZQv6.js";import{B as D}from"./Button-CcY3QSgD.js";import{H as T}from"./Heading-sy1TMpjs.js";import{u as S}from"./index-BfBdt3zW.js";import{g as L}from"./shared-strings-CcWGHelY.js";import{g as M}from"./PortalElementProvider-D4ltrA8j.js";import{g as H}from"./index-DdzHuZ-Y.js";import{w as X}from"./componentNames-CVVyamkx.js";import{M as J}from"./message-BraTJ16C.js";const B="content__KHgp9",F="header__CaLti",U="close__3s-VD",A="footer__X5qXF",G="arrow__0pg-s",o={content:B,header:F,close:U,footer:A,arrow:G},z=e=>{e.scrollIntoViewIfNeeded?e.scrollIntoViewIfNeeded(!1):e.scrollIntoView({behavior:"auto",block:"nearest",inline:"nearest"})},m=({open:e,onOpenChange:i,disabled:r,title:u,text:s,children:a,side:l,dataset:h,actionLabel:g=t.jsx(J,{id:"preply-ds.onboardingTooltip.actionLabel",defaultMessage:"Got it",description:"Default onboarding tooltip action label. Used to acknowledge and close the tooltip."}),actionOnClick:b,actionHref:y,counter:C,autoScroll:v=!0})=>{const{formatMessage:I}=S(),w=M(),f=n.useId(),V=n.useId(),d=n.useId(),c=n.useRef(null);return n.useEffect(()=>{e&&c.current&&v&&z(c.current)},[v,e]),r?a:t.jsxs(_,{open:e,onOpenChange:i,children:[t.jsx(q,{ref:c,id:d,asChild:!0,children:a}),t.jsx(x,{container:w,children:t.jsxs(O,{onInteractOutside:R=>{R.preventDefault()},side:l,className:o.content,"aria-labelledby":f,"aria-describedby":`${d} ${V}`,...H(h,{preplyDsComponent:X.OnboardingTooltip}),children:[t.jsxs("div",{className:o.header,children:[t.jsx(N,{className:o.close,"aria-label":I(L.close),"data-testid":"close",children:t.jsx(P,{accent:"inverted",svg:k})}),t.jsx(T,{tag:"h1",variant:"small",accent:"inverted",id:f,"aria-describedby":d,children:u})]}),t.jsx(j,{variant:"default-regular",accent:"inverted",children:s}),t.jsxs("div",{className:o.footer,children:[C,t.jsx(D,{variant:"inverted",size:"small",onClick:b,href:y,dataset:{testid:"action"},wrap:!0,children:g})]}),t.jsx(E,{"aria-hidden":!0,className:o.arrow,width:18,height:11})]})})]})},p=e=>{const[i,r]=n.useState(!0),u=a=>{var l;a||(l=e.onClose)==null||l.call(e),r(a)},s=()=>{var a,l;(a=e.actionOnClick)==null||a.call(e),r(!1),(l=e.onClose)==null||l.call(e)};return t.jsx(m,{...e,open:i,onOpenChange:u,actionOnClick:s})};try{m.displayName="InternalOnboardingTooltip",m.__docgenInfo={description:"",displayName:"InternalOnboardingTooltip",props:{title:{defaultValue:null,description:"",name:"title",required:!0,type:{name:"enum",value:[{value:"undefined"},{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},text:{defaultValue:null,description:"",name:"text",required:!0,type:{name:"enum",value:[{value:"undefined"},{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},disabled:{defaultValue:null,description:"Disables tooltip completely",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},onClose:{defaultValue:null,description:"Called when the tooltip is closed",name:"onClose",required:!1,type:{name:"enum",value:[{value:"() => void"}]}},actionLabel:{defaultValue:{value:`(
2
2
  <FormattedMessage
3
3
  id="preply-ds.onboardingTooltip.actionLabel"
4
4
  defaultMessage="Got it"
@@ -1,4 +1,4 @@
1
- import{j as e}from"./jsx-runtime-BYouaCF_.js";import{O as u}from"./OnboardingTooltip-Lspn1J1n.js";import{I as g}from"./IconButton-DNz6Hldb.js";import{F as x}from"./TokyoUIFav-DGbkVriC.js";import"./index-B3evPFBL.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./index-jPlWeKki.js";import"./PortalElementProvider-D4ltrA8j.js";import"./index-DRKYGVyc.js";import"./index-jEDObK_5.js";import"./index-C66nt8TK.js";import"./Combination-CCYtWL8C.js";import"./tslib.es6-BntfKcQG.js";import"./index-DbgDZDus.js";import"./TokyoUIClose-DFIfVIfy.js";import"./Icon-D4cMo1we.js";import"./text-accent-DZDDtpIt.js";import"./classNames-BUL1Zq7e.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-CVTdrNe-.js";import"./componentNames-CVVyamkx.js";import"./index-DdzHuZ-Y.js";import"./defaults-B1rzzf6M.js";import"./Text-C3jprdij.js";import"./text-centered-CznToR0o.js";import"./Button-BumqXQgN.js";import"./ButtonBase-OAaaGRgi.js";import"./Spinner-BCTJunNM.js";import"./useMergeRefs-CeyIhNgY.js";import"./useHostname-CH18gHFj.js";import"./index-CC6DAVyL.js";import"./Heading-D79pA8cG.js";import"./index-BfBdt3zW.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./shared-strings-CcWGHelY.js";import"./message-BraTJ16C.js";const te={title:"Components/OnboardingTooltip",component:u,parameters:{docs:{story:{inline:!1,height:250},description:{component:"Are you looking for a step-by-step tour? Check out [OnboardingTour](/docs/components-onboardingtour--docs)"}},a11y:{config:{rules:[{id:"color-contrast",enabled:!1}]}}},decorators:[t=>e.jsx("div",{style:{margin:"auto",width:"max-content"},children:t()})]},f=t=>[!1,!1],h=t=>a=>{},o=()=>{const[t,a]=f(),v=h();return e.jsx(u,{title:"New Feature Available!",text:"We've added an exciting new feature to enhance your experience.",disabled:a||t,onClose:()=>v(!0),children:e.jsx(g,{variant:"ghost",svg:e.jsx(x,{}),assistiveText:"Favorite"})})};o.storyName="OnboardingTooltip";const r={tags:["!autodocs"],args:{title:"New Feature Available!",text:"We've added an exciting new feature to enhance your experience.",disabled:!1,onClose:()=>{},children:e.jsx(g,{variant:"ghost",svg:e.jsx(x,{}),assistiveText:"Favorite"})},argTypes:{title:{control:"text"},text:{control:"text"},actionLabel:{control:"text"},actionOnClick:{control:!1},actionHref:{control:"text"},disabled:{control:"boolean"},dataset:{control:"object"},onClose:{control:!1},children:{control:!1}},parameters:{docs:{story:{height:450}},chromatic:{disableSnapshot:!0}},decorators:[t=>e.jsx("div",{style:{minHeight:"100vh",display:"flex"},children:e.jsx("div",{style:{margin:"auto",width:"max-content"},children:t()})})]};var i,n,s,l,c;o.parameters={...o.parameters,docs:{...(i=o.parameters)==null?void 0:i.docs,source:{originalSource:`() => {
1
+ import{j as e}from"./jsx-runtime-BYouaCF_.js";import{O as u}from"./OnboardingTooltip-Drdxs-mL.js";import{I as g}from"./IconButton-BnLs_P5O.js";import{F as x}from"./TokyoUIFav-DGbkVriC.js";import"./index-B3evPFBL.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./index-jPlWeKki.js";import"./PortalElementProvider-D4ltrA8j.js";import"./index-DRKYGVyc.js";import"./index-jEDObK_5.js";import"./index-C66nt8TK.js";import"./Combination-CCYtWL8C.js";import"./tslib.es6-BntfKcQG.js";import"./index-DbgDZDus.js";import"./TokyoUIClose-DFIfVIfy.js";import"./Icon-DLiSwEfT.js";import"./text-accent-DZDDtpIt.js";import"./classNames-BUL1Zq7e.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-CVTdrNe-.js";import"./componentNames-CVVyamkx.js";import"./index-DdzHuZ-Y.js";import"./defaults-B1rzzf6M.js";import"./Text-CH4wZQv6.js";import"./text-centered-CznToR0o.js";import"./Button-CcY3QSgD.js";import"./ButtonBase-CiON5Gq9.js";import"./Spinner-BCTJunNM.js";import"./useMergeRefs-CeyIhNgY.js";import"./useHostname-CH18gHFj.js";import"./index-CC6DAVyL.js";import"./Heading-sy1TMpjs.js";import"./index-BfBdt3zW.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./shared-strings-CcWGHelY.js";import"./message-BraTJ16C.js";const te={title:"Components/OnboardingTooltip",component:u,parameters:{docs:{story:{inline:!1,height:250},description:{component:"Are you looking for a step-by-step tour? Check out [OnboardingTour](/docs/components-onboardingtour--docs)"}},a11y:{config:{rules:[{id:"color-contrast",enabled:!1}]}}},decorators:[t=>e.jsx("div",{style:{margin:"auto",width:"max-content"},children:t()})]},f=t=>[!1,!1],h=t=>a=>{},o=()=>{const[t,a]=f(),v=h();return e.jsx(u,{title:"New Feature Available!",text:"We've added an exciting new feature to enhance your experience.",disabled:a||t,onClose:()=>v(!0),children:e.jsx(g,{variant:"ghost",svg:e.jsx(x,{}),assistiveText:"Favorite"})})};o.storyName="OnboardingTooltip";const r={tags:["!autodocs"],args:{title:"New Feature Available!",text:"We've added an exciting new feature to enhance your experience.",disabled:!1,onClose:()=>{},children:e.jsx(g,{variant:"ghost",svg:e.jsx(x,{}),assistiveText:"Favorite"})},argTypes:{title:{control:"text"},text:{control:"text"},actionLabel:{control:"text"},actionOnClick:{control:!1},actionHref:{control:"text"},disabled:{control:"boolean"},dataset:{control:"object"},onClose:{control:!1},children:{control:!1}},parameters:{docs:{story:{height:450}},chromatic:{disableSnapshot:!0}},decorators:[t=>e.jsx("div",{style:{minHeight:"100vh",display:"flex"},children:e.jsx("div",{style:{margin:"auto",width:"max-content"},children:t()})})]};var i,n,s,l,c;o.parameters={...o.parameters,docs:{...(i=o.parameters)==null?void 0:i.docs,source:{originalSource:`() => {
2
2
  const [wasTooltipSeen, loading] = useIsFeatureActive('new-feature');
3
3
  const setTooltipSeen = useToggleFeature('new-feature');
4
4
  return <OnboardingTooltip title="New Feature Available!" text="We've added an exciting new feature to enhance your experience." disabled={loading || wasTooltipSeen} onClose={() => setTooltipSeen(true)}>
@@ -1,4 +1,4 @@
1
- import{j as a}from"./jsx-runtime-BYouaCF_.js";import{O as x}from"./OnboardingTooltip-Lspn1J1n.js";import{I}from"./IconButton-DNz6Hldb.js";import{F as f}from"./TokyoUIFav-DGbkVriC.js";import{w as s,a as r,e as n,u as d}from"./index-DDyIDR-R.js";import{B as k}from"./Button-BumqXQgN.js";import{L as F}from"./LayoutFlex-oRwI31fW.js";import"./index-B3evPFBL.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./index-jPlWeKki.js";import"./PortalElementProvider-D4ltrA8j.js";import"./index-DRKYGVyc.js";import"./index-jEDObK_5.js";import"./index-C66nt8TK.js";import"./Combination-CCYtWL8C.js";import"./tslib.es6-BntfKcQG.js";import"./index-DbgDZDus.js";import"./TokyoUIClose-DFIfVIfy.js";import"./Icon-D4cMo1we.js";import"./text-accent-DZDDtpIt.js";import"./classNames-BUL1Zq7e.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-CVTdrNe-.js";import"./componentNames-CVVyamkx.js";import"./index-DdzHuZ-Y.js";import"./defaults-B1rzzf6M.js";import"./Text-C3jprdij.js";import"./text-centered-CznToR0o.js";import"./Heading-D79pA8cG.js";import"./index-BfBdt3zW.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./shared-strings-CcWGHelY.js";import"./message-BraTJ16C.js";import"./ButtonBase-OAaaGRgi.js";import"./Spinner-BCTJunNM.js";import"./useMergeRefs-CeyIhNgY.js";import"./useHostname-CH18gHFj.js";import"./index-CC6DAVyL.js";import"./layout-relative.module-ed9bC4H4.js";const mt={title:"Components/OnboardingTooltip/Tests",component:x,parameters:{layout:"centered",controls:{disable:!0},chromatic:{disableSnapshot:!0}},tags:["!autodocs","!a11y-test","test"],decorators:[e=>a.jsx("div",{style:{margin:"100px 0"},children:e()})],args:{title:"Title",text:"Body text",actionLabel:"Action label",disabled:!1,onClose:()=>{},dataset:{testid:"tooltip"},children:a.jsx(I,{svg:a.jsx(f,{}),assistiveText:"Favorite"})}},c={play:async({canvasElement:e,step:o})=>{const i=s(e);await o("wait for tooltip to be visible",async()=>{await r(()=>{const t=i.getByTestId("tooltip");return n(t).toBeVisible()})}),await o("close the tooltip",()=>{const u=s(i.getByTestId("tooltip")).getByTestId("close");return d.click(u)}),await o("wait for tooltip to be hidden",async()=>{await r(()=>{const t=i.queryByTestId("tooltip");return n(t).toBeNull()})})}},l={play:async({canvasElement:e,step:o})=>{const i=s(e);await o("wait for tooltip to be visible",async()=>{await r(()=>{const t=i.getByTestId("tooltip");return n(t).toBeVisible()})}),await o("close the tooltip",()=>{const u=s(i.getByTestId("tooltip")).getByTestId("action");return d.click(u)}),await o("wait for tooltip to be hidden",async()=>{await r(()=>{const t=i.queryByTestId("tooltip");return n(t).toBeNull()})})}};function E(e){return new Promise(o=>setTimeout(o,e))}const p={render:e=>a.jsxs(F,{gap:"24",direction:"column",children:[a.jsx(k,{children:"Click outside the tooltip"}),a.jsx(x,{...e,children:a.jsx(I,{svg:a.jsx(f,{}),assistiveText:"Favorite"})})]}),play:async({canvasElement:e,step:o})=>{const i=s(e);await o("wait for tooltip to be visible",async()=>{await r(()=>{const t=i.getByTestId("tooltip");return n(t).toBeVisible()})}),await o("click outside the tooltip",()=>{const t=i.getByText("Click outside the tooltip");return d.click(t)}),await o("check the tooltip remain open",async()=>{await E(1e3);const t=i.getByTestId("tooltip");return n(t).toBeVisible()})}};var m,y,w;c.parameters={...c.parameters,docs:{...(m=c.parameters)==null?void 0:m.docs,source:{originalSource:`{
1
+ import{j as a}from"./jsx-runtime-BYouaCF_.js";import{O as x}from"./OnboardingTooltip-Drdxs-mL.js";import{I}from"./IconButton-BnLs_P5O.js";import{F as f}from"./TokyoUIFav-DGbkVriC.js";import{w as s,a as r,e as n,u as d}from"./index-DDyIDR-R.js";import{B as k}from"./Button-CcY3QSgD.js";import{L as F}from"./LayoutFlex-CDxj6nng.js";import"./index-B3evPFBL.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./index-jPlWeKki.js";import"./PortalElementProvider-D4ltrA8j.js";import"./index-DRKYGVyc.js";import"./index-jEDObK_5.js";import"./index-C66nt8TK.js";import"./Combination-CCYtWL8C.js";import"./tslib.es6-BntfKcQG.js";import"./index-DbgDZDus.js";import"./TokyoUIClose-DFIfVIfy.js";import"./Icon-DLiSwEfT.js";import"./text-accent-DZDDtpIt.js";import"./classNames-BUL1Zq7e.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-CVTdrNe-.js";import"./componentNames-CVVyamkx.js";import"./index-DdzHuZ-Y.js";import"./defaults-B1rzzf6M.js";import"./Text-CH4wZQv6.js";import"./text-centered-CznToR0o.js";import"./Heading-sy1TMpjs.js";import"./index-BfBdt3zW.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./shared-strings-CcWGHelY.js";import"./message-BraTJ16C.js";import"./ButtonBase-CiON5Gq9.js";import"./Spinner-BCTJunNM.js";import"./useMergeRefs-CeyIhNgY.js";import"./useHostname-CH18gHFj.js";import"./index-CC6DAVyL.js";import"./layout-relative.module-ed9bC4H4.js";const mt={title:"Components/OnboardingTooltip/Tests",component:x,parameters:{layout:"centered",controls:{disable:!0},chromatic:{disableSnapshot:!0}},tags:["!autodocs","!a11y-test","test"],decorators:[e=>a.jsx("div",{style:{margin:"100px 0"},children:e()})],args:{title:"Title",text:"Body text",actionLabel:"Action label",disabled:!1,onClose:()=>{},dataset:{testid:"tooltip"},children:a.jsx(I,{svg:a.jsx(f,{}),assistiveText:"Favorite"})}},c={play:async({canvasElement:e,step:o})=>{const i=s(e);await o("wait for tooltip to be visible",async()=>{await r(()=>{const t=i.getByTestId("tooltip");return n(t).toBeVisible()})}),await o("close the tooltip",()=>{const u=s(i.getByTestId("tooltip")).getByTestId("close");return d.click(u)}),await o("wait for tooltip to be hidden",async()=>{await r(()=>{const t=i.queryByTestId("tooltip");return n(t).toBeNull()})})}},l={play:async({canvasElement:e,step:o})=>{const i=s(e);await o("wait for tooltip to be visible",async()=>{await r(()=>{const t=i.getByTestId("tooltip");return n(t).toBeVisible()})}),await o("close the tooltip",()=>{const u=s(i.getByTestId("tooltip")).getByTestId("action");return d.click(u)}),await o("wait for tooltip to be hidden",async()=>{await r(()=>{const t=i.queryByTestId("tooltip");return n(t).toBeNull()})})}};function E(e){return new Promise(o=>setTimeout(o,e))}const p={render:e=>a.jsxs(F,{gap:"24",direction:"column",children:[a.jsx(k,{children:"Click outside the tooltip"}),a.jsx(x,{...e,children:a.jsx(I,{svg:a.jsx(f,{}),assistiveText:"Favorite"})})]}),play:async({canvasElement:e,step:o})=>{const i=s(e);await o("wait for tooltip to be visible",async()=>{await r(()=>{const t=i.getByTestId("tooltip");return n(t).toBeVisible()})}),await o("click outside the tooltip",()=>{const t=i.getByText("Click outside the tooltip");return d.click(t)}),await o("check the tooltip remain open",async()=>{await E(1e3);const t=i.getByTestId("tooltip");return n(t).toBeVisible()})}};var m,y,w;c.parameters={...c.parameters,docs:{...(m=c.parameters)==null?void 0:m.docs,source:{originalSource:`{
2
2
  play: async ({
3
3
  canvasElement,
4
4
  step
@@ -1,4 +1,4 @@
1
- import{j as o}from"./jsx-runtime-BYouaCF_.js";import{r as l}from"./index-B3evPFBL.js";import{I as A}from"./OnboardingTooltip-Lspn1J1n.js";import"./index-BfBdt3zW.js";import{M as f}from"./message-BraTJ16C.js";const T="counter__ArBS-",j={counter:T},v=({totalSteps:n,nextActionLabel:e=o.jsx(f,{id:"preply-ds.onboardingTour.nextActionLabel",defaultMessage:"Next",description:"Onboarding tour next action label"}),completeActionLabel:a=o.jsx(f,{id:"preply-ds.onboardingTour.completeActionLabel",defaultMessage:"Got it",description:"Onboarding tour complete action label"}),onClose:t,onComplete:r,onStepChange:i,disabled:s,children:p,ctx:x})=>{const[b,u]=l.useState(!0),[d,g]=l.useState(0),c={totalSteps:n,nextActionLabel:e,completeActionLabel:a,onClose:()=>{u(!1),t==null||t()},active:!s&&b,currentStep:d,onActionClick:()=>{if(d===n-1)r==null||r(),u(!1);else{const h=d+1;g(h),i==null||i(h)}}};return o.jsx(x.Provider,{value:c,children:p})},_=({ctx:n,...e})=>{const a=l.useContext(n);if(!a)throw new Error("OnboardingTourContext not found");const{currentStep:t,totalSteps:r,onActionClick:i,onClose:s,active:p,nextActionLabel:x,completeActionLabel:b}=a,u=e.step===r-1,d=e.step===t,g=u?b:x,m=()=>{var c;(c=e.actionOnClick)==null||c.call(e),i()},O=c=>{c||s==null||s()};return o.jsx(A,{...e,counter:o.jsx("p",{className:j.counter,children:o.jsx(f,{id:"preply-ds.onboardingTour.counter",defaultMessage:"{currentStep} of {totalSteps}",description:"Onboarding tour step counter, e.g. '1 of 3'",values:{currentStep:t+1,totalSteps:r}})}),open:p&&d,onOpenChange:O,actionLabel:g,actionOnClick:m})},S=()=>{const n=l.createContext(null);return{Provider:t=>o.jsx(v,{...t,ctx:n}),Step:t=>o.jsx(_,{...t,ctx:n})}};try{S.displayName="createOnboardingTour",S.__docgenInfo={description:`Creates a new onboarding tour.
1
+ import{j as o}from"./jsx-runtime-BYouaCF_.js";import{r as l}from"./index-B3evPFBL.js";import{I as A}from"./OnboardingTooltip-Drdxs-mL.js";import"./index-BfBdt3zW.js";import{M as f}from"./message-BraTJ16C.js";const T="counter__ArBS-",j={counter:T},v=({totalSteps:n,nextActionLabel:e=o.jsx(f,{id:"preply-ds.onboardingTour.nextActionLabel",defaultMessage:"Next",description:"Onboarding tour next action label"}),completeActionLabel:a=o.jsx(f,{id:"preply-ds.onboardingTour.completeActionLabel",defaultMessage:"Got it",description:"Onboarding tour complete action label"}),onClose:t,onComplete:r,onStepChange:i,disabled:s,children:p,ctx:x})=>{const[b,u]=l.useState(!0),[d,g]=l.useState(0),c={totalSteps:n,nextActionLabel:e,completeActionLabel:a,onClose:()=>{u(!1),t==null||t()},active:!s&&b,currentStep:d,onActionClick:()=>{if(d===n-1)r==null||r(),u(!1);else{const h=d+1;g(h),i==null||i(h)}}};return o.jsx(x.Provider,{value:c,children:p})},_=({ctx:n,...e})=>{const a=l.useContext(n);if(!a)throw new Error("OnboardingTourContext not found");const{currentStep:t,totalSteps:r,onActionClick:i,onClose:s,active:p,nextActionLabel:x,completeActionLabel:b}=a,u=e.step===r-1,d=e.step===t,g=u?b:x,m=()=>{var c;(c=e.actionOnClick)==null||c.call(e),i()},O=c=>{c||s==null||s()};return o.jsx(A,{...e,counter:o.jsx("p",{className:j.counter,children:o.jsx(f,{id:"preply-ds.onboardingTour.counter",defaultMessage:"{currentStep} of {totalSteps}",description:"Onboarding tour step counter, e.g. '1 of 3'",values:{currentStep:t+1,totalSteps:r}})}),open:p&&d,onOpenChange:O,actionLabel:g,actionOnClick:m})},S=()=>{const n=l.createContext(null);return{Provider:t=>o.jsx(v,{...t,ctx:n}),Step:t=>o.jsx(_,{...t,ctx:n})}};try{S.displayName="createOnboardingTour",S.__docgenInfo={description:`Creates a new onboarding tour.
2
2
 
3
3
  This factory pattern allows multiple independent tours to be nested within each other
4
4
  without context conflicts, as each tour maintains its own separate context and state.`,displayName:"createOnboardingTour",props:{}}}catch{}export{S as c};