@okta/odyssey-react-mui 1.24.1 → 1.26.0

package/dist/src/web-component/shadow-dom.d.ts

@@ -0,0 +1,23 @@
+/*!
+ * 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.
+ */
+/**
+ * @deprecated Use `renderReactInWebComponent` instead. This function was necessary when using bare Shadow DOM, but with UI Shell rendering in a Web Component, you won't be able to render your Shadow DOM in its Shadow DOM without using a Web Component.
+ */
+export declare const createShadowDomElements: (containerElement: HTMLElement) => {
+    emotionRootElement: HTMLDivElement;
+    shadowRootElement: HTMLDivElement;
+};
+/**
+ * @deprecated Use `createShadowDomElements` instead which returns an object instead of an array. It's otherwise the same.
+ * @deprecated Ideally, use `renderReactInWebComponent` instead. This function was necessary when using bare Shadow DOM, but with UI Shell rendering in a Web Component, you won't be able to render your Shadow DOM in its Shadow DOM without using a Web Component. */
+export declare const createShadowRootElement: (containerElement: HTMLElement) => [HTMLStyleElement, HTMLDivElement];
+//# sourceMappingURL=shadow-dom.d.ts.map

package/dist/src/web-component/shadow-dom.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shadow-dom.d.ts","sourceRoot":"","sources":["../../../src/web-component/shadow-dom.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAIH;;GAEG;AACH,eAAO,MAAM,uBAAuB,qBAAsB,WAAW;;;CAapE,CAAC;AAEF;;wQAEwQ;AACxQ,eAAO,MAAM,uBAAuB,qBAChB,WAAW,KAC5B,CAAC,gBAAgB,EAAE,cAAc,CAgBnC,CAAC"}

