@okta/odyssey-react-mui 1.15.8 → 1.20.0

package/dist/labs/FileUploadPreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileUploadPreview.js","names":["memo","useCallback","styled","useTranslation","useOdysseyDesignTokens","DeleteIcon","MuiPropsContext","Tooltip","jsx","_jsx","jsxs","_jsxs","PreviewContainer","div","isDisabled","odysseyDesignTokens","color","TypographyColorDisabled","marginBlockStart","Spacing2","pointerEvents","UploadedFileContainer","display","justifyContent","alignItems","button","transform","padding","Spacing1","borderRadius","BorderRadiusMain","transition","TransitionTimingMain","backgroundColor","HueNeutral100","borderColor","FocusOutlineColorPrimary","boxShadow","outline","FocusOutlineWidthMain","FocusOutlineStyle","UploadedFile","name","onFileRemove","t","deleteHandler","renderDeleteButton","muiProps","_IconButton","onClick","size","children","tabIndex","ariaType","placement","text","Consumer","FileUploadPreview","fileNames","map","index","MemoizedFileUploadPreview","displayName"],"sources":["../../src/labs/FileUploadPreview.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, useCallback } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { IconButton } from \"@mui/material\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { FileUploadProps } from \"./FileUpload\";\nimport {\n  useOdysseyDesignTokens,\n  DesignTokens,\n} from \"../OdysseyDesignTokensContext\";\nimport { DeleteIcon } from \"../icons.generated\";\nimport { MuiPropsContext, MuiPropsContextType } from \"../MuiPropsContext\";\nimport { Tooltip } from \"../Tooltip\";\n\nconst PreviewContainer = styled.div<{\n  isDisabled: FileUploadProps[\"isDisabled\"];\n  odysseyDesignTokens: DesignTokens;\n}>(({ isDisabled, odysseyDesignTokens }) => ({\n  color: isDisabled ? odysseyDesignTokens.TypographyColorDisabled : \"inherit\",\n  marginBlockStart: odysseyDesignTokens.Spacing2,\n  pointerEvents: isDisabled ? \"none\" : \"auto\",\n}));\n\nconst UploadedFileContainer = styled.div<{ odysseyDesignTokens: DesignTokens }>(\n  {\n    display: \"flex\",\n    justifyContent: \"space-between\",\n    alignItems: \"center\",\n\n    button: {\n      transform: \"scale(0)\",\n    },\n\n    \"&:hover, &:focus-within, &:focus\": {\n      button: {\n        transform: \"scale(1)\",\n      },\n    },\n  },\n  ({ odysseyDesignTokens }) => ({\n    padding: `${odysseyDesignTokens.Spacing1} ${odysseyDesignTokens.Spacing2}`,\n    borderRadius: odysseyDesignTokens.BorderRadiusMain,\n    transition: `background-color ${odysseyDesignTokens.TransitionTimingMain}`,\n\n    \"&:hover, &:focus-within\": {\n      backgroundColor: odysseyDesignTokens.HueNeutral100,\n    },\n\n    \"&:focus\": {\n      borderColor: odysseyDesignTokens.FocusOutlineColorPrimary,\n      boxShadow: `0 0 0 2px ${odysseyDesignTokens.FocusOutlineColorPrimary}`,\n      outline: `${odysseyDesignTokens.FocusOutlineWidthMain} ${odysseyDesignTokens.FocusOutlineStyle} transparent`,\n    },\n  }),\n);\n\ntype UploadedFileProps = {\n  name: string;\n  onFileRemove?: (name: string) => void;\n};\n\nconst UploadedFile = ({ name, onFileRemove }: UploadedFileProps) => {\n  const { t } = useTranslation();\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const deleteHandler = useCallback(() => {\n    onFileRemove?.(name);\n  }, [onFileRemove, name]);\n\n  const renderDeleteButton = useCallback(\n    (muiProps: MuiPropsContextType) => {\n      return (\n        <IconButton\n          {...muiProps}\n          aria-label={t(\"fileupload.removefile.text\")}\n          onClick={deleteHandler}\n          size=\"small\"\n        >\n          <DeleteIcon />\n        </IconButton>\n      );\n    },\n    [deleteHandler, t],\n  );\n\n  return (\n    <UploadedFileContainer\n      // tabindex added to make this element focusable\n      tabIndex={0}\n      odysseyDesignTokens={odysseyDesignTokens}\n    >\n      {name}\n      <Tooltip\n        ariaType=\"description\"\n        placement=\"top\"\n        text={t(\"fileupload.removefile.text\")}\n      >\n        <MuiPropsContext.Consumer>\n          {renderDeleteButton}\n        </MuiPropsContext.Consumer>\n      </Tooltip>\n    </UploadedFileContainer>\n  );\n};\n\ntype FileUploadPreviewProps = {\n  fileNames: string[];\n  isDisabled: FileUploadProps[\"isDisabled\"];\n  onFileRemove?: (name: string) => void;\n};\n\nconst FileUploadPreview = ({\n  fileNames,\n  isDisabled,\n  onFileRemove,\n}: FileUploadPreviewProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  return (\n    <PreviewContainer\n      isDisabled={isDisabled}\n      odysseyDesignTokens={odysseyDesignTokens}\n    >\n      {fileNames?.map((name, index) => (\n        <UploadedFile\n          key={`${index}-${name}`}\n          onFileRemove={onFileRemove}\n          name={name}\n        />\n      ))}\n    </PreviewContainer>\n  );\n};\n\nconst MemoizedFileUploadPreview = memo(FileUploadPreview);\nMemoizedFileUploadPreview.displayName = \"FileUploadPreview\";\n\nexport { MemoizedFileUploadPreview as FileUploadPreview };\n"],"mappings":"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"}
+{"version":3,"file":"FileUploadPreview.js","names":["memo","useCallback","styled","useTranslation","useOdysseyDesignTokens","DeleteIcon","MuiPropsContext","Tooltip","jsx","_jsx","jsxs","_jsxs","PreviewContainer","div","isDisabled","odysseyDesignTokens","color","TypographyColorDisabled","marginBlockStart","Spacing2","pointerEvents","UploadedFileContainer","display","justifyContent","alignItems","button","transform","padding","Spacing1","borderRadius","BorderRadiusMain","transition","TransitionTimingMain","backgroundColor","HueNeutral100","borderColor","FocusOutlineColorPrimary","boxShadow","outline","FocusOutlineWidthMain","FocusOutlineStyle","UploadedFile","name","onFileRemove","t","deleteHandler","renderDeleteButton","muiProps","_IconButton","onClick","size","children","tabIndex","ariaType","placement","text","Consumer","FileUploadPreview","fileNames","map","index","MemoizedFileUploadPreview","displayName"],"sources":["../../src/labs/FileUploadPreview.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, useCallback } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { IconButton } from \"@mui/material\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { FileUploadProps } from \"./FileUpload\";\nimport {\n  useOdysseyDesignTokens,\n  DesignTokens,\n} from \"../OdysseyDesignTokensContext\";\nimport { DeleteIcon } from \"../icons.generated\";\nimport { MuiPropsContext, MuiPropsContextType } from \"../MuiPropsContext\";\nimport { Tooltip } from \"../Tooltip\";\n\nconst PreviewContainer = styled.div<{\n  isDisabled: FileUploadProps[\"isDisabled\"];\n  odysseyDesignTokens: DesignTokens;\n}>(({ isDisabled, odysseyDesignTokens }) => ({\n  color: isDisabled ? odysseyDesignTokens.TypographyColorDisabled : \"inherit\",\n  marginBlockStart: odysseyDesignTokens.Spacing2,\n  pointerEvents: isDisabled ? \"none\" : \"auto\",\n}));\n\nconst UploadedFileContainer = styled.div<{ odysseyDesignTokens: DesignTokens }>(\n  {\n    display: \"flex\",\n    justifyContent: \"space-between\",\n    alignItems: \"center\",\n\n    button: {\n      transform: \"scale(0)\",\n    },\n\n    \"&:hover, &:focus-within, &:focus\": {\n      button: {\n        transform: \"scale(1)\",\n      },\n    },\n  },\n  ({ odysseyDesignTokens }) => ({\n    padding: `${odysseyDesignTokens.Spacing1} ${odysseyDesignTokens.Spacing2}`,\n    borderRadius: odysseyDesignTokens.BorderRadiusMain,\n    transition: `background-color ${odysseyDesignTokens.TransitionTimingMain}`,\n\n    \"&:hover, &:focus-within\": {\n      backgroundColor: odysseyDesignTokens.HueNeutral100,\n    },\n\n    \"&:focus\": {\n      borderColor: odysseyDesignTokens.FocusOutlineColorPrimary,\n      boxShadow: `0 0 0 2px ${odysseyDesignTokens.FocusOutlineColorPrimary}`,\n      outline: `${odysseyDesignTokens.FocusOutlineWidthMain} ${odysseyDesignTokens.FocusOutlineStyle} transparent`,\n    },\n  }),\n);\n\ntype UploadedFileProps = {\n  name: string;\n  onFileRemove?: (name: string) => void;\n};\n\nconst UploadedFile = ({ name, onFileRemove }: UploadedFileProps) => {\n  const { t } = useTranslation();\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const deleteHandler = useCallback(() => {\n    onFileRemove?.(name);\n  }, [onFileRemove, name]);\n\n  const renderDeleteButton = useCallback(\n    (muiProps: MuiPropsContextType) => {\n      return (\n        <IconButton\n          {...muiProps}\n          aria-label={t(\"fileupload.removefile.text\")}\n          onClick={deleteHandler}\n          size=\"small\"\n        >\n          <DeleteIcon />\n        </IconButton>\n      );\n    },\n    [deleteHandler, t],\n  );\n\n  return (\n    <UploadedFileContainer\n      // tabindex added to make this element focusable\n      tabIndex={0}\n      odysseyDesignTokens={odysseyDesignTokens}\n    >\n      {name}\n      <Tooltip\n        ariaType=\"description\"\n        placement=\"top\"\n        text={t(\"fileupload.removefile.text\")}\n      >\n        <MuiPropsContext.Consumer>\n          {renderDeleteButton}\n        </MuiPropsContext.Consumer>\n      </Tooltip>\n    </UploadedFileContainer>\n  );\n};\n\ntype FileUploadPreviewProps = {\n  fileNames: string[];\n  isDisabled: FileUploadProps[\"isDisabled\"];\n  onFileRemove?: (name: string) => void;\n};\n\nconst FileUploadPreview = ({\n  fileNames,\n  isDisabled,\n  onFileRemove,\n}: FileUploadPreviewProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  return (\n    <PreviewContainer\n      data-file-preview-container=\"true\"\n      isDisabled={isDisabled}\n      odysseyDesignTokens={odysseyDesignTokens}\n    >\n      {fileNames?.map((name, index) => (\n        <UploadedFile\n          key={`${index}-${name}`}\n          onFileRemove={onFileRemove}\n          name={name}\n        />\n      ))}\n    </PreviewContainer>\n  );\n};\n\nconst MemoizedFileUploadPreview = memo(FileUploadPreview);\nMemoizedFileUploadPreview.displayName = \"FileUploadPreview\";\n\nexport { MemoizedFileUploadPreview as FileUploadPreview };\n"],"mappings":"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"}

