@okta/odyssey-react-mui 1.43.0 → 1.45.0

package/dist/assets/Icon _icons_.stories-CfG9aDh6.js

@@ -0,0 +1,16 @@
+import{j as a}from"./jsx-runtime-CnH95YSl.js";import{i as t}from"./index-CDGerSbe.js";import{r as p}from"./index-NdkWRN8K.js";import{M as s}from"./DataTable-CnCWIOTw.js";import"./SvgIcon-BQAg6Jm7.js";import"./createTheme-BmPXDA4p.js";import"./_commonjsHelpers-gnU0ypJ3.js";import"./DefaultPropsProvider-B7tpShA7.js";import"./generateUtilityClasses-DYvjsuMV.js";import"./Server-F8KLZq7d.js";import"./List-0o0OI1E9.js";import"./ArrowRight-DCIAiEpA.js";import"./Bug-m6zinguF.js";import"./Calendar-CuqjwSb0.js";import"./Check-BmyOKfcL.js";import"./WarningFilled-Y3Vw7n_w.js";import"./ChevronDown-BnAWuc8V.js";import"./ChevronRight-BB0bQIRj.js";import"./ChevronUp-B9JV-jmd.js";import"./Clock-Byj5V_49.js";import"./Close-DA7fBExu.js";import"./CloseCircleFilled-D2aBlgBe.js";import"./Upload-DK3nRIto.js";import"./Documentation-DM1hawvn.js";import"./Download-Cp75oFKP.js";import"./ExternalLink-DTdulgUc.js";import"./Filter-BAXcmMyf.js";import"./Folder-Ddku_ujr.js";import"./Globe--OQ55RD1.js";import"./Grid-B2PgWvdd.js";import"./Group-W0XqkWVH.js";import"./Hide-RfKmYLNv.js";import"./Home-BXMRmOIu.js";import"./InformationCircle-B71JRUfK.js";import"./More-axx2rGKU.js";import"./Refresh-CPgGX1hz.js";import"./Search-BvCmvJcV.js";import"./Settings-DjrryuBd.js";import"./Show-qQzUH4Sq.js";import"./Sync-Bmam4Lr_.js";import"./User-BBdPovZN.js";import"./Video-DytabcyM.js";import"./index.esm-D7MwfoQM.js";import"./createSvgIcon-DiC7XVU3.js";import"./createChainedFunction-BO_9K8Jh.js";import"./debounce-Be36O1Ab.js";import"./ListItem-CcduKzQu.js";import"./utils-iop7lDec.js";import"./useFormControl-BMISTZuX.js";import"./FormLabel-BLeax9q3.js";import"./formLabelClasses-xMgYguuN.js";import"./ListContext-C02XM7tn.js";import"./TransitionGroupContext-twgBS-Q3.js";import"./useIsFocusVisible-DH0qxT5e.js";import"./isHostComponent-DVu5iVWx.js";import"./ButtonBase-BqXVk-1q.js";import"./assertThisInitialized-B9jnkVVz.js";import"./inheritsLoose-CWawPfk8.js";import"./buttonBaseClasses-CSPKg76d.js";import"./ownerDocument-DW-IO8s5.js";import"./ownerWindow-HkKU3E4x.js";import"./useId-cMcvCE23.js";import"./useControlled-NQulfz4l.js";import"./index-B5xazMy1.js";import"./index-DieBXP3Z.js";import"./utils-gq6yExow.js";import"./useTheme-C05bJKih.js";import"./Stack-Ba8l39se.js";import"./useThemeProps-Dy5sAWyz.js";import"./Tooltip-B4GIR2eB.js";import"./index-CpbQl8EB.js";import"./tooltipClasses-C74HjonW.js";import"./Grow-CIie3qhp.js";import"./Portal-Bvf2g5iG.js";import"./resolveComponentProps-DMpKAZvD.js";import"./Popper-CwLH-7YW.js";import"./popper-CMBiYTiD.js";import"./Paper-DbAuDGNI.js";import"./Box-C2ekHaOu.js";import"./CircularProgress-DNk4kmx6.js";import"./DialogContent-C_FnZ5ZS.js";import"./Modal-CW5mOzJG.js";import"./getScrollbarSize-Bqq2hMjQ.js";import"./DialogTitle-CLDQZ0bg.js";import"./Typography-D7-qxuiy.js";import"./typographyClasses-D8vr2n3l.js";import"./Menu-CGJO1mMf.js";import"./MenuList-BboivbXC.js";import"./List-W5kRT_jR.js";import"./colorManipulator-O7SU8zMv.js";import"./IconButton-CK9Do7vj.js";import"./Radio-Bi1_KmSD.js";import"./SwitchBase-Bja5dn-O.js";import"./radioClasses-f3ayyf7y.js";import"./Checkbox-luq82K1t.js";import"./checkboxClasses-Dtdq1kQG.js";import"./useMobilePicker-CfUl5sFz.js";import"./Select-DVJCNQIV.js";import"./ArrowDropDown-bSngWMh1.js";import"./inputBaseClasses-PAjj3ZBN.js";import"./InputBase--xDu7aWm.js";import"./GlobalStyles-BxDN_5FT.js";import"./FormHelperText-ZkUAjajs.js";import"./useThemeProps-BG38P4ul.js";import"./InputAdornment-CFgP75Dd.js";import"./inputAdornmentClasses-DYNxkEwO.js";import"./Button-BqwcAVQ-.js";import"./buttonClasses-DtIJBSf4.js";import"./Chip-BOK8DR8m.js";import"./chipClasses-BMWKl3Eu.js";import"./tableRowClasses-inqOIkjd.js";import"./MenuItem-DjSqFwdt.js";import"./menuItemClasses-DFm3-Sf1.js";import"./Collapse-P1H1b4lO.js";import"./AlertTitle-DlG4YQWR.js";import"./useSlot-F4Qz2Wzp.js";import"./Close-DA_Sph0R.js";import"./alertTitleClasses-CSPeaunQ.js";import"./Skeleton-BJLiCr2o.js";import"./Divider-CsWa3KCo.js";import"./Autocomplete-MfScEzbR.js";import"./autocompleteClasses-Bi4FgC8v.js";import"./ListSubheader-DXKE8lW0.js";import"./FormControlLabel-CxCmH5hv.js";import"./formControlLabelClasses-BtjP4uib.js";import"./visuallyHidden-Dan1xhjv.js";import"./DateTimePicker-CnXcHc5u.js";import"./Tabs-ChAj4m0g.js";import"./DatePicker-DIRg7n4d.js";import"./Box-BXOPvc0Q.js";import"./Callout-CaNoXhaj.js";import"./Link-ClKgpBXG.js";import"./OdysseyDesignTokensContext-BWQIA5ie.js";import"./Typography-CiNRLenM.js";import"./useUniqueId-Bsgqe1tm.js";import"./createUniqueId-ByTaVY63.js";import"./useTranslation-vEf1lqoc.js";import"./context-D_qJ2zXV.js";import"./EmptyState-DQoihCwU.js";import"./DataFilters-DVey1xPT.js";import"./Autocomplete-UE4wqxn0.js";import"./useAutocomplete-C7VK9p4p.js";import"./Field-ilPS333M.js";import"./ScreenReaderText-vq7_Ob_I.js";import"./FieldHint-Cv7aMlpU.js";import"./inputUtils-Dbi8XkA6.js";import"./Checkbox-BTj1hXUa.js";import"./CheckboxGroup-Cgc2chES.js";import"./FormGroup-BaCH3e06.js";import"./formGroupClasses-D9ChLj7o.js";import"./Radio-D85jg1Ri.js";import"./RadioGroup-BS6oYUQf.js";import"./SearchField-jc9ws93I.js";import"./OdysseyThemeProvider-aR5shtx6.js";import"./useContrastMode-BthoHtLy.js";import"./Tag-CjPSrGAL.js";import"./MuiPropsContext-DhRylJZk.js";import"./TagList-BQKiA1TW.js";import"./TextField-CZ0hstP2.js";import"./Button-BOzIr8Jh.js";import"./BaseButton-B5c4cgt8.js";import"./Tooltip-3088PjcT.js";import"./Trans-DZ9nii1x.js";import"./MenuButton-OjJFnmOD.js";import"./BaseMenuButton-DbGGXXbP.js";import"./MenuContext-DKMyPMNY.js";import"./MenuItem-CuP47MJ-.js";import"./useScrollIndication-BJW9jXaC.js";import"./Pagination-CgxBDBwQ.js";const Dr={tags:["autodocs"]},c=[{name:"AddCircleIcon",use:"To add"},{name:"AddIcon",use:"To add"},{name:"AppsIcon",use:""},{name:"ArrowDownIcon",use:""},{name:"ArrowLeftIcon",use:""},{name:"ArrowLowerLeftIcon",use:""},{name:"ArrowLowerRightIcon",use:""},{name:"ArrowRightIcon",use:""},{name:"ArrowUnsortedIcon",use:""},{name:"ArrowUpIcon",use:""},{name:"ArrowUpperLeftIcon",use:""},{name:"ArrowUpperRightIcon",use:""},{name:"BugIcon",use:""},{name:"CalendarIcon",use:""},{name:"CallIcon",use:""},{name:"ChatIcon",use:""},{name:"CheckCircleFilledIcon",use:""},{name:"CheckIcon",use:"To show a completed process"},{name:"ChevronDownIcon",use:"UI indicator - element triggers open"},{name:"ChevronLeftIcon",use:""},{name:"ChevronRightIcon",use:""},{name:"ChevronUpIcon",use:"UI indicator - element triggers close"},{name:"ClockIcon",use:""},{name:"CloseCircleFilledIcon",use:""},{name:"CloseIcon",use:"To close a modal or other UI"},{name:"CollapseLeftIcon",use:""},{name:"CollapseRightIcon",use:""},{name:"CopyIcon",use:"To copy text"},{name:"DangerDiamondFilledIcon",use:""},{name:"DangerDiamondIcon",use:""},{name:"DeleteIcon",use:"To delete something"},{name:"DenyIcon",use:""},{name:"DevicesIcon",use:""},{name:"DirectoryIcon",use:""},{name:"DocumentationIcon",use:""},{name:"DownloadIcon",use:"To download"},{name:"DragIndicatorIcon",use:""},{name:"EditIcon",use:"To edit something"},{name:"ExpandLeftIcon",use:""},{name:"ExpandRightIcon",use:""},{name:"ExternalLinkIcon",use:"UI indicator - external link"},{name:"FilterIcon",use:"To filter results"},{name:"FolderIcon",use:""},{name:"GlobeIcon",use:""},{name:"GridIcon",use:""},{name:"GroupIcon",use:""},{name:"HideIcon",use:"To hide something"},{name:"HomeIcon",use:""},{name:"InformationCircleFilledIcon",use:"To get information"},{name:"InformationCircleIcon",use:"To get information"},{name:"LinkIcon",use:""},{name:"ListIcon",use:""},{name:"LockIcon",use:""},{name:"MoreIcon",use:""},{name:"NotificationIcon",use:"To notify the user of something"},{name:"PauseIcon",use:""},{name:"QuestionCircleFilledIcon",use:"To provide clarification"},{name:"QuestionCircleIcon",use:"To provide clarification"},{name:"RefreshIcon",use:""},{name:"ResetIcon",use:""},{name:"ResumeIcon",use:""},{name:"SearchIcon",use:"To search for something"},{name:"ServerIcon",use:""},{name:"SettingsIcon",use:"To edit user or app settings"},{name:"ShowIcon",use:"To show something"},{name:"SubtractIcon",use:"To subtract or remove"},{name:"SyncIcon",use:""},{name:"UnlockIcon",use:""},{name:"UploadIcon",use:""},{name:"UserIcon",use:"To support a user name"},{name:"VideoIcon",use:""},{name:"WarningFilledIcon",use:""},{name:"WarningIcon",use:""}],u=[{accessorKey:"icon",Cell:({row:o})=>p.createElement(t[o.original.name]),header:"Icon"},{accessorKey:"name",header:"Name"},{accessorKey:"className",Cell:({row:o})=>{var e;return((e=t[o.original.name])==null?void 0:e.displayName)??""},header:"Class Name"}],r={parameters:{docs:{description:{story:"Icons can be included as a component using the class name. For example, to include the add circle icon, use `<AddCircleIcon />`."}}},render:function(){return a.jsx(s,{columns:u,getData:()=>c,getRowId:e=>e.name,hasSorting:!1})}};var i,n,m;r.parameters={...r.parameters,docs:{...(i=r.parameters)==null?void 0:i.docs,source:{originalSource:`{
+  parameters: {
+    docs: {
+      description: {
+        story: "Icons can be included as a component using the class name. For example, to include the add circle icon, use \`<AddCircleIcon />\`."
+      }
+    }
+  },
+  render: function C() {
+    return <DataTable
+    // The \`as\` here shouldn't be required because \`DataTable\` should be inferring the type of \`columns\`, but it doesn't take a generic to know that. --Kevin Ghadyani
+    columns={columns as DataTableColumn<DataTableRowData>[]} getData={() => icons}
+    // The \`as\` here shouldn't be required because \`DataTable\` should know the return type of \`getData\` and infer the rest. It needs to ta generic to fix that. --Kevin Ghadyani
+    getRowId={originalRow => originalRow.name as keyof typeof iconDictionary} hasSorting={false} />;
+  }
+}`,...(m=(n=r.parameters)==null?void 0:n.docs)==null?void 0:m.source}}};const wr=["Default"];export{r as Default,wr as __namedExportsOrder,Dr as default};

