@preply/ds-docs 3.1.1-beta.060c7778978d1ba1488656e79c5f79997a641cf1.0 → 3.1.1-beta.857b0ab30a03b836ac6c63997eeb17f464e3510c.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 (145) hide show
  1. package/dist/assets/{00.LayoutFlex.stories-YROUuJkm.js → 00.LayoutFlex.stories-Dx9Eo2na.js} +1 -1
  2. package/dist/assets/{00.applications-BPe3Juew.js → 00.applications-4_kAf65R.js} +1 -1
  3. package/dist/assets/{00.favicons.guide-DWDWSitD.js → 00.favicons.guide-WmsjYzsU.js} +1 -1
  4. package/dist/assets/{00.token-explorer-DlqZUQi1.js → 00.token-explorer-DDWWO9yw.js} +1 -1
  5. package/dist/assets/{00.using-responsive-props-BZFzeMkI.js → 00.using-responsive-props-Db1CE2Bn.js} +1 -1
  6. package/dist/assets/{01.semantic-tokens-B_maulUL.js → 01.semantic-tokens-BGh7M0eY.js} +1 -1
  7. package/dist/assets/{01.using-shorthand-props-CSdvELZ-.js → 01.using-shorthand-props-DlhDhuqe.js} +1 -1
  8. package/dist/assets/10.Combinations.stories-Wf-NooK0.js +144 -0
  9. package/dist/assets/{10.fonts.guide-BLGdEszm.js → 10.fonts.guide-9-b6LwTC.js} +1 -1
  10. package/dist/assets/{10.ssr-D2wS7usx.js → 10.ssr-VCBg9dbk.js} +1 -1
  11. package/dist/assets/{11.languageFont.explorer-CYToRovn.js → 11.languageFont.explorer-fCUE9Req.js} +1 -1
  12. package/dist/assets/{11.ssr.app-router-CCyVK3T0.js → 11.ssr.app-router-DK46wtcG.js} +1 -1
  13. package/dist/assets/{20.libraries-BSl9ePSH.js → 20.libraries-FpWvhQac.js} +1 -1
  14. package/dist/assets/{30.icons.explorer-CbyFZ1KX.js → 30.icons.explorer-CIrIe9zZ.js} +1 -1
  15. package/dist/assets/{30.storybook-DQuFtvdR.js → 30.storybook-8XKIrOG2.js} +1 -1
  16. package/dist/assets/{40.illustrations.explorer-ZH_64QsN.js → 40.illustrations.explorer-DWDPZG1O.js} +1 -1
  17. package/dist/assets/{90.advanced-B8SjZIIy.js → 90.advanced-BrSJ75kb.js} +1 -1
  18. package/dist/assets/{Accordion-CVZIOGNR.js → Accordion-Bn_7bQpK.js} +3 -3
  19. package/dist/assets/{Accordion.stories-o4h_sY0V.js → Accordion.stories-IHPoH-rI.js} +1 -1
  20. package/dist/assets/{Accordion.tests.stories-DqGSOkGv.js → Accordion.tests.stories-D80ku7JR.js} +1 -1
  21. package/dist/assets/{AlertDialog.stories-BuacQngv.js → AlertDialog.stories-BDaUfcmP.js} +1 -1
  22. package/dist/assets/{Avatar-D_mKYr5W.js → Avatar-BkCAqOuF.js} +1 -1
  23. package/dist/assets/{Avatar--Me1wFbM.js → Avatar-D6BKQVaH.js} +1 -1
  24. package/dist/assets/{Avatar.stories-CGQDYNGY.js → Avatar.stories-DnjfAeSV.js} +1 -1
  25. package/dist/assets/{AvatarWithStatus.stories-5qjPY64Z.js → AvatarWithStatus.stories-CocgTI5A.js} +1 -1
  26. package/dist/assets/{Badge.stories-DhBazbPH.js → Badge.stories-BxGvNozr.js} +1 -1
  27. package/dist/assets/{Box.stories-DYxm40b1.js → Box.stories-BCCuYnrC.js} +1 -1
  28. package/dist/assets/{Button-etPAfZn6.js → Button-BumqXQgN.js} +2 -2
  29. package/dist/assets/{Button-Cypl3yDn.js → Button-klA2GCDX.js} +1 -1
  30. package/dist/assets/{Button.stories-zCdl6A4v.js → Button.stories-DA25kI-7.js} +1 -1
  31. package/dist/assets/{ButtonBase-CiON5Gq9.js → ButtonBase-OAaaGRgi.js} +1 -1
  32. package/dist/assets/{Checkbox-PK_lzd6o.js → Checkbox-CsXsO8bL.js} +2 -2
  33. package/dist/assets/{Checkbox.stories-DPCtwQEk.js → Checkbox.stories-C-vlyqxy.js} +1 -1
  34. package/dist/assets/{Checkbox.tests.stories-CmARszTI.js → Checkbox.tests.stories-Bn0cGiYz.js} +1 -1
  35. package/dist/assets/{Chips.stories-C3XJafXG.js → Chips.stories-Dln8xBho.js} +1 -1
  36. package/dist/assets/{Color-YHDXOIA2-R6sgjhMY.js → Color-YHDXOIA2-DdMC8kO4.js} +1 -1
  37. package/dist/assets/CountryFlag-CJV53jf1.js +48 -0
  38. package/dist/assets/CountryFlag-p-8M_k5M.css +1 -0
  39. package/dist/assets/{Dialog.stories-CLyDuYn9.js → Dialog.stories-C7JVGkL3.js} +2 -2
  40. package/dist/assets/{DocsRenderer-CFRXHY34-Bub8-jZR.js → DocsRenderer-CFRXHY34-BUR9I9U1.js} +1 -1
  41. package/dist/assets/{FieldButton-Dprr9FF4.js → FieldButton-xxvyfVcj.js} +1 -1
  42. package/dist/assets/{FieldButton.stories-BuA4NyAH.js → FieldButton.stories-1kY40W8X.js} +1 -1
  43. package/dist/assets/Flag.stories-Bfpeo5_i.js +110 -0
  44. package/dist/assets/Flag.test.stories-GCtORN0m.js +27 -0
  45. package/dist/assets/FormControl-DD3JEwg1.js +5 -0
  46. package/dist/assets/{FormControl.stories-D83_07EZ.js → FormControl.stories-DoVURnEB.js} +1 -1
  47. package/dist/assets/{Heading-BSlUFvxo.js → Heading-D79pA8cG.js} +2 -2
  48. package/dist/assets/{Heading.stories-CsCslhOn.js → Heading.stories-FhR8Ieuz.js} +1 -1
  49. package/dist/assets/{Icon-Cx1Om39U.js → Icon-D4cMo1we.js} +2 -2
  50. package/dist/assets/{Icon-RSC-De70zQQg.js → Icon-RSC-Yp03gSP9.js} +1 -1
  51. package/dist/assets/{Icon-Clsj4XP8.js → Icon-zcBK8bUG.js} +1 -1
  52. package/dist/assets/{Icon.stories-Batx6hcA.js → Icon.stories-DlJ1cDyb.js} +1 -1
  53. package/dist/assets/IconButton-DNz6Hldb.js +8 -0
  54. package/dist/assets/{Input-B5nl0Iyd.js → Input-B7MlX4U9.js} +7 -7
  55. package/dist/assets/{IntegrationWithReactHookForm.stories-BoWMVLOX.js → IntegrationWithReactHookForm.stories-CFvk5m0u.js} +1 -1
  56. package/dist/assets/{LayoutFlex-Dp29ojjO.js → LayoutFlex-DsiZkqdg.js} +1 -1
  57. package/dist/assets/{LayoutFlex-DT7eMWg5.js → LayoutFlex-oRwI31fW.js} +1 -1
  58. package/dist/assets/LayoutFlexItem-RxfNp994.js +1 -0
  59. package/dist/assets/{LayoutGrid-D9R6yTYX.js → LayoutGrid-6cTmb1jX.js} +1 -1
  60. package/dist/assets/LayoutGrid.stories-CAvHZzVw.js +88 -0
  61. package/dist/assets/LayoutGridItem-AvP_ZkC5.js +1 -0
  62. package/dist/assets/{LayoutGridItem-B1eMKElL.js → LayoutGridItem-CVWVBh65.js} +1 -1
  63. package/dist/assets/LayoutGridItem-Dy4Q8woN.css +1 -0
  64. package/dist/assets/{Link.stories-DWbasHUE.js → Link.stories-Kb5m59aP.js} +2 -2
  65. package/dist/assets/{Loader.stories-Dv3ubOhZ.js → Loader.stories-CFBO-7A0.js} +1 -1
  66. package/dist/assets/NumberField-DyKjoAC-.js +4 -0
  67. package/dist/assets/{NumberField.stories-D74rSbUs.js → NumberField.stories-D-g-_JoA.js} +7 -7
  68. package/dist/assets/{ObserveIntersection-BM5DGF0-.js → ObserveIntersection-CvDmrhxS.js} +2 -2
  69. package/dist/assets/{ObserveIntersection.stories-EyGedr3b.js → ObserveIntersection.stories-CJbpJ7AX.js} +1 -1
  70. package/dist/assets/{OnboardingTooltip-_5vI5YX1.js → OnboardingTooltip-Lspn1J1n.js} +1 -1
  71. package/dist/assets/{OnboardingTooltip.stories-zAMAeQy1.js → OnboardingTooltip.stories-BSTAbBKq.js} +1 -1
  72. package/dist/assets/{OnboardingTooltip.tests.stories-DAxkQF6H.js → OnboardingTooltip.tests.stories-C3TfZDQZ.js} +1 -1
  73. package/dist/assets/{OnboardingTour-Bs65E3B_.js → OnboardingTour-J68z1zuj.js} +1 -1
  74. package/dist/assets/{OnboardingTour.stories-L4wR5VUD.js → OnboardingTour.stories-D3Z3aBlG.js} +2 -2
  75. package/dist/assets/{OnboardingTour.tests.stories-D9DB8HzR.js → OnboardingTour.tests.stories-DgM_E88t.js} +1 -1
  76. package/dist/assets/PasswordField-BkVjxPtF.js +4 -0
  77. package/dist/assets/{PasswordField.stories-BWnTPMMy.js → PasswordField.stories-CoxGxN0y.js} +7 -7
  78. package/dist/assets/{PreplyLogo.stories-CKZvG96R.js → PreplyLogo.stories-CoKY5vmY.js} +2 -2
  79. package/dist/assets/{ProgressBar.stories-BO6-xzZ9.js → ProgressBar.stories-D-zAEKVA.js} +1 -1
  80. package/dist/assets/{ProgressSteps-ByDec2fC.js → ProgressSteps-CuGX9_Fy.js} +1 -1
  81. package/dist/assets/{ProgressSteps.stories-CaGz9UvI.js → ProgressSteps.stories-BZpbJxJ4.js} +1 -1
  82. package/dist/assets/{SelectField-M6d20_vW.js → SelectField-DVUeHaUI.js} +12 -14
  83. package/dist/assets/{SelectField.stories-C8b5ZtGG.js → SelectField.stories-l2h7AeUs.js} +8 -8
  84. package/dist/assets/{ShowOnIntersection.stories-CkN1WDGU.js → ShowOnIntersection.stories-B24bNVFn.js} +1 -1
  85. package/dist/assets/{Steps-C32suZpN.js → Steps-Cnv3Nys-.js} +1 -1
  86. package/dist/assets/{Steps.stories-Bb8vy8e1.js → Steps.stories-DcSCPhwD.js} +1 -1
  87. package/dist/assets/{Text-DmTAIIVj.js → Text-C3jprdij.js} +1 -1
  88. package/dist/assets/{Text.stories-D1y5agve.js → Text.stories-CGHOveiR.js} +1 -1
  89. package/dist/assets/TextField-872WjatY.js +1 -0
  90. package/dist/assets/TextField-X8bB9C1g.js +4 -0
  91. package/dist/assets/{TextField.stories-Db1NKI4j.js → TextField.stories-DQBz69MT.js} +8 -8
  92. package/dist/assets/{TextHighlighted-CfvNH8PY.js → TextHighlighted-B7-aMGmA.js} +1 -1
  93. package/dist/assets/{TextHighlighted.stories-PV3yANaI.js → TextHighlighted.stories-BepOj0Ru.js} +1 -1
  94. package/dist/assets/{TextInline.stories-fEzj3mnz.js → TextInline.stories-E8plGh4A.js} +1 -1
  95. package/dist/assets/{TextareaField-DzHn3ZB3.js → TextareaField-vuK19L40.js} +12 -14
  96. package/dist/assets/{TextareaField.stories-BlMt3RhU.js → TextareaField.stories-CykA4cDO.js} +8 -8
  97. package/dist/assets/{Toast.stories-BeSJa7YF.js → Toast.stories-Bi9S1Grd.js} +1 -1
  98. package/dist/assets/{Tooltip-DYI-etfB.js → Tooltip-hS-9HVfR.js} +1 -1
  99. package/dist/assets/{Tooltip.stories-BY_kLvYK.js → Tooltip.stories-B1e9vr5u.js} +1 -1
  100. package/dist/assets/{Tooltip.tests.stories-CtFfR3fb.js → Tooltip.tests.stories-QA7Lh6Tu.js} +1 -1
  101. package/dist/assets/align-self-BM6l9H5Z.js +1 -0
  102. package/dist/assets/{breakpoints-fH9dYJAl.js → breakpoints-CmMCxJmD.js} +1 -1
  103. package/dist/assets/{breakpoints-20WyVwJ6.js → breakpoints-CpqGBjYO.js} +1 -1
  104. package/dist/assets/{breakpoints-D63eyxc3.js → breakpoints-ysnexzv-.js} +1 -1
  105. package/dist/assets/{changelog-CZp0K-Th.js → changelog-COau0gJf.js} +1 -1
  106. package/dist/assets/componentNames-CVVyamkx.js +1 -0
  107. package/dist/assets/{entry-preview-Beai-Ttn.js → entry-preview-C4N2xCt5.js} +1 -1
  108. package/dist/assets/{getTokenVar-CaYACIxq.js → getTokenVar-CUHKNeJD.js} +1 -1
  109. package/dist/assets/{hover-D1ok7rID.js → hover-DXcaKjLt.js} +1 -1
  110. package/dist/assets/{hover-BWX0MqdU.js → hover-GSE0CvmS.js} +1 -1
  111. package/dist/assets/{hover-CSM1irGv.js → hover-VvQeuGyg.js} +1 -1
  112. package/dist/assets/{iframe-BJQSUUXK.js → iframe-D0A79CBI.js} +2 -2
  113. package/dist/assets/{index-C9qzZweZ.js → index-DJz3jMTz.js} +3 -3
  114. package/dist/assets/{index-C4N2QXGu.js → index-DueYSiMN.js} +1 -1
  115. package/dist/assets/{intro-ukuXiDOx.js → intro-UMrunOuq.js} +1 -1
  116. package/dist/assets/{migrating-from-less-JoAfxRIi.js → migrating-from-less-BqEJZLZ5.js} +1 -1
  117. package/dist/assets/{playground-CCc6VR51.css → playground-DBdZFxjC.css} +1 -1
  118. package/dist/assets/{playground.stories-BODyPOuN.js → playground.stories-BhNG8Jgk.js} +165 -165
  119. package/dist/assets/{preview-DHlsZwR4.js → preview-Bk7AZmud.js} +1 -1
  120. package/dist/assets/{preview-DJuzriZr.js → preview-CcucgJy3.js} +1 -1
  121. package/dist/assets/{preview-QL9aHs0E.js → preview-iHfxidwg.js} +2 -2
  122. package/dist/assets/{tokens-HWgzrI-u.js → tokens-BuSmlz1z.js} +1 -1
  123. package/dist/assets/{tokens-BecRNN80.js → tokens-D0SjH8dK.js} +1 -1
  124. package/dist/assets/{tokens-C8vVARpG.js → tokens-DOJLI2G7.js} +1 -1
  125. package/dist/assets/{usePortalElement-BtPCQHPX.js → usePortalElement-Byczyvc6.js} +1 -1
  126. package/dist/assets/{welcome-CN1zQ6D8.js → welcome-CFbV1cfg.js} +1 -1
  127. package/dist/assets/{zeroheight-C3flYOQk.js → zeroheight-ChMVcLJ3.js} +1 -1
  128. package/dist/iframe.html +1 -1
  129. package/dist/index.json +1 -1
  130. package/dist/preview-stats.json +1125 -1014
  131. package/dist/project.json +1 -1
  132. package/package.json +3 -3
  133. package/dist/assets/10.Combinations.stories-6ywklR8I.js +0 -144
  134. package/dist/assets/FormControl-V3kzTeDQ.js +0 -7
  135. package/dist/assets/IconButton-CUUvxhBi.js +0 -8
  136. package/dist/assets/LayoutFlexItem-CemO2cFY.js +0 -1
  137. package/dist/assets/LayoutGrid-mQT2ikS8.css +0 -1
  138. package/dist/assets/LayoutGrid.stories-D1JxCWQq.js +0 -88
  139. package/dist/assets/NumberField-tAVhOkam.js +0 -6
  140. package/dist/assets/PasswordField-CmREo8SU.js +0 -6
  141. package/dist/assets/TextField-CDlYWWnq.js +0 -1
  142. package/dist/assets/TextField-Cbt-ocgZ.js +0 -6
  143. package/dist/assets/componentNames-Ba2ybP0W.js +0 -1
  144. package/dist/assets/layout-relative-BpJIh3YK.js +0 -1
  145. /package/dist/assets/{layout-relative-C4ATemga.css → align-self-C4ATemga.css} +0 -0
