@okta/odyssey-contribution-tooling 1.48.0 → 1.49.0

package/dist/cjs/ui-shell/SideNav/useIsSideNavCollapsedSessionStorage.cjs

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useIsSideNavCollapsedSessionStorage = exports.sessionStorageKey = void 0;
+var _useSessionStorageState = require("../../useSessionStorageState.cjs");
+/*!
+ * Copyright (c) 2025-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+const sessionStorageKey = exports.sessionStorageKey = "__uiShell-sideNav-isCollapsed";
+const useIsSideNavCollapsedSessionStorage = isSideNavInitiallyCollapsed => (0, _useSessionStorageState.useSessionStorageState)({
+  initialState: isSideNavInitiallyCollapsed,
+  key: sessionStorageKey
+});
+exports.useIsSideNavCollapsedSessionStorage = useIsSideNavCollapsedSessionStorage;
+//# sourceMappingURL=useIsSideNavCollapsedSessionStorage.cjs.map

package/dist/cjs/ui-shell/SideNav/useIsSideNavCollapsedSessionStorage.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsSideNavCollapsedSessionStorage.cjs","names":["_useSessionStorageState","require","sessionStorageKey","exports","useIsSideNavCollapsedSessionStorage","isSideNavInitiallyCollapsed","useSessionStorageState","initialState","key"],"sources":["../../../../src/ui-shell/SideNav/useIsSideNavCollapsedSessionStorage.ts"],"sourcesContent":["/*!\n * Copyright (c) 2025-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 { useSessionStorageState } from \"../../useSessionStorageState.js\";\n\nexport const sessionStorageKey = \"__uiShell-sideNav-isCollapsed\";\n\nexport const useIsSideNavCollapsedSessionStorage = (\n  isSideNavInitiallyCollapsed: boolean,\n) =>\n  useSessionStorageState({\n    initialState: isSideNavInitiallyCollapsed,\n    key: sessionStorageKey,\n  });\n"],"mappings":";;;;;;AAYA,IAAAA,uBAAA,GAAAC,OAAA;AAZA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAIO,MAAMC,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAG,+BAA+B;AAEzD,MAAME,mCAAmC,GAC9CC,2BAAoC,IAEpC,IAAAC,8CAAsB,EAAC;EACrBC,YAAY,EAAEF,2BAA2B;EACzCG,GAAG,EAAEN;AACP,CAAC,CAAC;AAACC,OAAA,CAAAC,mCAAA,GAAAA,mCAAA","ignoreList":[]}

package/dist/cjs/ui-shell/TopNav/HamburgerMenuIcon.cjs

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HamburgerMenuIcon = void 0;
+var _react = require("react");
+var _SvgIcon = require("../../SvgIcon.cjs");
+var _jsxRuntime = require("react/jsx-runtime");
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */const HamburgerMenuIcon = (0, _react.forwardRef)((props, ref) => {
+  return (0, _jsxRuntime.jsx)(_SvgIcon.SvgIcon, {
+    fill: "none",
+    ref: ref,
+    viewBox: "0 0 24 24",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: (0, _jsxRuntime.jsx)("path", {
+      clipRule: "evenodd",
+      d: "M21.333 5.778H2.667V4H21.333V5.778ZM21.333 12.885H2.667V11.111H21.333V12.885ZM2.667 20H21.333V18.221H2.667V20Z",
+      fill: "currentColor",
+      fillRule: "evenodd"
+    })
+  });
+});
+const MemoizedHamburgerMenuIcon = exports.HamburgerMenuIcon = (0, _react.memo)(HamburgerMenuIcon);
+MemoizedHamburgerMenuIcon.displayName = "HamburgerMenuIcon";
+//# sourceMappingURL=HamburgerMenuIcon.cjs.map

package/dist/cjs/ui-shell/TopNav/HamburgerMenuIcon.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"HamburgerMenuIcon.cjs","names":["_react","require","_SvgIcon","_jsxRuntime","HamburgerMenuIcon","forwardRef","props","ref","jsx","SvgIcon","fill","viewBox","xmlns","children","clipRule","d","fillRule","MemoizedHamburgerMenuIcon","exports","memo","displayName"],"sources":["../../../../src/ui-shell/TopNav/HamburgerMenuIcon.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\n// Code automatically generated; DO NOT EDIT.\n\nimport { forwardRef, memo } from \"react\";\n\nimport { SvgIcon, type SvgIconNoChildrenProps } from \"../../SvgIcon.js\";\n\nexport type HamburgerMenuProps = SvgIconNoChildrenProps;\n\nconst HamburgerMenuIcon = forwardRef<SVGSVGElement, HamburgerMenuProps>(\n  (props, ref) => {\n    return (\n      <SvgIcon\n        fill=\"none\"\n        ref={ref}\n        viewBox=\"0 0 24 24\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        {...props}\n      >\n        <path\n          clipRule=\"evenodd\"\n          d=\"M21.333 5.778H2.667V4H21.333V5.778ZM21.333 12.885H2.667V11.111H21.333V12.885ZM2.667 20H21.333V18.221H2.667V20Z\"\n          fill=\"currentColor\"\n          fillRule=\"evenodd\"\n        />\n      </SvgIcon>\n    );\n  },\n);\n\nconst MemoizedHamburgerMenuIcon = memo(HamburgerMenuIcon);\nMemoizedHamburgerMenuIcon.displayName = \"HamburgerMenuIcon\";\n\nexport { MemoizedHamburgerMenuIcon as HamburgerMenuIcon };\n"],"mappings":";;;;;;AAcA,IAAAA,MAAA,GAAAC,OAAA;AAEA,IAAAC,QAAA,GAAAD,OAAA;AAAwE,IAAAE,WAAA,GAAAF,OAAA;AAhBxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAUA,MAAMG,iBAAiB,GAAG,IAAAC,iBAAU,EAClC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACd,OACE,IAAAJ,WAAA,CAAAK,GAAA,EAACN,QAAA,CAAAO,OAAO;IACNC,IAAI,EAAC,MAAM;IACXH,GAAG,EAAEA,GAAI;IACTI,OAAO,EAAC,WAAW;IACnBC,KAAK,EAAC,4BAA4B;IAAA,GAC9BN,KAAK;IAAAO,QAAA,EAET,IAAAV,WAAA,CAAAK,GAAA;MACEM,QAAQ,EAAC,SAAS;MAClBC,CAAC,EAAC,gHAAgH;MAClHL,IAAI,EAAC,cAAc;MACnBM,QAAQ,EAAC;IAAS,CACnB;EAAC,CACK,CAAC;AAEd,CACF,CAAC;AAED,MAAMC,yBAAyB,GAAAC,OAAA,CAAAd,iBAAA,GAAG,IAAAe,WAAI,EAACf,iBAAiB,CAAC;AACzDa,yBAAyB,CAACG,WAAW,GAAG,mBAAmB","ignoreList":[]}

