@preply/ds-docs 11.2.0 → 11.3.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 (247) hide show
  1. package/.storybook/main.ts +1 -3
  2. package/dist/assets/{00.LayoutFlex.stories-CZeeSnID.js → 00.LayoutFlex.stories-oDygdYoI.js} +1 -1
  3. package/dist/assets/{00.applications-D-6PcdWy.js → 00.applications-CYsULPew.js} +1 -1
  4. package/dist/assets/{00.favicons.guide-BOqZ5Z1x.js → 00.favicons.guide-CH6Gi2mg.js} +1 -1
  5. package/dist/assets/{00.token-explorer-Bk0wBfni.js → 00.token-explorer-C_Go53CA.js} +1 -1
  6. package/dist/assets/{00.using-responsive-props-BsEiJlqE.js → 00.using-responsive-props-JIrga6ab.js} +1 -1
  7. package/dist/assets/{01.semantic-tokens-DElwA412.js → 01.semantic-tokens-3BaDr39t.js} +1 -1
  8. package/dist/assets/{01.using-shorthand-props-Bg-Oi5_v.js → 01.using-shorthand-props-BXu4Nck4.js} +1 -1
  9. package/dist/assets/10.Combinations.stories-SaJOx9D-.js +128 -0
  10. package/dist/assets/{10.fonts.guide-CHasKWis.js → 10.fonts.guide-DkOyZCNQ.js} +1 -1
  11. package/dist/assets/{10.ssr-DpNJW1W0.js → 10.ssr-D-0bM4ee.js} +1 -1
  12. package/dist/assets/{11.fonts.explorer-CTqkQ8Jk.js → 11.fonts.explorer-D6KIcb2q.js} +1 -1
  13. package/dist/assets/{11.ssr.app-router-FQQ4sEjM.js → 11.ssr.app-router-DWtYqFlx.js} +1 -1
  14. package/dist/assets/{20.libraries-BTCk2DJX.js → 20.libraries-BlqbfWjy.js} +1 -1
  15. package/dist/assets/{2025-q4-ds-cleanup-BRN8Tdfv.js → 2025-q4-ds-cleanup-BUrvo7oQ.js} +1 -1
  16. package/dist/assets/30.icons.explorer-BKujlrNJ.js +72 -0
  17. package/dist/assets/{30.storybook-DKSi7vdi.js → 30.storybook-CNvYWdc7.js} +1 -1
  18. package/dist/assets/{40.illustrations.explorer-CGBqfl2k.js → 40.illustrations.explorer-CAYAdo7r.js} +1 -1
  19. package/dist/assets/{60.components-6MJdvrRn.js → 60.components-odtQau37.js} +1 -1
  20. package/dist/assets/{90.advanced-B9pO5FKL.js → 90.advanced-nCsVunZT.js} +1 -1
  21. package/dist/assets/Accordion-D95NvT0Z.css +1 -0
  22. package/dist/assets/Accordion-grHCnfbZ.js +21 -0
  23. package/dist/assets/{Accordion.stories-B7zpGc3N.js → Accordion.stories-CTbvRFnt.js} +10 -3
  24. package/dist/assets/{Accordion.tests.stories-TuJItmwi.js → Accordion.tests.stories-B6g6Kr6m.js} +17 -10
  25. package/dist/assets/{AlertBanner.primitives.stories-C0FNaxJR.js → AlertBanner.primitives.stories-D4-bo1JS.js} +1 -1
  26. package/dist/assets/{AlertBanner.stories-BeZGLz-f.js → AlertBanner.stories-BrNGGvfj.js} +1 -1
  27. package/dist/assets/AlertBannerAction-DvbUWtiW.js +127 -0
  28. package/dist/assets/{AlertDialog-Dk5PtknG.js → AlertDialog-Da2sPT1D.js} +1 -1
  29. package/dist/assets/{AlertDialog.stories-CwxQZyTF.js → AlertDialog.stories-D7ALUucQ.js} +1 -1
  30. package/dist/assets/{Avatar.stories-Dp9pDU6q.js → Avatar.stories-BICCl1VI.js} +1 -1
  31. package/dist/assets/{AvatarWithStatus-Cfv2-J8U.js → AvatarWithStatus-D02yNzQm.js} +3 -3
  32. package/dist/assets/{AvatarWithStatus.stories-9MJ13xVu.js → AvatarWithStatus.stories-CxBQAt3x.js} +1 -1
  33. package/dist/assets/{Badge-BPd-gr8r.js → Badge-Ba7-qf6a.js} +2 -2
  34. package/dist/assets/{Badge.stories-DIgYXyBb.js → Badge.stories-Dzxsvo2o.js} +1 -1
  35. package/dist/assets/{Box-G2_C7Jeq.js → Box--iQMFWAl.js} +2 -2
  36. package/dist/assets/{Box.stories-_HS5gmLH.js → Box.stories-D0JGgXyX.js} +1 -1
  37. package/dist/assets/{BubbleCounter-DNO8aNBu.js → BubbleCounter-C7jrl0BR.js} +1 -1
  38. package/dist/assets/{BubbleCounter.stories-CyzNA0Bp.js → BubbleCounter.stories-C28ZYRgB.js} +1 -1
  39. package/dist/assets/Button-DagS5hxP.js +19 -0
  40. package/dist/assets/{Button.stories-5MZ_eXfn.js → Button.stories-CTvHtk-S.js} +19 -7
  41. package/dist/assets/{ButtonBase-C22oeCEB.js → ButtonBase-CMR6iWFG.js} +3 -2
  42. package/dist/assets/{CalloutBanner.stories-RwI1z0sm.js → CalloutBanner.stories-BbHi-g9a.js} +1 -1
  43. package/dist/assets/CalloutBannerText-DP2O2LqI.js +28 -0
  44. package/dist/assets/Checkbox-BV4Be-fH.js +7 -0
  45. package/dist/assets/{Checkbox-B_qY1TUo.css → Checkbox-DIfWwwEC.css} +1 -1
  46. package/dist/assets/{Checkbox.stories-CQsCp6Jy.js → Checkbox.stories-BWfWlkM3.js} +8 -8
  47. package/dist/assets/{Checkbox.tests.stories-05uWFXz_.js → Checkbox.tests.stories-iLD_cClo.js} +1 -1
  48. package/dist/assets/{Chips.stories-DSuVc2t5.js → Chips.stories-BikTAQab.js} +1 -1
  49. package/dist/assets/{Color-6BZIO3FS-CMeY9l9b.js → Color-6BZIO3FS-BqH2EFjf.js} +1 -1
  50. package/dist/assets/{ComposingDialogs.stories-DM7_H9s_.js → ComposingDialogs.stories-ei_TWBhw.js} +1 -1
  51. package/dist/assets/{ComposingPopovers.stories-BfWmolPD.js → ComposingPopovers.stories-DEmACL7_.js} +1 -1
  52. package/dist/assets/CountryFlag-DXTijnBa.js +3 -0
  53. package/dist/assets/{CountryFlag.stories-BbEBSjOp.js → CountryFlag.stories-r9szKDdv.js} +1 -1
  54. package/dist/assets/{CountryFlag.test.stories-BEKGdJSA.js → CountryFlag.test.stories-DS8v3a4U.js} +1 -1
  55. package/dist/assets/{Dialog-CGhOTWSt.js → Dialog-a74MpEoC.js} +2 -2
  56. package/dist/assets/{Dialog.primitives.stories-B-OAqhJT.js → Dialog.primitives.stories-CkKykon1.js} +1 -1
  57. package/dist/assets/{Dialog.stories-B6xtR1zI.js → Dialog.stories-CoTCFYpz.js} +18 -5
  58. package/dist/assets/{Dialog.test.stories-9Ct6h0zZ.js → Dialog.test.stories-aF_5M6-z.js} +1 -1
  59. package/dist/assets/DialogActions-BsCqS7W7.js +9 -0
  60. package/dist/assets/DialogCloseButton-Df1XDsMW.js +12 -0
  61. package/dist/assets/DismissibleChips-QUmF1DlO.js +1 -0
  62. package/dist/assets/{DismissibleChips.stories-vx1F9ELx.js → DismissibleChips.stories-BbLkTYXP.js} +17 -6
  63. package/dist/assets/{Divider.stories-CMbQ5L3q.js → Divider.stories-r49aSANX.js} +1 -1
  64. package/dist/assets/{DocsRenderer-LL677BLK-D6wCD5Bw.js → DocsRenderer-LL677BLK-D55zMWRu.js} +1 -1
  65. package/dist/assets/DropdownMenu-CEFQwkft.js +142 -0
  66. package/dist/assets/{DropdownMenu.stories-DC585dGe.js → DropdownMenu.stories-Bwd2yU64.js} +1 -1
  67. package/dist/assets/{FieldButton-DjbyU7Ud.js → FieldButton-SkKd22gq.js} +1 -1
  68. package/dist/assets/{FieldButton.stories-mgMXy6g8.js → FieldButton.stories-CeUnTuE8.js} +1 -1
  69. package/dist/assets/{FormControl-N0zmQNS2.js → FormControl-C_Mh5dfi.js} +1 -1
  70. package/dist/assets/{FormControl-DX3yRMc2.css → FormControl-C_byGyqD.css} +1 -1
  71. package/dist/assets/{FormControl.stories-B8Ne0MLq.js → FormControl.stories-Bs2ISm2I.js} +4 -4
  72. package/dist/assets/{Heading-Bmekm9VQ.js → Heading-Xmy4HTvU.js} +1 -1
  73. package/dist/assets/{Heading.stories-Bkr_umIZ.js → Heading.stories-6Dgn_J8U.js} +1 -1
  74. package/dist/assets/{Icon-DwVTLcDP.js → Icon-C-oDFSRH.js} +1 -1
  75. package/dist/assets/{Icon-RSC-Dn9e0iAh.js → Icon-RSC-Ch-QtBFc.js} +1 -1
  76. package/dist/assets/{Icon.stories-D9JEL0Hx.js → Icon.stories-DA2UaTGv.js} +1 -1
  77. package/dist/assets/IconButton-Qo4r7KAR.js +9 -0
  78. package/dist/assets/{IconTile.stories-B5GBHpUh.js → IconTile.stories-C4MpGbZs.js} +1 -1
  79. package/dist/assets/Input-D6_jI5Uh.js +3 -0
  80. package/dist/assets/{IntegrationWithReactHookForm.stories-CCDlaJxi.js → IntegrationWithReactHookForm.stories-6kdmvmQr.js} +1 -1
  81. package/dist/assets/IntlFormattedAggregatedDateTime-Ai802ecy.js +1 -0
  82. package/dist/assets/IntlFormattedCurrency-DUrW8wq9.js +1 -0
  83. package/dist/assets/{IntlFormattedCurrency.stories-BuMkiJd6.js → IntlFormattedCurrency.stories-DFdfoYCv.js} +1 -1
  84. package/dist/assets/{IntlFormattedDateTime.stories-DMN58d8q.js → IntlFormattedDateTime.stories-CHRJCN68.js} +1 -1
  85. package/dist/assets/IntlFormattedTime-BOUEN1XF.js +2 -0
  86. package/dist/assets/{LayoutFlex-CEr_Bd5T.js → LayoutFlex-CpktYRVX.js} +1 -1
  87. package/dist/assets/{LayoutFlexItem-DCUGpEDU.js → LayoutFlexItem-Dvv_cK8l.js} +1 -1
  88. package/dist/assets/{LayoutGrid-DCLStsDr.js → LayoutGrid-DvHLpq-e.js} +1 -1
  89. package/dist/assets/{LayoutGrid.stories-DaY7nZ2z.js → LayoutGrid.stories-DCTuVuVw.js} +1 -1
  90. package/dist/assets/{LayoutGridItem-BRLJDeYd.js → LayoutGridItem-n0bW9yG3.js} +1 -1
  91. package/dist/assets/Link-Cu3kBnvE.css +1 -0
  92. package/dist/assets/Link-DLL8OonN.js +5 -0
  93. package/dist/assets/{Link.stories-kXGLhYoc.js → Link.stories-D_FvQngK.js} +43 -15
  94. package/dist/assets/{Loader-qd0Q5Uz_.js → Loader-raMoSfHx.js} +1 -1
  95. package/dist/assets/{Loader.stories-m379tb7j.js → Loader.stories-7tG1NS7B.js} +1 -1
  96. package/dist/assets/MultiSelectChips-DSeV2AIy.js +2 -0
  97. package/dist/assets/{MultiSelectChips.stories-DfyHnHHY.js → MultiSelectChips.stories-CKax5hXL.js} +27 -8
  98. package/dist/assets/NativeSelectField.stories-D3-RNzbp.js +249 -0
  99. package/dist/assets/NumberField-CNBfsJCY.js +6 -0
  100. package/dist/assets/{NumberField.stories-BUxd-7gq.js → NumberField.stories-CHVQ_b9k.js} +1 -1
  101. package/dist/assets/{ObserveIntersection-ClJrn-sk.js → ObserveIntersection-CR4IhuYz.js} +1 -1
  102. package/dist/assets/{ObserveIntersection.stories-CisY8E_w.js → ObserveIntersection.stories-D1FkxcMY.js} +1 -1
  103. package/dist/assets/{OnboardingTooltip-DkrwDHv3.js → OnboardingTooltip-BNwId6Jx.js} +3 -3
  104. package/dist/assets/{OnboardingTooltip.stories-DDVYxEt5.js → OnboardingTooltip.stories-npBmAhu4.js} +1 -1
  105. package/dist/assets/{OnboardingTooltip.tests.stories-BVUaM-wO.js → OnboardingTooltip.tests.stories-oxLHDwgd.js} +1 -1
  106. package/dist/assets/{OnboardingTour-CGa-836f.js → OnboardingTour-RWyquFZd.js} +1 -1
  107. package/dist/assets/{OnboardingTour.stories-yLGZ0dlp.js → OnboardingTour.stories-CsdqirC3.js} +1 -1
  108. package/dist/assets/{OnboardingTour.tests.stories-DxxzBEuR.js → OnboardingTour.tests.stories-DkBfD2kH.js} +1 -1
  109. package/dist/assets/PasswordField-B2PnHIH1.js +6 -0
  110. package/dist/assets/{PasswordField.stories-CBcIKnYx.js → PasswordField.stories-CcnDrvIB.js} +1 -1
  111. package/dist/assets/{PreplyLogo-BzNZ8wpS.js → PreplyLogo-EsNyTV4m.js} +2 -2
  112. package/dist/assets/{PreplyLogo.stories-8kPZdvbV.js → PreplyLogo.stories-Bm6-o3h8.js} +10 -2
  113. package/dist/assets/{ProgressBar.stories-BD3OKmoy.js → ProgressBar.stories-DtKBuyeU.js} +1 -1
  114. package/dist/assets/{ProgressSteps.stories-Bb7wnDFB.js → ProgressSteps.stories-CCDOfqG3.js} +1 -1
  115. package/dist/assets/{PromoDialog-Bx4wrVnI.js → PromoDialog-CdaXJHkH.js} +1 -1
  116. package/dist/assets/{RangeSlider-gznGiBxe.js → RangeSlider-Eo2dw_WW.js} +2 -2
  117. package/dist/assets/{RangeSlider.stories-Bj82Tme8.js → RangeSlider.stories-DAd-xGsP.js} +1 -1
  118. package/dist/assets/{Rating-CDQpKKfm.js → Rating-CAaFjEvZ.js} +1 -1
  119. package/dist/assets/{Rating.stories-440yo9nU.js → Rating.stories-8F2e8UDj.js} +1 -1
  120. package/dist/assets/{RatingInput-S42sTjma.js → RatingInput-BNKHainW.js} +2 -2
  121. package/dist/assets/{RatingInput.stories-BJ91kNqc.js → RatingInput.stories-0bwrwiHs.js} +20 -6
  122. package/dist/assets/{SelectField-C9fy_QpQ.css → SelectField-hr5YRqjg.css} +1 -1
  123. package/dist/assets/SelectField-qBhGOYdK.js +7 -0
  124. package/dist/assets/{SelectField.stories-CDA-sJca.js → SelectField.stories-Iz2YZ_Bs.js} +1 -1
  125. package/dist/assets/{ShowOnIntersection-BIc8Ks2O.js → ShowOnIntersection-BMR5nazA.js} +2 -2
  126. package/dist/assets/{ShowOnIntersection.stories-COT8LZNV.js → ShowOnIntersection.stories-CSSgxbfv.js} +1 -1
  127. package/dist/assets/SingleSelectChips-CFj7aR84.js +2 -0
  128. package/dist/assets/{SingleSelectChips.stories-D96yFWLY.js → SingleSelectChips.stories-CJ3zaafZ.js} +27 -8
  129. package/dist/assets/{Slider-cjoP1Fs6.js → Slider-Bxzp79ts.js} +2 -2
  130. package/dist/assets/{Slider.stories-zcp8qoUB.js → Slider.stories-C872-jZV.js} +1 -1
  131. package/dist/assets/{Spinner-DGdYqKak.js → Spinner-B-14zfoF.js} +1 -1
  132. package/dist/assets/{Stars-C54j1o92.js → Stars-BU2A8ygV.js} +1 -1
  133. package/dist/assets/{Stars-DRmASRCW.css → Stars-BqHYDCKx.css} +1 -1
  134. package/dist/assets/{Steps-B9DWysMC.js → Steps-CNOQ424q.js} +1 -1
  135. package/dist/assets/{Steps.stories-_6S1E6ef.js → Steps.stories-GHgF9EAg.js} +1 -1
  136. package/dist/assets/{Switch-CpclSBFz.js → Switch-DyKTsO1c.js} +1 -1
  137. package/dist/assets/{Switch.stories-BJ_jGNoM.js → Switch.stories-Dz3BYhCT.js} +1 -1
  138. package/dist/assets/{Text-B288uCKD.js → Text-Bj49UVGS.js} +1 -1
  139. package/dist/assets/{Text.stories-C8gR83BJ.js → Text.stories-DjSvZaCW.js} +1 -1
  140. package/dist/assets/TextField-B4F8szIu.js +6 -0
  141. package/dist/assets/{TextField.stories-kWIuQbVk.js → TextField.stories-ZNn7FBmC.js} +1 -1
  142. package/dist/assets/{TextHighlighted-D0RJV5JS.js → TextHighlighted-DPLkdIhv.js} +1 -1
  143. package/dist/assets/{TextHighlighted.stories-3U6i5jBR.js → TextHighlighted.stories-CEPLsjw4.js} +1 -1
  144. package/dist/assets/{TextInline-CKVi4m4-.js → TextInline-DVOlWF4R.js} +1 -1
  145. package/dist/assets/{TextInline.stories-BOaBqgcv.js → TextInline.stories-DVE70fjR.js} +1 -1
  146. package/dist/assets/TextareaField-G733luKs.js +6 -0
  147. package/dist/assets/{TextareaField.stories-d5yoJlrM.js → TextareaField.stories-Bqzxd-3e.js} +1 -1
  148. package/dist/assets/{Toast-IjHsw63R.js → Toast-CTlQ5Kx4.js} +1 -1
  149. package/dist/assets/{Toast.stories-1KDAj2_0.js → Toast.stories-DcPkMFFv.js} +1 -1
  150. package/dist/assets/{Tooltip-DGa6B2Md.js → Tooltip-DCzQmBi_.js} +2 -2
  151. package/dist/assets/Tooltip.stories-duE4AOVl.js +91 -0
  152. package/dist/assets/{Tooltip.tests.stories-CRehoOBJ.js → Tooltip.tests.stories-BsQ0I33Q.js} +1 -1
  153. package/dist/assets/{ai-integration-Cs38H8gd.js → ai-integration-CUld8nBB.js} +1 -1
  154. package/dist/assets/{breakpoints-CvEPhO_a.js → breakpoints-CDLTCEqT.js} +1 -1
  155. package/dist/assets/{breakpoints-CdgVhtfb.js → breakpoints-D3C_qtqX.js} +1 -1
  156. package/dist/assets/{breakpoints-QD8InWGt.js → breakpoints-DyVmNUf9.js} +1 -1
  157. package/dist/assets/{changelog-DF2IN9rv.js → changelog-CY7pOlLk.js} +27 -1
  158. package/dist/assets/{constants-DZ53IKPx.js → constants-Ce2rgJrk.js} +7 -7
  159. package/dist/assets/{createRequiredContext-rvejDfGq.css → createRequiredContext-Dp6R3H4g.css} +1 -1
  160. package/dist/assets/createRequiredContext-dSBuii-4.js +11 -0
  161. package/dist/assets/{dist-C0mWr2n-.css → dist-CKzY_Ph_.css} +1 -1
  162. package/dist/assets/{dist-Czl5bXKQ.js → dist-nghRgjCb.js} +1 -1
  163. package/dist/assets/{esm-CwnA5ofl.js → esm-BYGpffIq.js} +1 -1
  164. package/dist/assets/{fonts-explorer.stories-qeCxz5m7.js → fonts-explorer.stories-DpO5HxZ3.js} +1 -1
  165. package/dist/assets/{getTokenVar-B1giJATd.js → getTokenVar-DG0TGXYc.js} +1 -1
  166. package/dist/assets/{gradientBorders-Cm8R3nbh.js → gradientBorders-C2jt5p-C.js} +1 -1
  167. package/dist/assets/{hover-CvX1r1hU.js → hover-BCzGbPFV.js} +1 -1
  168. package/dist/assets/{hover-_bHqheK2.js → hover-D6mzisaD.js} +1 -1
  169. package/dist/assets/{hover-BDYlYavU.js → hover-DfbppVmU.js} +1 -1
  170. package/dist/assets/{iframe-Ddp8AsMq.js → iframe-kBDSpxRI.js} +196 -196
  171. package/dist/assets/{intro-BzGH4Z_0.js → intro-DQpyhoTG.js} +1 -1
  172. package/dist/assets/{layout-relative-DXMXPMmM.js → layout-relative-BOsTfett.js} +1 -1
  173. package/dist/assets/{migrating-from-less-C2EXSVYH.js → migrating-from-less-V1oeKlSf.js} +1 -1
  174. package/dist/assets/{styled-components.browser.esm-48-sXnz9.js → styled-components.browser.esm-BF2I7YPU.js} +1 -1
  175. package/dist/assets/{styled-components.browser.esm-qDVQO-j_.js → styled-components.browser.esm-C-pLV-H4.js} +1 -1
  176. package/dist/assets/{tokens-BCTbazjg.js → tokens-Bw3658eU.js} +1 -1
  177. package/dist/assets/{tokens-CuiP8hOR.js → tokens-D1eOr0iV.js} +1 -1
  178. package/dist/assets/{tokens-Be7KYpgq.js → tokens-Yf07x_wA.js} +1 -1
  179. package/dist/assets/{useControllableState-DQx2v_AU.js → useControllableState-B6dCOM10.js} +1 -1
  180. package/dist/assets/{usePortalElement-D7u5urLa.js → usePortalElement-CzAPYwMj.js} +1 -1
  181. package/dist/assets/{welcome-Cj1ZSZQe.js → welcome-CCU104Dv.js} +1 -1
  182. package/dist/assets/{zeroheight-d0Ov-C_Q.js → zeroheight-I34niHYD.js} +1 -1
  183. package/dist/iframe.html +1 -1
  184. package/dist/index.html +6 -2
  185. package/dist/index.json +1 -1
  186. package/dist/preview-stats.json +13652 -13601
  187. package/dist/project.json +1 -1
  188. package/dist/sb-addons/pseudo-states-6/manager-bundle.js +3 -0
  189. package/package.json +6 -5
  190. package/pages/30.guides/70.assets/components/IllustrationsList.tsx +1 -0
  191. package/pages/30.guides/70.assets/constants/icon-imports.ts +2 -0
  192. package/dist/assets/10.Combinations.stories-CJFPYaPG.js +0 -128
  193. package/dist/assets/30.icons.explorer-J8Rr_F6c.js +0 -72
  194. package/dist/assets/Accordion-BVDqu0gO.js +0 -25
  195. package/dist/assets/Accordion-bbEcwV1l.css +0 -1
  196. package/dist/assets/AlertBannerAction-Ul2Z9Ycf.js +0 -216
  197. package/dist/assets/Button-a57MCiDO.js +0 -18
  198. package/dist/assets/CalloutBannerText-DJ3eTwo4.js +0 -75
  199. package/dist/assets/Checkbox-Bchk1blw.js +0 -10
  200. package/dist/assets/CountryFlag-Coh5YEUl.js +0 -49
  201. package/dist/assets/DialogActions-BbTn22Uy.js +0 -101
  202. package/dist/assets/DialogCloseButton-CMOrMiok.js +0 -149
  203. package/dist/assets/DismissibleChips-Dc4tbb9S.js +0 -1
  204. package/dist/assets/DropdownMenu-C_t43Tvd.js +0 -1258
  205. package/dist/assets/IconButton-D218WESp.js +0 -8
  206. package/dist/assets/Input-XupGAuRo.js +0 -95
  207. package/dist/assets/IntlFormattedAggregatedDateTime-9V1gJxcg.js +0 -379
  208. package/dist/assets/IntlFormattedCurrency-loMkSk5h.js +0 -505
  209. package/dist/assets/IntlFormattedTime-DykXrEe3.js +0 -2900
  210. package/dist/assets/Link-D75aReRI.js +0 -5
  211. package/dist/assets/Link-DZ7eineG.css +0 -1
  212. package/dist/assets/MultiSelectChips-HRY_a-9f.js +0 -2
  213. package/dist/assets/NativeSelectField.stories-DFN4NN7z.js +0 -295
  214. package/dist/assets/NumberField-BmPC7HUo.js +0 -6
  215. package/dist/assets/PasswordField-DSRq_bhg.js +0 -6
  216. package/dist/assets/SelectField-u1424VWi.js +0 -19
  217. package/dist/assets/SingleSelectChips-BOJ8NDnY.js +0 -2
  218. package/dist/assets/TextField-Ch_1Y9U9.js +0 -6
  219. package/dist/assets/TextareaField-FzIH0QHs.js +0 -6
  220. package/dist/assets/Tooltip.stories-BG331mYm.js +0 -93
  221. package/dist/assets/createRequiredContext-CfIj7m5a.js +0 -241
  222. /package/dist/assets/{Avatar-C37O_UDH.js → Avatar-D6oXWjq1.js} +0 -0
  223. /package/dist/assets/{Divider-By80O4iG.js → Divider-Nv1279vj.js} +0 -0
  224. /package/dist/assets/{InputContainer-DSGASCBR.js → InputContainer-xfDpQQNl.js} +0 -0
  225. /package/dist/assets/{ProgressBar-Crf4SgkT.js → ProgressBar-CRitEeQk.js} +0 -0
  226. /package/dist/assets/{ProgressSteps-Cl7OdN1S.js → ProgressSteps-B2AXEKFJ.js} +0 -0
  227. /package/dist/assets/{TokyoUIAvailability7LateNight-BKvXBfeB.js → TokyoUIAvailability7LateNight-Bho17X1G.js} +0 -0
  228. /package/dist/assets/{TokyoUICheck-DAIMkBqJ.js → TokyoUICheck-BxTDosuA.js} +0 -0
  229. /package/dist/assets/{TokyoUICheckmark-FfHUfu5K.js → TokyoUICheckmark-BgAaFb6V.js} +0 -0
  230. /package/dist/assets/{TokyoUIChevronRight-DWF5Wc42.js → TokyoUIChevronRight-C__gngF1.js} +0 -0
  231. /package/dist/assets/{TokyoUIEmojiFrowning-CyL90GhY.js → TokyoUIEmojiFrowning-rSnD4TX2.js} +0 -0
  232. /package/dist/assets/{TokyoUIErrorWarning-aLVlh8HS.js → TokyoUIErrorWarning-BH93ehx8.js} +0 -0
  233. /package/dist/assets/{TokyoUIEye-DPcSixPI.js → TokyoUIEye-B3okJSKv.js} +0 -0
  234. /package/dist/assets/{TokyoUIFav-CdvVuNHN.js → TokyoUIFav-B1g1wYYK.js} +0 -0
  235. /package/dist/assets/{TokyoUIInfo-BTRd4tvr.js → TokyoUIInfo-CL0Zo7ru.js} +0 -0
  236. /package/dist/assets/{TokyoUIMessages-DiuUQ-OO.js → TokyoUIMessages-BO3EETWj.js} +0 -0
  237. /package/dist/assets/{TokyoUISparkle-Ckr14xJ9.js → TokyoUISparkle-5ta_MRge.js} +0 -0
  238. /package/dist/assets/{TokyoUIStarFilled-BKIQgn1I.js → TokyoUIStarFilled-DiQeedTx.js} +0 -0
  239. /package/dist/assets/{TokyoUITag-BmP85Jya.js → TokyoUITag-C8mbO1a7.js} +0 -0
  240. /package/dist/assets/{VisuallyHidden-DjFrTdW3.js → VisuallyHidden-CpMYtDeS.js} +0 -0
  241. /package/dist/assets/{align-self-CArWUz5E.js → align-self-DPOkDP3u.js} +0 -0
  242. /package/dist/assets/{emotion-unitless.esm-CznjPqRE.js → emotion-unitless.esm-DCJ5qRdW.js} +0 -0
  243. /package/dist/assets/{layout-relative.module-BMQDPKP6.js → layout-relative.module-C0ke0xP4.js} +0 -0
  244. /package/dist/assets/{storybook-utils-Dnw8-7zP.js → storybook-utils-BfrlMSeG.js} +0 -0
  245. /package/dist/assets/{useBreakpointMatch-D4lYvPbF.js → useBreakpointMatch-CmOkxQJ1.js} +0 -0
  246. /package/dist/assets/{useStableCallback-DRmyBaAs.js → useStableCallback-BRGKkp0I.js} +0 -0
  247. /package/dist/sb-addons/{storybook-6 → storybook-7}/manager-bundle.js +0 -0
