@okta/odyssey-react-mui 1.28.1 → 1.32.0

package/dist/cjs/Badge.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.cjs","names":["_react","require","_OdysseyDesignTokensContext","_Box","_jsxRuntime","badgeContentMaxValues","exports","badgeTypeValues","badgeTypeColors","odysseyTokens","default","background","HueNeutral200","font","TypographyColorBody","attention","PalettePrimaryMain","TypographyColorInverse","danger","PaletteDangerMain","Badge","badgeContent","badgeContentMax","testId","translate","type","odysseyDesignTokens","useOdysseyDesignTokens","renderBadge","useMemo","greaterThanZeroContentMax","threeDigitLimitedMax","isOverContentMax","overContentMaxMessage","formattedContent","toString","badgeStyles","display","alignItems","justifyContent","minWidth","Spacing4","Spacing1","height","minHeight","padding","backgroundColor","color","borderRadius","length","BorderRadiusOuter","fontSize","TypographyScale0","fontFamily","TypographyFamilyMono","fontWeight","TypographyWeightBodyBold","lineHeight","transitionDuration","TransitionDurationMain","transitionProperty","hasNotificationCount","jsx","Box","sx","children","MemoizedBadge","memo","displayName"],"sources":["../../src/Badge.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 { CSSProperties, memo, useMemo } from \"react\";\n\nimport {\n  useOdysseyDesignTokens,\n  DesignTokens,\n} from \"./OdysseyDesignTokensContext.js\";\nimport { Box } from \"./Box.js\";\nimport type { HtmlProps } from \"./HtmlProps.js\";\n\nexport const badgeContentMaxValues = [\n  10, 20, 30, 40, 50, 60, 70, 80, 90, 100,\n] as const;\nexport const badgeTypeValues = [\"default\", \"attention\", \"danger\"] as const;\n\nexport type BadgeProps = {\n  badgeContent: number;\n  badgeContentMax?: (typeof badgeContentMaxValues)[number];\n  type?: (typeof badgeTypeValues)[number];\n} & Pick<HtmlProps, \"testId\" | \"translate\">;\n\nconst badgeTypeColors = (odysseyTokens: DesignTokens) => ({\n  default: {\n    background: odysseyTokens.HueNeutral200,\n    font: odysseyTokens.TypographyColorBody,\n  },\n  attention: {\n    background: odysseyTokens.PalettePrimaryMain,\n    font: odysseyTokens.TypographyColorInverse,\n  },\n  danger: {\n    background: odysseyTokens.PaletteDangerMain,\n    font: odysseyTokens.TypographyColorInverse,\n  },\n});\n\nconst Badge = ({\n  badgeContent,\n  badgeContentMax = 100,\n  testId,\n  translate,\n  type = \"default\",\n}: BadgeProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const renderBadge = useMemo(() => {\n    const greaterThanZeroContentMax = badgeContentMax > 0 ? badgeContentMax : 1;\n    const threeDigitLimitedMax =\n      greaterThanZeroContentMax > 999 ? 999 : greaterThanZeroContentMax;\n    const isOverContentMax = badgeContent > threeDigitLimitedMax;\n    const overContentMaxMessage = `${greaterThanZeroContentMax}+`;\n    const formattedContent = isOverContentMax\n      ? overContentMaxMessage\n      : badgeContent.toString();\n\n    const badgeStyles: CSSProperties = {\n      display: \"inline-flex\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      minWidth: `calc(${odysseyDesignTokens.Spacing4} + ${odysseyDesignTokens.Spacing1})`,\n      height: `calc(${odysseyDesignTokens.Spacing4} + ${odysseyDesignTokens.Spacing1})`,\n      minHeight: `calc(${odysseyDesignTokens.Spacing4} + ${odysseyDesignTokens.Spacing1})`,\n      // 6px horizontal padding per design requirements\n      padding: \"0 6px\",\n      backgroundColor: badgeTypeColors(odysseyDesignTokens)[type].background,\n      color: badgeTypeColors(odysseyDesignTokens)[type].font,\n      borderRadius:\n        formattedContent.length > 1\n          ? `${odysseyDesignTokens.BorderRadiusOuter}`\n          : \"50%\",\n      fontSize: `${odysseyDesignTokens.TypographyScale0}`,\n      fontFamily: `${odysseyDesignTokens.TypographyFamilyMono}`,\n      fontWeight: `${odysseyDesignTokens.TypographyWeightBodyBold}`,\n      lineHeight: 1,\n      transitionDuration: `${odysseyDesignTokens.TransitionDurationMain}`,\n      transitionProperty: `background-color, color`,\n    };\n\n    const hasNotificationCount = badgeContent && badgeContent > 0;\n\n    return hasNotificationCount ? (\n      <Box sx={badgeStyles} testId={testId} translate={translate}>\n        {formattedContent}\n      </Box>\n    ) : null;\n  }, [\n    badgeContent,\n    badgeContentMax,\n    odysseyDesignTokens,\n    testId,\n    translate,\n    type,\n  ]);\n\n  return renderBadge;\n};\n\nconst MemoizedBadge = memo(Badge);\nMemoizedBadge.displayName = \"Badge\";\n\nexport { MemoizedBadge as Badge };\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/Banner.cjs

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.bannerSeverityValues = exports.bannerRoleValues = exports.Banner = void 0;
+var _Alert2 = _interopRequireDefault(require("@mui/material/Alert"));
+var _AlertTitle2 = _interopRequireDefault(require("@mui/material/AlertTitle"));
+var _react = require("react");
+var _reactI18next = require("react-i18next");
+var _Link = require("./Link.cjs");
+var _ScreenReaderText = require("./ScreenReaderText.cjs");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/*!
+ * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+const bannerRoleValues = exports.bannerRoleValues = ["status", "alert"];
+const bannerSeverityValues = exports.bannerSeverityValues = ["success", "info", "warning", "error"];
+const Banner = ({
+  linkRel,
+  linkTarget,
+  linkText,
+  linkUrl,
+  onClose,
+  role,
+  severity,
+  text,
+  testId,
+  translate
+}) => {
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)();
+  return (0, _jsxRuntime.jsxs)(_Alert2.default, {
+    "data-se": testId,
+    onClose: onClose,
+    role: role,
+    severity: severity,
+    variant: "banner",
+    children: [(0, _jsxRuntime.jsx)(_ScreenReaderText.ScreenReaderText, {
+      translate: translate,
+      children: t(`severity.${severity}`)
+    }), (0, _jsxRuntime.jsx)(_AlertTitle2.default, {
+      translate: translate,
+      children: text
+    }), linkUrl && (0, _jsxRuntime.jsx)(_Link.Link, {
+      href: linkUrl,
+      rel: linkRel,
+      target: linkTarget,
+      translate: translate,
+      variant: "monochrome",
+      children: linkText
+    })]
+  });
+};
+const MemoizedBanner = exports.Banner = (0, _react.memo)(Banner);
+MemoizedBanner.displayName = "Banner";
+//# sourceMappingURL=Banner.cjs.map

package/dist/cjs/Banner.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.cjs","names":["_react","require","_reactI18next","_Link","_ScreenReaderText","_jsxRuntime","_interopRequireDefault","e","__esModule","default","bannerRoleValues","exports","bannerSeverityValues","Banner","linkRel","linkTarget","linkText","linkUrl","onClose","role","severity","text","testId","translate","t","useTranslation","jsxs","_Alert2","variant","children","jsx","ScreenReaderText","_AlertTitle2","Link","href","rel","target","MemoizedBanner","memo","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 { memo } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Alert, AlertColor, AlertTitle, AlertProps } from \"@mui/material\";\n\nimport type { HtmlProps } from \"./HtmlProps.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":";;;;;;;;AAYA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AAIA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,iBAAA,GAAAH,OAAA;AAAyD,IAAAI,WAAA,GAAAJ,OAAA;AAAA,SAAAK,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAlBzD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAUO,MAAMG,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,GAAG,CAAC,QAAQ,EAAE,OAAO,CAAU;AACrD,MAAME,oBAAkC,GAAAD,OAAA,CAAAC,oBAAA,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,GAAG,IAAAC,4BAAc,EAAC,CAAC;EAE9B,OACE,IAAApB,WAAA,CAAAqB,IAAA,EAAAC,OAAA,CAAAlB,OAAA;IACE,WAASa,MAAO;IAChBJ,OAAO,EAAEA,OAAQ;IACjBC,IAAI,EAAEA,IAAK;IACXC,QAAQ,EAAEA,QAAS;IACnBQ,OAAO,EAAC,QAAQ;IAAAC,QAAA,GAEhB,IAAAxB,WAAA,CAAAyB,GAAA,EAAC1B,iBAAA,CAAA2B,gBAAgB;MAACR,SAAS,EAAEA,SAAU;MAAAM,QAAA,EACpCL,CAAC,CAAC,YAAYJ,QAAQ,EAAE;IAAC,CACV,CAAC,EACnB,IAAAf,WAAA,CAAAyB,GAAA,EAAAE,YAAA,CAAAvB,OAAA;MAAYc,SAAS,EAAEA,SAAU;MAAAM,QAAA,EAAER;IAAI,CAAa,CAAC,EACpDJ,OAAO,IACN,IAAAZ,WAAA,CAAAyB,GAAA,EAAC3B,KAAA,CAAA8B,IAAI;MACHC,IAAI,EAAEjB,OAAQ;MACdkB,GAAG,EAAErB,OAAQ;MACbsB,MAAM,EAAErB,UAAW;MACnBQ,SAAS,EAAEA,SAAU;MACrBK,OAAO,EAAC,YAAY;MAAAC,QAAA,EAEnBb;IAAQ,CACL,CACP;EAAA,CACI,CAAC;AAEZ,CAAC;AAED,MAAMqB,cAAc,GAAA1B,OAAA,CAAAE,MAAA,GAAG,IAAAyB,WAAI,EAACzB,MAAM,CAAC;AACnCwB,cAAc,CAACE,WAAW,GAAG,QAAQ","ignoreList":[]}

package/dist/cjs/Box.cjs

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Box = void 0;
+var _Box2 = _interopRequireDefault(require("@mui/material/Box"));
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/*!
+ * 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.
+ */
+
+const Box = (0, _react.forwardRef)(({
+  children,
+  component,
+  id,
+  role,
+  sx,
+  testId,
+  translate
+}, ref) => (0, _jsxRuntime.jsx)(_Box2.default, {
+  ref: ref,
+  children: children,
+  component: component,
+  "data-se": testId,
+  id: id,
+  role: role,
+  sx: sx,
+  translate: translate
+}));
+const MemoizedBox = exports.Box = (0, _react.memo)(Box);
+MemoizedBox.displayName = "Box";
+//# sourceMappingURL=Box.cjs.map

