@databiosphere/findable-ui 5.0.0 → 7.0.0

package/lib/theme/common/components.js

@@ -1,15 +1,12 @@
-"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.MuiCircularProgress = 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");
+import { ErrorIcon } from "../../components/common/CustomIcon/components/ErrorIcon/errorIcon";
+import { InfoIcon } from "../../components/common/CustomIcon/components/InfoIcon/infoIcon";
+import { SuccessIcon } from "../../components/common/CustomIcon/components/SuccessIcon/successIcon";
+import { WarningIcon } from "../../components/common/CustomIcon/components/WarningIcon/warningIcon";
+import { DropDownIcon } from "../../components/common/Form/components/Select/components/DropDownIcon/dropDownIcon";
+import { desktopUp, mobileUp, tabletUp } from "./breakpoints";
+import { alpha32, alpha60, alpha64, alpha80, black04, black08, white, } from "./palette";
+import { strokeBottom, strokeTop } from "./shadows";
+import { TEXT_BODY_400, TEXT_BODY_400_2_LINES, TEXT_BODY_500, TEXT_BODY_LARGE_500, TEXT_BODY_SMALL_400, TEXT_BODY_SMALL_500, TEXT_HEADING, } from "./typography";
 // Constants
 const FLEX_START = "flex-start";
 /**
@@ -17,7 +14,7 @@ const FLEX_START = "flex-start";
  * @param theme - Theme.
  * @returns MuiAccordion component theme styles.
  */