package/dist/cjs/ui-shell/TopNav/TopNav.cjs

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TopNav = void 0;
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _react = require("react");
+var _OdysseyDesignTokensContext = require("../../OdysseyDesignTokensContext.cjs");
+var _UiShellProvider = require("../../ui-shell/UiShellProvider.cjs");
+var _uiShellSharedConstants = require("../uiShellSharedConstants.cjs");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/*!
+ * 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.
+ */
+
+const StyledLeftSideContainer = (0, _styled.default)("div")(() => ({
+  flexGrow: 1
+}));
+const StyledRightSideContainer = (0, _styled.default)("div")(() => ({
+  flexShrink: 0
+}));
+const StyledTopNavContainer = (0, _styled.default)("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "topNavBackgroundColor"
+})(({
+  odysseyDesignTokens,
+  topNavBackgroundColor
+}) => ({
+  alignItems: "center",
+  backgroundColor: topNavBackgroundColor,
+  display: "flex",
+  gap: odysseyDesignTokens.Spacing4,
+  height: "100%",
+  justifyContent: "space-between",
+  maxHeight: _uiShellSharedConstants.TOP_NAV_HEIGHT,
+  minHeight: _uiShellSharedConstants.TOP_NAV_HEIGHT,
+  paddingBlock: odysseyDesignTokens.Spacing2,
+  paddingInline: odysseyDesignTokens.Spacing8,
+  position: "relative",
+  transition: `box-shadow ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`,
+  zIndex: _uiShellSharedConstants.UI_SHELL_BASE_Z_INDEX,
+  ...(topNavBackgroundColor === odysseyDesignTokens.HueNeutralWhite && {
+    borderBottom: `${odysseyDesignTokens.BorderWidthMain} ${odysseyDesignTokens.BorderStyleMain} ${odysseyDesignTokens.HueNeutral100}`
+  })
+}));
+const TopNav = ({
+  leftSideComponent,
+  rightSideComponent
+}) => {
+  const odysseyDesignTokens = (0, _OdysseyDesignTokensContext.useOdysseyDesignTokens)();
+  const uiShellContext = (0, _UiShellProvider.useUiShellContext)();
+  return (0, _jsxRuntime.jsxs)(StyledTopNavContainer, {
+    odysseyDesignTokens: odysseyDesignTokens,
+    topNavBackgroundColor: uiShellContext?.topNavBackgroundColor,
+    children: [(0, _jsxRuntime.jsx)(StyledLeftSideContainer, {
+      children: leftSideComponent ?? (0, _jsxRuntime.jsx)("div", {})
+    }), (0, _jsxRuntime.jsx)(StyledRightSideContainer, {
+      children: rightSideComponent ?? (0, _jsxRuntime.jsx)("div", {})
+    })]
+  });
+};
+const MemoizedTopNav = exports.TopNav = (0, _react.memo)(TopNav);
+MemoizedTopNav.displayName = "TopNav";
+//# sourceMappingURL=TopNav.cjs.map

package/dist/cjs/ui-shell/TopNav/TopNav.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopNav.cjs","names":["_styled","_interopRequireDefault","require","_react","_OdysseyDesignTokensContext","_UiShellProvider","_uiShellSharedConstants","_jsxRuntime","e","__esModule","default","StyledLeftSideContainer","styled","flexGrow","StyledRightSideContainer","flexShrink","StyledTopNavContainer","shouldForwardProp","prop","odysseyDesignTokens","topNavBackgroundColor","alignItems","backgroundColor","display","gap","Spacing4","height","justifyContent","maxHeight","TOP_NAV_HEIGHT","minHeight","paddingBlock","Spacing2","paddingInline","Spacing8","position","transition","TransitionDurationMain","TransitionTimingMain","zIndex","UI_SHELL_BASE_Z_INDEX","HueNeutralWhite","borderBottom","BorderWidthMain","BorderStyleMain","HueNeutral100","TopNav","leftSideComponent","rightSideComponent","useOdysseyDesignTokens","uiShellContext","useUiShellContext","jsxs","children","jsx","MemoizedTopNav","exports","memo","displayName"],"sources":["../../../../src/ui-shell/TopNav/TopNav.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 { memo, type ReactElement } from \"react\";\n\nimport type { HtmlProps } from \"../../HtmlProps.js\";\n\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport {\n  UiShellColors,\n  useUiShellContext,\n} from \"../../ui-shell/UiShellProvider.js\";\nimport {\n  TOP_NAV_HEIGHT,\n  UI_SHELL_BASE_Z_INDEX,\n} from \"../uiShellSharedConstants.js\";\n\nconst StyledLeftSideContainer = styled(\"div\")(() => ({\n  flexGrow: 1,\n}));\n\nconst StyledRightSideContainer = styled(\"div\")(() => ({\n  flexShrink: 0,\n}));\n\nconst StyledTopNavContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"topNavBackgroundColor\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n  topNavBackgroundColor?: UiShellColors[\"topNavBackgroundColor\"];\n}>(({ odysseyDesignTokens, topNavBackgroundColor }) => ({\n  alignItems: \"center\",\n  backgroundColor: topNavBackgroundColor,\n  display: \"flex\",\n  gap: odysseyDesignTokens.Spacing4,\n  height: \"100%\",\n  justifyContent: \"space-between\",\n  maxHeight: TOP_NAV_HEIGHT,\n  minHeight: TOP_NAV_HEIGHT,\n  paddingBlock: odysseyDesignTokens.Spacing2,\n  paddingInline: odysseyDesignTokens.Spacing8,\n  position: \"relative\",\n  transition: `box-shadow ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`,\n  zIndex: UI_SHELL_BASE_Z_INDEX,\n\n  ...(topNavBackgroundColor === odysseyDesignTokens.HueNeutralWhite && {\n    borderBottom: `${odysseyDesignTokens.BorderWidthMain} ${odysseyDesignTokens.BorderStyleMain} ${odysseyDesignTokens.HueNeutral100}`,\n  }),\n}));\n\nexport type TopNavProps = {\n  /**\n   * Whether or not the underlying content has been scrolled\n   */\n  isScrolled?: boolean;\n  /**\n   * React components that render into the left side of the top nav.\n   */\n  leftSideComponent?: ReactElement;\n  /**\n   * React components that render into the right side of the top nav.\n   */\n  rightSideComponent?: ReactElement;\n} & Pick<HtmlProps, \"testId\">;\n\nconst TopNav = ({ leftSideComponent, rightSideComponent }: TopNavProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const uiShellContext = useUiShellContext();\n\n  return (\n    <StyledTopNavContainer\n      odysseyDesignTokens={odysseyDesignTokens}\n      topNavBackgroundColor={uiShellContext?.topNavBackgroundColor}\n    >\n      <StyledLeftSideContainer>\n        {leftSideComponent ?? <div />}\n      </StyledLeftSideContainer>\n      <StyledRightSideContainer>\n        {rightSideComponent ?? <div />}\n      </StyledRightSideContainer>\n    </StyledTopNavContainer>\n  );\n};\n\nconst MemoizedTopNav = memo(TopNav);\nMemoizedTopNav.displayName = \"TopNav\";\n\nexport { MemoizedTopNav as TopNav };\n"],"mappings":";;;;;;AAYA,IAAAA,OAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAIA,IAAAE,2BAAA,GAAAF,OAAA;AAIA,IAAAG,gBAAA,GAAAH,OAAA;AAIA,IAAAI,uBAAA,GAAAJ,OAAA;AAGsC,IAAAK,WAAA,GAAAL,OAAA;AAAA,SAAAD,uBAAAO,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AA5BtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAoBA,MAAMG,uBAAuB,GAAG,IAAAC,eAAM,EAAC,KAAK,CAAC,CAAC,OAAO;EACnDC,QAAQ,EAAE;AACZ,CAAC,CAAC,CAAC;AAEH,MAAMC,wBAAwB,GAAG,IAAAF,eAAM,EAAC,KAAK,CAAC,CAAC,OAAO;EACpDG,UAAU,EAAE;AACd,CAAC,CAAC,CAAC;AAEH,MAAMC,qBAAqB,GAAG,IAAAJ,eAAM,EAAC,KAAK,EAAE;EAC1CK,iBAAiB,EAAGC,IAAI,IACtBA,IAAI,KAAK,qBAAqB,IAAIA,IAAI,KAAK;AAC/C,CAAC,CAAC,CAGC,CAAC;EAAEC,mBAAmB;EAAEC;AAAsB,CAAC,MAAM;EACtDC,UAAU,EAAE,QAAQ;EACpBC,eAAe,EAAEF,qBAAqB;EACtCG,OAAO,EAAE,MAAM;EACfC,GAAG,EAAEL,mBAAmB,CAACM,QAAQ;EACjCC,MAAM,EAAE,MAAM;EACdC,cAAc,EAAE,eAAe;EAC/BC,SAAS,EAAEC,sCAAc;EACzBC,SAAS,EAAED,sCAAc;EACzBE,YAAY,EAAEZ,mBAAmB,CAACa,QAAQ;EAC1CC,aAAa,EAAEd,mBAAmB,CAACe,QAAQ;EAC3CC,QAAQ,EAAE,UAAU;EACpBC,UAAU,EAAE,cAAcjB,mBAAmB,CAACkB,sBAAsB,IAAIlB,mBAAmB,CAACmB,oBAAoB,EAAE;EAClHC,MAAM,EAAEC,6CAAqB;EAE7B,IAAIpB,qBAAqB,KAAKD,mBAAmB,CAACsB,eAAe,IAAI;IACnEC,YAAY,EAAE,GAAGvB,mBAAmB,CAACwB,eAAe,IAAIxB,mBAAmB,CAACyB,eAAe,IAAIzB,mBAAmB,CAAC0B,aAAa;EAClI,CAAC;AACH,CAAC,CAAC,CAAC;AAiBH,MAAMC,MAAM,GAAGA,CAAC;EAAEC,iBAAiB;EAAEC;AAAgC,CAAC,KAAK;EACzE,MAAM7B,mBAAmB,GAAG,IAAA8B,kDAAsB,EAAC,CAAC;EACpD,MAAMC,cAAc,GAAG,IAAAC,kCAAiB,EAAC,CAAC;EAE1C,OACE,IAAA5C,WAAA,CAAA6C,IAAA,EAACpC,qBAAqB;IACpBG,mBAAmB,EAAEA,mBAAoB;IACzCC,qBAAqB,EAAE8B,cAAc,EAAE9B,qBAAsB;IAAAiC,QAAA,GAE7D,IAAA9C,WAAA,CAAA+C,GAAA,EAAC3C,uBAAuB;MAAA0C,QAAA,EACrBN,iBAAiB,IAAI,IAAAxC,WAAA,CAAA+C,GAAA,WAAM;IAAC,CACN,CAAC,EAC1B,IAAA/C,WAAA,CAAA+C,GAAA,EAACxC,wBAAwB;MAAAuC,QAAA,EACtBL,kBAAkB,IAAI,IAAAzC,WAAA,CAAA+C,GAAA,WAAM;IAAC,CACN,CAAC;EAAA,CACN,CAAC;AAE5B,CAAC;AAED,MAAMC,cAAc,GAAAC,OAAA,CAAAV,MAAA,GAAG,IAAAW,WAAI,EAACX,MAAM,CAAC;AACnCS,cAAc,CAACG,WAAW,GAAG,QAAQ","ignoreList":[]}

