@preply/ds-docs 11.0.0 → 11.1.0

package/dist/assets/{CountryFlag.stories-hf40f81N.js → CountryFlag.stories-CCfcgg_Y.js}

@@ -1,4 +1,4 @@
-import{j as e,r as n}from"./iframe-B_74HtSc.js";import{c as h,C as p,g as u}from"./CountryFlag-D40CtNEa.js";import{L as te}from"./LayoutFlex-DXRMJ9FH.js";import{L as z}from"./LayoutGrid-SAztDD7Z.js";import{L as i}from"./LayoutGridItem-UTn4G6JO.js";import{T as t}from"./Text-DvShrljd.js";import{L as ie}from"./Link-BAFCJR3T.js";import{F as m}from"./FormControl-Zqf1cIwP.js";import{C as g}from"./Checkbox-U8uzIr-e.js";import{T as le}from"./TextField-BSJgR_zK.js";import{A as ne,a as de,b as ce,c as ue}from"./Accordion-2avWtqXz.js";import"./preload-helper-Dp1pzeXC.js";import"./componentNames-hc9KR2nX.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./layout-relative.module-BIZVul8q.js";import"./breakpoints-BfMlrtxE.js";import"./layout-relative-B9CiYPwj.js";import"./constants-DYYVurUY.js";import"./align-self-BYi8giLn.js";import"./text-accent-BQ9POoE5.js";import"./text-centered-BEaaxMgl.js";import"./useHostname-CbpnzdHv.js";import"./index-DIqvfT2b.js";import"./message-DJT5rp5J.js";import"./render-icon-MT6RlyNs.js";import"./useMergeRefs-Caz9hOck.js";import"./Input-DuW1_5SG.js";import"./InputContainer-Cmdo_xyq.js";import"./TokyoUIChevronDown-DiBNbDdz.js";import"./Icon-CC0yjdx9.js";const{expect:V}=__STORYBOOK_MODULE_TEST__,Ee={title:"components/CountryFlag",component:p,args:{code:"ua",alt:h.ua}},j={render:function(){return e.jsxs("div",{style:{maxWidth:"1000px"},children:[e.jsx(t,{variant:"default-semibold",children:"For some countries, simplified flags are automatically used (unless `simplified` is set to `false`)"}),e.jsxs(z,{columns:4,children:[e.jsx(i,{children:e.jsx(t,{variant:"default-semibold",children:"Code"})}),e.jsx(i,{children:e.jsx(t,{variant:"default-semibold",children:"Country name"})}),e.jsx(i,{children:e.jsx(t,{variant:"default-semibold",children:"4x3"})}),e.jsx(i,{children:e.jsx(t,{variant:"default-semibold",children:"4x3 (with `simplified=false`)"})}),["es","mx"].map(r=>e.jsxs(n.Fragment,{children:[e.jsx(i,{children:r}),e.jsx(i,{children:h[r]}),e.jsx(i,{children:e.jsx(p,{code:r,alt:h[r],size:"large"})}),e.jsx(i,{children:e.jsx(p,{code:r,alt:h[r],size:"large",simplified:!1})})]},r))]}),e.jsx("br",{}),e.jsx(t,{variant:"default-semibold",children:"All countries"}),e.jsxs(z,{columns:3,children:[e.jsx(i,{children:e.jsx(t,{variant:"default-semibold",children:"Code"})}),e.jsx(i,{children:e.jsx(t,{variant:"default-semibold",children:"Country name"})}),e.jsx(i,{children:e.jsx(t,{variant:"default-semibold",children:"4x3"})}),Object.keys(h).map(r=>e.jsxs(n.Fragment,{children:[e.jsx(i,{children:r}),e.jsx(i,{children:h[r]}),e.jsx(i,{children:e.jsx(p,{code:r,alt:h[r],size:"large"})})]},r))]})]})}};function l({src:d,alt:r,square:a=!1}){return e.jsxs("div",{children:[e.jsx("img",{src:d,alt:r,style:{width:a?"96px":"128px",height:"96px"}}),e.jsx("img",{src:d,alt:r,style:{width:a?"24px":"32px",height:"24px"}})]})}const G={tags:["!test","!a11y-test"],parameters:{chromatic:{disableSnapshot:!0}},render:function(){const r="https://static.staging.preply.org/groot/country_flags/",a="https://static.preply.com/ds/country-flags/",[y,P]=n.useState(!1),[S,D]=n.useState(!1),[f,q]=n.useState(!0),[C,L]=n.useState(!0),[v,N]=n.useState(!1),[b,A]=n.useState(!0),[w,I]=n.useState(!0),[re,J]=n.useState(!0),[x,oe]=n.useState(a),$=Number(y)+Number(S)+Number(f)+Number(C)+Number(v)+Number(b)+Number(w)+2,se=y&&S&&f&&C&&v&&b&&w;return e.jsxs("div",{style:{maxWidth:"100%"},children:[e.jsx(ne,{children:e.jsxs(de,{children:[e.jsx(ce,{children:"How to read the following table?"}),e.jsxs(ue,{children:[e.jsxs(t,{children:["- All the flags have bee imported from"," ",e.jsx(ie,{href:"https://github.com/lipis/flag-icons",children:"flag-icons"})]}),e.jsx(t,{children:"- Some flags have been manually replaced because they were wrong"}),e.jsx(t,{children:"- The design system contains more flags compared to Groot (the original apollo's application that contained all the static assets)"}),e.jsx(t,{children:"- Some flags have simplified versions (ex. Spain, Mexico) to reduce their size"}),e.jsx(t,{children:"- All the flags are a available in JPG, mainly to reduce the computation on the native application"}),e.jsx(t,{children:"- You are supposed to gather the assets URL through the `getCountryFlagUrl` utility"}),e.jsx(t,{children:"- For local testing, use `npx serve` launched in the `static-assets/country-flags` directory, and replace the path in the below field."}),e.jsx(t,{children:"- For PR testing, look at `deploy-static-assets.sh` to find the PR URL for static assets."})]})]})}),e.jsxs(te,{gap:"16",padding:["32","0","0","0"],children:[e.jsx(m,{label:"Groot 4x3 SVG",required:!0,children:e.jsx(g,{checked:y,onCheckedChange:P})}),e.jsx(m,{label:"Groot 4x3 PNG",required:!0,children:e.jsx(g,{checked:S,onCheckedChange:D})}),e.jsx(m,{label:"DS 4x3 SVG",required:!0,children:e.jsx(g,{checked:f,onCheckedChange:q})}),e.jsx(m,{label:"DS 4x3 JPG",required:!0,children:e.jsx(g,{checked:C,onCheckedChange:L})}),e.jsx(m,{label:"Groot 1x1 SVG",required:!0,children:e.jsx(g,{checked:v,onCheckedChange:N})}),e.jsx(m,{label:"DS 1x1 SVG",required:!0,children:e.jsx(g,{checked:b,onCheckedChange:A})}),e.jsx(m,{label:"DS 1x1 JPG",required:!0,children:e.jsx(g,{checked:w,onCheckedChange:I})}),e.jsx(m,{label:"Product size",required:!0,children:e.jsx(g,{checked:re,onCheckedChange:J})}),e.jsx(m,{label:"All",required:!0,children:e.jsx(g,{checked:se,onCheckedChange:o=>{P(o),D(o),q(o),L(o),N(o),A(o),I(o),J(o)}})}),e.jsx(le,{value:x,onValueChange:oe,label:"Assets path",required:!0})]}),e.jsx("div",{style:{position:"sticky",top:"0px",background:"white"},children:e.jsxs("div",{style:{display:"grid",gridTemplateColumns:`repeat(${$}, 1fr)`,gap:"4px",padding:"16px 0 0 0"},children:[e.jsx("div",{style:{alignSelf:"start"},children:e.jsx(t,{variant:"default-semibold",children:"Code"})}),e.jsx(t,{variant:"default-semibold",children:"Country name"}),y&&e.jsx(t,{variant:"default-semibold",children:"Show Groot 4x3 SVG"}),S&&e.jsx(t,{variant:"default-semibold",children:"Show Groot 4x3 PNG"}),f&&e.jsx(t,{variant:"default-semibold",children:"Show DS 4x3 SVG"}),C&&e.jsx(t,{variant:"default-semibold",children:"Show DS 4x3 JPG"}),v&&e.jsx(t,{variant:"default-semibold",children:"Show Groot 1x1 SVG"}),b&&e.jsx(t,{variant:"default-semibold",children:"Show DS 1x1 SVG"}),w&&e.jsx(t,{variant:"default-semibold",children:"Show DS 1x1 JPG"})]})}),e.jsx("div",{style:{display:"grid",gridTemplateColumns:`repeat(${$}, 1fr)`,gap:"4px",padding:"16px 0 0 0"},children:Object.keys(h).map(o=>{const c=o,s=h[o],ae=u({requester:"",countryCode:c,simplified:!0})!==u({requester:"",countryCode:c,simplified:!1});return e.jsxs(n.Fragment,{children:[e.jsx(t,{children:o}),e.jsx(t,{children:s}),y&&e.jsx(l,{src:`${r}4x3/${o}.svg`,alt:s}),S&&e.jsx(l,{src:`${r}pngs/${o}.png`,alt:s}),f&&e.jsx(l,{src:u({requester:"storybook",countryCode:c,simplified:!1}).replace(a,x),alt:s}),C&&e.jsx(l,{src:u({requester:"storybook",countryCode:c,simplified:!1,graphic:"raster"}).replace(a,x),alt:s}),v&&e.jsx(l,{src:`${r}1x1/${o}.svg`,square:!0,alt:s}),b&&e.jsx(l,{src:u({requester:"storybook",countryCode:c,simplified:!1,square:!0}).replace(a,x),square:!0,alt:s}),w&&e.jsx(l,{src:u({requester:"storybook",countryCode:c,simplified:!1,square:!0,graphic:"raster"}).replace(a,x),square:!0,alt:s}),ae&&e.jsxs(n.Fragment,{children:[e.jsxs(t,{children:[o," (simplified version)"]}),e.jsx(t,{children:h[o]}),y&&e.jsx(l,{src:`${r}4x3/${o}.svg`,alt:s}),S&&e.jsx(l,{src:`${r}pngs/${o}.png`,alt:s}),f&&e.jsx(l,{src:u({requester:"storybook",countryCode:c,simplified:!0}).replace(a,x),alt:s}),C&&e.jsx(l,{src:u({requester:"storybook",countryCode:c,simplified:!0,graphic:"raster"}).replace(a,x),alt:s}),v&&e.jsx(l,{src:`${r}1x1/${o}.svg`,square:!0,alt:s}),b&&e.jsx(l,{src:u({requester:"storybook",countryCode:c,simplified:!0,square:!0}).replace(a,x),square:!0,alt:s}),w&&e.jsx(l,{src:u({requester:"storybook",countryCode:c,simplified:!0,square:!0,graphic:"raster"}).replace(a,x),square:!0,alt:s})]},o+"simplified")]},o)})})]})}},F={render:d=>e.jsxs(te,{gap:"16",children:[e.jsx(p,{...d,size:"small"}),e.jsx(p,{...d,size:"medium"}),e.jsx(p,{...d,size:"large"})]})},T={render:function(){return e.jsxs(e.Fragment,{children:[e.jsx(t,{variant:"default-regular-italic",children:"Invalid country code"}),e.jsx(p,{code:"invalidCountryCode",alt:"Invalid country code"}),e.jsx(t,{variant:"default-regular-italic",children:"`undefined` country code"}),e.jsx(p,{code:void 0,alt:"Undefined country code"})]})},play:async({canvas:d})=>{const r=d.getByAltText("Invalid country code");V(r).toBeVisible();const a=d.getByAltText("Undefined country code");V(a).toBeVisible()}},k={parameters:{chromatic:{disableSnapshot:!0}},args:{dataset:{qaid:"flag"}},argTypes:{dataset:{control:"object"}}};var U,O,E;j.parameters={...j.parameters,docs:{...(U=j.parameters)==null?void 0:U.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-bm2vnOS2.js";import{a as l,i as u,n as d,r as f,t as p}from"./Accordion-BGpSQDcU.js";import{n as m,t as h}from"./Checkbox-DEB6VLYS.js";import{n as g,t as _}from"./CountryFlag-DMEPQuIc.js";import{n as v,t as y}from"./FormControl-cSvM3XwI.js";import{n as b,t as x}from"./LayoutFlex-DdWp4cl3.js";import{n as S,t as C}from"./LayoutGrid-qM5_bxVY.js";import{n as w,t as T}from"./LayoutGridItem-DXWb3V6X.js";import{n as E,t as D}from"./Link-J-HUcV5T.js";import{n as O,t as k}from"./TextField-zS8J7vJP.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'
@@ -66,7 +66,7 @@ import{j as e,r as n}from"./iframe-B_74HtSc.js";import{c as h,C as p,g as u}from
                 </LayoutGrid>
             </div>;
   }
-}`,...(E=(O=j.parameters)==null?void 0:O.docs)==null?void 0:E.source}}};var R,_,B;G.parameters={...G.parameters,docs:{...(R=G.parameters)==null?void 0:R.docs,source:{originalSource:`{
+}`,...F.parameters?.docs?.source}}},I.parameters={...I.parameters,docs:{...I.parameters?.docs,source:{originalSource:`{
   tags: ['!test', '!a11y-test'],
   parameters: {
     chromatic: {
@@ -282,13 +282,13 @@ import{j as e,r as n}from"./iframe-B_74HtSc.js";import{c as h,C as p,g as u}from
                 </div>
             </div>;
   }
-}`,...(B=(_=G.parameters)==null?void 0:_.docs)==null?void 0:B.source}}};var H,W,M;F.parameters={...F.parameters,docs:{...(H=F.parameters)==null?void 0:H.docs,source:{originalSource:`{
+}`,...I.parameters?.docs?.source}}},L.parameters={...L.parameters,docs:{...L.parameters?.docs,source:{originalSource:`{
   render: args => <LayoutFlex gap="16">
             <CountryFlag {...args} size="small" />
             <CountryFlag {...args} size="medium" />
             <CountryFlag {...args} size="large" />
         </LayoutFlex>
-}`,...(M=(W=F.parameters)==null?void 0:W.docs)==null?void 0:M.source}}};var Y,Q,K;T.parameters={...T.parameters,docs:{...(Y=T.parameters)==null?void 0:Y.docs,source:{originalSource:`{
+}`,...L.parameters?.docs?.source}}},R.parameters={...R.parameters,docs:{...R.parameters?.docs,source:{originalSource:`{
   render: function Story() {
     return <>
                 <Text variant="default-regular-italic">Invalid country code</Text>
@@ -312,7 +312,7 @@ import{j as e,r as n}from"./iframe-B_74HtSc.js";import{c as h,C as p,g as u}from
     const undefinedCountry = canvas.getByAltText('Undefined country code');
     expect(undefinedCountry).toBeVisible();
   }
-}`,...(K=(Q=T.parameters)==null?void 0:Q.docs)==null?void 0:K.source}}};var X,Z,ee;k.parameters={...k.parameters,docs:{...(X=k.parameters)==null?void 0:X.docs,source:{originalSource:`{
+}`,...R.parameters?.docs?.source}}},z.parameters={...z.parameters,docs:{...z.parameters?.docs,source:{originalSource:`{
   parameters: {
     chromatic: {
       disableSnapshot: true
@@ -328,4 +328,4 @@ import{j as e,r as n}from"./iframe-B_74HtSc.js";import{c as h,C as p,g as u}from
       control: 'object'
     }
   }
-}`,...(ee=(Z=k.parameters)==null?void 0:Z.docs)==null?void 0:ee.source}}};const Re=["Countries","CountryFlagExplorer","Sizes","ShowPlaceholderOnInvalidCode","Playground"];export{j as Countries,G as CountryFlagExplorer,k as Playground,T as ShowPlaceholderOnInvalidCode,F as Sizes,Re as __namedExportsOrder,Ee as default};
+}`,...z.parameters?.docs?.source}}},B=[`Countries`,`CountryFlagExplorer`,`Sizes`,`ShowPlaceholderOnInvalidCode`,`Playground`]}))();export{F as Countries,I as CountryFlagExplorer,z as Playground,R as ShowPlaceholderOnInvalidCode,L as Sizes,B as __namedExportsOrder,P as default};

