@databiosphere/findable-ui 0.0.0

package/lib/theme/common/components.js

@@ -0,0 +1,1417 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MuiTypography = exports.MuiTooltip = exports.MuiToolbar = exports.MuiToggleButtonGroup = exports.MuiToggleButton = exports.MuiTabs = exports.MuiTableSortLabel = exports.MuiTableCell = exports.MuiTab = exports.MuiSvgIcon = exports.MuiSelect = exports.MuiRadio = exports.MuiPaper = exports.MuiOutlinedInput = exports.MuiMenuItem = exports.MuiListSubheader = exports.MuiListItemText = exports.MuiListItemButton = exports.MuiLink = exports.MuiInputBase = exports.MuiIconButton = exports.MuiFormHelperText = exports.MuiFormGroup = exports.MuiFormControlLabel = exports.MuiDrawer = exports.MuiDivider = exports.MuiDialogTitle = exports.MuiDialogContent = exports.MuiDialogActions = exports.MuiDialog = exports.MuiCssBaseline = exports.MuiChip = exports.MuiCheckbox = exports.MuiCard = exports.MuiButtonGroup = exports.MuiButtonBase = exports.MuiButton = exports.MuiBreadcrumbs = exports.MuiBackdrop = exports.MuiAppBar = exports.MuiAlertTitle = exports.MuiAlert = exports.MuiAccordionSummary = exports.MuiAccordionDetails = exports.MuiAccordion = void 0;
+const errorIcon_1 = require("../../components/common/CustomIcon/components/ErrorIcon/errorIcon");
+const infoIcon_1 = require("../../components/common/CustomIcon/components/InfoIcon/infoIcon");
+const successIcon_1 = require("../../components/common/CustomIcon/components/SuccessIcon/successIcon");
+const warningIcon_1 = require("../../components/common/CustomIcon/components/WarningIcon/warningIcon");
+const dropDownIcon_1 = require("../../components/common/Form/components/Select/components/DropDownIcon/dropDownIcon");
+const breakpoints_1 = require("./breakpoints");
+const palette_1 = require("./palette");
+const shadows_1 = require("./shadows");
+const typography_1 = require("./typography");
+// Constants
+const FLEX_START = "flex-start";
+/**
+ * MuiAccordion Component
+ * @param theme - Theme.
+ * @returns MuiAccordion component theme styles.
+ */
+const MuiAccordion = (theme) => {
+    return {
+        defaultProps: {
+            disableGutters: true,
+            elevation: 0,
+            square: true,
+        },
+        styleOverrides: {
+            root: {
+                backgroundColor: "transparent",
+                boxShadow: `${shadows_1.strokeTop} ${theme.palette.smoke.main}, ${shadows_1.strokeBottom} ${theme.palette.smoke.main}`,
+                // eslint-disable-next-line sort-keys -- disabling key order for readability
+                "&:before": {
+                    display: "none",
+                },
+                "&:nth-of-type(n+2)": {
+                    boxShadow: `${shadows_1.strokeBottom} ${theme.palette.smoke.main}`,
+                },
+            },
+        },
+    };
+};
+exports.MuiAccordion = MuiAccordion;
+/**
+ * MuiAccordionDetails Component
+ */
+exports.MuiAccordionDetails = {
+    styleOverrides: {
+        root: {
+            marginBottom: 16,
+            padding: "0 32px",
+        },
+    },
+};
+/**
+ * MuiAccordionSummary Component
+ */
+exports.MuiAccordionSummary = {
+    styleOverrides: {
+        content: {
+            margin: "16px 0",
+        },
+        root: {
+            flexDirection: "row-reverse",
+            gap: 8,
+            padding: 0,
+        },
+    },
+};
+/**
+ * MuiAlert Component
+ * @param theme - Theme.
+ * @returns MuiAlert component theme styles.
+ */
+const MuiAlert = (theme) => {
+    return {
+        defaultProps: {
+            iconMapping: {
+                error: (0, errorIcon_1.ErrorIcon)({ fontSize: "small" }),
+                info: (0, infoIcon_1.InfoIcon)({ fontSize: "small" }),
+                success: (0, successIcon_1.SuccessIcon)({ fontSize: "small" }),
+                warning: (0, warningIcon_1.WarningIcon)({ fontSize: "small" }),
+            },
+        },
+        styleOverrides: {
+            icon: {
+                opacity: 1,
+                padding: "2px 0",
+            },
+            message: {
+                display: "grid",
+                gap: 4,
+                padding: 0,
+            },
+            root: Object.assign(Object.assign({}, theme.typography[typography_1.TEXT_BODY_400_2_LINES]), { borderRadius: 8, boxShadow: theme.shadows[1], color: theme.palette.ink.main }),
+            standard: {
+                alignItems: FLEX_START,
+                padding: 20,
+            },
+            standardError: {
+                backgroundColor: theme.palette.alert.lightest,
+                border: `1px solid ${theme.palette.alert.main}${palette_1.alpha32}`,
+                // eslint-disable-next-line sort-keys -- disabling key order for readability
+                "& .MuiAlert-icon": {
+                    color: theme.palette.alert.main,
+                },
+            },
+            standardInfo: {
+                backgroundColor: theme.palette.info.lightest,
+                border: `1px solid ${theme.palette.info.main}${palette_1.alpha32}`,
+                // eslint-disable-next-line sort-keys -- disabling key order for readability
+                "& .MuiAlert-icon": {
+                    color: theme.palette.info.main,
+                },
+            },
+            standardSuccess: {
+                backgroundColor: theme.palette.success.lightest,
+                border: `1px solid ${theme.palette.success.main}${palette_1.alpha32}`,
+                // eslint-disable-next-line sort-keys -- disabling key order for readability
+                "& .MuiAlert-icon": {
+                    color: theme.palette.success.main,
+                },
+            },
+            standardWarning: {
+                backgroundColor: theme.palette.warning.lightest,
+                border: `1px solid ${theme.palette.warning.main}${palette_1.alpha32}`,
+                // eslint-disable-next-line sort-keys -- disabling key order for readability
+                "& .MuiAlert-icon": {
+                    color: theme.palette.warning.main,
+                },
+            },
+        },
+        variants: [
+            {
+                props: { severity: "info", variant: "neutral" },
+                style: {
+                    backgroundColor: theme.palette.smoke.light,
+                    padding: 16,
+                },
+            },
+            {
+                props: { variant: "banner" },
+                style: {
+                    padding: 16,
+                    // eslint-disable-next-line sort-keys -- disabling key order for readability
+                    "& .MuiAlert-icon": {
+                        padding: 0,
+                    },
+                    "& .MuiAlertTitle-root": Object.assign({}, theme.typography[typography_1.TEXT_BODY_500]),
+                },
+            },
+            {
+                props: { severity: "error", variant: "banner" },
+                style: {
+                    backgroundColor: theme.palette.alert.lightest,
+                    border: `1px solid ${theme.palette.alert.main}${palette_1.alpha32}`,
+                    // eslint-disable-next-line sort-keys -- disabling key order for readability
+                    "& .MuiAlert-icon": {
+                        color: theme.palette.alert.main,
+                    },
+                },
+            },
+            {
+                props: { severity: "info", variant: "banner" },
+                style: {
+                    backgroundColor: theme.palette.info.lightest,
+                    border: `1px solid ${theme.palette.info.main}${palette_1.alpha32}`,
+                    // eslint-disable-next-line sort-keys -- disabling key order for readability
+                    "& .MuiAlert-icon": {
+                        color: theme.palette.info.main,
+                    },
+                },
+            },
+            {
+                props: { severity: "success", variant: "banner" },
+                style: {
+                    backgroundColor: theme.palette.success.lightest,
+                    border: `1px solid ${theme.palette.success.main}${palette_1.alpha32}`,
+                    // eslint-disable-next-line sort-keys -- disabling key order for readability
+                    "& .MuiAlert-icon": {
+                        color: theme.palette.success.main,
+                    },
+                },
+            },
+            {
+                props: { severity: "warning", variant: "banner" },
+                style: {
+                    backgroundColor: theme.palette.warning.lightest,
+                    border: `1px solid ${theme.palette.warning.main}${palette_1.alpha32}`,
+                    // eslint-disable-next-line sort-keys -- disabling key order for readability
+                    "& .MuiAlert-icon": {
+                        color: theme.palette.warning.main,
+                    },
+                },
+            },
+        ],
+    };
+};
+exports.MuiAlert = MuiAlert;
+/**
+ * MuiAlertTitle Component
+ * @param theme - Theme.
+ * @returns MuiAlertTitle component theme styles.
+ */
+const MuiAlertTitle = (theme) => {
+    return {
+        styleOverrides: {
+            root: Object.assign(Object.assign({}, theme.typography[typography_1.TEXT_BODY_LARGE_500]), { margin: 0 }),
+        },
+    };
+};
+exports.MuiAlertTitle = MuiAlertTitle;
+/**
+ * MuiAppBar Component
+ */
+exports.MuiAppBar = {
+    defaultProps: {
+        color: "default",
+        elevation: 0,
+        position: "static",
+    },
+    styleOverrides: {
+        colorDefault: {
+            backgroundColor: palette_1.white,
+        },
+    },
+};
+/**
+ * MuiBackdrop Component
+ * @param theme - Theme.
+ * @returns MuiBackdrop component theme styles.
+ */
+const MuiBackdrop = (theme) => {
+    return {
+        styleOverrides: {
+            invisible: {
+                backgroundColor: "transparent",
+            },
+            root: {
+                backgroundColor: `${theme.palette.ink.main}${palette_1.alpha80}`,
+            },
+        },
+    };
+};
+exports.MuiBackdrop = MuiBackdrop;
+/**
+ * MuiBreadcrumbs Component
+ * @param theme - Theme.
+ * @returns MuiBreadcrumbs component theme styles.
+ */
+const MuiBreadcrumbs = (theme) => {
+    return {
+        styleOverrides: {
+            li: Object.assign(Object.assign({}, theme.typography[typography_1.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,
+            },
+            separator: {
+                margin: 0,
+            },
+        },
+    };
+};
+exports.MuiBreadcrumbs = MuiBreadcrumbs;
+/**
+ * MuiButton Component
+ * @param theme - Theme.
+ * @returns MuiButton component theme styles.
+ */
+const MuiButton = (theme) => {
+    return {
+        defaultProps: {
+            disableRipple: true,
+            disableTouchRipple: true,
+        },
+        styleOverrides: {
+            containedPrimary: {
+                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
+                "&:hover": {
+                    backgroundColor: theme.palette.primary.dark,
+                    boxShadow: `0 1px 0 0 ${theme.palette.primary.dark}`,
+                },
+                // eslint-disable-next-line sort-keys -- disabling key order for readability
+                "&:active": {
+                    backgroundColor: theme.palette.primary.dark,
+                    boxShadow: "none",
+                },
+                // eslint-disable-next-line sort-keys -- disabling key order for readability
+                "&.Mui-disabled": {
+                    backgroundColor: theme.palette.primary.main,
+                    boxShadow: `0 1px 0 0 ${theme.palette.primary.dark}`,
+                    color: theme.palette.common.white,
+                    opacity: 0.5,
+                },
+            },
+            containedSecondary: {
+                backgroundColor: theme.palette.common.white,
+                boxShadow: `inset 0 0 0 1px ${theme.palette.smoke.dark}, 0 1px 0 0 ${palette_1.black08}`,
+                color: theme.palette.ink.main,
+                // eslint-disable-next-line sort-keys -- disabling key order for readability
+                "&.Mui-focusVisible": {
+                    backgroundColor: theme.palette.common.white,
+                    boxShadow: `inset 0 0 0 1px ${theme.palette.smoke.dark}, 0 1px 0 0 ${palette_1.black08}`,
+                },
+                // eslint-disable-next-line sort-keys -- disabling key order for readability
+                "&:hover": {
+                    backgroundColor: theme.palette.smoke.lightest,
+                    boxShadow: `inset 0 0 0 1px ${theme.palette.smoke.dark}, 0 1px 0 0 ${palette_1.black08}`,
+                },
+                // eslint-disable-next-line sort-keys -- disabling key order for readability
+                "&:active": {
+                    backgroundColor: theme.palette.smoke.lightest,
+                    boxShadow: `inset 0 0 0 1px ${theme.palette.smoke.dark}`,
+                },
+                "&:disabled": {
+                    backgroundColor: theme.palette.common.white,
+                    boxShadow: `inset 0 0 0 1px ${theme.palette.smoke.dark}, 0 1px 0 0 ${palette_1.black08}`,
+                    color: theme.palette.ink.main,
+                    opacity: 0.5,
+                },
+            },
+            endIcon: {
+                margin: 0,
+            },
+            outlinedSecondary: {
+                backgroundColor: "transparent",
+                border: "none",
+                boxShadow: `inset 0 0 0 1px ${theme.palette.ink.main}${palette_1.alpha32}`,
+                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 ${theme.palette.ink.main}${palette_1.alpha64}`,
+                },
+                // eslint-disable-next-line sort-keys -- disabling key order for readability
+                "&:disabled": {
+                    backgroundColor: "transparent",
+                    border: "none",
+                    boxShadow: `inset 0 0 0 1px ${theme.palette.ink.main}${palette_1.alpha32}`,
+                    color: theme.palette.ink.main,
+                    opacity: 0.5,
+                },
+            },
+            root: Object.assign(Object.assign({}, theme.typography[typography_1.TEXT_BODY_500]), { gap: 4, letterSpacing: "normal", padding: "10px 16px", textTransform: "capitalize" }),
+            sizeSmall: {
+                padding: "6px 12px",
+            },
+            startIcon: {
+                marginRight: 0,
+            },
+            text: {
+                alignSelf: "center",
+                minWidth: 0,
+                padding: 0,
+            },
+            textPrimary: {
+                color: theme.palette.primary.main,
+            },
+        },
+        variants: [
+            {
+                props: {
+                    variant: "nav",
+                },
+                style: Object.assign(Object.assign({}, theme.typography[typography_1.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,
+                    } }),
+            },
+        ],
+    };
+};
+exports.MuiButton = MuiButton;
+/**
+ * MuiButtonBase Component
+ * @param theme - Theme.
+ * @returns MuiButtonBase component theme styles.
+ */
+const MuiButtonBase = (theme) => {
+    return {
+        defaultProps: {
+            disableRipple: true,
+            disableTouchRipple: true,
+        },
+        styleOverrides: {
+            root: {
+                flex: "none",
+                fontFamily: theme.typography.fontFamily,
+            },
+        },
+    };
+};
+exports.MuiButtonBase = MuiButtonBase;
+/**
+ * MuiButtonGroup Component
+ * @param theme - Theme.
+ * @returns MuiButtonGroup component theme styles.
+ */
+const MuiButtonGroup = (theme) => {
+    return {
+        defaultProps: {
+            disableElevation: true,
+            disableRipple: true,
+        },
+        styleOverrides: {
+            grouped: {
+                minWidth: 0,
+                padding: "6px 8px",
+            },
+            groupedContainedPrimary: {
+                borderColor: theme.palette.primary.dark,
+                boxShadow: `0 1px 0 0 ${theme.palette.primary.dark}`,
+                // eslint-disable-next-line sort-keys -- disabling key order for readability
+                "&:hover": {
+                    boxShadow: `0 1px 0 0 ${theme.palette.primary.dark}`,
+                },
+                // eslint-disable-next-line sort-keys -- disabling key order for readability
+                "&:active": {
+                    boxShadow: "none",
+                },
+            },
+        },
+    };
+};
+exports.MuiButtonGroup = MuiButtonGroup;
+/**
+ * MuiCard Component
+ */
+exports.MuiCard = {
+    styleOverrides: {
+        root: {
+            borderRadius: 8,
+        },
+    },
+};
+/**
+ * MuiCheckbox Component
+ * @param theme - Theme.
+ * @returns MuiCheckbox component theme styles.
+ */
+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,
+                },
+            },
+        },
+        variants: [
+            {
+                props: {
+                    size: "xsmall",
+                },
+                style: {
+                    fontSize: "18px",
+                },
+            },
+        ],
+    };
+};
+exports.MuiCheckbox = MuiCheckbox;
+/**
+ * MuiChip Component
+ * @param theme - Theme.
+ * @returns MuiChip component theme styles.
+ */
+const MuiChip = (theme) => {
+    return {
+        defaultProps: {
+            size: "small",
+        },
+        styleOverrides: {
+            deleteIcon: {
+                color: "inherit",
+                margin: "0 -2px 0 0",
+            },
+        },
+        variants: [
+            {
+                props: { color: "default" },
+                style: {
+                    backgroundColor: theme.palette.smoke.main,
+                    color: theme.palette.ink.main,
+                },
+            },
+            {
+                props: { color: "error" },
+                style: {
+                    backgroundColor: theme.palette.alert.light,
+                    color: theme.palette.alert.main,
+                },
+            },
+            {
+                props: { color: "info" },
+                style: {
+                    backgroundColor: theme.palette.info.light,
+                    color: theme.palette.info.main,
+                },
+            },
+            {
+                props: { color: "success" },
+                style: {
+                    backgroundColor: theme.palette.success.light,
+                    color: theme.palette.success.main,
+                },
+            },
+            {
+                props: { color: "warning" },
+                style: {
+                    backgroundColor: theme.palette.warning.light,
+                    color: theme.palette.warning.main,
+                },
+            },
+            {
+                props: { variant: "filterTag" },
+                style: Object.assign(Object.assign({}, theme.typography[typography_1.TEXT_BODY_SMALL_500]), { cursor: "pointer", 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: "ntag" },
+                style: Object.assign(Object.assign({}, theme.typography[typography_1.TEXT_BODY_SMALL_400]), { backgroundColor: theme.palette.smoke.main, boxShadow: `0 0 0 2px ${palette_1.white}`, height: 24 }),
+            },
+            {
+                props: { variant: "status" },
+                style: Object.assign(Object.assign({}, theme.typography[typography_1.TEXT_BODY_SMALL_500]), { boxShadow: `0 0 0 2px ${palette_1.white}`, height: 20, maxWidth: "fit-content" }),
+            },
+        ],
+    };
+};
+exports.MuiChip = MuiChip;
+/**
+ * MuiCssBaseline Component
+ * @param theme - Theme.
+ * @returns MuiCssBaseline component theme styles.
+ */
+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: Object.assign(Object.assign({}, theme.typography[typography_1.TEXT_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,
+                },
+            },
+            pre: {
+                margin: 0,
+                whiteSpace: "pre-wrap",
+                wordBreak: "break-word",
+            },
+            strong: {
+                fontWeight: 500,
+            },
+        },
+    };
+};
+exports.MuiCssBaseline = MuiCssBaseline;
+/**
+ * MuiDialog Component
+ * @param theme - Theme.
+ * @returns MuiDialog component theme styles.
+ */
+const MuiDialog = (theme) => {
+    return {
+        styleOverrides: {
+            paper: {
+                boxShadow: theme.shadows[2], // elevation02
+            },
+            root: {
+                // eslint-disable-next-line sort-keys -- disabling key order for readability
+                "& .MuiBackdrop-root": {
+                    backgroundColor: `${theme.palette.ink.main}${palette_1.alpha60}`,
+                },
+            },
+        },
+    };
+};
+exports.MuiDialog = MuiDialog;
+/**
+ * MuiDialogActions Component
+ */
+exports.MuiDialogActions = {
+    styleOverrides: {
+        root: {
+            padding: 20,
+        },
+    },
+};
+/**
+ * MuiDialogContent Component
+ * @param theme - Theme.
+ * @returns MuiDialogContent component theme styles.
+ */
+const MuiDialogContent = (theme) => {
+    return {
+        styleOverrides: {
+            root: {
+                borderColor: theme.palette.smoke.main,
+                padding: 20,
+            },
+        },
+    };
+};
+exports.MuiDialogContent = MuiDialogContent;
+/**
+ * MuiDialogTitle Component
+ * @param theme - Theme.
+ * @returns MuiDialogTitle component theme styles.
+ */
+const MuiDialogTitle = (theme) => {
+    return {
+        styleOverrides: {
+            root: Object.assign(Object.assign({}, theme.typography[typography_1.TEXT_HEADING]), { alignItems: "center", display: "grid", gridAutoFlow: "column", padding: 20, [breakpoints_1.tabletUp]: {}, 
+                // eslint-disable-next-line sort-keys -- disabling key order for readability
+                "& .MuiIconButton-edgeEnd": {
+                    alignSelf: FLEX_START,
+                    justifySelf: "flex-end",
+                } }),
+        },
+    };
+};
+exports.MuiDialogTitle = MuiDialogTitle;
+/**
+ * MuiDivider Component
+ * @param theme - Theme.
+ * @returns MuiDivider component theme styles.
+ */
+const MuiDivider = (theme) => {
+    return {
+        styleOverrides: {
+            root: {
+                borderColor: theme.palette.smoke.main,
+            },
+        },
+    };
+};
+exports.MuiDivider = MuiDivider;
+/**
+ * MuiDrawer Component
+ */
+exports.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.
+ */
+const MuiFormControlLabel = (theme) => {
+    return {
+        styleOverrides: {
+            label: Object.assign({}, theme.typography[typography_1.TEXT_BODY_400]),
+            root: {
+                gap: 8,
+                margin: 0,
+            },
+        },
+    };
+};
+exports.MuiFormControlLabel = MuiFormControlLabel;
+/**
+ * MuiFormGroup Component
+ */
+exports.MuiFormGroup = {
+    styleOverrides: {
+        root: {
+            alignItems: FLEX_START,
+            gap: 12,
+        },
+    },
+};
+/**
+ * MuiFormHelperText Component
+ * @param theme - Theme.
+ * @returns MuiFormHelperText component theme styles.
+ */
+const MuiFormHelperText = (theme) => {
+    return {
+        styleOverrides: {
+            root: Object.assign(Object.assign({}, theme.typography[typography_1.TEXT_BODY_SMALL_400]), { 
+                // eslint-disable-next-line sort-keys -- disabling key order for readability
+                "&.Mui-error": {
+                    color: theme.palette.alert.main,
+                } }),
+        },
+    };
+};
+exports.MuiFormHelperText = MuiFormHelperText;
+/**
+ * MuiIconButton Component
+ * @param theme - Theme.
+ * @returns MuiIconButton component theme styles.
+ */
+const MuiIconButton = (theme) => {
+    return {
+        defaultProps: {
+            disableRipple: true,
+        },
+        styleOverrides: {
+            root: {
+                borderRadius: 4,
+            },
+            sizeLarge: {
+                padding: 10,
+            },
+            sizeSmall: {
+                padding: 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: {
+                    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,
+                    },
+                },
+            },
+            {
+                props: {
+                    edge: "end",
+                    size: "small",
+                },
+                style: {
+                    marginRight: -6,
+                },
+            },
+            {
+                props: {
+                    size: "xlarge",
+                },
+                style: {
+                    padding: 14,
+                },
+            },
+            {
+                props: {
+                    size: "xsmall",
+                },
+                style: {
+                    padding: 4,
+                },
+            },
+            {
+                props: {
+                    edge: "end",
+                    size: "xsmall",
+                },
+                style: {
+                    marginRight: -4,
+                },
+            },
+            {
+                props: {
+                    size: "xxsmall",
+                },
+                style: {
+                    padding: 0,
+                },
+            },
+        ],
+    };
+};
+exports.MuiIconButton = MuiIconButton;
+/**
+ * MuiInputBase Component
+ * @param theme - Theme.
+ * @returns MuiInputBase component theme styles.
+ */
+const MuiInputBase = (theme) => {
+    return {
+        styleOverrides: {
+            adornedStart: {
+                gap: 8,
+            },
+            multiline: {
+                height: "unset",
+            },
+            root: Object.assign(Object.assign({}, theme.typography[typography_1.TEXT_BODY_400]), { fontSize: 16, height: 40, letterSpacing: "normal", 
+                // eslint-disable-next-line sort-keys -- disabling key order for readability
+                [breakpoints_1.tabletUp]: {
+                    fontSize: theme.typography[typography_1.TEXT_BODY_400].fontSize,
+                } }),
+        },
+    };
+};
+exports.MuiInputBase = MuiInputBase;
+/**
+ * MuiLink Component
+ */
+exports.MuiLink = {
+    defaultProps: {
+        underline: "hover",
+    },
+};
+/**
+ * MuiListItemButton Component
+ * @param theme - Theme.
+ * @returns MuiListItemButton component theme styles.
+ */
+const MuiListItemButton = (theme) => {
+    return {
+        styleOverrides: {
+            root: Object.assign(Object.assign({}, theme.typography[typography_1.TEXT_BODY_400]), { minHeight: "unset", padding: "10px 16px", 
+                // 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,
+                    },
+                } }),
+        },
+    };
+};
+exports.MuiListItemButton = MuiListItemButton;
+/**
+ * MuiListItemText Component
+ */
+exports.MuiListItemText = {
+    styleOverrides: {
+        root: {
+            margin: 0,
+        },
+    },
+};
+/**
+ * MuiListSubheader Component
+ * @param theme - Theme.
+ * @returns MuiListSubheader component theme styles.
+ */
+const MuiListSubheader = (theme) => {
+    return {
+        defaultProps: { disableSticky: true },
+        styleOverrides: {
+            root: Object.assign(Object.assign({}, theme.typography[typography_1.TEXT_BODY_500]), { color: theme.palette.ink.main }),
+        },
+    };
+};
+exports.MuiListSubheader = MuiListSubheader;
+/**
+ * MuiMenuItem Component
+ * @param theme - Theme.
+ * @returns MuiMenuItem component theme styles.
+ */
+const MuiMenuItem = (theme) => {
+    return {
+        defaultProps: { disableRipple: true },
+        styleOverrides: {
+            root: Object.assign(Object.assign({}, theme.typography[typography_1.TEXT_BODY_400]), { minHeight: "unset", padding: "10px 16px" }),
+        },
+    };
+};
+exports.MuiMenuItem = MuiMenuItem;
+/**
+ * MuiOutlinedInput Component
+ * @param theme - Theme.
+ * @returns MuiOutlinedInput component theme styles.
+ */
+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,
+                },
+            },
+            notchedOutline: {
+                borderColor: theme.palette.smoke.dark,
+            },
+            root: {
+                backgroundColor: palette_1.white,
+                boxShadow: `inset 0 2px 0 0 ${palette_1.black04}`,
+                paddingLeft: 12,
+                // eslint-disable-next-line sort-keys -- disabling key order for readability
+                "& .MuiSvgIcon-root": {
+                    color: theme.palette.ink.light, // Adornment e.g. "SearchIcon".
+                },
+                "&:hover": {
+                    "& .MuiOutlinedInput-notchedOutline": {
+                        borderColor: theme.palette.smoke.dark,
+                    },
+                },
+                // eslint-disable-next-line sort-keys -- disabling key order for specificity
+                "&.Mui-focused": {
+                    "& .MuiOutlinedInput-notchedOutline": {
+                        borderColor: theme.palette.ink.main,
+                        borderWidth: 1,
+                    },
+                    "& .MuiSvgIcon-root": {
+                        color: theme.palette.ink.main, // Adornment e.g. "SearchIcon".
+                    },
+                },
+                // eslint-disable-next-line sort-keys -- disabling key order for specificity
+                "&.Mui-disabled": {
+                    "& .MuiOutlinedInput-notchedOutline": {
+                        borderColor: theme.palette.smoke.dark,
+                        borderWidth: 1,
+                    },
+                    "& .MuiSvgIcon-root": {
+                        color: theme.palette.ink.light,
+                    },
+                },
+                "&.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,
+                    },
+                },
+            },
+        },
+    };
+};
+exports.MuiOutlinedInput = MuiOutlinedInput;
+/**
+ * MuiPaper Component
+ * @param theme - Theme.
+ * @returns MuiPaper component theme styles.
+ */
+const MuiPaper = (theme) => {
+    return {
+        variants: [
+            {
+                props: { variant: "footer" },
+                style: {
+                    backgroundColor: theme.palette.smoke.light,
+                    boxShadow: `${shadows_1.strokeTop} ${theme.palette.smoke.main}, ${shadows_1.strokeBottom} ${theme.palette.smoke.main}`,
+                },
+            },
+            {
+                props: { variant: "menu" },
+                style: {
+                    borderColor: theme.palette.smoke.dark,
+                    borderRadius: 8,
+                    borderStyle: "solid",
+                    borderWidth: 1,
+                    boxShadow: theme.shadows[2], // elevation02
+                },
+            },
+            {
+                props: { variant: "panel" },
+                style: {
+                    borderColor: theme.palette.smoke.main,
+                    borderStyle: "solid",
+                    borderWidth: 1,
+                    boxShadow: theme.shadows[1], // elevation01
+                },
+            },
+            {
+                props: { variant: "searchbar" },
+                style: {
+                    alignSelf: FLEX_START,
+                    borderColor: theme.palette.smoke.main,
+                    borderRadius: 0,
+                    borderStyle: "solid",
+                    borderWidth: "0 0 1px 0",
+                    boxShadow: theme.shadows[1],
+                    // eslint-disable-next-line sort-keys -- disabling key order for readability
+                    "&.MuiDialog-paper": {
+                        marginLeft: 0,
+                        marginRight: 0,
+                        maxWidth: "100%",
+                        width: "100%",
+                    },
+                },
+            },
+        ],
+    };
+};
+exports.MuiPaper = MuiPaper;
+/**
+ * MuiRadio Component
+ * @param theme - Theme.
+ * @returns MuiRadio component theme styles.
+ */
+const MuiRadio = (theme) => {
+    return {
+        defaultProps: {
+            disableRipple: true,
+        },
+        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,
+                    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",
+                },
+            },
+        },
+    };
+};
+exports.MuiRadio = MuiRadio;
+/**
+ * MuiSelect Component
+ */
+exports.MuiSelect = {
+    defaultProps: {
+        IconComponent: dropDownIcon_1.DropDownIcon,
+    },
+    styleOverrides: {
+        select: {
+            minHeight: "unset",
+            paddingRight: "36px !important", // Overrides MuiSelect css selector specificity.
+        },
+    },
+};
+/**
+ * MuiSvgIcon Component
+ * @param theme - Theme.
+ * @returns MuiSvgIcon component theme styles.
+ */
+const MuiSvgIcon = (theme) => {
+    return {
+        styleOverrides: {
+            fontSizeLarge: {
+                fontSize: "32px",
+            },
+            fontSizeSmall: {
+                fontSize: "20px",
+            },
+            root: {
+                "&.MuiSelect-icon": {
+                    color: theme.palette.ink.main,
+                    right: 8,
+                },
+            },
+        },
+        variants: [
+            {
+                props: {
+                    color: "inkLight",
+                },
+                style: {
+                    color: theme.palette.ink.light,
+                },
+            },
+            {
+                props: {
+                    color: "inkMain",
+                },
+                style: {
+                    color: theme.palette.ink.main,
+                },
+            },
+            {
+                props: {
+                    fontSize: "medium",
+                },
+                style: {
+                    fontSize: "24px",
+                },
+            },
+            {
+                props: {
+                    fontSize: "xsmall",
+                },
+                style: {
+                    fontSize: "18px",
+                },
+            },
+            {
+                props: {
+                    fontSize: "xxlarge",
+                },
+                style: {
+                    fontSize: "40px",
+                },
+            },
+            {
+                props: {
+                    fontSize: "xxsmall",
+                },
+                style: {
+                    fontSize: "16px",
+                },
+            },
+        ],
+    };
+};
+exports.MuiSvgIcon = MuiSvgIcon;
+/**
+ * MuiTab Component
+ * @param theme - Theme.
+ * @returns MuiTab component theme styles.
+ */
+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.
+                },
+            },
+            root: Object.assign(Object.assign({}, theme.typography[typography_1.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,
+                } }),
+        },
+    };
+};
+exports.MuiTab = MuiTab;
+/**
+ * MuiTableCell Component
+ * @param theme - Theme.
+ * @returns MuiTableCell component theme styles.
+ */
+const MuiTableCell = (theme) => {
+    return {
+        styleOverrides: {
+            body: Object.assign({}, theme.typography[typography_1.TEXT_BODY_400]),
+            head: Object.assign(Object.assign({}, theme.typography[typography_1.TEXT_BODY_SMALL_500]), { padding: "20px" }),
+            root: {
+                padding: "18px 20px",
+            },
+            sizeSmall: {
+                padding: "14px 20px",
+            },
+            stickyHeader: {
+                boxShadow: `0 1px 0 ${theme.palette.smoke.main}`,
+            },
+        },
+    };
+};
+exports.MuiTableCell = MuiTableCell;
+/**
+ * MuiTableSortLabel Component
+ */
+exports.MuiTableSortLabel = {
+    styleOverrides: {
+        icon: {
+            fontSize: 20,
+            margin: 0,
+            transition: "none",
+        },
+        root: {
+            flex: 1,
+            // eslint-disable-next-line sort-keys -- disabling key order for readability
+            "&.Mui-active": {
+                color: "inherit",
+                // eslint-disable-next-line sort-keys -- disabling key order for readability
+                "& .MuiTableSortLabel-icon": {
+                    color: "inherit",
+                },
+            },
+            "&:hover": {
+                color: "inherit",
+                opacity: 0.6,
+            },
+        },
+    },
+};
+/**
+ * MuiTabs Component
+ * @param theme - Theme.
+ * @returns MuiTabs component theme styles.
+ */
+const MuiTabs = (theme) => {
+    return {
+        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
+                    ".MuiTab-root": {
+                        // 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%",
+                            },
+                        },
+                        // eslint-disable-next-line sort-keys -- disabling key order for readability
+                        "&.Mui-selected": {
+                            // 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",
+                                },
+                            },
+                        },
+                    },
+                },
+            },
+            indicator: {
+                borderTopLeftRadius: 12,
+                borderTopRightRadius: 12,
+                height: 3,
+            },
+            root: {
+                boxShadow: `${shadows_1.strokeBottom} ${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
+                [breakpoints_1.tabletUp]: {
+                    padding: 0,
+                },
+            },
+        },
+    };
+};
+exports.MuiTabs = MuiTabs;
+/**
+ * MuiToggleButton Component
+ * @param theme - Theme.
+ * @returns MuiToggleButton component theme styles.
+ */
+const MuiToggleButton = (theme) => {
+    return {
+        styleOverrides: {
+            root: Object.assign(Object.assign({}, theme.typography[typography_1.TEXT_BODY_500]), { backgroundColor: theme.palette.smoke.main, border: "none", borderRadius: 4, color: theme.palette.ink.main, flex: 1, padding: "8px 12px", 
+                // 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_1.white,
+                    // eslint-disable-next-line sort-keys -- disabling key order for readability
+                    "&:hover": {
+                        backgroundColor: palette_1.white,
+                    },
+                } }),
+        },
+    };
+};
+exports.MuiToggleButton = MuiToggleButton;
+/**
+ * MuiToggleButtonGroup Component
+ * @param theme - Theme.
+ * @returns MuiToggleButtonGroup component theme styles.
+ */
+const MuiToggleButtonGroup = (theme) => {
+    return {
+        styleOverrides: {
+            grouped: {
+                border: "none !important",
+                borderRadius: "4px !important",
+                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,
+            },
+        },
+    };
+};
+exports.MuiToggleButtonGroup = MuiToggleButtonGroup;
+/**
+ * MuiToolbar Component
+ */
+exports.MuiToolbar = {
+    styleOverrides: {
+        root: {
+            [breakpoints_1.mobileUp]: {
+                paddingLeft: 12,
+                paddingRight: 12,
+            },
+            // eslint-disable-next-line sort-keys -- disabling key order for readability
+            [breakpoints_1.desktopUp]: {
+                paddingLeft: 16,
+                paddingRight: 16,
+            },
+        },
+    },
+};
+/**
+ * MuiTooltip Component
+ * @param theme - Theme.
+ * @returns MuiTooltip component theme styles.
+ */
+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: Object.assign(Object.assign({}, theme.typography[typography_1.TEXT_BODY_SMALL_400]), { backgroundColor: theme.palette.ink.main, boxShadow: theme.shadows[2], boxSizing: "content-box", padding: "8px 12px" }),
+        },
+    };
+};
+exports.MuiTooltip = MuiTooltip;
+/**
+ * MuiTypography Component
+ */
+exports.MuiTypography = {
+    defaultProps: {
+        variant: "inherit",
+    },
+    styleOverrides: {
+        gutterBottom: {
+            marginBottom: 8,
+        },
+    },
+};