package/dist/test-selectors/querySelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"querySelector.js","names":["getComputedAccessibleText","getByRoleQuerySelector","getByTextQuerySelector","getControlledElement","ElementError","captureElement","containerElement","queryMethod","querySelectorOptions","role","testSelector","sharedProps","element","queryOptions","Object","fromEntries","entries","elementSelector","options","map","testSelectorOptionKey","testingLibraryOptionKey","method","Array","isArray","selectionMethod","text","isControlledElement","error","querySelector","props","capturedElement","undefined","getAccessibleText","labelName","Error","type","accessibleText","selectChild","childProps","children","name"],"sources":["../../src/test-selectors/querySelector.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\nimport {\n  type AccessibleTextSelector,\n  type AriaRole,\n  type ElementChildSelector,\n  type TestSelector,\n  type ElementSelector,\n} from \"./testSelector\";\nimport { getComputedAccessibleText } from \"./getComputedAccessibleText\";\nimport {\n  getByRoleQuerySelector,\n  getByTextQuerySelector,\n  type QueryMethod,\n} from \"./getByQuerySelector\";\nimport { getControlledElement } from \"./linkedHtmlSelectors\";\nimport { ElementError } from \"./sanityChecks\";\n\nexport type InnerQuerySelectorProps<\n  LocalTestSelector extends TestSelector,\n  LocalQueryMethod extends QueryMethod,\n> = {\n  /**\n   * Testing Library method used to query elements.\n   */\n  queryMethod?: LocalQueryMethod;\n} & (LocalTestSelector extends ElementSelector\n  ? LocalTestSelector[\"elementSelector\"] extends {\n      role: infer Role;\n    }\n    ? Role extends AriaRole[]\n      ? {\n          /**\n           * Role is used when you have an optional `role`; otherwise, it'd baked into the metadata.\n           */\n          role: Role[number];\n        }\n      : object\n    : object\n  : object) &\n  (LocalTestSelector extends ElementSelector\n    ? {\n        /**\n         * Helps narrow down HTML selection to the correct element.\n         */\n        options: Record<\n          keyof LocalTestSelector[\"elementSelector\"][\"options\"],\n          string | RegExp\n        >;\n      }\n    : object);\n\nexport const captureElement = <\n  LocalTestSelector extends TestSelector,\n  QuerySelectorOptions extends Record<string, string | RegExp>,\n  LocalQueryMethod extends QueryMethod = \"get\",\n>({\n  containerElement,\n  queryMethod,\n  querySelectorOptions,\n  role,\n  testSelector,\n}: {\n  containerElement: HTMLElement;\n  queryMethod: LocalQueryMethod;\n  querySelectorOptions?: QuerySelectorOptions;\n  role?: AriaRole;\n  testSelector: LocalTestSelector;\n}) => {\n  if (\"elementSelector\" in testSelector && querySelectorOptions) {\n    const sharedProps = {\n      element: containerElement,\n      queryMethod,\n      queryOptions: Object.fromEntries(\n        Object.entries(testSelector.elementSelector.options).map(\n          ([testSelectorOptionKey, testingLibraryOptionKey]) => [\n            testingLibraryOptionKey,\n            querySelectorOptions[testSelectorOptionKey],\n          ],\n        ),\n      ),\n    };\n\n    if (testSelector.elementSelector.method === \"ByRole\") {\n      return getByRoleQuerySelector({\n        ...sharedProps,\n        role:\n          Array.isArray(testSelector.elementSelector.role) || role\n            ? role || \"\"\n            : testSelector.elementSelector.role,\n      });\n    }\n\n    return getByTextQuerySelector({\n      ...sharedProps,\n      selectionMethod: testSelector.elementSelector.method,\n      text: testSelector.elementSelector.text,\n    });\n  } else if (\n    \"isControlledElement\" in testSelector &&\n    testSelector.isControlledElement\n  ) {\n    try {\n      return getControlledElement({ element: containerElement });\n    } catch (error) {\n      if (queryMethod === \"query\") {\n        return null;\n      }\n\n      throw error;\n    }\n  }\n\n  return null;\n};\n\nexport const querySelector =\n  <LocalTestSelector extends TestSelector>(\n    /**\n     * Selectors object including children and accessible text selections.\n     */\n    testSelector: LocalTestSelector,\n  ) =>\n  <LocalQueryMethod extends QueryMethod = \"get\">(\n    props: {\n      /**\n       * Refers to Testing Library's canvas. This is usually `screen`, but Storybook uses `within(canvas)`.\n       */\n      element: HTMLElement;\n    } & InnerQuerySelectorProps<LocalTestSelector, LocalQueryMethod>,\n  ) => {\n    const { element: containerElement, queryMethod } = props;\n\n    const capturedElement = captureElement({\n      containerElement,\n      queryMethod: queryMethod || (\"get\" as const),\n      querySelectorOptions: \"options\" in props ? props.options : undefined,\n      role: \"role\" in props ? (props.role as AriaRole) : undefined,\n      testSelector,\n    });\n\n    const getAccessibleText = <\n      LabelName extends LocalTestSelector extends AccessibleTextSelector\n        ? keyof LocalTestSelector[\"accessibleText\"]\n        : never,\n    >(\n      labelName: LabelName,\n    ) => {\n      if (!capturedElement) {\n        throw new ElementError(\n          \"No child HTML element available\",\n          containerElement,\n        );\n      }\n\n      if (!(\"accessibleText\" in testSelector)) {\n        throw new Error(\"Missing `accessibleText` in `TestSelector`\");\n      }\n\n      return getComputedAccessibleText({\n        element: capturedElement,\n        type: testSelector.accessibleText[labelName],\n      });\n    };\n\n    const selectChild = <\n      ChildName extends LocalTestSelector extends ElementChildSelector\n        ? keyof LocalTestSelector[\"children\"]\n        : keyof ElementChildSelector,\n      ChildQueryMethod extends QueryMethod = \"get\",\n    >(\n      childProps: {\n        name: ChildName;\n      } & InnerQuerySelectorProps<\n        LocalTestSelector extends ElementChildSelector\n          ? LocalTestSelector[\"children\"][ChildName]\n          : TestSelector,\n        ChildQueryMethod\n      >,\n    ) => {\n      if (!capturedElement) {\n        throw new ElementError(\n          \"No child HTML element available\",\n          containerElement,\n        );\n      }\n\n      if (!(\"children\" in testSelector)) {\n        throw new Error(\"Missing `children` in `TestSelector`\");\n      }\n\n      type Options = Record<\n        LocalTestSelector extends ElementChildSelector\n          ? LocalTestSelector[\"children\"][ChildName] extends ElementSelector\n            ? keyof LocalTestSelector[\"children\"][ChildName][\"elementSelector\"][\"options\"]\n            : never\n          : never,\n        string | RegExp\n      >;\n\n      return querySelector(\n        testSelector.children[\n          childProps.name\n        ] as LocalTestSelector extends ElementChildSelector\n          ? LocalTestSelector[\"children\"][ChildName]\n          : TestSelector,\n      )(\n        // @ts-expect-error: Type '{ role?: AriaRole | undefined; options?: Record<LocalTestSelector extends ElementChildSelector ? LocalTestSelector[\"children\"][ChildName] extends TestSelector ? keyof LocalTestSelector[\"children\"][ChildName][\"selector\"][\"options\"] : string : string, string | RegExp> | undefined; element: HTMLElement...' is not assignable to type '(LocalTestSelector extends ElementChildSelector ? LocalTestSelector[\"children\"][ChildName] : TestSelector) extends { ...; } ? Role extends AriaRole[] ? { ...; } : object : object'.ts(2345)\n        // `as testSelector.children[ChildName]` narrows the props down enough that TypeScript errors here. We're passing the correct information, but it doesn't know that, and it's difficult to fix this. -Kevin Ghadyani\n        {\n          element: capturedElement,\n          queryMethod: childProps.queryMethod,\n          ...(\"options\" in childProps && childProps.options\n            ? {\n                options: childProps.options as Options,\n              }\n            : {}),\n          ...(\"role\" in childProps && childProps.role\n            ? {\n                role: childProps.role as AriaRole,\n              }\n            : {}),\n        },\n      );\n    };\n\n    return {\n      element: capturedElement as LocalQueryMethod extends \"get\"\n        ? HTMLElement\n        : HTMLElement | null,\n      getAccessibleText:\n        getAccessibleText as LocalTestSelector extends AccessibleTextSelector\n          ? typeof getAccessibleText\n          : never,\n      selectChild: selectChild as LocalTestSelector extends ElementChildSelector\n        ? typeof selectChild\n        : never,\n    };\n  };\n"],"mappings":"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"}
+{"version":3,"file":"querySelector.js","names":["getComputedAccessibleText","getByRoleQuerySelector","getByTextQuerySelector","getControlledElement","ElementError","captureElement","containerElement","queryMethod","querySelectorOptions","role","testSelector","sharedProps","element","queryOptions","Object","fromEntries","entries","elementSelector","options","map","testSelectorOptionKey","testingLibraryOptionKey","method","Array","isArray","selectionMethod","text","isControlledElement","error","querySelector","props","capturedElement","undefined","getAccessibleText","labelName","Error","type","accessibleText","selectChild","childProps","children","name"],"sources":["../../src/test-selectors/querySelector.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\nimport {\n  type AccessibleTextSelector,\n  type AriaRole,\n  type ElementChildSelector,\n  type TestSelector,\n  type ElementSelector,\n} from \"./testSelector\";\nimport { getComputedAccessibleText } from \"./getComputedAccessibleText\";\nimport {\n  getByRoleQuerySelector,\n  getByTextQuerySelector,\n  type QueryMethod,\n} from \"./getByQuerySelector\";\nimport { getControlledElement } from \"./linkedHtmlSelectors\";\nimport { ElementError } from \"./sanityChecks\";\n\nexport type InnerQuerySelectorProps<\n  LocalTestSelector extends TestSelector,\n  LocalQueryMethod extends QueryMethod,\n> = {\n  /**\n   * Testing Library method used to query elements.\n   */\n  queryMethod?: LocalQueryMethod;\n} & (LocalTestSelector extends ElementSelector\n  ? LocalTestSelector[\"elementSelector\"] extends {\n      role: infer Role;\n    }\n    ? Role extends AriaRole[]\n      ? {\n          /**\n           * Role is used when you have an optional `role`; otherwise, it's baked into the metadata.\n           */\n          role: Role[number];\n        }\n      : object\n    : object\n  : object) &\n  (LocalTestSelector extends ElementSelector\n    ? {\n        /**\n         * Helps narrow down HTML selection to the correct element.\n         */\n        options: Record<\n          keyof LocalTestSelector[\"elementSelector\"][\"options\"],\n          string | RegExp\n        >;\n      }\n    : object);\n\nexport const captureElement = <\n  LocalTestSelector extends TestSelector,\n  QuerySelectorOptions extends Record<string, string | RegExp>,\n  LocalQueryMethod extends QueryMethod = \"get\",\n>({\n  containerElement,\n  queryMethod,\n  querySelectorOptions,\n  role,\n  testSelector,\n}: {\n  containerElement: HTMLElement;\n  queryMethod: LocalQueryMethod;\n  querySelectorOptions?: QuerySelectorOptions;\n  role?: AriaRole;\n  testSelector: LocalTestSelector;\n}) => {\n  if (\"elementSelector\" in testSelector && querySelectorOptions) {\n    const sharedProps = {\n      element: containerElement,\n      queryMethod,\n      queryOptions: Object.fromEntries(\n        Object.entries(testSelector.elementSelector.options).map(\n          ([testSelectorOptionKey, testingLibraryOptionKey]) => [\n            testingLibraryOptionKey,\n            querySelectorOptions[testSelectorOptionKey],\n          ],\n        ),\n      ),\n    };\n\n    if (testSelector.elementSelector.method === \"ByRole\") {\n      return getByRoleQuerySelector({\n        ...sharedProps,\n        role:\n          Array.isArray(testSelector.elementSelector.role) || role\n            ? role || \"\"\n            : testSelector.elementSelector.role,\n      });\n    }\n\n    return getByTextQuerySelector({\n      ...sharedProps,\n      selectionMethod: testSelector.elementSelector.method,\n      text: testSelector.elementSelector.text,\n    });\n  } else if (\n    \"isControlledElement\" in testSelector &&\n    testSelector.isControlledElement\n  ) {\n    try {\n      return getControlledElement({ element: containerElement });\n    } catch (error) {\n      if (queryMethod === \"query\") {\n        return null;\n      }\n\n      throw error;\n    }\n  }\n\n  return null;\n};\n\nexport const querySelector =\n  <LocalTestSelector extends TestSelector>(\n    /**\n     * Selectors object including children and accessible text selections.\n     */\n    testSelector: LocalTestSelector,\n  ) =>\n  <LocalQueryMethod extends QueryMethod = \"get\">(\n    props: {\n      /**\n       * Refers to Testing Library's canvas. This is usually `screen`, but Storybook uses `within(canvas)`.\n       */\n      element: HTMLElement;\n    } & InnerQuerySelectorProps<LocalTestSelector, LocalQueryMethod>,\n  ) => {\n    const { element: containerElement, queryMethod } = props;\n\n    const capturedElement = captureElement({\n      containerElement,\n      queryMethod: queryMethod || (\"get\" as const),\n      querySelectorOptions: \"options\" in props ? props.options : undefined,\n      role: \"role\" in props ? (props.role as AriaRole) : undefined,\n      testSelector,\n    });\n\n    const getAccessibleText = <\n      LabelName extends LocalTestSelector extends AccessibleTextSelector\n        ? keyof LocalTestSelector[\"accessibleText\"]\n        : never,\n    >(\n      labelName: LabelName,\n    ) => {\n      if (!capturedElement) {\n        throw new ElementError(\n          \"No child HTML element available\",\n          containerElement,\n        );\n      }\n\n      if (!(\"accessibleText\" in testSelector)) {\n        throw new Error(\"Missing `accessibleText` in `TestSelector`\");\n      }\n\n      return getComputedAccessibleText({\n        element: capturedElement,\n        type: testSelector.accessibleText[labelName],\n      });\n    };\n\n    const selectChild = <\n      ChildName extends LocalTestSelector extends ElementChildSelector\n        ? keyof LocalTestSelector[\"children\"]\n        : keyof ElementChildSelector,\n      ChildQueryMethod extends QueryMethod = \"get\",\n    >(\n      childProps: {\n        name: ChildName;\n      } & InnerQuerySelectorProps<\n        LocalTestSelector extends ElementChildSelector\n          ? LocalTestSelector[\"children\"][ChildName]\n          : TestSelector,\n        ChildQueryMethod\n      >,\n    ) => {\n      if (!capturedElement) {\n        throw new ElementError(\n          \"No child HTML element available\",\n          containerElement,\n        );\n      }\n\n      if (!(\"children\" in testSelector)) {\n        throw new Error(\"Missing `children` in `TestSelector`\");\n      }\n\n      type Options = Record<\n        LocalTestSelector extends ElementChildSelector\n          ? LocalTestSelector[\"children\"][ChildName] extends ElementSelector\n            ? keyof LocalTestSelector[\"children\"][ChildName][\"elementSelector\"][\"options\"]\n            : never\n          : never,\n        string | RegExp\n      >;\n\n      return querySelector(\n        testSelector.children[\n          childProps.name\n        ] as LocalTestSelector extends ElementChildSelector\n          ? LocalTestSelector[\"children\"][ChildName]\n          : TestSelector,\n      )(\n        // @ts-expect-error: Type '{ role?: AriaRole | undefined; options?: Record<LocalTestSelector extends ElementChildSelector ? LocalTestSelector[\"children\"][ChildName] extends TestSelector ? keyof LocalTestSelector[\"children\"][ChildName][\"selector\"][\"options\"] : string : string, string | RegExp> | undefined; element: HTMLElement...' is not assignable to type '(LocalTestSelector extends ElementChildSelector ? LocalTestSelector[\"children\"][ChildName] : TestSelector) extends { ...; } ? Role extends AriaRole[] ? { ...; } : object : object'.ts(2345)\n        // `as testSelector.children[ChildName]` narrows the props down enough that TypeScript errors here. We're passing the correct information, but it doesn't know that, and it's difficult to fix this. -Kevin Ghadyani\n        {\n          element: capturedElement,\n          queryMethod: childProps.queryMethod,\n          ...(\"options\" in childProps && childProps.options\n            ? {\n                options: childProps.options as Options,\n              }\n            : {}),\n          ...(\"role\" in childProps && childProps.role\n            ? {\n                role: childProps.role as AriaRole,\n              }\n            : {}),\n        },\n      );\n    };\n\n    return {\n      element: capturedElement as LocalQueryMethod extends \"get\"\n        ? HTMLElement\n        : HTMLElement | null,\n      getAccessibleText:\n        getAccessibleText as LocalTestSelector extends AccessibleTextSelector\n          ? typeof getAccessibleText\n          : never,\n      selectChild: selectChild as LocalTestSelector extends ElementChildSelector\n        ? typeof selectChild\n        : never,\n    };\n  };\n"],"mappings":"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"}

