@preply/ds-docs 9.0.1 → 9.1.0

package/dist/assets/Dialog.primitives.stories-CSDdsj-9.js

@@ -0,0 +1,213 @@
+import{r as s,j as t}from"./iframe-CpMEswOF.js";import{u as q,w as K,e as H}from"./index-B_7ihsZD.js";import{F as V}from"./TokyoUIInfo-CwPA0O_V.js";import{B as o}from"./Button-KCBOR544.js";import{I as X}from"./Icon-BX3I9JNh.js";import{B as G}from"./Badge-BOSHGFZw.js";import{D as j,a as J,b as c}from"./DialogActions-DTUDyqFX.js";import{c as d,b as g,a as p,D as r}from"./DialogTitle-DJPc1ITB.js";import"./preload-helper-Dp1pzeXC.js";import"./render-icon-c7okze1K.js";import"./ButtonBase-D1x6yeKi.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./Spinner-lj2QA4al.js";import"./useMergeRefs-DkQLsYW4.js";import"./useHostname-BVhrcDgi.js";import"./index-CC6DAVyL.js";import"./componentNames-hc9KR2nX.js";import"./text-accent-DZ_ihUdH.js";import"./index-DT-MbRPK.js";import"./TokyoUIClose-C1pVTvLz.js";import"./IconButton-DVKNd7ZK.js";import"./shared-strings-BChji30Y.js";import"./useOpenInteractionType-BBP_TXgz.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:p,DialogFooter:c,DialogTitle:g,DialogDescription:d,DialogActions:J,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(c,{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(p,{}),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(g,{children:"Dialog"}),t.jsx(d,{children:"AKA Task Dialog"})]})]}),t.jsx(i,{}),t.jsx(c,{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(p,{}),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(g,{children:"Promo Dialog"}),t.jsx(d,{children:"For all your promotional needs"})]}),t.jsx(c,{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(p,{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(G,{type:"ai",children:"Beta"}),t.jsx(g,{children:"Promo Dialog 2.0"}),t.jsx(d,{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(p,{className:l.close}),t.jsx(g,{className:l.title,children:"Custom Title"}),t.jsx(d,{className:l.description,children:"Custom Description"}),t.jsx("br",{}),Array.from({length:5}).map((ot,Q)=>t.jsx(i,{},Q)),t.jsx(c,{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 <>
+                <Button dataset={{
+        testid: 'trigger'
+      }} onClick={() => setOpen(true)}>
+                    Open
+                </Button>
+                <DialogRoot dataset={{
+        testid: 'dialog'
+      }} open={open} onClose={() => setOpen(false)}>
+                    <DummyContent />
+                </DialogRoot>
+            </>;
+  }
+}`,...(S=(C=u.parameters)==null?void 0:C.docs)==null?void 0:S.source}}};var v,O,k;m.parameters={...m.parameters,docs:{...(v=m.parameters)==null?void 0:v.docs,source:{originalSource:`{
+  render: function Story() {
+    const [open, setOpen] = useState(false);
+    return <>
+                <Button dataset={{
+        testid: 'trigger'
+      }} onClick={() => setOpen(true)}>
+                    Open
+                </Button>
+                <DialogRoot dataset={{
+        testid: 'dialog'
+      }} open={open} onClose={() => setOpen(false)} overlay={false}>
+                    <DummyContent />
+                </DialogRoot>
+            </>;
+  }
+}`,...(k=(O=m.parameters)==null?void 0:O.docs)==null?void 0:k.source}}};var b,T,F;x.parameters={...x.parameters,docs:{...(b=x.parameters)==null?void 0:b.docs,source:{originalSource:`{
+  render: function Story() {
+    const [open, setOpen] = useState(false);
+    return <>
+                <Button dataset={{
+        testid: 'trigger'
+      }} onClick={() => setOpen(true)}>
+                    Open
+                </Button>
+                <DialogRoot dataset={{
+        testid: 'dialog'
+      }} open={open} onClose={() => setOpen(false)}>
+                    <DialogFooter>
+                        <DialogButtonStack>
+                            <Button variant="quaternary">Quaternary</Button>
+                            <Button variant="tertiary">Tertiary</Button>
+                            <Button variant="secondary">Secondary</Button>
+                            <Button variant="primary">Primary</Button>
+                        </DialogButtonStack>
+                    </DialogFooter>
+                </DialogRoot>
+            </>;
+  }
+}`,...(F=(T=x.parameters)==null?void 0:T.docs)==null?void 0:F.source}}};var I,w,N;D.parameters={...D.parameters,docs:{...(I=D.parameters)==null?void 0:I.docs,source:{originalSource:`{
+  render: function Story() {
+    const [open, setOpen] = useState(false);
+    return <>
+                <Button dataset={{
+        testid: 'trigger'
+      }} onClick={() => setOpen(true)}>
+                    Open
+                </Button>
+                <DialogRoot dataset={{
+        testid: 'dialog'
+      }} open={open} onClose={() => setOpen(false)}>
+                    <DialogCloseButton />
+                    <header style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '20px',
+          marginBottom: '24px'
+        }}>
+                        <Icon size="32" svg={InfoIcon} />
+                        <hgroup>
+                            <DialogTitle>Dialog</DialogTitle>
+                            <DialogDescription>AKA Task Dialog</DialogDescription>
+                        </hgroup>
+                    </header>
+                    <DummyContent />
+                    <DialogFooter>
+                        <DialogButtonStack>
+                            <Button variant="tertiary">Cancel</Button>
+                            <Button variant="primary">Confirm</Button>
+                        </DialogButtonStack>
+                    </DialogFooter>
+                </DialogRoot>
+            </>;
+  }
+}`,...(N=(w=D.parameters)==null?void 0:w.docs)==null?void 0:N.source}}};var R,_,P;y.parameters={...y.parameters,docs:{...(R=y.parameters)==null?void 0:R.docs,source:{originalSource:`{
+  render: function Story() {
+    const [open, setOpen] = useState(false);
+    return <>
+                <Button dataset={{
+        testid: 'trigger'
+      }} onClick={() => setOpen(true)}>
+                    Open
+                </Button>
+                <DialogRoot open={open} onClose={() => setOpen(false)} dataset={{
+        testid: 'dialog'
+      }}>
+                    <DialogCloseButton />
+                    <DummyContent style={{
+          backgroundColor: 'pink',
+          marginInline: 'calc(-1 * var(--dialog-padding))',
+          marginTop: 'calc(-1 * var(--dialog-padding))',
+          marginBottom: 'var(--dialog-padding)',
+          width: 'calc-size(auto)'
+        }} />
+                    <div style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '12px',
+          alignItems: 'center'
+        }}>
+                        <DialogTitle>Promo Dialog</DialogTitle>
+                        <DialogDescription>For all your promotional needs</DialogDescription>
+                    </div>
+                    <DialogFooter>
+                        <div style={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '12px',
+            width: 'fit-content',
+            marginInline: 'auto'
+          }}>
+                            <Button variant="primary">Confirm</Button>
+                            <Button variant="tertiary">Cancel</Button>
+                        </div>
+                    </DialogFooter>
+                </DialogRoot>
+            </>;
+  }
+}`,...(P=(_=y.parameters)==null?void 0:_.docs)==null?void 0:P.source}}};var z,A,E;f.parameters={...f.parameters,docs:{...(z=f.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>
+                <DialogRoot dataset={{
+        testid: 'dialog'
+      }} open={open} onClose={() => setOpen(false)}>
+                    <DialogCloseButton>
+                        <Button variant="ghost">Not Now</Button>
+                    </DialogCloseButton>
+                    <DummyContent style={{
+          background: 'color-mix(in srgb, #ffe8f7, transparent)',
+          position: 'absolute',
+          inset: 0,
+          height: '100%',
+          zIndex: '-1'
+        }} />
+                    <DummyContent style={{
+          marginInline: 'calc(-1 * var(--dialog-padding))',
+          marginTop: 'calc(-1 * var(--dialog-padding))',
+          marginBottom: 'var(--dialog-padding)',
+          width: 'calc-size(auto)'
+        }} />
+                    <div style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '12px',
+          alignItems: 'center'
+        }}>
+                        <Badge type="ai">Beta</Badge>
+                        <DialogTitle>Promo Dialog 2.0</DialogTitle>
+                        <DialogDescription>Now with a longer button</DialogDescription>
+                    </div>
+                    <div style={{
+          marginTop: 'var(--dialog-padding)'
+        }}>
+                        <Button variant="onColor" fullWidth>
+                            Let&apos;s go!
+                        </Button>
+                    </div>
+                </DialogRoot>
+            </>;
+  }
+}`,...(E=(A=f.parameters)==null?void 0:A.docs)==null?void 0:E.source}}};var W,L,M;h.parameters={...h.parameters,docs:{...(W=h.parameters)==null?void 0:W.docs,source:{originalSource:`{
+  render: function Story() {
+    const [open, setOpen] = useState(false);
+    return <>
+                <Button dataset={{
+        testid: 'trigger'
+      }} onClick={() => setOpen(true)}>
+                    Open
+                </Button>
+                <DialogRoot open={open} onClose={() => setOpen(false)} dataset={{
+        testid: 'dialog'
+      }} className={customDialogStyles.content}>
+                    <DialogCloseButton className={customDialogStyles.close} />
+                    <DialogTitle className={customDialogStyles.title}>Custom Title</DialogTitle>
+                    <DialogDescription className={customDialogStyles.description}>
+                        Custom Description
+                    </DialogDescription>
+                    <br />
+                    {Array.from({
+          length: 5
+        }).map((_, index) => <DummyContent key={index} />)}
+                    <DialogFooter className={customDialogStyles.footer}>
+                        <DialogButtonStack className={customDialogStyles.buttonStack}>
+                            <Button variant="primary">Custom Primary</Button>
+                            <Button variant="secondary">Custom Secondary</Button>
+                        </DialogButtonStack>
+                    </DialogFooter>
+                </DialogRoot>
+            </>;
+  }
+}`,...(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};

package/dist/assets/Dialog.stories-BfS-yGJK.js

@@ -0,0 +1,248 @@
+import{j as e,r as b}from"./iframe-CpMEswOF.js";import{D as a}from"./index-9rU-ZrVj.js";import{B as s}from"./Button-KCBOR544.js";import{A as De}from"./Avatar-DooDODLU.js";import{F as Ie}from"./TokyoUIInfo-CwPA0O_V.js";import{N as Oe}from"./NumberField-DmosE2JM.js";import{I as Pe}from"./Icon-BX3I9JNh.js";import{O as z}from"./OnboardingTooltip-CsTure6K.js";import{C as x}from"./Checkbox-BpQ-rwun.js";import{D as ze}from"./DialogTitle-DJPc1ITB.js";import"./preload-helper-Dp1pzeXC.js";import"./Steps-GOg1wsKY.js";import"./index-DT-MbRPK.js";import"./Heading-Bie8QWaf.js";import"./text-accent-DZ_ihUdH.js";import"./text-centered-DiwR-QSx.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./componentNames-hc9KR2nX.js";import"./ProgressSteps-Dq6mpMpu.js";import"./Text-cq49jjad.js";import"./message-CTdBLxyt.js";import"./DialogActions-DTUDyqFX.js";import"./Dialog-Bmg2gpCM.js";import"./render-icon-c7okze1K.js";import"./ButtonBase-D1x6yeKi.js";import"./Spinner-lj2QA4al.js";import"./useMergeRefs-DkQLsYW4.js";import"./useHostname-BVhrcDgi.js";import"./index-CC6DAVyL.js";import"./constants-5om8Ptru.js";import"./FormControl-CygcWV_h.js";import"./Input-DwA6-keB.js";import"./InputContainer-BM2ePliH.js";import"./TokyoUIClose-C1pVTvLz.js";import"./shared-strings-BChji30Y.js";import"./index-dUCHvwfu.js";import"./IconButton-DVKNd7ZK.js";import"./useOpenInteractionType-BBP_TXgz.js";const{action:l}=__STORYBOOK_MODULE_ACTIONS__,{expect:n,fn:I,userEvent:c,waitFor:m,within:R}=__STORYBOOK_MODULE_TEST__,d=()=>e.jsx("div",{style:{width:"100%",height:"200px",background:"linear-gradient(to bottom, color-mix(in srgb, #e0e0e0, transparent), #e0e0e0)"}});let Te=()=>{};const Re=(o,t)=>{const[i,r]=b.useState(t.args.open);Te=()=>r(!1);const v=()=>{var O,P;r(!1),(P=(O=t.args).onClose)==null||P.call(O)};return e.jsxs(e.Fragment,{children:[e.jsx(s,{dataset:{testid:"trigger"},onClick:()=>r(!0),children:"Open"}),e.jsx(o,{args:{...t.args,open:i,onClose:v}})]})},D={title:"Components/Dialog",component:a,parameters:{preventIframeFromScrollingParent:!0,docs:{story:{inline:!1,height:600}}},decorators:[Re],args:{open:!1,onClose:I(),children:e.jsx(d,{}),dataset:{testid:"dialog"}},play:async({canvas:o,step:t})=>{await t("Open dialog",async()=>{const i=o.getByTestId("trigger");return await c.click(i),m(()=>{n(o.getByTestId("dialog")).toBeVisible()})})}},B={args:{title:"Dialog title",children:e.jsxs(e.Fragment,{children:[e.jsx(d,{}),e.jsx(a.Actions,{primaryButton:e.jsx(s,{size:"medium",variant:"primary",onClick:()=>{l("Primary button clicked"),Te()},children:"Primary"}),secondaryButton:e.jsx(s,{size:"medium",variant:"tertiary",onClick:l("Secondary button clicked"),children:"Secondary"})})]})}},Ae=()=>{const[o,t]=b.useState(1);return e.jsxs(e.Fragment,{children:[e.jsx(Oe,{label:"Child count",value:o,onChange:i=>t(parseInt(i.target.value)),required:!0}),e.jsx("br",{}),Array.from({length:o},(i,r)=>e.jsx(d,{},r))]})},w={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(Ae,{}),e.jsx(a.Actions,{primaryButton:e.jsx(s,{size:"medium",variant:"primary",onClick:l("Primary button clicked"),children:"Primary"}),secondaryButton:e.jsx(s,{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(x,{checked:!0,dsInternalSimulation:"focus"}),e.jsx(x,{checked:!0,dsInternalSimulation:"focus"})]}),e.jsx(d,{}),e.jsxs("div",{style:{display:"flex",justifyContent:"space-between"},children:[e.jsx(x,{checked:!0,dsInternalSimulation:"focus"}),e.jsx(x,{checked:!0,dsInternalSimulation:"focus"})]}),e.jsx(a.Actions,{primaryButton:e.jsx(s,{size:"medium",variant:"primary",onClick:l("Primary button clicked"),children:"Primary"}),secondaryButton:e.jsx(s,{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}},j={args:{title:"Dialog Title",description:"This is the dialog description.",children:e.jsxs(e.Fragment,{children:[e.jsx(d,{}),e.jsx(a.Actions,{primaryButton:e.jsx(s,{size:"medium",variant:"primary",onClick:l("Primary button clicked"),children:"Primary"})})]})}},f={args:{title:"Dialog Title",description:"This is the dialog description.",children:e.jsxs(e.Fragment,{children:[e.jsx(d,{}),e.jsx(a.Actions,{primaryButton:e.jsx(s,{size:"medium",variant:"primary",onClick:l("Primary button clicked"),children:"Primary"}),secondaryButton:e.jsx(s,{size:"medium",variant:"tertiary",onClick:l("Secondary button clicked"),children:"Secondary"})})]})}},p=()=>e.jsxs(ze,{open:!0,dataset:{testid:"dialog"},children:[e.jsx(a.CloseButton,{}),e.jsxs(a.Steps,{"aria-label":"Onboarding Steps",children:[e.jsx(a.Step,{title:"Profile",description:"Tell us more about yourself",children:e.jsx(d,{})}),e.jsx(a.Step,{title:"Subject",description:"What do you want to learn?",children:e.jsx(d,{})}),e.jsx(a.Step,{title:"Availability",description:"When are you available?",children:e.jsx(d,{})}),e.jsx(a.StepsActions,{primaryButton:e.jsx(s,{size:"medium",variant:"primary",onClick:l("Primary button clicked"),children:"Primary"})})]})]});p.play=async o=>{const{canvas:t,step:i}=o;await i("Dialog should be visible",async()=>{await m(()=>{n(t.getByTestId("dialog")).toBeVisible()})}),await i("Initially, only next button is present",async()=>{n(t.queryByRole("button",{name:"Next"})).toBeVisible(),n(t.queryByRole("button",{name:"Previous"})).not.toBeInTheDocument(),n(t.queryByRole("button",{name:"Primary"})).not.toBeInTheDocument()}),await i("Navigate to the next step. Previous/Next buttons are visible",async()=>{await c.click(t.getByRole("button",{name:"Next"})),n(t.queryByRole("button",{name:"Previous"})).toBeVisible(),n(t.queryByRole("button",{name:"Next"})).toBeVisible(),n(t.queryByRole("button",{name:"Primary"})).not.toBeInTheDocument()}),await i("Navigate to the last step. Previous/Primary buttons are visible",async()=>{await c.click(t.getByRole("button",{name:"Next"})),n(t.queryByRole("button",{name:"Previous"})).toBeVisible(),n(t.queryByRole("button",{name:"Primary"})).toBeVisible(),n(t.queryByRole("button",{name:"Next"})).not.toBeInTheDocument()})};const g={args:{leadingElement:e.jsx(Pe,{size:"32",svg:Ie}),title:"Information Dialog"}},y={args:{leadingElement:e.jsx(De,{size:"48",alt:"User"}),title:"User Profile",description:"This dialog shows a user profile with an avatar in the title"}},u=o=>(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(a,{...o,title:"ZIndex Override"})}));u.parameters={docs:{source:{type:"code"}}};u.play=async({canvas:o,step:t})=>{await t("Open alert",async()=>(await c.click(o.getByTestId("trigger")),m(()=>{const i=o.getByTestId("dialog");n(i).toBeVisible()}))),await t("Check content's computed z-index",async()=>{const i=o.getByTestId("dialog"),r=getComputedStyle(i);n(r.zIndex).toBe("77")}),await t("Check overlay's computed z-index",async()=>{const i=o.getByTestId("dialog-overlay");if(!i)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 r=getComputedStyle(i);n(r.zIndex).toBe("88")})};const T={uncontrolled:I(l("uncontrolled")),controlled:I(l("controlled"))},Fe=()=>{const[o,t]=b.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(z,{dataset:{testid:"uncontrolled-tooltip"},actionOnClick:T.uncontrolled,title:"Uncontrolled",text:"text",children:e.jsx(s,{children:"Uncontrolled"})}),e.jsx(z,{dataset:{testid:"controlled-tooltip"},actionOnClick:T.controlled,title:"Controlled",text:"text",disabled:!o,onClose:()=>t(!1),children:e.jsx(s,{onClick:()=>t(!0),children:"Open tooltip"})})]})},S={tags:["!autodocs"],args:{children:e.jsx(Fe,{})},play:async o=>{var v;await((v=D.play)==null?void 0:v.call(D,o));const{canvas:t,step:i}=o,r=t.getByTestId("uncontrolled-tooltip");await i("Uncontrolled tooltip should be visible",async()=>{await m(()=>{n(r).toBeVisible()})}),await i("Click on uncontrolled tooltip action",async()=>{await c.click(R(r).getByTestId("action")),n(T.uncontrolled).toHaveBeenCalledOnce()}),await i("Open controlled tooltip",async()=>{await c.click(t.getByRole("button",{name:"Open tooltip"})),await m(()=>{n(t.getByTestId("controlled-tooltip")).toBeVisible()})}),await i("Click on controlled tooltip action",async()=>{await c.click(R(t.getByTestId("controlled-tooltip")).getByTestId("action")),n(T.controlled).toHaveBeenCalledOnce()})}},A=({number:o,children:t})=>{const[i,r]=b.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(s,{onClick:()=>r(!0),dataset:{testid:`trigger-${o}`},children:"Open"}),e.jsx(a,{open:i,onClose:()=>r(!1),title:`Dialog ${o}`,description:void 0,leadingElement:void 0,dataset:{testid:`dialog-${o}`},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(d,{}),e.jsx("br",{}),e.jsx(A,{number:2,children:e.jsx(A,{number:3})})]})},play:async({canvas:o,step:t})=>{await t("Open dialog",async()=>{const i=o.getByTestId("trigger");return await c.click(i),m(()=>{n(o.getByTestId("dialog")).toBeVisible()})}),await t("Open dialog 2",async()=>{const i=o.getByTestId("trigger-2");return await c.click(i),m(()=>{n(o.getByTestId("dialog-2")).toBeVisible()})}),await t("Open dialog 3",async()=>{const i=o.getByTestId("trigger-3");return await c.click(i),m(()=>{n(o.getByTestId("dialog-3")).toBeVisible()})})}};var F,E,H;B.parameters={...B.parameters,docs:{...(F=B.parameters)==null?void 0:F.docs,source:{originalSource:`{
+  args: {
+    title: 'Dialog title',
+    children: <>
+                <DummyContent />
+                <Dialog.Actions primaryButton={<Button size="medium" variant="primary" onClick={() => {
+        action('Primary button clicked');
+        closeDialog();
+      }}>
+                            Primary
+                        </Button>} secondaryButton={<Button size="medium" variant="tertiary" onClick={action('Secondary button clicked')}>
+                            Secondary
+                        </Button>} />
+            </>
+  }
+}`,...(H=(E=B.parameters)==null?void 0:E.docs)==null?void 0:H.source}}};var W,N,V;w.parameters={...w.parameters,docs:{...(W=w.parameters)==null?void 0:W.docs,source:{originalSource:`{
+  args: {
+    title: 'Height Responsiveness',
+    description: 'Change the number of children to see the Dialog style respond to the height change',
+    children: <>
+                <DynamicChildren />
+                <Dialog.Actions primaryButton={<Button size="medium" variant="primary" onClick={action('Primary button clicked')}>
+                            Primary
+                        </Button>} secondaryButton={<Button size="medium" variant="tertiary" onClick={action('Secondary button clicked')}>
+                            Secondary
+                        </Button>} />
+            </>
+  }
+}`,...(V=(N=w.parameters)==null?void 0:N.docs)==null?void 0:V.source}}};var _,q,U;k.parameters={...k.parameters,docs:{...(_=k.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.\`,
+    children: <>
+                <div style={{
+        display: 'flex',
+        justifyContent: 'space-between'
+      }}>
+                    <Checkbox checked dsInternalSimulation="focus" />
+                    <Checkbox checked dsInternalSimulation="focus" />
+                </div>
+                <DummyContent />
+                <div style={{
+        display: 'flex',
+        justifyContent: 'space-between'
+      }}>
+                    <Checkbox checked dsInternalSimulation="focus" />
+                    <Checkbox checked dsInternalSimulation="focus" />
+                </div>
+                <Dialog.Actions primaryButton={<Button size="medium" variant="primary" onClick={action('Primary button clicked')}>
+                            Primary
+                        </Button>} secondaryButton={<Button size="medium" variant="tertiary" onClick={action('Secondary button clicked')}>
+                            Secondary
+                        </Button>} />
+            </>
+  }
+}`,...(U=(q=k.parameters)==null?void 0:q.docs)==null?void 0:U.source}}};var L,M,Z;C.parameters={...C.parameters,docs:{...(L=C.parameters)==null?void 0:L.docs,source:{originalSource:`{
+  parameters: {
+    chromatic: {
+      modes: {
+        'narrow-l': {
+          viewport: 'narrow-l'
+        },
+        'medium-s': {
+          viewport: 'medium-s'
+        },
+        'medium-l': {
+          viewport: 'medium-l'
+        }
+      }
+    }
+  },
+  args: {
+    title: 'Mobile Full Height',
+    mobileFullHeight: true
+  }
+}`,...(Z=(M=C.parameters)==null?void 0:M.docs)==null?void 0:Z.source}}};var $,K,Y;j.parameters={...j.parameters,docs:{...($=j.parameters)==null?void 0:$.docs,source:{originalSource:`{
+  args: {
+    title: 'Dialog Title',
+    description: 'This is the dialog description.',
+    children: <>
+                <DummyContent />
+                <Dialog.Actions primaryButton={<Button size="medium" variant="primary" onClick={action('Primary button clicked')}>
+                            Primary
+                        </Button>} />
+            </>
+  }
+}`,...(Y=(K=j.parameters)==null?void 0:K.docs)==null?void 0:Y.source}}};var G,J,Q;f.parameters={...f.parameters,docs:{...(G=f.parameters)==null?void 0:G.docs,source:{originalSource:`{
+  args: {
+    title: 'Dialog Title',
+    description: 'This is the dialog description.',
+    children: <>
+                <DummyContent />
+                <Dialog.Actions primaryButton={<Button size="medium" variant="primary" onClick={action('Primary button clicked')}>
+                            Primary
+                        </Button>} secondaryButton={<Button size="medium" variant="tertiary" onClick={action('Secondary button clicked')}>
+                            Secondary
+                        </Button>} />
+            </>
+  }
+}`,...(Q=(J=f.parameters)==null?void 0:J.docs)==null?void 0:Q.source}}};var X,ee,te,oe,ie;p.parameters={...p.parameters,docs:{...(X=p.parameters)==null?void 0:X.docs,source:{originalSource:`() => {
+  return <DialogRoot open={true} dataset={{
+    testid: \`dialog\`
+  }}>
+            <Dialog.CloseButton />
+
+            <Dialog.Steps aria-label="Onboarding Steps">
+                <Dialog.Step title="Profile" description="Tell us more about yourself">
+                    <DummyContent />
+                </Dialog.Step>
+                <Dialog.Step title="Subject" description="What do you want to learn?">
+                    <DummyContent />
+                </Dialog.Step>
+                <Dialog.Step title="Availability" description="When are you available?">
+                    <DummyContent />
+                </Dialog.Step>
+                <Dialog.StepsActions primaryButton={<Button size="medium" variant="primary" onClick={action('Primary button clicked')}>
+                            Primary
+                        </Button>} />
+            </Dialog.Steps>
+        </DialogRoot>;
+}`,...(te=(ee=p.parameters)==null?void 0:ee.docs)==null?void 0:te.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).`,...(ie=(oe=p.parameters)==null?void 0:oe.docs)==null?void 0:ie.description}}};var ne,re,ae,se,le;g.parameters={...g.parameters,docs:{...(ne=g.parameters)==null?void 0:ne.docs,source:{originalSource:`{
+  args: {
+    leadingElement: <Icon size="32" svg={InfoIcon} />,
+    title: 'Information Dialog'
+  }
+}`,...(ae=(re=g.parameters)==null?void 0:re.docs)==null?void 0:ae.source},description:{story:"A dialog with an Icon component in the title. This demonstrates how to use React elements in the title.",...(le=(se=g.parameters)==null?void 0:se.docs)==null?void 0:le.description}}};var ce,de,me,ue,pe;y.parameters={...y.parameters,docs:{...(ce=y.parameters)==null?void 0:ce.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'
+  }
+}`,...(me=(de=y.parameters)==null?void 0:de.docs)==null?void 0:me.source},description:{story:"A dialog with an Avatar component in the title. This demonstrates how to use compound components in the title.",...(pe=(ue=y.parameters)==null?void 0:ue.docs)==null?void 0:pe.description}}};var ge,ye,he,be,ve;u.parameters={...u.parameters,docs:{...(ge=u.parameters)==null?void 0:ge.docs,source:{originalSource:`args => {
+  useEffect(() => {
+    document.body.style.setProperty('--ds-dialog-overlay-z-index-override', '88');
+    document.body.style.setProperty('--ds-dialog-content-z-index-override', '77');
+    return () => {
+      document.body.style.removeProperty('--ds-dialog-overlay-z-index-override');
+      document.body.style.removeProperty('--ds-dialog-content-z-index-override');
+    };
+  }, []);
+  return <div style={{
+    position: 'relative',
+    zIndex: 99
+  }}>
+            <Dialog {...args} title="ZIndex Override" />
+        </div>;
+}`,...(he=(ye=u.parameters)==null?void 0:ye.docs)==null?void 0:he.source},description:{story:`The Dialog component provides CSS property escape hatches for controlling the z-index of both the overlay and content:
+
+- \\\`--ds-dialog-overlay-z-index-override\\\`: Controls the overlay's z-index
+- \\\`--ds-dialog-content-z-index-override\\\`: Controls the content's z-index
+
+These should only be used when necessary, as proper stacking context isolation is preferred.
+
+In the following example, the stacking order of the dialog trigger, overlay, and content are
+reveresed using the above CSS properties.
+
+Note: This is done using a \\\`useEffect\\\` just for the sake of the story. In a real-world scenario, this should ideally be done in a global stylesheet or a theme provider.`,...(ve=(be=u.parameters)==null?void 0:be.docs)==null?void 0:ve.description}}};var xe,Be,we;S.parameters={...S.parameters,docs:{...(xe=S.parameters)==null?void 0:xe.docs,source:{originalSource:`{
+  tags: ['!autodocs'],
+  args: {
+    children: <ContentWithOnboardingTooltip />
+  },
+  play: async ctx => {
+    await meta.play?.(ctx);
+    const {
+      canvas,
+      step
+    } = ctx;
+    const uncontrolledTooltip = canvas.getByTestId('uncontrolled-tooltip');
+    await step('Uncontrolled tooltip should be visible', async () => {
+      await waitFor(() => {
+        expect(uncontrolledTooltip).toBeVisible();
+      });
+    });
+    await step('Click on uncontrolled tooltip action', async () => {
+      await userEvent.click(within(uncontrolledTooltip).getByTestId('action'));
+      expect(onboardingTooltipCallbacks.uncontrolled).toHaveBeenCalledOnce();
+    });
+    await step('Open controlled tooltip', async () => {
+      await userEvent.click(canvas.getByRole('button', {
+        name: 'Open tooltip'
+      }));
+      await waitFor(() => {
+        expect(canvas.getByTestId('controlled-tooltip')).toBeVisible();
+      });
+    });
+    await step('Click on controlled tooltip action', async () => {
+      await userEvent.click(within(canvas.getByTestId('controlled-tooltip')).getByTestId('action'));
+      expect(onboardingTooltipCallbacks.controlled).toHaveBeenCalledOnce();
+    });
+  }
+}`,...(we=(Be=S.parameters)==null?void 0:Be.docs)==null?void 0:we.source}}};var ke,Ce,je,fe,Se;h.parameters={...h.parameters,docs:{...(ke=h.parameters)==null?void 0:ke.docs,source:{originalSource:`{
+  parameters: {
+    chromatic: {
+      modes: {
+        'narrow-l': {
+          viewport: 'narrow-l'
+        },
+        'medium-s': {
+          viewport: 'medium-s'
+        },
+        'medium-l': {
+          viewport: 'medium-l'
+        }
+      }
+    }
+  },
+  args: {
+    title: 'Dialog 1',
+    children: <>
+                <DummyContent />
+                <br />
+                <NestedDialogsLayer number={2}>
+                    <NestedDialogsLayer number={3} />
+                </NestedDialogsLayer>
+            </>
+  },
+  play: async ({
+    canvas,
+    step
+  }) => {
+    await step('Open dialog', async () => {
+      const triggerButton = canvas.getByTestId('trigger');
+      await userEvent.click(triggerButton);
+      return waitFor(() => {
+        expect(canvas.getByTestId('dialog')).toBeVisible();
+      });
+    });
+    await step('Open dialog 2', async () => {
+      const triggerButton = canvas.getByTestId('trigger-2');
+      await userEvent.click(triggerButton);
+      return waitFor(() => {
+        expect(canvas.getByTestId('dialog-2')).toBeVisible();
+      });
+    });
+    await step('Open dialog 3', async () => {
+      const triggerButton = canvas.getByTestId('trigger-3');
+      await userEvent.click(triggerButton);
+      return waitFor(() => {
+        expect(canvas.getByTestId('dialog-3')).toBeVisible();
+      });
+    });
+  }
+}`,...(je=(Ce=h.parameters)==null?void 0:Ce.docs)==null?void 0:je.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.`,...(Se=(fe=h.parameters)==null?void 0:fe.docs)==null?void 0:Se.description}}};const Bt=["Default","HeightResponsiveness","HeightRespectsComponentOutlines","MobileFullHeight","WithPrimaryAction","WithSecondaryAction","WithSteps","WithIcon","WithAvatar","WithZIndexOverride","WithOnboardingTooltipInside","NestedDialogs"];export{B as Default,k as HeightRespectsComponentOutlines,w as HeightResponsiveness,C as MobileFullHeight,h as NestedDialogs,y as WithAvatar,g as WithIcon,S as WithOnboardingTooltipInside,j as WithPrimaryAction,f as WithSecondaryAction,p as WithSteps,u as WithZIndexOverride,Bt as __namedExportsOrder,D as default};

package/dist/assets/{Dialog.test.stories-gNvLYcCQ.js → Dialog.test.stories-DngMxsX4.js}

@@ -1,4 +1,4 @@
-import{j as c,r as Q}from"./iframe-rPxPheSO.js";import{D as X}from"./index-jKLBZczP.js";import{B as Z}from"./Button-DGeBRRiu.js";import"./preload-helper-Dp1pzeXC.js";import"./Steps-CmKCNz9h.js";import"./index-Ch8cwrP-.js";import"./Heading-BFtiYfNT.js";import"./text-accent-DectBi3u.js";import"./text-centered-nlNU1AO2.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./componentNames-Dts5uwdK.js";import"./ProgressSteps-DENeSjPR.js";import"./Text-DadiF3bg.js";import"./message-CVBYHxuJ.js";import"./DialogTitle-C_7Sfj1O.js";import"./TokyoUIClose-CdBZGlA7.js";import"./IconButton-ClS7adSJ.js";import"./render-icon-CYz0RSbb.js";import"./ButtonBase-DNBAX75l.js";import"./Spinner-DMKptX0-.js";import"./useMergeRefs-D3-2wqPW.js";import"./useHostname-CSCtqnDM.js";import"./index-CC6DAVyL.js";import"./shared-strings-DqJVAlTT.js";import"./useOpenInteractionType-DLe0t7DD.js";import"./DialogActions-BVsjnGkp.js";import"./Dialog-CKmITsZc.js";const{expect:r,fn:$,userEvent:p,waitFor:d}=__STORYBOOK_MODULE_TEST__,ee=()=>c.jsx("div",{style:{width:"100%",height:"200px",background:"linear-gradient(to bottom, color-mix(in srgb, #e0e0e0, transparent), #e0e0e0)"}}),te=(e,t)=>{const[o,n]=Q.useState(t.args.open),a=()=>{var i,T;n(!1),(T=(i=t.args).onClose)==null||T.call(i)};return c.jsxs(c.Fragment,{children:[c.jsx(Z,{dataset:{testid:"trigger"},onClick:()=>n(!0),children:"Open"}),c.jsx(e,{args:{...t.args,open:o,onClose:a}})]})},s={title:"Components/Dialog/Tests",component:X,parameters:{preventIframeFromScrollingParent:!0,docs:{story:{inline:!1,height:600}}},decorators:[te],args:{open:!1,onClose:$(),children:c.jsx(ee,{}),dataset:{testid:"dialog"}},play:async({canvas:e,step:t})=>{await t("Open dialog",async()=>{const o=e.getByTestId("trigger");return await p.click(o),d(()=>{r(e.getByTestId("dialog")).toBeVisible()})})}},g={tags:["!autodocs"],args:{size:"xs",title:"Extra Small Dialog"}},u={tags:["!autodocs"],args:{size:"sm",title:"Small Dialog"}},m={tags:["!autodocs"],args:{size:"md",title:"Medium Dialog"}},y={tags:["!autodocs"],args:{size:"lg",title:"Large Dialog"}},l={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 a;await((a=s.play)==null?void 0:a.call(s,e));const{canvas:t,step:o,args:n}=e;await o("Close dialog by clicking overlay",async()=>{const i=t.getByTestId("dialog-overlay");return await p.click(i),d(async()=>(await r(t.queryByTestId("dialog")).not.toBeInTheDocument(),r(n.onClose).toHaveBeenCalledOnce()))})}},C={tags:["!autodocs"],args:{title:"Test Close Focus"},play:async e=>{var a;await((a=s.play)==null?void 0:a.call(s,e));const{canvas:t,step:o,args:n}=e;await o("Close dialog by pressing space",async()=>(await p.keyboard("{Enter}"),d(async()=>(await r(t.queryByTestId("dialog")).not.toBeInTheDocument(),r(n.onClose).toHaveBeenCalledOnce()))))}},v={tags:["!autodocs"],args:{title:"Test Close Keyboard"},play:async e=>{var a;await((a=s.play)==null?void 0:a.call(s,e));const{canvas:t,step:o,args:n}=e;await o("Close dialog using escape key",async()=>(await p.keyboard("{Escape}"),d(()=>{r(t.queryByTestId("dialog")).not.toBeInTheDocument(),r(n.onClose).toHaveBeenCalledOnce()})))}},B={tags:["!autodocs"],args:{title:"Test Close Button"},play:async e=>{var a;await((a=s.play)==null?void 0:a.call(s,e));const{canvas:t,step:o,args:n}=e;await o("Close dialog using close button",async()=>{const i=await t.findByLabelText("Close");return await p.click(i),d(async()=>(await r(t.queryByTestId("dialog")).not.toBeInTheDocument(),r(n.onClose).toHaveBeenCalledOnce()))})}};var x,h,D;g.parameters={...g.parameters,docs:{...(x=g.parameters)==null?void 0:x.docs,source:{originalSource:`{
+import{j as c,r as Q}from"./iframe-CpMEswOF.js";import{D as X}from"./index-9rU-ZrVj.js";import{B as Z}from"./Button-KCBOR544.js";import"./preload-helper-Dp1pzeXC.js";import"./Steps-GOg1wsKY.js";import"./index-DT-MbRPK.js";import"./Heading-Bie8QWaf.js";import"./text-accent-DZ_ihUdH.js";import"./text-centered-DiwR-QSx.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./componentNames-hc9KR2nX.js";import"./ProgressSteps-Dq6mpMpu.js";import"./Text-cq49jjad.js";import"./message-CTdBLxyt.js";import"./DialogTitle-DJPc1ITB.js";import"./TokyoUIClose-C1pVTvLz.js";import"./IconButton-DVKNd7ZK.js";import"./render-icon-c7okze1K.js";import"./ButtonBase-D1x6yeKi.js";import"./Spinner-lj2QA4al.js";import"./useMergeRefs-DkQLsYW4.js";import"./useHostname-BVhrcDgi.js";import"./index-CC6DAVyL.js";import"./shared-strings-BChji30Y.js";import"./useOpenInteractionType-BBP_TXgz.js";import"./DialogActions-DTUDyqFX.js";import"./Dialog-Bmg2gpCM.js";const{expect:r,fn:$,userEvent:p,waitFor:d}=__STORYBOOK_MODULE_TEST__,ee=()=>c.jsx("div",{style:{width:"100%",height:"200px",background:"linear-gradient(to bottom, color-mix(in srgb, #e0e0e0, transparent), #e0e0e0)"}}),te=(e,t)=>{const[o,n]=Q.useState(t.args.open),s=()=>{var i,T;n(!1),(T=(i=t.args).onClose)==null||T.call(i)};return c.jsxs(c.Fragment,{children:[c.jsx(Z,{dataset:{testid:"trigger"},onClick:()=>n(!0),children:"Open"}),c.jsx(e,{args:{...t.args,open:o,onClose:s}})]})},a={title:"Components/Dialog/Tests",component:X,parameters:{preventIframeFromScrollingParent:!0,docs:{story:{inline:!1,height:600}}},decorators:[te],args:{open:!1,onClose:$(),children:c.jsx(ee,{}),dataset:{testid:"dialog"}},play:async({canvas:e,step:t})=>{await t("Open dialog",async()=>{const o=e.getByTestId("trigger");return await p.click(o),d(()=>{r(e.getByTestId("dialog")).toBeVisible()})})}},g={tags:["!autodocs"],args:{size:"xs",title:"Extra Small Dialog"}},u={tags:["!autodocs"],args:{size:"sm",title:"Small Dialog"}},m={tags:["!autodocs"],args:{size:"md",title:"Medium Dialog"}},y={tags:["!autodocs"],args:{size:"lg",title:"Large Dialog"}},l={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 i=t.getByTestId("dialog-overlay");return await p.click(i),d(async()=>(await r(t.queryByTestId("dialog")).not.toBeInTheDocument(),r(n.onClose).toHaveBeenCalledOnce()))})}},C={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 p.keyboard("{Enter}"),d(async()=>(await r(t.queryByTestId("dialog")).not.toBeInTheDocument(),r(n.onClose).toHaveBeenCalledOnce()))))}},v={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 p.keyboard("{Escape}"),d(()=>{r(t.queryByTestId("dialog")).not.toBeInTheDocument(),r(n.onClose).toHaveBeenCalledOnce()})))}},B={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 i=await t.findByLabelText("Close");return await p.click(i),d(async()=>(await r(t.queryByTestId("dialog")).not.toBeInTheDocument(),r(n.onClose).toHaveBeenCalledOnce()))})}};var x,h,D;g.parameters={...g.parameters,docs:{...(x=g.parameters)==null?void 0:x.docs,source:{originalSource:`{
   tags: ['!autodocs'],
   args: {
     size: 'xs',
@@ -38,8 +38,8 @@ Use an object with breakpoints as keys to specify different sizes at different v
 \`\`\`tsx
 <Dialog
   size={{
-    _: 'xs',
-    'medium-l': 'lg'
+    _: 'lg',
+    'wide-s': 'xs',
   }}
 />
 \`\`\``,...(L=(H=l.parameters)==null?void 0:H.docs)==null?void 0:L.description}}};var R,K,M;w.parameters={...w.parameters,docs:{...(R=w.parameters)==null?void 0:R.docs,source:{originalSource:`{
@@ -124,4 +124,4 @@ Use an object with breakpoints as keys to specify different sizes at different v
       });
     });
   }
-}`,...(N=(J=B.parameters)==null?void 0:J.docs)==null?void 0:N.source}}};const Ee=["ExtraSmall","Small","Medium","Large","WidthResponsiveness","TestCloseOverlay","TestCloseFocus","TestCloseKeyboard","TestCloseButton"];export{g as ExtraSmall,y as Large,m as Medium,u as Small,B as TestCloseButton,C as TestCloseFocus,v as TestCloseKeyboard,w as TestCloseOverlay,l as WidthResponsiveness,Ee as __namedExportsOrder,s as default};
+}`,...(N=(J=B.parameters)==null?void 0:J.docs)==null?void 0:N.source}}};const Ee=["ExtraSmall","Small","Medium","Large","WidthResponsiveness","TestCloseOverlay","TestCloseFocus","TestCloseKeyboard","TestCloseButton"];export{g as ExtraSmall,y as Large,m as Medium,u as Small,B as TestCloseButton,C as TestCloseFocus,v as TestCloseKeyboard,w as TestCloseOverlay,l as WidthResponsiveness,Ee as __namedExportsOrder,a as default};