package/dist/cjs/Box.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Box.cjs","names":["_react","require","_jsxRuntime","_interopRequireDefault","e","__esModule","default","Box","forwardRef","children","component","id","role","sx","testId","translate","ref","jsx","_Box2","MemoizedBox","exports","memo","displayName"],"sources":["../../src/Box.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 { Box as MuiBox, BoxProps as MuiBoxProps } from \"@mui/material\";\nimport { AriaRole, ReactNode, forwardRef, memo } from \"react\";\n\nimport type { HtmlProps } from \"./HtmlProps.js\";\n\nexport type BoxProps = {\n  children?: ReactNode;\n  component?: MuiBoxProps[\"component\"];\n  id?: MuiBoxProps[\"id\"];\n  role?: AriaRole;\n  sx?: MuiBoxProps[\"sx\"];\n} & Pick<HtmlProps, \"testId\" | \"translate\">;\n\nconst Box = forwardRef<HTMLElement, BoxProps>(\n  ({ children, component, id, role, sx, testId, translate }, ref) => (\n    <MuiBox\n      ref={ref}\n      children={children}\n      component={component}\n      data-se={testId}\n      id={id}\n      role={role}\n      sx={sx}\n      translate={translate}\n    />\n  ),\n);\n\nconst MemoizedBox = memo(Box);\nMemoizedBox.displayName = \"Box\";\n\nexport { MemoizedBox as Box };\n"],"mappings":";;;;;;;AAaA,IAAAA,MAAA,GAAAC,OAAA;AAA8D,IAAAC,WAAA,GAAAD,OAAA;AAAA,SAAAE,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAb9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAeA,MAAMG,GAAG,GAAG,IAAAC,iBAAU,EACpB,CAAC;EAAEC,QAAQ;EAAEC,SAAS;EAAEC,EAAE;EAAEC,IAAI;EAAEC,EAAE;EAAEC,MAAM;EAAEC;AAAU,CAAC,EAAEC,GAAG,KAC5D,IAAAd,WAAA,CAAAe,GAAA,EAAAC,KAAA,CAAAZ,OAAA;EACEU,GAAG,EAAEA,GAAI;EACTP,QAAQ,EAAEA,QAAS;EACnBC,SAAS,EAAEA,SAAU;EACrB,WAASI,MAAO;EAChBH,EAAE,EAAEA,EAAG;EACPC,IAAI,EAAEA,IAAK;EACXC,EAAE,EAAEA,EAAG;EACPE,SAAS,EAAEA;AAAU,CACtB,CAEL,CAAC;AAED,MAAMI,WAAW,GAAAC,OAAA,CAAAb,GAAA,GAAG,IAAAc,WAAI,EAACd,GAAG,CAAC;AAC7BY,WAAW,CAACG,WAAW,GAAG,KAAK","ignoreList":[]}

