@okta/odyssey-react-mui 1.24.1 → 1.26.0

package/dist/labs/SideNav/SideNavItemContent.js

@@ -1,3 +1,4 @@
+import _Link from "@mui/material/Link";
 /*!
  * 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.")
@@ -11,46 +12,31 @@
  */
 
 import styled from "@emotion/styled";
-import { useRef, useImperativeHandle, useCallback, memo } from "react";
-import { Link } from "../../Link.js";
+import { useRef, useImperativeHandle, useCallback, memo, useMemo } from "react";
 import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
 import { SideNavItemLinkContent } from "./SideNavItemLinkContent.js";
+import { useSideNavItemContent } from "./SideNavItemContentContext.js";
+import { ExternalLinkIcon } from "../../icons.generated/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const SideNavListItemContainer = styled("li", {
-  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isSelected" && prop !== "isDisabled"
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export const StyledSideNavListItem = styled("li", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isSelected"
 })(({
   odysseyDesignTokens,
-  isSelected,
-  isDisabled
+  isSelected
 }) => ({
   display: "flex",
   alignItems: "center",
-  cursor: isDisabled ? "default" : "pointer",
-  pointerEvents: isDisabled ? "none" : "auto",
-  backgroundColor: isSelected ? odysseyDesignTokens.HueNeutral50 : "unset",
-  margin: `${odysseyDesignTokens.Spacing1} 0`,
+  backgroundColor: "unset",
+  borderRadius: odysseyDesignTokens.BorderRadiusMain,
+  lineHeight: 1.5,
+  transition: `backgroundColor ${odysseyDesignTokens.TransitionDurationMain}, color ${odysseyDesignTokens.TransitionDurationMain}`,
+  ...(isSelected && {
+    color: `${odysseyDesignTokens.TypographyColorAction} !important`,
+    backgroundColor: odysseyDesignTokens.HueBlue50
+  }),
   "&:last-child": {
     marginBottom: odysseyDesignTokens.Spacing2
-  },
-  "& a": {
-    display: "flex",
-    alignItems: "center",
-    width: "100%",
-    minHeight: "48px",
-    padding: `${odysseyDesignTokens.Spacing3} ${odysseyDesignTokens.Spacing4}`,
-    color: `${odysseyDesignTokens.TypographyColorHeading} !important`,
-    pointerEvents: isDisabled ? "none" : "auto"
-  },
-  "& a:hover": {
-    textDecoration: "none",
-    cursor: isDisabled ? "default" : "pointer",
-    backgroundColor: !isDisabled ? odysseyDesignTokens.HueNeutral50 : "inherit"
-  },
-  "& a:focus-visible": {
-    outlineOffset: 0,
-    borderRadius: 0,
-    outlineWidth: odysseyDesignTokens.FocusOutlineWidthMain,
-    backgroundColor: !isDisabled ? odysseyDesignTokens.HueNeutral50 : "inherit"
   }
 }));
 const scrollToNode = node => {
@@ -62,7 +48,62 @@ const scrollToNode = node => {
     });
   }
 };
