@okta/odyssey-react-mui 1.29.0 → 1.32.4

package/dist/esm/theme/components.js

@@ -0,0 +1,2901 @@
+/*!
+ * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { alertTitleClasses } from "@mui/material/AlertTitle";
+import { autocompleteClasses } from "@mui/material/Autocomplete";
+import { buttonClasses } from "@mui/material/Button";
+import { buttonBaseClasses } from "@mui/material/ButtonBase";
+import { checkboxClasses } from "@mui/material/Checkbox";
+import { chipClasses } from "@mui/material/Chip";
+import { dividerClasses } from "@mui/material/Divider";
+import { formControlLabelClasses } from "@mui/material/FormControlLabel";
+import { formLabelClasses } from "@mui/material/FormLabel";
+import { formGroupClasses } from "@mui/material/FormGroup";
+import { inputAdornmentClasses } from "@mui/material/InputAdornment";
+import { inputBaseClasses } from "@mui/material/InputBase";
+import { listItemIconClasses } from "@mui/material/ListItemIcon";
+import { listItemTextClasses } from "@mui/material/ListItemText";
+import { menuItemClasses } from "@mui/material/MenuItem";
+import { radioClasses } from "@mui/material/Radio";
+import { stackClasses } from "@mui/material/Stack";
+import { svgIconClasses } from "@mui/material/SvgIcon";
+import { tableBodyClasses } from "@mui/material/TableBody";
+import { tableHeadClasses } from "@mui/material/TableHead";
+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 { CheckCircleFilledIcon, CheckIcon, ChevronDownIcon, CloseCircleFilledIcon, CloseIcon, DangerDiamondFilledIcon, InformationCircleFilledIcon, SubtractIcon, WarningFilledIcon } from "../icons.generated/index.js";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+const drawerSizes = {
+  persistent: "25.714rem",
+  temporary: "28.571rem"
+};
+export const getComponents = ({
+  contrastMode,
+  odysseyTokens,
+  shadowDomElement,
+  shadowRootElement
+}) => {
+  return {
+    MuiAccordion: {
+      styleOverrides: {
+        root: () => ({
+          backgroundColor: odysseyTokens.HueNeutralWhite,
+          border: 0,
+          borderBottomColor: odysseyTokens.BorderColorDisplay,
+          borderBottomStyle: "solid",
+          borderBottomWidth: odysseyTokens.BorderWidthMain,
+          borderRadius: 0,
+          boxShadow: "none",
+          "&.MuiPaper-root.MuiAccordion-root[data-ods-variant='borderless']": {
+            border: "none",
+            "&::before": {
+              display: "none"
+            }
+          },
+          "&.Mui-disabled": {
+            backgroundColor: odysseyTokens.HueNeutralWhite,
+            color: odysseyTokens.TypographyColorDisabled,
+            cursor: "default",
+            "& .MuiAccordionSummary-content": {
+              color: odysseyTokens.TypographyColorDisabled
+            }
+          },
+          "&:first-of-type": {
+            borderRadius: 0,
+            borderTopColor: odysseyTokens.BorderColorDisplay,
+            borderTopStyle: "solid",
+            borderTopWidth: odysseyTokens.BorderWidthMain
+          },
+          "&:last-of-type": {
+            borderRadius: 0,
+            borderBottomColor: odysseyTokens.BorderColorDisplay,
+            borderBottomStyle: "solid",
+            borderBottomWidth: odysseyTokens.BorderWidthMain
+          },
+          "&.nav-accordion": {
+            border: "0 !important",
+            width: "100%"
+          }
+        })
+      }
+    },
+    MuiAccordionSummary: {
+      styleOverrides: {
+        root: () => ({
+          paddingBlock: odysseyTokens.Spacing4,
+          paddingInline: odysseyTokens.Spacing3,
+          "&:hover": {
+            backgroundColor: odysseyTokens.HueNeutral50
+          },
+          "&:focus-visible": {
+            backgroundColor: odysseyTokens.HueNeutral50,
+            outlineColor: odysseyTokens.PalettePrimaryMain,
+            outlineWidth: 2,
+            outlineStyle: "solid",
+            zIndex: 1
+          },
+          svg: {
+            fontSize: "1.2em",
+            height: "1em",
+            position: "relative",
+            insetBlockStart: "-0.0625em",
+            verticalAlign: "middle",
+            width: "1em"
+          }
+        }),
+        content: () => ({
+          marginBlock: 0,
+          [`& > .${typographyClasses.root}`]: {
+            marginBlockEnd: 0,
+            fontWeight: odysseyTokens.TypographyWeightBodyBold
+          }
+        })
+      }
+    },
+    MuiAccordionDetails: {
+      styleOverrides: {
+        root: () => ({
+          paddingInline: odysseyTokens.Spacing3,
+          paddingBlock: odysseyTokens.Spacing4,
+          "&.nav-accordion-details": {
+            padding: 0
+          }
+        })
+      }
+    },
+    MuiAlert: {
+      defaultProps: {
+        iconMapping: {
+          error: _jsx(DangerDiamondFilledIcon, {}),
+          info: _jsx(InformationCircleFilledIcon, {}),
+          success: _jsx(CheckCircleFilledIcon, {}),
+          warning: _jsx(WarningFilledIcon, {})
+        }
+      },
+      styleOverrides: {
+        root: ({
+          ownerState
+        }) => ({
+          padding: odysseyTokens.Spacing4,
+          gap: odysseyTokens.Spacing4,
+          color: odysseyTokens.TypographyColorBody,
+          border: "1px solid",
+          ...(ownerState.severity === "success" && {
+            backgroundColor: odysseyTokens.HueGreen50,
+            borderColor: odysseyTokens.HueGreen200,
+            ...(ownerState.variant === "toast" && {
+              backgroundColor: odysseyTokens.HueGreen50.concat(odysseyTokens.PaletteAlphaSemi)
+            })
+          }),
+          ...(ownerState.severity === "info" && {
+            backgroundColor: odysseyTokens.HueBlue50,
+            borderColor: odysseyTokens.HueBlue200,
+            ...(ownerState.variant === "toast" && {
+              backgroundColor: odysseyTokens.HueBlue50.concat(odysseyTokens.PaletteAlphaSemi)
+            })
+          }),
+          ...(ownerState.severity === "error" && {
+            backgroundColor: odysseyTokens.HueRed50,
+            borderColor: odysseyTokens.HueRed200,
+            ...(ownerState.variant === "toast" && {
+              backgroundColor: odysseyTokens.HueRed50.concat(odysseyTokens.PaletteAlphaSemi)
+            })
+          }),
+          ...(ownerState.severity === "warning" && {
+            backgroundColor: odysseyTokens.HueYellow50,
+            borderColor: odysseyTokens.HueYellow500,
+            ...(ownerState.variant === "toast" && {
+              backgroundColor: odysseyTokens.HueYellow50.concat(odysseyTokens.PaletteAlphaSemi)
+            })
+          }),
+          [`& .${alertTitleClasses.root}`]: {
+            ...(ownerState.severity === "success" && {
+              color: odysseyTokens.PaletteSuccessHeading
+            }),
+            ...(ownerState.severity === "info" && {
+              color: odysseyTokens.PalettePrimaryHeading
+            }),
+            ...(ownerState.severity === "error" && {
+              color: odysseyTokens.PaletteDangerHeading
+            }),
+            ...(ownerState.severity === "warning" && {
+              color: odysseyTokens.PaletteWarningHeading
+            }),
+            ...(ownerState.variant === "banner" && {
+              marginBlockEnd: 0
+            }),
+            ...(ownerState.variant === "callout" && {
+              fontSize: odysseyTokens.TypographySizeHeading5,
+              lineHeight: odysseyTokens.TypographyLineHeightHeading5
+            })
+          },
+          ...(ownerState.variant === "banner" && {
+            position: "relative",
+            justifyContent: "center",
+            alignItems: "center",
+            borderRadius: 0,
+            borderWidth: 0,
+            borderBottomWidth: "1px",
+            ...(ownerState.onClose !== undefined && {
+              paddingInline: odysseyTokens.Spacing6
+            })
+          }),
+          ...(ownerState.variant === "callout" && {
+            borderRadius: odysseyTokens.BorderRadiusMain,
+            padding: odysseyTokens.Spacing5,
+            "&:not(:last-child)": {
+              marginBottom: odysseyTokens.Spacing6
+            }
+          }),
+          ...(ownerState.variant === "toast" && {
+            maxWidth: odysseyTokens.TypographyLineLengthMax,
+            borderRadius: odysseyTokens.BorderRadiusOuter,
+            position: "relative",
+            paddingInlineStart: odysseyTokens.Spacing5,
+            paddingInlineEnd: odysseyTokens.Spacing4,
+            paddingBlock: odysseyTokens.Spacing3,
+            alignItems: "flex-start",
+            backdropFilter: "blur(10px)"
+          })
+        }),
+        action: ({
+          ownerState
+        }) => ({
+          ...(ownerState.variant === "banner" && {
+            padding: 0,
+            marginInlineEnd: 0,
+            insetBlockStart: "50%",
+            insetInlineEnd: odysseyTokens.Spacing2,
+            position: "absolute",
+            transform: "translateY(-50%)"
+          }),
+          ...(ownerState.variant === "toast" && {
+            padding: 0,
+            marginInline: 0,
+            marginBlock: 1,
+            [`& .${buttonClasses.root}`]: {
+              "&:hover, &:focus": {
+                backgroundColor: odysseyTokens.PaletteNeutralDark.concat("11")
+              },
+              "&:active": {
+                backgroundColor: odysseyTokens.PaletteNeutralDark.concat("22")
+              }
+            }
+          })
+        }),
+        icon: ({
+          ownerState
+        }) => ({
+          marginInlineEnd: 0,
+          padding: 0,
+          height: `calc(${odysseyTokens.TypographySizeHeading6} * ${odysseyTokens.TypographyLineHeightHeading6})`,
+          opacity: 1,
+          ...(ownerState.severity === "info" && {
+            color: odysseyTokens.PalettePrimaryMain
+          }),
+          ...(ownerState.severity === "error" && {
+            color: odysseyTokens.PaletteDangerMain
+          }),
+          ...(ownerState.severity === "success" && {
+            color: odysseyTokens.PaletteSuccessMain
+          }),
+          ...(ownerState.severity === "warning" && {
+            color: odysseyTokens.HueYellow400
+          }),
+          ...(ownerState.variant === "toast" && {
+            marginBlock: odysseyTokens.Spacing2
+          }),
+          ...(ownerState.variant === "callout" && {
+            marginBlock: 1.5
+          }),
+          [`& .${svgIconClasses.root}`]: {
+            alignSelf: "center",
+            fontSize: odysseyTokens.TypographySizeHeading6
+          }
+        }),
+        message: ({
+          ownerState
+        }) => ({
+          padding: 0,
+          overflow: "visible",
+          ...(ownerState.variant === "banner" && {
+            display: "flex",
+            justifyContent: "space-between",
+            gap: odysseyTokens.Spacing4
+          }),
+          ...(ownerState.variant === "toast" && {
+            flexGrow: 1,
+            marginBlock: odysseyTokens.Spacing2
+          })
+        })
+      }
+    },
+    MuiAlertTitle: {
+      styleOverrides: {
+        root: ({
+          ownerState
+        }) => ({
+          marginBlockStart: 0,
+          marginBlockEnd: odysseyTokens.Spacing2,
+          lineHeight: odysseyTokens.TypographyLineHeightHeading6,
+          fontSize: odysseyTokens.TypographySizeHeading6,
+          fontWeight: odysseyTokens.TypographyWeightHeading,
+          fontFamily: odysseyTokens.TypographyFamilyHeading,
+          ...(ownerState.severity === "info" && {
+            color: odysseyTokens.PalettePrimaryDark
+          }),
+          ...(ownerState.severity === "error" && {
+            color: odysseyTokens.PaletteDangerDarker
+          }),
+          ...(ownerState.severity === "success" && {
+            color: odysseyTokens.PaletteSuccessDarker
+          }),
+          ...(ownerState.severity === "warning" && {
+            color: odysseyTokens.PaletteWarningDarker
+          }),
+          [`&:last-child`]: {
+            marginBlockEnd: 0
+          }
+        })
+      }
+    },
+    MuiAutocomplete: {
+      defaultProps: {
+        autoHighlight: true,
+        autoSelect: false,
+        blurOnSelect: false,
+        clearIcon: _jsx(CloseIcon, {}),
+        clearOnEscape: true,
+        disableClearable: false,
+        disabledItemsFocusable: false,
+        disableListWrap: false,
+        disablePortal: false,
+        filterSelectedOptions: false,
+        fullWidth: false,
+        handleHomeEndKeys: true,
+        includeInputInList: true,
+        limitTags: -1,
+        openOnFocus: false,
+        popupIcon: _jsx(ChevronDownIcon, {}),
+        selectOnFocus: true,
+        slotProps: {
+          paper: {
+            elevation: 1
+          }
+        }
+      },
+      styleOverrides: {
+        clearIndicator: {
+          marginRight: "unset",
+          padding: odysseyTokens.Spacing1
+        },
+        endAdornment: ({
+          ownerState
+        }) => ({
+          display: "flex",
+          gap: odysseyTokens.Spacing1,
+          top: "unset",
+          right: "unset",
+          insetBlockStart: odysseyTokens.Spacing2,
+          insetInlineEnd: odysseyTokens.Spacing2,
+          maxHeight: "unset",
+          alignItems: "center",
+          whiteSpace: "nowrap",
+          color: odysseyTokens.TypographyColorSubordinate,
+          transform: "none",
+          ...(ownerState.disabled === true && {
+            display: "none"
+          }),
+          ...(ownerState.readOnly === true && {
+            display: "none"
+          })
+        }),
+        listbox: ({
+          theme
+        }) => ({
+          borderWidth: odysseyTokens.BorderWidthMain,
+          borderStyle: odysseyTokens.BorderStyleMain,
+          borderColor: odysseyTokens.HueNeutral200,
+          paddingBlock: odysseyTokens.Spacing2,
+          paddingInline: odysseyTokens.Spacing2,
+          borderRadius: odysseyTokens.BorderRadiusMain,
+          [`& .${autocompleteClasses.option}`]: {
+            minHeight: "unset",
+            paddingBlock: odysseyTokens.Spacing3,
+            paddingInline: odysseyTokens.Spacing4,
+            borderRadius: odysseyTokens.BorderRadiusTight,
+            [`&:hover`]: {
+              backgroundColor: odysseyTokens.HueNeutral100
+            },
+            [`&.${autocompleteClasses.focused}`]: {
+              backgroundColor: odysseyTokens.HueNeutral100
+            },
+            [`&.${autocompleteClasses.focusVisible}`]: {
+              backgroundColor: "transparent",
+              boxShadow: theme.mixins.insetFocusRing,
+              [`&:hover`]: {
+                backgroundColor: odysseyTokens.HueNeutral100
+              }
+            },
+            [`&[aria-selected="true"]`]: {
+              backgroundColor: "transparent",
+              color: odysseyTokens.TypographyColorAction,
+              [`&:hover`]: {
+                backgroundColor: odysseyTokens.PalettePrimaryLighter
+              },
+              [`&.${autocompleteClasses.focused}`]: {
+                backgroundColor: odysseyTokens.PalettePrimaryLighter
+              }
+            }
+          },
+          "& > ul": {
+            position: "relative",
+            paddingInlineStart: 0,
+            marginBlockStart: 0,
+            marginBlockEnd: 0
+          }
+        }),
+        loading: {
+          paddingBlock: odysseyTokens.Spacing3,
+          paddingInline: odysseyTokens.Spacing4,
+          borderWidth: odysseyTokens.BorderWidthMain,
+          borderStyle: odysseyTokens.BorderStyleMain,
+          borderColor: odysseyTokens.HueNeutral200,
+          borderRadius: odysseyTokens.BorderRadiusMain
+        },
+        popupIndicator: {
+          padding: odysseyTokens.Spacing1,
+          marginRight: "unset"
+        },
+        popper: ({
+          ownerState
+        }) => ({
+          background: "transparent",
+          paddingBlockStart: odysseyTokens.Spacing1,
+          ...(ownerState.ListboxComponent !== undefined && {
+            maxHeight: "40vh"
+          })
+        }),
+        paper: ({
+          ownerState
+        }) => ({
+          ...(ownerState.ListboxComponent !== undefined && {
+            height: "100%"
+          })
+        }),
+        inputRoot: ({
+          ownerState
+        }) => ({
+          ...(ownerState.readOnly === true && {
+            backgroundColor: odysseyTokens.HueNeutral50,
+            [`&:not(:hover)`]: {
+              borderColor: "transparent"
+            }
+          }),
+          ".MuiChip-root": {
+            maxWidth: `calc(${odysseyTokens.TypographyLineLengthMax} - (${odysseyTokens.Spacing6} + ${odysseyTokens.Spacing6} + ${odysseyTokens.Spacing1}))`
+          }
+        })
+      }
+    },
+    MuiBackdrop: {
+      styleOverrides: {
+        root: ({
+          ownerState
+        }) => ({
+          backgroundColor: "rgba(29,29,33,0.75)",
+          ...(ownerState.invisible === true && {
+            backgroundColor: "transparent"
+          })
+        })
+      }
+    },
+    MuiBreadcrumbs: {
+      styleOverrides: {
+        li: {
+          fontSize: odysseyTokens.TypographySizeSubordinate,
+          "& svg": {
+            width: odysseyTokens.Spacing3
+          },
+          "& > p": {
+            paddingInline: odysseyTokens.Spacing1
+          },
+          "& > a, & > button": {
+            borderRadius: odysseyTokens.BorderRadiusTight,
+            color: odysseyTokens.TypographyColorSubordinate,
+            display: "flex",
+            gap: odysseyTokens.Spacing1,
+            paddingInline: odysseyTokens.Spacing1,
+            paddingBlock: 2,
+            transitionProperty: "color, background-color",
+            transitionDuration: "100ms",
+            transitionTimingFunction: "linear",
+            "&:hover": {
+              backgroundColor: odysseyTokens.HueNeutral100,
+              color: odysseyTokens.TypographyColorBody
+            },
+            "&:focus-visible": {
+              outlineWidth: 2,
+              outlineStyle: "solid",
+              outlineColor: odysseyTokens.PalettePrimaryMain,
+              outlineOffset: -2
+            }
+          }
+        },
+        separator: {
+          color: odysseyTokens.BorderColorDisplay,
+          fontSize: odysseyTokens.TypographySizeSubordinate,
+          fontWeight: odysseyTokens.TypographyWeightBodyBold,
+          marginInlineStart: 6,
+          marginInlineEnd: 4
+        }
+      }
+    },
+    MuiButton: {
+      defaultProps: {
+        variant: "primary",
+        disableElevation: true
+      },
+      styleOverrides: {
+        root: ({
+          ownerState
+        }) => {
+          return {
+            minWidth: "unset",
+            paddingBlock: odysseyTokens.Spacing3,
+            paddingInline: odysseyTokens.Spacing4,
+            display: "inline-flex",
+            height: odysseyTokens.Spacing7,
+            position: "relative",
+            marginBlock: "0",
+            marginInline: "0",
+            transitionProperty: "color, background-color, border-color, box-shadow",
+            transitionDuration: "100ms",
+            transitionTimingFunction: "linear",
+            borderWidth: odysseyTokens.BorderWidthMain,
+            borderStyle: odysseyTokens.BorderStyleMain,
+            borderRadius: odysseyTokens.BorderRadiusMain,
+            borderColor: "transparent",
+            fontSize: odysseyTokens.TypographySizeBody,
+            fontWeight: odysseyTokens.TypographyWeightHeading,
+            fontFamily: odysseyTokens.TypographyFamilyButton,
+            lineHeight: odysseyTokens.TypographyLineHeightUi,
+            whiteSpace: "nowrap",
+            [`.${buttonClasses.root} + &`]: {
+              marginInlineStart: odysseyTokens.Spacing2
+            },
+            "&:focus-visible": {
+              boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PalettePrimaryMain}`,
+              outline: "2px solid transparent",
+              outlineOffset: "1px"
+            },
+            "&:disabled": {
+              pointerEvents: "none"
+            },
+            [`.${buttonClasses.startIcon}, .${buttonClasses.endIcon}`]: {
+              "& > *:nth-of-type(1)": {
+                fontSize: `${odysseyTokens.TypographyLineHeightUi}em`
+              }
+            },
+            ...(ownerState.size === "small" && {
+              height: odysseyTokens.Spacing6,
+              paddingBlock: odysseyTokens.Spacing2,
+              paddingInline: odysseyTokens.Spacing3,
+              fontSize: odysseyTokens.TypographySizeBody
+            }),
+            ...(ownerState.size === "large" && {
+              height: odysseyTokens.Spacing8,
+              paddingBlock: odysseyTokens.Spacing4,
+              paddingInline: odysseyTokens.Spacing4
+            }),
+            ...(ownerState.fullWidth === true && {
+              width: "100%",
+              marginBlock: "0",
+              marginInline: "0",
+              "&:not(:last-child)": {
+                marginBlockEnd: odysseyTokens.Spacing4
+              }
+            }),
+            ...(ownerState.variant === "primary" && {
+              color: odysseyTokens.HueNeutralWhite,
+              backgroundColor: odysseyTokens.PalettePrimaryMain,
+              "&:hover": {
+                backgroundColor: odysseyTokens.PalettePrimaryDark
+              },
+              "&:active, &[aria-expanded='true']": {
+                backgroundColor: odysseyTokens.PalettePrimaryDarker
+              },
+              "&:disabled": {
+                color: odysseyTokens.PalettePrimaryLight,
+                backgroundColor: odysseyTokens.HueBlue100
+              }
+            }),
+            ...(ownerState.variant === "secondary" && {
+              backgroundColor: "transparent",
+              borderColor: odysseyTokens.HueNeutral300,
+              color: odysseyTokens.TypographyColorBody,
+              "&:hover": {
+                backgroundColor: odysseyTokens.HueNeutral200,
+                borderColor: odysseyTokens.HueNeutral400
+              },
+              "&:active, &[aria-expanded='true']": {
+                backgroundColor: "transparent",
+                borderColor: odysseyTokens.BorderColorPrimaryControl,
+                color: odysseyTokens.TypographyColorAction
+              },
+              "&:disabled": {
+                backgroundColor: odysseyTokens.HueNeutral200,
+                borderColor: "transparent",
+                color: odysseyTokens.TypographyColorDisabled
+              }
+            }),
+            ...(ownerState.variant === "danger" && {
+              backgroundColor: odysseyTokens.PaletteDangerMain,
+              color: odysseyTokens.HueNeutralWhite,
+              "&:hover": {
+                backgroundColor: odysseyTokens.PaletteDangerDark
+              },
+              "&:focus-visible": {
+                boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PaletteDangerMain}`
+              },
+              "&:active, &[aria-expanded='true']": {
+                backgroundColor: odysseyTokens.PaletteDangerDarker
+              },
+              "&:disabled": {
+                color: odysseyTokens.PaletteDangerLight,
+                backgroundColor: odysseyTokens.HueRed100
+              }
+            }),
+            ...(ownerState.variant === "dangerSecondary" && {
+              backgroundColor: "transparent",
+              borderColor: odysseyTokens.HueNeutral300,
+              color: odysseyTokens.PaletteDangerMain,
+              "&:hover": {
+                backgroundColor: odysseyTokens.HueNeutral200,
+                borderColor: odysseyTokens.HueNeutral400,
+                color: odysseyTokens.PaletteDangerMain
+              },
+              "&:active, &[aria-expanded='true']": {
+                backgroundColor: "transparent",
+                borderColor: odysseyTokens.PaletteDangerMain,
+                color: odysseyTokens.PaletteDangerMain
+              },
+              "&:disabled": {
+                backgroundColor: odysseyTokens.PaletteDangerHighlight,
+                borderColor: "transparent",
+                color: odysseyTokens.PaletteDangerLight
+              }
+            }),
+            ...(ownerState.variant === "floating" && {
+              backgroundColor: "transparent",
+              color: odysseyTokens.TypographyColorBody,
+              "&:hover": {
+                backgroundColor: odysseyTokens.HueNeutral200
+              },
+              "&:active, &[aria-expanded='true']": {
+                backgroundColor: "transparent",
+                color: odysseyTokens.HueBlue600,
+                borderColor: odysseyTokens.HueBlue600
+              },
+              "&:disabled": {
+                backgroundColor: "transparent",
+                color: odysseyTokens.TypographyColorDisabled
+              }
+            }),
+            ...(ownerState.variant === "floatingAction" && {
+              backgroundColor: "transparent",
+              color: odysseyTokens.TypographyColorAction,
+              "&:hover": {
+                backgroundColor: odysseyTokens.HueNeutral200
+              },
+              "&:active, &[aria-expanded='true']": {
+                backgroundColor: "transparent",
+                borderColor: odysseyTokens.HueBlue600
+              },
+              "&:disabled": {
+                backgroundColor: "transparent",
+                color: odysseyTokens.TypographyColorDisabled
+              }
+            }),
+            ...(ownerState.children === "" && {
+              minWidth: "auto",
+              padding: odysseyTokens.Spacing3,
+              [`.${buttonClasses.endIcon}, .${buttonClasses.startIcon}`]: {
+                margin: "0"
+              },
+              ...(ownerState.size === "large" && {
+                padding: odysseyTokens.Spacing4
+              }),
+              ...(ownerState.size === "small" && {
+                padding: odysseyTokens.Spacing2
+              }),
+              ...(ownerState.size === "large" && {
+                padding: odysseyTokens.Spacing4
+              })
+            })
+          };
+        },
+        endIcon: ({
+          ownerState
+        }) => {
+          const hasNoChildren = ownerState.children === "" || ownerState.children === undefined || ownerState.children === null;
+          return {
+            display: "inline-flex",
+            margin: 0,
+            marginInlineStart: odysseyTokens.Spacing2,
+            ...(hasNoChildren && {
+              marginInlineStart: 0
+            })
+          };
+        },
+        startIcon: ({
+          ownerState
+        }) => {
+          const hasNoChildren = ownerState.children === "" || ownerState.children === undefined || ownerState.children === null;
+          return {
+            display: "inline-flex",
+            margin: 0,
+            marginInlineEnd: odysseyTokens.Spacing2,
+            ...(hasNoChildren && {
+              marginInlineEnd: 0
+            })
+          };
+        }
+      }
+    },
+    MuiButtonBase: {
+      defaultProps: {
+        disableRipple: true
+      }
+    },
+    MuiCard: {
+      styleOverrides: {
+        root: () => ({
+          backgroundColor: odysseyTokens.HueNeutralWhite,
+          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.Spacing2,
+            padding: odysseyTokens.Spacing4
+          },
+          "& img": {
+            maxHeight: "100%",
+            height: "auto",
+            alignSelf: "flex-start"
+          },
+          "&.hasAccessory": {
+            paddingLeft: odysseyTokens.Spacing4
+          },
+          "&.isClickable:hover": {
+            boxShadow: odysseyTokens.DepthHigh
+          },
+          [`& .${typographyClasses.h5}`]: {
+            lineHeight: odysseyTokens.TypographyLineHeightHeading5,
+            marginBottom: odysseyTokens.Spacing3
+          },
+          [`& .${typographyClasses.subtitle2}`]: {
+            marginBottom: odysseyTokens.Spacing1,
+            textTransform: "uppercase",
+            fontWeight: odysseyTokens.TypographyWeightBodyBold,
+            fontSize: odysseyTokens.TypographySizeOverline,
+            lineHeight: odysseyTokens.TypographyLineHeightOverline,
+            color: odysseyTokens.TypographyColorSubordinate,
+            letterSpacing: 1.3
+          },
+          [`& .${typographyClasses.body1}`]: {
+            fontSize: odysseyTokens.TypographySizeSubordinate,
+            lineHeight: odysseyTokens.TypographyLineHeightBody
+          }
+        })
+      }
+    },
+    MuiCardActionArea: {
+      styleOverrides: {
+        root: () => ({
+          margin: `-${odysseyTokens.Spacing5}`,
+          padding: odysseyTokens.Spacing5,
+          width: `calc(100% + (${odysseyTokens.Spacing5} * 2))`,
+          "&:hover": {
+            "& .MuiCardActionArea-focusHighlight": {
+              display: "none"
+            }
+          }
+        })
+      }
+    },
+    MuiCardActions: {
+      styleOverrides: {
+        root: () => ({
+          marginBlockStart: odysseyTokens.Spacing5,
+          padding: 0
+        })
+      }
+    },
+    MuiCheckbox: {
+      defaultProps: {
+        size: "small",
+        icon: _jsx(_Fragment, {}),
+        checkedIcon: _jsx(CheckIcon, {}),
+        indeterminateIcon: _jsx(SubtractIcon, {})
+      },
+      styleOverrides: {
+        root: ({
+          ownerState,
+          theme
+        }) => {
+          const isReadOnly = ownerState?.inputProps?.readOnly;
+          return {
+            width: `${odysseyTokens.TypographyLineHeightUi}em`,
+            minWidth: `${odysseyTokens.TypographyLineHeightUi}em`,
+            height: `${odysseyTokens.TypographyLineHeightUi}em`,
+            borderRadius: odysseyTokens.BorderRadiusTight,
+            border: `1px solid ${odysseyTokens.HueNeutral500}`,
+            padding: 0,
+            boxShadow: `0 0 0 0 transparent`,
+            transition: theme.transitions.create(["border-color", "background-color", "box-shadow"], {
+              duration: odysseyTokens.TransitionDurationMain
+            }),
+            [`.${svgIconClasses.root}`]: {
+              color: odysseyTokens.HueNeutralWhite,
+              transition: theme.transitions.create(["color"], {
+                duration: odysseyTokens.TransitionDurationMain
+              })
+            },
+            "&.Mui-checked, &.MuiCheckbox-indeterminate": {
+              backgroundColor: odysseyTokens.PalettePrimaryMain,
+              borderColor: odysseyTokens.PalettePrimaryMain,
+              [`.${formControlLabelClasses.root}:hover > &`]: {
+                backgroundColor: odysseyTokens.PalettePrimaryDark,
+                borderColor: odysseyTokens.PalettePrimaryDark
+              }
+            },
+            [`.${formControlLabelClasses.root}:hover > &`]: {
+              backgroundColor: "transparent",
+              borderColor: odysseyTokens.HueNeutral900
+            },
+            ".Mui-error:not(.Mui-valid):hover > &": {
+              borderColor: odysseyTokens.BorderColorDangerDark,
+              "&.Mui-checked": {
+                backgroundColor: odysseyTokens.PaletteDangerDark,
+                borderColor: odysseyTokens.BorderColorDangerDark
+              }
+            },
+            ".Mui-error:not(.Mui-valid) > &": {
+              borderColor: odysseyTokens.BorderColorDangerControl,
+              "&.Mui-checked": {
+                backgroundColor: odysseyTokens.PaletteDangerMain,
+                borderColor: odysseyTokens.BorderColorDangerControl
+              },
+              "&.Mui-focusVisible": {
+                boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PaletteDangerMain}`
+              }
+            },
+            "&.Mui-focusVisible": {
+              borderColor: odysseyTokens.HueNeutral900,
+              boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PalettePrimaryMain}`,
+              outline: "2px solid transparent",
+              outlineOffset: "1px"
+            },
+            "&.Mui-disabled": {
+              backgroundColor: odysseyTokens.HueNeutral50,
+              borderColor: odysseyTokens.HueNeutral300,
+              ".Mui-error:not(.Mui-valid) > &": {
+                backgroundColor: odysseyTokens.HueNeutral50,
+                borderColor: odysseyTokens.HueNeutral300
+              },
+              [`.${svgIconClasses.root}`]: {
+                color: odysseyTokens.HueNeutral300
+              }
+            },
+            ...(isReadOnly && {
+              backgroundColor: odysseyTokens.HueNeutral100,
+              border: `1px solid ${odysseyTokens.HueNeutral300}`,
+              cursor: "default",
+              "&.Mui-checked, &.MuiCheckbox-indeterminate": {
+                backgroundColor: odysseyTokens.HueNeutral100,
+                borderColor: odysseyTokens.HueNeutral300,
+                [`.${formControlLabelClasses.root}:hover > &`]: {
+                  backgroundColor: odysseyTokens.HueNeutral100,
+                  borderColor: odysseyTokens.HueNeutral300
+                }
+              },
+              [`.${formControlLabelClasses.root}:hover > &`]: {
+                backgroundColor: odysseyTokens.HueNeutral100,
+                borderColor: odysseyTokens.HueNeutral300
+              },
+              [`.${svgIconClasses.root}`]: {
+                color: odysseyTokens.HueNeutral700
+              }
+            })
+          };
+        }
+      }
+    },
+    MuiChip: {
+      defaultProps: {
+        deleteIcon: _jsx(CloseCircleFilledIcon, {})
+      },
+      styleOverrides: {
+        root: ({
+          ownerState
+        }) => {
+          return {
+            height: "auto",
+            paddingBlock: `calc(${odysseyTokens.Spacing2} - ${odysseyTokens.BorderWidthMain})`,
+            paddingInline: odysseyTokens.Spacing3,
+            fontSize: odysseyTokens.TypographySizeBody,
+            lineHeight: odysseyTokens.TypographyLineHeightUi,
+            borderRadius: odysseyTokens.BorderRadiusRound,
+            backgroundColor: odysseyTokens.HueNeutral100,
+            borderWidth: odysseyTokens.BorderWidthMain,
+            borderColor: odysseyTokens.HueNeutral200,
+            borderStyle: odysseyTokens.BorderStyleMain,
+            color: odysseyTokens.HueNeutral700,
+            ...(ownerState.onDelete && {
+              paddingInlineEnd: odysseyTokens.Spacing2
+            }),
+            [`&.${chipClasses.disabled}`]: {
+              opacity: 1,
+              pointerEvents: "none",
+              borderColor: odysseyTokens.BorderColorDisabled,
+              color: odysseyTokens.TypographyColorDisabled,
+              [`& .${chipClasses.deleteIcon}`]: {
+                color: odysseyTokens.HueNeutral300
+              },
+              [`& .${chipClasses.icon}`]: {
+                color: odysseyTokens.HueNeutral300
+              }
+            },
+            ...(ownerState.clickable && {
+              "&:hover": {
+                backgroundColor: odysseyTokens.HueNeutral200
+              },
+              [`&.${chipClasses.focusVisible}`]: {
+                backgroundColor: odysseyTokens.HueNeutral200,
+                outlineColor: odysseyTokens.FocusOutlineColorPrimary,
+                outlineOffset: odysseyTokens.FocusOutlineOffsetTight,
+                outlineStyle: odysseyTokens.FocusOutlineStyle,
+                outlineWidth: odysseyTokens.FocusOutlineWidthMain
+              },
+              "&:active": {
+                boxShadow: "none",
+                backgroundColor: odysseyTokens.HueNeutral300
+              }
+            }),
+            [`& .${chipClasses.icon}`]: {
+              margin: 0,
+              marginInlineEnd: odysseyTokens.Spacing1
+            },
+            ...(ownerState.variant === "lamp" && {
+              paddingBlock: 0,
+              paddingInline: 0,
+              borderRadius: 0,
+              border: 0,
+              backgroundColor: "transparent",
+              color: odysseyTokens.TypographyColorBody,
+              "&::before": {
+                content: "''",
+                width: odysseyTokens.Spacing2,
+                height: odysseyTokens.Spacing2,
+                marginInlineEnd: odysseyTokens.Spacing2,
+                borderRadius: "100%",
+                backgroundColor: odysseyTokens.HueNeutral600
+              },
+              [`&.${chipClasses.colorError}`]: {
+                "&::before": {
+                  border: 0,
+                  backgroundColor: odysseyTokens.PaletteDangerMain
+                }
+              },
+              [`&.${chipClasses.colorSuccess}`]: {
+                "&::before": {
+                  border: 0,
+                  backgroundColor: odysseyTokens.PaletteSuccessMain
+                }
+              },
+              [`&.${chipClasses.colorWarning}`]: {
+                "&::before": {
+                  border: 0,
+                  backgroundColor: odysseyTokens.HueYellow200
+                }
+              }
+            }),
+            ...(ownerState.variant === "pill" && {
+              paddingBlock: odysseyTokens.Spacing1,
+              paddingInline: odysseyTokens.Spacing2,
+              borderRadius: odysseyTokens.BorderRadiusMain,
+              border: 0,
+              fontWeight: odysseyTokens.TypographyWeightHeadingBold,
+              lineHeight: odysseyTokens.TypographyLineHeightOverline,
+              fontSize: "0.71428571rem",
+              textTransform: "uppercase",
+              ...(contrastMode === "highContrast" && {
+                backgroundColor: odysseyTokens.HueNeutral200,
+                color: odysseyTokens.HueNeutral700
+              }),
+              ...(contrastMode === "lowContrast" && {
+                backgroundColor: odysseyTokens.HueNeutral50,
+                color: odysseyTokens.TypographyColorSubordinate
+              }),
+              [`&.${chipClasses.colorError}`]: {
+                ...(contrastMode === "highContrast" && {
+                  backgroundColor: odysseyTokens.HueRed100,
+                  color: odysseyTokens.HueRed700
+                }),
+                ...(contrastMode === "lowContrast" && {
+                  backgroundColor: odysseyTokens.PaletteDangerLighter,
+                  color: odysseyTokens.TypographyColorDanger
+                })
+              },
+              [`&.${chipClasses.colorInfo}`]: {
+                ...(contrastMode === "highContrast" && {
+                  backgroundColor: odysseyTokens.HueBlue100,
+                  color: odysseyTokens.HueBlue700
+                }),
+                ...(contrastMode === "lowContrast" && {
+                  backgroundColor: odysseyTokens.PalettePrimaryLighter,
+                  color: odysseyTokens.PalettePrimaryText
+                })
+              },
+              [`&.${chipClasses.colorSuccess}`]: {
+                ...(contrastMode === "highContrast" && {
+                  backgroundColor: odysseyTokens.HueGreen200,
+                  color: odysseyTokens.HueGreen700
+                }),
+                ...(contrastMode === "lowContrast" && {
+                  backgroundColor: odysseyTokens.PaletteSuccessLighter,
+                  color: odysseyTokens.TypographyColorSuccess
+                })
+              },
+              [`&.${chipClasses.colorWarning}`]: {
+                ...(contrastMode === "highContrast" && {
+                  backgroundColor: odysseyTokens.HueYellow100,
+                  color: odysseyTokens.HueYellow700
+                }),
+                ...(contrastMode === "lowContrast" && {
+                  backgroundColor: odysseyTokens.PaletteWarningLighter,
+                  color: odysseyTokens.TypographyColorWarning
+                })
+              }
+            }),
+            [`.${inputBaseClasses.root}.${inputBaseClasses.disabled} &`]: {
+              backgroundColor: odysseyTokens.HueNeutral200
+            }
+          };
+        },
+        label: {
+          padding: 0,
+          [`.${inputBaseClasses.root}.${inputBaseClasses.disabled} &`]: {
+            color: odysseyTokens.TypographyColorDisabled,
+            WebkitTextFillColor: odysseyTokens.TypographyColorDisabled
+          }
+        },
+        deleteIcon: {
+          WebkitTapHighlightColor: "transparent",
+          color: odysseyTokens.HueNeutral500,
+          fontSize: "1em",
+          cursor: "pointer",
+          margin: "0",
+          marginInlineStart: odysseyTokens.Spacing2,
+          "&:hover": {
+            color: odysseyTokens.HueNeutral600
+          },
+          [`.${inputBaseClasses.root}.${inputBaseClasses.disabled} &`]: {
+            display: "none"
+          }
+        }
+      }
+    },
+    MuiCircularProgress: {
+      defaultProps: {
+        size: odysseyTokens.Spacing5,
+        thickness: 10,
+        color: "primary",
+        disableShrink: false,
+        variant: "indeterminate"
+      },
+      styleOverrides: {
+        root: ({
+          ownerState
+        }) => ({
+          ...(ownerState.color !== "inherit" && {
+            color: odysseyTokens.PalettePrimaryMain
+          })
+        }),
+        circle: ({
+          ownerState
+        }) => ({
+          ...(ownerState.variant === "indeterminate" && {
+            strokeDasharray: "160%, 360%"
+          })
+        })
+      }
+    },
+    MuiCssBaseline: {
+      styleOverrides: themeParam => `
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+
+      html {
+        font-size: calc((${themeParam.typography.fontSize} / 16) * 100%);
+      }
+
+      :not(code) &, :not(pre) & {
+        :lang(el) {
+          font-family: 'Noto Sans', sans-serif;
+        }
+
+        :lang(ja) {
+          font-family: 'Noto Sans JP', sans-serif;
+        }
+
+        :lang(ko) {
+          font-family: 'Noto Sans KR', sans-serif;
+        }
+
+        :lang(th) {
+          font-family: 'Noto Sans Thai', sans-serif;
+        }
+
+        :lang(zh-CN) {
+          font-family: 'Noto Sans SC', sans-serif;
+        }
+
+        :lang(zh-TW) {
+          font-family: 'Noto Sans TC', sans-serif;
+        }
+      }
+    `
+    },
+    MuiDrawer: {
+      styleOverrides: {
+        root: {},
+        paper: ({
+          ownerState
+        }) => ({
+          width: ownerState.variant === "temporary" ? drawerSizes.temporary : drawerSizes.persistent,
+          display: "flex",
+          overflowY: "auto",
+          flexDirection: "column",
+          flexWrap: "nowrap",
+          justifyContent: "space-between",
+          alignItems: "stretch",
+          alignContent: "flex-end",
+          color: odysseyTokens.HueNeutral700,
+          ...(ownerState.variant === "persistent" && {
+            position: "static",
+            borderRadius: odysseyTokens.BorderRadiusOuter,
+            border: "0"
+          }),
+          ...(ownerState.variant === "temporary" && {
+            boxShadow: odysseyTokens.ShadowScale1
+          })
+        })
+      }
+    },
+    MuiScopedCssBaseline: {
+      styleOverrides: {
+        root: {
+          background: "transparent",
+          abbr: {
+            borderBottomWidth: odysseyTokens.BorderWidthMain,
+            borderBottomStyle: "dashed",
+            borderBottomColor: odysseyTokens.HueNeutral700,
+            textDecoration: "none"
+          },
+          address: {
+            maxWidth: odysseyTokens.TypographyLineLengthMax,
+            marginBlockStart: 0,
+            marginBlockEnd: odysseyTokens.Spacing4,
+            marginInline: 0,
+            fontStyle: "normal",
+            "&:last-child": {
+              marginBlockEnd: 0
+            }
+          },
+          blockquote: {
+            maxWidth: odysseyTokens.TypographyLineLengthMax,
+            marginBlockStart: 0,
+            marginBlockEnd: odysseyTokens.Spacing4,
+            marginInline: 0,
+            paddingBlock: 0,
+            paddingInlineStart: odysseyTokens.Spacing4,
+            paddingInlineEnd: 0,
+            borderInlineStartWidth: "3px",
+            borderInlineStartStyle: odysseyTokens.BorderStyleMain,
+            borderInlineStartColor: odysseyTokens.HueNeutral200,
+            "&:last-child": {
+              marginBlockEnd: 0
+            }
+          },
+          cite: {
+            fontStyle: "normal"
+          },
+          code: {
+            fontFamily: odysseyTokens.TypographyFamilyMono,
+            display: "inline-block",
+            minWidth: `calc(${odysseyTokens.TypographySizeSubordinate} * ${odysseyTokens.TypographyLineHeightHeading5})`,
+            borderStyle: odysseyTokens.BorderStyleMain,
+            borderWidth: odysseyTokens.BorderWidthMain,
+            borderRadius: odysseyTokens.BorderRadiusTight,
+            borderColor: odysseyTokens.BorderColorDisplay,
+            backgroundColor: odysseyTokens.HueNeutral50,
+            padding: `calc(${odysseyTokens.Spacing1} / 2) ${odysseyTokens.Spacing1}`,
+            fontSize: odysseyTokens.TypographySizeSubordinate,
+            lineHeight: odysseyTokens.TypographyLineHeightHeading5
+          },
+          del: {
+            display: "inline-block",
+            backgroundColor: odysseyTokens.PaletteDangerHighlight,
+            "&::before, &::after": {
+              clip: "rect(0 0 0 0)",
+              clipPath: "inset(50%)",
+              height: "1px",
+              overflow: "hidden",
+              position: "absolute",
+              whiteSpace: "nowrap",
+              width: "1px"
+            },
+            "&::before": {
+              content: "attr(data-a11y-start)"
+            },
+            "&::after": {
+              content: "attr(data-a11y-end)"
+            }
+          },
+          details: {
+            fontSize: odysseyTokens.TypographySizeBody
+          },
+          dfn: {
+            fontStyle: "italic"
+          },
+          dl: {
+            display: "grid",
+            gridGap: `${odysseyTokens.Spacing2} ${odysseyTokens.Spacing4}`,
+            gridTemplateColumns: "repeat(2, minmax(min-content, max-content))",
+            maxWidth: odysseyTokens.TypographyLineLengthMax,
+            marginBlockStart: 0,
+            marginBlockEnd: odysseyTokens.Spacing4,
+            marginInline: 0,
+            padding: 0,
+            "&:last-child": {
+              marginBlockEnd: 0
+            },
+            dt: {
+              gridColumn: 1,
+              fontWeight: odysseyTokens.TypographyWeightBodyBold
+            },
+            dd: {
+              gridColumn: 2,
+              marginInlineStart: odysseyTokens.Spacing0,
+              fontWeight: 400
+            }
+          },
+          em: {
+            fontStyle: "italic",
+            "& > em": {
+              textDecoration: "underline"
+            }
+          },
+          figure: {
+            display: "grid",
+            gridGap: odysseyTokens.Spacing2,
+            gridTemplateColumns: "minmax(min-content, max-content)",
+            justifyContent: "start",
+            justifyItems: "start",
+            marginBlockStart: 0,
+            marginBlockEnd: odysseyTokens.Spacing4,
+            marginInline: 0,
+            "&:last-child": {
+              marginBlockEnd: 0
+            }
+          },
+          "figcaption:not([class])": {
+            color: odysseyTokens.TypographyColorSubordinate,
+            fontSize: odysseyTokens.TypographySizeSubordinate
+          },
+          hr: {
+            marginBlock: odysseyTokens.Spacing2,
+            marginInline: 0,
+            borderWidth: odysseyTokens.BorderWidthMain,
+            borderStyle: odysseyTokens.BorderStyleMain,
+            borderColor: odysseyTokens.HueNeutral200
+          },
+          ins: {
+            display: "inline-block",
+            backgroundColor: odysseyTokens.PaletteSuccessHighlight,
+            "&::before, &::after": {
+              clip: "rect(0 0 0 0)",
+              clipPath: "inset(50%)",
+              height: "1px",
+              overflow: "hidden",
+              position: "absolute",
+              whiteSpace: "nowrap",
+              width: "1px"
+            },
+            "&::before": {
+              content: "attr(data-a11y-start)"
+            },
+            "&::after": {
+              content: "attr(data-a11y-end)"
+            }
+          },
+          kbd: {
+            display: "inline-block",
+            minWidth: `calc(${odysseyTokens.TypographySizeSubordinate} * ${odysseyTokens.TypographyLineHeightHeading5})`,
+            borderStyle: odysseyTokens.BorderStyleMain,
+            borderWidth: odysseyTokens.BorderWidthMain,
+            borderRadius: odysseyTokens.BorderRadiusMain,
+            borderColor: odysseyTokens.HueNeutral200,
+            backgroundColor: odysseyTokens.HueNeutral50,
+            padding: `calc(${odysseyTokens.Spacing1} / 2) ${odysseyTokens.Spacing1}`,
+            fontFamily: "'Inconsolata', 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', 'Courier', monospace",
+            fontSize: odysseyTokens.TypographySizeSubordinate,
+            fontWeight: odysseyTokens.Spacing5,
+            lineHeight: odysseyTokens.TypographyLineHeightHeading5,
+            boxShadow: `0 1px 1px 0 hsla(240, 6%, 12%, 0.05)`
+          },
+          mark: {
+            backgroundColor: odysseyTokens.PaletteWarningHighlight,
+            "&::before, &::after": {
+              clip: "rect(0 0 0 0)",
+              clipPath: "inset(50%)",
+              height: "1px",
+              overflow: "hidden",
+              position: "absolute",
+              whiteSpace: "nowrap",
+              width: "1px"
+            },
+            "&::before": {
+              content: "attr(data-a11y-start)"
+            },
+            "&::after": {
+              content: "attr(data-a11y-end)"
+            }
+          },
+          "p:not([class])": {
+            maxWidth: odysseyTokens.TypographyLineLengthMax,
+            marginBlockStart: 0,
+            marginBlockEnd: odysseyTokens.Spacing4,
+            "&:last-child": {
+              marginBlockEnd: 0
+            }
+          },
+          pre: {
+            marginInline: 0,
+            marginBlockStart: 0,
+            marginBlockEnd: odysseyTokens.Spacing4,
+            fontFamily: odysseyTokens.TypographyFamilyMono,
+            whiteSpace: "pre-wrap",
+            tabSize: 2,
+            "&:last-child": {
+              marginBlockEnd: 0
+            }
+          },
+          ul: {
+            [`&.${stackClasses.root}`]: {
+              padding: 0,
+              margin: 0
+            }
+          },
+          "ul:not([class]), ol:not([class])": {
+            maxWidth: odysseyTokens.TypographyLineLengthMax,
+            marginBlockStart: 0,
+            marginBlockEnd: odysseyTokens.Spacing4,
+            paddingInlineStart: "2ch",
+            ol: {
+              listStyleType: "lower-alpha",
+              ol: {
+                listStyleType: "lower-roman"
+              }
+            },
+            "&:last-child": {
+              marginBlockEnd: 0
+            }
+          },
+          "li:not([class])": {
+            marginBlockEnd: odysseyTokens.Spacing2,
+            paddingInlineStart: odysseyTokens.Spacing1,
+            "ul, ol": {
+              marginBlockStart: odysseyTokens.Spacing2,
+              marginInlineStart: `calc(${odysseyTokens.Spacing6} - 2ch)`
+            }
+          },
+          q: {
+            quotes: `'"' '"' "'" "'"`,
+            "&::before": {
+              content: "open-quote"
+            },
+            "&::after": {
+              content: "close-quote"
+            }
+          },
+          s: {
+            textDecoration: "line-through"
+          },
+          samp: {
+            padding: "0 0.5ch",
+            backgroundColor: odysseyTokens.HueNeutral100,
+            boxShadow: `0 1px 0 ${odysseyTokens.HueNeutral50}`,
+            fontSize: odysseyTokens.TypographySizeBody,
+            kbd: {
+              background: odysseyTokens.HueNeutralWhite
+            }
+          },
+          small: {
+            fontSize: odysseyTokens.TypographySizeSubordinate
+          },
+          strong: {
+            fontWeight: odysseyTokens.TypographyWeightBodyBold
+          },
+          sub: {
+            fontSize: odysseyTokens.TypographySizeSubordinate,
+            lineHeight: 1,
+            verticalAlign: "sub"
+          },
+          summary: {
+            marginBlockEnd: odysseyTokens.Spacing2,
+            fontSize: odysseyTokens.TypographySizeBody,
+            fontWeight: odysseyTokens.TypographyWeightBodyBold,
+            cursor: "default",
+            "&:focus-visible": {
+              outlineColor: odysseyTokens.FocusOutlineColorPrimary,
+              outlineOffset: odysseyTokens.FocusOutlineOffsetMain,
+              outlineStyle: odysseyTokens.FocusOutlineStyle,
+              outlineWidth: odysseyTokens.FocusOutlineWidthMain
+            }
+          },
+          sup: {
+            fontSize: odysseyTokens.TypographySizeSubordinate,
+            lineHeight: 1,
+            verticalAlign: "super"
+          },
+          var: {
+            fontStyle: "italic",
+            fontWeight: odysseyTokens.TypographyWeightBodyBold
+          }
+        }
+      }
+    },
+    MuiDialog: {
+      defaultProps: {
+        container: shadowRootElement || shadowDomElement,
+        scroll: "paper"
+      },
+      styleOverrides: {
+        paper: {
+          maxWidth: `calc(${odysseyTokens.TypographyLineLengthMax} + (${odysseyTokens.Spacing6} * 2))`,
+          borderRadius: odysseyTokens.BorderRadiusOuter,
+          boxShadow: "none",
+          filter: "drop-shadow(0px 1px 4px rgba(29, 29, 33, 0.08)) drop-shadow(0px 4px 10px rgba(29, 29, 33, 0.08)) drop-shadow(0px 8px 30px rgba(29, 29, 33, 0.1))"
+        }
+      }
+    },
+    MuiDialogActions: {
+      styleOverrides: {
+        root: {
+          flexWrap: "wrap",
+          gap: odysseyTokens.Spacing2,
+          paddingBlockStart: odysseyTokens.Spacing5,
+          paddingBlockEnd: odysseyTokens.Spacing5,
+          paddingInline: odysseyTokens.Spacing6
+        }
+      }
+    },
+    MuiDialogContent: {
+      styleOverrides: {
+        root: ({
+          ownerState
+        }) => ({
+          paddingBlock: 0,
+          paddingInline: odysseyTokens.Spacing6,
+          ...(ownerState.dividers === true && {
+            paddingBlock: odysseyTokens.Spacing6,
+            color: odysseyTokens.HueNeutral600
+          }),
+          ["&:last-child"]: {
+            paddingBlockEnd: odysseyTokens.Spacing6
+          }
+        })
+      }
+    },
+    MuiDialogContentText: {
+      styleOverrides: {
+        root: {
+          marginBlockEnd: odysseyTokens.Spacing5,
+          color: odysseyTokens.HueNeutral700,
+          "&:last-child": {
+            marginBlockEnd: "0"
+          }
+        }
+      }
+    },
+    MuiDialogTitle: {
+      defaultProps: {
+        component: "h1",
+        variant: "h5"
+      },
+      styleOverrides: {
+        root: {
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          marginBlockEnd: 0,
+          padding: 0,
+          paddingBlockStart: odysseyTokens.Spacing5,
+          paddingBlockEnd: odysseyTokens.Spacing4,
+          paddingInline: odysseyTokens.Spacing6,
+          fontFamily: odysseyTokens.TypographyFamilyHeading,
+          [`.${buttonClasses.root}`]: {
+            marginInlineEnd: `-${odysseyTokens.Spacing3}`
+          }
+        }
+      }
+    },
+    MuiFormControl: {
+      defaultProps: {
+        margin: "normal"
+      },
+      styleOverrides: {
+        root: ({
+          ownerState
+        }) => ({
+          width: "100%",
+          maxWidth: odysseyTokens.TypographyLineLengthMax,
+          ...(ownerState.margin === "normal" && {
+            marginBlockStart: 0,
+            marginBlockEnd: odysseyTokens.Spacing4,
+            "&:last-child": {
+              marginBlockEnd: 0
+            }
+          }),
+          ...(ownerState.margin === "dense" && {
+            marginBlockStart: 0,
+            marginBlockEnd: odysseyTokens.Spacing5,
+            "&:last-child": {
+              marginBlockEnd: 0
+            }
+          }),
+          ...(ownerState.fullWidth && {
+            maxWidth: "100%"
+          }),
+          [`& .${formGroupClasses.root}`]: {
+            marginBlockStart: odysseyTokens.Spacing1
+          },
+          [`&:has(+ [data-file-preview-container])`]: {
+            marginBlockEnd: 0
+          },
+          ".MuiChip-root": {
+            maxWidth: `calc(${odysseyTokens.TypographyLineLengthMax} - ${odysseyTokens.Spacing6})`
+          }
+        })
+      }
+    },
+    MuiFormControlLabel: {
+      styleOverrides: {
+        root: ({
+          ownerState
+        }) => ({
+          gap: odysseyTokens.Spacing2,
+          marginInlineStart: 0,
+          marginInlineEnd: 0,
+          ...(ownerState.labelPlacement === "start" && {
+            marginInlineStart: 0,
+            marginInlineEnd: 0
+          }),
+          ...(ownerState.labelPlacement === "top" && {
+            marginInlineStart: 0
+          }),
+          ...(ownerState.labelPlacement === "bottom" && {
+            marginInlineStart: 0
+          }),
+          "&:not(:last-child)": {
+            marginBottom: odysseyTokens.Spacing2
+          },
+          "&.Mui-disabled": {
+            pointerEvents: "none",
+            color: odysseyTokens.TypographyColorDisabled
+          },
+          [`:has(> .${radioClasses.root})`]: {
+            alignItems: "flex-start"
+          },
+          [`&:hover .${radioClasses.root}, &:hover .${checkboxClasses.root}`]: {
+            color: odysseyTokens.TypographyColorBody
+          },
+          [`&:hover .${radioClasses.root}.Mui-checked, &:hover .${checkboxClasses.root}.Mui-checked`]: {
+            color: odysseyTokens.PalettePrimaryDark
+          },
+          [`&.Mui-error:hover .${radioClasses.root}, &.Mui-error:hover .${checkboxClasses.root}`]: {
+            color: odysseyTokens.PaletteDangerDark
+          },
+          [`&.Mui-error:hover .${radioClasses.root}.Mui-checked, &.Mui-error:hover .${checkboxClasses.root}.Mui-checked`]: {
+            color: odysseyTokens.PaletteDangerDark
+          }
+        }),
+        label: ({
+          ownerState
+        }) => ({
+          gap: odysseyTokens.Spacing1,
+          lineHeight: odysseyTokens.TypographyLineHeightUi,
+          ...(ownerState.disabled && {
+            color: `${odysseyTokens.TypographyColorDisabled} !important`
+          })
+        }),
+        asterisk: () => ({
+          display: "none"
+        })
+      }
+    },
+    MuiFormHelperText: {
+      defaultProps: {
+        variant: "standard"
+      },
+      styleOverrides: {
+        root: {
+          fontSize: odysseyTokens.TypographySizeSubordinate,
+          lineHeight: odysseyTokens.TypographyLineHeightBody,
+          marginBlockEnd: odysseyTokens.Spacing2,
+          marginBlockStart: odysseyTokens.Spacing1,
+          textAlign: "start",
+          [`.${formLabelClasses.root} + &`]: {
+            marginBlockStart: `-${odysseyTokens.Spacing1}`,
+            color: odysseyTokens.TypographyColorSubordinate
+          },
+          "&:last-child": {
+            marginBlockEnd: 0
+          },
+          ".Mui-disabled &": {
+            color: odysseyTokens.TypographyColorDisabled,
+            a: {
+              color: odysseyTokens.TypographyColorDisabled
+            }
+          }
+        }
+      }
+    },
+    MuiFormLabel: {
+      styleOverrides: {
+        root: {
+          alignItems: "center",
+          color: odysseyTokens.TypographyColorBody,
+          display: "inline-flex",
+          lineHeight: odysseyTokens.TypographyLineHeightUi,
+          fontSize: odysseyTokens.TypographySizeBody,
+          fontWeight: odysseyTokens.TypographyWeightBodyBold,
+          marginBottom: odysseyTokens.Spacing2,
+          "&.Mui-focused, &.Mui-error, &.Mui-disabled": {
+            color: odysseyTokens.TypographyColorBody
+          },
+          "& > .MuiTypography-root": {
+            margin: "reset",
+            marginInlineStart: odysseyTokens.Spacing1
+          }
+        }
+      }
+    },
+    MuiIconButton: {
+      styleOverrides: {
+        root: {
+          padding: odysseyTokens.Spacing1,
+          borderRadius: odysseyTokens.BorderRadiusMain,
+          "&:hover": {
+            backgroundColor: odysseyTokens.HueNeutral100
+          },
+          "&:focus-visible": {
+            boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PalettePrimaryMain}`,
+            outline: "2px solid transparent",
+            outlineOffset: "1px"
+          }
+        }
+      }
+    },
+    MuiInput: {
+      defaultProps: {
+        disableUnderline: true
+      },
+      styleOverrides: {
+        root: {
+          "label + &": {
+            marginTop: 0
+          }
+        }
+      }
+    },
+    MuiInputAdornment: {
+      styleOverrides: {
+        root: ({
+          ownerState
+        }) => ({
+          display: "flex",
+          minWidth: "1.25em",
+          maxHeight: "unset",
+          margin: 0,
+          alignItems: "center",
+          whiteSpace: "nowrap",
+          color: odysseyTokens.TypographyColorSubordinate,
+          ...(ownerState.position === "start" && {
+            marginInlineStart: odysseyTokens.Spacing3
+          }),
+          ...(ownerState.position === "end" && {
+            marginInlineEnd: odysseyTokens.Spacing2
+          }),
+          ...(ownerState.disablePointerEvents === true && {
+            pointerEvents: "none"
+          })
+        })
+      }
+    },
+    MuiInputBase: {
+      defaultProps: {
+        minRows: 3
+      },
+      styleOverrides: {
+        root: ({
+          ownerState,
+          theme
+        }) => ({
+          ...theme.typography.body1,
+          flex: "1",
+          width: "auto",
+          color: odysseyTokens.TypographyColorBody,
+          lineHeight: odysseyTokens.TypographyLineHeightUi,
+          borderWidth: odysseyTokens.BorderWidthMain,
+          borderStyle: odysseyTokens.BorderStyleMain,
+          borderRadius: odysseyTokens.BorderRadiusMain,
+          borderColor: odysseyTokens.HueNeutral500,
+          boxShadow: `0 0 0 0 transparent`,
+          backgroundColor: odysseyTokens.HueNeutralWhite,
+          transition: theme.transitions.create(["border-color", "background-color", "box-shadow"], {
+            duration: odysseyTokens.TransitionDurationMain
+          }),
+          ["&[data-ods-type='search']"]: {
+            borderColor: odysseyTokens.HueNeutral400,
+            ...(contrastMode === "highContrast" && {
+              border: "none"
+            }),
+            [`& .${inputBaseClasses.input}::placeholder`]: {
+              color: odysseyTokens.TypographyColorSupport,
+              opacity: 1
+            }
+          },
+          ["&[data-ods-variant='filled']"]: {
+            backgroundColor: odysseyTokens.HueNeutral50,
+            borderColor: odysseyTokens.HueNeutral50,
+            [`&:hover`]: {
+              borderColor: odysseyTokens.HueNeutral400
+            },
+            [`&.${inputBaseClasses.focused}`]: {
+              borderColor: odysseyTokens.FocusOutlineColorPrimary,
+              boxShadow: `0 0 0 1px ${odysseyTokens.FocusOutlineColorPrimary}`
+            }
+          },
+          ...(ownerState.fullWidth && {
+            width: "100%"
+          }),
+          ...(ownerState.readOnly === true && {
+            borderColor: "transparent",
+            backgroundColor: odysseyTokens.HueNeutral50
+          }),
+          [`&:hover`]: {
+            borderColor: odysseyTokens.HueNeutral900
+          },
+          [`&.${inputBaseClasses.focused}`]: {
+            borderColor: odysseyTokens.FocusOutlineColorPrimary,
+            boxShadow: `0 0 0 1px ${odysseyTokens.FocusOutlineColorPrimary}`,
+            outline: `${odysseyTokens.FocusOutlineWidthMain} ${odysseyTokens.FocusOutlineStyle} transparent`,
+            outlineOffset: odysseyTokens.FocusOutlineOffsetTight
+          },
+          [`&.${inputBaseClasses.error}`]: {
+            borderColor: odysseyTokens.BorderColorDangerControl
+          },
+          [`&.${inputBaseClasses.error}:hover`]: {
+            borderColor: odysseyTokens.HueNeutral900
+          },
+          [`&.${inputBaseClasses.error}.${inputBaseClasses.focused}`]: {
+            borderColor: odysseyTokens.FocusOutlineColorPrimary,
+            boxShadow: `0 0 0 1px ${odysseyTokens.FocusOutlineColorPrimary}`
+          },
+          [`&.${inputBaseClasses.disabled}`]: {
+            color: odysseyTokens.TypographyColorDisabled,
+            borderColor: odysseyTokens.BorderColorDisabled,
+            pointerEvents: "auto",
+            backgroundColor: odysseyTokens.HueNeutral50,
+            cursor: "not-allowed"
+          }
+        }),
+        input: {
+          height: "auto",
+          paddingBlock: `calc(${odysseyTokens.Spacing3} - ${odysseyTokens.BorderWidthMain})`,
+          paddingInline: odysseyTokens.Spacing3,
+          boxShadow: "none",
+          [`.${inputBaseClasses.disabled} &`]: {
+            pointerEvents: "auto",
+            cursor: "not-allowed"
+          },
+          [`.${inputAdornmentClasses.root} + &`]: {
+            paddingInlineStart: odysseyTokens.Spacing2
+          },
+          [`label[data-shrink=false] + .${inputBaseClasses.formControl} &`]: {
+            "&::placeholder": {
+              color: odysseyTokens.TypographyColorSupport,
+              opacity: "1 !important"
+            }
+          },
+          [`&::-webkit-search-cancel-button`]: {
+            display: "none",
+            MozAppearance: "none",
+            WebkitAppearance: "none"
+          },
+          [`&::-ms-clear`]: {
+            display: "none"
+          }
+        }
+      }
+    },
+    MuiInputLabel: {
+      defaultProps: {
+        disableAnimation: true,
+        shrink: false
+      },
+      styleOverrides: {
+        root: ({
+          ownerState
+        }) => ({
+          display: "flex",
+          justifyContent: "space-between",
+          overflow: "unset",
+          whiteSpace: "unset",
+          ...(ownerState.formControl ? {
+            position: "initial",
+            transform: "none"
+          } : {}),
+          ...(ownerState.variant === "outlined" && {
+            pointerEvents: "initial",
+            transform: "none",
+            maxWidth: "100%",
+            ...(ownerState.size === "small" && {
+              transform: "none"
+            })
+          }),
+          [`& > .${typographyClasses.root}`]: {
+            lineHeight: "unset"
+          }
+        })
+      }
+    },
+    MuiLink: {
+      styleOverrides: {
+        root: {
+          color: odysseyTokens.TypographyColorAction,
+          textDecoration: "none",
+          cursor: "pointer",
+          "&:visited": {
+            color: odysseyTokens.TypographyColorAction
+          },
+          "&:hover": {
+            color: odysseyTokens.PalettePrimaryDark,
+            textDecoration: "underline"
+          },
+          "&:focus-visible": {
+            borderRadius: odysseyTokens.BorderRadiusMain,
+            outlineColor: odysseyTokens.FocusOutlineColorPrimary,
+            outlineOffset: odysseyTokens.FocusOutlineOffsetMain,
+            outlineStyle: odysseyTokens.FocusOutlineStyle,
+            outlineWidth: odysseyTokens.FocusOutlineWidthTight,
+            textDecoration: "none"
+          },
+          ".Link-indicator, .Link-icon": {
+            display: "inline-block",
+            height: "1em",
+            lineHeight: 1,
+            "& svg": {
+              fontSize: "1em"
+            }
+          },
+          ".Link-indicator": {
+            marginInlineStart: odysseyTokens.Spacing1
+          },
+          ".Link-icon": {
+            marginInlineEnd: odysseyTokens.Spacing1
+          },
+          svg: {
+            fontSize: "1.2em",
+            height: "1em",
+            position: "relative",
+            insetBlockStart: "-0.0625em",
+            verticalAlign: "middle",
+            width: "1em"
+          }
+        }
+      },
+      variants: [{
+        props: {
+          variant: "monochrome"
+        },
+        style: {
+          color: odysseyTokens.TypographyColorBody,
+          textDecoration: "underline",
+          "&:visited": {
+            color: odysseyTokens.TypographyColorBody
+          },
+          "&:hover": {
+            color: odysseyTokens.TypographyColorSubordinate
+          }
+        }
+      }]
+    },
+    MuiListItem: {
+      styleOverrides: {
+        root: {
+          textAlign: "start"
+        }
+      }
+    },
+    MuiListItemIcon: {
+      styleOverrides: {
+        root: {
+          minWidth: "unset",
+          color: "inherit"
+        }
+      }
+    },
+    MuiListSubheader: {
+      styleOverrides: {
+        root: {
+          paddingBlock: odysseyTokens.Spacing2,
+          paddingInline: odysseyTokens.Spacing4,
+          fontSize: odysseyTokens.TypographySizeSubordinate,
+          fontWeight: odysseyTokens.TypographyWeightBodyBold,
+          lineHeight: odysseyTokens.TypographyLineHeightUi,
+          color: odysseyTokens.TypographyColorSubordinate,
+          textTransform: "uppercase"
+        }
+      }
+    },
+    MuiMenu: {
+      defaultProps: {
+        elevation: 2
+      },
+      styleOverrides: {
+        list: {
+          paddingBlock: odysseyTokens.Spacing2,
+          paddingInline: `${odysseyTokens.Spacing2} !important`,
+          borderRadius: odysseyTokens.BorderRadiusMain
+        },
+        root: {
+          "& hr": {
+            borderStyle: "solid none none",
+            borderWidth: odysseyTokens.BorderWidthMain,
+            borderColor: odysseyTokens.BorderColorDisplay
+          }
+        }
+      }
+    },
+    MuiMenuItem: {
+      styleOverrides: {
+        root: ({
+          ownerState,
+          theme
+        }) => ({
+          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"
+          },
+          "&:hover": {
+            textDecoration: "none",
+            backgroundColor: odysseyTokens.HueNeutral100,
+            "@media (hover: none)": {
+              backgroundColor: "transparent"
+            }
+          },
+          [`:focus-visible`]: {
+            backgroundColor: odysseyTokens.HueNeutral100
+          },
+          [`&.${menuItemClasses.root}-destructive`]: {
+            color: odysseyTokens.TypographyColorDanger,
+            [`.${typographyClasses.root}`]: {
+              color: "inherit"
+            }
+          },
+          "&.isVisiblySelected": {
+            backgroundColor: `${odysseyTokens.PalettePrimaryLighter} !important`,
+            [`& .${typographyClasses.root}`]: {
+              color: odysseyTokens.HueBlue600
+            }
+          },
+          [`&.${menuItemClasses.selected}`]: {
+            backgroundColor: "transparent",
+            color: odysseyTokens.TypographyColorAction,
+            fontWeight: odysseyTokens.TypographyWeightBodyBold,
+            "&:hover": {
+              backgroundColor: odysseyTokens.PalettePrimaryLighter,
+              "@media (hover: none)": {
+                backgroundColor: odysseyTokens.PalettePrimaryLighter
+              }
+            },
+            [`&.${menuItemClasses.focusVisible}`]: {
+              backgroundColor: odysseyTokens.PalettePrimaryLighter,
+              color: odysseyTokens.TypographyColorAction,
+              "&:hover": {
+                backgroundColor: odysseyTokens.PalettePrimaryLighter,
+                "@media (hover: none)": {
+                  backgroundColor: odysseyTokens.PalettePrimaryLighter
+                }
+              }
+            }
+          },
+          [`&.${menuItemClasses.focusVisible}`]: {
+            backgroundColor: "transparent",
+            boxShadow: theme.mixins.insetFocusRing,
+            "&:hover": {
+              backgroundColor: odysseyTokens.HueNeutral100,
+              "@media (hover: none)": {
+                backgroundColor: "transparent"
+              }
+            }
+          },
+          "&[data-empty='true']": {
+            "&:after": {
+              content: "' '",
+              visibility: "hidden"
+            }
+          },
+          ...(!ownerState.disableGutters && {
+            paddingInline: odysseyTokens.Spacing4
+          }),
+          ...(ownerState.divider && {
+            borderBlockEnd: `1px solid ${odysseyTokens.BorderColorDisplay}`
+          }),
+          [`&.${menuItemClasses.disabled}`]: {
+            opacity: 1,
+            color: odysseyTokens.TypographyColorDisabled,
+            [`.${typographyClasses.root}`]: {
+              color: "inherit"
+            }
+          },
+          [`& + .${dividerClasses.root}`]: {
+            marginBlock: odysseyTokens.Spacing1
+          },
+          [`& .${listItemTextClasses.root}`]: {
+            marginBlock: 0
+          },
+          [`& .${listItemIconClasses.root}`]: {
+            minWidth: "unset"
+          }
+        })
+      }
+    },
+    MuiListItemSecondaryAction: {
+      styleOverrides: {
+        root: {
+          display: "flex"
+        }
+      }
+    },
+    MuiModal: {
+      defaultProps: {
+        container: shadowRootElement || shadowDomElement
+      }
+    },
+    MuiNativeSelect: {
+      defaultProps: {
+        variant: "standard"
+      },
+      styleOverrides: {
+        select: {
+          "&:focus": {
+            backgroundColor: "transparent"
+          }
+        },
+        icon: {
+          right: "unset",
+          insetInlineEnd: odysseyTokens.Spacing3,
+          color: odysseyTokens.TypographyColorBody
+        }
+      }
+    },
+    MuiPaper: {
+      styleOverrides: {
+        elevation1: {
+          boxShadow: odysseyTokens.DepthLow
+        },
+        elevation2: {
+          boxShadow: odysseyTokens.DepthMedium
+        },
+        elevation3: {
+          boxShadow: odysseyTokens.DepthHigh
+        }
+      }
+    },
+    MuiPopover: {
+      defaultProps: {
+        container: shadowRootElement || shadowDomElement
+      },
+      styleOverrides: {
+        paper: {
+          marginBlockStart: odysseyTokens.Spacing1,
+          borderWidth: odysseyTokens.BorderWidthMain,
+          borderStyle: odysseyTokens.BorderStyleMain,
+          borderColor: odysseyTokens.HueNeutral200
+        }
+      }
+    },
+    MuiPopper: {
+      defaultProps: {
+        container: shadowRootElement || shadowDomElement
+      }
+    },
+    MuiRadio: {
+      defaultProps: {
+        size: "small",
+        icon: _jsx(_Fragment, {}),
+        checkedIcon: _jsx(_Fragment, {})
+      },
+      styleOverrides: {
+        root: ({
+          ownerState,
+          theme
+        }) => {
+          const isReadOnly = ownerState?.inputProps?.readOnly;
+          return {
+            position: "relative",
+            insetBlockStart: `${2 / theme.typography.fontSize}rem`,
+            width: `${odysseyTokens.TypographyLineHeightUi}em`,
+            minWidth: `${odysseyTokens.TypographyLineHeightUi}em`,
+            height: `${odysseyTokens.TypographyLineHeightUi}em`,
+            borderRadius: `${odysseyTokens.TypographyLineHeightUi}em`,
+            borderWidth: odysseyTokens.BorderWidthMain,
+            borderStyle: odysseyTokens.BorderStyleMain,
+            borderColor: odysseyTokens.HueNeutral500,
+            padding: 0,
+            boxShadow: `0 0 0 0 transparent`,
+            transition: theme.transitions.create(["border-color", "background-color", "box-shadow"], {
+              duration: odysseyTokens.TransitionDurationMain
+            }),
+            "&::before": {
+              content: "''",
+              position: "absolute",
+              width: odysseyTokens.Spacing2,
+              height: odysseyTokens.Spacing2,
+              borderRadius: "50%",
+              backgroundColor: "transparent",
+              transition: theme.transitions.create(["background-color"], {
+                duration: odysseyTokens.TransitionDurationMain
+              })
+            },
+            [`.${formControlLabelClasses.root}:hover > &`]: {
+              backgroundColor: "transparent",
+              borderColor: odysseyTokens.HueNeutral900
+            },
+            ".Mui-error:hover > &": {
+              backgroundColor: "transparent",
+              borderColor: odysseyTokens.BorderColorDangerDark,
+              "&::before": {
+                backgroundColor: odysseyTokens.PaletteDangerDark
+              }
+            },
+            ".Mui-error > &": {
+              borderColor: odysseyTokens.BorderColorDangerControl,
+              "&.Mui-focusVisible": {
+                boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PaletteDangerMain}`
+              }
+            },
+            "&.Mui-focusVisible": {
+              borderColor: odysseyTokens.HueNeutral900,
+              boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PalettePrimaryMain}`,
+              outline: "2px solid transparent",
+              outlineOffset: "1px"
+            },
+            "&.Mui-checked": {
+              position: "relative",
+              "&::before": {
+                backgroundColor: odysseyTokens.PalettePrimaryMain
+              }
+            },
+            ".Mui-error > &.Mui-checked::before": {
+              backgroundColor: odysseyTokens.PaletteDangerMain
+            },
+            "&.Mui-disabled": {
+              backgroundColor: odysseyTokens.HueNeutral50,
+              borderColor: odysseyTokens.BorderColorDisabled,
+              "&.Mui-checked::before": {
+                backgroundColor: odysseyTokens.BorderColorDisabled
+              }
+            },
+            ...(isReadOnly && {
+              backgroundColor: odysseyTokens.HueNeutral100,
+              borderColor: odysseyTokens.HueNeutral300,
+              cursor: "default",
+              "&::before": {
+                content: "''",
+                position: "absolute",
+                width: odysseyTokens.Spacing2,
+                height: odysseyTokens.Spacing2,
+                borderRadius: "50%",
+                backgroundColor: "transparent",
+                transition: theme.transitions.create(["background-color"], {
+                  duration: odysseyTokens.TransitionDurationMain
+                })
+              },
+              "&.Mui-checked::before": {
+                backgroundColor: odysseyTokens.HueNeutral700
+              },
+              [`.${formControlLabelClasses.root}:hover > &`]: {
+                backgroundColor: odysseyTokens.HueNeutral100,
+                borderColor: odysseyTokens.HueNeutral300
+              }
+            })
+          };
+        }
+      }
+    },
+    MuiSnackbar: {
+      defaultProps: {
+        anchorOrigin: {
+          vertical: "bottom",
+          horizontal: "right"
+        }
+      },
+      styleOverrides: {
+        root: {
+          "&.Toast": {
+            position: "static"
+          }
+        }
+      }
+    },
+    MuiSelect: {
+      defaultProps: {
+        variant: "standard",
+        IconComponent: ChevronDownIcon,
+        MenuProps: {
+          PaperProps: {
+            elevation: 1
+          }
+        }
+      },
+      styleOverrides: {
+        root: ({
+          ownerState
+        }) => ({
+          ...(ownerState?.inputProps?.readOnly ? {
+            "&.MuiInputBase-root": {
+              backgroundColor: odysseyTokens.HueNeutral50,
+              borderColor: odysseyTokens.HueNeutral200,
+              "&:hover": {
+                backgroundColor: odysseyTokens.HueNeutral50
+              },
+              "&.Mui-focused": {
+                borderColor: odysseyTokens.PalettePrimaryMain
+              }
+            }
+          } : {}),
+          "& .MuiSelect-icon": {
+            right: "unset",
+            insetInlineEnd: odysseyTokens.Spacing3,
+            color: odysseyTokens.TypographyColorSubordinate
+          }
+        }),
+        select: ({
+          ownerState
+        }) => ({
+          height: "auto",
+          paddingBlock: `calc(${odysseyTokens.Spacing3} - ${odysseyTokens.BorderWidthMain})`,
+          paddingInline: odysseyTokens.Spacing3,
+          minHeight: `${odysseyTokens.TypographyLineHeightUi}em`,
+          "&:focus": {
+            backgroundColor: "transparent"
+          },
+          "& .MuiBox-root": {
+            display: "flex",
+            flexWrap: "wrap",
+            gap: odysseyTokens.Spacing1,
+            marginBlock: `-${odysseyTokens.Spacing2}`,
+            marginInline: `-${odysseyTokens.Spacing2}`
+          },
+          ["& .MuiListItemSecondaryAction-root"]: {
+            display: "none"
+          },
+          ...(ownerState?.inputProps?.readOnly ? {
+            color: odysseyTokens.HueNeutral700,
+            cursor: "default",
+            "&:focus": {
+              backgroundColor: "transparent",
+              borderColor: odysseyTokens.PalettePrimaryMain
+            }
+          } : {})
+        })
+      }
+    },
+    MuiSvgIcon: {
+      defaultProps: {
+        fontSize: "inherit",
+        color: "inherit"
+      },
+      styleOverrides: {
+        root: ({
+          ownerState
+        }) => ({
+          fontSize: `${odysseyTokens.TypographyLineHeightUi}rem`,
+          ...(ownerState.fontSize === "small" && {
+            fontSize: `${Number(odysseyTokens.TypographyLineHeightUi) * 0.75}rem`
+          }),
+          ...(ownerState.fontSize === "large" && {
+            fontSize: `${Number(odysseyTokens.TypographyLineHeightUi) * 1.25}rem`
+          })
+        })
+      }
+    },
+    MuiTab: {
+      defaultProps: {
+        iconPosition: "start"
+      },
+      styleOverrides: {
+        root: ({
+          ownerState
+        }) => ({
+          maxWidth: `calc(${odysseyTokens.TypographyLineLengthMax} / 2)`,
+          minWidth: "unset",
+          minHeight: odysseyTokens.Spacing9,
+          padding: `${odysseyTokens.Spacing4} ${odysseyTokens.Spacing1}`,
+          fontSize: odysseyTokens.TypographySizeHeading6,
+          fontFamily: odysseyTokens.TypographyFamilyHeading,
+          lineHeight: odysseyTokens.TypographyLineHeightUi,
+          overflow: "visible",
+          color: odysseyTokens.HueNeutral600,
+          opacity: 1,
+          ...(ownerState.selected == true && {
+            color: odysseyTokens.TypographyColorAction,
+            fontWeight: odysseyTokens.TypographyWeightHeading
+          }),
+          ...(ownerState.disabled && {
+            color: odysseyTokens.TypographyColorDisabled,
+            opacity: "1 !important"
+          }),
+          ...(ownerState.wrapped && {
+            fontSize: odysseyTokens.TypographySizeSubordinate,
+            lineHeight: odysseyTokens.TypographyLineHeightBody
+          }),
+          "&:hover": {
+            color: odysseyTokens.TypographyColorAction
+          },
+          "&:focus-visible::before, &.Mui-focusVisible::before": {
+            content: "''",
+            position: "absolute",
+            insetBlockStart: odysseyTokens.Spacing4,
+            insetInlineEnd: `calc(-1 * ${odysseyTokens.Spacing2})`,
+            insetBlockEnd: odysseyTokens.Spacing4,
+            insetInlineStart: `calc(-1 * ${odysseyTokens.Spacing2})`,
+            borderWidth: odysseyTokens.BorderWidthMain,
+            borderStyle: odysseyTokens.BorderStyleMain,
+            borderColor: odysseyTokens.PalettePrimaryMain,
+            borderRadius: odysseyTokens.BorderRadiusMain
+          },
+          "& .MuiTab-iconWrapper": {
+            marginInlineEnd: odysseyTokens.Spacing1
+          }
+        })
+      }
+    },
+    MuiTabPanel: {
+      styleOverrides: {
+        root: {
+          padding: 0
+        }
+      }
+    },
+    MuiTabs: {
+      defaultProps: {
+        textColor: "inherit"
+      },
+      styleOverrides: {
+        root: {
+          minHeight: "unset",
+          marginBottom: odysseyTokens.Spacing5
+        },
+        scroller: {
+          borderBottom: `${odysseyTokens.BorderWidthMain} ${odysseyTokens.BorderStyleMain} ${odysseyTokens.BorderColorDisplay}`
+        },
+        flexContainer: {
+          gap: odysseyTokens.Spacing5
+        },
+        scrollButtons: {
+          zIndex: 1,
+          transitionProperty: "opacity",
+          transitionDuration: odysseyTokens.TransitionDurationMain,
+          transitionTimingFunction: odysseyTokens.TransitionTimingMain,
+          "& svg": {
+            width: odysseyTokens.Spacing4,
+            height: odysseyTokens.Spacing4,
+            color: odysseyTokens.PaletteNeutralDark
+          },
+          "&::after": {
+            content: '""',
+            position: "absolute",
+            top: 0,
+            bottom: 0,
+            width: odysseyTokens.Spacing3
+          },
+          "&:first-of-type::after": {
+            right: `-${odysseyTokens.Spacing3}`,
+            background: "linear-gradient(90deg, #FFF 0%, #FFF 72.49%, rgba(255, 255, 255, 0.70) 86.5%, rgba(255, 255, 255, 0.00) 100%)"
+          },
+          "&:last-of-type::after": {
+            left: `-${odysseyTokens.Spacing3}`,
+            background: "linear-gradient(-90deg, #FFF 0%, #FFF 72.49%, rgba(255, 255, 255, 0.70) 86.5%, rgba(255, 255, 255, 0.00) 100%)"
+          }
+        }
+      }
+    },
+    MuiTable: {
+      styleOverrides: {
+        root: ({
+          ownerState
+        }) => ({
+          display: "table",
+          width: "100%",
+          borderCollapse: "separate",
+          borderSpacing: 0,
+          marginBlock: odysseyTokens.Spacing0,
+          marginInline: odysseyTokens.Spacing0,
+          lineHeight: odysseyTokens.TypographyLineHeightUi,
+          "&.narrow": {
+            width: "100%",
+            tableLayout: "fixed"
+          },
+          "&:only-child": {
+            marginBlockEnd: 0
+          },
+          ...(ownerState.stickyHeader && {
+            borderCollapse: "separate"
+          }),
+          caption: {
+            clip: "rect(0 0 0 0)",
+            clipPath: "inset(50%)",
+            height: "1px",
+            overflow: "hidden",
+            position: "absolute",
+            whiteSpace: "nowrap",
+            width: "1px"
+          }
+        })
+      }
+    },
+    MuiTableCell: {
+      styleOverrides: {
+        root: ({
+          theme,
+          ownerState
+        }) => ({
+          ...theme.typography.body1,
+          textAlign: "start",
+          verticalAlign: "baseline",
+          padding: `0 ${odysseyTokens.Spacing3} !important`,
+          overflow: "visible !important",
+          position: "relative",
+          overflowWrap: "break-word",
+          [`&.${tableCellClasses.root}`]: {
+            borderTop: `none !important`,
+            borderBottom: `none !important`,
+            borderLeft: `none !important`
+          },
+          ["&::after"]: {
+            background: "transparent !important"
+          },
+          [`.${tableBodyClasses.root} &.${tableCellClasses.root}`]: {
+            borderRight: `none !important`
+          },
+          [`&.${tableCellClasses.root}.isResizing::after`]: {
+            borderRightColor: odysseyTokens.BorderColorPrimaryControl,
+            borderRightStyle: odysseyTokens.BorderStyleMain,
+            borderRightWidth: 2,
+            content: '""',
+            position: "absolute",
+            right: 0
+          },
+          [`.MuiTable-root.narrow &:last-child`]: {
+            width: "auto"
+          },
+          ...(ownerState.variant === "action" && {
+            paddingBlock: 0
+          }),
+          ...(ownerState.variant === "body" && {
+            color: odysseyTokens.TypographyColorBody
+          }),
+          ...(ownerState.variant === "date" && {
+            whiteSpace: "nowrap"
+          }),
+          ...(ownerState.variant === "footer" && {
+            color: odysseyTokens.TypographyColorSubordinate,
+            lineHeight: odysseyTokens.TypographyLineHeightBody,
+            fontSize: odysseyTokens.TypographySizeBody
+          }),
+          [`.${tableHeadClasses.root} &`]: {
+            color: odysseyTokens.TypographyColorHeading,
+            fontWeight: odysseyTokens.TypographyWeightBodyBold,
+            textTransform: "uppercase",
+            backgroundColor: odysseyTokens.HueNeutral50,
+            borderBottom: 0,
+            height: `${odysseyTokens.Spacing7} !important`,
+            paddingBlock: `${odysseyTokens.Spacing3} !important`,
+            fontSize: odysseyTokens.TypographySizeOverline,
+            lineHeight: odysseyTokens.TypographyLineHeightBody,
+            letterSpacing: 1.3
+          },
+          [`.${tableHeadClasses.root} &:first-of-type`]: {
+            borderTopLeftRadius: odysseyTokens.Spacing2,
+            borderBottomLeftRadius: odysseyTokens.Spacing2
+          },
+          [`.${tableHeadClasses.root} &:last-of-type`]: {
+            borderTopRightRadius: odysseyTokens.Spacing2,
+            borderBottomRightRadius: odysseyTokens.Spacing2
+          },
+          [`.${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`]: {
+            display: "none"
+          },
+          [`.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,
+            [`& .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"'
+          }),
+          ...(ownerState.padding === "checkbox" && {
+            width: 48
+          }),
+          ...(ownerState.padding === "none" && {
+            padding: 0
+          }),
+          ...(ownerState.align === "left" && {
+            textAlign: "start"
+          }),
+          ...(ownerState.align === "center" && {
+            textAlign: "center"
+          }),
+          ...(ownerState.align === "right" && {
+            textAlign: "end",
+            flexDirection: "row-reverse"
+          }),
+          ...(ownerState.align === "justify" && {
+            textAlign: "justify"
+          }),
+          [`& .${checkboxClasses.root}`]: {
+            width: `${odysseyTokens.TypographyLineHeightUi}rem`,
+            height: `${odysseyTokens.TypographyLineHeightUi}rem`,
+            margin: 0
+          },
+          [`& .Mui-TableHeadCell-ResizeHandle-Wrapper`]: {
+            marginInlineEnd: `-${odysseyTokens.Spacing3}`,
+            [`&:active .${dividerClasses.vertical}`]: {
+              display: "none"
+            }
+          },
+          [`& .Mui-TableHeadCell-Content-Wrapper`]: {
+            flexShrink: 0
+          },
+          [`& .${dividerClasses.vertical}`]: {
+            borderStyle: "none none none solid",
+            borderWidth: 1,
+            borderRadius: 0,
+            marginRight: 2,
+            borderColor: odysseyTokens.HueNeutral400,
+            height: 18
+          },
+          ["&.ods-drag-handle svg"]: {
+            color: odysseyTokens.HueNeutral500
+          },
+          [`& .${buttonBaseClasses.root}`]: {
+            marginBlock: `-${odysseyTokens.Spacing2}`
+          }
+        })
+      }
+    },
+    MuiTableContainer: {
+      defaultProps: {
+        component: "figure"
+      },
+      styleOverrides: {
+        root: {
+          width: "unset",
+          maxWidth: "100%",
+          marginBlockStart: odysseyTokens.Spacing0,
+          marginBlockEnd: odysseyTokens.Spacing4,
+          marginInline: 0,
+          overflowX: "auto",
+          display: "block !important",
+          "&:last-child": {
+            marginBlock: 0
+          }
+        }
+      }
+    },
+    MuiTableRow: {
+      styleOverrides: {
+        root: () => ({
+          borderTop: `${odysseyTokens.BorderWidthMain} ${odysseyTokens.BorderStyleMain} ${odysseyTokens.HueNeutral100}`,
+          transition: "none !important",
+          verticalAlign: "unset",
+          [`&:hover`]: {
+            backgroundColor: `${odysseyTokens.HueNeutral50} !important`
+          },
+          [`&:first-of-type`]: {
+            borderTopColor: odysseyTokens.HueNeutralWhite
+          },
+          [`&.${tableRowClasses.selected}`]: {
+            backgroundColor: `${odysseyTokens.PalettePrimaryLighter} !important`,
+            "&:hover": {
+              backgroundColor: `${odysseyTokens.PalettePrimaryLighter} !important`
+            },
+            [`&:hover + .${tableRowClasses.root}`]: {
+              borderTopColor: odysseyTokens.PalettePrimaryMain
+            }
+          },
+          [`.${tableRowClasses.selected} + &`]: {
+            borderTopColor: odysseyTokens.PalettePrimaryLight
+          },
+          [`&.${tableRowClasses.head}`]: {
+            boxShadow: "none !important",
+            borderBottom: 0,
+            "&:hover, &:focus-within": {
+              backgroundColor: "transparent !important"
+            }
+          },
+          [`.${tableBodyClasses.root} &`]: {
+            paddingBlock: odysseyTokens.Spacing3,
+            [`& .${tableCellClasses.root}::after`]: {
+              top: `-${odysseyTokens.Spacing3} !important`,
+              bottom: `-${odysseyTokens.Spacing3} !important`
+            }
+          },
+          [`.${tableBodyClasses.root}.MuiTableBody-compact &`]: {
+            paddingBlock: odysseyTokens.Spacing2,
+            [`& .${tableCellClasses.root}::after`]: {
+              top: `-${odysseyTokens.Spacing2} !important`,
+              bottom: `-${odysseyTokens.Spacing2} !important`
+            }
+          },
+          [`.${tableBodyClasses.root}.MuiTableBody-spacious &`]: {
+            paddingBlock: odysseyTokens.Spacing4,
+            [`& .${tableCellClasses.root}::after`]: {
+              top: `-${odysseyTokens.Spacing4} !important`,
+              bottom: `-${odysseyTokens.Spacing4} !important`
+            }
+          },
+          "&.isDragTarget": {
+            opacity: 1,
+            position: "relative",
+            backgroundColor: odysseyTokens.PalettePrimaryMain,
+            borderRadius: odysseyTokens.BorderRadiusOuter,
+            [`& td.${tableCellClasses.root}`]: {
+              borderTop: "0 !important",
+              borderRight: "0 !important",
+              borderBottom: "0 !important",
+              borderLeft: "0 !important"
+            },
+            "&::after": {
+              content: '""',
+              position: "absolute",
+              left: 0,
+              right: 0,
+              top: 0,
+              bottom: 0,
+              borderColor: odysseyTokens.PalettePrimaryLight,
+              borderStyle: "dashed",
+              borderWidth: 2,
+              borderRadius: odysseyTokens.BorderRadiusOuter
+            }
+          },
+          "&.isDragging": {
+            borderRadius: odysseyTokens.BorderRadiusOuter
+          },
+          "&.isDragging::after": {
+            content: '""',
+            position: "absolute",
+            left: 0,
+            right: 0,
+            top: 0,
+            bottom: 0,
+            borderColor: odysseyTokens.HueNeutral200,
+            borderStyle: "dashed",
+            borderWidth: 2,
+            borderRadius: odysseyTokens.BorderRadiusOuter
+          },
+          "&.isDragging, &.isDragging.isDragTarget": {
+            position: "relative",
+            opacity: 1,
+            backgroundColor: "transparent"
+          },
+          "&.isDragging.isDragTarget::after": {
+            borderColor: odysseyTokens.PalettePrimaryLight,
+            left: 0,
+            right: 0
+          },
+          [`&.isDragging + .${tableRowClasses.root}, &.isDragTarget + .${tableRowClasses.root}`]: {
+            borderTopColor: "transparent"
+          }
+        })
+      }
+    },
+    MuiTableSortLabel: {
+      styleOverrides: {
+        root: {
+          cursor: "pointer",
+          display: "inline-flex",
+          justifyContent: "flex-start",
+          flexDirection: "inherit",
+          alignItems: "center",
+          marginInlineEnd: odysseyTokens.Spacing3,
+          "&:focus-visible": {
+            color: odysseyTokens.TypographyColorBody,
+            outlineOffset: odysseyTokens.Spacing4,
+            outlineStyle: odysseyTokens.FocusOutlineStyle,
+            outlineWidth: odysseyTokens.FocusOutlineWidthMain,
+            outlineColor: odysseyTokens.FocusOutlineColorPrimary
+          },
+          "&:hover": {
+            color: odysseyTokens.TypographyColorBody
+          }
+        },
+        icon: ({
+          ownerState
+        }) => ({
+          ...(ownerState.direction === "asc" && {
+            transform: "rotate(180deg) !important"
+          }),
+          ".isUnsorted &": {
+            opacity: "0 !important"
+          },
+          ".isUnsorted:hover &, .isUnsorted:focus &": {
+            opacity: "0.5 !important",
+            "&:hover, &:focus": {
+              opacity: "1 !important"
+            }
+          },
+          ".isSorted &": {
+            opacity: 1
+          }
+        })
+      }
+    },
+    MuiTooltip: {
+      defaultProps: {
+        arrow: true,
+        enterDelay: 500,
+        enterNextDelay: 250,
+        placement: "top"
+      },
+      styleOverrides: {
+        tooltip: ({
+          ownerState
+        }) => ({
+          maxWidth: `calc(${odysseyTokens.TypographyLineLengthMax} / 2)`,
+          paddingBlock: odysseyTokens.Spacing2,
+          paddingInline: odysseyTokens.Spacing3,
+          backgroundColor: odysseyTokens.HueNeutral900,
+          color: odysseyTokens.HueNeutralWhite,
+          fontSize: odysseyTokens.TypographySizeSubordinate,
+          lineHeight: odysseyTokens.TypographyLineHeightBody,
+          ...(ownerState.touch === true && {
+            paddingBlock: odysseyTokens.Spacing2,
+            paddingInline: odysseyTokens.Spacing3,
+            fontSize: odysseyTokens.TypographySizeSubordinate,
+            lineHeight: odysseyTokens.TypographyLineHeightBody,
+            fontWeight: odysseyTokens.TypographyWeightBody
+          }),
+          [`.${tooltipClasses.popper}[data-popper-placement*="left"] &`]: {
+            transformOrigin: "right center",
+            ...(ownerState.isRtl ? {
+              marginInlineStart: odysseyTokens.Spacing3,
+              ...(ownerState.touch === true && {
+                marginInlineStart: odysseyTokens.Spacing4
+              })
+            } : {
+              marginInlineEnd: odysseyTokens.Spacing3,
+              ...(ownerState.touch === true && {
+                marginInlineEnd: odysseyTokens.Spacing4
+              })
+            })
+          },
+          [`.${tooltipClasses.popper}[data-popper-placement*="right"] &`]: {
+            transformOrigin: "left center",
+            ...(ownerState.isRtl ? {
+              marginInlineEnd: odysseyTokens.Spacing3,
+              ...(ownerState.touch === true && {
+                marginInlineEnd: odysseyTokens.Spacing4
+              })
+            } : {
+              marginInlineStart: odysseyTokens.Spacing3,
+              ...(ownerState.touch === true && {
+                marginInlineStart: odysseyTokens.Spacing4
+              })
+            })
+          },
+          [`.${tooltipClasses.popper}[data-popper-placement*="top"] &`]: {
+            transformOrigin: "center bottom",
+            marginBottom: odysseyTokens.Spacing3,
+            ...(ownerState.touch === true && {
+              marginBottom: odysseyTokens.Spacing4
+            })
+          },
+          [`.${tooltipClasses.popper}[data-popper-placement*="bottom"] &`]: {
+            transformOrigin: "center top",
+            marginTop: odysseyTokens.Spacing3,
+            ...(ownerState.touch === true && {
+              marginTop: odysseyTokens.Spacing4
+            })
+          }
+        }),
+        arrow: {
+          color: odysseyTokens.HueNeutral900,
+          "&::before": {
+            borderRadius: "0"
+          },
+          [`.${tooltipClasses.popper}[data-popper-placement*="top"] &::before`]: {
+            borderRadius: `0 0 3px 0`
+          },
+          [`.${tooltipClasses.popper}[data-popper-placement*="right"] &::before`]: {
+            borderRadius: `0 0 0 3px`
+          },
+          [`.${tooltipClasses.popper}[data-popper-placement*="bottom"] &::before`]: {
+            borderRadius: `3px 0 0 0`
+          },
+          [`.${tooltipClasses.popper}[data-popper-placement*="left"] &::before`]: {
+            borderRadius: `0 3px 0 0`
+          }
+        }
+      }
+    },
+    MuiTypography: {
+      defaultProps: {
+        variantMapping: {
+          h1: "h1",
+          h2: "h2",
+          h3: "h3",
+          h4: "h4",
+          h5: "h5",
+          h6: "h6",
+          subtitle1: "p",
+          body1: "p",
+          inherit: "p",
+          legend: "legend",
+          overline: "p"
+        }
+      },
+      styleOverrides: {
+        paragraph: {
+          marginBlockEnd: odysseyTokens.Spacing4,
+          [`&:last-child`]: {
+            marginBlockEnd: 0
+          }
+        },
+        overline: {
+          fontSize: odysseyTokens.TypographySizeOverline,
+          fontWeight: odysseyTokens.TypographyWeightBodyBold,
+          lineHeight: odysseyTokens.TypographyLineHeightOverline,
+          letterSpacing: odysseyTokens.TypographyLetterSpacingOverline,
+          textTransform: "none",
+          ":is(:lang(en-*), :lang(en))": {
+            textTransform: "uppercase"
+          }
+        }
+      }
+    }
+  };
+};
+//# sourceMappingURL=components.js.map