@preply/ds-docs 3.3.0 → 3.4.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 (146) hide show
  1. package/dist/assets/{00.LayoutFlex.stories-Dx9Eo2na.js → 00.LayoutFlex.stories-L63JniCW.js} +1 -1
  2. package/dist/assets/{00.applications-C297XXPY.js → 00.applications-CZNgCxBr.js} +1 -7
  3. package/dist/assets/{00.favicons.guide-DJflK4sx.js → 00.favicons.guide-C8wcurqA.js} +1 -1
  4. package/dist/assets/{00.token-explorer-DJdsSpH_.js → 00.token-explorer-BTCw9K7w.js} +1 -1
  5. package/dist/assets/{00.using-responsive-props-W1dUWP0Y.js → 00.using-responsive-props-CpeF4wyg.js} +1 -1
  6. package/dist/assets/{01.semantic-tokens-iL1Przw4.js → 01.semantic-tokens-zxbjTqot.js} +1 -1
  7. package/dist/assets/{01.using-shorthand-props-DYxq9j_1.js → 01.using-shorthand-props-DL8DGU_h.js} +1 -1
  8. package/dist/assets/{10.Combinations.stories-Wf-NooK0.js → 10.Combinations.stories-1_8u8WW3.js} +1 -1
  9. package/dist/assets/{10.fonts.guide-Cz4mUVD-.js → 10.fonts.guide-ozrfPbrb.js} +1 -1
  10. package/dist/assets/{10.ssr-BwpeFyNi.js → 10.ssr-DuJ7V1zU.js} +1 -1
  11. package/dist/assets/{11.languageFont.explorer-Cc25I4OM.js → 11.languageFont.explorer-D4g8INUF.js} +2 -2
  12. package/dist/assets/{11.ssr.app-router-pRaG6qlh.js → 11.ssr.app-router-LkbMDkui.js} +1 -1
  13. package/dist/assets/{20.libraries-CGCMZkNU.js → 20.libraries-OxbX53Rm.js} +1 -1
  14. package/dist/assets/{30.icons.explorer-1Xkf4Rac.js → 30.icons.explorer-CxFu80o-.js} +1 -1
  15. package/dist/assets/{30.storybook-Bf8JSsGk.js → 30.storybook-D4IX1PTk.js} +1 -1
  16. package/dist/assets/{40.illustrations.explorer-By_y-dtW.js → 40.illustrations.explorer-CCmi1XRF.js} +1 -1
  17. package/dist/assets/{90.advanced-BUo8MEAq.js → 90.advanced-BsWTpQOC.js} +1 -1
  18. package/dist/assets/{Accordion-CLtz0akf.js → Accordion-BMkC4Xny.js} +1 -1
  19. package/dist/assets/{Accordion.stories-D1j417bR.js → Accordion.stories-CDdxqEYy.js} +1 -1
  20. package/dist/assets/{Accordion.tests.stories-CnXHiQE9.js → Accordion.tests.stories-mB00BMOi.js} +1 -1
  21. package/dist/assets/{AlertDialog.stories-BpF0lVZj.js → AlertDialog.stories-HjngO85F.js} +1 -1
  22. package/dist/assets/{Avatar-BkCAqOuF.js → Avatar-B2H0W8KL.js} +1 -1
  23. package/dist/assets/{Avatar-D6BKQVaH.js → Avatar-BoLH36O5.js} +1 -1
  24. package/dist/assets/{Avatar.stories-DnjfAeSV.js → Avatar.stories-QILX30d4.js} +1 -1
  25. package/dist/assets/{AvatarWithStatus.stories-CocgTI5A.js → AvatarWithStatus.stories-B86Dnj1_.js} +1 -1
  26. package/dist/assets/{Badge.stories-DIY0Ixcn.js → Badge.stories-DCRd8y_l.js} +1 -1
  27. package/dist/assets/{Box.stories-DLKiCQiI.js → Box.stories-CIp48tBY.js} +1 -1
  28. package/dist/assets/{Button-E96Q43QI.js → Button-Bo0EuTg4.js} +1 -1
  29. package/dist/assets/{Button-DhJ1EYrN.js → Button-ByGPH5mV.js} +1 -1
  30. package/dist/assets/{Button-C6MQP0Gg.css → Button-I17a9S9F.css} +1 -1
  31. package/dist/assets/{Button.stories-BnanW8CP.js → Button.stories-CZi-nQnw.js} +1 -1
  32. package/dist/assets/{ButtonBase-BCuY1rd4.css → ButtonBase-CRzVXF1q.css} +1 -1
  33. package/dist/assets/{Checkbox-BPmUXxx7.js → Checkbox-BJCC-N-r.js} +2 -2
  34. package/dist/assets/{Checkbox.stories-CmjU0iIo.js → Checkbox.stories-C08mQFV2.js} +1 -1
  35. package/dist/assets/{Checkbox.tests.stories-RUf_e9Iq.js → Checkbox.tests.stories-D_kpL3wq.js} +1 -1
  36. package/dist/assets/{Chips.stories-BF_eoQzy.js → Chips.stories-FqjAsoAI.js} +1 -1
  37. package/dist/assets/{Color-YHDXOIA2-DIcOHvDM.js → Color-YHDXOIA2-B18N3AaJ.js} +1 -1
  38. package/dist/assets/{CountryFlag--G6mQ0wX.js → CountryFlag-CAFTp6o8.js} +5 -5
  39. package/dist/assets/Dialog-C41Mvr8T.css +1 -0
  40. package/dist/assets/{Dialog.stories-BPe1wKjQ.js → Dialog.stories-CksnrXI6.js} +53 -31
  41. package/dist/assets/{DocsRenderer-CFRXHY34-D8Enzmed.js → DocsRenderer-CFRXHY34-CjREP_h0.js} +1 -1
  42. package/dist/assets/{FieldButton-xxvyfVcj.js → FieldButton-Bsa9_rJB.js} +1 -1
  43. package/dist/assets/{FieldButton.stories-1kY40W8X.js → FieldButton.stories-DN08cc4N.js} +1 -1
  44. package/dist/assets/{Flag.stories-BcePwnUL.js → Flag.stories-B36Er6pv.js} +1 -1
  45. package/dist/assets/{Flag.test.stories-hYgxXstG.js → Flag.test.stories-OdiZtONW.js} +1 -1
  46. package/dist/assets/{FormControl-DWCH9Hh-.js → FormControl-CeIJk4_Z.js} +1 -1
  47. package/dist/assets/{FormControl.stories-5bbiEJoQ.js → FormControl.stories-DekxQG9a.js} +1 -1
  48. package/dist/assets/{Heading-sy1TMpjs.js → Heading-kRKueEJE.js} +1 -1
  49. package/dist/assets/{Heading.stories-mFaQtYkx.js → Heading.stories-C_OIIyB_.js} +1 -1
  50. package/dist/assets/{Icon-zcBK8bUG.js → Icon-Dlm-jGvW.js} +1 -1
  51. package/dist/assets/{Icon-RSC-BFKQkcfJ.js → Icon-RSC-DPP_Mp56.js} +1 -1
  52. package/dist/assets/{Icon-C3PbN7-O.js → Icon-ZIxauYsE.js} +1 -1
  53. package/dist/assets/{Icon.stories-Dalhjiqr.js → Icon.stories-Cv6aq9BI.js} +1 -1
  54. package/dist/assets/{IconButton-Do29z7Px.js → IconButton-D2EvZJff.js} +1 -1
  55. package/dist/assets/{Input-CvLmSHHA.js → Input-CfUiWyvo.js} +1 -1
  56. package/dist/assets/IntegrationWithReactHookForm.stories-DsRQlqVO.js +274 -0
  57. package/dist/assets/{LayoutFlex-oRwI31fW.js → LayoutFlex-BK2I--nP.js} +1 -1
  58. package/dist/assets/{LayoutFlex-DsiZkqdg.js → LayoutFlex-Bhu4q65J.js} +1 -1
  59. package/dist/assets/{LayoutFlexItem-RxfNp994.js → LayoutFlexItem-DeLvTHsT.js} +1 -1
  60. package/dist/assets/{LayoutGrid-6cTmb1jX.js → LayoutGrid-DwWkjrQU.js} +1 -1
  61. package/dist/assets/{LayoutGrid.stories-BdiYCGMy.js → LayoutGrid.stories-DHo-MCEe.js} +1 -1
  62. package/dist/assets/{LayoutGridItem-COV2Exf8.js → LayoutGridItem-BHeOt4_j.js} +1 -1
  63. package/dist/assets/{LayoutGridItem-CVWVBh65.js → LayoutGridItem-CmZxAA0w.js} +1 -1
  64. package/dist/assets/{Link.stories-BetBkVdX.js → Link.stories-OhrveYjE.js} +2 -2
  65. package/dist/assets/{Loader.stories-CHC_EpHP.js → Loader.stories-DWRd5a4n.js} +1 -1
  66. package/dist/assets/{NumberField-BpMDjGwN.js → NumberField-DJpVBd26.js} +5 -5
  67. package/dist/assets/{NumberField.stories-Dha3o6_E.js → NumberField.stories-wRiy_2B7.js} +1 -1
  68. package/dist/assets/{ObserveIntersection-CvDmrhxS.js → ObserveIntersection-DIzoqV0M.js} +1 -1
  69. package/dist/assets/{ObserveIntersection.stories-CJbpJ7AX.js → ObserveIntersection.stories-9LGsv3hq.js} +1 -1
  70. package/dist/assets/{OnboardingTooltip-D3Wls75j.js → OnboardingTooltip-CEvIpDDq.js} +1 -1
  71. package/dist/assets/{OnboardingTooltip.stories-Ci0fTkuP.js → OnboardingTooltip.stories-DgJn7s-p.js} +1 -1
  72. package/dist/assets/{OnboardingTooltip.tests.stories-DOX79bVb.js → OnboardingTooltip.tests.stories-B7CnkQ4h.js} +1 -1
  73. package/dist/assets/{OnboardingTour-BVA630b8.js → OnboardingTour-QILw0ytx.js} +1 -1
  74. package/dist/assets/{OnboardingTour.stories-CqPG7ano.js → OnboardingTour.stories-4OcWs7Qa.js} +2 -2
  75. package/dist/assets/{OnboardingTour.tests.stories-MkjEFcwA.js → OnboardingTour.tests.stories-CGE13ZSS.js} +1 -1
  76. package/dist/assets/{PasswordField-DoLJA84z.js → PasswordField-BKpD4wgB.js} +5 -5
  77. package/dist/assets/{PasswordField.stories-Cnn8lE0T.js → PasswordField.stories-DyAbV-Cp.js} +1 -1
  78. package/dist/assets/{PreplyLogo.stories-wSNUofCX.js → PreplyLogo.stories-DHxwd_E-.js} +2 -2
  79. package/dist/assets/ProgressBar-DAySNGLS.css +1 -0
  80. package/dist/assets/{ProgressBar.stories-Bvjoapax.js → ProgressBar.stories-C6DbVF9f.js} +1 -1
  81. package/dist/assets/{ProgressSteps-CuGX9_Fy.js → ProgressSteps-BBrWCYks.js} +1 -1
  82. package/dist/assets/ProgressSteps-Dt4bAO1t.css +1 -0
  83. package/dist/assets/{ProgressSteps.stories-Cl8xvJ_7.js → ProgressSteps.stories-D-MqaEU5.js} +1 -1
  84. package/dist/assets/RangeSlider-dSZs_gtw.js +4 -0
  85. package/dist/assets/RangeSlider.stories-DVb8mcs1.js +117 -0
  86. package/dist/assets/RootProvider-DLsVkcFn.js +1 -0
  87. package/dist/assets/{SelectField-CKaBRG5w.js → SelectField-Txzefw7x.js} +5 -5
  88. package/dist/assets/{SelectField.stories-CaObCirJ.js → SelectField.stories-hwymT4A1.js} +1 -1
  89. package/dist/assets/{ShowOnIntersection.stories-B24bNVFn.js → ShowOnIntersection.stories-CQ4u9OFv.js} +1 -1
  90. package/dist/assets/Slider-6E9fmd7P.js +2 -0
  91. package/dist/assets/Slider-B_IRLClB.css +1 -0
  92. package/dist/assets/Slider.stories-B5LCqqgS.js +69 -0
  93. package/dist/assets/{Steps-D9_n9bWW.js → Steps-CSR6mb1x.js} +1 -1
  94. package/dist/assets/{Steps.stories-RC7ynieo.js → Steps.stories-BBj-1qLb.js} +1 -1
  95. package/dist/assets/{Text-CH4wZQv6.js → Text-BmdJVr9v.js} +1 -1
  96. package/dist/assets/{Text.stories-BCJduwcD.js → Text.stories-CkC6dvyE.js} +1 -1
  97. package/dist/assets/{TextField-2efgAYCl.js → TextField-C8z2d_Sb.js} +5 -5
  98. package/dist/assets/{TextField-DEExf7nd.js → TextField-Co0wSa5c.js} +1 -1
  99. package/dist/assets/{TextField.stories-Jc3Ncrn0.js → TextField.stories-D5qydpY4.js} +1 -1
  100. package/dist/assets/{TextHighlighted-B7-aMGmA.js → TextHighlighted-B6rrwk3x.js} +1 -1
  101. package/dist/assets/{TextHighlighted.stories-DOQ3Cny3.js → TextHighlighted.stories-BJsM40kL.js} +1 -1
  102. package/dist/assets/{TextInline.stories-Db7MLcaa.js → TextInline.stories-CL1L2t2-.js} +1 -1
  103. package/dist/assets/{TextareaField-CEZIEZge.js → TextareaField-ADPg-loW.js} +5 -5
  104. package/dist/assets/{TextareaField.stories-DaSeqBaw.js → TextareaField.stories-B2FTFC82.js} +1 -1
  105. package/dist/assets/{Toast.stories-QJP8u4iK.js → Toast.stories-BzEpckjh.js} +1 -1
  106. package/dist/assets/{Tooltip-hS-9HVfR.js → Tooltip-IxKOQjjo.js} +1 -1
  107. package/dist/assets/{Tooltip.stories-C4MszWBD.js → Tooltip.stories-v2Tx_wX7.js} +1 -1
  108. package/dist/assets/{Tooltip.tests.stories-d_Ae61Qa.js → Tooltip.tests.stories-B83vosot.js} +1 -1
  109. package/dist/assets/{breakpoints-CEbl-uDL.js → breakpoints-BNiagSE_.js} +1 -1
  110. package/dist/assets/{breakpoints-Co43frxT.js → breakpoints-CLD12Wfq.js} +1 -1
  111. package/dist/assets/{breakpoints-CtfwPy5b.js → breakpoints-DCs4guiN.js} +1 -1
  112. package/dist/assets/{changelog-LaQoIV1j.js → changelog-oRixcAwg.js} +220 -208
  113. package/dist/assets/{componentNames-CVVyamkx.js → componentNames-CpCJzpB9.js} +1 -1
  114. package/dist/assets/{entry-preview-B99RiMJz.js → entry-preview-CHVQj5ba.js} +1 -1
  115. package/dist/assets/{getTokenVar-BJrGSy6F.js → getTokenVar-DTbqJ3zU.js} +1 -1
  116. package/dist/assets/{hover-BjhhHSpj.js → hover-CZ5FiAHG.js} +1 -1
  117. package/dist/assets/{hover-DnJhtAGn.js → hover-CspVUDk-.js} +1 -1
  118. package/dist/assets/{hover-DK6LMcYC.js → hover-Dz_802dC.js} +1 -1
  119. package/dist/assets/{iframe-HKl8oQjn.js → iframe-ZI8HwEVB.js} +2 -2
  120. package/dist/assets/index--DZ0VX4g.js +1 -0
  121. package/dist/assets/{index-D7MP9XPf.js → index-CRsQDyyQ.js} +3 -3
  122. package/dist/assets/{index-CszUBkQW.js → index-vng7oWUW.js} +1 -1
  123. package/dist/assets/{intro-C1UZ22gH.js → intro-Dpljg1S_.js} +1 -1
  124. package/dist/assets/{migrating-from-less-D2AOZ4a1.js → migrating-from-less-3oapsuYW.js} +1 -1
  125. package/dist/assets/{playground-DBdZFxjC.css → playground-DMLi4ken.css} +1 -1
  126. package/dist/assets/{playground.stories-CmncWrfH.js → playground.stories-CUEZbHDL.js} +207 -207
  127. package/dist/assets/{preview-C7L32umn.js → preview-6wzjiHPa.js} +1 -1
  128. package/dist/assets/{preview-CC9A5m3x.js → preview-B_NJAZWU.js} +2 -2
  129. package/dist/assets/{preview-CngMvVBx.js → preview-C4y1hVIk.js} +1 -1
  130. package/dist/assets/{tokens-5O6vHW16.js → tokens-DhquBbEn.js} +1 -1
  131. package/dist/assets/{tokens-R_I2goJs.js → tokens-_XWt9j4-.js} +1 -1
  132. package/dist/assets/{tokens-B2xvm4ua.js → tokens-nXjxe-VS.js} +1 -1
  133. package/dist/assets/{usePortalElement-CGpZ09JG.js → usePortalElement-D4Sq4izv.js} +1 -1
  134. package/dist/assets/{welcome-BsaVun8l.js → welcome-DjWS5LnW.js} +1 -1
  135. package/dist/assets/{zeroheight-ACud9VTO.js → zeroheight-P9Lxc_Zd.js} +1 -1
  136. package/dist/iframe.html +1 -1
  137. package/dist/index.json +1 -1
  138. package/dist/preview-stats.json +1046 -932
  139. package/dist/project.json +1 -1
  140. package/package.json +3 -3
  141. package/dist/assets/Dialog-DzqSHLus.css +0 -1
  142. package/dist/assets/IntegrationWithReactHookForm.stories-DpXAnn_A.js +0 -197
  143. package/dist/assets/ProgressBar-BmNYDQH3.css +0 -1
  144. package/dist/assets/ProgressSteps-DOMtSbxl.css +0 -1
  145. package/dist/assets/RootProvider-BkbI9VLc.js +0 -1
  146. /package/dist/assets/{ButtonBase-CFf1N6e3.js → ButtonBase-B0KE_9xS.js} +0 -0