package/dist/cjs/ui-shell/TopNav/TopNavLinksList.cjs

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TopNavLinksList = void 0;
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _react = require("react");
+var _TopNavListItem = require("./TopNavListItem.cjs");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/*!
+ * 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.
+ */
+
+const StyledTopNavList = (0, _styled.default)("ul")(() => ({
+  alignItems: "center",
+  display: "flex",
+  listStyle: "none",
+  listStyleType: "none",
+  padding: 0
+}));
+const TopNavLinksList = ({
+  topNavLinkItems
+}) => (0, _jsxRuntime.jsx)("nav", {
+  children: (0, _jsxRuntime.jsx)(StyledTopNavList, {
+    children: topNavLinkItems.map(item => (0, _react.createElement)(_TopNavListItem.TopNavListItem, {
+      ...item,
+      key: item.id
+    }))
+  })
+});
+const MemoizedTopNavLinksList = exports.TopNavLinksList = (0, _react.memo)(TopNavLinksList);
+MemoizedTopNavLinksList.displayName = "TopNavLinksList";
+//# sourceMappingURL=TopNavLinksList.cjs.map

package/dist/cjs/ui-shell/TopNav/TopNavLinksList.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopNavLinksList.cjs","names":["_styled","_interopRequireDefault","require","_react","_TopNavListItem","_jsxRuntime","e","__esModule","default","StyledTopNavList","styled","alignItems","display","listStyle","listStyleType","padding","TopNavLinksList","topNavLinkItems","jsx","children","map","item","createElement","TopNavListItem","key","id","MemoizedTopNavLinksList","exports","memo","displayName"],"sources":["../../../../src/ui-shell/TopNav/TopNavLinksList.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 { memo, type ReactElement } from \"react\";\n\nimport type { HtmlProps } from \"../../HtmlProps.js\";\n\nimport { UserProfileProps } from \"../../labs/UserProfile.js\";\nimport { TopNavListItem, TopNavListItemProps } from \"./TopNavListItem.js\";\n\nexport type TopNavLinksListProps = {\n  /**\n   * Pass in an additional component like `Button` that will be displayed after the nav link items\n   */\n  additionalNavItem?: ReactElement;\n  /**\n   * URL to the help page.\n   */\n  helpPageHref?: string;\n  /**\n   *  Pass in a SearchField component with the variant=\"filled\" prop set\n   */\n  searchField?: ReactElement;\n  /**\n   * URL to settings page.\n   */\n  settingsPageHref?: string;\n  /**\n   * Nav links in the top nav\n   */\n  topNavLinkItems: TopNavListItemProps[];\n  /**\n   * Displays user account info\n   */\n  userProfile?: UserProfileProps;\n} & Pick<HtmlProps, \"testId\">;\n\nconst StyledTopNavList = styled(\"ul\")(() => ({\n  alignItems: \"center\",\n  display: \"flex\",\n  listStyle: \"none\",\n  listStyleType: \"none\",\n  padding: 0,\n}));\n\nconst TopNavLinksList = ({ topNavLinkItems }: TopNavLinksListProps) => (\n  <nav>\n    <StyledTopNavList>\n      {topNavLinkItems.map((item) => (\n        <TopNavListItem {...item} key={item.id} />\n      ))}\n    </StyledTopNavList>\n  </nav>\n);\n\nconst MemoizedTopNavLinksList = memo(TopNavLinksList);\nMemoizedTopNavLinksList.displayName = \"TopNavLinksList\";\n\nexport { MemoizedTopNavLinksList as TopNavLinksList };\n"],"mappings":";;;;;;AAYA,IAAAA,OAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAKA,IAAAE,eAAA,GAAAF,OAAA;AAA0E,IAAAG,WAAA,GAAAH,OAAA;AAAA,SAAAD,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAlB1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAqCA,MAAMG,gBAAgB,GAAG,IAAAC,eAAM,EAAC,IAAI,CAAC,CAAC,OAAO;EAC3CC,UAAU,EAAE,QAAQ;EACpBC,OAAO,EAAE,MAAM;EACfC,SAAS,EAAE,MAAM;EACjBC,aAAa,EAAE,MAAM;EACrBC,OAAO,EAAE;AACX,CAAC,CAAC,CAAC;AAEH,MAAMC,eAAe,GAAGA,CAAC;EAAEC;AAAsC,CAAC,KAChE,IAAAZ,WAAA,CAAAa,GAAA;EAAAC,QAAA,EACE,IAAAd,WAAA,CAAAa,GAAA,EAACT,gBAAgB;IAAAU,QAAA,EACdF,eAAe,CAACG,GAAG,CAAEC,IAAI,IACxB,IAAAlB,MAAA,CAAAmB,aAAA,EAAClB,eAAA,CAAAmB,cAAc;MAAA,GAAKF,IAAI;MAAEG,GAAG,EAAEH,IAAI,CAACI;IAAG,CAAE,CAC1C;EAAC,CACc;AAAC,CAChB,CACN;AAED,MAAMC,uBAAuB,GAAAC,OAAA,CAAAX,eAAA,GAAG,IAAAY,WAAI,EAACZ,eAAe,CAAC;AACrDU,uBAAuB,CAACG,WAAW,GAAG,iBAAiB","ignoreList":[]}

package/dist/cjs/ui-shell/TopNav/TopNavListItem.cjs

