@databiosphere/findable-ui 41.2.0 → 42.0.0

package/lib/theme/common/components.js

@@ -1,46 +1,39 @@
 import { DropDownIcon } from "../../components/common/Form/components/Select/components/DropDownIcon/dropDownIcon";
+import { APP } from "../../styles/common/constants/app";
 import { COLOR_MIXES } from "../../styles/common/constants/colorMixes";
+import { FONT } from "../../styles/common/constants/font";
 import { PALETTE } from "../../styles/common/constants/palette";
 import { SHADOWS } from "../../styles/common/constants/shadows";
+import { bpUpLg, bpUpSm, bpUpXs } from "../../styles/common/mixins/breakpoints";
 import { BUTTON_PROPS } from "../../styles/common/mui/button";
 import { CHIP_PROPS } from "../../styles/common/mui/chip";
 import { OUTLINED_INPUT_PROPS } from "../../styles/common/mui/outlinedInput";
 import { TOGGLE_BUTTON_PROPS } from "../../styles/common/mui/toggleButton";
-import { desktopUp, mobileUp, tabletUp } from "./breakpoints";
-import { TEXT_BODY_400, TEXT_BODY_400_2_LINES, TEXT_BODY_500, TEXT_BODY_SMALL_400, TEXT_BODY_SMALL_500, TEXT_HEADING, TEXT_HEADING_SMALL, } from "./typography";
+import { TYPOGRAPHY_PROPS } from "../../styles/common/mui/typography";
+import * as C from "../components";
 // Constants
 const FLEX_START = "flex-start";