package/dist/theme/components.js

@@ -34,7 +34,6 @@ import { tableRowClasses } from "@mui/material/TableRow";
 import { tableCellClasses } from "@mui/material/TableCell";
 import { tooltipClasses } from "@mui/material/Tooltip";
 import { typographyClasses } from "@mui/material/Typography";
-import { CARD_IMAGE_HEIGHT } from "../Card.js";
 import { CheckCircleFilledIcon, CheckIcon, ChevronDownIcon, CloseCircleFilledIcon, CloseIcon, DangerDiamondFilledIcon, InformationCircleFilledIcon, SubtractIcon, WarningFilledIcon } from "../icons.generated/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -43,6 +42,7 @@ const drawerSizes = {
   temporary: "28.571rem"
 };
 export const components = ({
+  contrastMode,
   odysseyTokens,
   shadowDomElement,
   shadowRootElement
@@ -107,12 +107,6 @@ export const components = ({
             insetBlockStart: "-0.0625em",
             verticalAlign: "middle",
             width: "1em"
-          },
-          "&.nav-accordion-summary": {
-            padding: `${odysseyTokens.Spacing2} ${odysseyTokens.Spacing4}`,
-            ".MuiAccordionSummary-expandIconWrapper.Mui-expanded": {
-              transform: "rotate(-90deg) !important"
-            }
           }
         }),
         content: () => ({
@@ -130,9 +124,7 @@ export const components = ({
           paddingInline: odysseyTokens.Spacing3,
           paddingBlock: odysseyTokens.Spacing4,
           "&.nav-accordion-details": {
-            paddingTop: 0,
-            paddingBottom: 0,
-            paddingLeft: odysseyTokens.Spacing2
+            padding: 0
           }
         })
       }
@@ -456,7 +448,10 @@ export const components = ({
             [`&:not(:hover)`]: {
               borderColor: "transparent"
             }
-          })
+          }),
+          ".MuiChip-root": {
+            maxWidth: `calc(${odysseyTokens.TypographyLineLengthMax} - (${odysseyTokens.Spacing6} + ${odysseyTokens.Spacing6} + ${odysseyTokens.Spacing1}))`
+          }
         })
       }
     },
