@okta/odyssey-react-mui 1.47.0 → 1.48.0

package/dist/assets/MenuButton.stories-rLpv4nq1.js

@@ -0,0 +1,246 @@
+import{j as n}from"./jsx-runtime-CnH95YSl.js";import{w as f,e as L,u as hn,a as gn}from"./index-BJMTVygn.js";import{a as Mn}from"./axeRun-B-LchFqf.js";import{i as k}from"./iconUtils-C1HBA-0w.js";import{O as bn}from"./OdysseyStorybookThemeDecorator-CGH8visK.js";import{f as yn}from"./fieldComponentPropsMetaData-BqbNLw6V.js";import{m as j}from"./BaseMenuButton-DCwowxQ6.js";import{b as v}from"./BaseButton-Cd1oZPsh.js";import{M as un}from"./MenuButton-DvVmjwMC.js";import{M as e}from"./MenuItem-DoUaLmgU.js";import{L as w}from"./ListSubheader-DO359rMr.js";import{D as ln}from"./Divider-CAwVs6Y1.js";import{M as I}from"./Box-B-R2QRDU.js";import{f as xn,c as s,a as E}from"./Typography-B7ktrxCD.js";import{M as c}from"./Link-BQo2zH0c.js";import{a as Bn}from"./index-DkrUiDVY.js";import{u as In}from"./OdysseyThemeProvider-BykOaJq8.js";import{M as mn}from"./Group-DWmiPyzE.js";import{M as fn}from"./Globe-BHk1B5d7.js";import{M as Ln}from"./Calendar-DnwsjheN.js";const i=({children:o})=>{const t=In();return n.jsx(I,{sx:{marginBottom:t.Spacing4},children:o})},kn={component:un,decorators:[bn],tags:["autodocs"],argTypes:{ariaDescribedBy:{control:"text",description:"The ID of the element that describes the MenuButton, if one exists.",table:{type:{summary:"string"}}},ariaLabel:{control:"text",description:"aria-label to describe the MenuButton when the button label is empty",table:{type:{summary:"string"}}},ariaLabelledBy:{control:"text",description:"The ID of the element that labels the MenuButton. Only needed if the button has no text and `ariaLabel` is empty.",table:{type:{summary:"string"}}},buttonLabel:{control:"text",description:"The label on the triggering Button",table:{type:{summary:"string"}}},buttonVariant:{options:v,control:{type:"radio"},description:"The variant of the triggering Button",table:{type:{summary:v.join(" | ")},defaultValue:{summary:"secondary"}}},children:{control:"object",description:"The <MenuItem> components within the Menu",table:{type:{summary:"[MenuItem | Divider | ListSubheader | NullElement]"}},type:{required:!1,name:"other",value:"[MenuItem | Divider | ListSubheader]"}},popoverContent:{control:"object",description:"The contents to display in the popover (instead of children)",table:{type:{summary:"[ReactNode | NullElement]"}},type:{required:!1,name:"other",value:"ReactNode"}},endIcon:{control:{type:"select"},options:Object.keys(k),mapping:k,description:"The end Icon on the triggering Button",table:{type:{summary:"<Icon />"}}},id:{control:"text",description:"The id of the Button",table:{type:{summary:"string"}}},isDisabled:yn.isDisabled,isOverflow:{control:"boolean",description:"If the MenuButton is an overflow menu or standard menu.",table:{type:{summary:"boolean"}}},menuAlignment:{options:j,control:{type:"radio"},description:"The horizontal alignment of the menu.",table:{type:{summary:j.join(" | ")},defaultValue:{summary:"left"}}},tooltipText:{control:"text",description:"If defined, the button will include a tooltip that contains the string.",table:{type:{summary:"string"}}}},args:{buttonLabel:"More actions",buttonVariant:"secondary",menuAlignment:"left"}},B=({canvasElement:o,step:t})=>async(a,r)=>{const dn=f(o);await t("open menu button",async()=>{const pn=dn.getByRole("button",{name:a.buttonLabel});hn.click(pn),await gn(async()=>Mn(r))})},u={args:{buttonLabel:"More actions",children:[n.jsx(e,{children:"View details"},"1"),n.jsx(e,{children:"Edit configuration"},"2"),n.jsx(e,{children:"Launch"},"3")]},play:async({args:o,canvasElement:t,step:a})=>{await B({canvasElement:t,step:a})(o,"Menu Button Simple")}},l={args:{children:[n.jsxs(e,{isDisabled:!0,children:[n.jsx(mn,{}),"Assign crew"]},"1"),n.jsxs(e,{children:[n.jsx(fn,{}),"View destination"]},"2"),n.jsxs(e,{children:[n.jsx(Ln,{}),"Schedule launch"]},"3")]},play:async({args:o,canvasElement:t,step:a})=>{await B({canvasElement:t,step:a})(o,"Menu Button Action Icons")}},m={args:{buttonLabel:"More actions",buttonVariant:"floating",children:[n.jsx(e,{children:"View details"},"1"),n.jsx(e,{children:"Edit configuration"},"2"),n.jsx(e,{children:"Launch"},"3")],id:"floating"},play:async({canvasElement:o,step:t})=>{await t("Filter and Select from listbox",async()=>{const r=f(o).getByRole("button",{name:"More actions"});await L(r).toHaveAttribute("id","floating-button")})}},d={args:{buttonLabel:"More actions",children:[n.jsx(w,{children:"Crew"},"sh1"),n.jsx(e,{children:"Assign captain"},"1"),n.jsx(e,{children:"View roster"},"2"),n.jsx(w,{children:"Ship"},"sh2"),n.jsx(e,{children:"Configure thrusters"},"3"),n.jsx(e,{children:"View cargo"},"4"),n.jsx(ln,{},"div2"),n.jsx(e,{children:"Log out"},"5")]},play:async({args:o,canvasElement:t,step:a})=>{await B({canvasElement:t,step:a})(o,"Menu Button Groupings")}},p={args:{buttonLabel:"Cargo options",children:[n.jsx(e,{children:"View details"},"1"),n.jsx(e,{children:"Edit inventory"},"2"),n.jsx(e,{variant:"destructive",children:"Jettison cargo"},"3")]},play:async({args:o,canvasElement:t,step:a})=>{await B({canvasElement:t,step:a})(o,"Menu Button Destructive")}},h={args:{ariaLabel:"More actions",buttonLabel:"",children:[n.jsx(e,{children:"View details"},"1"),n.jsx(e,{children:"Edit configuration"},"2"),n.jsx(e,{children:"Launch"},"3")],tooltipText:"More actions"},play:async({canvasElement:o,step:t})=>{await t("MenuButton Aria-Label",async()=>{const r=f(o).queryByRole("button",{name:"More actions"});await L(r).not.toBeNull()})}},g={args:{ariaLabel:"More actions",endIcon:n.jsx(mn,{}),children:[n.jsx(e,{children:"View details"},"1"),n.jsx(e,{children:"Edit configuration"},"2"),n.jsx(e,{children:"Launch"},"3")],tooltipText:"Learn more"}},M={args:{buttonLabel:"Cargo options",children:[n.jsx(e,{children:"View details"},"1"),n.jsx(e,{children:"Edit configuration"},"2"),n.jsx(e,{children:"Launch"},"3")],isOverflow:!0}},b={args:{buttonLabel:"Cargo options",isDisabled:!0,children:[n.jsx(e,{children:"View details"},"1"),n.jsx(e,{children:"Edit configuration"},"2"),n.jsx(e,{children:"Launch"},"3")],tooltipText:"More actions"}},y={args:{buttonVariant:"secondary",children:[n.jsx(e,{children:"View details"},"1"),n.jsx(e,{children:"Edit configuration"},"2"),n.jsx(e,{children:"Launch"},"3")],menuAlignment:"right"},render:function(t){return n.jsx(I,{sx:{ml:"50px"},children:n.jsx(un,{buttonLabel:"More actions",buttonVariant:t.buttonVariant,menuAlignment:t.menuAlignment,children:t.children})})},play:async({args:o,canvasElement:t,step:a})=>{await B({canvasElement:t,step:a})(o,"Menu Button Alignment")}},x={args:{buttonLabel:"",endIcon:n.jsx(Bn,{}),buttonVariant:"secondary",popoverContent:[n.jsxs(I,{sx:{minWidth:"392px"},children:[n.jsxs(i,{children:[n.jsx(xn,{children:"Title"}),n.jsx(s,{children:"Caption"}),n.jsx(E,{children:"Body"})]}),n.jsxs(i,{children:[n.jsx(c,{href:"#",target:"_blank",children:"Link"}),n.jsx(s,{children:"Caption"})]}),n.jsxs(i,{children:[n.jsx(c,{href:"#",target:"_blank",children:"Link"}),n.jsx(s,{children:"Caption"})]}),n.jsxs(i,{children:[n.jsx(c,{href:"#",target:"_blank",children:"Link"}),n.jsx(s,{children:"Caption"})]}),n.jsxs(i,{children:[n.jsx(c,{href:"#",target:"_blank",children:"Link"}),n.jsx(s,{children:"Caption"})]}),n.jsxs(i,{children:[n.jsx(c,{href:"#",target:"_blank",children:"Link"}),n.jsx(s,{children:"Caption"})]}),n.jsx(i,{children:n.jsx(ln,{})}),n.jsx(I,{sx:{fontWeight:"bold"},children:n.jsxs(E,{children:["Body"," ",n.jsx(c,{href:"#",target:"_blank",children:"Link"})]})})]},"help-popover-content")],id:"floating",tooltipText:"More actions"},play:async({canvasElement:o,step:t})=>{await t("MenuButton Aria-Label",()=>{const r=f(o).queryByRole("button",{name:"More actions"});L(r).not.toBeNull()})}};var S,V,P;u.parameters={...u.parameters,docs:{...(S=u.parameters)==null?void 0:S.docs,source:{originalSource:`{
+  args: {
+    buttonLabel: "More actions",
+    children: [<MenuItem key="1">View details</MenuItem>, <MenuItem key="2">Edit configuration</MenuItem>, <MenuItem key="3">Launch</MenuItem>]
+  },
+  play: async ({
+    args,
+    canvasElement,
+    step
+  }: {
+    args: MenuButtonProps;
+    canvasElement: HTMLElement;
+    step: PlaywrightProps<MenuButtonProps>["step"];
+  }) => {
+    await clickMenuButton({
+      canvasElement,
+      step
+    })(args, "Menu Button Simple");
+  }
+}`,...(P=(V=u.parameters)==null?void 0:V.docs)==null?void 0:P.source}}};var C,T,A;l.parameters={...l.parameters,docs:{...(C=l.parameters)==null?void 0:C.docs,source:{originalSource:`{
+  args: {
+    children: [<MenuItem isDisabled key="1">
+        <GroupIcon />
+        Assign crew
+      </MenuItem>, <MenuItem key="2">
+        <GlobeIcon />
+        View destination
+      </MenuItem>, <MenuItem key="3">
+        <CalendarIcon />
+        Schedule launch
+      </MenuItem>]
+  },
+  play: async ({
+    args,
+    canvasElement,
+    step
+  }: {
+    args: MenuButtonProps;
+    canvasElement: HTMLElement;
+    step: PlaywrightProps<MenuButtonProps>["step"];
+  }) => {
+    await clickMenuButton({
+      canvasElement,
+      step
+    })(args, "Menu Button Action Icons");
+  }
+}`,...(A=(T=l.parameters)==null?void 0:T.docs)==null?void 0:A.source}}};var D,W,_;m.parameters={...m.parameters,docs:{...(D=m.parameters)==null?void 0:D.docs,source:{originalSource:`{
+  args: {
+    buttonLabel: "More actions",
+    buttonVariant: "floating",
+    children: [<MenuItem key="1">View details</MenuItem>, <MenuItem key="2">Edit configuration</MenuItem>, <MenuItem key="3">Launch</MenuItem>],
+    id: "floating"
+  },
+  play: async ({
+    canvasElement,
+    step
+  }: PlaywrightProps<MenuButtonProps>) => {
+    await step("Filter and Select from listbox", async () => {
+      const canvas = within(canvasElement);
+      const button = canvas.getByRole("button", {
+        name: "More actions"
+      });
+      await expect(button).toHaveAttribute("id", "floating-button");
+    });
+  }
+}`,...(_=(W=m.parameters)==null?void 0:W.docs)==null?void 0:_.source}}};var z,O,H;d.parameters={...d.parameters,docs:{...(z=d.parameters)==null?void 0:z.docs,source:{originalSource:`{
+  args: {
+    buttonLabel: "More actions",
+    children: [<ListSubheader key="sh1">Crew</ListSubheader>, <MenuItem key="1">Assign captain</MenuItem>, <MenuItem key="2">View roster</MenuItem>, <ListSubheader key="sh2">Ship</ListSubheader>, <MenuItem key="3">Configure thrusters</MenuItem>, <MenuItem key="4">View cargo</MenuItem>, <Divider key="div2" />, <MenuItem key="5">Log out</MenuItem>]
+  },
+  play: async ({
+    args,
+    canvasElement,
+    step
+  }: {
+    args: MenuButtonProps;
+    canvasElement: HTMLElement;
+    step: PlaywrightProps<MenuButtonProps>["step"];
+  }) => {
+    await clickMenuButton({
+      canvasElement,
+      step
+    })(args, "Menu Button Groupings");
+  }
+}`,...(H=(O=d.parameters)==null?void 0:O.docs)==null?void 0:H.source}}};var R,G,N;p.parameters={...p.parameters,docs:{...(R=p.parameters)==null?void 0:R.docs,source:{originalSource:`{
+  args: {
+    buttonLabel: "Cargo options",
+    children: [<MenuItem key="1">View details</MenuItem>, <MenuItem key="2">Edit inventory</MenuItem>, <MenuItem key="3" variant="destructive">
+        Jettison cargo
+      </MenuItem>]
+  },
+  play: async ({
+    args,
+    canvasElement,
+    step
+  }: {
+    args: MenuButtonProps;
+    canvasElement: HTMLElement;
+    step: PlaywrightProps<MenuButtonProps>["step"];
+  }) => {
+    await clickMenuButton({
+      canvasElement,
+      step
+    })(args, "Menu Button Destructive");
+  }
+}`,...(N=(G=p.parameters)==null?void 0:G.docs)==null?void 0:N.source}}};var q,F,J;h.parameters={...h.parameters,docs:{...(q=h.parameters)==null?void 0:q.docs,source:{originalSource:`{
+  args: {
+    ariaLabel: "More actions",
+    buttonLabel: "",
+    children: [<MenuItem key="1">View details</MenuItem>, <MenuItem key="2">Edit configuration</MenuItem>, <MenuItem key="3">Launch</MenuItem>],
+    tooltipText: "More actions"
+  },
+  play: async ({
+    canvasElement,
+    step
+  }: PlaywrightProps<MenuButtonProps>) => {
+    await step("MenuButton Aria-Label", async () => {
+      const canvas = within(canvasElement);
+      const menuButton = canvas.queryByRole("button", {
+        name: "More actions"
+      });
+      await expect(menuButton).not.toBeNull();
+    });
+  }
+}`,...(J=(F=h.parameters)==null?void 0:F.docs)==null?void 0:J.source}}};var Q,K,U;g.parameters={...g.parameters,docs:{...(Q=g.parameters)==null?void 0:Q.docs,source:{originalSource:`{
+  args: {
+    ariaLabel: "More actions",
+    endIcon: <GroupIcon />,
+    children: [<MenuItem key="1">View details</MenuItem>, <MenuItem key="2">Edit configuration</MenuItem>, <MenuItem key="3">Launch</MenuItem>],
+    tooltipText: "Learn more"
+  }
+}`,...(U=(K=g.parameters)==null?void 0:K.docs)==null?void 0:U.source}}};var X,Y,Z;M.parameters={...M.parameters,docs:{...(X=M.parameters)==null?void 0:X.docs,source:{originalSource:`{
+  args: {
+    buttonLabel: "Cargo options",
+    children: [<MenuItem key="1">View details</MenuItem>, <MenuItem key="2">Edit configuration</MenuItem>, <MenuItem key="3">Launch</MenuItem>],
+    isOverflow: true
+  }
+}`,...(Z=(Y=M.parameters)==null?void 0:Y.docs)==null?void 0:Z.source}}};var $,nn,en;b.parameters={...b.parameters,docs:{...($=b.parameters)==null?void 0:$.docs,source:{originalSource:`{
+  args: {
+    buttonLabel: "Cargo options",
+    isDisabled: true,
+    children: [<MenuItem key="1">View details</MenuItem>, <MenuItem key="2">Edit configuration</MenuItem>, <MenuItem key="3">Launch</MenuItem>],
+    tooltipText: "More actions"
+  }
+}`,...(en=(nn=b.parameters)==null?void 0:nn.docs)==null?void 0:en.source}}};var tn,on,an;y.parameters={...y.parameters,docs:{...(tn=y.parameters)==null?void 0:tn.docs,source:{originalSource:`{
+  args: {
+    buttonVariant: "secondary",
+    children: [<MenuItem key="1">View details</MenuItem>, <MenuItem key="2">Edit configuration</MenuItem>, <MenuItem key="3">Launch</MenuItem>],
+    menuAlignment: "right"
+  },
+  render: function C(props: MenuButtonProps) {
+    return <Box sx={{
+      ml: "50px"
+    }}>
+        <MenuButton buttonLabel="More actions" buttonVariant={props.buttonVariant} menuAlignment={props.menuAlignment}>
+          {props.children}
+        </MenuButton>
+      </Box>;
+  },
+  play: async ({
+    args,
+    canvasElement,
+    step
+  }: {
+    args: MenuButtonProps;
+    canvasElement: HTMLElement;
+    step: PlaywrightProps<MenuButtonProps>["step"];
+  }) => {
+    await clickMenuButton({
+      canvasElement,
+      step
+    })(args, "Menu Button Alignment");
+  }
+}`,...(an=(on=y.parameters)==null?void 0:on.docs)==null?void 0:an.source}}};var rn,sn,cn;x.parameters={...x.parameters,docs:{...(rn=x.parameters)==null?void 0:rn.docs,source:{originalSource:`{
+  args: {
+    buttonLabel: "",
+    endIcon: <QuestionCircleIcon />,
+    buttonVariant: "secondary",
+    popoverContent: [<Box key="help-popover-content" sx={{
+      minWidth: "392px"
+    }}>
+        <BoxWithBottomMargin>
+          <Heading5>Title</Heading5>
+          <Subordinate>Caption</Subordinate>
+          <Paragraph>Body</Paragraph>
+        </BoxWithBottomMargin>
+        <BoxWithBottomMargin>
+          <Link href="#" target="_blank">
+            Link
+          </Link>
+          <Subordinate>Caption</Subordinate>
+        </BoxWithBottomMargin>
+        <BoxWithBottomMargin>
+          <Link href="#" target="_blank">
+            Link
+          </Link>
+          <Subordinate>Caption</Subordinate>
+        </BoxWithBottomMargin>
+        <BoxWithBottomMargin>
+          <Link href="#" target="_blank">
+            Link
+          </Link>
+          <Subordinate>Caption</Subordinate>
+        </BoxWithBottomMargin>
+        <BoxWithBottomMargin>
+          <Link href="#" target="_blank">
+            Link
+          </Link>
+          <Subordinate>Caption</Subordinate>
+        </BoxWithBottomMargin>
+        <BoxWithBottomMargin>
+          <Link href="#" target="_blank">
+            Link
+          </Link>
+          <Subordinate>Caption</Subordinate>
+        </BoxWithBottomMargin>
+        <BoxWithBottomMargin>
+          <Divider />
+        </BoxWithBottomMargin>
+        <Box sx={{
+        fontWeight: "bold"
+      }}>
+          <Paragraph>
+            Body{" "}
+            <Link href="#" target="_blank">
+              Link
+            </Link>
+          </Paragraph>
+        </Box>
+      </Box>],
+    id: "floating",
+    tooltipText: "More actions"
+  },
+  play: async ({
+    canvasElement,
+    step
+  }: PlaywrightProps<MenuButtonProps>) => {
+    await step("MenuButton Aria-Label", () => {
+      const canvas = within(canvasElement);
+      const menuButton = canvas.queryByRole("button", {
+        name: "More actions"
+      });
+      expect(menuButton).not.toBeNull();
+    });
+  }
+}`,...(cn=(sn=x.parameters)==null?void 0:sn.docs)==null?void 0:cn.source}}};const jn=["Simple","ActionIcons","ButtonVariant","Groupings","WithDestructive","IconButton","EndIcon","Overflow","Disabled","Alignment","HelpPopover"],Jn=Object.freeze(Object.defineProperty({__proto__:null,ActionIcons:l,Alignment:y,ButtonVariant:m,Disabled:b,EndIcon:g,Groupings:d,HelpPopover:x,IconButton:h,Overflow:M,Simple:u,WithDestructive:p,__namedExportsOrder:jn,default:kn},Symbol.toStringTag,{value:"Module"}));export{Jn as M};

