@okta/odyssey-react-mui 1.13.3 → 1.13.5

package/dist/theme/components.js

@@ -36,11 +36,10 @@ import { typographyClasses } from "@mui/material/Typography";
 import { CheckCircleFilledIcon, CheckIcon, ChevronDownIcon, CloseCircleFilledIcon, CloseIcon, DangerDiamondFilledIcon, InformationCircleFilledIcon, SubtractIcon, WarningFilledIcon } from "../icons.generated/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-export const components = _ref => {
-  let {
-    odysseyTokens,
-    shadowDomElement
-  } = _ref;
+export const components = ({
+  odysseyTokens,
+  shadowDomElement
+}) => {
   return {
     MuiAccordion: {
       styleOverrides: {
@@ -132,203 +131,188 @@ export const components = _ref => {
         }
       },
       styleOverrides: {
-        root: _ref2 => {
-          let {
-            ownerState
-          } = _ref2;
-          return {
-            padding: odysseyTokens.Spacing4,
-            gap: odysseyTokens.Spacing4,
-            color: odysseyTokens.TypographyColorBody,
-            border: 0,
+        root: ({
+          ownerState
+        }) => ({
+          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" && {
-              backgroundColor: odysseyTokens.HueGreen100,
-              ...(ownerState.variant === "toast" && {
-                backgroundColor: odysseyTokens.HueGreen100.concat(odysseyTokens.PaletteAlphaSemi)
-              })
+              color: odysseyTokens.PaletteSuccessHeading
             }),
             ...(ownerState.severity === "info" && {
-              backgroundColor: odysseyTokens.HueBlue100,
-              ...(ownerState.variant === "toast" && {
-                backgroundColor: odysseyTokens.HueBlue100.concat(odysseyTokens.PaletteAlphaSemi)
-              })
+              color: odysseyTokens.PalettePrimaryHeading
             }),
             ...(ownerState.severity === "error" && {
-              backgroundColor: odysseyTokens.HueRed100,
-              ...(ownerState.variant === "toast" && {
-                backgroundColor: odysseyTokens.HueRed100.concat(odysseyTokens.PaletteAlphaSemi)
-              })
+              color: odysseyTokens.PaletteDangerHeading
             }),
             ...(ownerState.severity === "warning" && {
-              backgroundColor: odysseyTokens.HueYellow100,
-              ...(ownerState.variant === "toast" && {
-                backgroundColor: odysseyTokens.HueYellow100.concat(odysseyTokens.PaletteAlphaSemi)
-              })
+              color: odysseyTokens.PaletteWarningHeading
             }),
-            [`& .${alertTitleClasses.root}`]: {
-              ...(ownerState.severity === "success" && {
-                color: odysseyTokens.PaletteSuccessHeading
-              }),
-              ...(ownerState.severity === "info" && {
-                color: odysseyTokens.PalettePrimaryHeading
-              }),
-              ...(ownerState.severity === "error" && {
-                color: odysseyTokens.PaletteDangerHeading
-              }),
-              ...(ownerState.severity === "warning" && {
-                color: odysseyTokens.PaletteWarningHeading
-              }),
-              ...(ownerState.variant === "banner" && {
-                marginBlockEnd: 0
-              }),
-              ...(ownerState.variant === "callout" && {
-                fontSize: odysseyTokens.TypographySizeHeading5,
-                lineHeight: odysseyTokens.TypographyLineHeightHeading5
-              })
-            },
             ...(ownerState.variant === "banner" && {
-              position: "relative",
-              justifyContent: "center",
-              alignItems: "center",
-              borderRadius: 0,
-              ...(ownerState.onClose !== undefined && {
-                paddingInline: odysseyTokens.Spacing6
-              })
+              marginBlockEnd: 0
             }),
             ...(ownerState.variant === "callout" && {
-              borderRadius: odysseyTokens.BorderRadiusMain,
-              padding: odysseyTokens.Spacing5,
-              "&:not(:last-child)": {
-                marginBottom: odysseyTokens.Spacing6
-              }
-            }),
-            ...(ownerState.variant === "toast" && {
-              maxWidth: odysseyTokens.TypographyLineLengthMax,
-              borderRadius: odysseyTokens.BorderRadiusOuter,
-              position: "relative",
-              paddingInlineStart: odysseyTokens.Spacing5,
-              paddingInlineEnd: odysseyTokens.Spacing4,
-              paddingBlock: odysseyTokens.Spacing3,
-              alignItems: "flex-start",
-              backdropFilter: "blur(10px)"
+              fontSize: odysseyTokens.TypographySizeHeading5,
+              lineHeight: odysseyTokens.TypographyLineHeightHeading5
             })
-          };
-        },
-        action: _ref3 => {
-          let {
-            ownerState
-          } = _ref3;
-          return {
-            ...(ownerState.variant === "banner" && {
-              padding: 0,
-              marginInlineEnd: 0,
-              insetBlockStart: "50%",
-              insetInlineEnd: odysseyTokens.Spacing2,
-              position: "absolute",
-              transform: "translateY(-50%)"
-            }),
-            ...(ownerState.variant === "toast" && {
-              padding: 0,
-              marginInline: 0,
-              marginBlock: 1,
-              [`& .${buttonClasses.root}`]: {
-                "&:hover, &:focus": {
-                  backgroundColor: odysseyTokens.PaletteNeutralDark.concat("11")
-                },
-                "&:active": {
-                  backgroundColor: odysseyTokens.PaletteNeutralDark.concat("22")
-                }
-              }
+          },
+          ...(ownerState.variant === "banner" && {
+            position: "relative",
+            justifyContent: "center",
+            alignItems: "center",
+            borderRadius: 0,
+            ...(ownerState.onClose !== undefined && {
+              paddingInline: odysseyTokens.Spacing6
             })
-          };
-        },
-        icon: _ref4 => {
-          let {
-            ownerState
-          } = _ref4;
-          return {
-            marginInlineEnd: 0,
-            padding: 0,
-            height: `calc(${odysseyTokens.TypographySizeHeading6} * ${odysseyTokens.TypographyLineHeightHeading6})`,
-            opacity: 1,
-            ...(ownerState.severity === "info" && {
-              color: odysseyTokens.PalettePrimaryMain
-            }),
-            ...(ownerState.severity === "error" && {
-              color: odysseyTokens.PaletteDangerMain
-            }),
-            ...(ownerState.severity === "success" && {
-              color: odysseyTokens.PaletteSuccessMain
-            }),
-            ...(ownerState.severity === "warning" && {
-              color: odysseyTokens.HueYellow400
-            }),
-            ...(ownerState.variant === "toast" && {
-              marginBlock: odysseyTokens.Spacing2
-            }),
-            ...(ownerState.variant === "callout" && {
-              marginBlock: 1.5
-            }),
-            [`& .${svgIconClasses.root}`]: {
-              alignSelf: "center",
-              fontSize: odysseyTokens.TypographySizeHeading6
+          }),
+          ...(ownerState.variant === "callout" && {
+            borderRadius: odysseyTokens.BorderRadiusMain,
+            padding: odysseyTokens.Spacing5,
+            "&:not(:last-child)": {
+              marginBottom: odysseyTokens.Spacing6
             }
-          };
-        },
-        message: _ref5 => {
-          let {
-            ownerState
-          } = _ref5;
-          return {
+          }),
+          ...(ownerState.variant === "toast" && {
+            maxWidth: odysseyTokens.TypographyLineLengthMax,
+            borderRadius: odysseyTokens.BorderRadiusOuter,
+            position: "relative",
+            paddingInlineStart: odysseyTokens.Spacing5,
+            paddingInlineEnd: odysseyTokens.Spacing4,
+            paddingBlock: odysseyTokens.Spacing3,
+            alignItems: "flex-start",
+            backdropFilter: "blur(10px)"
+          })
+        }),
+        action: ({
+          ownerState
+        }) => ({
+          ...(ownerState.variant === "banner" && {
             padding: 0,
-            overflow: "visible",
-            ...(ownerState.variant === "banner" && {
-              display: "flex",
-              justifyContent: "space-between",
-              gap: odysseyTokens.Spacing4
-            }),
-            ...(ownerState.variant === "toast" && {
-              flexGrow: 1,
-              marginBlock: odysseyTokens.Spacing2
-            }),
-            [`& .${linkClasses.root}`]: {
-              display: "inline-block",
-              marginTop: odysseyTokens.Spacing5
+            marginInlineEnd: 0,
+            insetBlockStart: "50%",
+            insetInlineEnd: odysseyTokens.Spacing2,
+            position: "absolute",
+            transform: "translateY(-50%)"
+          }),
+          ...(ownerState.variant === "toast" && {
+            padding: 0,
+            marginInline: 0,
+            marginBlock: 1,
+            [`& .${buttonClasses.root}`]: {
+              "&:hover, &:focus": {
+                backgroundColor: odysseyTokens.PaletteNeutralDark.concat("11")
+              },
+              "&:active": {
+                backgroundColor: odysseyTokens.PaletteNeutralDark.concat("22")
+              }
             }
-          };
-        }
+          })
+        }),
+        icon: ({
+          ownerState
+        }) => ({
+          marginInlineEnd: 0,
+          padding: 0,
+          height: `calc(${odysseyTokens.TypographySizeHeading6} * ${odysseyTokens.TypographyLineHeightHeading6})`,
+          opacity: 1,
+          ...(ownerState.severity === "info" && {
+            color: odysseyTokens.PalettePrimaryMain
+          }),
+          ...(ownerState.severity === "error" && {
+            color: odysseyTokens.PaletteDangerMain
+          }),
+          ...(ownerState.severity === "success" && {
+            color: odysseyTokens.PaletteSuccessMain
+          }),
+          ...(ownerState.severity === "warning" && {
+            color: odysseyTokens.HueYellow400
+          }),
+          ...(ownerState.variant === "toast" && {
+            marginBlock: odysseyTokens.Spacing2
+          }),
+          ...(ownerState.variant === "callout" && {
+            marginBlock: 1.5
+          }),
+          [`& .${svgIconClasses.root}`]: {
+            alignSelf: "center",
+            fontSize: odysseyTokens.TypographySizeHeading6
+          }
+        }),
+        message: ({
+          ownerState
+        }) => ({
+          padding: 0,
+          overflow: "visible",
+          ...(ownerState.variant === "banner" && {
+            display: "flex",
+            justifyContent: "space-between",
+            gap: odysseyTokens.Spacing4
+          }),
+          ...(ownerState.variant === "toast" && {
+            flexGrow: 1,
+            marginBlock: odysseyTokens.Spacing2
+          }),
+          [`& .${linkClasses.root}`]: {
+            display: "inline-block",
+            marginTop: odysseyTokens.Spacing5
+          }
+        })
       }
     },
     MuiAlertTitle: {
       styleOverrides: {
-        root: _ref6 => {
-          let {
-            ownerState
-          } = _ref6;
-          return {
-            marginBlockStart: 0,
-            marginBlockEnd: odysseyTokens.Spacing2,
-            lineHeight: odysseyTokens.TypographyLineHeightHeading6,
-            fontSize: odysseyTokens.TypographySizeHeading6,
-            fontWeight: odysseyTokens.TypographyWeightHeading,
-            fontFamily: odysseyTokens.TypographyFamilyHeading,
-            ...(ownerState.severity === "info" && {
-              color: odysseyTokens.PalettePrimaryDark
-            }),
-            ...(ownerState.severity === "error" && {
-              color: odysseyTokens.PaletteDangerDarker
-            }),
-            ...(ownerState.severity === "success" && {
-              color: odysseyTokens.PaletteSuccessDarker
-            }),
-            ...(ownerState.severity === "warning" && {
-              color: odysseyTokens.PaletteWarningDarker
-            }),
-            [`&:last-child`]: {
-              marginBlockEnd: 0
-            }
-          };
-        }
+        root: ({
+          ownerState
+        }) => ({
+          marginBlockStart: 0,
+          marginBlockEnd: odysseyTokens.Spacing2,
+          lineHeight: odysseyTokens.TypographyLineHeightHeading6,
+          fontSize: odysseyTokens.TypographySizeHeading6,
+          fontWeight: odysseyTokens.TypographyWeightHeading,
+          fontFamily: odysseyTokens.TypographyFamilyHeading,
+          ...(ownerState.severity === "info" && {
+            color: odysseyTokens.PalettePrimaryDark
+          }),
+          ...(ownerState.severity === "error" && {
+            color: odysseyTokens.PaletteDangerDarker
+          }),
+          ...(ownerState.severity === "success" && {
+            color: odysseyTokens.PaletteSuccessDarker
+          }),
+          ...(ownerState.severity === "warning" && {
+            color: odysseyTokens.PaletteWarningDarker
+          }),
+          [`&:last-child`]: {
+            marginBlockEnd: 0
+          }
+        })
       }
     },
     MuiAutocomplete: {
@@ -361,29 +345,26 @@ export const components = _ref => {
           marginRight: "unset",
           padding: odysseyTokens.Spacing1
         },
-        endAdornment: _ref7 => {
-          let {
-            ownerState
-          } = _ref7;
-          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"
-            })
-          };
-        },
+        endAdornment: ({
+          ownerState
+        }) => ({
+          display: "flex",
+          gap: odysseyTokens.Spacing1,
+          top: "unset",
+          right: "unset",
+          insetBlockStart: odysseyTokens.Spacing2,
+          insetInlineEnd: odysseyTokens.Spacing2,
+          maxHeight: "unset",
+          alignItems: "center",
+          whiteSpace: "nowrap",
+          color: odysseyTokens.TypographyColorSubordinate,
+          ...(ownerState.disabled === true && {
+            display: "none"
+          }),
+          ...(ownerState.readOnly === true && {
+            display: "none"
+          })
+        }),
         listbox: {
           borderWidth: odysseyTokens.BorderWidthMain,
           borderStyle: odysseyTokens.BorderStyleMain,
@@ -426,34 +407,28 @@ export const components = _ref => {
           background: "transparent",
           paddingBlockStart: odysseyTokens.Spacing1
         },
-        inputRoot: _ref8 => {
-          let {
-            ownerState
-          } = _ref8;
-          return {
-            ...(ownerState.readOnly === true && {
-              backgroundColor: odysseyTokens.HueNeutral50,
-              [`&:not(:hover)`]: {
-                borderColor: "transparent"
-              }
-            })
-          };
-        }
+        inputRoot: ({
+          ownerState
+        }) => ({
+          ...(ownerState.readOnly === true && {
+            backgroundColor: odysseyTokens.HueNeutral50,
+            [`&:not(:hover)`]: {
+              borderColor: "transparent"
+            }
+          })
+        })
       }
     },
     MuiBackdrop: {
       styleOverrides: {
-        root: _ref9 => {
-          let {
-            ownerState
-          } = _ref9;
-          return {
-            backgroundColor: "rgba(29,29,33,0.75)",
-            ...(ownerState.invisible === true && {
-              backgroundColor: "transparent"
-            })
-          };
-        }
+        root: ({
+          ownerState
+        }) => ({
+          backgroundColor: "rgba(29,29,33,0.75)",
+          ...(ownerState.invisible === true && {
+            backgroundColor: "transparent"
+          })
+        })
       }
     },
     MuiBreadcrumbs: {
@@ -503,181 +478,172 @@ export const components = _ref => {
         disableElevation: true
       },
       styleOverrides: {
-        root: _ref10 => {
-          let {
-            ownerState
-          } = _ref10;
-          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
+        root: ({
+          ownerState
+        }) => ({
+          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
             },
-            "&:focus-visible": {
-              boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PalettePrimaryMain}`,
-              outline: "2px solid transparent",
-              outlineOffset: "1px"
+            "&:active": {
+              backgroundColor: odysseyTokens.PalettePrimaryDarker
             },
             "&:disabled": {
-              pointerEvents: "none"
-            },
-            [`.${buttonClasses.startIcon}, .${buttonClasses.endIcon}`]: {
-              "& > *:nth-of-type(1)": {
-                fontSize: `${odysseyTokens.TypographyLineHeightUi}em`
-              }
+              color: odysseyTokens.PalettePrimaryLight,
+              backgroundColor: odysseyTokens.HueBlue100
+            }
+          }),
+          ...(ownerState.variant === "secondary" && {
+            backgroundColor: "transparent",
+            borderColor: odysseyTokens.HueNeutral300,
+            color: odysseyTokens.TypographyColorBody,
+            "&:hover": {
+              backgroundColor: odysseyTokens.HueNeutral100
             },
-            ...(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" && {
+            "&:active": {
               backgroundColor: "transparent",
-              borderColor: odysseyTokens.HueNeutral300,
-              color: odysseyTokens.TypographyColorBody,
-              "&:hover": {
-                backgroundColor: odysseyTokens.HueNeutral100
-              },
-              "&:active": {
-                backgroundColor: "transparent",
-                borderColor: odysseyTokens.BorderColorPrimaryControl,
-                color: odysseyTokens.TypographyColorAction
-              },
-              "&:disabled": {
-                backgroundColor: odysseyTokens.HueNeutral100,
-                borderColor: "transparent",
-                color: odysseyTokens.TypographyColorDisabled
-              }
-            }),
-            ...(ownerState.variant === "tertiary" && {
+              borderColor: odysseyTokens.BorderColorPrimaryControl,
+              color: odysseyTokens.TypographyColorAction
+            },
+            "&:disabled": {
               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" && {
+              borderColor: "transparent",
+              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.TypographyColorBody,
-              "&:hover": {
-                backgroundColor: odysseyTokens.HueNeutral100
-              },
-              "&:active": {
-                backgroundColor: odysseyTokens.HueNeutral200
-              },
-              "&:disabled": {
-                backgroundColor: "transparent",
-                color: odysseyTokens.TypographyColorDisabled
-              }
-            }),
+              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" && {
-              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: _ref11 => {
-          let {
-            ownerState
-          } = _ref11;
-          return {
-            display: "inline-flex",
-            margin: 0,
-            marginInlineStart: odysseyTokens.Spacing2,
-            ...(ownerState.children === undefined && {
-              marginInlineStart: 0
-            })
-          };
-        },
-        startIcon: _ref12 => {
-          let {
-            ownerState
-          } = _ref12;
-          return {
-            display: "inline-flex",
-            margin: 0,
-            marginInlineEnd: odysseyTokens.Spacing2,
-            ...(ownerState.children === undefined && {
-              marginInlineEnd: 0
+              padding: odysseyTokens.Spacing2
             })
-          };
-        }
+          })
+        }),
+        endIcon: ({
+          ownerState
+        }) => ({
+          display: "inline-flex",
+          margin: 0,
+          marginInlineStart: odysseyTokens.Spacing2,
+          ...(ownerState.children === undefined && {
+            marginInlineStart: 0
+          })
+        }),
+        startIcon: ({
+          ownerState
+        }) => ({
+          display: "inline-flex",
+          margin: 0,
+          marginInlineEnd: odysseyTokens.Spacing2,
+          ...(ownerState.children === undefined && {
+            marginInlineEnd: 0
+          })
+        })
       }
     },
     MuiButtonBase: {
@@ -693,77 +659,74 @@ export const components = _ref => {
         indeterminateIcon: _jsx(SubtractIcon, {})
       },
       styleOverrides: {
-        root: _ref13 => {
-          let {
-            theme
-          } = _ref13;
-          return {
-            width: `${odysseyTokens.TypographyLineHeightUi}em`,
-            minWidth: `${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"], {
+        root: ({
+          theme
+        }) => ({
+          width: `${odysseyTokens.TypographyLineHeightUi}em`,
+          minWidth: `${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
-            }),
-            [`.${svgIconClasses.root}`]: {
-              color: odysseyTokens.HueNeutralWhite,
-              transition: theme.transitions.create(["color"], {
-                duration: odysseyTokens.TransitionDurationMain
-              })
-            },
-            "&.Mui-checked": {
-              backgroundColor: odysseyTokens.PalettePrimaryMain,
-              borderColor: odysseyTokens.PalettePrimaryMain,
-              [`.${formControlLabelClasses.root}:hover > &`]: {
-                backgroundColor: odysseyTokens.PalettePrimaryDark,
-                borderColor: odysseyTokens.PalettePrimaryDark
-              }
-            },
+            })
+          },
+          "&.Mui-checked": {
+            backgroundColor: odysseyTokens.PalettePrimaryMain,
+            borderColor: odysseyTokens.PalettePrimaryMain,
             [`.${formControlLabelClasses.root}:hover > &`]: {
-              backgroundColor: "transparent",
-              borderColor: odysseyTokens.HueNeutral900
-            },
-            ".Mui-error:not(.Mui-valid):hover > &": {
-              borderColor: odysseyTokens.BorderColorDangerDark,
-              "&.Mui-checked": {
-                backgroundColor: odysseyTokens.PaletteDangerDark,
-                borderColor: odysseyTokens.BorderColorDangerDark
-              }
-            },
-            ".Mui-error:not(.Mui-valid) > &": {
-              borderColor: odysseyTokens.BorderColorDangerControl,
-              "&.Mui-checked": {
-                backgroundColor: odysseyTokens.PaletteDangerMain,
-                borderColor: odysseyTokens.BorderColorDangerControl
-              },
-              "&.Mui-focusVisible": {
-                boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PaletteDangerMain}`
-              }
+              backgroundColor: odysseyTokens.PalettePrimaryDark,
+              borderColor: odysseyTokens.PalettePrimaryDark
+            }
+          },
+          [`.${formControlLabelClasses.root}:hover > &`]: {
+            backgroundColor: "transparent",
+            borderColor: odysseyTokens.HueNeutral900
+          },
+          ".Mui-error:not(.Mui-valid):hover > &": {
+            borderColor: odysseyTokens.BorderColorDangerDark,
+            "&.Mui-checked": {
+              backgroundColor: odysseyTokens.PaletteDangerDark,
+              borderColor: odysseyTokens.BorderColorDangerDark
+            }
+          },
+          ".Mui-error:not(.Mui-valid) > &": {
+            borderColor: odysseyTokens.BorderColorDangerControl,
+            "&.Mui-checked": {
+              backgroundColor: odysseyTokens.PaletteDangerMain,
+              borderColor: odysseyTokens.BorderColorDangerControl
             },
             "&.Mui-focusVisible": {
-              borderColor: odysseyTokens.HueNeutral900,
-              boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PalettePrimaryMain}`,
-              outline: "2px solid transparent",
-              outlineOffset: "1px"
-            },
-            "&.Mui-disabled": {
+              boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PaletteDangerMain}`
+            }
+          },
+          "&.Mui-focusVisible": {
+            borderColor: odysseyTokens.HueNeutral900,
+            boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PalettePrimaryMain}`,
+            outline: "2px solid transparent",
+            outlineOffset: "1px"
+          },
+          "&.Mui-disabled": {
+            backgroundColor: odysseyTokens.HueNeutral50,
+            borderColor: odysseyTokens.HueNeutral300,
+            ".Mui-error:not(.Mui-valid) > &": {
               backgroundColor: odysseyTokens.HueNeutral50,
-              borderColor: odysseyTokens.HueNeutral300,
-              ".Mui-error:not(.Mui-valid) > &": {
-                backgroundColor: odysseyTokens.HueNeutral50,
-                borderColor: odysseyTokens.HueNeutral300
-              },
-              [`.${svgIconClasses.root}`]: {
-                color: odysseyTokens.HueNeutral300
-              }
+              borderColor: odysseyTokens.HueNeutral300
+            },
+            [`.${svgIconClasses.root}`]: {
+              color: odysseyTokens.HueNeutral300
             }
-          };
-        }
+          }
+        })
       }
     },
     MuiChip: {
@@ -771,100 +734,97 @@ export const components = _ref => {
         deleteIcon: _jsx(CloseCircleFilledIcon, {})
       },
       styleOverrides: {
-        root: _ref14 => {
-          let {
-            ownerState
-          } = _ref14;
-          return {
-            height: "auto",
-            paddingBlock: `calc(${odysseyTokens.Spacing2} - ${odysseyTokens.BorderWidthMain})`,
-            paddingInline: odysseyTokens.Spacing3,
-            fontSize: odysseyTokens.TypographySizeBody,
-            lineHeight: odysseyTokens.TypographyLineHeightUi,
-            borderRadius: odysseyTokens.BorderRadiusRound,
-            backgroundColor: odysseyTokens.HueNeutral100,
-            borderWidth: odysseyTokens.BorderWidthMain,
-            borderColor: odysseyTokens.HueNeutral200,
-            borderStyle: odysseyTokens.BorderStyleMain,
-            color: odysseyTokens.HueNeutral700,
-            ...(ownerState.onDelete && {
-              paddingInlineEnd: odysseyTokens.Spacing2
-            }),
-            [`&.${chipClasses.disabled}`]: {
-              opacity: 1,
-              pointerEvents: "none",
-              borderColor: odysseyTokens.BorderColorDisabled,
-              color: odysseyTokens.TypographyColorDisabled,
-              [`& .${chipClasses.deleteIcon}`]: {
-                color: odysseyTokens.HueNeutral300
+        root: ({
+          ownerState
+        }) => ({
+          height: "auto",
+          paddingBlock: `calc(${odysseyTokens.Spacing2} - ${odysseyTokens.BorderWidthMain})`,
+          paddingInline: odysseyTokens.Spacing3,
+          fontSize: odysseyTokens.TypographySizeBody,
+          lineHeight: odysseyTokens.TypographyLineHeightUi,
+          borderRadius: odysseyTokens.BorderRadiusRound,
+          backgroundColor: odysseyTokens.HueNeutral100,
+          borderWidth: odysseyTokens.BorderWidthMain,
+          borderColor: odysseyTokens.HueNeutral200,
+          borderStyle: odysseyTokens.BorderStyleMain,
+          color: odysseyTokens.HueNeutral700,
+          ...(ownerState.onDelete && {
+            paddingInlineEnd: odysseyTokens.Spacing2
+          }),
+          [`&.${chipClasses.disabled}`]: {
+            opacity: 1,
+            pointerEvents: "none",
+            borderColor: odysseyTokens.BorderColorDisabled,
+            color: odysseyTokens.TypographyColorDisabled,
+            [`& .${chipClasses.deleteIcon}`]: {
+              color: odysseyTokens.HueNeutral300
+            }
+          },
+          ...(ownerState.clickable && {
+            "&:hover": {
+              backgroundColor: odysseyTokens.HueNeutral200
+            },
+            [`&.${chipClasses.focusVisible}`]: {
+              backgroundColor: odysseyTokens.HueNeutral200,
+              outlineColor: odysseyTokens.FocusOutlineColorPrimary,
+              outlineOffset: odysseyTokens.FocusOutlineOffsetTight,
+              outlineStyle: odysseyTokens.FocusOutlineStyle,
+              outlineWidth: odysseyTokens.FocusOutlineWidthMain
+            },
+            "&:active": {
+              boxShadow: "none",
+              backgroundColor: odysseyTokens.HueNeutral300
+            }
+          }),
+          [`& .${chipClasses.icon}`]: {
+            margin: 0,
+            marginInlineEnd: odysseyTokens.Spacing1
+          },
+          ...(ownerState.variant === "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: "0.71428571rem",
+            textTransform: "uppercase",
+            "&::before": {
+              content: "''",
+              width: "0.42857143rem",
+              height: "0.42857143rem",
+              marginInlineEnd: odysseyTokens.Spacing2,
+              borderRadius: "100%",
+              backgroundColor: odysseyTokens.HueNeutral400
+            },
+            [`&.${chipClasses.colorError}`]: {
+              backgroundColor: odysseyTokens.PaletteDangerLighter,
+              color: odysseyTokens.TypographyColorDanger,
+              "&::before": {
+                backgroundColor: odysseyTokens.PaletteDangerMain
               }
             },
-            ...(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.colorSuccess}`]: {
+              backgroundColor: odysseyTokens.PaletteSuccessLighter,
+              color: odysseyTokens.TypographyColorSuccess,
+              "&::before": {
+                backgroundColor: odysseyTokens.PaletteSuccessMain
               }
-            }),
-            [`& .${chipClasses.icon}`]: {
-              margin: 0,
-              marginInlineEnd: odysseyTokens.Spacing1
             },
-            ...(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: "0.71428571rem",
-              textTransform: "uppercase",
+            [`&.${chipClasses.colorWarning}`]: {
+              backgroundColor: odysseyTokens.PaletteWarningLighter,
+              color: odysseyTokens.TypographyColorWarning,
               "&::before": {
-                content: "''",
-                width: "0.42857143rem",
-                height: "0.42857143rem",
-                marginInlineEnd: odysseyTokens.Spacing2,
-                borderRadius: "100%",
-                backgroundColor: odysseyTokens.HueNeutral400
-              },
-              [`&.${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
-                }
+                backgroundColor: odysseyTokens.HueYellow200
               }
-            }),
-            [`.${inputBaseClasses.root}.${inputBaseClasses.disabled} &`]: {
-              backgroundColor: odysseyTokens.HueNeutral200
             }
-          };
-        },
+          }),
+          [`.${inputBaseClasses.root}.${inputBaseClasses.disabled} &`]: {
+            backgroundColor: odysseyTokens.HueNeutral200
+          }
+        }),
         label: {
           padding: 0,
           [`.${inputBaseClasses.root}.${inputBaseClasses.disabled} &`]: {
@@ -897,26 +857,20 @@ export const components = _ref => {
         variant: "indeterminate"
       },
       styleOverrides: {
-        root: _ref15 => {
-          let {
-            ownerState
-          } = _ref15;
-          return {
-            ...(ownerState.color !== "inherit" && {
-              color: odysseyTokens.PalettePrimaryMain
-            })
-          };
-        },
-        circle: _ref16 => {
-          let {
-            ownerState
-          } = _ref16;
-          return {
-            ...(ownerState.variant === "indeterminate" && {
-              strokeDasharray: "160%, 360%"
-            })
-          };
-        }
+        root: ({
+          ownerState
+        }) => ({
+          ...(ownerState.color !== "inherit" && {
+            color: odysseyTokens.PalettePrimaryMain
+          })
+        }),
+        circle: ({
+          ownerState
+        }) => ({
+          ...(ownerState.variant === "indeterminate" && {
+            strokeDasharray: "160%, 360%"
+          })
+        })
       }
     },
     MuiCssBaseline: {
@@ -1245,50 +1199,44 @@ export const components = _ref => {
           height: odysseyTokens.Spacing5,
           overflow: "visible"
         },
-        switchBase: _ref17 => {
-          let {
-            ownerState
-          } = _ref17;
-          return {
-            top: odysseyTokens.Spacing1,
-            left: odysseyTokens.Spacing1,
-            padding: `${odysseyTokens.Spacing0} 0`,
+        switchBase: ({
+          ownerState
+        }) => ({
+          top: odysseyTokens.Spacing1,
+          left: odysseyTokens.Spacing1,
+          padding: `${odysseyTokens.Spacing0} 0`,
+          ...(ownerState.checked === true && {
+            color: `${odysseyTokens.HueNeutralWhite} !important`,
+            transform: `translateX(${odysseyTokens.Spacing4}) !important`
+          }),
+          "&:hover": {
+            backgroundColor: "transparent",
             ...(ownerState.checked === true && {
-              color: `${odysseyTokens.HueNeutralWhite} !important`,
-              transform: `translateX(${odysseyTokens.Spacing4}) !important`
-            }),
-            "&:hover": {
-              backgroundColor: "transparent",
-              ...(ownerState.checked === true && {
-                backgroundColor: "transparent !important"
-              })
-            },
-            "&.Mui-focusVisible": {
-              " + .MuiSwitch-track": {
-                boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PalettePrimaryMain}`
-              }
+              backgroundColor: "transparent !important"
+            })
+          },
+          "&.Mui-focusVisible": {
+            " + .MuiSwitch-track": {
+              boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PalettePrimaryMain}`
             }
-          };
-        },
+          }
+        }),
         thumb: {
           width: odysseyTokens.Spacing4,
           height: odysseyTokens.Spacing4,
           boxShadow: "none"
         },
-        track: _ref18 => {
-          let {
-            ownerState
-          } = _ref18;
-          return {
-            borderRadius: odysseyTokens.BorderRadiusRound,
-            backgroundColor: `${odysseyTokens.HueNeutral300}`,
-            opacity: 1,
-            ...(ownerState.checked === true && {
-              opacity: "1 !important",
-              backgroundColor: `${odysseyTokens.PaletteSuccessLight} !important`
-            })
-          };
-        },
+        track: ({
+          ownerState
+        }) => ({
+          borderRadius: odysseyTokens.BorderRadiusRound,
+          backgroundColor: `${odysseyTokens.HueNeutral300}`,
+          opacity: 1,
+          ...(ownerState.checked === true && {
+            opacity: "1 !important",
+            backgroundColor: `${odysseyTokens.PaletteSuccessLight} !important`
+          })
+        }),
         input: {
           height: "44px",
           top: "-14px"
@@ -1324,22 +1272,19 @@ export const components = _ref => {
     },
     MuiDialogContent: {
       styleOverrides: {
-        root: _ref19 => {
-          let {
-            ownerState
-          } = _ref19;
-          return {
-            paddingBlock: 0,
-            paddingInline: odysseyTokens.Spacing6,
-            ...(ownerState.dividers === true && {
-              paddingBlock: odysseyTokens.Spacing6,
-              color: odysseyTokens.HueNeutral600
-            }),
-            ["&:last-child"]: {
-              paddingBlockEnd: odysseyTokens.Spacing6
-            }
-          };
-        }
+        root: ({
+          ownerState
+        }) => ({
+          paddingBlock: 0,
+          paddingInline: odysseyTokens.Spacing6,
+          ...(ownerState.dividers === true && {
+            paddingBlock: odysseyTokens.Spacing6,
+            color: odysseyTokens.HueNeutral600
+          }),
+          ["&:last-child"]: {
+            paddingBlockEnd: odysseyTokens.Spacing6
+          }
+        })
       }
     },
     MuiDialogContentText: {
@@ -1380,83 +1325,77 @@ export const components = _ref => {
         margin: "normal"
       },
       styleOverrides: {
-        root: _ref20 => {
-          let {
-            ownerState
-          } = _ref20;
-          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%"
-            }),
-            [`& .${formGroupClasses.root}`]: {
-              marginBlockStart: odysseyTokens.Spacing1
+        root: ({
+          ownerState
+        }) => ({
+          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%"
+          }),
+          [`& .${formGroupClasses.root}`]: {
+            marginBlockStart: odysseyTokens.Spacing1
+          }
+        })
       }
     },
     MuiFormControlLabel: {
       styleOverrides: {
-        root: _ref21 => {
-          let {
-            ownerState
-          } = _ref21;
-          return {
-            gap: odysseyTokens.Spacing2,
+        root: ({
+          ownerState
+        }) => ({
+          gap: odysseyTokens.Spacing2,
+          marginInlineStart: 0,
+          marginInlineEnd: 0,
+          ...(ownerState.labelPlacement === "start" && {
             marginInlineStart: 0,
-            marginInlineEnd: 0,
-            ...(ownerState.labelPlacement === "start" && {
-              marginInlineStart: 0,
-              marginInlineEnd: 0
-            }),
-            ...(ownerState.labelPlacement === "top" && {
-              marginInlineStart: 0
-            }),
-            ...(ownerState.labelPlacement === "bottom" && {
-              marginInlineStart: 0
-            }),
-            "&:not(:last-child)": {
-              marginBottom: odysseyTokens.Spacing2
-            },
-            "&.Mui-disabled": {
-              pointerEvents: "none"
-            },
-            [`:has(> .${radioClasses.root})`]: {
-              alignItems: "flex-start"
-            },
-            [`& .${checkboxClasses.root}`]: {
-              marginBlockStart: 0
-            },
-            [`&: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
-            }
-          };
-        },
+            marginInlineEnd: 0
+          }),
+          ...(ownerState.labelPlacement === "top" && {
+            marginInlineStart: 0
+          }),
+          ...(ownerState.labelPlacement === "bottom" && {
+            marginInlineStart: 0
+          }),
+          "&:not(:last-child)": {
+            marginBottom: odysseyTokens.Spacing2
+          },
+          "&.Mui-disabled": {
+            pointerEvents: "none"
+          },
+          [`:has(> .${radioClasses.root})`]: {
+            alignItems: "flex-start"
+          },
+          [`& .${checkboxClasses.root}`]: {
+            marginBlockStart: 0
+          },
+          [`&: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,
           lineHeight: odysseyTokens.TypographyLineHeightUi
@@ -1534,29 +1473,26 @@ export const components = _ref => {
     },
     MuiInputAdornment: {
       styleOverrides: {
-        root: _ref22 => {
-          let {
-            ownerState
-          } = _ref22;
-          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"
-            })
-          };
-        }
+        root: ({
+          ownerState
+        }) => ({
+          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"
+          })
+        })
       }
     },
     MuiInputBase: {
@@ -1564,61 +1500,58 @@ export const components = _ref => {
         minRows: 3
       },
       styleOverrides: {
-        root: _ref23 => {
-          let {
-            ownerState,
-            theme
-          } = _ref23;
-          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"
-            }
-          };
-        },
+        root: ({
+          ownerState,
+          theme
+        }) => ({
+          ...theme.typography.body1,
+          flex: "1",
+          width: "auto",
+          color: odysseyTokens.TypographyColorBody,
+          lineHeight: odysseyTokens.TypographyLineHeightUi,
+          borderWidth: odysseyTokens.BorderWidthMain,
+          borderStyle: odysseyTokens.BorderStyleMain,
+          borderRadius: odysseyTokens.BorderRadiusMain,
+          borderColor: odysseyTokens.HueNeutral500,
+          boxShadow: `0 0 0 0 transparent`,
+          backgroundColor: odysseyTokens.HueNeutralWhite,
+          transition: theme.transitions.create(["border-color", "background-color", "box-shadow"], {
+            duration: odysseyTokens.TransitionDurationMain
+          }),
+          ...(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",
@@ -1659,32 +1592,29 @@ export const components = _ref => {
         shrink: false
       },
       styleOverrides: {
-        root: _ref24 => {
-          let {
-            ownerState
-          } = _ref24;
-          return {
-            display: "flex",
-            justifyContent: "space-between",
-            overflow: "unset",
-            whiteSpace: "unset",
-            ...(ownerState.formControl && {
-              position: "initial",
-              transform: "none"
-            }),
-            ...(ownerState.variant === "outlined" && {
-              pointerEvents: "initial",
-              transform: "none",
-              maxWidth: "100%",
-              ...(ownerState.size === "small" && {
-                transform: "none"
-              })
-            }),
-            [`& > .${typographyClasses.root}`]: {
-              lineHeight: "unset"
-            }
-          };
-        }
+        root: ({
+          ownerState
+        }) => ({
+          display: "flex",
+          justifyContent: "space-between",
+          overflow: "unset",
+          whiteSpace: "unset",
+          ...(ownerState.formControl && {
+            position: "initial",
+            transform: "none"
+          }),
+          ...(ownerState.variant === "outlined" && {
+            pointerEvents: "initial",
+            transform: "none",
+            maxWidth: "100%",
+            ...(ownerState.size === "small" && {
+              transform: "none"
+            })
+          }),
+          [`& > .${typographyClasses.root}`]: {
+            lineHeight: "unset"
+          }
+        })
       }
     },
     MuiLink: {
@@ -1791,69 +1721,66 @@ export const components = _ref => {
     },
     MuiMenuItem: {
       styleOverrides: {
-        root: _ref25 => {
-          let {
-            ownerState
-          } = _ref25;
-          return {
-            gap: odysseyTokens.Spacing2,
-            minHeight: "unset",
-            paddingBlock: odysseyTokens.Spacing3,
-            paddingInline: odysseyTokens.Spacing4,
-            borderRadius: odysseyTokens.BorderRadiusTight,
-            [`& .${formControlLabelClasses.root}`]: {
-              gap: "unset"
-            },
+        root: ({
+          ownerState
+        }) => ({
+          gap: odysseyTokens.Spacing2,
+          minHeight: "unset",
+          paddingBlock: odysseyTokens.Spacing3,
+          paddingInline: odysseyTokens.Spacing4,
+          borderRadius: odysseyTokens.BorderRadiusTight,
+          [`& .${formControlLabelClasses.root}`]: {
+            gap: "unset"
+          },
+          "&:hover": {
+            textDecoration: "none",
+            backgroundColor: odysseyTokens.HueNeutral100,
+            "@media (hover: none)": {
+              backgroundColor: "transparent"
+            }
+          },
+          [`:focus-visible`]: {
+            backgroundColor: odysseyTokens.HueNeutral100
+          },
+          [`&.${menuItemClasses.root}-destructive`]: {
+            color: odysseyTokens.TypographyColorDanger,
+            [`.${typographyClasses.root}`]: {
+              color: "inherit"
+            }
+          },
+          [`&.${menuItemClasses.selected}`]: {
+            backgroundColor: "transparent",
+            color: odysseyTokens.TypographyColorAction,
             "&:hover": {
-              textDecoration: "none",
-              backgroundColor: odysseyTokens.HueNeutral100,
+              backgroundColor: odysseyTokens.PalettePrimaryLighter,
               "@media (hover: none)": {
-                backgroundColor: "transparent"
-              }
-            },
-            [`:focus-visible`]: {
-              backgroundColor: odysseyTokens.HueNeutral100
-            },
-            [`&.${menuItemClasses.root}-destructive`]: {
-              color: odysseyTokens.TypographyColorDanger,
-              [`.${typographyClasses.root}`]: {
-                color: "inherit"
-              }
-            },
-            [`&.${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,
-              [`.${typographyClasses.root}`]: {
-                color: "inherit"
+                backgroundColor: odysseyTokens.PalettePrimaryLighter
               }
-            },
-            [`& + .${dividerClasses.root}`]: {
-              marginBlock: odysseyTokens.Spacing1
-            },
-            [`& .${listItemTextClasses.root}`]: {
-              marginBlock: 0
-            },
-            [`& .${listItemIconClasses.root}`]: {
-              minWidth: "unset"
             }
-          };
-        }
+          },
+          ...(!ownerState.disableGutters && {
+            paddingInline: odysseyTokens.Spacing4
+          }),
+          ...(ownerState.divider && {
+            borderBlockEnd: `1px solid ${odysseyTokens.BorderColorDisplay}`
+          }),
+          [`&.${menuItemClasses.disabled}`]: {
+            opacity: 1,
+            color: odysseyTokens.TypographyColorDisabled,
+            [`.${typographyClasses.root}`]: {
+              color: "inherit"
+            }
+          },
+          [`& + .${dividerClasses.root}`]: {
+            marginBlock: odysseyTokens.Spacing1
+          },
+          [`& .${listItemTextClasses.root}`]: {
+            marginBlock: 0
+          },
+          [`& .${listItemIconClasses.root}`]: {
+            minWidth: "unset"
+          }
+        })
       }
     },
     MuiListItemSecondaryAction: {
@@ -1923,75 +1850,72 @@ export const components = _ref => {
         checkedIcon: _jsx(_Fragment, {})
       },
       styleOverrides: {
-        root: _ref26 => {
-          let {
-            theme
-          } = _ref26;
-          return {
-            width: `${odysseyTokens.TypographyLineHeightUi}em`,
-            minWidth: `${odysseyTokens.TypographyLineHeightUi}em`,
-            height: `${odysseyTokens.TypographyLineHeightUi}em`,
-            borderRadius: `${odysseyTokens.TypographyLineHeightUi}em`,
-            borderWidth: odysseyTokens.BorderWidthMain,
-            borderStyle: odysseyTokens.BorderStyleMain,
-            borderColor: odysseyTokens.HueNeutral500,
-            padding: 0,
-            boxShadow: `0 0 0 0 transparent`,
-            transition: theme.transitions.create(["border-color", "background-color", "box-shadow"], {
+        root: ({
+          theme
+        }) => ({
+          width: `${odysseyTokens.TypographyLineHeightUi}em`,
+          minWidth: `${odysseyTokens.TypographyLineHeightUi}em`,
+          height: `${odysseyTokens.TypographyLineHeightUi}em`,
+          borderRadius: `${odysseyTokens.TypographyLineHeightUi}em`,
+          borderWidth: odysseyTokens.BorderWidthMain,
+          borderStyle: odysseyTokens.BorderStyleMain,
+          borderColor: odysseyTokens.HueNeutral500,
+          padding: 0,
+          boxShadow: `0 0 0 0 transparent`,
+          transition: theme.transitions.create(["border-color", "background-color", "box-shadow"], {
+            duration: odysseyTokens.TransitionDurationMain
+          }),
+          "&::before": {
+            content: "''",
+            position: "absolute",
+            width: odysseyTokens.Spacing2,
+            height: odysseyTokens.Spacing2,
+            borderRadius: "50%",
+            backgroundColor: "transparent",
+            transition: theme.transitions.create(["background-color"], {
               duration: odysseyTokens.TransitionDurationMain
-            }),
+            })
+          },
+          [`.${formControlLabelClasses.root}:hover > &`]: {
+            backgroundColor: "transparent",
+            borderColor: odysseyTokens.HueNeutral900
+          },
+          ".Mui-error:hover > &": {
+            backgroundColor: "transparent",
+            borderColor: odysseyTokens.BorderColorDangerDark,
             "&::before": {
-              content: "''",
-              position: "absolute",
-              width: odysseyTokens.Spacing2,
-              height: odysseyTokens.Spacing2,
-              borderRadius: "50%",
-              backgroundColor: "transparent",
-              transition: theme.transitions.create(["background-color"], {
-                duration: odysseyTokens.TransitionDurationMain
-              })
-            },
-            [`.${formControlLabelClasses.root}:hover > &`]: {
-              backgroundColor: "transparent",
-              borderColor: odysseyTokens.HueNeutral900
-            },
-            ".Mui-error:hover > &": {
-              backgroundColor: "transparent",
-              borderColor: odysseyTokens.BorderColorDangerDark,
-              "&::before": {
-                backgroundColor: odysseyTokens.PaletteDangerDark
-              }
-            },
-            ".Mui-error > &": {
-              borderColor: odysseyTokens.BorderColorDangerControl,
-              "&.Mui-focusVisible": {
-                boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PaletteDangerMain}`
-              }
-            },
+              backgroundColor: odysseyTokens.PaletteDangerDark
+            }
+          },
+          ".Mui-error > &": {
+            borderColor: odysseyTokens.BorderColorDangerControl,
             "&.Mui-focusVisible": {
-              borderColor: odysseyTokens.HueNeutral900,
-              boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PalettePrimaryMain}`,
-              outline: "2px solid transparent",
-              outlineOffset: "1px"
-            },
-            "&.Mui-checked": {
-              position: "relative",
-              "&::before": {
-                backgroundColor: odysseyTokens.PalettePrimaryMain
-              }
-            },
-            ".Mui-error > &.Mui-checked::before": {
-              backgroundColor: odysseyTokens.PaletteDangerMain
-            },
-            "&.Mui-disabled": {
-              backgroundColor: odysseyTokens.HueNeutral50,
-              borderColor: odysseyTokens.BorderColorDisabled,
-              "&.Mui-checked::before": {
-                backgroundColor: odysseyTokens.BorderColorDisabled
-              }
+              boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PaletteDangerMain}`
             }
-          };
-        }
+          },
+          "&.Mui-focusVisible": {
+            borderColor: odysseyTokens.HueNeutral900,
+            boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PalettePrimaryMain}`,
+            outline: "2px solid transparent",
+            outlineOffset: "1px"
+          },
+          "&.Mui-checked": {
+            position: "relative",
+            "&::before": {
+              backgroundColor: odysseyTokens.PalettePrimaryMain
+            }
+          },
+          ".Mui-error > &.Mui-checked::before": {
+            backgroundColor: odysseyTokens.PaletteDangerMain
+          },
+          "&.Mui-disabled": {
+            backgroundColor: odysseyTokens.HueNeutral50,
+            borderColor: odysseyTokens.BorderColorDisabled,
+            "&.Mui-checked::before": {
+              backgroundColor: odysseyTokens.BorderColorDisabled
+            }
+          }
+        })
       }
     },
     MuiSnackbar: {
@@ -2050,20 +1974,17 @@ export const components = _ref => {
         color: "inherit"
       },
       styleOverrides: {
-        root: _ref27 => {
-          let {
-            ownerState
-          } = _ref27;
-          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`
-            })
-          };
-        }
+        root: ({
+          ownerState
+        }) => ({
+          fontSize: `${odysseyTokens.TypographyLineHeightUi}rem`,
+          ...(ownerState.fontSize === "small" && {
+            fontSize: `${Number(odysseyTokens.TypographyLineHeightUi) * 0.75}rem`
+          }),
+          ...(ownerState.fontSize === "large" && {
+            fontSize: `${Number(odysseyTokens.TypographyLineHeightUi) * 1.25}rem`
+          })
+        })
       }
     },
     MuiTab: {
@@ -2071,53 +1992,50 @@ export const components = _ref => {
         iconPosition: "start"
       },
       styleOverrides: {
-        root: _ref28 => {
-          let {
-            ownerState
-          } = _ref28;
-          return {
-            maxWidth: `calc(${odysseyTokens.TypographyLineLengthMax} / 2)`,
-            minWidth: "unset",
-            minHeight: odysseyTokens.Spacing9,
-            padding: `${odysseyTokens.Spacing4} ${odysseyTokens.Spacing1}`,
-            fontSize: odysseyTokens.TypographySizeHeading6,
-            fontFamily: odysseyTokens.TypographyFamilyHeading,
-            lineHeight: odysseyTokens.TypographyLineHeightUi,
-            overflow: "visible",
-            color: odysseyTokens.HueNeutral600,
-            opacity: 1,
-            ...(ownerState.selected == true && {
-              color: odysseyTokens.TypographyColorAction,
-              fontWeight: odysseyTokens.TypographyWeightHeading
-            }),
-            ...(ownerState.disabled && {
-              color: odysseyTokens.TypographyColorDisabled,
-              opacity: "1 !important"
-            }),
-            ...(ownerState.wrapped && {
-              fontSize: odysseyTokens.TypographySizeSubordinate,
-              lineHeight: odysseyTokens.TypographyLineHeightBody
-            }),
-            "&:hover": {
-              color: odysseyTokens.TypographyColorAction
-            },
-            "&:focus-visible::before, &.Mui-focusVisible::before": {
-              content: "''",
-              position: "absolute",
-              insetBlockStart: odysseyTokens.Spacing4,
-              insetInlineEnd: `calc(-1 * ${odysseyTokens.Spacing2})`,
-              insetBlockEnd: odysseyTokens.Spacing4,
-              insetInlineStart: `calc(-1 * ${odysseyTokens.Spacing2})`,
-              borderWidth: odysseyTokens.BorderWidthMain,
-              borderStyle: odysseyTokens.BorderStyleMain,
-              borderColor: odysseyTokens.PalettePrimaryMain,
-              borderRadius: odysseyTokens.BorderRadiusMain
-            },
-            "& .MuiTab-iconWrapper": {
-              marginInlineEnd: odysseyTokens.Spacing1
-            }
-          };
-        }
+        root: ({
+          ownerState
+        }) => ({
+          maxWidth: `calc(${odysseyTokens.TypographyLineLengthMax} / 2)`,
+          minWidth: "unset",
+          minHeight: odysseyTokens.Spacing9,
+          padding: `${odysseyTokens.Spacing4} ${odysseyTokens.Spacing1}`,
+          fontSize: odysseyTokens.TypographySizeHeading6,
+          fontFamily: odysseyTokens.TypographyFamilyHeading,
+          lineHeight: odysseyTokens.TypographyLineHeightUi,
+          overflow: "visible",
+          color: odysseyTokens.HueNeutral600,
+          opacity: 1,
+          ...(ownerState.selected == true && {
+            color: odysseyTokens.TypographyColorAction,
+            fontWeight: odysseyTokens.TypographyWeightHeading
+          }),
+          ...(ownerState.disabled && {
+            color: odysseyTokens.TypographyColorDisabled,
+            opacity: "1 !important"
+          }),
+          ...(ownerState.wrapped && {
+            fontSize: odysseyTokens.TypographySizeSubordinate,
+            lineHeight: odysseyTokens.TypographyLineHeightBody
+          }),
+          "&:hover": {
+            color: odysseyTokens.TypographyColorAction
+          },
+          "&:focus-visible::before, &.Mui-focusVisible::before": {
+            content: "''",
+            position: "absolute",
+            insetBlockStart: odysseyTokens.Spacing4,
+            insetInlineEnd: `calc(-1 * ${odysseyTokens.Spacing2})`,
+            insetBlockEnd: odysseyTokens.Spacing4,
+            insetInlineStart: `calc(-1 * ${odysseyTokens.Spacing2})`,
+            borderWidth: odysseyTokens.BorderWidthMain,
+            borderStyle: odysseyTokens.BorderStyleMain,
+            borderColor: odysseyTokens.PalettePrimaryMain,
+            borderRadius: odysseyTokens.BorderRadiusMain
+          },
+          "& .MuiTab-iconWrapper": {
+            marginInlineEnd: odysseyTokens.Spacing1
+          }
+        })
       }
     },
     MuiTabPanel: {
@@ -2172,154 +2090,148 @@ export const components = _ref => {
     },
     MuiTable: {
       styleOverrides: {
-        root: _ref29 => {
-          let {
-            ownerState
-          } = _ref29;
-          return {
-            display: "table",
-            width: "auto",
-            borderCollapse: "separate",
-            borderSpacing: 0,
-            marginBlock: odysseyTokens.Spacing0,
-            marginInline: odysseyTokens.Spacing0,
-            lineHeight: odysseyTokens.TypographyLineHeightUi,
-            "&.narrow": {
-              width: "100%",
-              tableLayout: "fixed"
-            },
-            "&:only-child": {
-              marginBlockEnd: 0
-            },
-            ...(ownerState.stickyHeader && {
-              borderCollapse: "separate"
-            }),
-            caption: {
-              clip: "rect(0 0 0 0)",
-              clipPath: "inset(50%)",
-              height: "1px",
-              overflow: "hidden",
-              position: "absolute",
-              whiteSpace: "nowrap",
-              width: "1px"
-            }
-          };
-        }
+        root: ({
+          ownerState
+        }) => ({
+          display: "table",
+          width: "auto",
+          borderCollapse: "separate",
+          borderSpacing: 0,
+          marginBlock: odysseyTokens.Spacing0,
+          marginInline: odysseyTokens.Spacing0,
+          lineHeight: odysseyTokens.TypographyLineHeightUi,
+          "&.narrow": {
+            width: "100%",
+            tableLayout: "fixed"
+          },
+          "&:only-child": {
+            marginBlockEnd: 0
+          },
+          ...(ownerState.stickyHeader && {
+            borderCollapse: "separate"
+          }),
+          caption: {
+            clip: "rect(0 0 0 0)",
+            clipPath: "inset(50%)",
+            height: "1px",
+            overflow: "hidden",
+            position: "absolute",
+            whiteSpace: "nowrap",
+            width: "1px"
+          }
+        })
       }
     },
     MuiTableCell: {
       styleOverrides: {
-        root: _ref30 => {
-          let {
-            theme,
-            ownerState
-          } = _ref30;
-          return {
-            ...theme.typography.body1,
-            borderBottom: `${odysseyTokens.BorderWidthMain} ${odysseyTokens.BorderStyleMain} ${odysseyTokens.HueNeutral100}`,
-            textAlign: "start",
-            verticalAlign: "baseline",
-            padding: odysseyTokens.Spacing3,
-            overflowWrap: "break-word",
-            [`.MuiTable-root.narrow &:last-child`]: {
-              width: "auto"
-            },
-            [`.${tableRowClasses.root}:hover &[rowspan]`]: {
-              backgroundColor: odysseyTokens.HueNeutralWhite
-            },
-            [`.${tableBodyClasses.root} .${tableRowClasses.root}:last-of-type &`]: {
-              borderBottom: 0
-            },
-            [`.${tableBodyClasses.root} .${tableRowClasses.root}:first-of-type &`]: {
-              borderTopColor: odysseyTokens.HueNeutralWhite,
-              borderTopStyle: "solid",
-              borderTopWidth: odysseyTokens.BorderWidthMain
-            },
-            [`.${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.TypographyColorHeading,
-              fontSize: odysseyTokens.TypographySizeSubordinate,
-              lineHeight: odysseyTokens.TypographyLineHeightBody,
-              fontWeight: odysseyTokens.TypographyWeightBodyBold,
-              textTransform: "uppercase",
-              backgroundColor: odysseyTokens.HueNeutral50,
-              borderBottom: 0
-            },
-            [`.${tableHeadClasses.root} &:first-of-type`]: {
-              borderTopLeftRadius: odysseyTokens.Spacing2,
-              borderBottomLeftRadius: odysseyTokens.Spacing2
-            },
-            [`.${tableHeadClasses.root} &:last-of-type`]: {
-              borderTopRightRadius: odysseyTokens.Spacing2,
-              borderBottomRightRadius: odysseyTokens.Spacing2
-            },
-            ...(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"
-            }),
-            ["&.MuiTableCell-compact"]: {
-              fontSize: odysseyTokens.TypographySizeSubordinate,
-              padding: odysseyTokens.Spacing2
-            },
-            ["&.MuiTableCell-spacious"]: {
-              padding: odysseyTokens.Spacing4
-            },
-            [`& .${checkboxClasses.root}`]: {
-              width: `${odysseyTokens.TypographyLineHeightUi}rem`,
-              height: `${odysseyTokens.TypographyLineHeightUi}rem`,
-              margin: 0
-            },
-            [`& .${dividerClasses.vertical}`]: {
-              borderStyle: "none none none dotted",
-              borderWidth: 2,
-              borderRadius: 0,
-              marginRight: 2
-            }
-          };
-        }
+        root: ({
+          theme,
+          ownerState
+        }) => ({
+          ...theme.typography.body1,
+          borderBottom: `${odysseyTokens.BorderWidthMain} ${odysseyTokens.BorderStyleMain} ${odysseyTokens.HueNeutral100}`,
+          textAlign: "start",
+          verticalAlign: "baseline",
+          padding: odysseyTokens.Spacing3,
+          overflowWrap: "break-word",
+          [`.MuiTable-root.narrow &:last-child`]: {
+            width: "auto"
+          },
+          [`.${tableRowClasses.root}:hover &[rowspan]`]: {
+            backgroundColor: odysseyTokens.HueNeutralWhite
+          },
+          [`.${tableBodyClasses.root} .${tableRowClasses.root}:last-of-type &`]: {
+            borderBottom: 0
+          },
+          [`.${tableBodyClasses.root} .${tableRowClasses.root}:first-of-type &`]: {
+            borderTopColor: odysseyTokens.HueNeutralWhite,
+            borderTopStyle: "solid",
+            borderTopWidth: odysseyTokens.BorderWidthMain
+          },
+          [`.${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.TypographyColorHeading,
+            fontSize: odysseyTokens.TypographySizeSubordinate,
+            lineHeight: odysseyTokens.TypographyLineHeightBody,
+            fontWeight: odysseyTokens.TypographyWeightBodyBold,
+            textTransform: "uppercase",
+            backgroundColor: odysseyTokens.HueNeutral50,
+            borderBottom: 0
+          },
+          [`.${tableHeadClasses.root} &:first-of-type`]: {
+            borderTopLeftRadius: odysseyTokens.Spacing2,
+            borderBottomLeftRadius: odysseyTokens.Spacing2
+          },
+          [`.${tableHeadClasses.root} &:last-of-type`]: {
+            borderTopRightRadius: odysseyTokens.Spacing2,
+            borderBottomRightRadius: odysseyTokens.Spacing2
+          },
+          ...(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"
+          }),
+          ["&.MuiTableCell-compact"]: {
+            fontSize: odysseyTokens.TypographySizeSubordinate,
+            padding: odysseyTokens.Spacing2
+          },
+          ["&.MuiTableCell-spacious"]: {
+            padding: odysseyTokens.Spacing4
+          },
+          [`& .${checkboxClasses.root}`]: {
+            width: `${odysseyTokens.TypographyLineHeightUi}rem`,
+            height: `${odysseyTokens.TypographyLineHeightUi}rem`,
+            margin: 0
+          },
+          [`& .${dividerClasses.vertical}`]: {
+            borderStyle: "none none none dotted",
+            borderWidth: 2,
+            borderRadius: 0,
+            marginRight: 2
+          }
+        })
       }
     },
     MuiTableContainer: {
@@ -2429,28 +2341,25 @@ export const components = _ref => {
             color: odysseyTokens.TypographyColorBody
           }
         },
-        icon: _ref31 => {
-          let {
-            ownerState
-          } = _ref31;
-          return {
-            ...(ownerState.direction === "asc" && {
-              transform: "rotate(180deg) !important"
-            }),
-            ".isUnsorted &": {
-              opacity: "0 !important"
-            },
-            ".isUnsorted:hover &, .isUnsorted:focus &": {
-              opacity: "0.5 !important",
-              "&:hover, &:focus": {
-                opacity: "1 !important"
-              }
-            },
-            ".isSorted &": {
-              opacity: 1
+        icon: ({
+          ownerState
+        }) => ({
+          ...(ownerState.direction === "asc" && {
+            transform: "rotate(180deg) !important"
+          }),
+          ".isUnsorted &": {
+            opacity: "0 !important"
+          },
+          ".isUnsorted:hover &, .isUnsorted:focus &": {
+            opacity: "0.5 !important",
+            "&:hover, &:focus": {
+              opacity: "1 !important"
             }
-          };
-        }
+          },
+          ".isSorted &": {
+            opacity: 1
+          }
+        })
       }
     },
     MuiTooltip: {
@@ -2461,69 +2370,66 @@ export const components = _ref => {
         placement: "top"
       },
       styleOverrides: {
-        tooltip: _ref32 => {
-          let {
-            ownerState
-          } = _ref32;
-          return {
-            maxWidth: `calc(${odysseyTokens.TypographyLineLengthMax} / 2)`,
+        tooltip: ({
+          ownerState
+        }) => ({
+          maxWidth: `calc(${odysseyTokens.TypographyLineLengthMax} / 2)`,
+          paddingBlock: odysseyTokens.Spacing2,
+          paddingInline: odysseyTokens.Spacing3,
+          backgroundColor: odysseyTokens.HueNeutral900,
+          color: odysseyTokens.HueNeutralWhite,
+          fontSize: odysseyTokens.TypographySizeSubordinate,
+          lineHeight: odysseyTokens.TypographyLineHeightBody,
+          ...(ownerState.touch === true && {
             paddingBlock: odysseyTokens.Spacing2,
             paddingInline: odysseyTokens.Spacing3,
-            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
-                })
+            fontWeight: odysseyTokens.TypographyWeightBody
+          }),
+          [`.${tooltipClasses.popper}[data-popper-placement*="left"] &`]: {
+            transformOrigin: "right center",
+            ...(ownerState.isRtl ? {
+              marginInlineStart: odysseyTokens.Spacing3,
+              ...(ownerState.touch === true && {
+                marginInlineStart: odysseyTokens.Spacing4
               })
-            },
-            [`.${tooltipClasses.popper}[data-popper-placement*="right"] &`]: {
-              transformOrigin: "left center",
-              ...(ownerState.isRtl ? {
-                marginInlineEnd: odysseyTokens.Spacing3,
-                ...(ownerState.touch === true && {
-                  marginInlineEnd: odysseyTokens.Spacing4
-                })
-              } : {
-                marginInlineStart: odysseyTokens.Spacing3,
-                ...(ownerState.touch === true && {
-                  marginInlineStart: odysseyTokens.Spacing4
-                })
+            } : {
+              marginInlineEnd: odysseyTokens.Spacing3,
+              ...(ownerState.touch === true && {
+                marginInlineEnd: odysseyTokens.Spacing4
               })
-            },
-            [`.${tooltipClasses.popper}[data-popper-placement*="top"] &`]: {
-              transformOrigin: "center bottom",
-              marginBottom: odysseyTokens.Spacing3,
+            })
+          },
+          [`.${tooltipClasses.popper}[data-popper-placement*="right"] &`]: {
+            transformOrigin: "left center",
+            ...(ownerState.isRtl ? {
+              marginInlineEnd: odysseyTokens.Spacing3,
               ...(ownerState.touch === true && {
-                marginBottom: odysseyTokens.Spacing4
+                marginInlineEnd: odysseyTokens.Spacing4
               })
-            },
-            [`.${tooltipClasses.popper}[data-popper-placement*="bottom"] &`]: {
-              transformOrigin: "center top",
-              marginTop: odysseyTokens.Spacing3,
+            } : {
+              marginInlineStart: odysseyTokens.Spacing3,
               ...(ownerState.touch === true && {
-                marginTop: odysseyTokens.Spacing4
+                marginInlineStart: odysseyTokens.Spacing4
               })
-            }
-          };
-        },
+            })
+          },
+          [`.${tooltipClasses.popper}[data-popper-placement*="top"] &`]: {
+            transformOrigin: "center bottom",
+            marginBottom: odysseyTokens.Spacing3,
+            ...(ownerState.touch === true && {
+              marginBottom: odysseyTokens.Spacing4
+            })
+          },
+          [`.${tooltipClasses.popper}[data-popper-placement*="bottom"] &`]: {
+            transformOrigin: "center top",
+            marginTop: odysseyTokens.Spacing3,
+            ...(ownerState.touch === true && {
+              marginTop: odysseyTokens.Spacing4
+            })
+          }
+        }),
         arrow: {
           color: odysseyTokens.HueNeutral900,
           "&::before": {