@okta/odyssey-react-mui 1.21.2 → 1.22.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"SideNav.js","names":["styled","memo","useMemo","useState","useCallback","useRef","useEffect","Box","ExpandLeftIcon","NavAccordion","useOdysseyDesignTokens","SideNavHeader","SideNavItemContent","SideNavListItemContainer","SideNavFooterContent","jsx","_jsx","jsxs","_jsxs","SideNavCollapsedContainer","shouldForwardProp","prop","odysseyDesignTokens","isSideNavCollapsed","backgroundColor","HueNeutral300","paddingTop","Spacing5","cursor","width","opacity","visibility","transitionProperty","transitionDuration","TransitionDurationMain","transitionTimingFunction","TransitionTimingMain","SideNavExpandContainer","HueNeutralWhite","flexDirection","display","SideNavListContainer","ul","padding","listStyle","listStyleType","SectionHeader","fontSize","TypographySizeOverline","fontWeight","TypographyWeightHeadingBold","color","HueNeutral600","Spacing3","paddingBottom","paddingLeft","Spacing4","textTransform","SideNavFooterContainer","Spacing2","justifyContent","flexWrap","alignItems","TypographyColorHeading","textDecoration","SideNav","navHeaderText","isCollapsible","onCollapse","onExpand","sideNavItems","footerItems","setSideNavCollapsed","scrollIntoViewRef","firstSideNavItemIdWithIsSelected","flattenedItems","flatMap","sideNavItem","children","firstItemWithIsSelected","find","isSelected","id","current","scrollIntoView","getRefIfThisIsFirstNodeWithIsSelected","itemId","undefined","processedSideNavItems","map","item","childProps","scrollRef","sideNavCollapseHandler","sideNavExpandClickHandler","sideNavExpandKeyHandler","event","key","code","preventDefault","sideNavStyles","height","sideNavHeaderContainerStyles","position","top","sideNavListContainerStyles","flex","overflowY","sideNavFooterContainerStyles","bottom","expandLeftIconStyles","margin","Spacing1","sx","tabIndex","role","onClick","onKeyDown","testId","label","isSectionHeader","startIcon","isDefaultExpanded","isDisabled","isExpanded","MemoizedSideNav","displayName"],"sources":["../../../src/labs/SideNav/SideNav.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 {\n  memo,\n  useMemo,\n  useState,\n  useCallback,\n  KeyboardEvent,\n  useRef,\n  useEffect,\n} from \"react\";\n\nimport { Box } from \"../../Box\";\nimport { ExpandLeftIcon } from \"../../icons.generated\";\nimport { NavAccordion } from \"../NavAccordion\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext\";\nimport type { SideNavProps } from \"./types\";\nimport { SideNavHeader } from \"./SideNavHeader\";\nimport {\n  SideNavItemContent,\n  SideNavListItemContainer,\n} from \"./SideNavItemContent\";\nimport { SideNavFooterContent } from \"./SideNavFooterContent\";\n\nconst SideNavCollapsedContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"isSideNavCollapsed\",\n})(\n  ({\n    odysseyDesignTokens,\n    isSideNavCollapsed,\n  }: {\n    odysseyDesignTokens: DesignTokens;\n    isSideNavCollapsed: boolean;\n  }) => ({\n    backgroundColor: odysseyDesignTokens.HueNeutral300,\n    paddingTop: odysseyDesignTokens.Spacing5,\n    cursor: \"pointer\",\n    width: isSideNavCollapsed ? \"auto\" : 0,\n    opacity: isSideNavCollapsed ? 1 : 0,\n    visibility: isSideNavCollapsed ? \"visible\" : \"hidden\",\n    transitionProperty: \"opacity\",\n    transitionDuration: odysseyDesignTokens.TransitionDurationMain,\n    transitionTimingFunction: odysseyDesignTokens.TransitionTimingMain,\n  }),\n);\n\nconst SideNavExpandContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"isSideNavCollapsed\",\n})(\n  ({\n    odysseyDesignTokens,\n    isSideNavCollapsed,\n  }: {\n    odysseyDesignTokens: DesignTokens;\n    isSideNavCollapsed: boolean;\n  }) => ({\n    backgroundColor: odysseyDesignTokens.HueNeutralWhite,\n    flexDirection: \"column\",\n    display: \"flex\",\n    opacity: isSideNavCollapsed ? 0 : 1,\n    visibility: isSideNavCollapsed ? \"hidden\" : \"visible\",\n    width: isSideNavCollapsed ? \"0\" : \"100%\",\n    transitionProperty: \"opacity, width\",\n    transitionDuration: odysseyDesignTokens.TransitionDurationMain,\n    transitionTimingFunction: odysseyDesignTokens.TransitionTimingMain,\n  }),\n);\n\nconst SideNavListContainer = styled.ul({\n  padding: 0,\n  listStyle: \"none\",\n  listStyleType: \"none\",\n});\n\nconst SectionHeader = styled(\"li\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({\n  fontSize: odysseyDesignTokens.TypographySizeOverline,\n  fontWeight: odysseyDesignTokens.TypographyWeightHeadingBold,\n  color: odysseyDesignTokens.HueNeutral600,\n  paddingTop: odysseyDesignTokens.Spacing3,\n  paddingBottom: odysseyDesignTokens.Spacing3,\n  paddingLeft: odysseyDesignTokens.Spacing4,\n  textTransform: \"uppercase\",\n}));\n\nconst SideNavFooterContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({\n  paddingTop: odysseyDesignTokens.Spacing2,\n  paddingBottom: odysseyDesignTokens.Spacing2,\n  display: \"flex\",\n  justifyContent: \"center\",\n  flexWrap: \"wrap\",\n  alignItems: \"center\",\n  fontSize: odysseyDesignTokens.TypographySizeOverline,\n  \"& a\": {\n    color: `${odysseyDesignTokens.TypographyColorHeading} !important`,\n  },\n  \"& a:hover\": {\n    textDecoration: \"none\",\n  },\n  \"& a:visited\": {\n    color: odysseyDesignTokens.TypographyColorHeading,\n  },\n}));\n\nconst SideNav = ({\n  navHeaderText,\n  isCollapsible,\n  onCollapse,\n  onExpand,\n  sideNavItems,\n  footerItems,\n}: SideNavProps) => {\n  const [isSideNavCollapsed, setSideNavCollapsed] = useState(false);\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const scrollIntoViewRef = useRef<HTMLLIElement>(null);\n  /**\n   * Look through the sideNavItems and determine which is the first node\n   * with isSelected. This should be the node we set a ref on in order to\n   * call scrollIntoView in the effect\n   */\n  const firstSideNavItemIdWithIsSelected = useMemo(() => {\n    const flattenedItems = sideNavItems.flatMap((sideNavItem) =>\n      sideNavItem.children\n        ? [sideNavItem, ...sideNavItem.children]\n        : sideNavItem,\n    );\n    const firstItemWithIsSelected = flattenedItems.find(\n      (sideNavItem) => sideNavItem.isSelected,\n    );\n    return firstItemWithIsSelected?.id;\n  }, [sideNavItems]);\n  /**\n   * Once we've rendered and if we have an item to scroll to, do the scroll action.\n   * This must rely on checking firstSideNavItemIdWithIsSelected or it will not run\n   * once the actual ref is populated.\n   */\n  useEffect(() => {\n    if (firstSideNavItemIdWithIsSelected && scrollIntoViewRef.current) {\n      scrollIntoViewRef.current.scrollIntoView();\n    }\n  }, [firstSideNavItemIdWithIsSelected, scrollIntoViewRef]);\n\n  /**\n   * We only want to put a ref on a node iff it is the first selected node.\n   * This function returns the ref only if the ID provided matches the first\n   * selected node, otherwise returns undefined (so that the node has no ref)\n   */\n  const getRefIfThisIsFirstNodeWithIsSelected = useCallback(\n    (itemId: string) =>\n      itemId === firstSideNavItemIdWithIsSelected\n        ? scrollIntoViewRef\n        : undefined,\n    [firstSideNavItemIdWithIsSelected],\n  );\n\n  const processedSideNavItems = useMemo(\n    () =>\n      sideNavItems.map((item) => ({\n        ...item,\n        children: item.children?.map((childProps) => (\n          <SideNavItemContent\n            key={childProps.id}\n            scrollRef={getRefIfThisIsFirstNodeWithIsSelected(childProps.id)}\n            {...childProps}\n          />\n        )),\n      })),\n    [getRefIfThisIsFirstNodeWithIsSelected, sideNavItems],\n  );\n\n  const sideNavCollapseHandler = useCallback(() => {\n    setSideNavCollapsed(!isSideNavCollapsed);\n    onCollapse?.();\n  }, [isSideNavCollapsed, setSideNavCollapsed, onCollapse]);\n\n  const sideNavExpandClickHandler = useCallback(() => {\n    setSideNavCollapsed(!isSideNavCollapsed);\n    onExpand?.();\n  }, [isSideNavCollapsed, setSideNavCollapsed, onExpand]);\n\n  const sideNavExpandKeyHandler = useCallback(\n    (event: KeyboardEvent<HTMLDivElement>) => {\n      if (event?.key === \"Enter\" || event?.code === \"Space\") {\n        event.preventDefault();\n        setSideNavCollapsed(!isSideNavCollapsed);\n        onExpand?.();\n      }\n    },\n    [isSideNavCollapsed, setSideNavCollapsed, onExpand],\n  );\n\n  const sideNavStyles = useMemo(\n    () => ({\n      display: \"flex\",\n      height: \"100vh\",\n    }),\n    [],\n  );\n\n  const sideNavHeaderContainerStyles = useMemo(\n    () => ({\n      position: \"sticky\",\n      top: 0,\n    }),\n    [],\n  );\n\n  const sideNavListContainerStyles = useMemo(\n    () => ({\n      flex: 1,\n      overflowY: \"auto\",\n    }),\n    [],\n  );\n\n  const sideNavFooterContainerStyles = useMemo(\n    () => ({\n      position: \"sticky\",\n      bottom: 0,\n      paddingTop: odysseyDesignTokens.Spacing2,\n    }),\n    [odysseyDesignTokens],\n  );\n\n  const expandLeftIconStyles = useMemo(\n    () => ({\n      fontSize: \"1em\",\n      margin: `0 ${odysseyDesignTokens.Spacing1}`,\n    }),\n    [odysseyDesignTokens],\n  );\n\n  return (\n    <Box sx={sideNavStyles}>\n      <SideNavCollapsedContainer\n        tabIndex={0}\n        role=\"button\"\n        odysseyDesignTokens={odysseyDesignTokens}\n        isSideNavCollapsed={isSideNavCollapsed}\n        onClick={sideNavExpandClickHandler}\n        onKeyDown={sideNavExpandKeyHandler}\n        data-se=\"collapsed-region\"\n        data-aria-label=\"expand side navigation\"\n      >\n        <ExpandLeftIcon sx={expandLeftIconStyles} />\n      </SideNavCollapsedContainer>\n      <SideNavExpandContainer\n        odysseyDesignTokens={odysseyDesignTokens}\n        isSideNavCollapsed={isSideNavCollapsed}\n        data-se=\"expanded-region\"\n      >\n        <Box sx={sideNavHeaderContainerStyles}>\n          <SideNavHeader\n            navHeaderText={navHeaderText}\n            isCollapsible={isCollapsible}\n            onCollapse={sideNavCollapseHandler}\n          />\n        </Box>\n        <Box sx={sideNavListContainerStyles} testId=\"scrollable-region\">\n          <SideNavListContainer>\n            {processedSideNavItems?.map((item) => {\n              const {\n                id,\n                label,\n                isSectionHeader,\n                startIcon,\n                children,\n                isDefaultExpanded,\n                isDisabled,\n                isExpanded,\n              } = item;\n\n              if (isSectionHeader) {\n                return (\n                  <SectionHeader\n                    id={id}\n                    key={id}\n                    odysseyDesignTokens={odysseyDesignTokens}\n                  >\n                    {label}\n                  </SectionHeader>\n                );\n              } else if (children) {\n                return (\n                  <SideNavListItemContainer\n                    id={id}\n                    key={id}\n                    odysseyDesignTokens={odysseyDesignTokens}\n                  >\n                    <NavAccordion\n                      label={label}\n                      isDefaultExpanded={isDefaultExpanded}\n                      isExpanded={isExpanded}\n                      startIcon={startIcon}\n                      isDisabled={isDisabled}\n                    >\n                      <SideNavListContainer id={`${id}-list`}>\n                        {children}\n                      </SideNavListContainer>\n                    </NavAccordion>\n                  </SideNavListItemContainer>\n                );\n              } else {\n                return (\n                  <SideNavItemContent\n                    key={item.id}\n                    scrollRef={getRefIfThisIsFirstNodeWithIsSelected(item.id)}\n                    {...item}\n                  />\n                );\n              }\n            })}\n          </SideNavListContainer>\n        </Box>\n        {footerItems && (\n          <Box sx={sideNavFooterContainerStyles}>\n            <SideNavFooterContainer odysseyDesignTokens={odysseyDesignTokens}>\n              <SideNavFooterContent footerItems={footerItems} />\n            </SideNavFooterContainer>\n          </Box>\n        )}\n      </SideNavExpandContainer>\n    </Box>\n  );\n};\n\nconst MemoizedSideNav = memo(SideNav);\nMemoizedSideNav.displayName = \"SideNav\";\n\nexport { MemoizedSideNav as SideNav };\n"],"mappings":"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"}