package/dist/{esm/Pagination/index.js → assets/MenuContext-DKMyPMNY.js}

@@ -1,4 +1,4 @@
-/*!
+import{r as e}from"./index-NdkWRN8K.js";/*!
  * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
  * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
  *
@@ -8,9 +8,4 @@
  * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  *
  * See the License for the specific language governing permissions and limitations under the License.
- */
-
-export { paginationTypeValues } from "./constants.js";
-export * from "./Pagination.js";
-export { usePagination } from "./usePagination.js";
-//# sourceMappingURL=index.js.map
+ */const o=e.createContext({closeMenu:()=>{},openMenu:()=>{},shouldCloseOnSelect:!0});export{o as M};

package/dist/assets/MenuItem-DoUaLmgU.js

@@ -0,0 +1 @@
+import{r as t}from"./index-NdkWRN8K.js";import{M}from"./MenuContext-DKMyPMNY.js";import{j as f}from"./jsx-runtime-CnH95YSl.js";import{M as x}from"./MenuItem-oi_JaUho.js";import{m as I}from"./OdysseyThemeProvider-BykOaJq8.js";const p=({children:o,hasInitialFocus:u,isSelected:s,isDisabled:n,onClick:e,testId:r,value:d,variant:c="default"})=>{const{closeMenu:a,shouldCloseOnSelect:m}=t.useContext(M),i=t.useCallback(l=>{e==null||e(l),m&&a()},[e,a,m]);return f.jsx(x,{"aria-current":s,autoFocus:u,className:c==="destructive"?`${I.root}-destructive`:void 0,"data-se":r,disabled:n,onClick:i,selected:s,tabIndex:0,value:d,children:o})},b=t.memo(p);b.displayName="MenuItem";export{b as M};

