@preply/ds-docs 11.0.0 → 11.1.0

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

@@ -1,213 +0,0 @@
-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 <>
-                <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 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-D4tyIGD0.js

@@ -1,329 +0,0 @@
-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
- primaryButton={<Button size="medium" variant="primary" onClick={() => {}}>Finish</Button>}
-/>`,name:"primaryButton",required:!0,type:{name:"enum",value:[{value:"undefined"},{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},nextButton:{defaultValue:{value:"<DialogStepsNext />"},description:`Next step button.
-
-This button will be used on all steps except the last one. When not provided, a default button will be used.
-@example <DialogStepsActions
- nextButton={<DialogStepsNext onClick={() => {}}>Next</DialogStepsNext>}
-/>`,name:"nextButton",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},previousButton:{defaultValue:{value:"<DialogStepsPrevious />"},description:`Previous step button.
-
-This button will be used on all steps except the first one. When not provided, a default button will be used.
-@example <DialogStepsActions
- previousButton={<DialogStepsPrevious onClick={() => {}}>Previous</DialogStepsPrevious>}
-/>`,name:"previousButton",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}}}}}catch{}try{_.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\`
-components, or by calling \`goToPreviousStep\`, \`goToNextStep\`, or
-\`goToStep\` from the \`StepsContext\`.
-
-Can be used to:
-- Skip/redirect steps conditionally
-- Perform async process (e.g. validation) on step changes, marking the
-  element as busy/loading
-@param currentStep The current step (1-based)
-@param nextStep The next, incoming step
-@returns Promise that resolves to:
-- \`undefined\`: proceed with default navigation
-- \`number\`: override the destination step
-@example Add async validation
-const handleStepChange = async (current, next) => {
-await validateStep(current);
-return next;
-};
-@example Skip a step
-const handleStepChange = async (current, next) => {
-if (next === 2) return 3; // Skip step 2
-return next;
-};`,name:"onStepChange",required:!1,type:{name:"enum",value:[{value:"(currentStep: number, nextStep: number) => number | Promise<number | undefined> | undefined"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}}}}}catch{}try{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"}]}},a11yLabel:{defaultValue:null,description:"@deprecated Use `assistiveText` instead",name:"a11yLabel",required:!1,type:{name:"enum",value:[{value:"string"}]}},leadingSvgIcon:{defaultValue:null,description:`The leading SVG icon.
-@example import TokyoUITag from '@preply/ds-media-icons/dist/24/TokyoUITag.svg';
-
-<Button leadingSvgIcon={TokyoUITag}>Button</Button>
-or
-<Button leadingSvgIcon={<TokyoUITag />}>Button</Button>`,name:"leadingSvgIcon",required:!1,type:{name:"enum",value:[{value:"ComponentClass<SVGAttributes<SVGElement>, any>"},{value:"FunctionComponent<SVGAttributes<SVGElement>>"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"}]}},trailingSvgIcon:{defaultValue:null,description:`The trailing SVG icon.
-@example import TokyoUITag from '@preply/ds-media-icons/dist/24/TokyoUITag.svg';
-
-<Button trailingSvgIcon={TokyoUITag}>Button</Button>
-or
-<Button trailingSvgIcon={<TokyoUITag />}>Button</Button>`,name:"trailingSvgIcon",required:!1,type:{name:"enum",value:[{value:"ComponentClass<SVGAttributes<SVGElement>, any>"},{value:"FunctionComponent<SVGAttributes<SVGElement>>"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: HTMLAnchorElement | HTMLButtonElement | null) => void"},{value:"RefObject<HTMLAnchorElement | HTMLButtonElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}try{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"}]}},a11yLabel:{defaultValue:null,description:"@deprecated Use `assistiveText` instead",name:"a11yLabel",required:!1,type:{name:"enum",value:[{value:"string"}]}},leadingSvgIcon:{defaultValue:null,description:`The leading SVG icon.
-@example import TokyoUITag from '@preply/ds-media-icons/dist/24/TokyoUITag.svg';
-
-<Button leadingSvgIcon={TokyoUITag}>Button</Button>
-or
-<Button leadingSvgIcon={<TokyoUITag />}>Button</Button>`,name:"leadingSvgIcon",required:!1,type:{name:"enum",value:[{value:"ComponentClass<SVGAttributes<SVGElement>, any>"},{value:"FunctionComponent<SVGAttributes<SVGElement>>"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"}]}},trailingSvgIcon:{defaultValue:null,description:`The trailing SVG icon.
-@example import TokyoUITag from '@preply/ds-media-icons/dist/24/TokyoUITag.svg';
-
-<Button trailingSvgIcon={TokyoUITag}>Button</Button>
-or
-<Button trailingSvgIcon={<TokyoUITag />}>Button</Button>`,name:"trailingSvgIcon",required:!1,type:{name:"enum",value:[{value:"ComponentClass<SVGAttributes<SVGElement>, any>"},{value:"FunctionComponent<SVGAttributes<SVGElement>>"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: HTMLAnchorElement | HTMLButtonElement | null) => void"},{value:"RefObject<HTMLAnchorElement | HTMLButtonElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}const{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: <>
-                <DummyContent />
-                <DialogActions 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>} />
-            </>
-  }
-}`,...(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',
-    children: <>
-                <DynamicChildren />
-                <DialogActions 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>} />
-            </>
-  }
-}`,...(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.\`,
-    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>
-                <DialogActions 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=(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: {
-        'narrow-l': {
-          viewport: 'narrow-l'
-        },
-        'medium-s': {
-          viewport: 'medium-s'
-        },
-        'medium-l': {
-          viewport: 'medium-l'
-        }
-      }
-    }
-  },
-  args: {
-    title: 'Mobile Full Height',
-    mobileFullHeight: true
-  }
-}`,...(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.',
-    children: <>
-                <DummyContent />
-                <DialogActions primaryButton={<Button size="medium" variant="primary" onClick={action('Primary button clicked')}>
-                            Primary
-                        </Button>} />
-            </>
-  }
-}`,...(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.',
-    children: <>
-                <DummyContent />
-                <DialogActions 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>} />
-            </>
-  }
-}`,...(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\`
-  }}>
-            <DialogCloseButton />
-
-            <>
-                <DialogSteps aria-label="Onboarding Steps">
-                    <DialogStep title="Profile" description="Tell us more about yourself">
-                        <DummyContent />
-                    </DialogStep>
-                    <DialogStep title="Subject" description="What do you want to learn?">
-                        <DummyContent />
-                    </DialogStep>
-                    <DialogStep title="Availability" description="When are you available?">
-                        <DummyContent />
-                    </DialogStep>
-                    <DialogStepsActions primaryButton={<Button size="medium" variant="primary" onClick={action('Primary button clicked')}>
-                                Primary
-                            </Button>} />
-                </DialogSteps>
-            </>
-        </DialogRoot>;
-}`,...(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'
-  }
-}`,...(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'
-  }
-}`,...(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');
-    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>;
-}`,...(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
-
-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.`,...(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 />
-  },
-  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();
-    });
-  }
-}`,...(_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: {
-        '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();
-      });
-    });
-  }
-}`,...(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.`,...(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};