package/dist/labs/Layout.js

@@ -0,0 +1,49 @@
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { Children, memo } from "react";
+import styled from "@emotion/styled";
+import { Box } from "../Box.js";
+import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const LayoutContent = styled("div", {
+  shouldForwardProp: prop => !["odysseyDesignTokens", "regions"].includes(prop)
+})(({
+  odysseyDesignTokens,
+  regions
+}) => ({
+  display: "grid",
+  gridTemplateColumns: regions,
+  gridColumnGap: odysseyDesignTokens.Spacing4,
+  columnGap: odysseyDesignTokens.Spacing4,
+  "& + &": {
+    marginBlockStart: odysseyDesignTokens.Spacing4
+  }
+}));
+const Layout = ({
+  regions,
+  children
+}) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const mappedRegions = regions.map(region => `minmax(0, ${region}fr)`).join(" ");
+  return _jsx(Box, {
+    children: _jsx(LayoutContent, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      regions: mappedRegions,
+      children: Children.toArray(children).map(child => child)
+    })
+  });
+};
+const MemoizedLayout = memo(Layout);
+MemoizedLayout.displayName = "Layout";
+export { MemoizedLayout as Layout };
+//# sourceMappingURL=Layout.js.map

package/dist/labs/Layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Layout.js","names":["Children","memo","styled","Box","useOdysseyDesignTokens","jsx","_jsx","LayoutContent","shouldForwardProp","prop","includes","odysseyDesignTokens","regions","display","gridTemplateColumns","gridColumnGap","Spacing4","columnGap","marginBlockStart","Layout","children","mappedRegions","map","region","join","toArray","child","MemoizedLayout","displayName"],"sources":["../../src/labs/Layout.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 { Children, ReactNode, memo } from \"react\";\nimport styled from \"@emotion/styled\";\n\nimport { Box } from \"../Box\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../OdysseyDesignTokensContext\";\n\ntype SupportedRegionRatios =\n  | [1]\n  | [1, 1]\n  | [1, 2]\n  | [2, 1]\n  | [1, 3]\n  | [3, 1]\n  | [1, 1, 1]\n  | [1, 1, 1, 1];\n\nexport type LayoutProps = {\n  /**\n   * The supported region ratios for the Grid. Each number is a fractional unit that is mapped to the 'fr' CSS unit.\n   * e.g. [2, 1] defines a 2/3, 1/3 layout and [1, 1, 1] defines a 1/3, 1/3, 1/3 layout\n   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout#the_fr_unit\n   */\n  regions: SupportedRegionRatios;\n  /**\n   * The content of the Grid. May be a `string` or any other `ReactNode` or array of `ReactNode`s.\n   */\n  children?: ReactNode;\n};\n\ninterface LayoutContentProps {\n  odysseyDesignTokens: DesignTokens;\n  regions: string;\n}\n\nconst LayoutContent = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    ![\"odysseyDesignTokens\", \"regions\"].includes(prop),\n})<LayoutContentProps>(({ odysseyDesignTokens, regions }) => ({\n  display: \"grid\",\n  gridTemplateColumns: regions,\n  gridColumnGap: odysseyDesignTokens.Spacing4,\n  columnGap: odysseyDesignTokens.Spacing4,\n\n  \"& + &\": {\n    marginBlockStart: odysseyDesignTokens.Spacing4,\n  },\n}));\n\nconst Layout = ({ regions, children }: LayoutProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const mappedRegions = regions\n    .map((region) => `minmax(0, ${region}fr)`)\n    .join(\" \");\n\n  return (\n    <Box>\n      <LayoutContent\n        odysseyDesignTokens={odysseyDesignTokens}\n        regions={mappedRegions}\n      >\n        {Children.toArray(children).map((child) => child)}\n      </LayoutContent>\n    </Box>\n  );\n};\n\nconst MemoizedLayout = memo(Layout);\nMemoizedLayout.displayName = \"Layout\";\n\nexport { MemoizedLayout as Layout };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,QAAQ,EAAaC,IAAI,QAAQ,OAAO;AACjD,OAAOC,MAAM,MAAM,iBAAiB;AAAC,SAE5BC,GAAG;AAAA,SAGVC,sBAAsB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AA+BxB,MAAMC,aAAa,GAAGL,MAAM,CAAC,KAAK,EAAE;EAClCM,iBAAiB,EAAGC,IAAI,IACtB,CAAC,CAAC,qBAAqB,EAAE,SAAS,CAAC,CAACC,QAAQ,CAACD,IAAI;AACrD,CAAC,CAAC,CAAqB,CAAC;EAAEE,mBAAmB;EAAEC;AAAQ,CAAC,MAAM;EAC5DC,OAAO,EAAE,MAAM;EACfC,mBAAmB,EAAEF,OAAO;EAC5BG,aAAa,EAAEJ,mBAAmB,CAACK,QAAQ;EAC3CC,SAAS,EAAEN,mBAAmB,CAACK,QAAQ;EAEvC,OAAO,EAAE;IACPE,gBAAgB,EAAEP,mBAAmB,CAACK;EACxC;AACF,CAAC,CAAC,CAAC;AAEH,MAAMG,MAAM,GAAGA,CAAC;EAAEP,OAAO;EAAEQ;AAAsB,CAAC,KAAK;EACrD,MAAMT,mBAAmB,GAAGP,sBAAsB,CAAC,CAAC;EACpD,MAAMiB,aAAa,GAAGT,OAAO,CAC1BU,GAAG,CAAEC,MAAM,IAAM,aAAYA,MAAO,KAAI,CAAC,CACzCC,IAAI,CAAC,GAAG,CAAC;EAEZ,OACElB,IAAA,CAACH,GAAG;IAAAiB,QAAA,EACFd,IAAA,CAACC,aAAa;MACZI,mBAAmB,EAAEA,mBAAoB;MACzCC,OAAO,EAAES,aAAc;MAAAD,QAAA,EAEtBpB,QAAQ,CAACyB,OAAO,CAACL,QAAQ,CAAC,CAACE,GAAG,CAAEI,KAAK,IAAKA,KAAK;IAAC,CACpC;EAAC,CACb,CAAC;AAEV,CAAC;AAED,MAAMC,cAAc,GAAG1B,IAAI,CAACkB,MAAM,CAAC;AACnCQ,cAAc,CAACC,WAAW,GAAG,QAAQ;AAErC,SAASD,cAAc,IAAIR,MAAM"}

