@okta/odyssey-contribution-tooling 1.48.0 → 1.49.0

package/dist/esm/ui-shell/NarrowUiShellContent.js

@@ -0,0 +1,342 @@
+import _Skeleton from "@mui/material/Skeleton";
+/*!
+ * Copyright (c) 2022-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.
+ */
+
+import styled from "@emotion/styled";
+import { memo, useCallback, useEffect, useRef, useState } from "react";
+import { ErrorBoundary } from "react-error-boundary";
+import { Button } from "../Buttons/Button.js";
+import { hexToRgb } from "../hexToRgb.js";
+import { CloseIcon } from "../icons.generated/Close.js";
+import { MoreIcon } from "../icons.generated/More.js";
+import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext.js";
+import { InnerAppContainer } from "./InnerAppContainer.js";
+import { SideNav } from "./SideNav/SideNav.js";
+import { SideNavLogo } from "./SideNav/SideNavLogo.js";
+import { HamburgerMenuIcon } from "./TopNav/HamburgerMenuIcon.js";
+import { useUiShellContext } from "./UiShellProvider.js";
+import { emptySideNavItems, SIDE_NAV_WIDTH, TOP_NAV_HEIGHT, UI_SHELL_BASE_Z_INDEX, UI_SHELL_OVERLAY_Z_INDEX } from "./uiShellSharedConstants.js";
+import { useMatchAppElementToUiShellAppArea } from "./useMatchAppElementToUiShellAppArea.js";
+import { useScrollState } from "./useScrollState.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const StyledAppContentArea = styled("div")({
+  gridArea: "app-content",
+  position: "relative",
+  height: "100%",
+  width: "100%"
+});
+const StyledAppContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "appBackgroundColor" && prop !== "odysseyDesignTokens"
+})(({
+  appBackgroundColor
+}) => ({
+  backgroundColor: appBackgroundColor,
+  height: "100%",
+  overflow: "hidden",
+  width: "100%"
+}));
+const StyledBannersContainer = styled("div")({
+  gridArea: "banners",
+  zIndex: UI_SHELL_BASE_Z_INDEX
+});
+const StyledLeftSideContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "isOpen"
+})(({
+  isOpen
+}) => ({
+  display: isOpen ? "block" : "none",
+  height: "100%",
+  position: "absolute",
+  zIndex: UI_SHELL_OVERLAY_Z_INDEX
+}));
+const StyledRightSideContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "isOpen" && prop !== "odysseyDesignTokens"
+})(({
+  isOpen,
+  odysseyDesignTokens
+}) => ({
+  backgroundColor: odysseyDesignTokens.HueNeutralWhite,
+  display: isOpen ? "block" : "none",
+  height: "100%",
+  maxWidth: SIDE_NAV_WIDTH,
+  overflowY: "auto",
+  position: "absolute",
+  right: 0,
+  width: SIDE_NAV_WIDTH,
+  zIndex: UI_SHELL_OVERLAY_Z_INDEX
+}));
+const StyledMenuLogo = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  alignItems: "center",
+  display: "inline-flex",
+  gap: odysseyDesignTokens.Spacing3
+}));
+const StyledLogoContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  height: TOP_NAV_HEIGHT,
+  paddingBlock: odysseyDesignTokens.Spacing4,
+  "svg, img": {
+    maxHeight: "100%",
+    width: "auto",
+    maxWidth: "100%"
+  }
+}));
+const StyledPageOverlay = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  backgroundColor: hexToRgb(odysseyDesignTokens.HueNeutral900).asFormattedString.replace(/rgb\((.+)\)$/, "rgba($1, 0.26)"),
+  gridArea: "app-content",
+  height: "100vh",
+  left: 0,
+  position: "absolute",
+  top: 0,
+  width: "100vw",
+  zIndex: UI_SHELL_BASE_Z_INDEX
+}));
+const StyledSideNavContainer = styled("div")({
+  height: "100%"
+});
+const StyledUiShellContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  backgroundColor: odysseyDesignTokens.HueNeutral50,
+  display: "grid",
+  gridGap: 0,
+  gridTemplateAreas: `
+    "banners"
+    "top-nav"
+    "app-content"
+  `,
+  gridTemplateColumns: "1fr",
+  gridTemplateRows: "auto auto 1fr",
+  height: "100vh",
+  overflow: "hidden",
+  width: "100vw"
+}));
+const StyledTopNav = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isContentScrolled" && prop !== "topNavBackgroundColor"
+})(({
+  odysseyDesignTokens,
+  isContentScrolled,
+  topNavBackgroundColor
+}) => ({
+  alignItems: "stretch",
+  backgroundColor: odysseyDesignTokens.HueNeutralWhite || topNavBackgroundColor,
+  boxShadow: isContentScrolled ? odysseyDesignTokens.DepthMedium : undefined,
+  clipPath: "inset(0 0 -100vh 0)",
+  display: "flex",
+  flexDirection: "column",
+  gridArea: "top-nav",
+  height: "100%",
+  justifyContent: "center",
+  position: "relative",
+  transition: `box-shadow ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`,
+  zIndex: UI_SHELL_BASE_Z_INDEX
+}));
+const StyledTopNavMenu = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "topNavBackgroundColor"
+})(({
+  odysseyDesignTokens,
+  topNavBackgroundColor
+}) => ({
+  alignItems: "center",
+  display: "flex",
+  gap: odysseyDesignTokens.Spacing3,
+  height: "100%",
+  justifyContent: "space-between",
+  maxHeight: TOP_NAV_HEIGHT,
+  minHeight: TOP_NAV_HEIGHT,
+  paddingBlock: odysseyDesignTokens.Spacing2,
+  paddingInline: odysseyDesignTokens.Spacing3,
+  transition: `box-shadow ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`,
+  ...(topNavBackgroundColor === odysseyDesignTokens.HueNeutralWhite && {
+    borderBottomColor: odysseyDesignTokens.HueNeutral100,
+    borderBottomStyle: odysseyDesignTokens.BorderStyleMain,
+    borderBottomWidth: odysseyDesignTokens.BorderWidthMain
+  })
+}));
+const StyledTopNavSearch = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  paddingBlock: odysseyDesignTokens.Spacing2,
+  paddingInline: odysseyDesignTokens.Spacing3
+}));
+const NarrowUiShellContent = ({
+  appElement,
+  appElementScrollingMode,
+  hasStandardAppContentPadding = true,
+  hasSideNavProps,
+  initialVisibleSections = ["TopNav", "SideNav", "AppSwitcher"],
+  onError = console.error,
+  optionalComponents,
+  sideNavProps,
+  topNavProps
+}) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const uiShellContext = useUiShellContext();
+  const {
+    isContentScrolled
+  } = useScrollState(appElement);
+  const sideNavContainerRef = useRef(null);
+  const topNavContainerRef = useRef(null);
+  const uiShellAppAreaRef = useRef(null);
+  const [isLeftSideMenuOpen, setIsLeftSideMenuOpen] = useState(false);
+  const [isRightSideMenuOpen, setIsRightSideMenuOpen] = useState(false);
+  const closeSideMenus = useCallback(() => {
+    setIsLeftSideMenuOpen(false);
+    setIsRightSideMenuOpen(false);
+  }, []);
+  useEffect(() => {
+    const unsubscribeFromCloseRightSideMenu = uiShellContext?.subscribeToCloseRightSideMenu(() => {
+      closeSideMenus();
+    });
+    const unsubscribeFromSideNavItemClicked = uiShellContext?.subscribeToCloseSideNavMenu(() => {
+      closeSideMenus();
+    });
+    return () => {
+      unsubscribeFromCloseRightSideMenu?.();
+      unsubscribeFromSideNavItemClicked?.();
+    };
+  }, [closeSideMenus, uiShellContext]);
+  const toggleLeftSideMenu = useCallback(() => {
+    setIsRightSideMenuOpen(false);
+    setIsLeftSideMenuOpen(isLeftSideMenuOpen => !isLeftSideMenuOpen);
+  }, []);
+  const toggleRightSideMenu = useCallback(() => {
+    setIsLeftSideMenuOpen(false);
+    setIsRightSideMenuOpen(isRightSideMenuOpen => !isRightSideMenuOpen);
+  }, []);
+  const {
+    parentContainerRef
+  } = useMatchAppElementToUiShellAppArea({
+    appElement,
+    appElementScrollingMode,
+    paddingMode: hasStandardAppContentPadding ? "compact" : "none",
+    uiShellAppAreaRef,
+    uiShellResizableRefs: [sideNavContainerRef, topNavContainerRef, uiShellAppAreaRef]
+  });
+  return _jsxs(_Fragment, {
+    children: [(isLeftSideMenuOpen || isRightSideMenuOpen) && _jsx(StyledPageOverlay, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      onClick: closeSideMenus
+    }), _jsxs(StyledUiShellContainer, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      ref: parentContainerRef,
+      children: [_jsx(StyledBannersContainer, {
+        children: optionalComponents?.banners
+      }), (initialVisibleSections?.includes("TopNav") || topNavProps) && _jsx(ErrorBoundary, {
+        fallback: null,
+        onError: onError,
+        children: _jsxs(StyledTopNav, {
+          isContentScrolled: isContentScrolled,
+          odysseyDesignTokens: odysseyDesignTokens,
+          topNavBackgroundColor: uiShellContext?.topNavBackgroundColor,
+          children: [_jsxs(StyledTopNavMenu, {
+            odysseyDesignTokens: odysseyDesignTokens,
+            topNavBackgroundColor: uiShellContext?.sideNavBackgroundColor,
+            children: [_jsxs(StyledMenuLogo, {
+              odysseyDesignTokens: odysseyDesignTokens,
+              children: [(sideNavProps?.isCollapsible || !sideNavProps?.isCollapsed) && _jsx(Button, {
+                onClick: toggleLeftSideMenu,
+                startIcon: _jsx(HamburgerMenuIcon, {}),
+                testId: "sidenav-menu--icon",
+                variant: "floating"
+              }), _jsx(StyledLogoContainer, {
+                odysseyDesignTokens: odysseyDesignTokens,
+                children: sideNavProps?.isLoading ? _jsx(_Skeleton, {
+                  height: 24,
+                  variant: "rounded",
+                  width: 67
+                }) : _jsx(SideNavLogo, {
+                  ...sideNavProps?.logoProps
+                })
+              })]
+            }), optionalComponents?.rightSideMenu && _jsx(Button, {
+              onClick: toggleRightSideMenu,
+              startIcon: isRightSideMenuOpen ? _jsx(CloseIcon, {}) : _jsx(MoreIcon, {}),
+              testId: "userprofile-menu--icon",
+              variant: "floating"
+            })]
+          }), optionalComponents?.topNavLeftSide && _jsx(StyledTopNavSearch, {
+            odysseyDesignTokens: odysseyDesignTokens,
+            children: optionalComponents?.topNavLeftSide
+          })]
+        })
+      }), _jsxs(StyledAppContentArea, {
+        children: [_jsxs(StyledLeftSideContainer, {
+          isOpen: isLeftSideMenuOpen,
+          children: [initialVisibleSections?.includes("SideNav") && !hasSideNavProps && _jsx(ErrorBoundary, {
+            fallback: null,
+            onError: onError,
+            children: _jsx(SideNav, {
+              isLoading: true,
+              sideNavItems: emptySideNavItems
+            })
+          }), hasSideNavProps && sideNavProps && _jsx(ErrorBoundary, {
+            fallback: null,
+            onError: onError,
+            children: _jsx(StyledSideNavContainer, {
+              children: _jsx(SideNav, {
+                ...{
+                  ...sideNavProps,
+                  appName: undefined,
+                  logoProps: undefined
+                },
+                ...(sideNavProps.hasCustomFooter && optionalComponents?.sideNavFooter ? {
+                  footerComponent: optionalComponents.sideNavFooter,
+                  footerItems: undefined,
+                  hasCustomFooter: sideNavProps.hasCustomFooter
+                } : {
+                  footerItems: sideNavProps.footerItems,
+                  hasCustomFooter: false
+                }),
+                isCollapsed: false,
+                isCollapsible: false,
+                isObtrusive: true,
+                onCollapse: closeSideMenus
+              })
+            })
+          })]
+        }), _jsx(StyledRightSideContainer, {
+          isOpen: isRightSideMenuOpen,
+          odysseyDesignTokens: odysseyDesignTokens,
+          children: _jsx(StyledSideNavContainer, {
+            children: optionalComponents?.rightSideMenu
+          })
+        }), _jsx(StyledAppContainer, {
+          appBackgroundColor: uiShellContext?.appBackgroundColor,
+          ref: uiShellAppAreaRef,
+          tabIndex: 0,
+          children: _jsx(InnerAppContainer, {
+            isContentScrolled: isContentScrolled
+          })
+        })]
+      })]
+    })]
+  });
+};
+const MemoizedNarrowUiShellContent = memo(NarrowUiShellContent);
+MemoizedNarrowUiShellContent.displayName = "NarrowUiShellContent";
+export { MemoizedNarrowUiShellContent as NarrowUiShellContent };
+//# sourceMappingURL=NarrowUiShellContent.js.map