package/dist/assets/MenuItem-oi_JaUho.js

@@ -0,0 +1 @@
+import{c as V,_ as E,a as F,b as n,s as G,d as x,f as L,l as T,r as w,n as c,o as C,p as $,q as I,m as i}from"./OdysseyThemeProvider-BykOaJq8.js";import{r as d}from"./index-NdkWRN8K.js";import{a as O}from"./List-_p0jkXPM.js";import{j as M}from"./jsx-runtime-CnH95YSl.js";import{u as _}from"./useIsFocusVisible-DH0qxT5e.js";import{B as D}from"./ButtonBase-CrcIXP69.js";const H=["autoFocus","component","dense","divider","disableGutters","focusVisibleClassName","role","tabIndex","className"],S=(a,e)=>{const{ownerState:s}=a;return[e.root,s.dense&&e.dense,s.divider&&e.divider,!s.disableGutters&&e.gutters]},z=a=>{const{disabled:e,dense:s,divider:t,disableGutters:l,selected:p,classes:o}=a,r=L({root:["root",s&&"dense",e&&"disabled",!l&&"gutters",t&&"divider",p&&"selected"]},T,o);return n({},o,r)},U=G(D,{shouldForwardProp:a=>w(a)||a==="classes",name:"MuiMenuItem",slot:"Root",overridesResolver:S})(({theme:a,ownerState:e})=>n({},a.typography.body1,{display:"flex",justifyContent:"flex-start",alignItems:"center",position:"relative",textDecoration:"none",minHeight:48,paddingTop:6,paddingBottom:6,boxSizing:"border-box",whiteSpace:"nowrap"},!e.disableGutters&&{paddingLeft:16,paddingRight:16},e.divider&&{borderBottom:`1px solid ${(a.vars||a).palette.divider}`,backgroundClip:"padding-box"},{"&:hover":{textDecoration:"none",backgroundColor:(a.vars||a).palette.action.hover,"@media (hover: none)":{backgroundColor:"transparent"}},[`&.${i.selected}`]:{backgroundColor:a.vars?`rgba(${a.vars.palette.primary.mainChannel} / ${a.vars.palette.action.selectedOpacity})`:c.alpha(a.palette.primary.main,a.palette.action.selectedOpacity),[`&.${i.focusVisible}`]:{backgroundColor:a.vars?`rgba(${a.vars.palette.primary.mainChannel} / calc(${a.vars.palette.action.selectedOpacity} + ${a.vars.palette.action.focusOpacity}))`:c.alpha(a.palette.primary.main,a.palette.action.selectedOpacity+a.palette.action.focusOpacity)}},[`&.${i.selected}:hover`]:{backgroundColor:a.vars?`rgba(${a.vars.palette.primary.mainChannel} / calc(${a.vars.palette.action.selectedOpacity} + ${a.vars.palette.action.hoverOpacity}))`:c.alpha(a.palette.primary.main,a.palette.action.selectedOpacity+a.palette.action.hoverOpacity),"@media (hover: none)":{backgroundColor:a.vars?`rgba(${a.vars.palette.primary.mainChannel} / ${a.vars.palette.action.selectedOpacity})`:c.alpha(a.palette.primary.main,a.palette.action.selectedOpacity)}},[`&.${i.focusVisible}`]:{backgroundColor:(a.vars||a).palette.action.focus},[`&.${i.disabled}`]:{opacity:(a.vars||a).palette.action.disabledOpacity},[`& + .${I.root}`]:{marginTop:a.spacing(1),marginBottom:a.spacing(1)},[`& + .${I.inset}`]:{marginLeft:52},[`& .${$.root}`]:{marginTop:0,marginBottom:0},[`& .${$.inset}`]:{paddingLeft:36},[`& .${C.root}`]:{minWidth:36}},!e.dense&&{[a.breakpoints.up("sm")]:{minHeight:"auto"}},e.dense&&n({minHeight:32,paddingTop:4,paddingBottom:4},a.typography.body2,{[`& .${C.root} svg`]:{fontSize:"1.25rem"}}))),X=d.forwardRef(function(e,s){const t=V({props:e,name:"MuiMenuItem"}),{autoFocus:l=!1,component:p="li",dense:o=!1,divider:b=!1,disableGutters:r=!1,focusVisibleClassName:k,role:R="menuitem",tabIndex:v,className:B}=t,j=E(t,H),m=d.useContext(O),g=d.useMemo(()=>({dense:o||m.dense||!1,disableGutters:r}),[m.dense,o,r]),u=d.useRef(null);F(()=>{l&&u.current&&u.current.focus()},[l]);const N=n({},t,{dense:g.dense,divider:b,disableGutters:r}),f=z(t),P=_(u,s);let y;return t.disabled||(y=v!==void 0?v:-1),M.jsx(O.Provider,{value:g,children:M.jsx(U,n({ref:P,role:R,tabIndex:y,component:p,focusVisibleClassName:x(f.focusVisible,k),className:x(f.root,B)},j,{ownerState:N,classes:f}))})});export{X as M};

package/dist/assets/MenuItem.stories-Ba6BR5kj.js

