@okta/odyssey-react-mui 1.49.0 → 1.51.0

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

@@ -47,7 +47,7 @@ const StyledTopNavContainer = (0, _styled.default)("div", {
   paddingInline: odysseyDesignTokens.Spacing8,
   position: "relative",
   transition: `box-shadow ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`,
-  zIndex: _uiShellSharedConstants.UI_SHELL_BASE_Z_INDEX,
+  zIndex: _uiShellSharedConstants.UI_SHELL_RAISED_Z_INDEX,
   ...(topNavBackgroundColor === odysseyDesignTokens.HueNeutralWhite && {
     borderBottom: `${odysseyDesignTokens.BorderWidthMain} ${odysseyDesignTokens.BorderStyleMain} ${odysseyDesignTokens.HueNeutral100}`
   })

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

@@ -1 +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":[]}
+{"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_RAISED_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_RAISED_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_RAISED_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,+CAAuB;EAE/B,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/uiShellSharedConstants.cjs

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.emptySideNavItems = exports.UI_SHELL_OVERLAY_Z_INDEX = exports.UI_SHELL_BASE_Z_INDEX = exports.TOP_NAV_HEIGHT = exports.SIDE_NAV_WIDTH = exports.SIDE_NAV_VISIBILITY_TOGGLE_ICON_POSITION = void 0;
+exports.emptySideNavItems = exports.UI_SHELL_RAISED_Z_INDEX = exports.UI_SHELL_OVERLAY_Z_INDEX = exports.UI_SHELL_BASE_Z_INDEX = exports.TOP_NAV_HEIGHT = exports.SIDE_NAV_WIDTH = exports.SIDE_NAV_VISIBILITY_TOGGLE_ICON_POSITION = void 0;
 /*!
  * 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.")
@@ -18,6 +18,7 @@ exports.emptySideNavItems = exports.UI_SHELL_OVERLAY_Z_INDEX = exports.UI_SHELL_
 const SIDE_NAV_WIDTH = exports.SIDE_NAV_WIDTH = "300px";
 const TOP_NAV_HEIGHT = exports.TOP_NAV_HEIGHT = `${64 / 14}rem`;
 const UI_SHELL_BASE_Z_INDEX = exports.UI_SHELL_BASE_Z_INDEX = 100;
+const UI_SHELL_RAISED_Z_INDEX = exports.UI_SHELL_RAISED_Z_INDEX = 101;
 const UI_SHELL_OVERLAY_Z_INDEX = exports.UI_SHELL_OVERLAY_Z_INDEX = 200;
 const emptySideNavItems = exports.emptySideNavItems = [];
 //# sourceMappingURL=uiShellSharedConstants.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"uiShellSharedConstants.cjs","names":["SIDE_NAV_VISIBILITY_TOGGLE_ICON_POSITION","exports","SIDE_NAV_WIDTH","TOP_NAV_HEIGHT","UI_SHELL_BASE_Z_INDEX","UI_SHELL_OVERLAY_Z_INDEX","emptySideNavItems"],"sources":["../../../src/ui-shell/uiShellSharedConstants.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 { SideNavProps } from \"./SideNav/types.js\";\n\n// It's important to bring all our constant values together, so we can change them in one location and ensure the values are all correct relative to each other.\n// This also lends us the capability of swapping these out for a more robust solution in the future.\n\n/* The side nav collapse icon is placed absolutely from the top (Logo container + nav header height) to align it in the middle of the nav header text */\nexport const SIDE_NAV_VISIBILITY_TOGGLE_ICON_POSITION = \"77px\";\n\nexport const SIDE_NAV_WIDTH = \"300px\";\n\nexport const TOP_NAV_HEIGHT = `${64 / 14}rem`;\n\nexport const UI_SHELL_BASE_Z_INDEX = 100;\n\nexport const UI_SHELL_OVERLAY_Z_INDEX = 200;\n\nexport const emptySideNavItems = [] satisfies SideNavProps[\"sideNavItems\"];\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAQO,MAAMA,wCAAwC,GAAAC,OAAA,CAAAD,wCAAA,GAAG,MAAM;AAEvD,MAAME,cAAc,GAAAD,OAAA,CAAAC,cAAA,GAAG,OAAO;AAE9B,MAAMC,cAAc,GAAAF,OAAA,CAAAE,cAAA,GAAG,GAAG,EAAE,GAAG,EAAE,KAAK;AAEtC,MAAMC,qBAAqB,GAAAH,OAAA,CAAAG,qBAAA,GAAG,GAAG;AAEjC,MAAMC,wBAAwB,GAAAJ,OAAA,CAAAI,wBAAA,GAAG,GAAG;AAEpC,MAAMC,iBAAiB,GAAAL,OAAA,CAAAK,iBAAA,GAAG,EAAyC","ignoreList":[]}
+{"version":3,"file":"uiShellSharedConstants.cjs","names":["SIDE_NAV_VISIBILITY_TOGGLE_ICON_POSITION","exports","SIDE_NAV_WIDTH","TOP_NAV_HEIGHT","UI_SHELL_BASE_Z_INDEX","UI_SHELL_RAISED_Z_INDEX","UI_SHELL_OVERLAY_Z_INDEX","emptySideNavItems"],"sources":["../../../src/ui-shell/uiShellSharedConstants.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 { SideNavProps } from \"./SideNav/types.js\";\n\n// It's important to bring all our constant values together, so we can change them in one location and ensure the values are all correct relative to each other.\n// This also lends us the capability of swapping these out for a more robust solution in the future.\n\n/* The side nav collapse icon is placed absolutely from the top (Logo container + nav header height) to align it in the middle of the nav header text */\nexport const SIDE_NAV_VISIBILITY_TOGGLE_ICON_POSITION = \"77px\";\n\nexport const SIDE_NAV_WIDTH = \"300px\";\n\nexport const TOP_NAV_HEIGHT = `${64 / 14}rem`;\n\nexport const UI_SHELL_BASE_Z_INDEX = 100;\n\nexport const UI_SHELL_RAISED_Z_INDEX = 101;\n\nexport const UI_SHELL_OVERLAY_Z_INDEX = 200;\n\nexport const emptySideNavItems = [] satisfies SideNavProps[\"sideNavItems\"];\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAQO,MAAMA,wCAAwC,GAAAC,OAAA,CAAAD,wCAAA,GAAG,MAAM;AAEvD,MAAME,cAAc,GAAAD,OAAA,CAAAC,cAAA,GAAG,OAAO;AAE9B,MAAMC,cAAc,GAAAF,OAAA,CAAAE,cAAA,GAAG,GAAG,EAAE,GAAG,EAAE,KAAK;AAEtC,MAAMC,qBAAqB,GAAAH,OAAA,CAAAG,qBAAA,GAAG,GAAG;AAEjC,MAAMC,uBAAuB,GAAAJ,OAAA,CAAAI,uBAAA,GAAG,GAAG;AAEnC,MAAMC,wBAAwB,GAAAL,OAAA,CAAAK,wBAAA,GAAG,GAAG;AAEpC,MAAMC,iBAAiB,GAAAN,OAAA,CAAAM,iBAAA,GAAG,EAAyC","ignoreList":[]}

package/dist/cjs/web-component/odysseyWebComponentVersion.generated.cjs

@@ -15,5 +15,5 @@ exports.default = void 0;
  *
  * See the License for the specific language governing permissions and limitations under the License.
  */
-var _default = exports.default = "1-49-0";
+var _default = exports.default = "1-51-0";
 //# sourceMappingURL=odysseyWebComponentVersion.generated.cjs.map

package/dist/cjs/web-component/odysseyWebComponentVersion.generated.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"odysseyWebComponentVersion.generated.cjs","names":["_default","exports","default"],"sources":["../../../src/web-component/odysseyWebComponentVersion.generated.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\n/**\n * DO NOT UPDATE THIS FILE MANUALLY\n * This file is managed by scripts/updateWebComponentVersion.ts and any changes made will be overwritten\n * This script only needs to be run during release, and shouldn't be used during local development.\n */\n\nexport default \"1-49-0\";\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAVA,IAAAA,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAkBe,QAAQ","ignoreList":[]}
+{"version":3,"file":"odysseyWebComponentVersion.generated.cjs","names":["_default","exports","default"],"sources":["../../../src/web-component/odysseyWebComponentVersion.generated.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\n/**\n * DO NOT UPDATE THIS FILE MANUALLY\n * This file is managed by scripts/updateWebComponentVersion.ts and any changes made will be overwritten\n * This script only needs to be run during release, and shouldn't be used during local development.\n */\n\nexport default \"1-51-0\";\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAVA,IAAAA,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAkBe,QAAQ","ignoreList":[]}

package/dist/esm/Banner.js

@@ -24,10 +24,11 @@ const Banner = ({
   linkText,
   linkUrl,
   onClose,
+  onLinkClick,
   role,
   severity,
-  text,
   testId,
+  text,
   translate
 }) => {
   const {
@@ -45,8 +46,9 @@ const Banner = ({
     }), _jsx(_AlertTitle, {
       translate: translate,
       children: text
-    }), linkUrl && _jsx(Link, {
-      href: linkUrl,
+    }), linkText && _jsx(Link, {
+      href: linkUrl ?? "#",
+      onClick: onLinkClick,
       rel: linkRel,
       target: linkTarget,
       translate: translate,

package/dist/esm/Banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.js","names":["memo","useTranslation","Link","ScreenReaderText","jsx","_jsx","jsxs","_jsxs","bannerRoleValues","bannerSeverityValues","Banner","linkRel","linkTarget","linkText","linkUrl","onClose","role","severity","text","testId","translate","t","_Alert","variant","children","_AlertTitle","href","rel","target","MemoizedBanner","displayName"],"sources":["../../src/Banner.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 { Alert, AlertColor, AlertProps, AlertTitle } from \"@mui/material\";\nimport { memo } from \"react\";\n\nimport type { HtmlProps } from \"./HtmlProps.js\";\n\nimport { useTranslation } from \"./i18n.generated/i18n.js\";\nimport { Link, LinkProps } from \"./Link.js\";\nimport { ScreenReaderText } from \"./ScreenReaderText.js\";\n\nexport const bannerRoleValues = [\"status\", \"alert\"] as const;\nexport const bannerSeverityValues: AlertColor[] = [\n  \"success\",\n  \"info\",\n  \"warning\",\n  \"error\",\n];\n\nexport type BannerProps = {\n  /**\n   * The function that's fired when the user clicks the close button. If undefined,\n   * the close button will not be shown.\n   */\n  onClose?: AlertProps[\"onClose\"];\n  /**\n   * Sets the ARIA role of the alert\n   * (\"status\" for something that dynamically updates, \"alert\" for errors, null for something\n   * unchanging)\n   */\n  role?: (typeof bannerRoleValues)[number];\n  /**\n   * Determine the color and icon of the alert\n   */\n  severity: (typeof bannerSeverityValues)[number];\n  /**\n   * The text content of the alert\n   */\n  text: string;\n} & Pick<HtmlProps, \"testId\" | \"translate\"> &\n  (\n    | {\n        linkRel?: LinkProps[\"rel\"];\n        linkTarget?: LinkProps[\"target\"];\n        linkText: string;\n        /**\n         * If defined, the Banner will include a link to the URL\n         */\n        linkUrl: LinkProps[\"href\"];\n      }\n    | {\n        linkRel?: never;\n        linkTarget?: never;\n        linkText?: never;\n        linkUrl?: never;\n      }\n  );\n\nconst Banner = ({\n  linkRel,\n  linkTarget,\n  linkText,\n  linkUrl,\n  onClose,\n  role,\n  severity,\n  text,\n  testId,\n  translate,\n}: BannerProps) => {\n  const { t } = useTranslation();\n\n  return (\n    <Alert\n      data-se={testId}\n      onClose={onClose}\n      role={role}\n      severity={severity}\n      variant=\"banner\"\n    >\n      <ScreenReaderText translate={translate}>\n        {t(`severity.${severity}`)}\n      </ScreenReaderText>\n      <AlertTitle translate={translate}>{text}</AlertTitle>\n      {linkUrl && (\n        <Link\n          href={linkUrl}\n          rel={linkRel}\n          target={linkTarget}\n          translate={translate}\n          variant=\"monochrome\"\n        >\n          {linkText}\n        </Link>\n      )}\n    </Alert>\n  );\n};\n\nconst MemoizedBanner = memo(Banner);\nMemoizedBanner.displayName = \"Banner\";\n\nexport { MemoizedBanner as Banner };\n"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,SAASA,IAAI,QAAQ,OAAO;AAI5B,SAASC,cAAc,QAAQ,0BAA0B;AACzD,SAASC,IAAI,QAAmB,WAAW;AAC3C,SAASC,gBAAgB,QAAQ,uBAAuB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEzD,OAAO,MAAMC,gBAAgB,GAAG,CAAC,QAAQ,EAAE,OAAO,CAAU;AAC5D,OAAO,MAAMC,oBAAkC,GAAG,CAChD,SAAS,EACT,MAAM,EACN,SAAS,EACT,OAAO,CACR;AAyCD,MAAMC,MAAM,GAAGA,CAAC;EACdC,OAAO;EACPC,UAAU;EACVC,QAAQ;EACRC,OAAO;EACPC,OAAO;EACPC,IAAI;EACJC,QAAQ;EACRC,IAAI;EACJC,MAAM;EACNC;AACW,CAAC,KAAK;EACjB,MAAM;IAAEC;EAAE,CAAC,GAAGpB,cAAc,CAAC,CAAC;EAE9B,OACEM,KAAA,CAAAe,MAAA;IACE,WAASH,MAAO;IAChBJ,OAAO,EAAEA,OAAQ;IACjBC,IAAI,EAAEA,IAAK;IACXC,QAAQ,EAAEA,QAAS;IACnBM,OAAO,EAAC,QAAQ;IAAAC,QAAA,GAEhBnB,IAAA,CAACF,gBAAgB;MAACiB,SAAS,EAAEA,SAAU;MAAAI,QAAA,EACpCH,CAAC,CAAC,YAAYJ,QAAQ,EAAE;IAAC,CACV,CAAC,EACnBZ,IAAA,CAAAoB,WAAA;MAAYL,SAAS,EAAEA,SAAU;MAAAI,QAAA,EAAEN;IAAI,CAAa,CAAC,EACpDJ,OAAO,IACNT,IAAA,CAACH,IAAI;MACHwB,IAAI,EAAEZ,OAAQ;MACda,GAAG,EAAEhB,OAAQ;MACbiB,MAAM,EAAEhB,UAAW;MACnBQ,SAAS,EAAEA,SAAU;MACrBG,OAAO,EAAC,YAAY;MAAAC,QAAA,EAEnBX;IAAQ,CACL,CACP;EAAA,CACI,CAAC;AAEZ,CAAC;AAED,MAAMgB,cAAc,GAAG7B,IAAI,CAACU,MAAM,CAAC;AACnCmB,cAAc,CAACC,WAAW,GAAG,QAAQ;AAErC,SAASD,cAAc,IAAInB,MAAM","ignoreList":[]}
+{"version":3,"file":"Banner.js","names":["memo","useTranslation","Link","ScreenReaderText","jsx","_jsx","jsxs","_jsxs","bannerRoleValues","bannerSeverityValues","Banner","linkRel","linkTarget","linkText","linkUrl","onClose","onLinkClick","role","severity","testId","text","translate","t","_Alert","variant","children","_AlertTitle","href","onClick","rel","target","MemoizedBanner","displayName"],"sources":["../../src/Banner.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 { Alert, AlertColor, AlertProps, AlertTitle } from \"@mui/material\";\nimport { memo } from \"react\";\n\nimport type { HtmlProps } from \"./HtmlProps.js\";\n\nimport { useTranslation } from \"./i18n.generated/i18n.js\";\nimport { Link, LinkProps } from \"./Link.js\";\nimport { ScreenReaderText } from \"./ScreenReaderText.js\";\n\nexport const bannerRoleValues = [\"status\", \"alert\"] as const;\nexport const bannerSeverityValues: AlertColor[] = [\n  \"success\",\n  \"info\",\n  \"warning\",\n  \"error\",\n];\n\nexport type BannerProps = {\n  /**\n   * The function that's fired when the user clicks the close button. If undefined,\n   * the close button will not be shown.\n   */\n  onClose?: AlertProps[\"onClose\"];\n  /**\n   * Sets the ARIA role of the alert\n   * (\"status\" for something that dynamically updates, \"alert\" for errors, null for something\n   * unchanging)\n   */\n  role?: (typeof bannerRoleValues)[number];\n  /**\n   * Determine the color and icon of the alert\n   */\n  severity: (typeof bannerSeverityValues)[number];\n  /**\n   * The text content of the alert\n   */\n  text: string;\n} & Pick<HtmlProps, \"testId\" | \"translate\"> &\n  // if linkText is provided, either linkUrl or onLinkClick must be provided\n  (| {\n        linkRel?: LinkProps[\"rel\"];\n        linkTarget?: LinkProps[\"target\"];\n        linkText: string;\n        linkUrl: LinkProps[\"href\"];\n        onLinkClick?: never;\n      }\n    | {\n        linkRel?: never;\n        linkTarget?: never;\n        linkText: string;\n        linkUrl?: never;\n        onLinkClick: LinkProps[\"onClick\"];\n      }\n    | {\n        linkRel?: never;\n        linkTarget?: never;\n        linkText?: never;\n        linkUrl?: never;\n        onLinkClick?: never;\n      }\n  );\n\nconst Banner = ({\n  linkRel,\n  linkTarget,\n  linkText,\n  linkUrl,\n  onClose,\n  onLinkClick,\n  role,\n  severity,\n  testId,\n  text,\n  translate,\n}: BannerProps) => {\n  const { t } = useTranslation();\n\n  return (\n    <Alert\n      data-se={testId}\n      onClose={onClose}\n      role={role}\n      severity={severity}\n      variant=\"banner\"\n    >\n      <ScreenReaderText translate={translate}>\n        {t(`severity.${severity}`)}\n      </ScreenReaderText>\n      <AlertTitle translate={translate}>{text}</AlertTitle>\n      {linkText && (\n        <Link\n          href={linkUrl ?? \"#\"}\n          onClick={onLinkClick}\n          rel={linkRel}\n          target={linkTarget}\n          translate={translate}\n          variant=\"monochrome\"\n        >\n          {linkText}\n        </Link>\n      )}\n    </Alert>\n  );\n};\n\nconst MemoizedBanner = memo(Banner);\nMemoizedBanner.displayName = \"Banner\";\n\nexport { MemoizedBanner as Banner };\n"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,SAASA,IAAI,QAAQ,OAAO;AAI5B,SAASC,cAAc,QAAQ,0BAA0B;AACzD,SAASC,IAAI,QAAmB,WAAW;AAC3C,SAASC,gBAAgB,QAAQ,uBAAuB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEzD,OAAO,MAAMC,gBAAgB,GAAG,CAAC,QAAQ,EAAE,OAAO,CAAU;AAC5D,OAAO,MAAMC,oBAAkC,GAAG,CAChD,SAAS,EACT,MAAM,EACN,SAAS,EACT,OAAO,CACR;AA+CD,MAAMC,MAAM,GAAGA,CAAC;EACdC,OAAO;EACPC,UAAU;EACVC,QAAQ;EACRC,OAAO;EACPC,OAAO;EACPC,WAAW;EACXC,IAAI;EACJC,QAAQ;EACRC,MAAM;EACNC,IAAI;EACJC;AACW,CAAC,KAAK;EACjB,MAAM;IAAEC;EAAE,CAAC,GAAGrB,cAAc,CAAC,CAAC;EAE9B,OACEM,KAAA,CAAAgB,MAAA;IACE,WAASJ,MAAO;IAChBJ,OAAO,EAAEA,OAAQ;IACjBE,IAAI,EAAEA,IAAK;IACXC,QAAQ,EAAEA,QAAS;IACnBM,OAAO,EAAC,QAAQ;IAAAC,QAAA,GAEhBpB,IAAA,CAACF,gBAAgB;MAACkB,SAAS,EAAEA,SAAU;MAAAI,QAAA,EACpCH,CAAC,CAAC,YAAYJ,QAAQ,EAAE;IAAC,CACV,CAAC,EACnBb,IAAA,CAAAqB,WAAA;MAAYL,SAAS,EAAEA,SAAU;MAAAI,QAAA,EAAEL;IAAI,CAAa,CAAC,EACpDP,QAAQ,IACPR,IAAA,CAACH,IAAI;MACHyB,IAAI,EAAEb,OAAO,IAAI,GAAI;MACrBc,OAAO,EAAEZ,WAAY;MACrBa,GAAG,EAAElB,OAAQ;MACbmB,MAAM,EAAElB,UAAW;MACnBS,SAAS,EAAEA,SAAU;MACrBG,OAAO,EAAC,YAAY;MAAAC,QAAA,EAEnBZ;IAAQ,CACL,CACP;EAAA,CACI,CAAC;AAEZ,CAAC;AAED,MAAMkB,cAAc,GAAG/B,IAAI,CAACU,MAAM,CAAC;AACnCqB,cAAc,CAACC,WAAW,GAAG,QAAQ;AAErC,SAASD,cAAc,IAAIrB,MAAM","ignoreList":[]}

package/dist/esm/Callout.js

@@ -38,6 +38,7 @@ const Callout = ({
   linkTarget,
   linkText,
   linkUrl,
+  onLinkClick,
   role,
   severity,
   testId,
@@ -69,9 +70,10 @@ const Callout = ({
         children: children
       }), text && _jsx(Paragraph, {
         children: text
-      }), linkUrl && _jsx(_Box, {
+      }), linkText && _jsx(_Box, {
         children: _jsx(Link, {
-          href: linkUrl,
+          href: linkUrl ?? "#",
+          onClick: onLinkClick,
           rel: linkRel,
           target: linkTarget,
           variant: "monochrome",

package/dist/esm/Callout.js.map

@@ -1 +1 @@
-{"version":3,"file":"Callout.js","names":["styled","memo","useTranslation","Link","useOdysseyDesignTokens","Paragraph","useUniqueId","jsx","_jsx","jsxs","_jsxs","calloutRoleValues","calloutSeverityValues","ContentContainer","shouldForwardProp","prop","odysseyDesignTokens","marginBlockStart","Spacing4","Callout","children","linkRel","linkTarget","linkText","linkUrl","role","severity","testId","text","title","translate","t","titleId","_Alert","variant","_AlertTitle","id","_Box","component","href","rel","target","MemoizedCallout","displayName"],"sources":["../../src/Callout.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 { Alert, AlertTitle, Box } from \"@mui/material\";\nimport { memo, ReactNode } from \"react\";\n\nimport type { HtmlProps } from \"./HtmlProps.js\";\n\nimport { useTranslation } from \"./i18n.generated/i18n.js\";\nimport { Link, LinkProps } from \"./Link.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"./OdysseyDesignTokensContext.js\";\nimport { Paragraph } from \"./Typography.js\";\nimport { useUniqueId } from \"./useUniqueId.js\";\n\nexport const calloutRoleValues = [\"status\", \"alert\"] as const;\nexport const calloutSeverityValues = [\n  \"success\",\n  \"info\",\n  \"warning\",\n  \"error\",\n] as const;\n\nexport type CalloutProps = {\n  /**\n   * Used to optionally pass a text list to the component\n   */\n  children?: ReactNode;\n  /**\n   * Sets the ARIA role of the Callout\n   * (\"status\" for something that dynamically updates, \"alert\" for errors, null for something\n   * unchanging)\n   */\n  role?: (typeof calloutRoleValues)[number];\n  /**\n   * Determine the color and icon of the Callout\n   */\n  severity: (typeof calloutSeverityValues)[number];\n  /**\n   * The text content of the Callout\n   */\n  text?: string;\n  /**\n   * The title of the Callout\n   */\n  title?: string;\n} & (\n  | {\n      children?: never;\n      text: string;\n    }\n  | {\n      children: ReactNode;\n      text?: never;\n    }\n) &\n  (\n    | {\n        linkRel?: LinkProps[\"rel\"];\n        linkTarget?: LinkProps[\"target\"];\n        linkText: string;\n        /**\n         * If defined, the Callout will include a link to the URL\n         */\n        linkUrl: LinkProps[\"href\"];\n      }\n    | {\n        linkRel?: never;\n        linkTarget?: never;\n        linkText?: never;\n        linkUrl?: never;\n      }\n  ) &\n  Pick<HtmlProps, \"testId\" | \"translate\">;\n\nconst ContentContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n  \"& > * + *\": {\n    marginBlockStart: odysseyDesignTokens.Spacing4,\n  },\n}));\n\nconst Callout = ({\n  children,\n  linkRel,\n  linkTarget,\n  linkText,\n  linkUrl,\n  role,\n  severity,\n  testId,\n  text,\n  title,\n  translate,\n}: CalloutProps) => {\n  const { t } = useTranslation();\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const titleId = useUniqueId();\n\n  return (\n    <Alert\n      aria-label={t(`severity.${severity}`)}\n      aria-labelledby={titleId}\n      data-se={testId}\n      role={role}\n      severity={severity}\n      variant=\"callout\"\n    >\n      {title && (\n        <AlertTitle aria-hidden id={titleId} translate={translate}>\n          {title}\n        </AlertTitle>\n      )}\n\n      <ContentContainer odysseyDesignTokens={odysseyDesignTokens}>\n        {children && <Box component=\"div\">{children}</Box>}\n        {text && <Paragraph>{text}</Paragraph>}\n        {linkUrl && (\n          <Box>\n            <Link\n              href={linkUrl}\n              rel={linkRel}\n              target={linkTarget}\n              variant=\"monochrome\"\n            >\n              {linkText}\n            </Link>\n          </Box>\n        )}\n      </ContentContainer>\n    </Alert>\n  );\n};\n\nconst MemoizedCallout = memo(Callout);\nMemoizedCallout.displayName = \"Callout\";\n\nexport { MemoizedCallout as Callout };\n"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,MAAM,MAAM,iBAAiB;AAEpC,SAASC,IAAI,QAAmB,OAAO;AAIvC,SAASC,cAAc,QAAQ,0BAA0B;AACzD,SAASC,IAAI,QAAmB,WAAW;AAC3C,SAEEC,sBAAsB,QACjB,iCAAiC;AACxC,SAASC,SAAS,QAAQ,iBAAiB;AAC3C,SAASC,WAAW,QAAQ,kBAAkB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAE/C,OAAO,MAAMC,iBAAiB,GAAG,CAAC,QAAQ,EAAE,OAAO,CAAU;AAC7D,OAAO,MAAMC,qBAAqB,GAAG,CACnC,SAAS,EACT,MAAM,EACN,SAAS,EACT,OAAO,CACC;AAsDV,MAAMC,gBAAgB,GAAGb,MAAM,CAAC,KAAK,EAAE;EACrCc,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAAwC,CAAC;EAAEC;AAAoB,CAAC,MAAM;EACtE,WAAW,EAAE;IACXC,gBAAgB,EAAED,mBAAmB,CAACE;EACxC;AACF,CAAC,CAAC,CAAC;AAEH,MAAMC,OAAO,GAAGA,CAAC;EACfC,QAAQ;EACRC,OAAO;EACPC,UAAU;EACVC,QAAQ;EACRC,OAAO;EACPC,IAAI;EACJC,QAAQ;EACRC,MAAM;EACNC,IAAI;EACJC,KAAK;EACLC;AACY,CAAC,KAAK;EAClB,MAAM;IAAEC;EAAE,CAAC,GAAG7B,cAAc,CAAC,CAAC;EAC9B,MAAMc,mBAAmB,GAAGZ,sBAAsB,CAAC,CAAC;EACpD,MAAM4B,OAAO,GAAG1B,WAAW,CAAC,CAAC;EAE7B,OACEI,KAAA,CAAAuB,MAAA;IACE,cAAYF,CAAC,CAAC,YAAYL,QAAQ,EAAE,CAAE;IACtC,mBAAiBM,OAAQ;IACzB,WAASL,MAAO;IAChBF,IAAI,EAAEA,IAAK;IACXC,QAAQ,EAAEA,QAAS;IACnBQ,OAAO,EAAC,SAAS;IAAAd,QAAA,GAEhBS,KAAK,IACJrB,IAAA,CAAA2B,WAAA;MAAY,mBAAW;MAACC,EAAE,EAAEJ,OAAQ;MAACF,SAAS,EAAEA,SAAU;MAAAV,QAAA,EACvDS;IAAK,CACI,CACb,EAEDnB,KAAA,CAACG,gBAAgB;MAACG,mBAAmB,EAAEA,mBAAoB;MAAAI,QAAA,GACxDA,QAAQ,IAAIZ,IAAA,CAAA6B,IAAA;QAAKC,SAAS,EAAC,KAAK;QAAAlB,QAAA,EAAEA;MAAQ,CAAM,CAAC,EACjDQ,IAAI,IAAIpB,IAAA,CAACH,SAAS;QAAAe,QAAA,EAAEQ;MAAI,CAAY,CAAC,EACrCJ,OAAO,IACNhB,IAAA,CAAA6B,IAAA;QAAAjB,QAAA,EACEZ,IAAA,CAACL,IAAI;UACHoC,IAAI,EAAEf,OAAQ;UACdgB,GAAG,EAAEnB,OAAQ;UACboB,MAAM,EAAEnB,UAAW;UACnBY,OAAO,EAAC,YAAY;UAAAd,QAAA,EAEnBG;QAAQ,CACL;MAAC,CACJ,CACN;IAAA,CACe,CAAC;EAAA,CACd,CAAC;AAEZ,CAAC;AAED,MAAMmB,eAAe,GAAGzC,IAAI,CAACkB,OAAO,CAAC;AACrCuB,eAAe,CAACC,WAAW,GAAG,SAAS;AAEvC,SAASD,eAAe,IAAIvB,OAAO","ignoreList":[]}
+{"version":3,"file":"Callout.js","names":["styled","memo","useTranslation","Link","useOdysseyDesignTokens","Paragraph","useUniqueId","jsx","_jsx","jsxs","_jsxs","calloutRoleValues","calloutSeverityValues","ContentContainer","shouldForwardProp","prop","odysseyDesignTokens","marginBlockStart","Spacing4","Callout","children","linkRel","linkTarget","linkText","linkUrl","onLinkClick","role","severity","testId","text","title","translate","t","titleId","_Alert","variant","_AlertTitle","id","_Box","component","href","onClick","rel","target","MemoizedCallout","displayName"],"sources":["../../src/Callout.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 { Alert, AlertTitle, Box } from \"@mui/material\";\nimport { memo, ReactNode } from \"react\";\n\nimport type { HtmlProps } from \"./HtmlProps.js\";\n\nimport { useTranslation } from \"./i18n.generated/i18n.js\";\nimport { Link, LinkProps } from \"./Link.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"./OdysseyDesignTokensContext.js\";\nimport { Paragraph } from \"./Typography.js\";\nimport { useUniqueId } from \"./useUniqueId.js\";\n\nexport const calloutRoleValues = [\"status\", \"alert\"] as const;\nexport const calloutSeverityValues = [\n  \"success\",\n  \"info\",\n  \"warning\",\n  \"error\",\n] as const;\n\nexport type CalloutProps = {\n  /**\n   * Used to optionally pass a text list to the component\n   */\n  children?: ReactNode;\n  /**\n   * Sets the ARIA role of the Callout\n   * (\"status\" for something that dynamically updates, \"alert\" for errors, null for something\n   * unchanging)\n   */\n  role?: (typeof calloutRoleValues)[number];\n  /**\n   * Determine the color and icon of the Callout\n   */\n  severity: (typeof calloutSeverityValues)[number];\n  /**\n   * The text content of the Callout\n   */\n  text?: string;\n  /**\n   * The title of the Callout\n   */\n  title?: string;\n} & (\n  | {\n      children?: never;\n      text: string;\n    }\n  | {\n      children: ReactNode;\n      text?: never;\n    }\n) &\n  // if linkText is provided, either linkUrl or onLinkClick must be provided\n  (| {\n        linkRel?: LinkProps[\"rel\"];\n        linkTarget?: LinkProps[\"target\"];\n        linkText: string;\n        linkUrl: LinkProps[\"href\"];\n        onLinkClick?: never;\n      }\n    | {\n        linkRel?: never;\n        linkTarget?: never;\n        linkText: string;\n        linkUrl?: never;\n        onLinkClick: LinkProps[\"onClick\"];\n      }\n    | {\n        linkRel?: never;\n        linkTarget?: never;\n        linkText?: never;\n        linkUrl?: never;\n        onLinkClick?: never;\n      }\n  ) &\n  Pick<HtmlProps, \"testId\" | \"translate\">;\n\nconst ContentContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n  \"& > * + *\": {\n    marginBlockStart: odysseyDesignTokens.Spacing4,\n  },\n}));\n\nconst Callout = ({\n  children,\n  linkRel,\n  linkTarget,\n  linkText,\n  linkUrl,\n  onLinkClick,\n  role,\n  severity,\n  testId,\n  text,\n  title,\n  translate,\n}: CalloutProps) => {\n  const { t } = useTranslation();\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const titleId = useUniqueId();\n\n  return (\n    <Alert\n      aria-label={t(`severity.${severity}`)}\n      aria-labelledby={titleId}\n      data-se={testId}\n      role={role}\n      severity={severity}\n      variant=\"callout\"\n    >\n      {title && (\n        <AlertTitle aria-hidden id={titleId} translate={translate}>\n          {title}\n        </AlertTitle>\n      )}\n\n      <ContentContainer odysseyDesignTokens={odysseyDesignTokens}>\n        {children && <Box component=\"div\">{children}</Box>}\n        {text && <Paragraph>{text}</Paragraph>}\n        {linkText && (\n          <Box>\n            <Link\n              href={linkUrl ?? \"#\"}\n              onClick={onLinkClick}\n              rel={linkRel}\n              target={linkTarget}\n              variant=\"monochrome\"\n            >\n              {linkText}\n            </Link>\n          </Box>\n        )}\n      </ContentContainer>\n    </Alert>\n  );\n};\n\nconst MemoizedCallout = memo(Callout);\nMemoizedCallout.displayName = \"Callout\";\n\nexport { MemoizedCallout as Callout };\n"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,MAAM,MAAM,iBAAiB;AAEpC,SAASC,IAAI,QAAmB,OAAO;AAIvC,SAASC,cAAc,QAAQ,0BAA0B;AACzD,SAASC,IAAI,QAAmB,WAAW;AAC3C,SAEEC,sBAAsB,QACjB,iCAAiC;AACxC,SAASC,SAAS,QAAQ,iBAAiB;AAC3C,SAASC,WAAW,QAAQ,kBAAkB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAE/C,OAAO,MAAMC,iBAAiB,GAAG,CAAC,QAAQ,EAAE,OAAO,CAAU;AAC7D,OAAO,MAAMC,qBAAqB,GAAG,CACnC,SAAS,EACT,MAAM,EACN,SAAS,EACT,OAAO,CACC;AA4DV,MAAMC,gBAAgB,GAAGb,MAAM,CAAC,KAAK,EAAE;EACrCc,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAAwC,CAAC;EAAEC;AAAoB,CAAC,MAAM;EACtE,WAAW,EAAE;IACXC,gBAAgB,EAAED,mBAAmB,CAACE;EACxC;AACF,CAAC,CAAC,CAAC;AAEH,MAAMC,OAAO,GAAGA,CAAC;EACfC,QAAQ;EACRC,OAAO;EACPC,UAAU;EACVC,QAAQ;EACRC,OAAO;EACPC,WAAW;EACXC,IAAI;EACJC,QAAQ;EACRC,MAAM;EACNC,IAAI;EACJC,KAAK;EACLC;AACY,CAAC,KAAK;EAClB,MAAM;IAAEC;EAAE,CAAC,GAAG9B,cAAc,CAAC,CAAC;EAC9B,MAAMc,mBAAmB,GAAGZ,sBAAsB,CAAC,CAAC;EACpD,MAAM6B,OAAO,GAAG3B,WAAW,CAAC,CAAC;EAE7B,OACEI,KAAA,CAAAwB,MAAA;IACE,cAAYF,CAAC,CAAC,YAAYL,QAAQ,EAAE,CAAE;IACtC,mBAAiBM,OAAQ;IACzB,WAASL,MAAO;IAChBF,IAAI,EAAEA,IAAK;IACXC,QAAQ,EAAEA,QAAS;IACnBQ,OAAO,EAAC,SAAS;IAAAf,QAAA,GAEhBU,KAAK,IACJtB,IAAA,CAAA4B,WAAA;MAAY,mBAAW;MAACC,EAAE,EAAEJ,OAAQ;MAACF,SAAS,EAAEA,SAAU;MAAAX,QAAA,EACvDU;IAAK,CACI,CACb,EAEDpB,KAAA,CAACG,gBAAgB;MAACG,mBAAmB,EAAEA,mBAAoB;MAAAI,QAAA,GACxDA,QAAQ,IAAIZ,IAAA,CAAA8B,IAAA;QAAKC,SAAS,EAAC,KAAK;QAAAnB,QAAA,EAAEA;MAAQ,CAAM,CAAC,EACjDS,IAAI,IAAIrB,IAAA,CAACH,SAAS;QAAAe,QAAA,EAAES;MAAI,CAAY,CAAC,EACrCN,QAAQ,IACPf,IAAA,CAAA8B,IAAA;QAAAlB,QAAA,EACEZ,IAAA,CAACL,IAAI;UACHqC,IAAI,EAAEhB,OAAO,IAAI,GAAI;UACrBiB,OAAO,EAAEhB,WAAY;UACrBiB,GAAG,EAAErB,OAAQ;UACbsB,MAAM,EAAErB,UAAW;UACnBa,OAAO,EAAC,YAAY;UAAAf,QAAA,EAEnBG;QAAQ,CACL;MAAC,CACJ,CACN;IAAA,CACe,CAAC;EAAA,CACd,CAAC;AAEZ,CAAC;AAED,MAAMqB,eAAe,GAAG3C,IAAI,CAACkB,OAAO,CAAC;AACrCyB,eAAe,CAACC,WAAW,GAAG,SAAS;AAEvC,SAASD,eAAe,IAAIzB,OAAO","ignoreList":[]}

package/dist/esm/ConditionalWrapper.js

@@ -0,0 +1,25 @@
+/*!
+ * 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.
+ */
+
+import { memo } from "react";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+const ConditionalWrapper = ({
+  isWrapped,
+  Wrapper,
+  children
+}) => isWrapped ? Wrapper(children) : _jsx(_Fragment, {
+  children: children
+});
+const MemoizedConditionalWrapper = memo(ConditionalWrapper);
+MemoizedConditionalWrapper.displayName = "ConditionalWrapper";
+export { MemoizedConditionalWrapper as ConditionalWrapper };
+//# sourceMappingURL=ConditionalWrapper.js.map

package/dist/esm/ConditionalWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConditionalWrapper.js","names":["memo","Fragment","_Fragment","jsx","_jsx","ConditionalWrapper","isWrapped","Wrapper","children","MemoizedConditionalWrapper","displayName"],"sources":["../../src/ConditionalWrapper.tsx"],"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 { memo, ReactNode } from \"react\";\n\nexport type ConditionalWrapperProps = {\n  children: ReactNode;\n  isWrapped: boolean;\n  Wrapper: (children: ReactNode) => ReactNode;\n};\n\nconst ConditionalWrapper = ({\n  isWrapped,\n  Wrapper,\n  children,\n}: ConditionalWrapperProps) =>\n  isWrapped ? Wrapper(children) : <>{children}</>;\n\nconst MemoizedConditionalWrapper = memo(ConditionalWrapper);\nMemoizedConditionalWrapper.displayName = \"ConditionalWrapper\";\n\nexport { MemoizedConditionalWrapper as ConditionalWrapper };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAmB,OAAO;AAAC,SAAAC,QAAA,IAAAC,SAAA,EAAAC,GAAA,IAAAC,IAAA;AAQxC,MAAMC,kBAAkB,GAAGA,CAAC;EAC1BC,SAAS;EACTC,OAAO;EACPC;AACuB,CAAC,KACxBF,SAAS,GAAGC,OAAO,CAACC,QAAQ,CAAC,GAAGJ,IAAA,CAAAF,SAAA;EAAAM,QAAA,EAAGA;AAAQ,CAAG,CAAC;AAEjD,MAAMC,0BAA0B,GAAGT,IAAI,CAACK,kBAAkB,CAAC;AAC3DI,0BAA0B,CAACC,WAAW,GAAG,oBAAoB;AAE7D,SAASD,0BAA0B,IAAIJ,kBAAkB","ignoreList":[]}

package/dist/esm/Dialog.js

@@ -65,6 +65,7 @@ const Dialog = ({
   const actionButtons = [tertiaryCallToActionComponent || callToActionLastComponent, secondaryCallToActionComponent || callToActionSecondComponent, primaryCallToActionComponent || callToActionFirstComponent].filter(Boolean);
   const handleCloseButtonClick = useCallback(event => onClose(event, "closeButtonClick"), [onClose]);
   return _jsx(FullScreenOverlay, {
+    overlayType: "dialog",
     children: _jsxs(_Dialog, {
       "aria-labelledby": dialogLabelId,
       "data-se": testId,

package/dist/esm/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","names":["cloneElement","memo","useCallback","useEffect","useRef","useState","Button","FullScreenOverlay","useTranslation","CloseIcon","useUniqueId","jsx","_jsx","jsxs","_jsxs","Dialog","primaryCallToActionComponent","secondaryCallToActionComponent","tertiaryCallToActionComponent","callToActionFirstComponent","callToActionSecondComponent","callToActionLastComponent","children","isOpen","onClose","testId","title","translate","t","isContentScrollable","setIsContentScrollable","dialogContentRef","dialogTitleId","dialogLabelId","frameId","handleContentScroll","dialogContentElement","current","cancelAnimationFrame","scrollHeight","clientHeight","requestAnimationFrame","content","_DialogContentText","actionButtons","filter","Boolean","handleCloseButtonClick","event","_Dialog","open","_DialogTitle","id","ariaLabel","onClick","size","startIcon","variant","_DialogContent","tabIndex","dividers","ref","length","_DialogActions","map","actionButton","index","key","MemoizedDialog","displayName"],"sources":["../../src/Dialog.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  Dialog as MuiDialog,\n  DialogActions as MuiDialogActions,\n  DialogContent as MuiDialogContent,\n  DialogContentText as MuiDialogContentText,\n  DialogProps as MuiDialogProps,\n  DialogTitle as MuiDialogTitle,\n} from \"@mui/material\";\nimport {\n  cloneElement,\n  memo,\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport type { HtmlProps } from \"./HtmlProps.js\";\n\nimport { Button, ButtonProps } from \"./Buttons/Button.js\";\nimport { FullScreenOverlay } from \"./FullScreenOverlay.js\";\nimport { useTranslation } from \"./i18n.generated/i18n.js\";\nimport { CloseIcon } from \"./icons.generated/index.js\";\nimport { useUniqueId } from \"./useUniqueId.js\";\n\ntype MuiOnCloseEvent = Parameters<Required<MuiDialogProps>[\"onClose\"]>[0];\ntype MuiOnCloseReason = Parameters<Required<MuiDialogProps>[\"onClose\"]>[1];\nexport type DialogOnCloseReason = MuiOnCloseReason | \"closeButtonClick\";\n\nexport type DialogProps = {\n  /**\n   * @deprecated `aria-label` for close button comes from translation file\n   */\n  ariaLabel?: string;\n\n  /**\n   * @deprecated Will be removed in a future Odyssey version. Use `primaryCallToActionComponent` instead.\n   */\n  callToActionFirstComponent?: ReactElement<typeof Button>;\n  /**\n   * @deprecated Will be removed in a future Odyssey version. Use `tertiaryCallToActionComponent` instead.\n   */\n  callToActionLastComponent?: ReactElement<typeof Button>;\n  /**\n   * @deprecated Will be removed in a future Odyssey version. Use `secondaryCallToActionComponent` instead.\n   */\n  callToActionSecondComponent?: ReactElement<typeof Button>;\n  /**\n   * The content of the Dialog. May be a `string` or any other `ReactNode` or array of `ReactNode`s.\n   */\n  children: ReactNode;\n  /**\n   * When set to `true`, the Dialog will be visible.\n   */\n  isOpen: boolean;\n  /**\n   * Callback that controls what happens when the Dialog is dismissed.\n   */\n  onClose: (event: MuiOnCloseEvent, reason: DialogOnCloseReason) => void;\n  /**\n   * An optional Button object to be situated in the Dialog footer as the primary call to action.\n   */\n  primaryCallToActionComponent?: ReactElement<typeof Button>;\n\n  /**\n   * An optional Button object to be situated in the Dialog footer as the secondary call to action, alongside the `primaryCallToActionComponent`.\n   */\n  secondaryCallToActionComponent?: ReactElement<typeof Button>;\n\n  /**\n   * An optional Button object to be situated in the Dialog footer as the tertiary call to action, alongside the other `callToAction` components.\n   */\n  tertiaryCallToActionComponent?: ReactElement<typeof Button>;\n\n  /**\n   * The title of the Dialog.\n   */\n  title: string;\n} & Pick<HtmlProps, \"testId\" | \"translate\">;\n\nconst Dialog = ({\n  primaryCallToActionComponent,\n  secondaryCallToActionComponent,\n  tertiaryCallToActionComponent,\n  callToActionFirstComponent,\n  callToActionSecondComponent,\n  callToActionLastComponent,\n  children,\n  isOpen,\n  onClose,\n  testId,\n  title,\n  translate,\n}: DialogProps) => {\n  const { t } = useTranslation();\n  const [isContentScrollable, setIsContentScrollable] = useState(false);\n  const dialogContentRef = useRef<HTMLDivElement>(null);\n  const dialogTitleId = useUniqueId();\n  const dialogLabelId = useUniqueId();\n\n  useEffect(() => {\n    let frameId: number;\n\n    const handleContentScroll = () => {\n      const dialogContentElement = dialogContentRef.current;\n      if (dialogContentElement) {\n        cancelAnimationFrame(frameId);\n        setIsContentScrollable(\n          dialogContentElement.scrollHeight > dialogContentElement.clientHeight,\n        );\n      }\n      frameId = requestAnimationFrame(handleContentScroll);\n    };\n\n    if (isOpen) {\n      frameId = requestAnimationFrame(handleContentScroll);\n    }\n\n    return () => {\n      cancelAnimationFrame(frameId);\n    };\n  }, [isOpen]);\n\n  const content =\n    typeof children === \"string\" ? (\n      <MuiDialogContentText>{children}</MuiDialogContentText>\n    ) : (\n      children\n    );\n\n  // Prioritize new action button format (|| used as a fallback)\n  const actionButtons = [\n    tertiaryCallToActionComponent || callToActionLastComponent,\n    secondaryCallToActionComponent || callToActionSecondComponent,\n    primaryCallToActionComponent || callToActionFirstComponent,\n  ].filter(Boolean);\n\n  const handleCloseButtonClick = useCallback<\n    NonNullable<ButtonProps[\"onClick\"]>\n  >((event) => onClose(event, \"closeButtonClick\"), [onClose]);\n\n  return (\n    <FullScreenOverlay>\n      <MuiDialog\n        aria-labelledby={dialogLabelId}\n        data-se={testId}\n        onClose={onClose}\n        open={isOpen}\n      >\n        <MuiDialogTitle\n          id={dialogTitleId} // We need to explicitly unset `id` for MUI to automatically set it based on the `aria-labelledby` prop passed to `MuiDialog`\n          translate={translate}\n        >\n          <span id={dialogLabelId}>{title}</span>\n          <Button\n            ariaLabel={t(\"close.text\")}\n            onClick={handleCloseButtonClick}\n            size=\"small\"\n            startIcon={<CloseIcon />}\n            variant=\"floating\"\n          />\n        </MuiDialogTitle>\n\n        <MuiDialogContent\n          {...(isContentScrollable && {\n            // Sets tabIndex on content element if scrollable so content is easier to navigate with the keyboard\n            tabIndex: 0,\n          })}\n          dividers={isContentScrollable}\n          ref={dialogContentRef}\n        >\n          {content}\n        </MuiDialogContent>\n\n        {actionButtons.length > 0 && (\n          <MuiDialogActions>\n            {actionButtons.map((actionButton, index) =>\n              actionButton ? cloneElement(actionButton, { key: index }) : null,\n            )}\n          </MuiDialogActions>\n        )}\n      </MuiDialog>\n    </FullScreenOverlay>\n  );\n};\n\nconst MemoizedDialog = memo(Dialog);\nMemoizedDialog.displayName = \"Dialog\";\n\nexport { MemoizedDialog as Dialog };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Dialog.js","names":["cloneElement","memo","useCallback","useEffect","useRef","useState","Button","FullScreenOverlay","useTranslation","CloseIcon","useUniqueId","jsx","_jsx","jsxs","_jsxs","Dialog","primaryCallToActionComponent","secondaryCallToActionComponent","tertiaryCallToActionComponent","callToActionFirstComponent","callToActionSecondComponent","callToActionLastComponent","children","isOpen","onClose","testId","title","translate","t","isContentScrollable","setIsContentScrollable","dialogContentRef","dialogTitleId","dialogLabelId","frameId","handleContentScroll","dialogContentElement","current","cancelAnimationFrame","scrollHeight","clientHeight","requestAnimationFrame","content","_DialogContentText","actionButtons","filter","Boolean","handleCloseButtonClick","event","overlayType","_Dialog","open","_DialogTitle","id","ariaLabel","onClick","size","startIcon","variant","_DialogContent","tabIndex","dividers","ref","length","_DialogActions","map","actionButton","index","key","MemoizedDialog","displayName"],"sources":["../../src/Dialog.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  Dialog as MuiDialog,\n  DialogActions as MuiDialogActions,\n  DialogContent as MuiDialogContent,\n  DialogContentText as MuiDialogContentText,\n  DialogProps as MuiDialogProps,\n  DialogTitle as MuiDialogTitle,\n} from \"@mui/material\";\nimport {\n  cloneElement,\n  memo,\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport type { HtmlProps } from \"./HtmlProps.js\";\n\nimport { Button, ButtonProps } from \"./Buttons/Button.js\";\nimport { FullScreenOverlay } from \"./FullScreenOverlay.js\";\nimport { useTranslation } from \"./i18n.generated/i18n.js\";\nimport { CloseIcon } from \"./icons.generated/index.js\";\nimport { useUniqueId } from \"./useUniqueId.js\";\n\ntype MuiOnCloseEvent = Parameters<Required<MuiDialogProps>[\"onClose\"]>[0];\ntype MuiOnCloseReason = Parameters<Required<MuiDialogProps>[\"onClose\"]>[1];\nexport type DialogOnCloseReason = MuiOnCloseReason | \"closeButtonClick\";\n\nexport type DialogProps = {\n  /**\n   * @deprecated `aria-label` for close button comes from translation file\n   */\n  ariaLabel?: string;\n\n  /**\n   * @deprecated Will be removed in a future Odyssey version. Use `primaryCallToActionComponent` instead.\n   */\n  callToActionFirstComponent?: ReactElement<typeof Button>;\n  /**\n   * @deprecated Will be removed in a future Odyssey version. Use `tertiaryCallToActionComponent` instead.\n   */\n  callToActionLastComponent?: ReactElement<typeof Button>;\n  /**\n   * @deprecated Will be removed in a future Odyssey version. Use `secondaryCallToActionComponent` instead.\n   */\n  callToActionSecondComponent?: ReactElement<typeof Button>;\n  /**\n   * The content of the Dialog. May be a `string` or any other `ReactNode` or array of `ReactNode`s.\n   */\n  children: ReactNode;\n  /**\n   * When set to `true`, the Dialog will be visible.\n   */\n  isOpen: boolean;\n  /**\n   * Callback that controls what happens when the Dialog is dismissed.\n   */\n  onClose: (event: MuiOnCloseEvent, reason: DialogOnCloseReason) => void;\n  /**\n   * An optional Button object to be situated in the Dialog footer as the primary call to action.\n   */\n  primaryCallToActionComponent?: ReactElement<typeof Button>;\n\n  /**\n   * An optional Button object to be situated in the Dialog footer as the secondary call to action, alongside the `primaryCallToActionComponent`.\n   */\n  secondaryCallToActionComponent?: ReactElement<typeof Button>;\n\n  /**\n   * An optional Button object to be situated in the Dialog footer as the tertiary call to action, alongside the other `callToAction` components.\n   */\n  tertiaryCallToActionComponent?: ReactElement<typeof Button>;\n\n  /**\n   * The title of the Dialog.\n   */\n  title: string;\n} & Pick<HtmlProps, \"testId\" | \"translate\">;\n\nconst Dialog = ({\n  primaryCallToActionComponent,\n  secondaryCallToActionComponent,\n  tertiaryCallToActionComponent,\n  callToActionFirstComponent,\n  callToActionSecondComponent,\n  callToActionLastComponent,\n  children,\n  isOpen,\n  onClose,\n  testId,\n  title,\n  translate,\n}: DialogProps) => {\n  const { t } = useTranslation();\n  const [isContentScrollable, setIsContentScrollable] = useState(false);\n  const dialogContentRef = useRef<HTMLDivElement>(null);\n  const dialogTitleId = useUniqueId();\n  const dialogLabelId = useUniqueId();\n\n  useEffect(() => {\n    let frameId: number;\n\n    const handleContentScroll = () => {\n      const dialogContentElement = dialogContentRef.current;\n      if (dialogContentElement) {\n        cancelAnimationFrame(frameId);\n        setIsContentScrollable(\n          dialogContentElement.scrollHeight > dialogContentElement.clientHeight,\n        );\n      }\n      frameId = requestAnimationFrame(handleContentScroll);\n    };\n\n    if (isOpen) {\n      frameId = requestAnimationFrame(handleContentScroll);\n    }\n\n    return () => {\n      cancelAnimationFrame(frameId);\n    };\n  }, [isOpen]);\n\n  const content =\n    typeof children === \"string\" ? (\n      <MuiDialogContentText>{children}</MuiDialogContentText>\n    ) : (\n      children\n    );\n\n  // Prioritize new action button format (|| used as a fallback)\n  const actionButtons = [\n    tertiaryCallToActionComponent || callToActionLastComponent,\n    secondaryCallToActionComponent || callToActionSecondComponent,\n    primaryCallToActionComponent || callToActionFirstComponent,\n  ].filter(Boolean);\n\n  const handleCloseButtonClick = useCallback<\n    NonNullable<ButtonProps[\"onClick\"]>\n  >((event) => onClose(event, \"closeButtonClick\"), [onClose]);\n\n  return (\n    <FullScreenOverlay overlayType=\"dialog\">\n      <MuiDialog\n        aria-labelledby={dialogLabelId}\n        data-se={testId}\n        onClose={onClose}\n        open={isOpen}\n      >\n        <MuiDialogTitle\n          id={dialogTitleId} // We need to explicitly unset `id` for MUI to automatically set it based on the `aria-labelledby` prop passed to `MuiDialog`\n          translate={translate}\n        >\n          <span id={dialogLabelId}>{title}</span>\n          <Button\n            ariaLabel={t(\"close.text\")}\n            onClick={handleCloseButtonClick}\n            size=\"small\"\n            startIcon={<CloseIcon />}\n            variant=\"floating\"\n          />\n        </MuiDialogTitle>\n\n        <MuiDialogContent\n          {...(isContentScrollable && {\n            // Sets tabIndex on content element if scrollable so content is easier to navigate with the keyboard\n            tabIndex: 0,\n          })}\n          dividers={isContentScrollable}\n          ref={dialogContentRef}\n        >\n          {content}\n        </MuiDialogContent>\n\n        {actionButtons.length > 0 && (\n          <MuiDialogActions>\n            {actionButtons.map((actionButton, index) =>\n              actionButton ? cloneElement(actionButton, { key: index }) : null,\n            )}\n          </MuiDialogActions>\n        )}\n      </MuiDialog>\n    </FullScreenOverlay>\n  );\n};\n\nconst MemoizedDialog = memo(Dialog);\nMemoizedDialog.displayName = \"Dialog\";\n\nexport { MemoizedDialog as Dialog };\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/Drawer.js

@@ -180,6 +180,7 @@ const Drawer = ({
     })
   }), [anchorDirection, ariaLabel, children, dividersVisible, handleCloseButtonClick, hasFooter, isContentScrollable, isOpen, odysseyDesignTokens, onClose, primaryCallToActionComponent, secondaryCallToActionComponent, tertiaryCallToActionComponent, testId, title, translate, variant]);
   return variant === "temporary" ? _jsx(FullScreenOverlay, {
+    overlayType: "drawer",
     children: muiDrawerComponent
   }) : muiDrawerComponent;
 };

package/dist/esm/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","names":["styled","memo","useCallback","useEffect","useMemo","useRef","useState","Button","FullScreenOverlay","useTranslation","CloseIcon","useOdysseyDesignTokens","Heading5","jsx","_jsx","jsxs","_jsxs","variantValues","DrawerHeader","shouldForwardProp","prop","odysseyDesignTokens","Spacing4","Spacing5","HueNeutral900","HueNeutralWhite","hasDividers","HueNeutral200","DrawerContentWrapper","display","gridTemplateAreas","gridTemplateRows","overflow","DrawerContent","DrawerFooter","Drawer","ariaLabel","children","hasDividersProp","isOpen","onClose","primaryCallToActionComponent","secondaryCallToActionComponent","showDividers","tertiaryCallToActionComponent","testId","title","translate","variant","isContentScrollable","setIsContentScrollable","drawerContentRef","i18n","anchorDirection","dir","frameId","handleContentScroll","drawerContentElement","current","cancelAnimationFrame","scrollHeight","clientHeight","requestAnimationFrame","dividersVisible","hasFooter","handleCloseButtonClick","event","muiDrawerComponent","_Drawer","anchor","open","sx","transition","onClick","size","startIcon","tabIndex","ref","MemoizedDrawer","displayName"],"sources":["../../src/Drawer.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  Drawer as MuiDrawer,\n  DrawerProps as MuiDrawerProps,\n} from \"@mui/material\";\nimport {\n  memo,\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport type { HtmlProps } from \"./HtmlProps.js\";\n\nimport { Button, ButtonProps } from \"./Buttons/Button.js\";\nimport { FullScreenOverlay } from \"./FullScreenOverlay.js\";\nimport { useTranslation } from \"./i18n.generated/i18n.js\";\nimport { CloseIcon } from \"./icons.generated/index.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"./OdysseyDesignTokensContext.js\";\nimport { Heading5 } from \"./Typography.js\";\n\ntype MuiOnCloseEvent = Parameters<Required<MuiDrawerProps>[\"onClose\"]>[0];\ntype MuiOnCloseReason = Parameters<Required<MuiDrawerProps>[\"onClose\"]>[1];\nexport type DrawerOnCloseReason = MuiOnCloseReason | \"closeButtonClick\";\n\nexport const variantValues = [\"temporary\", \"persistent\"] as const;\n\nexport type DrawerProps = {\n  /**\n   * The content of the Drawer. May be a `string` or any other `ReactNode` or array of `ReactNode`s.\n   */\n  children?: ReactNode;\n  /**\n   * When set to `true`, the Drawer will be visible.\n   */\n  isOpen?: boolean;\n  /**\n   * Callback that controls what happens when the Drawer is dismissed\n   */\n  onClose: (event: MuiOnCloseEvent, reason: DrawerOnCloseReason) => void;\n  /**\n   * An optional Button object to be situated in the Drawerfooter. Should almost always be of variant `primary`.\n   */\n  primaryCallToActionComponent?: ReactElement<typeof Button>;\n  /**\n   * An optional Button object to be situated in the Drawer footer, alongside the `callToActionPrimaryComponent`.\n   */\n  secondaryCallToActionComponent?: ReactElement<typeof Button>;\n  /**\n   * An optional Button object to be situated in the Drawer footer, alongside the other two `callToAction` components.\n   */\n  tertiaryCallToActionComponent?: ReactElement<typeof Button>;\n  /**\n   * The title of the Drawer\n   */\n  title?: string;\n  /**\n   * Type of Drawer\n   */\n  variant?: (typeof variantValues)[number];\n} & Pick<HtmlProps, \"ariaLabel\" | \"testId\" | \"translate\"> &\n  (\n    | {\n        /**\n         * Shows divider lines separating header, content, and footer (if using action buttons).\n         */\n        hasDividers?: never;\n        /**\n         * @deprecated use `hasDividers` instead.\n         *\n         * Shows divider lines separating header, content, and footer (if using action buttons).\n         */\n        showDividers: boolean;\n      }\n    | {\n        /**\n         * Shows divider lines separating header, content, and footer (if using action buttons).\n         */\n        hasDividers: boolean;\n        /**\n         * @deprecated use `hasDividers` instead.\n         *\n         * Shows divider lines separating header, content, and footer (if using action buttons).\n         */\n        showDividers?: never;\n      }\n  );\n\ntype DrawerStyleProps = {\n  hasDividers: boolean;\n  odysseyDesignTokens: DesignTokens;\n};\n\nconst DrawerHeader = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"hasDividers\",\n})<DrawerStyleProps>`\n  grid-area: header;\n  position: sticky;\n  top: 0;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin: 0;\n  padding: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing4}\n    ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing5};\n  color: ${({ odysseyDesignTokens }) => odysseyDesignTokens.HueNeutral900};\n  background-color: ${({ odysseyDesignTokens }) =>\n    odysseyDesignTokens.HueNeutralWhite};\n  border-bottom: ${({ hasDividers, odysseyDesignTokens }) =>\n    hasDividers ? `1px solid ${odysseyDesignTokens.HueNeutral200}` : \"none\"};\n`;\n\nconst DrawerContentWrapper = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>({\n  display: \"grid\",\n  gridTemplateAreas: `\n    \"header\"\n    \"content\"\n    \"footer\"\n  `,\n  gridTemplateRows: \"auto 1fr auto\",\n  overflow: \"hidden\",\n});\n\nconst DrawerContent = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"hasDividers\",\n})<DrawerStyleProps>`\n  grid-area: content;\n  overflow-y: auto;\n  padding: ${({ hasDividers, odysseyDesignTokens }) =>\n    hasDividers\n      ? `${odysseyDesignTokens.Spacing5}`\n      : `0 ${odysseyDesignTokens.Spacing5}`};\n`;\n\nconst DrawerFooter = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"hasDividers\",\n})<DrawerStyleProps>`\n  grid-area: footer;\n  position: sticky;\n  bottom: 0;\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  align-content: center;\n  padding: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing4};\n  border-top: ${({ hasDividers, odysseyDesignTokens }) =>\n    hasDividers ? `1px solid ${odysseyDesignTokens.HueNeutral200}` : \"none\"};\n  background-color: ${({ odysseyDesignTokens }) =>\n    odysseyDesignTokens.HueNeutralWhite};\n`;\n\nconst Drawer = ({\n  ariaLabel,\n  children,\n  hasDividers: hasDividersProp = false,\n  isOpen,\n  onClose,\n  primaryCallToActionComponent,\n  secondaryCallToActionComponent,\n  showDividers = false,\n  tertiaryCallToActionComponent,\n  testId,\n  title,\n  translate,\n  variant = \"temporary\",\n}: DrawerProps) => {\n  const [isContentScrollable, setIsContentScrollable] = useState(false);\n  const drawerContentRef = useRef<HTMLDivElement>(null);\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const hasDividers = hasDividersProp || showDividers;\n\n  //If RTL is set in the theme, align the drawer on the left side of the screen, uses right by default.\n  const { i18n } = useTranslation();\n  const anchorDirection = i18n.dir() === \"rtl\" ? \"left\" : \"right\";\n\n  useEffect(() => {\n    let frameId: number;\n\n    const handleContentScroll = () => {\n      const drawerContentElement = drawerContentRef.current;\n      if (drawerContentElement) {\n        cancelAnimationFrame(frameId);\n        setIsContentScrollable(\n          drawerContentElement.scrollHeight > drawerContentElement.clientHeight,\n        );\n      }\n      frameId = requestAnimationFrame(handleContentScroll);\n    };\n\n    if (isOpen) {\n      frameId = requestAnimationFrame(handleContentScroll);\n    }\n\n    return () => {\n      cancelAnimationFrame(frameId);\n    };\n  }, [isOpen]);\n\n  const dividersVisible = useMemo(() => {\n    return hasDividers || isContentScrollable;\n  }, [hasDividers, isContentScrollable]);\n\n  const hasFooter = useMemo(\n    () =>\n      primaryCallToActionComponent ||\n      secondaryCallToActionComponent ||\n      tertiaryCallToActionComponent,\n    [\n      primaryCallToActionComponent,\n      secondaryCallToActionComponent,\n      tertiaryCallToActionComponent,\n    ],\n  );\n\n  const handleCloseButtonClick = useCallback<\n    NonNullable<ButtonProps[\"onClick\"]>\n  >((event) => onClose(event, \"closeButtonClick\"), [onClose]);\n\n  const muiDrawerComponent = useMemo(\n    () => (\n      <MuiDrawer\n        anchor={anchorDirection}\n        data-se={testId}\n        onClose={onClose}\n        open={isOpen}\n        sx={{\n          //Overrides default MUI inline style\n          ...(variant === \"persistent\" && {\n            \"& .MuiDrawer-paper\": {\n              transition: \"none\",\n            },\n          }),\n        }}\n        variant={variant}\n      >\n        <DrawerContentWrapper odysseyDesignTokens={odysseyDesignTokens}>\n          <DrawerHeader\n            hasDividers={dividersVisible}\n            odysseyDesignTokens={odysseyDesignTokens}\n            translate={translate}\n          >\n            <Heading5>{title}</Heading5>\n            <Button\n              ariaLabel={ariaLabel}\n              onClick={handleCloseButtonClick}\n              size=\"small\"\n              startIcon={<CloseIcon />}\n              variant=\"floating\"\n            />\n          </DrawerHeader>\n          <DrawerContent\n            {...(isContentScrollable && {\n              //Sets tabIndex on content element if scrollable so content is easier to navigate with the keyboard\n              tabIndex: 0,\n            })}\n            hasDividers={dividersVisible}\n            odysseyDesignTokens={odysseyDesignTokens}\n            ref={drawerContentRef}\n          >\n            {children}\n          </DrawerContent>\n          {hasFooter && (\n            <DrawerFooter\n              hasDividers={dividersVisible}\n              odysseyDesignTokens={odysseyDesignTokens}\n            >\n              {tertiaryCallToActionComponent}\n              {secondaryCallToActionComponent}\n              {primaryCallToActionComponent}\n            </DrawerFooter>\n          )}\n        </DrawerContentWrapper>\n      </MuiDrawer>\n    ),\n    [\n      anchorDirection,\n      ariaLabel,\n      children,\n      dividersVisible,\n      handleCloseButtonClick,\n      hasFooter,\n      isContentScrollable,\n      isOpen,\n      odysseyDesignTokens,\n      onClose,\n      primaryCallToActionComponent,\n      secondaryCallToActionComponent,\n      tertiaryCallToActionComponent,\n      testId,\n      title,\n      translate,\n      variant,\n    ],\n  );\n\n  return variant === \"temporary\" ? (\n    <FullScreenOverlay>{muiDrawerComponent}</FullScreenOverlay>\n  ) : (\n    muiDrawerComponent\n  );\n};\n\nconst MemoizedDrawer = memo(Drawer);\nMemoizedDrawer.displayName = \"Drawer\";\n\nexport { MemoizedDrawer as Drawer };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Drawer.js","names":["styled","memo","useCallback","useEffect","useMemo","useRef","useState","Button","FullScreenOverlay","useTranslation","CloseIcon","useOdysseyDesignTokens","Heading5","jsx","_jsx","jsxs","_jsxs","variantValues","DrawerHeader","shouldForwardProp","prop","odysseyDesignTokens","Spacing4","Spacing5","HueNeutral900","HueNeutralWhite","hasDividers","HueNeutral200","DrawerContentWrapper","display","gridTemplateAreas","gridTemplateRows","overflow","DrawerContent","DrawerFooter","Drawer","ariaLabel","children","hasDividersProp","isOpen","onClose","primaryCallToActionComponent","secondaryCallToActionComponent","showDividers","tertiaryCallToActionComponent","testId","title","translate","variant","isContentScrollable","setIsContentScrollable","drawerContentRef","i18n","anchorDirection","dir","frameId","handleContentScroll","drawerContentElement","current","cancelAnimationFrame","scrollHeight","clientHeight","requestAnimationFrame","dividersVisible","hasFooter","handleCloseButtonClick","event","muiDrawerComponent","_Drawer","anchor","open","sx","transition","onClick","size","startIcon","tabIndex","ref","overlayType","MemoizedDrawer","displayName"],"sources":["../../src/Drawer.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  Drawer as MuiDrawer,\n  DrawerProps as MuiDrawerProps,\n} from \"@mui/material\";\nimport {\n  memo,\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport type { HtmlProps } from \"./HtmlProps.js\";\n\nimport { Button, ButtonProps } from \"./Buttons/Button.js\";\nimport { FullScreenOverlay } from \"./FullScreenOverlay.js\";\nimport { useTranslation } from \"./i18n.generated/i18n.js\";\nimport { CloseIcon } from \"./icons.generated/index.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"./OdysseyDesignTokensContext.js\";\nimport { Heading5 } from \"./Typography.js\";\n\ntype MuiOnCloseEvent = Parameters<Required<MuiDrawerProps>[\"onClose\"]>[0];\ntype MuiOnCloseReason = Parameters<Required<MuiDrawerProps>[\"onClose\"]>[1];\nexport type DrawerOnCloseReason = MuiOnCloseReason | \"closeButtonClick\";\n\nexport const variantValues = [\"temporary\", \"persistent\"] as const;\n\nexport type DrawerProps = {\n  /**\n   * The content of the Drawer. May be a `string` or any other `ReactNode` or array of `ReactNode`s.\n   */\n  children?: ReactNode;\n  /**\n   * When set to `true`, the Drawer will be visible.\n   */\n  isOpen?: boolean;\n  /**\n   * Callback that controls what happens when the Drawer is dismissed\n   */\n  onClose: (event: MuiOnCloseEvent, reason: DrawerOnCloseReason) => void;\n  /**\n   * An optional Button object to be situated in the Drawerfooter. Should almost always be of variant `primary`.\n   */\n  primaryCallToActionComponent?: ReactElement<typeof Button>;\n  /**\n   * An optional Button object to be situated in the Drawer footer, alongside the `callToActionPrimaryComponent`.\n   */\n  secondaryCallToActionComponent?: ReactElement<typeof Button>;\n  /**\n   * An optional Button object to be situated in the Drawer footer, alongside the other two `callToAction` components.\n   */\n  tertiaryCallToActionComponent?: ReactElement<typeof Button>;\n  /**\n   * The title of the Drawer\n   */\n  title?: string;\n  /**\n   * Type of Drawer\n   */\n  variant?: (typeof variantValues)[number];\n} & Pick<HtmlProps, \"ariaLabel\" | \"testId\" | \"translate\"> &\n  (\n    | {\n        /**\n         * Shows divider lines separating header, content, and footer (if using action buttons).\n         */\n        hasDividers?: never;\n        /**\n         * @deprecated use `hasDividers` instead.\n         *\n         * Shows divider lines separating header, content, and footer (if using action buttons).\n         */\n        showDividers: boolean;\n      }\n    | {\n        /**\n         * Shows divider lines separating header, content, and footer (if using action buttons).\n         */\n        hasDividers: boolean;\n        /**\n         * @deprecated use `hasDividers` instead.\n         *\n         * Shows divider lines separating header, content, and footer (if using action buttons).\n         */\n        showDividers?: never;\n      }\n  );\n\ntype DrawerStyleProps = {\n  hasDividers: boolean;\n  odysseyDesignTokens: DesignTokens;\n};\n\nconst DrawerHeader = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"hasDividers\",\n})<DrawerStyleProps>`\n  grid-area: header;\n  position: sticky;\n  top: 0;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin: 0;\n  padding: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing4}\n    ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing5};\n  color: ${({ odysseyDesignTokens }) => odysseyDesignTokens.HueNeutral900};\n  background-color: ${({ odysseyDesignTokens }) =>\n    odysseyDesignTokens.HueNeutralWhite};\n  border-bottom: ${({ hasDividers, odysseyDesignTokens }) =>\n    hasDividers ? `1px solid ${odysseyDesignTokens.HueNeutral200}` : \"none\"};\n`;\n\nconst DrawerContentWrapper = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>({\n  display: \"grid\",\n  gridTemplateAreas: `\n    \"header\"\n    \"content\"\n    \"footer\"\n  `,\n  gridTemplateRows: \"auto 1fr auto\",\n  overflow: \"hidden\",\n});\n\nconst DrawerContent = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"hasDividers\",\n})<DrawerStyleProps>`\n  grid-area: content;\n  overflow-y: auto;\n  padding: ${({ hasDividers, odysseyDesignTokens }) =>\n    hasDividers\n      ? `${odysseyDesignTokens.Spacing5}`\n      : `0 ${odysseyDesignTokens.Spacing5}`};\n`;\n\nconst DrawerFooter = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"hasDividers\",\n})<DrawerStyleProps>`\n  grid-area: footer;\n  position: sticky;\n  bottom: 0;\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  align-content: center;\n  padding: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing4};\n  border-top: ${({ hasDividers, odysseyDesignTokens }) =>\n    hasDividers ? `1px solid ${odysseyDesignTokens.HueNeutral200}` : \"none\"};\n  background-color: ${({ odysseyDesignTokens }) =>\n    odysseyDesignTokens.HueNeutralWhite};\n`;\n\nconst Drawer = ({\n  ariaLabel,\n  children,\n  hasDividers: hasDividersProp = false,\n  isOpen,\n  onClose,\n  primaryCallToActionComponent,\n  secondaryCallToActionComponent,\n  showDividers = false,\n  tertiaryCallToActionComponent,\n  testId,\n  title,\n  translate,\n  variant = \"temporary\",\n}: DrawerProps) => {\n  const [isContentScrollable, setIsContentScrollable] = useState(false);\n  const drawerContentRef = useRef<HTMLDivElement>(null);\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const hasDividers = hasDividersProp || showDividers;\n\n  //If RTL is set in the theme, align the drawer on the left side of the screen, uses right by default.\n  const { i18n } = useTranslation();\n  const anchorDirection = i18n.dir() === \"rtl\" ? \"left\" : \"right\";\n\n  useEffect(() => {\n    let frameId: number;\n\n    const handleContentScroll = () => {\n      const drawerContentElement = drawerContentRef.current;\n      if (drawerContentElement) {\n        cancelAnimationFrame(frameId);\n        setIsContentScrollable(\n          drawerContentElement.scrollHeight > drawerContentElement.clientHeight,\n        );\n      }\n      frameId = requestAnimationFrame(handleContentScroll);\n    };\n\n    if (isOpen) {\n      frameId = requestAnimationFrame(handleContentScroll);\n    }\n\n    return () => {\n      cancelAnimationFrame(frameId);\n    };\n  }, [isOpen]);\n\n  const dividersVisible = useMemo(() => {\n    return hasDividers || isContentScrollable;\n  }, [hasDividers, isContentScrollable]);\n\n  const hasFooter = useMemo(\n    () =>\n      primaryCallToActionComponent ||\n      secondaryCallToActionComponent ||\n      tertiaryCallToActionComponent,\n    [\n      primaryCallToActionComponent,\n      secondaryCallToActionComponent,\n      tertiaryCallToActionComponent,\n    ],\n  );\n\n  const handleCloseButtonClick = useCallback<\n    NonNullable<ButtonProps[\"onClick\"]>\n  >((event) => onClose(event, \"closeButtonClick\"), [onClose]);\n\n  const muiDrawerComponent = useMemo(\n    () => (\n      <MuiDrawer\n        anchor={anchorDirection}\n        data-se={testId}\n        onClose={onClose}\n        open={isOpen}\n        sx={{\n          //Overrides default MUI inline style\n          ...(variant === \"persistent\" && {\n            \"& .MuiDrawer-paper\": {\n              transition: \"none\",\n            },\n          }),\n        }}\n        variant={variant}\n      >\n        <DrawerContentWrapper odysseyDesignTokens={odysseyDesignTokens}>\n          <DrawerHeader\n            hasDividers={dividersVisible}\n            odysseyDesignTokens={odysseyDesignTokens}\n            translate={translate}\n          >\n            <Heading5>{title}</Heading5>\n            <Button\n              ariaLabel={ariaLabel}\n              onClick={handleCloseButtonClick}\n              size=\"small\"\n              startIcon={<CloseIcon />}\n              variant=\"floating\"\n            />\n          </DrawerHeader>\n          <DrawerContent\n            {...(isContentScrollable && {\n              //Sets tabIndex on content element if scrollable so content is easier to navigate with the keyboard\n              tabIndex: 0,\n            })}\n            hasDividers={dividersVisible}\n            odysseyDesignTokens={odysseyDesignTokens}\n            ref={drawerContentRef}\n          >\n            {children}\n          </DrawerContent>\n          {hasFooter && (\n            <DrawerFooter\n              hasDividers={dividersVisible}\n              odysseyDesignTokens={odysseyDesignTokens}\n            >\n              {tertiaryCallToActionComponent}\n              {secondaryCallToActionComponent}\n              {primaryCallToActionComponent}\n            </DrawerFooter>\n          )}\n        </DrawerContentWrapper>\n      </MuiDrawer>\n    ),\n    [\n      anchorDirection,\n      ariaLabel,\n      children,\n      dividersVisible,\n      handleCloseButtonClick,\n      hasFooter,\n      isContentScrollable,\n      isOpen,\n      odysseyDesignTokens,\n      onClose,\n      primaryCallToActionComponent,\n      secondaryCallToActionComponent,\n      tertiaryCallToActionComponent,\n      testId,\n      title,\n      translate,\n      variant,\n    ],\n  );\n\n  return variant === \"temporary\" ? (\n    <FullScreenOverlay overlayType=\"drawer\">\n      {muiDrawerComponent}\n    </FullScreenOverlay>\n  ) : (\n    muiDrawerComponent\n  );\n};\n\nconst MemoizedDrawer = memo(Drawer);\nMemoizedDrawer.displayName = \"Drawer\";\n\nexport { MemoizedDrawer as Drawer };\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/FullScreenOverlay.js

@@ -15,7 +15,8 @@ import { useFullScreenOverlayContext } from "./FullScreenOverlayContext.js";
 import { OdysseyProvider } from "./OdysseyProvider.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const FullScreenOverlay = ({
-  children
+  children,
+  overlayType
 }) => {
   const {
     overlayEmotionRootElement,
@@ -24,7 +25,9 @@ const FullScreenOverlay = ({
   return _jsx(OdysseyProvider, {
     emotionRootElement: overlayEmotionRootElement,
     hasScopedCssBaseline: false,
+    hasTranslationProvider: false,
     hasWrapperElement: false,
+    overlayType: overlayType,
     shadowRootElement: overlayShadowRootElement,
     children: children
   });

package/dist/esm/FullScreenOverlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"FullScreenOverlay.js","names":["memo","useFullScreenOverlayContext","OdysseyProvider","jsx","_jsx","FullScreenOverlay","children","overlayEmotionRootElement","overlayShadowRootElement","emotionRootElement","hasScopedCssBaseline","hasWrapperElement","shadowRootElement","MemoizedFullScreenOverlay","displayName"],"sources":["../../src/FullScreenOverlay.tsx"],"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 { memo, type ReactNode } from \"react\";\n\nimport {\n  type FullScreenOverlayProviderProps,\n  useFullScreenOverlayContext,\n} from \"./FullScreenOverlayContext.js\";\nimport { OdysseyProvider } from \"./OdysseyProvider.js\";\n\nexport type FullScreenOverlayProps = {\n  children: ReactNode;\n};\n\nconst FullScreenOverlay = ({ children }: FullScreenOverlayProviderProps) => {\n  const { overlayEmotionRootElement, overlayShadowRootElement } =\n    useFullScreenOverlayContext();\n\n  return (\n    <OdysseyProvider\n      emotionRootElement={overlayEmotionRootElement}\n      hasScopedCssBaseline={false}\n      hasWrapperElement={false}\n      shadowRootElement={overlayShadowRootElement}\n    >\n      {children}\n    </OdysseyProvider>\n  );\n};\n\nconst MemoizedFullScreenOverlay = memo(FullScreenOverlay);\nMemoizedFullScreenOverlay.displayName = \"FullScreenOverlay\";\n\nexport { MemoizedFullScreenOverlay as FullScreenOverlay };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAwB,OAAO;AAE5C,SAEEC,2BAA2B,QACtB,+BAA+B;AACtC,SAASC,eAAe,QAAQ,sBAAsB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAMvD,MAAMC,iBAAiB,GAAGA,CAAC;EAAEC;AAAyC,CAAC,KAAK;EAC1E,MAAM;IAAEC,yBAAyB;IAAEC;EAAyB,CAAC,GAC3DP,2BAA2B,CAAC,CAAC;EAE/B,OACEG,IAAA,CAACF,eAAe;IACdO,kBAAkB,EAAEF,yBAA0B;IAC9CG,oBAAoB,EAAE,KAAM;IAC5BC,iBAAiB,EAAE,KAAM;IACzBC,iBAAiB,EAAEJ,wBAAyB;IAAAF,QAAA,EAE3CA;EAAQ,CACM,CAAC;AAEtB,CAAC;AAED,MAAMO,yBAAyB,GAAGb,IAAI,CAACK,iBAAiB,CAAC;AACzDQ,yBAAyB,CAACC,WAAW,GAAG,mBAAmB;AAE3D,SAASD,yBAAyB,IAAIR,iBAAiB","ignoreList":[]}
+{"version":3,"file":"FullScreenOverlay.js","names":["memo","useFullScreenOverlayContext","OdysseyProvider","jsx","_jsx","FullScreenOverlay","children","overlayType","overlayEmotionRootElement","overlayShadowRootElement","emotionRootElement","hasScopedCssBaseline","hasTranslationProvider","hasWrapperElement","shadowRootElement","MemoizedFullScreenOverlay","displayName"],"sources":["../../src/FullScreenOverlay.tsx"],"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 { memo, type ReactNode } from \"react\";\n\nimport {\n  type OverlayType,\n  useFullScreenOverlayContext,\n} from \"./FullScreenOverlayContext.js\";\nimport { OdysseyProvider } from \"./OdysseyProvider.js\";\n\nexport type FullScreenOverlayProps = {\n  children: ReactNode;\n  overlayType?: OverlayType;\n};\n\nconst FullScreenOverlay = ({\n  children,\n  overlayType,\n}: FullScreenOverlayProps) => {\n  const { overlayEmotionRootElement, overlayShadowRootElement } =\n    useFullScreenOverlayContext();\n\n  return (\n    <OdysseyProvider\n      emotionRootElement={overlayEmotionRootElement}\n      hasScopedCssBaseline={false}\n      hasTranslationProvider={false}\n      hasWrapperElement={false}\n      overlayType={overlayType}\n      shadowRootElement={overlayShadowRootElement}\n    >\n      {children}\n    </OdysseyProvider>\n  );\n};\n\nconst MemoizedFullScreenOverlay = memo(FullScreenOverlay);\nMemoizedFullScreenOverlay.displayName = \"FullScreenOverlay\";\n\nexport { MemoizedFullScreenOverlay as FullScreenOverlay };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAwB,OAAO;AAE5C,SAEEC,2BAA2B,QACtB,+BAA+B;AACtC,SAASC,eAAe,QAAQ,sBAAsB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAOvD,MAAMC,iBAAiB,GAAGA,CAAC;EACzBC,QAAQ;EACRC;AACsB,CAAC,KAAK;EAC5B,MAAM;IAAEC,yBAAyB;IAAEC;EAAyB,CAAC,GAC3DR,2BAA2B,CAAC,CAAC;EAE/B,OACEG,IAAA,CAACF,eAAe;IACdQ,kBAAkB,EAAEF,yBAA0B;IAC9CG,oBAAoB,EAAE,KAAM;IAC5BC,sBAAsB,EAAE,KAAM;IAC9BC,iBAAiB,EAAE,KAAM;IACzBN,WAAW,EAAEA,WAAY;IACzBO,iBAAiB,EAAEL,wBAAyB;IAAAH,QAAA,EAE3CA;EAAQ,CACM,CAAC;AAEtB,CAAC;AAED,MAAMS,yBAAyB,GAAGf,IAAI,CAACK,iBAAiB,CAAC;AACzDU,yBAAyB,CAACC,WAAW,GAAG,mBAAmB;AAE3D,SAASD,yBAAyB,IAAIV,iBAAiB","ignoreList":[]}

package/dist/esm/FullScreenOverlayContext.js

@@ -15,10 +15,16 @@ import { createShadowDomElements } from "./web-component/createShadowDomElements
 import { jsx as _jsx } from "react/jsx-runtime";
 export const FullScreenOverlayContext = createContext({});
 export const useFullScreenOverlayContext = () => useContext(FullScreenOverlayContext);
+export const OVERLAY_DATA_ATTRIBUTES = {
+  dialog: "data-odyssey-react-dialog-overlay-component",
+  drawer: "data-odyssey-react-drawer-overlay-component",
+  default: "data-odyssey-react-overlay-component"
+};
 const FullScreenOverlayProvider = ({
   children,
   hasShadowDom,
-  overlayParentElement: overlayParentElementProp
+  overlayParentElement: overlayParentElementProp,
+  overlayType = "default"
 }) => {
   const {
     overlayEmotionRootElement,
@@ -45,12 +51,13 @@ const FullScreenOverlayProvider = ({
   }, [hasShadowDom, overlayParentElementProp]);
   useEffect(() => {
     if (overlayParentElement) {
+      overlayParentElement.setAttribute(OVERLAY_DATA_ATTRIBUTES[overlayType], "");
       document.body.append(overlayParentElement);
     }
     return () => {
       overlayParentElement.remove();
     };
-  }, [overlayParentElement]);
+  }, [overlayParentElement, overlayType]);
   const providerValue = useMemo(() => ({
     overlayEmotionRootElement,
     overlayShadowRootElement

package/dist/esm/FullScreenOverlayContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"FullScreenOverlayContext.js","names":["createContext","memo","useContext","useEffect","useMemo","createShadowDomElements","jsx","_jsx","FullScreenOverlayContext","useFullScreenOverlayContext","FullScreenOverlayProvider","children","hasShadowDom","overlayParentElement","overlayParentElementProp","overlayEmotionRootElement","overlayShadowRootElement","document","createElement","emotionRootElement","shadowRootElement","undefined","body","append","remove","providerValue","Provider","value","MemoizedFullScreenOverlayProvider","displayName"],"sources":["../../src/FullScreenOverlayContext.tsx"],"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 {\n  createContext,\n  memo,\n  type ReactNode,\n  useContext,\n  useEffect,\n  useMemo,\n} from \"react\";\n\nimport { createShadowDomElements } from \"./web-component/createShadowDomElements.js\";\n\nexport type FullScreenOverlayContextType = {\n  overlayEmotionRootElement?: HTMLDivElement | HTMLElement;\n  overlayShadowRootElement?: HTMLDivElement | HTMLElement;\n};\n\nexport const FullScreenOverlayContext =\n  createContext<FullScreenOverlayContextType>({});\n\nexport const useFullScreenOverlayContext = () =>\n  useContext(FullScreenOverlayContext);\n\nexport type FullScreenOverlayProviderProps = {\n  children: ReactNode;\n  hasShadowDom?: boolean;\n  /**\n   * @experimental This is the element overlays will render into. By default, it's set to `document.body`.\n   *\n   * If you specify this value , it will render overlays into this container, such as the `shadowRootElement` over the document body. Most likely, you don't need to change this value, but you might run into strange issues related iframes and other shadow roots. This is here as a safeguard; not meant to be used.\n   */\n  overlayParentElement?: HTMLDivElement | HTMLElement;\n};\n\nconst FullScreenOverlayProvider = ({\n  children,\n  hasShadowDom,\n  overlayParentElement: overlayParentElementProp,\n}: FullScreenOverlayProviderProps) => {\n  const {\n    overlayEmotionRootElement,\n    overlayParentElement,\n    overlayShadowRootElement,\n  } = useMemo(() => {\n    const overlayParentElement =\n      overlayParentElementProp || document.createElement(\"div\");\n\n    if (hasShadowDom) {\n      const { emotionRootElement, shadowRootElement } =\n        createShadowDomElements(overlayParentElement);\n\n      return {\n        overlayEmotionRootElement: emotionRootElement,\n        overlayParentElement,\n        overlayShadowRootElement: shadowRootElement,\n      };\n    }\n\n    return {\n      overlayEmotionRootElement: undefined,\n      overlayParentElement,\n      overlayShadowRootElement: undefined,\n    };\n  }, [hasShadowDom, overlayParentElementProp]);\n\n  useEffect(() => {\n    if (overlayParentElement) {\n      document.body.append(overlayParentElement);\n    }\n\n    return () => {\n      overlayParentElement.remove();\n    };\n  }, [overlayParentElement]);\n\n  const providerValue = useMemo(\n    () => ({\n      overlayEmotionRootElement,\n      overlayShadowRootElement,\n    }),\n    [overlayEmotionRootElement, overlayShadowRootElement],\n  );\n\n  return (\n    <FullScreenOverlayContext.Provider value={providerValue}>\n      {children}\n    </FullScreenOverlayContext.Provider>\n  );\n};\n\nconst MemoizedFullScreenOverlayProvider = memo(FullScreenOverlayProvider);\nMemoizedFullScreenOverlayProvider.displayName = \"FullScreenOverlayProvider\";\n\nexport { MemoizedFullScreenOverlayProvider as FullScreenOverlayProvider };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SACEA,aAAa,EACbC,IAAI,EAEJC,UAAU,EACVC,SAAS,EACTC,OAAO,QACF,OAAO;AAEd,SAASC,uBAAuB,QAAQ,4CAA4C;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAOrF,OAAO,MAAMC,wBAAwB,GACnCR,aAAa,CAA+B,CAAC,CAAC,CAAC;AAEjD,OAAO,MAAMS,2BAA2B,GAAGA,CAAA,KACzCP,UAAU,CAACM,wBAAwB,CAAC;AAatC,MAAME,yBAAyB,GAAGA,CAAC;EACjCC,QAAQ;EACRC,YAAY;EACZC,oBAAoB,EAAEC;AACQ,CAAC,KAAK;EACpC,MAAM;IACJC,yBAAyB;IACzBF,oBAAoB;IACpBG;EACF,CAAC,GAAGZ,OAAO,CAAC,MAAM;IAChB,MAAMS,oBAAoB,GACxBC,wBAAwB,IAAIG,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;IAE3D,IAAIN,YAAY,EAAE;MAChB,MAAM;QAAEO,kBAAkB;QAAEC;MAAkB,CAAC,GAC7Cf,uBAAuB,CAACQ,oBAAoB,CAAC;MAE/C,OAAO;QACLE,yBAAyB,EAAEI,kBAAkB;QAC7CN,oBAAoB;QACpBG,wBAAwB,EAAEI;MAC5B,CAAC;IACH;IAEA,OAAO;MACLL,yBAAyB,EAAEM,SAAS;MACpCR,oBAAoB;MACpBG,wBAAwB,EAAEK;IAC5B,CAAC;EACH,CAAC,EAAE,CAACT,YAAY,EAAEE,wBAAwB,CAAC,CAAC;EAE5CX,SAAS,CAAC,MAAM;IACd,IAAIU,oBAAoB,EAAE;MACxBI,QAAQ,CAACK,IAAI,CAACC,MAAM,CAACV,oBAAoB,CAAC;IAC5C;IAEA,OAAO,MAAM;MACXA,oBAAoB,CAACW,MAAM,CAAC,CAAC;IAC/B,CAAC;EACH,CAAC,EAAE,CAACX,oBAAoB,CAAC,CAAC;EAE1B,MAAMY,aAAa,GAAGrB,OAAO,CAC3B,OAAO;IACLW,yBAAyB;IACzBC;EACF,CAAC,CAAC,EACF,CAACD,yBAAyB,EAAEC,wBAAwB,CACtD,CAAC;EAED,OACET,IAAA,CAACC,wBAAwB,CAACkB,QAAQ;IAACC,KAAK,EAAEF,aAAc;IAAAd,QAAA,EACrDA;EAAQ,CACwB,CAAC;AAExC,CAAC;AAED,MAAMiB,iCAAiC,GAAG3B,IAAI,CAACS,yBAAyB,CAAC;AACzEkB,iCAAiC,CAACC,WAAW,GAAG,2BAA2B;AAE3E,SAASD,iCAAiC,IAAIlB,yBAAyB","ignoreList":[]}
+{"version":3,"file":"FullScreenOverlayContext.js","names":["createContext","memo","useContext","useEffect","useMemo","createShadowDomElements","jsx","_jsx","FullScreenOverlayContext","useFullScreenOverlayContext","OVERLAY_DATA_ATTRIBUTES","dialog","drawer","default","FullScreenOverlayProvider","children","hasShadowDom","overlayParentElement","overlayParentElementProp","overlayType","overlayEmotionRootElement","overlayShadowRootElement","document","createElement","emotionRootElement","shadowRootElement","undefined","setAttribute","body","append","remove","providerValue","Provider","value","MemoizedFullScreenOverlayProvider","displayName"],"sources":["../../src/FullScreenOverlayContext.tsx"],"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 {\n  createContext,\n  memo,\n  type ReactNode,\n  useContext,\n  useEffect,\n  useMemo,\n} from \"react\";\n\nimport { createShadowDomElements } from \"./web-component/createShadowDomElements.js\";\n\nexport type FullScreenOverlayContextType = {\n  overlayEmotionRootElement?: HTMLDivElement | HTMLElement;\n  overlayShadowRootElement?: HTMLDivElement | HTMLElement;\n};\n\nexport const FullScreenOverlayContext =\n  createContext<FullScreenOverlayContextType>({});\n\nexport const useFullScreenOverlayContext = () =>\n  useContext(FullScreenOverlayContext);\n\nexport const OVERLAY_DATA_ATTRIBUTES = {\n  dialog: \"data-odyssey-react-dialog-overlay-component\",\n  drawer: \"data-odyssey-react-drawer-overlay-component\",\n  default: \"data-odyssey-react-overlay-component\",\n} as const;\n\nexport type OverlayType = keyof typeof OVERLAY_DATA_ATTRIBUTES;\n\nexport type FullScreenOverlayProviderProps = {\n  children: ReactNode;\n  hasShadowDom?: boolean;\n  /**\n   * @experimental This is the element overlays will render into. By default, it's set to `document.body`.\n   *\n   * If you specify this value , it will render overlays into this container, such as the `shadowRootElement` over the document body. Most likely, you don't need to change this value, but you might run into strange issues related iframes and other shadow roots. This is here as a safeguard; not meant to be used.\n   */\n  overlayParentElement?: HTMLDivElement | HTMLElement;\n  /**\n   * Type of overlay being rendered. This controls the data attribute set on the overlay parent element.\n   * @default \"default\"\n   */\n  overlayType?: OverlayType;\n};\n\nconst FullScreenOverlayProvider = ({\n  children,\n  hasShadowDom,\n  overlayParentElement: overlayParentElementProp,\n  overlayType = \"default\",\n}: FullScreenOverlayProviderProps) => {\n  const {\n    overlayEmotionRootElement,\n    overlayParentElement,\n    overlayShadowRootElement,\n  } = useMemo(() => {\n    const overlayParentElement =\n      overlayParentElementProp || document.createElement(\"div\");\n\n    if (hasShadowDom) {\n      const { emotionRootElement, shadowRootElement } =\n        createShadowDomElements(overlayParentElement);\n\n      return {\n        overlayEmotionRootElement: emotionRootElement,\n        overlayParentElement,\n        overlayShadowRootElement: shadowRootElement,\n      };\n    }\n\n    return {\n      overlayEmotionRootElement: undefined,\n      overlayParentElement,\n      overlayShadowRootElement: undefined,\n    };\n  }, [hasShadowDom, overlayParentElementProp]);\n\n  useEffect(() => {\n    if (overlayParentElement) {\n      overlayParentElement.setAttribute(\n        OVERLAY_DATA_ATTRIBUTES[overlayType],\n        \"\",\n      );\n      document.body.append(overlayParentElement);\n    }\n\n    return () => {\n      overlayParentElement.remove();\n    };\n  }, [overlayParentElement, overlayType]);\n\n  const providerValue = useMemo(\n    () => ({\n      overlayEmotionRootElement,\n      overlayShadowRootElement,\n    }),\n    [overlayEmotionRootElement, overlayShadowRootElement],\n  );\n\n  return (\n    <FullScreenOverlayContext.Provider value={providerValue}>\n      {children}\n    </FullScreenOverlayContext.Provider>\n  );\n};\n\nconst MemoizedFullScreenOverlayProvider = memo(FullScreenOverlayProvider);\nMemoizedFullScreenOverlayProvider.displayName = \"FullScreenOverlayProvider\";\n\nexport { MemoizedFullScreenOverlayProvider as FullScreenOverlayProvider };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SACEA,aAAa,EACbC,IAAI,EAEJC,UAAU,EACVC,SAAS,EACTC,OAAO,QACF,OAAO;AAEd,SAASC,uBAAuB,QAAQ,4CAA4C;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAOrF,OAAO,MAAMC,wBAAwB,GACnCR,aAAa,CAA+B,CAAC,CAAC,CAAC;AAEjD,OAAO,MAAMS,2BAA2B,GAAGA,CAAA,KACzCP,UAAU,CAACM,wBAAwB,CAAC;AAEtC,OAAO,MAAME,uBAAuB,GAAG;EACrCC,MAAM,EAAE,6CAA6C;EACrDC,MAAM,EAAE,6CAA6C;EACrDC,OAAO,EAAE;AACX,CAAU;AAoBV,MAAMC,yBAAyB,GAAGA,CAAC;EACjCC,QAAQ;EACRC,YAAY;EACZC,oBAAoB,EAAEC,wBAAwB;EAC9CC,WAAW,GAAG;AACgB,CAAC,KAAK;EACpC,MAAM;IACJC,yBAAyB;IACzBH,oBAAoB;IACpBI;EACF,CAAC,GAAGjB,OAAO,CAAC,MAAM;IAChB,MAAMa,oBAAoB,GACxBC,wBAAwB,IAAII,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;IAE3D,IAAIP,YAAY,EAAE;MAChB,MAAM;QAAEQ,kBAAkB;QAAEC;MAAkB,CAAC,GAC7CpB,uBAAuB,CAACY,oBAAoB,CAAC;MAE/C,OAAO;QACLG,yBAAyB,EAAEI,kBAAkB;QAC7CP,oBAAoB;QACpBI,wBAAwB,EAAEI;MAC5B,CAAC;IACH;IAEA,OAAO;MACLL,yBAAyB,EAAEM,SAAS;MACpCT,oBAAoB;MACpBI,wBAAwB,EAAEK;IAC5B,CAAC;EACH,CAAC,EAAE,CAACV,YAAY,EAAEE,wBAAwB,CAAC,CAAC;EAE5Cf,SAAS,CAAC,MAAM;IACd,IAAIc,oBAAoB,EAAE;MACxBA,oBAAoB,CAACU,YAAY,CAC/BjB,uBAAuB,CAACS,WAAW,CAAC,EACpC,EACF,CAAC;MACDG,QAAQ,CAACM,IAAI,CAACC,MAAM,CAACZ,oBAAoB,CAAC;IAC5C;IAEA,OAAO,MAAM;MACXA,oBAAoB,CAACa,MAAM,CAAC,CAAC;IAC/B,CAAC;EACH,CAAC,EAAE,CAACb,oBAAoB,EAAEE,WAAW,CAAC,CAAC;EAEvC,MAAMY,aAAa,GAAG3B,OAAO,CAC3B,OAAO;IACLgB,yBAAyB;IACzBC;EACF,CAAC,CAAC,EACF,CAACD,yBAAyB,EAAEC,wBAAwB,CACtD,CAAC;EAED,OACEd,IAAA,CAACC,wBAAwB,CAACwB,QAAQ;IAACC,KAAK,EAAEF,aAAc;IAAAhB,QAAA,EACrDA;EAAQ,CACwB,CAAC;AAExC,CAAC;AAED,MAAMmB,iCAAiC,GAAGjC,IAAI,CAACa,yBAAyB,CAAC;AACzEoB,iCAAiC,CAACC,WAAW,GAAG,2BAA2B;AAE3E,SAASD,iCAAiC,IAAIpB,yBAAyB","ignoreList":[]}

package/dist/esm/HintLink.js

@@ -15,7 +15,7 @@ import { Link } from "./Link.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const HintLink = props => _jsx(Link, {
   ...props,
-  variant: "default"
+  variant: "monochrome"
 });
 const MemoizedHintLink = memo(HintLink);
 MemoizedHintLink.displayName = "HintLink";

package/dist/esm/HintLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"HintLink.js","names":["memo","Link","jsx","_jsx","HintLink","props","variant","MemoizedHintLink","displayName"],"sources":["../../src/HintLink.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 { memo } from \"react\";\n\nimport { Link, LinkProps } from \"./Link.js\";\n\nconst HintLink = (\n  props: Pick<\n    LinkProps,\n    \"children\" | \"href\" | \"onClick\" | \"rel\" | \"target\" | \"testId\"\n  >,\n) => <Link {...props} variant=\"default\" />;\n\nconst MemoizedHintLink = memo(HintLink);\n\nMemoizedHintLink.displayName = \"HintLink\";\n\nexport { MemoizedHintLink as HintLink };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAQ,OAAO;AAE5B,SAASC,IAAI,QAAmB,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE5C,MAAMC,QAAQ,GACZC,KAGC,IACEF,IAAA,CAACF,IAAI;EAAA,GAAKI,KAAK;EAAEC,OAAO,EAAC;AAAS,CAAE,CAAC;AAE1C,MAAMC,gBAAgB,GAAGP,IAAI,CAACI,QAAQ,CAAC;AAEvCG,gBAAgB,CAACC,WAAW,GAAG,UAAU;AAEzC,SAASD,gBAAgB,IAAIH,QAAQ","ignoreList":[]}
+{"version":3,"file":"HintLink.js","names":["memo","Link","jsx","_jsx","HintLink","props","variant","MemoizedHintLink","displayName"],"sources":["../../src/HintLink.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 { memo } from \"react\";\n\nimport { Link, LinkProps } from \"./Link.js\";\n\nconst HintLink = (\n  props: Pick<\n    LinkProps,\n    \"children\" | \"href\" | \"onClick\" | \"rel\" | \"target\" | \"testId\"\n  >,\n) => <Link {...props} variant=\"monochrome\" />;\n\nconst MemoizedHintLink = memo(HintLink);\n\nMemoizedHintLink.displayName = \"HintLink\";\n\nexport { MemoizedHintLink as HintLink };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAQ,OAAO;AAE5B,SAASC,IAAI,QAAmB,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE5C,MAAMC,QAAQ,GACZC,KAGC,IACEF,IAAA,CAACF,IAAI;EAAA,GAAKI,KAAK;EAAEC,OAAO,EAAC;AAAY,CAAE,CAAC;AAE7C,MAAMC,gBAAgB,GAAGP,IAAI,CAACI,QAAQ,CAAC;AAEvCG,gBAAgB,CAACC,WAAW,GAAG,UAAU;AAEzC,SAASD,gBAAgB,IAAIH,QAAQ","ignoreList":[]}

package/dist/esm/Link.js

@@ -10,7 +10,7 @@ import _Link from "@mui/material/Link";
  *
  * See the License for the specific language governing permissions and limitations under the License.
  */
-import { memo, useImperativeHandle, useRef } from "react";
+import { memo, useCallback, useImperativeHandle, useRef } from "react";
 import { ExternalLinkIcon } from "./icons.generated/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const linkVariantValues = ["default", "monochrome"];
@@ -35,11 +35,17 @@ const Link = ({
       }
     };
   }, []);
+  const handleClick = useCallback(event => {
+    if (onClick && (href === "#" || href === "")) {
+      event.preventDefault();
+    }
+    onClick?.(event);
+  }, [onClick, href]);
   return _jsxs(_Link, {
     "aria-label": ariaLabel,
     "data-se": testId,
     href: href,
-    onClick: onClick,
+    onClick: onClick ? handleClick : undefined,
     ref: localLinkRef,
     rel: rel,
     target: target,