@preply/ds-docs 11.4.0 → 11.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/{00.LayoutFlex.stories-BPok5Gmm.js → 00.LayoutFlex.stories-BqNKOxzc.js} +1 -1
- package/dist/assets/{00.applications-BGZaoKgL.js → 00.applications-CyJAiQf3.js} +1 -1
- package/dist/assets/{00.favicons.guide-D5wPncOn.js → 00.favicons.guide-BwKV7LgZ.js} +1 -1
- package/dist/assets/{00.token-explorer-BDLlwhc6.js → 00.token-explorer-D3HQJ3dy.js} +1 -1
- package/dist/assets/{00.using-responsive-props-BRxnFd5i.js → 00.using-responsive-props-CCkI1Tld.js} +1 -1
- package/dist/assets/{01.semantic-tokens-CFudZ7pc.js → 01.semantic-tokens-BK7BLZcq.js} +1 -1
- package/dist/assets/{01.using-shorthand-props-DchZCZhq.js → 01.using-shorthand-props-CBbf3XxB.js} +1 -1
- package/dist/assets/{10.Combinations.stories-BN4qNVGI.js → 10.Combinations.stories-TKz5kBVj.js} +1 -1
- package/dist/assets/{10.fonts.guide-BWS-fMyC.js → 10.fonts.guide-UdXB_iOK.js} +1 -1
- package/dist/assets/{10.ssr-DFhHeGSZ.js → 10.ssr-C1u7dvjT.js} +1 -1
- package/dist/assets/{11.fonts.explorer-BS1XxSRj.js → 11.fonts.explorer-CDjnXfid.js} +1 -1
- package/dist/assets/{11.ssr.app-router-CWuMPO3g.js → 11.ssr.app-router-Cs4FOPhH.js} +1 -1
- package/dist/assets/{20.libraries-J4C2b4WP.js → 20.libraries-ioSyK1LY.js} +1 -1
- package/dist/assets/{2025-q4-ds-cleanup-DzhmHakd.js → 2025-q4-ds-cleanup-DbXMK8WZ.js} +1 -1
- package/dist/assets/30.icons.explorer-6cQPOSNU.js +72 -0
- package/dist/assets/{30.storybook-1O5EtrKp.js → 30.storybook-DlAnWMKK.js} +1 -1
- package/dist/assets/{40.illustrations.explorer-C_NqekHv.js → 40.illustrations.explorer-B7_S_GNn.js} +1 -1
- package/dist/assets/{60.components-CxzcTHHY.js → 60.components-jfwjYYtD.js} +1 -1
- package/dist/assets/{90.advanced-J2ehdLM6.js → 90.advanced-Do_Wb8pV.js} +1 -1
- package/dist/assets/{Accordion-CWMWW-O5.js → Accordion-DlAp8KmP.js} +1 -1
- package/dist/assets/{Accordion.stories-DDqM6MXv.js → Accordion.stories-C12F7sjW.js} +1 -1
- package/dist/assets/{Accordion.tests.stories-DN9L-q3H.js → Accordion.tests.stories-CE9oHsW9.js} +1 -1
- package/dist/assets/{AlertBanner.primitives.stories-mKVHs8FF.js → AlertBanner.primitives.stories-WvY-_iZh.js} +1 -1
- package/dist/assets/{AlertBanner.stories-BV3lnGPY.js → AlertBanner.stories-F7Vn8C02.js} +1 -1
- package/dist/assets/{AlertBannerAction-DU-Yr-4k.js → AlertBannerAction-BYa4kXiw.js} +11 -11
- package/dist/assets/{AlertDialog-CFUnhRAx.js → AlertDialog-D7FoU9Mo.js} +1 -1
- package/dist/assets/{AlertDialog.stories-DovmfFOJ.js → AlertDialog.stories-DKp7VN29.js} +1 -1
- package/dist/assets/{Badge-DeL8OM1F.js → Badge-DWIG0IOC.js} +2 -2
- package/dist/assets/{Badge.stories-BemzPh97.js → Badge.stories-BMAaOyYW.js} +1 -1
- package/dist/assets/{Box-CcR4H93c.js → Box-C3D0dCXP.js} +1 -1
- package/dist/assets/{Box.stories-B4Kkg_Wz.js → Box.stories-BYLL5FQs.js} +1 -1
- package/dist/assets/{BubbleCounter-CfdjWlAV.js → BubbleCounter-C02fRH2E.js} +1 -1
- package/dist/assets/{BubbleCounter.stories-DRq0-Or2.js → BubbleCounter.stories-DMwREIgs.js} +1 -1
- package/dist/assets/{Button--WTUF97E.js → Button-_0pS2khJ.js} +2 -2
- package/dist/assets/{Button.stories-B5ddris9.js → Button.stories-DxmLSlgT.js} +1 -1
- package/dist/assets/{ButtonBase-CMQthdSK.js → ButtonBase-CMUecywM.js} +1 -1
- package/dist/assets/{CalloutBanner.stories-C60JgqC0.js → CalloutBanner.stories-YHmPUMKD.js} +1 -1
- package/dist/assets/{CalloutBannerText-DDPb7LsF.js → CalloutBannerText-BcIjTCPR.js} +4 -4
- package/dist/assets/{Checkbox.stories-D6wUFMNN.js → Checkbox.stories-DMh-0H-W.js} +1 -1
- package/dist/assets/{Checkbox.tests.stories-FLl_ZNDM.js → Checkbox.tests.stories-BwjQYoFK.js} +1 -1
- package/dist/assets/{Chips.stories-BfLNlLSh.js → Chips.stories-_gpuOeIw.js} +1 -1
- package/dist/assets/{Color-6BZIO3FS-CcuLIbdP.js → Color-6BZIO3FS-D9fH_9BP.js} +1 -1
- package/dist/assets/{ComposingDialogs.stories-Bwtla9z9.js → ComposingDialogs.stories-BtoJMTfu.js} +1 -1
- package/dist/assets/{ComposingPopovers.stories-BdgYJQKE.js → ComposingPopovers.stories-CBbifa2e.js} +1 -1
- package/dist/assets/CountryFlag-CqhLpgul.js +3 -0
- package/dist/assets/{CountryFlag.stories-B0_35WJ9.js → CountryFlag.stories-DCh8nQ3R.js} +1 -1
- package/dist/assets/{CountryFlag.test.stories-DGoCByQP.js → CountryFlag.test.stories-KdCwJQaC.js} +1 -1
- package/dist/assets/{Dialog-BT0Kd0KN.js → Dialog-DJ_22m-M.js} +1 -1
- package/dist/assets/Dialog.primitives.stories-_LjNw1Aq.js +193 -0
- package/dist/assets/{Dialog.stories-C0BUsh4I.js → Dialog.stories-BgLYxxSl.js} +1 -1
- package/dist/assets/{Dialog.test.stories-BapfC0Yd.js → Dialog.test.stories-CCA5_y47.js} +1 -1
- package/dist/assets/{DialogActions-BDIzA8PJ.js → DialogActions-D5TuMAHt.js} +1 -1
- package/dist/assets/{DialogCloseButton-CAY9jDgH.js → DialogCloseButton-V4tiko9-.js} +3 -3
- package/dist/assets/DismissibleChips-DIxEewPp.js +1 -0
- package/dist/assets/{DismissibleChips.stories-D8vGzcJU.js → DismissibleChips.stories-DTC-zjPX.js} +1 -1
- package/dist/assets/{DocsRenderer-LL677BLK-DZVr0WqC.js → DocsRenderer-LL677BLK-4u1YXi13.js} +1 -1
- package/dist/assets/{DropdownMenu-DJWxVTCB.js → DropdownMenu-L_qQlJsT.js} +9 -9
- package/dist/assets/{DropdownMenu.stories-CejSoUQc.js → DropdownMenu.stories-CS1tMRg_.js} +1 -1
- package/dist/assets/{FormControl-DoNLVcw2.js → FormControl-B3jdXz5i.js} +1 -1
- package/dist/assets/{FormControl.stories-CM0O-z49.js → FormControl.stories-D7X11Qhj.js} +1 -1
- package/dist/assets/{Heading-B3jb_-J8.js → Heading-DX-HCDkx.js} +1 -1
- package/dist/assets/{Heading.stories-DjrU1PaC.js → Heading.stories-DhvMfSFQ.js} +1 -1
- package/dist/assets/{Icon-Dqr2b6tP.js → Icon-BItN7xKl.js} +1 -1
- package/dist/assets/{Icon-RSC-CIkzpnfO.js → Icon-RSC-DjKuVLz1.js} +1 -1
- package/dist/assets/{Icon.stories-1leYoSZM.js → Icon.stories-FXAqY7I2.js} +1 -1
- package/dist/assets/IconButton-sZZtNos_.js +9 -0
- package/dist/assets/{IconTile.stories-C3MYzhR1.js → IconTile.stories-IpimMCpQ.js} +1 -1
- package/dist/assets/{IntegrationWithReactHookForm.stories-7-TsLOR4.js → IntegrationWithReactHookForm.stories-DsGQ7mGb.js} +1 -1
- package/dist/assets/{IntlFormattedCurrency.stories-C_afrVTI.js → IntlFormattedCurrency.stories-D53a5bAt.js} +1 -1
- package/dist/assets/{IntlFormattedDateTime.stories-DAllZCk9.js → IntlFormattedDateTime.stories-BjHGvxyx.js} +1 -1
- package/dist/assets/{LayoutFlex-BlWwmFhv.js → LayoutFlex-CEOcocT6.js} +1 -1
- package/dist/assets/{LayoutFlexItem-Ck-D8viJ.js → LayoutFlexItem-DJZHfd4G.js} +1 -1
- package/dist/assets/{LayoutGrid-BCMSACUf.js → LayoutGrid-Ce9ffWmL.js} +1 -1
- package/dist/assets/{LayoutGrid.stories-Dg8aAm6_.js → LayoutGrid.stories-CsbKauS5.js} +1 -1
- package/dist/assets/{LayoutGridItem-BbJwYcHo.js → LayoutGridItem-BtGWBhGr.js} +1 -1
- package/dist/assets/{Link-DbeaGxmu.js → Link-DLL8OonN.js} +1 -1
- package/dist/assets/{Link.stories-HNRLDW5Y.js → Link.stories-DlsXh361.js} +1 -1
- package/dist/assets/MultiSelectChips-BvRx5YLq.js +2 -0
- package/dist/assets/{MultiSelectChips.stories-0xhNcMZn.js → MultiSelectChips.stories-2TW7F44B.js} +1 -1
- package/dist/assets/{NativeSelectField.stories-D27xdDZT.js → NativeSelectField.stories-DmBdDAYW.js} +2 -2
- package/dist/assets/{NumberField-WzHWHpwG.js → NumberField-DW7lG9mg.js} +1 -1
- package/dist/assets/{NumberField.stories-CKWwzkFc.js → NumberField.stories-oR8Gegez.js} +1 -1
- package/dist/assets/{ObserveIntersection-zL3YLMv6.js → ObserveIntersection-Jf71_G5v.js} +1 -1
- package/dist/assets/{ObserveIntersection.stories-BXlW-mL4.js → ObserveIntersection.stories-C3o8aTAg.js} +1 -1
- package/dist/assets/{OnboardingTooltip-BzkMbW-Q.js → OnboardingTooltip-ANaVB8Qh.js} +1 -1
- package/dist/assets/{OnboardingTooltip.stories-DpuZirIf.js → OnboardingTooltip.stories-B2P2loQ_.js} +1 -1
- package/dist/assets/{OnboardingTooltip.tests.stories-DVqN90Ec.js → OnboardingTooltip.tests.stories-zXUt0NJE.js} +1 -1
- package/dist/assets/{OnboardingTour-Ba_vMjzP.js → OnboardingTour-ChdI2m_S.js} +1 -1
- package/dist/assets/{OnboardingTour.stories-CU5yOTSQ.js → OnboardingTour.stories-Bs8xxSkO.js} +3 -3
- package/dist/assets/{OnboardingTour.tests.stories-CPyK1i_w.js → OnboardingTour.tests.stories-9KaTQw8J.js} +1 -1
- package/dist/assets/{PasswordField-D3gN_VbU.js → PasswordField-CneYVFFH.js} +2 -2
- package/dist/assets/{PasswordField.stories-B_DbiPEY.js → PasswordField.stories-COup04RY.js} +1 -1
- package/dist/assets/{PreplyLogo-EsNyTV4m.js → PreplyLogo-Bu4ez8nc.js} +1 -1
- package/dist/assets/{PreplyLogo.stories-Bm6-o3h8.js → PreplyLogo.stories-BobbXEzY.js} +1 -1
- package/dist/assets/{ProgressBar.stories-BVBwLJ_h.js → ProgressBar.stories-Bib8wp9b.js} +1 -1
- package/dist/assets/{ProgressSteps.stories-DpVfrFPk.js → ProgressSteps.stories-D8soXV_p.js} +1 -1
- package/dist/assets/{PromoDialog-BpgSaMl7.js → PromoDialog-De2gYvXV.js} +1 -1
- package/dist/assets/{RangeSlider-CQsn2ggM.js → RangeSlider-BczA6Et9.js} +1 -1
- package/dist/assets/{RangeSlider.stories-B16rODmY.js → RangeSlider.stories-BfKXCzjC.js} +1 -1
- package/dist/assets/{Rating-CAaFjEvZ.js → Rating-RqfgDO9d.js} +1 -1
- package/dist/assets/{Rating.stories-8F2e8UDj.js → Rating.stories-CAB3TU9p.js} +1 -1
- package/dist/assets/{RatingInput-BNKHainW.js → RatingInput-BZjnrURY.js} +1 -1
- package/dist/assets/{RatingInput.stories-D07FYTPA.js → RatingInput.stories-BumN1i78.js} +1 -1
- package/dist/assets/{SelectField-CtnC30IK.js → SelectField-Ci40lkHJ.js} +2 -2
- package/dist/assets/{SelectField.stories-cV1joVTk.js → SelectField.stories-BzbCicRv.js} +1 -1
- package/dist/assets/{ShowOnIntersection-hAmOOTIR.js → ShowOnIntersection-BiVPS7mQ.js} +2 -2
- package/dist/assets/{ShowOnIntersection.stories-VS4hG4Et.js → ShowOnIntersection.stories-Cq68GulS.js} +1 -1
- package/dist/assets/SingleSelectChips-Dgw0qYjB.js +2 -0
- package/dist/assets/{SingleSelectChips.stories-Du0LL0gN.js → SingleSelectChips.stories-CTaYA6Yk.js} +1 -1
- package/dist/assets/{Slider-BgB4xT6m.js → Slider-DZQBnl2S.js} +1 -1
- package/dist/assets/{Slider.stories-B0uFs4_2.js → Slider.stories-D0ZL0kqe.js} +1 -1
- package/dist/assets/{Steps-Ny6Xdpfg.js → Steps-D3cRQC3d.js} +1 -1
- package/dist/assets/{Steps.stories-y16vX2RP.js → Steps.stories-DiKBPx9F.js} +1 -1
- package/dist/assets/{Switch.stories-D0M0AXLP.js → Switch.stories-wpsXwv-p.js} +1 -1
- package/dist/assets/{Text-Cy08WP3t.js → Text-BiCO96_r.js} +1 -1
- package/dist/assets/{Text.stories-kbD1oPtH.js → Text.stories-Dn10lUJM.js} +1 -1
- package/dist/assets/{TextField-DtzGGo-n.js → TextField-C5bFUM0q.js} +2 -2
- package/dist/assets/{TextField.stories-BfnbdAlj.js → TextField.stories-Dk6xmaqf.js} +1 -1
- package/dist/assets/{TextHighlighted-BLFuNeOz.js → TextHighlighted-Dau-4kMW.js} +1 -1
- package/dist/assets/{TextHighlighted.stories--iY-wUQl.js → TextHighlighted.stories-CP88FiIa.js} +1 -1
- package/dist/assets/{TextInline-kNMy4GiU.js → TextInline-Cx8xE15e.js} +1 -1
- package/dist/assets/{TextInline.stories-B4fTBAXp.js → TextInline.stories-5LuYQY-N.js} +1 -1
- package/dist/assets/{TextareaField-BAawMK2x.js → TextareaField-1Q9FqsHc.js} +1 -1
- package/dist/assets/{TextareaField.stories-uB9XCMh4.js → TextareaField.stories-Bs7pC0n_.js} +1 -1
- package/dist/assets/{Toast-DtwiCXf7.js → Toast-BZjsurC1.js} +1 -1
- package/dist/assets/{Toast.stories-DaMiazCZ.js → Toast.stories-uzy2Iqxo.js} +1 -1
- package/dist/assets/{Tooltip-BKkZoXDV.js → Tooltip-CX8T37NP.js} +1 -1
- package/dist/assets/{Tooltip.stories-wUZg70QA.js → Tooltip.stories-GnmHp_bX.js} +1 -1
- package/dist/assets/{Tooltip.tests.stories-CJYW12Q0.js → Tooltip.tests.stories-CoxZ2Mzn.js} +1 -1
- package/dist/assets/{ai-integration-CmKZr_5q.js → ai-integration-qIUPfaJz.js} +1 -1
- package/dist/assets/{breakpoints-BL8wVg74.js → breakpoints-BHIftKDH.js} +1 -1
- package/dist/assets/{breakpoints-vEwFHkjC.js → breakpoints-BO0KD_ym.js} +1 -1
- package/dist/assets/{breakpoints-BSvP6IHz.js → breakpoints-BoWDpBQq.js} +1 -1
- package/dist/assets/{changelog-wnfuTaGI.js → changelog-DMSLa5gf.js} +10 -1
- package/dist/assets/{constants-BRk8fyp8.js → constants-FY3oqVHd.js} +1 -1
- package/dist/assets/{createRequiredContext-BQNdOBzE.js → createRequiredContext-9tmtQKcI.js} +2 -2
- package/dist/assets/{dist-dJR9l15z.js → dist-CxlmHSsk.js} +1 -1
- package/dist/assets/{esm-QYJ12Nr4.js → esm-raxNxvJf.js} +1 -1
- package/dist/assets/{fonts-explorer.stories-DLPdV7wh.js → fonts-explorer.stories-i_p7YItV.js} +1 -1
- package/dist/assets/{getTokenVar-lvBbQceM.js → getTokenVar-4EmFJzte.js} +1 -1
- package/dist/assets/{gradientBorders-DODVBPY0.js → gradientBorders-DJrc2s0y.js} +1 -1
- package/dist/assets/{hover-DgEYlXBi.js → hover-DNtNop2y.js} +1 -1
- package/dist/assets/{hover-yxmGi-zx.js → hover-fkMFUnk3.js} +1 -1
- package/dist/assets/{hover-Cc8ZlfuU.js → hover-glItH_Lr.js} +1 -1
- package/dist/assets/{iframe-BuOXI2w6.js → iframe-Czcvpvgg.js} +4 -4
- package/dist/assets/{intro-B-CaE2_E.js → intro-CyzFu4JY.js} +1 -1
- package/dist/assets/{migrating-from-less-ClH17s_P.js → migrating-from-less-2bmmx-e1.js} +1 -1
- package/dist/assets/{tokens-DOxuMF98.js → tokens-DW7LgqLI.js} +1 -1
- package/dist/assets/{tokens-DLKIEc5T.js → tokens-DxS0cNj0.js} +1 -1
- package/dist/assets/{tokens-BF6xltNI.js → tokens-iE0hKajS.js} +1 -1
- package/dist/assets/{usePortalElement-Cqy1sSsS.js → usePortalElement-BUBRjIYT.js} +1 -1
- package/dist/assets/{welcome-CA82uuQ9.js → welcome-BIdOz8Yn.js} +1 -1
- package/dist/assets/{zeroheight-BZmC6gtY.js → zeroheight-BX9Z_BVr.js} +1 -1
- package/dist/iframe.html +1 -1
- package/dist/index.json +1 -1
- package/dist/preview-stats.json +15372 -15348
- package/dist/project.json +1 -1
- package/package.json +5 -5
- package/pages/30.guides/70.assets/constants/icon-imports.ts +4 -0
- package/dist/assets/30.icons.explorer-DkBObzh_.js +0 -72
- package/dist/assets/CountryFlag-D1d90EPT.js +0 -3
- package/dist/assets/Dialog.primitives.stories-DNe9f6uf.js +0 -237
- package/dist/assets/DismissibleChips-CMpz1ljr.js +0 -1
- package/dist/assets/IconButton-CQGXuX8O.js +0 -9
- package/dist/assets/MultiSelectChips-Bs8MJsJe.js +0 -2
- package/dist/assets/SingleSelectChips-lT5C7a2D.js +0 -2
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{at as r,it as i,t as a,w as o,x as s,y as c}from"./dist-DtfJeYQK.js";import{t as l}from"./jsx-runtime-C2wGStra.js";import{n as u,t as d}from"./dist-Cc1j9Pjk.js";import{n as f,t as p}from"./render-icon-CUp_n6rD.js";import{n as m,t as h}from"./ButtonBase-
|
|
1
|
+
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{at as r,it as i,t as a,w as o,x as s,y as c}from"./dist-DtfJeYQK.js";import{t as l}from"./jsx-runtime-C2wGStra.js";import{n as u,t as d}from"./dist-Cc1j9Pjk.js";import{n as f,t as p}from"./render-icon-CUp_n6rD.js";import{n as m,t as h}from"./ButtonBase-CMUecywM.js";var g,_,v,y,b,x=t((()=>{g=`Button__zN6zT`,_=`leadingIcon__wQqJW`,v=`trailingIcon__zChSf`,y=`icon__sU6GA`,b={Button:g,leadingIcon:_,trailingIcon:v,"Button--size-s":`Button--size-s__yKEFo`,icon:y,"Button--size-m":`Button--size-m__-0jeH`,"Button--size-small":`Button--size-small__xrFvg`,"Button--size-medium":`Button--size-medium__Mc1B1`,"Button--size-l":`Button--size-l__7gew2`,"Button--size-large":`Button--size-large__LejpK`,"Button--narrow-l--size-s":`Button--narrow-l--size-s__oKIHq`,"Button--narrow-l--size-m":`Button--narrow-l--size-m__FfkOA`,"Button--narrow-l--size-small":`Button--narrow-l--size-small__y-M26`,"Button--narrow-l--size-medium":`Button--narrow-l--size-medium__so23Y`,"Button--narrow-l--size-l":`Button--narrow-l--size-l__xZOAd`,"Button--narrow-l--size-large":`Button--narrow-l--size-large__8clcn`,"Button--medium-s--size-s":`Button--medium-s--size-s__I-GoC`,"Button--medium-s--size-m":`Button--medium-s--size-m__Fk3sj`,"Button--medium-s--size-small":`Button--medium-s--size-small__N-91h`,"Button--medium-s--size-medium":`Button--medium-s--size-medium__sRSxR`,"Button--medium-s--size-l":`Button--medium-s--size-l__QXDbD`,"Button--medium-s--size-large":`Button--medium-s--size-large__Rtei-`,"Button--medium-l--size-s":`Button--medium-l--size-s__YqR0K`,"Button--medium-l--size-m":`Button--medium-l--size-m__BaJ0d`,"Button--medium-l--size-small":`Button--medium-l--size-small__iP5bS`,"Button--medium-l--size-medium":`Button--medium-l--size-medium__JanvZ`,"Button--medium-l--size-l":`Button--medium-l--size-l__ps0aM`,"Button--medium-l--size-large":`Button--medium-l--size-large__2gVOL`,"Button--wide-s--size-s":`Button--wide-s--size-s__OE3Yz`,"Button--wide-s--size-m":`Button--wide-s--size-m__H2KPf`,"Button--wide-s--size-small":`Button--wide-s--size-small__lDDYF`,"Button--wide-s--size-medium":`Button--wide-s--size-medium__CoePZ`,"Button--wide-s--size-l":`Button--wide-s--size-l__gcSoP`,"Button--wide-s--size-large":`Button--wide-s--size-large__KLj98`,"Button--wide-l--size-s":`Button--wide-l--size-s__HAZa1`,"Button--wide-l--size-m":`Button--wide-l--size-m__xB4x0`,"Button--wide-l--size-small":`Button--wide-l--size-small__WdoWT`,"Button--wide-l--size-medium":`Button--wide-l--size-medium__KgZbS`,"Button--wide-l--size-l":`Button--wide-l--size-l__rw5N1`,"Button--wide-l--size-large":`Button--wide-l--size-large__7TyOT`}})),S,C,w,T=t((()=>{o(),d(),a(),S=e(n(),1),p(),m(),x(),C=l(),w=(0,S.forwardRef)(function({variant:e=r,size:t=i,url:n,a11yLabel:a,leadingSvgIcon:o,trailingSvgIcon:l,children:d,...p},m){let g=!!o||!!l,_=c(b,u.Button,[s(`size`,t)]);return(0,C.jsxs)(h,{...p,ref:m,isIconButton:!1,variant:e,size:t,url:n,a11yLabel:a,preplyDsComponent:u.Button,className:g?_.join(` `):``,children:[!!o&&(0,C.jsx)(`span`,{className:`${b.icon} ${b.leadingIcon}`,children:f(o,{"aria-hidden":`true`,focusable:`false`})}),d,!!l&&(0,C.jsx)(`span`,{className:`${b.icon} ${b.trailingIcon}`,children:f(l,{"aria-hidden":`true`,focusable:`false`})})]})});try{w.displayName=`Button`,w.__docgenInfo={description:``,displayName:`Button`,props:{id:{defaultValue:null,description:``,name:`id`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},onClick:{defaultValue:null,description:``,name:`onClick`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},disabled:{defaultValue:null,description:``,name:`disabled`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},onKeyDown:{defaultValue:null,description:``,name:`onKeyDown`,required:!1,type:{name:`enum`,value:[{value:`KeyboardEventHandler`}]}},onKeyUp:{defaultValue:null,description:``,name:`onKeyUp`,required:!1,type:{name:`enum`,value:[{value:`KeyboardEventHandler`}]}},onMouseDown:{defaultValue:null,description:``,name:`onMouseDown`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onMouseEnter:{defaultValue:null,description:``,name:`onMouseEnter`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onMouseMove:{defaultValue:null,description:``,name:`onMouseMove`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onMouseUp:{defaultValue:null,description:``,name:`onMouseUp`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onPointerDown:{defaultValue:null,description:``,name:`onPointerDown`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onPointerEnter:{defaultValue:null,description:``,name:`onPointerEnter`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},as:{defaultValue:null,description:`Custom element to render the button.
|
|
2
2
|
|
|
3
3
|
Allows rendering the button using a different React element or component.
|
|
4
4
|
This is particularly useful for integrating with router libraries like \`react-router\` or \`next/router\`.
|
|
5
5
|
@example // Render as a react router link component
|
|
6
6
|
import { Link } from 'react-router-dom';
|
|
7
7
|
|
|
8
|
-
<ButtonBase as={<Link to="/home" />} />`,name:`as`,required:!1,type:{name:`enum`,value:[{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}},
|
|
8
|
+
<ButtonBase as={<Link to="/home" />} />`,name:`as`,required:!1,type:{name:`enum`,value:[{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}},size:{defaultValue:{value:`small`},description:``,name:`size`,required:!1,type:{name:`enum`,value:[{value:`"small"`},{value:`"medium"`},{value:`"large"`},{value:`ResponsiveProp<ButtonSize>`}]}},assistiveText:{defaultValue:null,description:``,name:`assistiveText`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},url:{defaultValue:null,description:"@deprecated Use `href` instead",name:`url`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},href:{defaultValue:null,description:``,name:`href`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},selected:{defaultValue:null,description:`Used only for classroom and ghost variants`,name:`selected`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},download:{defaultValue:null,description:``,name:`download`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},wrap:{defaultValue:null,description:``,name:`wrap`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},variant:{defaultValue:{value:`primary`},description:``,name:`variant`,required:!1,type:{name:`enum`,value:[{value:`"ai"`},{value:`"inverted"`},{value:`"critical"`},{value:`"tertiary"`},{value:`"primary"`},{value:`"secondary"`},{value:`"quaternary"`},{value:`"ghost"`},{value:`"onColor"`},{value:`"classroom"`},{value:`"primaryB2b"`},{value:`"primaryTutor"`},{value:`"newFeature"`}]}},opensInNewTab:{defaultValue:null,description:``,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`}]}},fullWidth:{defaultValue:null,description:``,name:`fullWidth`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`},{value:`ResponsiveProp<boolean>`}]}},submitsForm:{defaultValue:null,description:``,name:`submitsForm`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},busy:{defaultValue:null,description:`Replaces the content with a loading indicator.`,name:`busy`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},a11yLabel:{defaultValue:null,description:"@deprecated Use `assistiveText` instead",name:`a11yLabel`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},dsInternalSimulation:{defaultValue:null,description:`@deprecated This is meant for internal DS usage only. Do not use it in your code.
|
|
9
9
|
@ignore`,name:`dsInternalSimulation`,required:!1,type:{name:`enum`,value:[{value:`"hover"`},{value:`"focus"`},{value:`"active"`}]}},leadingSvgIcon:{defaultValue:null,description:`The leading SVG icon.
|
|
10
10
|
@example import TokyoUITag from '@preply/ds-media-icons/dist/24/TokyoUITag.svg';
|
|
11
11
|
|
|
@@ -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-BiCO96_r.js";import{n as u,t as d}from"./Button-_0pS2khJ.js";import{n as f,t as p}from"./IconButton-sZZtNos_.js";import{r as m,t as h}from"./storybook-utils-BfrlMSeG.js";import{n as g,t as _}from"./TokyoUIFav-B1g1wYYK.js";var v,y,b,x,S,C,w,T,E,D,O,k,A,j;t((()=>{o(),g(),a(),v=e(n(),1),f(),u(),c(),h(),y=s(),b={title:`components/Button`,component:d,subcomponents:{IconButton:p},argTypes:{size:{description:m},fullWidth:{description:m}}},x=()=>(0,y.jsxs)(`div`,{style:{display:`flex`,gap:`1rem`},children:[(0,y.jsx)(d,{children:`Button`}),(0,y.jsx)(d,{leadingSvgIcon:_,children:`Button`}),(0,y.jsx)(d,{trailingSvgIcon:_,children:`Button`}),(0,y.jsx)(p,{svg:_,assistiveText:`Favourite`})]}),x.tags=[`!autodocs`,`!test`],x.parameters={chromatic:{disableSnapshot:!0}},S=()=>{let e=r(i.background.primaryInverted);return(0,y.jsxs)(`div`,{style:{display:`flex`,gap:`1rem`},children:[(0,y.jsx)(d,{variant:`primary`,children:`Primary`}),(0,y.jsx)(d,{variant:`secondary`,children:`Secondary`}),(0,y.jsx)(d,{variant:`tertiary`,children:`Tertiary`}),(0,y.jsx)(d,{variant:`ghost`,children:`Ghost`}),(0,y.jsx)(`div`,{style:{backgroundColor:e,borderRadius:`8px`},children:(0,y.jsx)(d,{variant:`inverted`,children:`Inverted`})}),(0,y.jsx)(d,{variant:`critical`,children:`Critical`}),(0,y.jsx)(d,{variant:`onColor`,children:`onColor`})]})},C=()=>{let e=r(i.background.primaryInverted);return(0,y.jsxs)(`div`,{style:{display:`flex`,gap:`1rem`},children:[(0,y.jsx)(p,{variant:`primary`,svg:_,assistiveText:`primary`}),(0,y.jsx)(p,{variant:`secondary`,svg:_,assistiveText:`secondary`}),(0,y.jsx)(p,{variant:`tertiary`,svg:_,assistiveText:`tertiary`}),(0,y.jsx)(p,{variant:`ghost`,svg:_,assistiveText:`ghost`}),(0,y.jsx)(`div`,{style:{backgroundColor:e,borderRadius:`8px`},children:(0,y.jsx)(p,{variant:`inverted`,svg:_,assistiveText:`inverted`})}),(0,y.jsx)(p,{variant:`critical`,svg:_,assistiveText:`critical`}),(0,y.jsx)(p,{variant:`onColor`,svg:_,assistiveText:`onColor`})]})},C.storyName=`Variants (IconButton)`,w=()=>{let e=r(i.background.primaryInverted);return(0,y.jsxs)(`div`,{style:{display:`flex`,gap:`8px`},children:[(0,y.jsxs)(`div`,{style:{display:`flex`,gap:`4px`},children:[(0,y.jsx)(d,{variant:`ai`,children:`AI`}),(0,y.jsx)(p,{variant:`ai`,svg:_,assistiveText:`Fav`})]}),(0,y.jsxs)(`div`,{style:{display:`flex`,gap:`4px`,backgroundColor:e},children:[(0,y.jsx)(d,{variant:`classroom`,children:`Classroom`}),(0,y.jsx)(p,{variant:`classroom`,svg:_,assistiveText:`Fav`}),(0,y.jsx)(p,{variant:`classroom`,svg:_,assistiveText:`Fav`,selected:!0})]})]})},T=()=>(0,y.jsxs)(`div`,{style:{display:`flex`,alignItems:`center`,gap:`8px`},children:[(0,y.jsxs)(`div`,{style:{display:`flex`,gap:`4px`},children:[(0,y.jsx)(d,{size:`small`,children:`Small`}),(0,y.jsx)(p,{size:`small`,svg:_,assistiveText:`Fav`})]}),(0,y.jsxs)(`div`,{style:{display:`flex`,gap:`4px`},children:[(0,y.jsx)(d,{size:`medium`,children:`Medium`}),(0,y.jsx)(p,{size:`medium`,svg:_,assistiveText:`Fav`})]}),(0,y.jsxs)(`div`,{style:{display:`flex`,gap:`4px`},children:[(0,y.jsx)(d,{size:`large`,children:`Large`}),(0,y.jsx)(p,{size:`large`,svg:_,assistiveText:`Fav`})]})]}),E=()=>(0,y.jsxs)(y.Fragment,{children:[(0,y.jsx)(d,{wrap:!0,size:`small`,children:`Do the really quite unusually long thing`}),(0,y.jsx)(d,{wrap:!0,size:`medium`,children:`Do the really quite unusually long thing`}),(0,y.jsx)(d,{wrap:!0,size:`large`,children:`Do the really quite unusually long thing`})]}),E.tags=[`!autodocs`],E.decorators=[e=>(0,y.jsx)(`div`,{style:{width:`200px`},children:e()})],D=()=>(0,y.jsx)(d,{size:{_:`small`,"medium-l":`medium`,"wide-s":`large`},leadingSvgIcon:_,children:`Change the viewport size`}),D.parameters={chromatic:{modes:{"narrow-l":{viewport:`narrow-l`},"medium-l":{viewport:`medium-l`},"wide-s":{viewport:`wide-s`}}}},O=()=>{let e=r(i.background.primaryInverted);return(0,y.jsx)(`div`,{style:{display:`flex`,gap:`16px`,flexDirection:`column`},children:[`small`,`medium`,`large`].map(t=>[`primary`,`secondary`,`tertiary`,`ghost`,`inverted`,`critical`,`ai`,`onColor`,`classroom`].map(n=>(0,y.jsxs)(v.Fragment,{children:[(0,y.jsxs)(l,{variant:`default-regular-italic`,children:[n,` - `,t]}),(0,y.jsxs)(`div`,{style:{display:`flex`,gap:`16px`,backgroundColor:n===`inverted`||n===`classroom`?e:void 0},children:[(0,y.jsx)(d,{size:t,variant:n,children:`button`}),(0,y.jsx)(d,{size:t,variant:n,leadingSvgIcon:_,children:`button`}),(0,y.jsx)(d,{size:t,variant:n,trailingSvgIcon:_,children:`button`}),(0,y.jsx)(d,{size:t,variant:n,busy:!0,assistiveText:`Fav`,children:`button`}),(0,y.jsx)(d,{size:t,variant:n,disabled:!0,children:`disabled`}),(0,y.jsx)(d,{size:t,variant:n,dataset:{hover:!0},children:`hover`}),(0,y.jsx)(d,{size:t,variant:n,dataset:{active:!0},children:`active`}),(0,y.jsx)(d,{size:t,variant:n,dataset:{focus:!0},children:`focus`})]},`${t}-${n}`)]},`${t}-${n}`)))})},O.parameters={pseudo:{hover:`[data-hover="true"]`,active:`[data-active="true"]`,focusVisible:`[data-focus="true"]`}},O.tags=[`!autodocs`],k=()=>{let e=r(i.background.primaryInverted);return(0,y.jsx)(`div`,{style:{display:`flex`,gap:`16px`,flexDirection:`column`},children:[`small`,`medium`,`large`].map(t=>[`primary`,`secondary`,`tertiary`,`ghost`,`inverted`,`critical`,`ai`,`onColor`,`classroom`].map(n=>(0,y.jsxs)(y.Fragment,{children:[(0,y.jsxs)(l,{variant:`default-regular-italic`,children:[n,` - `,t]}),(0,y.jsxs)(`div`,{style:{display:`flex`,gap:`16px`,backgroundColor:n===`inverted`||n===`classroom`?e:void 0},children:[(0,y.jsx)(p,{svg:_,assistiveText:`fav`,size:t,variant:n}),(0,y.jsx)(p,{svg:_,assistiveText:`fav`,size:t,variant:n,busy:!0}),(0,y.jsx)(p,{svg:_,assistiveText:`fav`,size:t,variant:n,disabled:!0}),(0,y.jsx)(p,{svg:_,assistiveText:`fav`,size:t,variant:n,dataset:{hover:!0}}),(0,y.jsx)(p,{svg:_,assistiveText:`fav`,size:t,variant:n,dataset:{active:!0}}),(0,y.jsx)(p,{svg:_,assistiveText:`fav`,size:t,variant:n,dataset:{focus:!0}})]},`${t}-${n}`)]})))})},k.parameters={pseudo:{hover:`[data-hover="true"]`,active:`[data-active="true"]`,focusVisible:`[data-focus="true"]`}},k.storyName=`Combinations (IconButton)`,k.tags=[`!autodocs`],A={parameters:{chromatic:{disableSnapshot:!0}},decorators:[(e,{args:t})=>(0,y.jsx)(`div`,{style:{backgroundColor:t.variant===`inverted`?`black`:void 0},children:e()})],args:{children:`Button`,dataset:{qaid:`button`}},argTypes:{children:{control:`text`},dataset:{control:`object`},assistiveText:{control:`text`},disabled:{control:`boolean`},fullWidth:{control:`boolean`},wrap:{control:`boolean`},href:{control:`text`},download:{control:`boolean`},opensInNewTab:{control:`boolean`},nofollow:{control:`boolean`},submitsForm:{control:`boolean`},busy:{control:`boolean`},leadingSvgIcon:{options:[`None`,`With Icon`],mapping:{None:void 0,"With Icon":_},control:`select`},trailingSvgIcon:{options:[`None`,`With Icon`],mapping:{None:void 0,"With Icon":_},control:`select`},url:{table:{disable:!0}},a11yLabel:{table:{disable:!0}}}},x.parameters={...x.parameters,docs:{...x.parameters?.docs,source:{originalSource:`() => <div style={{
|
|
2
2
|
display: 'flex',
|
|
3
3
|
gap: '1rem'
|
|
4
4
|
}}>
|
|
@@ -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{_ as r,at as i,b as a,gt as o,ht as s,it as ee,mt as c,s as l,t as u,w as d,x as f,y as p}from"./dist-DtfJeYQK.js";import{t as m}from"./jsx-runtime-C2wGStra.js";import{n as h,t as g}from"./filterAttributesPassedByRadixUIAtRuntime-CGiuUnR2.js";import{n as _,t as v}from"./useMergeRefs-BZP37fIn.js";import{n as y,t as b}from"./Spinner-B-14zfoF.js";var x,S,C=t((()=>{x=`ButtonBase__0qXGj`,S={"button-width--width-full":`button-width--width-full__nxjVK`,"button-width--width-auto":`button-width--width-auto__CngVf`,"button-width--narrow-l--width-full":`button-width--narrow-l--width-full__rZc8T`,"button-width--narrow-l--width-auto":`button-width--narrow-l--width-auto__Fs14X`,"button-width--medium-s--width-full":`button-width--medium-s--width-full__lb8XX`,"button-width--medium-s--width-auto":`button-width--medium-s--width-auto__gtajp`,"button-width--medium-l--width-full":`button-width--medium-l--width-full__qOGDr`,"button-width--medium-l--width-auto":`button-width--medium-l--width-auto__vFKgm`,"button-width--wide-s--width-full":`button-width--wide-s--width-full__5nhxD`,"button-width--wide-s--width-auto":`button-width--wide-s--width-auto__J4Ht3`,"button-width--wide-l--width-full":`button-width--wide-l--width-full__Rsexc`,"button-width--wide-l--width-auto":`button-width--wide-l--width-auto__k6Ctk`,ButtonBase:x,"ButtonBase--content":`ButtonBase--content__ZEhK4`,"ButtonBase--is-icon-button":`ButtonBase--is-icon-button__CDG-9`,"ButtonBase--is-icon-button-size-large":`ButtonBase--is-icon-button-size-large__bebMj`,"ButtonBase--busy":`ButtonBase--busy__M2Cgo`,"ButtonBase--dsInternalSimulation-focus":`ButtonBase--dsInternalSimulation-focus__xhIA9`,"ButtonBase--is-busy":`ButtonBase--is-busy__FT7vR`,"ButtonBase--width-full":`ButtonBase--width-full__0ENoK`,"ButtonBase--width-auto":`ButtonBase--width-auto__vwDOv`,"ButtonBase--narrow-l--width-full":`ButtonBase--narrow-l--width-full__-H9pn`,"ButtonBase--narrow-l--width-auto":`ButtonBase--narrow-l--width-auto__2i3td`,"ButtonBase--medium-s--width-full":`ButtonBase--medium-s--width-full__sNHbR`,"ButtonBase--medium-s--width-auto":`ButtonBase--medium-s--width-auto__6T6zO`,"ButtonBase--medium-l--width-full":`ButtonBase--medium-l--width-full__FTcYM`,"ButtonBase--medium-l--width-auto":`ButtonBase--medium-l--width-auto__KPNbM`,"ButtonBase--wide-s--width-full":`ButtonBase--wide-s--width-full__YgEMT`,"ButtonBase--wide-s--width-auto":`ButtonBase--wide-s--width-auto__nM-ia`,"ButtonBase--wide-l--width-full":`ButtonBase--wide-l--width-full__CFPdD`,"ButtonBase--wide-l--width-auto":`ButtonBase--wide-l--width-auto__6gGyZ`,"ButtonBase--size-large":`ButtonBase--size-large__-OxgW`,"ButtonBase--size-medium":`ButtonBase--size-medium__YgQDT`,"ButtonBase--is-icon-button-size-medium":`ButtonBase--is-icon-button-size-medium__AC6Cq`,"ButtonBase--size-small":`ButtonBase--size-small__UMBKe`,"ButtonBase--is-icon-button-size-small":`ButtonBase--is-icon-button-size-small__hZmvi`,"ButtonBase--narrow-l--size-large":`ButtonBase--narrow-l--size-large__jbaAB`,"ButtonBase--narrow-l--is-icon-button-size-large":`ButtonBase--narrow-l--is-icon-button-size-large__UIpIh`,"ButtonBase--narrow-l--size-medium":`ButtonBase--narrow-l--size-medium__62t1K`,"ButtonBase--narrow-l--is-icon-button-size-medium":`ButtonBase--narrow-l--is-icon-button-size-medium__r2nuk`,"ButtonBase--narrow-l--size-small":`ButtonBase--narrow-l--size-small__8uFFR`,"ButtonBase--narrow-l--is-icon-button-size-small":`ButtonBase--narrow-l--is-icon-button-size-small__CkKxU`,"ButtonBase--medium-s--size-large":`ButtonBase--medium-s--size-large__XpFoi`,"ButtonBase--medium-s--is-icon-button-size-large":`ButtonBase--medium-s--is-icon-button-size-large__-IvSU`,"ButtonBase--medium-s--size-medium":`ButtonBase--medium-s--size-medium__ZA4JC`,"ButtonBase--medium-s--is-icon-button-size-medium":`ButtonBase--medium-s--is-icon-button-size-medium__946RE`,"ButtonBase--medium-s--size-small":`ButtonBase--medium-s--size-small__nNIDt`,"ButtonBase--medium-s--is-icon-button-size-small":`ButtonBase--medium-s--is-icon-button-size-small__aAjgr`,"ButtonBase--medium-l--size-large":`ButtonBase--medium-l--size-large__yo-U7`,"ButtonBase--medium-l--is-icon-button-size-large":`ButtonBase--medium-l--is-icon-button-size-large__3ORQx`,"ButtonBase--medium-l--size-medium":`ButtonBase--medium-l--size-medium__N9rbz`,"ButtonBase--medium-l--is-icon-button-size-medium":`ButtonBase--medium-l--is-icon-button-size-medium__EFk6V`,"ButtonBase--medium-l--size-small":`ButtonBase--medium-l--size-small__FMlot`,"ButtonBase--medium-l--is-icon-button-size-small":`ButtonBase--medium-l--is-icon-button-size-small__Ak0TL`,"ButtonBase--wide-s--size-large":`ButtonBase--wide-s--size-large__ASjU0`,"ButtonBase--wide-s--is-icon-button-size-large":`ButtonBase--wide-s--is-icon-button-size-large__hF4qT`,"ButtonBase--wide-s--size-medium":`ButtonBase--wide-s--size-medium__glo8Q`,"ButtonBase--wide-s--is-icon-button-size-medium":`ButtonBase--wide-s--is-icon-button-size-medium__W-O0C`,"ButtonBase--wide-s--size-small":`ButtonBase--wide-s--size-small__b10zZ`,"ButtonBase--wide-s--is-icon-button-size-small":`ButtonBase--wide-s--is-icon-button-size-small__-E8EY`,"ButtonBase--wide-l--size-large":`ButtonBase--wide-l--size-large__qXddN`,"ButtonBase--wide-l--is-icon-button-size-large":`ButtonBase--wide-l--is-icon-button-size-large__ceEkB`,"ButtonBase--wide-l--size-medium":`ButtonBase--wide-l--size-medium__OPxKX`,"ButtonBase--wide-l--is-icon-button-size-medium":`ButtonBase--wide-l--is-icon-button-size-medium__dAxcc`,"ButtonBase--wide-l--size-small":`ButtonBase--wide-l--size-small__tqGj-`,"ButtonBase--wide-l--is-icon-button-size-small":`ButtonBase--wide-l--is-icon-button-size-small__cCSAh`,"ButtonBase--variant-primary":`ButtonBase--variant-primary__oSRJV`,"ButtonBase--variant-primary--dsInternalSimulation-hover":`ButtonBase--variant-primary--dsInternalSimulation-hover__D7OCC`,"ButtonBase--variant-primary--dsInternalSimulation-active":`ButtonBase--variant-primary--dsInternalSimulation-active__V0iju`,"ButtonBase--variant-secondary":`ButtonBase--variant-secondary__APosz`,"ButtonBase--variant-secondary--dsInternalSimulation-hover":`ButtonBase--variant-secondary--dsInternalSimulation-hover__5F1t-`,"ButtonBase--variant-secondary--dsInternalSimulation-active":`ButtonBase--variant-secondary--dsInternalSimulation-active__MwFWM`,"ButtonBase--variant-tertiary":`ButtonBase--variant-tertiary__oSJoa`,"ButtonBase--variant-tertiary--dsInternalSimulation-hover":`ButtonBase--variant-tertiary--dsInternalSimulation-hover__juCHk`,"ButtonBase--variant-tertiary--dsInternalSimulation-active":`ButtonBase--variant-tertiary--dsInternalSimulation-active__CZKvj`,"ButtonBase--variant-quaternary":`ButtonBase--variant-quaternary__gX2sB`,"ButtonBase--variant-quaternary--dsInternalSimulation-hover":`ButtonBase--variant-quaternary--dsInternalSimulation-hover__Hzaa5`,"ButtonBase--variant-quaternary--dsInternalSimulation-active":`ButtonBase--variant-quaternary--dsInternalSimulation-active__cKsaN`,"ButtonBase--variant-ghost":`ButtonBase--variant-ghost__pR3-X`,"ButtonBase--variant-ghost--dsInternalSimulation-hover":`ButtonBase--variant-ghost--dsInternalSimulation-hover__O2HFh`,"ButtonBase--variant-ghost--dsInternalSimulation-active":`ButtonBase--variant-ghost--dsInternalSimulation-active__CvLh8`,"ButtonBase--variant-ghost--is-selected":`ButtonBase--variant-ghost--is-selected__mS0Le`,"ButtonBase--variant-critical":`ButtonBase--variant-critical__-t4Qu`,"ButtonBase--variant-critical--dsInternalSimulation-hover":`ButtonBase--variant-critical--dsInternalSimulation-hover__iyVj2`,"ButtonBase--variant-critical--dsInternalSimulation-active":`ButtonBase--variant-critical--dsInternalSimulation-active__2RACT`,"ButtonBase--variant-onColor":`ButtonBase--variant-onColor__Hgon2`,"ButtonBase--variant-onColor--dsInternalSimulation-hover":`ButtonBase--variant-onColor--dsInternalSimulation-hover__8ca7h`,"ButtonBase--variant-onColor--dsInternalSimulation-active":`ButtonBase--variant-onColor--dsInternalSimulation-active__OxSu7`,"ButtonBase--variant-classroom":`ButtonBase--variant-classroom__ZiZjl`,"ButtonBase--variant-classroom--dsInternalSimulation-hover":`ButtonBase--variant-classroom--dsInternalSimulation-hover__Fy83L`,"ButtonBase--variant-classroom--dsInternalSimulation-active":`ButtonBase--variant-classroom--dsInternalSimulation-active__88eK7`,"ButtonBase--variant-classroom--is-selected":`ButtonBase--variant-classroom--is-selected__GHt9-`,"ButtonBase--variant-primaryB2b":`ButtonBase--variant-primaryB2b__q-vvW`,"ButtonBase--variant-primaryB2b--dsInternalSimulation-hover":`ButtonBase--variant-primaryB2b--dsInternalSimulation-hover__Nrl78`,"ButtonBase--variant-primaryB2b--dsInternalSimulation-active":`ButtonBase--variant-primaryB2b--dsInternalSimulation-active__IGZDa`,"ButtonBase--variant-primaryTutor":`ButtonBase--variant-primaryTutor__B6BAn`,"ButtonBase--variant-primaryTutor--dsInternalSimulation-hover":`ButtonBase--variant-primaryTutor--dsInternalSimulation-hover__HXGA0`,"ButtonBase--variant-primaryTutor--dsInternalSimulation-active":`ButtonBase--variant-primaryTutor--dsInternalSimulation-active__FCV-3`,"ButtonBase--variant-inverted":`ButtonBase--variant-inverted__9yknJ`,"ButtonBase--variant-inverted--dsInternalSimulation-hover":`ButtonBase--variant-inverted--dsInternalSimulation-hover__oX9GA`,"ButtonBase--variant-inverted--dsInternalSimulation-active":`ButtonBase--variant-inverted--dsInternalSimulation-active__-HnsQ`,"ButtonBase--variant-newFeature":`ButtonBase--variant-newFeature__8uk2D`,"ButtonBase--variant-newFeature--dsInternalSimulation-hover":`ButtonBase--variant-newFeature--dsInternalSimulation-hover__plXXr`,"ButtonBase--variant-newFeature--dsInternalSimulation-active":`ButtonBase--variant-newFeature--dsInternalSimulation-active__yDfE1`,"ButtonBase--variant-ai":`ButtonBase--variant-ai__iq9tW`,"ButtonBase--variant-ai--dsInternalSimulation-hover":`ButtonBase--variant-ai--dsInternalSimulation-hover__78mV7`,"ButtonBase--variant-ai--dsInternalSimulation-active":`ButtonBase--variant-ai--dsInternalSimulation-active__48Tn0`,"ButtonBase--no-wrap":`ButtonBase--no-wrap__8TMhQ`}})),w,T,E,D,O,k=t((()=>{d(),u(),w=e(n(),1),h(),C(),y(),v(),T=m(),E=`ButtonBase`,D=({children:e,busy:t})=>{let n=[...a(S,E,[`content`])],r=[...a(S,E,[`busy`])];return(0,T.jsxs)(T.Fragment,{children:[(0,T.jsx)(`span`,{className:n.join(` `),children:e}),t&&(0,T.jsx)(`span`,{className:r.join(` `),children:(0,T.jsx)(b,{})})]})},O=(0,w.forwardRef)(function(e,t){let{id:n,variant:a=i,size:u=ee,fullWidth:d=!1,wrap:m=!1,href:h,download:v,opensInNewTab:y,nofollow:b,submitsForm:x,assistiveText:C,onClick:O,onKeyDown:k,onKeyUp:A,onMouseDown:j,onMouseUp:te,onMouseEnter:ne,onMouseMove:M,onPointerDown:N,onPointerEnter:P,disabled:F,busy:I,selected:L,isIconButton:R,as:z,url:B,a11yLabel:V,dataset:H,children:U,dsInternalSimulation:W,preplyDsComponent:G,className:K,...q}=e,J=l(),Y=(0,w.useRef)(null),X=_(Y,t),re=e=>{(F||I)&&e.preventDefault(),O?.(e)},ie=e=>{let t=c(e.key);(t===` `||t===`Enter`)&&(e.preventDefault(),Y.current?.click())},ae=p(S,E,[W===`focus`?r(`dsInternalSimulation-focus`,void 0,!0):f(`variant-${a}--dsInternalSimulation`,W),f(`variant`,a),f(`size`,u),R?f(`is-icon-button-size`,u):[],r(void 0,`no-wrap`,m),r(`width-full`,`width-auto`,d),r(`is-busy`,void 0,I),r(`is-icon-button`,void 0,R),r(`variant-${a}--is-selected`,void 0,L)]),Z={...g(q),...s(H,{preplyDsComponent:G}),className:[...ae,K].join(` `),"aria-label":C||V,onClick:re,disabled:F,"aria-disabled":F||I?!0:void 0,ref:X,id:n,onKeyDown:k,onKeyUp:A,onMouseDown:j,onMouseUp:te,onMouseEnter:ne,onMouseMove:M,onPointerDown:N,onPointerEnter:P},Q=h||B,$={...Z,download:v,ref:X,role:`button`,tabIndex:F?-1:0,href:Q,onKeyDown:ie};return Q?(0,T.jsx)(`a`,{...$,...o(J,Q,y,b),children:D({children:U,busy:I})}):z?(0,w.cloneElement)(z,{...$},D({children:U,busy:I})):(0,T.jsx)(`button`,{...Z,type:x?`submit`:`button`,children:D({children:U,busy:I})})});try{O.displayName=`ButtonBase`,O.__docgenInfo={description:``,displayName:`ButtonBase`,props:{id:{defaultValue:null,description:``,name:`id`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},variant:{defaultValue:null,description:``,name:`variant`,required:!1,type:{name:`enum`,value:[{value:`"ai"`},{value:`"primary"`},{value:`"secondary"`},{value:`"tertiary"`},{value:`"quaternary"`},{value:`"ghost"`},{value:`"critical"`},{value:`"onColor"`},{value:`"classroom"`},{value:`"primaryB2b"`},{value:`"primaryTutor"`},{value:`"inverted"`},{value:`"newFeature"`}]}},size:{defaultValue:null,description:``,name:`size`,required:!1,type:{name:`enum`,value:[{value:`"small"`},{value:`"large"`},{value:`"medium"`},{value:`ResponsiveProp<ButtonSize>`}]}},fullWidth:{defaultValue:null,description:``,name:`fullWidth`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`},{value:`ResponsiveProp<boolean>`}]}},wrap:{defaultValue:null,description:``,name:`wrap`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},href:{defaultValue:null,description:``,name:`href`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},download:{defaultValue:null,description:``,name:`download`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},opensInNewTab:{defaultValue:null,description:``,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`}]}},submitsForm:{defaultValue:null,description:``,name:`submitsForm`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},assistiveText:{defaultValue:null,description:``,name:`assistiveText`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},onClick:{defaultValue:null,description:``,name:`onClick`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onKeyDown:{defaultValue:null,description:``,name:`onKeyDown`,required:!1,type:{name:`enum`,value:[{value:`KeyboardEventHandler`}]}},onKeyUp:{defaultValue:null,description:``,name:`onKeyUp`,required:!1,type:{name:`enum`,value:[{value:`KeyboardEventHandler`}]}},onMouseDown:{defaultValue:null,description:``,name:`onMouseDown`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onMouseUp:{defaultValue:null,description:``,name:`onMouseUp`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onMouseEnter:{defaultValue:null,description:``,name:`onMouseEnter`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onMouseMove:{defaultValue:null,description:``,name:`onMouseMove`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onPointerDown:{defaultValue:null,description:``,name:`onPointerDown`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onPointerEnter:{defaultValue:null,description:``,name:`onPointerEnter`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},disabled:{defaultValue:null,description:``,name:`disabled`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},busy:{defaultValue:null,description:`Replaces the content with a loading indicator.`,name:`busy`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},selected:{defaultValue:null,description:`Used only for classroom and ghost variants`,name:`selected`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},isIconButton:{defaultValue:null,description:``,name:`isIconButton`,required:!0,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},as:{defaultValue:null,description:`Custom element to render the button.
|
|
1
|
+
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{_ as r,at as i,b as a,gt as o,ht as s,it as ee,mt as c,s as l,t as u,w as d,x as f,y as p}from"./dist-DtfJeYQK.js";import{t as m}from"./jsx-runtime-C2wGStra.js";import{n as h,t as g}from"./filterAttributesPassedByRadixUIAtRuntime-CGiuUnR2.js";import{n as _,t as v}from"./useMergeRefs-BZP37fIn.js";import{n as y,t as b}from"./Spinner-B-14zfoF.js";var x,S,C=t((()=>{x=`ButtonBase__0qXGj`,S={"button-width--width-full":`button-width--width-full__nxjVK`,"button-width--width-auto":`button-width--width-auto__CngVf`,"button-width--narrow-l--width-full":`button-width--narrow-l--width-full__rZc8T`,"button-width--narrow-l--width-auto":`button-width--narrow-l--width-auto__Fs14X`,"button-width--medium-s--width-full":`button-width--medium-s--width-full__lb8XX`,"button-width--medium-s--width-auto":`button-width--medium-s--width-auto__gtajp`,"button-width--medium-l--width-full":`button-width--medium-l--width-full__qOGDr`,"button-width--medium-l--width-auto":`button-width--medium-l--width-auto__vFKgm`,"button-width--wide-s--width-full":`button-width--wide-s--width-full__5nhxD`,"button-width--wide-s--width-auto":`button-width--wide-s--width-auto__J4Ht3`,"button-width--wide-l--width-full":`button-width--wide-l--width-full__Rsexc`,"button-width--wide-l--width-auto":`button-width--wide-l--width-auto__k6Ctk`,ButtonBase:x,"ButtonBase--content":`ButtonBase--content__ZEhK4`,"ButtonBase--is-icon-button":`ButtonBase--is-icon-button__CDG-9`,"ButtonBase--is-icon-button-size-large":`ButtonBase--is-icon-button-size-large__bebMj`,"ButtonBase--busy":`ButtonBase--busy__M2Cgo`,"ButtonBase--dsInternalSimulation-focus":`ButtonBase--dsInternalSimulation-focus__xhIA9`,"ButtonBase--is-busy":`ButtonBase--is-busy__FT7vR`,"ButtonBase--width-full":`ButtonBase--width-full__0ENoK`,"ButtonBase--width-auto":`ButtonBase--width-auto__vwDOv`,"ButtonBase--narrow-l--width-full":`ButtonBase--narrow-l--width-full__-H9pn`,"ButtonBase--narrow-l--width-auto":`ButtonBase--narrow-l--width-auto__2i3td`,"ButtonBase--medium-s--width-full":`ButtonBase--medium-s--width-full__sNHbR`,"ButtonBase--medium-s--width-auto":`ButtonBase--medium-s--width-auto__6T6zO`,"ButtonBase--medium-l--width-full":`ButtonBase--medium-l--width-full__FTcYM`,"ButtonBase--medium-l--width-auto":`ButtonBase--medium-l--width-auto__KPNbM`,"ButtonBase--wide-s--width-full":`ButtonBase--wide-s--width-full__YgEMT`,"ButtonBase--wide-s--width-auto":`ButtonBase--wide-s--width-auto__nM-ia`,"ButtonBase--wide-l--width-full":`ButtonBase--wide-l--width-full__CFPdD`,"ButtonBase--wide-l--width-auto":`ButtonBase--wide-l--width-auto__6gGyZ`,"ButtonBase--size-large":`ButtonBase--size-large__-OxgW`,"ButtonBase--size-medium":`ButtonBase--size-medium__YgQDT`,"ButtonBase--is-icon-button-size-medium":`ButtonBase--is-icon-button-size-medium__AC6Cq`,"ButtonBase--size-small":`ButtonBase--size-small__UMBKe`,"ButtonBase--is-icon-button-size-small":`ButtonBase--is-icon-button-size-small__hZmvi`,"ButtonBase--narrow-l--size-large":`ButtonBase--narrow-l--size-large__jbaAB`,"ButtonBase--narrow-l--is-icon-button-size-large":`ButtonBase--narrow-l--is-icon-button-size-large__UIpIh`,"ButtonBase--narrow-l--size-medium":`ButtonBase--narrow-l--size-medium__62t1K`,"ButtonBase--narrow-l--is-icon-button-size-medium":`ButtonBase--narrow-l--is-icon-button-size-medium__r2nuk`,"ButtonBase--narrow-l--size-small":`ButtonBase--narrow-l--size-small__8uFFR`,"ButtonBase--narrow-l--is-icon-button-size-small":`ButtonBase--narrow-l--is-icon-button-size-small__CkKxU`,"ButtonBase--medium-s--size-large":`ButtonBase--medium-s--size-large__XpFoi`,"ButtonBase--medium-s--is-icon-button-size-large":`ButtonBase--medium-s--is-icon-button-size-large__-IvSU`,"ButtonBase--medium-s--size-medium":`ButtonBase--medium-s--size-medium__ZA4JC`,"ButtonBase--medium-s--is-icon-button-size-medium":`ButtonBase--medium-s--is-icon-button-size-medium__946RE`,"ButtonBase--medium-s--size-small":`ButtonBase--medium-s--size-small__nNIDt`,"ButtonBase--medium-s--is-icon-button-size-small":`ButtonBase--medium-s--is-icon-button-size-small__aAjgr`,"ButtonBase--medium-l--size-large":`ButtonBase--medium-l--size-large__yo-U7`,"ButtonBase--medium-l--is-icon-button-size-large":`ButtonBase--medium-l--is-icon-button-size-large__3ORQx`,"ButtonBase--medium-l--size-medium":`ButtonBase--medium-l--size-medium__N9rbz`,"ButtonBase--medium-l--is-icon-button-size-medium":`ButtonBase--medium-l--is-icon-button-size-medium__EFk6V`,"ButtonBase--medium-l--size-small":`ButtonBase--medium-l--size-small__FMlot`,"ButtonBase--medium-l--is-icon-button-size-small":`ButtonBase--medium-l--is-icon-button-size-small__Ak0TL`,"ButtonBase--wide-s--size-large":`ButtonBase--wide-s--size-large__ASjU0`,"ButtonBase--wide-s--is-icon-button-size-large":`ButtonBase--wide-s--is-icon-button-size-large__hF4qT`,"ButtonBase--wide-s--size-medium":`ButtonBase--wide-s--size-medium__glo8Q`,"ButtonBase--wide-s--is-icon-button-size-medium":`ButtonBase--wide-s--is-icon-button-size-medium__W-O0C`,"ButtonBase--wide-s--size-small":`ButtonBase--wide-s--size-small__b10zZ`,"ButtonBase--wide-s--is-icon-button-size-small":`ButtonBase--wide-s--is-icon-button-size-small__-E8EY`,"ButtonBase--wide-l--size-large":`ButtonBase--wide-l--size-large__qXddN`,"ButtonBase--wide-l--is-icon-button-size-large":`ButtonBase--wide-l--is-icon-button-size-large__ceEkB`,"ButtonBase--wide-l--size-medium":`ButtonBase--wide-l--size-medium__OPxKX`,"ButtonBase--wide-l--is-icon-button-size-medium":`ButtonBase--wide-l--is-icon-button-size-medium__dAxcc`,"ButtonBase--wide-l--size-small":`ButtonBase--wide-l--size-small__tqGj-`,"ButtonBase--wide-l--is-icon-button-size-small":`ButtonBase--wide-l--is-icon-button-size-small__cCSAh`,"ButtonBase--variant-primary":`ButtonBase--variant-primary__oSRJV`,"ButtonBase--variant-primary--dsInternalSimulation-hover":`ButtonBase--variant-primary--dsInternalSimulation-hover__D7OCC`,"ButtonBase--variant-primary--dsInternalSimulation-active":`ButtonBase--variant-primary--dsInternalSimulation-active__V0iju`,"ButtonBase--variant-secondary":`ButtonBase--variant-secondary__APosz`,"ButtonBase--variant-secondary--dsInternalSimulation-hover":`ButtonBase--variant-secondary--dsInternalSimulation-hover__5F1t-`,"ButtonBase--variant-secondary--dsInternalSimulation-active":`ButtonBase--variant-secondary--dsInternalSimulation-active__MwFWM`,"ButtonBase--variant-tertiary":`ButtonBase--variant-tertiary__oSJoa`,"ButtonBase--variant-tertiary--dsInternalSimulation-hover":`ButtonBase--variant-tertiary--dsInternalSimulation-hover__juCHk`,"ButtonBase--variant-tertiary--dsInternalSimulation-active":`ButtonBase--variant-tertiary--dsInternalSimulation-active__CZKvj`,"ButtonBase--variant-quaternary":`ButtonBase--variant-quaternary__gX2sB`,"ButtonBase--variant-quaternary--dsInternalSimulation-hover":`ButtonBase--variant-quaternary--dsInternalSimulation-hover__Hzaa5`,"ButtonBase--variant-quaternary--dsInternalSimulation-active":`ButtonBase--variant-quaternary--dsInternalSimulation-active__cKsaN`,"ButtonBase--variant-ghost":`ButtonBase--variant-ghost__pR3-X`,"ButtonBase--variant-ghost--dsInternalSimulation-hover":`ButtonBase--variant-ghost--dsInternalSimulation-hover__O2HFh`,"ButtonBase--variant-ghost--dsInternalSimulation-active":`ButtonBase--variant-ghost--dsInternalSimulation-active__CvLh8`,"ButtonBase--variant-ghost--is-selected":`ButtonBase--variant-ghost--is-selected__mS0Le`,"ButtonBase--variant-critical":`ButtonBase--variant-critical__-t4Qu`,"ButtonBase--variant-critical--dsInternalSimulation-hover":`ButtonBase--variant-critical--dsInternalSimulation-hover__iyVj2`,"ButtonBase--variant-critical--dsInternalSimulation-active":`ButtonBase--variant-critical--dsInternalSimulation-active__2RACT`,"ButtonBase--variant-onColor":`ButtonBase--variant-onColor__Hgon2`,"ButtonBase--variant-onColor--dsInternalSimulation-hover":`ButtonBase--variant-onColor--dsInternalSimulation-hover__8ca7h`,"ButtonBase--variant-onColor--dsInternalSimulation-active":`ButtonBase--variant-onColor--dsInternalSimulation-active__OxSu7`,"ButtonBase--variant-classroom":`ButtonBase--variant-classroom__ZiZjl`,"ButtonBase--variant-classroom--dsInternalSimulation-hover":`ButtonBase--variant-classroom--dsInternalSimulation-hover__Fy83L`,"ButtonBase--variant-classroom--dsInternalSimulation-active":`ButtonBase--variant-classroom--dsInternalSimulation-active__88eK7`,"ButtonBase--variant-classroom--is-selected":`ButtonBase--variant-classroom--is-selected__GHt9-`,"ButtonBase--variant-primaryB2b":`ButtonBase--variant-primaryB2b__q-vvW`,"ButtonBase--variant-primaryB2b--dsInternalSimulation-hover":`ButtonBase--variant-primaryB2b--dsInternalSimulation-hover__Nrl78`,"ButtonBase--variant-primaryB2b--dsInternalSimulation-active":`ButtonBase--variant-primaryB2b--dsInternalSimulation-active__IGZDa`,"ButtonBase--variant-primaryTutor":`ButtonBase--variant-primaryTutor__B6BAn`,"ButtonBase--variant-primaryTutor--dsInternalSimulation-hover":`ButtonBase--variant-primaryTutor--dsInternalSimulation-hover__HXGA0`,"ButtonBase--variant-primaryTutor--dsInternalSimulation-active":`ButtonBase--variant-primaryTutor--dsInternalSimulation-active__FCV-3`,"ButtonBase--variant-inverted":`ButtonBase--variant-inverted__9yknJ`,"ButtonBase--variant-inverted--dsInternalSimulation-hover":`ButtonBase--variant-inverted--dsInternalSimulation-hover__oX9GA`,"ButtonBase--variant-inverted--dsInternalSimulation-active":`ButtonBase--variant-inverted--dsInternalSimulation-active__-HnsQ`,"ButtonBase--variant-newFeature":`ButtonBase--variant-newFeature__8uk2D`,"ButtonBase--variant-newFeature--dsInternalSimulation-hover":`ButtonBase--variant-newFeature--dsInternalSimulation-hover__plXXr`,"ButtonBase--variant-newFeature--dsInternalSimulation-active":`ButtonBase--variant-newFeature--dsInternalSimulation-active__yDfE1`,"ButtonBase--variant-ai":`ButtonBase--variant-ai__iq9tW`,"ButtonBase--variant-ai--dsInternalSimulation-hover":`ButtonBase--variant-ai--dsInternalSimulation-hover__78mV7`,"ButtonBase--variant-ai--dsInternalSimulation-active":`ButtonBase--variant-ai--dsInternalSimulation-active__48Tn0`,"ButtonBase--no-wrap":`ButtonBase--no-wrap__8TMhQ`}})),w,T,E,D,O,k=t((()=>{d(),u(),w=e(n(),1),h(),C(),y(),v(),T=m(),E=`ButtonBase`,D=({children:e,busy:t})=>{let n=[...a(S,E,[`content`])],r=[...a(S,E,[`busy`])];return(0,T.jsxs)(T.Fragment,{children:[(0,T.jsx)(`span`,{className:n.join(` `),children:e}),t&&(0,T.jsx)(`span`,{className:r.join(` `),children:(0,T.jsx)(b,{})})]})},O=(0,w.forwardRef)(function(e,t){let{id:n,variant:a=i,size:u=ee,fullWidth:d=!1,wrap:m=!1,href:h,download:v,opensInNewTab:y,nofollow:b,submitsForm:x,assistiveText:C,onClick:O,onKeyDown:k,onKeyUp:A,onMouseDown:j,onMouseUp:te,onMouseEnter:ne,onMouseMove:M,onPointerDown:N,onPointerEnter:P,disabled:F,busy:I,selected:L,isIconButton:R,as:z,url:B,a11yLabel:V,dataset:H,children:U,dsInternalSimulation:W,preplyDsComponent:G,className:K,...q}=e,J=l(),Y=(0,w.useRef)(null),X=_(Y,t),re=e=>{(F||I)&&e.preventDefault(),O?.(e)},ie=e=>{let t=c(e.key);(t===` `||t===`Enter`)&&(e.preventDefault(),Y.current?.click())},ae=p(S,E,[W===`focus`?r(`dsInternalSimulation-focus`,void 0,!0):f(`variant-${a}--dsInternalSimulation`,W),f(`variant`,a),f(`size`,u),R?f(`is-icon-button-size`,u):[],r(void 0,`no-wrap`,m),r(`width-full`,`width-auto`,d),r(`is-busy`,void 0,I),r(`is-icon-button`,void 0,R),r(`variant-${a}--is-selected`,void 0,L)]),Z={...g(q),...s(H,{preplyDsComponent:G}),className:[...ae,K].join(` `),"aria-label":C||V,onClick:re,disabled:F,"aria-disabled":F||I?!0:void 0,ref:X,id:n,onKeyDown:k,onKeyUp:A,onMouseDown:j,onMouseUp:te,onMouseEnter:ne,onMouseMove:M,onPointerDown:N,onPointerEnter:P},Q=h||B,$={...Z,download:v,ref:X,role:`button`,tabIndex:F?-1:0,href:Q,onKeyDown:ie};return Q?(0,T.jsx)(`a`,{...$,...o(J,Q,y,b),children:D({children:U,busy:I})}):z?(0,w.cloneElement)(z,{...$},D({children:U,busy:I})):(0,T.jsx)(`button`,{...Z,type:x?`submit`:`button`,children:D({children:U,busy:I})})});try{O.displayName=`ButtonBase`,O.__docgenInfo={description:``,displayName:`ButtonBase`,props:{id:{defaultValue:null,description:``,name:`id`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},variant:{defaultValue:null,description:``,name:`variant`,required:!1,type:{name:`enum`,value:[{value:`"ai"`},{value:`"inverted"`},{value:`"critical"`},{value:`"tertiary"`},{value:`"primary"`},{value:`"secondary"`},{value:`"quaternary"`},{value:`"ghost"`},{value:`"onColor"`},{value:`"classroom"`},{value:`"primaryB2b"`},{value:`"primaryTutor"`},{value:`"newFeature"`}]}},size:{defaultValue:null,description:``,name:`size`,required:!1,type:{name:`enum`,value:[{value:`"small"`},{value:`"medium"`},{value:`"large"`},{value:`ResponsiveProp<ButtonSize>`}]}},fullWidth:{defaultValue:null,description:``,name:`fullWidth`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`},{value:`ResponsiveProp<boolean>`}]}},wrap:{defaultValue:null,description:``,name:`wrap`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},href:{defaultValue:null,description:``,name:`href`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},download:{defaultValue:null,description:``,name:`download`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},opensInNewTab:{defaultValue:null,description:``,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`}]}},submitsForm:{defaultValue:null,description:``,name:`submitsForm`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},assistiveText:{defaultValue:null,description:``,name:`assistiveText`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},onClick:{defaultValue:null,description:``,name:`onClick`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onKeyDown:{defaultValue:null,description:``,name:`onKeyDown`,required:!1,type:{name:`enum`,value:[{value:`KeyboardEventHandler`}]}},onKeyUp:{defaultValue:null,description:``,name:`onKeyUp`,required:!1,type:{name:`enum`,value:[{value:`KeyboardEventHandler`}]}},onMouseDown:{defaultValue:null,description:``,name:`onMouseDown`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onMouseUp:{defaultValue:null,description:``,name:`onMouseUp`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onMouseEnter:{defaultValue:null,description:``,name:`onMouseEnter`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onMouseMove:{defaultValue:null,description:``,name:`onMouseMove`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onPointerDown:{defaultValue:null,description:``,name:`onPointerDown`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onPointerEnter:{defaultValue:null,description:``,name:`onPointerEnter`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},disabled:{defaultValue:null,description:``,name:`disabled`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},busy:{defaultValue:null,description:`Replaces the content with a loading indicator.`,name:`busy`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},selected:{defaultValue:null,description:`Used only for classroom and ghost variants`,name:`selected`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},isIconButton:{defaultValue:null,description:``,name:`isIconButton`,required:!0,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},as:{defaultValue:null,description:`Custom element to render the button.
|
|
2
2
|
|
|
3
3
|
Allows rendering the button using a different React element or component.
|
|
4
4
|
This is particularly useful for integrating with router libraries like \`react-router\` or \`next/router\`.
|
|
@@ -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-
|
|
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-BiCO96_r.js";import{n as o,t as s}from"./Button-_0pS2khJ.js";import{n as c,t as l}from"./Avatar-D6oXWjq1.js";import{a as u,c as d,d as f,f as p,i as m,l as h,m as g,n as _,o as v,p as y,r as b,s as x,t as S,u as C}from"./CalloutBannerText-BcIjTCPR.js";import{n as w,t as T}from"./LayoutFlex-CEOcocT6.js";import{n as E,t as D}from"./Link-DLL8OonN.js";var O,k,A=t((()=>{O=`banner__YzvKK`,k={banner:O}})),j,M,N,P,F,I,L,R,z,B,V,H,U,W,G,K,q;t((()=>{j=e(n(),1),w(),E(),o(),c(),i(),p(),C(),d(),g(),_(),A(),M=r(),{expect:N,userEvent:P,within:F}=__STORYBOOK_MODULE_TEST__,I={title:`Components/CalloutBanner`,component:f,subcomponents:{CalloutBannerText:S,CalloutBannerDismissButton:h,CalloutBannerIcon:m,CalloutBannerInfoIcon:u,CalloutBannerWarningIcon:x,CalloutBannerCriticalIcon:b,CalloutBannerPositiveIcon:v},parameters:{layout:`padded`,docs:{source:{type:`dynamic`}}},decorators:[e=>(0,M.jsx)(`div`,{style:{width:`400px`},children:(0,M.jsx)(e,{})})]},L={args:{children:(0,M.jsx)(S,{children:`Callout banner message goes here.`})}},R={args:{variant:`info`,children:(0,M.jsxs)(M.Fragment,{children:[(0,M.jsx)(m,{}),(0,M.jsx)(S,{children:`Callout banner message with a leading icon.`})]})}},z={render:function(e){let[t,n]=(0,j.useState)(!0);return t?(0,M.jsxs)(f,{...e,dataset:{testid:`banner`},children:[(0,M.jsx)(S,{children:`This banner can be dismissed.`}),(0,M.jsx)(h,{onClick:()=>n(!1)})]}):(0,M.jsxs)(T,{gap:`16`,alignItems:`center`,children:[(0,M.jsx)(`p`,{children:`Banner has been dismissed.`}),(0,M.jsx)(s,{variant:`tertiary`,onClick:()=>n(!0),dataset:{testid:`show-banner`},children:`Show banner`})]})}},B={tags:[`!autodocs`],render:function(e){let[t,n]=(0,j.useState)(!0);return t?(0,M.jsxs)(f,{...e,dataset:{testid:`banner`},children:[(0,M.jsx)(S,{children:`This banner can be dismissed by clicking the close button.`}),(0,M.jsx)(h,{onClick:()=>n(!1)})]}):(0,M.jsxs)(T,{gap:`16`,alignItems:`center`,children:[(0,M.jsx)(`p`,{children:`Banner has been dismissed.`}),(0,M.jsx)(s,{variant:`tertiary`,onClick:()=>n(!0),dataset:{testid:`show-banner`},children:`Show banner`})]})},play:async({canvas:e,step:t})=>{await t(`Dismiss banner`,async()=>{let t=e.getByTestId(`banner`);await P.click(F(t).getByRole(`button`,{name:`Close`})),N(t).not.toBeInTheDocument()})}},V={tags:[`!autodocs`],render:function(e){let[t,n]=(0,j.useState)(!0);return t?(0,M.jsxs)(f,{...e,dataset:{testid:`banner`},children:[(0,M.jsx)(S,{children:`This banner can be dismissed by clicking the close button.`}),(0,M.jsx)(h,{onClick:()=>n(!1)})]}):(0,M.jsxs)(T,{gap:`16`,alignItems:`center`,children:[(0,M.jsx)(`p`,{children:`Banner has been dismissed.`}),(0,M.jsx)(s,{variant:`tertiary`,onClick:()=>n(!0),dataset:{testid:`show-banner`},children:`Show banner`})]})},play:async({canvas:e,step:t})=>{await t(`Dismiss banner`,async()=>{let t=e.getByTestId(`banner`);await P.click(F(t).getByRole(`button`,{name:`Close`})),N(t).not.toBeInTheDocument()}),await t(`Show banner`,async()=>{let t=e.getByTestId(`show-banner`);await P.click(t),N(e.getByTestId(`banner`)).toBeInTheDocument()})}},H={args:{children:(0,M.jsxs)(S,{children:[`Callout banner message goes here.`,` `,(0,M.jsx)(D,{href:`/path`,inline:!0,children:`Inline link`}),`.`]})}},U={render:()=>(0,M.jsxs)(T,{direction:`column`,gap:`16`,children:[(0,M.jsxs)(f,{variant:`neutral`,children:[(0,M.jsx)(m,{}),(0,M.jsx)(S,{children:`Neutral callout banner message.`})]}),(0,M.jsxs)(f,{variant:`info`,children:[(0,M.jsx)(m,{}),(0,M.jsx)(S,{children:`Info callout banner message.`})]}),(0,M.jsxs)(f,{variant:`warning`,children:[(0,M.jsx)(m,{}),(0,M.jsx)(S,{children:`Warning callout banner message.`})]}),(0,M.jsxs)(f,{variant:`critical`,children:[(0,M.jsx)(m,{}),(0,M.jsx)(S,{children:`Critical callout banner message.`})]}),(0,M.jsxs)(f,{variant:`positive`,children:[(0,M.jsx)(m,{}),(0,M.jsx)(S,{children:`Positive callout banner message.`})]}),(0,M.jsxs)(f,{variant:`ai`,children:[(0,M.jsx)(m,{}),(0,M.jsx)(S,{children:`AI callout banner message.`})]})]})},W={render:()=>(0,M.jsxs)(T,{direction:`column`,gap:`16`,children:[(0,M.jsxs)(f,{size:`regular`,variant:`info`,children:[(0,M.jsx)(m,{}),(0,M.jsx)(S,{children:`Regular size callout banner message.`})]}),(0,M.jsxs)(f,{size:`small`,variant:`info`,children:[(0,M.jsx)(m,{}),(0,M.jsx)(S,{children:`Small size callout banner message.`})]})]})},G={render:()=>(0,M.jsxs)(T,{direction:`column`,gap:`16`,children:[(0,M.jsx)(f,{variant:`info`,children:(0,M.jsx)(S,{children:`This is a longer callout banner message that demonstrates how the component handles text wrapping and longer content.`})}),(0,M.jsxs)(f,{variant:`info`,children:[(0,M.jsx)(m,{}),(0,M.jsx)(S,{children:`This is a longer callout banner message that demonstrates how the component handles text wrapping and longer content.`})]}),(0,M.jsxs)(f,{variant:`info`,children:[(0,M.jsx)(m,{}),(0,M.jsx)(S,{children:`This is a longer callout banner message that demonstrates how the component handles text wrapping and longer content.`}),(0,M.jsx)(h,{})]}),(0,M.jsxs)(f,{variant:`info`,children:[(0,M.jsx)(S,{children:`This is a longer callout banner message that demonstrates how the component handles text wrapping and longer content.`}),(0,M.jsx)(h,{})]})]})},K={tags:[`!autodocs`],render:function(){let[e,t]=(0,j.useState)(!0);return e?(0,M.jsxs)(y,{variant:`neutral`,size:`regular`,className:k.banner,children:[(0,M.jsx)(m,{children:(0,M.jsx)(l,{size:`24`})}),(0,M.jsx)(a,{variant:`default-semibold`,children:`Custom banner built with primitives.`}),(0,M.jsx)(h,{className:k.dismissButton,children:(0,M.jsx)(s,{size:`small`,variant:`tertiary`,onClick:()=>t(!1),children:`Close`})})]}):(0,M.jsxs)(T,{gap:`16`,alignItems:`center`,children:[(0,M.jsx)(`p`,{children:`Banner has been dismissed.`}),(0,M.jsx)(s,{variant:`tertiary`,onClick:()=>t(!0),children:`Show banner`})]})}},L.parameters={...L.parameters,docs:{...L.parameters?.docs,source:{originalSource:`{
|
|
2
2
|
args: {
|
|
3
3
|
children: <CalloutBannerText>Callout banner message goes here.</CalloutBannerText>
|
|
4
4
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{ht as r,t as i}from"./dist-DtfJeYQK.js";import{t as a}from"./jsx-runtime-C2wGStra.js";import{n as o,t as s}from"./dist-Cc1j9Pjk.js";import{n as c,t as l}from"./Icon-
|
|
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"./Icon-BItN7xKl.js";import{n as u,t as d}from"./Text-BiCO96_r.js";import{n as ee,t as te}from"./TokyoUIClose-BsMsQk2w.js";import{o as ne,r as f}from"./lib-8ue2PVWI.js";import{n as p,t as m}from"./shared-strings-BFfhcoGp.js";import{n as h,t as g}from"./TokyoUICheck-BxTDosuA.js";import{i as _,n as v,r as y,t as b}from"./TokyoUIErrorWarning-BH93ehx8.js";import{n as x,t as S}from"./IconButton-sZZtNos_.js";import{n as C,t as re}from"./TokyoUIInfo-CL0Zo7ru.js";var w,T,E,D,O=t((()=>{w=`banner__X9HSx`,T=`icon__Hc4CV`,E=`dismissButton__QqYFY`,D={banner:w,icon:T,dismissButton:E}})),k,A,j,M,N=t((()=>{k=e(n(),1),i(),s(),O(),A=a(),j=(0,k.createContext)({variant:`neutral`,size:`regular`}),M=(0,k.forwardRef)(function({variant:e=`neutral`,size:t=`regular`,children:n,dataset:i,className:a=``,...s},c){let l=[D.banner,a].join(` `);return(0,A.jsx)(j.Provider,{value:{variant:e,size:t},children:(0,A.jsx)(`div`,{ref:c,role:`note`,className:l,...r(i,{preplyDsComponent:o.CalloutBanner}),"data-variant":e,"data-size":t,...s,children:n})})});try{M.displayName=`CalloutBannerRoot`,M.__docgenInfo={description:`The root primitive for the callout banner.
|
|
2
2
|
|
|
3
3
|
This component is used to create a custom callout banner; it accepts a
|
|
4
4
|
\`className prop to override the default styles for the callout banner
|
|
@@ -6,14 +6,14 @@ container. The \`variant\` prop is exposed as a data attribute on the root
|
|
|
6
6
|
element to aid in styling.
|
|
7
7
|
|
|
8
8
|
You can use the other \`CalloutBanner*\` subcomponents as you normally would
|
|
9
|
-
with the \`CalloutBanner\` component.`,displayName:`CalloutBannerRoot`,props:{variant:{defaultValue:{value:`neutral`},description:`The banner variant/type`,name:`variant`,required:!1,type:{name:`enum`,value:[{value:`"
|
|
9
|
+
with the \`CalloutBanner\` component.`,displayName:`CalloutBannerRoot`,props:{variant:{defaultValue:{value:`neutral`},description:`The banner variant/type`,name:`variant`,required:!1,type:{name:`enum`,value:[{value:`"ai"`},{value:`"neutral"`},{value:`"info"`},{value:`"positive"`},{value:`"warning"`},{value:`"critical"`}]}},size:{defaultValue:{value:`regular`},description:`The banner size`,name:`size`,required:!1,type:{name:`enum`,value:[{value:`"small"`},{value:`"regular"`}]}},dataset:{defaultValue:null,description:`Data attributes for testing/analytics
|
|
10
10
|
@deprecated Pass data attributes as regular props instead`,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}}}}}catch{}})),P,F,I,L=t((()=>{P=e(n(),1),N(),F=a(),I=(0,P.forwardRef)(function({variant:e=`neutral`,size:t=`regular`,children:n,dataset:r},i){return(0,F.jsx)(M,{ref:i,variant:e,size:t,dataset:r,children:n})});try{I.displayName=`CalloutBanner`,I.__docgenInfo={description:`The Callout banner is used to share informational, helpful, or promotional
|
|
11
11
|
messages within a product interface.
|
|
12
12
|
|
|
13
13
|
It appears inline within a page or section, not at the top of the screen.
|
|
14
14
|
Its goal is to draw gentle attention without overpowering surrounding content.
|
|
15
15
|
|
|
16
|
-
Do not use for urgent or blocking information—use the \`<AlertBanner />\` instead.`,displayName:`CalloutBanner`,props:{variant:{defaultValue:{value:`neutral`},description:"The banner variant.\nSemantic icons are also exported for the following variants:\n- `info` -> `<CalloutBannerInfoIcon />`\n- `warning` -> `<CalloutBannerWarningIcon />`\n- `critical` -> `<CalloutBannerCriticalIcon />`\n- `positive` -> `<CalloutBannerPositiveIcon />`",name:`variant`,required:!1,type:{name:`enum`,value:[{value:`"
|
|
16
|
+
Do not use for urgent or blocking information—use the \`<AlertBanner />\` instead.`,displayName:`CalloutBanner`,props:{variant:{defaultValue:{value:`neutral`},description:"The banner variant.\nSemantic icons are also exported for the following variants:\n- `info` -> `<CalloutBannerInfoIcon />`\n- `warning` -> `<CalloutBannerWarningIcon />`\n- `critical` -> `<CalloutBannerCriticalIcon />`\n- `positive` -> `<CalloutBannerPositiveIcon />`",name:`variant`,required:!1,type:{name:`enum`,value:[{value:`"ai"`},{value:`"neutral"`},{value:`"info"`},{value:`"positive"`},{value:`"warning"`},{value:`"critical"`}]}},size:{defaultValue:{value:`regular`},description:`The banner text size.`,name:`size`,required:!1,type:{name:`enum`,value:[{value:`"small"`},{value:`"regular"`}]}},children:{defaultValue:null,description:`The banner message content.
|
|
17
17
|
|
|
18
18
|
To build a DS compliant banner, use:
|
|
19
19
|
- \`CalloutBannerIcon\` to add an icon to the banner
|
|
@@ -25,4 +25,4 @@ Alternatively, to diverge from the DS, you're able to:
|
|
|
25
25
|
styling and structure.
|
|
26
26
|
- Use the \`CalloutBannerRoot\` primitive to customize the banner
|
|
27
27
|
container (e.g. colour).`,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`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}}}}}catch{}})),R,z,B,V,H=t((()=>{R=e(n(),1),f(),ee(),x(),p(),O(),z=a(),B=(0,R.forwardRef)(function({children:e,className:t=``,...n},r){return(0,z.jsx)(`div`,{ref:r,className:[D.dismissButton,t].join(` `),children:e??(0,z.jsx)(V,{...n})})}),V=(0,R.forwardRef)(function({onClick:e,dataset:t},n){let{formatMessage:r}=ne();return(0,z.jsx)(S,{ref:n,onClick:e,svg:te,size:`small`,variant:`ghost`,assistiveText:r(m.close),dataset:t})});try{B.displayName=`CalloutBannerDismissButton`,B.__docgenInfo={description:"A dismiss button for the callout banner.\n\nNote: The root of this component is a `div` element. It renders the default\ndismiss button by default, but you can override it with the `children` prop.\nYou can also use the `className` prop to override the default styles for the\ncontainer.",displayName:`CalloutBannerDismissButton`,props:{children:{defaultValue:null,description:`If present, the component will render the children instead of the
|
|
28
|
-
default dismiss button.`,name:`children`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`},{value:`number`},{value:`false`},{value:`true`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`},{value:`Iterable<ReactNode>`},{value:`ReactPortal`}]}},className:{defaultValue:{value:``},description:`A class name to apply to the dismiss button **container**.`,name:`className`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},onClick:{defaultValue:null,description:``,name:`onClick`,required:!1,type:{name:`enum`,value:[{value:`() => void`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}}}}}catch{}})),U,W,G,K,q,J,Y,X,ie=t((()=>{U=e(n(),1),C(),v(),_(),h(),c(),O(),N(),W=a(),G=()=>(0,W.jsx)(l,{svg:re,size:`24`}),K=()=>(0,W.jsx)(l,{svg:g,size:`24`}),q=()=>(0,W.jsx)(l,{svg:b,size:`24`}),J=()=>(0,W.jsx)(l,{svg:y,size:`24`}),Y={info:G,positive:K,warning:q,critical:J},X=(0,U.forwardRef)(function({svg:e,children:t,className:n=``},r){let{variant:i}=(0,U.useContext)(j),a=[D.icon,n].join(` `),o=null;return t?o=t:e?o=(0,W.jsx)(l,{svg:e,size:`24`}):i&&i in Y&&(o=Y[i]()),o?(0,W.jsx)(`div`,{ref:r,className:a,children:o}):null});try{G.displayName=`CalloutBannerInfoIcon`,G.__docgenInfo={description:`Info icon for the CalloutBanner.`,displayName:`CalloutBannerInfoIcon`,props:{}}}catch{}try{K.displayName=`CalloutBannerPositiveIcon`,K.__docgenInfo={description:`Positive icon for the CalloutBanner.`,displayName:`CalloutBannerPositiveIcon`,props:{}}}catch{}try{q.displayName=`CalloutBannerWarningIcon`,q.__docgenInfo={description:`Warning icon for the CalloutBanner.`,displayName:`CalloutBannerWarningIcon`,props:{}}}catch{}try{J.displayName=`CalloutBannerCriticalIcon`,J.__docgenInfo={description:`Critical icon for the CalloutBanner.`,displayName:`CalloutBannerCriticalIcon`,props:{}}}catch{}try{X.displayName=`CalloutBannerIcon`,X.__docgenInfo={description:"An icon for the callout banner.\n\nThis component will render the appropriate icon based on the parent\n`CalloutBanner` component's `variant` prop — these semantic icons are also\nexported for the following variants:\n- `info` -> `<CalloutBannerInfoIcon />`\n- `positive` -> `<CalloutBannerPositiveIcon />`\n- `warning` -> `<CalloutBannerWarningIcon />`\n- `critical` -> `<CalloutBannerCriticalIcon />`\n\nThe icon can be overridden by passing a custom SVG icon via the `svg` prop.\n\nIf you want to place any leading element inside of the `CalloutBanner`,\nwith the same spacing as the icon, you can pass it as a child element.\n\nNote: The root of this component is a `div` element. You can use the\n`className` prop to override the default styles for the **container**.",displayName:`CalloutBannerIcon`,props:{svg:{defaultValue:null,description:``,name:`svg`,required:!1,type:{name:`enum`,value:[{value:`ComponentClass<SVGAttributes<SVGElement>, any>`},{value:`FunctionComponent<SVGAttributes<SVGElement>>`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}},className:{defaultValue:{value:``},description:``,name:`className`,required:!1,type:{name:`enum`,value:[{value:`string`}]}}}}}catch{}})),Z,Q,$,ae=t((()=>{Z=e(n(),1),u(),N(),Q=a(),$=(0,Z.forwardRef)(function(e,t){let{size:n}=(0,Z.useContext)(j);return(0,Q.jsx)(d,{ref:t,variant:n===`small`?`small-regular`:`default-regular`,...e})});try{$.displayName=`CalloutBannerText`,$.__docgenInfo={description:"A `Text` component alias for the callout banner that is context-aware,\nadjusting its own `variant` based on the parent `CalloutBanner`'s `size`.",displayName:`CalloutBannerText`,props:{variant:{defaultValue:null,description:``,name:`variant`,required:!1,type:{name:`enum`,value:[{value:`"caption-regular"`},{value:`"caption-semibold"`},{value:`"small-regular"`},{value:`"small-regular-italic"`},{value:`"small-semibold"`},{value:`"small-semibold-italic"`},{value:`"default-regular"`},{value:`"default-regular-italic"`},{value:`"default-semibold"`},{value:`"default-semibold-italic"`},{value:`"large-regular"`},{value:`"large-regular-italic"`},{value:`"large-semibold"`},{value:`"large-semibold-italic"`},{value:`ResponsiveProp<TextVariant>`}]}},accent:{defaultValue:null,description:``,name:`accent`,required:!1,type:{name:`enum`,value:[{value:`"
|
|
28
|
+
default dismiss button.`,name:`children`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`},{value:`number`},{value:`false`},{value:`true`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`},{value:`Iterable<ReactNode>`},{value:`ReactPortal`}]}},className:{defaultValue:{value:``},description:`A class name to apply to the dismiss button **container**.`,name:`className`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},onClick:{defaultValue:null,description:``,name:`onClick`,required:!1,type:{name:`enum`,value:[{value:`() => void`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}}}}}catch{}})),U,W,G,K,q,J,Y,X,ie=t((()=>{U=e(n(),1),C(),v(),_(),h(),c(),O(),N(),W=a(),G=()=>(0,W.jsx)(l,{svg:re,size:`24`}),K=()=>(0,W.jsx)(l,{svg:g,size:`24`}),q=()=>(0,W.jsx)(l,{svg:b,size:`24`}),J=()=>(0,W.jsx)(l,{svg:y,size:`24`}),Y={info:G,positive:K,warning:q,critical:J},X=(0,U.forwardRef)(function({svg:e,children:t,className:n=``},r){let{variant:i}=(0,U.useContext)(j),a=[D.icon,n].join(` `),o=null;return t?o=t:e?o=(0,W.jsx)(l,{svg:e,size:`24`}):i&&i in Y&&(o=Y[i]()),o?(0,W.jsx)(`div`,{ref:r,className:a,children:o}):null});try{G.displayName=`CalloutBannerInfoIcon`,G.__docgenInfo={description:`Info icon for the CalloutBanner.`,displayName:`CalloutBannerInfoIcon`,props:{}}}catch{}try{K.displayName=`CalloutBannerPositiveIcon`,K.__docgenInfo={description:`Positive icon for the CalloutBanner.`,displayName:`CalloutBannerPositiveIcon`,props:{}}}catch{}try{q.displayName=`CalloutBannerWarningIcon`,q.__docgenInfo={description:`Warning icon for the CalloutBanner.`,displayName:`CalloutBannerWarningIcon`,props:{}}}catch{}try{J.displayName=`CalloutBannerCriticalIcon`,J.__docgenInfo={description:`Critical icon for the CalloutBanner.`,displayName:`CalloutBannerCriticalIcon`,props:{}}}catch{}try{X.displayName=`CalloutBannerIcon`,X.__docgenInfo={description:"An icon for the callout banner.\n\nThis component will render the appropriate icon based on the parent\n`CalloutBanner` component's `variant` prop — these semantic icons are also\nexported for the following variants:\n- `info` -> `<CalloutBannerInfoIcon />`\n- `positive` -> `<CalloutBannerPositiveIcon />`\n- `warning` -> `<CalloutBannerWarningIcon />`\n- `critical` -> `<CalloutBannerCriticalIcon />`\n\nThe icon can be overridden by passing a custom SVG icon via the `svg` prop.\n\nIf you want to place any leading element inside of the `CalloutBanner`,\nwith the same spacing as the icon, you can pass it as a child element.\n\nNote: The root of this component is a `div` element. You can use the\n`className` prop to override the default styles for the **container**.",displayName:`CalloutBannerIcon`,props:{svg:{defaultValue:null,description:``,name:`svg`,required:!1,type:{name:`enum`,value:[{value:`ComponentClass<SVGAttributes<SVGElement>, any>`},{value:`FunctionComponent<SVGAttributes<SVGElement>>`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}},className:{defaultValue:{value:``},description:``,name:`className`,required:!1,type:{name:`enum`,value:[{value:`string`}]}}}}}catch{}})),Z,Q,$,ae=t((()=>{Z=e(n(),1),u(),N(),Q=a(),$=(0,Z.forwardRef)(function(e,t){let{size:n}=(0,Z.useContext)(j);return(0,Q.jsx)(d,{ref:t,variant:n===`small`?`small-regular`:`default-regular`,...e})});try{$.displayName=`CalloutBannerText`,$.__docgenInfo={description:"A `Text` component alias for the callout banner that is context-aware,\nadjusting its own `variant` based on the parent `CalloutBanner`'s `size`.",displayName:`CalloutBannerText`,props:{variant:{defaultValue:null,description:``,name:`variant`,required:!1,type:{name:`enum`,value:[{value:`"caption-regular"`},{value:`"caption-semibold"`},{value:`"small-regular"`},{value:`"small-regular-italic"`},{value:`"small-semibold"`},{value:`"small-semibold-italic"`},{value:`"default-regular"`},{value:`"default-regular-italic"`},{value:`"default-semibold"`},{value:`"default-semibold-italic"`},{value:`"large-regular"`},{value:`"large-regular-italic"`},{value:`"large-semibold"`},{value:`"large-semibold-italic"`},{value:`ResponsiveProp<TextVariant>`}]}},accent:{defaultValue:null,description:``,name:`accent`,required:!1,type:{name:`enum`,value:[{value:`"inverted"`},{value:`"info"`},{value:`"positive"`},{value:`"warning"`},{value:`"critical"`},{value:`"tertiary"`},{value:`"placeholder"`},{value:`"primary"`},{value:`"secondary"`},{value:`"accentDark"`}]}},strong:{defaultValue:null,description:``,name:`strong`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},centered:{defaultValue:null,description:``,name:`centered`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`},{value:`ResponsiveProp<boolean>`}]}},tag:{defaultValue:null,description:``,name:`tag`,required:!1,type:{name:`enum`,value:[{value:`"div"`},{value:`"p"`},{value:`"span"`}]}},dataset:{defaultValue:null,description:`@deprecated Pass data attributes as regular props instead`,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},className:{defaultValue:null,description:``,name:`className`,required:!1,type:{name:`enum`,value:[{value:`string`}]}}}}}catch{}}));export{G as a,ie as c,I as d,L as f,X as i,B as l,N as m,ae as n,K as o,M as p,J as r,q as s,$ as t,H as u};
|
|
@@ -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-
|
|
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-BiCO96_r.js";import{n as o,t as s}from"./Checkbox-BV4Be-fH.js";var c,l,u,d,f,p,m,h,g,_,v,y;t((()=>{c=e(n(),1),o(),i(),l=r(),{action:u}=__STORYBOOK_MODULE_ACTIONS__,{expect:d,userEvent:f}=__STORYBOOK_MODULE_TEST__,p={title:`components/Checkbox`,component:s,args:{onChange:u(`onChange`),onCheckedChange:u(`onCheckedChange`)}},m={render:function(){return(0,l.jsxs)(`div`,{style:{display:`flex`,gap:`16px`,flexDirection:`column`},children:[(0,l.jsx)(a,{variant:`default-regular-italic`,children:`normal`}),(0,l.jsxs)(`div`,{style:{display:`flex`,gap:`16px`},children:[(0,l.jsx)(s,{"aria-label":`checkbox`}),(0,l.jsx)(s,{"aria-label":`checkbox`,checked:!0}),(0,l.jsx)(s,{"aria-label":`checkbox`,indeterminate:!0}),(0,l.jsx)(s,{"aria-label":`checkbox`,hasError:!0}),(0,l.jsx)(s,{"aria-label":`checkbox`,hasError:!0,checked:!0}),(0,l.jsx)(s,{"aria-label":`checkbox`,hasError:!0,indeterminate:!0}),(0,l.jsx)(s,{"aria-label":`checkbox`,disabled:!0}),(0,l.jsx)(s,{"aria-label":`checkbox`,disabled:!0,checked:!0}),(0,l.jsx)(s,{"aria-label":`checkbox`,disabled:!0,indeterminate:!0})]}),(0,l.jsx)(a,{variant:`default-regular-italic`,children:`focus`}),(0,l.jsxs)(`div`,{style:{display:`flex`,gap:`16px`},"data-focus":!0,children:[(0,l.jsx)(s,{"aria-label":`checkbox`}),(0,l.jsx)(s,{"aria-label":`checkbox`,checked:!0}),(0,l.jsx)(s,{"aria-label":`checkbox`,indeterminate:!0}),(0,l.jsx)(s,{"aria-label":`checkbox`,hasError:!0}),(0,l.jsx)(s,{"aria-label":`checkbox`,checked:!0,hasError:!0}),(0,l.jsx)(s,{"aria-label":`checkbox`,indeterminate:!0,hasError:!0})]})]})}},m.parameters={pseudo:{focusWithin:`[data-focus="true"] > *`}},h={parameters:{chromatic:{disableSnapshot:!0}},render:function(){return(0,l.jsx)(s,{"aria-label":`checkbox`})},play:async({canvas:e,step:t})=>{let n=e.getByRole(`checkbox`);d(n).not.toHaveAttribute(`aria-checked`),await t(`Initial state"`,async()=>{await f.click(n),d(n).toBeChecked(),d(n).not.toHaveAttribute(`aria-checked`)}),await t(`Initial state"`,async()=>{await f.click(n),d(n).not.toBeChecked(),d(n).not.toHaveAttribute(`aria-checked`)})}},g={parameters:{chromatic:{disableSnapshot:!0}},render:function(){let[e,t]=(0,c.useState)(!1);return(0,l.jsx)(s,{"aria-label":`checkbox`,checked:e,onCheckedChange:t})},play:async({canvas:e,step:t})=>{let n=e.getByRole(`checkbox`);await t(`Initial state"`,async()=>{d(n).not.toBeChecked(),d(n).not.toHaveAttribute(`aria-checked`)}),await t(`Click the checkbox"`,async()=>{await f.click(n),d(n).toBeChecked(),d(n).not.toHaveAttribute(`aria-checked`)}),await t(`Click the checkbox"`,async()=>{await f.click(n),d(n).not.toBeChecked(),d(n).not.toHaveAttribute(`aria-checked`)})}},_={parameters:{chromatic:{disableSnapshot:!0}},render:function(){let[e,t]=(0,c.useState)(!1),[n,r]=(0,c.useState)(!1);return(0,l.jsx)(s,{"aria-label":`checkbox`,checked:e,indeterminate:n,onCheckedChange:i=>{e===!1&&n===!1&&i===!0?r(!0):e===!1&&n===!0&&i===!0?(r(!1),t(!0)):e===!0&&n===!1&&i===!1&&t(!1)}})},play:async({canvas:e,step:t})=>{let n=e.getByRole(`checkbox`);if(!(n instanceof HTMLInputElement))throw Error(`Expected Consent all cookies to be an HTMLInputElement`);await t(`Initial state"`,async()=>{d(n).not.toBeChecked(),d(n).not.toHaveAttribute(`aria-checked`),d(n.indeterminate,`Indeterminate check`).toBe(!1)}),await t(`Click the checkbox"`,async()=>{await f.click(n),d(n).not.toBeChecked(),d(n).toHaveAttribute(`aria-checked`,`mixed`),d(n.indeterminate,`Indeterminate check`).toBe(!0)}),await t(`Click the checkbox"`,async()=>{await f.click(n),d(n).toBeChecked(),d(n).not.toHaveAttribute(`aria-checked`),d(n.indeterminate,`Indeterminate check`).toBe(!1)}),await t(`Click the checkbox"`,async()=>{await f.click(n),d(n).not.toBeChecked(),d(n).not.toHaveAttribute(`aria-checked`),d(n.indeterminate,`Indeterminate check`).toBe(!1)})}},v={parameters:{chromatic:{disableSnapshot:!0}},args:{"aria-label":`checkbox`},argTypes:{id:{control:`text`},name:{control:`text`},dataset:{control:`object`},checked:{control:`boolean`},disabled:{control:`boolean`},required:{control:`boolean`},hasError:{control:`boolean`},"aria-label":{control:`text`},indeterminate:{control:`boolean`},defaultChecked:{control:`boolean`},"aria-labelledby":{control:`text`}}},m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
|
|
2
2
|
render: function Story() {
|
|
3
3
|
return <div style={{
|
|
4
4
|
display: 'flex',
|
package/dist/assets/{Checkbox.tests.stories-FLl_ZNDM.js → Checkbox.tests.stories-BwjQYoFK.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"./Checkbox-BV4Be-fH.js";import{n as o,t as s}from"./Tooltip-
|
|
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"./Checkbox-BV4Be-fH.js";import{n as o,t as s}from"./Tooltip-CX8T37NP.js";var c,l,u,d,f,p,m,h,g,_,v,y;t((()=>{e(n(),1),o(),i(),c=r(),{userEvent:l,expect:u,within:d,waitFor:f,fireEvent:p,waitForElementToBeRemoved:m}=__STORYBOOK_MODULE_TEST__,h={title:`Components/Checkbox/Tests`,component:a,parameters:{controls:{disable:!0},chromatic:{disableSnapshot:!0}},tags:[`!autodocs`,`!a11y-test`,`test`]},g={render:function(){return(0,c.jsx)(a,{"aria-label":`checkboxLabel`,"aria-labelledby":`checkboxLabelledby`,"aria-describedby":`checkboxDescribedby`,hasError:!0})},play:async({canvasElement:e})=>{let t=d(e).getByRole(`checkbox`);u(t).toHaveAttribute(`aria-label`,`checkboxLabel`),u(t).toHaveAttribute(`aria-labelledby`,`checkboxLabelledby`),u(t).toHaveAttribute(`aria-describedby`,`checkboxDescribedby`),u(t).toHaveAttribute(`aria-invalid`,`true`)}},_={render:function(){return(0,c.jsx)(a,{dataset:{foo:1,bar:`2`,baz:!1},"aria-label":`checkbox`})},play:async({canvas:e})=>{let t=e.getByRole(`checkbox`);u(t).toHaveAttribute(`data-foo`,`1`),u(t).toHaveAttribute(`data-bar`,`2`),u(t).toHaveAttribute(`data-baz`,`false`)}},v={render:function(){return(0,c.jsx)(s,{content:`This is a tooltip`,trigger:`hover-and-touch`,dataset:{testid:`tooltip`},children:(0,c.jsx)(a,{"aria-label":`checkbox`})})},play:async({canvasElement:e,step:t})=>{let n=d(e),r=n.getByRole(`checkbox`);await t(`hover trigger element`,async()=>{await l.hover(r)}),await t(`tooltip should be shown`,async()=>{await f(()=>u(n.getByTestId(`tooltip`)).toBeInTheDocument())}),await t(`unhover trigger element`,async()=>{await l.unhover(r),p.pointerMove(document,{clientX:0,clientY:0})}),await t(`tooltip should be hidden`,async()=>{await m(()=>n.queryByTestId(`tooltip`))})}},g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{
|
|
2
2
|
render: function Story() {
|
|
3
3
|
return <Checkbox aria-label="checkboxLabel" aria-labelledby="checkboxLabelledby" aria-describedby="checkboxDescribedby" hasError />;
|
|
4
4
|
},
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{ht as r,t as i}from"./dist-DtfJeYQK.js";import{t as a}from"./jsx-runtime-C2wGStra.js";import{n as o,t as s}from"./dist-Cc1j9Pjk.js";import{n as c,t as l}from"./filterAttributesPassedByRadixUIAtRuntime-CGiuUnR2.js";import{n as u,t as d}from"./Icon-
|
|
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"./Icon-BItN7xKl.js";import{o as f,r as p}from"./lib-8ue2PVWI.js";import{n as m,t as h}from"./shared-strings-BFfhcoGp.js";import{n as g,t as _}from"./TokyoUIFav-B1g1wYYK.js";var v,y,b,x=t((()=>{v=`chips__j19Kv`,y=`chip__cSHFT`,b={chips:v,chip:y,"chip-toggle":`chip-toggle__Tkg8Z`,"chip-remove":`chip-remove__jiv1j`}})),S,C,w,T,E=t((()=>{S=e(n()),C=e(n()),w=({title:e,titleId:t,...n},r)=>S.createElement(`svg`,{xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 0 24 24`,ref:r,"aria-labelledby":t,...n},e?S.createElement(`title`,{id:t},e):null,S.createElement(`path`,{fillRule:`evenodd`,d:`M7.207 5.793a1 1 0 0 0-1.414 1.414L10.586 12l-4.793 4.793a1 1 0 1 0 1.414 1.414L12 13.414l4.793 4.793a1 1 0 0 0 1.414-1.414L13.414 12l4.793-4.793a1 1 0 0 0-1.414-1.414L12 10.586 7.207 5.793Z`,clipRule:`evenodd`})),T=(0,C.forwardRef)(w)})),D,O,k,A=t((()=>{s(),i(),D=e(n(),1),u(),x(),E(),c(),p(),m(),O=a(),k=({variant:e=`choice`,children:t,"aria-label":n,dataset:i})=>{let a={...i,variant:e};return(0,O.jsx)(`ul`,{"aria-label":n,className:b.chips,...r(a,{preplyDsComponent:o.Chips}),children:t})},k.Item=(0,D.forwardRef)(function({label:e,leadingSvgIcon:t,pressed:n,onToggle:i,onRemove:a,"aria-controls":s,dataset:c,...u},p){let{formatMessage:m}=f(),g=()=>i?.(!n),_=a??g;return(0,O.jsxs)(`li`,{...l(u),ref:p,className:b.chip,...r(c,{preplyDsComponent:o.Chip}),children:[(0,O.jsxs)(`button`,{type:`button`,className:b[`chip-toggle`],"aria-pressed":n,"aria-controls":s,onClick:g,onKeyUp:e=>{switch(e.key){case`Backspace`:case`Delete`:if(!n)return;g();break;default:}},children:[t&&(0,O.jsx)(d,{size:`24`,svg:t}),e]}),(0,O.jsx)(`button`,{type:`button`,className:b[`chip-remove`],onClick:_,"aria-label":m(h.remove),"aria-controls":s,children:(0,O.jsx)(d,{size:`24`,svg:T})})]})});try{k.displayName=`Chips`,k.__docgenInfo={description:`A Chips container.
|
|
2
2
|
|
|
3
3
|
Add \`Chips.Item\` children to render a list of Chips.`,displayName:`Chips`,props:{variant:{defaultValue:{value:`choice`},description:"The Chip list variant;\n- For simple checkbox-like behaviour, use `choice`.\n- For more complex filtering controls, use `filter`.",name:`variant`,required:!1,type:{name:`enum`,value:[{value:`"filter"`},{value:`"choice"`}]}},"aria-label":{defaultValue:null,description:`Allows assistive technologies to correctly identify and announce
|
|
4
4
|
the Chip list.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{a as n,f as r,k as i,rt as a}from"./components-BJI6UJJQ.js";import{t as o}from"./react-C7IZe2D1.js";import{c as s,f as c}from"./theming-C7TmxyGw.js";import{Ct as l,Tt as u,d,f,p,u as ee,wt as m}from"./iframe-BuOXI2w6.js";function te(e,t,{signal:n,edges:r}={}){let i,a=null,o=r!=null&&r.includes(`leading`),s=r==null||r.includes(`trailing`),c=()=>{a!==null&&(e.apply(i,a),i=void 0,a=null)},l=()=>{s&&c(),p()},u=null,d=()=>{u!=null&&clearTimeout(u),u=setTimeout(()=>{u=null,l()},t)},f=()=>{u!==null&&(clearTimeout(u),u=null)},p=()=>{f(),i=void 0,a=null},ee=()=>{c()},m=function(...e){if(n?.aborted)return;i=this,a=e;let t=u==null;d(),o&&t&&c()};return m.schedule=d,m.cancel=p,m.flush=ee,n?.addEventListener(`abort`,p,{once:!0}),m}function ne(e,...t){return h(e,C,...t)}function h(e,t,...n){let r=function(...r){let i=0,a=n.slice().map(e=>e===t?r[i++]:e),o=r.slice(i);return e.apply(this,a.concat(o))};return e.prototype&&(r.prototype=Object.create(e.prototype)),r}function re(e,...t){return ie(e,w,...t)}function ie(e,t,...n){let r=function(...r){let i=n.filter(e=>e===t).length,a=Math.max(r.length-i,0),o=r.slice(0,a),s=a,c=n.slice().map(e=>e===t?r[s++]:e);return e.apply(this,o.concat(c))};return e.prototype&&(r.prototype=Object.create(e.prototype)),r}function g(){return(g=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function _(e,t){if(e==null)return{};var n,r,i={},a=Object.keys(e);for(r=0;r<a.length;r++)t.indexOf(n=a[r])>=0||(i[n]=e[n]);return i}function v(e){var t=(0,b.useRef)(e),n=(0,b.useRef)(function(e){t.current&&t.current(e)});return t.current=e,n.current}function ae(e,t,n){var r=v(n),i=(0,b.useState)(function(){return e.toHsva(t)}),a=i[0],o=i[1],s=(0,b.useRef)({color:t,hsva:a});return(0,b.useEffect)(function(){if(!e.equal(t,s.current.color)){var n=e.toHsva(t);s.current={hsva:n,color:t},o(n)}},[t,e]),(0,b.useEffect)(function(){var t;V(a,s.current.hsva)||e.equal(t=e.fromHsva(a),s.current.color)||(s.current={hsva:a,color:t},r(t))},[a,e,r]),[a,(0,b.useCallback)(function(e){o(function(t){return Object.assign({},t,e)})},[])]}var y,b,oe,x,se,S,C,w,T,E,D,ce,le,O,k,A,j,ue,de,M,fe,pe,me,he,N,P,F,I,ge,L,_e,R,z,B,V,H,ve,ye,be,xe,U,W,Se,Ce,we,Te,G,Ee,De,Oe,ke,Ae,je,Me,Ne,K,Pe,Fe,Ie,q,J,Le,Re,ze,Y,Be,Ve,X,Z,He,Ue,We,Q,Ge,Ke,$,qe,Je,Ye;t((()=>{p(),u(),y=e(o(),1),a(),d(),b=e(o(),1),s(),oe=l({"../../../node_modules/color-name/index.js"(e,t){t.exports={aliceblue:[240,248,255],antiquewhite:[250,235,215],aqua:[0,255,255],aquamarine:[127,255,212],azure:[240,255,255],beige:[245,245,220],bisque:[255,228,196],black:[0,0,0],blanchedalmond:[255,235,205],blue:[0,0,255],blueviolet:[138,43,226],brown:[165,42,42],burlywood:[222,184,135],cadetblue:[95,158,160],chartreuse:[127,255,0],chocolate:[210,105,30],coral:[255,127,80],cornflowerblue:[100,149,237],cornsilk:[255,248,220],crimson:[220,20,60],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgoldenrod:[184,134,11],darkgray:[169,169,169],darkgreen:[0,100,0],darkgrey:[169,169,169],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkseagreen:[143,188,143],darkslateblue:[72,61,139],darkslategray:[47,79,79],darkslategrey:[47,79,79],darkturquoise:[0,206,209],darkviolet:[148,0,211],deeppink:[255,20,147],deepskyblue:[0,191,255],dimgray:[105,105,105],dimgrey:[105,105,105],dodgerblue:[30,144,255],firebrick:[178,34,34],floralwhite:[255,250,240],forestgreen:[34,139,34],fuchsia:[255,0,255],gainsboro:[220,220,220],ghostwhite:[248,248,255],gold:[255,215,0],goldenrod:[218,165,32],gray:[128,128,128],green:[0,128,0],greenyellow:[173,255,47],grey:[128,128,128],honeydew:[240,255,240],hotpink:[255,105,180],indianred:[205,92,92],indigo:[75,0,130],ivory:[255,255,240],khaki:[240,230,140],lavender:[230,230,250],lavenderblush:[255,240,245],lawngreen:[124,252,0],lemonchiffon:[255,250,205],lightblue:[173,216,230],lightcoral:[240,128,128],lightcyan:[224,255,255],lightgoldenrodyellow:[250,250,210],lightgray:[211,211,211],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightsalmon:[255,160,122],lightseagreen:[32,178,170],lightskyblue:[135,206,250],lightslategray:[119,136,153],lightslategrey:[119,136,153],lightsteelblue:[176,196,222],lightyellow:[255,255,224],lime:[0,255,0],limegreen:[50,205,50],linen:[250,240,230],magenta:[255,0,255],maroon:[128,0,0],mediumaquamarine:[102,205,170],mediumblue:[0,0,205],mediumorchid:[186,85,211],mediumpurple:[147,112,219],mediumseagreen:[60,179,113],mediumslateblue:[123,104,238],mediumspringgreen:[0,250,154],mediumturquoise:[72,209,204],mediumvioletred:[199,21,133],midnightblue:[25,25,112],mintcream:[245,255,250],mistyrose:[255,228,225],moccasin:[255,228,181],navajowhite:[255,222,173],navy:[0,0,128],oldlace:[253,245,230],olive:[128,128,0],olivedrab:[107,142,35],orange:[255,165,0],orangered:[255,69,0],orchid:[218,112,214],palegoldenrod:[238,232,170],palegreen:[152,251,152],paleturquoise:[175,238,238],palevioletred:[219,112,147],papayawhip:[255,239,213],peachpuff:[255,218,185],peru:[205,133,63],pink:[255,192,203],plum:[221,160,221],powderblue:[176,224,230],purple:[128,0,128],rebeccapurple:[102,51,153],red:[255,0,0],rosybrown:[188,143,143],royalblue:[65,105,225],saddlebrown:[139,69,19],salmon:[250,128,114],sandybrown:[244,164,96],seagreen:[46,139,87],seashell:[255,245,238],sienna:[160,82,45],silver:[192,192,192],skyblue:[135,206,235],slateblue:[106,90,205],slategray:[112,128,144],slategrey:[112,128,144],snow:[255,250,250],springgreen:[0,255,127],steelblue:[70,130,180],tan:[210,180,140],teal:[0,128,128],thistle:[216,191,216],tomato:[255,99,71],turquoise:[64,224,208],violet:[238,130,238],wheat:[245,222,179],white:[255,255,255],whitesmoke:[245,245,245],yellow:[255,255,0],yellowgreen:[154,205,50]}}}),x=l({"../../../node_modules/color-convert/conversions.js"(e,t){var n=oe(),r={};for(let e of Object.keys(n))r[n[e]]=e;var i={rgb:{channels:3,labels:`rgb`},hsl:{channels:3,labels:`hsl`},hsv:{channels:3,labels:`hsv`},hwb:{channels:3,labels:`hwb`},cmyk:{channels:4,labels:`cmyk`},xyz:{channels:3,labels:`xyz`},lab:{channels:3,labels:`lab`},lch:{channels:3,labels:`lch`},hex:{channels:1,labels:[`hex`]},keyword:{channels:1,labels:[`keyword`]},ansi16:{channels:1,labels:[`ansi16`]},ansi256:{channels:1,labels:[`ansi256`]},hcg:{channels:3,labels:[`h`,`c`,`g`]},apple:{channels:3,labels:[`r16`,`g16`,`b16`]},gray:{channels:1,labels:[`gray`]}};t.exports=i;for(let e of Object.keys(i)){if(!(`channels`in i[e]))throw Error(`missing channels property: `+e);if(!(`labels`in i[e]))throw Error(`missing channel labels property: `+e);if(i[e].labels.length!==i[e].channels)throw Error(`channel and label counts mismatch: `+e);let{channels:t,labels:n}=i[e];delete i[e].channels,delete i[e].labels,Object.defineProperty(i[e],`channels`,{value:t}),Object.defineProperty(i[e],`labels`,{value:n})}i.rgb.hsl=function(e){let t=e[0]/255,n=e[1]/255,r=e[2]/255,i=Math.min(t,n,r),a=Math.max(t,n,r),o=a-i,s,c;a===i?s=0:t===a?s=(n-r)/o:n===a?s=2+(r-t)/o:r===a&&(s=4+(t-n)/o),s=Math.min(s*60,360),s<0&&(s+=360);let l=(i+a)/2;return c=a===i?0:l<=.5?o/(a+i):o/(2-a-i),[s,c*100,l*100]},i.rgb.hsv=function(e){let t,n,r,i,a,o=e[0]/255,s=e[1]/255,c=e[2]/255,l=Math.max(o,s,c),u=l-Math.min(o,s,c),d=function(e){return(l-e)/6/u+1/2};return u===0?(i=0,a=0):(a=u/l,t=d(o),n=d(s),r=d(c),o===l?i=r-n:s===l?i=1/3+t-r:c===l&&(i=2/3+n-t),i<0?i+=1:i>1&&--i),[i*360,a*100,l*100]},i.rgb.hwb=function(e){let t=e[0],n=e[1],r=e[2],a=i.rgb.hsl(e)[0],o=1/255*Math.min(t,Math.min(n,r));return r=1-1/255*Math.max(t,Math.max(n,r)),[a,o*100,r*100]},i.rgb.cmyk=function(e){let t=e[0]/255,n=e[1]/255,r=e[2]/255,i=Math.min(1-t,1-n,1-r),a=(1-t-i)/(1-i)||0,o=(1-n-i)/(1-i)||0,s=(1-r-i)/(1-i)||0;return[a*100,o*100,s*100,i*100]};function a(e,t){return(e[0]-t[0])**2+(e[1]-t[1])**2+(e[2]-t[2])**2}i.rgb.keyword=function(e){let t=r[e];if(t)return t;let i=1/0,o;for(let t of Object.keys(n)){let r=n[t],s=a(e,r);s<i&&(i=s,o=t)}return o},i.keyword.rgb=function(e){return n[e]},i.rgb.xyz=function(e){let t=e[0]/255,n=e[1]/255,r=e[2]/255;t=t>.04045?((t+.055)/1.055)**2.4:t/12.92,n=n>.04045?((n+.055)/1.055)**2.4:n/12.92,r=r>.04045?((r+.055)/1.055)**2.4:r/12.92;let i=t*.4124+n*.3576+r*.1805,a=t*.2126+n*.7152+r*.0722,o=t*.0193+n*.1192+r*.9505;return[i*100,a*100,o*100]},i.rgb.lab=function(e){let t=i.rgb.xyz(e),n=t[0],r=t[1],a=t[2];return n/=95.047,r/=100,a/=108.883,n=n>.008856?n**(1/3):7.787*n+16/116,r=r>.008856?r**(1/3):7.787*r+16/116,a=a>.008856?a**(1/3):7.787*a+16/116,[116*r-16,500*(n-r),200*(r-a)]},i.hsl.rgb=function(e){let t=e[0]/360,n=e[1]/100,r=e[2]/100,i,a,o;if(n===0)return o=r*255,[o,o,o];i=r<.5?r*(1+n):r+n-r*n;let s=2*r-i,c=[0,0,0];for(let e=0;e<3;e++)a=t+1/3*-(e-1),a<0&&a++,a>1&&a--,o=6*a<1?s+(i-s)*6*a:2*a<1?i:3*a<2?s+(i-s)*(2/3-a)*6:s,c[e]=o*255;return c},i.hsl.hsv=function(e){let t=e[0],n=e[1]/100,r=e[2]/100,i=n,a=Math.max(r,.01);r*=2,n*=r<=1?r:2-r,i*=a<=1?a:2-a;let o=(r+n)/2;return[t,(r===0?2*i/(a+i):2*n/(r+n))*100,o*100]},i.hsv.rgb=function(e){let t=e[0]/60,n=e[1]/100,r=e[2]/100,i=Math.floor(t)%6,a=t-Math.floor(t),o=255*r*(1-n),s=255*r*(1-n*a),c=255*r*(1-n*(1-a));switch(r*=255,i){case 0:return[r,c,o];case 1:return[s,r,o];case 2:return[o,r,c];case 3:return[o,s,r];case 4:return[c,o,r];case 5:return[r,o,s]}},i.hsv.hsl=function(e){let t=e[0],n=e[1]/100,r=e[2]/100,i=Math.max(r,.01),a,o;o=(2-n)*r;let s=(2-n)*i;return a=n*i,a/=s<=1?s:2-s,a||=0,o/=2,[t,a*100,o*100]},i.hwb.rgb=function(e){let t=e[0]/360,n=e[1]/100,r=e[2]/100,i=n+r,a;i>1&&(n/=i,r/=i);let o=Math.floor(6*t),s=1-r;a=6*t-o,o&1&&(a=1-a);let c=n+a*(s-n),l,u,d;switch(o){default:case 6:case 0:l=s,u=c,d=n;break;case 1:l=c,u=s,d=n;break;case 2:l=n,u=s,d=c;break;case 3:l=n,u=c,d=s;break;case 4:l=c,u=n,d=s;break;case 5:l=s,u=n,d=c;break}return[l*255,u*255,d*255]},i.cmyk.rgb=function(e){let t=e[0]/100,n=e[1]/100,r=e[2]/100,i=e[3]/100,a=1-Math.min(1,t*(1-i)+i),o=1-Math.min(1,n*(1-i)+i),s=1-Math.min(1,r*(1-i)+i);return[a*255,o*255,s*255]},i.xyz.rgb=function(e){let t=e[0]/100,n=e[1]/100,r=e[2]/100,i,a,o;return i=t*3.2406+n*-1.5372+r*-.4986,a=t*-.9689+n*1.8758+r*.0415,o=t*.0557+n*-.204+r*1.057,i=i>.0031308?1.055*i**(1/2.4)-.055:i*12.92,a=a>.0031308?1.055*a**(1/2.4)-.055:a*12.92,o=o>.0031308?1.055*o**(1/2.4)-.055:o*12.92,i=Math.min(Math.max(0,i),1),a=Math.min(Math.max(0,a),1),o=Math.min(Math.max(0,o),1),[i*255,a*255,o*255]},i.xyz.lab=function(e){let t=e[0],n=e[1],r=e[2];return t/=95.047,n/=100,r/=108.883,t=t>.008856?t**(1/3):7.787*t+16/116,n=n>.008856?n**(1/3):7.787*n+16/116,r=r>.008856?r**(1/3):7.787*r+16/116,[116*n-16,500*(t-n),200*(n-r)]},i.lab.xyz=function(e){let t=e[0],n=e[1],r=e[2],i,a,o;a=(t+16)/116,i=n/500+a,o=a-r/200;let s=a**3,c=i**3,l=o**3;return a=s>.008856?s:(a-16/116)/7.787,i=c>.008856?c:(i-16/116)/7.787,o=l>.008856?l:(o-16/116)/7.787,i*=95.047,a*=100,o*=108.883,[i,a,o]},i.lab.lch=function(e){let t=e[0],n=e[1],r=e[2],i;return i=Math.atan2(r,n)*360/2/Math.PI,i<0&&(i+=360),[t,Math.sqrt(n*n+r*r),i]},i.lch.lab=function(e){let t=e[0],n=e[1],r=e[2]/360*2*Math.PI;return[t,n*Math.cos(r),n*Math.sin(r)]},i.rgb.ansi16=function(e,t=null){let[n,r,a]=e,o=t===null?i.rgb.hsv(e)[2]:t;if(o=Math.round(o/50),o===0)return 30;let s=30+(Math.round(a/255)<<2|Math.round(r/255)<<1|Math.round(n/255));return o===2&&(s+=60),s},i.hsv.ansi16=function(e){return i.rgb.ansi16(i.hsv.rgb(e),e[2])},i.rgb.ansi256=function(e){let t=e[0],n=e[1],r=e[2];return t===n&&n===r?t<8?16:t>248?231:Math.round((t-8)/247*24)+232:16+36*Math.round(t/255*5)+6*Math.round(n/255*5)+Math.round(r/255*5)},i.ansi16.rgb=function(e){let t=e%10;if(t===0||t===7)return e>50&&(t+=3.5),t=t/10.5*255,[t,t,t];let n=(~~(e>50)+1)*.5;return[(t&1)*n*255,(t>>1&1)*n*255,(t>>2&1)*n*255]},i.ansi256.rgb=function(e){if(e>=232){let t=(e-232)*10+8;return[t,t,t]}e-=16;let t;return[Math.floor(e/36)/5*255,Math.floor((t=e%36)/6)/5*255,t%6/5*255]},i.rgb.hex=function(e){let t=(((Math.round(e[0])&255)<<16)+((Math.round(e[1])&255)<<8)+(Math.round(e[2])&255)).toString(16).toUpperCase();return`000000`.substring(t.length)+t},i.hex.rgb=function(e){let t=e.toString(16).match(/[a-f0-9]{6}|[a-f0-9]{3}/i);if(!t)return[0,0,0];let n=t[0];t[0].length===3&&(n=n.split(``).map(e=>e+e).join(``));let r=parseInt(n,16);return[r>>16&255,r>>8&255,r&255]},i.rgb.hcg=function(e){let t=e[0]/255,n=e[1]/255,r=e[2]/255,i=Math.max(Math.max(t,n),r),a=Math.min(Math.min(t,n),r),o=i-a,s,c;return s=o<1?a/(1-o):0,c=o<=0?0:i===t?(n-r)/o%6:i===n?2+(r-t)/o:4+(t-n)/o,c/=6,c%=1,[c*360,o*100,s*100]},i.hsl.hcg=function(e){let t=e[1]/100,n=e[2]/100,r=n<.5?2*t*n:2*t*(1-n),i=0;return r<1&&(i=(n-.5*r)/(1-r)),[e[0],r*100,i*100]},i.hsv.hcg=function(e){let t=e[1]/100,n=e[2]/100,r=t*n,i=0;return r<1&&(i=(n-r)/(1-r)),[e[0],r*100,i*100]},i.hcg.rgb=function(e){let t=e[0]/360,n=e[1]/100,r=e[2]/100;if(n===0)return[r*255,r*255,r*255];let i=[0,0,0],a=t%1*6,o=a%1,s=1-o,c=0;switch(Math.floor(a)){case 0:i[0]=1,i[1]=o,i[2]=0;break;case 1:i[0]=s,i[1]=1,i[2]=0;break;case 2:i[0]=0,i[1]=1,i[2]=o;break;case 3:i[0]=0,i[1]=s,i[2]=1;break;case 4:i[0]=o,i[1]=0,i[2]=1;break;default:i[0]=1,i[1]=0,i[2]=s}return c=(1-n)*r,[(n*i[0]+c)*255,(n*i[1]+c)*255,(n*i[2]+c)*255]},i.hcg.hsv=function(e){let t=e[1]/100,n=t+e[2]/100*(1-t),r=0;return n>0&&(r=t/n),[e[0],r*100,n*100]},i.hcg.hsl=function(e){let t=e[1]/100,n=e[2]/100*(1-t)+.5*t,r=0;return n>0&&n<.5?r=t/(2*n):n>=.5&&n<1&&(r=t/(2*(1-n))),[e[0],r*100,n*100]},i.hcg.hwb=function(e){let t=e[1]/100,n=t+e[2]/100*(1-t);return[e[0],(n-t)*100,(1-n)*100]},i.hwb.hcg=function(e){let t=e[1]/100,n=1-e[2]/100,r=n-t,i=0;return r<1&&(i=(n-r)/(1-r)),[e[0],r*100,i*100]},i.apple.rgb=function(e){return[e[0]/65535*255,e[1]/65535*255,e[2]/65535*255]},i.rgb.apple=function(e){return[e[0]/255*65535,e[1]/255*65535,e[2]/255*65535]},i.gray.rgb=function(e){return[e[0]/100*255,e[0]/100*255,e[0]/100*255]},i.gray.hsl=function(e){return[0,0,e[0]]},i.gray.hsv=i.gray.hsl,i.gray.hwb=function(e){return[0,100,e[0]]},i.gray.cmyk=function(e){return[0,0,0,e[0]]},i.gray.lab=function(e){return[e[0],0,0]},i.gray.hex=function(e){let t=Math.round(e[0]/100*255)&255,n=((t<<16)+(t<<8)+t).toString(16).toUpperCase();return`000000`.substring(n.length)+n},i.rgb.gray=function(e){return[(e[0]+e[1]+e[2])/3/255*100]}}}),se=l({"../../../node_modules/color-convert/route.js"(e,t){var n=x();function r(){let e={},t=Object.keys(n);for(let n=t.length,r=0;r<n;r++)e[t[r]]={distance:-1,parent:null};return e}function i(e){let t=r(),i=[e];for(t[e].distance=0;i.length;){let e=i.pop(),r=Object.keys(n[e]);for(let n=r.length,a=0;a<n;a++){let n=r[a],o=t[n];o.distance===-1&&(o.distance=t[e].distance+1,o.parent=e,i.unshift(n))}}return t}function a(e,t){return function(n){return t(e(n))}}function o(e,t){let r=[t[e].parent,e],i=n[t[e].parent][e],o=t[e].parent;for(;t[o].parent;)r.unshift(t[o].parent),i=a(n[t[o].parent][o],i),o=t[o].parent;return i.conversion=r,i}t.exports=function(e){let t=i(e),n={},r=Object.keys(t);for(let e=r.length,i=0;i<e;i++){let e=r[i];t[e].parent!==null&&(n[e]=o(e,t))}return n}}}),S=m(l({"../../../node_modules/color-convert/index.js"(e,t){var n=x(),r=se(),i={},a=Object.keys(n);function o(e){let t=function(...t){let n=t[0];return n==null?n:(n.length>1&&(t=n),e(t))};return`conversion`in e&&(t.conversion=e.conversion),t}function s(e){let t=function(...t){let n=t[0];if(n==null)return n;n.length>1&&(t=n);let r=e(t);if(typeof r==`object`)for(let e=r.length,t=0;t<e;t++)r[t]=Math.round(r[t]);return r};return`conversion`in e&&(t.conversion=e.conversion),t}a.forEach(e=>{i[e]={},Object.defineProperty(i[e],`channels`,{value:n[e].channels}),Object.defineProperty(i[e],`labels`,{value:n[e].labels});let t=r(e);Object.keys(t).forEach(n=>{let r=t[n];i[e][n]=s(r),i[e][n].raw=o(r)})}),t.exports=i}})(),1),C=Symbol(`partial.placeholder`),ne.placeholder=C,w=Symbol(`partialRight.placeholder`),re.placeholder=w,T=function(e,t,n){return t===void 0&&(t=0),n===void 0&&(n=1),e>n?n:e<t?t:e},E=function(e){return`touches`in e},D=function(e){return e&&e.ownerDocument.defaultView||self},ce=function(e,t,n){var r=e.getBoundingClientRect(),i=E(t)?(function(e,t){for(var n=0;n<e.length;n++)if(e[n].identifier===t)return e[n];return e[0]})(t.touches,n):t;return{left:T((i.pageX-(r.left+D(e).pageXOffset))/r.width),top:T((i.pageY-(r.top+D(e).pageYOffset))/r.height)}},le=function(e){!E(e)&&e.preventDefault()},O=b.memo(function(e){var t=e.onMove,n=e.onKey,r=_(e,[`onMove`,`onKey`]),i=(0,b.useRef)(null),a=v(t),o=v(n),s=(0,b.useRef)(null),c=(0,b.useRef)(!1),l=(0,b.useMemo)(function(){var e=function(e){le(e),(E(e)?e.touches.length>0:e.buttons>0)&&i.current?a(ce(i.current,e,s.current)):n(!1)},t=function(){return n(!1)};function n(n){var r=c.current,a=D(i.current),o=n?a.addEventListener:a.removeEventListener;o(r?`touchmove`:`mousemove`,e),o(r?`touchend`:`mouseup`,t)}return[function(e){var t=e.nativeEvent,r=i.current;if(r&&(le(t),!(function(e,t){return t&&!E(e)})(t,c.current)&&r)){if(E(t)){c.current=!0;var o=t.changedTouches||[];o.length&&(s.current=o[0].identifier)}r.focus(),a(ce(r,t,s.current)),n(!0)}},function(e){var t=e.which||e.keyCode;t<37||t>40||(e.preventDefault(),o({left:t===39?.05:t===37?-.05:0,top:t===40?.05:t===38?-.05:0}))},n]},[o,a]),u=l[0],d=l[1],f=l[2];return(0,b.useEffect)(function(){return f},[f]),b.createElement(`div`,g({},r,{onTouchStart:u,onMouseDown:u,className:`react-colorful__interactive`,ref:i,onKeyDown:d,tabIndex:0,role:`slider`}))}),k=function(e){return e.filter(Boolean).join(` `)},A=function(e){var t=e.color,n=e.left,r=e.top,i=r===void 0?.5:r,a=k([`react-colorful__pointer`,e.className]);return b.createElement(`div`,{className:a,style:{top:100*i+`%`,left:100*n+`%`}},b.createElement(`div`,{className:`react-colorful__pointer-fill`,style:{backgroundColor:t}}))},j=function(e,t,n){return t===void 0&&(t=0),n===void 0&&(n=10**t),Math.round(n*e)/n},ue={grad:.9,turn:360,rad:360/(2*Math.PI)},de=function(e){return R(M(e))},M=function(e){return e[0]===`#`&&(e=e.substring(1)),e.length<6?{r:parseInt(e[0]+e[0],16),g:parseInt(e[1]+e[1],16),b:parseInt(e[2]+e[2],16),a:e.length===4?j(parseInt(e[3]+e[3],16)/255,2):1}:{r:parseInt(e.substring(0,2),16),g:parseInt(e.substring(2,4),16),b:parseInt(e.substring(4,6),16),a:e.length===8?j(parseInt(e.substring(6,8),16)/255,2):1}},fe=function(e,t){return t===void 0&&(t=`deg`),Number(e)*(ue[t]||1)},pe=function(e){var t=/hsla?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e);return t?me({h:fe(t[1],t[2]),s:Number(t[3]),l:Number(t[4]),a:t[5]===void 0?1:Number(t[5])/(t[6]?100:1)}):{h:0,s:0,v:0,a:1}},me=function(e){var t=e.s,n=e.l;return{h:e.h,s:(t*=(n<50?n:100-n)/100)>0?2*t/(n+t)*100:0,v:n+t,a:e.a}},he=function(e){return _e(I(e))},N=function(e){var t=e.s,n=e.v,r=e.a,i=(200-t)*n/100;return{h:j(e.h),s:j(i>0&&i<200?t*n/100/(i<=100?i:200-i)*100:0),l:j(i/2),a:j(r,2)}},P=function(e){var t=N(e);return`hsl(`+t.h+`, `+t.s+`%, `+t.l+`%)`},F=function(e){var t=N(e);return`hsla(`+t.h+`, `+t.s+`%, `+t.l+`%, `+t.a+`)`},I=function(e){var t=e.h,n=e.s,r=e.v,i=e.a;t=t/360*6,n/=100,r/=100;var a=Math.floor(t),o=r*(1-n),s=r*(1-(t-a)*n),c=r*(1-(1-t+a)*n),l=a%6;return{r:j(255*[r,s,o,o,c,r][l]),g:j(255*[c,r,r,s,o,o][l]),b:j(255*[o,o,c,r,r,s][l]),a:j(i,2)}},ge=function(e){var t=/rgba?\(?\s*(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e);return t?R({r:Number(t[1])/(t[2]?100/255:1),g:Number(t[3])/(t[4]?100/255:1),b:Number(t[5])/(t[6]?100/255:1),a:t[7]===void 0?1:Number(t[7])/(t[8]?100:1)}):{h:0,s:0,v:0,a:1}},L=function(e){var t=e.toString(16);return t.length<2?`0`+t:t},_e=function(e){var t=e.r,n=e.g,r=e.b,i=e.a,a=i<1?L(j(255*i)):``;return`#`+L(t)+L(n)+L(r)+a},R=function(e){var t=e.r,n=e.g,r=e.b,i=e.a,a=Math.max(t,n,r),o=a-Math.min(t,n,r),s=o?a===t?(n-r)/o:a===n?2+(r-t)/o:4+(t-n)/o:0;return{h:j(60*(s<0?s+6:s)),s:j(a?o/a*100:0),v:j(a/255*100),a:i}},z=b.memo(function(e){var t=e.hue,n=e.onChange,r=k([`react-colorful__hue`,e.className]);return b.createElement(`div`,{className:r},b.createElement(O,{onMove:function(e){n({h:360*e.left})},onKey:function(e){n({h:T(t+360*e.left,0,360)})},"aria-label":`Hue`,"aria-valuenow":j(t),"aria-valuemax":`360`,"aria-valuemin":`0`},b.createElement(A,{className:`react-colorful__hue-pointer`,left:t/360,color:P({h:t,s:100,v:100,a:1})})))}),B=b.memo(function(e){var t=e.hsva,n=e.onChange,r={backgroundColor:P({h:t.h,s:100,v:100,a:1})};return b.createElement(`div`,{className:`react-colorful__saturation`,style:r},b.createElement(O,{onMove:function(e){n({s:100*e.left,v:100-100*e.top})},onKey:function(e){n({s:T(t.s+100*e.left,0,100),v:T(t.v-100*e.top,0,100)})},"aria-label":`Color`,"aria-valuetext":`Saturation `+j(t.s)+`%, Brightness `+j(t.v)+`%`},b.createElement(A,{className:`react-colorful__saturation-pointer`,top:1-t.v/100,left:t.s/100,color:P(t)})))}),V=function(e,t){if(e===t)return!0;for(var n in e)if(e[n]!==t[n])return!1;return!0},H=function(e,t){return e.replace(/\s/g,``)===t.replace(/\s/g,``)},ve=function(e,t){return e.toLowerCase()===t.toLowerCase()||V(M(e),M(t))},be=typeof window<`u`?b.useLayoutEffect:b.useEffect,xe=function(){return ye||(typeof __webpack_nonce__<`u`?__webpack_nonce__:void 0)},U=new Map,W=function(e){be(function(){var t=e.current?e.current.ownerDocument:document;if(t!==void 0&&!U.has(t)){var n=t.createElement(`style`);n.innerHTML=`.react-colorful{position:relative;display:flex;flex-direction:column;width:200px;height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.react-colorful__saturation{position:relative;flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.react-colorful__alpha-gradient,.react-colorful__pointer-fill{content:"";position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;border-radius:inherit}.react-colorful__alpha-gradient,.react-colorful__saturation{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.react-colorful__alpha,.react-colorful__hue{position:relative;height:24px}.react-colorful__hue{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.react-colorful__last-control{border-radius:0 0 8px 8px}.react-colorful__interactive{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;outline:none;touch-action:none}.react-colorful__pointer{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}.react-colorful__interactive:focus .react-colorful__pointer{transform:translate(-50%,-50%) scale(1.1)}.react-colorful__alpha,.react-colorful__alpha-pointer{background-color:#fff;background-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>')}.react-colorful__saturation-pointer{z-index:3}.react-colorful__hue-pointer{z-index:2}`,U.set(t,n);var r=xe();r&&n.setAttribute(`nonce`,r),t.head.appendChild(n)}},[])},Se=function(e){var t=e.className,n=e.colorModel,r=e.color,i=r===void 0?n.defaultColor:r,a=e.onChange,o=_(e,[`className`,`colorModel`,`color`,`onChange`]),s=(0,b.useRef)(null);W(s);var c=ae(n,i,a),l=c[0],u=c[1],d=k([`react-colorful`,t]);return b.createElement(`div`,g({},o,{ref:s,className:d}),b.createElement(B,{hsva:l,onChange:u}),b.createElement(z,{hue:l.h,onChange:u,className:`react-colorful__last-control`}))},Ce={defaultColor:`000`,toHsva:de,fromHsva:function(e){return he({h:e.h,s:e.s,v:e.v,a:1})},equal:ve},we=function(e){return b.createElement(Se,g({},e,{colorModel:Ce}))},Te=function(e){var t=e.className,n=e.hsva,r=e.onChange,i={backgroundImage:`linear-gradient(90deg, `+F(Object.assign({},n,{a:0}))+`, `+F(Object.assign({},n,{a:1}))+`)`},a=k([`react-colorful__alpha`,t]),o=j(100*n.a);return b.createElement(`div`,{className:a},b.createElement(`div`,{className:`react-colorful__alpha-gradient`,style:i}),b.createElement(O,{onMove:function(e){r({a:e.left})},onKey:function(e){r({a:T(n.a+e.left)})},"aria-label":`Alpha`,"aria-valuetext":o+`%`,"aria-valuenow":o,"aria-valuemin":`0`,"aria-valuemax":`100`},b.createElement(A,{className:`react-colorful__alpha-pointer`,left:n.a,color:F(n)})))},G=function(e){var t=e.className,n=e.colorModel,r=e.color,i=r===void 0?n.defaultColor:r,a=e.onChange,o=_(e,[`className`,`colorModel`,`color`,`onChange`]),s=(0,b.useRef)(null);W(s);var c=ae(n,i,a),l=c[0],u=c[1],d=k([`react-colorful`,t]);return b.createElement(`div`,g({},o,{ref:s,className:d}),b.createElement(B,{hsva:l,onChange:u}),b.createElement(z,{hue:l.h,onChange:u}),b.createElement(Te,{hsva:l,onChange:u,className:`react-colorful__last-control`}))},Ee={defaultColor:`hsla(0, 0%, 0%, 1)`,toHsva:pe,fromHsva:F,equal:H},De=function(e){return b.createElement(G,g({},e,{colorModel:Ee}))},Oe={defaultColor:`rgba(0, 0, 0, 1)`,toHsva:ge,fromHsva:function(e){var t=I(e);return`rgba(`+t.r+`, `+t.g+`, `+t.b+`, `+t.a+`)`},equal:H},ke=function(e){return b.createElement(G,g({},e,{colorModel:Oe}))},Ae=c.div({position:`relative`,maxWidth:250}),je=c.div({width:200,margin:5,".react-colorful__saturation":{borderRadius:`4px 4px 0 0`},".react-colorful__hue":{boxShadow:`inset 0 0 0 1px rgb(0 0 0 / 5%)`},".react-colorful__last-control":{borderRadius:`0 0 4px 4px`}}),Me=c.div({display:`grid`,gridTemplateColumns:`repeat(9, 16px)`,gap:6,padding:3,marginTop:5,width:200}),Ne=e=>`url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity="0.05" fill="${e?`white`:`black`}"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>')`,K=c(n)(({value:e,selected:t,theme:n})=>({width:16,height:16,boxShadow:t?`${n.appBorderColor} 0 0 0 1px inset, ${n.textMutedColor}50 0 0 0 4px`:`${n.appBorderColor} 0 0 0 1px inset`,border:`none`,borderRadius:n.appBorderRadius,"&, &:hover":{background:`unset`,backgroundColor:`unset`,backgroundImage:`linear-gradient(${e}, ${e}), ${Ne(n.base===`dark`)}`}})),Pe=c(r.Input)(({theme:e})=>({width:`100%`,paddingLeft:30,paddingRight:30,boxSizing:`border-box`,fontFamily:e.typography.fonts.base,'[aria-readonly="true"] > &':{background:e.base===`light`?e.color.lighter:`transparent`}})),Fe=c(K)(({disabled:e})=>({position:`absolute`,top:4,left:4,zIndex:1,cursor:e?`not-allowed`:`pointer`})),Ie=c(n)(({theme:e})=>({position:`absolute`,zIndex:1,top:6,right:7,width:20,height:20,padding:4,boxSizing:`border-box`,cursor:`pointer`,color:e.input.color})),q=(e=>(e.RGB=`rgb`,e.HSL=`hsl`,e.HEX=`hex`,e))(q||{}),J=Object.values(q),Le=/\(([0-9]+),\s*([0-9]+)%?,\s*([0-9]+)%?,?\s*([0-9.]+)?\)/,Re=/^\s*rgba?\(([0-9]+),\s*([0-9]+),\s*([0-9]+),?\s*([0-9.]+)?\)\s*$/i,ze=/^\s*hsla?\(([0-9]+),\s*([0-9]+)%,\s*([0-9]+)%,?\s*([0-9.]+)?\)\s*$/i,Y=/^\s*#?([0-9a-f]{3}|[0-9a-f]{6})\s*$/i,Be=/^\s*#?([0-9a-f]{3})\s*$/i,Ve={hex:we,rgb:ke,hsl:De},X={hex:`transparent`,rgb:`rgba(0, 0, 0, 0)`,hsl:`hsla(0, 0%, 0%, 0)`},Z=e=>{let t=e?.match(Le);if(!t)return[0,0,0,1];let[,n,r,i,a=1]=t;return[n,r,i,a].map(Number)},He=e=>{let[t,n,r,i]=Z(e),[a,o,s]=S.default.rgb.hsl([t,n,r])||[0,0,0];return{valid:!0,value:e,keyword:S.default.rgb.keyword([t,n,r]),colorSpace:`rgb`,rgb:e,hsl:`hsla(${a}, ${o}%, ${s}%, ${i})`,hex:`#${S.default.rgb.hex([t,n,r]).toLowerCase()}`}},Ue=e=>{let[t,n,r,i]=Z(e),[a,o,s]=S.default.hsl.rgb([t,n,r])||[0,0,0];return{valid:!0,value:e,keyword:S.default.hsl.keyword([t,n,r]),colorSpace:`hsl`,rgb:`rgba(${a}, ${o}, ${s}, ${i})`,hsl:e,hex:`#${S.default.hsl.hex([t,n,r]).toLowerCase()}`}},We=e=>{let t=e.replace(`#`,``),n=S.default.keyword.rgb(t)||S.default.hex.rgb(t),r=S.default.rgb.hsl(n),i=e;/[^#a-f0-9]/i.test(e)?i=t:Y.test(e)&&(i=`#${t}`);let a=!0;if(i.startsWith(`#`))a=Y.test(i);else try{S.default.keyword.hex(i)}catch{a=!1}return{valid:a,value:i,keyword:S.default.rgb.keyword(n),colorSpace:`hex`,rgb:`rgba(${n[0]}, ${n[1]}, ${n[2]}, 1)`,hsl:`hsla(${r[0]}, ${r[1]}%, ${r[2]}%, 1)`,hex:i}},Q=e=>{if(e)return Re.test(e)?He(e):ze.test(e)?Ue(e):We(e)},Ge=(e,t,n)=>{if(!e||!t?.valid)return X[n];if(n!==`hex`)return t?.[n]||X[n];if(!t.hex.startsWith(`#`))try{return`#${S.default.keyword.hex(t.hex)}`}catch{return X.hex}let r=t.hex.match(Be);if(!r)return Y.test(t.hex)?t.hex:X.hex;let[i,a,o]=r[1].split(``);return`#${i}${i}${a}${a}${o}${o}`},Ke=(e,t)=>{let[n,r]=(0,y.useState)(e||``),[i,a]=(0,y.useState)(()=>Q(n)),[o,s]=(0,y.useState)(i?.colorSpace||`hex`);return(0,y.useEffect)(()=>{let t=e||``,n=Q(t);r(t),a(n),s(n?.colorSpace||`hex`)},[e]),{value:n,realValue:(0,y.useMemo)(()=>Ge(n,i,o).toLowerCase(),[n,i,o]),updateValue:(0,y.useCallback)(e=>{let n=Q(e),i=n?.value||e||``;r(i),i===``&&(a(void 0),t(void 0)),n&&(a(n),s(n.colorSpace),t(n.value))},[t]),color:i,colorSpace:o,cycleColorSpace:(0,y.useCallback)(()=>{let e=J[(J.indexOf(o)+1)%J.length];s(e);let n=i?.[e]||``;r(n),t(n)},[i,o,t])}},$=e=>e.replace(/\s*/,``).toLowerCase(),qe=(e,t,n)=>{let[r,i]=(0,y.useState)(t?.valid?[t]:[]);(0,y.useEffect)(()=>{t===void 0&&i([])},[t]);let a=(0,y.useMemo)(()=>(e||[]).map(e=>typeof e==`string`?Q(e):e.title?{...Q(e.color),keyword:e.title}:Q(e.color)).concat(r).filter(Boolean).slice(-27),[e,r]);return{presets:a,addPreset:(0,y.useCallback)(e=>{e?.valid&&(a.some(t=>t&&t[n]&&$(t[n]||``)===$(e[n]||``))||i(t=>t.concat(e)))},[n,a])}},Je=({name:e,value:t,onChange:n,onFocus:r,onBlur:a,presetColors:o,startOpen:s=!1,argType:c})=>{let{value:l,realValue:u,updateValue:d,color:p,colorSpace:m,cycleColorSpace:ne}=Ke(t,(0,y.useCallback)(te(n,200),[n])),{presets:h,addPreset:re}=qe(o??[],p,m),ie=Ve[m],g=!!c?.table?.readonly,_=f(e);return y.createElement(Ae,null,y.createElement(`label`,{htmlFor:_,className:`sb-sr-only`},e),y.createElement(Pe,{id:_,value:l,onChange:e=>d(e.target.value),onFocus:e=>e.target.select(),readOnly:g,placeholder:`Choose color...`}),y.createElement(i,{defaultVisible:s,visible:g?!1:void 0,onVisibleChange:()=>p&&re(p),popover:y.createElement(je,null,y.createElement(ie,{color:u===`transparent`?`#000000`:u,onChange:d,onFocus:r,onBlur:a}),h.length>0&&y.createElement(Me,null,h.map((e,t)=>y.createElement(K,{key:`${e?.value||t}-${t}`,variant:`ghost`,padding:`small`,size:`small`,ariaLabel:`Pick this color`,tooltip:e?.keyword||e?.value||``,value:e?.value||``,selected:!!(p&&e&&e[m]&&$(e[m]||``)===$(p[m])),onClick:()=>e&&d(e.value||``)}))))},y.createElement(Fe,{variant:`ghost`,padding:`small`,size:`small`,ariaLabel:`Open color picker`,value:u,style:{margin:4},disabled:g})),l?y.createElement(Ie,{variant:`ghost`,padding:`small`,size:`small`,ariaLabel:`Cycle through color spaces`,disabled:g,onClick:g?void 0:ne},y.createElement(ee,null)):null)},Ye=Je}))();export{Je as ColorControl,Ye as default};
|
|
1
|
+
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{a as n,f as r,k as i,rt as a}from"./components-BJI6UJJQ.js";import{t as o}from"./react-C7IZe2D1.js";import{c as s,f as c}from"./theming-C7TmxyGw.js";import{Ct as l,Tt as u,d,f,p,u as ee,wt as m}from"./iframe-Czcvpvgg.js";function te(e,t,{signal:n,edges:r}={}){let i,a=null,o=r!=null&&r.includes(`leading`),s=r==null||r.includes(`trailing`),c=()=>{a!==null&&(e.apply(i,a),i=void 0,a=null)},l=()=>{s&&c(),p()},u=null,d=()=>{u!=null&&clearTimeout(u),u=setTimeout(()=>{u=null,l()},t)},f=()=>{u!==null&&(clearTimeout(u),u=null)},p=()=>{f(),i=void 0,a=null},ee=()=>{c()},m=function(...e){if(n?.aborted)return;i=this,a=e;let t=u==null;d(),o&&t&&c()};return m.schedule=d,m.cancel=p,m.flush=ee,n?.addEventListener(`abort`,p,{once:!0}),m}function ne(e,...t){return h(e,C,...t)}function h(e,t,...n){let r=function(...r){let i=0,a=n.slice().map(e=>e===t?r[i++]:e),o=r.slice(i);return e.apply(this,a.concat(o))};return e.prototype&&(r.prototype=Object.create(e.prototype)),r}function re(e,...t){return ie(e,w,...t)}function ie(e,t,...n){let r=function(...r){let i=n.filter(e=>e===t).length,a=Math.max(r.length-i,0),o=r.slice(0,a),s=a,c=n.slice().map(e=>e===t?r[s++]:e);return e.apply(this,o.concat(c))};return e.prototype&&(r.prototype=Object.create(e.prototype)),r}function g(){return(g=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function _(e,t){if(e==null)return{};var n,r,i={},a=Object.keys(e);for(r=0;r<a.length;r++)t.indexOf(n=a[r])>=0||(i[n]=e[n]);return i}function v(e){var t=(0,b.useRef)(e),n=(0,b.useRef)(function(e){t.current&&t.current(e)});return t.current=e,n.current}function ae(e,t,n){var r=v(n),i=(0,b.useState)(function(){return e.toHsva(t)}),a=i[0],o=i[1],s=(0,b.useRef)({color:t,hsva:a});return(0,b.useEffect)(function(){if(!e.equal(t,s.current.color)){var n=e.toHsva(t);s.current={hsva:n,color:t},o(n)}},[t,e]),(0,b.useEffect)(function(){var t;V(a,s.current.hsva)||e.equal(t=e.fromHsva(a),s.current.color)||(s.current={hsva:a,color:t},r(t))},[a,e,r]),[a,(0,b.useCallback)(function(e){o(function(t){return Object.assign({},t,e)})},[])]}var y,b,oe,x,se,S,C,w,T,E,D,ce,le,O,k,A,j,ue,de,M,fe,pe,me,he,N,P,F,I,ge,L,_e,R,z,B,V,H,ve,ye,be,xe,U,W,Se,Ce,we,Te,G,Ee,De,Oe,ke,Ae,je,Me,Ne,K,Pe,Fe,Ie,q,J,Le,Re,ze,Y,Be,Ve,X,Z,He,Ue,We,Q,Ge,Ke,$,qe,Je,Ye;t((()=>{p(),u(),y=e(o(),1),a(),d(),b=e(o(),1),s(),oe=l({"../../../node_modules/color-name/index.js"(e,t){t.exports={aliceblue:[240,248,255],antiquewhite:[250,235,215],aqua:[0,255,255],aquamarine:[127,255,212],azure:[240,255,255],beige:[245,245,220],bisque:[255,228,196],black:[0,0,0],blanchedalmond:[255,235,205],blue:[0,0,255],blueviolet:[138,43,226],brown:[165,42,42],burlywood:[222,184,135],cadetblue:[95,158,160],chartreuse:[127,255,0],chocolate:[210,105,30],coral:[255,127,80],cornflowerblue:[100,149,237],cornsilk:[255,248,220],crimson:[220,20,60],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgoldenrod:[184,134,11],darkgray:[169,169,169],darkgreen:[0,100,0],darkgrey:[169,169,169],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkseagreen:[143,188,143],darkslateblue:[72,61,139],darkslategray:[47,79,79],darkslategrey:[47,79,79],darkturquoise:[0,206,209],darkviolet:[148,0,211],deeppink:[255,20,147],deepskyblue:[0,191,255],dimgray:[105,105,105],dimgrey:[105,105,105],dodgerblue:[30,144,255],firebrick:[178,34,34],floralwhite:[255,250,240],forestgreen:[34,139,34],fuchsia:[255,0,255],gainsboro:[220,220,220],ghostwhite:[248,248,255],gold:[255,215,0],goldenrod:[218,165,32],gray:[128,128,128],green:[0,128,0],greenyellow:[173,255,47],grey:[128,128,128],honeydew:[240,255,240],hotpink:[255,105,180],indianred:[205,92,92],indigo:[75,0,130],ivory:[255,255,240],khaki:[240,230,140],lavender:[230,230,250],lavenderblush:[255,240,245],lawngreen:[124,252,0],lemonchiffon:[255,250,205],lightblue:[173,216,230],lightcoral:[240,128,128],lightcyan:[224,255,255],lightgoldenrodyellow:[250,250,210],lightgray:[211,211,211],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightsalmon:[255,160,122],lightseagreen:[32,178,170],lightskyblue:[135,206,250],lightslategray:[119,136,153],lightslategrey:[119,136,153],lightsteelblue:[176,196,222],lightyellow:[255,255,224],lime:[0,255,0],limegreen:[50,205,50],linen:[250,240,230],magenta:[255,0,255],maroon:[128,0,0],mediumaquamarine:[102,205,170],mediumblue:[0,0,205],mediumorchid:[186,85,211],mediumpurple:[147,112,219],mediumseagreen:[60,179,113],mediumslateblue:[123,104,238],mediumspringgreen:[0,250,154],mediumturquoise:[72,209,204],mediumvioletred:[199,21,133],midnightblue:[25,25,112],mintcream:[245,255,250],mistyrose:[255,228,225],moccasin:[255,228,181],navajowhite:[255,222,173],navy:[0,0,128],oldlace:[253,245,230],olive:[128,128,0],olivedrab:[107,142,35],orange:[255,165,0],orangered:[255,69,0],orchid:[218,112,214],palegoldenrod:[238,232,170],palegreen:[152,251,152],paleturquoise:[175,238,238],palevioletred:[219,112,147],papayawhip:[255,239,213],peachpuff:[255,218,185],peru:[205,133,63],pink:[255,192,203],plum:[221,160,221],powderblue:[176,224,230],purple:[128,0,128],rebeccapurple:[102,51,153],red:[255,0,0],rosybrown:[188,143,143],royalblue:[65,105,225],saddlebrown:[139,69,19],salmon:[250,128,114],sandybrown:[244,164,96],seagreen:[46,139,87],seashell:[255,245,238],sienna:[160,82,45],silver:[192,192,192],skyblue:[135,206,235],slateblue:[106,90,205],slategray:[112,128,144],slategrey:[112,128,144],snow:[255,250,250],springgreen:[0,255,127],steelblue:[70,130,180],tan:[210,180,140],teal:[0,128,128],thistle:[216,191,216],tomato:[255,99,71],turquoise:[64,224,208],violet:[238,130,238],wheat:[245,222,179],white:[255,255,255],whitesmoke:[245,245,245],yellow:[255,255,0],yellowgreen:[154,205,50]}}}),x=l({"../../../node_modules/color-convert/conversions.js"(e,t){var n=oe(),r={};for(let e of Object.keys(n))r[n[e]]=e;var i={rgb:{channels:3,labels:`rgb`},hsl:{channels:3,labels:`hsl`},hsv:{channels:3,labels:`hsv`},hwb:{channels:3,labels:`hwb`},cmyk:{channels:4,labels:`cmyk`},xyz:{channels:3,labels:`xyz`},lab:{channels:3,labels:`lab`},lch:{channels:3,labels:`lch`},hex:{channels:1,labels:[`hex`]},keyword:{channels:1,labels:[`keyword`]},ansi16:{channels:1,labels:[`ansi16`]},ansi256:{channels:1,labels:[`ansi256`]},hcg:{channels:3,labels:[`h`,`c`,`g`]},apple:{channels:3,labels:[`r16`,`g16`,`b16`]},gray:{channels:1,labels:[`gray`]}};t.exports=i;for(let e of Object.keys(i)){if(!(`channels`in i[e]))throw Error(`missing channels property: `+e);if(!(`labels`in i[e]))throw Error(`missing channel labels property: `+e);if(i[e].labels.length!==i[e].channels)throw Error(`channel and label counts mismatch: `+e);let{channels:t,labels:n}=i[e];delete i[e].channels,delete i[e].labels,Object.defineProperty(i[e],`channels`,{value:t}),Object.defineProperty(i[e],`labels`,{value:n})}i.rgb.hsl=function(e){let t=e[0]/255,n=e[1]/255,r=e[2]/255,i=Math.min(t,n,r),a=Math.max(t,n,r),o=a-i,s,c;a===i?s=0:t===a?s=(n-r)/o:n===a?s=2+(r-t)/o:r===a&&(s=4+(t-n)/o),s=Math.min(s*60,360),s<0&&(s+=360);let l=(i+a)/2;return c=a===i?0:l<=.5?o/(a+i):o/(2-a-i),[s,c*100,l*100]},i.rgb.hsv=function(e){let t,n,r,i,a,o=e[0]/255,s=e[1]/255,c=e[2]/255,l=Math.max(o,s,c),u=l-Math.min(o,s,c),d=function(e){return(l-e)/6/u+1/2};return u===0?(i=0,a=0):(a=u/l,t=d(o),n=d(s),r=d(c),o===l?i=r-n:s===l?i=1/3+t-r:c===l&&(i=2/3+n-t),i<0?i+=1:i>1&&--i),[i*360,a*100,l*100]},i.rgb.hwb=function(e){let t=e[0],n=e[1],r=e[2],a=i.rgb.hsl(e)[0],o=1/255*Math.min(t,Math.min(n,r));return r=1-1/255*Math.max(t,Math.max(n,r)),[a,o*100,r*100]},i.rgb.cmyk=function(e){let t=e[0]/255,n=e[1]/255,r=e[2]/255,i=Math.min(1-t,1-n,1-r),a=(1-t-i)/(1-i)||0,o=(1-n-i)/(1-i)||0,s=(1-r-i)/(1-i)||0;return[a*100,o*100,s*100,i*100]};function a(e,t){return(e[0]-t[0])**2+(e[1]-t[1])**2+(e[2]-t[2])**2}i.rgb.keyword=function(e){let t=r[e];if(t)return t;let i=1/0,o;for(let t of Object.keys(n)){let r=n[t],s=a(e,r);s<i&&(i=s,o=t)}return o},i.keyword.rgb=function(e){return n[e]},i.rgb.xyz=function(e){let t=e[0]/255,n=e[1]/255,r=e[2]/255;t=t>.04045?((t+.055)/1.055)**2.4:t/12.92,n=n>.04045?((n+.055)/1.055)**2.4:n/12.92,r=r>.04045?((r+.055)/1.055)**2.4:r/12.92;let i=t*.4124+n*.3576+r*.1805,a=t*.2126+n*.7152+r*.0722,o=t*.0193+n*.1192+r*.9505;return[i*100,a*100,o*100]},i.rgb.lab=function(e){let t=i.rgb.xyz(e),n=t[0],r=t[1],a=t[2];return n/=95.047,r/=100,a/=108.883,n=n>.008856?n**(1/3):7.787*n+16/116,r=r>.008856?r**(1/3):7.787*r+16/116,a=a>.008856?a**(1/3):7.787*a+16/116,[116*r-16,500*(n-r),200*(r-a)]},i.hsl.rgb=function(e){let t=e[0]/360,n=e[1]/100,r=e[2]/100,i,a,o;if(n===0)return o=r*255,[o,o,o];i=r<.5?r*(1+n):r+n-r*n;let s=2*r-i,c=[0,0,0];for(let e=0;e<3;e++)a=t+1/3*-(e-1),a<0&&a++,a>1&&a--,o=6*a<1?s+(i-s)*6*a:2*a<1?i:3*a<2?s+(i-s)*(2/3-a)*6:s,c[e]=o*255;return c},i.hsl.hsv=function(e){let t=e[0],n=e[1]/100,r=e[2]/100,i=n,a=Math.max(r,.01);r*=2,n*=r<=1?r:2-r,i*=a<=1?a:2-a;let o=(r+n)/2;return[t,(r===0?2*i/(a+i):2*n/(r+n))*100,o*100]},i.hsv.rgb=function(e){let t=e[0]/60,n=e[1]/100,r=e[2]/100,i=Math.floor(t)%6,a=t-Math.floor(t),o=255*r*(1-n),s=255*r*(1-n*a),c=255*r*(1-n*(1-a));switch(r*=255,i){case 0:return[r,c,o];case 1:return[s,r,o];case 2:return[o,r,c];case 3:return[o,s,r];case 4:return[c,o,r];case 5:return[r,o,s]}},i.hsv.hsl=function(e){let t=e[0],n=e[1]/100,r=e[2]/100,i=Math.max(r,.01),a,o;o=(2-n)*r;let s=(2-n)*i;return a=n*i,a/=s<=1?s:2-s,a||=0,o/=2,[t,a*100,o*100]},i.hwb.rgb=function(e){let t=e[0]/360,n=e[1]/100,r=e[2]/100,i=n+r,a;i>1&&(n/=i,r/=i);let o=Math.floor(6*t),s=1-r;a=6*t-o,o&1&&(a=1-a);let c=n+a*(s-n),l,u,d;switch(o){default:case 6:case 0:l=s,u=c,d=n;break;case 1:l=c,u=s,d=n;break;case 2:l=n,u=s,d=c;break;case 3:l=n,u=c,d=s;break;case 4:l=c,u=n,d=s;break;case 5:l=s,u=n,d=c;break}return[l*255,u*255,d*255]},i.cmyk.rgb=function(e){let t=e[0]/100,n=e[1]/100,r=e[2]/100,i=e[3]/100,a=1-Math.min(1,t*(1-i)+i),o=1-Math.min(1,n*(1-i)+i),s=1-Math.min(1,r*(1-i)+i);return[a*255,o*255,s*255]},i.xyz.rgb=function(e){let t=e[0]/100,n=e[1]/100,r=e[2]/100,i,a,o;return i=t*3.2406+n*-1.5372+r*-.4986,a=t*-.9689+n*1.8758+r*.0415,o=t*.0557+n*-.204+r*1.057,i=i>.0031308?1.055*i**(1/2.4)-.055:i*12.92,a=a>.0031308?1.055*a**(1/2.4)-.055:a*12.92,o=o>.0031308?1.055*o**(1/2.4)-.055:o*12.92,i=Math.min(Math.max(0,i),1),a=Math.min(Math.max(0,a),1),o=Math.min(Math.max(0,o),1),[i*255,a*255,o*255]},i.xyz.lab=function(e){let t=e[0],n=e[1],r=e[2];return t/=95.047,n/=100,r/=108.883,t=t>.008856?t**(1/3):7.787*t+16/116,n=n>.008856?n**(1/3):7.787*n+16/116,r=r>.008856?r**(1/3):7.787*r+16/116,[116*n-16,500*(t-n),200*(n-r)]},i.lab.xyz=function(e){let t=e[0],n=e[1],r=e[2],i,a,o;a=(t+16)/116,i=n/500+a,o=a-r/200;let s=a**3,c=i**3,l=o**3;return a=s>.008856?s:(a-16/116)/7.787,i=c>.008856?c:(i-16/116)/7.787,o=l>.008856?l:(o-16/116)/7.787,i*=95.047,a*=100,o*=108.883,[i,a,o]},i.lab.lch=function(e){let t=e[0],n=e[1],r=e[2],i;return i=Math.atan2(r,n)*360/2/Math.PI,i<0&&(i+=360),[t,Math.sqrt(n*n+r*r),i]},i.lch.lab=function(e){let t=e[0],n=e[1],r=e[2]/360*2*Math.PI;return[t,n*Math.cos(r),n*Math.sin(r)]},i.rgb.ansi16=function(e,t=null){let[n,r,a]=e,o=t===null?i.rgb.hsv(e)[2]:t;if(o=Math.round(o/50),o===0)return 30;let s=30+(Math.round(a/255)<<2|Math.round(r/255)<<1|Math.round(n/255));return o===2&&(s+=60),s},i.hsv.ansi16=function(e){return i.rgb.ansi16(i.hsv.rgb(e),e[2])},i.rgb.ansi256=function(e){let t=e[0],n=e[1],r=e[2];return t===n&&n===r?t<8?16:t>248?231:Math.round((t-8)/247*24)+232:16+36*Math.round(t/255*5)+6*Math.round(n/255*5)+Math.round(r/255*5)},i.ansi16.rgb=function(e){let t=e%10;if(t===0||t===7)return e>50&&(t+=3.5),t=t/10.5*255,[t,t,t];let n=(~~(e>50)+1)*.5;return[(t&1)*n*255,(t>>1&1)*n*255,(t>>2&1)*n*255]},i.ansi256.rgb=function(e){if(e>=232){let t=(e-232)*10+8;return[t,t,t]}e-=16;let t;return[Math.floor(e/36)/5*255,Math.floor((t=e%36)/6)/5*255,t%6/5*255]},i.rgb.hex=function(e){let t=(((Math.round(e[0])&255)<<16)+((Math.round(e[1])&255)<<8)+(Math.round(e[2])&255)).toString(16).toUpperCase();return`000000`.substring(t.length)+t},i.hex.rgb=function(e){let t=e.toString(16).match(/[a-f0-9]{6}|[a-f0-9]{3}/i);if(!t)return[0,0,0];let n=t[0];t[0].length===3&&(n=n.split(``).map(e=>e+e).join(``));let r=parseInt(n,16);return[r>>16&255,r>>8&255,r&255]},i.rgb.hcg=function(e){let t=e[0]/255,n=e[1]/255,r=e[2]/255,i=Math.max(Math.max(t,n),r),a=Math.min(Math.min(t,n),r),o=i-a,s,c;return s=o<1?a/(1-o):0,c=o<=0?0:i===t?(n-r)/o%6:i===n?2+(r-t)/o:4+(t-n)/o,c/=6,c%=1,[c*360,o*100,s*100]},i.hsl.hcg=function(e){let t=e[1]/100,n=e[2]/100,r=n<.5?2*t*n:2*t*(1-n),i=0;return r<1&&(i=(n-.5*r)/(1-r)),[e[0],r*100,i*100]},i.hsv.hcg=function(e){let t=e[1]/100,n=e[2]/100,r=t*n,i=0;return r<1&&(i=(n-r)/(1-r)),[e[0],r*100,i*100]},i.hcg.rgb=function(e){let t=e[0]/360,n=e[1]/100,r=e[2]/100;if(n===0)return[r*255,r*255,r*255];let i=[0,0,0],a=t%1*6,o=a%1,s=1-o,c=0;switch(Math.floor(a)){case 0:i[0]=1,i[1]=o,i[2]=0;break;case 1:i[0]=s,i[1]=1,i[2]=0;break;case 2:i[0]=0,i[1]=1,i[2]=o;break;case 3:i[0]=0,i[1]=s,i[2]=1;break;case 4:i[0]=o,i[1]=0,i[2]=1;break;default:i[0]=1,i[1]=0,i[2]=s}return c=(1-n)*r,[(n*i[0]+c)*255,(n*i[1]+c)*255,(n*i[2]+c)*255]},i.hcg.hsv=function(e){let t=e[1]/100,n=t+e[2]/100*(1-t),r=0;return n>0&&(r=t/n),[e[0],r*100,n*100]},i.hcg.hsl=function(e){let t=e[1]/100,n=e[2]/100*(1-t)+.5*t,r=0;return n>0&&n<.5?r=t/(2*n):n>=.5&&n<1&&(r=t/(2*(1-n))),[e[0],r*100,n*100]},i.hcg.hwb=function(e){let t=e[1]/100,n=t+e[2]/100*(1-t);return[e[0],(n-t)*100,(1-n)*100]},i.hwb.hcg=function(e){let t=e[1]/100,n=1-e[2]/100,r=n-t,i=0;return r<1&&(i=(n-r)/(1-r)),[e[0],r*100,i*100]},i.apple.rgb=function(e){return[e[0]/65535*255,e[1]/65535*255,e[2]/65535*255]},i.rgb.apple=function(e){return[e[0]/255*65535,e[1]/255*65535,e[2]/255*65535]},i.gray.rgb=function(e){return[e[0]/100*255,e[0]/100*255,e[0]/100*255]},i.gray.hsl=function(e){return[0,0,e[0]]},i.gray.hsv=i.gray.hsl,i.gray.hwb=function(e){return[0,100,e[0]]},i.gray.cmyk=function(e){return[0,0,0,e[0]]},i.gray.lab=function(e){return[e[0],0,0]},i.gray.hex=function(e){let t=Math.round(e[0]/100*255)&255,n=((t<<16)+(t<<8)+t).toString(16).toUpperCase();return`000000`.substring(n.length)+n},i.rgb.gray=function(e){return[(e[0]+e[1]+e[2])/3/255*100]}}}),se=l({"../../../node_modules/color-convert/route.js"(e,t){var n=x();function r(){let e={},t=Object.keys(n);for(let n=t.length,r=0;r<n;r++)e[t[r]]={distance:-1,parent:null};return e}function i(e){let t=r(),i=[e];for(t[e].distance=0;i.length;){let e=i.pop(),r=Object.keys(n[e]);for(let n=r.length,a=0;a<n;a++){let n=r[a],o=t[n];o.distance===-1&&(o.distance=t[e].distance+1,o.parent=e,i.unshift(n))}}return t}function a(e,t){return function(n){return t(e(n))}}function o(e,t){let r=[t[e].parent,e],i=n[t[e].parent][e],o=t[e].parent;for(;t[o].parent;)r.unshift(t[o].parent),i=a(n[t[o].parent][o],i),o=t[o].parent;return i.conversion=r,i}t.exports=function(e){let t=i(e),n={},r=Object.keys(t);for(let e=r.length,i=0;i<e;i++){let e=r[i];t[e].parent!==null&&(n[e]=o(e,t))}return n}}}),S=m(l({"../../../node_modules/color-convert/index.js"(e,t){var n=x(),r=se(),i={},a=Object.keys(n);function o(e){let t=function(...t){let n=t[0];return n==null?n:(n.length>1&&(t=n),e(t))};return`conversion`in e&&(t.conversion=e.conversion),t}function s(e){let t=function(...t){let n=t[0];if(n==null)return n;n.length>1&&(t=n);let r=e(t);if(typeof r==`object`)for(let e=r.length,t=0;t<e;t++)r[t]=Math.round(r[t]);return r};return`conversion`in e&&(t.conversion=e.conversion),t}a.forEach(e=>{i[e]={},Object.defineProperty(i[e],`channels`,{value:n[e].channels}),Object.defineProperty(i[e],`labels`,{value:n[e].labels});let t=r(e);Object.keys(t).forEach(n=>{let r=t[n];i[e][n]=s(r),i[e][n].raw=o(r)})}),t.exports=i}})(),1),C=Symbol(`partial.placeholder`),ne.placeholder=C,w=Symbol(`partialRight.placeholder`),re.placeholder=w,T=function(e,t,n){return t===void 0&&(t=0),n===void 0&&(n=1),e>n?n:e<t?t:e},E=function(e){return`touches`in e},D=function(e){return e&&e.ownerDocument.defaultView||self},ce=function(e,t,n){var r=e.getBoundingClientRect(),i=E(t)?(function(e,t){for(var n=0;n<e.length;n++)if(e[n].identifier===t)return e[n];return e[0]})(t.touches,n):t;return{left:T((i.pageX-(r.left+D(e).pageXOffset))/r.width),top:T((i.pageY-(r.top+D(e).pageYOffset))/r.height)}},le=function(e){!E(e)&&e.preventDefault()},O=b.memo(function(e){var t=e.onMove,n=e.onKey,r=_(e,[`onMove`,`onKey`]),i=(0,b.useRef)(null),a=v(t),o=v(n),s=(0,b.useRef)(null),c=(0,b.useRef)(!1),l=(0,b.useMemo)(function(){var e=function(e){le(e),(E(e)?e.touches.length>0:e.buttons>0)&&i.current?a(ce(i.current,e,s.current)):n(!1)},t=function(){return n(!1)};function n(n){var r=c.current,a=D(i.current),o=n?a.addEventListener:a.removeEventListener;o(r?`touchmove`:`mousemove`,e),o(r?`touchend`:`mouseup`,t)}return[function(e){var t=e.nativeEvent,r=i.current;if(r&&(le(t),!(function(e,t){return t&&!E(e)})(t,c.current)&&r)){if(E(t)){c.current=!0;var o=t.changedTouches||[];o.length&&(s.current=o[0].identifier)}r.focus(),a(ce(r,t,s.current)),n(!0)}},function(e){var t=e.which||e.keyCode;t<37||t>40||(e.preventDefault(),o({left:t===39?.05:t===37?-.05:0,top:t===40?.05:t===38?-.05:0}))},n]},[o,a]),u=l[0],d=l[1],f=l[2];return(0,b.useEffect)(function(){return f},[f]),b.createElement(`div`,g({},r,{onTouchStart:u,onMouseDown:u,className:`react-colorful__interactive`,ref:i,onKeyDown:d,tabIndex:0,role:`slider`}))}),k=function(e){return e.filter(Boolean).join(` `)},A=function(e){var t=e.color,n=e.left,r=e.top,i=r===void 0?.5:r,a=k([`react-colorful__pointer`,e.className]);return b.createElement(`div`,{className:a,style:{top:100*i+`%`,left:100*n+`%`}},b.createElement(`div`,{className:`react-colorful__pointer-fill`,style:{backgroundColor:t}}))},j=function(e,t,n){return t===void 0&&(t=0),n===void 0&&(n=10**t),Math.round(n*e)/n},ue={grad:.9,turn:360,rad:360/(2*Math.PI)},de=function(e){return R(M(e))},M=function(e){return e[0]===`#`&&(e=e.substring(1)),e.length<6?{r:parseInt(e[0]+e[0],16),g:parseInt(e[1]+e[1],16),b:parseInt(e[2]+e[2],16),a:e.length===4?j(parseInt(e[3]+e[3],16)/255,2):1}:{r:parseInt(e.substring(0,2),16),g:parseInt(e.substring(2,4),16),b:parseInt(e.substring(4,6),16),a:e.length===8?j(parseInt(e.substring(6,8),16)/255,2):1}},fe=function(e,t){return t===void 0&&(t=`deg`),Number(e)*(ue[t]||1)},pe=function(e){var t=/hsla?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e);return t?me({h:fe(t[1],t[2]),s:Number(t[3]),l:Number(t[4]),a:t[5]===void 0?1:Number(t[5])/(t[6]?100:1)}):{h:0,s:0,v:0,a:1}},me=function(e){var t=e.s,n=e.l;return{h:e.h,s:(t*=(n<50?n:100-n)/100)>0?2*t/(n+t)*100:0,v:n+t,a:e.a}},he=function(e){return _e(I(e))},N=function(e){var t=e.s,n=e.v,r=e.a,i=(200-t)*n/100;return{h:j(e.h),s:j(i>0&&i<200?t*n/100/(i<=100?i:200-i)*100:0),l:j(i/2),a:j(r,2)}},P=function(e){var t=N(e);return`hsl(`+t.h+`, `+t.s+`%, `+t.l+`%)`},F=function(e){var t=N(e);return`hsla(`+t.h+`, `+t.s+`%, `+t.l+`%, `+t.a+`)`},I=function(e){var t=e.h,n=e.s,r=e.v,i=e.a;t=t/360*6,n/=100,r/=100;var a=Math.floor(t),o=r*(1-n),s=r*(1-(t-a)*n),c=r*(1-(1-t+a)*n),l=a%6;return{r:j(255*[r,s,o,o,c,r][l]),g:j(255*[c,r,r,s,o,o][l]),b:j(255*[o,o,c,r,r,s][l]),a:j(i,2)}},ge=function(e){var t=/rgba?\(?\s*(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e);return t?R({r:Number(t[1])/(t[2]?100/255:1),g:Number(t[3])/(t[4]?100/255:1),b:Number(t[5])/(t[6]?100/255:1),a:t[7]===void 0?1:Number(t[7])/(t[8]?100:1)}):{h:0,s:0,v:0,a:1}},L=function(e){var t=e.toString(16);return t.length<2?`0`+t:t},_e=function(e){var t=e.r,n=e.g,r=e.b,i=e.a,a=i<1?L(j(255*i)):``;return`#`+L(t)+L(n)+L(r)+a},R=function(e){var t=e.r,n=e.g,r=e.b,i=e.a,a=Math.max(t,n,r),o=a-Math.min(t,n,r),s=o?a===t?(n-r)/o:a===n?2+(r-t)/o:4+(t-n)/o:0;return{h:j(60*(s<0?s+6:s)),s:j(a?o/a*100:0),v:j(a/255*100),a:i}},z=b.memo(function(e){var t=e.hue,n=e.onChange,r=k([`react-colorful__hue`,e.className]);return b.createElement(`div`,{className:r},b.createElement(O,{onMove:function(e){n({h:360*e.left})},onKey:function(e){n({h:T(t+360*e.left,0,360)})},"aria-label":`Hue`,"aria-valuenow":j(t),"aria-valuemax":`360`,"aria-valuemin":`0`},b.createElement(A,{className:`react-colorful__hue-pointer`,left:t/360,color:P({h:t,s:100,v:100,a:1})})))}),B=b.memo(function(e){var t=e.hsva,n=e.onChange,r={backgroundColor:P({h:t.h,s:100,v:100,a:1})};return b.createElement(`div`,{className:`react-colorful__saturation`,style:r},b.createElement(O,{onMove:function(e){n({s:100*e.left,v:100-100*e.top})},onKey:function(e){n({s:T(t.s+100*e.left,0,100),v:T(t.v-100*e.top,0,100)})},"aria-label":`Color`,"aria-valuetext":`Saturation `+j(t.s)+`%, Brightness `+j(t.v)+`%`},b.createElement(A,{className:`react-colorful__saturation-pointer`,top:1-t.v/100,left:t.s/100,color:P(t)})))}),V=function(e,t){if(e===t)return!0;for(var n in e)if(e[n]!==t[n])return!1;return!0},H=function(e,t){return e.replace(/\s/g,``)===t.replace(/\s/g,``)},ve=function(e,t){return e.toLowerCase()===t.toLowerCase()||V(M(e),M(t))},be=typeof window<`u`?b.useLayoutEffect:b.useEffect,xe=function(){return ye||(typeof __webpack_nonce__<`u`?__webpack_nonce__:void 0)},U=new Map,W=function(e){be(function(){var t=e.current?e.current.ownerDocument:document;if(t!==void 0&&!U.has(t)){var n=t.createElement(`style`);n.innerHTML=`.react-colorful{position:relative;display:flex;flex-direction:column;width:200px;height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.react-colorful__saturation{position:relative;flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.react-colorful__alpha-gradient,.react-colorful__pointer-fill{content:"";position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;border-radius:inherit}.react-colorful__alpha-gradient,.react-colorful__saturation{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.react-colorful__alpha,.react-colorful__hue{position:relative;height:24px}.react-colorful__hue{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.react-colorful__last-control{border-radius:0 0 8px 8px}.react-colorful__interactive{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;outline:none;touch-action:none}.react-colorful__pointer{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}.react-colorful__interactive:focus .react-colorful__pointer{transform:translate(-50%,-50%) scale(1.1)}.react-colorful__alpha,.react-colorful__alpha-pointer{background-color:#fff;background-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>')}.react-colorful__saturation-pointer{z-index:3}.react-colorful__hue-pointer{z-index:2}`,U.set(t,n);var r=xe();r&&n.setAttribute(`nonce`,r),t.head.appendChild(n)}},[])},Se=function(e){var t=e.className,n=e.colorModel,r=e.color,i=r===void 0?n.defaultColor:r,a=e.onChange,o=_(e,[`className`,`colorModel`,`color`,`onChange`]),s=(0,b.useRef)(null);W(s);var c=ae(n,i,a),l=c[0],u=c[1],d=k([`react-colorful`,t]);return b.createElement(`div`,g({},o,{ref:s,className:d}),b.createElement(B,{hsva:l,onChange:u}),b.createElement(z,{hue:l.h,onChange:u,className:`react-colorful__last-control`}))},Ce={defaultColor:`000`,toHsva:de,fromHsva:function(e){return he({h:e.h,s:e.s,v:e.v,a:1})},equal:ve},we=function(e){return b.createElement(Se,g({},e,{colorModel:Ce}))},Te=function(e){var t=e.className,n=e.hsva,r=e.onChange,i={backgroundImage:`linear-gradient(90deg, `+F(Object.assign({},n,{a:0}))+`, `+F(Object.assign({},n,{a:1}))+`)`},a=k([`react-colorful__alpha`,t]),o=j(100*n.a);return b.createElement(`div`,{className:a},b.createElement(`div`,{className:`react-colorful__alpha-gradient`,style:i}),b.createElement(O,{onMove:function(e){r({a:e.left})},onKey:function(e){r({a:T(n.a+e.left)})},"aria-label":`Alpha`,"aria-valuetext":o+`%`,"aria-valuenow":o,"aria-valuemin":`0`,"aria-valuemax":`100`},b.createElement(A,{className:`react-colorful__alpha-pointer`,left:n.a,color:F(n)})))},G=function(e){var t=e.className,n=e.colorModel,r=e.color,i=r===void 0?n.defaultColor:r,a=e.onChange,o=_(e,[`className`,`colorModel`,`color`,`onChange`]),s=(0,b.useRef)(null);W(s);var c=ae(n,i,a),l=c[0],u=c[1],d=k([`react-colorful`,t]);return b.createElement(`div`,g({},o,{ref:s,className:d}),b.createElement(B,{hsva:l,onChange:u}),b.createElement(z,{hue:l.h,onChange:u}),b.createElement(Te,{hsva:l,onChange:u,className:`react-colorful__last-control`}))},Ee={defaultColor:`hsla(0, 0%, 0%, 1)`,toHsva:pe,fromHsva:F,equal:H},De=function(e){return b.createElement(G,g({},e,{colorModel:Ee}))},Oe={defaultColor:`rgba(0, 0, 0, 1)`,toHsva:ge,fromHsva:function(e){var t=I(e);return`rgba(`+t.r+`, `+t.g+`, `+t.b+`, `+t.a+`)`},equal:H},ke=function(e){return b.createElement(G,g({},e,{colorModel:Oe}))},Ae=c.div({position:`relative`,maxWidth:250}),je=c.div({width:200,margin:5,".react-colorful__saturation":{borderRadius:`4px 4px 0 0`},".react-colorful__hue":{boxShadow:`inset 0 0 0 1px rgb(0 0 0 / 5%)`},".react-colorful__last-control":{borderRadius:`0 0 4px 4px`}}),Me=c.div({display:`grid`,gridTemplateColumns:`repeat(9, 16px)`,gap:6,padding:3,marginTop:5,width:200}),Ne=e=>`url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity="0.05" fill="${e?`white`:`black`}"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>')`,K=c(n)(({value:e,selected:t,theme:n})=>({width:16,height:16,boxShadow:t?`${n.appBorderColor} 0 0 0 1px inset, ${n.textMutedColor}50 0 0 0 4px`:`${n.appBorderColor} 0 0 0 1px inset`,border:`none`,borderRadius:n.appBorderRadius,"&, &:hover":{background:`unset`,backgroundColor:`unset`,backgroundImage:`linear-gradient(${e}, ${e}), ${Ne(n.base===`dark`)}`}})),Pe=c(r.Input)(({theme:e})=>({width:`100%`,paddingLeft:30,paddingRight:30,boxSizing:`border-box`,fontFamily:e.typography.fonts.base,'[aria-readonly="true"] > &':{background:e.base===`light`?e.color.lighter:`transparent`}})),Fe=c(K)(({disabled:e})=>({position:`absolute`,top:4,left:4,zIndex:1,cursor:e?`not-allowed`:`pointer`})),Ie=c(n)(({theme:e})=>({position:`absolute`,zIndex:1,top:6,right:7,width:20,height:20,padding:4,boxSizing:`border-box`,cursor:`pointer`,color:e.input.color})),q=(e=>(e.RGB=`rgb`,e.HSL=`hsl`,e.HEX=`hex`,e))(q||{}),J=Object.values(q),Le=/\(([0-9]+),\s*([0-9]+)%?,\s*([0-9]+)%?,?\s*([0-9.]+)?\)/,Re=/^\s*rgba?\(([0-9]+),\s*([0-9]+),\s*([0-9]+),?\s*([0-9.]+)?\)\s*$/i,ze=/^\s*hsla?\(([0-9]+),\s*([0-9]+)%,\s*([0-9]+)%,?\s*([0-9.]+)?\)\s*$/i,Y=/^\s*#?([0-9a-f]{3}|[0-9a-f]{6})\s*$/i,Be=/^\s*#?([0-9a-f]{3})\s*$/i,Ve={hex:we,rgb:ke,hsl:De},X={hex:`transparent`,rgb:`rgba(0, 0, 0, 0)`,hsl:`hsla(0, 0%, 0%, 0)`},Z=e=>{let t=e?.match(Le);if(!t)return[0,0,0,1];let[,n,r,i,a=1]=t;return[n,r,i,a].map(Number)},He=e=>{let[t,n,r,i]=Z(e),[a,o,s]=S.default.rgb.hsl([t,n,r])||[0,0,0];return{valid:!0,value:e,keyword:S.default.rgb.keyword([t,n,r]),colorSpace:`rgb`,rgb:e,hsl:`hsla(${a}, ${o}%, ${s}%, ${i})`,hex:`#${S.default.rgb.hex([t,n,r]).toLowerCase()}`}},Ue=e=>{let[t,n,r,i]=Z(e),[a,o,s]=S.default.hsl.rgb([t,n,r])||[0,0,0];return{valid:!0,value:e,keyword:S.default.hsl.keyword([t,n,r]),colorSpace:`hsl`,rgb:`rgba(${a}, ${o}, ${s}, ${i})`,hsl:e,hex:`#${S.default.hsl.hex([t,n,r]).toLowerCase()}`}},We=e=>{let t=e.replace(`#`,``),n=S.default.keyword.rgb(t)||S.default.hex.rgb(t),r=S.default.rgb.hsl(n),i=e;/[^#a-f0-9]/i.test(e)?i=t:Y.test(e)&&(i=`#${t}`);let a=!0;if(i.startsWith(`#`))a=Y.test(i);else try{S.default.keyword.hex(i)}catch{a=!1}return{valid:a,value:i,keyword:S.default.rgb.keyword(n),colorSpace:`hex`,rgb:`rgba(${n[0]}, ${n[1]}, ${n[2]}, 1)`,hsl:`hsla(${r[0]}, ${r[1]}%, ${r[2]}%, 1)`,hex:i}},Q=e=>{if(e)return Re.test(e)?He(e):ze.test(e)?Ue(e):We(e)},Ge=(e,t,n)=>{if(!e||!t?.valid)return X[n];if(n!==`hex`)return t?.[n]||X[n];if(!t.hex.startsWith(`#`))try{return`#${S.default.keyword.hex(t.hex)}`}catch{return X.hex}let r=t.hex.match(Be);if(!r)return Y.test(t.hex)?t.hex:X.hex;let[i,a,o]=r[1].split(``);return`#${i}${i}${a}${a}${o}${o}`},Ke=(e,t)=>{let[n,r]=(0,y.useState)(e||``),[i,a]=(0,y.useState)(()=>Q(n)),[o,s]=(0,y.useState)(i?.colorSpace||`hex`);return(0,y.useEffect)(()=>{let t=e||``,n=Q(t);r(t),a(n),s(n?.colorSpace||`hex`)},[e]),{value:n,realValue:(0,y.useMemo)(()=>Ge(n,i,o).toLowerCase(),[n,i,o]),updateValue:(0,y.useCallback)(e=>{let n=Q(e),i=n?.value||e||``;r(i),i===``&&(a(void 0),t(void 0)),n&&(a(n),s(n.colorSpace),t(n.value))},[t]),color:i,colorSpace:o,cycleColorSpace:(0,y.useCallback)(()=>{let e=J[(J.indexOf(o)+1)%J.length];s(e);let n=i?.[e]||``;r(n),t(n)},[i,o,t])}},$=e=>e.replace(/\s*/,``).toLowerCase(),qe=(e,t,n)=>{let[r,i]=(0,y.useState)(t?.valid?[t]:[]);(0,y.useEffect)(()=>{t===void 0&&i([])},[t]);let a=(0,y.useMemo)(()=>(e||[]).map(e=>typeof e==`string`?Q(e):e.title?{...Q(e.color),keyword:e.title}:Q(e.color)).concat(r).filter(Boolean).slice(-27),[e,r]);return{presets:a,addPreset:(0,y.useCallback)(e=>{e?.valid&&(a.some(t=>t&&t[n]&&$(t[n]||``)===$(e[n]||``))||i(t=>t.concat(e)))},[n,a])}},Je=({name:e,value:t,onChange:n,onFocus:r,onBlur:a,presetColors:o,startOpen:s=!1,argType:c})=>{let{value:l,realValue:u,updateValue:d,color:p,colorSpace:m,cycleColorSpace:ne}=Ke(t,(0,y.useCallback)(te(n,200),[n])),{presets:h,addPreset:re}=qe(o??[],p,m),ie=Ve[m],g=!!c?.table?.readonly,_=f(e);return y.createElement(Ae,null,y.createElement(`label`,{htmlFor:_,className:`sb-sr-only`},e),y.createElement(Pe,{id:_,value:l,onChange:e=>d(e.target.value),onFocus:e=>e.target.select(),readOnly:g,placeholder:`Choose color...`}),y.createElement(i,{defaultVisible:s,visible:g?!1:void 0,onVisibleChange:()=>p&&re(p),popover:y.createElement(je,null,y.createElement(ie,{color:u===`transparent`?`#000000`:u,onChange:d,onFocus:r,onBlur:a}),h.length>0&&y.createElement(Me,null,h.map((e,t)=>y.createElement(K,{key:`${e?.value||t}-${t}`,variant:`ghost`,padding:`small`,size:`small`,ariaLabel:`Pick this color`,tooltip:e?.keyword||e?.value||``,value:e?.value||``,selected:!!(p&&e&&e[m]&&$(e[m]||``)===$(p[m])),onClick:()=>e&&d(e.value||``)}))))},y.createElement(Fe,{variant:`ghost`,padding:`small`,size:`small`,ariaLabel:`Open color picker`,value:u,style:{margin:4},disabled:g})),l?y.createElement(Ie,{variant:`ghost`,padding:`small`,size:`small`,ariaLabel:`Cycle through color spaces`,disabled:g,onClick:g?void 0:ne},y.createElement(ee,null)):null)},Ye=Je}))();export{Je as ColorControl,Ye as default};
|
package/dist/assets/{ComposingDialogs.stories-Bwtla9z9.js → ComposingDialogs.stories-BtoJMTfu.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{t as i}from"./Button
|
|
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{t as i}from"./Button-_0pS2khJ.js";import{t as a}from"./AlertDialog-D7FoU9Mo.js";import{r as o}from"./AlertBannerAction-BYa4kXiw.js";import{t as s}from"./Dialog-DJ_22m-M.js";var c,l,u,d,f,p,m,h,g;t((()=>{c=e(n(),1),o(),l=r(),{userEvent:u,expect:d,within:f,waitFor:p}=__STORYBOOK_MODULE_TEST__,m={title:`Guides/Composing Dialogs`,parameters:{preventIframeFromScrollingParent:!0,layout:`fullscreen`,docs:{story:{inline:!1,height:400},description:{component:`Dialogs are interactable in the same exact order they are shown, regardless of which are
|
|
2
2
|
dismissable or not.`}}}},h={render:function(){let[e,t]=(0,c.useState)(!1),[n,r]=(0,c.useState)(!1),[o,u]=(0,c.useState)(!1),[d,f]=(0,c.useState)(!1);return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(i,{onClick:()=>{t(!0),setTimeout(()=>r(!0),100),setTimeout(()=>u(!0),200),setTimeout(()=>f(!0),300)},children:`Open the nested dialogs`}),(0,l.jsx)(s,{open:e,onClose:()=>t(!1),title:`Dialog 1`,description:void 0,leadingElement:void 0,dataset:{testid:`dialog-1`},children:`Lorem ipsum`}),(0,l.jsxs)(a,{open:n,title:`Dialog 2`,description:void 0,dataset:{testid:`dialog-2`},children:[`Lorem ipsum`,(0,l.jsx)(a.Cancel,{variant:`tertiary`,onClick:()=>r(!1),children:`Close dialog 2`})]}),(0,l.jsx)(s,{open:o,onClose:()=>u(!1),title:`Dialog 3`,description:void 0,leadingElement:void 0,dataset:{testid:`dialog-3`},children:`Lorem ipsum`}),(0,l.jsxs)(a,{open:d,title:`Dialog 4`,description:void 0,dataset:{testid:`dialog-4`},children:[`Lorem ipsum`,(0,l.jsx)(a.Cancel,{variant:`tertiary`,onClick:()=>f(!1),children:`Close dialog 4`})]})]})},async play({canvasElement:e,step:t}){let n=f(e);await t(`Show the dialogs`,async()=>{let e=n.getByRole(`button`,{name:/Open the nested dialogs/});await u.click(e)}),await t(`Wait for all the dialogs to be rendered`,async()=>{d(await n.findByText(`Dialog 1`)).toBeInTheDocument(),d(await n.findByText(`Dialog 2`)).toBeInTheDocument(),d(await n.findByText(`Dialog 3`)).toBeInTheDocument(),d(await n.findByText(`Dialog 4`)).toBeInTheDocument()}),await t(`Close dialog 4`,async()=>{let e=n.getByRole(`button`,{name:/Close dialog 4/});await u.click(e),await p(async()=>{await d(await n.queryByText(/Dialog 4/i)).not.toBeInTheDocument()})}),await t(`Close dialog 3`,async()=>{let e=n.getByTestId(`dialog-3`).querySelector(`button`);if(!e)throw Error(`Dialog 3 close button not found`);await u.click(e),await p(async()=>{await d(await n.queryByText(/Dialog 3/i)).not.toBeInTheDocument()})}),await t(`Close dialog 2`,async()=>{let e=n.getByRole(`button`,{name:/Close dialog 2/});await u.click(e),await p(async()=>{await d(await n.queryByText(/Dialog 2/i)).not.toBeInTheDocument()})}),await t(`Close dialog 1`,async()=>{let e=n.getByTestId(`dialog-1`).querySelector(`button`);if(!e)throw Error(`Dialog 1 close button not found`);await u.click(e),await p(async()=>{await d(await n.queryByText(/Dialog 1/i)).not.toBeInTheDocument()})}),await t(`Show the dialogs`,async()=>{let e=n.getByRole(`button`,{name:/Open the nested dialogs/});await u.click(e)})}},h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{
|
|
3
3
|
render: function Story() {
|
|
4
4
|
const [openDialog1, setOpenDialog1] = useState(false);
|
package/dist/assets/{ComposingPopovers.stories-BdgYJQKE.js → ComposingPopovers.stories-CBbifa2e.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{t as i}from"./Button
|
|
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{t as i}from"./Button-_0pS2khJ.js";import{n as a}from"./OnboardingTooltip-ANaVB8Qh.js";import{r as o}from"./AlertBannerAction-BYa4kXiw.js";import{t as s}from"./IconButton-sZZtNos_.js";import{i as c,t as l}from"./DropdownMenu-L_qQlJsT.js";import{t as u}from"./Tooltip-CX8T37NP.js";import{n as d,t as f}from"./TokyoUIFav-B1g1wYYK.js";var p,m,h,g,_,v,y,b,x,S,C,w,T,E,D,O,k,A,j;t((()=>{p=e(n(),1),o(),d(),m=r(),{expect:h,waitFor:g,userEvent:_,within:v,fireEvent:y,waitForElementToBeRemoved:b}=__STORYBOOK_MODULE_TEST__,x={tooltip:e=>(0,m.jsx)(u,{content:`This is a tooltip`,dataset:{testid:`tooltip`},children:e}),onboardingTooltip:e=>(0,m.jsx)(a,{title:`New Feature Available!`,text:`We've added an exciting new feature to enhance your experience.`,children:e}),dropdownMenu:e=>(0,m.jsx)(l,{trigger:e,children:(0,m.jsx)(c,{label:`Dropdown Menu Item`})})},S={tooltip:async({canvas:e,step:t})=>{let n=await e.findByRole(`button`,{name:`Trigger button`});await t(`focus on the icon button`,async()=>{n.focus(),await g(async()=>{await h(await e.findByTestId(`tooltip`)).toBeVisible()})}),await t(`unfocus the icon button`,async()=>{await _.tab(),await g(async()=>{await h(await e.findByTestId(`tooltip`)).not.toBeInTheDocument()})}),await t(`hover the icon button`,async()=>{await _.hover(n),await g(async()=>{await h(await e.findByTestId(`tooltip`)).toBeVisible()})}),await t(`unhover the icon button`,async()=>{await _.unhover(n),y.pointerMove(document,{clientX:0,clientY:0}),await b(()=>e.queryByTestId(`tooltip`))})},onboardingTooltip:async({canvas:e,step:t})=>{let n=await e.findByRole(`dialog`,{name:`New Feature Available!`});await t(`wait for onboarding tooltip to be visible`,async()=>{await g(async()=>{await h(n).toBeVisible()})}),await t(`click on onboarding tooltip action`,async()=>{await _.click(v(n).getByRole(`button`,{name:`Got it`}))})},dropdownMenu:async({canvas:e,step:t})=>{let n=await e.findByRole(`button`,{name:`Trigger button`});await t(`open dropdown menu `,async()=>{await _.click(n),await g(async()=>{await h(await e.findByRole(`menu`)).toBeVisible()})}),await t(`close dropdown menu`,async()=>{await _.keyboard(`{Escape}`),await g(async()=>{await h(await e.queryByRole(`menu`)).not.toBeInTheDocument()})})}},C=(0,m.jsx)(s,{svg:(0,m.jsx)(f,{}),assistiveText:`Trigger button`}),w={title:`Guides/Composing Popovers`,render:({popovers:e})=>e.reduceRight((e,t)=>t(e),C),argTypes:{popovers:{table:{disable:!0},control:!1}},parameters:{preventIframeFromScrollingParent:!0,layout:`fullscreen`,docs:{story:{inline:!1,height:400},source:{type:`dynamic`},argTypes:{include:[]},description:{component:`In some cases, you might want to use multiple popover-like
|
|
2
2
|
components together with the same target element.
|
|
3
3
|
|
|
4
4
|
You can do this by wrapping the target element with both components either way.`}},chromatic:{disableSnapshot:!0}},decorators:[e=>{let[t,n]=(0,p.useState)(0);return(0,m.jsxs)(m.Fragment,{children:[(0,m.jsx)(`div`,{style:{height:`90vh`,padding:16,position:`relative`,display:`flex`,alignItems:`center`,justifyContent:`center`},children:(0,m.jsx)(e,{},t)}),(0,m.jsx)(`div`,{style:{position:`fixed`,left:0,bottom:0,margin:8},children:(0,m.jsx)(i,{variant:`ghost`,size:`small`,onClick:()=>n(t+1),children:`Reset story`})})]})}],async afterEach({canvas:e}){await _.click(await e.findByRole(`button`,{name:`Reset story`}))}},T={name:`Tooltip with OnboardingTooltip`,args:{popovers:[x.tooltip,x.onboardingTooltip]},async play(e){await S.onboardingTooltip(e),await S.tooltip(e)}},E={name:`OnboardingTooltip with Tooltip`,args:{popovers:[x.onboardingTooltip,x.tooltip]},play:T.play},D={name:`DropdownMenu with Tooltip`,args:{popovers:[x.dropdownMenu,x.tooltip]},async play(e){await S.tooltip(e),await S.dropdownMenu(e)}},O={name:`Tooltip with DropdownMenu`,args:{popovers:[x.tooltip,x.dropdownMenu]},play:D.play},k={name:`DropdownMenu with OnboardingTooltip`,args:{popovers:[x.dropdownMenu,x.onboardingTooltip]},async play(e){await S.onboardingTooltip(e),await S.dropdownMenu(e)}},A={name:`OnboardingTooltip with DropdownMenu`,args:{popovers:[x.onboardingTooltip,x.dropdownMenu]},play:k.play},T.parameters={...T.parameters,docs:{...T.parameters?.docs,source:{originalSource:`{
|
|
@@ -0,0 +1,3 @@
|
|
|
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,t as a,w as o,z as s}from"./dist-DtfJeYQK.js";import{t as c}from"./jsx-runtime-C2wGStra.js";import{n as l,t as u}from"./dist-Cc1j9Pjk.js";var d,f,p=t((()=>{d=`flag__UxXhl`,f={flag:d}})),m,h,g,_,v=t((()=>{m=e(n(),1),o(),a(),u(),p(),h=c(),g=`data:image/svg+xml;base64,PHN2ZyBkYXRhLXByZXBseS1kcy1jb21wb25lbnQ9IlN2Z0NvdW50cnlGbGFnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNDgwIi8+`,_=(0,m.forwardRef)(function({alt:e,dataset:t,size:n=`small`,simplified:a=!0,code:o,...c},u){let d=n===`large`?32:n===`medium`?24:16,p=d*3/4,m={alt:e,src:typeof o!=`string`||!r[o]?g:s({countryCode:o,simplified:a,requester:`WebCountryFlag`}),width:d,height:p,className:f.flag};return(0,h.jsx)(`img`,{...c,ref:u,...m,...i(t,{preplyDsComponent:l.CountryFlag})})});try{_.displayName=`CountryFlag`,_.__docgenInfo={description:"Renders an `img` element with the country flag. Passes down all the other props to the `img` element.",displayName:`CountryFlag`,props:{code:{defaultValue:null,description:``,name:`code`,required:!0,type:{name:`enum`,value:[{value:`"id"`},{value:`"at"`},{value:`"is"`},{value:`"af"`},{value:`"ax"`},{value:`"al"`},{value:`"dz"`},{value:`"as"`},{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:`"br"`},{value:`"io"`},{value:`"bn"`},{value:`"bg"`},{value:`"bf"`},{value:`"bi"`},{value:`"cv"`},{value:`"kh"`},{value:`"cm"`},{value:`"ca"`},{value:`"ic"`},{value:`"es-ct"`},{value:`"ky"`},{value:`"cf"`},{value:`"cefta"`},{value:`"td"`},{value:`"cl"`},{value:`"cn"`},{value:`"cx"`},{value:`"cp"`},{value:`"cc"`},{value:`"co"`},{value:`"km"`},{value:`"ck"`},{value:`"cr"`},{value:`"hr"`},{value:`"cu"`},{value:`"cw"`},{value:`"cy"`},{value:`"cz"`},{value:`"ci"`},{value:`"cd"`},{value:`"dk"`},{value:`"dg"`},{value:`"dj"`},{value:`"dm"`},{value:`"do"`},{value:`"eac"`},{value:`"ec"`},{value:`"eg"`},{value:`"sv"`},{value:`"gb-eng"`},{value:`"gq"`},{value:`"er"`},{value:`"ee"`},{value:`"sz"`},{value:`"et"`},{value:`"eu"`},{value:`"fk"`},{value:`"fo"`},{value:`"fm"`},{value:`"fj"`},{value:`"fi"`},{value:`"fr"`},{value:`"gf"`},{value:`"pf"`},{value:`"tf"`},{value:`"ga"`},{value:`"es-ga"`},{value:`"gm"`},{value:`"ge"`},{value:`"de"`},{value:`"gh"`},{value:`"gi"`},{value:`"gr"`},{value:`"gl"`},{value:`"gd"`},{value:`"gp"`},{value:`"gu"`},{value:`"gt"`},{value:`"gg"`},{value:`"gn"`},{value:`"gw"`},{value:`"gy"`},{value:`"ht"`},{value:`"hm"`},{value:`"va"`},{value:`"hn"`},{value:`"hk"`},{value:`"hu"`},{value:`"in"`},{value:`"ir"`},{value:`"iq"`},{value:`"ie"`},{value:`"im"`},{value:`"il"`},{value:`"it"`},{value:`"jm"`},{value:`"jp"`},{value:`"je"`},{value:`"jo"`},{value:`"kz"`},{value:`"ke"`},{value:`"ki"`},{value:`"xk"`},{value:`"kw"`},{value:`"kg"`},{value:`"la"`},{value:`"lv"`},{value:`"arab"`},{value:`"lb"`},{value:`"ls"`},{value:`"lr"`},{value:`"ly"`},{value:`"li"`},{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:`"th"`},{value:`"tl"`},{value:`"tg"`},{value:`"tk"`},{value:`"to"`},{value:`"tt"`},{value:`"sh-ta"`},{value:`"tn"`},{value:`"tm"`},{value:`"tc"`},{value:`"tv"`},{value:`"tr"`},{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"`}]}},alt:{defaultValue:null,description:`An accessible alt description of the flag.
|
|
2
|
+
This will usually be the localized country or language name.`,name:`alt`,required:!0,type:{name:`string`}},size:{defaultValue:{value:`small`},description:``,name:`size`,required:!1,type:{name:`enum`,value:[{value:`"small"`},{value:`"medium"`},{value:`"large"`}]}},simplified:{defaultValue:{value:`true`},description:`For some countries (like ES and MX) the simplified flags are automatically used to speed up loading them.`,name:`simplified`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},dataset:{defaultValue:null,description:`Sets data attributes on the DOM element.
|
|
3
|
+
@example <CountryFlag dataset={{ 'qa-id': 'tutor-country-of-birth' }} code="ua" alt="Ukraine" /> // will add data-qa-id="accept-conditions" to the HTML element`,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}}}}}catch{}}));export{v as n,_ as t};
|