package/dist/assets/CountryFlag.test.stories-BaGoS-6l.js

@@ -0,0 +1,27 @@
+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-DMEPQuIc.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,
+      bar: '2',
+      baz: false
+    }} />;
+  },
+  play: async ({
+    canvas
+  }) => {
+    const element = canvas.getByAltText('Ukraine');
+    expect(element).toHaveAttribute('data-foo', '1');
+    expect(element).toHaveAttribute('data-bar', '2');
+    expect(element).toHaveAttribute('data-baz', 'false');
+  }
+}`,...l.parameters?.docs?.source}}},u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{
+  render: function Story() {
+    return <CountryFlag code="ua" alt="Ukraine" loading="lazy" />;
+  },
+  play: async ({
+    canvas
+  }) => {
+    const element = canvas.getByAltText('Ukraine');
+    expect(element).toHaveAttribute('loading', 'lazy');
+  }
+}`,...u.parameters?.docs?.source}}},d=[`TestDataset`,`ImgAttributesArePassedToImg`]}))();export{u as ImgAttributesArePassedToImg,l as TestDataset,d as __namedExportsOrder,c as default};

package/dist/assets/Dialog-DCPUOQU4.js

@@ -0,0 +1,13 @@
+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-dPdpMifg.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
+- DialogActions: Footer actions with primary and secondary buttons
+- DialogSteps: Steps component for multi-step flows
+- DialogStep: Step component for each step
+- DialogStepsActions: Actions component for the steps`,displayName:`Dialog`,props:{open:{defaultValue:null,description:`Controls the visibility of the dialog`,name:`open`,required:!0,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},children:{defaultValue:null,description:`Content to be rendered inside the dialog`,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`}]}},size:{defaultValue:{value:`md`},description:`Controls the width of the dialog on desktop
+@deprecated use default size for all dialogs`,name:`size`,required:!1,type:{name:`enum`,value:[{value:`"xs"`},{value:`"md"`},{value:`"sm"`},{value:`"lg"`},{value:`ResponsiveProp<"xs" | "md" | "sm" | "lg">`}]}},title:{defaultValue:null,description:``,name:`title`,required:!0,type:{name:`enum`,value:[{value:`undefined`},{value:`null`},{value:`string`},{value:`number`},{value:`false`},{value:`true`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`},{value:`Iterable<ReactNode>`},{value:`ReactPortal`}]}},description:{defaultValue:null,description:``,name:`description`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`},{value:`number`},{value:`false`},{value:`true`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`},{value:`Iterable<ReactNode>`},{value:`ReactPortal`}]}},leadingElement:{defaultValue:null,description:``,name:`leadingElement`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`},{value:`number`},{value:`false`},{value:`true`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`},{value:`Iterable<ReactNode>`},{value:`ReactPortal`}]}},hideHeader:{defaultValue:{value:`false`},description:`When true
+visually hides the header (title and description) while
+keeping it accessible to screen readers
+@deprecated use \`DialogRoot\` component directly instead`,name:`hideHeader`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},onClose:{defaultValue:null,description:`Callback fired when the user tries to close the dialog (via escape
+key, overlay click, or close button).`,name:`onClose`,required:!1,type:{name:`enum`,value:[{value:`() => void`}]}},mobileFullHeight:{defaultValue:null,description:"Makes the Dialog take up the full screen height on mobile screens, i.e.\nscreens under the `medium-l` breakpoint.",name:`mobileFullHeight`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}}}}}catch{}}));export{v as n,_ as t};

