@vertigis/react-ui 8.16.0 → 9.1.0

package/styles/createTheme.js

@@ -1,16 +1,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const styles_1 = require("@material-ui/core/styles");
-const merge_1 = tslib_1.__importDefault(require("lodash/merge"));
-const Modal_1 = require("../Modal");
-const blue_1 = tslib_1.__importDefault(require("../colors/blue"));
-const common_1 = tslib_1.__importDefault(require("../colors/common"));
-const green_1 = tslib_1.__importDefault(require("../colors/green"));
-const grey_1 = tslib_1.__importDefault(require("../colors/grey"));
-const red_1 = tslib_1.__importDefault(require("../colors/red"));
-const index_1 = require("./index");
-const black = "#333333";
+import { alpha, createTheme as createMuiTheme, } from "@mui/material/styles";
+import merge from "lodash/merge";
+import blue from "../colors/blue";
+import common from "../colors/common";
+import green from "../colors/green";
+import grey from "../colors/grey";
+import red from "../colors/red";
 const secondaryTextColor = "#666666";
 const primaryTextColor = "#333333";
 const primaryErrorColor = "#B22222";
@@ -19,7 +13,7 @@ const primarySuccessColor = "#008040";
 const lightThemeOverrides = {
     palette: {
         background: {
-            default: common_1.default.white,
+            default: common.white,
         },
     },
     text: {
@@ -29,10 +23,10 @@ const lightThemeOverrides = {
 };
 const defaultOptions = {
     palette: {
-        primary: blue_1.default,
-        secondary: green_1.default,
-        grey: grey_1.default,
-        error: { ...red_1.default, main: primaryErrorColor },
+        primary: blue,
+        secondary: green,
+        grey: { ...grey, main: grey[300], dark: grey[400] },
+        error: { ...red, main: primaryErrorColor },
         warning: { main: primaryWarningColor },
         success: { main: primarySuccessColor },
     },
@@ -40,14 +34,106 @@ const defaultOptions = {
         fontFamily: `"Segoe UI", "Helvetica Neue", "Droid Sans", Helvetica, Arial, sans-serif`,
     },
 };
-// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-const selectBase = (theme) => ({
+const defaultDenseOptions = {
+    spacing: 6,
+    components: {
+        MuiButton: {
+            defaultProps: { size: "small" },
+        },
+        MuiFilledInput: {
+            defaultProps: { margin: "dense" },
+        },
+        MuiFormControl: {
+            defaultProps: { margin: "dense" },
+        },
+        MuiFormHelperText: {
+            defaultProps: { margin: "dense" },
+        },
+        MuiIconButton: {
+            defaultProps: { size: "small" },
+        },
+        MuiInputBase: {
+            defaultProps: { margin: "dense" },
+        },
+        MuiInputLabel: {
+            defaultProps: { margin: "dense" },
+        },
+        MuiListItem: {
+            defaultProps: { dense: true },
+        },
+        MuiListItemButton: {
+            defaultProps: { dense: true },
+        },
+        MuiMenuItem: {
+            defaultProps: { dense: true },
+        },
+        MuiOutlinedInput: {
+            defaultProps: { margin: "dense" },
+        },
+        MuiFab: {
+            defaultProps: { size: "small" },
+        },
+        MuiTable: {
+            defaultProps: { size: "small" },
+        },
+        MuiTextField: {
+            defaultProps: { margin: "dense" },
+        },
+        MuiToolbar: {
+            defaultProps: { variant: "dense" },
+        },
+    },
+};
+/**
+ * Common style overrides for both Select and NativeSelect.
+ */
+const getSelectStyles = (theme) => ({
     borderRadius: theme.shape.borderRadius,
     "&:focus": {
+        borderRadius: theme.shape.borderRadius,
         // Reset focused background color
-        backgroundColor: undefined,
-        // Reset border-radius focus style
-        borderRadius: undefined,
+        backgroundColor: "inherit",
+    },
+});
+const getFocusHighlightStyles = ({ palette }) => ({
+    boxShadow: `0 0 0 2px ${palette.grey[600]} inset,
+        0 0 0 3px ${palette.common.white} inset,
+        0 0 0 5px ${palette.grey[600]} inset`,
+});
+/**
+ * Common style overrides for both MenuItem and ListItemButton.
+ */
+const getMenuItemStyles = ({ palette, transitions }) => ({
+    overflow: "hidden",
+    "&:hover": {
+        backgroundColor: "transparent",
+    },
+    "&:before": {
+        content: '""',
+        position: "absolute",
+        left: 0,
+        display: "block",
+        width: 3,
+        height: "100%",
+        backgroundColor: palette.primary.main,
+        transform: "translateX(-3px)",
+        transition: transitions.create(["transform"], {
+            duration: transitions.duration.short,
+        }),
+    },
+    "&:hover:before": {
+        transform: "translateX(0)",
+    },
+    "&.Mui-selected:before": {
+        width: 6,
+        backgroundColor: palette.primary.main,
+        transform: "scaleX(1.5)",
+    },
+    "&.Mui-selected:hover": {
+        backgroundColor: "transparent",
+    },
+    "&:hover, &.Mui-selected": {
+        background: `linear-gradient(to right, ${palette.mode === "dark" ? palette.grey[800] : palette.grey[100]} 0%, transparent 100%)`,
     },
 });
 /**
@@ -55,504 +141,678 @@ const selectBase = (theme) => ({
  * We must create these separately after the fact.
  */
 function getOverrides(theme) {
+    const { palette, shape, spacing, transitions, typography } = theme;
     return {
-        props: {
-            MuiButton: {
-                disableFocusRipple: true,
-                variant: "contained",
-            },
-            MuiButtonGroup: {
-                disableFocusRipple: true,
-                variant: "contained",
-            },
-            MuiCheckbox: {
-                focusRipple: false,
-            },
-            MuiIconButton: {
-                focusRipple: false,
-            },
-            MuiInput: {
-                disableUnderline: true,
-            },
-            MuiModal: {
-                dir: theme.direction,
-                manager: Modal_1.defaultModalManager,
-            },
-            MuiNativeSelect: {
-                disableUnderline: true,
-            },
-            // HACK: Popper is missing from MUI's types, but this is a
-            // legitimate key. This avoids type errors.
-            [`${"MuiPopper"}`]: {
-                dir: theme.direction,
-            },
-            MuiRadio: {
-                focusRipple: false,
-            },
-            MuiSelect: {
-                disableUnderline: true,
-            },
-            MuiSwitch: {
-                focusRipple: false,
-            },
-            MuiTab: {
-                focusRipple: false,
+        components: {
+            MuiBackdrop: {
+                styleOverrides: {
+                    root: {
+                        backgroundColor: "rgba(0, 0, 0, 0.4)",
+                    },
+                    invisible: {
+                        backgroundColor: "transparent",
+                    },
+                },
             },
-        },
-        overrides: {
-            // Button will use 'actionable' palette instead of primary for
-            // primary/contrast button colors This allows the app to have
-            // different colors for primary components (used in sidebar, icons,
-            // etc) and actionable components (buttons)
             MuiButton: {
-                root: {
-                    border: "1px solid transparent",
-                    textTransform: undefined,
-                    "&$focusVisible:active": {
-                        backgroundColor: index_1.fade(theme.palette.grey.A200, 0.5),
+                defaultProps: {
+                    disableFocusRipple: true,
+                    color: "grey",
+                    variant: "contained",
+                },
+                styleOverrides: {
+                    // Button will use 'actionable' palette instead of primary
+                    // for primary/contrast button colors This allows the app to
+                    // have different colors for primary components (used in
+                    // sidebar, icons, etc) and actionable components (buttons)
+                    root: {
+                        borderStyle: "solid",
+                        borderWidth: 1,
+                        textTransform: "none",
+                        "&.Mui-focusVisible:active": {
+                            backgroundColor: alpha(palette.grey.A200, 0.5),
+                        },
                     },
-                },
-                textPrimary: {
-                    "&$focusVisible:active": {
-                        backgroundColor: index_1.fade(theme.palette.primary.main, 0.25),
+                    contained: {
+                        borderColor: palette.grey[400],
+                        boxShadow: "none",
+                        "&:hover": {
+                            boxShadow: "none",
+                        },
+                        "&.Mui-disabled": {
+                            borderColor: palette.grey[300],
+                        },
+                        "&:active": {
+                            boxShadow: "none",
+                        },
+                        "&.Mui-focusVisible": {
+                            ...getFocusHighlightStyles(theme),
+                        },
+                        "&.Mui-focusVisible:active": {
+                            backgroundColor: palette.grey[500],
+                        },
                     },
-                },
-                textSecondary: {
-                    "&$focusVisible:active": {
-                        backgroundColor: index_1.fade(theme.palette.secondary.main, 0.25),
+                    containedPrimary: {
+                        borderColor: palette.primary.dark,
+                        "&.Mui-focusVisible:active": {
+                            backgroundColor: alpha(palette.primary.main, 0.5),
+                        },
                     },
-                },
-                contained: {
-                    borderColor: theme.palette.grey[400],
-                    boxShadow: "none",
-                    "&:hover": {
-                        boxShadow: undefined,
+                    containedSecondary: {
+                        borderColor: palette.secondary.dark,
+                        "&.Mui-focusVisible:active": {
+                            backgroundColor: alpha(palette.secondary.main, 0.5),
+                        },
                     },
-                    "&$disabled": {
-                        borderColor: theme.palette.grey[300],
+                    outlined: {
+                        "&.Mui-focusVisible:active": {
+                            backgroundColor: palette.grey[500],
+                        },
                     },
-                    "&:active": {
-                        boxShadow: undefined,
+                    sizeMedium: {
+                        padding: "6px 16px",
                     },
-                    "&$focusVisible": {
-                        boxShadow: undefined,
+                    text: {
+                        borderColor: "transparent",
                     },
-                    "&$focusVisible:active": {
-                        backgroundColor: theme.palette.grey[500],
+                    textPrimary: {
+                        "&.Mui-focusVisible:active": {
+                            backgroundColor: alpha(palette.primary.main, 0.25),
+                        },
                     },
-                },
-                outlined: {
-                    padding: undefined,
-                    "&$focusVisible:active": {
-                        backgroundColor: theme.palette.grey[500],
+                    textSecondary: {
+                        "&.Mui-focusVisible:active": {
+                            backgroundColor: alpha(palette.secondary.main, 0.25),
+                        },
                     },
                 },
-                containedPrimary: {
-                    borderColor: theme.palette.primary.dark,
-                    "&$focusVisible:active": {
-                        backgroundColor: index_1.fade(theme.palette.primary.main, 0.5),
+                variants: [
+                    {
+                        // The "grey" color is our own augmentation which is
+                        // equivalent to the "default" color in MUI v4, which
+                        // was removed in v5.
+                        props: { variant: "contained", color: "grey" },
+                        style: {
+                            color: theme.palette.getContrastText(theme.palette.grey[300]),
+                        },
                     },
-                },
-                containedSecondary: {
-                    borderColor: theme.palette.secondary.dark,
-                    "&$focusVisible:active": {
-                        backgroundColor: index_1.fade(theme.palette.secondary.main, 0.5),
+                    {
+                        props: { variant: "outlined", color: "grey" },
+                        style: {
+                            color: theme.palette.text.primary,
+                            borderColor: theme.palette.mode === "light"
+                                ? "rgba(0, 0, 0, 0.23)"
+                                : "rgba(255, 255, 255, 0.23)",
+                            "&.Mui-disabled": {
+                                border: `1px solid ${theme.palette.action.disabledBackground}`,
+                            },
+                            "&:hover": {
+                                borderColor: theme.palette.mode === "light"
+                                    ? "rgba(0, 0, 0, 0.23)"
+                                    : "rgba(255, 255, 255, 0.23)",
+                                backgroundColor: alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
+                            },
+                        },
                     },
-                },
-                text: {
-                    padding: undefined,
-                },
+                    {
+                        props: { color: "grey", variant: "text" },
+                        style: {
+                            color: theme.palette.text.primary,
+                            "&:hover": {
+                                backgroundColor: alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
+                            },
+                        },
+                    },
+                ],
             },
             MuiButtonBase: {
-                root: {
-                    "&$focusVisible": {
-                        boxShadow: `0 0 0 2px ${theme.palette.grey[600]} inset,
-                    0 0 0 3px ${theme.palette.common.white} inset,
-                    0 0 0 5px ${theme.palette.grey[600]} inset`,
+                styleOverrides: {
+                    root: {
+                        "&.Mui-focusVisible": {
+                            ...getFocusHighlightStyles(theme),
+                        },
                     },
                 },
             },
             MuiButtonGroup: {
-                contained: {
-                    boxShadow: undefined,
+                defaultProps: {
+                    color: "grey",
+                    disableFocusRipple: true,
+                    variant: "contained",
                 },
-                grouped: {
-                    margin: 0,
-                },
-                groupedContained: {
-                    "&:not(:first-child)": {
-                        // Hide double border
-                        borderLeftWidth: 0,
+                styleOverrides: {
+                    contained: {
+                        boxShadow: "none",
+                    },
+                    grouped: {
+                        margin: 0,
+                    },
+                    groupedContained: {
+                        "&:not(:first-child)": {
+                            // Hide double border
+                            borderLeftWidth: 0,
+                        },
                     },
                 },
             },
-            MuiBackdrop: {
-                root: {
-                    backgroundColor: "rgba(0, 0, 0, 0.4)",
+            MuiCheckbox: {
+                defaultProps: {
+                    color: "secondary",
+                    focusRipple: false,
+                },
+            },
+            MuiCssBaseline: {
+                styleOverrides: {
+                    html: {
+                        WebkitFontSmoothing: "antialiased",
+                        MozOsxFontSmoothing: "grayscale",
+                        // Change from `box-sizing: content-box` so that `width`
+                        // is not affected by `padding` or `border`.
+                        boxSizing: "border-box",
+                    },
+                    "*, *::before, *::after": {
+                        boxSizing: "inherit",
+                    },
+                    "strong, b": {
+                        fontWeight: typography.fontWeightBold,
+                    },
+                    body: {
+                        margin: 0,
+                        padding: 0,
+                        color: palette.text.primary,
+                        ...typography.body1,
+                        backgroundColor: palette.background.default,
+                        overflow: "hidden",
+                        "@media print": {
+                            // Save printer ink.
+                            backgroundColor: palette.common.white,
+                        },
+                        // Add support for document.body.requestFullScreen().
+                        // Other elements, if background transparent, are not supported.
+                        "&::backdrop": {
+                            backgroundColor: palette.background.default,
+                        },
+                    },
                 },
             },
             MuiDialogActions: {
-                root: {
-                    margin: theme.spacing(1),
+                styleOverrides: {
+                    root: {
+                        margin: spacing(1),
+                    },
                 },
             },
             MuiFormControl: {
-                root: {
-                    marginBottom: theme.spacing(1),
+                styleOverrides: {
+                    root: {
+                        marginBottom: spacing(1),
+                    },
                 },
             },
             MuiFormHelperText: {
-                root: {
-                    color: black,
-                    fontStyle: "italic",
-                    fontSize: theme.typography.pxToRem(13),
-                    marginTop: 0,
-                    marginBottom: theme.spacing(0.5),
+                defaultProps: {
+                    variant: "standard",
+                },
+                styleOverrides: {
+                    root: {
+                        fontStyle: "italic",
+                        fontSize: typography.pxToRem(13),
+                        marginTop: 0,
+                        marginBottom: spacing(0.5),
+                    },
                 },
             },
             MuiFormLabel: {
-                root: {
-                    // Override disabled background color that gets applied
-                    backgroundColor: "transparent",
-                    margin: theme.spacing(1, 0),
-                    color: "currentColor",
-                    // Clear InlineHelp button
-                    paddingRight: theme.typography.pxToRem(32),
-                    fontWeight: theme.typography.fontWeightMedium,
-                    "&$focused": {
+                styleOverrides: {
+                    root: {
+                        // Override disabled background color that gets applied
+                        backgroundColor: "transparent",
+                        margin: spacing(1, 0),
                         color: "currentColor",
+                        // Clear InlineHelp button
+                        paddingRight: typography.pxToRem(32),
+                        lineHeight: 1,
+                        fontWeight: typography.fontWeightMedium,
+                        "&.Mui-focused": {
+                            color: "currentColor",
+                        },
                     },
                 },
             },
             MuiIconButton: {
-                root: {
-                    border: "1px solid transparent",
+                defaultProps: {
+                    focusRipple: false,
+                },
+                styleOverrides: {
+                    root: {
+                        border: "1px solid transparent",
+                        "&.Mui-focusVisible": {
+                            borderRadius: "50%",
+                            backgroundColor: "transparent",
+                            ...getFocusHighlightStyles(theme),
+                        },
+                    },
+                    sizeSmall: {
+                        padding: 3,
+                    },
                 },
             },
             MuiInput: {
-                formControl: {
-                    "label + &": {
-                        marginTop: "0",
-                    },
-                },
-                input: {
-                    borderRadius: theme.shape.borderRadius,
-                    // Fixes issues with our font where letters such as `g` would get cut off
-                    lineHeight: "1.3125em",
-                },
-                root: {
-                    border: `1px solid ${theme.palette.grey[400]}`,
-                    borderRadius: theme.shape.borderRadius,
-                    padding: 0,
-                    "&$focused, &$error$focused": {
-                        borderColor: blue_1.default.A100,
-                        boxShadow: "none",
+                defaultProps: {
+                    disableUnderline: true,
+                },
+                styleOverrides: {
+                    formControl: {
+                        "label + &": {
+                            marginTop: "0",
+                        },
                     },
-                    "&$error": {
-                        backgroundColor: index_1.fade(theme.palette.error.main, 0.15),
-                        borderColor: theme.palette.error.main,
-                        boxShadow: `0 0 0 1px ${theme.palette.error.main} inset`,
+                    input: {
+                        borderRadius: shape.borderRadius,
+                        // Fixes issues with our font where letters such as `g` would get cut off
+                        lineHeight: "1.3125em",
+                    },
+                    root: {
+                        border: `1px solid ${palette.grey[400]}`,
+                        borderRadius: shape.borderRadius,
+                        padding: 0,
+                        "&.Mui-focused, &.Mui-error.Mui-focused": {
+                            borderColor: blue.A100,
+                            boxShadow: "none",
+                        },
+                        "&.Mui-error": {
+                            backgroundColor: alpha(palette.error.main, 0.15),
+                            borderColor: palette.error.main,
+                            boxShadow: `0 0 0 1px ${palette.error.main} inset`,
+                        },
+                        "&.Mui-disabled": {
+                            borderColor: palette.grey[300],
+                            backgroundColor: palette.mode === "dark" ? palette.grey[900] : palette.grey[100],
+                        },
                     },
-                    "&$disabled": {
-                        borderColor: theme.palette.grey[300],
+                    inputMultiline: {
+                        padding: "5px 8px",
                     },
                 },
-                disabled: {
-                    backgroundColor: theme.palette.type === "dark"
-                        ? theme.palette.grey[900]
-                        : theme.palette.grey[100],
-                },
-                inputMultiline: {
-                    padding: "5px 8px",
-                },
             },
             MuiInputAdornment: {
-                positionEnd: {
-                    marginRight: 8,
-                },
-                positionStart: {
-                    marginLeft: 8,
+                styleOverrides: {
+                    positionEnd: {
+                        marginRight: 8,
+                    },
+                    positionStart: {
+                        marginLeft: 8,
+                    },
                 },
             },
             MuiInputBase: {
-                input: {
-                    // Let the height expand to fit content
-                    height: undefined,
-                    padding: "5px 8px",
+                styleOverrides: {
+                    input: {
+                        // Let the height expand to fit content
+                        height: "auto",
+                        padding: "5px 8px",
+                    },
+                },
+            },
+            MuiLink: {
+                defaultProps: {
+                    underline: "hover",
+                },
+            },
+            MuiListItemButton: {
+                styleOverrides: {
+                    root: getMenuItemStyles(theme),
                 },
             },
             MuiListItem: {
-                button: {
-                    overflow: "hidden",
-                    "&:hover": {
-                        backgroundColor: undefined,
-                    },
-                    "&:before": {
-                        content: '""',
-                        position: "absolute",
-                        left: 0,
-                        display: "block",
-                        width: 3,
-                        height: "100%",
-                        backgroundColor: theme.palette.primary.main,
-                        transform: "translateX(-3px)",
-                        transition: theme.transitions.create(["transform"], {
-                            duration: theme.transitions.duration.short,
-                        }),
-                    },
-                    "&:hover:before": {
-                        transform: "translateX(0)",
-                    },
-                    "&$selected:before": {
-                        width: 6,
-                        backgroundColor: theme.palette.primary.main,
-                        transform: "scaleX(1.5)",
+                variants: [
+                    {
+                        // HACK: The button prop is deprecated in MUI 5 in favor
+                        // of using ListItemButton. This applies the same
+                        // styling for any existing code still using this
+                        // property.
+                        props: { [`${"button"}`]: true },
+                        style: {
+                            ...getMenuItemStyles(theme),
+                        },
                     },
-                    "&:hover, &$selected": {
-                        background: `linear-gradient(to right, ${theme.palette.type === "dark"
-                            ? theme.palette.grey[800]
-                            : theme.palette.grey[100]} 0%, transparent 100%)`,
+                ],
+            },
+            MuiListItemText: {
+                styleOverrides: {
+                    primary: {
+                        fontWeight: 500,
                     },
                 },
             },
-            MuiListItemText: {
-                primary: {
-                    fontWeight: 500,
+            MuiListSubheader: {
+                styleOverrides: {
+                    sticky: {
+                        backgroundColor: "inherit",
+                    },
                 },
             },
             MuiMenuItem: {
-                root: {
-                    [theme.breakpoints.up("sm")]: {
-                        // Reset to make height consistent with ListItems
-                        minHeight: undefined,
+                styleOverrides: {
+                    root: {
+                        [theme.breakpoints.up("sm")]: {
+                            // Reset to make height consistent with ListItems
+                            minHeight: 48,
+                        },
+                        paddingTop: 8,
+                        paddingBottom: 8,
+                        ...getMenuItemStyles(theme),
+                    },
+                    dense: {
+                        [theme.breakpoints.up("sm")]: {
+                            minHeight: 36,
+                        },
+                        paddingTop: 4,
+                        paddingBottom: 4,
+                        ["& .MuiListItemIcon-root svg"]: {
+                            // MUI sets this to 1.25rem, which ignores the
+                            // theme's `htmlFontSize` setting. Override with
+                            // pxToRem to get the correct height regardless of
+                            // HTML font size.
+                            fontSize: theme.typography.pxToRem(20),
+                        },
                     },
                 },
             },
+            MuiModal: {
+                defaultProps: {
+                    dir: theme.direction,
+                },
+            },
             MuiNativeSelect: {
-                select: {
-                    ...selectBase(theme),
-                    // Removing until resolution or workaround of https://github.com/mui-org/material-ui/issues/14131
-                    // "&:focus": {
-                    //     boxShadow: `0 0 0 2px ${theme.palette.grey[600]} inset,
-                    //     0 0 0 3px ${theme.palette.common.white} inset,
-                    //     0 0 0 5px ${theme.palette.grey[600]} inset`,
-                    // },
+                defaultProps: {
+                    variant: "standard",
+                },
+                styleOverrides: {
+                    select: {
+                        ...getSelectStyles(theme),
+                    },
+                },
+            },
+            MuiPagination: {
+                defaultProps: {
+                    color: "primary",
+                },
+            },
+            MuiRadio: {
+                defaultProps: {
+                    color: "secondary",
+                    focusRipple: false,
                 },
             },
             MuiSelect: {
-                select: {
-                    ...selectBase(theme),
+                defaultProps: {
+                    variant: "standard",
                 },
-                selectMenu: {
-                    // Let the height expand to fit content
-                    height: undefined,
+                styleOverrides: {
+                    select: {
+                        ...getSelectStyles(theme),
+                    },
                 },
             },
             MuiSwitch: {
-                root: {
-                    width: 52,
-                    height: 42,
-                    padding: 10,
-                    // 'on' state indicator
-                    "&::before": {
-                        content: "'•'",
-                        position: "absolute",
-                        // Get contrast text color based on track color
-                        color: theme.palette.getContrastText(theme.palette.secondary.main),
-                        left: 14,
-                        top: 7,
-                        fontSize: 18,
-                    },
-                },
-                colorPrimary: {
-                    "&$checked": {
-                        color: theme.palette.type === "light"
-                            ? theme.palette.common.black
-                            : theme.palette.common.white,
-                    },
-                },
-                colorSecondary: {
-                    "&$checked": {
-                        color: theme.palette.type === "light"
-                            ? theme.palette.common.black
-                            : theme.palette.common.white,
-                    },
-                },
-                sizeSmall: {
-                    width: 36,
-                    height: 30,
-                    padding: 6,
-                    // 'on' state indicator
-                    "&::before": {
-                        left: 8,
-                        top: 4,
-                        fontSize: 14,
-                    },
-                    "& $thumb": {
-                        width: 12,
-                        height: 12,
-                    },
-                    "& $switchBase": {
-                        padding: 5,
-                        "&$checked": {
-                            transform: undefined,
-                        },
-                    },
-                },
-                switchBase: {
-                    top: 3,
-                    left: 2,
-                    "&$checked": {
-                        transform: "translateX(33%)",
-                    },
-                    "&$checked + $track": {
-                        backgroundColor: theme.palette.secondary.main,
-                        opacity: 1,
-                    },
-                },
-                thumb: {
-                    width: 16,
-                    height: 16,
-                    borderRadius: 2,
-                    backgroundColor: theme.palette.type === "light"
-                        ? theme.palette.common.white
-                        : theme.palette.common.black,
-                },
-                track: {
-                    borderRadius: theme.shape.borderRadius,
+                defaultProps: {
+                    focusRipple: false,
+                },
+                styleOverrides: {
+                    root: {
+                        width: 52,
+                        height: 42,
+                        padding: 10,
+                        // 'on' state indicator
+                        "&::before": {
+                            content: "'•'",
+                            position: "absolute",
+                            // Get contrast text color based on track color
+                            color: palette.getContrastText(palette.secondary.main),
+                            left: 14,
+                            top: 7,
+                            fontSize: 18,
+                        },
+                    },
+                    colorPrimary: {
+                        "&.Mui-checked": {
+                            color: palette.mode === "light"
+                                ? palette.common.black
+                                : palette.common.white,
+                        },
+                    },
+                    colorSecondary: {
+                        "&.Mui-checked": {
+                            color: palette.mode === "light"
+                                ? palette.common.black
+                                : palette.common.white,
+                        },
+                    },
+                    sizeSmall: {
+                        width: 36,
+                        height: 30,
+                        padding: 6,
+                        // 'on' state indicator
+                        "&::before": {
+                            left: 8,
+                            top: 4,
+                            fontSize: 14,
+                        },
+                        "& .MuiSwitch-thumb": {
+                            width: 12,
+                            height: 12,
+                        },
+                        "& .MuiSwitch-switchBase": {
+                            padding: 5,
+                            "&.Mui-checked": {
+                                transform: "translateX(33%)",
+                            },
+                        },
+                    },
+                    switchBase: {
+                        top: 3,
+                        left: 2,
+                        border: "1px solid transparent",
+                        "&.Mui-checked": {
+                            transform: "translateX(33%)",
+                        },
+                        "&.Mui-checked + .MuiSwitch-track": {
+                            backgroundColor: palette.secondary.main,
+                            opacity: 1,
+                        },
+                    },
+                    thumb: {
+                        width: 16,
+                        height: 16,
+                        borderRadius: 2,
+                        backgroundColor: palette.mode === "light" ? palette.common.white : palette.common.black,
+                    },
+                    track: {
+                        borderRadius: shape.borderRadius,
+                    },
                 },
             },
             MuiTab: {
-                root: {
-                    textTransform: "none",
-                    borderStyle: "solid",
-                    borderWidth: 1,
-                    borderColor: theme.palette.grey[400],
-                    borderLeft: "none",
-                    height: 40,
-                    minHeight: 38,
-                    backgroundColor: theme.palette.type === "dark"
-                        ? theme.palette.grey[900]
-                        : theme.palette.grey[100],
-                    [theme.breakpoints.up("sm")]: {
-                        minWidth: undefined,
+                defaultProps: {
+                    focusRipple: false,
+                },
+                styleOverrides: {
+                    root: {
+                        backgroundColor: palette.mode === "dark" ? palette.grey[900] : palette.grey[100],
+                        borderStyle: "solid",
+                        borderWidth: 1,
+                        borderColor: palette.grey[400],
+                        borderLeftWidth: 0,
+                        height: 40,
+                        minHeight: 38,
+                        padding: "6px 12px",
+                        textTransform: "none",
+                        [theme.breakpoints.up("sm")]: {
+                            minWidth: 72,
+                        },
                     },
-                },
-                textColorInherit: {
-                    "&$selected": {
-                        backgroundColor: "unset",
+                    labelIcon: {
+                        minHeight: 72,
+                    },
+                    textColorPrimary: {
+                        "&.Mui-selected": {
+                            backgroundColor: "unset",
+                        },
                     },
                 },
-                wrapper: {
-                    "$labelIcon &": {
-                        display: "flex",
+            },
+            MuiTableCell: {
+                styleOverrides: {
+                    root: {
+                        border: `1px solid ${palette.grey[400]}`,
+                        padding: 12,
+                        // TODO: Change to overflowWrap: "anywhere" when Safari supports it
+                        // as "break-word" is deprecated
+                        // https://caniuse.com/#feat=mdn-css_properties_overflow-wrap_anywhere
+                        wordWrap: "break-word",
+                        "&:last-child": {
+                            paddingRight: undefined,
+                        },
+                    },
+                    head: {
+                        // Chosen to match PanelGroup in react-ui-internal.
+                        backgroundColor: palette.mode === "dark" ? palette.grey[900] : palette.grey[200],
+                        fontWeight: "bold",
+                        fontSize: typography.pxToRem(14),
                     },
-                    display: "block",
-                    whiteSpace: "nowrap",
-                    textOverflow: "ellipsis",
-                    overflow: "hidden",
-                    width: "100%",
                 },
             },
+            MuiTableRow: {
+                styleOverrides: {},
+            },
             MuiTabs: {
-                root: {
-                    height: "auto",
-                    minHeight: 36,
-                },
-                indicator: {
-                    top: "0",
-                    bottom: "auto",
-                    height: 4,
-                },
-                flexContainer: {
-                    borderColor: theme.palette.grey[400],
-                    borderStyle: "solid",
-                    borderWidth: 0,
-                    borderBottomWidth: 1,
-                    "& >div >button": {
-                        marginBottom: -1,
-                        borderLeftWidth: 1,
-                        borderRightWidth: 0,
-                        "&[aria-selected=true]": {
-                            borderBottomColor: theme.palette.background.default,
-                        },
-                    },
-                    "& >div:last-of-type >button": {
-                        borderRightWidth: 1,
+                styleOverrides: {
+                    root: {
+                        height: "auto",
+                        minHeight: 36,
+                    },
+                    indicator: {
+                        top: "0",
+                        bottom: "auto",
+                        height: 4,
+                    },
+                    flexContainer: {
+                        borderColor: palette.grey[400],
+                        borderStyle: "solid",
+                        borderWidth: 0,
+                        borderBottomWidth: 1,
+                        "& >div >button": {
+                            marginBottom: -1,
+                            borderLeftWidth: 1,
+                            borderRightWidth: 0,
+                            "&[aria-selected=true]": {
+                                borderBottomColor: palette.background.default,
+                            },
+                        },
+                        "& >div:last-of-type >button": {
+                            borderRightWidth: 1,
+                        },
                     },
-                },
-                // HACK: "vertical" and "flexContainerVertical" are documented
-                // but missing from MUI's types. This bypasses type errors.
-                [`${"flexContainerVertical"}`]: {
-                    height: "100%",
-                    borderRightWidth: 1,
-                    borderBottomWidth: 0,
-                    "& >div >button": {
-                        marginBottom: 0,
-                        marginRight: -1,
+                    flexContainerVertical: {
+                        height: "100%",
+                        width: "fit-content",
                         borderBottomWidth: 0,
                         borderRightWidth: 1,
-                        maxWidth: "10em",
-                        width: "calc(100% + 1px)",
-                        "&[aria-selected=true]": {
-                            borderRightColor: theme.palette.background.default,
-                            borderBottomColor: theme.palette.grey[400],
+                        "& >div >button": {
+                            marginBottom: 0,
+                            marginRight: -1,
+                            borderBottomWidth: 0,
+                            borderRightWidth: 1,
+                            maxWidth: "10em",
+                            width: "calc(100% + 1px)",
+                            "&[aria-selected=true]": {
+                                borderRightColor: palette.background.default,
+                                borderBottomColor: palette.grey[400],
+                            },
+                        },
+                        "& >div:last-of-type >button": {
+                            borderBottomWidth: 1,
                         },
                     },
-                    "& >div:last-of-type >button": {
-                        borderBottomWidth: 1,
+                    scrollButtons: {
+                        border: `1px solid ${palette.grey[400]}`,
                     },
-                },
-                scrollButtons: {
-                    border: `1px solid ${theme.palette.grey[400]}`,
-                },
-                // HACK: See above.
-                [`${"vertical"}`]: {
-                    minWidth: "fit-content",
-                    "& $indicator": {
-                        width: 4,
-                        left: 0,
+                    vertical: {
+                        minWidth: "fit-content",
+                        "& .MuiTabs-indicator": {
+                            width: 4,
+                            left: 0,
+                        },
                     },
                 },
             },
-            MuiTableCell: {
-                root: {
-                    border: `1px solid ${theme.palette.grey[400]}`,
-                    padding: 12,
-                    // TODO: Change to overflowWrap: "anywhere" when Safari supports it
-                    // as "break-word" is deprecated
-                    // https://caniuse.com/#feat=mdn-css_properties_overflow-wrap_anywhere
-                    wordWrap: "break-word",
-                    "&:last-child": {
-                        paddingRight: undefined,
-                    },
+            MuiToggleButton: {
+                defaultProps: {
+                    disableFocusRipple: true,
                 },
-                head: {
-                    backgroundColor: theme.palette.grey[100],
-                    fontWeight: "bold",
-                    fontSize: theme.typography.pxToRem(14),
-                    position: undefined,
+                styleOverrides: {
+                    root: {
+                        // Same as MuiButton
+                        padding: "6px 16px",
+                        height: undefined,
+                        color: alpha(palette.text.primary, 0.7),
+                        // Border color from Button contained
+                        borderColor: palette.grey[400],
+                        textTransform: "none",
+                        transition: transitions.create(["background-color"], {
+                            duration: transitions.duration.short,
+                        }),
+                        "&:hover": {
+                            backgroundColor: alpha(palette.text.primary, palette.action.hoverOpacity),
+                        },
+                        "&.Mui-focusVisible": {
+                            ...getFocusHighlightStyles(theme),
+                            "&:active": {
+                                // Taken from Button root's focusVisible in createTheme
+                                backgroundColor: alpha(palette.grey.A200, 0.5),
+                            },
+                            "&.Mui-selected:active": {
+                                // Taken from Button raised's focusVisible in createTheme
+                                backgroundColor: palette.grey[500],
+                            },
+                        },
+                        "&.Mui-selected": {
+                            // Color and BackgroundColor from default Button contained style
+                            color: palette.getContrastText(palette.grey[300]),
+                            backgroundColor: palette.grey[300],
+                            "&:hover": {
+                                backgroundColor: palette.grey.A100,
+                            },
+                            "& + &": {
+                                // Prevent shifting when keyboard focusing or clicking button with mouse
+                                borderLeft: undefined,
+                            },
+                        },
+                    },
                 },
             },
-            MuiTableRow: {
-                root: {
-                    height: undefined,
-                },
-                head: {
-                    height: undefined,
+            MuiToggleButtonGroup: {
+                styleOverrides: {
+                    grouped: {
+                        "&:not(:first-child)": {
+                            // Prevent shifting when keyboard focusing or clicking button with mouse
+                            marginLeft: undefined,
+                        },
+                    },
                 },
             },
         },
     };
 }
-function createTheme(options) {
-    // Merge the VertiGIS Studio theme defaults with any user specified theme
-    // options
-    const mode = options && options.palette && options.palette.type === "dark" ? "dark" : "light";
+function createTheme(options = {}) {
+    // Merge the VertiGIS Studio theme defaults with any user specified theme options
+    const mode = options && options.palette && options.palette.mode === "dark" ? "dark" : "light";
     // If we are using light mode, then we want to use our defined light theme palette
-    const themeTypeOptions = mode === "light" ? lightThemeOverrides : {};
-    const mergedOptions = merge_1.default({}, defaultOptions, themeTypeOptions, options || {});
-    const createdTheme = styles_1.createMuiTheme(mergedOptions);
-    return merge_1.default({}, getOverrides(createdTheme), createdTheme);
+    const modeOptions = mode === "light" ? lightThemeOverrides : {};
+    const { dense = false, ...overrides } = options;
+    const mergedOptions = merge({}, defaultOptions, modeOptions, dense ? defaultDenseOptions : {}, overrides);
+    const createdTheme = createMuiTheme(mergedOptions);
+    return merge({}, getOverrides(createdTheme), createdTheme);
 }
-exports.default = createTheme;
+export default createTheme;