@preply/ds-docs 10.0.0 → 11.0.0

package/dist/assets/{CountryFlag.test.stories-CKkoBStk.js → CountryFlag.test.stories-Bde0Okud.js}

@@ -1,4 +1,4 @@
-import{j as m}from"./iframe-DjYTJz7A.js";import{C as s}from"./CountryFlag-BKEpYyWK.js";import"./preload-helper-Dp1pzeXC.js";import"./componentNames-hc9KR2nX.js";const{expect:o}=__STORYBOOK_MODULE_TEST__,A={title:"components/CountryFlag/Tests",component:s,args:{},tags:["!autodocs","!a11y-test","test"]},a={render:function(){return m.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 m.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,l;a.parameters={...a.parameters,docs:{...(n=a.parameters)==null?void 0:n.docs,source:{originalSource:`{
+import{j as m}from"./iframe-B_74HtSc.js";import{C as s}from"./CountryFlag-D40CtNEa.js";import"./preload-helper-Dp1pzeXC.js";import"./componentNames-hc9KR2nX.js";const{expect:o}=__STORYBOOK_MODULE_TEST__,A={title:"components/CountryFlag/Tests",component:s,args:{},tags:["!autodocs","!a11y-test","test"]},a={render:function(){return m.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 m.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,l;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-DaLOtRn0.js → Dialog-CJQmu6iz.js}

@@ -1,4 +1,4 @@
-import{j as e}from"./iframe-DjYTJz7A.js";import{D as p,a as v,s as f,b as g,c as h}from"./DialogCloseButton-CDDeMFIL.js";import{w as l}from"./componentNames-hc9KR2nX.js";const t=({open:a,title:n,description:u,leadingElement:o,children:i,size:r="md",hideHeader:s,onClose:d,mobileFullHeight:m,dataset:c})=>e.jsxs(p,{open:a,onClose:d,size:r,mobileFullHeight:m,dataset:c,"data-preply-ds-component":l.Dialog,children:[e.jsx(v,{}),e.jsxs("header",{className:f.header,"data-preply-ds-component":l.DialogHeader,children:[o,!s&&e.jsxs("hgroup",{children:[e.jsx(g,{children:n}),e.jsx(h,{children:u})]})]}),i]});try{t.displayName="Dialog",t.__docgenInfo={description:`A modal dialog component that can be used to show content in an overlay.
+import{j as e}from"./iframe-B_74HtSc.js";import{D as p,a as v,s as f,b as g,c as h}from"./DialogCloseButton-D5YliaRd.js";import{w as l}from"./componentNames-hc9KR2nX.js";const t=({open:a,title:n,description:u,leadingElement:o,children:i,size:r="md",hideHeader:s,onClose:d,mobileFullHeight:m,dataset:c})=>e.jsxs(p,{open:a,onClose:d,size:r,mobileFullHeight:m,dataset:c,"data-preply-ds-component":l.Dialog,children:[e.jsx(v,{}),e.jsxs("header",{className:f.header,"data-preply-ds-component":l.DialogHeader,children:[o,!s&&e.jsxs("hgroup",{children:[e.jsx(g,{children:n}),e.jsx(h,{children:u})]})]}),i]});try{t.displayName="Dialog",t.__docgenInfo={description:`A modal dialog component that can be used to show content in an overlay.
 
 Composed of:
 - Dialog: The main component

package/dist/assets/{Dialog.primitives.stories-CDU4GhAO.js → Dialog.primitives.stories-BRGfipHO.js}

@@ -1,4 +1,4 @@
-import{r as s,j as t}from"./iframe-DjYTJz7A.js";import{u as q,w as K,e as H}from"./index-BII7aPfQ.js";import{F as V}from"./TokyoUIInfo-BoGHBgEW.js";import{B as o}from"./Button-DS2bg8PO.js";import{I as X}from"./Icon-kphbe0CE.js";import{c,b as d,a as g,D as r}from"./DialogCloseButton-CDDeMFIL.js";import{D as j,a as G,b as p}from"./DialogActions-_9FMsJ9P.js";import{B as J}from"./Badge-CEZW6Ww4.js";import"./preload-helper-Dp1pzeXC.js";import"./render-icon-DZ6hllTG.js";import"./ButtonBase-sV1YoG7h.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./Spinner-BG27lVzS.js";import"./useMergeRefs-CL5DIjXV.js";import"./useHostname-By9vNKnQ.js";import"./index-CC6DAVyL.js";import"./componentNames-hc9KR2nX.js";import"./text-accent-C5-m5mrW.js";import"./useOpenInteractionType-B976GY1b.js";import"./index-CUvrBGJo.js";import"./TokyoUIClose-DoJfpCh8.js";import"./IconButton-D4lbFOKH.js";import"./shared-strings-ZccoNgto.js";const U="content__4abpn",Y="close__yXHzM",Z="title__L2rvR",$="description__FdpTb",tt="footer__5lWIE",et="buttonStack__eh-Q7",l={content:U,close:Y,title:Z,description:$,footer:tt,buttonStack:et},kt={title:"Components/Dialog/Primitives",component:r,subcomponents:{DialogCloseButton:g,DialogFooter:p,DialogTitle:d,DialogDescription:c,DialogActions:G,DialogButtonStack:j},parameters:{preventIframeFromScrollingParent:!0,docs:{story:{inline:!1,height:600}}},play:async({canvas:n,step:a})=>{await a("Open dialog",async()=>{const e=n.getByTestId("trigger");return await q.click(e),K(()=>{H(n.getByTestId("dialog")).toBeVisible()})})}},i=({style:n={}})=>t.jsx("div",{style:{width:"100%",height:"200px",background:"linear-gradient(to bottom, color-mix(in srgb, #ffe8f7, transparent), #ffe8f7)",...n}}),u={render:function(){const[a,e]=s.useState(!1);return t.jsxs(t.Fragment,{children:[t.jsx(o,{dataset:{testid:"trigger"},onClick:()=>e(!0),children:"Open"}),t.jsx(r,{dataset:{testid:"dialog"},open:a,onClose:()=>e(!1),children:t.jsx(i,{})})]})}},m={render:function(){const[a,e]=s.useState(!1);return t.jsxs(t.Fragment,{children:[t.jsx(o,{dataset:{testid:"trigger"},onClick:()=>e(!0),children:"Open"}),t.jsx(r,{dataset:{testid:"dialog"},open:a,onClose:()=>e(!1),overlay:!1,children:t.jsx(i,{})})]})}},x={render:function(){const[a,e]=s.useState(!1);return t.jsxs(t.Fragment,{children:[t.jsx(o,{dataset:{testid:"trigger"},onClick:()=>e(!0),children:"Open"}),t.jsx(r,{dataset:{testid:"dialog"},open:a,onClose:()=>e(!1),children:t.jsx(p,{children:t.jsxs(j,{children:[t.jsx(o,{variant:"quaternary",children:"Quaternary"}),t.jsx(o,{variant:"tertiary",children:"Tertiary"}),t.jsx(o,{variant:"secondary",children:"Secondary"}),t.jsx(o,{variant:"primary",children:"Primary"})]})})})]})}},D={render:function(){const[a,e]=s.useState(!1);return t.jsxs(t.Fragment,{children:[t.jsx(o,{dataset:{testid:"trigger"},onClick:()=>e(!0),children:"Open"}),t.jsxs(r,{dataset:{testid:"dialog"},open:a,onClose:()=>e(!1),children:[t.jsx(g,{}),t.jsxs("header",{style:{display:"flex",flexDirection:"column",gap:"20px",marginBottom:"24px"},children:[t.jsx(X,{size:"32",svg:V}),t.jsxs("hgroup",{children:[t.jsx(d,{children:"Dialog"}),t.jsx(c,{children:"AKA Task Dialog"})]})]}),t.jsx(i,{}),t.jsx(p,{children:t.jsxs(j,{children:[t.jsx(o,{variant:"tertiary",children:"Cancel"}),t.jsx(o,{variant:"primary",children:"Confirm"})]})})]})]})}},y={render:function(){const[a,e]=s.useState(!1);return t.jsxs(t.Fragment,{children:[t.jsx(o,{dataset:{testid:"trigger"},onClick:()=>e(!0),children:"Open"}),t.jsxs(r,{open:a,onClose:()=>e(!1),dataset:{testid:"dialog"},children:[t.jsx(g,{}),t.jsx(i,{style:{backgroundColor:"pink",marginInline:"calc(-1 * var(--dialog-padding))",marginTop:"calc(-1 * var(--dialog-padding))",marginBottom:"var(--dialog-padding)",width:"calc-size(auto)"}}),t.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"12px",alignItems:"center"},children:[t.jsx(d,{children:"Promo Dialog"}),t.jsx(c,{children:"For all your promotional needs"})]}),t.jsx(p,{children:t.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"12px",width:"fit-content",marginInline:"auto"},children:[t.jsx(o,{variant:"primary",children:"Confirm"}),t.jsx(o,{variant:"tertiary",children:"Cancel"})]})})]})]})}},f={render:function(){const[a,e]=s.useState(!1);return t.jsxs(t.Fragment,{children:[t.jsx(o,{dataset:{testid:"trigger"},onClick:()=>e(!0),children:"Open"}),t.jsxs(r,{dataset:{testid:"dialog"},open:a,onClose:()=>e(!1),children:[t.jsx(g,{children:t.jsx(o,{variant:"ghost",children:"Not Now"})}),t.jsx(i,{style:{background:"color-mix(in srgb, #ffe8f7, transparent)",position:"absolute",inset:0,height:"100%",zIndex:"-1"}}),t.jsx(i,{style:{marginInline:"calc(-1 * var(--dialog-padding))",marginTop:"calc(-1 * var(--dialog-padding))",marginBottom:"var(--dialog-padding)",width:"calc-size(auto)"}}),t.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"12px",alignItems:"center"},children:[t.jsx(J,{type:"ai",children:"Beta"}),t.jsx(d,{children:"Promo Dialog 2.0"}),t.jsx(c,{children:"Now with a longer button"})]}),t.jsx("div",{style:{marginTop:"var(--dialog-padding)"},children:t.jsx(o,{variant:"onColor",fullWidth:!0,children:"Let's go!"})})]})]})}},h={render:function(){const[a,e]=s.useState(!1);return t.jsxs(t.Fragment,{children:[t.jsx(o,{dataset:{testid:"trigger"},onClick:()=>e(!0),children:"Open"}),t.jsxs(r,{open:a,onClose:()=>e(!1),dataset:{testid:"dialog"},className:l.content,children:[t.jsx(g,{className:l.close}),t.jsx(d,{className:l.title,children:"Custom Title"}),t.jsx(c,{className:l.description,children:"Custom Description"}),t.jsx("br",{}),Array.from({length:5}).map((ot,Q)=>t.jsx(i,{},Q)),t.jsx(p,{className:l.footer,children:t.jsxs(j,{className:l.buttonStack,children:[t.jsx(o,{variant:"primary",children:"Custom Primary"}),t.jsx(o,{variant:"secondary",children:"Custom Secondary"})]})})]})]})}};var B,C,S;u.parameters={...u.parameters,docs:{...(B=u.parameters)==null?void 0:B.docs,source:{originalSource:`{
+import{r as s,j as t}from"./iframe-B_74HtSc.js";import{u as q,w as K,e as H}from"./index-BW8FBNWq.js";import{F as V}from"./TokyoUIInfo-BSNbI4Gr.js";import{B as o}from"./Button-C0Um_QuO.js";import{I as X}from"./Icon-CC0yjdx9.js";import{c,b as d,a as g,D as r}from"./DialogCloseButton-D5YliaRd.js";import{D as j,a as G,b as p}from"./DialogActions-GLMqsJfB.js";import{B as J}from"./Badge-BSDHZ3bI.js";import"./preload-helper-Dp1pzeXC.js";import"./render-icon-MT6RlyNs.js";import"./ButtonBase-HkSfLFbE.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./Spinner-8-RB4YZR.js";import"./useMergeRefs-Caz9hOck.js";import"./useHostname-CbpnzdHv.js";import"./index-CC6DAVyL.js";import"./componentNames-hc9KR2nX.js";import"./text-accent-BQ9POoE5.js";import"./useOpenInteractionType-D3sASQWj.js";import"./store-B0wM9Zg8.js";import"./index-DIqvfT2b.js";import"./TokyoUIClose-BfMyMrDa.js";import"./IconButton-BpjNyYgD.js";import"./shared-strings-ThL9KyH0.js";const U="content__4abpn",Y="close__yXHzM",Z="title__L2rvR",$="description__FdpTb",tt="footer__5lWIE",et="buttonStack__eh-Q7",l={content:U,close:Y,title:Z,description:$,footer:tt,buttonStack:et},bt={title:"Components/Dialog/Primitives",component:r,subcomponents:{DialogCloseButton:g,DialogFooter:p,DialogTitle:d,DialogDescription:c,DialogActions:G,DialogButtonStack:j},parameters:{preventIframeFromScrollingParent:!0,docs:{story:{inline:!1,height:600}}},play:async({canvas:n,step:a})=>{await a("Open dialog",async()=>{const e=n.getByTestId("trigger");return await q.click(e),K(()=>{H(n.getByTestId("dialog")).toBeVisible()})})}},i=({style:n={}})=>t.jsx("div",{style:{width:"100%",height:"200px",background:"linear-gradient(to bottom, color-mix(in srgb, #ffe8f7, transparent), #ffe8f7)",...n}}),u={render:function(){const[a,e]=s.useState(!1);return t.jsxs(t.Fragment,{children:[t.jsx(o,{dataset:{testid:"trigger"},onClick:()=>e(!0),children:"Open"}),t.jsx(r,{dataset:{testid:"dialog"},open:a,onClose:()=>e(!1),children:t.jsx(i,{})})]})}},m={render:function(){const[a,e]=s.useState(!1);return t.jsxs(t.Fragment,{children:[t.jsx(o,{dataset:{testid:"trigger"},onClick:()=>e(!0),children:"Open"}),t.jsx(r,{dataset:{testid:"dialog"},open:a,onClose:()=>e(!1),overlay:!1,children:t.jsx(i,{})})]})}},x={render:function(){const[a,e]=s.useState(!1);return t.jsxs(t.Fragment,{children:[t.jsx(o,{dataset:{testid:"trigger"},onClick:()=>e(!0),children:"Open"}),t.jsx(r,{dataset:{testid:"dialog"},open:a,onClose:()=>e(!1),children:t.jsx(p,{children:t.jsxs(j,{children:[t.jsx(o,{variant:"quaternary",children:"Quaternary"}),t.jsx(o,{variant:"tertiary",children:"Tertiary"}),t.jsx(o,{variant:"secondary",children:"Secondary"}),t.jsx(o,{variant:"primary",children:"Primary"})]})})})]})}},D={render:function(){const[a,e]=s.useState(!1);return t.jsxs(t.Fragment,{children:[t.jsx(o,{dataset:{testid:"trigger"},onClick:()=>e(!0),children:"Open"}),t.jsxs(r,{dataset:{testid:"dialog"},open:a,onClose:()=>e(!1),children:[t.jsx(g,{}),t.jsxs("header",{style:{display:"flex",flexDirection:"column",gap:"20px",marginBottom:"24px"},children:[t.jsx(X,{size:"32",svg:V}),t.jsxs("hgroup",{children:[t.jsx(d,{children:"Dialog"}),t.jsx(c,{children:"AKA Task Dialog"})]})]}),t.jsx(i,{}),t.jsx(p,{children:t.jsxs(j,{children:[t.jsx(o,{variant:"tertiary",children:"Cancel"}),t.jsx(o,{variant:"primary",children:"Confirm"})]})})]})]})}},y={render:function(){const[a,e]=s.useState(!1);return t.jsxs(t.Fragment,{children:[t.jsx(o,{dataset:{testid:"trigger"},onClick:()=>e(!0),children:"Open"}),t.jsxs(r,{open:a,onClose:()=>e(!1),dataset:{testid:"dialog"},children:[t.jsx(g,{}),t.jsx(i,{style:{backgroundColor:"pink",marginInline:"calc(-1 * var(--dialog-padding))",marginTop:"calc(-1 * var(--dialog-padding))",marginBottom:"var(--dialog-padding)",width:"calc-size(auto)"}}),t.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"12px",alignItems:"center"},children:[t.jsx(d,{children:"Promo Dialog"}),t.jsx(c,{children:"For all your promotional needs"})]}),t.jsx(p,{children:t.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"12px",width:"fit-content",marginInline:"auto"},children:[t.jsx(o,{variant:"primary",children:"Confirm"}),t.jsx(o,{variant:"tertiary",children:"Cancel"})]})})]})]})}},f={render:function(){const[a,e]=s.useState(!1);return t.jsxs(t.Fragment,{children:[t.jsx(o,{dataset:{testid:"trigger"},onClick:()=>e(!0),children:"Open"}),t.jsxs(r,{dataset:{testid:"dialog"},open:a,onClose:()=>e(!1),children:[t.jsx(g,{children:t.jsx(o,{variant:"ghost",children:"Not Now"})}),t.jsx(i,{style:{background:"color-mix(in srgb, #ffe8f7, transparent)",position:"absolute",inset:0,height:"100%",zIndex:"-1"}}),t.jsx(i,{style:{marginInline:"calc(-1 * var(--dialog-padding))",marginTop:"calc(-1 * var(--dialog-padding))",marginBottom:"var(--dialog-padding)",width:"calc-size(auto)"}}),t.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"12px",alignItems:"center"},children:[t.jsx(J,{type:"ai",children:"Beta"}),t.jsx(d,{children:"Promo Dialog 2.0"}),t.jsx(c,{children:"Now with a longer button"})]}),t.jsx("div",{style:{marginTop:"var(--dialog-padding)"},children:t.jsx(o,{variant:"onColor",fullWidth:!0,children:"Let's go!"})})]})]})}},h={render:function(){const[a,e]=s.useState(!1);return t.jsxs(t.Fragment,{children:[t.jsx(o,{dataset:{testid:"trigger"},onClick:()=>e(!0),children:"Open"}),t.jsxs(r,{open:a,onClose:()=>e(!1),dataset:{testid:"dialog"},className:l.content,children:[t.jsx(g,{className:l.close}),t.jsx(d,{className:l.title,children:"Custom Title"}),t.jsx(c,{className:l.description,children:"Custom Description"}),t.jsx("br",{}),Array.from({length:5}).map((ot,Q)=>t.jsx(i,{},Q)),t.jsx(p,{className:l.footer,children:t.jsxs(j,{className:l.buttonStack,children:[t.jsx(o,{variant:"primary",children:"Custom Primary"}),t.jsx(o,{variant:"secondary",children:"Custom Secondary"})]})})]})]})}};var B,C,S;u.parameters={...u.parameters,docs:{...(B=u.parameters)==null?void 0:B.docs,source:{originalSource:`{
   render: function Story() {
     const [open, setOpen] = useState(false);
     return <>
@@ -210,4 +210,4 @@ import{r as s,j as t}from"./iframe-DjYTJz7A.js";import{u as q,w as K,e as H}from
                 </DialogRoot>
             </>;
   }
-}`,...(M=(L=h.parameters)==null?void 0:L.docs)==null?void 0:M.source}}};const bt=["Default","WithoutOverlay","ButtonStackMultiple","TaskDialog","PromoDialog","PromoDialogExperiment","CustomStyles"];export{x as ButtonStackMultiple,h as CustomStyles,u as Default,y as PromoDialog,f as PromoDialogExperiment,D as TaskDialog,m as WithoutOverlay,bt as __namedExportsOrder,kt as default};
+}`,...(M=(L=h.parameters)==null?void 0:L.docs)==null?void 0:M.source}}};const Tt=["Default","WithoutOverlay","ButtonStackMultiple","TaskDialog","PromoDialog","PromoDialogExperiment","CustomStyles"];export{x as ButtonStackMultiple,h as CustomStyles,u as Default,y as PromoDialog,f as PromoDialogExperiment,D as TaskDialog,m as WithoutOverlay,Tt as __namedExportsOrder,bt as default};

package/dist/assets/{Dialog.stories-N8LTxdNu.js → Dialog.stories-D4tyIGD0.js}

@@ -1,4 +1,4 @@
-import{j as e,r as f}from"./iframe-DjYTJz7A.js";import{D as H}from"./Dialog-DaLOtRn0.js";import{s as q,D as Ne,a as ze}from"./DialogCloseButton-CDDeMFIL.js";import{B as r}from"./Button-DS2bg8PO.js";import{A as Me}from"./Avatar-Dlo9b83e.js";import{F as He}from"./TokyoUIInfo-BoGHBgEW.js";import{N as Ae}from"./NumberField-FWK2ErPL.js";import{I as Fe}from"./Icon-kphbe0CE.js";import{O as A}from"./OnboardingTooltip-DdKwzkB-.js";import{S as j,u as Ue}from"./Steps-CBqiqb-6.js";import{b as We,a as b}from"./DialogActions-_9FMsJ9P.js";import{w as P}from"./componentNames-hc9KR2nX.js";import{C as B}from"./Checkbox-Cmmcg7FL.js";import"./preload-helper-Dp1pzeXC.js";import"./useOpenInteractionType-B976GY1b.js";import"./index-CUvrBGJo.js";import"./TokyoUIClose-DoJfpCh8.js";import"./IconButton-D4lbFOKH.js";import"./render-icon-DZ6hllTG.js";import"./ButtonBase-sV1YoG7h.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./Spinner-BG27lVzS.js";import"./useMergeRefs-CL5DIjXV.js";import"./useHostname-By9vNKnQ.js";import"./index-CC6DAVyL.js";import"./shared-strings-ZccoNgto.js";import"./constants-5om8Ptru.js";import"./FormControl-DgD7Nr_L.js";import"./message-DiUVdAQd.js";import"./Input-Cp2OkxN8.js";import"./InputContainer-BlXlJbfJ.js";import"./text-accent-C5-m5mrW.js";import"./Text-C8DrHLQF.js";import"./text-centered-D70wah8Y.js";import"./Heading-BPJGe0Bg.js";import"./index-DOwxXd3L.js";import"./ProgressSteps-DCVAFT7X.js";const O=j,h=j.Step,_=j.Next,N=j.Previous;function z({primaryButton:n,nextButton:t=e.jsx(_,{}),previousButton:a=e.jsx(N,{})}){const{currentStep:i,totalSteps:m}=Ue(),x=i===1,S=i===m;return e.jsx(We,{children:e.jsxs("div",{className:q.stepControls,"data-preply-ds-component":P.DialogSteps,children:[!x&&e.jsx("div",{className:q.previous,"data-preply-ds-component":P.DialogStepsPreviousContainer,children:a}),e.jsx("div",{className:q.next,"data-preply-ds-component":P.DialogStepsNextContainer,children:S?n:t})]})})}try{z.displayName="DialogStepsActions",z.__docgenInfo={description:"Wrapper around the Steps actions for usage in Dialog.",displayName:"DialogStepsActions",props:{primaryButton:{defaultValue:null,description:`Primary action button.
+import{j as e,r as b}from"./iframe-B_74HtSc.js";import{D as H}from"./Dialog-CJQmu6iz.js";import{s as P,D as We,a as Le}from"./DialogCloseButton-D5YliaRd.js";import{B as r}from"./Button-C0Um_QuO.js";import{A as Ge}from"./Avatar-Die_4zu0.js";import{F as Fe}from"./TokyoUIInfo-BSNbI4Gr.js";import{N as Ke}from"./NumberField-klmIiQAi.js";import{I as Je}from"./Icon-CC0yjdx9.js";import{O as F}from"./OnboardingTooltip-DzQhJzWc.js";import{S as q,u as Xe}from"./Steps-DUeCVcxV.js";import{b as Ze,a as x}from"./DialogActions-GLMqsJfB.js";import{w as R}from"./componentNames-hc9KR2nX.js";import{C as w}from"./Checkbox-U8uzIr-e.js";import{I as $e}from"./IconTile-CAnlU9ss.js";import"./preload-helper-Dp1pzeXC.js";import"./useOpenInteractionType-D3sASQWj.js";import"./store-B0wM9Zg8.js";import"./index-DIqvfT2b.js";import"./TokyoUIClose-BfMyMrDa.js";import"./IconButton-BpjNyYgD.js";import"./render-icon-MT6RlyNs.js";import"./ButtonBase-HkSfLFbE.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./Spinner-8-RB4YZR.js";import"./useMergeRefs-Caz9hOck.js";import"./useHostname-CbpnzdHv.js";import"./index-CC6DAVyL.js";import"./shared-strings-ThL9KyH0.js";import"./constants-5om8Ptru.js";import"./FormControl-Zqf1cIwP.js";import"./message-DJT5rp5J.js";import"./Input-DuW1_5SG.js";import"./InputContainer-Cmdo_xyq.js";import"./text-accent-BQ9POoE5.js";import"./Text-DvShrljd.js";import"./text-centered-BEaaxMgl.js";import"./Heading-Cj8Si45g.js";import"./index-W3BB_3go.js";import"./ProgressSteps-Dce_SjLt.js";const _=q,f=q.Step,N=q.Next,z=q.Previous;function M({primaryButton:n,nextButton:t=e.jsx(N,{}),previousButton:a=e.jsx(z,{})}){const{currentStep:i,totalSteps:m}=Xe(),S=i===1,B=i===m;return e.jsx(Ze,{children:e.jsxs("div",{className:P.stepControls,"data-preply-ds-component":R.DialogSteps,children:[!S&&e.jsx("div",{className:P.previous,"data-preply-ds-component":R.DialogStepsPreviousContainer,children:a}),e.jsx("div",{className:P.next,"data-preply-ds-component":R.DialogStepsNextContainer,children:B?n:t})]})})}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
@@ -13,7 +13,7 @@ This button will be used on all steps except the last one. When not provided, a
 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{O.displayName="DialogSteps",O.__docgenInfo={description:"",displayName:"DialogSteps",props:{"aria-label":{defaultValue:null,description:`A description of the step flow and its content for screen readers.
+/>`,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{_.displayName="DialogSteps",_.__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\`
@@ -38,14 +38,14 @@ return next;
 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{h.displayName="DialogStep",h.__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{_.displayName="DialogStepsNext",_.__docgenInfo={description:"",displayName:"DialogStepsNext",props:{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"}]}},onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler"}]}},variant:{defaultValue:null,description:"",name:"variant",required:!1,type:{name:"enum",value:[{value:'"ai"'},{value:'"critical"'},{value:'"primary"'},{value:'"secondary"'},{value:'"tertiary"'},{value:'"inverted"'},{value:'"quaternary"'},{value:'"ghost"'},{value:'"onColor"'},{value:'"classroom"'},{value:'"primaryB2b"'},{value:'"primaryTutor"'},{value:'"newFeature"'}]}},opensInNewTab:{defaultValue:null,description:"",name:"opensInNewTab",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},nofollow:{defaultValue:null,description:"",name:"nofollow",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},assistiveText:{defaultValue:null,description:"",name:"assistiveText",required:!1,type:{name:"enum",value:[{value:"string"}]}},as:{defaultValue:null,description:`Custom element to render the button.
+};`,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{f.displayName="DialogStep",f.__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{N.displayName="DialogStepsNext",N.__docgenInfo={description:"",displayName:"DialogStepsNext",props:{variant:{defaultValue:null,description:"",name:"variant",required:!1,type:{name:"enum",value:[{value:'"primary"'},{value:'"secondary"'},{value:'"tertiary"'},{value:'"inverted"'},{value:'"critical"'},{value:'"quaternary"'},{value:'"ghost"'},{value:'"onColor"'},{value:'"classroom"'},{value:'"primaryB2b"'},{value:'"primaryTutor"'},{value:'"newFeature"'},{value:'"ai"'}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},id:{defaultValue:null,description:"",name:"id",required:!1,type:{name:"enum",value:[{value:"string"}]}},size:{defaultValue:null,description:"",name:"size",required:!1,type:{name:"enum",value:[{value:'"large"'},{value:'"medium"'},{value:'"small"'},{value:"ResponsiveProp<ButtonSize>"}]}},fullWidth:{defaultValue:null,description:"",name:"fullWidth",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:"ResponsiveProp<boolean>"}]}},wrap:{defaultValue:null,description:"",name:"wrap",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},href:{defaultValue:null,description:"",name:"href",required:!1,type:{name:"enum",value:[{value:"string"}]}},download:{defaultValue:null,description:"",name:"download",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},opensInNewTab:{defaultValue:null,description:"",name:"opensInNewTab",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},nofollow:{defaultValue:null,description:"",name:"nofollow",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},submitsForm:{defaultValue:null,description:"",name:"submitsForm",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},assistiveText:{defaultValue:null,description:"",name:"assistiveText",required:!1,type:{name:"enum",value:[{value:"string"}]}},onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler"}]}},onKeyDown:{defaultValue:null,description:"",name:"onKeyDown",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler"}]}},onKeyUp:{defaultValue:null,description:"",name:"onKeyUp",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler"}]}},onMouseDown:{defaultValue:null,description:"",name:"onMouseDown",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler"}]}},onMouseUp:{defaultValue:null,description:"",name:"onMouseUp",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler"}]}},onMouseEnter:{defaultValue:null,description:"",name:"onMouseEnter",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler"}]}},onMouseMove:{defaultValue:null,description:"",name:"onMouseMove",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler"}]}},onPointerDown:{defaultValue:null,description:"",name:"onPointerDown",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler"}]}},onPointerEnter:{defaultValue:null,description:"",name:"onPointerEnter",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler"}]}},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"}]}},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"}]}},onKeyDown:{defaultValue:null,description:"",name:"onKeyDown",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler"}]}},onKeyUp:{defaultValue:null,description:"",name:"onKeyUp",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler"}]}},onMouseDown:{defaultValue:null,description:"",name:"onMouseDown",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler"}]}},onMouseEnter:{defaultValue:null,description:"",name:"onMouseEnter",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler"}]}},onMouseMove:{defaultValue:null,description:"",name:"onMouseMove",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler"}]}},onMouseUp:{defaultValue:null,description:"",name:"onMouseUp",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler"}]}},onPointerDown:{defaultValue:null,description:"",name:"onPointerDown",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler"}]}},onPointerEnter:{defaultValue:null,description:"",name:"onPointerEnter",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler"}]}},size:{defaultValue:null,description:"",name:"size",required:!1,type:{name:"enum",value:[{value:'"small"'},{value:'"medium"'},{value:'"large"'},{value:"ResponsiveProp<ButtonSize>"}]}},disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},fullWidth:{defaultValue:null,description:"",name:"fullWidth",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:"ResponsiveProp<boolean>"}]}},wrap:{defaultValue:null,description:"",name:"wrap",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},submitsForm:{defaultValue:null,description:"",name:"submitsForm",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},busy:{defaultValue:null,description:"Replaces the content with a loading indicator.",name:"busy",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},a11yLabel:{defaultValue:null,description:"@deprecated Use `assistiveText` instead",name:"a11yLabel",required:!1,type:{name:"enum",value:[{value:"string"}]}},leadingSvgIcon:{defaultValue:null,description:`The leading SVG icon.
+<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>
@@ -55,14 +55,14 @@ or
 
 <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{N.displayName="DialogStepsPrevious",N.__docgenInfo={description:"",displayName:"DialogStepsPrevious",props:{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"}]}},onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler"}]}},variant:{defaultValue:null,description:"",name:"variant",required:!1,type:{name:"enum",value:[{value:'"ai"'},{value:'"critical"'},{value:'"primary"'},{value:'"secondary"'},{value:'"tertiary"'},{value:'"inverted"'},{value:'"quaternary"'},{value:'"ghost"'},{value:'"onColor"'},{value:'"classroom"'},{value:'"primaryB2b"'},{value:'"primaryTutor"'},{value:'"newFeature"'}]}},opensInNewTab:{defaultValue:null,description:"",name:"opensInNewTab",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},nofollow:{defaultValue:null,description:"",name:"nofollow",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},assistiveText:{defaultValue:null,description:"",name:"assistiveText",required:!1,type:{name:"enum",value:[{value:"string"}]}},as:{defaultValue:null,description:`Custom element to render the button.
+<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{z.displayName="DialogStepsPrevious",z.__docgenInfo={description:"",displayName:"DialogStepsPrevious",props:{variant:{defaultValue:null,description:"",name:"variant",required:!1,type:{name:"enum",value:[{value:'"primary"'},{value:'"secondary"'},{value:'"tertiary"'},{value:'"inverted"'},{value:'"critical"'},{value:'"quaternary"'},{value:'"ghost"'},{value:'"onColor"'},{value:'"classroom"'},{value:'"primaryB2b"'},{value:'"primaryTutor"'},{value:'"newFeature"'},{value:'"ai"'}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},id:{defaultValue:null,description:"",name:"id",required:!1,type:{name:"enum",value:[{value:"string"}]}},size:{defaultValue:null,description:"",name:"size",required:!1,type:{name:"enum",value:[{value:'"large"'},{value:'"medium"'},{value:'"small"'},{value:"ResponsiveProp<ButtonSize>"}]}},fullWidth:{defaultValue:null,description:"",name:"fullWidth",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:"ResponsiveProp<boolean>"}]}},wrap:{defaultValue:null,description:"",name:"wrap",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},href:{defaultValue:null,description:"",name:"href",required:!1,type:{name:"enum",value:[{value:"string"}]}},download:{defaultValue:null,description:"",name:"download",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},opensInNewTab:{defaultValue:null,description:"",name:"opensInNewTab",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},nofollow:{defaultValue:null,description:"",name:"nofollow",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},submitsForm:{defaultValue:null,description:"",name:"submitsForm",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},assistiveText:{defaultValue:null,description:"",name:"assistiveText",required:!1,type:{name:"enum",value:[{value:"string"}]}},onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler"}]}},onKeyDown:{defaultValue:null,description:"",name:"onKeyDown",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler"}]}},onKeyUp:{defaultValue:null,description:"",name:"onKeyUp",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler"}]}},onMouseDown:{defaultValue:null,description:"",name:"onMouseDown",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler"}]}},onMouseUp:{defaultValue:null,description:"",name:"onMouseUp",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler"}]}},onMouseEnter:{defaultValue:null,description:"",name:"onMouseEnter",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler"}]}},onMouseMove:{defaultValue:null,description:"",name:"onMouseMove",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler"}]}},onPointerDown:{defaultValue:null,description:"",name:"onPointerDown",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler"}]}},onPointerEnter:{defaultValue:null,description:"",name:"onPointerEnter",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler"}]}},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"}]}},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"}]}},onKeyDown:{defaultValue:null,description:"",name:"onKeyDown",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler"}]}},onKeyUp:{defaultValue:null,description:"",name:"onKeyUp",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler"}]}},onMouseDown:{defaultValue:null,description:"",name:"onMouseDown",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler"}]}},onMouseEnter:{defaultValue:null,description:"",name:"onMouseEnter",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler"}]}},onMouseMove:{defaultValue:null,description:"",name:"onMouseMove",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler"}]}},onMouseUp:{defaultValue:null,description:"",name:"onMouseUp",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler"}]}},onPointerDown:{defaultValue:null,description:"",name:"onPointerDown",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler"}]}},onPointerEnter:{defaultValue:null,description:"",name:"onPointerEnter",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler"}]}},size:{defaultValue:null,description:"",name:"size",required:!1,type:{name:"enum",value:[{value:'"small"'},{value:'"medium"'},{value:'"large"'},{value:"ResponsiveProp<ButtonSize>"}]}},disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},fullWidth:{defaultValue:null,description:"",name:"fullWidth",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:"ResponsiveProp<boolean>"}]}},wrap:{defaultValue:null,description:"",name:"wrap",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},submitsForm:{defaultValue:null,description:"",name:"submitsForm",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},busy:{defaultValue:null,description:"Replaces the content with a loading indicator.",name:"busy",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},a11yLabel:{defaultValue:null,description:"@deprecated Use `assistiveText` instead",name:"a11yLabel",required:!1,type:{name:"enum",value:[{value:"string"}]}},leadingSvgIcon:{defaultValue:null,description:`The leading SVG icon.
+<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>
@@ -72,7 +72,7 @@ or
 
 <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{action:l}=__STORYBOOK_MODULE_ACTIONS__,{expect:o,fn:M,userEvent:s,waitFor:d,within:F}=__STORYBOOK_MODULE_TEST__,u=()=>e.jsx("div",{style:{width:"100%",height:"200px",background:"linear-gradient(to bottom, color-mix(in srgb, #e0e0e0, transparent), #e0e0e0)"}});let _e=()=>{};const Le=(n,t)=>{const[a,i]=f.useState(t.args.open);_e=()=>i(!1);const m=()=>{var x,S;i(!1),(S=(x=t.args).onClose)==null||S.call(x)};return e.jsxs(e.Fragment,{children:[e.jsx(r,{dataset:{testid:"trigger"},onClick:()=>i(!0),children:"Open"}),e.jsx(n,{args:{...t.args,open:a,onClose:m}})]})},R={title:"Components/Dialog",component:H,parameters:{preventIframeFromScrollingParent:!0,docs:{story:{inline:!1,height:600}}},decorators:[Le],args:{open:!1,onClose:M(),children:e.jsx(u,{}),dataset:{testid:"dialog"}},play:async({canvas:n,step:t})=>{await t("Open dialog",async()=>{const a=n.getByTestId("trigger");return await s.click(a),d(()=>{o(n.getByTestId("dialog")).toBeVisible()})})}},w={args:{title:"Dialog title",children:e.jsxs(e.Fragment,{children:[e.jsx(u,{}),e.jsx(b,{primaryButton:e.jsx(r,{size:"medium",variant:"primary",onClick:()=>{l("Primary button clicked"),_e()},children:"Primary"}),secondaryButton:e.jsx(r,{size:"medium",variant:"tertiary",onClick:l("Secondary button clicked"),children:"Secondary"})})]})}},Ge=()=>{const[n,t]=f.useState(1);return e.jsxs(e.Fragment,{children:[e.jsx(Ae,{label:"Child count",value:n,onChange:a=>t(parseInt(a.target.value)),required:!0}),e.jsx("br",{}),Array.from({length:n},(a,i)=>e.jsx(u,{},i))]})},T={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(Ge,{}),e.jsx(b,{primaryButton:e.jsx(r,{size:"medium",variant:"primary",onClick:l("Primary button clicked"),children:"Primary"}),secondaryButton:e.jsx(r,{size:"medium",variant:"tertiary",onClick:l("Secondary button clicked"),children:"Secondary"})})]})}},k={args:{title:"Height Respects Component Outlines",description:"Height respect, by leaving space for , components' outline created through the dedicated outline tokens.",children:e.jsxs(e.Fragment,{children:[e.jsxs("div",{style:{display:"flex",justifyContent:"space-between"},children:[e.jsx(B,{checked:!0,dsInternalSimulation:"focus"}),e.jsx(B,{checked:!0,dsInternalSimulation:"focus"})]}),e.jsx(u,{}),e.jsxs("div",{style:{display:"flex",justifyContent:"space-between"},children:[e.jsx(B,{checked:!0,dsInternalSimulation:"focus"}),e.jsx(B,{checked:!0,dsInternalSimulation:"focus"})]}),e.jsx(b,{primaryButton:e.jsx(r,{size:"medium",variant:"primary",onClick:l("Primary button clicked"),children:"Primary"}),secondaryButton:e.jsx(r,{size:"medium",variant:"tertiary",onClick:l("Secondary button clicked"),children:"Secondary"})})]})}},C={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}},D={args:{title:"Dialog Title",description:"This is the dialog description.",children:e.jsxs(e.Fragment,{children:[e.jsx(u,{}),e.jsx(b,{primaryButton:e.jsx(r,{size:"medium",variant:"primary",onClick:l("Primary button clicked"),children:"Primary"})})]})}},I={args:{title:"Dialog Title",description:"This is the dialog description.",children:e.jsxs(e.Fragment,{children:[e.jsx(u,{}),e.jsx(b,{primaryButton:e.jsx(r,{size:"medium",variant:"primary",onClick:l("Primary button clicked"),children:"Primary"}),secondaryButton:e.jsx(r,{size:"medium",variant:"tertiary",onClick:l("Secondary button clicked"),children:"Secondary"})})]})}},p=()=>e.jsxs(Ne,{open:!0,dataset:{testid:"dialog"},children:[e.jsx(ze,{}),e.jsx(e.Fragment,{children:e.jsxs(O,{"aria-label":"Onboarding Steps",children:[e.jsx(h,{title:"Profile",description:"Tell us more about yourself",children:e.jsx(u,{})}),e.jsx(h,{title:"Subject",description:"What do you want to learn?",children:e.jsx(u,{})}),e.jsx(h,{title:"Availability",description:"When are you available?",children:e.jsx(u,{})}),e.jsx(z,{primaryButton:e.jsx(r,{size:"medium",variant:"primary",onClick:l("Primary button clicked"),children:"Primary"})})]})})]});p.play=async n=>{const{canvas:t,step:a}=n;await a("Dialog should be visible",async()=>{await d(()=>{o(t.getByTestId("dialog")).toBeVisible()})}),await a("Initially, only next button is present",async()=>{o(t.queryByRole("button",{name:"Next"})).toBeVisible(),o(t.queryByRole("button",{name:"Previous"})).not.toBeInTheDocument(),o(t.queryByRole("button",{name:"Primary"})).not.toBeInTheDocument()}),await a("Navigate to the next step. Previous/Next buttons are visible",async()=>{await s.click(t.getByRole("button",{name:"Next"})),o(t.queryByRole("button",{name:"Previous"})).toBeVisible(),o(t.queryByRole("button",{name:"Next"})).toBeVisible(),o(t.queryByRole("button",{name:"Primary"})).not.toBeInTheDocument()}),await a("Navigate to the last step. Previous/Primary buttons are visible",async()=>{await s.click(t.getByRole("button",{name:"Next"})),o(t.queryByRole("button",{name:"Previous"})).toBeVisible(),o(t.queryByRole("button",{name:"Primary"})).toBeVisible(),o(t.queryByRole("button",{name:"Next"})).not.toBeInTheDocument()})};const v={args:{leadingElement:e.jsx(Fe,{size:"32",svg:He}),title:"Information Dialog"}},y={args:{leadingElement:e.jsx(Me,{size:"48",alt:"User"}),title:"User Profile",description:"This dialog shows a user profile with an avatar in the title"}},c=n=>(f.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(H,{...n,title:"ZIndex Override"})}));c.parameters={docs:{source:{type:"code"}}};c.play=async({canvas:n,step:t})=>{await t("Open alert",async()=>(await s.click(n.getByTestId("trigger")),d(()=>{const a=n.getByTestId("dialog");o(a).toBeVisible()}))),await t("Check content's computed z-index",async()=>{const a=n.getByTestId("dialog"),i=getComputedStyle(a);o(i.zIndex).toBe("77")}),await t("Check overlay's computed z-index",async()=>{const a=n.getByTestId("dialog-overlay");if(!a)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 i=getComputedStyle(a);o(i.zIndex).toBe("88")})};const E={uncontrolled:M(l("uncontrolled")),controlled:M(l("controlled"))},Ke=()=>{const[n,t]=f.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(A,{dataset:{testid:"uncontrolled-tooltip"},actionOnClick:E.uncontrolled,title:"Uncontrolled",text:"text",children:e.jsx(r,{children:"Uncontrolled"})}),e.jsx(A,{dataset:{testid:"controlled-tooltip"},actionOnClick:E.controlled,title:"Controlled",text:"text",disabled:!n,onClose:()=>t(!1),children:e.jsx(r,{onClick:()=>t(!0),children:"Open tooltip"})})]})},V={tags:["!autodocs"],args:{children:e.jsx(Ke,{})},play:async n=>{var m;await((m=R.play)==null?void 0:m.call(R,n));const{canvas:t,step:a}=n,i=t.getByTestId("uncontrolled-tooltip");await a("Uncontrolled tooltip should be visible",async()=>{await d(()=>{o(i).toBeVisible()})}),await a("Click on uncontrolled tooltip action",async()=>{await s.click(F(i).getByTestId("action")),o(E.uncontrolled).toHaveBeenCalledOnce()}),await a("Open controlled tooltip",async()=>{await s.click(t.getByRole("button",{name:"Open tooltip"})),await d(()=>{o(t.getByTestId("controlled-tooltip")).toBeVisible()})}),await a("Click on controlled tooltip action",async()=>{await s.click(F(t.getByTestId("controlled-tooltip")).getByTestId("action")),o(E.controlled).toHaveBeenCalledOnce()})}},U=({number:n,children:t})=>{const[a,i]=f.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(r,{onClick:()=>i(!0),dataset:{testid:`trigger-${n}`},children:"Open"}),e.jsx(H,{open:a,onClose:()=>i(!1),title:`Dialog ${n}`,description:void 0,leadingElement:void 0,dataset:{testid:`dialog-${n}`},children:t})]})},g={parameters:{chromatic:{modes:{"narrow-l":{viewport:"narrow-l"},"medium-s":{viewport:"medium-s"},"medium-l":{viewport:"medium-l"}}}},args:{title:"Dialog 1",children:e.jsxs(e.Fragment,{children:[e.jsx(u,{}),e.jsx("br",{}),e.jsx(U,{number:2,children:e.jsx(U,{number:3})})]})},play:async({canvas:n,step:t})=>{await t("Open dialog",async()=>{const a=n.getByTestId("trigger");return await s.click(a),d(()=>{o(n.getByTestId("dialog")).toBeVisible()})}),await t("Open dialog 2",async()=>{const a=n.getByTestId("trigger-2");return await s.click(a),d(()=>{o(n.getByTestId("dialog-2")).toBeVisible()})}),await t("Open dialog 3",async()=>{const a=n.getByTestId("trigger-3");return await s.click(a),d(()=>{o(n.getByTestId("dialog-3")).toBeVisible()})})}};var W,L,G;w.parameters={...w.parameters,docs:{...(W=w.parameters)==null?void 0:W.docs,source:{originalSource:`{
+<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{action:l}=__STORYBOOK_MODULE_ACTIONS__,{expect:o,fn:A,userEvent:s,waitFor:d,within:U}=__STORYBOOK_MODULE_TEST__,u=()=>e.jsx("div",{style:{width:"100%",height:"200px",background:"linear-gradient(to bottom, color-mix(in srgb, #e0e0e0, transparent), #e0e0e0)"}});let Ue=()=>{};const Ye=(n,t)=>{const[a,i]=b.useState(t.args.open);Ue=()=>i(!1);const m=()=>{var S,B;i(!1),(B=(S=t.args).onClose)==null||B.call(S)};return e.jsxs(e.Fragment,{children:[e.jsx(r,{dataset:{testid:"trigger"},onClick:()=>i(!0),children:"Open"}),e.jsx(n,{args:{...t.args,open:a,onClose:m}})]})},O={title:"Components/Dialog",component:H,parameters:{preventIframeFromScrollingParent:!0,docs:{story:{inline:!1,height:600}}},decorators:[Ye],args:{open:!1,onClose:A(),children:e.jsx(u,{}),dataset:{testid:"dialog"}},play:async({canvas:n,step:t})=>{await t("Open dialog",async()=>{const a=n.getByTestId("trigger");return await s.click(a),d(()=>{o(n.getByTestId("dialog")).toBeVisible()})})}},T={args:{title:"Dialog title",children:e.jsxs(e.Fragment,{children:[e.jsx(u,{}),e.jsx(x,{primaryButton:e.jsx(r,{size:"medium",variant:"primary",onClick:()=>{l("Primary button clicked"),Ue()},children:"Primary"}),secondaryButton:e.jsx(r,{size:"medium",variant:"tertiary",onClick:l("Secondary button clicked"),children:"Secondary"})})]})}},Qe=()=>{const[n,t]=b.useState(1);return e.jsxs(e.Fragment,{children:[e.jsx(Ke,{label:"Child count",value:n,onChange:a=>t(parseInt(a.target.value)),required:!0}),e.jsx("br",{}),Array.from({length:n},(a,i)=>e.jsx(u,{},i))]})},k={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(Qe,{}),e.jsx(x,{primaryButton:e.jsx(r,{size:"medium",variant:"primary",onClick:l("Primary button clicked"),children:"Primary"}),secondaryButton:e.jsx(r,{size:"medium",variant:"tertiary",onClick:l("Secondary button clicked"),children:"Secondary"})})]})}},C={args:{title:"Height Respects Component Outlines",description:"Height respect, by leaving space for , components' outline created through the dedicated outline tokens.",children:e.jsxs(e.Fragment,{children:[e.jsxs("div",{style:{display:"flex",justifyContent:"space-between"},children:[e.jsx(w,{checked:!0,dsInternalSimulation:"focus"}),e.jsx(w,{checked:!0,dsInternalSimulation:"focus"})]}),e.jsx(u,{}),e.jsxs("div",{style:{display:"flex",justifyContent:"space-between"},children:[e.jsx(w,{checked:!0,dsInternalSimulation:"focus"}),e.jsx(w,{checked:!0,dsInternalSimulation:"focus"})]}),e.jsx(x,{primaryButton:e.jsx(r,{size:"medium",variant:"primary",onClick:l("Primary button clicked"),children:"Primary"}),secondaryButton:e.jsx(r,{size:"medium",variant:"tertiary",onClick:l("Secondary button clicked"),children:"Secondary"})})]})}},I={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}},D={args:{title:"Dialog Title",description:"This is the dialog description.",children:e.jsxs(e.Fragment,{children:[e.jsx(u,{}),e.jsx(x,{primaryButton:e.jsx(r,{size:"medium",variant:"primary",onClick:l("Primary button clicked"),children:"Primary"})})]})}},V={args:{title:"Dialog Title",description:"This is the dialog description.",children:e.jsxs(e.Fragment,{children:[e.jsx(u,{}),e.jsx(x,{primaryButton:e.jsx(r,{size:"medium",variant:"primary",onClick:l("Primary button clicked"),children:"Primary"}),secondaryButton:e.jsx(r,{size:"medium",variant:"tertiary",onClick:l("Secondary button clicked"),children:"Secondary"})})]})}},p=()=>e.jsxs(We,{open:!0,dataset:{testid:"dialog"},children:[e.jsx(Le,{}),e.jsx(e.Fragment,{children:e.jsxs(_,{"aria-label":"Onboarding Steps",children:[e.jsx(f,{title:"Profile",description:"Tell us more about yourself",children:e.jsx(u,{})}),e.jsx(f,{title:"Subject",description:"What do you want to learn?",children:e.jsx(u,{})}),e.jsx(f,{title:"Availability",description:"When are you available?",children:e.jsx(u,{})}),e.jsx(M,{primaryButton:e.jsx(r,{size:"medium",variant:"primary",onClick:l("Primary button clicked"),children:"Primary"})})]})})]});p.play=async n=>{const{canvas:t,step:a}=n;await a("Dialog should be visible",async()=>{await d(()=>{o(t.getByTestId("dialog")).toBeVisible()})}),await a("Initially, only next button is present",async()=>{o(t.queryByRole("button",{name:"Next"})).toBeVisible(),o(t.queryByRole("button",{name:"Previous"})).not.toBeInTheDocument(),o(t.queryByRole("button",{name:"Primary"})).not.toBeInTheDocument()}),await a("Navigate to the next step. Previous/Next buttons are visible",async()=>{await s.click(t.getByRole("button",{name:"Next"})),o(t.queryByRole("button",{name:"Previous"})).toBeVisible(),o(t.queryByRole("button",{name:"Next"})).toBeVisible(),o(t.queryByRole("button",{name:"Primary"})).not.toBeInTheDocument()}),await a("Navigate to the last step. Previous/Primary buttons are visible",async()=>{await s.click(t.getByRole("button",{name:"Next"})),o(t.queryByRole("button",{name:"Previous"})).toBeVisible(),o(t.queryByRole("button",{name:"Primary"})).toBeVisible(),o(t.queryByRole("button",{name:"Next"})).not.toBeInTheDocument()})};const v={args:{leadingElement:e.jsx(Je,{size:"32",svg:Fe}),title:"Information Dialog"}},y={args:{leadingElement:e.jsx($e,{size:"medium",svg:Fe}),title:"Information Dialog"}},g={args:{leadingElement:e.jsx(Ge,{size:"48",alt:"User"}),title:"User Profile",description:"This dialog shows a user profile with an avatar in the title"}},c=n=>(b.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(H,{...n,title:"ZIndex Override"})}));c.parameters={docs:{source:{type:"code"}}};c.play=async({canvas:n,step:t})=>{await t("Open alert",async()=>(await s.click(n.getByTestId("trigger")),d(()=>{const a=n.getByTestId("dialog");o(a).toBeVisible()}))),await t("Check content's computed z-index",async()=>{const a=n.getByTestId("dialog"),i=getComputedStyle(a);o(i.zIndex).toBe("77")}),await t("Check overlay's computed z-index",async()=>{const a=n.getByTestId("dialog-overlay");if(!a)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 i=getComputedStyle(a);o(i.zIndex).toBe("88")})};const j={uncontrolled:A(l("uncontrolled")),controlled:A(l("controlled"))},et=()=>{const[n,t]=b.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(F,{dataset:{testid:"uncontrolled-tooltip"},actionOnClick:j.uncontrolled,title:"Uncontrolled",text:"text",children:e.jsx(r,{children:"Uncontrolled"})}),e.jsx(F,{dataset:{testid:"controlled-tooltip"},actionOnClick:j.controlled,title:"Controlled",text:"text",disabled:!n,onClose:()=>t(!1),children:e.jsx(r,{onClick:()=>t(!0),children:"Open tooltip"})})]})},E={tags:["!autodocs"],args:{children:e.jsx(et,{})},play:async n=>{var m;await((m=O.play)==null?void 0:m.call(O,n));const{canvas:t,step:a}=n,i=t.getByTestId("uncontrolled-tooltip");await a("Uncontrolled tooltip should be visible",async()=>{await d(()=>{o(i).toBeVisible()})}),await a("Click on uncontrolled tooltip action",async()=>{await s.click(U(i).getByTestId("action")),o(j.uncontrolled).toHaveBeenCalledOnce()}),await a("Open controlled tooltip",async()=>{await s.click(t.getByRole("button",{name:"Open tooltip"})),await d(()=>{o(t.getByTestId("controlled-tooltip")).toBeVisible()})}),await a("Click on controlled tooltip action",async()=>{await s.click(U(t.getByTestId("controlled-tooltip")).getByTestId("action")),o(j.controlled).toHaveBeenCalledOnce()})}},W=({number:n,children:t})=>{const[a,i]=b.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(r,{onClick:()=>i(!0),dataset:{testid:`trigger-${n}`},children:"Open"}),e.jsx(H,{open:a,onClose:()=>i(!1),title:`Dialog ${n}`,description:void 0,leadingElement:void 0,dataset:{testid:`dialog-${n}`},children:t})]})},h={parameters:{chromatic:{modes:{"narrow-l":{viewport:"narrow-l"},"medium-s":{viewport:"medium-s"},"medium-l":{viewport:"medium-l"}}}},args:{title:"Dialog 1",children:e.jsxs(e.Fragment,{children:[e.jsx(u,{}),e.jsx("br",{}),e.jsx(W,{number:2,children:e.jsx(W,{number:3})})]})},play:async({canvas:n,step:t})=>{await t("Open dialog",async()=>{const a=n.getByTestId("trigger");return await s.click(a),d(()=>{o(n.getByTestId("dialog")).toBeVisible()})}),await t("Open dialog 2",async()=>{const a=n.getByTestId("trigger-2");return await s.click(a),d(()=>{o(n.getByTestId("dialog-2")).toBeVisible()})}),await t("Open dialog 3",async()=>{const a=n.getByTestId("trigger-3");return await s.click(a),d(()=>{o(n.getByTestId("dialog-3")).toBeVisible()})})}};var L,G,K;T.parameters={...T.parameters,docs:{...(L=T.parameters)==null?void 0:L.docs,source:{originalSource:`{
   args: {
     title: 'Dialog title',
     children: <>
@@ -87,7 +87,7 @@ or
                         </Button>} />
             </>
   }
-}`,...(G=(L=w.parameters)==null?void 0:L.docs)==null?void 0:G.source}}};var K,J,X;T.parameters={...T.parameters,docs:{...(K=T.parameters)==null?void 0:K.docs,source:{originalSource:`{
+}`,...(K=(G=T.parameters)==null?void 0:G.docs)==null?void 0:K.source}}};var J,X,Z;k.parameters={...k.parameters,docs:{...(J=k.parameters)==null?void 0:J.docs,source:{originalSource:`{
   args: {
     title: 'Height Responsiveness',
     description: 'Change the number of children to see the Dialog style respond to the height change',
@@ -100,7 +100,7 @@ or
                         </Button>} />
             </>
   }
-}`,...(X=(J=T.parameters)==null?void 0:J.docs)==null?void 0:X.source}}};var Z,$,Y;k.parameters={...k.parameters,docs:{...(Z=k.parameters)==null?void 0:Z.docs,source:{originalSource:`{
+}`,...(Z=(X=k.parameters)==null?void 0:X.docs)==null?void 0:Z.source}}};var $,Y,Q;C.parameters={...C.parameters,docs:{...($=C.parameters)==null?void 0:$.docs,source:{originalSource:`{
   args: {
     title: \`Height Respects Component Outlines\`,
     description: \`Height respect, by leaving space for , components' outline created through the dedicated outline tokens.\`,
@@ -127,7 +127,7 @@ or
                         </Button>} />
             </>
   }
-}`,...(Y=($=k.parameters)==null?void 0:$.docs)==null?void 0:Y.source}}};var Q,ee,te;C.parameters={...C.parameters,docs:{...(Q=C.parameters)==null?void 0:Q.docs,source:{originalSource:`{
+}`,...(Q=(Y=C.parameters)==null?void 0:Y.docs)==null?void 0:Q.source}}};var ee,te,ne;I.parameters={...I.parameters,docs:{...(ee=I.parameters)==null?void 0:ee.docs,source:{originalSource:`{
   parameters: {
     chromatic: {
       modes: {
@@ -147,7 +147,7 @@ or
     title: 'Mobile Full Height',
     mobileFullHeight: true
   }
-}`,...(te=(ee=C.parameters)==null?void 0:ee.docs)==null?void 0:te.source}}};var ne,ae,oe;D.parameters={...D.parameters,docs:{...(ne=D.parameters)==null?void 0:ne.docs,source:{originalSource:`{
+}`,...(ne=(te=I.parameters)==null?void 0:te.docs)==null?void 0:ne.source}}};var ae,oe,ie;D.parameters={...D.parameters,docs:{...(ae=D.parameters)==null?void 0:ae.docs,source:{originalSource:`{
   args: {
     title: 'Dialog Title',
     description: 'This is the dialog description.',
@@ -158,7 +158,7 @@ or
                         </Button>} />
             </>
   }
-}`,...(oe=(ae=D.parameters)==null?void 0:ae.docs)==null?void 0:oe.source}}};var ie,re,le;I.parameters={...I.parameters,docs:{...(ie=I.parameters)==null?void 0:ie.docs,source:{originalSource:`{
+}`,...(ie=(oe=D.parameters)==null?void 0:oe.docs)==null?void 0:ie.source}}};var re,le,se;V.parameters={...V.parameters,docs:{...(re=V.parameters)==null?void 0:re.docs,source:{originalSource:`{
   args: {
     title: 'Dialog Title',
     description: 'This is the dialog description.',
@@ -171,7 +171,7 @@ or
                         </Button>} />
             </>
   }
-}`,...(le=(re=I.parameters)==null?void 0:re.docs)==null?void 0:le.source}}};var se,ue,de,ce,me;p.parameters={...p.parameters,docs:{...(se=p.parameters)==null?void 0:se.docs,source:{originalSource:`() => {
+}`,...(se=(le=V.parameters)==null?void 0:le.docs)==null?void 0:se.source}}};var ue,de,ce,me,pe;p.parameters={...p.parameters,docs:{...(ue=p.parameters)==null?void 0:ue.docs,source:{originalSource:`() => {
   return <DialogRoot open={true} dataset={{
     testid: \`dialog\`
   }}>
@@ -194,19 +194,24 @@ or
                 </DialogSteps>
             </>
         </DialogRoot>;
-}`,...(de=(ue=p.parameters)==null?void 0:ue.docs)==null?void 0:de.source},description:{story:`The Dialog component can be used with the Steps component to create multi-step flows. This
-demonstrates how to use DialogRoot to build custom dialogs (in this case, a header-free dialog).`,...(me=(ce=p.parameters)==null?void 0:ce.docs)==null?void 0:me.description}}};var pe,ve,ye,ge,he;v.parameters={...v.parameters,docs:{...(pe=v.parameters)==null?void 0:pe.docs,source:{originalSource:`{
+}`,...(ce=(de=p.parameters)==null?void 0:de.docs)==null?void 0:ce.source},description:{story:`The Dialog component can be used with the Steps component to create multi-step flows. This
+demonstrates how to use DialogRoot to build custom dialogs (in this case, a header-free dialog).`,...(pe=(me=p.parameters)==null?void 0:me.docs)==null?void 0:pe.description}}};var ve,ye,ge,he,fe;v.parameters={...v.parameters,docs:{...(ve=v.parameters)==null?void 0:ve.docs,source:{originalSource:`{
   args: {
     leadingElement: <Icon size="32" svg={InfoIcon} />,
     title: 'Information Dialog'
   }
-}`,...(ye=(ve=v.parameters)==null?void 0:ve.docs)==null?void 0:ye.source},description:{story:"A dialog with an Icon component in the title. This demonstrates how to use React elements in the title.",...(he=(ge=v.parameters)==null?void 0:ge.docs)==null?void 0:he.description}}};var fe,be,xe,Se,Be;y.parameters={...y.parameters,docs:{...(fe=y.parameters)==null?void 0:fe.docs,source:{originalSource:`{
+}`,...(ge=(ye=v.parameters)==null?void 0:ye.docs)==null?void 0:ge.source},description:{story:"A dialog with an Icon component in the title. This demonstrates how to use React elements in the title.",...(fe=(he=v.parameters)==null?void 0:he.docs)==null?void 0:fe.description}}};var be,xe,Se,Be,we;y.parameters={...y.parameters,docs:{...(be=y.parameters)==null?void 0:be.docs,source:{originalSource:`{
+  args: {
+    leadingElement: <IconTile size="medium" svg={InfoIcon} />,
+    title: 'Information Dialog'
+  }
+}`,...(Se=(xe=y.parameters)==null?void 0:xe.docs)==null?void 0:Se.source},description:{story:"A dialog with an IconTile component in the title. This demonstrates how to use React elements in the title.",...(we=(Be=y.parameters)==null?void 0:Be.docs)==null?void 0:we.description}}};var Te,ke,Ce,Ie,De;g.parameters={...g.parameters,docs:{...(Te=g.parameters)==null?void 0:Te.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'
   }
-}`,...(xe=(be=y.parameters)==null?void 0:be.docs)==null?void 0:xe.source},description:{story:"A dialog with an Avatar component in the title. This demonstrates how to use compound components in the title.",...(Be=(Se=y.parameters)==null?void 0:Se.docs)==null?void 0:Be.description}}};var we,Te,ke,Ce,De;c.parameters={...c.parameters,docs:{...(we=c.parameters)==null?void 0:we.docs,source:{originalSource:`args => {
+}`,...(Ce=(ke=g.parameters)==null?void 0:ke.docs)==null?void 0:Ce.source},description:{story:"A dialog with an Avatar component in the title. This demonstrates how to use compound components in the title.",...(De=(Ie=g.parameters)==null?void 0:Ie.docs)==null?void 0:De.description}}};var Ve,Ee,je,qe,Pe;c.parameters={...c.parameters,docs:{...(Ve=c.parameters)==null?void 0:Ve.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');
@@ -221,7 +226,7 @@ demonstrates how to use DialogRoot to build custom dialogs (in this case, a head
   }}>
             <Dialog {...args} title="ZIndex Override" />
         </div>;
-}`,...(ke=(Te=c.parameters)==null?void 0:Te.docs)==null?void 0:ke.source},description:{story:`The Dialog component provides CSS property escape hatches for controlling the z-index of both the overlay and content:
+}`,...(je=(Ee=c.parameters)==null?void 0:Ee.docs)==null?void 0:je.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
@@ -231,7 +236,7 @@ These should only be used when necessary, as proper stacking context isolation i
 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.`,...(De=(Ce=c.parameters)==null?void 0:Ce.docs)==null?void 0:De.description}}};var Ie,Ve,Ee;V.parameters={...V.parameters,docs:{...(Ie=V.parameters)==null?void 0:Ie.docs,source:{originalSource:`{
+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.`,...(Pe=(qe=c.parameters)==null?void 0:qe.docs)==null?void 0:Pe.description}}};var Re,Oe,_e;E.parameters={...E.parameters,docs:{...(Re=E.parameters)==null?void 0:Re.docs,source:{originalSource:`{
   tags: ['!autodocs'],
   args: {
     children: <ContentWithOnboardingTooltip />
@@ -265,7 +270,7 @@ Note: This is done using a \\\`useEffect\\\` just for the sake of the story. In
       expect(onboardingTooltipCallbacks.controlled).toHaveBeenCalledOnce();
     });
   }
-}`,...(Ee=(Ve=V.parameters)==null?void 0:Ve.docs)==null?void 0:Ee.source}}};var je,qe,Pe,Re,Oe;g.parameters={...g.parameters,docs:{...(je=g.parameters)==null?void 0:je.docs,source:{originalSource:`{
+}`,...(_e=(Oe=E.parameters)==null?void 0:Oe.docs)==null?void 0:_e.source}}};var Ne,ze,Me,Ae,He;h.parameters={...h.parameters,docs:{...(Ne=h.parameters)==null?void 0:Ne.docs,source:{originalSource:`{
   parameters: {
     chromatic: {
       modes: {
@@ -317,8 +322,8 @@ Note: This is done using a \\\`useEffect\\\` just for the sake of the story. In
       });
     });
   }
-}`,...(Pe=(qe=g.parameters)==null?void 0:qe.docs)==null?void 0:Pe.source},description:{story:`Each nested \`Dialog\` will be opened in a new stacking context, meaning that
+}`,...(Me=(ze=h.parameters)==null?void 0:ze.docs)==null?void 0:Me.source},description:{story:`Each nested \`Dialog\` will be opened in a new stacking context, meaning that
 they will maintain their own focus, keyboard navigation, and light dismiss
 behavior without affecting the parent dialog
 
-They will each also have their own backdrop overlay.`,...(Oe=(Re=g.parameters)==null?void 0:Re.docs)==null?void 0:Oe.description}}};const jt=["Default","HeightResponsiveness","HeightRespectsComponentOutlines","MobileFullHeight","WithPrimaryAction","WithSecondaryAction","WithSteps","WithIcon","WithAvatar","WithZIndexOverride","WithOnboardingTooltipInside","NestedDialogs"];export{w as Default,k as HeightRespectsComponentOutlines,T as HeightResponsiveness,C as MobileFullHeight,g as NestedDialogs,y as WithAvatar,v as WithIcon,V as WithOnboardingTooltipInside,D as WithPrimaryAction,I as WithSecondaryAction,p as WithSteps,c as WithZIndexOverride,jt as __namedExportsOrder,R as default};
+They will each also have their own backdrop overlay.`,...(He=(Ae=h.parameters)==null?void 0:Ae.docs)==null?void 0:He.description}}};const At=["Default","HeightResponsiveness","HeightRespectsComponentOutlines","MobileFullHeight","WithPrimaryAction","WithSecondaryAction","WithSteps","WithIcon","WithIconTile","WithAvatar","WithZIndexOverride","WithOnboardingTooltipInside","NestedDialogs"];export{T as Default,C as HeightRespectsComponentOutlines,k as HeightResponsiveness,I as MobileFullHeight,h as NestedDialogs,g as WithAvatar,v as WithIcon,y as WithIconTile,E as WithOnboardingTooltipInside,D as WithPrimaryAction,V as WithSecondaryAction,p as WithSteps,c as WithZIndexOverride,At as __namedExportsOrder,O as default};

package/dist/assets/Dialog.test.stories-xCqInD69.js

@@ -0,0 +1,146 @@
+import{j as i,r as ee}from"./iframe-B_74HtSc.js";import{B as te}from"./Button-C0Um_QuO.js";import{D as se}from"./Dialog-CJQmu6iz.js";import"./preload-helper-Dp1pzeXC.js";import"./render-icon-MT6RlyNs.js";import"./ButtonBase-HkSfLFbE.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./Spinner-8-RB4YZR.js";import"./useMergeRefs-Caz9hOck.js";import"./useHostname-CbpnzdHv.js";import"./index-CC6DAVyL.js";import"./componentNames-hc9KR2nX.js";import"./DialogCloseButton-D5YliaRd.js";import"./useOpenInteractionType-D3sASQWj.js";import"./store-B0wM9Zg8.js";import"./index-DIqvfT2b.js";import"./TokyoUIClose-BfMyMrDa.js";import"./IconButton-BpjNyYgD.js";import"./shared-strings-ThL9KyH0.js";const{expect:r,fn:ae,userEvent:l,waitFor:d}=__STORYBOOK_MODULE_TEST__,oe=()=>i.jsx("div",{style:{width:"100%",height:"200px",background:"linear-gradient(to bottom, color-mix(in srgb, #e0e0e0, transparent), #e0e0e0)"}}),ne=(e,t)=>{const[o,n]=ee.useState(t.args.open),s=()=>{var c,x;n(!1),(x=(c=t.args).onClose)==null||x.call(c)};return i.jsxs(i.Fragment,{children:[i.jsx(te,{dataset:{testid:"trigger"},onClick:()=>n(!0),children:"Open"}),i.jsx(e,{args:{...t.args,open:o,onClose:s}})]})},a={title:"Components/Dialog/Tests",component:se,parameters:{preventIframeFromScrollingParent:!0,docs:{story:{inline:!1,height:600}}},decorators:[ne],args:{open:!1,onClose:ae(),children:i.jsx(oe,{}),dataset:{testid:"dialog"}},play:async({canvas:e,step:t})=>{await t("Open dialog",async()=>{const o=e.getByTestId("trigger");return await l.click(o),d(()=>{r(e.getByTestId("dialog")).toBeVisible()})})}},p={tags:["!autodocs"],args:{size:"xs",title:"Extra Small Dialog"}},u={tags:["!autodocs"],args:{size:"sm",title:"Small Dialog"}},y={tags:["!autodocs"],args:{size:"md",title:"Medium Dialog"}},m={tags:["!autodocs"],args:{size:"lg",title:"Large Dialog"}},g={tags:["!autodocs"],args:{size:{_:"lg","wide-s":"xs"},title:"Width Responsiveness",description:"Change the window width to see the Dialog width respond to it"}},w={tags:["!autodocs"],args:{title:"Test Close Overlay"},play:async e=>{var s;await((s=a.play)==null?void 0:s.call(a,e));const{canvas:t,step:o,args:n}=e;await o("Close dialog by clicking overlay",async()=>{const c=t.getByTestId("dialog-overlay");return await l.click(c),d(async()=>(await r(t.queryByTestId("dialog")).not.toBeInTheDocument(),r(n.onClose).toHaveBeenCalledOnce()))})}},B={tags:["!autodocs"],args:{title:"Test Close Focus"},play:async e=>{var s;await((s=a.play)==null?void 0:s.call(a,e));const{canvas:t,step:o,args:n}=e;await o("Close dialog by pressing space",async()=>(await l.keyboard("{Enter}"),d(async()=>(await r(t.queryByTestId("dialog")).not.toBeInTheDocument(),r(n.onClose).toHaveBeenCalledOnce()))))}},C={tags:["!autodocs"],args:{title:"Test Close Keyboard"},play:async e=>{var s;await((s=a.play)==null?void 0:s.call(a,e));const{canvas:t,step:o,args:n}=e;await o("Close dialog using escape key",async()=>(await l.keyboard("{Escape}"),d(()=>{r(t.queryByTestId("dialog")).not.toBeInTheDocument(),r(n.onClose).toHaveBeenCalledOnce()})))}},T={tags:["!autodocs"],args:{title:"Test Close Button"},play:async e=>{var s;await((s=a.play)==null?void 0:s.call(a,e));const{canvas:t,step:o,args:n}=e;await o("Close dialog using close button",async()=>{const c=await t.findByLabelText("Close");return await l.click(c),d(async()=>(await r(t.queryByTestId("dialog")).not.toBeInTheDocument(),r(n.onClose).toHaveBeenCalledOnce()))})}},v={tags:["!autodocs"],args:{title:"Test Close Button"},play:async e=>{var n;await((n=a.play)==null?void 0:n.call(a,e));const{canvas:t,step:o}=e;await o("Close dialog using close button",async()=>{const s=await t.findByTestId("dialog-close");return await l.click(s),d(async()=>{await r(t.queryByTestId("dialog")).not.toBeInTheDocument()})})}};var h,D,I;p.parameters={...p.parameters,docs:{...(h=p.parameters)==null?void 0:h.docs,source:{originalSource:`{
+  tags: ['!autodocs'],
+  args: {
+    size: 'xs',
+    title: 'Extra Small Dialog'
+  }
+}`,...(I=(D=p.parameters)==null?void 0:D.docs)==null?void 0:I.source}}};var b,S,f;u.parameters={...u.parameters,docs:{...(b=u.parameters)==null?void 0:b.docs,source:{originalSource:`{
+  tags: ['!autodocs'],
+  args: {
+    size: 'sm',
+    title: 'Small Dialog'
+  }
+}`,...(f=(S=u.parameters)==null?void 0:S.docs)==null?void 0:f.source}}};var O,k,E;y.parameters={...y.parameters,docs:{...(O=y.parameters)==null?void 0:O.docs,source:{originalSource:`{
+  tags: ['!autodocs'],
+  args: {
+    size: 'md',
+    title: 'Medium Dialog'
+  }
+}`,...(E=(k=y.parameters)==null?void 0:k.docs)==null?void 0:E.source}}};var z,F,_;m.parameters={...m.parameters,docs:{...(z=m.parameters)==null?void 0:z.docs,source:{originalSource:`{
+  tags: ['!autodocs'],
+  args: {
+    size: 'lg',
+    title: 'Large Dialog'
+  }
+}`,...(_=(F=m.parameters)==null?void 0:F.docs)==null?void 0:_.source}}};var q,j,H,L,R;g.parameters={...g.parameters,docs:{...(q=g.parameters)==null?void 0:q.docs,source:{originalSource:`{
+  tags: ['!autodocs'],
+  args: {
+    size: {
+      _: 'lg',
+      'wide-s': 'xs'
+    },
+    title: 'Width Responsiveness',
+    description: 'Change the window width to see the Dialog width respond to it'
+  }
+}`,...(H=(j=g.parameters)==null?void 0:j.docs)==null?void 0:H.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={{
+    _: 'lg',
+    'wide-s': 'xs',
+  }}
+/>
+\`\`\``,...(R=(L=g.parameters)==null?void 0:L.docs)==null?void 0:R.description}}};var K,M,W;w.parameters={...w.parameters,docs:{...(K=w.parameters)==null?void 0:K.docs,source:{originalSource:`{
+  tags: ['!autodocs'],
+  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.queryByTestId('dialog')).not.toBeInTheDocument();
+        return expect(args.onClose).toHaveBeenCalledOnce();
+      });
+    });
+  }
+}`,...(W=(M=w.parameters)==null?void 0:M.docs)==null?void 0:W.source}}};var U,P,V;B.parameters={...B.parameters,docs:{...(U=B.parameters)==null?void 0:U.docs,source:{originalSource:`{
+  tags: ['!autodocs'],
+  args: {
+    title: 'Test Close Focus'
+  },
+  play: async ctx => {
+    await meta.play?.(ctx);
+    const {
+      canvas,
+      step,
+      args
+    } = ctx;
+    await step('Close dialog by pressing space', async () => {
+      await userEvent.keyboard('{Enter}');
+      return waitFor(async () => {
+        await expect(canvas.queryByTestId('dialog')).not.toBeInTheDocument();
+        return expect(args.onClose).toHaveBeenCalledOnce();
+      });
+    });
+  }
+}`,...(V=(P=B.parameters)==null?void 0:P.docs)==null?void 0:V.source}}};var Y,A,G;C.parameters={...C.parameters,docs:{...(Y=C.parameters)==null?void 0:Y.docs,source:{originalSource:`{
+  tags: ['!autodocs'],
+  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(() => {
+        expect(canvas.queryByTestId('dialog')).not.toBeInTheDocument();
+        expect(args.onClose).toHaveBeenCalledOnce();
+      });
+    });
+  }
+}`,...(G=(A=C.parameters)==null?void 0:A.docs)==null?void 0:G.source}}};var J,N,Q;T.parameters={...T.parameters,docs:{...(J=T.parameters)==null?void 0:J.docs,source:{originalSource:`{
+  tags: ['!autodocs'],
+  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 = await canvas.findByLabelText('Close');
+      await userEvent.click(closeButton);
+      return waitFor(async () => {
+        await expect(canvas.queryByTestId('dialog')).not.toBeInTheDocument();
+        return expect(args.onClose).toHaveBeenCalledOnce();
+      });
+    });
+  }
+}`,...(Q=(N=T.parameters)==null?void 0:N.docs)==null?void 0:Q.source}}};var X,Z,$;v.parameters={...v.parameters,docs:{...(X=v.parameters)==null?void 0:X.docs,source:{originalSource:`{
+  tags: ['!autodocs'],
+  args: {
+    title: 'Test Close Button'
+  },
+  play: async ctx => {
+    await meta.play?.(ctx);
+    const {
+      canvas,
+      step
+    } = ctx;
+    await step('Close dialog using close button', async () => {
+      const closeButton = await canvas.findByTestId('dialog-close');
+      await userEvent.click(closeButton);
+      return waitFor(async () => {
+        await expect(canvas.queryByTestId('dialog')).not.toBeInTheDocument();
+      });
+    });
+  }
+}`,...($=(Z=v.parameters)==null?void 0:Z.docs)==null?void 0:$.source}}};const be=["ExtraSmall","Small","Medium","Large","WidthResponsiveness","TestCloseOverlay","TestCloseFocus","TestCloseKeyboard","TestCloseButton","TestCloseButtonTestId"];export{p as ExtraSmall,m as Large,y as Medium,u as Small,T as TestCloseButton,v as TestCloseButtonTestId,B as TestCloseFocus,C as TestCloseKeyboard,w as TestCloseOverlay,g as WidthResponsiveness,be as __namedExportsOrder,a as default};