@@ -0,0 +1,29 @@
+import{j as r}from"./jsx-runtime-CnH95YSl.js";import{r as I}from"./index-NdkWRN8K.js";import{O as v}from"./OdysseyStorybookThemeDecorator-CGH8visK.js";import{f as D}from"./fieldComponentPropsMetaData-BqbNLw6V.js";import{M as g}from"./MenuItem-DoUaLmgU.js";import{M as x}from"./Menu-CU_mHT7L.js";import"./_commonjsHelpers-gnU0ypJ3.js";import"./OdysseyThemeProvider-BykOaJq8.js";import"./index-BJTM6NaI.js";import"./OdysseyProvider-BPLFYiwr.js";import"./MenuContext-DKMyPMNY.js";import"./MenuItem-oi_JaUho.js";import"./List-_p0jkXPM.js";import"./useIsFocusVisible-DH0qxT5e.js";import"./ButtonBase-CrcIXP69.js";import"./assertThisInitialized-B9jnkVVz.js";import"./inheritsLoose-DTTkq0Su.js";import"./TransitionGroupContext-DAL84N7p.js";import"./getReactElementRef-Bs64nbeG.js";import"./resolveComponentProps-TTQVZ4OZ.js";import"./isHostComponent-DVu5iVWx.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";const ie={component:g,decorators:[v],tags:["autodocs"],argTypes:{children:{control:"object",description:"The content for the `MenuItem` components within the Menu",table:{type:{summary:"ReactNode"}},type:{required:!0,name:"other",value:"ReactNode"}},hasInitialFocus:{control:"boolean",description:"If `true`, focuses the item when the parent menu opens",table:{type:{summary:"boolean"}}},isDisabled:D.isDisabled,isSelected:{control:"boolean",description:"If `true`, the menu item will be visually marked as selected.",table:{type:{summary:"boolean"}}},variant:{options:["default","destructive"],control:{type:"radio"},description:"The variant of the triggering Button",table:{type:{summary:["default","destructive"].join(" | ")},defaultValue:{summary:"default"}}}},args:{children:"MenuItem content"}},a=t=>{const e=I.useRef(null);return r.jsx("div",{ref:e,children:r.jsx(x,{anchorEl:e.current,open:!0,children:r.jsx(g,{...t,children:t.children})})})},o={render:function(e){return r.jsx(a,{...e})}},n={args:{variant:"destructive",children:"Destructive MenuItem"},render:function(e){return r.jsx(a,{...e})}},s={args:{isDisabled:!0,children:"Disabled MenuItem"},render:function(e){return r.jsx(a,{...e})}},i={args:{isSelected:!0,children:"Selected MenuItem"},render:function(e){return r.jsx(a,{...e})}};var m,p,c;o.parameters={...o.parameters,docs:{...(m=o.parameters)==null?void 0:m.docs,source:{originalSource:`{
+  render: function C(props: MenuItemProps) {
+    return <BaseStory {...props} />;
+  }
+}`,...(c=(p=o.parameters)==null?void 0:p.docs)==null?void 0:c.source}}};var u,d,l;n.parameters={...n.parameters,docs:{...(u=n.parameters)==null?void 0:u.docs,source:{originalSource:`{
+  args: {
+    variant: "destructive",
+    children: "Destructive MenuItem"
+  },
+  render: function C(props: MenuItemProps) {
+    return <BaseStory {...props} />;
+  }
+}`,...(l=(d=n.parameters)==null?void 0:d.docs)==null?void 0:l.source}}};var f,h,y;s.parameters={...s.parameters,docs:{...(f=s.parameters)==null?void 0:f.docs,source:{originalSource:`{
+  args: {
+    isDisabled: true,
+    children: "Disabled MenuItem"
+  },
+  render: function C(props: MenuItemProps) {
+    return <BaseStory {...props} />;
+  }
+}`,...(y=(h=s.parameters)==null?void 0:h.docs)==null?void 0:y.source}}};var b,M,S;i.parameters={...i.parameters,docs:{...(b=i.parameters)==null?void 0:b.docs,source:{originalSource:`{
+  args: {
+    isSelected: true,
+    children: "Selected MenuItem"
+  },
+  render: function C(props: MenuItemProps) {
+    return <BaseStory {...props} />;
+  }
+}`,...(S=(M=i.parameters)==null?void 0:M.docs)==null?void 0:S.source}}};const ae=["Simple","Destructive","Disabled","Selected"];export{n as Destructive,s as Disabled,i as Selected,o as Simple,ae as __namedExportsOrder,ie as default};

package/dist/assets/MenuList-0OHGr5AC.js

@@ -0,0 +1 @@
+import{_ as j,a as H,b as T}from"./OdysseyThemeProvider-BykOaJq8.js";import{r as c}from"./index-NdkWRN8K.js";import{j as A}from"./jsx-runtime-CnH95YSl.js";import{g as _}from"./getScrollbarSize-Bqq2hMjQ.js";import{o as C}from"./ownerDocument-DW-IO8s5.js";import{u as O}from"./useIsFocusVisible-DH0qxT5e.js";import{L as z}from"./List-_p0jkXPM.js";const N=["actions","autoFocus","autoFocusItem","children","className","disabledItemsFocusable","disableListWrap","onKeyDown","variant"];function w(n,t,r){return n===t?n.firstChild:t&&t.nextElementSibling?t.nextElementSibling:r?null:n.firstChild}function D(n,t,r){return n===t?r?n.firstChild:n.lastChild:t&&t.previousElementSibling?t.previousElementSibling:r?null:n.lastChild}function I(n,t){if(t===void 0)return!0;let r=n.innerText;return r===void 0&&(r=n.textContent),r=r.trim().toLowerCase(),r.length===0?!1:t.repeating?r[0]===t.keys[0]:r.indexOf(t.keys.join(""))===0}function h(n,t,r,b,m,y){let p=!1,u=m(n,t,t?r:!1);for(;u;){if(u===n.firstChild){if(p)return!1;p=!0}const d=b?!1:u.disabled||u.getAttribute("aria-disabled")==="true";if(!u.hasAttribute("tabindex")||!I(u,y)||d)u=m(n,u,r);else return u.focus(),!0}return!1}const G=c.forwardRef(function(t,r){const{actions:b,autoFocus:m=!1,autoFocusItem:y=!1,children:p,className:u,disabledItemsFocusable:d=!1,disableListWrap:g=!1,onKeyDown:x,variant:v="selectedMenu"}=t,F=j(t,N),a=c.useRef(null),M=c.useRef({keys:[],repeating:!0,previousKeyMatched:!0,lastTime:null});H(()=>{m&&a.current.focus()},[m]),c.useImperativeHandle(b,()=>({adjustStyleForScrollbar:(e,{direction:s})=>{const l=!a.current.style.width;if(e.clientHeight<a.current.clientHeight&&l){const f=`${_(C(e))}px`;a.current.style[s==="rtl"?"paddingLeft":"paddingRight"]=f,a.current.style.width=`calc(100% + ${f})`}return a.current}}),[]);const S=e=>{const s=a.current,l=e.key,f=C(s).activeElement;if(l==="ArrowDown")e.preventDefault(),h(s,f,g,d,w);else if(l==="ArrowUp")e.preventDefault(),h(s,f,g,d,D);else if(l==="Home")e.preventDefault(),h(s,null,g,d,w);else if(l==="End")e.preventDefault(),h(s,null,g,d,D);else if(l.length===1){const i=M.current,k=l.toLowerCase(),E=performance.now();i.keys.length>0&&(E-i.lastTime>500?(i.keys=[],i.repeating=!0,i.previousKeyMatched=!0):i.repeating&&k!==i.keys[0]&&(i.repeating=!1)),i.lastTime=E,i.keys.push(k);const R=f&&!i.repeating&&I(f,i);i.previousKeyMatched&&(R||h(s,f,!1,d,w,i))?e.preventDefault():i.previousKeyMatched=!1}x&&x(e)},L=O(a,r);let o=-1;c.Children.forEach(p,(e,s)=>{if(!c.isValidElement(e)){o===s&&(o+=1,o>=p.length&&(o=-1));return}e.props.disabled||(v==="selectedMenu"&&e.props.selected||o===-1)&&(o=s),o===s&&(e.props.disabled||e.props.muiSkipListHighlight||e.type.muiSkipListHighlight)&&(o+=1,o>=p.length&&(o=-1))});const K=c.Children.map(p,(e,s)=>{if(s===o){const l={};return y&&(l.autoFocus=!0),e.props.tabIndex===void 0&&v==="selectedMenu"&&(l.tabIndex=0),c.cloneElement(e,l)}return e});return A.jsx(z,T({role:"menu",ref:L,className:u,onKeyDown:S,tabIndex:m?0:-1},F,{children:K}))});export{G as M};

package/dist/assets/Modal-B12sS2Yh.js

