@okta/odyssey-react-mui 1.44.0 → 1.45.0

package/dist/assets/UiShell.stories-CcRPnzQe.js

@@ -0,0 +1,531 @@
+import{j as t}from"./jsx-runtime-CnH95YSl.js";import{f as te}from"./index-BJMTVygn.js";import{r as i}from"./index-NdkWRN8K.js";import{n as m,J as gt,K as vt,L as bt}from"./createTheme-BmPXDA4p.js";import{T as ft}from"./Tooltip-B4GIR2eB.js";import{B as St}from"./Button-BqwcAVQ-.js";import{P as xt}from"./PlaceholderLogo-JfVvgA23.js";import{E as C,a as Ct,M as Q}from"./SideNav-Duwk1--M.js";import{C as yt}from"./CssBaseline-C3xNeK8b.js";import{M as tt}from"./OdysseyProvider-BQyPcEvx.js";import{M as J}from"./Button-BOzIr8Jh.js";import{h as qt}from"./useContrastMode-BthoHtLy.js";import{M as Mt}from"./Close-DA7fBExu.js";import{M as Nt}from"./More-axx2rGKU.js";import{u as se}from"./OdysseyDesignTokensContext-BWQIA5ie.js";import{U as E,e as st,T as ee,S as ce}from"./uiShellSharedConstants-DD9UP82e.js";import{S as Pt}from"./SvgIcon-BQAg6Jm7.js";import{u as it,M as wt}from"./UiShellProvider-D1w1Ocw9.js";import{S as It}from"./Skeleton-BJLiCr2o.js";import{M as de}from"./AppSwitcher-D7UlQ3S8.js";import{M as me}from"./TopNav-CWVyy01x.js";import{a as at,u as kt,M as jt}from"./PageTemplate-DOXk_uAG.js";import{M as rt}from"./UserProfile-xXh984n9.js";import{M as ie}from"./User-BBdPovZN.js";import{M as Tt}from"./SearchField-jc9ws93I.js";import{a as Et}from"./Typography-CiNRLenM.js";import{M as At}from"./Box-BXOPvc0Q.js";import{M as Rt}from"./Banner-C66lWD3c.js";import{M as pe,a as he,b as Dt,c as Bt,d as Ut,e as ge,f as Ft}from"./Server-F8KLZq7d.js";import{M as ve}from"./Home-BXMRmOIu.js";import{M as be}from"./Folder-Ddku_ujr.js";import{M as Lt}from"./Download-Cp75oFKP.js";import{M as Ht}from"./Clock-Byj5V_49.js";import{M as Ot}from"./Settings-DjrryuBd.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"./buttonClasses-DtIJBSf4.js";import"./ButtonBase-BqXVk-1q.js";import"./assertThisInitialized-B9jnkVVz.js";import"./buttonBaseClasses-CSPKg76d.js";import"./OdysseyThemeProvider-aR5shtx6.js";import"./tableRowClasses-inqOIkjd.js";import"./menuItemClasses-DFm3-Sf1.js";import"./checkboxClasses-Dtdq1kQG.js";import"./formControlLabelClasses-BtjP4uib.js";import"./typographyClasses-D8vr2n3l.js";import"./inputBaseClasses-PAjj3ZBN.js";import"./inputAdornmentClasses-DYNxkEwO.js";import"./formLabelClasses-xMgYguuN.js";import"./radioClasses-f3ayyf7y.js";import"./formGroupClasses-D9ChLj7o.js";import"./chipClasses-BMWKl3Eu.js";import"./CloseCircleFilled-D2aBlgBe.js";import"./WarningFilled-Y3Vw7n_w.js";import"./Check-BmyOKfcL.js";import"./autocompleteClasses-Bi4FgC8v.js";import"./alertTitleClasses-CSPeaunQ.js";import"./ChevronDown-BnAWuc8V.js";import"./useMountLifecycleEffect-CjsUCFhB.js";import"./useUniqueId-Bsgqe1tm.js";import"./createUniqueId-ByTaVY63.js";import"./AccordionSummary-xCoGLMoL.js";import"./useSlot-F4Qz2Wzp.js";import"./Collapse-P1H1b4lO.js";import"./Paper-DbAuDGNI.js";import"./Link-ClKgpBXG.js";import"./Typography-D7-qxuiy.js";import"./ExternalLink-DTdulgUc.js";import"./useTranslation-vEf1lqoc.js";import"./context-D_qJ2zXV.js";import"./Badge-DL9N0uiE.js";import"./Status-BYBMXN_H.js";import"./MuiPropsContext-DhRylJZk.js";import"./Chip-BOK8DR8m.js";import"./createSvgIcon-DiC7XVU3.js";import"./ChevronRight-BB0bQIRj.js";import"./Tooltip-3088PjcT.js";import"./ScopedCssBaseline-FivWKbYZ.js";import"./GlobalStyles-BxDN_5FT.js";import"./i18n-DmkmAJlT.js";import"./i18next-DbMy2do-.js";import"./BaseButton-B5c4cgt8.js";import"./colorManipulator-O7SU8zMv.js";import"./Documentation-DM1hawvn.js";import"./Field-ilPS333M.js";import"./List-W5kRT_jR.js";import"./ListContext-C02XM7tn.js";import"./ListItem-CcduKzQu.js";import"./utils-iop7lDec.js";import"./useFormControl-BMISTZuX.js";import"./FormLabel-BLeax9q3.js";import"./ScreenReaderText-vq7_Ob_I.js";import"./Box-C2ekHaOu.js";import"./visuallyHidden-Dan1xhjv.js";import"./FormHelperText-ZkUAjajs.js";import"./FieldHint-Cv7aMlpU.js";import"./inputUtils-Dbi8XkA6.js";import"./InputBase--xDu7aWm.js";import"./ownerWindow-HkKU3E4x.js";import"./debounce-Be36O1Ab.js";import"./InputAdornment-CFgP75Dd.js";import"./Search-BvCmvJcV.js";import"./IconButton-CK9Do7vj.js";import"./AlertTitle-DlG4YQWR.js";import"./Close-DA_Sph0R.js";/*!
+ * Copyright (c) 2025-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 K=e=>{const s=i.useMemo(()=>window.matchMedia(e),[e]),[n,u]=i.useState(()=>s.matches),o=i.useCallback(l=>u(l.matches),[]);return i.useEffect(()=>(s.addEventListener("change",o),o(s),()=>{s.removeEventListener("change",o)}),[s,o]),n};/*!
+ * Copyright (c) 2025-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 ae=m("div")({left:0,pointerEvents:"none",position:"absolute",top:0,width:"100%",zIndex:E}),zt=m(ae)({background:`linear-gradient(
+      to bottom,
+      rgba(39, 39, 39, 0.08) 0%,
+      transparent 100%
+    )`,height:"4px"}),Wt=m(ae)({background:`linear-gradient(
+      to bottom,
+      rgba(39, 39, 39, 0.01) 0%,
+      transparent 100%
+    )`,height:"6px"}),Vt=m(ae)({background:`linear-gradient(
+      to bottom,
+      rgba(39, 39, 39, 0.05) 0%,
+      transparent 100%
+    )`,height:"15px"}),$t=({isContentScrolled:e})=>e?t.jsxs(t.Fragment,{children:[t.jsx(zt,{}),t.jsx(Wt,{}),t.jsx(Vt,{})]}):null,re=i.memo($t);re.displayName="InnerAppContainer";const _t=i.forwardRef((e,s)=>t.jsx(Pt,{fill:"none",ref:s,viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",...e,children:t.jsx("path",{clipRule:"evenodd",d:"M21.333 5.778H2.667V4H21.333V5.778ZM21.333 12.885H2.667V11.111H21.333V12.885ZM2.667 20H21.333V18.221H2.667V20Z",fill:"currentColor",fillRule:"evenodd"})})),nt=i.memo(_t);nt.displayName="HamburgerMenuIcon";/*!
+ * Copyright (c) 2025-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 Gt=e=>e.replace(/([A-Z])/g,"-$1").toLowerCase(),Qt=({additionalStyles:e,appContainerElement:s,appContentReferenceElement:n,parentElement:u})=>{const o=n.getBoundingClientRect(),l=u.getBoundingClientRect();s.style.setProperty("position","absolute"),s.style.setProperty("top",`${o.top-l.top}px`),s.style.setProperty("left",`${o.left-l.left}px`),s.style.setProperty("width",`${o.width}px`),s.style.setProperty("height",`${o.height}px`),Object.entries(e).forEach(([r,a])=>{s.style.setProperty(Gt(r),String(a))})},ot=({appElement:e,appElementScrollingMode:s,paddingMode:n,uiShellAppAreaRef:u,uiShellResizableRefs:o})=>{const l=se(),r=i.useRef(null),a=i.useMemo(()=>({boxSizing:"border-box",zIndex:1,...n==="comfortable"?{paddingBlock:l.Spacing5,paddingInline:l.Spacing8}:{},...n==="compact"?{paddingBlock:l.Spacing5,paddingInline:l.Spacing5}:{},...s==="horizontal"||s==="both"?{overflowX:"auto"}:{overflowX:"hidden"},...s==="vertical"||s==="both"?{overflowY:"auto"}:{overflowY:"hidden"}}),[s,n,l]);return i.useEffect(()=>{if(u.current&&e&&r.current){let p;const d=()=>{cancelAnimationFrame(p),p=requestAnimationFrame(()=>{u.current&&r.current&&Qt({additionalStyles:a,appContentReferenceElement:u.current,appContainerElement:e,parentElement:r.current})})},c=o.map(h=>h.current).filter(h=>!!h),g=new ResizeObserver(d);return c.forEach(h=>{h.addEventListener("transitionend",d),g.observe(h)}),d(),()=>{g.disconnect(),c.forEach(h=>{h.removeEventListener("transitionend",d)})}}return()=>{}},[e,a,u,o]),{parentContainerRef:r}};/*!
+ * 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 Xt=({containerElement:e,element:s})=>{const n=e.getBoundingClientRect().height;return s.getBoundingClientRect().height-n>=0},Yt=e=>{const s=window.getComputedStyle(e).overflowY;return s==="auto"||s==="scroll"},Zt=e=>Array.from(e.querySelectorAll("*")).filter(s=>Xt({containerElement:e,element:s})).filter(s=>Yt(s)),Kt=typeof window>"u"?null:document.createElement("div"),ut=e=>{const[s,n]=i.useState(!1),u=i.useRef(0),o=i.useRef([]),l=i.useCallback(()=>{cancelAnimationFrame(u.current),u.current=requestAnimationFrame(()=>{n(o.current.reduce((c,g)=>c||g.scrollTop>0,!1))})},[]),r=i.useCallback(()=>{o.current.forEach(c=>{c.addEventListener("scroll",l)})},[l]),a=i.useCallback(()=>{o.current.forEach(c=>{c.removeEventListener("scroll",l)})},[l]),p=i.useCallback(()=>{const c=e||Kt;c&&(o.current=Zt(c).concat(c))},[e]),d=i.useCallback(()=>{a(),p(),r(),l()},[r,a,p,l]);return i.useEffect(()=>{const c=new MutationObserver(()=>{d()});return e&&c.observe(e,{attributes:!0,attributeFilter:["style"],childList:!0,subtree:!0}),d(),()=>{cancelAnimationFrame(u.current),a(),c.disconnect()}},[e,a,d]),{isContentScrolled:s}},Jt=m("div")({gridArea:"app-content",position:"relative",display:"grid",gridGap:0,gridTemplateAreas:`
+    "left-side app-container right-side"
+  `,gridTemplateColumns:"auto 1fr auto",gridTemplateRows:"1fr",height:"100%",width:"100%"}),es=m("div",{shouldForwardProp:e=>e!=="appBackgroundColor"&&e!=="odysseyDesignTokens"})(({appBackgroundColor:e})=>({backgroundColor:e,gridArea:"app-container",height:"100%",overflow:"hidden",width:"100%"})),ts=m("div")({gridArea:"banners",zIndex:E}),ss=m("div",{shouldForwardProp:e=>e!=="isOpen"})(({isOpen:e})=>({display:e?"block":"none",height:"100%",gridArea:"left-side",position:"absolute",zIndex:E})),is=m("div",{shouldForwardProp:e=>e!=="isOpen"&&e!=="odysseyDesignTokens"})(({isOpen:e,odysseyDesignTokens:s})=>({backgroundColor:s.HueNeutralWhite,display:e?"block":"none",gridArea:"right-side",height:"100%",maxWidth:ce,overflowY:"auto",position:"absolute",right:0,width:ce,zIndex:E})),as=m("div",{shouldForwardProp:e=>e!=="odysseyDesignTokens"})(({odysseyDesignTokens:e})=>({alignItems:"center",display:"inline-flex",gap:e.Spacing3})),rs=m("div",{shouldForwardProp:e=>e!=="odysseyDesignTokens"})(({odysseyDesignTokens:e})=>({height:ee,paddingBlock:e.Spacing4,"svg, img":{maxHeight:"100%",width:"auto",maxWidth:"100%"}})),ns=m("div",{shouldForwardProp:e=>e!=="odysseyDesignTokens"})(({odysseyDesignTokens:e})=>({backgroundColor:qt(e.HueNeutral900).asFormattedString.replace(/rgb\((.+)\)$/,"rgba($1, 0.26)"),gridArea:"app-content",height:"100vh",left:0,position:"absolute",top:0,width:"100vw",zIndex:E})),fe=m("div")({height:"100%"}),os=m("div",{shouldForwardProp:e=>e!=="odysseyDesignTokens"})(({odysseyDesignTokens:e})=>({backgroundColor:e.HueNeutral50,display:"grid",gridGap:0,gridTemplateAreas:`
+    "banners"
+    "top-nav"
+    "app-content"
+  `,gridTemplateColumns:"1fr",gridTemplateRows:"auto auto 1fr",height:"100vh",overflow:"hidden",width:"100vw"})),us=m("div",{shouldForwardProp:e=>e!=="odysseyDesignTokens"&&e!=="isContentScrolled"&&e!=="topNavBackgroundColor"})(({odysseyDesignTokens:e,isContentScrolled:s,topNavBackgroundColor:n})=>({alignItems:"stretch",backgroundColor:e.HueNeutralWhite||n,boxShadow:s?e.DepthMedium:void 0,clipPath:"inset(0 0 -100vh 0)",display:"flex",flexDirection:"column",gridArea:"top-nav",height:"100%",justifyContent:"center",position:"relative",transition:`box-shadow ${e.TransitionDurationMain} ${e.TransitionTimingMain}`,zIndex:E})),ls=m("div",{shouldForwardProp:e=>e!=="odysseyDesignTokens"&&e!=="topNavBackgroundColor"})(({odysseyDesignTokens:e,topNavBackgroundColor:s})=>({alignItems:"center",display:"flex",gap:e.Spacing3,height:"100%",justifyContent:"space-between",maxHeight:ee,minHeight:ee,paddingBlock:e.Spacing2,paddingInline:e.Spacing3,transition:`box-shadow ${e.TransitionDurationMain} ${e.TransitionTimingMain}`,...s===e.HueNeutralWhite&&{borderBottomColor:e.HueNeutral100,borderBottomStyle:e.BorderStyleMain,borderBottomWidth:e.BorderWidthMain}})),cs=m("div",{shouldForwardProp:e=>e!=="odysseyDesignTokens"})(({odysseyDesignTokens:e})=>({paddingBlock:e.Spacing2,paddingInline:e.Spacing3})),ds=({appElement:e,appElementScrollingMode:s,hasStandardAppContentPadding:n=!0,hasSideNavProps:u,initialVisibleSections:o=["TopNav","SideNav","AppSwitcher"],onError:l=console.error,optionalComponents:r,sideNavProps:a,topNavProps:p})=>{const d=se(),c=it(),{isContentScrolled:g}=ut(e),h=i.useRef(null),q=i.useRef(null),x=i.useRef(null),[b,y]=i.useState(!1),[N,P]=i.useState(!1),v=i.useCallback(()=>{y(!1),P(!1)},[]);i.useEffect(()=>{const S=c==null?void 0:c.subscribeToCloseRightSideMenu(()=>{v()}),w=c==null?void 0:c.subscribeToCloseSideNavMenu(()=>{v()});return()=>{S==null||S(),w==null||w()}},[v,c]);const j=i.useCallback(()=>{P(!1),y(S=>!S)},[]),f=i.useCallback(()=>{y(!1),P(S=>!S)},[]),{parentContainerRef:I}=ot({appElement:e,appElementScrollingMode:s,paddingMode:n?"compact":"none",uiShellAppAreaRef:x,uiShellResizableRefs:[h,q,x]});return t.jsxs(t.Fragment,{children:[(b||N)&&t.jsx(ns,{odysseyDesignTokens:d,onClick:v}),t.jsxs(os,{odysseyDesignTokens:d,ref:I,children:[t.jsx(ts,{children:r==null?void 0:r.banners}),((o==null?void 0:o.includes("TopNav"))||p)&&t.jsx(C,{fallback:null,onError:l,children:t.jsxs(us,{isContentScrolled:g,odysseyDesignTokens:d,topNavBackgroundColor:c==null?void 0:c.topNavBackgroundColor,children:[t.jsxs(ls,{odysseyDesignTokens:d,topNavBackgroundColor:c==null?void 0:c.sideNavBackgroundColor,children:[t.jsxs(as,{odysseyDesignTokens:d,children:[((a==null?void 0:a.isCollapsible)||!(a!=null&&a.isCollapsed))&&t.jsx(J,{onClick:j,startIcon:t.jsx(nt,{}),testId:"sidenav-menu--icon",variant:"floating"}),t.jsx(rs,{odysseyDesignTokens:d,children:a!=null&&a.isLoading?t.jsx(It,{height:24,variant:"rounded",width:67}):t.jsx(Ct,{...a==null?void 0:a.logoProps})})]}),(r==null?void 0:r.rightSideMenu)&&t.jsx(J,{onClick:f,startIcon:N?t.jsx(Mt,{}):t.jsx(Nt,{}),testId:"userprofile-menu--icon",variant:"floating"})]}),(r==null?void 0:r.topNavLeftSide)&&t.jsx(cs,{odysseyDesignTokens:d,children:r==null?void 0:r.topNavLeftSide})]})}),t.jsxs(Jt,{children:[t.jsxs(ss,{isOpen:b,children:[(o==null?void 0:o.includes("SideNav"))&&!u&&t.jsx(C,{fallback:null,onError:l,children:t.jsx(Q,{isLoading:!0,sideNavItems:st})}),u&&a&&t.jsx(C,{fallback:null,onError:l,children:t.jsx(fe,{children:t.jsx(Q,{...a,appName:void 0,logoProps:void 0,...a.hasCustomFooter&&(r!=null&&r.sideNavFooter)?{footerComponent:r.sideNavFooter,footerItems:void 0,hasCustomFooter:a.hasCustomFooter}:{footerItems:a.footerItems,hasCustomFooter:!1},isCollapsed:!1,isCollapsible:!1,isObtrusive:!0,onCollapse:v})})})]}),t.jsx(is,{isOpen:N,odysseyDesignTokens:d,children:t.jsx(fe,{children:r==null?void 0:r.rightSideMenu})}),t.jsx(es,{appBackgroundColor:c==null?void 0:c.appBackgroundColor,ref:x,tabIndex:0,children:t.jsx(re,{isContentScrolled:g})})]})]})]})},lt=i.memo(ds);lt.displayName="NarrowUiShellContent";/*!
+ * Copyright (c) 2025-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 ms={narrow:0,medium:600,wide:800},ps=(e=ms)=>{const s=K(`(min-width: ${e.narrow}px)`),n=K(`(min-width: ${e.medium}px)`);return K(`(min-width: ${e.wide}px)`)?"wide":n?"medium":s?"narrow":"none"};/*!
+ * 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 hs=[],gs=m("div",{shouldForwardProp:e=>e!=="appBackgroundColor"&&e!=="odysseyDesignTokens"})(({appBackgroundColor:e})=>({backgroundColor:e,gridArea:"app-content",position:"relative"})),vs=m("div")({gridArea:"app-switcher"}),bs=m("div")({gridArea:"banners"}),fs=m("div")({gridArea:"side-nav"}),Ss=m("div",{shouldForwardProp:e=>e!=="odysseyDesignTokens"})(({odysseyDesignTokens:e})=>({backgroundColor:e.HueNeutral50,display:"grid",gridGap:0,gridTemplateAreas:`
+    "banners banners banners"
+    "app-switcher side-nav top-nav"
+    "app-switcher side-nav app-content"
+  `,gridTemplateColumns:"auto auto 1fr",gridTemplateRows:"auto auto 1fr",height:"100vh",width:"100vw"})),xs=m("div")({gridArea:"top-nav"}),Cs=({appElement:e,appElementScrollingMode:s,appSwitcherProps:n,hasStandardAppContentPadding:u=!0,hasSideNavProps:o,initialVisibleSections:l=["TopNav","SideNav","AppSwitcher"],onError:r=console.error,optionalComponents:a,sideNavProps:p,topNavProps:d})=>{const c=se(),g=it(),{isContentScrolled:h}=ut(e),q=i.useRef(null),x=i.useRef(null),b=i.useRef(null),{parentContainerRef:y}=ot({appElement:e,appElementScrollingMode:s,paddingMode:u?"comfortable":"none",uiShellAppAreaRef:b,uiShellResizableRefs:[q,x,b]});return t.jsxs(Ss,{odysseyDesignTokens:c,ref:y,children:[t.jsx(bs,{children:a==null?void 0:a.banners}),t.jsxs(vs,{children:[(l==null?void 0:l.includes("AppSwitcher"))&&!n&&t.jsx(C,{fallback:null,onError:r,children:t.jsx(de,{appIcons:hs,isLoading:!0,selectedAppName:""})}),n&&t.jsx(C,{fallback:null,onError:r,children:t.jsx(de,{...n})})]}),t.jsxs(fs,{ref:q,children:[(l==null?void 0:l.includes("SideNav"))&&!o&&t.jsx(C,{fallback:null,onError:r,children:t.jsx(Q,{isLoading:!0,sideNavItems:st})}),o&&p&&t.jsx(C,{fallback:null,onError:r,children:t.jsx(Q,{...p,...p.hasCustomFooter&&(a!=null&&a.sideNavFooter)?{footerComponent:a.sideNavFooter,footerItems:void 0,hasCustomFooter:p.hasCustomFooter}:{footerItems:p.footerItems,hasCustomFooter:!1}})})]}),t.jsxs(xs,{ref:x,children:[(l==null?void 0:l.includes("TopNav"))&&d===void 0&&t.jsx(C,{fallback:null,onError:r,children:t.jsx(me,{leftSideComponent:a==null?void 0:a.topNavLeftSide,rightSideComponent:a==null?void 0:a.topNavRightSide})}),d&&t.jsx(C,{fallback:null,onError:r,children:t.jsx(me,{...d,leftSideComponent:a==null?void 0:a.topNavLeftSide,rightSideComponent:a==null?void 0:a.topNavRightSide})})]}),t.jsx(gs,{appBackgroundColor:g==null?void 0:g.appBackgroundColor,ref:b,tabIndex:0,children:t.jsx(re,{isContentScrolled:h})})]})},ct=i.memo(Cs);ct.displayName="WideUiShellContent";/*!
+ * 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 Se={sideNavProps:void 0,topNavProps:void 0},xe=t.jsx("div",{"data-error":!0}),ys=({appBackgroundColor:e,appBackgroundContrastMode:s,appElement:n,appElementScrollingMode:u,breakpointConfig:o,closeSideNavMenu:l,hasStandardAppContentPadding:r,initialVisibleSections:a,onError:p=console.error,onSubscriptionCreated:d,optionalComponents:c,sideNavBackgroundColor:g,sideNavBackgroundContrastColor:h,subscribeToCloseRightSideMenu:q,subscribeToCloseSideNavMenu:x,subscribeToPropChanges:b,topNavBackgroundColor:y,uiShellAppElement:N,uiShellStylesElement:P})=>{var I,S;const[v,j]=i.useState(Se),f=ps(o);return i.useEffect(()=>{const w=b(B=>{j(B||Se)});return d(),()=>{w()}},[d,b]),f==="none"?null:t.jsx(C,{fallback:xe,onError:p,children:t.jsx(tt,{emotionRootElement:P,shadowRootElement:N,children:t.jsxs(C,{fallback:xe,onError:p,children:[t.jsx(yt,{}),t.jsxs(wt,{appBackgroundColor:e,appBackgroundContrastMode:s,closeSideNavMenu:l,sideNavBackgroundColor:g,sideNavBackgroundContrastColor:h,subscribeToCloseRightSideMenu:q,subscribeToCloseSideNavMenu:x,topNavBackgroundColor:y,children:[f==="narrow"&&t.jsx(lt,{...v,appElement:n,appElementScrollingMode:u,hasSideNavProps:!!v.sideNavProps,hasStandardAppContentPadding:r,initialVisibleSections:a,onError:p,optionalComponents:c}),(f==="medium"||f==="wide")&&t.jsx(ct,{...v,sideNavProps:{...v.sideNavProps,hasSessionStorageState:f==="wide",isCollapsed:f==="medium"||((I=v.sideNavProps)==null?void 0:I.isCollapsed),isCollapsible:f==="medium"||((S=v.sideNavProps)==null?void 0:S.isCollapsible)},appElement:n,appElementScrollingMode:u,hasSideNavProps:!!v.sideNavProps,hasStandardAppContentPadding:r,initialVisibleSections:a,onError:p,optionalComponents:c})]})]})})})},X=i.memo(ys);X.displayName="UiShell";var T=function(s,n,u){return gt.call(n,"css")?t.jsx(vt,bt(s,n),u):t.jsx(s,n,u)};/*!
+ * 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.")
+ *
+ * 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 ne=i.createContext({}),qs=()=>i.useContext(ne),Ms=i.forwardRef(({children:e,...s},n)=>{const u=i.useMemo(()=>({...s,ref:n}),[s,n]);return T(ne.Provider,{value:u,children:e})}),dt=i.memo(Ms);dt.displayName="MuiPropsChild";const Ns=({ariaType:e,children:s,placement:n="top",testId:u,text:o,translate:l})=>T(ft,{"data-se":u,describeChild:e==="description",placement:n,title:o,translate:l,children:T(dt,{children:s})}),mt=i.memo(Ns);mt.displayName="Tooltip";/*!
+ * 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 Ps=i.createContext({isFullWidth:!1}),ws=()=>i.useContext(Ps),Is=({ariaControls:e,ariaDescribedBy:s,ariaExpanded:n,ariaHasPopup:u,ariaLabel:o,ariaLabelledBy:l,buttonRef:r,children:a,endIcon:p,href:d,id:c,isDisabled:g,isFullWidth:h,label:q="",onClick:x,size:b="medium",startIcon:y,tabIndex:N,testId:P,tooltipText:v,translate:j,type:f="button",variant:I})=>{const S=qs(),w=I==="tertiary"?"secondary":I,B=i.useRef(null),Y=ws(),oe=i.useMemo(()=>Y.isFullWidth?Y.isFullWidth:h,[Y,h]);i.useImperativeHandle(r,()=>({focus:()=>{var M;(M=B.current)==null||M.focus()}}),[]);const ue=i.useCallback(M=>T(St,{...M,"aria-controls":e,"aria-describedby":s,"aria-expanded":n,"aria-haspopup":u,"aria-label":o,"aria-labelledby":l,"data-se":P,disabled:g,endIcon:p,fullWidth:oe,href:d,id:c,onClick:x,ref:Z=>{var le;Z&&(B.current=Z,(le=M==null?void 0:M.ref)==null||le.call(M,Z))},size:b,startIcon:y,tabIndex:N,translate:j,type:f,variant:w,children:a??q}),[e,s,n,u,o,l,p,d,c,g,oe,q,a,x,b,y,N,P,j,f,w]);return v?T(mt,{ariaType:"description",placement:"top",text:v,children:T(ne.Consumer,{children:ue})}):ue(S)},pt=i.memo(Is);pt.displayName="BaseButton";/*!
+ * 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 ks=()=>{const e=new Map;return{publish:u=>{Array.from(e.values()).forEach(o=>{o(u)})},subscribe:u=>{const o=Symbol();return e.set(o,u),()=>{e.delete(o)}}}},Qa={component:X,tags:["!autodocs"],argTypes:{appBackgroundColor:{control:"color",description:"Custom color for app content background. Should only be used as a stop-gap to allow support for dark mode.",table:{type:{summary:"hex color code"}}},appElement:{control:void 0,description:"Element that the consuming app renders into.",table:{type:{summary:"InputType"}}},appElementScrollingMode:{control:void 0,description:"Mode used for scrolling.",table:{type:{summary:"InputType"}}},hasStandardAppContentPadding:{control:"boolean",description:"defaults to `true`. If `false`, the content area will have no padding provided",table:{type:{summary:"boolean"}}},initialVisibleSections:{control:"text",description:"A list of UiShell components that should be (minimally) rendered initially, with their isLoading property set when applicable. Allows the initial visibility of UiShell components to be influenced.",table:{type:{summary:"string"}}},onError:{description:'Notifies when a React rendering error occurs. This could be useful for logging, flagging "p0"s, and recovering UI Shell when errors occur.',table:{defaultValue:{summary:"console.error"},type:{summary:"string"}}},onSubscriptionCreated:{description:"Notifies when subscribed to prop changes. UI Shell listens to prop updates, and it won't subscribe synchronously. Because of that, this callback notifies when that subscription is ready.",table:{type:{summary:"string"}}},optionalComponents:{description:"Components that will render as children of various other components such as the top nav or side nav.",table:{type:{summary:"ReactElement"}}},sideNavBackgroundColor:{control:"color",description:"Custom color for side nav background",table:{type:{summary:"hex color code"}}},subscribeToPropChanges:{description:"This is a callback that provides a subscriber callback to listen for changes to state. It allows UI Shell to listen for state changes. The props coming in this callback go directly to a React state; therefore, it shares the same signature and provides a previous state.",table:{type:{summary:"MouseEventHandler"}}},topNavBackgroundColor:{control:"color",description:"Custom color for top nav background. Should only be used as a stop-gap to allow support for dark mode.",table:{type:{summary:"hex color code"}}}},args:{appElement:document.createElement("div"),appElementScrollingMode:"vertical",onSubscriptionCreated:te(),uiShellAppElement:document.createElement("div"),uiShellStylesElement:document.head},parameters:{layout:"fullscreen"}},A={appIcons:[{appIconDefaultUrl:"/appswitcher/admin-app-default.svg",appIconSelectedUrl:"/appswitcher/admin-app-selected.svg",appName:"saasure",label:"Admin Dashboard",linkUrl:"http://rain-admin.okta1.com:1802/admin/dashboard"},{appIconDefaultUrl:"/appswitcher/okta-dashboard-default.svg",appIconSelectedUrl:"/appswitcher/okta-dashboard-selected.svg",appName:"okta_enduser",label:"Okta Dashboard",linkUrl:"http://rain.okta1.com:1802/app/UserHome"},{appIconDefaultUrl:"/appswitcher/workflows-default.svg",appIconSelectedUrl:"/appswitcher/workflows-selected.svg",appName:"okta_flow_sso",label:"Okta Workflows",linkUrl:"http://rain-admin.okta1.com:1802/flow/go"}],isLoading:!1,selectedAppName:"okta_enduser"},R={appName:"Enduser",isCollapsible:!0,sideNavItems:[{id:"item1",label:"Add new folder",endIcon:t.jsx(pe,{}),onClick:()=>{}},{id:"item2",label:"Admin",isSectionHeader:!0},{id:"item3",href:"/?path=/docs/mui-components-typography--docs",label:"Users",startIcon:t.jsx(ie,{})},{id:"item4",label:"Dashboard",startIcon:t.jsx(ve,{}),isDisabled:!0,nestedNavItems:[{id:"item4-1",href:"/",label:"Home"}]},{id:"item5",href:"/",label:"Applications",startIcon:t.jsx(he,{})},{id:"item6",label:"Onboarding",startIcon:t.jsx(be,{}),nestedNavItems:[{id:"item6-1",href:"/",label:"Start"},{id:"item6-2",href:"/",label:"Tasks"},{id:"item6-3",href:"/",label:"Getting Started"}]},{id:"item7",href:"/",label:"Directory",startIcon:t.jsx(Dt,{})},{id:"item8",label:"Resource Management",isSectionHeader:!0},{id:"item9",href:"/",label:"Kubernetes",startIcon:t.jsx(Bt,{}),severity:"info",statusLabel:"BETA"},{id:"item10",href:"/",label:"Reports",startIcon:t.jsx(Lt,{})},{id:"item11",href:"/",label:"Identify Governance",target:"_blank",isDisabled:!0,startIcon:t.jsx(Ut,{})},{id:"item12",href:"/",label:"Workflows",target:"_blank",startIcon:t.jsx(Ht,{})},{id:"item13",label:"Security Administration",isSectionHeader:!0},{id:"item14",href:"/",label:"Security",startIcon:t.jsx(ge,{}),endIcon:t.jsx(ge,{})},{id:"item15",label:"Settings",isDefaultExpanded:!0,isSortable:!0,startIcon:t.jsx(Ot,{}),nestedNavItems:[{id:"item15-1",href:"/",label:"General"},{id:"item15-2",href:"/",label:"Custom Domain",isSelected:!0},{id:"item15-3",label:"Account Management"},{id:"item15-4",href:"/",label:"Authentication Policies",isDisabled:!0},{id:"item15-5",href:"/",label:"IDP Configuration"}]},{id:"item16",href:"/",label:"System Configuration",startIcon:t.jsx(be,{})},{id:"item17-0",label:"Enduser",isSectionHeader:!0},{id:"item17",label:"My Apps",isDefaultExpanded:!0,isSortable:!0,startIcon:t.jsx(ve,{}),nestedNavItems:[{id:"item17-1",label:"Recently Used"},{id:"item17-2",label:"Work"},{id:"item17-3",label:"Add section",endIcon:t.jsx(pe,{})}]},{id:"item18",label:"Notifications",startIcon:t.jsx(Ft,{}),count:1},{id:"item19",label:"Add apps",startIcon:t.jsx(he,{})}],footerItems:[{id:"footer-item-1",label:"Docs",href:"/"},{id:"footer-item-2",label:"Privacy"},{id:"footer-item-3",label:"Security",href:"/"}]},D={},k={topNavLeftSide:t.jsx("div",{children:t.jsx(Tt,{label:"Search",placeholder:"Search..."})}),topNavRightSide:t.jsx(rt,{orgName:"ORG123",profileIcon:t.jsx(ie,{}),userName:"test.user@test.com"})},ht=()=>{const[,e]=i.useState(0);return i.useEffect(()=>{e(1)},[]),i.useRef(null)},U={args:{subscribeToPropChanges:e=>(e({sideNavProps:{appName:"Odyssey Storybook",sideNavItems:[]}}),()=>{})}},F={args:{subscribeToPropChanges:()=>te()}},L={args:{initialVisibleSections:[],subscribeToPropChanges:()=>te()}},H={args:{initialVisibleSections:["TopNav"],optionalComponents:k,subscribeToPropChanges:e=>(e({topNavProps:D}),()=>{})}},O={args:{hasStandardAppContentPadding:!1,initialVisibleSections:["AppSwitcher"],subscribeToPropChanges:e=>(e({appSwitcherProps:A}),()=>{})}},z={args:{optionalComponents:k,subscribeToPropChanges:e=>(e({appSwitcherProps:{...A,isLoading:!0},sideNavProps:{...R,isLoading:!0},topNavProps:{}}),()=>{})}},W={args:{appBackgroundColor:void 0,optionalComponents:k,sideNavBackgroundColor:void 0,subscribeToPropChanges:e=>(e({topNavProps:D,sideNavProps:{...R,logoProps:{isSameBackgroundAsMain:!0}}}),()=>{}),topNavBackgroundColor:void 0}},V={args:{optionalComponents:k,subscribeToPropChanges:e=>(e({appSwitcherProps:A,sideNavProps:R,topNavProps:D}),()=>{})}},$={args:{initialVisibleSections:["AppSwitcher","TopNav"],optionalComponents:k,subscribeToPropChanges:e=>(e({appSwitcherProps:A,sideNavProps:{...R,isCollapsed:!0,isCollapsible:!1},topNavProps:D}),()=>{})}},Ce="30px",_={args:{optionalComponents:k,subscribeToPropChanges:e=>(e({appSwitcherProps:A,sideNavProps:{...R,logoProps:{logoComponent:t.jsx(xt.One,{})}},topNavProps:D}),()=>{})},parameters:{hasThemeDecorator:!1},render:function(s){const n=ht(),[u,o]=i.useState(!1),l=i.useCallback(()=>{o(!0)},[]);return i.useEffect(()=>{if(u){const r=document.getElementById("lineHeightOutput");r&&(r.innerText=getComputedStyle(r).lineHeight)}},[u]),t.jsxs(t.Fragment,{children:[t.jsxs("div",{ref:n,children:[t.jsx("style",{children:`body { line-height: ${Ce} !important; }`}),u&&t.jsxs(at,{children:[t.jsxs("div",{style:{float:"right",width:"200px",height:"200px",padding:"20px",backgroundColor:"lightgray",zIndex:1,position:"relative"},children:["A box to demonstrate whether the TopNav shadow clips or not (it should not since"," ",t.jsx("a",{href:"https://github.com/okta/odyssey/pull/2461/files#diff-45b62c71e0e59aaed6b2683e0efe6fb7239b2bcf5573f4946340992efeff3c4a",children:"this PR"}),")."]}),t.jsxs("p",{children:["Line Height: ",t.jsx("span",{id:"lineHeightOutput"}),' <- THIS VALUE SHOULD BE "',Ce,`" if there hasn't been a regression.`]}),"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lacinia leo quis sodales scelerisque. Maecenas tempor eget nunc sit amet ultrices. Maecenas et varius ante. Nulla eu quam sit amet orci fermentum dictum sit amet scelerisque libero. Proin luctus semper elit, ut pretium massa tristique a. Mauris hendrerit ex eu commodo egestas. Etiam a lacus aliquet, convallis metus et, sollicitudin odio. Fusce vehicula purus sed orci elementum, ut cursus diam sollicitudin. Pellentesque pulvinar nibh turpis, eu finibus dolor egestas eget. Duis tellus mauris, pulvinar sit amet ante a, aliquet laoreet sapien. Ut quis tempus massa. Fusce fringilla mattis lacinia. Cras at pharetra quam, eu ultrices ipsum. Etiam malesuada, ex consectetur fringilla faucibus, quam lorem luctus diam, vitae lobortis urna lorem ac libero. Nulla a fermentum ligula, ut pulvinar odio. Cras in dictum nibh. Ut et orci sodales, laoreet sem nec, volutpat sapien. Phasellus dui turpis, euismod vitae euismod porta, semper a tellus. Morbi bibendum eros quam, et suscipit ex blandit eu. Etiam placerat, tellus viverra rutrum porttitor, elit arcu molestie nibh, at porta arcu odio ut neque. Donec id odio ut neque malesuada pulvinar a in tortor. Fusce eu urna lobortis, rhoncus odio nec, scelerisque dolor. Donec tempor eros sed condimentum rutrum. Vivamus ac odio ac erat bibendum ultricies. Cras nec libero sit amet leo luctus gravida. Praesent placerat massa ex. Donec vehicula orci ac consequat mollis. Sed vitae magna ligula. Nulla pulvinar lectus ex, sed varius enim pulvinar vel. Morbi viverra vitae dui sit amet mattis. Phasellus quis augue viverra, rhoncus tellus non, elementum massa. Donec posuere luctus ultrices. Ut eu massa sem. Aliquam sed mattis nulla, ac fermentum magna. Vestibulum ac ex ut massa molestie gravida. Cras est arcu, varius nec fringilla semper, aliquet id nunc. Quisque facilisis, nulla nec ornare vehicula, justo urna feugiat lorem, nec pretium odio nisl facilisis diam. Sed a quam in risus semper convallis sed eget mauris. Proin vitae purus augue. Ut et risus justo. Mauris porta, leo non vestibulum cursus, ante nisi sagittis magna, et convallis enim arcu a diam. Ut tincidunt urna ac massa consectetur euismod. Aenean sagittis nisi mi, eu bibendum arcu auctor at. Sed et urna sit amet sapien euismod vulputate molestie eu ipsum. Phasellus mattis semper neque, et porttitor mi scelerisque eget. Donec non egestas ex, ac consequat nunc. Nunc sed risus ac orci ullamcorper lacinia vel at risus. Nulla et odio eros. Vivamus tempor ultricies mi sed luctus. Duis faucibus sollicitudin odio, quis rhoncus orci volutpat nec. Vivamus id eros et est aliquam porttitor. Maecenas maximus magna sed est condimentum hendrerit. Integer fringilla posuere nisl, vitae molestie magna dictum id. Suspendisse volutpat pharetra mauris, sed vehicula nulla suscipit a. Morbi sed augue sodales, molestie purus et, egestas enim. Proin ut metus tempus, ultricies neque vel, vulputate lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lacinia leo quis sodales scelerisque. Maecenas tempor eget nunc sit amet ultrices. Maecenas et varius ante. Nulla eu quam sit amet orci fermentum dictum sit amet scelerisque libero. Proin luctus semper elit, ut pretium massa tristique a. Mauris hendrerit ex eu commodo egestas. Etiam a lacus aliquet, convallis metus et, sollicitudin odio. Fusce vehicula purus sed orci elementum, ut cursus diam sollicitudin. Pellentesque pulvinar nibh turpis, eu finibus dolor egestas eget. Duis tellus mauris, pulvinar sit amet ante a, aliquet laoreet sapien. Ut quis tempus massa. Fusce fringilla mattis lacinia. Cras at pharetra quam, eu ultrices ipsum. Etiam malesuada, ex consectetur fringilla faucibus, quam lorem luctus diam, vitae lobortis urna lorem ac libero. Nulla a fermentum ligula, ut pulvinar odio. Cras in dictum nibh. Ut et orci sodales, laoreet sem nec, volutpat sapien. Phasellus dui turpis, euismod vitae euismod porta, semper a tellus. Morbi bibendum eros quam, et suscipit ex blandit eu. Etiam placerat, tellus viverra rutrum porttitor, elit arcu molestie nibh, at porta arcu odio ut neque. Donec id odio ut neque malesuada pulvinar a in tortor. Fusce eu urna lobortis, rhoncus odio nec, scelerisque dolor. Donec tempor eros sed condimentum rutrum. Vivamus ac odio ac erat bibendum ultricies. Cras nec libero sit amet leo luctus gravida. Praesent placerat massa ex. Donec vehicula orci ac consequat mollis. Sed vitae magna ligula. Nulla pulvinar lectus ex, sed varius enim pulvinar vel. Morbi viverra vitae dui sit amet mattis. Phasellus quis augue viverra, rhoncus tellus non, elementum massa. Donec posuere luctus ultrices. Ut eu massa sem. Aliquam sed mattis nulla, ac fermentum magna. Vestibulum ac ex ut massa molestie gravida. Cras est arcu, varius nec fringilla semper, aliquet id nunc. Quisque facilisis, nulla nec ornare vehicula, justo urna feugiat lorem, nec pretium odio nisl facilisis diam. Sed a quam in risus semper convallis sed eget mauris. Proin vitae purus augue. Ut et risus justo. Mauris porta, leo non vestibulum cursus, ante nisi sagittis magna, et convallis enim arcu a diam. Ut tincidunt urna ac massa consectetur euismod. Aenean sagittis nisi mi, eu bibendum arcu auctor at. Sed et urna sit amet sapien euismod vulputate molestie eu ipsum. Phasellus mattis semper neque, et porttitor mi scelerisque eget. Donec non egestas ex, ac consequat nunc. Nunc sed risus ac orci ullamcorper lacinia vel at risus. Nulla et odio eros. Vivamus tempor ultricies mi sed luctus. Duis faucibus sollicitudin odio, quis rhoncus orci volutpat nec. Vivamus id eros et est aliquam porttitor. Maecenas maximus magna sed est condimentum hendrerit. Integer fringilla posuere nisl, vitae molestie magna dictum id. Suspendisse volutpat pharetra mauris, sed vehicula nulla suscipit a. Morbi sed augue sodales, molestie purus et, egestas enim. Proin ut metus tempus, ultricies neque vel, vulputate lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lacinia leo quis sodales scelerisque. Maecenas tempor eget nunc sit amet ultrices. Maecenas et varius ante. Nulla eu quam sit amet orci fermentum dictum sit amet scelerisque libero. Proin luctus semper elit, ut pretium massa tristique a. Mauris hendrerit ex eu commodo egestas. Etiam a lacus aliquet, convallis metus et, sollicitudin odio. Fusce vehicula purus sed orci elementum, ut cursus diam sollicitudin. Pellentesque pulvinar nibh turpis, eu finibus dolor egestas eget. Duis tellus mauris, pulvinar sit amet ante a, aliquet laoreet sapien. Ut quis tempus massa. Fusce fringilla mattis lacinia. Cras at pharetra quam, eu ultrices ipsum. Etiam malesuada, ex consectetur fringilla faucibus, quam lorem luctus diam, vitae lobortis urna lorem ac libero. Nulla a fermentum ligula, ut pulvinar odio. Cras in dictum nibh. Ut et orci sodales, laoreet sem nec, volutpat sapien. Phasellus dui turpis, euismod vitae euismod porta, semper a tellus. Morbi bibendum eros quam, et suscipit ex blandit eu. Etiam placerat, tellus viverra rutrum porttitor, elit arcu molestie nibh, at porta arcu odio ut neque. Donec id odio ut neque malesuada pulvinar a in tortor. Fusce eu urna lobortis, rhoncus odio nec, scelerisque dolor. Donec tempor eros sed condimentum rutrum. Vivamus ac odio ac erat bibendum ultricies. Cras nec libero sit amet leo luctus gravida. Praesent placerat massa ex. Donec vehicula orci ac consequat mollis. Sed vitae magna ligula. Nulla pulvinar lectus ex, sed varius enim pulvinar vel. Morbi viverra vitae dui sit amet mattis. Phasellus quis augue viverra, rhoncus tellus non, elementum massa. Donec posuere luctus ultrices. Ut eu massa sem. Aliquam sed mattis nulla, ac fermentum magna. Vestibulum ac ex ut massa molestie gravida. Cras est arcu, varius nec fringilla semper, aliquet id nunc. Quisque facilisis, nulla nec ornare vehicula, justo urna feugiat lorem, nec pretium odio nisl facilisis diam. Sed a quam in risus semper convallis sed eget mauris. Proin vitae purus augue. Ut et risus justo. Mauris porta, leo non vestibulum cursus, ante nisi sagittis magna, et convallis enim arcu a diam. Ut tincidunt urna ac massa consectetur euismod. Aenean sagittis nisi mi, eu bibendum arcu auctor at. Sed et urna sit amet sapien euismod vulputate molestie eu ipsum. Phasellus mattis semper neque, et porttitor mi scelerisque eget. Donec non egestas ex, ac consequat nunc. Nunc sed risus ac orci ullamcorper lacinia vel at risus. Nulla et odio eros. Vivamus tempor ultricies mi sed luctus. Duis faucibus sollicitudin odio, quis rhoncus orci volutpat nec. Vivamus id eros et est aliquam porttitor. Maecenas maximus magna sed est condimentum hendrerit. Integer fringilla posuere nisl, vitae molestie magna dictum id. Suspendisse volutpat pharetra mauris, sed vehicula nulla suscipit a. Morbi sed augue sodales, molestie purus et, egestas enim. Proin ut metus tempus, ultricies neque vel, vulputate lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lacinia leo quis sodales scelerisque. Maecenas tempor eget nunc sit amet ultrices. Maecenas et varius ante. Nulla eu quam sit amet orci fermentum dictum sit amet scelerisque libero. Proin luctus semper elit, ut pretium massa tristique a. Mauris hendrerit ex eu commodo egestas. Etiam a lacus aliquet, convallis metus et, sollicitudin odio. Fusce vehicula purus sed orci elementum, ut cursus diam sollicitudin. Pellentesque pulvinar nibh turpis, eu finibus dolor egestas eget. Duis tellus mauris, pulvinar sit amet ante a, aliquet laoreet sapien. Ut quis tempus massa. Fusce fringilla mattis lacinia. Cras at pharetra quam, eu ultrices ipsum. Etiam malesuada, ex consectetur fringilla faucibus, quam lorem luctus diam, vitae lobortis urna lorem ac libero. Nulla a fermentum ligula, ut pulvinar odio. Cras in dictum nibh. Ut et orci sodales, laoreet sem nec, volutpat sapien. Phasellus dui turpis, euismod vitae euismod porta, semper a tellus. Morbi bibendum eros quam, et suscipit ex blandit eu. Et…"]})]}),t.jsx(X,{...s,appElement:n.current,onSubscriptionCreated:l})]})}},{publish:js,subscribe:Ts}=ks(),G={args:{optionalComponents:{...k,banners:t.jsx(Rt,{severity:"success",text:"This is an app!"}),rightSideMenu:t.jsx(At,{sx:{display:"flex",justifyContent:"center"},children:t.jsx(pt,{onClick:()=>js(),variant:"floating",children:t.jsx(rt,{orgName:"ORG123",profileIcon:t.jsx(ie,{}),userName:"test.user@test.com"})})})},subscribeToCloseRightSideMenu:Ts,subscribeToPropChanges:e=>(e({appSwitcherProps:A,sideNavProps:R,topNavProps:D}),()=>{})},render:function(s){const n=ht(),[u,o]=i.useState(!1),l=i.useCallback(()=>{o(!0)},[]);return t.jsxs(t.Fragment,{children:[t.jsxs("div",{ref:n,children:[t.jsx("div",{[kt]:""}),u&&t.jsx(tt,{children:t.jsx(jt,{description:"This is my app.",title:"Access Certification",children:t.jsxs(at,{children:[t.jsx("div",{style:{marginBlockEnd:`${16/14}rem`},children:t.jsx(Et,{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lacinia leo quis sodales scelerisque. Maecenas tempor eget nunc sit amet ultrices. Maecenas et varius ante. Nulla eu quam sit amet orci fermentum dictum sit amet scelerisque libero. Proin luctus semper elit, ut pretium massa tristique a. Mauris hendrerit ex eu commodo egestas. Etiam a lacus aliquet, convallis metus et, sollicitudin odio. Fusce vehicula purus sed orci elementum, ut cursus diam sollicitudin. Pellentesque pulvinar nibh turpis, eu finibus dolor egestas eget. Duis tellus mauris, pulvinar sit amet ante a, aliquet laoreet sapien. Ut quis tempus massa. Fusce fringilla mattis lacinia. Cras at pharetra quam, eu ultrices ipsum."})}),t.jsx("div",{children:t.jsx(J,{label:"I understand",variant:"primary"})})]})})})]}),t.jsx(X,{...s,appElement:n.current,onSubscriptionCreated:l})]})}};var ye,qe,Me;U.parameters={...U.parameters,docs:{...(ye=U.parameters)==null?void 0:ye.docs,source:{originalSource:`{
+  args: {
+    subscribeToPropChanges: subscriber => {
+      subscriber({
+        sideNavProps: {
+          appName: "Odyssey Storybook",
+          sideNavItems: []
+        }
+      });
+      return () => {};
+    }
+  }
+}`,...(Me=(qe=U.parameters)==null?void 0:qe.docs)==null?void 0:Me.source}}};var Ne,Pe,we;F.parameters={...F.parameters,docs:{...(Ne=F.parameters)==null?void 0:Ne.docs,source:{originalSource:`{
+  args: {
+    subscribeToPropChanges: () => fn()
+  }
+}`,...(we=(Pe=F.parameters)==null?void 0:Pe.docs)==null?void 0:we.source}}};var Ie,ke,je;L.parameters={...L.parameters,docs:{...(Ie=L.parameters)==null?void 0:Ie.docs,source:{originalSource:`{
+  args: {
+    initialVisibleSections: [],
+    subscribeToPropChanges: () => fn()
+  }
+}`,...(je=(ke=L.parameters)==null?void 0:ke.docs)==null?void 0:je.source}}};var Te,Ee,Ae;H.parameters={...H.parameters,docs:{...(Te=H.parameters)==null?void 0:Te.docs,source:{originalSource:`{
+  args: {
+    initialVisibleSections: ["TopNav"],
+    optionalComponents: sharedOptionalComponents,
+    subscribeToPropChanges: subscriber => {
+      subscriber({
+        topNavProps: sharedTopNavProps
+      });
+      return () => {};
+    }
+  }
+}`,...(Ae=(Ee=H.parameters)==null?void 0:Ee.docs)==null?void 0:Ae.source}}};var Re,De,Be;O.parameters={...O.parameters,docs:{...(Re=O.parameters)==null?void 0:Re.docs,source:{originalSource:`{
+  args: {
+    hasStandardAppContentPadding: false,
+    initialVisibleSections: ["AppSwitcher"],
+    subscribeToPropChanges: subscriber => {
+      subscriber({
+        appSwitcherProps: sharedAppSwitcherProps
+      });
+      return () => {};
+    }
+  }
+}`,...(Be=(De=O.parameters)==null?void 0:De.docs)==null?void 0:Be.source}}};var Ue,Fe,Le;z.parameters={...z.parameters,docs:{...(Ue=z.parameters)==null?void 0:Ue.docs,source:{originalSource:`{
+  args: {
+    optionalComponents: sharedOptionalComponents,
+    subscribeToPropChanges: subscriber => {
+      subscriber({
+        appSwitcherProps: {
+          ...sharedAppSwitcherProps,
+          isLoading: true
+        },
+        sideNavProps: {
+          ...sharedSideNavProps,
+          isLoading: true
+        },
+        topNavProps: {}
+      });
+      return () => {};
+    }
+  }
+}`,...(Le=(Fe=z.parameters)==null?void 0:Fe.docs)==null?void 0:Le.source}}};var He,Oe,ze;W.parameters={...W.parameters,docs:{...(He=W.parameters)==null?void 0:He.docs,source:{originalSource:`{
+  args: {
+    appBackgroundColor: undefined,
+    optionalComponents: sharedOptionalComponents,
+    sideNavBackgroundColor: undefined,
+    subscribeToPropChanges: subscriber => {
+      subscriber({
+        topNavProps: sharedTopNavProps,
+        sideNavProps: {
+          ...sharedSideNavProps,
+          logoProps: {
+            isSameBackgroundAsMain: true
+          }
+        }
+      });
+      return () => {};
+    },
+    topNavBackgroundColor: undefined
+  }
+}`,...(ze=(Oe=W.parameters)==null?void 0:Oe.docs)==null?void 0:ze.source}}};var We,Ve,$e;V.parameters={...V.parameters,docs:{...(We=V.parameters)==null?void 0:We.docs,source:{originalSource:`{
+  args: {
+    optionalComponents: sharedOptionalComponents,
+    subscribeToPropChanges: subscriber => {
+      subscriber({
+        appSwitcherProps: sharedAppSwitcherProps,
+        sideNavProps: sharedSideNavProps,
+        topNavProps: sharedTopNavProps
+      });
+      return () => {};
+    }
+  }
+}`,...($e=(Ve=V.parameters)==null?void 0:Ve.docs)==null?void 0:$e.source}}};var _e,Ge,Qe;$.parameters={...$.parameters,docs:{...(_e=$.parameters)==null?void 0:_e.docs,source:{originalSource:`{
+  args: {
+    initialVisibleSections: ["AppSwitcher", "TopNav"],
+    optionalComponents: sharedOptionalComponents,
+    subscribeToPropChanges: subscriber => {
+      subscriber({
+        appSwitcherProps: sharedAppSwitcherProps,
+        sideNavProps: {
+          ...sharedSideNavProps,
+          isCollapsed: true,
+          isCollapsible: false
+        },
+        topNavProps: sharedTopNavProps
+      });
+      return () => {};
+    }
+  }
+}`,...(Qe=(Ge=$.parameters)==null?void 0:Ge.docs)==null?void 0:Qe.source}}};var Xe,Ye,Ze;_.parameters={..._.parameters,docs:{...(Xe=_.parameters)==null?void 0:Xe.docs,source:{originalSource:`{
+  args: {
+    optionalComponents: sharedOptionalComponents,
+    subscribeToPropChanges: subscriber => {
+      subscriber({
+        appSwitcherProps: sharedAppSwitcherProps,
+        sideNavProps: {
+          ...sharedSideNavProps,
+          logoProps: {
+            logoComponent: <PlaceholderLogo.One />
+          }
+        },
+        topNavProps: sharedTopNavProps
+      });
+      return () => {};
+    }
+  },
+  parameters: {
+    hasThemeDecorator: false
+  },
+  render: function C(props) {
+    const appElementRef = useRefWithRerenderHack();
+    const [isReady, setIsReady] = useState(false);
+    const onSubscriptionCreated = useCallback(() => {
+      setIsReady(true);
+    }, []);
+    useEffect(() => {
+      if (isReady) {
+        const outputSpan = document.getElementById("lineHeightOutput");
+        if (outputSpan) {
+          outputSpan.innerText = getComputedStyle(outputSpan).lineHeight;
+        }
+      }
+    }, [isReady]);
+    return <>
+        <div ref={appElementRef}>
+          <style>
+            {\`body { line-height: \${EXPECTED_LINE_HEIGHT} !important; }\`}
+          </style>
+
+          {isReady && <Surface>
+              <div style={{
+            float: "right",
+            width: "200px",
+            height: "200px",
+            padding: "20px",
+            backgroundColor: "lightgray",
+            zIndex: 1,
+            position: "relative"
+          }}>
+                A box to demonstrate whether the TopNav shadow clips or not (it
+                should not since{" "}
+                <a href="https://github.com/okta/odyssey/pull/2461/files#diff-45b62c71e0e59aaed6b2683e0efe6fb7239b2bcf5573f4946340992efeff3c4a">
+                  this PR
+                </a>
+                ).
+              </div>
+              <p>
+                Line Height: <span id="lineHeightOutput"></span> &lt;- THIS
+                VALUE SHOULD BE "{EXPECTED_LINE_HEIGHT}" if there hasn't been a
+                regression.
+              </p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
+              lacinia leo quis sodales scelerisque. Maecenas tempor eget nunc
+              sit amet ultrices. Maecenas et varius ante. Nulla eu quam sit amet
+              orci fermentum dictum sit amet scelerisque libero. Proin luctus
+              semper elit, ut pretium massa tristique a. Mauris hendrerit ex eu
+              commodo egestas. Etiam a lacus aliquet, convallis metus et,
+              sollicitudin odio. Fusce vehicula purus sed orci elementum, ut
+              cursus diam sollicitudin. Pellentesque pulvinar nibh turpis, eu
+              finibus dolor egestas eget. Duis tellus mauris, pulvinar sit amet
+              ante a, aliquet laoreet sapien. Ut quis tempus massa. Fusce
+              fringilla mattis lacinia. Cras at pharetra quam, eu ultrices
+              ipsum. Etiam malesuada, ex consectetur fringilla faucibus, quam
+              lorem luctus diam, vitae lobortis urna lorem ac libero. Nulla a
+              fermentum ligula, ut pulvinar odio. Cras in dictum nibh. Ut et
+              orci sodales, laoreet sem nec, volutpat sapien. Phasellus dui
+              turpis, euismod vitae euismod porta, semper a tellus. Morbi
+              bibendum eros quam, et suscipit ex blandit eu. Etiam placerat,
+              tellus viverra rutrum porttitor, elit arcu molestie nibh, at porta
+              arcu odio ut neque. Donec id odio ut neque malesuada pulvinar a in
+              tortor. Fusce eu urna lobortis, rhoncus odio nec, scelerisque
+              dolor. Donec tempor eros sed condimentum rutrum. Vivamus ac odio
+              ac erat bibendum ultricies. Cras nec libero sit amet leo luctus
+              gravida. Praesent placerat massa ex. Donec vehicula orci ac
+              consequat mollis. Sed vitae magna ligula. Nulla pulvinar lectus
+              ex, sed varius enim pulvinar vel. Morbi viverra vitae dui sit amet
+              mattis. Phasellus quis augue viverra, rhoncus tellus non,
+              elementum massa. Donec posuere luctus ultrices. Ut eu massa sem.
+              Aliquam sed mattis nulla, ac fermentum magna. Vestibulum ac ex ut
+              massa molestie gravida. Cras est arcu, varius nec fringilla
+              semper, aliquet id nunc. Quisque facilisis, nulla nec ornare
+              vehicula, justo urna feugiat lorem, nec pretium odio nisl
+              facilisis diam. Sed a quam in risus semper convallis sed eget
+              mauris. Proin vitae purus augue. Ut et risus justo. Mauris porta,
+              leo non vestibulum cursus, ante nisi sagittis magna, et convallis
+              enim arcu a diam. Ut tincidunt urna ac massa consectetur euismod.
+              Aenean sagittis nisi mi, eu bibendum arcu auctor at. Sed et urna
+              sit amet sapien euismod vulputate molestie eu ipsum. Phasellus
+              mattis semper neque, et porttitor mi scelerisque eget. Donec non
+              egestas ex, ac consequat nunc. Nunc sed risus ac orci ullamcorper
+              lacinia vel at risus. Nulla et odio eros. Vivamus tempor ultricies
+              mi sed luctus. Duis faucibus sollicitudin odio, quis rhoncus orci
+              volutpat nec. Vivamus id eros et est aliquam porttitor. Maecenas
+              maximus magna sed est condimentum hendrerit. Integer fringilla
+              posuere nisl, vitae molestie magna dictum id. Suspendisse volutpat
+              pharetra mauris, sed vehicula nulla suscipit a. Morbi sed augue
+              sodales, molestie purus et, egestas enim. Proin ut metus tempus,
+              ultricies neque vel, vulputate lectus. Lorem ipsum dolor sit amet,
+              consectetur adipiscing elit. Mauris lacinia leo quis sodales
+              scelerisque. Maecenas tempor eget nunc sit amet ultrices. Maecenas
+              et varius ante. Nulla eu quam sit amet orci fermentum dictum sit
+              amet scelerisque libero. Proin luctus semper elit, ut pretium
+              massa tristique a. Mauris hendrerit ex eu commodo egestas. Etiam a
+              lacus aliquet, convallis metus et, sollicitudin odio. Fusce
+              vehicula purus sed orci elementum, ut cursus diam sollicitudin.
+              Pellentesque pulvinar nibh turpis, eu finibus dolor egestas eget.
+              Duis tellus mauris, pulvinar sit amet ante a, aliquet laoreet
+              sapien. Ut quis tempus massa. Fusce fringilla mattis lacinia. Cras
+              at pharetra quam, eu ultrices ipsum. Etiam malesuada, ex
+              consectetur fringilla faucibus, quam lorem luctus diam, vitae
+              lobortis urna lorem ac libero. Nulla a fermentum ligula, ut
+              pulvinar odio. Cras in dictum nibh. Ut et orci sodales, laoreet
+              sem nec, volutpat sapien. Phasellus dui turpis, euismod vitae
+              euismod porta, semper a tellus. Morbi bibendum eros quam, et
+              suscipit ex blandit eu. Etiam placerat, tellus viverra rutrum
+              porttitor, elit arcu molestie nibh, at porta arcu odio ut neque.
+              Donec id odio ut neque malesuada pulvinar a in tortor. Fusce eu
+              urna lobortis, rhoncus odio nec, scelerisque dolor. Donec tempor
+              eros sed condimentum rutrum. Vivamus ac odio ac erat bibendum
+              ultricies. Cras nec libero sit amet leo luctus gravida. Praesent
+              placerat massa ex. Donec vehicula orci ac consequat mollis. Sed
+              vitae magna ligula. Nulla pulvinar lectus ex, sed varius enim
+              pulvinar vel. Morbi viverra vitae dui sit amet mattis. Phasellus
+              quis augue viverra, rhoncus tellus non, elementum massa. Donec
+              posuere luctus ultrices. Ut eu massa sem. Aliquam sed mattis
+              nulla, ac fermentum magna. Vestibulum ac ex ut massa molestie
+              gravida. Cras est arcu, varius nec fringilla semper, aliquet id
+              nunc. Quisque facilisis, nulla nec ornare vehicula, justo urna
+              feugiat lorem, nec pretium odio nisl facilisis diam. Sed a quam in
+              risus semper convallis sed eget mauris. Proin vitae purus augue.
+              Ut et risus justo. Mauris porta, leo non vestibulum cursus, ante
+              nisi sagittis magna, et convallis enim arcu a diam. Ut tincidunt
+              urna ac massa consectetur euismod. Aenean sagittis nisi mi, eu
+              bibendum arcu auctor at. Sed et urna sit amet sapien euismod
+              vulputate molestie eu ipsum. Phasellus mattis semper neque, et
+              porttitor mi scelerisque eget. Donec non egestas ex, ac consequat
+              nunc. Nunc sed risus ac orci ullamcorper lacinia vel at risus.
+              Nulla et odio eros. Vivamus tempor ultricies mi sed luctus. Duis
+              faucibus sollicitudin odio, quis rhoncus orci volutpat nec.
+              Vivamus id eros et est aliquam porttitor. Maecenas maximus magna
+              sed est condimentum hendrerit. Integer fringilla posuere nisl,
+              vitae molestie magna dictum id. Suspendisse volutpat pharetra
+              mauris, sed vehicula nulla suscipit a. Morbi sed augue sodales,
+              molestie purus et, egestas enim. Proin ut metus tempus, ultricies
+              neque vel, vulputate lectus. Lorem ipsum dolor sit amet,
+              consectetur adipiscing elit. Mauris lacinia leo quis sodales
+              scelerisque. Maecenas tempor eget nunc sit amet ultrices. Maecenas
+              et varius ante. Nulla eu quam sit amet orci fermentum dictum sit
+              amet scelerisque libero. Proin luctus semper elit, ut pretium
+              massa tristique a. Mauris hendrerit ex eu commodo egestas. Etiam a
+              lacus aliquet, convallis metus et, sollicitudin odio. Fusce
+              vehicula purus sed orci elementum, ut cursus diam sollicitudin.
+              Pellentesque pulvinar nibh turpis, eu finibus dolor egestas eget.
+              Duis tellus mauris, pulvinar sit amet ante a, aliquet laoreet
+              sapien. Ut quis tempus massa. Fusce fringilla mattis lacinia. Cras
+              at pharetra quam, eu ultrices ipsum. Etiam malesuada, ex
+              consectetur fringilla faucibus, quam lorem luctus diam, vitae
+              lobortis urna lorem ac libero. Nulla a fermentum ligula, ut
+              pulvinar odio. Cras in dictum nibh. Ut et orci sodales, laoreet
+              sem nec, volutpat sapien. Phasellus dui turpis, euismod vitae
+              euismod porta, semper a tellus. Morbi bibendum eros quam, et
+              suscipit ex blandit eu. Etiam placerat, tellus viverra rutrum
+              porttitor, elit arcu molestie nibh, at porta arcu odio ut neque.
+              Donec id odio ut neque malesuada pulvinar a in tortor. Fusce eu
+              urna lobortis, rhoncus odio nec, scelerisque dolor. Donec tempor
+              eros sed condimentum rutrum. Vivamus ac odio ac erat bibendum
+              ultricies. Cras nec libero sit amet leo luctus gravida. Praesent
+              placerat massa ex. Donec vehicula orci ac consequat mollis. Sed
+              vitae magna ligula. Nulla pulvinar lectus ex, sed varius enim
+              pulvinar vel. Morbi viverra vitae dui sit amet mattis. Phasellus
+              quis augue viverra, rhoncus tellus non, elementum massa. Donec
+              posuere luctus ultrices. Ut eu massa sem. Aliquam sed mattis
+              nulla, ac fermentum magna. Vestibulum ac ex ut massa molestie
+              gravida. Cras est arcu, varius nec fringilla semper, aliquet id
+              nunc. Quisque facilisis, nulla nec ornare vehicula, justo urna
+              feugiat lorem, nec pretium odio nisl facilisis diam. Sed a quam in
+              risus semper convallis sed eget mauris. Proin vitae purus augue.
+              Ut et risus justo. Mauris porta, leo non vestibulum cursus, ante
+              nisi sagittis magna, et convallis enim arcu a diam. Ut tincidunt
+              urna ac massa consectetur euismod. Aenean sagittis nisi mi, eu
+              bibendum arcu auctor at. Sed et urna sit amet sapien euismod
+              vulputate molestie eu ipsum. Phasellus mattis semper neque, et
+              porttitor mi scelerisque eget. Donec non egestas ex, ac consequat
+              nunc. Nunc sed risus ac orci ullamcorper lacinia vel at risus.
+              Nulla et odio eros. Vivamus tempor ultricies mi sed luctus. Duis
+              faucibus sollicitudin odio, quis rhoncus orci volutpat nec.
+              Vivamus id eros et est aliquam porttitor. Maecenas maximus magna
+              sed est condimentum hendrerit. Integer fringilla posuere nisl,
+              vitae molestie magna dictum id. Suspendisse volutpat pharetra
+              mauris, sed vehicula nulla suscipit a. Morbi sed augue sodales,
+              molestie purus et, egestas enim. Proin ut metus tempus, ultricies
+              neque vel, vulputate lectus. Lorem ipsum dolor sit amet,
+              consectetur adipiscing elit. Mauris lacinia leo quis sodales
+              scelerisque. Maecenas tempor eget nunc sit amet ultrices. Maecenas
+              et varius ante. Nulla eu quam sit amet orci fermentum dictum sit
+              amet scelerisque libero. Proin luctus semper elit, ut pretium
+              massa tristique a. Mauris hendrerit ex eu commodo egestas. Etiam a
+              lacus aliquet, convallis metus et, sollicitudin odio. Fusce
+              vehicula purus sed orci elementum, ut cursus diam sollicitudin.
+              Pellentesque pulvinar nibh turpis, eu finibus dolor egestas eget.
+              Duis tellus mauris, pulvinar sit amet ante a, aliquet laoreet
+              sapien. Ut quis tempus massa. Fusce fringilla mattis lacinia. Cras
+              at pharetra quam, eu ultrices ipsum. Etiam malesuada, ex
+              consectetur fringilla faucibus, quam lorem luctus diam, vitae
+              lobortis urna lorem ac libero. Nulla a fermentum ligula, ut
+              pulvinar odio. Cras in dictum nibh. Ut et orci sodales, laoreet
+              sem nec, volutpat sapien. Phasellus dui turpis, euismod vitae
+              euismod porta, semper a tellus. Morbi bibendum eros quam, et
+              suscipit ex blandit eu. Et…
+            </Surface>}
+        </div>
+
+        <UiShell {...props} appElement={appElementRef.current!} onSubscriptionCreated={onSubscriptionCreated} />
+      </>;
+  }
+
+  // NOTE: NO \`decorators\` HERE as we explicitly don't want the \`<OdysseyProvider>\` present in the decorator.
+  // ALL OTHER STORIES in this file should have \`decorators\` specified.
+}`,...(Ze=(Ye=_.parameters)==null?void 0:Ye.docs)==null?void 0:Ze.source}}};var Ke,Je,et;G.parameters={...G.parameters,docs:{...(Ke=G.parameters)==null?void 0:Ke.docs,source:{originalSource:`{
+  args: {
+    optionalComponents: {
+      ...sharedOptionalComponents,
+      banners: <Banner severity="success" text="This is an app!" />,
+      rightSideMenu: <Box sx={{
+        display: "flex",
+        justifyContent: "center"
+      }}>
+          <BaseButton onClick={() => closeRightSideMenu()} variant="floating">
+            <UserProfile orgName="ORG123" profileIcon={<UserIcon />} userName="test.user@test.com" />
+          </BaseButton>
+        </Box>
+    },
+    subscribeToCloseRightSideMenu,
+    subscribeToPropChanges: subscriber => {
+      subscriber({
+        appSwitcherProps: sharedAppSwitcherProps,
+        sideNavProps: sharedSideNavProps,
+        topNavProps: sharedTopNavProps
+      });
+      return () => {};
+    }
+  },
+  render: function C(props) {
+    const appElementRef = useRefWithRerenderHack();
+    const [isReady, setIsReady] = useState(false);
+    const onSubscriptionCreated = useCallback(() => {
+      setIsReady(true);
+    }, []);
+    return <>
+        <div ref={appElementRef}>
+          {/* This is normally rendered by \`renderUiShell\`, but we're rendering \`UiShell\` outside of a web component, so we need to add this data attribute ourselves. */}
+          <div {...{
+          [uiShellDataAttribute]: ""
+        }} />
+
+          {isReady && <OdysseyProvider>
+              <PageTemplate description="This is my app." title="Access Certification">
+                <Surface>
+                  <div style={{
+                marginBlockEnd: \`\${16 / 14}rem\`
+              }}>
+                    <Paragraph>
+                      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                      Mauris lacinia leo quis sodales scelerisque. Maecenas
+                      tempor eget nunc sit amet ultrices. Maecenas et varius
+                      ante. Nulla eu quam sit amet orci fermentum dictum sit
+                      amet scelerisque libero. Proin luctus semper elit, ut
+                      pretium massa tristique a. Mauris hendrerit ex eu commodo
+                      egestas. Etiam a lacus aliquet, convallis metus et,
+                      sollicitudin odio. Fusce vehicula purus sed orci
+                      elementum, ut cursus diam sollicitudin. Pellentesque
+                      pulvinar nibh turpis, eu finibus dolor egestas eget. Duis
+                      tellus mauris, pulvinar sit amet ante a, aliquet laoreet
+                      sapien. Ut quis tempus massa. Fusce fringilla mattis
+                      lacinia. Cras at pharetra quam, eu ultrices ipsum.
+                    </Paragraph>
+                  </div>
+                  <div>
+                    <Button label="I understand" variant="primary" />
+                  </div>
+                </Surface>
+              </PageTemplate>
+            </OdysseyProvider>}
+        </div>
+
+        <UiShell {...props} appElement={appElementRef.current!} onSubscriptionCreated={onSubscriptionCreated} />
+      </>;
+  }
+}`,...(et=(Je=G.parameters)==null?void 0:Je.docs)==null?void 0:et.source}}};const Xa=["Default","LoadingFirstRender","InvisibleFirstRender","TopNavOnly","AppSwitcherOnly","LoadingData","WithCustomColors","WithoutAppContent","WithoutSideNav","WithTallAppContentAndNoStorybookDecorator","WithOdysseyAppContent"];export{O as AppSwitcherOnly,U as Default,L as InvisibleFirstRender,z as LoadingData,F as LoadingFirstRender,H as TopNavOnly,W as WithCustomColors,G as WithOdysseyAppContent,_ as WithTallAppContentAndNoStorybookDecorator,V as WithoutAppContent,$ as WithoutSideNav,Xa as __namedExportsOrder,Qa as default};