package/dist/esm/ui-shell/NarrowUiShellContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NarrowUiShellContent.js","names":["styled","memo","useCallback","useEffect","useRef","useState","ErrorBoundary","Button","hexToRgb","CloseIcon","MoreIcon","useOdysseyDesignTokens","InnerAppContainer","SideNav","SideNavLogo","HamburgerMenuIcon","useUiShellContext","emptySideNavItems","SIDE_NAV_WIDTH","TOP_NAV_HEIGHT","UI_SHELL_BASE_Z_INDEX","UI_SHELL_OVERLAY_Z_INDEX","useMatchAppElementToUiShellAppArea","useScrollState","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","StyledAppContentArea","gridArea","position","height","width","StyledAppContainer","shouldForwardProp","prop","appBackgroundColor","backgroundColor","overflow","StyledBannersContainer","zIndex","StyledLeftSideContainer","isOpen","display","StyledRightSideContainer","odysseyDesignTokens","HueNeutralWhite","maxWidth","overflowY","right","StyledMenuLogo","alignItems","gap","Spacing3","StyledLogoContainer","paddingBlock","Spacing4","maxHeight","StyledPageOverlay","HueNeutral900","asFormattedString","replace","left","top","StyledSideNavContainer","StyledUiShellContainer","HueNeutral50","gridGap","gridTemplateAreas","gridTemplateColumns","gridTemplateRows","StyledTopNav","isContentScrolled","topNavBackgroundColor","boxShadow","DepthMedium","undefined","clipPath","flexDirection","justifyContent","transition","TransitionDurationMain","TransitionTimingMain","StyledTopNavMenu","minHeight","Spacing2","paddingInline","borderBottomColor","HueNeutral100","borderBottomStyle","BorderStyleMain","borderBottomWidth","BorderWidthMain","StyledTopNavSearch","NarrowUiShellContent","appElement","appElementScrollingMode","hasStandardAppContentPadding","hasSideNavProps","initialVisibleSections","onError","console","error","optionalComponents","sideNavProps","topNavProps","uiShellContext","sideNavContainerRef","topNavContainerRef","uiShellAppAreaRef","isLeftSideMenuOpen","setIsLeftSideMenuOpen","isRightSideMenuOpen","setIsRightSideMenuOpen","closeSideMenus","unsubscribeFromCloseRightSideMenu","subscribeToCloseRightSideMenu","unsubscribeFromSideNavItemClicked","subscribeToCloseSideNavMenu","toggleLeftSideMenu","toggleRightSideMenu","parentContainerRef","paddingMode","uiShellResizableRefs","children","onClick","ref","banners","includes","fallback","sideNavBackgroundColor","isCollapsible","isCollapsed","startIcon","testId","variant","isLoading","_Skeleton","logoProps","rightSideMenu","topNavLeftSide","sideNavItems","appName","hasCustomFooter","sideNavFooter","footerComponent","footerItems","isObtrusive","onCollapse","tabIndex","MemoizedNarrowUiShellContent","displayName"],"sources":["../../../src/ui-shell/NarrowUiShellContent.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport styled from \"@emotion/styled\";\nimport { Skeleton } from \"@mui/material\";\nimport {\n  CSSProperties,\n  memo,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { ErrorBoundary } from \"react-error-boundary\";\n\nimport type { HtmlProps } from \"../HtmlProps.js\";\n\nimport { Button } from \"../Buttons/Button.js\";\nimport { hexToRgb } from \"../hexToRgb.js\";\nimport { CloseIcon } from \"../icons.generated/Close.js\";\nimport { MoreIcon } from \"../icons.generated/More.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../OdysseyDesignTokensContext.js\";\nimport { InnerAppContainer } from \"./InnerAppContainer.js\";\nimport { SideNav } from \"./SideNav/SideNav.js\";\nimport { SideNavLogo } from \"./SideNav/SideNavLogo.js\";\nimport { HamburgerMenuIcon } from \"./TopNav/HamburgerMenuIcon.js\";\nimport {\n  UiShellContentProps,\n  UiShellNavComponentProps,\n} from \"./uiShellContentTypes.js\";\nimport { UiShellColors, useUiShellContext } from \"./UiShellProvider.js\";\nimport {\n  emptySideNavItems,\n  SIDE_NAV_WIDTH,\n  TOP_NAV_HEIGHT,\n  UI_SHELL_BASE_Z_INDEX,\n  UI_SHELL_OVERLAY_Z_INDEX,\n} from \"./uiShellSharedConstants.js\";\nimport { useMatchAppElementToUiShellAppArea } from \"./useMatchAppElementToUiShellAppArea.js\";\nimport { useScrollState } from \"./useScrollState.js\";\n\nconst StyledAppContentArea = styled(\"div\")({\n  gridArea: \"app-content\",\n  position: \"relative\",\n  height: \"100%\",\n  width: \"100%\",\n});\n\nconst StyledAppContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"appBackgroundColor\" && prop !== \"odysseyDesignTokens\",\n})<{\n  appBackgroundColor?: UiShellColors[\"appBackgroundColor\"];\n}>(({ appBackgroundColor }) => ({\n  backgroundColor: appBackgroundColor,\n  height: \"100%\",\n  overflow: \"hidden\",\n  width: \"100%\",\n}));\n\nconst StyledBannersContainer = styled(\"div\")({\n  gridArea: \"banners\",\n  zIndex: UI_SHELL_BASE_Z_INDEX,\n});\n\nconst StyledLeftSideContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"isOpen\",\n})<{\n  isOpen: boolean;\n}>(({ isOpen }) => ({\n  display: isOpen ? \"block\" : \"none\",\n  height: \"100%\",\n  position: \"absolute\",\n  zIndex: UI_SHELL_OVERLAY_Z_INDEX,\n}));\n\nconst StyledRightSideContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"isOpen\" && prop !== \"odysseyDesignTokens\",\n})<{\n  isOpen: boolean;\n  odysseyDesignTokens: DesignTokens;\n}>(({ isOpen, odysseyDesignTokens }) => ({\n  backgroundColor: odysseyDesignTokens.HueNeutralWhite,\n  display: isOpen ? \"block\" : \"none\",\n  height: \"100%\",\n  maxWidth: SIDE_NAV_WIDTH,\n  overflowY: \"auto\",\n  position: \"absolute\",\n  right: 0,\n  width: SIDE_NAV_WIDTH,\n  zIndex: UI_SHELL_OVERLAY_Z_INDEX,\n}));\n\nconst StyledMenuLogo = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  alignItems: \"center\",\n  display: \"inline-flex\",\n  gap: odysseyDesignTokens.Spacing3,\n}));\n\nconst StyledLogoContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  height: TOP_NAV_HEIGHT,\n  paddingBlock: odysseyDesignTokens.Spacing4,\n\n  \"svg, img\": {\n    maxHeight: \"100%\",\n    width: \"auto\",\n    maxWidth: \"100%\",\n  },\n}));\n\nconst StyledPageOverlay = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  backgroundColor: hexToRgb(\n    odysseyDesignTokens.HueNeutral900,\n  ).asFormattedString.replace(/rgb\\((.+)\\)$/, \"rgba($1, 0.26)\"),\n  gridArea: \"app-content\",\n  height: \"100vh\",\n  left: 0,\n  position: \"absolute\",\n  top: 0,\n  width: \"100vw\",\n  zIndex: UI_SHELL_BASE_Z_INDEX,\n}));\n\nconst StyledSideNavContainer = styled(\"div\")({\n  height: \"100%\", // Without this value, side nav won't fill up the height if the content is too short.\n});\n\nconst StyledUiShellContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  backgroundColor: odysseyDesignTokens.HueNeutral50,\n  display: \"grid\",\n  gridGap: 0,\n  gridTemplateAreas: `\n    \"banners\"\n    \"top-nav\"\n    \"app-content\"\n  `,\n  gridTemplateColumns: \"1fr\",\n  gridTemplateRows: \"auto auto 1fr\",\n  height: \"100vh\",\n  overflow: \"hidden\",\n  width: \"100vw\",\n}));\n\nconst StyledTopNav = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"isContentScrolled\" &&\n    prop !== \"topNavBackgroundColor\",\n})<{\n  isContentScrolled?: boolean;\n  odysseyDesignTokens: DesignTokens;\n  topNavBackgroundColor?: UiShellColors[\"topNavBackgroundColor\"];\n}>(({ odysseyDesignTokens, isContentScrolled, topNavBackgroundColor }) => ({\n  alignItems: \"stretch\",\n  backgroundColor: odysseyDesignTokens.HueNeutralWhite || topNavBackgroundColor, // This logic doesn't make sense, but I wanted to leave it here for when we eventually make a decision on `topNavBackgroundColor`. --Kevin Ghadyani\n  boxShadow: isContentScrolled ? odysseyDesignTokens.DepthMedium : undefined,\n  clipPath: \"inset(0 0 -100vh 0)\",\n  display: \"flex\",\n  flexDirection: \"column\",\n  gridArea: \"top-nav\",\n  height: \"100%\",\n  justifyContent: \"center\",\n  position: \"relative\",\n  transition: `box-shadow ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`,\n  zIndex: UI_SHELL_BASE_Z_INDEX,\n}));\n\nconst StyledTopNavMenu = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"topNavBackgroundColor\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n  topNavBackgroundColor?: UiShellColors[\"topNavBackgroundColor\"];\n}>(({ odysseyDesignTokens, topNavBackgroundColor }) => ({\n  alignItems: \"center\",\n  display: \"flex\",\n  gap: odysseyDesignTokens.Spacing3,\n  height: \"100%\",\n  justifyContent: \"space-between\",\n  maxHeight: TOP_NAV_HEIGHT,\n  minHeight: TOP_NAV_HEIGHT,\n  paddingBlock: odysseyDesignTokens.Spacing2,\n  paddingInline: odysseyDesignTokens.Spacing3,\n  transition: `box-shadow ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`,\n\n  ...(topNavBackgroundColor === odysseyDesignTokens.HueNeutralWhite &&\n    ({\n      borderBottomColor: odysseyDesignTokens.HueNeutral100,\n      borderBottomStyle: odysseyDesignTokens.BorderStyleMain,\n      borderBottomWidth: odysseyDesignTokens.BorderWidthMain,\n    } as CSSProperties)),\n}));\n\nconst StyledTopNavSearch = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  paddingBlock: odysseyDesignTokens.Spacing2,\n  paddingInline: odysseyDesignTokens.Spacing3,\n}));\n\nexport type NarrowUiShellContentProps = Pick<HtmlProps, \"testId\"> &\n  Pick<UiShellNavComponentProps, \"sideNavProps\" | \"topNavProps\"> &\n  UiShellContentProps;\n\nconst NarrowUiShellContent = ({\n  appElement,\n  appElementScrollingMode,\n  hasStandardAppContentPadding = true,\n  hasSideNavProps,\n  initialVisibleSections = [\"TopNav\", \"SideNav\", \"AppSwitcher\"],\n  onError = console.error,\n  optionalComponents,\n  sideNavProps,\n  topNavProps,\n}: NarrowUiShellContentProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const uiShellContext = useUiShellContext();\n\n  const { isContentScrolled } = useScrollState(appElement);\n\n  const sideNavContainerRef = useRef<HTMLDivElement>(null);\n  const topNavContainerRef = useRef<HTMLDivElement>(null);\n  const uiShellAppAreaRef = useRef<HTMLDivElement>(null);\n\n  const [isLeftSideMenuOpen, setIsLeftSideMenuOpen] = useState(false);\n  const [isRightSideMenuOpen, setIsRightSideMenuOpen] = useState(false);\n\n  const closeSideMenus = useCallback(() => {\n    setIsLeftSideMenuOpen(false);\n    setIsRightSideMenuOpen(false);\n  }, []);\n\n  useEffect(() => {\n    const unsubscribeFromCloseRightSideMenu =\n      uiShellContext?.subscribeToCloseRightSideMenu(() => {\n        closeSideMenus();\n      });\n\n    const unsubscribeFromSideNavItemClicked =\n      uiShellContext?.subscribeToCloseSideNavMenu(() => {\n        closeSideMenus();\n      });\n\n    return () => {\n      unsubscribeFromCloseRightSideMenu?.();\n      unsubscribeFromSideNavItemClicked?.();\n    };\n  }, [closeSideMenus, uiShellContext]);\n\n  const toggleLeftSideMenu = useCallback(() => {\n    setIsRightSideMenuOpen(false);\n    setIsLeftSideMenuOpen((isLeftSideMenuOpen) => !isLeftSideMenuOpen);\n  }, []);\n\n  const toggleRightSideMenu = useCallback(() => {\n    setIsLeftSideMenuOpen(false);\n    setIsRightSideMenuOpen((isRightSideMenuOpen) => !isRightSideMenuOpen);\n  }, []);\n\n  const { parentContainerRef } = useMatchAppElementToUiShellAppArea({\n    appElement,\n    appElementScrollingMode,\n    paddingMode: hasStandardAppContentPadding ? \"compact\" : \"none\",\n    uiShellAppAreaRef,\n    uiShellResizableRefs: [\n      sideNavContainerRef,\n      topNavContainerRef,\n      uiShellAppAreaRef,\n    ],\n  });\n\n  return (\n    <>\n      {(isLeftSideMenuOpen || isRightSideMenuOpen) && (\n        <StyledPageOverlay\n          odysseyDesignTokens={odysseyDesignTokens}\n          onClick={closeSideMenus}\n        />\n      )}\n\n      <StyledUiShellContainer\n        odysseyDesignTokens={odysseyDesignTokens}\n        ref={parentContainerRef}\n      >\n        <StyledBannersContainer>\n          {optionalComponents?.banners}\n        </StyledBannersContainer>\n\n        {(initialVisibleSections?.includes(\"TopNav\") || topNavProps) && (\n          <ErrorBoundary fallback={null} onError={onError}>\n            <StyledTopNav\n              isContentScrolled={isContentScrolled}\n              odysseyDesignTokens={odysseyDesignTokens}\n              topNavBackgroundColor={uiShellContext?.topNavBackgroundColor}\n            >\n              <StyledTopNavMenu\n                odysseyDesignTokens={odysseyDesignTokens}\n                topNavBackgroundColor={uiShellContext?.sideNavBackgroundColor}\n              >\n                <StyledMenuLogo odysseyDesignTokens={odysseyDesignTokens}>\n                  {(sideNavProps?.isCollapsible ||\n                    !sideNavProps?.isCollapsed) && (\n                    <Button\n                      onClick={toggleLeftSideMenu}\n                      startIcon={<HamburgerMenuIcon />}\n                      testId=\"sidenav-menu--icon\"\n                      variant=\"floating\"\n                    />\n                  )}\n\n                  <StyledLogoContainer\n                    odysseyDesignTokens={odysseyDesignTokens}\n                  >\n                    {sideNavProps?.isLoading ? (\n                      //  The skeleton takes the hardcoded dimensions of the Okta logo\n                      <Skeleton height={24} variant=\"rounded\" width={67} />\n                    ) : (\n                      <SideNavLogo {...sideNavProps?.logoProps} />\n                    )}\n                  </StyledLogoContainer>\n                </StyledMenuLogo>\n\n                {optionalComponents?.rightSideMenu && (\n                  <Button\n                    onClick={toggleRightSideMenu}\n                    startIcon={\n                      isRightSideMenuOpen ? <CloseIcon /> : <MoreIcon />\n                    }\n                    testId=\"userprofile-menu--icon\"\n                    variant=\"floating\"\n                  />\n                )}\n              </StyledTopNavMenu>\n\n              {optionalComponents?.topNavLeftSide && (\n                <StyledTopNavSearch odysseyDesignTokens={odysseyDesignTokens}>\n                  {optionalComponents?.topNavLeftSide}\n                </StyledTopNavSearch>\n              )}\n            </StyledTopNav>\n          </ErrorBoundary>\n        )}\n\n        <StyledAppContentArea>\n          <StyledLeftSideContainer isOpen={isLeftSideMenuOpen}>\n            {\n              /* If SideNav should be initially visible and we have not yet received props, render SideNav with minimal inputs */\n              initialVisibleSections?.includes(\"SideNav\") &&\n                !hasSideNavProps && (\n                  <ErrorBoundary fallback={null} onError={onError}>\n                    <SideNav isLoading sideNavItems={emptySideNavItems} />\n                  </ErrorBoundary>\n                )\n            }\n\n            {hasSideNavProps && sideNavProps && (\n              <ErrorBoundary fallback={null} onError={onError}>\n                <StyledSideNavContainer>\n                  <SideNav\n                    {...{\n                      ...{\n                        ...sideNavProps,\n                        // This hides the side nav logo or app name from showing up as we already have one in the narrow top nav.\n                        appName: undefined,\n                        logoProps: undefined,\n                      },\n                      ...(sideNavProps.hasCustomFooter &&\n                      optionalComponents?.sideNavFooter\n                        ? {\n                            footerComponent: optionalComponents.sideNavFooter,\n                            footerItems: undefined,\n                            hasCustomFooter: sideNavProps.hasCustomFooter,\n                          }\n                        : {\n                            footerItems: sideNavProps.footerItems,\n                            hasCustomFooter: false,\n                          }),\n                    }}\n                    isCollapsed={false}\n                    isCollapsible={false}\n                    isObtrusive\n                    onCollapse={closeSideMenus}\n                  />\n                </StyledSideNavContainer>\n              </ErrorBoundary>\n            )}\n          </StyledLeftSideContainer>\n\n          <StyledRightSideContainer\n            isOpen={isRightSideMenuOpen}\n            odysseyDesignTokens={odysseyDesignTokens}\n          >\n            <StyledSideNavContainer>\n              {optionalComponents?.rightSideMenu}\n            </StyledSideNavContainer>\n          </StyledRightSideContainer>\n\n          <StyledAppContainer\n            appBackgroundColor={uiShellContext?.appBackgroundColor}\n            ref={uiShellAppAreaRef}\n            tabIndex={0}\n          >\n            <InnerAppContainer isContentScrolled={isContentScrolled} />\n          </StyledAppContainer>\n        </StyledAppContentArea>\n      </StyledUiShellContainer>\n    </>\n  );\n};\n\nconst MemoizedNarrowUiShellContent = memo(NarrowUiShellContent);\nMemoizedNarrowUiShellContent.displayName = \"NarrowUiShellContent\";\n\nexport { MemoizedNarrowUiShellContent as NarrowUiShellContent };\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/ui-shell/SideNav/CollapseIcon.js

@@ -0,0 +1,30 @@
+/*!
+ * 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.
+ */
+
+import { memo } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+const CollapseIcon = () => {
+  return _jsx("svg", {
+    fill: "none",
+    height: "32",
+    viewBox: "0 0 12 20",
+    width: "32",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: _jsx("path", {
+      d: "M3.55226 9.99998L11.2761 2.27612L9.39051 0.390503L0.723837 9.05717C0.473789 9.30722 0.333313 9.64636 0.333313 9.99998C0.333313 10.3536 0.473789 10.6927 0.723837 10.9428L9.3905 19.6095L11.2761 17.7238L3.55226 9.99998Z",
+      fill: "#6E6E6E"
+    })
+  });
+};
+const MemoizedCollapseIcon = memo(CollapseIcon);
+export { MemoizedCollapseIcon as CollapseIcon };
+//# sourceMappingURL=CollapseIcon.js.map

package/dist/esm/ui-shell/SideNav/CollapseIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollapseIcon.js","names":["memo","jsx","_jsx","CollapseIcon","fill","height","viewBox","width","xmlns","children","d","MemoizedCollapseIcon"],"sources":["../../../../src/ui-shell/SideNav/CollapseIcon.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { memo } from \"react\";\n\nconst CollapseIcon = () => {\n  return (\n    <svg\n      fill=\"none\"\n      height=\"32\"\n      viewBox=\"0 0 12 20\"\n      width=\"32\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M3.55226 9.99998L11.2761 2.27612L9.39051 0.390503L0.723837 9.05717C0.473789 9.30722 0.333313 9.64636 0.333313 9.99998C0.333313 10.3536 0.473789 10.6927 0.723837 10.9428L9.3905 19.6095L11.2761 17.7238L3.55226 9.99998Z\"\n        fill=\"#6E6E6E\"\n      />\n    </svg>\n  );\n};\n\nconst MemoizedCollapseIcon = memo(CollapseIcon);\n\nexport { MemoizedCollapseIcon as CollapseIcon };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAQ,OAAO;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE7B,MAAMC,YAAY,GAAGA,CAAA,KAAM;EACzB,OACED,IAAA;IACEE,IAAI,EAAC,MAAM;IACXC,MAAM,EAAC,IAAI;IACXC,OAAO,EAAC,WAAW;IACnBC,KAAK,EAAC,IAAI;IACVC,KAAK,EAAC,4BAA4B;IAAAC,QAAA,EAElCP,IAAA;MACEQ,CAAC,EAAC,0NAA0N;MAC5NN,IAAI,EAAC;IAAS,CACf;EAAC,CACC,CAAC;AAEV,CAAC;AAED,MAAMO,oBAAoB,GAAGX,IAAI,CAACG,YAAY,CAAC;AAE/C,SAASQ,oBAAoB,IAAIR,YAAY","ignoreList":[]}