@@ -0,0 +1 @@
+import{U as ie,V as ae,c as le,_ as ce,b as x,s as G,d as q,f as de}from"./OdysseyThemeProvider-BykOaJq8.js";import{r as d}from"./index-NdkWRN8K.js";import{g as ge}from"./getScrollbarSize-Bqq2hMjQ.js";import{o as O}from"./ownerDocument-DW-IO8s5.js";import{o as V}from"./ownerWindow-HkKU3E4x.js";import{u as ue}from"./useIsFocusVisible-DH0qxT5e.js";import{u as te}from"./inheritsLoose-DTTkq0Su.js";import{c as oe}from"./createChainedFunction-BO_9K8Jh.js";import{e as xe}from"./resolveComponentProps-TTQVZ4OZ.js";import{j as N}from"./jsx-runtime-CnH95YSl.js";import{g as ve,u as ne}from"./getReactElementRef-Bs64nbeG.js";import{P as Ee}from"./Portal-CsPQSHsR.js";import{F as Re}from"./Fade-CHnXmzFb.js";function ke(e){return ie("MuiBackdrop",e)}ae("MuiBackdrop",["root","invisible"]);const Pe=["children","className","component","components","componentsProps","invisible","open","slotProps","slots","TransitionComponent","transitionDuration"],ye=e=>{const{classes:t,invisible:n}=e;return de({root:["root",n&&"invisible"]},ke,t)},Te=G("div",{name:"MuiBackdrop",slot:"Root",overridesResolver:(e,t)=>{const{ownerState:n}=e;return[t.root,n.invisible&&t.invisible]}})(({ownerState:e})=>x({position:"fixed",display:"flex",alignItems:"center",justifyContent:"center",right:0,bottom:0,top:0,left:0,backgroundColor:"rgba(0, 0, 0, 0.5)",WebkitTapHighlightColor:"transparent"},e.invisible&&{backgroundColor:"transparent"})),Se=d.forwardRef(function(t,n){var o,s,r;const i=le({props:t,name:"MuiBackdrop"}),{children:c,className:u,component:g="div",components:m={},componentsProps:b={},invisible:k=!1,open:v,slotProps:l={},slots:M={},TransitionComponent:C=Re,transitionDuration:I}=i,P=ce(i,Pe),a=x({},i,{component:g,invisible:k}),E=ye(a),h=(o=l.root)!=null?o:b.root;return N.jsx(C,x({in:v,timeout:I},P,{children:N.jsx(Te,x({"aria-hidden":!0},h,{as:(s=(r=M.root)!=null?r:m.Root)!=null?s:g,className:q(E.root,u,h==null?void 0:h.className),ownerState:x({},a,h==null?void 0:h.ownerState),classes:E,ref:n,children:c}))}))});function Ce(e){const t=O(e);return t.body===e?V(e).innerWidth>t.documentElement.clientWidth:e.scrollHeight>e.clientHeight}function _(e,t){t?e.setAttribute("aria-hidden","true"):e.removeAttribute("aria-hidden")}function re(e){return parseInt(V(e).getComputedStyle(e).paddingRight,10)||0}function Ie(e){const n=["TEMPLATE","SCRIPT","STYLE","LINK","MAP","META","NOSCRIPT","PICTURE","COL","COLGROUP","PARAM","SLOT","SOURCE","TRACK"].indexOf(e.tagName)!==-1,o=e.tagName==="INPUT"&&e.getAttribute("type")==="hidden";return n||o}function se(e,t,n,o,s){const r=[t,n,...o];[].forEach.call(e.children,i=>{const c=r.indexOf(i)===-1,u=!Ie(i);c&&u&&_(i,s)})}function Y(e,t){let n=-1;return e.some((o,s)=>t(o)?(n=s,!0):!1),n}function Ne(e,t){const n=[],o=e.container;if(!t.disableScrollLock){if(Ce(o)){const i=ge(O(o));n.push({value:o.style.paddingRight,property:"padding-right",el:o}),o.style.paddingRight=`${re(o)+i}px`;const c=O(o).querySelectorAll(".mui-fixed");[].forEach.call(c,u=>{n.push({value:u.style.paddingRight,property:"padding-right",el:u}),u.style.paddingRight=`${re(u)+i}px`})}let r;if(o.parentNode instanceof DocumentFragment)r=O(o).body;else{const i=o.parentElement,c=V(o);r=(i==null?void 0:i.nodeName)==="HTML"&&c.getComputedStyle(i).overflowY==="scroll"?i:o}n.push({value:r.style.overflow,property:"overflow",el:r},{value:r.style.overflowX,property:"overflow-x",el:r},{value:r.style.overflowY,property:"overflow-y",el:r}),r.style.overflow="hidden"}return()=>{n.forEach(({value:r,el:i,property:c})=>{r?i.style.setProperty(c,r):i.style.removeProperty(c)})}}function Me(e){const t=[];return[].forEach.call(e.children,n=>{n.getAttribute("aria-hidden")==="true"&&t.push(n)}),t}class we{constructor(){this.containers=void 0,this.modals=void 0,this.modals=[],this.containers=[]}add(t,n){let o=this.modals.indexOf(t);if(o!==-1)return o;o=this.modals.length,this.modals.push(t),t.modalRef&&_(t.modalRef,!1);const s=Me(n);se(n,t.mount,t.modalRef,s,!0);const r=Y(this.containers,i=>i.container===n);return r!==-1?(this.containers[r].modals.push(t),o):(this.containers.push({modals:[t],container:n,restore:null,hiddenSiblings:s}),o)}mount(t,n){const o=Y(this.containers,r=>r.modals.indexOf(t)!==-1),s=this.containers[o];s.restore||(s.restore=Ne(s,n))}remove(t,n=!0){const o=this.modals.indexOf(t);if(o===-1)return o;const s=Y(this.containers,i=>i.modals.indexOf(t)!==-1),r=this.containers[s];if(r.modals.splice(r.modals.indexOf(t),1),this.modals.splice(o,1),r.modals.length===0)r.restore&&r.restore(),t.modalRef&&_(t.modalRef,n),se(r.container,t.mount,t.modalRef,r.hiddenSiblings,!1),this.containers.splice(s,1);else{const i=r.modals[r.modals.length-1];i.modalRef&&_(i.modalRef,!1)}return o}isTopModal(t){return this.modals.length>0&&this.modals[this.modals.length-1]===t}}const Fe=["input","select","textarea","a[href]","button","[tabindex]","audio[controls]","video[controls]",'[contenteditable]:not([contenteditable="false"])'].join(",");function Ae(e){const t=parseInt(e.getAttribute("tabindex")||"",10);return Number.isNaN(t)?e.contentEditable==="true"||(e.nodeName==="AUDIO"||e.nodeName==="VIDEO"||e.nodeName==="DETAILS")&&e.getAttribute("tabindex")===null?0:e.tabIndex:t}function Be(e){if(e.tagName!=="INPUT"||e.type!=="radio"||!e.name)return!1;const t=o=>e.ownerDocument.querySelector(`input[type="radio"]${o}`);let n=t(`[name="${e.name}"]:checked`);return n||(n=t(`[name="${e.name}"]`)),n!==e}function Oe(e){return!(e.disabled||e.tagName==="INPUT"&&e.type==="hidden"||Be(e))}function De(e){const t=[],n=[];return Array.from(e.querySelectorAll(Fe)).forEach((o,s)=>{const r=Ae(o);r===-1||!Oe(o)||(r===0?t.push(o):n.push({documentOrder:s,tabIndex:r,node:o}))}),n.sort((o,s)=>o.tabIndex===s.tabIndex?o.documentOrder-s.documentOrder:o.tabIndex-s.tabIndex).map(o=>o.node).concat(t)}function Le(){return!0}function He(e){const{children:t,disableAutoFocus:n=!1,disableEnforceFocus:o=!1,disableRestoreFocus:s=!1,getTabbable:r=De,isEnabled:i=Le,open:c}=e,u=d.useRef(!1),g=d.useRef(null),m=d.useRef(null),b=d.useRef(null),k=d.useRef(null),v=d.useRef(!1),l=d.useRef(null),M=ue(ve(t),l),C=d.useRef(null);d.useEffect(()=>{!c||!l.current||(v.current=!n)},[n,c]),d.useEffect(()=>{if(!c||!l.current)return;const a=O(l.current);return l.current.contains(a.activeElement)||(l.current.hasAttribute("tabIndex")||l.current.setAttribute("tabIndex","-1"),v.current&&l.current.focus()),()=>{s||(b.current&&b.current.focus&&(u.current=!0,b.current.focus()),b.current=null)}},[c]),d.useEffect(()=>{if(!c||!l.current)return;const a=O(l.current),E=R=>{C.current=R,!(o||!i()||R.key!=="Tab")&&a.activeElement===l.current&&R.shiftKey&&(u.current=!0,m.current&&m.current.focus())},h=()=>{const R=l.current;if(R===null)return;if(!a.hasFocus()||!i()||u.current){u.current=!1;return}if(R.contains(a.activeElement)||o&&a.activeElement!==g.current&&a.activeElement!==m.current)return;if(a.activeElement!==k.current)k.current=null;else if(k.current!==null)return;if(!v.current)return;let y=[];if((a.activeElement===g.current||a.activeElement===m.current)&&(y=r(l.current)),y.length>0){var A,T;const D=!!((A=C.current)!=null&&A.shiftKey&&((T=C.current)==null?void 0:T.key)==="Tab"),B=y[0],w=y[y.length-1];typeof B!="string"&&typeof w!="string"&&(D?w.focus():B.focus())}else R.focus()};a.addEventListener("focusin",h),a.addEventListener("keydown",E,!0);const F=setInterval(()=>{a.activeElement&&a.activeElement.tagName==="BODY"&&h()},50);return()=>{clearInterval(F),a.removeEventListener("focusin",h),a.removeEventListener("keydown",E,!0)}},[n,o,s,i,c,r]);const I=a=>{b.current===null&&(b.current=a.relatedTarget),v.current=!0,k.current=a.target;const E=t.props.onFocus;E&&E(a)},P=a=>{b.current===null&&(b.current=a.relatedTarget),v.current=!0};return N.jsxs(d.Fragment,{children:[N.jsx("div",{tabIndex:c?0:-1,onFocus:P,ref:g,"data-testid":"sentinelStart"}),d.cloneElement(t,{ref:M,onFocus:I}),N.jsx("div",{tabIndex:c?0:-1,onFocus:P,ref:m,"data-testid":"sentinelEnd"})]})}function je(e){return typeof e=="function"?e():e}function Ue(e){return e?e.props.hasOwnProperty("in"):!1}const _e=new we;function $e(e){const{container:t,disableEscapeKeyDown:n=!1,disableScrollLock:o=!1,manager:s=_e,closeAfterTransition:r=!1,onTransitionEnter:i,onTransitionExited:c,children:u,onClose:g,open:m,rootRef:b}=e,k=d.useRef({}),v=d.useRef(null),l=d.useRef(null),M=ue(l,b),[C,I]=d.useState(!m),P=Ue(u);let a=!0;(e["aria-hidden"]==="false"||e["aria-hidden"]===!1)&&(a=!1);const E=()=>O(v.current),h=()=>(k.current.modalRef=l.current,k.current.mount=v.current,k.current),F=()=>{s.mount(h(),{disableScrollLock:o}),l.current&&(l.current.scrollTop=0)},R=te(()=>{const p=je(t)||E().body;s.add(h(),p),l.current&&F()}),y=d.useCallback(()=>s.isTopModal(h()),[s]),A=te(p=>{v.current=p,p&&(m&&y()?F():l.current&&_(l.current,a))}),T=d.useCallback(()=>{s.remove(h(),a)},[a,s]);d.useEffect(()=>()=>{T()},[T]),d.useEffect(()=>{m?R():(!P||!r)&&T()},[m,T,P,r,R]);const D=p=>f=>{var S;(S=p.onKeyDown)==null||S.call(p,f),!(f.key!=="Escape"||f.which===229||!y())&&(n||(f.stopPropagation(),g&&g(f,"escapeKeyDown")))},B=p=>f=>{var S;(S=p.onClick)==null||S.call(p,f),f.target===f.currentTarget&&g&&g(f,"backdropClick")};return{getRootProps:(p={})=>{const f=xe(e);delete f.onTransitionEnter,delete f.onTransitionExited;const S=x({},f,p);return x({role:"presentation"},S,{onKeyDown:D(S),ref:M})},getBackdropProps:(p={})=>{const f=p;return x({"aria-hidden":!0},f,{onClick:B(f),open:m})},getTransitionProps:()=>{const p=()=>{I(!1),i&&i()},f=()=>{I(!0),c&&c(),r&&T()};return{onEnter:oe(p,u==null?void 0:u.props.onEnter),onExited:oe(f,u==null?void 0:u.props.onExited)}},rootRef:M,portalRef:A,isTopModal:y,exited:C,hasTransition:P}}function Ke(e){return ie("MuiModal",e)}ae("MuiModal",["root","hidden","backdrop"]);const We=["BackdropComponent","BackdropProps","classes","className","closeAfterTransition","children","container","component","components","componentsProps","disableAutoFocus","disableEnforceFocus","disableEscapeKeyDown","disablePortal","disableRestoreFocus","disableScrollLock","hideBackdrop","keepMounted","onBackdropClick","onClose","onTransitionEnter","onTransitionExited","open","slotProps","slots","theme"],ze=e=>{const{open:t,exited:n,classes:o}=e;return de({root:["root",!t&&n&&"hidden"],backdrop:["backdrop"]},Ke,o)},Ye=G("div",{name:"MuiModal",slot:"Root",overridesResolver:(e,t)=>{const{ownerState:n}=e;return[t.root,!n.open&&n.exited&&t.hidden]}})(({theme:e,ownerState:t})=>x({position:"fixed",zIndex:(e.vars||e).zIndex.modal,right:0,bottom:0,top:0,left:0},!t.open&&t.exited&&{visibility:"hidden"})),qe=G(Se,{name:"MuiModal",slot:"Backdrop",overridesResolver:(e,t)=>t.backdrop})({zIndex:-1}),at=d.forwardRef(function(t,n){var o,s,r,i,c,u;const g=le({name:"MuiModal",props:t}),{BackdropComponent:m=qe,BackdropProps:b,className:k,closeAfterTransition:v=!1,children:l,container:M,component:C,components:I={},componentsProps:P={},disableAutoFocus:a=!1,disableEnforceFocus:E=!1,disableEscapeKeyDown:h=!1,disablePortal:F=!1,disableRestoreFocus:R=!1,disableScrollLock:y=!1,hideBackdrop:A=!1,keepMounted:T=!1,onBackdropClick:D,open:B,slotProps:w,slots:j}=g,X=ce(g,We),p=x({},g,{closeAfterTransition:v,disableAutoFocus:a,disableEnforceFocus:E,disableEscapeKeyDown:h,disablePortal:F,disableRestoreFocus:R,disableScrollLock:y,hideBackdrop:A,keepMounted:T}),{getRootProps:f,getBackdropProps:S,getTransitionProps:fe,portalRef:pe,isTopModal:me,exited:J,hasTransition:Q}=$e(x({},p,{rootRef:n})),U=x({},p,{exited:J}),L=ze(U),$={};if(l.props.tabIndex===void 0&&($.tabIndex="-1"),Q){const{onEnter:H,onExited:K}=fe();$.onEnter=H,$.onExited=K}const Z=(o=(s=j==null?void 0:j.root)!=null?s:I.Root)!=null?o:Ye,ee=(r=(i=j==null?void 0:j.backdrop)!=null?i:I.Backdrop)!=null?r:m,W=(c=w==null?void 0:w.root)!=null?c:P.root,z=(u=w==null?void 0:w.backdrop)!=null?u:P.backdrop,be=ne({elementType:Z,externalSlotProps:W,externalForwardedProps:X,getSlotProps:f,additionalProps:{ref:n,as:C},ownerState:U,className:q(k,W==null?void 0:W.className,L==null?void 0:L.root,!U.open&&U.exited&&(L==null?void 0:L.hidden))}),he=ne({elementType:ee,externalSlotProps:z,additionalProps:b,getSlotProps:H=>S(x({},H,{onClick:K=>{D&&D(K),H!=null&&H.onClick&&H.onClick(K)}})),className:q(z==null?void 0:z.className,b==null?void 0:b.className,L==null?void 0:L.backdrop),ownerState:U});return!T&&!B&&(!Q||J)?null:N.jsx(Ee,{ref:pe,container:M,disablePortal:F,children:N.jsxs(Z,x({},be,{children:[!A&&m?N.jsx(ee,x({},he)):null,N.jsx(He,{disableEnforceFocus:E,disableAutoFocus:a,disableRestoreFocus:R,isEnabled:me,open:B,children:d.cloneElement(l,$)})]}))})});export{Se as B,He as F,at as M};

