@preply/ds-docs 11.3.0 → 11.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.storybook/main.ts +8 -0
- package/dist/assets/{00.LayoutFlex.stories-oDygdYoI.js → 00.LayoutFlex.stories-BPok5Gmm.js} +1 -1
- package/dist/assets/{00.applications-CYsULPew.js → 00.applications-BGZaoKgL.js} +1 -1
- package/dist/assets/{00.favicons.guide-CH6Gi2mg.js → 00.favicons.guide-D5wPncOn.js} +1 -1
- package/dist/assets/{00.token-explorer-C_Go53CA.js → 00.token-explorer-BDLlwhc6.js} +1 -1
- package/dist/assets/{00.using-responsive-props-JIrga6ab.js → 00.using-responsive-props-BRxnFd5i.js} +1 -1
- package/dist/assets/{01.semantic-tokens-3BaDr39t.js → 01.semantic-tokens-CFudZ7pc.js} +1 -1
- package/dist/assets/{01.using-shorthand-props-BXu4Nck4.js → 01.using-shorthand-props-DchZCZhq.js} +1 -1
- package/dist/assets/{10.Combinations.stories-SaJOx9D-.js → 10.Combinations.stories-BN4qNVGI.js} +1 -1
- package/dist/assets/{10.fonts.guide-DkOyZCNQ.js → 10.fonts.guide-BWS-fMyC.js} +1 -1
- package/dist/assets/{10.ssr-D-0bM4ee.js → 10.ssr-DFhHeGSZ.js} +1 -1
- package/dist/assets/{11.fonts.explorer-D6KIcb2q.js → 11.fonts.explorer-BS1XxSRj.js} +1 -1
- package/dist/assets/{11.ssr.app-router-DWtYqFlx.js → 11.ssr.app-router-CWuMPO3g.js} +1 -1
- package/dist/assets/{20.libraries-BlqbfWjy.js → 20.libraries-J4C2b4WP.js} +1 -1
- package/dist/assets/{2025-q4-ds-cleanup-BUrvo7oQ.js → 2025-q4-ds-cleanup-DzhmHakd.js} +1 -1
- package/dist/assets/30.icons.explorer-DkBObzh_.js +72 -0
- package/dist/assets/{30.storybook-CNvYWdc7.js → 30.storybook-1O5EtrKp.js} +1 -1
- package/dist/assets/{40.illustrations.explorer-CAYAdo7r.js → 40.illustrations.explorer-C_NqekHv.js} +1 -1
- package/dist/assets/{60.components-odtQau37.js → 60.components-CxzcTHHY.js} +1 -1
- package/dist/assets/{90.advanced-nCsVunZT.js → 90.advanced-J2ehdLM6.js} +1 -1
- package/dist/assets/{Accordion-grHCnfbZ.js → Accordion-CWMWW-O5.js} +1 -1
- package/dist/assets/{Accordion.stories-CTbvRFnt.js → Accordion.stories-DDqM6MXv.js} +1 -1
- package/dist/assets/{Accordion.tests.stories-B6g6Kr6m.js → Accordion.tests.stories-DN9L-q3H.js} +1 -1
- package/dist/assets/{AlertBanner.primitives.stories-D4-bo1JS.js → AlertBanner.primitives.stories-mKVHs8FF.js} +1 -1
- package/dist/assets/{AlertBanner.stories-BrNGGvfj.js → AlertBanner.stories-BV3lnGPY.js} +1 -1
- package/dist/assets/{AlertBannerAction-DvbUWtiW.js → AlertBannerAction-DU-Yr-4k.js} +9 -9
- package/dist/assets/{AlertDialog-Da2sPT1D.js → AlertDialog-CFUnhRAx.js} +1 -1
- package/dist/assets/{AlertDialog.stories-D7ALUucQ.js → AlertDialog.stories-DovmfFOJ.js} +1 -1
- package/dist/assets/{AvatarWithStatus-D02yNzQm.js → AvatarWithStatus-D83AKEVT.js} +2 -2
- package/dist/assets/{AvatarWithStatus.stories-CxBQAt3x.js → AvatarWithStatus.stories-D-ttnLWy.js} +1 -1
- package/dist/assets/{Badge-Ba7-qf6a.js → Badge-DeL8OM1F.js} +2 -2
- package/dist/assets/{Badge.stories-Dzxsvo2o.js → Badge.stories-BemzPh97.js} +1 -1
- package/dist/assets/{Box--iQMFWAl.js → Box-CcR4H93c.js} +1 -1
- package/dist/assets/{Box.stories-D0JGgXyX.js → Box.stories-B4Kkg_Wz.js} +1 -1
- package/dist/assets/{BubbleCounter-C7jrl0BR.js → BubbleCounter-CfdjWlAV.js} +1 -1
- package/dist/assets/{BubbleCounter.stories-C28ZYRgB.js → BubbleCounter.stories-DRq0-Or2.js} +1 -1
- package/dist/assets/{Button-DagS5hxP.js → Button--WTUF97E.js} +2 -2
- package/dist/assets/{Button.stories-CTvHtk-S.js → Button.stories-B5ddris9.js} +1 -1
- package/dist/assets/{ButtonBase-CMR6iWFG.js → ButtonBase-CMQthdSK.js} +1 -1
- package/dist/assets/{CalloutBanner.stories-BbHi-g9a.js → CalloutBanner.stories-C60JgqC0.js} +1 -1
- package/dist/assets/{CalloutBannerText-DP2O2LqI.js → CalloutBannerText-DDPb7LsF.js} +4 -4
- package/dist/assets/{Checkbox.stories-BWfWlkM3.js → Checkbox.stories-D6wUFMNN.js} +1 -1
- package/dist/assets/{Checkbox.tests.stories-iLD_cClo.js → Checkbox.tests.stories-FLl_ZNDM.js} +1 -1
- package/dist/assets/{Chips.stories-BikTAQab.js → Chips.stories-BfLNlLSh.js} +1 -1
- package/dist/assets/{Color-6BZIO3FS-BqH2EFjf.js → Color-6BZIO3FS-CcuLIbdP.js} +1 -1
- package/dist/assets/{ComposingDialogs.stories-ei_TWBhw.js → ComposingDialogs.stories-Bwtla9z9.js} +1 -1
- package/dist/assets/{ComposingPopovers.stories-DEmACL7_.js → ComposingPopovers.stories-BdgYJQKE.js} +1 -1
- package/dist/assets/{CountryFlag-DXTijnBa.js → CountryFlag-D1d90EPT.js} +1 -1
- package/dist/assets/{CountryFlag.stories-r9szKDdv.js → CountryFlag.stories-B0_35WJ9.js} +1 -1
- package/dist/assets/{CountryFlag.test.stories-DS8v3a4U.js → CountryFlag.test.stories-DGoCByQP.js} +1 -1
- package/dist/assets/{Dialog-a74MpEoC.js → Dialog-BT0Kd0KN.js} +1 -1
- package/dist/assets/{Dialog.primitives.stories-CkKykon1.js → Dialog.primitives.stories-DNe9f6uf.js} +1 -1
- package/dist/assets/{Dialog.stories-CoTCFYpz.js → Dialog.stories-C0BUsh4I.js} +1 -1
- package/dist/assets/{Dialog.test.stories-aF_5M6-z.js → Dialog.test.stories-BapfC0Yd.js} +1 -1
- package/dist/assets/{DialogActions-BsCqS7W7.js → DialogActions-BDIzA8PJ.js} +1 -1
- package/dist/assets/{DialogCloseButton-Df1XDsMW.js → DialogCloseButton-CAY9jDgH.js} +3 -3
- package/dist/assets/{DismissibleChips-QUmF1DlO.js → DismissibleChips-CMpz1ljr.js} +1 -1
- package/dist/assets/{DismissibleChips.stories-BbLkTYXP.js → DismissibleChips.stories-D8vGzcJU.js} +1 -1
- package/dist/assets/{DocsRenderer-LL677BLK-D55zMWRu.js → DocsRenderer-LL677BLK-DZVr0WqC.js} +1 -1
- package/dist/assets/{DropdownMenu-CEFQwkft.js → DropdownMenu-DJWxVTCB.js} +9 -9
- package/dist/assets/{DropdownMenu.stories-Bwd2yU64.js → DropdownMenu.stories-CejSoUQc.js} +1 -1
- package/dist/assets/{FormControl-C_Mh5dfi.js → FormControl-DoNLVcw2.js} +1 -1
- package/dist/assets/{FormControl.stories-Bs2ISm2I.js → FormControl.stories-CM0O-z49.js} +1 -1
- package/dist/assets/{Heading-Xmy4HTvU.js → Heading-B3jb_-J8.js} +1 -1
- package/dist/assets/{Heading.stories-6Dgn_J8U.js → Heading.stories-DjrU1PaC.js} +1 -1
- package/dist/assets/{Icon-C-oDFSRH.js → Icon-Dqr2b6tP.js} +1 -1
- package/dist/assets/{Icon-RSC-Ch-QtBFc.js → Icon-RSC-CIkzpnfO.js} +1 -1
- package/dist/assets/{Icon.stories-DA2UaTGv.js → Icon.stories-1leYoSZM.js} +1 -1
- package/dist/assets/IconButton-CQGXuX8O.js +9 -0
- package/dist/assets/{IconTile.stories-C4MpGbZs.js → IconTile.stories-C3MYzhR1.js} +1 -1
- package/dist/assets/{IntegrationWithReactHookForm.stories-6kdmvmQr.js → IntegrationWithReactHookForm.stories-7-TsLOR4.js} +1 -1
- package/dist/assets/{IntlFormattedCurrency.stories-DFdfoYCv.js → IntlFormattedCurrency.stories-C_afrVTI.js} +1 -1
- package/dist/assets/{IntlFormattedDateTime.stories-CHRJCN68.js → IntlFormattedDateTime.stories-DAllZCk9.js} +1 -1
- package/dist/assets/{LayoutFlex-CpktYRVX.js → LayoutFlex-BlWwmFhv.js} +1 -1
- package/dist/assets/{LayoutFlexItem-Dvv_cK8l.js → LayoutFlexItem-Ck-D8viJ.js} +1 -1
- package/dist/assets/{LayoutGrid-DvHLpq-e.js → LayoutGrid-BCMSACUf.js} +1 -1
- package/dist/assets/{LayoutGrid.stories-DCTuVuVw.js → LayoutGrid.stories-Dg8aAm6_.js} +1 -1
- package/dist/assets/{LayoutGridItem-n0bW9yG3.js → LayoutGridItem-BbJwYcHo.js} +1 -1
- package/dist/assets/{Link-DLL8OonN.js → Link-DbeaGxmu.js} +1 -1
- package/dist/assets/{Link.stories-D_FvQngK.js → Link.stories-HNRLDW5Y.js} +1 -1
- package/dist/assets/{MultiSelectChips-DSeV2AIy.js → MultiSelectChips-Bs8MJsJe.js} +2 -2
- package/dist/assets/{MultiSelectChips.stories-CKax5hXL.js → MultiSelectChips.stories-0xhNcMZn.js} +1 -1
- package/dist/assets/{NativeSelectField.stories-D3-RNzbp.js → NativeSelectField.stories-D27xdDZT.js} +4 -4
- package/dist/assets/{NumberField-CNBfsJCY.js → NumberField-WzHWHpwG.js} +4 -4
- package/dist/assets/{NumberField.stories-CHVQ_b9k.js → NumberField.stories-CKWwzkFc.js} +1 -1
- package/dist/assets/{ObserveIntersection-CR4IhuYz.js → ObserveIntersection-zL3YLMv6.js} +1 -1
- package/dist/assets/{ObserveIntersection.stories-D1FkxcMY.js → ObserveIntersection.stories-BXlW-mL4.js} +1 -1
- package/dist/assets/{OnboardingTooltip-BNwId6Jx.js → OnboardingTooltip-BzkMbW-Q.js} +1 -1
- package/dist/assets/{OnboardingTooltip.stories-npBmAhu4.js → OnboardingTooltip.stories-DpuZirIf.js} +1 -1
- package/dist/assets/{OnboardingTooltip.tests.stories-oxLHDwgd.js → OnboardingTooltip.tests.stories-DVqN90Ec.js} +1 -1
- package/dist/assets/{OnboardingTour-RWyquFZd.js → OnboardingTour-Ba_vMjzP.js} +1 -1
- package/dist/assets/{OnboardingTour.stories-CsdqirC3.js → OnboardingTour.stories-CU5yOTSQ.js} +1 -1
- package/dist/assets/{OnboardingTour.tests.stories-DkBfD2kH.js → OnboardingTour.tests.stories-CPyK1i_w.js} +1 -1
- package/dist/assets/{PasswordField-B2PnHIH1.js → PasswordField-D3gN_VbU.js} +4 -4
- package/dist/assets/{PasswordField.stories-CcnDrvIB.js → PasswordField.stories-B_DbiPEY.js} +1 -1
- package/dist/assets/{ProgressBar.stories-DtKBuyeU.js → ProgressBar.stories-BVBwLJ_h.js} +1 -1
- package/dist/assets/{ProgressSteps.stories-CCDOfqG3.js → ProgressSteps.stories-DpVfrFPk.js} +1 -1
- package/dist/assets/{PromoDialog-CdaXJHkH.js → PromoDialog-BpgSaMl7.js} +1 -1
- package/dist/assets/{RangeSlider-Eo2dw_WW.js → RangeSlider-CQsn2ggM.js} +1 -1
- package/dist/assets/{RangeSlider.stories-DAd-xGsP.js → RangeSlider.stories-B16rODmY.js} +1 -1
- package/dist/assets/{RatingInput.stories-0bwrwiHs.js → RatingInput.stories-D07FYTPA.js} +1 -1
- package/dist/assets/{SelectField-qBhGOYdK.js → SelectField-CtnC30IK.js} +5 -5
- package/dist/assets/{SelectField.stories-Iz2YZ_Bs.js → SelectField.stories-cV1joVTk.js} +1 -1
- package/dist/assets/{ShowOnIntersection-BMR5nazA.js → ShowOnIntersection-hAmOOTIR.js} +2 -2
- package/dist/assets/{ShowOnIntersection.stories-CSSgxbfv.js → ShowOnIntersection.stories-VS4hG4Et.js} +1 -1
- package/dist/assets/{SingleSelectChips-CFj7aR84.js → SingleSelectChips-lT5C7a2D.js} +2 -2
- package/dist/assets/{SingleSelectChips.stories-CJ3zaafZ.js → SingleSelectChips.stories-Du0LL0gN.js} +1 -1
- package/dist/assets/{Slider-Bxzp79ts.js → Slider-BgB4xT6m.js} +1 -1
- package/dist/assets/{Slider.stories-C872-jZV.js → Slider.stories-B0uFs4_2.js} +1 -1
- package/dist/assets/{Steps-CNOQ424q.js → Steps-Ny6Xdpfg.js} +1 -1
- package/dist/assets/{Steps.stories-GHgF9EAg.js → Steps.stories-y16vX2RP.js} +1 -1
- package/dist/assets/{Switch.stories-Dz3BYhCT.js → Switch.stories-D0M0AXLP.js} +1 -1
- package/dist/assets/{Text-Bj49UVGS.js → Text-Cy08WP3t.js} +1 -1
- package/dist/assets/{Text.stories-DjSvZaCW.js → Text.stories-kbD1oPtH.js} +1 -1
- package/dist/assets/{TextField-B4F8szIu.js → TextField-DtzGGo-n.js} +5 -5
- package/dist/assets/{TextField.stories-ZNn7FBmC.js → TextField.stories-BfnbdAlj.js} +1 -1
- package/dist/assets/{TextHighlighted-DPLkdIhv.js → TextHighlighted-BLFuNeOz.js} +1 -1
- package/dist/assets/{TextHighlighted.stories-CEPLsjw4.js → TextHighlighted.stories--iY-wUQl.js} +1 -1
- package/dist/assets/{TextInline-DVOlWF4R.js → TextInline-kNMy4GiU.js} +1 -1
- package/dist/assets/{TextInline.stories-DVE70fjR.js → TextInline.stories-B4fTBAXp.js} +1 -1
- package/dist/assets/{TextareaField-G733luKs.js → TextareaField-BAawMK2x.js} +4 -4
- package/dist/assets/{TextareaField.stories-Bqzxd-3e.js → TextareaField.stories-uB9XCMh4.js} +1 -1
- package/dist/assets/{Toast-CTlQ5Kx4.js → Toast-DtwiCXf7.js} +1 -1
- package/dist/assets/{Toast.stories-DcPkMFFv.js → Toast.stories-DaMiazCZ.js} +1 -1
- package/dist/assets/{Tooltip-DCzQmBi_.js → Tooltip-BKkZoXDV.js} +1 -1
- package/dist/assets/{Tooltip.stories-duE4AOVl.js → Tooltip.stories-wUZg70QA.js} +1 -1
- package/dist/assets/{Tooltip.tests.stories-BsQ0I33Q.js → Tooltip.tests.stories-CJYW12Q0.js} +1 -1
- package/dist/assets/{ai-integration-CUld8nBB.js → ai-integration-CmKZr_5q.js} +1 -1
- package/dist/assets/{breakpoints-CDLTCEqT.js → breakpoints-BL8wVg74.js} +1 -1
- package/dist/assets/{breakpoints-DyVmNUf9.js → breakpoints-BSvP6IHz.js} +1 -1
- package/dist/assets/{breakpoints-D3C_qtqX.js → breakpoints-vEwFHkjC.js} +1 -1
- package/dist/assets/{changelog-CY7pOlLk.js → changelog-wnfuTaGI.js} +11 -1
- package/dist/assets/{constants-Ce2rgJrk.js → constants-BRk8fyp8.js} +1 -5
- package/dist/assets/{createRequiredContext-dSBuii-4.js → createRequiredContext-BQNdOBzE.js} +2 -2
- package/dist/assets/{dist-nghRgjCb.js → dist-dJR9l15z.js} +1 -1
- package/dist/assets/{esm-BYGpffIq.js → esm-QYJ12Nr4.js} +1 -1
- package/dist/assets/{fonts-explorer.stories-DpO5HxZ3.js → fonts-explorer.stories-DLPdV7wh.js} +1 -1
- package/dist/assets/{getTokenVar-DG0TGXYc.js → getTokenVar-lvBbQceM.js} +1 -1
- package/dist/assets/{gradientBorders-C2jt5p-C.js → gradientBorders-DODVBPY0.js} +1 -1
- package/dist/assets/{hover-D6mzisaD.js → hover-Cc8ZlfuU.js} +1 -1
- package/dist/assets/{hover-DfbppVmU.js → hover-DgEYlXBi.js} +1 -1
- package/dist/assets/{hover-BCzGbPFV.js → hover-yxmGi-zx.js} +1 -1
- package/dist/assets/{iframe-kBDSpxRI.js → iframe-BuOXI2w6.js} +4 -4
- package/dist/assets/{intro-DQpyhoTG.js → intro-B-CaE2_E.js} +1 -1
- package/dist/assets/{migrating-from-less-V1oeKlSf.js → migrating-from-less-ClH17s_P.js} +1 -1
- package/dist/assets/{tokens-Bw3658eU.js → tokens-BF6xltNI.js} +1 -1
- package/dist/assets/{tokens-Yf07x_wA.js → tokens-DLKIEc5T.js} +1 -1
- package/dist/assets/{tokens-D1eOr0iV.js → tokens-DOxuMF98.js} +1 -1
- package/dist/assets/{usePortalElement-CzAPYwMj.js → usePortalElement-Cqy1sSsS.js} +1 -1
- package/dist/assets/{welcome-CCU104Dv.js → welcome-CA82uuQ9.js} +1 -1
- package/dist/assets/{zeroheight-I34niHYD.js → zeroheight-BZmC6gtY.js} +1 -1
- package/dist/iframe.html +1 -1
- package/dist/preview-stats.json +15479 -15467
- package/dist/project.json +1 -1
- package/package.json +5 -5
- package/pages/30.guides/70.assets/constants/icon-imports.ts +2 -0
- package/dist/assets/30.icons.explorer-BKujlrNJ.js +0 -72
- package/dist/assets/IconButton-Qo4r7KAR.js +0 -9
|
@@ -1,3 +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:`"
|
|
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:`"as"`},{value:`"br"`},{value:`"hr"`},{value:`"li"`},{value:`"td"`},{value:`"th"`},{value:`"tr"`},{value:`"is"`},{value:`"at"`},{value:`"af"`},{value:`"ax"`},{value:`"al"`},{value:`"dz"`},{value:`"ad"`},{value:`"ao"`},{value:`"ai"`},{value:`"aq"`},{value:`"ag"`},{value:`"ar"`},{value:`"am"`},{value:`"aw"`},{value:`"sh-ac"`},{value:`"asean"`},{value:`"au"`},{value:`"az"`},{value:`"bs"`},{value:`"bh"`},{value:`"bd"`},{value:`"bb"`},{value:`"es-pv"`},{value:`"by"`},{value:`"be"`},{value:`"bz"`},{value:`"bj"`},{value:`"bm"`},{value:`"bt"`},{value:`"bo"`},{value:`"bq"`},{value:`"ba"`},{value:`"bw"`},{value:`"bv"`},{value:`"io"`},{value:`"bn"`},{value:`"bg"`},{value:`"bf"`},{value:`"bi"`},{value:`"cv"`},{value:`"kh"`},{value:`"cm"`},{value:`"ca"`},{value:`"ic"`},{value:`"es-ct"`},{value:`"ky"`},{value:`"cf"`},{value:`"cefta"`},{value:`"cl"`},{value:`"cn"`},{value:`"cx"`},{value:`"cp"`},{value:`"cc"`},{value:`"co"`},{value:`"km"`},{value:`"ck"`},{value:`"cr"`},{value:`"cu"`},{value:`"cw"`},{value:`"cy"`},{value:`"cz"`},{value:`"ci"`},{value:`"cd"`},{value:`"dk"`},{value:`"dg"`},{value:`"dj"`},{value:`"dm"`},{value:`"do"`},{value:`"eac"`},{value:`"ec"`},{value:`"eg"`},{value:`"sv"`},{value:`"gb-eng"`},{value:`"gq"`},{value:`"er"`},{value:`"ee"`},{value:`"sz"`},{value:`"et"`},{value:`"eu"`},{value:`"fk"`},{value:`"fo"`},{value:`"fm"`},{value:`"fj"`},{value:`"fi"`},{value:`"fr"`},{value:`"gf"`},{value:`"pf"`},{value:`"tf"`},{value:`"ga"`},{value:`"es-ga"`},{value:`"gm"`},{value:`"ge"`},{value:`"de"`},{value:`"gh"`},{value:`"gi"`},{value:`"gr"`},{value:`"gl"`},{value:`"gd"`},{value:`"gp"`},{value:`"gu"`},{value:`"gt"`},{value:`"gg"`},{value:`"gn"`},{value:`"gw"`},{value:`"gy"`},{value:`"ht"`},{value:`"hm"`},{value:`"va"`},{value:`"hn"`},{value:`"hk"`},{value:`"hu"`},{value:`"in"`},{value:`"ir"`},{value:`"iq"`},{value:`"ie"`},{value:`"im"`},{value:`"il"`},{value:`"it"`},{value:`"jm"`},{value:`"jp"`},{value:`"je"`},{value:`"jo"`},{value:`"kz"`},{value:`"ke"`},{value:`"ki"`},{value:`"xk"`},{value:`"kw"`},{value:`"kg"`},{value:`"la"`},{value:`"lv"`},{value:`"arab"`},{value:`"lb"`},{value:`"ls"`},{value:`"lr"`},{value:`"ly"`},{value:`"lt"`},{value:`"lu"`},{value:`"mo"`},{value:`"mg"`},{value:`"mw"`},{value:`"my"`},{value:`"mv"`},{value:`"ml"`},{value:`"mt"`},{value:`"mh"`},{value:`"mq"`},{value:`"mr"`},{value:`"mu"`},{value:`"yt"`},{value:`"mx"`},{value:`"md"`},{value:`"mc"`},{value:`"mn"`},{value:`"me"`},{value:`"ms"`},{value:`"ma"`},{value:`"mz"`},{value:`"mm"`},{value:`"na"`},{value:`"nr"`},{value:`"np"`},{value:`"nl"`},{value:`"nc"`},{value:`"nz"`},{value:`"ni"`},{value:`"ne"`},{value:`"ng"`},{value:`"nu"`},{value:`"nf"`},{value:`"kp"`},{value:`"mk"`},{value:`"gb-nir"`},{value:`"mp"`},{value:`"no"`},{value:`"om"`},{value:`"pc"`},{value:`"pk"`},{value:`"pw"`},{value:`"pa"`},{value:`"pg"`},{value:`"py"`},{value:`"pe"`},{value:`"ph"`},{value:`"pn"`},{value:`"pl"`},{value:`"pt"`},{value:`"pr"`},{value:`"qa"`},{value:`"cg"`},{value:`"ro"`},{value:`"ru"`},{value:`"rw"`},{value:`"re"`},{value:`"bl"`},{value:`"sh-hl"`},{value:`"sh"`},{value:`"kn"`},{value:`"lc"`},{value:`"mf"`},{value:`"pm"`},{value:`"vc"`},{value:`"ws"`},{value:`"sm"`},{value:`"st"`},{value:`"sa"`},{value:`"gb-sct"`},{value:`"sn"`},{value:`"rs"`},{value:`"sc"`},{value:`"sl"`},{value:`"sg"`},{value:`"sx"`},{value:`"sk"`},{value:`"si"`},{value:`"sb"`},{value:`"so"`},{value:`"za"`},{value:`"gs"`},{value:`"kr"`},{value:`"ss"`},{value:`"es"`},{value:`"lk"`},{value:`"ps"`},{value:`"sd"`},{value:`"sr"`},{value:`"sj"`},{value:`"se"`},{value:`"ch"`},{value:`"sy"`},{value:`"tw"`},{value:`"tj"`},{value:`"tz"`},{value:`"tl"`},{value:`"tg"`},{value:`"tk"`},{value:`"to"`},{value:`"tt"`},{value:`"sh-ta"`},{value:`"tn"`},{value:`"tm"`},{value:`"tc"`},{value:`"tv"`},{value:`"ug"`},{value:`"ua"`},{value:`"ae"`},{value:`"gb"`},{value:`"un"`},{value:`"um"`},{value:`"us"`},{value:`"uy"`},{value:`"uz"`},{value:`"vu"`},{value:`"ve"`},{value:`"vn"`},{value:`"vg"`},{value:`"vi"`},{value:`"gb-wls"`},{value:`"wf"`},{value:`"eh"`},{value:`"ye"`},{value:`"zm"`},{value:`"zw"`}]}},alt:{defaultValue:null,description:`An accessible alt description of the flag.
|
|
2
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:`"large"`},{value:`"medium"`}]}},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
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};
|
|
@@ -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{B as r,w as i,z as a}from"./dist-DtfJeYQK.js";import{t as o}from"./jsx-runtime-C2wGStra.js";import{n as s,t as c}from"./Text-
|
|
1
|
+
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{B as r,w as i,z as a}from"./dist-DtfJeYQK.js";import{t as o}from"./jsx-runtime-C2wGStra.js";import{n as s,t as c}from"./Text-Cy08WP3t.js";import{a as l,i as u,n as d,r as f,t as p}from"./Accordion-CWMWW-O5.js";import{n as m,t as h}from"./Checkbox-BV4Be-fH.js";import{n as g,t as _}from"./CountryFlag-D1d90EPT.js";import{n as v,t as y}from"./FormControl-DoNLVcw2.js";import{n as b,t as x}from"./LayoutFlex-BlWwmFhv.js";import{n as S,t as C}from"./LayoutGrid-BCMSACUf.js";import{n as w,t as T}from"./LayoutGridItem-BbJwYcHo.js";import{n as E,t as D}from"./Link-DbeaGxmu.js";import{n as O,t as k}from"./TextField-DtzGGo-n.js";function A({src:e,alt:t,square:n=!1}){return(0,M.jsxs)(`div`,{children:[(0,M.jsx)(`img`,{src:e,alt:t,style:{width:n?`96px`:`128px`,height:`96px`}}),(0,M.jsx)(`img`,{src:e,alt:t,style:{width:n?`24px`:`32px`,height:`24px`}})]})}var j,M,N,P,F,I,L,R,z,B;t((()=>{j=e(n(),1),i(),g(),b(),S(),w(),s(),E(),v(),m(),O(),l(),M=o(),{expect:N}=__STORYBOOK_MODULE_TEST__,P={title:`components/CountryFlag`,component:_,args:{code:`ua`,alt:r.ua}},F={render:function(){return(0,M.jsxs)(`div`,{style:{maxWidth:`1000px`},children:[(0,M.jsx)(c,{variant:`default-semibold`,children:"For some countries, simplified flags are automatically used (unless `simplified` is set to `false`)"}),(0,M.jsxs)(C,{columns:4,children:[(0,M.jsx)(T,{children:(0,M.jsx)(c,{variant:`default-semibold`,children:`Code`})}),(0,M.jsx)(T,{children:(0,M.jsx)(c,{variant:`default-semibold`,children:`Country name`})}),(0,M.jsx)(T,{children:(0,M.jsx)(c,{variant:`default-semibold`,children:`4x3`})}),(0,M.jsx)(T,{children:(0,M.jsx)(c,{variant:`default-semibold`,children:"4x3 (with `simplified=false`)"})}),[`es`,`mx`].map(e=>(0,M.jsxs)(j.Fragment,{children:[(0,M.jsx)(T,{children:e}),(0,M.jsx)(T,{children:r[e]}),(0,M.jsx)(T,{children:(0,M.jsx)(_,{code:e,alt:r[e],size:`large`})}),(0,M.jsx)(T,{children:(0,M.jsx)(_,{code:e,alt:r[e],size:`large`,simplified:!1})})]},e))]}),(0,M.jsx)(`br`,{}),(0,M.jsx)(c,{variant:`default-semibold`,children:`All countries`}),(0,M.jsxs)(C,{columns:3,children:[(0,M.jsx)(T,{children:(0,M.jsx)(c,{variant:`default-semibold`,children:`Code`})}),(0,M.jsx)(T,{children:(0,M.jsx)(c,{variant:`default-semibold`,children:`Country name`})}),(0,M.jsx)(T,{children:(0,M.jsx)(c,{variant:`default-semibold`,children:`4x3`})}),Object.keys(r).map(e=>(0,M.jsxs)(j.Fragment,{children:[(0,M.jsx)(T,{children:e}),(0,M.jsx)(T,{children:r[e]}),(0,M.jsx)(T,{children:(0,M.jsx)(_,{code:e,alt:r[e],size:`large`})})]},e))]})]})}},I={tags:[`!test`,`!a11y-test`],parameters:{chromatic:{disableSnapshot:!0}},render:function(){let e=`https://static.staging.preply.org/groot/country_flags/`,t=`https://static.preply.com/ds/country-flags/`,[n,i]=(0,j.useState)(!1),[o,s]=(0,j.useState)(!1),[l,m]=(0,j.useState)(!0),[g,_]=(0,j.useState)(!0),[v,b]=(0,j.useState)(!1),[S,C]=(0,j.useState)(!0),[w,T]=(0,j.useState)(!0),[E,O]=(0,j.useState)(!0),[N,P]=(0,j.useState)(t),F=Number(n)+Number(o)+Number(l)+Number(g)+Number(v)+Number(S)+Number(w)+2;return(0,M.jsxs)(`div`,{style:{maxWidth:`100%`},children:[(0,M.jsx)(p,{children:(0,M.jsxs)(u,{children:[(0,M.jsx)(f,{children:`How to read the following table?`}),(0,M.jsxs)(d,{children:[(0,M.jsxs)(c,{children:[`- All the flags have bee imported from`,` `,(0,M.jsx)(D,{href:`https://github.com/lipis/flag-icons`,children:`flag-icons`})]}),(0,M.jsx)(c,{children:`- Some flags have been manually replaced because they were wrong`}),(0,M.jsx)(c,{children:`- The design system contains more flags compared to Groot (the original apollo's application that contained all the static assets)`}),(0,M.jsx)(c,{children:`- Some flags have simplified versions (ex. Spain, Mexico) to reduce their size`}),(0,M.jsx)(c,{children:`- All the flags are a available in JPG, mainly to reduce the computation on the native application`}),(0,M.jsx)(c,{children:"- You are supposed to gather the assets URL through the `getCountryFlagUrl` utility"}),(0,M.jsx)(c,{children:"- For local testing, use `npx serve` launched in the `static-assets/country-flags` directory, and replace the path in the below field."}),(0,M.jsx)(c,{children:"- For PR testing, look at `deploy-static-assets.sh` to find the PR URL for static assets."})]})]})}),(0,M.jsxs)(x,{gap:`16`,padding:[`32`,`0`,`0`,`0`],children:[(0,M.jsx)(y,{label:`Groot 4x3 SVG`,required:!0,children:(0,M.jsx)(h,{checked:n,onCheckedChange:i})}),(0,M.jsx)(y,{label:`Groot 4x3 PNG`,required:!0,children:(0,M.jsx)(h,{checked:o,onCheckedChange:s})}),(0,M.jsx)(y,{label:`DS 4x3 SVG`,required:!0,children:(0,M.jsx)(h,{checked:l,onCheckedChange:m})}),(0,M.jsx)(y,{label:`DS 4x3 JPG`,required:!0,children:(0,M.jsx)(h,{checked:g,onCheckedChange:_})}),(0,M.jsx)(y,{label:`Groot 1x1 SVG`,required:!0,children:(0,M.jsx)(h,{checked:v,onCheckedChange:b})}),(0,M.jsx)(y,{label:`DS 1x1 SVG`,required:!0,children:(0,M.jsx)(h,{checked:S,onCheckedChange:C})}),(0,M.jsx)(y,{label:`DS 1x1 JPG`,required:!0,children:(0,M.jsx)(h,{checked:w,onCheckedChange:T})}),(0,M.jsx)(y,{label:`Product size`,required:!0,children:(0,M.jsx)(h,{checked:E,onCheckedChange:O})}),(0,M.jsx)(y,{label:`All`,required:!0,children:(0,M.jsx)(h,{checked:n&&o&&l&&g&&v&&S&&w,onCheckedChange:e=>{i(e),s(e),m(e),_(e),b(e),C(e),T(e),O(e)}})}),(0,M.jsx)(k,{value:N,onValueChange:P,label:`Assets path`,required:!0})]}),(0,M.jsx)(`div`,{style:{position:`sticky`,top:`0px`,background:`white`},children:(0,M.jsxs)(`div`,{style:{display:`grid`,gridTemplateColumns:`repeat(${F}, 1fr)`,gap:`4px`,padding:`16px 0 0 0`},children:[(0,M.jsx)(`div`,{style:{alignSelf:`start`},children:(0,M.jsx)(c,{variant:`default-semibold`,children:`Code`})}),(0,M.jsx)(c,{variant:`default-semibold`,children:`Country name`}),n&&(0,M.jsx)(c,{variant:`default-semibold`,children:`Show Groot 4x3 SVG`}),o&&(0,M.jsx)(c,{variant:`default-semibold`,children:`Show Groot 4x3 PNG`}),l&&(0,M.jsx)(c,{variant:`default-semibold`,children:`Show DS 4x3 SVG`}),g&&(0,M.jsx)(c,{variant:`default-semibold`,children:`Show DS 4x3 JPG`}),v&&(0,M.jsx)(c,{variant:`default-semibold`,children:`Show Groot 1x1 SVG`}),S&&(0,M.jsx)(c,{variant:`default-semibold`,children:`Show DS 1x1 SVG`}),w&&(0,M.jsx)(c,{variant:`default-semibold`,children:`Show DS 1x1 JPG`})]})}),(0,M.jsx)(`div`,{style:{display:`grid`,gridTemplateColumns:`repeat(${F}, 1fr)`,gap:`4px`,padding:`16px 0 0 0`},children:Object.keys(r).map(i=>{let s=i,u=r[i],d=a({requester:``,countryCode:s,simplified:!0})!==a({requester:``,countryCode:s,simplified:!1});return(0,M.jsxs)(j.Fragment,{children:[(0,M.jsx)(c,{children:i}),(0,M.jsx)(c,{children:u}),n&&(0,M.jsx)(A,{src:`${e}4x3/${i}.svg`,alt:u}),o&&(0,M.jsx)(A,{src:`${e}pngs/${i}.png`,alt:u}),l&&(0,M.jsx)(A,{src:a({requester:`storybook`,countryCode:s,simplified:!1}).replace(t,N),alt:u}),g&&(0,M.jsx)(A,{src:a({requester:`storybook`,countryCode:s,simplified:!1,graphic:`raster`}).replace(t,N),alt:u}),v&&(0,M.jsx)(A,{src:`${e}1x1/${i}.svg`,square:!0,alt:u}),S&&(0,M.jsx)(A,{src:a({requester:`storybook`,countryCode:s,simplified:!1,square:!0}).replace(t,N),square:!0,alt:u}),w&&(0,M.jsx)(A,{src:a({requester:`storybook`,countryCode:s,simplified:!1,square:!0,graphic:`raster`}).replace(t,N),square:!0,alt:u}),d&&(0,M.jsxs)(j.Fragment,{children:[(0,M.jsxs)(c,{children:[i,` (simplified version)`]}),(0,M.jsx)(c,{children:r[i]}),n&&(0,M.jsx)(A,{src:`${e}4x3/${i}.svg`,alt:u}),o&&(0,M.jsx)(A,{src:`${e}pngs/${i}.png`,alt:u}),l&&(0,M.jsx)(A,{src:a({requester:`storybook`,countryCode:s,simplified:!0}).replace(t,N),alt:u}),g&&(0,M.jsx)(A,{src:a({requester:`storybook`,countryCode:s,simplified:!0,graphic:`raster`}).replace(t,N),alt:u}),v&&(0,M.jsx)(A,{src:`${e}1x1/${i}.svg`,square:!0,alt:u}),S&&(0,M.jsx)(A,{src:a({requester:`storybook`,countryCode:s,simplified:!0,square:!0}).replace(t,N),square:!0,alt:u}),w&&(0,M.jsx)(A,{src:a({requester:`storybook`,countryCode:s,simplified:!0,square:!0,graphic:`raster`}).replace(t,N),square:!0,alt:u})]},i+`simplified`)]},i)})})]})}},L={render:e=>(0,M.jsxs)(x,{gap:`16`,children:[(0,M.jsx)(_,{...e,size:`small`}),(0,M.jsx)(_,{...e,size:`medium`}),(0,M.jsx)(_,{...e,size:`large`})]})},R={render:function(){return(0,M.jsxs)(M.Fragment,{children:[(0,M.jsx)(c,{variant:`default-regular-italic`,children:`Invalid country code`}),(0,M.jsx)(_,{code:`invalidCountryCode`,alt:`Invalid country code`}),(0,M.jsx)(c,{variant:`default-regular-italic`,children:"`undefined` country code"}),(0,M.jsx)(_,{code:void 0,alt:`Undefined country code`})]})},play:async({canvas:e})=>{N(e.getByAltText(`Invalid country code`)).toBeVisible(),N(e.getByAltText(`Undefined country code`)).toBeVisible()}},z={parameters:{chromatic:{disableSnapshot:!0}},args:{dataset:{qaid:`flag`}},argTypes:{dataset:{control:`object`}}},F.parameters={...F.parameters,docs:{...F.parameters?.docs,source:{originalSource:`{
|
|
2
2
|
render: function Story() {
|
|
3
3
|
return <div style={{
|
|
4
4
|
maxWidth: '1000px'
|
package/dist/assets/{CountryFlag.test.stories-DS8v3a4U.js → CountryFlag.test.stories-DGoCByQP.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"./CountryFlag-
|
|
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"./CountryFlag-D1d90EPT.js";var o,s,c,l,u,d;t((()=>{e(n(),1),i(),o=r(),{expect:s}=__STORYBOOK_MODULE_TEST__,c={title:`components/CountryFlag/Tests`,component:a,args:{},tags:[`!autodocs`,`!a11y-test`,`test`]},l={render:function(){return(0,o.jsx)(a,{code:`ua`,alt:`Ukraine`,dataset:{foo:1,bar:`2`,baz:!1}})},play:async({canvas:e})=>{let t=e.getByAltText(`Ukraine`);s(t).toHaveAttribute(`data-foo`,`1`),s(t).toHaveAttribute(`data-bar`,`2`),s(t).toHaveAttribute(`data-baz`,`false`)}},u={render:function(){return(0,o.jsx)(a,{code:`ua`,alt:`Ukraine`,loading:`lazy`})},play:async({canvas:e})=>{s(e.getByAltText(`Ukraine`)).toHaveAttribute(`loading`,`lazy`)}},l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
|
|
2
2
|
render: function Story() {
|
|
3
3
|
return <CountryFlag code="ua" alt="Ukraine" dataset={{
|
|
4
4
|
foo: 1,
|
|
@@ -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"./dist-Cc1j9Pjk.js";import{a as o,c as s,i as c,l,n as u,o as d,r as f,s as p,t as m,u as h}from"./DialogCloseButton-
|
|
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"./dist-Cc1j9Pjk.js";import{a as o,c as s,i as c,l,n as u,o as d,r as f,s as p,t as m,u as h}from"./DialogCloseButton-CAY9jDgH.js";var g,_,v=t((()=>{e(n(),1),s(),d(),c(),u(),h(),a(),g=r(),_=({open:e,title:t,description:n,leadingElement:r,children:a,size:s=`md`,hideHeader:c,onClose:u,mobileFullHeight:d,dataset:h})=>(0,g.jsxs)(p,{open:e,onClose:u,size:s,mobileFullHeight:d,dataset:h,"data-preply-ds-component":i.Dialog,children:[(0,g.jsx)(m,{}),(0,g.jsxs)(`header`,{className:l.header,"data-preply-ds-component":i.DialogHeader,children:[r,!c&&(0,g.jsxs)(`hgroup`,{children:[(0,g.jsx)(o,{children:t}),(0,g.jsx)(f,{children:n})]})]}),a]});try{_.displayName=`Dialog`,_.__docgenInfo={description:`A modal dialog component that can be used to show content in an overlay.
|
|
2
2
|
|
|
3
3
|
Composed of:
|
|
4
4
|
- Dialog: The main component
|
package/dist/assets/{Dialog.primitives.stories-CkKykon1.js → Dialog.primitives.stories-DNe9f6uf.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"./Icon-
|
|
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"./Icon-Dqr2b6tP.js";import{n as o,t as s}from"./Button--WTUF97E.js";import{n as c,t as l}from"./Badge-DeL8OM1F.js";import{n as u,t as d}from"./TokyoUIInfo-CL0Zo7ru.js";import{a as f,c as p,i as m,n as h,o as g,r as _,s as v,t as y}from"./DialogCloseButton-CAY9jDgH.js";import{a as b,i as x,n as S,o as C,r as w,t as T}from"./DialogActions-BDIzA8PJ.js";var E,D,O,k,A,j,M,N,P=t((()=>{E=`content__4abpn`,D=`close__yXHzM`,O=`title__L2rvR`,k=`description__FdpTb`,A=`footer__5lWIE`,j=`buttonStack__eh-Q7`,M=`alwaysStackedButtonStack__kYtW1`,N={content:E,close:D,title:O,description:k,footer:A,buttonStack:j,alwaysStackedButtonStack:M}})),F,I,L,R,z,B,V,H,U,W,G,K,q,J,Y,X;t((()=>{F=e(n(),1),u(),o(),i(),p(),h(),C(),g(),m(),S(),x(),P(),c(),I=r(),{expect:L,userEvent:R,waitFor:z}=__STORYBOOK_MODULE_TEST__,B={title:`Components/Dialog/Primitives`,component:v,subcomponents:{DialogCloseButton:y,DialogFooter:b,DialogTitle:f,DialogDescription:_,DialogActions:T,DialogButtonStack:w},parameters:{preventIframeFromScrollingParent:!0,docs:{story:{inline:!1,height:600}}},play:async({canvas:e,step:t})=>{await t(`Open dialog`,async()=>{let t=e.getByTestId(`trigger`);return await R.click(t),z(()=>{L(e.getByTestId(`dialog`)).toBeVisible()})})}},V=({style:e={}})=>(0,I.jsx)(`div`,{style:{width:`100%`,height:`200px`,background:`linear-gradient(to bottom, color-mix(in srgb, #ffe8f7, transparent), #ffe8f7)`,...e}}),H={render:function(){let[e,t]=(0,F.useState)(!1);return(0,I.jsxs)(I.Fragment,{children:[(0,I.jsx)(s,{dataset:{testid:`trigger`},onClick:()=>t(!0),children:`Open`}),(0,I.jsx)(v,{dataset:{testid:`dialog`},open:e,onClose:()=>t(!1),children:(0,I.jsx)(V,{})})]})}},U={render:function(){let[e,t]=(0,F.useState)(!1);return(0,I.jsxs)(I.Fragment,{children:[(0,I.jsx)(s,{dataset:{testid:`trigger`},onClick:()=>t(!0),children:`Open`}),(0,I.jsx)(v,{dataset:{testid:`dialog`},open:e,onClose:()=>t(!1),overlay:!1,children:(0,I.jsx)(V,{})})]})}},W={render:function(){let[e,t]=(0,F.useState)(!1);return(0,I.jsxs)(I.Fragment,{children:[(0,I.jsx)(s,{dataset:{testid:`trigger`},onClick:()=>t(!0),children:`Open`}),(0,I.jsx)(v,{dataset:{testid:`dialog`},open:e,onClose:()=>t(!1),children:(0,I.jsx)(b,{children:(0,I.jsxs)(w,{children:[(0,I.jsx)(s,{variant:`quaternary`,children:`Quaternary`}),(0,I.jsx)(s,{variant:`tertiary`,children:`Tertiary`}),(0,I.jsx)(s,{variant:`secondary`,children:`Secondary`}),(0,I.jsx)(s,{variant:`primary`,children:`Primary`})]})})})]})}},G={render:function(){let[e,t]=(0,F.useState)(!1);return(0,I.jsxs)(I.Fragment,{children:[(0,I.jsx)(s,{dataset:{testid:`trigger`},onClick:()=>t(!0),children:`Open`}),(0,I.jsx)(v,{dataset:{testid:`dialog`},open:e,onClose:()=>t(!1),children:(0,I.jsx)(b,{children:(0,I.jsxs)(w,{className:N.alwaysStackedButtonStack,children:[(0,I.jsx)(s,{variant:`tertiary`,children:`Cancel`}),(0,I.jsx)(s,{variant:`primary`,children:`Confirm`})]})})})]})}},K={render:function(){let[e,t]=(0,F.useState)(!1);return(0,I.jsxs)(I.Fragment,{children:[(0,I.jsx)(s,{dataset:{testid:`trigger`},onClick:()=>t(!0),children:`Open`}),(0,I.jsxs)(v,{dataset:{testid:`dialog`},open:e,onClose:()=>t(!1),children:[(0,I.jsx)(y,{}),(0,I.jsxs)(`header`,{style:{display:`flex`,flexDirection:`column`,gap:`20px`,marginBottom:`24px`},children:[(0,I.jsx)(a,{size:`32`,svg:d}),(0,I.jsxs)(`hgroup`,{children:[(0,I.jsx)(f,{children:`Dialog`}),(0,I.jsx)(_,{children:`AKA Task Dialog`})]})]}),(0,I.jsx)(V,{}),(0,I.jsx)(b,{children:(0,I.jsxs)(w,{children:[(0,I.jsx)(s,{variant:`tertiary`,children:`Cancel`}),(0,I.jsx)(s,{variant:`primary`,children:`Confirm`})]})})]})]})}},q={render:function(){let[e,t]=(0,F.useState)(!1);return(0,I.jsxs)(I.Fragment,{children:[(0,I.jsx)(s,{dataset:{testid:`trigger`},onClick:()=>t(!0),children:`Open`}),(0,I.jsxs)(v,{open:e,onClose:()=>t(!1),dataset:{testid:`dialog`},children:[(0,I.jsx)(y,{}),(0,I.jsx)(V,{style:{backgroundColor:`pink`,marginInline:`calc(-1 * var(--dialog-padding))`,marginTop:`calc(-1 * var(--dialog-padding))`,marginBottom:`var(--dialog-padding)`,width:`calc-size(auto)`}}),(0,I.jsxs)(`div`,{style:{display:`flex`,flexDirection:`column`,gap:`12px`,alignItems:`center`},children:[(0,I.jsx)(f,{children:`Promo Dialog`}),(0,I.jsx)(_,{children:`For all your promotional needs`})]}),(0,I.jsx)(b,{children:(0,I.jsxs)(`div`,{style:{display:`flex`,flexDirection:`column`,gap:`12px`,width:`fit-content`,marginInline:`auto`},children:[(0,I.jsx)(s,{variant:`primary`,children:`Confirm`}),(0,I.jsx)(s,{variant:`tertiary`,children:`Cancel`})]})})]})]})}},J={render:function(){let[e,t]=(0,F.useState)(!1);return(0,I.jsxs)(I.Fragment,{children:[(0,I.jsx)(s,{dataset:{testid:`trigger`},onClick:()=>t(!0),children:`Open`}),(0,I.jsxs)(v,{dataset:{testid:`dialog`},open:e,onClose:()=>t(!1),children:[(0,I.jsx)(y,{children:(0,I.jsx)(s,{variant:`ghost`,children:`Not Now`})}),(0,I.jsx)(V,{style:{background:`color-mix(in srgb, #ffe8f7, transparent)`,position:`absolute`,inset:0,height:`100%`,zIndex:`-1`}}),(0,I.jsx)(V,{style:{marginInline:`calc(-1 * var(--dialog-padding))`,marginTop:`calc(-1 * var(--dialog-padding))`,marginBottom:`var(--dialog-padding)`,width:`calc-size(auto)`}}),(0,I.jsxs)(`div`,{style:{display:`flex`,flexDirection:`column`,gap:`12px`,alignItems:`center`},children:[(0,I.jsx)(l,{type:`ai`,children:`Beta`}),(0,I.jsx)(f,{children:`Promo Dialog 2.0`}),(0,I.jsx)(_,{children:`Now with a longer button`})]}),(0,I.jsx)(`div`,{style:{marginTop:`var(--dialog-padding)`},children:(0,I.jsx)(s,{variant:`onColor`,fullWidth:!0,children:`Let's go!`})})]})]})}},Y={render:function(){let[e,t]=(0,F.useState)(!1);return(0,I.jsxs)(I.Fragment,{children:[(0,I.jsx)(s,{dataset:{testid:`trigger`},onClick:()=>t(!0),children:`Open`}),(0,I.jsxs)(v,{open:e,onClose:()=>t(!1),dataset:{testid:`dialog`},className:N.content,children:[(0,I.jsx)(y,{className:N.close}),(0,I.jsx)(f,{className:N.title,children:`Custom Title`}),(0,I.jsx)(_,{className:N.description,children:`Custom Description`}),(0,I.jsx)(`br`,{}),Array.from({length:5}).map((e,t)=>(0,I.jsx)(V,{},t)),(0,I.jsx)(b,{className:N.footer,children:(0,I.jsxs)(w,{className:N.buttonStack,children:[(0,I.jsx)(s,{variant:`primary`,children:`Custom Primary`}),(0,I.jsx)(s,{variant:`secondary`,children:`Custom Secondary`})]})})]})]})}},H.parameters={...H.parameters,docs:{...H.parameters?.docs,source:{originalSource:`{
|
|
2
2
|
render: function Story() {
|
|
3
3
|
const [open, setOpen] = useState(false);
|
|
4
4
|
return <>
|
|
@@ -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"./Icon-C-oDFSRH.js";import{n as o,t as s}from"./Button-DagS5hxP.js";import{n as c,r as l}from"./OnboardingTooltip-BNwId6Jx.js";import{c as ee,i as u,l as d,o as f,r as p,s as m}from"./AlertBannerAction-DvbUWtiW.js";import{n as te,t as ne}from"./Avatar-D6oXWjq1.js";import{n as h,t as g}from"./TokyoUIInfo-CL0Zo7ru.js";import{t as _}from"./Checkbox-BV4Be-fH.js";import{c as v,n as re,s as y,t as b}from"./DialogCloseButton-Df1XDsMW.js";import{n as x,t as S}from"./Dialog-a74MpEoC.js";import{n as ie,t as C}from"./DialogActions-BsCqS7W7.js";import{n as ae,t as oe}from"./NumberField-CNBfsJCY.js";var w,T,E,D,O,k,A,j,M,N,P,F,I,L,R,z,B,V,H,U,W,G,K,q,J,Y,X,Z,Q,$;t((()=>{w=e(n(),1),x(),re(),v(),o(),te(),h(),ae(),i(),l(),p(),d(),ie(),T=r(),{action:E}=__STORYBOOK_MODULE_ACTIONS__,{expect:D,fn:O,userEvent:k,waitFor:A,within:j}=__STORYBOOK_MODULE_TEST__,M=()=>(0,T.jsx)(`div`,{style:{width:`100%`,height:`200px`,background:`linear-gradient(to bottom, color-mix(in srgb, #e0e0e0, transparent), #e0e0e0)`}}),N=()=>{},P=(e,t)=>{let[n,r]=(0,w.useState)(t.args.open);N=()=>r(!1);let i=()=>{r(!1),t.args.onClose?.()};return(0,T.jsxs)(T.Fragment,{children:[(0,T.jsx)(s,{dataset:{testid:`trigger`},onClick:()=>r(!0),children:`Open`}),(0,T.jsx)(e,{args:{...t.args,open:n,onClose:i}})]})},F={title:`Components/Dialog`,component:S,parameters:{preventIframeFromScrollingParent:!0,docs:{story:{inline:!1,height:600}}},decorators:[P],args:{open:!1,onClose:O(),children:(0,T.jsx)(M,{}),dataset:{testid:`dialog`}},play:async({canvas:e,step:t})=>{await t(`Open dialog`,async()=>{let t=e.getByTestId(`trigger`);return await k.click(t),A(()=>{D(e.getByTestId(`dialog`)).toBeVisible()})})}},I={parameters:{chromatic:{modes:{"narrow-l":{viewport:`narrow-l`},"wide-s":{viewport:`wide-s`}}}},args:{title:`Dialog title`,children:(0,T.jsxs)(T.Fragment,{children:[(0,T.jsx)(M,{}),(0,T.jsx)(C,{primaryButton:(0,T.jsx)(s,{size:`medium`,variant:`primary`,onClick:()=>{E(`Primary button clicked`),N()},children:`Primary`}),secondaryButton:(0,T.jsx)(s,{size:`medium`,variant:`tertiary`,onClick:E(`Secondary button clicked`),children:`Secondary`})})]})}},L=()=>{let[e,t]=(0,w.useState)(1);return(0,T.jsxs)(T.Fragment,{children:[(0,T.jsx)(oe,{label:`Child count`,value:e,onChange:e=>t(parseInt(e.target.value)),required:!0}),(0,T.jsx)(`br`,{}),Array.from({length:e},(e,t)=>(0,T.jsx)(M,{},t))]})},R={args:{title:`Height Responsiveness`,description:`Change the number of children to see the Dialog style respond to the height change`,children:(0,T.jsxs)(T.Fragment,{children:[(0,T.jsx)(L,{}),(0,T.jsx)(C,{primaryButton:(0,T.jsx)(s,{size:`medium`,variant:`primary`,onClick:E(`Primary button clicked`),children:`Primary`}),secondaryButton:(0,T.jsx)(s,{size:`medium`,variant:`tertiary`,onClick:E(`Secondary button clicked`),children:`Secondary`})})]})}},z={parameters:{pseudo:{focusWithin:`:has([data-focus="true"])`}},args:{title:`Height Respects Component Outlines`,description:`Height respect, by leaving space for , components' outline created through the dedicated outline tokens.`,children:(0,T.jsxs)(T.Fragment,{children:[(0,T.jsxs)(`div`,{style:{display:`flex`,justifyContent:`space-between`},children:[(0,T.jsx)(_,{checked:!0,dataset:{focus:!0}}),(0,T.jsx)(_,{checked:!0,dataset:{focus:!0}})]}),(0,T.jsx)(M,{}),(0,T.jsxs)(`div`,{style:{display:`flex`,justifyContent:`space-between`},children:[(0,T.jsx)(_,{checked:!0,dataset:{focus:!0}}),(0,T.jsx)(_,{checked:!0,dataset:{focus:!0}})]}),(0,T.jsx)(C,{primaryButton:(0,T.jsx)(s,{size:`medium`,variant:`primary`,onClick:E(`Primary button clicked`),children:`Primary`}),secondaryButton:(0,T.jsx)(s,{size:`medium`,variant:`tertiary`,onClick:E(`Secondary button clicked`),children:`Secondary`})})]})}},B={parameters:{chromatic:{modes:{"narrow-l":{viewport:`narrow-l`},"medium-s":{viewport:`medium-s`},"medium-l":{viewport:`medium-l`}}}},args:{title:`Mobile Full Height`,mobileFullHeight:!0}},V={args:{title:`Dialog Title`,description:`This is the dialog description.`,children:(0,T.jsxs)(T.Fragment,{children:[(0,T.jsx)(M,{}),(0,T.jsx)(C,{primaryButton:(0,T.jsx)(s,{size:`medium`,variant:`primary`,onClick:E(`Primary button clicked`),children:`Primary`})})]})}},H={args:{title:`Dialog Title`,description:`This is the dialog description.`,children:(0,T.jsxs)(T.Fragment,{children:[(0,T.jsx)(M,{}),(0,T.jsx)(C,{primaryButton:(0,T.jsx)(s,{size:`medium`,variant:`primary`,onClick:E(`Primary button clicked`),children:`Primary`}),secondaryButton:(0,T.jsx)(s,{size:`medium`,variant:`tertiary`,onClick:E(`Secondary button clicked`),children:`Secondary`})})]})}},U=()=>(0,T.jsxs)(y,{open:!0,dataset:{testid:`dialog`},children:[(0,T.jsx)(b,{}),(0,T.jsx)(T.Fragment,{children:(0,T.jsxs)(m,{"aria-label":`Onboarding Steps`,children:[(0,T.jsx)(f,{title:`Profile`,description:`Tell us more about yourself`,children:(0,T.jsx)(M,{})}),(0,T.jsx)(f,{title:`Subject`,description:`What do you want to learn?`,children:(0,T.jsx)(M,{})}),(0,T.jsx)(f,{title:`Availability`,description:`When are you available?`,children:(0,T.jsx)(M,{})}),(0,T.jsx)(ee,{primaryButton:(0,T.jsx)(s,{size:`medium`,variant:`primary`,onClick:E(`Primary button clicked`),children:`Primary`})})]})})]}),U.play=async e=>{let{canvas:t,step:n}=e;await n(`Dialog should be visible`,async()=>{await A(()=>{D(t.getByTestId(`dialog`)).toBeVisible()})}),await n(`Initially, only next button is present`,async()=>{D(t.queryByRole(`button`,{name:`Next`})).toBeVisible(),D(t.queryByRole(`button`,{name:`Previous`})).not.toBeInTheDocument(),D(t.queryByRole(`button`,{name:`Primary`})).not.toBeInTheDocument()}),await n(`Navigate to the next step. Previous/Next buttons are visible`,async()=>{await k.click(t.getByRole(`button`,{name:`Next`})),D(t.queryByRole(`button`,{name:`Previous`})).toBeVisible(),D(t.queryByRole(`button`,{name:`Next`})).toBeVisible(),D(t.queryByRole(`button`,{name:`Primary`})).not.toBeInTheDocument()}),await n(`Navigate to the last step. Previous/Primary buttons are visible`,async()=>{await k.click(t.getByRole(`button`,{name:`Next`})),D(t.queryByRole(`button`,{name:`Previous`})).toBeVisible(),D(t.queryByRole(`button`,{name:`Primary`})).toBeVisible(),D(t.queryByRole(`button`,{name:`Next`})).not.toBeInTheDocument()})},W={args:{leadingElement:(0,T.jsx)(a,{size:`32`,svg:g}),title:`Information Dialog`}},G={args:{leadingElement:(0,T.jsx)(u,{size:`medium`,svg:g}),title:`Information Dialog`}},K={args:{leadingElement:(0,T.jsx)(ne,{size:`48`,alt:`User`}),title:`User Profile`,description:`This dialog shows a user profile with an avatar in the title`}},q=e=>((0,w.useEffect)(()=>(document.body.style.setProperty(`--ds-dialog-overlay-z-index-override`,`88`),document.body.style.setProperty(`--ds-dialog-content-z-index-override`,`77`),()=>{document.body.style.removeProperty(`--ds-dialog-overlay-z-index-override`),document.body.style.removeProperty(`--ds-dialog-content-z-index-override`)}),[]),(0,T.jsx)(`div`,{style:{position:`relative`,zIndex:99},children:(0,T.jsx)(S,{...e,title:`ZIndex Override`})})),q.parameters={docs:{source:{type:`code`}}},q.play=async({canvas:e,step:t})=>{await t(`Open alert`,async()=>(await k.click(e.getByTestId(`trigger`)),A(()=>{D(e.getByTestId(`dialog`)).toBeVisible()}))),await t(`Check content's computed z-index`,async()=>{let t=e.getByTestId(`dialog`);D(getComputedStyle(t).zIndex).toBe(`77`)}),await t(`Check overlay's computed z-index`,async()=>{let t=e.getByTestId(`dialog-overlay`);if(!t)throw Error(`The overlay happened to be the previous sibling of the dialog content, but it isn't anymore. Please update the test.`);D(getComputedStyle(t).zIndex).toBe(`88`)})},J={uncontrolled:O(E(`uncontrolled`)),controlled:O(E(`controlled`))},Y=()=>{let[e,t]=(0,w.useState)(!1);return(0,T.jsxs)(T.Fragment,{children:[(0,T.jsx)(c,{dataset:{testid:`uncontrolled-tooltip`},actionOnClick:J.uncontrolled,title:`Uncontrolled`,text:`text`,children:(0,T.jsx)(s,{children:`Uncontrolled`})}),(0,T.jsx)(c,{dataset:{testid:`controlled-tooltip`},actionOnClick:J.controlled,title:`Controlled`,text:`text`,disabled:!e,onClose:()=>t(!1),children:(0,T.jsx)(s,{onClick:()=>t(!0),children:`Open tooltip`})})]})},X={tags:[`!autodocs`],args:{children:(0,T.jsx)(Y,{})},play:async e=>{await F.play?.(e);let{canvas:t,step:n}=e,r=t.getByTestId(`uncontrolled-tooltip`);await n(`Uncontrolled tooltip should be visible`,async()=>{await A(()=>{D(r).toBeVisible()})}),await n(`Click on uncontrolled tooltip action`,async()=>{await k.click(j(r).getByTestId(`action`)),D(J.uncontrolled).toHaveBeenCalledOnce()}),await n(`Open controlled tooltip`,async()=>{await k.click(t.getByRole(`button`,{name:`Open tooltip`})),await A(()=>{D(t.getByTestId(`controlled-tooltip`)).toBeVisible()})}),await n(`Click on controlled tooltip action`,async()=>{await k.click(j(t.getByTestId(`controlled-tooltip`)).getByTestId(`action`)),D(J.controlled).toHaveBeenCalledOnce()})}},Z=({number:e,children:t})=>{let[n,r]=(0,w.useState)(!1);return(0,T.jsxs)(T.Fragment,{children:[(0,T.jsx)(s,{onClick:()=>r(!0),dataset:{testid:`trigger-${e}`},children:`Open`}),(0,T.jsx)(S,{open:n,onClose:()=>r(!1),title:`Dialog ${e}`,description:void 0,leadingElement:void 0,dataset:{testid:`dialog-${e}`},children:t})]})},Q={parameters:{chromatic:{modes:{"narrow-l":{viewport:`narrow-l`},"medium-s":{viewport:`medium-s`},"medium-l":{viewport:`medium-l`}}}},args:{title:`Dialog 1`,children:(0,T.jsxs)(T.Fragment,{children:[(0,T.jsx)(M,{}),(0,T.jsx)(`br`,{}),(0,T.jsx)(Z,{number:2,children:(0,T.jsx)(Z,{number:3})})]})},play:async({canvas:e,step:t})=>{await t(`Open dialog`,async()=>{let t=e.getByTestId(`trigger`);return await k.click(t),A(()=>{D(e.getByTestId(`dialog`)).toBeVisible()})}),await t(`Open dialog 2`,async()=>{let t=e.getByTestId(`trigger-2`);return await k.click(t),A(()=>{D(e.getByTestId(`dialog-2`)).toBeVisible()})}),await t(`Open dialog 3`,async()=>{let t=e.getByTestId(`trigger-3`);return await k.click(t),A(()=>{D(e.getByTestId(`dialog-3`)).toBeVisible()})})}},I.parameters={...I.parameters,docs:{...I.parameters?.docs,source:{originalSource:`{
|
|
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"./Icon-Dqr2b6tP.js";import{n as o,t as s}from"./Button--WTUF97E.js";import{n as c,r as l}from"./OnboardingTooltip-BzkMbW-Q.js";import{c as ee,i as u,l as d,o as f,r as p,s as m}from"./AlertBannerAction-DU-Yr-4k.js";import{n as te,t as ne}from"./Avatar-D6oXWjq1.js";import{n as h,t as g}from"./TokyoUIInfo-CL0Zo7ru.js";import{t as _}from"./Checkbox-BV4Be-fH.js";import{c as v,n as re,s as y,t as b}from"./DialogCloseButton-CAY9jDgH.js";import{n as x,t as S}from"./Dialog-BT0Kd0KN.js";import{n as ie,t as C}from"./DialogActions-BDIzA8PJ.js";import{n as ae,t as oe}from"./NumberField-WzHWHpwG.js";var w,T,E,D,O,k,A,j,M,N,P,F,I,L,R,z,B,V,H,U,W,G,K,q,J,Y,X,Z,Q,$;t((()=>{w=e(n(),1),x(),re(),v(),o(),te(),h(),ae(),i(),l(),p(),d(),ie(),T=r(),{action:E}=__STORYBOOK_MODULE_ACTIONS__,{expect:D,fn:O,userEvent:k,waitFor:A,within:j}=__STORYBOOK_MODULE_TEST__,M=()=>(0,T.jsx)(`div`,{style:{width:`100%`,height:`200px`,background:`linear-gradient(to bottom, color-mix(in srgb, #e0e0e0, transparent), #e0e0e0)`}}),N=()=>{},P=(e,t)=>{let[n,r]=(0,w.useState)(t.args.open);N=()=>r(!1);let i=()=>{r(!1),t.args.onClose?.()};return(0,T.jsxs)(T.Fragment,{children:[(0,T.jsx)(s,{dataset:{testid:`trigger`},onClick:()=>r(!0),children:`Open`}),(0,T.jsx)(e,{args:{...t.args,open:n,onClose:i}})]})},F={title:`Components/Dialog`,component:S,parameters:{preventIframeFromScrollingParent:!0,docs:{story:{inline:!1,height:600}}},decorators:[P],args:{open:!1,onClose:O(),children:(0,T.jsx)(M,{}),dataset:{testid:`dialog`}},play:async({canvas:e,step:t})=>{await t(`Open dialog`,async()=>{let t=e.getByTestId(`trigger`);return await k.click(t),A(()=>{D(e.getByTestId(`dialog`)).toBeVisible()})})}},I={parameters:{chromatic:{modes:{"narrow-l":{viewport:`narrow-l`},"wide-s":{viewport:`wide-s`}}}},args:{title:`Dialog title`,children:(0,T.jsxs)(T.Fragment,{children:[(0,T.jsx)(M,{}),(0,T.jsx)(C,{primaryButton:(0,T.jsx)(s,{size:`medium`,variant:`primary`,onClick:()=>{E(`Primary button clicked`),N()},children:`Primary`}),secondaryButton:(0,T.jsx)(s,{size:`medium`,variant:`tertiary`,onClick:E(`Secondary button clicked`),children:`Secondary`})})]})}},L=()=>{let[e,t]=(0,w.useState)(1);return(0,T.jsxs)(T.Fragment,{children:[(0,T.jsx)(oe,{label:`Child count`,value:e,onChange:e=>t(parseInt(e.target.value)),required:!0}),(0,T.jsx)(`br`,{}),Array.from({length:e},(e,t)=>(0,T.jsx)(M,{},t))]})},R={args:{title:`Height Responsiveness`,description:`Change the number of children to see the Dialog style respond to the height change`,children:(0,T.jsxs)(T.Fragment,{children:[(0,T.jsx)(L,{}),(0,T.jsx)(C,{primaryButton:(0,T.jsx)(s,{size:`medium`,variant:`primary`,onClick:E(`Primary button clicked`),children:`Primary`}),secondaryButton:(0,T.jsx)(s,{size:`medium`,variant:`tertiary`,onClick:E(`Secondary button clicked`),children:`Secondary`})})]})}},z={parameters:{pseudo:{focusWithin:`:has([data-focus="true"])`}},args:{title:`Height Respects Component Outlines`,description:`Height respect, by leaving space for , components' outline created through the dedicated outline tokens.`,children:(0,T.jsxs)(T.Fragment,{children:[(0,T.jsxs)(`div`,{style:{display:`flex`,justifyContent:`space-between`},children:[(0,T.jsx)(_,{checked:!0,dataset:{focus:!0}}),(0,T.jsx)(_,{checked:!0,dataset:{focus:!0}})]}),(0,T.jsx)(M,{}),(0,T.jsxs)(`div`,{style:{display:`flex`,justifyContent:`space-between`},children:[(0,T.jsx)(_,{checked:!0,dataset:{focus:!0}}),(0,T.jsx)(_,{checked:!0,dataset:{focus:!0}})]}),(0,T.jsx)(C,{primaryButton:(0,T.jsx)(s,{size:`medium`,variant:`primary`,onClick:E(`Primary button clicked`),children:`Primary`}),secondaryButton:(0,T.jsx)(s,{size:`medium`,variant:`tertiary`,onClick:E(`Secondary button clicked`),children:`Secondary`})})]})}},B={parameters:{chromatic:{modes:{"narrow-l":{viewport:`narrow-l`},"medium-s":{viewport:`medium-s`},"medium-l":{viewport:`medium-l`}}}},args:{title:`Mobile Full Height`,mobileFullHeight:!0}},V={args:{title:`Dialog Title`,description:`This is the dialog description.`,children:(0,T.jsxs)(T.Fragment,{children:[(0,T.jsx)(M,{}),(0,T.jsx)(C,{primaryButton:(0,T.jsx)(s,{size:`medium`,variant:`primary`,onClick:E(`Primary button clicked`),children:`Primary`})})]})}},H={args:{title:`Dialog Title`,description:`This is the dialog description.`,children:(0,T.jsxs)(T.Fragment,{children:[(0,T.jsx)(M,{}),(0,T.jsx)(C,{primaryButton:(0,T.jsx)(s,{size:`medium`,variant:`primary`,onClick:E(`Primary button clicked`),children:`Primary`}),secondaryButton:(0,T.jsx)(s,{size:`medium`,variant:`tertiary`,onClick:E(`Secondary button clicked`),children:`Secondary`})})]})}},U=()=>(0,T.jsxs)(y,{open:!0,dataset:{testid:`dialog`},children:[(0,T.jsx)(b,{}),(0,T.jsx)(T.Fragment,{children:(0,T.jsxs)(m,{"aria-label":`Onboarding Steps`,children:[(0,T.jsx)(f,{title:`Profile`,description:`Tell us more about yourself`,children:(0,T.jsx)(M,{})}),(0,T.jsx)(f,{title:`Subject`,description:`What do you want to learn?`,children:(0,T.jsx)(M,{})}),(0,T.jsx)(f,{title:`Availability`,description:`When are you available?`,children:(0,T.jsx)(M,{})}),(0,T.jsx)(ee,{primaryButton:(0,T.jsx)(s,{size:`medium`,variant:`primary`,onClick:E(`Primary button clicked`),children:`Primary`})})]})})]}),U.play=async e=>{let{canvas:t,step:n}=e;await n(`Dialog should be visible`,async()=>{await A(()=>{D(t.getByTestId(`dialog`)).toBeVisible()})}),await n(`Initially, only next button is present`,async()=>{D(t.queryByRole(`button`,{name:`Next`})).toBeVisible(),D(t.queryByRole(`button`,{name:`Previous`})).not.toBeInTheDocument(),D(t.queryByRole(`button`,{name:`Primary`})).not.toBeInTheDocument()}),await n(`Navigate to the next step. Previous/Next buttons are visible`,async()=>{await k.click(t.getByRole(`button`,{name:`Next`})),D(t.queryByRole(`button`,{name:`Previous`})).toBeVisible(),D(t.queryByRole(`button`,{name:`Next`})).toBeVisible(),D(t.queryByRole(`button`,{name:`Primary`})).not.toBeInTheDocument()}),await n(`Navigate to the last step. Previous/Primary buttons are visible`,async()=>{await k.click(t.getByRole(`button`,{name:`Next`})),D(t.queryByRole(`button`,{name:`Previous`})).toBeVisible(),D(t.queryByRole(`button`,{name:`Primary`})).toBeVisible(),D(t.queryByRole(`button`,{name:`Next`})).not.toBeInTheDocument()})},W={args:{leadingElement:(0,T.jsx)(a,{size:`32`,svg:g}),title:`Information Dialog`}},G={args:{leadingElement:(0,T.jsx)(u,{size:`medium`,svg:g}),title:`Information Dialog`}},K={args:{leadingElement:(0,T.jsx)(ne,{size:`48`,alt:`User`}),title:`User Profile`,description:`This dialog shows a user profile with an avatar in the title`}},q=e=>((0,w.useEffect)(()=>(document.body.style.setProperty(`--ds-dialog-overlay-z-index-override`,`88`),document.body.style.setProperty(`--ds-dialog-content-z-index-override`,`77`),()=>{document.body.style.removeProperty(`--ds-dialog-overlay-z-index-override`),document.body.style.removeProperty(`--ds-dialog-content-z-index-override`)}),[]),(0,T.jsx)(`div`,{style:{position:`relative`,zIndex:99},children:(0,T.jsx)(S,{...e,title:`ZIndex Override`})})),q.parameters={docs:{source:{type:`code`}}},q.play=async({canvas:e,step:t})=>{await t(`Open alert`,async()=>(await k.click(e.getByTestId(`trigger`)),A(()=>{D(e.getByTestId(`dialog`)).toBeVisible()}))),await t(`Check content's computed z-index`,async()=>{let t=e.getByTestId(`dialog`);D(getComputedStyle(t).zIndex).toBe(`77`)}),await t(`Check overlay's computed z-index`,async()=>{let t=e.getByTestId(`dialog-overlay`);if(!t)throw Error(`The overlay happened to be the previous sibling of the dialog content, but it isn't anymore. Please update the test.`);D(getComputedStyle(t).zIndex).toBe(`88`)})},J={uncontrolled:O(E(`uncontrolled`)),controlled:O(E(`controlled`))},Y=()=>{let[e,t]=(0,w.useState)(!1);return(0,T.jsxs)(T.Fragment,{children:[(0,T.jsx)(c,{dataset:{testid:`uncontrolled-tooltip`},actionOnClick:J.uncontrolled,title:`Uncontrolled`,text:`text`,children:(0,T.jsx)(s,{children:`Uncontrolled`})}),(0,T.jsx)(c,{dataset:{testid:`controlled-tooltip`},actionOnClick:J.controlled,title:`Controlled`,text:`text`,disabled:!e,onClose:()=>t(!1),children:(0,T.jsx)(s,{onClick:()=>t(!0),children:`Open tooltip`})})]})},X={tags:[`!autodocs`],args:{children:(0,T.jsx)(Y,{})},play:async e=>{await F.play?.(e);let{canvas:t,step:n}=e,r=t.getByTestId(`uncontrolled-tooltip`);await n(`Uncontrolled tooltip should be visible`,async()=>{await A(()=>{D(r).toBeVisible()})}),await n(`Click on uncontrolled tooltip action`,async()=>{await k.click(j(r).getByTestId(`action`)),D(J.uncontrolled).toHaveBeenCalledOnce()}),await n(`Open controlled tooltip`,async()=>{await k.click(t.getByRole(`button`,{name:`Open tooltip`})),await A(()=>{D(t.getByTestId(`controlled-tooltip`)).toBeVisible()})}),await n(`Click on controlled tooltip action`,async()=>{await k.click(j(t.getByTestId(`controlled-tooltip`)).getByTestId(`action`)),D(J.controlled).toHaveBeenCalledOnce()})}},Z=({number:e,children:t})=>{let[n,r]=(0,w.useState)(!1);return(0,T.jsxs)(T.Fragment,{children:[(0,T.jsx)(s,{onClick:()=>r(!0),dataset:{testid:`trigger-${e}`},children:`Open`}),(0,T.jsx)(S,{open:n,onClose:()=>r(!1),title:`Dialog ${e}`,description:void 0,leadingElement:void 0,dataset:{testid:`dialog-${e}`},children:t})]})},Q={parameters:{chromatic:{modes:{"narrow-l":{viewport:`narrow-l`},"medium-s":{viewport:`medium-s`},"medium-l":{viewport:`medium-l`}}}},args:{title:`Dialog 1`,children:(0,T.jsxs)(T.Fragment,{children:[(0,T.jsx)(M,{}),(0,T.jsx)(`br`,{}),(0,T.jsx)(Z,{number:2,children:(0,T.jsx)(Z,{number:3})})]})},play:async({canvas:e,step:t})=>{await t(`Open dialog`,async()=>{let t=e.getByTestId(`trigger`);return await k.click(t),A(()=>{D(e.getByTestId(`dialog`)).toBeVisible()})}),await t(`Open dialog 2`,async()=>{let t=e.getByTestId(`trigger-2`);return await k.click(t),A(()=>{D(e.getByTestId(`dialog-2`)).toBeVisible()})}),await t(`Open dialog 3`,async()=>{let t=e.getByTestId(`trigger-3`);return await k.click(t),A(()=>{D(e.getByTestId(`dialog-3`)).toBeVisible()})})}},I.parameters={...I.parameters,docs:{...I.parameters?.docs,source:{originalSource:`{
|
|
2
2
|
parameters: {
|
|
3
3
|
chromatic: {
|
|
4
4
|
modes: {
|
|
@@ -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"./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{n as i,t as a}from"./Button--WTUF97E.js";import{n as o,t as s}from"./Dialog-BT0Kd0KN.js";var c,l,u,d,f,p,m,h,g,_,v,y,b,x,S,C,w,T,E,D;t((()=>{c=e(n(),1),i(),o(),l=r(),{expect:u,fn:d,userEvent:f,waitFor:p}=__STORYBOOK_MODULE_TEST__,m=()=>(0,l.jsx)(`div`,{style:{width:`100%`,height:`200px`,background:`linear-gradient(to bottom, color-mix(in srgb, #e0e0e0, transparent), #e0e0e0)`}}),h=(e,t)=>{let[n,r]=(0,c.useState)(t.args.open),i=()=>{r(!1),t.args.onClose?.()};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(a,{dataset:{testid:`trigger`},onClick:()=>r(!0),children:`Open`}),(0,l.jsx)(e,{args:{...t.args,open:n,onClose:i}})]})},g={title:`Components/Dialog/Tests`,component:s,parameters:{preventIframeFromScrollingParent:!0,docs:{story:{inline:!1,height:600}}},decorators:[h],args:{open:!1,onClose:d(),children:(0,l.jsx)(m,{}),dataset:{testid:`dialog`}},play:async({canvas:e,step:t})=>{await t(`Open dialog`,async()=>{let t=e.getByTestId(`trigger`);return await f.click(t),p(()=>{u(e.getByTestId(`dialog`)).toBeVisible()})})}},_={tags:[`!autodocs`],args:{size:`xs`,title:`Extra Small Dialog`}},v={tags:[`!autodocs`],args:{size:`sm`,title:`Small Dialog`}},y={tags:[`!autodocs`],args:{size:`md`,title:`Medium Dialog`}},b={tags:[`!autodocs`],args:{size:`lg`,title:`Large Dialog`}},x={tags:[`!autodocs`],args:{size:{_:`lg`,"wide-s":`xs`},title:`Width Responsiveness`,description:`Change the window width to see the Dialog width respond to it`}},S={tags:[`!autodocs`],args:{title:`Test Close Overlay`},play:async e=>{await g.play?.(e);let{canvas:t,step:n,args:r}=e;await n(`Close dialog by clicking overlay`,async()=>{let e=t.getByTestId(`dialog-overlay`);return await f.click(e),p(async()=>(await u(t.queryByTestId(`dialog`)).not.toBeInTheDocument(),u(r.onClose).toHaveBeenCalledOnce()))})}},C={tags:[`!autodocs`],args:{title:`Test Close Focus`},play:async e=>{await g.play?.(e);let{canvas:t,step:n,args:r}=e;await n(`Close dialog by pressing space`,async()=>(await f.keyboard(`{Enter}`),p(async()=>(await u(t.queryByTestId(`dialog`)).not.toBeInTheDocument(),u(r.onClose).toHaveBeenCalledOnce()))))}},w={tags:[`!autodocs`],args:{title:`Test Close Keyboard`},play:async e=>{await g.play?.(e);let{canvas:t,step:n,args:r}=e;await n(`Close dialog using escape key`,async()=>(await f.keyboard(`{Escape}`),p(()=>{u(t.queryByTestId(`dialog`)).not.toBeInTheDocument(),u(r.onClose).toHaveBeenCalledOnce()})))}},T={tags:[`!autodocs`],args:{title:`Test Close Button`},play:async e=>{await g.play?.(e);let{canvas:t,step:n,args:r}=e;await n(`Close dialog using close button`,async()=>{let e=await t.findByLabelText(`Close`);return await f.click(e),p(async()=>(await u(t.queryByTestId(`dialog`)).not.toBeInTheDocument(),u(r.onClose).toHaveBeenCalledOnce()))})}},E={tags:[`!autodocs`],args:{title:`Test Close Button`},play:async e=>{await g.play?.(e);let{canvas:t,step:n}=e;await n(`Close dialog using close button`,async()=>{let e=await t.findByTestId(`dialog-close`);return await f.click(e),p(async()=>{await u(t.queryByTestId(`dialog`)).not.toBeInTheDocument()})})}},_.parameters={..._.parameters,docs:{..._.parameters?.docs,source:{originalSource:`{
|
|
2
2
|
tags: ['!autodocs'],
|
|
3
3
|
args: {
|
|
4
4
|
size: 'xs',
|
|
@@ -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{l as c,u as l}from"./DialogCloseButton-
|
|
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{l as c,u as l}from"./DialogCloseButton-CAY9jDgH.js";import{n as u,t as d}from"./useBreakpointMatch-CmOkxQJ1.js";var f,p,m,h=t((()=>{f=e(n(),1),i(),l(),s(),p=a(),m=({children:e,className:t,dataset:n,...i})=>{let a=(0,f.useRef)(null),s=(0,f.useRef)(null),l=[c.footer,t].filter(Boolean).join(` `),u=r(n,{preplyDsComponent:o.DialogFooter});return(0,f.useLayoutEffect)(()=>{if(!s.current||!a.current)return;let e=s.current,t=a.current,n=null,r=()=>{n?.disconnect(),n=new IntersectionObserver(([t])=>{e.toggleAttribute(`data-sticky`,!t.isIntersecting)},{root:e.closest(`[role=dialog]`),rootMargin:`0px 0px -${e.offsetHeight}px 0px`}),n.observe(t)};r();let i=new ResizeObserver(()=>{r()});return i.observe(e),()=>{n?.disconnect(),i.disconnect()}},[]),(0,p.jsxs)(p.Fragment,{children:[(0,p.jsx)(`div`,{className:c.scrollEndDetector,ref:a}),(0,p.jsx)(`footer`,{className:l,ref:s,...u,...i,children:e})]})};try{m.displayName=`DialogFooter`,m.__docgenInfo={description:``,displayName:`DialogFooter`,props:{dataset:{defaultValue:null,description:`@deprecated Pass data attributes as regular props instead
|
|
2
2
|
@example <DialogFooter data-testid="dialog-footer">...</DialogFooter>`,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}}}}}catch{}})),g,_,v,y=t((()=>{g=e(n(),1),l(),s(),i(),d(),_=a(),v=(0,g.forwardRef)(function({children:e,className:t,dataset:n,...i},a){let s=[c.buttonStack,t].filter(Boolean).join(` `),l=r(n),d=u(`narrow-l`);return(0,_.jsx)(`div`,{ref:a,className:s,"data-preply-ds-component":o.DialogButtonStack,"data-horizontal-layout":d?``:void 0,...l,...i,children:e})});try{v.displayName=`DialogButtonStack`,v.__docgenInfo={description:``,displayName:`DialogButtonStack`,props:{dataset:{defaultValue:null,description:`@deprecated Pass data attributes as regular props instead
|
|
3
3
|
@example <DialogButtonStack data-testid="dialog-button-stack">...</DialogButtonStack>`,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}}}}}catch{}})),b,x,S,C=t((()=>{b=e(n(),1),h(),y(),x=a(),S=({primaryButton:e,secondaryButton:t})=>(0,x.jsx)(m,{children:(0,x.jsxs)(v,{children:[t,(0,x.jsx)(`div`,{style:{display:`contents`},onClick:(0,b.useCallback)(e=>{e.currentTarget.closest(`[role=dialog]`)?.toggleAttribute(`data-slides-up`,!0)},[]),children:e})]})});try{S.displayName=`DialogActions`,S.__docgenInfo={description:``,displayName:`DialogActions`,props:{primaryButton:{defaultValue:null,description:`Primary action button.
|
|
4
4
|
@example <DialogActions
|
|
@@ -1,12 +1,12 @@
|
|
|
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{g as o,m as s}from"./iframe-
|
|
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{g as o,m as s}from"./iframe-BuOXI2w6.js";import{n as c,t as l}from"./dist-Cc1j9Pjk.js";import{n as u,t as d}from"./TokyoUIClose-BsMsQk2w.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{a as ee,c as g,i as te,l as ne,o as re,r as _,s as v,t as y}from"./esm-QYJ12Nr4.js";import{n as b,t as x}from"./IconButton-CQGXuX8O.js";var S,C,w,T,E,D,O,k,A,j,M,N,P,F,I,L,R,z,B=t((()=>{S=`dialog__bSS9Q`,C=`slideInUp__rqAX4`,w=`slideOutDown__gIYOK`,T=`footer__9qu1N`,E=`opacityIn__ilHLV`,D=`opacityOut__YzYTK`,O=`slideOutUp__h8Uo-`,k=`overlay__NM-kk`,A=`close__e4axJ`,j=`title__1qnWX`,M=`description__0f9xh`,N=`header__2EPvy`,P=`scrollEndDetector__gqxi-`,F=`buttonStack__i3gSV`,I=`stepControls__XBkFS`,L=`previous__0eong`,R=`next__r4NuY`,z={dialog:S,slideInUp:C,slideOutDown:w,footer:T,opacityIn:E,opacityOut:D,slideOutUp:O,overlay:k,close:A,title:j,description:M,header:N,scrollEndDetector:P,buttonStack:F,stepControls:I,previous:L,next:R}}));function ie(e){let[t,n]=(0,V.useState)(null),r=(0,V.useCallback)(e=>n(e),[]);return(0,V.useEffect)(()=>{if(!e||!t)return;let n=async()=>{let e=t.getAnimations().map(e=>e.finished);await Promise.allSettled(e);let{y:n}=t.getBoundingClientRect();t.toggleAttribute(`data-no-border-radius`,n===0)};n(),window.addEventListener(`resize`,n);let r=new ResizeObserver(n);return r.observe(t),()=>{window.removeEventListener(`resize`,n),r.disconnect()}},[e,t]),r}function ae(e){if(typeof e==`string`)return{"data-size":e};let t={};return typeof e._==`string`&&(t[`data-size`]=e._),typeof e[`narrow-l`]==`string`&&(t[`data-size-narrow-l`]=e[`narrow-l`]),typeof e[`medium-s`]==`string`&&(t[`data-size-medium-s`]=e[`medium-s`]),typeof e[`medium-l`]==`string`&&(t[`data-size-medium-l`]=e[`medium-l`]),typeof e[`wide-s`]==`string`&&(t[`data-size-wide-s`]=e[`wide-s`]),typeof e[`wide-l`]==`string`&&(t[`data-size-wide-l`]=e[`wide-l`]),t}var V,H,U,oe=t((()=>{V=e(n(),1),y(),i(),s(),l(),B(),H=a(),U=({children:e,open:t,onOpen:n,onClose:i,overlay:a=!0,size:s=`md`,mobileFullHeight:l=!1,className:u,dataset:d,...f})=>{let p=o(),m=ie(t),h=(0,V.useCallback)(e=>{e?n?.():i?.()},[i,n]),g=[z.dialog,u].filter(Boolean).join(` `),_=r(d,{preplyDsComponent:c.DialogRoot});return(0,H.jsx)(te,{open:t,onOpenChange:h,children:(0,H.jsxs)(ee,{container:p,children:[a&&(0,H.jsx)(ne,{className:z.overlay,forceRender:!0,"data-testid":`dialog-overlay`,"data-preply-ds-component":c.DialogOverlay}),(0,H.jsx)(re,{ref:m,className:g,...ae(s),"data-mobile-full-height":l?``:void 0,..._,...f,children:e})]})})};try{U.displayName=`DialogRoot`,U.__docgenInfo={description:``,displayName:`DialogRoot`,props:{open:{defaultValue:null,description:``,name:`open`,required:!0,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},onOpen:{defaultValue:null,description:``,name:`onOpen`,required:!1,type:{name:`enum`,value:[{value:`() => void`}]}},onClose:{defaultValue:null,description:``,name:`onClose`,required:!1,type:{name:`enum`,value:[{value:`() => void`}]}},size:{defaultValue:{value:`md`},description:``,name:`size`,required:!1,type:{name:`enum`,value:[{value:`"md"`},{value:`"sm"`},{value:`"xs"`},{value:`"lg"`},{value:`ResponsiveProp<DialogSize>`}]}},mobileFullHeight:{defaultValue:{value:`false`},description:``,name:`mobileFullHeight`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},overlay:{defaultValue:{value:`true`},description:``,name:`overlay`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},dataset:{defaultValue:null,description:`@deprecated Pass data attributes as regular props instead
|
|
2
2
|
@example <DialogRoot data-testid="dialog-root">...</DialogRoot>`,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}}}}}catch{}})),W,G,K,se=t((()=>{W=e(n(),1),y(),i(),B(),G=a(),K=(0,W.forwardRef)(function({children:e,className:t,dataset:n,...i},a){let o=[z.title,t].filter(Boolean).join(` `),s=r(n);return(0,G.jsx)(_,{ref:a,className:o,...s,...i,children:e})});try{K.displayName=`DialogTitle`,K.__docgenInfo={description:``,displayName:`DialogTitle`,props:{dataset:{defaultValue:null,description:`@deprecated Pass data attributes as regular props instead
|
|
3
3
|
@example <DialogTitle data-testid="dialog-title">Dialog Title</DialogTitle>`,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}}}}}catch{}})),q,J,Y,ce=t((()=>{q=e(n(),1),y(),i(),B(),J=a(),Y=(0,q.forwardRef)(function({children:e,className:t,dataset:n,...i},a){if(!e)return null;let o=[z.description,t].filter(Boolean).join(` `),s=r(n);return(0,J.jsx)(v,{ref:a,className:o,...s,...i,children:e})});try{Y.displayName=`DialogDescription`,Y.__docgenInfo={description:``,displayName:`DialogDescription`,props:{dataset:{defaultValue:null,description:`@deprecated Pass data attributes as regular props instead
|
|
4
|
-
@example <DialogDescription data-testid="dialog-description">...</DialogDescription>`,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}}}}}catch{}})),X,Z,Q,$,le=t((()=>{X=e(n(),1),y(),p(),u(),b(),m(),B(),Z=a(),Q=(0,X.forwardRef)(function({children:e,className:t},n){return(0,Z.jsx)(`div`,{className:[z.close,t].filter(Boolean).join(` `),children:(0,Z.jsx)(g,{ref:n,render:e??(0,Z.jsx)($,{})})})}),$=(0,X.forwardRef)(function(e,t){let{formatMessage:n}=f();return(0,Z.jsx)(x,{ref:t,size:`small`,variant:`ghost`,dataset:{testid:`dialog-close`},assistiveText:n(h.close),svg:d,...e})});try{Q.displayName=`DialogCloseButton`,Q.__docgenInfo={description:"The DialogCloseButton is a container which defaults to:\n1. Displaying an `IconButton` child with a `TokyoUIClose` icon, which can be\n overridden with the `children` prop.\n2. Being absolutely positioned at the top right corner of the dialog, which\n can be overridden with the `className` prop.",displayName:`DialogCloseButton`,props:{className:{defaultValue:null,description:``,name:`className`,required:!1,type:{name:`enum`,value:[{value:`string`}]}}}}}catch{}try{$.displayName=`DialogDefaultCloseButton`,$.__docgenInfo={description:``,displayName:`DialogDefaultCloseButton`,props:{
|
|
4
|
+
@example <DialogDescription data-testid="dialog-description">...</DialogDescription>`,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}}}}}catch{}})),X,Z,Q,$,le=t((()=>{X=e(n(),1),y(),p(),u(),b(),m(),B(),Z=a(),Q=(0,X.forwardRef)(function({children:e,className:t},n){return(0,Z.jsx)(`div`,{className:[z.close,t].filter(Boolean).join(` `),children:(0,Z.jsx)(g,{ref:n,render:e??(0,Z.jsx)($,{})})})}),$=(0,X.forwardRef)(function(e,t){let{formatMessage:n}=f();return(0,Z.jsx)(x,{ref:t,size:`small`,variant:`ghost`,dataset:{testid:`dialog-close`},assistiveText:n(h.close),svg:d,...e})});try{Q.displayName=`DialogCloseButton`,Q.__docgenInfo={description:"The DialogCloseButton is a container which defaults to:\n1. Displaying an `IconButton` child with a `TokyoUIClose` icon, which can be\n overridden with the `children` prop.\n2. Being absolutely positioned at the top right corner of the dialog, which\n can be overridden with the `className` prop.",displayName:`DialogCloseButton`,props:{className:{defaultValue:null,description:``,name:`className`,required:!1,type:{name:`enum`,value:[{value:`string`}]}}}}}catch{}try{$.displayName=`DialogDefaultCloseButton`,$.__docgenInfo={description:``,displayName:`DialogDefaultCloseButton`,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`}]}},onKeyUp:{defaultValue:null,description:``,name:`onKeyUp`,required:!1,type:{name:`enum`,value:[{value:`KeyboardEventHandler`}]}},onKeyDown:{defaultValue:null,description:``,name:`onKeyDown`,required:!1,type:{name:`enum`,value:[{value:`KeyboardEventHandler`}]}},disabled:{defaultValue:null,description:``,name:`disabled`,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`}]}},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"`}]}},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`}]}},assistiveText:{defaultValue:null,description:``,name:`assistiveText`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},as:{defaultValue:null,description:`Custom element to render the button.
|
|
5
5
|
|
|
6
6
|
Allows rendering the button using a different React element or component.
|
|
7
7
|
This is particularly useful for integrating with router libraries like \`react-router\` or \`next/router\`.
|
|
8
8
|
@example // Render as a react router link component
|
|
9
9
|
import { Link } from 'react-router-dom';
|
|
10
10
|
|
|
11
|
-
<ButtonBase as={<Link to="/home" />} />`,name:`as`,required:!1,type:{name:`enum`,value:[{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}},url:{defaultValue:null,description:"@deprecated Use `href` instead",name:`url`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},
|
|
11
|
+
<ButtonBase as={<Link to="/home" />} />`,name:`as`,required:!1,type:{name:`enum`,value:[{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}},url:{defaultValue:null,description:"@deprecated Use `href` instead",name:`url`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},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`}]}},size:{defaultValue:null,description:``,name:`size`,required:!1,type:{name:`enum`,value:[{value:`"small"`},{value:`"large"`},{value:`"medium"`},{value:`ResponsiveProp<ButtonSize>`}]}},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`}]}},selected:{defaultValue:null,description:`Used only for classroom and ghost variants`,name:`selected`,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.
|
|
12
12
|
@ignore`,name:`dsInternalSimulation`,required:!1,type:{name:`enum`,value:[{value:`"hover"`},{value:`"focus"`},{value:`"active"`}]}}}}}catch{}}));export{K as a,oe as c,ce as i,z as l,le as n,se as o,Y as r,U as s,Q as t,B as u};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{ht as r,t as i}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-Dqr2b6tP.js";import{n as f,t as p}from"./TokyoUIClose-BsMsQk2w.js";import{i as m,r as h}from"./lib-8ue2PVWI.js";import{n as g,t as _}from"./shared-strings-BFfhcoGp.js";import{n as v,t as y}from"./VisuallyHidden-CpMYtDeS.js";import{n as b,t as x}from"./useControllableState-B6dCOM10.js";import{a as S,d as C,i as w,l as T,n as E,o as D,r as O,s as k,t as A,u as j}from"./createRequiredContext-BQNdOBzE.js";var M,N,P,F,I,L,R=t((()=>{M=e(n(),1),x(),j(),f(),v(),h(),g(),T(),i(),s(),c(),u(),E(),N=a(),[P,F]=A(`DismissibleChips`),I=(0,M.forwardRef)(function({items:e,children:t,orientation:n,"aria-label":i,"aria-controls":a,value:s,onValueChange:c,defaultValue:u,dataset:d,...f},p){let[m,h]=b({value:s,onValueChange:c,defaultValue:u??[]}),g=e=>{h(m.filter(t=>t!==e))},_=e?e.map(({label:e,value:t,...n})=>(0,N.jsx)(L,{value:t,...n,children:e},t)):t;return(0,N.jsx)(P,{value:{values:m,onRemove:g,ariaControls:a},children:(0,N.jsx)(k,{orientation:n,children:(0,N.jsx)(D,{...l(f),ref:p,orientation:n,"aria-label":i,...r(d,{preplyDsComponent:o.DismissibleChips}),children:_})})})}),L=(0,M.forwardRef)(function({value:e,children:t,icon:n,countryFlagCode:i,disabled:a,counter:s,dataset:c,...u},f){let{values:h,onRemove:g,ariaControls:v}=F(),b=C(),x=()=>{g(e),b?.focusNext({wrap:!0})},T=e=>{switch(e.key){case`Delete`:case`Backspace`:x();break}};return h.includes(e)?(0,N.jsx)(S,{children:(0,N.jsxs)(O,{...l(u),ref:f,variant:`dismissible`,onClick:x,onKeyDown:T,icon:n,countryFlagCode:i,disabled:a,"aria-controls":v,...r(c,{preplyDsComponent:o.DismissibleChipsItem}),children:[(0,N.jsx)(y,{children:(0,N.jsx)(m,{..._.remove})}),(0,N.jsx)(w,{counter:s,children:t}),(0,N.jsx)(d,{svg:p})]})}):null});try{I.displayName=`DismissibleChips`,I.__docgenInfo={description:`A chips component for displaying dismissible/removable items.`,displayName:`DismissibleChips`,props:{dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},"aria-label":{defaultValue:null,description:`Accessible label for the chips group. Required for screen reader users`,name:`aria-label`,required:!0,type:{name:`string`}},value:{defaultValue:null,description:`Current value of the chips. When provided, the component operates in controlled mode`,name:`value`,required:!1,type:{name:`enum`,value:[{value:`T[]`}]}},defaultValue:{defaultValue:null,description:"Default value for uncontrolled usage. Will be ignored if `value` is provided",name:`defaultValue`,required:!1,type:{name:`enum`,value:[{value:`T[]`}]}},onValueChange:{defaultValue:null,description:`Callback fired when the value changes. Receives the new value as an argument`,name:`onValueChange`,required:!1,type:{name:`enum`,value:[{value:`(value: T[]) => void`}]}},"aria-controls":{defaultValue:null,description:"If the chips control other elements on the page, use `aria-controls` with the target element's ID.",name:`aria-controls`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},orientation:{defaultValue:{value:`'horizontal'`},description:`Layout orientation of the chips group.`,name:`orientation`,required:!1,type:{name:`enum`,value:[{value:`"horizontal"`},{value:`"vertical"`}]}},items:{defaultValue:null,description:``,name:`items`,required:!1,type:{name:`enum`,value:[{value:`(Omit<ChipsItemProps, "children" | "value"> & { value: NonNullable<T>; label: ReactNode; })[]`}]}},ref:{defaultValue:null,description:``,name:`ref`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`(instance: HTMLUListElement | null) => void`},{value:`RefObject<HTMLUListElement>`}]}}}}}catch{}try{L.displayName=`DismissibleChipsItem`,L.__docgenInfo={description:`Individual dismissible chip item for use within DismissibleChips.`,displayName:`DismissibleChipsItem`,props:{icon:{defaultValue:null,description:``,name:`icon`,required:!1,type:{name:`enum`,value:[{value:`ComponentClass<SVGAttributes<SVGElement>, any>`},{value:`FunctionComponent<SVGAttributes<SVGElement>>`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}},countryFlagCode:{defaultValue:null,description:``,name:`countryFlagCode`,required:!1,type:{name:`enum`,value:[{value:`"id"`},{value:`"as"`},{value:`"br"`},{value:`"hr"`},{value:`"li"`},{value:`"td"`},{value:`"th"`},{value:`"tr"`},{value:`"is"`},{value:`"at"`},{value:`"af"`},{value:`"ax"`},{value:`"al"`},{value:`"dz"`},{value:`"ad"`},{value:`"ao"`},{value:`"ai"`},{value:`"aq"`},{value:`"ag"`},{value:`"ar"`},{value:`"am"`},{value:`"aw"`},{value:`"sh-ac"`},{value:`"asean"`},{value:`"au"`},{value:`"az"`},{value:`"bs"`},{value:`"bh"`},{value:`"bd"`},{value:`"bb"`},{value:`"es-pv"`},{value:`"by"`},{value:`"be"`},{value:`"bz"`},{value:`"bj"`},{value:`"bm"`},{value:`"bt"`},{value:`"bo"`},{value:`"bq"`},{value:`"ba"`},{value:`"bw"`},{value:`"bv"`},{value:`"io"`},{value:`"bn"`},{value:`"bg"`},{value:`"bf"`},{value:`"bi"`},{value:`"cv"`},{value:`"kh"`},{value:`"cm"`},{value:`"ca"`},{value:`"ic"`},{value:`"es-ct"`},{value:`"ky"`},{value:`"cf"`},{value:`"cefta"`},{value:`"cl"`},{value:`"cn"`},{value:`"cx"`},{value:`"cp"`},{value:`"cc"`},{value:`"co"`},{value:`"km"`},{value:`"ck"`},{value:`"cr"`},{value:`"cu"`},{value:`"cw"`},{value:`"cy"`},{value:`"cz"`},{value:`"ci"`},{value:`"cd"`},{value:`"dk"`},{value:`"dg"`},{value:`"dj"`},{value:`"dm"`},{value:`"do"`},{value:`"eac"`},{value:`"ec"`},{value:`"eg"`},{value:`"sv"`},{value:`"gb-eng"`},{value:`"gq"`},{value:`"er"`},{value:`"ee"`},{value:`"sz"`},{value:`"et"`},{value:`"eu"`},{value:`"fk"`},{value:`"fo"`},{value:`"fm"`},{value:`"fj"`},{value:`"fi"`},{value:`"fr"`},{value:`"gf"`},{value:`"pf"`},{value:`"tf"`},{value:`"ga"`},{value:`"es-ga"`},{value:`"gm"`},{value:`"ge"`},{value:`"de"`},{value:`"gh"`},{value:`"gi"`},{value:`"gr"`},{value:`"gl"`},{value:`"gd"`},{value:`"gp"`},{value:`"gu"`},{value:`"gt"`},{value:`"gg"`},{value:`"gn"`},{value:`"gw"`},{value:`"gy"`},{value:`"ht"`},{value:`"hm"`},{value:`"va"`},{value:`"hn"`},{value:`"hk"`},{value:`"hu"`},{value:`"in"`},{value:`"ir"`},{value:`"iq"`},{value:`"ie"`},{value:`"im"`},{value:`"il"`},{value:`"it"`},{value:`"jm"`},{value:`"jp"`},{value:`"je"`},{value:`"jo"`},{value:`"kz"`},{value:`"ke"`},{value:`"ki"`},{value:`"xk"`},{value:`"kw"`},{value:`"kg"`},{value:`"la"`},{value:`"lv"`},{value:`"arab"`},{value:`"lb"`},{value:`"ls"`},{value:`"lr"`},{value:`"ly"`},{value:`"lt"`},{value:`"lu"`},{value:`"mo"`},{value:`"mg"`},{value:`"mw"`},{value:`"my"`},{value:`"mv"`},{value:`"ml"`},{value:`"mt"`},{value:`"mh"`},{value:`"mq"`},{value:`"mr"`},{value:`"mu"`},{value:`"yt"`},{value:`"mx"`},{value:`"md"`},{value:`"mc"`},{value:`"mn"`},{value:`"me"`},{value:`"ms"`},{value:`"ma"`},{value:`"mz"`},{value:`"mm"`},{value:`"na"`},{value:`"nr"`},{value:`"np"`},{value:`"nl"`},{value:`"nc"`},{value:`"nz"`},{value:`"ni"`},{value:`"ne"`},{value:`"ng"`},{value:`"nu"`},{value:`"nf"`},{value:`"kp"`},{value:`"mk"`},{value:`"gb-nir"`},{value:`"mp"`},{value:`"no"`},{value:`"om"`},{value:`"pc"`},{value:`"pk"`},{value:`"pw"`},{value:`"pa"`},{value:`"pg"`},{value:`"py"`},{value:`"pe"`},{value:`"ph"`},{value:`"pn"`},{value:`"pl"`},{value:`"pt"`},{value:`"pr"`},{value:`"qa"`},{value:`"cg"`},{value:`"ro"`},{value:`"ru"`},{value:`"rw"`},{value:`"re"`},{value:`"bl"`},{value:`"sh-hl"`},{value:`"sh"`},{value:`"kn"`},{value:`"lc"`},{value:`"mf"`},{value:`"pm"`},{value:`"vc"`},{value:`"ws"`},{value:`"sm"`},{value:`"st"`},{value:`"sa"`},{value:`"gb-sct"`},{value:`"sn"`},{value:`"rs"`},{value:`"sc"`},{value:`"sl"`},{value:`"sg"`},{value:`"sx"`},{value:`"sk"`},{value:`"si"`},{value:`"sb"`},{value:`"so"`},{value:`"za"`},{value:`"gs"`},{value:`"kr"`},{value:`"ss"`},{value:`"es"`},{value:`"lk"`},{value:`"ps"`},{value:`"sd"`},{value:`"sr"`},{value:`"sj"`},{value:`"se"`},{value:`"ch"`},{value:`"sy"`},{value:`"tw"`},{value:`"tj"`},{value:`"tz"`},{value:`"tl"`},{value:`"tg"`},{value:`"tk"`},{value:`"to"`},{value:`"tt"`},{value:`"sh-ta"`},{value:`"tn"`},{value:`"tm"`},{value:`"tc"`},{value:`"tv"`},{value:`"ug"`},{value:`"ua"`},{value:`"ae"`},{value:`"gb"`},{value:`"un"`},{value:`"um"`},{value:`"us"`},{value:`"uy"`},{value:`"uz"`},{value:`"vu"`},{value:`"ve"`},{value:`"vn"`},{value:`"vg"`},{value:`"vi"`},{value:`"gb-wls"`},{value:`"wf"`},{value:`"eh"`},{value:`"ye"`},{value:`"zm"`},{value:`"zw"`}]}},value:{defaultValue:null,description:`Unique identifier for this chip. Used for selection tracking`,name:`value`,required:!0,type:{name:`string`}},children:{defaultValue:null,description:`Content to display inside the chip`,name:`children`,required:!0,type:{name:`enum`,value:[{value:`undefined`},{value:`null`},{value:`string`},{value:`number`},{value:`false`},{value:`true`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`},{value:`Iterable<ReactNode>`},{value:`ReactPortal`}]}},counter:{defaultValue:null,description:`Optional numeric counter to display alongside the chip label`,name:`counter`,required:!1,type:{name:`enum`,value:[{value:`number`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}}}}}catch{}}));export{L as n,R as r,I as t};
|
package/dist/assets/{DismissibleChips.stories-BbLkTYXP.js → DismissibleChips.stories-D8vGzcJU.js}
RENAMED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Text-Bj49UVGS.js";import{n as o,t as s}from"./Heading-Xmy4HTvU.js";import{n as c,t as l}from"./Button-DagS5hxP.js";import{r as ee,t as te}from"./lib-8ue2PVWI.js";import{r as ne,t as re}from"./styled-components.browser.esm-BF2I7YPU.js";import{n as u,r as ie,t as d}from"./DismissibleChips-QUmF1DlO.js";import{n as f,t as p}from"./LayoutFlex-CpktYRVX.js";import{n as ae,t as oe}from"./Link-DLL8OonN.js";import{n as m,t as h}from"./Tooltip-DCzQmBi_.js";import{a as g,c as _,i as v,n as y,o as b,r as x,s as S,t as se}from"./TokyoUIAvailability7LateNight-Bho17X1G.js";import{n as ce,t as le}from"./TokyoUIEmojiFrowning-rSnD4TX2.js";var C,w,T,E,D,O,k,A,j,M,N,P,F,I,L,R,z,B,V,H,U,W,G,K,q,J,Y,X,Z,Q,$;t((()=>{C=e(n(),1),ie(),_(),b(),v(),y(),ce(),ee(),f(),i(),ae(),o(),ne(),c(),m(),w=r(),{expect:T,within:E,fn:D,userEvent:O,resetAllMocks:k,waitFor:A}=__STORYBOOK_MODULE_TEST__,j={title:`components/Chips/DismissibleChips`,component:d,subcomponents:{DismissibleChipsItem:u},parameters:{layout:`padded`,remountable:!0},args:{"aria-label":`Selected skills`,defaultValue:[`vocabulary`,`speaking`,`listening`,`reading`],onValueChange:D(),items:[{value:`vocabulary`,label:`Vocabulary`},{value:`speaking`,label:`Speaking`},{value:`listening`,label:`Listening`},{value:`reading`,label:`Reading`}]},decorators:[function(e,{parameters:t}){let[n,r]=(0,C.useState)(0);return t.remountable?(0,w.jsxs)(p,{gap:`12`,justifyContent:`space-between`,children:[(0,w.jsx)(e,{},n),(0,w.jsx)(l,{variant:`ghost`,size:`small`,onClick:()=>r(e=>e+1),dataset:{testid:`reset`},children:`Reset story`})]}):(0,w.jsx)(e,{})}],beforeEach:()=>()=>{k()}},M={play:async({canvasElement:e,step:t,args:n})=>{let r=E(e),i=r.getByRole(`button`,{name:/Remove Vocabulary/}),a=r.getByRole(`button`,{name:/Remove Speaking/}),o=r.getByRole(`button`,{name:/Remove Listening/}),s=r.getByRole(`button`,{name:/Remove Reading/});await t(`Render chips with default values`,async()=>{T(i).toBeVisible(),T(a).toBeVisible(),T(o).toBeVisible(),T(s).toBeVisible()}),await t(`Chip should have accessible name`,async()=>{T(i).toHaveAccessibleName(`Remove Vocabulary`)}),await t(`Dismiss chip by clicking dismiss button`,async()=>{await O.click(i),T(n.onValueChange).toHaveBeenCalledWith([`speaking`,`listening`,`reading`]),T(i).not.toBeVisible(),T(a).toBeVisible(),T(o).toBeVisible(),T(s).toBeVisible()}),await t(`Dismiss another chip`,async()=>{await O.click(a),T(n.onValueChange).toHaveBeenCalledWith([`listening`,`reading`]),T(i).not.toBeVisible(),T(a).not.toBeVisible(),T(o).toBeVisible(),T(s).toBeVisible()}),await O.click(r.getByTestId(`reset`)),await O.click(e)}},P={render:function({defaultValue:e,...t}){let[n,r]=(0,C.useState)(e);N=r;let i=e=>{r(e),t.onValueChange?.(e)};return(0,w.jsx)(d,{...t,value:n,onValueChange:i})},play:async({canvasElement:e,step:t,args:n})=>{let r=E(e),i=r.getByRole(`button`,{name:/Remove Vocabulary/}),a=r.getByRole(`button`,{name:/Remove Speaking/}),o=r.getByRole(`button`,{name:/Remove Listening/}),s=r.getByRole(`button`,{name:/Remove Reading/});await t(`Render chips with default values`,async()=>{T(i).toBeVisible(),T(a).toBeVisible(),T(o).toBeVisible(),T(s).toBeVisible()}),await t(`Dismiss chip by clicking dismiss button`,async()=>{await O.click(i),T(n.onValueChange).toHaveBeenCalledWith([`speaking`,`listening`,`reading`]),T(i).not.toBeVisible(),T(a).toBeVisible(),T(o).toBeVisible(),T(s).toBeVisible()}),await t(`Change the value externally`,async()=>{k(),N([`listening`,`reading`]),await A(()=>{T(n.onValueChange).not.toHaveBeenCalled(),T(i).not.toBeVisible(),T(a).not.toBeVisible(),T(o).toBeVisible(),T(s).toBeVisible()})}),await O.click(r.getByTestId(`reset`)),await O.click(e)}},F={args:{items:[{value:`vocabulary`,label:`Vocabulary`},{value:`speaking`,label:`Speaking`,disabled:!0},{value:`listening`,label:`Listening`,disabled:!0},{value:`reading`,label:`Reading`}]},play:async({canvasElement:e,step:t,args:n})=>{let r=E(e).getByRole(`button`,{name:/Remove Speaking/});await t(`Disabled chip must have disabled attribute`,async()=>{T(r).toBeDisabled()}),await t(`Disabled chip must not be clickable`,async()=>{await O.click(r),T(n.onValueChange).not.toHaveBeenCalled(),T(r).toBeVisible()})}},I={args:{"aria-label":`Selected availabilities`,defaultValue:[`morning`,`afternoon`,`evening`],items:[{value:`morning`,label:`Morning`,icon:(0,w.jsx)(S,{})},{value:`afternoon`,label:`Afternoon`,icon:(0,w.jsx)(g,{})},{value:`evening`,label:`Evening`,icon:(0,w.jsx)(x,{})}]},play:async({canvasElement:e,step:t})=>{let n=E(E(e).getByRole(`button`,{name:/Remove Morning/})).getByTestId(`chip-icon`);await t("Chip should render an icon when `icon` prop is passed",async()=>{T(n).toBeVisible()})}},L={args:{"aria-label":`Selected languages`,defaultValue:[`english`],items:[{value:`english`,label:`English`,counter:1247},{value:`spanish`,label:`Spanish`,counter:892},{value:`french`,label:`French`,counter:534},{value:`german`,label:`German`,counter:421},{value:`italian`,label:`Italian`,counter:287},{value:`portuguese`,label:`Portuguese`,counter:156}]},play:async({canvasElement:e,step:t})=>{let n=E(E(e).getByRole(`button`,{name:/Remove English/})).getByTestId(`chip-counter`);await t("Chip should render a counter when `counter` prop is passed",async()=>{T(n).toBeVisible(),T(n).toHaveTextContent(`1247`)})}},R={args:{"aria-label":`Selected countries`,defaultValue:[`ua`,`gb`,`it`,`es`,`au`,`br`,`eg`],items:[{value:`ua`,label:`Ukraine`,countryFlagCode:`ua`},{value:`gb`,label:`United Kingdom`,countryFlagCode:`gb`},{value:`it`,label:`Italy`,countryFlagCode:`it`},{value:`es`,label:`Spain`,countryFlagCode:`es`},{value:`au`,label:`Australia`,countryFlagCode:`au`},{value:`br`,label:`Brazil`,countryFlagCode:`br`},{value:`eg`,label:`Egypt`,countryFlagCode:`eg`}]},play:async({canvasElement:e,step:t})=>{let n=E(E(e).getByRole(`button`,{name:/Remove Ukraine/})).getByTestId(`chip-country-flag`);await t("Chip should render a flag when `flagCountryCode` prop is passed",async()=>{T(n).toBeVisible()})}},z={args:{"aria-label":`Fancy chips`,defaultValue:[`counter+icon`,`counter+flag`,`icon+flag`],items:[{value:`counter+icon`,label:`Icon + Counter`,icon:(0,w.jsx)(S,{}),counter:1247},{value:`counter+flag`,label:`Flag + Counter`,countryFlagCode:`ua`,counter:1247},{value:`icon+flag`,label:`Icon + Flag`,icon:(0,w.jsx)(S,{}),countryFlagCode:`ua`}]},play:async({canvasElement:e})=>{let t=E(E(e).getByRole(`button`,{name:`Remove Icon + Flag`}));T(t.getByTestId(`chip-icon`)).toBeVisible(),T(t.queryByTestId(`chip-country-flag`)).not.toBeInTheDocument()}},B=[`2025-08-15T10:00Z`,`2025-08-16T12:00Z`,`2025-08-17T14:00Z`],V={args:{orientation:`vertical`,"aria-label":`Selected time slots`,defaultValue:B,items:B.map(e=>({value:e,label:(0,w.jsx)(te,{weekday:`short`,day:`numeric`,month:`short`,hour:`2-digit`,minute:`2-digit`,value:e}),dataset:{testid:e}}))},decorators:[e=>(0,w.jsx)(`div`,{style:{width:300,margin:`0 auto`},children:(0,w.jsx)(e,{})})],play:async({canvasElement:e,step:t})=>{let n=E(e),r=n.getByTestId(B[0]),i=n.getByTestId(B[1]),a=n.getByTestId(B[2]);await t(`Focus first chip`,async()=>{r.focus()}),await t(`Arrow down should focus second chip`,async()=>{await O.keyboard(`{ArrowDown}`),T(i).toHaveFocus()}),await t(`Arrow down should focus third chip`,async()=>{await O.keyboard(`{ArrowDown}`),T(a).toHaveFocus()}),await t(`Arrow down should focus first chip`,async()=>{await O.keyboard(`{ArrowDown}`),T(r).toHaveFocus()}),await t(`Arrow up should focus third chip`,async()=>{await O.keyboard(`{ArrowUp}`),T(a).toHaveFocus()})}},H={render:e=>(0,w.jsxs)(p,{gap:`12`,children:[(0,w.jsx)(d,{...e}),(0,w.jsx)(l,{variant:`tertiary`,size:`small`,onClick:()=>alert(`Show all`),children:`Show all`})]})},U=[{value:`vocabulary`,label:`Vocabulary`},{value:`speaking`,label:`Speaking`},{value:`listening`,label:`Listening`},{value:`reading`,label:`Reading`},{value:`writing`,label:`Writing`},{value:`grammar`,label:`Grammar`}],W=[{value:`monday`,label:`Monday`},{value:`tuesday`,label:`Tuesday`},{value:`wednesday`,label:`Wednesday`},{value:`thursday`,label:`Thursday`},{value:`friday`,label:`Friday`},{value:`saturday`,label:`Saturday`},{value:`sunday`,label:`Sunday`}],G=[{value:`morning`,label:`Morning (6-12)`,icon:(0,w.jsx)(S,{})},{value:`afternoon`,label:`Afternoon (12-18)`,icon:(0,w.jsx)(g,{})},{value:`evening`,label:`Evening (18-0)`,icon:(0,w.jsx)(x,{})},{value:`night`,label:`Night (0-6)`,icon:(0,w.jsx)(se,{})}],K={render:function(e){return(0,w.jsxs)(p,{direction:`column`,alignItems:`stretch`,gap:`64`,children:[(0,w.jsxs)(p,{direction:`column`,alignItems:`stretch`,gap:`16`,children:[(0,w.jsx)(a,{variant:`large-semibold`,children:`What skills do you want to focus on?`}),(0,w.jsx)(d,{"aria-label":`Selected skills`,defaultValue:[`vocabulary`,`speaking`,`listening`],items:U})]}),(0,w.jsxs)(p,{direction:`column`,alignItems:`stretch`,gap:`16`,children:[(0,w.jsx)(a,{variant:`large-semibold`,children:`Which days work best for you?`}),(0,w.jsx)(d,{"aria-label":`Selected days`,defaultValue:[`monday`,`wednesday`,`friday`],items:W})]}),(0,w.jsxs)(p,{direction:`column`,alignItems:`stretch`,gap:`16`,children:[(0,w.jsx)(a,{variant:`large-semibold`,children:`What times of day work for you?`}),(0,w.jsx)(d,{"aria-label":`Selected times`,defaultValue:[`morning`,`afternoon`],items:G})]})]})},play:async({canvasElement:e,step:t})=>{let n=E(e),r=n.getByRole(`button`,{name:/Remove Vocabulary/}),i=n.getByRole(`button`,{name:/Remove Speaking/}),a=n.getByRole(`button`,{name:/Remove Listening/}),o=n.getByRole(`button`,{name:/Remove Monday/});await t(`Tab once to enter the component`,async()=>{await O.tab(),T(r).toHaveFocus()}),await t(`Next tab should focus second chips group`,async()=>{await O.tab(),T(o).toHaveFocus()}),await t(`Shift+Tab should focus first chips group again`,async()=>{await O.tab({shift:!0}),T(r).toHaveFocus()}),await t(`Right arrow should focus next chip in the group`,async()=>{await O.keyboard(`{ArrowRight}`),T(i).toHaveFocus()}),await t(`Left arrow should focus previous chip in the group`,async()=>{await O.keyboard(`{ArrowLeft}`),T(r).toHaveFocus()}),await t(`Left arrow should focus last chip if first chip is focused`,async()=>{await O.keyboard(`{ArrowLeft}`),T(a).toHaveFocus()}),await t(`Right arrow should focus first chip if last chip is focused`,async()=>{await O.keyboard(`{ArrowRight}`),T(r).toHaveFocus()}),await t(`Focus last chip`,async()=>{await O.keyboard(`{ArrowLeft}`)}),await t(`Tab to the next group`,async()=>{await O.tab()}),await t(`Shift+Tab to return to the first group, the last focused chip should be focused`,async()=>{await O.tab({shift:!0}),T(a).toHaveFocus()})}},q=re.ul`
|
|
1
|
+
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Text-Cy08WP3t.js";import{n as o,t as s}from"./Heading-B3jb_-J8.js";import{n as c,t as l}from"./Button--WTUF97E.js";import{r as ee,t as te}from"./lib-8ue2PVWI.js";import{r as ne,t as re}from"./styled-components.browser.esm-BF2I7YPU.js";import{n as u,r as ie,t as d}from"./DismissibleChips-CMpz1ljr.js";import{n as f,t as p}from"./LayoutFlex-BlWwmFhv.js";import{n as ae,t as oe}from"./Link-DbeaGxmu.js";import{n as m,t as h}from"./Tooltip-BKkZoXDV.js";import{a as g,c as _,i as v,n as y,o as b,r as x,s as S,t as se}from"./TokyoUIAvailability7LateNight-Bho17X1G.js";import{n as ce,t as le}from"./TokyoUIEmojiFrowning-rSnD4TX2.js";var C,w,T,E,D,O,k,A,j,M,N,P,F,I,L,R,z,B,V,H,U,W,G,K,q,J,Y,X,Z,Q,$;t((()=>{C=e(n(),1),ie(),_(),b(),v(),y(),ce(),ee(),f(),i(),ae(),o(),ne(),c(),m(),w=r(),{expect:T,within:E,fn:D,userEvent:O,resetAllMocks:k,waitFor:A}=__STORYBOOK_MODULE_TEST__,j={title:`components/Chips/DismissibleChips`,component:d,subcomponents:{DismissibleChipsItem:u},parameters:{layout:`padded`,remountable:!0},args:{"aria-label":`Selected skills`,defaultValue:[`vocabulary`,`speaking`,`listening`,`reading`],onValueChange:D(),items:[{value:`vocabulary`,label:`Vocabulary`},{value:`speaking`,label:`Speaking`},{value:`listening`,label:`Listening`},{value:`reading`,label:`Reading`}]},decorators:[function(e,{parameters:t}){let[n,r]=(0,C.useState)(0);return t.remountable?(0,w.jsxs)(p,{gap:`12`,justifyContent:`space-between`,children:[(0,w.jsx)(e,{},n),(0,w.jsx)(l,{variant:`ghost`,size:`small`,onClick:()=>r(e=>e+1),dataset:{testid:`reset`},children:`Reset story`})]}):(0,w.jsx)(e,{})}],beforeEach:()=>()=>{k()}},M={play:async({canvasElement:e,step:t,args:n})=>{let r=E(e),i=r.getByRole(`button`,{name:/Remove Vocabulary/}),a=r.getByRole(`button`,{name:/Remove Speaking/}),o=r.getByRole(`button`,{name:/Remove Listening/}),s=r.getByRole(`button`,{name:/Remove Reading/});await t(`Render chips with default values`,async()=>{T(i).toBeVisible(),T(a).toBeVisible(),T(o).toBeVisible(),T(s).toBeVisible()}),await t(`Chip should have accessible name`,async()=>{T(i).toHaveAccessibleName(`Remove Vocabulary`)}),await t(`Dismiss chip by clicking dismiss button`,async()=>{await O.click(i),T(n.onValueChange).toHaveBeenCalledWith([`speaking`,`listening`,`reading`]),T(i).not.toBeVisible(),T(a).toBeVisible(),T(o).toBeVisible(),T(s).toBeVisible()}),await t(`Dismiss another chip`,async()=>{await O.click(a),T(n.onValueChange).toHaveBeenCalledWith([`listening`,`reading`]),T(i).not.toBeVisible(),T(a).not.toBeVisible(),T(o).toBeVisible(),T(s).toBeVisible()}),await O.click(r.getByTestId(`reset`)),await O.click(e)}},P={render:function({defaultValue:e,...t}){let[n,r]=(0,C.useState)(e);N=r;let i=e=>{r(e),t.onValueChange?.(e)};return(0,w.jsx)(d,{...t,value:n,onValueChange:i})},play:async({canvasElement:e,step:t,args:n})=>{let r=E(e),i=r.getByRole(`button`,{name:/Remove Vocabulary/}),a=r.getByRole(`button`,{name:/Remove Speaking/}),o=r.getByRole(`button`,{name:/Remove Listening/}),s=r.getByRole(`button`,{name:/Remove Reading/});await t(`Render chips with default values`,async()=>{T(i).toBeVisible(),T(a).toBeVisible(),T(o).toBeVisible(),T(s).toBeVisible()}),await t(`Dismiss chip by clicking dismiss button`,async()=>{await O.click(i),T(n.onValueChange).toHaveBeenCalledWith([`speaking`,`listening`,`reading`]),T(i).not.toBeVisible(),T(a).toBeVisible(),T(o).toBeVisible(),T(s).toBeVisible()}),await t(`Change the value externally`,async()=>{k(),N([`listening`,`reading`]),await A(()=>{T(n.onValueChange).not.toHaveBeenCalled(),T(i).not.toBeVisible(),T(a).not.toBeVisible(),T(o).toBeVisible(),T(s).toBeVisible()})}),await O.click(r.getByTestId(`reset`)),await O.click(e)}},F={args:{items:[{value:`vocabulary`,label:`Vocabulary`},{value:`speaking`,label:`Speaking`,disabled:!0},{value:`listening`,label:`Listening`,disabled:!0},{value:`reading`,label:`Reading`}]},play:async({canvasElement:e,step:t,args:n})=>{let r=E(e).getByRole(`button`,{name:/Remove Speaking/});await t(`Disabled chip must have disabled attribute`,async()=>{T(r).toBeDisabled()}),await t(`Disabled chip must not be clickable`,async()=>{await O.click(r),T(n.onValueChange).not.toHaveBeenCalled(),T(r).toBeVisible()})}},I={args:{"aria-label":`Selected availabilities`,defaultValue:[`morning`,`afternoon`,`evening`],items:[{value:`morning`,label:`Morning`,icon:(0,w.jsx)(S,{})},{value:`afternoon`,label:`Afternoon`,icon:(0,w.jsx)(g,{})},{value:`evening`,label:`Evening`,icon:(0,w.jsx)(x,{})}]},play:async({canvasElement:e,step:t})=>{let n=E(E(e).getByRole(`button`,{name:/Remove Morning/})).getByTestId(`chip-icon`);await t("Chip should render an icon when `icon` prop is passed",async()=>{T(n).toBeVisible()})}},L={args:{"aria-label":`Selected languages`,defaultValue:[`english`],items:[{value:`english`,label:`English`,counter:1247},{value:`spanish`,label:`Spanish`,counter:892},{value:`french`,label:`French`,counter:534},{value:`german`,label:`German`,counter:421},{value:`italian`,label:`Italian`,counter:287},{value:`portuguese`,label:`Portuguese`,counter:156}]},play:async({canvasElement:e,step:t})=>{let n=E(E(e).getByRole(`button`,{name:/Remove English/})).getByTestId(`chip-counter`);await t("Chip should render a counter when `counter` prop is passed",async()=>{T(n).toBeVisible(),T(n).toHaveTextContent(`1247`)})}},R={args:{"aria-label":`Selected countries`,defaultValue:[`ua`,`gb`,`it`,`es`,`au`,`br`,`eg`],items:[{value:`ua`,label:`Ukraine`,countryFlagCode:`ua`},{value:`gb`,label:`United Kingdom`,countryFlagCode:`gb`},{value:`it`,label:`Italy`,countryFlagCode:`it`},{value:`es`,label:`Spain`,countryFlagCode:`es`},{value:`au`,label:`Australia`,countryFlagCode:`au`},{value:`br`,label:`Brazil`,countryFlagCode:`br`},{value:`eg`,label:`Egypt`,countryFlagCode:`eg`}]},play:async({canvasElement:e,step:t})=>{let n=E(E(e).getByRole(`button`,{name:/Remove Ukraine/})).getByTestId(`chip-country-flag`);await t("Chip should render a flag when `flagCountryCode` prop is passed",async()=>{T(n).toBeVisible()})}},z={args:{"aria-label":`Fancy chips`,defaultValue:[`counter+icon`,`counter+flag`,`icon+flag`],items:[{value:`counter+icon`,label:`Icon + Counter`,icon:(0,w.jsx)(S,{}),counter:1247},{value:`counter+flag`,label:`Flag + Counter`,countryFlagCode:`ua`,counter:1247},{value:`icon+flag`,label:`Icon + Flag`,icon:(0,w.jsx)(S,{}),countryFlagCode:`ua`}]},play:async({canvasElement:e})=>{let t=E(E(e).getByRole(`button`,{name:`Remove Icon + Flag`}));T(t.getByTestId(`chip-icon`)).toBeVisible(),T(t.queryByTestId(`chip-country-flag`)).not.toBeInTheDocument()}},B=[`2025-08-15T10:00Z`,`2025-08-16T12:00Z`,`2025-08-17T14:00Z`],V={args:{orientation:`vertical`,"aria-label":`Selected time slots`,defaultValue:B,items:B.map(e=>({value:e,label:(0,w.jsx)(te,{weekday:`short`,day:`numeric`,month:`short`,hour:`2-digit`,minute:`2-digit`,value:e}),dataset:{testid:e}}))},decorators:[e=>(0,w.jsx)(`div`,{style:{width:300,margin:`0 auto`},children:(0,w.jsx)(e,{})})],play:async({canvasElement:e,step:t})=>{let n=E(e),r=n.getByTestId(B[0]),i=n.getByTestId(B[1]),a=n.getByTestId(B[2]);await t(`Focus first chip`,async()=>{r.focus()}),await t(`Arrow down should focus second chip`,async()=>{await O.keyboard(`{ArrowDown}`),T(i).toHaveFocus()}),await t(`Arrow down should focus third chip`,async()=>{await O.keyboard(`{ArrowDown}`),T(a).toHaveFocus()}),await t(`Arrow down should focus first chip`,async()=>{await O.keyboard(`{ArrowDown}`),T(r).toHaveFocus()}),await t(`Arrow up should focus third chip`,async()=>{await O.keyboard(`{ArrowUp}`),T(a).toHaveFocus()})}},H={render:e=>(0,w.jsxs)(p,{gap:`12`,children:[(0,w.jsx)(d,{...e}),(0,w.jsx)(l,{variant:`tertiary`,size:`small`,onClick:()=>alert(`Show all`),children:`Show all`})]})},U=[{value:`vocabulary`,label:`Vocabulary`},{value:`speaking`,label:`Speaking`},{value:`listening`,label:`Listening`},{value:`reading`,label:`Reading`},{value:`writing`,label:`Writing`},{value:`grammar`,label:`Grammar`}],W=[{value:`monday`,label:`Monday`},{value:`tuesday`,label:`Tuesday`},{value:`wednesday`,label:`Wednesday`},{value:`thursday`,label:`Thursday`},{value:`friday`,label:`Friday`},{value:`saturday`,label:`Saturday`},{value:`sunday`,label:`Sunday`}],G=[{value:`morning`,label:`Morning (6-12)`,icon:(0,w.jsx)(S,{})},{value:`afternoon`,label:`Afternoon (12-18)`,icon:(0,w.jsx)(g,{})},{value:`evening`,label:`Evening (18-0)`,icon:(0,w.jsx)(x,{})},{value:`night`,label:`Night (0-6)`,icon:(0,w.jsx)(se,{})}],K={render:function(e){return(0,w.jsxs)(p,{direction:`column`,alignItems:`stretch`,gap:`64`,children:[(0,w.jsxs)(p,{direction:`column`,alignItems:`stretch`,gap:`16`,children:[(0,w.jsx)(a,{variant:`large-semibold`,children:`What skills do you want to focus on?`}),(0,w.jsx)(d,{"aria-label":`Selected skills`,defaultValue:[`vocabulary`,`speaking`,`listening`],items:U})]}),(0,w.jsxs)(p,{direction:`column`,alignItems:`stretch`,gap:`16`,children:[(0,w.jsx)(a,{variant:`large-semibold`,children:`Which days work best for you?`}),(0,w.jsx)(d,{"aria-label":`Selected days`,defaultValue:[`monday`,`wednesday`,`friday`],items:W})]}),(0,w.jsxs)(p,{direction:`column`,alignItems:`stretch`,gap:`16`,children:[(0,w.jsx)(a,{variant:`large-semibold`,children:`What times of day work for you?`}),(0,w.jsx)(d,{"aria-label":`Selected times`,defaultValue:[`morning`,`afternoon`],items:G})]})]})},play:async({canvasElement:e,step:t})=>{let n=E(e),r=n.getByRole(`button`,{name:/Remove Vocabulary/}),i=n.getByRole(`button`,{name:/Remove Speaking/}),a=n.getByRole(`button`,{name:/Remove Listening/}),o=n.getByRole(`button`,{name:/Remove Monday/});await t(`Tab once to enter the component`,async()=>{await O.tab(),T(r).toHaveFocus()}),await t(`Next tab should focus second chips group`,async()=>{await O.tab(),T(o).toHaveFocus()}),await t(`Shift+Tab should focus first chips group again`,async()=>{await O.tab({shift:!0}),T(r).toHaveFocus()}),await t(`Right arrow should focus next chip in the group`,async()=>{await O.keyboard(`{ArrowRight}`),T(i).toHaveFocus()}),await t(`Left arrow should focus previous chip in the group`,async()=>{await O.keyboard(`{ArrowLeft}`),T(r).toHaveFocus()}),await t(`Left arrow should focus last chip if first chip is focused`,async()=>{await O.keyboard(`{ArrowLeft}`),T(a).toHaveFocus()}),await t(`Right arrow should focus first chip if last chip is focused`,async()=>{await O.keyboard(`{ArrowRight}`),T(r).toHaveFocus()}),await t(`Focus last chip`,async()=>{await O.keyboard(`{ArrowLeft}`)}),await t(`Tab to the next group`,async()=>{await O.tab()}),await t(`Shift+Tab to return to the first group, the last focused chip should be focused`,async()=>{await O.tab({shift:!0}),T(a).toHaveFocus()})}},q=re.ul`
|
|
2
2
|
all: unset;
|
|
3
3
|
list-style: none;
|
|
4
4
|
display: flex;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./react-C6B6irz5.js","./react-B8jdHdWa.js","./chunk-BneVvdWh.js","./react-C7IZe2D1.js"])))=>i.map(i=>d[i]);
|
|
2
|
-
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{n,t as r}from"./preload-helper-nVtPd9zc.js";import{t as i}from"./react-C7IZe2D1.js";import{i as a,l as o,n as s,r as c,t as l}from"./iframe-
|
|
2
|
+
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{n,t as r}from"./preload-helper-nVtPd9zc.js";import{t as i}from"./react-C7IZe2D1.js";import{i as a,l as o,n as s,r as c,t as l}from"./iframe-BuOXI2w6.js";import{t as u}from"./client-o3HipSzo.js";function d(){return globalThis.IS_REACT_ACT_ENVIRONMENT}var f,p,m,h,g,_,v,y=t((()=>{f=e(i(),1),p=e(u(),1),m=new Map,h=({callback:e,children:t})=>{let n=f.useRef();return f.useLayoutEffect(()=>{n.current!==e&&(n.current=e,e())},[e]),t},typeof Promise.withResolvers>`u`&&(Promise.withResolvers=()=>{let e=null,t=null;return{promise:new Promise((n,r)=>{e=n,t=r}),resolve:e,reject:t}}),g=async(e,t,n)=>{let r=await v(t,n);if(d()){r.render(e);return}let{promise:i,resolve:a}=Promise.withResolvers();return r.render(f.createElement(h,{callback:a},e)),i},_=(e,t)=>{let n=m.get(e);n&&(n.unmount(),m.delete(e))},v=async(e,t)=>{let n=m.get(e);return n||(n=p.createRoot(e,t),m.set(e,n)),n}})),b,x,S,C,w=t((()=>{b=e(i(),1),y(),o(),n(),x={code:s,a:l,...a},S=class extends b.Component{constructor(){super(...arguments),this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(e){let{showException:t}=this.props;t(e)}render(){let{hasError:e}=this.state,{children:t}=this.props;return e?null:b.createElement(b.Fragment,null,t)}},C=class{constructor(){this.render=async(e,t,n)=>{let i={...x,...t?.components},a=c;return new Promise((o,s)=>{r(async()=>{let{MDXProvider:e}=await import(`./react-C6B6irz5.js`);return{MDXProvider:e}},__vite__mapDeps([0,1,2,3]),import.meta.url).then(({MDXProvider:r})=>g(b.createElement(S,{showException:s,key:Math.random()},b.createElement(r,{components:i},b.createElement(a,{context:e,docsParameter:t}))),n)).then(()=>o())})},this.unmount=e=>{_(e)}}}}));t((()=>{w()}))();export{C as DocsRenderer};
|