package/dist/assets/IconButton-CK9Do7vj.js

@@ -0,0 +1 @@
+import{g as m,_ as z,a as s,c as R,b as t,d as u}from"./createTheme-BmPXDA4p.js";import{r as x}from"./index-NdkWRN8K.js";import{u as y,s as C,c as B}from"./DefaultPropsProvider-B7tpShA7.js";import{g as I}from"./generateUtilityClasses-DYvjsuMV.js";import{j as $}from"./jsx-runtime-CnH95YSl.js";import{B as h}from"./ButtonBase-BqXVk-1q.js";function k(o){return m("MuiIconButton",o)}const M=I("MuiIconButton",["root","disabled","colorInherit","colorPrimary","colorSecondary","colorError","colorInfo","colorSuccess","colorWarning","edgeStart","edgeEnd","sizeSmall","sizeMedium","sizeLarge"]),E=["edge","children","className","color","disabled","disableFocusRipple","size"],_=o=>{const{classes:a,disabled:r,color:e,edge:i,size:l}=o,n={root:["root",r&&"disabled",e!=="default"&&`color${t(e)}`,i&&`edge${t(i)}`,`size${t(l)}`]};return B(n,k,a)},j=C(h,{name:"MuiIconButton",slot:"Root",overridesResolver:(o,a)=>{const{ownerState:r}=o;return[a.root,r.color!=="default"&&a[`color${t(r.color)}`],r.edge&&a[`edge${t(r.edge)}`],a[`size${t(r.size)}`]]}})(({theme:o,ownerState:a})=>s({textAlign:"center",flex:"0 0 auto",fontSize:o.typography.pxToRem(24),padding:8,borderRadius:"50%",overflow:"visible",color:(o.vars||o).palette.action.active,transition:o.transitions.create("background-color",{duration:o.transitions.duration.shortest})},!a.disableRipple&&{"&:hover":{backgroundColor:o.vars?`rgba(${o.vars.palette.action.activeChannel} / ${o.vars.palette.action.hoverOpacity})`:u.alpha(o.palette.action.active,o.palette.action.hoverOpacity),"@media (hover: none)":{backgroundColor:"transparent"}}},a.edge==="start"&&{marginLeft:a.size==="small"?-3:-12},a.edge==="end"&&{marginRight:a.size==="small"?-3:-12}),({theme:o,ownerState:a})=>{var r;const e=(r=(o.vars||o).palette)==null?void 0:r[a.color];return s({},a.color==="inherit"&&{color:"inherit"},a.color!=="inherit"&&a.color!=="default"&&s({color:e==null?void 0:e.main},!a.disableRipple&&{"&:hover":s({},e&&{backgroundColor:o.vars?`rgba(${e.mainChannel} / ${o.vars.palette.action.hoverOpacity})`:u.alpha(e.main,o.palette.action.hoverOpacity)},{"@media (hover: none)":{backgroundColor:"transparent"}})}),a.size==="small"&&{padding:5,fontSize:o.typography.pxToRem(18)},a.size==="large"&&{padding:12,fontSize:o.typography.pxToRem(28)},{[`&.${M.disabled}`]:{backgroundColor:"transparent",color:(o.vars||o).palette.action.disabled}})}),F=x.forwardRef(function(a,r){const e=y({props:a,name:"MuiIconButton"}),{edge:i=!1,children:l,className:n,color:g="default",disabled:c=!1,disableFocusRipple:d=!1,size:f="medium"}=e,v=z(e,E),p=s({},e,{edge:i,color:g,disabled:c,disableFocusRipple:d,size:f}),b=_(p);return $.jsx(j,s({className:R(b.root,n),centerRipple:!0,focusRipple:!d,disabled:c,ref:r},v,{ownerState:p,children:l}))});export{F as I};