package/dist/cjs/Breadcrumbs.cjs

@@ -0,0 +1,166 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BreadcrumbList = exports.BreadcrumbContext = exports.Breadcrumb = void 0;
+var _Breadcrumbs2 = _interopRequireDefault(require("@mui/material/Breadcrumbs"));
+var _Menu2 = _interopRequireDefault(require("@mui/material/Menu"));
+var _ButtonBase2 = _interopRequireDefault(require("@mui/material/ButtonBase"));
+var _MenuItem2 = _interopRequireDefault(require("@mui/material/MenuItem"));
+var _react = require("react");
+var _index = require("./icons.generated/index.cjs");
+var _Typography = require("./Typography.cjs");
+var _reactI18next = require("react-i18next");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/*!
+ * 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.
+ */
+
+const BreadcrumbContext = exports.BreadcrumbContext = (0, _react.createContext)({
+  breadcrumbType: "listItem"
+});
+const BreadcrumbContent = _styled.default.span`
+  white-space: nowrap;
+  overflow: hidden;
+  max-width: 10rem;
+  text-overflow: ellipsis;
+`;
+const Breadcrumb = ({
+  children,
+  href,
+  iconName
+}) => {
+  const {
+    breadcrumbType
+  } = (0, _react.useContext)(BreadcrumbContext);
+  const breadcrumbContent = (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [iconName === "group" ? (0, _jsxRuntime.jsx)(_index.GroupIcon, {}) : iconName === "user" ? (0, _jsxRuntime.jsx)(_index.UserIcon, {}) : null, (0, _jsxRuntime.jsx)(BreadcrumbContent, {
+      children: children
+    })]
+  });
+  if (breadcrumbType === "menuItem") {
+    return (0, _jsxRuntime.jsx)(_MenuItem2.default, {
+      href: href,
+      children: breadcrumbContent
+    });
+  }
+  if (breadcrumbType === "currentPage") {
+    return (0, _jsxRuntime.jsx)(_Typography.Subordinate, {
+      ariaCurrent: "page",
+      color: "textPrimary",
+      children: breadcrumbContent
+    });
+  }
+  return (0, _jsxRuntime.jsx)(_ButtonBase2.default, {
+    href: href,
+    children: breadcrumbContent
+  });
+};
+exports.Breadcrumb = Breadcrumb;
+const breadcrumbProviderValue = {
+  currentPage: {
+    breadcrumbType: "currentPage"
+  },
+  listItem: {
+    breadcrumbType: "listItem"
+  },
+  menuItem: {
+    breadcrumbType: "menuItem"
+  }
+};
+const defaultTruncationValue = 5;
+const BreadcrumbList = ({
+  children,
+  homeHref,
+  maxVisibleItems: maxVisibleItemsProp = defaultTruncationValue,
+  testId,
+  translate
+}) => {
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)();
+  const [anchorEl, setAnchorEl] = (0, _react.useState)(null);
+  const maxVisibleItems = (0, _react.useMemo)(() => Math.min(Math.max(maxVisibleItemsProp, 0), children.length), [maxVisibleItemsProp, children]);
+  const breadcrumbSections = (0, _react.useMemo)(() => {
+    if (children.length <= maxVisibleItems) {
+      return {
+        beforeMenu: [],
+        insideMenu: [],
+        remainingBreadcrumbs: children
+      };
+    } else {
+      const menuStart = Math.floor(maxVisibleItems / 2);
+      const menuLength = children.length - maxVisibleItems;
+      return {
+        beforeMenu: children.slice(0, menuStart),
+        insideMenu: children.slice(menuStart, menuStart + menuLength),
+        remainingBreadcrumbs: children.slice(menuStart + menuLength)
+      };
+    }
+  }, [children, maxVisibleItems]);
+  const onMenuButtonClick = (0, _react.useCallback)(event => setAnchorEl(event.currentTarget), []);
+  const onCloseMenu = (0, _react.useCallback)(() => {
+    setAnchorEl(null);
+  }, []);
+  return (0, _jsxRuntime.jsxs)(_Breadcrumbs2.default, {
+    maxItems: children.length + 1,
+    "aria-label": t("breadcrumbs.label.text"),
+    "data-se": testId,
+    translate: translate,
+    children: [homeHref && (0, _jsxRuntime.jsx)(_ButtonBase2.default, {
+      href: homeHref,
+      "aria-label": t("breadcrumbs.home.text"),
+      children: (0, _jsxRuntime.jsx)(_index.HomeIcon, {})
+    }), breadcrumbSections.beforeMenu.map(breadcrumb => (0, _jsxRuntime.jsx)(BreadcrumbContext.Provider, {
+      value: breadcrumbProviderValue.listItem,
+      children: breadcrumb
+    })), breadcrumbSections.insideMenu.length > 0 && (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [(0, _jsxRuntime.jsx)(_ButtonBase2.default, {
+        onClick: onMenuButtonClick,
+        children: "..."
+      }), (0, _jsxRuntime.jsx)(_Menu2.default, {
+        open: Boolean(anchorEl),
+        onClose: onCloseMenu,
+        anchorEl: anchorEl,
+        anchorOrigin: {
+          horizontal: "left",
+          vertical: "bottom"
+        },
+        MenuListProps: {
+          sx: {
+            minWidth: 180
+          }
+        },
+        children: (0, _jsxRuntime.jsx)(BreadcrumbContext.Provider, {
+          value: breadcrumbProviderValue.menuItem,
+          children: breadcrumbSections.insideMenu
+        })
+      })]
+    }), breadcrumbSections.remainingBreadcrumbs.map((breadcrumb, i) => {
+      if (i === breadcrumbSections.remainingBreadcrumbs.length - 1) {
+        return (0, _jsxRuntime.jsx)(BreadcrumbContext.Provider, {
+          value: breadcrumbProviderValue.currentPage,
+          children: breadcrumb
+        });
+      }
+      return (0, _jsxRuntime.jsx)(BreadcrumbContext.Provider, {
+        value: breadcrumbProviderValue.listItem,
+        children: breadcrumb
+      });
+    })]
+  });
+};
+const MemoizedBreadcrumbList = exports.BreadcrumbList = (0, _react.memo)(BreadcrumbList);
+MemoizedBreadcrumbList.displayName = "BreadcrumbList";
+//# sourceMappingURL=Breadcrumbs.cjs.map

