@okta/odyssey-react-mui 1.52.0 → 1.53.0

package/dist/assets/TextField.stories-julPXfI1.js

@@ -0,0 +1,177 @@
+import{j as a}from"./iframe-CQjT1fxh.js";import{O as Me}from"./OdysseyStorybookThemeDecorator-CHlNoX17.js";import{u as we}from"./useStoryArgOrLocalState-CRQAGSTX.js";import{f as r}from"./fieldComponentPropsMetaData-C9gCwuus.js";import{t as I,M as s}from"./TextField-DF5R_omM.js";import{P as e}from"./tableRowClasses-Bk1uFtwh.js";import{M as Se}from"./AddCircle-zDqHIKbQ.js";import{M as Le}from"./Call-CZmd0zlk.js";import{M as Ie}from"./Link-Cg_KakDo.js";import{M as Oe}from"./Stack-jxMWaEAU.js";import{I as ke}from"./InputAdornment-Clfg5IS6.js";import"./preload-helper-Dp1pzeXC.js";import"./OdysseyThemeProvider-BA0_xP7N.js";import"./WarningFilled-DOHs-JmZ.js";import"./index-C77ZwfYm.js";import"./OdysseyProvider-rboSNY26.js";import"./ScopedCssBaseline-BOa6kM98.js";import"./Field-CqIOaZfg.js";import"./Box-B3rdnavX.js";import"./Box-CnVllI1S.js";import"./List-D0N4Xybp.js";import"./ListItem-BNz1zv6N.js";import"./FormHelperText-CVc1kPQJ.js";import"./FormLabel-CWWbs_c2.js";import"./useIsFocusVisible-D1xCTBdT.js";import"./isHostComponent-DVu5iVWx.js";import"./ButtonBase-Rz8p08Xo.js";import"./TransitionGroupContext-yBqGXZYI.js";import"./ScreenReaderText-toqV93JE.js";import"./visuallyHidden-Dan1xhjv.js";import"./FieldHint-Cs73lQge.js";import"./Typography-CjpHjc10.js";import"./Typography-Jr4Brrb5.js";import"./useUniqueId-DG6rB8dI.js";import"./createUniqueId-BHjR7HQF.js";import"./inputUtils-BBH9ADKa.js";import"./InputBase-BYnzr12H.js";import"./ownerWindow-HkKU3E4x.js";import"./ownerDocument-DW-IO8s5.js";import"./debounce-Be36O1Ab.js";import"./Link-thynTosX.js";import"./ExternalLink-3_gWbh_U.js";import"./Stack-Duw-TXBf.js";import"./createStyled-BKWdp2xc.js";import"./useThemeProps-BCUqwy59.js";const{useCallback:Ce}=__STORYBOOK_MODULE_PREVIEW_API__,{fn:S,userEvent:p,within:Ve}=__STORYBOOK_MODULE_TEST__,wt={component:s,decorators:[Me],tags:["autodocs"],argTypes:{autoCompleteType:{control:"text",description:"The native HTML [autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) attribute for enabling browser autofill (e.g., `email`, `username`, `current-password`)",table:{category:"Functional",type:{summary:"string"}}},defaultValue:{control:"text",description:"If `value` is undefined, the field is uncontrolled and `defaultValue` provides its initial text",table:{category:"Functional",type:{summary:"string"},defaultValue:{summary:void 0}}},endAdornment:{control:{type:"select"},options:["None","String","Icon"],mapping:{None:void 0,String:"%",Icon:a.jsx(Le,{})},description:"Content displayed at the end of the input. Use string for units and symbols, or an Odyssey icon for actions",table:{category:"Visual",type:{summary:"string | ReactElement<typeof Icon>"}}},errorMessage:r.errorMessage,errorMessageList:r.errorMessageList,hasInitialFocus:{control:!1,description:"If `true`, the component will receive focus automatically",table:{category:"Functional",type:{summary:"boolean"}}},hint:r.hint,HintLinkComponent:r.HintLinkComponent,id:r.id,isDisabled:r.isDisabled,isFullWidth:r.isFullWidth,isMultiline:{control:"boolean",description:"If `true`, a `textarea` element is rendered",table:{category:"Visual",type:{summary:"boolean"},defaultValue:{summary:"false"}}},isOptional:r.isOptional,isReadOnly:r.isReadOnly,label:{control:"text",description:"The label for the `input` element",table:{category:"Visual",type:{summary:"string"}},type:{required:!0,name:"string"}},name:r.name,onBlur:{description:"Callback fired after the input loses focus; useful for validation or analytics hooks",table:{category:"Functional",type:{summary:"func"}}},onChange:{description:"Callback fired whenever the value changes; required when controlling the component via `value`",table:{category:"Functional",type:{summary:"func"}}},onFocus:{description:"Callback fired when the input gains focus; helpful for analytics or guided workflows",table:{category:"Functional",type:{summary:"func"}}},placeholder:{control:"text",description:"The short hint displayed in the `input` before the user enters a value",table:{category:"Visual",type:{summary:"string"}}},startAdornment:{control:{type:"select"},options:["None","String","Icon"],mapping:{None:void 0,String:"$",Icon:a.jsx(Se,{})},description:"Content displayed at the start of the input. Use string for units or symbols, or an Odyssey icon for actions",table:{category:"Visual",type:{summary:"string | ReactElement<typeof Icon>"}}},type:{options:I,control:{type:"radio"},description:"Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types)",table:{category:"Functional",type:{summary:I.join(" | ")},defaultValue:{summary:"text"}}},value:{control:"text",description:"If `value` is provided, you control the input externally and must handle updates with `onChange`",table:{category:"Functional",type:{summary:"string"}}}},args:{endAdornment:"None",label:"Label",onBlur:S(),onChange:S(),onFocus:S(),startAdornment:"None",value:""}},t={args:{value:""},argTypes:{defaultValue:{control:!1}},render:function(o,i){const{defaultValue:l,...ve}=o,{value:Te,setValue:L}=we({args:o,context:i,argKey:"value",defaultValue:o.value??""}),xe=Ce(Fe=>{L(Fe.target.value)},[L]);return a.jsx(s,{...ve,onChange:xe,value:Te})}},Ae=async({canvasElement:n,step:o})=>{await o("Textfield callback",async()=>{const l=await Ve(n).findByRole("textbox");await p.click(l),await p.type(l,"v"),await p.clear(l),await p.tab()})},d={...e(t,{play:Ae,tags:["!autodocs"]})},c={...e(t,{parameters:{docs:{description:{story:"The values of disabled inputs will not be submitted."}}},args:{isDisabled:!0,value:"Value"}})},u={...e(t,{args:{isOptional:!0,value:""}})},m={...e(t,{parameters:{docs:{description:{story:"The values of readonly inputs will be submitted."}}},args:{isReadOnly:!0,value:"Value"}})},g={...e(t,{args:{errorMessage:"Error Message",value:""}})},y={...e(t,{args:{errorMessage:"Error Message",errorMessageList:["Error A"],value:""}})},h={...e(t,{args:{isFullWidth:!0}})},f={...e(t,{args:{hint:"Hint text",value:""}})},b={...e(t,{args:{hint:"Hint text",HintLinkComponent:a.jsx(Ie,{href:"#link",children:"Link"}),value:""}})},v={...e(t,{parameters:{docs:{description:{story:"TextField supports both `string` and `<Icon />` adornments."}}},args:{label:"Label",endAdornment:"String",startAdornment:"Icon",value:""}})},T={...e(t,{parameters:{docs:{description:{story:"As the user types, the field will grow vertically to accommodate the new lines."}}},args:{autoCompleteType:"shipping street-address",label:"Label",isMultiline:!0,value:""}}),name:"Multiline (Textarea)"},x={parameters:{docs:{description:{story:"This `TextField` will receive focus when the page loads"}}},args:{hasInitialFocus:!0,label:"Label",value:""},render:n=>a.jsxs(Oe,{spacing:2,children:[a.jsx(s,{label:"Not Focused"}),a.jsx(s,{...n})]})},F={...e(t,{args:{placeholder:"Placeholder text"}})},M={...e(t,{parameters:{docs:{description:{story:"TextFields of type `tel` are not automatically validated because global formats are so varied."}}},args:{autoCompleteType:"mobile tel",label:"Phone number",startAdornment:a.jsx(ke,{position:"start",children:"+1"}),type:"tel",value:""}})},w={parameters:{docs:{description:{story:"When `value` is omitted the field manages its own state via `defaultValue`."}}},args:{defaultValue:"Initial state",value:void 0},argTypes:{value:{control:!1}},render:n=>{const{value:o,...i}=n;return a.jsx(s,{...i})}};var O,k,C;d.parameters={...d.parameters,docs:{...(O=d.parameters)==null?void 0:O.docs,source:{originalSource:`{
+  ...deepmerge(TextFieldTemplate, {
+    play: textFieldPlay,
+    tags: ["!autodocs"]
+  })
+}`,...(C=(k=d.parameters)==null?void 0:k.docs)==null?void 0:C.source}}};var V,A,E;c.parameters={...c.parameters,docs:{...(V=c.parameters)==null?void 0:V.docs,source:{originalSource:`{
+  ...deepmerge(TextFieldTemplate, {
+    parameters: {
+      docs: {
+        description: {
+          story: "The values of disabled inputs will not be submitted."
+        }
+      }
+    },
+    args: {
+      isDisabled: true,
+      value: "Value"
+    }
+  })
+}`,...(E=(A=c.parameters)==null?void 0:A.docs)==null?void 0:E.source}}};var _,H,R;u.parameters={...u.parameters,docs:{...(_=u.parameters)==null?void 0:_.docs,source:{originalSource:`{
+  ...deepmerge(TextFieldTemplate, {
+    args: {
+      isOptional: true,
+      value: ""
+    }
+  })
+}`,...(R=(H=u.parameters)==null?void 0:H.docs)==null?void 0:R.source}}};var j,D,P;m.parameters={...m.parameters,docs:{...(j=m.parameters)==null?void 0:j.docs,source:{originalSource:`{
+  ...deepmerge(TextFieldTemplate, {
+    parameters: {
+      docs: {
+        description: {
+          story: "The values of readonly inputs will be submitted."
+        }
+      }
+    },
+    args: {
+      isReadOnly: true,
+      value: "Value"
+    }
+  })
+}`,...(P=(D=m.parameters)==null?void 0:D.docs)==null?void 0:P.source}}};var W,N,U;g.parameters={...g.parameters,docs:{...(W=g.parameters)==null?void 0:W.docs,source:{originalSource:`{
+  ...deepmerge(TextFieldTemplate, {
+    args: {
+      errorMessage: "Error Message",
+      value: ""
+    }
+  })
+}`,...(U=(N=g.parameters)==null?void 0:N.docs)==null?void 0:U.source}}};var z,B,K;y.parameters={...y.parameters,docs:{...(z=y.parameters)==null?void 0:z.docs,source:{originalSource:`{
+  ...deepmerge(TextFieldTemplate, {
+    args: {
+      errorMessage: "Error Message",
+      errorMessageList: ["Error A"],
+      value: ""
+    }
+  })
+}`,...(K=(B=y.parameters)==null?void 0:B.docs)==null?void 0:K.source}}};var q,Y,$;h.parameters={...h.parameters,docs:{...(q=h.parameters)==null?void 0:q.docs,source:{originalSource:`{
+  ...deepmerge(TextFieldTemplate, {
+    args: {
+      isFullWidth: true
+    }
+  })
+}`,...($=(Y=h.parameters)==null?void 0:Y.docs)==null?void 0:$.source}}};var G,J,Q;f.parameters={...f.parameters,docs:{...(G=f.parameters)==null?void 0:G.docs,source:{originalSource:`{
+  ...deepmerge(TextFieldTemplate, {
+    args: {
+      hint: "Hint text",
+      value: ""
+    }
+  })
+}`,...(Q=(J=f.parameters)==null?void 0:J.docs)==null?void 0:Q.source}}};var X,Z,ee;b.parameters={...b.parameters,docs:{...(X=b.parameters)==null?void 0:X.docs,source:{originalSource:`{
+  ...deepmerge(TextFieldTemplate, {
+    args: {
+      hint: "Hint text",
+      HintLinkComponent: <Link href="#link">Link</Link>,
+      value: ""
+    }
+  })
+}`,...(ee=(Z=b.parameters)==null?void 0:Z.docs)==null?void 0:ee.source}}};var te,re,ae;v.parameters={...v.parameters,docs:{...(te=v.parameters)==null?void 0:te.docs,source:{originalSource:`{
+  ...deepmerge(TextFieldTemplate, {
+    parameters: {
+      docs: {
+        description: {
+          story: "TextField supports both \`string\` and \`<Icon />\` adornments."
+        }
+      }
+    },
+    args: {
+      label: "Label",
+      endAdornment: "String",
+      startAdornment: "Icon",
+      value: ""
+    }
+  })
+}`,...(ae=(re=v.parameters)==null?void 0:re.docs)==null?void 0:ae.source}}};var ne,oe,se;T.parameters={...T.parameters,docs:{...(ne=T.parameters)==null?void 0:ne.docs,source:{originalSource:`{
+  ...deepmerge(TextFieldTemplate, {
+    parameters: {
+      docs: {
+        description: {
+          story: "As the user types, the field will grow vertically to accommodate the new lines."
+        }
+      }
+    },
+    args: {
+      autoCompleteType: "shipping street-address",
+      label: "Label",
+      isMultiline: true,
+      value: ""
+    }
+  }),
+  name: "Multiline (Textarea)"
+}`,...(se=(oe=T.parameters)==null?void 0:oe.docs)==null?void 0:se.source}}};var ie,le,pe;x.parameters={...x.parameters,docs:{...(ie=x.parameters)==null?void 0:ie.docs,source:{originalSource:`{
+  parameters: {
+    docs: {
+      description: {
+        story: "This \`TextField\` will receive focus when the page loads"
+      }
+    }
+  },
+  args: {
+    hasInitialFocus: true,
+    label: "Label",
+    value: ""
+  },
+  render: args => {
+    return <Stack spacing={2}>
+        <TextField label="Not Focused" />
+        <TextField {...args} />
+      </Stack>;
+  }
+}`,...(pe=(le=x.parameters)==null?void 0:le.docs)==null?void 0:pe.source}}};var de,ce,ue;F.parameters={...F.parameters,docs:{...(de=F.parameters)==null?void 0:de.docs,source:{originalSource:`{
+  ...deepmerge(TextFieldTemplate, {
+    args: {
+      placeholder: "Placeholder text"
+    }
+  })
+}`,...(ue=(ce=F.parameters)==null?void 0:ce.docs)==null?void 0:ue.source}}};var me,ge,ye;M.parameters={...M.parameters,docs:{...(me=M.parameters)==null?void 0:me.docs,source:{originalSource:`{
+  ...deepmerge(TextFieldTemplate, {
+    parameters: {
+      docs: {
+        description: {
+          story: "TextFields of type \`tel\` are not automatically validated because global formats are so varied."
+        }
+      }
+    },
+    args: {
+      autoCompleteType: "mobile tel",
+      label: "Phone number",
+      startAdornment: <InputAdornment position="start">+1</InputAdornment>,
+      type: "tel",
+      value: ""
+    }
+  })
+}`,...(ye=(ge=M.parameters)==null?void 0:ge.docs)==null?void 0:ye.source}}};var he,fe,be;w.parameters={...w.parameters,docs:{...(he=w.parameters)==null?void 0:he.docs,source:{originalSource:`{
+  parameters: {
+    docs: {
+      description: {
+        story: "When \`value\` is omitted the field manages its own state via \`defaultValue\`."
+      }
+    }
+  },
+  args: {
+    defaultValue: "Initial state",
+    value: undefined
+  },
+  argTypes: {
+    value: {
+      control: false
+    }
+  },
+  render: props => {
+    const {
+      value,
+      ...rest
+    } = props;
+    void value;
+    return <TextField {...rest} />;
+  }
+}`,...(be=(fe=w.parameters)==null?void 0:fe.docs)==null?void 0:be.source}}};const St=["Default","Disabled","Optional","ReadOnly","Error","ErrorsList","FullWidth","Hint","HintLink","Adornments","Multiline","Focused","Placeholder","Tel","Uncontrolled"];export{v as Adornments,d as Default,c as Disabled,g as Error,y as ErrorsList,x as Focused,h as FullWidth,f as Hint,b as HintLink,T as Multiline,u as Optional,F as Placeholder,m as ReadOnly,M as Tel,w as Uncontrolled,St as __namedExportsOrder,wt as default};

