@okta/odyssey-react-mui 1.28.1 → 1.32.0

package/.svgrrc.cjs

@@ -10,4 +10,4 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-module.exports = require("@okta/odyssey-svgr");
+module.exports = require("@okta/odyssey-icons");

package/CHANGELOG.md

@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.32.0](https://github.com/okta/odyssey/compare/v1.31.0...v1.32.0) (2025-02-05)
+
+### Features
+
+- cjs export ([#2480](https://github.com/okta/odyssey/issues/2480)) ([9482a70](https://github.com/okta/odyssey/commit/9482a7058750c9fa4448ade37e97b4d56c4f7e4a))
+- do not put ScopedCssBaseline around app content in UiShell ([#2486](https://github.com/okta/odyssey/issues/2486)) ([a8c5a5f](https://github.com/okta/odyssey/commit/a8c5a5fc5d2d2a61aaef11e0fc4953cf021c947e))
+
+### Bug Fixes
+
+- move vitest deps to devDeps ([#2481](https://github.com/okta/odyssey/issues/2481)) ([4a3cc37](https://github.com/okta/odyssey/commit/4a3cc37bd4947a360a609d695e5b36d76fa8c9e4))
+- Next.js esm and cjs issues with SSR ([#2491](https://github.com/okta/odyssey/issues/2491)) ([8f0ac43](https://github.com/okta/odyssey/commit/8f0ac431cb398bf07e8946fc4eb915044916f239))
+- sidenav footer component does not use the theme background color ([#2489](https://github.com/okta/odyssey/issues/2489)) ([bb4538d](https://github.com/okta/odyssey/commit/bb4538dcfb27c64575c27a426e7f4fe08850a251))
+- type update for sidenavitem to ignore isSortable prop ([#2485](https://github.com/okta/odyssey/issues/2485)) ([bfae7b2](https://github.com/okta/odyssey/commit/bfae7b269a3e6021de4d3bb543120e7a66ac4580))
+- UI Shell App Container ([#2495](https://github.com/okta/odyssey/issues/2495)) ([e93061c](https://github.com/okta/odyssey/commit/e93061cd7a4ac04c9b3167e52474c2f9568e48cd))
+- uishell should allow horizontal scrolling if necessary ([#2493](https://github.com/okta/odyssey/issues/2493)) ([b134f23](https://github.com/okta/odyssey/commit/b134f237af9d1b7bf5d4ff8a80ea00405fabfe6b))
+
+## [1.31.4](https://github.com/okta/odyssey/compare/v1.31.3...v1.31.4) (2025-02-03)
+
+### Bug Fixes
+
+- get app content out of shadow DOM altogether ([bab1cb2](https://github.com/okta/odyssey/commit/bab1cb28f185f1676bf97e1239ef89d055a04820))
+- sidenav footer component does not use the theme background color ([#2489](https://github.com/okta/odyssey/issues/2489)) ([e2e90ec](https://github.com/okta/odyssey/commit/e2e90ec90580fd5b9324a1f7142ad8444424dfec))
+
+## [1.31.1](https://github.com/okta/odyssey/compare/v1.31.0...v1.31.1) (2025-01-23)
+
+**Note:** Version bump only for package @okta/odyssey-react-mui
+
+## [1.29.0](https://github.com/okta/odyssey/compare/v1.28.0...v1.29.0) (2024-12-11)
+
+**Note:** Version bump only for package @okta/odyssey-react-mui
+
+## [1.28.2](https://github.com/okta/odyssey/compare/v1.28.1...v1.28.2) (2024-12-03)
+
+**Note:** Version bump only for package @okta/odyssey-react-mui
+
 ## [1.28.1](https://github.com/okta/odyssey/compare/v1.28.0...v1.28.1) (2024-12-02)
 
 **Note:** Version bump only for package @okta/odyssey-react-mui

package/README.md

@@ -57,7 +57,7 @@ $ yarn add @mui/material
 ```jsx
 import { OdysseyThemeProvider } from "@okta/odyssey-react-mui";
 
-import { myMaterialUiTheme } from "./myMaterialUiTheme";
+import { myMaterialUiTheme } from "./myMaterialUiTheme.js";
 
 const YourAppRoot = ({ children }) => (
   <OdysseyThemeProvider theme={myMaterialUiTheme}>{children}<OdysseyThemeProvider>
@@ -87,7 +87,7 @@ It is possible to provide `nonce`, `themeOverride`, `languageCode` and `translat
 
 ```jsx
 import { OdysseyProvider } from "@okta/odyssey-react-mui";
-import { theme } from "./themeOverride";
+import { theme } from "./themeOverride.js";
 
 const nonce =
   "K6ybeaqlwaAKk0hQF?hE2qZ0Ar3M=G4Bpr-XFk1x4XbL3dH3T5=mk0aXeWX9ifn9";

package/babel.config.cjs

@@ -1,5 +1,5 @@
 /*!
- * Copyright (c) 2021-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * 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.
@@ -10,82 +10,103 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-module.exports = {
-  presets: [
-    [
-      "@okta/odyssey-babel-preset",
-      {
-        odyssey: false,
-        react: {
-          runtime: "automatic",
-        },
-      },
-    ],
-  ],
+const presetEnvConfig = {
+  cjs: {},
+  esm: {
+    modules: false,
+  },
+};
 
-  plugins: [
-    [
-      "babel-plugin-import",
-      {
-        libraryName: "@mui/material",
-        libraryDirectory: "",
-        camel2DashComponentName: false,
-      },
-      "core",
+/**
+ * @type {(api: import('@babel/core').ConfigAPI) => import('@babel/core').TransformOptions}
+ */
+const babelConfig = (api) => {
+  // @ts-expect-error Something is wrong with this type. The function exists.
+  api.cache(true);
+
+  return {
+    plugins: [
+      [
+        "babel-plugin-import",
+        {
+          libraryName: "@mui/material",
+          libraryDirectory: "",
+          camel2DashComponentName: false,
+        },
+        "core",
+      ],
+      [
+        "babel-plugin-import",
+        {
+          libraryName: "@mui/icons-material",
+          libraryDirectory: "",
+          camel2DashComponentName: false,
+        },
+        "icons",
+      ],
     ],
-    [
-      "babel-plugin-import",
-      {
-        libraryName: "@mui/icons-material",
-        libraryDirectory: "",
-        camel2DashComponentName: false,
-      },
-      "icons",
+    presets: [
+      "@babel/preset-env",
+      [
+        "@babel/preset-react",
+        {
+          runtime: "automatic",
+        },
+      ],
+      "@babel/preset-typescript",
     ],
-  ],
 
-  env: {
-    production: {
-      plugins: [
-        "@okta/fully-specified",
-        [
-          "babel-plugin-import",
-          {
-            libraryName: "@mui/material",
-            libraryDirectory: "",
-            camel2DashComponentName: false,
-          },
-          "core",
-        ],
-        [
-          "babel-plugin-import",
-          {
-            libraryName: "@mui/icons-material",
-            libraryDirectory: "",
-            camel2DashComponentName: false,
-          },
-          "icons",
-        ],
-      ],
-      presets: [
-        [
-          "@okta/odyssey-babel-preset",
-          {
-            odyssey: false,
-            env: {
-              modules: false,
+    env: {
+      production: {
+        comments: false,
+        ignore: [/\.test\.|\.stories\./i],
+        plugins: [
+          [
+            "babel-plugin-import",
+            {
+              libraryName: "@mui/material",
+              libraryDirectory: "",
+              camel2DashComponentName: false,
             },
-            react: {
+            "core",
+          ],
+          [
+            "babel-plugin-import",
+            {
+              libraryName: "@mui/icons-material",
+              libraryDirectory: "",
+              camel2DashComponentName: false,
+            },
+            "icons",
+          ],
+          [
+            "replace-import-extension",
+            process.env.ODYSSEY_BUILD_MODE === "cjs"
+              ? {
+                  extMapping: { ".js": ".cjs" },
+                }
+              : {},
+          ],
+        ],
+        presets: [
+          [
+            "@babel/preset-env",
+            presetEnvConfig[process.env.ODYSSEY_BUILD_MODE],
+          ],
+          [
+            "@babel/preset-react",
+            {
               runtime: "automatic",
             },
-          },
+          ],
+          "@babel/preset-typescript",
         ],
-      ],
-      comments: false,
-      shouldPrintComment: (val) => {
-        return /Okta, Inc\.|@license|@preserve/.test(val);
+        shouldPrintComment: (val) => {
+          return /Okta, Inc\.|@license|@preserve/.test(val);
+        },
       },
-      ignore: [/\.test\.|\.stories\./i],
     },
-  },
+  };
 };
+
+module.exports = babelConfig;

package/dist/cjs/@types/i18next.d.cjs

@@ -0,0 +1,4 @@
+"use strict";
+
+require("i18next");
+//# sourceMappingURL=i18next.d.cjs.map

package/dist/cjs/@types/i18next.d.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"i18next.d.cjs","names":["require"],"sources":["../../../src/@types/i18next.d.ts"],"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 \"i18next\";\nimport { defaultNS, keySeparator, resources } from \"../i18n.js\";\n\ndeclare module \"i18next\" {\n  interface CustomTypeOptions {\n    defaultNS: typeof defaultNS;\n    keySeparator: typeof keySeparator;\n    resources: {\n      odyssey: (typeof resources)[\"en\"];\n    };\n  }\n}\n"],"mappings":";;AAYAA,OAAA","ignoreList":[]}

package/dist/cjs/@types/properties.d.cjs

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=properties.d.cjs.map

package/dist/cjs/@types/properties.d.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"properties.d.cjs","names":[],"sources":["../../../src/@types/properties.d.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/* eslint-disable @typescript-eslint/no-explicit-any */\n\n/**\n * Copied this in from a PR that will hopefully get merged:\n * @see https://github.com/gagle/node-properties/pull/35\n */\ndeclare module \"properties\" {\n  export interface ParseOptions {\n    /**\n     * By default `parse()` reads a String.\n     * If you want to read a file, set this option to true.\n     * If this option is used, the callback is mandatory.\n     * It gets 2 parameters, a possible error and the object with all the properties.\n     */\n    path?: boolean;\n\n    /**\n     * Allows you to add additional comment tokens.\n     * The token must be a single printable non-whitespae ascii character.\n     * If the `strict` option is not set, the tokens `#` and `!` are parsed as comment tokens.\n     *\n     * @example\n     * comments: \";\"\n     * @example\n     * comments: [\";\", \"@\"]\n     */\n    comments?: string | string[];\n\n    /**\n     * Allows you to add additional separator tokens.\n     * The token must be a single printable non-whitespae ascii character.\n     * If the `strict` option is not set, the tokens `=` and `:` are parsed as comment tokens.\n     *\n     * @example\n     * separators: \"-\"\n     * @example\n     * separators: [\"-\", \">\"]\n     */\n    separators?: string | string[];\n\n    /**\n     * This option can be used with the `comments` and `separators` options.\n     * If true, **only** the tokens specified in these options are used to parse comments and separators.\n     */\n    strict?: boolean;\n\n    /**\n     * Parses INI sections.\n     * Read the INI section for further details.\n     *\n     * @link https://www.npmjs.com/package/properties#ini\n     */\n    sections?: boolean;\n\n    /**\n     * Parses dot separated keys as JavaScript objects.\n     *\n     * Look at the namespaces section for further details.\n     * @link https://www.npmjs.com/package/properties#namespaces\n     */\n    namespaces?: boolean;\n\n    /**\n     * Allows you to read the value of a key while the file is being parsed.\n     *\n     * Look at the variables section for further details.\n     * @link https://www.npmjs.com/package/properties#variables\n     */\n    variables?: boolean;\n\n    /**\n     * External variables can be passed to the file if the variables option is enabled.\n     *\n     * Look at the variables section for further details.\n     * @link https://www.npmjs.com/package/properties#variables\n     */\n    vars?: boolean;\n\n    /**\n     * Files can be linked and imported with the include key.\n     * If this option is used, the callback is mandatory.\n     *\n     * Look at the include section for further details.\n     * @link https://www.npmjs.com/package/properties#include\n     */\n    include?: boolean;\n\n    /**\n     * Each property or section can be removed or modified from the final object.\n     * It's similar to the reviver of the `JSON.parse()` function.\n     *\n     * The reviver it's exactly the same as the replacer from `stringify()`.\n     * The same function can be reused.\n     *\n     * The callback gets 3 parameters: key, value and section.\n     *\n     * A property has a key and a value and can belong to a section.\n     * If it's a global property, the section is set to null.\n     * If **undefined** is returned, the property will be removed from the final object, otherwise the returned value will be used as the property value.\n     *\n     * If the key and the value are set to null, then it's a section line.\n     * If it returns a falsy value, it won't be added to the final object, the entire section _including all the properties_ will be discarded.\n     * If it returns a truthy value, the section is parsed.\n     *\n     * For your convenience, to know whether the line is a property or section you can access to `this.isProperty` and `this.isSection` from inside the replacer function.\n     * Also, `this.assert()` can be used to return the default value, the unmodified value that will be used to parse the line.\n     *\n     * Look at the reviver example for further details.\n     * @link https://github.com/gagle/node-properties/blob/master/examples/reviver/reviver.js\n     */\n    reviver?: (this: Context, key: any, value: any) => any;\n  }\n\n  export interface Context {\n    assert(): any;\n  }\n\n  /**\n   * Parses a .properties string.\n   *\n   * @param data\n   * @param options\n   */\n  export function parse(data: string, options?: ParseOptions): object;\n\n  /**\n   * Parses a .properties string.\n   *\n   * If a callback is given, the result is returned as the second parameter. Some options will require a callback.\n   *\n   * @param data\n   * @param cb\n   */\n  export function parse(\n    data: string,\n    cb: (err: Error, result: { [key: string]: unknown } | undefined) => void,\n  ): void;\n\n  /**\n   * Parses a .properties string.\n   *\n   * If a callback is given, the result is returned as the second parameter. Some options will require a callback.\n   *\n   * @param data\n   * @param options\n   * @param cb\n   */\n  export function parse(\n    data: string,\n    options: ParseOptions | undefined,\n    cb: (err: Error, result: { [key: string]: unknown } | undefined) => void,\n  ): void;\n\n  export interface StringifyOptions {\n    /**\n     * By default `stringify()` returns a string.\n     * If you want to write it to a file, use this option and pass the path of a file.\n     * If this option is used, the callback is mandatory.\n     * It gets two parameters, a possible error and the string.\n     */\n    path?: string;\n\n    /**\n     * The token to use to write comments.\n     * It must be a single printable non-whitespace ascii character.\n     * @default `#`\n     */\n    comment?: string;\n\n    /**\n     * The token to use to separate keys from values.\n     * It must be a single printable non-whitespace ascii character.\n     * @default `=`\n     */\n    separator?: string;\n\n    /**\n     * The .properties specification uses iso 8859-1 (latin-1) as a default encoding.\n     * In the other hand, Node.js has a utf8 default encoding.\n     * This means that if you want a full compatibility with Java, that is, you are generating a .properties file that is going to be read by a Java program, then set this option to true.\n     * This will encode all ascii extended and multibyte characters to their unicode string representation (`\\uXXXX`).\n     *\n     * Non-printable control codes (control sets 0 and 1) are always encoded as unicode strings except `\\t`, `\\n`, `\\f` and `\\r`.\n     *\n     * If you are in a platform that can handle utf8 strings, e.g. Node.js, you don't need to use this option.\n     */\n    unicode?: boolean;\n\n    /**\n     * Each property or section can be removed or modified from the final string.\n     * It's similar to the replacer of the `JSON.stringify()` function.\n     *\n     * The replacer it's exatcly the same as the reviver from `parse()`.\n     * The same function can be reused.\n     *\n     * The callback gets three parameters: key, value and section.\n     *\n     * A property has a key and a value and can belong to a section.\n     * If it's a global property, the section is set to null.\n     * If **undefined** is returned, the property won't be stringified, otherwise the returned value will be used as the property value.\n     *\n     * If the key and the value are set to null, then it's a section line.\n     * If it returns a falsy value, it won't be added to the final string, the entire section _including all the properties_ will be discarded.\n     * If it returns a truthy value, the section is stringified.\n     *\n     * For your convenience, to know whether the line is a property or section you can access to `this.isProperty` and `this.isSection` from inside the replacer function.\n     * Also, `this.assert()` can be used to return the default value, the unmodified value that will be used to stringify the line.\n     *\n     * Look at the replacer example for further details.\n     * @link https://github.com/gagle/node-properties/blob/master/examples/replacer.js\n     */\n    replacer?: (this: Context, key: string, value: any) => any;\n  }\n\n  /**\n   * Stringifies an `object` or a `Stringifier`.\n   *\n   * If you don't need to add sections or comments simply pass an object, otherwise use a `Stringifier`.\n   *\n   * @param obj\n   * @param options\n   */\n  export function stringify(obj: object, options?: StringifyOptions): string;\n\n  /**\n   * Stringifies an `object` or a `Stringifier`.\n   *\n   * If you don't need to add sections or comments simply pass an object, otherwise use a `Stringifier`.\n   *\n   * The callback is only necessary when the `path` option is used.\n   *\n   * @param obj\n   * @param options\n   * @param cb\n   */\n  export function stringify(\n    obj: object,\n    options: StringifyOptions | undefined,\n    cb: (err: Error, result: string) => void,\n  ): void;\n\n  /**\n   * This class is used when you want to add sections or comments to the final string.\n   *\n   * To create a Stringifier use the `createStringifier()` function.\n   *\n   * Look at the stringify-ini example for further details.\n   * @link https://github.com/gagle/node-properties/blob/master/examples/ini/stringify-ini.js\n   */\n  export interface Stringifier {\n    /**\n     * Writes a header comment.\n     * It will be written to the top of the final string.\n     * Returns the Stringifier being used.\n     */\n    header(comment: string): this;\n\n    /**\n     * Writes a property line.\n     * It takes an object with three options: `key`, `value` and comment.\n     * Both the key and the value are converted into a string automatically.\n     * Returns the Stringifier being used.\n     */\n    property(obj: { key?: string; value?: string; comment?: string }): this;\n\n    /**\n     * Writes a section line.\n     * It gets an object with two options: `name` and `comment`.\n     * The name is converted into a string.\n     * If you don't need to write a comment, you can pass the name instead of an object.\n     * Returns the stringifier being used.\n     */\n    section(obj: string | { name: string; comment?: string }): this;\n  }\n\n  /**\n   * Returns a new `Stringifier` instance.\n   */\n  export function createStringifier(): Stringifier;\n}\n"],"mappings":"","ignoreList":[]}

package/dist/cjs/@types/react-augment.d.cjs

@@ -0,0 +1,4 @@
+"use strict";
+
+require("react");
+//# sourceMappingURL=react-augment.d.cjs.map

package/dist/cjs/@types/react-augment.d.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-augment.d.cjs","names":["require"],"sources":["../../../src/@types/react-augment.d.ts"],"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 \"react\";\n\ndeclare module \"react\" {\n  type DataAttributeKey = `data-${string}`;\n  interface InputHTMLAttributes<T> extends HTMLAttributes<T> {\n    // Allows data-* props to be passed to inputProps in nested MUI components\n    // see: https://github.com/mui/material-ui/issues/20160\n    [dataAttribute: DataAttributeKey]: string | undefined;\n  }\n}\n"],"mappings":";;AAYAA,OAAA","ignoreList":[]}

package/dist/cjs/Accordion.cjs

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.accordionVariantValues = exports.Accordion = void 0;
+var _Accordion2 = _interopRequireDefault(require("@mui/material/Accordion"));
+var _AccordionDetails2 = _interopRequireDefault(require("@mui/material/AccordionDetails"));
+var _AccordionSummary2 = _interopRequireDefault(require("@mui/material/AccordionSummary"));
+var _react = require("react");
+var _index = require("./icons.generated/index.cjs");
+var _Typography = require("./Typography.cjs");
+var _useUniqueId = require("./useUniqueId.cjs");
+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 accordionVariantValues = exports.accordionVariantValues = ["default", "borderless"];
+const Accordion = ({
+  children,
+  label,
+  id: idOverride,
+  isDefaultExpanded,
+  isDisabled,
+  isExpanded,
+  onChange,
+  testId,
+  translate,
+  variant = "default"
+}) => {
+  const id = (0, _useUniqueId.useUniqueId)(idOverride);
+  const headerId = `${id}-header`;
+  const contentId = `${id}-content`;
+  return (0, _jsxRuntime.jsxs)(_Accordion2.default, {
+    "data-se": testId,
+    "data-ods-variant": variant,
+    defaultExpanded: isDefaultExpanded,
+    disabled: isDisabled,
+    disableGutters: true,
+    expanded: isExpanded,
+    onChange: onChange,
+    children: [(0, _jsxRuntime.jsx)(_AccordionSummary2.default, {
+      "aria-controls": contentId,
+      expandIcon: (0, _jsxRuntime.jsx)(_index.ChevronDownIcon, {}),
+      id: headerId,
+      children: (0, _jsxRuntime.jsx)(_Typography.Support, {
+        component: "div",
+        translate: translate,
+        children: label
+      })
+    }), (0, _jsxRuntime.jsx)(_AccordionDetails2.default, {
+      "aria-labelledby": headerId,
+      children: children
+    })]
+  });
+};
+const MemoizedAccordion = exports.Accordion = (0, _react.memo)(Accordion);
+MemoizedAccordion.displayName = "Accordion";
+//# sourceMappingURL=Accordion.cjs.map

package/dist/cjs/Accordion.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.cjs","names":["_react","require","_index","_Typography","_useUniqueId","_jsxRuntime","_interopRequireDefault","e","__esModule","default","accordionVariantValues","exports","Accordion","children","label","id","idOverride","isDefaultExpanded","isDisabled","isExpanded","onChange","testId","translate","variant","useUniqueId","headerId","contentId","jsxs","_Accordion2","defaultExpanded","disabled","disableGutters","expanded","jsx","_AccordionSummary2","expandIcon","ChevronDownIcon","Support","component","_AccordionDetails2","MemoizedAccordion","memo","displayName"],"sources":["../../src/Accordion.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 { ReactNode, memo } from \"react\";\nimport type { HtmlProps } from \"./HtmlProps.js\";\nimport {\n  Accordion as MuiAccordion,\n  AccordionDetails as MuiAccordionDetails,\n  AccordionSummary as MuiAccordionSummary,\n  AccordionProps as MuiAccordionProps,\n} from \"@mui/material\";\nimport { ChevronDownIcon } from \"./icons.generated/index.js\";\nimport { Support } from \"./Typography.js\";\nimport { useUniqueId } from \"./useUniqueId.js\";\n\nexport const accordionVariantValues = [\"default\", \"borderless\"] as const;\n\nexport type AccordionProps = {\n  /**\n   * The content of the Accordion itself\n   */\n  children: ReactNode;\n  /**\n   * Defines IDs for the header and the content of the Accordion\n   */\n  id?: string;\n  /**\n   * The label text for the AccordionSummary\n   */\n  label: 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   * Whether the item is expanded\n   */\n  isExpanded?: boolean;\n  /**\n   * Event fired when the expansion state of the accordion is changed\n   */\n  /**\n   * Visual style for the accordion (default or borderless)\n   */\n  variant?: (typeof accordionVariantValues)[number];\n  onChange?: MuiAccordionProps[\"onChange\"];\n} & (\n  | {\n      isExpanded: boolean;\n      isDefaultExpanded?: never;\n    }\n  | {\n      isDefaultExpanded?: boolean;\n      isExpanded?: never;\n    }\n) &\n  Pick<HtmlProps, \"testId\" | \"translate\">;\n\nconst Accordion = ({\n  children,\n  label,\n  id: idOverride,\n  isDefaultExpanded,\n  isDisabled,\n  isExpanded,\n  onChange,\n  testId,\n  translate,\n  variant = \"default\",\n}: AccordionProps) => {\n  const id = useUniqueId(idOverride);\n  const headerId = `${id}-header`;\n  const contentId = `${id}-content`;\n\n  return (\n    <MuiAccordion\n      data-se={testId}\n      data-ods-variant={variant}\n      defaultExpanded={isDefaultExpanded}\n      disabled={isDisabled}\n      disableGutters\n      expanded={isExpanded}\n      onChange={onChange}\n    >\n      <MuiAccordionSummary\n        aria-controls={contentId}\n        expandIcon={<ChevronDownIcon />}\n        id={headerId}\n      >\n        <Support component=\"div\" translate={translate}>\n          {label}\n        </Support>\n      </MuiAccordionSummary>\n      <MuiAccordionDetails aria-labelledby={headerId}>\n        {children}\n      </MuiAccordionDetails>\n    </MuiAccordion>\n  );\n};\n\nconst MemoizedAccordion = memo(Accordion);\nMemoizedAccordion.displayName = \"Accordion\";\n\nexport { MemoizedAccordion as Accordion };\n"],"mappings":";;;;;;;;;AAYA,IAAAA,MAAA,GAAAC,OAAA;AAQA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AACA,IAAAG,YAAA,GAAAH,OAAA;AAA+C,IAAAI,WAAA,GAAAJ,OAAA;AAAA,SAAAK,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAtB/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAcO,MAAMG,sBAAsB,GAAAC,OAAA,CAAAD,sBAAA,GAAG,CAAC,SAAS,EAAE,YAAY,CAAU;AA+CxE,MAAME,SAAS,GAAGA,CAAC;EACjBC,QAAQ;EACRC,KAAK;EACLC,EAAE,EAAEC,UAAU;EACdC,iBAAiB;EACjBC,UAAU;EACVC,UAAU;EACVC,QAAQ;EACRC,MAAM;EACNC,SAAS;EACTC,OAAO,GAAG;AACI,CAAC,KAAK;EACpB,MAAMR,EAAE,GAAG,IAAAS,wBAAW,EAACR,UAAU,CAAC;EAClC,MAAMS,QAAQ,GAAG,GAAGV,EAAE,SAAS;EAC/B,MAAMW,SAAS,GAAG,GAAGX,EAAE,UAAU;EAEjC,OACE,IAAAV,WAAA,CAAAsB,IAAA,EAAAC,WAAA,CAAAnB,OAAA;IACE,WAASY,MAAO;IAChB,oBAAkBE,OAAQ;IAC1BM,eAAe,EAAEZ,iBAAkB;IACnCa,QAAQ,EAAEZ,UAAW;IACrBa,cAAc;IACdC,QAAQ,EAAEb,UAAW;IACrBC,QAAQ,EAAEA,QAAS;IAAAP,QAAA,GAEnB,IAAAR,WAAA,CAAA4B,GAAA,EAAAC,kBAAA,CAAAzB,OAAA;MACE,iBAAeiB,SAAU;MACzBS,UAAU,EAAE,IAAA9B,WAAA,CAAA4B,GAAA,EAAC/B,MAAA,CAAAkC,eAAe,IAAE,CAAE;MAChCrB,EAAE,EAAEU,QAAS;MAAAZ,QAAA,EAEb,IAAAR,WAAA,CAAA4B,GAAA,EAAC9B,WAAA,CAAAkC,OAAO;QAACC,SAAS,EAAC,KAAK;QAAChB,SAAS,EAAEA,SAAU;QAAAT,QAAA,EAC3CC;MAAK,CACC;IAAC,CACS,CAAC,EACtB,IAAAT,WAAA,CAAA4B,GAAA,EAAAM,kBAAA,CAAA9B,OAAA;MAAqB,mBAAiBgB,QAAS;MAAAZ,QAAA,EAC5CA;IAAQ,CACU,CAAC;EAAA,CACV,CAAC;AAEnB,CAAC;AAED,MAAM2B,iBAAiB,GAAA7B,OAAA,CAAAC,SAAA,GAAG,IAAA6B,WAAI,EAAC7B,SAAS,CAAC;AACzC4B,iBAAiB,CAACE,WAAW,GAAG,WAAW","ignoreList":[]}

package/dist/cjs/Autocomplete.cjs

@@ -0,0 +1,145 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AutocompleteTestSelector = exports.Autocomplete = void 0;
+var _Autocomplete2 = _interopRequireDefault(require("@mui/material/Autocomplete"));
+var _react = require("react");
+var _reactI18next = require("react-i18next");
+var _PickerVirtualizationListBox = require("./labs/OdysseyPickers/PickerVirtualizationListBox.cjs");
+var _useAutocomplete = require("./useAutocomplete.cjs");
+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 AutocompleteTestSelector = exports.AutocompleteTestSelector = {
+  accessibleText: {
+    errorMessage: "errorMessage",
+    hint: "description",
+    label: "label"
+  },
+  children: {
+    list: {
+      children: {
+        listItem: {
+          elementSelector: {
+            method: "ByRole",
+            options: {
+              label: "name"
+            },
+            role: "option"
+          }
+        }
+      },
+      isControlledElement: true
+    }
+  },
+  elementSelector: {
+    method: "ByRole",
+    options: {
+      label: "name"
+    },
+    role: "combobox"
+  }
+};
+const Autocomplete = ({
+  ariaDescribedBy,
+  defaultValue,
+  errorMessage,
+  errorMessageList,
+  getOptionLabel,
+  hasMultipleChoices,
+  id: idOverride,
+  inputValue,
+  isCustomValueAllowed,
+  isDisabled,
+  isFullWidth = false,
+  isLoading,
+  isOptional = false,
+  isReadOnly,
+  isVirtualized = false,
+  hint,
+  HintLinkComponent,
+  label,
+  name: nameOverride,
+  noOptionsText,
+  onBlur,
+  onChange,
+  onInputChange,
+  onFocus,
+  options,
+  value,
+  getIsOptionEqualToValue,
+  testId,
+  translate
+}) => {
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)();
+  const {
+    inputValueProp,
+    isVirtualizedRef,
+    renderInput,
+    valueProps
+  } = (0, _useAutocomplete.useAutocomplete)({
+    ariaDescribedBy,
+    defaultValue,
+    errorMessage,
+    errorMessageList,
+    hasMultipleChoices,
+    hint,
+    HintLinkComponent,
+    inputValue,
+    isFullWidth,
+    isOptional,
+    isVirtualized,
+    label,
+    name: nameOverride,
+    testId,
+    value
+  });
+  return (0, _jsxRuntime.jsx)(_Autocomplete2.default, {
+    ...valueProps,
+    ...inputValueProp,
+    ...(isVirtualizedRef.current && {
+      ListboxComponent: _PickerVirtualizationListBox.PickerVirtualizationListBox
+    }),
+    "aria-disabled": isDisabled,
+    clearText: t("clear.text"),
+    closeText: t("close.text"),
+    disableCloseOnSelect: hasMultipleChoices,
+    disabled: isDisabled,
+    freeSolo: isCustomValueAllowed,
+    filterSelectedOptions: true,
+    getOptionLabel: getOptionLabel,
+    id: idOverride,
+    fullWidth: isFullWidth,
+    loading: isLoading,
+    multiple: hasMultipleChoices,
+    noOptionsText: noOptionsText,
+    onBlur: onBlur,
+    onChange: onChange,
+    onInputChange: onInputChange,
+    onFocus: onFocus,
+    openText: t("open.text"),
+    options: options,
+    readOnly: isReadOnly,
+    renderInput: renderInput,
+    isOptionEqualToValue: getIsOptionEqualToValue,
+    translate: translate
+  });
+};
+const MemoizedAutocomplete = exports.Autocomplete = (0, _react.memo)(Autocomplete);
+MemoizedAutocomplete.displayName = "Autocomplete";
+//# sourceMappingURL=Autocomplete.cjs.map

package/dist/cjs/Autocomplete.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Autocomplete.cjs","names":["_react","require","_reactI18next","_PickerVirtualizationListBox","_useAutocomplete","_jsxRuntime","_interopRequireDefault","e","__esModule","default","AutocompleteTestSelector","exports","accessibleText","errorMessage","hint","label","children","list","listItem","elementSelector","method","options","role","isControlledElement","Autocomplete","ariaDescribedBy","defaultValue","errorMessageList","getOptionLabel","hasMultipleChoices","id","idOverride","inputValue","isCustomValueAllowed","isDisabled","isFullWidth","isLoading","isOptional","isReadOnly","isVirtualized","HintLinkComponent","name","nameOverride","noOptionsText","onBlur","onChange","onInputChange","onFocus","value","getIsOptionEqualToValue","testId","translate","t","useTranslation","inputValueProp","isVirtualizedRef","renderInput","valueProps","useAutocomplete","jsx","_Autocomplete2","current","ListboxComponent","PickerVirtualizationListBox","clearText","closeText","disableCloseOnSelect","disabled","freeSolo","filterSelectedOptions","fullWidth","loading","multiple","openText","readOnly","isOptionEqualToValue","MemoizedAutocomplete","memo","displayName"],"sources":["../../src/Autocomplete.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 { memo } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport {\n  Autocomplete as MuiAutocomplete,\n  AutocompleteProps as MuiAutocompleteProps,\n  UseAutocompleteProps as MuiUseAutocompleteProps,\n} from \"@mui/material\";\n\nimport { FieldComponentProps } from \"./FieldComponentProps.js\";\nimport type { HtmlProps } from \"./HtmlProps.js\";\nimport { PickerVirtualizationListBox } from \"./labs/OdysseyPickers/PickerVirtualizationListBox.js\";\nimport { useAutocomplete } from \"./useAutocomplete.js\";\nimport { TestSelector } from \"./test-selectors/index.js\";\n\nexport const AutocompleteTestSelector = {\n  accessibleText: {\n    errorMessage: \"errorMessage\",\n    hint: \"description\",\n    label: \"label\",\n  },\n  children: {\n    list: {\n      children: {\n        listItem: {\n          elementSelector: {\n            method: \"ByRole\",\n            options: {\n              label: \"name\",\n            },\n            role: \"option\",\n          },\n        },\n      },\n      isControlledElement: true,\n    },\n  },\n  elementSelector: {\n    method: \"ByRole\",\n    options: {\n      label: \"name\",\n    },\n    role: \"combobox\",\n  },\n} as const satisfies TestSelector;\n// type SetItemSize = (size: number) => void;\n\nexport type AutocompleteProps<\n  OptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined,\n> = {\n  /**\n   * The default value. Use when the component is not controlled.\n   */\n  defaultValue?: MuiUseAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"defaultValue\"];\n  /**\n   * Used to determine the string value for a given option. It's used to fill the input (and the list box options if renderOption is not provided). If used in free solo mode, it must accept both the type of the options and a string.\n   *\n   * `function(option: Value) => string`\n   */\n  getOptionLabel?: MuiUseAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"getOptionLabel\"];\n\n  /** Used to determine if the option represents the given value. Uses strict equality by default if none provided.\n   * Both arguments need to be handled, an option can only match with one value.\n   * option: the option to test\n   * value: the value to test against\n   *\n   * You will need to implement this function if your `option` items are objects.\n   */\n  getIsOptionEqualToValue?: (option: OptionType, value: OptionType) => boolean;\n  /**\n   * Enables multiple choice selection\n   */\n  hasMultipleChoices?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"multiple\"];\n  /**\n   * The value for the input\n   */\n  inputValue?: MuiUseAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"inputValue\"];\n  /**\n   * Allows the input of custom values\n   */\n  isCustomValueAllowed?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"freeSolo\"];\n  /**\n   * Disables the Autocomplete input\n   */\n  isDisabled?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"disabled\"];\n  /**\n   * Displays a loading indicator\n   */\n  isLoading?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"loading\"];\n  /**\n   * Makes the Autocomplete input read-only\n   */\n  isReadOnly?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"readOnly\"];\n  /**\n   * If this component is required to display a virtualized list of options,\n   * then this value needs to be set to true.\n   * It is recommended if you're options are on the order of 10's of hundreds or more.\n   */\n  isVirtualized?: boolean;\n  /**\n   * The label text for the autocomplete input\n   */\n  label: string;\n  /**\n   * The text to display when no options are available\n   *\n   * default: \"No Options\"\n   */\n  noOptionsText?: string;\n  /**\n   * Callback fired when the autocomplete loses focus.\n   */\n  onBlur?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"onBlur\"];\n  /**\n   * Callback fired when a selection is made.\n   */\n  onChange?: MuiUseAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"onChange\"];\n  /**\n   * Callback fired when the textbox receives typed characters.\n   */\n  onInputChange?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"onInputChange\"];\n  /**\n   * Callback fired when the autocomplete gains focus.\n   */\n  onFocus?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"onFocus\"];\n  /**\n   * The options for the Autocomplete input\n   */\n  options: ReadonlyArray<OptionType>;\n  /**\n   * The value of the Autocomplete input\n   */\n  value?: MuiUseAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"value\"];\n} & Pick<\n  FieldComponentProps,\n  | \"errorMessage\"\n  | \"errorMessageList\"\n  | \"hint\"\n  | \"HintLinkComponent\"\n  | \"id\"\n  | \"isFullWidth\"\n  | \"isOptional\"\n  | \"name\"\n> &\n  Pick<HtmlProps, \"ariaDescribedBy\" | \"testId\" | \"translate\">;\n\nconst Autocomplete = <\n  OptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined,\n>({\n  ariaDescribedBy,\n  defaultValue,\n  errorMessage,\n  errorMessageList,\n  getOptionLabel,\n  hasMultipleChoices,\n  id: idOverride,\n  inputValue,\n  isCustomValueAllowed,\n  isDisabled,\n  isFullWidth = false,\n  isLoading,\n  isOptional = false,\n  isReadOnly,\n  isVirtualized = false,\n  hint,\n  HintLinkComponent,\n  label,\n  name: nameOverride,\n  noOptionsText,\n  onBlur,\n  onChange,\n  onInputChange,\n  onFocus,\n  options,\n  value,\n  getIsOptionEqualToValue,\n  testId,\n  translate,\n}: AutocompleteProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>) => {\n  const { t } = useTranslation();\n  const { inputValueProp, isVirtualizedRef, renderInput, valueProps } =\n    useAutocomplete<OptionType, HasMultipleChoices, IsCustomValueAllowed>({\n      ariaDescribedBy,\n      defaultValue,\n      errorMessage,\n      errorMessageList,\n      hasMultipleChoices,\n      hint,\n      HintLinkComponent,\n      inputValue,\n      isFullWidth,\n      isOptional,\n      isVirtualized,\n      label,\n      name: nameOverride,\n      testId,\n      value,\n    });\n\n  return (\n    <MuiAutocomplete\n      {...valueProps}\n      {...inputValueProp}\n      // conditionally provide the ListboxComponent if this needs to be virtualized\n      {...(isVirtualizedRef.current && {\n        ListboxComponent: PickerVirtualizationListBox,\n      })}\n      // AutoComplete is wrapped in a div within MUI which does not get the disabled attr. So this aria-disabled gets set in the div\n      aria-disabled={isDisabled}\n      clearText={t(\"clear.text\")}\n      closeText={t(\"close.text\")}\n      disableCloseOnSelect={hasMultipleChoices}\n      disabled={isDisabled}\n      freeSolo={isCustomValueAllowed}\n      filterSelectedOptions={true}\n      getOptionLabel={getOptionLabel}\n      id={idOverride}\n      fullWidth={isFullWidth}\n      loading={isLoading}\n      multiple={hasMultipleChoices}\n      noOptionsText={noOptionsText}\n      onBlur={onBlur}\n      onChange={onChange}\n      onInputChange={onInputChange}\n      onFocus={onFocus}\n      openText={t(\"open.text\")}\n      options={options}\n      readOnly={isReadOnly}\n      renderInput={renderInput}\n      isOptionEqualToValue={getIsOptionEqualToValue}\n      translate={translate}\n    />\n  );\n};\n\n// Need the `typeof Autocomplete` because generics don't get passed through\nconst MemoizedAutocomplete = memo(Autocomplete) as typeof Autocomplete;\n// @ts-expect-error displayName is expected to not be on `typeof Autocomplete`\nMemoizedAutocomplete.displayName = \"Autocomplete\";\n\nexport { MemoizedAutocomplete as Autocomplete };\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/Badge.cjs

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.badgeTypeValues = exports.badgeContentMaxValues = exports.Badge = void 0;
+var _react = require("react");
+var _OdysseyDesignTokensContext = require("./OdysseyDesignTokensContext.cjs");
+var _Box = require("./Box.cjs");
+var _jsxRuntime = require("react/jsx-runtime");
+/*!
+ * 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 badgeContentMaxValues = exports.badgeContentMaxValues = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
+const badgeTypeValues = exports.badgeTypeValues = ["default", "attention", "danger"];
+const badgeTypeColors = odysseyTokens => ({
+  default: {
+    background: odysseyTokens.HueNeutral200,
+    font: odysseyTokens.TypographyColorBody
+  },
+  attention: {
+    background: odysseyTokens.PalettePrimaryMain,
+    font: odysseyTokens.TypographyColorInverse
+  },
+  danger: {
+    background: odysseyTokens.PaletteDangerMain,
+    font: odysseyTokens.TypographyColorInverse
+  }
+});
+const Badge = ({
+  badgeContent,
+  badgeContentMax = 100,
+  testId,
+  translate,
+  type = "default"
+}) => {
+  const odysseyDesignTokens = (0, _OdysseyDesignTokensContext.useOdysseyDesignTokens)();
+  const renderBadge = (0, _react.useMemo)(() => {
+    const greaterThanZeroContentMax = badgeContentMax > 0 ? badgeContentMax : 1;
+    const threeDigitLimitedMax = greaterThanZeroContentMax > 999 ? 999 : greaterThanZeroContentMax;
+    const isOverContentMax = badgeContent > threeDigitLimitedMax;
+    const overContentMaxMessage = `${greaterThanZeroContentMax}+`;
+    const formattedContent = isOverContentMax ? overContentMaxMessage : badgeContent.toString();
+    const badgeStyles = {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      minWidth: `calc(${odysseyDesignTokens.Spacing4} + ${odysseyDesignTokens.Spacing1})`,
+      height: `calc(${odysseyDesignTokens.Spacing4} + ${odysseyDesignTokens.Spacing1})`,
+      minHeight: `calc(${odysseyDesignTokens.Spacing4} + ${odysseyDesignTokens.Spacing1})`,
+      padding: "0 6px",
+      backgroundColor: badgeTypeColors(odysseyDesignTokens)[type].background,
+      color: badgeTypeColors(odysseyDesignTokens)[type].font,
+      borderRadius: formattedContent.length > 1 ? `${odysseyDesignTokens.BorderRadiusOuter}` : "50%",
+      fontSize: `${odysseyDesignTokens.TypographyScale0}`,
+      fontFamily: `${odysseyDesignTokens.TypographyFamilyMono}`,
+      fontWeight: `${odysseyDesignTokens.TypographyWeightBodyBold}`,
+      lineHeight: 1,
+      transitionDuration: `${odysseyDesignTokens.TransitionDurationMain}`,
+      transitionProperty: `background-color, color`
+    };
+    const hasNotificationCount = badgeContent && badgeContent > 0;
+    return hasNotificationCount ? (0, _jsxRuntime.jsx)(_Box.Box, {
+      sx: badgeStyles,
+      testId: testId,
+      translate: translate,
+      children: formattedContent
+    }) : null;
+  }, [badgeContent, badgeContentMax, odysseyDesignTokens, testId, translate, type]);
+  return renderBadge;
+};
+const MemoizedBadge = exports.Badge = (0, _react.memo)(Badge);
+MemoizedBadge.displayName = "Badge";
+//# sourceMappingURL=Badge.cjs.map