@preply/ds-docs 11.4.0 → 11.5.0

package/dist/assets/{CountryFlag.stories-B0_35WJ9.js → CountryFlag.stories-DCh8nQ3R.js}

@@ -1,4 +1,4 @@
-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:`{
+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-BiCO96_r.js";import{a as l,i as u,n as d,r as f,t as p}from"./Accordion-DlAp8KmP.js";import{n as m,t as h}from"./Checkbox-BV4Be-fH.js";import{n as g,t as _}from"./CountryFlag-CqhLpgul.js";import{n as v,t as y}from"./FormControl-B3jdXz5i.js";import{n as b,t as x}from"./LayoutFlex-CEOcocT6.js";import{n as S,t as C}from"./LayoutGrid-Ce9ffWmL.js";import{n as w,t as T}from"./LayoutGridItem-BtGWBhGr.js";import{n as E,t as D}from"./Link-DLL8OonN.js";import{n as O,t as k}from"./TextField-C5bFUM0q.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:`{
   render: function Story() {
     return <div style={{
       maxWidth: '1000px'

package/dist/assets/{CountryFlag.test.stories-DGoCByQP.js → CountryFlag.test.stories-KdCwJQaC.js}

@@ -1,4 +1,4 @@
-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:`{
+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-CqhLpgul.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:`{
   render: function Story() {
     return <CountryFlag code="ua" alt="Ukraine" dataset={{
       foo: 1,

package/dist/assets/{Dialog-BT0Kd0KN.js → Dialog-DJ_22m-M.js}

@@ -1,4 +1,4 @@
-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.
+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-V4tiko9-.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.
 
 Composed of:
 - Dialog: The main component

package/dist/assets/Dialog.primitives.stories-_LjNw1Aq.js

@@ -0,0 +1,193 @@
+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-BItN7xKl.js";import{n as o,t as s}from"./Button-_0pS2khJ.js";import{n as c,t as l}from"./Badge-DWIG0IOC.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-V4tiko9-.js";import{a as b,i as x,n as S,o as C,r as w,t as T}from"./DialogActions-D5TuMAHt.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;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,{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!`})})]})]})}},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,{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:`{
+  render: function Story() {
+    const [open, setOpen] = useState(false);
+    return <>
+                <Button dataset={{
+        testid: 'trigger'
+      }} onClick={() => setOpen(true)}>
+                    Open
+                </Button>
+                <DialogRoot dataset={{
+        testid: 'dialog'
+      }} open={open} onClose={() => setOpen(false)}>
+                    <DummyContent />
+                </DialogRoot>
+            </>;
+  }
+}`,...H.parameters?.docs?.source}}},U.parameters={...U.parameters,docs:{...U.parameters?.docs,source:{originalSource:`{
+  render: function Story() {
+    const [open, setOpen] = useState(false);
+    return <>
+                <Button dataset={{
+        testid: 'trigger'
+      }} onClick={() => setOpen(true)}>
+                    Open
+                </Button>
+                <DialogRoot dataset={{
+        testid: 'dialog'
+      }} open={open} onClose={() => setOpen(false)} overlay={false}>
+                    <DummyContent />
+                </DialogRoot>
+            </>;
+  }
+}`,...U.parameters?.docs?.source}}},W.parameters={...W.parameters,docs:{...W.parameters?.docs,source:{originalSource:`{
+  render: function Story() {
+    const [open, setOpen] = useState(false);
+    return <>
+                <Button dataset={{
+        testid: 'trigger'
+      }} onClick={() => setOpen(true)}>
+                    Open
+                </Button>
+                <DialogRoot dataset={{
+        testid: 'dialog'
+      }} open={open} onClose={() => setOpen(false)}>
+                    <DialogFooter>
+                        <DialogButtonStack>
+                            <Button variant="quaternary">Quaternary</Button>
+                            <Button variant="tertiary">Tertiary</Button>
+                            <Button variant="secondary">Secondary</Button>
+                            <Button variant="primary">Primary</Button>
+                        </DialogButtonStack>
+                    </DialogFooter>
+                </DialogRoot>
+            </>;
+  }
+}`,...W.parameters?.docs?.source}}},G.parameters={...G.parameters,docs:{...G.parameters?.docs,source:{originalSource:`{
+  render: function Story() {
+    const [open, setOpen] = useState(false);
+    return <>
+                <Button dataset={{
+        testid: 'trigger'
+      }} onClick={() => setOpen(true)}>
+                    Open
+                </Button>
+                <DialogRoot dataset={{
+        testid: 'dialog'
+      }} open={open} onClose={() => setOpen(false)}>
+                    <DialogFooter>
+                        <DialogButtonStack className={customDialogStyles.alwaysStackedButtonStack}>
+                            <Button variant="tertiary">Cancel</Button>
+                            <Button variant="primary">Confirm</Button>
+                        </DialogButtonStack>
+                    </DialogFooter>
+                </DialogRoot>
+            </>;
+  }
+}`,...G.parameters?.docs?.source},description:{story:`Consumers can override the default responsive stacking behavior
+of DialogButtonStack by targeting the \`[data-horizontal-layout]\` attribute.
+The custom CSS forces vertical stacking even at wide viewports where horizontal
+layout would normally be applied.`,...G.parameters?.docs?.description}}},K.parameters={...K.parameters,docs:{...K.parameters?.docs,source:{originalSource:`{
+  render: function Story() {
+    const [open, setOpen] = useState(false);
+    return <>
+                <Button dataset={{
+        testid: 'trigger'
+      }} onClick={() => setOpen(true)}>
+                    Open
+                </Button>
+                <DialogRoot dataset={{
+        testid: 'dialog'
+      }} open={open} onClose={() => setOpen(false)}>
+                    <DialogCloseButton />
+                    <header style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '20px',
+          marginBottom: '24px'
+        }}>
+                        <Icon size="32" svg={InfoIcon} />
+                        <hgroup>
+                            <DialogTitle>Dialog</DialogTitle>
+                            <DialogDescription>AKA Task Dialog</DialogDescription>
+                        </hgroup>
+                    </header>
+                    <DummyContent />
+                    <DialogFooter>
+                        <DialogButtonStack>
+                            <Button variant="tertiary">Cancel</Button>
+                            <Button variant="primary">Confirm</Button>
+                        </DialogButtonStack>
+                    </DialogFooter>
+                </DialogRoot>
+            </>;
+  }
+}`,...K.parameters?.docs?.source},description:{story:`Custom "TaskDialog" experiment built with primitives.`,...K.parameters?.docs?.description}}},q.parameters={...q.parameters,docs:{...q.parameters?.docs,source:{originalSource:`{
+  render: function Story() {
+    const [open, setOpen] = useState(false);
+    return <>
+                <Button dataset={{
+        testid: 'trigger'
+      }} onClick={() => setOpen(true)}>
+                    Open
+                </Button>
+                <DialogRoot dataset={{
+        testid: 'dialog'
+      }} open={open} onClose={() => setOpen(false)}>
+                    <DialogCloseButton>
+                        <Button variant="ghost">Not Now</Button>
+                    </DialogCloseButton>
+                    <DummyContent style={{
+          background: 'color-mix(in srgb, #ffe8f7, transparent)',
+          position: 'absolute',
+          inset: 0,
+          height: '100%',
+          zIndex: '-1'
+        }} />
+                    <DummyContent style={{
+          marginInline: 'calc(-1 * var(--dialog-padding))',
+          marginTop: 'calc(-1 * var(--dialog-padding))',
+          marginBottom: 'var(--dialog-padding)',
+          width: 'calc-size(auto)'
+        }} />
+                    <div style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '12px',
+          alignItems: 'center'
+        }}>
+                        <Badge type="ai">Beta</Badge>
+                        <DialogTitle>Promo Dialog 2.0</DialogTitle>
+                        <DialogDescription>Now with a longer button</DialogDescription>
+                    </div>
+                    <div style={{
+          marginTop: 'var(--dialog-padding)'
+        }}>
+                        <Button variant="onColor" fullWidth>
+                            Let&apos;s go!
+                        </Button>
+                    </div>
+                </DialogRoot>
+            </>;
+  }
+}`,...q.parameters?.docs?.source},description:{story:`Custom PromoDialog experiment built for https://preply.atlassian.net/browse/LTV-308 requirements.`,...q.parameters?.docs?.description}}},J.parameters={...J.parameters,docs:{...J.parameters?.docs,source:{originalSource:`{
+  render: function Story() {
+    const [open, setOpen] = useState(false);
+    return <>
+                <Button dataset={{
+        testid: 'trigger'
+      }} onClick={() => setOpen(true)}>
+                    Open
+                </Button>
+                <DialogRoot open={open} onClose={() => setOpen(false)} dataset={{
+        testid: 'dialog'
+      }} className={customDialogStyles.content}>
+                    <DialogCloseButton className={customDialogStyles.close} />
+                    <DialogTitle className={customDialogStyles.title}>Custom Title</DialogTitle>
+                    <DialogDescription className={customDialogStyles.description}>
+                        Custom Description
+                    </DialogDescription>
+                    <br />
+                    {Array.from({
+          length: 5
+        }).map((_, index) => <DummyContent key={index} />)}
+                    <DialogFooter className={customDialogStyles.footer}>
+                        <DialogButtonStack className={customDialogStyles.buttonStack}>
+                            <Button variant="primary">Custom Primary</Button>
+                            <Button variant="secondary">Custom Secondary</Button>
+                        </DialogButtonStack>
+                    </DialogFooter>
+                </DialogRoot>
+            </>;
+  }
+}`,...J.parameters?.docs?.source},description:{story:`Custom TaskDialog component (the very first version of the Dialog in Figma was called "TaskDialog").`,...J.parameters?.docs?.description}}},Y=[`Default`,`WithoutOverlay`,`ButtonStackMultiple`,`ButtonStackCustomResponsivity`,`CompositionTest1`,`CompositionTest2`,`CustomStyles`]}))();export{G as ButtonStackCustomResponsivity,W as ButtonStackMultiple,K as CompositionTest1,q as CompositionTest2,J as CustomStyles,H as Default,U as WithoutOverlay,Y as __namedExportsOrder,B as default};

package/dist/assets/{Dialog.stories-C0BUsh4I.js → Dialog.stories-BgLYxxSl.js}

@@ -1,4 +1,4 @@
-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:`{
+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-BItN7xKl.js";import{n as o,t as s}from"./Button-_0pS2khJ.js";import{n as c,r as l}from"./OnboardingTooltip-ANaVB8Qh.js";import{c as ee,i as u,l as d,o as f,r as p,s as m}from"./AlertBannerAction-BYa4kXiw.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-V4tiko9-.js";import{n as x,t as S}from"./Dialog-DJ_22m-M.js";import{n as ie,t as C}from"./DialogActions-D5TuMAHt.js";import{n as ae,t as oe}from"./NumberField-DW7lG9mg.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:`{
   parameters: {
     chromatic: {
       modes: {

package/dist/assets/{Dialog.test.stories-BapfC0Yd.js → Dialog.test.stories-CCA5_y47.js}

@@ -1,4 +1,4 @@
-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:`{
+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-_0pS2khJ.js";import{n as o,t as s}from"./Dialog-DJ_22m-M.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:`{
   tags: ['!autodocs'],
   args: {
     size: 'xs',

package/dist/assets/{DialogActions-BDIzA8PJ.js → DialogActions-D5TuMAHt.js}

@@ -1,4 +1,4 @@
-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
+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-V4tiko9-.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
 @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
 @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.
 @example <DialogActions

package/dist/assets/{DialogCloseButton-CAY9jDgH.js → DialogCloseButton-V4tiko9-.js}

@@ -1,12 +1,12 @@
-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
+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-Czcvpvgg.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-raxNxvJf.js";import{n as b,t as x}from"./IconButton-sZZtNos_.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
 @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
 @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
-@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.
+@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`}]}},disabled:{defaultValue:null,description:``,name:`disabled`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},onKeyDown:{defaultValue:null,description:``,name:`onKeyDown`,required:!1,type:{name:`enum`,value:[{value:`KeyboardEventHandler`}]}},onKeyUp:{defaultValue:null,description:``,name:`onKeyUp`,required:!1,type:{name:`enum`,value:[{value:`KeyboardEventHandler`}]}},onMouseDown:{defaultValue:null,description:``,name:`onMouseDown`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onMouseEnter:{defaultValue:null,description:``,name:`onMouseEnter`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onMouseMove:{defaultValue:null,description:``,name:`onMouseMove`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onMouseUp:{defaultValue:null,description:``,name:`onMouseUp`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onPointerDown:{defaultValue:null,description:``,name:`onPointerDown`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onPointerEnter:{defaultValue:null,description:``,name:`onPointerEnter`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},as:{defaultValue:null,description:`Custom element to render the button.
 
 Allows rendering the button using a different React element or component.
 This is particularly useful for integrating with router libraries like \`react-router\` or \`next/router\`.
 @example // Render as a react router link component
 import { Link } from 'react-router-dom';
 
-<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.
+<ButtonBase as={<Link to="/home" />} />`,name:`as`,required:!1,type:{name:`enum`,value:[{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}},size:{defaultValue:null,description:``,name:`size`,required:!1,type:{name:`enum`,value:[{value:`"small"`},{value:`"medium"`},{value:`"large"`},{value:`ResponsiveProp<ButtonSize>`}]}},assistiveText:{defaultValue:null,description:``,name:`assistiveText`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},url:{defaultValue:null,description:"@deprecated Use `href` instead",name:`url`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},href:{defaultValue:null,description:``,name:`href`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},selected:{defaultValue:null,description:`Used only for classroom and ghost variants`,name:`selected`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},download:{defaultValue:null,description:``,name:`download`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},variant:{defaultValue:null,description:``,name:`variant`,required:!1,type:{name:`enum`,value:[{value:`"ai"`},{value:`"inverted"`},{value:`"critical"`},{value:`"tertiary"`},{value:`"primary"`},{value:`"secondary"`},{value:`"quaternary"`},{value:`"ghost"`},{value:`"onColor"`},{value:`"classroom"`},{value:`"primaryB2b"`},{value:`"primaryTutor"`},{value:`"newFeature"`}]}},opensInNewTab:{defaultValue:null,description:``,name:`opensInNewTab`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},nofollow:{defaultValue:null,description:``,name:`nofollow`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},submitsForm:{defaultValue:null,description:``,name:`submitsForm`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},busy:{defaultValue:null,description:`Replaces the content with a loading indicator.`,name:`busy`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},a11yLabel:{defaultValue:null,description:"@deprecated Use `assistiveText` instead",name:`a11yLabel`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},dsInternalSimulation:{defaultValue:null,description:`@deprecated This is meant for internal DS usage only. Do not use it in your code.
 @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};

package/dist/assets/DismissibleChips-DIxEewPp.js

@@ -0,0 +1 @@
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{ht as r,t as i}from"./dist-DtfJeYQK.js";import{t as a}from"./jsx-runtime-C2wGStra.js";import{n as o,t as s}from"./dist-Cc1j9Pjk.js";import{n as c,t as l}from"./filterAttributesPassedByRadixUIAtRuntime-CGiuUnR2.js";import{n as u,t as d}from"./Icon-BItN7xKl.js";import{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-9tmtQKcI.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`}]}},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[]`}]}},"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`}]}},"aria-label":{defaultValue:null,description:`Accessible label for the chips group. Required for screen reader users`,name:`aria-label`,required:!0,type:{name:`string`}},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`}]}},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:`"at"`},{value:`"is"`},{value:`"af"`},{value:`"ax"`},{value:`"al"`},{value:`"dz"`},{value:`"as"`},{value:`"ad"`},{value:`"ao"`},{value:`"ai"`},{value:`"aq"`},{value:`"ag"`},{value:`"ar"`},{value:`"am"`},{value:`"aw"`},{value:`"sh-ac"`},{value:`"asean"`},{value:`"au"`},{value:`"az"`},{value:`"bs"`},{value:`"bh"`},{value:`"bd"`},{value:`"bb"`},{value:`"es-pv"`},{value:`"by"`},{value:`"be"`},{value:`"bz"`},{value:`"bj"`},{value:`"bm"`},{value:`"bt"`},{value:`"bo"`},{value:`"bq"`},{value:`"ba"`},{value:`"bw"`},{value:`"bv"`},{value:`"br"`},{value:`"io"`},{value:`"bn"`},{value:`"bg"`},{value:`"bf"`},{value:`"bi"`},{value:`"cv"`},{value:`"kh"`},{value:`"cm"`},{value:`"ca"`},{value:`"ic"`},{value:`"es-ct"`},{value:`"ky"`},{value:`"cf"`},{value:`"cefta"`},{value:`"td"`},{value:`"cl"`},{value:`"cn"`},{value:`"cx"`},{value:`"cp"`},{value:`"cc"`},{value:`"co"`},{value:`"km"`},{value:`"ck"`},{value:`"cr"`},{value:`"hr"`},{value:`"cu"`},{value:`"cw"`},{value:`"cy"`},{value:`"cz"`},{value:`"ci"`},{value:`"cd"`},{value:`"dk"`},{value:`"dg"`},{value:`"dj"`},{value:`"dm"`},{value:`"do"`},{value:`"eac"`},{value:`"ec"`},{value:`"eg"`},{value:`"sv"`},{value:`"gb-eng"`},{value:`"gq"`},{value:`"er"`},{value:`"ee"`},{value:`"sz"`},{value:`"et"`},{value:`"eu"`},{value:`"fk"`},{value:`"fo"`},{value:`"fm"`},{value:`"fj"`},{value:`"fi"`},{value:`"fr"`},{value:`"gf"`},{value:`"pf"`},{value:`"tf"`},{value:`"ga"`},{value:`"es-ga"`},{value:`"gm"`},{value:`"ge"`},{value:`"de"`},{value:`"gh"`},{value:`"gi"`},{value:`"gr"`},{value:`"gl"`},{value:`"gd"`},{value:`"gp"`},{value:`"gu"`},{value:`"gt"`},{value:`"gg"`},{value:`"gn"`},{value:`"gw"`},{value:`"gy"`},{value:`"ht"`},{value:`"hm"`},{value:`"va"`},{value:`"hn"`},{value:`"hk"`},{value:`"hu"`},{value:`"in"`},{value:`"ir"`},{value:`"iq"`},{value:`"ie"`},{value:`"im"`},{value:`"il"`},{value:`"it"`},{value:`"jm"`},{value:`"jp"`},{value:`"je"`},{value:`"jo"`},{value:`"kz"`},{value:`"ke"`},{value:`"ki"`},{value:`"xk"`},{value:`"kw"`},{value:`"kg"`},{value:`"la"`},{value:`"lv"`},{value:`"arab"`},{value:`"lb"`},{value:`"ls"`},{value:`"lr"`},{value:`"ly"`},{value:`"li"`},{value:`"lt"`},{value:`"lu"`},{value:`"mo"`},{value:`"mg"`},{value:`"mw"`},{value:`"my"`},{value:`"mv"`},{value:`"ml"`},{value:`"mt"`},{value:`"mh"`},{value:`"mq"`},{value:`"mr"`},{value:`"mu"`},{value:`"yt"`},{value:`"mx"`},{value:`"md"`},{value:`"mc"`},{value:`"mn"`},{value:`"me"`},{value:`"ms"`},{value:`"ma"`},{value:`"mz"`},{value:`"mm"`},{value:`"na"`},{value:`"nr"`},{value:`"np"`},{value:`"nl"`},{value:`"nc"`},{value:`"nz"`},{value:`"ni"`},{value:`"ne"`},{value:`"ng"`},{value:`"nu"`},{value:`"nf"`},{value:`"kp"`},{value:`"mk"`},{value:`"gb-nir"`},{value:`"mp"`},{value:`"no"`},{value:`"om"`},{value:`"pc"`},{value:`"pk"`},{value:`"pw"`},{value:`"pa"`},{value:`"pg"`},{value:`"py"`},{value:`"pe"`},{value:`"ph"`},{value:`"pn"`},{value:`"pl"`},{value:`"pt"`},{value:`"pr"`},{value:`"qa"`},{value:`"cg"`},{value:`"ro"`},{value:`"ru"`},{value:`"rw"`},{value:`"re"`},{value:`"bl"`},{value:`"sh-hl"`},{value:`"sh"`},{value:`"kn"`},{value:`"lc"`},{value:`"mf"`},{value:`"pm"`},{value:`"vc"`},{value:`"ws"`},{value:`"sm"`},{value:`"st"`},{value:`"sa"`},{value:`"gb-sct"`},{value:`"sn"`},{value:`"rs"`},{value:`"sc"`},{value:`"sl"`},{value:`"sg"`},{value:`"sx"`},{value:`"sk"`},{value:`"si"`},{value:`"sb"`},{value:`"so"`},{value:`"za"`},{value:`"gs"`},{value:`"kr"`},{value:`"ss"`},{value:`"es"`},{value:`"lk"`},{value:`"ps"`},{value:`"sd"`},{value:`"sr"`},{value:`"sj"`},{value:`"se"`},{value:`"ch"`},{value:`"sy"`},{value:`"tw"`},{value:`"tj"`},{value:`"tz"`},{value:`"th"`},{value:`"tl"`},{value:`"tg"`},{value:`"tk"`},{value:`"to"`},{value:`"tt"`},{value:`"sh-ta"`},{value:`"tn"`},{value:`"tm"`},{value:`"tc"`},{value:`"tv"`},{value:`"tr"`},{value:`"ug"`},{value:`"ua"`},{value:`"ae"`},{value:`"gb"`},{value:`"un"`},{value:`"um"`},{value:`"us"`},{value:`"uy"`},{value:`"uz"`},{value:`"vu"`},{value:`"ve"`},{value:`"vn"`},{value:`"vg"`},{value:`"vi"`},{value:`"gb-wls"`},{value:`"wf"`},{value:`"eh"`},{value:`"ye"`},{value:`"zm"`},{value:`"zw"`}]}},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-D8vGzcJU.js → DismissibleChips.stories-DTC-zjPX.js}

@@ -1,4 +1,4 @@
-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`
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Text-BiCO96_r.js";import{n as o,t as s}from"./Heading-DX-HCDkx.js";import{n as c,t as l}from"./Button-_0pS2khJ.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-DIxEewPp.js";import{n as f,t as p}from"./LayoutFlex-CEOcocT6.js";import{n as ae,t as oe}from"./Link-DLL8OonN.js";import{n as m,t as h}from"./Tooltip-CX8T37NP.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`
     all: unset;
     list-style: none;
     display: flex;

package/dist/assets/{DocsRenderer-LL677BLK-DZVr0WqC.js → DocsRenderer-LL677BLK-4u1YXi13.js}

@@ -1,2 +1,2 @@
 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]);
-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};
+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-Czcvpvgg.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};