package/dist/assets/Toast.stories-BuX-cdk6.js

@@ -0,0 +1,164 @@
+import{r as p,j as e}from"./iframe-CQjT1fxh.js";import{a as Z}from"./axeRun-w5CBCc9V.js";import{O as st}from"./OdysseyStorybookThemeDecorator-CHlNoX17.js";import{u as at}from"./useStoryArgOrLocalState-CRQAGSTX.js";import{M as E}from"./Button-0PI4ljbj.js";import{a as nt}from"./OdysseyThemeProvider-BA0_xP7N.js";import{M as ot}from"./Link-Cg_KakDo.js";import{M as it}from"./ScreenReaderText-toqV93JE.js";import{S as P}from"./Snackbar-C2LtiN82.js";import{A as rt,a as lt}from"./AlertTitle-UQV7DT5q.js";import{d as ct}from"./WarningFilled-DOHs-JmZ.js";import{B as mt}from"./Box-CnVllI1S.js";import{c as S}from"./createUniqueId-BHjR7HQF.js";import"./preload-helper-Dp1pzeXC.js";import"./axe-9-4xvXvL.js";import"./index-C77ZwfYm.js";import"./OdysseyProvider-rboSNY26.js";import"./ScopedCssBaseline-BOa6kM98.js";import"./tableRowClasses-Bk1uFtwh.js";import"./BaseButton-C9tiChQu.js";import"./MuiPropsContext-D6i6qZME.js";import"./Tooltip-B-PXZNTK.js";import"./Tooltip-yxN-KFjL.js";import"./Grow-DvH-Xu1P.js";import"./utils-D-QCjykO.js";import"./TransitionGroupContext-yBqGXZYI.js";import"./index-5Qx3hCfP.js";import"./useIsFocusVisible-D1xCTBdT.js";import"./Portal-DeJFqeW-.js";import"./resolveComponentProps-DGxe9oED.js";import"./isHostComponent-DVu5iVWx.js";import"./useControlled-BUhC7uWK.js";import"./Popper-CISS1LuJ.js";import"./ownerDocument-DW-IO8s5.js";import"./Button-Dug4qNr3.js";import"./ButtonBase-Rz8p08Xo.js";import"./Link-thynTosX.js";import"./Typography-Jr4Brrb5.js";import"./ExternalLink-3_gWbh_U.js";import"./visuallyHidden-Dan1xhjv.js";import"./Paper-vUVrw-QB.js";import"./useSlot-BMAKysxJ.js";import"./createSvgIcon-CaWcxZng.js";import"./Close-CELHOmN_.js";import"./IconButton-BPR_sq0F.js";const j=["status","alert"],A=["success","info","warning","error"],ut={onClickAway:()=>!1},pt=({autoHideDuration:a=6e3,isDismissable:o,linkText:i,linkUrl:n,isVisible:t,onHide:r,role:s,severity:m,testId:u,text:tt,translate:k})=>{const{t:I}=nt(),[et,O]=p.useState(t);p.useEffect(()=>{O(t)},[t]);const B=p.useCallback(()=>{O(!1),r==null||r()},[r]);return e.jsx(e.Fragment,{children:e.jsx(P,{autoHideDuration:o||a<=0?void 0:a,className:"Toast",ClickAwayListenerProps:ut,onClose:B,open:et,children:e.jsxs(rt,{action:o===!0&&e.jsx(E,{ariaLabel:I("close.text"),onClick:B,size:"small",startIcon:e.jsx(ct,{}),variant:"floating"}),"data-se":u,role:s,severity:m,variant:"toast",children:[e.jsxs(lt,{translate:k,children:[e.jsxs(it,{translate:k,children:[I(`severity.${m}`),":"]}),tt]}),n&&e.jsx(ot,{href:n,translate:k,variant:"monochrome",children:i})]})})})},v=p.memo(pt);v.displayName="Toast";const dt=({children:a})=>e.jsx(P,{open:!0,children:e.jsx(mt,{sx:{display:"flex",flexDirection:"column-reverse",gap:2},children:a})}),V=p.memo(dt);V.displayName="ToastStack";const{useCallback:x,useState:yt}=__STORYBOOK_MODULE_PREVIEW_API__,{expect:C,userEvent:l,waitFor:c,within:D}=__STORYBOOK_MODULE_TEST__,ie={component:v,decorators:[st],tags:["autodocs"],argTypes:{autoHideDuration:{control:"number",description:"If set, this determines how long the toast should appear before automatically disappearing in milliseconds. It will only take effect if the toast is not dismissible. If left blank, it defaults to 6000",table:{category:"Functional",type:{summary:"number"},defaultValue:{summary:"6000"}}},isDismissable:{control:"boolean",description:"If `true`, the alert will include a close button",table:{category:"Visual",type:{summary:"boolean"},defaultValue:{summary:"false"}}},isVisible:{control:{type:"boolean"},description:"If true, the Toast is visible",table:{category:"Functional",type:{summary:"boolean"}}},linkText:{control:"text",description:"If linkUrl is defined, this is the text of the link. If left blank, it defaults to 'Learn more'. Note that linkText does nothing if linkUrl is not defined",table:{category:"Visual",type:{summary:"string"}}},linkUrl:{control:"text",description:"If defined, the alert will include a link to the URL",table:{category:"Functional",type:{summary:"string"}}},onHide:{control:!1,description:"An optional function to run when the Toast is closed",table:{category:"Functional",type:{summary:"func"}}},role:{options:j,control:{type:"radio"},description:"Sets the ARIA role of the alert ('status' for something that dynamically updates, 'alert' for errors, null for something unchanging)",table:{category:"Functional",type:{summary:j.join(" | ")}}},severity:{options:A,control:{type:"radio"},description:"Determine the color and icon of the alert",table:{category:"Visual",type:{summary:A.join(" | ")}},type:{required:!0,name:"other",value:"radio"}},text:{control:"text",description:"The text content of the alert",table:{category:"Visual",type:{summary:"string"}},type:{required:!0,name:"string"}}},args:{isVisible:!1,severity:"info",role:"status",linkText:"Info",text:"The mission to Sagittarius A is set for January 7.",autoHideDuration:1e4}},w=a=>({args:o,canvasElement:i,step:n})=>n(`open ${a}`,async()=>{await c(async()=>{const t=D(i).getByText(`Open ${o.severity} toast`);await l.hover(t),await l.click(t),await l.tab()}),await c(()=>Z(a))}),d={args:{isVisible:!1,role:"status"},render:function(o,i){const{value:n,setValue:t}=at({args:o,context:i,argKey:"isVisible",defaultValue:o.isVisible,defaultStoryName:"Info"}),r=x(()=>{t(!0)},[t]),s=x(()=>{t(!1)},[t]);return e.jsxs(e.Fragment,{children:[e.jsx(E,{label:`Open ${o.severity} toast`,onClick:r,variant:"primary"}),e.jsx(V,{children:e.jsx(v,{...o,isVisible:n,onHide:s})})]})}},y={...d,args:{text:"The mission to Sagittarius A is set for January 7.",severity:"info"},play:w("Info Toast"),tags:["!autodocs"]},f={...d,name:"Error",args:{text:"Security breach in Hangar 18",role:"alert",severity:"error"},play:w("Error Toast")},g={...d,args:{text:"Severe solar winds may delay local system flights",role:"status",severity:"warning"},play:w("Warning Toast")},T={...d,args:{text:"Docking completed",role:"status",severity:"success"},play:w("Success Toast")},b={...d,args:{isDismissable:!0,linkText:"View report",linkUrl:"#"},play:async({args:a,canvasElement:o,step:i})=>{const n=D(o);await i("open Dismissible Toast}",async()=>{await c(async()=>{const t=n.getByText(`Open ${a.severity} toast`);await l.hover(t),await l.click(t),await l.tab()})}),await i("link in toast",async()=>{await c(()=>{const t=n.getByText(a.linkText||"");C(t).toHaveAttribute("href",a.linkUrl)})}),await i("dismiss toast and reopen",async()=>{await c(async()=>{const t=n.getByRole("status");if(t){const r=D(t).getByRole("button",{name:"Close"});r&&(await l.click(r),await c(async()=>{C(t).not.toBeVisible();const s=n.getByText(`Open ${a.severity} toast`);await l.click(s)}))}}),await c(()=>Z("Dismissible Toast"))})}},h={argTypes:{autoHideDuration:{control:!1},isDismissable:{control:!1},isVisible:{control:!1},linkText:{control:!1},linkUrl:{control:!1},onHide:{control:!1},role:{control:!1},severity:{control:!1},text:{control:!1}},parameters:{docs:{description:{story:"`Toast` handles the visual appearance and show/hide logic, but not positioning. To have a Toast positioned correctly, it must be wrapped inside a `ToastStack`. There should only be one ToastStack per screen, regardless of how many Toasts there are, since a single ToastStack can accept multiple Toasts as children and will manage positioning accordingly."}}},render:function(){const o=[{id:S(),severity:"info",text:"The mission to Sagittarius A is set for January 7.",isDismissable:!0,isVisible:!0},{id:S(),severity:"success",text:"Docking completed.",isDismissable:!0,isVisible:!0}],[i,n]=yt(o),t=x(()=>{const s=[{severity:"warning",text:"Severe solar winds may delay local system flights.",isDismissable:!0,isVisible:!0},{severity:"error",text:"Security breach in Hangar 10.",isDismissable:!0,isVisible:!0}],m=s[Math.floor(Math.random()*s.length)];n(u=>[...u,{...m,id:S()}])},[]),r=x(s=>{n(m=>m.filter(u=>u.id!==s))},[]);return e.jsxs(e.Fragment,{children:[e.jsx(E,{label:"Open another Toast",onClick:t,variant:"primary"}),e.jsx(V,{children:i.map(s=>e.jsx(v,{isDismissable:s.isDismissable,isVisible:s.isVisible,onHide:()=>r(s.id),severity:s.severity,text:s.text},s.id))})]})}};var M,U,_;y.parameters={...y.parameters,docs:{...(M=y.parameters)==null?void 0:M.docs,source:{originalSource:`{
+  ...Single,
+  args: {
+    text: "The mission to Sagittarius A is set for January 7.",
+    severity: "info"
+  },
+  play: openToast("Info Toast"),
+  tags: ["!autodocs"]
+}`,...(_=(U=y.parameters)==null?void 0:U.docs)==null?void 0:_.source}}};var F,H,R;f.parameters={...f.parameters,docs:{...(F=f.parameters)==null?void 0:F.docs,source:{originalSource:`{
+  ...Single,
+  name: "Error",
+  args: {
+    text: "Security breach in Hangar 18",
+    role: "alert",
+    severity: "error"
+  },
+  play: openToast("Error Toast")
+}`,...(R=(H=f.parameters)==null?void 0:H.docs)==null?void 0:R.source}}};var L,$,z;g.parameters={...g.parameters,docs:{...(L=g.parameters)==null?void 0:L.docs,source:{originalSource:`{
+  ...Single,
+  args: {
+    text: "Severe solar winds may delay local system flights",
+    role: "status",
+    severity: "warning"
+  },
+  play: openToast("Warning Toast")
+}`,...(z=($=g.parameters)==null?void 0:$.docs)==null?void 0:z.source}}};var W,q,J;T.parameters={...T.parameters,docs:{...(W=T.parameters)==null?void 0:W.docs,source:{originalSource:`{
+  ...Single,
+  args: {
+    text: "Docking completed",
+    role: "status",
+    severity: "success"
+  },
+  play: openToast("Success Toast")
+}`,...(J=(q=T.parameters)==null?void 0:q.docs)==null?void 0:J.source}}};var N,K,Y;b.parameters={...b.parameters,docs:{...(N=b.parameters)==null?void 0:N.docs,source:{originalSource:`{
+  ...Single,
+  args: {
+    isDismissable: true,
+    linkText: "View report",
+    linkUrl: "#"
+  },
+  play: async ({
+    args,
+    canvasElement,
+    step
+  }) => {
+    const canvas = within(canvasElement);
+    await step(\`open Dismissible Toast}\`, async () => {
+      await waitFor(async () => {
+        const buttonElement = canvas.getByText(\`Open \${args.severity} toast\`);
+        await userEvent.hover(buttonElement);
+        await userEvent.click(buttonElement);
+        await userEvent.tab();
+      });
+    });
+    await step("link in toast", async () => {
+      await waitFor(() => {
+        const toastLink = canvas.getByText(args.linkText || "");
+        expect(toastLink).toHaveAttribute("href", args.linkUrl);
+      });
+    });
+    await step("dismiss toast and reopen", async () => {
+      await waitFor(async () => {
+        const toastElement = canvas.getByRole("status");
+        if (toastElement) {
+          const dismissToastButton = within(toastElement).getByRole("button", {
+            name: "Close"
+          });
+          if (dismissToastButton) {
+            await userEvent.click(dismissToastButton);
+            await waitFor(async () => {
+              expect(toastElement).not.toBeVisible();
+              const buttonElement = canvas.getByText(\`Open \${args.severity} toast\`);
+              await userEvent.click(buttonElement);
+            });
+          }
+        }
+      });
+      await waitFor(() => axeRun("Dismissible Toast"));
+    });
+  }
+}`,...(Y=(K=b.parameters)==null?void 0:K.docs)==null?void 0:Y.source}}};var G,Q,X;h.parameters={...h.parameters,docs:{...(G=h.parameters)==null?void 0:G.docs,source:{originalSource:`{
+  argTypes: {
+    autoHideDuration: {
+      control: false
+    },
+    isDismissable: {
+      control: false
+    },
+    isVisible: {
+      control: false
+    },
+    linkText: {
+      control: false
+    },
+    linkUrl: {
+      control: false
+    },
+    onHide: {
+      control: false
+    },
+    role: {
+      control: false
+    },
+    severity: {
+      control: false
+    },
+    text: {
+      control: false
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "\`Toast\` handles the visual appearance and show/hide logic, but not positioning. To have a Toast positioned correctly, it must be wrapped inside a \`ToastStack\`. There should only be one ToastStack per screen, regardless of how many Toasts there are, since a single ToastStack can accept multiple Toasts as children and will manage positioning accordingly."
+      }
+    }
+  },
+  render: function C() {
+    type ToastWithId = ToastProps & {
+      id: string;
+    };
+    const unstableToasts = [{
+      id: createUniqueId(),
+      severity: "info" as const,
+      text: "The mission to Sagittarius A is set for January 7.",
+      isDismissable: true,
+      isVisible: true
+    }, {
+      id: createUniqueId(),
+      severity: "success" as const,
+      text: "Docking completed.",
+      isDismissable: true,
+      isVisible: true
+    }];
+    const [toasts, setToasts] = useState<ToastWithId[]>(unstableToasts);
+    const addToast = useCallback(() => {
+      const toastOptions = [{
+        severity: "warning" as const,
+        text: "Severe solar winds may delay local system flights.",
+        isDismissable: true,
+        isVisible: true
+      }, {
+        severity: "error" as const,
+        text: "Security breach in Hangar 10.",
+        isDismissable: true,
+        isVisible: true
+      }];
+      const randomToast = toastOptions[Math.floor(Math.random() * toastOptions.length)];
+      setToasts(prevToasts => [...prevToasts, {
+        ...randomToast,
+        id: createUniqueId()
+      }]);
+    }, []);
+    const handleDismiss = useCallback((toastId: string) => {
+      setToasts(prevToasts => prevToasts.filter(toast => toast.id !== toastId));
+    }, []);
+    return <>
+        <Button label="Open another Toast" onClick={addToast} variant="primary" />
+        <ToastStack>
+          {toasts.map(toast => <Toast isDismissable={toast.isDismissable} isVisible={toast.isVisible} key={toast.id} onHide={() => handleDismiss(toast.id)} severity={toast.severity} text={toast.text} />)}
+        </ToastStack>
+      </>;
+  }
+}`,...(X=(Q=h.parameters)==null?void 0:Q.docs)==null?void 0:X.source}}};const re=["Info","ErrorToast","Warning","Success","Dismissible","MultipleToasts"];export{b as Dismissible,f as ErrorToast,y as Info,h as MultipleToasts,T as Success,g as Warning,re as __namedExportsOrder,ie as default};