@preply/ds-docs 2.0.0 → 2.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/{00.LayoutFlex.stories-DoLb1LoS.js → 00.LayoutFlex.stories-CbDXxyuE.js} +1 -1
- package/dist/assets/{00.applications-CodmhfzP.js → 00.applications-DrPcq5hf.js} +1 -1
- package/dist/assets/{00.favicons.guide-CB7otDce.js → 00.favicons.guide-BGlf-F09.js} +1 -1
- package/dist/assets/{00.token-explorer-iUebypoy.js → 00.token-explorer-Bfc0792V.js} +1 -1
- package/dist/assets/{00.using-responsive-props-t2wHUu8m.js → 00.using-responsive-props-zAcJieHB.js} +1 -1
- package/dist/assets/{01.semantic-tokens-BRVBqUiT.js → 01.semantic-tokens-Ccy3YqAg.js} +1 -1
- package/dist/assets/{01.using-shorthand-props-DEJgBvzq.js → 01.using-shorthand-props-B0ANrFDR.js} +1 -1
- package/dist/assets/{10.Combinations.stories-DLSgJgrw.js → 10.Combinations.stories-CdNbC18z.js} +1 -1
- package/dist/assets/{10.fonts.guide-D12lSwgH.js → 10.fonts.guide-kjxLDtt2.js} +1 -1
- package/dist/assets/{10.ssr-DlFRK64e.js → 10.ssr-C85792Ym.js} +1 -1
- package/dist/assets/{11.languageFont.explorer-C5k8-Jz1.js → 11.languageFont.explorer-C8B0RG10.js} +1 -1
- package/dist/assets/{11.ssr.app-router-Dhu4kN2c.js → 11.ssr.app-router-DLGELGUU.js} +1 -1
- package/dist/assets/{20.libraries-B0n8gJVD.js → 20.libraries-BDQu_qts.js} +1 -1
- package/dist/assets/{30.icons.explorer-Crh_uKlY.js → 30.icons.explorer-Cs2BoR4M.js} +2 -2
- package/dist/assets/{30.storybook-BAO0l6SZ.js → 30.storybook-Nx8Paw-6.js} +1 -1
- package/dist/assets/40.illustrations.explorer-WSD1rIjJ.js +21 -0
- package/dist/assets/{90.advanced-CeKbZzoq.js → 90.advanced-DASg-ru6.js} +1 -1
- package/dist/assets/AlertDialog-Maq8_VU0.css +1 -0
- package/dist/assets/{AlertDialog.stories-CqAVOJ5x.js → AlertDialog.stories-BzWTSIy8.js} +4 -4
- package/dist/assets/Avatar-DTmc5ZGN.css +1 -0
- package/dist/assets/Avatar-DncQXX7G.js +7 -0
- package/dist/assets/Avatar-ElTllycS.js +1 -0
- package/dist/assets/Avatar-l4k-u_Mp.css +1 -0
- package/dist/assets/{Avatar.stories-DPuesOBK.js → Avatar.stories-D15oouju.js} +1 -1
- package/dist/assets/AvatarWithStatus-CxEAGmUA.css +1 -0
- package/dist/assets/AvatarWithStatus.stories-DeWJ6ypF.js +42 -0
- package/dist/assets/Badge-j_a0acGK.css +1 -0
- package/dist/assets/{Badge.stories-BY6I7UQ6.js → Badge.stories-CSQZXuAX.js} +2 -2
- package/dist/assets/Box-CjExCUkg.css +1 -0
- package/dist/assets/Box.stories-Vj0MUVA1.js +44 -0
- package/dist/assets/Button-BlwReLw5.js +20 -0
- package/dist/assets/Button-CB2hNkCw.css +1 -0
- package/dist/assets/Button-D7I5ig5h.js +1 -0
- package/dist/assets/Button-Do66hNtY.css +1 -0
- package/dist/assets/Button.stories-VxG3jfx5.js +252 -0
- package/dist/assets/ButtonBase-BCfmDQ_b.js +8 -0
- package/dist/assets/ButtonBase-C0CIM4Jh.css +1 -0
- package/dist/assets/Chips-DAK2so_G.css +1 -0
- package/dist/assets/{Chips.stories-C4g0ajtC.js → Chips.stories-3FQFAew8.js} +7 -7
- package/dist/assets/{Color-YHDXOIA2-n0bEiukQ.js → Color-YHDXOIA2-BYOU6QkC.js} +1 -1
- package/dist/assets/Dialog-DzqSHLus.css +1 -0
- package/dist/assets/{Dialog.stories-D74D9Tdn.js → Dialog.stories-CjuVHAg6.js} +18 -18
- package/dist/assets/{DocsRenderer-CFRXHY34-BhNva4nY.js → DocsRenderer-CFRXHY34-D1fchdBc.js} +1 -1
- package/dist/assets/FieldAdditionalText-BD8S7qnE.js +1 -0
- package/dist/assets/FieldAdditionalText-CuXtSnrq.css +1 -0
- package/dist/assets/{FieldAdditionalText.stories-CgNnZYRi.js → FieldAdditionalText.stories-Bkm8WlSW.js} +1 -1
- package/dist/assets/FieldButton-D_5Zrlco.js +1 -0
- package/dist/assets/FieldButton-Picq604V.css +1 -0
- package/dist/assets/{FieldButton.stories-ChS0IeCP.js → FieldButton.stories-C33Mb60l.js} +1 -1
- package/dist/assets/FieldLayout-DHSEWaEL.js +1 -0
- package/dist/assets/FieldLayout-uwpycSl9.css +1 -0
- package/dist/assets/{FieldLayout.stories-C5bw8Efg.js → FieldLayout.stories-BNq7gZCI.js} +1 -1
- package/dist/assets/FieldLayoutBase-C_wbpu8u.css +1 -0
- package/dist/assets/FieldLayoutBase-xV81xRaV.js +12 -0
- package/dist/assets/Heading-Bj7LLgoH.js +2 -0
- package/dist/assets/Heading-C14zK0Nl.css +1 -0
- package/dist/assets/{Heading.stories-D9Zye7km.js → Heading.stories-DUVgn-sr.js} +1 -1
- package/dist/assets/Icon-C3YgliEf.css +1 -0
- package/dist/assets/Icon-CBFs9hMA.js +1 -0
- package/dist/assets/Icon-D_HQx804.css +1 -0
- package/dist/assets/{Icon-RSC-YupbVJQy.js → Icon-RSC-BuTFeAj0.js} +1 -1
- package/dist/assets/Icon-Wpz7-Jvg.js +8 -0
- package/dist/assets/{Icon.stories-jVWnmDlZ.js → Icon.stories-DzUVuQaU.js} +1 -1
- package/dist/assets/IconButton-B7CxWK4j.js +8 -0
- package/dist/assets/InputText-m06Ec_iQ.js +5 -0
- package/dist/assets/{LayoutFlex-D2upWEjL.js → LayoutFlex-5ZDeW2G6.js} +1 -1
- package/dist/assets/{LayoutFlex-BOiDmozK.js → LayoutFlex-l6VPaSCi.js} +1 -1
- package/dist/assets/LayoutFlexItem-C4cPPR-1.css +1 -0
- package/dist/assets/LayoutFlexItem-DhCHigTj.js +1 -0
- package/dist/assets/LayoutGrid-CNwH06zf.js +1 -0
- package/dist/assets/LayoutGrid-Cm59X3OY.css +1 -0
- package/dist/assets/LayoutGrid-mQT2ikS8.css +1 -0
- package/dist/assets/LayoutGrid.stories-CJKRu44f.js +88 -0
- package/dist/assets/LayoutGridItem-BEFb1grO.css +1 -0
- package/dist/assets/LayoutGridItem-BYIEoI8K.js +1 -0
- package/dist/assets/Link-K5J3waqL.css +1 -0
- package/dist/assets/{Link.stories-BSLk0Pem.js → Link.stories-DdA4w7Yi.js} +8 -7
- package/dist/assets/Loader-hjoeRutr.css +1 -0
- package/dist/assets/Loader.stories-DXv_QpEq.js +37 -0
- package/dist/assets/NumberField-BwQ_OX3b.css +1 -0
- package/dist/assets/{NumberField.stories-DzaH3Pwj.js → NumberField.stories-B0au_GJa.js} +3 -3
- package/dist/assets/{ObserveIntersection-D396wl1Z.js → ObserveIntersection-Ccn6ggRl.js} +1 -1
- package/dist/assets/{ObserveIntersection.stories-DIe0cEvy.js → ObserveIntersection.stories-CK5RwCMK.js} +1 -1
- package/dist/assets/OnboardingTooltip-CsmroJZe.css +1 -0
- package/dist/assets/{OnboardingTooltip-Bl0XDogf.js → OnboardingTooltip-DkJtTrMv.js} +1 -1
- package/dist/assets/{OnboardingTooltip.stories-B0FIL9CU.js → OnboardingTooltip.stories-CBEGxsdn.js} +1 -1
- package/dist/assets/{OnboardingTooltip.tests.stories-JJZpRwk6.js → OnboardingTooltip.tests.stories-BVwCf3WX.js} +1 -1
- package/dist/assets/OnboardingTour-CiSAhOo4.js +4 -0
- package/dist/assets/OnboardingTour-D0hvRI8H.css +1 -0
- package/dist/assets/{OnboardingTour.stories--g6PQm9S.js → OnboardingTour.stories-Ci2XQcpZ.js} +1 -1
- package/dist/assets/{OnboardingTour.tests.stories-QS0jiTXB.js → OnboardingTour.tests.stories-fpAsT8xG.js} +1 -1
- package/dist/assets/PasswordField-pNO2_I4U.css +1 -0
- package/dist/assets/{PasswordField.stories-BPdZcEeu.js → PasswordField.stories-tMCP_-zS.js} +2 -2
- package/dist/assets/PreplyLogo-CTlTSEJp.css +1 -0
- package/dist/assets/PreplyLogo.stories-D-KuDEpf.js +98 -0
- package/dist/assets/ProgressBar-BmNYDQH3.css +1 -0
- package/dist/assets/{ProgressBar.stories-C3Hx8JBS.js → ProgressBar.stories-RX3TC-Mj.js} +1 -1
- package/dist/assets/ProgressSteps-BdahNXrs.js +2 -0
- package/dist/assets/ProgressSteps-DOMtSbxl.css +1 -0
- package/dist/assets/{ProgressSteps.stories-C4sfVcPt.js → ProgressSteps.stories-BOqzHA8v.js} +1 -1
- package/dist/assets/RootProvider-F-KPwN7Y.js +1 -0
- package/dist/assets/SelectField-D3L7IkDZ.css +1 -0
- package/dist/assets/SelectField.stories-BiKwJ7cJ.js +182 -0
- package/dist/assets/{ShowOnIntersection.stories-BYz5GE4A.js → ShowOnIntersection.stories-D4B8EpSn.js} +1 -1
- package/dist/assets/Spinner-B2C3RkCF.js +1 -0
- package/dist/assets/Spinner-CzIq-Vt3.css +1 -0
- package/dist/assets/Steps-B_rpKUTa.css +1 -0
- package/dist/assets/Steps-cwath_9x.js +26 -0
- package/dist/assets/{Steps.stories-D3jWUCfp.js → Steps.stories-BKq08-vN.js} +1 -1
- package/dist/assets/Text-BXZIkJPK.js +1 -0
- package/dist/assets/Text-BjBJEVRG.css +1 -0
- package/dist/assets/Text-CXoN02OL.js +1 -0
- package/dist/assets/Text-DWmJ-bA2.css +1 -0
- package/dist/assets/{Text.stories-MU-T7clI.js → Text.stories--sqpLsAp.js} +1 -1
- package/dist/assets/TextField-BdRa6kYC.js +1 -0
- package/dist/assets/TextField-CpavA6nv.css +1 -0
- package/dist/assets/TextField-Drr2dczB.css +1 -0
- package/dist/assets/{TextField.stories-CXDhM8SN.js → TextField.stories-Bclgc2EW.js} +3 -3
- package/dist/assets/TextHighlighted-BnmI0H3i.css +1 -0
- package/dist/assets/TextHighlighted-UGbUAPIH.js +1 -0
- package/dist/assets/TextHighlighted-XaAzBaUc.css +1 -0
- package/dist/assets/TextHighlighted.stories-NdWGjEJo.js +32 -0
- package/dist/assets/TextInline-CztA0I1b.css +1 -0
- package/dist/assets/TextInline.stories-CUApO-7f.js +37 -0
- package/dist/assets/TextareaField-D7ErWnri.css +1 -0
- package/dist/assets/{TextareaField.stories-8FWfbQuv.js → TextareaField.stories-DeszU8P5.js} +3 -3
- package/dist/assets/Toast-Bce4LWtf.css +1 -0
- package/dist/assets/{Toast.stories-D7QEZPb5.js → Toast.stories-ddQWgL74.js} +9 -9
- package/dist/assets/Tooltip-Cm9bKrYj.css +1 -0
- package/dist/assets/{Tooltip-zv_6ckj2.js → Tooltip-DfP6dW5t.js} +1 -1
- package/dist/assets/{Tooltip.stories-qNBQgLBX.js → Tooltip.stories-BFaVZ-KR.js} +1 -1
- package/dist/assets/{Tooltip.tests.stories-DdHKI1ve.js → Tooltip.tests.stories-BdWpurqX.js} +1 -1
- package/dist/assets/{breakpoints-LpH7GcYD.js → breakpoints-DZrjMODJ.js} +1 -1
- package/dist/assets/{breakpoints-zK4Z5SKD.js → breakpoints-OMNEQfen.js} +1 -1
- package/dist/assets/{breakpoints-DTrgfqbR.js → breakpoints-nQG7mZUy.js} +1 -1
- package/dist/assets/{changelog-kNvLUHOz.js → changelog-DKkspQMC.js} +224 -207
- package/dist/assets/{entry-preview-DjAFPLGc.js → entry-preview-Di48KvWt.js} +1 -1
- package/dist/assets/{getTokenVar-BIGy16TO.js → getTokenVar-CaVPbV9a.js} +1 -1
- package/dist/assets/{hover-CRiTDNhR.js → hover-5sSVivzT.js} +1 -1
- package/dist/assets/{hover-CaTImSM4.js → hover-CqG5MZbC.js} +1 -1
- package/dist/assets/{hover-p3QJEZw5.js → hover-DcOblfBc.js} +1 -1
- package/dist/assets/{iframe-9Hj_MNfh.js → iframe-C8qEtSwt.js} +2 -2
- package/dist/assets/{index-DRVMKRNe.js → index-Ba1GaWBz.js} +3 -3
- package/dist/assets/{index-BXfuwMTe.js → index-Cp5_iz39.js} +1 -1
- package/dist/assets/{intro-DzWewgwc.js → intro-BsAuI9-C.js} +1 -1
- package/dist/assets/layout-relative-BGyAoF2N.css +1 -0
- package/dist/assets/layout-relative-BpJIh3YK.js +1 -0
- package/dist/assets/layout-relative-C4ATemga.css +1 -0
- package/dist/assets/layout-relative-DuJENdo5.css +1 -0
- package/dist/assets/layout-relative.module-1z75aSwo-DNAR_Nv2.js +1 -0
- package/dist/assets/layout-relative.module-ed9bC4H4.js +1 -0
- package/dist/assets/{migrating-from-less-tN-JFjco.js → migrating-from-less-DIb86N4R.js} +1 -1
- package/dist/assets/playground-t-QHn_5x.css +1 -0
- package/dist/assets/{playground.stories-DMK1ZcmP.js → playground.stories-CTz0xGuT.js} +59 -59
- package/dist/assets/{preview-CvW0gOh5.js → preview-BOyk1pfY.js} +1 -1
- package/dist/assets/{preview-BCYWUPon.js → preview-CBMehSre.js} +1 -1
- package/dist/assets/{preview-BI7kN1TP.js → preview-DvauSVRq.js} +2 -2
- package/dist/assets/text-accent-CDvOoGdV.css +1 -0
- package/dist/assets/text-accent-CZD2Hmtq.js +1 -0
- package/dist/assets/text-accent-DZDDtpIt.js +1 -0
- package/dist/assets/text-accent-WDJkKazf.css +1 -0
- package/dist/assets/text-centered-Bk7GkK8R.js +1 -0
- package/dist/assets/text-centered-CznToR0o.js +1 -0
- package/dist/assets/text-centered-DN9XHxjM.css +1 -0
- package/dist/assets/text-centered-DxXu3Wfr.css +1 -0
- package/dist/assets/{tokens-d5jI-VhO.js → tokens-C4H21x5Y.js} +1 -1
- package/dist/assets/{tokens-C0oPORlF.js → tokens-DY9UJMme.js} +1 -1
- package/dist/assets/{tokens-kLWqWJLR.js → tokens-bDgXZ1xi.js} +1 -1
- package/dist/assets/{usePortalElement-D3vRKAB1.js → usePortalElement-hM2pDsQq.js} +1 -1
- package/dist/assets/{welcome-CvEfK4A3.js → welcome-DaVgjrPL.js} +1 -1
- package/dist/assets/{zeroheight-wKcu_QWZ.js → zeroheight-D5Xa3jWw.js} +1 -1
- package/dist/iframe.html +1 -1
- package/dist/index.json +1 -1
- package/dist/preview-stats.json +1653 -1650
- package/dist/project.json +1 -1
- package/package.json +3 -3
- package/vite.config.ts +10 -0
- package/dist/assets/40.illustrations.explorer-SD9H4gQS.js +0 -21
- package/dist/assets/AlertDialog-CNsqqwq6.css +0 -1
- package/dist/assets/Avatar-BWVdwHlY.js +0 -6
- package/dist/assets/Avatar-BaeMEqzB.js +0 -1
- package/dist/assets/Avatar-DELee2ui.css +0 -1
- package/dist/assets/Avatar-SizFbjOh.css +0 -1
- package/dist/assets/AvatarWithStatus-B8ohNruV.css +0 -1
- package/dist/assets/AvatarWithStatus.stories-CKhKeqbK.js +0 -41
- package/dist/assets/Badge-BTktKAv_.css +0 -1
- package/dist/assets/Box-Ci4ycgSn.css +0 -1
- package/dist/assets/Box.stories-DF2h791P.js +0 -44
- package/dist/assets/Button-CWNujLtP.js +0 -20
- package/dist/assets/Button-Cjld0T4n.css +0 -1
- package/dist/assets/Button-NXZW8cHc.css +0 -1
- package/dist/assets/Button-itdvNgOg.js +0 -1
- package/dist/assets/Button.stories-DUHAAHTV.js +0 -211
- package/dist/assets/ButtonBase-CJjNfOwu.js +0 -8
- package/dist/assets/ButtonBase-ixkzvA2i.css +0 -1
- package/dist/assets/Chips-2wQm6zLU.css +0 -1
- package/dist/assets/Dialog-BKWHIlGs.css +0 -1
- package/dist/assets/FieldAdditionalText-BiaO_Yss.js +0 -1
- package/dist/assets/FieldAdditionalText-tbMWNWhN.css +0 -1
- package/dist/assets/FieldButton-B_tn3Eq6.css +0 -1
- package/dist/assets/FieldButton-D0MgvwIU.js +0 -1
- package/dist/assets/FieldLayout-6dPZQnKP.css +0 -1
- package/dist/assets/FieldLayout-BbLKeSmh.js +0 -1
- package/dist/assets/FieldLayoutBase-DhKLFBcH.js +0 -12
- package/dist/assets/FieldLayoutBase-_Sj6YO8M.css +0 -1
- package/dist/assets/Heading-Ba64-F3t.css +0 -1
- package/dist/assets/Heading-DcJnmvUa.js +0 -2
- package/dist/assets/Icon-BQSXaoh3.css +0 -1
- package/dist/assets/Icon-ByBuC1kf.css +0 -1
- package/dist/assets/Icon-DbIHupWZ.js +0 -8
- package/dist/assets/Icon-pHhBCzBO.js +0 -1
- package/dist/assets/IconButton-C3AcGEY7.js +0 -8
- package/dist/assets/InputText-CL5Snaht.js +0 -5
- package/dist/assets/LayoutFlexItem-BWKgsCDT.css +0 -1
- package/dist/assets/LayoutFlexItem-Su5RvuQk.js +0 -1
- package/dist/assets/LayoutGrid-BG29rjrt.js +0 -1
- package/dist/assets/LayoutGrid-BId9Yglz.css +0 -1
- package/dist/assets/LayoutGrid-Cw_n5H21.css +0 -1
- package/dist/assets/LayoutGrid.stories-DKw5d1ZE.js +0 -88
- package/dist/assets/LayoutGridItem-C-iUb7WL.css +0 -1
- package/dist/assets/LayoutGridItem-D5Hb9kQy.js +0 -1
- package/dist/assets/Link-LMW4jOcv.css +0 -1
- package/dist/assets/Loader-Bx87E7sh.css +0 -1
- package/dist/assets/Loader.stories-DUgJSe87.js +0 -37
- package/dist/assets/NumberField-C0w7Zzcx.css +0 -1
- package/dist/assets/OnboardingTooltip-DceGOXFO.css +0 -1
- package/dist/assets/OnboardingTour-DaxzhhRL.css +0 -1
- package/dist/assets/OnboardingTour-pR_NmiBL.js +0 -4
- package/dist/assets/PasswordField-CW55DLIa.css +0 -1
- package/dist/assets/PreplyLogo-DnbCD6MN.css +0 -1
- package/dist/assets/PreplyLogo.stories-DyGEUhO3.js +0 -97
- package/dist/assets/ProgressBar-BHaYRC97.css +0 -1
- package/dist/assets/ProgressSteps-7jb0rnSw.js +0 -2
- package/dist/assets/ProgressSteps-HPd6w_Nr.css +0 -1
- package/dist/assets/RootProvider-BgscvpVs.js +0 -1
- package/dist/assets/SelectField-DMcbwWwy.css +0 -1
- package/dist/assets/SelectField.stories-C3X-5JHt.js +0 -182
- package/dist/assets/Spinner-CixbAVEL.css +0 -1
- package/dist/assets/Spinner-Iaah9nUJ.js +0 -1
- package/dist/assets/Steps-CRCACZIC.css +0 -1
- package/dist/assets/Steps-CfdqlU3Q.js +0 -26
- package/dist/assets/Text-CxaHmdy3.css +0 -1
- package/dist/assets/Text-i5U7-KMF.js +0 -1
- package/dist/assets/Text-nWyCR02l.js +0 -1
- package/dist/assets/TextField-CVWDg_y4.css +0 -1
- package/dist/assets/TextField-DFm3O-Tl.js +0 -1
- package/dist/assets/TextField-DYLqe3tJ.css +0 -1
- package/dist/assets/TextHighlighted-CgBvDnFO.css +0 -1
- package/dist/assets/TextHighlighted-LVoJ79mt.js +0 -1
- package/dist/assets/TextHighlighted.stories-Db5JA9US.js +0 -32
- package/dist/assets/TextInline-BWC2_5IX.css +0 -1
- package/dist/assets/TextInline.stories-DGBhhF71.js +0 -37
- package/dist/assets/TextareaField-CZ8v7yuT.css +0 -1
- package/dist/assets/Toast-BrvHWUik.css +0 -1
- package/dist/assets/Tooltip-xWfAzqNZ.css +0 -1
- package/dist/assets/layout-relative-BCl7bwOR.css +0 -1
- package/dist/assets/layout-relative-DIZ6zNub.css +0 -1
- package/dist/assets/layout-relative-PI7LimOc.css +0 -1
- package/dist/assets/layout-relative-UGlXPWqj.js +0 -1
- package/dist/assets/layout-relative.module-C63T27Fr.js +0 -1
- package/dist/assets/layout-relative.module-DIaUqnvq-DH_OPu7E.js +0 -1
- package/dist/assets/playground-D77Ee-EK.css +0 -1
- package/dist/assets/text-accent-BBah0rth.js +0 -1
- package/dist/assets/text-accent-BMdpzlaC.js +0 -1
- package/dist/assets/text-accent-Co1hrpvA.css +0 -1
- package/dist/assets/text-centered-DWGGTNIZ.css +0 -1
- package/dist/assets/text-centered-NqfVCsvd.css +0 -1
- package/dist/assets/text-centered-VuFsr_qt.js +0 -1
- package/dist/assets/text-centered-gMYE7PWw.js +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.LayoutGridItem__GF0yx{margin:0;list-style:none;font-weight:inherit;border:none;text-align:inherit;border-spacing:0;padding:0}.LayoutGrid__SRDdo{list-style:none;font-weight:inherit;border:none;text-align:inherit;border-spacing:0;margin:0;padding:0;display:grid}.LayoutGrid--justify-content-center__vI9m1{justify-content:center}.LayoutGrid--justify-content-start__oyqGC{justify-content:start}.LayoutGrid--justify-content-end__RMTO2{justify-content:end}.LayoutGrid--justify-content-space-between__lvZnD{justify-content:space-between}.LayoutGrid--justify-content-space-around__Tl4FE{justify-content:space-around}.LayoutGrid--justify-content-space-evenly__KzBOQ{justify-content:space-evenly}@media (min-width: 400px){.LayoutGrid--narrow-l--justify-content-center__nQPPi{justify-content:center}.LayoutGrid--narrow-l--justify-content-start__K7PbL{justify-content:start}.LayoutGrid--narrow-l--justify-content-end__UHZNO{justify-content:end}.LayoutGrid--narrow-l--justify-content-space-between__hgFor{justify-content:space-between}.LayoutGrid--narrow-l--justify-content-space-around__Ec1Tu{justify-content:space-around}.LayoutGrid--narrow-l--justify-content-space-evenly__TjQzB{justify-content:space-evenly}}@media (min-width: 700px){.LayoutGrid--medium-s--justify-content-center__2xRJU{justify-content:center}.LayoutGrid--medium-s--justify-content-start__5YYfG{justify-content:start}.LayoutGrid--medium-s--justify-content-end__tNaVV{justify-content:end}.LayoutGrid--medium-s--justify-content-space-between__Yw2DU{justify-content:space-between}.LayoutGrid--medium-s--justify-content-space-around__GzjIX{justify-content:space-around}.LayoutGrid--medium-s--justify-content-space-evenly__wtV7Y{justify-content:space-evenly}}@media (min-width: 880px){.LayoutGrid--medium-l--justify-content-center__6Z3HK{justify-content:center}.LayoutGrid--medium-l--justify-content-start__eCE0H{justify-content:start}.LayoutGrid--medium-l--justify-content-end__WUHhq{justify-content:end}.LayoutGrid--medium-l--justify-content-space-between__dzn5s{justify-content:space-between}.LayoutGrid--medium-l--justify-content-space-around__1jJy-{justify-content:space-around}.LayoutGrid--medium-l--justify-content-space-evenly__SALxb{justify-content:space-evenly}}@media (min-width: 1200px){.LayoutGrid--wide-s--justify-content-center__O2AmA{justify-content:center}.LayoutGrid--wide-s--justify-content-start__M128c{justify-content:start}.LayoutGrid--wide-s--justify-content-end__Edf7b{justify-content:end}.LayoutGrid--wide-s--justify-content-space-between__sCWUj{justify-content:space-between}.LayoutGrid--wide-s--justify-content-space-around__OqKb-{justify-content:space-around}.LayoutGrid--wide-s--justify-content-space-evenly__BqAco{justify-content:space-evenly}}@media (min-width: 1900px){.LayoutGrid--wide-l--justify-content-center__WT24m{justify-content:center}.LayoutGrid--wide-l--justify-content-start__pavdA{justify-content:start}.LayoutGrid--wide-l--justify-content-end__US-V2{justify-content:end}.LayoutGrid--wide-l--justify-content-space-between__31Ivo{justify-content:space-between}.LayoutGrid--wide-l--justify-content-space-around__sbmBA{justify-content:space-around}.LayoutGrid--wide-l--justify-content-space-evenly__VBy-1{justify-content:space-evenly}}.LayoutGrid--align-items-center__cAn-E{align-items:center}.LayoutGrid--align-items-start__iIBPs{align-items:start}.LayoutGrid--align-items-end__bi0Vt{align-items:end}.LayoutGrid--align-items-stretch__vyo1N{align-items:stretch}.LayoutGrid--align-items-baseline__iWU1b{align-items:baseline}@media (min-width: 400px){.LayoutGrid--narrow-l--align-items-center__L5fan{align-items:center}.LayoutGrid--narrow-l--align-items-start__EZBkc{align-items:start}.LayoutGrid--narrow-l--align-items-end__igLCn{align-items:end}.LayoutGrid--narrow-l--align-items-stretch__jsoOx{align-items:stretch}.LayoutGrid--narrow-l--align-items-baseline__HJvGK{align-items:baseline}}@media (min-width: 700px){.LayoutGrid--medium-s--align-items-center__YHCsG{align-items:center}.LayoutGrid--medium-s--align-items-start__-x5jL{align-items:start}.LayoutGrid--medium-s--align-items-end__5vxaA{align-items:end}.LayoutGrid--medium-s--align-items-stretch__Oo3Jn{align-items:stretch}.LayoutGrid--medium-s--align-items-baseline__N5jnU{align-items:baseline}}@media (min-width: 880px){.LayoutGrid--medium-l--align-items-center__sOLNh{align-items:center}.LayoutGrid--medium-l--align-items-start__LlPIM{align-items:start}.LayoutGrid--medium-l--align-items-end__kMMCT{align-items:end}.LayoutGrid--medium-l--align-items-stretch__R0zx-{align-items:stretch}.LayoutGrid--medium-l--align-items-baseline__EaOdU{align-items:baseline}}@media (min-width: 1200px){.LayoutGrid--wide-s--align-items-center__Ve-ZD{align-items:center}.LayoutGrid--wide-s--align-items-start__28Z74{align-items:start}.LayoutGrid--wide-s--align-items-end__TDXOu{align-items:end}.LayoutGrid--wide-s--align-items-stretch__nHuLT{align-items:stretch}.LayoutGrid--wide-s--align-items-baseline__pnhzS{align-items:baseline}}@media (min-width: 1900px){.LayoutGrid--wide-l--align-items-center__JTXQd{align-items:center}.LayoutGrid--wide-l--align-items-start__Ghu5o{align-items:start}.LayoutGrid--wide-l--align-items-end__6ReFW{align-items:end}.LayoutGrid--wide-l--align-items-stretch__O0QQv{align-items:stretch}.LayoutGrid--wide-l--align-items-baseline__sQjwX{align-items:baseline}}.LayoutGrid--justify-items-stretch__M9QcQ{justify-items:stretch}.LayoutGrid--justify-items-center__oTKUc{justify-items:center}.LayoutGrid--justify-items-start__VYPnF{justify-items:start}.LayoutGrid--justify-items-end__8CwwZ{justify-items:end}@media (min-width: 400px){.LayoutGrid--narrow-l--justify-items-stretch__kvCGG{justify-items:stretch}.LayoutGrid--narrow-l--justify-items-center__3ItXk{justify-items:center}.LayoutGrid--narrow-l--justify-items-start__Bhi3s{justify-items:start}.LayoutGrid--narrow-l--justify-items-end__gc2Ku{justify-items:end}}@media (min-width: 700px){.LayoutGrid--medium-s--justify-items-stretch__tuwxD{justify-items:stretch}.LayoutGrid--medium-s--justify-items-center__atoXy{justify-items:center}.LayoutGrid--medium-s--justify-items-start__TmFN1{justify-items:start}.LayoutGrid--medium-s--justify-items-end__jfl4-{justify-items:end}}@media (min-width: 880px){.LayoutGrid--medium-l--justify-items-stretch__H23wm{justify-items:stretch}.LayoutGrid--medium-l--justify-items-center__U-RzH{justify-items:center}.LayoutGrid--medium-l--justify-items-start__0UVBd{justify-items:start}.LayoutGrid--medium-l--justify-items-end__GDL0T{justify-items:end}}@media (min-width: 1200px){.LayoutGrid--wide-s--justify-items-stretch__3eMVC{justify-items:stretch}.LayoutGrid--wide-s--justify-items-center__i7AtD{justify-items:center}.LayoutGrid--wide-s--justify-items-start__O80gc{justify-items:start}.LayoutGrid--wide-s--justify-items-end__IleZr{justify-items:end}}@media (min-width: 1900px){.LayoutGrid--wide-l--justify-items-stretch__P8KTm{justify-items:stretch}.LayoutGrid--wide-l--justify-items-center__sXqXH{justify-items:center}.LayoutGrid--wide-l--justify-items-start__QngDX{justify-items:start}.LayoutGrid--wide-l--justify-items-end__wa8k8{justify-items:end}}.LayoutGrid--columns__rVisq{grid-template-columns:var(--columns)}@media (min-width: 400px){.LayoutGrid--columns-narrow-l__UBDfA{grid-template-columns:var(--columns-narrow-l)}}@media (min-width: 700px){.LayoutGrid--columns-medium-s__lzA5l{grid-template-columns:var(--columns-medium-s)}}@media (min-width: 880px){.LayoutGrid--columns-medium-l__CM0CJ{grid-template-columns:var(--columns-medium-l)}}@media (min-width: 1200px){.LayoutGrid--columns-wide-s__RUz4B{grid-template-columns:var(--columns-wide-s)}}@media (min-width: 1900px){.LayoutGrid--columns-wide-l__qXJC-{grid-template-columns:var(--columns-wide-l)}}
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
import{j as t}from"./jsx-runtime-BTJTZTIL.js";import{r as P}from"./index-Cb9e4tly.js";import{g as D,a as A,b as N}from"./layout-relative-BpJIh3YK.js";import{f as R}from"./filterHTMLAttributes-DYdLqcvH.js";import{m as w,a as H,s as v}from"./classNames-BUL1Zq7e.js";import{g as T}from"./index-DdzHuZ-Y.js";import{L as V,k as E,f as B}from"./defaults-B1rzzf6M.js";import{w as h}from"./componentNames-Bwls0I02.js";import{B as z}from"./breakpoints-BfMlrtxE.js";import{s as M,g as W}from"./layout-relative.module-ed9bC4H4.js";import{S as o,a as Y}from"./consts-KAYct7Gj.js";import"./index-ChsGqxH_.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./constants-DYYVurUY.js";const F="LayoutGridItem__GF0yx",K={LayoutGridItem:F},f=P.forwardRef(function({children:i,alignSelf:s,tag:a,hide:r,relative:n,dataset:u,...l},d){const m=w(K,h.LayoutGridItem,[]),y=D(s),c=A(r),_=N(n),g=[...m,...y,...c,..._],U=a??V,q={...R(l),ref:d,className:g.join(" "),...T(u,{preplyDsComponent:h.LayoutGridItem})};return t.jsx(U,{...q,children:i})});try{f.displayName="LayoutGridItem",f.__docgenInfo={description:"",displayName:"LayoutGridItem",props:{alignSelf:{defaultValue:null,description:"",name:"alignSelf",required:!1,type:{name:"enum",value:[{value:'"center"'},{value:'"start"'},{value:'"end"'},{value:'"stretch"'},{value:"ResponsiveProp<LayoutAlignSelf>"}]}},tag:{defaultValue:null,description:"",name:"tag",required:!1,type:{name:"enum",value:[{value:'"p"'},{value:'"div"'},{value:'"span"'},{value:'"main"'},{value:'"header"'},{value:'"footer"'},{value:'"article"'},{value:'"section"'},{value:'"ul"'},{value:'"ol"'},{value:'"li"'},{value:'"fieldset"'},{value:'"table"'},{value:'"th"'},{value:'"tr"'},{value:'"td"'},{value:'"thead"'},{value:'"tfoot"'},{value:'"tbody"'},{value:'"caption"'},{value:'"figure"'},{value:'"figcaption"'}]}},hide:{defaultValue:null,description:"",name:"hide",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:"ResponsiveProp<boolean>"}]}},relative:{defaultValue:null,description:"",name:"relative",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:"ResponsiveProp<boolean>"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: HTMLElement | null) => void"},{value:"RefObject<HTMLElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}const Q="LayoutGrid__SRDdo",O={LayoutGrid:Q,"LayoutGrid--justify-content-center":"LayoutGrid--justify-content-center__vI9m1","LayoutGrid--justify-content-start":"LayoutGrid--justify-content-start__oyqGC","LayoutGrid--justify-content-end":"LayoutGrid--justify-content-end__RMTO2","LayoutGrid--justify-content-space-between":"LayoutGrid--justify-content-space-between__lvZnD","LayoutGrid--justify-content-space-around":"LayoutGrid--justify-content-space-around__Tl4FE","LayoutGrid--justify-content-space-evenly":"LayoutGrid--justify-content-space-evenly__KzBOQ","LayoutGrid--narrow-l--justify-content-center":"LayoutGrid--narrow-l--justify-content-center__nQPPi","LayoutGrid--narrow-l--justify-content-start":"LayoutGrid--narrow-l--justify-content-start__K7PbL","LayoutGrid--narrow-l--justify-content-end":"LayoutGrid--narrow-l--justify-content-end__UHZNO","LayoutGrid--narrow-l--justify-content-space-between":"LayoutGrid--narrow-l--justify-content-space-between__hgFor","LayoutGrid--narrow-l--justify-content-space-around":"LayoutGrid--narrow-l--justify-content-space-around__Ec1Tu","LayoutGrid--narrow-l--justify-content-space-evenly":"LayoutGrid--narrow-l--justify-content-space-evenly__TjQzB","LayoutGrid--medium-s--justify-content-center":"LayoutGrid--medium-s--justify-content-center__2xRJU","LayoutGrid--medium-s--justify-content-start":"LayoutGrid--medium-s--justify-content-start__5YYfG","LayoutGrid--medium-s--justify-content-end":"LayoutGrid--medium-s--justify-content-end__tNaVV","LayoutGrid--medium-s--justify-content-space-between":"LayoutGrid--medium-s--justify-content-space-between__Yw2DU","LayoutGrid--medium-s--justify-content-space-around":"LayoutGrid--medium-s--justify-content-space-around__GzjIX","LayoutGrid--medium-s--justify-content-space-evenly":"LayoutGrid--medium-s--justify-content-space-evenly__wtV7Y","LayoutGrid--medium-l--justify-content-center":"LayoutGrid--medium-l--justify-content-center__6Z3HK","LayoutGrid--medium-l--justify-content-start":"LayoutGrid--medium-l--justify-content-start__eCE0H","LayoutGrid--medium-l--justify-content-end":"LayoutGrid--medium-l--justify-content-end__WUHhq","LayoutGrid--medium-l--justify-content-space-between":"LayoutGrid--medium-l--justify-content-space-between__dzn5s","LayoutGrid--medium-l--justify-content-space-around":"LayoutGrid--medium-l--justify-content-space-around__1jJy-","LayoutGrid--medium-l--justify-content-space-evenly":"LayoutGrid--medium-l--justify-content-space-evenly__SALxb","LayoutGrid--wide-s--justify-content-center":"LayoutGrid--wide-s--justify-content-center__O2AmA","LayoutGrid--wide-s--justify-content-start":"LayoutGrid--wide-s--justify-content-start__M128c","LayoutGrid--wide-s--justify-content-end":"LayoutGrid--wide-s--justify-content-end__Edf7b","LayoutGrid--wide-s--justify-content-space-between":"LayoutGrid--wide-s--justify-content-space-between__sCWUj","LayoutGrid--wide-s--justify-content-space-around":"LayoutGrid--wide-s--justify-content-space-around__OqKb-","LayoutGrid--wide-s--justify-content-space-evenly":"LayoutGrid--wide-s--justify-content-space-evenly__BqAco","LayoutGrid--wide-l--justify-content-center":"LayoutGrid--wide-l--justify-content-center__WT24m","LayoutGrid--wide-l--justify-content-start":"LayoutGrid--wide-l--justify-content-start__pavdA","LayoutGrid--wide-l--justify-content-end":"LayoutGrid--wide-l--justify-content-end__US-V2","LayoutGrid--wide-l--justify-content-space-between":"LayoutGrid--wide-l--justify-content-space-between__31Ivo","LayoutGrid--wide-l--justify-content-space-around":"LayoutGrid--wide-l--justify-content-space-around__sbmBA","LayoutGrid--wide-l--justify-content-space-evenly":"LayoutGrid--wide-l--justify-content-space-evenly__VBy-1","LayoutGrid--align-items-center":"LayoutGrid--align-items-center__cAn-E","LayoutGrid--align-items-start":"LayoutGrid--align-items-start__iIBPs","LayoutGrid--align-items-end":"LayoutGrid--align-items-end__bi0Vt","LayoutGrid--align-items-stretch":"LayoutGrid--align-items-stretch__vyo1N","LayoutGrid--align-items-baseline":"LayoutGrid--align-items-baseline__iWU1b","LayoutGrid--narrow-l--align-items-center":"LayoutGrid--narrow-l--align-items-center__L5fan","LayoutGrid--narrow-l--align-items-start":"LayoutGrid--narrow-l--align-items-start__EZBkc","LayoutGrid--narrow-l--align-items-end":"LayoutGrid--narrow-l--align-items-end__igLCn","LayoutGrid--narrow-l--align-items-stretch":"LayoutGrid--narrow-l--align-items-stretch__jsoOx","LayoutGrid--narrow-l--align-items-baseline":"LayoutGrid--narrow-l--align-items-baseline__HJvGK","LayoutGrid--medium-s--align-items-center":"LayoutGrid--medium-s--align-items-center__YHCsG","LayoutGrid--medium-s--align-items-start":"LayoutGrid--medium-s--align-items-start__-x5jL","LayoutGrid--medium-s--align-items-end":"LayoutGrid--medium-s--align-items-end__5vxaA","LayoutGrid--medium-s--align-items-stretch":"LayoutGrid--medium-s--align-items-stretch__Oo3Jn","LayoutGrid--medium-s--align-items-baseline":"LayoutGrid--medium-s--align-items-baseline__N5jnU","LayoutGrid--medium-l--align-items-center":"LayoutGrid--medium-l--align-items-center__sOLNh","LayoutGrid--medium-l--align-items-start":"LayoutGrid--medium-l--align-items-start__LlPIM","LayoutGrid--medium-l--align-items-end":"LayoutGrid--medium-l--align-items-end__kMMCT","LayoutGrid--medium-l--align-items-stretch":"LayoutGrid--medium-l--align-items-stretch__R0zx-","LayoutGrid--medium-l--align-items-baseline":"LayoutGrid--medium-l--align-items-baseline__EaOdU","LayoutGrid--wide-s--align-items-center":"LayoutGrid--wide-s--align-items-center__Ve-ZD","LayoutGrid--wide-s--align-items-start":"LayoutGrid--wide-s--align-items-start__28Z74","LayoutGrid--wide-s--align-items-end":"LayoutGrid--wide-s--align-items-end__TDXOu","LayoutGrid--wide-s--align-items-stretch":"LayoutGrid--wide-s--align-items-stretch__nHuLT","LayoutGrid--wide-s--align-items-baseline":"LayoutGrid--wide-s--align-items-baseline__pnhzS","LayoutGrid--wide-l--align-items-center":"LayoutGrid--wide-l--align-items-center__JTXQd","LayoutGrid--wide-l--align-items-start":"LayoutGrid--wide-l--align-items-start__Ghu5o","LayoutGrid--wide-l--align-items-end":"LayoutGrid--wide-l--align-items-end__6ReFW","LayoutGrid--wide-l--align-items-stretch":"LayoutGrid--wide-l--align-items-stretch__O0QQv","LayoutGrid--wide-l--align-items-baseline":"LayoutGrid--wide-l--align-items-baseline__sQjwX","LayoutGrid--justify-items-stretch":"LayoutGrid--justify-items-stretch__M9QcQ","LayoutGrid--justify-items-center":"LayoutGrid--justify-items-center__oTKUc","LayoutGrid--justify-items-start":"LayoutGrid--justify-items-start__VYPnF","LayoutGrid--justify-items-end":"LayoutGrid--justify-items-end__8CwwZ","LayoutGrid--narrow-l--justify-items-stretch":"LayoutGrid--narrow-l--justify-items-stretch__kvCGG","LayoutGrid--narrow-l--justify-items-center":"LayoutGrid--narrow-l--justify-items-center__3ItXk","LayoutGrid--narrow-l--justify-items-start":"LayoutGrid--narrow-l--justify-items-start__Bhi3s","LayoutGrid--narrow-l--justify-items-end":"LayoutGrid--narrow-l--justify-items-end__gc2Ku","LayoutGrid--medium-s--justify-items-stretch":"LayoutGrid--medium-s--justify-items-stretch__tuwxD","LayoutGrid--medium-s--justify-items-center":"LayoutGrid--medium-s--justify-items-center__atoXy","LayoutGrid--medium-s--justify-items-start":"LayoutGrid--medium-s--justify-items-start__TmFN1","LayoutGrid--medium-s--justify-items-end":"LayoutGrid--medium-s--justify-items-end__jfl4-","LayoutGrid--medium-l--justify-items-stretch":"LayoutGrid--medium-l--justify-items-stretch__H23wm","LayoutGrid--medium-l--justify-items-center":"LayoutGrid--medium-l--justify-items-center__U-RzH","LayoutGrid--medium-l--justify-items-start":"LayoutGrid--medium-l--justify-items-start__0UVBd","LayoutGrid--medium-l--justify-items-end":"LayoutGrid--medium-l--justify-items-end__GDL0T","LayoutGrid--wide-s--justify-items-stretch":"LayoutGrid--wide-s--justify-items-stretch__3eMVC","LayoutGrid--wide-s--justify-items-center":"LayoutGrid--wide-s--justify-items-center__i7AtD","LayoutGrid--wide-s--justify-items-start":"LayoutGrid--wide-s--justify-items-start__O80gc","LayoutGrid--wide-s--justify-items-end":"LayoutGrid--wide-s--justify-items-end__IleZr","LayoutGrid--wide-l--justify-items-stretch":"LayoutGrid--wide-l--justify-items-stretch__P8KTm","LayoutGrid--wide-l--justify-items-center":"LayoutGrid--wide-l--justify-items-center__sXqXH","LayoutGrid--wide-l--justify-items-start":"LayoutGrid--wide-l--justify-items-start__QngDX","LayoutGrid--wide-l--justify-items-end":"LayoutGrid--wide-l--justify-items-end__wa8k8","LayoutGrid--columns":"LayoutGrid--columns__rVisq","LayoutGrid--columns-narrow-l":"LayoutGrid--columns-narrow-l__UBDfA","LayoutGrid--columns-medium-s":"LayoutGrid--columns-medium-s__lzA5l","LayoutGrid--columns-medium-l":"LayoutGrid--columns-medium-l__CM0CJ","LayoutGrid--columns-wide-s":"LayoutGrid--columns-wide-s__RUz4B","LayoutGrid--columns-wide-l":"LayoutGrid--columns-wide-l__qXJC-"},X="LayoutGrid",J=Object.keys(z),j=e=>typeof e=="number"?`repeat(${e}, 1fr)`:e.join(" "),Z=e=>typeof e=="object"&&!Array.isArray(e)?Object.entries(e).reduce((i,[s,a])=>({...i,...a?{[s]:j(a)}:{}}),{_:j(e._)}):{_:j(e)},$=e=>{if(!e)return{classNames:[],style:{}};const i=Z(e),s=J.filter(n=>i[n]),a=H(O,X,["columns",...s.map(n=>`columns-${n}`)]),r=s.reduce((n,u)=>({...n,[`--columns-${u}`]:i[u]}),{"--columns":i._});return{classNames:a,style:r}},ee="LayoutGap",te=e=>w(M,ee,[v("gap",e)]),ae="LayoutGrid",ie=(e,i)=>{const{gap:s=E,padding:a=B,justifyContent:r,alignItems:n,justifyItems:u,hide:l,relative:d}=i||{},m=w(O,ae,[v("justify-content",r),v("align-items",n),v("justify-items",u)]),y=te(s),c=W(a),_=A(l,"grid"),g=N(d);return[...m,...y,...c,..._,...g]},G=P.forwardRef(function({dataset:i,children:s,...a},r){const{tag:n=V,columns:u}=a,l=ie("grid",a),{style:d,classNames:m}=$(u),y=[...l,...m],c={...R(a),ref:r,className:y.join(" "),style:d,...T(i,{preplyDsComponent:h.LayoutGrid})};return t.jsx(n,{...c,children:s})});try{G.displayName="LayoutGrid",G.__docgenInfo={description:"A CSS `grid` wrapper.",displayName:"LayoutGrid",props:{gap:{defaultValue:null,description:"",name:"gap",required:!1,type:{name:"enum",value:[{value:'"xs"'},{value:'"s"'},{value:'"m"'},{value:'"l"'},{value:'"xl"'},{value:'"2xs"'},{value:'"16"'},{value:'"24"'},{value:'"32"'},{value:'"48"'},{value:'"64"'},{value:'"96"'},{value:'"160"'},{value:'"none"'},{value:'"3xs"'},{value:"ResponsiveProp<LayoutGap>"},{value:'"0"'},{value:'"1"'},{value:'"2"'},{value:'"4"'},{value:'"8"'},{value:'"12"'},{value:'"20"'},{value:"ResponsiveProp<Spacing>"}]}},padding:{defaultValue:null,description:"",name:"padding",required:!1,type:{name:"enum",value:[{value:'"xs"'},{value:'"s"'},{value:'"m"'},{value:'"l"'},{value:'"xl"'},{value:'"2xs"'},{value:'"16"'},{value:'"24"'},{value:'"32"'},{value:'"48"'},{value:'"64"'},{value:'"96"'},{value:'"160"'},{value:'"none"'},{value:'"3xs"'},{value:'"0"'},{value:'"1"'},{value:'"2"'},{value:'"4"'},{value:'"8"'},{value:'"12"'},{value:'"20"'},{value:"[LayoutPadding, LayoutPadding]"},{value:"[LayoutPadding, LayoutPadding, LayoutPadding]"},{value:"[LayoutPadding, LayoutPadding, LayoutPadding, LayoutPadding]"},{value:"[Spacing, Spacing]"},{value:"[Spacing, Spacing, Spacing]"},{value:"[Spacing, Spacing, Spacing, Spacing]"},{value:"ResponsiveProp<ShortHand<LayoutPadding> | ShortHand<Spacing>>"}]}},columns:{defaultValue:null,description:"The `number` of columns, or a `string[]` of `grid-template-columns`.\n@see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns}",name:"columns",required:!1,type:{name:"enum",value:[{value:"number"},{value:"string[]"},{value:"ResponsiveProp<number | string[]>"}]}},justifyContent:{defaultValue:null,description:"",name:"justifyContent",required:!1,type:{name:"enum",value:[{value:'"center"'},{value:'"start"'},{value:'"end"'},{value:'"space-between"'},{value:'"space-around"'},{value:'"space-evenly"'},{value:"ResponsiveProp<LayoutJustifyContent>"}]}},alignItems:{defaultValue:null,description:"",name:"alignItems",required:!1,type:{name:"enum",value:[{value:'"center"'},{value:'"start"'},{value:'"end"'},{value:'"stretch"'},{value:'"baseline"'},{value:"ResponsiveProp<LayoutAlignItems>"}]}},justifyItems:{defaultValue:null,description:"",name:"justifyItems",required:!1,type:{name:"enum",value:[{value:'"center"'},{value:'"start"'},{value:'"end"'},{value:'"stretch"'},{value:"ResponsiveProp<LayoutJustifyItems>"}]}},tag:{defaultValue:null,description:"",name:"tag",required:!1,type:{name:"enum",value:[{value:'"p"'},{value:'"div"'},{value:'"span"'},{value:'"main"'},{value:'"header"'},{value:'"footer"'},{value:'"article"'},{value:'"section"'},{value:'"ul"'},{value:'"ol"'},{value:'"li"'},{value:'"fieldset"'},{value:'"table"'},{value:'"th"'},{value:'"tr"'},{value:'"td"'},{value:'"thead"'},{value:'"tfoot"'},{value:'"tbody"'},{value:'"caption"'},{value:'"figure"'},{value:'"figcaption"'}]}},hide:{defaultValue:null,description:"",name:"hide",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:"ResponsiveProp<boolean>"}]}},relative:{defaultValue:null,description:"",name:"relative",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:"ResponsiveProp<boolean>"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: HTMLElement | null) => void"},{value:"RefObject<HTMLElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}const Ge={title:"components/LayoutGrid",component:G,subcomponents:{LayoutGridItem:f},argTypes:{gap:{description:o},padding:{description:Y},columns:{description:o},justifyContent:{description:o},alignItems:{description:o},justifyItems:{description:o},hide:{description:o},relative:{description:o}}},L=()=>t.jsxs(G,{columns:4,alignItems:"start",gap:"xs",children:[t.jsx(f,{children:t.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"0.25rem"},children:[t.jsx("div",{style:{height:"2ch",backgroundColor:"hotpink"}}),t.jsx("div",{style:{height:"2ch",backgroundColor:"hotpink"}})]})}),t.jsx(f,{alignSelf:"end",children:t.jsx("div",{style:{height:"2ch",backgroundColor:"hotpink"}})}),t.jsx("div",{style:{height:"2ch",backgroundColor:"hotpink"}}),t.jsx("div",{style:{height:"2ch",backgroundColor:"hotpink"}})]});L.storyName="LayoutGrid";const p={parameters:{chromatic:{disableSnapshot:!0}},args:{gap:"16",columns:3,alignItems:"start",children:t.jsxs(t.Fragment,{children:[t.jsx("div",{style:{minWidth:"100px",minHeight:50,backgroundColor:"hotpink"},children:" "}),t.jsx("div",{style:{minWidth:"100px",minHeight:75,backgroundColor:"hotpink"},children:" "}),t.jsx("div",{style:{minWidth:"100px",minHeight:100,backgroundColor:"hotpink",textAlign:"center"}})]}),dataset:{qaid:"layout-grid"}},argTypes:{dataset:{control:"object"},columns:{control:"number"},justifyItems:{control:"select"},hide:{control:"boolean"},relative:{control:"boolean"},children:{control:!1}}};var b,C,x;L.parameters={...L.parameters,docs:{...(b=L.parameters)==null?void 0:b.docs,source:{originalSource:`() => <LayoutGrid columns={4} alignItems="start" gap="xs">
|
|
2
|
+
<LayoutGridItem>
|
|
3
|
+
<div style={{
|
|
4
|
+
display: 'flex',
|
|
5
|
+
flexDirection: 'column',
|
|
6
|
+
gap: '0.25rem'
|
|
7
|
+
}}>
|
|
8
|
+
<div style={{
|
|
9
|
+
height: '2ch',
|
|
10
|
+
backgroundColor: 'hotpink'
|
|
11
|
+
}} />
|
|
12
|
+
<div style={{
|
|
13
|
+
height: '2ch',
|
|
14
|
+
backgroundColor: 'hotpink'
|
|
15
|
+
}} />
|
|
16
|
+
</div>
|
|
17
|
+
</LayoutGridItem>
|
|
18
|
+
<LayoutGridItem alignSelf="end">
|
|
19
|
+
<div style={{
|
|
20
|
+
height: '2ch',
|
|
21
|
+
backgroundColor: 'hotpink'
|
|
22
|
+
}} />
|
|
23
|
+
</LayoutGridItem>
|
|
24
|
+
<div style={{
|
|
25
|
+
height: '2ch',
|
|
26
|
+
backgroundColor: 'hotpink'
|
|
27
|
+
}} />
|
|
28
|
+
<div style={{
|
|
29
|
+
height: '2ch',
|
|
30
|
+
backgroundColor: 'hotpink'
|
|
31
|
+
}} />
|
|
32
|
+
</LayoutGrid>`,...(x=(C=L.parameters)==null?void 0:C.docs)==null?void 0:x.source}}};var k,I,S;p.parameters={...p.parameters,docs:{...(k=p.parameters)==null?void 0:k.docs,source:{originalSource:`{
|
|
33
|
+
parameters: {
|
|
34
|
+
chromatic: {
|
|
35
|
+
disableSnapshot: true
|
|
36
|
+
}
|
|
37
|
+
},
|
|
38
|
+
args: {
|
|
39
|
+
gap: '16',
|
|
40
|
+
columns: 3,
|
|
41
|
+
alignItems: 'start',
|
|
42
|
+
children: <>
|
|
43
|
+
<div style={{
|
|
44
|
+
minWidth: '100px',
|
|
45
|
+
minHeight: 50,
|
|
46
|
+
backgroundColor: 'hotpink'
|
|
47
|
+
}}>
|
|
48
|
+
{' '}
|
|
49
|
+
</div>
|
|
50
|
+
<div style={{
|
|
51
|
+
minWidth: '100px',
|
|
52
|
+
minHeight: 75,
|
|
53
|
+
backgroundColor: 'hotpink'
|
|
54
|
+
}}>
|
|
55
|
+
{' '}
|
|
56
|
+
</div>
|
|
57
|
+
<div style={{
|
|
58
|
+
minWidth: '100px',
|
|
59
|
+
minHeight: 100,
|
|
60
|
+
backgroundColor: 'hotpink',
|
|
61
|
+
textAlign: 'center'
|
|
62
|
+
}}></div>
|
|
63
|
+
</>,
|
|
64
|
+
dataset: {
|
|
65
|
+
qaid: 'layout-grid'
|
|
66
|
+
}
|
|
67
|
+
},
|
|
68
|
+
argTypes: {
|
|
69
|
+
dataset: {
|
|
70
|
+
control: 'object'
|
|
71
|
+
},
|
|
72
|
+
columns: {
|
|
73
|
+
control: 'number'
|
|
74
|
+
},
|
|
75
|
+
justifyItems: {
|
|
76
|
+
control: 'select'
|
|
77
|
+
},
|
|
78
|
+
hide: {
|
|
79
|
+
control: 'boolean'
|
|
80
|
+
},
|
|
81
|
+
relative: {
|
|
82
|
+
control: 'boolean'
|
|
83
|
+
},
|
|
84
|
+
children: {
|
|
85
|
+
control: false
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
}`,...(S=(I=p.parameters)==null?void 0:I.docs)==null?void 0:S.source}}};const _e=["Base","Playground"];export{L as Base,p as Playground,_e as __namedExportsOrder,Ge as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.AlignSelf__huNbz.AlignSelf--align-self-start__Pk4Ld{-ms-flex-item-align:start;align-self:start}.AlignSelf__huNbz.AlignSelf--align-self-center__oKqnl{-ms-flex-item-align:center;align-self:center}.AlignSelf__huNbz.AlignSelf--align-self-end__mLp7w{-ms-flex-item-align:end;align-self:end}.AlignSelf__huNbz.AlignSelf--align-self-stretch__e5jP9{-ms-flex-item-align:stretch;align-self:stretch}@media (min-width: 400px){.AlignSelf__huNbz.AlignSelf--narrow-l--align-self-start__RD68B{-ms-flex-item-align:start;align-self:start}.AlignSelf__huNbz.AlignSelf--narrow-l--align-self-center__9KYyf{-ms-flex-item-align:center;align-self:center}.AlignSelf__huNbz.AlignSelf--narrow-l--align-self-end__ydYg3{-ms-flex-item-align:end;align-self:end}.AlignSelf__huNbz.AlignSelf--narrow-l--align-self-stretch__an8ci{-ms-flex-item-align:stretch;align-self:stretch}}@media (min-width: 700px){.AlignSelf__huNbz.AlignSelf--medium-s--align-self-start__qq8h0{-ms-flex-item-align:start;align-self:start}.AlignSelf__huNbz.AlignSelf--medium-s--align-self-center__d0RSi{-ms-flex-item-align:center;align-self:center}.AlignSelf__huNbz.AlignSelf--medium-s--align-self-end__Kmsf2{-ms-flex-item-align:end;align-self:end}.AlignSelf__huNbz.AlignSelf--medium-s--align-self-stretch__j3NnI{-ms-flex-item-align:stretch;align-self:stretch}}@media (min-width: 880px){.AlignSelf__huNbz.AlignSelf--medium-l--align-self-start__74bsY{-ms-flex-item-align:start;align-self:start}.AlignSelf__huNbz.AlignSelf--medium-l--align-self-center__ljw4i{-ms-flex-item-align:center;align-self:center}.AlignSelf__huNbz.AlignSelf--medium-l--align-self-end__Pewtw{-ms-flex-item-align:end;align-self:end}.AlignSelf__huNbz.AlignSelf--medium-l--align-self-stretch__TkySK{-ms-flex-item-align:stretch;align-self:stretch}}@media (min-width: 1200px){.AlignSelf__huNbz.AlignSelf--wide-s--align-self-start__zgUOz{-ms-flex-item-align:start;align-self:start}.AlignSelf__huNbz.AlignSelf--wide-s--align-self-center__sU3Gp{-ms-flex-item-align:center;align-self:center}.AlignSelf__huNbz.AlignSelf--wide-s--align-self-end__o-XTQ{-ms-flex-item-align:end;align-self:end}.AlignSelf__huNbz.AlignSelf--wide-s--align-self-stretch__G9OEM{-ms-flex-item-align:stretch;align-self:stretch}}@media (min-width: 1900px){.AlignSelf__huNbz.AlignSelf--wide-l--align-self-start__DcXjX{-ms-flex-item-align:start;align-self:start}.AlignSelf__huNbz.AlignSelf--wide-l--align-self-center__36VHM{-ms-flex-item-align:center;align-self:center}.AlignSelf__huNbz.AlignSelf--wide-l--align-self-end__VolCH{-ms-flex-item-align:end;align-self:end}.AlignSelf__huNbz.AlignSelf--wide-l--align-self-stretch__pdrgF{-ms-flex-item-align:stretch;align-self:stretch}}.LayoutGridItem__HXV4b{margin:0;list-style:none;font-weight:inherit;border:none;text-align:inherit;border-spacing:0;padding:0}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{j as w}from"./jsx-runtime-BTJTZTIL.js";import{r as p}from"./index-Cb9e4tly.js";import{m as s,s as L}from"./classNames-BUL1Zq7e.js";import{g as y,a as h}from"./LayoutGrid-CNwH06zf.js";import{f as N}from"./filterHTMLAttributes-UOns5Q7s.js";import{w as n}from"./componentNames-Bwls0I02.js";import{g as C}from"./index-DdzHuZ-Y.js";import{L as G}from"./defaults-B1rzzf6M.js";const I="AlignSelf__huNbz",j={AlignSelf:I,"AlignSelf--align-self-start":"AlignSelf--align-self-start__Pk4Ld","AlignSelf--align-self-center":"AlignSelf--align-self-center__oKqnl","AlignSelf--align-self-end":"AlignSelf--align-self-end__mLp7w","AlignSelf--align-self-stretch":"AlignSelf--align-self-stretch__e5jP9","AlignSelf--narrow-l--align-self-start":"AlignSelf--narrow-l--align-self-start__RD68B","AlignSelf--narrow-l--align-self-center":"AlignSelf--narrow-l--align-self-center__9KYyf","AlignSelf--narrow-l--align-self-end":"AlignSelf--narrow-l--align-self-end__ydYg3","AlignSelf--narrow-l--align-self-stretch":"AlignSelf--narrow-l--align-self-stretch__an8ci","AlignSelf--medium-s--align-self-start":"AlignSelf--medium-s--align-self-start__qq8h0","AlignSelf--medium-s--align-self-center":"AlignSelf--medium-s--align-self-center__d0RSi","AlignSelf--medium-s--align-self-end":"AlignSelf--medium-s--align-self-end__Kmsf2","AlignSelf--medium-s--align-self-stretch":"AlignSelf--medium-s--align-self-stretch__j3NnI","AlignSelf--medium-l--align-self-start":"AlignSelf--medium-l--align-self-start__74bsY","AlignSelf--medium-l--align-self-center":"AlignSelf--medium-l--align-self-center__ljw4i","AlignSelf--medium-l--align-self-end":"AlignSelf--medium-l--align-self-end__Pewtw","AlignSelf--medium-l--align-self-stretch":"AlignSelf--medium-l--align-self-stretch__TkySK","AlignSelf--wide-s--align-self-start":"AlignSelf--wide-s--align-self-start__zgUOz","AlignSelf--wide-s--align-self-center":"AlignSelf--wide-s--align-self-center__sU3Gp","AlignSelf--wide-s--align-self-end":"AlignSelf--wide-s--align-self-end__o-XTQ","AlignSelf--wide-s--align-self-stretch":"AlignSelf--wide-s--align-self-stretch__G9OEM","AlignSelf--wide-l--align-self-start":"AlignSelf--wide-l--align-self-start__DcXjX","AlignSelf--wide-l--align-self-center":"AlignSelf--wide-l--align-self-center__36VHM","AlignSelf--wide-l--align-self-end":"AlignSelf--wide-l--align-self-end__VolCH","AlignSelf--wide-l--align-self-stretch":"AlignSelf--wide-l--align-self-stretch__pdrgF"},T="AlignSelf",b=l=>s(j,T,[L("align-self",l)]),x="LayoutGridItem__HXV4b",D={LayoutGridItem:x},E=p.forwardRef(function({children:i,alignSelf:t,tag:e,hide:a,relative:f,dataset:g,...r},m){const o=s(D,n.LayoutGridItem,[]),d=b(t),A=y(a),_=h(f),S=[...o,...d,...A,..._],c=e??G,u={...N(r),ref:m,className:S.join(" "),...C(g,{preplyDsComponent:n.LayoutGridItem})};return w.jsx(c,{...u,children:i})});E.__docgenInfo={description:"",methods:[],displayName:"LayoutGridItem"};export{E as L,b as g};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.Link__Jw0hc{display:inline-block;border-radius:var(--5eeb28);text-decoration:var(--f13872);cursor:pointer;-webkit-tap-highlight-color:transparent;outline:none;-ms-touch-action:manipulation;touch-action:manipulation}.Link__Jw0hc:focus-visible{outline-style:solid;outline-color:var(--603ec6);outline-width:var(--99d31f);outline-offset:var(--c0b12c)}.Link--inline__aWJxC{display:inline}.Link--noUnderline__vuCBO{text-decoration:none}.Link--variant-accentDark__5RCSd{color:var(--c6b68f)}.Link--variant-accentDark__5RCSd:hover,.Link--variant-accentDark--dsInternalSimulation-hover__5vv1U{color:var(--65e1ef)}.Link--variant-accentDark__5RCSd:active,.Link--variant-accentDark--dsInternalSimulation-active__-PYgd{color:var(--179b80)}.Link--variant-accentDarkInverted__5GVfk{color:var(--7cbffc)}.Link--variant-accentDarkInverted__5GVfk:hover,.Link--variant-accentDarkInverted--dsInternalSimulation-hover__u7g4B{color:var(--47fcde)}.Link--variant-accentDarkInverted__5GVfk:active,.Link--variant-accentDarkInverted--dsInternalSimulation-active__4bGgk{color:var(--1253e2)}.Link--variant-neutral__v0PFp{color:var(--19fdf0)}.Link--variant-neutral__v0PFp:hover,.Link--variant-neutral--dsInternalSimulation-hover__L-hBv{color:var(--ce5fb9)}.Link--variant-neutral__v0PFp:active,.Link--variant-neutral--dsInternalSimulation-active__5rs0z{color:var(--1d39ac)}.Link--variant-neutralInverted__t9Ijl{color:var(--883d0f)}.Link--variant-neutralInverted__t9Ijl:hover,.Link--variant-neutralInverted--dsInternalSimulation-hover__H50Xt{color:var(--065570)}.Link--variant-neutralInverted__t9Ijl:active,.Link--variant-neutralInverted--dsInternalSimulation-active__Irr0h{color:var(--be41c4)}.Link--variant-unsetColors__EEbF5{color:var(--e66f2a)}.Link--variant-unsetColors__EEbF5:hover,.Link--variant-unsetColors--dsInternalSimulation-hover__vMIu6{color:var(--468ceb)}.Link--variant-unsetColors__EEbF5:active,.Link--variant-unsetColors--dsInternalSimulation-active__wlGTN{color:var(--a5fc76)}
|
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
import{j as e}from"./jsx-runtime-BTJTZTIL.js";import{T as n}from"./Text-
|
|
1
|
+
import{j as e}from"./jsx-runtime-BTJTZTIL.js";import{T as n}from"./Text-BXZIkJPK.js";import{r as k}from"./index-Cb9e4tly.js";import{f as Q}from"./filterHTMLAttributes-DYdLqcvH.js";import{g as Z}from"./defaults-B1rzzf6M.js";import{u as ee}from"./useHostname-Y3PlXofY.js";import{m as ae,s as f,b as x}from"./classNames-BUL1Zq7e.js";import{w as y}from"./componentNames-Bwls0I02.js";import{a as ne,g as te}from"./index-DdzHuZ-Y.js";import{g as d}from"./getTokenVar-DU_DEzTd.js";import{c as u}from"./tokens-Di5DrZN4.js";import"./index-ChsGqxH_.js";import"./text-accent-DZDDtpIt.js";import"./text-centered-CznToR0o.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./constants-BgBLeZzp.js";const re="Link__Jw0hc",ie={Link:re,"Link--inline":"Link--inline__aWJxC","Link--noUnderline":"Link--noUnderline__vuCBO","Link--variant-accentDark":"Link--variant-accentDark__5RCSd","Link--variant-accentDark--dsInternalSimulation-hover":"Link--variant-accentDark--dsInternalSimulation-hover__5vv1U","Link--variant-accentDark--dsInternalSimulation-active":"Link--variant-accentDark--dsInternalSimulation-active__-PYgd","Link--variant-accentDarkInverted":"Link--variant-accentDarkInverted__5GVfk","Link--variant-accentDarkInverted--dsInternalSimulation-hover":"Link--variant-accentDarkInverted--dsInternalSimulation-hover__u7g4B","Link--variant-accentDarkInverted--dsInternalSimulation-active":"Link--variant-accentDarkInverted--dsInternalSimulation-active__4bGgk","Link--variant-neutral":"Link--variant-neutral__v0PFp","Link--variant-neutral--dsInternalSimulation-hover":"Link--variant-neutral--dsInternalSimulation-hover__L-hBv","Link--variant-neutral--dsInternalSimulation-active":"Link--variant-neutral--dsInternalSimulation-active__5rs0z","Link--variant-neutralInverted":"Link--variant-neutralInverted__t9Ijl","Link--variant-neutralInverted--dsInternalSimulation-hover":"Link--variant-neutralInverted--dsInternalSimulation-hover__H50Xt","Link--variant-neutralInverted--dsInternalSimulation-active":"Link--variant-neutralInverted--dsInternalSimulation-active__Irr0h","Link--variant-unsetColors":"Link--variant-unsetColors__EEbF5","Link--variant-unsetColors--dsInternalSimulation-hover":"Link--variant-unsetColors--dsInternalSimulation-hover__vMIu6","Link--variant-unsetColors--dsInternalSimulation-active":"Link--variant-unsetColors--dsInternalSimulation-active__wlGTN"},a=k.forwardRef(function(E,P){const{variant:v=Z,href:A,download:H,opensInNewTab:R,nofollow:M,assistiveText:O,onClick:B,as:p,url:F,dataset:G,children:m,inline:J,dsInternalSimulation:z,noUnderline:W,...X}=E,$=ee(),K=ae(ie,y.Link,[f(`variant-${v}--dsInternalSimulation`,z),f("variant",v),x("inline",void 0,J),x("noUnderline",void 0,W)]),c=A||F,Y=c?ne($,c,R,M):{},h={...Q(X),ref:P,href:c,download:H,"aria-label":O,onClick:B,className:K.join(" "),...te(G,{preplyDsComponent:y.Link})};return p?k.cloneElement(p,{...h},m):e.jsx("a",{...h,...Y,children:m})});try{a.displayName="Link",a.__docgenInfo={description:`This is an inline element and will inherit font-size, line-height and
|
|
2
2
|
font-weight from the parent context. If you need to customise any of these
|
|
3
3
|
styles, all you have to do is wrap the <Link> in a Text or TextInline
|
|
4
|
-
component.`,displayName:"Link",props:{variant:{defaultValue:null,description:"",name:"variant",required:!1,type:{name:"enum",value:[{value:'"
|
|
4
|
+
component.`,displayName:"Link",props:{variant:{defaultValue:null,description:"",name:"variant",required:!1,type:{name:"enum",value:[{value:'"accentDark"'},{value:'"neutral"'},{value:'"accentDarkInverted"'},{value:'"neutralInverted"'},{value:'"unsetColors"'}]}},href:{defaultValue:null,description:"",name:"href",required:!1,type:{name:"enum",value:[{value:"string"}]}},download:{defaultValue:null,description:`When provided, instructs the browser to download the target (the file
|
|
5
5
|
specified in the href attribute) when a user clicks on the hyperlink,
|
|
6
6
|
rather than display it in the browser.`,name:"download",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},opensInNewTab:{defaultValue:null,description:"If `true`, forces internal link to open in a new tab.",name:"opensInNewTab",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},nofollow:{defaultValue:null,description:"",name:"nofollow",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},assistiveText:{defaultValue:null,description:"Provide an `aria-label` to the link.\nThis is useful if the link wraps non-textual elements, eg. an `img`.",name:"assistiveText",required:!1,type:{name:"enum",value:[{value:"string"}]}},onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<Element>"}]}},as:{defaultValue:null,description:"",name:"as",required:!1,type:{name:"enum",value:[{value:"ReactElement<any, string | JSXElementConstructor<any>>"}]}},url:{defaultValue:null,description:"@deprecated Use `href` instead",name:"url",required:!1,type:{name:"enum",value:[{value:"string"}]}},dataset:{defaultValue:null,description:`Provide dataset to set data attributes on the DOM element for the purpose
|
|
7
|
-
of e2e tests or integrating with external libraries
|
|
7
|
+
of e2e tests or integrating with external libraries.
|
|
8
|
+
@example <Avatar dataset={{ 'qa-id': 'user-avatar' }} /> // will add data-qa-id="user-avatar" to the HTML element`,name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},inline:{defaultValue:null,description:"If `true`, allows the link to wrap within text.",name:"inline",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},noUnderline:{defaultValue:null,description:"",name:"noUnderline",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},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: HTMLAnchorElement | null) => void"},{value:"RefObject<HTMLAnchorElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}const Ie={title:"components/Link",component:a},r=()=>{const t=d(u.background.primaryInverted);return e.jsxs("div",{style:{display:"flex",gap:"16px"},children:[e.jsx(a,{href:"https://preply.com",variant:"neutral",children:"neutral"}),e.jsx("span",{style:{backgroundColor:t},children:e.jsx(a,{href:"https://preply.com",variant:"neutralInverted",children:"neutralInverted"})}),e.jsx(a,{href:"https://preply.com",variant:"accentDark",children:"accentDark"}),e.jsx("span",{style:{backgroundColor:t},children:e.jsx(a,{href:"https://preply.com",variant:"accentDarkInverted",children:"accentDarkInverted"})}),e.jsx(a,{href:"https://preply.com",variant:"unsetColors",children:"unsetColors"})]})},i=()=>{const t=d(u.background.primaryInverted);return e.jsxs("div",{style:{display:"flex",gap:"16px",flexDirection:"column"},children:[e.jsx(n,{variant:"default-regular-italic",children:"(use the `unsetColors` variant)"}),e.jsxs("div",{children:[e.jsx(n,{variant:"large-semibold-italic",children:"primary"}),e.jsx(n,{variant:"default-regular-italic",children:"normal"}),e.jsxs(n,{accent:"primary",children:["Lorem ipsum ",e.jsx(a,{variant:"unsetColors",children:"dolor sit amet"})," amet."]}),e.jsx(n,{variant:"default-regular-italic",children:"active"}),e.jsxs(n,{accent:"primary",children:["Lorem ipsum"," ",e.jsx(a,{variant:"unsetColors",dsInternalSimulation:"active",children:"dolor sit amet"})," ","amet."]})]}),e.jsxs("div",{style:{backgroundColor:t},children:[e.jsx(n,{variant:"large-semibold-italic",accent:"inverted",children:"inverted"}),e.jsx(n,{variant:"default-regular-italic",accent:"inverted",children:"normal"}),e.jsxs(n,{accent:"inverted",children:["Lorem ipsum ",e.jsx(a,{variant:"unsetColors",children:"dolor sit amet"})," amet."]}),e.jsx(n,{variant:"default-regular-italic",accent:"inverted",children:"active"}),e.jsxs(n,{accent:"inverted",children:["Lorem ipsum"," ",e.jsx(a,{variant:"unsetColors",dsInternalSimulation:"active",children:"dolor sit amet"})," ","amet."]})]}),e.jsxs("div",{children:[e.jsx(n,{variant:"large-semibold-italic",children:"positive"}),e.jsx(n,{variant:"default-regular-italic",children:"normal"}),e.jsxs(n,{accent:"positive",children:["Lorem ipsum ",e.jsx(a,{variant:"unsetColors",children:"dolor sit amet"})," amet."]}),e.jsx(n,{variant:"default-regular-italic",children:"active"}),e.jsxs(n,{accent:"positive",children:["Lorem ipsum"," ",e.jsx(a,{variant:"unsetColors",dsInternalSimulation:"active",children:"dolor sit amet"})," ","amet."]})]}),e.jsxs("div",{children:[e.jsx(n,{variant:"large-semibold-italic",children:"critical"}),e.jsx(n,{variant:"default-regular-italic",children:"normal"}),e.jsxs(n,{accent:"critical",children:["Lorem ipsum ",e.jsx(a,{variant:"unsetColors",children:"dolor sit amet"})," amet."]}),e.jsx(n,{variant:"default-regular-italic",children:"active"}),e.jsxs(n,{accent:"critical",children:["Lorem ipsum"," ",e.jsx(a,{variant:"unsetColors",dsInternalSimulation:"active",children:"dolor sit amet"})," ","amet."]})]})]})},l=()=>{const t=d(u.background.primaryInverted);return e.jsxs("div",{style:{display:"flex",gap:"16px",flexDirection:"column"},children:[e.jsx(n,{variant:"default-regular-italic",children:"normal"}),e.jsxs("div",{style:{display:"flex",gap:"16px"},children:[e.jsx(a,{href:"https://preply.com",variant:"neutral",children:"neutral"}),e.jsx("span",{style:{backgroundColor:t},children:e.jsx(a,{href:"https://preply.com",variant:"neutralInverted",children:"neutralInverted"})}),e.jsx(a,{href:"https://preply.com",variant:"accentDark",children:"accentDark"}),e.jsx("span",{style:{backgroundColor:t},children:e.jsx(a,{href:"https://preply.com",variant:"accentDarkInverted",children:"accentDarkInverted"})}),e.jsx(a,{href:"https://preply.com",variant:"unsetColors",children:"unsetColors"})]}),e.jsx(n,{variant:"default-regular-italic",children:"hover"}),e.jsxs("div",{style:{display:"flex",gap:"16px"},children:[e.jsx(a,{href:"https://preply.com",variant:"neutral",dsInternalSimulation:"hover",children:"neutral"}),e.jsx("span",{style:{backgroundColor:t},children:e.jsx(a,{href:"https://preply.com",variant:"neutralInverted",dsInternalSimulation:"hover",children:"neutralInverted"})}),e.jsx(a,{href:"https://preply.com",variant:"accentDark",dsInternalSimulation:"hover",children:"accentDark"}),e.jsx("span",{style:{backgroundColor:t},children:e.jsx(a,{href:"https://preply.com",variant:"accentDarkInverted",dsInternalSimulation:"hover",children:"accentDarkInverted"})}),e.jsx(a,{href:"https://preply.com",variant:"unsetColors",dsInternalSimulation:"hover",children:"unsetColors"})]}),e.jsx(n,{variant:"default-regular-italic",children:"active"}),e.jsxs("div",{style:{display:"flex",gap:"16px"},children:[e.jsx(a,{href:"https://preply.com",variant:"neutral",dsInternalSimulation:"active",children:"neutral"}),e.jsx("span",{style:{backgroundColor:t},children:e.jsx(a,{href:"https://preply.com",variant:"neutralInverted",dsInternalSimulation:"active",children:"neutralInverted"})}),e.jsx(a,{href:"https://preply.com",variant:"accentDark",dsInternalSimulation:"active",children:"accentDark"}),e.jsx("span",{style:{backgroundColor:t},children:e.jsx(a,{href:"https://preply.com",variant:"accentDarkInverted",dsInternalSimulation:"active",children:"accentDarkInverted"})}),e.jsx(a,{href:"https://preply.com",variant:"unsetColors",dsInternalSimulation:"active",children:"unsetColors"})]})]})},s=()=>e.jsxs("p",{style:{width:"12ch"},children:["Unlock your potential;"," ",e.jsx(a,{href:"https://preply.com",variant:"unsetColors",inline:!0,children:"visit Preply"}),"."]}),o={parameters:{chromatic:{disableSnapshot:!0}},args:{children:"Click me",href:"https://preply.com",variant:"neutral",dataset:{qaid:"link"}},argTypes:{dataset:{control:"object"},inline:{control:"boolean"},noUnderline:{control:"boolean"},opensInNewTab:{control:"boolean"},nofollow:{control:"boolean"},download:{control:"boolean"},assistiveText:{control:"text"},href:{control:"text"},url:{table:{disable:!0}}}};var g,L,I;r.parameters={...r.parameters,docs:{...(g=r.parameters)==null?void 0:g.docs,source:{originalSource:`() => {
|
|
8
9
|
const grey = getTokenVar(color.background.primaryInverted);
|
|
9
10
|
return <div style={{
|
|
10
11
|
display: 'flex',
|
|
@@ -119,7 +120,7 @@ of e2e tests or integrating with external libraries.`,name:"dataset",required:!1
|
|
|
119
120
|
</Text>
|
|
120
121
|
</div>
|
|
121
122
|
</div>;
|
|
122
|
-
}`,...(C=(T=i.parameters)==null?void 0:T.docs)==null?void 0:C.source}}};var b,
|
|
123
|
+
}`,...(C=(T=i.parameters)==null?void 0:T.docs)==null?void 0:C.source}}};var b,S,D;l.parameters={...l.parameters,docs:{...(b=l.parameters)==null?void 0:b.docs,source:{originalSource:`() => {
|
|
123
124
|
const grey = getTokenVar(color.background.primaryInverted);
|
|
124
125
|
return <div style={{
|
|
125
126
|
display: 'flex',
|
|
@@ -214,7 +215,7 @@ of e2e tests or integrating with external libraries.`,name:"dataset",required:!1
|
|
|
214
215
|
</Link>
|
|
215
216
|
</div>
|
|
216
217
|
</div>;
|
|
217
|
-
}`,...(
|
|
218
|
+
}`,...(D=(S=l.parameters)==null?void 0:S.docs)==null?void 0:D.source}}};var _,w,V;s.parameters={...s.parameters,docs:{...(_=s.parameters)==null?void 0:_.docs,source:{originalSource:`() => <p style={{
|
|
218
219
|
width: '12ch'
|
|
219
220
|
}}>
|
|
220
221
|
Unlock your potential;{' '}
|
|
@@ -222,7 +223,7 @@ of e2e tests or integrating with external libraries.`,name:"dataset",required:!1
|
|
|
222
223
|
visit Preply
|
|
223
224
|
</Link>
|
|
224
225
|
.
|
|
225
|
-
</p>`,...(V=(w=
|
|
226
|
+
</p>`,...(V=(w=s.parameters)==null?void 0:w.docs)==null?void 0:V.source}}};var q,N,U;o.parameters={...o.parameters,docs:{...(q=o.parameters)==null?void 0:q.docs,source:{originalSource:`{
|
|
226
227
|
parameters: {
|
|
227
228
|
chromatic: {
|
|
228
229
|
disableSnapshot: true
|
|
@@ -268,4 +269,4 @@ of e2e tests or integrating with external libraries.`,name:"dataset",required:!1
|
|
|
268
269
|
}
|
|
269
270
|
}
|
|
270
271
|
}
|
|
271
|
-
}`,...(U=(N=
|
|
272
|
+
}`,...(U=(N=o.parameters)==null?void 0:N.docs)==null?void 0:U.source}}};const je=["Variants","TextVariants","States","Inline","Playground"];export{s as Inline,o as Playground,l as States,i as TextVariants,r as Variants,je as __namedExportsOrder,Ie as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.Loader__Ya6Xk{display:inline-flex;width:fit-content;height:fit-content}.Loader--normal__41Xzt{color:var(--19bcb6)}.Loader--inverted__NULSk{color:var(--38413d)}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import{j as e}from"./jsx-runtime-BTJTZTIL.js";import{r as h}from"./index-Cb9e4tly.js";import{f as z}from"./filterHTMLAttributes-DYdLqcvH.js";import{S as j}from"./Spinner-B2C3RkCF.js";import{m as k,b as N}from"./classNames-BUL1Zq7e.js";import{w as l}from"./componentNames-Bwls0I02.js";import{g as C}from"./index-DdzHuZ-Y.js";import{S as E}from"./consts-KAYct7Gj.js";import{g as R}from"./getTokenVar-DU_DEzTd.js";import{c as T}from"./tokens-Di5DrZN4.js";import"./index-ChsGqxH_.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./defaults-B1rzzf6M.js";import"./constants-BgBLeZzp.js";const V="Loader__Ya6Xk",q={Loader:V,"Loader--normal":"Loader--normal__41Xzt","Loader--inverted":"Loader--inverted__NULSk"},a=h.forwardRef(function({size:t,inverted:y=!1,dataset:L,...b},S){const _=k(q,l.Loader,[N("inverted","normal",y)]),x={...z(b),ref:S,className:_.join(" "),...C(L,{preplyDsComponent:l.Loader})};return e.jsx("span",{...x,children:e.jsx(j,{size:t})})});try{a.displayName="Loader",a.__docgenInfo={description:"",displayName:"Loader",props:{size:{defaultValue:null,description:"",name:"size",required:!1,type:{name:"enum",value:[{value:'"large"'},{value:'"default"'},{value:"ResponsiveProp<SpinnerSize>"}]}},inverted:{defaultValue:{value:"false"},description:"",name:"inverted",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: HTMLSpanElement | null) => void"},{value:"RefObject<HTMLSpanElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}const G={title:"components/Loader",component:a,argTypes:{size:{description:E}}},o=()=>e.jsxs("div",{style:{display:"flex",alignItems:"end",gap:"8px"},children:[e.jsx(a,{size:"default"}),e.jsx(a,{size:"large"})]}),n=()=>e.jsx(a,{inverted:!0});n.decorators=[r=>{const t=R(T.background.primaryInverted);return e.jsx("div",{style:{backgroundColor:t},children:r()})}];const s={parameters:{chromatic:{disableSnapshot:!0}},decorators:[(r,{args:t})=>e.jsx("div",{style:{backgroundColor:t.inverted?"black":void 0},children:r()})],args:{size:"default",inverted:!1,dataset:{qaid:"loader"}},argTypes:{dataset:{control:"object"},size:{control:"select"},inverted:{control:"boolean"}}};var d,i,c;o.parameters={...o.parameters,docs:{...(d=o.parameters)==null?void 0:d.docs,source:{originalSource:`() => <div style={{
|
|
2
|
+
display: 'flex',
|
|
3
|
+
alignItems: 'end',
|
|
4
|
+
gap: '8px'
|
|
5
|
+
}}>
|
|
6
|
+
<Loader size="default" />
|
|
7
|
+
<Loader size="large" />
|
|
8
|
+
</div>`,...(c=(i=o.parameters)==null?void 0:i.docs)==null?void 0:c.source}}};var u,m,p;n.parameters={...n.parameters,docs:{...(u=n.parameters)==null?void 0:u.docs,source:{originalSource:"() => <Loader inverted />",...(p=(m=n.parameters)==null?void 0:m.docs)==null?void 0:p.source}}};var f,v,g;s.parameters={...s.parameters,docs:{...(f=s.parameters)==null?void 0:f.docs,source:{originalSource:`{
|
|
9
|
+
parameters: {
|
|
10
|
+
chromatic: {
|
|
11
|
+
disableSnapshot: true
|
|
12
|
+
}
|
|
13
|
+
},
|
|
14
|
+
decorators: [(story, {
|
|
15
|
+
args
|
|
16
|
+
}) => <div style={{
|
|
17
|
+
backgroundColor: args.inverted ? 'black' : undefined
|
|
18
|
+
}}>{story()}</div>],
|
|
19
|
+
args: {
|
|
20
|
+
size: 'default',
|
|
21
|
+
inverted: false,
|
|
22
|
+
dataset: {
|
|
23
|
+
qaid: 'loader'
|
|
24
|
+
}
|
|
25
|
+
},
|
|
26
|
+
argTypes: {
|
|
27
|
+
dataset: {
|
|
28
|
+
control: 'object'
|
|
29
|
+
},
|
|
30
|
+
size: {
|
|
31
|
+
control: 'select'
|
|
32
|
+
},
|
|
33
|
+
inverted: {
|
|
34
|
+
control: 'boolean'
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
}`,...(g=(v=s.parameters)==null?void 0:v.docs)==null?void 0:g.source}}};const J=["Sizes","Inverted","Playground"];export{n as Inverted,s as Playground,o as Sizes,J as __namedExportsOrder,G as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.NumberField__BbKr0{display:flex}.NumberField__BbKr0 input::-webkit-outer-spin-button,.NumberField__BbKr0 input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.NumberField__BbKr0 input[type=number]{-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import{j as t}from"./jsx-runtime-BTJTZTIL.js";import{r as s}from"./index-Cb9e4tly.js";import{a as u}from"./chunk-D5ZWXAHU-BhFjjRSl.js";import{e as S,u as xe,w as qe}from"./index-BVDq5o4N.js";import{F as Ee}from"./TokyoUIPhone-CvuBM6jb.js";import{B as R}from"./Button-
|
|
1
|
+
import{j as t}from"./jsx-runtime-BTJTZTIL.js";import{r as s}from"./index-Cb9e4tly.js";import{a as u}from"./chunk-D5ZWXAHU-BhFjjRSl.js";import{e as S,u as xe,w as qe}from"./index-BVDq5o4N.js";import{F as Ee}from"./TokyoUIPhone-CvuBM6jb.js";import{B as R}from"./Button-BlwReLw5.js";import{I as we}from"./Icon-Wpz7-Jvg.js";import{F as He}from"./FieldLayout-DHSEWaEL.js";import{u as Se,I as Fe,s as Ne}from"./FieldLayoutBase-xV81xRaV.js";import{m as Ie}from"./classNames-BUL1Zq7e.js";import{w as m}from"./componentNames-Bwls0I02.js";import{u as Te}from"./useForcedRef--iGFM41p.js";import{u as Re}from"./useNumberField-AJNQGstL.js";import{T as ke}from"./Text-BXZIkJPK.js";import"./index-ChsGqxH_.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./v4-CtRu48qb.js";import"./render-icon-BT0Aq7PA.js";import"./ButtonBase-BCfmDQ_b.js";import"./Spinner-B2C3RkCF.js";import"./defaults-B1rzzf6M.js";import"./filterHTMLAttributes-DYdLqcvH.js";import"./useHostname-Y3PlXofY.js";import"./index-DdzHuZ-Y.js";import"./index-CC6DAVyL.js";import"./text-accent-DZDDtpIt.js";import"./FieldAdditionalText-BD8S7qnE.js";import"./constants-DL6gdbsq.js";import"./index-D1pfvbUR.js";import"./tslib.es6-BntfKcQG.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./message-B1DLZQ1U.js";import"./text-centered-CznToR0o.js";const Be=({onChange:e,onValueChange:a,...n},r)=>{const i=Ie(Ne,m.InputNumber),d=Se(o=>o.target.value?Number(o.target.value):void 0,e,a);return t.jsx(Fe,{...n,type:"number",ref:r,className:i.join(" "),onChange:d,preplyDsComponent:m.InputNumber})},N=s.forwardRef(Be);try{N.displayName="InputNumber",N.__docgenInfo={description:"",displayName:"InputNumber",props:{onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<Element>"}]}},disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},placeholder:{defaultValue:null,description:"",name:"placeholder",required:!1,type:{name:"enum",value:[{value:"string"}]}},id:{defaultValue:null,description:"",name:"id",required:!0,type:{name:"string"}},required:{defaultValue:null,description:"",name:"required",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},hasError:{defaultValue:null,description:"",name:"hasError",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},"aria-describedby":{defaultValue:null,description:`Identifies the element (or elements) that describes the object.
|
|
2
2
|
@see aria-labelledby`,name:"aria-describedby",required:!1,type:{name:"enum",value:[{value:"string"}]}},"aria-disabled":{defaultValue:null,description:`Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
|
|
3
3
|
@see aria-hidden
|
|
4
4
|
@see aria-readonly.`,name:"aria-disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:'"true"'},{value:'"false"'}]}},"aria-invalid":{defaultValue:null,description:`Indicates the entered value does not conform to the format expected by the application.
|
|
5
|
-
@see aria-errormessage.`,name:"aria-invalid",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:'"true"'},{value:'"false"'},{value:'"grammar"'},{value:'"spelling"'}]}},"aria-required":{defaultValue:null,description:"Indicates that user input is required on the element before a form may be submitted.",name:"aria-required",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:'"true"'},{value:'"false"'}]}},placeholder:{defaultValue:null,description:"",name:"placeholder",required:!1,type:{name:"enum",value:[{value:"string"}]}},maxLength:{defaultValue:null,description:"",name:"maxLength",required:!1,type:{name:"enum",value:[{value:"number"}]}},name:{defaultValue:null,description:"",name:"name",required:!1,type:{name:"enum",value:[{value:"string"}]}},onChange:{defaultValue:null,description:"",name:"onChange",required:!1,type:{name:"enum",value:[{value:"ChangeEventHandler<Element>"}]}},onFocus:{defaultValue:null,description:"",name:"onFocus",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<Element>"}]}},onBlur:{defaultValue:null,description:"",name:"onBlur",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<Element>"}]}},onKeyDown:{defaultValue:null,description:"",name:"onKeyDown",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<Element>"}]}},onKeyUp:{defaultValue:null,description:"",name:"onKeyUp",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<Element>"}]}},onCopy:{defaultValue:null,description:"",name:"onCopy",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<Element>"}]}},onPaste:{defaultValue:null,description:"",name:"onPaste",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<Element>"}]}},required:{defaultValue:null,description:"",name:"required",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},readOnly:{defaultValue:null,description:"",name:"readOnly",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},hasError:{defaultValue:null,description:"",name:"hasError",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},value:{defaultValue:null,description:"",name:"value",required:!1,type:{name:"enum",value:[{value:"number"}]}},min:{defaultValue:null,description:"",name:"min",required:!1,type:{name:"enum",value:[{value:"number"}]}},max:{defaultValue:null,description:"",name:"max",required:!1,type:{name:"enum",value:[{value:"number"}]}},defaultValue:{defaultValue:null,description:"",name:"defaultValue",required:!1,type:{name:"enum",value:[{value:"number"}]}},onValueChange:{defaultValue:null,description:"",name:"onValueChange",required:!1,type:{name:"enum",value:[{value:"ValueChangeEventHandler<number | undefined>"}]}},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: InputImperativeHandle | null) => void"},{value:"RefObject<InputImperativeHandle>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}const Be="_NumberField_kx5jx_1",Pe={NumberField:Be},Le=({id:e,...a},n)=>{const r=s.useRef(null),i=Te();s.useImperativeHandle(n,()=>({setFocus:()=>{var c;return(c=r==null?void 0:r.current)==null?void 0:c.setFocus()},scrollIntoView:()=>{var c;return(c=r==null?void 0:r.current)==null?void 0:c.scrollIntoView()}}));const d=Re({id:e,...a},m.NumberField),{layoutProps:o,inputProps:F}=d,l=Ie(Pe,m.NumberField),Ce=t.jsx(N,{...F,ref:i});return t.jsx(He,{...o,className:l.join(" "),input:Ce,inputHandle:i.current,ref:r,preplyDsComponent:m.NumberField})},p=s.forwardRef(Le);try{p.displayName="NumberField",p.__docgenInfo={description:"By default, this field acts as a controlled field and expects the parent\ncomponent to manage the state, by reacting to user input via the `onChange` or\n`onValueChange` props, and providing the latest state via the `value` prop.\n\nAlternatively, you can use it as an uncontrolled field using the\n`defaultValue` prop instead of the `value` prop.",displayName:"NumberField",props:{id:{defaultValue:null,description:"",name:"id",required:!1,type:{name:"enum",value:[{value:"string"}]}},label:{defaultValue:null,description:"The field label. This is needed for accessibility purposes, but can be\nhidden using the `hideLabel` prop.",name:"label",required:!0,type:{name:"enum",value:[{value:"undefined"},{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},requiredLabel:{defaultValue:null,description:"",name:"requiredLabel",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"}]}},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"}]}},wrapLabel:{defaultValue:null,description:"",name:"wrapLabel",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},additionalText:{defaultValue:null,description:"",name:"additionalText",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"}]}},preserveSpace:{defaultValue:null,description:"",name:"preserveSpace",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},hasError:{defaultValue:null,description:"",name:"hasError",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},errorMessage:{defaultValue:null,description:"",name:"errorMessage",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"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},inputDataset:{defaultValue:null,description:"",name:"inputDataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<Element>"}]}},disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},placeholder:{defaultValue:null,description:"",name:"placeholder",required:!1,type:{name:"enum",value:[{value:"string"}]}},maxLength:{defaultValue:null,description:"",name:"maxLength",required:!1,type:{name:"enum",value:[{value:"number"}]}},name:{defaultValue:null,description:"",name:"name",required:!1,type:{name:"enum",value:[{value:"string"}]}},value:{defaultValue:null,description:"",name:"value",required:!1,type:{name:"enum",value:[{value:"number"}]}},defaultValue:{defaultValue:null,description:"",name:"defaultValue",required:!1,type:{name:"enum",value:[{value:"number"}]}},onChange:{defaultValue:null,description:"",name:"onChange",required:!1,type:{name:"enum",value:[{value:"ChangeEventHandler<Element>"}]}},onFocus:{defaultValue:null,description:"",name:"onFocus",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<Element>"}]}},onBlur:{defaultValue:null,description:"",name:"onBlur",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<Element>"}]}},onKeyDown:{defaultValue:null,description:"",name:"onKeyDown",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<Element>"}]}},onKeyUp:{defaultValue:null,description:"",name:"onKeyUp",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<Element>"}]}},onCopy:{defaultValue:null,description:"",name:"onCopy",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<Element>"}]}},onPaste:{defaultValue:null,description:"",name:"onPaste",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<Element>"}]}},required:{defaultValue:null,description:"",name:"required",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},readOnly:{defaultValue:null,description:"",name:"readOnly",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},onValueChange:{defaultValue:null,description:"",name:"onValueChange",required:!1,type:{name:"enum",value:[{value:"ValueChangeEventHandler<number | undefined>"}]}},min:{defaultValue:null,description:"",name:"min",required:!1,type:{name:"enum",value:[{value:"number"}]}},max:{defaultValue:null,description:"",name:"max",required:!1,type:{name:"enum",value:[{value:"number"}]}},icon:{defaultValue:null,description:"",name:"icon",required:!1,type:{name:"enum",value:[{value:"ReactElement<IconProps, string | JSXElementConstructor<any>>"}]}},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: InputImperativeHandle | null) => void"},{value:"RefObject<InputImperativeHandle>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}const ha={title:"components/NumberField",component:p,args:{label:"Number",placeholder:"Enter a number",inputDataset:{testid:"input"},onChange:u("onChange"),onBlur:u("onBlur"),onFocus:u("onFocus"),onClick:u("onClick"),onCopy:u("onCopy"),onKeyDown:u("onKeyDown"),onKeyUp:u("onKeyUp"),onPaste:u("onPaste"),onValueChange:u("onValueChange")},render:function(a){const n=s.useRef(null);return a.ref=n,t.jsx(p,{...a})}},v={parameters:{docs:{description:{story:"An empty field with a `label` and a `placeholder`."}}}},f={args:{defaultValue:100},play:async({canvas:e,step:a})=>{await a("Validate defaultValue",async()=>{const n=e.getByTestId("input");await S(n).toHaveValue(100)}),await a("Type to value",async()=>{const n=e.getByTestId("input");await xe.type(n,",500"),await S(n).toHaveValue(100500)})}},y={args:{icon:t.jsx(we,{svg:Ee})}},h={args:{additionalText:"This is additional text"}},b={args:{required:!0}},g={args:{required:!0,requiredLabel:t.jsx(ke,{accent:"critical",variant:"m-bold",children:"Needed"})}},V={args:{hideLabel:!0}},x={args:{hasError:!0}},q={args:{hasError:!0,errorMessage:"This is an error message"}},E={args:{disabled:!0}},w={args:{readOnly:!0}},I={decorators:[(e,{args:a})=>t.jsxs("div",{style:{padding:"8px",margin:"8px"},children:[t.jsxs("p",{children:["You can"," ",t.jsx(R,{variant:"secondary",dataset:{testid:"focus-button"},onClick:()=>{var n,r;return(r=(n=a.ref)==null?void 0:n.current)==null?void 0:r.setFocus()},children:"Focus"})," ","the input imperatively."]}),t.jsx(e,{})]})],play:async({args:e,canvas:a})=>{if(!T(e.ref))throw new Error("Expected ref.current to be an InputImperativeHandle");const n=a.getByTestId("input");await xe.click(a.getByTestId("focus-button")),await qe(()=>S(n).toHaveFocus())}},C={decorators:[(e,{args:a})=>t.jsxs("div",{style:{height:"300px",overflow:"scroll",padding:"8px",margin:"8px"},children:[t.jsxs("p",{children:["You can"," ",t.jsx(R,{variant:"secondary",dataset:{testid:"scroll-button"},onClick:()=>{if(!T(a.ref))throw new Error("Expected ref.current to be an InputImperativeHandle");a.ref.current.scrollIntoView()},children:"Scroll"})," ","the input into view imperatively."]}),t.jsx("div",{style:{height:"1000px",display:"flex",flexDirection:"column",justifyContent:"end",border:"2px dashed lightgray",padding:"16px"},children:t.jsx(e,{})})]})],play:async({args:e,canvas:a})=>{if(!T(e.ref))throw new Error("Expected ref.current to be an InputImperativeHandle");const n=a.getByTestId("input");e.ref.current.scrollIntoView(),await qe(()=>S(n).toBeVisible())}};function T(e){return typeof e=="object"&&e!==null&&"current"in e&&e.current!==null&&typeof e.current=="object"&&"setFocus"in e.current}const H={tags:["!test"],parameters:{docs:{description:{story:'\nThe following code renders a `Numberfield` with the `required` flag, a `min`\nand `max` value, an `icon`, a `placeholder`, and some `additionalText`.\n\nWhen you click the "Submit" button and the input value is empty\n- it displays feedback via the `errorMessage` prop;\n- and uses the `setFocus()` API to bring the focus back to the field.\n\nIt uses the `value` and `onValueChange` props to react to the user input.\n'}},chromatic:{disableSnapshot:!0}},render:function(){const a=s.useRef(null),[n,r]=s.useState(void 0),[i,d]=s.useState(!1),o=l=>{if(l===void 0)return"Please provide a number";if(l!==Math.round(l))return"Please provide a whole number";if(l<10)return"Please book at least 10 lessons";if(l>99)return"Please book less than 100 lessons"},F=()=>{var l;d(!0),n||(l=a==null?void 0:a.current)==null||l.setFocus()};return t.jsxs("div",{style:{maxWidth:"500px",display:"flex",flexDirection:"column"},children:[t.jsx(p,{id:"lessons",name:"lessons",label:"Number of lessons",icon:t.jsx(we,{svg:Ee}),placeholder:"How about 3?",value:n,additionalText:"These lessons will be scheduled automatically",onValueChange:r,errorMessage:i?o(n):void 0,min:10,max:99,ref:a,required:!0}),t.jsx(R,{onClick:F,children:"Submit"})]})}};var k,j,B;v.parameters={...v.parameters,docs:{...(k=v.parameters)==null?void 0:k.docs,source:{originalSource:`{
|
|
5
|
+
@see aria-errormessage.`,name:"aria-invalid",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:'"true"'},{value:'"false"'},{value:'"grammar"'},{value:'"spelling"'}]}},"aria-required":{defaultValue:null,description:"Indicates that user input is required on the element before a form may be submitted.",name:"aria-required",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:'"true"'},{value:'"false"'}]}},maxLength:{defaultValue:null,description:"",name:"maxLength",required:!1,type:{name:"enum",value:[{value:"number"}]}},name:{defaultValue:null,description:"",name:"name",required:!1,type:{name:"enum",value:[{value:"string"}]}},onChange:{defaultValue:null,description:"",name:"onChange",required:!1,type:{name:"enum",value:[{value:"ChangeEventHandler<Element>"}]}},onFocus:{defaultValue:null,description:"",name:"onFocus",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<Element>"}]}},onBlur:{defaultValue:null,description:"",name:"onBlur",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<Element>"}]}},onKeyDown:{defaultValue:null,description:"",name:"onKeyDown",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<Element>"}]}},onKeyUp:{defaultValue:null,description:"",name:"onKeyUp",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<Element>"}]}},onCopy:{defaultValue:null,description:"",name:"onCopy",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<Element>"}]}},onPaste:{defaultValue:null,description:"",name:"onPaste",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<Element>"}]}},readOnly:{defaultValue:null,description:"",name:"readOnly",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},value:{defaultValue:null,description:"",name:"value",required:!1,type:{name:"enum",value:[{value:"number"}]}},min:{defaultValue:null,description:"",name:"min",required:!1,type:{name:"enum",value:[{value:"number"}]}},max:{defaultValue:null,description:"",name:"max",required:!1,type:{name:"enum",value:[{value:"number"}]}},defaultValue:{defaultValue:null,description:"",name:"defaultValue",required:!1,type:{name:"enum",value:[{value:"number"}]}},onValueChange:{defaultValue:null,description:"",name:"onValueChange",required:!1,type:{name:"enum",value:[{value:"ValueChangeEventHandler<number | undefined>"}]}},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: InputImperativeHandle | null) => void"},{value:"RefObject<InputImperativeHandle>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}const je="NumberField__BbKr0",Pe={NumberField:je},Le=({id:e,...a},n)=>{const r=s.useRef(null),i=Te();s.useImperativeHandle(n,()=>({setFocus:()=>{var c;return(c=r==null?void 0:r.current)==null?void 0:c.setFocus()},scrollIntoView:()=>{var c;return(c=r==null?void 0:r.current)==null?void 0:c.scrollIntoView()}}));const d=Re({id:e,...a},m.NumberField),{layoutProps:o,inputProps:F}=d,l=Ie(Pe,m.NumberField),Ce=t.jsx(N,{...F,ref:i});return t.jsx(He,{...o,className:l.join(" "),input:Ce,inputHandle:i.current,ref:r,preplyDsComponent:m.NumberField})},p=s.forwardRef(Le);try{p.displayName="NumberField",p.__docgenInfo={description:"By default, this field acts as a controlled field and expects the parent\ncomponent to manage the state, by reacting to user input via the `onChange` or\n`onValueChange` props, and providing the latest state via the `value` prop.\n\nAlternatively, you can use it as an uncontrolled field using the\n`defaultValue` prop instead of the `value` prop.",displayName:"NumberField",props:{id:{defaultValue:null,description:"",name:"id",required:!1,type:{name:"enum",value:[{value:"string"}]}},label:{defaultValue:null,description:"The field label. This is needed for accessibility purposes, but can be\nhidden using the `hideLabel` prop.",name:"label",required:!0,type:{name:"enum",value:[{value:"undefined"},{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},requiredLabel:{defaultValue:null,description:"",name:"requiredLabel",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"}]}},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"}]}},wrapLabel:{defaultValue:null,description:"",name:"wrapLabel",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},additionalText:{defaultValue:null,description:"",name:"additionalText",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"}]}},preserveSpace:{defaultValue:null,description:"",name:"preserveSpace",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},hasError:{defaultValue:null,description:"",name:"hasError",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},errorMessage:{defaultValue:null,description:"",name:"errorMessage",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"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},inputDataset:{defaultValue:null,description:"",name:"inputDataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<Element>"}]}},disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},placeholder:{defaultValue:null,description:"",name:"placeholder",required:!1,type:{name:"enum",value:[{value:"string"}]}},required:{defaultValue:null,description:"",name:"required",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},maxLength:{defaultValue:null,description:"",name:"maxLength",required:!1,type:{name:"enum",value:[{value:"number"}]}},name:{defaultValue:null,description:"",name:"name",required:!1,type:{name:"enum",value:[{value:"string"}]}},value:{defaultValue:null,description:"",name:"value",required:!1,type:{name:"enum",value:[{value:"number"}]}},defaultValue:{defaultValue:null,description:"",name:"defaultValue",required:!1,type:{name:"enum",value:[{value:"number"}]}},onChange:{defaultValue:null,description:"",name:"onChange",required:!1,type:{name:"enum",value:[{value:"ChangeEventHandler<Element>"}]}},onFocus:{defaultValue:null,description:"",name:"onFocus",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<Element>"}]}},onBlur:{defaultValue:null,description:"",name:"onBlur",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<Element>"}]}},onKeyDown:{defaultValue:null,description:"",name:"onKeyDown",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<Element>"}]}},onKeyUp:{defaultValue:null,description:"",name:"onKeyUp",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<Element>"}]}},onCopy:{defaultValue:null,description:"",name:"onCopy",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<Element>"}]}},onPaste:{defaultValue:null,description:"",name:"onPaste",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<Element>"}]}},readOnly:{defaultValue:null,description:"",name:"readOnly",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},onValueChange:{defaultValue:null,description:"",name:"onValueChange",required:!1,type:{name:"enum",value:[{value:"ValueChangeEventHandler<number | undefined>"}]}},min:{defaultValue:null,description:"",name:"min",required:!1,type:{name:"enum",value:[{value:"number"}]}},max:{defaultValue:null,description:"",name:"max",required:!1,type:{name:"enum",value:[{value:"number"}]}},icon:{defaultValue:null,description:"",name:"icon",required:!1,type:{name:"enum",value:[{value:"ReactElement<IconProps, string | JSXElementConstructor<any>>"}]}},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: InputImperativeHandle | null) => void"},{value:"RefObject<InputImperativeHandle>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}const ha={title:"components/NumberField",component:p,args:{label:"Number",placeholder:"Enter a number",inputDataset:{testid:"input"},onChange:u("onChange"),onBlur:u("onBlur"),onFocus:u("onFocus"),onClick:u("onClick"),onCopy:u("onCopy"),onKeyDown:u("onKeyDown"),onKeyUp:u("onKeyUp"),onPaste:u("onPaste"),onValueChange:u("onValueChange")},render:function(a){const n=s.useRef(null);return a.ref=n,t.jsx(p,{...a})}},v={parameters:{docs:{description:{story:"An empty field with a `label` and a `placeholder`."}}}},f={args:{defaultValue:100},play:async({canvas:e,step:a})=>{await a("Validate defaultValue",async()=>{const n=e.getByTestId("input");await S(n).toHaveValue(100)}),await a("Type to value",async()=>{const n=e.getByTestId("input");await xe.type(n,",500"),await S(n).toHaveValue(100500)})}},y={args:{icon:t.jsx(we,{svg:Ee})}},h={args:{additionalText:"This is additional text"}},b={args:{required:!0}},g={args:{required:!0,requiredLabel:t.jsx(ke,{accent:"critical",variant:"m-bold",children:"Needed"})}},V={args:{hideLabel:!0}},x={args:{hasError:!0}},q={args:{hasError:!0,errorMessage:"This is an error message"}},E={args:{disabled:!0}},w={args:{readOnly:!0}},I={decorators:[(e,{args:a})=>t.jsxs("div",{style:{padding:"8px",margin:"8px"},children:[t.jsxs("p",{children:["You can"," ",t.jsx(R,{variant:"secondary",dataset:{testid:"focus-button"},onClick:()=>{var n,r;return(r=(n=a.ref)==null?void 0:n.current)==null?void 0:r.setFocus()},children:"Focus"})," ","the input imperatively."]}),t.jsx(e,{})]})],play:async({args:e,canvas:a})=>{if(!T(e.ref))throw new Error("Expected ref.current to be an InputImperativeHandle");const n=a.getByTestId("input");await xe.click(a.getByTestId("focus-button")),await qe(()=>S(n).toHaveFocus())}},C={decorators:[(e,{args:a})=>t.jsxs("div",{style:{height:"300px",overflow:"scroll",padding:"8px",margin:"8px"},children:[t.jsxs("p",{children:["You can"," ",t.jsx(R,{variant:"secondary",dataset:{testid:"scroll-button"},onClick:()=>{if(!T(a.ref))throw new Error("Expected ref.current to be an InputImperativeHandle");a.ref.current.scrollIntoView()},children:"Scroll"})," ","the input into view imperatively."]}),t.jsx("div",{style:{height:"1000px",display:"flex",flexDirection:"column",justifyContent:"end",border:"2px dashed lightgray",padding:"16px"},children:t.jsx(e,{})})]})],play:async({args:e,canvas:a})=>{if(!T(e.ref))throw new Error("Expected ref.current to be an InputImperativeHandle");const n=a.getByTestId("input");e.ref.current.scrollIntoView(),await qe(()=>S(n).toBeVisible())}};function T(e){return typeof e=="object"&&e!==null&&"current"in e&&e.current!==null&&typeof e.current=="object"&&"setFocus"in e.current}const H={tags:["!test"],parameters:{docs:{description:{story:'\nThe following code renders a `Numberfield` with the `required` flag, a `min`\nand `max` value, an `icon`, a `placeholder`, and some `additionalText`.\n\nWhen you click the "Submit" button and the input value is empty\n- it displays feedback via the `errorMessage` prop;\n- and uses the `setFocus()` API to bring the focus back to the field.\n\nIt uses the `value` and `onValueChange` props to react to the user input.\n'}},chromatic:{disableSnapshot:!0}},render:function(){const a=s.useRef(null),[n,r]=s.useState(void 0),[i,d]=s.useState(!1),o=l=>{if(l===void 0)return"Please provide a number";if(l!==Math.round(l))return"Please provide a whole number";if(l<10)return"Please book at least 10 lessons";if(l>99)return"Please book less than 100 lessons"},F=()=>{var l;d(!0),n||(l=a==null?void 0:a.current)==null||l.setFocus()};return t.jsxs("div",{style:{maxWidth:"500px",display:"flex",flexDirection:"column"},children:[t.jsx(p,{id:"lessons",name:"lessons",label:"Number of lessons",icon:t.jsx(we,{svg:Ee}),placeholder:"How about 3?",value:n,additionalText:"These lessons will be scheduled automatically",onValueChange:r,errorMessage:i?o(n):void 0,min:10,max:99,ref:a,required:!0}),t.jsx(R,{onClick:F,children:"Submit"})]})}};var k,B,j;v.parameters={...v.parameters,docs:{...(k=v.parameters)==null?void 0:k.docs,source:{originalSource:`{
|
|
6
6
|
parameters: {
|
|
7
7
|
docs: {
|
|
8
8
|
description: {
|
|
@@ -10,7 +10,7 @@ import{j as t}from"./jsx-runtime-BTJTZTIL.js";import{r as s}from"./index-Cb9e4tl
|
|
|
10
10
|
}
|
|
11
11
|
}
|
|
12
12
|
}
|
|
13
|
-
}`,...(
|
|
13
|
+
}`,...(j=(B=v.parameters)==null?void 0:B.docs)==null?void 0:j.source}}};var P,L,D;f.parameters={...f.parameters,docs:{...(P=f.parameters)==null?void 0:P.docs,source:{originalSource:`{
|
|
14
14
|
args: {
|
|
15
15
|
defaultValue: 100
|
|
16
16
|
},
|
|
@@ -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:'"
|
|
8
|
+
- Trigger an animation, or a feature (e.g.: onboarding instructions).`,displayName:"ObserveIntersection",props:{onIntersect:{defaultValue:null,description:"",name:"onIntersect",required:!0,type:{name:"() => void"}},once:{defaultValue:null,description:"",name:"once",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},threshold:{defaultValue:null,description:"",name:"threshold",required:!1,type:{name:"enum",value:[{value:"number"}]}},tag:{defaultValue:null,description:"",name:"tag",required:!1,type:{name:"enum",value:[{value:'"p"'},{value:'"div"'},{value:'"span"'},{value:'"main"'},{value:'"header"'},{value:'"footer"'},{value:'"article"'},{value:'"section"'},{value:'"ul"'},{value:'"ol"'},{value:'"li"'},{value:'"fieldset"'},{value:'"table"'},{value:'"th"'},{value:'"tr"'},{value:'"td"'},{value:'"thead"'},{value:'"tfoot"'},{value:'"tbody"'},{value:'"caption"'},{value:'"figure"'},{value:'"figcaption"'}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}}}}}catch{}export{o as O};
|
|
@@ -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-
|
|
1
|
+
import{j as t}from"./jsx-runtime-BTJTZTIL.js";import{r as a}from"./index-Cb9e4tly.js";import{O as i}from"./ObserveIntersection-Ccn6ggRl.js";import"./index-ChsGqxH_.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./index-DdzHuZ-Y.js";import"./defaults-B1rzzf6M.js";import"./componentNames-Bwls0I02.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.
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.content__KHgp9{background-color:var(--79dffb);border-radius:var(--fa4b1a);padding:var(--558c4c);box-shadow:var(--df7dbb);width:304px;display:flex;flex-direction:column;gap:var(--813599);z-index:var(--ds-onboarding-tooltip-z-index-override, auto);animation-duration:.15s;animation-timing-function:cubic-bezier(.25,0,.5,1.3);transform-origin:var(--radix-popover-content-transform-origin);will-change:transform,opacity}.content__KHgp9[data-state=open]{animation-name:appear__G8agi}.content__KHgp9[data-state=closed]{animation-name:disappear__OWVSJ}.header__CaLti{display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:flex-start}.close__3s-VD{background:none;border:none;border-radius:var(--5e8be4);padding:0;margin:0;cursor:pointer}.close__3s-VD:focus-visible{outline-style:solid;outline-color:var(--603ec6);outline-width:var(--99d31f);outline-offset:var(--c0b12c)}.footer__X5qXF{display:flex;justify-content:flex-end;gap:var(--813599);align-items:center}.arrow__0pg-s{fill:var(--79dffb)}@keyframes appear__G8agi{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@keyframes disappear__OWVSJ{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0)}}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as a}from"./jsx-runtime-BTJTZTIL.js";import{r as n}from"./index-Cb9e4tly.js";import{R,A as
|
|
1
|
+
import{j as a}from"./jsx-runtime-BTJTZTIL.js";import{r as n}from"./index-Cb9e4tly.js";import{R,A as _,P as q,C as x,a as O,b as N}from"./index-BOrXX8UK.js";import{F as E}from"./TokyoUIClose-thK8sk63.js";import{I as k}from"./Icon-Wpz7-Jvg.js";import{T as P}from"./Text-BXZIkJPK.js";import{B as j}from"./Button-BlwReLw5.js";import{H as T}from"./Heading-Bj7LLgoH.js";import{u as D}from"./index-D1pfvbUR.js";import{g as S}from"./shared-strings-Biv7UF3M.js";import{i as L}from"./PortalElementProvider-BRcRijdp.js";import{g as M}from"./index-DdzHuZ-Y.js";import{w as H}from"./componentNames-Bwls0I02.js";import{M as X}from"./message-B1DLZQ1U.js";const J="content__KHgp9",B="header__CaLti",F="close__3s-VD",U="footer__X5qXF",A="arrow__0pg-s",o={content:J,header:B,close:F,footer:U,arrow:A},G=e=>{e.scrollIntoViewIfNeeded?e.scrollIntoViewIfNeeded(!1):e.scrollIntoView({behavior:"auto",block:"nearest",inline:"nearest"})},m=({open:e,onOpenChange:i,disabled:r,title:u,text:s,children:t,side:l,dataset:h,actionLabel:b=a.jsx(X,{id:"preply-ds.onboardingTooltip.actionLabel",defaultMessage:"Got it",description:"Default onboarding tooltip action label. Used to acknowledge and close the tooltip."}),actionOnClick:g,actionHref:y,counter:C,autoScroll:v=!0})=>{const{formatMessage:I}=D(),w=L(),f=n.useId(),V=n.useId(),d=n.useId(),c=n.useRef(null);return n.useEffect(()=>{e&&c.current&&v&&G(c.current)},[v,e]),r?t:a.jsxs(R,{open:e,onOpenChange:i,children:[a.jsx(_,{ref:c,id:d,asChild:!0,children:t}),a.jsx(q,{container:w,children:a.jsxs(x,{side:l,className:o.content,"aria-labelledby":f,"aria-describedby":`${d} ${V}`,...M(h,{preplyDsComponent:H.OnboardingTooltip}),children:[a.jsxs("div",{className:o.header,children:[a.jsx(O,{className:o.close,"aria-label":I(S.close),"data-testid":"close",children:a.jsx(k,{accent:"inverted",svg:E})}),a.jsx(T,{tag:"h1",variant:"small",accent:"inverted",id:f,"aria-describedby":d,children:u})]}),a.jsx(P,{variant:"default-regular",accent:"inverted",children:s}),a.jsxs("div",{className:o.footer,children:[C,a.jsx(j,{variant:"inverted",size:"small",onClick:g,href:y,dataset:{testid:"action"},wrap:!0,children:b})]}),a.jsx(N,{"aria-hidden":!0,className:o.arrow,width:18,height:11})]})})]})},p=e=>{const[i,r]=n.useState(!0),u=t=>{var l;t||(l=e.onClose)==null||l.call(e),r(t)},s=()=>{var t,l;(t=e.actionOnClick)==null||t.call(e),r(!1),(l=e.onClose)==null||l.call(e)};return a.jsx(m,{...e,open:i,onOpenChange:u,actionOnClick:s})};try{m.displayName="InternalOnboardingTooltip",m.__docgenInfo={description:"",displayName:"InternalOnboardingTooltip",props:{title:{defaultValue:null,description:"",name:"title",required:!0,type:{name:"enum",value:[{value:"undefined"},{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},text:{defaultValue:null,description:"",name:"text",required:!0,type:{name:"enum",value:[{value:"undefined"},{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},disabled:{defaultValue:null,description:"Disables tooltip completely",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},onClose:{defaultValue:null,description:"Called when the tooltip is closed",name:"onClose",required:!1,type:{name:"enum",value:[{value:"() => void"}]}},actionLabel:{defaultValue:{value:`(
|
|
2
2
|
<FormattedMessage
|
|
3
3
|
id="preply-ds.onboardingTooltip.actionLabel"
|
|
4
4
|
defaultMessage="Got it"
|
package/dist/assets/{OnboardingTooltip.stories-B0FIL9CU.js → OnboardingTooltip.stories-CBEGxsdn.js}
RENAMED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as e}from"./jsx-runtime-BTJTZTIL.js";import{O as u}from"./OnboardingTooltip-
|
|
1
|
+
import{j as e}from"./jsx-runtime-BTJTZTIL.js";import{O as u}from"./OnboardingTooltip-DkJtTrMv.js";import{I as g}from"./IconButton-B7CxWK4j.js";import{F as x}from"./TokyoUIFav-DOVerCtW.js";import"./index-ChsGqxH_.js";import"./index-Cb9e4tly.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./index-BOrXX8UK.js";import"./PortalElementProvider-BRcRijdp.js";import"./index-BPrLDK9Y.js";import"./index-C7hTFOIV.js";import"./index-M3hvtcRE.js";import"./tslib.es6-BntfKcQG.js";import"./index-DOA2-rRC.js";import"./TokyoUIClose-thK8sk63.js";import"./Icon-Wpz7-Jvg.js";import"./text-accent-DZDDtpIt.js";import"./classNames-BUL1Zq7e.js";import"./filterHTMLAttributes-DYdLqcvH.js";import"./render-icon-BT0Aq7PA.js";import"./componentNames-Bwls0I02.js";import"./index-DdzHuZ-Y.js";import"./defaults-B1rzzf6M.js";import"./Text-BXZIkJPK.js";import"./text-centered-CznToR0o.js";import"./Button-BlwReLw5.js";import"./ButtonBase-BCfmDQ_b.js";import"./Spinner-B2C3RkCF.js";import"./useHostname-Y3PlXofY.js";import"./index-CC6DAVyL.js";import"./Heading-Bj7LLgoH.js";import"./index-D1pfvbUR.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./shared-strings-Biv7UF3M.js";import"./message-B1DLZQ1U.js";const ee={title:"Components/OnboardingTooltip",component:u,parameters:{docs:{story:{inline:!1,height:250},description:{component:"Are you looking for a step-by-step tour? Check out [OnboardingTour](/docs/components-onboardingtour--docs)"}},a11y:{config:{rules:[{id:"color-contrast",enabled:!1}]}}},decorators:[t=>e.jsx("div",{style:{margin:"auto",width:"max-content"},children:t()})]},f=t=>[!1,!1],h=t=>a=>{},o=()=>{const[t,a]=f(),v=h();return e.jsx(u,{title:"New Feature Available!",text:"We've added an exciting new feature to enhance your experience.",disabled:a||t,onClose:()=>v(!0),children:e.jsx(g,{variant:"ghost",svg:e.jsx(x,{}),assistiveText:"Favorite"})})};o.storyName="OnboardingTooltip";const r={tags:["!autodocs"],args:{title:"New Feature Available!",text:"We've added an exciting new feature to enhance your experience.",disabled:!1,onClose:()=>{},children:e.jsx(g,{variant:"ghost",svg:e.jsx(x,{}),assistiveText:"Favorite"})},argTypes:{title:{control:"text"},text:{control:"text"},actionLabel:{control:"text"},actionOnClick:{control:!1},actionHref:{control:"text"},disabled:{control:"boolean"},dataset:{control:"object"},onClose:{control:!1},children:{control:!1}},parameters:{docs:{story:{height:450}},chromatic:{disableSnapshot:!0}},decorators:[t=>e.jsx("div",{style:{minHeight:"100vh",display:"flex"},children:e.jsx("div",{style:{margin:"auto",width:"max-content"},children:t()})})]};var i,n,s,l,c;o.parameters={...o.parameters,docs:{...(i=o.parameters)==null?void 0:i.docs,source:{originalSource:`() => {
|
|
2
2
|
const [wasTooltipSeen, loading] = useIsFeatureActive('new-feature');
|
|
3
3
|
const setTooltipSeen = useToggleFeature('new-feature');
|
|
4
4
|
return <OnboardingTooltip title="New Feature Available!" text="We've added an exciting new feature to enhance your experience." disabled={loading || wasTooltipSeen} onClose={() => setTooltipSeen(true)}>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as c}from"./jsx-runtime-BTJTZTIL.js";import{O as b}from"./OnboardingTooltip-
|
|
1
|
+
import{j as c}from"./jsx-runtime-BTJTZTIL.js";import{O as b}from"./OnboardingTooltip-DkJtTrMv.js";import{I as T}from"./IconButton-B7CxWK4j.js";import{F as g}from"./TokyoUIFav-DOVerCtW.js";import{a as s,w as r,e as p,u as v}from"./index-BVDq5o4N.js";import"./index-ChsGqxH_.js";import"./index-Cb9e4tly.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./index-BOrXX8UK.js";import"./PortalElementProvider-BRcRijdp.js";import"./index-BPrLDK9Y.js";import"./index-C7hTFOIV.js";import"./index-M3hvtcRE.js";import"./tslib.es6-BntfKcQG.js";import"./index-DOA2-rRC.js";import"./TokyoUIClose-thK8sk63.js";import"./Icon-Wpz7-Jvg.js";import"./text-accent-DZDDtpIt.js";import"./classNames-BUL1Zq7e.js";import"./filterHTMLAttributes-DYdLqcvH.js";import"./render-icon-BT0Aq7PA.js";import"./componentNames-Bwls0I02.js";import"./index-DdzHuZ-Y.js";import"./defaults-B1rzzf6M.js";import"./Text-BXZIkJPK.js";import"./text-centered-CznToR0o.js";import"./Button-BlwReLw5.js";import"./ButtonBase-BCfmDQ_b.js";import"./Spinner-B2C3RkCF.js";import"./useHostname-Y3PlXofY.js";import"./index-CC6DAVyL.js";import"./Heading-Bj7LLgoH.js";import"./index-D1pfvbUR.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./shared-strings-Biv7UF3M.js";import"./message-B1DLZQ1U.js";const et={title:"Components/OnboardingTooltip/Tests",component:b,parameters:{layout:"centered",controls:{disable:!0},chromatic:{disableSnapshot:!0}},tags:["!autodocs","!a11y-test","test"],decorators:[e=>c.jsx("div",{style:{margin:"100px 0"},children:e()})],args:{title:"Title",text:"Body text",actionLabel:"Action label",disabled:!1,onClose:()=>{},dataset:{testid:"tooltip"},children:c.jsx(T,{svg:c.jsx(g,{}),assistiveText:"Favorite"})}},n={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 p(t).toBeVisible()})}),await o("close the tooltip",()=>{const l=s(i.getByTestId("tooltip")).getByTestId("close");return v.click(l)}),await o("wait for tooltip to be hidden",async()=>{await r(()=>{const t=i.queryByTestId("tooltip");return p(t).toBeNull()})})}},a={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 p(t).toBeVisible()})}),await o("close the tooltip",()=>{const l=s(i.getByTestId("tooltip")).getByTestId("action");return v.click(l)}),await o("wait for tooltip to be hidden",async()=>{await r(()=>{const t=i.queryByTestId("tooltip");return p(t).toBeNull()})})}};var m,d,u;n.parameters={...n.parameters,docs:{...(m=n.parameters)==null?void 0:m.docs,source:{originalSource:`{
|
|
2
2
|
play: async ({
|
|
3
3
|
canvasElement,
|
|
4
4
|
step
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import{j as o}from"./jsx-runtime-BTJTZTIL.js";import{r as l}from"./index-Cb9e4tly.js";import{I as A}from"./OnboardingTooltip-DkJtTrMv.js";import"./index-D1pfvbUR.js";import{M as f}from"./message-B1DLZQ1U.js";const T="counter__ArBS-",j={counter:T},v=({totalSteps:n,nextActionLabel:e=o.jsx(f,{id:"preply-ds.onboardingTour.nextActionLabel",defaultMessage:"Next",description:"Onboarding tour next action label"}),completeActionLabel:a=o.jsx(f,{id:"preply-ds.onboardingTour.completeActionLabel",defaultMessage:"Got it",description:"Onboarding tour complete action label"}),onClose:t,onComplete:r,onStepChange:i,disabled:s,children:p,ctx:x})=>{const[b,u]=l.useState(!0),[d,g]=l.useState(0),c={totalSteps:n,nextActionLabel:e,completeActionLabel:a,onClose:()=>{u(!1),t==null||t()},active:!s&&b,currentStep:d,onActionClick:()=>{if(d===n-1)r==null||r(),u(!1);else{const h=d+1;g(h),i==null||i(h)}}};return o.jsx(x.Provider,{value:c,children:p})},_=({ctx:n,...e})=>{const a=l.useContext(n);if(!a)throw new Error("OnboardingTourContext not found");const{currentStep:t,totalSteps:r,onActionClick:i,onClose:s,active:p,nextActionLabel:x,completeActionLabel:b}=a,u=e.step===r-1,d=e.step===t,g=u?b:x,m=()=>{var c;(c=e.actionOnClick)==null||c.call(e),i()},O=c=>{c||s==null||s()};return o.jsx(A,{...e,counter:o.jsx("p",{className:j.counter,children:o.jsx(f,{id:"preply-ds.onboardingTour.counter",defaultMessage:"{currentStep} of {totalSteps}",description:"Onboarding tour step counter, e.g. '1 of 3'",values:{currentStep:t+1,totalSteps:r}})}),open:p&&d,onOpenChange:O,actionLabel:g,actionOnClick:m})},S=()=>{const n=l.createContext(null);return{Provider:t=>o.jsx(v,{...t,ctx:n}),Step:t=>o.jsx(_,{...t,ctx:n})}};try{S.displayName="createOnboardingTour",S.__docgenInfo={description:`Creates a new onboarding tour.
|
|
2
|
+
|
|
3
|
+
This factory pattern allows multiple independent tours to be nested within each other
|
|
4
|
+
without context conflicts, as each tour maintains its own separate context and state.`,displayName:"createOnboardingTour",props:{}}}catch{}export{S as c};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.counter__ArBS-{flex:1;min-width:max-content;color:var(--a924f9);font-size:var(--f7d879);font-weight:var(--87a7e3);line-height:var(--1cb31f)}
|