package/dist/labs/SideNav/SideNavFooterContent.js

@@ -0,0 +1,49 @@
+/*!
+ * 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 { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
+import { Box } from "../../Box.js";
+import { Link } from "../../Link.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const SideNavFooterContent = ({
+  footerItems
+}) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const footerContent = useMemo(() => {
+    return footerItems?.map((item, index) => _jsxs(Box, {
+      sx: {
+        display: "flex"
+      },
+      children: [item.href ? _jsx(Link, {
+        href: item.href,
+        children: item.label
+      }, item.id) : _jsx(Box, {
+        component: "span",
+        children: item.label
+      }, item.id), index < footerItems.length - 1 && _jsx(Box, {
+        sx: {
+          marginLeft: odysseyDesignTokens.Spacing4,
+          marginRight: odysseyDesignTokens.Spacing4,
+          color: odysseyDesignTokens.HueNeutral300
+        },
+        children: "|"
+      }, `${item.id}-separator`)]
+    }, `${item.id}-wrapper`));
+  }, [footerItems, odysseyDesignTokens]);
+  return footerContent;
+};
+const MemoizedSideNavFooterContent = memo(SideNavFooterContent);
+MemoizedSideNavFooterContent.displayName = "SideNavFooterContent";
+export { MemoizedSideNavFooterContent as SideNavFooterContent };
+//# sourceMappingURL=SideNavFooterContent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavFooterContent.js","names":["memo","useMemo","useOdysseyDesignTokens","Box","Link","jsx","_jsx","jsxs","_jsxs","SideNavFooterContent","footerItems","odysseyDesignTokens","footerContent","map","item","index","sx","display","children","href","label","id","component","length","marginLeft","Spacing4","marginRight","color","HueNeutral300","MemoizedSideNavFooterContent","displayName"],"sources":["../../../src/labs/SideNav/SideNavFooterContent.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 { useOdysseyDesignTokens } from \"../../OdysseyDesignTokensContext\";\nimport type { SideNavFooterItem } from \"./types\";\nimport { Box } from \"../../Box\";\nimport { Link } from \"../../Link\";\n\nconst SideNavFooterContent = ({\n  footerItems,\n}: {\n  footerItems: SideNavFooterItem[];\n}) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const footerContent = useMemo(() => {\n    return footerItems?.map((item, index) => (\n      <Box\n        key={`${item.id}-wrapper`}\n        sx={{\n          display: \"flex\",\n        }}\n      >\n        {item.href ? (\n          <Link key={item.id} href={item.href}>\n            {item.label}\n          </Link>\n        ) : (\n          <Box component=\"span\" key={item.id}>\n            {item.label}\n          </Box>\n        )}\n        {index < footerItems.length - 1 && (\n          <Box\n            key={`${item.id}-separator`}\n            sx={{\n              marginLeft: odysseyDesignTokens.Spacing4,\n              marginRight: odysseyDesignTokens.Spacing4,\n              color: odysseyDesignTokens.HueNeutral300,\n            }}\n          >\n            |\n          </Box>\n        )}\n      </Box>\n    ));\n  }, [footerItems, odysseyDesignTokens]);\n\n  return footerContent;\n};\nconst MemoizedSideNavFooterContent = memo(SideNavFooterContent);\nMemoizedSideNavFooterContent.displayName = \"SideNavFooterContent\";\n\nexport { MemoizedSideNavFooterContent as SideNavFooterContent };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,EAAEC,OAAO,QAAQ,OAAO;AAAC,SAC7BC,sBAAsB;AAAA,SAEtBC,GAAG;AAAA,SACHC,IAAI;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAEb,MAAMC,oBAAoB,GAAGA,CAAC;EAC5BC;AAGF,CAAC,KAAK;EACJ,MAAMC,mBAAmB,GAAGT,sBAAsB,CAAC,CAAC;EAEpD,MAAMU,aAAa,GAAGX,OAAO,CAAC,MAAM;IAClC,OAAOS,WAAW,EAAEG,GAAG,CAAC,CAACC,IAAI,EAAEC,KAAK,KAClCP,KAAA,CAACL,GAAG;MAEFa,EAAE,EAAE;QACFC,OAAO,EAAE;MACX,CAAE;MAAAC,QAAA,GAEDJ,IAAI,CAACK,IAAI,GACRb,IAAA,CAACF,IAAI;QAAee,IAAI,EAAEL,IAAI,CAACK,IAAK;QAAAD,QAAA,EACjCJ,IAAI,CAACM;MAAK,GADFN,IAAI,CAACO,EAEV,CAAC,GAEPf,IAAA,CAACH,GAAG;QAACmB,SAAS,EAAC,MAAM;QAAAJ,QAAA,EAClBJ,IAAI,CAACM;MAAK,GADcN,IAAI,CAACO,EAE3B,CACN,EACAN,KAAK,GAAGL,WAAW,CAACa,MAAM,GAAG,CAAC,IAC7BjB,IAAA,CAACH,GAAG;QAEFa,EAAE,EAAE;UACFQ,UAAU,EAAEb,mBAAmB,CAACc,QAAQ;UACxCC,WAAW,EAAEf,mBAAmB,CAACc,QAAQ;UACzCE,KAAK,EAAEhB,mBAAmB,CAACiB;QAC7B,CAAE;QAAAV,QAAA,EACH;MAED,GARQ,GAAEJ,IAAI,CAACO,EAAG,YAQb,CACN;IAAA,GAzBK,GAAEP,IAAI,CAACO,EAAG,UA0Bb,CACN,CAAC;EACJ,CAAC,EAAE,CAACX,WAAW,EAAEC,mBAAmB,CAAC,CAAC;EAEtC,OAAOC,aAAa;AACtB,CAAC;AACD,MAAMiB,4BAA4B,GAAG7B,IAAI,CAACS,oBAAoB,CAAC;AAC/DoB,4BAA4B,CAACC,WAAW,GAAG,sBAAsB;AAEjE,SAASD,4BAA4B,IAAIpB,oBAAoB"}

package/dist/labs/SideNav/SideNavHeader.js

@@ -0,0 +1,58 @@
+/*!
+ * 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 styled from "@emotion/styled";
+import { memo, useMemo } from "react";
+import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
+import { Box } from "../../Box.js";
+import { Heading6 } from "../../Typography.js";
+import { CollapseIcon } from "./CollapseIcon.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const SideNavHeaderContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  paddingLeft: odysseyDesignTokens.Spacing4,
+  paddingRight: odysseyDesignTokens.Spacing4,
+  paddingTop: odysseyDesignTokens.Spacing3,
+  paddingBottom: odysseyDesignTokens.Spacing3
+}));
+const SideNavHeader = ({
+  navHeaderText,
+  isCollapsible,
+  onCollapse
+}) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const sideNavHeaderStyles = useMemo(() => ({
+    marginTop: odysseyDesignTokens.Spacing2
+  }), [odysseyDesignTokens]);
+  return _jsxs(SideNavHeaderContainer, {
+    odysseyDesignTokens: odysseyDesignTokens,
+    children: [_jsx(Box, {
+      sx: sideNavHeaderStyles,
+      children: _jsx(Heading6, {
+        children: navHeaderText
+      })
+    }), isCollapsible && _jsx(CollapseIcon, {
+      onClick: onCollapse
+    })]
+  });
+};
+const MemoizedSideNavHeader = memo(SideNavHeader);
+MemoizedSideNavHeader.displayName = "SideNavHeader";
+export { MemoizedSideNavHeader as SideNavHeader };
+//# sourceMappingURL=SideNavHeader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavHeader.js","names":["styled","memo","useMemo","useOdysseyDesignTokens","Box","Heading6","CollapseIcon","jsx","_jsx","jsxs","_jsxs","SideNavHeaderContainer","shouldForwardProp","prop","odysseyDesignTokens","display","justifyContent","alignItems","paddingLeft","Spacing4","paddingRight","paddingTop","Spacing3","paddingBottom","SideNavHeader","navHeaderText","isCollapsible","onCollapse","sideNavHeaderStyles","marginTop","Spacing2","children","sx","onClick","MemoizedSideNavHeader","displayName"],"sources":["../../../src/labs/SideNav/SideNavHeader.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 { Heading6 } from \"../../Typography\";\nimport { CollapseIcon } from \"./CollapseIcon\";\nimport type { SideNavProps } from \"./types\";\n\nconst SideNavHeaderContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({\n  display: \"flex\",\n  justifyContent: \"space-between\",\n  alignItems: \"center\",\n  paddingLeft: odysseyDesignTokens.Spacing4,\n  paddingRight: odysseyDesignTokens.Spacing4,\n  paddingTop: odysseyDesignTokens.Spacing3,\n  paddingBottom: odysseyDesignTokens.Spacing3,\n}));\n\nconst SideNavHeader = ({\n  navHeaderText,\n  isCollapsible,\n  onCollapse,\n}: Pick<\n  SideNavProps,\n  \"navHeaderText\" | \"isCollapsible\" | \"onCollapse\"\n>): ReactNode => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const sideNavHeaderStyles = useMemo(\n    () => ({\n      marginTop: odysseyDesignTokens.Spacing2,\n    }),\n    [odysseyDesignTokens],\n  );\n\n  return (\n    <SideNavHeaderContainer odysseyDesignTokens={odysseyDesignTokens}>\n      <Box sx={sideNavHeaderStyles}>\n        <Heading6>{navHeaderText}</Heading6>\n      </Box>\n      {isCollapsible && <CollapseIcon onClick={onCollapse} />}\n    </SideNavHeaderContainer>\n  );\n};\nconst MemoizedSideNavHeader = memo(SideNavHeader);\nMemoizedSideNavHeader.displayName = \"SideNavHeader\";\n\nexport { MemoizedSideNavHeader as SideNavHeader };\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,QAAQ;AAAA,SACRC,YAAY;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAGrB,MAAMC,sBAAsB,GAAGX,MAAM,CAAC,KAAK,EAAE;EAC3CY,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAAC,CAAC;EAAEC;AAA2D,CAAC,MAAM;EACtEC,OAAO,EAAE,MAAM;EACfC,cAAc,EAAE,eAAe;EAC/BC,UAAU,EAAE,QAAQ;EACpBC,WAAW,EAAEJ,mBAAmB,CAACK,QAAQ;EACzCC,YAAY,EAAEN,mBAAmB,CAACK,QAAQ;EAC1CE,UAAU,EAAEP,mBAAmB,CAACQ,QAAQ;EACxCC,aAAa,EAAET,mBAAmB,CAACQ;AACrC,CAAC,CAAC,CAAC;AAEH,MAAME,aAAa,GAAGA,CAAC;EACrBC,aAAa;EACbC,aAAa;EACbC;AAIF,CAAC,KAAgB;EACf,MAAMb,mBAAmB,GAAGX,sBAAsB,CAAC,CAAC;EAEpD,MAAMyB,mBAAmB,GAAG1B,OAAO,CACjC,OAAO;IACL2B,SAAS,EAAEf,mBAAmB,CAACgB;EACjC,CAAC,CAAC,EACF,CAAChB,mBAAmB,CACtB,CAAC;EAED,OACEJ,KAAA,CAACC,sBAAsB;IAACG,mBAAmB,EAAEA,mBAAoB;IAAAiB,QAAA,GAC/DvB,IAAA,CAACJ,GAAG;MAAC4B,EAAE,EAAEJ,mBAAoB;MAAAG,QAAA,EAC3BvB,IAAA,CAACH,QAAQ;QAAA0B,QAAA,EAAEN;MAAa,CAAW;IAAC,CACjC,CAAC,EACLC,aAAa,IAAIlB,IAAA,CAACF,YAAY;MAAC2B,OAAO,EAAEN;IAAW,CAAE,CAAC;EAAA,CACjC,CAAC;AAE7B,CAAC;AACD,MAAMO,qBAAqB,GAAGjC,IAAI,CAACuB,aAAa,CAAC;AACjDU,qBAAqB,CAACC,WAAW,GAAG,eAAe;AAEnD,SAASD,qBAAqB,IAAIV,aAAa"}

package/dist/labs/SideNav/SideNavItemContent.js

@@ -0,0 +1,157 @@
+/*!
+ * 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 styled from "@emotion/styled";
+import { useRef, useImperativeHandle, useCallback, memo } from "react";
+import { Link } from "../../Link.js";
+import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
+import { SideNavItemLinkContent } from "./SideNavItemLinkContent.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const SideNavListItemContainer = styled("li", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isSelected" && prop !== "isDisabled"
+})(({
+  odysseyDesignTokens,
+  isSelected,
+  isDisabled
+}) => ({
+  display: "flex",
+  alignItems: "center",
+  cursor: isDisabled ? "default" : "pointer",
+  pointerEvents: isDisabled ? "none" : "auto",
+  backgroundColor: isSelected ? odysseyDesignTokens.HueNeutral50 : "unset",
+  margin: `${odysseyDesignTokens.Spacing1} 0`,
+  "&: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 => {
+  if (node) {
+    node?.scrollIntoView({
+      behavior: "instant",
+      block: "center",
+      inline: "nearest"
+    });
+  }
+};
+const SideNavItemContent = ({
+  id,
+  label,
+  href,
+  target,
+  startIcon,
+  severity,
+  statusLabel,
+  endIcon,
+  onClick,
+  isSelected,
+  isDisabled,
+  scrollRef
+}) => {
+  const localScrollRef = useRef(null);
+  useImperativeHandle(scrollRef, () => {
+    return {
+      scrollIntoView: () => {
+        scrollToNode(localScrollRef.current);
+      }
+    };
+  }, []);
+  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, {
+    ref: localScrollRef,
+    id: id,
+    disabled: isDisabled,
+    "aria-disabled": isDisabled,
+    isDisabled: isDisabled,
+    isSelected: isSelected,
+    odysseyDesignTokens: odysseyDesignTokens,
+    children: isDisabled ? _jsx(NavItemContentClickContainer, {
+      children: _jsx(SideNavItemLinkContent, {
+        label: label,
+        startIcon: startIcon,
+        endIcon: endIcon,
+        statusLabel: statusLabel,
+        severity: severity
+      })
+    }) : !href ? _jsx(NavItemContentClickContainer, {
+      role: "button",
+      tabIndex: 0,
+      onClick: onClick,
+      onKeyDown: sideNavItemContentKeyHandler,
+      children: _jsx(SideNavItemLinkContent, {
+        label: label,
+        startIcon: startIcon,
+        endIcon: endIcon,
+        statusLabel: statusLabel,
+        severity: severity
+      })
+    }) : _jsx(Link, {
+      href: href,
+      target: target,
+      onClick: onClick,
+      children: _jsx(SideNavItemLinkContent, {
+        label: label,
+        startIcon: startIcon,
+        endIcon: endIcon,
+        statusLabel: statusLabel,
+        severity: severity
+      })
+    })
+  }, id);
+};
+const MemoizedSideNavItemContent = memo(SideNavItemContent);
+MemoizedSideNavItemContent.displayName = "SideNavItemContent";
+export { MemoizedSideNavItemContent as SideNavItemContent };
+//# sourceMappingURL=SideNavItemContent.js.map

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

@@ -0,0 +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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"}

package/dist/labs/SideNav/SideNavItemLinkContent.js

@@ -0,0 +1,71 @@
+/*!
+ * 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 styled from "@emotion/styled";
+import { memo, useMemo } from "react";
+import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
+import { Box } from "../../Box.js";
+import { Status } from "../../Status.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";
+const SideNavItemLabelContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isIconVisible"
+})(({
+  odysseyDesignTokens,
+  isIconVisible
+}) => ({
+  width: "100%",
+  display: "flex",
+  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"
+  }
+}));
+const SideNavItemLinkContent = ({
+  label,
+  startIcon,
+  endIcon,
+  severity,
+  statusLabel
+}) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const sideNavItemContentStyles = useMemo(() => ({
+    marginLeft: odysseyDesignTokens.Spacing2
+  }), [odysseyDesignTokens]);
+  return _jsxs(_Fragment, {
+    children: [startIcon && startIcon, _jsxs(SideNavItemLabelContainer, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      isIconVisible: Boolean(startIcon),
+      children: [label, severity && _jsx(Box, {
+        sx: sideNavItemContentStyles,
+        children: _jsx(Status, {
+          severity: severity,
+          label: statusLabel || ""
+        })
+      })]
+    }), endIcon && endIcon]
+  });
+};
+const MemoizedSideNavItemLinkContent = memo(SideNavItemLinkContent);
+MemoizedSideNavItemLinkContent.displayName = "SideNavItemLinkContent";
+export { MemoizedSideNavItemLinkContent as SideNavItemLinkContent };
+//# sourceMappingURL=SideNavItemLinkContent.js.map

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

@@ -0,0 +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"}

package/dist/labs/SideNav/index.js

@@ -0,0 +1,14 @@
+/*!
+ * 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.
+ */
+export { SideNav } from "./SideNav.js";
+export * from "./types.js";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["SideNav"],"sources":["../../../src/labs/SideNav/index.ts"],"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\nexport { SideNav } from \"./SideNav\";\n\nexport * from \"./types\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAVA,SAYSA,OAAO;AAAA"}