package/dist/cjs/Breadcrumbs.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs.cjs","names":["_react","require","_index","_Typography","_reactI18next","_styled","_interopRequireDefault","_jsxRuntime","e","__esModule","default","BreadcrumbContext","exports","createContext","breadcrumbType","BreadcrumbContent","styled","span","Breadcrumb","children","href","iconName","useContext","breadcrumbContent","jsxs","Fragment","jsx","GroupIcon","UserIcon","_MenuItem2","Subordinate","ariaCurrent","color","_ButtonBase2","breadcrumbProviderValue","currentPage","listItem","menuItem","defaultTruncationValue","BreadcrumbList","homeHref","maxVisibleItems","maxVisibleItemsProp","testId","translate","t","useTranslation","anchorEl","setAnchorEl","useState","useMemo","Math","min","max","length","breadcrumbSections","beforeMenu","insideMenu","remainingBreadcrumbs","menuStart","floor","menuLength","slice","onMenuButtonClick","useCallback","event","currentTarget","onCloseMenu","_Breadcrumbs2","maxItems","HomeIcon","map","breadcrumb","Provider","value","onClick","_Menu2","open","Boolean","onClose","anchorOrigin","horizontal","vertical","MenuListProps","sx","minWidth","i","MemoizedBreadcrumbList","memo","displayName"],"sources":["../../src/Breadcrumbs.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 {\n  ButtonBase,\n  Menu,\n  MenuItem,\n  Breadcrumbs as MuiBreadcrumbs,\n} from \"@mui/material\";\nimport {\n  MouseEventHandler,\n  ReactElement,\n  createContext,\n  memo,\n  useCallback,\n  useContext,\n  useMemo,\n  useState,\n} from \"react\";\nimport { GroupIcon, HomeIcon, UserIcon } from \"./icons.generated/index.js\";\nimport { Subordinate } from \"./Typography.js\";\nimport { useTranslation } from \"react-i18next\";\nimport { HtmlProps } from \"./HtmlProps.js\";\nimport styled from \"@emotion/styled\";\n\nexport type BreadcrumbType = \"listItem\" | \"menuItem\" | \"currentPage\";\n\nexport type BreadcrumbProps = {\n  children?: string;\n  href: string;\n  iconName?: \"user\" | \"group\";\n};\n\nexport type BreadcrumbsProps = {\n  children: ReactElement<typeof Breadcrumb>[];\n  homeHref?: string;\n  maxVisibleItems?: number;\n} & Pick<HtmlProps, \"testId\" | \"translate\">;\n\nexport type BreadcrumbContextType = {\n  breadcrumbType: BreadcrumbType;\n};\n\nexport const BreadcrumbContext = createContext<BreadcrumbContextType>({\n  breadcrumbType: \"listItem\",\n});\n\nconst BreadcrumbContent = styled.span`\n  white-space: nowrap;\n  overflow: hidden;\n  max-width: 10rem;\n  text-overflow: ellipsis;\n`;\n\nexport const Breadcrumb = ({ children, href, iconName }: BreadcrumbProps) => {\n  const { breadcrumbType } = useContext(BreadcrumbContext);\n\n  const breadcrumbContent = (\n    <>\n      {iconName === \"group\" ? (\n        <GroupIcon />\n      ) : iconName === \"user\" ? (\n        <UserIcon />\n      ) : null}\n      <BreadcrumbContent>{children}</BreadcrumbContent>\n    </>\n  );\n\n  if (breadcrumbType === \"menuItem\") {\n    return <MenuItem href={href}>{breadcrumbContent}</MenuItem>;\n  }\n\n  if (breadcrumbType === \"currentPage\") {\n    return (\n      <Subordinate ariaCurrent=\"page\" color=\"textPrimary\">\n        {breadcrumbContent}\n      </Subordinate>\n    );\n  }\n\n  // breadcrumbType === \"listItem\" is the default\n  // Provided here without a conditional to get TS to be quiet\n  // about potential undefined returns\n  return <ButtonBase href={href}>{breadcrumbContent}</ButtonBase>;\n};\n\nconst breadcrumbProviderValue: Record<\n  BreadcrumbType,\n  { breadcrumbType: BreadcrumbType }\n> = {\n  currentPage: {\n    breadcrumbType: \"currentPage\",\n  },\n  listItem: {\n    breadcrumbType: \"listItem\",\n  },\n  menuItem: {\n    breadcrumbType: \"menuItem\",\n  },\n};\n\nconst defaultTruncationValue = 5;\n\nconst BreadcrumbList = ({\n  children,\n  homeHref,\n  maxVisibleItems: maxVisibleItemsProp = defaultTruncationValue,\n  testId,\n  translate,\n}: BreadcrumbsProps) => {\n  const { t } = useTranslation();\n\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);\n\n  const maxVisibleItems = useMemo(\n    () => Math.min(Math.max(maxVisibleItemsProp, 0), children.length),\n    [maxVisibleItemsProp, children],\n  );\n\n  const breadcrumbSections = useMemo(() => {\n    if (children.length <= maxVisibleItems) {\n      return {\n        beforeMenu: [],\n        insideMenu: [],\n        remainingBreadcrumbs: children,\n      };\n    } else {\n      const menuStart = Math.floor(maxVisibleItems / 2);\n      const menuLength = children.length - maxVisibleItems;\n\n      return {\n        beforeMenu: children.slice(0, menuStart),\n        insideMenu: children.slice(menuStart, menuStart + menuLength),\n        remainingBreadcrumbs: children.slice(menuStart + menuLength),\n      };\n    }\n  }, [children, maxVisibleItems]);\n\n  const onMenuButtonClick = useCallback<MouseEventHandler<HTMLButtonElement>>(\n    (event) => setAnchorEl(event.currentTarget),\n    [],\n  );\n  const onCloseMenu = useCallback(() => {\n    setAnchorEl(null);\n  }, []);\n\n  return (\n    <MuiBreadcrumbs\n      maxItems={children.length + 1}\n      aria-label={t(\"breadcrumbs.label.text\")}\n      data-se={testId}\n      translate={translate}\n    >\n      {homeHref && (\n        <ButtonBase href={homeHref} aria-label={t(\"breadcrumbs.home.text\")}>\n          <HomeIcon />\n        </ButtonBase>\n      )}\n\n      {breadcrumbSections.beforeMenu.map((breadcrumb) => (\n        <BreadcrumbContext.Provider value={breadcrumbProviderValue.listItem}>\n          {breadcrumb}\n        </BreadcrumbContext.Provider>\n      ))}\n\n      {breadcrumbSections.insideMenu.length > 0 && (\n        <>\n          <ButtonBase onClick={onMenuButtonClick}>...</ButtonBase>\n          <Menu\n            open={Boolean(anchorEl)}\n            onClose={onCloseMenu}\n            anchorEl={anchorEl}\n            anchorOrigin={{ horizontal: \"left\", vertical: \"bottom\" }}\n            MenuListProps={{\n              sx: {\n                minWidth: 180,\n              },\n            }}\n          >\n            <BreadcrumbContext.Provider\n              value={breadcrumbProviderValue.menuItem}\n            >\n              {breadcrumbSections.insideMenu}\n            </BreadcrumbContext.Provider>\n          </Menu>\n        </>\n      )}\n\n      {breadcrumbSections.remainingBreadcrumbs.map((breadcrumb, i) => {\n        if (i === breadcrumbSections.remainingBreadcrumbs.length - 1) {\n          return (\n            <BreadcrumbContext.Provider\n              value={breadcrumbProviderValue.currentPage}\n            >\n              {breadcrumb}\n            </BreadcrumbContext.Provider>\n          );\n        }\n        return (\n          <BreadcrumbContext.Provider value={breadcrumbProviderValue.listItem}>\n            {breadcrumb}\n          </BreadcrumbContext.Provider>\n        );\n      })}\n    </MuiBreadcrumbs>\n  );\n};\n\nconst MemoizedBreadcrumbList = memo(BreadcrumbList);\nMemoizedBreadcrumbList.displayName = \"BreadcrumbList\";\n\nexport { MemoizedBreadcrumbList as BreadcrumbList };\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/Buttons/BaseButton.cjs

