@okta/odyssey-contribution-tooling 1.47.0 → 1.48.0

package/dist/assets/Select.stories-BXXrgt5o.js

@@ -0,0 +1,293 @@
+import{j as p}from"./jsx-runtime-CnH95YSl.js";import{f as I,u as r,s as F,e as i,a as l,w as Pe}from"./index-BJMTVygn.js";import{r as u}from"./index-NdkWRN8K.js";import{a as m}from"./axeRun-B-LchFqf.js";import{O as He}from"./OdysseyStorybookThemeDecorator-CGH8visK.js";import{f as c}from"./fieldComponentPropsMetaData-BqbNLw6V.js";import{M as d}from"./Select-BWJ6-p1Z.js";import{M as Ge}from"./Link-BQo2zH0c.js";import{q as Ue}from"./queryOdysseySelector-CwauhQve.js";import"./_commonjsHelpers-gnU0ypJ3.js";import"./axe-4JP0vCEZ.js";import"./OdysseyThemeProvider-BykOaJq8.js";import"./index-BJTM6NaI.js";import"./OdysseyProvider-BPLFYiwr.js";import"./Field-BxkyNVQW.js";import"./Box-B-R2QRDU.js";import"./Box-B6KmU4_J.js";import"./List-_p0jkXPM.js";import"./ListItem-BLYwuKOG.js";import"./utils-iop7lDec.js";import"./useFormControl-BMISTZuX.js";import"./FormLabel-EOlXQpGp.js";import"./useIsFocusVisible-DH0qxT5e.js";import"./isHostComponent-DVu5iVWx.js";import"./ButtonBase-CrcIXP69.js";import"./assertThisInitialized-B9jnkVVz.js";import"./inheritsLoose-DTTkq0Su.js";import"./TransitionGroupContext-DAL84N7p.js";import"./ScreenReaderText-DbrZU7M5.js";import"./visuallyHidden-Dan1xhjv.js";import"./FormHelperText-Ca69g4Je.js";import"./FieldHint-D5VttvwL.js";import"./Typography-B7ktrxCD.js";import"./Typography-CSpPZFTF.js";import"./useUniqueId-Bsgqe1tm.js";import"./createUniqueId-ByTaVY63.js";import"./inputUtils-Dbi8XkA6.js";import"./Chip-B9WkuA4b.js";import"./createSvgIcon-Bv_3NNsK.js";import"./ListSubheader-DO359rMr.js";import"./MenuItem-oi_JaUho.js";import"./Checkbox-OauVZWc5.js";import"./SwitchBase-CWdXZnig.js";import"./useControlled-NQulfz4l.js";import"./Select-VvpDulqk.js";import"./Menu-CU_mHT7L.js";import"./getReactElementRef-Bs64nbeG.js";import"./resolveComponentProps-TTQVZ4OZ.js";import"./Grow-6R6cTzr4.js";import"./utils-BdcLUgCD.js";import"./index-B5xazMy1.js";import"./index-DieBXP3Z.js";import"./ownerDocument-DW-IO8s5.js";import"./ownerWindow-HkKU3E4x.js";import"./debounce-Be36O1Ab.js";import"./Modal-B12sS2Yh.js";import"./getScrollbarSize-Bqq2hMjQ.js";import"./createChainedFunction-BO_9K8Jh.js";import"./Portal-CsPQSHsR.js";import"./Fade-CHnXmzFb.js";import"./Paper-DwBg74qy.js";import"./MenuList-0OHGr5AC.js";import"./ArrowDropDown-Dnrg-0Q8.js";import"./InputBase-6reb9B7r.js";import"./Link-DcsndbPK.js";import"./ExternalLink-lox07hAR.js";import"./test-utils-H9lH7T5D.js";import"./client-ByW5HbEz.js";const ze=["Roles and permissions","Okta Privileged Access components","Users and Groups administration","Resource administration","Security administration","Deploy and manage servers","Okta Privileged Access clients"],Ae=[{text:"Roles and permissions",value:"roles-and-permissions"},{text:"Okta Privileged Access gateways",value:"okta-privileged-access-gateways"},{text:"Users and Groups administration",value:"users-and-groups-administration"},{text:"Resource administration",value:"resource-administration"},{text:"Security administration",value:"security-administrator"},{text:"Deploy and manage servers",value:"deploy-and-manage-servers"},{text:"Okta Privileged Access clients",value:"okta-privileged-access-clients"}],_e=[{text:"Okta Privileged Access",type:"heading"},{text:"Roles and permissions",value:"roles-and-permissions"},{text:"Okta Privileged Access gateways",value:"okta-privileged-access-gateways"},{text:"Users and Groups administration",value:"users-and-groups-administration"},{text:"Resource administration",value:"resource-administration"},{text:"Security administration",value:"security-administrator"},{text:"Deploy and manage servers",value:"deploy-and-manage-servers"},{text:"Okta Privileged Access clients",value:"okta-privileged-access-clients"},{text:"Audit events",type:"heading"},"Resource","Action","Related Info","Actor","Date"],Je=[{text:"English",value:"en",language:"en"},{text:"Español",value:"es",language:"es"},{text:"Français",value:"fr",language:"fr"},{text:"Deutsch",value:"de",language:"de"},{text:"中文",value:"zh",language:"zh"},{text:"日本語",value:"ja",language:"ja"},{text:"한국어",value:"ko",language:"ko"}],ia={component:d,decorators:[He],tags:["autodocs"],argTypes:{defaultValue:{control:"text",description:"The default value. Use when the component is not controlled.",table:{type:{summary:"string | string[]"},defaultValue:{summary:void 0}}},errorMessage:c.errorMessage,errorMessageList:c.errorMessageList,hasMultipleChoices:{control:"boolean",description:"If `true`, the select component allows multiple selections",table:{type:{summary:"boolean"},defaultValue:{summary:"false"}}},hint:c.hint,HintLinkComponent:c.HintLinkComponent,id:c.id,isDisabled:c.isFullWidth,isFullWidth:c.isFullWidth,isOptional:c.isOptional,isReadOnly:c.isReadOnly,label:{control:"text",description:"The label text for the select component",table:{type:{summary:"string"}},type:{required:!0,name:"string"}},name:c.name,onBlur:{description:"Callback fired when the select component loses focus",table:{type:{summary:"func"}}},onChange:{description:"Callback fired when the value of the select component changes",table:{type:{summary:"func"}}},onFocus:{description:"Callback fired when the select component gains focus",table:{type:{summary:"func"}}},options:{control:"object",description:"The options for the select component",table:{type:{summary:"(string | SelectOption)[]"}},type:{required:!0,name:"other",value:"(string | SelectOption)[]"}},value:{control:"text",description:"The `input` value. Use when the component is controlled.\n\nProviding an empty string will select no options.\n\nSet to an empty string `''` if you don't want any of the available options to be selected.",table:{type:{summary:"string | string[]"}}}},args:{hint:"Select a topic to learn more",label:"Okta documentation",onBlur:I(),onChange:I(),onFocus:I(),options:ze}},g={args:{defaultValue:""},play:async({canvasElement:a,step:o})=>{await o("Select Roles and permissions from the listbox",async()=>{const n=a.querySelector('[aria-haspopup="listbox"]');if(n){await r.click(n);const e=F.getByRole("listbox");await i(e).toBeInTheDocument();const t=e.children[0];await r.click(t),await r.tab(),await l(()=>{i(e).not.toBeInTheDocument()});const s=a.querySelector("input");await i(s==null?void 0:s.value).toBe("Roles and permissions"),await l(()=>{m("Select Default")})}})}},h={args:{defaultValue:"Roles and permissions"},play:async({canvasElement:a,step:o})=>{await o("can click dropdown option",async()=>{const e=Ue("Select")({element:a,options:{label:/Okta documentation/}});await r.click(e.element);const t=e.selectChild({name:"list"});await l(()=>{i(t.element).toBeVisible()});const s=t.selectChild({name:"listItem",options:{label:"Roles and permissions"}}).element;await l(()=>{i(s).toBeVisible()}),s&&await r.click(s),await l(()=>{i(t==null?void 0:t.element).not.toBeVisible()})})}},y={args:{defaultValue:"",isDisabled:!0}},v={args:{errorMessage:"Select a topic.",defaultValue:""},play:async({step:a})=>{await a("Check for a11y errors on Select Error",async()=>{await l(()=>m("Select Error"))})}},S={args:{isMultiSelect:!0,errorMessage:"Select a topic.",errorMessageList:["Select at least one item","Select no more than 3 items"],defaultValue:[]},play:async({step:a})=>{await a("Check for a11y errors on Select Error",async()=>{await l(()=>m("Select Errors List"))})}},f={args:{isFullWidth:!0}},b={args:{HintLinkComponent:p.jsx(Ge,{href:"/learn-more",children:"Learn more"})}},x={args:{value:"",options:[{value:"",text:""},{value:"value1",text:"Value 1"},{value:"value2",text:"Value 2"}]}},w={args:{options:Ae,defaultValue:""},parameters:{docs:{description:{story:"Select can accept `options` as a flat array, an array of objects, or both. This demonstrates an array of objects with `value` and `name`."}}}},E={args:{options:Ae,value:[],hasMultipleChoices:!0},render:function(o){const[n,e]=u.useState([]),t=u.useCallback(s=>e(s.target.value),[]);return p.jsx(d,{...o,onChange:t,value:n})}},C={args:{options:_e,defaultValue:""},parameters:{docs:{description:{story:'Objects with `type: "heading"` will have their `text` displayed as a heading.'}}}},k={args:{isMultiSelect:!0,defaultValue:[]},play:async({canvasElement:a,step:o})=>{await o("Select Multiple items from the listbox",async()=>{const n=a.querySelector('[aria-haspopup="listbox"]');if(n){await r.click(n);const e=F.getByRole("listbox");await i(e).toBeInTheDocument(),await r.click(e.children[0]),await r.click(e.children[1]),await r.tab(),await l(()=>{i(e).not.toBeInTheDocument()});const t=a.querySelector("input");await i(t==null?void 0:t.value).toBe("Roles and permissions,Okta Privileged Access components"),await r.click(a),await l(()=>{m("Select Multiple")})}})}},V={args:{isReadOnly:!0,defaultValue:"Security administration"}},O={args:{isMultiSelect:!0,isReadOnly:!0,defaultValue:["Roles and permissions","Security administration","Deploy and manage servers"]}},R={args:{isMultiSelect:!0,isReadOnly:!0,value:["Roles and permissions","Security administration","Deploy and manage servers"]}},M={parameters:{docs:{description:{story:"When the component is controlled, the parent component is responsible for managing the state of `Select`. `onChange` should be used to listen for component changes and to update the values in the `value` prop."}}},args:{value:""},render:function(o){const[n,e]=u.useState(""),t=u.useCallback(s=>e(s.target.value),[]);return p.jsx(d,{...o,onChange:t,value:n})}},B={parameters:{docs:{description:{story:'When the component is controlled, the parent component is responsible for managing the state of `Select`. `onChange` should be used to listen for component changes and to update the values in the `value` prop.\n\nWhen `hasMultipleChoices` is `true` and nothing is preselected, pass `[""]` as this initial controlled `value`'}}},args:{value:[],hasMultipleChoices:!0},render:function(o){const[n,e]=u.useState([""]),t=u.useCallback(s=>e(s.target.value),[]);return p.jsx(d,{...o,onChange:t,value:n})}},L={parameters:{docs:{description:{story:"When the component is controlled, the parent component is responsible for managing the state of `Select`. `onChange` should be used to listen for component changes and to update the values in the `value` prop."}}},args:{value:[],hasMultipleChoices:!0},render:function(o){const[n,e]=u.useState(["Roles and permissions","Resource administration"]),t=u.useCallback(s=>e(s.target.value),[]);return p.jsx(d,{...o,onChange:t,value:n})}},D={args:{label:"Select Language",options:Je,defaultValue:""},parameters:{docs:{description:{story:"Showcase the Select component with options for multiple different languages."}}},play:async({canvasElement:a,step:o})=>{await o("Select English from the listbox",async()=>{const n=a.querySelector('[aria-haspopup="listbox"]');if(n){await r.click(n);const e=F.getByRole("listbox");await i(e).toBeInTheDocument();const t=e.children[0];await r.click(t),await r.tab(),await l(()=>{i(e).not.toBeInTheDocument()});const s=e.querySelector('[lang="fr"]');await i(s).toHaveTextContent("Français");const We=Pe(e).getByText("Français");i(We).toHaveAttribute("lang","fr"),await l(()=>{m("Select Multiple Languages")})}})}};var T,j,q;g.parameters={...g.parameters,docs:{...(T=g.parameters)==null?void 0:T.docs,source:{originalSource:`{
+  args: {
+    defaultValue: ""
+  },
+  play: async ({
+    canvasElement,
+    step
+  }) => {
+    await step("Select Roles and permissions from the listbox", async () => {
+      const comboBoxElement = canvasElement.querySelector('[aria-haspopup="listbox"]');
+      if (comboBoxElement) {
+        await userEvent.click(comboBoxElement);
+        const listboxElement = screen.getByRole("listbox");
+        await expect(listboxElement).toBeInTheDocument();
+        const listItem = listboxElement.children[0];
+        await userEvent.click(listItem);
+        await userEvent.tab();
+        await waitFor(() => {
+          expect(listboxElement).not.toBeInTheDocument();
+        });
+        const inputElement = canvasElement.querySelector("input");
+        await expect(inputElement?.value).toBe("Roles and permissions");
+        await waitFor(() => {
+          axeRun("Select Default");
+        });
+      }
+    });
+  }
+}`,...(q=(j=g.parameters)==null?void 0:j.docs)==null?void 0:q.source}}};var A,W,P;h.parameters={...h.parameters,docs:{...(A=h.parameters)==null?void 0:A.docs,source:{originalSource:`{
+  args: {
+    defaultValue: "Roles and permissions"
+  },
+  play: async ({
+    canvasElement,
+    step
+  }) => {
+    await step("can click dropdown option", async () => {
+      const querySelect = queryOdysseySelector("Select");
+      const selector = querySelect({
+        element: canvasElement,
+        options: {
+          label: /Okta documentation/
+        }
+      });
+      await userEvent.click(selector.element);
+      const list = selector.selectChild({
+        name: "list"
+      });
+      await waitFor(() => {
+        expect(list.element).toBeVisible();
+      });
+      const listItemElement = list.selectChild({
+        name: "listItem",
+        options: {
+          label: "Roles and permissions"
+        }
+      }).element;
+      await waitFor(() => {
+        expect(listItemElement).toBeVisible();
+      });
+      if (listItemElement) {
+        await userEvent.click(listItemElement);
+      }
+      await waitFor(() => {
+        expect(list?.element).not.toBeVisible();
+      });
+    });
+  }
+}`,...(P=(W=h.parameters)==null?void 0:W.docs)==null?void 0:P.source}}};var H,G,U;y.parameters={...y.parameters,docs:{...(H=y.parameters)==null?void 0:H.docs,source:{originalSource:`{
+  args: {
+    defaultValue: "",
+    isDisabled: true
+  }
+}`,...(U=(G=y.parameters)==null?void 0:G.docs)==null?void 0:U.source}}};var z,_,J;v.parameters={...v.parameters,docs:{...(z=v.parameters)==null?void 0:z.docs,source:{originalSource:`{
+  args: {
+    errorMessage: "Select a topic.",
+    defaultValue: ""
+  },
+  play: async ({
+    step
+  }) => {
+    await step("Check for a11y errors on Select Error", async () => {
+      await waitFor(() => axeRun("Select Error"));
+    });
+  }
+}`,...(J=(_=v.parameters)==null?void 0:_.docs)==null?void 0:J.source}}};var K,N,Q;S.parameters={...S.parameters,docs:{...(K=S.parameters)==null?void 0:K.docs,source:{originalSource:`{
+  args: {
+    isMultiSelect: true,
+    errorMessage: "Select a topic.",
+    errorMessageList: ["Select at least one item", "Select no more than 3 items"],
+    defaultValue: []
+  },
+  play: async ({
+    step
+  }) => {
+    await step("Check for a11y errors on Select Error", async () => {
+      await waitFor(() => axeRun("Select Errors List"));
+    });
+  }
+}`,...(Q=(N=S.parameters)==null?void 0:N.docs)==null?void 0:Q.source}}};var X,Y,Z;f.parameters={...f.parameters,docs:{...(X=f.parameters)==null?void 0:X.docs,source:{originalSource:`{
+  args: {
+    isFullWidth: true
+  }
+}`,...(Z=(Y=f.parameters)==null?void 0:Y.docs)==null?void 0:Z.source}}};var $,ee,te;b.parameters={...b.parameters,docs:{...($=b.parameters)==null?void 0:$.docs,source:{originalSource:`{
+  args: {
+    HintLinkComponent: <Link href="/learn-more">Learn more</Link>
+  }
+}`,...(te=(ee=b.parameters)==null?void 0:ee.docs)==null?void 0:te.source}}};var ae,ne,se;x.parameters={...x.parameters,docs:{...(ae=x.parameters)==null?void 0:ae.docs,source:{originalSource:`{
+  args: {
+    value: "",
+    options: [{
+      value: "",
+      text: ""
+    }, {
+      value: "value1",
+      text: "Value 1"
+    }, {
+      value: "value2",
+      text: "Value 2"
+    }]
+  }
+}`,...(se=(ne=x.parameters)==null?void 0:ne.docs)==null?void 0:se.source}}};var oe,re,ie;w.parameters={...w.parameters,docs:{...(oe=w.parameters)==null?void 0:oe.docs,source:{originalSource:`{
+  args: {
+    options: optionsObject,
+    defaultValue: ""
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Select can accept \`options\` as a flat array, an array of objects, or both. This demonstrates an array of objects with \`value\` and \`name\`."
+      }
+    }
+  }
+}`,...(ie=(re=w.parameters)==null?void 0:re.docs)==null?void 0:ie.source}}};var le,ce,ue;E.parameters={...E.parameters,docs:{...(le=E.parameters)==null?void 0:le.docs,source:{originalSource:`{
+  args: {
+    options: optionsObject,
+    value: [],
+    hasMultipleChoices: true
+  },
+  render: function C(props) {
+    const [localValue, setLocalValue] = useState<string[]>([]);
+    const onChange = useCallback((event: SelectChangeEvent<string | string[]>) => setLocalValue(event.target.value as string[]), []);
+    return <Select {...props} onChange={onChange} value={localValue} />;
+  }
+}`,...(ue=(ce=E.parameters)==null?void 0:ce.docs)==null?void 0:ue.source}}};var pe,me,de;C.parameters={...C.parameters,docs:{...(pe=C.parameters)==null?void 0:pe.docs,source:{originalSource:`{
+  args: {
+    options: optionsGrouped,
+    defaultValue: ""
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Objects with \`type: "heading"\` will have their \`text\` displayed as a heading.'
+      }
+    }
+  }
+}`,...(de=(me=C.parameters)==null?void 0:me.docs)==null?void 0:de.source}}};var ge,he,ye;k.parameters={...k.parameters,docs:{...(ge=k.parameters)==null?void 0:ge.docs,source:{originalSource:`{
+  args: {
+    isMultiSelect: true,
+    defaultValue: []
+  },
+  play: async ({
+    canvasElement,
+    step
+  }) => {
+    await step("Select Multiple items from the listbox", async () => {
+      const comboBoxElement = canvasElement.querySelector('[aria-haspopup="listbox"]');
+      if (comboBoxElement) {
+        await userEvent.click(comboBoxElement);
+        const listboxElement = screen.getByRole("listbox");
+        await expect(listboxElement).toBeInTheDocument();
+        await userEvent.click(listboxElement.children[0]);
+        await userEvent.click(listboxElement.children[1]);
+        await userEvent.tab();
+        await waitFor(() => {
+          expect(listboxElement).not.toBeInTheDocument();
+        });
+        const inputElement = canvasElement.querySelector("input");
+        await expect(inputElement?.value).toBe("Roles and permissions,Okta Privileged Access components");
+        await userEvent.click(canvasElement);
+        await waitFor(() => {
+          axeRun("Select Multiple");
+        });
+      }
+    });
+  }
+}`,...(ye=(he=k.parameters)==null?void 0:he.docs)==null?void 0:ye.source}}};var ve,Se,fe;V.parameters={...V.parameters,docs:{...(ve=V.parameters)==null?void 0:ve.docs,source:{originalSource:`{
+  args: {
+    isReadOnly: true,
+    defaultValue: "Security administration"
+  }
+}`,...(fe=(Se=V.parameters)==null?void 0:Se.docs)==null?void 0:fe.source}}};var be,xe,we;O.parameters={...O.parameters,docs:{...(be=O.parameters)==null?void 0:be.docs,source:{originalSource:`{
+  args: {
+    isMultiSelect: true,
+    isReadOnly: true,
+    defaultValue: ["Roles and permissions", "Security administration", "Deploy and manage servers"]
+  }
+}`,...(we=(xe=O.parameters)==null?void 0:xe.docs)==null?void 0:we.source}}};var Ee,Ce,ke;R.parameters={...R.parameters,docs:{...(Ee=R.parameters)==null?void 0:Ee.docs,source:{originalSource:`{
+  args: {
+    isMultiSelect: true,
+    isReadOnly: true,
+    value: ["Roles and permissions", "Security administration", "Deploy and manage servers"]
+  }
+}`,...(ke=(Ce=R.parameters)==null?void 0:Ce.docs)==null?void 0:ke.source}}};var Ve,Oe,Re;M.parameters={...M.parameters,docs:{...(Ve=M.parameters)==null?void 0:Ve.docs,source:{originalSource:`{
+  parameters: {
+    docs: {
+      description: {
+        story: "When the component is controlled, the parent component is responsible for managing the state of \`Select\`. \`onChange\` should be used to listen for component changes and to update the values in the \`value\` prop."
+      }
+    }
+  },
+  args: {
+    value: ""
+  },
+  render: function C(props) {
+    const [localValue, setLocalValue] = useState("");
+    const onChange = useCallback((event: SelectChangeEvent<string | string[]>) => setLocalValue(event.target.value as string), []);
+    return <Select {...props} onChange={onChange} value={localValue} />;
+  }
+}`,...(Re=(Oe=M.parameters)==null?void 0:Oe.docs)==null?void 0:Re.source}}};var Me,Be,Le;B.parameters={...B.parameters,docs:{...(Me=B.parameters)==null?void 0:Me.docs,source:{originalSource:`{
+  parameters: {
+    docs: {
+      description: {
+        story: 'When the component is controlled, the parent component is responsible for managing the state of \`Select\`. \`onChange\` should be used to listen for component changes and to update the values in the \`value\` prop.\\n\\nWhen \`hasMultipleChoices\` is \`true\` and nothing is preselected, pass \`[""]\` as this initial controlled \`value\`'
+      }
+    }
+  },
+  args: {
+    value: [],
+    hasMultipleChoices: true
+  },
+  render: function C(props) {
+    const [localValue, setLocalValue] = useState([""]);
+    const onChange = useCallback((event: SelectChangeEvent<string | string[]>) => setLocalValue(event.target.value as string[]), []);
+    return <Select {...props} onChange={onChange} value={localValue} />;
+  }
+}`,...(Le=(Be=B.parameters)==null?void 0:Be.docs)==null?void 0:Le.source}}};var De,Ie,Fe;L.parameters={...L.parameters,docs:{...(De=L.parameters)==null?void 0:De.docs,source:{originalSource:`{
+  parameters: {
+    docs: {
+      description: {
+        story: "When the component is controlled, the parent component is responsible for managing the state of \`Select\`. \`onChange\` should be used to listen for component changes and to update the values in the \`value\` prop."
+      }
+    }
+  },
+  args: {
+    value: [],
+    hasMultipleChoices: true
+  },
+  render: function C(props) {
+    const [localValue, setLocalValue] = useState(["Roles and permissions", "Resource administration"]);
+    const onChange = useCallback((event: SelectChangeEvent<string | string[]>) => setLocalValue(event.target.value as string[]), []);
+    return <Select {...props} onChange={onChange} value={localValue} />;
+  }
+}`,...(Fe=(Ie=L.parameters)==null?void 0:Ie.docs)==null?void 0:Fe.source}}};var Te,je,qe;D.parameters={...D.parameters,docs:{...(Te=D.parameters)==null?void 0:Te.docs,source:{originalSource:`{
+  args: {
+    label: "Select Language",
+    options: optionsLanguages,
+    defaultValue: ""
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Showcase the Select component with options for multiple different languages."
+      }
+    }
+  },
+  play: async ({
+    canvasElement,
+    step
+  }) => {
+    await step("Select English from the listbox", async () => {
+      const comboBoxElement = canvasElement.querySelector('[aria-haspopup="listbox"]');
+      if (comboBoxElement) {
+        await userEvent.click(comboBoxElement);
+        const listboxElement = screen.getByRole("listbox");
+        await expect(listboxElement).toBeInTheDocument();
+        const listItem = listboxElement.children[0];
+        await userEvent.click(listItem);
+        await userEvent.tab();
+        await waitFor(() => {
+          expect(listboxElement).not.toBeInTheDocument();
+        });
+        const selectedOption = listboxElement.querySelector('[lang="fr"]');
+        await expect(selectedOption).toHaveTextContent("Français");
+        const frenchOptionElement = within(listboxElement).getByText("Français");
+        expect(frenchOptionElement).toHaveAttribute("lang", "fr");
+        await waitFor(() => {
+          axeRun("Select Multiple Languages");
+        });
+      }
+    });
+  }
+}`,...(qe=(je=D.parameters)==null?void 0:je.docs)==null?void 0:qe.source}}};const la=["Default","DefaultValue","Disabled","Error","ErrorsList","FullWidth","HintLink","EmptyValue","OptionsObject","OptionsObjectAndMultiSelect","OptionsGrouped","MultiSelect","ReadOnly","ReadOnlyMultiSelect","ReadOnlyMultiSelectValue","ControlledSelect","ControlledMultipleSelect","ControlledPreselectedMultipleSelect","MultipleLanguages"];export{B as ControlledMultipleSelect,L as ControlledPreselectedMultipleSelect,M as ControlledSelect,g as Default,h as DefaultValue,y as Disabled,x as EmptyValue,v as Error,S as ErrorsList,f as FullWidth,b as HintLink,k as MultiSelect,D as MultipleLanguages,C as OptionsGrouped,w as OptionsObject,E as OptionsObjectAndMultiSelect,V as ReadOnly,O as ReadOnlyMultiSelect,R as ReadOnlyMultiSelectValue,la as __namedExportsOrder,ia as default};