package/dist/labs/SideNav/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/labs/SideNav/types.ts"],"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 type { ReactElement } from \"react\";\nimport type { HtmlProps } from \"../../HtmlProps\";\nimport type { statusSeverityValues } from \"../../Status\";\n\nexport type SideNavProps = {\n  /**\n   * Side Nav header text that is usually reserved to show the App name\n   */\n  navHeaderText: string;\n  /**\n   *  Determines whether the side nav is collapsible\n   */\n  isCollapsible?: boolean;\n  /**\n   * Footer items in the side nav\n   */\n  footerItems?: SideNavFooterItem[];\n  /**\n   *  Triggers when the side nav is collapsed\n   */\n  onCollapse?(): void;\n  /**\n   *  Triggers when the side nav is expanded\n   */\n  onExpand?(): void;\n  /**\n   * Nav items in the side nav\n   */\n  sideNavItems: SideNavItem[];\n} & Pick<HtmlProps, \"testId\">;\n\nexport type SideNavItem = {\n  id: string;\n  label: string;\n  /**\n   * The icon element to display at the end of the Nav Item\n   */\n  endIcon?: ReactElement;\n  /**\n   * Whether the item is disabled. When set to true the nav item is set to Disabled color,\n   * the link/item is not clickable, and item with children is not expandable.\n   */\n  isDisabled?: boolean;\n  /**\n   * Whether the item is active/selected\n   */\n  isSelected?: boolean;\n  /**\n   * Event fired when the nav item is clicked\n   */\n  onClick?(): void;\n  /**\n   * The status element to display after the label\n   */\n  severity?: (typeof statusSeverityValues)[number];\n  /**\n   * The icon element to display at the start of the Nav Item\n   */\n  startIcon?: ReactElement;\n  /**\n   * The label to display inside the status\n   */\n  statusLabel?: string;\n  /**\n   * The link target prop. e.g., \"_blank\"\n   */\n  target?: string;\n} & (\n  | {\n      /**\n       * Determines if the side nav item is a section header\n       */\n      isSectionHeader: true;\n      href?: never;\n      children?: never;\n      isDefaultExpanded?: never;\n      isExpanded?: never;\n    }\n  | {\n      /**\n       * link added to the nav item. if it is undefined, static text will be displayed.\n       * fires onClick event when it is passed\n       */\n      href: string;\n      children?: never;\n      isSectionHeader?: never;\n      isDefaultExpanded?: never;\n      isExpanded?: never;\n    }\n  | {\n      /**\n       * An array of side nav items to be displayed as children within Accordion\n       */\n      children?: SideNavItem[];\n      /**\n       * Whether the accordion (nav item with children) is expanded by default\n       */\n      isDefaultExpanded?: boolean;\n      /**\n       * If true, expands the accordion, otherwise collapse it.\n       * Setting this prop enables control over the accordion.\n       */\n      isExpanded?: boolean;\n      isSectionHeader?: never;\n      href?: never;\n    }\n);\n\nexport type SideNavFooterItem = {\n  href?: string;\n  id: string;\n  label: string;\n};\n"],"mappings":""}