package/dist/assets/IconWithTooltip _icons_.stories-BriwOCod.js

@@ -0,0 +1,19 @@
+import{j as n}from"./jsx-runtime-CnH95YSl.js";import{w as x,u as p}from"./index-BJMTVygn.js";import{a as T}from"./axeRun-BfHtukUP.js";import{n as b}from"./createTheme-BmPXDA4p.js";import{r as I}from"./index-NdkWRN8K.js";import{u as w}from"./MuiPropsContext-DhRylJZk.js";import{u as v}from"./OdysseyDesignTokensContext-BWQIA5ie.js";import{T as C}from"./Tooltip-B4GIR2eB.js";import{M}from"./InformationCircle-B71JRUfK.js";import{M as O}from"./Group-W0XqkWVH.js";import"./_commonjsHelpers-gnU0ypJ3.js";import"./index-CpbQl8EB.js";import"./tooltipClasses-C74HjonW.js";import"./generateUtilityClasses-DYvjsuMV.js";import"./DefaultPropsProvider-B7tpShA7.js";import"./Grow-CIie3qhp.js";import"./utils-gq6yExow.js";import"./useTheme-C05bJKih.js";import"./inheritsLoose-CWawPfk8.js";import"./index-B5xazMy1.js";import"./index-DieBXP3Z.js";import"./TransitionGroupContext-twgBS-Q3.js";import"./useIsFocusVisible-DH0qxT5e.js";import"./Portal-Bvf2g5iG.js";import"./resolveComponentProps-DMpKAZvD.js";import"./isHostComponent-DVu5iVWx.js";import"./useControlled-NQulfz4l.js";import"./useId-cMcvCE23.js";import"./Popper-CwLH-7YW.js";import"./ownerDocument-DW-IO8s5.js";import"./popper-CMBiYTiD.js";import"./SvgIcon-BQAg6Jm7.js";const j=b.span(({odysseyDesignTokens:t})=>({display:"inline-flex",transitionProperty:"border-color, box-shadow, outline",transitionDuration:t.TransitionDurationMain,border:"1px solid transparent","&:focus, &:focus-visible":{borderColor:t.FocusOutlineColorPrimary,boxShadow:`0 0 0 1px ${t.FocusOutlineColorPrimary}`,outline:`${t.FocusOutlineWidthMain} ${t.FocusOutlineStyle} transparent`,outlineOffset:t.FocusOutlineOffsetTight},svg:{display:"flex"}})),E=({IconComponent:t=n.jsx(M,{}),placement:o="right",testId:a,tooltipText:s,translate:e})=>{const g=w(),y=v();return n.jsx(C,{"data-se":a,describeChild:!0,placement:o,tabIndex:0,title:s,translate:e,children:n.jsx(j,{odysseyDesignTokens:y,...g,children:t})})},f=I.memo(E);f.displayName="IconWithTooltip";const pt={component:f,argTypes:{IconComponent:{description:"The icon to render",table:{type:{summary:"ReactNode"},defaultValue:{summary:"<InformationCircleIcon />"}},type:{required:!0,name:"string"}},tooltipText:{control:"text",description:"The text to display in the tooltip",table:{type:{summary:"string"}},type:{required:!0,name:"string"}},placement:{options:["top","right","bottom","left"],control:{type:"radio"},description:"The placement of the tooltip",table:{type:{summary:"top | right | bottom | left"},defaultValue:{summary:"right"}}}},args:{testId:"tooltip"},tags:["autodocs"]},W=({canvasElement:t,step:o})=>async a=>{await o("show the tooltip on hover",async()=>{const e=x(t).getByTitle("Use the `i` icon to give details that might not be critical but are 'good to know'");await p.hover(e),await T(a),await p.unhover(e)})},r={args:{tooltipText:"Use the `i` icon to give details that might not be critical but are 'good to know'"},play:async({canvasElement:t,step:o})=>{await W({canvasElement:t,step:o})("IconWithTooltip")}},i={args:{IconComponent:n.jsx(O,{}),tooltipText:"This is a group of people"}};var m,c,l;r.parameters={...r.parameters,docs:{...(m=r.parameters)==null?void 0:m.docs,source:{originalSource:`{
+  args: {
+    tooltipText: "Use the \`i\` icon to give details that might not be critical but are 'good to know'"
+  },
+  play: async ({
+    canvasElement,
+    step
+  }) => {
+    await showTooltip({
+      canvasElement,
+      step
+    })("IconWithTooltip");
+  }
+}`,...(l=(c=r.parameters)==null?void 0:c.docs)==null?void 0:l.source}}};var u,d,h;i.parameters={...i.parameters,docs:{...(u=i.parameters)==null?void 0:u.docs,source:{originalSource:`{
+  args: {
+    IconComponent: <GroupIcon />,
+    tooltipText: "This is a group of people"
+  }
+}`,...(h=(d=i.parameters)==null?void 0:d.docs)==null?void 0:h.source}}};const mt=["Default","AnyIcon"];export{i as AnyIcon,r as Default,mt as __namedExportsOrder,pt as default};

package/dist/assets/InformationCircle-B71JRUfK.js

@@ -0,0 +1 @@
+import{r}from"./index-NdkWRN8K.js";import{j as o}from"./jsx-runtime-CnH95YSl.js";import{S as i}from"./SvgIcon-BQAg6Jm7.js";const t=r.forwardRef((e,n)=>o.jsx(i,{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:"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 12Zm11-3.25a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5Zm1 2.75a1 1 0 1 0-2 0v6h2v-6Z",fill:"currentColor",fillRule:"evenodd"})})})),m=r.memo(t);m.displayName="InformationCircleIcon";export{m as M};

package/dist/assets/InputAdornment-CFgP75Dd.js

@@ -0,0 +1 @@
+import{_ as y,a as c,c as j,b as m}from"./createTheme-BmPXDA4p.js";import{r as f}from"./index-NdkWRN8K.js";import{u as C,F as I}from"./useFormControl-BMISTZuX.js";import{u as A,s as L,c as R}from"./DefaultPropsProvider-B7tpShA7.js";import{g as z,i as b}from"./inputAdornmentClasses-DYNxkEwO.js";import{j as r}from"./jsx-runtime-CnH95YSl.js";import{T as F}from"./Typography-D7-qxuiy.js";var x;const T=["children","className","component","disablePointerEvents","disableTypography","position","variant"],_=(o,t)=>{const{ownerState:s}=o;return[t.root,t[`position${m(s.position)}`],s.disablePointerEvents===!0&&t.disablePointerEvents,t[s.variant]]},$=o=>{const{classes:t,disablePointerEvents:s,hiddenLabel:n,position:e,size:a,variant:l}=o,p={root:["root",s&&"disablePointerEvents",e&&`position${m(e)}`,l,n&&"hiddenLabel",a&&`size${m(a)}`]};return R(p,z,t)},N=L("div",{name:"MuiInputAdornment",slot:"Root",overridesResolver:_})(({theme:o,ownerState:t})=>c({display:"flex",height:"0.01em",maxHeight:"2em",alignItems:"center",whiteSpace:"nowrap",color:(o.vars||o).palette.action.active},t.variant==="filled"&&{[`&.${b.positionStart}&:not(.${b.hiddenLabel})`]:{marginTop:16}},t.position==="start"&&{marginRight:8},t.position==="end"&&{marginLeft:8},t.disablePointerEvents===!0&&{pointerEvents:"none"})),k=f.forwardRef(function(t,s){const n=A({props:t,name:"MuiInputAdornment"}),{children:e,className:a,component:l="div",disablePointerEvents:p=!1,disableTypography:g=!1,position:u,variant:v}=n,P=y(n,T),i=C()||{};let d=v;v&&i.variant,i&&!d&&(d=i.variant);const h=c({},n,{hiddenLabel:i.hiddenLabel,size:i.size,disablePointerEvents:p,position:u,variant:d}),E=$(h);return r.jsx(I.Provider,{value:null,children:r.jsx(N,c({as:l,ownerState:h,className:j(E.root,a),ref:s},P,{children:typeof e=="string"&&!g?r.jsx(F,{color:"text.secondary",children:e}):r.jsxs(f.Fragment,{children:[u==="start"?x||(x=r.jsx("span",{className:"notranslate",children:"​"})):null,e]})}))})});export{k as I};