@@ -520,10 +515,8 @@ export const components = ({
       },
       styleOverrides: {
         root: ({
-          ownerState,
-          theme
+          ownerState
         }) => {
-          const contrastMode = theme.odysseyContrastMode;
           return {
             minWidth: "unset",
             paddingBlock: odysseyTokens.Spacing3,
@@ -607,12 +600,12 @@ export const components = ({
                 color: odysseyTokens.TypographyColorAction
               },
               "&:disabled": {
-                ...(contrastMode === "lowContrast" && {
+                ...(contrastMode === "highContrast" && {
                   backgroundColor: odysseyTokens.HueNeutral200,
                   borderColor: "transparent",
                   color: odysseyTokens.TypographyColorDisabled
                 }),
-                ...(contrastMode === "highContrast" && {
+                ...(contrastMode === "lowContrast" && {
                   backgroundColor: odysseyTokens.HueNeutral100,
                   borderColor: "transparent",
                   color: odysseyTokens.TypographyColorDisabled
@@ -741,16 +734,22 @@ export const components = ({
           borderRadius: odysseyTokens.BorderRadiusOuter,
           boxShadow: odysseyTokens.DepthMedium,
           padding: odysseyTokens.Spacing5,
+          marginBlockEnd: odysseyTokens.Spacing5,
           position: "relative",
           transition: `all ${odysseyTokens.TransitionDurationMain} ${odysseyTokens.TransitionTimingMain}`,
+          "&.ods-card-compact": {
+            marginBlockEnd: odysseyTokens.Spacing3,
+            padding: odysseyTokens.Spacing3
+          },
           "& img": {
-            height: CARD_IMAGE_HEIGHT
+            maxHeight: "100%",
+            height: "auto",
+            alignSelf: "flex-start"
           },
           "&.hasAccessory": {
             paddingLeft: odysseyTokens.Spacing4
           },
           "&.isClickable:hover": {
-            backgroundColor: odysseyTokens.HueNeutral50,
             boxShadow: odysseyTokens.DepthHigh
           },
           [`& .${typographyClasses.h5}`]: {
@@ -901,10 +900,8 @@ export const components = ({
       },
       styleOverrides: {
         root: ({
-          ownerState,
-          theme
+          ownerState
         }) => {
-          const contrastMode = theme.odysseyContrastMode;
           return {
             height: "auto",
             paddingBlock: `calc(${odysseyTokens.Spacing2} - ${odysseyTokens.BorderWidthMain})`,
@@ -927,6 +924,9 @@ export const components = ({
               color: odysseyTokens.TypographyColorDisabled,
               [`& .${chipClasses.deleteIcon}`]: {
                 color: odysseyTokens.HueNeutral300
+              },
+              [`& .${chipClasses.icon}`]: {
+                color: odysseyTokens.HueNeutral300
               }
             },
             ...(ownerState.clickable && {
@@ -992,50 +992,50 @@ export const components = ({
               lineHeight: odysseyTokens.TypographyLineHeightOverline,
               fontSize: "0.71428571rem",
               textTransform: "uppercase",
-              ...(contrastMode === "lowContrast" && {
+              ...(contrastMode === "highContrast" && {
                 backgroundColor: odysseyTokens.HueNeutral200,
                 color: odysseyTokens.HueNeutral700
               }),
-              ...(contrastMode === "highContrast" && {
+              ...(contrastMode === "lowContrast" && {
                 backgroundColor: odysseyTokens.HueNeutral50,
                 color: odysseyTokens.TypographyColorSubordinate
               }),
               [`&.${chipClasses.colorError}`]: {
-                ...(contrastMode === "lowContrast" && {
+                ...(contrastMode === "highContrast" && {
                   backgroundColor: odysseyTokens.HueRed100,
                   color: odysseyTokens.HueRed700
                 }),
-                ...(contrastMode === "highContrast" && {
+                ...(contrastMode === "lowContrast" && {
                   backgroundColor: odysseyTokens.PaletteDangerLighter,
                   color: odysseyTokens.TypographyColorDanger
                 })
               },
               [`&.${chipClasses.colorInfo}`]: {
-                ...(contrastMode === "lowContrast" && {
+                ...(contrastMode === "highContrast" && {
                   backgroundColor: odysseyTokens.HueBlue100,
                   color: odysseyTokens.HueBlue700
                 }),
-                ...(contrastMode === "highContrast" && {
+                ...(contrastMode === "lowContrast" && {
                   backgroundColor: odysseyTokens.PalettePrimaryLighter,
                   color: odysseyTokens.PalettePrimaryText
                 })
               },
               [`&.${chipClasses.colorSuccess}`]: {
-                ...(contrastMode === "lowContrast" && {
+                ...(contrastMode === "highContrast" && {
                   backgroundColor: odysseyTokens.HueGreen200,
                   color: odysseyTokens.HueGreen700
                 }),
-                ...(contrastMode === "highContrast" && {
+                ...(contrastMode === "lowContrast" && {
                   backgroundColor: odysseyTokens.PaletteSuccessLighter,
                   color: odysseyTokens.TypographyColorSuccess
                 })
               },
               [`&.${chipClasses.colorWarning}`]: {
-                ...(contrastMode === "lowContrast" && {
+                ...(contrastMode === "highContrast" && {
                   backgroundColor: odysseyTokens.HueYellow100,
                   color: odysseyTokens.HueYellow700
                 }),
-                ...(contrastMode === "highContrast" && {
+                ...(contrastMode === "lowContrast" && {
                   backgroundColor: odysseyTokens.PaletteWarningLighter,
                   color: odysseyTokens.TypographyColorWarning
                 })
@@ -1439,6 +1439,7 @@ export const components = ({
     },
     MuiDialog: {
       defaultProps: {
+        container: shadowRootElement || shadowDomElement,
         scroll: "paper"
       },
       styleOverrides: {
@@ -1546,6 +1547,9 @@ export const components = ({
           },
           [`&:has(+ [data-file-preview-container])`]: {
             marginBlockEnd: 0
+          },
+          ".MuiChip-root": {
+            maxWidth: `calc(${odysseyTokens.TypographyLineLengthMax} - ${odysseyTokens.Spacing6})`
           }
         })
       }
@@ -1954,9 +1958,11 @@ export const components = ({
         }) => ({
           gap: odysseyTokens.Spacing2,
           minHeight: "unset",
+          maxWidth: `calc(55ch - ${odysseyTokens.Spacing4})`,
           paddingBlock: odysseyTokens.Spacing3,
           paddingInline: odysseyTokens.Spacing4,
           borderRadius: odysseyTokens.BorderRadiusMain,
+          whiteSpace: "normal",
           [`& .${formControlLabelClasses.root}`]: {
             gap: "unset"
           },
@@ -2490,6 +2496,7 @@ export const components = ({
           },
           [`.${tableHeadClasses.root} .ods-actions-cell + &:last-of-type, .${tableBodyClasses.root} .ods-actions-cell + &:last-of-type`]: {
             flexGrow: 0,
+            padding: "0 !important",
             width: odysseyTokens.Spacing2
           },
           [`.ods-hide-spacer-column .${tableHeadClasses.root} &:last-of-type, .ods-hide-spacer-column .${tableBodyClasses.root} &:last-of-type`]: {
@@ -2498,11 +2505,13 @@ export const components = ({
           [`.ods-hide-spacer-column .${tableHeadClasses.root} &:nth-last-of-type(2), .ods-hide-spacer-column .${tableBodyClasses.root} &:nth-last-of-type(2)`]: {
             borderTopRightRadius: odysseyTokens.Spacing2,
             borderBottomRightRadius: odysseyTokens.Spacing2,
-            flexGrow: 1,
             [`& .Mui-TableHeadCell-ResizeHandle-Wrapper`]: {
               display: "none"
             }
           },
+          [`.ods-column-grow .${tableHeadClasses.root} &:nth-last-of-type(2), .ods-column-grow .${tableBodyClasses.root} &:nth-last-of-type(2)`]: {
+            flexGrow: 1
+          },
           ...(ownerState.variant === "number" && {
             textAlign: "end",
             fontFeatureSettings: '"lnum", "tnum"'