@@ -1,28 +1,26 @@
1
- import{j as e}from"./jsx-runtime-BYouaCF_.js";import{r as a}from"./index-B3evPFBL.js";import{a as I}from"./chunk-D5ZWXAHU-BhFjjRSl.js";import{f as ke,u as y,a as h,e as p}from"./index-DDyIDR-R.js";import{R as Be,P as Te,O as Ie,C as Pe,T as He,D as Ee,a as Fe}from"./index-wFyje0se.js";import{B as l}from"./Button-DhJ1EYrN.js";import{I as Ae}from"./IconButton-Do29z7Px.js";import{H as Re}from"./Heading-sy1TMpjs.js";import{g as Ve}from"./shared-strings-CcWGHelY.js";import{u as Ne}from"./index-BfBdt3zW.js";import{g as We}from"./PortalElementProvider-D4ltrA8j.js";import{g as Le}from"./index-DdzHuZ-Y.js";import{w as P}from"./componentNames-CVVyamkx.js";import{m as qe,s as Me}from"./classNames-BUL1Zq7e.js";import{S as u}from"./Steps-D9_n9bWW.js";import{I as Ue}from"./Icon-C3PbN7-O.js";import{A as Je}from"./Avatar-BkCAqOuF.js";import{F as Ze}from"./TokyoUIInfo-nHX2jpp7.js";import{L as Ke}from"./LayoutFlex-oRwI31fW.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./v4-CtRu48qb.js";import"./index-DRKYGVyc.js";import"./Combination-CCYtWL8C.js";import"./tslib.es6-BntfKcQG.js";import"./render-icon-CVTdrNe-.js";import"./ButtonBase-CFf1N6e3.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./Spinner-BCTJunNM.js";import"./defaults-B1rzzf6M.js";import"./useMergeRefs-CeyIhNgY.js";import"./useHostname-CH18gHFj.js";import"./index-CC6DAVyL.js";import"./text-accent-DZDDtpIt.js";import"./text-centered-CznToR0o.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./index-jEDObK_5.js";import"./index-C66nt8TK.js";import"./ProgressSteps-CuGX9_Fy.js";import"./message-BraTJ16C.js";import"./constants--ewUoBsO.js";import"./layout-relative.module-ed9bC4H4.js";const Ye=({title:s,titleId:o,...t},n)=>a.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",ref:n,"aria-labelledby":o,...t},s?a.createElement("title",{id:o},s):null,a.createElement("path",{fillRule:"evenodd",d:"M7.207 5.793a1 1 0 0 0-1.414 1.414L10.586 12l-4.793 4.793a1 1 0 1 0 1.414 1.414L12 13.414l4.793 4.793a1 1 0 0 0 1.414-1.414L13.414 12l4.793-4.793a1 1 0 0 0-1.414-1.414L12 10.586 7.207 5.793Z",clipRule:"evenodd"})),Xe=a.forwardRef(Ye),Ge="overlay__NM-kk",Qe="overlayShow__SQuh9",$e="overlayHide__UA0Uh",et="Dialog__GqDxV",tt="mobileContentShow__1akQp",ot="mobileContentHide__GXooF",st="contentShow__RpFHp",nt="contentHide__Y-gr5",at="header__2EPvy",it="description__0f9xh",rt="actions__hIL-J",m={overlay:Ge,overlayShow:Qe,overlayHide:$e,Dialog:et,mobileContentShow:tt,mobileContentHide:ot,"Dialog--size-xs":"Dialog--size-xs__W0yGm","Dialog--narrow-l--size-xs":"Dialog--narrow-l--size-xs__ljCvr","Dialog--medium-s--size-xs":"Dialog--medium-s--size-xs__t-4Ow","Dialog--medium-l--size-xs":"Dialog--medium-l--size-xs__yc1ae","Dialog--wide-s--size-xs":"Dialog--wide-s--size-xs__Id0f5","Dialog--wide-l--size-xs":"Dialog--wide-l--size-xs__Pnlyp","Dialog--size-sm":"Dialog--size-sm__rE3Y-","Dialog--narrow-l--size-sm":"Dialog--narrow-l--size-sm__M8-BH","Dialog--medium-s--size-sm":"Dialog--medium-s--size-sm__UPlli","Dialog--medium-l--size-sm":"Dialog--medium-l--size-sm__nAW8A","Dialog--wide-s--size-sm":"Dialog--wide-s--size-sm__i0pbj","Dialog--wide-l--size-sm":"Dialog--wide-l--size-sm__PghJ-","Dialog--size-md":"Dialog--size-md__HWxI4","Dialog--narrow-l--size-md":"Dialog--narrow-l--size-md__8jZY3","Dialog--medium-s--size-md":"Dialog--medium-s--size-md__dQ1TZ","Dialog--medium-l--size-md":"Dialog--medium-l--size-md__kcNF8","Dialog--wide-s--size-md":"Dialog--wide-s--size-md__KDVax","Dialog--wide-l--size-md":"Dialog--wide-l--size-md__mV57k","Dialog--size-lg":"Dialog--size-lg__Lis4-","Dialog--narrow-l--size-lg":"Dialog--narrow-l--size-lg__h5Tdx","Dialog--medium-s--size-lg":"Dialog--medium-s--size-lg__qci5k","Dialog--medium-l--size-lg":"Dialog--medium-l--size-lg__JCkaM","Dialog--wide-s--size-lg":"Dialog--wide-s--size-lg__eJlxf","Dialog--wide-l--size-lg":"Dialog--wide-l--size-lg__mo796",contentShow:st,contentHide:nt,header:at,description:it,actions:rt},lt=({open:s,title:o,description:t,children:n,size:d="md",hideHeader:g,onClose:f,dataset:Se})=>{const{formatMessage:we}=Ne(),ze=We(),be=Le(Se,{preplyDsComponent:P.Dialog}),Oe=qe(m,P.Dialog,[Me("size",d)]).join(" "),je=a.useCallback(_e=>{_e||f==null||f()},[f]);return e.jsx(Be,{open:s,onOpenChange:je,children:e.jsxs(Te,{container:ze,children:[e.jsx(Ie,{className:m.overlay,"data-testid":"dialog-overlay"}),e.jsxs(Pe,{...be,className:Oe,children:[e.jsxs("header",{className:m.header,children:[e.jsxs("hgroup",{hidden:g,children:[e.jsx(He,{asChild:!0,children:e.jsx(Re,{tag:"h3",variant:"medium",children:o})}),t&&e.jsx(Ee,{asChild:!0,children:e.jsx("p",{className:m.description,children:t})})]}),e.jsx(Fe,{asChild:!0,children:e.jsx(Ae,{variant:"ghost",dataset:{testid:"dialog-close"},assistiveText:we(Ve.close),svg:Xe})})]}),n]})]})})},dt=({primaryLabel:s,secondaryLabel:o,onPrimaryClick:t,onSecondaryClick:n})=>e.jsxs("div",{className:m.actions,children:[e.jsx(l,{variant:"secondary",onClick:n,children:o}),e.jsx(l,{variant:"primary",onClick:t,children:s})]}),i=Object.assign(lt,{Actions:dt});try{i.displayName="Dialog",i.__docgenInfo={description:`A modal dialog component that can be used to show content in an overlay.
1
+ import{j as e}from"./jsx-runtime-BYouaCF_.js";import{r as a}from"./index-B3evPFBL.js";import{a as H}from"./chunk-D5ZWXAHU-BhFjjRSl.js";import{f as He,u as f,a as v,e as g}from"./index-DDyIDR-R.js";import{R as Ee,P as Fe,O as Re,C as Ae,T as Le,D as We,a as Ne}from"./index-wFyje0se.js";import{B as d}from"./Button-ByGPH5mV.js";import{I as Ve}from"./IconButton-D2EvZJff.js";import{H as qe}from"./Heading-kRKueEJE.js";import{g as Me}from"./shared-strings-CcWGHelY.js";import{u as Ue}from"./index-BfBdt3zW.js";import{g as Je}from"./PortalElementProvider-D4ltrA8j.js";import{g as Ze}from"./index-DdzHuZ-Y.js";import{w as F}from"./componentNames-CpCJzpB9.js";import{m as Ke,s as Ye}from"./classNames-BUL1Zq7e.js";import{S as m}from"./Steps-CSR6mb1x.js";import{I as Xe}from"./Icon-ZIxauYsE.js";import{A as Ge}from"./Avatar-B2H0W8KL.js";import{F as Qe}from"./TokyoUIInfo-nHX2jpp7.js";import{L as $e}from"./LayoutFlex-BK2I--nP.js";import{N as et}from"./NumberField-DJpVBd26.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./v4-CtRu48qb.js";import"./index-DRKYGVyc.js";import"./Combination-CCYtWL8C.js";import"./tslib.es6-BntfKcQG.js";import"./render-icon-CVTdrNe-.js";import"./ButtonBase-B0KE_9xS.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./Spinner-BCTJunNM.js";import"./defaults-B1rzzf6M.js";import"./useMergeRefs-CeyIhNgY.js";import"./useHostname-CH18gHFj.js";import"./index-CC6DAVyL.js";import"./text-accent-DZDDtpIt.js";import"./text-centered-CznToR0o.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./index-jEDObK_5.js";import"./index-C66nt8TK.js";import"./ProgressSteps-BBrWCYks.js";import"./message-BraTJ16C.js";import"./constants--ewUoBsO.js";import"./layout-relative.module-ed9bC4H4.js";import"./FormControl-CeIJk4_Z.js";import"./Input-CfUiWyvo.js";import"./InputContainer-Bk0tgFnW.js";const tt=({title:o,titleId:s,...t},n)=>a.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",ref:n,"aria-labelledby":s,...t},o?a.createElement("title",{id:s},o):null,a.createElement("path",{fillRule:"evenodd",d:"M7.207 5.793a1 1 0 0 0-1.414 1.414L10.586 12l-4.793 4.793a1 1 0 1 0 1.414 1.414L12 13.414l4.793 4.793a1 1 0 0 0 1.414-1.414L13.414 12l4.793-4.793a1 1 0 0 0-1.414-1.414L12 10.586 7.207 5.793Z",clipRule:"evenodd"})),st=a.forwardRef(tt),ot="overlay__NM-kk",nt="overlayShow__SQuh9",at="overlayHide__UA0Uh",it="Dialog__GqDxV",rt="fullscreen__mOBaF",lt="mobileContentShow__1akQp",dt="mobileContentHide__GXooF",ct="contentShow__RpFHp",pt="contentHide__Y-gr5",ut="header__2EPvy",gt="description__0f9xh",mt="actions__hIL-J",y={overlay:ot,overlayShow:nt,overlayHide:at,Dialog:it,fullscreen:rt,mobileContentShow:lt,mobileContentHide:dt,"Dialog--size-xs":"Dialog--size-xs__W0yGm","Dialog--size-sm":"Dialog--size-sm__rE3Y-","Dialog--size-md":"Dialog--size-md__HWxI4","Dialog--size-lg":"Dialog--size-lg__Lis4-",contentShow:ct,contentHide:pt,"Dialog--narrow-l--size-xs":"Dialog--narrow-l--size-xs__ljCvr","Dialog--medium-s--size-xs":"Dialog--medium-s--size-xs__t-4Ow","Dialog--medium-l--size-xs":"Dialog--medium-l--size-xs__yc1ae","Dialog--wide-s--size-xs":"Dialog--wide-s--size-xs__Id0f5","Dialog--wide-l--size-xs":"Dialog--wide-l--size-xs__Pnlyp","Dialog--narrow-l--size-sm":"Dialog--narrow-l--size-sm__M8-BH","Dialog--medium-s--size-sm":"Dialog--medium-s--size-sm__UPlli","Dialog--medium-l--size-sm":"Dialog--medium-l--size-sm__nAW8A","Dialog--wide-s--size-sm":"Dialog--wide-s--size-sm__i0pbj","Dialog--wide-l--size-sm":"Dialog--wide-l--size-sm__PghJ-","Dialog--narrow-l--size-md":"Dialog--narrow-l--size-md__8jZY3","Dialog--medium-s--size-md":"Dialog--medium-s--size-md__dQ1TZ","Dialog--medium-l--size-md":"Dialog--medium-l--size-md__kcNF8","Dialog--wide-s--size-md":"Dialog--wide-s--size-md__KDVax","Dialog--wide-l--size-md":"Dialog--wide-l--size-md__mV57k","Dialog--narrow-l--size-lg":"Dialog--narrow-l--size-lg__h5Tdx","Dialog--medium-s--size-lg":"Dialog--medium-s--size-lg__qci5k","Dialog--medium-l--size-lg":"Dialog--medium-l--size-lg__JCkaM","Dialog--wide-s--size-lg":"Dialog--wide-s--size-lg__eJlxf","Dialog--wide-l--size-lg":"Dialog--wide-l--size-lg__mo796",header:ut,description:gt,actions:mt},yt=({open:o,title:s,description:t,children:n,size:i="md",hideHeader:u,onClose:p,dataset:h})=>{const{formatMessage:E}=Ue(),ke=Je(),_e=ft(o),Be=Ze(h,{preplyDsComponent:F.Dialog}),Te=Ke(y,F.Dialog,[Ye("size",i)]).join(" "),Ie=a.useCallback(Pe=>{Pe||p==null||p()},[p]);return e.jsx(Ee,{open:o,onOpenChange:Ie,children:e.jsxs(Fe,{container:ke,children:[e.jsx(Re,{className:y.overlay,"data-testid":"dialog-overlay"}),e.jsxs(Ae,{...Be,ref:_e,className:Te,children:[e.jsxs("header",{className:y.header,children:[e.jsxs("hgroup",{hidden:u,children:[e.jsx(Le,{asChild:!0,children:e.jsx(qe,{tag:"h3",variant:"medium",children:s})}),t&&e.jsx(We,{asChild:!0,children:e.jsx("p",{className:y.description,children:t})})]}),e.jsx(Ne,{asChild:!0,children:e.jsx(Ve,{variant:"ghost",dataset:{testid:"dialog-close"},assistiveText:E(Me.close),svg:st})})]}),n]})]})})},ht=({primaryLabel:o,secondaryLabel:s,onPrimaryClick:t,onSecondaryClick:n})=>e.jsxs("div",{className:y.actions,children:[e.jsx(d,{variant:"secondary",onClick:n,children:s}),e.jsx(d,{variant:"primary",onClick:t,children:o})]}),r=Object.assign(yt,{Actions:ht});function ft(o){const[s,t]=a.useState(null),n=a.useCallback(i=>t(i),[]);return a.useEffect(()=>{if(!o||!s)return;const i=async()=>{const p=s.getAnimations().map(E=>E.finished);await Promise.allSettled(p);const{y:h}=s.getBoundingClientRect();s.classList.toggle(y.fullscreen,h===0)};i(),window.addEventListener("resize",i);const u=new ResizeObserver(i);return u.observe(s),()=>{window.removeEventListener("resize",i),u.disconnect()}},[o,s]),n}try{r.displayName="Dialog",r.__docgenInfo={description:`A modal dialog component that can be used to show content in an overlay.
2
2
 
3
3
  Composed of:
4
4
  - Dialog: The main component
5
- - Dialog.Actions: Footer actions with primary and secondary buttons`,displayName:"Dialog",props:{open:{defaultValue:null,description:"Controls the visibility of the dialog",name:"open",required:!0,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},title:{defaultValue:null,description:"Title displayed in the dialog header",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"}]}},description:{defaultValue:null,description:"Optional description displayed below the title",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"}]}},children:{defaultValue:null,description:"Content to be rendered inside the dialog",name:"children",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"}]}},size:{defaultValue:{value:"md"},description:"Controls the width of the dialog on desktop and height on mobile",name:"size",required:!1,type:{name:"enum",value:[{value:'"xs"'},{value:'"md"'},{value:'"sm"'},{value:'"lg"'},{value:'ResponsiveProp<"xs" | "md" | "sm" | "lg">'}]}},hideHeader:{defaultValue:{value:"false"},description:`When true, visually hides the header (title and description) while
5
+ - Dialog.Actions: Footer actions with primary and secondary buttons`,displayName:"Dialog",props:{open:{defaultValue:null,description:"Controls the visibility of the dialog",name:"open",required:!0,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},title:{defaultValue:null,description:"Title displayed in the dialog header",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"}]}},description:{defaultValue:null,description:"Optional description displayed below the title",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"}]}},children:{defaultValue:null,description:"Content to be rendered inside the dialog",name:"children",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"}]}},size:{defaultValue:{value:"md"},description:"Controls the width of the dialog on desktop and height on mobile",name:"size",required:!1,type:{name:"enum",value:[{value:'"xs"'},{value:'"sm"'},{value:'"md"'},{value:'"lg"'},{value:'ResponsiveProp<"xs" | "sm" | "md" | "lg">'}]}},hideHeader:{defaultValue:{value:"false"},description:`When true, visually hides the header (title and description) while
6
6
  keeping it accessible to screen readers`,name:"hideHeader",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},onClose:{defaultValue:null,description:`Callback fired when the user tries to close the dialog (via escape
7
- key, overlay click, or close button).`,name:"onClose",required:!1,type:{name:"enum",value:[{value:"() => void"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}}}}}catch{}const Gt={title:"Components/Dialog",component:i,parameters:{docs:{story:{inline:!1,height:600}},a11y:{config:{rules:[{id:"color-contrast",enabled:!1}]}}},args:{onClose:ke()}},r=e.jsx("div",{style:{width:"100%",height:"200px",backgroundColor:"#e0e0e0"}}),c=async({canvas:s,step:o})=>{let t;return await o("Open dialog",async()=>{const n=s.getByTestId("trigger");return await y.click(n),h(()=>(t=s.getByTestId("dialog"),p(t).toBeVisible()))}),t},v={render:function(){const[o,t]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(l,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsx(i,{open:o,onClose:()=>t(!1),size:"xs",title:"Extra Small Dialog",dataset:{testid:"dialog"},children:r})]})},play:c},x={render:function(){const[o,t]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(l,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsx(i,{open:o,onClose:()=>t(!1),size:"sm",title:"Small Dialog",dataset:{testid:"dialog"},children:r})]})},play:c},C={render:function(){const[o,t]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(l,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsx(i,{open:o,onClose:()=>t(!1),size:"md",title:"Medium Dialog",dataset:{testid:"dialog"},children:r})]})},play:c},D={render:function(){const[o,t]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(l,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsx(i,{open:o,onClose:()=>t(!1),size:"lg",title:"Large Dialog",dataset:{testid:"dialog"},children:r})]})},play:c},S={parameters:{docs:{description:{story:`
7
+ key, overlay click, or close button).`,name:"onClose",required:!1,type:{name:"enum",value:[{value:"() => void"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}}}}}catch{}const ds={title:"Components/Dialog",component:r,parameters:{docs:{story:{inline:!1,height:600}},a11y:{config:{rules:[{id:"color-contrast",enabled:!1}]}}},args:{onClose:He()}},l=e.jsx("div",{style:{width:"100%",height:"200px",background:"linear-gradient(to bottom, color-mix(in srgb, #e0e0e0, transparent), #e0e0e0)"}}),c=async({canvas:o,step:s})=>{let t;return await s("Open dialog",async()=>{const n=o.getByTestId("trigger");return await f.click(n),v(()=>(t=o.getByTestId("dialog"),g(t).toBeVisible()))}),t},C={render:function(){const[s,t]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(d,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsx(r,{open:s,onClose:()=>t(!1),size:"xs",title:"Extra Small Dialog",dataset:{testid:"dialog"},children:l})]})},play:c},x={render:function(){const[s,t]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(d,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsx(r,{open:s,onClose:()=>t(!1),size:"sm",title:"Small Dialog",dataset:{testid:"dialog"},children:l})]})},play:c},D={render:function(){const[s,t]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(d,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsx(r,{open:s,onClose:()=>t(!1),size:"md",title:"Medium Dialog",dataset:{testid:"dialog"},children:l})]})},play:c},S={render:function(){const[s,t]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(d,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsx(r,{open:s,onClose:()=>t(!1),size:"lg",title:"Large Dialog",dataset:{testid:"dialog"},children:l})]})},play:c},w={parameters:{docs:{description:{story:`
8
8
  The Dialog component adapts to different screen sizes through responsive size props.