package/dist/assets/InputBase--xDu7aWm.js

@@ -0,0 +1,2 @@
+import{_ as he,a as d,c as ce,b as Y,f as Fe}from"./createTheme-BmPXDA4p.js";import{r as a}from"./index-NdkWRN8K.js";import{u as Ae,f as Be,F as Ie}from"./useFormControl-BMISTZuX.js";import{u as He,s as be,c as Ee}from"./DefaultPropsProvider-B7tpShA7.js";import{i as Pe}from"./utils-iop7lDec.js";import{g as We,i as ee}from"./inputBaseClasses-PAjj3ZBN.js";import{j as C}from"./jsx-runtime-CnH95YSl.js";import{u as ge}from"./useIsFocusVisible-DH0qxT5e.js";import{a as Te,u as te}from"./TransitionGroupContext-twgBS-Q3.js";import{o as pe}from"./ownerWindow-HkKU3E4x.js";import{d as Me}from"./debounce-Be36O1Ab.js";import{i as fe}from"./isHostComponent-DVu5iVWx.js";import{G as Oe}from"./GlobalStyles-BxDN_5FT.js";const Le=["onChange","maxRows","minRows","style","value"];function $(t){return parseInt(t,10)||0}const Ne={shadow:{visibility:"hidden",position:"absolute",overflow:"hidden",height:0,top:0,left:0,transform:"translateZ(0)"}};function je(t){for(const e in t)return!1;return!0}function me(t){return je(t)||t.outerHeightStyle===0&&!t.overflowing}const $e=a.forwardRef(function(e,o){const{onChange:p,maxRows:u,minRows:c=1,style:k,value:F}=e,E=he(e,Le),{current:w}=a.useRef(F!=null),f=a.useRef(null),A=ge(o,f),m=a.useRef(null),R=a.useRef(null),y=a.useCallback(()=>{const l=f.current,n=R.current;if(!l||!n)return;const s=pe(l).getComputedStyle(l);if(s.width==="0px")return{outerHeightStyle:0,overflowing:!1};n.style.width=s.width,n.value=l.value||e.placeholder||"x",n.value.slice(-1)===`
+`&&(n.value+=" ");const D=s.boxSizing,z=$(s.paddingBottom)+$(s.paddingTop),O=$(s.borderBottomWidth)+$(s.borderTopWidth),W=n.scrollHeight;n.value="x";const I=n.scrollHeight;let x=W;c&&(x=Math.max(Number(c)*I,x)),u&&(x=Math.min(Number(u)*I,x)),x=Math.max(x,I);const _=x+(D==="border-box"?z+O:0),G=Math.abs(x-W)<=1;return{outerHeightStyle:_,overflowing:G}},[u,c,e.placeholder]),B=Te(()=>{const l=f.current,n=y();if(!l||!n||me(n))return!1;const g=n.outerHeightStyle;return m.current!=null&&m.current!==g}),S=a.useCallback(()=>{const l=f.current,n=y();if(!l||!n||me(n))return;const g=n.outerHeightStyle;m.current!==g&&(m.current=g,l.style.height=`${g}px`),l.style.overflow=n.overflowing?"hidden":""},[y]),P=a.useRef(-1);te(()=>{const l=Me(S),n=f==null?void 0:f.current;if(!n)return;const g=pe(n);g.addEventListener("resize",l);let s;return typeof ResizeObserver<"u"&&(s=new ResizeObserver(()=>{B()&&(s.unobserve(n),cancelAnimationFrame(P.current),S(),P.current=requestAnimationFrame(()=>{s.observe(n)}))}),s.observe(n)),()=>{l.clear(),cancelAnimationFrame(P.current),g.removeEventListener("resize",l),s&&s.disconnect()}},[y,S,B]),te(()=>{S()});const h=l=>{w||S(),p&&p(l)};return C.jsxs(a.Fragment,{children:[C.jsx("textarea",d({value:F,onChange:h,ref:A,rows:c,style:k},E)),C.jsx("textarea",{"aria-hidden":!0,className:e.className,readOnly:!0,ref:R,tabIndex:-1,style:d({},Ne.shadow,k,{paddingTop:0,paddingBottom:0})})]})}),De=["aria-describedby","autoComplete","autoFocus","className","color","components","componentsProps","defaultValue","disabled","disableInjectingGlobalStyles","endAdornment","error","fullWidth","id","inputComponent","inputProps","inputRef","margin","maxRows","minRows","multiline","name","onBlur","onChange","onClick","onFocus","onKeyDown","onKeyUp","placeholder","readOnly","renderSuffix","rows","size","slotProps","slots","startAdornment","type","value"],_e=(t,e)=>{const{ownerState:o}=t;return[e.root,o.formControl&&e.formControl,o.startAdornment&&e.adornedStart,o.endAdornment&&e.adornedEnd,o.error&&e.error,o.size==="small"&&e.sizeSmall,o.multiline&&e.multiline,o.color&&e[`color${Y(o.color)}`],o.fullWidth&&e.fullWidth,o.hiddenLabel&&e.hiddenLabel]},Ge=(t,e)=>{const{ownerState:o}=t;return[e.input,o.size==="small"&&e.inputSizeSmall,o.multiline&&e.inputMultiline,o.type==="search"&&e.inputTypeSearch,o.startAdornment&&e.inputAdornedStart,o.endAdornment&&e.inputAdornedEnd,o.hiddenLabel&&e.inputHiddenLabel]},qe=t=>{const{classes:e,color:o,disabled:p,error:u,endAdornment:c,focused:k,formControl:F,fullWidth:E,hiddenLabel:w,multiline:f,readOnly:A,size:m,startAdornment:R,type:y}=t,B={root:["root",`color${Y(o)}`,p&&"disabled",u&&"error",E&&"fullWidth",k&&"focused",F&&"formControl",m&&m!=="medium"&&`size${Y(m)}`,f&&"multiline",R&&"adornedStart",c&&"adornedEnd",w&&"hiddenLabel",A&&"readOnly"],input:["input",p&&"disabled",y==="search"&&"inputTypeSearch",f&&"inputMultiline",m==="small"&&"inputSizeSmall",w&&"inputHiddenLabel",R&&"inputAdornedStart",c&&"inputAdornedEnd",A&&"readOnly"]};return Ee(B,We,e)},Ke=be("div",{name:"MuiInputBase",slot:"Root",overridesResolver:_e})(({theme:t,ownerState:e})=>d({},t.typography.body1,{color:(t.vars||t).palette.text.primary,lineHeight:"1.4375em",boxSizing:"border-box",position:"relative",cursor:"text",display:"inline-flex",alignItems:"center",[`&.${ee.disabled}`]:{color:(t.vars||t).palette.text.disabled,cursor:"default"}},e.multiline&&d({padding:"4px 0 5px"},e.size==="small"&&{paddingTop:1}),e.fullWidth&&{width:"100%"})),Ue=be("input",{name:"MuiInputBase",slot:"Input",overridesResolver:Ge})(({theme:t,ownerState:e})=>{const o=t.palette.mode==="light",p=d({color:"currentColor"},t.vars?{opacity:t.vars.opacity.inputPlaceholder}:{opacity:o?.42:.5},{transition:t.transitions.create("opacity",{duration:t.transitions.duration.shorter})}),u={opacity:"0 !important"},c=t.vars?{opacity:t.vars.opacity.inputPlaceholder}:{opacity:o?.42:.5};return d({font:"inherit",letterSpacing:"inherit",color:"currentColor",padding:"4px 0 5px",border:0,boxSizing:"content-box",background:"none",height:"1.4375em",margin:0,WebkitTapHighlightColor:"transparent",display:"block",minWidth:0,width:"100%",animationName:"mui-auto-fill-cancel",animationDuration:"10ms","&::-webkit-input-placeholder":p,"&::-moz-placeholder":p,"&:-ms-input-placeholder":p,"&::-ms-input-placeholder":p,"&:focus":{outline:0},"&:invalid":{boxShadow:"none"},"&::-webkit-search-decoration":{WebkitAppearance:"none"},[`label[data-shrink=false] + .${ee.formControl} &`]:{"&::-webkit-input-placeholder":u,"&::-moz-placeholder":u,"&:-ms-input-placeholder":u,"&::-ms-input-placeholder":u,"&:focus::-webkit-input-placeholder":c,"&:focus::-moz-placeholder":c,"&:focus:-ms-input-placeholder":c,"&:focus::-ms-input-placeholder":c},[`&.${ee.disabled}`]:{opacity:1,WebkitTextFillColor:(t.vars||t).palette.text.disabled},"&:-webkit-autofill":{animationDuration:"5000s",animationName:"mui-auto-fill"}},e.size==="small"&&{paddingTop:1},e.multiline&&{height:"auto",resize:"none",padding:0,paddingTop:0},e.type==="search"&&{MozAppearance:"textfield"})}),Ve=C.jsx(Oe,{styles:{"@keyframes mui-auto-fill":{from:{display:"block"}},"@keyframes mui-auto-fill-cancel":{from:{display:"block"}}}}),st=a.forwardRef(function(e,o){var p;const u=He({props:e,name:"MuiInputBase"}),{"aria-describedby":c,autoComplete:k,autoFocus:F,className:E,components:w={},componentsProps:f={},defaultValue:A,disabled:m,disableInjectingGlobalStyles:R,endAdornment:y,fullWidth:B=!1,id:S,inputComponent:P="input",inputProps:h={},inputRef:l,maxRows:n,minRows:g,multiline:s=!1,name:D,onBlur:z,onChange:O,onClick:W,onFocus:I,onKeyDown:x,onKeyUp:_,placeholder:G,readOnly:q,renderSuffix:oe,rows:L,slotProps:ne={},slots:re={},startAdornment:T,type:ie="text",value:xe}=u,ye=he(u,De),N=h.value!=null?h.value:xe,{current:K}=a.useRef(N!=null),H=a.useRef(),ve=a.useCallback(r=>{},[]),Ce=ge(H,l,h.ref,ve),[U,V]=a.useState(!1),i=Ae(),b=Be({props:u,muiFormControl:i,states:["color","disabled","error","hiddenLabel","size","required","filled"]});b.focused=i?i.focused:U,a.useEffect(()=>{!i&&m&&U&&(V(!1),z&&z())},[i,m,U,z]);const Z=i&&i.onFilled,J=i&&i.onEmpty,M=a.useCallback(r=>{Pe(r)?Z&&Z():J&&J()},[Z,J]);te(()=>{K&&M({value:N})},[N,M,K]);const we=r=>{if(b.disabled){r.stopPropagation();return}I&&I(r),h.onFocus&&h.onFocus(r),i&&i.onFocus?i.onFocus(r):V(!0)},Re=r=>{z&&z(r),h.onBlur&&h.onBlur(r),i&&i.onBlur?i.onBlur(r):V(!1)},Se=(r,...ue)=>{if(!K){const de=r.target||H.current;if(de==null)throw new Error(Fe(1));M({value:de.value})}h.onChange&&h.onChange(r,...ue),O&&O(r,...ue)};a.useEffect(()=>{M(H.current)},[]);const ze=r=>{H.current&&r.currentTarget===r.target&&H.current.focus(),W&&W(r)};let Q=P,v=h;s&&Q==="input"&&(L?v=d({type:void 0,minRows:L,maxRows:L},v):v=d({type:void 0,maxRows:n,minRows:g},v),Q=$e);const ke=r=>{M(r.animationName==="mui-auto-fill-cancel"?H.current:{value:"x"})};a.useEffect(()=>{i&&i.setAdornedStart(!!T)},[i,T]);const j=d({},u,{color:b.color||"primary",disabled:b.disabled,endAdornment:y,error:b.error,focused:b.focused,formControl:i,fullWidth:B,hiddenLabel:b.hiddenLabel,multiline:s,size:b.size,startAdornment:T,type:ie}),ae=qe(j),le=re.root||w.Root||Ke,X=ne.root||f.root||{},se=re.input||w.Input||Ue;return v=d({},v,(p=ne.input)!=null?p:f.input),C.jsxs(a.Fragment,{children:[!R&&Ve,C.jsxs(le,d({},X,!fe(le)&&{ownerState:d({},j,X.ownerState)},{ref:o,onClick:ze},ye,{className:ce(ae.root,X.className,E,q&&"MuiInputBase-readOnly"),children:[T,C.jsx(Ie.Provider,{value:null,children:C.jsx(se,d({ownerState:j,"aria-invalid":b.error,"aria-describedby":c,autoComplete:k,autoFocus:F,defaultValue:A,disabled:b.disabled,id:S,onAnimationStart:ke,name:D,placeholder:G,readOnly:q,required:b.required,rows:L,value:N,onKeyDown:x,onKeyUp:_,type:ie},v,!fe(se)&&{as:Q,ownerState:d({},j,v.ownerState)},{ref:Ce,className:ce(ae.input,v.className,q&&"MuiInputBase-readOnly"),onBlur:Re,onChange:Se,onFocus:we}))}),y,oe?oe(d({},b,{startAdornment:T})):null]}))]})});export{st as I,Ke as a,Ue as b,Ge as i,_e as r};