package/dist/labs/NavAccordion.js

@@ -0,0 +1,80 @@
+import _Accordion from "@mui/material/Accordion";
+import _AccordionDetails from "@mui/material/AccordionDetails";
+import _AccordionSummary from "@mui/material/AccordionSummary";
+/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import styled from "@emotion/styled";
+import { memo } from "react";
+import { ChevronRightIcon } from "../icons.generated/index.js";
+import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext.js";
+import { Support } from "../Typography.js";
+import { useUniqueId } from "../useUniqueId.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const AccordionLabelContainer = styled("span", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isIconVisible"
+})(({
+  odysseyDesignTokens,
+  isIconVisible
+}) => ({
+  width: "100%",
+  marginLeft: isIconVisible ? odysseyDesignTokens.Spacing2 : 0,
+  fontSize: odysseyDesignTokens.TypographyScale0,
+  fontWeight: odysseyDesignTokens.TypographyWeightHeading,
+  color: odysseyDesignTokens.TypographyColorHeading
+}));
+const NavAccordion = ({
+  children,
+  label,
+  id: idOverride,
+  isDefaultExpanded,
+  isDisabled,
+  isExpanded,
+  translate,
+  startIcon
+}) => {
+  const id = useUniqueId(idOverride);
+  const headerId = `${id}-header`;
+  const contentId = `${id}-content`;
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  return _jsxs(_Accordion, {
+    defaultExpanded: isDefaultExpanded,
+    disabled: isDisabled,
+    disableGutters: true,
+    expanded: isExpanded,
+    className: "nav-accordion",
+    children: [_jsx(_AccordionSummary, {
+      className: "nav-accordion-summary",
+      "aria-controls": contentId,
+      expandIcon: _jsx(ChevronRightIcon, {}),
+      id: headerId,
+      children: _jsxs(Support, {
+        component: "div",
+        translate: translate,
+        children: [startIcon && startIcon, _jsx(AccordionLabelContainer, {
+          odysseyDesignTokens: odysseyDesignTokens,
+          isIconVisible: Boolean(startIcon),
+          children: label
+        })]
+      })
+    }), _jsx(_AccordionDetails, {
+      className: "nav-accordion-details",
+      "aria-labelledby": headerId,
+      children: children
+    })]
+  });
+};
+const MemoizedNavAccordion = memo(NavAccordion);
+MemoizedNavAccordion.displayName = "NavAccordion";
+export { MemoizedNavAccordion as NavAccordion };
+//# sourceMappingURL=NavAccordion.js.map