9
9
  Use an object with breakpoints as keys to specify different sizes at different viewport widths:
10
10
 
11
11
  \`\`\`tsx
12
12
  <Dialog
13
13
  size={{
14
- _: 'lg', // Default size (mobile)
15
- 'narrow-l': 'xs' // Size at 400px and above
14
+ _: 'xs',
15
+ 'medium-l': 'lg'
16
16
  }}
17
17
  />
18
18
  \`\`\`
19
-
20
- This example uses a full-width dialog on mobile and a compact dialog on larger screens.
21
- `}}},render:function(){const[o,t]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(l,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsx(i,{open:o,onClose:()=>t(!1),size:{_:"lg","narrow-l":"xs"},title:"Responsive Dialog",description:"This dialog changes size based on the viewport width: `lg` on mobile, `xs` on larger screens",dataset:{testid:"dialog"},children:r})]})},play:c},w={render:function(){const[o,t]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(l,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsx(i,{open:o,onClose:()=>t(!1),size:"md",title:"Visually Hidden Title",description:"This header is hidden visually but still accessible to screen readers",hideHeader:!0,dataset:{testid:"dialog"},children:r})]})},play:c},z={render:function(){const[o,t]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(l,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsxs(i,{open:o,onClose:()=>t(!1),size:"md",title:"Dialog Title",description:"This is the dialog description.",dataset:{testid:"dialog"},children:[r,e.jsx(i.Actions,{primaryLabel:"Primary",secondaryLabel:"Secondary",onPrimaryClick:I("Primary button clicked"),onSecondaryClick:I("Secondary button clicked")})]})]})},play:c},b={parameters:{docs:{description:{story:`
19
+ `}}},render:function(){const[s,t]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(d,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsx(r,{open:s,onClose:()=>t(!1),size:{_:"xs","medium-l":"lg"},title:"Width Responsivness",description:"Change the window width to see the Dialog width respond to it",dataset:{testid:"dialog"},children:l})]})},play:c},b={render:function(s){const[t,n]=a.useState(!1),[i,u]=a.useState(1);return e.jsxs(e.Fragment,{children:[e.jsx(d,{dataset:{testid:"trigger"},onClick:()=>n(!0),children:"Open"}),e.jsxs(r,{open:t,onClose:()=>{var p;n(!1),(p=s.onClose)==null||p.call(s)},size:"md",title:"Height Responsiveness",description:"Change the number of children to see the Dialog style respond to the height change",dataset:{testid:"dialog"},children:[e.jsx(et,{label:"Child count",value:i,onChange:p=>u(parseInt(p.target.value)),required:!0}),e.jsx("br",{}),Array.from({length:i},(p,h)=>e.jsx(a.Fragment,{children:l},h)),e.jsx(r.Actions,{primaryLabel:"Primary",secondaryLabel:"Secondary",onPrimaryClick:H("Primary button clicked"),onSecondaryClick:H("Secondary button clicked")})]})]})},play:c},z={render:function(){const[s,t]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(d,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsx(r,{open:s,onClose:()=>t(!1),size:"md",title:"Visually Hidden Title",description:"This header is hidden visually but still accessible to screen readers",hideHeader:!0,dataset:{testid:"dialog"},children:l})]})},play:c},O={render:function(){const[s,t]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(d,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsxs(r,{open:s,onClose:()=>t(!1),size:"md",title:"Dialog Title",description:"This is the dialog description.",dataset:{testid:"dialog"},children:[l,e.jsx(r.Actions,{primaryLabel:"Primary",secondaryLabel:"Secondary",onPrimaryClick:H("Primary button clicked"),onSecondaryClick:H("Secondary button clicked")})]})]})},play:c},j={parameters:{docs:{description:{story:`
22
20
  The Dialog component can be used with the Steps component to create multi-step flows.
23
21
  You can hide the Dialog's header using \`hideHeader\` and add your own headers to each step,
24
22
  like in this story.
25
- `}}},render:function(){const[o,t]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(l,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsx(i,{open:o,onClose:()=>t(!1),size:"md",title:"Hidden Dialog Title",hideHeader:!0,dataset:{testid:"dialog"},children:e.jsxs(u,{"aria-label":"Onboarding Steps",children:[e.jsx(u.Step,{title:"Profile",description:"Tell us more about yourself",children:r}),e.jsx(u.Step,{title:"Subject",description:"What do you want to learn?",children:r}),e.jsx(u.Step,{title:"Availability",description:"When are you available?",children:r}),e.jsx("br",{}),e.jsxs(Ke,{justifyContent:"space-between",children:[e.jsx(u.Previous,{}),e.jsx(u.Next,{})]})]})})]})},play:c},O={parameters:{docs:{description:{story:"A dialog with an Icon component in the title. This demonstrates how to use React elements in the title."}}},render:function(){const[o,t]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(l,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsx(i,{open:o,onClose:()=>t(!1),size:"md",title:e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"8px"},children:[e.jsx(Ue,{svg:Ze}),e.jsx("span",{children:"Information Dialog"})]}),description:"This dialog title includes an icon component",dataset:{testid:"dialog"},children:r})]})},play:c},j={parameters:{docs:{description:{story:"A dialog with an Avatar component in the title. This demonstrates how to use compound components in the title."}}},render:function(){const[o,t]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(l,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsx(i,{open:o,onClose:()=>t(!1),size:"md",title:e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"12px"},children:[e.jsx(Je,{size:"s",alt:"User"}),e.jsx("span",{children:"User Profile"})]}),description:"This dialog shows a user profile with an avatar in the title",dataset:{testid:"dialog"},children:r})]})},play:c},_={parameters:{docs:{description:{story:`
23
+ `}}},render:function(){const[s,t]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(d,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsx(r,{open:s,onClose:()=>t(!1),size:"md",title:"Hidden Dialog Title",hideHeader:!0,dataset:{testid:"dialog"},children:e.jsxs(m,{"aria-label":"Onboarding Steps",children:[e.jsx(m.Step,{title:"Profile",description:"Tell us more about yourself",children:l}),e.jsx(m.Step,{title:"Subject",description:"What do you want to learn?",children:l}),e.jsx(m.Step,{title:"Availability",description:"When are you available?",children:l}),e.jsx("br",{}),e.jsxs($e,{justifyContent:"space-between",children:[e.jsx(m.Previous,{}),e.jsx(m.Next,{})]})]})})]})},play:c},k={parameters:{docs:{description:{story:"A dialog with an Icon component in the title. This demonstrates how to use React elements in the title."}}},render:function(){const[s,t]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(d,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsx(r,{open:s,onClose:()=>t(!1),size:"md",title:e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"8px"},children:[e.jsx(Xe,{svg:Qe}),e.jsx("span",{children:"Information Dialog"})]}),description:"This dialog title includes an icon component",dataset:{testid:"dialog"},children:l})]})},play:c},_={parameters:{docs:{description:{story:"A dialog with an Avatar component in the title. This demonstrates how to use compound components in the title."}}},render:function(){const[s,t]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(d,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsx(r,{open:s,onClose:()=>t(!1),size:"md",title:e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"12px"},children:[e.jsx(Ge,{size:"s",alt:"User"}),e.jsx("span",{children:"User Profile"})]}),description:"This dialog shows a user profile with an avatar in the title",dataset:{testid:"dialog"},children:l})]})},play:c},B={parameters:{docs:{description:{story:`
26
24
  The Dialog component provides CSS property escape hatches for controlling the z-index of both the overlay and content:
27
25
 
28
26
  - \`--ds-dialog-overlay-z-index-override\`: Controls the overlay's z-index
@@ -34,7 +32,7 @@ In the following example, the stacking order of the dialog trigger, overlay, and
34
32
  reveresed using the above CSS properties.
35
33
 
36
34
  Note: This is done using a \`useEffect\` just for the sake of the story. In a real-world scenario, this should ideally be done in a global stylesheet or a theme provider.
37
- `}}},render:function(){const[o,t]=a.useState(!1);return a.useEffect(()=>(document.body.style.setProperty("--ds-dialog-overlay-z-index-override","88"),document.body.style.setProperty("--ds-dialog-content-z-index-override","77"),()=>{document.body.style.removeProperty("--ds-dialog-overlay-z-index-override"),document.body.style.removeProperty("--ds-dialog-content-z-index-override")}),[]),e.jsxs("div",{style:{position:"relative",zIndex:99},children:[e.jsx(l,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsx(i,{open:o,title:"ZIndex Override",size:"md",onClose:()=>t(!1),dataset:{testid:"dialog"},children:r})]})},play:async({canvas:s,step:o})=>{await o("Open alert",async()=>(await y.click(s.getByTestId("trigger")),h(()=>{const t=s.getByTestId("dialog");p(t).toBeVisible()}))),await o("Check content's computed z-index",async()=>{const t=s.getByTestId("dialog"),n=getComputedStyle(t);p(n.zIndex).toBe("77")}),await o("Check overlay's computed z-index",async()=>{const t=s.getByTestId("dialog").previousElementSibling;if(!t)throw new Error("The overlay happened to be the previous sibling of the dialog content, but it isn't anymore. Please update the test.");const n=getComputedStyle(t);p(n.zIndex).toBe("88")})}},k={tags:["!autodocs"],render:function(o){const[t,n]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(l,{dataset:{testid:"trigger"},onClick:()=>n(!0),children:"Open"}),e.jsx(i,{open:t,onClose:()=>{var d;n(!1),(d=o.onClose)==null||d.call(o)},size:"md",title:"Test Close Button",dataset:{testid:"dialog"},children:r})]})},play:async s=>{const o=await c(s),{canvas:t,step:n,args:d}=s;await n("Close dialog using close button",async()=>{const g=t.getByTestId("dialog-close");return await y.click(g),h(async()=>(await p(o).not.toBeVisible(),p(d.onClose).toHaveBeenCalledOnce()))})}},B={tags:["!autodocs"],render:function(o){const[t,n]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(l,{dataset:{testid:"trigger"},onClick:()=>n(!0),children:"Open"}),e.jsx(i,{open:t,onClose:()=>{var d;n(!1),(d=o.onClose)==null||d.call(o)},size:"md",title:"Test Close Overlay",dataset:{testid:"dialog"},children:r})]})},play:async s=>{const o=await c(s),{canvas:t,step:n,args:d}=s;await n("Close dialog by clicking overlay",async()=>{const g=t.getByTestId("dialog-overlay");return await y.click(g),h(async()=>(await p(o).not.toBeVisible(),p(d.onClose).toHaveBeenCalledOnce()))})}},T={tags:["!autodocs"],render:function(o){const[t,n]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(l,{dataset:{testid:"trigger"},onClick:()=>n(!0),children:"Open"}),e.jsx(i,{open:t,onClose:()=>{var d;n(!1),(d=o.onClose)==null||d.call(o)},size:"md",title:"Test Close Keyboard",dataset:{testid:"dialog"},children:r})]})},play:async s=>{const o=await c(s),{step:t,args:n}=s;await t("Close dialog using escape key",async()=>(await y.keyboard("{Escape}"),h(async()=>(await p(o).not.toBeVisible(),p(n.onClose).toHaveBeenCalledOnce()))))}};var H,E,F;v.parameters={...v.parameters,docs:{...(H=v.parameters)==null?void 0:H.docs,source:{originalSource:`{
35
+ `}}},render:function(){const[s,t]=a.useState(!1);return a.useEffect(()=>(document.body.style.setProperty("--ds-dialog-overlay-z-index-override","88"),document.body.style.setProperty("--ds-dialog-content-z-index-override","77"),()=>{document.body.style.removeProperty("--ds-dialog-overlay-z-index-override"),document.body.style.removeProperty("--ds-dialog-content-z-index-override")}),[]),e.jsxs("div",{style:{position:"relative",zIndex:99},children:[e.jsx(d,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsx(r,{open:s,title:"ZIndex Override",size:"md",onClose:()=>t(!1),dataset:{testid:"dialog"},children:l})]})},play:async({canvas:o,step:s})=>{await s("Open alert",async()=>(await f.click(o.getByTestId("trigger")),v(()=>{const t=o.getByTestId("dialog");g(t).toBeVisible()}))),await s("Check content's computed z-index",async()=>{const t=o.getByTestId("dialog"),n=getComputedStyle(t);g(n.zIndex).toBe("77")}),await s("Check overlay's computed z-index",async()=>{const t=o.getByTestId("dialog").previousElementSibling;if(!t)throw new Error("The overlay happened to be the previous sibling of the dialog content, but it isn't anymore. Please update the test.");const n=getComputedStyle(t);g(n.zIndex).toBe("88")})}},T={tags:["!autodocs"],render:function(s){const[t,n]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(d,{dataset:{testid:"trigger"},onClick:()=>n(!0),children:"Open"}),e.jsx(r,{open:t,onClose:()=>{var i;n(!1),(i=s.onClose)==null||i.call(s)},size:"md",title:"Test Close Button",dataset:{testid:"dialog"},children:l})]})},play:async o=>{const s=await c(o),{canvas:t,step:n,args:i}=o;await n("Close dialog using close button",async()=>{const u=t.getByTestId("dialog-close");return await f.click(u),v(async()=>(await g(s).not.toBeVisible(),g(i.onClose).toHaveBeenCalledOnce()))})}},I={tags:["!autodocs"],render:function(s){const[t,n]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(d,{dataset:{testid:"trigger"},onClick:()=>n(!0),children:"Open"}),e.jsx(r,{open:t,onClose:()=>{var i;n(!1),(i=s.onClose)==null||i.call(s)},size:"md",title:"Test Close Overlay",dataset:{testid:"dialog"},children:l})]})},play:async o=>{const s=await c(o),{canvas:t,step:n,args:i}=o;await n("Close dialog by clicking overlay",async()=>{const u=t.getByTestId("dialog-overlay");return await f.click(u),v(async()=>(await g(s).not.toBeVisible(),g(i.onClose).toHaveBeenCalledOnce()))})}},P={tags:["!autodocs"],render:function(s){const[t,n]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(d,{dataset:{testid:"trigger"},onClick:()=>n(!0),children:"Open"}),e.jsx(r,{open:t,onClose:()=>{var i;n(!1),(i=s.onClose)==null||i.call(s)},size:"md",title:"Test Close Keyboard",dataset:{testid:"dialog"},children:l})]})},play:async o=>{const s=await c(o),{step:t,args:n}=o;await t("Close dialog using escape key",async()=>(await f.keyboard("{Escape}"),v(async()=>(await g(s).not.toBeVisible(),g(n.onClose).toHaveBeenCalledOnce()))))}};var R,A,L;C.parameters={...C.parameters,docs:{...(R=C.parameters)==null?void 0:R.docs,source:{originalSource:`{
38
36
  render: function Story() {
39
37
  const [open, setOpen] = useState(false);
40
38
  return <>
@@ -51,7 +49,7 @@ Note: This is done using a \`useEffect\` just for the sake of the story. In a re
51
49
  </>;
52
50
  },
53
51
  play: openDialogPlay
54
- }`,...(F=(E=v.parameters)==null?void 0:E.docs)==null?void 0:F.source}}};var A,R,V;x.parameters={...x.parameters,docs:{...(A=x.parameters)==null?void 0:A.docs,source:{originalSource:`{
52
+ }`,...(L=(A=C.parameters)==null?void 0:A.docs)==null?void 0:L.source}}};var W,N,V;x.parameters={...x.parameters,docs:{...(W=x.parameters)==null?void 0:W.docs,source:{originalSource:`{
55
53
  render: function Story() {
56
54
  const [open, setOpen] = useState(false);
57
55
  return <>
@@ -68,7 +66,7 @@ Note: This is done using a \`useEffect\` just for the sake of the story. In a re
68
66
  </>;
69
67
  },
70
68
  play: openDialogPlay
71
- }`,...(V=(R=x.parameters)==null?void 0:R.docs)==null?void 0:V.source}}};var N,W,L;C.parameters={...C.parameters,docs:{...(N=C.parameters)==null?void 0:N.docs,source:{originalSource:`{
69
+ }`,...(V=(N=x.parameters)==null?void 0:N.docs)==null?void 0:V.source}}};var q,M,U;D.parameters={...D.parameters,docs:{...(q=D.parameters)==null?void 0:q.docs,source:{originalSource:`{
72
70
  render: function Story() {
73
71
  const [open, setOpen] = useState(false);
74
72
  return <>
@@ -85,7 +83,7 @@ Note: This is done using a \`useEffect\` just for the sake of the story. In a re
85
83
  </>;
86
84
  },
87
85
  play: openDialogPlay
88
- }`,...(L=(W=C.parameters)==null?void 0:W.docs)==null?void 0:L.source}}};var q,M,U;D.parameters={...D.parameters,docs:{...(q=D.parameters)==null?void 0:q.docs,source:{originalSource:`{
86
+ }`,...(U=(M=D.parameters)==null?void 0:M.docs)==null?void 0:U.source}}};var J,Z,K;S.parameters={...S.parameters,docs:{...(J=S.parameters)==null?void 0:J.docs,source:{originalSource:`{
89
87
  render: function Story() {
90
88
  const [open, setOpen] = useState(false);
91
89
  return <>
@@ -102,7 +100,7 @@ Note: This is done using a \`useEffect\` just for the sake of the story. In a re
102
100
  </>;
103
101
  },
104
102
  play: openDialogPlay
105
- }`,...(U=(M=D.parameters)==null?void 0:M.docs)==null?void 0:U.source}}};var J,Z,K;S.parameters={...S.parameters,docs:{...(J=S.parameters)==null?void 0:J.docs,source:{originalSource:`{
103
+ }`,...(K=(Z=S.parameters)==null?void 0:Z.docs)==null?void 0:K.source}}};var Y,X,G;w.parameters={...w.parameters,docs:{...(Y=w.parameters)==null?void 0:Y.docs,source:{originalSource:`{
106
104
  parameters: {
107
105
  docs: {
108
106
  description: {
@@ -113,13 +111,11 @@ Use an object with breakpoints as keys to specify different sizes at different v
113
111
  \\\`\\\`\\\`tsx
114
112
  <Dialog
115
113
  size={{
116
- _: 'lg', // Default size (mobile)
117
- 'narrow-l': 'xs' // Size at 400px and above
114
+ _: 'xs',
115
+ 'medium-l': 'lg'
118
116
  }}
119
117
  />
120
118
  \\\`\\\`\\\`
121
-
122
- This example uses a full-width dialog on mobile and a compact dialog on larger screens.
123
119
  \`
124
120
  }
125
121
  }
@@ -133,9 +129,9 @@ This example uses a full-width dialog on mobile and a compact dialog on larger s
133
129
  Open
134
130
  </Button>
135
131
  <Dialog open={open} onClose={() => setOpen(false)} size={{
136
- _: 'lg',
137
- 'narrow-l': 'xs'
138
- }} title="Responsive Dialog" description="This dialog changes size based on the viewport width: \`lg\` on mobile, \`xs\` on larger screens" dataset={{
132
+ _: 'xs',
133
+ 'medium-l': 'lg'
134
+ }} title="Width Responsivness" description="Change the window width to see the Dialog width respond to it" dataset={{
139
135
  testid: 'dialog'
140
136
  }}>
141
137
  {DummyContent}
@@ -143,7 +139,33 @@ This example uses a full-width dialog on mobile and a compact dialog on larger s
143
139
  </>;
144
140
  },
145
141
  play: openDialogPlay
146
- }`,...(K=(Z=S.parameters)==null?void 0:Z.docs)==null?void 0:K.source}}};var Y,X,G;w.parameters={...w.parameters,docs:{...(Y=w.parameters)==null?void 0:Y.docs,source:{originalSource:`{
142
+ }`,...(G=(X=w.parameters)==null?void 0:X.docs)==null?void 0:G.source}}};var Q,$,ee;b.parameters={...b.parameters,docs:{...(Q=b.parameters)==null?void 0:Q.docs,source:{originalSource:`{
143
+ render: function Story(args) {
144
+ const [open, setOpen] = useState(false);
145
+ const [count, setCount] = useState(1);
146
+ return <>
147
+ <Button dataset={{
148
+ testid: 'trigger'
149
+ }} onClick={() => setOpen(true)}>
150
+ Open
151
+ </Button>
152
+ <Dialog open={open} onClose={() => {
153
+ setOpen(false);
154
+ args.onClose?.();
155
+ }} size="md" title="Height Responsiveness" description="Change the number of children to see the Dialog style respond to the height change" dataset={{
156
+ testid: 'dialog'
157
+ }}>
158
+ <NumberField label="Child count" value={count} onChange={e => setCount(parseInt(e.target.value))} required />
159
+ <br />
160
+ {Array.from({
161
+ length: count
162
+ }, (_v, i) => <Fragment key={i}>{DummyContent}</Fragment>)}
163
+ <Dialog.Actions primaryLabel="Primary" secondaryLabel="Secondary" onPrimaryClick={action('Primary button clicked')} onSecondaryClick={action('Secondary button clicked')} />
164
+ </Dialog>
165
+ </>;
166
+ },
167
+ play: openDialogPlay
168
+ }`,...(ee=($=b.parameters)==null?void 0:$.docs)==null?void 0:ee.source}}};var te,se,oe;z.parameters={...z.parameters,docs:{...(te=z.parameters)==null?void 0:te.docs,source:{originalSource:`{
147
169
  render: function Story() {
148
170
  const [open, setOpen] = useState(false);
149
171
  return <>
@@ -160,7 +182,7 @@ This example uses a full-width dialog on mobile and a compact dialog on larger s
160
182
  </>;
161
183
  },
162
184
  play: openDialogPlay
163
- }`,...(G=(X=w.parameters)==null?void 0:X.docs)==null?void 0:G.source}}};var Q,$,ee;z.parameters={...z.parameters,docs:{...(Q=z.parameters)==null?void 0:Q.docs,source:{originalSource:`{
185
+ }`,...(oe=(se=z.parameters)==null?void 0:se.docs)==null?void 0:oe.source}}};var ne,ae,ie;O.parameters={...O.parameters,docs:{...(ne=O.parameters)==null?void 0:ne.docs,source:{originalSource:`{
164
186
  render: function Story() {
165
187
  const [open, setOpen] = useState(false);
166
188
  return <>
@@ -178,7 +200,7 @@ This example uses a full-width dialog on mobile and a compact dialog on larger s
178
200
  </>;
179
201
  },
180
202
  play: openDialogPlay
181
- }`,...(ee=($=z.parameters)==null?void 0:$.docs)==null?void 0:ee.source}}};var te,oe,se;b.parameters={...b.parameters,docs:{...(te=b.parameters)==null?void 0:te.docs,source:{originalSource:`{
203
+ }`,...(ie=(ae=O.parameters)==null?void 0:ae.docs)==null?void 0:ie.source}}};var re,le,de;j.parameters={...j.parameters,docs:{...(re=j.parameters)==null?void 0:re.docs,source:{originalSource:`{
182
204
  parameters: {
183
205
  docs: {
184
206
  description: {
@@ -221,7 +243,7 @@ like in this story.
221
243
  </>;
222
244
  },
223
245
  play: openDialogPlay
224
- }`,...(se=(oe=b.parameters)==null?void 0:oe.docs)==null?void 0:se.source}}};var ne,ae,ie;O.parameters={...O.parameters,docs:{...(ne=O.parameters)==null?void 0:ne.docs,source:{originalSource:`{
246
+ }`,...(de=(le=j.parameters)==null?void 0:le.docs)==null?void 0:de.source}}};var ce,pe,ue;k.parameters={...k.parameters,docs:{...(ce=k.parameters)==null?void 0:ce.docs,source:{originalSource:`{
225
247
  parameters: {
226
248
  docs: {
227
249
  description: {
@@ -252,7 +274,7 @@ like in this story.
252
274
  </>;
253
275
  },
254
276
  play: openDialogPlay
255
- }`,...(ie=(ae=O.parameters)==null?void 0:ae.docs)==null?void 0:ie.source}}};var re,le,de;j.parameters={...j.parameters,docs:{...(re=j.parameters)==null?void 0:re.docs,source:{originalSource:`{
277
+ }`,...(ue=(pe=k.parameters)==null?void 0:pe.docs)==null?void 0:ue.source}}};var ge,me,ye;_.parameters={..._.parameters,docs:{...(ge=_.parameters)==null?void 0:ge.docs,source:{originalSource:`{
256
278
  parameters: {
257
279
  docs: {
258
280
  description: {
@@ -283,7 +305,7 @@ like in this story.
283
305
  </>;
284
306
  },
285
307
  play: openDialogPlay
286
- }`,...(de=(le=j.parameters)==null?void 0:le.docs)==null?void 0:de.source}}};var ce,pe,ue;_.parameters={..._.parameters,docs:{...(ce=_.parameters)==null?void 0:ce.docs,source:{originalSource:`{
308
+ }`,...(ye=(me=_.parameters)==null?void 0:me.docs)==null?void 0:ye.source}}};var he,fe,ve;B.parameters={...B.parameters,docs:{...(he=B.parameters)==null?void 0:he.docs,source:{originalSource:`{
287
309
  parameters: {
288
310
  docs: {
289
311
  description: {
@@ -352,7 +374,7 @@ Note: This is done using a \\\`useEffect\\\` just for the sake of the story. In
352
374
  expect(styles.zIndex).toBe('88');
353
375
  });
354
376
  }
355
- }`,...(ue=(pe=_.parameters)==null?void 0:pe.docs)==null?void 0:ue.source}}};var ge,me,ye;k.parameters={...k.parameters,docs:{...(ge=k.parameters)==null?void 0:ge.docs,source:{originalSource:`{
377
+ }`,...(ve=(fe=B.parameters)==null?void 0:fe.docs)==null?void 0:ve.source}}};var Ce,xe,De;T.parameters={...T.parameters,docs:{...(Ce=T.parameters)==null?void 0:Ce.docs,source:{originalSource:`{
356
378
  tags: ['!autodocs'],
357
379
  render: function Story(args) {
358
380
  const [open, setOpen] = useState(false);
@@ -388,7 +410,7 @@ Note: This is done using a \\\`useEffect\\\` just for the sake of the story. In
388
410
  });
389
411
  });
390
412
  }
391
- }`,...(ye=(me=k.parameters)==null?void 0:me.docs)==null?void 0:ye.source}}};var he,fe,ve;B.parameters={...B.parameters,docs:{...(he=B.parameters)==null?void 0:he.docs,source:{originalSource:`{
413
+ }`,...(De=(xe=T.parameters)==null?void 0:xe.docs)==null?void 0:De.source}}};var Se,we,be;I.parameters={...I.parameters,docs:{...(Se=I.parameters)==null?void 0:Se.docs,source:{originalSource:`{
392
414
  tags: ['!autodocs'],
393
415
  render: function Story(args) {
394
416
  const [open, setOpen] = useState(false);
@@ -424,7 +446,7 @@ Note: This is done using a \\\`useEffect\\\` just for the sake of the story. In
424
446
  });
425
447
  });
426
448
  }
427
- }`,...(ve=(fe=B.parameters)==null?void 0:fe.docs)==null?void 0:ve.source}}};var xe,Ce,De;T.parameters={...T.parameters,docs:{...(xe=T.parameters)==null?void 0:xe.docs,source:{originalSource:`{
449
+ }`,...(be=(we=I.parameters)==null?void 0:we.docs)==null?void 0:be.source}}};var ze,Oe,je;P.parameters={...P.parameters,docs:{...(ze=P.parameters)==null?void 0:ze.docs,source:{originalSource:`{
428
450
  tags: ['!autodocs'],
429
451
  render: function Story(args) {
430
452
  const [open, setOpen] = useState(false);
@@ -458,4 +480,4 @@ Note: This is done using a \\\`useEffect\\\` just for the sake of the story. In
458
480
  });
459
481
  });
460
482
  }
461
- }`,...(De=(Ce=T.parameters)==null?void 0:Ce.docs)==null?void 0:De.source}}};const Qt=["ExtraSmall","Small","Medium","Large","Responsive","WithHiddenHeader","WithActions","WithSteps","WithIconInTitle","WithAvatarInTitle","WithZIndexOverride","TestCloseButton","TestCloseOverlay","TestCloseKeyboard"];export{v as ExtraSmall,D as Large,C as Medium,S as Responsive,x as Small,k as TestCloseButton,T as TestCloseKeyboard,B as TestCloseOverlay,z as WithActions,j as WithAvatarInTitle,w as WithHiddenHeader,O as WithIconInTitle,b as WithSteps,_ as WithZIndexOverride,Qt as __namedExportsOrder,Gt as default};
483
+ }`,...(je=(Oe=P.parameters)==null?void 0:Oe.docs)==null?void 0:je.source}}};const cs=["ExtraSmall","Small","Medium","Large","WidthResponsiveness","HeightResponsiveness","WithHiddenHeader","WithActions","WithSteps","WithIconInTitle","WithAvatarInTitle","WithZIndexOverride","TestCloseButton","TestCloseOverlay","TestCloseKeyboard"];export{C as ExtraSmall,b as HeightResponsiveness,S as Large,D as Medium,x as Small,T as TestCloseButton,P as TestCloseKeyboard,I as TestCloseOverlay,w as WidthResponsiveness,O as WithActions,_ as WithAvatarInTitle,z as WithHiddenHeader,k as WithIconInTitle,j as WithSteps,B as WithZIndexOverride,cs as __namedExportsOrder,ds as default};
@@ -1,2 +1,2 @@
1
1
  const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./index-uOP2uDdf.js","./index-B3evPFBL.js","./_commonjsHelpers-Cpj98o6Y.js"])))=>i.map(i=>d[i]);
2
- import{_ as l}from"./iframe-HKl8oQjn.js";import{r as s,e as n}from"./index-B3evPFBL.js";import{H as p,A as h,C as E,c as d}from"./index-D7MP9XPf.js";import{c as v}from"./client-DXF5tT0h.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./jsx-runtime-BYouaCF_.js";import"./index-jEDObK_5.js";import"./index-C66nt8TK.js";import"./index-Cu4lwwaE.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";var i=new Map;function R(){return globalThis.IS_REACT_ACT_ENVIRONMENT}var f=({callback:e,children:t})=>{let r=s.useRef();return s.useLayoutEffect(()=>{r.current!==e&&(r.current=e,e())},[e]),t};typeof Promise.withResolvers>"u"&&(Promise.withResolvers=()=>{let e=null,t=null;return{promise:new Promise((r,o)=>{e=r,t=o}),resolve:e,reject:t}});var w=async(e,t,r)=>{let o=await x(t,r);if(R()){o.render(e);return}let{promise:a,resolve:m}=Promise.withResolvers();return o.render(s.createElement(f,{callback:m},e)),a},_=(e,t)=>{let r=i.get(e);r&&(r.unmount(),i.delete(e))},x=async(e,t)=>{let r=i.get(e);return r||(r=v.createRoot(e,t),i.set(e,r)),r},g={code:E,a:h,...p},y=class extends s.Component{constructor(){super(...arguments),this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(e){let{showException:t}=this.props;t(e)}render(){let{hasError:e}=this.state,{children:t}=this.props;return e?null:n.createElement(n.Fragment,null,t)}},H=class{constructor(){this.render=async(e,t,r)=>{let o={...g,...t==null?void 0:t.components},a=d;return new Promise((m,c)=>{l(async()=>{const{MDXProvider:u}=await import("./index-uOP2uDdf.js");return{MDXProvider:u}},__vite__mapDeps([0,1,2]),import.meta.url).then(({MDXProvider:u})=>w(n.createElement(y,{showException:c,key:Math.random()},n.createElement(u,{components:o},n.createElement(a,{context:e,docsParameter:t}))),r)).then(()=>m())})},this.unmount=e=>{_(e)}}};export{H as DocsRenderer,g as defaultComponents};
2
+ import{_ as l}from"./iframe-ZI8HwEVB.js";import{r as s,e as n}from"./index-B3evPFBL.js";import{H as p,A as h,C as E,c as d}from"./index-CRsQDyyQ.js";import{c as v}from"./client-DXF5tT0h.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./jsx-runtime-BYouaCF_.js";import"./index-jEDObK_5.js";import"./index-C66nt8TK.js";import"./index-Cu4lwwaE.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";var i=new Map;function R(){return globalThis.IS_REACT_ACT_ENVIRONMENT}var f=({callback:e,children:t})=>{let r=s.useRef();return s.useLayoutEffect(()=>{r.current!==e&&(r.current=e,e())},[e]),t};typeof Promise.withResolvers>"u"&&(Promise.withResolvers=()=>{let e=null,t=null;return{promise:new Promise((r,o)=>{e=r,t=o}),resolve:e,reject:t}});var w=async(e,t,r)=>{let o=await x(t,r);if(R()){o.render(e);return}let{promise:a,resolve:m}=Promise.withResolvers();return o.render(s.createElement(f,{callback:m},e)),a},_=(e,t)=>{let r=i.get(e);r&&(r.unmount(),i.delete(e))},x=async(e,t)=>{let r=i.get(e);return r||(r=v.createRoot(e,t),i.set(e,r)),r},g={code:E,a:h,...p},y=class extends s.Component{constructor(){super(...arguments),this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(e){let{showException:t}=this.props;t(e)}render(){let{hasError:e}=this.state,{children:t}=this.props;return e?null:n.createElement(n.Fragment,null,t)}},H=class{constructor(){this.render=async(e,t,r)=>{let o={...g,...t==null?void 0:t.components},a=d;return new Promise((m,c)=>{l(async()=>{const{MDXProvider:u}=await import("./index-uOP2uDdf.js");return{MDXProvider:u}},__vite__mapDeps([0,1,2]),import.meta.url).then(({MDXProvider:u})=>w(n.createElement(y,{showException:c,key:Math.random()},n.createElement(u,{components:o},n.createElement(a,{context:e,docsParameter:t}))),r)).then(()=>m())})},this.unmount=e=>{_(e)}}};export{H as DocsRenderer,g as defaultComponents};
@@ -1 +1 @@
1
- import{j as n}from"./jsx-runtime-BYouaCF_.js";import{r as f}from"./index-B3evPFBL.js";import{f as v}from"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import{m as y}from"./classNames-BUL1Zq7e.js";import{g}from"./index-DdzHuZ-Y.js";import{w as a}from"./componentNames-CVVyamkx.js";const B="FieldButton__ZIYKf",b={FieldButton:B},l=f.forwardRef(function({svg:o,assistiveText:r,onClick:e,dataset:u,...i},m){const d=y(b,a.FieldButton),p=t=>{t.stopPropagation(),e==null||e(t)},c={...v(i),...g(u,{preplyDsComponent:a.FieldButton}),className:d.join(" "),title:r,onClick:p,ref:m};return n.jsx("button",{...c,type:"button",children:n.jsx(o,{"aria-hidden":"true",focusable:"false"})})});try{l.displayName="FieldButton",l.__docgenInfo={description:"",displayName:"FieldButton",props:{svg:{defaultValue:null,description:"",name:"svg",required:!0,type:{name:"enum",value:[{value:"ComponentClass<SVGAttributes<SVGElement>, any>"},{value:"FunctionComponent<SVGAttributes<SVGElement>>"}]}},assistiveText:{defaultValue:null,description:"",name:"assistiveText",required:!0,type:{name:"string"}},onClick:{defaultValue:null,description:"",name:"onClick",required:!0,type:{name:"MouseEventHandler<Element>"}},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: HTMLButtonElement | null) => void"},{value:"RefObject<HTMLButtonElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}export{l as F};
1
+ import{j as n}from"./jsx-runtime-BYouaCF_.js";import{r as f}from"./index-B3evPFBL.js";import{f as v}from"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import{m as y}from"./classNames-BUL1Zq7e.js";import{g}from"./index-DdzHuZ-Y.js";import{w as a}from"./componentNames-CpCJzpB9.js";const B="FieldButton__ZIYKf",b={FieldButton:B},l=f.forwardRef(function({svg:o,assistiveText:r,onClick:e,dataset:u,...i},m){const d=y(b,a.FieldButton),p=t=>{t.stopPropagation(),e==null||e(t)},c={...v(i),...g(u,{preplyDsComponent:a.FieldButton}),className:d.join(" "),title:r,onClick:p,ref:m};return n.jsx("button",{...c,type:"button",children:n.jsx(o,{"aria-hidden":"true",focusable:"false"})})});try{l.displayName="FieldButton",l.__docgenInfo={description:"",displayName:"FieldButton",props:{svg:{defaultValue:null,description:"",name:"svg",required:!0,type:{name:"enum",value:[{value:"ComponentClass<SVGAttributes<SVGElement>, any>"},{value:"FunctionComponent<SVGAttributes<SVGElement>>"}]}},assistiveText:{defaultValue:null,description:"",name:"assistiveText",required:!0,type:{name:"string"}},onClick:{defaultValue:null,description:"",name:"onClick",required:!0,type:{name:"MouseEventHandler<Element>"}},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: HTMLButtonElement | null) => void"},{value:"RefObject<HTMLButtonElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}export{l as F};
@@ -1 +1 @@
1
- import{j as i}from"./jsx-runtime-BYouaCF_.js";import{F as m}from"./LibraryExplore-C8GqDRwc.js";import{F as s}from"./FieldButton-xxvyfVcj.js";import"./index-B3evPFBL.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./classNames-BUL1Zq7e.js";import"./index-DdzHuZ-Y.js";import"./componentNames-CVVyamkx.js";const f={title:"components/FieldButton",component:s},o=()=>i.jsx(s,{svg:m,assistiveText:"Lorem Ipsum",onClick:()=>{}});o.storyName="FieldButton";var t,e,r;o.parameters={...o.parameters,docs:{...(t=o.parameters)==null?void 0:t.docs,source:{originalSource:'() => <FieldButton svg={LibSvg} assistiveText="Lorem Ipsum" onClick={() => undefined} />',...(r=(e=o.parameters)==null?void 0:e.docs)==null?void 0:r.source}}};const v=["Base"];export{o as Base,v as __namedExportsOrder,f as default};
1
+ import{j as i}from"./jsx-runtime-BYouaCF_.js";import{F as m}from"./LibraryExplore-C8GqDRwc.js";import{F as s}from"./FieldButton-Bsa9_rJB.js";import"./index-B3evPFBL.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./classNames-BUL1Zq7e.js";import"./index-DdzHuZ-Y.js";import"./componentNames-CpCJzpB9.js";const f={title:"components/FieldButton",component:s},o=()=>i.jsx(s,{svg:m,assistiveText:"Lorem Ipsum",onClick:()=>{}});o.storyName="FieldButton";var t,e,r;o.parameters={...o.parameters,docs:{...(t=o.parameters)==null?void 0:t.docs,source:{originalSource:'() => <FieldButton svg={LibSvg} assistiveText="Lorem Ipsum" onClick={() => undefined} />',...(r=(e=o.parameters)==null?void 0:e.docs)==null?void 0:r.source}}};const v=["Base"];export{o as Base,v as __namedExportsOrder,f as default};
@@ -1,4 +1,4 @@
1
- import{j as e}from"./jsx-runtime-BYouaCF_.js";import{r as u}from"./index-B3evPFBL.js";import{e as m}from"./index-DDyIDR-R.js";import{c as n,C as o}from"./CountryFlag--G6mQ0wX.js";import{L as F}from"./LayoutFlex-oRwI31fW.js";import{L as y,a as r}from"./LayoutGridItem-COV2Exf8.js";import{T as a}from"./Text-CH4wZQv6.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./index-DdzHuZ-Y.js";import"./componentNames-CVVyamkx.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./layout-relative.module-ed9bC4H4.js";import"./classNames-BUL1Zq7e.js";import"./defaults-B1rzzf6M.js";import"./breakpoints-BfMlrtxE.js";import"./align-self-BM6l9H5Z.js";import"./constants-DYYVurUY.js";import"./text-accent-DZDDtpIt.js";import"./text-centered-CznToR0o.js";const J={title:"components/CountryFlag",component:o,args:{code:"ua",alt:n.ua}},s={render:function(){return e.jsxs("div",{style:{maxWidth:"1000px"},children:[e.jsx(a,{variant:"default-semibold",children:"For some countries, simplified flags are automatically used (unless `simplified` is set to `false`)"}),e.jsxs(y,{columns:4,children:[e.jsx(r,{children:e.jsx(a,{variant:"default-semibold",children:"Code"})}),e.jsx(r,{children:e.jsx(a,{variant:"default-semibold",children:"Country name"})}),e.jsx(r,{children:e.jsx(a,{variant:"default-semibold",children:"4x3"})}),e.jsx(r,{children:e.jsx(a,{variant:"default-semibold",children:"4x3 (with `simplified=false`)"})}),["es","mx"].map(t=>e.jsxs(u.Fragment,{children:[e.jsx(r,{children:t}),e.jsx(r,{children:n[t]}),e.jsx(r,{children:e.jsx(o,{code:t,alt:n[t],size:"large"})}),e.jsx(r,{children:e.jsx(o,{code:t,alt:n[t],size:"large",simplified:!1})})]},t))]}),e.jsx("br",{}),e.jsx(a,{variant:"default-semibold",children:"All countries"}),e.jsxs(y,{columns:3,children:[e.jsx(r,{children:e.jsx(a,{variant:"default-semibold",children:"Code"})}),e.jsx(r,{children:e.jsx(a,{variant:"default-semibold",children:"Country name"})}),e.jsx(r,{children:e.jsx(a,{variant:"default-semibold",children:"4x3"})}),Object.keys(n).map(t=>e.jsxs(u.Fragment,{children:[e.jsx(r,{children:t}),e.jsx(r,{children:n[t]}),e.jsx(r,{children:e.jsx(o,{code:t,alt:n[t],size:"large"})})]},t))]})]})}},d={render:i=>e.jsxs(F,{gap:"16",children:[e.jsx(o,{...i,size:"small"}),e.jsx(o,{...i,size:"medium"}),e.jsx(o,{...i,size:"large"})]})},l={render:function(){return e.jsxs(e.Fragment,{children:[e.jsx(a,{variant:"default-regular-italic",children:"Invalid country code"}),e.jsx(o,{code:"invalidCountryCode",alt:"Invalid country code"}),e.jsx(a,{variant:"default-regular-italic",children:"`undefined` country code"}),e.jsx(o,{code:void 0,alt:"Undefined country code"})]})},play:async({canvas:i})=>{const t=i.getByAltText("Invalid country code");m(t).toBeVisible();const b=i.getByAltText("Undefined country code");m(b).toBeVisible()}},c={parameters:{chromatic:{disableSnapshot:!0}},args:{dataset:{qaid:"flag"}},argTypes:{dataset:{control:"object"}}};var x,p,f;s.parameters={...s.parameters,docs:{...(x=s.parameters)==null?void 0:x.docs,source:{originalSource:`{
1
+ import{j as e}from"./jsx-runtime-BYouaCF_.js";import{r as u}from"./index-B3evPFBL.js";import{e as m}from"./index-DDyIDR-R.js";import{c as n,C as o}from"./CountryFlag-CAFTp6o8.js";import{L as F}from"./LayoutFlex-BK2I--nP.js";import{L as y,a as r}from"./LayoutGridItem-BHeOt4_j.js";import{T as a}from"./Text-BmdJVr9v.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./index-DdzHuZ-Y.js";import"./componentNames-CpCJzpB9.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./layout-relative.module-ed9bC4H4.js";import"./classNames-BUL1Zq7e.js";import"./defaults-B1rzzf6M.js";import"./breakpoints-BfMlrtxE.js";import"./align-self-BM6l9H5Z.js";import"./constants-DYYVurUY.js";import"./text-accent-DZDDtpIt.js";import"./text-centered-CznToR0o.js";const J={title:"components/CountryFlag",component:o,args:{code:"ua",alt:n.ua}},s={render:function(){return e.jsxs("div",{style:{maxWidth:"1000px"},children:[e.jsx(a,{variant:"default-semibold",children:"For some countries, simplified flags are automatically used (unless `simplified` is set to `false`)"}),e.jsxs(y,{columns:4,children:[e.jsx(r,{children:e.jsx(a,{variant:"default-semibold",children:"Code"})}),e.jsx(r,{children:e.jsx(a,{variant:"default-semibold",children:"Country name"})}),e.jsx(r,{children:e.jsx(a,{variant:"default-semibold",children:"4x3"})}),e.jsx(r,{children:e.jsx(a,{variant:"default-semibold",children:"4x3 (with `simplified=false`)"})}),["es","mx"].map(t=>e.jsxs(u.Fragment,{children:[e.jsx(r,{children:t}),e.jsx(r,{children:n[t]}),e.jsx(r,{children:e.jsx(o,{code:t,alt:n[t],size:"large"})}),e.jsx(r,{children:e.jsx(o,{code:t,alt:n[t],size:"large",simplified:!1})})]},t))]}),e.jsx("br",{}),e.jsx(a,{variant:"default-semibold",children:"All countries"}),e.jsxs(y,{columns:3,children:[e.jsx(r,{children:e.jsx(a,{variant:"default-semibold",children:"Code"})}),e.jsx(r,{children:e.jsx(a,{variant:"default-semibold",children:"Country name"})}),e.jsx(r,{children:e.jsx(a,{variant:"default-semibold",children:"4x3"})}),Object.keys(n).map(t=>e.jsxs(u.Fragment,{children:[e.jsx(r,{children:t}),e.jsx(r,{children:n[t]}),e.jsx(r,{children:e.jsx(o,{code:t,alt:n[t],size:"large"})})]},t))]})]})}},d={render:i=>e.jsxs(F,{gap:"16",children:[e.jsx(o,{...i,size:"small"}),e.jsx(o,{...i,size:"medium"}),e.jsx(o,{...i,size:"large"})]})},l={render:function(){return e.jsxs(e.Fragment,{children:[e.jsx(a,{variant:"default-regular-italic",children:"Invalid country code"}),e.jsx(o,{code:"invalidCountryCode",alt:"Invalid country code"}),e.jsx(a,{variant:"default-regular-italic",children:"`undefined` country code"}),e.jsx(o,{code:void 0,alt:"Undefined country code"})]})},play:async({canvas:i})=>{const t=i.getByAltText("Invalid country code");m(t).toBeVisible();const b=i.getByAltText("Undefined country code");m(b).toBeVisible()}},c={parameters:{chromatic:{disableSnapshot:!0}},args:{dataset:{qaid:"flag"}},argTypes:{dataset:{control:"object"}}};var x,p,f;s.parameters={...s.parameters,docs:{...(x=s.parameters)==null?void 0:x.docs,source:{originalSource:`{
2
2
  render: function Story() {
3
3
  return <div style={{
4
4
  maxWidth: '1000px'
@@ -1,4 +1,4 @@
1
- import{j as d}from"./jsx-runtime-BYouaCF_.js";import{e as o}from"./index-DDyIDR-R.js";import{C as s}from"./CountryFlag--G6mQ0wX.js";import"./index-B3evPFBL.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./index-DdzHuZ-Y.js";import"./componentNames-CVVyamkx.js";const v={title:"components/CountryFlag/Tests",component:s,args:{},tags:["!autodocs","!a11y-test","test"]},a={render:function(){return d.jsx(s,{code:"ua",alt:"Ukraine",dataset:{foo:1,bar:"2",baz:!1}})},play:async({canvas:t})=>{const e=t.getByAltText("Ukraine");o(e).toHaveAttribute("data-foo","1"),o(e).toHaveAttribute("data-bar","2"),o(e).toHaveAttribute("data-baz","false")}},r={render:function(){return d.jsx(s,{code:"ua",alt:"Ukraine",loading:"lazy"})},play:async({canvas:t})=>{const e=t.getByAltText("Ukraine");o(e).toHaveAttribute("loading","lazy")}};var n,c,l;a.parameters={...a.parameters,docs:{...(n=a.parameters)==null?void 0:n.docs,source:{originalSource:`{
1
+ import{j as d}from"./jsx-runtime-BYouaCF_.js";import{e as o}from"./index-DDyIDR-R.js";import{C as s}from"./CountryFlag-CAFTp6o8.js";import"./index-B3evPFBL.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./index-DdzHuZ-Y.js";import"./componentNames-CpCJzpB9.js";const v={title:"components/CountryFlag/Tests",component:s,args:{},tags:["!autodocs","!a11y-test","test"]},a={render:function(){return d.jsx(s,{code:"ua",alt:"Ukraine",dataset:{foo:1,bar:"2",baz:!1}})},play:async({canvas:t})=>{const e=t.getByAltText("Ukraine");o(e).toHaveAttribute("data-foo","1"),o(e).toHaveAttribute("data-bar","2"),o(e).toHaveAttribute("data-baz","false")}},r={render:function(){return d.jsx(s,{code:"ua",alt:"Ukraine",loading:"lazy"})},play:async({canvas:t})=>{const e=t.getByAltText("Ukraine");o(e).toHaveAttribute("loading","lazy")}};var n,c,l;a.parameters={...a.parameters,docs:{...(n=a.parameters)==null?void 0:n.docs,source:{originalSource:`{
2
2
  render: function Story() {
3
3
  return <CountryFlag code="ua" alt="Ukraine" dataset={{
4
4
  foo: 1,
@@ -1,4 +1,4 @@
1
- import{j as a}from"./jsx-runtime-BYouaCF_.js";import{S as q}from"./index-DRKYGVyc.js";import{r as x}from"./index-B3evPFBL.js";import"./index-BfBdt3zW.js";import{g as C}from"./index-DdzHuZ-Y.js";import{M as u}from"./message-BraTJ16C.js";import{w as _}from"./componentNames-CVVyamkx.js";const w="container__g46MP",E="label__dGrlk",F="required__w9EwB",N="description__AST5n",R="error__uRqiU",r={container:w,label:E,required:F,description:N,error:R};function j({id:t,error:n,description:o,hasError:l}){const e={};return l&&(e["aria-invalid"]=!0),n&&(e["aria-invalid"]=!0,e["aria-errormessage"]=`${t}-error`),o&&(e["aria-describedby"]=`${t}-description`),e}const p=({id:t,label:n,hideLabel:o,description:l,error:e,hasError:c,children:m,required:s,dataset:f,onClick:v,preplyDsComponent:h=_.FormControl,useLegacyRequiredLabel:d=!1})=>{const b=x.useId(),i=t||b,y=j({id:i,error:e,description:l,hasError:c}),g=C(f,{preplyDsComponent:h});return a.jsxs("div",{className:r.container,...g,onClick:v,children:[a.jsxs("label",{htmlFor:i,className:r.label,"data-hidden":o||!n,"data-testid":"label",children:[n,!!d&&s&&a.jsxs("span",{"aria-hidden":!0,className:r.required,children:[" • ",a.jsx(u,{id:"preply-ds.fieldLabel.required",defaultMessage:"Required",description:"Form field required label"})]}),!d&&!s&&a.jsxs("span",{"aria-hidden":!0,className:r.required,children:[" • ",a.jsx(u,{id:"preply-ds.fieldLabel.optional",defaultMessage:"Optional",description:"Form field optional label"})]})]}),a.jsx(q,{id:i,required:s,...y,children:m}),e?a.jsx("p",{className:r.error,role:"alert",id:`${i}-error`,"data-testid":"error",children:e}):l?a.jsx("p",{className:r.description,id:`${i}-description`,"data-testid":"description",children:l}):null]})};try{p.displayName="FormControl",p.__docgenInfo={description:"FormControl component provides a consistent layout and accessibility\nfor the form fields. You can use it to create custom fields not supported\nby the DS yet.\n\nNote that FormControl will implicitly provide some props to the child component:\n\n- `id` forwarded from FormControl props or will be generated automatically for accessibility purposes;\n- `aria-invalid` and `aria-errormessage` when `error` is provided;\n- `aria-describedby` when `description` is provided;\n- `required` when FormControl's `required` is true;",displayName:"FormControl",props:{id:{defaultValue:null,description:`The id to be passed to the input element.
1
+ import{j as a}from"./jsx-runtime-BYouaCF_.js";import{S as q}from"./index-DRKYGVyc.js";import{r as x}from"./index-B3evPFBL.js";import"./index-BfBdt3zW.js";import{g as C}from"./index-DdzHuZ-Y.js";import{M as u}from"./message-BraTJ16C.js";import{w as _}from"./componentNames-CpCJzpB9.js";const w="container__g46MP",E="label__dGrlk",F="required__w9EwB",N="description__AST5n",R="error__uRqiU",r={container:w,label:E,required:F,description:N,error:R};function j({id:t,error:n,description:o,hasError:l}){const e={};return l&&(e["aria-invalid"]=!0),n&&(e["aria-invalid"]=!0,e["aria-errormessage"]=`${t}-error`),o&&(e["aria-describedby"]=`${t}-description`),e}const p=({id:t,label:n,hideLabel:o,description:l,error:e,hasError:c,children:m,required:s,dataset:f,onClick:v,preplyDsComponent:h=_.FormControl,useLegacyRequiredLabel:d=!1})=>{const b=x.useId(),i=t||b,y=j({id:i,error:e,description:l,hasError:c}),g=C(f,{preplyDsComponent:h});return a.jsxs("div",{className:r.container,...g,onClick:v,children:[a.jsxs("label",{htmlFor:i,className:r.label,"data-hidden":o||!n,"data-testid":"label",children:[n,!!d&&s&&a.jsxs("span",{"aria-hidden":!0,className:r.required,children:[" • ",a.jsx(u,{id:"preply-ds.fieldLabel.required",defaultMessage:"Required",description:"Form field required label"})]}),!d&&!s&&a.jsxs("span",{"aria-hidden":!0,className:r.required,children:[" • ",a.jsx(u,{id:"preply-ds.fieldLabel.optional",defaultMessage:"Optional",description:"Form field optional label"})]})]}),a.jsx(q,{id:i,required:s,...y,children:m}),e?a.jsx("p",{className:r.error,role:"alert",id:`${i}-error`,"data-testid":"error",children:e}):l?a.jsx("p",{className:r.description,id:`${i}-description`,"data-testid":"description",children:l}):null]})};try{p.displayName="FormControl",p.__docgenInfo={description:"FormControl component provides a consistent layout and accessibility\nfor the form fields. You can use it to create custom fields not supported\nby the DS yet.\n\nNote that FormControl will implicitly provide some props to the child component:\n\n- `id` forwarded from FormControl props or will be generated automatically for accessibility purposes;\n- `aria-invalid` and `aria-errormessage` when `error` is provided;\n- `aria-describedby` when `description` is provided;\n- `required` when FormControl's `required` is true;",displayName:"FormControl",props:{id:{defaultValue:null,description:`The id to be passed to the input element.
2
2
  If not provided, will be generated for accessibility purposes.`,name:"id",required:!1,type:{name:"enum",value:[{value:"string"}]}},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"}]}},description:{defaultValue:null,description:`Additional descriptive text that appears below the input field
3
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"}]}},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"}]}},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"}]}},required:{defaultValue:null,description:`Indicates if the field is required. When false, adds a "Optional"
4
4
  indicator next to the label.`,name:"required",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},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>"}]}},preplyDsComponent:{defaultValue:{value:"webComponentNames.FormControl"},description:`@deprecated The attribute is meant for internal usage only
@@ -1,4 +1,4 @@
1
- import{j as t}from"./jsx-runtime-BYouaCF_.js";import{F as x}from"./FormControl-DWCH9Hh-.js";import{d as r}from"./styled-components.browser.esm-CwsnEFnS.js";import{r as j}from"./index-B3evPFBL.js";import{I as k}from"./Icon-C3PbN7-O.js";import{F as $}from"./TokyoUIUpload-Bi3CuQzX.js";import{T as L}from"./Text-CH4wZQv6.js";import{g as e}from"./getTokenVar-DU_DEzTd.js";import{c as d,s as p,r as S}from"./tokens-ZvFzTwDp.js";import"./index-DRKYGVyc.js";import"./index-BfBdt3zW.js";import"./tslib.es6-BntfKcQG.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./index-DdzHuZ-Y.js";import"./message-BraTJ16C.js";import"./componentNames-CVVyamkx.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./text-accent-DZDDtpIt.js";import"./classNames-BUL1Zq7e.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-CVTdrNe-.js";import"./defaults-B1rzzf6M.js";import"./text-centered-CznToR0o.js";import"./constants-BgBLeZzp.js";const tt={title:"Components/FormControl",component:x,parameters:{layout:"padded"}},o=()=>{const b=r.input.attrs({type:"file"})`
1
+ import{j as t}from"./jsx-runtime-BYouaCF_.js";import{F as x}from"./FormControl-CeIJk4_Z.js";import{d as r}from"./styled-components.browser.esm-CwsnEFnS.js";import{r as j}from"./index-B3evPFBL.js";import{I as k}from"./Icon-ZIxauYsE.js";import{F as $}from"./TokyoUIUpload-Bi3CuQzX.js";import{T as L}from"./Text-BmdJVr9v.js";import{g as e}from"./getTokenVar-DU_DEzTd.js";import{c as d,s as p,r as S}from"./tokens-ZvFzTwDp.js";import"./index-DRKYGVyc.js";import"./index-BfBdt3zW.js";import"./tslib.es6-BntfKcQG.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./index-DdzHuZ-Y.js";import"./message-BraTJ16C.js";import"./componentNames-CpCJzpB9.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./text-accent-DZDDtpIt.js";import"./classNames-BUL1Zq7e.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-CVTdrNe-.js";import"./defaults-B1rzzf6M.js";import"./text-centered-CznToR0o.js";import"./constants-BgBLeZzp.js";const tt={title:"Components/FormControl",component:x,parameters:{layout:"padded"}},o=()=>{const b=r.input.attrs({type:"file"})`
2
2
  visibility: hidden;
3
3
  position: absolute;
4
4
  width: 0;
@@ -1,2 +1,2 @@
1
- import{j as x}from"./jsx-runtime-BYouaCF_.js";import{r as N}from"./index-B3evPFBL.js";import{g as b,a as C}from"./text-accent-DZDDtpIt.js";import{g as L}from"./text-centered-CznToR0o.js";import{f as T}from"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import{m as k,s as q,b as E}from"./classNames-BUL1Zq7e.js";import{w as i}from"./componentNames-CVVyamkx.js";import{g as U}from"./index-DdzHuZ-Y.js";const V="Heading__Erkb1",I={Heading:V,"Heading--level-h1-normal":"Heading--level-h1-normal__t2Kqc","Heading--level-h1-large":"Heading--level-h1-large__2-ENi","Heading--level-h2-normal":"Heading--level-h2-normal__VzetR","Heading--level-h2-large":"Heading--level-h2-large__NxpiQ","Heading--level-h3-normal":"Heading--level-h3-normal__vCnMS","Heading--level-h3-large":"Heading--level-h3-large__Vs-gN","Heading--level-h4-normal":"Heading--level-h4-normal__O6PPx","Heading--level-h4-large":"Heading--level-h4-large__fNZXP","Heading--level-h5-normal":"Heading--level-h5-normal__IMKhU","Heading--level-h5-large":"Heading--level-h5-large__G40j-","Heading--narrow-l--level-h1-normal":"Heading--narrow-l--level-h1-normal__1qZxP","Heading--narrow-l--level-h1-large":"Heading--narrow-l--level-h1-large__vhit5","Heading--narrow-l--level-h2-normal":"Heading--narrow-l--level-h2-normal__a2FJF","Heading--narrow-l--level-h2-large":"Heading--narrow-l--level-h2-large__qFLdx","Heading--narrow-l--level-h3-normal":"Heading--narrow-l--level-h3-normal__D2GNa","Heading--narrow-l--level-h3-large":"Heading--narrow-l--level-h3-large__xeciI","Heading--narrow-l--level-h4-normal":"Heading--narrow-l--level-h4-normal__G7nUl","Heading--narrow-l--level-h4-large":"Heading--narrow-l--level-h4-large__cL6he","Heading--narrow-l--level-h5-normal":"Heading--narrow-l--level-h5-normal__UNw3s","Heading--narrow-l--level-h5-large":"Heading--narrow-l--level-h5-large__o76Fo","Heading--medium-s--level-h1-normal":"Heading--medium-s--level-h1-normal__IGwXF","Heading--medium-s--level-h1-large":"Heading--medium-s--level-h1-large__y2QjY","Heading--medium-s--level-h2-normal":"Heading--medium-s--level-h2-normal__T5nXA","Heading--medium-s--level-h2-large":"Heading--medium-s--level-h2-large__FbGid","Heading--medium-s--level-h3-normal":"Heading--medium-s--level-h3-normal__dcenB","Heading--medium-s--level-h3-large":"Heading--medium-s--level-h3-large__AR-Fa","Heading--medium-s--level-h4-normal":"Heading--medium-s--level-h4-normal__-NI8n","Heading--medium-s--level-h4-large":"Heading--medium-s--level-h4-large__AE93N","Heading--medium-s--level-h5-normal":"Heading--medium-s--level-h5-normal__ZJEJ-","Heading--medium-s--level-h5-large":"Heading--medium-s--level-h5-large__GJ8sd","Heading--medium-l--level-h1-normal":"Heading--medium-l--level-h1-normal__UG7oa","Heading--medium-l--level-h1-large":"Heading--medium-l--level-h1-large__hJgJ9","Heading--medium-l--level-h2-normal":"Heading--medium-l--level-h2-normal__sf7Py","Heading--medium-l--level-h2-large":"Heading--medium-l--level-h2-large__iYIZ9","Heading--medium-l--level-h3-normal":"Heading--medium-l--level-h3-normal__32eny","Heading--medium-l--level-h3-large":"Heading--medium-l--level-h3-large__kuCwB","Heading--medium-l--level-h4-normal":"Heading--medium-l--level-h4-normal__TE1Eh","Heading--medium-l--level-h4-large":"Heading--medium-l--level-h4-large__zZfdz","Heading--medium-l--level-h5-normal":"Heading--medium-l--level-h5-normal__7HYFE","Heading--medium-l--level-h5-large":"Heading--medium-l--level-h5-large__NkY03","Heading--wide-s--level-h1-normal":"Heading--wide-s--level-h1-normal__kqRcj","Heading--wide-s--level-h1-large":"Heading--wide-s--level-h1-large__yzHzL","Heading--wide-s--level-h2-normal":"Heading--wide-s--level-h2-normal__b9MXd","Heading--wide-s--level-h2-large":"Heading--wide-s--level-h2-large__q0kXc","Heading--wide-s--level-h3-normal":"Heading--wide-s--level-h3-normal__Ziuj8","Heading--wide-s--level-h3-large":"Heading--wide-s--level-h3-large__Q4111","Heading--wide-s--level-h4-normal":"Heading--wide-s--level-h4-normal__TxCtT","Heading--wide-s--level-h4-large":"Heading--wide-s--level-h4-large__cQQZf","Heading--wide-s--level-h5-normal":"Heading--wide-s--level-h5-normal__ZSrD7","Heading--wide-s--level-h5-large":"Heading--wide-s--level-h5-large__ZuCIn","Heading--wide-l--level-h1-normal":"Heading--wide-l--level-h1-normal__MavHI","Heading--wide-l--level-h1-large":"Heading--wide-l--level-h1-large__rE1tu","Heading--wide-l--level-h2-normal":"Heading--wide-l--level-h2-normal__YUYcX","Heading--wide-l--level-h2-large":"Heading--wide-l--level-h2-large__v5ssH","Heading--wide-l--level-h3-normal":"Heading--wide-l--level-h3-normal__kQBs2","Heading--wide-l--level-h3-large":"Heading--wide-l--level-h3-large__pU-wX","Heading--wide-l--level-h4-normal":"Heading--wide-l--level-h4-normal__WvWGX","Heading--wide-l--level-h4-large":"Heading--wide-l--level-h4-large__TeFQp","Heading--wide-l--level-h5-normal":"Heading--wide-l--level-h5-normal__1yKda","Heading--wide-l--level-h5-large":"Heading--wide-l--level-h5-large__Uadr4","Heading--variant-massive":"Heading--variant-massive__JFGji","Heading--variant-huge":"Heading--variant-huge__47FQz","Heading--variant-extraLarge":"Heading--variant-extraLarge__xRrqx","Heading--variant-large":"Heading--variant-large__wNK6S","Heading--variant-medium":"Heading--variant-medium__bCNZ-","Heading--variant-small":"Heading--variant-small__308Nb","Heading--narrow-l--variant-massive":"Heading--narrow-l--variant-massive__yg4AJ","Heading--narrow-l--variant-huge":"Heading--narrow-l--variant-huge__y9b4N","Heading--narrow-l--variant-extraLarge":"Heading--narrow-l--variant-extraLarge__XgyJu","Heading--narrow-l--variant-large":"Heading--narrow-l--variant-large__tzTo6","Heading--narrow-l--variant-medium":"Heading--narrow-l--variant-medium__iP3sG","Heading--narrow-l--variant-small":"Heading--narrow-l--variant-small__KeKjn","Heading--medium-s--variant-massive":"Heading--medium-s--variant-massive__L-b4J","Heading--medium-s--variant-huge":"Heading--medium-s--variant-huge__2o5EA","Heading--medium-s--variant-extraLarge":"Heading--medium-s--variant-extraLarge__eHmYu","Heading--medium-s--variant-large":"Heading--medium-s--variant-large__AI3KL","Heading--medium-s--variant-medium":"Heading--medium-s--variant-medium__t5dUK","Heading--medium-s--variant-small":"Heading--medium-s--variant-small__fCdNa","Heading--medium-l--variant-massive":"Heading--medium-l--variant-massive__jI3FW","Heading--medium-l--variant-huge":"Heading--medium-l--variant-huge__k0UpW","Heading--medium-l--variant-extraLarge":"Heading--medium-l--variant-extraLarge__yfai7","Heading--medium-l--variant-large":"Heading--medium-l--variant-large__65QTG","Heading--medium-l--variant-medium":"Heading--medium-l--variant-medium__UvxHB","Heading--medium-l--variant-small":"Heading--medium-l--variant-small__QI2p2","Heading--wide-s--variant-massive":"Heading--wide-s--variant-massive__B1S84","Heading--wide-s--variant-huge":"Heading--wide-s--variant-huge__KvYrn","Heading--wide-s--variant-extraLarge":"Heading--wide-s--variant-extraLarge__TJs8l","Heading--wide-s--variant-large":"Heading--wide-s--variant-large__Wcc0E","Heading--wide-s--variant-medium":"Heading--wide-s--variant-medium__mONpk","Heading--wide-s--variant-small":"Heading--wide-s--variant-small__oRKSN","Heading--wide-l--variant-massive":"Heading--wide-l--variant-massive__twgw-","Heading--wide-l--variant-huge":"Heading--wide-l--variant-huge__DBuNF","Heading--wide-l--variant-extraLarge":"Heading--wide-l--variant-extraLarge__H9nEI","Heading--wide-l--variant-large":"Heading--wide-l--variant-large__kJarT","Heading--wide-l--variant-medium":"Heading--wide-l--variant-medium__VN27E","Heading--wide-l--variant-small":"Heading--wide-l--variant-small__Skmxk"},r=N.forwardRef(function({children:g,variant:a,accent:l,level:e,large:v=!1,tag:m,color:n,centered:u,dataset:t,id:s,...o},H){const _=m||e||"h1",h=k(I,i.Heading,a?q("variant",a):E(`level-${e}-large`,`level-${e}-normal`,v)),w=L(u),c=b(!(l?void 0:n),l),p=C(n),f=["preply-ds-heading",...h,...w,...c,...p],y={...T(o),className:f.join(" "),...U(t,{preplyDsComponent:i.Heading}),id:s,ref:H};return x.jsx(_,{...y,children:g})});try{r.displayName="Heading",r.__docgenInfo={description:"",displayName:"Heading",props:{strong:{defaultValue:null,description:"@deprecated The appropriate `font-weight` is automatically set",name:"strong",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},accent:{defaultValue:null,description:"",name:"accent",required:!1,type:{name:"enum",value:[{value:'"accent"'},{value:'"primary"'},{value:'"secondary"'},{value:'"tertiary"'},{value:'"accentDark"'},{value:'"placeholder"'},{value:'"inverted"'},{value:'"positive"'},{value:'"info"'},{value:'"warning"'},{value:'"critical"'},{value:'"disabled"'},{value:'"branded"'},{value:'"selected"'},{value:'"error"'}]}},color:{defaultValue:null,description:"@deprecated Use `accent` instead.",name:"color",required:!1,type:{name:"enum",value:[{value:'"white"'},{value:'"gray-100"'},{value:'"gray-200"'},{value:'"gray-300"'},{value:'"gray-400"'},{value:'"gray-500"'},{value:'"gray-600"'},{value:'"teal-100"'},{value:'"teal-200"'},{value:'"teal-300"'},{value:'"teal-400"'},{value:'"teal-500"'},{value:'"green-100"'},{value:'"green-200"'},{value:'"green-300"'},{value:'"green-400"'},{value:'"green-500"'},{value:'"yellow-100"'},{value:'"yellow-200"'},{value:'"yellow-300"'},{value:'"yellow-400"'},{value:'"yellow-500"'},{value:'"red-100"'},{value:'"red-200"'},{value:'"red-300"'},{value:'"red-400"'},{value:'"red-500"'},{value:'"blue-100"'},{value:'"blue-200"'},{value:'"blue-300"'},{value:'"blue-400"'},{value:'"blue-500"'},{value:'"magenta-100"'},{value:'"magenta-200"'},{value:'"magenta-300"'},{value:'"magenta-400"'},{value:'"magenta-500"'}]}},centered:{defaultValue:null,description:"",name:"centered",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"}]}},id:{defaultValue:null,description:"",name:"id",required:!1,type:{name:"enum",value:[{value:"string"}]}},level:{defaultValue:null,description:"@deprecated Use `variant` instead\n@deprecated Use `variant` instead",name:"level",required:!1,type:{name:"enum",value:[{value:'"h1"'},{value:'"h2"'},{value:'"h3"'},{value:'"h4"'},{value:'"h5"'}]}},large:{defaultValue:{value:"false"},description:`@deprecated There is no large version in Tokyo UI.
1
+ import{j as x}from"./jsx-runtime-BYouaCF_.js";import{r as N}from"./index-B3evPFBL.js";import{g as b,a as C}from"./text-accent-DZDDtpIt.js";import{g as L}from"./text-centered-CznToR0o.js";import{f as T}from"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import{m as k,s as q,b as E}from"./classNames-BUL1Zq7e.js";import{w as i}from"./componentNames-CpCJzpB9.js";import{g as U}from"./index-DdzHuZ-Y.js";const V="Heading__Erkb1",I={Heading:V,"Heading--level-h1-normal":"Heading--level-h1-normal__t2Kqc","Heading--level-h1-large":"Heading--level-h1-large__2-ENi","Heading--level-h2-normal":"Heading--level-h2-normal__VzetR","Heading--level-h2-large":"Heading--level-h2-large__NxpiQ","Heading--level-h3-normal":"Heading--level-h3-normal__vCnMS","Heading--level-h3-large":"Heading--level-h3-large__Vs-gN","Heading--level-h4-normal":"Heading--level-h4-normal__O6PPx","Heading--level-h4-large":"Heading--level-h4-large__fNZXP","Heading--level-h5-normal":"Heading--level-h5-normal__IMKhU","Heading--level-h5-large":"Heading--level-h5-large__G40j-","Heading--narrow-l--level-h1-normal":"Heading--narrow-l--level-h1-normal__1qZxP","Heading--narrow-l--level-h1-large":"Heading--narrow-l--level-h1-large__vhit5","Heading--narrow-l--level-h2-normal":"Heading--narrow-l--level-h2-normal__a2FJF","Heading--narrow-l--level-h2-large":"Heading--narrow-l--level-h2-large__qFLdx","Heading--narrow-l--level-h3-normal":"Heading--narrow-l--level-h3-normal__D2GNa","Heading--narrow-l--level-h3-large":"Heading--narrow-l--level-h3-large__xeciI","Heading--narrow-l--level-h4-normal":"Heading--narrow-l--level-h4-normal__G7nUl","Heading--narrow-l--level-h4-large":"Heading--narrow-l--level-h4-large__cL6he","Heading--narrow-l--level-h5-normal":"Heading--narrow-l--level-h5-normal__UNw3s","Heading--narrow-l--level-h5-large":"Heading--narrow-l--level-h5-large__o76Fo","Heading--medium-s--level-h1-normal":"Heading--medium-s--level-h1-normal__IGwXF","Heading--medium-s--level-h1-large":"Heading--medium-s--level-h1-large__y2QjY","Heading--medium-s--level-h2-normal":"Heading--medium-s--level-h2-normal__T5nXA","Heading--medium-s--level-h2-large":"Heading--medium-s--level-h2-large__FbGid","Heading--medium-s--level-h3-normal":"Heading--medium-s--level-h3-normal__dcenB","Heading--medium-s--level-h3-large":"Heading--medium-s--level-h3-large__AR-Fa","Heading--medium-s--level-h4-normal":"Heading--medium-s--level-h4-normal__-NI8n","Heading--medium-s--level-h4-large":"Heading--medium-s--level-h4-large__AE93N","Heading--medium-s--level-h5-normal":"Heading--medium-s--level-h5-normal__ZJEJ-","Heading--medium-s--level-h5-large":"Heading--medium-s--level-h5-large__GJ8sd","Heading--medium-l--level-h1-normal":"Heading--medium-l--level-h1-normal__UG7oa","Heading--medium-l--level-h1-large":"Heading--medium-l--level-h1-large__hJgJ9","Heading--medium-l--level-h2-normal":"Heading--medium-l--level-h2-normal__sf7Py","Heading--medium-l--level-h2-large":"Heading--medium-l--level-h2-large__iYIZ9","Heading--medium-l--level-h3-normal":"Heading--medium-l--level-h3-normal__32eny","Heading--medium-l--level-h3-large":"Heading--medium-l--level-h3-large__kuCwB","Heading--medium-l--level-h4-normal":"Heading--medium-l--level-h4-normal__TE1Eh","Heading--medium-l--level-h4-large":"Heading--medium-l--level-h4-large__zZfdz","Heading--medium-l--level-h5-normal":"Heading--medium-l--level-h5-normal__7HYFE","Heading--medium-l--level-h5-large":"Heading--medium-l--level-h5-large__NkY03","Heading--wide-s--level-h1-normal":"Heading--wide-s--level-h1-normal__kqRcj","Heading--wide-s--level-h1-large":"Heading--wide-s--level-h1-large__yzHzL","Heading--wide-s--level-h2-normal":"Heading--wide-s--level-h2-normal__b9MXd","Heading--wide-s--level-h2-large":"Heading--wide-s--level-h2-large__q0kXc","Heading--wide-s--level-h3-normal":"Heading--wide-s--level-h3-normal__Ziuj8","Heading--wide-s--level-h3-large":"Heading--wide-s--level-h3-large__Q4111","Heading--wide-s--level-h4-normal":"Heading--wide-s--level-h4-normal__TxCtT","Heading--wide-s--level-h4-large":"Heading--wide-s--level-h4-large__cQQZf","Heading--wide-s--level-h5-normal":"Heading--wide-s--level-h5-normal__ZSrD7","Heading--wide-s--level-h5-large":"Heading--wide-s--level-h5-large__ZuCIn","Heading--wide-l--level-h1-normal":"Heading--wide-l--level-h1-normal__MavHI","Heading--wide-l--level-h1-large":"Heading--wide-l--level-h1-large__rE1tu","Heading--wide-l--level-h2-normal":"Heading--wide-l--level-h2-normal__YUYcX","Heading--wide-l--level-h2-large":"Heading--wide-l--level-h2-large__v5ssH","Heading--wide-l--level-h3-normal":"Heading--wide-l--level-h3-normal__kQBs2","Heading--wide-l--level-h3-large":"Heading--wide-l--level-h3-large__pU-wX","Heading--wide-l--level-h4-normal":"Heading--wide-l--level-h4-normal__WvWGX","Heading--wide-l--level-h4-large":"Heading--wide-l--level-h4-large__TeFQp","Heading--wide-l--level-h5-normal":"Heading--wide-l--level-h5-normal__1yKda","Heading--wide-l--level-h5-large":"Heading--wide-l--level-h5-large__Uadr4","Heading--variant-massive":"Heading--variant-massive__JFGji","Heading--variant-huge":"Heading--variant-huge__47FQz","Heading--variant-extraLarge":"Heading--variant-extraLarge__xRrqx","Heading--variant-large":"Heading--variant-large__wNK6S","Heading--variant-medium":"Heading--variant-medium__bCNZ-","Heading--variant-small":"Heading--variant-small__308Nb","Heading--narrow-l--variant-massive":"Heading--narrow-l--variant-massive__yg4AJ","Heading--narrow-l--variant-huge":"Heading--narrow-l--variant-huge__y9b4N","Heading--narrow-l--variant-extraLarge":"Heading--narrow-l--variant-extraLarge__XgyJu","Heading--narrow-l--variant-large":"Heading--narrow-l--variant-large__tzTo6","Heading--narrow-l--variant-medium":"Heading--narrow-l--variant-medium__iP3sG","Heading--narrow-l--variant-small":"Heading--narrow-l--variant-small__KeKjn","Heading--medium-s--variant-massive":"Heading--medium-s--variant-massive__L-b4J","Heading--medium-s--variant-huge":"Heading--medium-s--variant-huge__2o5EA","Heading--medium-s--variant-extraLarge":"Heading--medium-s--variant-extraLarge__eHmYu","Heading--medium-s--variant-large":"Heading--medium-s--variant-large__AI3KL","Heading--medium-s--variant-medium":"Heading--medium-s--variant-medium__t5dUK","Heading--medium-s--variant-small":"Heading--medium-s--variant-small__fCdNa","Heading--medium-l--variant-massive":"Heading--medium-l--variant-massive__jI3FW","Heading--medium-l--variant-huge":"Heading--medium-l--variant-huge__k0UpW","Heading--medium-l--variant-extraLarge":"Heading--medium-l--variant-extraLarge__yfai7","Heading--medium-l--variant-large":"Heading--medium-l--variant-large__65QTG","Heading--medium-l--variant-medium":"Heading--medium-l--variant-medium__UvxHB","Heading--medium-l--variant-small":"Heading--medium-l--variant-small__QI2p2","Heading--wide-s--variant-massive":"Heading--wide-s--variant-massive__B1S84","Heading--wide-s--variant-huge":"Heading--wide-s--variant-huge__KvYrn","Heading--wide-s--variant-extraLarge":"Heading--wide-s--variant-extraLarge__TJs8l","Heading--wide-s--variant-large":"Heading--wide-s--variant-large__Wcc0E","Heading--wide-s--variant-medium":"Heading--wide-s--variant-medium__mONpk","Heading--wide-s--variant-small":"Heading--wide-s--variant-small__oRKSN","Heading--wide-l--variant-massive":"Heading--wide-l--variant-massive__twgw-","Heading--wide-l--variant-huge":"Heading--wide-l--variant-huge__DBuNF","Heading--wide-l--variant-extraLarge":"Heading--wide-l--variant-extraLarge__H9nEI","Heading--wide-l--variant-large":"Heading--wide-l--variant-large__kJarT","Heading--wide-l--variant-medium":"Heading--wide-l--variant-medium__VN27E","Heading--wide-l--variant-small":"Heading--wide-l--variant-small__Skmxk"},r=N.forwardRef(function({children:g,variant:a,accent:l,level:e,large:v=!1,tag:m,color:n,centered:u,dataset:t,id:s,...o},H){const _=m||e||"h1",h=k(I,i.Heading,a?q("variant",a):E(`level-${e}-large`,`level-${e}-normal`,v)),w=L(u),c=b(!(l?void 0:n),l),p=C(n),f=["preply-ds-heading",...h,...w,...c,...p],y={...T(o),className:f.join(" "),...U(t,{preplyDsComponent:i.Heading}),id:s,ref:H};return x.jsx(_,{...y,children:g})});try{r.displayName="Heading",r.__docgenInfo={description:"",displayName:"Heading",props:{strong:{defaultValue:null,description:"@deprecated The appropriate `font-weight` is automatically set",name:"strong",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},accent:{defaultValue:null,description:"",name:"accent",required:!1,type:{name:"enum",value:[{value:'"accent"'},{value:'"primary"'},{value:'"secondary"'},{value:'"tertiary"'},{value:'"accentDark"'},{value:'"placeholder"'},{value:'"inverted"'},{value:'"positive"'},{value:'"info"'},{value:'"warning"'},{value:'"critical"'},{value:'"disabled"'},{value:'"branded"'},{value:'"selected"'},{value:'"error"'}]}},color:{defaultValue:null,description:"@deprecated Use `accent` instead.",name:"color",required:!1,type:{name:"enum",value:[{value:'"white"'},{value:'"gray-100"'},{value:'"gray-200"'},{value:'"gray-300"'},{value:'"gray-400"'},{value:'"gray-500"'},{value:'"gray-600"'},{value:'"teal-100"'},{value:'"teal-200"'},{value:'"teal-300"'},{value:'"teal-400"'},{value:'"teal-500"'},{value:'"green-100"'},{value:'"green-200"'},{value:'"green-300"'},{value:'"green-400"'},{value:'"green-500"'},{value:'"yellow-100"'},{value:'"yellow-200"'},{value:'"yellow-300"'},{value:'"yellow-400"'},{value:'"yellow-500"'},{value:'"red-100"'},{value:'"red-200"'},{value:'"red-300"'},{value:'"red-400"'},{value:'"red-500"'},{value:'"blue-100"'},{value:'"blue-200"'},{value:'"blue-300"'},{value:'"blue-400"'},{value:'"blue-500"'},{value:'"magenta-100"'},{value:'"magenta-200"'},{value:'"magenta-300"'},{value:'"magenta-400"'},{value:'"magenta-500"'}]}},centered:{defaultValue:null,description:"",name:"centered",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"}]}},id:{defaultValue:null,description:"",name:"id",required:!1,type:{name:"enum",value:[{value:"string"}]}},level:{defaultValue:null,description:"@deprecated Use `variant` instead\n@deprecated Use `variant` instead",name:"level",required:!1,type:{name:"enum",value:[{value:'"h1"'},{value:'"h2"'},{value:'"h3"'},{value:'"h4"'},{value:'"h5"'}]}},large:{defaultValue:{value:"false"},description:`@deprecated There is no large version in Tokyo UI.
2
2
  @deprecated There is no large version in Tokyo UI.`,name:"large",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:'"h1"'},{value:'"h2"'},{value:'"h3"'},{value:'"h4"'},{value:'"h5"'},{value:'"p"'},{value:'"div"'},{value:'"span"'}]}},variant:{defaultValue:null,description:"",name:"variant",required:!1,type:{name:"enum",value:[{value:'"large"'},{value:'"massive"'},{value:'"huge"'},{value:'"extraLarge"'},{value:'"medium"'},{value:'"small"'},{value:"ResponsiveProp<HeadingVariant>"}]}},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: HTMLHeadingElement | null) => void"},{value:"RefObject<HTMLHeadingElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}export{r as H};
@@ -1,4 +1,4 @@
1
- import{j as a}from"./jsx-runtime-BYouaCF_.js";import{H as e}from"./Heading-sy1TMpjs.js";import{S as s}from"./consts-KAYct7Gj.js";import"./index-B3evPFBL.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./text-accent-DZDDtpIt.js";import"./classNames-BUL1Zq7e.js";import"./text-centered-CznToR0o.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./componentNames-CVVyamkx.js";import"./index-DdzHuZ-Y.js";const T={title:"components/Heading",component:e,argTypes:{centered:{description:s},variant:{description:s}}},r=()=>a.jsxs("div",{style:{padding:"16px",display:"grid",gridTemplateColumns:"auto 3fr",alignItems:"center",gap:"16px"},children:[a.jsx("span",{children:"h1 / massive"}),a.jsx(e,{tag:"h1",variant:"massive",children:"Lorem ipsum"}),a.jsx("span",{children:"h2 / huge"}),a.jsx(e,{tag:"h2",variant:"huge",children:"Lorem ipsum"}),a.jsx("span",{children:"h3 / extraLarge"}),a.jsx(e,{tag:"h3",variant:"extraLarge",children:"Lorem ipsum"}),a.jsx("span",{children:"h4 / large"}),a.jsx(e,{tag:"h4",variant:"large",children:"Lorem ipsum"}),a.jsx("span",{children:"h5 / medium"}),a.jsx(e,{tag:"h5",variant:"medium",children:"Lorem ipsum"}),a.jsx("span",{children:"p / small"}),a.jsx(e,{tag:"p",variant:"small",children:"Lorem ipsum"})]}),n={parameters:{chromatic:{disableSnapshot:!0}},decorators:[(m,{args:g})=>a.jsx("div",{style:{backgroundColor:g.accent==="inverted"?"black":void 0},children:m()})],args:{tag:"h1",variant:"massive",children:"Lorem ipsum",dataset:{qaid:"heading"}},argTypes:{centered:{control:"boolean"},dataset:{control:"object"},strong:{table:{disable:!0}},level:{table:{disable:!0}},color:{table:{disable:!0}},large:{table:{disable:!0}}}};var t,i,o;r.parameters={...r.parameters,docs:{...(t=r.parameters)==null?void 0:t.docs,source:{originalSource:`() => <div style={{
1
+ import{j as a}from"./jsx-runtime-BYouaCF_.js";import{H as e}from"./Heading-kRKueEJE.js";import{S as s}from"./consts-KAYct7Gj.js";import"./index-B3evPFBL.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./text-accent-DZDDtpIt.js";import"./classNames-BUL1Zq7e.js";import"./text-centered-CznToR0o.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./componentNames-CpCJzpB9.js";import"./index-DdzHuZ-Y.js";const T={title:"components/Heading",component:e,argTypes:{centered:{description:s},variant:{description:s}}},r=()=>a.jsxs("div",{style:{padding:"16px",display:"grid",gridTemplateColumns:"auto 3fr",alignItems:"center",gap:"16px"},children:[a.jsx("span",{children:"h1 / massive"}),a.jsx(e,{tag:"h1",variant:"massive",children:"Lorem ipsum"}),a.jsx("span",{children:"h2 / huge"}),a.jsx(e,{tag:"h2",variant:"huge",children:"Lorem ipsum"}),a.jsx("span",{children:"h3 / extraLarge"}),a.jsx(e,{tag:"h3",variant:"extraLarge",children:"Lorem ipsum"}),a.jsx("span",{children:"h4 / large"}),a.jsx(e,{tag:"h4",variant:"large",children:"Lorem ipsum"}),a.jsx("span",{children:"h5 / medium"}),a.jsx(e,{tag:"h5",variant:"medium",children:"Lorem ipsum"}),a.jsx("span",{children:"p / small"}),a.jsx(e,{tag:"p",variant:"small",children:"Lorem ipsum"})]}),n={parameters:{chromatic:{disableSnapshot:!0}},decorators:[(m,{args:g})=>a.jsx("div",{style:{backgroundColor:g.accent==="inverted"?"black":void 0},children:m()})],args:{tag:"h1",variant:"massive",children:"Lorem ipsum",dataset:{qaid:"heading"}},argTypes:{centered:{control:"boolean"},dataset:{control:"object"},strong:{table:{disable:!0}},level:{table:{disable:!0}},color:{table:{disable:!0}},large:{table:{disable:!0}}}};var t,i,o;r.parameters={...r.parameters,docs:{...(t=r.parameters)==null?void 0:t.docs,source:{originalSource:`() => <div style={{
2
2
  padding: '16px',
3
3
  display: 'grid',
4
4
  gridTemplateColumns: 'auto 3fr',
@@ -1 +1 @@
1
- import{j as b}from"./jsx-runtime-BYouaCF_.js";import{r as w}from"./index-B3evPFBL.js";import{g as f,a as N}from"./text-centered-C0V1O_Sd.js";import{f as k}from"./filterAttributesPassedByRadixUIAtRuntime-Bye2JkZ0.js";import{r as z}from"./render-icon-CwRdpin3.js";import{m as _,s as h,b as P}from"./classNames-BUL1Zq7e.js";import{I as U}from"./defaults-B1rzzf6M.js";import{w as c}from"./componentNames-CVVyamkx.js";import{g as D}from"./index-DdzHuZ-Y.js";const K="ExpColor__S0PGo",S={ExpColor:K,"ExpColor--exp-color-grey-0":"ExpColor--exp-color-grey-0__DKudt","ExpColor--exp-color-grey-50":"ExpColor--exp-color-grey-50__lo7OH","ExpColor--exp-color-grey-100":"ExpColor--exp-color-grey-100__EtBtx","ExpColor--exp-color-grey-200":"ExpColor--exp-color-grey-200__KHF8X","ExpColor--exp-color-grey-300":"ExpColor--exp-color-grey-300__0u63D","ExpColor--exp-color-grey-400":"ExpColor--exp-color-grey-400__WaJzi","ExpColor--exp-color-grey-500":"ExpColor--exp-color-grey-500__1RSHd","ExpColor--exp-color-grey-600":"ExpColor--exp-color-grey-600__95yQU","ExpColor--exp-color-grey-700":"ExpColor--exp-color-grey-700__SSayo","ExpColor--exp-color-grey-800":"ExpColor--exp-color-grey-800__15Bou","ExpColor--exp-color-grey-900":"ExpColor--exp-color-grey-900__BKw9C","ExpColor--exp-color-pink-50":"ExpColor--exp-color-pink-50__SZLGx","ExpColor--exp-color-pink-100":"ExpColor--exp-color-pink-100__J0yFM","ExpColor--exp-color-pink-200":"ExpColor--exp-color-pink-200__dQ0mZ","ExpColor--exp-color-pink-300":"ExpColor--exp-color-pink-300__WYBWX","ExpColor--exp-color-pink-400":"ExpColor--exp-color-pink-400__7Jazs","ExpColor--exp-color-pink-500":"ExpColor--exp-color-pink-500__4X2bs","ExpColor--exp-color-pink-600":"ExpColor--exp-color-pink-600__Ph3VO","ExpColor--exp-color-pink-700":"ExpColor--exp-color-pink-700__nLJd1","ExpColor--exp-color-pink-800":"ExpColor--exp-color-pink-800__-fD0l","ExpColor--exp-color-yellow-50":"ExpColor--exp-color-yellow-50__EYcxx","ExpColor--exp-color-yellow-100":"ExpColor--exp-color-yellow-100__8n-ZP","ExpColor--exp-color-yellow-200":"ExpColor--exp-color-yellow-200__eOMK3","ExpColor--exp-color-yellow-300":"ExpColor--exp-color-yellow-300__JbUZg","ExpColor--exp-color-yellow-400":"ExpColor--exp-color-yellow-400__7NrMJ","ExpColor--exp-color-yellow-500":"ExpColor--exp-color-yellow-500__a3k-Q","ExpColor--exp-color-yellow-600":"ExpColor--exp-color-yellow-600__xBk-i","ExpColor--exp-color-yellow-700":"ExpColor--exp-color-yellow-700__xw4Kd","ExpColor--exp-color-yellow-800":"ExpColor--exp-color-yellow-800__vZmXG","ExpColor--exp-color-blue-50":"ExpColor--exp-color-blue-50__s2FXt","ExpColor--exp-color-blue-100":"ExpColor--exp-color-blue-100__TzrMW","ExpColor--exp-color-blue-200":"ExpColor--exp-color-blue-200__sVncU","ExpColor--exp-color-blue-300":"ExpColor--exp-color-blue-300__ooY38","ExpColor--exp-color-blue-400":"ExpColor--exp-color-blue-400__GGuoL","ExpColor--exp-color-blue-500":"ExpColor--exp-color-blue-500__N2NW9","ExpColor--exp-color-blue-600":"ExpColor--exp-color-blue-600__q-8xU","ExpColor--exp-color-blue-700":"ExpColor--exp-color-blue-700__5k-Gw","ExpColor--exp-color-blue-800":"ExpColor--exp-color-blue-800__MCpJf","ExpColor--exp-color-teal-50":"ExpColor--exp-color-teal-50__P9v3-","ExpColor--exp-color-teal-100":"ExpColor--exp-color-teal-100__Y8xbj","ExpColor--exp-color-teal-200":"ExpColor--exp-color-teal-200__yzxAu","ExpColor--exp-color-teal-300":"ExpColor--exp-color-teal-300__CC-oK","ExpColor--exp-color-teal-400":"ExpColor--exp-color-teal-400__fBHUW","ExpColor--exp-color-teal-500":"ExpColor--exp-color-teal-500__qt3Ny","ExpColor--exp-color-teal-600":"ExpColor--exp-color-teal-600__5EF-y","ExpColor--exp-color-teal-700":"ExpColor--exp-color-teal-700__o0qGK","ExpColor--exp-color-teal-800":"ExpColor--exp-color-teal-800__dntGK","ExpColor--exp-color-red-50":"ExpColor--exp-color-red-50__QFm4H","ExpColor--exp-color-red-100":"ExpColor--exp-color-red-100__gQ36l","ExpColor--exp-color-red-200":"ExpColor--exp-color-red-200__N7c7P","ExpColor--exp-color-red-300":"ExpColor--exp-color-red-300__uhkUo","ExpColor--exp-color-red-400":"ExpColor--exp-color-red-400__cNgdd","ExpColor--exp-color-red-500":"ExpColor--exp-color-red-500__VMSdk","ExpColor--exp-color-red-600":"ExpColor--exp-color-red-600__In2gH","ExpColor--exp-color-red-700":"ExpColor--exp-color-red-700__DPnKE","ExpColor--exp-color-red-800":"ExpColor--exp-color-red-800__MkRFA"},F="ExpColor",G=r=>_(S,F,[h("exp-color",r)]),M="Icon__jDdMD",v={Icon:M,"Icon--size-2xs":"Icon--size-2xs__3r954","Icon--size-xs":"Icon--size-xs__Fcq73","Icon--size-s":"Icon--size-s__bQoUv","Icon--size-m":"Icon--size-m__7Z05l","Icon--size-l":"Icon--size-l__2o-6h","Icon--size-16":"Icon--size-16__P1SXI","Icon--size-24":"Icon--size-24__vnVQ0","Icon--size-32":"Icon--size-32__gHIna","Icon--size-48":"Icon--size-48__0PUAE"},A=w.forwardRef(function({svg:e,size:o=U,accent:l,expColor:C,color:E,label:p,dataset:s,...n},a){const x=!Number.isNaN(Number(o)),t=x?{width:`${o}px`,height:`${o}px`}:{},i=_(v,c.Icon,[P(`size-${o}`,void 0,!x)]),y=l?void 0:E,m=f(!1,l),d=N(y),u=l?[]:G(C),g=[...i,...m,...d,...u],I={...k(n),className:g.join(" "),...D(s,{preplyDsComponent:c.Icon}),ref:a};if(!e)throw new Error("Icon prop svg is mandatory");return b.jsx("span",{...I,role:"img",style:t,"aria-hidden":!p,"aria-label":p,children:z(e,{"aria-hidden":"true",focusable:"false"})})});A.__docgenInfo={description:"",methods:[],displayName:"Icon",props:{size:{defaultValue:{value:"'s'",computed:!1},required:!1}}};export{A as I};
1
+ import{j as b}from"./jsx-runtime-BYouaCF_.js";import{r as w}from"./index-B3evPFBL.js";import{g as f,a as N}from"./text-centered-C0V1O_Sd.js";import{f as k}from"./filterAttributesPassedByRadixUIAtRuntime-Bye2JkZ0.js";import{r as z}from"./render-icon-CwRdpin3.js";import{m as _,s as h,b as P}from"./classNames-BUL1Zq7e.js";import{I as U}from"./defaults-B1rzzf6M.js";import{w as c}from"./componentNames-CpCJzpB9.js";import{g as D}from"./index-DdzHuZ-Y.js";const K="ExpColor__S0PGo",S={ExpColor:K,"ExpColor--exp-color-grey-0":"ExpColor--exp-color-grey-0__DKudt","ExpColor--exp-color-grey-50":"ExpColor--exp-color-grey-50__lo7OH","ExpColor--exp-color-grey-100":"ExpColor--exp-color-grey-100__EtBtx","ExpColor--exp-color-grey-200":"ExpColor--exp-color-grey-200__KHF8X","ExpColor--exp-color-grey-300":"ExpColor--exp-color-grey-300__0u63D","ExpColor--exp-color-grey-400":"ExpColor--exp-color-grey-400__WaJzi","ExpColor--exp-color-grey-500":"ExpColor--exp-color-grey-500__1RSHd","ExpColor--exp-color-grey-600":"ExpColor--exp-color-grey-600__95yQU","ExpColor--exp-color-grey-700":"ExpColor--exp-color-grey-700__SSayo","ExpColor--exp-color-grey-800":"ExpColor--exp-color-grey-800__15Bou","ExpColor--exp-color-grey-900":"ExpColor--exp-color-grey-900__BKw9C","ExpColor--exp-color-pink-50":"ExpColor--exp-color-pink-50__SZLGx","ExpColor--exp-color-pink-100":"ExpColor--exp-color-pink-100__J0yFM","ExpColor--exp-color-pink-200":"ExpColor--exp-color-pink-200__dQ0mZ","ExpColor--exp-color-pink-300":"ExpColor--exp-color-pink-300__WYBWX","ExpColor--exp-color-pink-400":"ExpColor--exp-color-pink-400__7Jazs","ExpColor--exp-color-pink-500":"ExpColor--exp-color-pink-500__4X2bs","ExpColor--exp-color-pink-600":"ExpColor--exp-color-pink-600__Ph3VO","ExpColor--exp-color-pink-700":"ExpColor--exp-color-pink-700__nLJd1","ExpColor--exp-color-pink-800":"ExpColor--exp-color-pink-800__-fD0l","ExpColor--exp-color-yellow-50":"ExpColor--exp-color-yellow-50__EYcxx","ExpColor--exp-color-yellow-100":"ExpColor--exp-color-yellow-100__8n-ZP","ExpColor--exp-color-yellow-200":"ExpColor--exp-color-yellow-200__eOMK3","ExpColor--exp-color-yellow-300":"ExpColor--exp-color-yellow-300__JbUZg","ExpColor--exp-color-yellow-400":"ExpColor--exp-color-yellow-400__7NrMJ","ExpColor--exp-color-yellow-500":"ExpColor--exp-color-yellow-500__a3k-Q","ExpColor--exp-color-yellow-600":"ExpColor--exp-color-yellow-600__xBk-i","ExpColor--exp-color-yellow-700":"ExpColor--exp-color-yellow-700__xw4Kd","ExpColor--exp-color-yellow-800":"ExpColor--exp-color-yellow-800__vZmXG","ExpColor--exp-color-blue-50":"ExpColor--exp-color-blue-50__s2FXt","ExpColor--exp-color-blue-100":"ExpColor--exp-color-blue-100__TzrMW","ExpColor--exp-color-blue-200":"ExpColor--exp-color-blue-200__sVncU","ExpColor--exp-color-blue-300":"ExpColor--exp-color-blue-300__ooY38","ExpColor--exp-color-blue-400":"ExpColor--exp-color-blue-400__GGuoL","ExpColor--exp-color-blue-500":"ExpColor--exp-color-blue-500__N2NW9","ExpColor--exp-color-blue-600":"ExpColor--exp-color-blue-600__q-8xU","ExpColor--exp-color-blue-700":"ExpColor--exp-color-blue-700__5k-Gw","ExpColor--exp-color-blue-800":"ExpColor--exp-color-blue-800__MCpJf","ExpColor--exp-color-teal-50":"ExpColor--exp-color-teal-50__P9v3-","ExpColor--exp-color-teal-100":"ExpColor--exp-color-teal-100__Y8xbj","ExpColor--exp-color-teal-200":"ExpColor--exp-color-teal-200__yzxAu","ExpColor--exp-color-teal-300":"ExpColor--exp-color-teal-300__CC-oK","ExpColor--exp-color-teal-400":"ExpColor--exp-color-teal-400__fBHUW","ExpColor--exp-color-teal-500":"ExpColor--exp-color-teal-500__qt3Ny","ExpColor--exp-color-teal-600":"ExpColor--exp-color-teal-600__5EF-y","ExpColor--exp-color-teal-700":"ExpColor--exp-color-teal-700__o0qGK","ExpColor--exp-color-teal-800":"ExpColor--exp-color-teal-800__dntGK","ExpColor--exp-color-red-50":"ExpColor--exp-color-red-50__QFm4H","ExpColor--exp-color-red-100":"ExpColor--exp-color-red-100__gQ36l","ExpColor--exp-color-red-200":"ExpColor--exp-color-red-200__N7c7P","ExpColor--exp-color-red-300":"ExpColor--exp-color-red-300__uhkUo","ExpColor--exp-color-red-400":"ExpColor--exp-color-red-400__cNgdd","ExpColor--exp-color-red-500":"ExpColor--exp-color-red-500__VMSdk","ExpColor--exp-color-red-600":"ExpColor--exp-color-red-600__In2gH","ExpColor--exp-color-red-700":"ExpColor--exp-color-red-700__DPnKE","ExpColor--exp-color-red-800":"ExpColor--exp-color-red-800__MkRFA"},F="ExpColor",G=r=>_(S,F,[h("exp-color",r)]),M="Icon__jDdMD",v={Icon:M,"Icon--size-2xs":"Icon--size-2xs__3r954","Icon--size-xs":"Icon--size-xs__Fcq73","Icon--size-s":"Icon--size-s__bQoUv","Icon--size-m":"Icon--size-m__7Z05l","Icon--size-l":"Icon--size-l__2o-6h","Icon--size-16":"Icon--size-16__P1SXI","Icon--size-24":"Icon--size-24__vnVQ0","Icon--size-32":"Icon--size-32__gHIna","Icon--size-48":"Icon--size-48__0PUAE"},A=w.forwardRef(function({svg:e,size:o=U,accent:l,expColor:C,color:E,label:p,dataset:s,...n},a){const x=!Number.isNaN(Number(o)),t=x?{width:`${o}px`,height:`${o}px`}:{},i=_(v,c.Icon,[P(`size-${o}`,void 0,!x)]),y=l?void 0:E,m=f(!1,l),d=N(y),u=l?[]:G(C),g=[...i,...m,...d,...u],I={...k(n),className:g.join(" "),...D(s,{preplyDsComponent:c.Icon}),ref:a};if(!e)throw new Error("Icon prop svg is mandatory");return b.jsx("span",{...I,role:"img",style:t,"aria-hidden":!p,"aria-label":p,children:z(e,{"aria-hidden":"true",focusable:"false"})})});A.__docgenInfo={description:"",methods:[],displayName:"Icon",props:{size:{defaultValue:{value:"'s'",computed:!1},required:!1}}};export{A as I};
@@ -1,4 +1,4 @@
1
- import{j as o}from"./jsx-runtime-BYouaCF_.js";import{useMDXComponents as n}from"./index-uOP2uDdf.js";import{M as m,S as s}from"./index-D7MP9XPf.js";import{ServerComponent as i}from"./Icon.stories-Dalhjiqr.js";import"./index-B3evPFBL.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./iframe-HKl8oQjn.js";import"./index-jEDObK_5.js";import"./index-C66nt8TK.js";import"./index-Cu4lwwaE.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";import"./TokyoUINotesWithPad-Bqcca_-M.js";import"./Icon-C3PbN7-O.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"./options-Dn0Ts6qK.js";function r(t){const e={code:"code",h1:"h1",p:"p",pre:"pre",...n(),...t.components};return o.jsxs(o.Fragment,{children:[o.jsx(m,{title:"components/Icon/Server Component"}),`
1
+ import{j as o}from"./jsx-runtime-BYouaCF_.js";import{useMDXComponents as n}from"./index-uOP2uDdf.js";import{M as m,S as s}from"./index-CRsQDyyQ.js";import{ServerComponent as i}from"./Icon.stories-Cv6aq9BI.js";import"./index-B3evPFBL.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./iframe-ZI8HwEVB.js";import"./index-jEDObK_5.js";import"./index-C66nt8TK.js";import"./index-Cu4lwwaE.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";import"./TokyoUINotesWithPad-Bqcca_-M.js";import"./Icon-ZIxauYsE.js";import"./text-accent-DZDDtpIt.js";import"./classNames-BUL1Zq7e.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-CVTdrNe-.js";import"./componentNames-CpCJzpB9.js";import"./index-DdzHuZ-Y.js";import"./defaults-B1rzzf6M.js";import"./options-Dn0Ts6qK.js";function r(t){const e={code:"code",h1:"h1",p:"p",pre:"pre",...n(),...t.components};return o.jsxs(o.Fragment,{children:[o.jsx(m,{title:"components/Icon/Server Component"}),`
2
2
  `,o.jsx(e.h1,{id:"use-icon-as-react-server-component",children:"Use Icon as react server component"}),`
3
3
  `,o.jsxs(e.p,{children:["To use Icon as react server component, provide ",o.jsx(e.code,{children:"svg"})," as element:"]}),`
4
4
  `,o.jsx(s,{of:i}),`