@@ -0,0 +1,109 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.buttonVariantValues = exports.buttonTypeValues = exports.buttonSizeValues = exports.BaseButton = void 0;
+var _Button2 = _interopRequireDefault(require("@mui/material/Button"));
+var _react = require("react");
+var _ButtonContext = require("./ButtonContext.cjs");
+var _MuiPropsContext = require("../MuiPropsContext.cjs");
+var _Tooltip = require("../Tooltip.cjs");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/*!
+ * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+const buttonSizeValues = exports.buttonSizeValues = ["small", "medium", "large"];
+const buttonTypeValues = exports.buttonTypeValues = ["button", "submit", "reset"];
+const buttonVariantValues = exports.buttonVariantValues = ["primary", "secondary", "danger", "dangerSecondary", "floating", "floatingAction"];
+const BaseButton = ({
+  ariaControls,
+  ariaDescribedBy,
+  ariaExpanded,
+  ariaHasPopup,
+  ariaLabel,
+  ariaLabelledBy,
+  buttonRef,
+  endIcon,
+  href,
+  id,
+  isDisabled,
+  isFullWidth: isFullWidthProp,
+  label = "",
+  children,
+  onClick,
+  size = "medium",
+  startIcon,
+  tabIndex,
+  testId,
+  tooltipText,
+  translate,
+  type = "button",
+  variant: variantProp
+}) => {
+  const muiProps = (0, _MuiPropsContext.useMuiProps)();
+  const variant = variantProp === "tertiary" ? "secondary" : variantProp;
+  const localButtonRef = (0, _react.useRef)(null);
+  const buttonContext = (0, _ButtonContext.useButton)();
+  const isFullWidth = (0, _react.useMemo)(() => buttonContext.isFullWidth ? buttonContext.isFullWidth : isFullWidthProp, [buttonContext, isFullWidthProp]);
+  (0, _react.useImperativeHandle)(buttonRef, () => ({
+    focus: () => {
+      localButtonRef.current?.focus();
+    }
+  }), []);
+  const renderButton = (0, _react.useCallback)(muiProps => {
+    return (0, _jsxRuntime.jsx)(_Button2.default, {
+      ...muiProps,
+      "aria-controls": ariaControls,
+      "aria-describedby": ariaDescribedBy,
+      "aria-expanded": ariaExpanded,
+      "aria-haspopup": ariaHasPopup,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "data-se": testId,
+      disabled: isDisabled,
+      endIcon: endIcon,
+      fullWidth: isFullWidth,
+      href: href,
+      id: id,
+      onClick: onClick,
+      ref: element => {
+        if (element) {
+          localButtonRef.current = element;
+          muiProps?.ref?.(element);
+        }
+      },
+      size: size,
+      startIcon: startIcon,
+      tabIndex: tabIndex,
+      translate: translate,
+      type: type,
+      variant: variant,
+      children: children ?? label
+    });
+  }, [ariaControls, ariaDescribedBy, ariaExpanded, ariaHasPopup, ariaLabel, ariaLabelledBy, endIcon, href, id, isDisabled, isFullWidth, label, children, onClick, size, startIcon, tabIndex, testId, translate, type, variant]);
+  if (tooltipText) {
+    return (0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
+      ariaType: "description",
+      placement: "top",
+      text: tooltipText,
+      children: (0, _jsxRuntime.jsx)(_MuiPropsContext.MuiPropsContext.Consumer, {
+        children: renderButton
+      })
+    });
+  }
+  return renderButton(muiProps);
+};
+const MemoizedBaseButton = exports.BaseButton = (0, _react.memo)(BaseButton);
+MemoizedBaseButton.displayName = "BaseButton";
+//# sourceMappingURL=BaseButton.cjs.map

package/dist/cjs/Buttons/BaseButton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseButton.cjs","names":["_react","require","_ButtonContext","_MuiPropsContext","_Tooltip","_jsxRuntime","_interopRequireDefault","e","__esModule","default","buttonSizeValues","exports","buttonTypeValues","buttonVariantValues","BaseButton","ariaControls","ariaDescribedBy","ariaExpanded","ariaHasPopup","ariaLabel","ariaLabelledBy","buttonRef","endIcon","href","id","isDisabled","isFullWidth","isFullWidthProp","label","children","onClick","size","startIcon","tabIndex","testId","tooltipText","translate","type","variant","variantProp","muiProps","useMuiProps","localButtonRef","useRef","buttonContext","useButton","useMemo","useImperativeHandle","focus","current","renderButton","useCallback","jsx","_Button2","disabled","fullWidth","ref","element","Tooltip","ariaType","placement","text","MuiPropsContext","Consumer","MemoizedBaseButton","memo","displayName"],"sources":["../../../src/Buttons/BaseButton.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 { Button as MuiButton } from \"@mui/material\";\nimport type { ButtonProps as MuiButtonProps } from \"@mui/material\";\nimport {\n  HTMLAttributes,\n  memo,\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from \"react\";\n\nimport { useButton } from \"./ButtonContext.js\";\nimport type { HtmlProps } from \"../HtmlProps.js\";\nimport { FocusHandle } from \"../inputUtils.js\";\nimport {\n  MuiPropsContext,\n  MuiPropsContextType,\n  useMuiProps,\n} from \"../MuiPropsContext.js\";\nimport { Tooltip } from \"../Tooltip.js\";\n\nexport const buttonSizeValues = [\"small\", \"medium\", \"large\"] as const;\nexport const buttonTypeValues = [\"button\", \"submit\", \"reset\"] as const;\nexport const buttonVariantValues = [\n  \"primary\",\n  \"secondary\",\n  \"danger\",\n  \"dangerSecondary\",\n  \"floating\",\n  \"floatingAction\",\n] as const;\n\nexport type BaseButtonProps = {\n  /**\n   * The ref forwarded to the Button\n   */\n  buttonRef?: React.RefObject<FocusHandle>;\n  /**\n   * Optional href to render the button as a link\n   */\n  href?: string;\n  /**\n   * The ID of the Button\n   */\n  id?: string;\n  /**\n   * Determines whether the Button is disabled\n   */\n  isDisabled?: boolean;\n  /**\n   * Determines whether the Button should take up the full available width\n   */\n  isFullWidth?: boolean;\n  /**\n   * The size of the button\n   */\n  size?: (typeof buttonSizeValues)[number];\n  tabIndex?: HTMLAttributes<HTMLElement>[\"tabIndex\"];\n  /**\n   * The tooltip text for the Button if it's icon-only\n   */\n  tooltipText?: string;\n  /**\n   * The type of the HTML button element\n   */\n  type?: (typeof buttonTypeValues)[number];\n  /**\n   * The variant of the Button\n   */\n  variant: (typeof buttonVariantValues)[number] | \"tertiary\";\n  /**\n   * The click event handler for the Button\n   */\n  onClick?: MuiButtonProps[\"onClick\"];\n  /**\n   * The contents of the button. Only available internal to Odyssey here in BaseButton. If set, label is ignored.\n   */\n  children?: ReactNode;\n  /**\n   * The icon element to display at the end of the Button\n   */\n  endIcon?: ReactElement;\n  /**\n   * The text content of the Button\n   */\n  label?: string;\n  /**\n   * The icon element to display at the start of the Button\n   */\n  startIcon?: ReactElement;\n};\n\n// These are split and exported separately from the above because wrappers of this (e.g. Button) will\n// want to omit children, which they cannot do from the combined union type. Instead, they should\n// omit from BaseButtonProps, then union with the AdditionalBaseButtonProps (as seen in Button)\nexport type AdditionalBaseButtonProps = Pick<\n  HtmlProps,\n  | \"ariaControls\"\n  | \"ariaDescribedBy\"\n  | \"ariaExpanded\"\n  | \"ariaHasPopup\"\n  | \"ariaLabel\"\n  | \"ariaLabelledBy\"\n  | \"tabIndex\"\n  | \"testId\"\n  | \"translate\"\n>;\n\nconst BaseButton = ({\n  ariaControls,\n  ariaDescribedBy,\n  ariaExpanded,\n  ariaHasPopup,\n  ariaLabel,\n  ariaLabelledBy,\n  buttonRef,\n  endIcon,\n  href,\n  id,\n  isDisabled,\n  isFullWidth: isFullWidthProp,\n  label = \"\",\n  children,\n  onClick,\n  size = \"medium\",\n  startIcon,\n  tabIndex,\n  testId,\n  tooltipText,\n  translate,\n  type = \"button\",\n  variant: variantProp,\n}: BaseButtonProps & AdditionalBaseButtonProps) => {\n  const muiProps = useMuiProps();\n\n  // We're deprecating the \"tertiary\" variant, so map it to\n  // \"secondary\" in lieu of making a breaking change\n  const variant = variantProp === \"tertiary\" ? \"secondary\" : variantProp;\n  const localButtonRef = useRef<HTMLButtonElement | HTMLAnchorElement>(null);\n  const buttonContext = useButton();\n  const isFullWidth = useMemo(\n    () =>\n      buttonContext.isFullWidth ? buttonContext.isFullWidth : isFullWidthProp,\n    [buttonContext, isFullWidthProp],\n  );\n\n  useImperativeHandle(\n    buttonRef,\n    () => ({\n      focus: () => {\n        localButtonRef.current?.focus();\n      },\n    }),\n    [],\n  );\n\n  const renderButton = useCallback(\n    (muiProps: MuiPropsContextType) => {\n      return (\n        <MuiButton\n          {...muiProps}\n          aria-controls={ariaControls}\n          aria-describedby={ariaDescribedBy}\n          aria-expanded={ariaExpanded}\n          aria-haspopup={ariaHasPopup}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n          data-se={testId}\n          disabled={isDisabled}\n          endIcon={endIcon}\n          fullWidth={isFullWidth}\n          href={href}\n          id={id}\n          onClick={onClick}\n          ref={(element) => {\n            if (element) {\n              (\n                localButtonRef as React.MutableRefObject<\n                  HTMLButtonElement | HTMLAnchorElement\n                >\n              ).current = element;\n              //@ts-expect-error ref is not an optional prop on the props context type\n              muiProps?.ref?.(element);\n            }\n          }}\n          size={size}\n          startIcon={startIcon}\n          tabIndex={tabIndex}\n          translate={translate}\n          type={type}\n          variant={variant}\n        >\n          {children ?? label}\n        </MuiButton>\n      );\n    },\n    [\n      ariaControls,\n      ariaDescribedBy,\n      ariaExpanded,\n      ariaHasPopup,\n      ariaLabel,\n      ariaLabelledBy,\n      endIcon,\n      href,\n      id,\n      isDisabled,\n      isFullWidth,\n      label,\n      children,\n      onClick,\n      size,\n      startIcon,\n      tabIndex,\n      testId,\n      translate,\n      type,\n      variant,\n    ],\n  );\n\n  if (tooltipText) {\n    return (\n      <Tooltip ariaType=\"description\" placement=\"top\" text={tooltipText}>\n        <MuiPropsContext.Consumer>{renderButton}</MuiPropsContext.Consumer>\n      </Tooltip>\n    );\n  }\n\n  return renderButton(muiProps);\n};\n\nconst MemoizedBaseButton = memo(BaseButton);\nMemoizedBaseButton.displayName = \"BaseButton\";\n\nexport { MemoizedBaseButton as BaseButton };\n"],"mappings":"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","ignoreList":[]}