package/dist/assets/Installing odyssey-react-mui-FI77Ty6y.js

@@ -0,0 +1,195 @@
+import{j as e}from"./jsx-runtime-CnH95YSl.js";import{useMDXComponents as s}from"./index-BeeV6X6A.js";import{M as r}from"./index-BpVuOoKb.js";import{M as a}from"./index.modern-CkASn_bb.js";import"./index-NdkWRN8K.js";import"./_commonjsHelpers-gnU0ypJ3.js";import"./iframe-C-RQ_TKY.js";import"./index-BJTM6NaI.js";import"./index-B5xazMy1.js";import"./index-DieBXP3Z.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";const i=`# @okta/odyssey-react-mui
+
+## Production Readiness
+
+Odyssey is production-ready and available to use for real things. The API
+is stable for the duration of the point-release, meaning that while Odyssey is
+in version 1.x.x, there will be no changes that break the API.
+
+This project follows semantic versioning conventions:
+
+- **Major point releases** may include breaking changes, but the API is stable for the duration of
+  the major point release (for example, 1.x.x)
+- **Minor point releases** include new features and are backwards-compatible (eg, x.1.x)
+- **Patch releases** include bug fixes (eg, x.x.1)
+
+## Getting Started
+
+Install the package and peer dependencies:
+
+\`\`\`sh
+yarn add @okta/odyssey-react-mui
+\`\`\`
+
+Include fonts:
+
+\`\`\`html
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
+  rel="stylesheet"
+/>
+\`\`\`
+
+Import named ESM exports:
+
+\`\`\`js
+import { PasswordInput } from "@okta/odyssey-react-mui";
+\`\`\`
+
+Add the Odyssey \`OdysseyProvider\` around your whole app:
+
+\`\`\`jsx
+import { OdysseyProvider } from "@okta/odyssey-react-mui";
+
+const YourAppRoot = ({ children }) => (
+  <OdysseyProvider>
+    <CssBaseline />
+    {children}
+  </OdysseyProvider>
+);
+\`\`\`
+
+Add Material-UI components not exported from Odyssey with Odyssey styling or add your own theme to MUI:
+
+\`\`\`sh
+yarn add @mui/material
+\`\`\`
+
+\`\`\`jsx
+import { OdysseyThemeProvider } from "@okta/odyssey-react-mui";
+
+import { myMaterialUiTheme } from "./myMaterialUiTheme.js";
+
+const YourAppRoot = ({ children }) => (
+  <OdysseyThemeProvider theme={myMaterialUiTheme}>
+    {children}
+  <OdysseyThemeProvider>
+);
+\`\`\`
+
+### Upgrade Piecemeal
+
+It’s possible to have 2 versions of Odyssey running at the same time, so when adding MUI, you can do it piecemeal.
+
+This is how you setup two \`OdysseyProvider\`s like so:
+
+\`\`\`jsx
+import { OdysseyProvider } from "@okta/odyssey-react-mui";
+import { ThemeProvider as OdysseyLegacyThemeProvider } from "@okta/odyssey-react-theme";
+
+const YourAppRoot = ({ children }) => (
+  <OdysseyProvider>
+    <OdysseyLegacyThemeProvider>{children}</OdysseyLegacyThemeProvider>
+  </OdysseyProvider>
+);
+\`\`\`
+
+### Overrides
+
+It is possible to provide \`nonce\`, \`themeOverride\`, \`languageCode\` and \`translationOverrides\` to the underlying components via props:
+
+\`\`\`jsx
+import { OdysseyProvider } from "@okta/odyssey-react-mui";
+import { theme } from "./themeOverride.js";
+
+const nonce =
+  "K6ybeaqlwaAKk0hQF?hE2qZ0Ar3M=G4Bpr-XFk1x4XbL3dH3T5=mk0aXeWX9ifn9";
+
+const languageCode = "en";
+
+const translationOverrides = {
+  en: {
+    "fieldlabel.optional.text": "Not Required",
+  },
+  fr: {
+    "fieldlabel.optional.text": "Non Requis",
+  },
+};
+
+const YourAppRoot = ({ children }) => (
+  <OdysseyProvider
+    nonce={nonce}
+    themeOverride={theme}
+    languageCode={languageCode}
+    translationOverrides={translationOverrides}
+  >
+    {children}
+  </OdysseyProvider>
+);
+\`\`\`
+
+### Generating ok-PL and ok-SK files
+
+Right now we do not have the code to generate these files in Odyssey.
+
+If you are an Okta employee, the easiest way to generate these files is to replace the English properties file of another project and run the build commands to get the ok-PL and ok-SK versions. For ok-SK, you will also need to replace the prefix with \`odyssey:odyssey-react-mui: \`.
+
+If you are not an Okta employee, please file an issue request for assistance.
+
+## Components
+
+Components are published in an ESM format transpiled for the modern browsers
+within the [Okta supported browser list][1]. These modules can be served
+directly to evergreen browsers for simple applications, or further transpiled,
+bundled, and polyfilled for advanced use cases and browser support targets.
+
+[1]: https://help.okta.com/en/prod/Content/Topics/Miscellaneous/Platforms_Browser_OS_Support.htm
+
+## Running odyssey-react-mui for local development
+
+Follow these steps for local [Odyssey development](https://odyssey-storybook.okta.design/?path=/docs/contributing-odyssey-development--docs)
+
+## Downstream Testing
+
+Local changes can be tested in various other okta packages using the \`yarn ok-ui downstream\` command, which will clone
+the specified repos, applies the changes from your local version via linking, and then run the build and test commands
+for the specified packages. Logs for the output of these individual commands can be found under \`ok-ui-logs/downstream\`.
+
+To enable verbose logging use the \`-v\` flag.
+
+By default, repos from previous test runs will be reused to speed up yarn install times. If you want to avoid using
+these cached repos, then use the \`--forceGitClone\` flag
+
+You can configure which packages to test using the \`ok.yaml\` config file.
+
+example:
+
+\`\`\`yaml
+downstream:
+  # Determines if any packages should be linked in addition to the target package
+  additionalWorkspaces:
+    - "@okta/odyssey-design-tokens"
+
+  # List of repos to clone
+  repos:
+    - repoName: "example-react-spa"
+      url: "https://github.com/atko-eng/example-react-spa.git"
+      # List of packages to test for this repo
+      packages:
+        - pkgName: "@okta/example-react-spa"
+    - repoName: "admin-ui"
+      # optionally override the command used to build the packages
+      buildCmd: "FORCE_COLOR=true yarn build:all"
+      # url to colone from
+      url: "https://github.com/atko-eng/admin-ui.git"
+      # List of packages to test for this repo
+      packages:
+        - pkgName: "@okta/admin-v2.admin-app-react"
+          # optionally override the command used to test the package
+          testCmd: "yarn run vitest"
+        - pkgName: "@okta/admin-v2.admin-dashboard"
+\`\`\`
+
+## License
+
+[Apache Version 2.0](https://github.com/atko-eng/odyssey-design-system/blob/master/LICENSE)
+
+## Support Disclaimer
+
+This library is community supported and is maintained by members of the Okta team for developers and IT professionals.
+This library is not an official Okta product and does not qualify for any Okta support. Anyone who chooses to use this
+library must ensure that their implementation meets any applicable legal obligations including any Okta terms and conditions.
+`;function t(n){return e.jsxs(e.Fragment,{children:[e.jsx(r,{}),`
+`,e.jsx(a,{children:i})]})}function b(n={}){const{wrapper:o}={...s(),...n.components};return o?e.jsx(o,{...n,children:e.jsx(t,{...n})}):t()}export{b as default};

