@preply/ds-docs 11.2.0 → 11.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.storybook/main.ts +9 -3
- package/dist/assets/{00.LayoutFlex.stories-CZeeSnID.js → 00.LayoutFlex.stories-BPok5Gmm.js} +1 -1
- package/dist/assets/{00.applications-D-6PcdWy.js → 00.applications-BGZaoKgL.js} +1 -1
- package/dist/assets/{00.favicons.guide-BOqZ5Z1x.js → 00.favicons.guide-D5wPncOn.js} +1 -1
- package/dist/assets/{00.token-explorer-Bk0wBfni.js → 00.token-explorer-BDLlwhc6.js} +1 -1
- package/dist/assets/{00.using-responsive-props-BsEiJlqE.js → 00.using-responsive-props-BRxnFd5i.js} +1 -1
- package/dist/assets/{01.semantic-tokens-DElwA412.js → 01.semantic-tokens-CFudZ7pc.js} +1 -1
- package/dist/assets/{01.using-shorthand-props-Bg-Oi5_v.js → 01.using-shorthand-props-DchZCZhq.js} +1 -1
- package/dist/assets/10.Combinations.stories-BN4qNVGI.js +128 -0
- package/dist/assets/{10.fonts.guide-CHasKWis.js → 10.fonts.guide-BWS-fMyC.js} +1 -1
- package/dist/assets/{10.ssr-DpNJW1W0.js → 10.ssr-DFhHeGSZ.js} +1 -1
- package/dist/assets/{11.fonts.explorer-CTqkQ8Jk.js → 11.fonts.explorer-BS1XxSRj.js} +1 -1
- package/dist/assets/{11.ssr.app-router-FQQ4sEjM.js → 11.ssr.app-router-CWuMPO3g.js} +1 -1
- package/dist/assets/{20.libraries-BTCk2DJX.js → 20.libraries-J4C2b4WP.js} +1 -1
- package/dist/assets/{2025-q4-ds-cleanup-BRN8Tdfv.js → 2025-q4-ds-cleanup-DzhmHakd.js} +1 -1
- package/dist/assets/30.icons.explorer-DkBObzh_.js +72 -0
- package/dist/assets/{30.storybook-DKSi7vdi.js → 30.storybook-1O5EtrKp.js} +1 -1
- package/dist/assets/{40.illustrations.explorer-CGBqfl2k.js → 40.illustrations.explorer-C_NqekHv.js} +1 -1
- package/dist/assets/{60.components-6MJdvrRn.js → 60.components-CxzcTHHY.js} +1 -1
- package/dist/assets/{90.advanced-B9pO5FKL.js → 90.advanced-J2ehdLM6.js} +1 -1
- package/dist/assets/Accordion-CWMWW-O5.js +21 -0
- package/dist/assets/Accordion-D95NvT0Z.css +1 -0
- package/dist/assets/{Accordion.stories-B7zpGc3N.js → Accordion.stories-DDqM6MXv.js} +10 -3
- package/dist/assets/{Accordion.tests.stories-TuJItmwi.js → Accordion.tests.stories-DN9L-q3H.js} +17 -10
- package/dist/assets/{AlertBanner.primitives.stories-C0FNaxJR.js → AlertBanner.primitives.stories-mKVHs8FF.js} +1 -1
- package/dist/assets/{AlertBanner.stories-BeZGLz-f.js → AlertBanner.stories-BV3lnGPY.js} +1 -1
- package/dist/assets/AlertBannerAction-DU-Yr-4k.js +127 -0
- package/dist/assets/{AlertDialog-Dk5PtknG.js → AlertDialog-CFUnhRAx.js} +1 -1
- package/dist/assets/{AlertDialog.stories-CwxQZyTF.js → AlertDialog.stories-DovmfFOJ.js} +1 -1
- package/dist/assets/{Avatar.stories-Dp9pDU6q.js → Avatar.stories-BICCl1VI.js} +1 -1
- package/dist/assets/{AvatarWithStatus-Cfv2-J8U.js → AvatarWithStatus-D83AKEVT.js} +3 -3
- package/dist/assets/{AvatarWithStatus.stories-9MJ13xVu.js → AvatarWithStatus.stories-D-ttnLWy.js} +1 -1
- package/dist/assets/{Badge-BPd-gr8r.js → Badge-DeL8OM1F.js} +2 -2
- package/dist/assets/{Badge.stories-DIgYXyBb.js → Badge.stories-BemzPh97.js} +1 -1
- package/dist/assets/{Box-G2_C7Jeq.js → Box-CcR4H93c.js} +2 -2
- package/dist/assets/{Box.stories-_HS5gmLH.js → Box.stories-B4Kkg_Wz.js} +1 -1
- package/dist/assets/{BubbleCounter-DNO8aNBu.js → BubbleCounter-CfdjWlAV.js} +1 -1
- package/dist/assets/{BubbleCounter.stories-CyzNA0Bp.js → BubbleCounter.stories-DRq0-Or2.js} +1 -1
- package/dist/assets/{Button-a57MCiDO.js → Button--WTUF97E.js} +4 -3
- package/dist/assets/{Button.stories-5MZ_eXfn.js → Button.stories-B5ddris9.js} +19 -7
- package/dist/assets/{ButtonBase-C22oeCEB.js → ButtonBase-CMQthdSK.js} +3 -2
- package/dist/assets/{CalloutBanner.stories-RwI1z0sm.js → CalloutBanner.stories-C60JgqC0.js} +1 -1
- package/dist/assets/CalloutBannerText-DDPb7LsF.js +28 -0
- package/dist/assets/Checkbox-BV4Be-fH.js +7 -0
- package/dist/assets/{Checkbox-B_qY1TUo.css → Checkbox-DIfWwwEC.css} +1 -1
- package/dist/assets/{Checkbox.stories-CQsCp6Jy.js → Checkbox.stories-D6wUFMNN.js} +8 -8
- package/dist/assets/{Checkbox.tests.stories-05uWFXz_.js → Checkbox.tests.stories-FLl_ZNDM.js} +1 -1
- package/dist/assets/{Chips.stories-DSuVc2t5.js → Chips.stories-BfLNlLSh.js} +1 -1
- package/dist/assets/{Color-6BZIO3FS-CMeY9l9b.js → Color-6BZIO3FS-CcuLIbdP.js} +1 -1
- package/dist/assets/{ComposingDialogs.stories-DM7_H9s_.js → ComposingDialogs.stories-Bwtla9z9.js} +1 -1
- package/dist/assets/{ComposingPopovers.stories-BfWmolPD.js → ComposingPopovers.stories-BdgYJQKE.js} +1 -1
- package/dist/assets/CountryFlag-D1d90EPT.js +3 -0
- package/dist/assets/{CountryFlag.stories-BbEBSjOp.js → CountryFlag.stories-B0_35WJ9.js} +1 -1
- package/dist/assets/{CountryFlag.test.stories-BEKGdJSA.js → CountryFlag.test.stories-DGoCByQP.js} +1 -1
- package/dist/assets/{Dialog-CGhOTWSt.js → Dialog-BT0Kd0KN.js} +2 -2
- package/dist/assets/{Dialog.primitives.stories-B-OAqhJT.js → Dialog.primitives.stories-DNe9f6uf.js} +1 -1
- package/dist/assets/{Dialog.stories-B6xtR1zI.js → Dialog.stories-C0BUsh4I.js} +18 -5
- package/dist/assets/{Dialog.test.stories-9Ct6h0zZ.js → Dialog.test.stories-BapfC0Yd.js} +1 -1
- package/dist/assets/DialogActions-BDIzA8PJ.js +9 -0
- package/dist/assets/DialogCloseButton-CAY9jDgH.js +12 -0
- package/dist/assets/DismissibleChips-CMpz1ljr.js +1 -0
- package/dist/assets/{DismissibleChips.stories-vx1F9ELx.js → DismissibleChips.stories-D8vGzcJU.js} +17 -6
- package/dist/assets/{Divider.stories-CMbQ5L3q.js → Divider.stories-r49aSANX.js} +1 -1
- package/dist/assets/{DocsRenderer-LL677BLK-D6wCD5Bw.js → DocsRenderer-LL677BLK-DZVr0WqC.js} +1 -1
- package/dist/assets/DropdownMenu-DJWxVTCB.js +142 -0
- package/dist/assets/{DropdownMenu.stories-DC585dGe.js → DropdownMenu.stories-CejSoUQc.js} +1 -1
- package/dist/assets/{FieldButton-DjbyU7Ud.js → FieldButton-SkKd22gq.js} +1 -1
- package/dist/assets/{FieldButton.stories-mgMXy6g8.js → FieldButton.stories-CeUnTuE8.js} +1 -1
- package/dist/assets/{FormControl-DX3yRMc2.css → FormControl-C_byGyqD.css} +1 -1
- package/dist/assets/{FormControl-N0zmQNS2.js → FormControl-DoNLVcw2.js} +1 -1
- package/dist/assets/{FormControl.stories-B8Ne0MLq.js → FormControl.stories-CM0O-z49.js} +4 -4
- package/dist/assets/{Heading-Bmekm9VQ.js → Heading-B3jb_-J8.js} +1 -1
- package/dist/assets/{Heading.stories-Bkr_umIZ.js → Heading.stories-DjrU1PaC.js} +1 -1
- package/dist/assets/{Icon-DwVTLcDP.js → Icon-Dqr2b6tP.js} +1 -1
- package/dist/assets/{Icon-RSC-Dn9e0iAh.js → Icon-RSC-CIkzpnfO.js} +1 -1
- package/dist/assets/{Icon.stories-D9JEL0Hx.js → Icon.stories-1leYoSZM.js} +1 -1
- package/dist/assets/IconButton-CQGXuX8O.js +9 -0
- package/dist/assets/{IconTile.stories-B5GBHpUh.js → IconTile.stories-C3MYzhR1.js} +1 -1
- package/dist/assets/Input-D6_jI5Uh.js +3 -0
- package/dist/assets/{IntegrationWithReactHookForm.stories-CCDlaJxi.js → IntegrationWithReactHookForm.stories-7-TsLOR4.js} +1 -1
- package/dist/assets/IntlFormattedAggregatedDateTime-Ai802ecy.js +1 -0
- package/dist/assets/IntlFormattedCurrency-DUrW8wq9.js +1 -0
- package/dist/assets/{IntlFormattedCurrency.stories-BuMkiJd6.js → IntlFormattedCurrency.stories-C_afrVTI.js} +1 -1
- package/dist/assets/{IntlFormattedDateTime.stories-DMN58d8q.js → IntlFormattedDateTime.stories-DAllZCk9.js} +1 -1
- package/dist/assets/IntlFormattedTime-BOUEN1XF.js +2 -0
- package/dist/assets/{LayoutFlex-CEr_Bd5T.js → LayoutFlex-BlWwmFhv.js} +1 -1
- package/dist/assets/{LayoutFlexItem-DCUGpEDU.js → LayoutFlexItem-Ck-D8viJ.js} +1 -1
- package/dist/assets/{LayoutGrid-DCLStsDr.js → LayoutGrid-BCMSACUf.js} +1 -1
- package/dist/assets/{LayoutGrid.stories-DaY7nZ2z.js → LayoutGrid.stories-Dg8aAm6_.js} +1 -1
- package/dist/assets/{LayoutGridItem-BRLJDeYd.js → LayoutGridItem-BbJwYcHo.js} +1 -1
- package/dist/assets/Link-Cu3kBnvE.css +1 -0
- package/dist/assets/Link-DbeaGxmu.js +5 -0
- package/dist/assets/{Link.stories-kXGLhYoc.js → Link.stories-HNRLDW5Y.js} +43 -15
- package/dist/assets/{Loader-qd0Q5Uz_.js → Loader-raMoSfHx.js} +1 -1
- package/dist/assets/{Loader.stories-m379tb7j.js → Loader.stories-7tG1NS7B.js} +1 -1
- package/dist/assets/MultiSelectChips-Bs8MJsJe.js +2 -0
- package/dist/assets/{MultiSelectChips.stories-DfyHnHHY.js → MultiSelectChips.stories-0xhNcMZn.js} +27 -8
- package/dist/assets/NativeSelectField.stories-D27xdDZT.js +249 -0
- package/dist/assets/NumberField-WzHWHpwG.js +6 -0
- package/dist/assets/{NumberField.stories-BUxd-7gq.js → NumberField.stories-CKWwzkFc.js} +1 -1
- package/dist/assets/{ObserveIntersection-ClJrn-sk.js → ObserveIntersection-zL3YLMv6.js} +1 -1
- package/dist/assets/{ObserveIntersection.stories-CisY8E_w.js → ObserveIntersection.stories-BXlW-mL4.js} +1 -1
- package/dist/assets/{OnboardingTooltip-DkrwDHv3.js → OnboardingTooltip-BzkMbW-Q.js} +3 -3
- package/dist/assets/{OnboardingTooltip.stories-DDVYxEt5.js → OnboardingTooltip.stories-DpuZirIf.js} +1 -1
- package/dist/assets/{OnboardingTooltip.tests.stories-BVUaM-wO.js → OnboardingTooltip.tests.stories-DVqN90Ec.js} +1 -1
- package/dist/assets/{OnboardingTour-CGa-836f.js → OnboardingTour-Ba_vMjzP.js} +1 -1
- package/dist/assets/{OnboardingTour.stories-yLGZ0dlp.js → OnboardingTour.stories-CU5yOTSQ.js} +1 -1
- package/dist/assets/{OnboardingTour.tests.stories-DxxzBEuR.js → OnboardingTour.tests.stories-CPyK1i_w.js} +1 -1
- package/dist/assets/PasswordField-D3gN_VbU.js +6 -0
- package/dist/assets/{PasswordField.stories-CBcIKnYx.js → PasswordField.stories-B_DbiPEY.js} +1 -1
- package/dist/assets/{PreplyLogo-BzNZ8wpS.js → PreplyLogo-EsNyTV4m.js} +2 -2
- package/dist/assets/{PreplyLogo.stories-8kPZdvbV.js → PreplyLogo.stories-Bm6-o3h8.js} +10 -2
- package/dist/assets/{ProgressBar.stories-BD3OKmoy.js → ProgressBar.stories-BVBwLJ_h.js} +1 -1
- package/dist/assets/{ProgressSteps.stories-Bb7wnDFB.js → ProgressSteps.stories-DpVfrFPk.js} +1 -1
- package/dist/assets/{PromoDialog-Bx4wrVnI.js → PromoDialog-BpgSaMl7.js} +1 -1
- package/dist/assets/{RangeSlider-gznGiBxe.js → RangeSlider-CQsn2ggM.js} +2 -2
- package/dist/assets/{RangeSlider.stories-Bj82Tme8.js → RangeSlider.stories-B16rODmY.js} +1 -1
- package/dist/assets/{Rating-CDQpKKfm.js → Rating-CAaFjEvZ.js} +1 -1
- package/dist/assets/{Rating.stories-440yo9nU.js → Rating.stories-8F2e8UDj.js} +1 -1
- package/dist/assets/{RatingInput-S42sTjma.js → RatingInput-BNKHainW.js} +2 -2
- package/dist/assets/{RatingInput.stories-BJ91kNqc.js → RatingInput.stories-D07FYTPA.js} +20 -6
- package/dist/assets/SelectField-CtnC30IK.js +7 -0
- package/dist/assets/{SelectField-C9fy_QpQ.css → SelectField-hr5YRqjg.css} +1 -1
- package/dist/assets/{SelectField.stories-CDA-sJca.js → SelectField.stories-cV1joVTk.js} +1 -1
- package/dist/assets/{ShowOnIntersection-BIc8Ks2O.js → ShowOnIntersection-hAmOOTIR.js} +2 -2
- package/dist/assets/{ShowOnIntersection.stories-COT8LZNV.js → ShowOnIntersection.stories-VS4hG4Et.js} +1 -1
- package/dist/assets/SingleSelectChips-lT5C7a2D.js +2 -0
- package/dist/assets/{SingleSelectChips.stories-D96yFWLY.js → SingleSelectChips.stories-Du0LL0gN.js} +27 -8
- package/dist/assets/{Slider-cjoP1Fs6.js → Slider-BgB4xT6m.js} +2 -2
- package/dist/assets/{Slider.stories-zcp8qoUB.js → Slider.stories-B0uFs4_2.js} +1 -1
- package/dist/assets/{Spinner-DGdYqKak.js → Spinner-B-14zfoF.js} +1 -1
- package/dist/assets/{Stars-C54j1o92.js → Stars-BU2A8ygV.js} +1 -1
- package/dist/assets/{Stars-DRmASRCW.css → Stars-BqHYDCKx.css} +1 -1
- package/dist/assets/{Steps-B9DWysMC.js → Steps-Ny6Xdpfg.js} +1 -1
- package/dist/assets/{Steps.stories-_6S1E6ef.js → Steps.stories-y16vX2RP.js} +1 -1
- package/dist/assets/{Switch-CpclSBFz.js → Switch-DyKTsO1c.js} +1 -1
- package/dist/assets/{Switch.stories-BJ_jGNoM.js → Switch.stories-D0M0AXLP.js} +1 -1
- package/dist/assets/{Text-B288uCKD.js → Text-Cy08WP3t.js} +1 -1
- package/dist/assets/{Text.stories-C8gR83BJ.js → Text.stories-kbD1oPtH.js} +1 -1
- package/dist/assets/TextField-DtzGGo-n.js +6 -0
- package/dist/assets/{TextField.stories-kWIuQbVk.js → TextField.stories-BfnbdAlj.js} +1 -1
- package/dist/assets/{TextHighlighted-D0RJV5JS.js → TextHighlighted-BLFuNeOz.js} +1 -1
- package/dist/assets/{TextHighlighted.stories-3U6i5jBR.js → TextHighlighted.stories--iY-wUQl.js} +1 -1
- package/dist/assets/{TextInline-CKVi4m4-.js → TextInline-kNMy4GiU.js} +1 -1
- package/dist/assets/{TextInline.stories-BOaBqgcv.js → TextInline.stories-B4fTBAXp.js} +1 -1
- package/dist/assets/TextareaField-BAawMK2x.js +6 -0
- package/dist/assets/{TextareaField.stories-d5yoJlrM.js → TextareaField.stories-uB9XCMh4.js} +1 -1
- package/dist/assets/{Toast-IjHsw63R.js → Toast-DtwiCXf7.js} +1 -1
- package/dist/assets/{Toast.stories-1KDAj2_0.js → Toast.stories-DaMiazCZ.js} +1 -1
- package/dist/assets/{Tooltip-DGa6B2Md.js → Tooltip-BKkZoXDV.js} +2 -2
- package/dist/assets/Tooltip.stories-wUZg70QA.js +91 -0
- package/dist/assets/{Tooltip.tests.stories-CRehoOBJ.js → Tooltip.tests.stories-CJYW12Q0.js} +1 -1
- package/dist/assets/{ai-integration-Cs38H8gd.js → ai-integration-CmKZr_5q.js} +1 -1
- package/dist/assets/{breakpoints-CvEPhO_a.js → breakpoints-BL8wVg74.js} +1 -1
- package/dist/assets/{breakpoints-QD8InWGt.js → breakpoints-BSvP6IHz.js} +1 -1
- package/dist/assets/{breakpoints-CdgVhtfb.js → breakpoints-vEwFHkjC.js} +1 -1
- package/dist/assets/{changelog-DF2IN9rv.js → changelog-wnfuTaGI.js} +37 -1
- package/dist/assets/{constants-DZ53IKPx.js → constants-BRk8fyp8.js} +7 -11
- package/dist/assets/createRequiredContext-BQNdOBzE.js +11 -0
- package/dist/assets/{createRequiredContext-rvejDfGq.css → createRequiredContext-Dp6R3H4g.css} +1 -1
- package/dist/assets/{dist-C0mWr2n-.css → dist-CKzY_Ph_.css} +1 -1
- package/dist/assets/{dist-Czl5bXKQ.js → dist-dJR9l15z.js} +1 -1
- package/dist/assets/{esm-CwnA5ofl.js → esm-QYJ12Nr4.js} +1 -1
- package/dist/assets/{fonts-explorer.stories-qeCxz5m7.js → fonts-explorer.stories-DLPdV7wh.js} +1 -1
- package/dist/assets/{getTokenVar-B1giJATd.js → getTokenVar-lvBbQceM.js} +1 -1
- package/dist/assets/{gradientBorders-Cm8R3nbh.js → gradientBorders-DODVBPY0.js} +1 -1
- package/dist/assets/{hover-_bHqheK2.js → hover-Cc8ZlfuU.js} +1 -1
- package/dist/assets/{hover-BDYlYavU.js → hover-DgEYlXBi.js} +1 -1
- package/dist/assets/{hover-CvX1r1hU.js → hover-yxmGi-zx.js} +1 -1
- package/dist/assets/{iframe-Ddp8AsMq.js → iframe-BuOXI2w6.js} +196 -196
- package/dist/assets/{intro-BzGH4Z_0.js → intro-B-CaE2_E.js} +1 -1
- package/dist/assets/{layout-relative-DXMXPMmM.js → layout-relative-BOsTfett.js} +1 -1
- package/dist/assets/{migrating-from-less-C2EXSVYH.js → migrating-from-less-ClH17s_P.js} +1 -1
- package/dist/assets/{styled-components.browser.esm-48-sXnz9.js → styled-components.browser.esm-BF2I7YPU.js} +1 -1
- package/dist/assets/{styled-components.browser.esm-qDVQO-j_.js → styled-components.browser.esm-C-pLV-H4.js} +1 -1
- package/dist/assets/{tokens-BCTbazjg.js → tokens-BF6xltNI.js} +1 -1
- package/dist/assets/{tokens-Be7KYpgq.js → tokens-DLKIEc5T.js} +1 -1
- package/dist/assets/{tokens-CuiP8hOR.js → tokens-DOxuMF98.js} +1 -1
- package/dist/assets/{useControllableState-DQx2v_AU.js → useControllableState-B6dCOM10.js} +1 -1
- package/dist/assets/{usePortalElement-D7u5urLa.js → usePortalElement-Cqy1sSsS.js} +1 -1
- package/dist/assets/{welcome-Cj1ZSZQe.js → welcome-CA82uuQ9.js} +1 -1
- package/dist/assets/{zeroheight-d0Ov-C_Q.js → zeroheight-BZmC6gtY.js} +1 -1
- package/dist/iframe.html +1 -1
- package/dist/index.html +6 -2
- package/dist/index.json +1 -1
- package/dist/preview-stats.json +14603 -14540
- package/dist/project.json +1 -1
- package/dist/sb-addons/pseudo-states-6/manager-bundle.js +3 -0
- package/package.json +6 -5
- package/pages/30.guides/70.assets/components/IllustrationsList.tsx +1 -0
- package/pages/30.guides/70.assets/constants/icon-imports.ts +4 -0
- package/dist/assets/10.Combinations.stories-CJFPYaPG.js +0 -128
- package/dist/assets/30.icons.explorer-J8Rr_F6c.js +0 -72
- package/dist/assets/Accordion-BVDqu0gO.js +0 -25
- package/dist/assets/Accordion-bbEcwV1l.css +0 -1
- package/dist/assets/AlertBannerAction-Ul2Z9Ycf.js +0 -216
- package/dist/assets/CalloutBannerText-DJ3eTwo4.js +0 -75
- package/dist/assets/Checkbox-Bchk1blw.js +0 -10
- package/dist/assets/CountryFlag-Coh5YEUl.js +0 -49
- package/dist/assets/DialogActions-BbTn22Uy.js +0 -101
- package/dist/assets/DialogCloseButton-CMOrMiok.js +0 -149
- package/dist/assets/DismissibleChips-Dc4tbb9S.js +0 -1
- package/dist/assets/DropdownMenu-C_t43Tvd.js +0 -1258
- package/dist/assets/IconButton-D218WESp.js +0 -8
- package/dist/assets/Input-XupGAuRo.js +0 -95
- package/dist/assets/IntlFormattedAggregatedDateTime-9V1gJxcg.js +0 -379
- package/dist/assets/IntlFormattedCurrency-loMkSk5h.js +0 -505
- package/dist/assets/IntlFormattedTime-DykXrEe3.js +0 -2900
- package/dist/assets/Link-D75aReRI.js +0 -5
- package/dist/assets/Link-DZ7eineG.css +0 -1
- package/dist/assets/MultiSelectChips-HRY_a-9f.js +0 -2
- package/dist/assets/NativeSelectField.stories-DFN4NN7z.js +0 -295
- package/dist/assets/NumberField-BmPC7HUo.js +0 -6
- package/dist/assets/PasswordField-DSRq_bhg.js +0 -6
- package/dist/assets/SelectField-u1424VWi.js +0 -19
- package/dist/assets/SingleSelectChips-BOJ8NDnY.js +0 -2
- package/dist/assets/TextField-Ch_1Y9U9.js +0 -6
- package/dist/assets/TextareaField-FzIH0QHs.js +0 -6
- package/dist/assets/Tooltip.stories-BG331mYm.js +0 -93
- package/dist/assets/createRequiredContext-CfIj7m5a.js +0 -241
- /package/dist/assets/{Avatar-C37O_UDH.js → Avatar-D6oXWjq1.js} +0 -0
- /package/dist/assets/{Divider-By80O4iG.js → Divider-Nv1279vj.js} +0 -0
- /package/dist/assets/{InputContainer-DSGASCBR.js → InputContainer-xfDpQQNl.js} +0 -0
- /package/dist/assets/{ProgressBar-Crf4SgkT.js → ProgressBar-CRitEeQk.js} +0 -0
- /package/dist/assets/{ProgressSteps-Cl7OdN1S.js → ProgressSteps-B2AXEKFJ.js} +0 -0
- /package/dist/assets/{TokyoUIAvailability7LateNight-BKvXBfeB.js → TokyoUIAvailability7LateNight-Bho17X1G.js} +0 -0
- /package/dist/assets/{TokyoUICheck-DAIMkBqJ.js → TokyoUICheck-BxTDosuA.js} +0 -0
- /package/dist/assets/{TokyoUICheckmark-FfHUfu5K.js → TokyoUICheckmark-BgAaFb6V.js} +0 -0
- /package/dist/assets/{TokyoUIChevronRight-DWF5Wc42.js → TokyoUIChevronRight-C__gngF1.js} +0 -0
- /package/dist/assets/{TokyoUIEmojiFrowning-CyL90GhY.js → TokyoUIEmojiFrowning-rSnD4TX2.js} +0 -0
- /package/dist/assets/{TokyoUIErrorWarning-aLVlh8HS.js → TokyoUIErrorWarning-BH93ehx8.js} +0 -0
- /package/dist/assets/{TokyoUIEye-DPcSixPI.js → TokyoUIEye-B3okJSKv.js} +0 -0
- /package/dist/assets/{TokyoUIFav-CdvVuNHN.js → TokyoUIFav-B1g1wYYK.js} +0 -0
- /package/dist/assets/{TokyoUIInfo-BTRd4tvr.js → TokyoUIInfo-CL0Zo7ru.js} +0 -0
- /package/dist/assets/{TokyoUIMessages-DiuUQ-OO.js → TokyoUIMessages-BO3EETWj.js} +0 -0
- /package/dist/assets/{TokyoUISparkle-Ckr14xJ9.js → TokyoUISparkle-5ta_MRge.js} +0 -0
- /package/dist/assets/{TokyoUIStarFilled-BKIQgn1I.js → TokyoUIStarFilled-DiQeedTx.js} +0 -0
- /package/dist/assets/{TokyoUITag-BmP85Jya.js → TokyoUITag-C8mbO1a7.js} +0 -0
- /package/dist/assets/{VisuallyHidden-DjFrTdW3.js → VisuallyHidden-CpMYtDeS.js} +0 -0
- /package/dist/assets/{align-self-CArWUz5E.js → align-self-DPOkDP3u.js} +0 -0
- /package/dist/assets/{emotion-unitless.esm-CznjPqRE.js → emotion-unitless.esm-DCJ5qRdW.js} +0 -0
- /package/dist/assets/{layout-relative.module-BMQDPKP6.js → layout-relative.module-C0ke0xP4.js} +0 -0
- /package/dist/assets/{storybook-utils-Dnw8-7zP.js → storybook-utils-BfrlMSeG.js} +0 -0
- /package/dist/assets/{useBreakpointMatch-D4lYvPbF.js → useBreakpointMatch-CmOkxQJ1.js} +0 -0
- /package/dist/assets/{useStableCallback-DRmyBaAs.js → useStableCallback-BRGKkp0I.js} +0 -0
- /package/dist/sb-addons/{storybook-6 → storybook-7}/manager-bundle.js +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{b as r,ht as i,pt as a,t as o,w as s,x as c,y as l}from"./dist-DtfJeYQK.js";import{t as u}from"./jsx-runtime-C2wGStra.js";import{n as d,t as f}from"./dist-Cc1j9Pjk.js";import{n as p,t as m}from"./filterAttributesPassedByRadixUIAtRuntime-CGiuUnR2.js";import{a as h,c as g,o as _,s as v}from"./layout-relative.module-BMQDPKP6.js";import{i as y,n as b,r as x,t as S}from"./layout-relative-DXMXPMmM.js";var C,w,T=t((()=>{C=`LayoutGrid__SRDdo`,w={LayoutGrid:C,"LayoutGrid--justify-content-center":`LayoutGrid--justify-content-center__vI9m1`,"LayoutGrid--justify-content-start":`LayoutGrid--justify-content-start__oyqGC`,"LayoutGrid--justify-content-end":`LayoutGrid--justify-content-end__RMTO2`,"LayoutGrid--justify-content-space-between":`LayoutGrid--justify-content-space-between__lvZnD`,"LayoutGrid--justify-content-space-around":`LayoutGrid--justify-content-space-around__Tl4FE`,"LayoutGrid--justify-content-space-evenly":`LayoutGrid--justify-content-space-evenly__KzBOQ`,"LayoutGrid--narrow-l--justify-content-center":`LayoutGrid--narrow-l--justify-content-center__nQPPi`,"LayoutGrid--narrow-l--justify-content-start":`LayoutGrid--narrow-l--justify-content-start__K7PbL`,"LayoutGrid--narrow-l--justify-content-end":`LayoutGrid--narrow-l--justify-content-end__UHZNO`,"LayoutGrid--narrow-l--justify-content-space-between":`LayoutGrid--narrow-l--justify-content-space-between__hgFor`,"LayoutGrid--narrow-l--justify-content-space-around":`LayoutGrid--narrow-l--justify-content-space-around__Ec1Tu`,"LayoutGrid--narrow-l--justify-content-space-evenly":`LayoutGrid--narrow-l--justify-content-space-evenly__TjQzB`,"LayoutGrid--medium-s--justify-content-center":`LayoutGrid--medium-s--justify-content-center__2xRJU`,"LayoutGrid--medium-s--justify-content-start":`LayoutGrid--medium-s--justify-content-start__5YYfG`,"LayoutGrid--medium-s--justify-content-end":`LayoutGrid--medium-s--justify-content-end__tNaVV`,"LayoutGrid--medium-s--justify-content-space-between":`LayoutGrid--medium-s--justify-content-space-between__Yw2DU`,"LayoutGrid--medium-s--justify-content-space-around":`LayoutGrid--medium-s--justify-content-space-around__GzjIX`,"LayoutGrid--medium-s--justify-content-space-evenly":`LayoutGrid--medium-s--justify-content-space-evenly__wtV7Y`,"LayoutGrid--medium-l--justify-content-center":`LayoutGrid--medium-l--justify-content-center__6Z3HK`,"LayoutGrid--medium-l--justify-content-start":`LayoutGrid--medium-l--justify-content-start__eCE0H`,"LayoutGrid--medium-l--justify-content-end":`LayoutGrid--medium-l--justify-content-end__WUHhq`,"LayoutGrid--medium-l--justify-content-space-between":`LayoutGrid--medium-l--justify-content-space-between__dzn5s`,"LayoutGrid--medium-l--justify-content-space-around":`LayoutGrid--medium-l--justify-content-space-around__1jJy-`,"LayoutGrid--medium-l--justify-content-space-evenly":`LayoutGrid--medium-l--justify-content-space-evenly__SALxb`,"LayoutGrid--wide-s--justify-content-center":`LayoutGrid--wide-s--justify-content-center__O2AmA`,"LayoutGrid--wide-s--justify-content-start":`LayoutGrid--wide-s--justify-content-start__M128c`,"LayoutGrid--wide-s--justify-content-end":`LayoutGrid--wide-s--justify-content-end__Edf7b`,"LayoutGrid--wide-s--justify-content-space-between":`LayoutGrid--wide-s--justify-content-space-between__sCWUj`,"LayoutGrid--wide-s--justify-content-space-around":`LayoutGrid--wide-s--justify-content-space-around__OqKb-`,"LayoutGrid--wide-s--justify-content-space-evenly":`LayoutGrid--wide-s--justify-content-space-evenly__BqAco`,"LayoutGrid--wide-l--justify-content-center":`LayoutGrid--wide-l--justify-content-center__WT24m`,"LayoutGrid--wide-l--justify-content-start":`LayoutGrid--wide-l--justify-content-start__pavdA`,"LayoutGrid--wide-l--justify-content-end":`LayoutGrid--wide-l--justify-content-end__US-V2`,"LayoutGrid--wide-l--justify-content-space-between":`LayoutGrid--wide-l--justify-content-space-between__31Ivo`,"LayoutGrid--wide-l--justify-content-space-around":`LayoutGrid--wide-l--justify-content-space-around__sbmBA`,"LayoutGrid--wide-l--justify-content-space-evenly":`LayoutGrid--wide-l--justify-content-space-evenly__VBy-1`,"LayoutGrid--align-items-center":`LayoutGrid--align-items-center__cAn-E`,"LayoutGrid--align-items-start":`LayoutGrid--align-items-start__iIBPs`,"LayoutGrid--align-items-end":`LayoutGrid--align-items-end__bi0Vt`,"LayoutGrid--align-items-stretch":`LayoutGrid--align-items-stretch__vyo1N`,"LayoutGrid--align-items-baseline":`LayoutGrid--align-items-baseline__iWU1b`,"LayoutGrid--narrow-l--align-items-center":`LayoutGrid--narrow-l--align-items-center__L5fan`,"LayoutGrid--narrow-l--align-items-start":`LayoutGrid--narrow-l--align-items-start__EZBkc`,"LayoutGrid--narrow-l--align-items-end":`LayoutGrid--narrow-l--align-items-end__igLCn`,"LayoutGrid--narrow-l--align-items-stretch":`LayoutGrid--narrow-l--align-items-stretch__jsoOx`,"LayoutGrid--narrow-l--align-items-baseline":`LayoutGrid--narrow-l--align-items-baseline__HJvGK`,"LayoutGrid--medium-s--align-items-center":`LayoutGrid--medium-s--align-items-center__YHCsG`,"LayoutGrid--medium-s--align-items-start":`LayoutGrid--medium-s--align-items-start__-x5jL`,"LayoutGrid--medium-s--align-items-end":`LayoutGrid--medium-s--align-items-end__5vxaA`,"LayoutGrid--medium-s--align-items-stretch":`LayoutGrid--medium-s--align-items-stretch__Oo3Jn`,"LayoutGrid--medium-s--align-items-baseline":`LayoutGrid--medium-s--align-items-baseline__N5jnU`,"LayoutGrid--medium-l--align-items-center":`LayoutGrid--medium-l--align-items-center__sOLNh`,"LayoutGrid--medium-l--align-items-start":`LayoutGrid--medium-l--align-items-start__LlPIM`,"LayoutGrid--medium-l--align-items-end":`LayoutGrid--medium-l--align-items-end__kMMCT`,"LayoutGrid--medium-l--align-items-stretch":`LayoutGrid--medium-l--align-items-stretch__R0zx-`,"LayoutGrid--medium-l--align-items-baseline":`LayoutGrid--medium-l--align-items-baseline__EaOdU`,"LayoutGrid--wide-s--align-items-center":`LayoutGrid--wide-s--align-items-center__Ve-ZD`,"LayoutGrid--wide-s--align-items-start":`LayoutGrid--wide-s--align-items-start__28Z74`,"LayoutGrid--wide-s--align-items-end":`LayoutGrid--wide-s--align-items-end__TDXOu`,"LayoutGrid--wide-s--align-items-stretch":`LayoutGrid--wide-s--align-items-stretch__nHuLT`,"LayoutGrid--wide-s--align-items-baseline":`LayoutGrid--wide-s--align-items-baseline__pnhzS`,"LayoutGrid--wide-l--align-items-center":`LayoutGrid--wide-l--align-items-center__JTXQd`,"LayoutGrid--wide-l--align-items-start":`LayoutGrid--wide-l--align-items-start__Ghu5o`,"LayoutGrid--wide-l--align-items-end":`LayoutGrid--wide-l--align-items-end__6ReFW`,"LayoutGrid--wide-l--align-items-stretch":`LayoutGrid--wide-l--align-items-stretch__O0QQv`,"LayoutGrid--wide-l--align-items-baseline":`LayoutGrid--wide-l--align-items-baseline__sQjwX`,"LayoutGrid--justify-items-stretch":`LayoutGrid--justify-items-stretch__M9QcQ`,"LayoutGrid--justify-items-center":`LayoutGrid--justify-items-center__oTKUc`,"LayoutGrid--justify-items-start":`LayoutGrid--justify-items-start__VYPnF`,"LayoutGrid--justify-items-end":`LayoutGrid--justify-items-end__8CwwZ`,"LayoutGrid--narrow-l--justify-items-stretch":`LayoutGrid--narrow-l--justify-items-stretch__kvCGG`,"LayoutGrid--narrow-l--justify-items-center":`LayoutGrid--narrow-l--justify-items-center__3ItXk`,"LayoutGrid--narrow-l--justify-items-start":`LayoutGrid--narrow-l--justify-items-start__Bhi3s`,"LayoutGrid--narrow-l--justify-items-end":`LayoutGrid--narrow-l--justify-items-end__gc2Ku`,"LayoutGrid--medium-s--justify-items-stretch":`LayoutGrid--medium-s--justify-items-stretch__tuwxD`,"LayoutGrid--medium-s--justify-items-center":`LayoutGrid--medium-s--justify-items-center__atoXy`,"LayoutGrid--medium-s--justify-items-start":`LayoutGrid--medium-s--justify-items-start__TmFN1`,"LayoutGrid--medium-s--justify-items-end":`LayoutGrid--medium-s--justify-items-end__jfl4-`,"LayoutGrid--medium-l--justify-items-stretch":`LayoutGrid--medium-l--justify-items-stretch__H23wm`,"LayoutGrid--medium-l--justify-items-center":`LayoutGrid--medium-l--justify-items-center__U-RzH`,"LayoutGrid--medium-l--justify-items-start":`LayoutGrid--medium-l--justify-items-start__0UVBd`,"LayoutGrid--medium-l--justify-items-end":`LayoutGrid--medium-l--justify-items-end__GDL0T`,"LayoutGrid--wide-s--justify-items-stretch":`LayoutGrid--wide-s--justify-items-stretch__3eMVC`,"LayoutGrid--wide-s--justify-items-center":`LayoutGrid--wide-s--justify-items-center__i7AtD`,"LayoutGrid--wide-s--justify-items-start":`LayoutGrid--wide-s--justify-items-start__O80gc`,"LayoutGrid--wide-s--justify-items-end":`LayoutGrid--wide-s--justify-items-end__IleZr`,"LayoutGrid--wide-l--justify-items-stretch":`LayoutGrid--wide-l--justify-items-stretch__P8KTm`,"LayoutGrid--wide-l--justify-items-center":`LayoutGrid--wide-l--justify-items-center__sXqXH`,"LayoutGrid--wide-l--justify-items-start":`LayoutGrid--wide-l--justify-items-start__QngDX`,"LayoutGrid--wide-l--justify-items-end":`LayoutGrid--wide-l--justify-items-end__wa8k8`,"LayoutGrid--columns":`LayoutGrid--columns__rVisq`,"LayoutGrid--columns-narrow-l":`LayoutGrid--columns-narrow-l__UBDfA`,"LayoutGrid--columns-medium-s":`LayoutGrid--columns-medium-s__lzA5l`,"LayoutGrid--columns-medium-l":`LayoutGrid--columns-medium-l__CM0CJ`,"LayoutGrid--columns-wide-s":`LayoutGrid--columns-wide-s__RUz4B`,"LayoutGrid--columns-wide-l":`LayoutGrid--columns-wide-l__qXJC-`}})),E,D,O,k,A,j=t((()=>{s(),o(),T(),E=`LayoutGrid`,D=Object.keys(a),O=e=>typeof e==`number`?`repeat(${e}, 1fr)`:e.join(` `),k=e=>typeof e==`object`&&!Array.isArray(e)?Object.entries(e).reduce((e,[t,n])=>({...e,...n?{[t]:O(n)}:{}}),{_:O(e._)}):{_:O(e)},A=e=>{if(!e)return{classNames:[],style:{}};let t=k(e),n=D.filter(e=>t[e]);return{classNames:r(w,E,[`columns`,...n.map(e=>`columns-${e}`)]),style:n.reduce((e,n)=>({...e,[`--columns-${n}`]:t[n]}),{"--columns":t._})}}})),M,N,P=t((()=>{o(),h(),M=`LayoutGap`,N=e=>l(_,M,[c(`gap`,e)])})),F,I,L=t((()=>{s(),o(),P(),y(),g(),b(),T(),F=`LayoutGrid`,I=(e,t)=>{let{gap:n=`0`,padding:r=`0`,justifyContent:i,alignItems:a,justifyItems:o,hide:s,relative:u}=t||{};if(e!==`grid`)return[];let d=l(w,F,[c(`justify-content`,i),c(`align-items`,a),c(`justify-items`,o)]),f=N(n),p=v(r),m=x(s,`grid`),h=S(u);return[...d,...f,...p,...m,...h]}})),R,z,B,V=t((()=>{s(),f(),o(),R=e(n(),1),j(),L(),p(),z=u(),B=(0,R.forwardRef)(function({dataset:e,children:t,...n},r){let{tag:a=`div`,columns:o}=n,s=I(`grid`,n),{style:c,classNames:l}=A(o),u=[...s,...l];return(0,z.jsx)(a,{...m(n),ref:r,className:u.join(` `),style:c,...i(e,{preplyDsComponent:d.LayoutGrid}),children:t})});try{B.displayName=`LayoutGrid`,B.__docgenInfo={description:"A CSS `grid` wrapper.",displayName:`LayoutGrid`,props:{gap:{defaultValue:null,description:``,name:`gap`,required:!1,type:{name:`enum`,value:[{value:`"0"`},{value:`"1"`},{value:`"2"`},{value:`"4"`},{value:`"6"`},{value:`"8"`},{value:`"12"`},{value:`"16"`},{value:`"20"`},{value:`"24"`},{value:`"32"`},{value:`"48"`},{value:`"64"`},{value:`"96"`},{value:`"160"`},{value:`ResponsiveProp<LayoutGap>`}]}},padding:{defaultValue:null,description:``,name:`padding`,required:!1,type:{name:`enum`,value:[{value:`"0"`},{value:`"1"`},{value:`"2"`},{value:`"4"`},{value:`"6"`},{value:`"8"`},{value:`"12"`},{value:`"16"`},{value:`"20"`},{value:`"24"`},{value:`"32"`},{value:`"48"`},{value:`"64"`},{value:`"96"`},{value:`"160"`},{value:`[LayoutPadding, LayoutPadding]`},{value:`[LayoutPadding, LayoutPadding, LayoutPadding]`},{value:`[LayoutPadding, LayoutPadding, LayoutPadding, LayoutPadding]`},{value:`ResponsiveProp<ShortHand<LayoutPadding>>`}]}},columns:{defaultValue:null,description:``,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:`"tr"`},{value:`"th"`},{value:`"div"`},{value:`"table"`},{value:`"td"`},{value:`"article"`},{value:`"caption"`},{value:`"fieldset"`},{value:`"figcaption"`},{value:`"figure"`},{value:`"footer"`},{value:`"header"`},{value:`"li"`},{value:`"main"`},{value:`"ol"`},{value:`"p"`},{value:`"section"`},{value:`"span"`},{value:`"tbody"`},{value:`"tfoot"`},{value:`"thead"`},{value:`"ul"`}]}},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{}}));export{V as n,B as t};
|
|
1
|
+
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{b as r,ht as i,pt as a,t as o,w as s,x as c,y as l}from"./dist-DtfJeYQK.js";import{t as u}from"./jsx-runtime-C2wGStra.js";import{n as d,t as f}from"./dist-Cc1j9Pjk.js";import{n as p,t as m}from"./filterAttributesPassedByRadixUIAtRuntime-CGiuUnR2.js";import{a as h,c as g,o as _,s as v}from"./layout-relative.module-C0ke0xP4.js";import{i as y,n as b,r as x,t as S}from"./layout-relative-BOsTfett.js";var C,w,T=t((()=>{C=`LayoutGrid__SRDdo`,w={LayoutGrid:C,"LayoutGrid--justify-content-center":`LayoutGrid--justify-content-center__vI9m1`,"LayoutGrid--justify-content-start":`LayoutGrid--justify-content-start__oyqGC`,"LayoutGrid--justify-content-end":`LayoutGrid--justify-content-end__RMTO2`,"LayoutGrid--justify-content-space-between":`LayoutGrid--justify-content-space-between__lvZnD`,"LayoutGrid--justify-content-space-around":`LayoutGrid--justify-content-space-around__Tl4FE`,"LayoutGrid--justify-content-space-evenly":`LayoutGrid--justify-content-space-evenly__KzBOQ`,"LayoutGrid--narrow-l--justify-content-center":`LayoutGrid--narrow-l--justify-content-center__nQPPi`,"LayoutGrid--narrow-l--justify-content-start":`LayoutGrid--narrow-l--justify-content-start__K7PbL`,"LayoutGrid--narrow-l--justify-content-end":`LayoutGrid--narrow-l--justify-content-end__UHZNO`,"LayoutGrid--narrow-l--justify-content-space-between":`LayoutGrid--narrow-l--justify-content-space-between__hgFor`,"LayoutGrid--narrow-l--justify-content-space-around":`LayoutGrid--narrow-l--justify-content-space-around__Ec1Tu`,"LayoutGrid--narrow-l--justify-content-space-evenly":`LayoutGrid--narrow-l--justify-content-space-evenly__TjQzB`,"LayoutGrid--medium-s--justify-content-center":`LayoutGrid--medium-s--justify-content-center__2xRJU`,"LayoutGrid--medium-s--justify-content-start":`LayoutGrid--medium-s--justify-content-start__5YYfG`,"LayoutGrid--medium-s--justify-content-end":`LayoutGrid--medium-s--justify-content-end__tNaVV`,"LayoutGrid--medium-s--justify-content-space-between":`LayoutGrid--medium-s--justify-content-space-between__Yw2DU`,"LayoutGrid--medium-s--justify-content-space-around":`LayoutGrid--medium-s--justify-content-space-around__GzjIX`,"LayoutGrid--medium-s--justify-content-space-evenly":`LayoutGrid--medium-s--justify-content-space-evenly__wtV7Y`,"LayoutGrid--medium-l--justify-content-center":`LayoutGrid--medium-l--justify-content-center__6Z3HK`,"LayoutGrid--medium-l--justify-content-start":`LayoutGrid--medium-l--justify-content-start__eCE0H`,"LayoutGrid--medium-l--justify-content-end":`LayoutGrid--medium-l--justify-content-end__WUHhq`,"LayoutGrid--medium-l--justify-content-space-between":`LayoutGrid--medium-l--justify-content-space-between__dzn5s`,"LayoutGrid--medium-l--justify-content-space-around":`LayoutGrid--medium-l--justify-content-space-around__1jJy-`,"LayoutGrid--medium-l--justify-content-space-evenly":`LayoutGrid--medium-l--justify-content-space-evenly__SALxb`,"LayoutGrid--wide-s--justify-content-center":`LayoutGrid--wide-s--justify-content-center__O2AmA`,"LayoutGrid--wide-s--justify-content-start":`LayoutGrid--wide-s--justify-content-start__M128c`,"LayoutGrid--wide-s--justify-content-end":`LayoutGrid--wide-s--justify-content-end__Edf7b`,"LayoutGrid--wide-s--justify-content-space-between":`LayoutGrid--wide-s--justify-content-space-between__sCWUj`,"LayoutGrid--wide-s--justify-content-space-around":`LayoutGrid--wide-s--justify-content-space-around__OqKb-`,"LayoutGrid--wide-s--justify-content-space-evenly":`LayoutGrid--wide-s--justify-content-space-evenly__BqAco`,"LayoutGrid--wide-l--justify-content-center":`LayoutGrid--wide-l--justify-content-center__WT24m`,"LayoutGrid--wide-l--justify-content-start":`LayoutGrid--wide-l--justify-content-start__pavdA`,"LayoutGrid--wide-l--justify-content-end":`LayoutGrid--wide-l--justify-content-end__US-V2`,"LayoutGrid--wide-l--justify-content-space-between":`LayoutGrid--wide-l--justify-content-space-between__31Ivo`,"LayoutGrid--wide-l--justify-content-space-around":`LayoutGrid--wide-l--justify-content-space-around__sbmBA`,"LayoutGrid--wide-l--justify-content-space-evenly":`LayoutGrid--wide-l--justify-content-space-evenly__VBy-1`,"LayoutGrid--align-items-center":`LayoutGrid--align-items-center__cAn-E`,"LayoutGrid--align-items-start":`LayoutGrid--align-items-start__iIBPs`,"LayoutGrid--align-items-end":`LayoutGrid--align-items-end__bi0Vt`,"LayoutGrid--align-items-stretch":`LayoutGrid--align-items-stretch__vyo1N`,"LayoutGrid--align-items-baseline":`LayoutGrid--align-items-baseline__iWU1b`,"LayoutGrid--narrow-l--align-items-center":`LayoutGrid--narrow-l--align-items-center__L5fan`,"LayoutGrid--narrow-l--align-items-start":`LayoutGrid--narrow-l--align-items-start__EZBkc`,"LayoutGrid--narrow-l--align-items-end":`LayoutGrid--narrow-l--align-items-end__igLCn`,"LayoutGrid--narrow-l--align-items-stretch":`LayoutGrid--narrow-l--align-items-stretch__jsoOx`,"LayoutGrid--narrow-l--align-items-baseline":`LayoutGrid--narrow-l--align-items-baseline__HJvGK`,"LayoutGrid--medium-s--align-items-center":`LayoutGrid--medium-s--align-items-center__YHCsG`,"LayoutGrid--medium-s--align-items-start":`LayoutGrid--medium-s--align-items-start__-x5jL`,"LayoutGrid--medium-s--align-items-end":`LayoutGrid--medium-s--align-items-end__5vxaA`,"LayoutGrid--medium-s--align-items-stretch":`LayoutGrid--medium-s--align-items-stretch__Oo3Jn`,"LayoutGrid--medium-s--align-items-baseline":`LayoutGrid--medium-s--align-items-baseline__N5jnU`,"LayoutGrid--medium-l--align-items-center":`LayoutGrid--medium-l--align-items-center__sOLNh`,"LayoutGrid--medium-l--align-items-start":`LayoutGrid--medium-l--align-items-start__LlPIM`,"LayoutGrid--medium-l--align-items-end":`LayoutGrid--medium-l--align-items-end__kMMCT`,"LayoutGrid--medium-l--align-items-stretch":`LayoutGrid--medium-l--align-items-stretch__R0zx-`,"LayoutGrid--medium-l--align-items-baseline":`LayoutGrid--medium-l--align-items-baseline__EaOdU`,"LayoutGrid--wide-s--align-items-center":`LayoutGrid--wide-s--align-items-center__Ve-ZD`,"LayoutGrid--wide-s--align-items-start":`LayoutGrid--wide-s--align-items-start__28Z74`,"LayoutGrid--wide-s--align-items-end":`LayoutGrid--wide-s--align-items-end__TDXOu`,"LayoutGrid--wide-s--align-items-stretch":`LayoutGrid--wide-s--align-items-stretch__nHuLT`,"LayoutGrid--wide-s--align-items-baseline":`LayoutGrid--wide-s--align-items-baseline__pnhzS`,"LayoutGrid--wide-l--align-items-center":`LayoutGrid--wide-l--align-items-center__JTXQd`,"LayoutGrid--wide-l--align-items-start":`LayoutGrid--wide-l--align-items-start__Ghu5o`,"LayoutGrid--wide-l--align-items-end":`LayoutGrid--wide-l--align-items-end__6ReFW`,"LayoutGrid--wide-l--align-items-stretch":`LayoutGrid--wide-l--align-items-stretch__O0QQv`,"LayoutGrid--wide-l--align-items-baseline":`LayoutGrid--wide-l--align-items-baseline__sQjwX`,"LayoutGrid--justify-items-stretch":`LayoutGrid--justify-items-stretch__M9QcQ`,"LayoutGrid--justify-items-center":`LayoutGrid--justify-items-center__oTKUc`,"LayoutGrid--justify-items-start":`LayoutGrid--justify-items-start__VYPnF`,"LayoutGrid--justify-items-end":`LayoutGrid--justify-items-end__8CwwZ`,"LayoutGrid--narrow-l--justify-items-stretch":`LayoutGrid--narrow-l--justify-items-stretch__kvCGG`,"LayoutGrid--narrow-l--justify-items-center":`LayoutGrid--narrow-l--justify-items-center__3ItXk`,"LayoutGrid--narrow-l--justify-items-start":`LayoutGrid--narrow-l--justify-items-start__Bhi3s`,"LayoutGrid--narrow-l--justify-items-end":`LayoutGrid--narrow-l--justify-items-end__gc2Ku`,"LayoutGrid--medium-s--justify-items-stretch":`LayoutGrid--medium-s--justify-items-stretch__tuwxD`,"LayoutGrid--medium-s--justify-items-center":`LayoutGrid--medium-s--justify-items-center__atoXy`,"LayoutGrid--medium-s--justify-items-start":`LayoutGrid--medium-s--justify-items-start__TmFN1`,"LayoutGrid--medium-s--justify-items-end":`LayoutGrid--medium-s--justify-items-end__jfl4-`,"LayoutGrid--medium-l--justify-items-stretch":`LayoutGrid--medium-l--justify-items-stretch__H23wm`,"LayoutGrid--medium-l--justify-items-center":`LayoutGrid--medium-l--justify-items-center__U-RzH`,"LayoutGrid--medium-l--justify-items-start":`LayoutGrid--medium-l--justify-items-start__0UVBd`,"LayoutGrid--medium-l--justify-items-end":`LayoutGrid--medium-l--justify-items-end__GDL0T`,"LayoutGrid--wide-s--justify-items-stretch":`LayoutGrid--wide-s--justify-items-stretch__3eMVC`,"LayoutGrid--wide-s--justify-items-center":`LayoutGrid--wide-s--justify-items-center__i7AtD`,"LayoutGrid--wide-s--justify-items-start":`LayoutGrid--wide-s--justify-items-start__O80gc`,"LayoutGrid--wide-s--justify-items-end":`LayoutGrid--wide-s--justify-items-end__IleZr`,"LayoutGrid--wide-l--justify-items-stretch":`LayoutGrid--wide-l--justify-items-stretch__P8KTm`,"LayoutGrid--wide-l--justify-items-center":`LayoutGrid--wide-l--justify-items-center__sXqXH`,"LayoutGrid--wide-l--justify-items-start":`LayoutGrid--wide-l--justify-items-start__QngDX`,"LayoutGrid--wide-l--justify-items-end":`LayoutGrid--wide-l--justify-items-end__wa8k8`,"LayoutGrid--columns":`LayoutGrid--columns__rVisq`,"LayoutGrid--columns-narrow-l":`LayoutGrid--columns-narrow-l__UBDfA`,"LayoutGrid--columns-medium-s":`LayoutGrid--columns-medium-s__lzA5l`,"LayoutGrid--columns-medium-l":`LayoutGrid--columns-medium-l__CM0CJ`,"LayoutGrid--columns-wide-s":`LayoutGrid--columns-wide-s__RUz4B`,"LayoutGrid--columns-wide-l":`LayoutGrid--columns-wide-l__qXJC-`}})),E,D,O,k,A,j=t((()=>{s(),o(),T(),E=`LayoutGrid`,D=Object.keys(a),O=e=>typeof e==`number`?`repeat(${e}, 1fr)`:e.join(` `),k=e=>typeof e==`object`&&!Array.isArray(e)?Object.entries(e).reduce((e,[t,n])=>({...e,...n?{[t]:O(n)}:{}}),{_:O(e._)}):{_:O(e)},A=e=>{if(!e)return{classNames:[],style:{}};let t=k(e),n=D.filter(e=>t[e]);return{classNames:r(w,E,[`columns`,...n.map(e=>`columns-${e}`)]),style:n.reduce((e,n)=>({...e,[`--columns-${n}`]:t[n]}),{"--columns":t._})}}})),M,N,P=t((()=>{o(),h(),M=`LayoutGap`,N=e=>l(_,M,[c(`gap`,e)])})),F,I,L=t((()=>{s(),o(),P(),y(),g(),b(),T(),F=`LayoutGrid`,I=(e,t)=>{let{gap:n=`0`,padding:r=`0`,justifyContent:i,alignItems:a,justifyItems:o,hide:s,relative:u}=t||{};if(e!==`grid`)return[];let d=l(w,F,[c(`justify-content`,i),c(`align-items`,a),c(`justify-items`,o)]),f=N(n),p=v(r),m=x(s,`grid`),h=S(u);return[...d,...f,...p,...m,...h]}})),R,z,B,V=t((()=>{s(),f(),o(),R=e(n(),1),j(),L(),p(),z=u(),B=(0,R.forwardRef)(function({dataset:e,children:t,...n},r){let{tag:a=`div`,columns:o}=n,s=I(`grid`,n),{style:c,classNames:l}=A(o),u=[...s,...l];return(0,z.jsx)(a,{...m(n),ref:r,className:u.join(` `),style:c,...i(e,{preplyDsComponent:d.LayoutGrid}),children:t})});try{B.displayName=`LayoutGrid`,B.__docgenInfo={description:"A CSS `grid` wrapper.",displayName:`LayoutGrid`,props:{gap:{defaultValue:null,description:``,name:`gap`,required:!1,type:{name:`enum`,value:[{value:`"0"`},{value:`"1"`},{value:`"2"`},{value:`"4"`},{value:`"6"`},{value:`"8"`},{value:`"12"`},{value:`"16"`},{value:`"20"`},{value:`"24"`},{value:`"32"`},{value:`"48"`},{value:`"64"`},{value:`"96"`},{value:`"160"`},{value:`ResponsiveProp<LayoutGap>`}]}},padding:{defaultValue:null,description:``,name:`padding`,required:!1,type:{name:`enum`,value:[{value:`"0"`},{value:`"1"`},{value:`"2"`},{value:`"4"`},{value:`"6"`},{value:`"8"`},{value:`"12"`},{value:`"16"`},{value:`"20"`},{value:`"24"`},{value:`"32"`},{value:`"48"`},{value:`"64"`},{value:`"96"`},{value:`"160"`},{value:`[LayoutPadding, LayoutPadding]`},{value:`[LayoutPadding, LayoutPadding, LayoutPadding]`},{value:`[LayoutPadding, LayoutPadding, LayoutPadding, LayoutPadding]`},{value:`ResponsiveProp<ShortHand<LayoutPadding>>`}]}},columns:{defaultValue:null,description:``,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:`"article"`},{value:`"caption"`},{value:`"div"`},{value:`"fieldset"`},{value:`"figcaption"`},{value:`"figure"`},{value:`"footer"`},{value:`"header"`},{value:`"li"`},{value:`"main"`},{value:`"ol"`},{value:`"p"`},{value:`"section"`},{value:`"span"`},{value:`"table"`},{value:`"tbody"`},{value:`"td"`},{value:`"tfoot"`},{value:`"th"`},{value:`"thead"`},{value:`"tr"`},{value:`"ul"`}]}},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`}]}}}}}catch{}}));export{V as n,B as t};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./LayoutGrid-
|
|
1
|
+
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./LayoutGrid-BCMSACUf.js";import{n as o,t as s}from"./LayoutGridItem-BbJwYcHo.js";import{n as c,r as l,t as u}from"./storybook-utils-BfrlMSeG.js";var d,f,p,m,h;t((()=>{e(n(),1),o(),i(),u(),d=r(),f={title:`components/LayoutGrid`,component:a,subcomponents:{LayoutGridItem:s},argTypes:{gap:{description:l},padding:{description:c},columns:{description:l},justifyContent:{description:l},alignItems:{description:l},justifyItems:{description:l},hide:{description:l},relative:{description:l}}},p=()=>(0,d.jsxs)(a,{columns:4,alignItems:`start`,gap:`16`,children:[(0,d.jsx)(s,{children:(0,d.jsxs)(`div`,{style:{display:`flex`,flexDirection:`column`,gap:`0.25rem`},children:[(0,d.jsx)(`div`,{style:{height:`2ch`,backgroundColor:`hotpink`}}),(0,d.jsx)(`div`,{style:{height:`2ch`,backgroundColor:`hotpink`}})]})}),(0,d.jsx)(s,{alignSelf:`end`,children:(0,d.jsx)(`div`,{style:{height:`2ch`,backgroundColor:`hotpink`}})}),(0,d.jsx)(`div`,{style:{height:`2ch`,backgroundColor:`hotpink`}}),(0,d.jsx)(`div`,{style:{height:`2ch`,backgroundColor:`hotpink`}})]}),p.storyName=`LayoutGrid`,m={parameters:{chromatic:{disableSnapshot:!0}},args:{gap:`16`,columns:3,alignItems:`start`,children:(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(`div`,{style:{minWidth:`100px`,minHeight:50,backgroundColor:`hotpink`},children:` `}),(0,d.jsx)(`div`,{style:{minWidth:`100px`,minHeight:75,backgroundColor:`hotpink`},children:` `}),(0,d.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}}},p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`() => <LayoutGrid columns={4} alignItems="start" gap="16">
|
|
2
2
|
<LayoutGridItem>
|
|
3
3
|
<div style={{
|
|
4
4
|
display: 'flex',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{ht as r,t as i,w as a,y as o}from"./dist-DtfJeYQK.js";import{t as s}from"./jsx-runtime-C2wGStra.js";import{n as c,t as l}from"./dist-Cc1j9Pjk.js";import{n as u,t as d}from"./filterAttributesPassedByRadixUIAtRuntime-CGiuUnR2.js";import{n as f,t as p}from"./align-self-
|
|
1
|
+
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{ht as r,t as i,w as a,y as o}from"./dist-DtfJeYQK.js";import{t as s}from"./jsx-runtime-C2wGStra.js";import{n as c,t as l}from"./dist-Cc1j9Pjk.js";import{n as u,t as d}from"./filterAttributesPassedByRadixUIAtRuntime-CGiuUnR2.js";import{n as f,t as p}from"./align-self-DPOkDP3u.js";import{i as m,n as h,r as g,t as _}from"./layout-relative-BOsTfett.js";var v,y,b=t((()=>{v=`LayoutGridItem__GF0yx`,y={LayoutGridItem:v}})),x,S,C,w=t((()=>{a(),l(),i(),x=e(n(),1),f(),m(),h(),u(),b(),S=s(),C=(0,x.forwardRef)(function({children:e,alignSelf:t,tag:n,hide:i,relative:a,dataset:s,...l},u){let f=o(y,c.LayoutGridItem,[]),m=p(t),h=g(i),v=_(a),b=[...f,...m,...h,...v];return(0,S.jsx)(n??`div`,{...d(l),ref:u,className:b.join(` `),...r(s,{preplyDsComponent:c.LayoutGridItem}),children:e})});try{C.displayName=`LayoutGridItem`,C.__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:`"article"`},{value:`"caption"`},{value:`"div"`},{value:`"fieldset"`},{value:`"figcaption"`},{value:`"figure"`},{value:`"footer"`},{value:`"header"`},{value:`"li"`},{value:`"main"`},{value:`"ol"`},{value:`"p"`},{value:`"section"`},{value:`"span"`},{value:`"table"`},{value:`"tbody"`},{value:`"td"`},{value:`"tfoot"`},{value:`"th"`},{value:`"thead"`},{value:`"tr"`},{value:`"ul"`}]}},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`}]}}}}}catch{}}));export{w as n,C as t};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.Link__Jw0hc{border-radius:var(--5eeb28);-webkit-text-decoration:var(--f13872);text-decoration:var(--f13872);cursor:pointer;transition:color var(--018058);-webkit-tap-highlight-color:transparent;-ms-touch-action:manipulation;touch-action:manipulation;outline:none;display:inline-block}.Link__Jw0hc:focus-visible{outline-style:solid;outline-color:var(--603ec6);outline-width:var(--99d31f);outline-offset:var(--c0b12c)}.Link--inline__aWJxC{display:inline}.Link--noUnderline__vuCBO{text-decoration:none}.Link__Jw0hc:is(button){font-family:inherit;font-size:inherit;font-weight:inherit;text-align:unset;background:0 0;border:none;margin:0;padding:0}.Link--variant-accentDark__5RCSd{color:var(--c6b68f)}.Link--variant-accentDark__5RCSd:hover{color:var(--65e1ef)}.Link--variant-accentDark__5RCSd:active{color:var(--179b80)}.Link--variant-accentDarkInverted__5GVfk{color:var(--7cbffc)}.Link--variant-accentDarkInverted__5GVfk:hover{color:var(--47fcde)}.Link--variant-accentDarkInverted__5GVfk:active{color:var(--1253e2)}.Link--variant-neutral__v0PFp{color:var(--19fdf0)}.Link--variant-neutral__v0PFp:hover{color:var(--ce5fb9)}.Link--variant-neutral__v0PFp:active{color:var(--1d39ac)}.Link--variant-neutralInverted__t9Ijl{color:var(--883d0f)}.Link--variant-neutralInverted__t9Ijl:hover{color:var(--065570)}.Link--variant-neutralInverted__t9Ijl:active{color:var(--be41c4)}.Link--variant-unsetColors__EEbF5{color:var(--e66f2a)}.Link--variant-unsetColors__EEbF5:hover{color:var(--468ceb)}.Link--variant-unsetColors__EEbF5:active{color:var(--a5fc76)}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{_ as r,gt as i,ht as a,s as o,st as s,t as c,w as l,x as u,y as d}from"./dist-DtfJeYQK.js";import{t as f}from"./jsx-runtime-C2wGStra.js";import{n as p,t as m}from"./dist-Cc1j9Pjk.js";import{n as h,t as g}from"./filterAttributesPassedByRadixUIAtRuntime-CGiuUnR2.js";var _,v,y=t((()=>{_=`Link__Jw0hc`,v={Link:_,"Link--inline":`Link--inline__aWJxC`,"Link--noUnderline":`Link--noUnderline__vuCBO`,"Link--variant-accentDark":`Link--variant-accentDark__5RCSd`,"Link--variant-accentDarkInverted":`Link--variant-accentDarkInverted__5GVfk`,"Link--variant-neutral":`Link--variant-neutral__v0PFp`,"Link--variant-neutralInverted":`Link--variant-neutralInverted__t9Ijl`,"Link--variant-unsetColors":`Link--variant-unsetColors__EEbF5`}})),b,x,S,C=t((()=>{l(),m(),c(),b=e(n(),1),h(),y(),x=f(),S=(0,b.forwardRef)(function(e,t){let{variant:n=s,href:c,download:l,opensInNewTab:f,nofollow:m,assistiveText:h,onClick:_,as:y,url:S,dataset:C,children:w,inline:T,noUnderline:E,...D}=e,O=o(),k=d(v,p.Link,[u(`variant`,n),r(`inline`,void 0,T),r(`noUnderline`,void 0,E)]),A=c||S,j=A?i(O,A,f,m):{},M={...g(D),ref:t,href:A,download:l,"aria-label":h,onClick:_,className:k.join(` `),...a(C,{preplyDsComponent:p.Link})};return y?(0,b.cloneElement)(y,{...M},w):(0,x.jsx)(`a`,{...M,...j,children:w})});try{S.displayName=`Link`,S.__docgenInfo={description:`This is an inline element and will inherit font-size, line-height and
|
|
2
|
+
font-weight from the parent context. If you need to customise any of these
|
|
3
|
+
styles, all you have to do is wrap the <Link> in a Text or TextInline
|
|
4
|
+
component.`,displayName:`Link`,props:{variant:{defaultValue:null,description:``,name:`variant`,required:!1,type:{name:`enum`,value:[{value:`"accentDark"`},{value:`"accentDarkInverted"`},{value:`"neutral"`},{value:`"neutralInverted"`},{value:`"unsetColors"`}]}},opensInNewTab:{defaultValue:null,description:"If `true`, forces internal link to open in a new tab.",name:`opensInNewTab`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},nofollow:{defaultValue:null,description:``,name:`nofollow`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},assistiveText:{defaultValue:null,description:"Provide an `aria-label` to the link.\nThis is useful if the link wraps non-textual elements, eg. an `img`.",name:`assistiveText`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},as:{defaultValue:null,description:``,name:`as`,required:!1,type:{name:`enum`,value:[{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}},url:{defaultValue:null,description:"@deprecated Use `href` instead",name:`url`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},dataset:{defaultValue:null,description:`Sets data attributes on the DOM element.
|
|
5
|
+
@example <Avatar dataset={{ 'qa-id': 'user-avatar' }} /> // will add data-qa-id="user-avatar" to the HTML element`,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},inline:{defaultValue:null,description:"If `true`, allows the link to wrap within text.",name:`inline`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},noUnderline:{defaultValue:null,description:``,name:`noUnderline`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}}}}}catch{}}));export{C as n,S as t};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{C as r,Y as i,t as a,w as o}from"./dist-DtfJeYQK.js";import{t as s}from"./jsx-runtime-C2wGStra.js";import{n as c,t as l}from"./Text-
|
|
1
|
+
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{C as r,Y as i,t as a,w as o}from"./dist-DtfJeYQK.js";import{t as s}from"./jsx-runtime-C2wGStra.js";import{n as c,t as l}from"./Text-Cy08WP3t.js";import{n as u,t as d}from"./Link-DbeaGxmu.js";var f,p,m,h,g,_,v,y,b,x,S;t((()=>{o(),a(),f=e(n(),1),c(),u(),p=s(),m={title:`components/Link`,component:d},h=()=>{let e=r(i.background.primaryInverted);return(0,p.jsxs)(`div`,{style:{display:`flex`,gap:`16px`},children:[(0,p.jsx)(d,{href:`https://preply.com`,variant:`neutral`,children:`neutral`}),(0,p.jsx)(`span`,{style:{backgroundColor:e},children:(0,p.jsx)(d,{href:`https://preply.com`,variant:`neutralInverted`,children:`neutralInverted`})}),(0,p.jsx)(d,{href:`https://preply.com`,variant:`accentDark`,children:`accentDark`}),(0,p.jsx)(`span`,{style:{backgroundColor:e},children:(0,p.jsx)(d,{href:`https://preply.com`,variant:`accentDarkInverted`,children:`accentDarkInverted`})}),(0,p.jsx)(d,{href:`https://preply.com`,variant:`unsetColors`,children:`unsetColors`})]})},g=()=>{let e=r(i.background.primaryInverted);return(0,p.jsxs)(`div`,{style:{display:`flex`,gap:`16px`,flexDirection:`column`},children:[(0,p.jsx)(l,{variant:`default-regular-italic`,children:"(use the `unsetColors` variant)"}),(0,p.jsxs)(`div`,{children:[(0,p.jsx)(l,{variant:`large-semibold-italic`,children:`primary`}),(0,p.jsx)(l,{variant:`default-regular-italic`,children:`normal`}),(0,p.jsxs)(l,{accent:`primary`,children:[`Lorem ipsum `,(0,p.jsx)(d,{variant:`unsetColors`,children:`dolor sit amet`}),` amet.`]}),(0,p.jsx)(l,{variant:`default-regular-italic`,children:`active`}),(0,p.jsxs)(l,{accent:`primary`,children:[`Lorem ipsum`,` `,(0,p.jsx)(d,{variant:`unsetColors`,dataset:{active:!0},children:`dolor sit amet`}),` `,`amet.`]})]}),(0,p.jsxs)(`div`,{style:{backgroundColor:e},children:[(0,p.jsx)(l,{variant:`large-semibold-italic`,accent:`inverted`,children:`inverted`}),(0,p.jsx)(l,{variant:`default-regular-italic`,accent:`inverted`,children:`normal`}),(0,p.jsxs)(l,{accent:`inverted`,children:[`Lorem ipsum `,(0,p.jsx)(d,{variant:`unsetColors`,children:`dolor sit amet`}),` amet.`]}),(0,p.jsx)(l,{variant:`default-regular-italic`,accent:`inverted`,children:`active`}),(0,p.jsxs)(l,{accent:`inverted`,children:[`Lorem ipsum`,` `,(0,p.jsx)(d,{variant:`unsetColors`,dataset:{active:!0},children:`dolor sit amet`}),` `,`amet.`]})]}),(0,p.jsxs)(`div`,{children:[(0,p.jsx)(l,{variant:`large-semibold-italic`,children:`positive`}),(0,p.jsx)(l,{variant:`default-regular-italic`,children:`normal`}),(0,p.jsxs)(l,{accent:`positive`,children:[`Lorem ipsum `,(0,p.jsx)(d,{variant:`unsetColors`,children:`dolor sit amet`}),` amet.`]}),(0,p.jsx)(l,{variant:`default-regular-italic`,children:`active`}),(0,p.jsxs)(l,{accent:`positive`,children:[`Lorem ipsum`,` `,(0,p.jsx)(d,{variant:`unsetColors`,dataset:{active:!0},children:`dolor sit amet`}),` `,`amet.`]})]}),(0,p.jsxs)(`div`,{children:[(0,p.jsx)(l,{variant:`large-semibold-italic`,children:`critical`}),(0,p.jsx)(l,{variant:`default-regular-italic`,children:`normal`}),(0,p.jsxs)(l,{accent:`critical`,children:[`Lorem ipsum `,(0,p.jsx)(d,{variant:`unsetColors`,children:`dolor sit amet`}),` amet.`]}),(0,p.jsx)(l,{variant:`default-regular-italic`,children:`active`}),(0,p.jsxs)(l,{accent:`critical`,children:[`Lorem ipsum`,` `,(0,p.jsx)(d,{variant:`unsetColors`,dataset:{active:!0},children:`dolor sit amet`}),` `,`amet.`]})]})]})},g.parameters={pseudo:{active:`[data-active="true"]`}},_=()=>{let e=r(i.background.primaryInverted);return(0,p.jsxs)(`div`,{style:{display:`flex`,gap:`16px`,flexDirection:`column`},children:[(0,p.jsx)(l,{variant:`default-regular-italic`,children:`normal`}),(0,p.jsxs)(`div`,{style:{display:`flex`,gap:`16px`},children:[(0,p.jsx)(d,{href:`https://preply.com`,variant:`neutral`,children:`neutral`}),(0,p.jsx)(`span`,{style:{backgroundColor:e},children:(0,p.jsx)(d,{href:`https://preply.com`,variant:`neutralInverted`,children:`neutralInverted`})}),(0,p.jsx)(d,{href:`https://preply.com`,variant:`accentDark`,children:`accentDark`}),(0,p.jsx)(`span`,{style:{backgroundColor:e},children:(0,p.jsx)(d,{href:`https://preply.com`,variant:`accentDarkInverted`,children:`accentDarkInverted`})}),(0,p.jsx)(d,{href:`https://preply.com`,variant:`unsetColors`,children:`unsetColors`})]}),(0,p.jsx)(l,{variant:`default-regular-italic`,children:`hover`}),(0,p.jsxs)(`div`,{style:{display:`flex`,gap:`16px`},children:[(0,p.jsx)(d,{href:`https://preply.com`,variant:`neutral`,dataset:{hover:!0},children:`neutral`}),(0,p.jsx)(`span`,{style:{backgroundColor:e},children:(0,p.jsx)(d,{href:`https://preply.com`,variant:`neutralInverted`,dataset:{hover:!0},children:`neutralInverted`})}),(0,p.jsx)(d,{href:`https://preply.com`,variant:`accentDark`,dataset:{hover:!0},children:`accentDark`}),(0,p.jsx)(`span`,{style:{backgroundColor:e},children:(0,p.jsx)(d,{href:`https://preply.com`,variant:`accentDarkInverted`,dataset:{hover:!0},children:`accentDarkInverted`})}),(0,p.jsx)(d,{href:`https://preply.com`,variant:`unsetColors`,dataset:{hover:!0},children:`unsetColors`})]}),(0,p.jsx)(l,{variant:`default-regular-italic`,children:`active`}),(0,p.jsxs)(`div`,{style:{display:`flex`,gap:`16px`},children:[(0,p.jsx)(d,{href:`https://preply.com`,variant:`neutral`,dataset:{active:!0},children:`neutral`}),(0,p.jsx)(`span`,{style:{backgroundColor:e},children:(0,p.jsx)(d,{href:`https://preply.com`,variant:`neutralInverted`,dataset:{active:!0},children:`neutralInverted`})}),(0,p.jsx)(d,{href:`https://preply.com`,variant:`accentDark`,dataset:{active:!0},children:`accentDark`}),(0,p.jsx)(`span`,{style:{backgroundColor:e},children:(0,p.jsx)(d,{href:`https://preply.com`,variant:`accentDarkInverted`,dataset:{active:!0},children:`accentDarkInverted`})}),(0,p.jsx)(d,{href:`https://preply.com`,variant:`unsetColors`,dataset:{active:!0},children:`unsetColors`})]})]})},_.parameters={pseudo:{active:`[data-active="true"]`,hover:`[data-hover="true"]`}},v=()=>(0,p.jsxs)(`p`,{style:{width:`12ch`},children:[`Unlock your potential;`,` `,(0,p.jsx)(d,{href:`https://preply.com`,variant:`unsetColors`,inline:!0,children:`visit Preply`}),`.`]}),y=(0,f.forwardRef)(function({to:e,...t},n){return(0,p.jsx)(`a`,{...t,href:e,ref:n})}),y.displayName=`Link`,b={parameters:{docs:{source:{type:`dynamic`}}},decorators:[e=>(0,p.jsx)(`div`,{style:{display:`flex`,flexDirection:`column`,width:`max-content`,gap:`8px`},children:(0,p.jsx)(e,{})})],render:()=>(0,p.jsxs)(p.Fragment,{children:[(0,p.jsx)(d,{as:(0,p.jsx)(y,{to:`/`}),variant:`neutral`,children:`Next.js Link`}),(0,p.jsx)(d,{as:(0,p.jsx)(`button`,{}),variant:`neutral`,children:`Button`})]})},x={parameters:{chromatic:{disableSnapshot:!0}},args:{children:`Click me`,href:`https://preply.com`,variant:`neutral`,dataset:{qaid:`link`}},argTypes:{dataset:{control:`object`},inline:{control:`boolean`},noUnderline:{control:`boolean`},opensInNewTab:{control:`boolean`},nofollow:{control:`boolean`},download:{control:`boolean`},assistiveText:{control:`text`},href:{control:`text`},url:{table:{disable:!0}}}},h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`() => {
|
|
2
2
|
const grey = getTokenVar(color.background.primaryInverted);
|
|
3
3
|
return <div style={{
|
|
4
4
|
display: 'flex',
|
|
@@ -46,7 +46,9 @@ import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2
|
|
|
46
46
|
<Text variant="default-regular-italic">active</Text>
|
|
47
47
|
<Text accent="primary">
|
|
48
48
|
Lorem ipsum{' '}
|
|
49
|
-
<Link variant="unsetColors"
|
|
49
|
+
<Link variant="unsetColors" dataset={{
|
|
50
|
+
active: true
|
|
51
|
+
}}>
|
|
50
52
|
dolor sit amet
|
|
51
53
|
</Link>{' '}
|
|
52
54
|
amet.
|
|
@@ -72,7 +74,9 @@ import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2
|
|
|
72
74
|
</Text>
|
|
73
75
|
<Text accent="inverted">
|
|
74
76
|
Lorem ipsum{' '}
|
|
75
|
-
<Link variant="unsetColors"
|
|
77
|
+
<Link variant="unsetColors" dataset={{
|
|
78
|
+
active: true
|
|
79
|
+
}}>
|
|
76
80
|
dolor sit amet
|
|
77
81
|
</Link>{' '}
|
|
78
82
|
amet.
|
|
@@ -89,7 +93,9 @@ import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2
|
|
|
89
93
|
<Text variant="default-regular-italic">active</Text>
|
|
90
94
|
<Text accent="positive">
|
|
91
95
|
Lorem ipsum{' '}
|
|
92
|
-
<Link variant="unsetColors"
|
|
96
|
+
<Link variant="unsetColors" dataset={{
|
|
97
|
+
active: true
|
|
98
|
+
}}>
|
|
93
99
|
dolor sit amet
|
|
94
100
|
</Link>{' '}
|
|
95
101
|
amet.
|
|
@@ -106,7 +112,9 @@ import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2
|
|
|
106
112
|
<Text variant="default-regular-italic">active</Text>
|
|
107
113
|
<Text accent="critical">
|
|
108
114
|
Lorem ipsum{' '}
|
|
109
|
-
<Link variant="unsetColors"
|
|
115
|
+
<Link variant="unsetColors" dataset={{
|
|
116
|
+
active: true
|
|
117
|
+
}}>
|
|
110
118
|
dolor sit amet
|
|
111
119
|
</Link>{' '}
|
|
112
120
|
amet.
|
|
@@ -154,27 +162,37 @@ import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2
|
|
|
154
162
|
display: 'flex',
|
|
155
163
|
gap: '16px'
|
|
156
164
|
}}>
|
|
157
|
-
<Link href="https://preply.com" variant="neutral"
|
|
165
|
+
<Link href="https://preply.com" variant="neutral" dataset={{
|
|
166
|
+
hover: true
|
|
167
|
+
}}>
|
|
158
168
|
neutral
|
|
159
169
|
</Link>
|
|
160
170
|
<span style={{
|
|
161
171
|
backgroundColor: grey
|
|
162
172
|
}}>
|
|
163
|
-
<Link href="https://preply.com" variant="neutralInverted"
|
|
173
|
+
<Link href="https://preply.com" variant="neutralInverted" dataset={{
|
|
174
|
+
hover: true
|
|
175
|
+
}}>
|
|
164
176
|
neutralInverted
|
|
165
177
|
</Link>
|
|
166
178
|
</span>
|
|
167
|
-
<Link href="https://preply.com" variant="accentDark"
|
|
179
|
+
<Link href="https://preply.com" variant="accentDark" dataset={{
|
|
180
|
+
hover: true
|
|
181
|
+
}}>
|
|
168
182
|
accentDark
|
|
169
183
|
</Link>
|
|
170
184
|
<span style={{
|
|
171
185
|
backgroundColor: grey
|
|
172
186
|
}}>
|
|
173
|
-
<Link href="https://preply.com" variant="accentDarkInverted"
|
|
187
|
+
<Link href="https://preply.com" variant="accentDarkInverted" dataset={{
|
|
188
|
+
hover: true
|
|
189
|
+
}}>
|
|
174
190
|
accentDarkInverted
|
|
175
191
|
</Link>
|
|
176
192
|
</span>
|
|
177
|
-
<Link href="https://preply.com" variant="unsetColors"
|
|
193
|
+
<Link href="https://preply.com" variant="unsetColors" dataset={{
|
|
194
|
+
hover: true
|
|
195
|
+
}}>
|
|
178
196
|
unsetColors
|
|
179
197
|
</Link>
|
|
180
198
|
</div>
|
|
@@ -183,27 +201,37 @@ import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2
|
|
|
183
201
|
display: 'flex',
|
|
184
202
|
gap: '16px'
|
|
185
203
|
}}>
|
|
186
|
-
<Link href="https://preply.com" variant="neutral"
|
|
204
|
+
<Link href="https://preply.com" variant="neutral" dataset={{
|
|
205
|
+
active: true
|
|
206
|
+
}}>
|
|
187
207
|
neutral
|
|
188
208
|
</Link>
|
|
189
209
|
<span style={{
|
|
190
210
|
backgroundColor: grey
|
|
191
211
|
}}>
|
|
192
|
-
<Link href="https://preply.com" variant="neutralInverted"
|
|
212
|
+
<Link href="https://preply.com" variant="neutralInverted" dataset={{
|
|
213
|
+
active: true
|
|
214
|
+
}}>
|
|
193
215
|
neutralInverted
|
|
194
216
|
</Link>
|
|
195
217
|
</span>
|
|
196
|
-
<Link href="https://preply.com" variant="accentDark"
|
|
218
|
+
<Link href="https://preply.com" variant="accentDark" dataset={{
|
|
219
|
+
active: true
|
|
220
|
+
}}>
|
|
197
221
|
accentDark
|
|
198
222
|
</Link>
|
|
199
223
|
<span style={{
|
|
200
224
|
backgroundColor: grey
|
|
201
225
|
}}>
|
|
202
|
-
<Link href="https://preply.com" variant="accentDarkInverted"
|
|
226
|
+
<Link href="https://preply.com" variant="accentDarkInverted" dataset={{
|
|
227
|
+
active: true
|
|
228
|
+
}}>
|
|
203
229
|
accentDarkInverted
|
|
204
230
|
</Link>
|
|
205
231
|
</span>
|
|
206
|
-
<Link href="https://preply.com" variant="unsetColors"
|
|
232
|
+
<Link href="https://preply.com" variant="unsetColors" dataset={{
|
|
233
|
+
active: true
|
|
234
|
+
}}>
|
|
207
235
|
unsetColors
|
|
208
236
|
</Link>
|
|
209
237
|
</div>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{_ as r,ht as i,t as a,y as o}from"./dist-DtfJeYQK.js";import{t as s}from"./jsx-runtime-C2wGStra.js";import{n as c,t as l}from"./dist-Cc1j9Pjk.js";import{n as u,t as d}from"./filterAttributesPassedByRadixUIAtRuntime-CGiuUnR2.js";import{n as f,t as p}from"./Spinner-
|
|
1
|
+
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{_ as r,ht as i,t as a,y as o}from"./dist-DtfJeYQK.js";import{t as s}from"./jsx-runtime-C2wGStra.js";import{n as c,t as l}from"./dist-Cc1j9Pjk.js";import{n as u,t as d}from"./filterAttributesPassedByRadixUIAtRuntime-CGiuUnR2.js";import{n as f,t as p}from"./Spinner-B-14zfoF.js";var m,h,g=t((()=>{m=`Loader__Ya6Xk`,h={Loader:m,"Loader--normal":`Loader--normal__41Xzt`,"Loader--inverted":`Loader--inverted__NULSk`}})),_,v,y,b=t((()=>{l(),a(),_=e(n(),1),u(),f(),g(),v=s(),y=(0,_.forwardRef)(function({size:e,inverted:t=!1,dataset:n,...a},s){let l=o(h,c.Loader,[r(`inverted`,`normal`,t)]);return(0,v.jsx)(`span`,{...d(a),ref:s,className:l.join(` `),...i(n,{preplyDsComponent:c.Loader}),children:(0,v.jsx)(p,{size:e})})});try{y.displayName=`Loader`,y.__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`}]}}}}}catch{}}));export{b as n,y as t};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{C as r,Y as i,t as a,w as o}from"./dist-DtfJeYQK.js";import{t as s}from"./jsx-runtime-C2wGStra.js";import{n as c,t as l}from"./Loader-
|
|
1
|
+
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{C as r,Y as i,t as a,w as o}from"./dist-DtfJeYQK.js";import{t as s}from"./jsx-runtime-C2wGStra.js";import{n as c,t as l}from"./Loader-raMoSfHx.js";import{r as u,t as d}from"./storybook-utils-BfrlMSeG.js";var f,p,m,h,g,_;t((()=>{o(),a(),e(n(),1),c(),d(),f=s(),p={title:`components/Loader`,component:l,argTypes:{size:{description:u}}},m=()=>(0,f.jsxs)(`div`,{style:{display:`flex`,alignItems:`end`,gap:`8px`},children:[(0,f.jsx)(l,{size:`default`}),(0,f.jsx)(l,{size:`large`})]}),h=()=>(0,f.jsx)(l,{inverted:!0}),h.decorators=[e=>(0,f.jsx)(`div`,{style:{backgroundColor:r(i.background.primaryInverted)},children:e()})],g={parameters:{chromatic:{disableSnapshot:!0}},decorators:[(e,{args:t})=>(0,f.jsx)(`div`,{style:{backgroundColor:t.inverted?`black`:void 0},children:e()})],args:{size:`default`,inverted:!1,dataset:{qaid:`loader`}},argTypes:{dataset:{control:`object`},size:{control:`select`},inverted:{control:`boolean`}}},m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`() => <div style={{
|
|
2
2
|
display: 'flex',
|
|
3
3
|
alignItems: 'end',
|
|
4
4
|
gap: '8px'
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{ht as r,t as i}from"./dist-DtfJeYQK.js";import{t as a}from"./jsx-runtime-C2wGStra.js";import{n as o,t as s}from"./dist-Cc1j9Pjk.js";import{n as c,t as l}from"./filterAttributesPassedByRadixUIAtRuntime-CGiuUnR2.js";import{n as u,t as d}from"./useControllableState-B6dCOM10.js";import{a as f,c as p,i as m,l as h,n as g,o as _,r as v,s as y,t as b}from"./createRequiredContext-BQNdOBzE.js";var x,S,C,w,T,E,D=t((()=>{x=e(n(),1),d(),h(),i(),s(),c(),g(),S=a(),[C,w]=b(`MultiSelectChips`),T=(0,x.forwardRef)(function({items:e,children:t,orientation:n=p,"aria-label":i,"aria-controls":a,value:s,onValueChange:c,defaultValue:d,dataset:f,...m},h){let[g,v]=u({value:s,onValueChange:c,defaultValue:d??[]}),b=(e,t)=>{v(t?g.filter(t=>t!==e):[...g,e])},x=e?e.map(({label:e,value:t,...n})=>(0,S.jsx)(E,{value:t,...n,children:e},t)):t;return(0,S.jsx)(C,{value:{values:g,onToggle:b},children:(0,S.jsx)(y,{orientation:n,children:(0,S.jsx)(_,{...l(m),ref:h,orientation:n,"aria-orientation":n,"aria-label":i,"aria-controls":a,role:`listbox`,"aria-multiselectable":`true`,...r(f,{preplyDsComponent:o.MultiSelectChips}),children:x})})})}),E=(0,x.forwardRef)(function({value:e,children:t,icon:n,countryFlagCode:i,disabled:a,counter:s,dataset:c,...u},d){let{values:p,onToggle:h}=w(),g=p.includes(e);return(0,S.jsx)(f,{role:`presentation`,children:(0,S.jsx)(v,{...l(u),ref:d,role:`option`,"aria-selected":g,onClick:()=>h(e,g),icon:n,countryFlagCode:i,disabled:a,...r(c,{preplyDsComponent:o.MultiSelectChipsItem}),children:(0,S.jsx)(m,{counter:s,children:t})})})});try{T.displayName=`MultiSelectChips`,T.__docgenInfo={description:`A chips component that allows selection of multiple options from a group.
|
|
2
|
+
Users can select multiple chips, and clicking a selected chip will deselect it.`,displayName:`MultiSelectChips`,props:{dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},"aria-label":{defaultValue:null,description:`Accessible label for the chips group. Required for screen reader users`,name:`aria-label`,required:!0,type:{name:`string`}},value:{defaultValue:null,description:`Current value of the chips. When provided, the component operates in controlled mode`,name:`value`,required:!1,type:{name:`enum`,value:[{value:`T[]`}]}},defaultValue:{defaultValue:null,description:"Default value for uncontrolled usage. Will be ignored if `value` is provided",name:`defaultValue`,required:!1,type:{name:`enum`,value:[{value:`T[]`}]}},onValueChange:{defaultValue:null,description:`Callback fired when the value changes. Receives the new value as an argument`,name:`onValueChange`,required:!1,type:{name:`enum`,value:[{value:`(value: T[]) => void`}]}},"aria-controls":{defaultValue:null,description:"If the chips control other elements on the page, use `aria-controls` with the target element's ID.",name:`aria-controls`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},orientation:{defaultValue:{value:`'horizontal'`},description:`Layout orientation of the chips group.`,name:`orientation`,required:!1,type:{name:`enum`,value:[{value:`"horizontal"`},{value:`"vertical"`}]}},items:{defaultValue:null,description:``,name:`items`,required:!1,type:{name:`enum`,value:[{value:`(Omit<ChipsItemProps, "children" | "value"> & { value: NonNullable<T>; label: ReactNode; })[]`}]}},ref:{defaultValue:null,description:``,name:`ref`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`(instance: HTMLUListElement | null) => void`},{value:`RefObject<HTMLUListElement>`}]}}}}}catch{}try{E.displayName=`MultiSelectChipsItem`,E.__docgenInfo={description:`Individual chip item for use within MultiSelectChips.`,displayName:`MultiSelectChipsItem`,props:{icon:{defaultValue:null,description:``,name:`icon`,required:!1,type:{name:`enum`,value:[{value:`ComponentClass<SVGAttributes<SVGElement>, any>`},{value:`FunctionComponent<SVGAttributes<SVGElement>>`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}},countryFlagCode:{defaultValue:null,description:``,name:`countryFlagCode`,required:!1,type:{name:`enum`,value:[{value:`"id"`},{value:`"as"`},{value:`"br"`},{value:`"hr"`},{value:`"li"`},{value:`"td"`},{value:`"th"`},{value:`"tr"`},{value:`"is"`},{value:`"at"`},{value:`"af"`},{value:`"ax"`},{value:`"al"`},{value:`"dz"`},{value:`"ad"`},{value:`"ao"`},{value:`"ai"`},{value:`"aq"`},{value:`"ag"`},{value:`"ar"`},{value:`"am"`},{value:`"aw"`},{value:`"sh-ac"`},{value:`"asean"`},{value:`"au"`},{value:`"az"`},{value:`"bs"`},{value:`"bh"`},{value:`"bd"`},{value:`"bb"`},{value:`"es-pv"`},{value:`"by"`},{value:`"be"`},{value:`"bz"`},{value:`"bj"`},{value:`"bm"`},{value:`"bt"`},{value:`"bo"`},{value:`"bq"`},{value:`"ba"`},{value:`"bw"`},{value:`"bv"`},{value:`"io"`},{value:`"bn"`},{value:`"bg"`},{value:`"bf"`},{value:`"bi"`},{value:`"cv"`},{value:`"kh"`},{value:`"cm"`},{value:`"ca"`},{value:`"ic"`},{value:`"es-ct"`},{value:`"ky"`},{value:`"cf"`},{value:`"cefta"`},{value:`"cl"`},{value:`"cn"`},{value:`"cx"`},{value:`"cp"`},{value:`"cc"`},{value:`"co"`},{value:`"km"`},{value:`"ck"`},{value:`"cr"`},{value:`"cu"`},{value:`"cw"`},{value:`"cy"`},{value:`"cz"`},{value:`"ci"`},{value:`"cd"`},{value:`"dk"`},{value:`"dg"`},{value:`"dj"`},{value:`"dm"`},{value:`"do"`},{value:`"eac"`},{value:`"ec"`},{value:`"eg"`},{value:`"sv"`},{value:`"gb-eng"`},{value:`"gq"`},{value:`"er"`},{value:`"ee"`},{value:`"sz"`},{value:`"et"`},{value:`"eu"`},{value:`"fk"`},{value:`"fo"`},{value:`"fm"`},{value:`"fj"`},{value:`"fi"`},{value:`"fr"`},{value:`"gf"`},{value:`"pf"`},{value:`"tf"`},{value:`"ga"`},{value:`"es-ga"`},{value:`"gm"`},{value:`"ge"`},{value:`"de"`},{value:`"gh"`},{value:`"gi"`},{value:`"gr"`},{value:`"gl"`},{value:`"gd"`},{value:`"gp"`},{value:`"gu"`},{value:`"gt"`},{value:`"gg"`},{value:`"gn"`},{value:`"gw"`},{value:`"gy"`},{value:`"ht"`},{value:`"hm"`},{value:`"va"`},{value:`"hn"`},{value:`"hk"`},{value:`"hu"`},{value:`"in"`},{value:`"ir"`},{value:`"iq"`},{value:`"ie"`},{value:`"im"`},{value:`"il"`},{value:`"it"`},{value:`"jm"`},{value:`"jp"`},{value:`"je"`},{value:`"jo"`},{value:`"kz"`},{value:`"ke"`},{value:`"ki"`},{value:`"xk"`},{value:`"kw"`},{value:`"kg"`},{value:`"la"`},{value:`"lv"`},{value:`"arab"`},{value:`"lb"`},{value:`"ls"`},{value:`"lr"`},{value:`"ly"`},{value:`"lt"`},{value:`"lu"`},{value:`"mo"`},{value:`"mg"`},{value:`"mw"`},{value:`"my"`},{value:`"mv"`},{value:`"ml"`},{value:`"mt"`},{value:`"mh"`},{value:`"mq"`},{value:`"mr"`},{value:`"mu"`},{value:`"yt"`},{value:`"mx"`},{value:`"md"`},{value:`"mc"`},{value:`"mn"`},{value:`"me"`},{value:`"ms"`},{value:`"ma"`},{value:`"mz"`},{value:`"mm"`},{value:`"na"`},{value:`"nr"`},{value:`"np"`},{value:`"nl"`},{value:`"nc"`},{value:`"nz"`},{value:`"ni"`},{value:`"ne"`},{value:`"ng"`},{value:`"nu"`},{value:`"nf"`},{value:`"kp"`},{value:`"mk"`},{value:`"gb-nir"`},{value:`"mp"`},{value:`"no"`},{value:`"om"`},{value:`"pc"`},{value:`"pk"`},{value:`"pw"`},{value:`"pa"`},{value:`"pg"`},{value:`"py"`},{value:`"pe"`},{value:`"ph"`},{value:`"pn"`},{value:`"pl"`},{value:`"pt"`},{value:`"pr"`},{value:`"qa"`},{value:`"cg"`},{value:`"ro"`},{value:`"ru"`},{value:`"rw"`},{value:`"re"`},{value:`"bl"`},{value:`"sh-hl"`},{value:`"sh"`},{value:`"kn"`},{value:`"lc"`},{value:`"mf"`},{value:`"pm"`},{value:`"vc"`},{value:`"ws"`},{value:`"sm"`},{value:`"st"`},{value:`"sa"`},{value:`"gb-sct"`},{value:`"sn"`},{value:`"rs"`},{value:`"sc"`},{value:`"sl"`},{value:`"sg"`},{value:`"sx"`},{value:`"sk"`},{value:`"si"`},{value:`"sb"`},{value:`"so"`},{value:`"za"`},{value:`"gs"`},{value:`"kr"`},{value:`"ss"`},{value:`"es"`},{value:`"lk"`},{value:`"ps"`},{value:`"sd"`},{value:`"sr"`},{value:`"sj"`},{value:`"se"`},{value:`"ch"`},{value:`"sy"`},{value:`"tw"`},{value:`"tj"`},{value:`"tz"`},{value:`"tl"`},{value:`"tg"`},{value:`"tk"`},{value:`"to"`},{value:`"tt"`},{value:`"sh-ta"`},{value:`"tn"`},{value:`"tm"`},{value:`"tc"`},{value:`"tv"`},{value:`"ug"`},{value:`"ua"`},{value:`"ae"`},{value:`"gb"`},{value:`"un"`},{value:`"um"`},{value:`"us"`},{value:`"uy"`},{value:`"uz"`},{value:`"vu"`},{value:`"ve"`},{value:`"vn"`},{value:`"vg"`},{value:`"vi"`},{value:`"gb-wls"`},{value:`"wf"`},{value:`"eh"`},{value:`"ye"`},{value:`"zm"`},{value:`"zw"`}]}},value:{defaultValue:null,description:`Unique identifier for this chip. Used for selection tracking`,name:`value`,required:!0,type:{name:`string`}},children:{defaultValue:null,description:`Content to display inside the chip`,name:`children`,required:!0,type:{name:`enum`,value:[{value:`undefined`},{value:`null`},{value:`string`},{value:`number`},{value:`false`},{value:`true`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`},{value:`Iterable<ReactNode>`},{value:`ReactPortal`}]}},counter:{defaultValue:null,description:`Optional numeric counter to display alongside the chip label`,name:`counter`,required:!1,type:{name:`enum`,value:[{value:`number`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}}}}}catch{}}));export{E as n,D as r,T as t};
|
package/dist/assets/{MultiSelectChips.stories-DfyHnHHY.js → MultiSelectChips.stories-0xhNcMZn.js}
RENAMED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Text-B288uCKD.js";import{n as o,t as s}from"./Heading-Bmekm9VQ.js";import{n as c,t as ee}from"./Button-a57MCiDO.js";import{r as te,t as ne}from"./lib-8ue2PVWI.js";import{n as l,r as re,t as u}from"./MultiSelectChips-HRY_a-9f.js";import{n as d,t as f}from"./LayoutFlex-CEr_Bd5T.js";import{n as ie,t as p}from"./Link-D75aReRI.js";import{n as ae,t as m}from"./Tooltip-DGa6B2Md.js";import{a as h,c as g,i as _,n as v,o as y,r as b,s as x,t as S}from"./TokyoUIAvailability7LateNight-BKvXBfeB.js";import{n as oe,t as se}from"./TokyoUIEmojiFrowning-CyL90GhY.js";import{r as ce,t as le}from"./styled-components.browser.esm-48-sXnz9.js";var C,w,T,E,D,O,k,A,j,M,N,P,F,I,L,R,z,B,V,H,U,W,G,K,q,J,Y,X,Z,Q,$;t((()=>{C=e(n(),1),re(),g(),y(),_(),v(),oe(),te(),d(),i(),ie(),ce(),o(),ae(),c(),w=r(),{expect:T,within:E,fn:D,userEvent:O,resetAllMocks:k,waitFor:A}=__STORYBOOK_MODULE_TEST__,j={title:`components/Chips/MultiSelectChips`,component:u,subcomponents:{MultiSelectChipsItem:l},parameters:{layout:`padded`},args:{"aria-label":`Select skills`,defaultValue:[`vocabulary`],onValueChange:D(),items:[{value:`vocabulary`,label:`Vocabulary`},{value:`speaking`,label:`Speaking`},{value:`listening`,label:`Listening`},{value:`reading`,label:`Reading`}]},beforeEach:()=>{k()}},M={play:async({canvasElement:e,step:t,args:n})=>{let r=E(e),i=r.getByRole(`option`,{name:`Vocabulary`}),a=r.getByRole(`option`,{name:`Speaking`}),o=r.getByRole(`option`,{name:`Listening`}),s=r.getByRole(`option`,{name:`Reading`});await t(`Render chips with default value`,async()=>{T(i).toHaveAttribute(`aria-selected`,`true`),T(a).toHaveAttribute(`aria-selected`,`false`),T(o).toHaveAttribute(`aria-selected`,`false`),T(s).toHaveAttribute(`aria-selected`,`false`)}),await t(`Click on the chip to select it`,async()=>{await O.click(a),T(n.onValueChange).toHaveBeenCalledWith([`vocabulary`,`speaking`]),T(i).toHaveAttribute(`aria-selected`,`true`),T(a).toHaveAttribute(`aria-selected`,`true`),T(o).toHaveAttribute(`aria-selected`,`false`),T(s).toHaveAttribute(`aria-selected`,`false`)}),await t(`Click on the chip to deselect it`,async()=>{await O.click(i),T(n.onValueChange).toHaveBeenCalledWith([`speaking`]),T(i).toHaveAttribute(`aria-selected`,`false`),T(a).toHaveAttribute(`aria-selected`,`true`),T(o).toHaveAttribute(`aria-selected`,`false`),T(s).toHaveAttribute(`aria-selected`,`false`)})}},P={render:function({defaultValue:e,...t}){let[n,r]=(0,C.useState)(e);N=r;let i=e=>{r(e),t.onValueChange?.(e)};return(0,w.jsx)(u,{...t,value:n,onValueChange:i})},play:async({canvasElement:e,step:t,args:n})=>{let r=E(e),i=r.getByRole(`option`,{name:`Vocabulary`}),a=r.getByRole(`option`,{name:`Speaking`}),o=r.getByRole(`option`,{name:`Listening`}),s=r.getByRole(`option`,{name:`Reading`});await t(`Render chips with default value`,async()=>{T(i).toHaveAttribute(`aria-selected`,`true`),T(a).toHaveAttribute(`aria-selected`,`false`),T(o).toHaveAttribute(`aria-selected`,`false`),T(s).toHaveAttribute(`aria-selected`,`false`)}),await t(`Click on the chip to select it`,async()=>{await O.click(a),T(n.onValueChange).toHaveBeenCalledWith([`vocabulary`,`speaking`]),T(i).toHaveAttribute(`aria-selected`,`true`),T(a).toHaveAttribute(`aria-selected`,`true`),T(o).toHaveAttribute(`aria-selected`,`false`),T(s).toHaveAttribute(`aria-selected`,`false`)}),await t(`Click on the chip to deselect it`,async()=>{await O.click(i),T(n.onValueChange).toHaveBeenCalledWith([`speaking`]),T(i).toHaveAttribute(`aria-selected`,`false`),T(a).toHaveAttribute(`aria-selected`,`true`),T(o).toHaveAttribute(`aria-selected`,`false`),T(s).toHaveAttribute(`aria-selected`,`false`)}),await t(`Change the value externally`,async()=>{k(),N([`vocabulary`,`reading`]),await A(()=>{T(n.onValueChange).not.toHaveBeenCalled(),T(i).toHaveAttribute(`aria-selected`,`true`),T(a).toHaveAttribute(`aria-selected`,`false`),T(o).toHaveAttribute(`aria-selected`,`false`),T(s).toHaveAttribute(`aria-selected`,`true`)})})}},F={args:{items:[{value:`vocabulary`,label:`Vocabulary`},{value:`speaking`,label:`Speaking`,disabled:!0},{value:`listening`,label:`Listening`,disabled:!0},{value:`reading`,label:`Reading`}]},play:async({canvasElement:e,step:t,args:n})=>{let r=E(e),i=r.getByRole(`option`,{name:`Speaking`}),a=r.getByRole(`option`,{name:`Vocabulary`});await t(`Disabled chip must have disabled attribute`,async()=>{T(i).toBeDisabled()}),await t(`Disabled chip must not be selectable`,async()=>{await O.click(i),T(n.onValueChange).not.toHaveBeenCalled(),T(a).toHaveAttribute(`aria-selected`,`true`)})}},I={args:{"aria-label":`Select availabilities`,defaultValue:[`morning`],items:[{value:`morning`,label:`Morning`,icon:(0,w.jsx)(x,{})},{value:`afternoon`,label:`Afternoon`,icon:(0,w.jsx)(h,{})},{value:`evening`,label:`Evening`,icon:(0,w.jsx)(b,{})}]},play:async({canvasElement:e,step:t})=>{let n=E(E(e).getByRole(`option`,{name:`Morning`})).getByTestId(`chip-icon`);await t("Chip should render an icon when `icon` prop is passed",async()=>{T(n).toBeVisible()})}},L={args:{"aria-label":`Select languages to learn`,defaultValue:[`english`],items:[{value:`english`,label:`English`,counter:1247},{value:`spanish`,label:`Spanish`,counter:892},{value:`french`,label:`French`,counter:534},{value:`german`,label:`German`,counter:421},{value:`italian`,label:`Italian`,counter:287},{value:`portuguese`,label:`Portuguese`,counter:156}]},play:async({canvasElement:e,step:t})=>{let n=E(E(e).getByRole(`option`,{name:/^English/})).getByTestId(`chip-counter`);await t("Chip should render a counter when `counter` prop is passed",async()=>{T(n).toBeVisible(),T(n).toHaveTextContent(`1247`)})}},R={args:{"aria-label":`Select countries`,defaultValue:[`ua`],items:[{value:`ua`,label:`Ukraine`,countryFlagCode:`ua`},{value:`gb`,label:`United Kingdom`,countryFlagCode:`gb`},{value:`it`,label:`Italy`,countryFlagCode:`it`},{value:`es`,label:`Spain`,countryFlagCode:`es`},{value:`au`,label:`Australia`,countryFlagCode:`au`},{value:`br`,label:`Brazil`,countryFlagCode:`br`},{value:`eg`,label:`Egypt`,countryFlagCode:`eg`}]},play:async({canvasElement:e,step:t})=>{let n=E(E(e).getByRole(`option`,{name:`Ukraine`})).getByTestId(`chip-country-flag`);await t("Chip should render a flag when `flagCountryCode` prop is passed",async()=>{T(n).toBeVisible()})}},z={args:{"aria-label":`Fancy chips`,items:[{value:`counter+icon`,label:`Icon + Counter`,icon:(0,w.jsx)(x,{}),counter:1247},{value:`counter+flag`,label:`Flag + Counter`,countryFlagCode:`ua`,counter:1247},{value:`icon+flag`,label:`Icon + Flag`,icon:(0,w.jsx)(x,{}),countryFlagCode:`ua`}]},play:async({canvasElement:e})=>{let t=E(E(e).getByRole(`option`,{name:`Icon + Flag`}));T(t.getByTestId(`chip-icon`)).toBeVisible(),T(t.queryByTestId(`chip-country-flag`)).not.toBeInTheDocument()}},B=[`2025-08-15T10:00Z`,`2025-08-16T12:00Z`,`2025-08-17T14:00Z`],V={args:{orientation:`vertical`,"aria-label":`Select time slots`,defaultValue:B,items:B.map(e=>({value:e,label:(0,w.jsx)(ne,{weekday:`short`,day:`numeric`,month:`short`,hour:`2-digit`,minute:`2-digit`,value:e}),dataset:{testid:e}}))},decorators:[e=>(0,w.jsx)(`div`,{style:{width:300,margin:`0 auto`},children:(0,w.jsx)(e,{})})],play:async({canvasElement:e,step:t})=>{let n=E(e),r=n.getByRole(`listbox`,{name:`Select time slots`}),i=n.getByTestId(B[0]),a=n.getByTestId(B[1]),o=n.getByTestId(B[2]);await t('Vertical chips should have `aria-orientation="vertical"`',async()=>{T(r).toHaveAttribute(`aria-orientation`,`vertical`)}),await t(`Focus first chip`,async()=>{i.focus()}),await t(`Arrow down should focus second chip`,async()=>{await O.keyboard(`{ArrowDown}`),T(a).toHaveFocus()}),await t(`Arrow down should focus third chip`,async()=>{await O.keyboard(`{ArrowDown}`),T(o).toHaveFocus()}),await t(`Arrow down should focus first chip`,async()=>{await O.keyboard(`{ArrowDown}`),T(i).toHaveFocus()}),await t(`Arrow up should focus third chip`,async()=>{await O.keyboard(`{ArrowUp}`),T(o).toHaveFocus()})}},H={render:e=>(0,w.jsxs)(f,{gap:`12`,children:[(0,w.jsx)(u,{...e}),(0,w.jsx)(ee,{variant:`tertiary`,size:`small`,onClick:()=>alert(`Show all`),children:`Show all`})]})},U=[{value:`vocabulary`,label:`Vocabulary`},{value:`speaking`,label:`Speaking`},{value:`listening`,label:`Listening`},{value:`reading`,label:`Reading`},{value:`writing`,label:`Writing`},{value:`grammar`,label:`Grammar`}],W=[{value:`monday`,label:`Monday`},{value:`tuesday`,label:`Tuesday`},{value:`wednesday`,label:`Wednesday`},{value:`thursday`,label:`Thursday`},{value:`friday`,label:`Friday`},{value:`saturday`,label:`Saturday`},{value:`sunday`,label:`Sunday`}],G=[{value:`morning`,label:`Morning (6-12)`,icon:(0,w.jsx)(x,{})},{value:`afternoon`,label:`Afternoon (12-18)`,icon:(0,w.jsx)(h,{})},{value:`evening`,label:`Evening (18-0)`,icon:(0,w.jsx)(b,{})},{value:`night`,label:`Night (0-6)`,icon:(0,w.jsx)(S,{})}],K={render:function(e){return(0,w.jsxs)(f,{direction:`column`,alignItems:`stretch`,gap:`64`,children:[(0,w.jsxs)(f,{direction:`column`,alignItems:`stretch`,gap:`16`,children:[(0,w.jsx)(a,{variant:`large-semibold`,children:`What skills do you want to focus on?`}),(0,w.jsx)(u,{"aria-label":`Selected skills`,items:U})]}),(0,w.jsxs)(f,{direction:`column`,alignItems:`stretch`,gap:`16`,children:[(0,w.jsx)(a,{variant:`large-semibold`,children:`Which days work best for you?`}),(0,w.jsx)(u,{"aria-label":`Selected days of the week`,items:W})]}),(0,w.jsxs)(f,{direction:`column`,alignItems:`stretch`,gap:`16`,children:[(0,w.jsx)(a,{variant:`large-semibold`,children:`What times of day work for you?`}),(0,w.jsx)(u,{"aria-label":`Selected times of day`,items:G})]})]})},play:async({canvasElement:e,step:t})=>{let n=E(e),r=E(n.getByRole(`listbox`,{name:`Selected skills`})),i=E(n.getByRole(`listbox`,{name:`Selected days of the week`})),a=r.getByRole(`option`,{name:`Vocabulary`}),o=r.getByRole(`option`,{name:`Speaking`}),s=r.getByRole(`option`,{name:`Grammar`}),c=i.getByRole(`option`,{name:`Monday`});await t(`Tab once to enter the component`,async()=>{await O.tab(),T(a).toHaveFocus()}),await t(`Next tab should focus second chip`,async()=>{await O.tab(),T(c).toHaveFocus()}),await t(`Shift+Tab should focus first chips group again`,async()=>{await O.tab({shift:!0}),T(a).toHaveFocus()}),await t(`Right arrow should focus next chip in the group`,async()=>{await O.keyboard(`{ArrowRight}`),T(o).toHaveFocus()}),await t(`Left arrow should focus previous chip in the group`,async()=>{await O.keyboard(`{ArrowLeft}`),T(a).toHaveFocus()}),await t(`Left arrow should focus last chip if first chip is focused`,async()=>{await O.keyboard(`{ArrowLeft}`),T(s).toHaveFocus()}),await t(`Right arrow should focus first chip if last chip is focused`,async()=>{await O.keyboard(`{ArrowRight}`),T(a).toHaveFocus()}),await t(`Focus last chip`,async()=>{await O.keyboard(`{ArrowLeft}`)}),await t(`Tab to the next group`,async()=>{await O.tab()}),await t(`Shift+Tab to return to the first group, the last focused chip should be focused`,async()=>{await O.tab({shift:!0}),T(s).toHaveFocus()})}},q=le.ul`
|
|
1
|
+
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Text-Cy08WP3t.js";import{n as o,t as s}from"./Heading-B3jb_-J8.js";import{n as c,t as l}from"./Button--WTUF97E.js";import{r as u,t as d}from"./lib-8ue2PVWI.js";import{r as f,t as p}from"./styled-components.browser.esm-BF2I7YPU.js";import{n as m,r as h,t as g}from"./MultiSelectChips-Bs8MJsJe.js";import{n as ee,t as _}from"./LayoutFlex-BlWwmFhv.js";import{n as v,t as te}from"./Link-DbeaGxmu.js";import{n as ne,t as y}from"./Tooltip-BKkZoXDV.js";import{a as b,c as re,i as ie,n as ae,o as oe,r as x,s as S,t as se}from"./TokyoUIAvailability7LateNight-Bho17X1G.js";import{n as ce,t as le}from"./TokyoUIEmojiFrowning-rSnD4TX2.js";var C,w,T,E,D,O,k,A,j,M,N,P,F,I,L,R,z,B,V,H,U,W,G,K,q,J,Y,X,Z,Q,$;t((()=>{C=e(n(),1),h(),re(),oe(),ie(),ae(),ce(),u(),ee(),i(),v(),f(),o(),ne(),c(),w=r(),{expect:T,within:E,fn:D,userEvent:O,resetAllMocks:k,waitFor:A}=__STORYBOOK_MODULE_TEST__,j={title:`components/Chips/MultiSelectChips`,component:g,subcomponents:{MultiSelectChipsItem:m},parameters:{layout:`padded`},args:{"aria-label":`Select skills`,defaultValue:[`vocabulary`],onValueChange:D(),items:[{value:`vocabulary`,label:`Vocabulary`},{value:`speaking`,label:`Speaking`},{value:`listening`,label:`Listening`},{value:`reading`,label:`Reading`}]},beforeEach:()=>{k()}},M={play:async({canvasElement:e,step:t,args:n})=>{let r=E(e),i=r.getByRole(`option`,{name:`Vocabulary`}),a=r.getByRole(`option`,{name:`Speaking`}),o=r.getByRole(`option`,{name:`Listening`}),s=r.getByRole(`option`,{name:`Reading`});await t(`Render chips with default value`,async()=>{T(i).toHaveAttribute(`aria-selected`,`true`),T(a).toHaveAttribute(`aria-selected`,`false`),T(o).toHaveAttribute(`aria-selected`,`false`),T(s).toHaveAttribute(`aria-selected`,`false`)}),await t(`Click on the chip to select it`,async()=>{await O.click(a),T(n.onValueChange).toHaveBeenCalledWith([`vocabulary`,`speaking`]),T(i).toHaveAttribute(`aria-selected`,`true`),T(a).toHaveAttribute(`aria-selected`,`true`),T(o).toHaveAttribute(`aria-selected`,`false`),T(s).toHaveAttribute(`aria-selected`,`false`)}),await t(`Click on the chip to deselect it`,async()=>{await O.click(i),T(n.onValueChange).toHaveBeenCalledWith([`speaking`]),T(i).toHaveAttribute(`aria-selected`,`false`),T(a).toHaveAttribute(`aria-selected`,`true`),T(o).toHaveAttribute(`aria-selected`,`false`),T(s).toHaveAttribute(`aria-selected`,`false`)})}},P={render:function({defaultValue:e,...t}){let[n,r]=(0,C.useState)(e);N=r;let i=e=>{r(e),t.onValueChange?.(e)};return(0,w.jsx)(g,{...t,value:n,onValueChange:i})},play:async({canvasElement:e,step:t,args:n})=>{let r=E(e),i=r.getByRole(`option`,{name:`Vocabulary`}),a=r.getByRole(`option`,{name:`Speaking`}),o=r.getByRole(`option`,{name:`Listening`}),s=r.getByRole(`option`,{name:`Reading`});await t(`Render chips with default value`,async()=>{T(i).toHaveAttribute(`aria-selected`,`true`),T(a).toHaveAttribute(`aria-selected`,`false`),T(o).toHaveAttribute(`aria-selected`,`false`),T(s).toHaveAttribute(`aria-selected`,`false`)}),await t(`Click on the chip to select it`,async()=>{await O.click(a),T(n.onValueChange).toHaveBeenCalledWith([`vocabulary`,`speaking`]),T(i).toHaveAttribute(`aria-selected`,`true`),T(a).toHaveAttribute(`aria-selected`,`true`),T(o).toHaveAttribute(`aria-selected`,`false`),T(s).toHaveAttribute(`aria-selected`,`false`)}),await t(`Click on the chip to deselect it`,async()=>{await O.click(i),T(n.onValueChange).toHaveBeenCalledWith([`speaking`]),T(i).toHaveAttribute(`aria-selected`,`false`),T(a).toHaveAttribute(`aria-selected`,`true`),T(o).toHaveAttribute(`aria-selected`,`false`),T(s).toHaveAttribute(`aria-selected`,`false`)}),await t(`Change the value externally`,async()=>{k(),N([`vocabulary`,`reading`]),await A(()=>{T(n.onValueChange).not.toHaveBeenCalled(),T(i).toHaveAttribute(`aria-selected`,`true`),T(a).toHaveAttribute(`aria-selected`,`false`),T(o).toHaveAttribute(`aria-selected`,`false`),T(s).toHaveAttribute(`aria-selected`,`true`)})})}},F={args:{items:[{value:`vocabulary`,label:`Vocabulary`},{value:`speaking`,label:`Speaking`,disabled:!0},{value:`listening`,label:`Listening`,disabled:!0},{value:`reading`,label:`Reading`}]},play:async({canvasElement:e,step:t,args:n})=>{let r=E(e),i=r.getByRole(`option`,{name:`Speaking`}),a=r.getByRole(`option`,{name:`Vocabulary`});await t(`Disabled chip must have disabled attribute`,async()=>{T(i).toBeDisabled()}),await t(`Disabled chip must not be selectable`,async()=>{await O.click(i),T(n.onValueChange).not.toHaveBeenCalled(),T(a).toHaveAttribute(`aria-selected`,`true`)})}},I={args:{"aria-label":`Select availabilities`,defaultValue:[`morning`],items:[{value:`morning`,label:`Morning`,icon:(0,w.jsx)(S,{})},{value:`afternoon`,label:`Afternoon`,icon:(0,w.jsx)(b,{})},{value:`evening`,label:`Evening`,icon:(0,w.jsx)(x,{})}]},play:async({canvasElement:e,step:t})=>{let n=E(E(e).getByRole(`option`,{name:`Morning`})).getByTestId(`chip-icon`);await t("Chip should render an icon when `icon` prop is passed",async()=>{T(n).toBeVisible()})}},L={args:{"aria-label":`Select languages to learn`,defaultValue:[`english`],items:[{value:`english`,label:`English`,counter:1247},{value:`spanish`,label:`Spanish`,counter:892},{value:`french`,label:`French`,counter:534},{value:`german`,label:`German`,counter:421},{value:`italian`,label:`Italian`,counter:287},{value:`portuguese`,label:`Portuguese`,counter:156}]},play:async({canvasElement:e,step:t})=>{let n=E(E(e).getByRole(`option`,{name:/^English/})).getByTestId(`chip-counter`);await t("Chip should render a counter when `counter` prop is passed",async()=>{T(n).toBeVisible(),T(n).toHaveTextContent(`1247`)})}},R={args:{"aria-label":`Select countries`,defaultValue:[`ua`],items:[{value:`ua`,label:`Ukraine`,countryFlagCode:`ua`},{value:`gb`,label:`United Kingdom`,countryFlagCode:`gb`},{value:`it`,label:`Italy`,countryFlagCode:`it`},{value:`es`,label:`Spain`,countryFlagCode:`es`},{value:`au`,label:`Australia`,countryFlagCode:`au`},{value:`br`,label:`Brazil`,countryFlagCode:`br`},{value:`eg`,label:`Egypt`,countryFlagCode:`eg`}]},play:async({canvasElement:e,step:t})=>{let n=E(E(e).getByRole(`option`,{name:`Ukraine`})).getByTestId(`chip-country-flag`);await t("Chip should render a flag when `flagCountryCode` prop is passed",async()=>{T(n).toBeVisible()})}},z={args:{"aria-label":`Fancy chips`,items:[{value:`counter+icon`,label:`Icon + Counter`,icon:(0,w.jsx)(S,{}),counter:1247},{value:`counter+flag`,label:`Flag + Counter`,countryFlagCode:`ua`,counter:1247},{value:`icon+flag`,label:`Icon + Flag`,icon:(0,w.jsx)(S,{}),countryFlagCode:`ua`}]},play:async({canvasElement:e})=>{let t=E(E(e).getByRole(`option`,{name:`Icon + Flag`}));T(t.getByTestId(`chip-icon`)).toBeVisible(),T(t.queryByTestId(`chip-country-flag`)).not.toBeInTheDocument()}},B=[`2025-08-15T10:00Z`,`2025-08-16T12:00Z`,`2025-08-17T14:00Z`],V={args:{orientation:`vertical`,"aria-label":`Select time slots`,defaultValue:B,items:B.map(e=>({value:e,label:(0,w.jsx)(d,{weekday:`short`,day:`numeric`,month:`short`,hour:`2-digit`,minute:`2-digit`,value:e}),dataset:{testid:e}}))},decorators:[e=>(0,w.jsx)(`div`,{style:{width:300,margin:`0 auto`},children:(0,w.jsx)(e,{})})],play:async({canvasElement:e,step:t})=>{let n=E(e),r=n.getByRole(`listbox`,{name:`Select time slots`}),i=n.getByTestId(B[0]),a=n.getByTestId(B[1]),o=n.getByTestId(B[2]);await t('Vertical chips should have `aria-orientation="vertical"`',async()=>{T(r).toHaveAttribute(`aria-orientation`,`vertical`)}),await t(`Focus first chip`,async()=>{i.focus()}),await t(`Arrow down should focus second chip`,async()=>{await O.keyboard(`{ArrowDown}`),T(a).toHaveFocus()}),await t(`Arrow down should focus third chip`,async()=>{await O.keyboard(`{ArrowDown}`),T(o).toHaveFocus()}),await t(`Arrow down should focus first chip`,async()=>{await O.keyboard(`{ArrowDown}`),T(i).toHaveFocus()}),await t(`Arrow up should focus third chip`,async()=>{await O.keyboard(`{ArrowUp}`),T(o).toHaveFocus()})}},H={render:e=>(0,w.jsxs)(_,{gap:`12`,children:[(0,w.jsx)(g,{...e}),(0,w.jsx)(l,{variant:`tertiary`,size:`small`,onClick:()=>alert(`Show all`),children:`Show all`})]})},U=[{value:`vocabulary`,label:`Vocabulary`},{value:`speaking`,label:`Speaking`},{value:`listening`,label:`Listening`},{value:`reading`,label:`Reading`},{value:`writing`,label:`Writing`},{value:`grammar`,label:`Grammar`}],W=[{value:`monday`,label:`Monday`},{value:`tuesday`,label:`Tuesday`},{value:`wednesday`,label:`Wednesday`},{value:`thursday`,label:`Thursday`},{value:`friday`,label:`Friday`},{value:`saturday`,label:`Saturday`},{value:`sunday`,label:`Sunday`}],G=[{value:`morning`,label:`Morning (6-12)`,icon:(0,w.jsx)(S,{})},{value:`afternoon`,label:`Afternoon (12-18)`,icon:(0,w.jsx)(b,{})},{value:`evening`,label:`Evening (18-0)`,icon:(0,w.jsx)(x,{})},{value:`night`,label:`Night (0-6)`,icon:(0,w.jsx)(se,{})}],K={render:function(e){return(0,w.jsxs)(_,{direction:`column`,alignItems:`stretch`,gap:`64`,children:[(0,w.jsxs)(_,{direction:`column`,alignItems:`stretch`,gap:`16`,children:[(0,w.jsx)(a,{variant:`large-semibold`,children:`What skills do you want to focus on?`}),(0,w.jsx)(g,{"aria-label":`Selected skills`,items:U})]}),(0,w.jsxs)(_,{direction:`column`,alignItems:`stretch`,gap:`16`,children:[(0,w.jsx)(a,{variant:`large-semibold`,children:`Which days work best for you?`}),(0,w.jsx)(g,{"aria-label":`Selected days of the week`,items:W})]}),(0,w.jsxs)(_,{direction:`column`,alignItems:`stretch`,gap:`16`,children:[(0,w.jsx)(a,{variant:`large-semibold`,children:`What times of day work for you?`}),(0,w.jsx)(g,{"aria-label":`Selected times of day`,items:G})]})]})},play:async({canvasElement:e,step:t})=>{let n=E(e),r=E(n.getByRole(`listbox`,{name:`Selected skills`})),i=E(n.getByRole(`listbox`,{name:`Selected days of the week`})),a=r.getByRole(`option`,{name:`Vocabulary`}),o=r.getByRole(`option`,{name:`Speaking`}),s=r.getByRole(`option`,{name:`Grammar`}),c=i.getByRole(`option`,{name:`Monday`});await t(`Tab once to enter the component`,async()=>{await O.tab(),T(a).toHaveFocus()}),await t(`Next tab should focus second chip`,async()=>{await O.tab(),T(c).toHaveFocus()}),await t(`Shift+Tab should focus first chips group again`,async()=>{await O.tab({shift:!0}),T(a).toHaveFocus()}),await t(`Right arrow should focus next chip in the group`,async()=>{await O.keyboard(`{ArrowRight}`),T(o).toHaveFocus()}),await t(`Left arrow should focus previous chip in the group`,async()=>{await O.keyboard(`{ArrowLeft}`),T(a).toHaveFocus()}),await t(`Left arrow should focus last chip if first chip is focused`,async()=>{await O.keyboard(`{ArrowLeft}`),T(s).toHaveFocus()}),await t(`Right arrow should focus first chip if last chip is focused`,async()=>{await O.keyboard(`{ArrowRight}`),T(a).toHaveFocus()}),await t(`Focus last chip`,async()=>{await O.keyboard(`{ArrowLeft}`)}),await t(`Tab to the next group`,async()=>{await O.tab()}),await t(`Shift+Tab to return to the first group, the last focused chip should be focused`,async()=>{await O.tab({shift:!0}),T(s).toHaveFocus()})}},q=p.ul`
|
|
2
2
|
all: unset;
|
|
3
3
|
list-style: none;
|
|
4
4
|
display: flex;
|
|
@@ -9,7 +9,7 @@ import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2
|
|
|
9
9
|
> li {
|
|
10
10
|
display: contents;
|
|
11
11
|
}
|
|
12
|
-
`,J=[{id:1,title:`Building Your First Vocabulary List`,skills:[`vocabulary`]},{id:2,title:`Effective Speaking Practice Techniques`,skills:[`speaking`]},{id:3,title:`Active Listening Strategies`,skills:[`listening`]},{id:4,title:`Speed Reading Methods`,skills:[`reading`]},{id:5,title:`Grammar Rules Made Simple`,skills:[`grammar`]},{id:6,title:`Combining Speaking and Vocabulary`,skills:[`speaking`,`vocabulary`]},{id:7,title:`Reading Comprehension and Vocabulary Building`,skills:[`reading`,`vocabulary`]},{id:8,title:`Listening and Speaking Integration`,skills:[`listening`,`speaking`]}],Y={render:function(e){let[t,n]=(0,C.useState)([]),r=t.length>0?J.filter(e=>t.some(t=>e.skills.includes(t))):J;return(0,w.jsxs)(
|
|
12
|
+
`,J=[{id:1,title:`Building Your First Vocabulary List`,skills:[`vocabulary`]},{id:2,title:`Effective Speaking Practice Techniques`,skills:[`speaking`]},{id:3,title:`Active Listening Strategies`,skills:[`listening`]},{id:4,title:`Speed Reading Methods`,skills:[`reading`]},{id:5,title:`Grammar Rules Made Simple`,skills:[`grammar`]},{id:6,title:`Combining Speaking and Vocabulary`,skills:[`speaking`,`vocabulary`]},{id:7,title:`Reading Comprehension and Vocabulary Building`,skills:[`reading`,`vocabulary`]},{id:8,title:`Listening and Speaking Integration`,skills:[`listening`,`speaking`]}],Y={render:function(e){let[t,n]=(0,C.useState)([]),r=t.length>0?J.filter(e=>t.some(t=>e.skills.includes(t))):J;return(0,w.jsxs)(_,{direction:`column`,gap:`24`,children:[(0,w.jsxs)(_,{direction:`column`,gap:`8`,children:[(0,w.jsx)(s,{tag:`h2`,variant:`large`,children:`Articles`}),(0,w.jsx)(g,{"aria-label":`Filter by skills`,"aria-controls":`results`,value:t,onValueChange:n,items:U})]}),(0,w.jsx)(`section`,{id:`results`,"aria-label":`Filtered articles`,children:(0,w.jsx)(q,{children:r.map(e=>(0,w.jsx)(`li`,{children:(0,w.jsx)(te,{href:`#`,children:e.title})},e.id))})})]})},play:async({canvasElement:e,step:t})=>{let n=E(e).getByRole(`listbox`,{name:`Filter by skills`});await t(`Chips element should have aria attributes forwarded`,async()=>{T(n).toHaveAttribute(`aria-label`,`Filter by skills`),T(n).toHaveAttribute(`aria-controls`,`results`)})}},X={args:{"aria-label":`Select skills`,items:void 0,children:(0,w.jsxs)(w.Fragment,{children:[(0,w.jsx)(y,{content:`I want to learn vocabulary`,dataset:{testid:`vocabulary-tooltip`},children:(0,w.jsx)(m,{value:`vocabulary`,children:`Vocabulary`})}),(0,w.jsx)(y,{content:`I want to improve my speaking skills`,dataset:{testid:`speaking-tooltip`},children:(0,w.jsx)(m,{value:`speaking`,children:`Speaking`})}),(0,w.jsx)(y,{content:`I want to improve my listening skills`,dataset:{testid:`listening-tooltip`},children:(0,w.jsx)(m,{value:`listening`,children:`Listening`})}),(0,w.jsx)(y,{content:`I want to improve my reading skills`,dataset:{testid:`reading-tooltip`},children:(0,w.jsx)(m,{value:`reading`,children:`Reading`})})]})},play:async({canvasElement:e,step:t})=>{let n=E(e);await t(`Tab to the first chip`,async()=>{await O.tab(),await A(()=>{T(n.getByTestId(`vocabulary-tooltip`)).toBeVisible()})}),await t(`Arrow right to focus next chip`,async()=>{await O.keyboard(`{ArrowRight}`),await A(()=>{T(n.getByTestId(`speaking-tooltip`)).toBeVisible()})}),await t(`Hover third chip`,async()=>{await O.hover(n.getByRole(`option`,{name:`Listening`})),await A(()=>{T(n.getByTestId(`listening-tooltip`)).toBeVisible()})})}},Z={tags:[`!autodocs`],parameters:{pseudo:{focusVisible:`[data-focus="true"]`,hover:`[data-hover="true"]`,active:`[data-active="true"]`}},args:{"aria-label":`Chips states`,value:[`selected`,`selected-hover`,`selected-active`,`selected-focus`],items:void 0,children:(0,w.jsxs)(w.Fragment,{children:[(0,w.jsx)(m,{value:`rest`,children:`Rest`}),(0,w.jsx)(m,{value:`focus`,dataset:{focus:!0},children:`Focus`}),(0,w.jsx)(m,{value:`hover`,dataset:{hover:!0},children:`Hover`}),(0,w.jsx)(m,{value:`active`,dataset:{active:!0},children:`Active`}),(0,w.jsx)(m,{value:`disabled`,disabled:!0,children:`Disabled`}),(0,w.jsx)(m,{value:`selected`,children:`Selected`}),(0,w.jsx)(m,{value:`selected-focus`,dataset:{focus:!0},children:`Selected focus`}),(0,w.jsx)(m,{value:`selected-hover`,dataset:{hover:!0},children:`Selected hover`}),(0,w.jsx)(m,{value:`selected-active`,dataset:{active:!0},children:`Selected active`})]})}},Q={decorators:[e=>(0,w.jsx)(`div`,{style:{maxWidth:150,margin:`0 auto`},children:(0,w.jsx)(e,{})})],args:{"aria-label":`Long label`,items:[{value:`long`,icon:le,label:`I'm way too long to be a chip label, I don't know what to do with myself`}]}},M.parameters={...M.parameters,docs:{...M.parameters?.docs,source:{originalSource:`{
|
|
13
13
|
play: async ({
|
|
14
14
|
canvasElement,
|
|
15
15
|
step,
|
|
@@ -560,32 +560,51 @@ This creates a smooth, efficient navigation experience - especially useful for c
|
|
|
560
560
|
}
|
|
561
561
|
}`,...X.parameters?.docs?.source},description:{story:"If you need to wrap individual chips in a component like [\\<Tooltip/>](/docs/components-tooltip--docs),\nyou can use render `<MultiSelectChipsItem/>` as children.",...X.parameters?.docs?.description}}},Z.parameters={...Z.parameters,docs:{...Z.parameters?.docs,source:{originalSource:`{
|
|
562
562
|
tags: ['!autodocs'],
|
|
563
|
+
parameters: {
|
|
564
|
+
pseudo: {
|
|
565
|
+
focusVisible: '[data-focus="true"]',
|
|
566
|
+
hover: '[data-hover="true"]',
|
|
567
|
+
active: '[data-active="true"]'
|
|
568
|
+
}
|
|
569
|
+
},
|
|
563
570
|
args: {
|
|
564
571
|
'aria-label': 'Chips states',
|
|
565
572
|
value: ['selected', 'selected-hover', 'selected-active', 'selected-focus'],
|
|
566
573
|
items: undefined,
|
|
567
574
|
children: <>
|
|
568
575
|
<MultiSelectChipsItem value="rest">Rest</MultiSelectChipsItem>
|
|
569
|
-
<MultiSelectChipsItem value="focus"
|
|
576
|
+
<MultiSelectChipsItem value="focus" dataset={{
|
|
577
|
+
focus: true
|
|
578
|
+
}}>
|
|
570
579
|
Focus
|
|
571
580
|
</MultiSelectChipsItem>
|
|
572
|
-
<MultiSelectChipsItem value="hover"
|
|
581
|
+
<MultiSelectChipsItem value="hover" dataset={{
|
|
582
|
+
hover: true
|
|
583
|
+
}}>
|
|
573
584
|
Hover
|
|
574
585
|
</MultiSelectChipsItem>
|
|
575
|
-
<MultiSelectChipsItem value="active"
|
|
586
|
+
<MultiSelectChipsItem value="active" dataset={{
|
|
587
|
+
active: true
|
|
588
|
+
}}>
|
|
576
589
|
Active
|
|
577
590
|
</MultiSelectChipsItem>
|
|
578
591
|
<MultiSelectChipsItem value="disabled" disabled>
|
|
579
592
|
Disabled
|
|
580
593
|
</MultiSelectChipsItem>
|
|
581
594
|
<MultiSelectChipsItem value="selected">Selected</MultiSelectChipsItem>
|
|
582
|
-
<MultiSelectChipsItem value="selected-focus"
|
|
595
|
+
<MultiSelectChipsItem value="selected-focus" dataset={{
|
|
596
|
+
focus: true
|
|
597
|
+
}}>
|
|
583
598
|
Selected focus
|
|
584
599
|
</MultiSelectChipsItem>
|
|
585
|
-
<MultiSelectChipsItem value="selected-hover"
|
|
600
|
+
<MultiSelectChipsItem value="selected-hover" dataset={{
|
|
601
|
+
hover: true
|
|
602
|
+
}}>
|
|
586
603
|
Selected hover
|
|
587
604
|
</MultiSelectChipsItem>
|
|
588
|
-
<MultiSelectChipsItem value="selected-active"
|
|
605
|
+
<MultiSelectChipsItem value="selected-active" dataset={{
|
|
606
|
+
active: true
|
|
607
|
+
}}>
|
|
589
608
|
Selected active
|
|
590
609
|
</MultiSelectChipsItem>
|
|
591
610
|
</>
|