@@ -0,0 +1,137 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TopNavListItem = void 0;
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _react = require("react");
+var _Link = require("../../Link.cjs");
+var _OdysseyDesignTokensContext = require("../../OdysseyDesignTokensContext.cjs");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+const StyledTopNavItemLabelContainer = (0, _styled.default)("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  alignItems: "center",
+  display: "flex",
+  flexWrap: "wrap",
+  fontSize: odysseyDesignTokens.TypographyScale0,
+  fontWeight: odysseyDesignTokens.TypographyWeightHeading
+}));
+const StyledTopNavListItem = (0, _styled.default)("li", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isDisabled"
+})(({
+  odysseyDesignTokens,
+  isDisabled
+}) => ({
+  alignItems: "center",
+  color: `${isDisabled ? odysseyDesignTokens.TypographyColorDisabled : odysseyDesignTokens.TypographyColorHeading} !important`,
+  cursor: isDisabled ? "default" : "pointer",
+  display: "flex",
+  pointerEvents: isDisabled ? "none" : "auto",
+  a: {
+    alignItems: "center",
+    color: `${odysseyDesignTokens.TypographyColorHeading} !important`,
+    display: "flex",
+    paddingBlock: odysseyDesignTokens.Spacing2,
+    paddingInline: odysseyDesignTokens.Spacing4,
+    "&:hover": {
+      backgroundColor: !isDisabled ? odysseyDesignTokens.HueNeutral50 : "inherit",
+      textDecoration: "none"
+    },
+    "&:focus-visible": {
+      backgroundColor: !isDisabled ? odysseyDesignTokens.HueNeutral50 : "inherit",
+      borderRadius: 0,
+      outlineOffset: 0,
+      outlineWidth: odysseyDesignTokens.FocusOutlineWidthMain
+    }
+  },
+  "div[role='button']:hover": {
+    backgroundColor: !isDisabled ? odysseyDesignTokens.HueNeutral50 : "inherit"
+  }
+}));
+const StyledNavItemContentClickContainer = (0, _styled.default)("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  alignItems: "center",
+  display: "flex",
+  paddingBlock: odysseyDesignTokens.Spacing2,
+  paddingInline: odysseyDesignTokens.Spacing4,
+  width: "100%",
+  "&:focus-visible": {
+    backgroundColor: odysseyDesignTokens.HueNeutral50,
+    borderRadius: 0,
+    outlineColor: odysseyDesignTokens.FocusOutlineColorPrimary,
+    outlineStyle: odysseyDesignTokens.FocusOutlineStyle,
+    outlineWidth: odysseyDesignTokens.FocusOutlineWidthMain,
+    textDecoration: "none"
+  }
+}));
+const TopNavListItem = ({
+  href,
+  id,
+  isDisabled,
+  label,
+  onClick,
+  target
+}) => {
+  const odysseyDesignTokens = (0, _OdysseyDesignTokensContext.useOdysseyDesignTokens)();
+  const topNavItemContentKeyHandler = (0, _react.useCallback)(event => {
+    if (event?.key === "Enter") {
+      event.preventDefault();
+      event.stopPropagation();
+      onClick?.(event);
+    }
+  }, [onClick]);
+  return (0, _jsxRuntime.jsxs)(StyledTopNavListItem, {
+    "aria-disabled": isDisabled,
+    id: id,
+    isDisabled: isDisabled,
+    odysseyDesignTokens: odysseyDesignTokens,
+    children: [isDisabled && (0, _jsxRuntime.jsx)(StyledNavItemContentClickContainer, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      children: (0, _jsxRuntime.jsx)(StyledTopNavItemLabelContainer, {
+        odysseyDesignTokens: odysseyDesignTokens,
+        children: label
+      })
+    }), !isDisabled && href && (0, _jsxRuntime.jsx)(_Link.Link, {
+      href: href,
+      onClick: onClick,
+      target: target,
+      children: (0, _jsxRuntime.jsx)(StyledTopNavItemLabelContainer, {
+        odysseyDesignTokens: odysseyDesignTokens,
+        children: label
+      })
+    }), !isDisabled && !href && (0, _jsxRuntime.jsx)(StyledNavItemContentClickContainer, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      onClick: onClick,
+      onKeyDown: topNavItemContentKeyHandler,
+      role: "button",
+      tabIndex: 0,
+      children: (0, _jsxRuntime.jsx)(StyledTopNavItemLabelContainer, {
+        odysseyDesignTokens: odysseyDesignTokens,
+        children: label
+      })
+    })]
+  });
+};
+const MemoizedTopNavListItem = exports.TopNavListItem = (0, _react.memo)(TopNavListItem);
+MemoizedTopNavListItem.displayName = "TopNavListItem";
+//# sourceMappingURL=TopNavListItem.cjs.map

package/dist/cjs/ui-shell/TopNav/TopNavListItem.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopNavListItem.cjs","names":["_styled","_interopRequireDefault","require","_react","_Link","_OdysseyDesignTokensContext","_jsxRuntime","e","__esModule","default","StyledTopNavItemLabelContainer","styled","shouldForwardProp","prop","odysseyDesignTokens","alignItems","display","flexWrap","fontSize","TypographyScale0","fontWeight","TypographyWeightHeading","StyledTopNavListItem","isDisabled","color","TypographyColorDisabled","TypographyColorHeading","cursor","pointerEvents","a","paddingBlock","Spacing2","paddingInline","Spacing4","backgroundColor","HueNeutral50","textDecoration","borderRadius","outlineOffset","outlineWidth","FocusOutlineWidthMain","StyledNavItemContentClickContainer","width","outlineColor","FocusOutlineColorPrimary","outlineStyle","FocusOutlineStyle","TopNavListItem","href","id","label","onClick","target","useOdysseyDesignTokens","topNavItemContentKeyHandler","useCallback","event","key","preventDefault","stopPropagation","jsxs","children","jsx","Link","onKeyDown","role","tabIndex","MemoizedTopNavListItem","exports","memo","displayName"],"sources":["../../../../src/ui-shell/TopNav/TopNavListItem.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  KeyboardEventHandler,\n  memo,\n  MouseEventHandler,\n  useCallback,\n} from \"react\";\n\nimport { Link } from \"../../Link.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\n\nconst StyledTopNavItemLabelContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  alignItems: \"center\",\n  display: \"flex\",\n  flexWrap: \"wrap\",\n  fontSize: odysseyDesignTokens.TypographyScale0,\n  fontWeight: odysseyDesignTokens.TypographyWeightHeading,\n}));\n\nconst StyledTopNavListItem = styled(\"li\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"isDisabled\",\n})<{\n  isDisabled?: boolean;\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens, isDisabled }) => ({\n  alignItems: \"center\",\n  color: `${isDisabled ? odysseyDesignTokens.TypographyColorDisabled : odysseyDesignTokens.TypographyColorHeading} !important`,\n  cursor: isDisabled ? \"default\" : \"pointer\",\n  display: \"flex\",\n  pointerEvents: isDisabled ? \"none\" : \"auto\",\n\n  a: {\n    alignItems: \"center\",\n    color: `${odysseyDesignTokens.TypographyColorHeading} !important`,\n    display: \"flex\",\n    paddingBlock: odysseyDesignTokens.Spacing2,\n    paddingInline: odysseyDesignTokens.Spacing4,\n\n    \"&:hover\": {\n      backgroundColor: !isDisabled\n        ? odysseyDesignTokens.HueNeutral50\n        : \"inherit\",\n      textDecoration: \"none\",\n    },\n\n    \"&:focus-visible\": {\n      backgroundColor: !isDisabled\n        ? odysseyDesignTokens.HueNeutral50\n        : \"inherit\",\n      borderRadius: 0,\n      outlineOffset: 0,\n      outlineWidth: odysseyDesignTokens.FocusOutlineWidthMain,\n    },\n  },\n\n  \"div[role='button']:hover\": {\n    backgroundColor: !isDisabled ? odysseyDesignTokens.HueNeutral50 : \"inherit\",\n  },\n}));\n\nconst StyledNavItemContentClickContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  alignItems: \"center\",\n  display: \"flex\",\n  paddingBlock: odysseyDesignTokens.Spacing2,\n  paddingInline: odysseyDesignTokens.Spacing4,\n  width: \"100%\",\n\n  \"&:focus-visible\": {\n    backgroundColor: odysseyDesignTokens.HueNeutral50,\n    borderRadius: 0,\n    outlineColor: odysseyDesignTokens.FocusOutlineColorPrimary,\n    outlineStyle: odysseyDesignTokens.FocusOutlineStyle,\n    outlineWidth: odysseyDesignTokens.FocusOutlineWidthMain,\n    textDecoration: \"none\",\n  },\n}));\n\nexport type TopNavListItemProps = {\n  /**\n   * Without a hyperlink reference, `onClick` functionality will not function.\n   * If `undefined`, static text will be displayed.\n   */\n  href?: string;\n  /**\n   * HTML `id` attribute.\n   */\n  id: string;\n  /**\n   * Determines whether the link item is disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * Display text for the link.\n   */\n  label: string;\n  /**\n   * Handles both mouse and keyboard interactions.\n   */\n  onClick?: MouseEventHandler<HTMLAnchorElement> &\n    MouseEventHandler<HTMLDivElement> &\n    KeyboardEventHandler<HTMLDivElement>;\n  /**\n   * Where to display the linked URL.\n   */\n  target?: string;\n};\n\nconst TopNavListItem = ({\n  href,\n  id,\n  isDisabled,\n  label,\n  onClick,\n  target,\n}: TopNavListItemProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const topNavItemContentKeyHandler = useCallback<\n    KeyboardEventHandler<HTMLDivElement>\n  >(\n    (event) => {\n      if (event?.key === \"Enter\") {\n        event.preventDefault();\n        event.stopPropagation();\n        onClick?.(event);\n      }\n    },\n    [onClick],\n  );\n\n  return (\n    <StyledTopNavListItem\n      aria-disabled={isDisabled}\n      id={id}\n      isDisabled={isDisabled}\n      odysseyDesignTokens={odysseyDesignTokens}\n    >\n      {\n        // Use Link for nav items with links and div for disabled or non-link items\n        isDisabled && (\n          <StyledNavItemContentClickContainer\n            odysseyDesignTokens={odysseyDesignTokens}\n          >\n            <StyledTopNavItemLabelContainer\n              odysseyDesignTokens={odysseyDesignTokens}\n            >\n              {label}\n            </StyledTopNavItemLabelContainer>\n          </StyledNavItemContentClickContainer>\n        )\n      }\n\n      {!isDisabled && href && (\n        <Link href={href} onClick={onClick} target={target}>\n          <StyledTopNavItemLabelContainer\n            odysseyDesignTokens={odysseyDesignTokens}\n          >\n            {label}\n          </StyledTopNavItemLabelContainer>\n        </Link>\n      )}\n\n      {!isDisabled && !href && (\n        <StyledNavItemContentClickContainer\n          odysseyDesignTokens={odysseyDesignTokens}\n          onClick={onClick}\n          onKeyDown={topNavItemContentKeyHandler}\n          role=\"button\"\n          tabIndex={0}\n        >\n          <StyledTopNavItemLabelContainer\n            odysseyDesignTokens={odysseyDesignTokens}\n          >\n            {label}\n          </StyledTopNavItemLabelContainer>\n        </StyledNavItemContentClickContainer>\n      )}\n    </StyledTopNavListItem>\n  );\n};\n\nconst MemoizedTopNavListItem = memo(TopNavListItem);\nMemoizedTopNavListItem.displayName = \"TopNavListItem\";\n\nexport { MemoizedTopNavListItem as TopNavListItem };\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/ui-shell/UiShell.cjs