-/**
- * MuiAccordion Component
- * @param theme - Theme.
- * @returns MuiAccordion component theme styles.
- */
-export const MuiAccordion = (theme) => {
-    return {
-        defaultProps: {
-            disableGutters: true,
-            elevation: 0,
-            square: true,
-        },
-        styleOverrides: {
-            root: {
-                backgroundColor: "transparent",
-                boxShadow: `inset 0 1px 0 0 ${theme.palette.smoke.main}, inset 0 -1px 0 0 ${theme.palette.smoke.main}`,
-                // eslint-disable-next-line sort-keys -- disabling key order for readability
-                "&:before": {
-                    display: "none",
-                },
-                "&:nth-of-type(n+2)": {
-                    boxShadow: `inset 0 -1px 0 0 ${theme.palette.smoke.main}`,
-                },
+const MuiAccordion = {
+    defaultProps: {
+        disableGutters: true,
+        elevation: 0,
+        square: true,
+    },
+    styleOverrides: {
+        root: {
+            backgroundColor: "transparent",
+            boxShadow: `inset 0 1px 0 0 ${PALETTE.SMOKE_MAIN}, inset 0 -1px 0 0 ${PALETTE.SMOKE_MAIN}`,
+            // eslint-disable-next-line sort-keys -- disabling key order for readability
+            "&:before": {
+                display: "none",
+            },
+            "&:nth-of-type(n+2)": {
+                boxShadow: `inset 0 -1px 0 0 ${PALETTE.SMOKE_MAIN}`,
             },
         },
-    };
+    },
 };
-/**
- * MuiAccordionDetails Component
- */
-export const MuiAccordionDetails = {
+const MuiAccordionDetails = {
     styleOverrides: {
         root: {
             marginBottom: 16,
@@ -48,10 +41,7 @@ export const MuiAccordionDetails = {
         },
     },
 };
-/**
- * MuiAccordionSummary Component
- */
-export const MuiAccordionSummary = {
+const MuiAccordionSummary = {
     styleOverrides: {
         content: {
             margin: "16px 0",
@@ -63,10 +53,7 @@ export const MuiAccordionSummary = {
         },
     },
 };
-/**
- * MuiAppBar Component
- */
-export const MuiAppBar = {
+const MuiAppBar = {
     defaultProps: {
         color: "default",
         elevation: 0,
@@ -78,11 +65,7 @@ export const MuiAppBar = {
         },
     },
 };
-/**
- * MuiBackdrop Component
- * @returns MuiBackdrop component theme styles.
- */
-export const MuiBackdrop = {
+const MuiBackdrop = {
     styleOverrides: {
         invisible: {
             backgroundColor: "transparent",
@@ -92,507 +75,450 @@ export const MuiBackdrop = {
         },
     },
 };
-/**
- * MuiBreadcrumbs Component
- * @param theme - Theme.
- * @returns MuiBreadcrumbs component theme styles.
- */
-export const MuiBreadcrumbs = (theme) => {
-    return {
-        styleOverrides: {
-            li: {
-                ...theme.typography[TEXT_BODY_SMALL_400],
-                margin: 0,
-                // eslint-disable-next-line sort-keys -- disabling key order for readability
-                "& .MuiLink-root": {
-                    color: "inherit",
-                },
-                "& .MuiTypography-root": {
-                    color: "inherit",
-                    font: "inherit",
-                },
-            },
-            ol: {
-                gap: 2,
-            },
-            root: {
-                color: theme.palette.ink.light,
+const MuiBreadcrumbs = {
+    styleOverrides: {
+        li: {
+            font: FONT.BODY_SMALL_400,
+            margin: 0,
+            // eslint-disable-next-line sort-keys -- disabling key order for readability
+            "& .MuiLink-root": {
+                color: "inherit",
             },
-            separator: {
-                margin: 0,
+            "& .MuiTypography-root": {
+                color: "inherit",
+                font: "inherit",
             },
         },
-    };
+        ol: {
+            gap: 2,
+        },
+        root: {
+            color: PALETTE.INK_LIGHT,
+        },
+        separator: {
+            margin: 0,
+        },
+    },
 };
-/**
- * MuiButton Component
- * @param theme - Theme.
- * @returns MuiButton component theme styles.
- */
-export const MuiButton = (theme) => {
-    return {
-        defaultProps: {
-            disableRipple: true,
-            disableTouchRipple: true,
-        },
-        styleOverrides: {
-            containedPrimary: {
-                backgroundColor: PALETTE.PRIMARY_MAIN,
+const MuiButton = {
+    defaultProps: {
+        disableRipple: true,
+        disableTouchRipple: true,
+    },
+    styleOverrides: {
+        containedPrimary: {
+            backgroundColor: PALETTE.PRIMARY_MAIN,
+            boxShadow: `0 1px 0 0 ${COLOR_MIXES.COMMON_BLACK_08}, inset 0 -1px 0 0 ${COLOR_MIXES.COMMON_BLACK_20}`,
+            color: PALETTE.COMMON_WHITE,
+            // eslint-disable-next-line sort-keys -- disabling key order for readability
+            "&:hover": {
+                backgroundColor: PALETTE.PRIMARY_DARK,
                 boxShadow: `0 1px 0 0 ${COLOR_MIXES.COMMON_BLACK_08}, inset 0 -1px 0 0 ${COLOR_MIXES.COMMON_BLACK_20}`,
+            },
+            // eslint-disable-next-line sort-keys -- disabling key order for readability
+            "&:active": {
+                backgroundColor: PALETTE.PRIMARY_DARK,
+                boxShadow: `0 1px 0 0 ${COLOR_MIXES.COMMON_BLACK_08}, inset 0 -1px 0 0 ${COLOR_MIXES.COMMON_BLACK_20}`,
+            },
+            // eslint-disable-next-line sort-keys -- disabling key order for readability
+            "&.Mui-disabled": {
+                backgroundColor: PALETTE.PRIMARY_MAIN,
+                boxShadow: "none",
                 color: PALETTE.COMMON_WHITE,
-                // eslint-disable-next-line sort-keys -- disabling key order for readability
-                "&:hover": {
-                    backgroundColor: PALETTE.PRIMARY_DARK,
-                    boxShadow: `0 1px 0 0 ${COLOR_MIXES.COMMON_BLACK_08}, inset 0 -1px 0 0 ${COLOR_MIXES.COMMON_BLACK_20}`,
-                },
-                // eslint-disable-next-line sort-keys -- disabling key order for readability
-                "&:active": {
-                    backgroundColor: PALETTE.PRIMARY_DARK,
-                    boxShadow: `0 1px 0 0 ${COLOR_MIXES.COMMON_BLACK_08}, inset 0 -1px 0 0 ${COLOR_MIXES.COMMON_BLACK_20}`,
-                },
-                // eslint-disable-next-line sort-keys -- disabling key order for readability
-                "&.Mui-disabled": {
-                    backgroundColor: PALETTE.PRIMARY_MAIN,
-                    boxShadow: "none",
-                    color: PALETTE.COMMON_WHITE,
-                    opacity: 0.5,
-                },
+                opacity: 0.5,
             },
-            containedSecondary: {
+        },
+        containedSecondary: {
+            backgroundColor: PALETTE.COMMON_WHITE,
+            boxShadow: `inset 0 0 0 1px ${PALETTE.SMOKE_DARK}, 0 1px 0 0 ${COLOR_MIXES.COMMON_BLACK_05}`,
+            color: PALETTE.INK_MAIN,
+            // eslint-disable-next-line sort-keys -- disabling key order for readability
+            "&.Mui-focusVisible": {
                 backgroundColor: PALETTE.COMMON_WHITE,
                 boxShadow: `inset 0 0 0 1px ${PALETTE.SMOKE_DARK}, 0 1px 0 0 ${COLOR_MIXES.COMMON_BLACK_05}`,
+            },
+            // eslint-disable-next-line sort-keys -- disabling key order for readability
+            "&:hover": {
+                backgroundColor: PALETTE.SMOKE_LIGHTEST,
+                boxShadow: `inset 0 0 0 1px ${PALETTE.SMOKE_DARK}, 0 1px 0 0 ${COLOR_MIXES.COMMON_BLACK_05}`,
+            },
+            // eslint-disable-next-line sort-keys -- disabling key order for readability
+            "&:active": {
+                backgroundColor: PALETTE.SMOKE_LIGHTEST,
+                boxShadow: `inset 0 0 0 1px ${PALETTE.SMOKE_DARK}, 0 1px 0 0 ${COLOR_MIXES.COMMON_BLACK_05}`,
+            },
+            "&:disabled": {
+                backgroundColor: PALETTE.COMMON_WHITE,
+                boxShadow: `inset 0 0 0 1px ${PALETTE.SMOKE_DARK}`,
                 color: PALETTE.INK_MAIN,
-                // eslint-disable-next-line sort-keys -- disabling key order for readability
-                "&.Mui-focusVisible": {
-                    backgroundColor: PALETTE.COMMON_WHITE,
-                    boxShadow: `inset 0 0 0 1px ${PALETTE.SMOKE_DARK}, 0 1px 0 0 ${COLOR_MIXES.COMMON_BLACK_05}`,
-                },
-                // eslint-disable-next-line sort-keys -- disabling key order for readability
-                "&:hover": {
-                    backgroundColor: PALETTE.SMOKE_LIGHTEST,
-                    boxShadow: `inset 0 0 0 1px ${PALETTE.SMOKE_DARK}, 0 1px 0 0 ${COLOR_MIXES.COMMON_BLACK_05}`,
-                },
-                // eslint-disable-next-line sort-keys -- disabling key order for readability
-                "&:active": {
-                    backgroundColor: PALETTE.SMOKE_LIGHTEST,
-                    boxShadow: `inset 0 0 0 1px ${PALETTE.SMOKE_DARK}, 0 1px 0 0 ${COLOR_MIXES.COMMON_BLACK_05}`,
+                opacity: 0.5,
+            },
+        },
+        endIcon: {
+            margin: 0,
+            variants: [
+                {
+                    props: { size: BUTTON_PROPS.SIZE.LARGE },
+                    style: { marginRight: -4 },
                 },
-                "&:disabled": {
-                    backgroundColor: PALETTE.COMMON_WHITE,
-                    boxShadow: `inset 0 0 0 1px ${PALETTE.SMOKE_DARK}`,
-                    color: PALETTE.INK_MAIN,
-                    opacity: 0.5,
+                {
+                    props: { size: BUTTON_PROPS.SIZE.MEDIUM },
+                    style: { marginRight: -4 },
                 },
+            ],
+        },
+        outlinedSecondary: {
+            backgroundColor: "transparent",
+            border: "none",
+            boxShadow: `inset 0 0 0 1px ${COLOR_MIXES.INK_MAIN_32}`,
+            color: PALETTE.INK_MAIN,
+            // eslint-disable-next-line sort-keys -- disabling key order for readability
+            "&:hover": {
+                backgroundColor: "transparent",
+                border: "none",
+                boxShadow: `inset 0 0 0 1px ${COLOR_MIXES.INK_MAIN_64}`,
             },
-            endIcon: {
-                margin: 0,
-                variants: [
-                    {
-                        props: { size: BUTTON_PROPS.SIZE.LARGE },
-                        style: { marginRight: -4 },
-                    },
-                    {
-                        props: { size: BUTTON_PROPS.SIZE.MEDIUM },
-                        style: { marginRight: -4 },
-                    },
-                ],
-            },
-            outlinedSecondary: {
+            // eslint-disable-next-line sort-keys -- disabling key order for readability
+            "&:disabled": {
                 backgroundColor: "transparent",
                 border: "none",
                 boxShadow: `inset 0 0 0 1px ${COLOR_MIXES.INK_MAIN_32}`,
-                color: theme.palette.ink.main,
-                // eslint-disable-next-line sort-keys -- disabling key order for readability
-                "&:hover": {
-                    backgroundColor: "transparent",
-                    border: "none",
-                    boxShadow: `inset 0 0 0 1px ${COLOR_MIXES.INK_MAIN_64}`,
+                color: PALETTE.INK_MAIN,
+                opacity: 0.5,
+            },
+        },
+        root: {
+            font: FONT.BODY_500,
+            gap: 4,
+            letterSpacing: "normal",
+            padding: "10px 16px",
+            textTransform: "capitalize",
+        },
+        startIcon: {
+            margin: 0,
+            variants: [
+                {
+                    props: { size: BUTTON_PROPS.SIZE.LARGE },
+                    style: { marginLeft: -4 },
                 },
-                // eslint-disable-next-line sort-keys -- disabling key order for readability
-                "&:disabled": {
-                    backgroundColor: "transparent",
-                    border: "none",
-                    boxShadow: `inset 0 0 0 1px ${COLOR_MIXES.INK_MAIN_32}`,
-                    color: theme.palette.ink.main,
-                    opacity: 0.5,
+                {
+                    props: { size: BUTTON_PROPS.SIZE.MEDIUM },
+                    style: { marginLeft: -4 },
                 },
-            },
-            root: {
-                ...theme.typography[TEXT_BODY_500],
-                gap: 4,
-                letterSpacing: "normal",
+            ],
+        },
+    },
+    variants: [
+        {
+            props: { size: BUTTON_PROPS.SIZE.LARGE },
+            style: {
                 padding: "10px 16px",
-                textTransform: "capitalize",
-            },
-            startIcon: {
-                margin: 0,
-                variants: [
-                    {
-                        props: { size: BUTTON_PROPS.SIZE.LARGE },
-                        style: { marginLeft: -4 },
-                    },
-                    {
-                        props: { size: BUTTON_PROPS.SIZE.MEDIUM },
-                        style: { marginLeft: -4 },
+                // eslint-disable-next-line sort-keys -- disabling key order for readability
+                ".MuiButton-iconSizeLarge": {
+                    // eslint-disable-next-line sort-keys -- disabling key order for readability
+                    ".MuiSvgIcon-root": {
+                        fontSize: "20px",
                     },
-                ],
+                },
             },
         },
-        variants: [
-            {
-                props: { size: BUTTON_PROPS.SIZE.LARGE },
-                style: {
-                    padding: "10px 16px",
-                    // eslint-disable-next-line sort-keys -- disabling key order for readability
-                    ".MuiButton-iconSizeLarge": {
-                        // eslint-disable-next-line sort-keys -- disabling key order for readability
-                        ".MuiSvgIcon-root": {
-                            fontSize: "20px",
-                        },
-                    },
+        {
+            props: { size: BUTTON_PROPS.SIZE.MEDIUM },
+            style: { padding: "8px 16px" },
+        },
+        {
+            props: {
+                color: BUTTON_PROPS.COLOR.PRIMARY,
+                variant: BUTTON_PROPS.VARIANT.TEXT,
+            },
+            style: {
+                alignSelf: "center",
+                color: PALETTE.PRIMARY_MAIN,
+                minWidth: 0,
+                padding: 0,
+                // eslint-disable-next-line sort-keys -- disabling key order for readability
+                "&:hover": {
+                    backgroundColor: "transparent",
+                    textDecoration: "underline",
+                    textDecorationColor: "currentColor",
+                    textDecorationSkipInk: "none",
+                    textUnderlinePosition: "from-font",
                 },
             },
-            {
-                props: { size: BUTTON_PROPS.SIZE.MEDIUM },
-                style: { padding: "8px 16px" },
+        },
+        {
+            props: {
+                variant: "activeNav", // associated with "nav" variant.
             },
-            {
-                props: {
-                    color: BUTTON_PROPS.COLOR.PRIMARY,
-                    variant: BUTTON_PROPS.VARIANT.TEXT,
-                },
-                style: {
-                    alignSelf: "center",
-                    color: PALETTE.PRIMARY_MAIN,
-                    minWidth: 0,
-                    padding: 0,
-                    // eslint-disable-next-line sort-keys -- disabling key order for readability
-                    "&:hover": {
-                        backgroundColor: "transparent",
-                        textDecoration: "underline",
-                        textDecorationColor: "currentColor",
-                        textDecorationSkipInk: "none",
-                        textUnderlinePosition: "from-font",
-                    },
+            style: {
+                backgroundColor: PALETTE.SMOKE_LIGHT,
+                color: PALETTE.INK_MAIN,
+                font: FONT.BODY_500,
+                minWidth: 0,
+                textTransform: "capitalize",
+                whiteSpace: "nowrap",
+                // eslint-disable-next-line sort-keys -- disabling key order for readability
+                "&:hover": {
+                    backgroundColor: PALETTE.SMOKE_LIGHT,
                 },
             },
-            {
-                props: {
-                    variant: "activeNav", // associated with "nav" variant.
-                },
-                style: {
-                    ...theme.typography[TEXT_BODY_500],
-                    backgroundColor: theme.palette.smoke.light,
-                    color: theme.palette.ink.main,
-                    minWidth: 0,
-                    textTransform: "capitalize",
-                    whiteSpace: "nowrap",
-                    // eslint-disable-next-line sort-keys -- disabling key order for readability
-                    "&:hover": {
-                        backgroundColor: theme.palette.smoke.light,
-                    },
-                },
+        },
+        {
+            props: {
+                variant: "backNav", // associated with "nav" variant.
             },
-            {
-                props: {
-                    variant: "backNav", // associated with "nav" variant.
-                },
-                style: {
-                    ...theme.typography[TEXT_HEADING_SMALL],
-                    color: theme.palette.ink.main,
-                    minWidth: 0,
-                    textTransform: "capitalize",
-                    whiteSpace: "nowrap",
-                    // eslint-disable-next-line sort-keys -- disabling key order for readability
-                    "&:hover": {
-                        backgroundColor: theme.palette.smoke.light,
-                    },
+            style: {
+                color: PALETTE.INK_MAIN,
+                font: FONT.HEADING_SMALL,
+                minWidth: 0,
+                textTransform: "capitalize",
+                whiteSpace: "nowrap",
+                // eslint-disable-next-line sort-keys -- disabling key order for readability
+                "&:hover": {
+                    backgroundColor: PALETTE.SMOKE_LIGHT,
                 },
             },
-            {
-                props: {
-                    variant: "nav",
-                },
-                style: {
-                    ...theme.typography[TEXT_BODY_500],
-                    color: theme.palette.ink.main,
-                    minWidth: 0,
-                    textTransform: "capitalize",
-                    whiteSpace: "nowrap",
-                    // eslint-disable-next-line sort-keys -- disabling key order for readability
-                    "&:hover": {
-                        backgroundColor: theme.palette.smoke.light,
-                    },
+        },
+        {
+            props: {
+                variant: "nav",
+            },
+            style: {
+                color: PALETTE.INK_MAIN,
+                font: FONT.BODY_500,
+                minWidth: 0,
+                textTransform: "capitalize",
+                whiteSpace: "nowrap",
+                // eslint-disable-next-line sort-keys -- disabling key order for readability
+                "&:hover": {
+                    backgroundColor: PALETTE.SMOKE_LIGHT,
                 },
             },
-        ],
-    };
+        },
+    ],
 };
-/**
- * MuiButtonBase Component
- * @param theme - Theme.
- * @returns MuiButtonBase component theme styles.
- */
-export const MuiButtonBase = (theme) => {
-    return {
-        defaultProps: {
-            disableRipple: true,
-            disableTouchRipple: true,
-        },
-        styleOverrides: {
-            root: {
-                flex: "none",
-                fontFamily: theme.typography.fontFamily,
-            },
-        },
-    };
+const MuiButtonBase = {
+    defaultProps: {
+        disableRipple: true,
+        disableTouchRipple: true,
+    },
+    styleOverrides: {
+        root: {
+            flex: "none",
+            fontFamily: APP.FONT_FAMILY,
+        },
+    },
 };
-/**
- * MuiCard Component
- */
-export const MuiCard = {
+const MuiCard = {
     styleOverrides: {
         root: {
             borderRadius: 8,
         },
     },
 };
-/**
- * MuiCheckbox Component
- * @param theme - Theme.
- * @returns MuiCheckbox component theme styles.
- */
-export const MuiCheckbox = (theme) => {
-    return {
-        defaultProps: {
-            size: "xsmall",
-        },
-        styleOverrides: {
-            root: {
-                color: theme.palette.smoke.dark,
-                padding: 0,
-                // eslint-disable-next-line sort-keys -- disabling key order for readability
-                "&.Mui-disabled": {
-                    color: theme.palette.smoke.dark,
-                },
+const MuiCheckbox = {
+    defaultProps: {
+        size: "xsmall",
+    },
+    styleOverrides: {
+        root: {
+            color: PALETTE.SMOKE_DARK,
+            padding: 0,
+            // eslint-disable-next-line sort-keys -- disabling key order for readability
+            "&.Mui-disabled": {
+                color: PALETTE.SMOKE_DARK,
             },
         },
-        variants: [
-            {
-                props: {
-                    size: "xsmall",
-                },
-                style: {
-                    fontSize: "18px",
-                },
+    },
+    variants: [
+        {
+            props: {
+                size: "xsmall",
             },
-        ],
-    };
-};
-/**
- * MuiChip Component
- * @param theme - Theme.
- * @returns MuiChip component theme styles.
- */
-export const MuiChip = (theme) => {
-    return {
-        defaultProps: {
-            size: "small",
-        },
-        styleOverrides: {
-            deleteIcon: {
-                color: "inherit",
-                margin: "0 -2px 0 0",
-            },
-            label: {
-                ...theme.typography[TEXT_BODY_SMALL_400],
-                variants: [
-                    {
-                        props: { variant: "status" },
-                        style: {
-                            ...theme.typography[TEXT_BODY_SMALL_500],
-                        },
-                    },
-                ],
+            style: {
+                fontSize: "18px",
             },
         },
-        variants: [
-            {
-                props: { size: CHIP_PROPS.SIZE.SMALL },
-                style: {
-                    height: 20,
+    ],
+};
+const MuiChip = {
+    defaultProps: {
+        size: "small",
+    },
+    styleOverrides: {
+        deleteIcon: {
+            color: "inherit",
+            margin: "0 -2px 0 0",
+        },
+        label: {
+            font: FONT.BODY_SMALL_400,
+            variants: [
+                {
+                    props: { variant: "status" },
+                    style: {
+                        font: FONT.BODY_SMALL_500,
+                    },
                 },
+            ],
+        },
+    },
+    variants: [
+        {
+            props: { size: CHIP_PROPS.SIZE.SMALL },
+            style: {
+                height: 20,
             },
-            {
-                props: { size: CHIP_PROPS.SIZE.MEDIUM },
-                style: {
-                    height: 24,
-                },
+        },
+        {
+            props: { size: CHIP_PROPS.SIZE.MEDIUM },
+            style: {
+                height: 24,
             },
-            {
-                props: { color: "default" },
-                style: {
-                    backgroundColor: theme.palette.smoke.main,
-                    color: theme.palette.ink.main,
-                },
+        },
+        {
+            props: { color: "default" },
+            style: {
+                backgroundColor: PALETTE.SMOKE_MAIN,
+                color: PALETTE.INK_MAIN,
             },
-            {
-                props: { color: "error" },
-                style: {
-                    backgroundColor: theme.palette.alert.light,
-                    color: theme.palette.alert.main,
-                },
+        },
+        {
+            props: { color: "error" },
+            style: {
+                backgroundColor: PALETTE.ALERT_LIGHT,
+                color: PALETTE.ALERT_MAIN,
             },
-            {
-                props: { color: "info" },
-                style: {
-                    backgroundColor: theme.palette.info.light,
-                    color: theme.palette.info.main,
-                },
+        },
+        {
+            props: { color: "info" },
+            style: {
+                backgroundColor: PALETTE.INFO_LIGHT,
+                color: PALETTE.INFO_MAIN,
             },
-            {
-                props: {
-                    color: CHIP_PROPS.COLOR.PRIMARY,
-                    variant: CHIP_PROPS.VARIANT.FILLED,
-                },
-                style: {
-                    backgroundColor: PALETTE.PRIMARY_MAIN,
-                    color: PALETTE.COMMON_WHITE,
-                },
+        },
+        {
+            props: {
+                color: CHIP_PROPS.COLOR.PRIMARY,
+                variant: CHIP_PROPS.VARIANT.FILLED,
             },
-            {
-                props: { color: "success" },
-                style: {
-                    backgroundColor: theme.palette.success.light,
-                    color: theme.palette.success.main,
-                },
+            style: {
+                backgroundColor: PALETTE.PRIMARY_MAIN,
+                color: PALETTE.COMMON_WHITE,
             },
-            {
-                props: { color: "warning" },
-                style: {
-                    backgroundColor: theme.palette.warning.light,
-                    color: theme.palette.warning.main,
-                },
+        },
+        {
+            props: { color: "success" },
+            style: {
+                backgroundColor: PALETTE.SUCCESS_LIGHT,
+                color: PALETTE.SUCCESS_MAIN,
             },
-            {
-                props: { variant: "filterTag" },
-                style: {
-                    ...theme.typography[TEXT_BODY_SMALL_500],
-                    cursor: "pointer", // "pointer" cursor required to restore "clickable" ui
-                    gap: 2,
-                    height: 24,
-                    justifySelf: FLEX_START,
-                    padding: "0 8px",
-                    // eslint-disable-next-line sort-keys -- disabling key order for readability
-                    "& .MuiChip-label": {
-                        padding: 0,
-                    },
-                },
+        },
+        {
+            props: { color: "warning" },
+            style: {
+                backgroundColor: PALETTE.WARNING_LIGHT,
+                color: PALETTE.WARNING_MAIN,
             },
-            {
-                props: { variant: "ntag" },
-                style: {
-                    ...theme.typography[TEXT_BODY_SMALL_400],
-                    backgroundColor: theme.palette.smoke.main,
-                    boxShadow: `0 0 0 2px ${PALETTE.COMMON_WHITE}`,
-                    height: 24,
-                    justifySelf: FLEX_START,
-                    minWidth: 0,
+        },
+        {
+            props: { variant: "filterTag" },
+            style: {
+                cursor: "pointer", // "pointer" cursor required to restore "clickable" ui
+                font: FONT.BODY_SMALL_500,
+                gap: 2,
+                height: 24,
+                justifySelf: FLEX_START,
+                padding: "0 8px",
+                // eslint-disable-next-line sort-keys -- disabling key order for readability
+                "& .MuiChip-label": {
+                    padding: 0,
                 },
             },
-            {
-                props: { variant: "status" },
-                style: {
-                    boxShadow: `0 0 0 2px ${PALETTE.COMMON_WHITE}`,
-                    height: 20,
-                    maxWidth: "fit-content",
-                    minWidth: 0,
-                },
+        },
+        {
+            props: { variant: "ntag" },
+            style: {
+                backgroundColor: PALETTE.SMOKE_MAIN,
+                boxShadow: `0 0 0 2px ${PALETTE.COMMON_WHITE}`,
+                font: FONT.BODY_SMALL_400,
+                height: 24,
+                justifySelf: FLEX_START,
+                minWidth: 0,
             },
-            {
-                props: { color: "default", variant: "status" },
-                style: {
-                    color: PALETTE.INK_LIGHT,
-                },
+        },
+        {
+            props: { variant: "status" },
+            style: {
+                boxShadow: `0 0 0 2px ${PALETTE.COMMON_WHITE}`,
+                height: 20,
+                maxWidth: "fit-content",
+                minWidth: 0,
             },
-        ],
-    };
-};
-/**
- * MuiCircularProgress Component
- * @param theme - Theme.
- * @returns MuiCircularProgress component theme styles.
- */
-export const MuiCircularProgress = (theme) => {
-    return {
-        styleOverrides: {
-            circle: {
-                strokeLinecap: "round",
-            },
-        },
-        variants: [
-            {
-                props: {
-                    color: "alert",
-                },
-                style: {
-                    color: theme.palette.alert.main,
-                },
+        },
+        {
+            props: { color: "default", variant: "status" },
+            style: {
+                color: PALETTE.INK_LIGHT,
             },
-        ],
-    };
+        },
+    ],
 };
-/**
- * MuiCssBaseline Component
- * @param theme - Theme.
- * @returns MuiCssBaseline component theme styles.
- */
-export const MuiCssBaseline = (theme) => {
-    return {
-        styleOverrides: {
-            a: {
-                color: theme.palette.primary.main,
-                textDecoration: "none",
-                // eslint-disable-next-line sort-keys -- disabling key order for readability
-                "&:hover": {
-                    textDecoration: "underline",
-                },
-            },
-            body: {
-                fontFamily: theme.typography.fontFamily,
-            },
-            code: {
-                ...theme.typography[TEXT_BODY_400_2_LINES],
-                fontFamily: "Roboto Mono, monospace",
-                fontSize: 12,
+const MuiCircularProgress = {
+    styleOverrides: {
+        circle: {
+            strokeLinecap: "round",
+        },
+    },
+    variants: [
+        {
+            props: {
+                color: "alert",
             },
-            img: {
-                display: "block",
+            style: {
+                color: PALETTE.ALERT_MAIN,
             },
-            p: {
-                margin: "0 0 8px",
-                // eslint-disable-next-line sort-keys -- disabling key order for readability
-                "&:last-child": {
-                    margin: 0,
-                },
+        },
+    ],
+};
+const MuiCssBaseline = {
+    styleOverrides: {
+        a: {
+            color: PALETTE.PRIMARY_MAIN,
+            textDecoration: "none",
+            // eslint-disable-next-line sort-keys -- disabling key order for readability
+            "&:hover": {
+                textDecoration: "underline",
             },
-            pre: {
+        },
+        body: {
+            fontFamily: APP.FONT_FAMILY,
+        },
+        code: {
+            font: FONT.BODY_400_2_LINES,
+            fontFamily: "Roboto Mono, monospace",
+            fontSize: 12,
+        },
+        img: {
+            display: "block",
+        },
+        p: {
+            margin: "0 0 8px",
+            // eslint-disable-next-line sort-keys -- disabling key order for readability
+            "&:last-child": {
                 margin: 0,
-                whiteSpace: "pre-wrap",
-                wordBreak: "break-word",
-            },
-            strong: {
-                fontWeight: 500,
             },
         },
-    };
+        pre: {
+            margin: 0,
+            whiteSpace: "pre-wrap",
+            wordBreak: "break-word",
+        },
+        strong: {
+            fontWeight: 500,
+        },
+    },
 };
-/**
- * MuiDialog Component
- * @param theme - Theme.
- * @returns MuiDialog component theme styles.
- */
-export const MuiDialog = {
+const MuiDialog = {
     styleOverrides: {
         paper: {
             boxShadow: SHADOWS["02"],
@@ -605,101 +531,64 @@ export const MuiDialog = {
         },
     },
 };
-/**
- * MuiDialogActions Component
- */
-export const MuiDialogActions = {
+const MuiDialogActions = {
     styleOverrides: {
         root: {
             padding: 20,
         },
     },
 };
-/**
- * MuiDialogContent Component
- * @param theme - Theme.
- * @returns MuiDialogContent component theme styles.
- */
-export const MuiDialogContent = (theme) => {
-    return {
-        styleOverrides: {
-            root: {
-                borderColor: theme.palette.smoke.main,
-                padding: 20,
-            },
-        },
-    };
+const MuiDialogContent = {
+    styleOverrides: {
+        root: {
+            borderColor: PALETTE.SMOKE_MAIN,
+            padding: 20,
+        },
+    },
 };
-/**
- * MuiDialogTitle Component
- * @param theme - Theme.
- * @returns MuiDialogTitle component theme styles.
- */
-export const MuiDialogTitle = (theme) => {
-    return {
-        styleOverrides: {
-            root: {
-                ...theme.typography[TEXT_HEADING],
-                alignItems: "center",
-                display: "grid",
-                gridAutoFlow: "column",
-                padding: 20,
-                [tabletUp]: {},
-                // eslint-disable-next-line sort-keys -- disabling key order for readability
-                "& .MuiIconButton-edgeEnd": {
-                    alignSelf: FLEX_START,
-                    justifySelf: "flex-end",
-                },
+const MuiDialogTitle = {
+    styleOverrides: {
+        root: ({ theme }) => ({
+            alignItems: "center",
+            display: "grid",
+            font: FONT.HEADING,
+            gridAutoFlow: "column",
+            padding: 20,
+            [bpUpSm({ theme })]: {},
+            // eslint-disable-next-line sort-keys -- disabling key order for readability
+            "& .MuiIconButton-edgeEnd": {
+                alignSelf: FLEX_START,
+                justifySelf: "flex-end",
             },
-        },
-    };
+        }),
+    },
 };
-/**
- * MuiDivider Component
- * @param theme - Theme.
- * @returns MuiDivider component theme styles.
- */
-export const MuiDivider = (theme) => {
-    return {
-        styleOverrides: {
-            root: {
-                borderColor: theme.palette.smoke.main,
-            },
-        },
-    };
+const MuiDivider = {
+    styleOverrides: {
+        root: {
+            borderColor: PALETTE.SMOKE_MAIN,
+        },
+    },
 };
-/**
- * MuiDrawer Component
- */
-export const MuiDrawer = {
+const MuiDrawer = {
     styleOverrides: {
         paper: {
             overflowY: "visible", // required; allows backdrop button to render outside of drawer container
         },
     },
 };
-/**
- * MuiFormControlLabel Component
- * @param theme - Theme.
- * @returns MuiFormControlLabel component theme styles.
- */
-export const MuiFormControlLabel = (theme) => {
-    return {
-        styleOverrides: {
-            label: {
-                ...theme.typography[TEXT_BODY_400],
-            },
-            root: {
-                gap: 8,
-                margin: 0,
-            },
+const MuiFormControlLabel = {
+    styleOverrides: {
+        label: {
+            font: FONT.BODY_400,
         },
-    };
+        root: {
+            gap: 8,
+            margin: 0,
+        },
+    },
 };
-/**
- * MuiFormGroup Component
- */
-export const MuiFormGroup = {
+const MuiFormGroup = {
     styleOverrides: {
         root: {
             alignItems: FLEX_START,
@@ -707,197 +596,173 @@ export const MuiFormGroup = {
         },
     },
 };
-/**
- * MuiFormHelperText Component
- * @param theme - Theme.
- * @returns MuiFormHelperText component theme styles.
- */
-export const MuiFormHelperText = (theme) => {
-    return {
-        styleOverrides: {
-            root: {
-                ...theme.typography[TEXT_BODY_SMALL_400],
-                // eslint-disable-next-line sort-keys -- disabling key order for readability
-                "&.Mui-error": {
-                    color: theme.palette.alert.main,
-                },
+const MuiFormHelperText = {
+    styleOverrides: {
+        root: {
+            font: FONT.BODY_SMALL_400,
+            // eslint-disable-next-line sort-keys -- disabling key order for readability
+            "&.Mui-error": {
+                color: PALETTE.ALERT_MAIN,
             },
         },
-    };
+    },
 };
-/**
- * MuiIconButton Component
- * @param theme - Theme.
- * @returns MuiIconButton component theme styles.
- */
-export const MuiIconButton = (theme) => {
-    return {
-        defaultProps: {
-            disableRipple: true,
-        },
-        styleOverrides: {
-            colorPrimary: {
-                backgroundColor: theme.palette.primary.main,
-                boxShadow: `0 1px 0 0 ${theme.palette.primary.dark}`,
-                color: theme.palette.common.white,
-                // eslint-disable-next-line sort-keys -- disabling key order for readability
-                "&.Mui-disabled": {
-                    backgroundColor: theme.palette.primary.main,
-                    color: theme.palette.common.white,
-                    opacity: 0.5,
-                },
-                // eslint-disable-next-line sort-keys -- disabling key order for readability
-                "&:hover": {
-                    backgroundColor: theme.palette.primary.dark,
-                },
-                // eslint-disable-next-line sort-keys -- disabling key order for readability
-                "&:active": {
-                    backgroundColor: theme.palette.primary.dark,
-                    boxShadow: "none",
-                },
+const MuiIconButton = {
+    defaultProps: {
+        disableRipple: true,
+    },
+    styleOverrides: {
+        colorPrimary: {
+            backgroundColor: PALETTE.PRIMARY_MAIN,
+            boxShadow: `0 1px 0 0 ${PALETTE.PRIMARY_DARK}`,
+            color: PALETTE.COMMON_WHITE,
+            // eslint-disable-next-line sort-keys -- disabling key order for readability
+            "&.Mui-disabled": {
+                backgroundColor: PALETTE.PRIMARY_MAIN,
+                color: PALETTE.COMMON_WHITE,
+                opacity: 0.5,
             },
-            colorSecondary: {
-                backgroundColor: PALETTE.COMMON_WHITE,
-                boxShadow: `inset 0 0 0 1px ${PALETTE.SMOKE_DARK}, 0 1px 0 0 ${COLOR_MIXES.COMMON_BLACK_05}`,
+            // eslint-disable-next-line sort-keys -- disabling key order for readability
+            "&:hover": {
+                backgroundColor: PALETTE.PRIMARY_DARK,
+            },
+            // eslint-disable-next-line sort-keys -- disabling key order for readability
+            "&:active": {
+                backgroundColor: PALETTE.PRIMARY_DARK,
+                boxShadow: "none",
+            },
+        },
+        colorSecondary: {
+            backgroundColor: PALETTE.COMMON_WHITE,
+            boxShadow: `inset 0 0 0 1px ${PALETTE.SMOKE_DARK}, 0 1px 0 0 ${COLOR_MIXES.COMMON_BLACK_05}`,
+            color: PALETTE.INK_MAIN,
+            // eslint-disable-next-line sort-keys -- disabling key order for readability
+            "&.Mui-disabled": {
+                boxShadow: `inset 0 0 0 1px ${PALETTE.SMOKE_DARK}`,
+                color: PALETTE.INK_LIGHT,
+                opacity: 0.5,
+            },
+            // eslint-disable-next-line sort-keys -- disabling key order for readability
+            "&:hover": {
+                backgroundColor: PALETTE.SMOKE_LIGHTEST,
+            },
+            // eslint-disable-next-line sort-keys -- disabling key order for readability
+            "&:active": {
+                backgroundColor: PALETTE.SMOKE_LIGHTEST,
+                boxShadow: `inset 0 0 0 1px ${PALETTE.SMOKE_DARK}`,
+            },
+        },
+        root: {
+            borderRadius: 4,
+        },
+        sizeLarge: {
+            padding: 10,
+        },
+        sizeMedium: {
+            padding: 8,
+        },
+        sizeSmall: {
+            padding: 6,
+        },
+    },
+    variants: [
+        {
+            props: {
+                color: "ink",
+            },
+            style: {
                 color: PALETTE.INK_MAIN,
                 // eslint-disable-next-line sort-keys -- disabling key order for readability
-                "&.Mui-disabled": {
-                    boxShadow: `inset 0 0 0 1px ${PALETTE.SMOKE_DARK}`,
-                    color: PALETTE.INK_LIGHT,
-                    opacity: 0.5,
-                },
-                // eslint-disable-next-line sort-keys -- disabling key order for readability
                 "&:hover": {
-                    backgroundColor: PALETTE.SMOKE_LIGHTEST,
-                },
-                // eslint-disable-next-line sort-keys -- disabling key order for readability
-                "&:active": {
-                    backgroundColor: PALETTE.SMOKE_LIGHTEST,
-                    boxShadow: `inset 0 0 0 1px ${PALETTE.SMOKE_DARK}`,
+                    backgroundColor: PALETTE.SMOKE_LIGHT,
                 },
             },
-            root: {
-                borderRadius: 4,
+        },
+        {
+            props: {
+                color: "inkLight",
             },
-            sizeLarge: {
-                padding: 10,
+            style: {
+                color: PALETTE.INK_LIGHT,
+                // eslint-disable-next-line sort-keys -- disabling key order for readability
+                "&:hover": {
+                    backgroundColor: PALETTE.SMOKE_LIGHT,
+                },
             },
-            sizeMedium: {
-                padding: 8,
+        },
+        {
+            props: {
+                edge: "end",
+                size: "small",
             },
-            sizeSmall: {
-                padding: 6,
+            style: {
+                marginRight: -6,
             },
         },
-        variants: [
-            {
-                props: {
-                    color: "ink",
-                },
-                style: {
-                    color: theme.palette.ink.main,
-                    // eslint-disable-next-line sort-keys -- disabling key order for readability
-                    "&:hover": {
-                        backgroundColor: theme.palette.smoke.light,
-                    },
-                },
+        {
+            props: {
+                size: "xlarge",
             },
-            {
-                props: {
-                    color: "inkLight",
-                },
-                style: {
-                    color: theme.palette.ink.light,
-                    // eslint-disable-next-line sort-keys -- disabling key order for readability
-                    "&:hover": {
-                        backgroundColor: theme.palette.smoke.light,
-                    },
-                },
+            style: {
+                padding: 14,
             },
-            {
-                props: {
-                    edge: "end",
-                    size: "small",
-                },
-                style: {
-                    marginRight: -6,
-                },
+        },
+        {
+            props: {
+                size: "xsmall",
             },
-            {
-                props: {
-                    size: "xlarge",
-                },
-                style: {
-                    padding: 14,
-                },
+            style: {
+                padding: 4,
             },
-            {
-                props: {
-                    size: "xsmall",
-                },
-                style: {
-                    padding: 4,
-                },
+        },
+        {
+            props: {
+                edge: "end",
+                size: "xsmall",
             },
-            {
-                props: {
-                    edge: "end",
-                    size: "xsmall",
-                },
-                style: {
-                    marginRight: -4,
-                },
+            style: {
+                marginRight: -4,
             },
-            {
-                props: {
-                    size: "xxsmall",
-                },
-                style: {
-                    padding: 0,
-                },
+        },
+        {
+            props: {
+                size: "xxsmall",
             },
-        ],
-    };
-};
-/**
- * MuiInputBase Component
- * @param theme - Theme.
- * @returns MuiInputBase component theme styles.
- */
-export const MuiInputBase = (theme) => {
-    return {
-        styleOverrides: {
-            multiline: {
-                height: "unset",
-            },
-            root: {
-                ...theme.typography[TEXT_BODY_400],
-                fontSize: 16, // overrides default 14px to prevent IOS zoom on focus.
-                height: 40,
-                letterSpacing: "normal",
-                // eslint-disable-next-line sort-keys -- disabling key order for readability
-                [tabletUp]: {
-                    fontSize: theme.typography[TEXT_BODY_400].fontSize,
-                },
-                variants: [
-                    /* PRIMARY */ /* TODO: remove `adornedStart` when all input components are refactored to color: secondary */
-                    {
-                        props: { color: "primary" },
-                        style: {
-                            adornedStart: {
-                                gap: 8,
-                            },
-                        },
-                    },
-                ],
+            style: {
+                padding: 0,
             },
         },
-    };
+    ],
+};
+const MuiInputBase = {
+    styleOverrides: {
+        multiline: {
+            height: "unset",
+        },
+        root: ({ theme }) => ({
+            font: FONT.BODY_400,
+            fontSize: 16, // overrides default 14px to prevent IOS zoom on focus.
+            height: 40,
+            letterSpacing: "normal",
+            // eslint-disable-next-line sort-keys -- disabling key order for readability
+            [bpUpSm({ theme })]: {
+                fontSize: "14px",
+            },
+            variants: [
+                /* PRIMARY */ /* TODO: remove `adornedStart` when all input components are refactored to color: secondary */
+                {
+                    props: { color: "primary" },
+                    style: {
+                        adornedStart: {
+                            gap: 8,
+                        },
+                    },
+                },
+            ],
+        }),
+    },
 };
-/**
- * MuiLink Component
- */
-export const MuiLink = {
+const MuiLink = {
     defaultProps: {
         underline: "always",
     },
@@ -915,320 +780,272 @@ export const MuiLink = {
         },
     },
 };
-/**
- * MuiListItemButton Component
- * @param theme - Theme.
- * @returns MuiListItemButton component theme styles.
- */
-export const MuiListItemButton = (theme) => {
-    return {
-        styleOverrides: {
-            root: {
-                ...theme.typography[TEXT_BODY_400],
-                minHeight: "unset",
-                padding: "10px 16px",
+const MuiListItemButton = {
+    styleOverrides: {
+        root: {
+            font: FONT.BODY_400,
+            minHeight: "unset",
+            padding: "10px 16px",
+            // eslint-disable-next-line sort-keys -- disabling key order for readability
+            "&:hover": {
+                backgroundColor: PALETTE.SMOKE_LIGHT,
+            },
+            // eslint-disable-next-line sort-keys -- disabling key order for readability
+            "&.Mui-selected": {
+                backgroundColor: "unset",
                 // eslint-disable-next-line sort-keys -- disabling key order for readability
                 "&:hover": {
-                    backgroundColor: theme.palette.smoke.light,
-                },
-                // eslint-disable-next-line sort-keys -- disabling key order for readability
-                "&.Mui-selected": {
-                    backgroundColor: "unset",
-                    // eslint-disable-next-line sort-keys -- disabling key order for readability
-                    "&:hover": {
-                        backgroundColor: theme.palette.smoke.light,
-                    },
+                    backgroundColor: PALETTE.SMOKE_LIGHT,
                 },
             },
         },
-    };
+    },
 };
-/**
- * MuiListItemText Component
- */
-export const MuiListItemText = {
+const MuiListItemText = {
     styleOverrides: {
         root: {
             margin: 0,
         },
     },
 };
-/**
- * MuiListSubheader Component
- * @param theme - Theme.
- * @returns MuiListSubheader component theme styles.
- */
-export const MuiListSubheader = (theme) => {
-    return {
-        defaultProps: { disableSticky: true },
-        styleOverrides: {
-            root: {
-                ...theme.typography[TEXT_BODY_500],
-                color: theme.palette.ink.main,
-            },
-        },
-    };
+const MuiListSubheader = {
+    defaultProps: { disableSticky: true },
+    styleOverrides: {
+        root: {
+            color: PALETTE.INK_MAIN,
+            font: FONT.BODY_500,
+        },
+    },
 };
-/**
- * MuiMenuItem Component
- * @param theme - Theme.
- * @returns MuiMenuItem component theme styles.
- */
-export const MuiMenuItem = (theme) => {
-    return {
-        defaultProps: { disableRipple: true },
-        styleOverrides: {
-            root: {
-                ...theme.typography[TEXT_BODY_400],
-                minHeight: "unset",
-                padding: "10px 16px",
-            },
+const MuiMenuItem = {
+    defaultProps: { disableRipple: true },
+    styleOverrides: {
+        root: {
+            font: FONT.BODY_400,
+            minHeight: "unset",
+            padding: "10px 16px",
         },
-    };
+    },
 };
-/**
- * MuiOutlinedInput Component
- * @param theme - Theme.
- * @returns MuiOutlinedInput component theme styles.
- */
-export const MuiOutlinedInput = (theme) => {
-    return {
-        styleOverrides: {
-            input: {
-                color: theme.palette.ink.light,
-                height: 20,
-                padding: "10px 14px 10px 0",
-                // eslint-disable-next-line sort-keys -- disabling key order for readability
-                "&:focus": {
-                    color: theme.palette.ink.main,
-                },
+const MuiOutlinedInput = {
+    styleOverrides: {
+        input: {
+            color: PALETTE.INK_LIGHT,
+            height: 20,
+            padding: "10px 14px 10px 0",
+            // eslint-disable-next-line sort-keys -- disabling key order for readability
+            "&:focus": {
+                color: PALETTE.INK_MAIN,
             },
-            notchedOutline: {
-                borderColor: theme.palette.smoke.dark,
+        },
+        notchedOutline: {
+            borderColor: PALETTE.SMOKE_DARK,
+        },
+        root: {
+            backgroundColor: PALETTE.COMMON_WHITE,
+            boxShadow: `inset 0 2px 0 0 ${COLOR_MIXES.COMMON_BLACK_04}`,
+            paddingLeft: 12, // TODO: remove when all input components are refactored to color: secondary.
+            // eslint-disable-next-line sort-keys -- disabling key order for readability
+            "&:hover": {
+                "& .MuiOutlinedInput-notchedOutline": {
+                    borderColor: PALETTE.SMOKE_DARK,
+                },
             },
-            root: {
-                backgroundColor: PALETTE.COMMON_WHITE,
-                boxShadow: `inset 0 2px 0 0 ${COLOR_MIXES.COMMON_BLACK_04}`,
-                paddingLeft: 12, // TODO: remove when all input components are refactored to color: secondary.
-                // eslint-disable-next-line sort-keys -- disabling key order for readability
-                "&:hover": {
-                    "& .MuiOutlinedInput-notchedOutline": {
-                        borderColor: theme.palette.smoke.dark,
-                    },
+            // eslint-disable-next-line sort-keys -- disabling key order for specificity
+            "&.Mui-focused": {
+                "& .MuiOutlinedInput-notchedOutline": {
+                    borderColor: PALETTE.INK_MAIN,
+                    borderWidth: 1,
                 },
-                // eslint-disable-next-line sort-keys -- disabling key order for specificity
-                "&.Mui-focused": {
-                    "& .MuiOutlinedInput-notchedOutline": {
-                        borderColor: theme.palette.ink.main,
-                        borderWidth: 1,
-                    },
+            },
+            // eslint-disable-next-line sort-keys -- disabling key order for specificity
+            "&.Mui-disabled": {
+                "& .MuiOutlinedInput-notchedOutline": {
+                    borderColor: PALETTE.SMOKE_DARK,
+                    borderWidth: 1,
                 },
+            },
+            "&.Mui-error": {
+                backgroundColor: PALETTE.ALERT_LIGHTEST,
                 // eslint-disable-next-line sort-keys -- disabling key order for specificity
-                "&.Mui-disabled": {
-                    "& .MuiOutlinedInput-notchedOutline": {
-                        borderColor: theme.palette.smoke.dark,
-                        borderWidth: 1,
-                    },
+                "& .MuiOutlinedInput-notchedOutline": {
+                    borderColor: PALETTE.ALERT_MAIN,
+                    borderWidth: 1,
                 },
-                "&.Mui-error": {
-                    backgroundColor: theme.palette.alert.lightest,
-                    // eslint-disable-next-line sort-keys -- disabling key order for specificity
-                    "& .MuiOutlinedInput-notchedOutline": {
-                        borderColor: theme.palette.alert.main,
-                        borderWidth: 1,
+            },
+            variants: [
+                /* PRIMARY */
+                {
+                    props: { color: OUTLINED_INPUT_PROPS.COLOR.PRIMARY },
+                    style: {
+                        "& .MuiSvgIcon-root": {
+                            color: PALETTE.INK_LIGHT, // Adornment e.g. "SearchIcon". TODO: remove when all input components are refactored to color: secondary.
+                        },
+                        // eslint-disable-next-line sort-keys -- disabling key order for specificity
+                        "&.Mui-focused": {
+                            "& .MuiSvgIcon-root": {
+                                color: PALETTE.INK_MAIN, // Adornment e.g. "SearchIcon". TODO: remove when all input components are refactored to color: secondary.
+                            },
+                        },
+                        // eslint-disable-next-line sort-keys -- disabling key order for specificity
+                        "&.Mui-disabled": {
+                            "& .MuiSvgIcon-root": {
+                                color: PALETTE.INK_LIGHT, // TODO: remove when all input components are refactored to color: secondary.
+                            },
+                        },
                     },
                 },
-                variants: [
-                    /* PRIMARY */
-                    {
-                        props: { color: OUTLINED_INPUT_PROPS.COLOR.PRIMARY },
-                        style: {
-                            "& .MuiSvgIcon-root": {
-                                color: theme.palette.ink.light, // Adornment e.g. "SearchIcon". TODO: remove when all input components are refactored to color: secondary.
+                /* SECONDARY */
+                {
+                    props: { color: OUTLINED_INPUT_PROPS.COLOR.SECONDARY },
+                    style: {
+                        backgroundColor: PALETTE.COMMON_WHITE,
+                        boxShadow: `inset 0 2px 0 0 ${COLOR_MIXES.COMMON_BLACK_04}`,
+                        color: PALETTE.INK_LIGHT,
+                        padding: "0 12px",
+                        // eslint-disable-next-line sort-keys -- disabling key order for specificity
+                        ".MuiOutlinedInput-input": {
+                            color: "inherit",
+                            height: 20,
+                            padding: "10px 0",
+                            // eslint-disable-next-line sort-keys -- disabling key order for specificity
+                            "&::placeholder": {
+                                color: "inherit",
+                                opacity: 0.8,
                             },
+                        },
+                        ".MuiOutlinedInput-notchedOutline": {
+                            borderColor: PALETTE.SMOKE_DARK,
+                            borderWidth: 1,
+                        },
+                        // eslint-disable-next-line sort-keys -- disabling key order for specificity
+                        "&.Mui-focused": {
+                            color: PALETTE.INK_MAIN,
                             // eslint-disable-next-line sort-keys -- disabling key order for specificity
-                            "&.Mui-focused": {
-                                "& .MuiSvgIcon-root": {
-                                    color: theme.palette.ink.main, // Adornment e.g. "SearchIcon". TODO: remove when all input components are refactored to color: secondary.
+                            ".MuiOutlinedInput-input": {
+                                "&::placeholder": {
+                                    opacity: 0,
                                 },
                             },
                             // eslint-disable-next-line sort-keys -- disabling key order for specificity
-                            "&.Mui-disabled": {
-                                "& .MuiSvgIcon-root": {
-                                    color: theme.palette.ink.light, // TODO: remove when all input components are refactored to color: secondary.
-                                },
+                            ".MuiOutlinedInput-notchedOutline": {
+                                borderColor: PALETTE.INK_MAIN,
+                                borderWidth: 1,
                             },
                         },
-                    },
-                    /* SECONDARY */
-                    {
-                        props: { color: OUTLINED_INPUT_PROPS.COLOR.SECONDARY },
-                        style: {
-                            backgroundColor: PALETTE.COMMON_WHITE,
-                            boxShadow: `inset 0 2px 0 0 ${COLOR_MIXES.COMMON_BLACK_04}`,
+                        // eslint-disable-next-line sort-keys -- disabling key order for specificity
+                        "&.Mui-disabled": {
+                            backgroundColor: PALETTE.SMOKE_LIGHT,
                             color: PALETTE.INK_LIGHT,
-                            padding: "0 12px",
                             // eslint-disable-next-line sort-keys -- disabling key order for specificity
                             ".MuiOutlinedInput-input": {
-                                color: "inherit",
-                                height: 20,
-                                padding: "10px 0",
+                                WebkitTextFillColor: "unset",
                                 // eslint-disable-next-line sort-keys -- disabling key order for specificity
                                 "&::placeholder": {
                                     color: "inherit",
-                                    opacity: 0.8,
+                                    opacity: 1,
                                 },
                             },
+                            // eslint-disable-next-line sort-keys -- disabling key order for specificity
                             ".MuiOutlinedInput-notchedOutline": {
                                 borderColor: PALETTE.SMOKE_DARK,
                                 borderWidth: 1,
                             },
-                            // eslint-disable-next-line sort-keys -- disabling key order for specificity
-                            "&.Mui-focused": {
-                                color: PALETTE.INK_MAIN,
-                                // eslint-disable-next-line sort-keys -- disabling key order for specificity
-                                ".MuiOutlinedInput-input": {
-                                    "&::placeholder": {
-                                        opacity: 0,
-                                    },
-                                },
-                                // eslint-disable-next-line sort-keys -- disabling key order for specificity
-                                ".MuiOutlinedInput-notchedOutline": {
-                                    borderColor: PALETTE.INK_MAIN,
-                                    borderWidth: 1,
-                                },
-                            },
-                            // eslint-disable-next-line sort-keys -- disabling key order for specificity
-                            "&.Mui-disabled": {
-                                backgroundColor: PALETTE.SMOKE_LIGHT,
-                                color: PALETTE.INK_LIGHT,
-                                // eslint-disable-next-line sort-keys -- disabling key order for specificity
-                                ".MuiOutlinedInput-input": {
-                                    WebkitTextFillColor: "unset",
-                                    // eslint-disable-next-line sort-keys -- disabling key order for specificity
-                                    "&::placeholder": {
-                                        color: "inherit",
-                                        opacity: 1,
-                                    },
-                                },
-                                // eslint-disable-next-line sort-keys -- disabling key order for specificity
-                                ".MuiOutlinedInput-notchedOutline": {
-                                    borderColor: PALETTE.SMOKE_DARK,
-                                    borderWidth: 1,
-                                },
-                            },
                         },
                     },
-                ],
-            },
+                },
+            ],
         },
-    };
+    },
 };
-/**
- * MuiPaper Component
- * @param theme - Theme.
- * @returns MuiPaper component theme styles.
- */
-export const MuiPaper = (theme) => {
-    return {
-        variants: [
-            {
-                props: { elevation: 1 },
-                style: {
-                    boxShadow: SHADOWS["01"],
-                },
+const MuiPaper = {
+    variants: [
+        {
+            props: { elevation: 1 },
+            style: {
+                boxShadow: SHADOWS["01"],
             },
-            {
-                props: { elevation: 2 },
-                style: {
-                    boxShadow: SHADOWS["02"],
-                },
+        },
+        {
+            props: { elevation: 2 },
+            style: {
+                boxShadow: SHADOWS["02"],
             },
-            {
-                props: { variant: "footer" },
-                style: {
-                    backgroundColor: theme.palette.smoke.light,
-                    boxShadow: `inset 0 1px 0 0 ${theme.palette.smoke.main}, inset 0 -1px 0 0 ${theme.palette.smoke.main}`,
-                },
+        },
+        {
+            props: { variant: "footer" },
+            style: {
+                backgroundColor: PALETTE.SMOKE_LIGHT,
+                boxShadow: `inset 0 1px 0 0 ${PALETTE.SMOKE_MAIN}, inset 0 -1px 0 0 ${PALETTE.SMOKE_MAIN}`,
             },
-            {
-                props: { variant: "menu" },
-                style: {
-                    borderColor: theme.palette.smoke.dark,
-                    borderRadius: 8,
-                    borderStyle: "solid",
-                    borderWidth: 1,
-                    boxShadow: SHADOWS["02"],
-                },
+        },
+        {
+            props: { variant: "menu" },
+            style: {
+                borderColor: PALETTE.SMOKE_DARK,
+                borderRadius: 8,
+                borderStyle: "solid",
+                borderWidth: 1,
+                boxShadow: SHADOWS["02"],
             },
-            {
-                props: { variant: "panel" },
-                style: {
-                    borderColor: theme.palette.smoke.main,
-                    borderStyle: "solid",
-                    borderWidth: 1,
-                    boxShadow: SHADOWS["01"],
-                },
+        },
+        {
+            props: { variant: "panel" },
+            style: {
+                borderColor: PALETTE.SMOKE_MAIN,
+                borderStyle: "solid",
+                borderWidth: 1,
+                boxShadow: SHADOWS["01"],
             },
-            {
-                props: { variant: "searchbar" },
-                style: {
-                    alignSelf: FLEX_START,
-                    borderColor: theme.palette.smoke.main,
-                    borderRadius: 0,
-                    borderStyle: "solid",
-                    borderWidth: "0 0 1px 0",
-                    boxShadow: SHADOWS["01"],
-                    // eslint-disable-next-line sort-keys -- disabling key order for readability
-                    "&.MuiDialog-paper": {
-                        marginLeft: 0,
-                        marginRight: 0,
-                        maxWidth: "100%",
-                        width: "100%",
-                    },
+        },
+        {
+            props: { variant: "searchbar" },
+            style: {
+                alignSelf: FLEX_START,
+                borderColor: PALETTE.SMOKE_MAIN,
+                borderRadius: 0,
+                borderStyle: "solid",
+                borderWidth: "0 0 1px 0",
+                boxShadow: SHADOWS["01"],
+                // eslint-disable-next-line sort-keys -- disabling key order for readability
+                "&.MuiDialog-paper": {
+                    marginLeft: 0,
+                    marginRight: 0,
+                    maxWidth: "100%",
+                    width: "100%",
                 },
             },
-        ],
-    };
+        },
+    ],
 };
-/**
- * MuiRadio Component
- * @param theme - Theme.
- * @returns MuiRadio component theme styles.
- */
-export const MuiRadio = (theme) => {
-    return {
-        defaultProps: {
-            disableRipple: true,
-        },
-        styleOverrides: {
-            root: {
-                color: theme.palette.smoke.dark,
-                padding: 0,
+const MuiRadio = {
+    defaultProps: {
+        disableRipple: true,
+    },
+    styleOverrides: {
+        root: {
+            color: PALETTE.SMOKE_DARK,
+            padding: 0,
+            // eslint-disable-next-line sort-keys -- disabling key order for readability
+            "&.Mui-disabled": {
+                color: PALETTE.SMOKE_DARK,
+                opacity: "50%",
+            },
+            "&.MuiRadio-colorDefault": {
+                color: PALETTE.INK_LIGHT,
                 // eslint-disable-next-line sort-keys -- disabling key order for readability
                 "&.Mui-disabled": {
-                    color: theme.palette.smoke.dark,
-                    opacity: "50%",
-                },
-                "&.MuiRadio-colorDefault": {
-                    color: theme.palette.ink.light,
-                    // eslint-disable-next-line sort-keys -- disabling key order for readability
-                    "&.Mui-disabled": {
-                        color: theme.palette.smoke.main,
-                        opacity: "100%",
-                    },
-                },
-                "&:hover": {
-                    backgroundColor: "transparent",
+                    color: PALETTE.SMOKE_MAIN,
+                    opacity: "100%",
                 },
             },
+            "&:hover": {
+                backgroundColor: "transparent",
+            },
         },
-    };
+    },
 };
-/**
- * MuiSelect Component
- */
-export const MuiSelect = {
+const MuiSelect = {
     defaultProps: {
         IconComponent: DropDownIcon,
     },
@@ -1239,119 +1056,102 @@ export const MuiSelect = {
         },
     },
 };
-/**
- * MuiSvgIcon Component
- * @param theme - Theme.
- * @returns MuiSvgIcon component theme styles.
- */
-export const MuiSvgIcon = (theme) => {
-    return {
-        styleOverrides: {
-            fontSizeLarge: {
-                fontSize: "32px",
-            },
-            fontSizeSmall: {
-                fontSize: "20px",
-            },
-            root: {
-                "&.MuiSelect-icon": {
-                    color: theme.palette.ink.main,
-                    right: 8,
-                },
+const MuiSvgIcon = {
+    styleOverrides: {
+        fontSizeLarge: {
+            fontSize: "32px",
+        },
+        fontSizeSmall: {
+            fontSize: "20px",
+        },
+        root: {
+            "&.MuiSelect-icon": {
+                color: PALETTE.INK_MAIN,
+                right: 8,
             },
         },
-        variants: [
-            {
-                props: {
-                    color: "inkLight",
-                },
-                style: {
-                    color: theme.palette.ink.light,
-                },
+    },
+    variants: [
+        {
+            props: {
+                color: "inkLight",
             },
-            {
-                props: {
-                    color: "inkMain",
-                },
-                style: {
-                    color: theme.palette.ink.main,
-                },
+            style: {
+                color: PALETTE.INK_LIGHT,
             },
-            {
-                props: {
-                    fontSize: "medium",
-                },
-                style: {
-                    fontSize: "24px",
-                },
+        },
+        {
+            props: {
+                color: "inkMain",
             },
-            {
-                props: {
-                    fontSize: "xsmall",
-                },
-                style: {
-                    fontSize: "18px",
-                },
+            style: {
+                color: PALETTE.INK_MAIN,
             },
-            {
-                props: {
-                    fontSize: "xxlarge",
-                },
-                style: {
-                    fontSize: "40px",
-                },
+        },
+        {
+            props: {
+                fontSize: "medium",
             },
-            {
-                props: {
-                    fontSize: "xxsmall",
-                },
-                style: {
-                    fontSize: "16px",
-                },
+            style: {
+                fontSize: "24px",
+            },
+        },
+        {
+            props: {
+                fontSize: "xsmall",
+            },
+            style: {
+                fontSize: "18px",
+            },
+        },
+        {
+            props: {
+                fontSize: "xxlarge",
             },
-        ],
-    };
+            style: {
+                fontSize: "40px",
+            },
+        },
+        {
+            props: {
+                fontSize: "xxsmall",
+            },
+            style: {
+                fontSize: "16px",
+            },
+        },
+    ],
 };
-/**
- * MuiTab Component
- * @param theme - Theme.
- * @returns MuiTab component theme styles.
- */
-export const MuiTab = (theme) => {
-    return {
-        styleOverrides: {
-            labelIcon: {
-                gap: 8,
-                // eslint-disable-next-line sort-keys -- disabling key order for readability
-                "& > img": {
-                    maxHeight: 20, // Tab image max height.
-                },
+const MuiTab = {
+    styleOverrides: {
+        labelIcon: {
+            gap: 8,
+            // eslint-disable-next-line sort-keys -- disabling key order for readability
+            "& > img": {
+                maxHeight: 20, // Tab image max height.
             },
-            root: {
-                ...theme.typography[TEXT_BODY_500],
-                color: theme.palette.ink.light,
-                marginBottom: 3,
-                minHeight: "unset",
-                minWidth: "unset",
-                opacity: 1,
-                padding: 12,
-                textTransform: "capitalize",
-                // eslint-disable-next-line sort-keys -- disabling key order for readability
-                "&.Mui-selected": {
-                    color: theme.palette.ink.main,
-                },
-                // eslint-disable-next-line sort-keys -- disabling key order for readability
-                "& > .MuiTab-iconWrapper": {
-                    marginRight: 0,
-                },
+        },
+        root: {
+            color: PALETTE.INK_LIGHT,
+            font: FONT.BODY_500,
+            marginBottom: 3,
+            minHeight: "unset",
+            minWidth: "unset",
+            opacity: 1,
+            padding: 12,
+            textTransform: "capitalize",
+            // eslint-disable-next-line sort-keys -- disabling key order for readability
+            "&.Mui-selected": {
+                color: PALETTE.INK_MAIN,
+            },
+            // eslint-disable-next-line sort-keys -- disabling key order for readability
+            "& > .MuiTab-iconWrapper": {
+                marginRight: 0,
             },
         },
-    };
+    },
 };
-/**
- * MuiTableSortLabel Component
- */
-export const MuiTableSortLabel = {
+const MuiTableSortLabel = {
     styleOverrides: {
         icon: {
             fontSize: 20,
@@ -1375,189 +1175,155 @@ export const MuiTableSortLabel = {
         },
     },
 };
-/**
- * MuiTabs Component
- * @param theme - Theme.
- * @returns MuiTabs component theme styles.
- */
-export const MuiTabs = (theme) => {
-    return {
-        defaultProps: {
-            textColor: "inherit",
-            variant: "scrollable",
-        },
-        styleOverrides: {
-            flexContainer: {
-                gap: 8,
+const MuiTabs = {
+    defaultProps: {
+        textColor: "inherit",
+        variant: "scrollable",
+    },
+    styleOverrides: {
+        flexContainer: {
+            gap: 8,
+            // eslint-disable-next-line sort-keys -- disabling key order for readability
+            "&:not(.MuiTabs-flexContainerVertical)": {
                 // eslint-disable-next-line sort-keys -- disabling key order for readability
-                "&:not(.MuiTabs-flexContainerVertical)": {
+                ".MuiTab-root": {
                     // eslint-disable-next-line sort-keys -- disabling key order for readability
-                    ".MuiTab-root": {
+                    "&:hover": {
+                        color: PALETTE.INK_MAIN,
+                        overflow: "visible",
                         // eslint-disable-next-line sort-keys -- disabling key order for readability
-                        "&:hover": {
-                            color: theme.palette.ink.main,
-                            overflow: "visible",
-                            // eslint-disable-next-line sort-keys -- disabling key order for readability
-                            "&:after": {
-                                backgroundColor: theme.palette.smoke.dark,
-                                borderRadius: "12px 12px 0 0",
-                                bottom: -3,
-                                content: '""',
-                                height: 3,
-                                left: 0,
-                                position: "absolute",
-                                width: "100%",
-                            },
+                        "&:after": {
+                            backgroundColor: PALETTE.SMOKE_DARK,
+                            borderRadius: "12px 12px 0 0",
+                            bottom: -3,
+                            content: '""',
+                            height: 3,
+                            left: 0,
+                            position: "absolute",
+                            width: "100%",
                         },
+                    },
+                    // eslint-disable-next-line sort-keys -- disabling key order for readability
+                    "&.Mui-selected": {
                         // eslint-disable-next-line sort-keys -- disabling key order for readability
-                        "&.Mui-selected": {
+                        "&:hover": {
+                            overflow: "unset",
                             // eslint-disable-next-line sort-keys -- disabling key order for readability
-                            "&:hover": {
-                                overflow: "unset",
-                                // eslint-disable-next-line sort-keys -- disabling key order for readability
-                                "&:after": {
-                                    content: "none",
-                                },
+                            "&:after": {
+                                content: "none",
                             },
                         },
                     },
                 },
             },
-            indicator: {
-                borderTopLeftRadius: 12,
-                borderTopRightRadius: 12,
-                height: 3,
-            },
-            root: {
-                boxShadow: `inset 0 -1px 0 0 ${theme.palette.smoke.main}`,
-                minHeight: "unset",
-                position: "relative", // Positions scroll fuzz.
-            },
-            scroller: {
-                margin: 0,
-                padding: "0 8px",
-                // eslint-disable-next-line sort-keys -- disabling key order for readability
-                [tabletUp]: {
-                    padding: 0,
-                },
-            },
         },
-    };
+        indicator: {
+            borderTopLeftRadius: 12,
+            borderTopRightRadius: 12,
+            height: 3,
+        },
+        root: {
+            boxShadow: `inset 0 -1px 0 0 ${PALETTE.SMOKE_MAIN}`,
+            minHeight: "unset",
+            position: "relative", // Positions scroll fuzz.
+        },
+        scroller: ({ theme }) => ({
+            margin: 0,
+            padding: "0 8px",
+            // eslint-disable-next-line sort-keys -- disabling key order for readability
+            [bpUpSm({ theme })]: {
+                padding: 0,
+            },
+        }),
+    },
 };
-/**
- * MuiToggleButton Component
- * @param theme - Theme.
- * @returns MuiToggleButton component theme styles.
- */
-export const MuiToggleButton = (theme) => {
-    return {
-        styleOverrides: {
-            root: {
-                ...theme.typography[TEXT_BODY_500],
-                backgroundColor: theme.palette.smoke.main,
-                border: "none",
-                borderRadius: 4,
-                color: theme.palette.ink.main,
-                flex: 1,
+const MuiToggleButton = {
+    styleOverrides: {
+        root: {
+            backgroundColor: PALETTE.SMOKE_MAIN,
+            border: "none",
+            borderRadius: 4,
+            color: PALETTE.INK_MAIN,
+            flex: 1,
+            font: FONT.BODY_500,
+            // eslint-disable-next-line sort-keys -- disabling key order for readability
+            "&:hover": {
+                backgroundColor: PALETTE.SMOKE_LIGHTEST,
+            },
+            // eslint-disable-next-line sort-keys -- disabling key order for readability
+            "&.Mui-selected": {
+                backgroundColor: PALETTE.COMMON_WHITE,
                 // eslint-disable-next-line sort-keys -- disabling key order for readability
                 "&:hover": {
-                    backgroundColor: theme.palette.smoke.lightest,
-                },
-                // eslint-disable-next-line sort-keys -- disabling key order for readability
-                "&.Mui-selected": {
                     backgroundColor: PALETTE.COMMON_WHITE,
-                    // eslint-disable-next-line sort-keys -- disabling key order for readability
-                    "&:hover": {
-                        backgroundColor: PALETTE.COMMON_WHITE,
-                    },
                 },
-                variants: [
-                    {
-                        props: { size: TOGGLE_BUTTON_PROPS.SIZE.MEDIUM },
-                        style: { padding: "8px 16px" },
-                    },
-                ],
             },
+            variants: [
+                {
+                    props: { size: TOGGLE_BUTTON_PROPS.SIZE.MEDIUM },
+                    style: { padding: "8px 16px" },
+                },
+            ],
         },
-    };
-};
-/**
- * MuiToggleButtonGroup Component
- * @param theme - Theme.
- * @returns MuiToggleButtonGroup component theme styles.
- */
-export const MuiToggleButtonGroup = (theme) => {
-    return {
-        styleOverrides: {
-            grouped: {
-                border: "none !important", // Overrides "grouped" css selector specificity.
-                borderRadius: "4px !important", // Overrides "grouped" css selector specificity.
-                margin: "0 !important", // Overrides "grouped" css selector specificity.
-            },
-            root: {
-                backgroundColor: theme.palette.smoke.main,
-                borderRadius: 6,
-                color: theme.palette.ink.main,
-                display: "grid",
-                gridAutoColumns: "1fr",
-                gridAutoFlow: "column",
-                padding: 2,
-            },
-        },
-    };
+    },
 };
-/**
- * MuiToolbar Component
- */
-export const MuiToolbar = {
+const MuiToggleButtonGroup = {
     styleOverrides: {
+        grouped: {
+            border: "none !important", // Overrides "grouped" css selector specificity.
+            borderRadius: "4px !important", // Overrides "grouped" css selector specificity.
+            margin: "0 !important", // Overrides "grouped" css selector specificity.
+        },
         root: {
-            [mobileUp]: {
+            backgroundColor: PALETTE.SMOKE_MAIN,
+            borderRadius: 6,
+            color: PALETTE.INK_MAIN,
+            display: "grid",
+            gridAutoColumns: "1fr",
+            gridAutoFlow: "column",
+            padding: 2,
+        },
+    },
+};
+const MuiToolbar = {
+    styleOverrides: {
+        root: ({ theme }) => ({
+            [bpUpXs({ theme })]: {
                 paddingLeft: 12,
                 paddingRight: 12,
             },
             // eslint-disable-next-line sort-keys -- disabling key order for readability
-            [desktopUp]: {
+            [bpUpLg({ theme })]: {
                 paddingLeft: 16,
                 paddingRight: 16,
             },
-        },
+        }),
     },
 };
-/**
- * MuiTooltip Component
- * @param theme - Theme.
- * @returns MuiTooltip component theme styles.
- */
-export const MuiTooltip = (theme) => {
-    return {
-        defaultProps: {
-            enterTouchDelay: 0,
-            leaveTouchDelay: 4000,
-            placement: "top",
-        },
-        styleOverrides: {
-            arrow: {
-                color: theme.palette.ink.main,
-                // eslint-disable-next-line sort-keys -- disabling key order for readability
-                "&:before": {
-                    borderRadius: 1,
-                },
-            },
-            tooltip: {
-                ...theme.typography[TEXT_BODY_SMALL_400],
-                backgroundColor: theme.palette.ink.main,
-                boxShadow: SHADOWS["02"],
-                boxSizing: "content-box",
-                padding: "8px 12px",
+const MuiTooltip = {
+    defaultProps: {
+        enterTouchDelay: 0,
+        leaveTouchDelay: 4000,
+        placement: "top",
+    },
+    styleOverrides: {
+        arrow: {
+            color: PALETTE.INK_MAIN,
+            // eslint-disable-next-line sort-keys -- disabling key order for readability
+            "&:before": {
+                borderRadius: 1,
             },
         },
-    };
+        tooltip: {
+            backgroundColor: PALETTE.INK_MAIN,
+            boxShadow: SHADOWS["02"],
+            boxSizing: "content-box",
+            font: FONT.BODY_SMALL_400,
+            padding: "8px 12px",
+        },
+    },
 };
-/**
- * MuiTypography Component
- */
-export const MuiTypography = {
+const MuiTypography = {
     defaultProps: {
         variant: "inherit",
     },
@@ -1565,5 +1331,61 @@ export const MuiTypography = {
         gutterBottom: {
             marginBottom: 8,
         },
+        root: {
+            variants: [
+                {
+                    props: { variant: TYPOGRAPHY_PROPS.VARIANT.UPPERCASE_500 },
+                    style: { textTransform: "uppercase" },
+                },
+            ],
+        },
     },
 };
+export const components = {
+    MuiAccordion,
+    MuiAccordionDetails,
+    MuiAccordionSummary,
+    MuiAlert: C.MuiAlert,
+    MuiAlertTitle: C.MuiAlertTitle,
+    MuiAppBar,
+    MuiBackdrop,
+    MuiBreadcrumbs,
+    MuiButton,
+    MuiButtonBase,
+    MuiButtonGroup: C.MuiButtonGroup,
+    MuiCard,
+    MuiCheckbox,
+    MuiChip,
+    MuiCircularProgress,
+    MuiCssBaseline,
+    MuiDialog,
+    MuiDialogActions,
+    MuiDialogContent,
+    MuiDialogTitle,
+    MuiDivider,
+    MuiDrawer,
+    MuiFormControlLabel,
+    MuiFormGroup,
+    MuiFormHelperText,
+    MuiIconButton,
+    MuiInputBase,
+    MuiLink,
+    MuiListItemButton,
+    MuiListItemText,
+    MuiListSubheader,
+    MuiMenuItem,
+    MuiOutlinedInput,
+    MuiPaper,
+    MuiRadio,
+    MuiSelect,
+    MuiSvgIcon,
+    MuiTab,
+    MuiTableCell: C.MuiTableCell,
+    MuiTableSortLabel,
+    MuiTabs,
+    MuiToggleButton,
+    MuiToggleButtonGroup,
+    MuiToolbar,
+    MuiTooltip,
+    MuiTypography,
+};