@@ -1,4 +1,4 @@
1
- import{j as n}from"./jsx-runtime-BYouaCF_.js";import{L as r}from"./LayoutFlexItem-CemO2cFY.js";import{L as p}from"./LayoutFlex-DT7eMWg5.js";import{S as t,a as h}from"./consts-KAYct7Gj.js";import"./index-B3evPFBL.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./layout-relative-BpJIh3YK.js";import"./classNames-BUL1Zq7e.js";import"./layout-relative.module-ed9bC4H4.js";import"./constants-DYYVurUY.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./componentNames-Ba2ybP0W.js";import"./index-DdzHuZ-Y.js";import"./defaults-B1rzzf6M.js";const f={title:"components/LayoutFlex",component:p,subcomponents:{LayoutFlexItem:r},argTypes:{gap:{description:t},padding:{description:h},direction:{description:t},justifyContent:{description:t},alignItems:{description:t},hide:{description:t},relative:{description:t}}},e=()=>n.jsxs(p,{gap:"xs",children:[n.jsx("div",{style:{minWidth:"100px",backgroundColor:"hotpink"},children:" "}),n.jsx("div",{style:{minWidth:"100px",backgroundColor:"hotpink"},children:" "}),n.jsx(r,{stretch:!0,children:n.jsx("div",{style:{minWidth:"100px",backgroundColor:"hotpink",textAlign:"center"},children:"stretch"})})]});e.storyName="LayoutFlex";const o={parameters:{chromatic:{disableSnapshot:!0}},args:{gap:"16",children:n.jsxs(n.Fragment,{children:[n.jsx("div",{style:{minWidth:"100px",height:50,backgroundColor:"hotpink"},children:" "}),n.jsx("div",{style:{minWidth:"100px",height:75,backgroundColor:"hotpink"},children:" "}),n.jsx(r,{stretch:!0,children:n.jsx("div",{style:{minWidth:"100px",height:100,backgroundColor:"hotpink",textAlign:"center"}})})]}),dataset:{qaid:"layout-flex"}},argTypes:{dataset:{control:"object"},nowrap:{control:"boolean"},hide:{control:"boolean"},relative:{control:"boolean"},inline:{control:"boolean"},direction:{control:"select"},children:{control:!1},column:{table:{disable:!0}},reverse:{table:{disable:!0}}}};var i,a,l;e.parameters={...e.parameters,docs:{...(i=e.parameters)==null?void 0:i.docs,source:{originalSource:`() => <LayoutFlex gap="xs">
1
+ import{j as n}from"./jsx-runtime-BYouaCF_.js";import{L as r}from"./LayoutFlexItem-RxfNp994.js";import{L as p}from"./LayoutFlex-oRwI31fW.js";import{S as t,a as h}from"./consts-KAYct7Gj.js";import"./index-B3evPFBL.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./align-self-BM6l9H5Z.js";import"./layout-relative.module-ed9bC4H4.js";import"./classNames-BUL1Zq7e.js";import"./constants-DYYVurUY.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./componentNames-CVVyamkx.js";import"./index-DdzHuZ-Y.js";import"./defaults-B1rzzf6M.js";const f={title:"components/LayoutFlex",component:p,subcomponents:{LayoutFlexItem:r},argTypes:{gap:{description:t},padding:{description:h},direction:{description:t},justifyContent:{description:t},alignItems:{description:t},hide:{description:t},relative:{description:t}}},e=()=>n.jsxs(p,{gap:"xs",children:[n.jsx("div",{style:{minWidth:"100px",backgroundColor:"hotpink"},children:" "}),n.jsx("div",{style:{minWidth:"100px",backgroundColor:"hotpink"},children:" "}),n.jsx(r,{stretch:!0,children:n.jsx("div",{style:{minWidth:"100px",backgroundColor:"hotpink",textAlign:"center"},children:"stretch"})})]});e.storyName="LayoutFlex";const o={parameters:{chromatic:{disableSnapshot:!0}},args:{gap:"16",children:n.jsxs(n.Fragment,{children:[n.jsx("div",{style:{minWidth:"100px",height:50,backgroundColor:"hotpink"},children:" "}),n.jsx("div",{style:{minWidth:"100px",height:75,backgroundColor:"hotpink"},children:" "}),n.jsx(r,{stretch:!0,children:n.jsx("div",{style:{minWidth:"100px",height:100,backgroundColor:"hotpink",textAlign:"center"}})})]}),dataset:{qaid:"layout-flex"}},argTypes:{dataset:{control:"object"},nowrap:{control:"boolean"},hide:{control:"boolean"},relative:{control:"boolean"},inline:{control:"boolean"},direction:{control:"select"},children:{control:!1},column:{table:{disable:!0}},reverse:{table:{disable:!0}}}};var i,a,l;e.parameters={...e.parameters,docs:{...(i=e.parameters)==null?void 0:i.docs,source:{originalSource:`() => <LayoutFlex gap="xs">
2
2
  <div style={{
3
3
  minWidth: '100px',
4
4
  backgroundColor: 'hotpink'
@@ -1,4 +1,4 @@
1
- import{j as e}from"./jsx-runtime-BYouaCF_.js";import{useMDXComponents as r}from"./index-uOP2uDdf.js";import{M as o}from"./index-C9qzZweZ.js";import"./index-B3evPFBL.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./iframe-BJQSUUXK.js";import"./index-jEDObK_5.js";import"./index-C66nt8TK.js";import"./index-Cu4lwwaE.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";function t(s){const n={a:"a",code:"code",em:"em",h1:"h1",h2:"h2",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...r(),...s.components};return e.jsxs(e.Fragment,{children:[e.jsx(o,{title:"Guides/Installation/Applications"}),`
1
+ import{j as e}from"./jsx-runtime-BYouaCF_.js";import{useMDXComponents as r}from"./index-uOP2uDdf.js";import{M as o}from"./index-DJz3jMTz.js";import"./index-B3evPFBL.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./iframe-D0A79CBI.js";import"./index-jEDObK_5.js";import"./index-C66nt8TK.js";import"./index-Cu4lwwaE.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";function t(s){const n={a:"a",code:"code",em:"em",h1:"h1",h2:"h2",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...r(),...s.components};return e.jsxs(e.Fragment,{children:[e.jsx(o,{title:"Guides/Installation/Applications"}),`
2
2
  `,e.jsx(n.h1,{id:"installation-applications",children:"Installation: Applications"}),`
3
3
  `,e.jsx(n.p,{children:"This guide applies to both client-side and server-side rendered React applications."}),`
4
4
  `,e.jsx(n.h2,{id:"packages",children:"Packages"}),`
@@ -1,4 +1,4 @@
1
- import{j as n}from"./jsx-runtime-BYouaCF_.js";import{useMDXComponents as t}from"./index-uOP2uDdf.js";import{M as i}from"./index-C9qzZweZ.js";import"./index-B3evPFBL.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./iframe-BJQSUUXK.js";import"./index-jEDObK_5.js";import"./index-C66nt8TK.js";import"./index-Cu4lwwaE.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";function o(s){const e={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",p:"p",pre:"pre",strong:"strong",...t(),...s.components};return n.jsxs(n.Fragment,{children:[n.jsx(i,{title:"Guides/Assets/Favicons"}),`
1
+ import{j as n}from"./jsx-runtime-BYouaCF_.js";import{useMDXComponents as t}from"./index-uOP2uDdf.js";import{M as i}from"./index-DJz3jMTz.js";import"./index-B3evPFBL.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./iframe-D0A79CBI.js";import"./index-jEDObK_5.js";import"./index-C66nt8TK.js";import"./index-Cu4lwwaE.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";function o(s){const e={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",p:"p",pre:"pre",strong:"strong",...t(),...s.components};return n.jsxs(n.Fragment,{children:[n.jsx(i,{title:"Guides/Assets/Favicons"}),`
2
2
  `,n.jsx(e.h1,{id:"favicons",children:"Favicons"}),`
3
3
  `,n.jsxs(e.p,{children:["The optimised assets are available under ",n.jsx(e.strong,{children:"preply.com"})," in the formats required by modern and legacy browsers, as well as Android and iOS devices."]}),`
4
4
  `,n.jsxs(e.p,{children:["Refer to ",n.jsx(e.a,{href:"https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs",rel:"nofollow",children:"How to Favicon in 2022: Six files that fit most needs"})," for a detailed breakdown of the formats."]}),`
@@ -1,4 +1,4 @@
1
- import{j as t}from"./jsx-runtime-BYouaCF_.js";import{useMDXComponents as P}from"./index-uOP2uDdf.js";import{M as F}from"./index-C9qzZweZ.js";import{L as p,T as v}from"./LayoutFlex-Dp29ojjO.js";import{r as c}from"./index-B3evPFBL.js";import{g as E,u as O}from"./useToken-BEsvy84L.js";import{i as H,T as d,u as W}from"./TextHighlighted-CfvNH8PY.js";import{e as M,d as N,T as A}from"./constants-BgBLeZzp.js";import{t as B}from"./tokens-DXy5hgn5.js";import{e as L,u as D,C as _,c as V}from"./useTheme-DiEoTTOi.js";import{L as y}from"./LayoutGrid-D9R6yTYX.js";import{d as o}from"./styled-components.browser.esm-CwsnEFnS.js";import{o as K}from"./mixins-DZk1Zeoo.js";import"./iframe-BJQSUUXK.js";import"./index-jEDObK_5.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./index-C66nt8TK.js";import"./index-Cu4lwwaE.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";import"./text-centered-C0V1O_Sd.js";import"./classNames-BUL1Zq7e.js";import"./filterAttributesPassedByRadixUIAtRuntime-Bye2JkZ0.js";import"./defaults-B1rzzf6M.js";import"./componentNames-Ba2ybP0W.js";import"./index-DdzHuZ-Y.js";import"./layout-relative.module-1z75aSwo-DNAR_Nv2.js";import"./breakpoints-BfMlrtxE.js";import"./constants-DYYVurUY.js";const q=(e,r)=>({token:r,name:e,id:r[A],type:r[N],colorSchemeAware:!!r[M]}),R=(e,r)=>Object.entries(r).flatMap(([i,n])=>{const s=`${e}.${i}`;return H(n)?[q(s,n)]:R(s,n)}),X=e=>Object.entries(e).flatMap(([r,i])=>R(r,i)),Y=X(B),G=(e,r,i)=>e.filter(n=>{if(r==="-"||r==="--")return!0;if(r!=null&&r.startsWith("--"))return n.id.toLowerCase().startsWith(r.substring(2).toLowerCase());if(r){const s=n.name.toLowerCase().indexOf(r.toLowerCase())>-1,a=n.value.toLowerCase().indexOf(r.toLowerCase())>-1;return(s||a)&&(i?n.colorSchemeAware:!n.colorSchemeAware)}return i?n.colorSchemeAware:!n.colorSchemeAware}),z=c.createContext({terms:"",colorScheme:void 0,results:[],setColorScheme:()=>{},setSearchTerms:()=>{}});var C;const U=((C=window==null?void 0:window.localStorage)==null?void 0:C.getItem("storybook.ds-color-scheme"))||void 0;function J(e,r){return Y.map(n=>({...n,value:`${E(e,r,n.token)}`}))}const Q=({children:e})=>{const{findColorScheme:r}=L(),{theme:i}=D(),[n,s]=c.useState(U),[a,h]=c.useState(""),[g,x]=c.useState([]),u=c.useCallback(m=>s(m),[s]),f=c.useCallback(m=>h(m),[h]);if(!i)throw new Error("useToken() must be used within a ThemeProvider");return c.useEffect(()=>{const m=r(n||"base"),w=J(i,m);x(G(w,a,!!n))},[n,r,a,i]),t.jsx(z.Provider,{value:{terms:a,results:g,colorScheme:n,setSearchTerms:f,setColorScheme:u},children:t.jsx(_,{colorScheme:n||"base",children:e})})},j=()=>c.useContext(z),Z=o.div`
1
+ import{j as t}from"./jsx-runtime-BYouaCF_.js";import{useMDXComponents as P}from"./index-uOP2uDdf.js";import{M as F}from"./index-DJz3jMTz.js";import{L as p,T as v}from"./LayoutFlex-DsiZkqdg.js";import{r as c}from"./index-B3evPFBL.js";import{g as E,u as O}from"./useToken-BEsvy84L.js";import{i as H,T as d,u as W}from"./TextHighlighted-B7-aMGmA.js";import{e as M,d as N,T as A}from"./constants-BgBLeZzp.js";import{t as B}from"./tokens-DXy5hgn5.js";import{e as L,u as D,C as _,c as V}from"./useTheme-DiEoTTOi.js";import{L as y}from"./LayoutGrid-6cTmb1jX.js";import{d as o}from"./styled-components.browser.esm-CwsnEFnS.js";import{o as K}from"./mixins-DZk1Zeoo.js";import"./iframe-D0A79CBI.js";import"./index-jEDObK_5.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./index-C66nt8TK.js";import"./index-Cu4lwwaE.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";import"./text-centered-C0V1O_Sd.js";import"./classNames-BUL1Zq7e.js";import"./filterAttributesPassedByRadixUIAtRuntime-Bye2JkZ0.js";import"./defaults-B1rzzf6M.js";import"./componentNames-CVVyamkx.js";import"./index-DdzHuZ-Y.js";import"./layout-relative.module-1z75aSwo-DNAR_Nv2.js";import"./breakpoints-BfMlrtxE.js";import"./constants-DYYVurUY.js";const q=(e,r)=>({token:r,name:e,id:r[A],type:r[N],colorSchemeAware:!!r[M]}),R=(e,r)=>Object.entries(r).flatMap(([i,n])=>{const s=`${e}.${i}`;return H(n)?[q(s,n)]:R(s,n)}),X=e=>Object.entries(e).flatMap(([r,i])=>R(r,i)),Y=X(B),G=(e,r,i)=>e.filter(n=>{if(r==="-"||r==="--")return!0;if(r!=null&&r.startsWith("--"))return n.id.toLowerCase().startsWith(r.substring(2).toLowerCase());if(r){const s=n.name.toLowerCase().indexOf(r.toLowerCase())>-1,a=n.value.toLowerCase().indexOf(r.toLowerCase())>-1;return(s||a)&&(i?n.colorSchemeAware:!n.colorSchemeAware)}return i?n.colorSchemeAware:!n.colorSchemeAware}),z=c.createContext({terms:"",colorScheme:void 0,results:[],setColorScheme:()=>{},setSearchTerms:()=>{}});var C;const U=((C=window==null?void 0:window.localStorage)==null?void 0:C.getItem("storybook.ds-color-scheme"))||void 0;function J(e,r){return Y.map(n=>({...n,value:`${E(e,r,n.token)}`}))}const Q=({children:e})=>{const{findColorScheme:r}=L(),{theme:i}=D(),[n,s]=c.useState(U),[a,h]=c.useState(""),[g,x]=c.useState([]),u=c.useCallback(m=>s(m),[s]),f=c.useCallback(m=>h(m),[h]);if(!i)throw new Error("useToken() must be used within a ThemeProvider");return c.useEffect(()=>{const m=r(n||"base"),w=J(i,m);x(G(w,a,!!n))},[n,r,a,i]),t.jsx(z.Provider,{value:{terms:a,results:g,colorScheme:n,setSearchTerms:f,setColorScheme:u},children:t.jsx(_,{colorScheme:n||"base",children:e})})},j=()=>c.useContext(z),Z=o.div`
2
2
  width: 64px;
3
3
  height: 64px;
4
4
  color: white;
@@ -1,4 +1,4 @@
1
- import{j as e}from"./jsx-runtime-BYouaCF_.js";import{useMDXComponents as i}from"./index-uOP2uDdf.js";import{A as r}from"./Avatar--Me1wFbM.js";import{M as p}from"./index-C9qzZweZ.js";import{B as a}from"./breakpoints-BfMlrtxE.js";import"./index-B3evPFBL.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./filterAttributesPassedByRadixUIAtRuntime-Bye2JkZ0.js";import"./classNames-BUL1Zq7e.js";import"./componentNames-Ba2ybP0W.js";import"./index-DdzHuZ-Y.js";import"./constants--ewUoBsO.js";import"./defaults-B1rzzf6M.js";import"./iframe-BJQSUUXK.js";import"./index-jEDObK_5.js";import"./index-C66nt8TK.js";import"./index-Cu4lwwaE.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";const c=()=>e.jsx("table",{style:{fontSize:14},children:e.jsx("tbody",{children:Object.entries(a).map(([n,s])=>e.jsxs("tr",{children:[e.jsx("td",{style:{padding:"0px 40px 10px 20px"},children:e.jsx("code",{children:n})}),e.jsx("td",{style:{padding:"0px 40px 10px 20px"},children:e.jsxs("code",{children:[s,"px"]})})]},n))})}),o="./web-lib/src/components/Avatar/docs/static/avatar-1.png";function t(n){const s={code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...i(),...n.components};return e.jsxs(e.Fragment,{children:[e.jsx(p,{title:"Guides/Responsive Props"}),`
1
+ import{j as e}from"./jsx-runtime-BYouaCF_.js";import{useMDXComponents as i}from"./index-uOP2uDdf.js";import{A as r}from"./Avatar-D6BKQVaH.js";import{M as p}from"./index-DJz3jMTz.js";import{B as a}from"./breakpoints-BfMlrtxE.js";import"./index-B3evPFBL.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./filterAttributesPassedByRadixUIAtRuntime-Bye2JkZ0.js";import"./classNames-BUL1Zq7e.js";import"./componentNames-CVVyamkx.js";import"./index-DdzHuZ-Y.js";import"./constants--ewUoBsO.js";import"./defaults-B1rzzf6M.js";import"./iframe-D0A79CBI.js";import"./index-jEDObK_5.js";import"./index-C66nt8TK.js";import"./index-Cu4lwwaE.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";const c=()=>e.jsx("table",{style:{fontSize:14},children:e.jsx("tbody",{children:Object.entries(a).map(([n,s])=>e.jsxs("tr",{children:[e.jsx("td",{style:{padding:"0px 40px 10px 20px"},children:e.jsx("code",{children:n})}),e.jsx("td",{style:{padding:"0px 40px 10px 20px"},children:e.jsxs("code",{children:[s,"px"]})})]},n))})}),o="./web-lib/src/components/Avatar/docs/static/avatar-1.png";function t(n){const s={code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...i(),...n.components};return e.jsxs(e.Fragment,{children:[e.jsx(p,{title:"Guides/Responsive Props"}),`
2
2
  `,e.jsx(s.h1,{id:"responsive-props",children:"Responsive Props"}),`
3
3
  `,e.jsx(s.p,{children:`Some component props optionally accept responsive values for different screen sizes
4
4
  based on the global breakpoints:`}),`
@@ -1,2 +1,2 @@
1
- import{j as r}from"./jsx-runtime-BYouaCF_.js";import{useMDXComponents as m}from"./index-uOP2uDdf.js";import{M as k}from"./index-C9qzZweZ.js";import{H as a,B as s}from"./Button-Cypl3yDn.js";import{L as d}from"./LayoutGrid-D9R6yTYX.js";import{L as l}from"./LayoutGridItem-B1eMKElL.js";import"./index-B3evPFBL.js";import{t as x}from"./tokens-DXy5hgn5.js";import"./iframe-BJQSUUXK.js";import"./index-jEDObK_5.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./index-C66nt8TK.js";import"./index-Cu4lwwaE.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";import"./text-centered-C0V1O_Sd.js";import"./classNames-BUL1Zq7e.js";import"./filterAttributesPassedByRadixUIAtRuntime-Bye2JkZ0.js";import"./componentNames-Ba2ybP0W.js";import"./index-DdzHuZ-Y.js";import"./render-icon-CwRdpin3.js";import"./defaults-B1rzzf6M.js";import"./useHostname-CH18gHFj.js";import"./index-CC6DAVyL.js";import"./breakpoints-BfMlrtxE.js";import"./layout-relative.module-1z75aSwo-DNAR_Nv2.js";import"./constants-DYYVurUY.js";import"./constants-BgBLeZzp.js";const o=({inverted:t,textToken:n})=>{const c=x.color.text[n];return Array.isArray(c)?r.jsxs(l,{children:[r.jsx(a,{level:"h4",children:n}),r.jsx("div",{style:{color:`var(--${c[1]})`,maxWidth:"240px",padding:"10px",background:`var(--${t?x.color.background.primaryInverted[1]:x.color.background.primary[1]})`},children:r.jsxs("code",{children:["color.text.",n]})})]},n):null};o.defaultProps={inverted:!1};const e=({inverted:t,bgToken:n})=>{const c=x.color.background[n];return Array.isArray(c)?r.jsxs(l,{children:[r.jsx(a,{level:"h4",children:n}),r.jsxs("div",{style:{background:`var(--${x.color.background[n][1]})`,color:`var(--${t?x.color.text.inverted[1]:x.color.text.primary[1]})`,maxWidth:"240px",padding:"10px"},children:["Background token: ",r.jsxs("code",{children:["color.background.",n]})]})]},n):null};e.defaultProps={inverted:!1};const i=({contentToken:t})=>{const n=x.color.border[t];return Array.isArray(n)?r.jsxs(l,{children:[r.jsx(a,{level:"h4",children:t}),r.jsx("br",{}),r.jsxs("div",{style:{border:`1px solid var(--${n[1]})`,background:"transparent",color:`var(--${n[1]})`,maxWidth:"240px",height:"50px",padding:"10px"},children:["color.border.",t]})]},t):null};i.defaultProps={};const p=()=>r.jsxs(d,{gap:"xs",columns:2,children:[r.jsx(s,{children:"Token family: action.variant.primary.*"}),r.jsx(s,{variant:"secondary",children:"Token family: action.variant.secondary.*"}),r.jsx(s,{variant:"tertiary",children:"Token family: action.variant.tertiary.*"}),r.jsx(s,{variant:"ghost",children:"Token family: action.variant.ghost.*"}),r.jsx(s,{variant:"critical",children:"Token family: action.variant.critical.*"}),r.jsx(s,{variant:"onColor",children:"Token family: action.variant.onColor.*"}),r.jsx(s,{variant:"inverted",children:"Token family: action.variant.inverted.*"}),r.jsx(s,{disabled:!0,children:"Token family: action.variant.disabled.*"})]}),h=()=>r.jsxs("div",{children:[r.jsx(a,{level:"h1",children:"Semantic token examples"}),r.jsx("p",{children:"With Tokyo UI the semantic tokens have been renamed and expanded to cover more use cases. Here is a list of the most important ones."}),r.jsx("br",{}),r.jsx("hr",{}),r.jsx("br",{}),r.jsx(a,{level:"h2",children:"Text tokens"}),r.jsx("br",{}),r.jsx("br",{}),r.jsxs(d,{gap:"xs",columns:4,children:[r.jsx(o,{textToken:"primary"}),r.jsx(o,{textToken:"secondary"}),r.jsx(o,{textToken:"tertiary"}),r.jsx(o,{textToken:"accentDark"}),r.jsx(o,{textToken:"placeholder"}),r.jsx(o,{textToken:"inverted",inverted:!0}),r.jsx(o,{textToken:"positive"}),r.jsx(o,{textToken:"info"}),r.jsx(o,{textToken:"warning"}),r.jsx(o,{textToken:"critical"})]}),r.jsx("br",{}),r.jsx("br",{}),r.jsx(a,{level:"h2",children:"Background tokens"}),r.jsxs(d,{gap:"xs",columns:4,children:[r.jsx(e,{bgToken:"primary"}),r.jsx(e,{bgToken:"secondary"}),r.jsx(e,{bgToken:"tertiary"}),r.jsx(e,{bgToken:"overlay"}),r.jsx(e,{bgToken:"disabled"}),r.jsx(e,{bgToken:"brand"}),r.jsx(e,{bgToken:"brandB2b"}),r.jsx(e,{bgToken:"accentLight"}),r.jsx(e,{bgToken:"accentDark",inverted:!0}),r.jsx(e,{bgToken:"positiveLight"}),r.jsx(e,{bgToken:"positiveDark",inverted:!0}),r.jsx(e,{bgToken:"infoLight"}),r.jsx(e,{bgToken:"infoDark",inverted:!0}),r.jsx(e,{bgToken:"warningLight"}),r.jsx(e,{bgToken:"warningDark",inverted:!0}),r.jsx(e,{bgToken:"criticalLight"}),r.jsx(e,{bgToken:"criticalDark",inverted:!0}),r.jsx(e,{bgToken:"statusOnline"}),r.jsx(e,{bgToken:"statusOffline"}),r.jsx(e,{bgToken:"primaryInverted",inverted:!0}),r.jsx(e,{bgToken:"secondaryInverted",inverted:!0}),r.jsx(e,{bgToken:"tertiaryInverted",inverted:!0})]}),r.jsx("br",{}),r.jsx("hr",{}),r.jsx("br",{}),r.jsx(a,{level:"h2",children:"Action"}),r.jsx("br",{}),r.jsx(p,{}),r.jsx("br",{}),r.jsx("hr",{}),r.jsx("br",{}),r.jsx(a,{level:"h2",children:"Borders"}),r.jsx("br",{}),r.jsxs(d,{gap:"xs",columns:4,children:[r.jsx(i,{contentToken:"primary"}),r.jsx(i,{contentToken:"secondary"}),r.jsx(i,{contentToken:"secondary-opacity"}),r.jsx(i,{contentToken:"tertiary"}),r.jsx(i,{contentToken:"disabled"}),r.jsx(i,{contentToken:"brand"}),r.jsx(i,{contentToken:"critical"}),r.jsx(i,{contentToken:"focus"}),r.jsx(i,{contentToken:"positive"})]})]});function j(t){return r.jsxs(r.Fragment,{children:[r.jsx(k,{title:"Guides/Semantic tokens examples"}),`
1
+ import{j as r}from"./jsx-runtime-BYouaCF_.js";import{useMDXComponents as m}from"./index-uOP2uDdf.js";import{M as k}from"./index-DJz3jMTz.js";import{H as a,B as s}from"./Button-klA2GCDX.js";import{L as d}from"./LayoutGrid-6cTmb1jX.js";import{L as l}from"./LayoutGridItem-CVWVBh65.js";import"./index-B3evPFBL.js";import{t as x}from"./tokens-DXy5hgn5.js";import"./iframe-D0A79CBI.js";import"./index-jEDObK_5.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./index-C66nt8TK.js";import"./index-Cu4lwwaE.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";import"./text-centered-C0V1O_Sd.js";import"./classNames-BUL1Zq7e.js";import"./filterAttributesPassedByRadixUIAtRuntime-Bye2JkZ0.js";import"./componentNames-CVVyamkx.js";import"./index-DdzHuZ-Y.js";import"./render-icon-CwRdpin3.js";import"./defaults-B1rzzf6M.js";import"./useHostname-CH18gHFj.js";import"./index-CC6DAVyL.js";import"./breakpoints-BfMlrtxE.js";import"./layout-relative.module-1z75aSwo-DNAR_Nv2.js";import"./constants-DYYVurUY.js";import"./constants-BgBLeZzp.js";const o=({inverted:t,textToken:n})=>{const c=x.color.text[n];return Array.isArray(c)?r.jsxs(l,{children:[r.jsx(a,{level:"h4",children:n}),r.jsx("div",{style:{color:`var(--${c[1]})`,maxWidth:"240px",padding:"10px",background:`var(--${t?x.color.background.primaryInverted[1]:x.color.background.primary[1]})`},children:r.jsxs("code",{children:["color.text.",n]})})]},n):null};o.defaultProps={inverted:!1};const e=({inverted:t,bgToken:n})=>{const c=x.color.background[n];return Array.isArray(c)?r.jsxs(l,{children:[r.jsx(a,{level:"h4",children:n}),r.jsxs("div",{style:{background:`var(--${x.color.background[n][1]})`,color:`var(--${t?x.color.text.inverted[1]:x.color.text.primary[1]})`,maxWidth:"240px",padding:"10px"},children:["Background token: ",r.jsxs("code",{children:["color.background.",n]})]})]},n):null};e.defaultProps={inverted:!1};const i=({contentToken:t})=>{const n=x.color.border[t];return Array.isArray(n)?r.jsxs(l,{children:[r.jsx(a,{level:"h4",children:t}),r.jsx("br",{}),r.jsxs("div",{style:{border:`1px solid var(--${n[1]})`,background:"transparent",color:`var(--${n[1]})`,maxWidth:"240px",height:"50px",padding:"10px"},children:["color.border.",t]})]},t):null};i.defaultProps={};const p=()=>r.jsxs(d,{gap:"xs",columns:2,children:[r.jsx(s,{children:"Token family: action.variant.primary.*"}),r.jsx(s,{variant:"secondary",children:"Token family: action.variant.secondary.*"}),r.jsx(s,{variant:"tertiary",children:"Token family: action.variant.tertiary.*"}),r.jsx(s,{variant:"ghost",children:"Token family: action.variant.ghost.*"}),r.jsx(s,{variant:"critical",children:"Token family: action.variant.critical.*"}),r.jsx(s,{variant:"onColor",children:"Token family: action.variant.onColor.*"}),r.jsx(s,{variant:"inverted",children:"Token family: action.variant.inverted.*"}),r.jsx(s,{disabled:!0,children:"Token family: action.variant.disabled.*"})]}),h=()=>r.jsxs("div",{children:[r.jsx(a,{level:"h1",children:"Semantic token examples"}),r.jsx("p",{children:"With Tokyo UI the semantic tokens have been renamed and expanded to cover more use cases. Here is a list of the most important ones."}),r.jsx("br",{}),r.jsx("hr",{}),r.jsx("br",{}),r.jsx(a,{level:"h2",children:"Text tokens"}),r.jsx("br",{}),r.jsx("br",{}),r.jsxs(d,{gap:"xs",columns:4,children:[r.jsx(o,{textToken:"primary"}),r.jsx(o,{textToken:"secondary"}),r.jsx(o,{textToken:"tertiary"}),r.jsx(o,{textToken:"accentDark"}),r.jsx(o,{textToken:"placeholder"}),r.jsx(o,{textToken:"inverted",inverted:!0}),r.jsx(o,{textToken:"positive"}),r.jsx(o,{textToken:"info"}),r.jsx(o,{textToken:"warning"}),r.jsx(o,{textToken:"critical"})]}),r.jsx("br",{}),r.jsx("br",{}),r.jsx(a,{level:"h2",children:"Background tokens"}),r.jsxs(d,{gap:"xs",columns:4,children:[r.jsx(e,{bgToken:"primary"}),r.jsx(e,{bgToken:"secondary"}),r.jsx(e,{bgToken:"tertiary"}),r.jsx(e,{bgToken:"overlay"}),r.jsx(e,{bgToken:"disabled"}),r.jsx(e,{bgToken:"brand"}),r.jsx(e,{bgToken:"brandB2b"}),r.jsx(e,{bgToken:"accentLight"}),r.jsx(e,{bgToken:"accentDark",inverted:!0}),r.jsx(e,{bgToken:"positiveLight"}),r.jsx(e,{bgToken:"positiveDark",inverted:!0}),r.jsx(e,{bgToken:"infoLight"}),r.jsx(e,{bgToken:"infoDark",inverted:!0}),r.jsx(e,{bgToken:"warningLight"}),r.jsx(e,{bgToken:"warningDark",inverted:!0}),r.jsx(e,{bgToken:"criticalLight"}),r.jsx(e,{bgToken:"criticalDark",inverted:!0}),r.jsx(e,{bgToken:"statusOnline"}),r.jsx(e,{bgToken:"statusOffline"}),r.jsx(e,{bgToken:"primaryInverted",inverted:!0}),r.jsx(e,{bgToken:"secondaryInverted",inverted:!0}),r.jsx(e,{bgToken:"tertiaryInverted",inverted:!0})]}),r.jsx("br",{}),r.jsx("hr",{}),r.jsx("br",{}),r.jsx(a,{level:"h2",children:"Action"}),r.jsx("br",{}),r.jsx(p,{}),r.jsx("br",{}),r.jsx("hr",{}),r.jsx("br",{}),r.jsx(a,{level:"h2",children:"Borders"}),r.jsx("br",{}),r.jsxs(d,{gap:"xs",columns:4,children:[r.jsx(i,{contentToken:"primary"}),r.jsx(i,{contentToken:"secondary"}),r.jsx(i,{contentToken:"secondary-opacity"}),r.jsx(i,{contentToken:"tertiary"}),r.jsx(i,{contentToken:"disabled"}),r.jsx(i,{contentToken:"brand"}),r.jsx(i,{contentToken:"critical"}),r.jsx(i,{contentToken:"focus"}),r.jsx(i,{contentToken:"positive"})]})]});function j(t){return r.jsxs(r.Fragment,{children:[r.jsx(k,{title:"Guides/Semantic tokens examples"}),`
2
2
  `,r.jsx(h,{})]})}function q(t={}){const{wrapper:n}={...m(),...t.components};return n?r.jsx(n,{...t,children:r.jsx(j,{...t})}):j()}export{q as default};
@@ -1,4 +1,4 @@
1
- import{j as e}from"./jsx-runtime-BYouaCF_.js";import{useMDXComponents as o}from"./index-uOP2uDdf.js";import{M as r}from"./index-C9qzZweZ.js";import"./index-B3evPFBL.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./iframe-BJQSUUXK.js";import"./index-jEDObK_5.js";import"./index-C66nt8TK.js";import"./index-Cu4lwwaE.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";function s(i){const n={code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...o(),...i.components};return e.jsxs(e.Fragment,{children:[e.jsx(r,{title:"Guides/Shorthand Props"}),`
1
+ import{j as e}from"./jsx-runtime-BYouaCF_.js";import{useMDXComponents as o}from"./index-uOP2uDdf.js";import{M as r}from"./index-DJz3jMTz.js";import"./index-B3evPFBL.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./iframe-D0A79CBI.js";import"./index-jEDObK_5.js";import"./index-C66nt8TK.js";import"./index-Cu4lwwaE.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";function s(i){const n={code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...o(),...i.components};return e.jsxs(e.Fragment,{children:[e.jsx(r,{title:"Guides/Shorthand Props"}),`
2
2
  `,e.jsx(n.h1,{id:"shorthand-props",children:"Shorthand Props"}),`
3
3
  `,e.jsxs(n.p,{children:["Some components accept shorthand values for spacing properties like ",e.jsx(n.code,{children:"padding"})," and ",e.jsx(n.code,{children:"margin"}),". These props can be specified in several ways:"]}),`
4
4
  `,e.jsx(n.h2,{id:"single-value",children:"Single Value"}),`
@@ -0,0 +1,144 @@
1
+ import{j as e}from"./jsx-runtime-BYouaCF_.js";import{L as I}from"./LayoutFlexItem-RxfNp994.js";import{L as n}from"./LayoutFlex-oRwI31fW.js";import{f as L,d as D}from"./styled-components.browser.esm-CwsnEFnS.js";import"./index-B3evPFBL.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./align-self-BM6l9H5Z.js";import"./layout-relative.module-ed9bC4H4.js";import"./classNames-BUL1Zq7e.js";import"./constants-DYYVurUY.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./componentNames-CVVyamkx.js";import"./index-DdzHuZ-Y.js";import"./defaults-B1rzzf6M.js";function S(s){return e.jsx("div",{style:{background:"yellow",width:"100%"},children:s.children})}function b(s){return e.jsx("div",{style:{background:"orange",width:"100%"},children:s.children})}function T(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"NowrapUndefined"}),e.jsxs(n,{dataset:{testid:"NowrapUndefined"},children:[e.jsx(S,{children:"a"}),e.jsx(b,{children:"b"})]})]})}function G(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"NowrapTrue"}),e.jsxs(n,{dataset:{testid:"NowrapTrue"},nowrap:!0,children:[e.jsx(S,{children:"a"}),e.jsx(b,{children:"b"})]})]})}function U(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"NowrapFalse"}),e.jsxs(n,{dataset:{testid:"NowrapFalse"},nowrap:!1,children:[e.jsx(S,{children:"a"}),e.jsx(b,{children:"b"})]})]})}function c(s){return e.jsx("div",{style:{background:"yellow"},children:s.children})}function x(s){return e.jsx("div",{style:{background:"orange"},children:s.children})}function P(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"ColumnReverseTrueUndefined"}),e.jsxs(n,{dataset:{testid:"ColumnReverseTrueUndefined"},column:!0,children:[e.jsx(c,{children:"a"}),e.jsx(x,{children:"b"})]})]})}function H(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"ColumnReverseTrueFalse"}),e.jsxs(n,{dataset:{testid:"ColumnReverseTrueFalse"},column:!0,reverse:!1,children:[e.jsx(c,{children:"a"}),e.jsx(x,{children:"b"})]})]})}function O(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"ColumnReverseTrueTrue"}),e.jsxs(n,{dataset:{testid:"ColumnReverseTrueTrue"},column:!0,reverse:!0,children:[e.jsx(c,{children:"a"}),e.jsx(x,{children:"b"})]})]})}function $(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"ColumnReverseFalseUndefined"}),e.jsxs(n,{dataset:{testid:"ColumnReverseFalseUndefined"},column:!1,children:[e.jsx(c,{children:"a"}),e.jsx(x,{children:"b"})]})]})}function A(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"ColumnReverseFalseFalse"}),e.jsxs(n,{dataset:{testid:"ColumnReverseFalseFalse"},column:!1,reverse:!1,children:[e.jsx(c,{children:"a"}),e.jsx(x,{children:"b"})]})]})}function J(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"ColumnReverseFalseTrue"}),e.jsxs(n,{dataset:{testid:"ColumnReverseFalseTrue"},column:!1,reverse:!0,children:[e.jsx(c,{children:"a"}),e.jsx(x,{children:"b"})]})]})}function k(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"ColumnReverseUndefinedUndefined"}),e.jsxs(n,{dataset:{testid:"ColumnReverseUndefinedUndefined"},children:[e.jsx(c,{children:"a"}),e.jsx(x,{children:"b"})]})]})}function N(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"ColumnReverseUndefinedFalse"}),e.jsxs(n,{dataset:{testid:"ColumnReverseUndefinedFalse"},reverse:!1,children:[e.jsx(c,{children:"a"}),e.jsx(x,{children:"b"})]})]})}function _(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"ColumnReverseUndefinedTrue"}),e.jsxs(n,{dataset:{testid:"ColumnReverseUndefinedTrue"},reverse:!0,children:[e.jsx(c,{children:"a"}),e.jsx(x,{children:"b"})]})]})}function p(s){return e.jsx("div",{style:{background:"yellow",width:"50%"},children:s.children})}function g(s){return e.jsx("div",{style:{background:"orange",width:"50%"},children:s.children})}function X(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"DirectionRow"}),e.jsxs(n,{dataset:{testid:"DirectionRow"},direction:"row",children:[e.jsx(p,{children:"a"}),e.jsx(g,{children:"b"})]})]})}function E(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"DirectionRowReverse"}),e.jsxs(n,{dataset:{testid:"DirectionRowReverse"},direction:"row-reverse",children:[e.jsx(p,{children:"a"}),e.jsx(g,{children:"b"})]})]})}function M(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"DirectionColumn"}),e.jsxs(n,{dataset:{testid:"DirectionColumn"},direction:"column",children:[e.jsx(p,{children:"a"}),e.jsx(g,{children:"b"})]})]})}function B(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"DirectionColumnReverse"}),e.jsxs(n,{dataset:{testid:"DirectionColumnReverse"},direction:"column-reverse",children:[e.jsx(p,{children:"a"}),e.jsx(g,{children:"b"})]})]})}function q(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"DirectionColumnReverseResponsive"}),e.jsxs(n,{dataset:{testid:"DirectionColumnReverseResponsive"},direction:{_:"column-reverse","narrow-l":"column","medium-s":"row-reverse","medium-l":"column-reverse","wide-s":"column","wide-l":"row-reverse"},children:[e.jsx(p,{children:"A"}),e.jsx(g,{children:"B"})]})]})}function z(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"DirectionColumnReverseResponsiveInvertedOrder"}),e.jsxs(n,{dataset:{testid:"DirectionColumnReverseResponsiveInvertedOrder"},direction:{"wide-l":"row-reverse","wide-s":"column","medium-l":"column-reverse","medium-s":"row-reverse","narrow-l":"column",_:"column-reverse"},children:[e.jsx(p,{children:"A"}),e.jsx(g,{children:"B"})]})]})}function j(s){return e.jsx("div",{style:{background:"yellow",width:"20%"},children:s.children})}function h(s){return e.jsx("div",{style:{background:"orange",width:"20%"},children:s.children})}function K(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"JustifyContentCenter"}),e.jsxs(n,{dataset:{testid:"JustifyContentCenter"},justifyContent:"center",children:[e.jsx(j,{children:"a"}),e.jsx(h,{children:"b"})]})]})}function Q(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"JustifyContentStart"}),e.jsxs(n,{dataset:{testid:"JustifyContentStart"},justifyContent:"start",children:[e.jsx(j,{children:"a"}),e.jsx(h,{children:"b"})]})]})}function V(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"JustifyContentEnd"}),e.jsxs(n,{dataset:{testid:"JustifyContentEnd"},justifyContent:"end",children:[e.jsx(j,{children:"a"}),e.jsx(h,{children:"b"})]})]})}function W(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"JustifyContentSpaceBetween"}),e.jsxs(n,{dataset:{testid:"JustifyContentSpaceBetween"},justifyContent:"space-between",children:[e.jsx(j,{children:"a"}),e.jsx(h,{children:"b"})]})]})}function Y(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"JustifyContentSpaceAround"}),e.jsxs(n,{dataset:{testid:"JustifyContentSpaceAround"},justifyContent:"space-around",children:[e.jsx(j,{children:"a"}),e.jsx(h,{children:"b"})]})]})}function Z(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"JustifyContentSpaceEvenly"}),e.jsxs(n,{dataset:{testid:"JustifyContentSpaceEvenly"},justifyContent:"space-evenly",children:[e.jsx(j,{children:"a"}),e.jsx(h,{children:"b"})]})]})}function ee(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"JustifyContentResponsive"}),e.jsxs(n,{dataset:{testid:"JustifyContentResponsive"},justifyContent:{_:"center","narrow-l":"end","medium-s":"space-around","medium-l":"space-around","wide-s":"space-evenly","wide-l":"end"},children:[e.jsx(j,{children:"a"}),e.jsx(h,{children:"b"})]})]})}function ne(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"JustifyContentResponsiveInvertedOrder"}),e.jsxs(n,{dataset:{testid:"JustifyContentResponsiveInvertedOrder"},justifyContent:{"wide-l":"end","wide-s":"space-evenly","medium-l":"space-around","medium-s":"space-around","narrow-l":"end",_:"center"},children:[e.jsx(j,{children:"a"}),e.jsx(h,{children:"b"})]})]})}function u(s){return e.jsx("div",{style:{background:"yellow",height:"60px"},children:s.children})}function o(s){return e.jsx("div",{style:{background:"orange"},children:s.children})}function se(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"AlignItemsCenter"}),e.jsxs(n,{dataset:{testid:"AlignItemsCenter"},alignItems:"center",children:[e.jsx(u,{children:"a"}),e.jsx(o,{children:"b"})]})]})}function ie(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"AlignItemsStart"}),e.jsxs(n,{dataset:{testid:"AlignItemsStart"},alignItems:"start",children:[e.jsx(u,{children:"a"}),e.jsx(o,{children:"b"})]})]})}function re(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"AlignItemsEnd"}),e.jsxs(n,{dataset:{testid:"AlignItemsEnd"},alignItems:"end",children:[e.jsx(u,{children:"a"}),e.jsx(o,{children:"b"})]})]})}function de(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"AlignItemsStretch"}),e.jsxs(n,{dataset:{testid:"AlignItemsStretch"},alignItems:"stretch",children:[e.jsx(u,{children:"a"}),e.jsx(o,{children:"b"})]})]})}function te(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"AlignItemsBaseline"}),e.jsxs(n,{dataset:{testid:"AlignItemsBaseline"},alignItems:"baseline",children:[e.jsx(u,{children:"a"}),e.jsx(o,{children:"b"})]})]})}function ae(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"AlignItemsResponsive"}),e.jsxs(n,{dataset:{testid:"AlignItemsResponsive"},alignItems:{_:"center","narrow-l":"end","medium-s":"baseline","medium-l":"center","wide-s":"stretch","wide-l":"end"},children:[e.jsx(u,{children:"a"}),e.jsx(o,{children:"b"})]})]})}function le(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"AlignItemsResponsiveInvertedOrder"}),e.jsxs(n,{dataset:{testid:"AlignItemsResponsiveInvertedOrder"},alignItems:{"wide-l":"end","wide-s":"stretch","medium-l":"center","medium-s":"baseline","narrow-l":"end",_:"center"},children:[e.jsx(u,{children:"a"}),e.jsx(o,{children:"b"})]})]})}function d(s){return e.jsx("div",{style:{background:"yellow"},children:s.children})}function t(s){return e.jsx("div",{style:{background:"orange"},children:s.children})}function ce(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Spacing0"}),e.jsxs(n,{dataset:{testid:"Spacing0"},gap:"0",children:[e.jsx(d,{children:"a"}),e.jsx(t,{children:"b"})]})]})}function xe(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Spacing1"}),e.jsxs(n,{dataset:{testid:"Spacing1"},gap:"1",children:[e.jsx(d,{children:"a"}),e.jsx(t,{children:"b"})]})]})}function je(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Spacing2"}),e.jsxs(n,{dataset:{testid:"Spacing2"},gap:"2",children:[e.jsx(d,{children:"a"}),e.jsx(t,{children:"b"})]})]})}function he(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Spacing4"}),e.jsxs(n,{dataset:{testid:"Spacing4"},gap:"4",children:[e.jsx(d,{children:"a"}),e.jsx(t,{children:"b"})]})]})}function ue(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Spacing8"}),e.jsxs(n,{dataset:{testid:"Spacing8"},gap:"8",children:[e.jsx(d,{children:"a"}),e.jsx(t,{children:"b"})]})]})}function oe(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Spacing12"}),e.jsxs(n,{dataset:{testid:"Spacing12"},gap:"12",children:[e.jsx(d,{children:"a"}),e.jsx(t,{children:"b"})]})]})}function pe(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Spacing16"}),e.jsxs(n,{dataset:{testid:"Spacing16"},gap:"16",children:[e.jsx(d,{children:"a"}),e.jsx(t,{children:"b"})]})]})}function ge(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Spacing20"}),e.jsxs(n,{dataset:{testid:"Spacing20"},gap:"20",children:[e.jsx(d,{children:"a"}),e.jsx(t,{children:"b"})]})]})}function me(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Spacing24"}),e.jsxs(n,{dataset:{testid:"Spacing24"},gap:"24",children:[e.jsx(d,{children:"a"}),e.jsx(t,{children:"b"})]})]})}function fe(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Spacing32"}),e.jsxs(n,{dataset:{testid:"Spacing32"},gap:"32",children:[e.jsx(d,{children:"a"}),e.jsx(t,{children:"b"})]})]})}function ve(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Spacing48"}),e.jsxs(n,{dataset:{testid:"Spacing48"},gap:"48",children:[e.jsx(d,{children:"a"}),e.jsx(t,{children:"b"})]})]})}function Se(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Spacing64"}),e.jsxs(n,{dataset:{testid:"Spacing64"},gap:"64",children:[e.jsx(d,{children:"a"}),e.jsx(t,{children:"b"})]})]})}function be(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Spacing96"}),e.jsxs(n,{dataset:{testid:"Spacing96"},gap:"96",children:[e.jsx(d,{children:"a"}),e.jsx(t,{children:"b"})]})]})}function Fe(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Spacing160"}),e.jsxs(n,{dataset:{testid:"Spacing160"},gap:"160",children:[e.jsx(d,{children:"a"}),e.jsx(t,{children:"b"})]})]})}function ye(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"LayoutGapNone"}),e.jsxs(n,{dataset:{testid:"LayoutGapNone"},gap:"none",children:[e.jsx(d,{children:"a"}),e.jsx(t,{children:"b"})]})]})}function Re(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"LayoutGap3xs"}),e.jsxs(n,{dataset:{testid:"LayoutGap3xs"},gap:"3xs",children:[e.jsx(d,{children:"a"}),e.jsx(t,{children:"b"})]})]})}function we(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"LayoutGap2xs"}),e.jsxs(n,{dataset:{testid:"LayoutGap2xs"},gap:"2xs",children:[e.jsx(d,{children:"a"}),e.jsx(t,{children:"b"})]})]})}function Ce(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"LayoutGapXs"}),e.jsxs(n,{dataset:{testid:"LayoutGapXs"},gap:"xs",children:[e.jsx(d,{children:"a"}),e.jsx(t,{children:"b"})]})]})}function Ie(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"LayoutGapS"}),e.jsxs(n,{dataset:{testid:"LayoutGapS"},gap:"s",children:[e.jsx(d,{children:"a"}),e.jsx(t,{children:"b"})]})]})}function Le(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"LayoutGapM"}),e.jsxs(n,{dataset:{testid:"LayoutGapM"},gap:"m",children:[e.jsx(d,{children:"a"}),e.jsx(t,{children:"b"})]})]})}function De(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"LayoutGapL"}),e.jsxs(n,{dataset:{testid:"LayoutGapL"},gap:"l",children:[e.jsx(d,{children:"a"}),e.jsx(t,{children:"b"})]})]})}function Te(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"LayoutGapXl"}),e.jsxs(n,{dataset:{testid:"LayoutGapXl"},gap:"xl",children:[e.jsx(d,{children:"a"}),e.jsx(t,{children:"b"})]})]})}function Ge(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"SpacingResponsive"}),e.jsxs(n,{dataset:{testid:"SpacingResponsive"},gap:{_:"4","narrow-l":"8","medium-s":"12","medium-l":"16","wide-s":"20","wide-l":"24"},children:[e.jsx(d,{children:"a"}),e.jsx(t,{children:"b"})]})]})}function Ue(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"SpacingResponsiveInvertedOrder"}),e.jsxs(n,{dataset:{testid:"SpacingResponsiveInvertedOrder"},gap:{"wide-l":"24","wide-s":"20","medium-l":"16","medium-s":"12","narrow-l":"8",_:"4"},children:[e.jsx(d,{children:"a"}),e.jsx(t,{children:"b"})]})]})}function i(s){return e.jsx("div",{style:{background:"yellow"},children:s.children})}function r(s){return e.jsx("div",{style:{background:"orange"},children:s.children})}function Pe(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Spacing0"}),e.jsxs(n,{dataset:{testid:"Spacing0"},padding:"0",children:[e.jsx(i,{children:"a"}),e.jsx(r,{children:"b"})]})]})}function He(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Spacing1"}),e.jsxs(n,{dataset:{testid:"Spacing1"},padding:"1",children:[e.jsx(i,{children:"a"}),e.jsx(r,{children:"b"})]})]})}function Oe(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Spacing2"}),e.jsxs(n,{dataset:{testid:"Spacing2"},padding:"2",children:[e.jsx(i,{children:"a"}),e.jsx(r,{children:"b"})]})]})}function $e(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Spacing4"}),e.jsxs(n,{dataset:{testid:"Spacing4"},padding:"4",children:[e.jsx(i,{children:"a"}),e.jsx(r,{children:"b"})]})]})}function Ae(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Spacing8"}),e.jsxs(n,{dataset:{testid:"Spacing8"},padding:"8",children:[e.jsx(i,{children:"a"}),e.jsx(r,{children:"b"})]})]})}function Je(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Spacing12"}),e.jsxs(n,{dataset:{testid:"Spacing12"},padding:"12",children:[e.jsx(i,{children:"a"}),e.jsx(r,{children:"b"})]})]})}function ke(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Spacing16"}),e.jsxs(n,{dataset:{testid:"Spacing16"},padding:"16",children:[e.jsx(i,{children:"a"}),e.jsx(r,{children:"b"})]})]})}function Ne(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Spacing20"}),e.jsxs(n,{dataset:{testid:"Spacing20"},padding:"20",children:[e.jsx(i,{children:"a"}),e.jsx(r,{children:"b"})]})]})}function _e(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Spacing24"}),e.jsxs(n,{dataset:{testid:"Spacing24"},padding:"24",children:[e.jsx(i,{children:"a"}),e.jsx(r,{children:"b"})]})]})}function Xe(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Spacing32"}),e.jsxs(n,{dataset:{testid:"Spacing32"},padding:"32",children:[e.jsx(i,{children:"a"}),e.jsx(r,{children:"b"})]})]})}function Ee(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Spacing48"}),e.jsxs(n,{dataset:{testid:"Spacing48"},padding:"48",children:[e.jsx(i,{children:"a"}),e.jsx(r,{children:"b"})]})]})}function Me(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Spacing64"}),e.jsxs(n,{dataset:{testid:"Spacing64"},padding:"64",children:[e.jsx(i,{children:"a"}),e.jsx(r,{children:"b"})]})]})}function Be(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Spacing96"}),e.jsxs(n,{dataset:{testid:"Spacing96"},padding:"96",children:[e.jsx(i,{children:"a"}),e.jsx(r,{children:"b"})]})]})}function qe(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Spacing160"}),e.jsxs(n,{dataset:{testid:"Spacing160"},padding:"160",children:[e.jsx(i,{children:"a"}),e.jsx(r,{children:"b"})]})]})}function ze(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"LayoutPaddingNone"}),e.jsxs(n,{dataset:{testid:"LayoutPaddingNone"},padding:"none",children:[e.jsx(i,{children:"a"}),e.jsx(r,{children:"b"})]})]})}function Ke(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"LayoutPadding3xs"}),e.jsxs(n,{dataset:{testid:"LayoutPadding3xs"},padding:"3xs",children:[e.jsx(i,{children:"a"}),e.jsx(r,{children:"b"})]})]})}function Qe(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"LayoutPadding2xs"}),e.jsxs(n,{dataset:{testid:"LayoutPadding2xs"},padding:"2xs",children:[e.jsx(i,{children:"a"}),e.jsx(r,{children:"b"})]})]})}function Ve(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"LayoutPaddingXs"}),e.jsxs(n,{dataset:{testid:"LayoutPaddingXs"},padding:"xs",children:[e.jsx(i,{children:"a"}),e.jsx(r,{children:"b"})]})]})}function We(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"LayoutPaddingS"}),e.jsxs(n,{dataset:{testid:"LayoutPaddingS"},padding:"s",children:[e.jsx(i,{children:"a"}),e.jsx(r,{children:"b"})]})]})}function Ye(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"LayoutPaddingM"}),e.jsxs(n,{dataset:{testid:"LayoutPaddingM"},padding:"m",children:[e.jsx(i,{children:"a"}),e.jsx(r,{children:"b"})]})]})}function Ze(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"LayoutPaddingL"}),e.jsxs(n,{dataset:{testid:"LayoutPaddingL"},padding:"l",children:[e.jsx(i,{children:"a"}),e.jsx(r,{children:"b"})]})]})}function en(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"LayoutPaddingXl"}),e.jsxs(n,{dataset:{testid:"LayoutPaddingXl"},padding:"xl",children:[e.jsx(i,{children:"a"}),e.jsx(r,{children:"b"})]})]})}function nn(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"SpacingResponsive"}),e.jsxs(n,{dataset:{testid:"SpacingResponsive"},padding:{_:"4","narrow-l":"8","medium-s":"12","medium-l":"16","wide-s":"20","wide-l":"24"},children:[e.jsx(i,{children:"a"}),e.jsx(r,{children:"b"})]})]})}function sn(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"SpacingResponsiveInvertedOrder"}),e.jsxs(n,{dataset:{testid:"SpacingResponsiveInvertedOrder"},padding:{"wide-l":"24","wide-s":"20","medium-l":"16","medium-s":"12","narrow-l":"8",_:"4"},children:[e.jsx(i,{children:"a"}),e.jsx(r,{children:"b"})]})]})}function rn(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"SpacingShorthand2"}),e.jsxs(n,{dataset:{testid:"SpacingShorthand2"},padding:["12","24"],children:[e.jsx(i,{children:"a"}),e.jsx(r,{children:"b"})]})]})}function dn(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"SpacingShorthand3"}),e.jsxs(n,{dataset:{testid:"SpacingShorthand3"},padding:["12","24","48"],children:[e.jsx(i,{children:"a"}),e.jsx(r,{children:"b"})]})]})}function tn(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"SpacingShorthand4"}),e.jsxs(n,{dataset:{testid:"SpacingShorthand4"},padding:["12","24","48","64"],children:[e.jsx(i,{children:"a"}),e.jsx(r,{children:"b"})]})]})}function an(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"SpacingShorthandResponsive"}),e.jsxs(n,{dataset:{testid:"SpacingShorthandResponsive"},padding:{_:["1","2","4","8"],"narrow-l":["12","24","48","64"],"medium-s":["1","2","4","8"],"medium-l":["12","24","48","64"],"wide-s":["1","2","4","8"],"wide-l":["12","24","48","64"]},children:[e.jsx(i,{children:"a"}),e.jsx(r,{children:"b"})]})]})}function ln(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"SpacingMixResponsive"}),e.jsxs(n,{dataset:{testid:"SpacingMixResponsive"},padding:{_:["1","2","4","8"],"narrow-l":"12","medium-s":["1","2"],"medium-l":["12","24","48"],"wide-s":["1","2","4","8"],"wide-l":"64"},children:[e.jsx(i,{children:"a"}),e.jsx(r,{children:"b"})]})]})}function a(s){return e.jsx("div",{style:{background:"yellow",width:"20%"},children:s.children})}function l(s){return e.jsx("div",{style:{background:"orange",width:"20%"},children:s.children})}function cn(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"HideInlineTrueUndefined"}),e.jsxs(n,{dataset:{testid:"HideInlineTrueUndefined"},hide:!0,children:[e.jsx(a,{children:"a"}),e.jsx(l,{children:"b"})]})]})}function xn(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"HideInlineTrueFalse"}),e.jsxs(n,{dataset:{testid:"HideInlineTrueFalse"},hide:!0,inline:!1,children:[e.jsx(a,{children:"a"}),e.jsx(l,{children:"b"})]})]})}function jn(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"HideInlineTrueTrue"}),e.jsxs(n,{dataset:{testid:"HideInlineTrueTrue"},hide:!0,inline:!0,children:[e.jsx(a,{children:"a"}),e.jsx(l,{children:"b"})]})]})}function hn(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"HideInlineFalseUndefined"}),e.jsxs(n,{dataset:{testid:"HideInlineFalseUndefined"},hide:!1,children:[e.jsx(a,{children:"a"}),e.jsx(l,{children:"b"})]})]})}function un(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"HideInlineFalseFalse"}),e.jsxs(n,{dataset:{testid:"HideInlineFalseFalse"},hide:!1,inline:!1,children:[e.jsx(a,{children:"a"}),e.jsx(l,{children:"b"})]})]})}function on(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"HideInlineFalseTrue"}),e.jsxs(n,{dataset:{testid:"HideInlineFalseTrue"},hide:!1,inline:!0,children:[e.jsx(a,{children:"a"}),e.jsx(l,{children:"b"})]})]})}function pn(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"HideInlineUndefinedUndefined"}),e.jsxs(n,{dataset:{testid:"HideInlineUndefinedUndefined"},children:[e.jsx(a,{children:"a"}),e.jsx(l,{children:"b"})]})]})}function gn(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"HideInlineUndefinedFalse"}),e.jsxs(n,{dataset:{testid:"HideInlineUndefinedFalse"},inline:!1,children:[e.jsx(a,{children:"a"}),e.jsx(l,{children:"b"})]})]})}function mn(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"HideInlineUndefinedTrue"}),e.jsxs(n,{dataset:{testid:"HideInlineUndefinedTrue"},inline:!0,children:[e.jsx(a,{children:"a"}),e.jsx(l,{children:"b"})]})]})}function fn(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"HideInlineResponsive"}),e.jsxs(n,{dataset:{testid:"HideInlineResponsive"},hide:{_:!0,"narrow-l":!1,"medium-s":!0,"medium-l":!1,"wide-s":!0,"wide-l":!1},inline:!0,children:[e.jsx(a,{children:"A responsive"}),e.jsx(l,{children:"B responsive"})]})]})}function vn(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"HideInlineResponsiveInvertedOrder"}),e.jsxs(n,{dataset:{testid:"HideInlineResponsiveInvertedOrder"},hide:{"wide-l":!1,"wide-s":!0,"medium-l":!1,"medium-s":!0,"narrow-l":!1,_:!0},inline:!0,children:[e.jsx(a,{children:"a"}),e.jsx(l,{children:"b"})]})]})}function f(s){return e.jsx("div",{style:{background:"yellow"},children:s.children})}function v(s){return e.jsx("div",{style:{background:"orange"},children:s.children})}function Sn(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"RelativeTrue"}),e.jsxs(n,{dataset:{testid:"RelativeTrue"},relative:!0,children:[e.jsx(f,{children:"a"}),e.jsx(v,{children:"b"})]})]})}function bn(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"RelativeFalse"}),e.jsxs(n,{dataset:{testid:"RelativeFalse"},relative:!1,children:[e.jsx(f,{children:"a"}),e.jsx(v,{children:"b"})]})]})}function Fn(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"RelativeResponsive"}),e.jsxs(n,{dataset:{testid:"RelativeResponsive"},relative:{_:!0,"narrow-l":!1,"medium-s":!0,"medium-l":!1,"wide-s":!0,"wide-l":!1},children:[e.jsx(f,{children:"a"}),e.jsx(v,{children:"b"})]})]})}function yn(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"RelativeResponsiveInvertedOrder"}),e.jsxs(n,{dataset:{testid:"RelativeResponsiveInvertedOrder"},relative:{"wide-l":!1,"wide-s":!0,"medium-l":!1,"medium-s":!0,"narrow-l":!1,_:!0},children:[e.jsx(f,{children:"a"}),e.jsx(v,{children:"b"})]})]})}function w(s){return e.jsx("div",{style:{background:"yellow"},children:s.children})}function C(s){return e.jsx("div",{style:{background:"orange"},children:s.children})}const Rn=L`
2
+ div[data-override='true'] {
3
+ display:grid;
4
+ }
5
+ `;function wn(){return e.jsxs(e.Fragment,{children:[e.jsx(Rn,{}),e.jsx("span",{children:"DataOverrideGlobalClass"}),e.jsxs(n,{dataset:{testid:"DataOverrideGlobalClass",override:!0},children:[e.jsx(w,{children:"a"}),e.jsx(C,{children:"b"})]})]})}const Cn=D.div`
6
+ div[data-override='true'] {
7
+ display: grid;
8
+ }
9
+ `;function In(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"DataOverrideLocalClass"}),e.jsx(Cn,{children:e.jsxs(n,{dataset:{testid:"DataOverrideLocalClass",override:!0},children:[e.jsx(w,{children:"a"}),e.jsx(C,{children:"b"})]})})]})}function Ln(s){return e.jsx("div",{style:{background:"yellow"},children:s.children})}function Dn(s){return e.jsx("div",{style:{background:"orange"},children:s.children})}function Tn(){return e.jsxs(e.Fragment,{children:[e.jsx("span",{children:"Default"}),e.jsxs(n,{dataset:{testid:"Default"},children:[e.jsx(Ln,{children:"a"}),e.jsx(Dn,{children:"b"})]})]})}const Bn={title:"components/LayoutFlex",component:n,tags:["!autodocs"],subcomponents:{LayoutFlexItem:I},parameters:{chromatic:{modes:{"narrow-l":{viewport:"narrow-l"},"medium-s":{viewport:"medium-s"},"medium-l":{viewport:"medium-l"},"wide-s":{viewport:"wide-s"},"wide-l":{viewport:"wide-l"}}}}},m=()=>e.jsxs(e.Fragment,{children:[e.jsx(Tn,{}),e.jsx("br",{}),e.jsx("br",{}),e.jsx(T,{}),e.jsx(G,{}),e.jsx(U,{}),e.jsx("br",{}),e.jsx("br",{}),e.jsx(P,{}),e.jsx(H,{}),e.jsx(O,{}),e.jsx($,{}),e.jsx(A,{}),e.jsx(J,{}),e.jsx(k,{}),e.jsx(N,{}),e.jsx(_,{}),e.jsx("br",{}),e.jsx("br",{}),e.jsx(X,{}),e.jsx(E,{}),e.jsx(M,{}),e.jsx(B,{}),e.jsx(q,{}),e.jsx(z,{}),e.jsx("br",{}),e.jsx("br",{}),e.jsx(K,{}),e.jsx(Q,{}),e.jsx(V,{}),e.jsx(W,{}),e.jsx(Y,{}),e.jsx(Z,{}),e.jsx(ee,{}),e.jsx(ne,{}),e.jsx("br",{}),e.jsx("br",{}),e.jsx(se,{}),e.jsx(ie,{}),e.jsx(re,{}),e.jsx(de,{}),e.jsx(te,{}),e.jsx(ae,{}),e.jsx(le,{}),e.jsx("br",{}),e.jsx("br",{}),e.jsx(ce,{}),e.jsx(xe,{}),e.jsx(je,{}),e.jsx(he,{}),e.jsx(ue,{}),e.jsx(oe,{}),e.jsx(pe,{}),e.jsx(ge,{}),e.jsx(me,{}),e.jsx(fe,{}),e.jsx(ve,{}),e.jsx(Se,{}),e.jsx(be,{}),e.jsx(Fe,{}),e.jsx(ye,{}),e.jsx(Re,{}),e.jsx(we,{}),e.jsx(Ce,{}),e.jsx(Ie,{}),e.jsx(Le,{}),e.jsx(De,{}),e.jsx(Te,{}),e.jsx(Ge,{}),e.jsx(Ue,{}),e.jsx("br",{}),e.jsx("br",{}),e.jsx(Pe,{}),e.jsx(He,{}),e.jsx(Oe,{}),e.jsx($e,{}),e.jsx(Ae,{}),e.jsx(Je,{}),e.jsx(ke,{}),e.jsx(Ne,{}),e.jsx(_e,{}),e.jsx(Xe,{}),e.jsx(Ee,{}),e.jsx(Me,{}),e.jsx(Be,{}),e.jsx(qe,{}),e.jsx(ze,{}),e.jsx(Ke,{}),e.jsx(Qe,{}),e.jsx(Ve,{}),e.jsx(We,{}),e.jsx(Ye,{}),e.jsx(Ze,{}),e.jsx(en,{}),e.jsx(nn,{}),e.jsx(sn,{}),e.jsx(rn,{}),e.jsx(dn,{}),e.jsx(tn,{}),e.jsx(an,{}),e.jsx(ln,{}),e.jsx("br",{}),e.jsx("br",{}),e.jsx(cn,{}),e.jsx("br",{}),e.jsx(xn,{}),e.jsx("br",{}),e.jsx(jn,{}),e.jsx("br",{}),e.jsx(hn,{}),e.jsx("br",{}),e.jsx(un,{}),e.jsx("br",{}),e.jsx(on,{}),e.jsx("br",{}),e.jsx(pn,{}),e.jsx("br",{}),e.jsx(gn,{}),e.jsx("br",{}),e.jsx(mn,{}),e.jsx("br",{}),e.jsx(fn,{}),e.jsx("br",{}),e.jsx(vn,{}),e.jsx("br",{}),e.jsx("br",{}),e.jsx(Sn,{}),e.jsx(bn,{}),e.jsx(Fn,{}),e.jsx(yn,{}),e.jsx("br",{}),e.jsx("br",{}),e.jsx(wn,{}),e.jsx(In,{})]});m.storyName="Combinations";var F,y,R;m.parameters={...m.parameters,docs:{...(F=m.parameters)==null?void 0:F.docs,source:{originalSource:`() => <>
10
+ <Default />
11
+ <br />
12
+ <br />
13
+ <NowrapUndefined />
14
+ <NowrapTrue />
15
+ <NowrapFalse />
16
+ <br />
17
+ <br />
18
+ <ColumnReverseTrueUndefined />
19
+ <ColumnReverseTrueFalse />
20
+ <ColumnReverseTrueTrue />
21
+ <ColumnReverseFalseUndefined />
22
+ <ColumnReverseFalseFalse />
23
+ <ColumnReverseFalseTrue />
24
+ <ColumnReverseUndefinedUndefined />
25
+ <ColumnReverseUndefinedFalse />
26
+ <ColumnReverseUndefinedTrue />
27
+ <br />
28
+ <br />
29
+ <DirectionRow />
30
+ <DirectionRowReverse />
31
+ <DirectionColumn />
32
+ <DirectionColumnReverse />
33
+ <DirectionColumnReverseResponsive />
34
+ <DirectionColumnReverseResponsiveInvertedOrder />
35
+ <br />
36
+ <br />
37
+ <JustifyContentCenter />
38
+ <JustifyContentStart />
39
+ <JustifyContentEnd />
40
+ <JustifyContentSpaceBetween />
41
+ <JustifyContentSpaceAround />
42
+ <JustifyContentSpaceEvenly />
43
+ <JustifyContentResponsive />
44
+ <JustifyContentResponsiveInvertedOrder />
45
+ <br />
46
+ <br />
47
+ <AlignItemsCenter />
48
+ <AlignItemsStart />
49
+ <AlignItemsEnd />
50
+ <AlignItemsStretch />
51
+ <AlignItemsBaseline />
52
+ <AlignItemsResponsive />
53
+ <AlignItemsResponsiveInvertedOrder />
54
+ <br />
55
+ <br />
56
+ <GapSpacing0 />
57
+ <GapSpacing1 />
58
+ <GapSpacing2 />
59
+ <GapSpacing4 />
60
+ <GapSpacing8 />
61
+ <GapSpacing12 />
62
+ <GapSpacing16 />
63
+ <GapSpacing20 />
64
+ <GapSpacing24 />
65
+ <GapSpacing32 />
66
+ <GapSpacing48 />
67
+ <GapSpacing64 />
68
+ <GapSpacing96 />
69
+ <GapSpacing160 />
70
+ <LayoutGapNone />
71
+ <LayoutGap3xs />
72
+ <LayoutGap2xs />
73
+ <LayoutGapXs />
74
+ <LayoutGapS />
75
+ <LayoutGapM />
76
+ <LayoutGapL />
77
+ <LayoutGapXl />
78
+ <GapSpacingResponsive />
79
+ <GapSpacingResponsiveInvertedOrder />
80
+ <br />
81
+ <br />
82
+ <PaddingSpacing0 />
83
+ <PaddingSpacing1 />
84
+ <PaddingSpacing2 />
85
+ <PaddingSpacing4 />
86
+ <PaddingSpacing8 />
87
+ <PaddingSpacing12 />
88
+ <PaddingSpacing16 />
89
+ <PaddingSpacing20 />
90
+ <PaddingSpacing24 />
91
+ <PaddingSpacing32 />
92
+ <PaddingSpacing48 />
93
+ <PaddingSpacing64 />
94
+ <PaddingSpacing96 />
95
+ <PaddingSpacing160 />
96
+ <LayoutPaddingNone />
97
+ <LayoutPadding3xs />
98
+ <LayoutPadding2xs />
99
+ <LayoutPaddingXs />
100
+ <LayoutPaddingS />
101
+ <LayoutPaddingM />
102
+ <LayoutPaddingL />
103
+ <LayoutPaddingXl />
104
+ <PaddingSpacingResponsive />
105
+ <PaddingSpacingResponsiveInvertedOrder />
106
+ <SpacingShorthand2 />
107
+ <SpacingShorthand3 />
108
+ <SpacingShorthand4 />
109
+ <SpacingShorthandResponsive />
110
+ <SpacingMixResponsive />
111
+ <br />
112
+ <br />
113
+ <HideInlineTrueUndefined />
114
+ <br />
115
+ <HideInlineTrueFalse />
116
+ <br />
117
+ <HideInlineTrueTrue />
118
+ <br />
119
+ <HideInlineFalseUndefined />
120
+ <br />
121
+ <HideInlineFalseFalse />
122
+ <br />
123
+ <HideInlineFalseTrue />
124
+ <br />
125
+ <HideInlineUndefinedUndefined />
126
+ <br />
127
+ <HideInlineUndefinedFalse />
128
+ <br />
129
+ <HideInlineUndefinedTrue />
130
+ <br />
131
+ <HideInlineResponsive />
132
+ <br />
133
+ <HideInlineResponsiveInvertedOrder />
134
+ <br />
135
+ <br />
136
+ <RelativeTrue />
137
+ <RelativeFalse />
138
+ <RelativeResponsive />
139
+ <RelativeResponsiveInvertedOrder />
140
+ <br />
141
+ <br />
142
+ <DataOverrideGlobalClass />
143
+ <DataOverrideLocalClass />
144
+ </>`,...(R=(y=m.parameters)==null?void 0:y.docs)==null?void 0:R.source}}};const qn=["Combinations"];export{m as Combinations,qn as __namedExportsOrder,Bn as default};
@@ -1,4 +1,4 @@
1
- import{j as e}from"./jsx-runtime-BYouaCF_.js";import{useMDXComponents as o}from"./index-uOP2uDdf.js";import{M as r}from"./index-C9qzZweZ.js";import"./index-B3evPFBL.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./iframe-BJQSUUXK.js";import"./index-jEDObK_5.js";import"./index-C66nt8TK.js";import"./index-Cu4lwwaE.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";function t(s){const n={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",strong:"strong",...o(),...s.components};return e.jsxs(e.Fragment,{children:[e.jsx(r,{title:"Guides/Assets/Fonts"}),`
1
+ import{j as e}from"./jsx-runtime-BYouaCF_.js";import{useMDXComponents as o}from"./index-uOP2uDdf.js";import{M as r}from"./index-DJz3jMTz.js";import"./index-B3evPFBL.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./iframe-D0A79CBI.js";import"./index-jEDObK_5.js";import"./index-C66nt8TK.js";import"./index-Cu4lwwaE.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";function t(s){const n={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",strong:"strong",...o(),...s.components};return e.jsxs(e.Fragment,{children:[e.jsx(r,{title:"Guides/Assets/Fonts"}),`
2
2
  `,e.jsx(n.h1,{id:"fonts",children:"Fonts"}),`
3
3
  `,e.jsxs(n.p,{children:["The optimised assets are available under ",e.jsx(n.strong,{children:"preply.com"})," in the formats required by modern and legacy browsers."]}),`
4
4
  `,e.jsxs(n.p,{children:["Refer to ",e.jsx(n.a,{href:"https://preply.atlassian.net/l/cp/0sQoEgGa",rel:"nofollow",children:"Create new universal brand fonts"})," for a detailed breakdown of the formats, optimisations and technical decisions."]}),`
@@ -1,4 +1,4 @@
1
- import{j as e}from"./jsx-runtime-BYouaCF_.js";import{useMDXComponents as r}from"./index-uOP2uDdf.js";import{M as o}from"./index-C9qzZweZ.js";import"./index-B3evPFBL.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./iframe-BJQSUUXK.js";import"./index-jEDObK_5.js";import"./index-C66nt8TK.js";import"./index-Cu4lwwaE.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";function t(s){const n={a:"a",code:"code",h1:"h1",h2:"h2",li:"li",ol:"ol",p:"p",pre:"pre",...r(),...s.components};return e.jsxs(e.Fragment,{children:[e.jsx(o,{title:"Guides/Installation/SSR/Next.js pages router"}),`
1
+ import{j as e}from"./jsx-runtime-BYouaCF_.js";import{useMDXComponents as r}from"./index-uOP2uDdf.js";import{M as o}from"./index-DJz3jMTz.js";import"./index-B3evPFBL.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./iframe-D0A79CBI.js";import"./index-jEDObK_5.js";import"./index-C66nt8TK.js";import"./index-Cu4lwwaE.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";function t(s){const n={a:"a",code:"code",h1:"h1",h2:"h2",li:"li",ol:"ol",p:"p",pre:"pre",...r(),...s.components};return e.jsxs(e.Fragment,{children:[e.jsx(o,{title:"Guides/Installation/SSR/Next.js pages router"}),`
2
2
  `,e.jsx(n.h1,{id:"installation-nextjs-pages-router",children:"Installation: Next.js pages router"}),`
3
3
  `,e.jsxs(n.p,{children:["This guide assumes you have read and followed the steps in the ",e.jsx(n.a,{href:"/story/guides-installation-applications--page",children:"Installation: Applications"})," guide."]}),`
4
4
  `,e.jsx(n.h2,{id:"packages",children:"Packages"}),`
@@ -1,4 +1,4 @@
1
- import{j as t}from"./jsx-runtime-BYouaCF_.js";import{useMDXComponents as x}from"./index-uOP2uDdf.js";import{M as R}from"./index-C9qzZweZ.js";import{B as m,H as h}from"./Button-Cypl3yDn.js";import{L as w,T as p}from"./LayoutFlex-Dp29ojjO.js";import{L as A}from"./LayoutGrid-D9R6yTYX.js";import{T}from"./TextField-CDlYWWnq.js";import{e as n,r as g}from"./index-B3evPFBL.js";import{R as O}from"./RootProvider-BkbI9VLc.js";import{d as v}from"./styled-components.browser.esm-CwsnEFnS.js";import{u as L}from"./useToken-BEsvy84L.js";import{t as U}from"./tokens-DXy5hgn5.js";import{u as V}from"./useTheme-DiEoTTOi.js";import{H as C,b as S}from"./options-Dn0Ts6qK.js";import{b as E}from"./defaults-B1rzzf6M.js";import"./iframe-BJQSUUXK.js";import"./index-jEDObK_5.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./index-C66nt8TK.js";import"./index-Cu4lwwaE.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";import"./text-centered-C0V1O_Sd.js";import"./classNames-BUL1Zq7e.js";import"./filterAttributesPassedByRadixUIAtRuntime-Bye2JkZ0.js";import"./componentNames-Ba2ybP0W.js";import"./index-DdzHuZ-Y.js";import"./render-icon-CwRdpin3.js";import"./useHostname-CH18gHFj.js";import"./index-CC6DAVyL.js";import"./layout-relative.module-1z75aSwo-DNAR_Nv2.js";import"./breakpoints-BfMlrtxE.js";import"./constants-DYYVurUY.js";import"./index-DRKYGVyc.js";import"./index-BfBdt3zW.js";import"./tslib.es6-BntfKcQG.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./message-BraTJ16C.js";import"./index-v0utLE_k.js";import"./PortalElementProvider-D4ltrA8j.js";import"./index-DbgDZDus.js";import"./constants-BgBLeZzp.js";const I=()=>n.createElement("style",{"data-ds-style":"global",dangerouslySetInnerHTML:{__html:`/* Variable fonts */
1
+ import{j as t}from"./jsx-runtime-BYouaCF_.js";import{useMDXComponents as x}from"./index-uOP2uDdf.js";import{M as R}from"./index-DJz3jMTz.js";import{B as m,H as h}from"./Button-klA2GCDX.js";import{L as w,T as p}from"./LayoutFlex-DsiZkqdg.js";import{L as A}from"./LayoutGrid-6cTmb1jX.js";import{T}from"./TextField-872WjatY.js";import{e as n,r as g}from"./index-B3evPFBL.js";import{R as O}from"./RootProvider-BkbI9VLc.js";import{d as v}from"./styled-components.browser.esm-CwsnEFnS.js";import{u as L}from"./useToken-BEsvy84L.js";import{t as U}from"./tokens-DXy5hgn5.js";import{u as V}from"./useTheme-DiEoTTOi.js";import{H as C,b as S}from"./options-Dn0Ts6qK.js";import{b as E}from"./defaults-B1rzzf6M.js";import"./iframe-D0A79CBI.js";import"./index-jEDObK_5.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./index-C66nt8TK.js";import"./index-Cu4lwwaE.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";import"./text-centered-C0V1O_Sd.js";import"./classNames-BUL1Zq7e.js";import"./filterAttributesPassedByRadixUIAtRuntime-Bye2JkZ0.js";import"./componentNames-CVVyamkx.js";import"./index-DdzHuZ-Y.js";import"./render-icon-CwRdpin3.js";import"./useHostname-CH18gHFj.js";import"./index-CC6DAVyL.js";import"./layout-relative.module-1z75aSwo-DNAR_Nv2.js";import"./breakpoints-BfMlrtxE.js";import"./constants-DYYVurUY.js";import"./index-DRKYGVyc.js";import"./index-BfBdt3zW.js";import"./tslib.es6-BntfKcQG.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./message-BraTJ16C.js";import"./index-v0utLE_k.js";import"./PortalElementProvider-D4ltrA8j.js";import"./index-DbgDZDus.js";import"./constants-BgBLeZzp.js";const I=()=>n.createElement("style",{"data-ds-style":"global",dangerouslySetInnerHTML:{__html:`/* Variable fonts */
2
2
  /* English */
3
3
  @font-face {
4
4
  font-family: 'PreplyInterV';
@@ -1,4 +1,4 @@
1
- import{j as e}from"./jsx-runtime-BYouaCF_.js";import{useMDXComponents as n}from"./index-uOP2uDdf.js";import{M as s}from"./index-C9qzZweZ.js";import"./index-B3evPFBL.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./iframe-BJQSUUXK.js";import"./index-jEDObK_5.js";import"./index-C66nt8TK.js";import"./index-Cu4lwwaE.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";function o(r){const t={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...n(),...r.components};return e.jsxs(e.Fragment,{children:[e.jsx(s,{title:"Guides/Installation/SSR/Next.js app router"}),`
1
+ import{j as e}from"./jsx-runtime-BYouaCF_.js";import{useMDXComponents as n}from"./index-uOP2uDdf.js";import{M as s}from"./index-DJz3jMTz.js";import"./index-B3evPFBL.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./iframe-D0A79CBI.js";import"./index-jEDObK_5.js";import"./index-C66nt8TK.js";import"./index-Cu4lwwaE.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";function o(r){const t={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...n(),...r.components};return e.jsxs(e.Fragment,{children:[e.jsx(s,{title:"Guides/Installation/SSR/Next.js app router"}),`
2
2
  `,e.jsx(t.h1,{id:"installation-nextjs-app-router",children:"Installation: Next.js app router"}),`
3
3
  `,e.jsxs(t.p,{children:["This guide assumes you have read and followed the steps in the ",e.jsx(t.a,{href:"/story/guides-installation-applications--page",children:"Installation: Applications"})," guide."]}),`
4
4
  `,e.jsx(t.h2,{id:"packages",children:"Packages"}),`
@@ -1,4 +1,4 @@
1
- import{j as e}from"./jsx-runtime-BYouaCF_.js";import{useMDXComponents as o}from"./index-uOP2uDdf.js";import{M as r}from"./index-C9qzZweZ.js";import"./index-B3evPFBL.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./iframe-BJQSUUXK.js";import"./index-jEDObK_5.js";import"./index-C66nt8TK.js";import"./index-Cu4lwwaE.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";function i(s){const n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...o(),...s.components};return e.jsxs(e.Fragment,{children:[e.jsx(r,{title:"Guides/Installation/Libraries"}),`
1
+ import{j as e}from"./jsx-runtime-BYouaCF_.js";import{useMDXComponents as o}from"./index-uOP2uDdf.js";import{M as r}from"./index-DJz3jMTz.js";import"./index-B3evPFBL.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./iframe-D0A79CBI.js";import"./index-jEDObK_5.js";import"./index-C66nt8TK.js";import"./index-Cu4lwwaE.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";function i(s){const n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...o(),...s.components};return e.jsxs(e.Fragment,{children:[e.jsx(r,{title:"Guides/Installation/Libraries"}),`
2
2
  `,e.jsx(n.h1,{id:"installation-libraries",children:"Installation: Libraries"}),`
3
3
  `,e.jsxs(n.p,{children:["This guide applies to libraries consumed in Preply applications, and assumes these applications are already integrated according to the steps outlined in the ",e.jsx(n.a,{href:"/story/guides-installation-applications--page",children:"Installation: Applications"})," guide."]}),`
4
4
  `,e.jsx(n.h2,{id:"install-packages",children:"Install Packages"}),`
@@ -1,4 +1,4 @@
1
- import{j as t}from"./jsx-runtime-BYouaCF_.js";import{useMDXComponents as i}from"./index-uOP2uDdf.js";import{M as h}from"./index-C9qzZweZ.js";import{r as e}from"./index-B3evPFBL.js";import{a as f}from"./StorybookGlobalStyle-B1zhYl96.js";import{d as c}from"./styled-components.browser.esm-CwsnEFnS.js";import{I as r}from"./Icon-Clsj4XP8.js";import{T as y,L as R}from"./LayoutFlex-Dp29ojjO.js";import{F as u}from"./LibraryExplore-C8GqDRwc.js";import{F as E}from"./TokyoUIAttach-BvBvQVx_.js";import{F as Z}from"./TokyoUIClose-DFIfVIfy.js";import{F as x}from"./TokyoUIExpand-DThzqohx.js";import{F as b,a as S}from"./TokyoUIEye-BsOt8ZdC.js";import{F as H}from"./TokyoUIFav-DGbkVriC.js";import{F as k}from"./TokyoUIInfo-nHX2jpp7.js";import{F as T}from"./TokyoUILanguage-BNq9ng3F.js";import{F as M}from"./TokyoUILock-C_glX9Ec.js";import{a as U,F as V}from"./TokyoUIMinus-B9ja89W6.js";import{F as L}from"./TokyoUINotebook-DNjno-oI.js";import{F}from"./TokyoUINotesWithPad-Bqcca_-M.js";import{F as C}from"./TokyoUIPhone-BHLDT6dz.js";import{F as I}from"./TokyoUITag-CulX0-gf.js";import{F as B}from"./TokyoUIUser-CEt_udNR.js";import{g as v}from"./getTokenVar-DU_DEzTd.js";import{c as s}from"./tokens-DXy5hgn5.js";import{o as $}from"./mixins-DZk1Zeoo.js";import"./iframe-BJQSUUXK.js";import"./index-jEDObK_5.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./index-C66nt8TK.js";import"./index-Cu4lwwaE.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";import"./text-centered-C0V1O_Sd.js";import"./classNames-BUL1Zq7e.js";import"./filterAttributesPassedByRadixUIAtRuntime-Bye2JkZ0.js";import"./render-icon-CwRdpin3.js";import"./defaults-B1rzzf6M.js";import"./componentNames-Ba2ybP0W.js";import"./index-DdzHuZ-Y.js";import"./layout-relative.module-1z75aSwo-DNAR_Nv2.js";import"./constants-BgBLeZzp.js";const p=()=>e.useContext(f),A=c.form`
1
+ import{j as t}from"./jsx-runtime-BYouaCF_.js";import{useMDXComponents as i}from"./index-uOP2uDdf.js";import{M as h}from"./index-DJz3jMTz.js";import{r as e}from"./index-B3evPFBL.js";import{a as f}from"./StorybookGlobalStyle-B1zhYl96.js";import{d as c}from"./styled-components.browser.esm-CwsnEFnS.js";import{I as r}from"./Icon-zcBK8bUG.js";import{T as y,L as R}from"./LayoutFlex-DsiZkqdg.js";import{F as u}from"./LibraryExplore-C8GqDRwc.js";import{F as E}from"./TokyoUIAttach-BvBvQVx_.js";import{F as Z}from"./TokyoUIClose-DFIfVIfy.js";import{F as x}from"./TokyoUIExpand-DThzqohx.js";import{F as b,a as S}from"./TokyoUIEye-BsOt8ZdC.js";import{F as H}from"./TokyoUIFav-DGbkVriC.js";import{F as k}from"./TokyoUIInfo-nHX2jpp7.js";import{F as T}from"./TokyoUILanguage-BNq9ng3F.js";import{F as M}from"./TokyoUILock-C_glX9Ec.js";import{a as U,F as V}from"./TokyoUIMinus-B9ja89W6.js";import{F as L}from"./TokyoUINotebook-DNjno-oI.js";import{F}from"./TokyoUINotesWithPad-Bqcca_-M.js";import{F as C}from"./TokyoUIPhone-BHLDT6dz.js";import{F as I}from"./TokyoUITag-CulX0-gf.js";import{F as B}from"./TokyoUIUser-CEt_udNR.js";import{g as v}from"./getTokenVar-DU_DEzTd.js";import{c as s}from"./tokens-DXy5hgn5.js";import{o as $}from"./mixins-DZk1Zeoo.js";import"./iframe-D0A79CBI.js";import"./index-jEDObK_5.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./index-C66nt8TK.js";import"./index-Cu4lwwaE.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";import"./text-centered-C0V1O_Sd.js";import"./classNames-BUL1Zq7e.js";import"./filterAttributesPassedByRadixUIAtRuntime-Bye2JkZ0.js";import"./render-icon-CwRdpin3.js";import"./defaults-B1rzzf6M.js";import"./componentNames-CVVyamkx.js";import"./index-DdzHuZ-Y.js";import"./layout-relative.module-1z75aSwo-DNAR_Nv2.js";import"./constants-BgBLeZzp.js";const p=()=>e.useContext(f),A=c.form`
2
2
  display: flex;
3
3
  align-items: flex-start;
4
4
  gap: 20px;
@@ -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 s}from"./index-C9qzZweZ.js";import"./index-B3evPFBL.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./iframe-BJQSUUXK.js";import"./index-jEDObK_5.js";import"./index-C66nt8TK.js";import"./index-Cu4lwwaE.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";function t(r){const e={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...n(),...r.components};return o.jsxs(o.Fragment,{children:[o.jsx(s,{title:"Guides/Installation/Storybook"}),`
1
+ import{j as o}from"./jsx-runtime-BYouaCF_.js";import{useMDXComponents as n}from"./index-uOP2uDdf.js";import{M as s}from"./index-DJz3jMTz.js";import"./index-B3evPFBL.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./iframe-D0A79CBI.js";import"./index-jEDObK_5.js";import"./index-C66nt8TK.js";import"./index-Cu4lwwaE.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";function t(r){const e={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...n(),...r.components};return o.jsxs(o.Fragment,{children:[o.jsx(s,{title:"Guides/Installation/Storybook"}),`
2
2
  `,o.jsx(e.h1,{id:"installation-storybook",children:"Installation: Storybook"}),`
3
3
  `,o.jsxs(e.p,{children:["This guide applies to Storybook setups that document Preply components libraries, and assumes you have read and followed the steps outlined in the ",o.jsx(e.a,{href:"/story/guides-installation-libraries--page",children:"Installation: Libaries"})," guide."]}),`
4
4
  `,o.jsx(e.h2,{id:"packages",children:"Packages"}),`
@@ -1,4 +1,4 @@
1
- import{j as t}from"./jsx-runtime-BYouaCF_.js";import{useMDXComponents as l}from"./index-uOP2uDdf.js";import{M as a}from"./index-C9qzZweZ.js";import{L as e}from"./LayoutGrid-D9R6yTYX.js";import{d as c}from"./styled-components.browser.esm-CwsnEFnS.js";import{g as i}from"./getTokenVar-DU_DEzTd.js";import{s as u,c as p}from"./tokens-DXy5hgn5.js";import"./index-B3evPFBL.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./iframe-BJQSUUXK.js";import"./index-jEDObK_5.js";import"./index-C66nt8TK.js";import"./index-Cu4lwwaE.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";import"./classNames-BUL1Zq7e.js";import"./breakpoints-BfMlrtxE.js";import"./layout-relative.module-1z75aSwo-DNAR_Nv2.js";import"./constants-DYYVurUY.js";import"./defaults-B1rzzf6M.js";import"./filterAttributesPassedByRadixUIAtRuntime-Bye2JkZ0.js";import"./index-DdzHuZ-Y.js";import"./componentNames-Ba2ybP0W.js";import"./constants-BgBLeZzp.js";const n=["https://static.preply.com/ds/illustrations/tokyo-ui/airplain.svg","https://static.preply.com/ds/illustrations/tokyo-ui/arrows-multiple.svg","https://static.preply.com/ds/illustrations/tokyo-ui/artist.svg","https://static.preply.com/ds/illustrations/tokyo-ui/awesome.svg","https://static.preply.com/ds/illustrations/tokyo-ui/back-to-school.svg","https://static.preply.com/ds/illustrations/tokyo-ui/bar-graph.svg","https://static.preply.com/ds/illustrations/tokyo-ui/bell.svg","https://static.preply.com/ds/illustrations/tokyo-ui/booking-a-lesson.svg","https://static.preply.com/ds/illustrations/tokyo-ui/books-2.svg","https://static.preply.com/ds/illustrations/tokyo-ui/books.svg","https://static.preply.com/ds/illustrations/tokyo-ui/brain.svg","https://static.preply.com/ds/illustrations/tokyo-ui/browser-permissions-chromium.svg","https://static.preply.com/ds/illustrations/tokyo-ui/browser-permissions-safari.svg","https://static.preply.com/ds/illustrations/tokyo-ui/bubbles.svg","https://static.preply.com/ds/illustrations/tokyo-ui/calendar.svg","https://static.preply.com/ds/illustrations/tokyo-ui/calendar-2.svg","https://static.preply.com/ds/illustrations/tokyo-ui/checkmark.svg","https://static.preply.com/ds/illustrations/tokyo-ui/clock.svg","https://static.preply.com/ds/illustrations/tokyo-ui/clocks.svg","https://static.preply.com/ds/illustrations/tokyo-ui/coins.svg","https://static.preply.com/ds/illustrations/tokyo-ui/committed.svg","https://static.preply.com/ds/illustrations/tokyo-ui/confetti.svg","https://static.preply.com/ds/illustrations/tokyo-ui/cosmopolite.svg","https://static.preply.com/ds/illustrations/tokyo-ui/desk.svg","https://static.preply.com/ds/illustrations/tokyo-ui/desk-supplies.svg","https://static.preply.com/ds/illustrations/tokyo-ui/discount-badge.svg","https://static.preply.com/ds/illustrations/tokyo-ui/disco-ball.svg","https://static.preply.com/ds/illustrations/tokyo-ui/dog.svg","https://static.preply.com/ds/illustrations/tokyo-ui/first-steps.svg","https://static.preply.com/ds/illustrations/tokyo-ui/game-on.svg","https://static.preply.com/ds/illustrations/tokyo-ui/getting-started-down.svg","https://static.preply.com/ds/illustrations/tokyo-ui/getting-started.svg","https://static.preply.com/ds/illustrations/tokyo-ui/globe-spot.svg","https://static.preply.com/ds/illustrations/tokyo-ui/great-homework.svg","https://static.preply.com/ds/illustrations/tokyo-ui/growth.svg","https://static.preply.com/ds/illustrations/tokyo-ui/guitar.svg","https://static.preply.com/ds/illustrations/tokyo-ui/hard-work-1.svg","https://static.preply.com/ds/illustrations/tokyo-ui/hard-work-2.svg","https://static.preply.com/ds/illustrations/tokyo-ui/heart.svg","https://static.preply.com/ds/illustrations/tokyo-ui/it-guru.svg","https://static.preply.com/ds/illustrations/tokyo-ui/lamp-and-books.svg","https://static.preply.com/ds/illustrations/tokyo-ui/language-flash-cards.svg","https://static.preply.com/ds/illustrations/tokyo-ui/laptop.svg","https://static.preply.com/ds/illustrations/tokyo-ui/laptop-2.svg","https://static.preply.com/ds/illustrations/tokyo-ui/making-progress.svg","https://static.preply.com/ds/illustrations/tokyo-ui/map.svg","https://static.preply.com/ds/illustrations/tokyo-ui/meeting-with-tutor-2.svg","https://static.preply.com/ds/illustrations/tokyo-ui/meeting-with-tutor.svg","https://static.preply.com/ds/illustrations/tokyo-ui/messages.svg","https://static.preply.com/ds/illustrations/tokyo-ui/messaging.svg","https://static.preply.com/ds/illustrations/tokyo-ui/mobile-app.svg","https://static.preply.com/ds/illustrations/tokyo-ui/notes.svg","https://static.preply.com/ds/illustrations/tokyo-ui/open-book.svg","https://static.preply.com/ds/illustrations/tokyo-ui/pause-button.svg","https://static.preply.com/ds/illustrations/tokyo-ui/pencil-and-pen-2.svg","https://static.preply.com/ds/illustrations/tokyo-ui/pencil-and-pen.svg","https://static.preply.com/ds/illustrations/tokyo-ui/pig.svg","https://static.preply.com/ds/illustrations/tokyo-ui/play-button.svg","https://static.preply.com/ds/illustrations/tokyo-ui/polyglot-2.svg","https://static.preply.com/ds/illustrations/tokyo-ui/polyglot-pink.svg","https://static.preply.com/ds/illustrations/tokyo-ui/polyglot.svg","https://static.preply.com/ds/illustrations/tokyo-ui/present.svg","https://static.preply.com/ds/illustrations/tokyo-ui/professional.svg","https://static.preply.com/ds/illustrations/tokyo-ui/progress-steps.svg","https://static.preply.com/ds/illustrations/tokyo-ui/rising-arrows.svg","https://static.preply.com/ds/illustrations/tokyo-ui/rock-on.svg","https://static.preply.com/ds/illustrations/tokyo-ui/routine-master.svg","https://static.preply.com/ds/illustrations/tokyo-ui/serious-learner.svg","https://static.preply.com/ds/illustrations/tokyo-ui/sheet.svg","https://static.preply.com/ds/illustrations/tokyo-ui/smiley.svg","https://static.preply.com/ds/illustrations/tokyo-ui/speech-bubble.svg","https://static.preply.com/ds/illustrations/tokyo-ui/star_coin.svg","https://static.preply.com/ds/illustrations/tokyo-ui/stop-button.svg","https://static.preply.com/ds/illustrations/tokyo-ui/stopwatch.svg","https://static.preply.com/ds/illustrations/tokyo-ui/system-permissions.svg","https://static.preply.com/ds/illustrations/tokyo-ui/testing-the-water.svg","https://static.preply.com/ds/illustrations/tokyo-ui/three-arrows.svg","https://static.preply.com/ds/illustrations/tokyo-ui/thumbs-up.svg","https://static.preply.com/ds/illustrations/tokyo-ui/you-did-great-today.svg","https://static.preply.com/ds/illustrations/tokyo-ui/warning.svg"],y=c.div`
1
+ import{j as t}from"./jsx-runtime-BYouaCF_.js";import{useMDXComponents as l}from"./index-uOP2uDdf.js";import{M as a}from"./index-DJz3jMTz.js";import{L as e}from"./LayoutGrid-6cTmb1jX.js";import{d as c}from"./styled-components.browser.esm-CwsnEFnS.js";import{g as i}from"./getTokenVar-DU_DEzTd.js";import{s as u,c as p}from"./tokens-DXy5hgn5.js";import"./index-B3evPFBL.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./iframe-D0A79CBI.js";import"./index-jEDObK_5.js";import"./index-C66nt8TK.js";import"./index-Cu4lwwaE.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";import"./classNames-BUL1Zq7e.js";import"./breakpoints-BfMlrtxE.js";import"./layout-relative.module-1z75aSwo-DNAR_Nv2.js";import"./constants-DYYVurUY.js";import"./defaults-B1rzzf6M.js";import"./filterAttributesPassedByRadixUIAtRuntime-Bye2JkZ0.js";import"./index-DdzHuZ-Y.js";import"./componentNames-CVVyamkx.js";import"./constants-BgBLeZzp.js";const n=["https://static.preply.com/ds/illustrations/tokyo-ui/airplain.svg","https://static.preply.com/ds/illustrations/tokyo-ui/arrows-multiple.svg","https://static.preply.com/ds/illustrations/tokyo-ui/artist.svg","https://static.preply.com/ds/illustrations/tokyo-ui/awesome.svg","https://static.preply.com/ds/illustrations/tokyo-ui/back-to-school.svg","https://static.preply.com/ds/illustrations/tokyo-ui/bar-graph.svg","https://static.preply.com/ds/illustrations/tokyo-ui/bell.svg","https://static.preply.com/ds/illustrations/tokyo-ui/booking-a-lesson.svg","https://static.preply.com/ds/illustrations/tokyo-ui/books-2.svg","https://static.preply.com/ds/illustrations/tokyo-ui/books.svg","https://static.preply.com/ds/illustrations/tokyo-ui/brain.svg","https://static.preply.com/ds/illustrations/tokyo-ui/browser-permissions-chromium.svg","https://static.preply.com/ds/illustrations/tokyo-ui/browser-permissions-safari.svg","https://static.preply.com/ds/illustrations/tokyo-ui/bubbles.svg","https://static.preply.com/ds/illustrations/tokyo-ui/calendar.svg","https://static.preply.com/ds/illustrations/tokyo-ui/calendar-2.svg","https://static.preply.com/ds/illustrations/tokyo-ui/checkmark.svg","https://static.preply.com/ds/illustrations/tokyo-ui/clock.svg","https://static.preply.com/ds/illustrations/tokyo-ui/clocks.svg","https://static.preply.com/ds/illustrations/tokyo-ui/coins.svg","https://static.preply.com/ds/illustrations/tokyo-ui/committed.svg","https://static.preply.com/ds/illustrations/tokyo-ui/confetti.svg","https://static.preply.com/ds/illustrations/tokyo-ui/cosmopolite.svg","https://static.preply.com/ds/illustrations/tokyo-ui/desk.svg","https://static.preply.com/ds/illustrations/tokyo-ui/desk-supplies.svg","https://static.preply.com/ds/illustrations/tokyo-ui/discount-badge.svg","https://static.preply.com/ds/illustrations/tokyo-ui/disco-ball.svg","https://static.preply.com/ds/illustrations/tokyo-ui/dog.svg","https://static.preply.com/ds/illustrations/tokyo-ui/first-steps.svg","https://static.preply.com/ds/illustrations/tokyo-ui/game-on.svg","https://static.preply.com/ds/illustrations/tokyo-ui/getting-started-down.svg","https://static.preply.com/ds/illustrations/tokyo-ui/getting-started.svg","https://static.preply.com/ds/illustrations/tokyo-ui/globe-spot.svg","https://static.preply.com/ds/illustrations/tokyo-ui/great-homework.svg","https://static.preply.com/ds/illustrations/tokyo-ui/growth.svg","https://static.preply.com/ds/illustrations/tokyo-ui/guitar.svg","https://static.preply.com/ds/illustrations/tokyo-ui/hard-work-1.svg","https://static.preply.com/ds/illustrations/tokyo-ui/hard-work-2.svg","https://static.preply.com/ds/illustrations/tokyo-ui/heart.svg","https://static.preply.com/ds/illustrations/tokyo-ui/it-guru.svg","https://static.preply.com/ds/illustrations/tokyo-ui/lamp-and-books.svg","https://static.preply.com/ds/illustrations/tokyo-ui/language-flash-cards.svg","https://static.preply.com/ds/illustrations/tokyo-ui/laptop.svg","https://static.preply.com/ds/illustrations/tokyo-ui/laptop-2.svg","https://static.preply.com/ds/illustrations/tokyo-ui/making-progress.svg","https://static.preply.com/ds/illustrations/tokyo-ui/map.svg","https://static.preply.com/ds/illustrations/tokyo-ui/meeting-with-tutor-2.svg","https://static.preply.com/ds/illustrations/tokyo-ui/meeting-with-tutor.svg","https://static.preply.com/ds/illustrations/tokyo-ui/messages.svg","https://static.preply.com/ds/illustrations/tokyo-ui/messaging.svg","https://static.preply.com/ds/illustrations/tokyo-ui/mobile-app.svg","https://static.preply.com/ds/illustrations/tokyo-ui/notes.svg","https://static.preply.com/ds/illustrations/tokyo-ui/open-book.svg","https://static.preply.com/ds/illustrations/tokyo-ui/pause-button.svg","https://static.preply.com/ds/illustrations/tokyo-ui/pencil-and-pen-2.svg","https://static.preply.com/ds/illustrations/tokyo-ui/pencil-and-pen.svg","https://static.preply.com/ds/illustrations/tokyo-ui/pig.svg","https://static.preply.com/ds/illustrations/tokyo-ui/play-button.svg","https://static.preply.com/ds/illustrations/tokyo-ui/polyglot-2.svg","https://static.preply.com/ds/illustrations/tokyo-ui/polyglot-pink.svg","https://static.preply.com/ds/illustrations/tokyo-ui/polyglot.svg","https://static.preply.com/ds/illustrations/tokyo-ui/present.svg","https://static.preply.com/ds/illustrations/tokyo-ui/professional.svg","https://static.preply.com/ds/illustrations/tokyo-ui/progress-steps.svg","https://static.preply.com/ds/illustrations/tokyo-ui/rising-arrows.svg","https://static.preply.com/ds/illustrations/tokyo-ui/rock-on.svg","https://static.preply.com/ds/illustrations/tokyo-ui/routine-master.svg","https://static.preply.com/ds/illustrations/tokyo-ui/serious-learner.svg","https://static.preply.com/ds/illustrations/tokyo-ui/sheet.svg","https://static.preply.com/ds/illustrations/tokyo-ui/smiley.svg","https://static.preply.com/ds/illustrations/tokyo-ui/speech-bubble.svg","https://static.preply.com/ds/illustrations/tokyo-ui/star_coin.svg","https://static.preply.com/ds/illustrations/tokyo-ui/stop-button.svg","https://static.preply.com/ds/illustrations/tokyo-ui/stopwatch.svg","https://static.preply.com/ds/illustrations/tokyo-ui/system-permissions.svg","https://static.preply.com/ds/illustrations/tokyo-ui/testing-the-water.svg","https://static.preply.com/ds/illustrations/tokyo-ui/three-arrows.svg","https://static.preply.com/ds/illustrations/tokyo-ui/thumbs-up.svg","https://static.preply.com/ds/illustrations/tokyo-ui/you-did-great-today.svg","https://static.preply.com/ds/illustrations/tokyo-ui/warning.svg"],y=c.div`
2
2
  padding: ${i(u[12])};
3
3
  -webkit-background-size: 50px 50px;
4
4
  -moz-background-size: 50px 50px;
@@ -1,4 +1,4 @@
1
- import{j as e}from"./jsx-runtime-BYouaCF_.js";import{useMDXComponents as t}from"./index-uOP2uDdf.js";import{M as i}from"./index-C9qzZweZ.js";import"./index-B3evPFBL.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./iframe-BJQSUUXK.js";import"./index-jEDObK_5.js";import"./index-C66nt8TK.js";import"./index-Cu4lwwaE.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";function r(n){const o={a:"a",code:"code",h1:"h1",p:"p",pre:"pre",...t(),...n.components};return e.jsxs(e.Fragment,{children:[e.jsx(i,{title:"Guides/Installation/Advanced"}),`
1
+ import{j as e}from"./jsx-runtime-BYouaCF_.js";import{useMDXComponents as t}from"./index-uOP2uDdf.js";import{M as i}from"./index-DJz3jMTz.js";import"./index-B3evPFBL.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./iframe-D0A79CBI.js";import"./index-jEDObK_5.js";import"./index-C66nt8TK.js";import"./index-Cu4lwwaE.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";function r(n){const o={a:"a",code:"code",h1:"h1",p:"p",pre:"pre",...t(),...n.components};return e.jsxs(e.Fragment,{children:[e.jsx(i,{title:"Guides/Installation/Advanced"}),`
2
2
  `,e.jsx(o.h1,{id:"installation-advanced",children:"Installation: Advanced"}),`
3
3
  `,e.jsxs(o.p,{children:["This page is about rolling out your own alternative to ",e.jsx(o.code,{children:"<RootProvider/>"})," (advanced usage)."]}),`
4
4
  `,e.jsxs(o.p,{children:["If you are looking for how to install, refer to the ",e.jsx(o.a,{href:"/story/guides-installation-applications--page",children:"installation guides"})," instead."]}),`
@@ -1,9 +1,9 @@
1
- import{j as r}from"./jsx-runtime-BYouaCF_.js";import{r as o}from"./index-B3evPFBL.js";import{F as y}from"./TokyoUIExpand-DThzqohx.js";import{I as A}from"./Icon-Cx1Om39U.js";import{T as f}from"./Text-DmTAIIVj.js";import{u as g}from"./useMergeRefs-CeyIhNgY.js";import{g as s}from"./index-DdzHuZ-Y.js";import{w as _}from"./componentNames-Ba2ybP0W.js";const w="accordion__OKb-C",p={accordion:w,"--dsInternalSimulation-focus":"_--dsInternalSimulation-focus__7V0NR","--dsInternalSimulation-noAnimation":"_--dsInternalSimulation-noAnimation__nuNUW"};function I({ref:n,onOpenChange:e}){const t=o.useRef(null),l=g(t,n);return o.useEffect(()=>{if(!t.current)return;const a=t.current,i=()=>{e==null||e(a.open)};return a&&a.addEventListener("toggle",i),()=>{a&&a.removeEventListener("toggle",i)}},[e]),{mergedRef:e||n?l:null}}const c=({dataset:n,children:e,"aria-label":t})=>r.jsx("div",{className:p.accordion,"aria-label":t,"data-preply-ds-component":_.Accordion,...s(n),children:e}),u=o.forwardRef(function({open:e,name:t,dataset:l,children:a,onOpenChange:i,dsInternalSimulation:v},b){const{mergedRef:h}=I({ref:b,onOpenChange:i});return r.jsx("details",{ref:h,name:t,open:e,...s(l),className:p[`--dsInternalSimulation-${v}`],children:a})}),d=o.forwardRef(function({dataset:e,children:t,onClick:l},a){return r.jsxs("summary",{ref:a,...s(e),onClick:l,children:[r.jsx(f,{variant:"default-semibold",children:t}),r.jsx(A,{svg:y})]})}),m=o.forwardRef(function({dataset:e,children:t},l){return r.jsx(f,{tag:"div",variant:"small-regular",ref:l,...s(e),children:t})});try{c.displayName="Accordion",c.__docgenInfo={description:"An Accordion container.\n\nAdd `AccordionItem` children to render a list of disclosable contents.",displayName:"Accordion",props:{dataset:{defaultValue:null,description:`Sets data attributes on the DOM element.
1
+ import{j as r}from"./jsx-runtime-BYouaCF_.js";import{r as o}from"./index-B3evPFBL.js";import{F as y}from"./TokyoUIExpand-DThzqohx.js";import{I as A}from"./Icon-D4cMo1we.js";import{T as f}from"./Text-C3jprdij.js";import{u as g}from"./useMergeRefs-CeyIhNgY.js";import{g as s}from"./index-DdzHuZ-Y.js";import{w as _}from"./componentNames-CVVyamkx.js";const w="accordion__OKb-C",p={accordion:w,"--dsInternalSimulation-focus":"_--dsInternalSimulation-focus__7V0NR","--dsInternalSimulation-noAnimation":"_--dsInternalSimulation-noAnimation__nuNUW"};function I({ref:n,onOpenChange:e}){const t=o.useRef(null),l=g(t,n);return o.useEffect(()=>{if(!t.current)return;const a=t.current,i=()=>{e==null||e(a.open)};return a&&a.addEventListener("toggle",i),()=>{a&&a.removeEventListener("toggle",i)}},[e]),{mergedRef:e||n?l:null}}const c=({dataset:n,children:e,"aria-label":t})=>r.jsx("div",{className:p.accordion,"aria-label":t,"data-preply-ds-component":_.Accordion,...s(n),children:e}),u=o.forwardRef(function({open:e,name:t,dataset:l,children:a,onOpenChange:i,dsInternalSimulation:v},b){const{mergedRef:h}=I({ref:b,onOpenChange:i});return r.jsx("details",{ref:h,name:t,open:e,...s(l),className:p[`--dsInternalSimulation-${v}`],children:a})}),d=o.forwardRef(function({dataset:e,children:t,onClick:l},a){return r.jsxs("summary",{ref:a,...s(e),onClick:l,children:[r.jsx(f,{variant:"default-semibold",children:t}),r.jsx(A,{svg:y})]})}),m=o.forwardRef(function({dataset:e,children:t},l){return r.jsx(f,{tag:"div",variant:"small-regular",ref:l,...s(e),children:t})});try{c.displayName="Accordion",c.__docgenInfo={description:"An Accordion container.\n\nAdd `AccordionItem` children to render a list of disclosable contents.",displayName:"Accordion",props:{dataset:{defaultValue:null,description:`Sets data attributes on the DOM element.
2
2
  @example <Accordion dataset={{ 'qa-id': 'benefits' }} /> // will add data-qa-id="benefits" to the HTML element.`,name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},id:{defaultValue:null,description:"",name:"id",required:!1,type:{name:"enum",value:[{value:"string"}]}},"aria-label":{defaultValue:null,description:`Defines a string value that labels the current element.
3
3
  @see aria-labelledby.`,name:"aria-label",required:!1,type:{name:"enum",value:[{value:"string"}]}}}}}catch{}try{u.displayName="AccordionItem",u.__docgenInfo={description:"A single `Accordion` item, the wrapper of AccordionHeader and AccordionContent.",displayName:"AccordionItem",props:{"aria-label":{defaultValue:null,description:`Defines a string value that labels the current element.
4
- @see aria-labelledby.`,name:"aria-label",required:!1,type:{name:"enum",value:[{value:"string"}]}},open:{defaultValue:null,description:"",name:"open",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},"aria-labelledby":{defaultValue:null,description:`Identifies the element (or elements) that labels the current element.
4
+ @see aria-labelledby.`,name:"aria-label",required:!1,type:{name:"enum",value:[{value:"string"}]}},"aria-labelledby":{defaultValue:null,description:`Identifies the element (or elements) that labels the current element.
5
5
  @see aria-describedby.`,name:"aria-labelledby",required:!1,type:{name:"enum",value:[{value:"string"}]}},"aria-describedby":{defaultValue:null,description:`Identifies the element (or elements) that describes the object.
6
- @see aria-labelledby`,name:"aria-describedby",required:!1,type:{name:"enum",value:[{value:"string"}]}},onOpenChange:{defaultValue:null,description:"Called whenever the users open/close the Accordion item (mapped to the internal HTML Details's\n`toggle` event).",name:"onOpenChange",required:!1,type:{name:"enum",value:[{value:"(open: boolean) => void"}]}},name:{defaultValue:null,description:`Allows to create exclusive Accordions. Just pass the same \`name\` to all the AccordionItem
6
+ @see aria-labelledby`,name:"aria-describedby",required:!1,type:{name:"enum",value:[{value:"string"}]}},open:{defaultValue:null,description:"",name:"open",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},onOpenChange:{defaultValue:null,description:"Called whenever the users open/close the Accordion item (mapped to the internal HTML Details's\n`toggle` event).",name:"onOpenChange",required:!1,type:{name:"enum",value:[{value:"(open: boolean) => void"}]}},name:{defaultValue:null,description:`Allows to create exclusive Accordions. Just pass the same \`name\` to all the AccordionItem
7
7
  instances to make the whole Accordion exclusive.
8
8
  @example <Accordion>
9
9
  <AccordionItem name="choose-subscription-duration">
@@ -1,4 +1,4 @@
1
- import{j as e}from"./jsx-runtime-BYouaCF_.js";import{A as r,a as n,b as t,c as o}from"./Accordion-CVZIOGNR.js";import{T as u}from"./Text-DmTAIIVj.js";import{H as T}from"./Heading-BSlUFvxo.js";import{B as W}from"./Button-etPAfZn6.js";import"./index-B3evPFBL.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./TokyoUIExpand-DThzqohx.js";import"./Icon-Cx1Om39U.js";import"./text-accent-DZDDtpIt.js";import"./classNames-BUL1Zq7e.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-CVTdrNe-.js";import"./componentNames-Ba2ybP0W.js";import"./index-DdzHuZ-Y.js";import"./defaults-B1rzzf6M.js";import"./useMergeRefs-CeyIhNgY.js";import"./text-centered-CznToR0o.js";import"./ButtonBase-CiON5Gq9.js";import"./Spinner-BCTJunNM.js";import"./useHostname-CH18gHFj.js";import"./index-CC6DAVyL.js";const ne={title:"components/Accordion",component:r,args:{}},s={render:function(){return e.jsxs(r,{children:[e.jsxs(n,{children:[e.jsx(t,{children:"Is Preply the best platform for learning a language?"}),e.jsx(o,{children:"Of course it is!"})]}),e.jsxs(n,{children:[e.jsx(t,{children:"Why?"}),e.jsx(o,{children:"If you are wondering, it means you have not tried it out yet!"})]})]})}},a={render:function(){return e.jsxs(r,{children:[e.jsxs(n,{open:!0,children:[e.jsx(t,{children:"Is Preply the best platform for learning a language?"}),e.jsx(o,{children:"Of course it is!"})]}),e.jsxs(n,{open:!0,children:[e.jsx(t,{children:"Why?"}),e.jsx(o,{children:"If you are wondering, it means you have not tried it out yet!"})]})]})}},c={render:function(){return e.jsxs(r,{children:[e.jsxs(n,{children:[e.jsx(t,{children:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."}),e.jsx(o,{children:"Lorem ipsum"})]}),e.jsxs(n,{children:[e.jsx(t,{children:"Lorem ipsum"}),e.jsx(o,{children:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."})]}),e.jsxs(n,{open:!0,children:[e.jsx(t,{children:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."}),e.jsx(o,{children:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."})]})]})}},d={render:function(){return e.jsx(r,{children:e.jsxs(n,{open:!0,children:[e.jsx(t,{children:"Is Preply the best platform for learning a language?"}),e.jsxs(o,{children:[e.jsx(T,{variant:"large",tag:"div",children:"Yes!"}),e.jsx(u,{variant:"large-regular-italic",children:"What are you waiting for?"}),e.jsx(W,{children:"Book a lesson now!"})]})]})})}},l={render:function(){return e.jsxs(r,{children:[e.jsxs(n,{name:"choose-subscription-duration",children:[e.jsx(t,{children:"Two-week subscription"}),e.jsx(o,{children:"We will charge you every two weeks."})]}),e.jsxs(n,{name:"choose-subscription-duration",children:[e.jsx(t,{children:"Four-week subscription"}),e.jsx(o,{children:"We will charge you every four weeks."})]})]})}},p={render:function(){return e.jsxs(e.Fragment,{children:[e.jsxs("div",{style:{display:"flex",gap:"16px",flexDirection:"column"},children:[e.jsx(u,{variant:"default-regular-italic",children:"closed"}),e.jsx("div",{style:{display:"flex",gap:"16px"},children:e.jsx(r,{children:e.jsxs(n,{children:[e.jsx(t,{children:"Header"}),e.jsx(o,{children:"Content"})]})})})]}),e.jsxs("div",{style:{display:"flex",gap:"16px",flexDirection:"column"},children:[e.jsx(u,{variant:"default-regular-italic",children:"open"}),e.jsx("div",{style:{display:"flex",gap:"16px"},children:e.jsx(r,{children:e.jsxs(n,{open:!0,children:[e.jsx(t,{children:"Header"}),e.jsx(o,{children:"Content"})]})})})]}),e.jsxs("div",{style:{display:"flex",gap:"16px",flexDirection:"column"},children:[e.jsx(u,{variant:"default-regular-italic",children:"focus"}),e.jsx("div",{style:{display:"flex",gap:"16px"},children:e.jsx(r,{children:e.jsxs(n,{dsInternalSimulation:"focus",children:[e.jsx(t,{children:"Header"}),e.jsx(o,{children:"Content"})]})})})]})]})}};var m,h,y;s.parameters={...s.parameters,docs:{...(m=s.parameters)==null?void 0:m.docs,source:{originalSource:`{
1
+ import{j as e}from"./jsx-runtime-BYouaCF_.js";import{A as r,a as n,b as t,c as o}from"./Accordion-Bn_7bQpK.js";import{T as u}from"./Text-C3jprdij.js";import{H as T}from"./Heading-D79pA8cG.js";import{B as W}from"./Button-BumqXQgN.js";import"./index-B3evPFBL.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./TokyoUIExpand-DThzqohx.js";import"./Icon-D4cMo1we.js";import"./text-accent-DZDDtpIt.js";import"./classNames-BUL1Zq7e.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-CVTdrNe-.js";import"./componentNames-CVVyamkx.js";import"./index-DdzHuZ-Y.js";import"./defaults-B1rzzf6M.js";import"./useMergeRefs-CeyIhNgY.js";import"./text-centered-CznToR0o.js";import"./ButtonBase-OAaaGRgi.js";import"./Spinner-BCTJunNM.js";import"./useHostname-CH18gHFj.js";import"./index-CC6DAVyL.js";const ne={title:"components/Accordion",component:r,args:{}},s={render:function(){return e.jsxs(r,{children:[e.jsxs(n,{children:[e.jsx(t,{children:"Is Preply the best platform for learning a language?"}),e.jsx(o,{children:"Of course it is!"})]}),e.jsxs(n,{children:[e.jsx(t,{children:"Why?"}),e.jsx(o,{children:"If you are wondering, it means you have not tried it out yet!"})]})]})}},a={render:function(){return e.jsxs(r,{children:[e.jsxs(n,{open:!0,children:[e.jsx(t,{children:"Is Preply the best platform for learning a language?"}),e.jsx(o,{children:"Of course it is!"})]}),e.jsxs(n,{open:!0,children:[e.jsx(t,{children:"Why?"}),e.jsx(o,{children:"If you are wondering, it means you have not tried it out yet!"})]})]})}},c={render:function(){return e.jsxs(r,{children:[e.jsxs(n,{children:[e.jsx(t,{children:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."}),e.jsx(o,{children:"Lorem ipsum"})]}),e.jsxs(n,{children:[e.jsx(t,{children:"Lorem ipsum"}),e.jsx(o,{children:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."})]}),e.jsxs(n,{open:!0,children:[e.jsx(t,{children:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."}),e.jsx(o,{children:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."})]})]})}},d={render:function(){return e.jsx(r,{children:e.jsxs(n,{open:!0,children:[e.jsx(t,{children:"Is Preply the best platform for learning a language?"}),e.jsxs(o,{children:[e.jsx(T,{variant:"large",tag:"div",children:"Yes!"}),e.jsx(u,{variant:"large-regular-italic",children:"What are you waiting for?"}),e.jsx(W,{children:"Book a lesson now!"})]})]})})}},l={render:function(){return e.jsxs(r,{children:[e.jsxs(n,{name:"choose-subscription-duration",children:[e.jsx(t,{children:"Two-week subscription"}),e.jsx(o,{children:"We will charge you every two weeks."})]}),e.jsxs(n,{name:"choose-subscription-duration",children:[e.jsx(t,{children:"Four-week subscription"}),e.jsx(o,{children:"We will charge you every four weeks."})]})]})}},p={render:function(){return e.jsxs(e.Fragment,{children:[e.jsxs("div",{style:{display:"flex",gap:"16px",flexDirection:"column"},children:[e.jsx(u,{variant:"default-regular-italic",children:"closed"}),e.jsx("div",{style:{display:"flex",gap:"16px"},children:e.jsx(r,{children:e.jsxs(n,{children:[e.jsx(t,{children:"Header"}),e.jsx(o,{children:"Content"})]})})})]}),e.jsxs("div",{style:{display:"flex",gap:"16px",flexDirection:"column"},children:[e.jsx(u,{variant:"default-regular-italic",children:"open"}),e.jsx("div",{style:{display:"flex",gap:"16px"},children:e.jsx(r,{children:e.jsxs(n,{open:!0,children:[e.jsx(t,{children:"Header"}),e.jsx(o,{children:"Content"})]})})})]}),e.jsxs("div",{style:{display:"flex",gap:"16px",flexDirection:"column"},children:[e.jsx(u,{variant:"default-regular-italic",children:"focus"}),e.jsx("div",{style:{display:"flex",gap:"16px"},children:e.jsx(r,{children:e.jsxs(n,{dsInternalSimulation:"focus",children:[e.jsx(t,{children:"Header"}),e.jsx(o,{children:"Content"})]})})})]})]})}};var m,h,y;s.parameters={...s.parameters,docs:{...(m=s.parameters)==null?void 0:m.docs,source:{originalSource:`{
2
2
  render: function Story() {
3
3
  return <Accordion>
4
4
  <AccordionItem>