@preply/ds-docs 5.2.0 → 5.2.1

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 (134) hide show
  1. package/dist/assets/{00.LayoutFlex.stories-CU_PBheh.js → 00.LayoutFlex.stories-DziNsvND.js} +1 -1
  2. package/dist/assets/{00.applications-k4E6Kp9W.js → 00.applications-CfdAX6zp.js} +1 -1
  3. package/dist/assets/{00.favicons.guide-li3I_F6g.js → 00.favicons.guide-TFQ_QGH8.js} +1 -1
  4. package/dist/assets/{00.token-explorer-DPyy8Qse.js → 00.token-explorer-Dih-Pw-i.js} +1 -1
  5. package/dist/assets/{00.using-responsive-props-DvJjPn4l.js → 00.using-responsive-props-CiPSgnLs.js} +1 -1
  6. package/dist/assets/{01.semantic-tokens-BJFCWksP.js → 01.semantic-tokens-BilArNNI.js} +1 -1
  7. package/dist/assets/{01.using-shorthand-props-7TTqmP-1.js → 01.using-shorthand-props-Sbq3I8ie.js} +1 -1
  8. package/dist/assets/{10.Combinations.stories-DSSBuYKH.js → 10.Combinations.stories-BA2P_--4.js} +1 -1
  9. package/dist/assets/{10.fonts.guide-DkLccLAL.js → 10.fonts.guide-6c2twxLe.js} +1 -1
  10. package/dist/assets/{10.ssr-CefkGBfp.js → 10.ssr-DsFrbjyY.js} +1 -1
  11. package/dist/assets/{11.ssr.app-router-Dl5IwciZ.js → 11.ssr.app-router-Bq0XjlUK.js} +1 -1
  12. package/dist/assets/{20.libraries-Df17azd4.js → 20.libraries-DuLqrS-7.js} +1 -1
  13. package/dist/assets/{30.icons.explorer-BcmjbQML.js → 30.icons.explorer-DZ7hOOqz.js} +1 -1
  14. package/dist/assets/{30.storybook-Bj0tQN0r.js → 30.storybook-C6QKDTCh.js} +1 -1
  15. package/dist/assets/{40.illustrations.explorer-DuUnaQJ6.js → 40.illustrations.explorer-CEF2Fc0h.js} +1 -1
  16. package/dist/assets/{90.advanced-DMVmfSdF.js → 90.advanced-DXMNWOcI.js} +1 -1
  17. package/dist/assets/{Accordion-D1vIqcq0.js → Accordion-VvNDKvME.js} +3 -3
  18. package/dist/assets/{Accordion.stories-DRHVlfh4.js → Accordion.stories-D8YFD-5m.js} +1 -1
  19. package/dist/assets/{Accordion.tests.stories-D0LPcnLm.js → Accordion.tests.stories-BMXcHw7d.js} +1 -1
  20. package/dist/assets/{AlertDialog.stories-t7rvOrIt.js → AlertDialog.stories-soyDmIgZ.js} +1 -1
  21. package/dist/assets/{Avatar-pYo4pD9f.js → Avatar-CDcgvepQ.js} +1 -1
  22. package/dist/assets/{Avatar.stories-DW2TYQqg.js → Avatar.stories-Bk7IcP2V.js} +1 -1
  23. package/dist/assets/{AvatarWithStatus.stories-DJHFLq1b.js → AvatarWithStatus.stories-ChuxFeXX.js} +4 -4
  24. package/dist/assets/{Badge.stories-BDgXsOQ3.js → Badge.stories-BlE7-5jC.js} +2 -2
  25. package/dist/assets/{Box.stories-CvBcavQ9.js → Box.stories-D3HsHvGa.js} +1 -1
  26. package/dist/assets/{BubbleCounter.stories-DRndNMcM.js → BubbleCounter.stories-CSP0211x.js} +1 -1
  27. package/dist/assets/{Button-r7N6Ff_n.js → Button-CV3MrNle.js} +2 -2
  28. package/dist/assets/{Button.stories-Cbyv5GRx.js → Button.stories-EH59ZSFw.js} +1 -1
  29. package/dist/assets/{ButtonBase-zwYgfoSw.js → ButtonBase-BpIWpxNP.js} +1 -1
  30. package/dist/assets/{Checkbox.stories-eRtAlYcC.js → Checkbox.stories-CmK5oHX3.js} +1 -1
  31. package/dist/assets/{Chips.stories-BR1h8Ayk.js → Chips.stories-CM5mElYE.js} +1 -1
  32. package/dist/assets/{Color-YHDXOIA2-9NBVO4CO.js → Color-YHDXOIA2-BjHwp_w2.js} +1 -1
  33. package/dist/assets/{ComposingPopovers.stories-CKLHzgB4.js → ComposingPopovers.stories-OVc6plo8.js} +1 -1
  34. package/dist/assets/{CountryFlag-ykx10eak.js → CountryFlag-DeifQHMo.js} +5 -5
  35. package/dist/assets/{CountryFlag.stories-Dsk1y884.js → CountryFlag.stories-8PMPd0Et.js} +1 -1
  36. package/dist/assets/{CountryFlag.test.stories-kaPfZDPu.js → CountryFlag.test.stories-CnmUo893.js} +1 -1
  37. package/dist/assets/{Dialog.stories-BgVBHEFn.js → Dialog.stories-e9MB7jV5.js} +1 -1
  38. package/dist/assets/DismissibleChips-gzmntal_.js +1 -0
  39. package/dist/assets/{DismissibleChips.stories-BDH4JLAT.js → DismissibleChips.stories-Cv9T1z5x.js} +1 -1
  40. package/dist/assets/{Divider-BPgGsji3.js → Divider-nt4GwjWS.js} +1 -1
  41. package/dist/assets/{Divider.stories-D0XhMPpe.js → Divider.stories-DD0t6A5Y.js} +1 -1
  42. package/dist/assets/{DocsRenderer-CFRXHY34-CrRewIwS.js → DocsRenderer-CFRXHY34-CJvyJnri.js} +1 -1
  43. package/dist/assets/{DropdownMenu-BVJcXVVs.js → DropdownMenu-CB-FxkIk.js} +95 -95
  44. package/dist/assets/{DropdownMenu.stories-DDZTqgtd.js → DropdownMenu.stories-DQ9Anz0c.js} +1 -1
  45. package/dist/assets/{FormControl.stories-By_j4CEK.js → FormControl.stories-BuYWW2sc.js} +1 -1
  46. package/dist/assets/{Heading-D-ou4j7h.js → Heading-CTiQg0ko.js} +2 -2
  47. package/dist/assets/{Heading.stories-DBQ5k_Gi.js → Heading.stories-CdaUOFTO.js} +1 -1
  48. package/dist/assets/{Icon-C9LCNP6i.js → Icon-5QESEDp5.js} +1 -1
  49. package/dist/assets/{Icon-RSC-CV1ghZyJ.js → Icon-RSC-CY2tw9Wa.js} +1 -1
  50. package/dist/assets/{Icon.stories-BY7I3NYo.js → Icon.stories-BDsCeC5v.js} +1 -1
  51. package/dist/assets/IconButton-DSKTwXgX.js +8 -0
  52. package/dist/assets/{Input-CkgW02B0.js → Input-CBd7qXZ8.js} +3 -3
  53. package/dist/assets/{IntegrationWithReactHookForm.stories-CBT754Nh.js → IntegrationWithReactHookForm.stories-CAgsKvvy.js} +1 -1
  54. package/dist/assets/{IntlFormattedCurrency.stories-DFu7hp1T.js → IntlFormattedCurrency.stories-a__ae3r7.js} +1 -1
  55. package/dist/assets/{IntlFormattedDateTime.stories-BNffxVaH.js → IntlFormattedDateTime.stories-BhfMf2LB.js} +1 -1
  56. package/dist/assets/{LayoutFlex-CnhOGGxA.js → LayoutFlex--W1D5e-w.js} +1 -1
  57. package/dist/assets/{LayoutFlexItem-BLtc7R2u.js → LayoutFlexItem-ZIv-8Mnt.js} +1 -1
  58. package/dist/assets/{LayoutGrid-CMfLnkDN.js → LayoutGrid-C__NlCjJ.js} +1 -1
  59. package/dist/assets/{LayoutGrid.stories-BeDPVs_l.js → LayoutGrid.stories-D9GOaVZa.js} +1 -1
  60. package/dist/assets/{LayoutGridItem-BTIocUYE.js → LayoutGridItem-BntIYIDx.js} +1 -1
  61. package/dist/assets/{Link-8C9V_O3w.js → Link-CLsuYZJn.js} +1 -1
  62. package/dist/assets/{Link.stories-Bvgdk63v.js → Link.stories-Bm06h16e.js} +1 -1
  63. package/dist/assets/MultiSelectChips-Dmul2me6.js +2 -0
  64. package/dist/assets/{MultiSelectChips.stories-CJG_1hO1.js → MultiSelectChips.stories-BIwP1d4r.js} +1 -1
  65. package/dist/assets/{NumberField-DfV-lQqS.js → NumberField-D5dekhTb.js} +3 -3
  66. package/dist/assets/{NumberField.stories-DcvvImGB.js → NumberField.stories-Bc9Kjkqe.js} +1 -1
  67. package/dist/assets/{ObserveIntersection-BUhLMAXT.js → ObserveIntersection-Br5mb_ve.js} +1 -1
  68. package/dist/assets/{ObserveIntersection.stories-D8LWmltK.js → ObserveIntersection.stories-DTWHq7aC.js} +1 -1
  69. package/dist/assets/{OnboardingTooltip-B_kaIqZr.js → OnboardingTooltip-DcTHydZd.js} +1 -1
  70. package/dist/assets/{OnboardingTooltip.stories-Bbi-solo.js → OnboardingTooltip.stories-DtaV_dGv.js} +1 -1
  71. package/dist/assets/{OnboardingTooltip.tests.stories-CYJGgVQH.js → OnboardingTooltip.tests.stories-DqEJ2MTQ.js} +1 -1
  72. package/dist/assets/{OnboardingTour-Es9ODo5R.js → OnboardingTour-CrSpwDGC.js} +1 -1
  73. package/dist/assets/{OnboardingTour.stories-DguX1Np1.js → OnboardingTour.stories-D4yQxcXy.js} +2 -2
  74. package/dist/assets/{OnboardingTour.tests.stories-DBl43DS_.js → OnboardingTour.tests.stories-DDBfv2IC.js} +1 -1
  75. package/dist/assets/{PasswordField-BDzBq_8p.js → PasswordField-Lp2RJZ3t.js} +3 -3
  76. package/dist/assets/{PasswordField.stories-Bq-oxqio.js → PasswordField.stories-D3KsJza4.js} +1 -1
  77. package/dist/assets/{ProgressBar.stories-69KylHTx.js → ProgressBar.stories-CqUc5VLs.js} +1 -1
  78. package/dist/assets/{ProgressSteps.stories-DsPOksS0.js → ProgressSteps.stories-BLE6dvhX.js} +1 -1
  79. package/dist/assets/{PromoDialog-CKvE5moH.js → PromoDialog-RBlASd4W.js} +1 -1
  80. package/dist/assets/{Rating.stories-CC-5R6ut.js → Rating.stories-byG85-k9.js} +1 -1
  81. package/dist/assets/{RatingInput.stories-f1yAaZGs.js → RatingInput.stories-C9V8kWiR.js} +4 -4
  82. package/dist/assets/{SelectField-x9rQw_qg.js → SelectField-B4nF6kxi.js} +7 -7
  83. package/dist/assets/{SelectField.stories-9fJay7bY.js → SelectField.stories-Bgx9QjPD.js} +1 -1
  84. package/dist/assets/{ShowOnIntersection.stories-CxzKz2ZJ.js → ShowOnIntersection.stories-B4Kohl7q.js} +1 -1
  85. package/dist/assets/SingleSelectChips-lFqKstcf.js +2 -0
  86. package/dist/assets/{SingleSelectChips.stories-DfIbVrTi.js → SingleSelectChips.stories-CT8m0Khv.js} +1 -1
  87. package/dist/assets/{Steps-B7JLI9QK.js → Steps-hoco_XFq.js} +1 -1
  88. package/dist/assets/{Steps.stories-BcrOvHDe.js → Steps.stories-BLjFxkm8.js} +1 -1
  89. package/dist/assets/{Switch.stories-Cacj1dlb.js → Switch.stories-BrXh5o7h.js} +1 -1
  90. package/dist/assets/{Text-Buodaus4.js → Text-DiDZp_C4.js} +1 -1
  91. package/dist/assets/{Text.stories-C4F4F5Y-.js → Text.stories-CHanMmn2.js} +1 -1
  92. package/dist/assets/{TextField-C027_iFa.js → TextField-I1Ozm_fM.js} +4 -4
  93. package/dist/assets/{TextField.stories-CFdxit85.js → TextField.stories-DzmVCGmV.js} +1 -1
  94. package/dist/assets/{TextHighlighted.stories-DXCnsEZ4.js → TextHighlighted.stories-SE_qwldO.js} +1 -1
  95. package/dist/assets/{TextInline.stories-CPQmYfGF.js → TextInline.stories-XOqnn55z.js} +1 -1
  96. package/dist/assets/{TextareaField-BRiidKHZ.js → TextareaField-DZaZgXE3.js} +7 -7
  97. package/dist/assets/{TextareaField.stories-B-fLDxxr.js → TextareaField.stories-Bop1BBMR.js} +1 -1
  98. package/dist/assets/{Toast.stories-Dbx35nSt.js → Toast.stories-DjwfNkJX.js} +1 -1
  99. package/dist/assets/{Tooltip.stories-BSZlgXSs.js → Tooltip.stories-X2KKbRdJ.js} +1 -1
  100. package/dist/assets/{Tooltip.tests.stories-DnDi6-EL.js → Tooltip.tests.stories-BSKY5lTA.js} +1 -1
  101. package/dist/assets/{breakpoints-Bah-hNxA.js → breakpoints-CRoLRYm8.js} +1 -1
  102. package/dist/assets/{breakpoints-Do1NjSIT.js → breakpoints-CSXuAMje.js} +1 -1
  103. package/dist/assets/{breakpoints-Dfsi11Gg.js → breakpoints-s1hUa0ib.js} +1 -1
  104. package/dist/assets/{changelog-Bvah7OoK.js → changelog-CCRp7HoV.js} +103 -98
  105. package/dist/assets/{createRequiredContext-WvHlx5O0.js → createRequiredContext-lKWDx2_a.js} +16 -16
  106. package/dist/assets/{entry-preview-RKdecZOE.js → entry-preview-B0kLH5we.js} +1 -1
  107. package/dist/assets/{getTokenVar-1iagfhaI.js → getTokenVar-BoTPwDbX.js} +1 -1
  108. package/dist/assets/{hover-Cxyn84A5.js → hover-Ci0ZRqat.js} +1 -1
  109. package/dist/assets/{hover-CO_99kGU.js → hover-DJXL0vF9.js} +1 -1
  110. package/dist/assets/{hover-BVO949eG.js → hover-DdQpVUkU.js} +1 -1
  111. package/dist/assets/{iframe-DQObBSoc.js → iframe-DD8HN-R1.js} +2 -2
  112. package/dist/assets/{index-DxHKJR-z.js → index-BHMtmy2B.js} +1 -1
  113. package/dist/assets/{index-CTTzR4gE.js → index-CBngXnat.js} +6 -6
  114. package/dist/assets/{index-xzr6a2UN.js → index-GU-yTW76.js} +3 -3
  115. package/dist/assets/{intro-BzWH3M5J.js → intro-_Rp3da5v.js} +1 -1
  116. package/dist/assets/{migrating-from-less-XegNzzRn.js → migrating-from-less-7B_k9xkW.js} +1 -1
  117. package/dist/assets/{playground.stories-C74S27QD.js → playground.stories-_pKinBuZ.js} +3 -3
  118. package/dist/assets/{preview-Ce0VhXT1.js → preview-BHe8pYRs.js} +1 -1
  119. package/dist/assets/{preview-Qml5zPPk.js → preview-BgJF9ES2.js} +1 -1
  120. package/dist/assets/{preview-BiTm_q9n.js → preview-oumS3SOc.js} +2 -2
  121. package/dist/assets/{tokens-8Z2xvrm4.js → tokens-BAlLdf8n.js} +1 -1
  122. package/dist/assets/{tokens-CUGnBuZf.js → tokens-CU9aPd3t.js} +1 -1
  123. package/dist/assets/{tokens-CNLWJPB5.js → tokens-DFy6-Ct0.js} +1 -1
  124. package/dist/assets/{usePortalElement-uiGuyCei.js → usePortalElement-BYgT_G5d.js} +1 -1
  125. package/dist/assets/{welcome-QbRFW5S1.js → welcome-DZoOoKok.js} +1 -1
  126. package/dist/assets/{zeroheight-DsJLIFDJ.js → zeroheight-T8hJ2BSR.js} +1 -1
  127. package/dist/iframe.html +1 -1
  128. package/dist/preview-stats.json +11623 -11623
  129. package/dist/project.json +1 -1
  130. package/package.json +3 -3
  131. package/dist/assets/DismissibleChips-CHGpXEIb.js +0 -1
  132. package/dist/assets/IconButton-DN6fzHUD.js +0 -8
  133. package/dist/assets/MultiSelectChips-mwYseEmZ.js +0 -2
  134. package/dist/assets/SingleSelectChips-Cnz0IZSs.js +0 -2
