@okta/odyssey-contribution-tooling 1.52.0 → 1.53.0

package/dist/esm/theme/components.js

@@ -0,0 +1,2905 @@
+/*!
+ * 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 { formGroupClasses } from "@mui/material/FormGroup";
+import { formLabelClasses } from "@mui/material/FormLabel";
+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 { tableCellClasses } from "@mui/material/TableCell";
+import { tableHeadClasses } from "@mui/material/TableHead";
+import { tableRowClasses } from "@mui/material/TableRow";
+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
+}) => ({
+  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
+        },
+        [`.${svgIconClasses.root}`]: {
+          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.variant === "security" && {
+          backdropFilter: "blur(10px)"
+        }),
+        ...(ownerState.invisible === true && {
+          backgroundColor: "transparent"
+        })
+      })
+    }
+  },
+  MuiBreadcrumbs: {
+    styleOverrides: {
+      li: {
+        fontSize: odysseyTokens.TypographySizeSubordinate,
+        [`& .${svgIconClasses.root}`]: {
+          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: {
+      disableElevation: true,
+      variant: "primary"
+    },
+    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}`,
+        "& 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: {
+      checkedIcon: _jsx(CheckIcon, {}),
+      icon: _jsx(_Fragment, {}),
+      indeterminateIcon: _jsx(SubtractIcon, {}),
+      size: "small"
+    },
+    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.colorInfo}`]: {
+              "&::before": {
+                border: 0,
+                backgroundColor: odysseyTokens.PalettePrimaryMain
+              }
+            },
+            [`&.${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,
+        flex: 1,
+        [`.${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.BorderRadiusTight,
+          outlineColor: odysseyTokens.FocusOutlineColorPrimary,
+          outlineOffset: odysseyTokens.FocusOutlineOffsetMain,
+          outlineStyle: odysseyTokens.FocusOutlineStyle,
+          outlineWidth: odysseyTokens.FocusOutlineWidthMain,
+          textDecoration: "none"
+        },
+        ".Link-indicator, .Link-icon": {
+          display: "inline-block",
+          height: "1em",
+          lineHeight: 1,
+          [`& .${svgIconClasses.root}`]: {
+            fontSize: "1em"
+          }
+        },
+        ".Link-indicator": {
+          marginInlineStart: odysseyTokens.Spacing1
+        },
+        ".Link-icon": {
+          marginInlineEnd: odysseyTokens.Spacing1
+        },
+        [`.${svgIconClasses.root}`]: {
+          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}`,
+          marginInlineStart: `-${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,
+        [`& .${svgIconClasses.root}`]: {
+          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 .${svgIconClasses.root}`]: {
+          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