@carto/meridian-ds 4.2.0 → 4.2.1-alpha.693ea7c.297

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+- chore(deps): upgrade MUI core to v6 + prep peers/react-is [sc-563129] [#484](https://github.com/CartoDB/meridian-ds/pull/484)
+
 ## 4.0
 
 ### 4.2.0

package/dist/{TablePaginationActions-BvKjTAmB.js → TablePaginationActions-DTpwmDwH.js}

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { styled, MenuItem as MenuItem$1, Tooltip, CircularProgress, IconButton as IconButton$1, Box } from "@mui/material";
-import { d as MENU_ITEM_SIZE_DENSE, M as MENU_ITEM_SIZE_EXTENDED, e as ICON_SIZE_LARGE, a as ICON_SIZE_MEDIUM, I as ICON_SIZE_SMALL } from "./palette-utils-d-9NY8qw.js";
+import { d as MENU_ITEM_SIZE_DENSE, M as MENU_ITEM_SIZE_EXTENDED, e as ICON_SIZE_LARGE, a as ICON_SIZE_MEDIUM, I as ICON_SIZE_SMALL } from "./palette-utils-Ccd-r_Nr.js";
 import { KeyboardArrowLeftOutlined, KeyboardArrowRightOutlined } from "@mui/icons-material";
 import { useIntl } from "react-intl";
 import { u as useImperativeIntl } from "./useImperativeIntl-BUw_LXAO.js";

package/dist/{TablePaginationActions-WuqMxOyM.cjs → TablePaginationActions-Dp3-3n1D.cjs}

@@ -2,7 +2,7 @@
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const material = require("@mui/material");
-const paletteUtils = require("./palette-utils-DX1R_i9N.cjs");
+const paletteUtils = require("./palette-utils-Dt4yj7Pv.cjs");
 const iconsMaterial = require("@mui/icons-material");
 const reactIntl = require("react-intl");
 const useImperativeIntl = require("./useImperativeIntl-lvkv1UNL.cjs");

package/dist/components/index.cjs

@@ -3,11 +3,11 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const material = require("@mui/material");
-const paletteUtils = require("../palette-utils-DX1R_i9N.cjs");
+const paletteUtils = require("../palette-utils-Dt4yj7Pv.cjs");
 const iconsMaterial = require("@mui/icons-material");
 const ArrowDown = require("../ArrowDown-84Oc8r9k.cjs");
 const ReactWindow = require("react-window");
-const TablePaginationActions = require("../TablePaginationActions-WuqMxOyM.cjs");
+const TablePaginationActions = require("../TablePaginationActions-Dp3-3n1D.cjs");
 const Search = require("../Search-BsaXrSzs.cjs");
 require("cartocolor");
 const reactCodemirror2 = require("react-codemirror2");

package/dist/components/index.js

@@ -2,12 +2,12 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import React, { forwardRef, useState, useRef, useEffect, useMemo, createElement, Fragment as Fragment$1, useCallback, useImperativeHandle, createContext, useContext } from "react";
 import { styled, Button as Button$1, Box, CircularProgress as CircularProgress$1, Tooltip, Popper, Grow, Paper, ClickAwayListener, MenuList as MenuList$1, MenuItem, ButtonGroup as ButtonGroup$1, TextField, InputAdornment, FormControl, InputLabel, FormHelperText, Select, Checkbox, Link as Link$1, ListItemText as ListItemText$1, IconButton as IconButton$1, ToggleButtonGroup as ToggleButtonGroup$1, Stack, Autocomplete as Autocomplete$1, Divider, ListItemIcon as ListItemIcon$1, createFilterOptions, alpha, useTheme, Toolbar as Toolbar$1, AppBar as AppBar$1, Dialog as Dialog$1, Chip as Chip$1, DialogTitle as DialogTitle$1, DialogContent as DialogContent$1, Fade, AlertTitle, Alert as Alert$2, DialogActions as DialogActions$1, Slide, Accordion, AccordionSummary, AccordionDetails, Avatar as Avatar$1, Menu as Menu$2, useMediaQuery, Portal, Snackbar as Snackbar$1, List as List$2, ListItemButton as ListItemButton$1, ListItem as ListItem$1, ListSubheader as ListSubheader$1, Typography as Typography$1, Popover } from "@mui/material";
 import { ListItemAvatar, ListItemSecondaryAction } from "@mui/material";
-import { T as Typography, I as ICON_SIZE_SMALL, a as ICON_SIZE_MEDIUM, M as MENU_ITEM_SIZE_EXTENDED, b as MENU_ITEM_SIZE_DEFAULT, c as MENU_LIST_MAX_SIZE, d as MENU_ITEM_SIZE_DENSE, A as APPBAR_SIZE, e as ICON_SIZE_LARGE, N as NOTIFICATION_DURATION_IN_MS, L as LIST_MAX_SIZE, f as LIST_ITEM_SIZE_DENSE, g as LIST_ITEM_SIZE_DEFAULT, h as LIST_OVERSCAN_ITEMS_COUNT, F as FontWeight, r as resolvePalettePath } from "../palette-utils-d-9NY8qw.js";
+import { T as Typography, I as ICON_SIZE_SMALL, a as ICON_SIZE_MEDIUM, M as MENU_ITEM_SIZE_EXTENDED, b as MENU_ITEM_SIZE_DEFAULT, c as MENU_LIST_MAX_SIZE, d as MENU_ITEM_SIZE_DENSE, A as APPBAR_SIZE, e as ICON_SIZE_LARGE, N as NOTIFICATION_DURATION_IN_MS, L as LIST_MAX_SIZE, f as LIST_ITEM_SIZE_DENSE, g as LIST_ITEM_SIZE_DEFAULT, h as LIST_OVERSCAN_ITEMS_COUNT, F as FontWeight, r as resolvePalettePath } from "../palette-utils-Ccd-r_Nr.js";
 import { OpenInNewOutlined, VisibilityOffOutlined, VisibilityOutlined, Cancel, ContentCopyOutlined, AddCircleOutlineOutlined, MenuOutlined, MoreVertOutlined, HelpOutline, ErrorOutline, ArrowBackOutlined, CloseOutlined, Check, TodayOutlined, StopCircleOutlined, ArrowUpwardOutlined } from "@mui/icons-material";
 import { F as ForwardedComponent$1 } from "../ArrowDown-Bho9Ssnw.js";
 import * as ReactWindow from "react-window";
-import { u as useTranslationWithFallback, I as IconButton, M as MenuItem$1, g as getThemeColor, e as ellipsisStyles, S as SVG_SELECTOR } from "../TablePaginationActions-BvKjTAmB.js";
-import { T } from "../TablePaginationActions-BvKjTAmB.js";
+import { u as useTranslationWithFallback, I as IconButton, M as MenuItem$1, g as getThemeColor, e as ellipsisStyles, S as SVG_SELECTOR } from "../TablePaginationActions-DTpwmDwH.js";
+import { T } from "../TablePaginationActions-DTpwmDwH.js";
 import { F as ForwardedComponent, a as ForwardedComponent$2, b as ForwardedComponent$3, c as ForwardedComponent$4 } from "../Search-DXfTNnxj.js";
 import "cartocolor";
 import { Controlled, UnControlled } from "react-codemirror2";

package/dist/metadata.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.2.0",
+  "version": "4.2.1-alpha.693ea7c.297",
   "conventions": "# Meridian usage conventions (for code-generating agents)\n\nSystem-level rules an agent should apply across all components.\n\nMeridian is the source of truth: when an existing codebase pattern contradicts Meridian, follow Meridian — don't replicate the contradicting local pattern.\n\n## Choosing a component\n\n- Don't hand-roll what the design system already provides. Before writing a\n  custom component, a styled wrapper, or a block of primitives (a modal,\n  chip/tag, card, empty state, dropdown, tooltip, copy-to-clipboard input,\n  etc.), confirm no Meridian component covers it — reuse or extend the existing one instead of rebuilding it.\n- Prefer a Meridian component over a bare MUI one whenever a Meridian wrapper\n  exists — the wrappers carry CARTO theming, a11y defaults, and narrowed APIs. MUI is correct for layout primitives (`Box`/`Grid`/`Stack`/`Container`) and for gaps Meridian doesn't fill (e.g. date pickers); \"prefer Meridian\" is not \"never MUI\".\n- Resolve \"which component\" by reading each one's `description` + `keywords`,\n  then confirm with its `decisionTree` (the conditions that point elsewhere) and `limitations` (what it lacks — check before you downgrade to it).\n  Don't infer selection from prop lists.\n\n## Icons\n\n- Source icons from Meridian's custom-icons first, then `@mui/icons-material`;\n  add a local SVG only when neither has an equivalent. Don't duplicate an icon\n  the design system already ships.\n- Find the right custom icon with `meridian_list_icons` — match by name or keyword (e.g. \"warehouse\" → `Bigquery`), import it from `@carto/meridian-ds/custom-icons`, and render `<Name />`. Every icon shares one prop type, `CustomIconProps` (MUI `SvgIconProps` — `color`/`fontSize`/`sx` — plus `width`/`height`).\n- To confirm a shortlisted icon by sight (or match an icon in a design you're implementing), call `meridian_get_screenshot` with `name: 'icons'` and Read the returned image path — a labeled grid of every icon.\n- Use the standard icon sizes — small 12px, medium (default) 18px, large 24px;\n  a value off this scale (e.g. 16, 20) needs design sign-off. Prefer the\n  outlined variants.\n- A new SVG must inherit, not bake in: set `fill='currentColor'` so it takes\n  the parent's color, and use the standard size — don't hardcode\n  color/opacity/dimensions.\n- For an icon color outside the palette `color` set, pass a theme token via\n  `htmlColor` (e.g. `htmlColor={theme.palette.text.secondary}`) — never a\n  hardcoded hex.\n\n## Accessibility\n\n- Any icon-only control needs an accessible name: `tooltip` or `aria-label`.\n- Don't disable a control without telling the user why — pair a disabled action with a tooltip explaining the requirement.\n- An `aria-label` must be human-readable text describing the control, not a test id in disguise — use a separate test hook for that.\n- User-facing strings (labels, `aria-label`, placeholders, messages) go through the app's i18n layer, not hardcoded literals.\n\n## Props\n\n- Two sources, both pinned to the installed `@carto/meridian-ds`: **exact props / types / JSDoc** come from the package's **type declarations** — read the `<Name>.d.ts` directly — while the **`meridian-design-system` MCP** (`meridian_*` tools) covers what types can't: which component, when, gotchas, and real examples.\n- A component's curation lists the high-value inherited MUI props worth knowing (`curation.mui`, e.g. `color`/`variant`/`size`); the rest of MUI's surface is available but rarely needed.\n- Don't use `sx`/inline styles to override a Meridian component's visual design (colors, typography, borders, sizing) — use its documented props and the theme tokens. (`sx` for layout/spacing on primitives is fine — see Styling.)\n- If no prop covers the visual change you need, treat it as a design-system gap: request the variant/behavior upstream in Meridian rather than permanently overriding the component locally — a local `styled()` of a Meridian component is a smell, not a fix.\n\n## Styling\n\n- Use theme tokens, never hardcoded values: colors from the palette (`text.*`, `background.*`, `divider`, semantic `*.main`) and spacing from the theme spacing scale — no raw hex/rgb or pixel literals for color or spacing. Use integer steps on the spacing scale (`theme.spacing(n)`, or `sx` numeric spacing like `px: 2` / `mt: 3` which resolve to it) — not fractional steps or raw px. Get the exact values — palette keys, spacing base, type ramp, `shape.borderRadius`, breakpoints, shadows — from `meridian_get_tokens`.\n- Text uses `<Typography variant=…>` (with the `weight` prop for emphasis), never hardcoded `fontSize`/`fontWeight`/`lineHeight`/`fontFamily`.\n- Meridian's type scale is custom and does not match MUI defaults (e.g. `body2`/`caption` differ from MUI's sizes, and there are Meridian-only variants like `code1`/`code2`/`code3` and `overlineDelicate`). Pick the variant by role from Typography's variant list (`meridian_get_examples('Typography')`) — don't assume a px size or map px → variant yourself.\n- `sx` is the right tool for one-off layout/spacing on primitives (`Box`/`Grid`/`Stack`), not the deprecated MUI system props\n  (`<Box px={2}>` → `<Box sx={{ px: 2 }}>`). This is layout, distinct from restyling a Meridian component (see Props).\n\n## Examples\n\n- Never invent example code when a story exists — use the component's real story source (`meridian_get_examples`). The lead Usage story is the copy-paste starting point; the later stories are illustrative (variants, edge cases) and may carry story-arg shells, so don't copy one wholesale as your baseline.\n",
   "components": [
     {

package/dist/palette-utils-Ccd-r_Nr.js

@@ -0,0 +1,357 @@
+import { jsx } from "react/jsx-runtime";
+import { Typography as Typography$1, alpha } from "@mui/material";
+import { forwardRef } from "react";
+import { createSpacing } from "@mui/system";
+import * as cartoColors from "cartocolor";
+const FontWeight = {
+  regular: 400,
+  medium: 500,
+  strong: 600
+};
+function _Typography({ italic, weight, style, children, ...otherProps }, ref) {
+  const fontConfiguration = {
+    fontWeight: FontWeight[weight],
+    fontStyle: italic ? "italic" : void 0
+  };
+  return /* @__PURE__ */ jsx(
+    Typography$1,
+    {
+      ...otherProps,
+      ref,
+      style: {
+        ...fontConfiguration,
+        ...style
+      },
+      "data-name": "typography",
+      children
+    }
+  );
+}
+const Typography = forwardRef(_Typography);
+const SPACING = 8;
+const BREAKPOINTS = {
+  XS: 320,
+  SM: 600,
+  MD: 960,
+  LG: 1280,
+  XL: 1600
+};
+const getSpacing = createSpacing(SPACING);
+const ICON_SIZE_SMALL = getSpacing(1.5);
+const ICON_SIZE_MEDIUM = getSpacing(2.25);
+const ICON_SIZE_LARGE = getSpacing(3);
+const APPBAR_SIZE = getSpacing(6);
+const NOTIFICATION_DURATION_IN_MS = 6e3;
+const MENU_LIST_MAX_SIZE = 312;
+const MENU_ITEM_SIZE_DENSE = 24;
+const MENU_ITEM_SIZE_DEFAULT = 32;
+const MENU_ITEM_SIZE_EXTENDED = 48;
+const LIST_ITEM_MIN_SIZE = 32;
+const LIST_ITEM_SIZE_DENSE = 52;
+const LIST_ITEM_SIZE_DEFAULT = 68;
+const LIST_MAX_SIZE = 312;
+const LIST_OVERSCAN_ITEMS_COUNT = 5;
+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: {
+    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: alpha(COLOR_BLACK, 0.9),
+      60: alpha(COLOR_BLACK, 0.6),
+      40: alpha(COLOR_BLACK, 0.4),
+      25: alpha(COLOR_BLACK, 0.25),
+      12: alpha(COLOR_BLACK, 0.12),
+      8: alpha(COLOR_BLACK, 0.08),
+      4: alpha(COLOR_BLACK, 0.04)
+    },
+    light: {
+      90: alpha(COLOR_WHITE, 0.9),
+      60: alpha(COLOR_WHITE, 0.6),
+      40: alpha(COLOR_WHITE, 0.4),
+      25: alpha(COLOR_WHITE, 0.25),
+      12: alpha(COLOR_WHITE, 0.12),
+      8: alpha(COLOR_WHITE, 0.08),
+      4: 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: 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: alpha(baseColors.green[400], 0.08),
+    relatedLight: "#EFFCF5",
+    relatedDark: COLOR_UNUSED
+  },
+  text: {
+    primary: baseColors.common.black,
+    secondary: alpha(COLOR_BLACK, 0.7),
+    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
+  },
+  neutral: {
+    main: baseColors.neutral[100],
+    dark: baseColors.neutral[200],
+    light: baseColors.neutral[50],
+    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 getPaletteFromCartoColors(name, domainSize) {
+  var _a;
+  const palette = cartoColors[name];
+  let paletteIndex = domainSize;
+  if (!palette) {
+    throw new Error(
+      `Palette "${name}" not found. Expected a CARTOColors string`
+    );
+  }
+  const palettesColorVariants = Object.keys(palette).filter((p) => p !== "tags").map(Number);
+  const longestPaletteIndex = Math.max(...palettesColorVariants);
+  const smallestPaletteIndex = Math.min(...palettesColorVariants);
+  if (!Number.isInteger(domainSize) || domainSize > longestPaletteIndex) {
+    paletteIndex = longestPaletteIndex;
+  } else if (domainSize < smallestPaletteIndex) {
+    paletteIndex = smallestPaletteIndex;
+  }
+  let colors = palette[paletteIndex];
+  if ((_a = palette.tags) == null ? void 0 : _a.includes("qualitative")) {
+    colors = colors == null ? void 0 : colors.slice(0, -1);
+  }
+  return colors;
+}
+function getPalette(colors, domainSize) {
+  if (typeof colors === "string") {
+    return getPaletteFromCartoColors(colors, domainSize);
+  } else {
+    return colors.map((c) => {
+      if (Array.isArray(c)) {
+        const [r, g, b] = c;
+        return rgbToHex(r, g, b);
+      } else {
+        return c;
+      }
+    });
+  }
+}
+function rgbToHex(r, g, b) {
+  return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+}
+function getCartoColorStylePropsForItem(theme, index) {
+  var _a;
+  const palette = (_a = commonPalette == null ? void 0 : commonPalette.qualitative) == null ? void 0 : _a.bold;
+  const colors = Object.values(palette ?? {});
+  const chosenIndex = index % colors.length;
+  return {
+    backgroundColor: colors[chosenIndex],
+    color: theme.palette.getContrastText(colors[chosenIndex])
+  };
+}
+const resolvePalettePath = (theme, path, fallback) => {
+  const resolvedValue = path.split(".").reduce((acc, part) => {
+    if (acc && typeof acc === "object" && part in acc) {
+      return acc[part];
+    }
+    return void 0;
+  }, theme.palette);
+  if (typeof resolvedValue === "string") {
+    return resolvedValue;
+  }
+  return theme.palette.text.secondary;
+};
+export {
+  APPBAR_SIZE as A,
+  BREAKPOINTS as B,
+  FontWeight as F,
+  ICON_SIZE_SMALL as I,
+  LIST_MAX_SIZE as L,
+  MENU_ITEM_SIZE_EXTENDED as M,
+  NOTIFICATION_DURATION_IN_MS as N,
+  SPACING as S,
+  Typography as T,
+  ICON_SIZE_MEDIUM as a,
+  MENU_ITEM_SIZE_DEFAULT as b,
+  MENU_LIST_MAX_SIZE as c,
+  MENU_ITEM_SIZE_DENSE as d,
+  ICON_SIZE_LARGE as e,
+  LIST_ITEM_SIZE_DENSE as f,
+  LIST_ITEM_SIZE_DEFAULT as g,
+  LIST_OVERSCAN_ITEMS_COUNT as h,
+  commonPalette as i,
+  getSpacing as j,
+  LIST_ITEM_MIN_SIZE as k,
+  getCartoColorStylePropsForItem as l,
+  getPalette as m,
+  resolvePalettePath as r
+};