package/dist/assets/Introduction-B_2OeBP6.js

@@ -0,0 +1,46 @@
+import{j as e}from"./jsx-runtime-CnH95YSl.js";import{useMDXComponents as n}from"./index-BeeV6X6A.js";import{M as r}from"./index-BpVuOoKb.js";import{M as i}from"./index.modern-CkASn_bb.js";import"./index-NdkWRN8K.js";import"./_commonjsHelpers-gnU0ypJ3.js";import"./iframe-C-RQ_TKY.js";import"./index-BJTM6NaI.js";import"./index-B5xazMy1.js";import"./index-DieBXP3Z.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";const a=`Welcome to your new repo, odyssey-design-system!
+
+This is a default readme file created to provide some helpful links and first steps.
+A lot of your questions might already exist in our [wiki page](http://bit.ly/EngFAQ), so please check there first.
+
+Please reach out to us over on [#eng-release](https://okta.slack.com/archives/C7L27G2Q5) or
+[#eng-productivity](https://okta.slack.com/archives/C7LQ4U8T0) for any additional assistance you might require.
+
+# Odyssey Design System
+
+Build and design consistent, efficient, and accessible UIs for all Okta users.
+
+## Odyssey Core Packages
+
+| Package/README                                                                                                                                         | Description          |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------- |
+| [@okta/odyssey-design-tokens](https://github.com/atko-eng/odyssey-design-system/blob/master/packages/core/odyssey-design-tokens/README.md)             | Design tokens        |
+| [@okta/browserslist-config-odyssey](https://github.com/atko-eng/odyssey-design-system/blob/master/packages/core/browserslist-config-odyssey/README.md) | Browserslist config  |
+| [@okta/odyssey-react-mui](https://github.com/atko-eng/odyssey-design-system/blob/master/packages/core/odyssey-react-mui/README.md)                     | React MUI components |
+
+## Browser Support
+
+Odyssey browser support mirrors Okta's [Supported platforms, browsers, and operating systems](https://help.okta.com/en/prod/Content/Topics/Miscellaneous/Platforms_Browser_OS_Support.htm) with the exception of IE 11.
+
+## Generating Okta Test Language files
+
+The \`*_ok_PL.properties\` and \`*_ok_SK.properties\` will automatically be generated pre-commit if there are changes to the
+main \`.properties\` file.
+
+To manually generate them, run the following command:
+
+\`\`\`bash
+yarn generate:pseudoLocales
+\`\`\`
+
+## License
+
+[Apache Version 2.0](https://github.com/atko-eng/odyssey-design-system/blob/main/LICENSE)
+
+## Support Disclaimer
+
+This library is community supported and is maintained by members of the Okta team for developers and IT professionals.
+This library is not an official Okta product and does not qualify for any Okta support. Anyone who chooses to use this
+library must ensure that their implementation meets any applicable legal obligations including any Okta terms and conditions.
+`;function o(s){return e.jsxs(e.Fragment,{children:[e.jsx(r,{title:"Introduction (README)"}),`
+`,e.jsx(i,{children:a})]})}function w(s={}){const{wrapper:t}={...n(),...s.components};return t?e.jsx(t,{...s,children:e.jsx(o,{...s})}):o()}export{w as default};