package/dist/labs/NavAccordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavAccordion.js","names":["styled","memo","ChevronRightIcon","useOdysseyDesignTokens","Support","useUniqueId","jsx","_jsx","jsxs","_jsxs","AccordionLabelContainer","shouldForwardProp","prop","odysseyDesignTokens","isIconVisible","width","marginLeft","Spacing2","fontSize","TypographyScale0","fontWeight","TypographyWeightHeading","color","TypographyColorHeading","NavAccordion","children","label","id","idOverride","isDefaultExpanded","isDisabled","isExpanded","translate","startIcon","headerId","contentId","_Accordion","defaultExpanded","disabled","disableGutters","expanded","className","_AccordionSummary","expandIcon","component","Boolean","_AccordionDetails","MemoizedNavAccordion","displayName"],"sources":["../../src/labs/NavAccordion.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-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  Accordion as MuiAccordion,\n  AccordionDetails as MuiAccordionDetails,\n  AccordionSummary as MuiAccordionSummary,\n  AccordionProps as MuiAccordionProps,\n} from \"@mui/material\";\nimport { ReactNode, memo } from \"react\";\n\nimport type { HtmlProps } from \"../HtmlProps\";\nimport { ChevronRightIcon } from \"../icons.generated\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../OdysseyDesignTokensContext\";\nimport { Support } from \"../Typography\";\nimport { useUniqueId } from \"../useUniqueId\";\n\nexport type NavAccordionProps = {\n  /**\n   * The content of the Accordion itself\n   */\n  children: ReactNode;\n  /**\n   * The label text for the AccordionSummary\n   */\n  label: string;\n  /**\n   * Defines IDs for the header and the content of the Accordion\n   */\n  id?: string;\n  /**\n   * Whether the item is expanded by default\n   */\n  isDefaultExpanded?: boolean;\n  /**\n   * Whether the item is disabled\n   */\n  isDisabled?: boolean;\n  /**\n   * If true, expands the accordion, otherwise collapse it.\n   * Setting this prop enables control over the accordion.\n   */\n  isExpanded?: boolean;\n  /**\n   * Event fired when the expansion state of the accordion is changed\n   */\n  onChange?: MuiAccordionProps[\"onChange\"];\n  /**\n   * The icon element to display at the start of the Nav Item\n   */\n  startIcon?: ReactNode;\n} & Pick<HtmlProps, \"testId\" | \"translate\">;\n\nconst AccordionLabelContainer = styled(\"span\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"isIconVisible\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n  isIconVisible: boolean;\n}>(({ odysseyDesignTokens, isIconVisible }) => ({\n  width: \"100%\",\n  marginLeft: isIconVisible ? odysseyDesignTokens.Spacing2 : 0,\n  fontSize: odysseyDesignTokens.TypographyScale0,\n  fontWeight: odysseyDesignTokens.TypographyWeightHeading,\n  color: odysseyDesignTokens.TypographyColorHeading,\n}));\n\nconst NavAccordion = ({\n  children,\n  label,\n  id: idOverride,\n  isDefaultExpanded,\n  isDisabled,\n  isExpanded,\n  translate,\n  startIcon,\n}: NavAccordionProps) => {\n  const id = useUniqueId(idOverride);\n  const headerId = `${id}-header`;\n  const contentId = `${id}-content`;\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  return (\n    <MuiAccordion\n      defaultExpanded={isDefaultExpanded}\n      disabled={isDisabled}\n      disableGutters\n      expanded={isExpanded}\n      className=\"nav-accordion\"\n    >\n      <MuiAccordionSummary\n        className=\"nav-accordion-summary\"\n        aria-controls={contentId}\n        expandIcon={<ChevronRightIcon />}\n        id={headerId}\n      >\n        <Support component=\"div\" translate={translate}>\n          {startIcon && startIcon}\n          <AccordionLabelContainer\n            odysseyDesignTokens={odysseyDesignTokens}\n            isIconVisible={Boolean(startIcon)}\n          >\n            {label}\n          </AccordionLabelContainer>\n        </Support>\n      </MuiAccordionSummary>\n      <MuiAccordionDetails\n        className=\"nav-accordion-details\"\n        aria-labelledby={headerId}\n      >\n        {children}\n      </MuiAccordionDetails>\n    </MuiAccordion>\n  );\n};\n\nconst MemoizedNavAccordion = memo(NavAccordion);\nMemoizedNavAccordion.displayName = \"NavAccordion\";\n\nexport { MemoizedNavAccordion as NavAccordion };\n"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,MAAM,MAAM,iBAAiB;AAOpC,SAAoBC,IAAI,QAAQ,OAAO;AAAC,SAG/BC,gBAAgB;AAAA,SAGvBC,sBAAsB;AAAA,SAEfC,OAAO;AAAA,SACPC,WAAW;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAsCpB,MAAMC,uBAAuB,GAAGV,MAAM,CAAC,MAAM,EAAE;EAC7CW,iBAAiB,EAAGC,IAAI,IACtBA,IAAI,KAAK,qBAAqB,IAAIA,IAAI,KAAK;AAC/C,CAAC,CAAC,CAGC,CAAC;EAAEC,mBAAmB;EAAEC;AAAc,CAAC,MAAM;EAC9CC,KAAK,EAAE,MAAM;EACbC,UAAU,EAAEF,aAAa,GAAGD,mBAAmB,CAACI,QAAQ,GAAG,CAAC;EAC5DC,QAAQ,EAAEL,mBAAmB,CAACM,gBAAgB;EAC9CC,UAAU,EAAEP,mBAAmB,CAACQ,uBAAuB;EACvDC,KAAK,EAAET,mBAAmB,CAACU;AAC7B,CAAC,CAAC,CAAC;AAEH,MAAMC,YAAY,GAAGA,CAAC;EACpBC,QAAQ;EACRC,KAAK;EACLC,EAAE,EAAEC,UAAU;EACdC,iBAAiB;EACjBC,UAAU;EACVC,UAAU;EACVC,SAAS;EACTC;AACiB,CAAC,KAAK;EACvB,MAAMN,EAAE,GAAGtB,WAAW,CAACuB,UAAU,CAAC;EAClC,MAAMM,QAAQ,GAAI,GAAEP,EAAG,SAAQ;EAC/B,MAAMQ,SAAS,GAAI,GAAER,EAAG,UAAS;EACjC,MAAMd,mBAAmB,GAAGV,sBAAsB,CAAC,CAAC;EAEpD,OACEM,KAAA,CAAA2B,UAAA;IACEC,eAAe,EAAER,iBAAkB;IACnCS,QAAQ,EAAER,UAAW;IACrBS,cAAc;IACdC,QAAQ,EAAET,UAAW;IACrBU,SAAS,EAAC,eAAe;IAAAhB,QAAA,GAEzBlB,IAAA,CAAAmC,iBAAA;MACED,SAAS,EAAC,uBAAuB;MACjC,iBAAeN,SAAU;MACzBQ,UAAU,EAAEpC,IAAA,CAACL,gBAAgB,IAAE,CAAE;MACjCyB,EAAE,EAAEO,QAAS;MAAAT,QAAA,EAEbhB,KAAA,CAACL,OAAO;QAACwC,SAAS,EAAC,KAAK;QAACZ,SAAS,EAAEA,SAAU;QAAAP,QAAA,GAC3CQ,SAAS,IAAIA,SAAS,EACvB1B,IAAA,CAACG,uBAAuB;UACtBG,mBAAmB,EAAEA,mBAAoB;UACzCC,aAAa,EAAE+B,OAAO,CAACZ,SAAS,CAAE;UAAAR,QAAA,EAEjCC;QAAK,CACiB,CAAC;MAAA,CACnB;IAAC,CACS,CAAC,EACtBnB,IAAA,CAAAuC,iBAAA;MACEL,SAAS,EAAC,uBAAuB;MACjC,mBAAiBP,QAAS;MAAAT,QAAA,EAEzBA;IAAQ,CACU,CAAC;EAAA,CACV,CAAC;AAEnB,CAAC;AAED,MAAMsB,oBAAoB,GAAG9C,IAAI,CAACuB,YAAY,CAAC;AAC/CuB,oBAAoB,CAACC,WAAW,GAAG,cAAc;AAEjD,SAASD,oBAAoB,IAAIvB,YAAY"}

package/dist/labs/PageTemplate.js

@@ -0,0 +1,140 @@
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { memo } from "react";
+import styled from "@emotion/styled";
+import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext.js";
+import { DocumentationIcon } from "../icons.generated/index.js";
+import { Heading4, Subordinate } from "../Typography.js";
+import { Link } from "../Link.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const TemplateContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isFullWidth"
+})(({
+  odysseyDesignTokens,
+  isFullWidth
+}) => ({
+  maxWidth: isFullWidth ? "100%" : `calc(1440px + ${odysseyDesignTokens.Spacing6} + ${odysseyDesignTokens.Spacing6})`,
+  marginInline: isFullWidth ? odysseyDesignTokens.Spacing6 : "auto",
+  padding: odysseyDesignTokens.Spacing6
+}));
+const TemplateHeader = styled("div")(() => ({
+  display: "flex",
+  alignItems: "flex-end",
+  justifyContent: "space-between"
+}));
+const TemplateHeaderPrimaryContent = styled("div")(() => ({
+  [".MuiTypography-root:last-child"]: {
+    marginBlockEnd: "0"
+  }
+}));
+const TemplateHeaderSecondaryContent = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  alignItems: "flex-end",
+  display: "flex",
+  flexDirection: "column",
+  gap: odysseyDesignTokens.Spacing2,
+  minHeight: odysseyDesignTokens.Spacing7,
+  justifyContent: "center"
+}));
+const TemplateHeaderButtons = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
+})(({
+  odysseyDesignTokens
+}) => ({
+  display: "flex",
+  gap: odysseyDesignTokens.Spacing2
+}));
+const TemplateContent = styled("div", {
+  shouldForwardProp: prop => !["odysseyDesignTokens", "isDrawerOpen", "drawerVariant"].includes(prop)
+})(({
+  odysseyDesignTokens,
+  isDrawerOpen,
+  drawerVariant
+}) => ({
+  "@keyframes animate-drawer-open": {
+    "0%": {
+      gridTemplateColumns: "minmax(0, 1fr) 0"
+    },
+    "100%": {
+      gridTemplateColumns: "minmax(0, 1fr) 360px"
+    }
+  },
+  "@keyframes animate-drawer-close": {
+    "0%": {
+      gridTemplateColumns: "minmax(0, 1fr) 360px"
+    },
+    "100%": {
+      gridTemplateColumns: "minmax(0, 1fr) 0"
+    }
+  },
+  display: "grid",
+  gridGap: drawerVariant === "persistent" && !isDrawerOpen ? 0 : odysseyDesignTokens.Spacing4,
+  gap: drawerVariant === "persistent" && !isDrawerOpen ? 0 : odysseyDesignTokens.Spacing4,
+  marginBlock: odysseyDesignTokens.Spacing4,
+  gridTemplateColumns: drawerVariant === "persistent" ? isDrawerOpen ? "minmax(0, 1fr) 360px" : "minmax(0, 1fr) 0" : "minmax(0, 1fr)",
+  animation: drawerVariant === "persistent" && isDrawerOpen ? "animate-drawer-open 225ms cubic-bezier(0, 0, 0.2, 1)" : "animate-drawer-close 225ms cubic-bezier(0, 0, 0.2, 1)"
+}));
+const PageTemplate = ({
+  title,
+  description,
+  documentationLink,
+  documentationText,
+  primaryCallToActionComponent,
+  secondaryCallToActionComponent,
+  tertiaryCallToActionComponent,
+  children,
+  drawer,
+  isFullWidth = false
+}) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const {
+    isOpen: isDrawerOpen,
+    variant: drawerVariant
+  } = drawer?.props ?? {};
+  return _jsxs(TemplateContainer, {
+    odysseyDesignTokens: odysseyDesignTokens,
+    isFullWidth: isFullWidth,
+    children: [_jsxs(TemplateHeader, {
+      children: [_jsxs(TemplateHeaderPrimaryContent, {
+        children: [title && _jsx(Heading4, {
+          children: title
+        }), description && _jsx(Subordinate, {
+          children: description
+        })]
+      }), _jsxs(TemplateHeaderSecondaryContent, {
+        odysseyDesignTokens: odysseyDesignTokens,
+        children: [documentationLink && _jsx(Link, {
+          href: documentationLink,
+          icon: _jsx(DocumentationIcon, {}),
+          children: documentationText
+        }), (primaryCallToActionComponent || secondaryCallToActionComponent || tertiaryCallToActionComponent) && _jsxs(TemplateHeaderButtons, {
+          odysseyDesignTokens: odysseyDesignTokens,
+          children: [tertiaryCallToActionComponent, secondaryCallToActionComponent, primaryCallToActionComponent]
+        })]
+      })]
+    }), _jsxs(TemplateContent, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      isDrawerOpen: isDrawerOpen,
+      drawerVariant: drawerVariant,
+      children: [children, drawer]
+    })]
+  });
+};
+const MemoizedPageTemplate = memo(PageTemplate);
+MemoizedPageTemplate.displayName = "PageTemplate";
+export { MemoizedPageTemplate as PageTemplate };
+//# sourceMappingURL=PageTemplate.js.map

