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

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";
@@ -223,7 +223,7 @@ function SplitButton({
     )
   ] });
 }
-const Root$5 = styled(Box)(({ theme }) => ({
+const Root$6 = styled(Box)(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   gap: theme.spacing(0.5)
@@ -257,7 +257,7 @@ function _LabelWithIndicator({
   typographyProps
 }, ref) {
   return /* @__PURE__ */ jsxs(
-    Root$5,
+    Root$6,
     {
       ref,
       "data-testid": dataTestId,
@@ -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
     }
   );
@@ -1998,7 +1929,7 @@ function SecondaryText({ text }) {
     }
   );
 }
-const Root$4 = styled(AppBar$1)(({ theme }) => ({
+const Root$5 = styled(AppBar$1)(({ theme }) => ({
   backgroundColor: theme.palette.brand.appBarMain,
   userSelect: "none",
   "& .MuiTypography-root": {
@@ -2033,7 +1964,7 @@ function _AppBar({
   onClickMenu,
   ...otherProps
 }, ref) {
-  return /* @__PURE__ */ jsx(Root$4, { ...otherProps, ref, "data-name": "app-bar", children: /* @__PURE__ */ jsxs(Toolbar, { children: [
+  return /* @__PURE__ */ jsx(Root$5, { ...otherProps, ref, "data-name": "app-bar", children: /* @__PURE__ */ jsxs(Toolbar, { children: [
     /* @__PURE__ */ jsxs(BrandElements, { children: [
       showBurgerMenu && /* @__PURE__ */ jsx(BurgerMenu, { onClickMenu }),
       brandLogo && /* @__PURE__ */ jsx(BrandLogo, { logo: brandLogo }),
@@ -2713,7 +2644,7 @@ function CodeAreaInput({
     }
   );
 }
-const Root$3 = styled(FormControl)(() => ({
+const Root$4 = styled(FormControl)(() => ({
   display: "flex",
   flexDirection: "column",
   flex: 1
@@ -2905,7 +2836,7 @@ function CodeAreaField({
   const readOnly = (options == null ? void 0 : options.readOnly) ?? false;
   const lineNumbers = (options == null ? void 0 : options.lineNumbers) ?? true;
   return /* @__PURE__ */ jsxs(
-    Root$3,
+    Root$4,
     {
       size,
       error,
@@ -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
@@ -3470,7 +3411,7 @@ function DialogAlert({
 }) {
   return /* @__PURE__ */ jsx(StyledAlert, { severity, ...otherProps, "data-name": "dialog-alert", children });
 }
-const Root$2 = styled(Box, {
+const Root$3 = styled(Box, {
   shouldForwardProp: (prop) => !["dark", "hasChildren"].includes(prop)
 })(({ dark, hasChildren, theme }) => ({
   flex: "0 0 auto",
@@ -3538,7 +3479,7 @@ function DialogFooter({
     topContent,
     !!alertContent && /* @__PURE__ */ jsx(DividerTop, {}),
     /* @__PURE__ */ jsxs(
-      Root$2,
+      Root$3,
       {
         ...otherProps,
         dark,
@@ -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 })
@@ -3627,7 +3575,7 @@ function DialogConfirmation({
     }
   );
 }
-const Root$1 = styled(Box)(({ theme }) => ({
+const Root$2 = styled(Box)(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
@@ -3708,7 +3656,7 @@ function DialogStepper({
   stepsLabels,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(Root$1, { ...props, "data-name": "dialog-stepper", children: /* @__PURE__ */ jsx(Box, { sx: { display: "flex" }, children: stepsLabels.map((stepLabel, idx) => {
+  return /* @__PURE__ */ jsx(Root$2, { ...props, "data-name": "dialog-stepper", children: /* @__PURE__ */ jsx(Box, { sx: { display: "flex" }, children: stepsLabels.map((stepLabel, idx) => {
     const step = idx + 1;
     const isCurrent = step === currentStep;
     const isCompleted = step < currentStep;
@@ -3994,7 +3942,7 @@ function ClearButton({
     }
   ) });
 }
-const Root = styled(Box, {
+const Root$1 = styled(Box, {
   shouldForwardProp: (prop) => !["size", "variant", "readOnly"].includes(prop)
 })(({ size, variant, readOnly, theme }) => ({
   // There is no specific slot to change TextField styles at DatePicker level, so we need to wrap our component to isolate this override. https://mui.com/x/react-date-pickers/date-picker/#customization
@@ -4034,7 +3982,7 @@ function DateFieldContainer({
   readOnly,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(Root, { ...props, size, variant, readOnly, children });
+  return /* @__PURE__ */ jsx(Root$1, { ...props, size, variant, readOnly, children });
 }
 function DatePicker({
   handleClear,
@@ -4718,6 +4666,124 @@ function DateTimePicker({
     }
   );
 }
+const EMPTY_STATE_WIDTH = 576;
+const Root = styled(Stack, {
+  shouldForwardProp: (prop) => prop !== "size" && prop !== "spacing" && prop !== "contentHeight" && prop !== "contentWidth"
+})(
+  ({ size = "medium", spacing, contentHeight, contentWidth, theme }) => ({
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: theme.spacing(spacing ?? (size === "small" ? 1 : 2)),
+    maxWidth: contentWidth ?? EMPTY_STATE_WIDTH,
+    height: contentHeight,
+    minHeight: contentHeight,
+    margin: "0 auto"
+  })
+);
+const IconWrapper = styled(Box, {
+  shouldForwardProp: (prop) => prop !== "size" && prop !== "iconSize" && prop !== "iconColor"
+})(({ size, iconSize, iconColor = "default", theme }) => {
+  const finalIconSize = iconSize ?? (size === "small" ? theme.spacing(5) : theme.spacing(6));
+  return {
+    display: "flex",
+    ".MuiSvgIcon-root": {
+      width: finalIconSize,
+      height: finalIconSize,
+      fontSize: finalIconSize,
+      ...iconColor === "primary" && {
+        color: theme.palette.primary.relatedLight
+      },
+      ...iconColor === "secondary" && {
+        color: theme.palette.secondary.relatedLight
+      },
+      ...iconColor === "default" && {
+        color: theme.palette.text.disabled
+      }
+    }
+  };
+});
+const TextContent = styled(Stack)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  gap: theme.spacing(0.5),
+  textAlign: "center"
+}));
+const Actions = styled(Stack, {
+  shouldForwardProp: (prop) => prop !== "size" && prop !== "spacing"
+})(({ size = "medium", spacing, theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(spacing ?? (size === "small" ? 1 : 2)),
+  marginTop: theme.spacing(size === "small" ? 1 : 2),
+  ".MuiButton-root + .MuiButton-root": {
+    marginLeft: 0
+  }
+}));
+function _EmptyState({
+  icon,
+  title,
+  description,
+  actions,
+  children,
+  size = "medium",
+  spacing,
+  iconProps,
+  contentWidth = EMPTY_STATE_WIDTH,
+  contentHeight,
+  sx,
+  ...otherProps
+}, ref) {
+  const hasAnyTextContent = title || description;
+  const isSmall = size === "small";
+  const iconSize = (iconProps == null ? void 0 : iconProps.size) ?? (isSmall ? 40 : 48);
+  const iconColor = (iconProps == null ? void 0 : iconProps.color) ?? "default";
+  return /* @__PURE__ */ jsxs(
+    Root,
+    {
+      ref,
+      alignItems: "center",
+      size,
+      spacing,
+      contentHeight,
+      contentWidth,
+      "data-name": "empty-state",
+      sx,
+      ...otherProps,
+      "data-size": size,
+      "data-spacing": spacing,
+      "data-content-height": contentHeight,
+      "data-content-width": contentWidth,
+      "data-icon-size": iconSize,
+      "data-icon-color": iconColor,
+      children: [
+        icon && /* @__PURE__ */ jsx(IconWrapper, { size, iconSize, iconColor, children: icon }),
+        hasAnyTextContent && /* @__PURE__ */ jsxs(TextContent, { children: [
+          title && /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: isSmall ? "body2" : "body1",
+              color: "textSecondary",
+              children: title
+            }
+          ),
+          description && /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: isSmall ? "caption" : "body2",
+              color: "textSecondary",
+              children: description
+            }
+          )
+        ] }),
+        actions && /* @__PURE__ */ jsx(Actions, { size, spacing, children: actions }),
+        children
+      ]
+    }
+  );
+}
+const EmptyState = forwardRef(_EmptyState);
 const DEFAULT_ITEMS = [{ outlinedBullet: false, value: "" }];
 const Content$2 = styled("ul")(({ theme }) => ({
   listStyle: "none",
@@ -6235,6 +6301,7 @@ export {
   DialogPaper,
   DialogStepper,
   EllipsisWithTooltip,
+  EmptyState,
   FilterDropdown,
   FilterDropdownMenuItem,
   IconButton,

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;