package/dist/assets/More-BgQrTkKM.js

@@ -0,0 +1 @@
+import{r}from"./index-NdkWRN8K.js";import{j as o}from"./jsx-runtime-CnH95YSl.js";import{S as t}from"./OdysseyThemeProvider-BykOaJq8.js";const s=r.forwardRef((e,n)=>o.jsx(t,{fill:"none",ref:n,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:"M13.5 4.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm0 7.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0ZM12 21a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z",fill:"currentColor",fillRule:"evenodd"})})})),l=r.memo(s);l.displayName="MoreIcon";export{l as M};

package/dist/{types/Pagination/index.d.ts → assets/MuiPropsContext-DhRylJZk.js}

@@ -1,4 +1,4 @@
-/*!
+import{r as t}from"./index-NdkWRN8K.js";/*!
  * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
  * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
  *
@@ -8,8 +8,4 @@
  * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  *
  * See the License for the specific language governing permissions and limitations under the License.
- */
-export { paginationTypeValues } from "./constants.js";
-export * from "./Pagination.js";
-export { usePagination } from "./usePagination.js";
-//# sourceMappingURL=index.d.ts.map
+ */const o=t.createContext({}),e=()=>t.useContext(o);export{o as M,e as u};

package/dist/assets/NativeSelect.stories-CYtg4GGs.js