package/dist/labs/PageTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageTemplate.js","names":["memo","styled","useOdysseyDesignTokens","DocumentationIcon","Heading4","Subordinate","Link","jsx","_jsx","jsxs","_jsxs","TemplateContainer","shouldForwardProp","prop","odysseyDesignTokens","isFullWidth","maxWidth","Spacing6","marginInline","padding","TemplateHeader","display","alignItems","justifyContent","TemplateHeaderPrimaryContent","marginBlockEnd","TemplateHeaderSecondaryContent","flexDirection","gap","Spacing2","minHeight","Spacing7","TemplateHeaderButtons","TemplateContent","includes","isDrawerOpen","drawerVariant","gridTemplateColumns","gridGap","Spacing4","marginBlock","animation","PageTemplate","title","description","documentationLink","documentationText","primaryCallToActionComponent","secondaryCallToActionComponent","tertiaryCallToActionComponent","children","drawer","isOpen","variant","props","href","icon","MemoizedPageTemplate","displayName"],"sources":["../../src/labs/PageTemplate.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { memo, ReactElement, ReactNode } from \"react\";\nimport styled from \"@emotion/styled\";\n\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../OdysseyDesignTokensContext\";\nimport { DocumentationIcon } from \"../icons.generated\";\nimport { Heading4, Subordinate } from \"../Typography\";\nimport { Link } from \"../Link\";\n\nexport type PageTemplateProps = {\n  /**\n   * The title of the layout to be situated in the layout header\n   */\n  title?: string;\n  /**\n   * A supplementary description to be situated in the layout header\n   */\n  description?: string;\n  /**\n   * The destination for a documentation `Link` to be situated in the layout header\n   */\n  documentationLink?: string;\n  /**\n   * The text for a documentation `Link` to be situated in the layout header\n   */\n  documentationText?: string;\n  /**\n   * An optional `Drawer` object. Can be of variant 'temporary' or 'persistent'.\n   */\n  drawer?: ReactElement;\n  /**\n   * An optional `Button` object to be situated in the layout header. Should almost always be of variant `primary`.\n   */\n  primaryCallToActionComponent?: ReactElement;\n  /**\n   * An optional `Button` object to be situated in the layout header, alongside the `callToActionPrimaryComponent`.\n   */\n  secondaryCallToActionComponent?: ReactElement;\n  /**\n   * An optional `Button` object to be situated in the layout header, alongside the other two `callToAction` components.\n   */\n  tertiaryCallToActionComponent?: ReactElement;\n  /**\n   * The content of the layout. May be a `string` or any other `ReactNode` or array of `ReactNode`s. Will often be `Grid` objects.\n   */\n  children?: ReactNode;\n  /**\n   * When set to `true`, the layout expands past its max width of 1440px and spans the entire available screen width.\n   */\n  isFullWidth?: boolean;\n};\n\ntype TemplateContentProps = {\n  odysseyDesignTokens: DesignTokens;\n  isDrawerOpen?: boolean;\n  drawerVariant?: string;\n};\n\nconst TemplateContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"isFullWidth\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n  isFullWidth: boolean;\n}>(({ odysseyDesignTokens, isFullWidth }) => ({\n  maxWidth: isFullWidth\n    ? \"100%\"\n    : `calc(1440px + ${odysseyDesignTokens.Spacing6} + ${odysseyDesignTokens.Spacing6})`,\n  marginInline: isFullWidth ? odysseyDesignTokens.Spacing6 : \"auto\",\n  padding: odysseyDesignTokens.Spacing6,\n}));\n\nconst TemplateHeader = styled(\"div\")(() => ({\n  display: \"flex\",\n  alignItems: \"flex-end\",\n  justifyContent: \"space-between\",\n}));\n\nconst TemplateHeaderPrimaryContent = styled(\"div\")(() => ({\n  [\".MuiTypography-root:last-child\"]: {\n    marginBlockEnd: \"0\",\n  },\n}));\n\nconst TemplateHeaderSecondaryContent = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  alignItems: \"flex-end\",\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: odysseyDesignTokens.Spacing2,\n  minHeight: odysseyDesignTokens.Spacing7,\n  justifyContent: \"center\",\n}));\n\nconst TemplateHeaderButtons = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  display: \"flex\",\n  gap: odysseyDesignTokens.Spacing2,\n}));\n\nconst TemplateContent = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    ![\"odysseyDesignTokens\", \"isDrawerOpen\", \"drawerVariant\"].includes(prop),\n})<TemplateContentProps>(\n  ({ odysseyDesignTokens, isDrawerOpen, drawerVariant }) => ({\n    \"@keyframes animate-drawer-open\": {\n      \"0%\": {\n        gridTemplateColumns: \"minmax(0, 1fr) 0\",\n      },\n      \"100%\": {\n        gridTemplateColumns: \"minmax(0, 1fr) 360px\",\n      },\n    },\n    \"@keyframes animate-drawer-close\": {\n      \"0%\": {\n        gridTemplateColumns: \"minmax(0, 1fr) 360px\",\n      },\n      \"100%\": {\n        gridTemplateColumns: \"minmax(0, 1fr) 0\",\n      },\n    },\n    display: \"grid\",\n    gridGap:\n      drawerVariant === \"persistent\" && !isDrawerOpen\n        ? 0\n        : odysseyDesignTokens.Spacing4,\n    gap:\n      drawerVariant === \"persistent\" && !isDrawerOpen\n        ? 0\n        : odysseyDesignTokens.Spacing4,\n    marginBlock: odysseyDesignTokens.Spacing4,\n    gridTemplateColumns:\n      drawerVariant === \"persistent\"\n        ? isDrawerOpen\n          ? \"minmax(0, 1fr) 360px\"\n          : \"minmax(0, 1fr) 0\"\n        : \"minmax(0, 1fr)\",\n    animation:\n      drawerVariant === \"persistent\" && isDrawerOpen\n        ? \"animate-drawer-open 225ms cubic-bezier(0, 0, 0.2, 1)\"\n        : \"animate-drawer-close 225ms cubic-bezier(0, 0, 0.2, 1)\",\n  }),\n);\n\nconst PageTemplate = ({\n  title,\n  description,\n  documentationLink,\n  documentationText,\n  primaryCallToActionComponent,\n  secondaryCallToActionComponent,\n  tertiaryCallToActionComponent,\n  children,\n  drawer,\n  isFullWidth = false,\n}: PageTemplateProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const { isOpen: isDrawerOpen, variant: drawerVariant } = drawer?.props ?? {};\n\n  return (\n    <TemplateContainer\n      odysseyDesignTokens={odysseyDesignTokens}\n      isFullWidth={isFullWidth}\n    >\n      <TemplateHeader>\n        <TemplateHeaderPrimaryContent>\n          {title && <Heading4>{title}</Heading4>}\n          {description && <Subordinate>{description}</Subordinate>}\n        </TemplateHeaderPrimaryContent>\n\n        <TemplateHeaderSecondaryContent\n          odysseyDesignTokens={odysseyDesignTokens}\n        >\n          {documentationLink && (\n            <Link href={documentationLink} icon={<DocumentationIcon />}>\n              {documentationText}\n            </Link>\n          )}\n          {(primaryCallToActionComponent ||\n            secondaryCallToActionComponent ||\n            tertiaryCallToActionComponent) && (\n            <TemplateHeaderButtons odysseyDesignTokens={odysseyDesignTokens}>\n              {tertiaryCallToActionComponent}\n              {secondaryCallToActionComponent}\n              {primaryCallToActionComponent}\n            </TemplateHeaderButtons>\n          )}\n        </TemplateHeaderSecondaryContent>\n      </TemplateHeader>\n      <TemplateContent\n        odysseyDesignTokens={odysseyDesignTokens}\n        isDrawerOpen={isDrawerOpen}\n        drawerVariant={drawerVariant}\n      >\n        {children}\n        {drawer}\n      </TemplateContent>\n    </TemplateContainer>\n  );\n};\n\nconst MemoizedPageTemplate = memo(PageTemplate);\nMemoizedPageTemplate.displayName = \"PageTemplate\";\n\nexport { MemoizedPageTemplate as PageTemplate };\n"],"mappings":"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"}