@okta/odyssey-react-mui 1.8.2 → 1.9.1

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.9.1](https://github.com/okta/odyssey/compare/v1.9.0...v1.9.1) (2023-12-05)
+
+### Bug Fixes
+
+- fixed typing for shadow root element. updated tests to reflect changes ([#2048](https://github.com/okta/odyssey/issues/2048)) ([3ae92a1](https://github.com/okta/odyssey/commit/3ae92a1b91451c6bb9bb2a512571fbbe4b833022))
+
+## [1.9.0](https://github.com/okta/odyssey/compare/v1.8.2...v1.9.0) (2023-12-04)
+
+### Features
+
+- add on blur for radio and checkbox OKTA-670768 ([#2049](https://github.com/okta/odyssey/issues/2049)) ([a08fe5d](https://github.com/okta/odyssey/commit/a08fe5dcbb9805e6466f00d709ddb0e32607d0d2))
+
 ## [1.8.2](https://github.com/okta/odyssey/compare/v1.8.1...v1.8.2) (2023-12-01)
 
 **Note:** Version bump only for package @okta/odyssey-react-mui

package/dist/Checkbox.js

@@ -35,6 +35,7 @@ const Checkbox = _ref => {
     hint,
     name: nameOverride,
     onChange: onChangeProp,
+    onBlur: onBlurProp,
     testId,
     validity = "inherit",
     value
@@ -72,6 +73,9 @@ const Checkbox = _ref => {
   const onChange = useCallback((event, checked) => {
     onChangeProp?.(event, checked);
   }, [onChangeProp]);
+  const onBlur = useCallback(event => {
+    onBlurProp?.(event);
+  }, [onBlurProp]);
   return _jsx(_FormControlLabel, {
     sx: {
       alignItems: "flex-start"
@@ -94,7 +98,8 @@ const Checkbox = _ref => {
     label: label,
     name: nameOverride ?? idOverride,
     value: value,
-    required: isRequired
+    required: isRequired,
+    onBlur: onBlur
   });
 };
 const MemoizedCheckbox = memo(Checkbox);

package/dist/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":["useTranslation","memo","useCallback","useMemo","useRef","Typography","ComponentControlledState","getControlState","jsxs","_jsxs","Fragment","_Fragment","jsx","_jsx","checkboxValidityValues","Checkbox","_ref","ariaLabel","ariaLabelledBy","id","idOverride","isChecked","isDefaultChecked","isDisabled","isIndeterminate","isRequired","label","labelProp","hint","name","nameOverride","onChange","onChangeProp","testId","validity","value","t","controlledStateRef","controlledValue","uncontrolledValue","inputValues","current","CONTROLLED","checked","defaultChecked","children","component","color","_FormHelperText","event","_FormControlLabel","sx","alignItems","className","control","_Checkbox","indeterminate","required","marginBlockStart","disabled","MemoizedCheckbox","displayName"],"sources":["../src/Checkbox.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 { useTranslation } from \"react-i18next\";\nimport { memo, useCallback, useMemo, useRef } from \"react\";\nimport {\n  Checkbox as MuiCheckbox,\n  CheckboxProps as MuiCheckboxProps,\n  FormControlLabel,\n  FormHelperText,\n} from \"@mui/material\";\n\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport { Typography } from \"./Typography\";\nimport type { SeleniumProps } from \"./SeleniumProps\";\nimport { ComponentControlledState, getControlState } from \"./inputUtils\";\nimport { CheckedFieldProps } from \"./FormCheckedProps\";\n\nexport const checkboxValidityValues = [\"valid\", \"invalid\", \"inherit\"] as const;\n\nexport type CheckboxProps = {\n  /**\n   * The ARIA label for the Checkbox\n   */\n  ariaLabel?: string;\n  /**\n   * The ID of the element that labels the Checkbox\n   */\n  ariaLabelledBy?: string;\n  /**\n   * The id of the `input` element.\n   */\n  id?: string;\n  /**\n   * Determines whether the Checkbox is disabled\n   */\n  isDisabled?: boolean;\n  /**\n   * Determines whether the Checkbox is in an indeterminate state\n   */\n  isIndeterminate?: boolean;\n  /**\n   * Determines whether the Checkbox is required\n   */\n  isRequired?: boolean;\n  /**\n   * The label text for the Checkbox\n   */\n  label?: string;\n  /**\n   * The helper text content\n   */\n  hint?: string;\n  /**\n   * The checkbox validity, if different from its enclosing group. Defaults to \"inherit\".\n   */\n  validity?: (typeof checkboxValidityValues)[number];\n  /**\n   * The value attribute of the Checkbox\n   */\n  value?: string;\n} & Pick<FieldComponentProps, \"id\" | \"isDisabled\" | \"name\"> &\n  CheckedFieldProps<MuiCheckboxProps> &\n  SeleniumProps;\n\nconst Checkbox = ({\n  ariaLabel,\n  ariaLabelledBy,\n  id: idOverride,\n  isChecked,\n  isDefaultChecked,\n  isDisabled,\n  isIndeterminate,\n  isRequired,\n  label: labelProp,\n  hint,\n  name: nameOverride,\n  onChange: onChangeProp,\n  testId,\n  validity = \"inherit\",\n  value,\n}: CheckboxProps) => {\n  const { t } = useTranslation();\n  const controlledStateRef = useRef(\n    getControlState({\n      controlledValue: isChecked,\n      uncontrolledValue: isDefaultChecked,\n    })\n  );\n  const inputValues = useMemo(() => {\n    if (controlledStateRef.current === ComponentControlledState.CONTROLLED) {\n      return { checked: isChecked };\n    }\n    return { defaultChecked: isDefaultChecked };\n  }, [isDefaultChecked, isChecked]);\n\n  const label = useMemo(() => {\n    return (\n      <>\n        {labelProp}\n        {isRequired && (\n          <>\n            {\" \"}\n            <Typography component=\"span\" color=\"textSecondary\">\n              ({t(\"fieldlabel.required.text\")})\n            </Typography>\n          </>\n        )}\n        {hint && <FormHelperText>{hint}</FormHelperText>}\n      </>\n    );\n  }, [isRequired, labelProp, hint, t]);\n\n  const onChange = useCallback<NonNullable<MuiCheckboxProps[\"onChange\"]>>(\n    (event, checked) => {\n      onChangeProp?.(event, checked);\n    },\n    [onChangeProp]\n  );\n\n  return (\n    <FormControlLabel\n      sx={{ alignItems: \"flex-start\" }}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      className={\n        validity === \"invalid\"\n          ? \"Mui-error\"\n          : validity === \"valid\"\n          ? \"Mui-valid\"\n          : \"\"\n      }\n      control={\n        <MuiCheckbox\n          {...inputValues}\n          indeterminate={isIndeterminate}\n          onChange={onChange}\n          required={isRequired}\n          sx={() => ({\n            marginBlockStart: \"2px\",\n          })}\n        />\n      }\n      data-se={testId}\n      disabled={isDisabled}\n      id={idOverride}\n      label={label}\n      name={nameOverride ?? idOverride}\n      value={value}\n      required={isRequired}\n    />\n  );\n};\n\nconst MemoizedCheckbox = memo(Checkbox);\nMemoizedCheckbox.displayName = \"Checkbox\";\n\nexport { MemoizedCheckbox as Checkbox };\n"],"mappings":"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"}
+{"version":3,"file":"Checkbox.js","names":["useTranslation","memo","useCallback","useMemo","useRef","Typography","ComponentControlledState","getControlState","jsxs","_jsxs","Fragment","_Fragment","jsx","_jsx","checkboxValidityValues","Checkbox","_ref","ariaLabel","ariaLabelledBy","id","idOverride","isChecked","isDefaultChecked","isDisabled","isIndeterminate","isRequired","label","labelProp","hint","name","nameOverride","onChange","onChangeProp","onBlur","onBlurProp","testId","validity","value","t","controlledStateRef","controlledValue","uncontrolledValue","inputValues","current","CONTROLLED","checked","defaultChecked","children","component","color","_FormHelperText","event","_FormControlLabel","sx","alignItems","className","control","_Checkbox","indeterminate","required","marginBlockStart","disabled","MemoizedCheckbox","displayName"],"sources":["../src/Checkbox.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 { useTranslation } from \"react-i18next\";\nimport { memo, useCallback, useMemo, useRef } from \"react\";\nimport {\n  Checkbox as MuiCheckbox,\n  CheckboxProps as MuiCheckboxProps,\n  FormControlLabel,\n  FormControlLabelProps as MuiFormControlLabelProps,\n  FormHelperText,\n} from \"@mui/material\";\n\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport { Typography } from \"./Typography\";\nimport type { SeleniumProps } from \"./SeleniumProps\";\nimport { ComponentControlledState, getControlState } from \"./inputUtils\";\nimport { CheckedFieldProps } from \"./FormCheckedProps\";\n\nexport const checkboxValidityValues = [\"valid\", \"invalid\", \"inherit\"] as const;\n\nexport type CheckboxProps = {\n  /**\n   * The ARIA label for the Checkbox\n   */\n  ariaLabel?: string;\n  /**\n   * The ID of the element that labels the Checkbox\n   */\n  ariaLabelledBy?: string;\n  /**\n   * The id of the `input` element.\n   */\n  id?: string;\n  /**\n   * Determines whether the Checkbox is disabled\n   */\n  isDisabled?: boolean;\n  /**\n   * Determines whether the Checkbox is in an indeterminate state\n   */\n  isIndeterminate?: boolean;\n  /**\n   * Determines whether the Checkbox is required\n   */\n  isRequired?: boolean;\n  /**\n   * The label text for the Checkbox\n   */\n  label?: string;\n  /**\n   * The helper text content\n   */\n  hint?: string;\n  /**\n   * The checkbox validity, if different from its enclosing group. Defaults to \"inherit\".\n   */\n  validity?: (typeof checkboxValidityValues)[number];\n  /**\n   * The value attribute of the Checkbox\n   */\n  value?: string;\n  /**\n   * Callback fired when the blur event happens. Provides event value.\n   */\n  onBlur?: MuiFormControlLabelProps[\"onBlur\"];\n} & Pick<FieldComponentProps, \"id\" | \"isDisabled\" | \"name\"> &\n  CheckedFieldProps<MuiCheckboxProps> &\n  SeleniumProps;\n\nconst Checkbox = ({\n  ariaLabel,\n  ariaLabelledBy,\n  id: idOverride,\n  isChecked,\n  isDefaultChecked,\n  isDisabled,\n  isIndeterminate,\n  isRequired,\n  label: labelProp,\n  hint,\n  name: nameOverride,\n  onChange: onChangeProp,\n  onBlur: onBlurProp,\n  testId,\n  validity = \"inherit\",\n  value,\n}: CheckboxProps) => {\n  const { t } = useTranslation();\n  const controlledStateRef = useRef(\n    getControlState({\n      controlledValue: isChecked,\n      uncontrolledValue: isDefaultChecked,\n    })\n  );\n  const inputValues = useMemo(() => {\n    if (controlledStateRef.current === ComponentControlledState.CONTROLLED) {\n      return { checked: isChecked };\n    }\n    return { defaultChecked: isDefaultChecked };\n  }, [isDefaultChecked, isChecked]);\n\n  const label = useMemo(() => {\n    return (\n      <>\n        {labelProp}\n        {isRequired && (\n          <>\n            {\" \"}\n            <Typography component=\"span\" color=\"textSecondary\">\n              ({t(\"fieldlabel.required.text\")})\n            </Typography>\n          </>\n        )}\n        {hint && <FormHelperText>{hint}</FormHelperText>}\n      </>\n    );\n  }, [isRequired, labelProp, hint, t]);\n\n  const onChange = useCallback<NonNullable<MuiCheckboxProps[\"onChange\"]>>(\n    (event, checked) => {\n      onChangeProp?.(event, checked);\n    },\n    [onChangeProp]\n  );\n\n  const onBlur = useCallback<NonNullable<MuiFormControlLabelProps[\"onBlur\"]>>(\n    (event) => {\n      onBlurProp?.(event);\n    },\n    [onBlurProp]\n  );\n\n  return (\n    <FormControlLabel\n      sx={{ alignItems: \"flex-start\" }}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      className={\n        validity === \"invalid\"\n          ? \"Mui-error\"\n          : validity === \"valid\"\n          ? \"Mui-valid\"\n          : \"\"\n      }\n      control={\n        <MuiCheckbox\n          {...inputValues}\n          indeterminate={isIndeterminate}\n          onChange={onChange}\n          required={isRequired}\n          sx={() => ({\n            marginBlockStart: \"2px\",\n          })}\n        />\n      }\n      data-se={testId}\n      disabled={isDisabled}\n      id={idOverride}\n      label={label}\n      name={nameOverride ?? idOverride}\n      value={value}\n      required={isRequired}\n      onBlur={onBlur}\n    />\n  );\n};\n\nconst MemoizedCheckbox = memo(Checkbox);\nMemoizedCheckbox.displayName = \"Checkbox\";\n\nexport { MemoizedCheckbox as Checkbox };\n"],"mappings":"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"}

package/dist/OdysseyCacheProvider.js

@@ -11,31 +11,27 @@
  */
 
 import createCache from "@emotion/cache";
-import { CacheProvider } from "@emotion/react";
 import { memo, useMemo } from "react";
 import { useUniqueAlphabeticalId } from "./useUniqueAlphabeticalId.js";
+import { CacheProvider } from "@emotion/react";
 import { jsx as _jsx } from "react/jsx-runtime";
 const OdysseyCacheProvider = _ref => {
   let {
     children,
-    nonce,
-    shadowDomElement,
-    stylisPlugins
+    emotionRoot
   } = _ref;
   const uniqueAlphabeticalId = useUniqueAlphabeticalId();
-  const emotionRootElement = useMemo(() => {
-    const emotionRootElement = document.createElement("div");
-    emotionRootElement.setAttribute("data-emotion-root", "data-emotion-root");
-    shadowDomElement?.prepend?.(emotionRootElement);
-    return emotionRootElement;
-  }, [shadowDomElement]);
-  const emotionCache = useMemo(() => createCache({
-    container: emotionRootElement,
-    key: uniqueAlphabeticalId,
-    nonce: nonce || window.cspNonce,
-    prepend: Boolean(emotionRootElement),
-    stylisPlugins
-  }), [emotionRootElement, nonce, stylisPlugins, uniqueAlphabeticalId]);
+  const emotionCache = useMemo(() => {
+    return createCache({
+      ...(emotionRoot && {
+        container: emotionRoot
+      }),
+      key: uniqueAlphabeticalId,
+      nonce: window.cspNonce,
+      prepend: true,
+      speedy: false
+    });
+  }, [emotionRoot, uniqueAlphabeticalId]);
   return _jsx(CacheProvider, {
     value: emotionCache,
     children: children

package/dist/OdysseyCacheProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"OdysseyCacheProvider.js","names":["createCache","CacheProvider","memo","useMemo","useUniqueAlphabeticalId","jsx","_jsx","OdysseyCacheProvider","_ref","children","nonce","shadowDomElement","stylisPlugins","uniqueAlphabeticalId","emotionRootElement","document","createElement","setAttribute","prepend","emotionCache","container","key","window","cspNonce","Boolean","value","MemoizedOdysseyCacheProvider","displayName"],"sources":["../src/OdysseyCacheProvider.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\ndeclare global {\n  interface Window {\n    cspNonce: string;\n  }\n}\n\nimport createCache, { StylisPlugin } from \"@emotion/cache\";\nimport { CacheProvider } from \"@emotion/react\";\nimport { memo, ReactNode, useMemo } from \"react\";\n\nimport { useUniqueAlphabeticalId } from \"./useUniqueAlphabeticalId\";\n\nexport type OdysseyCacheProviderProps = {\n  children: ReactNode;\n  /**\n   * Emotion renders into this HTML element.\n   * When enabling this prop, Emotion renders at the top of this component rather than the bottom like it does in the HTML `<head>`.\n   */\n  nonce?: string;\n  shadowDomElement?: HTMLDivElement;\n  stylisPlugins?: StylisPlugin[];\n};\n\nconst OdysseyCacheProvider = ({\n  children,\n  nonce,\n  shadowDomElement,\n  stylisPlugins,\n}: OdysseyCacheProviderProps) => {\n  const uniqueAlphabeticalId = useUniqueAlphabeticalId();\n\n  const emotionRootElement = useMemo(() => {\n    const emotionRootElement = document.createElement(\"div\");\n\n    emotionRootElement.setAttribute(\"data-emotion-root\", \"data-emotion-root\");\n\n    shadowDomElement?.prepend?.(emotionRootElement);\n\n    return emotionRootElement;\n  }, [shadowDomElement]);\n\n  const emotionCache = useMemo(\n    () =>\n      createCache({\n        container: emotionRootElement,\n        key: uniqueAlphabeticalId,\n        nonce: nonce || window.cspNonce,\n        prepend: Boolean(emotionRootElement),\n        stylisPlugins,\n      }),\n    [emotionRootElement, nonce, stylisPlugins, uniqueAlphabeticalId]\n  );\n\n  return <CacheProvider value={emotionCache}>{children}</CacheProvider>;\n};\n\nconst MemoizedOdysseyCacheProvider = memo(OdysseyCacheProvider);\nMemoizedOdysseyCacheProvider.displayName = \"OdysseyCacheProvider\";\n\nexport { MemoizedOdysseyCacheProvider as OdysseyCacheProvider };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAQA,OAAOA,WAAW,MAAwB,gBAAgB;AAC1D,SAASC,aAAa,QAAQ,gBAAgB;AAC9C,SAASC,IAAI,EAAaC,OAAO,QAAQ,OAAO;AAAC,SAExCC,uBAAuB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAahC,MAAMC,oBAAoB,GAAGC,IAAA,IAKI;EAAA,IALH;IAC5BC,QAAQ;IACRC,KAAK;IACLC,gBAAgB;IAChBC;EACyB,CAAC,GAAAJ,IAAA;EAC1B,MAAMK,oBAAoB,GAAGT,uBAAuB,CAAC,CAAC;EAEtD,MAAMU,kBAAkB,GAAGX,OAAO,CAAC,MAAM;IACvC,MAAMW,kBAAkB,GAAGC,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;IAExDF,kBAAkB,CAACG,YAAY,CAAC,mBAAmB,EAAE,mBAAmB,CAAC;IAEzEN,gBAAgB,EAAEO,OAAO,GAAGJ,kBAAkB,CAAC;IAE/C,OAAOA,kBAAkB;EAC3B,CAAC,EAAE,CAACH,gBAAgB,CAAC,CAAC;EAEtB,MAAMQ,YAAY,GAAGhB,OAAO,CAC1B,MACEH,WAAW,CAAC;IACVoB,SAAS,EAAEN,kBAAkB;IAC7BO,GAAG,EAAER,oBAAoB;IACzBH,KAAK,EAAEA,KAAK,IAAIY,MAAM,CAACC,QAAQ;IAC/BL,OAAO,EAAEM,OAAO,CAACV,kBAAkB,CAAC;IACpCF;EACF,CAAC,CAAC,EACJ,CAACE,kBAAkB,EAAEJ,KAAK,EAAEE,aAAa,EAAEC,oBAAoB,CACjE,CAAC;EAED,OAAOP,IAAA,CAACL,aAAa;IAACwB,KAAK,EAAEN,YAAa;IAAAV,QAAA,EAAEA;EAAQ,CAAgB,CAAC;AACvE,CAAC;AAED,MAAMiB,4BAA4B,GAAGxB,IAAI,CAACK,oBAAoB,CAAC;AAC/DmB,4BAA4B,CAACC,WAAW,GAAG,sBAAsB;AAEjE,SAASD,4BAA4B,IAAInB,oBAAoB"}
+{"version":3,"file":"OdysseyCacheProvider.js","names":["createCache","memo","useMemo","useUniqueAlphabeticalId","CacheProvider","jsx","_jsx","OdysseyCacheProvider","_ref","children","emotionRoot","uniqueAlphabeticalId","emotionCache","container","key","nonce","window","cspNonce","prepend","speedy","value","MemoizedOdysseyCacheProvider","displayName"],"sources":["../src/OdysseyCacheProvider.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\ndeclare global {\n  interface Window {\n    cspNonce: string;\n  }\n}\n\nimport createCache, { StylisPlugin } from \"@emotion/cache\";\nimport { memo, useMemo, ReactNode } from \"react\";\nimport { useUniqueAlphabeticalId } from \"./useUniqueAlphabeticalId\";\nimport { CacheProvider } from \"@emotion/react\";\n\nexport type OdysseyCacheProviderProps = {\n  children: ReactNode;\n  nonce?: string;\n  /**\n   * Emotion caches styles into the style element.\n   * When enabling this prop, Emotion caches the styles at this element, rather than in <head>.\n   */\n  emotionRoot?: HTMLStyleElement;\n  /**\n   * Emotion renders into this HTML element.\n   * When enabling this prop, Emotion renders at the top of this component rather than the bottom like it does in the HTML `<head>`.\n   */\n  shadowDomElement?: HTMLDivElement | HTMLElement;\n  stylisPlugins?: StylisPlugin[];\n};\n\nconst OdysseyCacheProvider = ({\n  children,\n  emotionRoot,\n}: OdysseyCacheProviderProps) => {\n  const uniqueAlphabeticalId = useUniqueAlphabeticalId();\n\n  const emotionCache = useMemo(() => {\n    return createCache({\n      ...(emotionRoot && { container: emotionRoot }),\n      key: uniqueAlphabeticalId,\n      nonce: window.cspNonce,\n      prepend: true,\n      speedy: false, // <-- Needs to be set to false when shadow-dom is used!! https://github.com/emotion-js/emotion/issues/2053#issuecomment-713429122\n    });\n  }, [emotionRoot, uniqueAlphabeticalId]);\n\n  return <CacheProvider value={emotionCache}>{children}</CacheProvider>;\n};\n\nconst MemoizedOdysseyCacheProvider = memo(OdysseyCacheProvider);\nMemoizedOdysseyCacheProvider.displayName = \"OdysseyCacheProvider\";\n\nexport { MemoizedOdysseyCacheProvider as OdysseyCacheProvider };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAQA,OAAOA,WAAW,MAAwB,gBAAgB;AAC1D,SAASC,IAAI,EAAEC,OAAO,QAAmB,OAAO;AAAC,SACxCC,uBAAuB;AAChC,SAASC,aAAa,QAAQ,gBAAgB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAkB/C,MAAMC,oBAAoB,GAAGC,IAAA,IAGI;EAAA,IAHH;IAC5BC,QAAQ;IACRC;EACyB,CAAC,GAAAF,IAAA;EAC1B,MAAMG,oBAAoB,GAAGR,uBAAuB,CAAC,CAAC;EAEtD,MAAMS,YAAY,GAAGV,OAAO,CAAC,MAAM;IACjC,OAAOF,WAAW,CAAC;MACjB,IAAIU,WAAW,IAAI;QAAEG,SAAS,EAAEH;MAAY,CAAC,CAAC;MAC9CI,GAAG,EAAEH,oBAAoB;MACzBI,KAAK,EAAEC,MAAM,CAACC,QAAQ;MACtBC,OAAO,EAAE,IAAI;MACbC,MAAM,EAAE;IACV,CAAC,CAAC;EACJ,CAAC,EAAE,CAACT,WAAW,EAAEC,oBAAoB,CAAC,CAAC;EAEvC,OAAOL,IAAA,CAACF,aAAa;IAACgB,KAAK,EAAER,YAAa;IAAAH,QAAA,EAAEA;EAAQ,CAAgB,CAAC;AACvE,CAAC;AAED,MAAMY,4BAA4B,GAAGpB,IAAI,CAACM,oBAAoB,CAAC;AAC/Dc,4BAA4B,CAACC,WAAW,GAAG,sBAAsB;AAEjE,SAASD,4BAA4B,IAAId,oBAAoB"}

package/dist/OdysseyProvider.js

@@ -20,6 +20,7 @@ const OdysseyProvider = _ref => {
   let {
     children,
     designTokensOverride,
+    emotionRoot,
     shadowDomElement,
     languageCode,
     nonce,
@@ -29,12 +30,15 @@ const OdysseyProvider = _ref => {
   } = _ref;
   return _jsx(OdysseyCacheProvider, {
     nonce: nonce,
+    emotionRoot: emotionRoot,
     shadowDomElement: shadowDomElement,
     stylisPlugins: stylisPlugins,
     children: _jsx(OdysseyThemeProvider, {
       designTokensOverride: designTokensOverride,
+      emotionRoot: emotionRoot,
       shadowDomElement: shadowDomElement,
       themeOverride: themeOverride,
+      withCache: false,
       children: _jsx(_ScopedCssBaseline, {
         children: _jsx(OdysseyTranslationProvider, {
           languageCode: languageCode,

package/dist/OdysseyProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"OdysseyProvider.js","names":["memo","OdysseyCacheProvider","OdysseyThemeProvider","OdysseyTranslationProvider","jsx","_jsx","OdysseyProvider","_ref","children","designTokensOverride","shadowDomElement","languageCode","nonce","stylisPlugins","themeOverride","translationOverrides","_ScopedCssBaseline","MemoizedThemeProvider"],"sources":["../src/OdysseyProvider.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, ReactNode } from \"react\";\nimport { ScopedCssBaseline } from \"@mui/material\";\n\nimport {\n  OdysseyCacheProvider,\n  OdysseyCacheProviderProps,\n} from \"./OdysseyCacheProvider\";\nimport {\n  OdysseyThemeProvider,\n  OdysseyThemeProviderProps,\n} from \"./OdysseyThemeProvider\";\nimport {\n  OdysseyTranslationProvider,\n  OdysseyTranslationProviderProps,\n} from \"./OdysseyTranslationProvider\";\n\nexport type OdysseyProviderProps = OdysseyCacheProviderProps &\n  OdysseyThemeProviderProps &\n  OdysseyTranslationProviderProps & {\n    children: ReactNode;\n  };\n\nconst OdysseyProvider = ({\n  children,\n  designTokensOverride,\n  shadowDomElement,\n  languageCode,\n  nonce,\n  stylisPlugins,\n  themeOverride,\n  translationOverrides,\n}: OdysseyProviderProps) => (\n  <OdysseyCacheProvider\n    nonce={nonce}\n    shadowDomElement={shadowDomElement}\n    stylisPlugins={stylisPlugins}\n  >\n    <OdysseyThemeProvider\n      designTokensOverride={designTokensOverride}\n      shadowDomElement={shadowDomElement}\n      themeOverride={themeOverride}\n    >\n      <ScopedCssBaseline>\n        <OdysseyTranslationProvider\n          languageCode={languageCode}\n          translationOverrides={translationOverrides}\n        >\n          {children}\n        </OdysseyTranslationProvider>\n      </ScopedCssBaseline>\n    </OdysseyThemeProvider>\n  </OdysseyCacheProvider>\n);\n\nconst MemoizedThemeProvider = memo(OdysseyProvider);\n\nexport { MemoizedThemeProvider as OdysseyProvider };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAmB,OAAO;AAAC,SAItCC,oBAAoB;AAAA,SAIpBC,oBAAoB;AAAA,SAIpBC,0BAA0B;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAU5B,MAAMC,eAAe,GAAGC,IAAA;EAAA,IAAC;IACvBC,QAAQ;IACRC,oBAAoB;IACpBC,gBAAgB;IAChBC,YAAY;IACZC,KAAK;IACLC,aAAa;IACbC,aAAa;IACbC;EACoB,CAAC,GAAAR,IAAA;EAAA,OACrBF,IAAA,CAACJ,oBAAoB;IACnBW,KAAK,EAAEA,KAAM;IACbF,gBAAgB,EAAEA,gBAAiB;IACnCG,aAAa,EAAEA,aAAc;IAAAL,QAAA,EAE7BH,IAAA,CAACH,oBAAoB;MACnBO,oBAAoB,EAAEA,oBAAqB;MAC3CC,gBAAgB,EAAEA,gBAAiB;MACnCI,aAAa,EAAEA,aAAc;MAAAN,QAAA,EAE7BH,IAAA,CAAAW,kBAAA;QAAAR,QAAA,EACEH,IAAA,CAACF,0BAA0B;UACzBQ,YAAY,EAAEA,YAAa;UAC3BI,oBAAoB,EAAEA,oBAAqB;UAAAP,QAAA,EAE1CA;QAAQ,CACiB;MAAC,CACZ;IAAC,CACA;EAAC,CACH,CAAC;AAAA,CACxB;AAED,MAAMS,qBAAqB,GAAGjB,IAAI,CAACM,eAAe,CAAC;AAEnD,SAASW,qBAAqB,IAAIX,eAAe"}
+{"version":3,"file":"OdysseyProvider.js","names":["memo","OdysseyCacheProvider","OdysseyThemeProvider","OdysseyTranslationProvider","jsx","_jsx","OdysseyProvider","_ref","children","designTokensOverride","emotionRoot","shadowDomElement","languageCode","nonce","stylisPlugins","themeOverride","translationOverrides","withCache","_ScopedCssBaseline","MemoizedThemeProvider"],"sources":["../src/OdysseyProvider.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, ReactNode } from \"react\";\nimport { ScopedCssBaseline } from \"@mui/material\";\n\nimport {\n  OdysseyCacheProvider,\n  OdysseyCacheProviderProps,\n} from \"./OdysseyCacheProvider\";\nimport {\n  OdysseyThemeProvider,\n  OdysseyThemeProviderProps,\n} from \"./OdysseyThemeProvider\";\nimport {\n  OdysseyTranslationProvider,\n  OdysseyTranslationProviderProps,\n} from \"./OdysseyTranslationProvider\";\n\nexport type OdysseyProviderProps = OdysseyCacheProviderProps &\n  OdysseyThemeProviderProps &\n  OdysseyTranslationProviderProps & {\n    children: ReactNode;\n  };\n\nconst OdysseyProvider = ({\n  children,\n  designTokensOverride,\n  emotionRoot,\n  shadowDomElement,\n  languageCode,\n  nonce,\n  stylisPlugins,\n  themeOverride,\n  translationOverrides,\n}: OdysseyProviderProps) => (\n  <OdysseyCacheProvider\n    nonce={nonce}\n    emotionRoot={emotionRoot}\n    shadowDomElement={shadowDomElement}\n    stylisPlugins={stylisPlugins}\n  >\n    <OdysseyThemeProvider\n      designTokensOverride={designTokensOverride}\n      emotionRoot={emotionRoot}\n      shadowDomElement={shadowDomElement}\n      themeOverride={themeOverride}\n      withCache={false}\n    >\n      <ScopedCssBaseline>\n        <OdysseyTranslationProvider\n          languageCode={languageCode}\n          translationOverrides={translationOverrides}\n        >\n          {children}\n        </OdysseyTranslationProvider>\n      </ScopedCssBaseline>\n    </OdysseyThemeProvider>\n  </OdysseyCacheProvider>\n);\n\nconst MemoizedThemeProvider = memo(OdysseyProvider);\n\nexport { MemoizedThemeProvider as OdysseyProvider };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAmB,OAAO;AAAC,SAItCC,oBAAoB;AAAA,SAIpBC,oBAAoB;AAAA,SAIpBC,0BAA0B;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAU5B,MAAMC,eAAe,GAAGC,IAAA;EAAA,IAAC;IACvBC,QAAQ;IACRC,oBAAoB;IACpBC,WAAW;IACXC,gBAAgB;IAChBC,YAAY;IACZC,KAAK;IACLC,aAAa;IACbC,aAAa;IACbC;EACoB,CAAC,GAAAT,IAAA;EAAA,OACrBF,IAAA,CAACJ,oBAAoB;IACnBY,KAAK,EAAEA,KAAM;IACbH,WAAW,EAAEA,WAAY;IACzBC,gBAAgB,EAAEA,gBAAiB;IACnCG,aAAa,EAAEA,aAAc;IAAAN,QAAA,EAE7BH,IAAA,CAACH,oBAAoB;MACnBO,oBAAoB,EAAEA,oBAAqB;MAC3CC,WAAW,EAAEA,WAAY;MACzBC,gBAAgB,EAAEA,gBAAiB;MACnCI,aAAa,EAAEA,aAAc;MAC7BE,SAAS,EAAE,KAAM;MAAAT,QAAA,EAEjBH,IAAA,CAAAa,kBAAA;QAAAV,QAAA,EACEH,IAAA,CAACF,0BAA0B;UACzBS,YAAY,EAAEA,YAAa;UAC3BI,oBAAoB,EAAEA,oBAAqB;UAAAR,QAAA,EAE1CA;QAAQ,CACiB;MAAC,CACZ;IAAC,CACA;EAAC,CACH,CAAC;AAAA,CACxB;AAED,MAAMW,qBAAqB,GAAGnB,IAAI,CAACM,eAAe,CAAC;AAEnD,SAASa,qBAAqB,IAAIb,eAAe"}

package/dist/OdysseyThemeProvider.js

@@ -16,13 +16,18 @@ import { deepmerge } from "@mui/utils";
 import { createOdysseyMuiTheme } from "./theme/index.js";
 import * as Tokens from "@okta/odyssey-design-tokens";
 import { OdysseyDesignTokensContext } from "./OdysseyDesignTokensContext.js";
+import { CacheProvider } from "@emotion/react";
+import createCache from "@emotion/cache";
+import { useUniqueAlphabeticalId } from "./useUniqueAlphabeticalId.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const OdysseyThemeProvider = _ref => {
   let {
     children,
     designTokensOverride,
+    emotionRoot,
     shadowDomElement,
-    themeOverride
+    themeOverride,
+    withCache = true
   } = _ref;
   const odysseyTokens = useMemo(() => ({
     ...Tokens,
@@ -33,6 +38,28 @@ const OdysseyThemeProvider = _ref => {
     shadowDomElement
   }), [odysseyTokens, shadowDomElement]);
   const customOdysseyTheme = useMemo(() => themeOverride && createTheme(deepmerge(odysseyTheme, themeOverride)), [odysseyTheme, themeOverride]);
+  const uniqueAlphabeticalId = useUniqueAlphabeticalId();
+  const cache = useMemo(() => createCache({
+    ...(emotionRoot && {
+      container: emotionRoot
+    }),
+    key: uniqueAlphabeticalId,
+    prepend: true,
+    nonce: window.cspNonce,
+    speedy: false
+  }), [emotionRoot, uniqueAlphabeticalId]);
+  if (withCache) {
+    return _jsx(CacheProvider, {
+      value: cache,
+      children: _jsx(MuiThemeProvider, {
+        theme: customOdysseyTheme ?? odysseyTheme,
+        children: _jsx(OdysseyDesignTokensContext.Provider, {
+          value: odysseyTokens,
+          children: children
+        })
+      })
+    });
+  }
   return _jsx(MuiThemeProvider, {
     theme: customOdysseyTheme ?? odysseyTheme,
     children: _jsx(OdysseyDesignTokensContext.Provider, {

package/dist/OdysseyThemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"OdysseyThemeProvider.js","names":["createTheme","ThemeProvider","MuiThemeProvider","memo","useMemo","deepmerge","createOdysseyMuiTheme","Tokens","OdysseyDesignTokensContext","jsx","_jsx","OdysseyThemeProvider","_ref","children","designTokensOverride","shadowDomElement","themeOverride","odysseyTokens","odysseyTheme","customOdysseyTheme","theme","Provider","value","MemoizedOdysseyThemeProvider"],"sources":["../src/OdysseyThemeProvider.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n  createTheme,\n  ThemeProvider as MuiThemeProvider,\n} from \"@mui/material/styles\";\nimport { memo, ReactNode, useMemo } from \"react\";\n\nimport { ThemeOptions } from \"@mui/material\";\nimport { deepmerge } from \"@mui/utils\";\nimport { createOdysseyMuiTheme, DesignTokensOverride } from \"./theme\";\nimport * as Tokens from \"@okta/odyssey-design-tokens\";\nimport { OdysseyDesignTokensContext } from \"./OdysseyDesignTokensContext\";\n\nexport type OdysseyThemeProviderProps = {\n  children: ReactNode;\n  designTokensOverride?: DesignTokensOverride;\n  shadowDomElement?: HTMLDivElement;\n  themeOverride?: ThemeOptions;\n};\n\nconst OdysseyThemeProvider = ({\n  children,\n  designTokensOverride,\n  shadowDomElement,\n  themeOverride,\n}: OdysseyThemeProviderProps) => {\n  const odysseyTokens = useMemo(\n    () => ({ ...Tokens, ...designTokensOverride }),\n    [designTokensOverride]\n  );\n  const odysseyTheme = useMemo(\n    () =>\n      createOdysseyMuiTheme({\n        odysseyTokens,\n        shadowDomElement,\n      }),\n    [odysseyTokens, shadowDomElement]\n  );\n\n  const customOdysseyTheme = useMemo(\n    () => themeOverride && createTheme(deepmerge(odysseyTheme, themeOverride)),\n    [odysseyTheme, themeOverride]\n  );\n\n  return (\n    <MuiThemeProvider theme={customOdysseyTheme ?? odysseyTheme}>\n      <OdysseyDesignTokensContext.Provider value={odysseyTokens}>\n        {children}\n      </OdysseyDesignTokensContext.Provider>\n    </MuiThemeProvider>\n  );\n};\n\nconst MemoizedOdysseyThemeProvider = memo(OdysseyThemeProvider);\n\nexport { MemoizedOdysseyThemeProvider as OdysseyThemeProvider };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SACEA,WAAW,EACXC,aAAa,IAAIC,gBAAgB,QAC5B,sBAAsB;AAC7B,SAASC,IAAI,EAAaC,OAAO,QAAQ,OAAO;AAGhD,SAASC,SAAS,QAAQ,YAAY;AAAC,SAC9BC,qBAAqB;AAC9B,OAAO,KAAKC,MAAM,MAAM,6BAA6B;AAAC,SAC7CC,0BAA0B;AAAA,SAAAC,GAAA,IAAAC,IAAA;AASnC,MAAMC,oBAAoB,GAAGC,IAAA,IAKI;EAAA,IALH;IAC5BC,QAAQ;IACRC,oBAAoB;IACpBC,gBAAgB;IAChBC;EACyB,CAAC,GAAAJ,IAAA;EAC1B,MAAMK,aAAa,GAAGb,OAAO,CAC3B,OAAO;IAAE,GAAGG,MAAM;IAAE,GAAGO;EAAqB,CAAC,CAAC,EAC9C,CAACA,oBAAoB,CACvB,CAAC;EACD,MAAMI,YAAY,GAAGd,OAAO,CAC1B,MACEE,qBAAqB,CAAC;IACpBW,aAAa;IACbF;EACF,CAAC,CAAC,EACJ,CAACE,aAAa,EAAEF,gBAAgB,CAClC,CAAC;EAED,MAAMI,kBAAkB,GAAGf,OAAO,CAChC,MAAMY,aAAa,IAAIhB,WAAW,CAACK,SAAS,CAACa,YAAY,EAAEF,aAAa,CAAC,CAAC,EAC1E,CAACE,YAAY,EAAEF,aAAa,CAC9B,CAAC;EAED,OACEN,IAAA,CAACR,gBAAgB;IAACkB,KAAK,EAAED,kBAAkB,IAAID,YAAa;IAAAL,QAAA,EAC1DH,IAAA,CAACF,0BAA0B,CAACa,QAAQ;MAACC,KAAK,EAAEL,aAAc;MAAAJ,QAAA,EACvDA;IAAQ,CAC0B;EAAC,CACtB,CAAC;AAEvB,CAAC;AAED,MAAMU,4BAA4B,GAAGpB,IAAI,CAACQ,oBAAoB,CAAC;AAE/D,SAASY,4BAA4B,IAAIZ,oBAAoB"}
+{"version":3,"file":"OdysseyThemeProvider.js","names":["createTheme","ThemeProvider","MuiThemeProvider","memo","useMemo","deepmerge","createOdysseyMuiTheme","Tokens","OdysseyDesignTokensContext","CacheProvider","createCache","useUniqueAlphabeticalId","jsx","_jsx","OdysseyThemeProvider","_ref","children","designTokensOverride","emotionRoot","shadowDomElement","themeOverride","withCache","odysseyTokens","odysseyTheme","customOdysseyTheme","uniqueAlphabeticalId","cache","container","key","prepend","nonce","window","cspNonce","speedy","value","theme","Provider","MemoizedOdysseyThemeProvider"],"sources":["../src/OdysseyThemeProvider.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n  createTheme,\n  ThemeProvider as MuiThemeProvider,\n} from \"@mui/material/styles\";\nimport { memo, ReactNode, useMemo } from \"react\";\n\nimport { ThemeOptions } from \"@mui/material\";\nimport { deepmerge } from \"@mui/utils\";\nimport { createOdysseyMuiTheme, DesignTokensOverride } from \"./theme\";\nimport * as Tokens from \"@okta/odyssey-design-tokens\";\nimport { OdysseyDesignTokensContext } from \"./OdysseyDesignTokensContext\";\nimport { CacheProvider } from \"@emotion/react\";\nimport createCache from \"@emotion/cache\";\nimport { useUniqueAlphabeticalId } from \"./useUniqueAlphabeticalId\";\n\nexport type OdysseyThemeProviderProps = {\n  children: ReactNode;\n  designTokensOverride?: DesignTokensOverride;\n  emotionRoot?: HTMLStyleElement;\n  shadowDomElement?: HTMLDivElement | HTMLElement | undefined;\n  themeOverride?: ThemeOptions;\n  withCache?: boolean;\n};\n\nconst OdysseyThemeProvider = ({\n  children,\n  designTokensOverride,\n  emotionRoot,\n  shadowDomElement,\n  themeOverride,\n  withCache = true,\n}: OdysseyThemeProviderProps) => {\n  const odysseyTokens = useMemo(\n    () => ({ ...Tokens, ...designTokensOverride }),\n    [designTokensOverride]\n  );\n  const odysseyTheme = useMemo(\n    () =>\n      createOdysseyMuiTheme({\n        odysseyTokens,\n        shadowDomElement,\n      }),\n    [odysseyTokens, shadowDomElement]\n  );\n\n  const customOdysseyTheme = useMemo(\n    () => themeOverride && createTheme(deepmerge(odysseyTheme, themeOverride)),\n    [odysseyTheme, themeOverride]\n  );\n\n  const uniqueAlphabeticalId = useUniqueAlphabeticalId();\n\n  const cache = useMemo(\n    () =>\n      createCache({\n        ...(emotionRoot && { container: emotionRoot }),\n        key: uniqueAlphabeticalId,\n        prepend: true,\n        nonce: window.cspNonce,\n        speedy: false, // <-- Needs to be set to false when shadow-dom is used!! https://github.com/emotion-js/emotion/issues/2053#issuecomment-713429122\n      }),\n    [emotionRoot, uniqueAlphabeticalId]\n  );\n\n  if (withCache) {\n    return (\n      <CacheProvider value={cache}>\n        <MuiThemeProvider theme={customOdysseyTheme ?? odysseyTheme}>\n          <OdysseyDesignTokensContext.Provider value={odysseyTokens}>\n            {children}\n          </OdysseyDesignTokensContext.Provider>\n        </MuiThemeProvider>\n      </CacheProvider>\n    );\n  }\n  return (\n    <MuiThemeProvider theme={customOdysseyTheme ?? odysseyTheme}>\n      <OdysseyDesignTokensContext.Provider value={odysseyTokens}>\n        {children}\n      </OdysseyDesignTokensContext.Provider>\n    </MuiThemeProvider>\n  );\n};\n\nconst MemoizedOdysseyThemeProvider = memo(OdysseyThemeProvider);\n\nexport { MemoizedOdysseyThemeProvider as OdysseyThemeProvider };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SACEA,WAAW,EACXC,aAAa,IAAIC,gBAAgB,QAC5B,sBAAsB;AAC7B,SAASC,IAAI,EAAaC,OAAO,QAAQ,OAAO;AAGhD,SAASC,SAAS,QAAQ,YAAY;AAAC,SAC9BC,qBAAqB;AAC9B,OAAO,KAAKC,MAAM,MAAM,6BAA6B;AAAC,SAC7CC,0BAA0B;AACnC,SAASC,aAAa,QAAQ,gBAAgB;AAC9C,OAAOC,WAAW,MAAM,gBAAgB;AAAC,SAChCC,uBAAuB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAWhC,MAAMC,oBAAoB,GAAGC,IAAA,IAOI;EAAA,IAPH;IAC5BC,QAAQ;IACRC,oBAAoB;IACpBC,WAAW;IACXC,gBAAgB;IAChBC,aAAa;IACbC,SAAS,GAAG;EACa,CAAC,GAAAN,IAAA;EAC1B,MAAMO,aAAa,GAAGlB,OAAO,CAC3B,OAAO;IAAE,GAAGG,MAAM;IAAE,GAAGU;EAAqB,CAAC,CAAC,EAC9C,CAACA,oBAAoB,CACvB,CAAC;EACD,MAAMM,YAAY,GAAGnB,OAAO,CAC1B,MACEE,qBAAqB,CAAC;IACpBgB,aAAa;IACbH;EACF,CAAC,CAAC,EACJ,CAACG,aAAa,EAAEH,gBAAgB,CAClC,CAAC;EAED,MAAMK,kBAAkB,GAAGpB,OAAO,CAChC,MAAMgB,aAAa,IAAIpB,WAAW,CAACK,SAAS,CAACkB,YAAY,EAAEH,aAAa,CAAC,CAAC,EAC1E,CAACG,YAAY,EAAEH,aAAa,CAC9B,CAAC;EAED,MAAMK,oBAAoB,GAAGd,uBAAuB,CAAC,CAAC;EAEtD,MAAMe,KAAK,GAAGtB,OAAO,CACnB,MACEM,WAAW,CAAC;IACV,IAAIQ,WAAW,IAAI;MAAES,SAAS,EAAET;IAAY,CAAC,CAAC;IAC9CU,GAAG,EAAEH,oBAAoB;IACzBI,OAAO,EAAE,IAAI;IACbC,KAAK,EAAEC,MAAM,CAACC,QAAQ;IACtBC,MAAM,EAAE;EACV,CAAC,CAAC,EACJ,CAACf,WAAW,EAAEO,oBAAoB,CACpC,CAAC;EAED,IAAIJ,SAAS,EAAE;IACb,OACER,IAAA,CAACJ,aAAa;MAACyB,KAAK,EAAER,KAAM;MAAAV,QAAA,EAC1BH,IAAA,CAACX,gBAAgB;QAACiC,KAAK,EAAEX,kBAAkB,IAAID,YAAa;QAAAP,QAAA,EAC1DH,IAAA,CAACL,0BAA0B,CAAC4B,QAAQ;UAACF,KAAK,EAAEZ,aAAc;UAAAN,QAAA,EACvDA;QAAQ,CAC0B;MAAC,CACtB;IAAC,CACN,CAAC;EAEpB;EACA,OACEH,IAAA,CAACX,gBAAgB;IAACiC,KAAK,EAAEX,kBAAkB,IAAID,YAAa;IAAAP,QAAA,EAC1DH,IAAA,CAACL,0BAA0B,CAAC4B,QAAQ;MAACF,KAAK,EAAEZ,aAAc;MAAAN,QAAA,EACvDA;IAAQ,CAC0B;EAAC,CACtB,CAAC;AAEvB,CAAC;AAED,MAAMqB,4BAA4B,GAAGlC,IAAI,CAACW,oBAAoB,CAAC;AAE/D,SAASuB,4BAA4B,IAAIvB,oBAAoB"}

package/dist/Radio.js

@@ -22,11 +22,15 @@ const Radio = _ref => {
     name,
     testId,
     value,
-    onChange: onChangeProp
+    onChange: onChangeProp,
+    onBlur: onBlurProp
   } = _ref;
   const onChange = useCallback((event, checked) => {
     onChangeProp?.(event, checked);
   }, [onChangeProp]);
+  const onBlur = useCallback(event => {
+    onBlurProp?.(event);
+  }, [onBlurProp]);
   return _jsx(_FormControlLabel, {
     checked: isChecked,
     className: isInvalid ? "Mui-error" : "",
@@ -37,7 +41,8 @@ const Radio = _ref => {
     disabled: isDisabled,
     label: label,
     name: name,
-    value: value
+    value: value,
+    onBlur: onBlur
   });
 };
 const MemoizedRadio = memo(Radio);

package/dist/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","names":["memo","useCallback","jsx","_jsx","Radio","_ref","isChecked","isDisabled","isInvalid","label","name","testId","value","onChange","onChangeProp","event","checked","_FormControlLabel","className","control","_Radio","disabled","MemoizedRadio","displayName"],"sources":["../src/Radio.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n  FormControlLabel,\n  Radio as MuiRadio,\n  RadioProps as MuiRadioProps,\n} from \"@mui/material\";\nimport { memo, useCallback } from \"react\";\n\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport type { SeleniumProps } from \"./SeleniumProps\";\n\nexport type RadioProps = {\n  /**\n   * If `true`, the Radio is selected\n   */\n  isChecked?: boolean;\n  /**\n   * If `true`, the Radio has an invalid value\n   */\n  isInvalid?: boolean;\n  /**\n   * The label text for the Radio\n   */\n  label: string;\n  /**\n   * The value attribute of the Radio\n   */\n  value: string;\n  /**\n   * Callback fired when the state is changed. Provides event and checked value.\n   */\n  onChange?: MuiRadioProps[\"onChange\"];\n} & Pick<FieldComponentProps, \"isDisabled\" | \"name\"> &\n  SeleniumProps;\n\nconst Radio = ({\n  isChecked,\n  isDisabled,\n  isInvalid,\n  label,\n  name,\n  testId,\n  value,\n  onChange: onChangeProp,\n}: RadioProps) => {\n  const onChange = useCallback<NonNullable<MuiRadioProps[\"onChange\"]>>(\n    (event, checked) => {\n      onChangeProp?.(event, checked);\n    },\n    [onChangeProp]\n  );\n\n  return (\n    <FormControlLabel\n      checked={isChecked}\n      className={isInvalid ? \"Mui-error\" : \"\"}\n      control={<MuiRadio onChange={onChange} />}\n      data-se={testId}\n      disabled={isDisabled}\n      label={label}\n      name={name}\n      value={value}\n    />\n  );\n};\n\nconst MemoizedRadio = memo(Radio);\nMemoizedRadio.displayName = \"Radio\";\n\nexport { MemoizedRadio as Radio };\n"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAOA,SAASA,IAAI,EAAEC,WAAW,QAAQ,OAAO;AAAC,SAAAC,GAAA,IAAAC,IAAA;AA6B1C,MAAMC,KAAK,GAAGC,IAAA,IASI;EAAA,IATH;IACbC,SAAS;IACTC,UAAU;IACVC,SAAS;IACTC,KAAK;IACLC,IAAI;IACJC,MAAM;IACNC,KAAK;IACLC,QAAQ,EAAEC;EACA,CAAC,GAAAT,IAAA;EACX,MAAMQ,QAAQ,GAAGZ,WAAW,CAC1B,CAACc,KAAK,EAAEC,OAAO,KAAK;IAClBF,YAAY,GAAGC,KAAK,EAAEC,OAAO,CAAC;EAChC,CAAC,EACD,CAACF,YAAY,CACf,CAAC;EAED,OACEX,IAAA,CAAAc,iBAAA;IACED,OAAO,EAAEV,SAAU;IACnBY,SAAS,EAAEV,SAAS,GAAG,WAAW,GAAG,EAAG;IACxCW,OAAO,EAAEhB,IAAA,CAAAiB,MAAA;MAAUP,QAAQ,EAAEA;IAAS,CAAE,CAAE;IAC1C,WAASF,MAAO;IAChBU,QAAQ,EAAEd,UAAW;IACrBE,KAAK,EAAEA,KAAM;IACbC,IAAI,EAAEA,IAAK;IACXE,KAAK,EAAEA;EAAM,CACd,CAAC;AAEN,CAAC;AAED,MAAMU,aAAa,GAAGtB,IAAI,CAACI,KAAK,CAAC;AACjCkB,aAAa,CAACC,WAAW,GAAG,OAAO;AAEnC,SAASD,aAAa,IAAIlB,KAAK"}
+{"version":3,"file":"Radio.js","names":["memo","useCallback","jsx","_jsx","Radio","_ref","isChecked","isDisabled","isInvalid","label","name","testId","value","onChange","onChangeProp","onBlur","onBlurProp","event","checked","_FormControlLabel","className","control","_Radio","disabled","MemoizedRadio","displayName"],"sources":["../src/Radio.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n  FormControlLabel,\n  FormControlLabelProps as MuiFormControlLabelProps,\n  Radio as MuiRadio,\n  RadioProps as MuiRadioProps,\n} from \"@mui/material\";\nimport { memo, useCallback } from \"react\";\n\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport type { SeleniumProps } from \"./SeleniumProps\";\n\nexport type RadioProps = {\n  /**\n   * If `true`, the Radio is selected\n   */\n  isChecked?: boolean;\n  /**\n   * If `true`, the Radio has an invalid value\n   */\n  isInvalid?: boolean;\n  /**\n   * The label text for the Radio\n   */\n  label: string;\n  /**\n   * The value attribute of the Radio\n   */\n  value: string;\n  /**\n   * Callback fired when the state is changed. Provides event and checked value.\n   */\n  onChange?: MuiRadioProps[\"onChange\"];\n  /**\n   * Callback fired when the blur event happens. Provides event value.\n   */\n  onBlur?: MuiFormControlLabelProps[\"onBlur\"];\n} & Pick<FieldComponentProps, \"isDisabled\" | \"name\"> &\n  SeleniumProps;\n\nconst Radio = ({\n  isChecked,\n  isDisabled,\n  isInvalid,\n  label,\n  name,\n  testId,\n  value,\n  onChange: onChangeProp,\n  onBlur: onBlurProp,\n}: RadioProps) => {\n  const onChange = useCallback<NonNullable<MuiRadioProps[\"onChange\"]>>(\n    (event, checked) => {\n      onChangeProp?.(event, checked);\n    },\n    [onChangeProp]\n  );\n\n  const onBlur = useCallback<NonNullable<MuiFormControlLabelProps[\"onBlur\"]>>(\n    (event) => {\n      onBlurProp?.(event);\n    },\n    [onBlurProp]\n  );\n\n  return (\n    <FormControlLabel\n      checked={isChecked}\n      className={isInvalid ? \"Mui-error\" : \"\"}\n      control={<MuiRadio onChange={onChange} />}\n      data-se={testId}\n      disabled={isDisabled}\n      label={label}\n      name={name}\n      value={value}\n      onBlur={onBlur}\n    />\n  );\n};\n\nconst MemoizedRadio = memo(Radio);\nMemoizedRadio.displayName = \"Radio\";\n\nexport { MemoizedRadio as Radio };\n"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAQA,SAASA,IAAI,EAAEC,WAAW,QAAQ,OAAO;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAiC1C,MAAMC,KAAK,GAAGC,IAAA,IAUI;EAAA,IAVH;IACbC,SAAS;IACTC,UAAU;IACVC,SAAS;IACTC,KAAK;IACLC,IAAI;IACJC,MAAM;IACNC,KAAK;IACLC,QAAQ,EAAEC,YAAY;IACtBC,MAAM,EAAEC;EACE,CAAC,GAAAX,IAAA;EACX,MAAMQ,QAAQ,GAAGZ,WAAW,CAC1B,CAACgB,KAAK,EAAEC,OAAO,KAAK;IAClBJ,YAAY,GAAGG,KAAK,EAAEC,OAAO,CAAC;EAChC,CAAC,EACD,CAACJ,YAAY,CACf,CAAC;EAED,MAAMC,MAAM,GAAGd,WAAW,CACvBgB,KAAK,IAAK;IACTD,UAAU,GAAGC,KAAK,CAAC;EACrB,CAAC,EACD,CAACD,UAAU,CACb,CAAC;EAED,OACEb,IAAA,CAAAgB,iBAAA;IACED,OAAO,EAAEZ,SAAU;IACnBc,SAAS,EAAEZ,SAAS,GAAG,WAAW,GAAG,EAAG;IACxCa,OAAO,EAAElB,IAAA,CAAAmB,MAAA;MAAUT,QAAQ,EAAEA;IAAS,CAAE,CAAE;IAC1C,WAASF,MAAO;IAChBY,QAAQ,EAAEhB,UAAW;IACrBE,KAAK,EAAEA,KAAM;IACbC,IAAI,EAAEA,IAAK;IACXE,KAAK,EAAEA,KAAM;IACbG,MAAM,EAAEA;EAAO,CAChB,CAAC;AAEN,CAAC;AAED,MAAMS,aAAa,GAAGxB,IAAI,CAACI,KAAK,CAAC;AACjCoB,aAAa,CAACC,WAAW,GAAG,OAAO;AAEnC,SAASD,aAAa,IAAIpB,KAAK"}

package/dist/createShadowRootElement.js

@@ -14,8 +14,13 @@ export const createShadowRootElement = containerElement => {
   const shadowRoot = containerElement.attachShadow({
     mode: "open"
   });
+  const emotionRoot = document.createElement("style");
+  emotionRoot.setAttribute("id", "style-root");
+  emotionRoot.setAttribute("nonce", window.cspNonce);
   const shadowRootElement = document.createElement("div");
-  shadowRoot.append(shadowRootElement);
-  return shadowRoot;
+  shadowRootElement.setAttribute("id", "shadow-root");
+  shadowRoot.appendChild(emotionRoot);
+  shadowRoot.appendChild(shadowRootElement);
+  return [emotionRoot, shadowRootElement];
 };
 //# sourceMappingURL=createShadowRootElement.js.map

package/dist/createShadowRootElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"createShadowRootElement.js","names":["createShadowRootElement","containerElement","shadowRoot","attachShadow","mode","shadowRootElement","document","createElement","append"],"sources":["../src/createShadowRootElement.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\nexport const createShadowRootElement = (containerElement: HTMLElement) => {\n  const shadowRoot = containerElement.attachShadow({ mode: \"open\" });\n\n  const shadowRootElement = document.createElement(\"div\");\n\n  shadowRoot.append(shadowRootElement);\n\n  return shadowRoot;\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAO,MAAMA,uBAAuB,GAAIC,gBAA6B,IAAK;EACxE,MAAMC,UAAU,GAAGD,gBAAgB,CAACE,YAAY,CAAC;IAAEC,IAAI,EAAE;EAAO,CAAC,CAAC;EAElE,MAAMC,iBAAiB,GAAGC,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;EAEvDL,UAAU,CAACM,MAAM,CAACH,iBAAiB,CAAC;EAEpC,OAAOH,UAAU;AACnB,CAAC"}
+{"version":3,"file":"createShadowRootElement.js","names":["createShadowRootElement","containerElement","shadowRoot","attachShadow","mode","emotionRoot","document","createElement","setAttribute","window","cspNonce","shadowRootElement","appendChild"],"sources":["../src/createShadowRootElement.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\nexport const createShadowRootElement = (\n  containerElement: HTMLElement\n): [HTMLStyleElement, HTMLDivElement] => {\n  const shadowRoot = containerElement.attachShadow({ mode: \"open\" });\n\n  // the element that styles will be cached into\n  const emotionRoot = document.createElement(\"style\");\n  emotionRoot.setAttribute(\"id\", \"style-root\");\n  emotionRoot.setAttribute(\"nonce\", window.cspNonce);\n\n  // the element that emotion renders html into\n  const shadowRootElement = document.createElement(\"div\");\n  shadowRootElement.setAttribute(\"id\", \"shadow-root\");\n\n  shadowRoot.appendChild(emotionRoot);\n  shadowRoot.appendChild(shadowRootElement);\n\n  return [emotionRoot, shadowRootElement];\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAO,MAAMA,uBAAuB,GAClCC,gBAA6B,IACU;EACvC,MAAMC,UAAU,GAAGD,gBAAgB,CAACE,YAAY,CAAC;IAAEC,IAAI,EAAE;EAAO,CAAC,CAAC;EAGlE,MAAMC,WAAW,GAAGC,QAAQ,CAACC,aAAa,CAAC,OAAO,CAAC;EACnDF,WAAW,CAACG,YAAY,CAAC,IAAI,EAAE,YAAY,CAAC;EAC5CH,WAAW,CAACG,YAAY,CAAC,OAAO,EAAEC,MAAM,CAACC,QAAQ,CAAC;EAGlD,MAAMC,iBAAiB,GAAGL,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;EACvDI,iBAAiB,CAACH,YAAY,CAAC,IAAI,EAAE,aAAa,CAAC;EAEnDN,UAAU,CAACU,WAAW,CAACP,WAAW,CAAC;EACnCH,UAAU,CAACU,WAAW,CAACD,iBAAiB,CAAC;EAEzC,OAAO,CAACN,WAAW,EAAEM,iBAAiB,CAAC;AACzC,CAAC"}

package/dist/src/Checkbox.d.ts

@@ -10,7 +10,7 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 /// <reference types="react" />
-import { CheckboxProps as MuiCheckboxProps } from "@mui/material";
+import { CheckboxProps as MuiCheckboxProps, FormControlLabelProps as MuiFormControlLabelProps } from "@mui/material";
 import { FieldComponentProps } from "./FieldComponentProps";
 import type { SeleniumProps } from "./SeleniumProps";
 import { CheckedFieldProps } from "./FormCheckedProps";
@@ -56,7 +56,11 @@ export type CheckboxProps = {
      * The value attribute of the Checkbox
      */
     value?: string;
+    /**
+     * Callback fired when the blur event happens. Provides event value.
+     */
+    onBlur?: MuiFormControlLabelProps["onBlur"];
 } & Pick<FieldComponentProps, "id" | "isDisabled" | "name"> & CheckedFieldProps<MuiCheckboxProps> & SeleniumProps;
-declare const MemoizedCheckbox: import("react").MemoExoticComponent<({ ariaLabel, ariaLabelledBy, id: idOverride, isChecked, isDefaultChecked, isDisabled, isIndeterminate, isRequired, label: labelProp, hint, name: nameOverride, onChange: onChangeProp, testId, validity, value, }: CheckboxProps) => JSX.Element>;
+declare const MemoizedCheckbox: import("react").MemoExoticComponent<({ ariaLabel, ariaLabelledBy, id: idOverride, isChecked, isDefaultChecked, isDisabled, isIndeterminate, isRequired, label: labelProp, hint, name: nameOverride, onChange: onChangeProp, onBlur: onBlurProp, testId, validity, value, }: CheckboxProps) => JSX.Element>;
 export { MemoizedCheckbox as Checkbox };
 //# sourceMappingURL=Checkbox.d.ts.map

package/dist/src/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/Checkbox.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;;AAIH,OAAO,EAEL,aAAa,IAAI,gBAAgB,EAGlC,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD,eAAO,MAAM,sBAAsB,0CAA2C,CAAC;AAE/E,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,sBAAsB,CAAC,CAAC,MAAM,CAAC,CAAC;IACnD;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,IAAI,CAAC,mBAAmB,EAAE,IAAI,GAAG,YAAY,GAAG,MAAM,CAAC,GACzD,iBAAiB,CAAC,gBAAgB,CAAC,GACnC,aAAa,CAAC;AA2FhB,QAAA,MAAM,gBAAgB,0PAzEnB,aAAa,iBAyEuB,CAAC;AAGxC,OAAO,EAAE,gBAAgB,IAAI,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/Checkbox.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;;AAIH,OAAO,EAEL,aAAa,IAAI,gBAAgB,EAEjC,qBAAqB,IAAI,wBAAwB,EAElD,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD,eAAO,MAAM,sBAAsB,0CAA2C,CAAC;AAE/E,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,sBAAsB,CAAC,CAAC,MAAM,CAAC,CAAC;IACnD;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,wBAAwB,CAAC,QAAQ,CAAC,CAAC;CAC7C,GAAG,IAAI,CAAC,mBAAmB,EAAE,IAAI,GAAG,YAAY,GAAG,MAAM,CAAC,GACzD,iBAAiB,CAAC,gBAAgB,CAAC,GACnC,aAAa,CAAC;AAoGhB,QAAA,MAAM,gBAAgB,8QAjFnB,aAAa,iBAiFuB,CAAC;AAGxC,OAAO,EAAE,gBAAgB,IAAI,QAAQ,EAAE,CAAC"}

package/dist/src/OdysseyCacheProvider.d.ts

@@ -18,14 +18,19 @@ import { StylisPlugin } from "@emotion/cache";
 import { ReactNode } from "react";
 export type OdysseyCacheProviderProps = {
     children: ReactNode;
+    nonce?: string;
+    /**
+     * Emotion caches styles into the style element.
+     * When enabling this prop, Emotion caches the styles at this element, rather than in <head>.
+     */
+    emotionRoot?: HTMLStyleElement;
     /**
      * Emotion renders into this HTML element.
      * When enabling this prop, Emotion renders at the top of this component rather than the bottom like it does in the HTML `<head>`.
      */
-    nonce?: string;
-    shadowDomElement?: HTMLDivElement;
+    shadowDomElement?: HTMLDivElement | HTMLElement;
     stylisPlugins?: StylisPlugin[];
 };
-declare const MemoizedOdysseyCacheProvider: import("react").MemoExoticComponent<({ children, nonce, shadowDomElement, stylisPlugins, }: OdysseyCacheProviderProps) => JSX.Element>;
+declare const MemoizedOdysseyCacheProvider: import("react").MemoExoticComponent<({ children, emotionRoot, }: OdysseyCacheProviderProps) => JSX.Element>;
 export { MemoizedOdysseyCacheProvider as OdysseyCacheProvider };
 //# sourceMappingURL=OdysseyCacheProvider.d.ts.map

package/dist/src/OdysseyCacheProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OdysseyCacheProvider.d.ts","sourceRoot":"","sources":["../../src/OdysseyCacheProvider.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,QAAQ,EAAE,MAAM,CAAC;KAClB;CACF;AAED,OAAoB,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE3D,OAAO,EAAQ,SAAS,EAAW,MAAM,OAAO,CAAC;AAIjD,MAAM,MAAM,yBAAyB,GAAG;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,cAAc,CAAC;IAClC,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;CAChC,CAAC;AAmCF,QAAA,MAAM,4BAA4B,8FA5B/B,yBAAyB,iBA4BmC,CAAC;AAGhE,OAAO,EAAE,4BAA4B,IAAI,oBAAoB,EAAE,CAAC"}
+{"version":3,"file":"OdysseyCacheProvider.d.ts","sourceRoot":"","sources":["../../src/OdysseyCacheProvider.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,QAAQ,EAAE,MAAM,CAAC;KAClB;CACF;AAED,OAAoB,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC3D,OAAO,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAIjD,MAAM,MAAM,yBAAyB,GAAG;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,cAAc,GAAG,WAAW,CAAC;IAChD,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;CAChC,CAAC;AAqBF,QAAA,MAAM,4BAA4B,mEAhB/B,yBAAyB,iBAgBmC,CAAC;AAGhE,OAAO,EAAE,4BAA4B,IAAI,oBAAoB,EAAE,CAAC"}

package/dist/src/OdysseyProvider.d.ts

@@ -16,6 +16,6 @@ import { OdysseyTranslationProviderProps } from "./OdysseyTranslationProvider";
 export type OdysseyProviderProps = OdysseyCacheProviderProps & OdysseyThemeProviderProps & OdysseyTranslationProviderProps & {
     children: ReactNode;
 };
-declare const MemoizedThemeProvider: import("react").MemoExoticComponent<({ children, designTokensOverride, shadowDomElement, languageCode, nonce, stylisPlugins, themeOverride, translationOverrides, }: OdysseyProviderProps) => JSX.Element>;
+declare const MemoizedThemeProvider: import("react").MemoExoticComponent<({ children, designTokensOverride, emotionRoot, shadowDomElement, languageCode, nonce, stylisPlugins, themeOverride, translationOverrides, }: OdysseyProviderProps) => JSX.Element>;
 export { MemoizedThemeProvider as OdysseyProvider };
 //# sourceMappingURL=OdysseyProvider.d.ts.map

package/dist/src/OdysseyProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OdysseyProvider.d.ts","sourceRoot":"","sources":["../../src/OdysseyProvider.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAQ,SAAS,EAAE,MAAM,OAAO,CAAC;AAGxC,OAAO,EAEL,yBAAyB,EAC1B,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAEL,yBAAyB,EAC1B,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAEL,+BAA+B,EAChC,MAAM,8BAA8B,CAAC;AAEtC,MAAM,MAAM,oBAAoB,GAAG,yBAAyB,GAC1D,yBAAyB,GACzB,+BAA+B,GAAG;IAChC,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAkCJ,QAAA,MAAM,qBAAqB,uKAvBxB,oBAAoB,iBAuB4B,CAAC;AAEpD,OAAO,EAAE,qBAAqB,IAAI,eAAe,EAAE,CAAC"}
+{"version":3,"file":"OdysseyProvider.d.ts","sourceRoot":"","sources":["../../src/OdysseyProvider.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAQ,SAAS,EAAE,MAAM,OAAO,CAAC;AAGxC,OAAO,EAEL,yBAAyB,EAC1B,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAEL,yBAAyB,EAC1B,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAEL,+BAA+B,EAChC,MAAM,8BAA8B,CAAC;AAEtC,MAAM,MAAM,oBAAoB,GAAG,yBAAyB,GAC1D,yBAAyB,GACzB,+BAA+B,GAAG;IAChC,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAsCJ,QAAA,MAAM,qBAAqB,oLA1BxB,oBAAoB,iBA0B4B,CAAC;AAEpD,OAAO,EAAE,qBAAqB,IAAI,eAAe,EAAE,CAAC"}

package/dist/src/OdysseyThemeProvider.d.ts

@@ -15,9 +15,11 @@ import { DesignTokensOverride } from "./theme";
 export type OdysseyThemeProviderProps = {
     children: ReactNode;
     designTokensOverride?: DesignTokensOverride;
-    shadowDomElement?: HTMLDivElement;
+    emotionRoot?: HTMLStyleElement;
+    shadowDomElement?: HTMLDivElement | HTMLElement | undefined;
     themeOverride?: ThemeOptions;
+    withCache?: boolean;
 };
-declare const MemoizedOdysseyThemeProvider: import("react").MemoExoticComponent<({ children, designTokensOverride, shadowDomElement, themeOverride, }: OdysseyThemeProviderProps) => JSX.Element>;
+declare const MemoizedOdysseyThemeProvider: import("react").MemoExoticComponent<({ children, designTokensOverride, emotionRoot, shadowDomElement, themeOverride, withCache, }: OdysseyThemeProviderProps) => JSX.Element>;
 export { MemoizedOdysseyThemeProvider as OdysseyThemeProvider };
 //# sourceMappingURL=OdysseyThemeProvider.d.ts.map

package/dist/src/OdysseyThemeProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OdysseyThemeProvider.d.ts","sourceRoot":"","sources":["../../src/OdysseyThemeProvider.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAMH,OAAO,EAAQ,SAAS,EAAW,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C,OAAO,EAAyB,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAItE,MAAM,MAAM,yBAAyB,GAAG;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB,oBAAoB,CAAC,EAAE,oBAAoB,CAAC;IAC5C,gBAAgB,CAAC,EAAE,cAAc,CAAC;IAClC,aAAa,CAAC,EAAE,YAAY,CAAC;CAC9B,CAAC;AAmCF,QAAA,MAAM,4BAA4B,6GA5B/B,yBAAyB,iBA4BmC,CAAC;AAEhE,OAAO,EAAE,4BAA4B,IAAI,oBAAoB,EAAE,CAAC"}
+{"version":3,"file":"OdysseyThemeProvider.d.ts","sourceRoot":"","sources":["../../src/OdysseyThemeProvider.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAMH,OAAO,EAAQ,SAAS,EAAW,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C,OAAO,EAAyB,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAOtE,MAAM,MAAM,yBAAyB,GAAG;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB,oBAAoB,CAAC,EAAE,oBAAoB,CAAC;IAC5C,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,gBAAgB,CAAC,EAAE,cAAc,GAAG,WAAW,GAAG,SAAS,CAAC;IAC5D,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AA8DF,QAAA,MAAM,4BAA4B,qIArD/B,yBAAyB,iBAqDmC,CAAC;AAEhE,OAAO,EAAE,4BAA4B,IAAI,oBAAoB,EAAE,CAAC"}

package/dist/src/Radio.d.ts

@@ -10,7 +10,7 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 /// <reference types="react" />
-import { RadioProps as MuiRadioProps } from "@mui/material";
+import { FormControlLabelProps as MuiFormControlLabelProps, RadioProps as MuiRadioProps } from "@mui/material";
 import { FieldComponentProps } from "./FieldComponentProps";
 import type { SeleniumProps } from "./SeleniumProps";
 export type RadioProps = {
@@ -34,7 +34,11 @@ export type RadioProps = {
      * Callback fired when the state is changed. Provides event and checked value.
      */
     onChange?: MuiRadioProps["onChange"];
+    /**
+     * Callback fired when the blur event happens. Provides event value.
+     */
+    onBlur?: MuiFormControlLabelProps["onBlur"];
 } & Pick<FieldComponentProps, "isDisabled" | "name"> & SeleniumProps;
-declare const MemoizedRadio: import("react").MemoExoticComponent<({ isChecked, isDisabled, isInvalid, label, name, testId, value, onChange: onChangeProp, }: RadioProps) => JSX.Element>;
+declare const MemoizedRadio: import("react").MemoExoticComponent<({ isChecked, isDisabled, isInvalid, label, name, testId, value, onChange: onChangeProp, onBlur: onBlurProp, }: RadioProps) => JSX.Element>;
 export { MemoizedRadio as Radio };
 //# sourceMappingURL=Radio.d.ts.map

package/dist/src/Radio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../src/Radio.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;;AAEH,OAAO,EAGL,UAAU,IAAI,aAAa,EAC5B,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,MAAM,MAAM,UAAU,GAAG;IACvB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;CACtC,GAAG,IAAI,CAAC,mBAAmB,EAAE,YAAY,GAAG,MAAM,CAAC,GAClD,aAAa,CAAC;AAiChB,QAAA,MAAM,aAAa,kIAtBhB,UAAU,iBAsBoB,CAAC;AAGlC,OAAO,EAAE,aAAa,IAAI,KAAK,EAAE,CAAC"}
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../src/Radio.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;;AAEH,OAAO,EAEL,qBAAqB,IAAI,wBAAwB,EAEjD,UAAU,IAAI,aAAa,EAC5B,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,MAAM,MAAM,UAAU,GAAG;IACvB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACrC;;OAEG;IACH,MAAM,CAAC,EAAE,wBAAwB,CAAC,QAAQ,CAAC,CAAC;CAC7C,GAAG,IAAI,CAAC,mBAAmB,EAAE,YAAY,GAAG,MAAM,CAAC,GAClD,aAAa,CAAC;AA0ChB,QAAA,MAAM,aAAa,sJA9BhB,UAAU,iBA8BoB,CAAC;AAGlC,OAAO,EAAE,aAAa,IAAI,KAAK,EAAE,CAAC"}

package/dist/src/createShadowRootElement.d.ts

@@ -9,5 +9,5 @@
  *
  * See the License for the specific language governing permissions and limitations under the License.
  */
-export declare const createShadowRootElement: (containerElement: HTMLElement) => ShadowRoot;
+export declare const createShadowRootElement: (containerElement: HTMLElement) => [HTMLStyleElement, HTMLDivElement];
 //# sourceMappingURL=createShadowRootElement.d.ts.map

package/dist/src/createShadowRootElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createShadowRootElement.d.ts","sourceRoot":"","sources":["../../src/createShadowRootElement.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,eAAO,MAAM,uBAAuB,qBAAsB,WAAW,eAQpE,CAAC"}
+{"version":3,"file":"createShadowRootElement.d.ts","sourceRoot":"","sources":["../../src/createShadowRootElement.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,eAAO,MAAM,uBAAuB,qBAChB,WAAW,KAC5B,CAAC,gBAAgB,EAAE,cAAc,CAgBnC,CAAC"}

package/dist/src/theme/components.d.ts

@@ -13,6 +13,6 @@ import { ThemeOptions } from "@mui/material";
 import { DesignTokens } from "./theme";
 export declare const components: ({ odysseyTokens, shadowDomElement, }: {
     odysseyTokens: DesignTokens;
-    shadowDomElement?: HTMLDivElement | undefined;
+    shadowDomElement?: HTMLElement | undefined;
 }) => ThemeOptions["components"];
 //# sourceMappingURL=components.d.ts.map

package/dist/src/theme/createOdysseyMuiTheme.d.ts

@@ -18,6 +18,6 @@ export type DesignTokens = typeof Tokens;
 export type DesignTokensOverride = Partial<typeof Tokens>;
 export declare const createOdysseyMuiTheme: ({ odysseyTokens, shadowDomElement, }: {
     odysseyTokens: DesignTokens;
-    shadowDomElement?: HTMLDivElement | undefined;
+    shadowDomElement?: HTMLElement | undefined;
 }) => import("@mui/material/styles").Theme;
 //# sourceMappingURL=createOdysseyMuiTheme.d.ts.map