@preply/ds-docs 10.0.0 → 11.1.0

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

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

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