@okta/odyssey-react-mui 0.16.1 → 0.18.0

package/dist/theme/components.js

@@ -9,15 +9,18 @@
  *
  * See the License for the specific language governing permissions and limitations under the License.
  */
+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";
 import { tableRowClasses } from "@mui/material/TableRow";
 import { tableSortLabelClasses } from "@mui/material/TableSortLabel";
 import { tooltipClasses } from "@mui/material/Tooltip";
-import { AlertTriangleFilledIcon, ArrowDownIcon, CheckCircleFilledIcon, InformationCircleFilledIcon } from "../iconDictionary/index.js";
+import { AlertTriangleFilledIcon, ArrowDownIcon, CheckCircleFilledIcon, ChevronDownIcon, CloseCircleFilledIcon, InformationCircleFilledIcon } from "../iconDictionary/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const components = {
   MuiAlert: {
@@ -64,7 +67,7 @@ export const components = {
             borderWidth: theme.mixins.borderWidth,
             borderRadius: theme.mixins.borderRadius,
             position: "relative",
-            alignItems: "start"
+            alignItems: "center"
           })
         };
       },
@@ -75,19 +78,16 @@ export const components = {
         } = _ref2;
         return { ...(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
           })
         };
       },
@@ -97,16 +97,19 @@ export const components = {
           theme
         } = _ref3;
         return {
-          marginRight: 0,
+          marginInlineEnd: 0,
           padding: 0,
-          fontSize: "1.429rem",
+          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 => {
@@ -141,15 +144,26 @@ export const components = {
           marginBottom: theme.spacing(1),
           lineHeight: theme.typography.h6.lineHeight,
           fontSize: theme.typography.h6.fontSize,
-          fontWeight: theme.typography.fontWeightBold
+          fontWeight: theme.typography.fontWeightBold,
+          "&:last-child": {
+            marginBlockEnd: 0
+          }
         };
       }
     }
   },
   MuiBackdrop: {
     styleOverrides: {
-      root: {
-        backgroundColor: "rgba(29,29,33,0.75)"
+      root: _ref6 => {
+        let {
+          ownerState
+        } = _ref6;
+        return {
+          backgroundColor: "rgba(29,29,33,0.75)",
+          ...(ownerState.invisible === true && {
+            backgroundColor: "transparent"
+          })
+        };
       }
     }
   },
@@ -162,10 +176,10 @@ export const components = {
       props: {
         variant: "primary"
       },
-      style: _ref6 => {
+      style: _ref7 => {
         let {
           theme
-        } = _ref6;
+        } = _ref7;
         return {
           fontWeight: 600,
           color: theme.palette.common.white,
@@ -190,10 +204,10 @@ export const components = {
       props: {
         variant: "secondary"
       },
-      style: _ref7 => {
+      style: _ref8 => {
         let {
           theme
-        } = _ref7;
+        } = _ref8;
         return {
           backgroundColor: theme.palette.grey[50],
           borderColor: theme.palette.grey[200],
@@ -220,10 +234,10 @@ export const components = {
       props: {
         variant: "danger"
       },
-      style: _ref8 => {
+      style: _ref9 => {
         let {
           theme
-        } = _ref8;
+        } = _ref9;
         return {
           backgroundColor: theme.palette.error.main,
           color: theme.palette.common.white,
@@ -248,12 +262,12 @@ export const components = {
       props: {
         variant: "floating"
       },
-      style: _ref9 => {
+      style: _ref10 => {
         let {
           theme
-        } = _ref9;
+        } = _ref10;
         return {
-          backgroundColor: theme.palette.common.white,
+          backgroundColor: "transparent",
           color: theme.palette.text.primary,
           borderColor: "transparent",
           "&:hover, &:focus-visible": {
@@ -278,13 +292,13 @@ export const components = {
       props: {
         size: "s"
       },
-      style: _ref10 => {
+      style: _ref11 => {
         let {
           theme
-        } = _ref10;
+        } = _ref11;
         return {
           paddingBlock: `calc(${theme.spacing(2)} - 1px)`,
-          paddingInline: `calc(${theme.spacing(3)} - 1px)`,
+          paddingInline: `calc(${theme.spacing(2)} - 1px)`,
           fontSize: "1rem"
         };
       }
@@ -292,10 +306,10 @@ export const components = {
       props: {
         size: "l"
       },
-      style: _ref11 => {
+      style: _ref12 => {
         let {
           theme
-        } = _ref11;
+        } = _ref12;
         return {
           paddingBlock: `calc(${theme.spacing(4)} - 1px)`,
           paddingInline: `calc(${theme.spacing(4)} - 1px)`
@@ -305,10 +319,10 @@ export const components = {
       props: {
         fullWidth: true
       },
-      style: _ref12 => {
+      style: _ref13 => {
         let {
           theme
-        } = _ref12;
+        } = _ref13;
         return {
           display: "block",
           width: "100%",
@@ -331,15 +345,15 @@ export const components = {
       }
     }],
     styleOverrides: {
-      root: _ref13 => {
+      root: _ref14 => {
         let {
           theme
-        } = _ref13;
+        } = _ref14;
         return {
           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",
@@ -352,7 +366,7 @@ export const components = {
           outlineColor: "transparent",
           outlineOffset: "0",
           fontSize: theme.typography.body1.fontSize,
-          lineHeight: "1.14285714",
+          lineHeight: theme.typography.ui.lineHeight,
           whiteSpace: "nowrap",
           ".MuiButton-root + &": {
             marginInlineStart: theme.spacing(2)
@@ -367,7 +381,20 @@ export const components = {
             pointerEvents: "inherit"
           },
           ".MuiButton-startIcon > *:nth-of-type(1)": {
-            fontSize: "inherit"
+            fontSize: `${theme.typography.ui.lineHeight}em`
+          }
+        };
+      },
+      startIcon: _ref15 => {
+        let {
+          theme
+        } = _ref15;
+        return {
+          display: "inline-flex",
+          margin: 0,
+          marginInlineEnd: theme.spacing(2),
+          "&:only-child": {
+            margin: 0
           }
         };
       }
@@ -378,22 +405,15 @@ export const components = {
       disableRipple: true
     }
   },
-  MuiCssBaseline: {
-    styleOverrides: {
-      boxSizing: "border-box",
-      fontFeatureSettings: "'lnum','pnum'",
-      fontVariant: "normal"
-    }
-  },
   MuiCheckbox: {
     defaultProps: {
       size: "small"
     },
     styleOverrides: {
-      root: _ref14 => {
+      root: _ref16 => {
         let {
           theme
-        } = _ref14;
+        } = _ref16;
         return {
           borderRadius: "4px",
           "&:hover": {
@@ -421,6 +441,97 @@ export const components = {
       }
     }
   },
+  MuiChip: {
+    defaultProps: {
+      deleteIcon: _jsx(CloseCircleFilledIcon, {})
+    },
+    styleOverrides: {
+      root: _ref17 => {
+        let {
+          theme,
+          ownerState
+        } = _ref17;
+        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.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: {
       size: "1.14285714rem",
@@ -430,20 +541,20 @@ export const components = {
       variant: "indeterminate"
     },
     styleOverrides: {
-      root: _ref15 => {
+      root: _ref18 => {
         let {
           theme,
           ownerState
-        } = _ref15;
+        } = _ref18;
         return { ...(ownerState.color !== "inherit" && {
             color: theme.palette.primary.dark
           })
         };
       },
-      circle: _ref16 => {
+      circle: _ref19 => {
         let {
           ownerState
-        } = _ref16;
+        } = _ref19;
         return { ...(ownerState.variant === "indeterminate" && {
             strokeDasharray: "160%, 360%"
           })
@@ -451,15 +562,288 @@ export const components = {
       }
     }
   },
+  MuiCssBaseline: {
+    styleOverrides: themeParam => `
+      html {
+        font-size: calc((${themeParam.typography.fontSize} / 16) * 100%);
+      }
+    `
+  },
+  MuiScopedCssBaseline: {
+    styleOverrides: {
+      root: _ref20 => {
+        let {
+          theme
+        } = _ref20;
+        return {
+          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),
+            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"
     },
     styleOverrides: {
-      paper: _ref17 => {
+      paper: _ref21 => {
         let {
           theme
-        } = _ref17;
+        } = _ref21;
         return {
           maxWidth: `calc(${theme.mixins.maxWidth} + (${theme.spacing(6)} * 2))`,
           boxShadow: "none",
@@ -470,10 +854,10 @@ export const components = {
   },
   MuiDialogActions: {
     styleOverrides: {
-      root: _ref18 => {
+      root: _ref22 => {
         let {
           theme
-        } = _ref18;
+        } = _ref22;
         return {
           paddingBlockStart: theme.spacing(4),
           paddingBlockEnd: theme.spacing(6),
@@ -484,11 +868,11 @@ export const components = {
   },
   MuiDialogContent: {
     styleOverrides: {
-      root: _ref19 => {
+      root: _ref23 => {
         let {
           theme,
           ownerState
-        } = _ref19;
+        } = _ref23;
         return {
           padding: 0,
           paddingBlock: theme.spacing(4),
@@ -507,10 +891,10 @@ export const components = {
       color: "text.primary"
     },
     styleOverrides: {
-      root: _ref20 => {
+      root: _ref24 => {
         let {
           theme
-        } = _ref20;
+        } = _ref24;
         return {
           marginBlockEnd: theme.spacing(5),
           "&:last-child": {
@@ -526,10 +910,10 @@ export const components = {
       variant: "h5"
     },
     styleOverrides: {
-      root: _ref21 => {
+      root: _ref25 => {
         let {
           theme
-        } = _ref21;
+        } = _ref25;
         return {
           display: "flex",
           justifyContent: "space-between",
@@ -548,11 +932,11 @@ export const components = {
       margin: "normal"
     },
     styleOverrides: {
-      root: _ref22 => {
+      root: _ref26 => {
         let {
           ownerState,
           theme
-        } = _ref22;
+        } = _ref26;
         return {
           width: "100%",
           maxWidth: "32rem",
@@ -579,24 +963,24 @@ export const components = {
   },
   MuiFormControlLabel: {
     styleOverrides: {
-      root: _ref23 => {
+      root: _ref27 => {
         let {
           theme,
           ownerState
-        } = _ref23;
+        } = _ref27;
         return {
           gap: theme.spacing(2),
-          marginLeft: 0,
-          marginRight: 0,
+          marginInlineStart: 0,
+          marginInlineEnd: 0,
           ...(ownerState.labelPlacement === "start" && {
-            marginLeft: 0,
-            marginRight: 0
+            marginInlineStart: 0,
+            marginInlineEnd: 0
           }),
           ...(ownerState.labelPlacement === "top" && {
-            marginLeft: 0
+            marginInlineStart: 0
           }),
           ...(ownerState.labelPlacement === "bottom" && {
-            marginLeft: 0
+            marginInlineStart: 0
           }),
           "&:not(:last-child)": {
             marginBottom: theme.spacing(2)
@@ -625,10 +1009,10 @@ export const components = {
       variant: "standard"
     },
     styleOverrides: {
-      root: _ref24 => {
+      root: _ref28 => {
         let {
           theme
-        } = _ref24;
+        } = _ref28;
         return {
           fontSize: theme.typography.subtitle1.fontSize,
           lineHeight: "1.33333333",
@@ -640,20 +1024,21 @@ export const components = {
           marginBottom: theme.spacing(2),
           "&:last-child": {
             marginBottom: 0
-          }
+          },
+          textAlign: "start"
         };
       }
     }
   },
   MuiFormLabel: {
     styleOverrides: {
-      root: _ref25 => {
+      root: _ref29 => {
         let {
           theme
-        } = _ref25;
+        } = _ref29;
         return {
           color: theme.palette.text.primary,
-          lineHeight: "1.14285714",
+          lineHeight: theme.typography.ui.lineHeight,
           fontSize: "1rem",
           fontWeight: 600,
           marginBottom: theme.spacing(2),
@@ -666,10 +1051,18 @@ export const components = {
   },
   MuiIconButton: {
     styleOverrides: {
-      root: _ref26 => {
+      edgeEnd: _ref30 => {
         let {
           theme
-        } = _ref26;
+        } = _ref30;
+        return {
+          marginInlineEnd: theme.spacing(1)
+        };
+      },
+      root: _ref31 => {
+        let {
+          theme
+        } = _ref31;
         return {
           padding: theme.spacing(1),
           fontSize: theme.typography.body1.fontSize,
@@ -714,23 +1107,24 @@ export const components = {
       variant: "outlined"
     },
     styleOverrides: {
-      root: _ref27 => {
+      root: _ref32 => {
         let {
           theme,
           ownerState
-        } = _ref27;
+        } = _ref32;
         return {
           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"
@@ -745,30 +1139,20 @@ export const components = {
       required: true
     },
     styleOverrides: {
-      root: _ref28 => {
+      root: _ref33 => {
         let {
           ownerState,
           theme
-        } = _ref28;
+        } = _ref33;
         return { ...theme.typography.body1,
           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%"
           }),
@@ -804,19 +1188,23 @@ export const components = {
           }
         };
       },
-      input: _ref29 => {
+      input: _ref34 => {
         let {
           theme
-        } = _ref29;
+        } = _ref34;
         return {
           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,
@@ -833,10 +1221,10 @@ export const components = {
       shrink: false
     },
     styleOverrides: {
-      root: _ref30 => {
+      root: _ref35 => {
         let {
           ownerState
-        } = _ref30;
+        } = _ref35;
         return {
           display: "flex",
           justifyContent: "space-between",
@@ -858,15 +1246,15 @@ export const components = {
   },
   MuiLink: {
     styleOverrides: {
-      root: _ref31 => {
+      root: _ref36 => {
         let {
           theme
-        } = _ref31;
+        } = _ref36;
         return {
           color: theme.palette.primary.main,
-          textDecoration: "none",
+          textDecoration: "underline",
           "&:hover": {
-            color: theme.palette.primary.main,
+            color: theme.palette.primary.dark,
             textDecoration: "underline"
           },
           "&:focus-visible": {
@@ -904,10 +1292,10 @@ export const components = {
       props: {
         variant: "monochrome"
       },
-      style: _ref32 => {
+      style: _ref37 => {
         let {
           theme
-        } = _ref32;
+        } = _ref37;
         return {
           color: theme.palette.text.primary,
           textDecoration: "underline",
@@ -927,30 +1315,92 @@ export const components = {
       }
     }]
   },
+  MuiListItem: {
+    styleOverrides: {
+      root: {
+        textAlign: "start"
+      }
+    }
+  },
+  MuiListSubheader: {
+    styleOverrides: {
+      root: _ref38 => {
+        let {
+          theme
+        } = _ref38;
+        return {
+          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: _ref39 => {
+        let {
+          theme
+        } = _ref39;
+        return {
+          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: {
-      icon: _ref33 => {
+      select: {
+        "&:focus": {
+          backgroundColor: "transparent"
+        }
+      },
+      icon: _ref40 => {
         let {
           theme
-        } = _ref33;
+        } = _ref40;
         return {
+          insetInlineEnd: theme.spacing(3),
           color: theme.palette.text.primary
         };
       }
     }
   },
+  MuiPopover: {
+    styleOverrides: {
+      paper: _ref41 => {
+        let {
+          theme
+        } = _ref41;
+        return {
+          marginBlockStart: theme.spacing(1)
+        };
+      }
+    }
+  },
   MuiRadio: {
     defaultProps: {
       size: "small"
     },
     styleOverrides: {
-      root: _ref34 => {
+      root: _ref42 => {
         let {
           theme
-        } = _ref34;
+        } = _ref42;
         return {
           "&:hover": {
             backgroundColor: "transparent"
@@ -982,14 +1432,35 @@ export const components = {
   },
   MuiSelect: {
     defaultProps: {
-      variant: "standard"
+      variant: "standard",
+      IconComponent: ChevronDownIcon
     },
     styleOverrides: {
-      icon: _ref35 => {
+      select: _ref43 => {
         let {
           theme
-        } = _ref35;
+        } = _ref43;
+        return {
+          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: _ref44 => {
+        let {
+          theme
+        } = _ref44;
         return {
+          insetInlineEnd: theme.spacing(3),
           color: theme.palette.text.primary
         };
       }
@@ -999,6 +1470,16 @@ export const components = {
     defaultProps: {
       fontSize: "inherit",
       color: "inherit"
+    },
+    styleOverrides: {
+      root: _ref45 => {
+        let {
+          theme
+        } = _ref45;
+        return {
+          fontSize: `${theme.typography.ui.lineHeight}rem`
+        };
+      }
     }
   },
   MuiTab: {
@@ -1006,11 +1487,11 @@ export const components = {
       iconPosition: "start"
     },
     styleOverrides: {
-      root: _ref36 => {
+      root: _ref46 => {
         let {
           theme,
           ownerState
-        } = _ref36;
+        } = _ref46;
         return {
           maxWidth: `calc(${theme.mixins.maxWidth} / 2)`,
           minWidth: "unset",
@@ -1071,11 +1552,11 @@ export const components = {
   },
   MuiTable: {
     styleOverrides: {
-      root: _ref37 => {
+      root: _ref47 => {
         let {
           theme,
           ownerState
-        } = _ref37;
+        } = _ref47;
         return {
           display: "table",
           width: "auto",
@@ -1085,24 +1566,33 @@ export const 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
           },
           ...(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: _ref38 => {
+      root: _ref48 => {
         let {
           theme,
           ownerState
-        } = _ref38;
+        } = _ref48;
         return { ...theme.typography.body1,
           maxWidth: theme.mixins.maxWidth,
           borderBottom: `${theme.mixins.borderWidth} ${theme.mixins.borderStyle} ${theme.palette.grey[100]}`,
@@ -1149,7 +1639,7 @@ export const components = {
             fontWeight: theme.typography.fontWeightBold
           }),
           ...(ownerState.variant === "number" && {
-            textAlign: "right",
+            textAlign: "end",
             fontFeatureSettings: '"lnum", "tnum"'
           }),
           ...(ownerState.padding === "checkbox" && {
@@ -1160,13 +1650,13 @@ export const components = {
             padding: 0
           }),
           ...(ownerState.align === "left" && {
-            textAlign: "left"
+            textAlign: "start"
           }),
           ...(ownerState.align === "center" && {
             textAlign: "center"
           }),
           ...(ownerState.align === "right" && {
-            textAlign: "right",
+            textAlign: "end",
             flexDirection: "row-reverse"
           }),
           ...(ownerState.align === "justify" && {
@@ -1177,11 +1667,14 @@ export const components = {
     }
   },
   MuiTableContainer: {
+    defaultProps: {
+      component: "figure"
+    },
     styleOverrides: {
-      root: _ref39 => {
+      root: _ref49 => {
         let {
           theme
-        } = _ref39;
+        } = _ref49;
         return {
           width: "unset",
           maxWidth: "100%",
@@ -1198,10 +1691,10 @@ export const components = {
   },
   MuiTableRow: {
     styleOverrides: {
-      root: _ref40 => {
+      root: _ref50 => {
         let {
           theme
-        } = _ref40;
+        } = _ref50;
         return {
           verticalAlign: "unset",
           [`&.${tableRowClasses.root}:hover`]: {
@@ -1222,10 +1715,10 @@ export const components = {
       IconComponent: ArrowDownIcon
     },
     styleOverrides: {
-      root: _ref41 => {
+      root: _ref51 => {
         let {
           theme
-        } = _ref41;
+        } = _ref51;
         return {
           cursor: "pointer",
           display: "inline-flex",
@@ -1254,15 +1747,15 @@ export const components = {
           }
         };
       },
-      icon: _ref42 => {
+      icon: _ref52 => {
         let {
           theme,
           ownerState
-        } = _ref42;
+        } = _ref52;
         return {
           fontSize: "inherit",
-          marginRight: 0,
-          marginLeft: 0,
+          marginInlineEnd: 0,
+          marginInlineStart: 0,
           opacity: 0,
           color: "inherit",
           transition: theme.transitions.create(["opacity", "transform"], {
@@ -1287,19 +1780,19 @@ export const components = {
   },
   MuiTabs: {
     styleOverrides: {
-      root: _ref43 => {
+      root: _ref53 => {
         let {
           theme
-        } = _ref43;
+        } = _ref53;
         return {
           minHeight: "unset",
           marginBottom: theme.spacing(5)
         };
       },
-      flexContainer: _ref44 => {
+      flexContainer: _ref54 => {
         let {
           theme
-        } = _ref44;
+        } = _ref54;
         return {
           gap: theme.spacing(5),
           borderBottom: `${theme.mixins.borderWidth} ${theme.mixins.borderStyle} ${theme.palette.divider}`
@@ -1315,11 +1808,11 @@ export const components = {
       placement: "top"
     },
     styleOverrides: {
-      tooltip: _ref45 => {
+      tooltip: _ref55 => {
         let {
           theme,
           ownerState
-        } = _ref45;
+        } = _ref55;
         return {
           maxWidth: `calc(${theme.mixins.maxWidth} / 2)`,
           paddingBlock: theme.spacing(2),
@@ -1338,28 +1831,28 @@ export const components = {
           [`.${tooltipClasses.popper}[data-popper-placement*="left"] &`]: {
             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)
               })
             })
           },
           [`.${tooltipClasses.popper}[data-popper-placement*="right"] &`]: {
             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)
               })
             })
           },
@@ -1379,10 +1872,10 @@ export const components = {
           }
         };
       },
-      arrow: _ref46 => {
+      arrow: _ref56 => {
         let {
           theme
-        } = _ref46;
+        } = _ref56;
         return {
           color: theme.palette.grey[900],
           "&::before": {
@@ -1417,39 +1910,17 @@ export const components = {
         subtitle1: "p",
         body1: "p",
         inherit: "p",
-        kbd: "kbd",
         legend: "legend"
       }
     },
     styleOverrides: {
-      paragraph: _ref47 => {
+      paragraph: _ref57 => {
         let {
           theme
-        } = _ref47;
+        } = _ref57;
         return {
           marginBottom: theme.spacing(4)
         };
-      },
-      root: _ref48 => {
-        let {
-          theme,
-          ownerState
-        } = _ref48;
-        return { ...(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)`
-          })
-        };
       }
     }
   }