@okta/odyssey-react-mui 0.16.1 → 0.18.0

package/src/theme/components.tsx

@@ -13,8 +13,11 @@
 import type { ThemeOptions } from "@mui/material";
 import type {} from "@mui/lab/themeAugmentation";
 //import radioClasses from "@mui/material";
+import { chipClasses } from "@mui/material/Chip";
 import { dialogActionsClasses } from "@mui/material/DialogActions";
+import { inputAdornmentClasses } from "@mui/material/InputAdornment";
 import { inputBaseClasses } from "@mui/material/InputBase";
+import { svgIconClasses } from "@mui/material/SvgIcon";
 import { tableBodyClasses } from "@mui/material/TableBody";
 import { tableCellClasses } from "@mui/material/TableCell";
 import { tableHeadClasses } from "@mui/material/TableHead";
@@ -25,6 +28,8 @@ import {
   AlertTriangleFilledIcon,
   ArrowDownIcon,
   CheckCircleFilledIcon,
+  ChevronDownIcon,
+  CloseCircleFilledIcon,
   InformationCircleFilledIcon,
 } from "../iconDictionary";
 
@@ -68,35 +73,28 @@ export const components: ThemeOptions["components"] = {
           borderWidth: theme.mixins.borderWidth,
           borderRadius: theme.mixins.borderRadius,
           position: "relative",
-          alignItems: "start",
+          alignItems: "center",
         }),
       }),
       action: ({ ownerState, theme }) => ({
         ...(ownerState.variant === "banner" && {
           padding: 0,
-          marginRight: 0,
+          marginInlineEnd: 0,
           top: "50%",
           right: theme.spacing(4),
           position: "absolute",
           transform: "translateY(-50%)",
         }),
         ...(ownerState.variant === "toast" && {
-          position: "absolute",
-          top: `calc(${theme.spacing(4)} - ${theme.spacing(1)} + ${
-            theme.mixins.borderWidth
-          })`,
-          right: `calc(${theme.spacing(4)} - ${theme.spacing(1)} + ${
-            theme.mixins.borderWidth
-          })`,
           padding: 0,
-          marginLeft: 0,
-          marginRight: 0,
+          marginInlineStart: 0,
+          marginInlineEnd: 0,
         }),
       }),
       icon: ({ ownerState, theme }) => ({
-        marginRight: 0,
+        marginInlineEnd: 0,
         padding: 0,
-        fontSize: "1.429rem",
+        fontSize: "inherit",
         opacity: 1,
         ...(ownerState.severity && {
           color: theme.palette[ownerState.severity].main,
@@ -104,6 +102,10 @@ export const components: ThemeOptions["components"] = {
         ...(ownerState.severity === "warning" && {
           color: theme.palette[ownerState.severity].dark,
         }),
+
+        [`& .${svgIconClasses.root}`]: {
+          fontSize: "1.429rem",
+        },
       }),
       message: ({ ownerState, theme }) => ({
         padding: 0,
@@ -128,14 +130,22 @@ export const components: ThemeOptions["components"] = {
         lineHeight: theme.typography.h6.lineHeight,
         fontSize: theme.typography.h6.fontSize,
         fontWeight: theme.typography.fontWeightBold,
+
+        "&:last-child": {
+          marginBlockEnd: 0,
+        },
       }),
     },
   },
   MuiBackdrop: {
     styleOverrides: {
-      root: {
+      root: ({ ownerState }) => ({
         backgroundColor: "rgba(29,29,33,0.75)",
-      },
+
+        ...(ownerState.invisible === true && {
+          backgroundColor: "transparent",
+        }),
+      }),
     },
   },
   MuiButton: {
@@ -226,7 +236,7 @@ export const components: ThemeOptions["components"] = {
       {
         props: { variant: "floating" },
         style: ({ theme }) => ({
-          backgroundColor: theme.palette.common.white,
+          backgroundColor: "transparent",
           color: theme.palette.text.primary,
           borderColor: "transparent",
 
@@ -252,7 +262,7 @@ export const components: ThemeOptions["components"] = {
         props: { size: "s" },
         style: ({ theme }) => ({
           paddingBlock: `calc(${theme.spacing(2)} - 1px)`,
-          paddingInline: `calc(${theme.spacing(3)} - 1px)`,
+          paddingInline: `calc(${theme.spacing(2)} - 1px)`,
           fontSize: "1rem",
         }),
       },
@@ -293,7 +303,7 @@ export const components: ThemeOptions["components"] = {
         fontWeight: 600,
         minWidth: "unset",
         padding: `calc(${theme.spacing(3)} - 1px) ${theme.spacing(3)}`,
-        display: "inline-block",
+        display: "inline-flex",
         position: "relative",
         marginBlock: "0",
         marginInline: "0",
@@ -307,7 +317,7 @@ export const components: ThemeOptions["components"] = {
         outlineColor: "transparent",
         outlineOffset: "0",
         fontSize: theme.typography.body1.fontSize,
-        lineHeight: "1.14285714",
+        lineHeight: theme.typography.ui.lineHeight,
         whiteSpace: "nowrap",
 
         ".MuiButton-root + &": {
@@ -326,7 +336,16 @@ export const components: ThemeOptions["components"] = {
         },
 
         ".MuiButton-startIcon > *:nth-of-type(1)": {
-          fontSize: "inherit",
+          fontSize: `${theme.typography.ui.lineHeight}em`,
+        },
+      }),
+      startIcon: ({ theme }) => ({
+        display: "inline-flex",
+        margin: 0,
+        marginInlineEnd: theme.spacing(2),
+
+        "&:only-child": {
+          margin: 0,
         },
       }),
     },
@@ -336,13 +355,6 @@ export const components: ThemeOptions["components"] = {
       disableRipple: true,
     },
   },
-  MuiCssBaseline: {
-    styleOverrides: {
-      boxSizing: "border-box",
-      fontFeatureSettings: "'lnum','pnum'",
-      fontVariant: "normal",
-    },
-  },
   MuiCheckbox: {
     defaultProps: {
       size: "small",
@@ -374,9 +386,104 @@ export const components: ThemeOptions["components"] = {
       }),
     },
   },
+  MuiChip: {
+    defaultProps: {
+      deleteIcon: <CloseCircleFilledIcon />,
+    },
+    styleOverrides: {
+      root: ({ theme, ownerState }) => ({
+        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.deleteIcon}`]: {
+          WebkitTapHighlightColor: "transparent",
+          color: theme.palette.text.secondary,
+          fontSize: "1em",
+          cursor: "pointer",
+          margin: "0",
+          marginInlineStart: theme.spacing(2),
+
+          "&:hover": {
+            color: theme.palette.text.primary,
+          },
+        },
+
+        [`&.${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,
+          },
+
+          [`&.${chipClasses.colorError}`]: {
+            "&::before": {
+              backgroundColor: theme.palette.error.main,
+            },
+          },
+
+          [`&.${chipClasses.colorSuccess}`]: {
+            "&::before": {
+              backgroundColor: theme.palette.success.main,
+            },
+          },
+
+          [`&.${chipClasses.colorWarning}`]: {
+            "&::before": {
+              backgroundColor: theme.palette.warning.main,
+            },
+          },
+        }),
+      }),
+      label: {
+        padding: 0,
+      },
+    },
+  },
   MuiCircularProgress: {
     defaultProps: {
-      // TODO: defaultProps cannot take a theme object; needs workaround
+      // TODO: defaultProps cannot take a theme object; matches theme.typography.ui.lineHeight
       size: "1.14285714rem",
       thickness: 8,
       color: "primary",
@@ -396,6 +503,331 @@ export const components: ThemeOptions["components"] = {
       }),
     },
   },
+  MuiCssBaseline: {
+    styleOverrides: (themeParam) => `
+      html {
+        font-size: calc((${themeParam.typography.fontSize} / 16) * 100%);
+      }
+    `,
+  },
+  MuiScopedCssBaseline: {
+    styleOverrides: {
+      root: ({ theme }) => ({
+        abbr: {
+          borderBottomWidth: "1px",
+          borderBottomStyle: "dashed",
+          borderBottomColor: theme.palette.primary.dark,
+          textDecoration: "none",
+        },
+
+        address: {
+          maxWidth: theme.mixins.maxWidth,
+          marginBlockStart: 0,
+          marginBlockEnd: theme.spacing(4),
+          marginInline: 0,
+
+          "&:last-child": {
+            marginBlockEnd: 0,
+          },
+        },
+
+        blockquote: {
+          maxWidth: theme.mixins.maxWidth,
+          marginBlockStart: 0,
+          marginBlockEnd: theme.spacing(4),
+          marginInline: 0,
+          paddingBlock: 0,
+          paddingInlineStart: theme.spacing(2),
+          paddingInlineEnd: 0,
+          borderInlineStartWidth: "3px",
+          borderInlineStartStyle: "solid",
+          borderInlineStartColor: theme.palette.grey[200],
+
+          "&:last-child": {
+            marginBlockEnd: 0,
+          },
+        },
+
+        cite: {
+          fontStyle: "italic",
+        },
+
+        code: {
+          fontFamily:
+            "'Inconsolata', 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', 'Courier', monospace",
+        },
+
+        del: {
+          display: "inline-block",
+          backgroundColor: theme.palette.error.light,
+
+          "&::before, &::after": {
+            clip: "rect(0 0 0 0)",
+            clipPath: "inset(50%)",
+            height: "1px",
+            overflow: "hidden",
+            position: "absolute",
+            whiteSpace: "nowrap",
+            width: "1px",
+          },
+
+          "&::before": {
+            content: "attr(data-a11y-start)",
+          },
+
+          "&::after": {
+            content: "attr(data-a11y-end)",
+          },
+        },
+
+        details: {
+          fontSize: theme.typography.body1.fontSize,
+        },
+
+        dfn: {
+          fontStyle: "italic",
+        },
+
+        dl: {
+          display: "grid",
+          gridGap: `${theme.spacing(2)} ${theme.spacing(4)}`,
+          gridTemplateColumns: "repeat(2, minmax(min-content, max-content))",
+          maxWidth: theme.mixins.maxWidth,
+          marginBlockStart: 0,
+          marginBlockEnd: theme.spacing(4),
+          marginInline: 0,
+          padding: 0,
+
+          "&:last-child": {
+            marginBlockEnd: 0,
+          },
+
+          dt: {
+            gridColumn: 1,
+            fontWeight: 600,
+          },
+
+          dd: {
+            gridColumn: 2,
+            fontWeight: 400,
+          },
+        },
+
+        em: {
+          fontStyle: "italic",
+
+          "& > em": {
+            textDecoration: "underline",
+          },
+        },
+
+        figure: {
+          display: "grid",
+          gridGap: theme.spacing(2),
+          gridTemplateColumns: "minmax(min-content, max-content)",
+          justifyContent: "start",
+          justifyItems: "start",
+          marginBlockStart: 0,
+          marginBlockEnd: theme.spacing(4),
+          marginInline: 0,
+
+          "&:last-child": {
+            marginBlockEnd: 0,
+          },
+        },
+
+        "figcaption:not([class])": {
+          color: theme.palette.text.secondary,
+          fontSize: theme.typography.body1.fontSize,
+        },
+
+        hr: {
+          marginBlock: theme.spacing(2),
+          marginInline: 0,
+          borderWidth: "1px",
+          borderStyle: "solid",
+          borderColor: theme.palette.grey[200],
+        },
+
+        ins: {
+          display: "inline-block",
+          backgroundColor: theme.palette.success.light,
+
+          "&::before, &::after": {
+            clip: "rect(0 0 0 0)",
+            clipPath: "inset(50%)",
+            height: "1px",
+            overflow: "hidden",
+            position: "absolute",
+            whiteSpace: "nowrap",
+            width: "1px",
+          },
+
+          "&::before": {
+            content: "attr(data-a11y-start)",
+          },
+
+          "&::after": {
+            content: "attr(data-a11y-end)",
+          },
+        },
+
+        kbd: {
+          display: "inline-block",
+          minWidth: `calc(${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)}`,
+          fontFamily:
+            "'Inconsolata', 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', 'Courier', monospace",
+          fontSize: theme.typography.subtitle1.fontSize,
+          fontWeight: theme.typography.fontWeightRegular,
+          lineHeight: theme.typography.h5.lineHeight,
+          boxShadow: `0 1px 1px 0 hsla(240, 6%, 12%, 0.05)`,
+        },
+
+        mark: {
+          backgroundColor: theme.palette.warning.light,
+
+          "&::before, &::after": {
+            clip: "rect(0 0 0 0)",
+            clipPath: "inset(50%)",
+            height: "1px",
+            overflow: "hidden",
+            position: "absolute",
+            whiteSpace: "nowrap",
+            width: "1px",
+          },
+
+          "&::before": {
+            content: "attr(data-a11y-start)",
+          },
+
+          "&::after": {
+            content: "attr(data-a11y-end)",
+          },
+        },
+
+        p: {
+          maxWidth: theme.mixins.maxWidth,
+          marginBlockStart: 0,
+          marginBlockEnd: theme.spacing(4),
+
+          "&:last-child": {
+            marginBlockEnd: 0,
+          },
+        },
+
+        pre: {
+          marginInline: 0,
+          marginBlockStart: 0,
+          marginBlockEnd: theme.spacing(4),
+          fontFamily:
+            "'Inconsolata', 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', 'Courier', monospace",
+          whiteSpace: "pre-wrap",
+          tabSize: 2,
+
+          "&:last-child": {
+            marginBlockEnd: 0,
+          },
+        },
+
+        "ul, ol": {
+          maxWidth: theme.mixins.maxWidth,
+          marginBlockStart: 0,
+          marginBlockEnd: theme.spacing(4),
+          // Unique padding to get desire appearance with "outside" position
+          paddingInlineStart: "2ch",
+
+          ol: {
+            listStyleType: "lower-alpha",
+
+            ol: {
+              listStyleType: "lower-roman",
+            },
+          },
+
+          "&:last-child": {
+            marginBlockEnd: 0,
+          },
+        },
+
+        li: {
+          marginBlockEnd: theme.spacing(2),
+          paddingInlineStart: theme.spacing(1),
+
+          "ul, ol": {
+            marginBlockStart: theme.spacing(2),
+            marginInlineStart: `calc(${theme.spacing(6)} - 2ch)`,
+          },
+        },
+
+        q: {
+          quotes: `'"' '"' "'" "'"`,
+
+          "&::before": {
+            content: "open-quote",
+          },
+
+          "&::after": {
+            content: "close-quote",
+          },
+        },
+
+        s: {
+          textDecoration: "line-through",
+        },
+
+        samp: {
+          padding: "0 0.5ch",
+          backgroundColor: theme.palette.grey[50],
+          boxShadow: `0 1px 0 ${theme.palette.grey[50]}`,
+          fontSize: theme.typography.body1.fontSize,
+
+          kbd: {
+            background: theme.palette.common.white,
+          },
+        },
+
+        small: {
+          fontSize: theme.typography.caption.fontSize,
+        },
+
+        sub: {
+          fontSize: theme.typography.caption.fontSize,
+          lineHeight: 1,
+          verticalAlign: "sub",
+        },
+
+        summary: {
+          fontSize: theme.typography.body1.fontSize,
+          fontWeight: theme.typography.fontWeightBold,
+          cursor: "default",
+
+          "&:focus-visible": {
+            outlineColor: theme.palette.primary.main,
+            outlineOffset: "2px",
+            outlineStyle: "solid",
+            outlineWidth: "2px",
+          },
+        },
+
+        sup: {
+          fontSize: theme.typography.caption.fontSize,
+          lineHeight: 1,
+          verticalAlign: "super",
+        },
+
+        var: {
+          fontStyle: "italic",
+          fontWeight: theme.typography.fontWeightBold,
+        },
+      }),
+    },
+  },
   MuiDialog: {
     defaultProps: {
       scroll: "paper",
@@ -497,17 +929,17 @@ export const components: ThemeOptions["components"] = {
     styleOverrides: {
       root: ({ theme, ownerState }) => ({
         gap: theme.spacing(2),
-        marginLeft: 0,
-        marginRight: 0, // used for row presentation of radio/checkbox
+        marginInlineStart: 0,
+        marginInlineEnd: 0, // used for row presentation of radio/checkbox
         ...(ownerState.labelPlacement === "start" && {
-          marginLeft: 0, // used for row presentation of radio/checkbox
-          marginRight: 0,
+          marginInlineStart: 0, // used for row presentation of radio/checkbox
+          marginInlineEnd: 0,
         }),
         ...(ownerState.labelPlacement === "top" && {
-          marginLeft: 0,
+          marginInlineStart: 0,
         }),
         ...(ownerState.labelPlacement === "bottom" && {
-          marginLeft: 0,
+          marginInlineStart: 0,
         }),
         "&:not(:last-child)": {
           marginBottom: theme.spacing(2),
@@ -553,6 +985,7 @@ export const components: ThemeOptions["components"] = {
         "&:last-child": {
           marginBottom: 0,
         },
+        textAlign: "start",
       }),
     },
   },
@@ -560,7 +993,7 @@ export const components: ThemeOptions["components"] = {
     styleOverrides: {
       root: ({ theme }) => ({
         color: theme.palette.text.primary,
-        lineHeight: "1.14285714",
+        lineHeight: theme.typography.ui.lineHeight,
         fontSize: "1rem",
         fontWeight: 600,
         marginBottom: theme.spacing(2),
@@ -572,6 +1005,9 @@ export const components: ThemeOptions["components"] = {
   },
   MuiIconButton: {
     styleOverrides: {
+      edgeEnd: ({ theme }) => ({
+        marginInlineEnd: theme.spacing(1),
+      }),
       root: ({ theme }) => ({
         padding: theme.spacing(1),
         fontSize: theme.typography.body1.fontSize,
@@ -618,16 +1054,17 @@ export const components: ThemeOptions["components"] = {
     styleOverrides: {
       root: ({ theme, ownerState }) => ({
         display: "flex",
-        minWidth: "1em",
+        minWidth: "1.25em",
         maxHeight: "unset",
+        margin: 0,
         alignItems: "center",
         whiteSpace: "nowrap",
         color: theme.palette.action.active,
         ...(ownerState.position === "start" && {
-          marginInlineEnd: theme.spacing(2),
+          marginInlineStart: theme.spacing(2),
         }),
         ...(ownerState.position === "end" && {
-          marginInlineStart: theme.spacing(2),
+          marginInlineEnd: theme.spacing(2),
         }),
         ...(ownerState.disablePointerEvents === true && {
           pointerEvents: "none",
@@ -646,22 +1083,11 @@ export const components: ThemeOptions["components"] = {
         flex: "1",
         width: "auto",
         color: theme.palette.text.primary,
-        lineHeight: "1.14285714",
+        lineHeight: theme.typography.ui.lineHeight,
         borderWidth: theme.mixins.borderWidth,
         borderStyle: theme.mixins.borderStyle,
         borderRadius: theme.mixins.borderRadius,
         borderColor: theme.palette.grey[500],
-        paddingBlock: `calc(${theme.spacing(3)} - ${theme.mixins.borderWidth})`,
-        paddingInline: theme.spacing(3),
-
-        ...(ownerState.multiline && {
-          paddingBlock: theme.spacing(3),
-          paddingInline: theme.spacing(3),
-          ...(ownerState.size === "small" && {
-            paddingBlock: theme.spacing(3),
-            paddingInline: theme.spacing(3),
-          }),
-        }),
 
         ...(ownerState.fullWidth && {
           width: "100%",
@@ -707,14 +1133,19 @@ export const components: ThemeOptions["components"] = {
       input: ({ theme }) => ({
         boxSizing: "border-box",
         height: "auto",
-        paddingBlock: 0,
-        paddingInline: 0,
+        paddingBlock: `calc(${theme.spacing(3)} - ${theme.mixins.borderWidth})`,
+        paddingInline: theme.spacing(3),
+        boxShadow: "none",
 
         [`.${inputBaseClasses.disabled} &`]: {
           pointerEvents: "auto",
           cursor: "not-allowed",
         },
 
+        [`.${inputAdornmentClasses.root} + &`]: {
+          paddingInlineStart: theme.spacing(2),
+        },
+
         [`label[data-shrink=false] + .${inputBaseClasses.formControl} &`]: {
           "&::placeholder": {
             color: theme.palette.text.secondary,
@@ -753,10 +1184,10 @@ export const components: ThemeOptions["components"] = {
     styleOverrides: {
       root: ({ theme }) => ({
         color: theme.palette.primary.main,
-        textDecoration: "none",
+        textDecoration: "underline",
 
         "&:hover": {
-          color: theme.palette.primary.main,
+          color: theme.palette.primary.dark,
           textDecoration: "underline",
         },
 
@@ -819,16 +1250,65 @@ export const components: ThemeOptions["components"] = {
       },
     ],
   },
+  MuiListItem: {
+    styleOverrides: {
+      root: {
+        textAlign: "start",
+      },
+    },
+  },
+  MuiListSubheader: {
+    styleOverrides: {
+      root: ({ theme }) => ({
+        paddingBlock: theme.spacing(2),
+        paddingInline: theme.spacing(4),
+        fontSize: theme.typography.caption.fontSize,
+        lineHeight: theme.typography.caption.lineHeight,
+        color: theme.palette.text.secondary,
+        textTransform: "uppercase",
+      }),
+    },
+  },
+  MuiMenuItem: {
+    styleOverrides: {
+      root: ({ theme }) => ({
+        justifyContent: "space-between",
+        gap: theme.spacing(2),
+
+        "&.Mui-selected": {
+          backgroundColor: "transparent",
+          color: theme.palette.primary.main,
+
+          "&:hover": {
+            backgroundColor: theme.palette.primary.lighter,
+          },
+        },
+      }),
+    },
+  },
   MuiNativeSelect: {
     defaultProps: {
       variant: "standard",
     },
     styleOverrides: {
+      select: {
+        "&:focus": {
+          backgroundColor: "transparent",
+        },
+      },
       icon: ({ theme }) => ({
+        insetInlineEnd: theme.spacing(3),
         color: theme.palette.text.primary,
       }),
     },
   },
+  MuiPopover: {
+    styleOverrides: {
+      paper: ({ theme }) => ({
+        marginBlockStart: theme.spacing(1),
+      }),
+    },
+  },
   MuiRadio: {
     defaultProps: {
       size: "small",
@@ -865,9 +1345,27 @@ export const components: ThemeOptions["components"] = {
   MuiSelect: {
     defaultProps: {
       variant: "standard",
+      IconComponent: ChevronDownIcon,
     },
     styleOverrides: {
+      select: ({ theme }) => ({
+        paddingBlock: `calc(${theme.spacing(3)} - ${theme.mixins.borderWidth})`,
+        paddingInline: theme.spacing(3),
+
+        "&:focus": {
+          backgroundColor: "transparent",
+        },
+
+        ".MuiBox-root": {
+          display: "flex",
+          flexWrap: "wrap",
+          gap: theme.spacing(1),
+          marginBlock: `-${theme.spacing(2)}`,
+          marginInline: `-${theme.spacing(2)}`,
+        },
+      }),
       icon: ({ theme }) => ({
+        insetInlineEnd: theme.spacing(3),
         color: theme.palette.text.primary,
       }),
     },
@@ -877,6 +1375,11 @@ export const components: ThemeOptions["components"] = {
       fontSize: "inherit",
       color: "inherit",
     },
+    styleOverrides: {
+      root: ({ theme }) => ({
+        fontSize: `${theme.typography.ui.lineHeight}rem`,
+      }),
+    },
   },
   MuiTab: {
     defaultProps: {
@@ -951,7 +1454,7 @@ export const components: ThemeOptions["components"] = {
         borderRadius: theme.mixins.borderRadius,
         marginBlock: theme.spacing(0),
         marginInline: theme.spacing(0),
-        lineHeight: "1.14285714",
+        lineHeight: theme.typography.ui.lineHeight,
 
         "&:only-child": {
           marginBlockEnd: 0,
@@ -960,6 +1463,16 @@ export const components: ThemeOptions["components"] = {
         ...(ownerState.stickyHeader && {
           borderCollapse: "separate",
         }),
+
+        caption: {
+          clip: "rect(0 0 0 0)",
+          clipPath: "inset(50%)",
+          height: "1px",
+          overflow: "hidden",
+          position: "absolute",
+          whiteSpace: "nowrap",
+          width: "1px",
+        },
       }),
     },
   },
@@ -1023,7 +1536,7 @@ export const components: ThemeOptions["components"] = {
         }),
 
         ...(ownerState.variant === "number" && {
-          textAlign: "right",
+          textAlign: "end",
           fontFeatureSettings: '"lnum", "tnum"',
         }),
 
@@ -1037,7 +1550,7 @@ export const components: ThemeOptions["components"] = {
         }),
 
         ...(ownerState.align === "left" && {
-          textAlign: "left",
+          textAlign: "start",
         }),
 
         ...(ownerState.align === "center" && {
@@ -1045,7 +1558,7 @@ export const components: ThemeOptions["components"] = {
         }),
 
         ...(ownerState.align === "right" && {
-          textAlign: "right",
+          textAlign: "end",
           flexDirection: "row-reverse",
         }),
 
@@ -1056,6 +1569,10 @@ export const components: ThemeOptions["components"] = {
     },
   },
   MuiTableContainer: {
+    defaultProps: {
+      // @ts-expect-error valid prop and value; MUI TS bug
+      component: "figure",
+    },
     styleOverrides: {
       root: ({ theme }) => ({
         width: "unset",
@@ -1121,8 +1638,8 @@ export const components: ThemeOptions["components"] = {
       }),
       icon: ({ theme, ownerState }) => ({
         fontSize: "inherit",
-        marginRight: 0,
-        marginLeft: 0,
+        marginInlineEnd: 0,
+        marginInlineStart: 0,
         opacity: 0,
         color: "inherit",
         transition: theme.transitions.create(["opacity", "transform"], {
@@ -1186,15 +1703,15 @@ export const components: ThemeOptions["components"] = {
           transformOrigin: "right center",
           ...(ownerState.isRtl
             ? {
-                marginLeft: theme.spacing(3),
+                marginInlineStart: theme.spacing(3),
                 ...(ownerState.touch === true && {
-                  marginLeft: theme.spacing(4),
+                  marginInlineStart: theme.spacing(4),
                 }),
               }
             : {
-                marginRight: theme.spacing(3),
+                marginInlineEnd: theme.spacing(3),
                 ...(ownerState.touch === true && {
-                  marginRight: theme.spacing(4),
+                  marginInlineEnd: theme.spacing(4),
                 }),
               }),
         },
@@ -1202,15 +1719,15 @@ export const components: ThemeOptions["components"] = {
           transformOrigin: "left center",
           ...(ownerState.isRtl
             ? {
-                marginRight: theme.spacing(3),
+                marginInlineEnd: theme.spacing(3),
                 ...(ownerState.touch === true && {
-                  marginRight: theme.spacing(4),
+                  marginInlineEnd: theme.spacing(4),
                 }),
               }
             : {
-                marginLeft: theme.spacing(3),
+                marginInlineStart: theme.spacing(3),
                 ...(ownerState.touch === true && {
-                  marginLeft: theme.spacing(4),
+                  marginInlineStart: theme.spacing(4),
                 }),
               }),
         },
@@ -1270,7 +1787,6 @@ export const components: ThemeOptions["components"] = {
         subtitle1: "p",
         body1: "p",
         inherit: "p",
-        kbd: "kbd",
         legend: "legend",
       },
     },
@@ -1278,22 +1794,6 @@ export const components: ThemeOptions["components"] = {
       paragraph: ({ theme }) => ({
         marginBottom: theme.spacing(4),
       }),
-      root: ({ theme, ownerState }) => ({
-        ...(ownerState.variant === "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)}`,
-          fontSize: theme.typography.subtitle1.fontSize,
-          fontWeight: theme.typography.fontWeightRegular,
-          lineHeight: theme.typography.h5.lineHeight,
-          boxShadow: `0 1px 1px 0 hsla(240, 6%, 12%, 0.05)`,
-        }),
-      }),
     },
   },
 };