@carto/meridian-ds 2.7.0-alpha-loader.6 → 2.8.0

package/CHANGELOG.md

@@ -2,10 +2,15 @@
 
 ## Unreleased
 
-- New Loader component [#329](https://github.com/CartoDB/meridian-ds/pull/329)
-
 ## 2.0
 
+### 2.8.0
+
+- New Loader and CircularProgress components [#329](https://github.com/CartoDB/meridian-ds/pull/329)
+- Dialog: improve customization [#313](https://github.com/CartoDB/meridian-ds/pull/313)
+- ToggleButtonGroup: move styles to the theme [#319](https://github.com/CartoDB/meridian-ds/pull/319)
+- Custom Icons: CreateFolder,FolderEmpty [#331](https://github.com/CartoDB/meridian-ds/pull/331)
+
 ### 2.7.0
 
 - New SearchField component [#308](https://github.com/CartoDB/meridian-ds/pull/308)

package/dist/{Alert-CHyETxuP.js → Alert-BZPM5zpX.js}

@@ -2,8 +2,8 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef, useState } from "react";
 import { styled, Link as Link$1, Alert as Alert$1, Fade, AlertTitle } from "@mui/material";
 import { OpenInNewOutlined } from "@mui/icons-material";
-import { c as ICON_SIZE_SMALL, b as ICON_SIZE_MEDIUM, u as useTranslationWithFallback, T as Typography } from "./css-utils-Cr7ZvmiF.js";
 import "cartocolor";
+import { c as ICON_SIZE_SMALL, b as ICON_SIZE_MEDIUM, u as useTranslationWithFallback, T as Typography } from "./css-utils-CjUBRJVK.js";
 const ScreenReaderOnly = styled("span")(() => ({
   position: "absolute",
   width: 1,

package/dist/{Alert-DyUCYGVG.cjs → Alert-C4W0H_uN.cjs}

@@ -3,8 +3,8 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const material = require("@mui/material");
 const iconsMaterial = require("@mui/icons-material");
-const cssUtils = require("./css-utils-B9V_AMcv.cjs");
 require("cartocolor");
+const cssUtils = require("./css-utils-CH7es90t.cjs");
 const ScreenReaderOnly = material.styled("span")(() => ({
   position: "absolute",
   width: 1,

package/dist/{MenuItem-BLZz_nSA.cjs → MenuItem-CgF4QdGi.cjs}

@@ -2,7 +2,7 @@
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const material = require("@mui/material");
-const cssUtils = require("./css-utils-B9V_AMcv.cjs");
+const cssUtils = require("./css-utils-CH7es90t.cjs");
 const StyledMenuItem = material.styled(material.MenuItem, {
   shouldForwardProp: (prop) => !["subtitle", "destructive", "extended", "fixed", "iconColor"].includes(
     prop

package/dist/{MenuItem-CM00TU3e.js → MenuItem-DRUK149i.js}

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { styled, MenuItem as MenuItem$1 } from "@mui/material";
-import { f as MENU_ITEM_SIZE_DENSE, i as MENU_ITEM_SIZE_EXTENDED } from "./css-utils-Cr7ZvmiF.js";
+import { f as MENU_ITEM_SIZE_DENSE, h as MENU_ITEM_SIZE_EXTENDED } from "./css-utils-CjUBRJVK.js";
 const StyledMenuItem = styled(MenuItem$1, {
   shouldForwardProp: (prop) => !["subtitle", "destructive", "extended", "fixed", "iconColor"].includes(
     prop

package/dist/components/index.cjs

@@ -4,11 +4,11 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const material = require("@mui/material");
 const iconsMaterial = require("@mui/icons-material");
-const cssUtils = require("../css-utils-B9V_AMcv.cjs");
-const Alert$1 = require("../Alert-DyUCYGVG.cjs");
+const cssUtils = require("../css-utils-CH7es90t.cjs");
+const Alert$1 = require("../Alert-C4W0H_uN.cjs");
 const ArrowDown = require("../ArrowDown-DJ0vhbsw.cjs");
 const OpenDiagonallyRight = require("../OpenDiagonallyRight-CpL4ROwg.cjs");
-const MenuItem = require("../MenuItem-BLZz_nSA.cjs");
+const MenuItem = require("../MenuItem-CgF4QdGi.cjs");
 require("cartocolor");
 const reactWindow = require("react-window");
 const reactCodemirror2 = require("react-codemirror2");
@@ -775,77 +775,8 @@ function _MultipleSelectField({
 }
 const MultipleSelectField = React.forwardRef(_MultipleSelectField);
 const StyledToggleButtonGroup = material.styled(material.ToggleButtonGroup, {
-  shouldForwardProp: (prop) => prop !== "variant" && prop !== "backgroundColor"
-})(({ variant, backgroundColor, theme }) => ({
-  // Variants
-  ...variant === "contained" && {
-    boxShadow: "none"
-  },
-  ...variant === "unbounded" && {
-    boxShadow: "none",
-    borderRadius: theme.spacing(0.5),
-    "& .MuiDivider-root": {
-      height: theme.spacing(4),
-      "&.MuiToggleButtonGroup-groupedHorizontal": {
-        height: theme.spacing(4)
-      },
-      "&.MuiToggleButtonGroup-groupedVertical": {
-        height: "auto",
-        width: theme.spacing(4),
-        margin: `${theme.spacing(0.5, 0, 1)} !important`,
-        borderRadius: "0 !important"
-      }
-    },
-    "& .MuiToggleButton-sizeSmall": {
-      margin: 0,
-      "&.MuiToggleButtonGroup-grouped:not(.MuiDivider-root)": {
-        margin: 0
-      },
-      "& + .MuiDivider-root.MuiToggleButtonGroup-groupedHorizontal": {
-        height: theme.spacing(3)
-      },
-      "& + .MuiDivider-root.MuiToggleButtonGroup-groupedVertical": {
-        height: "auto",
-        width: theme.spacing(3)
-      }
-    },
-    ".MuiToggleButtonGroup-grouped:not(.MuiDivider-root)": {
-      margin: 0,
-      "&:first-of-type": {
-        marginLeft: 0
-      },
-      "&:not(:last-of-type)": {
-        marginRight: theme.spacing(0.5)
-      }
-    },
-    "&.MuiToggleButtonGroup-horizontal:not(.MuiDivider-root)": {
-      ".MuiToggleButtonGroup-grouped": {
-        margin: theme.spacing(0, 0.5)
-      }
-    },
-    "&.MuiToggleButtonGroup-vertical:not(.MuiDivider-root)": {
-      ".MuiToggleButtonGroup-grouped": {
-        margin: theme.spacing(0, 0, 0.5),
-        "&:not(:last-of-type)": {
-          marginRight: 0
-        },
-        "&:last-of-type": {
-          marginBottom: 0
-        }
-      }
-    }
-  },
-  // Colors
-  ...backgroundColor === "primary" && {
-    backgroundColor: theme.palette.background.paper
-  },
-  ...backgroundColor === "secondary" && {
-    backgroundColor: theme.palette.background.default
-  },
-  ...backgroundColor === "transparent" && {
-    backgroundColor: "transparent"
-  }
-}));
+  shouldForwardProp: (prop) => prop !== "backgroundColor"
+})();
 function _ToggleButtonGroup({
   children,
   variant = "floating",
@@ -861,6 +792,7 @@ function _ToggleButtonGroup({
     StyledToggleButtonGroup,
     {
       ...rest,
+      ref,
       variant,
       backgroundColor: resolvedBackgroundColor,
       orientation,
@@ -870,7 +802,6 @@ function _ToggleButtonGroup({
       "data-size": size,
       "data-background-color": resolvedBackgroundColor,
       "data-name": "toggle-button-group",
-      ref,
       children
     }
   );
@@ -3302,6 +3233,8 @@ function DialogHeader({
   "aria-label": ariaLabel,
   closeIcon,
   closeTooltipText,
+  tooltipProps,
+  iconButtonProps,
   ...otherProps
 }) {
   const closeTooltipLabel = cssUtils.useTranslationWithFallback(
@@ -3327,7 +3260,15 @@ function DialogHeader({
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs(ItemsWrapper$1, { children: [
           secondaryActions,
-          onClose && /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: closeTooltipLabel, placement: "left", children: /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { onClick: onClose, children: closeIcon || /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, { "data-testid": "CloseIcon" }) }) })
+          onClose && /* @__PURE__ */ jsxRuntime.jsx(
+            material.Tooltip,
+            {
+              title: closeTooltipLabel,
+              placement: "left",
+              ...tooltipProps,
+              children: /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { onClick: onClose, ...iconButtonProps, children: closeIcon || /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, { "data-testid": "CloseIcon" }) })
+            }
+          )
         ] })
       ] }),
       children
@@ -3591,10 +3532,13 @@ function DialogConfirmation({
   opened,
   "data-testid": dataTestId,
   "aria-label": ariaLabel,
+  slideProps,
   ...alertProps
 }) {
   const containerRef = React.useRef(null);
   const theme = material.useTheme();
+  const timeout = (slideProps == null ? void 0 : slideProps.timeout) ?? 350;
+  const direction = (slideProps == null ? void 0 : slideProps.direction) ?? "up";
   const handleClickAway = () => {
     if (onClickAway) {
       onClickAway();
@@ -3611,13 +3555,17 @@ function DialogConfirmation({
       children: /* @__PURE__ */ jsxRuntime.jsx(ClickAwayListener, { onClickAway: handleClickAway, children: /* @__PURE__ */ jsxRuntime.jsx(
         material.Slide,
         {
-          direction: "up",
-          in: opened,
-          container: containerRef.current,
           mountOnEnter: true,
           unmountOnExit: true,
           easing: theme.transitions.easing.easeOut,
-          timeout: 350,
+          direction,
+          timeout,
+          ...slideProps,
+          in: opened,
+          container: containerRef.current,
+          "data-name": "dialog-confirmation-slide",
+          "data-direction": direction,
+          "data-timeout": timeout,
           children: /* @__PURE__ */ jsxRuntime.jsx(AnimationWrapper, { children: /* @__PURE__ */ jsxRuntime.jsxs(BackdropContent, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(DialogAlert, { severity, ...alertProps, children }),
             /* @__PURE__ */ jsxRuntime.jsx(DialogActions, { children: actions })

package/dist/components/index.js

@@ -2,13 +2,13 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import React, { forwardRef, useState, useRef, useEffect, useMemo, createElement, Fragment as Fragment$1, useCallback, useImperativeHandle } from "react";
 import { styled, Box, Button as Button$1, CircularProgress as CircularProgress$1, Popper, Grow, Paper, ClickAwayListener, MenuList as MenuList$1, MenuItem, ButtonGroup as ButtonGroup$1, TextField, InputAdornment, Select, FormControl, InputLabel, FormHelperText, Link, Checkbox, IconButton as IconButton$1, ListItemText, Tooltip, ToggleButtonGroup as ToggleButtonGroup$1, Stack, Autocomplete as Autocomplete$1, Divider, ListItemIcon, createFilterOptions, alpha, useTheme, AppBar as AppBar$1, Toolbar, Dialog as Dialog$1, DialogTitle as DialogTitle$1, Chip, DialogContent as DialogContent$1, DialogActions as DialogActions$1, Slide, Accordion, AccordionSummary, AccordionDetails, Avatar as Avatar$1, Menu as Menu$2, useMediaQuery, Snackbar as Snackbar$1, Portal, Fade } from "@mui/material";
 import { OpenInNewOutlined, VisibilityOffOutlined, VisibilityOutlined, Cancel, ContentCopyOutlined, AddCircleOutlineOutlined, MenuOutlined, MoreVertOutlined, HelpOutline, ErrorOutline, CloseOutlined, Check, TodayOutlined } from "@mui/icons-material";
-import { u as useTranslationWithFallback, T as Typography, c as ICON_SIZE_SMALL, j as IconButton, f as MENU_ITEM_SIZE_DENSE, d as MENU_LIST_MAX_SIZE, i as MENU_ITEM_SIZE_EXTENDED, M as MENU_ITEM_SIZE_DEFAULT, A as APPBAR_SIZE, k as useImperativeIntl, b as ICON_SIZE_MEDIUM, N as NOTIFICATION_DURATION_IN_MS, e as ellipsisStyles } from "../css-utils-Cr7ZvmiF.js";
-import { a } from "../css-utils-Cr7ZvmiF.js";
-import { S as ScreenReaderOnly, A as Alert$1 } from "../Alert-CHyETxuP.js";
-import { L } from "../Alert-CHyETxuP.js";
+import { u as useTranslationWithFallback, T as Typography, c as ICON_SIZE_SMALL, i as IconButton, f as MENU_ITEM_SIZE_DENSE, d as MENU_LIST_MAX_SIZE, h as MENU_ITEM_SIZE_EXTENDED, M as MENU_ITEM_SIZE_DEFAULT, A as APPBAR_SIZE, j as useImperativeIntl, b as ICON_SIZE_MEDIUM, N as NOTIFICATION_DURATION_IN_MS, e as ellipsisStyles } from "../css-utils-CjUBRJVK.js";
+import { a } from "../css-utils-CjUBRJVK.js";
+import { S as ScreenReaderOnly, A as Alert$1 } from "../Alert-BZPM5zpX.js";
+import { L } from "../Alert-BZPM5zpX.js";
 import { A as ArrowDown } from "../ArrowDown-d6bxUL0F.js";
 import { A as ArrowUp, O as OpenDiagonallyRight, C as CloseDiagonallyRight } from "../OpenDiagonallyRight-CGdCEXlF.js";
-import { M as MenuItem$1 } from "../MenuItem-CM00TU3e.js";
+import { M as MenuItem$1 } from "../MenuItem-DRUK149i.js";
 import "cartocolor";
 import { FixedSizeList } from "react-window";
 import { Controlled, UnControlled } from "react-codemirror2";
@@ -775,77 +775,8 @@ function _MultipleSelectField({
 }
 const MultipleSelectField = forwardRef(_MultipleSelectField);
 const StyledToggleButtonGroup = styled(ToggleButtonGroup$1, {
-  shouldForwardProp: (prop) => prop !== "variant" && prop !== "backgroundColor"
-})(({ variant, backgroundColor, theme }) => ({
-  // Variants
-  ...variant === "contained" && {
-    boxShadow: "none"
-  },
-  ...variant === "unbounded" && {
-    boxShadow: "none",
-    borderRadius: theme.spacing(0.5),
-    "& .MuiDivider-root": {
-      height: theme.spacing(4),
-      "&.MuiToggleButtonGroup-groupedHorizontal": {
-        height: theme.spacing(4)
-      },
-      "&.MuiToggleButtonGroup-groupedVertical": {
-        height: "auto",
-        width: theme.spacing(4),
-        margin: `${theme.spacing(0.5, 0, 1)} !important`,
-        borderRadius: "0 !important"
-      }
-    },
-    "& .MuiToggleButton-sizeSmall": {
-      margin: 0,
-      "&.MuiToggleButtonGroup-grouped:not(.MuiDivider-root)": {
-        margin: 0
-      },
-      "& + .MuiDivider-root.MuiToggleButtonGroup-groupedHorizontal": {
-        height: theme.spacing(3)
-      },
-      "& + .MuiDivider-root.MuiToggleButtonGroup-groupedVertical": {
-        height: "auto",
-        width: theme.spacing(3)
-      }
-    },
-    ".MuiToggleButtonGroup-grouped:not(.MuiDivider-root)": {
-      margin: 0,
-      "&:first-of-type": {
-        marginLeft: 0
-      },
-      "&:not(:last-of-type)": {
-        marginRight: theme.spacing(0.5)
-      }
-    },
-    "&.MuiToggleButtonGroup-horizontal:not(.MuiDivider-root)": {
-      ".MuiToggleButtonGroup-grouped": {
-        margin: theme.spacing(0, 0.5)
-      }
-    },
-    "&.MuiToggleButtonGroup-vertical:not(.MuiDivider-root)": {
-      ".MuiToggleButtonGroup-grouped": {
-        margin: theme.spacing(0, 0, 0.5),
-        "&:not(:last-of-type)": {
-          marginRight: 0
-        },
-        "&:last-of-type": {
-          marginBottom: 0
-        }
-      }
-    }
-  },
-  // Colors
-  ...backgroundColor === "primary" && {
-    backgroundColor: theme.palette.background.paper
-  },
-  ...backgroundColor === "secondary" && {
-    backgroundColor: theme.palette.background.default
-  },
-  ...backgroundColor === "transparent" && {
-    backgroundColor: "transparent"
-  }
-}));
+  shouldForwardProp: (prop) => prop !== "backgroundColor"
+})();
 function _ToggleButtonGroup({
   children,
   variant = "floating",
@@ -861,6 +792,7 @@ function _ToggleButtonGroup({
     StyledToggleButtonGroup,
     {
       ...rest,
+      ref,
       variant,
       backgroundColor: resolvedBackgroundColor,
       orientation,
@@ -870,7 +802,6 @@ function _ToggleButtonGroup({
       "data-size": size,
       "data-background-color": resolvedBackgroundColor,
       "data-name": "toggle-button-group",
-      ref,
       children
     }
   );
@@ -3302,6 +3233,8 @@ function DialogHeader({
   "aria-label": ariaLabel,
   closeIcon,
   closeTooltipText,
+  tooltipProps,
+  iconButtonProps,
   ...otherProps
 }) {
   const closeTooltipLabel = useTranslationWithFallback(
@@ -3327,7 +3260,15 @@ function DialogHeader({
         ] }),
         /* @__PURE__ */ jsxs(ItemsWrapper$1, { children: [
           secondaryActions,
-          onClose && /* @__PURE__ */ jsx(Tooltip, { title: closeTooltipLabel, placement: "left", children: /* @__PURE__ */ jsx(IconButton$1, { onClick: onClose, children: closeIcon || /* @__PURE__ */ jsx(CloseIcon, { "data-testid": "CloseIcon" }) }) })
+          onClose && /* @__PURE__ */ jsx(
+            Tooltip,
+            {
+              title: closeTooltipLabel,
+              placement: "left",
+              ...tooltipProps,
+              children: /* @__PURE__ */ jsx(IconButton$1, { onClick: onClose, ...iconButtonProps, children: closeIcon || /* @__PURE__ */ jsx(CloseIcon, { "data-testid": "CloseIcon" }) })
+            }
+          )
         ] })
       ] }),
       children
@@ -3591,10 +3532,13 @@ function DialogConfirmation({
   opened,
   "data-testid": dataTestId,
   "aria-label": ariaLabel,
+  slideProps,
   ...alertProps
 }) {
   const containerRef = useRef(null);
   const theme = useTheme();
+  const timeout = (slideProps == null ? void 0 : slideProps.timeout) ?? 350;
+  const direction = (slideProps == null ? void 0 : slideProps.direction) ?? "up";
   const handleClickAway = () => {
     if (onClickAway) {
       onClickAway();
@@ -3611,13 +3555,17 @@ function DialogConfirmation({
       children: /* @__PURE__ */ jsx(ClickAwayListener$1, { onClickAway: handleClickAway, children: /* @__PURE__ */ jsx(
         Slide,
         {
-          direction: "up",
-          in: opened,
-          container: containerRef.current,
           mountOnEnter: true,
           unmountOnExit: true,
           easing: theme.transitions.easing.easeOut,
-          timeout: 350,
+          direction,
+          timeout,
+          ...slideProps,
+          in: opened,
+          container: containerRef.current,
+          "data-name": "dialog-confirmation-slide",
+          "data-direction": direction,
+          "data-timeout": timeout,
           children: /* @__PURE__ */ jsx(AnimationWrapper, { children: /* @__PURE__ */ jsxs(BackdropContent, { children: [
             /* @__PURE__ */ jsx(DialogAlert, { severity, ...alertProps, children }),
             /* @__PURE__ */ jsx(DialogActions, { children: actions })

package/dist/{css-utils-B9V_AMcv.cjs → css-utils-CH7es90t.cjs}

@@ -1,220 +1,10 @@
 "use strict";
-const material = require("@mui/material");
 const require$$0 = require("react-is");
 const jsxRuntime = require("react/jsx-runtime");
+const material = require("@mui/material");
 const React = require("react");
 const iconsMaterial = require("@mui/icons-material");
 const reactIntl = require("react-intl");
-const COLOR_BLACK = "#2C3032";
-const COLOR_WHITE = "#FFFFFF";
-const COLOR_UNUSED = "#e91e63";
-const baseColors = {
-  common: {
-    black: COLOR_BLACK,
-    white: COLOR_WHITE
-  },
-  neutral: {
-    50: "#f8f9f9",
-    100: "#e1e3e4",
-    200: "#cbcdcf",
-    300: "#b4b8ba",
-    400: "#9da2a6",
-    500: "#868d91",
-    600: "#6f777c",
-    700: "#595f63",
-    800: "#43474a",
-    900: COLOR_BLACK,
-    A100: "#ddddde",
-    A200: "#b9babb",
-    A400: "#7c7e7f",
-    A700: "#16191A"
-  },
-  blue: {
-    100: "#B9DAF9",
-    200: "#5DB2F6",
-    300: "#358BE7",
-    400: "#036FE2",
-    500: "#024D9E"
-  },
-  green: {
-    300: "#6BE2AD",
-    400: "#47DB99",
-    500: "#31996B"
-  },
-  lightGreen: {
-    300: "#8CB24A",
-    400: "#709F1D",
-    500: "#435F11"
-  },
-  indigo: {
-    300: "#34689F",
-    400: "#024388",
-    500: "#012C5A"
-  },
-  orange: {
-    300: "#F4B134",
-    400: "#F29E02",
-    500: "#A96E01"
-  },
-  red: {
-    300: "#CD593B",
-    400: "#C1300B",
-    500: "#872107"
-  },
-  qualitative: {
-    // CARTO colors
-    // TODO: Related discussion https://app.shortcut.com/cartoteam/story/264834/
-    bold: {
-      0: "#7F3C8D",
-      1: "#11A579",
-      2: "#3969AC",
-      3: "#F2B701",
-      4: "#E73F74",
-      5: "#80BA5A",
-      6: "#E68310",
-      7: "#008695",
-      8: "#CF1C90",
-      9: "#f97b72",
-      10: "#4b4b8f",
-      11: "#A5AA99"
-    }
-  },
-  shades: {
-    dark: {
-      90: material.alpha(COLOR_BLACK, 0.9),
-      60: material.alpha(COLOR_BLACK, 0.6),
-      40: material.alpha(COLOR_BLACK, 0.4),
-      25: material.alpha(COLOR_BLACK, 0.25),
-      12: material.alpha(COLOR_BLACK, 0.12),
-      8: material.alpha(COLOR_BLACK, 0.08),
-      4: material.alpha(COLOR_BLACK, 0.04)
-    },
-    light: {
-      90: material.alpha(COLOR_WHITE, 0.9),
-      60: material.alpha(COLOR_WHITE, 0.6),
-      40: material.alpha(COLOR_WHITE, 0.4),
-      25: material.alpha(COLOR_WHITE, 0.25),
-      12: material.alpha(COLOR_WHITE, 0.12),
-      8: material.alpha(COLOR_WHITE, 0.08),
-      4: material.alpha(COLOR_WHITE, 0.04)
-    }
-  }
-};
-const commonPalette = {
-  mode: "light",
-  contrastThreshold: 3,
-  tonalOffset: 0.2,
-  common: { ...baseColors.common },
-  primary: {
-    main: baseColors.blue[400],
-    dark: baseColors.blue[500],
-    light: baseColors.blue[300],
-    contrastText: baseColors.common.white,
-    background: material.alpha(baseColors.blue[400], 0.08),
-    relatedLight: "#EAF2FC",
-    relatedDark: COLOR_UNUSED
-  },
-  secondary: {
-    main: baseColors.green[400],
-    dark: baseColors.green[500],
-    light: baseColors.green[300],
-    contrastText: baseColors.common.black,
-    background: material.alpha(baseColors.green[400], 0.08),
-    relatedLight: "#EFFCF5",
-    relatedDark: COLOR_UNUSED
-  },
-  text: {
-    primary: baseColors.common.black,
-    secondary: baseColors.shades.dark[60],
-    disabled: baseColors.shades.dark[25],
-    hint: baseColors.shades.dark[40]
-  },
-  background: {
-    paper: baseColors.common.white,
-    default: baseColors.neutral[50]
-  },
-  action: {
-    active: baseColors.shades.dark[40],
-    hover: baseColors.shades.dark[8],
-    disabledBackground: baseColors.neutral[100],
-    disabled: baseColors.shades.dark[25],
-    selected: baseColors.shades.dark[12],
-    focus: baseColors.shades.dark[12],
-    activatedOpacity: 0.12,
-    hoverOpacity: 0.04,
-    selectedOpacity: 0.08,
-    disabledOpacity: 0.38,
-    focusOpacity: 0.12
-  },
-  info: {
-    main: baseColors.indigo[400],
-    dark: baseColors.indigo[500],
-    light: baseColors.indigo[300],
-    contrastText: baseColors.common.white,
-    relatedDark: "#0D2B4A",
-    relatedLight: "#E9EEF4",
-    background: COLOR_UNUSED
-  },
-  success: {
-    main: baseColors.lightGreen[400],
-    dark: baseColors.lightGreen[500],
-    light: baseColors.lightGreen[300],
-    contrastText: baseColors.common.white,
-    relatedDark: "#3D541A",
-    relatedLight: "#F2F5EB",
-    background: COLOR_UNUSED
-  },
-  warning: {
-    main: baseColors.orange[400],
-    dark: baseColors.orange[500],
-    light: baseColors.orange[300],
-    contrastText: baseColors.common.black,
-    relatedDark: "#78540F",
-    relatedLight: "#FEF6EA",
-    background: COLOR_UNUSED
-  },
-  error: {
-    main: baseColors.red[400],
-    light: baseColors.red[300],
-    dark: baseColors.red[500],
-    contrastText: baseColors.common.white,
-    relatedDark: "#622215",
-    relatedLight: "#F9EDEA",
-    background: COLOR_UNUSED
-  },
-  grey: {
-    ...baseColors.neutral
-  },
-  divider: baseColors.shades.dark[12],
-  // Custom common colors
-  default: {
-    main: baseColors.neutral[100],
-    dark: baseColors.neutral[200],
-    light: baseColors.neutral[50],
-    outlinedBorder: baseColors.shades.dark[25],
-    background: baseColors.shades.dark[4],
-    relatedLight: COLOR_UNUSED,
-    relatedDark: COLOR_UNUSED,
-    contrastText: COLOR_UNUSED
-  },
-  brand: {
-    navyBlue: "#162945",
-    locationRed: "#EB1510",
-    predictionBlue: "#1785FB",
-    softBlue: "#F2F6F9",
-    appBarMain: "#162945",
-    appBarContrastText: baseColors.common.white
-  },
-  white: {
-    ...baseColors.shades.light
-  },
-  black: {
-    ...baseColors.shades.dark
-  },
-  qualitative: {
-    ...baseColors.qualitative
-  }
-};
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
 }
@@ -5977,7 +5767,6 @@ exports.NOTIFICATION_DURATION_IN_MS = NOTIFICATION_DURATION_IN_MS;
 exports.SPACING = SPACING;
 exports.TablePaginationActions = TablePaginationActions;
 exports.Typography = Typography;
-exports.commonPalette = commonPalette;
 exports.ellipsisStyles = ellipsisStyles;
 exports.getDefaultExportFromCjs = getDefaultExportFromCjs;
 exports.getSpacing = getSpacing;