@@ -1,4 +1,4 @@
1
- import{j as g}from"./jsx-runtime-BTJTZTIL.js";import{r as re}from"./index-Cb9e4tly.js";import{a as se}from"./index-B-lxVbXh.js";import{f as r,w as x,e as n,u as w}from"./index-Dk_MCKuE.js";import{F as te}from"./TokyoUIPhone-CvuBM6jb.js";import{F as ie}from"./TokyoUIAttach-BWl7Jkq1.js";import{I as ne}from"./Icon-C9LCNP6i.js";import{N as ae}from"./NumberField-DfV-lQqS.js";import{F as ce}from"./FieldButton-BgIvx-8D.js";import"./index-ChsGqxH_.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./v4-CtRu48qb.js";import"./text-accent-DvyJpEME.js";import"./classNames-9hsFPPZv.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-BT0Aq7PA.js";import"./componentNames-k0j3gHgH.js";import"./index-qlqSh81O.js";import"./defaults-czRWsFkX.js";import"./FormControl-BEOVVHxt.js";import"./index-Cc-bXjHe.js";import"./index-DWSmmBvQ.js";import"./tslib.es6-C7pnyCjR.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./message-CSdaKtIj.js";import"./Input-CkgW02B0.js";import"./InputContainer-B1hqJyx0.js";const qe={title:"components/NumberField",component:ae,args:{name:"number",label:"Number",defaultValue:void 0,placeholder:"Enter a number",dataset:{testid:"field",foo:"bar"},inputDataset:{testid:"input",foo:"bar"},onChange:r(),onValueChange:r(),onBlur:r(),onFocus:r(),onClick:r(),onCopy:r(),onKeyDown:r(),onKeyUp:r(),onPaste:r()}},c={play:async({canvasElement:a,step:e,args:t})=>{const o=x(a),i=o.getByTestId("field"),s=o.getByTestId("input");await e("it should render correct label",async()=>{const oe=x(i).getByTestId("label");n(oe).toHaveTextContent("Number • Optional"),n(s).toHaveAccessibleName("Number")}),await e("it should call onFocus when the input is focused",async()=>{s.focus(),n(t.onFocus).toHaveBeenCalled()}),await e("it should call callback when the value changes",async()=>{await w.type(s,"42"),n(t.onValueChange).toHaveBeenCalledWith(42),n(t.onChange).toHaveBeenCalled()}),await e("it should call onBlur when the input is blurred",async()=>{await w.keyboard("{tab}"),n(t.onBlur).toHaveBeenCalled()}),await e("it should render the dataset props",async()=>{n(i).toHaveAttribute("data-testid","field"),n(i).toHaveAttribute("data-foo","bar"),n(s).toHaveAttribute("data-testid","input"),n(s).toHaveAttribute("data-foo","bar")})}},l={render:function(e){const[t,o]=re.useState(e.value);return g.jsx(ae,{...e,value:t,onChange:i=>{var s;o(Number(i.target.value)),(s=e.onChange)==null||s.call(e,i)}})},args:{label:"Controlled NumberField",placeholder:"Enter a number...",value:42},play:async({canvas:a,step:e})=>{await e("it should render the correct initial value",async()=>{const t=a.getByTestId("input");await n(t).toHaveValue(42)}),await e("it should update the value when the user types",async()=>{const t=a.getByTestId("input");await w.clear(t),await w.type(t,"100"),n(t).toHaveValue(100)})}},u={args:{icon:g.jsx(ne,{svg:te,dataset:{testid:"icon"}})},play:async({canvas:a,step:e})=>{await e("it should render the icon",async()=>{const t=a.getByTestId("icon");n(t).toBeInTheDocument()})}},d={args:{description:"Enter a valid number"},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input"),o=a.getByTestId("description");await e("it should render the description",async()=>{n(t).toHaveAccessibleDescription("Enter a valid number"),n(o).toHaveTextContent("Enter a valid number")})}},p={args:{required:!0},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input"),o=a.getByTestId("label");await e("it should render correct label",async()=>{n(t).toHaveAccessibleName("Number"),n(o).toHaveTextContent("Number")}),await e("it should render required attribute",async()=>{n(t).toHaveAttribute("required")})}},m={args:{hideLabel:!0},play:async({canvas:a,step:e})=>{await e("it should render correct a11y label",async()=>{const t=a.getByTestId("input");n(t).toHaveAccessibleName("Number")})}},b={args:{error:"This is an error message"},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input"),o=a.getByTestId("error");await e("it should render the error message",async()=>{n(t).toHaveAccessibleErrorMessage("This is an error message"),n(o).toHaveTextContent("This is an error message")})}},h={args:{disabled:!0},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input");await e("it should render the disabled input",async()=>{n(t).toHaveAttribute("disabled")})}},y={args:{readOnly:!0},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input");await e("it should render the read only input",async()=>{n(t).toHaveAttribute("readonly")})}},v={parameters:{chromatic:{disableSnapshot:!0}},args:{label:"Number of lessons",placeholder:"How about 3?",description:"These lessons will be scheduled automatically"},argTypes:{label:{control:"text"},placeholder:{control:"text"},description:{control:"text"},error:{control:"text"},value:{control:"number"},defaultValue:{control:"number"},inputDataset:{control:"object"},dataset:{control:"object"},id:{control:"text"},required:{control:"boolean"},hideLabel:{control:"boolean"},name:{control:"text"},disabled:{control:"boolean"},readOnly:{control:"boolean"},min:{control:"number"},max:{control:"number"},step:{control:"number"},icon:{options:["None","With Icon"],mapping:{None:void 0,"With Icon":g.jsx(ne,{svg:te})},control:"select"},button:{options:["None","With Button"],mapping:{None:void 0,"With Button":g.jsx(ce,{svg:ie,assistiveText:"Do the thing",onClick:se("field button clicked")})},control:"select"},maxLength:{control:"number"},hasError:{table:{disable:!0}}}};var B,T,H,f,I;c.parameters={...c.parameters,docs:{...(B=c.parameters)==null?void 0:B.docs,source:{originalSource:`{
1
+ import{j as g}from"./jsx-runtime-BTJTZTIL.js";import{r as re}from"./index-Cb9e4tly.js";import{a as se}from"./index-B-lxVbXh.js";import{f as r,w as x,e as n,u as w}from"./index-Dk_MCKuE.js";import{F as te}from"./TokyoUIPhone-CvuBM6jb.js";import{F as ie}from"./TokyoUIAttach-BWl7Jkq1.js";import{I as ne}from"./Icon-5QESEDp5.js";import{N as ae}from"./NumberField-D5dekhTb.js";import{F as ce}from"./FieldButton-BgIvx-8D.js";import"./index-ChsGqxH_.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./v4-CtRu48qb.js";import"./text-accent-DvyJpEME.js";import"./classNames-9hsFPPZv.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-BT0Aq7PA.js";import"./componentNames-k0j3gHgH.js";import"./index-qlqSh81O.js";import"./defaults-czRWsFkX.js";import"./FormControl-BEOVVHxt.js";import"./index-Cc-bXjHe.js";import"./index-DWSmmBvQ.js";import"./tslib.es6-C7pnyCjR.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./message-CSdaKtIj.js";import"./Input-CBd7qXZ8.js";import"./InputContainer-B1hqJyx0.js";const qe={title:"components/NumberField",component:ae,args:{name:"number",label:"Number",defaultValue:void 0,placeholder:"Enter a number",dataset:{testid:"field",foo:"bar"},inputDataset:{testid:"input",foo:"bar"},onChange:r(),onValueChange:r(),onBlur:r(),onFocus:r(),onClick:r(),onCopy:r(),onKeyDown:r(),onKeyUp:r(),onPaste:r()}},c={play:async({canvasElement:a,step:e,args:t})=>{const o=x(a),i=o.getByTestId("field"),s=o.getByTestId("input");await e("it should render correct label",async()=>{const oe=x(i).getByTestId("label");n(oe).toHaveTextContent("Number • Optional"),n(s).toHaveAccessibleName("Number")}),await e("it should call onFocus when the input is focused",async()=>{s.focus(),n(t.onFocus).toHaveBeenCalled()}),await e("it should call callback when the value changes",async()=>{await w.type(s,"42"),n(t.onValueChange).toHaveBeenCalledWith(42),n(t.onChange).toHaveBeenCalled()}),await e("it should call onBlur when the input is blurred",async()=>{await w.keyboard("{tab}"),n(t.onBlur).toHaveBeenCalled()}),await e("it should render the dataset props",async()=>{n(i).toHaveAttribute("data-testid","field"),n(i).toHaveAttribute("data-foo","bar"),n(s).toHaveAttribute("data-testid","input"),n(s).toHaveAttribute("data-foo","bar")})}},l={render:function(e){const[t,o]=re.useState(e.value);return g.jsx(ae,{...e,value:t,onChange:i=>{var s;o(Number(i.target.value)),(s=e.onChange)==null||s.call(e,i)}})},args:{label:"Controlled NumberField",placeholder:"Enter a number...",value:42},play:async({canvas:a,step:e})=>{await e("it should render the correct initial value",async()=>{const t=a.getByTestId("input");await n(t).toHaveValue(42)}),await e("it should update the value when the user types",async()=>{const t=a.getByTestId("input");await w.clear(t),await w.type(t,"100"),n(t).toHaveValue(100)})}},u={args:{icon:g.jsx(ne,{svg:te,dataset:{testid:"icon"}})},play:async({canvas:a,step:e})=>{await e("it should render the icon",async()=>{const t=a.getByTestId("icon");n(t).toBeInTheDocument()})}},d={args:{description:"Enter a valid number"},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input"),o=a.getByTestId("description");await e("it should render the description",async()=>{n(t).toHaveAccessibleDescription("Enter a valid number"),n(o).toHaveTextContent("Enter a valid number")})}},p={args:{required:!0},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input"),o=a.getByTestId("label");await e("it should render correct label",async()=>{n(t).toHaveAccessibleName("Number"),n(o).toHaveTextContent("Number")}),await e("it should render required attribute",async()=>{n(t).toHaveAttribute("required")})}},m={args:{hideLabel:!0},play:async({canvas:a,step:e})=>{await e("it should render correct a11y label",async()=>{const t=a.getByTestId("input");n(t).toHaveAccessibleName("Number")})}},b={args:{error:"This is an error message"},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input"),o=a.getByTestId("error");await e("it should render the error message",async()=>{n(t).toHaveAccessibleErrorMessage("This is an error message"),n(o).toHaveTextContent("This is an error message")})}},h={args:{disabled:!0},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input");await e("it should render the disabled input",async()=>{n(t).toHaveAttribute("disabled")})}},y={args:{readOnly:!0},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input");await e("it should render the read only input",async()=>{n(t).toHaveAttribute("readonly")})}},v={parameters:{chromatic:{disableSnapshot:!0}},args:{label:"Number of lessons",placeholder:"How about 3?",description:"These lessons will be scheduled automatically"},argTypes:{label:{control:"text"},placeholder:{control:"text"},description:{control:"text"},error:{control:"text"},value:{control:"number"},defaultValue:{control:"number"},inputDataset:{control:"object"},dataset:{control:"object"},id:{control:"text"},required:{control:"boolean"},hideLabel:{control:"boolean"},name:{control:"text"},disabled:{control:"boolean"},readOnly:{control:"boolean"},min:{control:"number"},max:{control:"number"},step:{control:"number"},icon:{options:["None","With Icon"],mapping:{None:void 0,"With Icon":g.jsx(ne,{svg:te})},control:"select"},button:{options:["None","With Button"],mapping:{None:void 0,"With Button":g.jsx(ce,{svg:ie,assistiveText:"Do the thing",onClick:se("field button clicked")})},control:"select"},maxLength:{control:"number"},hasError:{table:{disable:!0}}}};var B,T,H,f,I;c.parameters={...c.parameters,docs:{...(B=c.parameters)==null?void 0:B.docs,source:{originalSource:`{
2
2
  play: async ({
3
3
  canvasElement,
4
4
  step,
@@ -5,4 +5,4 @@ Triggers a callback when the wrapped component intersects with the viewport.
5
5
  This can be useful in several use cases. Examples:
6
6
 
7
7
  - Track an experiment, once a certain component scrolls into view.
8
- - Trigger an animation, or a feature (e.g.: onboarding instructions).`,displayName:"ObserveIntersection",props:{onIntersect:{defaultValue:null,description:"",name:"onIntersect",required:!0,type:{name:"() => void"}},once:{defaultValue:null,description:"",name:"once",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},threshold:{defaultValue:null,description:"",name:"threshold",required:!1,type:{name:"enum",value:[{value:"number"}]}},tag:{defaultValue:null,description:"",name:"tag",required:!1,type:{name:"enum",value:[{value:'"div"'},{value:'"main"'},{value:'"header"'},{value:'"footer"'},{value:'"article"'},{value:'"section"'},{value:'"ul"'},{value:'"ol"'},{value:'"li"'},{value:'"p"'},{value:'"span"'},{value:'"fieldset"'},{value:'"table"'},{value:'"th"'},{value:'"tr"'},{value:'"td"'},{value:'"thead"'},{value:'"tfoot"'},{value:'"tbody"'},{value:'"caption"'},{value:'"figure"'},{value:'"figcaption"'}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}}}}}catch{}export{o as O};
8
+ - Trigger an animation, or a feature (e.g.: onboarding instructions).`,displayName:"ObserveIntersection",props:{onIntersect:{defaultValue:null,description:"",name:"onIntersect",required:!0,type:{name:"() => void"}},once:{defaultValue:null,description:"",name:"once",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},threshold:{defaultValue:null,description:"",name:"threshold",required:!1,type:{name:"enum",value:[{value:"number"}]}},tag:{defaultValue:null,description:"",name:"tag",required:!1,type:{name:"enum",value:[{value:'"td"'},{value:'"li"'},{value:'"th"'},{value:'"tr"'},{value:'"article"'},{value:'"figure"'},{value:'"main"'},{value:'"table"'},{value:'"div"'},{value:'"header"'},{value:'"footer"'},{value:'"section"'},{value:'"ul"'},{value:'"ol"'},{value:'"p"'},{value:'"span"'},{value:'"fieldset"'},{value:'"thead"'},{value:'"tfoot"'},{value:'"tbody"'},{value:'"caption"'},{value:'"figcaption"'}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}}}}}catch{}export{o as O};
@@ -1,4 +1,4 @@
1
- import{j as t}from"./jsx-runtime-BTJTZTIL.js";import{r as a}from"./index-Cb9e4tly.js";import{O as i}from"./ObserveIntersection-BUhLMAXT.js";import"./index-ChsGqxH_.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./index-qlqSh81O.js";import"./defaults-czRWsFkX.js";import"./componentNames-k0j3gHgH.js";const g={title:"components/ObserveIntersection",component:i,parameters:{tags:["!test"],chromatic:{disableSnapshot:!0}}},e=()=>{const[o,c]=a.useState(!1);return t.jsxs("div",{tabIndex:0,style:{height:"200px",overflowY:"scroll",position:"relative"},children:[t.jsx("div",{style:{position:"sticky",top:"2px"},children:o?"Intersected":"Scroll down to intersect"}),t.jsx("div",{style:{height:"400px",display:"flex",alignItems:"end"},children:t.jsx(i,{onIntersect:()=>c(!0),children:"Observer"})})]})};e.storyName="ObserveIntersection";var s,n,r;e.parameters={...e.parameters,docs:{...(s=e.parameters)==null?void 0:s.docs,source:{originalSource:`() => {
1
+ import{j as t}from"./jsx-runtime-BTJTZTIL.js";import{r as a}from"./index-Cb9e4tly.js";import{O as i}from"./ObserveIntersection-Br5mb_ve.js";import"./index-ChsGqxH_.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./index-qlqSh81O.js";import"./defaults-czRWsFkX.js";import"./componentNames-k0j3gHgH.js";const g={title:"components/ObserveIntersection",component:i,parameters:{tags:["!test"],chromatic:{disableSnapshot:!0}}},e=()=>{const[o,c]=a.useState(!1);return t.jsxs("div",{tabIndex:0,style:{height:"200px",overflowY:"scroll",position:"relative"},children:[t.jsx("div",{style:{position:"sticky",top:"2px"},children:o?"Intersected":"Scroll down to intersect"}),t.jsx("div",{style:{height:"400px",display:"flex",alignItems:"end"},children:t.jsx(i,{onIntersect:()=>c(!0),children:"Observer"})})]})};e.storyName="ObserveIntersection";var s,n,r;e.parameters={...e.parameters,docs:{...(s=e.parameters)==null?void 0:s.docs,source:{originalSource:`() => {
2
2
  const [isIntersecting, setIsIntersecting] = useState(false);
3
3
  return (
4
4
  // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- This element is interactive; it's scrollable.
@@ -1,4 +1,4 @@
1
- import{j as a}from"./jsx-runtime-BTJTZTIL.js";import{r as s}from"./index-Cb9e4tly.js";import{a as Z,c as Q,P as E,b as y}from"./index-CBNx_T-u.js";import{u as A,a as Y,S as ee}from"./index-Cc-bXjHe.js";import{u as te,P as j,a as ae,D as oe,b as ne}from"./PortalElementProvider-C7eyjaTY.js";import{h as re,R as le,u as ue,F as se}from"./Combination-5zjsB4UY.js";import{c as k,R as ie,A as N,a as ce,C as de}from"./index-DPv9hOkP.js";import{F as pe}from"./TokyoUIClose-thK8sk63.js";import{I as fe}from"./Icon-C9LCNP6i.js";import{T as ve}from"./Text-Buodaus4.js";import{B as me}from"./Button-r7N6Ff_n.js";import{H as he}from"./Heading-D-ou4j7h.js";import{u as ge}from"./index-DWSmmBvQ.js";import{g as be}from"./shared-strings-DFzxd8lM.js";import{g as ye}from"./index-qlqSh81O.js";import{w as Ce}from"./componentNames-k0j3gHgH.js";import{M as Pe}from"./message-CSdaKtIj.js";var P="Popover",[V]=Q(P,[k]),C=k(),[Re,f]=V(P),S=e=>{const{__scopePopover:t,children:r,open:i,defaultOpen:o,onOpenChange:n,modal:u=!1}=e,l=C(t),c=s.useRef(null),[d,v]=s.useState(!1),[m,p]=Z({prop:i,defaultProp:o??!1,onChange:n,caller:P});return a.jsx(ie,{...l,children:a.jsx(Re,{scope:t,contentId:te(),triggerRef:c,open:m,onOpenChange:p,onOpenToggle:s.useCallback(()=>p(h=>!h),[p]),hasCustomAnchor:d,onCustomAnchorAdd:s.useCallback(()=>v(!0),[]),onCustomAnchorRemove:s.useCallback(()=>v(!1),[]),modal:u,children:r})})};S.displayName=P;var D="PopoverAnchor",T=s.forwardRef((e,t)=>{const{__scopePopover:r,...i}=e,o=f(D,r),n=C(r),{onCustomAnchorAdd:u,onCustomAnchorRemove:l}=o;return s.useEffect(()=>(u(),()=>l()),[u,l]),a.jsx(N,{...n,...i,ref:t})});T.displayName=D;var q="PopoverTrigger",xe=s.forwardRef((e,t)=>{const{__scopePopover:r,...i}=e,o=f(q,r),n=C(r),u=A(t,o.triggerRef),l=a.jsx(E.button,{type:"button","aria-haspopup":"dialog","aria-expanded":o.open,"aria-controls":o.contentId,"data-state":J(o.open),...i,ref:u,onClick:y(e.onClick,o.onOpenToggle)});return o.hasCustomAnchor?l:a.jsx(N,{asChild:!0,...n,children:l})});xe.displayName=q;var O="PopoverPortal",[we,Oe]=V(O,{forceMount:void 0}),M=e=>{const{__scopePopover:t,forceMount:r,children:i,container:o}=e,n=f(O,t);return a.jsx(we,{scope:t,forceMount:r,children:a.jsx(j,{present:r||n.open,children:a.jsx(ae,{asChild:!0,container:o,children:i})})})};M.displayName=O;var g="PopoverContent",F=s.forwardRef((e,t)=>{const r=Oe(g,e.__scopePopover),{forceMount:i=r.forceMount,...o}=e,n=f(g,e.__scopePopover);return a.jsx(j,{present:i||n.open,children:n.modal?a.jsx(Ie,{...o,ref:t}):a.jsx(Ee,{...o,ref:t})})});F.displayName=g;var _e=Y("PopoverContent.RemoveScroll"),Ie=s.forwardRef((e,t)=>{const r=f(g,e.__scopePopover),i=s.useRef(null),o=A(t,i),n=s.useRef(!1);return s.useEffect(()=>{const u=i.current;if(u)return re(u)},[]),a.jsx(le,{as:_e,allowPinchZoom:!0,children:a.jsx(L,{...e,ref:o,trapFocus:r.open,disableOutsidePointerEvents:!0,onCloseAutoFocus:y(e.onCloseAutoFocus,u=>{var l;u.preventDefault(),n.current||(l=r.triggerRef.current)==null||l.focus()}),onPointerDownOutside:y(e.onPointerDownOutside,u=>{const l=u.detail.originalEvent,c=l.button===0&&l.ctrlKey===!0,d=l.button===2||c;n.current=d},{checkForDefaultPrevented:!1}),onFocusOutside:y(e.onFocusOutside,u=>u.preventDefault(),{checkForDefaultPrevented:!1})})})}),Ee=s.forwardRef((e,t)=>{const r=f(g,e.__scopePopover),i=s.useRef(!1),o=s.useRef(!1);return a.jsx(L,{...e,ref:t,trapFocus:!1,disableOutsidePointerEvents:!1,onCloseAutoFocus:n=>{var u,l;(u=e.onCloseAutoFocus)==null||u.call(e,n),n.defaultPrevented||(i.current||(l=r.triggerRef.current)==null||l.focus(),n.preventDefault()),i.current=!1,o.current=!1},onInteractOutside:n=>{var c,d;(c=e.onInteractOutside)==null||c.call(e,n),n.defaultPrevented||(i.current=!0,n.detail.originalEvent.type==="pointerdown"&&(o.current=!0));const u=n.target;((d=r.triggerRef.current)==null?void 0:d.contains(u))&&n.preventDefault(),n.detail.originalEvent.type==="focusin"&&o.current&&n.preventDefault()}})}),L=s.forwardRef((e,t)=>{const{__scopePopover:r,trapFocus:i,onOpenAutoFocus:o,onCloseAutoFocus:n,disableOutsidePointerEvents:u,onEscapeKeyDown:l,onPointerDownOutside:c,onFocusOutside:d,onInteractOutside:v,...m}=e,p=f(g,r),h=C(r);return ue(),a.jsx(se,{asChild:!0,loop:!0,trapped:i,onMountAutoFocus:o,onUnmountAutoFocus:n,children:a.jsx(oe,{asChild:!0,disableOutsidePointerEvents:u,onInteractOutside:v,onEscapeKeyDown:l,onPointerDownOutside:c,onFocusOutside:d,onDismiss:()=>p.onOpenChange(!1),children:a.jsx(de,{"data-state":J(p.open),role:"dialog",id:p.contentId,...h,...m,ref:t,style:{...m.style,"--radix-popover-content-transform-origin":"var(--radix-popper-transform-origin)","--radix-popover-content-available-width":"var(--radix-popper-available-width)","--radix-popover-content-available-height":"var(--radix-popper-available-height)","--radix-popover-trigger-width":"var(--radix-popper-anchor-width)","--radix-popover-trigger-height":"var(--radix-popper-anchor-height)"}})})})}),H="PopoverClose",B=s.forwardRef((e,t)=>{const{__scopePopover:r,...i}=e,o=f(H,r);return a.jsx(E.button,{type:"button",...i,ref:t,onClick:y(e.onClick,()=>o.onOpenChange(!1))})});B.displayName=H;var Ae="PopoverArrow",X=s.forwardRef((e,t)=>{const{__scopePopover:r,...i}=e,o=C(r);return a.jsx(ce,{...o,...i,ref:t})});X.displayName=Ae;function J(e){return e?"open":"closed"}var je=S,ke=T,Ne=M,Ve=F,Se=B,De=X;const Te="content__KHgp9",qe="header__CaLti",Me="close__3s-VD",Fe="footer__X5qXF",Le="arrow__0pg-s",b={content:Te,header:qe,close:Me,footer:Fe,arrow:Le},He=e=>{e.scrollIntoViewIfNeeded?e.scrollIntoViewIfNeeded(!1):e.scrollIntoView({behavior:"auto",block:"nearest",inline:"nearest"})},w=s.forwardRef(function({open:t,onOpenChange:r,disabled:i,title:o,text:n,children:u,side:l,dataset:c,actionLabel:d=a.jsx(Pe,{id:"preply-ds.onboardingTooltip.actionLabel",defaultMessage:"Got it",description:"Default onboarding tooltip action label. Used to acknowledge and close the tooltip."}),actionOnClick:v,actionHref:m,counter:p,autoScroll:h=!0,...U},G){const{formatMessage:$}=ge(),K=ne(),_=s.useId(),z=s.useId(),R=s.useId(),x=s.useRef(null);return s.useEffect(()=>{t&&x.current&&h&&He(x.current)},[h,t]),i?u:a.jsxs(je,{open:t,onOpenChange:r,children:[a.jsx(ee,{ref:G,...U,children:a.jsx(ke,{ref:x,id:R,asChild:!0,children:u})}),a.jsx(Ne,{container:K,children:a.jsxs(Ve,{onInteractOutside:W=>{W.preventDefault()},side:l,className:b.content,"aria-labelledby":_,"aria-describedby":`${R} ${z}`,...ye(c,{preplyDsComponent:Ce.OnboardingTooltip}),children:[a.jsxs("div",{className:b.header,children:[a.jsx(Se,{className:b.close,"aria-label":$(be.close),"data-testid":"close",children:a.jsx(fe,{accent:"inverted",svg:pe})}),a.jsx(he,{tag:"h1",variant:"small",accent:"inverted",id:_,"aria-describedby":R,children:o})]}),a.jsx(ve,{variant:"default-regular",accent:"inverted",children:n}),a.jsxs("div",{className:b.footer,children:[p,a.jsx(me,{variant:"inverted",size:"small",onClick:v,href:m,dataset:{testid:"action"},wrap:!0,children:d})]}),a.jsx(De,{"aria-hidden":!0,className:b.arrow,width:18,height:11})]})})]})}),I=s.forwardRef(function(t,r){const[i,o]=s.useState(!0),n=l=>{var c;l||(c=t.onClose)==null||c.call(t),o(l)},u=()=>{var l,c;(l=t.actionOnClick)==null||l.call(t),o(!1),(c=t.onClose)==null||c.call(t)};return a.jsx(w,{...t,open:i,onOpenChange:n,actionOnClick:u,ref:r})});try{w.displayName="InternalOnboardingTooltip",w.__docgenInfo={description:"",displayName:"InternalOnboardingTooltip",props:{title:{defaultValue:null,description:"",name:"title",required:!0,type:{name:"enum",value:[{value:"undefined"},{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},text:{defaultValue:null,description:"",name:"text",required:!0,type:{name:"enum",value:[{value:"undefined"},{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},disabled:{defaultValue:null,description:"Disables tooltip completely",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},onClose:{defaultValue:null,description:"Called when the tooltip is closed",name:"onClose",required:!1,type:{name:"enum",value:[{value:"() => void"}]}},actionLabel:{defaultValue:{value:`(
1
+ import{j as a}from"./jsx-runtime-BTJTZTIL.js";import{r as s}from"./index-Cb9e4tly.js";import{a as Z,c as Q,P as E,b as y}from"./index-CBNx_T-u.js";import{u as A,a as Y,S as ee}from"./index-Cc-bXjHe.js";import{u as te,P as j,a as ae,D as oe,b as ne}from"./PortalElementProvider-C7eyjaTY.js";import{h as re,R as le,u as ue,F as se}from"./Combination-5zjsB4UY.js";import{c as k,R as ie,A as N,a as ce,C as de}from"./index-DPv9hOkP.js";import{F as pe}from"./TokyoUIClose-thK8sk63.js";import{I as fe}from"./Icon-5QESEDp5.js";import{T as ve}from"./Text-DiDZp_C4.js";import{B as me}from"./Button-CV3MrNle.js";import{H as he}from"./Heading-CTiQg0ko.js";import{u as ge}from"./index-DWSmmBvQ.js";import{g as be}from"./shared-strings-DFzxd8lM.js";import{g as ye}from"./index-qlqSh81O.js";import{w as Ce}from"./componentNames-k0j3gHgH.js";import{M as Pe}from"./message-CSdaKtIj.js";var P="Popover",[V]=Q(P,[k]),C=k(),[Re,f]=V(P),S=e=>{const{__scopePopover:t,children:r,open:i,defaultOpen:o,onOpenChange:n,modal:u=!1}=e,l=C(t),c=s.useRef(null),[d,v]=s.useState(!1),[m,p]=Z({prop:i,defaultProp:o??!1,onChange:n,caller:P});return a.jsx(ie,{...l,children:a.jsx(Re,{scope:t,contentId:te(),triggerRef:c,open:m,onOpenChange:p,onOpenToggle:s.useCallback(()=>p(h=>!h),[p]),hasCustomAnchor:d,onCustomAnchorAdd:s.useCallback(()=>v(!0),[]),onCustomAnchorRemove:s.useCallback(()=>v(!1),[]),modal:u,children:r})})};S.displayName=P;var D="PopoverAnchor",T=s.forwardRef((e,t)=>{const{__scopePopover:r,...i}=e,o=f(D,r),n=C(r),{onCustomAnchorAdd:u,onCustomAnchorRemove:l}=o;return s.useEffect(()=>(u(),()=>l()),[u,l]),a.jsx(N,{...n,...i,ref:t})});T.displayName=D;var q="PopoverTrigger",xe=s.forwardRef((e,t)=>{const{__scopePopover:r,...i}=e,o=f(q,r),n=C(r),u=A(t,o.triggerRef),l=a.jsx(E.button,{type:"button","aria-haspopup":"dialog","aria-expanded":o.open,"aria-controls":o.contentId,"data-state":J(o.open),...i,ref:u,onClick:y(e.onClick,o.onOpenToggle)});return o.hasCustomAnchor?l:a.jsx(N,{asChild:!0,...n,children:l})});xe.displayName=q;var O="PopoverPortal",[we,Oe]=V(O,{forceMount:void 0}),M=e=>{const{__scopePopover:t,forceMount:r,children:i,container:o}=e,n=f(O,t);return a.jsx(we,{scope:t,forceMount:r,children:a.jsx(j,{present:r||n.open,children:a.jsx(ae,{asChild:!0,container:o,children:i})})})};M.displayName=O;var g="PopoverContent",F=s.forwardRef((e,t)=>{const r=Oe(g,e.__scopePopover),{forceMount:i=r.forceMount,...o}=e,n=f(g,e.__scopePopover);return a.jsx(j,{present:i||n.open,children:n.modal?a.jsx(Ie,{...o,ref:t}):a.jsx(Ee,{...o,ref:t})})});F.displayName=g;var _e=Y("PopoverContent.RemoveScroll"),Ie=s.forwardRef((e,t)=>{const r=f(g,e.__scopePopover),i=s.useRef(null),o=A(t,i),n=s.useRef(!1);return s.useEffect(()=>{const u=i.current;if(u)return re(u)},[]),a.jsx(le,{as:_e,allowPinchZoom:!0,children:a.jsx(L,{...e,ref:o,trapFocus:r.open,disableOutsidePointerEvents:!0,onCloseAutoFocus:y(e.onCloseAutoFocus,u=>{var l;u.preventDefault(),n.current||(l=r.triggerRef.current)==null||l.focus()}),onPointerDownOutside:y(e.onPointerDownOutside,u=>{const l=u.detail.originalEvent,c=l.button===0&&l.ctrlKey===!0,d=l.button===2||c;n.current=d},{checkForDefaultPrevented:!1}),onFocusOutside:y(e.onFocusOutside,u=>u.preventDefault(),{checkForDefaultPrevented:!1})})})}),Ee=s.forwardRef((e,t)=>{const r=f(g,e.__scopePopover),i=s.useRef(!1),o=s.useRef(!1);return a.jsx(L,{...e,ref:t,trapFocus:!1,disableOutsidePointerEvents:!1,onCloseAutoFocus:n=>{var u,l;(u=e.onCloseAutoFocus)==null||u.call(e,n),n.defaultPrevented||(i.current||(l=r.triggerRef.current)==null||l.focus(),n.preventDefault()),i.current=!1,o.current=!1},onInteractOutside:n=>{var c,d;(c=e.onInteractOutside)==null||c.call(e,n),n.defaultPrevented||(i.current=!0,n.detail.originalEvent.type==="pointerdown"&&(o.current=!0));const u=n.target;((d=r.triggerRef.current)==null?void 0:d.contains(u))&&n.preventDefault(),n.detail.originalEvent.type==="focusin"&&o.current&&n.preventDefault()}})}),L=s.forwardRef((e,t)=>{const{__scopePopover:r,trapFocus:i,onOpenAutoFocus:o,onCloseAutoFocus:n,disableOutsidePointerEvents:u,onEscapeKeyDown:l,onPointerDownOutside:c,onFocusOutside:d,onInteractOutside:v,...m}=e,p=f(g,r),h=C(r);return ue(),a.jsx(se,{asChild:!0,loop:!0,trapped:i,onMountAutoFocus:o,onUnmountAutoFocus:n,children:a.jsx(oe,{asChild:!0,disableOutsidePointerEvents:u,onInteractOutside:v,onEscapeKeyDown:l,onPointerDownOutside:c,onFocusOutside:d,onDismiss:()=>p.onOpenChange(!1),children:a.jsx(de,{"data-state":J(p.open),role:"dialog",id:p.contentId,...h,...m,ref:t,style:{...m.style,"--radix-popover-content-transform-origin":"var(--radix-popper-transform-origin)","--radix-popover-content-available-width":"var(--radix-popper-available-width)","--radix-popover-content-available-height":"var(--radix-popper-available-height)","--radix-popover-trigger-width":"var(--radix-popper-anchor-width)","--radix-popover-trigger-height":"var(--radix-popper-anchor-height)"}})})})}),H="PopoverClose",B=s.forwardRef((e,t)=>{const{__scopePopover:r,...i}=e,o=f(H,r);return a.jsx(E.button,{type:"button",...i,ref:t,onClick:y(e.onClick,()=>o.onOpenChange(!1))})});B.displayName=H;var Ae="PopoverArrow",X=s.forwardRef((e,t)=>{const{__scopePopover:r,...i}=e,o=C(r);return a.jsx(ce,{...o,...i,ref:t})});X.displayName=Ae;function J(e){return e?"open":"closed"}var je=S,ke=T,Ne=M,Ve=F,Se=B,De=X;const Te="content__KHgp9",qe="header__CaLti",Me="close__3s-VD",Fe="footer__X5qXF",Le="arrow__0pg-s",b={content:Te,header:qe,close:Me,footer:Fe,arrow:Le},He=e=>{e.scrollIntoViewIfNeeded?e.scrollIntoViewIfNeeded(!1):e.scrollIntoView({behavior:"auto",block:"nearest",inline:"nearest"})},w=s.forwardRef(function({open:t,onOpenChange:r,disabled:i,title:o,text:n,children:u,side:l,dataset:c,actionLabel:d=a.jsx(Pe,{id:"preply-ds.onboardingTooltip.actionLabel",defaultMessage:"Got it",description:"Default onboarding tooltip action label. Used to acknowledge and close the tooltip."}),actionOnClick:v,actionHref:m,counter:p,autoScroll:h=!0,...U},G){const{formatMessage:$}=ge(),K=ne(),_=s.useId(),z=s.useId(),R=s.useId(),x=s.useRef(null);return s.useEffect(()=>{t&&x.current&&h&&He(x.current)},[h,t]),i?u:a.jsxs(je,{open:t,onOpenChange:r,children:[a.jsx(ee,{ref:G,...U,children:a.jsx(ke,{ref:x,id:R,asChild:!0,children:u})}),a.jsx(Ne,{container:K,children:a.jsxs(Ve,{onInteractOutside:W=>{W.preventDefault()},side:l,className:b.content,"aria-labelledby":_,"aria-describedby":`${R} ${z}`,...ye(c,{preplyDsComponent:Ce.OnboardingTooltip}),children:[a.jsxs("div",{className:b.header,children:[a.jsx(Se,{className:b.close,"aria-label":$(be.close),"data-testid":"close",children:a.jsx(fe,{accent:"inverted",svg:pe})}),a.jsx(he,{tag:"h1",variant:"small",accent:"inverted",id:_,"aria-describedby":R,children:o})]}),a.jsx(ve,{variant:"default-regular",accent:"inverted",children:n}),a.jsxs("div",{className:b.footer,children:[p,a.jsx(me,{variant:"inverted",size:"small",onClick:v,href:m,dataset:{testid:"action"},wrap:!0,children:d})]}),a.jsx(De,{"aria-hidden":!0,className:b.arrow,width:18,height:11})]})})]})}),I=s.forwardRef(function(t,r){const[i,o]=s.useState(!0),n=l=>{var c;l||(c=t.onClose)==null||c.call(t),o(l)},u=()=>{var l,c;(l=t.actionOnClick)==null||l.call(t),o(!1),(c=t.onClose)==null||c.call(t)};return a.jsx(w,{...t,open:i,onOpenChange:n,actionOnClick:u,ref:r})});try{w.displayName="InternalOnboardingTooltip",w.__docgenInfo={description:"",displayName:"InternalOnboardingTooltip",props:{title:{defaultValue:null,description:"",name:"title",required:!0,type:{name:"enum",value:[{value:"undefined"},{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},text:{defaultValue:null,description:"",name:"text",required:!0,type:{name:"enum",value:[{value:"undefined"},{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},disabled:{defaultValue:null,description:"Disables tooltip completely",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},onClose:{defaultValue:null,description:"Called when the tooltip is closed",name:"onClose",required:!1,type:{name:"enum",value:[{value:"() => void"}]}},actionLabel:{defaultValue:{value:`(
2
2
  <FormattedMessage
3
3
  id="preply-ds.onboardingTooltip.actionLabel"
4
4
  defaultMessage="Got it"
@@ -1,4 +1,4 @@
1
- import{j as e}from"./jsx-runtime-BTJTZTIL.js";import{r as F}from"./index-Cb9e4tly.js";import{O as s}from"./OnboardingTooltip-B_kaIqZr.js";import{I as w}from"./IconButton-DN6fzHUD.js";import{F as C}from"./TokyoUIFav-DOVerCtW.js";import"./index-ChsGqxH_.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./index-CBNx_T-u.js";import"./index-s7KTOhR7.js";import"./index-BPCsOyHr.js";import"./index-Cc-bXjHe.js";import"./PortalElementProvider-C7eyjaTY.js";import"./Combination-5zjsB4UY.js";import"./tslib.es6-C7pnyCjR.js";import"./index-DPv9hOkP.js";import"./index-CAVIhQtL.js";import"./TokyoUIClose-thK8sk63.js";import"./Icon-C9LCNP6i.js";import"./text-accent-DvyJpEME.js";import"./classNames-9hsFPPZv.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-BT0Aq7PA.js";import"./componentNames-k0j3gHgH.js";import"./index-qlqSh81O.js";import"./defaults-czRWsFkX.js";import"./Text-Buodaus4.js";import"./text-centered-BFb64PJw.js";import"./Button-r7N6Ff_n.js";import"./ButtonBase-zwYgfoSw.js";import"./Spinner-CUtAzzFK.js";import"./useMergeRefs-SFH7Mw4x.js";import"./useHostname-PsilflFC.js";import"./index-CC6DAVyL.js";import"./Heading-D-ou4j7h.js";import"./index-DWSmmBvQ.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./shared-strings-DFzxd8lM.js";import"./message-CSdaKtIj.js";const pe={title:"Components/OnboardingTooltip",component:s,parameters:{preventIframeFromScrollingParent:!0,docs:{story:{inline:!1,height:250},description:{component:`Are you looking for a step-by-step tour? Check out [OnboardingTour](/docs/components-onboardingtour--docs).
1
+ import{j as e}from"./jsx-runtime-BTJTZTIL.js";import{r as F}from"./index-Cb9e4tly.js";import{O as s}from"./OnboardingTooltip-DcTHydZd.js";import{I as w}from"./IconButton-DSKTwXgX.js";import{F as C}from"./TokyoUIFav-DOVerCtW.js";import"./index-ChsGqxH_.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./index-CBNx_T-u.js";import"./index-s7KTOhR7.js";import"./index-BPCsOyHr.js";import"./index-Cc-bXjHe.js";import"./PortalElementProvider-C7eyjaTY.js";import"./Combination-5zjsB4UY.js";import"./tslib.es6-C7pnyCjR.js";import"./index-DPv9hOkP.js";import"./index-CAVIhQtL.js";import"./TokyoUIClose-thK8sk63.js";import"./Icon-5QESEDp5.js";import"./text-accent-DvyJpEME.js";import"./classNames-9hsFPPZv.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-BT0Aq7PA.js";import"./componentNames-k0j3gHgH.js";import"./index-qlqSh81O.js";import"./defaults-czRWsFkX.js";import"./Text-DiDZp_C4.js";import"./text-centered-BFb64PJw.js";import"./Button-CV3MrNle.js";import"./ButtonBase-BpIWpxNP.js";import"./Spinner-CUtAzzFK.js";import"./useMergeRefs-SFH7Mw4x.js";import"./useHostname-PsilflFC.js";import"./index-CC6DAVyL.js";import"./Heading-CTiQg0ko.js";import"./index-DWSmmBvQ.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./shared-strings-DFzxd8lM.js";import"./message-CSdaKtIj.js";const pe={title:"Components/OnboardingTooltip",component:s,parameters:{preventIframeFromScrollingParent:!0,docs:{story:{inline:!1,height:250},description:{component:`Are you looking for a step-by-step tour? Check out [OnboardingTour](/docs/components-onboardingtour--docs).
2
2
 
3
3
  Also see [Composing Popovers](/docs/guides-composing-popovers--docs) for usage with other popovers.`}}},decorators:[t=>e.jsx("div",{style:{margin:"auto",width:"max-content"},children:t()})]},O=t=>[!1,!1],j=t=>a=>{},o=()=>{const[t,a]=O(),i=j();return e.jsx(s,{title:"New Feature Available!",text:"We've added an exciting new feature to enhance your experience.",disabled:a||t,onClose:()=>i(!0),children:e.jsx(w,{variant:"ghost",svg:e.jsx(C,{}),assistiveText:"Favorite"})})};o.storyName="OnboardingTooltip";const r={parameters:{chromatic:{disableSnapshot:!0},docs:{source:{type:"dynamic"}}},render:()=>{const t=F.forwardRef(function(i,T){return e.jsx("button",{...i,ref:T})});return e.jsx(s,{title:"New Feature Available!",text:"We've added an exciting new feature to enhance your experience.",children:e.jsx(t,{children:"Custom child"})})}},n={tags:["!autodocs"],args:{title:"New Feature Available!",text:"We've added an exciting new feature to enhance your experience.",disabled:!1,onClose:()=>{},children:e.jsx(w,{variant:"ghost",svg:e.jsx(C,{}),assistiveText:"Favorite"})},argTypes:{title:{control:"text"},text:{control:"text"},actionLabel:{control:"text"},actionOnClick:{control:!1},actionHref:{control:"text"},disabled:{control:"boolean"},dataset:{control:"object"},onClose:{control:!1},children:{control:!1}},parameters:{docs:{story:{height:450}},chromatic:{disableSnapshot:!0}},decorators:[t=>e.jsx("div",{style:{minHeight:"100vh",display:"flex"},children:e.jsx("div",{style:{margin:"auto",width:"max-content"},children:t()})})]};var c,l,d,p,u;o.parameters={...o.parameters,docs:{...(c=o.parameters)==null?void 0:c.docs,source:{originalSource:`() => {
4
4
  const [wasTooltipSeen, loading] = useIsFeatureActive('new-feature');
@@ -1,4 +1,4 @@
1
- import{j as a}from"./jsx-runtime-BTJTZTIL.js";import{O as x}from"./OnboardingTooltip-B_kaIqZr.js";import{I}from"./IconButton-DN6fzHUD.js";import{F as f}from"./TokyoUIFav-DOVerCtW.js";import{w as s,a as r,e as n,u as m}from"./index-Dk_MCKuE.js";import{B as k}from"./Button-r7N6Ff_n.js";import{L as F}from"./LayoutFlex-CnhOGGxA.js";import"./index-ChsGqxH_.js";import"./index-Cb9e4tly.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./index-CBNx_T-u.js";import"./index-s7KTOhR7.js";import"./index-BPCsOyHr.js";import"./index-Cc-bXjHe.js";import"./PortalElementProvider-C7eyjaTY.js";import"./Combination-5zjsB4UY.js";import"./tslib.es6-C7pnyCjR.js";import"./index-DPv9hOkP.js";import"./index-CAVIhQtL.js";import"./TokyoUIClose-thK8sk63.js";import"./Icon-C9LCNP6i.js";import"./text-accent-DvyJpEME.js";import"./classNames-9hsFPPZv.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-BT0Aq7PA.js";import"./componentNames-k0j3gHgH.js";import"./index-qlqSh81O.js";import"./defaults-czRWsFkX.js";import"./Text-Buodaus4.js";import"./text-centered-BFb64PJw.js";import"./Heading-D-ou4j7h.js";import"./index-DWSmmBvQ.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./shared-strings-DFzxd8lM.js";import"./message-CSdaKtIj.js";import"./ButtonBase-zwYgfoSw.js";import"./Spinner-CUtAzzFK.js";import"./useMergeRefs-SFH7Mw4x.js";import"./useHostname-PsilflFC.js";import"./index-CC6DAVyL.js";import"./layout-relative.module-uOnIKnjS.js";const wt={title:"Components/OnboardingTooltip/Tests",component:x,parameters:{layout:"centered",controls:{disable:!0},chromatic:{disableSnapshot:!0}},tags:["!autodocs","!a11y-test","test"],decorators:[e=>a.jsx("div",{style:{margin:"100px 0"},children:e()})],args:{title:"Title",text:"Body text",actionLabel:"Action label",disabled:!1,onClose:()=>{},dataset:{testid:"tooltip"},children:a.jsx(I,{svg:a.jsx(f,{}),assistiveText:"Favorite"})}},c={play:async({canvasElement:e,step:o})=>{const i=s(e);await o("wait for tooltip to be visible",async()=>{await r(()=>{const t=i.getByTestId("tooltip");return n(t).toBeVisible()})}),await o("close the tooltip",()=>{const u=s(i.getByTestId("tooltip")).getByTestId("close");return m.click(u)}),await o("wait for tooltip to be hidden",async()=>{await r(()=>{const t=i.queryByTestId("tooltip");return n(t).toBeNull()})})}},l={play:async({canvasElement:e,step:o})=>{const i=s(e);await o("wait for tooltip to be visible",async()=>{await r(()=>{const t=i.getByTestId("tooltip");return n(t).toBeVisible()})}),await o("close the tooltip",()=>{const u=s(i.getByTestId("tooltip")).getByTestId("action");return m.click(u)}),await o("wait for tooltip to be hidden",async()=>{await r(()=>{const t=i.queryByTestId("tooltip");return n(t).toBeNull()})})}};function E(e){return new Promise(o=>setTimeout(o,e))}const p={render:e=>a.jsxs(F,{gap:"24",direction:"column",children:[a.jsx(k,{children:"Click outside the tooltip"}),a.jsx(x,{...e,children:a.jsx(I,{svg:a.jsx(f,{}),assistiveText:"Favorite"})})]}),play:async({canvasElement:e,step:o})=>{const i=s(e);await o("wait for tooltip to be visible",async()=>{await r(()=>{const t=i.getByTestId("tooltip");return n(t).toBeVisible()})}),await o("click outside the tooltip",()=>{const t=i.getByText("Click outside the tooltip");return m.click(t)}),await o("check the tooltip remain open",async()=>{await E(1e3);const t=i.getByTestId("tooltip");return n(t).toBeVisible()})}};var d,y,w;c.parameters={...c.parameters,docs:{...(d=c.parameters)==null?void 0:d.docs,source:{originalSource:`{
1
+ import{j as a}from"./jsx-runtime-BTJTZTIL.js";import{O as x}from"./OnboardingTooltip-DcTHydZd.js";import{I}from"./IconButton-DSKTwXgX.js";import{F as f}from"./TokyoUIFav-DOVerCtW.js";import{w as s,a as r,e as n,u as m}from"./index-Dk_MCKuE.js";import{B as k}from"./Button-CV3MrNle.js";import{L as F}from"./LayoutFlex--W1D5e-w.js";import"./index-ChsGqxH_.js";import"./index-Cb9e4tly.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./index-CBNx_T-u.js";import"./index-s7KTOhR7.js";import"./index-BPCsOyHr.js";import"./index-Cc-bXjHe.js";import"./PortalElementProvider-C7eyjaTY.js";import"./Combination-5zjsB4UY.js";import"./tslib.es6-C7pnyCjR.js";import"./index-DPv9hOkP.js";import"./index-CAVIhQtL.js";import"./TokyoUIClose-thK8sk63.js";import"./Icon-5QESEDp5.js";import"./text-accent-DvyJpEME.js";import"./classNames-9hsFPPZv.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-BT0Aq7PA.js";import"./componentNames-k0j3gHgH.js";import"./index-qlqSh81O.js";import"./defaults-czRWsFkX.js";import"./Text-DiDZp_C4.js";import"./text-centered-BFb64PJw.js";import"./Heading-CTiQg0ko.js";import"./index-DWSmmBvQ.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./shared-strings-DFzxd8lM.js";import"./message-CSdaKtIj.js";import"./ButtonBase-BpIWpxNP.js";import"./Spinner-CUtAzzFK.js";import"./useMergeRefs-SFH7Mw4x.js";import"./useHostname-PsilflFC.js";import"./index-CC6DAVyL.js";import"./layout-relative.module-uOnIKnjS.js";const wt={title:"Components/OnboardingTooltip/Tests",component:x,parameters:{layout:"centered",controls:{disable:!0},chromatic:{disableSnapshot:!0}},tags:["!autodocs","!a11y-test","test"],decorators:[e=>a.jsx("div",{style:{margin:"100px 0"},children:e()})],args:{title:"Title",text:"Body text",actionLabel:"Action label",disabled:!1,onClose:()=>{},dataset:{testid:"tooltip"},children:a.jsx(I,{svg:a.jsx(f,{}),assistiveText:"Favorite"})}},c={play:async({canvasElement:e,step:o})=>{const i=s(e);await o("wait for tooltip to be visible",async()=>{await r(()=>{const t=i.getByTestId("tooltip");return n(t).toBeVisible()})}),await o("close the tooltip",()=>{const u=s(i.getByTestId("tooltip")).getByTestId("close");return m.click(u)}),await o("wait for tooltip to be hidden",async()=>{await r(()=>{const t=i.queryByTestId("tooltip");return n(t).toBeNull()})})}},l={play:async({canvasElement:e,step:o})=>{const i=s(e);await o("wait for tooltip to be visible",async()=>{await r(()=>{const t=i.getByTestId("tooltip");return n(t).toBeVisible()})}),await o("close the tooltip",()=>{const u=s(i.getByTestId("tooltip")).getByTestId("action");return m.click(u)}),await o("wait for tooltip to be hidden",async()=>{await r(()=>{const t=i.queryByTestId("tooltip");return n(t).toBeNull()})})}};function E(e){return new Promise(o=>setTimeout(o,e))}const p={render:e=>a.jsxs(F,{gap:"24",direction:"column",children:[a.jsx(k,{children:"Click outside the tooltip"}),a.jsx(x,{...e,children:a.jsx(I,{svg:a.jsx(f,{}),assistiveText:"Favorite"})})]}),play:async({canvasElement:e,step:o})=>{const i=s(e);await o("wait for tooltip to be visible",async()=>{await r(()=>{const t=i.getByTestId("tooltip");return n(t).toBeVisible()})}),await o("click outside the tooltip",()=>{const t=i.getByText("Click outside the tooltip");return m.click(t)}),await o("check the tooltip remain open",async()=>{await E(1e3);const t=i.getByTestId("tooltip");return n(t).toBeVisible()})}};var d,y,w;c.parameters={...c.parameters,docs:{...(d=c.parameters)==null?void 0:d.docs,source:{originalSource:`{
2
2
  play: async ({
3
3
  canvasElement,
4
4
  step
@@ -1,4 +1,4 @@
1
- import{j as r}from"./jsx-runtime-BTJTZTIL.js";import{r as i}from"./index-Cb9e4tly.js";import{I as A}from"./OnboardingTooltip-B_kaIqZr.js";import"./index-DWSmmBvQ.js";import{M as m}from"./message-CSdaKtIj.js";const j="counter__ArBS-",_={counter:j},v=({totalSteps:c,nextActionLabel:s=r.jsx(m,{id:"preply-ds.onboardingTour.nextActionLabel",defaultMessage:"Next",description:"Onboarding tour next action label"}),completeActionLabel:t=r.jsx(m,{id:"preply-ds.onboardingTour.completeActionLabel",defaultMessage:"Got it",description:"Onboarding tour complete action label"}),onClose:e,onComplete:n,onStepChange:o,disabled:l,children:x,ctx:d})=>{const[f,p]=i.useState(!0),[u,b]=i.useState(0),g={totalSteps:c,nextActionLabel:s,completeActionLabel:t,onClose:()=>{p(!1),e==null||e()},active:!l&&f,currentStep:u,onActionClick:()=>{if(u===c-1)n==null||n(),p(!1);else{const a=u+1;b(a),o==null||o(a)}}};return r.jsx(d.Provider,{value:g,children:x})},w=i.forwardRef(function({ctx:s,...t},e){const n=i.useContext(s);if(!n)throw new Error("OnboardingTourContext not found");const{currentStep:o,totalSteps:l,onActionClick:x,onClose:d,active:f,nextActionLabel:p,completeActionLabel:u}=n,b=t.step===l-1,O=t.step===o,S=b?u:p,g=()=>{var a;(a=t.actionOnClick)==null||a.call(t),x()},h=a=>{a||d==null||d()};return r.jsx(A,{...t,counter:r.jsx("p",{className:_.counter,children:r.jsx(m,{id:"preply-ds.onboardingTour.counter",defaultMessage:"{currentStep} of {totalSteps}",description:"Onboarding tour step counter, e.g. '1 of 3'",values:{currentStep:o+1,totalSteps:l}})}),open:f&&O,onOpenChange:h,actionLabel:S,actionOnClick:g,ref:e})}),T=()=>{const c=i.createContext(null),s=e=>r.jsx(v,{...e,ctx:c}),t=i.forwardRef(function(n,o){return r.jsx(w,{...n,ctx:c,ref:o})});return{Provider:s,Step:t}};try{T.displayName="createOnboardingTour",T.__docgenInfo={description:`Creates a new onboarding tour.
1
+ import{j as r}from"./jsx-runtime-BTJTZTIL.js";import{r as i}from"./index-Cb9e4tly.js";import{I as A}from"./OnboardingTooltip-DcTHydZd.js";import"./index-DWSmmBvQ.js";import{M as m}from"./message-CSdaKtIj.js";const j="counter__ArBS-",_={counter:j},v=({totalSteps:c,nextActionLabel:s=r.jsx(m,{id:"preply-ds.onboardingTour.nextActionLabel",defaultMessage:"Next",description:"Onboarding tour next action label"}),completeActionLabel:t=r.jsx(m,{id:"preply-ds.onboardingTour.completeActionLabel",defaultMessage:"Got it",description:"Onboarding tour complete action label"}),onClose:e,onComplete:n,onStepChange:o,disabled:l,children:x,ctx:d})=>{const[f,p]=i.useState(!0),[u,b]=i.useState(0),g={totalSteps:c,nextActionLabel:s,completeActionLabel:t,onClose:()=>{p(!1),e==null||e()},active:!l&&f,currentStep:u,onActionClick:()=>{if(u===c-1)n==null||n(),p(!1);else{const a=u+1;b(a),o==null||o(a)}}};return r.jsx(d.Provider,{value:g,children:x})},w=i.forwardRef(function({ctx:s,...t},e){const n=i.useContext(s);if(!n)throw new Error("OnboardingTourContext not found");const{currentStep:o,totalSteps:l,onActionClick:x,onClose:d,active:f,nextActionLabel:p,completeActionLabel:u}=n,b=t.step===l-1,O=t.step===o,S=b?u:p,g=()=>{var a;(a=t.actionOnClick)==null||a.call(t),x()},h=a=>{a||d==null||d()};return r.jsx(A,{...t,counter:r.jsx("p",{className:_.counter,children:r.jsx(m,{id:"preply-ds.onboardingTour.counter",defaultMessage:"{currentStep} of {totalSteps}",description:"Onboarding tour step counter, e.g. '1 of 3'",values:{currentStep:o+1,totalSteps:l}})}),open:f&&O,onOpenChange:h,actionLabel:S,actionOnClick:g,ref:e})}),T=()=>{const c=i.createContext(null),s=e=>r.jsx(v,{...e,ctx:c}),t=i.forwardRef(function(n,o){return r.jsx(w,{...n,ctx:c,ref:o})});return{Provider:s,Step:t}};try{T.displayName="createOnboardingTour",T.__docgenInfo={description:`Creates a new onboarding tour.
2
2
 
3
3
  This factory pattern allows multiple independent tours to be nested within each other
4
4
  without context conflicts, as each tour maintains its own separate context and state.`,displayName:"createOnboardingTour",props:{}}}catch{}export{T as c};
@@ -1,8 +1,8 @@
1
- import{j as e}from"./jsx-runtime-BTJTZTIL.js";import{r as b}from"./index-Cb9e4tly.js";import{c as x}from"./OnboardingTour-Es9ODo5R.js";import{T as n}from"./Text-Buodaus4.js";import{L as y}from"./LayoutFlex-CnhOGGxA.js";import"./index-ChsGqxH_.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./OnboardingTooltip-B_kaIqZr.js";import"./index-CBNx_T-u.js";import"./index-s7KTOhR7.js";import"./index-BPCsOyHr.js";import"./index-Cc-bXjHe.js";import"./PortalElementProvider-C7eyjaTY.js";import"./Combination-5zjsB4UY.js";import"./tslib.es6-C7pnyCjR.js";import"./index-DPv9hOkP.js";import"./index-CAVIhQtL.js";import"./TokyoUIClose-thK8sk63.js";import"./Icon-C9LCNP6i.js";import"./text-accent-DvyJpEME.js";import"./classNames-9hsFPPZv.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-BT0Aq7PA.js";import"./componentNames-k0j3gHgH.js";import"./index-qlqSh81O.js";import"./defaults-czRWsFkX.js";import"./Button-r7N6Ff_n.js";import"./ButtonBase-zwYgfoSw.js";import"./Spinner-CUtAzzFK.js";import"./useMergeRefs-SFH7Mw4x.js";import"./useHostname-PsilflFC.js";import"./index-CC6DAVyL.js";import"./Heading-D-ou4j7h.js";import"./text-centered-BFb64PJw.js";import"./index-DWSmmBvQ.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./shared-strings-DFzxd8lM.js";import"./message-CSdaKtIj.js";import"./layout-relative.module-uOnIKnjS.js";const l=t=>null,s=t=>null;try{l.displayName="OnboardingTourProvider",l.__docgenInfo={description:`For some reason, storybook fails to render arg tables for the components
1
+ import{j as e}from"./jsx-runtime-BTJTZTIL.js";import{r as b}from"./index-Cb9e4tly.js";import{c as x}from"./OnboardingTour-CrSpwDGC.js";import{T as n}from"./Text-DiDZp_C4.js";import{L as y}from"./LayoutFlex--W1D5e-w.js";import"./index-ChsGqxH_.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./OnboardingTooltip-DcTHydZd.js";import"./index-CBNx_T-u.js";import"./index-s7KTOhR7.js";import"./index-BPCsOyHr.js";import"./index-Cc-bXjHe.js";import"./PortalElementProvider-C7eyjaTY.js";import"./Combination-5zjsB4UY.js";import"./tslib.es6-C7pnyCjR.js";import"./index-DPv9hOkP.js";import"./index-CAVIhQtL.js";import"./TokyoUIClose-thK8sk63.js";import"./Icon-5QESEDp5.js";import"./text-accent-DvyJpEME.js";import"./classNames-9hsFPPZv.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-BT0Aq7PA.js";import"./componentNames-k0j3gHgH.js";import"./index-qlqSh81O.js";import"./defaults-czRWsFkX.js";import"./Button-CV3MrNle.js";import"./ButtonBase-BpIWpxNP.js";import"./Spinner-CUtAzzFK.js";import"./useMergeRefs-SFH7Mw4x.js";import"./useHostname-PsilflFC.js";import"./index-CC6DAVyL.js";import"./Heading-CTiQg0ko.js";import"./text-centered-BFb64PJw.js";import"./index-DWSmmBvQ.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./shared-strings-DFzxd8lM.js";import"./message-CSdaKtIj.js";import"./layout-relative.module-uOnIKnjS.js";const l=t=>null,s=t=>null;try{l.displayName="OnboardingTourProvider",l.__docgenInfo={description:`For some reason, storybook fails to render arg tables for the components
2
2
  when they're created with the \`createOnboardingTour\` function.
3
3
 
4
4
  As a workaround, we're manually defining fake components with the same
5
- props as originals just for props parsing ¯\\_(ツ)_/¯`,displayName:"OnboardingTourProvider",props:{totalSteps:{defaultValue:null,description:"Total number of steps in the tour",name:"totalSteps",required:!0,type:{name:"number"}},nextActionLabel:{defaultValue:{value:'"Next"'},description:'Label for the "Next" action button',name:"nextActionLabel",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"}]}},completeActionLabel:{defaultValue:{value:'"Got it"'},description:'Label for the "Complete" action button',name:"completeActionLabel",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"}]}},disabled:{defaultValue:null,description:"Whether the tour is disabled",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},onClose:{defaultValue:null,description:"Called when the tour is closed",name:"onClose",required:!1,type:{name:"enum",value:[{value:"() => void"}]}},onComplete:{defaultValue:null,description:"Called when the tour is completed",name:"onComplete",required:!1,type:{name:"enum",value:[{value:"() => void"}]}},onStepChange:{defaultValue:null,description:"Called when the current step index changes",name:"onStepChange",required:!1,type:{name:"enum",value:[{value:"(step: number) => void"}]}}}}}catch{}try{s.displayName="OnboardingTourStep",s.__docgenInfo={description:"",displayName:"OnboardingTourStep",props:{dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},side:{defaultValue:null,description:"Preferred side of the tooltip to appear from. Use if default side might block important content.",name:"side",required:!1,type:{name:"enum",value:[{value:'"top"'},{value:'"right"'},{value:'"bottom"'},{value:'"left"'}]}},title:{defaultValue:null,description:"",name:"title",required:!0,type:{name:"enum",value:[{value:"undefined"},{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},text:{defaultValue:null,description:"",name:"text",required:!0,type:{name:"enum",value:[{value:"undefined"},{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},actionOnClick:{defaultValue:null,description:"By default, the action button closes the tooltip.\n\nProvide `actionOnClick` to also perform other action.",name:"actionOnClick",required:!1,type:{name:"enum",value:[{value:"() => void"}]}},autoScroll:{defaultValue:{value:"true"},description:"If true, the tooltip will automatically scroll into view when it is opened.",name:"autoScroll",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},step:{defaultValue:null,description:"Zero-based step index",name:"step",required:!0,type:{name:"number"}}}}}catch{}const o=x(),pe={title:"Components/OnboardingTour",component:l,subcomponents:{OnboardingTourStep:s},parameters:{preventIframeFromScrollingParent:!0,docs:{story:{inline:!1,height:250},description:{component:"Are you looking for a tooltip to highlight single element? Check out [OnboardingTooltip](/docs/components-onboardingtooltip--docs)"}}},decorators:[t=>e.jsx("div",{style:{margin:"auto",width:"max-content"},children:t()})]},C=t=>[!1,!1],j=t=>i=>{},r=()=>{const[t,i]=C(),T=j();return e.jsxs(o.Provider,{totalSteps:3,disabled:i||t,onComplete:()=>T(!0),children:[e.jsx("div",{style:{height:250},children:e.jsx(o.Step,{step:0,title:"Step 1",text:"This is the first step of the onboarding tour.",children:e.jsx(n,{children:"Step 1"})})}),e.jsx("div",{style:{height:250},children:e.jsx(o.Step,{step:1,title:"Step 2",text:"This is the second step of the onboarding tour.",children:e.jsx(n,{children:"Step 2"})})}),e.jsx("div",{style:{height:250},children:e.jsx(o.Step,{step:2,title:"Step 3",text:"This is the final step of the onboarding tour.",children:e.jsx(n,{children:"Step 3"})})})]})};r.storyName="OnboardingTour";const a=()=>{const[t,i]=b.useState(!0);return e.jsx(o.Provider,{totalSteps:3,children:e.jsxs(y,{gap:"12",children:[e.jsx(o.Step,{step:0,title:"First step",text:"This is the first step of the onboarding tour.",children:e.jsx(n,{children:"Step 1"})}),e.jsx(o.Step,{step:1,title:"Second step",text:"This is the second step of the onboarding tour.",actionOnClick:()=>i(!1),children:e.jsx(n,{children:"Step 2"})}),!t&&e.jsx(o.Step,{step:2,title:"Final step",text:"This is the final step of the onboarding tour.",children:e.jsx(n,{children:"Step 3 (I was hidden)"})})]})})};var u,p,d,c,m;r.parameters={...r.parameters,docs:{...(u=r.parameters)==null?void 0:u.docs,source:{originalSource:`() => {
5
+ props as originals just for props parsing ¯\\_(ツ)_/¯`,displayName:"OnboardingTourProvider",props:{totalSteps:{defaultValue:null,description:"Total number of steps in the tour",name:"totalSteps",required:!0,type:{name:"number"}},nextActionLabel:{defaultValue:{value:'"Next"'},description:'Label for the "Next" action button',name:"nextActionLabel",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"}]}},completeActionLabel:{defaultValue:{value:'"Got it"'},description:'Label for the "Complete" action button',name:"completeActionLabel",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"}]}},disabled:{defaultValue:null,description:"Whether the tour is disabled",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},onClose:{defaultValue:null,description:"Called when the tour is closed",name:"onClose",required:!1,type:{name:"enum",value:[{value:"() => void"}]}},onComplete:{defaultValue:null,description:"Called when the tour is completed",name:"onComplete",required:!1,type:{name:"enum",value:[{value:"() => void"}]}},onStepChange:{defaultValue:null,description:"Called when the current step index changes",name:"onStepChange",required:!1,type:{name:"enum",value:[{value:"(step: number) => void"}]}}}}}catch{}try{s.displayName="OnboardingTourStep",s.__docgenInfo={description:"",displayName:"OnboardingTourStep",props:{title:{defaultValue:null,description:"",name:"title",required:!0,type:{name:"enum",value:[{value:"undefined"},{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},text:{defaultValue:null,description:"",name:"text",required:!0,type:{name:"enum",value:[{value:"undefined"},{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},actionOnClick:{defaultValue:null,description:"By default, the action button closes the tooltip.\n\nProvide `actionOnClick` to also perform other action.",name:"actionOnClick",required:!1,type:{name:"enum",value:[{value:"() => void"}]}},side:{defaultValue:null,description:"Preferred side of the tooltip to appear from. Use if default side might block important content.",name:"side",required:!1,type:{name:"enum",value:[{value:'"top"'},{value:'"right"'},{value:'"bottom"'},{value:'"left"'}]}},autoScroll:{defaultValue:{value:"true"},description:"If true, the tooltip will automatically scroll into view when it is opened.",name:"autoScroll",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},step:{defaultValue:null,description:"Zero-based step index",name:"step",required:!0,type:{name:"number"}}}}}catch{}const o=x(),pe={title:"Components/OnboardingTour",component:l,subcomponents:{OnboardingTourStep:s},parameters:{preventIframeFromScrollingParent:!0,docs:{story:{inline:!1,height:250},description:{component:"Are you looking for a tooltip to highlight single element? Check out [OnboardingTooltip](/docs/components-onboardingtooltip--docs)"}}},decorators:[t=>e.jsx("div",{style:{margin:"auto",width:"max-content"},children:t()})]},C=t=>[!1,!1],j=t=>i=>{},r=()=>{const[t,i]=C(),T=j();return e.jsxs(o.Provider,{totalSteps:3,disabled:i||t,onComplete:()=>T(!0),children:[e.jsx("div",{style:{height:250},children:e.jsx(o.Step,{step:0,title:"Step 1",text:"This is the first step of the onboarding tour.",children:e.jsx(n,{children:"Step 1"})})}),e.jsx("div",{style:{height:250},children:e.jsx(o.Step,{step:1,title:"Step 2",text:"This is the second step of the onboarding tour.",children:e.jsx(n,{children:"Step 2"})})}),e.jsx("div",{style:{height:250},children:e.jsx(o.Step,{step:2,title:"Step 3",text:"This is the final step of the onboarding tour.",children:e.jsx(n,{children:"Step 3"})})})]})};r.storyName="OnboardingTour";const a=()=>{const[t,i]=b.useState(!0);return e.jsx(o.Provider,{totalSteps:3,children:e.jsxs(y,{gap:"12",children:[e.jsx(o.Step,{step:0,title:"First step",text:"This is the first step of the onboarding tour.",children:e.jsx(n,{children:"Step 1"})}),e.jsx(o.Step,{step:1,title:"Second step",text:"This is the second step of the onboarding tour.",actionOnClick:()=>i(!1),children:e.jsx(n,{children:"Step 2"})}),!t&&e.jsx(o.Step,{step:2,title:"Final step",text:"This is the final step of the onboarding tour.",children:e.jsx(n,{children:"Step 3 (I was hidden)"})})]})})};var u,p,d,c,m;r.parameters={...r.parameters,docs:{...(u=r.parameters)==null?void 0:u.docs,source:{originalSource:`() => {
6
6
  const [wasTourCompleted, loading] = useIsFeatureActive('my-tour');
7
7
  const setTourCompleted = useToggleFeature('my-tour');
8
8
  return <Tour.Provider totalSteps={3} disabled={loading || wasTourCompleted} onComplete={() => setTourCompleted(true)}>
@@ -1,4 +1,4 @@
1
- import{j as e}from"./jsx-runtime-BTJTZTIL.js";import{r as h}from"./index-Cb9e4tly.js";import{c as I}from"./OnboardingTour-Es9ODo5R.js";import{T as u}from"./Text-Buodaus4.js";import{B as b}from"./Button-r7N6Ff_n.js";import{f as v,w as p,a as c,e as n,u as l}from"./index-Dk_MCKuE.js";import{L as C}from"./LayoutFlex-CnhOGGxA.js";import"./index-ChsGqxH_.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./OnboardingTooltip-B_kaIqZr.js";import"./index-CBNx_T-u.js";import"./index-s7KTOhR7.js";import"./index-BPCsOyHr.js";import"./index-Cc-bXjHe.js";import"./PortalElementProvider-C7eyjaTY.js";import"./Combination-5zjsB4UY.js";import"./tslib.es6-C7pnyCjR.js";import"./index-DPv9hOkP.js";import"./index-CAVIhQtL.js";import"./TokyoUIClose-thK8sk63.js";import"./Icon-C9LCNP6i.js";import"./text-accent-DvyJpEME.js";import"./classNames-9hsFPPZv.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-BT0Aq7PA.js";import"./componentNames-k0j3gHgH.js";import"./index-qlqSh81O.js";import"./defaults-czRWsFkX.js";import"./Heading-D-ou4j7h.js";import"./text-centered-BFb64PJw.js";import"./index-DWSmmBvQ.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./shared-strings-DFzxd8lM.js";import"./message-CSdaKtIj.js";import"./ButtonBase-zwYgfoSw.js";import"./Spinner-CUtAzzFK.js";import"./useMergeRefs-SFH7Mw4x.js";import"./useHostname-PsilflFC.js";import"./index-CC6DAVyL.js";import"./layout-relative.module-uOnIKnjS.js";const d=I(),Lt={title:"Components/OnboardingTour/Tests",parameters:{layout:"centered",controls:{disable:!0},chromatic:{disableSnapshot:!0}},tags:["!autodocs","!a11y-test","test"],decorators:[i=>e.jsx("div",{style:{margin:"100px 0"},children:i()})],args:{onComplete:v(),onClose:v(),onStepChange:v()}},y={render:({onComplete:i,onStepChange:s})=>e.jsx(d.Provider,{totalSteps:3,nextActionLabel:"Next",completeActionLabel:"Got it",onComplete:i,onStepChange:s,children:e.jsxs(C,{gap:"24",direction:"column",children:[e.jsx(d.Step,{step:0,title:"Title",text:"Text",dataset:{testid:"step-1"},children:e.jsx(u,{children:"Step 1 Content"})}),e.jsx(d.Step,{step:1,title:"Title",text:"Text",dataset:{testid:"step-2"},children:e.jsx(u,{children:"Step 2 Content"})}),e.jsx(d.Step,{step:2,title:"Title",text:"Text",dataset:{testid:"step-3"},children:e.jsx(u,{children:"Step 3 Content"})})]})}),play:async({canvasElement:i,step:s,args:t})=>{const a=p(i);await s("First step should be visible initially",async()=>{await c(()=>{const o=a.getByTestId("step-1");n(o).toBeVisible()})}),await s("Click Next to advance to second step",async()=>{const r=p(a.getByTestId("step-1")).getByTestId("action");await l.click(r),await c(()=>{const T=a.getByTestId("step-2");n(T).toBeVisible(),n(t.onStepChange).toHaveBeenCalledWith(1)})}),await s("Click Next to advance to final step",async()=>{const r=p(a.getByTestId("step-2")).getByTestId("action");await l.click(r),await c(()=>{const T=a.getByTestId("step-3");n(T).toBeVisible(),n(t.onStepChange).toHaveBeenCalledWith(2)})}),await s("Complete tour",async()=>{const r=p(a.getByTestId("step-3")).getByTestId("action");await l.click(r),await c(()=>{const T=a.queryByTestId("step",{exact:!1});n(T).toBeNull(),n(t.onComplete).toHaveBeenCalled()})})}},x={render:({onClose:i})=>e.jsx(d.Provider,{totalSteps:2,nextActionLabel:"Next",completeActionLabel:"Got it",onClose:i,children:e.jsx(d.Step,{step:0,title:"First step",text:"Try closing this step",dataset:{testid:"step-1"},children:e.jsx(u,{children:"Step 1 Content"})})}),play:async({canvasElement:i,step:s})=>{const t=p(i);await s("Step should be initially visible",async()=>{await c(()=>{const a=t.getByTestId("step-1");n(a).toBeVisible()})}),await s("Click close button to close tour",async({args:a})=>{const r=p(t.getByTestId("step-1")).getByTestId("close");await l.click(r),await c(()=>{const T=t.queryByTestId("step",{exact:!1});n(T).toBeNull(),n(a.onClose).toHaveBeenCalled()})})}},B={render:function(){const[s,t]=h.useState(!0);return e.jsxs(C,{gap:"24",direction:"column",children:[e.jsx(b,{onClick:()=>t(!s),dataset:{testid:"toggle-button"},children:s?"Enable Tour":"Disable Tour"}),e.jsx(d.Provider,{totalSteps:2,nextActionLabel:"Next",completeActionLabel:"Got it",disabled:s,children:e.jsx(d.Step,{step:0,title:"First step",text:"This step should be hidden when disabled",dataset:{testid:"step-1"},children:e.jsx(u,{children:"Step 1 Content"})})})]})},play:async({canvasElement:i,step:s})=>{const t=p(i);await s("Tour should be initially disabled",async()=>{const a=t.queryByTestId("step-1");n(a).toBeNull()}),await s("Click enable button to show tour",async()=>{const a=t.getByTestId("toggle-button");await l.click(a),await c(()=>{const o=t.getByTestId("step-1");n(o).toBeVisible()})})}},g=I(),S=I(),w={render:function(){const[s,t]=h.useState(!1),[a,o]=h.useState(!1);return e.jsxs(g.Provider,{totalSteps:2,disabled:!s,nextActionLabel:"Next",completeActionLabel:"Got it",children:[e.jsx(g.Step,{step:0,title:"Title",text:"Text",dataset:{testid:"outer-step-1"},children:e.jsx(b,{onClick:()=>t(!0),dataset:{testid:"start-outer-tour"},children:"Start outer tour"})}),e.jsxs(S.Provider,{totalSteps:2,disabled:!a,nextActionLabel:"Next",completeActionLabel:"Done",children:[e.jsx(g.Step,{step:1,title:"Title",text:"Text",dataset:{testid:"outer-step-2"},children:e.jsx(u,{children:"Outer Tour Step"})}),e.jsx(S.Step,{step:0,title:"Title",text:"Text",dataset:{testid:"inner-step-1"},children:e.jsx(b,{onClick:()=>o(!0),dataset:{testid:"start-inner-tour"},children:"Start inner tour"})}),e.jsx(S.Step,{step:1,title:"Title",text:"Text",dataset:{testid:"inner-step-2"},children:e.jsx(u,{children:"Inner Tour Step"})})]})]})},play:async({canvasElement:i,step:s})=>{const t=p(i);await s("Start inner tour, step 1 should be visible",async()=>{const a=t.getByTestId("start-inner-tour");await l.click(a),await c(async()=>{const o=t.queryByTestId("inner-step-1");n(o).toBeVisible()})}),await s("Advance inner tour, step 2 should be visible",async()=>{const o=p(t.getByTestId("inner-step-1")).getByTestId("action");await l.click(o),await c(async()=>{const r=t.queryByTestId("inner-step-2");n(r).toBeVisible()})}),await s("Complete inner tour",async()=>{const o=p(t.getByTestId("inner-step-2")).getByTestId("action");await l.click(o),await c(async()=>{const r=t.queryByTestId("inner-step-1",{exact:!1});n(r).toBeNull()})}),await s("Start outer tour, step 1 should be visible",async()=>{const a=t.getByTestId("start-outer-tour");await l.click(a),await c(async()=>{const o=t.queryByTestId("outer-step-1");n(o).toBeVisible()})}),await s("Advance outer tour, step 2 should be visible",async()=>{const o=p(t.getByTestId("outer-step-1")).getByTestId("action");await l.click(o),await c(async()=>{const r=t.queryByTestId("outer-step-2");n(r).toBeVisible()})}),await s("Complete outer tour",async()=>{const o=p(t.getByTestId("outer-step-2")).getByTestId("action");await l.click(o),await c(async()=>{const r=t.queryByTestId("-step-",{exact:!1});n(r).toBeNull()})})}};function W(i){return new Promise(s=>setTimeout(s,i))}const m={render:()=>e.jsxs(C,{gap:"24",direction:"column",children:[e.jsx(b,{children:"Click outside the tooltip"}),e.jsx(d.Provider,{totalSteps:1,nextActionLabel:"Next",completeActionLabel:"Got it",children:e.jsx(d.Step,{step:0,title:"Title",text:"Text",dataset:{testid:"step-1"},children:e.jsx(u,{children:"Step 1 Content"})})})]}),play:async({canvasElement:i,step:s})=>{const t=p(i);await s("Step should be initially visible",async()=>{await c(()=>{const a=t.getByTestId("step-1");n(a).toBeVisible()})}),await s("Click outside the tooltip",()=>{const a=t.getByText("Click outside the tooltip");return l.click(a)}),await s("Wait for tooltip to be hidden",async()=>{await W(1e3);const a=t.getByTestId("step-1");n(a).toBeVisible()})}};var k,j,L;y.parameters={...y.parameters,docs:{...(k=y.parameters)==null?void 0:k.docs,source:{originalSource:`{
1
+ import{j as e}from"./jsx-runtime-BTJTZTIL.js";import{r as h}from"./index-Cb9e4tly.js";import{c as I}from"./OnboardingTour-CrSpwDGC.js";import{T as u}from"./Text-DiDZp_C4.js";import{B as b}from"./Button-CV3MrNle.js";import{f as v,w as p,a as c,e as n,u as l}from"./index-Dk_MCKuE.js";import{L as C}from"./LayoutFlex--W1D5e-w.js";import"./index-ChsGqxH_.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./OnboardingTooltip-DcTHydZd.js";import"./index-CBNx_T-u.js";import"./index-s7KTOhR7.js";import"./index-BPCsOyHr.js";import"./index-Cc-bXjHe.js";import"./PortalElementProvider-C7eyjaTY.js";import"./Combination-5zjsB4UY.js";import"./tslib.es6-C7pnyCjR.js";import"./index-DPv9hOkP.js";import"./index-CAVIhQtL.js";import"./TokyoUIClose-thK8sk63.js";import"./Icon-5QESEDp5.js";import"./text-accent-DvyJpEME.js";import"./classNames-9hsFPPZv.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-BT0Aq7PA.js";import"./componentNames-k0j3gHgH.js";import"./index-qlqSh81O.js";import"./defaults-czRWsFkX.js";import"./Heading-CTiQg0ko.js";import"./text-centered-BFb64PJw.js";import"./index-DWSmmBvQ.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./shared-strings-DFzxd8lM.js";import"./message-CSdaKtIj.js";import"./ButtonBase-BpIWpxNP.js";import"./Spinner-CUtAzzFK.js";import"./useMergeRefs-SFH7Mw4x.js";import"./useHostname-PsilflFC.js";import"./index-CC6DAVyL.js";import"./layout-relative.module-uOnIKnjS.js";const d=I(),Lt={title:"Components/OnboardingTour/Tests",parameters:{layout:"centered",controls:{disable:!0},chromatic:{disableSnapshot:!0}},tags:["!autodocs","!a11y-test","test"],decorators:[i=>e.jsx("div",{style:{margin:"100px 0"},children:i()})],args:{onComplete:v(),onClose:v(),onStepChange:v()}},y={render:({onComplete:i,onStepChange:s})=>e.jsx(d.Provider,{totalSteps:3,nextActionLabel:"Next",completeActionLabel:"Got it",onComplete:i,onStepChange:s,children:e.jsxs(C,{gap:"24",direction:"column",children:[e.jsx(d.Step,{step:0,title:"Title",text:"Text",dataset:{testid:"step-1"},children:e.jsx(u,{children:"Step 1 Content"})}),e.jsx(d.Step,{step:1,title:"Title",text:"Text",dataset:{testid:"step-2"},children:e.jsx(u,{children:"Step 2 Content"})}),e.jsx(d.Step,{step:2,title:"Title",text:"Text",dataset:{testid:"step-3"},children:e.jsx(u,{children:"Step 3 Content"})})]})}),play:async({canvasElement:i,step:s,args:t})=>{const a=p(i);await s("First step should be visible initially",async()=>{await c(()=>{const o=a.getByTestId("step-1");n(o).toBeVisible()})}),await s("Click Next to advance to second step",async()=>{const r=p(a.getByTestId("step-1")).getByTestId("action");await l.click(r),await c(()=>{const T=a.getByTestId("step-2");n(T).toBeVisible(),n(t.onStepChange).toHaveBeenCalledWith(1)})}),await s("Click Next to advance to final step",async()=>{const r=p(a.getByTestId("step-2")).getByTestId("action");await l.click(r),await c(()=>{const T=a.getByTestId("step-3");n(T).toBeVisible(),n(t.onStepChange).toHaveBeenCalledWith(2)})}),await s("Complete tour",async()=>{const r=p(a.getByTestId("step-3")).getByTestId("action");await l.click(r),await c(()=>{const T=a.queryByTestId("step",{exact:!1});n(T).toBeNull(),n(t.onComplete).toHaveBeenCalled()})})}},x={render:({onClose:i})=>e.jsx(d.Provider,{totalSteps:2,nextActionLabel:"Next",completeActionLabel:"Got it",onClose:i,children:e.jsx(d.Step,{step:0,title:"First step",text:"Try closing this step",dataset:{testid:"step-1"},children:e.jsx(u,{children:"Step 1 Content"})})}),play:async({canvasElement:i,step:s})=>{const t=p(i);await s("Step should be initially visible",async()=>{await c(()=>{const a=t.getByTestId("step-1");n(a).toBeVisible()})}),await s("Click close button to close tour",async({args:a})=>{const r=p(t.getByTestId("step-1")).getByTestId("close");await l.click(r),await c(()=>{const T=t.queryByTestId("step",{exact:!1});n(T).toBeNull(),n(a.onClose).toHaveBeenCalled()})})}},B={render:function(){const[s,t]=h.useState(!0);return e.jsxs(C,{gap:"24",direction:"column",children:[e.jsx(b,{onClick:()=>t(!s),dataset:{testid:"toggle-button"},children:s?"Enable Tour":"Disable Tour"}),e.jsx(d.Provider,{totalSteps:2,nextActionLabel:"Next",completeActionLabel:"Got it",disabled:s,children:e.jsx(d.Step,{step:0,title:"First step",text:"This step should be hidden when disabled",dataset:{testid:"step-1"},children:e.jsx(u,{children:"Step 1 Content"})})})]})},play:async({canvasElement:i,step:s})=>{const t=p(i);await s("Tour should be initially disabled",async()=>{const a=t.queryByTestId("step-1");n(a).toBeNull()}),await s("Click enable button to show tour",async()=>{const a=t.getByTestId("toggle-button");await l.click(a),await c(()=>{const o=t.getByTestId("step-1");n(o).toBeVisible()})})}},g=I(),S=I(),w={render:function(){const[s,t]=h.useState(!1),[a,o]=h.useState(!1);return e.jsxs(g.Provider,{totalSteps:2,disabled:!s,nextActionLabel:"Next",completeActionLabel:"Got it",children:[e.jsx(g.Step,{step:0,title:"Title",text:"Text",dataset:{testid:"outer-step-1"},children:e.jsx(b,{onClick:()=>t(!0),dataset:{testid:"start-outer-tour"},children:"Start outer tour"})}),e.jsxs(S.Provider,{totalSteps:2,disabled:!a,nextActionLabel:"Next",completeActionLabel:"Done",children:[e.jsx(g.Step,{step:1,title:"Title",text:"Text",dataset:{testid:"outer-step-2"},children:e.jsx(u,{children:"Outer Tour Step"})}),e.jsx(S.Step,{step:0,title:"Title",text:"Text",dataset:{testid:"inner-step-1"},children:e.jsx(b,{onClick:()=>o(!0),dataset:{testid:"start-inner-tour"},children:"Start inner tour"})}),e.jsx(S.Step,{step:1,title:"Title",text:"Text",dataset:{testid:"inner-step-2"},children:e.jsx(u,{children:"Inner Tour Step"})})]})]})},play:async({canvasElement:i,step:s})=>{const t=p(i);await s("Start inner tour, step 1 should be visible",async()=>{const a=t.getByTestId("start-inner-tour");await l.click(a),await c(async()=>{const o=t.queryByTestId("inner-step-1");n(o).toBeVisible()})}),await s("Advance inner tour, step 2 should be visible",async()=>{const o=p(t.getByTestId("inner-step-1")).getByTestId("action");await l.click(o),await c(async()=>{const r=t.queryByTestId("inner-step-2");n(r).toBeVisible()})}),await s("Complete inner tour",async()=>{const o=p(t.getByTestId("inner-step-2")).getByTestId("action");await l.click(o),await c(async()=>{const r=t.queryByTestId("inner-step-1",{exact:!1});n(r).toBeNull()})}),await s("Start outer tour, step 1 should be visible",async()=>{const a=t.getByTestId("start-outer-tour");await l.click(a),await c(async()=>{const o=t.queryByTestId("outer-step-1");n(o).toBeVisible()})}),await s("Advance outer tour, step 2 should be visible",async()=>{const o=p(t.getByTestId("outer-step-1")).getByTestId("action");await l.click(o),await c(async()=>{const r=t.queryByTestId("outer-step-2");n(r).toBeVisible()})}),await s("Complete outer tour",async()=>{const o=p(t.getByTestId("outer-step-2")).getByTestId("action");await l.click(o),await c(async()=>{const r=t.queryByTestId("-step-",{exact:!1});n(r).toBeNull()})})}};function W(i){return new Promise(s=>setTimeout(s,i))}const m={render:()=>e.jsxs(C,{gap:"24",direction:"column",children:[e.jsx(b,{children:"Click outside the tooltip"}),e.jsx(d.Provider,{totalSteps:1,nextActionLabel:"Next",completeActionLabel:"Got it",children:e.jsx(d.Step,{step:0,title:"Title",text:"Text",dataset:{testid:"step-1"},children:e.jsx(u,{children:"Step 1 Content"})})})]}),play:async({canvasElement:i,step:s})=>{const t=p(i);await s("Step should be initially visible",async()=>{await c(()=>{const a=t.getByTestId("step-1");n(a).toBeVisible()})}),await s("Click outside the tooltip",()=>{const a=t.getByText("Click outside the tooltip");return l.click(a)}),await s("Wait for tooltip to be hidden",async()=>{await W(1e3);const a=t.getByTestId("step-1");n(a).toBeVisible()})}};var k,j,L;y.parameters={...y.parameters,docs:{...(k=y.parameters)==null?void 0:k.docs,source:{originalSource:`{
2
2
  render: ({
3
3
  onComplete,
4
4
  onStepChange
@@ -1,6 +1,6 @@
1
- import{j as a}from"./jsx-runtime-BTJTZTIL.js";import{r as l}from"./index-Cb9e4tly.js";import{F as H}from"./FormControl-BEOVVHxt.js";import{F as L,a as I}from"./TokyoUIEye-CteyS9_g.js";import{F as M}from"./FieldButton-BgIvx-8D.js";import{u as x,d as T}from"./index-DWSmmBvQ.js";import{u as F}from"./useMergeRefs-D_RfOOSs.js";import{w as P}from"./componentNames-k0j3gHgH.js";import{I as k}from"./Input-CkgW02B0.js";const r=T({reveal:{id:"preply-ds.password-field.reveal.button",defaultMessage:"Reveal password",description:'A11y label for the "reveal password" button. Will be announced by screen reader.'},conceal:{id:"preply-ds.password-field.conceal.button",defaultMessage:"Conceal password",description:'A11y label for the "conceal password" button. Will be announced by screen reader.'}}),s=l.forwardRef(function({id:o,label:d,description:m,error:p,required:c,inputDataset:f,dataset:v,hideLabel:y,onClick:h,hasError:b,useLegacyRequiredLabel:g,className:D,style:_,...q},E){const{formatMessage:n}=x(),[e,V]=l.useState(!1),t=l.useRef(null),w=F(t,E),C=e?"text":"password",R=()=>{var u;V(!e),(u=t.current)==null||u.focus()};return a.jsx(H,{id:o,label:d,description:m,error:p,hasError:b,required:c,dataset:v,hideLabel:y,onClick:h,useLegacyRequiredLabel:g,preplyDsComponent:P.PasswordField,children:a.jsx(k,{...q,type:C,ref:w,dataset:f,button:a.jsx(M,{onClick:R,svg:e?L:I,assistiveText:n(e?r.conceal:r.reveal),dataset:{testid:"toggle-password-button"}})})})});try{s.displayName="PasswordField",s.__docgenInfo={description:"",displayName:"PasswordField",props:{dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},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>"}]}},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"}]}},label:{defaultValue:null,description:"The field label. This is needed for accessibility purposes, but can be\nhidden using the `hideLabel` prop.",name:"label",required:!0,type:{name:"enum",value:[{value:"undefined"},{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},hideLabel:{defaultValue:null,description:"Use this to hide the `label` visually, but keep it in the accessibility\ntree.",name:"hideLabel",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},description:{defaultValue:null,description:`Additional descriptive text that appears below the input field
3
- 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"}]}},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"
1
+ import{j as a}from"./jsx-runtime-BTJTZTIL.js";import{r as l}from"./index-Cb9e4tly.js";import{F as H}from"./FormControl-BEOVVHxt.js";import{F as L,a as I}from"./TokyoUIEye-CteyS9_g.js";import{F as M}from"./FieldButton-BgIvx-8D.js";import{u as x,d as T}from"./index-DWSmmBvQ.js";import{u as F}from"./useMergeRefs-D_RfOOSs.js";import{w as P}from"./componentNames-k0j3gHgH.js";import{I as k}from"./Input-CBd7qXZ8.js";const r=T({reveal:{id:"preply-ds.password-field.reveal.button",defaultMessage:"Reveal password",description:'A11y label for the "reveal password" button. Will be announced by screen reader.'},conceal:{id:"preply-ds.password-field.conceal.button",defaultMessage:"Conceal password",description:'A11y label for the "conceal password" button. Will be announced by screen reader.'}}),s=l.forwardRef(function({id:o,label:d,description:m,error:p,required:c,inputDataset:f,dataset:v,hideLabel:y,onClick:h,hasError:b,useLegacyRequiredLabel:g,className:D,style:_,...q},E){const{formatMessage:n}=x(),[e,V]=l.useState(!1),t=l.useRef(null),w=F(t,E),C=e?"text":"password",R=()=>{var u;V(!e),(u=t.current)==null||u.focus()};return a.jsx(H,{id:o,label:d,description:m,error:p,hasError:b,required:c,dataset:v,hideLabel:y,onClick:h,useLegacyRequiredLabel:g,preplyDsComponent:P.PasswordField,children:a.jsx(k,{...q,type:C,ref:w,dataset:f,button:a.jsx(M,{onClick:R,svg:e?L:I,assistiveText:n(e?r.conceal:r.reveal),dataset:{testid:"toggle-password-button"}})})})});try{s.displayName="PasswordField",s.__docgenInfo={description:"",displayName:"PasswordField",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"}]}},label:{defaultValue:null,description:"The field label. This is needed for accessibility purposes, but can be\nhidden using the `hideLabel` prop.",name:"label",required:!0,type:{name:"enum",value:[{value:"undefined"},{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},hideLabel:{defaultValue:null,description:"Use this to hide the `label` visually, but keep it in the accessibility\ntree.",name:"hideLabel",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},description:{defaultValue:null,description:`Additional descriptive text that appears below the input field
3
+ to provide more context or instructions to the user.`,name:"description",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},error:{defaultValue:null,description:"Error message to display when the field has an invalid value.",name:"error",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},hasError:{defaultValue:null,description:"Whether the field has an error.\n@deprecated Use `error` prop to 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"
4
4
  indicator next to the label.`,name:"required",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},useLegacyRequiredLabel:{defaultValue:null,description:`When true, adds a "Required" indicator next to the label for the required fields.
5
5
  When false, adds a "Optional" indicator next to the label for the optional fields instead.
6
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"}]}},disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},name:{defaultValue:null,description:"",name:"name",required:!1,type:{name:"enum",value:[{value:"string"}]}},onCopy:{defaultValue:null,description:"",name:"onCopy",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLInputElement>"}]}},onCut:{defaultValue:null,description:"",name:"onCut",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLInputElement>"}]}},onPaste:{defaultValue:null,description:"",name:"onPaste",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLInputElement>"}]}},onFocus:{defaultValue:null,description:"",name:"onFocus",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<HTMLInputElement>"}]}},onBlur:{defaultValue:null,description:"",name:"onBlur",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<HTMLInputElement>"}]}},onChange:{defaultValue:null,description:"",name:"onChange",required:!1,type:{name:"enum",value:[{value:"ChangeEventHandler<HTMLInputElement>"}]}},onKeyDown:{defaultValue:null,description:"",name:"onKeyDown",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<HTMLInputElement>"}]}},onKeyUp:{defaultValue:null,description:"",name:"onKeyUp",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<HTMLInputElement>"}]}},icon:{defaultValue:null,description:"",name:"icon",required:!1,type:{name:"enum",value:[{value:"ReactElement<any, string | JSXElementConstructor<any>>"}]}},onValueChange:{defaultValue:null,description:"",name:"onValueChange",required:!1,type:{name:"enum",value:[{value:"(value: string) => void"}]}},placeholder:{defaultValue:null,description:"",name:"placeholder",required:!1,type:{name:"enum",value:[{value:"string"}]}},readOnly:{defaultValue:null,description:"",name:"readOnly",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},maxLength:{defaultValue:null,description:"",name:"maxLength",required:!1,type:{name:"enum",value:[{value:"number"}]}},value:{defaultValue:null,description:"",name:"value",required:!1,type:{name:"enum",value:[{value:"string"}]}},defaultValue:{defaultValue:null,description:"",name:"defaultValue",required:!1,type:{name:"enum",value:[{value:"string"}]}},autoComplete:{defaultValue:null,description:"",name:"autoComplete",required:!1,type:{name:"enum",value:[{value:'"off"'},{value:'"new-password"'},{value:'"current-password"'}]}},inputDataset:{defaultValue:null,description:"",name:"inputDataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: HTMLInputElement | null) => void"},{value:"RefObject<HTMLInputElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}export{s as P};
@@ -1,4 +1,4 @@
1
- import{j as X}from"./jsx-runtime-BTJTZTIL.js";import{r as $}from"./index-Cb9e4tly.js";import{P as Y}from"./PasswordField-BDzBq_8p.js";import{f as o,w,e as n,u as v}from"./index-Dk_MCKuE.js";import{F as ee}from"./TokyoUILock-CUE2UpP8.js";import{I as te}from"./Icon-C9LCNP6i.js";import"./index-ChsGqxH_.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./FormControl-BEOVVHxt.js";import"./index-Cc-bXjHe.js";import"./index-DWSmmBvQ.js";import"./tslib.es6-C7pnyCjR.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./index-qlqSh81O.js";import"./message-CSdaKtIj.js";import"./componentNames-k0j3gHgH.js";import"./TokyoUIEye-CteyS9_g.js";import"./FieldButton-BgIvx-8D.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./classNames-9hsFPPZv.js";import"./useMergeRefs-D_RfOOSs.js";import"./Input-CkgW02B0.js";import"./InputContainer-B1hqJyx0.js";import"./text-accent-DvyJpEME.js";import"./render-icon-BT0Aq7PA.js";import"./defaults-czRWsFkX.js";const Pe={title:"components/PasswordField",component:Y,args:{name:"password",label:"Password",placeholder:"Enter a password",defaultValue:"",dataset:{testid:"field",foo:"bar"},inputDataset:{testid:"input",foo:"bar"},onChange:o(),onValueChange:o(),onBlur:o(),onFocus:o(),onClick:o(),onCopy:o(),onKeyDown:o(),onKeyUp:o(),onPaste:o()}},c={play:async({canvasElement:a,step:e,args:t})=>{const s=w(a),i=s.getByTestId("field"),r=s.getByTestId("input");await e("it should render correct label",async()=>{const Z=w(i).getByTestId("label");n(Z).toHaveTextContent("Password • Optional"),n(r).toHaveAccessibleName("Password")}),await e("it should call onFocus when the input is focused",async()=>{r.focus(),n(t.onFocus).toHaveBeenCalled()}),await e("it should call callback when the value changes",async()=>{await v.type(r,"secret123"),n(t.onValueChange).toHaveBeenCalledWith("secret123"),n(t.onChange).toHaveBeenCalled()}),await e("it should call onBlur when the input is blurred",async()=>{await v.keyboard("{tab}"),n(t.onBlur).toHaveBeenCalled()}),await e("it should render the dataset props",async()=>{n(i).toHaveAttribute("data-testid","field"),n(i).toHaveAttribute("data-foo","bar"),n(r).toHaveAttribute("data-testid","input"),n(r).toHaveAttribute("data-foo","bar")}),await e("it should have password type by default",async()=>{n(r).toHaveAttribute("type","password")})}},l={render:function(e){const[t,s]=$.useState(e.value);return X.jsx(Y,{...e,value:t,onChange:i=>{var r;s(i.target.value),(r=e.onChange)==null||r.call(e,i)}})},args:{label:"Controlled PasswordField",placeholder:"Enter your password...",value:"secret123"},play:async({canvas:a,step:e})=>{await e("it should render the correct initial value",async()=>{const t=a.getByTestId("input");await n(t).toHaveValue("secret123")}),await e("it should update the value when the user types",async()=>{const t=a.getByTestId("input");await v.clear(t),await v.type(t,"newpassword"),n(t).toHaveValue("newpassword")})}},d={args:{description:"Include letters, numbers and symbols"},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input"),s=a.getByTestId("description");await e("it should render the description",async()=>{n(t).toHaveAccessibleDescription("Include letters, numbers and symbols"),n(s).toHaveTextContent("Include letters, numbers and symbols")})}},p={args:{required:!0},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input"),s=a.getByTestId("label");await e("it should render correct label",async()=>{n(t).toHaveAccessibleName("Password"),n(s).toHaveTextContent("Password")}),await e("it should render required attribute",async()=>{n(t).toHaveAttribute("required")})}},u={args:{hideLabel:!0},play:async({canvas:a,step:e})=>{await e("it should render correct a11y label",async()=>{const t=a.getByTestId("input");n(t).toHaveAccessibleName("Password")})}},y={args:{error:"This is an error message"},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input"),s=a.getByTestId("error");await e("it should render the error message",async()=>{n(t).toHaveAccessibleErrorMessage("This is an error message"),n(s).toHaveTextContent("This is an error message")})}},m={args:{disabled:!0},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input");await e("it should render the disabled input",async()=>{n(t).toHaveAttribute("disabled")})}},b={args:{readOnly:!0},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input");await e("it should render the read only input",async()=>{n(t).toHaveAttribute("readonly")})}},h={parameters:{chromatic:{disableSnapshot:!0}},args:{label:"Password",placeholder:"e.g.: abc123%pt0!",description:"Include letters, numbers and symbols"},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"},readOnly:{control:"boolean"},maxLength:{control:"number"},icon:{options:["None","With Icon"],mapping:{None:void 0,"With Icon":X.jsx(te,{svg:ee})},control:"select"},autoComplete:{control:"select"},hasError:{table:{disable:!0}}}};var g,x,H,T,I;c.parameters={...c.parameters,docs:{...(g=c.parameters)==null?void 0:g.docs,source:{originalSource:`{
1
+ import{j as X}from"./jsx-runtime-BTJTZTIL.js";import{r as $}from"./index-Cb9e4tly.js";import{P as Y}from"./PasswordField-Lp2RJZ3t.js";import{f as o,w,e as n,u as v}from"./index-Dk_MCKuE.js";import{F as ee}from"./TokyoUILock-CUE2UpP8.js";import{I as te}from"./Icon-5QESEDp5.js";import"./index-ChsGqxH_.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./FormControl-BEOVVHxt.js";import"./index-Cc-bXjHe.js";import"./index-DWSmmBvQ.js";import"./tslib.es6-C7pnyCjR.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./index-qlqSh81O.js";import"./message-CSdaKtIj.js";import"./componentNames-k0j3gHgH.js";import"./TokyoUIEye-CteyS9_g.js";import"./FieldButton-BgIvx-8D.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./classNames-9hsFPPZv.js";import"./useMergeRefs-D_RfOOSs.js";import"./Input-CBd7qXZ8.js";import"./InputContainer-B1hqJyx0.js";import"./text-accent-DvyJpEME.js";import"./render-icon-BT0Aq7PA.js";import"./defaults-czRWsFkX.js";const Pe={title:"components/PasswordField",component:Y,args:{name:"password",label:"Password",placeholder:"Enter a password",defaultValue:"",dataset:{testid:"field",foo:"bar"},inputDataset:{testid:"input",foo:"bar"},onChange:o(),onValueChange:o(),onBlur:o(),onFocus:o(),onClick:o(),onCopy:o(),onKeyDown:o(),onKeyUp:o(),onPaste:o()}},c={play:async({canvasElement:a,step:e,args:t})=>{const s=w(a),i=s.getByTestId("field"),r=s.getByTestId("input");await e("it should render correct label",async()=>{const Z=w(i).getByTestId("label");n(Z).toHaveTextContent("Password • Optional"),n(r).toHaveAccessibleName("Password")}),await e("it should call onFocus when the input is focused",async()=>{r.focus(),n(t.onFocus).toHaveBeenCalled()}),await e("it should call callback when the value changes",async()=>{await v.type(r,"secret123"),n(t.onValueChange).toHaveBeenCalledWith("secret123"),n(t.onChange).toHaveBeenCalled()}),await e("it should call onBlur when the input is blurred",async()=>{await v.keyboard("{tab}"),n(t.onBlur).toHaveBeenCalled()}),await e("it should render the dataset props",async()=>{n(i).toHaveAttribute("data-testid","field"),n(i).toHaveAttribute("data-foo","bar"),n(r).toHaveAttribute("data-testid","input"),n(r).toHaveAttribute("data-foo","bar")}),await e("it should have password type by default",async()=>{n(r).toHaveAttribute("type","password")})}},l={render:function(e){const[t,s]=$.useState(e.value);return X.jsx(Y,{...e,value:t,onChange:i=>{var r;s(i.target.value),(r=e.onChange)==null||r.call(e,i)}})},args:{label:"Controlled PasswordField",placeholder:"Enter your password...",value:"secret123"},play:async({canvas:a,step:e})=>{await e("it should render the correct initial value",async()=>{const t=a.getByTestId("input");await n(t).toHaveValue("secret123")}),await e("it should update the value when the user types",async()=>{const t=a.getByTestId("input");await v.clear(t),await v.type(t,"newpassword"),n(t).toHaveValue("newpassword")})}},d={args:{description:"Include letters, numbers and symbols"},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input"),s=a.getByTestId("description");await e("it should render the description",async()=>{n(t).toHaveAccessibleDescription("Include letters, numbers and symbols"),n(s).toHaveTextContent("Include letters, numbers and symbols")})}},p={args:{required:!0},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input"),s=a.getByTestId("label");await e("it should render correct label",async()=>{n(t).toHaveAccessibleName("Password"),n(s).toHaveTextContent("Password")}),await e("it should render required attribute",async()=>{n(t).toHaveAttribute("required")})}},u={args:{hideLabel:!0},play:async({canvas:a,step:e})=>{await e("it should render correct a11y label",async()=>{const t=a.getByTestId("input");n(t).toHaveAccessibleName("Password")})}},y={args:{error:"This is an error message"},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input"),s=a.getByTestId("error");await e("it should render the error message",async()=>{n(t).toHaveAccessibleErrorMessage("This is an error message"),n(s).toHaveTextContent("This is an error message")})}},m={args:{disabled:!0},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input");await e("it should render the disabled input",async()=>{n(t).toHaveAttribute("disabled")})}},b={args:{readOnly:!0},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input");await e("it should render the read only input",async()=>{n(t).toHaveAttribute("readonly")})}},h={parameters:{chromatic:{disableSnapshot:!0}},args:{label:"Password",placeholder:"e.g.: abc123%pt0!",description:"Include letters, numbers and symbols"},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"},readOnly:{control:"boolean"},maxLength:{control:"number"},icon:{options:["None","With Icon"],mapping:{None:void 0,"With Icon":X.jsx(te,{svg:ee})},control:"select"},autoComplete:{control:"select"},hasError:{table:{disable:!0}}}};var g,x,H,T,I;c.parameters={...c.parameters,docs:{...(g=c.parameters)==null?void 0:g.docs,source:{originalSource:`{
2
2
  play: async ({
3
3
  canvasElement,
4
4
  step,
@@ -1,4 +1,4 @@
1
- import{j as e}from"./jsx-runtime-BTJTZTIL.js";import{r as C}from"./index-Cb9e4tly.js";import{g as I}from"./index-qlqSh81O.js";import{w}from"./componentNames-k0j3gHgH.js";import{I as g}from"./IconButton-DN6fzHUD.js";import{L as F}from"./LayoutFlex-CnhOGGxA.js";import{F as M,a as T}from"./TokyoUIMinus-RacYe9uc.js";import"./index-ChsGqxH_.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./render-icon-BT0Aq7PA.js";import"./ButtonBase-zwYgfoSw.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./Spinner-CUtAzzFK.js";import"./classNames-9hsFPPZv.js";import"./defaults-czRWsFkX.js";import"./useMergeRefs-SFH7Mw4x.js";import"./useHostname-PsilflFC.js";import"./index-CC6DAVyL.js";import"./layout-relative.module-uOnIKnjS.js";const k="ProgressBar__-Ss9D",q={ProgressBar:k},l=({min:a=0,max:s=100,value:t,"aria-label":r,dataset:o})=>{const p=I(o,{preplyDsComponent:w.ProgressBar}),c=(t-a)/(s-a)*100,d=`${Math.max(0,Math.min(100,c))}%`;return e.jsx("div",{...p,className:q.ProgressBar,role:"progressbar","aria-label":r,"aria-valuetext":d,"aria-valuenow":t,"aria-valuemin":a,"aria-valuemax":s,style:{"--progress-percentage":d}})};try{l.displayName="ProgressBar",l.__docgenInfo={description:"A component that visually displays continuous progress.\n\nFor a series of discrete progress steps, use the `ProgressSteps` component instead.",displayName:"ProgressBar",props:{min:{defaultValue:{value:"0"},description:"The minimum value of the progress bar.",name:"min",required:!1,type:{name:"enum",value:[{value:"number"}]}},max:{defaultValue:{value:"100"},description:"The maximum value of the progress bar.",name:"max",required:!1,type:{name:"enum",value:[{value:"number"}]}},value:{defaultValue:null,description:"The current value of the progress bar.",name:"value",required:!0,type:{name:"number"}},"aria-label":{defaultValue:null,description:`A description of the progress bar for screen readers.
1
+ import{j as e}from"./jsx-runtime-BTJTZTIL.js";import{r as C}from"./index-Cb9e4tly.js";import{g as I}from"./index-qlqSh81O.js";import{w}from"./componentNames-k0j3gHgH.js";import{I as g}from"./IconButton-DSKTwXgX.js";import{L as F}from"./LayoutFlex--W1D5e-w.js";import{F as M,a as T}from"./TokyoUIMinus-RacYe9uc.js";import"./index-ChsGqxH_.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./render-icon-BT0Aq7PA.js";import"./ButtonBase-BpIWpxNP.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./Spinner-CUtAzzFK.js";import"./classNames-9hsFPPZv.js";import"./defaults-czRWsFkX.js";import"./useMergeRefs-SFH7Mw4x.js";import"./useHostname-PsilflFC.js";import"./index-CC6DAVyL.js";import"./layout-relative.module-uOnIKnjS.js";const k="ProgressBar__-Ss9D",q={ProgressBar:k},l=({min:a=0,max:s=100,value:t,"aria-label":r,dataset:o})=>{const p=I(o,{preplyDsComponent:w.ProgressBar}),c=(t-a)/(s-a)*100,d=`${Math.max(0,Math.min(100,c))}%`;return e.jsx("div",{...p,className:q.ProgressBar,role:"progressbar","aria-label":r,"aria-valuetext":d,"aria-valuenow":t,"aria-valuemin":a,"aria-valuemax":s,style:{"--progress-percentage":d}})};try{l.displayName="ProgressBar",l.__docgenInfo={description:"A component that visually displays continuous progress.\n\nFor a series of discrete progress steps, use the `ProgressSteps` component instead.",displayName:"ProgressBar",props:{min:{defaultValue:{value:"0"},description:"The minimum value of the progress bar.",name:"min",required:!1,type:{name:"enum",value:[{value:"number"}]}},max:{defaultValue:{value:"100"},description:"The maximum value of the progress bar.",name:"max",required:!1,type:{name:"enum",value:[{value:"number"}]}},value:{defaultValue:null,description:"The current value of the progress bar.",name:"value",required:!0,type:{name:"number"}},"aria-label":{defaultValue:null,description:`A description of the progress bar for screen readers.
2
2
  @example 'Onboarding', 'Checkout', 'Survey', etc.`,name:"aria-label",required:!0,type:{name:"string"}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}}}}}catch{}const ae={title:"Components/ProgressBar",component:l,parameters:{docs:{description:{component:"A component that visually indicates progress through a range of values."}}},decorators:[a=>e.jsx("div",{style:{padding:"32px",width:"500px"},children:e.jsx(a,{})})],args:{"aria-label":"Story"}},n={tags:["!test"],args:{value:10,min:0,max:100},render:function({value:s,...t}){const[r,o]=C.useState(s),p=()=>o(Math.min(r+10,100)),c=()=>o(Math.max(r-10,0));return e.jsxs(F,{alignItems:"center",gap:"12",children:[e.jsx(g,{svg:M,assistiveText:"Subtract",onClick:c}),e.jsx("div",{style:{width:150},children:e.jsx(l,{...t,value:r})}),e.jsx(g,{svg:T,assistiveText:"Add",onClick:p})]})}},i={args:{value:0,min:0,max:100}},u={args:{value:100,min:0,max:100}},m={args:{value:2,min:1,max:5}};var v,x,f;n.parameters={...n.parameters,docs:{...(v=n.parameters)==null?void 0:v.docs,source:{originalSource:`{
3
3
  tags: ['!test'],
4
4
  args: {
@@ -1,4 +1,4 @@
1
- import{j as t}from"./jsx-runtime-BTJTZTIL.js";import{r as h}from"./index-Cb9e4tly.js";import{P as v}from"./ProgressSteps-BfCnfM68.js";import{L as y}from"./LayoutFlex-CnhOGGxA.js";import{I as c}from"./IconButton-DN6fzHUD.js";import{F as b,a as L}from"./TokyoUIMinus-RacYe9uc.js";import"./index-ChsGqxH_.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./index-DWSmmBvQ.js";import"./tslib.es6-C7pnyCjR.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./index-qlqSh81O.js";import"./componentNames-k0j3gHgH.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./layout-relative.module-uOnIKnjS.js";import"./classNames-9hsFPPZv.js";import"./defaults-czRWsFkX.js";import"./render-icon-BT0Aq7PA.js";import"./ButtonBase-zwYgfoSw.js";import"./Spinner-CUtAzzFK.js";import"./useMergeRefs-SFH7Mw4x.js";import"./useHostname-PsilflFC.js";import"./index-CC6DAVyL.js";const W={title:"Components/ProgressSteps",component:v,decorators:[a=>t.jsx("div",{style:{padding:"32px",width:"500px"},children:t.jsx(a,{})})],args:{"aria-label":"Story"}},r={tags:["!test"],args:{currentStep:6,totalSteps:6},render:function({currentStep:C,totalSteps:p,...j}){const[o,n]=h.useState(C),F=()=>n(Math.min(o+1,p)),I=()=>n(Math.max(o-1,1));return t.jsxs(y,{alignItems:"center",gap:"12",children:[t.jsx(c,{svg:b,assistiveText:"Subtract",onClick:I}),t.jsx(v,{...j,currentStep:o,totalSteps:p}),t.jsx(c,{svg:L,assistiveText:"Add",onClick:F})]})}},e={args:{currentStep:1,totalSteps:6}},s={args:{currentStep:6,totalSteps:6}};var i,m,u;r.parameters={...r.parameters,docs:{...(i=r.parameters)==null?void 0:i.docs,source:{originalSource:`{
1
+ import{j as t}from"./jsx-runtime-BTJTZTIL.js";import{r as h}from"./index-Cb9e4tly.js";import{P as v}from"./ProgressSteps-BfCnfM68.js";import{L as y}from"./LayoutFlex--W1D5e-w.js";import{I as c}from"./IconButton-DSKTwXgX.js";import{F as b,a as L}from"./TokyoUIMinus-RacYe9uc.js";import"./index-ChsGqxH_.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./index-DWSmmBvQ.js";import"./tslib.es6-C7pnyCjR.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./index-qlqSh81O.js";import"./componentNames-k0j3gHgH.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./layout-relative.module-uOnIKnjS.js";import"./classNames-9hsFPPZv.js";import"./defaults-czRWsFkX.js";import"./render-icon-BT0Aq7PA.js";import"./ButtonBase-BpIWpxNP.js";import"./Spinner-CUtAzzFK.js";import"./useMergeRefs-SFH7Mw4x.js";import"./useHostname-PsilflFC.js";import"./index-CC6DAVyL.js";const W={title:"Components/ProgressSteps",component:v,decorators:[a=>t.jsx("div",{style:{padding:"32px",width:"500px"},children:t.jsx(a,{})})],args:{"aria-label":"Story"}},r={tags:["!test"],args:{currentStep:6,totalSteps:6},render:function({currentStep:C,totalSteps:p,...j}){const[o,n]=h.useState(C),F=()=>n(Math.min(o+1,p)),I=()=>n(Math.max(o-1,1));return t.jsxs(y,{alignItems:"center",gap:"12",children:[t.jsx(c,{svg:b,assistiveText:"Subtract",onClick:I}),t.jsx(v,{...j,currentStep:o,totalSteps:p}),t.jsx(c,{svg:L,assistiveText:"Add",onClick:F})]})}},e={args:{currentStep:1,totalSteps:6}},s={args:{currentStep:6,totalSteps:6}};var i,m,u;r.parameters={...r.parameters,docs:{...(i=r.parameters)==null?void 0:i.docs,source:{originalSource:`{
2
2
  tags: ['!test'],
3
3
  args: {
4
4
  currentStep: 6,
@@ -1,3 +1,3 @@
1
- import{j as o}from"./jsx-runtime-BTJTZTIL.js";import{useMDXComponents as n}from"./index-BN6VMYqa.js";import{M as i}from"./index-xzr6a2UN.js";import"./index-ChsGqxH_.js";import"./index-Cb9e4tly.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./iframe-DQObBSoc.js";import"./index-s7KTOhR7.js";import"./index-BPCsOyHr.js";import"./index-CA5R8PN9.js";import"./index-DrFu-skq.js";function e(r){const t={a:"a",code:"code",h1:"h1",p:"p",...n(),...r.components};return o.jsxs(o.Fragment,{children:[o.jsx(i,{title:"Components/Dialog/PromoDialog"}),`
1
+ import{j as o}from"./jsx-runtime-BTJTZTIL.js";import{useMDXComponents as n}from"./index-BN6VMYqa.js";import{M as i}from"./index-GU-yTW76.js";import"./index-ChsGqxH_.js";import"./index-Cb9e4tly.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./iframe-DD8HN-R1.js";import"./index-s7KTOhR7.js";import"./index-BPCsOyHr.js";import"./index-CA5R8PN9.js";import"./index-DrFu-skq.js";function e(r){const t={a:"a",code:"code",h1:"h1",p:"p",...n(),...r.components};return o.jsxs(o.Fragment,{children:[o.jsx(i,{title:"Components/Dialog/PromoDialog"}),`
2
2
  `,o.jsx(t.h1,{id:"promodialog",children:"PromoDialog"}),`
3
3
  `,o.jsxs(t.p,{children:["PromoDialog component is temporarily located in ",o.jsx(t.code,{children:"@preply/shared"}),", check its stories in the ",o.jsx(t.a,{href:"https://apollo-storybook.preply.org/?path=/story/design-system-promodialog--docs",rel:"nofollow",children:"apollo storybook"})]})]})}function f(r={}){const{wrapper:t}={...n(),...r.components};return t?o.jsx(t,{...r,children:o.jsx(e,{...r})}):e(r)}export{f as default};
@@ -1,4 +1,4 @@
1
- import{j as e}from"./jsx-runtime-BTJTZTIL.js";import{e as N}from"./index-Dk_MCKuE.js";import{u as T,s as A,S as q,r as D}from"./Stars-DGzJFzmk.js";import{m as P,s as B}from"./classNames-9hsFPPZv.js";import{g as E}from"./index-qlqSh81O.js";import{w as H}from"./componentNames-k0j3gHgH.js";import"./index-ChsGqxH_.js";import"./index-DWSmmBvQ.js";import"./tslib.es6-C7pnyCjR.js";import"./index-Cb9e4tly.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./TokyoUIStarFilled-CVOoYvsY.js";import"./render-icon-BT0Aq7PA.js";const r=function({size:a="large",value:l,dataset:w}){const d=D(l),{ariaValueText:_}=T(d),C=P(A,"rating",[B("size",a)]);return e.jsx("div",{className:C.join(" "),...E(w,{preplyDsComponent:H.Rating}),role:"img","aria-label":_,children:e.jsx(q,{filledPerc:d/5})})};try{r.displayName="Rating",r.__docgenInfo={description:"A component that visualizes the current rating.",displayName:"Rating",props:{value:{defaultValue:null,description:"Can be half values.",name:"value",required:!0,type:{name:"number"}},size:{defaultValue:{value:"large"},description:"",name:"size",required:!1,type:{name:"enum",value:[{value:'"large"'},{value:'"medium"'},{value:'"small"'},{value:'ResponsiveProp<"large" | "medium" | "small">'}]}},dataset:{defaultValue:null,description:`Sets data attributes on the DOM element.
1
+ import{j as e}from"./jsx-runtime-BTJTZTIL.js";import{e as N}from"./index-Dk_MCKuE.js";import{u as T,s as A,S as q,r as D}from"./Stars-DGzJFzmk.js";import{m as P,s as B}from"./classNames-9hsFPPZv.js";import{g as E}from"./index-qlqSh81O.js";import{w as H}from"./componentNames-k0j3gHgH.js";import"./index-ChsGqxH_.js";import"./index-DWSmmBvQ.js";import"./tslib.es6-C7pnyCjR.js";import"./index-Cb9e4tly.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./TokyoUIStarFilled-CVOoYvsY.js";import"./render-icon-BT0Aq7PA.js";const r=function({size:a="large",value:l,dataset:w}){const d=D(l),{ariaValueText:_}=T(d),C=P(A,"rating",[B("size",a)]);return e.jsx("div",{className:C.join(" "),...E(w,{preplyDsComponent:H.Rating}),role:"img","aria-label":_,children:e.jsx(q,{filledPerc:d/5})})};try{r.displayName="Rating",r.__docgenInfo={description:"A component that visualizes the current rating.",displayName:"Rating",props:{value:{defaultValue:null,description:"Can be half values.",name:"value",required:!0,type:{name:"number"}},size:{defaultValue:{value:"large"},description:"",name:"size",required:!1,type:{name:"enum",value:[{value:'"small"'},{value:'"medium"'},{value:'"large"'},{value:'ResponsiveProp<"small" | "medium" | "large">'}]}},dataset:{defaultValue:null,description:`Sets data attributes on the DOM element.
2
2
  @example <Rating dataset={{ 'qa-id': 'accept-conditions' }} /> // will add data-qa-id="accept-conditions" to the HTML element`,name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}}}}}catch{}const Z={title:"components/Rating",component:r,args:{}},o={parameters:{chromatic:{modes:{"narrow-l":{viewport:"narrow-l"},"medium-s":{viewport:"medium-s"}}}},render:function(){return e.jsx("table",{style:{borderCollapse:"separate",borderSpacing:"16px"},children:e.jsxs("tbody",{children:[e.jsxs("tr",{children:[e.jsx("td",{children:"small"}),e.jsx("td",{children:e.jsx(r,{value:2.5,size:"small"})})]}),e.jsxs("tr",{children:[e.jsx("td",{children:"medium"}),e.jsx("td",{children:e.jsx(r,{value:2.5,size:"medium"})})]}),e.jsxs("tr",{children:[e.jsx("td",{children:"large"}),e.jsx("td",{children:e.jsx(r,{value:2.5,size:"large"})})]}),e.jsxs("tr",{children:[e.jsx("td",{children:"Responsive"}),e.jsx("td",{children:e.jsx(r,{value:2.5,size:{_:"small","medium-s":"large"}})})]})]})})}},n={render:function(){function a({value:l}){return e.jsx("tbody",{children:e.jsxs("tr",{children:[e.jsx("td",{children:l}),e.jsx("td",{children:e.jsx(r,{value:l})})]})})}return e.jsxs("table",{style:{borderCollapse:"separate",borderSpacing:"16px"},children:[e.jsx(a,{value:0}),e.jsx(a,{value:.5}),e.jsx(a,{value:1}),e.jsx(a,{value:1.5}),e.jsx(a,{value:2}),e.jsx(a,{value:2.5}),e.jsx(a,{value:3}),e.jsx(a,{value:3.5}),e.jsx(a,{value:4}),e.jsx(a,{value:4.5}),e.jsx(a,{value:5})]})}},s={render:function(){return e.jsx(r,{value:4})},play:async({canvas:t})=>{const a=await t.findByRole("img",{name:/4 out of 5/});N(a).toBeVisible()}},i={parameters:{chromatic:{disableSnapshot:!0}},argTypes:{dataset:{control:"object"},value:{control:"select",options:[0,.5,1,1.5,2,2.5,3,3.5,4,4.5,5]},size:{control:"select",options:["small","medium","large"]}}};var u,c,m;o.parameters={...o.parameters,docs:{...(u=o.parameters)==null?void 0:u.docs,source:{originalSource:`{
3
3
  parameters: {
4
4
  chromatic: {