@@ -0,0 +1,119 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultComponentProps = exports.UiShell = void 0;
+var _react = require("react");
+var _reactErrorBoundary = require("react-error-boundary");
+var _OdysseyProvider = require("../OdysseyProvider.cjs");
+var _NarrowUiShellContent = require("./NarrowUiShellContent.cjs");
+var _UiShellProvider = require("./UiShellProvider.cjs");
+var _useUiShellBreakpoints = require("./useUiShellBreakpoints.cjs");
+var _WideUiShellContent = require("./WideUiShellContent.cjs");
+var _jsxRuntime = require("react/jsx-runtime");
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+const defaultComponentProps = exports.defaultComponentProps = {
+  sideNavProps: undefined,
+  topNavProps: undefined
+};
+const errorComponent = (0, _jsxRuntime.jsx)("div", {
+  "data-error": true
+});
+const UiShell = ({
+  appBackgroundColor,
+  appBackgroundContrastMode,
+  appElement,
+  appElementScrollingMode,
+  breakpointConfig,
+  closeSideNavMenu,
+  hasStandardAppContentPadding,
+  initialVisibleSections,
+  onError = console.error,
+  onSubscriptionCreated,
+  optionalComponents,
+  sideNavBackgroundColor,
+  sideNavBackgroundContrastColor,
+  subscribeToCloseRightSideMenu,
+  subscribeToCloseSideNavMenu,
+  subscribeToPropChanges,
+  topNavBackgroundColor,
+  uiShellAppElement,
+  uiShellStylesElement
+}) => {
+  const [componentProps, setComponentProps] = (0, _react.useState)(defaultComponentProps);
+  const activeBreakpoint = (0, _useUiShellBreakpoints.useUiShellBreakpoints)(breakpointConfig);
+  (0, _react.useEffect)(() => {
+    const unsubscribe = subscribeToPropChanges(componentProps => {
+      setComponentProps(componentProps || defaultComponentProps);
+    });
+    onSubscriptionCreated();
+    return () => {
+      unsubscribe();
+    };
+  }, [onSubscriptionCreated, subscribeToPropChanges]);
+  return activeBreakpoint === "none" ? null : (0, _jsxRuntime.jsx)(_reactErrorBoundary.ErrorBoundary, {
+    fallback: errorComponent,
+    onError: onError,
+    children: (0, _jsxRuntime.jsx)(_OdysseyProvider.OdysseyProvider, {
+      emotionRootElement: uiShellStylesElement,
+      hasCssBaseline: true,
+      shadowRootElement: uiShellAppElement,
+      children: (0, _jsxRuntime.jsx)(_reactErrorBoundary.ErrorBoundary, {
+        fallback: errorComponent,
+        onError: onError,
+        children: (0, _jsxRuntime.jsxs)(_UiShellProvider.UiShellProvider, {
+          appBackgroundColor: appBackgroundColor,
+          appBackgroundContrastMode: appBackgroundContrastMode,
+          closeSideNavMenu: closeSideNavMenu,
+          sideNavBackgroundColor: sideNavBackgroundColor,
+          sideNavBackgroundContrastColor: sideNavBackgroundContrastColor,
+          subscribeToCloseRightSideMenu: subscribeToCloseRightSideMenu,
+          subscribeToCloseSideNavMenu: subscribeToCloseSideNavMenu,
+          topNavBackgroundColor: topNavBackgroundColor,
+          children: [activeBreakpoint === "narrow" && (0, _jsxRuntime.jsx)(_NarrowUiShellContent.NarrowUiShellContent, {
+            ...componentProps,
+            appElement: appElement,
+            appElementScrollingMode: appElementScrollingMode,
+            hasSideNavProps: Boolean(componentProps.sideNavProps),
+            hasStandardAppContentPadding: hasStandardAppContentPadding,
+            initialVisibleSections: initialVisibleSections,
+            onError: onError,
+            optionalComponents: optionalComponents
+          }), (activeBreakpoint === "medium" || activeBreakpoint === "wide") && (0, _jsxRuntime.jsx)(_WideUiShellContent.WideUiShellContent, {
+            ...componentProps,
+            ...{
+              sideNavProps: {
+                ...componentProps.sideNavProps,
+                hasSessionStorageState: activeBreakpoint === "wide",
+                isCollapsed: activeBreakpoint === "medium" || componentProps.sideNavProps?.isCollapsed,
+                isCollapsible: activeBreakpoint === "medium" || componentProps.sideNavProps?.isCollapsible
+              }
+            },
+            appElement: appElement,
+            appElementScrollingMode: appElementScrollingMode,
+            hasSideNavProps: Boolean(componentProps.sideNavProps),
+            hasStandardAppContentPadding: hasStandardAppContentPadding,
+            initialVisibleSections: initialVisibleSections,
+            onError: onError,
+            optionalComponents: optionalComponents
+          })]
+        })
+      })
+    })
+  });
+};
+const MemoizedUiShell = exports.UiShell = (0, _react.memo)(UiShell);
+MemoizedUiShell.displayName = "UiShell";
+//# sourceMappingURL=UiShell.cjs.map