@@ -0,0 +1,2 @@
1
+ import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{ht as r,t as i}from"./dist-DtfJeYQK.js";import{t as a}from"./jsx-runtime-C2wGStra.js";import{n as o,t as s}from"./dist-Cc1j9Pjk.js";import{n as c,t as l}from"./filterAttributesPassedByRadixUIAtRuntime-CGiuUnR2.js";import{n as u,t as d}from"./useControllableState-B6dCOM10.js";import{a as f,c as p,i as m,l as h,n as g,o as _,r as v,s as y,t as b}from"./createRequiredContext-dSBuii-4.js";var x,S,C,w,T,E,D=t((()=>{x=e(n(),1),d(),h(),i(),s(),c(),g(),S=a(),[C,w]=b(`SingleSelectChips`),T=(0,x.forwardRef)(function({items:e,children:t,orientation:n=p,"aria-label":i,"aria-controls":a,value:s,onValueChange:c,defaultValue:d,dataset:f,...m},h){let[g,v]=u({value:s,onValueChange:c,defaultValue:d??null}),b=e?e.map(({label:e,value:t,...n})=>(0,S.jsx)(E,{value:t,...n,children:e},t)):t;return(0,S.jsx)(C,{value:{value:g,onValueChange:v},children:(0,S.jsx)(y,{orientation:n,children:(0,S.jsx)(_,{...l(m),ref:h,orientation:n,"aria-orientation":n,"aria-label":i,"aria-controls":a,role:`listbox`,"aria-multiselectable":`false`,...r(f,{preplyDsComponent:o.SingleSelectChips}),children:b})})})}),E=(0,x.forwardRef)(function({value:e,children:t,icon:n,countryFlagCode:i,disabled:a,counter:s,dataset:c,...u},d){let{value:p,onValueChange:h}=w(),g=p===e;return(0,S.jsx)(f,{role:`presentation`,children:(0,S.jsx)(v,{...l(u),ref:d,role:`option`,"aria-selected":g,onClick:()=>h(g?null:e),icon:n,countryFlagCode:i,disabled:a,...r(c,{preplyDsComponent:o.SingleSelectChipsItem}),children:(0,S.jsx)(m,{counter:s,children:t})})})});try{T.displayName=`SingleSelectChips`,T.__docgenInfo={description:`A chips component that allows selection of a single option from a group.
2
+ Users can select one chip at a time, and clicking a selected chip will deselect it.`,displayName:`SingleSelectChips`,props:{dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},"aria-label":{defaultValue:null,description:`Accessible label for the chips group. Required for screen reader users`,name:`aria-label`,required:!0,type:{name:`string`}},value:{defaultValue:null,description:`Current value of the chips. When provided, the component operates in controlled mode`,name:`value`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`}]}},defaultValue:{defaultValue:null,description:"Default value for uncontrolled usage. Will be ignored if `value` is provided",name:`defaultValue`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`}]}},onValueChange:{defaultValue:null,description:`Callback fired when the value changes. Receives the new value as an argument`,name:`onValueChange`,required:!1,type:{name:`enum`,value:[{value:`(value: T | null) => void`}]}},"aria-controls":{defaultValue:null,description:"If the chips control other elements on the page, use `aria-controls` with the target element's ID.",name:`aria-controls`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},orientation:{defaultValue:{value:`'horizontal'`},description:`Layout orientation of the chips group.`,name:`orientation`,required:!1,type:{name:`enum`,value:[{value:`"horizontal"`},{value:`"vertical"`}]}},items:{defaultValue:null,description:``,name:`items`,required:!1,type:{name:`enum`,value:[{value:`(Omit<ChipsItemProps, "children" | "value"> & { value: T extends unknown[] ? NonNullable<T[number]> : NonNullable<T>; label: ReactNode; })[]`}]}},ref:{defaultValue:null,description:``,name:`ref`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`(instance: HTMLUListElement | null) => void`},{value:`RefObject<HTMLUListElement>`}]}}}}}catch{}try{E.displayName=`SingleSelectChipsItem`,E.__docgenInfo={description:`Individual chip item for use within SingleSelectChips.`,displayName:`SingleSelectChipsItem`,props:{icon:{defaultValue:null,description:``,name:`icon`,required:!1,type:{name:`enum`,value:[{value:`ComponentClass<SVGAttributes<SVGElement>, any>`},{value:`FunctionComponent<SVGAttributes<SVGElement>>`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}},countryFlagCode:{defaultValue:null,description:``,name:`countryFlagCode`,required:!1,type:{name:`enum`,value:[{value:`"at"`},{value:`"id"`},{value:`"as"`},{value:`"ai"`},{value:`"li"`},{value:`"th"`},{value:`"tr"`},{value:`"td"`},{value:`"is"`},{value:`"af"`},{value:`"ax"`},{value:`"al"`},{value:`"dz"`},{value:`"ad"`},{value:`"ao"`},{value:`"aq"`},{value:`"ag"`},{value:`"ar"`},{value:`"am"`},{value:`"aw"`},{value:`"sh-ac"`},{value:`"asean"`},{value:`"au"`},{value:`"az"`},{value:`"bs"`},{value:`"bh"`},{value:`"bd"`},{value:`"bb"`},{value:`"es-pv"`},{value:`"by"`},{value:`"be"`},{value:`"bz"`},{value:`"bj"`},{value:`"bm"`},{value:`"bt"`},{value:`"bo"`},{value:`"bq"`},{value:`"ba"`},{value:`"bw"`},{value:`"bv"`},{value:`"br"`},{value:`"io"`},{value:`"bn"`},{value:`"bg"`},{value:`"bf"`},{value:`"bi"`},{value:`"cv"`},{value:`"kh"`},{value:`"cm"`},{value:`"ca"`},{value:`"ic"`},{value:`"es-ct"`},{value:`"ky"`},{value:`"cf"`},{value:`"cefta"`},{value:`"cl"`},{value:`"cn"`},{value:`"cx"`},{value:`"cp"`},{value:`"cc"`},{value:`"co"`},{value:`"km"`},{value:`"ck"`},{value:`"cr"`},{value:`"hr"`},{value:`"cu"`},{value:`"cw"`},{value:`"cy"`},{value:`"cz"`},{value:`"ci"`},{value:`"cd"`},{value:`"dk"`},{value:`"dg"`},{value:`"dj"`},{value:`"dm"`},{value:`"do"`},{value:`"eac"`},{value:`"ec"`},{value:`"eg"`},{value:`"sv"`},{value:`"gb-eng"`},{value:`"gq"`},{value:`"er"`},{value:`"ee"`},{value:`"sz"`},{value:`"et"`},{value:`"eu"`},{value:`"fk"`},{value:`"fo"`},{value:`"fm"`},{value:`"fj"`},{value:`"fi"`},{value:`"fr"`},{value:`"gf"`},{value:`"pf"`},{value:`"tf"`},{value:`"ga"`},{value:`"es-ga"`},{value:`"gm"`},{value:`"ge"`},{value:`"de"`},{value:`"gh"`},{value:`"gi"`},{value:`"gr"`},{value:`"gl"`},{value:`"gd"`},{value:`"gp"`},{value:`"gu"`},{value:`"gt"`},{value:`"gg"`},{value:`"gn"`},{value:`"gw"`},{value:`"gy"`},{value:`"ht"`},{value:`"hm"`},{value:`"va"`},{value:`"hn"`},{value:`"hk"`},{value:`"hu"`},{value:`"in"`},{value:`"ir"`},{value:`"iq"`},{value:`"ie"`},{value:`"im"`},{value:`"il"`},{value:`"it"`},{value:`"jm"`},{value:`"jp"`},{value:`"je"`},{value:`"jo"`},{value:`"kz"`},{value:`"ke"`},{value:`"ki"`},{value:`"xk"`},{value:`"kw"`},{value:`"kg"`},{value:`"la"`},{value:`"lv"`},{value:`"arab"`},{value:`"lb"`},{value:`"ls"`},{value:`"lr"`},{value:`"ly"`},{value:`"lt"`},{value:`"lu"`},{value:`"mo"`},{value:`"mg"`},{value:`"mw"`},{value:`"my"`},{value:`"mv"`},{value:`"ml"`},{value:`"mt"`},{value:`"mh"`},{value:`"mq"`},{value:`"mr"`},{value:`"mu"`},{value:`"yt"`},{value:`"mx"`},{value:`"md"`},{value:`"mc"`},{value:`"mn"`},{value:`"me"`},{value:`"ms"`},{value:`"ma"`},{value:`"mz"`},{value:`"mm"`},{value:`"na"`},{value:`"nr"`},{value:`"np"`},{value:`"nl"`},{value:`"nc"`},{value:`"nz"`},{value:`"ni"`},{value:`"ne"`},{value:`"ng"`},{value:`"nu"`},{value:`"nf"`},{value:`"kp"`},{value:`"mk"`},{value:`"gb-nir"`},{value:`"mp"`},{value:`"no"`},{value:`"om"`},{value:`"pc"`},{value:`"pk"`},{value:`"pw"`},{value:`"pa"`},{value:`"pg"`},{value:`"py"`},{value:`"pe"`},{value:`"ph"`},{value:`"pn"`},{value:`"pl"`},{value:`"pt"`},{value:`"pr"`},{value:`"qa"`},{value:`"cg"`},{value:`"ro"`},{value:`"ru"`},{value:`"rw"`},{value:`"re"`},{value:`"bl"`},{value:`"sh-hl"`},{value:`"sh"`},{value:`"kn"`},{value:`"lc"`},{value:`"mf"`},{value:`"pm"`},{value:`"vc"`},{value:`"ws"`},{value:`"sm"`},{value:`"st"`},{value:`"sa"`},{value:`"gb-sct"`},{value:`"sn"`},{value:`"rs"`},{value:`"sc"`},{value:`"sl"`},{value:`"sg"`},{value:`"sx"`},{value:`"sk"`},{value:`"si"`},{value:`"sb"`},{value:`"so"`},{value:`"za"`},{value:`"gs"`},{value:`"kr"`},{value:`"ss"`},{value:`"es"`},{value:`"lk"`},{value:`"ps"`},{value:`"sd"`},{value:`"sr"`},{value:`"sj"`},{value:`"se"`},{value:`"ch"`},{value:`"sy"`},{value:`"tw"`},{value:`"tj"`},{value:`"tz"`},{value:`"tl"`},{value:`"tg"`},{value:`"tk"`},{value:`"to"`},{value:`"tt"`},{value:`"sh-ta"`},{value:`"tn"`},{value:`"tm"`},{value:`"tc"`},{value:`"tv"`},{value:`"ug"`},{value:`"ua"`},{value:`"ae"`},{value:`"gb"`},{value:`"un"`},{value:`"um"`},{value:`"us"`},{value:`"uy"`},{value:`"uz"`},{value:`"vu"`},{value:`"ve"`},{value:`"vn"`},{value:`"vg"`},{value:`"vi"`},{value:`"gb-wls"`},{value:`"wf"`},{value:`"eh"`},{value:`"ye"`},{value:`"zm"`},{value:`"zw"`}]}},value:{defaultValue:null,description:`Unique identifier for this chip. Used for selection tracking`,name:`value`,required:!0,type:{name:`string`}},children:{defaultValue:null,description:`Content to display inside the chip`,name:`children`,required:!0,type:{name:`enum`,value:[{value:`undefined`},{value:`null`},{value:`string`},{value:`number`},{value:`false`},{value:`true`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`},{value:`Iterable<ReactNode>`},{value:`ReactPortal`}]}},counter:{defaultValue:null,description:`Optional numeric counter to display alongside the chip label`,name:`counter`,required:!1,type:{name:`enum`,value:[{value:`number`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}}}}}catch{}}));export{E as n,D as r,T as t};
@@ -1,4 +1,4 @@
1
- import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Text-B288uCKD.js";import{n as o,t as s}from"./Heading-Bmekm9VQ.js";import{n as c,t as l}from"./Button-a57MCiDO.js";import{r as ee,t as te}from"./lib-8ue2PVWI.js";import{n as u,r as ne,t as d}from"./SingleSelectChips-BOJ8NDnY.js";import{n as re,t as f}from"./LayoutFlex-CEr_Bd5T.js";import{n as p,t as ie}from"./Link-D75aReRI.js";import{n as m,t as h}from"./Tooltip-DGa6B2Md.js";import{a as g,c as _,i as v,n as y,o as b,r as x,s as S,t as ae}from"./TokyoUIAvailability7LateNight-BKvXBfeB.js";import{n as oe,t as se}from"./TokyoUIEmojiFrowning-CyL90GhY.js";import{r as ce,t as le}from"./styled-components.browser.esm-48-sXnz9.js";var C,w,T,E,D,O,k,A,j,M,N,P,F,I,L,R,z,B,V,H,U,W,G,K,q,J,Y,X,Z,Q,$;t((()=>{C=e(n(),1),ne(),_(),b(),v(),y(),oe(),ee(),re(),i(),ce(),p(),o(),m(),c(),w=r(),{expect:T,within:E,fn:D,userEvent:O,resetAllMocks:k,waitFor:A}=__STORYBOOK_MODULE_TEST__,j={title:`components/Chips/SingleSelectChips`,component:d,subcomponents:{SingleSelectChipsItem:u},parameters:{layout:`padded`},args:{"aria-label":`Choose a skill`,defaultValue:`vocabulary`,onValueChange:D(),items:[{value:`vocabulary`,label:`Vocabulary`},{value:`speaking`,label:`Speaking`},{value:`listening`,label:`Listening`},{value:`reading`,label:`Reading`}]},beforeEach:()=>{k()}},M={play:async({canvasElement:e,step:t,args:n})=>{let r=E(e),i=r.getByRole(`option`,{name:`Vocabulary`}),a=r.getByRole(`option`,{name:`Speaking`}),o=r.getByRole(`option`,{name:`Listening`}),s=r.getByRole(`option`,{name:`Reading`});await t(`Render chips with default value`,async()=>{T(i).toHaveAttribute(`aria-selected`,`true`),T(a).toHaveAttribute(`aria-selected`,`false`),T(o).toHaveAttribute(`aria-selected`,`false`),T(s).toHaveAttribute(`aria-selected`,`false`)}),await t(`Click on the chip to select it`,async()=>{await O.click(a),T(n.onValueChange).toHaveBeenCalledWith(`speaking`),T(i).toHaveAttribute(`aria-selected`,`false`),T(a).toHaveAttribute(`aria-selected`,`true`),T(o).toHaveAttribute(`aria-selected`,`false`),T(s).toHaveAttribute(`aria-selected`,`false`)}),await t(`Click on the chip to deselect it`,async()=>{await O.click(a),T(n.onValueChange).toHaveBeenCalledWith(null),T(i).toHaveAttribute(`aria-selected`,`false`),T(a).toHaveAttribute(`aria-selected`,`false`),T(o).toHaveAttribute(`aria-selected`,`false`),T(s).toHaveAttribute(`aria-selected`,`false`)})}},P={render:function({defaultValue:e,...t}){let[n,r]=(0,C.useState)(e);N=r;let i=e=>{r(e),t.onValueChange?.(e)};return(0,w.jsx)(d,{...t,value:n,onValueChange:i})},play:async({canvasElement:e,step:t,args:n})=>{let r=E(e),i=r.getByRole(`option`,{name:`Vocabulary`}),a=r.getByRole(`option`,{name:`Speaking`}),o=r.getByRole(`option`,{name:`Listening`}),s=r.getByRole(`option`,{name:`Reading`});await t(`Render chips with default value`,async()=>{T(i).toHaveAttribute(`aria-selected`,`true`),T(a).toHaveAttribute(`aria-selected`,`false`),T(o).toHaveAttribute(`aria-selected`,`false`),T(s).toHaveAttribute(`aria-selected`,`false`)}),await t(`Click on the chip to select it`,async()=>{await O.click(a),T(n.onValueChange).toHaveBeenCalledWith(`speaking`),T(i).toHaveAttribute(`aria-selected`,`false`),T(a).toHaveAttribute(`aria-selected`,`true`),T(o).toHaveAttribute(`aria-selected`,`false`),T(s).toHaveAttribute(`aria-selected`,`false`)}),await t(`Click on the chip to deselect it`,async()=>{await O.click(a),T(n.onValueChange).toHaveBeenCalledWith(null),T(i).toHaveAttribute(`aria-selected`,`false`),T(a).toHaveAttribute(`aria-selected`,`false`),T(o).toHaveAttribute(`aria-selected`,`false`),T(s).toHaveAttribute(`aria-selected`,`false`)}),await t(`Change the value externally`,async()=>{k(),N(`vocabulary`),await A(()=>{T(n.onValueChange).not.toHaveBeenCalled(),T(i).toHaveAttribute(`aria-selected`,`true`),T(a).toHaveAttribute(`aria-selected`,`false`),T(o).toHaveAttribute(`aria-selected`,`false`),T(s).toHaveAttribute(`aria-selected`,`false`)})})}},F={args:{items:[{value:`vocabulary`,label:`Vocabulary`},{value:`speaking`,label:`Speaking`,disabled:!0},{value:`listening`,label:`Listening`},{value:`reading`,label:`Reading`}]},play:async({canvasElement:e,step:t,args:n})=>{let r=E(e),i=r.getByRole(`option`,{name:`Speaking`}),a=r.getByRole(`option`,{name:`Vocabulary`});await t(`Disabled chip must have disabled attribute`,async()=>{T(i).toBeDisabled()}),await t(`Disabled chip must not be selectable`,async()=>{await O.click(i),T(n.onValueChange).not.toHaveBeenCalled(),T(a).toHaveAttribute(`aria-selected`,`true`),T(i).toHaveAttribute(`aria-selected`,`false`)})}},I={args:{"aria-label":`Choose an availability`,defaultValue:`morning`,items:[{value:`morning`,label:`Morning`,icon:(0,w.jsx)(S,{})},{value:`afternoon`,label:`Afternoon`,icon:(0,w.jsx)(g,{})},{value:`evening`,label:`Evening`,icon:(0,w.jsx)(x,{})}]},play:async({canvasElement:e,step:t})=>{let n=E(E(e).getByRole(`option`,{name:`Morning`})).getByTestId(`chip-icon`);await t("Chip should render an icon when `icon` prop is passed",async()=>{T(n).toBeVisible()})}},L={args:{"aria-label":`Choose a language to learn`,defaultValue:`english`,items:[{value:`english`,label:`English`,counter:1247},{value:`spanish`,label:`Spanish`,counter:892},{value:`french`,label:`French`,counter:534},{value:`german`,label:`German`,counter:421},{value:`italian`,label:`Italian`,counter:287},{value:`portuguese`,label:`Portuguese`,counter:156}]},play:async({canvasElement:e,step:t})=>{let n=E(E(e).getByRole(`option`,{name:/^English/})).getByTestId(`chip-counter`);await t("Chip should render a counter when `counter` prop is passed",async()=>{T(n).toBeVisible(),T(n).toHaveTextContent(`1247`)})}},R={args:{"aria-label":`Choose a country`,defaultValue:`ua`,items:[{value:`ua`,label:`Ukraine`,countryFlagCode:`ua`},{value:`gb`,label:`United Kingdom`,countryFlagCode:`gb`},{value:`it`,label:`Italy`,countryFlagCode:`it`},{value:`es`,label:`Spain`,countryFlagCode:`es`},{value:`au`,label:`Australia`,countryFlagCode:`au`},{value:`br`,label:`Brazil`,countryFlagCode:`br`},{value:`eg`,label:`Egypt`,countryFlagCode:`eg`}]},play:async({canvasElement:e,step:t})=>{let n=E(E(e).getByRole(`option`,{name:`Ukraine`})).getByTestId(`chip-country-flag`);await t("Chip should render a flag when `flagCountryCode` prop is passed",async()=>{T(n).toBeVisible()})}},z={args:{"aria-label":`Fancy chips`,items:[{value:`counter+icon`,label:`Icon + Counter`,icon:(0,w.jsx)(S,{}),counter:1247},{value:`counter+flag`,label:`Flag + Counter`,countryFlagCode:`ua`,counter:1247},{value:`icon+flag`,label:`Icon + Flag`,icon:(0,w.jsx)(S,{}),countryFlagCode:`ua`}]},play:async({canvasElement:e})=>{let t=E(E(e).getByRole(`option`,{name:`Icon + Flag`}));T(t.getByTestId(`chip-icon`)).toBeVisible(),T(t.queryByTestId(`chip-country-flag`)).not.toBeInTheDocument()}},B=[`2025-08-15T10:00Z`,`2025-08-16T12:00Z`,`2025-08-17T14:00Z`],V={args:{orientation:`vertical`,"aria-label":`Choose a time slot`,defaultValue:B[0],items:B.map(e=>({value:`${e}`,label:(0,w.jsx)(te,{weekday:`short`,day:`numeric`,month:`short`,hour:`2-digit`,minute:`2-digit`,value:e}),dataset:{testid:e}}))},decorators:[e=>(0,w.jsx)(`div`,{style:{width:300,margin:`0 auto`},children:(0,w.jsx)(e,{})})],play:async({canvasElement:e,step:t})=>{let n=E(e),r=n.getByRole(`listbox`,{name:`Choose a time slot`}),i=n.getByTestId(B[0]),a=n.getByTestId(B[1]),o=n.getByTestId(B[2]);await t('Vertical chips should have `aria-orientation="vertical"`',async()=>{T(r).toHaveAttribute(`aria-orientation`,`vertical`)}),await t(`Focus first chip`,async()=>{i.focus()}),await t(`Arrow down should focus second chip`,async()=>{await O.keyboard(`{ArrowDown}`),T(a).toHaveFocus()}),await t(`Arrow down should focus third chip`,async()=>{await O.keyboard(`{ArrowDown}`),T(o).toHaveFocus()}),await t(`Arrow down should focus first chip`,async()=>{await O.keyboard(`{ArrowDown}`),T(i).toHaveFocus()}),await t(`Arrow up should focus third chip`,async()=>{await O.keyboard(`{ArrowUp}`),T(o).toHaveFocus()})}},H={render:e=>(0,w.jsxs)(f,{gap:`12`,children:[(0,w.jsx)(d,{...e}),(0,w.jsx)(l,{variant:`tertiary`,size:`small`,onClick:()=>alert(`Show all`),children:`Show all`})]})},U=[{value:`just-starting`,label:`I’m just starting`},{value:`basics`,label:`I know the basics`},{value:`dont-know`,label:`I don’t know`}],W=[{value:`monday`,label:`Monday`},{value:`tuesday`,label:`Tuesday`},{value:`wednesday`,label:`Wednesday`},{value:`thursday`,label:`Thursday`},{value:`friday`,label:`Friday`},{value:`saturday`,label:`Saturday`},{value:`sunday`,label:`Sunday`},{value:`dont-know`,label:`I don’t know`}],G=[{value:`morning`,label:`Morning (6-12)`,icon:(0,w.jsx)(S,{})},{value:`afternoon`,label:`Afternoon (12-18)`,icon:(0,w.jsx)(g,{})},{value:`evening`,label:`Evening (18-0)`,icon:(0,w.jsx)(x,{})},{value:`night`,label:`Night (0-6)`,icon:(0,w.jsx)(ae,{})},{value:`dont-know`,label:`I don’t know`}],K={render:function(e){return(0,w.jsxs)(f,{direction:`column`,alignItems:`stretch`,gap:`64`,children:[(0,w.jsxs)(f,{direction:`column`,alignItems:`stretch`,gap:`16`,children:[(0,w.jsx)(a,{variant:`large-semibold`,children:`What’s your current English level?`}),(0,w.jsx)(d,{"aria-label":`Selected English level`,items:U})]}),(0,w.jsxs)(f,{direction:`column`,alignItems:`stretch`,gap:`16`,children:[(0,w.jsx)(a,{variant:`large-semibold`,children:`When can you take lessons?`}),(0,w.jsx)(d,{"aria-label":`Selected day of the week`,items:W})]}),(0,w.jsxs)(f,{direction:`column`,alignItems:`stretch`,gap:`16`,children:[(0,w.jsx)(a,{variant:`large-semibold`,children:`What time of day works for you?`}),(0,w.jsx)(d,{"aria-label":`Selected time of day`,items:G})]})]})},play:async({canvasElement:e,step:t})=>{let n=E(e),r=E(n.getByRole(`listbox`,{name:`Selected English level`})),i=E(n.getByRole(`listbox`,{name:`Selected day of the week`})),a=r.getByRole(`option`,{name:`I’m just starting`}),o=r.getByRole(`option`,{name:`I know the basics`}),s=r.getByRole(`option`,{name:`I don’t know`}),c=i.getByRole(`option`,{name:`Monday`});await t(`Tab once to enter first chips group`,async()=>{await O.tab(),T(a).toHaveFocus()}),await t(`Next tab should focus second chips group`,async()=>{await O.tab(),T(c).toHaveFocus()}),await t(`Shift+Tab should focus first chips group again`,async()=>{await O.tab({shift:!0}),T(a).toHaveFocus()}),await t(`Right arrow should focus next chip in the group`,async()=>{await O.keyboard(`{ArrowRight}`),T(o).toHaveFocus()}),await t(`Left arrow should focus previous chip in the group`,async()=>{await O.keyboard(`{ArrowLeft}`),T(a).toHaveFocus()}),await t(`Left arrow should focus last chip if first chip is focused`,async()=>{await O.keyboard(`{ArrowLeft}`),T(s).toHaveFocus()}),await t(`Right arrow should focus first chip if last chip is focused`,async()=>{await O.keyboard(`{ArrowRight}`),T(a).toHaveFocus()}),await t(`Focus last chip`,async()=>{await O.keyboard(`{ArrowLeft}`)}),await t(`Tab to the next group`,async()=>{await O.tab()}),await t(`Shift+Tab to return to the first group, the last focused chip should be focused`,async()=>{await O.tab({shift:!0}),T(s).toHaveFocus()})}},q=[{id:1,title:`Building Your First Vocabulary List`,skills:[`vocabulary`]},{id:2,title:`Effective Speaking Practice Techniques`,skills:[`speaking`]},{id:3,title:`Active Listening Strategies`,skills:[`listening`]},{id:4,title:`Speed Reading Methods`,skills:[`reading`]},{id:5,title:`Grammar Rules Made Simple`,skills:[`grammar`]},{id:6,title:`Combining Speaking and Vocabulary`,skills:[`speaking`,`vocabulary`]},{id:7,title:`Reading Comprehension and Vocabulary Building`,skills:[`reading`,`vocabulary`]},{id:8,title:`Listening and Speaking Integration`,skills:[`listening`,`speaking`]}],J=le.ul`
1
+ import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Text-Bj49UVGS.js";import{n as o,t as s}from"./Heading-Xmy4HTvU.js";import{n as c,t as ee}from"./Button-DagS5hxP.js";import{r as l,t as te}from"./lib-8ue2PVWI.js";import{r as ne,t as re}from"./styled-components.browser.esm-BF2I7YPU.js";import{n as u,r as ie,t as d}from"./SingleSelectChips-CFj7aR84.js";import{n as f,t as p}from"./LayoutFlex-CpktYRVX.js";import{n as ae,t as oe}from"./Link-DLL8OonN.js";import{n as m,t as h}from"./Tooltip-DCzQmBi_.js";import{a as g,c as _,i as v,n as y,o as b,r as x,s as S,t as se}from"./TokyoUIAvailability7LateNight-Bho17X1G.js";import{n as ce,t as le}from"./TokyoUIEmojiFrowning-rSnD4TX2.js";var C,w,T,E,D,O,k,A,j,M,N,P,F,I,L,R,z,B,V,H,U,W,G,K,q,J,Y,X,Z,Q,$;t((()=>{C=e(n(),1),ie(),_(),b(),v(),y(),ce(),l(),f(),i(),ne(),ae(),o(),m(),c(),w=r(),{expect:T,within:E,fn:D,userEvent:O,resetAllMocks:k,waitFor:A}=__STORYBOOK_MODULE_TEST__,j={title:`components/Chips/SingleSelectChips`,component:d,subcomponents:{SingleSelectChipsItem:u},parameters:{layout:`padded`},args:{"aria-label":`Choose a skill`,defaultValue:`vocabulary`,onValueChange:D(),items:[{value:`vocabulary`,label:`Vocabulary`},{value:`speaking`,label:`Speaking`},{value:`listening`,label:`Listening`},{value:`reading`,label:`Reading`}]},beforeEach:()=>{k()}},M={play:async({canvasElement:e,step:t,args:n})=>{let r=E(e),i=r.getByRole(`option`,{name:`Vocabulary`}),a=r.getByRole(`option`,{name:`Speaking`}),o=r.getByRole(`option`,{name:`Listening`}),s=r.getByRole(`option`,{name:`Reading`});await t(`Render chips with default value`,async()=>{T(i).toHaveAttribute(`aria-selected`,`true`),T(a).toHaveAttribute(`aria-selected`,`false`),T(o).toHaveAttribute(`aria-selected`,`false`),T(s).toHaveAttribute(`aria-selected`,`false`)}),await t(`Click on the chip to select it`,async()=>{await O.click(a),T(n.onValueChange).toHaveBeenCalledWith(`speaking`),T(i).toHaveAttribute(`aria-selected`,`false`),T(a).toHaveAttribute(`aria-selected`,`true`),T(o).toHaveAttribute(`aria-selected`,`false`),T(s).toHaveAttribute(`aria-selected`,`false`)}),await t(`Click on the chip to deselect it`,async()=>{await O.click(a),T(n.onValueChange).toHaveBeenCalledWith(null),T(i).toHaveAttribute(`aria-selected`,`false`),T(a).toHaveAttribute(`aria-selected`,`false`),T(o).toHaveAttribute(`aria-selected`,`false`),T(s).toHaveAttribute(`aria-selected`,`false`)})}},P={render:function({defaultValue:e,...t}){let[n,r]=(0,C.useState)(e);N=r;let i=e=>{r(e),t.onValueChange?.(e)};return(0,w.jsx)(d,{...t,value:n,onValueChange:i})},play:async({canvasElement:e,step:t,args:n})=>{let r=E(e),i=r.getByRole(`option`,{name:`Vocabulary`}),a=r.getByRole(`option`,{name:`Speaking`}),o=r.getByRole(`option`,{name:`Listening`}),s=r.getByRole(`option`,{name:`Reading`});await t(`Render chips with default value`,async()=>{T(i).toHaveAttribute(`aria-selected`,`true`),T(a).toHaveAttribute(`aria-selected`,`false`),T(o).toHaveAttribute(`aria-selected`,`false`),T(s).toHaveAttribute(`aria-selected`,`false`)}),await t(`Click on the chip to select it`,async()=>{await O.click(a),T(n.onValueChange).toHaveBeenCalledWith(`speaking`),T(i).toHaveAttribute(`aria-selected`,`false`),T(a).toHaveAttribute(`aria-selected`,`true`),T(o).toHaveAttribute(`aria-selected`,`false`),T(s).toHaveAttribute(`aria-selected`,`false`)}),await t(`Click on the chip to deselect it`,async()=>{await O.click(a),T(n.onValueChange).toHaveBeenCalledWith(null),T(i).toHaveAttribute(`aria-selected`,`false`),T(a).toHaveAttribute(`aria-selected`,`false`),T(o).toHaveAttribute(`aria-selected`,`false`),T(s).toHaveAttribute(`aria-selected`,`false`)}),await t(`Change the value externally`,async()=>{k(),N(`vocabulary`),await A(()=>{T(n.onValueChange).not.toHaveBeenCalled(),T(i).toHaveAttribute(`aria-selected`,`true`),T(a).toHaveAttribute(`aria-selected`,`false`),T(o).toHaveAttribute(`aria-selected`,`false`),T(s).toHaveAttribute(`aria-selected`,`false`)})})}},F={args:{items:[{value:`vocabulary`,label:`Vocabulary`},{value:`speaking`,label:`Speaking`,disabled:!0},{value:`listening`,label:`Listening`},{value:`reading`,label:`Reading`}]},play:async({canvasElement:e,step:t,args:n})=>{let r=E(e),i=r.getByRole(`option`,{name:`Speaking`}),a=r.getByRole(`option`,{name:`Vocabulary`});await t(`Disabled chip must have disabled attribute`,async()=>{T(i).toBeDisabled()}),await t(`Disabled chip must not be selectable`,async()=>{await O.click(i),T(n.onValueChange).not.toHaveBeenCalled(),T(a).toHaveAttribute(`aria-selected`,`true`),T(i).toHaveAttribute(`aria-selected`,`false`)})}},I={args:{"aria-label":`Choose an availability`,defaultValue:`morning`,items:[{value:`morning`,label:`Morning`,icon:(0,w.jsx)(S,{})},{value:`afternoon`,label:`Afternoon`,icon:(0,w.jsx)(g,{})},{value:`evening`,label:`Evening`,icon:(0,w.jsx)(x,{})}]},play:async({canvasElement:e,step:t})=>{let n=E(E(e).getByRole(`option`,{name:`Morning`})).getByTestId(`chip-icon`);await t("Chip should render an icon when `icon` prop is passed",async()=>{T(n).toBeVisible()})}},L={args:{"aria-label":`Choose a language to learn`,defaultValue:`english`,items:[{value:`english`,label:`English`,counter:1247},{value:`spanish`,label:`Spanish`,counter:892},{value:`french`,label:`French`,counter:534},{value:`german`,label:`German`,counter:421},{value:`italian`,label:`Italian`,counter:287},{value:`portuguese`,label:`Portuguese`,counter:156}]},play:async({canvasElement:e,step:t})=>{let n=E(E(e).getByRole(`option`,{name:/^English/})).getByTestId(`chip-counter`);await t("Chip should render a counter when `counter` prop is passed",async()=>{T(n).toBeVisible(),T(n).toHaveTextContent(`1247`)})}},R={args:{"aria-label":`Choose a country`,defaultValue:`ua`,items:[{value:`ua`,label:`Ukraine`,countryFlagCode:`ua`},{value:`gb`,label:`United Kingdom`,countryFlagCode:`gb`},{value:`it`,label:`Italy`,countryFlagCode:`it`},{value:`es`,label:`Spain`,countryFlagCode:`es`},{value:`au`,label:`Australia`,countryFlagCode:`au`},{value:`br`,label:`Brazil`,countryFlagCode:`br`},{value:`eg`,label:`Egypt`,countryFlagCode:`eg`}]},play:async({canvasElement:e,step:t})=>{let n=E(E(e).getByRole(`option`,{name:`Ukraine`})).getByTestId(`chip-country-flag`);await t("Chip should render a flag when `flagCountryCode` prop is passed",async()=>{T(n).toBeVisible()})}},z={args:{"aria-label":`Fancy chips`,items:[{value:`counter+icon`,label:`Icon + Counter`,icon:(0,w.jsx)(S,{}),counter:1247},{value:`counter+flag`,label:`Flag + Counter`,countryFlagCode:`ua`,counter:1247},{value:`icon+flag`,label:`Icon + Flag`,icon:(0,w.jsx)(S,{}),countryFlagCode:`ua`}]},play:async({canvasElement:e})=>{let t=E(E(e).getByRole(`option`,{name:`Icon + Flag`}));T(t.getByTestId(`chip-icon`)).toBeVisible(),T(t.queryByTestId(`chip-country-flag`)).not.toBeInTheDocument()}},B=[`2025-08-15T10:00Z`,`2025-08-16T12:00Z`,`2025-08-17T14:00Z`],V={args:{orientation:`vertical`,"aria-label":`Choose a time slot`,defaultValue:B[0],items:B.map(e=>({value:`${e}`,label:(0,w.jsx)(te,{weekday:`short`,day:`numeric`,month:`short`,hour:`2-digit`,minute:`2-digit`,value:e}),dataset:{testid:e}}))},decorators:[e=>(0,w.jsx)(`div`,{style:{width:300,margin:`0 auto`},children:(0,w.jsx)(e,{})})],play:async({canvasElement:e,step:t})=>{let n=E(e),r=n.getByRole(`listbox`,{name:`Choose a time slot`}),i=n.getByTestId(B[0]),a=n.getByTestId(B[1]),o=n.getByTestId(B[2]);await t('Vertical chips should have `aria-orientation="vertical"`',async()=>{T(r).toHaveAttribute(`aria-orientation`,`vertical`)}),await t(`Focus first chip`,async()=>{i.focus()}),await t(`Arrow down should focus second chip`,async()=>{await O.keyboard(`{ArrowDown}`),T(a).toHaveFocus()}),await t(`Arrow down should focus third chip`,async()=>{await O.keyboard(`{ArrowDown}`),T(o).toHaveFocus()}),await t(`Arrow down should focus first chip`,async()=>{await O.keyboard(`{ArrowDown}`),T(i).toHaveFocus()}),await t(`Arrow up should focus third chip`,async()=>{await O.keyboard(`{ArrowUp}`),T(o).toHaveFocus()})}},H={render:e=>(0,w.jsxs)(p,{gap:`12`,children:[(0,w.jsx)(d,{...e}),(0,w.jsx)(ee,{variant:`tertiary`,size:`small`,onClick:()=>alert(`Show all`),children:`Show all`})]})},U=[{value:`just-starting`,label:`I’m just starting`},{value:`basics`,label:`I know the basics`},{value:`dont-know`,label:`I don’t know`}],W=[{value:`monday`,label:`Monday`},{value:`tuesday`,label:`Tuesday`},{value:`wednesday`,label:`Wednesday`},{value:`thursday`,label:`Thursday`},{value:`friday`,label:`Friday`},{value:`saturday`,label:`Saturday`},{value:`sunday`,label:`Sunday`},{value:`dont-know`,label:`I don’t know`}],G=[{value:`morning`,label:`Morning (6-12)`,icon:(0,w.jsx)(S,{})},{value:`afternoon`,label:`Afternoon (12-18)`,icon:(0,w.jsx)(g,{})},{value:`evening`,label:`Evening (18-0)`,icon:(0,w.jsx)(x,{})},{value:`night`,label:`Night (0-6)`,icon:(0,w.jsx)(se,{})},{value:`dont-know`,label:`I don’t know`}],K={render:function(e){return(0,w.jsxs)(p,{direction:`column`,alignItems:`stretch`,gap:`64`,children:[(0,w.jsxs)(p,{direction:`column`,alignItems:`stretch`,gap:`16`,children:[(0,w.jsx)(a,{variant:`large-semibold`,children:`What’s your current English level?`}),(0,w.jsx)(d,{"aria-label":`Selected English level`,items:U})]}),(0,w.jsxs)(p,{direction:`column`,alignItems:`stretch`,gap:`16`,children:[(0,w.jsx)(a,{variant:`large-semibold`,children:`When can you take lessons?`}),(0,w.jsx)(d,{"aria-label":`Selected day of the week`,items:W})]}),(0,w.jsxs)(p,{direction:`column`,alignItems:`stretch`,gap:`16`,children:[(0,w.jsx)(a,{variant:`large-semibold`,children:`What time of day works for you?`}),(0,w.jsx)(d,{"aria-label":`Selected time of day`,items:G})]})]})},play:async({canvasElement:e,step:t})=>{let n=E(e),r=E(n.getByRole(`listbox`,{name:`Selected English level`})),i=E(n.getByRole(`listbox`,{name:`Selected day of the week`})),a=r.getByRole(`option`,{name:`I’m just starting`}),o=r.getByRole(`option`,{name:`I know the basics`}),s=r.getByRole(`option`,{name:`I don’t know`}),c=i.getByRole(`option`,{name:`Monday`});await t(`Tab once to enter first chips group`,async()=>{await O.tab(),T(a).toHaveFocus()}),await t(`Next tab should focus second chips group`,async()=>{await O.tab(),T(c).toHaveFocus()}),await t(`Shift+Tab should focus first chips group again`,async()=>{await O.tab({shift:!0}),T(a).toHaveFocus()}),await t(`Right arrow should focus next chip in the group`,async()=>{await O.keyboard(`{ArrowRight}`),T(o).toHaveFocus()}),await t(`Left arrow should focus previous chip in the group`,async()=>{await O.keyboard(`{ArrowLeft}`),T(a).toHaveFocus()}),await t(`Left arrow should focus last chip if first chip is focused`,async()=>{await O.keyboard(`{ArrowLeft}`),T(s).toHaveFocus()}),await t(`Right arrow should focus first chip if last chip is focused`,async()=>{await O.keyboard(`{ArrowRight}`),T(a).toHaveFocus()}),await t(`Focus last chip`,async()=>{await O.keyboard(`{ArrowLeft}`)}),await t(`Tab to the next group`,async()=>{await O.tab()}),await t(`Shift+Tab to return to the first group, the last focused chip should be focused`,async()=>{await O.tab({shift:!0}),T(s).toHaveFocus()})}},q=[{id:1,title:`Building Your First Vocabulary List`,skills:[`vocabulary`]},{id:2,title:`Effective Speaking Practice Techniques`,skills:[`speaking`]},{id:3,title:`Active Listening Strategies`,skills:[`listening`]},{id:4,title:`Speed Reading Methods`,skills:[`reading`]},{id:5,title:`Grammar Rules Made Simple`,skills:[`grammar`]},{id:6,title:`Combining Speaking and Vocabulary`,skills:[`speaking`,`vocabulary`]},{id:7,title:`Reading Comprehension and Vocabulary Building`,skills:[`reading`,`vocabulary`]},{id:8,title:`Listening and Speaking Integration`,skills:[`listening`,`speaking`]}],J=re.ul`
2
2
  all: unset;
3
3
  list-style: none;
4
4
  display: flex;
@@ -8,7 +8,7 @@ import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2
8
8
  > li {
9
9
  display: contents;
10
10
  }
11
- `,Y={render:function(e){let[t,n]=(0,C.useState)(null),r=t?q.filter(e=>e.skills.includes(t)):q;return(0,w.jsxs)(f,{direction:`column`,gap:`24`,children:[(0,w.jsxs)(f,{direction:`column`,gap:`8`,children:[(0,w.jsx)(s,{tag:`h2`,variant:`large`,children:`Articles`}),(0,w.jsx)(d,{"aria-label":`Filter by skill`,"aria-controls":`results`,value:t,onValueChange:n,items:[{value:`vocabulary`,label:`Vocabulary`},{value:`speaking`,label:`Speaking`},{value:`listening`,label:`Listening`},{value:`reading`,label:`Reading`},{value:`grammar`,label:`Grammar`}]})]}),(0,w.jsx)(`section`,{id:`results`,"aria-label":`Filtered articles`,children:(0,w.jsx)(J,{children:r.map(e=>(0,w.jsx)(`li`,{children:(0,w.jsx)(ie,{href:`#`,children:e.title})},e.id))})})]})},play:async({canvasElement:e,step:t})=>{let n=E(e).getByRole(`listbox`,{name:`Filter by skill`});await t(`Chips element should have aria attributes forwarded`,async()=>{T(n).toHaveAttribute(`aria-label`,`Filter by skill`),T(n).toHaveAttribute(`aria-controls`,`results`)})}},X={args:{"aria-label":`Select a skill`,children:(0,w.jsxs)(w.Fragment,{children:[(0,w.jsx)(h,{content:`I want to learn vocabulary`,dataset:{testid:`vocabulary-tooltip`},children:(0,w.jsx)(u,{value:`vocabulary`,children:`Vocabulary`})}),(0,w.jsx)(h,{content:`I want to improve my speaking skills`,dataset:{testid:`speaking-tooltip`},children:(0,w.jsx)(u,{value:`speaking`,children:`Speaking`})}),(0,w.jsx)(h,{content:`I want to improve my listening skills`,dataset:{testid:`listening-tooltip`},children:(0,w.jsx)(u,{value:`listening`,children:`Listening`})}),(0,w.jsx)(h,{content:`I want to improve my reading skills`,dataset:{testid:`reading-tooltip`},children:(0,w.jsx)(u,{value:`reading`,children:`Reading`})})]}),items:void 0},play:async({canvasElement:e,step:t})=>{let n=E(e);await t(`Tab to the first chip`,async()=>{await O.tab(),await A(()=>{T(n.getByTestId(`vocabulary-tooltip`)).toBeVisible()})}),await t(`Arrow right to focus next chip`,async()=>{await O.keyboard(`{ArrowRight}`),await A(()=>{T(n.getByTestId(`speaking-tooltip`)).toBeVisible()})}),await t(`Hover third chip`,async()=>{await O.hover(n.getByRole(`option`,{name:`Listening`})),await A(()=>{T(n.getByTestId(`listening-tooltip`)).toBeVisible()})})}},Z={tags:[`!autodocs`],render:function(){return(0,w.jsxs)(f,{gap:`12`,children:[(0,w.jsxs)(d,{"aria-label":`Chips states`,value:`selected`,children:[(0,w.jsx)(u,{value:`rest`,children:`Rest`}),(0,w.jsx)(u,{value:`focus`,dsInternalSimulation:`focus`,children:`Focus`}),(0,w.jsx)(u,{value:`hover`,dsInternalSimulation:`hover`,children:`Hover`}),(0,w.jsx)(u,{value:`active`,dsInternalSimulation:`active`,children:`Active`}),(0,w.jsx)(u,{value:`disabled`,disabled:!0,children:`Disabled`}),(0,w.jsx)(u,{value:`selected`,children:`Selected`})]}),(0,w.jsx)(d,{"aria-label":`Chips states`,value:`selected`,children:(0,w.jsx)(u,{value:`selected`,dsInternalSimulation:`focus`,children:`Selected focus`})}),(0,w.jsx)(d,{"aria-label":`Chips states`,value:`selected`,children:(0,w.jsx)(u,{value:`selected`,dsInternalSimulation:`hover`,children:`Selected hover`})}),(0,w.jsx)(d,{"aria-label":`Chips states`,value:`selected`,children:(0,w.jsx)(u,{value:`selected`,dsInternalSimulation:`active`,children:`Selected active`})})]})}},Q={decorators:[e=>(0,w.jsx)(`div`,{style:{maxWidth:150,margin:`0 auto`},children:(0,w.jsx)(e,{})})],args:{"aria-label":`Long label`,items:[{value:`long`,icon:se,label:`I'm way too long to be a chip label, I don't know what to do with myself`}]}},M.parameters={...M.parameters,docs:{...M.parameters?.docs,source:{originalSource:`{
11
+ `,Y={render:function(e){let[t,n]=(0,C.useState)(null),r=t?q.filter(e=>e.skills.includes(t)):q;return(0,w.jsxs)(p,{direction:`column`,gap:`24`,children:[(0,w.jsxs)(p,{direction:`column`,gap:`8`,children:[(0,w.jsx)(s,{tag:`h2`,variant:`large`,children:`Articles`}),(0,w.jsx)(d,{"aria-label":`Filter by skill`,"aria-controls":`results`,value:t,onValueChange:n,items:[{value:`vocabulary`,label:`Vocabulary`},{value:`speaking`,label:`Speaking`},{value:`listening`,label:`Listening`},{value:`reading`,label:`Reading`},{value:`grammar`,label:`Grammar`}]})]}),(0,w.jsx)(`section`,{id:`results`,"aria-label":`Filtered articles`,children:(0,w.jsx)(J,{children:r.map(e=>(0,w.jsx)(`li`,{children:(0,w.jsx)(oe,{href:`#`,children:e.title})},e.id))})})]})},play:async({canvasElement:e,step:t})=>{let n=E(e).getByRole(`listbox`,{name:`Filter by skill`});await t(`Chips element should have aria attributes forwarded`,async()=>{T(n).toHaveAttribute(`aria-label`,`Filter by skill`),T(n).toHaveAttribute(`aria-controls`,`results`)})}},X={args:{"aria-label":`Select a skill`,children:(0,w.jsxs)(w.Fragment,{children:[(0,w.jsx)(h,{content:`I want to learn vocabulary`,dataset:{testid:`vocabulary-tooltip`},children:(0,w.jsx)(u,{value:`vocabulary`,children:`Vocabulary`})}),(0,w.jsx)(h,{content:`I want to improve my speaking skills`,dataset:{testid:`speaking-tooltip`},children:(0,w.jsx)(u,{value:`speaking`,children:`Speaking`})}),(0,w.jsx)(h,{content:`I want to improve my listening skills`,dataset:{testid:`listening-tooltip`},children:(0,w.jsx)(u,{value:`listening`,children:`Listening`})}),(0,w.jsx)(h,{content:`I want to improve my reading skills`,dataset:{testid:`reading-tooltip`},children:(0,w.jsx)(u,{value:`reading`,children:`Reading`})})]}),items:void 0},play:async({canvasElement:e,step:t})=>{let n=E(e);await t(`Tab to the first chip`,async()=>{await O.tab(),await A(()=>{T(n.getByTestId(`vocabulary-tooltip`)).toBeVisible()})}),await t(`Arrow right to focus next chip`,async()=>{await O.keyboard(`{ArrowRight}`),await A(()=>{T(n.getByTestId(`speaking-tooltip`)).toBeVisible()})}),await t(`Hover third chip`,async()=>{await O.hover(n.getByRole(`option`,{name:`Listening`})),await A(()=>{T(n.getByTestId(`listening-tooltip`)).toBeVisible()})})}},Z={tags:[`!autodocs`],parameters:{pseudo:{focusVisible:`[data-focus="true"]`,hover:`[data-hover="true"]`,active:`[data-active="true"]`}},render:function(){return(0,w.jsxs)(p,{gap:`12`,children:[(0,w.jsxs)(d,{"aria-label":`Chips states`,value:`selected`,children:[(0,w.jsx)(u,{value:`rest`,children:`Rest`}),(0,w.jsx)(u,{value:`focus`,dataset:{focus:!0},children:`Focus`}),(0,w.jsx)(u,{value:`hover`,dataset:{hover:!0},children:`Hover`}),(0,w.jsx)(u,{value:`active`,dataset:{active:!0},children:`Active`}),(0,w.jsx)(u,{value:`disabled`,disabled:!0,children:`Disabled`}),(0,w.jsx)(u,{value:`selected`,children:`Selected`})]}),(0,w.jsx)(d,{"aria-label":`Chips states`,value:`selected`,children:(0,w.jsx)(u,{value:`selected`,dataset:{focus:!0},children:`Selected focus`})}),(0,w.jsx)(d,{"aria-label":`Chips states`,value:`selected`,children:(0,w.jsx)(u,{value:`selected`,dataset:{hover:!0},children:`Selected hover`})}),(0,w.jsx)(d,{"aria-label":`Chips states`,value:`selected`,children:(0,w.jsx)(u,{value:`selected`,dataset:{active:!0},children:`Selected active`})})]})}},Q={decorators:[e=>(0,w.jsx)(`div`,{style:{maxWidth:150,margin:`0 auto`},children:(0,w.jsx)(e,{})})],args:{"aria-label":`Long label`,items:[{value:`long`,icon:le,label:`I'm way too long to be a chip label, I don't know what to do with myself`}]}},M.parameters={...M.parameters,docs:{...M.parameters?.docs,source:{originalSource:`{
12
12
  play: async ({
13
13
  canvasElement,
14
14
  step,
@@ -574,17 +574,30 @@ This creates a smooth, efficient navigation experience - especially useful for c
574
574
  }
575
575
  }`,...X.parameters?.docs?.source},description:{story:"If you need to wrap individual chips in a component like [\\<Tooltip/>](/docs/components-tooltip--docs),\nyou can use render `<SingleSelectChipsItem/>` as children.",...X.parameters?.docs?.description}}},Z.parameters={...Z.parameters,docs:{...Z.parameters?.docs,source:{originalSource:`{
576
576
  tags: ['!autodocs'],
577
+ parameters: {
578
+ pseudo: {
579
+ focusVisible: '[data-focus="true"]',
580
+ hover: '[data-hover="true"]',
581
+ active: '[data-active="true"]'
582
+ }
583
+ },
577
584
  render: function StoryRender() {
578
585
  return <LayoutFlex gap="12">
579
586
  <SingleSelectChips aria-label="Chips states" value="selected">
580
587
  <SingleSelectChipsItem value="rest">Rest</SingleSelectChipsItem>
581
- <SingleSelectChipsItem value="focus" dsInternalSimulation="focus">
588
+ <SingleSelectChipsItem value="focus" dataset={{
589
+ focus: true
590
+ }}>
582
591
  Focus
583
592
  </SingleSelectChipsItem>
584
- <SingleSelectChipsItem value="hover" dsInternalSimulation="hover">
593
+ <SingleSelectChipsItem value="hover" dataset={{
594
+ hover: true
595
+ }}>
585
596
  Hover
586
597
  </SingleSelectChipsItem>
587
- <SingleSelectChipsItem value="active" dsInternalSimulation="active">
598
+ <SingleSelectChipsItem value="active" dataset={{
599
+ active: true
600
+ }}>
588
601
  Active
589
602
  </SingleSelectChipsItem>
590
603
  <SingleSelectChipsItem value="disabled" disabled>
@@ -593,17 +606,23 @@ This creates a smooth, efficient navigation experience - especially useful for c
593
606
  <SingleSelectChipsItem value="selected">Selected</SingleSelectChipsItem>
594
607
  </SingleSelectChips>
595
608
  <SingleSelectChips aria-label="Chips states" value="selected">
596
- <SingleSelectChipsItem value="selected" dsInternalSimulation="focus">
609
+ <SingleSelectChipsItem value="selected" dataset={{
610
+ focus: true
611
+ }}>
597
612
  Selected focus
598
613
  </SingleSelectChipsItem>
599
614
  </SingleSelectChips>
600
615
  <SingleSelectChips aria-label="Chips states" value="selected">
601
- <SingleSelectChipsItem value="selected" dsInternalSimulation="hover">
616
+ <SingleSelectChipsItem value="selected" dataset={{
617
+ hover: true
618
+ }}>
602
619
  Selected hover
603
620
  </SingleSelectChipsItem>
604
621
  </SingleSelectChips>
605
622
  <SingleSelectChips aria-label="Chips states" value="selected">
606
- <SingleSelectChipsItem value="selected" dsInternalSimulation="active">
623
+ <SingleSelectChipsItem value="selected" dataset={{
624
+ active: true
625
+ }}>
607
626
  Selected active
608
627
  </SingleSelectChipsItem>
609
628
  </SingleSelectChips>
@@ -1,2 +1,2 @@
1
- import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{ht as r,t as i}from"./dist-DtfJeYQK.js";import{t as a}from"./jsx-runtime-C2wGStra.js";import{C as o,E as s,T as c,_ as l,w as u}from"./iframe-Ddp8AsMq.js";import{n as d,t as f}from"./dist-Cc1j9Pjk.js";var p,m,h,g,_,v=t((()=>{p=`root__Eki38`,m=`track__zosW2`,h=`range__Awc-3`,g=`thumb__IV11l`,_={root:p,track:m,range:h,thumb:g}}));function y(e){let t={};return Object.entries(e).forEach(([e,n])=>{switch(e){case`id`:case`aria-label`:case`aria-labelledby`:case`aria-describedby`:case`aria-invalid`:case`aria-errormessage`:t[e]=n}}),t}var b,x,S,C=t((()=>{b=e(n(),1),l(),v(),i(),f(),x=a(),S=(0,b.forwardRef)(function({value:e,defaultValue:t=0,onValueChange:n,onValueCommit:i,min:a=0,max:l=100,step:f=1,dataset:p,...m},h){let g=r(p,{preplyDsComponent:d.Slider}),v=n?e=>n(e[0]):void 0,b=i?e=>i(e[0]):void 0;return(0,x.jsxs)(u,{ref:h,...g,className:_.root,value:e===void 0?void 0:[e],defaultValue:t===void 0?void 0:[t],onValueChange:v,onValueCommit:b,min:a,max:l,step:f,children:[(0,x.jsx)(s,{className:_.track,children:(0,x.jsx)(o,{className:_.range})}),(0,x.jsx)(c,{...y(m),className:_.thumb})]})});try{y.displayName=`filterThumbProps`,y.__docgenInfo={description:``,displayName:`filterThumbProps`,props:{}}}catch{}try{S.displayName=`Slider`,S.__docgenInfo={description:`A slider input that allows users to select a single value from a range.`,displayName:`Slider`,props:{id:{defaultValue:null,description:`The unique identifier for the range slider element.`,name:`id`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},"aria-label":{defaultValue:null,description:`Accessible label for the range slider.`,name:`aria-label`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},"aria-labelledby":{defaultValue:null,description:`ID of the element that labels the range slider.`,name:`aria-labelledby`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},"aria-describedby":{defaultValue:null,description:`ID of the element that describes the range slider.`,name:`aria-describedby`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},"aria-invalid":{defaultValue:null,description:`Indicates whether the range slider value is invalid.`,name:`aria-invalid`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},"aria-errormessage":{defaultValue:null,description:`ID of the element that describes the error, if any.`,name:`aria-errormessage`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},value:{defaultValue:null,description:"The controlled value of the slider.\nMust be used in conjunction with `onValueChange`.",name:`value`,required:!1,type:{name:`enum`,value:[{value:`number`}]}},defaultValue:{defaultValue:{value:`0`},description:`The value of the slider when initially rendered.
2
- Use when you do not need to control the state of the slider.`,name:`defaultValue`,required:!1,type:{name:`enum`,value:[{value:`number`}]}},onValueChange:{defaultValue:null,description:`Event handler called when the value changes.`,name:`onValueChange`,required:!1,type:{name:`enum`,value:[{value:`(value: number) => void`}]}},onValueCommit:{defaultValue:null,description:`Event handler called when the value is committed (e.g. on pointer up or Enter key).`,name:`onValueCommit`,required:!1,type:{name:`enum`,value:[{value:`(value: number) => void`}]}},name:{defaultValue:null,description:`The name of the slider. Submitted with its owning form as part of a name/value pair.`,name:`name`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},min:{defaultValue:{value:`0`},description:`The minimum value for the slider.`,name:`min`,required:!1,type:{name:`enum`,value:[{value:`number`}]}},max:{defaultValue:{value:`100`},description:`The maximum value for the slider.`,name:`max`,required:!1,type:{name:`enum`,value:[{value:`number`}]}},step:{defaultValue:{value:`1`},description:`The slider stepping interval.`,name:`step`,required:!1,type:{name:`enum`,value:[{value:`number`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:`ref`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`},{value:`(instance: HTMLSpanElement | null) => void`},{value:`RefObject<HTMLSpanElement>`}]}},key:{defaultValue:null,description:``,name:`key`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`},{value:`number`},{value:`bigint`}]}}}}}catch{}}));export{v as a,_ as i,y as n,C as r,S as t};
1
+ import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{ht as r,t as i}from"./dist-DtfJeYQK.js";import{t as a}from"./jsx-runtime-C2wGStra.js";import{C as o,E as s,T as c,_ as l,w as u}from"./iframe-kBDSpxRI.js";import{n as d,t as f}from"./dist-Cc1j9Pjk.js";var p,m,h,g,_,v=t((()=>{p=`root__Eki38`,m=`track__zosW2`,h=`range__Awc-3`,g=`thumb__IV11l`,_={root:p,track:m,range:h,thumb:g}}));function y(e){let t={};return Object.entries(e).forEach(([e,n])=>{switch(e){case`id`:case`aria-label`:case`aria-labelledby`:case`aria-describedby`:case`aria-invalid`:case`aria-errormessage`:t[e]=n}}),t}var b,x,S,C=t((()=>{b=e(n(),1),l(),v(),i(),f(),x=a(),S=(0,b.forwardRef)(function({value:e,defaultValue:t=0,onValueChange:n,onValueCommit:i,min:a=0,max:l=100,step:f=1,dataset:p,...m},h){let g=r(p,{preplyDsComponent:d.Slider}),v=n?e=>n(e[0]):void 0,b=i?e=>i(e[0]):void 0;return(0,x.jsxs)(u,{ref:h,...g,className:_.root,value:e===void 0?void 0:[e],defaultValue:t===void 0?void 0:[t],onValueChange:v,onValueCommit:b,min:a,max:l,step:f,children:[(0,x.jsx)(s,{className:_.track,children:(0,x.jsx)(o,{className:_.range})}),(0,x.jsx)(c,{...y(m),className:_.thumb})]})});try{y.displayName=`filterThumbProps`,y.__docgenInfo={description:``,displayName:`filterThumbProps`,props:{}}}catch{}try{S.displayName=`Slider`,S.__docgenInfo={description:`A slider input that allows users to select a single value from a range.`,displayName:`Slider`,props:{id:{defaultValue:null,description:`The unique identifier for the range slider element.`,name:`id`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},"aria-label":{defaultValue:null,description:`Accessible label for the range slider.`,name:`aria-label`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},"aria-labelledby":{defaultValue:null,description:`ID of the element that labels the range slider.`,name:`aria-labelledby`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},"aria-describedby":{defaultValue:null,description:`ID of the element that describes the range slider.`,name:`aria-describedby`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},"aria-invalid":{defaultValue:null,description:`Indicates whether the range slider value is invalid.`,name:`aria-invalid`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},"aria-errormessage":{defaultValue:null,description:`ID of the element that describes the error, if any.`,name:`aria-errormessage`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},value:{defaultValue:null,description:"The controlled value of the slider.\nMust be used in conjunction with `onValueChange`.",name:`value`,required:!1,type:{name:`enum`,value:[{value:`number`}]}},defaultValue:{defaultValue:{value:`0`},description:`The value of the slider when initially rendered.
2
+ Use when you do not need to control the state of the slider.`,name:`defaultValue`,required:!1,type:{name:`enum`,value:[{value:`number`}]}},onValueChange:{defaultValue:null,description:`Event handler called when the value changes.`,name:`onValueChange`,required:!1,type:{name:`enum`,value:[{value:`(value: number) => void`}]}},onValueCommit:{defaultValue:null,description:`Event handler called when the value is committed (e.g. on pointer up or Enter key).`,name:`onValueCommit`,required:!1,type:{name:`enum`,value:[{value:`(value: number) => void`}]}},name:{defaultValue:null,description:`The name of the slider. Submitted with its owning form as part of a name/value pair.`,name:`name`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},min:{defaultValue:{value:`0`},description:`The minimum value for the slider.`,name:`min`,required:!1,type:{name:`enum`,value:[{value:`number`}]}},max:{defaultValue:{value:`100`},description:`The maximum value for the slider.`,name:`max`,required:!1,type:{name:`enum`,value:[{value:`number`}]}},step:{defaultValue:{value:`1`},description:`The slider stepping interval.`,name:`step`,required:!1,type:{name:`enum`,value:[{value:`number`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}}}}}catch{}}));export{v as a,_ as i,y as n,C as r,S as t};
@@ -1,4 +1,4 @@
1
- import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{r as i,t as a}from"./Slider-cjoP1Fs6.js";var o,s,c,l,u,d,f,p,m,h,g,_,v,y;t((()=>{o=e(n(),1),i(),s=r(),{action:c}=__STORYBOOK_MODULE_ACTIONS__,{expect:l,fn:u,userEvent:d,within:f}=__STORYBOOK_MODULE_TEST__,p=u(c(`change`)),m=u(c(`commit`)),h={title:`Components/Slider`,component:a,decorators:[e=>(0,s.jsx)(`div`,{style:{padding:`32px`,maxWidth:`400px`},children:(0,s.jsx)(e,{})})],args:{"aria-label":`Sample`,onValueChange:p,onValueCommit:m}},g={play:async({canvasElement:e,step:t})=>{let n=f(e).getByRole(`slider`);await t(`Initial state`,async()=>{l(n).toBeInTheDocument(),l(n).toHaveAttribute(`aria-valuemin`,`0`),l(n).toHaveAttribute(`aria-valuemax`,`100`),l(n).toHaveAttribute(`aria-valuenow`,`0`)}),await t(`Move thumb via keyboard interactions`,async()=>{n.focus(),await d.keyboard(`{ArrowRight}`),l(n).toHaveAttribute(`aria-valuenow`,`1`),l(p).toBeCalledWith(1),l(m).toBeCalledWith(1)})}},_={args:{defaultValue:50},play:async({canvasElement:e,step:t})=>{let n=f(e).getByRole(`slider`);await t(`Initial state`,async()=>{l(n).toBeInTheDocument(),l(n).toHaveAttribute(`aria-valuemin`,`0`),l(n).toHaveAttribute(`aria-valuemax`,`100`),l(n).toHaveAttribute(`aria-valuenow`,`50`)}),await t(`Move thumb via keyboard interactions`,async()=>{n.focus(),await d.keyboard(`{ArrowRight}`),l(n).toHaveAttribute(`aria-valuenow`,`51`),l(p).toBeCalledWith(51),l(m).toBeCalledWith(51)})}},v={render:function(e){let[t,n]=(0,o.useState)(50);return(0,s.jsx)(a,{...e,value:t,onValueChange:t=>{n(t),e.onValueChange?.(t)}})},play:async({canvasElement:e,step:t})=>{let n=f(e).getByRole(`slider`);await t(`Initial controlled state`,async()=>{l(n).toBeInTheDocument(),l(n).toHaveAttribute(`aria-valuenow`,`50`)}),await t(`Move thumb and verify value updates`,async()=>{n.focus(),await d.keyboard(`{ArrowRight}`),l(n).toHaveAttribute(`aria-valuenow`,`51`),l(p).toBeCalledWith(51),l(m).toBeCalledWith(51)})}},g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{
1
+ import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{r as i,t as a}from"./Slider-Bxzp79ts.js";var o,s,c,l,u,d,f,p,m,h,g,_,v,y;t((()=>{o=e(n(),1),i(),s=r(),{action:c}=__STORYBOOK_MODULE_ACTIONS__,{expect:l,fn:u,userEvent:d,within:f}=__STORYBOOK_MODULE_TEST__,p=u(c(`change`)),m=u(c(`commit`)),h={title:`Components/Slider`,component:a,decorators:[e=>(0,s.jsx)(`div`,{style:{padding:`32px`,maxWidth:`400px`},children:(0,s.jsx)(e,{})})],args:{"aria-label":`Sample`,onValueChange:p,onValueCommit:m}},g={play:async({canvasElement:e,step:t})=>{let n=f(e).getByRole(`slider`);await t(`Initial state`,async()=>{l(n).toBeInTheDocument(),l(n).toHaveAttribute(`aria-valuemin`,`0`),l(n).toHaveAttribute(`aria-valuemax`,`100`),l(n).toHaveAttribute(`aria-valuenow`,`0`)}),await t(`Move thumb via keyboard interactions`,async()=>{n.focus(),await d.keyboard(`{ArrowRight}`),l(n).toHaveAttribute(`aria-valuenow`,`1`),l(p).toBeCalledWith(1),l(m).toBeCalledWith(1)})}},_={args:{defaultValue:50},play:async({canvasElement:e,step:t})=>{let n=f(e).getByRole(`slider`);await t(`Initial state`,async()=>{l(n).toBeInTheDocument(),l(n).toHaveAttribute(`aria-valuemin`,`0`),l(n).toHaveAttribute(`aria-valuemax`,`100`),l(n).toHaveAttribute(`aria-valuenow`,`50`)}),await t(`Move thumb via keyboard interactions`,async()=>{n.focus(),await d.keyboard(`{ArrowRight}`),l(n).toHaveAttribute(`aria-valuenow`,`51`),l(p).toBeCalledWith(51),l(m).toBeCalledWith(51)})}},v={render:function(e){let[t,n]=(0,o.useState)(50);return(0,s.jsx)(a,{...e,value:t,onValueChange:t=>{n(t),e.onValueChange?.(t)}})},play:async({canvasElement:e,step:t})=>{let n=f(e).getByRole(`slider`);await t(`Initial controlled state`,async()=>{l(n).toBeInTheDocument(),l(n).toHaveAttribute(`aria-valuenow`,`50`)}),await t(`Move thumb and verify value updates`,async()=>{n.focus(),await d.keyboard(`{ArrowRight}`),l(n).toHaveAttribute(`aria-valuenow`,`51`),l(p).toBeCalledWith(51),l(m).toBeCalledWith(51)})}},g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{
2
2
  play: async ({
3
3
  canvasElement,
4
4
  step
@@ -1 +1 @@
1
- import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{b as r,ct as i,t as a,w as o,x as s,y as c}from"./dist-DtfJeYQK.js";import{t as l}from"./jsx-runtime-C2wGStra.js";var u,d,f,p=t((()=>{u=`Spinner__XvUpd`,d=`spin__iEg7N`,f={Spinner:u,"Spinner--size-default":`Spinner--size-default__mYug6`,"Spinner--size-large":`Spinner--size-large__w-57e`,"Spinner--narrow-l--size-default":`Spinner--narrow-l--size-default__Y1CEQ`,"Spinner--narrow-l--size-large":`Spinner--narrow-l--size-large__10-GA`,"Spinner--medium-s--size-default":`Spinner--medium-s--size-default__sGEJB`,"Spinner--medium-s--size-large":`Spinner--medium-s--size-large__z3YD6`,"Spinner--medium-l--size-default":`Spinner--medium-l--size-default__Gc7Yo`,"Spinner--medium-l--size-large":`Spinner--medium-l--size-large__a1mSJ`,"Spinner--wide-s--size-default":`Spinner--wide-s--size-default__n3cXu`,"Spinner--wide-s--size-large":`Spinner--wide-s--size-large__kdEFZ`,"Spinner--wide-l--size-default":`Spinner--wide-l--size-default__44Cv-`,"Spinner--wide-l--size-large":`Spinner--wide-l--size-large__uxzU7`,"Spinner--static":`Spinner--static__Jjv6L`,"Spinner--animated":`Spinner--animated__gi5FM`,spin:d}})),m,h,g,_,v=t((()=>{m=e(n()),h=e(n()),g=({title:e,titleId:t,...n},r)=>m.createElement(`svg`,{viewBox:`0 0 24 24`,xmlns:`http://www.w3.org/2000/svg`,ref:r,"aria-labelledby":t,...n},e?m.createElement(`title`,{id:t},e):null,m.createElement(`path`,{fillRule:`evenodd`,clipRule:`evenodd`,d:`M3 12a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm7 0a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm9-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z`})),_=(0,h.forwardRef)(g)})),y,b,x,S,C=t((()=>{y=e(n()),b=e(n()),x=({title:e,titleId:t,...n},r)=>y.createElement(`svg`,{xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 0 32 32`,fill:`none`,ref:r,"aria-labelledby":t,...n},e?y.createElement(`title`,{id:t},e):null,y.createElement(`g`,{clipPath:`url(#clip0_1785_4234)`},y.createElement(`path`,{d:`M30 15.9996C30.0002 18.5815 29.2863 21.1132 27.9373 23.3148C26.5884 25.5163 24.6569 27.302 22.3564 28.4743C20.0559 29.6465 17.476 30.1598 14.902 29.9573C12.328 29.7548 9.86014 28.8444 7.77126 27.3269C5.68238 25.8093 4.05386 23.7436 3.06576 21.3582C2.07765 18.9728 1.76846 16.3606 2.17236 13.8104C2.57627 11.2602 3.67753 8.8714 5.35439 6.90808C7.03126 4.94475 9.2184 3.48339 11.674 2.68557`,strokeWidth:3,strokeLinecap:`round`,strokeLinejoin:`round`}),y.createElement(`path`,{opacity:.3,d:`M16 29.9996C23.732 29.9996 30 23.7316 30 15.9996C30 8.26758 23.732 1.99956 16 1.99956C8.26801 1.99956 2 8.26758 2 15.9996C2 23.7316 8.26801 29.9996 16 29.9996Z`,strokeWidth:3,strokeLinejoin:`round`})),y.createElement(`defs`,null,y.createElement(`clipPath`,{id:`clip0_1785_4234`},y.createElement(`rect`,{width:32,height:32,fill:`white`})))),S=(0,b.forwardRef)(x)})),w,T,E,D=t((()=>{o(),a(),e(n(),1),p(),v(),C(),w=l(),T=`Spinner`,E=({size:e=i})=>{let t=c(f,T,[s(`size`,e)]),n=[...r(f,T,[`animated`])],a=[...r(f,T,[`static`])];return(0,w.jsxs)(`span`,{className:t.join(` `),children:[(0,w.jsx)(`span`,{className:n.join(` `),children:(0,w.jsx)(S,{})}),(0,w.jsx)(`span`,{className:a.join(` `),children:(0,w.jsx)(_,{})})]})};try{E.displayName=`Spinner`,E.__docgenInfo={description:``,displayName:`Spinner`,props:{size:{defaultValue:{value:`default`},description:``,name:`size`,required:!1,type:{name:`enum`,value:[{value:`"default"`},{value:`"large"`},{value:`ResponsiveProp<SpinnerSize>`}]}}}}}catch{}}));export{D as n,E as t};
1
+ import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{b as r,ct as i,t as a,w as o,x as s,y as c}from"./dist-DtfJeYQK.js";import{t as l}from"./jsx-runtime-C2wGStra.js";var u,d,f,p=t((()=>{u=`Spinner__XvUpd`,d=`spin__iEg7N`,f={Spinner:u,"Spinner--size-default":`Spinner--size-default__mYug6`,"Spinner--size-large":`Spinner--size-large__w-57e`,"Spinner--narrow-l--size-default":`Spinner--narrow-l--size-default__Y1CEQ`,"Spinner--narrow-l--size-large":`Spinner--narrow-l--size-large__10-GA`,"Spinner--medium-s--size-default":`Spinner--medium-s--size-default__sGEJB`,"Spinner--medium-s--size-large":`Spinner--medium-s--size-large__z3YD6`,"Spinner--medium-l--size-default":`Spinner--medium-l--size-default__Gc7Yo`,"Spinner--medium-l--size-large":`Spinner--medium-l--size-large__a1mSJ`,"Spinner--wide-s--size-default":`Spinner--wide-s--size-default__n3cXu`,"Spinner--wide-s--size-large":`Spinner--wide-s--size-large__kdEFZ`,"Spinner--wide-l--size-default":`Spinner--wide-l--size-default__44Cv-`,"Spinner--wide-l--size-large":`Spinner--wide-l--size-large__uxzU7`,"Spinner--static":`Spinner--static__Jjv6L`,"Spinner--animated":`Spinner--animated__gi5FM`,spin:d}})),m,h,g,_,v=t((()=>{m=e(n()),h=e(n()),g=({title:e,titleId:t,...n},r)=>m.createElement(`svg`,{viewBox:`0 0 24 24`,xmlns:`http://www.w3.org/2000/svg`,ref:r,"aria-labelledby":t,...n},e?m.createElement(`title`,{id:t},e):null,m.createElement(`path`,{fillRule:`evenodd`,clipRule:`evenodd`,d:`M3 12a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm7 0a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm9-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z`})),_=(0,h.forwardRef)(g)})),y,b,x,S,C=t((()=>{y=e(n()),b=e(n()),x=({title:e,titleId:t,...n},r)=>y.createElement(`svg`,{xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 0 32 32`,fill:`none`,ref:r,"aria-labelledby":t,...n},e?y.createElement(`title`,{id:t},e):null,y.createElement(`g`,{clipPath:`url(#clip0_1785_4234)`},y.createElement(`path`,{d:`M30 15.9996C30.0002 18.5815 29.2863 21.1132 27.9373 23.3148C26.5884 25.5163 24.6569 27.302 22.3564 28.4743C20.0559 29.6465 17.476 30.1598 14.902 29.9573C12.328 29.7548 9.86014 28.8444 7.77126 27.3269C5.68238 25.8093 4.05386 23.7436 3.06576 21.3582C2.07765 18.9728 1.76846 16.3606 2.17236 13.8104C2.57627 11.2602 3.67753 8.8714 5.35439 6.90808C7.03126 4.94475 9.2184 3.48339 11.674 2.68557`,strokeWidth:3,strokeLinecap:`round`,strokeLinejoin:`round`}),y.createElement(`path`,{opacity:.3,d:`M16 29.9996C23.732 29.9996 30 23.7316 30 15.9996C30 8.26758 23.732 1.99956 16 1.99956C8.26801 1.99956 2 8.26758 2 15.9996C2 23.7316 8.26801 29.9996 16 29.9996Z`,strokeWidth:3,strokeLinejoin:`round`})),y.createElement(`defs`,null,y.createElement(`clipPath`,{id:`clip0_1785_4234`},y.createElement(`rect`,{width:32,height:32,fill:`white`})))),S=(0,b.forwardRef)(x)})),w,T,E,D=t((()=>{o(),a(),e(n(),1),p(),v(),C(),w=l(),T=`Spinner`,E=({size:e=i})=>{let t=c(f,T,[s(`size`,e)]),n=[...r(f,T,[`animated`])],a=[...r(f,T,[`static`])];return(0,w.jsxs)(`span`,{className:t.join(` `),children:[(0,w.jsx)(`span`,{className:n.join(` `),children:(0,w.jsx)(S,{})}),(0,w.jsx)(`span`,{className:a.join(` `),children:(0,w.jsx)(_,{})})]})};try{E.displayName=`Spinner`,E.__docgenInfo={description:``,displayName:`Spinner`,props:{size:{defaultValue:{value:`default`},description:``,name:`size`,required:!1,type:{name:`enum`,value:[{value:`"large"`},{value:`"default"`},{value:`ResponsiveProp<SpinnerSize>`}]}}}}}catch{}}));export{D as n,E as t};
@@ -1 +1 @@
1
- import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./render-icon-CUp_n6rD.js";import{o,r as s}from"./lib-8ue2PVWI.js";import{i as c,n as l,r as u,t as d}from"./TokyoUIStarFilled-BKIQgn1I.js";var f,p,m,h,g=t((()=>{f=`rating__r-A71`,p=`ratingInput__fyzyf`,m=`stars__qShgt`,h={rating:f,"rating--size-small":`rating--size-small__wMRnt`,"rating--size-medium":`rating--size-medium__oVHgE`,"rating--size-large":`rating--size-large__sNU-A`,"rating--narrow-l--size-small":`rating--narrow-l--size-small__GL-Ad`,"rating--narrow-l--size-medium":`rating--narrow-l--size-medium__DaviF`,"rating--narrow-l--size-large":`rating--narrow-l--size-large__JfbP9`,"rating--medium-s--size-small":`rating--medium-s--size-small__s8Ddw`,"rating--medium-s--size-medium":`rating--medium-s--size-medium__USqaj`,"rating--medium-s--size-large":`rating--medium-s--size-large__T5Pq-`,"rating--medium-l--size-small":`rating--medium-l--size-small__Gf1HV`,"rating--medium-l--size-medium":`rating--medium-l--size-medium__FpwUM`,"rating--medium-l--size-large":`rating--medium-l--size-large__-0tSD`,"rating--wide-s--size-small":`rating--wide-s--size-small__lolFo`,"rating--wide-s--size-medium":`rating--wide-s--size-medium__815IL`,"rating--wide-s--size-large":`rating--wide-s--size-large__47sdo`,"rating--wide-l--size-small":`rating--wide-l--size-small__QL-Ls`,"rating--wide-l--size-medium":`rating--wide-l--size-medium__DnsTd`,"rating--wide-l--size-large":`rating--wide-l--size-large__mpRTc`,ratingInput:p,stars:m,"ratingInput--dsInternalSimulation-hover":`ratingInput--dsInternalSimulation-hover__45QqL`,"focus-style":`focus-style__cDthQ`,"ratingInput--dsInternalSimulation-focus":`ratingInput--dsInternalSimulation-focus__gUAOt`}}));function _(e){return Math.round(e*2)/2}var v=t((()=>{}));function y(e){let{formatMessage:t}=o();return{ariaValueText:t({id:`preply-ds.rating.value-text`,defaultMessage:`{currentValue} out of {maxValue}`,description:`The current rating. Will be announced by screen readers as '4 out of 5'.`},{currentValue:e,maxValue:5})}}var b=t((()=>{s()}));function x({filledPerc:e}){return(0,w.jsxs)(`div`,{"data-filled":`true`,style:{width:`${e*100}%`},children:[i(d),i(d),i(d),i(d),i(d)]})}function S(){return(0,w.jsxs)(`div`,{"data-filled":`false`,children:[i(u),i(u),i(u),i(u),i(u)]})}function C({filledPerc:e}){return(0,w.jsxs)(`div`,{className:h.stars,"aria-hidden":`true`,children:[(0,w.jsx)(x,{filledPerc:e}),(0,w.jsx)(S,{})]})}var w,T=t((()=>{e(n(),1),c(),l(),g(),a(),w=r();try{C.displayName=`Stars`,C.__docgenInfo={description:``,displayName:`Stars`,props:{filledPerc:{defaultValue:null,description:`0-1 value`,name:`filledPerc`,required:!0,type:{name:`number`}}}}}catch{}}));export{v as a,g as c,y as i,T as n,_ as o,b as r,h as s,C as t};
1
+ import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./render-icon-CUp_n6rD.js";import{o,r as s}from"./lib-8ue2PVWI.js";import{i as c,n as l,r as u,t as d}from"./TokyoUIStarFilled-DiQeedTx.js";var f,p,m,h,g=t((()=>{f=`rating__r-A71`,p=`ratingInput__fyzyf`,m=`stars__qShgt`,h={rating:f,"rating--size-small":`rating--size-small__wMRnt`,"rating--size-medium":`rating--size-medium__oVHgE`,"rating--size-large":`rating--size-large__sNU-A`,"rating--narrow-l--size-small":`rating--narrow-l--size-small__GL-Ad`,"rating--narrow-l--size-medium":`rating--narrow-l--size-medium__DaviF`,"rating--narrow-l--size-large":`rating--narrow-l--size-large__JfbP9`,"rating--medium-s--size-small":`rating--medium-s--size-small__s8Ddw`,"rating--medium-s--size-medium":`rating--medium-s--size-medium__USqaj`,"rating--medium-s--size-large":`rating--medium-s--size-large__T5Pq-`,"rating--medium-l--size-small":`rating--medium-l--size-small__Gf1HV`,"rating--medium-l--size-medium":`rating--medium-l--size-medium__FpwUM`,"rating--medium-l--size-large":`rating--medium-l--size-large__-0tSD`,"rating--wide-s--size-small":`rating--wide-s--size-small__lolFo`,"rating--wide-s--size-medium":`rating--wide-s--size-medium__815IL`,"rating--wide-s--size-large":`rating--wide-s--size-large__47sdo`,"rating--wide-l--size-small":`rating--wide-l--size-small__QL-Ls`,"rating--wide-l--size-medium":`rating--wide-l--size-medium__DnsTd`,"rating--wide-l--size-large":`rating--wide-l--size-large__mpRTc`,ratingInput:p,stars:m,"focus-style":`focus-style__cDthQ`}}));function _(e){return Math.round(e*2)/2}var v=t((()=>{}));function y(e){let{formatMessage:t}=o();return{ariaValueText:t({id:`preply-ds.rating.value-text`,defaultMessage:`{currentValue} out of {maxValue}`,description:`The current rating. Will be announced by screen readers as '4 out of 5'.`},{currentValue:e,maxValue:5})}}var b=t((()=>{s()}));function x({filledPerc:e}){return(0,w.jsxs)(`div`,{"data-filled":`true`,style:{width:`${e*100}%`},children:[i(d),i(d),i(d),i(d),i(d)]})}function S(){return(0,w.jsxs)(`div`,{"data-filled":`false`,children:[i(u),i(u),i(u),i(u),i(u)]})}function C({filledPerc:e}){return(0,w.jsxs)(`div`,{className:h.stars,"aria-hidden":`true`,children:[(0,w.jsx)(x,{filledPerc:e}),(0,w.jsx)(S,{})]})}var w,T=t((()=>{e(n(),1),c(),l(),g(),a(),w=r();try{C.displayName=`Stars`,C.__docgenInfo={description:``,displayName:`Stars`,props:{filledPerc:{defaultValue:null,description:`0-1 value`,name:`filledPerc`,required:!0,type:{name:`number`}}}}}catch{}}));export{v as a,g as c,y as i,T as n,_ as o,b as r,h as s,C as t};
@@ -1 +1 @@
1
- .rating__r-A71{isolation:isolate;--star-size:var(--f316e1);width:calc(var(--star-size) * 5);height:var(--star-size);position:relative;overflow:hidden}.rating--size-small__wMRnt{--star-size:var(--f316e1)}.rating--size-medium__oVHgE{--star-size:var(--7789ee)}.rating--size-large__sNU-A{--star-size:var(--51a539)}@media (width>=400px){.rating--narrow-l--size-small__GL-Ad{--star-size:var(--f316e1)}.rating--narrow-l--size-medium__DaviF{--star-size:var(--7789ee)}.rating--narrow-l--size-large__JfbP9{--star-size:var(--51a539)}}@media (width>=700px){.rating--medium-s--size-small__s8Ddw{--star-size:var(--f316e1)}.rating--medium-s--size-medium__USqaj{--star-size:var(--7789ee)}.rating--medium-s--size-large__T5Pq-{--star-size:var(--51a539)}}@media (width>=880px){.rating--medium-l--size-small__Gf1HV{--star-size:var(--f316e1)}.rating--medium-l--size-medium__FpwUM{--star-size:var(--7789ee)}.rating--medium-l--size-large__-0tSD{--star-size:var(--51a539)}}@media (width>=1200px){.rating--wide-s--size-small__lolFo{--star-size:var(--f316e1)}.rating--wide-s--size-medium__815IL{--star-size:var(--7789ee)}.rating--wide-s--size-large__47sdo{--star-size:var(--51a539)}}@media (width>=1900px){.rating--wide-l--size-small__QL-Ls{--star-size:var(--f316e1)}.rating--wide-l--size-medium__DnsTd{--star-size:var(--7789ee)}.rating--wide-l--size-large__mpRTc{--star-size:var(--51a539)}}.ratingInput__fyzyf{border-radius:var(--8d5131);--star-size:var(--51a539)}.ratingInput__fyzyf input[type=range]{cursor:pointer;appearance:none;width:120%;height:100%;margin:0}.ratingInput__fyzyf input[type=range i]::-webkit-slider-thumb{appearance:none;width:0}.ratingInput__fyzyf input[type=range]::-moz-range-thumb{appearance:none;width:0}.ratingInput__fyzyf input[type=range]{padding-inline:calc(var(--star-size) / 2);transform:translate(calc(var(--star-size) * -1))}@media (hover:hover) and (pointer:fine){.ratingInput__fyzyf:hover>.stars__qShgt [data-filled]{color:var(--a987e0)}}.ratingInput--dsInternalSimulation-hover__45QqL>.stars__qShgt [data-filled]{color:var(--a987e0)}.ratingInput--dsInternalSimulation-hover__45QqL:has(input[aria-invalid=true])>.stars__qShgt [data-filled]{color:var(--dc4541)}.ratingInput__fyzyf .focus-style__cDthQ{outline-style:solid;outline-color:var(--603ec6);outline-width:var(--99d31f);outline-offset:var(--c0b12c)}.ratingInput__fyzyf .focus-style__cDthQ>input{outline-width:0}.ratingInput--dsInternalSimulation-focus__gUAOt{outline-style:solid;outline-color:var(--603ec6);outline-width:var(--99d31f);outline-offset:var(--c0b12c)}.ratingInput--dsInternalSimulation-focus__gUAOt>input{outline-width:0}@supports selector(:has(input:focus-visible)){.ratingInput__fyzyf:has(input:focus-visible){outline-style:solid;outline-color:var(--603ec6);outline-width:var(--99d31f);outline-offset:var(--c0b12c)}.ratingInput__fyzyf:has(input:focus-visible)>input{outline-width:0}}@supports not selector(:has(input:focus-visible)){.ratingInput__fyzyf:focus-within{outline-style:solid;outline-color:var(--603ec6);outline-width:var(--99d31f);outline-offset:var(--c0b12c)}.ratingInput__fyzyf:focus-within>input{outline-width:0}}.ratingInput__fyzyf:has(input[aria-invalid=true])>.stars__qShgt [data-filled]{color:var(--dc4541)}@media (hover:hover) and (pointer:fine){.ratingInput__fyzyf:has(input[aria-invalid=true]):hover>.stars__qShgt [data-filled]{color:var(--dc4541)}}.stars__qShgt [data-filled]{pointer-events:none;transition:color var(--018058);display:flex;position:absolute;inset:0}.stars__qShgt [data-filled]>svg{min-width:var(--star-size);min-height:var(--star-size);fill:currentColor}.stars__qShgt [data-filled=false]{z-index:1;width:100%}.stars__qShgt [data-filled=true]{z-index:2;flex-wrap:nowrap;overflow:hidden}
1
+ .rating__r-A71{isolation:isolate;--star-size:var(--f316e1);width:calc(var(--star-size) * 5);height:var(--star-size);position:relative;overflow:hidden}.rating--size-small__wMRnt{--star-size:var(--f316e1)}.rating--size-medium__oVHgE{--star-size:var(--7789ee)}.rating--size-large__sNU-A{--star-size:var(--51a539)}@media (width>=400px){.rating--narrow-l--size-small__GL-Ad{--star-size:var(--f316e1)}.rating--narrow-l--size-medium__DaviF{--star-size:var(--7789ee)}.rating--narrow-l--size-large__JfbP9{--star-size:var(--51a539)}}@media (width>=700px){.rating--medium-s--size-small__s8Ddw{--star-size:var(--f316e1)}.rating--medium-s--size-medium__USqaj{--star-size:var(--7789ee)}.rating--medium-s--size-large__T5Pq-{--star-size:var(--51a539)}}@media (width>=880px){.rating--medium-l--size-small__Gf1HV{--star-size:var(--f316e1)}.rating--medium-l--size-medium__FpwUM{--star-size:var(--7789ee)}.rating--medium-l--size-large__-0tSD{--star-size:var(--51a539)}}@media (width>=1200px){.rating--wide-s--size-small__lolFo{--star-size:var(--f316e1)}.rating--wide-s--size-medium__815IL{--star-size:var(--7789ee)}.rating--wide-s--size-large__47sdo{--star-size:var(--51a539)}}@media (width>=1900px){.rating--wide-l--size-small__QL-Ls{--star-size:var(--f316e1)}.rating--wide-l--size-medium__DnsTd{--star-size:var(--7789ee)}.rating--wide-l--size-large__mpRTc{--star-size:var(--51a539)}}.ratingInput__fyzyf{border-radius:var(--8d5131);--star-size:var(--51a539)}.ratingInput__fyzyf input[type=range]{cursor:pointer;appearance:none;width:120%;height:100%;margin:0}.ratingInput__fyzyf input[type=range i]::-webkit-slider-thumb{appearance:none;width:0}.ratingInput__fyzyf input[type=range]::-moz-range-thumb{appearance:none;width:0}.ratingInput__fyzyf input[type=range]{padding-inline:calc(var(--star-size) / 2);transform:translate(calc(var(--star-size) * -1))}@media (hover:hover) and (pointer:fine){.ratingInput__fyzyf:hover>.stars__qShgt [data-filled]{color:var(--a987e0)}}.ratingInput__fyzyf .focus-style__cDthQ{outline-style:solid;outline-color:var(--603ec6);outline-width:var(--99d31f);outline-offset:var(--c0b12c)}.ratingInput__fyzyf .focus-style__cDthQ>input{outline-width:0}@supports selector(:has(input:focus-visible)){.ratingInput__fyzyf:has(input:focus-visible){outline-style:solid;outline-color:var(--603ec6);outline-width:var(--99d31f);outline-offset:var(--c0b12c)}.ratingInput__fyzyf:has(input:focus-visible)>input{outline-width:0}}@supports not selector(:has(input:focus-visible)){.ratingInput__fyzyf:focus-within{outline-style:solid;outline-color:var(--603ec6);outline-width:var(--99d31f);outline-offset:var(--c0b12c)}.ratingInput__fyzyf:focus-within>input{outline-width:0}}.ratingInput__fyzyf:has(input[aria-invalid=true])>.stars__qShgt [data-filled]{color:var(--dc4541)}@media (hover:hover) and (pointer:fine){.ratingInput__fyzyf:has(input[aria-invalid=true]):hover>.stars__qShgt [data-filled]{color:var(--dc4541)}}.stars__qShgt [data-filled]{pointer-events:none;transition:color var(--018058);display:flex;position:absolute;inset:0}.stars__qShgt [data-filled]>svg{min-width:var(--star-size);min-height:var(--star-size);fill:currentColor}.stars__qShgt [data-filled=false]{z-index:1;width:100%}.stars__qShgt [data-filled=true]{z-index:2;flex-wrap:nowrap;overflow:hidden}
@@ -1,4 +1,4 @@
1
- import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{ht as r,t as i}from"./dist-DtfJeYQK.js";import{t as a}from"./jsx-runtime-C2wGStra.js";import{n as o,t as s}from"./dist-Cc1j9Pjk.js";import{n as c,t as l}from"./Text-B288uCKD.js";import{n as u,t as d}from"./Heading-Bmekm9VQ.js";import{n as f,t as p}from"./Button-a57MCiDO.js";import{i as m,r as h}from"./lib-8ue2PVWI.js";import{n as g,t as _}from"./ProgressSteps-Cl7OdN1S.js";var v,y,b,x=t((()=>{v=`steps__6mN2m`,y=`header__hCorO`,b={steps:v,header:y}})),S,C,w,T,E,D,O,k,A,j=t((()=>{S=e(n(),1),f(),x(),h(),i(),s(),u(),g(),c(),C=a(),w=(0,S.createContext)(void 0),T=()=>{let e=(0,S.useContext)(w);if(e===void 0)throw Error(`Steps navigation components must be used within a Steps component`);return e||{}},E=(0,S.forwardRef)(function({onClick:e,disabled:t,variant:n=`ghost`,...r},i){let{goToPreviousStep:a,currentStep:o,isNavigating:s,contentId:c}=T();return(0,C.jsx)(p,{...r,ref:i,size:`medium`,variant:n,onClick:t=>{e?.(t),!t.defaultPrevented&&a()},disabled:o===1||s||t,"aria-controls":c,children:r.children||(0,C.jsx)(m,{id:`preply-ds.steps.previous`,defaultMessage:`Previous`,description:`Button used to navigate to the previous step`})})}),D=(0,S.forwardRef)(function({onClick:e,disabled:t,variant:n=`primary`,...r},i){let{goToNextStep:a,currentStep:o,totalSteps:s,isNavigating:c,contentId:l}=T();return(0,C.jsx)(p,{...r,ref:i,size:`medium`,variant:n,onClick:t=>{e?.(t),!t.defaultPrevented&&a()},disabled:o===s||c||t,"aria-controls":l,children:r.children||(0,C.jsx)(m,{id:`preply-ds.steps.next`,defaultMessage:`Next`,description:`Button used to navigate to the next step`})})}),O=({children:e,"aria-label":t,initialStep:n=1,onStepChange:i,dataset:a})=>{let s=(0,S.useId)(),[c,l]=(0,S.useState)(n),[u,d]=(0,S.useState)(!1),f=[],p=[];e?.forEach(e=>{(0,S.isValidElement)(e)&&e.type===k?f.push(e):p.push(e)});let m=f.length,h=r(a,{preplyDsComponent:o.Steps}),g=async e=>{let t=Math.min(Math.max(e,1),m);if(!i){l(t);return}d(!0);try{l(await i(c,t)??t)}finally{d(!1)}},v={goToPreviousStep:()=>g(c-1),goToNextStep:()=>g(c+1),goToStep:e=>g(e),currentStep:c,totalSteps:m,isNavigating:u,contentId:s};return(0,C.jsxs)(`div`,{...h,className:b.steps,id:s,"aria-live":`polite`,"aria-busy":u,children:[(0,C.jsx)(_,{currentStep:c,totalSteps:m,"aria-label":t}),(0,C.jsx)(`div`,{className:b.content,children:(0,C.jsxs)(w.Provider,{value:v,children:[f[c-1],p]})})]})},k=({title:e,description:t,children:n,hideHeader:r})=>(0,C.jsxs)(C.Fragment,{children:[(0,C.jsxs)(`hgroup`,{className:b.header,hidden:r,children:[(0,C.jsx)(d,{tag:`h3`,variant:{_:`medium`,"medium-l":`large`},children:e}),t&&(0,C.jsx)(l,{variant:`default-regular`,accent:`secondary`,children:t})]}),n]}),A=Object.assign(O,{Step:k,Previous:E,Next:D});try{A.displayName=`Steps`,A.__docgenInfo={description:"This component allows users to navigate through a series of steps, providing\na structured way to complete tasks or forms. It will also handle screen reader\nannouncements and progress indicators.\n\nTo create a step, wrap the content of each step in a `Steps.Step` component.\nAny non-`Steps.Step` children will be rendered outside of the steps flow,\nright after the currently active step.\n\nTo navigate between steps, use the `Steps.Previous` and `Steps.Next` components.\nAlternatively, you can use the `StepsContext` directly to call\n`goToPreviousStep`, `goToNextStep`, or `goToStep`.",displayName:`Steps`,props:{"aria-label":{defaultValue:null,description:`A description of the step flow and its content for screen readers.
1
+ import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{ht as r,t as i}from"./dist-DtfJeYQK.js";import{t as a}from"./jsx-runtime-C2wGStra.js";import{n as o,t as s}from"./dist-Cc1j9Pjk.js";import{n as c,t as l}from"./Text-Bj49UVGS.js";import{n as u,t as d}from"./Heading-Xmy4HTvU.js";import{n as f,t as p}from"./Button-DagS5hxP.js";import{i as m,r as h}from"./lib-8ue2PVWI.js";import{n as g,t as _}from"./ProgressSteps-B2AXEKFJ.js";var v,y,b,x=t((()=>{v=`steps__6mN2m`,y=`header__hCorO`,b={steps:v,header:y}})),S,C,w,T,E,D,O,k,A,j=t((()=>{S=e(n(),1),f(),x(),h(),i(),s(),u(),g(),c(),C=a(),w=(0,S.createContext)(void 0),T=()=>{let e=(0,S.useContext)(w);if(e===void 0)throw Error(`Steps navigation components must be used within a Steps component`);return e||{}},E=(0,S.forwardRef)(function({onClick:e,disabled:t,variant:n=`ghost`,...r},i){let{goToPreviousStep:a,currentStep:o,isNavigating:s,contentId:c}=T();return(0,C.jsx)(p,{...r,ref:i,size:`medium`,variant:n,onClick:t=>{e?.(t),!t.defaultPrevented&&a()},disabled:o===1||s||t,"aria-controls":c,children:r.children||(0,C.jsx)(m,{id:`preply-ds.steps.previous`,defaultMessage:`Previous`,description:`Button used to navigate to the previous step`})})}),D=(0,S.forwardRef)(function({onClick:e,disabled:t,variant:n=`primary`,...r},i){let{goToNextStep:a,currentStep:o,totalSteps:s,isNavigating:c,contentId:l}=T();return(0,C.jsx)(p,{...r,ref:i,size:`medium`,variant:n,onClick:t=>{e?.(t),!t.defaultPrevented&&a()},disabled:o===s||c||t,"aria-controls":l,children:r.children||(0,C.jsx)(m,{id:`preply-ds.steps.next`,defaultMessage:`Next`,description:`Button used to navigate to the next step`})})}),O=({children:e,"aria-label":t,initialStep:n=1,onStepChange:i,dataset:a})=>{let s=(0,S.useId)(),[c,l]=(0,S.useState)(n),[u,d]=(0,S.useState)(!1),f=[],p=[];e?.forEach(e=>{(0,S.isValidElement)(e)&&e.type===k?f.push(e):p.push(e)});let m=f.length,h=r(a,{preplyDsComponent:o.Steps}),g=async e=>{let t=Math.min(Math.max(e,1),m);if(!i){l(t);return}d(!0);try{l(await i(c,t)??t)}finally{d(!1)}},v={goToPreviousStep:()=>g(c-1),goToNextStep:()=>g(c+1),goToStep:e=>g(e),currentStep:c,totalSteps:m,isNavigating:u,contentId:s};return(0,C.jsxs)(`div`,{...h,className:b.steps,id:s,"aria-live":`polite`,"aria-busy":u,children:[(0,C.jsx)(_,{currentStep:c,totalSteps:m,"aria-label":t}),(0,C.jsx)(`div`,{className:b.content,children:(0,C.jsxs)(w.Provider,{value:v,children:[f[c-1],p]})})]})},k=({title:e,description:t,children:n,hideHeader:r})=>(0,C.jsxs)(C.Fragment,{children:[(0,C.jsxs)(`hgroup`,{className:b.header,hidden:r,children:[(0,C.jsx)(d,{tag:`h3`,variant:{_:`medium`,"medium-l":`large`},children:e}),t&&(0,C.jsx)(l,{variant:`default-regular`,accent:`secondary`,children:t})]}),n]}),A=Object.assign(O,{Step:k,Previous:E,Next:D});try{A.displayName=`Steps`,A.__docgenInfo={description:"This component allows users to navigate through a series of steps, providing\na structured way to complete tasks or forms. It will also handle screen reader\nannouncements and progress indicators.\n\nTo create a step, wrap the content of each step in a `Steps.Step` component.\nAny non-`Steps.Step` children will be rendered outside of the steps flow,\nright after the currently active step.\n\nTo navigate between steps, use the `Steps.Previous` and `Steps.Next` components.\nAlternatively, you can use the `StepsContext` directly to call\n`goToPreviousStep`, `goToNextStep`, or `goToStep`.",displayName:`Steps`,props:{"aria-label":{defaultValue:null,description:`A description of the step flow and its content for screen readers.
2
2
  @example 'Onboarding Steps', 'Checkout Steps', 'Survey Steps', etc.`,name:`aria-label`,required:!0,type:{name:`string`}},initialStep:{defaultValue:{value:`1`},description:"The initial step to start at (from `1` to `children.length`).",name:`initialStep`,required:!1,type:{name:`enum`,value:[{value:`number`}]}},onStepChange:{defaultValue:null,description:`Optional callback to control navigation between steps.
3
3
 
4
4
  This is triggered either by using the \`Steps.Previous\` and \`Steps.Next\`
@@ -1,4 +1,4 @@
1
- import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,r as a,t as o}from"./Steps-B9DWysMC.js";import{n as s,t as c}from"./LayoutFlex-CEr_Bd5T.js";var l,u,d,f,p,m,h,g,_,v,y,b,x,S,C,w,T;t((()=>{l=e(n(),1),i(),s(),u=r(),{expect:d,userEvent:f,waitFor:p}=__STORYBOOK_MODULE_TEST__,m={title:`Components/Steps`,component:o,decorators:[e=>(0,u.jsx)(`div`,{style:{padding:`32px`},children:(0,u.jsx)(e,{})})]},h=(0,u.jsx)(`div`,{style:{width:`100%`,height:`300px`,backgroundColor:`#e0e0e0`,marginBottom:`16px`}}),g={parameters:{docs:{description:{story:`Basic usage with header, controls, and content per step.`}}},render:()=>(0,u.jsxs)(o,{dataset:{testid:`steps`},"aria-label":`Story Steps`,children:[(0,u.jsx)(o.Step,{title:`Step 1`,description:`This is the description for step 1.`,children:h}),(0,u.jsx)(o.Step,{title:`Step 2`,description:`This is the description for step 2.`,children:h}),(0,u.jsx)(o.Step,{title:`Step 3`,description:`This is the description for step 3.`,children:h}),(0,u.jsxs)(c,{justifyContent:`space-between`,children:[(0,u.jsx)(o.Previous,{}),(0,u.jsx)(o.Next,{})]})]}),play:async({canvas:e})=>{d(e.getByText(`Step 1`)).toBeVisible(),await f.click(e.getByText(`Next`)),await p(()=>{d(e.getByText(`Step 2`)).toBeVisible()}),await f.click(e.getByText(`Previous`)),await p(()=>{d(e.getByText(`Step 1`)).toBeVisible()})}},_={parameters:{docs:{description:{story:`Example with hidden headers and only content per step.`}}},render:()=>(0,u.jsxs)(o,{"aria-label":`Story Steps`,children:[(0,u.jsx)(o.Step,{title:`Step 1`,hideHeader:!0,children:h}),(0,u.jsx)(o.Step,{title:`Step 2`,hideHeader:!0,children:h}),(0,u.jsx)(o.Step,{title:`Step 3`,hideHeader:!0,children:h}),(0,u.jsxs)(c,{justifyContent:`space-between`,children:[(0,u.jsx)(o.Previous,{}),(0,u.jsx)(o.Next,{})]})]})},v={parameters:{docs:{description:{story:"Example demonstrating the use of a custom `initialStep`."}}},render:()=>(0,u.jsxs)(o,{initialStep:2,"aria-label":`Story Steps`,children:[(0,u.jsx)(o.Step,{title:`Step 1`,description:`Step 1 is skipped.`,children:h}),(0,u.jsx)(o.Step,{title:`Step 2`,description:`Starting at step 2.`,children:h}),(0,u.jsx)(o.Step,{title:`Step 3`,description:`This is the third step.`,children:h})]})},y={parameters:{docs:{description:{story:`Example with only navigation controls, no headers or content.`}}},render:()=>(0,u.jsxs)(o,{"aria-label":`Story Steps`,children:[(0,u.jsx)(o.Step,{title:`Step 1`,children:h}),(0,u.jsx)(o.Step,{title:`Step 2`,children:h}),(0,u.jsx)(o.Step,{title:`Step 3`,children:h}),(0,u.jsxs)(c,{justifyContent:`space-between`,children:[(0,u.jsx)(o.Previous,{}),(0,u.jsx)(o.Next,{})]})]})},b={parameters:{docs:{description:{story:`Example with a 1-second async delay between steps.
1
+ import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,r as a,t as o}from"./Steps-CNOQ424q.js";import{n as s,t as c}from"./LayoutFlex-CpktYRVX.js";var l,u,d,f,p,m,h,g,_,v,y,b,x,S,C,w,T;t((()=>{l=e(n(),1),i(),s(),u=r(),{expect:d,userEvent:f,waitFor:p}=__STORYBOOK_MODULE_TEST__,m={title:`Components/Steps`,component:o,decorators:[e=>(0,u.jsx)(`div`,{style:{padding:`32px`},children:(0,u.jsx)(e,{})})]},h=(0,u.jsx)(`div`,{style:{width:`100%`,height:`300px`,backgroundColor:`#e0e0e0`,marginBottom:`16px`}}),g={parameters:{docs:{description:{story:`Basic usage with header, controls, and content per step.`}}},render:()=>(0,u.jsxs)(o,{dataset:{testid:`steps`},"aria-label":`Story Steps`,children:[(0,u.jsx)(o.Step,{title:`Step 1`,description:`This is the description for step 1.`,children:h}),(0,u.jsx)(o.Step,{title:`Step 2`,description:`This is the description for step 2.`,children:h}),(0,u.jsx)(o.Step,{title:`Step 3`,description:`This is the description for step 3.`,children:h}),(0,u.jsxs)(c,{justifyContent:`space-between`,children:[(0,u.jsx)(o.Previous,{}),(0,u.jsx)(o.Next,{})]})]}),play:async({canvas:e})=>{d(e.getByText(`Step 1`)).toBeVisible(),await f.click(e.getByText(`Next`)),await p(()=>{d(e.getByText(`Step 2`)).toBeVisible()}),await f.click(e.getByText(`Previous`)),await p(()=>{d(e.getByText(`Step 1`)).toBeVisible()})}},_={parameters:{docs:{description:{story:`Example with hidden headers and only content per step.`}}},render:()=>(0,u.jsxs)(o,{"aria-label":`Story Steps`,children:[(0,u.jsx)(o.Step,{title:`Step 1`,hideHeader:!0,children:h}),(0,u.jsx)(o.Step,{title:`Step 2`,hideHeader:!0,children:h}),(0,u.jsx)(o.Step,{title:`Step 3`,hideHeader:!0,children:h}),(0,u.jsxs)(c,{justifyContent:`space-between`,children:[(0,u.jsx)(o.Previous,{}),(0,u.jsx)(o.Next,{})]})]})},v={parameters:{docs:{description:{story:"Example demonstrating the use of a custom `initialStep`."}}},render:()=>(0,u.jsxs)(o,{initialStep:2,"aria-label":`Story Steps`,children:[(0,u.jsx)(o.Step,{title:`Step 1`,description:`Step 1 is skipped.`,children:h}),(0,u.jsx)(o.Step,{title:`Step 2`,description:`Starting at step 2.`,children:h}),(0,u.jsx)(o.Step,{title:`Step 3`,description:`This is the third step.`,children:h})]})},y={parameters:{docs:{description:{story:`Example with only navigation controls, no headers or content.`}}},render:()=>(0,u.jsxs)(o,{"aria-label":`Story Steps`,children:[(0,u.jsx)(o.Step,{title:`Step 1`,children:h}),(0,u.jsx)(o.Step,{title:`Step 2`,children:h}),(0,u.jsx)(o.Step,{title:`Step 3`,children:h}),(0,u.jsxs)(c,{justifyContent:`space-between`,children:[(0,u.jsx)(o.Previous,{}),(0,u.jsx)(o.Next,{})]})]})},b={parameters:{docs:{description:{story:`Example with a 1-second async delay between steps.
2
2
 
3
3
  Navigation controls are disabled during transitions, with a cursor loading indicator.`}}},render:()=>(0,u.jsxs)(o,{onStepChange:async(e,t)=>(await new Promise(e=>setTimeout(e,1e3)),t),dataset:{testid:`steps`},"aria-label":`Story Steps`,children:[(0,u.jsx)(o.Step,{title:`Step 1`,description:`Navigation has a 1s delay`,children:h}),(0,u.jsx)(o.Step,{title:`Step 2`,description:`Each navigation has async validation`,children:h}),(0,u.jsx)(o.Step,{title:`Step 3`,description:`Buttons are disabled during validation`,children:h}),(0,u.jsx)(o.Step,{title:`Step 4`,description:`Final step`,children:h}),(0,u.jsxs)(`div`,{style:{display:`flex`,justifyContent:`space-between`},children:[(0,u.jsx)(o.Previous,{}),(0,u.jsx)(o.Next,{})]})]}),play:async({canvas:e})=>{let t=e.getByTestId(`steps`);d(e.getByText(`Step 1`)).toBeVisible(),await f.click(e.getByText(`Next`)),await p(()=>{d(t).toHaveAttribute(`aria-busy`,`true`)},{timeout:500}),await p(()=>{d(t).toHaveAttribute(`aria-busy`,`false`)},{timeout:3e3}),d(e.getByText(`Step 2`)).toBeVisible()}},x={parameters:{docs:{description:{story:`You can override the navigation flow using \`onStepChange\`.
4
4
 
@@ -9,4 +9,4 @@ Use for an uncontrolled switch.
9
9
  @example <Switch
10
10
  defaultChecked={mySetting}
11
11
  onCheckedChange={updateMySetting}
12
- />`,name:`defaultChecked`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},onCheckedChange:{defaultValue:null,description:`Callback for when the switch state changes.`,name:`onCheckedChange`,required:!1,type:{name:`enum`,value:[{value:`(checked: boolean) => void`}]}},id:{defaultValue:null,description:`The unique identifier for the switch element.`,name:`id`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},disabled:{defaultValue:null,description:`Disables interactions with the switch.`,name:`disabled`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},"aria-label":{defaultValue:null,description:`Accessible label for the switch.`,name:`aria-label`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},"aria-labelledby":{defaultValue:null,description:`ID of the element that labels the switch.`,name:`aria-labelledby`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},"aria-describedby":{defaultValue:null,description:`ID of the element that describes the switch.`,name:`aria-describedby`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},"aria-invalid":{defaultValue:null,description:`Indicates whether the switch value is invalid.`,name:`aria-invalid`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},"aria-errormessage":{defaultValue:null,description:`ID of the element that describes the error, if any.`,name:`aria-errormessage`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:`ref`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`},{value:`(instance: HTMLButtonElement | null) => void`},{value:`RefObject<HTMLButtonElement>`}]}},key:{defaultValue:null,description:``,name:`key`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`},{value:`number`},{value:`bigint`}]}}}}}catch{}}));export{g as n,h as t};
12
+ />`,name:`defaultChecked`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},onCheckedChange:{defaultValue:null,description:`Callback for when the switch state changes.`,name:`onCheckedChange`,required:!1,type:{name:`enum`,value:[{value:`(checked: boolean) => void`}]}},id:{defaultValue:null,description:`The unique identifier for the switch element.`,name:`id`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},disabled:{defaultValue:null,description:`Disables interactions with the switch.`,name:`disabled`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},"aria-label":{defaultValue:null,description:`Accessible label for the switch.`,name:`aria-label`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},"aria-labelledby":{defaultValue:null,description:`ID of the element that labels the switch.`,name:`aria-labelledby`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},"aria-describedby":{defaultValue:null,description:`ID of the element that describes the switch.`,name:`aria-describedby`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},"aria-invalid":{defaultValue:null,description:`Indicates whether the switch value is invalid.`,name:`aria-invalid`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},"aria-errormessage":{defaultValue:null,description:`ID of the element that describes the error, if any.`,name:`aria-errormessage`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}}}}}catch{}}));export{g as n,h as t};
@@ -1,4 +1,4 @@
1
- import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Text-B288uCKD.js";import{n as o,t as s}from"./LayoutFlex-CEr_Bd5T.js";import{n as c,t as l}from"./Switch-CpclSBFz.js";var u,d,f,p,m,h,g,_,v,y,b,x,S,C,w,T;t((()=>{u=e(n(),1),c(),o(),i(),d=r(),{expect:f,fn:p,userEvent:m,within:h}=__STORYBOOK_MODULE_TEST__,g={title:`Components/Switch`,component:l,args:{onCheckedChange:p(),"aria-label":`Switch`},parameters:{layout:`padded`}},_={async play({args:e,canvasElement:t,step:n}){let r=h(t).getByRole(`switch`);await n(`Switch on via click`,async()=>{await m.click(r),f(e.onCheckedChange).toHaveBeenNthCalledWith(1,!0),f(r).toHaveAttribute(`aria-checked`,`true`)}),await n(`Switch off via click`,async()=>{await m.click(r),f(e.onCheckedChange).toHaveBeenNthCalledWith(2,!1),f(r).toHaveAttribute(`aria-checked`,`false`)}),await n(`Switch on via Enter key`,async()=>{r.focus(),f(r).toHaveFocus(),await m.keyboard(`[Enter]`),f(e.onCheckedChange).toHaveBeenNthCalledWith(3,!0),f(r).toHaveAttribute(`aria-checked`,`true`)}),await n(`Switch off via Enter key`,async()=>{r.focus(),f(r).toHaveFocus(),await m.keyboard(`[Enter]`),f(e.onCheckedChange).toHaveBeenNthCalledWith(4,!1),f(r).toHaveAttribute(`aria-checked`,`false`)}),await n(`Switch on via Space key`,async()=>{r.focus(),f(r).toHaveFocus(),await m.keyboard(`[Space]`),f(e.onCheckedChange).toHaveBeenNthCalledWith(5,!0),f(r).toHaveAttribute(`aria-checked`,`true`)}),await n(`Switch off via Space key`,async()=>{r.focus(),f(r).toHaveFocus(),await m.keyboard(`[Space]`),f(e.onCheckedChange).toHaveBeenNthCalledWith(6,!1),f(r).toHaveAttribute(`aria-checked`,`false`)})}},v={render:function(e){return(0,d.jsxs)(s,{gap:`12`,children:[(0,d.jsx)(l,{...e}),(0,d.jsx)(l,{...e,defaultChecked:!0}),(0,d.jsx)(l,{...e,defaultChecked:!1})]})}},y={render:function(e){let t=({checked:e,...t})=>{let[n,r]=(0,u.useState)(e);return(0,d.jsx)(l,{...t,checked:n,onCheckedChange:r})};return(0,d.jsxs)(s,{gap:`12`,children:[(0,d.jsx)(t,{...e}),(0,d.jsx)(t,{...e,checked:!0}),(0,d.jsx)(t,{...e,checked:!1})]})}},b={args:{checked:!1},async play({canvasElement:e,step:t}){let n=h(e).getByRole(`switch`);await t(`switch does not change state`,async()=>{await m.click(n),f(n).toHaveAttribute(`aria-checked`,`false`)})}},x={args:{disabled:!0},render:function(e){return(0,d.jsxs)(s,{gap:`12`,children:[(0,d.jsx)(l,{...e,disabled:!0}),(0,d.jsx)(l,{...e,defaultChecked:!0,disabled:!0})]})},async play({args:e,canvasElement:t,step:n}){let r=h(t).getAllByRole(`switch`)[0];await n(`switch cannot be focused`,()=>{r.focus(),f(r).not.toHaveFocus()}),await n(`switch cannot be checked`,async()=>{await m.click(r),f(e.onCheckedChange).not.toHaveBeenCalled(),f(r).toHaveAttribute(`aria-checked`,`false`)})}},S={parameters:{chromatic:{modes:{TouchDevice:{hasTouch:!0}}}}},C={tags:[`!autodocs`],async play({canvasElement:e}){let t=h(e).getByRole(`switch`);t.focus(),f(t).toHaveFocus()}},w={render:function(e){return(0,d.jsx)(`div`,{style:{width:`500px`},children:(0,d.jsxs)(s,{nowrap:!0,gap:`8`,direction:`row`,alignItems:`center`,justifyContent:`space-between`,children:[(0,d.jsx)(a,{variant:`default-regular`,children:`Allow Preply to use your answers to improve your learning experience.`}),(0,d.jsx)(l,{...e})]})})}},_.parameters={..._.parameters,docs:{..._.parameters?.docs,source:{originalSource:`{
1
+ import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Text-Bj49UVGS.js";import{n as o,t as s}from"./LayoutFlex-CpktYRVX.js";import{n as c,t as l}from"./Switch-DyKTsO1c.js";var u,d,f,p,m,h,g,_,v,y,b,x,S,C,w,T;t((()=>{u=e(n(),1),c(),o(),i(),d=r(),{expect:f,fn:p,userEvent:m,within:h}=__STORYBOOK_MODULE_TEST__,g={title:`Components/Switch`,component:l,args:{onCheckedChange:p(),"aria-label":`Switch`},parameters:{layout:`padded`}},_={async play({args:e,canvasElement:t,step:n}){let r=h(t).getByRole(`switch`);await n(`Switch on via click`,async()=>{await m.click(r),f(e.onCheckedChange).toHaveBeenNthCalledWith(1,!0),f(r).toHaveAttribute(`aria-checked`,`true`)}),await n(`Switch off via click`,async()=>{await m.click(r),f(e.onCheckedChange).toHaveBeenNthCalledWith(2,!1),f(r).toHaveAttribute(`aria-checked`,`false`)}),await n(`Switch on via Enter key`,async()=>{r.focus(),f(r).toHaveFocus(),await m.keyboard(`[Enter]`),f(e.onCheckedChange).toHaveBeenNthCalledWith(3,!0),f(r).toHaveAttribute(`aria-checked`,`true`)}),await n(`Switch off via Enter key`,async()=>{r.focus(),f(r).toHaveFocus(),await m.keyboard(`[Enter]`),f(e.onCheckedChange).toHaveBeenNthCalledWith(4,!1),f(r).toHaveAttribute(`aria-checked`,`false`)}),await n(`Switch on via Space key`,async()=>{r.focus(),f(r).toHaveFocus(),await m.keyboard(`[Space]`),f(e.onCheckedChange).toHaveBeenNthCalledWith(5,!0),f(r).toHaveAttribute(`aria-checked`,`true`)}),await n(`Switch off via Space key`,async()=>{r.focus(),f(r).toHaveFocus(),await m.keyboard(`[Space]`),f(e.onCheckedChange).toHaveBeenNthCalledWith(6,!1),f(r).toHaveAttribute(`aria-checked`,`false`)})}},v={render:function(e){return(0,d.jsxs)(s,{gap:`12`,children:[(0,d.jsx)(l,{...e}),(0,d.jsx)(l,{...e,defaultChecked:!0}),(0,d.jsx)(l,{...e,defaultChecked:!1})]})}},y={render:function(e){let t=({checked:e,...t})=>{let[n,r]=(0,u.useState)(e);return(0,d.jsx)(l,{...t,checked:n,onCheckedChange:r})};return(0,d.jsxs)(s,{gap:`12`,children:[(0,d.jsx)(t,{...e}),(0,d.jsx)(t,{...e,checked:!0}),(0,d.jsx)(t,{...e,checked:!1})]})}},b={args:{checked:!1},async play({canvasElement:e,step:t}){let n=h(e).getByRole(`switch`);await t(`switch does not change state`,async()=>{await m.click(n),f(n).toHaveAttribute(`aria-checked`,`false`)})}},x={args:{disabled:!0},render:function(e){return(0,d.jsxs)(s,{gap:`12`,children:[(0,d.jsx)(l,{...e,disabled:!0}),(0,d.jsx)(l,{...e,defaultChecked:!0,disabled:!0})]})},async play({args:e,canvasElement:t,step:n}){let r=h(t).getAllByRole(`switch`)[0];await n(`switch cannot be focused`,()=>{r.focus(),f(r).not.toHaveFocus()}),await n(`switch cannot be checked`,async()=>{await m.click(r),f(e.onCheckedChange).not.toHaveBeenCalled(),f(r).toHaveAttribute(`aria-checked`,`false`)})}},S={parameters:{chromatic:{modes:{TouchDevice:{hasTouch:!0}}}}},C={tags:[`!autodocs`],async play({canvasElement:e}){let t=h(e).getByRole(`switch`);t.focus(),f(t).toHaveFocus()}},w={render:function(e){return(0,d.jsx)(`div`,{style:{width:`500px`},children:(0,d.jsxs)(s,{nowrap:!0,gap:`8`,direction:`row`,alignItems:`center`,justifyContent:`space-between`,children:[(0,d.jsx)(a,{variant:`default-regular`,children:`Allow Preply to use your answers to improve your learning experience.`}),(0,d.jsx)(l,{...e})]})})}},_.parameters={..._.parameters,docs:{..._.parameters?.docs,source:{originalSource:`{
2
2
  async play({
3
3
  args,
4
4
  canvasElement,
@@ -1 +1 @@
1
- import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{_ as r,ht as i,t as a,w as o,x as s,y as c}from"./dist-DtfJeYQK.js";import{t as l}from"./jsx-runtime-C2wGStra.js";import{n as u,t as d}from"./dist-Cc1j9Pjk.js";import{n as f,t as p}from"./text-accent-CfNKCcRq.js";import{n as m,t as h}from"./filterAttributesPassedByRadixUIAtRuntime-CGiuUnR2.js";import{n as g,t as _}from"./text-centered-D7Kg4Wt0.js";var v,y,b=t((()=>{v=`Text__BD7-C`,y={Text:v,"Text--variant-caption-regular":`Text--variant-caption-regular__-ndGs`,"Text--variant-caption-semibold":`Text--variant-caption-semibold__-q81F`,"Text--variant-small-regular":`Text--variant-small-regular__V98UM`,"Text--variant-small-regular-italic":`Text--variant-small-regular-italic__Ii9YT`,"Text--variant-small-semibold":`Text--variant-small-semibold__mTXWU`,"Text--variant-small-semibold-italic":`Text--variant-small-semibold-italic__N2bGq`,"Text--variant-default-regular":`Text--variant-default-regular__GBkvP`,"Text--variant-default-regular-italic":`Text--variant-default-regular-italic__h8iGC`,"Text--variant-default-semibold":`Text--variant-default-semibold__BREV0`,"Text--variant-default-semibold-italic":`Text--variant-default-semibold-italic__0qH9S`,"Text--variant-large-regular":`Text--variant-large-regular__IFXFs`,"Text--variant-large-regular-italic":`Text--variant-large-regular-italic__PBExC`,"Text--variant-large-semibold":`Text--variant-large-semibold__iyV1O`,"Text--variant-large-semibold-italic":`Text--variant-large-semibold-italic__wKF6g`,"Text--narrow-l--variant-caption-regular":`Text--narrow-l--variant-caption-regular__nznL0`,"Text--narrow-l--variant-caption-semibold":`Text--narrow-l--variant-caption-semibold__l0VQQ`,"Text--narrow-l--variant-small-regular":`Text--narrow-l--variant-small-regular__VMmD6`,"Text--narrow-l--variant-small-regular-italic":`Text--narrow-l--variant-small-regular-italic__nGADF`,"Text--narrow-l--variant-small-semibold":`Text--narrow-l--variant-small-semibold__BQ1W4`,"Text--narrow-l--variant-small-semibold-italic":`Text--narrow-l--variant-small-semibold-italic__7UUeq`,"Text--narrow-l--variant-default-regular":`Text--narrow-l--variant-default-regular__pVzcT`,"Text--narrow-l--variant-default-regular-italic":`Text--narrow-l--variant-default-regular-italic__RPEsW`,"Text--narrow-l--variant-default-semibold":`Text--narrow-l--variant-default-semibold__AHeOG`,"Text--narrow-l--variant-default-semibold-italic":`Text--narrow-l--variant-default-semibold-italic__Dhmq4`,"Text--narrow-l--variant-large-regular":`Text--narrow-l--variant-large-regular__vY6mg`,"Text--narrow-l--variant-large-regular-italic":`Text--narrow-l--variant-large-regular-italic__Jypdh`,"Text--narrow-l--variant-large-semibold":`Text--narrow-l--variant-large-semibold__XaN0f`,"Text--narrow-l--variant-large-semibold-italic":`Text--narrow-l--variant-large-semibold-italic__5DrpP`,"Text--medium-s--variant-caption-regular":`Text--medium-s--variant-caption-regular__QIFIm`,"Text--medium-s--variant-caption-semibold":`Text--medium-s--variant-caption-semibold__qA3XV`,"Text--medium-s--variant-small-regular":`Text--medium-s--variant-small-regular__Fujae`,"Text--medium-s--variant-small-regular-italic":`Text--medium-s--variant-small-regular-italic__jaDXd`,"Text--medium-s--variant-small-semibold":`Text--medium-s--variant-small-semibold__9pYQr`,"Text--medium-s--variant-small-semibold-italic":`Text--medium-s--variant-small-semibold-italic__-ac-Q`,"Text--medium-s--variant-default-regular":`Text--medium-s--variant-default-regular__jyyg6`,"Text--medium-s--variant-default-regular-italic":`Text--medium-s--variant-default-regular-italic__FzmWH`,"Text--medium-s--variant-default-semibold":`Text--medium-s--variant-default-semibold__zfein`,"Text--medium-s--variant-default-semibold-italic":`Text--medium-s--variant-default-semibold-italic__pwAKv`,"Text--medium-s--variant-large-regular":`Text--medium-s--variant-large-regular__UQstF`,"Text--medium-s--variant-large-regular-italic":`Text--medium-s--variant-large-regular-italic__BGPjz`,"Text--medium-s--variant-large-semibold":`Text--medium-s--variant-large-semibold__ZTsh3`,"Text--medium-s--variant-large-semibold-italic":`Text--medium-s--variant-large-semibold-italic__QsDHO`,"Text--medium-l--variant-caption-regular":`Text--medium-l--variant-caption-regular__neFtF`,"Text--medium-l--variant-caption-semibold":`Text--medium-l--variant-caption-semibold__96Bxj`,"Text--medium-l--variant-small-regular":`Text--medium-l--variant-small-regular__q832t`,"Text--medium-l--variant-small-regular-italic":`Text--medium-l--variant-small-regular-italic__rh-C-`,"Text--medium-l--variant-small-semibold":`Text--medium-l--variant-small-semibold__NyQYA`,"Text--medium-l--variant-small-semibold-italic":`Text--medium-l--variant-small-semibold-italic__D8qtH`,"Text--medium-l--variant-default-regular":`Text--medium-l--variant-default-regular__AZhpM`,"Text--medium-l--variant-default-regular-italic":`Text--medium-l--variant-default-regular-italic__zLCku`,"Text--medium-l--variant-default-semibold":`Text--medium-l--variant-default-semibold__3FVwk`,"Text--medium-l--variant-default-semibold-italic":`Text--medium-l--variant-default-semibold-italic__dmKNV`,"Text--medium-l--variant-large-regular":`Text--medium-l--variant-large-regular__4JxNh`,"Text--medium-l--variant-large-regular-italic":`Text--medium-l--variant-large-regular-italic__wwnsG`,"Text--medium-l--variant-large-semibold":`Text--medium-l--variant-large-semibold__WR7vo`,"Text--medium-l--variant-large-semibold-italic":`Text--medium-l--variant-large-semibold-italic__lLaF0`,"Text--wide-s--variant-caption-regular":`Text--wide-s--variant-caption-regular__tfrra`,"Text--wide-s--variant-caption-semibold":`Text--wide-s--variant-caption-semibold__pcHWg`,"Text--wide-s--variant-small-regular":`Text--wide-s--variant-small-regular__qVuSz`,"Text--wide-s--variant-small-regular-italic":`Text--wide-s--variant-small-regular-italic__paUwS`,"Text--wide-s--variant-small-semibold":`Text--wide-s--variant-small-semibold__--T3V`,"Text--wide-s--variant-small-semibold-italic":`Text--wide-s--variant-small-semibold-italic__YLx3p`,"Text--wide-s--variant-default-regular":`Text--wide-s--variant-default-regular__7nbdM`,"Text--wide-s--variant-default-regular-italic":`Text--wide-s--variant-default-regular-italic__ohsSu`,"Text--wide-s--variant-default-semibold":`Text--wide-s--variant-default-semibold__-Q2Gu`,"Text--wide-s--variant-default-semibold-italic":`Text--wide-s--variant-default-semibold-italic__v6oao`,"Text--wide-s--variant-large-regular":`Text--wide-s--variant-large-regular__lrWEc`,"Text--wide-s--variant-large-regular-italic":`Text--wide-s--variant-large-regular-italic__v55x9`,"Text--wide-s--variant-large-semibold":`Text--wide-s--variant-large-semibold__FV1hE`,"Text--wide-s--variant-large-semibold-italic":`Text--wide-s--variant-large-semibold-italic__8Xjhy`,"Text--wide-l--variant-caption-regular":`Text--wide-l--variant-caption-regular__RmVMU`,"Text--wide-l--variant-caption-semibold":`Text--wide-l--variant-caption-semibold__nWA4i`,"Text--wide-l--variant-small-regular":`Text--wide-l--variant-small-regular__jofJW`,"Text--wide-l--variant-small-regular-italic":`Text--wide-l--variant-small-regular-italic__vt9vP`,"Text--wide-l--variant-small-semibold":`Text--wide-l--variant-small-semibold__jSimt`,"Text--wide-l--variant-small-semibold-italic":`Text--wide-l--variant-small-semibold-italic__CPy01`,"Text--wide-l--variant-default-regular":`Text--wide-l--variant-default-regular__zGDH3`,"Text--wide-l--variant-default-regular-italic":`Text--wide-l--variant-default-regular-italic__pj89w`,"Text--wide-l--variant-default-semibold":`Text--wide-l--variant-default-semibold__AzL9L`,"Text--wide-l--variant-default-semibold-italic":`Text--wide-l--variant-default-semibold-italic__4AXL6`,"Text--wide-l--variant-large-regular":`Text--wide-l--variant-large-regular__iIUQK`,"Text--wide-l--variant-large-regular-italic":`Text--wide-l--variant-large-regular-italic__OtyLZ`,"Text--wide-l--variant-large-semibold":`Text--wide-l--variant-large-semibold__ZTrU9`,"Text--wide-l--variant-large-semibold-italic":`Text--wide-l--variant-large-semibold-italic__UNwvX`,"Text--strong":`Text--strong__ig9qo`}})),x,S,C,w=t((()=>{o(),d(),a(),x=e(n(),1),f(),g(),m(),b(),S=l(),C=(0,x.forwardRef)(function({children:e,variant:t,tag:n=`p`,accent:a,strong:o,centered:l,dataset:d,className:f,...m},g){let v=t||`small-regular`,b=t?void 0:o,x=c(y,u.Text,[s(`variant`,v),r(`strong`,void 0,b)]),C=p(!a,a),w=_(l),T=[...x,...C,...w,f];return(0,S.jsx)(n,{...h(m),ref:g,className:T.join(` `),...i(d,{preplyDsComponent:u.Text}),children:e})});try{C.displayName=`Text`,C.__docgenInfo={description:``,displayName:`Text`,props:{variant:{defaultValue:null,description:``,name:`variant`,required:!1,type:{name:`enum`,value:[{value:`"caption-regular"`},{value:`"caption-semibold"`},{value:`"small-regular"`},{value:`"small-regular-italic"`},{value:`"small-semibold"`},{value:`"small-semibold-italic"`},{value:`"default-regular"`},{value:`"default-regular-italic"`},{value:`"default-semibold"`},{value:`"default-semibold-italic"`},{value:`"large-regular"`},{value:`"large-regular-italic"`},{value:`"large-semibold"`},{value:`"large-semibold-italic"`},{value:`ResponsiveProp<TextVariant>`}]}},accent:{defaultValue:null,description:``,name:`accent`,required:!1,type:{name:`enum`,value:[{value:`"placeholder"`},{value:`"primary"`},{value:`"secondary"`},{value:`"tertiary"`},{value:`"accentDark"`},{value:`"inverted"`},{value:`"positive"`},{value:`"info"`},{value:`"warning"`},{value:`"critical"`}]}},strong:{defaultValue:null,description:``,name:`strong`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},centered:{defaultValue:null,description:``,name:`centered`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`},{value:`ResponsiveProp<boolean>`}]}},tag:{defaultValue:{value:`p`},description:``,name:`tag`,required:!1,type:{name:`enum`,value:[{value:`"div"`},{value:`"p"`},{value:`"span"`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},className:{defaultValue:null,description:``,name:`className`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:`ref`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`},{value:`(instance: HTMLParagraphElement | null) => void`},{value:`RefObject<HTMLParagraphElement>`}]}},key:{defaultValue:null,description:``,name:`key`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`},{value:`number`},{value:`bigint`}]}}}}}catch{}}));export{w as n,C as t};
1
+ import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{_ as r,ht as i,t as a,w as o,x as s,y as c}from"./dist-DtfJeYQK.js";import{t as l}from"./jsx-runtime-C2wGStra.js";import{n as u,t as d}from"./dist-Cc1j9Pjk.js";import{n as f,t as p}from"./text-accent-CfNKCcRq.js";import{n as m,t as h}from"./filterAttributesPassedByRadixUIAtRuntime-CGiuUnR2.js";import{n as g,t as _}from"./text-centered-D7Kg4Wt0.js";var v,y,b=t((()=>{v=`Text__BD7-C`,y={Text:v,"Text--variant-caption-regular":`Text--variant-caption-regular__-ndGs`,"Text--variant-caption-semibold":`Text--variant-caption-semibold__-q81F`,"Text--variant-small-regular":`Text--variant-small-regular__V98UM`,"Text--variant-small-regular-italic":`Text--variant-small-regular-italic__Ii9YT`,"Text--variant-small-semibold":`Text--variant-small-semibold__mTXWU`,"Text--variant-small-semibold-italic":`Text--variant-small-semibold-italic__N2bGq`,"Text--variant-default-regular":`Text--variant-default-regular__GBkvP`,"Text--variant-default-regular-italic":`Text--variant-default-regular-italic__h8iGC`,"Text--variant-default-semibold":`Text--variant-default-semibold__BREV0`,"Text--variant-default-semibold-italic":`Text--variant-default-semibold-italic__0qH9S`,"Text--variant-large-regular":`Text--variant-large-regular__IFXFs`,"Text--variant-large-regular-italic":`Text--variant-large-regular-italic__PBExC`,"Text--variant-large-semibold":`Text--variant-large-semibold__iyV1O`,"Text--variant-large-semibold-italic":`Text--variant-large-semibold-italic__wKF6g`,"Text--narrow-l--variant-caption-regular":`Text--narrow-l--variant-caption-regular__nznL0`,"Text--narrow-l--variant-caption-semibold":`Text--narrow-l--variant-caption-semibold__l0VQQ`,"Text--narrow-l--variant-small-regular":`Text--narrow-l--variant-small-regular__VMmD6`,"Text--narrow-l--variant-small-regular-italic":`Text--narrow-l--variant-small-regular-italic__nGADF`,"Text--narrow-l--variant-small-semibold":`Text--narrow-l--variant-small-semibold__BQ1W4`,"Text--narrow-l--variant-small-semibold-italic":`Text--narrow-l--variant-small-semibold-italic__7UUeq`,"Text--narrow-l--variant-default-regular":`Text--narrow-l--variant-default-regular__pVzcT`,"Text--narrow-l--variant-default-regular-italic":`Text--narrow-l--variant-default-regular-italic__RPEsW`,"Text--narrow-l--variant-default-semibold":`Text--narrow-l--variant-default-semibold__AHeOG`,"Text--narrow-l--variant-default-semibold-italic":`Text--narrow-l--variant-default-semibold-italic__Dhmq4`,"Text--narrow-l--variant-large-regular":`Text--narrow-l--variant-large-regular__vY6mg`,"Text--narrow-l--variant-large-regular-italic":`Text--narrow-l--variant-large-regular-italic__Jypdh`,"Text--narrow-l--variant-large-semibold":`Text--narrow-l--variant-large-semibold__XaN0f`,"Text--narrow-l--variant-large-semibold-italic":`Text--narrow-l--variant-large-semibold-italic__5DrpP`,"Text--medium-s--variant-caption-regular":`Text--medium-s--variant-caption-regular__QIFIm`,"Text--medium-s--variant-caption-semibold":`Text--medium-s--variant-caption-semibold__qA3XV`,"Text--medium-s--variant-small-regular":`Text--medium-s--variant-small-regular__Fujae`,"Text--medium-s--variant-small-regular-italic":`Text--medium-s--variant-small-regular-italic__jaDXd`,"Text--medium-s--variant-small-semibold":`Text--medium-s--variant-small-semibold__9pYQr`,"Text--medium-s--variant-small-semibold-italic":`Text--medium-s--variant-small-semibold-italic__-ac-Q`,"Text--medium-s--variant-default-regular":`Text--medium-s--variant-default-regular__jyyg6`,"Text--medium-s--variant-default-regular-italic":`Text--medium-s--variant-default-regular-italic__FzmWH`,"Text--medium-s--variant-default-semibold":`Text--medium-s--variant-default-semibold__zfein`,"Text--medium-s--variant-default-semibold-italic":`Text--medium-s--variant-default-semibold-italic__pwAKv`,"Text--medium-s--variant-large-regular":`Text--medium-s--variant-large-regular__UQstF`,"Text--medium-s--variant-large-regular-italic":`Text--medium-s--variant-large-regular-italic__BGPjz`,"Text--medium-s--variant-large-semibold":`Text--medium-s--variant-large-semibold__ZTsh3`,"Text--medium-s--variant-large-semibold-italic":`Text--medium-s--variant-large-semibold-italic__QsDHO`,"Text--medium-l--variant-caption-regular":`Text--medium-l--variant-caption-regular__neFtF`,"Text--medium-l--variant-caption-semibold":`Text--medium-l--variant-caption-semibold__96Bxj`,"Text--medium-l--variant-small-regular":`Text--medium-l--variant-small-regular__q832t`,"Text--medium-l--variant-small-regular-italic":`Text--medium-l--variant-small-regular-italic__rh-C-`,"Text--medium-l--variant-small-semibold":`Text--medium-l--variant-small-semibold__NyQYA`,"Text--medium-l--variant-small-semibold-italic":`Text--medium-l--variant-small-semibold-italic__D8qtH`,"Text--medium-l--variant-default-regular":`Text--medium-l--variant-default-regular__AZhpM`,"Text--medium-l--variant-default-regular-italic":`Text--medium-l--variant-default-regular-italic__zLCku`,"Text--medium-l--variant-default-semibold":`Text--medium-l--variant-default-semibold__3FVwk`,"Text--medium-l--variant-default-semibold-italic":`Text--medium-l--variant-default-semibold-italic__dmKNV`,"Text--medium-l--variant-large-regular":`Text--medium-l--variant-large-regular__4JxNh`,"Text--medium-l--variant-large-regular-italic":`Text--medium-l--variant-large-regular-italic__wwnsG`,"Text--medium-l--variant-large-semibold":`Text--medium-l--variant-large-semibold__WR7vo`,"Text--medium-l--variant-large-semibold-italic":`Text--medium-l--variant-large-semibold-italic__lLaF0`,"Text--wide-s--variant-caption-regular":`Text--wide-s--variant-caption-regular__tfrra`,"Text--wide-s--variant-caption-semibold":`Text--wide-s--variant-caption-semibold__pcHWg`,"Text--wide-s--variant-small-regular":`Text--wide-s--variant-small-regular__qVuSz`,"Text--wide-s--variant-small-regular-italic":`Text--wide-s--variant-small-regular-italic__paUwS`,"Text--wide-s--variant-small-semibold":`Text--wide-s--variant-small-semibold__--T3V`,"Text--wide-s--variant-small-semibold-italic":`Text--wide-s--variant-small-semibold-italic__YLx3p`,"Text--wide-s--variant-default-regular":`Text--wide-s--variant-default-regular__7nbdM`,"Text--wide-s--variant-default-regular-italic":`Text--wide-s--variant-default-regular-italic__ohsSu`,"Text--wide-s--variant-default-semibold":`Text--wide-s--variant-default-semibold__-Q2Gu`,"Text--wide-s--variant-default-semibold-italic":`Text--wide-s--variant-default-semibold-italic__v6oao`,"Text--wide-s--variant-large-regular":`Text--wide-s--variant-large-regular__lrWEc`,"Text--wide-s--variant-large-regular-italic":`Text--wide-s--variant-large-regular-italic__v55x9`,"Text--wide-s--variant-large-semibold":`Text--wide-s--variant-large-semibold__FV1hE`,"Text--wide-s--variant-large-semibold-italic":`Text--wide-s--variant-large-semibold-italic__8Xjhy`,"Text--wide-l--variant-caption-regular":`Text--wide-l--variant-caption-regular__RmVMU`,"Text--wide-l--variant-caption-semibold":`Text--wide-l--variant-caption-semibold__nWA4i`,"Text--wide-l--variant-small-regular":`Text--wide-l--variant-small-regular__jofJW`,"Text--wide-l--variant-small-regular-italic":`Text--wide-l--variant-small-regular-italic__vt9vP`,"Text--wide-l--variant-small-semibold":`Text--wide-l--variant-small-semibold__jSimt`,"Text--wide-l--variant-small-semibold-italic":`Text--wide-l--variant-small-semibold-italic__CPy01`,"Text--wide-l--variant-default-regular":`Text--wide-l--variant-default-regular__zGDH3`,"Text--wide-l--variant-default-regular-italic":`Text--wide-l--variant-default-regular-italic__pj89w`,"Text--wide-l--variant-default-semibold":`Text--wide-l--variant-default-semibold__AzL9L`,"Text--wide-l--variant-default-semibold-italic":`Text--wide-l--variant-default-semibold-italic__4AXL6`,"Text--wide-l--variant-large-regular":`Text--wide-l--variant-large-regular__iIUQK`,"Text--wide-l--variant-large-regular-italic":`Text--wide-l--variant-large-regular-italic__OtyLZ`,"Text--wide-l--variant-large-semibold":`Text--wide-l--variant-large-semibold__ZTrU9`,"Text--wide-l--variant-large-semibold-italic":`Text--wide-l--variant-large-semibold-italic__UNwvX`,"Text--strong":`Text--strong__ig9qo`}})),x,S,C,w=t((()=>{o(),d(),a(),x=e(n(),1),f(),g(),m(),b(),S=l(),C=(0,x.forwardRef)(function({children:e,variant:t,tag:n=`p`,accent:a,strong:o,centered:l,dataset:d,className:f,...m},g){let v=t||`small-regular`,b=t?void 0:o,x=c(y,u.Text,[s(`variant`,v),r(`strong`,void 0,b)]),C=p(!a,a),w=_(l),T=[...x,...C,...w,f];return(0,S.jsx)(n,{...h(m),ref:g,className:T.join(` `),...i(d,{preplyDsComponent:u.Text}),children:e})});try{C.displayName=`Text`,C.__docgenInfo={description:``,displayName:`Text`,props:{variant:{defaultValue:null,description:``,name:`variant`,required:!1,type:{name:`enum`,value:[{value:`"caption-regular"`},{value:`"caption-semibold"`},{value:`"small-regular"`},{value:`"small-regular-italic"`},{value:`"small-semibold"`},{value:`"small-semibold-italic"`},{value:`"default-regular"`},{value:`"default-regular-italic"`},{value:`"default-semibold"`},{value:`"default-semibold-italic"`},{value:`"large-regular"`},{value:`"large-regular-italic"`},{value:`"large-semibold"`},{value:`"large-semibold-italic"`},{value:`ResponsiveProp<TextVariant>`}]}},accent:{defaultValue:null,description:``,name:`accent`,required:!1,type:{name:`enum`,value:[{value:`"primary"`},{value:`"secondary"`},{value:`"tertiary"`},{value:`"critical"`},{value:`"inverted"`},{value:`"info"`},{value:`"positive"`},{value:`"warning"`},{value:`"accentDark"`},{value:`"placeholder"`}]}},strong:{defaultValue:null,description:``,name:`strong`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},centered:{defaultValue:null,description:``,name:`centered`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`},{value:`ResponsiveProp<boolean>`}]}},tag:{defaultValue:{value:`p`},description:``,name:`tag`,required:!1,type:{name:`enum`,value:[{value:`"div"`},{value:`"p"`},{value:`"span"`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},className:{defaultValue:null,description:``,name:`className`,required:!1,type:{name:`enum`,value:[{value:`string`}]}}}}}catch{}}));export{w as n,C as t};
@@ -1,4 +1,4 @@
1
- import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{C as r,J as i,K as a,Y as o,n as s,t as c,tt as l,w as u}from"./dist-DtfJeYQK.js";import{t as d}from"./jsx-runtime-C2wGStra.js";import{n as f,t as p}from"./Text-B288uCKD.js";import{r as m,t as h}from"./storybook-utils-Dnw8-7zP.js";function g({variant:e}){let[t,n]=e.split(`-`),r=s(l[t][n].body.fontSize);return(0,_.jsxs)(`tr`,{children:[(0,_.jsx)(`td`,{style:{paddingRight:16,whiteSpace:`nowrap`,textAlign:`right`},children:(0,_.jsx)(p,{variant:e,children:e},e)}),(0,_.jsx)(`td`,{children:r})]})}var _,v,y,b,x,S,C;t((()=>{u(),c(),e(n(),1),f(),h(),_=d(),v={title:`components/Text`,component:p,argTypes:{variant:{description:m},centered:{description:m}}},y=()=>(0,_.jsx)(p,{children:`Lorem ipsum`}),y.tags=[`!test`],y.parameters={chromatic:{disableSnapshot:!0}},b=()=>{let e=r(o.background.primaryInverted);return(0,_.jsx)(_.Fragment,{children:a.map(({id:t})=>(0,_.jsx)(`div`,{style:{backgroundColor:[`inverted`,`branded`,`selected`].includes(t)?e:void 0},children:(0,_.jsx)(p,{accent:t,children:t})},t))})},x=()=>(0,_.jsxs)(`table`,{style:{borderCollapse:`separate`,borderSpacing:`16px`},children:[(0,_.jsx)(`thead`,{children:(0,_.jsxs)(`tr`,{children:[(0,_.jsx)(`th`,{children:`Variant`}),(0,_.jsx)(`th`,{children:`font-size`})]})}),i.map(({id:e})=>(0,_.jsx)(g,{variant:e},e))]}),S={parameters:{chromatic:{disableSnapshot:!0}},decorators:[(e,{args:t})=>(0,_.jsx)(`div`,{style:{backgroundColor:t.accent===`inverted`?`black`:void 0},children:e()})],args:{children:`Lorem ipsum dolor sit amet`,variant:`default-regular`,dataset:{qaid:`text`}},argTypes:{dataset:{control:`object`},children:{control:`text`},variant:{control:`select`},accent:{control:`select`},centered:{control:`boolean`},strong:{table:{disable:!0}}}},y.parameters={...y.parameters,docs:{...y.parameters?.docs,source:{originalSource:`() => <Text>Lorem ipsum</Text>`,...y.parameters?.docs?.source}}},b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`() => {
1
+ import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{C as r,J as i,K as a,Y as o,n as s,t as c,tt as l,w as u}from"./dist-DtfJeYQK.js";import{t as d}from"./jsx-runtime-C2wGStra.js";import{n as f,t as p}from"./Text-Bj49UVGS.js";import{r as m,t as h}from"./storybook-utils-BfrlMSeG.js";function g({variant:e}){let[t,n]=e.split(`-`),r=s(l[t][n].body.fontSize);return(0,_.jsxs)(`tr`,{children:[(0,_.jsx)(`td`,{style:{paddingRight:16,whiteSpace:`nowrap`,textAlign:`right`},children:(0,_.jsx)(p,{variant:e,children:e},e)}),(0,_.jsx)(`td`,{children:r})]})}var _,v,y,b,x,S,C;t((()=>{u(),c(),e(n(),1),f(),h(),_=d(),v={title:`components/Text`,component:p,argTypes:{variant:{description:m},centered:{description:m}}},y=()=>(0,_.jsx)(p,{children:`Lorem ipsum`}),y.tags=[`!test`],y.parameters={chromatic:{disableSnapshot:!0}},b=()=>{let e=r(o.background.primaryInverted);return(0,_.jsx)(_.Fragment,{children:a.map(({id:t})=>(0,_.jsx)(`div`,{style:{backgroundColor:[`inverted`,`branded`,`selected`].includes(t)?e:void 0},children:(0,_.jsx)(p,{accent:t,children:t})},t))})},x=()=>(0,_.jsxs)(`table`,{style:{borderCollapse:`separate`,borderSpacing:`16px`},children:[(0,_.jsx)(`thead`,{children:(0,_.jsxs)(`tr`,{children:[(0,_.jsx)(`th`,{children:`Variant`}),(0,_.jsx)(`th`,{children:`font-size`})]})}),i.map(({id:e})=>(0,_.jsx)(g,{variant:e},e))]}),S={parameters:{chromatic:{disableSnapshot:!0}},decorators:[(e,{args:t})=>(0,_.jsx)(`div`,{style:{backgroundColor:t.accent===`inverted`?`black`:void 0},children:e()})],args:{children:`Lorem ipsum dolor sit amet`,variant:`default-regular`,dataset:{qaid:`text`}},argTypes:{dataset:{control:`object`},children:{control:`text`},variant:{control:`select`},accent:{control:`select`},centered:{control:`boolean`},strong:{table:{disable:!0}}}},y.parameters={...y.parameters,docs:{...y.parameters?.docs,source:{originalSource:`() => <Text>Lorem ipsum</Text>`,...y.parameters?.docs?.source}}},b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`() => {
2
2
  const grey = getTokenVar(color.background.primaryInverted);
3
3
  return <>
4
4
  {TEXT_ACCENT_OPTIONS.map(({
@@ -0,0 +1,6 @@
1
+ import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./dist-Cc1j9Pjk.js";import{n as o,t as s}from"./FormControl-C_Mh5dfi.js";import{r as c,t as l}from"./Input-D6_jI5Uh.js";var u,d,f,p=t((()=>{u=e(n(),1),o(),l(),a(),d=r(),f=(0,u.forwardRef)(function({id:e,label:t,description:n,error:r,required:a,type:o=`text`,inputDataset:l,dataset:u,hideLabel:f,onClick:p,hasError:m,useLegacyRequiredLabel:h,className:g,style:_,...v},y){return(0,d.jsx)(s,{id:e,label:t,description:n,error:r,hasError:m,required:a,dataset:u,hideLabel:f,onClick:p,useLegacyRequiredLabel:h,preplyDsComponent:i.TextField,children:(0,d.jsx)(c,{...v,type:o,ref:y,dataset:l})})});try{f.displayName=`TextField`,f.__docgenInfo={description:``,displayName:`TextField`,props:{id:{defaultValue:null,description:`The id to be passed to the input element.
2
+ If not provided, will be generated for accessibility purposes.`,name:`id`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},onClick:{defaultValue:null,description:``,name:`onClick`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler<HTMLDivElement> & MouseEventHandler<HTMLInputElement>`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},hasError:{defaultValue:null,description:"Whether the field has an error.\n@deprecated Use `error` prop to explicitly describe the error to users",name:`hasError`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},required:{defaultValue:null,description:`Indicates if the field is required. When false, adds a "Optional"
3
+ indicator next to the label.`,name:`required`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},label:{defaultValue:null,description:"The field label. This is needed for accessibility purposes, but can be\nhidden using the `hideLabel` prop.",name:`label`,required:!0,type:{name:`enum`,value:[{value:`undefined`},{value:`null`},{value:`string`},{value:`number`},{value:`false`},{value:`true`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`},{value:`Iterable<ReactNode>`},{value:`ReactPortal`}]}},hideLabel:{defaultValue:null,description:"Use this to hide the `label` visually, but keep it in the accessibility\ntree.",name:`hideLabel`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},description:{defaultValue:null,description:`Additional descriptive text that appears below the input field
4
+ to provide more context or instructions to the user.`,name:`description`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`},{value:`number`},{value:`false`},{value:`true`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`},{value:`Iterable<ReactNode>`},{value:`ReactPortal`}]}},error:{defaultValue:null,description:`Error message to display when the field has an invalid value.`,name:`error`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`},{value:`number`},{value:`false`},{value:`true`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`},{value:`Iterable<ReactNode>`},{value:`ReactPortal`}]}},useLegacyRequiredLabel:{defaultValue:null,description:`When true, adds a "Required" indicator next to the label for the required fields.
5
+ When false, adds a "Optional" indicator next to the label for the optional fields instead.
6
+ @deprecated This is a temporary solution for gradual migration to the "Optional" label.`,name:`useLegacyRequiredLabel`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},onValueChange:{defaultValue:null,description:``,name:`onValueChange`,required:!1,type:{name:`enum`,value:[{value:`(value: string) => void`}]}},icon:{defaultValue:null,description:``,name:`icon`,required:!1,type:{name:`enum`,value:[{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}},button:{defaultValue:null,description:``,name:`button`,required:!1,type:{name:`enum`,value:[{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}},value:{defaultValue:null,description:``,name:`value`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},defaultValue:{defaultValue:null,description:``,name:`defaultValue`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},type:{defaultValue:{value:`text`},description:``,name:`type`,required:!1,type:{name:`enum`,value:[{value:`"url"`},{value:`"text"`},{value:`"search"`},{value:`"email"`},{value:`"tel"`}]}},autoComplete:{defaultValue:null,description:``,name:`autoComplete`,required:!1,type:{name:`enum`,value:[{value:`"url"`},{value:`"name"`},{value:`"off"`},{value:`"on"`},{value:`"email"`},{value:`"tel"`},{value:`"username"`},{value:`"language"`}]}},inputDataset:{defaultValue:null,description:``,name:`inputDataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}}}}}catch{}}));export{p as n,f as t};
@@ -1,4 +1,4 @@
1
- import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Icon-DwVTLcDP.js";import{n as o,t as s}from"./FieldButton-DjbyU7Ud.js";import{n as c,t as l}from"./TextField-Ch_1Y9U9.js";import{n as u,t as d}from"./TokyoUIAttach-jKVaxnL7.js";import{n as f,t as p}from"./TokyoUIUser-dpK4hO2N.js";var m,h,g,_,v,y,b,x,S,C,w,T,E,D,O,k,A,j,M;t((()=>{m=e(n(),1),c(),f(),u(),i(),o(),h=r(),{action:g}=__STORYBOOK_MODULE_ACTIONS__,{expect:_,userEvent:v,within:y,fn:b}=__STORYBOOK_MODULE_TEST__,x={title:`components/TextField`,component:l,args:{name:`fullName`,label:`Full name`,defaultValue:``,placeholder:`John Doe`,dataset:{testid:`field`,foo:`bar`},inputDataset:{testid:`input`,foo:`bar`},onChange:b(),onValueChange:b(),onBlur:b(),onFocus:b(),onClick:b(),onCopy:b(),onKeyDown:b(),onKeyUp:b(),onPaste:b()}},S={play:async({canvasElement:e,step:t,args:n})=>{let r=y(e),i=r.getByTestId(`field`),a=r.getByTestId(`input`);await t(`it should render correct label`,async()=>{_(y(i).getByTestId(`label`)).toHaveTextContent(`Full name • Optional`),_(a).toHaveAccessibleName(`Full name`)}),await t(`it should call onFocus when the input is focused`,async()=>{a.focus(),_(n.onFocus).toHaveBeenCalled()}),await t(`it should call callback when the value changes`,async()=>{await v.type(a,`John Doe`),_(n.onValueChange).toHaveBeenCalledWith(`John Doe`),_(n.onChange).toHaveBeenCalled()}),await t(`it should call onBlur when the input is blurred`,async()=>{await v.keyboard(`{tab}`),_(n.onBlur).toHaveBeenCalled()}),await t(`it should render the dataset props`,async()=>{_(i).toHaveAttribute(`data-testid`,`field`),_(i).toHaveAttribute(`data-foo`,`bar`),_(a).toHaveAttribute(`data-testid`,`input`),_(a).toHaveAttribute(`data-foo`,`bar`)})}},C={render:function(e){let[t,n]=(0,m.useState)(e.value);return(0,h.jsx)(l,{...e,value:t,onChange:t=>{n(t.target.value),e.onChange?.(t)}})},args:{label:`Controlled TextField`,placeholder:`Type something...`,value:`Initial value`,defaultValue:void 0},play:async({canvas:e,step:t})=>{await t(`it should render the correct initial value`,async()=>{await _(e.getByTestId(`input`)).toHaveValue(`Initial value`)}),await t(`it should update the value when the user types`,async()=>{let t=e.getByTestId(`input`);await v.type(t,` - New controlled value`),_(t).toHaveValue(`Initial value - New controlled value`)})}},w={args:{icon:(0,h.jsx)(a,{svg:p,dataset:{testid:`icon`}})},play:async({canvas:e,step:t})=>{await t(`it should render the icon`,async()=>{_(e.getByTestId(`icon`)).toBeInTheDocument()})}},T={args:{description:`Enter your full legal name`},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`),r=e.getByTestId(`description`);await t(`it should render the description`,async()=>{_(n).toHaveAccessibleDescription(`Enter your full legal name`),_(r).toHaveTextContent(`Enter your full legal name`)})}},E={args:{required:!0},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`),r=e.getByTestId(`label`);await t(`it should render correct label`,async()=>{_(n).toHaveAccessibleName(`Full name`),_(r).toHaveTextContent(`Full name`)}),await t(`it should render required attribute`,async()=>{_(n).toHaveAttribute(`required`)})}},D={args:{hideLabel:!0},play:async({canvas:e,step:t})=>{await t(`it should render correct a11y label`,async()=>{_(e.getByTestId(`input`)).toHaveAccessibleName(`Full name`)})}},O={args:{error:`This is an error message`},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`),r=e.getByTestId(`error`);await t(`it should render the error message`,async()=>{_(n).toHaveAccessibleErrorMessage(`This is an error message`),_(r).toHaveTextContent(`This is an error message`)})}},k={args:{disabled:!0},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`);await t(`it should render the disabled input`,async()=>{_(n).toHaveAttribute(`disabled`)})}},A={args:{readOnly:!0},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`);await t(`it should render the read only input`,async()=>{_(n).toHaveAttribute(`readonly`)})}},j={parameters:{chromatic:{disableSnapshot:!0}},args:{label:`Full name`,placeholder:`John Doe`,description:`Enter your full legal name`},argTypes:{label:{control:`text`},placeholder:{control:`text`},description:{control:`text`},error:{control:`text`},value:{control:`text`},defaultValue:{control:`text`},inputDataset:{control:`object`},dataset:{control:`object`},id:{control:`text`},required:{control:`boolean`},hideLabel:{control:`boolean`},name:{control:`text`},disabled:{control:`boolean`},icon:{options:[`None`,`With Icon`],mapping:{None:void 0,"With Icon":p},control:`select`},button:{options:[`None`,`With Button`],mapping:{None:void 0,"With Button":(0,h.jsx)(s,{svg:d,assistiveText:`Do the thing`,onClick:g(`field button clicked`)})},control:`select`},readOnly:{control:`boolean`},maxLength:{control:`number`},hasError:{table:{disable:!0}}}},S.parameters={...S.parameters,docs:{...S.parameters?.docs,source:{originalSource:`{
1
+ import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Icon-C-oDFSRH.js";import{n as o,t as s}from"./FieldButton-SkKd22gq.js";import{n as c,t as l}from"./TextField-B4F8szIu.js";import{n as u,t as d}from"./TokyoUIAttach-jKVaxnL7.js";import{n as f,t as p}from"./TokyoUIUser-dpK4hO2N.js";var m,h,g,_,v,y,b,x,S,C,w,T,E,D,O,k,A,j,M;t((()=>{m=e(n(),1),c(),f(),u(),i(),o(),h=r(),{action:g}=__STORYBOOK_MODULE_ACTIONS__,{expect:_,userEvent:v,within:y,fn:b}=__STORYBOOK_MODULE_TEST__,x={title:`components/TextField`,component:l,args:{name:`fullName`,label:`Full name`,defaultValue:``,placeholder:`John Doe`,dataset:{testid:`field`,foo:`bar`},inputDataset:{testid:`input`,foo:`bar`},onChange:b(),onValueChange:b(),onBlur:b(),onFocus:b(),onClick:b(),onCopy:b(),onKeyDown:b(),onKeyUp:b(),onPaste:b()}},S={play:async({canvasElement:e,step:t,args:n})=>{let r=y(e),i=r.getByTestId(`field`),a=r.getByTestId(`input`);await t(`it should render correct label`,async()=>{_(y(i).getByTestId(`label`)).toHaveTextContent(`Full name • Optional`),_(a).toHaveAccessibleName(`Full name`)}),await t(`it should call onFocus when the input is focused`,async()=>{a.focus(),_(n.onFocus).toHaveBeenCalled()}),await t(`it should call callback when the value changes`,async()=>{await v.type(a,`John Doe`),_(n.onValueChange).toHaveBeenCalledWith(`John Doe`),_(n.onChange).toHaveBeenCalled()}),await t(`it should call onBlur when the input is blurred`,async()=>{await v.keyboard(`{tab}`),_(n.onBlur).toHaveBeenCalled()}),await t(`it should render the dataset props`,async()=>{_(i).toHaveAttribute(`data-testid`,`field`),_(i).toHaveAttribute(`data-foo`,`bar`),_(a).toHaveAttribute(`data-testid`,`input`),_(a).toHaveAttribute(`data-foo`,`bar`)})}},C={render:function(e){let[t,n]=(0,m.useState)(e.value);return(0,h.jsx)(l,{...e,value:t,onChange:t=>{n(t.target.value),e.onChange?.(t)}})},args:{label:`Controlled TextField`,placeholder:`Type something...`,value:`Initial value`,defaultValue:void 0},play:async({canvas:e,step:t})=>{await t(`it should render the correct initial value`,async()=>{await _(e.getByTestId(`input`)).toHaveValue(`Initial value`)}),await t(`it should update the value when the user types`,async()=>{let t=e.getByTestId(`input`);await v.type(t,` - New controlled value`),_(t).toHaveValue(`Initial value - New controlled value`)})}},w={args:{icon:(0,h.jsx)(a,{svg:p,dataset:{testid:`icon`}})},play:async({canvas:e,step:t})=>{await t(`it should render the icon`,async()=>{_(e.getByTestId(`icon`)).toBeInTheDocument()})}},T={args:{description:`Enter your full legal name`},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`),r=e.getByTestId(`description`);await t(`it should render the description`,async()=>{_(n).toHaveAccessibleDescription(`Enter your full legal name`),_(r).toHaveTextContent(`Enter your full legal name`)})}},E={args:{required:!0},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`),r=e.getByTestId(`label`);await t(`it should render correct label`,async()=>{_(n).toHaveAccessibleName(`Full name`),_(r).toHaveTextContent(`Full name`)}),await t(`it should render required attribute`,async()=>{_(n).toHaveAttribute(`required`)})}},D={args:{hideLabel:!0},play:async({canvas:e,step:t})=>{await t(`it should render correct a11y label`,async()=>{_(e.getByTestId(`input`)).toHaveAccessibleName(`Full name`)})}},O={args:{error:`This is an error message`},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`),r=e.getByTestId(`error`);await t(`it should render the error message`,async()=>{_(n).toHaveAccessibleErrorMessage(`This is an error message`),_(r).toHaveTextContent(`This is an error message`)})}},k={args:{disabled:!0},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`);await t(`it should render the disabled input`,async()=>{_(n).toHaveAttribute(`disabled`)})}},A={args:{readOnly:!0},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`);await t(`it should render the read only input`,async()=>{_(n).toHaveAttribute(`readonly`)})}},j={parameters:{chromatic:{disableSnapshot:!0}},args:{label:`Full name`,placeholder:`John Doe`,description:`Enter your full legal name`},argTypes:{label:{control:`text`},placeholder:{control:`text`},description:{control:`text`},error:{control:`text`},value:{control:`text`},defaultValue:{control:`text`},inputDataset:{control:`object`},dataset:{control:`object`},id:{control:`text`},required:{control:`boolean`},hideLabel:{control:`boolean`},name:{control:`text`},disabled:{control:`boolean`},icon:{options:[`None`,`With Icon`],mapping:{None:void 0,"With Icon":p},control:`select`},button:{options:[`None`,`With Button`],mapping:{None:void 0,"With Button":(0,h.jsx)(s,{svg:d,assistiveText:`Do the thing`,onClick:g(`field button clicked`)})},control:`select`},readOnly:{control:`boolean`},maxLength:{control:`number`},hasError:{table:{disable:!0}}}},S.parameters={...S.parameters,docs:{...S.parameters?.docs,source:{originalSource:`{
2
2
  play: async ({
3
3
  canvasElement,
4
4
  step,
@@ -1 +1 @@
1
- import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{ht as r,lt as i,t as a,ut as o,w as s,x as c,y as l}from"./dist-DtfJeYQK.js";import{t as u}from"./jsx-runtime-C2wGStra.js";import{n as d,t as f}from"./dist-Cc1j9Pjk.js";import{n as p,t as m}from"./filterAttributesPassedByRadixUIAtRuntime-CGiuUnR2.js";var h,g,_=t((()=>{h=`TextHighlighted__ErxU-`,g={TextHighlighted:h,"TextHighlighted--highlight-blue":`TextHighlighted--highlight-blue__3H-tS`,"TextHighlighted--highlight-green":`TextHighlighted--highlight-green__PXiKm`,"TextHighlighted--highlight-primary":`TextHighlighted--highlight-primary__cKWhc`,"TextHighlighted--highlight-secondary":`TextHighlighted--highlight-secondary__24A04`,"TextHighlighted--highlight-tertiary":`TextHighlighted--highlight-tertiary__gkbLj`,"TextHighlighted--highlight-accent":`TextHighlighted--highlight-accent__DsZKF`,"TextHighlighted--highlight-positive":`TextHighlighted--highlight-positive__Tag8x`,"TextHighlighted--highlight-info":`TextHighlighted--highlight-info__Qqv0l`,"TextHighlighted--highlight-warning":`TextHighlighted--highlight-warning__--U9g`,"TextHighlighted--highlight-critical":`TextHighlighted--highlight-critical__D9jbb`}})),v,y,b,x=t((()=>{s(),f(),a(),v=e(n(),1),p(),_(),y=u(),b=(0,v.forwardRef)(function({children:e,highlight:t=i,tag:n=o,dataset:a,...s},u){let f=l(g,d.TextHighlighted,[c(`highlight`,t)]);return(0,y.jsx)(n,{...m(s),ref:u,className:f.join(` `),...r(a,{preplyDsComponent:d.TextHighlighted}),children:e})});try{b.displayName=`TextHighlighted`,b.__docgenInfo={description:``,displayName:`TextHighlighted`,props:{highlight:{defaultValue:{value:`green`},description:``,name:`highlight`,required:!1,type:{name:`enum`,value:[{value:`"accent"`},{value:`"primary"`},{value:`"secondary"`},{value:`"tertiary"`},{value:`"positive"`},{value:`"info"`},{value:`"warning"`},{value:`"critical"`},{value:`"blue"`},{value:`"green"`}]}},tag:{defaultValue:{value:`span`},description:``,name:`tag`,required:!1,type:{name:`enum`,value:[{value:`"em"`},{value:`"span"`},{value:`"strong"`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:`ref`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`},{value:`(instance: HTMLSpanElement | null) => void`},{value:`RefObject<HTMLSpanElement>`}]}},key:{defaultValue:null,description:``,name:`key`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`},{value:`number`},{value:`bigint`}]}}}}}catch{}}));export{x as n,b as t};
1
+ import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{ht as r,lt as i,t as a,ut as o,w as s,x as c,y as l}from"./dist-DtfJeYQK.js";import{t as u}from"./jsx-runtime-C2wGStra.js";import{n as d,t as f}from"./dist-Cc1j9Pjk.js";import{n as p,t as m}from"./filterAttributesPassedByRadixUIAtRuntime-CGiuUnR2.js";var h,g,_=t((()=>{h=`TextHighlighted__ErxU-`,g={TextHighlighted:h,"TextHighlighted--highlight-blue":`TextHighlighted--highlight-blue__3H-tS`,"TextHighlighted--highlight-green":`TextHighlighted--highlight-green__PXiKm`,"TextHighlighted--highlight-primary":`TextHighlighted--highlight-primary__cKWhc`,"TextHighlighted--highlight-secondary":`TextHighlighted--highlight-secondary__24A04`,"TextHighlighted--highlight-tertiary":`TextHighlighted--highlight-tertiary__gkbLj`,"TextHighlighted--highlight-accent":`TextHighlighted--highlight-accent__DsZKF`,"TextHighlighted--highlight-positive":`TextHighlighted--highlight-positive__Tag8x`,"TextHighlighted--highlight-info":`TextHighlighted--highlight-info__Qqv0l`,"TextHighlighted--highlight-warning":`TextHighlighted--highlight-warning__--U9g`,"TextHighlighted--highlight-critical":`TextHighlighted--highlight-critical__D9jbb`}})),v,y,b,x=t((()=>{s(),f(),a(),v=e(n(),1),p(),_(),y=u(),b=(0,v.forwardRef)(function({children:e,highlight:t=i,tag:n=o,dataset:a,...s},u){let f=l(g,d.TextHighlighted,[c(`highlight`,t)]);return(0,y.jsx)(n,{...m(s),ref:u,className:f.join(` `),...r(a,{preplyDsComponent:d.TextHighlighted}),children:e})});try{b.displayName=`TextHighlighted`,b.__docgenInfo={description:``,displayName:`TextHighlighted`,props:{highlight:{defaultValue:{value:`green`},description:``,name:`highlight`,required:!1,type:{name:`enum`,value:[{value:`"primary"`},{value:`"secondary"`},{value:`"tertiary"`},{value:`"critical"`},{value:`"accent"`},{value:`"info"`},{value:`"positive"`},{value:`"warning"`},{value:`"blue"`},{value:`"green"`}]}},tag:{defaultValue:{value:`span`},description:``,name:`tag`,required:!1,type:{name:`enum`,value:[{value:`"span"`},{value:`"em"`},{value:`"strong"`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}}}}}catch{}}));export{x as n,b as t};
@@ -1,4 +1,4 @@
1
- import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{q as r,w as i}from"./dist-DtfJeYQK.js";import{t as a}from"./jsx-runtime-C2wGStra.js";import{n as o,t as s}from"./Text-B288uCKD.js";import{n as c,t as l}from"./TextHighlighted-D0RJV5JS.js";var u,d,f,p,m,h;t((()=>{i(),e(n(),1),c(),o(),u=a(),d={title:`components/TextHighlighted`,component:l},f=()=>(0,u.jsx)(l,{children:`Lorem ipsum`}),f.tags=[`!test`],f.parameters={chromatic:{disableSnapshot:!0}},p=()=>(0,u.jsx)(`div`,{style:{display:`flex`,flexDirection:`column`,gap:`0.25rem`,width:`fit-content`},children:r.map(({id:e})=>(0,u.jsx)(l,{highlight:e,children:e},e))}),m={parameters:{chromatic:{disableSnapshot:!0}},render:e=>(0,u.jsxs)(s,{children:[`Lorem ipsum `,(0,u.jsx)(l,{...e})]}),args:{children:`dolor sit amet`,dataset:{qaid:`text-highlighted`}},argTypes:{dataset:{control:`object`}}},f.parameters={...f.parameters,docs:{...f.parameters?.docs,source:{originalSource:`() => <TextHighlighted>Lorem ipsum</TextHighlighted>`,...f.parameters?.docs?.source}}},p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`() => <div style={{
1
+ import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{q as r,w as i}from"./dist-DtfJeYQK.js";import{t as a}from"./jsx-runtime-C2wGStra.js";import{n as o,t as s}from"./Text-Bj49UVGS.js";import{n as c,t as l}from"./TextHighlighted-DPLkdIhv.js";var u,d,f,p,m,h;t((()=>{i(),e(n(),1),c(),o(),u=a(),d={title:`components/TextHighlighted`,component:l},f=()=>(0,u.jsx)(l,{children:`Lorem ipsum`}),f.tags=[`!test`],f.parameters={chromatic:{disableSnapshot:!0}},p=()=>(0,u.jsx)(`div`,{style:{display:`flex`,flexDirection:`column`,gap:`0.25rem`,width:`fit-content`},children:r.map(({id:e})=>(0,u.jsx)(l,{highlight:e,children:e},e))}),m={parameters:{chromatic:{disableSnapshot:!0}},render:e=>(0,u.jsxs)(s,{children:[`Lorem ipsum `,(0,u.jsx)(l,{...e})]}),args:{children:`dolor sit amet`,dataset:{qaid:`text-highlighted`}},argTypes:{dataset:{control:`object`}}},f.parameters={...f.parameters,docs:{...f.parameters?.docs,source:{originalSource:`() => <TextHighlighted>Lorem ipsum</TextHighlighted>`,...f.parameters?.docs?.source}}},p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`() => <div style={{
2
2
  display: 'flex',
3
3
  flexDirection: 'column',
4
4
  gap: '0.25rem',
@@ -1 +1 @@
1
- import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{_ as r,ft as i,ht as a,t as o,ut as s,w as c,x as l,y as u}from"./dist-DtfJeYQK.js";import{t as d}from"./jsx-runtime-C2wGStra.js";import{n as f,t as p}from"./dist-Cc1j9Pjk.js";import{n as m,t as h}from"./text-accent-CfNKCcRq.js";import{n as g,t as _}from"./filterAttributesPassedByRadixUIAtRuntime-CGiuUnR2.js";var v,y,b=t((()=>{v=`TextWeight__tMRbd`,y={TextWeight:v,"TextWeight--weight-normal":`TextWeight--weight-normal__M5PxM`,"TextWeight--weight-medium":`TextWeight--weight-medium__8f3CD`,"TextWeight--weight-bold":`TextWeight--weight-bold__MG-yF`}})),x,S,C=t((()=>{o(),b(),x=`TextWeight`,S=e=>u(y,x,[l(`weight`,e)])})),w,T,E=t((()=>{w=`TextInline__fMaqi`,T={TextInline:w,"TextInline--italic":`TextInline--italic__yG-Qj`}})),D,O,k,A=t((()=>{c(),p(),o(),D=e(n(),1),m(),C(),g(),E(),O=d(),k=(0,D.forwardRef)(function({children:e,accent:t,italic:n=!1,weight:o=i,tag:c=s,dataset:l,...d},p){let m=u(T,f.TextInline,[r(`italic`,void 0,n)]),g=h(!t,t),v=S(o),y=[...m,...g,...v];return(0,O.jsx)(c,{..._(d),ref:p,className:y.join(` `),...a(l,{preplyDsComponent:f.TextInline}),children:e})});try{k.displayName=`TextInline`,k.__docgenInfo={description:``,displayName:`TextInline`,props:{accent:{defaultValue:null,description:``,name:`accent`,required:!1,type:{name:`enum`,value:[{value:`"placeholder"`},{value:`"primary"`},{value:`"secondary"`},{value:`"tertiary"`},{value:`"accentDark"`},{value:`"inverted"`},{value:`"positive"`},{value:`"info"`},{value:`"warning"`},{value:`"critical"`}]}},weight:{defaultValue:{value:`normal`},description:``,name:`weight`,required:!1,type:{name:`enum`,value:[{value:`"bold"`},{value:`"medium"`},{value:`"normal"`}]}},italic:{defaultValue:{value:`false`},description:``,name:`italic`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},tag:{defaultValue:{value:`span`},description:``,name:`tag`,required:!1,type:{name:`enum`,value:[{value:`"em"`},{value:`"span"`},{value:`"strong"`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:`ref`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`},{value:`(instance: HTMLSpanElement | null) => void`},{value:`RefObject<HTMLSpanElement>`}]}},key:{defaultValue:null,description:``,name:`key`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`},{value:`number`},{value:`bigint`}]}}}}}catch{}}));export{A as n,k as t};
1
+ import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{_ as r,ft as i,ht as a,t as o,ut as s,w as c,x as l,y as u}from"./dist-DtfJeYQK.js";import{t as d}from"./jsx-runtime-C2wGStra.js";import{n as f,t as p}from"./dist-Cc1j9Pjk.js";import{n as m,t as h}from"./text-accent-CfNKCcRq.js";import{n as g,t as _}from"./filterAttributesPassedByRadixUIAtRuntime-CGiuUnR2.js";var v,y,b=t((()=>{v=`TextWeight__tMRbd`,y={TextWeight:v,"TextWeight--weight-normal":`TextWeight--weight-normal__M5PxM`,"TextWeight--weight-medium":`TextWeight--weight-medium__8f3CD`,"TextWeight--weight-bold":`TextWeight--weight-bold__MG-yF`}})),x,S,C=t((()=>{o(),b(),x=`TextWeight`,S=e=>u(y,x,[l(`weight`,e)])})),w,T,E=t((()=>{w=`TextInline__fMaqi`,T={TextInline:w,"TextInline--italic":`TextInline--italic__yG-Qj`}})),D,O,k,A=t((()=>{c(),p(),o(),D=e(n(),1),m(),C(),g(),E(),O=d(),k=(0,D.forwardRef)(function({children:e,accent:t,italic:n=!1,weight:o=i,tag:c=s,dataset:l,...d},p){let m=u(T,f.TextInline,[r(`italic`,void 0,n)]),g=h(!t,t),v=S(o),y=[...m,...g,...v];return(0,O.jsx)(c,{..._(d),ref:p,className:y.join(` `),...a(l,{preplyDsComponent:f.TextInline}),children:e})});try{k.displayName=`TextInline`,k.__docgenInfo={description:``,displayName:`TextInline`,props:{accent:{defaultValue:null,description:``,name:`accent`,required:!1,type:{name:`enum`,value:[{value:`"primary"`},{value:`"secondary"`},{value:`"tertiary"`},{value:`"critical"`},{value:`"inverted"`},{value:`"info"`},{value:`"positive"`},{value:`"warning"`},{value:`"accentDark"`},{value:`"placeholder"`}]}},weight:{defaultValue:{value:`normal`},description:``,name:`weight`,required:!1,type:{name:`enum`,value:[{value:`"bold"`},{value:`"medium"`},{value:`"normal"`}]}},italic:{defaultValue:{value:`false`},description:``,name:`italic`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},tag:{defaultValue:{value:`span`},description:``,name:`tag`,required:!1,type:{name:`enum`,value:[{value:`"span"`},{value:`"em"`},{value:`"strong"`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}}}}}catch{}}));export{A as n,k as t};
@@ -1,4 +1,4 @@
1
- import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{C as r,K as i,Y as a,t as o,w as s}from"./dist-DtfJeYQK.js";import{t as c}from"./jsx-runtime-C2wGStra.js";import{n as l,t as u}from"./Text-B288uCKD.js";import{n as d,t as f}from"./TextInline-CKVi4m4-.js";var p,m,h,g,_,v,y;t((()=>{e(n(),1),d(),l(),o(),s(),p=c(),m={title:`components/TextInline`,component:f},h=()=>(0,p.jsxs)(`p`,{children:[`Lorem `,(0,p.jsx)(f,{children:`ipsum`})]}),h.storyName=`TextInline`,g=()=>{let e=r(a.background.primaryInverted);return(0,p.jsx)(p.Fragment,{children:i.map(({id:t})=>(0,p.jsx)(`div`,{style:{backgroundColor:[`inverted`,`branded`,`selected`].includes(t)?e:void 0},children:(0,p.jsxs)(u,{accent:[`inverted`,`branded`,`selected`].includes(t)?`accentDark`:void 0,children:[`Lorem ipsum `,(0,p.jsx)(f,{accent:t,children:t})]})},t))})},_=()=>(0,p.jsx)(p.Fragment,{children:(0,p.jsxs)(u,{children:[`Lorem ipsum `,(0,p.jsx)(f,{italic:!0,children:`dolor sit amet`}),`.`]})}),v={parameters:{chromatic:{disableSnapshot:!0}},render:e=>(0,p.jsxs)(u,{children:[`Lorem ipsum `,(0,p.jsx)(f,{...e})]}),args:{children:`dolor sit amet`,accent:`accentDark`,tag:`span`,dataset:{qaid:`text-inline`}},argTypes:{dataset:{control:`object`},children:{control:`text`},italic:{control:`boolean`}}},h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`() => <p>
1
+ import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{C as r,K as i,Y as a,t as o,w as s}from"./dist-DtfJeYQK.js";import{t as c}from"./jsx-runtime-C2wGStra.js";import{n as l,t as u}from"./Text-Bj49UVGS.js";import{n as d,t as f}from"./TextInline-DVOlWF4R.js";var p,m,h,g,_,v,y;t((()=>{e(n(),1),d(),l(),o(),s(),p=c(),m={title:`components/TextInline`,component:f},h=()=>(0,p.jsxs)(`p`,{children:[`Lorem `,(0,p.jsx)(f,{children:`ipsum`})]}),h.storyName=`TextInline`,g=()=>{let e=r(a.background.primaryInverted);return(0,p.jsx)(p.Fragment,{children:i.map(({id:t})=>(0,p.jsx)(`div`,{style:{backgroundColor:[`inverted`,`branded`,`selected`].includes(t)?e:void 0},children:(0,p.jsxs)(u,{accent:[`inverted`,`branded`,`selected`].includes(t)?`accentDark`:void 0,children:[`Lorem ipsum `,(0,p.jsx)(f,{accent:t,children:t})]})},t))})},_=()=>(0,p.jsx)(p.Fragment,{children:(0,p.jsxs)(u,{children:[`Lorem ipsum `,(0,p.jsx)(f,{italic:!0,children:`dolor sit amet`}),`.`]})}),v={parameters:{chromatic:{disableSnapshot:!0}},render:e=>(0,p.jsxs)(u,{children:[`Lorem ipsum `,(0,p.jsx)(f,{...e})]}),args:{children:`dolor sit amet`,accent:`accentDark`,tag:`span`,dataset:{qaid:`text-inline`}},argTypes:{dataset:{control:`object`},children:{control:`text`},italic:{control:`boolean`}}},h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`() => <p>
2
2
  Lorem <TextInline>ipsum</TextInline>
3
3
  </p>`,...h.parameters?.docs?.source}}},g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`() => {
4
4
  const grey = getTokenVar(color.background.primaryInverted);
@@ -0,0 +1,6 @@
1
+ import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./dist-Cc1j9Pjk.js";import{n as o,t as s}from"./FormControl-C_Mh5dfi.js";import{n as c,t as l}from"./Input-D6_jI5Uh.js";var u,d,f,p=t((()=>{u=e(n(),1),o(),l(),a(),d=r(),f=(0,u.forwardRef)(function({id:e,label:t,description:n,error:r,required:a,inputDataset:o,dataset:l,hideLabel:u,onClick:f,hasError:p,useLegacyRequiredLabel:m,className:h,style:g,..._},v){return(0,d.jsx)(s,{id:e,label:t,description:n,error:r,hasError:p,required:a,dataset:l,hideLabel:u,onClick:f,useLegacyRequiredLabel:m,preplyDsComponent:i.TextareaField,children:(0,d.jsx)(c,{..._,ref:v,dataset:o})})});try{f.displayName=`TextareaField`,f.__docgenInfo={description:``,displayName:`TextareaField`,props:{id:{defaultValue:null,description:`The id to be passed to the input element.
2
+ If not provided, will be generated for accessibility purposes.`,name:`id`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},onClick:{defaultValue:null,description:``,name:`onClick`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler<HTMLDivElement> & MouseEventHandler<HTMLTextAreaElement>`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},hasError:{defaultValue:null,description:"Whether the field has an error.\n@deprecated Use `error` prop to explicitly describe the error to users",name:`hasError`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},required:{defaultValue:null,description:`Indicates if the field is required. When false, adds a "Optional"
3
+ indicator next to the label.`,name:`required`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},label:{defaultValue:null,description:"The field label. This is needed for accessibility purposes, but can be\nhidden using the `hideLabel` prop.",name:`label`,required:!0,type:{name:`enum`,value:[{value:`undefined`},{value:`null`},{value:`string`},{value:`number`},{value:`false`},{value:`true`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`},{value:`Iterable<ReactNode>`},{value:`ReactPortal`}]}},hideLabel:{defaultValue:null,description:"Use this to hide the `label` visually, but keep it in the accessibility\ntree.",name:`hideLabel`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},description:{defaultValue:null,description:`Additional descriptive text that appears below the input field
4
+ to provide more context or instructions to the user.`,name:`description`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`},{value:`number`},{value:`false`},{value:`true`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`},{value:`Iterable<ReactNode>`},{value:`ReactPortal`}]}},error:{defaultValue:null,description:`Error message to display when the field has an invalid value.`,name:`error`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`},{value:`number`},{value:`false`},{value:`true`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`},{value:`Iterable<ReactNode>`},{value:`ReactPortal`}]}},useLegacyRequiredLabel:{defaultValue:null,description:`When true, adds a "Required" indicator next to the label for the required fields.
5
+ When false, adds a "Optional" indicator next to the label for the optional fields instead.
6
+ @deprecated This is a temporary solution for gradual migration to the "Optional" label.`,name:`useLegacyRequiredLabel`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},onValueChange:{defaultValue:null,description:``,name:`onValueChange`,required:!1,type:{name:`enum`,value:[{value:`(value: string) => void`}]}},resize:{defaultValue:null,description:``,name:`resize`,required:!1,type:{name:`enum`,value:[{value:`"horizontal"`},{value:`"vertical"`},{value:`"none"`},{value:`"both"`}]}},defaultValue:{defaultValue:null,description:``,name:`defaultValue`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},value:{defaultValue:null,description:``,name:`value`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},autoComplete:{defaultValue:null,description:``,name:`autoComplete`,required:!1,type:{name:`enum`,value:[{value:`"off"`},{value:`"on"`}]}},inputDataset:{defaultValue:null,description:``,name:`inputDataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}}}}}catch{}}));export{p as n,f as t};