@preply/ds-docs 4.0.0 → 5.0.0

package/dist/assets/{CountryFlag.stories-UhDU5aPp.js → CountryFlag.stories-B9rUoQXw.js}

@@ -1,4 +1,4 @@
-import{j as e}from"./jsx-runtime-BTJTZTIL.js";import{r as n}from"./index-Cb9e4tly.js";import{e as z}from"./index-Ctq3gFTp.js";import{C as p}from"./CountryFlag-BYnc9DA7.js";import{L as te}from"./LayoutFlex-JDgK8BCr.js";import{L as V}from"./LayoutGrid-CGatrPKO.js";import{L as i}from"./LayoutGridItem-BdIUwiuA.js";import{T as t}from"./Text-CjpUlaH0.js";import{L as ie}from"./Link-DdFAEBXD.js";import{F as m}from"./FormControl-D9rxeKMc.js";import{C as g}from"./Checkbox-BNGbflsm.js";import{T as le}from"./TextField-DqiXpdlZ.js";import{A as ne,a as de,b as ce,c as ue}from"./Accordion-Bi0GzCYO.js";import{c as h,g as u}from"./getCountryFlagUrl-CP-PpZV_.js";import"./index-ChsGqxH_.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./index-DdzHuZ-Y.js";import"./componentNames-NXEPEzbR.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./layout-relative.module-f40KabMD.js";import"./classNames-BUL1Zq7e.js";import"./defaults-hwJNw1bK.js";import"./breakpoints-BfMlrtxE.js";import"./layout-relative-JyjknPiU.js";import"./constants-DYYVurUY.js";import"./align-self-BpB1y0Rx.js";import"./text-accent-DZDDtpIt.js";import"./text-centered-CznToR0o.js";import"./useHostname-Y3PlXofY.js";import"./index-BlMeVLsf.js";import"./index-DhCCT3uz.js";import"./tslib.es6-C7pnyCjR.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./message-CToTEy-z.js";import"./render-icon-BT0Aq7PA.js";import"./useMergeRefs-SFH7Mw4x.js";import"./Input-UdhYxppR.js";import"./InputContainer-B1hqJyx0.js";import"./TokyoUIExpand-oMdXmNcg.js";import"./Icon-BkmQyVqb.js";const Xe={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(V,{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(V,{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),[f,D]=n.useState(!1),[S,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(f)+Number(S)+Number(C)+Number(v)+Number(b)+Number(w)+2,se=y&&f&&S&&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:f,onCheckedChange:D})}),e.jsx(m,{label:"DS 4x3 SVG",required:!0,children:e.jsx(g,{checked:S,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"}),f&&e.jsx(t,{variant:"default-semibold",children:"Show Groot 4x3 PNG"}),S&&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}),f&&e.jsx(l,{src:`${r}pngs/${o}.png`,alt:s}),S&&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}),f&&e.jsx(l,{src:`${r}pngs/${o}.png`,alt:s}),S&&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");z(r).toBeVisible();const a=d.getByAltText("Undefined country code");z(a).toBeVisible()}},k={parameters:{chromatic:{disableSnapshot:!0}},args:{dataset:{qaid:"flag"}},argTypes:{dataset:{control:"object"}}};var U,R,B;j.parameters={...j.parameters,docs:{...(U=j.parameters)==null?void 0:U.docs,source:{originalSource:`{
+import{j as e}from"./jsx-runtime-BTJTZTIL.js";import{r as n}from"./index-Cb9e4tly.js";import{e as z}from"./index-CY08ZUhp.js";import{C as p}from"./CountryFlag-2OfagIL-.js";import{L as te}from"./LayoutFlex-DvBktCUC.js";import{L as V}from"./LayoutGrid-Dm6EcI-G.js";import{L as i}from"./LayoutGridItem-DWhZMKvq.js";import{T as t}from"./Text-D3i9pJx6.js";import{L as ie}from"./Link-D3ljGEp4.js";import{F as m}from"./FormControl-CPKPJ97_.js";import{C as g}from"./Checkbox-0Rr3azkZ.js";import{T as le}from"./TextField-BxOrYHxj.js";import{A as ne,a as de,b as ce,c as ue}from"./Accordion-CxiCI4Rz.js";import{c as h,g as u}from"./getCountryFlagUrl-CP-PpZV_.js";import"./index-ChsGqxH_.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./index-DdzHuZ-Y.js";import"./componentNames-NXEPEzbR.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./layout-relative.module-f40KabMD.js";import"./classNames-BUL1Zq7e.js";import"./defaults-hwJNw1bK.js";import"./breakpoints-BfMlrtxE.js";import"./layout-relative-JyjknPiU.js";import"./constants-DYYVurUY.js";import"./align-self-BpB1y0Rx.js";import"./text-accent-DZDDtpIt.js";import"./text-centered-CznToR0o.js";import"./useHostname-Y3PlXofY.js";import"./index-BlMeVLsf.js";import"./index-DWSmmBvQ.js";import"./tslib.es6-C7pnyCjR.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./message-CSdaKtIj.js";import"./render-icon-BT0Aq7PA.js";import"./useMergeRefs-SFH7Mw4x.js";import"./Input-DeHbbC7g.js";import"./InputContainer-B1hqJyx0.js";import"./TokyoUIExpand-oMdXmNcg.js";import"./Icon-CkCFpqfD.js";const Xe={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(V,{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(V,{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),[f,D]=n.useState(!1),[S,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(f)+Number(S)+Number(C)+Number(v)+Number(b)+Number(w)+2,se=y&&f&&S&&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:f,onCheckedChange:D})}),e.jsx(m,{label:"DS 4x3 SVG",required:!0,children:e.jsx(g,{checked:S,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"}),f&&e.jsx(t,{variant:"default-semibold",children:"Show Groot 4x3 PNG"}),S&&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}),f&&e.jsx(l,{src:`${r}pngs/${o}.png`,alt:s}),S&&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}),f&&e.jsx(l,{src:`${r}pngs/${o}.png`,alt:s}),S&&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");z(r).toBeVisible();const a=d.getByAltText("Undefined country code");z(a).toBeVisible()}},k={parameters:{chromatic:{disableSnapshot:!0}},args:{dataset:{qaid:"flag"}},argTypes:{dataset:{control:"object"}}};var U,R,B;j.parameters={...j.parameters,docs:{...(U=j.parameters)==null?void 0:U.docs,source:{originalSource:`{
   render: function Story() {
     return <div style={{
       maxWidth: '1000px'

package/dist/assets/{CountryFlag.test.stories-kJ9jqJTG.js → CountryFlag.test.stories-C3Hz7_Cq.js}

@@ -1,4 +1,4 @@
-import{j as d}from"./jsx-runtime-BTJTZTIL.js";import{e as o}from"./index-Ctq3gFTp.js";import{C as s}from"./CountryFlag-BYnc9DA7.js";import"./index-ChsGqxH_.js";import"./index-Cb9e4tly.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./index-DdzHuZ-Y.js";import"./getCountryFlagUrl-CP-PpZV_.js";import"./componentNames-NXEPEzbR.js";const k={title:"components/CountryFlag/Tests",component:s,args:{},tags:["!autodocs","!a11y-test","test"]},a={render:function(){return d.jsx(s,{code:"ua",alt:"Ukraine",dataset:{foo:1,bar:"2",baz:!1}})},play:async({canvas:t})=>{const e=t.getByAltText("Ukraine");o(e).toHaveAttribute("data-foo","1"),o(e).toHaveAttribute("data-bar","2"),o(e).toHaveAttribute("data-baz","false")}},r={render:function(){return d.jsx(s,{code:"ua",alt:"Ukraine",loading:"lazy"})},play:async({canvas:t})=>{const e=t.getByAltText("Ukraine");o(e).toHaveAttribute("loading","lazy")}};var n,c,i;a.parameters={...a.parameters,docs:{...(n=a.parameters)==null?void 0:n.docs,source:{originalSource:`{
+import{j as d}from"./jsx-runtime-BTJTZTIL.js";import{e as o}from"./index-CY08ZUhp.js";import{C as s}from"./CountryFlag-2OfagIL-.js";import"./index-ChsGqxH_.js";import"./index-Cb9e4tly.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./index-DdzHuZ-Y.js";import"./getCountryFlagUrl-CP-PpZV_.js";import"./componentNames-NXEPEzbR.js";const k={title:"components/CountryFlag/Tests",component:s,args:{},tags:["!autodocs","!a11y-test","test"]},a={render:function(){return d.jsx(s,{code:"ua",alt:"Ukraine",dataset:{foo:1,bar:"2",baz:!1}})},play:async({canvas:t})=>{const e=t.getByAltText("Ukraine");o(e).toHaveAttribute("data-foo","1"),o(e).toHaveAttribute("data-bar","2"),o(e).toHaveAttribute("data-baz","false")}},r={render:function(){return d.jsx(s,{code:"ua",alt:"Ukraine",loading:"lazy"})},play:async({canvas:t})=>{const e=t.getByAltText("Ukraine");o(e).toHaveAttribute("loading","lazy")}};var n,c,i;a.parameters={...a.parameters,docs:{...(n=a.parameters)==null?void 0:n.docs,source:{originalSource:`{
   render: function Story() {
     return <CountryFlag code="ua" alt="Ukraine" dataset={{
       foo: 1,

package/dist/assets/Dialog-5t3Rt4HF.css

@@ -0,0 +1 @@
+.overlay__NM-kk{background-color:var(--02a0d5);position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--ds-dialog-overlay-z-index-override, auto)}@media (prefers-reduced-motion: no-preference){.overlay__NM-kk{animation-duration:var(--970975);animation-timing-function:var(--1f4492)}.overlay__NM-kk[data-state=open]{animation-name:opacityIn__ilHLV}.overlay__NM-kk[data-state=closed]{animation-name:opacityOut__YzYTK}}.Dialog__GqDxV{--dialog-padding: var(--1e685c);--slide-animation-distance: 100%;--show-animation-name: slideInUp__rqAX4;--hide-animation-name: slideOutDown__gIYOK;--content-padding-adjustment-for-close-button: calc(calc(var(--5eca09) + var(--813599) + var(--590b8d)) - var(--dialog-padding));box-sizing:border-box;background-color:var(--3546c3);position:fixed;right:0;bottom:0;left:0;top:auto;margin:auto;width:100%;max-height:100%;overflow-y:auto;overflow-x:hidden;border-top-left-radius:var(--fa4b1a);border-top-right-radius:var(--fa4b1a);box-shadow:var(--df7dbb);padding:var(--dialog-padding);z-index:var(--ds-dialog-content-z-index-override, auto)}.Dialog--fullheight__2W7sp{height:100%}.Dialog__GqDxV.no-border-radius__G2Oo3{border-radius:0}@media (prefers-reduced-motion: no-preference){.Dialog__GqDxV{animation-duration:.3s;animation-timing-function:cubic-bezier(.22,1,.36,1)}.Dialog__GqDxV[data-state=open]{animation-name:var(--show-animation-name)}.Dialog__GqDxV[data-state=closed]{animation-name:var(--hide-animation-name)}}@media (min-width: 880px){.Dialog__GqDxV{--dialog-padding: var(--f1b498);--slide-animation-distance: 40px;--show-animation-name: slideInUp__rqAX4, opacityIn__ilHLV;--hide-animation-name: slideOutDown__gIYOK, opacityOut__YzYTK;top:0;height:fit-content;border-radius:var(--fa4b1a);max-height:calc(100% - var(--42fccf))}.Dialog__GqDxV.slidesUp__YIWbY{--hide-animation-name: slideOutUp__h8Uo-, opacityOut__YzYTK}.Dialog--size-xs__W0yGm{width:440px;height:fit-content}.Dialog--size-sm__rE3Y-{width:520px;height:fit-content}.Dialog--size-md__HWxI4{width:640px;height:fit-content}.Dialog--size-lg__Lis4-{width:840px;height:fit-content}}@media (min-width: 880px) and (min-width: 400px){.Dialog--narrow-l--size-xs__ljCvr{width:440px;height:fit-content}}@media (min-width: 880px) and (min-width: 700px){.Dialog--medium-s--size-xs__t-4Ow{width:440px;height:fit-content}}@media (min-width: 880px) and (min-width: 880px){.Dialog--medium-l--size-xs__yc1ae{width:440px;height:fit-content}}@media (min-width: 880px) and (min-width: 1200px){.Dialog--wide-s--size-xs__Id0f5{width:440px;height:fit-content}}@media (min-width: 880px) and (min-width: 1900px){.Dialog--wide-l--size-xs__Pnlyp{width:440px;height:fit-content}}@media (min-width: 880px) and (min-width: 400px){.Dialog--narrow-l--size-sm__M8-BH{width:520px;height:fit-content}}@media (min-width: 880px) and (min-width: 700px){.Dialog--medium-s--size-sm__UPlli{width:520px;height:fit-content}}@media (min-width: 880px) and (min-width: 880px){.Dialog--medium-l--size-sm__nAW8A{width:520px;height:fit-content}}@media (min-width: 880px) and (min-width: 1200px){.Dialog--wide-s--size-sm__i0pbj{width:520px;height:fit-content}}@media (min-width: 880px) and (min-width: 1900px){.Dialog--wide-l--size-sm__PghJ-{width:520px;height:fit-content}}@media (min-width: 880px) and (min-width: 400px){.Dialog--narrow-l--size-md__8jZY3{width:640px;height:fit-content}}@media (min-width: 880px) and (min-width: 700px){.Dialog--medium-s--size-md__dQ1TZ{width:640px;height:fit-content}}@media (min-width: 880px) and (min-width: 880px){.Dialog--medium-l--size-md__kcNF8{width:640px;height:fit-content}}@media (min-width: 880px) and (min-width: 1200px){.Dialog--wide-s--size-md__KDVax{width:640px;height:fit-content}}@media (min-width: 880px) and (min-width: 1900px){.Dialog--wide-l--size-md__mV57k{width:640px;height:fit-content}}@media (min-width: 880px) and (min-width: 400px){.Dialog--narrow-l--size-lg__h5Tdx{width:840px;height:fit-content}}@media (min-width: 880px) and (min-width: 700px){.Dialog--medium-s--size-lg__qci5k{width:840px;height:fit-content}}@media (min-width: 880px) and (min-width: 880px){.Dialog--medium-l--size-lg__JCkaM{width:840px;height:fit-content}}@media (min-width: 880px) and (min-width: 1200px){.Dialog--wide-s--size-lg__eJlxf{width:840px;height:fit-content}}@media (min-width: 880px) and (min-width: 1900px){.Dialog--wide-l--size-lg__mo796{width:840px;height:fit-content}}.Dialog__GqDxV>.close__e4axJ{position:absolute;top:var(--813599);right:var(--813599);z-index:1}.Dialog__GqDxV:has(.footer__9qu1N){padding-bottom:0}.scrollEndDetector__gqxi-{height:1px;margin-top:-1px}.header__2EPvy{padding-right:var(--content-padding-adjustment-for-close-button, unset);margin-bottom:var(--b53873);display:flex;flex-direction:column;gap:var(--558c4c)}.header__2EPvy>hgroup{display:flex;flex-direction:column;gap:var(--590b8d);flex:1}@media (min-width: 880px){.header__2EPvy>hgroup{gap:var(--66b80b)}}.header__2EPvy[hidden]{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}@media (min-width: 880px){.header__2EPvy{margin-bottom:var(--1e685c);gap:var(--b53873)}}.footer__9qu1N{padding:var(--dialog-padding);margin-inline:calc(-1 * var(--dialog-padding));background-color:var(--3546c3);position:sticky;bottom:0;border-top:1px solid transparent;transition:border-color var(--970975) var(--1f4492)}.footer__9qu1N.sticky__04F4C{border-color:var(--c03289)}.actions__hIL-J{display:flex;flex-direction:column-reverse;gap:var(--813599)}@media (min-width: 400px){.actions__hIL-J{flex-direction:row;justify-content:flex-end}}.stepsActions__PtYxS{display:flex;flex-wrap:wrap-reverse;gap:var(--813599)}.stepsActions__PtYxS .previous__0eong{flex:1}.stepsActions__PtYxS .previous__0eong [data-preply-ds-component=Button]{padding-inline:var(--558c4c)}@media (min-width: 700px){.stepsActions__PtYxS .previous__0eong{margin-left:calc(-1 * (var(--0b1b71) + var(--558c4c)))}}.stepsActions__PtYxS .next__r4NuY{flex:666}.stepsActions__PtYxS .next__r4NuY:only-child{margin-left:auto}@media (min-width: 700px){.stepsActions__PtYxS{justify-content:space-between}.stepsActions__PtYxS .previous__0eong,.stepsActions__PtYxS .next__r4NuY{flex:unset}}@keyframes opacityIn__ilHLV{0%{opacity:0}to{opacity:1}}@keyframes opacityOut__YzYTK{0%{opacity:1}to{opacity:0}}@keyframes slideInUp__rqAX4{0%{transform:translateY(var(--slide-animation-distance))}to{transform:translateY(0)}}@keyframes slideOutDown__gIYOK{0%{transform:translateY(0)}to{transform:translateY(var(--slide-animation-distance))}}@keyframes slideOutUp__h8Uo-{0%{transform:translateY(0)}to{transform:translateY(calc(-1 * var(--slide-animation-distance)))}}

package/dist/assets/Dialog.stories-zkSlU40W.js

@@ -0,0 +1,405 @@
+import{j as e}from"./jsx-runtime-BTJTZTIL.js";import{r as m}from"./index-Cb9e4tly.js";import{a as y}from"./chunk-D5ZWXAHU-BhFjjRSl.js";import{f as vt,u as f,a as B,e as r}from"./index-CY08ZUhp.js";import{S as O,u as gt}from"./Steps-hgwULI7z.js";import{T as yt,D as ht,R as ft,P as bt,O as xt,C as St,a as Dt}from"./index-D21-dwfw.js";import{F as Bt}from"./TokyoUIClose-thK8sk63.js";import{I as wt}from"./IconButton-B-3o70a9.js";import{g as _t}from"./shared-strings-DFzxd8lM.js";import{u as Ct}from"./index-DWSmmBvQ.js";import{H as Tt}from"./Heading-BKJX3nsJ.js";import{T as kt}from"./Text-D3i9pJx6.js";import{u as It}from"./PortalElementProvider-CxdFl3yP.js";import{g as zt}from"./index-DdzHuZ-Y.js";import{w as X}from"./componentNames-NXEPEzbR.js";import{m as Vt,s as Rt,b as Pt}from"./classNames-BUL1Zq7e.js";import{B as v}from"./Button-B80XIKcv.js";import{A as Et}from"./Avatar-B08JWd24.js";import{F as qt}from"./TokyoUIInfo-DbkQBubr.js";import{N as Nt}from"./NumberField-B95TvbPY.js";import{I as jt}from"./Icon-CkCFpqfD.js";import"./index-ChsGqxH_.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./v4-CtRu48qb.js";import"./ProgressSteps-DQE6Rlvo.js";import"./message-CSdaKtIj.js";import"./tslib.es6-C7pnyCjR.js";import"./index-De-a_lfy.js";import"./index-BPCsOyHr.js";import"./index-BlMeVLsf.js";import"./Combination-IIMvWCmY.js";import"./render-icon-BT0Aq7PA.js";import"./ButtonBase-BS1Kc_U5.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./Spinner-BcQ2TyFf.js";import"./defaults-hwJNw1bK.js";import"./useMergeRefs-SFH7Mw4x.js";import"./useHostname-Y3PlXofY.js";import"./index-CC6DAVyL.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./text-accent-DZDDtpIt.js";import"./text-centered-CznToR0o.js";import"./constants--ewUoBsO.js";import"./FormControl-CPKPJ97_.js";import"./Input-DeHbbC7g.js";import"./InputContainer-B1hqJyx0.js";const At="overlay__NM-kk",Ht="opacityIn__ilHLV",Ot="opacityOut__YzYTK",Ft="Dialog__GqDxV",Ut="slideInUp__rqAX4",Wt="slideOutDown__gIYOK",Lt="slidesUp__YIWbY",Mt="slideOutUp__h8Uo-",Jt="close__e4axJ",Gt="footer__9qu1N",Xt="scrollEndDetector__gqxi-",Yt="header__2EPvy",Kt="sticky__04F4C",Zt="actions__hIL-J",$t="stepsActions__PtYxS",Qt="previous__0eong",ea="next__r4NuY",s={overlay:At,opacityIn:Ht,opacityOut:Ot,Dialog:Ft,slideInUp:Ut,slideOutDown:Wt,"Dialog--fullheight":"Dialog--fullheight__2W7sp","no-border-radius":"no-border-radius__G2Oo3",slidesUp:Lt,slideOutUp:Mt,"Dialog--size-xs":"Dialog--size-xs__W0yGm","Dialog--size-sm":"Dialog--size-sm__rE3Y-","Dialog--size-md":"Dialog--size-md__HWxI4","Dialog--size-lg":"Dialog--size-lg__Lis4-","Dialog--narrow-l--size-xs":"Dialog--narrow-l--size-xs__ljCvr","Dialog--medium-s--size-xs":"Dialog--medium-s--size-xs__t-4Ow","Dialog--medium-l--size-xs":"Dialog--medium-l--size-xs__yc1ae","Dialog--wide-s--size-xs":"Dialog--wide-s--size-xs__Id0f5","Dialog--wide-l--size-xs":"Dialog--wide-l--size-xs__Pnlyp","Dialog--narrow-l--size-sm":"Dialog--narrow-l--size-sm__M8-BH","Dialog--medium-s--size-sm":"Dialog--medium-s--size-sm__UPlli","Dialog--medium-l--size-sm":"Dialog--medium-l--size-sm__nAW8A","Dialog--wide-s--size-sm":"Dialog--wide-s--size-sm__i0pbj","Dialog--wide-l--size-sm":"Dialog--wide-l--size-sm__PghJ-","Dialog--narrow-l--size-md":"Dialog--narrow-l--size-md__8jZY3","Dialog--medium-s--size-md":"Dialog--medium-s--size-md__dQ1TZ","Dialog--medium-l--size-md":"Dialog--medium-l--size-md__kcNF8","Dialog--wide-s--size-md":"Dialog--wide-s--size-md__KDVax","Dialog--wide-l--size-md":"Dialog--wide-l--size-md__mV57k","Dialog--narrow-l--size-lg":"Dialog--narrow-l--size-lg__h5Tdx","Dialog--medium-s--size-lg":"Dialog--medium-s--size-lg__qci5k","Dialog--medium-l--size-lg":"Dialog--medium-l--size-lg__JCkaM","Dialog--wide-s--size-lg":"Dialog--wide-s--size-lg__eJlxf","Dialog--wide-l--size-lg":"Dialog--wide-l--size-lg__mo796",close:Jt,footer:Gt,scrollEndDetector:Xt,header:Yt,sticky:Kt,actions:Zt,stepsActions:$t,previous:Qt,next:ea},j=({className:t="",children:a})=>{const n=m.useRef(null),l=m.useRef(null);return m.useLayoutEffect(()=>{if(!l.current||!n.current)return;const i=new IntersectionObserver(([o])=>{var d,p;o.isIntersecting?(d=l.current)==null||d.classList.remove(s.sticky):(p=l.current)==null||p.classList.add(s.sticky)},{root:l.current.closest("[role=dialog]"),rootMargin:`0px 0px -${l.current.offsetHeight}px 0px`});return i.observe(n.current),()=>i.disconnect()},[]),e.jsxs(e.Fragment,{children:[e.jsx("div",{className:s.scrollEndDetector,ref:n}),e.jsx("div",{className:`${s.footer} ${t}`,ref:l,children:a})]})};try{j.displayName="DialogFooter",j.__docgenInfo={description:"",displayName:"DialogFooter",props:{className:{defaultValue:{value:""},description:"",name:"className",required:!1,type:{name:"enum",value:[{value:"string"}]}}}}}catch{}const U=({primaryButton:t,secondaryButton:a})=>{const n=m.useCallback(l=>{var i;(i=l.currentTarget.closest("[role=dialog]"))==null||i.classList.add(s.slidesUp)},[]);return e.jsxs(j,{className:s.actions,children:[a,e.jsx("div",{style:{display:"contents"},onClick:n,children:t})]})};try{U.displayName="DialogActions",U.__docgenInfo={description:"",displayName:"DialogActions",props:{primaryButton:{defaultValue:null,description:`Primary action button.
+@example <DialogActions
+ primaryButton={<Button size="medium" variant="primary" onClick={() => {}}>Let's go</Button>}
+/>`,name:"primaryButton",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"}]}},secondaryButton:{defaultValue:null,description:`Secondary action button.
+@example <DialogActions
+ secondaryButton={<Button size="medium" variant="tertiary" onClick={() => {}}>Cancel</Button>}
+/>`,name:"secondaryButton",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"}]}}}}}catch{}const W=O,L=O.Step,A=O.Next,H=O.Previous;function M({primaryButton:t,nextButton:a=e.jsx(A,{}),previousButton:n=e.jsx(H,{})}){const{currentStep:l,totalSteps:i}=gt(),o=l===1,d=l===i;return e.jsxs(j,{className:s.stepsActions,children:[!o&&e.jsx("div",{className:s.previous,children:n}),e.jsx("div",{className:s.next,children:d?t:a})]})}try{M.displayName="DialogStepsActions",M.__docgenInfo={description:"Wrapper around the Steps actions for usage in Dialog.",displayName:"DialogStepsActions",props:{primaryButton:{defaultValue:null,description:`Primary action button.
+
+This button will be displayed on the last step.
+@example <DialogStepsActions
+ primaryButton={<Button size="medium" variant="primary" onClick={() => {}}>Finish</Button>}
+/>`,name:"primaryButton",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"}]}},nextButton:{defaultValue:{value:"<DialogStepsNext />"},description:`Next step button.
+
+This button will be used on all steps except the last one. When not provided, a default button will be used.
+@example <DialogStepsActions
+ nextButton={<DialogStepsNext onClick={() => {}}>Next</DialogStepsNext>}
+/>`,name:"nextButton",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"}]}},previousButton:{defaultValue:{value:"<DialogStepsPrevious />"},description:`Previous step button.
+
+This button will be used on all steps except the first one. When not provided, a default button will be used.
+@example <DialogStepsActions
+ previousButton={<DialogStepsPrevious onClick={() => {}}>Previous</DialogStepsPrevious>}
+/>`,name:"previousButton",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"}]}}}}}catch{}try{W.displayName="DialogSteps",W.__docgenInfo={description:"",displayName:"DialogSteps",props:{"aria-label":{defaultValue:null,description:`A description of the step flow and its content for screen readers.
+@example 'Onboarding Steps', 'Checkout Steps', 'Survey Steps', etc.`,name:"aria-label",required:!0,type:{name:"string"}},initialStep:{defaultValue:{value:"1"},description:"The initial step to start at (from `1` to `children.length`).",name:"initialStep",required:!1,type:{name:"enum",value:[{value:"number"}]}},onStepChange:{defaultValue:null,description:`Optional callback to control navigation between steps.
+
+This is triggered either by using the \`Steps.Previous\` and \`Steps.Next\`
+components, or by calling \`goToPreviousStep\`, \`goToNextStep\`, or
+\`goToStep\` from the \`StepsContext\`.
+
+Can be used to:
+- Skip/redirect steps conditionally
+- Perform async process (e.g. validation) on step changes, marking the
+  element as busy/loading
+@param currentStep The current step (1-based)
+@param nextStep The next, incoming step
+@returns Promise that resolves to:
+- \`undefined\`: proceed with default navigation
+- \`number\`: override the destination step
+@example Add async validation
+const handleStepChange = async (current, next) => {
+await validateStep(current);
+return next;
+};
+@example Skip a step
+const handleStepChange = async (current, next) => {
+if (next === 2) return 3; // Skip step 2
+return next;
+};`,name:"onStepChange",required:!1,type:{name:"enum",value:[{value:"(currentStep: number, nextStep: number) => number | Promise<number | undefined> | undefined"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}}}}}catch{}try{L.displayName="DialogStep",L.__docgenInfo={description:"",displayName:"DialogStep",props:{title:{defaultValue:null,description:"Main heading for the step.",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:"Optional description text displayed below the title.",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"}]}},hideHeader:{defaultValue:null,description:"If true, hides the step title and description.",name:"hideHeader",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},children:{defaultValue:null,description:"Step content.",name:"children",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}}}}}catch{}try{A.displayName="DialogStepsNext",A.__docgenInfo={description:"",displayName:"DialogStepsNext",props:{size:{defaultValue:null,description:"",name:"size",required:!1,type:{name:"enum",value:[{value:'"small"'},{value:'"medium"'},{value:'"large"'},{value:'"xs"'},{value:'"s"'},{value:'"m"'},{value:'"l"'},{value:'"xl"'},{value:"ResponsiveProp<ButtonSize>"}]}},variant:{defaultValue:null,description:"",name:"variant",required:!1,type:{name:"enum",value:[{value:'"primary"'},{value:'"secondary"'},{value:'"tertiary"'},{value:'"quaternary"'},{value:'"ghost"'},{value:'"plain"'},{value:'"dangerous"'},{value:'"critical"'},{value:'"onColor"'},{value:'"classroom"'},{value:'"primaryB2b"'},{value:'"primaryTutor"'},{value:'"inverted"'},{value:'"newFeature"'},{value:'"ai"'}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},id:{defaultValue:null,description:"",name:"id",required:!1,type:{name:"enum",value:[{value:"string"}]}},fullWidth:{defaultValue:null,description:"",name:"fullWidth",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:"ResponsiveProp<boolean>"}]}},wrap:{defaultValue:null,description:"",name:"wrap",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},href:{defaultValue:null,description:"",name:"href",required:!1,type:{name:"enum",value:[{value:"string"}]}},download:{defaultValue:null,description:"",name:"download",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},opensInNewTab:{defaultValue:null,description:"",name:"opensInNewTab",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},nofollow:{defaultValue:null,description:"",name:"nofollow",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},submitsForm:{defaultValue:null,description:"",name:"submitsForm",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},assistiveText:{defaultValue:null,description:"",name:"assistiveText",required:!1,type:{name:"enum",value:[{value:"string"}]}},onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler"}]}},disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},busy:{defaultValue:null,description:"Replaces the content with a loading indicator.",name:"busy",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},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"}]}},a11yLabel:{defaultValue:null,description:"@deprecated Use `assistiveText` instead",name:"a11yLabel",required:!1,type:{name:"enum",value:[{value:"string"}]}},leadingSvgIcon:{defaultValue:null,description:`The leading SVG icon.
+@example import TokyoUITag from '@preply/ds-media-icons/dist/24/TokyoUITag.svg';
+
+<Button leadingSvgIcon={TokyoUITag}>Button</Button>
+or
+<Button leadingSvgIcon={<TokyoUITag />}>Button</Button>`,name:"leadingSvgIcon",required:!1,type:{name:"enum",value:[{value:"ComponentClass<SVGAttributes<SVGElement>, any>"},{value:"FunctionComponent<SVGAttributes<SVGElement>>"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"}]}},trailingSvgIcon:{defaultValue:null,description:`@deprecated Trailing icons have been removed from the platform.
+
+The trailing SVG icon.
+@example import TokyoUITag from '@preply/ds-media-icons/dist/24/TokyoUITag.svg';
+
+<Button trailingSvgIcon={TokyoUITag}>Button</Button>
+or
+<Button trailingSvgIcon={<TokyoUITag />}>Button</Button>`,name:"trailingSvgIcon",required:!1,type:{name:"enum",value:[{value:"ComponentClass<SVGAttributes<SVGElement>, any>"},{value:"FunctionComponent<SVGAttributes<SVGElement>>"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: HTMLAnchorElement | HTMLButtonElement | null) => void"},{value:"RefObject<HTMLAnchorElement | HTMLButtonElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}try{H.displayName="DialogStepsPrevious",H.__docgenInfo={description:"",displayName:"DialogStepsPrevious",props:{size:{defaultValue:null,description:"",name:"size",required:!1,type:{name:"enum",value:[{value:'"small"'},{value:'"medium"'},{value:'"large"'},{value:'"xs"'},{value:'"s"'},{value:'"m"'},{value:'"l"'},{value:'"xl"'},{value:"ResponsiveProp<ButtonSize>"}]}},variant:{defaultValue:null,description:"",name:"variant",required:!1,type:{name:"enum",value:[{value:'"primary"'},{value:'"secondary"'},{value:'"tertiary"'},{value:'"quaternary"'},{value:'"ghost"'},{value:'"plain"'},{value:'"dangerous"'},{value:'"critical"'},{value:'"onColor"'},{value:'"classroom"'},{value:'"primaryB2b"'},{value:'"primaryTutor"'},{value:'"inverted"'},{value:'"newFeature"'},{value:'"ai"'}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},id:{defaultValue:null,description:"",name:"id",required:!1,type:{name:"enum",value:[{value:"string"}]}},fullWidth:{defaultValue:null,description:"",name:"fullWidth",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:"ResponsiveProp<boolean>"}]}},wrap:{defaultValue:null,description:"",name:"wrap",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},href:{defaultValue:null,description:"",name:"href",required:!1,type:{name:"enum",value:[{value:"string"}]}},download:{defaultValue:null,description:"",name:"download",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},opensInNewTab:{defaultValue:null,description:"",name:"opensInNewTab",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},nofollow:{defaultValue:null,description:"",name:"nofollow",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},submitsForm:{defaultValue:null,description:"",name:"submitsForm",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},assistiveText:{defaultValue:null,description:"",name:"assistiveText",required:!1,type:{name:"enum",value:[{value:"string"}]}},onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler"}]}},disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},busy:{defaultValue:null,description:"Replaces the content with a loading indicator.",name:"busy",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},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"}]}},a11yLabel:{defaultValue:null,description:"@deprecated Use `assistiveText` instead",name:"a11yLabel",required:!1,type:{name:"enum",value:[{value:"string"}]}},leadingSvgIcon:{defaultValue:null,description:`The leading SVG icon.
+@example import TokyoUITag from '@preply/ds-media-icons/dist/24/TokyoUITag.svg';
+
+<Button leadingSvgIcon={TokyoUITag}>Button</Button>
+or
+<Button leadingSvgIcon={<TokyoUITag />}>Button</Button>`,name:"leadingSvgIcon",required:!1,type:{name:"enum",value:[{value:"ComponentClass<SVGAttributes<SVGElement>, any>"},{value:"FunctionComponent<SVGAttributes<SVGElement>>"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"}]}},trailingSvgIcon:{defaultValue:null,description:`@deprecated Trailing icons have been removed from the platform.
+
+The trailing SVG icon.
+@example import TokyoUITag from '@preply/ds-media-icons/dist/24/TokyoUITag.svg';
+
+<Button trailingSvgIcon={TokyoUITag}>Button</Button>
+or
+<Button trailingSvgIcon={<TokyoUITag />}>Button</Button>`,name:"trailingSvgIcon",required:!1,type:{name:"enum",value:[{value:"ComponentClass<SVGAttributes<SVGElement>, any>"},{value:"FunctionComponent<SVGAttributes<SVGElement>>"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: HTMLAnchorElement | HTMLButtonElement | null) => void"},{value:"RefObject<HTMLAnchorElement | HTMLButtonElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}const J=({title:t,description:a,hidden:n,leadingElement:l=null})=>e.jsxs("header",{className:s.header,hidden:n,children:[l,e.jsxs("hgroup",{children:[e.jsx(yt,{asChild:!0,children:e.jsx(Tt,{tag:"h3",variant:{_:"medium","medium-l":"large"},children:t})}),a&&e.jsx(ht,{asChild:!0,children:e.jsx(kt,{variant:"default-regular",accent:"secondary",children:a})})]})]});try{J.displayName="DialogHeader",J.__docgenInfo={description:"",displayName:"DialogHeader",props:{title:{defaultValue:null,description:"Title displayed in the dialog header",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:"Optional description displayed below the title",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"}]}},hidden:{defaultValue:{value:"false"},description:`When true, visually hides the header (title and description) while
+keeping it accessible to screen readers`,name:"hidden",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},leadingElement:{defaultValue:{value:"null"},description:`Optional leading element displayed above the title.
+Might be an icon or an avatar.
+@example import TokyoUINotesWithPad from '@preply/ds-media-icons/dist/24/TokyoUINotesWithPad.svg';
+
+<Dialog
+ leadingElement={
+   <Icon size="32" svg={TokyoUINotesWithPad} />
+ }
+/>
+@example <Dialog
+ leadingElement={
+   <Avatar size="48" src="https://example.com/avatar.jpg" />
+ }
+/>`,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"}]}}}}}catch{}const G=({open:t,title:a,description:n,leadingElement:l,children:i,size:o="md",hideHeader:d,onClose:p,mobileFullHeight:F,dataset:rt})=>{const{formatMessage:ot}=Ct(),st=It(),ut=ta(t),dt=zt(rt,{preplyDsComponent:X.Dialog}),ct=Vt(s,X.Dialog,[Rt("size",o),Pt("fullheight",void 0,F)]).join(" "),mt=m.useCallback(pt=>{pt||p==null||p()},[p]);return e.jsx(ft,{open:t,onOpenChange:mt,children:e.jsxs(bt,{container:st,children:[e.jsx(xt,{className:s.overlay,"data-testid":"dialog-overlay"}),e.jsxs(St,{...dt,ref:ut,className:ct,children:[e.jsx(J,{title:a,description:n,hidden:d,leadingElement:l}),e.jsx("div",{className:s.close,children:e.jsx(Dt,{asChild:!0,children:e.jsx(wt,{size:"small",variant:"ghost",dataset:{testid:"dialog-close"},assistiveText:ot(_t.close),svg:Bt})})}),i]})]})})};function ta(t){const[a,n]=m.useState(null),l=m.useCallback(i=>n(i),[]);return m.useEffect(()=>{if(!t||!a)return;const i=async()=>{const d=a.getAnimations().map(F=>F.finished);await Promise.allSettled(d);const{y:p}=a.getBoundingClientRect();a.classList.toggle(s["no-border-radius"],p===0)};i(),window.addEventListener("resize",i);const o=new ResizeObserver(i);return o.observe(a),()=>{window.removeEventListener("resize",i),o.disconnect()}},[t,a]),l}try{G.displayName="Dialog",G.__docgenInfo={description:"",displayName:"Dialog",props:{title:{defaultValue:null,description:"Title displayed in the dialog header",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:"Optional description displayed below the title",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:`Optional leading element displayed above the title.
+Might be an icon or an avatar.
+@example import TokyoUINotesWithPad from '@preply/ds-media-icons/dist/24/TokyoUINotesWithPad.svg';
+
+<Dialog
+ leadingElement={
+   <Icon size="32" svg={TokyoUINotesWithPad} />
+ }
+/>
+@example <Dialog
+ leadingElement={
+   <Avatar size="48" src="https://example.com/avatar.jpg" />
+ }
+/>`,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"}]}},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">'}]}},hideHeader:{defaultValue:{value:"false"},description:`When true, visually hides the header (title and description) while
+keeping it accessible to screen readers`,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{}const c=Object.assign(G,{Actions:U,Steps:W,Step:L,StepsActions:M,StepsNext:A,StepsPrevious:H}),g=()=>e.jsx("div",{style:{width:"100%",height:"200px",background:"linear-gradient(to bottom, color-mix(in srgb, #e0e0e0, transparent), #e0e0e0)"}});let it=()=>{};const aa=(t,a)=>{const[n,l]=m.useState(a.args.open);it=()=>l(!1);const i=()=>{var o,d;l(!1),(d=(o=a.args).onClose)==null||d.call(o)};return e.jsxs(e.Fragment,{children:[e.jsx(v,{dataset:{testid:"trigger"},onClick:()=>l(!0),children:"Open"}),e.jsx(t,{args:{...a.args,open:n,onClose:i}})]})},u={title:"Components/Dialog",component:c,parameters:{docs:{story:{inline:!1,height:600}}},decorators:[aa],args:{onClose:vt(),children:e.jsx(g,{}),dataset:{testid:"dialog"}},play:async({canvas:t,step:a})=>{await a("Open dialog",async()=>{const n=t.getByTestId("trigger");return await f.click(n),B(()=>{r(t.getByTestId("dialog")).toBeVisible()})})}},w={args:{title:"Dialog title",children:e.jsxs(e.Fragment,{children:[e.jsx(g,{}),e.jsx(c.Actions,{primaryButton:e.jsx(v,{size:"medium",variant:"primary",onClick:()=>{y("Primary button clicked"),it()},children:"Primary"}),secondaryButton:e.jsx(v,{size:"medium",variant:"tertiary",onClick:y("Secondary button clicked"),children:"Secondary"})})]})}},_={tags:["!autodocs","!dev"],args:{size:"xs",title:"Extra Small Dialog"}},C={tags:["!autodocs","!dev"],args:{size:"sm",title:"Small Dialog"}},T={tags:["!autodocs","!dev"],args:{size:"md",title:"Medium Dialog"}},k={tags:["!autodocs","!dev"],args:{size:"lg",title:"Large Dialog"}},b={tags:["!autodocs","!dev"],args:{size:{_:"xs","medium-l":"lg"},title:"Width Responsiveness",description:"Change the window width to see the Dialog width respond to it"}},na=()=>{const[t,a]=m.useState(1);return e.jsxs(e.Fragment,{children:[e.jsx(Nt,{label:"Child count",value:t,onChange:n=>a(parseInt(n.target.value)),required:!0}),e.jsx("br",{}),Array.from({length:t},(n,l)=>e.jsx(g,{},l))]})},I={args:{title:"Height Responsiveness",description:"Change the number of children to see the Dialog style respond to the height change",children:e.jsxs(e.Fragment,{children:[e.jsx(na,{}),e.jsx(c.Actions,{primaryButton:e.jsx(v,{size:"medium",variant:"primary",onClick:y("Primary button clicked"),children:"Primary"}),secondaryButton:e.jsx(v,{size:"medium",variant:"tertiary",onClick:y("Secondary button clicked"),children:"Secondary"})})]})}},z={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:"Visually Hidden Title",description:"This header is hidden visually but still accessible to screen readers",hideHeader:!0}},R={args:{title:"Dialog Title",description:"This is the dialog description.",children:e.jsxs(e.Fragment,{children:[e.jsx(g,{}),e.jsx(c.Actions,{primaryButton:e.jsx(v,{size:"medium",variant:"primary",onClick:y("Primary button clicked"),children:"Primary"})})]})}},P={args:{title:"Dialog Title",description:"This is the dialog description.",children:e.jsxs(e.Fragment,{children:[e.jsx(g,{}),e.jsx(c.Actions,{primaryButton:e.jsx(v,{size:"medium",variant:"primary",onClick:y("Primary button clicked"),children:"Primary"}),secondaryButton:e.jsx(v,{size:"medium",variant:"tertiary",onClick:y("Secondary button clicked"),children:"Secondary"})})]})}},x={args:{title:"Hidden Dialog Title",hideHeader:!0,children:e.jsx(e.Fragment,{children:e.jsxs(c.Steps,{"aria-label":"Onboarding Steps",children:[e.jsx(c.Step,{title:"Profile",description:"Tell us more about yourself",children:e.jsx(g,{})}),e.jsx(c.Step,{title:"Subject",description:"What do you want to learn?",children:e.jsx(g,{})}),e.jsx(c.Step,{title:"Availability",description:"When are you available?",children:e.jsx(g,{})}),e.jsx(c.StepsActions,{primaryButton:e.jsx(v,{size:"medium",variant:"primary",onClick:y("Primary button clicked"),children:"Primary"})})]})})},play:async t=>{var l;await((l=u.play)==null?void 0:l.call(u,t));const{canvas:a,step:n}=t;await n("Initially, only next button is present",async()=>{r(a.queryByRole("button",{name:"Next"})).toBeVisible(),r(a.queryByRole("button",{name:"Previous"})).not.toBeInTheDocument(),r(a.queryByRole("button",{name:"Primary"})).not.toBeInTheDocument()}),await n("Navigate to the next step. Previous/Next buttons are visible",async()=>{await f.click(a.getByRole("button",{name:"Next"})),r(a.queryByRole("button",{name:"Previous"})).toBeVisible(),r(a.queryByRole("button",{name:"Next"})).toBeVisible(),r(a.queryByRole("button",{name:"Primary"})).not.toBeInTheDocument()}),await n("Navigate to the last step. Previous/Primary buttons are visible",async()=>{await f.click(a.getByRole("button",{name:"Next"})),r(a.queryByRole("button",{name:"Previous"})).toBeVisible(),r(a.queryByRole("button",{name:"Primary"})).toBeVisible(),r(a.queryByRole("button",{name:"Next"})).not.toBeInTheDocument()})}},S={args:{leadingElement:e.jsx(jt,{size:"32",svg:qt}),title:"Information Dialog"}},D={args:{leadingElement:e.jsx(Et,{size:"48",alt:"User"}),title:"User Profile",description:"This dialog shows a user profile with an avatar in the title"}},h=t=>(m.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")}),[]),e.jsx("div",{style:{position:"relative",zIndex:99},children:e.jsx(c,{...t,title:"ZIndex Override"})}));h.parameters={docs:{source:{type:"code"}}};h.play=async({canvas:t,step:a})=>{await a("Open alert",async()=>(await f.click(t.getByTestId("trigger")),B(()=>{const n=t.getByTestId("dialog");r(n).toBeVisible()}))),await a("Check content's computed z-index",async()=>{const n=t.getByTestId("dialog"),l=getComputedStyle(n);r(l.zIndex).toBe("77")}),await a("Check overlay's computed z-index",async()=>{const n=t.getByTestId("dialog").previousElementSibling;if(!n)throw new Error("The overlay happened to be the previous sibling of the dialog content, but it isn't anymore. Please update the test.");const l=getComputedStyle(n);r(l.zIndex).toBe("88")})};const E={tags:["!autodocs","!dev"],args:{title:"Test Close Button"},play:async t=>{var i;await((i=u.play)==null?void 0:i.call(u,t));const{canvas:a,step:n,args:l}=t;await n("Close dialog using close button",async()=>{const o=a.getByTestId("dialog-close");return await f.click(o),B(async()=>(await r(a.getByTestId("dialog")).not.toBeVisible(),r(l.onClose).toHaveBeenCalledOnce()))})}},q={tags:["!autodocs","!dev"],args:{title:"Test Close Overlay"},play:async t=>{var i;await((i=u.play)==null?void 0:i.call(u,t));const{canvas:a,step:n,args:l}=t;await n("Close dialog by clicking overlay",async()=>{const o=a.getByTestId("dialog-overlay");return await f.click(o),B(async()=>(await r(a.getByTestId("dialog")).not.toBeVisible(),r(l.onClose).toHaveBeenCalledOnce()))})}},N={tags:["!autodocs","!dev"],args:{title:"Test Close Keyboard"},play:async t=>{var i;await((i=u.play)==null?void 0:i.call(u,t));const{canvas:a,step:n,args:l}=t;await n("Close dialog using escape key",async()=>(await f.keyboard("{Escape}"),B(async()=>(await r(a.getByTestId("dialog")).not.toBeVisible(),r(l.onClose).toHaveBeenCalledOnce()))))}};var Y,K,Z;w.parameters={...w.parameters,docs:{...(Y=w.parameters)==null?void 0:Y.docs,source:{originalSource:`{
+  args: {
+    title: 'Dialog title',
+    children: <>
+                <DummyContent />
+                <Dialog.Actions primaryButton={<Button size="medium" variant="primary" onClick={() => {
+        action('Primary button clicked');
+        closeDialog();
+      }}>
+                            Primary
+                        </Button>} secondaryButton={<Button size="medium" variant="tertiary" onClick={action('Secondary button clicked')}>
+                            Secondary
+                        </Button>} />
+            </>
+  }
+}`,...(Z=(K=w.parameters)==null?void 0:K.docs)==null?void 0:Z.source}}};var $,Q,ee;_.parameters={..._.parameters,docs:{...($=_.parameters)==null?void 0:$.docs,source:{originalSource:`{
+  tags: ['!autodocs', '!dev'],
+  args: {
+    size: 'xs',
+    title: 'Extra Small Dialog'
+  }
+}`,...(ee=(Q=_.parameters)==null?void 0:Q.docs)==null?void 0:ee.source}}};var te,ae,ne;C.parameters={...C.parameters,docs:{...(te=C.parameters)==null?void 0:te.docs,source:{originalSource:`{
+  tags: ['!autodocs', '!dev'],
+  args: {
+    size: 'sm',
+    title: 'Small Dialog'
+  }
+}`,...(ne=(ae=C.parameters)==null?void 0:ae.docs)==null?void 0:ne.source}}};var le,ie,re;T.parameters={...T.parameters,docs:{...(le=T.parameters)==null?void 0:le.docs,source:{originalSource:`{
+  tags: ['!autodocs', '!dev'],
+  args: {
+    size: 'md',
+    title: 'Medium Dialog'
+  }
+}`,...(re=(ie=T.parameters)==null?void 0:ie.docs)==null?void 0:re.source}}};var oe,se,ue;k.parameters={...k.parameters,docs:{...(oe=k.parameters)==null?void 0:oe.docs,source:{originalSource:`{
+  tags: ['!autodocs', '!dev'],
+  args: {
+    size: 'lg',
+    title: 'Large Dialog'
+  }
+}`,...(ue=(se=k.parameters)==null?void 0:se.docs)==null?void 0:ue.source}}};var de,ce,me,pe,ve;b.parameters={...b.parameters,docs:{...(de=b.parameters)==null?void 0:de.docs,source:{originalSource:`{
+  tags: ['!autodocs', '!dev'],
+  args: {
+    size: {
+      _: 'xs',
+      'medium-l': 'lg'
+    },
+    title: 'Width Responsiveness',
+    description: 'Change the window width to see the Dialog width respond to it'
+  }
+}`,...(me=(ce=b.parameters)==null?void 0:ce.docs)==null?void 0:me.source},description:{story:`The Dialog component adapts to different screen sizes through responsive size props.
+Use an object with breakpoints as keys to specify different sizes at different viewport widths:
+
+\`\`\`tsx
+<Dialog
+  size={{
+    _: 'xs',
+    'medium-l': 'lg'
+  }}
+/>
+\`\`\``,...(ve=(pe=b.parameters)==null?void 0:pe.docs)==null?void 0:ve.description}}};var ge,ye,he;I.parameters={...I.parameters,docs:{...(ge=I.parameters)==null?void 0:ge.docs,source:{originalSource:`{
+  args: {
+    title: 'Height Responsiveness',
+    description: 'Change the number of children to see the Dialog style respond to the height change',
+    children: <>
+                <DynamicChildren />
+                <Dialog.Actions primaryButton={<Button size="medium" variant="primary" onClick={action('Primary button clicked')}>
+                            Primary
+                        </Button>} secondaryButton={<Button size="medium" variant="tertiary" onClick={action('Secondary button clicked')}>
+                            Secondary
+                        </Button>} />
+            </>
+  }
+}`,...(he=(ye=I.parameters)==null?void 0:ye.docs)==null?void 0:he.source}}};var fe,be,xe;z.parameters={...z.parameters,docs:{...(fe=z.parameters)==null?void 0:fe.docs,source:{originalSource:`{
+  parameters: {
+    chromatic: {
+      modes: {
+        'narrow-l': {
+          viewport: 'narrow-l'
+        },
+        'medium-s': {
+          viewport: 'medium-s'
+        },
+        'medium-l': {
+          viewport: 'medium-l'
+        }
+      }
+    }
+  },
+  args: {
+    title: 'Mobile Full Height',
+    mobileFullHeight: true
+  }
+}`,...(xe=(be=z.parameters)==null?void 0:be.docs)==null?void 0:xe.source}}};var Se,De,Be;V.parameters={...V.parameters,docs:{...(Se=V.parameters)==null?void 0:Se.docs,source:{originalSource:`{
+  args: {
+    title: 'Visually Hidden Title',
+    description: 'This header is hidden visually but still accessible to screen readers',
+    hideHeader: true
+  }
+}`,...(Be=(De=V.parameters)==null?void 0:De.docs)==null?void 0:Be.source}}};var we,_e,Ce;R.parameters={...R.parameters,docs:{...(we=R.parameters)==null?void 0:we.docs,source:{originalSource:`{
+  args: {
+    title: 'Dialog Title',
+    description: 'This is the dialog description.',
+    children: <>
+                <DummyContent />
+                <Dialog.Actions primaryButton={<Button size="medium" variant="primary" onClick={action('Primary button clicked')}>
+                            Primary
+                        </Button>} />
+            </>
+  }
+}`,...(Ce=(_e=R.parameters)==null?void 0:_e.docs)==null?void 0:Ce.source}}};var Te,ke,Ie;P.parameters={...P.parameters,docs:{...(Te=P.parameters)==null?void 0:Te.docs,source:{originalSource:`{
+  args: {
+    title: 'Dialog Title',
+    description: 'This is the dialog description.',
+    children: <>
+                <DummyContent />
+                <Dialog.Actions primaryButton={<Button size="medium" variant="primary" onClick={action('Primary button clicked')}>
+                            Primary
+                        </Button>} secondaryButton={<Button size="medium" variant="tertiary" onClick={action('Secondary button clicked')}>
+                            Secondary
+                        </Button>} />
+            </>
+  }
+}`,...(Ie=(ke=P.parameters)==null?void 0:ke.docs)==null?void 0:Ie.source}}};var ze,Ve,Re,Pe,Ee;x.parameters={...x.parameters,docs:{...(ze=x.parameters)==null?void 0:ze.docs,source:{originalSource:`{
+  args: {
+    title: 'Hidden Dialog Title',
+    hideHeader: true,
+    children: <>
+                <Dialog.Steps aria-label="Onboarding Steps">
+                    <Dialog.Step title="Profile" description="Tell us more about yourself">
+                        <DummyContent />
+                    </Dialog.Step>
+                    <Dialog.Step title="Subject" description="What do you want to learn?">
+                        <DummyContent />
+                    </Dialog.Step>
+                    <Dialog.Step title="Availability" description="When are you available?">
+                        <DummyContent />
+                    </Dialog.Step>
+                    <Dialog.StepsActions primaryButton={<Button size="medium" variant="primary" onClick={action('Primary button clicked')}>
+                                Primary
+                            </Button>} />
+                </Dialog.Steps>
+            </>
+  },
+  /**
+   * This story only tests dialog-specific behavior. See \`Steps\` stories for more comprehensive tests.
+   */
+  play: async ctx => {
+    await meta.play?.(ctx);
+    const {
+      canvas,
+      step
+    } = ctx;
+    await step('Initially, only next button is present', async () => {
+      expect(canvas.queryByRole('button', {
+        name: 'Next'
+      })).toBeVisible();
+      expect(canvas.queryByRole('button', {
+        name: 'Previous'
+      })).not.toBeInTheDocument();
+      expect(canvas.queryByRole('button', {
+        name: 'Primary'
+      })).not.toBeInTheDocument();
+    });
+    await step('Navigate to the next step. Previous/Next buttons are visible', async () => {
+      await userEvent.click(canvas.getByRole('button', {
+        name: 'Next'
+      }));
+      expect(canvas.queryByRole('button', {
+        name: 'Previous'
+      })).toBeVisible();
+      expect(canvas.queryByRole('button', {
+        name: 'Next'
+      })).toBeVisible();
+      expect(canvas.queryByRole('button', {
+        name: 'Primary'
+      })).not.toBeInTheDocument();
+    });
+    await step('Navigate to the last step. Previous/Primary buttons are visible', async () => {
+      await userEvent.click(canvas.getByRole('button', {
+        name: 'Next'
+      }));
+      expect(canvas.queryByRole('button', {
+        name: 'Previous'
+      })).toBeVisible();
+      expect(canvas.queryByRole('button', {
+        name: 'Primary'
+      })).toBeVisible();
+      expect(canvas.queryByRole('button', {
+        name: 'Next'
+      })).not.toBeInTheDocument();
+    });
+  }
+}`,...(Re=(Ve=x.parameters)==null?void 0:Ve.docs)==null?void 0:Re.source},description:{story:"The Dialog component can be used with the Steps component to create multi-step flows.\nYou can hide the Dialog's header using \\`hideHeader\\` and add your own headers to each step,\nlike in this story.",...(Ee=(Pe=x.parameters)==null?void 0:Pe.docs)==null?void 0:Ee.description}}};var qe,Ne,je,Ae,He;S.parameters={...S.parameters,docs:{...(qe=S.parameters)==null?void 0:qe.docs,source:{originalSource:`{
+  args: {
+    leadingElement: <Icon size="32" svg={InfoIcon} />,
+    title: 'Information Dialog'
+  }
+}`,...(je=(Ne=S.parameters)==null?void 0:Ne.docs)==null?void 0:je.source},description:{story:"A dialog with an Icon component in the title. This demonstrates how to use React elements in the title.",...(He=(Ae=S.parameters)==null?void 0:Ae.docs)==null?void 0:He.description}}};var Oe,Fe,Ue,We,Le;D.parameters={...D.parameters,docs:{...(Oe=D.parameters)==null?void 0:Oe.docs,source:{originalSource:`{
+  args: {
+    leadingElement: <Avatar size="48" alt="User" />,
+    title: 'User Profile',
+    description: 'This dialog shows a user profile with an avatar in the title'
+  }
+}`,...(Ue=(Fe=D.parameters)==null?void 0:Fe.docs)==null?void 0:Ue.source},description:{story:"A dialog with an Avatar component in the title. This demonstrates how to use compound components in the title.",...(Le=(We=D.parameters)==null?void 0:We.docs)==null?void 0:Le.description}}};var Me,Je,Ge,Xe,Ye;h.parameters={...h.parameters,docs:{...(Me=h.parameters)==null?void 0:Me.docs,source:{originalSource:`args => {
+  useEffect(() => {
+    document.body.style.setProperty('--ds-dialog-overlay-z-index-override', '88');
+    document.body.style.setProperty('--ds-dialog-content-z-index-override', '77');
+    return () => {
+      document.body.style.removeProperty('--ds-dialog-overlay-z-index-override');
+      document.body.style.removeProperty('--ds-dialog-content-z-index-override');
+    };
+  }, []);
+  return <div style={{
+    position: 'relative',
+    zIndex: 99
+  }}>
+            <Dialog {...args} title="ZIndex Override" />
+        </div>;
+}`,...(Ge=(Je=h.parameters)==null?void 0:Je.docs)==null?void 0:Ge.source},description:{story:`The Dialog component provides CSS property escape hatches for controlling the z-index of both the overlay and content:
+
+- \\\`--ds-dialog-overlay-z-index-override\\\`: Controls the overlay's z-index
+- \\\`--ds-dialog-content-z-index-override\\\`: Controls the content's z-index
+
+These should only be used when necessary, as proper stacking context isolation is preferred.
+
+In the following example, the stacking order of the dialog trigger, overlay, and content are
+reveresed using the above CSS properties.
+
+Note: This is done using a \\\`useEffect\\\` just for the sake of the story. In a real-world scenario, this should ideally be done in a global stylesheet or a theme provider.`,...(Ye=(Xe=h.parameters)==null?void 0:Xe.docs)==null?void 0:Ye.description}}};var Ke,Ze,$e;E.parameters={...E.parameters,docs:{...(Ke=E.parameters)==null?void 0:Ke.docs,source:{originalSource:`{
+  tags: ['!autodocs', '!dev'],
+  args: {
+    title: 'Test Close Button'
+  },
+  play: async ctx => {
+    await meta.play?.(ctx);
+    const {
+      canvas,
+      step,
+      args
+    } = ctx;
+    await step('Close dialog using close button', async () => {
+      const closeButton = canvas.getByTestId('dialog-close');
+      await userEvent.click(closeButton);
+      return waitFor(async () => {
+        await expect(canvas.getByTestId('dialog')).not.toBeVisible();
+        return expect(args.onClose).toHaveBeenCalledOnce();
+      });
+    });
+  }
+}`,...($e=(Ze=E.parameters)==null?void 0:Ze.docs)==null?void 0:$e.source}}};var Qe,et,tt;q.parameters={...q.parameters,docs:{...(Qe=q.parameters)==null?void 0:Qe.docs,source:{originalSource:`{
+  tags: ['!autodocs', '!dev'],
+  args: {
+    title: 'Test Close Overlay'
+  },
+  play: async ctx => {
+    await meta.play?.(ctx);
+    const {
+      canvas,
+      step,
+      args
+    } = ctx;
+    await step('Close dialog by clicking overlay', async () => {
+      const overlay = canvas.getByTestId('dialog-overlay');
+      await userEvent.click(overlay);
+      return waitFor(async () => {
+        await expect(canvas.getByTestId('dialog')).not.toBeVisible();
+        return expect(args.onClose).toHaveBeenCalledOnce();
+      });
+    });
+  }
+}`,...(tt=(et=q.parameters)==null?void 0:et.docs)==null?void 0:tt.source}}};var at,nt,lt;N.parameters={...N.parameters,docs:{...(at=N.parameters)==null?void 0:at.docs,source:{originalSource:`{
+  tags: ['!autodocs', '!dev'],
+  args: {
+    title: 'Test Close Keyboard'
+  },
+  play: async ctx => {
+    await meta.play?.(ctx);
+    const {
+      canvas,
+      step,
+      args
+    } = ctx;
+    await step('Close dialog using escape key', async () => {
+      await userEvent.keyboard('{Escape}');
+      return waitFor(async () => {
+        await expect(canvas.getByTestId('dialog')).not.toBeVisible();
+        return expect(args.onClose).toHaveBeenCalledOnce();
+      });
+    });
+  }
+}`,...(lt=(nt=N.parameters)==null?void 0:nt.docs)==null?void 0:lt.source}}};const Ka=["Default","ExtraSmall","Small","Medium","Large","WidthResponsiveness","HeightResponsiveness","MobileFullHeight","WithHiddenHeader","WithPrimaryAction","WithSecondaryAction","WithSteps","WithIcon","WithAvatar","WithZIndexOverride","TestCloseButton","TestCloseOverlay","TestCloseKeyboard"];export{w as Default,_ as ExtraSmall,I as HeightResponsiveness,k as Large,T as Medium,z as MobileFullHeight,C as Small,E as TestCloseButton,N as TestCloseKeyboard,q as TestCloseOverlay,b as WidthResponsiveness,D as WithAvatar,V as WithHiddenHeader,S as WithIcon,R as WithPrimaryAction,P as WithSecondaryAction,x as WithSteps,h as WithZIndexOverride,Ka as __namedExportsOrder,u as default};