package/dist/cjs/ui-shell/UiShell.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"UiShell.cjs","names":["_react","require","_reactErrorBoundary","_OdysseyProvider","_NarrowUiShellContent","_UiShellProvider","_useUiShellBreakpoints","_WideUiShellContent","_jsxRuntime","defaultComponentProps","exports","sideNavProps","undefined","topNavProps","errorComponent","jsx","UiShell","appBackgroundColor","appBackgroundContrastMode","appElement","appElementScrollingMode","breakpointConfig","closeSideNavMenu","hasStandardAppContentPadding","initialVisibleSections","onError","console","error","onSubscriptionCreated","optionalComponents","sideNavBackgroundColor","sideNavBackgroundContrastColor","subscribeToCloseRightSideMenu","subscribeToCloseSideNavMenu","subscribeToPropChanges","topNavBackgroundColor","uiShellAppElement","uiShellStylesElement","componentProps","setComponentProps","useState","activeBreakpoint","useUiShellBreakpoints","useEffect","unsubscribe","ErrorBoundary","fallback","children","OdysseyProvider","emotionRootElement","hasCssBaseline","shadowRootElement","jsxs","UiShellProvider","NarrowUiShellContent","hasSideNavProps","Boolean","WideUiShellContent","hasSessionStorageState","isCollapsed","isCollapsible","MemoizedUiShell","memo","displayName"],"sources":["../../../src/ui-shell/UiShell.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, type SetStateAction, useEffect, useState } from \"react\";\nimport { ErrorBoundary } from \"react-error-boundary\";\n\nimport { OdysseyProvider } from \"../OdysseyProvider.js\";\nimport { MessageBus } from \"../tools/createMessageBus.js\";\nimport { type ReactRootElements } from \"../web-component/createReactRootElements.js\";\nimport { NarrowUiShellContent } from \"./NarrowUiShellContent.js\";\nimport {\n  UiShellContentProps,\n  UiShellNavComponentProps,\n} from \"./uiShellContentTypes.js\";\nimport { UiShellProvider, UiShellProviderProps } from \"./UiShellProvider.js\";\nimport {\n  UiShellBreakpointConfig,\n  useUiShellBreakpoints,\n} from \"./useUiShellBreakpoints.js\";\nimport { WideUiShellContent } from \"./WideUiShellContent.js\";\n\nexport const defaultComponentProps: UiShellNavComponentProps = {\n  sideNavProps: undefined,\n  topNavProps: undefined,\n} as const;\n\nconst errorComponent = <div data-error />;\n\nexport type UiShellProps = {\n  /**\n   * Customized breakpoints for UI Shell.\n   *\n   * The defaults are set for you. Pass these only if your app doesn't work properly with the defaults (like Admin).\n   */\n  breakpointConfig?: UiShellBreakpointConfig;\n  /**\n   * Notifies when subscribed to prop changes.\n   *\n   * UI Shell listens to prop updates, and it won't subscribe synchronously. Because of that, this callback notifies when that subscription is ready.\n   */\n  onSubscriptionCreated: () => void;\n  /**\n   * This is a callback that provides a subscriber callback to listen for changes to state.\n   * It allows UI Shell to listen for state changes.\n   *\n   * The props coming in this callback go directly to a React state; therefore, it shares the same signature and provides a previous state.\n   */\n  subscribeToPropChanges: MessageBus<\n    SetStateAction<UiShellNavComponentProps>\n  >[\"subscribe\"];\n  /**\n   * Element inside UI Shell's React root component renders into. If using a web component, this is going to exist inside it.\n   */\n  uiShellAppElement: ReactRootElements[\"appRootElement\"];\n  /**\n   * Typically, this is your `<head>` element. If using a web component, you need to create one yourself as Shadow DOM's don't have a `<head>`.\n   */\n  uiShellStylesElement: ReactRootElements[\"stylesRootElement\"];\n} & UiShellProviderProps &\n  Pick<\n    UiShellContentProps,\n    | \"appElement\"\n    | \"appElementScrollingMode\"\n    | \"hasStandardAppContentPadding\"\n    | \"initialVisibleSections\"\n    | \"onError\"\n    | \"optionalComponents\"\n  >;\n\n/**\n * Our new Unified Platform UI Shell.\n *\n * This includes the top and side navigation as well as the footer and provides a spot for your app to render into.\n *\n * If an error occurs, this will revert to only showing the app.\n */\nconst UiShell = ({\n  appBackgroundColor,\n  appBackgroundContrastMode,\n  appElement,\n  appElementScrollingMode,\n  breakpointConfig,\n  closeSideNavMenu,\n  hasStandardAppContentPadding,\n  initialVisibleSections,\n  onError = console.error,\n  onSubscriptionCreated,\n  optionalComponents,\n  sideNavBackgroundColor,\n  sideNavBackgroundContrastColor,\n  subscribeToCloseRightSideMenu,\n  subscribeToCloseSideNavMenu,\n  subscribeToPropChanges,\n  topNavBackgroundColor,\n  uiShellAppElement,\n  uiShellStylesElement,\n}: UiShellProps) => {\n  const [componentProps, setComponentProps] = useState(defaultComponentProps);\n\n  const activeBreakpoint = useUiShellBreakpoints(breakpointConfig);\n\n  useEffect(() => {\n    const unsubscribe = subscribeToPropChanges((componentProps) => {\n      // If for some reason nothing is passed as `componentProps`, we fallback on `defaultComponentProps` as a safety mechanism to ensure nothing breaks.\n      setComponentProps(componentProps || defaultComponentProps);\n    });\n\n    onSubscriptionCreated();\n\n    return () => {\n      unsubscribe();\n    };\n  }, [onSubscriptionCreated, subscribeToPropChanges]);\n\n  return activeBreakpoint === \"none\" ? null : (\n    <ErrorBoundary fallback={errorComponent} onError={onError}>\n      <OdysseyProvider\n        emotionRootElement={uiShellStylesElement}\n        hasCssBaseline\n        shadowRootElement={uiShellAppElement}\n      >\n        <ErrorBoundary fallback={errorComponent} onError={onError}>\n          <UiShellProvider\n            appBackgroundColor={appBackgroundColor}\n            appBackgroundContrastMode={appBackgroundContrastMode}\n            closeSideNavMenu={closeSideNavMenu}\n            sideNavBackgroundColor={sideNavBackgroundColor}\n            sideNavBackgroundContrastColor={sideNavBackgroundContrastColor}\n            subscribeToCloseRightSideMenu={subscribeToCloseRightSideMenu}\n            subscribeToCloseSideNavMenu={subscribeToCloseSideNavMenu}\n            topNavBackgroundColor={topNavBackgroundColor}\n          >\n            {activeBreakpoint === \"narrow\" && (\n              <NarrowUiShellContent\n                {...componentProps}\n                appElement={appElement}\n                appElementScrollingMode={appElementScrollingMode}\n                hasSideNavProps={Boolean(componentProps.sideNavProps)}\n                hasStandardAppContentPadding={hasStandardAppContentPadding}\n                initialVisibleSections={initialVisibleSections}\n                onError={onError}\n                optionalComponents={optionalComponents}\n              />\n            )}\n\n            {(activeBreakpoint === \"medium\" || activeBreakpoint === \"wide\") && (\n              <WideUiShellContent\n                {...{\n                  ...componentProps,\n                  ...{\n                    sideNavProps: {\n                      ...componentProps.sideNavProps,\n                      hasSessionStorageState: activeBreakpoint === \"wide\",\n                      isCollapsed:\n                        activeBreakpoint === \"medium\" ||\n                        componentProps.sideNavProps?.isCollapsed,\n                      isCollapsible:\n                        activeBreakpoint === \"medium\" ||\n                        componentProps.sideNavProps?.isCollapsible,\n                      // We have to use `as` because sideNavProps expects you to have `sideNavItems` defined even though it had to be passed in `...componentProps.sideNavProps`.\n                    } as typeof componentProps.sideNavProps,\n                  },\n                }}\n                appElement={appElement}\n                appElementScrollingMode={appElementScrollingMode}\n                hasSideNavProps={Boolean(componentProps.sideNavProps)}\n                hasStandardAppContentPadding={hasStandardAppContentPadding}\n                initialVisibleSections={initialVisibleSections}\n                onError={onError}\n                optionalComponents={optionalComponents}\n              />\n            )}\n          </UiShellProvider>\n        </ErrorBoundary>\n      </OdysseyProvider>\n    </ErrorBoundary>\n  );\n};\n\nconst MemoizedUiShell = memo(UiShell);\nMemoizedUiShell.displayName = \"UiShell\";\n\nexport { MemoizedUiShell as UiShell };\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/ui-shell/UiShellProvider.cjs

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useUiShellContext = exports.defaultSubscribeToCloseRightSideMenu = exports.defaultCloseSideNavMessageBus = exports.UiShellProvider = void 0;
+var _react = require("react");
+var _createContrastColors = require("../createContrastColors.cjs");
+var _OdysseyDesignTokensContext = require("../OdysseyDesignTokensContext.cjs");
+var _createMessageBus = require("../tools/createMessageBus.cjs");
+var _jsxRuntime = require("react/jsx-runtime");
+/*!
+ * 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.
+ */
+
+const defaultCloseSideNavMessageBus = exports.defaultCloseSideNavMessageBus = (0, _createMessageBus.createMessageBus)();
+const defaultSubscribeToCloseRightSideMenu = () => () => {};
+exports.defaultSubscribeToCloseRightSideMenu = defaultSubscribeToCloseRightSideMenu;
+const UiShellContext = (0, _react.createContext)(undefined);
+const useUiShellContext = () => {
+  return (0, _react.useContext)(UiShellContext);
+};
+exports.useUiShellContext = useUiShellContext;
+const UiShellProvider = ({
+  appBackgroundColor,
+  appBackgroundContrastMode = "lowContrast",
+  children,
+  closeSideNavMenu,
+  sideNavBackgroundColor,
+  sideNavBackgroundContrastColor,
+  subscribeToCloseRightSideMenu,
+  subscribeToCloseSideNavMenu,
+  topNavBackgroundColor
+}) => {
+  const odysseyDesignTokens = (0, _OdysseyDesignTokensContext.useOdysseyDesignTokens)();
+  const defaultedSideNavBackgroundColor = sideNavBackgroundColor || odysseyDesignTokens.HueNeutralWhite;
+  const sideNavContrastColors = defaultedSideNavBackgroundColor !== odysseyDesignTokens.HueNeutralWhite ? (0, _createContrastColors.generateContrastColors)({
+    backgroundColor: sideNavBackgroundColor || defaultedSideNavBackgroundColor,
+    backgroundContrastColor: sideNavBackgroundContrastColor,
+    odysseyDesignTokens
+  }) : undefined;
+  const isAppBackgroundHightContrast = appBackgroundContrastMode === "highContrast";
+  const defaultTopAndAppBackgroundColor = isAppBackgroundHightContrast ? odysseyDesignTokens.HueNeutralWhite : odysseyDesignTokens.HueNeutral50;
+  const topNavColor = topNavBackgroundColor || defaultTopAndAppBackgroundColor;
+  const appContentBackgroundColor = appBackgroundColor || defaultTopAndAppBackgroundColor;
+  const memoizedContextValue = (0, _react.useMemo)(() => ({
+    appBackgroundColor: appContentBackgroundColor,
+    closeSideNavMenu: closeSideNavMenu ?? defaultCloseSideNavMessageBus.publish,
+    sideNavBackgroundColor: sideNavBackgroundColor || odysseyDesignTokens.HueNeutralWhite,
+    sideNavContrastColors,
+    subscribeToCloseSideNavMenu: subscribeToCloseSideNavMenu ?? defaultCloseSideNavMessageBus.subscribe,
+    subscribeToCloseRightSideMenu: subscribeToCloseRightSideMenu ?? defaultSubscribeToCloseRightSideMenu,
+    topNavBackgroundColor: topNavColor
+  }), [appContentBackgroundColor, odysseyDesignTokens.HueNeutralWhite, closeSideNavMenu, sideNavBackgroundColor, sideNavContrastColors, subscribeToCloseRightSideMenu, subscribeToCloseSideNavMenu, topNavColor]);
+  return (0, _jsxRuntime.jsx)(UiShellContext.Provider, {
+    value: memoizedContextValue,
+    children: children
+  });
+};
+const MemoizedUiShellProvider = exports.UiShellProvider = (0, _react.memo)(UiShellProvider);
+//# sourceMappingURL=UiShellProvider.cjs.map

package/dist/cjs/ui-shell/UiShellProvider.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"UiShellProvider.cjs","names":["_react","require","_createContrastColors","_OdysseyDesignTokensContext","_createMessageBus","_jsxRuntime","defaultCloseSideNavMessageBus","exports","createMessageBus","defaultSubscribeToCloseRightSideMenu","UiShellContext","createContext","undefined","useUiShellContext","useContext","UiShellProvider","appBackgroundColor","appBackgroundContrastMode","children","closeSideNavMenu","sideNavBackgroundColor","sideNavBackgroundContrastColor","subscribeToCloseRightSideMenu","subscribeToCloseSideNavMenu","topNavBackgroundColor","odysseyDesignTokens","useOdysseyDesignTokens","defaultedSideNavBackgroundColor","HueNeutralWhite","sideNavContrastColors","generateContrastColors","backgroundColor","backgroundContrastColor","isAppBackgroundHightContrast","defaultTopAndAppBackgroundColor","HueNeutral50","topNavColor","appContentBackgroundColor","memoizedContextValue","useMemo","publish","subscribe","jsx","Provider","value","MemoizedUiShellProvider","memo"],"sources":["../../../src/ui-shell/UiShellProvider.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 {\n  createContext,\n  memo,\n  PropsWithChildren,\n  useContext,\n  useMemo,\n} from \"react\";\n\nimport {\n  ContrastColors,\n  generateContrastColors,\n} from \"../createContrastColors.js\";\nimport { useOdysseyDesignTokens } from \"../OdysseyDesignTokensContext.js\";\nimport { createMessageBus, MessageBus } from \"../tools/createMessageBus.js\";\nimport { ContrastMode } from \"../useContrastMode.js\";\n\nexport const defaultCloseSideNavMessageBus = createMessageBus();\nexport const defaultSubscribeToCloseRightSideMenu = () => () => {};\n\nexport type UiShellColors = {\n  /**\n   * Custom background color for the app content area.\n   */\n  appBackgroundColor: string;\n  /**\n   * Custom background color for the side nav area.\n   */\n  sideNavBackgroundColor: string;\n  /**\n   * Custom color for fonts and other contrasted colors in the side nav area. Other contrast colors are derived from this one.\n   *\n   * If not passed, it gets computed from Odyssey.\n   */\n  sideNavBackgroundContrastColor?: string;\n  sideNavContrastColors?: ContrastColors;\n  /**\n   * Custom background color for the top nav area.\n   */\n  topNavBackgroundColor: string;\n};\n\nexport type UiShellContext = {\n  /**\n   * This is a callback that publishes a change to all subscribers listening for when to close the side nav.\n   */\n  closeSideNavMenu: MessageBus<void>[\"publish\"];\n  /**\n   * This is a callback that provides a subscriber callback to listen for changes to state.\n   * It allows UI Shell to listen for a publisher that asks us to close the right-side menu.\n   */\n  subscribeToCloseRightSideMenu: MessageBus<void>[\"subscribe\"];\n  /**\n   * This is a callback that provides a subscriber callback to listen for changes to state.\n   * It allows UI Shell to listen for a publisher that asks us to close the side nav.\n   */\n  subscribeToCloseSideNavMenu: MessageBus<void>[\"subscribe\"];\n} & UiShellColors;\n\nconst UiShellContext = createContext<UiShellContext | undefined>(undefined);\n\nexport const useUiShellContext = () => {\n  return useContext(UiShellContext);\n};\n\nexport type UiShellProviderProps = {\n  /**\n   * Sets either a gray or white background color for the app content area.\n   */\n  appBackgroundContrastMode?: ContrastMode;\n} & Partial<UiShellContext>;\n\nconst UiShellProvider = ({\n  appBackgroundColor,\n  appBackgroundContrastMode = \"lowContrast\",\n  children,\n  closeSideNavMenu,\n  sideNavBackgroundColor,\n  sideNavBackgroundContrastColor,\n  subscribeToCloseRightSideMenu,\n  subscribeToCloseSideNavMenu,\n  topNavBackgroundColor,\n}: PropsWithChildren<UiShellProviderProps>) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const defaultedSideNavBackgroundColor =\n    sideNavBackgroundColor || odysseyDesignTokens.HueNeutralWhite;\n\n  const sideNavContrastColors =\n    defaultedSideNavBackgroundColor !== odysseyDesignTokens.HueNeutralWhite\n      ? generateContrastColors({\n          backgroundColor:\n            sideNavBackgroundColor || defaultedSideNavBackgroundColor,\n          backgroundContrastColor: sideNavBackgroundContrastColor,\n          odysseyDesignTokens,\n        })\n      : undefined;\n\n  const isAppBackgroundHightContrast =\n    appBackgroundContrastMode === \"highContrast\";\n\n  const defaultTopAndAppBackgroundColor = isAppBackgroundHightContrast\n    ? odysseyDesignTokens.HueNeutralWhite\n    : odysseyDesignTokens.HueNeutral50;\n\n  const topNavColor = topNavBackgroundColor || defaultTopAndAppBackgroundColor;\n\n  const appContentBackgroundColor =\n    appBackgroundColor || defaultTopAndAppBackgroundColor;\n\n  const memoizedContextValue = useMemo(\n    () => ({\n      appBackgroundColor: appContentBackgroundColor,\n      closeSideNavMenu:\n        closeSideNavMenu ?? defaultCloseSideNavMessageBus.publish,\n      sideNavBackgroundColor:\n        sideNavBackgroundColor || odysseyDesignTokens.HueNeutralWhite,\n      sideNavContrastColors,\n      subscribeToCloseSideNavMenu:\n        subscribeToCloseSideNavMenu ?? defaultCloseSideNavMessageBus.subscribe,\n      subscribeToCloseRightSideMenu:\n        subscribeToCloseRightSideMenu ?? defaultSubscribeToCloseRightSideMenu,\n      topNavBackgroundColor: topNavColor,\n    }),\n    [\n      appContentBackgroundColor,\n      odysseyDesignTokens.HueNeutralWhite,\n      closeSideNavMenu,\n      sideNavBackgroundColor,\n      sideNavContrastColors,\n      subscribeToCloseRightSideMenu,\n      subscribeToCloseSideNavMenu,\n      topNavColor,\n    ],\n  );\n\n  return (\n    <UiShellContext.Provider value={memoizedContextValue}>\n      {children}\n    </UiShellContext.Provider>\n  );\n};\n\nconst MemoizedUiShellProvider = memo(UiShellProvider);\n\nexport { MemoizedUiShellProvider as UiShellProvider };\n"],"mappings":";;;;;;AAYA,IAAAA,MAAA,GAAAC,OAAA;AAQA,IAAAC,qBAAA,GAAAD,OAAA;AAIA,IAAAE,2BAAA,GAAAF,OAAA;AACA,IAAAG,iBAAA,GAAAH,OAAA;AAA4E,IAAAI,WAAA,GAAAJ,OAAA;AAzB5E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAkBO,MAAMK,6BAA6B,GAAAC,OAAA,CAAAD,6BAAA,GAAG,IAAAE,kCAAgB,EAAC,CAAC;AACxD,MAAMC,oCAAoC,GAAGA,CAAA,KAAM,MAAM,CAAC,CAAC;AAACF,OAAA,CAAAE,oCAAA,GAAAA,oCAAA;AAyCnE,MAAMC,cAAc,GAAG,IAAAC,oBAAa,EAA6BC,SAAS,CAAC;AAEpE,MAAMC,iBAAiB,GAAGA,CAAA,KAAM;EACrC,OAAO,IAAAC,iBAAU,EAACJ,cAAc,CAAC;AACnC,CAAC;AAACH,OAAA,CAAAM,iBAAA,GAAAA,iBAAA;AASF,MAAME,eAAe,GAAGA,CAAC;EACvBC,kBAAkB;EAClBC,yBAAyB,GAAG,aAAa;EACzCC,QAAQ;EACRC,gBAAgB;EAChBC,sBAAsB;EACtBC,8BAA8B;EAC9BC,6BAA6B;EAC7BC,2BAA2B;EAC3BC;AACuC,CAAC,KAAK;EAC7C,MAAMC,mBAAmB,GAAG,IAAAC,kDAAsB,EAAC,CAAC;EACpD,MAAMC,+BAA+B,GACnCP,sBAAsB,IAAIK,mBAAmB,CAACG,eAAe;EAE/D,MAAMC,qBAAqB,GACzBF,+BAA+B,KAAKF,mBAAmB,CAACG,eAAe,GACnE,IAAAE,4CAAsB,EAAC;IACrBC,eAAe,EACbX,sBAAsB,IAAIO,+BAA+B;IAC3DK,uBAAuB,EAAEX,8BAA8B;IACvDI;EACF,CAAC,CAAC,GACFb,SAAS;EAEf,MAAMqB,4BAA4B,GAChChB,yBAAyB,KAAK,cAAc;EAE9C,MAAMiB,+BAA+B,GAAGD,4BAA4B,GAChER,mBAAmB,CAACG,eAAe,GACnCH,mBAAmB,CAACU,YAAY;EAEpC,MAAMC,WAAW,GAAGZ,qBAAqB,IAAIU,+BAA+B;EAE5E,MAAMG,yBAAyB,GAC7BrB,kBAAkB,IAAIkB,+BAA+B;EAEvD,MAAMI,oBAAoB,GAAG,IAAAC,cAAO,EAClC,OAAO;IACLvB,kBAAkB,EAAEqB,yBAAyB;IAC7ClB,gBAAgB,EACdA,gBAAgB,IAAIb,6BAA6B,CAACkC,OAAO;IAC3DpB,sBAAsB,EACpBA,sBAAsB,IAAIK,mBAAmB,CAACG,eAAe;IAC/DC,qBAAqB;IACrBN,2BAA2B,EACzBA,2BAA2B,IAAIjB,6BAA6B,CAACmC,SAAS;IACxEnB,6BAA6B,EAC3BA,6BAA6B,IAAIb,oCAAoC;IACvEe,qBAAqB,EAAEY;EACzB,CAAC,CAAC,EACF,CACEC,yBAAyB,EACzBZ,mBAAmB,CAACG,eAAe,EACnCT,gBAAgB,EAChBC,sBAAsB,EACtBS,qBAAqB,EACrBP,6BAA6B,EAC7BC,2BAA2B,EAC3Ba,WAAW,CAEf,CAAC;EAED,OACE,IAAA/B,WAAA,CAAAqC,GAAA,EAAChC,cAAc,CAACiC,QAAQ;IAACC,KAAK,EAAEN,oBAAqB;IAAApB,QAAA,EAClDA;EAAQ,CACc,CAAC;AAE9B,CAAC;AAED,MAAM2B,uBAAuB,GAAAtC,OAAA,CAAAQ,eAAA,GAAG,IAAA+B,WAAI,EAAC/B,eAAe,CAAC","ignoreList":[]}