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

package/dist/{Alert-BZPM5zpX.js → Alert-CHyETxuP.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-C4W0H_uN.cjs → Alert-DyUCYGVG.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-CgF4QdGi.cjs → MenuItem-BLZz_nSA.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-CH7es90t.cjs");
+const cssUtils = require("./css-utils-B9V_AMcv.cjs");
 const StyledMenuItem = material.styled(material.MenuItem, {
   shouldForwardProp: (prop) => !["subtitle", "destructive", "extended", "fixed", "iconColor"].includes(
     prop

package/dist/{MenuItem-DRUK149i.js → MenuItem-CM00TU3e.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, h as MENU_ITEM_SIZE_EXTENDED } from "./css-utils-CjUBRJVK.js";
+import { f as MENU_ITEM_SIZE_DENSE, i as MENU_ITEM_SIZE_EXTENDED } from "./css-utils-Cr7ZvmiF.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-CH7es90t.cjs");
-const Alert$1 = require("../Alert-C4W0H_uN.cjs");
+const cssUtils = require("../css-utils-B9V_AMcv.cjs");
+const Alert$1 = require("../Alert-DyUCYGVG.cjs");
 const ArrowDown = require("../ArrowDown-DJ0vhbsw.cjs");
 const OpenDiagonallyRight = require("../OpenDiagonallyRight-CpL4ROwg.cjs");
-const MenuItem = require("../MenuItem-CgF4QdGi.cjs");
+const MenuItem = require("../MenuItem-BLZz_nSA.cjs");
 require("cartocolor");
 const reactWindow = require("react-window");
 const reactCodemirror2 = require("react-codemirror2");
@@ -876,6 +876,30 @@ function _ToggleButtonGroup({
   );
 }
 const ToggleButtonGroup = React.forwardRef(_ToggleButtonGroup);
+function _CircularProgress({
+  color = "primary",
+  size = 40,
+  thickness = 4,
+  ...otherProps
+}, ref) {
+  const muiColor = color === "neutral" ? void 0 : color;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.CircularProgress,
+    {
+      ...otherProps,
+      ref,
+      size,
+      thickness,
+      color: muiColor,
+      "data-name": "circular-progress",
+      "data-color": color,
+      "data-thickness": thickness
+    }
+  );
+}
+const CircularProgress = React.forwardRef(
+  _CircularProgress
+);
 const Wrapper = material.styled(material.Stack, {
   shouldForwardProp: (prop) => prop !== "contentHeight"
 })(({ contentHeight, theme }) => ({
@@ -885,17 +909,17 @@ const Wrapper = material.styled(material.Stack, {
   width: "100%",
   ...contentHeight && {
     flex: 1,
-    height: contentHeight
+    height: contentHeight,
+    minHeight: contentHeight
   }
 }));
 function _Loader({
   label,
   secondLabel,
-  color = "primary",
-  size = 40,
   contentHeight,
-  labelTypographyProps,
-  secondLabelTypographyProps,
+  labelProps,
+  secondLabelProps,
+  iconProps,
   sx,
   ...otherProps
 }, ref) {
@@ -913,10 +937,11 @@ function _Loader({
       "data-content-height": contentHeight,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          material.CircularProgress,
+          CircularProgress,
           {
-            color,
-            size,
+            color: "primary",
+            size: 40,
+            ...iconProps,
             "aria-labelledby": hasAnyLabel ? "loader-label" : void 0
           }
         ),
@@ -926,7 +951,7 @@ function _Loader({
             {
               variant: "body2",
               color: "textSecondary",
-              ...labelTypographyProps,
+              ...labelProps,
               id: "loader-label",
               children: labelText
             }
@@ -936,7 +961,7 @@ function _Loader({
             {
               variant: "body2",
               color: "textSecondary",
-              ...secondLabelTypographyProps,
+              ...secondLabelProps,
               id: labelText ? void 0 : "loader-label",
               children: secondLabel
             }
@@ -6188,6 +6213,7 @@ exports.Autocomplete = Autocomplete;
 exports.AutocompleteList = AutocompleteList;
 exports.Avatar = Avatar;
 exports.Button = Button;
+exports.CircularProgress = CircularProgress;
 exports.CodeAreaDialog = CodeAreaDialog;
 exports.CodeAreaDialogConfirmation = CodeAreaDialogConfirmation;
 exports.CodeAreaDialogContent = CodeAreaDialogContent;

package/dist/components/index.js

@@ -1,14 +1,14 @@
 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, 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 { 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, 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 { 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 { 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-DRUK149i.js";
+import { M as MenuItem$1 } from "../MenuItem-CM00TU3e.js";
 import "cartocolor";
 import { FixedSizeList } from "react-window";
 import { Controlled, UnControlled } from "react-codemirror2";
@@ -74,7 +74,7 @@ function _Button({
     "c4r.button.opensInNewTab",
     screenReaderText
   );
-  const defaultIconLoader = /* @__PURE__ */ jsx(CircularProgress, { size: 18, color: "inherit" });
+  const defaultIconLoader = /* @__PURE__ */ jsx(CircularProgress$1, { size: 18, color: "inherit" });
   const isDefaultLoading = loading && loadingPosition === void 0;
   const isExternalLink = otherProps.href && external;
   const renderContent = () => {
@@ -876,6 +876,30 @@ function _ToggleButtonGroup({
   );
 }
 const ToggleButtonGroup = forwardRef(_ToggleButtonGroup);
+function _CircularProgress({
+  color = "primary",
+  size = 40,
+  thickness = 4,
+  ...otherProps
+}, ref) {
+  const muiColor = color === "neutral" ? void 0 : color;
+  return /* @__PURE__ */ jsx(
+    CircularProgress$1,
+    {
+      ...otherProps,
+      ref,
+      size,
+      thickness,
+      color: muiColor,
+      "data-name": "circular-progress",
+      "data-color": color,
+      "data-thickness": thickness
+    }
+  );
+}
+const CircularProgress = forwardRef(
+  _CircularProgress
+);
 const Wrapper = styled(Stack, {
   shouldForwardProp: (prop) => prop !== "contentHeight"
 })(({ contentHeight, theme }) => ({
@@ -885,17 +909,17 @@ const Wrapper = styled(Stack, {
   width: "100%",
   ...contentHeight && {
     flex: 1,
-    height: contentHeight
+    height: contentHeight,
+    minHeight: contentHeight
   }
 }));
 function _Loader({
   label,
   secondLabel,
-  color = "primary",
-  size = 40,
   contentHeight,
-  labelTypographyProps,
-  secondLabelTypographyProps,
+  labelProps,
+  secondLabelProps,
+  iconProps,
   sx,
   ...otherProps
 }, ref) {
@@ -915,8 +939,9 @@ function _Loader({
         /* @__PURE__ */ jsx(
           CircularProgress,
           {
-            color,
-            size,
+            color: "primary",
+            size: 40,
+            ...iconProps,
             "aria-labelledby": hasAnyLabel ? "loader-label" : void 0
           }
         ),
@@ -926,7 +951,7 @@ function _Loader({
             {
               variant: "body2",
               color: "textSecondary",
-              ...labelTypographyProps,
+              ...labelProps,
               id: "loader-label",
               children: labelText
             }
@@ -936,7 +961,7 @@ function _Loader({
             {
               variant: "body2",
               color: "textSecondary",
-              ...secondLabelTypographyProps,
+              ...secondLabelProps,
               id: labelText ? void 0 : "loader-label",
               children: secondLabel
             }
@@ -1278,7 +1303,7 @@ function _Autocomplete({
       ...props,
       ref,
       disabled: disabled || loading,
-      popupIcon: loading ? /* @__PURE__ */ jsx(CircularProgress, { size: 18, color: "inherit" }) : /* @__PURE__ */ jsx(ArrowDown, {}),
+      popupIcon: loading ? /* @__PURE__ */ jsx(CircularProgress$1, { size: 18, color: "inherit" }) : /* @__PURE__ */ jsx(ArrowDown, {}),
       "data-name": "autocomplete",
       ListboxProps: {
         "aria-multiselectable": false,
@@ -1775,7 +1800,7 @@ function _CreatableAutocomplete({
       ListboxProps: listboxProps,
       getLimitTagsText: getLimitTagsText ?? getDefaultLimitTagsText,
       disabled: disabled || loading,
-      popupIcon: loading ? /* @__PURE__ */ jsx(CircularProgress, { size: 18, color: "inherit" }) : /* @__PURE__ */ jsx(ArrowDown, {}),
+      popupIcon: loading ? /* @__PURE__ */ jsx(CircularProgress$1, { size: 18, color: "inherit" }) : /* @__PURE__ */ jsx(ArrowDown, {}),
       "data-name": "creatable-autocomplete"
     }
   );
@@ -1854,7 +1879,7 @@ function _MultipleAutocomplete({
       getLimitTagsText: getLimitTagsText ?? getDefaultLimitTagsText,
       disableCloseOnSelect,
       disabled: disabled || loading,
-      popupIcon: loading ? /* @__PURE__ */ jsx(CircularProgress, { size: 18, color: "inherit" }) : /* @__PURE__ */ jsx(ArrowDown, {}),
+      popupIcon: loading ? /* @__PURE__ */ jsx(CircularProgress$1, { size: 18, color: "inherit" }) : /* @__PURE__ */ jsx(ArrowDown, {}),
       "data-name": "multiple-autocomplete"
     }
   );
@@ -5127,7 +5152,7 @@ const SearchIcon = styled(Search, {
 const ClearSearchIcon = styled(Cancel)(({ theme }) => ({
   color: `${theme.palette.text.hint} !important`
 }));
-const LoadingSearchIcon = styled(CircularProgress)(({ theme }) => ({
+const LoadingSearchIcon = styled(CircularProgress$1)(({ theme }) => ({
   svg: {
     color: `${theme.palette.primary.main} !important`
   }
@@ -5788,7 +5813,7 @@ function FilesAction({
   handleOpen,
   inProgress
 }) {
-  return /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: inProgress ? /* @__PURE__ */ jsx(IconButton$1, { "aria-label": "Loading", disabled: true, size, children: /* @__PURE__ */ jsx(CircularProgress, { size: 18 }) }) : !hasFiles ? /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: inProgress ? /* @__PURE__ */ jsx(IconButton$1, { "aria-label": "Loading", disabled: true, size, children: /* @__PURE__ */ jsx(CircularProgress$1, { size: 18 }) }) : !hasFiles ? /* @__PURE__ */ jsx(
     Button$1,
     {
       onClick: handleOpen,
@@ -6183,6 +6208,7 @@ export {
   AutocompleteList,
   Avatar,
   Button,
+  CircularProgress,
   CodeAreaDialog,
   CodeAreaDialogConfirmation,
   CodeAreaDialogContent,

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

@@ -1,10 +1,220 @@
 "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;
 }
@@ -5767,6 +5977,7 @@ 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;