+const GetNavItemContentStyles = ({
+  odysseyDesignTokens,
+  contextValue,
+  isDisabled,
+  isSelected
+}) => {
+  return {
+    display: "flex",
+    alignItems: "center",
+    width: "100%",
+    textDecoration: "none",
+    color: `${odysseyDesignTokens.TypographyColorHeading} !important`,
+    minHeight: odysseyDesignTokens.Spacing7,
+    paddingBlock: odysseyDesignTokens.Spacing4,
+    paddingInline: `calc(${odysseyDesignTokens.Spacing4} * ${contextValue.depth})`,
+    borderRadius: odysseyDesignTokens.BorderRadiusMain,
+    transition: `backgroundColor ${odysseyDesignTokens.TransitionDurationMain}, color ${odysseyDesignTokens.TransitionDurationMain}`,
+    "&:hover": {
+      textDecoration: "none",
+      cursor: "pointer",
+      backgroundColor: !isDisabled ? odysseyDesignTokens.HueNeutral50 : "inherit",
+      ...(isDisabled && {
+        color: "inherit",
+        cursor: "default"
+      }),
+      ...(isSelected && {
+        "&:hover": {
+          backgroundColor: odysseyDesignTokens.HueBlue50
+        }
+      })
+    },
+    ...(isSelected && {
+      color: `${odysseyDesignTokens.TypographyColorAction} !important`,
+      fontWeight: odysseyDesignTokens.TypographyWeightBodyBold
+    }),
+    ...(isDisabled && {
+      color: `${odysseyDesignTokens.TypographyColorDisabled} !important`
+    }),
+    ...(contextValue.isCompact && {
+      paddingBlock: odysseyDesignTokens.Spacing1,
+      minHeight: odysseyDesignTokens.Spacing6
+    }),
+    "&:focus-visible": {
+      outline: "none",
+      boxShadow: `inset 0 0 0 3px ${odysseyDesignTokens.PalettePrimaryMain}`
+    }
+  };
+};
+const NavItemContentContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop != "contextValue" && prop !== "isDisabled" && prop !== "isSelected"
+})(GetNavItemContentStyles);
+const NavItemLinkContainer = styled(_Link, {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop != "contextValue" && prop !== "isDisabled" && prop !== "isSelected"
+})(GetNavItemContentStyles);
 const SideNavItemContent = ({
+  count,
   id,
   label,
   href,
@@ -76,6 +117,9 @@ const SideNavItemContent = ({
   isDisabled,
   scrollRef
 }) => {
+  const sidenavItemContentContext = useSideNavItemContent();
+  const contextValue = useMemo(() => sidenavItemContentContext, [sidenavItemContentContext]);
+  const odysseyDesignTokens = useOdysseyDesignTokens();
   const localScrollRef = useRef(null);
   useImperativeHandle(scrollRef, () => {
     return {
@@ -84,70 +128,68 @@ const SideNavItemContent = ({
       }
     };
   }, []);
-  const odysseyDesignTokens = useOdysseyDesignTokens();
-  const NavItemContentClickContainer = styled("div", {
-    shouldForwardProp: prop => prop !== "odysseyDesignTokens"
-  })(() => ({
-    display: "flex",
-    alignItems: "center",
-    width: "100%",
-    minHeight: "48px",
-    padding: `${odysseyDesignTokens.Spacing3} ${odysseyDesignTokens.Spacing4}`,
-    color: `${isDisabled ? odysseyDesignTokens.TypographyColorDisabled : odysseyDesignTokens.TypographyColorHeading} !important`,
-    "&:focus-visible": {
-      borderRadius: 0,
-      outlineColor: odysseyDesignTokens.FocusOutlineColorPrimary,
-      outlineStyle: odysseyDesignTokens.FocusOutlineStyle,
-      outlineWidth: odysseyDesignTokens.FocusOutlineWidthMain,
-      backgroundColor: odysseyDesignTokens.HueNeutral50,
-      textDecoration: "none"
-    }
-  }));
   const sideNavItemContentKeyHandler = useCallback(event => {
     if (event?.key === "Enter") {
       event.preventDefault();
       onClick?.();
     }
   }, [onClick]);
-  return _jsx(SideNavListItemContainer, {
+  return _jsx(StyledSideNavListItem, {
     ref: localScrollRef,
     id: id,
+    isSelected: isSelected,
     disabled: isDisabled,
     "aria-disabled": isDisabled,
-    isDisabled: isDisabled,
-    isSelected: isSelected,
+    "aria-current": isSelected ? "page" : undefined,
     odysseyDesignTokens: odysseyDesignTokens,
-    children: isDisabled ? _jsx(NavItemContentClickContainer, {
+    children: isDisabled ? _jsx(NavItemContentContainer, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      contextValue: contextValue,
+      isDisabled: isDisabled,
+      isSelected: isSelected,
       children: _jsx(SideNavItemLinkContent, {
+        count: count,
         label: label,
         startIcon: startIcon,
         endIcon: endIcon,
         statusLabel: statusLabel,
         severity: severity
       })
-    }) : !href ? _jsx(NavItemContentClickContainer, {
-      role: "button",
+    }) : !href ? _jsx(NavItemContentContainer, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      contextValue: contextValue,
+      isDisabled: isDisabled,
       tabIndex: 0,
       onClick: onClick,
       onKeyDown: sideNavItemContentKeyHandler,
       children: _jsx(SideNavItemLinkContent, {
+        count: count,
         label: label,
         startIcon: startIcon,
         endIcon: endIcon,
         statusLabel: statusLabel,
         severity: severity
       })
-    }) : _jsx(Link, {
+    }) : _jsxs(NavItemLinkContainer, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      contextValue: contextValue,
+      isDisabled: isDisabled,
+      isSelected: isSelected,
       href: href,
       target: target,
       onClick: onClick,
-      children: _jsx(SideNavItemLinkContent, {
+      children: [_jsx(SideNavItemLinkContent, {
+        count: count,
         label: label,
         startIcon: startIcon,
         endIcon: endIcon,
         statusLabel: statusLabel,
         severity: severity
-      })
+      }), target === "_blank" && _jsx("span", {
+        className: "Link-indicator",
+        role: "presentation",
+        children: _jsx(ExternalLinkIcon, {})
+      })]
     })
   }, id);
 };

package/dist/labs/SideNav/SideNavItemContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"SideNavItemContent.js","names":["styled","useRef","useImperativeHandle","useCallback","memo","Link","useOdysseyDesignTokens","SideNavItemLinkContent","jsx","_jsx","SideNavListItemContainer","shouldForwardProp","prop","odysseyDesignTokens","isSelected","isDisabled","display","alignItems","cursor","pointerEvents","backgroundColor","HueNeutral50","margin","Spacing1","marginBottom","Spacing2","width","minHeight","padding","Spacing3","Spacing4","color","TypographyColorHeading","textDecoration","outlineOffset","borderRadius","outlineWidth","FocusOutlineWidthMain","scrollToNode","node","scrollIntoView","behavior","block","inline","SideNavItemContent","id","label","href","target","startIcon","severity","statusLabel","endIcon","onClick","scrollRef","localScrollRef","current","NavItemContentClickContainer","TypographyColorDisabled","outlineColor","FocusOutlineColorPrimary","outlineStyle","FocusOutlineStyle","sideNavItemContentKeyHandler","event","key","preventDefault","ref","disabled","children","role","tabIndex","onKeyDown","MemoizedSideNavItemContent","displayName"],"sources":["../../../src/labs/SideNav/SideNavItemContent.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 styled from \"@emotion/styled\";\nimport {\n  useRef,\n  useImperativeHandle,\n  useCallback,\n  memo,\n  KeyboardEvent,\n} from \"react\";\nimport { Link } from \"../../Link\";\nimport {\n  type DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext\";\nimport { SideNavItemLinkContent } from \"./SideNavItemLinkContent\";\nimport type { SideNavItem } from \"./types\";\n\nexport const SideNavListItemContainer = styled(\"li\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"isSelected\" &&\n    prop !== \"isDisabled\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n  isSelected?: boolean;\n  disabled?: boolean;\n  isDisabled?: boolean;\n}>(({ odysseyDesignTokens, isSelected, isDisabled }) => ({\n  display: \"flex\",\n  alignItems: \"center\",\n  cursor: isDisabled ? \"default\" : \"pointer\",\n  pointerEvents: isDisabled ? \"none\" : \"auto\",\n  backgroundColor: isSelected ? odysseyDesignTokens.HueNeutral50 : \"unset\",\n  margin: `${odysseyDesignTokens.Spacing1} 0`,\n  \"&:last-child\": {\n    marginBottom: odysseyDesignTokens.Spacing2,\n  },\n  \"& a\": {\n    display: \"flex\",\n    alignItems: \"center\",\n    width: \"100%\",\n    minHeight: \"48px\",\n    padding: `${odysseyDesignTokens.Spacing3} ${odysseyDesignTokens.Spacing4}`,\n    color: `${odysseyDesignTokens.TypographyColorHeading} !important`,\n    pointerEvents: isDisabled ? \"none\" : \"auto\",\n  },\n  \"& a:hover\": {\n    textDecoration: \"none\",\n    cursor: isDisabled ? \"default\" : \"pointer\",\n    backgroundColor: !isDisabled ? odysseyDesignTokens.HueNeutral50 : \"inherit\",\n  },\n  \"& a:focus-visible\": {\n    outlineOffset: 0,\n    borderRadius: 0,\n    outlineWidth: odysseyDesignTokens.FocusOutlineWidthMain,\n    backgroundColor: !isDisabled ? odysseyDesignTokens.HueNeutral50 : \"inherit\",\n  },\n}));\n\nconst scrollToNode = (node: HTMLElement | null) => {\n  if (node) {\n    node?.scrollIntoView({\n      behavior: \"instant\",\n      block: \"center\",\n      inline: \"nearest\",\n    });\n  }\n};\n\ntype ScrollIntoViewHandle = {\n  scrollIntoView: () => void;\n};\n\nconst SideNavItemContent = ({\n  id,\n  label,\n  href,\n  target,\n  startIcon,\n  severity,\n  statusLabel,\n  endIcon,\n  onClick,\n  isSelected,\n  isDisabled,\n  scrollRef,\n}: Pick<\n  SideNavItem,\n  | \"id\"\n  | \"label\"\n  | \"href\"\n  | \"target\"\n  | \"startIcon\"\n  | \"severity\"\n  | \"statusLabel\"\n  | \"endIcon\"\n  | \"onClick\"\n  | \"isSelected\"\n  | \"isDisabled\"\n> & {\n  /**\n   * The ref used to scroll to this item\n   */\n  scrollRef?: React.RefObject<ScrollIntoViewHandle>;\n}) => {\n  const localScrollRef = useRef<HTMLLIElement>(null);\n  useImperativeHandle(\n    scrollRef,\n    () => {\n      return {\n        scrollIntoView: () => {\n          scrollToNode(localScrollRef.current);\n        },\n      };\n    },\n    [],\n  );\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const NavItemContentClickContainer = styled(\"div\", {\n    shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n  })(() => ({\n    display: \"flex\",\n    alignItems: \"center\",\n    width: \"100%\",\n    minHeight: \"48px\",\n    padding: `${odysseyDesignTokens.Spacing3} ${odysseyDesignTokens.Spacing4}`,\n    color: `${isDisabled ? odysseyDesignTokens.TypographyColorDisabled : odysseyDesignTokens.TypographyColorHeading} !important`,\n    \"&:focus-visible\": {\n      borderRadius: 0,\n      outlineColor: odysseyDesignTokens.FocusOutlineColorPrimary,\n      outlineStyle: odysseyDesignTokens.FocusOutlineStyle,\n      outlineWidth: odysseyDesignTokens.FocusOutlineWidthMain,\n      backgroundColor: odysseyDesignTokens.HueNeutral50,\n      textDecoration: \"none\",\n    },\n  }));\n\n  const sideNavItemContentKeyHandler = useCallback(\n    (event: KeyboardEvent<HTMLDivElement>) => {\n      if (event?.key === \"Enter\") {\n        event.preventDefault();\n        onClick?.();\n      }\n    },\n    [onClick],\n  );\n\n  return (\n    <SideNavListItemContainer\n      ref={localScrollRef}\n      id={id}\n      key={id}\n      disabled={isDisabled}\n      aria-disabled={isDisabled}\n      isDisabled={isDisabled}\n      isSelected={isSelected}\n      odysseyDesignTokens={odysseyDesignTokens}\n    >\n      {\n        // Use Link for nav items with links and div for disabled or non-link items\n        isDisabled ? (\n          <NavItemContentClickContainer>\n            <SideNavItemLinkContent\n              label={label}\n              startIcon={startIcon}\n              endIcon={endIcon}\n              statusLabel={statusLabel}\n              severity={severity}\n            />\n          </NavItemContentClickContainer>\n        ) : !href ? (\n          <NavItemContentClickContainer\n            role=\"button\"\n            tabIndex={0}\n            onClick={onClick}\n            onKeyDown={sideNavItemContentKeyHandler}\n          >\n            <SideNavItemLinkContent\n              label={label}\n              startIcon={startIcon}\n              endIcon={endIcon}\n              statusLabel={statusLabel}\n              severity={severity}\n            />\n          </NavItemContentClickContainer>\n        ) : (\n          <Link href={href} target={target} onClick={onClick}>\n            <SideNavItemLinkContent\n              label={label}\n              startIcon={startIcon}\n              endIcon={endIcon}\n              statusLabel={statusLabel}\n              severity={severity}\n            />\n          </Link>\n        )\n      }\n    </SideNavListItemContainer>\n  );\n};\nconst MemoizedSideNavItemContent = memo(SideNavItemContent);\nMemoizedSideNavItemContent.displayName = \"SideNavItemContent\";\n\nexport { MemoizedSideNavItemContent as SideNavItemContent };\n"],"mappings":"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"}
+{"version":3,"file":"SideNavItemContent.js","names":["styled","useRef","useImperativeHandle","useCallback","memo","useMemo","useOdysseyDesignTokens","SideNavItemLinkContent","useSideNavItemContent","ExternalLinkIcon","jsx","_jsx","jsxs","_jsxs","StyledSideNavListItem","shouldForwardProp","prop","odysseyDesignTokens","isSelected","display","alignItems","backgroundColor","borderRadius","BorderRadiusMain","lineHeight","transition","TransitionDurationMain","color","TypographyColorAction","HueBlue50","marginBottom","Spacing2","scrollToNode","node","scrollIntoView","behavior","block","inline","GetNavItemContentStyles","contextValue","isDisabled","width","textDecoration","TypographyColorHeading","minHeight","Spacing7","paddingBlock","Spacing4","paddingInline","depth","cursor","HueNeutral50","fontWeight","TypographyWeightBodyBold","TypographyColorDisabled","isCompact","Spacing1","Spacing6","outline","boxShadow","PalettePrimaryMain","NavItemContentContainer","NavItemLinkContainer","_Link","SideNavItemContent","count","id","label","href","target","startIcon","severity","statusLabel","endIcon","onClick","scrollRef","sidenavItemContentContext","localScrollRef","current","sideNavItemContentKeyHandler","event","key","preventDefault","ref","disabled","undefined","children","tabIndex","onKeyDown","className","role","MemoizedSideNavItemContent","displayName"],"sources":["../../../src/labs/SideNav/SideNavItemContent.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 styled from \"@emotion/styled\";\nimport {\n  useRef,\n  useImperativeHandle,\n  useCallback,\n  memo,\n  KeyboardEvent,\n  useMemo,\n} from \"react\";\nimport { Link as NavItemLink } from \"@mui/material\";\nimport {\n  type DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext\";\nimport { SideNavItemLinkContent } from \"./SideNavItemLinkContent\";\nimport type { SideNavItem } from \"./types\";\nimport {\n  SideNavItemContentContextValue,\n  useSideNavItemContent,\n} from \"./SideNavItemContentContext\";\nimport { ExternalLinkIcon } from \"../../icons.generated\";\n\nexport const StyledSideNavListItem = styled(\"li\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"isSelected\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n  isSelected?: boolean;\n  disabled?: boolean;\n}>(({ odysseyDesignTokens, isSelected }) => ({\n  display: \"flex\",\n  alignItems: \"center\",\n  backgroundColor: \"unset\",\n  borderRadius: odysseyDesignTokens.BorderRadiusMain,\n  lineHeight: 1.5,\n  transition: `backgroundColor ${odysseyDesignTokens.TransitionDurationMain}, color ${odysseyDesignTokens.TransitionDurationMain}`,\n\n  ...(isSelected && {\n    color: `${odysseyDesignTokens.TypographyColorAction} !important`,\n    backgroundColor: odysseyDesignTokens.HueBlue50,\n  }),\n\n  \"&:last-child\": {\n    marginBottom: odysseyDesignTokens.Spacing2,\n  },\n}));\n\nconst scrollToNode = (node: HTMLElement | null) => {\n  if (node) {\n    node?.scrollIntoView({\n      behavior: \"instant\",\n      block: \"center\",\n      inline: \"nearest\",\n    });\n  }\n};\n\ntype ScrollIntoViewHandle = {\n  scrollIntoView: () => void;\n};\n\nconst GetNavItemContentStyles = ({\n  odysseyDesignTokens,\n  contextValue,\n  isDisabled,\n  isSelected,\n}: {\n  odysseyDesignTokens: DesignTokens;\n  contextValue: SideNavItemContentContextValue;\n  isDisabled?: boolean;\n  isSelected?: boolean;\n}) => {\n  return {\n    display: \"flex\",\n    alignItems: \"center\",\n    width: \"100%\",\n    textDecoration: \"none\",\n    color: `${odysseyDesignTokens.TypographyColorHeading} !important`,\n    minHeight: odysseyDesignTokens.Spacing7,\n    paddingBlock: odysseyDesignTokens.Spacing4,\n    paddingInline: `calc(${odysseyDesignTokens.Spacing4} * ${contextValue.depth})`,\n    borderRadius: odysseyDesignTokens.BorderRadiusMain,\n    transition: `backgroundColor ${odysseyDesignTokens.TransitionDurationMain}, color ${odysseyDesignTokens.TransitionDurationMain}`,\n\n    \"&:hover\": {\n      textDecoration: \"none\",\n      cursor: \"pointer\",\n      backgroundColor: !isDisabled\n        ? odysseyDesignTokens.HueNeutral50\n        : \"inherit\",\n\n      ...(isDisabled && {\n        color: \"inherit\",\n        cursor: \"default\",\n      }),\n\n      ...(isSelected && {\n        \"&:hover\": {\n          backgroundColor: odysseyDesignTokens.HueBlue50,\n        },\n      }),\n    },\n\n    ...(isSelected && {\n      color: `${odysseyDesignTokens.TypographyColorAction} !important`,\n      fontWeight: odysseyDesignTokens.TypographyWeightBodyBold,\n    }),\n\n    ...(isDisabled && {\n      color: `${odysseyDesignTokens.TypographyColorDisabled} !important`,\n    }),\n\n    ...(contextValue.isCompact && {\n      paddingBlock: odysseyDesignTokens.Spacing1,\n      minHeight: odysseyDesignTokens.Spacing6,\n    }),\n\n    \"&:focus-visible\": {\n      outline: \"none\",\n      boxShadow: `inset 0 0 0 3px ${odysseyDesignTokens.PalettePrimaryMain}`,\n    },\n  };\n};\n\nconst NavItemContentContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" &&\n    prop != \"contextValue\" &&\n    prop !== \"isDisabled\" &&\n    prop !== \"isSelected\",\n})(GetNavItemContentStyles);\n\nconst NavItemLinkContainer = styled(NavItemLink, {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" &&\n    prop != \"contextValue\" &&\n    prop !== \"isDisabled\" &&\n    prop !== \"isSelected\",\n})(GetNavItemContentStyles);\n\nconst SideNavItemContent = ({\n  count,\n  id,\n  label,\n  href,\n  target,\n  startIcon,\n  severity,\n  statusLabel,\n  endIcon,\n  onClick,\n  isSelected,\n  isDisabled,\n  scrollRef,\n}: Pick<\n  SideNavItem,\n  | \"count\"\n  | \"id\"\n  | \"label\"\n  | \"href\"\n  | \"target\"\n  | \"startIcon\"\n  | \"severity\"\n  | \"statusLabel\"\n  | \"endIcon\"\n  | \"onClick\"\n  | \"isSelected\"\n  | \"isDisabled\"\n> & {\n  /**\n   * The ref used to scroll to this item\n   */\n  scrollRef?: React.RefObject<ScrollIntoViewHandle>;\n}) => {\n  const sidenavItemContentContext = useSideNavItemContent();\n  const contextValue = useMemo(\n    () => sidenavItemContentContext,\n    [sidenavItemContentContext],\n  );\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const localScrollRef = useRef<HTMLLIElement>(null);\n  useImperativeHandle(\n    scrollRef,\n    () => {\n      return {\n        scrollIntoView: () => {\n          scrollToNode(localScrollRef.current);\n        },\n      };\n    },\n    [],\n  );\n\n  const sideNavItemContentKeyHandler = useCallback(\n    (event: KeyboardEvent<HTMLDivElement>) => {\n      if (event?.key === \"Enter\") {\n        event.preventDefault();\n        onClick?.();\n      }\n    },\n    [onClick],\n  );\n\n  return (\n    <StyledSideNavListItem\n      ref={localScrollRef}\n      id={id}\n      key={id}\n      isSelected={isSelected}\n      disabled={isDisabled}\n      aria-disabled={isDisabled}\n      aria-current={isSelected ? \"page\" : undefined}\n      odysseyDesignTokens={odysseyDesignTokens}\n    >\n      {\n        // Use Link for nav items with links and div for disabled or non-link items\n        isDisabled ? (\n          <NavItemContentContainer\n            odysseyDesignTokens={odysseyDesignTokens}\n            contextValue={contextValue}\n            isDisabled={isDisabled}\n            isSelected={isSelected}\n          >\n            <SideNavItemLinkContent\n              count={count}\n              label={label}\n              startIcon={startIcon}\n              endIcon={endIcon}\n              statusLabel={statusLabel}\n              severity={severity}\n            />\n          </NavItemContentContainer>\n        ) : !href ? (\n          <NavItemContentContainer\n            odysseyDesignTokens={odysseyDesignTokens}\n            contextValue={contextValue}\n            isDisabled={isDisabled}\n            tabIndex={0}\n            onClick={onClick}\n            onKeyDown={sideNavItemContentKeyHandler}\n          >\n            <SideNavItemLinkContent\n              count={count}\n              label={label}\n              startIcon={startIcon}\n              endIcon={endIcon}\n              statusLabel={statusLabel}\n              severity={severity}\n            />\n          </NavItemContentContainer>\n        ) : (\n          <NavItemLinkContainer\n            odysseyDesignTokens={odysseyDesignTokens}\n            contextValue={contextValue}\n            isDisabled={isDisabled}\n            isSelected={isSelected}\n            href={href}\n            target={target}\n            onClick={onClick}\n          >\n            <SideNavItemLinkContent\n              count={count}\n              label={label}\n              startIcon={startIcon}\n              endIcon={endIcon}\n              statusLabel={statusLabel}\n              severity={severity}\n            />\n            {target === \"_blank\" && (\n              <span className=\"Link-indicator\" role=\"presentation\">\n                <ExternalLinkIcon />\n              </span>\n            )}\n          </NavItemLinkContainer>\n        )\n      }\n    </StyledSideNavListItem>\n  );\n};\nconst MemoizedSideNavItemContent = memo(SideNavItemContent);\nMemoizedSideNavItemContent.displayName = \"SideNavItemContent\";\n\nexport { MemoizedSideNavItemContent as SideNavItemContent };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SACEC,MAAM,EACNC,mBAAmB,EACnBC,WAAW,EACXC,IAAI,EAEJC,OAAO,QACF,OAAO;AAAC,SAIbC,sBAAsB;AAAA,SAEfC,sBAAsB;AAAA,SAI7BC,qBAAqB;AAAA,SAEdC,gBAAgB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAEzB,OAAO,MAAMC,qBAAqB,GAAGd,MAAM,CAAC,IAAI,EAAE;EAChDe,iBAAiB,EAAGC,IAAI,IACtBA,IAAI,KAAK,qBAAqB,IAAIA,IAAI,KAAK;AAC/C,CAAC,CAAC,CAIC,CAAC;EAAEC,mBAAmB;EAAEC;AAAW,CAAC,MAAM;EAC3CC,OAAO,EAAE,MAAM;EACfC,UAAU,EAAE,QAAQ;EACpBC,eAAe,EAAE,OAAO;EACxBC,YAAY,EAAEL,mBAAmB,CAACM,gBAAgB;EAClDC,UAAU,EAAE,GAAG;EACfC,UAAU,EAAG,mBAAkBR,mBAAmB,CAACS,sBAAuB,WAAUT,mBAAmB,CAACS,sBAAuB,EAAC;EAEhI,IAAIR,UAAU,IAAI;IAChBS,KAAK,EAAG,GAAEV,mBAAmB,CAACW,qBAAsB,aAAY;IAChEP,eAAe,EAAEJ,mBAAmB,CAACY;EACvC,CAAC,CAAC;EAEF,cAAc,EAAE;IACdC,YAAY,EAAEb,mBAAmB,CAACc;EACpC;AACF,CAAC,CAAC,CAAC;AAEH,MAAMC,YAAY,GAAIC,IAAwB,IAAK;EACjD,IAAIA,IAAI,EAAE;IACRA,IAAI,EAAEC,cAAc,CAAC;MACnBC,QAAQ,EAAE,SAAS;MACnBC,KAAK,EAAE,QAAQ;MACfC,MAAM,EAAE;IACV,CAAC,CAAC;EACJ;AACF,CAAC;AAMD,MAAMC,uBAAuB,GAAGA,CAAC;EAC/BrB,mBAAmB;EACnBsB,YAAY;EACZC,UAAU;EACVtB;AAMF,CAAC,KAAK;EACJ,OAAO;IACLC,OAAO,EAAE,MAAM;IACfC,UAAU,EAAE,QAAQ;IACpBqB,KAAK,EAAE,MAAM;IACbC,cAAc,EAAE,MAAM;IACtBf,KAAK,EAAG,GAAEV,mBAAmB,CAAC0B,sBAAuB,aAAY;IACjEC,SAAS,EAAE3B,mBAAmB,CAAC4B,QAAQ;IACvCC,YAAY,EAAE7B,mBAAmB,CAAC8B,QAAQ;IAC1CC,aAAa,EAAG,QAAO/B,mBAAmB,CAAC8B,QAAS,MAAKR,YAAY,CAACU,KAAM,GAAE;IAC9E3B,YAAY,EAAEL,mBAAmB,CAACM,gBAAgB;IAClDE,UAAU,EAAG,mBAAkBR,mBAAmB,CAACS,sBAAuB,WAAUT,mBAAmB,CAACS,sBAAuB,EAAC;IAEhI,SAAS,EAAE;MACTgB,cAAc,EAAE,MAAM;MACtBQ,MAAM,EAAE,SAAS;MACjB7B,eAAe,EAAE,CAACmB,UAAU,GACxBvB,mBAAmB,CAACkC,YAAY,GAChC,SAAS;MAEb,IAAIX,UAAU,IAAI;QAChBb,KAAK,EAAE,SAAS;QAChBuB,MAAM,EAAE;MACV,CAAC,CAAC;MAEF,IAAIhC,UAAU,IAAI;QAChB,SAAS,EAAE;UACTG,eAAe,EAAEJ,mBAAmB,CAACY;QACvC;MACF,CAAC;IACH,CAAC;IAED,IAAIX,UAAU,IAAI;MAChBS,KAAK,EAAG,GAAEV,mBAAmB,CAACW,qBAAsB,aAAY;MAChEwB,UAAU,EAAEnC,mBAAmB,CAACoC;IAClC,CAAC,CAAC;IAEF,IAAIb,UAAU,IAAI;MAChBb,KAAK,EAAG,GAAEV,mBAAmB,CAACqC,uBAAwB;IACxD,CAAC,CAAC;IAEF,IAAIf,YAAY,CAACgB,SAAS,IAAI;MAC5BT,YAAY,EAAE7B,mBAAmB,CAACuC,QAAQ;MAC1CZ,SAAS,EAAE3B,mBAAmB,CAACwC;IACjC,CAAC,CAAC;IAEF,iBAAiB,EAAE;MACjBC,OAAO,EAAE,MAAM;MACfC,SAAS,EAAG,mBAAkB1C,mBAAmB,CAAC2C,kBAAmB;IACvE;EACF,CAAC;AACH,CAAC;AAED,MAAMC,uBAAuB,GAAG7D,MAAM,CAAC,KAAK,EAAE;EAC5Ce,iBAAiB,EAAGC,IAAI,IACtBA,IAAI,KAAK,qBAAqB,IAC9BA,IAAI,IAAI,cAAc,IACtBA,IAAI,KAAK,YAAY,IACrBA,IAAI,KAAK;AACb,CAAC,CAAC,CAACsB,uBAAuB,CAAC;AAE3B,MAAMwB,oBAAoB,GAAG9D,MAAM,CAAA+D,KAAA,EAAc;EAC/ChD,iBAAiB,EAAGC,IAAI,IACtBA,IAAI,KAAK,qBAAqB,IAC9BA,IAAI,IAAI,cAAc,IACtBA,IAAI,KAAK,YAAY,IACrBA,IAAI,KAAK;AACb,CAAC,CAAC,CAACsB,uBAAuB,CAAC;AAE3B,MAAM0B,kBAAkB,GAAGA,CAAC;EAC1BC,KAAK;EACLC,EAAE;EACFC,KAAK;EACLC,IAAI;EACJC,MAAM;EACNC,SAAS;EACTC,QAAQ;EACRC,WAAW;EACXC,OAAO;EACPC,OAAO;EACPxD,UAAU;EACVsB,UAAU;EACVmC;AAoBF,CAAC,KAAK;EACJ,MAAMC,yBAAyB,GAAGpE,qBAAqB,CAAC,CAAC;EACzD,MAAM+B,YAAY,GAAGlC,OAAO,CAC1B,MAAMuE,yBAAyB,EAC/B,CAACA,yBAAyB,CAC5B,CAAC;EACD,MAAM3D,mBAAmB,GAAGX,sBAAsB,CAAC,CAAC;EAEpD,MAAMuE,cAAc,GAAG5E,MAAM,CAAgB,IAAI,CAAC;EAClDC,mBAAmB,CACjByE,SAAS,EACT,MAAM;IACJ,OAAO;MACLzC,cAAc,EAAEA,CAAA,KAAM;QACpBF,YAAY,CAAC6C,cAAc,CAACC,OAAO,CAAC;MACtC;IACF,CAAC;EACH,CAAC,EACD,EACF,CAAC;EAED,MAAMC,4BAA4B,GAAG5E,WAAW,CAC7C6E,KAAoC,IAAK;IACxC,IAAIA,KAAK,EAAEC,GAAG,KAAK,OAAO,EAAE;MAC1BD,KAAK,CAACE,cAAc,CAAC,CAAC;MACtBR,OAAO,GAAG,CAAC;IACb;EACF,CAAC,EACD,CAACA,OAAO,CACV,CAAC;EAED,OACE/D,IAAA,CAACG,qBAAqB;IACpBqE,GAAG,EAAEN,cAAe;IACpBX,EAAE,EAAEA,EAAG;IAEPhD,UAAU,EAAEA,UAAW;IACvBkE,QAAQ,EAAE5C,UAAW;IACrB,iBAAeA,UAAW;IAC1B,gBAActB,UAAU,GAAG,MAAM,GAAGmE,SAAU;IAC9CpE,mBAAmB,EAAEA,mBAAoB;IAAAqE,QAAA,EAIvC9C,UAAU,GACR7B,IAAA,CAACkD,uBAAuB;MACtB5C,mBAAmB,EAAEA,mBAAoB;MACzCsB,YAAY,EAAEA,YAAa;MAC3BC,UAAU,EAAEA,UAAW;MACvBtB,UAAU,EAAEA,UAAW;MAAAoE,QAAA,EAEvB3E,IAAA,CAACJ,sBAAsB;QACrB0D,KAAK,EAAEA,KAAM;QACbE,KAAK,EAAEA,KAAM;QACbG,SAAS,EAAEA,SAAU;QACrBG,OAAO,EAAEA,OAAQ;QACjBD,WAAW,EAAEA,WAAY;QACzBD,QAAQ,EAAEA;MAAS,CACpB;IAAC,CACqB,CAAC,GACxB,CAACH,IAAI,GACPzD,IAAA,CAACkD,uBAAuB;MACtB5C,mBAAmB,EAAEA,mBAAoB;MACzCsB,YAAY,EAAEA,YAAa;MAC3BC,UAAU,EAAEA,UAAW;MACvB+C,QAAQ,EAAE,CAAE;MACZb,OAAO,EAAEA,OAAQ;MACjBc,SAAS,EAAET,4BAA6B;MAAAO,QAAA,EAExC3E,IAAA,CAACJ,sBAAsB;QACrB0D,KAAK,EAAEA,KAAM;QACbE,KAAK,EAAEA,KAAM;QACbG,SAAS,EAAEA,SAAU;QACrBG,OAAO,EAAEA,OAAQ;QACjBD,WAAW,EAAEA,WAAY;QACzBD,QAAQ,EAAEA;MAAS,CACpB;IAAC,CACqB,CAAC,GAE1B1D,KAAA,CAACiD,oBAAoB;MACnB7C,mBAAmB,EAAEA,mBAAoB;MACzCsB,YAAY,EAAEA,YAAa;MAC3BC,UAAU,EAAEA,UAAW;MACvBtB,UAAU,EAAEA,UAAW;MACvBkD,IAAI,EAAEA,IAAK;MACXC,MAAM,EAAEA,MAAO;MACfK,OAAO,EAAEA,OAAQ;MAAAY,QAAA,GAEjB3E,IAAA,CAACJ,sBAAsB;QACrB0D,KAAK,EAAEA,KAAM;QACbE,KAAK,EAAEA,KAAM;QACbG,SAAS,EAAEA,SAAU;QACrBG,OAAO,EAAEA,OAAQ;QACjBD,WAAW,EAAEA,WAAY;QACzBD,QAAQ,EAAEA;MAAS,CACpB,CAAC,EACDF,MAAM,KAAK,QAAQ,IAClB1D,IAAA;QAAM8E,SAAS,EAAC,gBAAgB;QAACC,IAAI,EAAC,cAAc;QAAAJ,QAAA,EAClD3E,IAAA,CAACF,gBAAgB,IAAE;MAAC,CAChB,CACP;IAAA,CACmB;EACvB,GAnEEyD,EAqEgB,CAAC;AAE5B,CAAC;AACD,MAAMyB,0BAA0B,GAAGvF,IAAI,CAAC4D,kBAAkB,CAAC;AAC3D2B,0BAA0B,CAACC,WAAW,GAAG,oBAAoB;AAE7D,SAASD,0BAA0B,IAAI3B,kBAAkB"}

package/dist/labs/SideNav/SideNavItemContentContext.js

@@ -0,0 +1,19 @@
+/*!
+ * 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 { createContext, useContext } from "react";
+export const SideNavItemContentContext = createContext({
+  isCompact: false,
+  depth: 1
+});
+export const useSideNavItemContent = () => useContext(SideNavItemContentContext);
+//# sourceMappingURL=SideNavItemContentContext.js.map

package/dist/labs/SideNav/SideNavItemContentContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavItemContentContext.js","names":["createContext","useContext","SideNavItemContentContext","isCompact","depth","useSideNavItemContent"],"sources":["../../../src/labs/SideNav/SideNavItemContentContext.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 { createContext, useContext } from \"react\";\n\nexport type SideNavItemContentContextValue = {\n  isCompact?: boolean;\n  depth: number;\n};\n\nexport const SideNavItemContentContext =\n  createContext<SideNavItemContentContextValue>({\n    isCompact: false,\n    depth: 1,\n  });\n\nexport const useSideNavItemContent = () =>\n  useContext(SideNavItemContentContext);\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,aAAa,EAAEC,UAAU,QAAQ,OAAO;AAOjD,OAAO,MAAMC,yBAAyB,GACpCF,aAAa,CAAiC;EAC5CG,SAAS,EAAE,KAAK;EAChBC,KAAK,EAAE;AACT,CAAC,CAAC;AAEJ,OAAO,MAAMC,qBAAqB,GAAGA,CAAA,KACnCJ,UAAU,CAACC,yBAAyB,CAAC"}

package/dist/labs/SideNav/SideNavItemLinkContent.js

@@ -15,6 +15,7 @@ import { memo, useMemo } from "react";
 import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
 import { Box } from "../../Box.js";
 import { Status } from "../../Status.js";
+import { Badge } from "../../Badge.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -29,18 +30,10 @@ const SideNavItemLabelContainer = styled("div", {
   flexWrap: "wrap",
   alignItems: "center",
   fontSize: odysseyDesignTokens.TypographyScale0,
-  fontWeight: odysseyDesignTokens.TypographyWeightHeading,
-  marginLeft: isIconVisible ? odysseyDesignTokens.Spacing2 : 0,
-  "& a": {
-    color: `${odysseyDesignTokens.TypographyColorHeading} !important`,
-    fontSize: odysseyDesignTokens.TypographyScale0
-  },
-  "& a:hover": {
-    textDecoration: "none",
-    cursor: "pointer"
-  }
+  marginInlineStart: isIconVisible ? odysseyDesignTokens.Spacing2 : 0
 }));
 const SideNavItemLinkContent = ({
+  count,
   label,
   startIcon,
   endIcon,
@@ -49,18 +42,26 @@ const SideNavItemLinkContent = ({
 }) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
   const sideNavItemContentStyles = useMemo(() => ({
-    marginLeft: odysseyDesignTokens.Spacing2
+    alignItems: "center",
+    display: "flex",
+    gap: odysseyDesignTokens.Spacing1,
+    marginInlineStart: odysseyDesignTokens.Spacing2
   }), [odysseyDesignTokens]);
   return _jsxs(_Fragment, {
     children: [startIcon && startIcon, _jsxs(SideNavItemLabelContainer, {
       odysseyDesignTokens: odysseyDesignTokens,
       isIconVisible: Boolean(startIcon),
-      children: [label, severity && _jsx(Box, {
+      children: [label, !count && severity && _jsx(Box, {
         sx: sideNavItemContentStyles,
-        children: _jsx(Status, {
+        children: severity && _jsx(Status, {
           severity: severity,
           label: statusLabel || ""
         })
+      }), !severity && count && _jsx(Box, {
+        sx: sideNavItemContentStyles,
+        children: count && _jsx(Badge, {
+          badgeContent: count
+        })
       })]
     }), endIcon && endIcon]
   });

package/dist/labs/SideNav/SideNavItemLinkContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"SideNavItemLinkContent.js","names":["styled","memo","useMemo","useOdysseyDesignTokens","Box","Status","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","SideNavItemLabelContainer","shouldForwardProp","prop","odysseyDesignTokens","isIconVisible","width","display","flexWrap","alignItems","fontSize","TypographyScale0","fontWeight","TypographyWeightHeading","marginLeft","Spacing2","color","TypographyColorHeading","textDecoration","cursor","SideNavItemLinkContent","label","startIcon","endIcon","severity","statusLabel","sideNavItemContentStyles","children","Boolean","sx","MemoizedSideNavItemLinkContent","displayName"],"sources":["../../../src/labs/SideNav/SideNavItemLinkContent.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 styled from \"@emotion/styled\";\nimport { memo, ReactNode, useMemo } from \"react\";\nimport {\n  type DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext\";\nimport { Box } from \"../../Box\";\nimport { Status } from \"../../Status\";\nimport type { SideNavItem } from \"./types\";\n\nconst SideNavItemLabelContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"isIconVisible\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n  isIconVisible: boolean;\n}>(({ odysseyDesignTokens, isIconVisible }) => ({\n  width: \"100%\",\n  display: \"flex\",\n  flexWrap: \"wrap\",\n  alignItems: \"center\",\n  fontSize: odysseyDesignTokens.TypographyScale0,\n  fontWeight: odysseyDesignTokens.TypographyWeightHeading,\n  marginLeft: isIconVisible ? odysseyDesignTokens.Spacing2 : 0,\n  \"& a\": {\n    color: `${odysseyDesignTokens.TypographyColorHeading} !important`,\n    fontSize: odysseyDesignTokens.TypographyScale0,\n  },\n  \"& a:hover\": {\n    textDecoration: \"none\",\n    cursor: \"pointer\",\n  },\n}));\n\nconst SideNavItemLinkContent = ({\n  label,\n  startIcon,\n  endIcon,\n  severity,\n  statusLabel,\n}: Pick<\n  SideNavItem,\n  \"label\" | \"startIcon\" | \"endIcon\" | \"severity\" | \"statusLabel\"\n>): ReactNode => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const sideNavItemContentStyles = useMemo(\n    () => ({\n      marginLeft: odysseyDesignTokens.Spacing2,\n    }),\n    [odysseyDesignTokens],\n  );\n\n  return (\n    <>\n      {startIcon && startIcon}\n      <SideNavItemLabelContainer\n        odysseyDesignTokens={odysseyDesignTokens}\n        isIconVisible={Boolean(startIcon)}\n      >\n        {label}\n        {severity && (\n          <Box sx={sideNavItemContentStyles}>\n            <Status severity={severity} label={statusLabel || \"\"} />\n          </Box>\n        )}\n      </SideNavItemLabelContainer>\n      {endIcon && endIcon}\n    </>\n  );\n};\nconst MemoizedSideNavItemLinkContent = memo(SideNavItemLinkContent);\nMemoizedSideNavItemLinkContent.displayName = \"SideNavItemLinkContent\";\n\nexport { MemoizedSideNavItemLinkContent as SideNavItemLinkContent };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,IAAI,EAAaC,OAAO,QAAQ,OAAO;AAAC,SAG/CC,sBAAsB;AAAA,SAEfC,GAAG;AAAA,SACHC,MAAM;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAAA,SAAAC,QAAA,IAAAC,SAAA;AAGf,MAAMC,yBAAyB,GAAGZ,MAAM,CAAC,KAAK,EAAE;EAC9Ca,iBAAiB,EAAGC,IAAI,IACtBA,IAAI,KAAK,qBAAqB,IAAIA,IAAI,KAAK;AAC/C,CAAC,CAAC,CAGC,CAAC;EAAEC,mBAAmB;EAAEC;AAAc,CAAC,MAAM;EAC9CC,KAAK,EAAE,MAAM;EACbC,OAAO,EAAE,MAAM;EACfC,QAAQ,EAAE,MAAM;EAChBC,UAAU,EAAE,QAAQ;EACpBC,QAAQ,EAAEN,mBAAmB,CAACO,gBAAgB;EAC9CC,UAAU,EAAER,mBAAmB,CAACS,uBAAuB;EACvDC,UAAU,EAAET,aAAa,GAAGD,mBAAmB,CAACW,QAAQ,GAAG,CAAC;EAC5D,KAAK,EAAE;IACLC,KAAK,EAAG,GAAEZ,mBAAmB,CAACa,sBAAuB,aAAY;IACjEP,QAAQ,EAAEN,mBAAmB,CAACO;EAChC,CAAC;EACD,WAAW,EAAE;IACXO,cAAc,EAAE,MAAM;IACtBC,MAAM,EAAE;EACV;AACF,CAAC,CAAC,CAAC;AAEH,MAAMC,sBAAsB,GAAGA,CAAC;EAC9BC,KAAK;EACLC,SAAS;EACTC,OAAO;EACPC,QAAQ;EACRC;AAIF,CAAC,KAAgB;EACf,MAAMrB,mBAAmB,GAAGZ,sBAAsB,CAAC,CAAC;EAEpD,MAAMkC,wBAAwB,GAAGnC,OAAO,CACtC,OAAO;IACLuB,UAAU,EAAEV,mBAAmB,CAACW;EAClC,CAAC,CAAC,EACF,CAACX,mBAAmB,CACtB,CAAC;EAED,OACEN,KAAA,CAAAE,SAAA;IAAA2B,QAAA,GACGL,SAAS,IAAIA,SAAS,EACvBxB,KAAA,CAACG,yBAAyB;MACxBG,mBAAmB,EAAEA,mBAAoB;MACzCC,aAAa,EAAEuB,OAAO,CAACN,SAAS,CAAE;MAAAK,QAAA,GAEjCN,KAAK,EACLG,QAAQ,IACP5B,IAAA,CAACH,GAAG;QAACoC,EAAE,EAAEH,wBAAyB;QAAAC,QAAA,EAChC/B,IAAA,CAACF,MAAM;UAAC8B,QAAQ,EAAEA,QAAS;UAACH,KAAK,EAAEI,WAAW,IAAI;QAAG,CAAE;MAAC,CACrD,CACN;IAAA,CACwB,CAAC,EAC3BF,OAAO,IAAIA,OAAO;EAAA,CACnB,CAAC;AAEP,CAAC;AACD,MAAMO,8BAA8B,GAAGxC,IAAI,CAAC8B,sBAAsB,CAAC;AACnEU,8BAA8B,CAACC,WAAW,GAAG,wBAAwB;AAErE,SAASD,8BAA8B,IAAIV,sBAAsB"}
+{"version":3,"file":"SideNavItemLinkContent.js","names":["styled","memo","useMemo","useOdysseyDesignTokens","Box","Status","Badge","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","SideNavItemLabelContainer","shouldForwardProp","prop","odysseyDesignTokens","isIconVisible","width","display","flexWrap","alignItems","fontSize","TypographyScale0","marginInlineStart","Spacing2","SideNavItemLinkContent","count","label","startIcon","endIcon","severity","statusLabel","sideNavItemContentStyles","gap","Spacing1","children","Boolean","sx","badgeContent","MemoizedSideNavItemLinkContent","displayName"],"sources":["../../../src/labs/SideNav/SideNavItemLinkContent.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 styled from \"@emotion/styled\";\nimport { memo, ReactNode, useMemo } from \"react\";\nimport {\n  type DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext\";\nimport { Box } from \"../../Box\";\nimport { Status } from \"../../Status\";\nimport type { SideNavItem } from \"./types\";\nimport { Badge } from \"../../Badge\";\n\nconst SideNavItemLabelContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"isIconVisible\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n  isIconVisible: boolean;\n}>(({ odysseyDesignTokens, isIconVisible }) => ({\n  width: \"100%\",\n  display: \"flex\",\n  flexWrap: \"wrap\",\n  alignItems: \"center\",\n  fontSize: odysseyDesignTokens.TypographyScale0,\n  marginInlineStart: isIconVisible ? odysseyDesignTokens.Spacing2 : 0,\n}));\n\nconst SideNavItemLinkContent = ({\n  count,\n  label,\n  startIcon,\n  endIcon,\n  severity,\n  statusLabel,\n}: Pick<\n  SideNavItem,\n  \"count\" | \"label\" | \"startIcon\" | \"endIcon\" | \"severity\" | \"statusLabel\"\n>): ReactNode => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const sideNavItemContentStyles = useMemo(\n    () => ({\n      alignItems: \"center\",\n      display: \"flex\",\n      gap: odysseyDesignTokens.Spacing1,\n      marginInlineStart: odysseyDesignTokens.Spacing2,\n    }),\n    [odysseyDesignTokens],\n  );\n\n  return (\n    <>\n      {startIcon && startIcon}\n      <SideNavItemLabelContainer\n        odysseyDesignTokens={odysseyDesignTokens}\n        isIconVisible={Boolean(startIcon)}\n      >\n        {label}\n        {!count && severity && (\n          <Box sx={sideNavItemContentStyles}>\n            {severity && (\n              <Status severity={severity} label={statusLabel || \"\"} />\n            )}\n          </Box>\n        )}\n        {!severity && count && (\n          <Box sx={sideNavItemContentStyles}>\n            {count && <Badge badgeContent={count} />}\n          </Box>\n        )}\n      </SideNavItemLabelContainer>\n      {endIcon && endIcon}\n    </>\n  );\n};\nconst MemoizedSideNavItemLinkContent = memo(SideNavItemLinkContent);\nMemoizedSideNavItemLinkContent.displayName = \"SideNavItemLinkContent\";\n\nexport { MemoizedSideNavItemLinkContent as SideNavItemLinkContent };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,IAAI,EAAaC,OAAO,QAAQ,OAAO;AAAC,SAG/CC,sBAAsB;AAAA,SAEfC,GAAG;AAAA,SACHC,MAAM;AAAA,SAENC,KAAK;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAAA,SAAAC,QAAA,IAAAC,SAAA;AAEd,MAAMC,yBAAyB,GAAGb,MAAM,CAAC,KAAK,EAAE;EAC9Cc,iBAAiB,EAAGC,IAAI,IACtBA,IAAI,KAAK,qBAAqB,IAAIA,IAAI,KAAK;AAC/C,CAAC,CAAC,CAGC,CAAC;EAAEC,mBAAmB;EAAEC;AAAc,CAAC,MAAM;EAC9CC,KAAK,EAAE,MAAM;EACbC,OAAO,EAAE,MAAM;EACfC,QAAQ,EAAE,MAAM;EAChBC,UAAU,EAAE,QAAQ;EACpBC,QAAQ,EAAEN,mBAAmB,CAACO,gBAAgB;EAC9CC,iBAAiB,EAAEP,aAAa,GAAGD,mBAAmB,CAACS,QAAQ,GAAG;AACpE,CAAC,CAAC,CAAC;AAEH,MAAMC,sBAAsB,GAAGA,CAAC;EAC9BC,KAAK;EACLC,KAAK;EACLC,SAAS;EACTC,OAAO;EACPC,QAAQ;EACRC;AAIF,CAAC,KAAgB;EACf,MAAMhB,mBAAmB,GAAGb,sBAAsB,CAAC,CAAC;EAEpD,MAAM8B,wBAAwB,GAAG/B,OAAO,CACtC,OAAO;IACLmB,UAAU,EAAE,QAAQ;IACpBF,OAAO,EAAE,MAAM;IACfe,GAAG,EAAElB,mBAAmB,CAACmB,QAAQ;IACjCX,iBAAiB,EAAER,mBAAmB,CAACS;EACzC,CAAC,CAAC,EACF,CAACT,mBAAmB,CACtB,CAAC;EAED,OACEN,KAAA,CAAAE,SAAA;IAAAwB,QAAA,GACGP,SAAS,IAAIA,SAAS,EACvBnB,KAAA,CAACG,yBAAyB;MACxBG,mBAAmB,EAAEA,mBAAoB;MACzCC,aAAa,EAAEoB,OAAO,CAACR,SAAS,CAAE;MAAAO,QAAA,GAEjCR,KAAK,EACL,CAACD,KAAK,IAAII,QAAQ,IACjBvB,IAAA,CAACJ,GAAG;QAACkC,EAAE,EAAEL,wBAAyB;QAAAG,QAAA,EAC/BL,QAAQ,IACPvB,IAAA,CAACH,MAAM;UAAC0B,QAAQ,EAAEA,QAAS;UAACH,KAAK,EAAEI,WAAW,IAAI;QAAG,CAAE;MACxD,CACE,CACN,EACA,CAACD,QAAQ,IAAIJ,KAAK,IACjBnB,IAAA,CAACJ,GAAG;QAACkC,EAAE,EAAEL,wBAAyB;QAAAG,QAAA,EAC/BT,KAAK,IAAInB,IAAA,CAACF,KAAK;UAACiC,YAAY,EAAEZ;QAAM,CAAE;MAAC,CACrC,CACN;IAAA,CACwB,CAAC,EAC3BG,OAAO,IAAIA,OAAO;EAAA,CACnB,CAAC;AAEP,CAAC;AACD,MAAMU,8BAA8B,GAAGvC,IAAI,CAACyB,sBAAsB,CAAC;AACnEc,8BAA8B,CAACC,WAAW,GAAG,wBAAwB;AAErE,SAASD,8BAA8B,IAAId,sBAAsB"}

package/dist/labs/SideNav/SideNavLogo.js

@@ -0,0 +1,42 @@
+/*!
+ * 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, useMemo } from "react";
+import { OktaLogo } from "./OktaLogo.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const SideNavLogo = ({
+  imageAltText,
+  href,
+  logoComponent,
+  imageUrl
+}) => {
+  const logo = useMemo(() => {
+    if (logoComponent) {
+      return logoComponent;
+    }
+    if (imageAltText && imageUrl) {
+      return _jsx("img", {
+        src: imageUrl,
+        alt: imageAltText
+      });
+    }
+    return _jsx(OktaLogo, {});
+  }, [imageAltText, logoComponent, imageUrl]);
+  return href ? _jsx("a", {
+    href: href,
+    children: logo
+  }) : logo;
+};
+const MemoizedSideNavLogo = memo(SideNavLogo);
+MemoizedSideNavLogo.displayName = "SideNavLogo";
+export { MemoizedSideNavLogo as SideNavLogo };
+//# sourceMappingURL=SideNavLogo.js.map

package/dist/labs/SideNav/SideNavLogo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavLogo.js","names":["memo","useMemo","OktaLogo","jsx","_jsx","SideNavLogo","imageAltText","href","logoComponent","imageUrl","logo","src","alt","children","MemoizedSideNavLogo","displayName"],"sources":["../../../src/labs/SideNav/SideNavLogo.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, useMemo } from \"react\";\nimport { OktaLogo } from \"./OktaLogo\";\nimport { SideNavLogoProps } from \"./types\";\n\nconst SideNavLogo = ({\n  imageAltText,\n  href,\n  logoComponent,\n  imageUrl,\n}: SideNavLogoProps) => {\n  const logo = useMemo(() => {\n    if (logoComponent) {\n      return logoComponent;\n    }\n\n    if (imageAltText && imageUrl) {\n      return <img src={imageUrl} alt={imageAltText} />;\n    }\n\n    return <OktaLogo />;\n  }, [imageAltText, logoComponent, imageUrl]);\n\n  return href ? <a href={href}>{logo}</a> : logo;\n};\n\nconst MemoizedSideNavLogo = memo(SideNavLogo);\nMemoizedSideNavLogo.displayName = \"SideNavLogo\";\n\nexport { MemoizedSideNavLogo as SideNavLogo };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,EAAEC,OAAO,QAAQ,OAAO;AAAC,SAC7BC,QAAQ;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAGjB,MAAMC,WAAW,GAAGA,CAAC;EACnBC,YAAY;EACZC,IAAI;EACJC,aAAa;EACbC;AACgB,CAAC,KAAK;EACtB,MAAMC,IAAI,GAAGT,OAAO,CAAC,MAAM;IACzB,IAAIO,aAAa,EAAE;MACjB,OAAOA,aAAa;IACtB;IAEA,IAAIF,YAAY,IAAIG,QAAQ,EAAE;MAC5B,OAAOL,IAAA;QAAKO,GAAG,EAAEF,QAAS;QAACG,GAAG,EAAEN;MAAa,CAAE,CAAC;IAClD;IAEA,OAAOF,IAAA,CAACF,QAAQ,IAAE,CAAC;EACrB,CAAC,EAAE,CAACI,YAAY,EAAEE,aAAa,EAAEC,QAAQ,CAAC,CAAC;EAE3C,OAAOF,IAAI,GAAGH,IAAA;IAAGG,IAAI,EAAEA,IAAK;IAAAM,QAAA,EAAEH;EAAI,CAAI,CAAC,GAAGA,IAAI;AAChD,CAAC;AAED,MAAMI,mBAAmB,GAAGd,IAAI,CAACK,WAAW,CAAC;AAC7CS,mBAAmB,CAACC,WAAW,GAAG,aAAa;AAE/C,SAASD,mBAAmB,IAAIT,WAAW"}

package/dist/labs/SideNav/SideNavToggleButton.js

@@ -0,0 +1,170 @@
+import _Button from "@mui/material/Button";
+/*!
+ * 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 { memo, useCallback, useImperativeHandle, useMemo, useRef } from "react";
+import styled from "@emotion/styled";
+import { useTranslation } from "react-i18next";
+import { MuiPropsContext } from "../../MuiPropsContext.js";
+import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
+import { Tooltip } from "../../Tooltip.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const StyledToggleButton = styled(_Button, {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isSideNavCollapsed"
+})(({
+  isSideNavCollapsed,
+  odysseyDesignTokens
+}) => ({
+  backgroundColor: "transparent",
+  position: "relative",
+  width: odysseyDesignTokens.Spacing6,
+  height: odysseyDesignTokens.Spacing6,
+  border: 0,
+  zIndex: 2,
+  "&:focus-visible": {
+    boxShadow: `inset 0 0 0 2px ${odysseyDesignTokens.PalettePrimaryMain}`,
+    outline: "none"
+  },
+  "&:hover, &:focus": {
+    backgroundColor: "transparent",
+    "#lineOne": {
+      animation: "lineOne-animate-to-collapse 250ms cubic-bezier(0, 0, 0.2, 1)",
+      animationFillMode: "forwards",
+      "@keyframes lineOne-animate-to-collapse": {
+        "0%": {
+          transform: "translate3d(-50%, -50%, 0)"
+        },
+        "50%": {
+          transform: "translate3d(-50%, -50%, 0) rotate(-90deg) scaleY(.75)"
+        },
+        "100%": {
+          transform: "translate3d(-50%, -27%, 0) rotate(-45deg) scaleY(.75)"
+        }
+      }
+    },
+    "#lineTwo": {
+      animation: "lineTwo-animate-to-collapse 250ms cubic-bezier(0, 0, 0.2, 1)",
+      animationFillMode: "forwards",
+      "@keyframes lineTwo-animate-to-collapse": {
+        "0%": {
+          transform: "translate3d(-50%, -50%, 0)"
+        },
+        "50%": {
+          transform: "translate3d(-50%, -50%, 0) rotate(-90deg) scaleY(.75)"
+        },
+        "100%": {
+          transform: "translate3d(-50%, -73%, 0) rotate(-135deg) scaleY(.75)"
+        }
+      }
+    },
+    ...(isSideNavCollapsed && {
+      "#lineOne": {
+        animation: "lineOne-animate-to-expand 250ms cubic-bezier(0, 0, 0.2, 1)",
+        animationFillMode: "forwards",
+        "@keyframes lineOne-animate-to-expand": {
+          "0%": {
+            transform: "translate3d(-50%, -50%, 0)"
+          },
+          "50%": {
+            transform: "translate3d(-50%, -50%, 0) rotate(90deg) scaleY(.75)"
+          },
+          "100%": {
+            transform: "translate3d(-50%, -73%, 0) rotate(135deg) scaleY(.75)"
+          }
+        }
+      },
+      "#lineTwo": {
+        animation: "lineTwo-animate-to-expand 250ms cubic-bezier(0, 0, 0.2, 1)",
+        animationFillMode: "forwards",
+        "@keyframes lineTwo-animate-to-expand": {
+          "0%": {
+            transform: "translate3d(-50%, -50%, 0)"
+          },
+          "50%": {
+            transform: "translate3d(-50%, -50%, 0) rotate(90deg) scaleY(.75)"
+          },
+          "100%": {
+            transform: "translate3d(-50%, -27%, 0) rotate(45deg) scaleY(.75)"
+          }
+        }
+      }
+    })
+  },
+  span: {
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    width: "2px",
+    height: odysseyDesignTokens.Spacing4,
+    backgroundColor: odysseyDesignTokens.HueNeutral500,
+    transform: "translate3d(-50%, -50%, 0)",
+    transition: `transform ${odysseyDesignTokens.TransitionDurationMain}`
+  }
+}));
+const SideNavToggleButton = ({
+  ariaControls,
+  buttonRef,
+  id,
+  isSideNavCollapsed,
+  onClick,
+  tabIndex
+}) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const {
+    t
+  } = useTranslation();
+  const localButtonRef = useRef(null);
+  useImperativeHandle(buttonRef, () => ({
+    focus: () => {
+      localButtonRef.current?.focus();
+    }
+  }), []);
+  const toggleLabel = useMemo(() => isSideNavCollapsed ? t("sidenav.toggle.expand") : t("sidenav.toggle.collapse"), [isSideNavCollapsed, t]);
+  const renderButton = useCallback(muiProps => {
+    return _jsxs(StyledToggleButton, {
+      ...muiProps,
+      "aria-controls": ariaControls,
+      "aria-expanded": !isSideNavCollapsed,
+      "aria-label": toggleLabel,
+      "data-sidenav-toggle": true,
+      id: id,
+      isSideNavCollapsed: isSideNavCollapsed,
+      odysseyDesignTokens: odysseyDesignTokens,
+      onClick: onClick,
+      ref: element => {
+        if (element) {
+          localButtonRef.current = element;
+          muiProps?.ref?.(element);
+        }
+      },
+      tabIndex: tabIndex,
+      variant: "floating",
+      children: [_jsx("span", {
+        id: "lineOne"
+      }), _jsx("span", {
+        id: "lineTwo"
+      })]
+    });
+  }, [ariaControls, id, isSideNavCollapsed, odysseyDesignTokens, onClick, tabIndex, toggleLabel]);
+  return _jsx(Tooltip, {
+    ariaType: "description",
+    placement: "right",
+    text: toggleLabel,
+    children: _jsx(MuiPropsContext.Consumer, {
+      children: renderButton
+    })
+  });
+};
+const MemoizedSideNavToggleButton = memo(SideNavToggleButton);
+MemoizedSideNavToggleButton.displayName = "SideNavToggleButton";
+export { MemoizedSideNavToggleButton as SideNavToggleButton };
+//# sourceMappingURL=SideNavToggleButton.js.map