package/dist/esm/ui-shell/SideNav/HandleIcon.js

@@ -0,0 +1,32 @@
+/*!
+ * 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.
+ */
+
+import { memo } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+const HandleIcon = () => {
+  return _jsx("svg", {
+    fill: "none",
+    height: "32",
+    viewBox: "0 0 32 32",
+    width: "32",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: _jsx("path", {
+      clipRule: "evenodd",
+      d: "M17.4167 6.66687L17.4167 25.3335L14.5834 25.3335L14.5834 6.66687L17.4167 6.66687Z",
+      fill: "#6E6E6E",
+      fillRule: "evenodd"
+    })
+  });
+};
+const MemoizedHandleIcon = memo(HandleIcon);
+export { MemoizedHandleIcon as HandleIcon };
+//# sourceMappingURL=HandleIcon.js.map

package/dist/esm/ui-shell/SideNav/HandleIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HandleIcon.js","names":["memo","jsx","_jsx","HandleIcon","fill","height","viewBox","width","xmlns","children","clipRule","d","fillRule","MemoizedHandleIcon"],"sources":["../../../../src/ui-shell/SideNav/HandleIcon.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { memo } from \"react\";\n\nconst HandleIcon = () => {\n  return (\n    <svg\n      fill=\"none\"\n      height=\"32\"\n      viewBox=\"0 0 32 32\"\n      width=\"32\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        clipRule=\"evenodd\"\n        d=\"M17.4167 6.66687L17.4167 25.3335L14.5834 25.3335L14.5834 6.66687L17.4167 6.66687Z\"\n        fill=\"#6E6E6E\"\n        fillRule=\"evenodd\"\n      />\n    </svg>\n  );\n};\nconst MemoizedHandleIcon = memo(HandleIcon);\n\nexport { MemoizedHandleIcon as HandleIcon };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAQ,OAAO;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE7B,MAAMC,UAAU,GAAGA,CAAA,KAAM;EACvB,OACED,IAAA;IACEE,IAAI,EAAC,MAAM;IACXC,MAAM,EAAC,IAAI;IACXC,OAAO,EAAC,WAAW;IACnBC,KAAK,EAAC,IAAI;IACVC,KAAK,EAAC,4BAA4B;IAAAC,QAAA,EAElCP,IAAA;MACEQ,QAAQ,EAAC,SAAS;MAClBC,CAAC,EAAC,mFAAmF;MACrFP,IAAI,EAAC,SAAS;MACdQ,QAAQ,EAAC;IAAS,CACnB;EAAC,CACC,CAAC;AAEV,CAAC;AACD,MAAMC,kBAAkB,GAAGb,IAAI,CAACG,UAAU,CAAC;AAE3C,SAASU,kBAAkB,IAAIV,UAAU","ignoreList":[]}