package/dist/assets/Dialog.primitives-BPvLcj0z.css

@@ -0,0 +1 @@
+.content__4abpn{--dialog-desktop-width:300px;background:linear-gradient(#f8f8ff,#fff)}.close__yXHzM{width:fit-content;margin-inline:auto;position:static}.title__L2rvR,.description__FdpTb{color:indigo;text-align:center}.footer__5lWIE{--footer-sticky-border-color:transparent;background-color:#0000;position:static}.buttonStack__eh-Q7{flex-direction:column}.alwaysStackedButtonStack__kYtW1[data-horizontal-layout]{justify-content:initial;flex-direction:column-reverse}

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

@@ -0,0 +1,237 @@
+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-CfZyHxyH.js";import{n as o,t as s}from"./Button-DnVrHohm.js";import{n as c,t as l}from"./Badge-CXba4Jz8.js";import{n as u,t as d}from"./TokyoUIInfo-B-CriP10.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-dPdpMifg.js";import{a as b,i as x,n as S,o as C,r as w,t as T}from"./DialogActions-BuK-fnKs.js";var E,D,O,k,A,j,M,N,P=t((()=>{E=`content__4abpn`,D=`close__yXHzM`,O=`title__L2rvR`,k=`description__FdpTb`,A=`footer__5lWIE`,j=`buttonStack__eh-Q7`,M=`alwaysStackedButtonStack__kYtW1`,N={content:E,close:D,title:O,description:k,footer:A,buttonStack:j,alwaysStackedButtonStack:M}})),F,I,L,R,z,B,V,H,U,W,G,K,q,J,Y,X;t((()=>{F=e(n(),1),u(),o(),i(),p(),h(),C(),g(),m(),S(),x(),P(),c(),I=r(),{expect:L,userEvent:R,waitFor:z}=__STORYBOOK_MODULE_TEST__,B={title:`Components/Dialog/Primitives`,component:v,subcomponents:{DialogCloseButton:y,DialogFooter:b,DialogTitle:f,DialogDescription:_,DialogActions:T,DialogButtonStack:w},parameters:{preventIframeFromScrollingParent:!0,docs:{story:{inline:!1,height:600}}},play:async({canvas:e,step:t})=>{await t(`Open dialog`,async()=>{let t=e.getByTestId(`trigger`);return await R.click(t),z(()=>{L(e.getByTestId(`dialog`)).toBeVisible()})})}},V=({style:e={}})=>(0,I.jsx)(`div`,{style:{width:`100%`,height:`200px`,background:`linear-gradient(to bottom, color-mix(in srgb, #ffe8f7, transparent), #ffe8f7)`,...e}}),H={render:function(){let[e,t]=(0,F.useState)(!1);return(0,I.jsxs)(I.Fragment,{children:[(0,I.jsx)(s,{dataset:{testid:`trigger`},onClick:()=>t(!0),children:`Open`}),(0,I.jsx)(v,{dataset:{testid:`dialog`},open:e,onClose:()=>t(!1),children:(0,I.jsx)(V,{})})]})}},U={render:function(){let[e,t]=(0,F.useState)(!1);return(0,I.jsxs)(I.Fragment,{children:[(0,I.jsx)(s,{dataset:{testid:`trigger`},onClick:()=>t(!0),children:`Open`}),(0,I.jsx)(v,{dataset:{testid:`dialog`},open:e,onClose:()=>t(!1),overlay:!1,children:(0,I.jsx)(V,{})})]})}},W={render:function(){let[e,t]=(0,F.useState)(!1);return(0,I.jsxs)(I.Fragment,{children:[(0,I.jsx)(s,{dataset:{testid:`trigger`},onClick:()=>t(!0),children:`Open`}),(0,I.jsx)(v,{dataset:{testid:`dialog`},open:e,onClose:()=>t(!1),children:(0,I.jsx)(b,{children:(0,I.jsxs)(w,{children:[(0,I.jsx)(s,{variant:`quaternary`,children:`Quaternary`}),(0,I.jsx)(s,{variant:`tertiary`,children:`Tertiary`}),(0,I.jsx)(s,{variant:`secondary`,children:`Secondary`}),(0,I.jsx)(s,{variant:`primary`,children:`Primary`})]})})})]})}},G={render:function(){let[e,t]=(0,F.useState)(!1);return(0,I.jsxs)(I.Fragment,{children:[(0,I.jsx)(s,{dataset:{testid:`trigger`},onClick:()=>t(!0),children:`Open`}),(0,I.jsx)(v,{dataset:{testid:`dialog`},open:e,onClose:()=>t(!1),children:(0,I.jsx)(b,{children:(0,I.jsxs)(w,{className:N.alwaysStackedButtonStack,children:[(0,I.jsx)(s,{variant:`tertiary`,children:`Cancel`}),(0,I.jsx)(s,{variant:`primary`,children:`Confirm`})]})})})]})}},K={render:function(){let[e,t]=(0,F.useState)(!1);return(0,I.jsxs)(I.Fragment,{children:[(0,I.jsx)(s,{dataset:{testid:`trigger`},onClick:()=>t(!0),children:`Open`}),(0,I.jsxs)(v,{dataset:{testid:`dialog`},open:e,onClose:()=>t(!1),children:[(0,I.jsx)(y,{}),(0,I.jsxs)(`header`,{style:{display:`flex`,flexDirection:`column`,gap:`20px`,marginBottom:`24px`},children:[(0,I.jsx)(a,{size:`32`,svg:d}),(0,I.jsxs)(`hgroup`,{children:[(0,I.jsx)(f,{children:`Dialog`}),(0,I.jsx)(_,{children:`AKA Task Dialog`})]})]}),(0,I.jsx)(V,{}),(0,I.jsx)(b,{children:(0,I.jsxs)(w,{children:[(0,I.jsx)(s,{variant:`tertiary`,children:`Cancel`}),(0,I.jsx)(s,{variant:`primary`,children:`Confirm`})]})})]})]})}},q={render:function(){let[e,t]=(0,F.useState)(!1);return(0,I.jsxs)(I.Fragment,{children:[(0,I.jsx)(s,{dataset:{testid:`trigger`},onClick:()=>t(!0),children:`Open`}),(0,I.jsxs)(v,{open:e,onClose:()=>t(!1),dataset:{testid:`dialog`},children:[(0,I.jsx)(y,{}),(0,I.jsx)(V,{style:{backgroundColor:`pink`,marginInline:`calc(-1 * var(--dialog-padding))`,marginTop:`calc(-1 * var(--dialog-padding))`,marginBottom:`var(--dialog-padding)`,width:`calc-size(auto)`}}),(0,I.jsxs)(`div`,{style:{display:`flex`,flexDirection:`column`,gap:`12px`,alignItems:`center`},children:[(0,I.jsx)(f,{children:`Promo Dialog`}),(0,I.jsx)(_,{children:`For all your promotional needs`})]}),(0,I.jsx)(b,{children:(0,I.jsxs)(`div`,{style:{display:`flex`,flexDirection:`column`,gap:`12px`,width:`fit-content`,marginInline:`auto`},children:[(0,I.jsx)(s,{variant:`primary`,children:`Confirm`}),(0,I.jsx)(s,{variant:`tertiary`,children:`Cancel`})]})})]})]})}},J={render:function(){let[e,t]=(0,F.useState)(!1);return(0,I.jsxs)(I.Fragment,{children:[(0,I.jsx)(s,{dataset:{testid:`trigger`},onClick:()=>t(!0),children:`Open`}),(0,I.jsxs)(v,{dataset:{testid:`dialog`},open:e,onClose:()=>t(!1),children:[(0,I.jsx)(y,{children:(0,I.jsx)(s,{variant:`ghost`,children:`Not Now`})}),(0,I.jsx)(V,{style:{background:`color-mix(in srgb, #ffe8f7, transparent)`,position:`absolute`,inset:0,height:`100%`,zIndex:`-1`}}),(0,I.jsx)(V,{style:{marginInline:`calc(-1 * var(--dialog-padding))`,marginTop:`calc(-1 * var(--dialog-padding))`,marginBottom:`var(--dialog-padding)`,width:`calc-size(auto)`}}),(0,I.jsxs)(`div`,{style:{display:`flex`,flexDirection:`column`,gap:`12px`,alignItems:`center`},children:[(0,I.jsx)(l,{type:`ai`,children:`Beta`}),(0,I.jsx)(f,{children:`Promo Dialog 2.0`}),(0,I.jsx)(_,{children:`Now with a longer button`})]}),(0,I.jsx)(`div`,{style:{marginTop:`var(--dialog-padding)`},children:(0,I.jsx)(s,{variant:`onColor`,fullWidth:!0,children:`Let's go!`})})]})]})}},Y={render:function(){let[e,t]=(0,F.useState)(!1);return(0,I.jsxs)(I.Fragment,{children:[(0,I.jsx)(s,{dataset:{testid:`trigger`},onClick:()=>t(!0),children:`Open`}),(0,I.jsxs)(v,{open:e,onClose:()=>t(!1),dataset:{testid:`dialog`},className:N.content,children:[(0,I.jsx)(y,{className:N.close}),(0,I.jsx)(f,{className:N.title,children:`Custom Title`}),(0,I.jsx)(_,{className:N.description,children:`Custom Description`}),(0,I.jsx)(`br`,{}),Array.from({length:5}).map((e,t)=>(0,I.jsx)(V,{},t)),(0,I.jsx)(b,{className:N.footer,children:(0,I.jsxs)(w,{className:N.buttonStack,children:[(0,I.jsx)(s,{variant:`primary`,children:`Custom Primary`}),(0,I.jsx)(s,{variant:`secondary`,children:`Custom Secondary`})]})})]})]})}},H.parameters={...H.parameters,docs:{...H.parameters?.docs,source:{originalSource:`{
+  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}}},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 open={open} onClose={() => setOpen(false)} dataset={{
+        testid: 'dialog'
+      }}>
+                    <DialogCloseButton />
+                    <DummyContent style={{
+          backgroundColor: 'pink',
+          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'
+        }}>
+                        <DialogTitle>Promo Dialog</DialogTitle>
+                        <DialogDescription>For all your promotional needs</DialogDescription>
+                    </div>
+                    <DialogFooter>
+                        <div style={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '12px',
+            width: 'fit-content',
+            marginInline: 'auto'
+          }}>
+                            <Button variant="primary">Confirm</Button>
+                            <Button variant="tertiary">Cancel</Button>
+                        </div>
+                    </DialogFooter>
+                </DialogRoot>
+            </>;
+  }
+}`,...q.parameters?.docs?.source}}},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 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>
+            </>;
+  }
+}`,...J.parameters?.docs?.source}}},Y.parameters={...Y.parameters,docs:{...Y.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>
+            </>;
+  }
+}`,...Y.parameters?.docs?.source}}},X=[`Default`,`WithoutOverlay`,`ButtonStackMultiple`,`ButtonStackCustomResponsivity`,`TaskDialog`,`PromoDialog`,`PromoDialogExperiment`,`CustomStyles`]}))();export{G as ButtonStackCustomResponsivity,W as ButtonStackMultiple,Y as CustomStyles,H as Default,q as PromoDialog,J as PromoDialogExperiment,K as TaskDialog,U as WithoutOverlay,X as __namedExportsOrder,B as default};