@okta/odyssey-react-mui 0.24.0 → 1.0.1

package/dist/theme/components.js

@@ -8,15 +8,22 @@
  * 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 { buttonClasses } from "@mui/material/Button";
+ */
+
+import { alertTitleClasses } from "@mui/material/AlertTitle";
+import { buttonClasses } from "@mui/material/Button";
+import { checkboxClasses } from "@mui/material/Checkbox";
 import { chipClasses } from "@mui/material/Chip";
-import { dialogActionsClasses } from "@mui/material/DialogActions";
 import { dividerClasses } from "@mui/material/Divider";
+import { formControlLabelClasses } from "@mui/material/FormControlLabel";
+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";
@@ -24,756 +31,780 @@ import { tableHeadClasses } from "@mui/material/TableHead";
 import { tableRowClasses } from "@mui/material/TableRow";
 import { tableSortLabelClasses } from "@mui/material/TableSortLabel";
 import { tooltipClasses } from "@mui/material/Tooltip";
-import { AlertTriangleFilledIcon, ArrowDownIcon, CheckIcon, CheckCircleFilledIcon, ChevronDownIcon, CloseCircleFilledIcon, CloseIcon, InformationCircleFilledIcon, SubtractIcon } from "../iconDictionary/index.js";
+import { typographyClasses } from "@mui/material/Typography";
+import { ArrowDownIcon, CheckCircleFilledIcon, CheckIcon, ChevronDownIcon, CloseCircleFilledIcon, CloseIcon, DangerDiamondFilledIcon, InformationCircleFilledIcon, SubtractIcon, WarningFilledIcon } from "../icons.generated/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-export const components = {
-  MuiAlert: {
-    defaultProps: {
-      iconMapping: {
-        error: _jsx(AlertTriangleFilledIcon, {}),
-        info: _jsx(InformationCircleFilledIcon, {}),
-        success: _jsx(CheckCircleFilledIcon, {}),
-        warning: _jsx(AlertTriangleFilledIcon, {})
-      }
-    },
-    styleOverrides: {
-      root: _ref => {
-        let {
-          ownerState,
-          theme
-        } = _ref;
-        return {
-          padding: theme.spacing(4),
-          gap: theme.spacing(4),
-          color: theme.palette.text.primary,
-          ...(ownerState.severity && {
-            backgroundColor: theme.palette[ownerState.severity].lighter,
-            borderColor: theme.palette[ownerState.severity].light
-          }),
-          ...(ownerState.variant === "banner" && {
-            position: "relative",
-            justifyContent: "center",
-            alignItems: "center",
-            borderWidth: 0,
-            borderRadius: 0
-          }),
-          ...(ownerState.variant === "infobox" && {
-            borderStyle: theme.mixins.borderStyle,
-            borderWidth: theme.mixins.borderWidth,
-            borderRadius: theme.mixins.borderRadius,
-            "&:not(:last-child)": {
-              marginBottom: theme.spacing(4)
-            }
-          }),
-          ...(ownerState.variant === "toast" && {
-            maxWidth: theme.mixins.maxWidth,
-            borderStyle: theme.mixins.borderStyle,
-            borderWidth: theme.mixins.borderWidth,
-            borderRadius: theme.mixins.borderRadius,
-            position: "relative",
-            alignItems: "center"
-          })
-        };
+export const components = odysseyTokens => {
+  return {
+    MuiAlert: {
+      defaultProps: {
+        iconMapping: {
+          error: _jsx(DangerDiamondFilledIcon, {}),
+          info: _jsx(InformationCircleFilledIcon, {}),
+          success: _jsx(CheckCircleFilledIcon, {}),
+          warning: _jsx(WarningFilledIcon, {})
+        }
       },
-      action: _ref2 => {
-        let {
-          ownerState,
-          theme
-        } = _ref2;
-        return {
-          ...(ownerState.variant === "banner" && {
-            padding: 0,
+      styleOverrides: {
+        root: _ref => {
+          let {
+            ownerState
+          } = _ref;
+          return {
+            padding: odysseyTokens.Spacing4,
+            gap: odysseyTokens.Spacing4,
+            color: odysseyTokens.TypographyColorBody,
+            border: 0,
+            ...(ownerState.severity === "success" && {
+              backgroundColor: odysseyTokens.HueGreen100,
+              ...(ownerState.variant === "toast" && {
+                backgroundColor: odysseyTokens.HueGreen100.concat(odysseyTokens.PaletteAlphaSemi)
+              })
+            }),
+            ...(ownerState.severity === "info" && {
+              backgroundColor: odysseyTokens.HueBlue100,
+              ...(ownerState.variant === "toast" && {
+                backgroundColor: odysseyTokens.HueBlue100.concat(odysseyTokens.PaletteAlphaSemi)
+              })
+            }),
+            ...(ownerState.severity === "error" && {
+              backgroundColor: odysseyTokens.HueRed100,
+              ...(ownerState.variant === "toast" && {
+                backgroundColor: odysseyTokens.HueRed100.concat(odysseyTokens.PaletteAlphaSemi)
+              })
+            }),
+            ...(ownerState.severity === "warning" && {
+              backgroundColor: odysseyTokens.HueYellow100,
+              ...(ownerState.variant === "toast" && {
+                backgroundColor: odysseyTokens.HueYellow100.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 === "banner" && {
+              position: "relative",
+              justifyContent: "center",
+              alignItems: "center",
+              borderRadius: 0,
+              ...(ownerState.onClose !== undefined && {
+                paddingInline: odysseyTokens.Spacing6
+              })
+            }),
+            ...(ownerState.variant === "callout" && {
+              borderRadius: odysseyTokens.BorderRadiusMain,
+              "&:not(:last-child)": {
+                marginBottom: odysseyTokens.Spacing6
+              }
+            }),
+            ...(ownerState.variant === "toast" && {
+              maxWidth: odysseyTokens.TypographyLineLengthMax,
+              borderRadius: odysseyTokens.BorderRadiusOuter,
+              position: "relative",
+              alignItems: "center",
+              backdropFilter: "blur(10px)"
+            })
+          };
+        },
+        action: _ref2 => {
+          let {
+            ownerState
+          } = _ref2;
+          return {
+            ...(ownerState.variant === "banner" && {
+              padding: 0,
+              marginInlineEnd: 0,
+              insetBlockStart: "50%",
+              insetInlineEnd: odysseyTokens.Spacing2,
+              position: "absolute",
+              transform: "translateY(-50%)"
+            }),
+            ...(ownerState.variant === "toast" && {
+              padding: 0,
+              marginInlineStart: 0,
+              marginInlineEnd: 0
+            })
+          };
+        },
+        icon: _ref3 => {
+          let {
+            ownerState
+          } = _ref3;
+          return {
             marginInlineEnd: 0,
-            top: "50%",
-            right: theme.spacing(4),
-            position: "absolute",
-            transform: "translateY(-50%)"
-          }),
-          ...(ownerState.variant === "toast" && {
             padding: 0,
-            marginInlineStart: 0,
-            marginInlineEnd: 0
-          })
-        };
-      },
-      icon: _ref3 => {
-        let {
-          ownerState,
-          theme
-        } = _ref3;
-        return {
-          marginInlineEnd: 0,
-          padding: 0,
-          fontSize: "inherit",
-          opacity: 1,
-          ...(ownerState.severity && {
-            color: theme.palette[ownerState.severity].main
-          }),
-          ...(ownerState.severity === "warning" && {
-            color: theme.palette[ownerState.severity].dark
-          }),
-          [`& .${svgIconClasses.root}`]: {
-            fontSize: "1.429rem"
-          }
-        };
-      },
-      message: _ref4 => {
-        let {
-          ownerState,
-          theme
-        } = _ref4;
-        return {
-          padding: 0,
-          lineHeight: theme.typography.body1.lineHeight,
-          overflow: "visible",
-          ...(ownerState.variant === "banner" && {
-            display: "flex",
-            justifyContent: "space-between",
-            gap: theme.spacing(4)
-          }),
-          ...(ownerState.variant === "toast" && {
-            flexGrow: 1
-          })
-        };
+            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.PaletteWarningDark
+            }),
+            [`& .${svgIconClasses.root}`]: {
+              alignSelf: "center",
+              fontSize: odysseyTokens.TypographySizeHeading6
+            }
+          };
+        },
+        message: _ref4 => {
+          let {
+            ownerState
+          } = _ref4;
+          return {
+            padding: 0,
+            overflow: "visible",
+            ...(ownerState.variant === "banner" && {
+              display: "flex",
+              justifyContent: "space-between",
+              gap: odysseyTokens.Spacing4
+            }),
+            ...(ownerState.variant === "toast" && {
+              flexGrow: 1
+            })
+          };
+        }
       }
-    }
-  },
-  MuiAlertTitle: {
-    styleOverrides: {
-      root: _ref5 => {
-        let {
-          theme
-        } = _ref5;
-        return {
-          marginTop: 0,
-          marginBottom: theme.spacing(1),
-          lineHeight: theme.typography.h6.lineHeight,
-          fontSize: theme.typography.h6.fontSize,
-          fontWeight: theme.typography.fontWeightBold,
-          "&:last-child": {
+    },
+    MuiAlertTitle: {
+      styleOverrides: {
+        root: {
+          marginBlockStart: 0,
+          marginBlockEnd: odysseyTokens.Spacing2,
+          lineHeight: odysseyTokens.TypographyLineHeightHeading6,
+          fontSize: odysseyTokens.TypographySizeHeading6,
+          fontWeight: odysseyTokens.TypographyWeightHeading,
+          fontFamily: odysseyTokens.TypographyFamilyHeading,
+          [`&: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
     },
-    styleOverrides: {
-      clearIndicator: _ref6 => {
-        let {
-          theme
-        } = _ref6;
-        return {
-          marginRight: "unset",
-          padding: theme.spacing(1)
-        };
-      },
-      endAdornment: _ref7 => {
-        let {
-          theme,
-          ownerState
-        } = _ref7;
-        return {
-          display: "flex",
-          gap: theme.spacing(1),
-          top: `calc(${theme.spacing(2)} - ${theme.mixins.borderWidth})`,
-          right: theme.spacing(2),
-          maxHeight: "unset",
-          alignItems: "center",
-          whiteSpace: "nowrap",
-          color: theme.palette.action.active,
-          ...(ownerState.disabled === true && {
-            display: "none"
-          }),
-          ...(ownerState.readOnly === true && {
-            display: "none"
-          })
-        };
+    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
       },
-      loading: _ref8 => {
-        let {
-          theme
-        } = _ref8;
-        return {
-          paddingBlock: theme.spacing(3),
-          paddingInline: theme.spacing(4)
-        };
-      },
-      popupIndicator: _ref9 => {
-        let {
-          theme
-        } = _ref9;
-        return {
-          padding: theme.spacing(1),
+      styleOverrides: {
+        clearIndicator: {
+          marginRight: "unset",
+          padding: odysseyTokens.Spacing1
+        },
+        endAdornment: _ref5 => {
+          let {
+            ownerState
+          } = _ref5;
+          return {
+            display: "flex",
+            gap: odysseyTokens.Spacing1,
+            top: "unset",
+            right: "unset",
+            insetBlockStart: odysseyTokens.Spacing2,
+            insetInlineEnd: odysseyTokens.Spacing2,
+            maxHeight: "unset",
+            alignItems: "center",
+            whiteSpace: "nowrap",
+            color: odysseyTokens.TypographyColorSubordinate,
+            ...(ownerState.disabled === true && {
+              display: "none"
+            }),
+            ...(ownerState.readOnly === true && {
+              display: "none"
+            })
+          };
+        },
+        listbox: {
+          paddingBlock: odysseyTokens.Spacing2,
+          paddingInline: odysseyTokens.Spacing2,
+          borderRadius: odysseyTokens.BorderRadiusMain
+        },
+        loading: {
+          paddingBlock: odysseyTokens.Spacing3,
+          paddingInline: odysseyTokens.Spacing4
+        },
+        option: {
+          paddingBlock: odysseyTokens.Spacing3,
+          borderRadius: odysseyTokens.BorderRadiusTight
+        },
+        popupIndicator: {
+          padding: odysseyTokens.Spacing1,
           marginRight: "unset"
-        };
-      },
-      inputRoot: _ref10 => {
-        let {
-          theme,
-          ownerState
-        } = _ref10;
-        return {
-          ...(ownerState.readOnly === true && {
-            backgroundColor: theme.palette.grey[50],
-            [`&:not(:hover)`]: {
-              borderColor: "transparent"
-            }
-          })
-        };
-      }
-    }
-  },
-  MuiBackdrop: {
-    styleOverrides: {
-      root: _ref11 => {
-        let {
-          ownerState
-        } = _ref11;
-        return {
-          backgroundColor: "rgba(29,29,33,0.75)",
-          ...(ownerState.invisible === true && {
-            backgroundColor: "transparent"
-          })
-        };
+        },
+        inputRoot: _ref6 => {
+          let {
+            ownerState
+          } = _ref6;
+          return {
+            ...(ownerState.readOnly === true && {
+              backgroundColor: odysseyTokens.HueNeutral50,
+              [`&:not(:hover)`]: {
+                borderColor: "transparent"
+              }
+            })
+          };
+        }
       }
-    }
-  },
-  MuiButton: {
-    defaultProps: {
-      variant: "primary",
-      disableElevation: true
     },
-    variants: [{
-      props: {
-        variant: "primary"
-      },
-      style: _ref12 => {
-        let {
-          theme
-        } = _ref12;
-        return {
-          fontWeight: 600,
-          color: theme.palette.common.white,
-          borderColor: "transparent",
-          backgroundColor: theme.palette.primary.main,
-          "&:hover, &:focus-visible": {
-            backgroundColor: theme.palette.primary.dark
-          },
-          "&:active": {
-            backgroundColor: theme.palette.primary.main
-          },
-          "&:disabled": {
-            color: theme.palette.common.white,
-            backgroundColor: theme.palette.primary.light,
-            pointerEvents: "initial"
-          }
-        };
-      }
-    }, {
-      props: {
-        variant: "secondary"
-      },
-      style: _ref13 => {
-        let {
-          theme
-        } = _ref13;
-        return {
-          backgroundColor: theme.palette.grey[50],
-          borderColor: theme.palette.grey[200],
-          color: theme.palette.text.primary,
-          "&:hover, &:focus-visible": {
-            backgroundColor: theme.palette.primary.lighter,
-            borderColor: theme.palette.primary.light,
-            color: theme.palette.primary.main
-          },
-          "&:active": {
-            borderColor: theme.palette.primary.main
-          },
-          "&:disabled": {
-            borderColor: theme.palette.grey[100],
-            backgroundColor: theme.palette.grey[100],
-            color: theme.palette.grey[500]
-          }
-        };
-      }
-    }, {
-      props: {
-        variant: "danger"
-      },
-      style: _ref14 => {
-        let {
-          theme
-        } = _ref14;
-        return {
-          backgroundColor: theme.palette.error.main,
-          color: theme.palette.common.white,
-          borderColor: "transparent",
-          "&:hover": {
-            backgroundColor: theme.palette.error.dark
-          },
-          "&:focus-visible": {
-            boxShadow: `0 0 0 2px ${theme.palette.background.default}, 0 0 0 4px ${theme.palette.error.main}`,
-            backgroundColor: theme.palette.error.dark
-          },
-          "&:active": {
-            backgroundColor: theme.palette.error.main
-          },
-          "&:disabled": {
-            color: theme.palette.common.white,
-            backgroundColor: theme.palette.error.light
-          }
-        };
-      }
-    }, {
-      props: {
-        variant: "floating"
-      },
-      style: _ref15 => {
-        let {
-          theme
-        } = _ref15;
-        return {
-          backgroundColor: "transparent",
-          color: theme.palette.text.primary,
-          borderColor: "transparent",
-          "&:hover, &:focus-visible": {
-            backgroundColor: "rgba(29, 29, 33, 0.1)",
-            borderColor: "transparent"
-          },
-          "&:active": {
-            backgroundColor: "rgba(29, 29, 33, 0.2)",
-            borderColor: "transparent"
-          },
-          "&:disabled": {
-            backgroundColor: "transparent",
-            color: theme.palette.text.secondary,
-            borderColor: "transparent"
-          }
-        };
-      }
-    }, {
-      props: {
-        size: "small"
-      },
-      style: _ref16 => {
-        let {
-          theme
-        } = _ref16;
-        return {
-          paddingBlock: `calc(${theme.spacing(2)} - 1px)`,
-          paddingInline: `calc(${theme.spacing(2)} - 1px)`,
-          fontSize: "1rem"
-        };
-      }
-    }, {
-      props: {
-        size: "large"
-      },
-      style: _ref17 => {
-        let {
-          theme
-        } = _ref17;
-        return {
-          paddingBlock: `calc(${theme.spacing(4)} - 1px)`,
-          paddingInline: `calc(${theme.spacing(4)} - 1px)`
-        };
-      }
-    }, {
-      props: {
-        fullWidth: true
-      },
-      style: _ref18 => {
-        let {
-          theme
-        } = _ref18;
-        return {
-          display: "block",
-          width: "100%",
-          marginBlock: "0",
-          marginInline: "0",
-          "&:not(:last-child)": {
-            marginBlockEnd: theme.spacing(4)
-          }
-        };
+    MuiBackdrop: {
+      styleOverrides: {
+        root: _ref7 => {
+          let {
+            ownerState
+          } = _ref7;
+          return {
+            backgroundColor: "rgba(29,29,33,0.75)",
+            ...(ownerState.invisible === true && {
+              backgroundColor: "transparent"
+            })
+          };
+        }
       }
-    }, {
-      props: {
-        children: ""
+    },
+    MuiButton: {
+      defaultProps: {
+        variant: "primary",
+        disableElevation: true
       },
-      style: {
-        minWidth: "auto",
-        [`.${buttonClasses.endIcon}, .${buttonClasses.startIcon}`]: {
-          margin: "0"
+      styleOverrides: {
+        root: _ref8 => {
+          let {
+            ownerState
+          } = _ref8;
+          return {
+            minWidth: "unset",
+            paddingBlock: odysseyTokens.Spacing3,
+            paddingInline: odysseyTokens.Spacing4,
+            display: "inline-flex",
+            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.TypographyWeightBodyBold,
+            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.variant === "primary" && {
+              color: odysseyTokens.HueNeutralWhite,
+              backgroundColor: odysseyTokens.PalettePrimaryMain,
+              "&:hover": {
+                backgroundColor: odysseyTokens.PalettePrimaryDark
+              },
+              "&:active": {
+                backgroundColor: odysseyTokens.PalettePrimaryDarker
+              },
+              "&:disabled": {
+                color: odysseyTokens.PalettePrimaryLight,
+                backgroundColor: odysseyTokens.HueBlue100
+              }
+            }),
+            ...(ownerState.variant === "secondary" && {
+              backgroundColor: odysseyTokens.HueBlue100,
+              color: odysseyTokens.PalettePrimaryDark,
+              "&:hover": {
+                backgroundColor: odysseyTokens.HueBlue200,
+                color: odysseyTokens.HueBlue800
+              },
+              "&:active": {
+                backgroundColor: odysseyTokens.PalettePrimaryLight,
+                color: odysseyTokens.HueBlue800
+              },
+              "&:disabled": {
+                backgroundColor: odysseyTokens.HueNeutral100,
+                color: odysseyTokens.TypographyColorDisabled
+              }
+            }),
+            ...(ownerState.variant === "tertiary" && {
+              backgroundColor: odysseyTokens.HueNeutral100,
+              color: odysseyTokens.HueNeutral700,
+              "&:hover": {
+                backgroundColor: odysseyTokens.HueNeutral200,
+                color: odysseyTokens.HueNeutral800
+              },
+              "&:active": {
+                backgroundColor: odysseyTokens.HueNeutral300,
+                color: odysseyTokens.HueNeutral800
+              },
+              "&:disabled": {
+                backgroundColor: odysseyTokens.HueNeutral100,
+                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": {
+                backgroundColor: odysseyTokens.PaletteDangerDarker
+              },
+              "&:disabled": {
+                color: odysseyTokens.PaletteDangerLight,
+                backgroundColor: odysseyTokens.HueRed100
+              }
+            }),
+            ...(ownerState.variant === "floating" && {
+              backgroundColor: "transparent",
+              color: odysseyTokens.TypographyColorBody,
+              "&:hover": {
+                backgroundColor: odysseyTokens.HueNeutral100
+              },
+              "&:active": {
+                backgroundColor: odysseyTokens.HueNeutral200
+              },
+              "&:disabled": {
+                backgroundColor: "transparent",
+                color: odysseyTokens.TypographyColorDisabled
+              }
+            }),
+            ...(ownerState.size === "small" && {
+              paddingBlock: odysseyTokens.Spacing2,
+              paddingInline: odysseyTokens.Spacing3,
+              fontSize: odysseyTokens.TypographySizeBody
+            }),
+            ...(ownerState.size === "large" && {
+              paddingBlock: odysseyTokens.Spacing4,
+              paddingInline: odysseyTokens.Spacing4
+            }),
+            ...(ownerState.fullWidth === true && {
+              display: "block",
+              width: "100%",
+              marginBlock: "0",
+              marginInline: "0",
+              "&:not(:last-child)": {
+                marginBlockEnd: odysseyTokens.Spacing4
+              }
+            }),
+            ...(ownerState.children === "" && {
+              minWidth: "auto",
+              padding: odysseyTokens.Spacing3,
+              [`.${buttonClasses.endIcon}, .${buttonClasses.startIcon}`]: {
+                margin: "0"
+              },
+              ...(ownerState.size === "small" && {
+                padding: odysseyTokens.Spacing2
+              })
+            })
+          };
+        },
+        endIcon: _ref9 => {
+          let {
+            ownerState
+          } = _ref9;
+          return {
+            display: "inline-flex",
+            margin: 0,
+            marginInlineStart: odysseyTokens.Spacing2,
+            ...(ownerState.children === undefined && {
+              marginInlineStart: 0
+            })
+          };
+        },
+        startIcon: _ref10 => {
+          let {
+            ownerState
+          } = _ref10;
+          return {
+            display: "inline-flex",
+            margin: 0,
+            marginInlineEnd: odysseyTokens.Spacing2,
+            ...(ownerState.children === undefined && {
+              marginInlineEnd: 0
+            })
+          };
         }
       }
-    }],
-    styleOverrides: {
-      root: _ref19 => {
-        let {
-          theme
-        } = _ref19;
-        return {
-          fontWeight: 600,
-          minWidth: "unset",
-          padding: `calc(${theme.spacing(3)} - 1px) ${theme.spacing(3)}`,
-          display: "inline-flex",
-          position: "relative",
-          marginBlock: "0",
-          marginInline: "0",
-          transitionProperty: "color, background-color, border-color, box-shadow",
-          transitionDuration: "100ms",
-          transitionTimingFunction: "linear",
-          borderWidth: theme.mixins.borderWidth,
-          borderStyle: theme.mixins.borderStyle,
-          borderRadius: theme.mixins.borderRadius,
-          fontSize: theme.typography.body1.fontSize,
-          lineHeight: theme.typography.ui.lineHeight,
-          whiteSpace: "nowrap",
-          ".MuiButton-root + &": {
-            marginInlineStart: theme.spacing(2)
-          },
-          "&:focus-visible": {
-            boxShadow: `0 0 0 2px ${theme.palette.background.default}, 0 0 0 4px ${theme.palette.primary.main}`,
-            outline: "2px solid transparent",
-            outlineOffset: "1px"
-          },
-          "&:disabled": {
-            cursor: "not-allowed",
-            pointerEvents: "initial"
-          },
-          "&:disabled:active": {
-            pointerEvents: "none"
-          },
-          [`.${buttonClasses.startIcon}, .${buttonClasses.endIcon}`]: {
-            "& > *:nth-of-type(1)": {
-              fontSize: `${theme.typography.ui.lineHeight}em`
-            }
-          }
-        };
-      },
-      endIcon: _ref20 => {
-        let {
-          theme,
-          ownerState
-        } = _ref20;
-        return {
-          display: "inline-flex",
-          margin: 0,
-          marginInlineStart: theme.spacing(2),
-          ...(ownerState.children === undefined && {
-            marginInlineStart: 0
-          })
-        };
-      },
-      startIcon: _ref21 => {
-        let {
-          theme,
-          ownerState
-        } = _ref21;
-        return {
-          display: "inline-flex",
-          margin: 0,
-          marginInlineEnd: theme.spacing(2),
-          ...(ownerState.children === undefined && {
-            marginInlineEnd: 0
-          })
-        };
+    },
+    MuiButtonBase: {
+      defaultProps: {
+        disableRipple: true
       }
-    }
-  },
-  MuiButtonBase: {
-    defaultProps: {
-      disableRipple: true
-    }
-  },
-  MuiCheckbox: {
-    defaultProps: {
-      size: "small",
-      icon: _jsx(_Fragment, {}),
-      checkedIcon: _jsx(CheckIcon, {}),
-      indeterminateIcon: _jsx(SubtractIcon, {})
     },
-    styleOverrides: {
-      root: _ref22 => {
-        let {
-          theme
-        } = _ref22;
-        return {
-          width: `${theme.typography.ui.lineHeight}em`,
-          height: `${theme.typography.ui.lineHeight}em`,
-          borderRadius: theme.mixins.borderRadius,
-          borderWidth: theme.mixins.borderWidth,
-          borderStyle: theme.mixins.borderStyle,
-          borderColor: theme.palette.grey[500],
-          padding: 0,
-          boxShadow: `0 0 0 0 transparent`,
-          transition: theme.transitions.create(["border-color", "background-color", "box-shadow"], {
-            duration: theme.transitions.duration.short
-          }),
-          ".MuiSvgIcon-root": {
-            color: theme.palette.common.white,
-            transition: theme.transitions.create(["color"], {
-              duration: theme.transitions.duration.short
-            })
-          },
-          "&.Mui-checked": {
-            backgroundColor: theme.palette.primary.main,
-            borderColor: theme.palette.primary.main,
-            ".MuiFormControlLabel-root:hover > &": {
-              backgroundColor: theme.palette.primary.dark,
-              borderColor: theme.palette.primary.dark
-            }
-          },
-          ".MuiFormControlLabel-root:hover > &": {
-            backgroundColor: "transparent",
-            borderColor: theme.palette.grey[900]
-          },
-          ".Mui-error:not(.Mui-valid):hover > &": {
-            borderColor: theme.palette.error.dark,
-            "&.Mui-checked": {
-              backgroundColor: theme.palette.error.dark,
-              borderColor: theme.palette.error.dark
-            }
-          },
-          ".Mui-error:not(.Mui-valid) > &": {
-            borderColor: theme.palette.error.main,
+    MuiCheckbox: {
+      defaultProps: {
+        size: "small",
+        icon: _jsx(_Fragment, {}),
+        checkedIcon: _jsx(CheckIcon, {}),
+        indeterminateIcon: _jsx(SubtractIcon, {})
+      },
+      styleOverrides: {
+        root: _ref11 => {
+          let {
+            theme
+          } = _ref11;
+          return {
+            width: `${odysseyTokens.TypographyLineHeightUi}em`,
+            height: `${odysseyTokens.TypographyLineHeightUi}em`,
+            borderRadius: odysseyTokens.BorderRadiusTight,
+            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
+            }),
+            [`.${svgIconClasses.root}`]: {
+              color: odysseyTokens.HueNeutralWhite,
+              transition: theme.transitions.create(["color"], {
+                duration: odysseyTokens.TransitionDurationMain
+              })
+            },
             "&.Mui-checked": {
-              backgroundColor: theme.palette.error.main,
-              borderColor: theme.palette.error.main
+              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-focusVisible": {
-              boxShadow: `0 0 0 2px ${theme.palette.background.default}, 0 0 0 4px ${theme.palette.error.main}`
-            }
-          },
-          "&.Mui-focusVisible": {
-            borderColor: theme.palette.grey[900],
-            boxShadow: `0 0 0 2px ${theme.palette.background.default}, 0 0 0 4px ${theme.palette.primary.main}`,
-            outline: "2px solid transparent",
-            outlineOffset: "1px"
-          },
-          "&.Mui-disabled": {
-            backgroundColor: theme.palette.grey[50],
-            borderColor: theme.palette.grey[300],
             ".Mui-error:not(.Mui-valid) > &": {
-              backgroundColor: theme.palette.grey[50],
-              borderColor: theme.palette.grey[300]
+              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"
             },
-            ".MuiSvgIcon-root": {
-              color: theme.palette.common.black
+            "&.Mui-disabled": {
+              backgroundColor: odysseyTokens.HueNeutral50,
+              borderColor: odysseyTokens.HueNeutral300,
+              ".Mui-error:not(.Mui-valid) > &": {
+                backgroundColor: odysseyTokens.HueNeutral50,
+                borderColor: odysseyTokens.HueNeutral300
+              },
+              [`.${svgIconClasses.root}`]: {
+                color: odysseyTokens.HueNeutral900
+              }
             }
-          }
-        };
+          };
+        }
       }
-    }
-  },
-  MuiChip: {
-    defaultProps: {
-      deleteIcon: _jsx(CloseCircleFilledIcon, {})
     },
-    styleOverrides: {
-      root: _ref23 => {
-        let {
-          theme,
-          ownerState
-        } = _ref23;
-        return {
-          height: "auto",
-          paddingBlock: theme.spacing(2),
-          paddingInline: theme.spacing(3),
-          fontSize: theme.typography.body1.fontSize,
-          lineHeight: theme.typography.ui.lineHeight,
-          borderRadius: "1.5em",
-          backgroundColor: theme.palette.grey[100],
-          ...(ownerState.onDelete && {
-            paddingInlineEnd: theme.spacing(2)
-          }),
-          [`&.${chipClasses.disabled}`]: {
-            opacity: 1,
-            pointerEvents: "none",
-            backgroundColor: theme.palette.grey[50],
-            color: theme.palette.text.secondary
-          },
-          ...(ownerState.clickable && {
-            "&:hover": {
-              backgroundColor: theme.palette.grey[200]
-            },
-            [`&.${chipClasses.focusVisible}`]: {
-              backgroundColor: theme.palette.grey[200],
-              outlineColor: theme.palette.primary.main,
-              outlineOffset: "2px",
-              outlineStyle: "solid",
-              outlineWidth: "2px"
-            },
-            "&:active": {
-              boxShadow: "none",
-              backgroundColor: theme.palette.grey[300]
-            }
-          }),
-          ...(ownerState.variant === "status" && {
-            paddingBlock: 0,
-            paddingInline: 0,
-            borderRadius: 0,
-            backgroundColor: "transparent",
-            color: theme.palette.text.primary,
-            "&::before": {
-              content: "''",
-              width: ".57em",
-              height: ".57em",
-              marginInlineEnd: theme.spacing(2),
-              borderRadius: "100%",
-              backgroundColor: theme.palette.text.secondary
+    MuiChip: {
+      defaultProps: {
+        deleteIcon: _jsx(CloseCircleFilledIcon, {})
+      },
+      styleOverrides: {
+        root: _ref12 => {
+          let {
+            ownerState
+          } = _ref12;
+          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",
+              backgroundColor: odysseyTokens.HueNeutral50,
+              color: odysseyTokens.TypographyColorDisabled
             },
-            [`&.${chipClasses.colorError}`]: {
-              "&::before": {
-                backgroundColor: theme.palette.error.main
+            ...(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
             },
-            [`&.${chipClasses.colorSuccess}`]: {
+            ...(ownerState.variant === "lamp" && {
+              paddingBlock: 0,
+              paddingInline: 0,
+              borderRadius: 0,
+              border: 0,
+              backgroundColor: "transparent",
+              color: odysseyTokens.TypographyColorBody,
               "&::before": {
-                backgroundColor: theme.palette.success.main
+                content: "''",
+                width: ".64em",
+                height: ".64em",
+                marginInlineEnd: odysseyTokens.Spacing2,
+                borderRadius: "100%",
+                backgroundColor: "transparent",
+                borderColor: odysseyTokens.TypographyColorBody,
+                borderWidth: odysseyTokens.BorderWidthHeavy,
+                borderStyle: odysseyTokens.BorderStyleMain
+              },
+              [`&.${chipClasses.colorError}`]: {
+                "&::before": {
+                  border: 0,
+                  backgroundColor: odysseyTokens.PaletteDangerMain
+                }
+              },
+              [`&.${chipClasses.colorSuccess}`]: {
+                "&::before": {
+                  border: 0,
+                  backgroundColor: odysseyTokens.PaletteSuccessMain
+                }
+              },
+              [`&.${chipClasses.colorWarning}`]: {
+                "&::before": {
+                  border: 0,
+                  backgroundColor: odysseyTokens.HueYellow200
+                }
               }
-            },
-            [`&.${chipClasses.colorWarning}`]: {
+            }),
+            ...(ownerState.variant === "pill" && {
+              paddingBlock: odysseyTokens.Spacing1,
+              paddingInline: odysseyTokens.Spacing2,
+              borderRadius: odysseyTokens.BorderRadiusMain,
+              border: 0,
+              fontWeight: odysseyTokens.TypographyWeightHeadingBold,
+              lineHeight: odysseyTokens.TypographyLineHeightOverline,
+              backgroundColor: odysseyTokens.HueNeutral50,
+              color: odysseyTokens.TypographyColorSubordinate,
+              fontSize: odysseyTokens.TypographySizeSubordinate,
               "&::before": {
-                backgroundColor: theme.palette.warning.main
+                content: "''",
+                width: ".64em",
+                height: ".64em",
+                marginInlineEnd: odysseyTokens.Spacing1,
+                borderRadius: "100%",
+                backgroundColor: odysseyTokens.HueNeutral600
+              },
+              [`&.${chipClasses.colorError}`]: {
+                backgroundColor: odysseyTokens.PaletteDangerLighter,
+                color: odysseyTokens.TypographyColorDanger,
+                "&::before": {
+                  backgroundColor: odysseyTokens.PaletteDangerMain
+                }
+              },
+              [`&.${chipClasses.colorSuccess}`]: {
+                backgroundColor: odysseyTokens.PaletteSuccessLighter,
+                color: odysseyTokens.TypographyColorSuccess,
+                "&::before": {
+                  backgroundColor: odysseyTokens.PaletteSuccessMain
+                }
+              },
+              [`&.${chipClasses.colorWarning}`]: {
+                backgroundColor: odysseyTokens.PaletteWarningLighter,
+                color: odysseyTokens.TypographyColorWarning,
+                "&::before": {
+                  backgroundColor: odysseyTokens.HueYellow200
+                }
               }
+            }),
+            [`.${inputBaseClasses.root}.${inputBaseClasses.disabled} &`]: {
+              backgroundColor: odysseyTokens.HueNeutral200
             }
-          }),
-          [`.${inputBaseClasses.root}.${inputBaseClasses.disabled} &`]: {
-            backgroundColor: theme.palette.grey[200]
-          }
-        };
-      },
-      label: {
-        padding: 0
-      },
-      deleteIcon: _ref24 => {
-        let {
-          theme
-        } = _ref24;
-        return {
+          };
+        },
+        label: {
+          padding: 0
+        },
+        deleteIcon: {
           WebkitTapHighlightColor: "transparent",
-          color: theme.palette.text.secondary,
+          color: odysseyTokens.HueNeutral500,
           fontSize: "1em",
           cursor: "pointer",
           margin: "0",
-          marginInlineStart: theme.spacing(2),
+          marginInlineStart: odysseyTokens.Spacing2,
           "&:hover": {
-            color: theme.palette.text.primary
+            color: odysseyTokens.HueNeutral600
           },
           [`.${inputBaseClasses.root}.${inputBaseClasses.disabled} &`]: {
             display: "none"
           }
-        };
+        }
       }
-    }
-  },
-  MuiCircularProgress: {
-    defaultProps: {
-      size: "1.14285714rem",
-      thickness: 8,
-      color: "primary",
-      disableShrink: false,
-      variant: "indeterminate"
     },
-    styleOverrides: {
-      root: _ref25 => {
-        let {
-          theme,
-          ownerState
-        } = _ref25;
-        return {
-          ...(ownerState.color !== "inherit" && {
-            color: theme.palette.primary.dark
-          })
-        };
+    MuiCircularProgress: {
+      defaultProps: {
+        size: odysseyTokens.TypographyScale2,
+        thickness: 8,
+        color: "primary",
+        disableShrink: false,
+        variant: "indeterminate"
       },
-      circle: _ref26 => {
-        let {
-          ownerState
-        } = _ref26;
-        return {
-          ...(ownerState.variant === "indeterminate" && {
-            strokeDasharray: "160%, 360%"
-          })
-        };
+      styleOverrides: {
+        root: _ref13 => {
+          let {
+            ownerState
+          } = _ref13;
+          return {
+            ...(ownerState.color !== "inherit" && {
+              color: odysseyTokens.PalettePrimaryDark
+            })
+          };
+        },
+        circle: _ref14 => {
+          let {
+            ownerState
+          } = _ref14;
+          return {
+            ...(ownerState.variant === "indeterminate" && {
+              strokeDasharray: "160%, 360%"
+            })
+          };
+        }
       }
-    }
-  },
-  MuiCssBaseline: {
-    styleOverrides: themeParam => `
+    },
+    MuiCssBaseline: {
+      styleOverrides: themeParam => `
       html {
         font-size: calc((${themeParam.typography.fontSize} / 16) * 100%);
       }
     `
-  },
-  MuiScopedCssBaseline: {
-    styleOverrides: {
-      root: _ref27 => {
-        let {
-          theme
-        } = _ref27;
-        return {
+    },
+    MuiScopedCssBaseline: {
+      styleOverrides: {
+        root: {
           abbr: {
-            borderBottomWidth: "1px",
+            borderBottomWidth: odysseyTokens.BorderWidthMain,
             borderBottomStyle: "dashed",
-            borderBottomColor: theme.palette.primary.dark,
+            borderBottomColor: odysseyTokens.HueNeutral700,
             textDecoration: "none"
           },
           address: {
-            maxWidth: theme.mixins.maxWidth,
+            maxWidth: odysseyTokens.TypographyLineLengthMax,
             marginBlockStart: 0,
-            marginBlockEnd: theme.spacing(4),
+            marginBlockEnd: odysseyTokens.Spacing4,
             marginInline: 0,
+            fontStyle: "normal",
             "&:last-child": {
               marginBlockEnd: 0
             }
           },
           blockquote: {
-            maxWidth: theme.mixins.maxWidth,
+            maxWidth: odysseyTokens.TypographyLineLengthMax,
             marginBlockStart: 0,
-            marginBlockEnd: theme.spacing(4),
+            marginBlockEnd: odysseyTokens.Spacing4,
             marginInline: 0,
             paddingBlock: 0,
-            paddingInlineStart: theme.spacing(2),
+            paddingInlineStart: odysseyTokens.Spacing4,
             paddingInlineEnd: 0,
             borderInlineStartWidth: "3px",
-            borderInlineStartStyle: "solid",
-            borderInlineStartColor: theme.palette.grey[200],
+            borderInlineStartStyle: odysseyTokens.BorderStyleMain,
+            borderInlineStartColor: odysseyTokens.HueNeutral200,
             "&:last-child": {
               marginBlockEnd: 0
             }
           },
           cite: {
-            fontStyle: "italic"
+            fontStyle: "normal"
           },
           code: {
-            fontFamily: "'Inconsolata', 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', 'Courier', monospace"
+            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: theme.palette.error.light,
+            backgroundColor: odysseyTokens.PaletteDangerHighlight,
             "&::before, &::after": {
               clip: "rect(0 0 0 0)",
               clipPath: "inset(50%)",
@@ -791,18 +822,18 @@ export const components = {
             }
           },
           details: {
-            fontSize: theme.typography.body1.fontSize
+            fontSize: odysseyTokens.TypographySizeBody
           },
           dfn: {
             fontStyle: "italic"
           },
           dl: {
             display: "grid",
-            gridGap: `${theme.spacing(2)} ${theme.spacing(4)}`,
+            gridGap: `${odysseyTokens.Spacing2} ${odysseyTokens.Spacing4}`,
             gridTemplateColumns: "repeat(2, minmax(min-content, max-content))",
-            maxWidth: theme.mixins.maxWidth,
+            maxWidth: odysseyTokens.TypographyLineLengthMax,
             marginBlockStart: 0,
-            marginBlockEnd: theme.spacing(4),
+            marginBlockEnd: odysseyTokens.Spacing4,
             marginInline: 0,
             padding: 0,
             "&:last-child": {
@@ -810,10 +841,11 @@ export const components = {
             },
             dt: {
               gridColumn: 1,
-              fontWeight: 600
+              fontWeight: odysseyTokens.TypographyWeightBodyBold
             },
             dd: {
               gridColumn: 2,
+              marginInlineStart: odysseyTokens.Spacing0,
               fontWeight: 400
             }
           },
@@ -825,31 +857,31 @@ export const components = {
           },
           figure: {
             display: "grid",
-            gridGap: theme.spacing(2),
+            gridGap: odysseyTokens.Spacing2,
             gridTemplateColumns: "minmax(min-content, max-content)",
             justifyContent: "start",
             justifyItems: "start",
             marginBlockStart: 0,
-            marginBlockEnd: theme.spacing(4),
+            marginBlockEnd: odysseyTokens.Spacing4,
             marginInline: 0,
             "&:last-child": {
               marginBlockEnd: 0
             }
           },
           "figcaption:not([class])": {
-            color: theme.palette.text.secondary,
-            fontSize: theme.typography.body1.fontSize
+            color: odysseyTokens.TypographyColorSubordinate,
+            fontSize: odysseyTokens.TypographySizeSubordinate
           },
           hr: {
-            marginBlock: theme.spacing(2),
+            marginBlock: odysseyTokens.Spacing2,
             marginInline: 0,
-            borderWidth: "1px",
-            borderStyle: "solid",
-            borderColor: theme.palette.grey[200]
+            borderWidth: odysseyTokens.BorderWidthMain,
+            borderStyle: odysseyTokens.BorderStyleMain,
+            borderColor: odysseyTokens.HueNeutral200
           },
           ins: {
             display: "inline-block",
-            backgroundColor: theme.palette.success.light,
+            backgroundColor: odysseyTokens.PaletteSuccessHighlight,
             "&::before, &::after": {
               clip: "rect(0 0 0 0)",
               clipPath: "inset(50%)",
@@ -868,21 +900,21 @@ export const components = {
           },
           kbd: {
             display: "inline-block",
-            minWidth: `calc(${theme.typography.subtitle1.fontSize} * ${theme.typography.h5.lineHeight})`,
-            borderStyle: theme.mixins.borderStyle,
-            borderWidth: theme.mixins.borderWidth,
-            borderRadius: theme.mixins.borderRadius,
-            borderColor: theme.palette.grey[200],
-            backgroundColor: theme.palette.grey[50],
-            padding: `calc(${theme.spacing(1)} / 2) ${theme.spacing(1)}`,
+            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: theme.typography.subtitle1.fontSize,
-            fontWeight: theme.typography.fontWeightRegular,
-            lineHeight: theme.typography.h5.lineHeight,
+            fontSize: odysseyTokens.TypographySizeSubordinate,
+            fontWeight: odysseyTokens.Spacing5,
+            lineHeight: odysseyTokens.TypographyLineHeightHeading5,
             boxShadow: `0 1px 1px 0 hsla(240, 6%, 12%, 0.05)`
           },
           mark: {
-            backgroundColor: theme.palette.warning.light,
+            backgroundColor: odysseyTokens.PaletteWarningHighlight,
             "&::before, &::after": {
               clip: "rect(0 0 0 0)",
               clipPath: "inset(50%)",
@@ -900,9 +932,9 @@ export const components = {
             }
           },
           "p:not([class])": {
-            maxWidth: theme.mixins.maxWidth,
+            maxWidth: odysseyTokens.TypographyLineLengthMax,
             marginBlockStart: 0,
-            marginBlockEnd: theme.spacing(4),
+            marginBlockEnd: odysseyTokens.Spacing4,
             "&:last-child": {
               marginBlockEnd: 0
             }
@@ -910,18 +942,24 @@ export const components = {
           pre: {
             marginInline: 0,
             marginBlockStart: 0,
-            marginBlockEnd: theme.spacing(4),
-            fontFamily: "'Inconsolata', 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', 'Courier', monospace",
+            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: theme.mixins.maxWidth,
+            maxWidth: odysseyTokens.TypographyLineLengthMax,
             marginBlockStart: 0,
-            marginBlockEnd: theme.spacing(4),
+            marginBlockEnd: odysseyTokens.Spacing4,
             paddingInlineStart: "2ch",
             ol: {
               listStyleType: "lower-alpha",
@@ -934,11 +972,11 @@ export const components = {
             }
           },
           "li:not([class])": {
-            marginBlockEnd: theme.spacing(2),
-            paddingInlineStart: theme.spacing(1),
+            marginBlockEnd: odysseyTokens.Spacing2,
+            paddingInlineStart: odysseyTokens.Spacing1,
             "ul, ol": {
-              marginBlockStart: theme.spacing(2),
-              marginInlineStart: `calc(${theme.spacing(6)} - 2ch)`
+              marginBlockStart: odysseyTokens.Spacing2,
+              marginInlineStart: `calc(${odysseyTokens.Spacing6} - 2ch)`
             }
           },
           q: {
@@ -955,497 +993,438 @@ export const components = {
           },
           samp: {
             padding: "0 0.5ch",
-            backgroundColor: theme.palette.grey[50],
-            boxShadow: `0 1px 0 ${theme.palette.grey[50]}`,
-            fontSize: theme.typography.body1.fontSize,
+            backgroundColor: odysseyTokens.HueNeutral100,
+            boxShadow: `0 1px 0 ${odysseyTokens.HueNeutral50}`,
+            fontSize: odysseyTokens.TypographySizeBody,
             kbd: {
-              background: theme.palette.common.white
+              background: odysseyTokens.HueNeutralWhite
             }
           },
           small: {
-            fontSize: theme.typography.caption.fontSize
+            fontSize: odysseyTokens.TypographySizeSubordinate
+          },
+          strong: {
+            fontWeight: odysseyTokens.TypographyWeightBodyBold
           },
           sub: {
-            fontSize: theme.typography.caption.fontSize,
+            fontSize: odysseyTokens.TypographySizeSubordinate,
             lineHeight: 1,
             verticalAlign: "sub"
           },
           summary: {
-            fontSize: theme.typography.body1.fontSize,
-            fontWeight: theme.typography.fontWeightBold,
+            marginBlockEnd: odysseyTokens.Spacing2,
+            fontSize: odysseyTokens.TypographySizeBody,
+            fontWeight: odysseyTokens.TypographyWeightBodyBold,
             cursor: "default",
             "&:focus-visible": {
-              outlineColor: theme.palette.primary.main,
-              outlineOffset: "2px",
-              outlineStyle: "solid",
-              outlineWidth: "2px"
+              outlineColor: odysseyTokens.FocusOutlineColorPrimary,
+              outlineOffset: odysseyTokens.FocusOutlineOffsetMain,
+              outlineStyle: odysseyTokens.FocusOutlineStyle,
+              outlineWidth: odysseyTokens.FocusOutlineWidthMain
             }
           },
           sup: {
-            fontSize: theme.typography.caption.fontSize,
+            fontSize: odysseyTokens.TypographySizeSubordinate,
             lineHeight: 1,
             verticalAlign: "super"
           },
           var: {
             fontStyle: "italic",
-            fontWeight: theme.typography.fontWeightBold
+            fontWeight: odysseyTokens.TypographyWeightBodyBold
           }
-        };
+        }
       }
-    }
-  },
-  MuiDialog: {
-    defaultProps: {
-      scroll: "paper"
     },
-    styleOverrides: {
-      paper: _ref28 => {
-        let {
-          theme
-        } = _ref28;
-        return {
-          maxWidth: `calc(${theme.mixins.maxWidth} + (${theme.spacing(6)} * 2))`,
+    MuiDialog: {
+      defaultProps: {
+        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: _ref29 => {
-        let {
-          theme
-        } = _ref29;
-        return {
-          paddingBlockStart: theme.spacing(4),
-          paddingBlockEnd: theme.spacing(6),
-          paddingInline: theme.spacing(6)
-        };
+    },
+    MuiDialogActions: {
+      styleOverrides: {
+        root: {
+          flexWrap: "wrap",
+          gap: odysseyTokens.Spacing2,
+          paddingBlockStart: odysseyTokens.Spacing6,
+          paddingBlockEnd: odysseyTokens.Spacing6,
+          paddingInline: odysseyTokens.Spacing6,
+          "& > .${ buttonClasses.root }": {
+            margin: "0 !important"
+          }
+        }
       }
-    }
-  },
-  MuiDialogContent: {
-    styleOverrides: {
-      root: _ref30 => {
-        let {
-          theme,
-          ownerState
-        } = _ref30;
-        return {
-          padding: 0,
-          paddingBlock: theme.spacing(4),
-          paddingInline: theme.spacing(6),
-          "&:last-child": {
-            paddingBlockEnd: theme.spacing(6)
-          },
-          ...(ownerState.dividers === false && {
-            [`& + .${dialogActionsClasses.root}`]: {
-              paddingBlockStart: theme.spacing(4)
+    },
+    MuiDialogContent: {
+      styleOverrides: {
+        root: _ref15 => {
+          let {
+            ownerState
+          } = _ref15;
+          return {
+            paddingBlock: 0,
+            paddingInline: odysseyTokens.Spacing6,
+            ...(ownerState.dividers === true && {
+              paddingBlock: odysseyTokens.Spacing6,
+              color: odysseyTokens.HueNeutral600
+            }),
+            ["&:last-child"]: {
+              paddingBlockEnd: odysseyTokens.Spacing6
             }
-          })
-        };
+          };
+        }
       }
-    }
-  },
-  MuiDialogContentText: {
-    defaultProps: {
-      color: "text.primary"
     },
-    styleOverrides: {
-      root: _ref31 => {
-        let {
-          theme
-        } = _ref31;
-        return {
-          marginBlockEnd: theme.spacing(5),
+    MuiDialogContentText: {
+      styleOverrides: {
+        root: {
+          marginBlockEnd: odysseyTokens.Spacing5,
+          color: odysseyTokens.HueNeutral700,
           "&:last-child": {
             marginBlockEnd: "0"
           }
-        };
+        }
       }
-    }
-  },
-  MuiDialogTitle: {
-    defaultProps: {
-      component: "h1",
-      variant: "h5"
     },
-    styleOverrides: {
-      root: _ref32 => {
-        let {
-          theme
-        } = _ref32;
-        return {
+    MuiDialogTitle: {
+      defaultProps: {
+        component: "h1",
+        variant: "h5"
+      },
+      styleOverrides: {
+        root: {
           display: "flex",
           justifyContent: "space-between",
           alignItems: "center",
           marginBlockEnd: 0,
           padding: 0,
-          paddingBlockStart: theme.spacing(5),
-          paddingBlockEnd: theme.spacing(4),
-          paddingInline: theme.spacing(6)
-        };
+          paddingBlockStart: odysseyTokens.Spacing5,
+          paddingBlockEnd: odysseyTokens.Spacing4,
+          paddingInline: odysseyTokens.Spacing6,
+          fontFamily: odysseyTokens.TypographyFamilyHeading,
+          [`.${buttonClasses.root}`]: {
+            marginInlineEnd: `-${odysseyTokens.Spacing3}`
+          }
+        }
       }
-    }
-  },
-  MuiFormControl: {
-    defaultProps: {
-      margin: "normal"
     },
-    styleOverrides: {
-      root: _ref33 => {
-        let {
-          ownerState,
-          theme
-        } = _ref33;
-        return {
-          width: "100%",
-          maxWidth: "32rem",
-          ...(ownerState.margin === "normal" && {
-            marginTop: 0,
-            marginBottom: theme.spacing(5),
-            "&:last-child": {
-              marginBottom: 0
-            }
-          }),
-          ...(ownerState.margin === "dense" && {
-            marginTop: 0,
-            marginBottom: theme.spacing(5),
-            "&:last-child": {
-              marginBottom: 0
-            }
-          }),
-          ...(ownerState.fullWidth && {
-            maxWidth: "100%"
-          })
-        };
+    MuiFormControl: {
+      defaultProps: {
+        margin: "normal"
+      },
+      styleOverrides: {
+        root: _ref16 => {
+          let {
+            ownerState
+          } = _ref16;
+          return {
+            width: "100%",
+            maxWidth: odysseyTokens.TypographyLineLengthMax,
+            ...(ownerState.margin === "normal" && {
+              marginTop: 0,
+              marginBottom: odysseyTokens.Spacing4,
+              "&:last-child": {
+                marginBottom: 0
+              }
+            }),
+            ...(ownerState.margin === "dense" && {
+              marginTop: 0,
+              marginBottom: odysseyTokens.Spacing5,
+              "&:last-child": {
+                marginBottom: 0
+              }
+            }),
+            ...(ownerState.fullWidth && {
+              maxWidth: "100%"
+            })
+          };
+        }
       }
-    }
-  },
-  MuiFormControlLabel: {
-    styleOverrides: {
-      root: _ref34 => {
-        let {
-          theme,
-          ownerState
-        } = _ref34;
-        return {
-          marginInlineStart: 0,
-          marginInlineEnd: 0,
-          ...(ownerState.labelPlacement === "start" && {
+    },
+    MuiFormControlLabel: {
+      styleOverrides: {
+        root: _ref17 => {
+          let {
+            ownerState
+          } = _ref17;
+          return {
+            gap: odysseyTokens.Spacing2,
             marginInlineStart: 0,
-            marginInlineEnd: 0
-          }),
-          ...(ownerState.labelPlacement === "top" && {
-            marginInlineStart: 0
-          }),
-          ...(ownerState.labelPlacement === "bottom" && {
-            marginInlineStart: 0
-          }),
-          "&:not(:last-child)": {
-            marginBottom: theme.spacing(2)
-          },
-          "&.Mui-disabled": {
-            pointerEvents: "none"
-          },
-          "&:hover .MuiRadio-root, &:hover .MuiCheckbox-root": {
-            color: theme.palette.text.primary
-          },
-          "&:hover .MuiRadio-root.Mui-checked, &:hover .MuiCheckbox-root.Mui-checked": {
-            color: theme.palette.primary.dark
-          },
-          "&.Mui-error:hover .MuiRadio-root, &.Mui-error:hover .MuiCheckbox-root": {
-            color: theme.palette.error.dark
-          },
-          "&.Mui-error:hover .MuiRadio-root.Mui-checked, &.Mui-error:hover .MuiCheckbox-root.Mui-checked": {
-            color: theme.palette.error.dark
-          }
-        };
-      },
-      label: _ref35 => {
-        let {
-          theme
-        } = _ref35;
-        return {
-          "&:not(:first-child)": {
-            marginInlineStart: theme.spacing(2)
-          }
-        };
-      },
-      asterisk: () => ({
-        display: "none"
-      })
-    }
-  },
-  MuiFormHelperText: {
-    defaultProps: {
-      variant: "standard"
+            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"
+            },
+            [`&: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: {
+          gap: odysseyTokens.Spacing1
+        },
+        asterisk: () => ({
+          display: "none"
+        })
+      }
     },
-    styleOverrides: {
-      root: _ref36 => {
-        let {
-          theme
-        } = _ref36;
-        return {
-          fontSize: theme.typography.subtitle1.fontSize,
-          lineHeight: "1.33333333",
-          marginBlockStart: theme.spacing(2),
-          ".MuiFormLabel-root + &": {
-            marginBlockStart: `-${theme.spacing(1)}`,
-            color: theme.palette.text.secondary
-          },
-          marginBlockEnd: theme.spacing(2),
+    MuiFormHelperText: {
+      defaultProps: {
+        variant: "standard"
+      },
+      styleOverrides: {
+        root: {
+          fontSize: odysseyTokens.TypographySizeSubordinate,
+          lineHeight: odysseyTokens.TypographyLineHeightBody,
+          marginBlockStart: odysseyTokens.Spacing2,
+          [`.${formLabelClasses.root} + &`]: {
+            marginBlockStart: `-${odysseyTokens.Spacing1}`,
+            color: odysseyTokens.TypographyColorSubordinate
+          },
+          marginBlockEnd: odysseyTokens.Spacing2,
           "&:last-child": {
             marginBlockEnd: 0
           },
           textAlign: "start"
-        };
+        }
       }
-    }
-  },
-  MuiFormLabel: {
-    styleOverrides: {
-      root: _ref37 => {
-        let {
-          theme
-        } = _ref37;
-        return {
-          color: theme.palette.text.primary,
-          lineHeight: theme.typography.ui.lineHeight,
-          fontSize: "1rem",
-          fontWeight: 600,
-          marginBottom: theme.spacing(2),
+    },
+    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: theme.palette.text.primary
+            color: odysseyTokens.TypographyColorBody
+          },
+          "& > .MuiTypography-root": {
+            margin: "reset",
+            marginInlineStart: odysseyTokens.Spacing1
           }
-        };
+        }
       }
-    }
-  },
-  MuiIconButton: {
-    styleOverrides: {
-      edgeEnd: _ref38 => {
-        let {
-          theme
-        } = _ref38;
-        return {
-          marginInlineEnd: theme.spacing(1)
-        };
+    },
+    MuiInput: {
+      defaultProps: {
+        disableUnderline: true
       },
-      root: _ref39 => {
-        let {
-          theme
-        } = _ref39;
-        return {
-          padding: theme.spacing(1),
-          fontSize: theme.typography.body1.fontSize,
-          backgroundColor: "transparent",
-          color: theme.palette.text.primary,
-          borderColor: "transparent",
-          borderRadius: theme.mixins.borderRadius,
-          "&:hover, &:focus-visible": {
-            backgroundColor: "rgba(29, 29, 33, 0.1)",
-            borderColor: "transparent"
-          },
-          "&:focus-visible": {
-            outlineColor: theme.palette.primary.main
-          },
-          "&:active": {
-            backgroundColor: "rgba(29, 29, 33, 0.2)",
-            borderColor: "transparent"
-          },
-          "&:disabled": {
-            backgroundColor: "rgba(235, 235, 237, 0.6)",
-            color: theme.palette.text.secondary,
-            borderColor: "transparent"
+      styleOverrides: {
+        root: {
+          "label + &": {
+            marginTop: 0
           }
-        };
+        }
       }
-    }
-  },
-  MuiInput: {
-    defaultProps: {
-      disableUnderline: true
     },
-    styleOverrides: {
-      root: {
-        "label + &": {
-          marginTop: 0
+    MuiInputAdornment: {
+      styleOverrides: {
+        root: _ref18 => {
+          let {
+            ownerState
+          } = _ref18;
+          return {
+            display: "flex",
+            minWidth: "1.25em",
+            maxHeight: "unset",
+            margin: 0,
+            alignItems: "center",
+            whiteSpace: "nowrap",
+            color: odysseyTokens.TypographyColorSubordinate,
+            ...(ownerState.position === "start" && {
+              marginInlineStart: odysseyTokens.Spacing2
+            }),
+            ...(ownerState.position === "end" && {
+              marginInlineEnd: odysseyTokens.Spacing2
+            }),
+            ...(ownerState.disablePointerEvents === true && {
+              pointerEvents: "none"
+            })
+          };
         }
       }
-    }
-  },
-  MuiInputAdornment: {
-    styleOverrides: {
-      root: _ref40 => {
-        let {
-          theme,
-          ownerState
-        } = _ref40;
-        return {
-          display: "flex",
-          minWidth: "1.25em",
-          maxHeight: "unset",
-          margin: 0,
-          alignItems: "center",
-          whiteSpace: "nowrap",
-          color: theme.palette.action.active,
-          ...(ownerState.position === "start" && {
-            marginInlineStart: theme.spacing(2)
-          }),
-          ...(ownerState.position === "end" && {
-            marginInlineEnd: theme.spacing(2)
-          }),
-          ...(ownerState.disablePointerEvents === true && {
-            pointerEvents: "none"
-          })
-        };
-      }
-    }
-  },
-  MuiInputBase: {
-    defaultProps: {
-      minRows: 3,
-      required: true
     },
-    styleOverrides: {
-      root: _ref41 => {
-        let {
-          ownerState,
-          theme
-        } = _ref41;
-        return {
-          ...theme.typography.body1,
-          flex: "1",
-          width: "auto",
-          color: theme.palette.text.primary,
-          lineHeight: theme.typography.ui.lineHeight,
-          borderWidth: theme.mixins.borderWidth,
-          borderStyle: theme.mixins.borderStyle,
-          borderRadius: theme.mixins.borderRadius,
-          borderColor: theme.palette.grey[500],
-          boxShadow: `0 0 0 0 transparent`,
-          backgroundColor: theme.palette.common.white,
-          transition: theme.transitions.create(["border-color", "background-color", "box-shadow"], {
-            duration: theme.transitions.duration.short
-          }),
-          ...(ownerState.fullWidth && {
-            width: "100%"
-          }),
-          ...(ownerState.readOnly === true && {
-            borderColor: "transparent",
-            backgroundColor: theme.palette.grey[50]
-          }),
-          [`&:hover`]: {
-            borderColor: theme.palette.grey[900]
-          },
-          [`&.${inputBaseClasses.focused}`]: {
-            borderColor: theme.palette.primary.main,
-            boxShadow: `0 0 0 1px ${theme.palette.primary.main}`,
-            outline: "2px solid transparent",
-            outlineOffset: "1px"
-          },
-          [`&.${inputBaseClasses.error}`]: {
-            borderColor: theme.palette.error.main
-          },
-          [`&.${inputBaseClasses.error}:hover`]: {
-            borderColor: theme.palette.error.dark
-          },
-          [`&.${inputBaseClasses.error}.${inputBaseClasses.focused}`]: {
-            borderColor: theme.palette.error.main,
-            boxShadow: `0 0 0 1px ${theme.palette.error.main}`
-          },
-          [`&.${inputBaseClasses.disabled}`]: {
-            color: theme.palette.text.disabled,
-            borderColor: theme.palette.action.disabled,
-            pointerEvents: "auto",
-            backgroundColor: theme.palette.grey[50],
-            cursor: "not-allowed"
-          }
-        };
+    MuiInputBase: {
+      defaultProps: {
+        minRows: 3,
+        required: true
       },
-      input: _ref42 => {
-        let {
-          theme
-        } = _ref42;
-        return {
+      styleOverrides: {
+        root: _ref19 => {
+          let {
+            ownerState,
+            theme
+          } = _ref19;
+          return {
+            ...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
+            }),
+            ...(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.BorderColorDangerDark
+            },
+            [`&.${inputBaseClasses.error}.${inputBaseClasses.focused}`]: {
+              borderColor: odysseyTokens.BorderColorDangerControl,
+              boxShadow: `0 0 0 1px ${odysseyTokens.PaletteDangerMain}`
+            },
+            [`&.${inputBaseClasses.disabled}`]: {
+              color: odysseyTokens.TypographyColorDisabled,
+              borderColor: odysseyTokens.BorderColorDisabled,
+              pointerEvents: "auto",
+              backgroundColor: odysseyTokens.HueNeutral50,
+              cursor: "not-allowed"
+            }
+          };
+        },
+        input: {
           boxSizing: "border-box",
           height: "auto",
-          paddingBlock: `calc(${theme.spacing(3)} - ${theme.mixins.borderWidth})`,
-          paddingInline: theme.spacing(3),
+          paddingBlock: odysseyTokens.Spacing3,
+          paddingInline: odysseyTokens.Spacing3,
           boxShadow: "none",
           [`.${inputBaseClasses.disabled} &`]: {
             pointerEvents: "auto",
             cursor: "not-allowed"
           },
           [`.${inputAdornmentClasses.root} + &`]: {
-            paddingInlineStart: theme.spacing(2)
+            paddingInlineStart: odysseyTokens.Spacing2
           },
           [`label[data-shrink=false] + .${inputBaseClasses.formControl} &`]: {
             "&::placeholder": {
-              color: theme.palette.text.secondary,
+              color: odysseyTokens.TypographyColorSubordinate,
               opacity: "1 !important"
             }
+          },
+          [`&::-webkit-search-cancel-button`]: {
+            display: "none",
+            "-webkit-appearance": "none",
+            "-moz-appearance": "none"
+          },
+          [`&::-moz-search-cancel-button`]: {
+            display: "none",
+            "-moz-appearance": "none"
+          },
+          [`&::-ms-clear`]: {
+            display: "none"
           }
-        };
+        }
       }
-    }
-  },
-  MuiInputLabel: {
-    defaultProps: {
-      disableAnimation: true,
-      shrink: false
     },
-    styleOverrides: {
-      root: _ref43 => {
-        let {
-          ownerState
-        } = _ref43;
-        return {
-          display: "flex",
-          justifyContent: "space-between",
-          ...(ownerState.formControl && {
-            position: "initial",
-            transform: "none"
-          }),
-          ...(ownerState.variant === "outlined" && {
-            pointerEvents: "initial",
-            transform: "none",
-            maxWidth: "100%",
-            ...(ownerState.size === "small" && {
+    MuiInputLabel: {
+      defaultProps: {
+        disableAnimation: true,
+        shrink: false
+      },
+      styleOverrides: {
+        root: _ref20 => {
+          let {
+            ownerState
+          } = _ref20;
+          return {
+            display: "flex",
+            justifyContent: "space-between",
+            overflow: "unset",
+            whiteSpace: "unset",
+            ...(ownerState.formControl && {
+              position: "initial",
               transform: "none"
-            })
-          }),
-          "& > .MuiTypography-root": {
-            lineHeight: "unset"
-          }
-        };
+            }),
+            ...(ownerState.variant === "outlined" && {
+              pointerEvents: "initial",
+              transform: "none",
+              maxWidth: "100%",
+              ...(ownerState.size === "small" && {
+                transform: "none"
+              })
+            }),
+            [`& > .${typographyClasses.root}`]: {
+              lineHeight: "unset"
+            }
+          };
+        }
       }
-    }
-  },
-  MuiLink: {
-    styleOverrides: {
-      root: _ref44 => {
-        let {
-          theme
-        } = _ref44;
-        return {
-          color: theme.palette.primary.main,
+    },
+    MuiLink: {
+      styleOverrides: {
+        root: {
+          color: odysseyTokens.TypographyColorAction,
           textDecoration: "underline",
           cursor: "pointer",
+          "&:visited": {
+            color: odysseyTokens.TypographyColorAction
+          },
           "&:hover": {
-            color: theme.palette.primary.dark,
+            color: odysseyTokens.PalettePrimaryDark,
             textDecoration: "underline"
           },
           "&:focus-visible": {
-            outlineColor: theme.palette.primary.main,
-            outlineOffset: "2px",
-            outlineStyle: "solid",
-            outlineWidth: "1px"
-          },
-          "&:visited": {
-            color: theme.palette.primary.main
+            borderRadius: odysseyTokens.BorderRadiusMain,
+            outlineColor: odysseyTokens.FocusOutlineColorPrimary,
+            outlineOffset: odysseyTokens.FocusOutlineOffsetMain,
+            outlineStyle: odysseyTokens.FocusOutlineStyle,
+            outlineWidth: odysseyTokens.FocusOutlineWidthTight,
+            textDecoration: "none"
           },
           ".Link-indicator, .Link-icon": {
             display: "inline-block",
@@ -1453,721 +1432,661 @@ export const components = {
             lineHeight: 1
           },
           ".Link-indicator": {
-            marginInlineStart: theme.spacing(2)
+            marginInlineStart: odysseyTokens.Spacing2
           },
           ".Link-icon": {
-            marginInlineEnd: theme.spacing(2)
+            marginInlineEnd: odysseyTokens.Spacing2
           },
           svg: {
-            fontSize: "1rem",
+            fontSize: "1em",
             height: "1em",
             position: "relative",
-            top: "-0.0625em",
+            insetBlockStart: "-0.0625em",
             verticalAlign: "middle",
             width: "1em"
           }
-        };
-      }
-    },
-    variants: [{
-      props: {
-        variant: "monochrome"
+        }
       },
-      style: _ref45 => {
-        let {
-          theme
-        } = _ref45;
-        return {
-          color: theme.palette.text.primary,
+      variants: [{
+        props: {
+          variant: "monochrome"
+        },
+        style: {
+          color: odysseyTokens.TypographyColorBody,
           textDecoration: "underline",
-          "&:hover": {
-            color: theme.palette.text.secondary
-          },
-          "&:focus-visible": {
-            outlineColor: theme.palette.primary.main,
-            outlineOffset: "2px",
-            outlineStyle: "solid",
-            outlineWidth: "1px"
-          },
           "&:visited": {
-            color: theme.palette.text.primary
+            color: odysseyTokens.TypographyColorBody
+          },
+          "&:hover": {
+            color: odysseyTokens.TypographyColorSubordinate
           }
-        };
-      }
-    }]
-  },
-  MuiListItem: {
-    styleOverrides: {
-      root: {
-        textAlign: "start"
+        }
+      }]
+    },
+    MuiListItem: {
+      styleOverrides: {
+        root: {
+          textAlign: "start"
+        }
       }
-    }
-  },
-  MuiListSubheader: {
-    styleOverrides: {
-      root: _ref46 => {
-        let {
-          theme
-        } = _ref46;
-        return {
-          paddingBlock: theme.spacing(2),
-          paddingInline: theme.spacing(4),
-          fontSize: theme.typography.caption.fontSize,
-          fontWeight: theme.typography.fontWeightBold,
-          lineHeight: theme.typography.caption.lineHeight,
-          color: theme.palette.text.secondary,
+    },
+    MuiListSubheader: {
+      styleOverrides: {
+        root: {
+          paddingBlock: odysseyTokens.Spacing2,
+          paddingInline: odysseyTokens.Spacing4,
+          fontSize: odysseyTokens.TypographySizeSubordinate,
+          fontWeight: odysseyTokens.TypographyWeightBodyBold,
+          lineHeight: odysseyTokens.TypographyLineHeightUi,
+          color: odysseyTokens.TypographyColorSubordinate,
           textTransform: "uppercase"
-        };
+        }
       }
-    }
-  },
-  MuiMenuItem: {
-    styleOverrides: {
-      root: _ref47 => {
-        let {
-          theme,
-          ownerState
-        } = _ref47;
-        return {
-          gap: theme.spacing(2),
-          minHeight: "unset",
-          paddingBlock: theme.spacing(3),
-          "&:hover": {
-            textDecoration: "none",
-            backgroundColor: theme.palette.grey[100],
-            "@media (hover: none)": {
-              backgroundColor: "transparent"
-            }
-          },
-          [`&.${menuItemClasses.root}-destructive`]: {
-            color: theme.palette.error.main
-          },
-          [`&.${menuItemClasses.selected}`]: {
-            backgroundColor: "transparent",
-            color: theme.palette.primary.main,
+    },
+    MuiMenu: {
+      styleOverrides: {
+        list: {
+          paddingBlock: odysseyTokens.Spacing2,
+          paddingInline: odysseyTokens.Spacing2,
+          borderRadius: odysseyTokens.BorderRadiusMain
+        }
+      }
+    },
+    MuiMenuItem: {
+      styleOverrides: {
+        root: _ref21 => {
+          let {
+            ownerState
+          } = _ref21;
+          return {
+            gap: odysseyTokens.Spacing2,
+            minHeight: "unset",
+            paddingBlock: odysseyTokens.Spacing3,
+            borderRadius: odysseyTokens.BorderRadiusTight,
+            [`& .${formControlLabelClasses.root}`]: {
+              gap: "unset"
+            },
             "&:hover": {
-              backgroundColor: theme.palette.primary.lighter,
+              textDecoration: "none",
+              backgroundColor: odysseyTokens.HueNeutral100,
               "@media (hover: none)": {
-                backgroundColor: `rgba(${theme.palette.primary.main} / ${theme.palette.action.selectedOpacity})`
+                backgroundColor: "transparent"
               }
+            },
+            [`&.${menuItemClasses.root}-destructive`]: {
+              color: odysseyTokens.TypographyColorDanger
+            },
+            [`&.${menuItemClasses.selected}`]: {
+              backgroundColor: "transparent",
+              color: odysseyTokens.TypographyColorAction,
+              "&:hover": {
+                backgroundColor: odysseyTokens.PalettePrimaryLighter,
+                "@media (hover: none)": {
+                  backgroundColor: odysseyTokens.PalettePrimaryLighter
+                }
+              }
+            },
+            ...(!ownerState.disableGutters && {
+              paddingInline: odysseyTokens.Spacing4
+            }),
+            ...(ownerState.divider && {
+              borderBlockEnd: `1px solid ${odysseyTokens.BorderColorDisplay}`
+            }),
+            [`&.${menuItemClasses.disabled}`]: {
+              opacity: 1,
+              color: odysseyTokens.TypographyColorDisabled
+            },
+            [`& + .${dividerClasses.root}`]: {
+              marginBlock: odysseyTokens.Spacing1
+            },
+            [`& .${listItemTextClasses.root}`]: {
+              marginBlock: 0
+            },
+            [`& .${listItemIconClasses.root}`]: {
+              minWidth: "unset"
             }
-          },
-          ...(!ownerState.disableGutters && {
-            paddingInline: theme.spacing(4)
-          }),
-          ...(ownerState.divider && {
-            borderBlockEnd: `1px solid ${theme.palette.divider}`
-          }),
-          [`&.${menuItemClasses.disabled}`]: {
-            opacity: 1,
-            color: theme.palette.text.disabled
-          },
-          [`& + .${dividerClasses.root}`]: {
-            marginBlock: theme.spacing(1)
-          },
-          [`& .${listItemTextClasses.root}`]: {
-            marginBlock: 0
-          },
-          [`& .${listItemIconClasses.root}`]: {
-            minWidth: "unset"
-          }
-        };
-      }
-    }
-  },
-  MuiListItemIcon: {
-    styleOverrides: {
-      root: {
-        minWidth: "unset",
-        color: "inherit"
+          };
+        }
       }
-    }
-  },
-  MuiNativeSelect: {
-    defaultProps: {
-      variant: "standard"
     },
-    styleOverrides: {
-      select: {
-        "&:focus": {
-          backgroundColor: "transparent"
+    MuiListItemIcon: {
+      styleOverrides: {
+        root: {
+          minWidth: "unset",
+          color: "inherit"
         }
+      }
+    },
+    MuiNativeSelect: {
+      defaultProps: {
+        variant: "standard"
       },
-      icon: _ref48 => {
-        let {
-          theme
-        } = _ref48;
-        return {
-          insetInlineEnd: theme.spacing(3),
-          color: theme.palette.text.primary
-        };
+      styleOverrides: {
+        select: {
+          "&:focus": {
+            backgroundColor: "transparent"
+          }
+        },
+        icon: {
+          right: "unset",
+          insetInlineEnd: odysseyTokens.Spacing3,
+          color: odysseyTokens.TypographyColorBody
+        }
       }
-    }
-  },
-  MuiPopover: {
-    styleOverrides: {
-      paper: _ref49 => {
-        let {
-          theme
-        } = _ref49;
-        return {
-          marginBlockStart: theme.spacing(1),
-          borderWidth: theme.mixins.borderWidth,
-          borderStyle: theme.mixins.borderStyle,
-          borderColor: theme.palette.grey[200]
-        };
+    },
+    MuiPopover: {
+      styleOverrides: {
+        paper: {
+          marginBlockStart: odysseyTokens.Spacing1,
+          borderWidth: odysseyTokens.BorderWidthMain,
+          borderStyle: odysseyTokens.BorderStyleMain,
+          borderColor: odysseyTokens.HueNeutral200
+        }
       }
-    }
-  },
-  MuiRadio: {
-    defaultProps: {
-      size: "small",
-      icon: _jsx(_Fragment, {}),
-      checkedIcon: _jsx(_Fragment, {})
     },
-    styleOverrides: {
-      root: _ref50 => {
-        let {
-          theme
-        } = _ref50;
-        return {
-          width: `${theme.typography.ui.lineHeight}em`,
-          height: `${theme.typography.ui.lineHeight}em`,
-          borderRadius: `${theme.typography.ui.lineHeight}em`,
-          borderWidth: theme.mixins.borderWidth,
-          borderStyle: theme.mixins.borderStyle,
-          borderColor: theme.palette.grey[500],
-          padding: 0,
-          boxShadow: `0 0 0 0 transparent`,
-          transition: theme.transitions.create(["border-color", "background-color", "box-shadow"], {
-            duration: theme.transitions.duration.short
-          }),
-          "&::before": {
-            content: "''",
-            position: "absolute",
-            width: "0.5em",
-            height: "0.5em",
-            borderRadius: "50%",
-            backgroundColor: "transparent",
-            transition: theme.transitions.create(["background-color"], {
-              duration: theme.transitions.duration.short
-            })
-          },
-          ".MuiFormControlLabel-root:hover > &": {
-            backgroundColor: "transparent",
-            borderColor: theme.palette.grey[900]
-          },
-          ".Mui-error:hover > &": {
-            backgroundColor: "transparent",
-            borderColor: theme.palette.error.dark,
+    MuiRadio: {
+      defaultProps: {
+        size: "small",
+        icon: _jsx(_Fragment, {}),
+        checkedIcon: _jsx(_Fragment, {})
+      },
+      styleOverrides: {
+        root: _ref22 => {
+          let {
+            theme
+          } = _ref22;
+          return {
+            width: `${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": {
-              backgroundColor: theme.palette.error.dark
-            }
-          },
-          ".Mui-error > &": {
-            borderColor: theme.palette.error.main,
+              content: "''",
+              position: "absolute",
+              width: "0.5em",
+              height: "0.5em",
+              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": {
-              boxShadow: `0 0 0 2px ${theme.palette.background.default}, 0 0 0 4px ${theme.palette.error.main}`
-            }
-          },
-          "&.Mui-focusVisible": {
-            borderColor: theme.palette.grey[900],
-            boxShadow: `0 0 0 2px ${theme.palette.background.default}, 0 0 0 4px ${theme.palette.primary.main}`,
-            outline: "2px solid transparent",
-            outlineOffset: "1px"
-          },
-          "&.Mui-checked": {
-            position: "relative",
-            "&::before": {
-              backgroundColor: theme.palette.primary.main
-            }
-          },
-          ".Mui-error > &.Mui-checked::before": {
-            backgroundColor: theme.palette.error.main
-          },
-          "&.Mui-disabled": {
-            backgroundColor: theme.palette.grey[50],
-            borderColor: theme.palette.grey[300],
-            "&.Mui-checked::before": {
-              backgroundColor: theme.palette.grey[300]
+              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.HueNeutral300,
+              "&.Mui-checked::before": {
+                backgroundColor: odysseyTokens.HueNeutral300
+              }
             }
-          }
-        };
-      }
-    }
-  },
-  MuiSnackbar: {
-    defaultProps: {
-      anchorOrigin: {
-        vertical: "bottom",
-        horizontal: "right"
+          };
+        }
       }
     },
-    styleOverrides: {
-      root: {
-        "&.Toast": {
-          position: "static"
+    MuiSnackbar: {
+      defaultProps: {
+        anchorOrigin: {
+          vertical: "bottom",
+          horizontal: "right"
+        }
+      },
+      styleOverrides: {
+        root: {
+          "&.Toast": {
+            position: "static"
+          }
         }
       }
-    }
-  },
-  MuiSelect: {
-    defaultProps: {
-      variant: "standard",
-      IconComponent: ChevronDownIcon
     },
-    styleOverrides: {
-      select: _ref51 => {
-        let {
-          theme
-        } = _ref51;
-        return {
-          paddingBlock: `calc(${theme.spacing(3)} - ${theme.mixins.borderWidth})`,
-          paddingInline: theme.spacing(3),
+    MuiSelect: {
+      defaultProps: {
+        variant: "standard",
+        IconComponent: ChevronDownIcon
+      },
+      styleOverrides: {
+        select: {
+          paddingBlock: odysseyTokens.Spacing3,
+          paddingInline: odysseyTokens.Spacing3,
           "&:focus": {
             backgroundColor: "transparent"
           },
           ".MuiBox-root": {
             display: "flex",
             flexWrap: "wrap",
-            gap: theme.spacing(1),
-            marginBlock: `-${theme.spacing(2)}`,
-            marginInline: `-${theme.spacing(2)}`
+            gap: odysseyTokens.Spacing1,
+            marginBlock: `-${odysseyTokens.Spacing2}`,
+            marginInline: `-${odysseyTokens.Spacing2}`
           }
-        };
-      },
-      icon: _ref52 => {
-        let {
-          theme
-        } = _ref52;
-        return {
+        },
+        icon: {
           right: "unset",
-          insetInlineEnd: theme.spacing(3),
-          color: theme.palette.text.primary
-        };
+          insetInlineEnd: odysseyTokens.Spacing3,
+          color: odysseyTokens.TypographyColorBody
+        }
       }
-    }
-  },
-  MuiSvgIcon: {
-    defaultProps: {
-      fontSize: "inherit",
-      color: "inherit"
     },
-    styleOverrides: {
-      root: _ref53 => {
-        let {
-          theme,
-          ownerState
-        } = _ref53;
-        return {
-          fontSize: `${theme.typography.ui.lineHeight}rem`,
-          ...(ownerState.fontSize === "small" && {
-            fontSize: `${Number(theme.typography.ui.lineHeight) * 0.75}rem`
-          }),
-          ...(ownerState.fontSize === "large" && {
-            fontSize: `${Number(theme.typography.ui.lineHeight) * 1.25}rem`
-          })
-        };
+    MuiSvgIcon: {
+      defaultProps: {
+        fontSize: "inherit",
+        color: "inherit"
+      },
+      styleOverrides: {
+        root: _ref23 => {
+          let {
+            ownerState
+          } = _ref23;
+          return {
+            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: _ref54 => {
-        let {
-          theme,
-          ownerState
-        } = _ref54;
-        return {
-          maxWidth: `calc(${theme.mixins.maxWidth} / 2)`,
-          minWidth: "unset",
-          minHeight: "unset",
-          padding: `${theme.spacing(4)} 0`,
-          lineHeight: theme.typography.body1.lineHeight,
-          overflow: "visible",
-          ...(ownerState.selected == true && {
-            color: theme.palette.text.primary
-          }),
-          ...(ownerState.textColor === "inherit" && {
-            color: "inherit",
-            opacity: 1
-          }),
-          ...(ownerState.wrapped && {
-            fontSize: theme.typography.subtitle1.fontSize,
-            lineHeight: theme.typography.subtitle1.lineHeight
-          }),
-          "&:hover": {
-            color: theme.palette.primary.main
-          },
-          "&:focus-visible::before, &.Mui-focusVisible::before": {
-            content: "''",
-            position: "absolute",
-            top: theme.spacing(4),
-            right: `calc(-1 * ${theme.spacing(2)})`,
-            bottom: theme.spacing(4),
-            left: `calc(-1 * ${theme.spacing(2)})`,
-            borderWidth: theme.mixins.borderWidth,
-            borderStyle: theme.mixins.borderStyle,
-            borderColor: theme.palette.primary.main,
-            borderRadius: theme.mixins.borderRadius
-          },
-          "&.Mui-selected": {
-            color: theme.palette.text.primary,
-            fontWeight: theme.typography.fontWeightBold,
-            "&:hover": {
-              color: theme.palette.primary.main
-            }
-          },
-          "&.Mui-disabled": {
-            cursor: "not-allowed",
-            pointerEvents: "unset",
+    MuiTab: {
+      defaultProps: {
+        iconPosition: "start"
+      },
+      styleOverrides: {
+        root: _ref24 => {
+          let {
+            ownerState
+          } = _ref24;
+          return {
+            maxWidth: `calc(${odysseyTokens.TypographyLineLengthMax} / 2)`,
+            minWidth: "unset",
+            minHeight: "unset",
+            padding: `${odysseyTokens.Spacing4} 0`,
+            fontFamily: odysseyTokens.TypographyFamilyHeading,
+            lineHeight: odysseyTokens.TypographyLineHeightUi,
+            overflow: "visible",
+            ...(ownerState.textColor === "inherit" && {
+              color: "inherit",
+              opacity: 1
+            }),
+            ...(ownerState.selected == true && {
+              color: odysseyTokens.TypographyColorAction,
+              fontWeight: odysseyTokens.TypographyWeightBodyBold
+            }),
+            ...(ownerState.disabled && {
+              color: odysseyTokens.TypographyColorDisabled
+            }),
+            ...(ownerState.wrapped && {
+              fontSize: odysseyTokens.TypographySizeSubordinate,
+              lineHeight: odysseyTokens.TypographyLineHeightBody
+            }),
             "&:hover": {
-              color: theme.palette.text.disabled
+              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
+    },
+    MuiTabPanel: {
+      styleOverrides: {
+        root: {
+          padding: 0
+        }
       }
-    }
-  },
-  MuiTable: {
-    styleOverrides: {
-      root: _ref55 => {
-        let {
-          theme,
-          ownerState
-        } = _ref55;
-        return {
-          display: "table",
-          width: "auto",
-          borderCollapse: "separate",
-          borderSpacing: 0,
-          border: `${theme.mixins.borderWidth} ${theme.mixins.borderStyle} ${theme.palette.grey[100]}`,
-          borderRadius: theme.mixins.borderRadius,
-          marginBlock: theme.spacing(0),
-          marginInline: theme.spacing(0),
-          lineHeight: theme.typography.ui.lineHeight,
-          "&: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"
-          }
-        };
+    },
+    MuiTable: {
+      styleOverrides: {
+        root: _ref25 => {
+          let {
+            ownerState
+          } = _ref25;
+          return {
+            display: "table",
+            width: "auto",
+            borderCollapse: "separate",
+            borderSpacing: 0,
+            border: `${odysseyTokens.BorderWidthMain} ${odysseyTokens.BorderStyleMain} ${odysseyTokens.HueNeutral100}`,
+            borderRadius: odysseyTokens.BorderRadiusMain,
+            marginBlock: odysseyTokens.Spacing0,
+            marginInline: odysseyTokens.Spacing0,
+            lineHeight: odysseyTokens.TypographyLineHeightUi,
+            "&: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: _ref56 => {
-        let {
-          theme,
-          ownerState
-        } = _ref56;
-        return {
-          ...theme.typography.body1,
-          maxWidth: theme.mixins.maxWidth,
-          borderBottom: `${theme.mixins.borderWidth} ${theme.mixins.borderStyle} ${theme.palette.grey[100]}`,
-          textAlign: "start",
-          verticalAlign: "baseline",
-          padding: "unset",
-          paddingBlock: theme.spacing(4),
-          paddingInline: theme.spacing(4),
-          overflowWrap: "break-word",
-          [`.${tableRowClasses.root}:hover &[rowspan]`]: {
-            backgroundColor: theme.palette.common.white
-          },
-          [`.${tableBodyClasses.root} .${tableRowClasses.root}:last-of-type &`]: {
-            borderBottom: 0
-          },
-          [`.${tableRowClasses.selected} &`]: {
-            borderBottomColor: theme.palette.primary.light
-          },
-          [`.${tableRowClasses.selected}:hover &`]: {
-            borderBottomColor: theme.palette.primary.main
-          },
-          ...(ownerState.variant === "action" && {
-            paddingBlock: 0
-          }),
-          ...(ownerState.variant === "body" && {
-            color: theme.palette.text.primary
-          }),
-          ...(ownerState.variant === "date" && {
-            whiteSpace: "nowrap"
-          }),
-          ...(ownerState.variant === "footer" && {
-            color: theme.palette.text.secondary,
-            lineHeight: theme.typography.body1.lineHeight,
-            fontSize: theme.typography.body1.fontSize
-          }),
-          [`.${tableHeadClasses.root} &`]: {
-            color: theme.palette.text.secondary,
-            lineHeight: theme.typography.body1.lineHeight,
-            fontWeight: theme.typography.fontWeightBold,
-            backgroundColor: theme.palette.grey[50]
-          },
-          ...(ownerState.variant === "head" && {
-            lineHeight: theme.typography.body1.lineHeight,
-            fontWeight: theme.typography.fontWeightBold
-          }),
-          ...(ownerState.variant === "number" && {
-            textAlign: "end",
-            fontFeatureSettings: '"lnum", "tnum"'
-          }),
-          ...(ownerState.padding === "checkbox" && {
-            width: 48,
-            padding: "0 0 0 4px"
-          }),
-          ...(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"
-          })
-        };
+    },
+    MuiTableCell: {
+      styleOverrides: {
+        root: _ref26 => {
+          let {
+            theme,
+            ownerState
+          } = _ref26;
+          return {
+            ...theme.typography.body1,
+            maxWidth: odysseyTokens.TypographyLineLengthMax,
+            borderBottom: `${odysseyTokens.BorderWidthMain} ${odysseyTokens.BorderStyleMain} ${odysseyTokens.HueNeutral100}`,
+            textAlign: "start",
+            verticalAlign: "baseline",
+            padding: "unset",
+            paddingBlock: odysseyTokens.Spacing4,
+            paddingInline: odysseyTokens.Spacing4,
+            overflowWrap: "break-word",
+            [`.${tableRowClasses.root}:hover &[rowspan]`]: {
+              backgroundColor: odysseyTokens.HueNeutralWhite
+            },
+            [`.${tableBodyClasses.root} .${tableRowClasses.root}:last-of-type &`]: {
+              borderBottom: 0
+            },
+            [`.${tableRowClasses.selected} &`]: {
+              borderBottomColor: odysseyTokens.PalettePrimaryLight
+            },
+            [`.${tableRowClasses.selected}:hover &`]: {
+              borderBottomColor: odysseyTokens.PalettePrimaryMain
+            },
+            ...(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.TypographyColorBody,
+              lineHeight: odysseyTokens.TypographyLineHeightBody,
+              fontWeight: odysseyTokens.TypographyWeightBodyBold,
+              backgroundColor: odysseyTokens.HueNeutral50
+            },
+            ...(ownerState.variant === "head" && {
+              lineHeight: odysseyTokens.TypographyLineHeightBody,
+              fontWeight: odysseyTokens.TypographyWeightBodyBold
+            }),
+            ...(ownerState.variant === "number" && {
+              textAlign: "end",
+              fontFeatureSettings: '"lnum", "tnum"'
+            }),
+            ...(ownerState.padding === "checkbox" && {
+              width: 48,
+              padding: "0 0 0 4px"
+            }),
+            ...(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"
+            })
+          };
+        }
       }
-    }
-  },
-  MuiTableContainer: {
-    defaultProps: {
-      component: "figure"
     },
-    styleOverrides: {
-      root: _ref57 => {
-        let {
-          theme
-        } = _ref57;
-        return {
+    MuiTableContainer: {
+      defaultProps: {
+        component: "figure"
+      },
+      styleOverrides: {
+        root: {
           width: "unset",
           maxWidth: "100%",
-          marginBlockStart: theme.spacing(0),
-          marginBlockEnd: theme.spacing(4),
+          marginBlockStart: odysseyTokens.Spacing0,
+          marginBlockEnd: odysseyTokens.Spacing4,
           marginInline: 0,
           overflowX: "auto",
           "&:last-child": {
             marginBlock: 0
           }
-        };
+        }
       }
-    }
-  },
-  MuiTableRow: {
-    styleOverrides: {
-      root: _ref58 => {
-        let {
-          theme
-        } = _ref58;
-        return {
+    },
+    MuiTableRow: {
+      styleOverrides: {
+        root: {
           verticalAlign: "unset",
           [`&.${tableRowClasses.root}:hover`]: {
-            backgroundColor: theme.palette.grey[50]
+            backgroundColor: odysseyTokens.HueNeutral50
           },
           [`&.${tableRowClasses.selected}`]: {
-            backgroundColor: theme.palette.primary.lighter,
+            backgroundColor: odysseyTokens.PalettePrimaryLighter,
             "&:hover": {
-              backgroundColor: theme.palette.primary.lighter
+              backgroundColor: odysseyTokens.PalettePrimaryLighter
             }
           }
-        };
+        }
       }
-    }
-  },
-  MuiTableSortLabel: {
-    defaultProps: {
-      IconComponent: ArrowDownIcon
     },
-    styleOverrides: {
-      root: _ref59 => {
-        let {
-          theme
-        } = _ref59;
-        return {
+    MuiTableSortLabel: {
+      defaultProps: {
+        IconComponent: ArrowDownIcon
+      },
+      styleOverrides: {
+        root: {
           cursor: "pointer",
           display: "inline-flex",
           justifyContent: "flex-start",
           flexDirection: "inherit",
           alignItems: "center",
           "&:focus-visible": {
-            color: theme.palette.text.primary,
-            outlineOffset: theme.spacing(4),
-            outlineStyle: "solid",
-            outlineWidth: "2px",
-            outlineColor: theme.palette.primary.main
+            color: odysseyTokens.TypographyColorBody,
+            outlineOffset: odysseyTokens.Spacing4,
+            outlineStyle: odysseyTokens.FocusOutlineStyle,
+            outlineWidth: odysseyTokens.FocusOutlineWidthMain,
+            outlineColor: odysseyTokens.FocusOutlineColorPrimary
           },
           "&:hover": {
-            color: theme.palette.text.primary,
+            color: odysseyTokens.TypographyColorBody,
             [`& .${tableSortLabelClasses.icon}`]: {
               opacity: 1
             }
           },
           [`&.${tableSortLabelClasses.active}`]: {
-            color: theme.palette.text.secondary,
+            color: odysseyTokens.TypographyColorSubordinate,
             [`& .${tableSortLabelClasses.icon}`]: {
               opacity: 1,
               color: "inherit"
             }
           }
-        };
-      },
-      icon: _ref60 => {
-        let {
-          theme,
-          ownerState
-        } = _ref60;
-        return {
-          fontSize: "inherit",
-          marginInlineEnd: 0,
-          marginInlineStart: 0,
-          opacity: 0,
-          color: "inherit",
-          transition: theme.transitions.create(["opacity", "transform"], {
-            duration: theme.transitions.duration.shorter
-          }),
-          userSelect: "none",
-          [`.${tableCellClasses.alignRight} &`]: {
-            marginInlineEnd: theme.spacing(2)
-          },
-          [`.${tableCellClasses.alignLeft} &`]: {
-            marginInlineStart: theme.spacing(2)
-          },
-          ...(ownerState.direction === "desc" && {
-            transform: "rotate(0deg)"
-          }),
-          ...(ownerState.direction === "asc" && {
-            transform: "rotate(180deg)"
-          })
-        };
+        },
+        icon: _ref27 => {
+          let {
+            theme,
+            ownerState
+          } = _ref27;
+          return {
+            fontSize: "inherit",
+            marginInlineEnd: 0,
+            marginInlineStart: 0,
+            opacity: 0,
+            color: "inherit",
+            transition: theme.transitions.create(["opacity", "transform"], {
+              duration: odysseyTokens.TransitionDurationMain
+            }),
+            userSelect: "none",
+            [`.${tableCellClasses.alignRight} &`]: {
+              marginInlineEnd: odysseyTokens.Spacing2
+            },
+            [`.${tableCellClasses.alignLeft} &`]: {
+              marginInlineStart: odysseyTokens.Spacing2
+            },
+            ...(ownerState.direction === "desc" && {
+              transform: "rotate(0deg)"
+            }),
+            ...(ownerState.direction === "asc" && {
+              transform: "rotate(180deg)"
+            })
+          };
+        }
       }
-    }
-  },
-  MuiTabs: {
-    styleOverrides: {
-      root: _ref61 => {
-        let {
-          theme
-        } = _ref61;
-        return {
-          minHeight: "unset",
-          marginBottom: theme.spacing(5)
-        };
+    },
+    MuiTabs: {
+      defaultProps: {
+        textColor: "inherit"
       },
-      flexContainer: _ref62 => {
-        let {
-          theme
-        } = _ref62;
-        return {
-          gap: theme.spacing(5),
-          borderBottom: `${theme.mixins.borderWidth} ${theme.mixins.borderStyle} ${theme.palette.divider}`
-        };
+      styleOverrides: {
+        root: {
+          minHeight: "unset",
+          marginBottom: odysseyTokens.Spacing5
+        },
+        flexContainer: {
+          gap: odysseyTokens.Spacing5,
+          borderBottom: `${odysseyTokens.BorderWidthMain} ${odysseyTokens.BorderStyleMain} ${odysseyTokens.BorderColorDisplay}`
+        }
       }
-    }
-  },
-  MuiTooltip: {
-    defaultProps: {
-      arrow: true,
-      enterDelay: 500,
-      enterNextDelay: 250,
-      placement: "top"
     },
-    styleOverrides: {
-      tooltip: _ref63 => {
-        let {
-          theme,
-          ownerState
-        } = _ref63;
-        return {
-          maxWidth: `calc(${theme.mixins.maxWidth} / 2)`,
-          paddingBlock: theme.spacing(2),
-          paddingInline: theme.spacing(3),
-          backgroundColor: theme.palette.grey[900],
-          color: theme.palette.common.white,
-          fontSize: theme.typography.subtitle1.fontSize,
-          lineHeight: theme.typography.subtitle1.lineHeight,
-          ...(ownerState.touch === true && {
-            paddingBlock: theme.spacing(2),
-            paddingInline: theme.spacing(3),
-            fontSize: theme.typography.subtitle1.fontSize,
-            lineHeight: theme.typography.subtitle1.lineHeight,
-            fontWeight: theme.typography.fontWeightRegular
-          }),
-          [`.${tooltipClasses.popper}[data-popper-placement*="left"] &`]: {
-            transformOrigin: "right center",
-            ...(ownerState.isRtl ? {
-              marginInlineStart: theme.spacing(3),
-              ...(ownerState.touch === true && {
-                marginInlineStart: theme.spacing(4)
+    MuiTooltip: {
+      defaultProps: {
+        arrow: true,
+        enterDelay: 500,
+        enterNextDelay: 250,
+        placement: "top"
+      },
+      styleOverrides: {
+        tooltip: _ref28 => {
+          let {
+            ownerState
+          } = _ref28;
+          return {
+            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
+                })
               })
-            } : {
-              marginInlineEnd: theme.spacing(3),
-              ...(ownerState.touch === true && {
-                marginInlineEnd: theme.spacing(4)
+            },
+            [`.${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*="right"] &`]: {
-            transformOrigin: "left center",
-            ...(ownerState.isRtl ? {
-              marginInlineEnd: theme.spacing(3),
+            },
+            [`.${tooltipClasses.popper}[data-popper-placement*="top"] &`]: {
+              transformOrigin: "center bottom",
+              marginBottom: odysseyTokens.Spacing3,
               ...(ownerState.touch === true && {
-                marginInlineEnd: theme.spacing(4)
+                marginBottom: odysseyTokens.Spacing4
               })
-            } : {
-              marginInlineStart: theme.spacing(3),
+            },
+            [`.${tooltipClasses.popper}[data-popper-placement*="bottom"] &`]: {
+              transformOrigin: "center top",
+              marginTop: odysseyTokens.Spacing3,
               ...(ownerState.touch === true && {
-                marginInlineStart: theme.spacing(4)
+                marginTop: odysseyTokens.Spacing4
               })
-            })
-          },
-          [`.${tooltipClasses.popper}[data-popper-placement*="top"] &`]: {
-            transformOrigin: "center bottom",
-            marginBottom: theme.spacing(3),
-            ...(ownerState.touch === true && {
-              marginBottom: theme.spacing(4)
-            })
-          },
-          [`.${tooltipClasses.popper}[data-popper-placement*="bottom"] &`]: {
-            transformOrigin: "center top",
-            marginTop: theme.spacing(3),
-            ...(ownerState.touch === true && {
-              marginTop: theme.spacing(4)
-            })
-          }
-        };
-      },
-      arrow: _ref64 => {
-        let {
-          theme
-        } = _ref64;
-        return {
-          color: theme.palette.grey[900],
+            }
+          };
+        },
+        arrow: {
+          color: odysseyTokens.HueNeutral900,
           "&::before": {
             borderRadius: "0"
           },
@@ -2183,36 +2102,34 @@ export const components = {
           [`.${tooltipClasses.popper}[data-popper-placement*="left"] &::before`]: {
             borderRadius: `0 3px 0 0`
           }
-        };
-      }
-    }
-  },
-  MuiTypography: {
-    defaultProps: {
-      fontFamily: "'Inter', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', 'Noto Sans Arabic', sans-serif",
-      variantMapping: {
-        h1: "h1",
-        h2: "h2",
-        h3: "h3",
-        h4: "h4",
-        h5: "h5",
-        h6: "h6",
-        subtitle1: "p",
-        body1: "p",
-        inherit: "p",
-        legend: "legend"
+        }
       }
     },
-    styleOverrides: {
-      paragraph: _ref65 => {
-        let {
-          theme
-        } = _ref65;
-        return {
-          marginBottom: theme.spacing(4)
-        };
+    MuiTypography: {
+      defaultProps: {
+        fontFamily: "'Inter', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', 'Noto Sans Arabic', sans-serif",
+        variantMapping: {
+          h1: "h1",
+          h2: "h2",
+          h3: "h3",
+          h4: "h4",
+          h5: "h5",
+          h6: "h6",
+          subtitle1: "p",
+          body1: "p",
+          inherit: "p",
+          legend: "legend"
+        }
+      },
+      styleOverrides: {
+        paragraph: {
+          marginBlockEnd: odysseyTokens.Spacing4,
+          [`&:last-child`]: {
+            marginBlockEnd: 0
+          }
+        }
       }
     }
-  }
+  };
 };
 //# sourceMappingURL=components.js.map