package/dist/assets/Server-DS5iERo2.js

@@ -0,0 +1 @@
+import{r as o}from"./index-NdkWRN8K.js";import{j as e}from"./jsx-runtime-CnH95YSl.js";import{S as l}from"./OdysseyThemeProvider-BykOaJq8.js";const a=o.forwardRef((r,n)=>e.jsx(l,{fill:"none",ref:n,viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",...r,children:e.jsx(e.Fragment,{children:e.jsx("path",{clipRule:"evenodd",d:"M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18ZM1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12Zm10-1V8h2v3h3v2h-3v3h-2v-3H8v-2h3Z",fill:"currentColor",fillRule:"evenodd"})})})),t=o.memo(a);t.displayName="AddCircleIcon";const c=o.forwardRef((r,n)=>e.jsx(l,{fill:"none",ref:n,viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",...r,children:e.jsx(e.Fragment,{children:e.jsx("path",{clipRule:"evenodd",d:"M6.5 2a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9ZM4 6.5a2.5 2.5 0 1 1 5 0 2.5 2.5 0 0 1-5 0ZM6.5 13a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9ZM4 17.5a2.5 2.5 0 1 1 5 0 2.5 2.5 0 0 1-5 0Zm9-11a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM17.5 4a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5Zm0 9a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9ZM15 17.5a2.5 2.5 0 1 1 5 0 2.5 2.5 0 0 1-5 0Z",fill:"currentColor",fillRule:"evenodd"})})})),s=o.memo(c);s.displayName="AppsIcon";const d=o.forwardRef((r,n)=>e.jsx(l,{fill:"none",ref:n,viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",...r,children:e.jsx(e.Fragment,{children:e.jsx("path",{clipRule:"evenodd",d:"M5 2a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V5a3 3 0 0 0-3-3H5ZM4 5a1 1 0 0 1 1-1h1v16H5a1 1 0 0 1-1-1V5Zm4 15h1.18l.251-1.254a4.66 4.66 0 0 1 9.138 0l.25 1.254H19a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H8v16Zm8.608-.862.172.862h-5.56l.172-.862a2.66 2.66 0 0 1 5.216 0ZM12 10a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm2-4a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z",fill:"currentColor",fillRule:"evenodd"})})})),i=o.memo(d);i.displayName="DirectoryIcon";const h=o.forwardRef((r,n)=>e.jsx(l,{fill:"none",ref:n,viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",...r,children:e.jsxs(e.Fragment,{children:[e.jsx("path",{d:"M11.755 13.975a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0Z",stroke:"currentColor",strokeWidth:1.5}),e.jsx("path",{d:"M28.988 22.475a8.484 8.484 0 1 1-16.967 0 8.484 8.484 0 0 1 16.967 0Z",stroke:"currentColor",strokeWidth:1.5}),e.jsx("path",{d:"M15.502 24.785c.646-1.382.112-1.903.057-3.024-.039-.803.224-1.83.946-2.785.723-.955 1.629-2.07 4.029-2.07s3.92 1.794 4.42 2.627c.5.833 1.266 2.915.427 6.648",stroke:"currentColor",strokeLinecap:"round",strokeWidth:1.5}),e.jsx("path",{d:"M20.533 21.69c.407 1.16.703 4.089-1.37 6.518",stroke:"currentColor",strokeLinecap:"round",strokeWidth:1.5}),e.jsx("path",{d:"M17.032 26.767c.299-.255.962-1.3 1.121-1.778.16-.478.31-.852 0-2.726-.147-.894.154-1.674.467-2.022.314-.347.919-.842 1.604-.882.946-.056 1.712.414 2.054.72.597.544.955 1.487.982 3.144.026 1.611-.289 2.343-.71 3.87",stroke:"currentColor",strokeLinecap:"round",strokeWidth:1.5}),e.jsx("path",{clipRule:"evenodd",d:"M6.011.292h-.75v8h-3v15.75a2.75 2.75 0 0 0 2.75 2.75h5.667a10.71 10.71 0 0 1-.53-1.5H5.01c-.69 0-1.25-.56-1.25-1.25V9.792h12.502v2.824a10.65 10.65 0 0 1 1.5-.518V8.292h-3v-8h-8.75Zm7.25 8h-6.5v-6.5h6.5v6.5Z",fill:"currentColor",fillRule:"evenodd"})]})})),m=o.memo(h);m.displayName="Fido2Icon";const v=o.forwardRef((r,n)=>e.jsx(l,{fill:"none",ref:n,viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",...r,children:e.jsx(e.Fragment,{children:e.jsx("path",{clipRule:"evenodd",d:"M5 11h14v7a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3v-7Zm2-5v3H3v9a5 5 0 0 0 5 5h8a5 5 0 0 0 5-5V9h-4V6A5 5 0 0 0 7 6Zm8 3V6a3 3 0 1 0-6 0v3h6Zm-3 8.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z",fill:"currentColor",fillRule:"evenodd"})})})),f=o.memo(v);f.displayName="LockIcon";const p=o.forwardRef((r,n)=>e.jsx(l,{fill:"none",ref:n,viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",...r,children:e.jsx(e.Fragment,{children:e.jsx("path",{clipRule:"evenodd",d:"M12 1C7.544 1 4.03 4.556 3.637 8.899c-.298 3.284-.794 6.258-1.591 8.802L1.639 19h5.458c.454 2.302 2.454 4 4.903 4 2.45 0 4.448-1.698 4.903-4h5.458l-.407-1.3c-.797-2.543-1.293-5.517-1.59-8.801C19.968 4.556 16.455 1 12 1Zm2.837 18H9.163c.402 1.179 1.502 2 2.837 2 1.335 0 2.435-.821 2.837-2ZM5.628 9.08C5.938 5.67 8.673 3 12 3s6.062 2.671 6.372 6.08c.257 2.84.664 5.513 1.3 7.92H4.328c.636-2.407 1.043-5.08 1.3-7.92Z",fill:"currentColor",fillRule:"evenodd"})})})),x=o.memo(p);x.displayName="NotificationIcon";const w=o.forwardRef((r,n)=>e.jsx(l,{fill:"none",ref:n,viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",...r,children:e.jsx(e.Fragment,{children:e.jsx("path",{clipRule:"evenodd",d:"M6 1a3 3 0 0 0-3 3v16a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3V4a3 3 0 0 0-3-3H6ZM5 4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3.667H5V4Zm0 5.667h14v4.666H5V9.667Zm0 6.666V20a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-3.667H5Zm3-10a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM8 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm1 5.667a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z",fill:"currentColor",fillRule:"evenodd"})})})),u=o.memo(w);u.displayName="ServerIcon";export{t as M,s as a,i as b,u as c,m as d,f as e,x as f};

package/dist/assets/Settings-SRsJGOHl.js

@@ -0,0 +1 @@
+import{r as o}from"./index-NdkWRN8K.js";import{j as e}from"./jsx-runtime-CnH95YSl.js";import{S as t}from"./OdysseyThemeProvider-BykOaJq8.js";const n=o.forwardRef((a,r)=>e.jsx(t,{fill:"none",ref:r,viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",...a,children:e.jsx(e.Fragment,{children:e.jsx("path",{clipRule:"evenodd",d:"M4.756 12a5.13 5.13 0 0 0-1.16-3.228A8.98 8.98 0 0 1 4.8 6.6a5.411 5.411 0 0 0 3.553-.593 5.238 5.238 0 0 0 2.414-2.922 9.098 9.098 0 0 1 2.466 0 5.238 5.238 0 0 0 2.414 2.922A5.411 5.411 0 0 0 19.2 6.6c.497.66.904 1.391 1.204 2.173A5.123 5.123 0 0 0 19.244 12a5.13 5.13 0 0 0 1.16 3.228A8.978 8.978 0 0 1 19.2 17.4a5.41 5.41 0 0 0-3.553.593l.84 1.505-.84-1.505a5.238 5.238 0 0 0-2.414 2.922 9.088 9.088 0 0 1-2.466 0 5.238 5.238 0 0 0-2.414-2.922A5.41 5.41 0 0 0 4.8 17.4a8.979 8.979 0 0 1-1.204-2.173A5.123 5.123 0 0 0 4.756 12ZM1.317 9.366a10.983 10.983 0 0 1 2.83-5.069c.91.48 2.176.552 3.231-.037 1.114-.622 1.685-1.81 1.648-2.853A11.009 11.009 0 0 1 12 1a11 11 0 0 1 2.973.407c-.036 1.044.535 2.231 1.649 2.853 1.055.589 2.32.516 3.231.037a10.983 10.983 0 0 1 2.83 5.069c-.815.545-1.44 1.52-1.44 2.634 0 1.113.625 2.089 1.44 2.634a10.983 10.983 0 0 1-2.83 5.069c-.91-.48-2.176-.552-3.231.037-1.114.622-1.685 1.81-1.649 2.853A11.01 11.01 0 0 1 12 23c-1.03 0-2.028-.142-2.974-.407.037-1.044-.534-2.231-1.648-2.853-1.055-.589-2.32-.516-3.231-.037a10.983 10.983 0 0 1-2.83-5.07c.815-.544 1.439-1.52 1.439-2.633s-.624-2.089-1.439-2.634ZM10 12a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm2-4a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z",fill:"currentColor",fillRule:"evenodd"})})})),s=o.memo(n);s.displayName="SettingsIcon";export{s as M};

package/dist/assets/Setup-Ri7IU42o.js

@@ -0,0 +1,7 @@
+import{j as e}from"./jsx-runtime-CnH95YSl.js";import{useMDXComponents as o}from"./index-BeeV6X6A.js";import{M as i}from"./index-DfE121Jj.js";import"./index-NdkWRN8K.js";import"./_commonjsHelpers-gnU0ypJ3.js";import"./iframe-C7GWUW76.js";import"./index-BJTM6NaI.js";import"./index-B5xazMy1.js";import"./index-DieBXP3Z.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";function r(t){const n={code:"code",h2:"h2",p:"p",pre:"pre",...o(),...t.components};return e.jsxs(e.Fragment,{children:[e.jsx(i,{}),`
+`,e.jsx(n.h2,{id:"generating-okta-test-language-files",children:"Generating Okta Test Language files"}),`
+`,e.jsxs(n.p,{children:["The ",e.jsx(n.code,{children:"*_ok_PL.properties"})," and ",e.jsx(n.code,{children:"*_ok_SK.properties"}),` will automatically be generated pre-commit if there are changes to the
+main `,e.jsx(n.code,{children:".properties"})," file."]}),`
+`,e.jsx(n.p,{children:"To manually generate them, run the following command:"}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-bash",children:`yarn generate:pseudoLocales
+`})})]})}function j(t={}){const{wrapper:n}={...o(),...t.components};return n?e.jsx(n,{...t,children:e.jsx(r,{...t})}):r(t)}export{j as default};

package/dist/assets/Shadow DOM-DK_1Epv_.js

@@ -0,0 +1,64 @@
+import{j as e}from"./jsx-runtime-CnH95YSl.js";import{useMDXComponents as s}from"./index-BeeV6X6A.js";import{M as r}from"./index-DfE121Jj.js";import"./index-NdkWRN8K.js";import"./_commonjsHelpers-gnU0ypJ3.js";import"./iframe-C7GWUW76.js";import"./index-BJTM6NaI.js";import"./index-B5xazMy1.js";import"./index-DieBXP3Z.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";function t(o){const n={code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...s(),...o.components};return e.jsxs(e.Fragment,{children:[e.jsx(r,{}),`
+`,e.jsx(n.h1,{id:"shadow-dom",children:"Shadow DOM"}),`
+`,e.jsx(n.h2,{id:"using-a-shadow-dom-with-odyssey",children:"Using a Shadow DOM with Odyssey"}),`
+`,e.jsx(n.p,{children:"Sometimes, you may need to sandbox your application's styles so Odyssey components show up correctly in other applications. This typically happens when other global styles are on the page."}),`
+`,e.jsx(n.p,{children:"To sandbox your application's styles, you need to use a Shadow DOM. We now recommend rendering into a Web Component which includes a Shadow DOM."}),`
+`,e.jsxs(n.p,{children:["Odyssey natively supports rendering React in a Web Component's Shadow DOM. Simply use the ",e.jsx(n.code,{children:"renderReactInWebComponent"})," in your app's top-level file (typically ",e.jsx(n.code,{children:"index.ts"}),"):"]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`import { renderReactInWebComponent } from "@okta/odyssey-react-mui/web-component";
+
+const appRootElement = document.createElement("div");
+const containerRootElement = document.getElementById("container-root");
+
+const reactElement = renderReactInWebComponent({
+  getReactComponent: ({ appRootElement, emotionRootElement }) => (
+    <OdysseyProvider
+      appRootElement={appRootElement}
+      emotionRootElement={emotionRootElement}
+    >
+      <App />
+    </OdysseyProvider>
+  ),
+  rootElement: containerRootElement,
+  webComponentChildren: appRootElement,
+});
+`})}),`
+`,e.jsxs(n.p,{children:[e.jsx(n.code,{children:"reactElement"})," is the actual rendered web component DOM node. To look inside, you'll need to use ",e.jsx(n.code,{children:"reactElement.shadowRoot"}),"."]}),`
+`,e.jsx(n.h2,{id:"advanced-usage-custom-emotion-cache",children:"Advanced Usage (Custom Emotion Cache)"}),`
+`,e.jsxs(n.p,{children:["If you are using a shadow DOM and a separate Emotion Cache in your application for other CSS styles within your app, you'll need to create an instance of ",e.jsx(n.code,{children:"Emotion"})," and supply it a container reference to the created ",e.jsx(n.code,{children:"emotionRootElement"})," above:"]}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-ts",children:`// utils.ts
+
+// Assumes the ID of the root element of your web application to be \`root\`
+// The ID of the \`emotionRoot\` style element is \`style-root\`
+
+import createEmotion from "@emotion/css/create-instance";
+
+export const getEmotionCss = () => {
+  const { css: emotionCss } = createEmotion({
+    container:
+      document
+        .querySelector("#root")
+        ?.shadowRoot?.querySelector("#style-root") || undefined,
+    key: "css",
+    nonce: window.cspNonce,
+    prepend: true,
+  });
+
+  return emotionCss;
+};
+`})}),`
+`,e.jsx(n.p,{children:"Then in your code, you can do something like:"}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`// MyComponent.tsx
+
+import { getEmotionCss } from "./utils";
+
+export const MyComponent = () => {
+  const emotionCss = getEmotionCss();
+
+  const componentStyle = css\`
+    backgroundcolor: white;
+  \`;
+
+  return <div className={componentStyle}>{/* ... */}</div>;
+};
+`})}),`
+`,e.jsxs(n.p,{children:["If you're using separate ",e.jsx(n.code,{children:"OdysseyThemeProvider"})," and ",e.jsx(n.code,{children:"OdysseyCacheProvider"})," components, both of those also take the ",e.jsx(n.code,{children:"appRootElement"})," element."]})]})}function j(o={}){const{wrapper:n}={...s(),...o.components};return n?e.jsx(n,{...o,children:e.jsx(t,{...o})}):t(o)}export{j as default};

package/dist/assets/Show-DXIrBgNq.js

@@ -0,0 +1 @@
+import{r}from"./index-NdkWRN8K.js";import{j as o}from"./jsx-runtime-CnH95YSl.js";import{S as a}from"./OdysseyThemeProvider-BykOaJq8.js";const n=r.forwardRef((e,l)=>o.jsx(a,{fill:"none",ref:l,viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",...e,children:o.jsx(o.Fragment,{children:o.jsx("path",{clipRule:"evenodd",d:"M3.43 12.813A12.814 12.814 0 0 1 3.069 12a14.153 14.153 0 0 1 1.966-3.38C6.506 6.762 8.746 5 12 5s5.494 1.761 6.966 3.62A14.152 14.152 0 0 1 20.932 12a14.151 14.151 0 0 1-1.966 3.38C17.494 17.238 15.254 19 12 19s-5.494-1.761-6.966-3.62a14.152 14.152 0 0 1-1.603-2.567Zm19.518-1.13L22 12c.949.316.949.317.948.317v.004l-.003.007-.008.024a7.012 7.012 0 0 1-.137.362 16.147 16.147 0 0 1-2.266 3.906C18.84 18.762 16.08 21 12 21c-4.08 0-6.84-2.239-8.534-4.38A16.15 16.15 0 0 1 1.2 12.715a10.039 10.039 0 0 1-.137-.362l-.008-.024-.002-.007-.001-.003c0-.001 0-.002.948-.318a91.698 91.698 0 0 1-.948-.317v-.004l.003-.007.008-.024.029-.08c.025-.067.06-.163.108-.282A16.15 16.15 0 0 1 3.466 7.38C5.16 5.24 7.92 3 12 3c4.08 0 6.84 2.239 8.534 4.38a16.147 16.147 0 0 1 2.266 3.906 10.026 10.026 0 0 1 .137.362l.008.024.002.007.001.003ZM2 12l-.949.316L.946 12l.105-.316L2 12Zm20 0 .949-.316.105.316-.105.316L22 12ZM9 12a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm3-5a5 5 0 1 0 0 10 5 5 0 0 0 0-10Z",fill:"currentColor",fillRule:"evenodd"})})})),s=r.memo(n);s.displayName="ShowIcon";export{s as M};

package/dist/assets/SideNav-CUpwLG1e.js

@@ -0,0 +1,85 @@
+import{j as e}from"./jsx-runtime-CnH95YSl.js";import{useMDXComponents as o}from"./index-BeeV6X6A.js";import"./index-6QUE-j0v.js";import"./index-DoKqiSdS.js";import{M as m,T as p,S as s,D as a,P as d,a as l}from"./index-DfE121Jj.js";import{S as i}from"./SideNav.stories-l5XPKDfB.js";import"./index-NdkWRN8K.js";import"./_commonjsHelpers-gnU0ypJ3.js";import"./preview-DXRUsonv.js";import"./iframe-C7GWUW76.js";import"./DocsRenderer-CFRXHY34-kO-n-5EB.js";import"./client-ByW5HbEz.js";import"./index-DieBXP3Z.js";import"./index-BJTM6NaI.js";import"./index-B5xazMy1.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";import"./index-B-lxVbXh.js";import"./v4-CtRu48qb.js";import"./index-BJMTVygn.js";import"./PlaceholderLogo-JfVvgA23.js";import"./OdysseyStorybookThemeDecorator-CGH8visK.js";import"./OdysseyThemeProvider-BykOaJq8.js";import"./OdysseyProvider-BPLFYiwr.js";import"./SideNav-QMiST_j6.js";import"./utilities.esm-DpQ0TZP_.js";import"./Typography-B7ktrxCD.js";import"./Typography-CSpPZFTF.js";import"./UiShellProvider-Bm9plvoZ.js";import"./useMountLifecycleEffect-CjsUCFhB.js";import"./uiShellSharedConstants-DD9UP82e.js";import"./useUniqueId-Bsgqe1tm.js";import"./createUniqueId-ByTaVY63.js";import"./AccordionSummary-Byc6MkHu.js";import"./useSlot-VN2O4BOA.js";import"./resolveComponentProps-TTQVZ4OZ.js";import"./isHostComponent-DVu5iVWx.js";import"./useIsFocusVisible-DH0qxT5e.js";import"./useControlled-NQulfz4l.js";import"./Collapse-DtQCvyEw.js";import"./utils-BdcLUgCD.js";import"./inheritsLoose-DTTkq0Su.js";import"./TransitionGroupContext-DAL84N7p.js";import"./Paper-DwBg74qy.js";import"./ButtonBase-CrcIXP69.js";import"./assertThisInitialized-B9jnkVVz.js";import"./Box-B-R2QRDU.js";import"./Box-B6KmU4_J.js";import"./Link-BQo2zH0c.js";import"./Link-DcsndbPK.js";import"./ExternalLink-lox07hAR.js";import"./Skeleton-DAUyPclv.js";import"./colorManipulator-C6C6_xuT.js";import"./Badge-DFZYqSZN.js";import"./Status-CdgTiE4c.js";import"./MuiPropsContext-DhRylJZk.js";import"./Chip-B9WkuA4b.js";import"./createSvgIcon-Bv_3NNsK.js";import"./ChevronRight-BLkvXBUf.js";import"./Tooltip-DQDBPKMu.js";import"./Tooltip-D_pBGtcj.js";import"./Grow-6R6cTzr4.js";import"./getReactElementRef-Bs64nbeG.js";import"./Popper-CSwIGEpk.js";import"./popper-aiaZgC6t.js";import"./ownerDocument-DW-IO8s5.js";import"./Portal-CsPQSHsR.js";import"./Button-BvUGu5Sm.js";import"./Server-DS5iERo2.js";import"./User-CvYTA860.js";import"./Home-CUQc6tB8.js";import"./Folder-8esChg_E.js";import"./Download-VHpUH0as.js";import"./Clock-8HOQy_d4.js";import"./Settings-SRsJGOHl.js";function r(n){const t={code:"code",h4:"h4",p:"p",pre:"pre",...o(),...n.components};return e.jsxs(e.Fragment,{children:[e.jsx(m,{of:i}),`
+`,e.jsx(p,{of:i}),`
+`,e.jsx(s,{of:i}),`
+`,e.jsx(a,{of:i}),`
+`,e.jsx(d,{of:i}),`
+`,e.jsx(t.h4,{id:"sidenavitems",children:"sideNavItems"}),`
+`,e.jsxs(t.p,{children:["the ",e.jsx(t.code,{children:"sideNavItems"})," prop takes an array of objects with type ",e.jsx(t.code,{children:"SideNavItem"})]}),`
+`,e.jsx(t.pre,{children:e.jsx(t.code,{children:`type SideNavItem = {
+  id: string;
+  label: string;
+  /**
+   * The icon element to display at the end of the Nav Item
+   */
+  endIcon?: ReactElement;
+  /**
+   * Whether the item is disabled. When set to true the nav item is set to Disabled color,
+   * the link/item is not clickable, and item with children is not expandable.
+   */
+  isDisabled?: boolean;
+  /**
+   * Whether the item is active/selected
+   */
+  isSelected?: boolean;
+  /**
+   * Event fired when the nav item is clicked
+   */
+  onClick?(): void;
+  /**
+   * The status element to display after the label
+   */
+  severity?: (typeof statusSeverityValues)[number];
+  /**
+   * The icon element to display at the start of the Nav Item
+   */
+  startIcon?: ReactElement;
+  /**
+   * The label to display inside the status
+   */
+  statusLabel?: string;
+  /**
+   * The link target prop. e.g., "_blank"
+   */
+  target?: string;
+} & (
+  | {
+      /**
+       * Determines if the side nav item is a section header
+       */
+      isSectionHeader: true;
+      href?: never;
+      children?: never;
+      isDefaultExpanded?: never;
+      isExpanded?: never;
+    }
+  | {
+      /**
+       * link added to the nav item. if it is undefined, static text will be displayed.
+       * fires onClick event when it is passed
+       */
+      href: string;
+      children?: never;
+      isSectionHeader?: never;
+      isDefaultExpanded?: never;
+      isExpanded?: never;
+    }
+  | {
+      /**
+       * An array of side nav items to be displayed as children within Accordion
+       */
+      children?: SideNavItem[];
+      /**
+       * Whether the accordion (nav item with children) is expanded by default
+       */
+      isDefaultExpanded?: boolean;
+      /**
+       * If true, expands the accordion, otherwise collapse it.
+       * Setting this prop enables control over the accordion.
+       */
+      isExpanded?: boolean;
+      isSectionHeader?: never;
+      href?: never;
+    }
+);
+`})}),`
+`,e.jsx(l,{})]})}function He(n={}){const{wrapper:t}={...o(),...n.components};return t?e.jsx(t,{...n,children:e.jsx(r,{...n})}):r(n)}export{He as default};