-const MuiAccordion = (theme) => {
+export const MuiAccordion = (theme) => {
     return {
         defaultProps: {
             disableGutters: true,
@@ -27,23 +24,22 @@ const MuiAccordion = (theme) => {
         styleOverrides: {
             root: {
                 backgroundColor: "transparent",
-                boxShadow: `${shadows_1.strokeTop} ${theme.palette.smoke.main}, ${shadows_1.strokeBottom} ${theme.palette.smoke.main}`,
+                boxShadow: `${strokeTop} ${theme.palette.smoke.main}, ${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}`,
+                    boxShadow: `${strokeBottom} ${theme.palette.smoke.main}`,
                 },
             },
         },
     };
 };
-exports.MuiAccordion = MuiAccordion;
 /**
  * MuiAccordionDetails Component
  */
-exports.MuiAccordionDetails = {
+export const MuiAccordionDetails = {
     styleOverrides: {
         root: {
             marginBottom: 16,
@@ -54,7 +50,7 @@ exports.MuiAccordionDetails = {
 /**
  * MuiAccordionSummary Component
  */
-exports.MuiAccordionSummary = {
+export const MuiAccordionSummary = {
     styleOverrides: {
         content: {
             margin: "16px 0",
@@ -71,14 +67,14 @@ exports.MuiAccordionSummary = {
  * @param theme - Theme.
  * @returns MuiAlert component theme styles.
  */
-const MuiAlert = (theme) => {
+export 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" }),
+                error: ErrorIcon({ fontSize: "small" }),
+                info: InfoIcon({ fontSize: "small" }),
+                success: SuccessIcon({ fontSize: "small" }),
+                warning: WarningIcon({ fontSize: "small" }),
             },
         },
         styleOverrides: {
@@ -91,14 +87,19 @@ const MuiAlert = (theme) => {
                 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 }),
+            root: {
+                ...theme.typography[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}`,
+                border: `1px solid ${theme.palette.alert.main}${alpha32}`,
                 // eslint-disable-next-line sort-keys -- disabling key order for readability
                 "& .MuiAlert-icon": {
                     color: theme.palette.alert.main,
@@ -106,7 +107,7 @@ const MuiAlert = (theme) => {
             },
             standardInfo: {
                 backgroundColor: theme.palette.info.lightest,
-                border: `1px solid ${theme.palette.info.main}${palette_1.alpha32}`,
+                border: `1px solid ${theme.palette.info.main}${alpha32}`,
                 // eslint-disable-next-line sort-keys -- disabling key order for readability
                 "& .MuiAlert-icon": {
                     color: theme.palette.info.main,
@@ -114,7 +115,7 @@ const MuiAlert = (theme) => {
             },
             standardSuccess: {
                 backgroundColor: theme.palette.success.lightest,
-                border: `1px solid ${theme.palette.success.main}${palette_1.alpha32}`,
+                border: `1px solid ${theme.palette.success.main}${alpha32}`,
                 // eslint-disable-next-line sort-keys -- disabling key order for readability
                 "& .MuiAlert-icon": {
                     color: theme.palette.success.main,
@@ -122,7 +123,7 @@ const MuiAlert = (theme) => {
             },
             standardWarning: {
                 backgroundColor: theme.palette.warning.lightest,
-                border: `1px solid ${theme.palette.warning.main}${palette_1.alpha32}`,
+                border: `1px solid ${theme.palette.warning.main}${alpha32}`,
                 // eslint-disable-next-line sort-keys -- disabling key order for readability
                 "& .MuiAlert-icon": {
                     color: theme.palette.warning.main,
@@ -145,14 +146,16 @@ const MuiAlert = (theme) => {
                     "& .MuiAlert-icon": {
                         padding: 0,
                     },
-                    "& .MuiAlertTitle-root": Object.assign({}, theme.typography[typography_1.TEXT_BODY_500]),
+                    "& .MuiAlertTitle-root": {
+                        ...theme.typography[TEXT_BODY_500],
+                    },
                 },
             },
             {
                 props: { severity: "error", variant: "banner" },
                 style: {
                     backgroundColor: theme.palette.alert.lightest,
-                    border: `1px solid ${theme.palette.alert.main}${palette_1.alpha32}`,
+                    border: `1px solid ${theme.palette.alert.main}${alpha32}`,
                     // eslint-disable-next-line sort-keys -- disabling key order for readability
                     "& .MuiAlert-icon": {
                         color: theme.palette.alert.main,
@@ -163,7 +166,7 @@ const MuiAlert = (theme) => {
                 props: { severity: "info", variant: "banner" },
                 style: {
                     backgroundColor: theme.palette.info.lightest,
-                    border: `1px solid ${theme.palette.info.main}${palette_1.alpha32}`,
+                    border: `1px solid ${theme.palette.info.main}${alpha32}`,
                     // eslint-disable-next-line sort-keys -- disabling key order for readability
                     "& .MuiAlert-icon": {
                         color: theme.palette.info.main,
@@ -174,7 +177,7 @@ const MuiAlert = (theme) => {
                 props: { severity: "success", variant: "banner" },
                 style: {
                     backgroundColor: theme.palette.success.lightest,
-                    border: `1px solid ${theme.palette.success.main}${palette_1.alpha32}`,
+                    border: `1px solid ${theme.palette.success.main}${alpha32}`,
                     // eslint-disable-next-line sort-keys -- disabling key order for readability
                     "& .MuiAlert-icon": {
                         color: theme.palette.success.main,
@@ -185,7 +188,7 @@ const MuiAlert = (theme) => {
                 props: { severity: "warning", variant: "banner" },
                 style: {
                     backgroundColor: theme.palette.warning.lightest,
-                    border: `1px solid ${theme.palette.warning.main}${palette_1.alpha32}`,
+                    border: `1px solid ${theme.palette.warning.main}${alpha32}`,
                     // eslint-disable-next-line sort-keys -- disabling key order for readability
                     "& .MuiAlert-icon": {
                         color: theme.palette.warning.main,
@@ -195,24 +198,25 @@ const MuiAlert = (theme) => {
         ],
     };
 };
-exports.MuiAlert = MuiAlert;
 /**
  * MuiAlertTitle Component
  * @param theme - Theme.
  * @returns MuiAlertTitle component theme styles.
  */
-const MuiAlertTitle = (theme) => {
+export const MuiAlertTitle = (theme) => {
     return {
         styleOverrides: {
-            root: Object.assign(Object.assign({}, theme.typography[typography_1.TEXT_BODY_LARGE_500]), { margin: 0 }),
+            root: {
+                ...theme.typography[TEXT_BODY_LARGE_500],
+                margin: 0,
+            },
         },
     };
 };
-exports.MuiAlertTitle = MuiAlertTitle;
 /**
  * MuiAppBar Component
  */
-exports.MuiAppBar = {
+export const MuiAppBar = {
     defaultProps: {
         color: "default",
         elevation: 0,
@@ -220,7 +224,7 @@ exports.MuiAppBar = {
     },
     styleOverrides: {
         colorDefault: {
-            backgroundColor: palette_1.white,
+            backgroundColor: white,
         },
     },
 };
@@ -229,35 +233,38 @@ exports.MuiAppBar = {
  * @param theme - Theme.
  * @returns MuiBackdrop component theme styles.
  */
-const MuiBackdrop = (theme) => {
+export const MuiBackdrop = (theme) => {
     return {
         styleOverrides: {
             invisible: {
                 backgroundColor: "transparent",
             },
             root: {
-                backgroundColor: `${theme.palette.ink.main}${palette_1.alpha80}`,
+                backgroundColor: `${theme.palette.ink.main}${alpha80}`,
             },
         },
     };
 };
-exports.MuiBackdrop = MuiBackdrop;
 /**
  * MuiBreadcrumbs Component
  * @param theme - Theme.
  * @returns MuiBreadcrumbs component theme styles.
  */
-const MuiBreadcrumbs = (theme) => {
+export const MuiBreadcrumbs = (theme) => {
     return {
         styleOverrides: {
-            li: Object.assign(Object.assign({}, theme.typography[typography_1.TEXT_BODY_SMALL_400]), { margin: 0, 
+            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": {
+                },
+                "& .MuiTypography-root": {
                     color: "inherit",
                     font: "inherit",
-                } }),
+                },
+            },
             ol: {
                 gap: 2,
             },
@@ -270,13 +277,12 @@ const MuiBreadcrumbs = (theme) => {
         },
     };
 };
-exports.MuiBreadcrumbs = MuiBreadcrumbs;
 /**
  * MuiButton Component
  * @param theme - Theme.
  * @returns MuiButton component theme styles.
  */
-const MuiButton = (theme) => {
+export const MuiButton = (theme) => {
     return {
         defaultProps: {
             disableRipple: true,
@@ -307,17 +313,17 @@ const MuiButton = (theme) => {
             },
             containedSecondary: {
                 backgroundColor: theme.palette.common.white,
-                boxShadow: `inset 0 0 0 1px ${theme.palette.smoke.dark}, 0 1px 0 0 ${palette_1.black08}`,
+                boxShadow: `inset 0 0 0 1px ${theme.palette.smoke.dark}, 0 1px 0 0 ${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}`,
+                    boxShadow: `inset 0 0 0 1px ${theme.palette.smoke.dark}, 0 1px 0 0 ${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}`,
+                    boxShadow: `inset 0 0 0 1px ${theme.palette.smoke.dark}, 0 1px 0 0 ${black08}`,
                 },
                 // eslint-disable-next-line sort-keys -- disabling key order for readability
                 "&:active": {
@@ -326,7 +332,7 @@ const MuiButton = (theme) => {
                 },
                 "&:disabled": {
                     backgroundColor: theme.palette.common.white,
-                    boxShadow: `inset 0 0 0 1px ${theme.palette.smoke.dark}, 0 1px 0 0 ${palette_1.black08}`,
+                    boxShadow: `inset 0 0 0 1px ${theme.palette.smoke.dark}, 0 1px 0 0 ${black08}`,
                     color: theme.palette.ink.main,
                     opacity: 0.5,
                 },
@@ -337,24 +343,30 @@ const MuiButton = (theme) => {
             outlinedSecondary: {
                 backgroundColor: "transparent",
                 border: "none",
-                boxShadow: `inset 0 0 0 1px ${theme.palette.ink.main}${palette_1.alpha32}`,
+                boxShadow: `inset 0 0 0 1px ${theme.palette.ink.main}${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}`,
+                    boxShadow: `inset 0 0 0 1px ${theme.palette.ink.main}${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}`,
+                    boxShadow: `inset 0 0 0 1px ${theme.palette.ink.main}${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" }),
+            root: {
+                ...theme.typography[TEXT_BODY_500],
+                gap: 4,
+                letterSpacing: "normal",
+                padding: "10px 16px",
+                textTransform: "capitalize",
+            },
             sizeSmall: {
                 padding: "6px 12px",
             },
@@ -375,22 +387,27 @@ const MuiButton = (theme) => {
                 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", 
+                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,
-                    } }),
+                    },
+                },
             },
         ],
     };
 };
-exports.MuiButton = MuiButton;
 /**
  * MuiButtonBase Component
  * @param theme - Theme.
  * @returns MuiButtonBase component theme styles.
  */
-const MuiButtonBase = (theme) => {
+export const MuiButtonBase = (theme) => {
     return {
         defaultProps: {
             disableRipple: true,
@@ -404,13 +421,12 @@ const MuiButtonBase = (theme) => {
         },
     };
 };
-exports.MuiButtonBase = MuiButtonBase;
 /**
  * MuiButtonGroup Component
  * @param theme - Theme.
  * @returns MuiButtonGroup component theme styles.
  */
-const MuiButtonGroup = (theme) => {
+export const MuiButtonGroup = (theme) => {
     return {
         defaultProps: {
             disableElevation: true,
@@ -436,11 +452,10 @@ const MuiButtonGroup = (theme) => {
         },
     };
 };
-exports.MuiButtonGroup = MuiButtonGroup;
 /**
  * MuiCard Component
  */
-exports.MuiCard = {
+export const MuiCard = {
     styleOverrides: {
         root: {
             borderRadius: 8,
@@ -452,7 +467,7 @@ exports.MuiCard = {
  * @param theme - Theme.
  * @returns MuiCheckbox component theme styles.
  */
-const MuiCheckbox = (theme) => {
+export const MuiCheckbox = (theme) => {
     return {
         defaultProps: {
             size: "xsmall",
@@ -479,13 +494,12 @@ const MuiCheckbox = (theme) => {
         ],
     };
 };
-exports.MuiCheckbox = MuiCheckbox;
 /**
  * MuiChip Component
  * @param theme - Theme.
  * @returns MuiChip component theme styles.
  */
-const MuiChip = (theme) => {
+export const MuiChip = (theme) => {
     return {
         defaultProps: {
             size: "small",
@@ -534,30 +548,49 @@ const MuiChip = (theme) => {
             },
             {
                 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", 
+                style: {
+                    ...theme.typography[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 }),
+                style: {
+                    ...theme.typography[TEXT_BODY_SMALL_400],
+                    backgroundColor: theme.palette.smoke.main,
+                    boxShadow: `0 0 0 2px ${white}`,
+                    height: 24,
+                    justifySelf: FLEX_START,
+                    minWidth: 0,
+                },
             },
             {
                 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" }),
+                style: {
+                    ...theme.typography[TEXT_BODY_SMALL_500],
+                    boxShadow: `0 0 0 2px ${white}`,
+                    height: 20,
+                    maxWidth: "fit-content",
+                    minWidth: 0,
+                },
             },
         ],
     };
 };
-exports.MuiChip = MuiChip;
 /**
  * MuiCircularProgress Component
  * @param theme - Theme.
  * @returns MuiCircularProgress component theme styles.
  */
-const MuiCircularProgress = (theme) => {
+export const MuiCircularProgress = (theme) => {
     return {
         styleOverrides: {
             circle: {
@@ -576,13 +609,12 @@ const MuiCircularProgress = (theme) => {
         ],
     };
 };
-exports.MuiCircularProgress = MuiCircularProgress;
 /**
  * MuiCssBaseline Component
  * @param theme - Theme.
  * @returns MuiCssBaseline component theme styles.
  */
-const MuiCssBaseline = (theme) => {
+export const MuiCssBaseline = (theme) => {
     return {
         styleOverrides: {
             a: {
@@ -596,7 +628,11 @@ const MuiCssBaseline = (theme) => {
             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 }),
+            code: {
+                ...theme.typography[TEXT_BODY_400_2_LINES],
+                fontFamily: "Roboto Mono, monospace",
+                fontSize: 12,
+            },
             img: {
                 display: "block",
             },
@@ -618,13 +654,12 @@ const MuiCssBaseline = (theme) => {
         },
     };
 };
-exports.MuiCssBaseline = MuiCssBaseline;
 /**
  * MuiDialog Component
  * @param theme - Theme.
  * @returns MuiDialog component theme styles.
  */
-const MuiDialog = (theme) => {
+export const MuiDialog = (theme) => {
     return {
         styleOverrides: {
             paper: {
@@ -633,17 +668,16 @@ const MuiDialog = (theme) => {
             root: {
                 // eslint-disable-next-line sort-keys -- disabling key order for readability
                 "& .MuiBackdrop-root": {
-                    backgroundColor: `${theme.palette.ink.main}${palette_1.alpha60}`,
+                    backgroundColor: `${theme.palette.ink.main}${alpha60}`,
                 },
             },
         },
     };
 };
-exports.MuiDialog = MuiDialog;
 /**
  * MuiDialogActions Component
  */
-exports.MuiDialogActions = {
+export const MuiDialogActions = {
     styleOverrides: {
         root: {
             padding: 20,
@@ -655,7 +689,7 @@ exports.MuiDialogActions = {
  * @param theme - Theme.
  * @returns MuiDialogContent component theme styles.
  */
-const MuiDialogContent = (theme) => {
+export const MuiDialogContent = (theme) => {
     return {
         styleOverrides: {
             root: {
@@ -665,31 +699,36 @@ const MuiDialogContent = (theme) => {
         },
     };
 };
-exports.MuiDialogContent = MuiDialogContent;
 /**
  * MuiDialogTitle Component
  * @param theme - Theme.
  * @returns MuiDialogTitle component theme styles.
  */
-const MuiDialogTitle = (theme) => {
+export 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]: {}, 
+            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",
-                } }),
+                },
+            },
         },
     };
 };
-exports.MuiDialogTitle = MuiDialogTitle;
 /**
  * MuiDivider Component
  * @param theme - Theme.
  * @returns MuiDivider component theme styles.
  */
-const MuiDivider = (theme) => {
+export const MuiDivider = (theme) => {
     return {
         styleOverrides: {
             root: {
@@ -698,11 +737,10 @@ const MuiDivider = (theme) => {
         },
     };
 };
-exports.MuiDivider = MuiDivider;
 /**
  * MuiDrawer Component
  */
-exports.MuiDrawer = {
+export const MuiDrawer = {
     styleOverrides: {
         paper: {
             overflowY: "visible", // required; allows backdrop button to render outside of drawer container
@@ -714,10 +752,12 @@ exports.MuiDrawer = {
  * @param theme - Theme.
  * @returns MuiFormControlLabel component theme styles.
  */
-const MuiFormControlLabel = (theme) => {
+export const MuiFormControlLabel = (theme) => {
     return {
         styleOverrides: {
-            label: Object.assign({}, theme.typography[typography_1.TEXT_BODY_400]),
+            label: {
+                ...theme.typography[TEXT_BODY_400],
+            },
             root: {
                 gap: 8,
                 margin: 0,
@@ -725,11 +765,10 @@ const MuiFormControlLabel = (theme) => {
         },
     };
 };
-exports.MuiFormControlLabel = MuiFormControlLabel;
 /**
  * MuiFormGroup Component
  */
-exports.MuiFormGroup = {
+export const MuiFormGroup = {
     styleOverrides: {
         root: {
             alignItems: FLEX_START,
@@ -742,24 +781,25 @@ exports.MuiFormGroup = {
  * @param theme - Theme.
  * @returns MuiFormHelperText component theme styles.
  */
-const MuiFormHelperText = (theme) => {
+export const MuiFormHelperText = (theme) => {
     return {
         styleOverrides: {
-            root: Object.assign(Object.assign({}, theme.typography[typography_1.TEXT_BODY_SMALL_400]), { 
+            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,
-                } }),
+                },
+            },
         },
     };
 };
-exports.MuiFormHelperText = MuiFormHelperText;
 /**
  * MuiIconButton Component
  * @param theme - Theme.
  * @returns MuiIconButton component theme styles.
  */
-const MuiIconButton = (theme) => {
+export const MuiIconButton = (theme) => {
     return {
         defaultProps: {
             disableRipple: true,
@@ -845,13 +885,12 @@ const MuiIconButton = (theme) => {
         ],
     };
 };
-exports.MuiIconButton = MuiIconButton;
 /**
  * MuiInputBase Component
  * @param theme - Theme.
  * @returns MuiInputBase component theme styles.
  */
-const MuiInputBase = (theme) => {
+export const MuiInputBase = (theme) => {
     return {
         styleOverrides: {
             adornedStart: {
@@ -860,19 +899,23 @@ const MuiInputBase = (theme) => {
             multiline: {
                 height: "unset",
             },
-            root: Object.assign(Object.assign({}, theme.typography[typography_1.TEXT_BODY_400]), { fontSize: 16, height: 40, letterSpacing: "normal", 
+            root: {
+                ...theme.typography[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,
-                } }),
+                [tabletUp]: {
+                    fontSize: theme.typography[TEXT_BODY_400].fontSize,
+                },
+            },
         },
     };
 };
-exports.MuiInputBase = MuiInputBase;
 /**
  * MuiLink Component
  */
-exports.MuiLink = {
+export const MuiLink = {
     defaultProps: {
         underline: "hover",
     },
@@ -887,14 +930,17 @@ exports.MuiLink = {
  * @param theme - Theme.
  * @returns MuiListItemButton component theme styles.
  */
-const MuiListItemButton = (theme) => {
+export const MuiListItemButton = (theme) => {
     return {
         styleOverrides: {
-            root: Object.assign(Object.assign({}, theme.typography[typography_1.TEXT_BODY_400]), { minHeight: "unset", padding: "10px 16px", 
+            root: {
+                ...theme.typography[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",
@@ -902,15 +948,15 @@ const MuiListItemButton = (theme) => {
                     "&:hover": {
                         backgroundColor: theme.palette.smoke.light,
                     },
-                } }),
+                },
+            },
         },
     };
 };
-exports.MuiListItemButton = MuiListItemButton;
 /**
  * MuiListItemText Component
  */
-exports.MuiListItemText = {
+export const MuiListItemText = {
     styleOverrides: {
         root: {
             margin: 0,
@@ -922,35 +968,40 @@ exports.MuiListItemText = {
  * @param theme - Theme.
  * @returns MuiListSubheader component theme styles.
  */
-const MuiListSubheader = (theme) => {
+export 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 }),
+            root: {
+                ...theme.typography[TEXT_BODY_500],
+                color: theme.palette.ink.main,
+            },
         },
     };
 };
-exports.MuiListSubheader = MuiListSubheader;
 /**
  * MuiMenuItem Component
  * @param theme - Theme.
  * @returns MuiMenuItem component theme styles.
  */
-const MuiMenuItem = (theme) => {
+export 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" }),
+            root: {
+                ...theme.typography[TEXT_BODY_400],
+                minHeight: "unset",
+                padding: "10px 16px",
+            },
         },
     };
 };
-exports.MuiMenuItem = MuiMenuItem;
 /**
  * MuiOutlinedInput Component
  * @param theme - Theme.
  * @returns MuiOutlinedInput component theme styles.
  */
-const MuiOutlinedInput = (theme) => {
+export const MuiOutlinedInput = (theme) => {
     return {
         styleOverrides: {
             input: {
@@ -966,8 +1017,8 @@ const MuiOutlinedInput = (theme) => {
                 borderColor: theme.palette.smoke.dark,
             },
             root: {
-                backgroundColor: palette_1.white,
-                boxShadow: `inset 0 2px 0 0 ${palette_1.black04}`,
+                backgroundColor: white,
+                boxShadow: `inset 0 2px 0 0 ${black04}`,
                 paddingLeft: 12,
                 // eslint-disable-next-line sort-keys -- disabling key order for readability
                 "& .MuiSvgIcon-root": {
@@ -1010,20 +1061,19 @@ const MuiOutlinedInput = (theme) => {
         },
     };
 };
-exports.MuiOutlinedInput = MuiOutlinedInput;
 /**
  * MuiPaper Component
  * @param theme - Theme.
  * @returns MuiPaper component theme styles.
  */
-const MuiPaper = (theme) => {
+export 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}`,
+                    boxShadow: `${strokeTop} ${theme.palette.smoke.main}, ${strokeBottom} ${theme.palette.smoke.main}`,
                 },
             },
             {
@@ -1063,16 +1113,24 @@ const MuiPaper = (theme) => {
                     },
                 },
             },
+            {
+                props: { variant: "table" },
+                style: {
+                    borderColor: theme.palette.smoke.main,
+                    borderStyle: "solid",
+                    borderWidth: 1,
+                    boxShadow: theme.shadows[1], // elevation01
+                },
+            },
         ],
     };
 };
-exports.MuiPaper = MuiPaper;
 /**
  * MuiRadio Component
  * @param theme - Theme.
  * @returns MuiRadio component theme styles.
  */
-const MuiRadio = (theme) => {
+export const MuiRadio = (theme) => {
     return {
         defaultProps: {
             disableRipple: true,
@@ -1101,13 +1159,12 @@ const MuiRadio = (theme) => {
         },
     };
 };
-exports.MuiRadio = MuiRadio;
 /**
  * MuiSelect Component
  */
-exports.MuiSelect = {
+export const MuiSelect = {
     defaultProps: {
-        IconComponent: dropDownIcon_1.DropDownIcon,
+        IconComponent: DropDownIcon,
     },
     styleOverrides: {
         select: {
@@ -1121,7 +1178,7 @@ exports.MuiSelect = {
  * @param theme - Theme.
  * @returns MuiSvgIcon component theme styles.
  */
-const MuiSvgIcon = (theme) => {
+export const MuiSvgIcon = (theme) => {
     return {
         styleOverrides: {
             fontSizeLarge: {
@@ -1189,13 +1246,12 @@ const MuiSvgIcon = (theme) => {
         ],
     };
 };
-exports.MuiSvgIcon = MuiSvgIcon;
 /**
  * MuiTab Component
  * @param theme - Theme.
  * @returns MuiTab component theme styles.
  */
-const MuiTab = (theme) => {
+export const MuiTab = (theme) => {
     return {
         styleOverrides: {
             labelIcon: {
@@ -1205,29 +1261,42 @@ const MuiTab = (theme) => {
                     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", 
+            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,
-                } }),
+                },
+            },
         },
     };
 };
-exports.MuiTab = MuiTab;
 /**
  * MuiTableCell Component
  * @param theme - Theme.
  * @returns MuiTableCell component theme styles.
  */
-const MuiTableCell = (theme) => {
+export 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" }),
+            body: {
+                ...theme.typography[TEXT_BODY_400],
+            },
+            head: {
+                ...theme.typography[TEXT_BODY_SMALL_500],
+                padding: "20px",
+            },
             paddingCheckbox: {
                 paddingRight: 0,
                 width: "unset",
@@ -1244,11 +1313,10 @@ const MuiTableCell = (theme) => {
         },
     };
 };
-exports.MuiTableCell = MuiTableCell;
 /**
  * MuiTableSortLabel Component
  */
-exports.MuiTableSortLabel = {
+export const MuiTableSortLabel = {
     styleOverrides: {
         icon: {
             fontSize: 20,
@@ -1277,7 +1345,7 @@ exports.MuiTableSortLabel = {
  * @param theme - Theme.
  * @returns MuiTabs component theme styles.
  */
-const MuiTabs = (theme) => {
+export const MuiTabs = (theme) => {
     return {
         defaultProps: {
             textColor: "inherit",
@@ -1326,7 +1394,7 @@ const MuiTabs = (theme) => {
                 height: 3,
             },
             root: {
-                boxShadow: `${shadows_1.strokeBottom} ${theme.palette.smoke.main}`,
+                boxShadow: `${strokeBottom} ${theme.palette.smoke.main}`,
                 minHeight: "unset",
                 position: "relative", // Positions scroll fuzz.
             },
@@ -1334,45 +1402,51 @@ const MuiTabs = (theme) => {
                 margin: 0,
                 padding: "0 8px",
                 // eslint-disable-next-line sort-keys -- disabling key order for readability
-                [breakpoints_1.tabletUp]: {
+                [tabletUp]: {
                     padding: 0,
                 },
             },
         },
     };
 };
-exports.MuiTabs = MuiTabs;
 /**
  * MuiToggleButton Component
  * @param theme - Theme.
  * @returns MuiToggleButton component theme styles.
  */
-const MuiToggleButton = (theme) => {
+export 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", 
+            root: {
+                ...theme.typography[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,
+                    backgroundColor: white,
                     // eslint-disable-next-line sort-keys -- disabling key order for readability
                     "&:hover": {
-                        backgroundColor: palette_1.white,
+                        backgroundColor: white,
                     },
-                } }),
+                },
+            },
         },
     };
 };
-exports.MuiToggleButton = MuiToggleButton;
 /**
  * MuiToggleButtonGroup Component
  * @param theme - Theme.
  * @returns MuiToggleButtonGroup component theme styles.
  */
-const MuiToggleButtonGroup = (theme) => {
+export const MuiToggleButtonGroup = (theme) => {
     return {
         styleOverrides: {
             grouped: {
@@ -1392,19 +1466,18 @@ const MuiToggleButtonGroup = (theme) => {
         },
     };
 };
-exports.MuiToggleButtonGroup = MuiToggleButtonGroup;
 /**
  * MuiToolbar Component
  */
-exports.MuiToolbar = {
+export const MuiToolbar = {
     styleOverrides: {
         root: {
-            [breakpoints_1.mobileUp]: {
+            [mobileUp]: {
                 paddingLeft: 12,
                 paddingRight: 12,
             },
             // eslint-disable-next-line sort-keys -- disabling key order for readability
-            [breakpoints_1.desktopUp]: {
+            [desktopUp]: {
                 paddingLeft: 16,
                 paddingRight: 16,
             },
@@ -1416,7 +1489,7 @@ exports.MuiToolbar = {
  * @param theme - Theme.
  * @returns MuiTooltip component theme styles.
  */
-const MuiTooltip = (theme) => {
+export const MuiTooltip = (theme) => {
     return {
         defaultProps: {
             enterTouchDelay: 0,
@@ -1431,15 +1504,20 @@ const MuiTooltip = (theme) => {
                     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" }),
+            tooltip: {
+                ...theme.typography[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 = {
+export const MuiTypography = {
     defaultProps: {
         variant: "inherit",
     },