package/dist/assets/Layout-Bojn6-Uj.js

@@ -0,0 +1,11 @@
+import{n as t}from"./createTheme-BmPXDA4p.js";import{r as e}from"./index-NdkWRN8K.js";import{M as m}from"./Box-BXOPvc0Q.js";import{u as p}from"./OdysseyDesignTokensContext-BWQIA5ie.js";import{j as n}from"./jsx-runtime-CnH95YSl.js";/*!
+ * Copyright (c) 2024-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.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */const d=t("div",{shouldForwardProp:o=>!["odysseyDesignTokens","regions"].includes(o)})(({odysseyDesignTokens:o,regions:r})=>({display:"grid",gridTemplateColumns:r,gridColumnGap:o.Spacing4,columnGap:o.Spacing4,"& + &":{marginBlockStart:o.Spacing4}})),c=({regions:o,children:r})=>{const i=p(),a=o.map(s=>`minmax(0, ${s}fr)`).join(" ");return n.jsx(m,{children:n.jsx(d,{odysseyDesignTokens:i,regions:a,children:e.Children.toArray(r).map(s=>s)})})},l=e.memo(c);l.displayName="Layout";export{l as M};

package/dist/assets/Layout.stories-BN7leK7P.js

@@ -0,0 +1,217 @@
+import{j as n}from"./jsx-runtime-CnH95YSl.js";import{n as x}from"./emotion-styled.browser.esm-Bcn7fuYX.js";import{M as o}from"./Layout-Bojn6-Uj.js";import{c as G}from"./Typography-CiNRLenM.js";import"./index-NdkWRN8K.js";import"./_commonjsHelpers-gnU0ypJ3.js";import"./createTheme-BmPXDA4p.js";import"./Box-BXOPvc0Q.js";import"./Box-C2ekHaOu.js";import"./generateUtilityClasses-DYvjsuMV.js";import"./useTheme-C05bJKih.js";import"./OdysseyDesignTokensContext-BWQIA5ie.js";import"./Typography-D7-qxuiy.js";import"./DefaultPropsProvider-B7tpShA7.js";import"./typographyClasses-D8vr2n3l.js";const e=x.div({display:"flex",alignItems:"center",justifyContent:"center",padding:"16px",border:"1px dashed #cbcbcb"}),i=x.h3({margin:0}),H=x.div({maxWidth:"55ch",marginBlockEnd:"8px"}),J=()=>n.jsx(H,{children:n.jsxs(G,{children:[n.jsx("strong",{children:"NOTE:"})," Dashed border and padding are applied to show region boundries in Storybook only. They will not be present when you are using Layout"]})}),g=x.div({"& + &":{marginBlockStart:"16px"}}),tn={component:o,argTypes:{regions:{control:"text",description:"The supported region ratios for the `Layout`. Each number is a fractional unit that is mapped to the 'fr' CSS unit. For example: [2, 1] defines a 2/3, 1/3 layout and [1, 1, 1] defines a 1/3, 1/3, 1/3 layout",table:{type:{summary:"SupportedRegionRatios"}}},children:{description:"The content of the `Layout`. May be a `string` or any other `ReactNode` or array of `ReactNode`s. Will often be either a single `Surface` or multiple `Surface's",table:{type:{summary:"ReactNode"}}}},decorators:[s=>n.jsxs(n.Fragment,{children:[n.jsx(J,{}),n.jsx(s,{})]})]},a={args:{regions:[1]},render:function(r){return n.jsx(o,{...r,children:n.jsx(e,{children:n.jsx(i,{children:"Region"})})})}},l={args:{regions:[1,1]},render:function(r){return n.jsxs(o,{...r,children:[n.jsx(e,{children:n.jsx(i,{children:"Region"})}),n.jsx(e,{children:n.jsx(i,{children:"Region"})})]})}},t={args:{regions:[2,1]},render:function(r){return n.jsxs(o,{...r,children:[n.jsx(e,{children:n.jsx(i,{children:"Region"})}),n.jsx(e,{children:n.jsx(i,{children:"Region"})})]})}},R={args:{regions:[1,2]},render:function(r){return n.jsxs(o,{...r,children:[n.jsx(e,{children:n.jsx(i,{children:"Region"})}),n.jsx(e,{children:n.jsx(i,{children:"Region"})})]})}},c={args:{regions:[3,1]},render:function(r){return n.jsxs(o,{...r,children:[n.jsx(e,{children:n.jsx(i,{children:"Region"})}),n.jsx(e,{children:n.jsx(i,{children:"Region"})})]})}},d={args:{regions:[1,3]},render:function(r){return n.jsxs(o,{...r,children:[n.jsx(e,{children:n.jsx(i,{children:"Region"})}),n.jsx(e,{children:n.jsx(i,{children:"Region"})})]})}},b={args:{regions:[1,1,1]},render:function(r){return n.jsxs(o,{...r,children:[n.jsx(e,{children:n.jsx(i,{children:"Region"})}),n.jsx(e,{children:n.jsx(i,{children:"Region"})}),n.jsx(e,{children:n.jsx(i,{children:"Region"})})]})}},h={args:{regions:[1,1,1,1]},render:function(r){return n.jsxs(o,{...r,children:[n.jsx(e,{children:n.jsx(i,{children:"Region"})}),n.jsx(e,{children:n.jsx(i,{children:"Region"})}),n.jsx(e,{children:n.jsx(i,{children:"Region"})}),n.jsx(e,{children:n.jsx(i,{children:"Region"})})]})}},u={render:function(){return n.jsxs(n.Fragment,{children:[n.jsx(g,{children:n.jsx(o,{regions:[1],children:n.jsx(e,{children:n.jsx(i,{children:"Region"})})})}),n.jsx(g,{children:n.jsxs(o,{regions:[1,1],children:[n.jsx(e,{children:n.jsx(i,{children:"Region"})}),n.jsx(e,{children:n.jsx(i,{children:"Region"})})]})}),n.jsx(g,{children:n.jsxs(o,{regions:[2,1],children:[n.jsx(e,{children:n.jsx(i,{children:"Region"})}),n.jsx(e,{children:n.jsx(i,{children:"Region"})})]})}),n.jsx(g,{children:n.jsxs(o,{regions:[1,2],children:[n.jsx(e,{children:n.jsx(i,{children:"Region"})}),n.jsx(e,{children:n.jsx(i,{children:"Region"})})]})}),n.jsx(g,{children:n.jsxs(o,{regions:[3,1],children:[n.jsx(e,{children:n.jsx(i,{children:"Region"})}),n.jsx(e,{children:n.jsx(i,{children:"Region"})})]})}),n.jsx(g,{children:n.jsxs(o,{regions:[1,3],children:[n.jsx(e,{children:n.jsx(i,{children:"Region"})}),n.jsx(e,{children:n.jsx(i,{children:"Region"})})]})}),n.jsx(g,{children:n.jsxs(o,{regions:[1,1,1],children:[n.jsx(e,{children:n.jsx(i,{children:"Region"})}),n.jsx(e,{children:n.jsx(i,{children:"Region"})}),n.jsx(e,{children:n.jsx(i,{children:"Region"})})]})}),n.jsx(g,{children:n.jsxs(o,{regions:[1,1,1,1],children:[n.jsx(e,{children:n.jsx(i,{children:"Region"})}),n.jsx(e,{children:n.jsx(i,{children:"Region"})}),n.jsx(e,{children:n.jsx(i,{children:"Region"})}),n.jsx(e,{children:n.jsx(i,{children:"Region"})})]})})]})}};var L,j,p;a.parameters={...a.parameters,docs:{...(L=a.parameters)==null?void 0:L.docs,source:{originalSource:`{
+  args: {
+    regions: [1]
+  },
+  render: function C(args) {
+    return <Layout {...args}>
+        <VisibleRegion>
+          <RegionLabel>Region</RegionLabel>
+        </VisibleRegion>
+      </Layout>;
+  }
+}`,...(p=(j=a.parameters)==null?void 0:j.docs)==null?void 0:p.source}}};var m,V,y;l.parameters={...l.parameters,docs:{...(m=l.parameters)==null?void 0:m.docs,source:{originalSource:`{
+  args: {
+    regions: [1, 1]
+  },
+  render: function C(args) {
+    return <Layout {...args}>
+        <VisibleRegion>
+          <RegionLabel>Region</RegionLabel>
+        </VisibleRegion>
+        <VisibleRegion>
+          <RegionLabel>Region</RegionLabel>
+        </VisibleRegion>
+      </Layout>;
+  }
+}`,...(y=(V=l.parameters)==null?void 0:V.docs)==null?void 0:y.source}}};var C,f,S;t.parameters={...t.parameters,docs:{...(C=t.parameters)==null?void 0:C.docs,source:{originalSource:`{
+  args: {
+    regions: [2, 1]
+  },
+  render: function C(args) {
+    return <Layout {...args}>
+        <VisibleRegion>
+          <RegionLabel>Region</RegionLabel>
+        </VisibleRegion>
+        <VisibleRegion>
+          <RegionLabel>Region</RegionLabel>
+        </VisibleRegion>
+      </Layout>;
+  }
+}`,...(S=(f=t.parameters)==null?void 0:f.docs)==null?void 0:S.source}}};var M,T,E;R.parameters={...R.parameters,docs:{...(M=R.parameters)==null?void 0:M.docs,source:{originalSource:`{
+  args: {
+    regions: [1, 2]
+  },
+  render: function C(args) {
+    return <Layout {...args}>
+        <VisibleRegion>
+          <RegionLabel>Region</RegionLabel>
+        </VisibleRegion>
+        <VisibleRegion>
+          <RegionLabel>Region</RegionLabel>
+        </VisibleRegion>
+      </Layout>;
+  }
+}`,...(E=(T=R.parameters)==null?void 0:T.docs)==null?void 0:E.source}}};var F,w,k;c.parameters={...c.parameters,docs:{...(F=c.parameters)==null?void 0:F.docs,source:{originalSource:`{
+  args: {
+    regions: [3, 1]
+  },
+  render: function C(args) {
+    return <Layout {...args}>
+        <VisibleRegion>
+          <RegionLabel>Region</RegionLabel>
+        </VisibleRegion>
+        <VisibleRegion>
+          <RegionLabel>Region</RegionLabel>
+        </VisibleRegion>
+      </Layout>;
+  }
+}`,...(k=(w=c.parameters)==null?void 0:w.docs)==null?void 0:k.source}}};var N,v,D;d.parameters={...d.parameters,docs:{...(N=d.parameters)==null?void 0:N.docs,source:{originalSource:`{
+  args: {
+    regions: [1, 3]
+  },
+  render: function C(args) {
+    return <Layout {...args}>
+        <VisibleRegion>
+          <RegionLabel>Region</RegionLabel>
+        </VisibleRegion>
+        <VisibleRegion>
+          <RegionLabel>Region</RegionLabel>
+        </VisibleRegion>
+      </Layout>;
+  }
+}`,...(D=(v=d.parameters)==null?void 0:v.docs)==null?void 0:D.source}}};var z,B,K;b.parameters={...b.parameters,docs:{...(z=b.parameters)==null?void 0:z.docs,source:{originalSource:`{
+  args: {
+    regions: [1, 1, 1]
+  },
+  render: function C(args) {
+    return <Layout {...args}>
+        <VisibleRegion>
+          <RegionLabel>Region</RegionLabel>
+        </VisibleRegion>
+        <VisibleRegion>
+          <RegionLabel>Region</RegionLabel>
+        </VisibleRegion>
+        <VisibleRegion>
+          <RegionLabel>Region</RegionLabel>
+        </VisibleRegion>
+      </Layout>;
+  }
+}`,...(K=(B=b.parameters)==null?void 0:B.docs)==null?void 0:K.source}}};var O,W,_;h.parameters={...h.parameters,docs:{...(O=h.parameters)==null?void 0:O.docs,source:{originalSource:`{
+  args: {
+    regions: [1, 1, 1, 1]
+  },
+  render: function C(args) {
+    return <Layout {...args}>
+        <VisibleRegion>
+          <RegionLabel>Region</RegionLabel>
+        </VisibleRegion>
+        <VisibleRegion>
+          <RegionLabel>Region</RegionLabel>
+        </VisibleRegion>
+        <VisibleRegion>
+          <RegionLabel>Region</RegionLabel>
+        </VisibleRegion>
+        <VisibleRegion>
+          <RegionLabel>Region</RegionLabel>
+        </VisibleRegion>
+      </Layout>;
+  }
+}`,...(_=(W=h.parameters)==null?void 0:W.docs)==null?void 0:_.source}}};var I,q,A;u.parameters={...u.parameters,docs:{...(I=u.parameters)==null?void 0:I.docs,source:{originalSource:`{
+  render: function () {
+    return <>
+        <MarginContainer>
+          <Layout regions={[1]}>
+            <VisibleRegion>
+              <RegionLabel>Region</RegionLabel>
+            </VisibleRegion>
+          </Layout>
+        </MarginContainer>
+
+        <MarginContainer>
+          <Layout regions={[1, 1]}>
+            <VisibleRegion>
+              <RegionLabel>Region</RegionLabel>
+            </VisibleRegion>
+            <VisibleRegion>
+              <RegionLabel>Region</RegionLabel>
+            </VisibleRegion>
+          </Layout>
+        </MarginContainer>
+
+        <MarginContainer>
+          <Layout regions={[2, 1]}>
+            <VisibleRegion>
+              <RegionLabel>Region</RegionLabel>
+            </VisibleRegion>
+            <VisibleRegion>
+              <RegionLabel>Region</RegionLabel>
+            </VisibleRegion>
+          </Layout>
+        </MarginContainer>
+
+        <MarginContainer>
+          <Layout regions={[1, 2]}>
+            <VisibleRegion>
+              <RegionLabel>Region</RegionLabel>
+            </VisibleRegion>
+            <VisibleRegion>
+              <RegionLabel>Region</RegionLabel>
+            </VisibleRegion>
+          </Layout>
+        </MarginContainer>
+
+        <MarginContainer>
+          <Layout regions={[3, 1]}>
+            <VisibleRegion>
+              <RegionLabel>Region</RegionLabel>
+            </VisibleRegion>
+            <VisibleRegion>
+              <RegionLabel>Region</RegionLabel>
+            </VisibleRegion>
+          </Layout>
+        </MarginContainer>
+
+        <MarginContainer>
+          <Layout regions={[1, 3]}>
+            <VisibleRegion>
+              <RegionLabel>Region</RegionLabel>
+            </VisibleRegion>
+            <VisibleRegion>
+              <RegionLabel>Region</RegionLabel>
+            </VisibleRegion>
+          </Layout>
+        </MarginContainer>
+
+        <MarginContainer>
+          <Layout regions={[1, 1, 1]}>
+            <VisibleRegion>
+              <RegionLabel>Region</RegionLabel>
+            </VisibleRegion>
+            <VisibleRegion>
+              <RegionLabel>Region</RegionLabel>
+            </VisibleRegion>
+            <VisibleRegion>
+              <RegionLabel>Region</RegionLabel>
+            </VisibleRegion>
+          </Layout>
+        </MarginContainer>
+
+        <MarginContainer>
+          <Layout regions={[1, 1, 1, 1]}>
+            <VisibleRegion>
+              <RegionLabel>Region</RegionLabel>
+            </VisibleRegion>
+            <VisibleRegion>
+              <RegionLabel>Region</RegionLabel>
+            </VisibleRegion>
+            <VisibleRegion>
+              <RegionLabel>Region</RegionLabel>
+            </VisibleRegion>
+            <VisibleRegion>
+              <RegionLabel>Region</RegionLabel>
+            </VisibleRegion>
+          </Layout>
+        </MarginContainer>
+      </>;
+  }
+}`,...(A=(q=u.parameters)==null?void 0:q.docs)==null?void 0:A.source}}};const Rn=["Single","Split","TwoThirdsStart","TwoThirdsEnd","ThreeFourthsStart","ThreeFourthsEnd","ThreeRegionSplit","FourRegionSplit","KitchenSink"];export{h as FourRegionSplit,u as KitchenSink,a as Single,l as Split,d as ThreeFourthsEnd,c as ThreeFourthsStart,b as ThreeRegionSplit,R as TwoThirdsEnd,t as TwoThirdsStart,Rn as __namedExportsOrder,tn as default};