@preply/ds-docs 1.5.0 → 2.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/{00.LayoutFlex.stories-CQZmIU-U.js → 00.LayoutFlex.stories-Dxg48axa.js} +1 -1
- package/dist/assets/{00.applications-Di7jQEUP.js → 00.applications-CWPvzkb8.js} +1 -1
- package/dist/assets/{00.favicons.guide-BqtgcOst.js → 00.favicons.guide-CioTS39P.js} +1 -1
- package/dist/assets/{00.token-explorer-B-hoQtAZ.js → 00.token-explorer-Ms3A3gKw.js} +1 -1
- package/dist/assets/{00.using-responsive-props-yIiNVrjH.js → 00.using-responsive-props-B4JXxb8B.js} +1 -1
- package/dist/assets/{01.semantic-tokens-Bszt1twO.js → 01.semantic-tokens-uwEK-alq.js} +1 -1
- package/dist/assets/{01.using-shorthand-props-w8U5wYm4.js → 01.using-shorthand-props-DVl924Oz.js} +1 -1
- package/dist/assets/{10.Combinations.stories-BJzVfaWu.js → 10.Combinations.stories-BwVik25M.js} +1 -1
- package/dist/assets/{10.fonts.guide-NBYHGpZG.js → 10.fonts.guide-CPpSTBh5.js} +1 -1
- package/dist/assets/{10.ssr-CjoJSokY.js → 10.ssr-nIbsPyxs.js} +1 -1
- package/dist/assets/{11.languageFont.explorer-7dsvANIs.js → 11.languageFont.explorer-BnJaxOzB.js} +1 -1
- package/dist/assets/{11.ssr.app-router-D7ufx5p4.js → 11.ssr.app-router-D1RtbDN9.js} +1 -1
- package/dist/assets/{20.libraries-BgURMzec.js → 20.libraries-DROERfkO.js} +1 -1
- package/dist/assets/{30.icons.explorer-GCwQhgUE.js → 30.icons.explorer-El51dKM_.js} +2 -2
- package/dist/assets/{30.storybook-6u3F3eKp.js → 30.storybook-DG4_FgeX.js} +1 -1
- package/dist/assets/{40.illustrations.explorer-DQ5Oemtc.js → 40.illustrations.explorer-BZO-_C_S.js} +1 -1
- package/dist/assets/{90.advanced-CfRw5q9D.js → 90.advanced-Bpafg85K.js} +1 -1
- package/dist/assets/AlertDialog-C9BEjgkE.css +1 -0
- package/dist/assets/{AlertDialog.stories-YL-e1X-5.js → AlertDialog.stories-DYP2Qbit.js} +2 -2
- package/dist/assets/Avatar-DKsRQl4B.js +6 -0
- package/dist/assets/Avatar-HtycGal7.js +1 -0
- package/dist/assets/Avatar-L-715hiR.css +1 -0
- package/dist/assets/Avatar-M4k3pOBX.css +1 -0
- package/dist/assets/{Avatar.stories-Bok7S-hP.js → Avatar.stories-D7fst3_7.js} +1 -1
- package/dist/assets/AvatarWithStatus-Dz0rSSHl.css +1 -0
- package/dist/assets/{AvatarWithStatus.stories-CEZSwfci.js → AvatarWithStatus.stories-NWE-3XEL.js} +1 -1
- package/dist/assets/Badge-Ar4YZCqB.css +1 -0
- package/dist/assets/{Badge.stories-CvhsYu7L.js → Badge.stories-DxY6VuVF.js} +1 -1
- package/dist/assets/Box-D1WAKfTQ.css +1 -0
- package/dist/assets/Box.stories-DFh_1cIr.js +44 -0
- package/dist/assets/{Button-Dy26oY0t.js → Button-BOyl6fPv.js} +2 -2
- package/dist/assets/Button-BwBS3oEP.css +1 -0
- package/dist/assets/Button-DTjBNg_z.js +1 -0
- package/dist/assets/{Button-CjrFqtK6.css → Button-P9yXDdEf.css} +1 -1
- package/dist/assets/{Button.stories-C3ImqpQo.js → Button.stories-H01CJnTv.js} +1 -1
- package/dist/assets/ButtonBase-CndTGqQQ.js +8 -0
- package/dist/assets/{ButtonBase-CZ1X_2UT.css → ButtonBase-Ddw6v5fn.css} +1 -1
- package/dist/assets/Chips-CpylpY14.css +1 -0
- package/dist/assets/{Chips.stories-DvnrQpsy.js → Chips.stories-B6Md1MMV.js} +5 -5
- package/dist/assets/{Color-YHDXOIA2-Dz3WhSmf.js → Color-YHDXOIA2-4GAnzwWB.js} +1 -1
- package/dist/assets/Dialog-CNTXsWOb.css +1 -0
- package/dist/assets/{Dialog.stories-DFaL3AMR.js → Dialog.stories-C7_Fdl3l.js} +18 -18
- package/dist/assets/{DocsRenderer-CFRXHY34-rpqlGaZf.js → DocsRenderer-CFRXHY34-DEKaLxr5.js} +1 -1
- package/dist/assets/{FieldAdditionalText-BCMB8JHW.js → FieldAdditionalText-BbXsXR5V.js} +1 -1
- package/dist/assets/FieldAdditionalText-DbuNvJBg.css +1 -0
- package/dist/assets/{FieldAdditionalText.stories-BTKc3XUo.js → FieldAdditionalText.stories-BknKG7pn.js} +1 -1
- package/dist/assets/{FieldButton-BK6nCNDL.css → FieldButton-BJQKm6jT.css} +1 -1
- package/dist/assets/{FieldButton-BbLI1MM0.js → FieldButton-CLS4hZRO.js} +1 -1
- package/dist/assets/{FieldButton.stories-vpLl5qi7.js → FieldButton.stories-8phtWQab.js} +1 -1
- package/dist/assets/FieldLayout-DYbPQFAW.css +1 -0
- package/dist/assets/FieldLayout-nD5R7atd.js +1 -0
- package/dist/assets/{FieldLayout.stories-BcIZKltP.js → FieldLayout.stories-TOLu2AYc.js} +1 -1
- package/dist/assets/FieldLayoutBase-B_B5-cjL.css +1 -0
- package/dist/assets/{FieldLayoutBase-CbZWkNI7.js → FieldLayoutBase-Ri_bjseH.js} +3 -3
- package/dist/assets/Heading-BIzxWDA5.js +2 -0
- package/dist/assets/{Heading-B_ZQCeib.css → Heading-DLvxlILX.css} +1 -1
- package/dist/assets/{Heading.stories-MSLqIH2n.js → Heading.stories-DVOG4eGs.js} +1 -1
- package/dist/assets/Icon-BmtvHdpX.js +8 -0
- package/dist/assets/Icon-BqDOhmd9.js +1 -0
- package/dist/assets/Icon-CQT2GKoH.css +1 -0
- package/dist/assets/Icon-CXX0nf3D.css +1 -0
- package/dist/assets/{Icon-RSC-Z5MLssxb.js → Icon-RSC-BXbRnWp9.js} +1 -1
- package/dist/assets/{Icon.stories-DoZhZVXF.js → Icon.stories-DLdTr5b7.js} +1 -1
- package/dist/assets/{IconButton-DMtc1AqT.js → IconButton-LF952PfZ.js} +2 -2
- package/dist/assets/InputText-Dtc7LpKa.js +5 -0
- package/dist/assets/{LayoutFlex-Cj8q1bY9.js → LayoutFlex-Bm8v-QkC.js} +1 -1
- package/dist/assets/{LayoutFlex-DJgUW3tI.js → LayoutFlex-Cc1D09Ei.js} +1 -1
- package/dist/assets/LayoutFlexItem-BYTRwx_X.css +1 -0
- package/dist/assets/{LayoutFlexItem-C1qrSn1R.js → LayoutFlexItem-C_JBzaw-.js} +1 -1
- package/dist/assets/LayoutGrid-DFWk8NB8.css +1 -0
- package/dist/assets/LayoutGrid-IDkxjZN1.js +1 -0
- package/dist/assets/LayoutGrid-L_40ixqn.css +1 -0
- package/dist/assets/{LayoutGrid.stories-BNUhVFei.js → LayoutGrid.stories-DPmEZkN1.js} +3 -3
- package/dist/assets/LayoutGridItem-DvV7NvZa.js +1 -0
- package/dist/assets/LayoutGridItem-DwNHNpvD.css +1 -0
- package/dist/assets/Link-xQTG6qM6.css +1 -0
- package/dist/assets/{Link.stories-KUuvoGXv.js → Link.stories-EiMcdLab.js} +5 -5
- package/dist/assets/Loader-BasFj5cB.css +1 -0
- package/dist/assets/{Loader.stories-C7oYgr7U.js → Loader.stories-C9NOJXU_.js} +3 -3
- package/dist/assets/NumberField.stories-DpEWh-dT.js +203 -0
- package/dist/assets/OnboardingTooltip-BUE-a7PJ.css +1 -0
- package/dist/assets/{OnboardingTooltip-DuoU0OG7.js → OnboardingTooltip-vUAo9ADZ.js} +1 -1
- package/dist/assets/{OnboardingTooltip.stories-C7TCPsRd.js → OnboardingTooltip.stories-doNUnMe7.js} +1 -1
- package/dist/assets/{OnboardingTooltip.tests.stories-CR7peq2A.js → OnboardingTooltip.tests.stories-Bv3lHMu_.js} +1 -1
- package/dist/assets/{OnboardingTour-a1foGtP0.css → OnboardingTour-BJaUVtET.css} +1 -1
- package/dist/assets/{OnboardingTour-D5pUyw-H.js → OnboardingTour-i4oFa3CL.js} +1 -1
- package/dist/assets/{OnboardingTour.stories-CHE5u2N9.js → OnboardingTour.stories-CoOA-ga5.js} +1 -1
- package/dist/assets/{OnboardingTour.tests.stories-L1SItA_o.js → OnboardingTour.tests.stories-Bi99nEGK.js} +1 -1
- package/dist/assets/PasswordField.stories-DY5ogILG.js +203 -0
- package/dist/assets/PreplyLogo-D50rvD8_.css +1 -0
- package/dist/assets/{PreplyLogo.stories-U59VXeLV.js → PreplyLogo.stories-D2YUc7Xm.js} +4 -4
- package/dist/assets/{ProgressBar-wu_9uvGg.css → ProgressBar-BoL6q8Gm.css} +1 -1
- package/dist/assets/{ProgressBar.stories-CJHzGMBI.js → ProgressBar.stories-DQ2un511.js} +1 -1
- package/dist/assets/{ProgressSteps-D0sRQY_x.js → ProgressSteps-CSu6U8Oh.js} +1 -1
- package/dist/assets/ProgressSteps-oRv75ID6.css +1 -0
- package/dist/assets/{ProgressSteps.stories-C_1GQ6Wk.js → ProgressSteps.stories-CbxKZt-6.js} +1 -1
- package/dist/assets/SelectField-DdoXEWJk.css +1 -0
- package/dist/assets/SelectField.stories-DXrTFOq5.js +182 -0
- package/dist/assets/Spinner-WkRCqqWl.css +1 -0
- package/dist/assets/{Spinner-DgGnJd2k.js → Spinner-Yzq6CWfu.js} +1 -1
- package/dist/assets/Steps-Cm49GD2O.css +1 -0
- package/dist/assets/{Steps-BC67AT21.js → Steps-Drw_J1pN.js} +2 -2
- package/dist/assets/{Steps.stories-Croh-b85.js → Steps.stories-BhTfb1un.js} +1 -1
- package/dist/assets/Text-BbTAW1HU.js +1 -0
- package/dist/assets/Text-V4TRyvtW.js +1 -0
- package/dist/assets/{Text-j7spMxpW.css → Text-rF1Oi742.css} +1 -1
- package/dist/assets/{Text.stories-D2QDcBIa.js → Text.stories-CRxantTh.js} +1 -1
- package/dist/assets/TextField-BzR--15O.js +1 -0
- package/dist/assets/TextField-DnBkywp4.css +1 -0
- package/dist/assets/{TextField.stories-BlZcgyOD.js → TextField.stories-B6ZiRnD3.js} +1 -1
- package/dist/assets/TextHighlighted-Be3VqoqU.js +1 -0
- package/dist/assets/TextHighlighted-ctAnMXHo.css +1 -0
- package/dist/assets/{TextHighlighted.stories-D5eTvy-x.js → TextHighlighted.stories-Ccl1UgGr.js} +3 -3
- package/dist/assets/TextInline-zyBsYqm3.css +1 -0
- package/dist/assets/{TextInline.stories-4RVYUyo7.js → TextInline.stories-DjHRpfFb.js} +1 -1
- package/dist/assets/TextareaField.stories-ZPt_wlMP.js +221 -0
- package/dist/assets/Toast-9YYei-H6.css +1 -0
- package/dist/assets/{Toast.stories-C1rwf1P4.js → Toast.stories-DKkMHs-Q.js} +2 -2
- package/dist/assets/Tooltip-CEXdeSMx.css +1 -0
- package/dist/assets/{Tooltip-BcWLgQdz.js → Tooltip-Ct-WqDpg.js} +1 -1
- package/dist/assets/{Tooltip.stories-C_eulyA8.js → Tooltip.stories-BWtp4p6F.js} +1 -1
- package/dist/assets/{Tooltip.tests.stories-CNSvrg-a.js → Tooltip.tests.stories-C2PZScD4.js} +1 -1
- package/dist/assets/{breakpoints-C8FPGqgF.js → breakpoints-BHfQdcIJ.js} +1 -1
- package/dist/assets/{breakpoints-Owi7Squn.js → breakpoints-DrPPi6ob.js} +1 -1
- package/dist/assets/{breakpoints-DD1YjD9M.js → breakpoints-I4FAlX3-.js} +1 -1
- package/dist/assets/{changelog-BDm_gPnt.js → changelog-CHKnz4hf.js} +96 -86
- package/dist/assets/{entry-preview-Djan81pS.js → entry-preview-CJqbxsdd.js} +1 -1
- package/dist/assets/{getTokenVar-D087RqJE.js → getTokenVar-BX_aqC-A.js} +1 -1
- package/dist/assets/{hover-CrLn2ebs.js → hover-BcoRLc18.js} +1 -1
- package/dist/assets/{hover-Bacj4cI5.js → hover-Bn6tz5Uw.js} +1 -1
- package/dist/assets/{hover-C9JcRjWU.js → hover-DNMePSJs.js} +1 -1
- package/dist/assets/{iframe-CDRtj9ru.js → iframe-D0mvSgIL.js} +2 -2
- package/dist/assets/{index-CvmVTRnc.js → index-4X0Wd6c1.js} +1 -1
- package/dist/assets/{index-CV8DVSiW.js → index-BsQc80lu.js} +3 -3
- package/dist/assets/{intro-BVNrHHEI.js → intro-CBk5iAA3.js} +1 -1
- package/dist/assets/layout-relative-Bqi-eQr9.css +1 -0
- package/dist/assets/layout-relative-Brg7nCBe.css +1 -0
- package/dist/assets/layout-relative-D1P2Swpw.css +1 -0
- package/dist/assets/layout-relative-DFrOiWAE.js +1 -0
- package/dist/assets/layout-relative.module-BhIMNlTS-HdwEQarE.js +1 -0
- package/dist/assets/layout-relative.module-CDUOJ19G.js +1 -0
- package/dist/assets/{migrating-from-less-Dr8tG-us.js → migrating-from-less-T5R-NRLP.js} +1 -1
- package/dist/assets/playground-pPNOw9Oj.css +1 -0
- package/dist/assets/{playground.stories-BLiukQbS.js → playground.stories-D2vZb5DU.js} +88 -88
- package/dist/assets/{preview-1ef74z28.js → preview-BBPbRy6B.js} +2 -2
- package/dist/assets/{preview-EanVfwSK.js → preview-DCKor9oC.js} +1 -1
- package/dist/assets/{preview-CfQRgEmh.js → preview-Vxjmr8F-.js} +1 -1
- package/dist/assets/text-accent-BbDxH1tz.css +1 -0
- package/dist/assets/text-accent-C7pEavfl.js +1 -0
- package/dist/assets/text-accent-Pc_gtAUU.js +1 -0
- package/dist/assets/text-centered-Bf8j8BI4.js +1 -0
- package/dist/assets/text-centered-BsBBnlcu.css +1 -0
- package/dist/assets/text-centered-CCAvmLGC.css +1 -0
- package/dist/assets/text-centered-CEVxj3Ji.js +1 -0
- package/dist/assets/{tokens-DX2Hf4qt.js → tokens-BYJD7edf.js} +1 -1
- package/dist/assets/{tokens-BtYQ8W_y.js → tokens-ChcQAZih.js} +1 -1
- package/dist/assets/{tokens-noSXbqGF.js → tokens-D0BWg3AW.js} +1 -1
- package/dist/assets/{usePortalElement-o38kz4UN.js → usePortalElement-D8YB8wCj.js} +1 -1
- package/dist/assets/{welcome-CnT01hD4.js → welcome-mZ5KeQa-.js} +1 -1
- package/dist/assets/{zeroheight-BUMgok6n.js → zeroheight-CLcZK6pE.js} +1 -1
- package/dist/iframe.html +1 -1
- package/dist/preview-stats.json +1550 -1550
- package/dist/project.json +1 -1
- package/package.json +3 -3
- package/dist/assets/AlertDialog-DSR7lwcr.css +0 -1
- package/dist/assets/Avatar-CY8LENR_.css +0 -1
- package/dist/assets/Avatar-DBYAA8jq.js +0 -6
- package/dist/assets/Avatar-Vaj5CZzo.js +0 -1
- package/dist/assets/Avatar-yGngrFRe.css +0 -1
- package/dist/assets/AvatarWithStatus-C-I9yxMp.css +0 -1
- package/dist/assets/Badge-BDfgu9OD.css +0 -1
- package/dist/assets/Box-Dl-QnUHN.css +0 -1
- package/dist/assets/Box.stories-nJvB5AvT.js +0 -44
- package/dist/assets/Button-CDbUPX5z.css +0 -1
- package/dist/assets/Button-DoDXFggu.js +0 -1
- package/dist/assets/ButtonBase-C6zIOZ7w.js +0 -8
- package/dist/assets/Chips-D3NfThf2.css +0 -1
- package/dist/assets/Dialog-DHOGtHBQ.css +0 -1
- package/dist/assets/FieldAdditionalText-BtVADuTn.css +0 -1
- package/dist/assets/FieldLayout-DC-YB5tP.css +0 -1
- package/dist/assets/FieldLayout-zG6DP4fD.js +0 -1
- package/dist/assets/FieldLayoutBase-Dv-ccXqK.css +0 -1
- package/dist/assets/Heading-DPPEK9A1.js +0 -2
- package/dist/assets/Icon-BNvtTXpG.js +0 -8
- package/dist/assets/Icon-DaYbmtvu.css +0 -1
- package/dist/assets/Icon-DdGCYYnw.css +0 -1
- package/dist/assets/Icon-wXkY19lJ.js +0 -1
- package/dist/assets/InputText-DAMAB4Tc.js +0 -5
- package/dist/assets/LayoutFlexItem-BIkIcH4n.css +0 -1
- package/dist/assets/LayoutGrid-DLuh585c.js +0 -1
- package/dist/assets/LayoutGrid-DMbtqKwQ.css +0 -1
- package/dist/assets/LayoutGrid-DqCfK2vN.css +0 -1
- package/dist/assets/LayoutGridItem-BissFQZa.css +0 -1
- package/dist/assets/LayoutGridItem-Cl02VDid.js +0 -1
- package/dist/assets/Link-CZvqSjA-.css +0 -1
- package/dist/assets/Loader-CPdt-2H5.css +0 -1
- package/dist/assets/NumberField.stories-EBr9TWOu.js +0 -203
- package/dist/assets/OnboardingTooltip-ih2-H7aT.css +0 -1
- package/dist/assets/PasswordField.stories-BbIVWXCg.js +0 -203
- package/dist/assets/PreplyLogo-DzP78T2L.css +0 -1
- package/dist/assets/ProgressSteps-e3-CbmW-.css +0 -1
- package/dist/assets/SelectField-DtmQqReE.css +0 -1
- package/dist/assets/SelectField.stories-Dbbnnm8r.js +0 -182
- package/dist/assets/Spinner-CXZtxZbo.css +0 -1
- package/dist/assets/Steps-BemYpgTr.css +0 -1
- package/dist/assets/Text-BQv_D3Xd.js +0 -1
- package/dist/assets/Text-C4DBPFZ_.js +0 -1
- package/dist/assets/TextField-4eAvmy7R.js +0 -1
- package/dist/assets/TextField-QAPIvMQf.css +0 -1
- package/dist/assets/TextHighlighted-D1Eq_O3M.js +0 -1
- package/dist/assets/TextHighlighted-Kfu8Cikz.css +0 -1
- package/dist/assets/TextInline-CieB8GiR.css +0 -1
- package/dist/assets/TextareaField.stories-Bp5XBUFn.js +0 -221
- package/dist/assets/Toast-BxY7edbh.css +0 -1
- package/dist/assets/Tooltip-C4RcESB2.css +0 -1
- package/dist/assets/layout-relative-ByAioz3N.css +0 -1
- package/dist/assets/layout-relative-DL5GCYL3.css +0 -1
- package/dist/assets/layout-relative-DX2HhfVy.css +0 -1
- package/dist/assets/layout-relative-vwhQiHRS.js +0 -1
- package/dist/assets/layout-relative.module-BIEPDZE2-CYlDcUGJ.js +0 -1
- package/dist/assets/layout-relative.module-Cmd2g7hD.js +0 -1
- package/dist/assets/playground-66zMGCdb.css +0 -1
- package/dist/assets/text-accent-BbQDH9df.js +0 -1
- package/dist/assets/text-accent-DwQPHwM2.js +0 -1
- package/dist/assets/text-accent-UmsGcNvp.css +0 -1
- package/dist/assets/text-centered-BwHG-She.js +0 -1
- package/dist/assets/text-centered-Do6zdubZ.css +0 -1
- package/dist/assets/text-centered-J90FiEm7.css +0 -1
- package/dist/assets/text-centered-zQ_girwR.js +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{j as w}from"./jsx-runtime-BTJTZTIL.js";import{r as x}from"./index-Cb9e4tly.js";import{m as o,b as c,a as g,s as u}from"./classNames-BUL1Zq7e.js";import{B as p}from"./breakpoints-BfMlrtxE.js";import{a as b,b as h,s as A,g as C}from"./layout-relative.module-BhIMNlTS-HdwEQarE.js";import{L as N}from"./constants-DYYVurUY.js";import{k as T,f as v,L as U}from"./defaults-B1rzzf6M.js";import{f as I}from"./filterHTMLAttributes-UOns5Q7s.js";import{g as O}from"./index-DdzHuZ-Y.js";import{w as D}from"./componentNames-Bwls0I02.js";const E="LayoutHide",R=(t,i=N)=>o(b,E,[c("hide",i,t)]),Y="LayoutRelative",$=t=>o(h,Y,[c("relative",void 0,t)]),P="_LayoutGrid_1xr0r_4",G={LayoutGrid:P,"LayoutGrid--justify-content-center":"_LayoutGrid--justify-content-center_1xr0r_14","LayoutGrid--justify-content-start":"_LayoutGrid--justify-content-start_1xr0r_17","LayoutGrid--justify-content-end":"_LayoutGrid--justify-content-end_1xr0r_20","LayoutGrid--justify-content-space-between":"_LayoutGrid--justify-content-space-between_1xr0r_23","LayoutGrid--justify-content-space-around":"_LayoutGrid--justify-content-space-around_1xr0r_26","LayoutGrid--justify-content-space-evenly":"_LayoutGrid--justify-content-space-evenly_1xr0r_29","LayoutGrid--narrow-l--justify-content-center":"_LayoutGrid--narrow-l--justify-content-center_1xr0r_33","LayoutGrid--narrow-l--justify-content-start":"_LayoutGrid--narrow-l--justify-content-start_1xr0r_36","LayoutGrid--narrow-l--justify-content-end":"_LayoutGrid--narrow-l--justify-content-end_1xr0r_39","LayoutGrid--narrow-l--justify-content-space-between":"_LayoutGrid--narrow-l--justify-content-space-between_1xr0r_42","LayoutGrid--narrow-l--justify-content-space-around":"_LayoutGrid--narrow-l--justify-content-space-around_1xr0r_45","LayoutGrid--narrow-l--justify-content-space-evenly":"_LayoutGrid--narrow-l--justify-content-space-evenly_1xr0r_48","LayoutGrid--medium-s--justify-content-center":"_LayoutGrid--medium-s--justify-content-center_1xr0r_53","LayoutGrid--medium-s--justify-content-start":"_LayoutGrid--medium-s--justify-content-start_1xr0r_56","LayoutGrid--medium-s--justify-content-end":"_LayoutGrid--medium-s--justify-content-end_1xr0r_59","LayoutGrid--medium-s--justify-content-space-between":"_LayoutGrid--medium-s--justify-content-space-between_1xr0r_62","LayoutGrid--medium-s--justify-content-space-around":"_LayoutGrid--medium-s--justify-content-space-around_1xr0r_65","LayoutGrid--medium-s--justify-content-space-evenly":"_LayoutGrid--medium-s--justify-content-space-evenly_1xr0r_68","LayoutGrid--medium-l--justify-content-center":"_LayoutGrid--medium-l--justify-content-center_1xr0r_73","LayoutGrid--medium-l--justify-content-start":"_LayoutGrid--medium-l--justify-content-start_1xr0r_76","LayoutGrid--medium-l--justify-content-end":"_LayoutGrid--medium-l--justify-content-end_1xr0r_79","LayoutGrid--medium-l--justify-content-space-between":"_LayoutGrid--medium-l--justify-content-space-between_1xr0r_82","LayoutGrid--medium-l--justify-content-space-around":"_LayoutGrid--medium-l--justify-content-space-around_1xr0r_85","LayoutGrid--medium-l--justify-content-space-evenly":"_LayoutGrid--medium-l--justify-content-space-evenly_1xr0r_88","LayoutGrid--wide-s--justify-content-center":"_LayoutGrid--wide-s--justify-content-center_1xr0r_93","LayoutGrid--wide-s--justify-content-start":"_LayoutGrid--wide-s--justify-content-start_1xr0r_96","LayoutGrid--wide-s--justify-content-end":"_LayoutGrid--wide-s--justify-content-end_1xr0r_99","LayoutGrid--wide-s--justify-content-space-between":"_LayoutGrid--wide-s--justify-content-space-between_1xr0r_102","LayoutGrid--wide-s--justify-content-space-around":"_LayoutGrid--wide-s--justify-content-space-around_1xr0r_105","LayoutGrid--wide-s--justify-content-space-evenly":"_LayoutGrid--wide-s--justify-content-space-evenly_1xr0r_108","LayoutGrid--wide-l--justify-content-center":"_LayoutGrid--wide-l--justify-content-center_1xr0r_113","LayoutGrid--wide-l--justify-content-start":"_LayoutGrid--wide-l--justify-content-start_1xr0r_116","LayoutGrid--wide-l--justify-content-end":"_LayoutGrid--wide-l--justify-content-end_1xr0r_119","LayoutGrid--wide-l--justify-content-space-between":"_LayoutGrid--wide-l--justify-content-space-between_1xr0r_122","LayoutGrid--wide-l--justify-content-space-around":"_LayoutGrid--wide-l--justify-content-space-around_1xr0r_125","LayoutGrid--wide-l--justify-content-space-evenly":"_LayoutGrid--wide-l--justify-content-space-evenly_1xr0r_128","LayoutGrid--align-items-center":"_LayoutGrid--align-items-center_1xr0r_132","LayoutGrid--align-items-start":"_LayoutGrid--align-items-start_1xr0r_135","LayoutGrid--align-items-end":"_LayoutGrid--align-items-end_1xr0r_138","LayoutGrid--align-items-stretch":"_LayoutGrid--align-items-stretch_1xr0r_141","LayoutGrid--align-items-baseline":"_LayoutGrid--align-items-baseline_1xr0r_144","LayoutGrid--narrow-l--align-items-center":"_LayoutGrid--narrow-l--align-items-center_1xr0r_148","LayoutGrid--narrow-l--align-items-start":"_LayoutGrid--narrow-l--align-items-start_1xr0r_151","LayoutGrid--narrow-l--align-items-end":"_LayoutGrid--narrow-l--align-items-end_1xr0r_154","LayoutGrid--narrow-l--align-items-stretch":"_LayoutGrid--narrow-l--align-items-stretch_1xr0r_157","LayoutGrid--narrow-l--align-items-baseline":"_LayoutGrid--narrow-l--align-items-baseline_1xr0r_160","LayoutGrid--medium-s--align-items-center":"_LayoutGrid--medium-s--align-items-center_1xr0r_165","LayoutGrid--medium-s--align-items-start":"_LayoutGrid--medium-s--align-items-start_1xr0r_168","LayoutGrid--medium-s--align-items-end":"_LayoutGrid--medium-s--align-items-end_1xr0r_171","LayoutGrid--medium-s--align-items-stretch":"_LayoutGrid--medium-s--align-items-stretch_1xr0r_174","LayoutGrid--medium-s--align-items-baseline":"_LayoutGrid--medium-s--align-items-baseline_1xr0r_177","LayoutGrid--medium-l--align-items-center":"_LayoutGrid--medium-l--align-items-center_1xr0r_182","LayoutGrid--medium-l--align-items-start":"_LayoutGrid--medium-l--align-items-start_1xr0r_185","LayoutGrid--medium-l--align-items-end":"_LayoutGrid--medium-l--align-items-end_1xr0r_188","LayoutGrid--medium-l--align-items-stretch":"_LayoutGrid--medium-l--align-items-stretch_1xr0r_191","LayoutGrid--medium-l--align-items-baseline":"_LayoutGrid--medium-l--align-items-baseline_1xr0r_194","LayoutGrid--wide-s--align-items-center":"_LayoutGrid--wide-s--align-items-center_1xr0r_199","LayoutGrid--wide-s--align-items-start":"_LayoutGrid--wide-s--align-items-start_1xr0r_202","LayoutGrid--wide-s--align-items-end":"_LayoutGrid--wide-s--align-items-end_1xr0r_205","LayoutGrid--wide-s--align-items-stretch":"_LayoutGrid--wide-s--align-items-stretch_1xr0r_208","LayoutGrid--wide-s--align-items-baseline":"_LayoutGrid--wide-s--align-items-baseline_1xr0r_211","LayoutGrid--wide-l--align-items-center":"_LayoutGrid--wide-l--align-items-center_1xr0r_216","LayoutGrid--wide-l--align-items-start":"_LayoutGrid--wide-l--align-items-start_1xr0r_219","LayoutGrid--wide-l--align-items-end":"_LayoutGrid--wide-l--align-items-end_1xr0r_222","LayoutGrid--wide-l--align-items-stretch":"_LayoutGrid--wide-l--align-items-stretch_1xr0r_225","LayoutGrid--wide-l--align-items-baseline":"_LayoutGrid--wide-l--align-items-baseline_1xr0r_228","LayoutGrid--justify-items-stretch":"_LayoutGrid--justify-items-stretch_1xr0r_232","LayoutGrid--justify-items-center":"_LayoutGrid--justify-items-center_1xr0r_235","LayoutGrid--justify-items-start":"_LayoutGrid--justify-items-start_1xr0r_238","LayoutGrid--justify-items-end":"_LayoutGrid--justify-items-end_1xr0r_241","LayoutGrid--narrow-l--justify-items-stretch":"_LayoutGrid--narrow-l--justify-items-stretch_1xr0r_245","LayoutGrid--narrow-l--justify-items-center":"_LayoutGrid--narrow-l--justify-items-center_1xr0r_248","LayoutGrid--narrow-l--justify-items-start":"_LayoutGrid--narrow-l--justify-items-start_1xr0r_251","LayoutGrid--narrow-l--justify-items-end":"_LayoutGrid--narrow-l--justify-items-end_1xr0r_254","LayoutGrid--medium-s--justify-items-stretch":"_LayoutGrid--medium-s--justify-items-stretch_1xr0r_259","LayoutGrid--medium-s--justify-items-center":"_LayoutGrid--medium-s--justify-items-center_1xr0r_262","LayoutGrid--medium-s--justify-items-start":"_LayoutGrid--medium-s--justify-items-start_1xr0r_265","LayoutGrid--medium-s--justify-items-end":"_LayoutGrid--medium-s--justify-items-end_1xr0r_268","LayoutGrid--medium-l--justify-items-stretch":"_LayoutGrid--medium-l--justify-items-stretch_1xr0r_273","LayoutGrid--medium-l--justify-items-center":"_LayoutGrid--medium-l--justify-items-center_1xr0r_276","LayoutGrid--medium-l--justify-items-start":"_LayoutGrid--medium-l--justify-items-start_1xr0r_279","LayoutGrid--medium-l--justify-items-end":"_LayoutGrid--medium-l--justify-items-end_1xr0r_282","LayoutGrid--wide-s--justify-items-stretch":"_LayoutGrid--wide-s--justify-items-stretch_1xr0r_287","LayoutGrid--wide-s--justify-items-center":"_LayoutGrid--wide-s--justify-items-center_1xr0r_290","LayoutGrid--wide-s--justify-items-start":"_LayoutGrid--wide-s--justify-items-start_1xr0r_293","LayoutGrid--wide-s--justify-items-end":"_LayoutGrid--wide-s--justify-items-end_1xr0r_296","LayoutGrid--wide-l--justify-items-stretch":"_LayoutGrid--wide-l--justify-items-stretch_1xr0r_301","LayoutGrid--wide-l--justify-items-center":"_LayoutGrid--wide-l--justify-items-center_1xr0r_304","LayoutGrid--wide-l--justify-items-start":"_LayoutGrid--wide-l--justify-items-start_1xr0r_307","LayoutGrid--wide-l--justify-items-end":"_LayoutGrid--wide-l--justify-items-end_1xr0r_310","LayoutGrid--columns":"_LayoutGrid--columns_1xr0r_314","LayoutGrid--columns-narrow-l":"_LayoutGrid--columns-narrow-l_1xr0r_318","LayoutGrid--columns-medium-s":"_LayoutGrid--columns-medium-s_1xr0r_323","LayoutGrid--columns-medium-l":"_LayoutGrid--columns-medium-l_1xr0r_328","LayoutGrid--columns-wide-s":"_LayoutGrid--columns-wide-s_1xr0r_333","LayoutGrid--columns-wide-l":"_LayoutGrid--columns-wide-l_1xr0r_338"},F="LayoutGrid",H=Object.keys(p),L=t=>typeof t=="number"?`repeat(${t}, 1fr)`:t.join(" "),z=t=>typeof t=="object"&&!Array.isArray(t)?Object.entries(t).reduce((i,[s,e])=>({...i,...e?{[s]:L(e)}:{}}),{_:L(t._)}):{_:L(t)},S=t=>{if(!t)return{classNames:[],style:{}};const i=z(t),s=H.filter(r=>i[r]),e=g(G,F,["columns",...s.map(r=>`columns-${r}`)]),n=s.reduce((r,a)=>({...r,[`--columns-${a}`]:i[a]}),{"--columns":i._});return{classNames:e,style:n}},k="LayoutGap",K=t=>o(A,k,[u("gap",t)]),V="LayoutGrid",B=(t,i)=>{const{gap:s=T,padding:e=v,justifyContent:n,alignItems:r,justifyItems:a,hide:d,relative:y}=i||{},_=o(G,V,[u("justify-content",n),u("align-items",r),u("justify-items",a)]),m=K(s),l=C(e),f=R(d,"grid"),j=$(y);return[..._,...m,...l,...f,...j]},M=x.forwardRef(function({dataset:i,children:s,...e},n){const{tag:r=U,columns:a}=e,d=B("grid",e),{style:y,classNames:_}=S(a),m=[...d,..._],l={...I(e),ref:n,className:m.join(" "),style:y,...O(i,{preplyDsComponent:D.LayoutGrid})};return w.jsx(r,{...l,children:s})});M.__docgenInfo={description:"",methods:[],displayName:"LayoutGrid"};export{M as L,$ as a,R as g};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._LayoutGrid_1xr0r_4{list-style:none;font-weight:inherit;border:none;text-align:inherit;border-spacing:0;margin:0;padding:0;display:grid}._LayoutGrid--justify-content-center_1xr0r_14{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}._LayoutGrid--justify-content-start_1xr0r_17{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:start}._LayoutGrid--justify-content-end_1xr0r_20{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:end}._LayoutGrid--justify-content-space-between_1xr0r_23{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}._LayoutGrid--justify-content-space-around_1xr0r_26{-ms-flex-pack:distribute;justify-content:space-around}._LayoutGrid--justify-content-space-evenly_1xr0r_29{-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly}@media (min-width: 400px){._LayoutGrid--narrow-l--justify-content-center_1xr0r_33{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}._LayoutGrid--narrow-l--justify-content-start_1xr0r_36{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:start}._LayoutGrid--narrow-l--justify-content-end_1xr0r_39{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:end}._LayoutGrid--narrow-l--justify-content-space-between_1xr0r_42{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}._LayoutGrid--narrow-l--justify-content-space-around_1xr0r_45{-ms-flex-pack:distribute;justify-content:space-around}._LayoutGrid--narrow-l--justify-content-space-evenly_1xr0r_48{-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly}}@media (min-width: 700px){._LayoutGrid--medium-s--justify-content-center_1xr0r_53{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}._LayoutGrid--medium-s--justify-content-start_1xr0r_56{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:start}._LayoutGrid--medium-s--justify-content-end_1xr0r_59{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:end}._LayoutGrid--medium-s--justify-content-space-between_1xr0r_62{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}._LayoutGrid--medium-s--justify-content-space-around_1xr0r_65{-ms-flex-pack:distribute;justify-content:space-around}._LayoutGrid--medium-s--justify-content-space-evenly_1xr0r_68{-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly}}@media (min-width: 880px){._LayoutGrid--medium-l--justify-content-center_1xr0r_73{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}._LayoutGrid--medium-l--justify-content-start_1xr0r_76{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:start}._LayoutGrid--medium-l--justify-content-end_1xr0r_79{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:end}._LayoutGrid--medium-l--justify-content-space-between_1xr0r_82{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}._LayoutGrid--medium-l--justify-content-space-around_1xr0r_85{-ms-flex-pack:distribute;justify-content:space-around}._LayoutGrid--medium-l--justify-content-space-evenly_1xr0r_88{-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly}}@media (min-width: 1200px){._LayoutGrid--wide-s--justify-content-center_1xr0r_93{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}._LayoutGrid--wide-s--justify-content-start_1xr0r_96{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:start}._LayoutGrid--wide-s--justify-content-end_1xr0r_99{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:end}._LayoutGrid--wide-s--justify-content-space-between_1xr0r_102{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}._LayoutGrid--wide-s--justify-content-space-around_1xr0r_105{-ms-flex-pack:distribute;justify-content:space-around}._LayoutGrid--wide-s--justify-content-space-evenly_1xr0r_108{-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly}}@media (min-width: 1900px){._LayoutGrid--wide-l--justify-content-center_1xr0r_113{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}._LayoutGrid--wide-l--justify-content-start_1xr0r_116{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:start}._LayoutGrid--wide-l--justify-content-end_1xr0r_119{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:end}._LayoutGrid--wide-l--justify-content-space-between_1xr0r_122{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}._LayoutGrid--wide-l--justify-content-space-around_1xr0r_125{-ms-flex-pack:distribute;justify-content:space-around}._LayoutGrid--wide-l--justify-content-space-evenly_1xr0r_128{-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly}}._LayoutGrid--align-items-center_1xr0r_132{-webkit-box-align:center;-ms-flex-align:center;align-items:center}._LayoutGrid--align-items-start_1xr0r_135{-webkit-box-align:start;-ms-flex-align:start;align-items:start}._LayoutGrid--align-items-end_1xr0r_138{-webkit-box-align:end;-ms-flex-align:end;align-items:end}._LayoutGrid--align-items-stretch_1xr0r_141{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}._LayoutGrid--align-items-baseline_1xr0r_144{-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline}@media (min-width: 400px){._LayoutGrid--narrow-l--align-items-center_1xr0r_148{-webkit-box-align:center;-ms-flex-align:center;align-items:center}._LayoutGrid--narrow-l--align-items-start_1xr0r_151{-webkit-box-align:start;-ms-flex-align:start;align-items:start}._LayoutGrid--narrow-l--align-items-end_1xr0r_154{-webkit-box-align:end;-ms-flex-align:end;align-items:end}._LayoutGrid--narrow-l--align-items-stretch_1xr0r_157{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}._LayoutGrid--narrow-l--align-items-baseline_1xr0r_160{-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline}}@media (min-width: 700px){._LayoutGrid--medium-s--align-items-center_1xr0r_165{-webkit-box-align:center;-ms-flex-align:center;align-items:center}._LayoutGrid--medium-s--align-items-start_1xr0r_168{-webkit-box-align:start;-ms-flex-align:start;align-items:start}._LayoutGrid--medium-s--align-items-end_1xr0r_171{-webkit-box-align:end;-ms-flex-align:end;align-items:end}._LayoutGrid--medium-s--align-items-stretch_1xr0r_174{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}._LayoutGrid--medium-s--align-items-baseline_1xr0r_177{-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline}}@media (min-width: 880px){._LayoutGrid--medium-l--align-items-center_1xr0r_182{-webkit-box-align:center;-ms-flex-align:center;align-items:center}._LayoutGrid--medium-l--align-items-start_1xr0r_185{-webkit-box-align:start;-ms-flex-align:start;align-items:start}._LayoutGrid--medium-l--align-items-end_1xr0r_188{-webkit-box-align:end;-ms-flex-align:end;align-items:end}._LayoutGrid--medium-l--align-items-stretch_1xr0r_191{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}._LayoutGrid--medium-l--align-items-baseline_1xr0r_194{-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline}}@media (min-width: 1200px){._LayoutGrid--wide-s--align-items-center_1xr0r_199{-webkit-box-align:center;-ms-flex-align:center;align-items:center}._LayoutGrid--wide-s--align-items-start_1xr0r_202{-webkit-box-align:start;-ms-flex-align:start;align-items:start}._LayoutGrid--wide-s--align-items-end_1xr0r_205{-webkit-box-align:end;-ms-flex-align:end;align-items:end}._LayoutGrid--wide-s--align-items-stretch_1xr0r_208{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}._LayoutGrid--wide-s--align-items-baseline_1xr0r_211{-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline}}@media (min-width: 1900px){._LayoutGrid--wide-l--align-items-center_1xr0r_216{-webkit-box-align:center;-ms-flex-align:center;align-items:center}._LayoutGrid--wide-l--align-items-start_1xr0r_219{-webkit-box-align:start;-ms-flex-align:start;align-items:start}._LayoutGrid--wide-l--align-items-end_1xr0r_222{-webkit-box-align:end;-ms-flex-align:end;align-items:end}._LayoutGrid--wide-l--align-items-stretch_1xr0r_225{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}._LayoutGrid--wide-l--align-items-baseline_1xr0r_228{-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline}}._LayoutGrid--justify-items-stretch_1xr0r_232{justify-items:stretch}._LayoutGrid--justify-items-center_1xr0r_235{justify-items:center}._LayoutGrid--justify-items-start_1xr0r_238{justify-items:start}._LayoutGrid--justify-items-end_1xr0r_241{justify-items:end}@media (min-width: 400px){._LayoutGrid--narrow-l--justify-items-stretch_1xr0r_245{justify-items:stretch}._LayoutGrid--narrow-l--justify-items-center_1xr0r_248{justify-items:center}._LayoutGrid--narrow-l--justify-items-start_1xr0r_251{justify-items:start}._LayoutGrid--narrow-l--justify-items-end_1xr0r_254{justify-items:end}}@media (min-width: 700px){._LayoutGrid--medium-s--justify-items-stretch_1xr0r_259{justify-items:stretch}._LayoutGrid--medium-s--justify-items-center_1xr0r_262{justify-items:center}._LayoutGrid--medium-s--justify-items-start_1xr0r_265{justify-items:start}._LayoutGrid--medium-s--justify-items-end_1xr0r_268{justify-items:end}}@media (min-width: 880px){._LayoutGrid--medium-l--justify-items-stretch_1xr0r_273{justify-items:stretch}._LayoutGrid--medium-l--justify-items-center_1xr0r_276{justify-items:center}._LayoutGrid--medium-l--justify-items-start_1xr0r_279{justify-items:start}._LayoutGrid--medium-l--justify-items-end_1xr0r_282{justify-items:end}}@media (min-width: 1200px){._LayoutGrid--wide-s--justify-items-stretch_1xr0r_287{justify-items:stretch}._LayoutGrid--wide-s--justify-items-center_1xr0r_290{justify-items:center}._LayoutGrid--wide-s--justify-items-start_1xr0r_293{justify-items:start}._LayoutGrid--wide-s--justify-items-end_1xr0r_296{justify-items:end}}@media (min-width: 1900px){._LayoutGrid--wide-l--justify-items-stretch_1xr0r_301{justify-items:stretch}._LayoutGrid--wide-l--justify-items-center_1xr0r_304{justify-items:center}._LayoutGrid--wide-l--justify-items-start_1xr0r_307{justify-items:start}._LayoutGrid--wide-l--justify-items-end_1xr0r_310{justify-items:end}}._LayoutGrid--columns_1xr0r_314{grid-template-columns:var(--columns)}@media (min-width: 400px){._LayoutGrid--columns-narrow-l_1xr0r_318{grid-template-columns:var(--columns-narrow-l)}}@media (min-width: 700px){._LayoutGrid--columns-medium-s_1xr0r_323{grid-template-columns:var(--columns-medium-s)}}@media (min-width: 880px){._LayoutGrid--columns-medium-l_1xr0r_328{grid-template-columns:var(--columns-medium-l)}}@media (min-width: 1200px){._LayoutGrid--columns-wide-s_1xr0r_333{grid-template-columns:var(--columns-wide-s)}}@media (min-width: 1900px){._LayoutGrid--columns-wide-l_1xr0r_338{grid-template-columns:var(--columns-wide-l)}}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as t}from"./jsx-runtime-BTJTZTIL.js";import{r as N}from"./index-Cb9e4tly.js";import{g as E,a as P,b as R}from"./layout-relative-vwhQiHRS.js";import{f as A}from"./filterHTMLAttributes-DYdLqcvH.js";import{m as w,a as H,s as f}from"./classNames-BUL1Zq7e.js";import{g as T}from"./index-DdzHuZ-Y.js";import{L as V,k as U,f as $}from"./defaults-B1rzzf6M.js";import{w as h}from"./componentNames-Bwls0I02.js";import{B as W}from"./breakpoints-BfMlrtxE.js";import{s as Y,g as M}from"./layout-relative.module-Cmd2g7hD.js";import{S as o,a as z}from"./consts-KAYct7Gj.js";import"./index-ChsGqxH_.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./constants-DYYVurUY.js";const F="_LayoutGridItem_2tq6r_1",B={LayoutGridItem:F},L=N.forwardRef(function({children:u,alignSelf:n,tag:a,hide:r,relative:i,dataset:s,...d},l){const m=w(B,h.LayoutGridItem,[]),y=E(n),c=P(r),G=R(i),g=[...m,...y,...c,...G],O=a??V,D={...A(d),ref:l,className:g.join(" "),...T(s,{preplyDsComponent:h.LayoutGridItem})};return t.jsx(O,{...D,children:u})});try{L.displayName="LayoutGridItem",L.__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 J="_LayoutGrid_1uu3d_4",q={LayoutGrid:J,"LayoutGrid--justify-content-center":"_LayoutGrid--justify-content-center_1uu3d_14","LayoutGrid--justify-content-start":"_LayoutGrid--justify-content-start_1uu3d_17","LayoutGrid--justify-content-end":"_LayoutGrid--justify-content-end_1uu3d_20","LayoutGrid--justify-content-space-between":"_LayoutGrid--justify-content-space-between_1uu3d_23","LayoutGrid--justify-content-space-around":"_LayoutGrid--justify-content-space-around_1uu3d_26","LayoutGrid--justify-content-space-evenly":"_LayoutGrid--justify-content-space-evenly_1uu3d_29","LayoutGrid--narrow-l--justify-content-center":"_LayoutGrid--narrow-l--justify-content-center_1uu3d_33","LayoutGrid--narrow-l--justify-content-start":"_LayoutGrid--narrow-l--justify-content-start_1uu3d_36","LayoutGrid--narrow-l--justify-content-end":"_LayoutGrid--narrow-l--justify-content-end_1uu3d_39","LayoutGrid--narrow-l--justify-content-space-between":"_LayoutGrid--narrow-l--justify-content-space-between_1uu3d_42","LayoutGrid--narrow-l--justify-content-space-around":"_LayoutGrid--narrow-l--justify-content-space-around_1uu3d_45","LayoutGrid--narrow-l--justify-content-space-evenly":"_LayoutGrid--narrow-l--justify-content-space-evenly_1uu3d_48","LayoutGrid--medium-s--justify-content-center":"_LayoutGrid--medium-s--justify-content-center_1uu3d_53","LayoutGrid--medium-s--justify-content-start":"_LayoutGrid--medium-s--justify-content-start_1uu3d_56","LayoutGrid--medium-s--justify-content-end":"_LayoutGrid--medium-s--justify-content-end_1uu3d_59","LayoutGrid--medium-s--justify-content-space-between":"_LayoutGrid--medium-s--justify-content-space-between_1uu3d_62","LayoutGrid--medium-s--justify-content-space-around":"_LayoutGrid--medium-s--justify-content-space-around_1uu3d_65","LayoutGrid--medium-s--justify-content-space-evenly":"_LayoutGrid--medium-s--justify-content-space-evenly_1uu3d_68","LayoutGrid--medium-l--justify-content-center":"_LayoutGrid--medium-l--justify-content-center_1uu3d_73","LayoutGrid--medium-l--justify-content-start":"_LayoutGrid--medium-l--justify-content-start_1uu3d_76","LayoutGrid--medium-l--justify-content-end":"_LayoutGrid--medium-l--justify-content-end_1uu3d_79","LayoutGrid--medium-l--justify-content-space-between":"_LayoutGrid--medium-l--justify-content-space-between_1uu3d_82","LayoutGrid--medium-l--justify-content-space-around":"_LayoutGrid--medium-l--justify-content-space-around_1uu3d_85","LayoutGrid--medium-l--justify-content-space-evenly":"_LayoutGrid--medium-l--justify-content-space-evenly_1uu3d_88","LayoutGrid--wide-s--justify-content-center":"_LayoutGrid--wide-s--justify-content-center_1uu3d_93","LayoutGrid--wide-s--justify-content-start":"_LayoutGrid--wide-s--justify-content-start_1uu3d_96","LayoutGrid--wide-s--justify-content-end":"_LayoutGrid--wide-s--justify-content-end_1uu3d_99","LayoutGrid--wide-s--justify-content-space-between":"_LayoutGrid--wide-s--justify-content-space-between_1uu3d_102","LayoutGrid--wide-s--justify-content-space-around":"_LayoutGrid--wide-s--justify-content-space-around_1uu3d_105","LayoutGrid--wide-s--justify-content-space-evenly":"_LayoutGrid--wide-s--justify-content-space-evenly_1uu3d_108","LayoutGrid--wide-l--justify-content-center":"_LayoutGrid--wide-l--justify-content-center_1uu3d_113","LayoutGrid--wide-l--justify-content-start":"_LayoutGrid--wide-l--justify-content-start_1uu3d_116","LayoutGrid--wide-l--justify-content-end":"_LayoutGrid--wide-l--justify-content-end_1uu3d_119","LayoutGrid--wide-l--justify-content-space-between":"_LayoutGrid--wide-l--justify-content-space-between_1uu3d_122","LayoutGrid--wide-l--justify-content-space-around":"_LayoutGrid--wide-l--justify-content-space-around_1uu3d_125","LayoutGrid--wide-l--justify-content-space-evenly":"_LayoutGrid--wide-l--justify-content-space-evenly_1uu3d_128","LayoutGrid--align-items-center":"_LayoutGrid--align-items-center_1uu3d_132","LayoutGrid--align-items-start":"_LayoutGrid--align-items-start_1uu3d_135","LayoutGrid--align-items-end":"_LayoutGrid--align-items-end_1uu3d_138","LayoutGrid--align-items-stretch":"_LayoutGrid--align-items-stretch_1uu3d_141","LayoutGrid--align-items-baseline":"_LayoutGrid--align-items-baseline_1uu3d_144","LayoutGrid--narrow-l--align-items-center":"_LayoutGrid--narrow-l--align-items-center_1uu3d_148","LayoutGrid--narrow-l--align-items-start":"_LayoutGrid--narrow-l--align-items-start_1uu3d_151","LayoutGrid--narrow-l--align-items-end":"_LayoutGrid--narrow-l--align-items-end_1uu3d_154","LayoutGrid--narrow-l--align-items-stretch":"_LayoutGrid--narrow-l--align-items-stretch_1uu3d_157","LayoutGrid--narrow-l--align-items-baseline":"_LayoutGrid--narrow-l--align-items-baseline_1uu3d_160","LayoutGrid--medium-s--align-items-center":"_LayoutGrid--medium-s--align-items-center_1uu3d_165","LayoutGrid--medium-s--align-items-start":"_LayoutGrid--medium-s--align-items-start_1uu3d_168","LayoutGrid--medium-s--align-items-end":"_LayoutGrid--medium-s--align-items-end_1uu3d_171","LayoutGrid--medium-s--align-items-stretch":"_LayoutGrid--medium-s--align-items-stretch_1uu3d_174","LayoutGrid--medium-s--align-items-baseline":"_LayoutGrid--medium-s--align-items-baseline_1uu3d_177","LayoutGrid--medium-l--align-items-center":"_LayoutGrid--medium-l--align-items-center_1uu3d_182","LayoutGrid--medium-l--align-items-start":"_LayoutGrid--medium-l--align-items-start_1uu3d_185","LayoutGrid--medium-l--align-items-end":"_LayoutGrid--medium-l--align-items-end_1uu3d_188","LayoutGrid--medium-l--align-items-stretch":"_LayoutGrid--medium-l--align-items-stretch_1uu3d_191","LayoutGrid--medium-l--align-items-baseline":"_LayoutGrid--medium-l--align-items-baseline_1uu3d_194","LayoutGrid--wide-s--align-items-center":"_LayoutGrid--wide-s--align-items-center_1uu3d_199","LayoutGrid--wide-s--align-items-start":"_LayoutGrid--wide-s--align-items-start_1uu3d_202","LayoutGrid--wide-s--align-items-end":"_LayoutGrid--wide-s--align-items-end_1uu3d_205","LayoutGrid--wide-s--align-items-stretch":"_LayoutGrid--wide-s--align-items-stretch_1uu3d_208","LayoutGrid--wide-s--align-items-baseline":"_LayoutGrid--wide-s--align-items-baseline_1uu3d_211","LayoutGrid--wide-l--align-items-center":"_LayoutGrid--wide-l--align-items-center_1uu3d_216","LayoutGrid--wide-l--align-items-start":"_LayoutGrid--wide-l--align-items-start_1uu3d_219","LayoutGrid--wide-l--align-items-end":"_LayoutGrid--wide-l--align-items-end_1uu3d_222","LayoutGrid--wide-l--align-items-stretch":"_LayoutGrid--wide-l--align-items-stretch_1uu3d_225","LayoutGrid--wide-l--align-items-baseline":"_LayoutGrid--wide-l--align-items-baseline_1uu3d_228","LayoutGrid--justify-items-stretch":"_LayoutGrid--justify-items-stretch_1uu3d_232","LayoutGrid--justify-items-center":"_LayoutGrid--justify-items-center_1uu3d_235","LayoutGrid--justify-items-start":"_LayoutGrid--justify-items-start_1uu3d_238","LayoutGrid--justify-items-end":"_LayoutGrid--justify-items-end_1uu3d_241","LayoutGrid--narrow-l--justify-items-stretch":"_LayoutGrid--narrow-l--justify-items-stretch_1uu3d_245","LayoutGrid--narrow-l--justify-items-center":"_LayoutGrid--narrow-l--justify-items-center_1uu3d_248","LayoutGrid--narrow-l--justify-items-start":"_LayoutGrid--narrow-l--justify-items-start_1uu3d_251","LayoutGrid--narrow-l--justify-items-end":"_LayoutGrid--narrow-l--justify-items-end_1uu3d_254","LayoutGrid--medium-s--justify-items-stretch":"_LayoutGrid--medium-s--justify-items-stretch_1uu3d_259","LayoutGrid--medium-s--justify-items-center":"_LayoutGrid--medium-s--justify-items-center_1uu3d_262","LayoutGrid--medium-s--justify-items-start":"_LayoutGrid--medium-s--justify-items-start_1uu3d_265","LayoutGrid--medium-s--justify-items-end":"_LayoutGrid--medium-s--justify-items-end_1uu3d_268","LayoutGrid--medium-l--justify-items-stretch":"_LayoutGrid--medium-l--justify-items-stretch_1uu3d_273","LayoutGrid--medium-l--justify-items-center":"_LayoutGrid--medium-l--justify-items-center_1uu3d_276","LayoutGrid--medium-l--justify-items-start":"_LayoutGrid--medium-l--justify-items-start_1uu3d_279","LayoutGrid--medium-l--justify-items-end":"_LayoutGrid--medium-l--justify-items-end_1uu3d_282","LayoutGrid--wide-s--justify-items-stretch":"_LayoutGrid--wide-s--justify-items-stretch_1uu3d_287","LayoutGrid--wide-s--justify-items-center":"_LayoutGrid--wide-s--justify-items-center_1uu3d_290","LayoutGrid--wide-s--justify-items-start":"_LayoutGrid--wide-s--justify-items-start_1uu3d_293","LayoutGrid--wide-s--justify-items-end":"_LayoutGrid--wide-s--justify-items-end_1uu3d_296","LayoutGrid--wide-l--justify-items-stretch":"_LayoutGrid--wide-l--justify-items-stretch_1uu3d_301","LayoutGrid--wide-l--justify-items-center":"_LayoutGrid--wide-l--justify-items-center_1uu3d_304","LayoutGrid--wide-l--justify-items-start":"_LayoutGrid--wide-l--justify-items-start_1uu3d_307","LayoutGrid--wide-l--justify-items-end":"_LayoutGrid--wide-l--justify-items-end_1uu3d_310","LayoutGrid--columns":"_LayoutGrid--columns_1uu3d_314","LayoutGrid--columns-narrow-l":"_LayoutGrid--columns-narrow-l_1uu3d_318","LayoutGrid--columns-medium-s":"_LayoutGrid--columns-medium-s_1uu3d_323","LayoutGrid--columns-medium-l":"_LayoutGrid--columns-medium-l_1uu3d_328","LayoutGrid--columns-wide-s":"_LayoutGrid--columns-wide-s_1uu3d_333","LayoutGrid--columns-wide-l":"_LayoutGrid--columns-wide-l_1uu3d_338"},K="LayoutGrid",Q=Object.keys(W),j=e=>typeof e=="number"?`repeat(${e}, 1fr)`:e.join(" "),X=e=>typeof e=="object"&&!Array.isArray(e)?Object.entries(e).reduce((u,[n,a])=>({...u,...a?{[n]:j(a)}:{}}),{_:j(e._)}):{_:j(e)},Z=e=>{if(!e)return{classNames:[],style:{}};const u=X(e),n=Q.filter(i=>u[i]),a=H(q,K,["columns",...n.map(i=>`columns-${i}`)]),r=n.reduce((i,s)=>({...i,[`--columns-${s}`]:u[s]}),{"--columns":u._});return{classNames:a,style:r}},ee="LayoutGap",te=e=>w(Y,ee,[f("gap",e)]),ae="LayoutGrid",ue=(e,u)=>{const{gap:n=U,padding:a=$,justifyContent:r,alignItems:i,justifyItems:s,hide:d,relative:l}=u||{},m=w(q,ae,[f("justify-content",r),f("align-items",i),f("justify-items",s)]),y=te(n),c=M(a),G=P(d,"grid"),g=R(l);return[...m,...y,...c,...G,...g]},v=N.forwardRef(function({dataset:u,children:n,...a},r){const{tag:i=V,columns:s}=a,d=ue("grid",a),{style:l,classNames:m}=Z(s),y=[...d,...m],c={...A(a),ref:r,className:y.join(" "),style:l,...T(u,{preplyDsComponent:h.LayoutGrid})};return t.jsx(i,{...c,children:n})});try{v.displayName="LayoutGrid",v.__docgenInfo={description:"A CSS `grid` wrapper.",displayName:"LayoutGrid",props:{gap:{defaultValue:null,description:"",name:"gap",required:!1,type:{name:"enum",value:[{value:'"2xs"'},{value:'"xs"'},{value:'"s"'},{value:'"m"'},{value:'"l"'},{value:'"xl"'},{value:'"24"'},{value:'"32"'},{value:'"48"'},{value:'"64"'},{value:'"96"'},{value:'"160"'},{value:'"16"'},{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:'"2xs"'},{value:'"xs"'},{value:'"s"'},{value:'"m"'},{value:'"l"'},{value:'"xl"'},{value:'"24"'},{value:'"32"'},{value:'"48"'},{value:'"64"'},{value:'"96"'},{value:'"160"'},{value:'"16"'},{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 ve={title:"components/LayoutGrid",component:v,subcomponents:{LayoutGridItem:L},argTypes:{gap:{description:o},padding:{description:z},columns:{description:o},justifyContent:{description:o},alignItems:{description:o},justifyItems:{description:o},hide:{description:o},relative:{description:o}}},_=()=>t.jsxs(v,{columns:4,alignItems:"start",gap:"xs",children:[t.jsx(L,{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(L,{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"}})]});_.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,k;_.parameters={..._.parameters,docs:{...(b=_.parameters)==null?void 0:b.docs,source:{originalSource:`() => <LayoutGrid columns={4} alignItems="start" gap="xs">
|
|
1
|
+
import{j as t}from"./jsx-runtime-BTJTZTIL.js";import{r as N}from"./index-Cb9e4tly.js";import{g as E,a as P,b as R}from"./layout-relative-DFrOiWAE.js";import{f as A}from"./filterHTMLAttributes-DYdLqcvH.js";import{m as h,a as H,s as f}from"./classNames-BUL1Zq7e.js";import{g as T}from"./index-DdzHuZ-Y.js";import{L as V,k as U,f as $}from"./defaults-B1rzzf6M.js";import{w as x}from"./componentNames-Bwls0I02.js";import{B as W}from"./breakpoints-BfMlrtxE.js";import{s as Y,g as M}from"./layout-relative.module-CDUOJ19G.js";import{S as o,a as z}from"./consts-KAYct7Gj.js";import"./index-ChsGqxH_.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./constants-DYYVurUY.js";const F="_LayoutGridItem_2tq6r_1",B={LayoutGridItem:F},L=N.forwardRef(function({children:i,alignSelf:n,tag:a,hide:u,relative:r,dataset:s,...l},d){const m=h(B,x.LayoutGridItem,[]),y=E(n),c=P(u),G=R(r),g=[...m,...y,...c,...G],O=a??V,D={...A(l),ref:d,className:g.join(" "),...T(s,{preplyDsComponent:x.LayoutGridItem})};return t.jsx(O,{...D,children:i})});try{L.displayName="LayoutGridItem",L.__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 J="_LayoutGrid_1xr0r_4",q={LayoutGrid:J,"LayoutGrid--justify-content-center":"_LayoutGrid--justify-content-center_1xr0r_14","LayoutGrid--justify-content-start":"_LayoutGrid--justify-content-start_1xr0r_17","LayoutGrid--justify-content-end":"_LayoutGrid--justify-content-end_1xr0r_20","LayoutGrid--justify-content-space-between":"_LayoutGrid--justify-content-space-between_1xr0r_23","LayoutGrid--justify-content-space-around":"_LayoutGrid--justify-content-space-around_1xr0r_26","LayoutGrid--justify-content-space-evenly":"_LayoutGrid--justify-content-space-evenly_1xr0r_29","LayoutGrid--narrow-l--justify-content-center":"_LayoutGrid--narrow-l--justify-content-center_1xr0r_33","LayoutGrid--narrow-l--justify-content-start":"_LayoutGrid--narrow-l--justify-content-start_1xr0r_36","LayoutGrid--narrow-l--justify-content-end":"_LayoutGrid--narrow-l--justify-content-end_1xr0r_39","LayoutGrid--narrow-l--justify-content-space-between":"_LayoutGrid--narrow-l--justify-content-space-between_1xr0r_42","LayoutGrid--narrow-l--justify-content-space-around":"_LayoutGrid--narrow-l--justify-content-space-around_1xr0r_45","LayoutGrid--narrow-l--justify-content-space-evenly":"_LayoutGrid--narrow-l--justify-content-space-evenly_1xr0r_48","LayoutGrid--medium-s--justify-content-center":"_LayoutGrid--medium-s--justify-content-center_1xr0r_53","LayoutGrid--medium-s--justify-content-start":"_LayoutGrid--medium-s--justify-content-start_1xr0r_56","LayoutGrid--medium-s--justify-content-end":"_LayoutGrid--medium-s--justify-content-end_1xr0r_59","LayoutGrid--medium-s--justify-content-space-between":"_LayoutGrid--medium-s--justify-content-space-between_1xr0r_62","LayoutGrid--medium-s--justify-content-space-around":"_LayoutGrid--medium-s--justify-content-space-around_1xr0r_65","LayoutGrid--medium-s--justify-content-space-evenly":"_LayoutGrid--medium-s--justify-content-space-evenly_1xr0r_68","LayoutGrid--medium-l--justify-content-center":"_LayoutGrid--medium-l--justify-content-center_1xr0r_73","LayoutGrid--medium-l--justify-content-start":"_LayoutGrid--medium-l--justify-content-start_1xr0r_76","LayoutGrid--medium-l--justify-content-end":"_LayoutGrid--medium-l--justify-content-end_1xr0r_79","LayoutGrid--medium-l--justify-content-space-between":"_LayoutGrid--medium-l--justify-content-space-between_1xr0r_82","LayoutGrid--medium-l--justify-content-space-around":"_LayoutGrid--medium-l--justify-content-space-around_1xr0r_85","LayoutGrid--medium-l--justify-content-space-evenly":"_LayoutGrid--medium-l--justify-content-space-evenly_1xr0r_88","LayoutGrid--wide-s--justify-content-center":"_LayoutGrid--wide-s--justify-content-center_1xr0r_93","LayoutGrid--wide-s--justify-content-start":"_LayoutGrid--wide-s--justify-content-start_1xr0r_96","LayoutGrid--wide-s--justify-content-end":"_LayoutGrid--wide-s--justify-content-end_1xr0r_99","LayoutGrid--wide-s--justify-content-space-between":"_LayoutGrid--wide-s--justify-content-space-between_1xr0r_102","LayoutGrid--wide-s--justify-content-space-around":"_LayoutGrid--wide-s--justify-content-space-around_1xr0r_105","LayoutGrid--wide-s--justify-content-space-evenly":"_LayoutGrid--wide-s--justify-content-space-evenly_1xr0r_108","LayoutGrid--wide-l--justify-content-center":"_LayoutGrid--wide-l--justify-content-center_1xr0r_113","LayoutGrid--wide-l--justify-content-start":"_LayoutGrid--wide-l--justify-content-start_1xr0r_116","LayoutGrid--wide-l--justify-content-end":"_LayoutGrid--wide-l--justify-content-end_1xr0r_119","LayoutGrid--wide-l--justify-content-space-between":"_LayoutGrid--wide-l--justify-content-space-between_1xr0r_122","LayoutGrid--wide-l--justify-content-space-around":"_LayoutGrid--wide-l--justify-content-space-around_1xr0r_125","LayoutGrid--wide-l--justify-content-space-evenly":"_LayoutGrid--wide-l--justify-content-space-evenly_1xr0r_128","LayoutGrid--align-items-center":"_LayoutGrid--align-items-center_1xr0r_132","LayoutGrid--align-items-start":"_LayoutGrid--align-items-start_1xr0r_135","LayoutGrid--align-items-end":"_LayoutGrid--align-items-end_1xr0r_138","LayoutGrid--align-items-stretch":"_LayoutGrid--align-items-stretch_1xr0r_141","LayoutGrid--align-items-baseline":"_LayoutGrid--align-items-baseline_1xr0r_144","LayoutGrid--narrow-l--align-items-center":"_LayoutGrid--narrow-l--align-items-center_1xr0r_148","LayoutGrid--narrow-l--align-items-start":"_LayoutGrid--narrow-l--align-items-start_1xr0r_151","LayoutGrid--narrow-l--align-items-end":"_LayoutGrid--narrow-l--align-items-end_1xr0r_154","LayoutGrid--narrow-l--align-items-stretch":"_LayoutGrid--narrow-l--align-items-stretch_1xr0r_157","LayoutGrid--narrow-l--align-items-baseline":"_LayoutGrid--narrow-l--align-items-baseline_1xr0r_160","LayoutGrid--medium-s--align-items-center":"_LayoutGrid--medium-s--align-items-center_1xr0r_165","LayoutGrid--medium-s--align-items-start":"_LayoutGrid--medium-s--align-items-start_1xr0r_168","LayoutGrid--medium-s--align-items-end":"_LayoutGrid--medium-s--align-items-end_1xr0r_171","LayoutGrid--medium-s--align-items-stretch":"_LayoutGrid--medium-s--align-items-stretch_1xr0r_174","LayoutGrid--medium-s--align-items-baseline":"_LayoutGrid--medium-s--align-items-baseline_1xr0r_177","LayoutGrid--medium-l--align-items-center":"_LayoutGrid--medium-l--align-items-center_1xr0r_182","LayoutGrid--medium-l--align-items-start":"_LayoutGrid--medium-l--align-items-start_1xr0r_185","LayoutGrid--medium-l--align-items-end":"_LayoutGrid--medium-l--align-items-end_1xr0r_188","LayoutGrid--medium-l--align-items-stretch":"_LayoutGrid--medium-l--align-items-stretch_1xr0r_191","LayoutGrid--medium-l--align-items-baseline":"_LayoutGrid--medium-l--align-items-baseline_1xr0r_194","LayoutGrid--wide-s--align-items-center":"_LayoutGrid--wide-s--align-items-center_1xr0r_199","LayoutGrid--wide-s--align-items-start":"_LayoutGrid--wide-s--align-items-start_1xr0r_202","LayoutGrid--wide-s--align-items-end":"_LayoutGrid--wide-s--align-items-end_1xr0r_205","LayoutGrid--wide-s--align-items-stretch":"_LayoutGrid--wide-s--align-items-stretch_1xr0r_208","LayoutGrid--wide-s--align-items-baseline":"_LayoutGrid--wide-s--align-items-baseline_1xr0r_211","LayoutGrid--wide-l--align-items-center":"_LayoutGrid--wide-l--align-items-center_1xr0r_216","LayoutGrid--wide-l--align-items-start":"_LayoutGrid--wide-l--align-items-start_1xr0r_219","LayoutGrid--wide-l--align-items-end":"_LayoutGrid--wide-l--align-items-end_1xr0r_222","LayoutGrid--wide-l--align-items-stretch":"_LayoutGrid--wide-l--align-items-stretch_1xr0r_225","LayoutGrid--wide-l--align-items-baseline":"_LayoutGrid--wide-l--align-items-baseline_1xr0r_228","LayoutGrid--justify-items-stretch":"_LayoutGrid--justify-items-stretch_1xr0r_232","LayoutGrid--justify-items-center":"_LayoutGrid--justify-items-center_1xr0r_235","LayoutGrid--justify-items-start":"_LayoutGrid--justify-items-start_1xr0r_238","LayoutGrid--justify-items-end":"_LayoutGrid--justify-items-end_1xr0r_241","LayoutGrid--narrow-l--justify-items-stretch":"_LayoutGrid--narrow-l--justify-items-stretch_1xr0r_245","LayoutGrid--narrow-l--justify-items-center":"_LayoutGrid--narrow-l--justify-items-center_1xr0r_248","LayoutGrid--narrow-l--justify-items-start":"_LayoutGrid--narrow-l--justify-items-start_1xr0r_251","LayoutGrid--narrow-l--justify-items-end":"_LayoutGrid--narrow-l--justify-items-end_1xr0r_254","LayoutGrid--medium-s--justify-items-stretch":"_LayoutGrid--medium-s--justify-items-stretch_1xr0r_259","LayoutGrid--medium-s--justify-items-center":"_LayoutGrid--medium-s--justify-items-center_1xr0r_262","LayoutGrid--medium-s--justify-items-start":"_LayoutGrid--medium-s--justify-items-start_1xr0r_265","LayoutGrid--medium-s--justify-items-end":"_LayoutGrid--medium-s--justify-items-end_1xr0r_268","LayoutGrid--medium-l--justify-items-stretch":"_LayoutGrid--medium-l--justify-items-stretch_1xr0r_273","LayoutGrid--medium-l--justify-items-center":"_LayoutGrid--medium-l--justify-items-center_1xr0r_276","LayoutGrid--medium-l--justify-items-start":"_LayoutGrid--medium-l--justify-items-start_1xr0r_279","LayoutGrid--medium-l--justify-items-end":"_LayoutGrid--medium-l--justify-items-end_1xr0r_282","LayoutGrid--wide-s--justify-items-stretch":"_LayoutGrid--wide-s--justify-items-stretch_1xr0r_287","LayoutGrid--wide-s--justify-items-center":"_LayoutGrid--wide-s--justify-items-center_1xr0r_290","LayoutGrid--wide-s--justify-items-start":"_LayoutGrid--wide-s--justify-items-start_1xr0r_293","LayoutGrid--wide-s--justify-items-end":"_LayoutGrid--wide-s--justify-items-end_1xr0r_296","LayoutGrid--wide-l--justify-items-stretch":"_LayoutGrid--wide-l--justify-items-stretch_1xr0r_301","LayoutGrid--wide-l--justify-items-center":"_LayoutGrid--wide-l--justify-items-center_1xr0r_304","LayoutGrid--wide-l--justify-items-start":"_LayoutGrid--wide-l--justify-items-start_1xr0r_307","LayoutGrid--wide-l--justify-items-end":"_LayoutGrid--wide-l--justify-items-end_1xr0r_310","LayoutGrid--columns":"_LayoutGrid--columns_1xr0r_314","LayoutGrid--columns-narrow-l":"_LayoutGrid--columns-narrow-l_1xr0r_318","LayoutGrid--columns-medium-s":"_LayoutGrid--columns-medium-s_1xr0r_323","LayoutGrid--columns-medium-l":"_LayoutGrid--columns-medium-l_1xr0r_328","LayoutGrid--columns-wide-s":"_LayoutGrid--columns-wide-s_1xr0r_333","LayoutGrid--columns-wide-l":"_LayoutGrid--columns-wide-l_1xr0r_338"},K="LayoutGrid",Q=Object.keys(W),j=e=>typeof e=="number"?`repeat(${e}, 1fr)`:e.join(" "),X=e=>typeof e=="object"&&!Array.isArray(e)?Object.entries(e).reduce((i,[n,a])=>({...i,...a?{[n]:j(a)}:{}}),{_:j(e._)}):{_:j(e)},Z=e=>{if(!e)return{classNames:[],style:{}};const i=X(e),n=Q.filter(r=>i[r]),a=H(q,K,["columns",...n.map(r=>`columns-${r}`)]),u=n.reduce((r,s)=>({...r,[`--columns-${s}`]:i[s]}),{"--columns":i._});return{classNames:a,style:u}},ee="LayoutGap",te=e=>h(Y,ee,[f("gap",e)]),ae="LayoutGrid",ie=(e,i)=>{const{gap:n=U,padding:a=$,justifyContent:u,alignItems:r,justifyItems:s,hide:l,relative:d}=i||{},m=h(q,ae,[f("justify-content",u),f("align-items",r),f("justify-items",s)]),y=te(n),c=M(a),G=P(l,"grid"),g=R(d);return[...m,...y,...c,...G,...g]},v=N.forwardRef(function({dataset:i,children:n,...a},u){const{tag:r=V,columns:s}=a,l=ie("grid",a),{style:d,classNames:m}=Z(s),y=[...l,...m],c={...A(a),ref:u,className:y.join(" "),style:d,...T(i,{preplyDsComponent:x.LayoutGrid})};return t.jsx(r,{...c,children:n})});try{v.displayName="LayoutGrid",v.__docgenInfo={description:"A CSS `grid` wrapper.",displayName:"LayoutGrid",props:{gap:{defaultValue:null,description:"",name:"gap",required:!1,type:{name:"enum",value:[{value:'"2xs"'},{value:'"xs"'},{value:'"s"'},{value:'"m"'},{value:'"l"'},{value:'"xl"'},{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:'"16"'},{value:'"20"'},{value:"ResponsiveProp<Spacing>"}]}},padding:{defaultValue:null,description:"",name:"padding",required:!1,type:{name:"enum",value:[{value:'"2xs"'},{value:'"xs"'},{value:'"s"'},{value:'"m"'},{value:'"l"'},{value:'"xl"'},{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:'"16"'},{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 ve={title:"components/LayoutGrid",component:v,subcomponents:{LayoutGridItem:L},argTypes:{gap:{description:o},padding:{description:z},columns:{description:o},justifyContent:{description:o},alignItems:{description:o},justifyItems:{description:o},hide:{description:o},relative:{description:o}}},_=()=>t.jsxs(v,{columns:4,alignItems:"start",gap:"xs",children:[t.jsx(L,{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(L,{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"}})]});_.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 w,b,C;_.parameters={..._.parameters,docs:{...(w=_.parameters)==null?void 0:w.docs,source:{originalSource:`() => <LayoutGrid columns={4} alignItems="start" gap="xs">
|
|
2
2
|
<LayoutGridItem>
|
|
3
3
|
<div style={{
|
|
4
4
|
display: 'flex',
|
|
@@ -29,7 +29,7 @@ import{j as t}from"./jsx-runtime-BTJTZTIL.js";import{r as N}from"./index-Cb9e4tl
|
|
|
29
29
|
height: '2ch',
|
|
30
30
|
backgroundColor: 'hotpink'
|
|
31
31
|
}} />
|
|
32
|
-
</LayoutGrid>`,...(
|
|
32
|
+
</LayoutGrid>`,...(C=(b=_.parameters)==null?void 0:b.docs)==null?void 0:C.source}}};var k,S,I;p.parameters={...p.parameters,docs:{...(k=p.parameters)==null?void 0:k.docs,source:{originalSource:`{
|
|
33
33
|
parameters: {
|
|
34
34
|
chromatic: {
|
|
35
35
|
disableSnapshot: true
|
|
@@ -85,4 +85,4 @@ import{j as t}from"./jsx-runtime-BTJTZTIL.js";import{r as N}from"./index-Cb9e4tl
|
|
|
85
85
|
control: false
|
|
86
86
|
}
|
|
87
87
|
}
|
|
88
|
-
}`,...(I=(
|
|
88
|
+
}`,...(I=(S=p.parameters)==null?void 0:S.docs)==null?void 0:I.source}}};const Ge=["Base","Playground"];export{_ as Base,p as Playground,Ge as __namedExportsOrder,ve as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{j as w}from"./jsx-runtime-BTJTZTIL.js";import{r as p}from"./index-Cb9e4tly.js";import{m as n,s as L}from"./classNames-BUL1Zq7e.js";import{g as h,a as y}from"./LayoutGrid-IDkxjZN1.js";import{f as C}from"./filterHTMLAttributes-UOns5Q7s.js";import{w as s}from"./componentNames-Bwls0I02.js";import{g as N}from"./index-DdzHuZ-Y.js";import{L as G}from"./defaults-B1rzzf6M.js";const I="_AlignSelf_1us84_2",x={AlignSelf:I,"AlignSelf--align-self-start":"_AlignSelf--align-self-start_1us84_2","AlignSelf--align-self-center":"_AlignSelf--align-self-center_1us84_5","AlignSelf--align-self-end":"_AlignSelf--align-self-end_1us84_8","AlignSelf--align-self-stretch":"_AlignSelf--align-self-stretch_1us84_11","AlignSelf--narrow-l--align-self-start":"_AlignSelf--narrow-l--align-self-start_1us84_15","AlignSelf--narrow-l--align-self-center":"_AlignSelf--narrow-l--align-self-center_1us84_18","AlignSelf--narrow-l--align-self-end":"_AlignSelf--narrow-l--align-self-end_1us84_21","AlignSelf--narrow-l--align-self-stretch":"_AlignSelf--narrow-l--align-self-stretch_1us84_24","AlignSelf--medium-s--align-self-start":"_AlignSelf--medium-s--align-self-start_1us84_29","AlignSelf--medium-s--align-self-center":"_AlignSelf--medium-s--align-self-center_1us84_32","AlignSelf--medium-s--align-self-end":"_AlignSelf--medium-s--align-self-end_1us84_35","AlignSelf--medium-s--align-self-stretch":"_AlignSelf--medium-s--align-self-stretch_1us84_38","AlignSelf--medium-l--align-self-start":"_AlignSelf--medium-l--align-self-start_1us84_43","AlignSelf--medium-l--align-self-center":"_AlignSelf--medium-l--align-self-center_1us84_46","AlignSelf--medium-l--align-self-end":"_AlignSelf--medium-l--align-self-end_1us84_49","AlignSelf--medium-l--align-self-stretch":"_AlignSelf--medium-l--align-self-stretch_1us84_52","AlignSelf--wide-s--align-self-start":"_AlignSelf--wide-s--align-self-start_1us84_57","AlignSelf--wide-s--align-self-center":"_AlignSelf--wide-s--align-self-center_1us84_60","AlignSelf--wide-s--align-self-end":"_AlignSelf--wide-s--align-self-end_1us84_63","AlignSelf--wide-s--align-self-stretch":"_AlignSelf--wide-s--align-self-stretch_1us84_66","AlignSelf--wide-l--align-self-start":"_AlignSelf--wide-l--align-self-start_1us84_71","AlignSelf--wide-l--align-self-center":"_AlignSelf--wide-l--align-self-center_1us84_74","AlignSelf--wide-l--align-self-end":"_AlignSelf--wide-l--align-self-end_1us84_77","AlignSelf--wide-l--align-self-stretch":"_AlignSelf--wide-l--align-self-stretch_1us84_80"},T="AlignSelf",j=l=>n(x,T,[L("align-self",l)]),E="_LayoutGridItem_2tq6r_1",D={LayoutGridItem:E},R=p.forwardRef(function({children:i,alignSelf:t,tag:e,hide:a,relative:f,dataset:g,...r},_){const m=n(D,s.LayoutGridItem,[]),o=j(t),d=h(a),u=y(f),A=[...m,...o,...d,...u],S=e??G,c={...C(r),ref:_,className:A.join(" "),...N(g,{preplyDsComponent:s.LayoutGridItem})};return w.jsx(S,{...c,children:i})});R.__docgenInfo={description:"",methods:[],displayName:"LayoutGridItem"};export{R as L,j as g};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._AlignSelf_1us84_2._AlignSelf--align-self-start_1us84_2{-ms-flex-item-align:start;align-self:start}._AlignSelf_1us84_2._AlignSelf--align-self-center_1us84_5{-ms-flex-item-align:center;align-self:center}._AlignSelf_1us84_2._AlignSelf--align-self-end_1us84_8{-ms-flex-item-align:end;align-self:end}._AlignSelf_1us84_2._AlignSelf--align-self-stretch_1us84_11{-ms-flex-item-align:stretch;align-self:stretch}@media (min-width: 400px){._AlignSelf_1us84_2._AlignSelf--narrow-l--align-self-start_1us84_15{-ms-flex-item-align:start;align-self:start}._AlignSelf_1us84_2._AlignSelf--narrow-l--align-self-center_1us84_18{-ms-flex-item-align:center;align-self:center}._AlignSelf_1us84_2._AlignSelf--narrow-l--align-self-end_1us84_21{-ms-flex-item-align:end;align-self:end}._AlignSelf_1us84_2._AlignSelf--narrow-l--align-self-stretch_1us84_24{-ms-flex-item-align:stretch;align-self:stretch}}@media (min-width: 700px){._AlignSelf_1us84_2._AlignSelf--medium-s--align-self-start_1us84_29{-ms-flex-item-align:start;align-self:start}._AlignSelf_1us84_2._AlignSelf--medium-s--align-self-center_1us84_32{-ms-flex-item-align:center;align-self:center}._AlignSelf_1us84_2._AlignSelf--medium-s--align-self-end_1us84_35{-ms-flex-item-align:end;align-self:end}._AlignSelf_1us84_2._AlignSelf--medium-s--align-self-stretch_1us84_38{-ms-flex-item-align:stretch;align-self:stretch}}@media (min-width: 880px){._AlignSelf_1us84_2._AlignSelf--medium-l--align-self-start_1us84_43{-ms-flex-item-align:start;align-self:start}._AlignSelf_1us84_2._AlignSelf--medium-l--align-self-center_1us84_46{-ms-flex-item-align:center;align-self:center}._AlignSelf_1us84_2._AlignSelf--medium-l--align-self-end_1us84_49{-ms-flex-item-align:end;align-self:end}._AlignSelf_1us84_2._AlignSelf--medium-l--align-self-stretch_1us84_52{-ms-flex-item-align:stretch;align-self:stretch}}@media (min-width: 1200px){._AlignSelf_1us84_2._AlignSelf--wide-s--align-self-start_1us84_57{-ms-flex-item-align:start;align-self:start}._AlignSelf_1us84_2._AlignSelf--wide-s--align-self-center_1us84_60{-ms-flex-item-align:center;align-self:center}._AlignSelf_1us84_2._AlignSelf--wide-s--align-self-end_1us84_63{-ms-flex-item-align:end;align-self:end}._AlignSelf_1us84_2._AlignSelf--wide-s--align-self-stretch_1us84_66{-ms-flex-item-align:stretch;align-self:stretch}}@media (min-width: 1900px){._AlignSelf_1us84_2._AlignSelf--wide-l--align-self-start_1us84_71{-ms-flex-item-align:start;align-self:start}._AlignSelf_1us84_2._AlignSelf--wide-l--align-self-center_1us84_74{-ms-flex-item-align:center;align-self:center}._AlignSelf_1us84_2._AlignSelf--wide-l--align-self-end_1us84_77{-ms-flex-item-align:end;align-self:end}._AlignSelf_1us84_2._AlignSelf--wide-l--align-self-stretch_1us84_80{-ms-flex-item-align:stretch;align-self:stretch}}._LayoutGridItem_2tq6r_1{margin:0;list-style:none;font-weight:inherit;border:none;text-align:inherit;border-spacing:0;padding:0}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._Link_p4f2q_4{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_p4f2q_4:focus-visible{outline-style:solid;outline-color:var(--603ec6);outline-width:var(--99d31f);outline-offset:var(--c0b12c)}._Link--inline_p4f2q_20{display:inline}._Link--noUnderline_p4f2q_23{text-decoration:none}._Link--variant-accentDark_p4f2q_26{color:var(--c6b68f)}._Link--variant-accentDark_p4f2q_26:hover,._Link--variant-accentDark--dsInternalSimulation-hover_p4f2q_30{color:var(--65e1ef)}._Link--variant-accentDark_p4f2q_26:active,._Link--variant-accentDark--dsInternalSimulation-active_p4f2q_34{color:var(--179b80)}._Link--variant-accentDarkInverted_p4f2q_37{color:var(--7cbffc)}._Link--variant-accentDarkInverted_p4f2q_37:hover,._Link--variant-accentDarkInverted--dsInternalSimulation-hover_p4f2q_41{color:var(--47fcde)}._Link--variant-accentDarkInverted_p4f2q_37:active,._Link--variant-accentDarkInverted--dsInternalSimulation-active_p4f2q_45{color:var(--1253e2)}._Link--variant-neutral_p4f2q_48{color:var(--19fdf0)}._Link--variant-neutral_p4f2q_48:hover,._Link--variant-neutral--dsInternalSimulation-hover_p4f2q_52{color:var(--ce5fb9)}._Link--variant-neutral_p4f2q_48:active,._Link--variant-neutral--dsInternalSimulation-active_p4f2q_56{color:var(--1d39ac)}._Link--variant-neutralInverted_p4f2q_59{color:var(--883d0f)}._Link--variant-neutralInverted_p4f2q_59:hover,._Link--variant-neutralInverted--dsInternalSimulation-hover_p4f2q_63{color:var(--065570)}._Link--variant-neutralInverted_p4f2q_59:active,._Link--variant-neutralInverted--dsInternalSimulation-active_p4f2q_67{color:var(--be41c4)}._Link--variant-unsetColors_p4f2q_70{color:var(--e66f2a)}._Link--variant-unsetColors_p4f2q_70:hover,._Link--variant-unsetColors--dsInternalSimulation-hover_p4f2q_74{color:var(--468ceb)}._Link--variant-unsetColors_p4f2q_70:active,._Link--variant-unsetColors--dsInternalSimulation-active_p4f2q_78{color:var(--a5fc76)}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as e}from"./jsx-runtime-BTJTZTIL.js";import{T as a}from"./Text-
|
|
1
|
+
import{j as e}from"./jsx-runtime-BTJTZTIL.js";import{T as a}from"./Text-V4TRyvtW.js";import{r as k}from"./index-Cb9e4tly.js";import{f as Y}from"./filterHTMLAttributes-DYdLqcvH.js";import{g as Z}from"./defaults-B1rzzf6M.js";import{u as ee}from"./useHostname-Y3PlXofY.js";import{m as ne,s as f,b as x}from"./classNames-BUL1Zq7e.js";import{w as y}from"./componentNames-Bwls0I02.js";import{a as ae,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-Pc_gtAUU.js";import"./text-centered-Bf8j8BI4.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./constants-BgBLeZzp.js";const re="_Link_p4f2q_4",ie={Link:re,"Link--inline":"_Link--inline_p4f2q_20","Link--noUnderline":"_Link--noUnderline_p4f2q_23","Link--variant-accentDark":"_Link--variant-accentDark_p4f2q_26","Link--variant-accentDark--dsInternalSimulation-hover":"_Link--variant-accentDark--dsInternalSimulation-hover_p4f2q_30","Link--variant-accentDark--dsInternalSimulation-active":"_Link--variant-accentDark--dsInternalSimulation-active_p4f2q_34","Link--variant-accentDarkInverted":"_Link--variant-accentDarkInverted_p4f2q_37","Link--variant-accentDarkInverted--dsInternalSimulation-hover":"_Link--variant-accentDarkInverted--dsInternalSimulation-hover_p4f2q_41","Link--variant-accentDarkInverted--dsInternalSimulation-active":"_Link--variant-accentDarkInverted--dsInternalSimulation-active_p4f2q_45","Link--variant-neutral":"_Link--variant-neutral_p4f2q_48","Link--variant-neutral--dsInternalSimulation-hover":"_Link--variant-neutral--dsInternalSimulation-hover_p4f2q_52","Link--variant-neutral--dsInternalSimulation-active":"_Link--variant-neutral--dsInternalSimulation-active_p4f2q_56","Link--variant-neutralInverted":"_Link--variant-neutralInverted_p4f2q_59","Link--variant-neutralInverted--dsInternalSimulation-hover":"_Link--variant-neutralInverted--dsInternalSimulation-hover_p4f2q_63","Link--variant-neutralInverted--dsInternalSimulation-active":"_Link--variant-neutralInverted--dsInternalSimulation-active_p4f2q_67","Link--variant-unsetColors":"_Link--variant-unsetColors_p4f2q_70","Link--variant-unsetColors--dsInternalSimulation-hover":"_Link--variant-unsetColors--dsInternalSimulation-hover_p4f2q_74","Link--variant-unsetColors--dsInternalSimulation-active":"_Link--variant-unsetColors--dsInternalSimulation-active_p4f2q_78"},n=k.forwardRef(function(E,P){const{variant:p=Z,href:A,download:R,opensInNewTab:H,nofollow:M,assistiveText:O,onClick:$,as:v,url:z,dataset:F,children:m,inline:J,dsInternalSimulation:K,noUnderline:W,...X}=E,B=ee(),G=ne(ie,y.Link,[f(`variant-${p}--dsInternalSimulation`,K),f("variant",p),x("inline",void 0,J),x("noUnderline",void 0,W)]),c=A||z,Q=c?ae(B,c,H,M):{},h={...Y(X),ref:P,href:c,download:R,"aria-label":O,onClick:$,className:G.join(" "),...te(F,{preplyDsComponent:y.Link})};return v?k.cloneElement(v,{...h},m):e.jsx("a",{...h,...Q,children:m})});try{n.displayName="Link",n.__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
4
|
component.`,displayName:"Link",props:{variant:{defaultValue:null,description:"",name:"variant",required:!1,type:{name:"enum",value:[{value:'"accentDark"'},{value:'"accentDarkInverted"'},{value:'"neutral"'},{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
|
|
@@ -34,7 +34,7 @@ of e2e tests or integrating with external libraries.`,name:"dataset",required:!1
|
|
|
34
34
|
unsetColors
|
|
35
35
|
</Link>
|
|
36
36
|
</div>;
|
|
37
|
-
}`,...(I=(L=r.parameters)==null?void 0:L.docs)==null?void 0:I.source}}};var j,
|
|
37
|
+
}`,...(I=(L=r.parameters)==null?void 0:L.docs)==null?void 0:I.source}}};var j,T,C;i.parameters={...i.parameters,docs:{...(j=i.parameters)==null?void 0:j.docs,source:{originalSource:`() => {
|
|
38
38
|
const grey = getTokenVar(color.background.primaryInverted);
|
|
39
39
|
return <div style={{
|
|
40
40
|
display: 'flex',
|
|
@@ -119,7 +119,7 @@ of e2e tests or integrating with external libraries.`,name:"dataset",required:!1
|
|
|
119
119
|
</Text>
|
|
120
120
|
</div>
|
|
121
121
|
</div>;
|
|
122
|
-
}`,...(
|
|
122
|
+
}`,...(C=(T=i.parameters)==null?void 0:T.docs)==null?void 0:C.source}}};var b,_,S;l.parameters={...l.parameters,docs:{...(b=l.parameters)==null?void 0:b.docs,source:{originalSource:`() => {
|
|
123
123
|
const grey = getTokenVar(color.background.primaryInverted);
|
|
124
124
|
return <div style={{
|
|
125
125
|
display: 'flex',
|
|
@@ -214,7 +214,7 @@ of e2e tests or integrating with external libraries.`,name:"dataset",required:!1
|
|
|
214
214
|
</Link>
|
|
215
215
|
</div>
|
|
216
216
|
</div>;
|
|
217
|
-
}`,...(S=(_=l.parameters)==null?void 0:_.docs)==null?void 0:S.source}}};var D,w,
|
|
217
|
+
}`,...(S=(_=l.parameters)==null?void 0:_.docs)==null?void 0:S.source}}};var D,w,q;o.parameters={...o.parameters,docs:{...(D=o.parameters)==null?void 0:D.docs,source:{originalSource:`() => <p style={{
|
|
218
218
|
width: '12ch'
|
|
219
219
|
}}>
|
|
220
220
|
Unlock your potential;{' '}
|
|
@@ -222,7 +222,7 @@ of e2e tests or integrating with external libraries.`,name:"dataset",required:!1
|
|
|
222
222
|
visit Preply
|
|
223
223
|
</Link>
|
|
224
224
|
.
|
|
225
|
-
</p>`,...(
|
|
225
|
+
</p>`,...(q=(w=o.parameters)==null?void 0:w.docs)==null?void 0:q.source}}};var V,N,U;s.parameters={...s.parameters,docs:{...(V=s.parameters)==null?void 0:V.docs,source:{originalSource:`{
|
|
226
226
|
parameters: {
|
|
227
227
|
chromatic: {
|
|
228
228
|
disableSnapshot: true
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._Loader_o58s3_2{display:inline-flex;width:fit-content;height:fit-content}._Loader--normal_o58s3_7{color:var(--19bcb6)}._Loader--inverted_o58s3_10{color:var(--38413d)}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import{j as e}from"./jsx-runtime-BTJTZTIL.js";import{r as
|
|
1
|
+
import{j as e}from"./jsx-runtime-BTJTZTIL.js";import{r as h}from"./index-Cb9e4tly.js";import{f as j}from"./filterHTMLAttributes-DYdLqcvH.js";import{S as z}from"./Spinner-Yzq6CWfu.js";import{m as k,b as C}from"./classNames-BUL1Zq7e.js";import{w as l}from"./componentNames-Bwls0I02.js";import{g as E}from"./index-DdzHuZ-Y.js";import{S as N}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_o58s3_2",q={Loader:V,"Loader--normal":"_Loader--normal_o58s3_7","Loader--inverted":"_Loader--inverted_o58s3_10"},r=h.forwardRef(function({size:t,inverted:y=!1,dataset:L,..._},b){const S=k(q,l.Loader,[C("inverted","normal",y)]),x={...j(_),ref:b,className:S.join(" "),...E(L,{preplyDsComponent:l.Loader})};return e.jsx("span",{...x,children:e.jsx(z,{size:t})})});try{r.displayName="Loader",r.__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 K={title:"components/Loader",component:r,argTypes:{size:{description:N}}},n=()=>e.jsxs("div",{style:{display:"flex",alignItems:"end",gap:"8px"},children:[e.jsx(r,{size:"default"}),e.jsx(r,{size:"large"})]}),o=()=>e.jsx(r,{inverted:!0});o.decorators=[a=>{const t=R(T.background.primaryInverted);return e.jsx("div",{style:{backgroundColor:t},children:a()})}];const s={parameters:{chromatic:{disableSnapshot:!0}},decorators:[(a,{args:t})=>e.jsx("div",{style:{backgroundColor:t.inverted?"black":void 0},children:a()})],args:{size:"default",inverted:!1,dataset:{qaid:"loader"}},argTypes:{dataset:{control:"object"},size:{control:"select"},inverted:{control:"boolean"}}};var d,i,c;n.parameters={...n.parameters,docs:{...(d=n.parameters)==null?void 0:d.docs,source:{originalSource:`() => <div style={{
|
|
2
2
|
display: 'flex',
|
|
3
3
|
alignItems: 'end',
|
|
4
4
|
gap: '8px'
|
|
5
5
|
}}>
|
|
6
6
|
<Loader size="default" />
|
|
7
7
|
<Loader size="large" />
|
|
8
|
-
</div>`,...(c=(i=
|
|
8
|
+
</div>`,...(c=(i=n.parameters)==null?void 0:i.docs)==null?void 0:c.source}}};var u,m,p;o.parameters={...o.parameters,docs:{...(u=o.parameters)==null?void 0:u.docs,source:{originalSource:"() => <Loader inverted />",...(p=(m=o.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
9
|
parameters: {
|
|
10
10
|
chromatic: {
|
|
11
11
|
disableSnapshot: true
|
|
@@ -34,4 +34,4 @@ import{j as e}from"./jsx-runtime-BTJTZTIL.js";import{r as z}from"./index-Cb9e4tl
|
|
|
34
34
|
control: 'boolean'
|
|
35
35
|
}
|
|
36
36
|
}
|
|
37
|
-
}`,...(g=(v=s.parameters)==null?void 0:v.docs)==null?void 0:g.source}}};const Q=["Sizes","Inverted","Playground"];export{
|
|
37
|
+
}`,...(g=(v=s.parameters)==null?void 0:v.docs)==null?void 0:g.source}}};const Q=["Sizes","Inverted","Playground"];export{o as Inverted,s as Playground,n as Sizes,Q as __namedExportsOrder,K as default};
|
|
@@ -0,0 +1,203 @@
|
|
|
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-BOyl6fPv.js";import{I as we}from"./Icon-BmtvHdpX.js";import{F as He}from"./FieldLayout-nD5R7atd.js";import{u as Se,I as Fe,s as Ne}from"./FieldLayoutBase-Ri_bjseH.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-V4TRyvtW.js";import"./index-ChsGqxH_.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./v4-CtRu48qb.js";import"./render-icon-BT0Aq7PA.js";import"./ButtonBase-CndTGqQQ.js";import"./Spinner-Yzq6CWfu.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-Pc_gtAUU.js";import"./FieldAdditionalText-BbXsXR5V.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-Bf8j8BI4.js";const je=({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(je);try{N.displayName="InputNumber",N.__docgenInfo={description:"",displayName:"InputNumber",props:{dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<Element>"}]}},id:{defaultValue:null,description:"",name:"id",required:!0,type:{name:"string"}},placeholder:{defaultValue:null,description:"",name:"placeholder",required:!1,type:{name:"enum",value:[{value:"string"}]}},"aria-describedby":{defaultValue:null,description:`Identifies the element (or elements) that describes the object.
|
|
2
|
+
@see aria-labelledby`,name:"aria-describedby",required:!1,type:{name:"enum",value:[{value:"string"}]}},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>"}]}},"aria-disabled":{defaultValue:null,description:`Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
|
|
3
|
+
@see aria-hidden
|
|
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"'}]}},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>"}]}},onChange:{defaultValue:null,description:"",name:"onChange",required:!1,type:{name:"enum",value:[{value:"ChangeEventHandler<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>"}]}},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"}]}},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"}]}},disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<Element>"}]}},placeholder:{defaultValue:null,description:"",name:"placeholder",required:!1,type:{name:"enum",value:[{value:"string"}]}},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>"}]}},defaultValue:{defaultValue:null,description:"",name:"defaultValue",required:!1,type:{name:"enum",value:[{value:"number"}]}},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>"}]}},onChange:{defaultValue:null,description:"",name:"onChange",required:!1,type:{name:"enum",value:[{value:"ChangeEventHandler<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>"}]}},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"}]}},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:`{
|
|
6
|
+
parameters: {
|
|
7
|
+
docs: {
|
|
8
|
+
description: {
|
|
9
|
+
story: \`An empty field with a \\\`label\\\` and a \\\`placeholder\\\`.\`
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
}`,...(B=(j=v.parameters)==null?void 0:j.docs)==null?void 0:B.source}}};var P,L,D;f.parameters={...f.parameters,docs:{...(P=f.parameters)==null?void 0:P.docs,source:{originalSource:`{
|
|
14
|
+
args: {
|
|
15
|
+
defaultValue: 100
|
|
16
|
+
},
|
|
17
|
+
play: async ({
|
|
18
|
+
canvas,
|
|
19
|
+
step
|
|
20
|
+
}) => {
|
|
21
|
+
await step('Validate defaultValue', async () => {
|
|
22
|
+
const input = canvas.getByTestId<HTMLInputElement>('input');
|
|
23
|
+
await expect(input).toHaveValue(100);
|
|
24
|
+
});
|
|
25
|
+
await step('Type to value', async () => {
|
|
26
|
+
const input = canvas.getByTestId<HTMLInputElement>('input');
|
|
27
|
+
await userEvent.type(input, ',500');
|
|
28
|
+
await expect(input).toHaveValue(100_500);
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
|
+
}`,...(D=(L=f.parameters)==null?void 0:L.docs)==null?void 0:D.source}}};var _,M,K;y.parameters={...y.parameters,docs:{...(_=y.parameters)==null?void 0:_.docs,source:{originalSource:`{
|
|
32
|
+
args: {
|
|
33
|
+
icon: <Icon svg={PhoneSvg} />
|
|
34
|
+
}
|
|
35
|
+
}`,...(K=(M=y.parameters)==null?void 0:M.docs)==null?void 0:K.source}}};var W,O,A;h.parameters={...h.parameters,docs:{...(W=h.parameters)==null?void 0:W.docs,source:{originalSource:`{
|
|
36
|
+
args: {
|
|
37
|
+
additionalText: 'This is additional text'
|
|
38
|
+
}
|
|
39
|
+
}`,...(A=(O=h.parameters)==null?void 0:O.docs)==null?void 0:A.source}}};var U,J,X;b.parameters={...b.parameters,docs:{...(U=b.parameters)==null?void 0:U.docs,source:{originalSource:`{
|
|
40
|
+
args: {
|
|
41
|
+
required: true
|
|
42
|
+
}
|
|
43
|
+
}`,...(X=(J=b.parameters)==null?void 0:J.docs)==null?void 0:X.source}}};var Y,$,z;g.parameters={...g.parameters,docs:{...(Y=g.parameters)==null?void 0:Y.docs,source:{originalSource:`{
|
|
44
|
+
args: {
|
|
45
|
+
required: true,
|
|
46
|
+
requiredLabel: <Text accent="critical" variant="m-bold">
|
|
47
|
+
Needed
|
|
48
|
+
</Text>
|
|
49
|
+
}
|
|
50
|
+
}`,...(z=($=g.parameters)==null?void 0:$.docs)==null?void 0:z.source}}};var G,Q,Z;V.parameters={...V.parameters,docs:{...(G=V.parameters)==null?void 0:G.docs,source:{originalSource:`{
|
|
51
|
+
args: {
|
|
52
|
+
hideLabel: true
|
|
53
|
+
}
|
|
54
|
+
}`,...(Z=(Q=V.parameters)==null?void 0:Q.docs)==null?void 0:Z.source}}};var ee,ae,ne;x.parameters={...x.parameters,docs:{...(ee=x.parameters)==null?void 0:ee.docs,source:{originalSource:`{
|
|
55
|
+
args: {
|
|
56
|
+
hasError: true
|
|
57
|
+
}
|
|
58
|
+
}`,...(ne=(ae=x.parameters)==null?void 0:ae.docs)==null?void 0:ne.source}}};var te,re,le;q.parameters={...q.parameters,docs:{...(te=q.parameters)==null?void 0:te.docs,source:{originalSource:`{
|
|
59
|
+
args: {
|
|
60
|
+
hasError: true,
|
|
61
|
+
errorMessage: 'This is an error message'
|
|
62
|
+
}
|
|
63
|
+
}`,...(le=(re=q.parameters)==null?void 0:re.docs)==null?void 0:le.source}}};var ue,se,ie;E.parameters={...E.parameters,docs:{...(ue=E.parameters)==null?void 0:ue.docs,source:{originalSource:`{
|
|
64
|
+
args: {
|
|
65
|
+
disabled: true
|
|
66
|
+
}
|
|
67
|
+
}`,...(ie=(se=E.parameters)==null?void 0:se.docs)==null?void 0:ie.source}}};var oe,de,ce;w.parameters={...w.parameters,docs:{...(oe=w.parameters)==null?void 0:oe.docs,source:{originalSource:`{
|
|
68
|
+
args: {
|
|
69
|
+
readOnly: true
|
|
70
|
+
}
|
|
71
|
+
}`,...(ce=(de=w.parameters)==null?void 0:de.docs)==null?void 0:ce.source}}};var me,pe,ve;I.parameters={...I.parameters,docs:{...(me=I.parameters)==null?void 0:me.docs,source:{originalSource:`{
|
|
72
|
+
decorators: [(Story, {
|
|
73
|
+
args
|
|
74
|
+
}) => <div style={{
|
|
75
|
+
padding: '8px',
|
|
76
|
+
margin: '8px'
|
|
77
|
+
}}>
|
|
78
|
+
<p>
|
|
79
|
+
You can{' '}
|
|
80
|
+
<Button variant="secondary" dataset={{
|
|
81
|
+
testid: 'focus-button'
|
|
82
|
+
}} onClick={() =>
|
|
83
|
+
// @ts-expect-error - This will fail gracefully,
|
|
84
|
+
// and the \`play\` function will assert it properly
|
|
85
|
+
args.ref?.current?.setFocus()}>
|
|
86
|
+
Focus
|
|
87
|
+
</Button>{' '}
|
|
88
|
+
the input imperatively.
|
|
89
|
+
</p>
|
|
90
|
+
<Story />
|
|
91
|
+
</div>],
|
|
92
|
+
play: async ({
|
|
93
|
+
args,
|
|
94
|
+
canvas
|
|
95
|
+
}) => {
|
|
96
|
+
if (!isImperativeHandleRef(args.ref)) {
|
|
97
|
+
throw new Error('Expected ref.current to be an InputImperativeHandle');
|
|
98
|
+
}
|
|
99
|
+
const input = canvas.getByTestId('input');
|
|
100
|
+
await userEvent.click(canvas.getByTestId('focus-button'));
|
|
101
|
+
await waitFor(() => expect(input).toHaveFocus());
|
|
102
|
+
}
|
|
103
|
+
}`,...(ve=(pe=I.parameters)==null?void 0:pe.docs)==null?void 0:ve.source}}};var fe,ye,he;C.parameters={...C.parameters,docs:{...(fe=C.parameters)==null?void 0:fe.docs,source:{originalSource:`{
|
|
104
|
+
decorators: [(Story, {
|
|
105
|
+
args
|
|
106
|
+
}) => <div style={{
|
|
107
|
+
height: '300px',
|
|
108
|
+
overflow: 'scroll',
|
|
109
|
+
padding: '8px',
|
|
110
|
+
margin: '8px'
|
|
111
|
+
}}>
|
|
112
|
+
<p>
|
|
113
|
+
You can{' '}
|
|
114
|
+
<Button variant="secondary" dataset={{
|
|
115
|
+
testid: 'scroll-button'
|
|
116
|
+
}} onClick={() => {
|
|
117
|
+
if (!isImperativeHandleRef(args.ref)) {
|
|
118
|
+
throw new Error('Expected ref.current to be an InputImperativeHandle');
|
|
119
|
+
}
|
|
120
|
+
args.ref.current.scrollIntoView();
|
|
121
|
+
}}>
|
|
122
|
+
Scroll
|
|
123
|
+
</Button>{' '}
|
|
124
|
+
the input into view imperatively.
|
|
125
|
+
</p>
|
|
126
|
+
<div style={{
|
|
127
|
+
height: '1000px',
|
|
128
|
+
display: 'flex',
|
|
129
|
+
flexDirection: 'column',
|
|
130
|
+
justifyContent: 'end',
|
|
131
|
+
border: '2px dashed lightgray',
|
|
132
|
+
padding: '16px'
|
|
133
|
+
}}>
|
|
134
|
+
<Story />
|
|
135
|
+
</div>
|
|
136
|
+
</div>],
|
|
137
|
+
play: async ({
|
|
138
|
+
args,
|
|
139
|
+
canvas
|
|
140
|
+
}) => {
|
|
141
|
+
if (!isImperativeHandleRef(args.ref)) {
|
|
142
|
+
throw new Error('Expected ref.current to be an InputImperativeHandle');
|
|
143
|
+
}
|
|
144
|
+
const input = canvas.getByTestId('input');
|
|
145
|
+
args.ref.current.scrollIntoView();
|
|
146
|
+
await waitFor(() => expect(input).toBeVisible());
|
|
147
|
+
}
|
|
148
|
+
}`,...(he=(ye=C.parameters)==null?void 0:ye.docs)==null?void 0:he.source}}};var be,ge,Ve;H.parameters={...H.parameters,docs:{...(be=H.parameters)==null?void 0:be.docs,source:{originalSource:`{
|
|
149
|
+
tags: ['!test'],
|
|
150
|
+
parameters: {
|
|
151
|
+
docs: {
|
|
152
|
+
description: {
|
|
153
|
+
story: \`
|
|
154
|
+
The following code renders a \\\`Numberfield\\\` with the \\\`required\\\` flag, a \\\`min\\\`
|
|
155
|
+
and \\\`max\\\` value, an \\\`icon\\\`, a \\\`placeholder\\\`, and some \\\`additionalText\\\`.
|
|
156
|
+
|
|
157
|
+
When you click the "Submit" button and the input value is empty
|
|
158
|
+
- it displays feedback via the \\\`errorMessage\\\` prop;
|
|
159
|
+
- and uses the \\\`setFocus()\\\` API to bring the focus back to the field.
|
|
160
|
+
|
|
161
|
+
It uses the \\\`value\\\` and \\\`onValueChange\\\` props to react to the user input.
|
|
162
|
+
\`
|
|
163
|
+
}
|
|
164
|
+
},
|
|
165
|
+
chromatic: {
|
|
166
|
+
disableSnapshot: true
|
|
167
|
+
}
|
|
168
|
+
},
|
|
169
|
+
render: function Story() {
|
|
170
|
+
const fieldRef = useRef<InputImperativeHandle>(null);
|
|
171
|
+
const [value, setValue] = useState<number | undefined>(undefined);
|
|
172
|
+
const [submited, setSubmitted] = useState(false);
|
|
173
|
+
const getErrorMessage = (attempt?: number) => {
|
|
174
|
+
if (attempt === undefined) {
|
|
175
|
+
return 'Please provide a number';
|
|
176
|
+
}
|
|
177
|
+
if (attempt !== Math.round(attempt)) {
|
|
178
|
+
return 'Please provide a whole number';
|
|
179
|
+
}
|
|
180
|
+
if (attempt < 10) {
|
|
181
|
+
return 'Please book at least 10 lessons';
|
|
182
|
+
}
|
|
183
|
+
if (attempt > 99) {
|
|
184
|
+
return 'Please book less than 100 lessons';
|
|
185
|
+
}
|
|
186
|
+
return undefined;
|
|
187
|
+
};
|
|
188
|
+
const handleClick = () => {
|
|
189
|
+
setSubmitted(true);
|
|
190
|
+
if (!value) {
|
|
191
|
+
fieldRef?.current?.setFocus();
|
|
192
|
+
}
|
|
193
|
+
};
|
|
194
|
+
return <div style={{
|
|
195
|
+
maxWidth: '500px',
|
|
196
|
+
display: 'flex',
|
|
197
|
+
flexDirection: 'column'
|
|
198
|
+
}}>
|
|
199
|
+
<NumberField id="lessons" name="lessons" label="Number of lessons" icon={<Icon svg={PhoneSvg} />} placeholder="How about 3?" value={value} additionalText="These lessons will be scheduled automatically" onValueChange={setValue} errorMessage={submited ? getErrorMessage(value) : undefined} min={10} max={99} ref={fieldRef} required />
|
|
200
|
+
<Button onClick={handleClick}>Submit</Button>
|
|
201
|
+
</div>;
|
|
202
|
+
}
|
|
203
|
+
}`,...(Ve=(ge=H.parameters)==null?void 0:ge.docs)==null?void 0:Ve.source}}};const ba=["Basic","WithValue","WithIcon","WithAdditionalText","Required","RequiredWithCustomLabel","WithHiddenLabel","HasError","HasErrorWithMessage","Disabled","ReadOnly","ImperativeSetFocus","ImperativeScrollIntoView","Example"];export{v as Basic,E as Disabled,H as Example,x as HasError,q as HasErrorWithMessage,C as ImperativeScrollIntoView,I as ImperativeSetFocus,w as ReadOnly,b as Required,g as RequiredWithCustomLabel,h as WithAdditionalText,V as WithHiddenLabel,y as WithIcon,f as WithValue,ba as __namedExportsOrder,ha as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._content_1uknq_2{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_1uknq_2[data-state=open]{animation-name:_appear_1uknq_1}._content_1uknq_2[data-state=closed]{animation-name:_disappear_1uknq_1}._header_1uknq_23{display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:flex-start}._close_1uknq_29{background:none;border:none;border-radius:var(--5e8be4);padding:0;margin:0;cursor:pointer}._close_1uknq_29:focus-visible{outline-style:solid;outline-color:var(--603ec6);outline-width:var(--99d31f);outline-offset:var(--c0b12c)}._footer_1uknq_43{display:flex;justify-content:flex-end;gap:var(--813599);align-items:center}._arrow_1uknq_49{fill:var(--79dffb)}@keyframes _appear_1uknq_1{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@keyframes _disappear_1uknq_1{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 as q,A as R,P as V,C as k,a as x,b as O}from"./index-BOrXX8UK.js";import{F as N}from"./TokyoUIClose-thK8sk63.js";import{I as E}from"./Icon-BmtvHdpX.js";import{T as P}from"./Text-V4TRyvtW.js";import{B as j}from"./Button-BOyl6fPv.js";import{H as T}from"./Heading-BIzxWDA5.js";import{u as S}from"./index-D1pfvbUR.js";import{g as D}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 J}from"./message-B1DLZQ1U.js";const X="_content_1uknq_2",B="_header_1uknq_23",U="_close_1uknq_29",A="_footer_1uknq_43",F="_arrow_1uknq_49",o={content:X,header:B,close:U,footer:A,arrow:F},G=e=>{e.scrollIntoViewIfNeeded?e.scrollIntoViewIfNeeded(!1):e.scrollIntoView({behavior:"auto",block:"nearest",inline:"nearest"})},m=({open:e,onOpenChange:u,disabled:r,title:i,text:s,children:t,side:l,dataset:h,actionLabel:b=a.jsx(J,{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}=S(),_=L(),f=n.useId(),w=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(q,{open:e,onOpenChange:u,children:[a.jsx(R,{ref:c,id:d,asChild:!0,children:t}),a.jsx(V,{container:_,children:a.jsxs(k,{side:l,className:o.content,"aria-labelledby":f,"aria-describedby":`${d} ${w}`,...M(h,{preplyDsComponent:H.OnboardingTooltip}),children:[a.jsxs("div",{className:o.header,children:[a.jsx(x,{className:o.close,"aria-label":I(D.close),"data-testid":"close",children:a.jsx(E,{accent:"inverted",svg:N})}),a.jsx(T,{tag:"h1",variant:"small",accent:"inverted",id:f,"aria-describedby":d,children:i})]}),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(O,{"aria-hidden":!0,className:o.arrow,width:18,height:11})]})})]})},p=e=>{const[u,r]=n.useState(!0),i=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:u,onOpenChange:i,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"
|