package/dist/esm/ui-shell/SideNav/NavAccordion.js

@@ -0,0 +1,168 @@
+import _Accordion from "@mui/material/Accordion";
+import _AccordionDetails from "@mui/material/AccordionDetails";
+import _AccordionSummary from "@mui/material/AccordionSummary";
+/*!
+ * 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.
+ */
+
+import styled from "@emotion/styled";
+import { memo } from "react";
+import { ChevronDownIcon } from "../../icons.generated/index.js";
+import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
+import { useUiShellContext } from "../../ui-shell/UiShellProvider.js";
+import { useUniqueId } from "../../useUniqueId.js";
+import { useSideNavItemContent } from "./SideNavItemContentContext.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SideNavAccordionContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "backgroundColor" && prop !== "fontColor"
+})(({
+  backgroundColor,
+  fontColor
+}) => ({
+  width: "100%",
+  ".MuiAccordion-root": {
+    backgroundColor: backgroundColor,
+    color: fontColor || "inherit"
+  }
+}));
+const AccordionLabelContainer = styled("span", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isIconVisible" && prop !== "sideNavContrastColors"
+})(({
+  sideNavContrastColors,
+  odysseyDesignTokens,
+  isIconVisible
+}) => ({
+  width: "100%",
+  marginInlineStart: isIconVisible ? odysseyDesignTokens.Spacing3 : 0,
+  fontWeight: odysseyDesignTokens.TypographyWeightBody,
+  color: sideNavContrastColors?.fontColor || odysseyDesignTokens.TypographyColorHeading,
+  ".Mui-disabled &": {
+    color: odysseyDesignTokens.TypographyColorDisabled,
+    ...(sideNavContrastColors?.itemDisabledFontColor && {
+      color: sideNavContrastColors?.itemDisabledFontColor
+    })
+  }
+}));
+const AccordionSummaryContainer = styled(_AccordionSummary, {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isCompact" && prop !== "isDisabled" && prop !== "sideNavContrastColors" && prop !== "depth"
+})(({
+  odysseyDesignTokens,
+  sideNavContrastColors,
+  isCompact,
+  isDisabled,
+  depth = 1
+}) => ({
+  borderRadius: odysseyDesignTokens.BorderRadiusMain,
+  paddingBlock: odysseyDesignTokens.Spacing3,
+  paddingInlineStart: `calc(${odysseyDesignTokens.Spacing4} * ${depth})`,
+  paddingInlineEnd: odysseyDesignTokens.Spacing4,
+  alignItems: "center",
+  ".MuiAccordionSummary-content": {
+    alignItems: "center"
+  },
+  ...(isDisabled && {
+    opacity: "1 !important",
+    ...(sideNavContrastColors?.itemDisabledFontColor && {
+      svg: {
+        path: {
+          fill: `${sideNavContrastColors.itemDisabledFontColor} !important`
+        }
+      }
+    })
+  }),
+  ...(!isDisabled && {
+    "&:hover": {
+      backgroundColor: odysseyDesignTokens.HueNeutral50
+    }
+  }),
+  ...(!isDisabled && sideNavContrastColors?.fontColor && {
+    svg: {
+      path: {
+        fill: `${sideNavContrastColors.fontColor} !important`
+      }
+    }
+  }),
+  ...(sideNavContrastColors?.itemHoverBackgroundColor && {
+    ...(!isDisabled && {
+      "&:hover": {
+        backgroundColor: sideNavContrastColors.itemHoverBackgroundColor
+      }
+    })
+  }),
+  "&:focus-visible": {
+    backgroundColor: "unset",
+    outline: "none",
+    boxShadow: `inset 0 0 0 2px ${odysseyDesignTokens.PalettePrimaryMain}`,
+    ...(sideNavContrastColors?.focusRingColor && {
+      boxShadow: `inset 0 0 0 2px ${sideNavContrastColors.focusRingColor}`
+    })
+  },
+  ...(isCompact && {
+    paddingBlock: odysseyDesignTokens.Spacing2,
+    minHeight: "unset"
+  })
+}));
+const NavAccordion = ({
+  children,
+  label,
+  id: idOverride,
+  isCompact,
+  isDefaultExpanded,
+  isDisabled,
+  isExpanded,
+  onChange,
+  translate,
+  startIcon
+}) => {
+  const id = useUniqueId(idOverride);
+  const headerId = `${id}-header`;
+  const contentId = `${id}-content`;
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const uiShellContext = useUiShellContext();
+  const sideNavItemContentContext = useSideNavItemContent();
+  return _jsx(SideNavAccordionContainer, {
+    backgroundColor: uiShellContext?.sideNavBackgroundColor,
+    children: _jsxs(_Accordion, {
+      className: "nav-accordion",
+      defaultExpanded: isDefaultExpanded,
+      disabled: isDisabled,
+      disableGutters: true,
+      expanded: isExpanded,
+      onChange: onChange,
+      children: [_jsxs(AccordionSummaryContainer, {
+        "aria-controls": contentId,
+        className: "nav-accordion-summary",
+        depth: sideNavItemContentContext.depth,
+        expandIcon: _jsx(ChevronDownIcon, {}),
+        id: headerId,
+        isCompact: isCompact,
+        isDisabled: isDisabled,
+        odysseyDesignTokens: odysseyDesignTokens,
+        sideNavContrastColors: uiShellContext?.sideNavContrastColors,
+        children: [startIcon && startIcon, _jsx(AccordionLabelContainer, {
+          isIconVisible: Boolean(startIcon),
+          odysseyDesignTokens: odysseyDesignTokens,
+          sideNavContrastColors: uiShellContext?.sideNavContrastColors,
+          translate: translate,
+          children: label
+        })]
+      }), _jsx(_AccordionDetails, {
+        "aria-labelledby": headerId,
+        className: "nav-accordion-details",
+        children: children
+      })]
+    })
+  });
+};
+const MemoizedNavAccordion = memo(NavAccordion);
+MemoizedNavAccordion.displayName = "NavAccordion";
+export { MemoizedNavAccordion as NavAccordion };
+//# sourceMappingURL=NavAccordion.js.map