@@ -0,0 +1,173 @@
+import{j as e}from"./jsx-runtime-CnH95YSl.js";import{r as n}from"./index-NdkWRN8K.js";import{O as Oe}from"./OdysseyStorybookThemeDecorator-CGH8visK.js";import{f as i}from"./fieldComponentPropsMetaData-BqbNLw6V.js";import{M as De}from"./Field-BxkyNVQW.js";import{g as Fe,u as He}from"./inputUtils-Dbi8XkA6.js";import{S as Ne}from"./Select-VvpDulqk.js";import{M as Ae}from"./Link-BQo2zH0c.js";import"./_commonjsHelpers-gnU0ypJ3.js";import"./OdysseyThemeProvider-BykOaJq8.js";import"./index-BJTM6NaI.js";import"./OdysseyProvider-BPLFYiwr.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"./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"./useControlled-NQulfz4l.js";import"./ArrowDropDown-Dnrg-0Q8.js";import"./createSvgIcon-Bv_3NNsK.js";import"./InputBase-6reb9B7r.js";import"./Link-DcsndbPK.js";import"./ExternalLink-lox07hAR.js";const Ge=n.forwardRef(({ariaDescribedBy:c,autoCompleteType:o,defaultValue:r,errorMessage:l,errorMessageList:s,hasMultipleChoices:a,hint:h,HintLinkComponent:t,id:m,inputRef:Se,isDisabled:Me=!1,isFullWidth:Le=!1,isMultiSelect:w,isOptional:Ee=!1,label:Te,onBlur:k,onChange:v,onFocus:O,testId:D,translate:F,value:H,children:N},A)=>{const Ve=n.useRef(Fe({controlledValue:H,uncontrolledValue:r})),G=n.useRef(null);n.useImperativeHandle(Se,()=>({focus:()=>{var d;(d=G.current)==null||d.focus()}}),[]);const P=He({defaultValue:r,value:H,controlState:Ve.current}),R=n.useCallback((d,V)=>{v==null||v(d,V)},[v]),W=n.useMemo(()=>a===void 0?w:a,[a,w]),we=n.useCallback(({ariaDescribedBy:d,errorMessageElementId:V,labelElementId:ke})=>e.jsx(Ne,{...P,"aria-describedby":d,autoComplete:o,children:N,id:m,inputProps:{"aria-errormessage":V,"aria-labelledby":ke,"data-se":D},inputRef:G,multiple:W,name:m,native:!0,onBlur:k,onChange:R,onFocus:O,ref:A,translate:F}),[o,N,m,P,W,k,R,O,A,D,F]);return e.jsx(De,{ariaDescribedBy:c,errorMessage:l,errorMessageList:s,fieldType:"single",hasVisibleLabel:!0,hint:h,HintLinkComponent:t,id:m,isDisabled:Me,isFullWidth:Le,isOptional:Ee,label:Te,renderFieldComponent:we})}),p=n.memo(Ge);p.displayName="NativeSelect";const zo={component:p,decorators:[Oe],tags:["autodocs"],argTypes:{children:{description:"The options or optgroup elements within the native select component",table:{type:{summary:"ReactElement<'option'> | ReactElement<'optgroup'> | undefined"}}},defaultValue:{control:"text",description:"The default value of the native select component. Only applicable if `value` is not provided",table:{type:{summary:"string | string[] | undefined"}}},errorMessage:i.errorMessage,errorMessageList:i.errorMessageList,hint:i.hint,HintLinkComponent:i.HintLinkComponent,id:i.id,isDisabled:i.isDisabled,isFullWidth:i.isFullWidth,hasMultipleChoices:{control:"boolean",description:"If `true`, the native select component allows multiple selections",table:{type:{summary:"boolean"},defaultValue:{summary:"false"}}},isOptional:i.isOptional,label:{control:"text",description:"The label text for the native select component",table:{type:{summary:"string"}},type:{required:!0,name:"string"}},onBlur:{description:"Callback fired when the native select component loses focus",table:{type:{summary:"func"}}},onChange:{description:"Callback fired when the value of the native select component changes",table:{type:{summary:"func"}}},onFocus:{description:"Callback fired when the native select component gains focus",table:{type:{summary:"func"}}},value:{control:"text",description:"The value or values selected in the native select component",table:{type:{summary:"string | string[]"}}}},args:{isDisabled:!1,hint:"Select your destination in the Sol system.",isOptional:!1,label:"Destination",id:"SolarDestination",defaultValue:""}},u={render:function(o){return e.jsx(p,{...o,children:e.jsxs(e.Fragment,{children:[e.jsx("option",{value:"earth",children:"Earth"}),e.jsx("option",{value:"mars",children:"Mars"}),e.jsx("option",{value:"ceres",children:"Ceres"}),e.jsx("option",{value:"eros",children:"Eros"}),e.jsx("option",{value:"tycho-station",children:"Tycho Station"}),e.jsx("option",{value:"phoebe",children:"Phoebe"}),e.jsx("option",{value:"ganymede",children:"Ganymede"})]}),defaultValue:o.defaultValue,errorMessage:o.errorMessage,errorMessageList:o.errorMessageList,hint:o.hint,id:o.id,isDisabled:o.isDisabled,isMultiSelect:o.isMultiSelect,isOptional:o.isOptional,label:o.label})}},Pe={render:function(o){return e.jsx(p,{...o,children:e.jsxs(e.Fragment,{children:[e.jsxs("optgroup",{label:"Sol System",children:[e.jsx("option",{value:"earth",children:"Earth"}),e.jsx("option",{value:"mars",children:"Mars"}),e.jsx("option",{value:"ceres",children:"Ceres"}),e.jsx("option",{value:"eros",children:"Eros"}),e.jsx("option",{value:"tycho-station",children:"Tycho Station"}),e.jsx("option",{value:"phoebe",children:"Phoebe"}),e.jsx("option",{value:"ganymede",children:"Ganymede"})]}),e.jsxs("optgroup",{label:"Extrasolar",children:[e.jsx("option",{value:"auberon",children:"Auberon"}),e.jsx("option",{value:"al-halub",children:"Al-Halub"}),e.jsx("option",{value:"freehold",children:"Freehold"}),e.jsx("option",{value:"laconia",children:"Laconia"}),e.jsx("option",{value:"new-terra",children:"New Terra"})]})]})})}},g={...u},b={...u,args:{isDisabled:!0}},f={...u,args:{errorMessage:"Select your destination."}},x={...u,args:{errorMessage:"Select your destination.",errorMessageList:["Select 1 planet","Select 1 moon"]}},y={...Pe},j={...u,args:{hasMultipleChoices:!0,defaultValue:[]}},C={...u,args:{isOptional:!0}},S={...u,args:{HintLinkComponent:e.jsx(Ae,{href:"/learn-more",children:"Learn more"})}},M={parameters:{docs:{description:{story:"When the component is controlled, the parent component is responsible for passing `value` to the component and listening for changes with `onChange`"}}},args:{},render:function(o){const[r,l]=n.useState(""),s=n.useCallback(a=>l(a.target.value),[]);return e.jsx(p,{...o,children:e.jsxs(e.Fragment,{children:[e.jsxs("optgroup",{label:"Sol System",children:[e.jsx("option",{value:"earth",children:"Earth"}),e.jsx("option",{value:"mars",children:"Mars"}),e.jsx("option",{value:"ceres",children:"Ceres"}),e.jsx("option",{value:"eros",children:"Eros"}),e.jsx("option",{value:"tycho-station",children:"Tycho Station"}),e.jsx("option",{value:"phoebe",children:"Phoebe"}),e.jsx("option",{value:"ganymede",children:"Ganymede"})]}),e.jsxs("optgroup",{label:"Extrasolar",children:[e.jsx("option",{value:"auberon",children:"Auberon"}),e.jsx("option",{value:"al-halub",children:"Al-Halub"}),e.jsx("option",{value:"freehold",children:"Freehold"}),e.jsx("option",{value:"laconia",children:"Laconia"}),e.jsx("option",{value:"new-terra",children:"New Terra"})]})]}),onChange:s,value:r})}},L={parameters:{docs:{description:{story:"When the component is controlled, the parent component is responsible for passing `value` to the component and listening for changes with `onChange`"}}},render:function(o){const[r,l]=n.useState([""]),s=n.useCallback(a=>{const h=[a.target].filter(t=>t instanceof HTMLOptionElement).filter(t=>t.selected).map(t=>t.value);l(h)},[]);return e.jsx(p,{...o,defaultValue:void 0,hasMultipleChoices:!0,onChange:s,value:r,children:e.jsxs(e.Fragment,{children:[e.jsxs("optgroup",{label:"Sol System",children:[e.jsx("option",{value:"earth",children:"Earth"}),e.jsx("option",{value:"mars",children:"Mars"}),e.jsx("option",{value:"ceres",children:"Ceres"}),e.jsx("option",{value:"eros",children:"Eros"}),e.jsx("option",{value:"tycho-station",children:"Tycho Station"}),e.jsx("option",{value:"phoebe",children:"Phoebe"}),e.jsx("option",{value:"ganymede",children:"Ganymede"})]}),e.jsxs("optgroup",{label:"Extrasolar",children:[e.jsx("option",{value:"auberon",children:"Auberon"}),e.jsx("option",{value:"al-halub",children:"Al-Halub"}),e.jsx("option",{value:"freehold",children:"Freehold"}),e.jsx("option",{value:"laconia",children:"Laconia"}),e.jsx("option",{value:"new-terra",children:"New Terra"})]})]})})}},E={parameters:{docs:{description:{story:"When the component is controlled, the parent component is responsible for passing `value` to the component and listening for changes with `onChange`"}}},args:{},render:function(o){const[r,l]=n.useState("Laconia"),s=n.useCallback(a=>l(a.target.value),[]);return e.jsx(p,{...o,children:e.jsxs(e.Fragment,{children:[e.jsxs("optgroup",{label:"Sol System",children:[e.jsx("option",{value:"earth",children:"Earth"}),e.jsx("option",{value:"mars",children:"Mars"}),e.jsx("option",{value:"ceres",children:"Ceres"}),e.jsx("option",{value:"eros",children:"Eros"}),e.jsx("option",{value:"tycho-station",children:"Tycho Station"}),e.jsx("option",{value:"phoebe",children:"Phoebe"}),e.jsx("option",{value:"ganymede",children:"Ganymede"})]}),e.jsxs("optgroup",{label:"Extrasolar",children:[e.jsx("option",{value:"auberon",children:"Auberon"}),e.jsx("option",{value:"al-halub",children:"Al-Halub"}),e.jsx("option",{value:"freehold",children:"Freehold"}),e.jsx("option",{value:"laconia",children:"Laconia"}),e.jsx("option",{value:"new-terra",children:"New Terra"})]})]}),onChange:s,value:r})}},T={parameters:{docs:{description:{story:"When the component is controlled, the parent component is responsible for passing `value` to the component and listening for changes with `onChange`.\n\nPreselected values are referenced by the value of the `value` attritube on `option` elements."}}},render:function(o){const[r,l]=n.useState(["laconia","new-terra"]),s=n.useCallback(a=>{const h=[a.target].filter(t=>t instanceof HTMLOptionElement).filter(t=>t.selected).map(t=>t.value);l(h)},[]);return e.jsx(p,{...o,defaultValue:void 0,hasMultipleChoices:!0,onChange:s,value:r,children:e.jsxs(e.Fragment,{children:[e.jsxs("optgroup",{label:"Sol System",children:[e.jsx("option",{value:"earth",children:"Earth"}),e.jsx("option",{value:"mars",children:"Mars"}),e.jsx("option",{value:"ceres",children:"Ceres"}),e.jsx("option",{value:"eros",children:"Eros"}),e.jsx("option",{value:"tycho-station",children:"Tycho Station"}),e.jsx("option",{value:"phoebe",children:"Phoebe"}),e.jsx("option",{value:"ganymede",children:"Ganymede"})]}),e.jsxs("optgroup",{label:"Extrasolar",children:[e.jsx("option",{value:"auberon",children:"Auberon"}),e.jsx("option",{value:"al-halub",children:"Al-Halub"}),e.jsx("option",{value:"freehold",children:"Freehold"}),e.jsx("option",{value:"laconia",children:"Laconia"}),e.jsx("option",{value:"new-terra",children:"New Terra"})]})]})})}};var q,z,I;g.parameters={...g.parameters,docs:{...(q=g.parameters)==null?void 0:q.docs,source:{originalSource:`{
+  ...Template
+}`,...(I=(z=g.parameters)==null?void 0:z.docs)==null?void 0:I.source}}};var B,_,J;b.parameters={...b.parameters,docs:{...(B=b.parameters)==null?void 0:B.docs,source:{originalSource:`{
+  ...Template,
+  args: {
+    isDisabled: true
+  }
+}`,...(J=(_=b.parameters)==null?void 0:_.docs)==null?void 0:J.source}}};var K,Q,U;f.parameters={...f.parameters,docs:{...(K=f.parameters)==null?void 0:K.docs,source:{originalSource:`{
+  ...Template,
+  args: {
+    errorMessage: "Select your destination."
+  }
+}`,...(U=(Q=f.parameters)==null?void 0:Q.docs)==null?void 0:U.source}}};var X,Y,Z;x.parameters={...x.parameters,docs:{...(X=x.parameters)==null?void 0:X.docs,source:{originalSource:`{
+  ...Template,
+  args: {
+    errorMessage: "Select your destination.",
+    errorMessageList: ["Select 1 planet", "Select 1 moon"]
+  }
+}`,...(Z=(Y=x.parameters)==null?void 0:Y.docs)==null?void 0:Z.source}}};var $,ee,oe;y.parameters={...y.parameters,docs:{...($=y.parameters)==null?void 0:$.docs,source:{originalSource:`{
+  ...GroupTemplate
+}`,...(oe=(ee=y.parameters)==null?void 0:ee.docs)==null?void 0:oe.source}}};var ne,te,ae;j.parameters={...j.parameters,docs:{...(ne=j.parameters)==null?void 0:ne.docs,source:{originalSource:`{
+  ...Template,
+  args: {
+    hasMultipleChoices: true,
+    defaultValue: []
+  }
+}`,...(ae=(te=j.parameters)==null?void 0:te.docs)==null?void 0:ae.source}}};var re,le,se;C.parameters={...C.parameters,docs:{...(re=C.parameters)==null?void 0:re.docs,source:{originalSource:`{
+  ...Template,
+  args: {
+    isOptional: true
+  }
+}`,...(se=(le=C.parameters)==null?void 0:le.docs)==null?void 0:se.source}}};var ie,pe,ce;S.parameters={...S.parameters,docs:{...(ie=S.parameters)==null?void 0:ie.docs,source:{originalSource:`{
+  ...Template,
+  args: {
+    HintLinkComponent: <Link href="/learn-more">Learn more</Link>
+  }
+}`,...(ce=(pe=S.parameters)==null?void 0:pe.docs)==null?void 0:ce.source}}};var ue,de,he;M.parameters={...M.parameters,docs:{...(ue=M.parameters)==null?void 0:ue.docs,source:{originalSource:`{
+  parameters: {
+    docs: {
+      description: {
+        story: "When the component is controlled, the parent component is responsible for passing \`value\` to the component and listening for changes with \`onChange\`"
+      }
+    }
+  },
+  args: {},
+  render: function C(args) {
+    const [localValue, setLocalValue] = useState("");
+    const onChange = useCallback((event: SelectChangeEvent<string | string[]>) => setLocalValue(event.target.value as string), []);
+    return <NativeSelect {...args} children={<>
+            <optgroup label="Sol System">
+              <option value="earth">Earth</option>
+              <option value="mars">Mars</option>
+              <option value="ceres">Ceres</option>
+              <option value="eros">Eros</option>
+              <option value="tycho-station">Tycho Station</option>
+              <option value="phoebe">Phoebe</option>
+              <option value="ganymede">Ganymede</option>
+            </optgroup>
+            <optgroup label="Extrasolar">
+              <option value="auberon">Auberon</option>
+              <option value="al-halub">Al-Halub</option>
+              <option value="freehold">Freehold</option>
+              <option value="laconia">Laconia</option>
+              <option value="new-terra">New Terra</option>
+            </optgroup>
+          </>} onChange={onChange} value={localValue} />;
+  }
+}`,...(he=(de=M.parameters)==null?void 0:de.docs)==null?void 0:he.source}}};var me,ve,ge;L.parameters={...L.parameters,docs:{...(me=L.parameters)==null?void 0:me.docs,source:{originalSource:`{
+  parameters: {
+    docs: {
+      description: {
+        story: "When the component is controlled, the parent component is responsible for passing \`value\` to the component and listening for changes with \`onChange\`"
+      }
+    }
+  },
+  render: function C(args) {
+    const [localValue, setLocalValue] = useState([""]);
+    const onChange = useCallback<Required<NativeSelectProps<typeof localValue, true>>["onChange"]>(event => {
+      const selectedOptions = [event.target].filter(option => option instanceof HTMLOptionElement).filter(option => option.selected).map(selectedOption => selectedOption.value);
+      setLocalValue(selectedOptions);
+    }, []);
+    return <NativeSelect {...args} defaultValue={undefined} hasMultipleChoices={true}
+    // @ts-expect-error This is going to break because generics aren't passed through.
+    onChange={onChange} value={localValue}>
+        <>
+          <optgroup label="Sol System">
+            <option value="earth">Earth</option>
+            <option value="mars">Mars</option>
+            <option value="ceres">Ceres</option>
+            <option value="eros">Eros</option>
+            <option value="tycho-station">Tycho Station</option>
+            <option value="phoebe">Phoebe</option>
+            <option value="ganymede">Ganymede</option>
+          </optgroup>
+          <optgroup label="Extrasolar">
+            <option value="auberon">Auberon</option>
+            <option value="al-halub">Al-Halub</option>
+            <option value="freehold">Freehold</option>
+            <option value="laconia">Laconia</option>
+            <option value="new-terra">New Terra</option>
+          </optgroup>
+        </>
+      </NativeSelect>;
+  }
+}`,...(ge=(ve=L.parameters)==null?void 0:ve.docs)==null?void 0:ge.source}}};var be,fe,xe;E.parameters={...E.parameters,docs:{...(be=E.parameters)==null?void 0:be.docs,source:{originalSource:`{
+  parameters: {
+    docs: {
+      description: {
+        story: "When the component is controlled, the parent component is responsible for passing \`value\` to the component and listening for changes with \`onChange\`"
+      }
+    }
+  },
+  args: {},
+  render: function C(args) {
+    const [localValue, setLocalValue] = useState("Laconia");
+    const onChange = useCallback((event: SelectChangeEvent<string | string[]>) => setLocalValue(event.target.value as string), []);
+    return <NativeSelect {...args} children={<>
+            <optgroup label="Sol System">
+              <option value="earth">Earth</option>
+              <option value="mars">Mars</option>
+              <option value="ceres">Ceres</option>
+              <option value="eros">Eros</option>
+              <option value="tycho-station">Tycho Station</option>
+              <option value="phoebe">Phoebe</option>
+              <option value="ganymede">Ganymede</option>
+            </optgroup>
+            <optgroup label="Extrasolar">
+              <option value="auberon">Auberon</option>
+              <option value="al-halub">Al-Halub</option>
+              <option value="freehold">Freehold</option>
+              <option value="laconia">Laconia</option>
+              <option value="new-terra">New Terra</option>
+            </optgroup>
+          </>} onChange={onChange} value={localValue} />;
+  }
+}`,...(xe=(fe=E.parameters)==null?void 0:fe.docs)==null?void 0:xe.source}}};var ye,je,Ce;T.parameters={...T.parameters,docs:{...(ye=T.parameters)==null?void 0:ye.docs,source:{originalSource:`{
+  parameters: {
+    docs: {
+      description: {
+        story: "When the component is controlled, the parent component is responsible for passing \`value\` to the component and listening for changes with \`onChange\`.\\n\\nPreselected values are referenced by the value of the \`value\` attritube on \`option\` elements."
+      }
+    }
+  },
+  render: function C(args) {
+    const [localValue, setLocalValue] = useState(["laconia", "new-terra"]);
+    const onChange = useCallback<Required<NativeSelectProps<typeof localValue, true>>["onChange"]>(event => {
+      const selectedOptions = [event.target].filter(option => option instanceof HTMLOptionElement).filter(option => option.selected).map(selectedOption => selectedOption.value);
+      setLocalValue(selectedOptions);
+    }, []);
+    return <NativeSelect {...args} defaultValue={undefined} hasMultipleChoices
+    // @ts-expect-error This is going to break because generics aren't passed through.
+    onChange={onChange} value={localValue}>
+        <>
+          <optgroup label="Sol System">
+            <option value="earth">Earth</option>
+            <option value="mars">Mars</option>
+            <option value="ceres">Ceres</option>
+            <option value="eros">Eros</option>
+            <option value="tycho-station">Tycho Station</option>
+            <option value="phoebe">Phoebe</option>
+            <option value="ganymede">Ganymede</option>
+          </optgroup>
+          <optgroup label="Extrasolar">
+            <option value="auberon">Auberon</option>
+            <option value="al-halub">Al-Halub</option>
+            <option value="freehold">Freehold</option>
+            <option value="laconia">Laconia</option>
+            <option value="new-terra">New Terra</option>
+          </optgroup>
+        </>
+      </NativeSelect>;
+  }
+}`,...(Ce=(je=T.parameters)==null?void 0:je.docs)==null?void 0:Ce.source}}};const Io=["Default","DefaultDisabled","DefaultError","ErrorsList","DefaultGrouped","Multi","Optional","HintLink","Controlled","ControlledMultiselect","ControlledPreselected","ControlledPreselectedMultiselect"];export{M as Controlled,L as ControlledMultiselect,E as ControlledPreselected,T as ControlledPreselectedMultiselect,g as Default,b as DefaultDisabled,f as DefaultError,y as DefaultGrouped,x as ErrorsList,S as HintLink,j as Multi,C as Optional,Io as __namedExportsOrder,zo as default};