@preply/ds-docs 4.0.0 → 5.0.0

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

@@ -1,515 +0,0 @@
-import{j as e}from"./jsx-runtime-BTJTZTIL.js";import{r as a}from"./index-Cb9e4tly.js";import{a as F}from"./chunk-D5ZWXAHU-BhFjjRSl.js";import{f as Le,u as f,a as v,e as g}from"./index-Ctq3gFTp.js";import{R as We,P as Ne,O as Ve,C as Me,T as qe,D as Ue,a as Je}from"./index-Cxag6636.js";import{B as d}from"./Button-DhteO3C6.js";import{I as Ze}from"./IconButton-CqTm2jIV.js";import{H as Ke}from"./Heading-BLxyLk9f.js";import{g as Ye}from"./shared-strings-Bg7tW4tm.js";import{u as Ge}from"./index-DhCCT3uz.js";import{u as Xe}from"./PortalElementProvider-CxdFl3yP.js";import{g as Qe}from"./index-DdzHuZ-Y.js";import{w as R}from"./componentNames-NXEPEzbR.js";import{m as $e,s as et,b as tt}from"./classNames-BUL1Zq7e.js";import{S as m}from"./Steps-IgJnFF2g.js";import{I as ot}from"./Icon-BkmQyVqb.js";import{A as st}from"./Avatar-B08JWd24.js";import{F as nt}from"./TokyoUIInfo-DbkQBubr.js";import{L as at}from"./LayoutFlex-JDgK8BCr.js";import{N as it}from"./NumberField-BClPzJbf.js";import"./index-ChsGqxH_.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./v4-CtRu48qb.js";import"./index-BPrLDK9Y.js";import"./index-C7hTFOIV.js";import"./index-BlMeVLsf.js";import"./Combination-IIMvWCmY.js";import"./tslib.es6-C7pnyCjR.js";import"./render-icon-BT0Aq7PA.js";import"./ButtonBase-B_gwKVAa.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"./text-accent-DZDDtpIt.js";import"./text-centered-CznToR0o.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./ProgressSteps-CwDoZPp7.js";import"./message-CToTEy-z.js";import"./constants--ewUoBsO.js";import"./layout-relative.module-f40KabMD.js";import"./FormControl-D9rxeKMc.js";import"./Input-UdhYxppR.js";import"./InputContainer-B1hqJyx0.js";const rt=({title:s,titleId:o,...t},n)=>a.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",ref:n,"aria-labelledby":o,...t},s?a.createElement("title",{id:o},s):null,a.createElement("path",{fillRule:"evenodd",d:"M7.207 5.793a1 1 0 0 0-1.414 1.414L10.586 12l-4.793 4.793a1 1 0 1 0 1.414 1.414L12 13.414l4.793 4.793a1 1 0 0 0 1.414-1.414L13.414 12l4.793-4.793a1 1 0 0 0-1.414-1.414L12 10.586 7.207 5.793Z",clipRule:"evenodd"})),lt=a.forwardRef(rt),dt="overlay__NM-kk",ct="overlayShow__SQuh9",pt="overlayHide__UA0Uh",ut="Dialog__GqDxV",gt="mobileContentShow__1akQp",mt="mobileContentHide__GXooF",yt="contentShow__RpFHp",ht="contentHide__Y-gr5",ft="header__2EPvy",vt="description__0f9xh",Ct="actions__hIL-J",y={overlay:dt,overlayShow:ct,overlayHide:pt,Dialog:ut,"Dialog--fullheight":"Dialog--fullheight__2W7sp","no-border-radius":"no-border-radius__G2Oo3",mobileContentShow:gt,mobileContentHide: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-",contentShow:yt,contentHide:ht,"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",header:ft,description:vt,actions:Ct},xt=({open:s,title:o,description:t,children:n,size:i="md",hideHeader:u,onClose:p,mobileFullHeight:h,dataset:E})=>{const{formatMessage:Ie}=Ge(),Pe=Xe(),He=St(s),Fe=Qe(E,{preplyDsComponent:R.Dialog}),Ee=$e(y,R.Dialog,[et("size",i),tt("fullheight",void 0,h)]).join(" "),Re=a.useCallback(Ae=>{Ae||p==null||p()},[p]);return e.jsx(We,{open:s,onOpenChange:Re,children:e.jsxs(Ne,{container:Pe,children:[e.jsx(Ve,{className:y.overlay,"data-testid":"dialog-overlay"}),e.jsxs(Me,{...Fe,ref:He,className:Ee,children:[e.jsxs("header",{className:y.header,children:[e.jsxs("hgroup",{hidden:u,children:[e.jsx(qe,{asChild:!0,children:e.jsx(Ke,{tag:"h3",variant:"medium",children:o})}),t&&e.jsx(Ue,{asChild:!0,children:e.jsx("p",{className:y.description,children:t})})]}),e.jsx(Je,{asChild:!0,children:e.jsx(Ze,{variant:"ghost",dataset:{testid:"dialog-close"},assistiveText:Ie(Ye.close),svg:lt})})]}),n]})]})})},Dt=({primaryLabel:s,secondaryLabel:o,onPrimaryClick:t,onSecondaryClick:n})=>e.jsxs("div",{className:y.actions,children:[e.jsx(d,{variant:"secondary",onClick:n,children:o}),e.jsx(d,{variant:"primary",onClick:t,children:s})]}),r=Object.assign(xt,{Actions:Dt});function St(s){const[o,t]=a.useState(null),n=a.useCallback(i=>t(i),[]);return a.useEffect(()=>{if(!s||!o)return;const i=async()=>{const p=o.getAnimations().map(E=>E.finished);await Promise.allSettled(p);const{y:h}=o.getBoundingClientRect();o.classList.toggle(y["no-border-radius"],h===0)};i(),window.addEventListener("resize",i);const u=new ResizeObserver(i);return u.observe(o),()=>{window.removeEventListener("resize",i),u.disconnect()}},[s,o]),n}try{r.displayName="Dialog",r.__docgenInfo={description:`A modal dialog component that can be used to show content in an overlay.
-
-Composed of:
-- Dialog: The main component
-- Dialog.Actions: Footer actions with primary and secondary buttons`,displayName:"Dialog",props:{open:{defaultValue:null,description:"Controls the visibility of the dialog",name:"open",required:!0,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},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"}]}},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 and height on mobile",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 ho={title:"Components/Dialog",component:r,parameters:{docs:{story:{inline:!1,height:600}}},args:{onClose:Le()}},l=e.jsx("div",{style:{width:"100%",height:"200px",background:"linear-gradient(to bottom, color-mix(in srgb, #e0e0e0, transparent), #e0e0e0)"}}),c=async({canvas:s,step:o})=>{let t;return await o("Open dialog",async()=>{const n=s.getByTestId("trigger");return await f.click(n),v(()=>(t=s.getByTestId("dialog"),g(t).toBeVisible()))}),t},C={render:function(){const[o,t]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(d,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsx(r,{open:o,onClose:()=>t(!1),size:"xs",title:"Extra Small Dialog",dataset:{testid:"dialog"},children:l})]})},play:c},x={render:function(){const[o,t]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(d,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsx(r,{open:o,onClose:()=>t(!1),size:"sm",title:"Small Dialog",dataset:{testid:"dialog"},children:l})]})},play:c},D={render:function(){const[o,t]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(d,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsx(r,{open:o,onClose:()=>t(!1),size:"md",title:"Medium Dialog",dataset:{testid:"dialog"},children:l})]})},play:c},S={render:function(){const[o,t]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(d,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsx(r,{open:o,onClose:()=>t(!1),size:"lg",title:"Large Dialog",dataset:{testid:"dialog"},children:l})]})},play:c},w={parameters:{docs:{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'
-  }}
-/>
-\`\`\`
-                `}}},render:function(){const[o,t]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(d,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsx(r,{open:o,onClose:()=>t(!1),size:{_:"xs","medium-l":"lg"},title:"Width Responsivness",description:"Change the window width to see the Dialog width respond to it",dataset:{testid:"dialog"},children:l})]})},play:c},b={render:function(o){const[t,n]=a.useState(!1),[i,u]=a.useState(1);return e.jsxs(e.Fragment,{children:[e.jsx(d,{dataset:{testid:"trigger"},onClick:()=>n(!0),children:"Open"}),e.jsxs(r,{open:t,onClose:()=>{var p;n(!1),(p=o.onClose)==null||p.call(o)},size:"md",title:"Height Responsiveness",description:"Change the number of children to see the Dialog style respond to the height change",dataset:{testid:"dialog"},children:[e.jsx(it,{label:"Child count",value:i,onChange:p=>u(parseInt(p.target.value)),required:!0}),e.jsx("br",{}),Array.from({length:i},(p,h)=>e.jsx(a.Fragment,{children:l},h)),e.jsx(r.Actions,{primaryLabel:"Primary",secondaryLabel:"Secondary",onPrimaryClick:F("Primary button clicked"),onSecondaryClick:F("Secondary button clicked")})]})]})},play:c},z={parameters:{chromatic:{modes:{"narrow-l":{viewport:"narrow-l"},"medium-s":{viewport:"medium-s"},"medium-l":{viewport:"medium-l"}}}},render:function(){const[o,t]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(d,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsx(r,{open:o,onClose:()=>t(!1),size:"md",title:"Mobile Full Height",dataset:{testid:"dialog"},mobileFullHeight:!0,children:l})]})},play:c},O={render:function(){const[o,t]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(d,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsx(r,{open:o,onClose:()=>t(!1),size:"md",title:"Visually Hidden Title",description:"This header is hidden visually but still accessible to screen readers",hideHeader:!0,dataset:{testid:"dialog"},children:l})]})},play:c},j={render:function(){const[o,t]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(d,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsxs(r,{open:o,onClose:()=>t(!1),size:"md",title:"Dialog Title",description:"This is the dialog description.",dataset:{testid:"dialog"},children:[l,e.jsx(r.Actions,{primaryLabel:"Primary",secondaryLabel:"Secondary",onPrimaryClick:F("Primary button clicked"),onSecondaryClick:F("Secondary button clicked")})]})]})},play:c},k={parameters:{docs:{description:{story:`
-The Dialog component can be used with the Steps component to create multi-step flows.
-You can hide the Dialog's header using \`hideHeader\` and add your own headers to each step,
-like in this story.
-                `}}},render:function(){const[o,t]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(d,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsx(r,{open:o,onClose:()=>t(!1),size:"md",title:"Hidden Dialog Title",hideHeader:!0,dataset:{testid:"dialog"},children:e.jsxs(m,{"aria-label":"Onboarding Steps",children:[e.jsx(m.Step,{title:"Profile",description:"Tell us more about yourself",children:l}),e.jsx(m.Step,{title:"Subject",description:"What do you want to learn?",children:l}),e.jsx(m.Step,{title:"Availability",description:"When are you available?",children:l}),e.jsx("br",{}),e.jsxs(at,{justifyContent:"space-between",children:[e.jsx(m.Previous,{}),e.jsx(m.Next,{})]})]})})]})},play:c},_={parameters:{docs:{description:{story:"A dialog with an Icon component in the title. This demonstrates how to use React elements in the title."}}},render:function(){const[o,t]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(d,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsx(r,{open:o,onClose:()=>t(!1),size:"md",title:e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"8px"},children:[e.jsx(ot,{svg:nt}),e.jsx("span",{children:"Information Dialog"})]}),description:"This dialog title includes an icon component",dataset:{testid:"dialog"},children:l})]})},play:c},B={parameters:{docs:{description:{story:"A dialog with an Avatar component in the title. This demonstrates how to use compound components in the title."}}},render:function(){const[o,t]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(d,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsx(r,{open:o,onClose:()=>t(!1),size:"md",title:e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"12px"},children:[e.jsx(st,{size:"s",alt:"User"}),e.jsx("span",{children:"User Profile"})]}),description:"This dialog shows a user profile with an avatar in the title",dataset:{testid:"dialog"},children:l})]})},play:c},T={parameters:{docs:{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.
-                `}}},render:function(){const[o,t]=a.useState(!1);return a.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.jsxs("div",{style:{position:"relative",zIndex:99},children:[e.jsx(d,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsx(r,{open:o,title:"ZIndex Override",size:"md",onClose:()=>t(!1),dataset:{testid:"dialog"},children:l})]})},play:async({canvas:s,step:o})=>{await o("Open alert",async()=>(await f.click(s.getByTestId("trigger")),v(()=>{const t=s.getByTestId("dialog");g(t).toBeVisible()}))),await o("Check content's computed z-index",async()=>{const t=s.getByTestId("dialog"),n=getComputedStyle(t);g(n.zIndex).toBe("77")}),await o("Check overlay's computed z-index",async()=>{const t=s.getByTestId("dialog").previousElementSibling;if(!t)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 n=getComputedStyle(t);g(n.zIndex).toBe("88")})}},I={tags:["!autodocs"],render:function(o){const[t,n]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(d,{dataset:{testid:"trigger"},onClick:()=>n(!0),children:"Open"}),e.jsx(r,{open:t,onClose:()=>{var i;n(!1),(i=o.onClose)==null||i.call(o)},size:"md",title:"Test Close Button",dataset:{testid:"dialog"},children:l})]})},play:async s=>{const o=await c(s),{canvas:t,step:n,args:i}=s;await n("Close dialog using close button",async()=>{const u=t.getByTestId("dialog-close");return await f.click(u),v(async()=>(await g(o).not.toBeVisible(),g(i.onClose).toHaveBeenCalledOnce()))})}},P={tags:["!autodocs"],render:function(o){const[t,n]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(d,{dataset:{testid:"trigger"},onClick:()=>n(!0),children:"Open"}),e.jsx(r,{open:t,onClose:()=>{var i;n(!1),(i=o.onClose)==null||i.call(o)},size:"md",title:"Test Close Overlay",dataset:{testid:"dialog"},children:l})]})},play:async s=>{const o=await c(s),{canvas:t,step:n,args:i}=s;await n("Close dialog by clicking overlay",async()=>{const u=t.getByTestId("dialog-overlay");return await f.click(u),v(async()=>(await g(o).not.toBeVisible(),g(i.onClose).toHaveBeenCalledOnce()))})}},H={tags:["!autodocs"],render:function(o){const[t,n]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(d,{dataset:{testid:"trigger"},onClick:()=>n(!0),children:"Open"}),e.jsx(r,{open:t,onClose:()=>{var i;n(!1),(i=o.onClose)==null||i.call(o)},size:"md",title:"Test Close Keyboard",dataset:{testid:"dialog"},children:l})]})},play:async s=>{const o=await c(s),{step:t,args:n}=s;await t("Close dialog using escape key",async()=>(await f.keyboard("{Escape}"),v(async()=>(await g(o).not.toBeVisible(),g(n.onClose).toHaveBeenCalledOnce()))))}};var A,L,W;C.parameters={...C.parameters,docs:{...(A=C.parameters)==null?void 0:A.docs,source:{originalSource:`{
-  render: function Story() {
-    const [open, setOpen] = useState(false);
-    return <>
-                <Button dataset={{
-        testid: 'trigger'
-      }} onClick={() => setOpen(true)}>
-                    Open
-                </Button>
-                <Dialog open={open} onClose={() => setOpen(false)} size="xs" title="Extra Small Dialog" dataset={{
-        testid: 'dialog'
-      }}>
-                    {DummyContent}
-                </Dialog>
-            </>;
-  },
-  play: openDialogPlay
-}`,...(W=(L=C.parameters)==null?void 0:L.docs)==null?void 0:W.source}}};var N,V,M;x.parameters={...x.parameters,docs:{...(N=x.parameters)==null?void 0:N.docs,source:{originalSource:`{
-  render: function Story() {
-    const [open, setOpen] = useState(false);
-    return <>
-                <Button dataset={{
-        testid: 'trigger'
-      }} onClick={() => setOpen(true)}>
-                    Open
-                </Button>
-                <Dialog open={open} onClose={() => setOpen(false)} size="sm" title="Small Dialog" dataset={{
-        testid: 'dialog'
-      }}>
-                    {DummyContent}
-                </Dialog>
-            </>;
-  },
-  play: openDialogPlay
-}`,...(M=(V=x.parameters)==null?void 0:V.docs)==null?void 0:M.source}}};var q,U,J;D.parameters={...D.parameters,docs:{...(q=D.parameters)==null?void 0:q.docs,source:{originalSource:`{
-  render: function Story() {
-    const [open, setOpen] = useState(false);
-    return <>
-                <Button dataset={{
-        testid: 'trigger'
-      }} onClick={() => setOpen(true)}>
-                    Open
-                </Button>
-                <Dialog open={open} onClose={() => setOpen(false)} size="md" title="Medium Dialog" dataset={{
-        testid: 'dialog'
-      }}>
-                    {DummyContent}
-                </Dialog>
-            </>;
-  },
-  play: openDialogPlay
-}`,...(J=(U=D.parameters)==null?void 0:U.docs)==null?void 0:J.source}}};var Z,K,Y;S.parameters={...S.parameters,docs:{...(Z=S.parameters)==null?void 0:Z.docs,source:{originalSource:`{
-  render: function Story() {
-    const [open, setOpen] = useState(false);
-    return <>
-                <Button dataset={{
-        testid: 'trigger'
-      }} onClick={() => setOpen(true)}>
-                    Open
-                </Button>
-                <Dialog open={open} onClose={() => setOpen(false)} size="lg" title="Large Dialog" dataset={{
-        testid: 'dialog'
-      }}>
-                    {DummyContent}
-                </Dialog>
-            </>;
-  },
-  play: openDialogPlay
-}`,...(Y=(K=S.parameters)==null?void 0:K.docs)==null?void 0:Y.source}}};var G,X,Q;w.parameters={...w.parameters,docs:{...(G=w.parameters)==null?void 0:G.docs,source:{originalSource:`{
-  parameters: {
-    docs: {
-      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'
-  }}
-/>
-\\\`\\\`\\\`
-                \`
-      }
-    }
-  },
-  render: function Story() {
-    const [open, setOpen] = useState(false);
-    return <>
-                <Button dataset={{
-        testid: 'trigger'
-      }} onClick={() => setOpen(true)}>
-                    Open
-                </Button>
-                <Dialog open={open} onClose={() => setOpen(false)} size={{
-        _: 'xs',
-        'medium-l': 'lg'
-      }} title="Width Responsivness" description="Change the window width to see the Dialog width respond to it" dataset={{
-        testid: 'dialog'
-      }}>
-                    {DummyContent}
-                </Dialog>
-            </>;
-  },
-  play: openDialogPlay
-}`,...(Q=(X=w.parameters)==null?void 0:X.docs)==null?void 0:Q.source}}};var $,ee,te;b.parameters={...b.parameters,docs:{...($=b.parameters)==null?void 0:$.docs,source:{originalSource:`{
-  render: function Story(args) {
-    const [open, setOpen] = useState(false);
-    const [count, setCount] = useState(1);
-    return <>
-                <Button dataset={{
-        testid: 'trigger'
-      }} onClick={() => setOpen(true)}>
-                    Open
-                </Button>
-                <Dialog open={open} onClose={() => {
-        setOpen(false);
-        args.onClose?.();
-      }} size="md" title="Height Responsiveness" description="Change the number of children to see the Dialog style respond to the height change" dataset={{
-        testid: 'dialog'
-      }}>
-                    <NumberField label="Child count" value={count} onChange={e => setCount(parseInt(e.target.value))} required />
-                    <br />
-                    {Array.from({
-          length: count
-        }, (_v, i) => <Fragment key={i}>{DummyContent}</Fragment>)}
-                    <Dialog.Actions primaryLabel="Primary" secondaryLabel="Secondary" onPrimaryClick={action('Primary button clicked')} onSecondaryClick={action('Secondary button clicked')} />
-                </Dialog>
-            </>;
-  },
-  play: openDialogPlay
-}`,...(te=(ee=b.parameters)==null?void 0:ee.docs)==null?void 0:te.source}}};var oe,se,ne;z.parameters={...z.parameters,docs:{...(oe=z.parameters)==null?void 0:oe.docs,source:{originalSource:`{
-  parameters: {
-    chromatic: {
-      modes: {
-        'narrow-l': {
-          viewport: 'narrow-l'
-        },
-        'medium-s': {
-          viewport: 'medium-s'
-        },
-        'medium-l': {
-          viewport: 'medium-l'
-        }
-      }
-    }
-  },
-  render: function Story() {
-    const [open, setOpen] = useState(false);
-    return <>
-                <Button dataset={{
-        testid: 'trigger'
-      }} onClick={() => setOpen(true)}>
-                    Open
-                </Button>
-                <Dialog open={open} onClose={() => setOpen(false)} size="md" title="Mobile Full Height" dataset={{
-        testid: 'dialog'
-      }} mobileFullHeight>
-                    {DummyContent}
-                </Dialog>
-            </>;
-  },
-  play: openDialogPlay
-}`,...(ne=(se=z.parameters)==null?void 0:se.docs)==null?void 0:ne.source}}};var ae,ie,re;O.parameters={...O.parameters,docs:{...(ae=O.parameters)==null?void 0:ae.docs,source:{originalSource:`{
-  render: function Story() {
-    const [open, setOpen] = useState(false);
-    return <>
-                <Button dataset={{
-        testid: 'trigger'
-      }} onClick={() => setOpen(true)}>
-                    Open
-                </Button>
-                <Dialog open={open} onClose={() => setOpen(false)} size="md" title="Visually Hidden Title" description="This header is hidden visually but still accessible to screen readers" hideHeader dataset={{
-        testid: 'dialog'
-      }}>
-                    {DummyContent}
-                </Dialog>
-            </>;
-  },
-  play: openDialogPlay
-}`,...(re=(ie=O.parameters)==null?void 0:ie.docs)==null?void 0:re.source}}};var le,de,ce;j.parameters={...j.parameters,docs:{...(le=j.parameters)==null?void 0:le.docs,source:{originalSource:`{
-  render: function Story() {
-    const [open, setOpen] = useState(false);
-    return <>
-                <Button dataset={{
-        testid: 'trigger'
-      }} onClick={() => setOpen(true)}>
-                    Open
-                </Button>
-                <Dialog open={open} onClose={() => setOpen(false)} size="md" title="Dialog Title" description="This is the dialog description." dataset={{
-        testid: 'dialog'
-      }}>
-                    {DummyContent}
-                    <Dialog.Actions primaryLabel="Primary" secondaryLabel="Secondary" onPrimaryClick={action('Primary button clicked')} onSecondaryClick={action('Secondary button clicked')} />
-                </Dialog>
-            </>;
-  },
-  play: openDialogPlay
-}`,...(ce=(de=j.parameters)==null?void 0:de.docs)==null?void 0:ce.source}}};var pe,ue,ge;k.parameters={...k.parameters,docs:{...(pe=k.parameters)==null?void 0:pe.docs,source:{originalSource:`{
-  parameters: {
-    docs: {
-      description: {
-        story: \`
-The Dialog component can be used with the Steps component to create multi-step flows.
-You can hide the Dialog's header using \\\`hideHeader\\\` and add your own headers to each step,
-like in this story.
-                \`
-      }
-    }
-  },
-  render: function Story() {
-    const [open, setOpen] = useState(false);
-    return <>
-                <Button dataset={{
-        testid: 'trigger'
-      }} onClick={() => setOpen(true)}>
-                    Open
-                </Button>
-                <Dialog open={open} onClose={() => setOpen(false)} size="md" title="Hidden Dialog Title" hideHeader dataset={{
-        testid: 'dialog'
-      }}>
-                    <Steps aria-label="Onboarding Steps">
-                        <Steps.Step title="Profile" description="Tell us more about yourself">
-                            {DummyContent}
-                        </Steps.Step>
-                        <Steps.Step title="Subject" description="What do you want to learn?">
-                            {DummyContent}
-                        </Steps.Step>
-                        <Steps.Step title="Availability" description="When are you available?">
-                            {DummyContent}
-                        </Steps.Step>
-                        <br />
-                        <LayoutFlex justifyContent="space-between">
-                            <Steps.Previous />
-                            <Steps.Next />
-                        </LayoutFlex>
-                    </Steps>
-                </Dialog>
-            </>;
-  },
-  play: openDialogPlay
-}`,...(ge=(ue=k.parameters)==null?void 0:ue.docs)==null?void 0:ge.source}}};var me,ye,he;_.parameters={..._.parameters,docs:{...(me=_.parameters)==null?void 0:me.docs,source:{originalSource:`{
-  parameters: {
-    docs: {
-      description: {
-        story: 'A dialog with an Icon component in the title. This demonstrates how to use React elements in the title.'
-      }
-    }
-  },
-  render: function Story() {
-    const [open, setOpen] = useState(false);
-    return <>
-                <Button dataset={{
-        testid: 'trigger'
-      }} onClick={() => setOpen(true)}>
-                    Open
-                </Button>
-                <Dialog open={open} onClose={() => setOpen(false)} size="md" title={<div style={{
-        display: 'flex',
-        alignItems: 'center',
-        gap: '8px'
-      }}>
-                            <Icon svg={InfoIcon} />
-                            <span>Information Dialog</span>
-                        </div>} description="This dialog title includes an icon component" dataset={{
-        testid: 'dialog'
-      }}>
-                    {DummyContent}
-                </Dialog>
-            </>;
-  },
-  play: openDialogPlay
-}`,...(he=(ye=_.parameters)==null?void 0:ye.docs)==null?void 0:he.source}}};var fe,ve,Ce;B.parameters={...B.parameters,docs:{...(fe=B.parameters)==null?void 0:fe.docs,source:{originalSource:`{
-  parameters: {
-    docs: {
-      description: {
-        story: 'A dialog with an Avatar component in the title. This demonstrates how to use compound components in the title.'
-      }
-    }
-  },
-  render: function Story() {
-    const [open, setOpen] = useState(false);
-    return <>
-                <Button dataset={{
-        testid: 'trigger'
-      }} onClick={() => setOpen(true)}>
-                    Open
-                </Button>
-                <Dialog open={open} onClose={() => setOpen(false)} size="md" title={<div style={{
-        display: 'flex',
-        alignItems: 'center',
-        gap: '12px'
-      }}>
-                            <Avatar size="s" alt="User" />
-                            <span>User Profile</span>
-                        </div>} description="This dialog shows a user profile with an avatar in the title" dataset={{
-        testid: 'dialog'
-      }}>
-                    {DummyContent}
-                </Dialog>
-            </>;
-  },
-  play: openDialogPlay
-}`,...(Ce=(ve=B.parameters)==null?void 0:ve.docs)==null?void 0:Ce.source}}};var xe,De,Se;T.parameters={...T.parameters,docs:{...(xe=T.parameters)==null?void 0:xe.docs,source:{originalSource:`{
-  parameters: {
-    docs: {
-      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.
-                \`
-      }
-    }
-  },
-  render: function Story() {
-    const [open, setOpen] = useState(false);
-    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
-    }}>
-                <Button dataset={{
-        testid: 'trigger'
-      }} onClick={() => setOpen(true)}>
-                    Open
-                </Button>
-                <Dialog open={open} title="ZIndex Override" size="md" onClose={() => setOpen(false)} dataset={{
-        testid: 'dialog'
-      }}>
-                    {DummyContent}
-                </Dialog>
-            </div>;
-  },
-  play: async ({
-    canvas,
-    step
-  }) => {
-    await step('Open alert', async () => {
-      await userEvent.click(canvas.getByTestId('trigger'));
-      return waitFor(() => {
-        const alert = canvas.getByTestId('dialog');
-        expect(alert).toBeVisible();
-      });
-    });
-    await step(\`Check content's computed z-index\`, async () => {
-      const alert = canvas.getByTestId('dialog');
-      const styles = getComputedStyle(alert);
-      expect(styles.zIndex).toBe('77');
-    });
-    await step(\`Check overlay's computed z-index\`, async () => {
-      const overlay = canvas.getByTestId('dialog').previousElementSibling;
-      if (!overlay) 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 styles = getComputedStyle(overlay);
-      expect(styles.zIndex).toBe('88');
-    });
-  }
-}`,...(Se=(De=T.parameters)==null?void 0:De.docs)==null?void 0:Se.source}}};var we,be,ze;I.parameters={...I.parameters,docs:{...(we=I.parameters)==null?void 0:we.docs,source:{originalSource:`{
-  tags: ['!autodocs'],
-  render: function Story(args) {
-    const [open, setOpen] = useState(false);
-    return <>
-                <Button dataset={{
-        testid: 'trigger'
-      }} onClick={() => setOpen(true)}>
-                    Open
-                </Button>
-                <Dialog open={open} onClose={() => {
-        setOpen(false);
-        args.onClose?.();
-      }} size="md" title="Test Close Button" dataset={{
-        testid: 'dialog'
-      }}>
-                    {DummyContent}
-                </Dialog>
-            </>;
-  },
-  play: async ctx => {
-    const dialogContent = await openDialogPlay(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(dialogContent).not.toBeVisible();
-        return expect(args.onClose).toHaveBeenCalledOnce();
-      });
-    });
-  }
-}`,...(ze=(be=I.parameters)==null?void 0:be.docs)==null?void 0:ze.source}}};var Oe,je,ke;P.parameters={...P.parameters,docs:{...(Oe=P.parameters)==null?void 0:Oe.docs,source:{originalSource:`{
-  tags: ['!autodocs'],
-  render: function Story(args) {
-    const [open, setOpen] = useState(false);
-    return <>
-                <Button dataset={{
-        testid: 'trigger'
-      }} onClick={() => setOpen(true)}>
-                    Open
-                </Button>
-                <Dialog open={open} onClose={() => {
-        setOpen(false);
-        args.onClose?.();
-      }} size="md" title="Test Close Overlay" dataset={{
-        testid: 'dialog'
-      }}>
-                    {DummyContent}
-                </Dialog>
-            </>;
-  },
-  play: async ctx => {
-    const dialogContent = await openDialogPlay(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(dialogContent).not.toBeVisible();
-        return expect(args.onClose).toHaveBeenCalledOnce();
-      });
-    });
-  }
-}`,...(ke=(je=P.parameters)==null?void 0:je.docs)==null?void 0:ke.source}}};var _e,Be,Te;H.parameters={...H.parameters,docs:{...(_e=H.parameters)==null?void 0:_e.docs,source:{originalSource:`{
-  tags: ['!autodocs'],
-  render: function Story(args) {
-    const [open, setOpen] = useState(false);
-    return <>
-                <Button dataset={{
-        testid: 'trigger'
-      }} onClick={() => setOpen(true)}>
-                    Open
-                </Button>
-                <Dialog open={open} onClose={() => {
-        setOpen(false);
-        args.onClose?.();
-      }} size="md" title="Test Close Keyboard" dataset={{
-        testid: 'dialog'
-      }}>
-                    {DummyContent}
-                </Dialog>
-            </>;
-  },
-  play: async ctx => {
-    const dialogContent = await openDialogPlay(ctx);
-    const {
-      step,
-      args
-    } = ctx;
-    await step('Close dialog using escape key', async () => {
-      await userEvent.keyboard('{Escape}');
-      return waitFor(async () => {
-        await expect(dialogContent).not.toBeVisible();
-        return expect(args.onClose).toHaveBeenCalledOnce();
-      });
-    });
-  }
-}`,...(Te=(Be=H.parameters)==null?void 0:Be.docs)==null?void 0:Te.source}}};const fo=["ExtraSmall","Small","Medium","Large","WidthResponsiveness","HeightResponsiveness","MobileFullHeight","WithHiddenHeader","WithActions","WithSteps","WithIconInTitle","WithAvatarInTitle","WithZIndexOverride","TestCloseButton","TestCloseOverlay","TestCloseKeyboard"];export{C as ExtraSmall,b as HeightResponsiveness,S as Large,D as Medium,z as MobileFullHeight,x as Small,I as TestCloseButton,H as TestCloseKeyboard,P as TestCloseOverlay,w as WidthResponsiveness,j as WithActions,B as WithAvatarInTitle,O as WithHiddenHeader,_ as WithIconInTitle,k as WithSteps,T as WithZIndexOverride,fo as __namedExportsOrder,ho as default};