@carto/meridian-ds 2.6.2-alpha.0 → 2.7.0-alpha-loader.2

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, 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, 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, Grid, 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, N as NOTIFICATION_DURATION_IN_MS, e as ellipsisStyles } from "../css-utils-lmkjeCdF.js";
-import { a } from "../css-utils-lmkjeCdF.js";
-import { S as ScreenReaderOnly, A as Alert$1 } from "../Alert-1A6BG2aO.js";
-import { L } from "../Alert-1A6BG2aO.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-DgHhHW-j.js";
+import { M as MenuItem$1 } from "../MenuItem-DRUK149i.js";
 import "cartocolor";
 import { FixedSizeList } from "react-window";
 import { Controlled, UnControlled } from "react-codemirror2";
@@ -41,6 +41,7 @@ import { useIntl } from "react-intl";
 import { PickersDay as PickersDay$1 } from "@mui/x-date-pickers";
 import { TimePicker as TimePicker$1 } from "@mui/x-date-pickers/TimePicker";
 import { DateTimePicker as DateTimePicker$1 } from "@mui/x-date-pickers/DateTimePicker";
+import { S as Search } from "../Search-C7wkXu3f.js";
 import DOMPurify from "dompurify";
 const IndicatorIcon = styled(Box)({
   position: "absolute",
@@ -875,6 +876,78 @@ function _ToggleButtonGroup({
   );
 }
 const ToggleButtonGroup = forwardRef(_ToggleButtonGroup);
+const StyledGrid = styled(Grid, {
+  shouldForwardProp: (prop) => prop !== "fullHeight" && prop !== "height"
+})(({ fullHeight, theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: theme.spacing(1.5),
+  ...fullHeight && {
+    flex: 1,
+    height: "100%",
+    width: "100%"
+  }
+}));
+function _Loader({
+  label,
+  secondLabel,
+  color = "primary",
+  size = 40,
+  fullHeight,
+  labelTypographyProps,
+  secondLabelTypographyProps,
+  ...otherProps
+}, ref) {
+  const labelText = useTranslationWithFallback("c4r.utils.loader.label", label);
+  const hasAnyLabel = labelText || secondLabel;
+  return /* @__PURE__ */ jsxs(
+    StyledGrid,
+    {
+      container: true,
+      fullHeight,
+      ...otherProps,
+      ref,
+      "aria-busy": true,
+      "data-name": "loader",
+      "data-full-height": fullHeight,
+      children: [
+        /* @__PURE__ */ jsx(
+          CircularProgress,
+          {
+            color,
+            size,
+            "aria-labelledby": hasAnyLabel ? "loader-label" : void 0
+          }
+        ),
+        hasAnyLabel && /* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "center", children: [
+          labelText && /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "body2",
+              color: "textSecondary",
+              ...labelTypographyProps,
+              id: "loader-label",
+              children: labelText
+            }
+          ),
+          secondLabel && /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "body2",
+              color: "textSecondary",
+              ...secondLabelTypographyProps,
+              id: labelText ? void 0 : "loader-label",
+              children: secondLabel
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+const Loader = forwardRef(_Loader);
 async function copyString(value) {
   return await navigator.clipboard.writeText(value);
 }
@@ -5039,6 +5112,294 @@ function _FilterDropdown({
 const FilterDropdown = forwardRef(
   _FilterDropdown
 );
+const SearchIcon = styled(Search, {
+  shouldForwardProp: (prop) => prop !== "minimized" && prop !== "disabled"
+})(
+  ({ theme, minimized, disabled }) => ({
+    cursor: !disabled && minimized ? "pointer" : "inherit",
+    width: ICON_SIZE_MEDIUM,
+    height: ICON_SIZE_MEDIUM,
+    path: {
+      fillOpacity: 1,
+      fill: disabled ? theme.palette.text.disabled : theme.palette.text.secondary
+    }
+  })
+);
+const ClearSearchIcon = styled(Cancel)(({ theme }) => ({
+  color: `${theme.palette.text.hint} !important`
+}));
+const LoadingSearchIcon = styled(CircularProgress)(({ theme }) => ({
+  svg: {
+    color: `${theme.palette.primary.main} !important`
+  }
+}));
+const SearchInputAdornment = styled(InputAdornment, {
+  shouldForwardProp: (prop) => prop !== "minimized" && prop !== "expanded"
+})(
+  ({ theme, minimized, expanded }) => ({
+    // Start adornment
+    transition: theme.transitions.create(["width", "margin"], {
+      easing: theme.transitions.easing.easeInOut,
+      duration: theme.transitions.duration.short
+    }),
+    "&.MuiInputAdornment-positionStart": {
+      marginLeft: minimized ? theme.spacing(2) : void 0,
+      "&.MuiInputAdornment-sizeSmall": {
+        marginLeft: minimized ? theme.spacing(1) : void 0
+      }
+    },
+    // End adornment
+    "&.MuiInputAdornment-positionEnd": {
+      minWidth: theme.spacing(4),
+      "&.MuiInputAdornment-sizeSmall": {
+        minWidth: theme.spacing(3)
+      }
+    },
+    ...expanded && !minimized && {
+      "&.MuiInputAdornment-root": {
+        minWidth: theme.spacing(9),
+        "&.MuiInputAdornment-sizeSmall": {
+          minWidth: theme.spacing(7)
+        }
+      }
+    }
+  })
+);
+const SearchFieldBase = styled(TextField, {
+  shouldForwardProp: (prop) => prop !== "minimized" && prop !== "isInputFocused" && prop !== "emphasis"
+})(({ theme, emphasis = "filled", minimized, isInputFocused }) => ({
+  "&.MuiTextField-root .MuiInputBase-root": {
+    paddingRight: theme.spacing(1),
+    transition: theme.transitions.create(["width", "padding"], {
+      easing: theme.transitions.easing.easeInOut,
+      duration: theme.transitions.duration.standard
+    }),
+    "&.MuiInputBase-sizeSmall": {
+      paddingRight: theme.spacing(0.5)
+    },
+    "&:before": {
+      border: "none !important",
+      "&:hover": {
+        border: "none !important"
+      }
+    },
+    // Input
+    "& .MuiInputBase-input": {
+      pointerEvents: isInputFocused ? "auto" : "none",
+      // Fix Chrome scroll issue https://issues.chromium.org/issues/41245282
+      transition: theme.transitions.create("width", {
+        easing: theme.transitions.easing.easeInOut,
+        duration: theme.transitions.duration.standard
+      })
+    },
+    // Error state
+    "&.Mui-error": {
+      "&::after": {
+        borderColor: "transparent !important"
+      }
+    },
+    ...minimized && {
+      display: "flex",
+      alignItems: "center",
+      padding: 0,
+      width: theme.spacing(6),
+      cursor: "pointer",
+      "& .MuiInputBase-input": {
+        width: 0
+      },
+      "&.MuiInputBase-sizeSmall": {
+        padding: 0,
+        width: theme.spacing(4)
+      }
+    }
+  },
+  // Variants
+  ...emphasis === "filled" && {
+    "& .MuiInputBase-root": {
+      backgroundColor: minimized ? "transparent !important" : void 0,
+      "&:hover": {
+        backgroundColor: `${theme.palette.action.hover} !important`
+      },
+      // not disabled
+      "&:not(.Mui-disabled):hover": {
+        backgroundColor: `${theme.palette.action.hover} !important`
+      }
+    }
+  },
+  ...emphasis === "transparent" && {
+    "& .MuiInputBase-root": {
+      backgroundColor: "transparent !important",
+      "&:hover": {
+        backgroundColor: minimized ? `${theme.palette.action.hover} !important` : "transparent !important"
+      },
+      "&.Mui-disabled": {
+        backgroundColor: "transparent !important"
+      }
+    }
+  },
+  ...emphasis === "floating" && {
+    "& .MuiInputBase-root": {
+      backgroundColor: `${theme.palette.background.paper} !important`,
+      boxShadow: theme.shadows[1],
+      "&:hover": {
+        backgroundColor: minimized ? `${theme.palette.action.hover} !important` : `${theme.palette.background.paper} !important`
+      },
+      "&.Mui-disabled": {
+        backgroundColor: `${theme.palette.background.paper} !important`
+      }
+    }
+  }
+}));
+const SearchFieldEndAdornment = ({
+  disabled,
+  showClearButton = true,
+  loading,
+  size,
+  endAdornment,
+  clearButton,
+  clearButtonLabel,
+  onClear
+}) => {
+  if (!showClearButton && !endAdornment && !loading) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    SearchInputAdornment,
+    {
+      position: "end",
+      expanded: Boolean(endAdornment && showClearButton),
+      children: /* @__PURE__ */ jsxs(
+        Stack,
+        {
+          direction: "row",
+          spacing: 1,
+          sx: {
+            alignItems: "center"
+          },
+          children: [
+            loading ? /* @__PURE__ */ jsx(LoadingSearchIcon, { size: ICON_SIZE_MEDIUM }) : showClearButton ? clearButton ?? /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                onClick: onClear,
+                size,
+                color: "default",
+                disabled,
+                tooltip: clearButtonLabel,
+                "aria-label": clearButtonLabel,
+                icon: /* @__PURE__ */ jsx(ClearSearchIcon, {})
+              }
+            ) : null,
+            endAdornment
+          ]
+        }
+      )
+    }
+  );
+};
+const SearchFieldStartAdornment = ({
+  minimized,
+  loading,
+  startAdornment,
+  disabled
+}) => {
+  return /* @__PURE__ */ jsx(SearchInputAdornment, { position: "start", minimized, children: loading && minimized ? /* @__PURE__ */ jsx(LoadingSearchIcon, { size: ICON_SIZE_MEDIUM }) : startAdornment || /* @__PURE__ */ jsx(SearchIcon, { disabled, minimized }) });
+};
+function _SearchField({
+  value,
+  defaultValue,
+  placeholder,
+  disabled,
+  minimized = false,
+  loading = false,
+  variant = "filled",
+  size = "small",
+  InputProps,
+  inputProps,
+  startAdornment,
+  endAdornment,
+  onFocus,
+  onBlur,
+  onChange,
+  onClick,
+  onResetSearch,
+  showClearButton = true,
+  clearButtonLabel,
+  clearButton,
+  ...otherProps
+}, ref) {
+  const [isInputFocused, setIsInputFocused] = useState(false);
+  const clearButtonVisibility = !disabled && Boolean(value ?? defaultValue) && showClearButton;
+  const clearButtonLabelValue = useTranslationWithFallback(
+    "c4r.button.clear",
+    clearButtonLabel
+  );
+  const handleFocus = (event) => {
+    setIsInputFocused(true);
+    onFocus == null ? void 0 : onFocus(event);
+  };
+  const handleBlur = (event) => {
+    setIsInputFocused(false);
+    onBlur == null ? void 0 : onBlur(event);
+  };
+  const handleClear = () => {
+    onResetSearch == null ? void 0 : onResetSearch();
+    onChange == null ? void 0 : onChange({ target: { value: "" } });
+  };
+  return /* @__PURE__ */ jsx(
+    SearchFieldBase,
+    {
+      defaultValue,
+      value: minimized ? "" : value,
+      placeholder: minimized ? "" : placeholder,
+      onChange,
+      onClick,
+      variant: "filled",
+      emphasis: variant,
+      size,
+      focused: false,
+      isInputFocused,
+      disabled,
+      minimized,
+      InputProps: {
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        startAdornment: /* @__PURE__ */ jsx(
+          SearchFieldStartAdornment,
+          {
+            minimized,
+            loading,
+            disabled,
+            startAdornment
+          }
+        ),
+        endAdornment: !minimized && /* @__PURE__ */ jsx(
+          SearchFieldEndAdornment,
+          {
+            disabled,
+            loading,
+            showClearButton: clearButtonVisibility,
+            clearButton,
+            clearButtonLabel: clearButtonLabelValue,
+            onClear: handleClear,
+            size,
+            endAdornment
+          }
+        ),
+        ...InputProps
+      },
+      inputProps: {
+        role: "searchbox",
+        ...inputProps
+      },
+      role: "search",
+      "data-variant": variant,
+      "data-name": "search-field",
+      ref,
+      ...otherProps
+    }
+  );
+}
+const SearchField = forwardRef(_SearchField);
 const MAX_WIDTH = 480;
 const SnackbarRoot = styled(Snackbar$1)(({ theme }) => ({
   bottom: theme.spacing(2),
@@ -5854,6 +6215,7 @@ export {
   IconButton,
   LabelWithIndicator,
   L as Link,
+  Loader,
   Menu,
   MenuItem$1 as MenuItem,
   MenuItemFilter,
@@ -5862,6 +6224,7 @@ export {
   MultipleSelectField,
   PasswordField,
   ScreenReaderOnly,
+  SearchField,
   SelectField,
   Snackbar,
   SplitButton,

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

@@ -818,6 +818,7 @@ const en = {
       copy: "Copy",
       save: "Save",
       add: "Add",
+      clear: "Clear",
       showOptions: "Show options",
       hide: "Hide",
       show: "Show",
@@ -858,6 +859,11 @@ const en = {
       changesSaved: "Changes saved successfully",
       copiedToClipboard: "Copied to clipboard"
     },
+    utils: {
+      loader: {
+        label: "Loading..."
+      }
+    },
     widgets: {
       category: {
         apply: "Apply",
@@ -967,6 +973,7 @@ const es = {
       copy: "Copiar",
       save: "Guardar",
       add: "Añadir",
+      clear: "Borrar",
       showOptions: "Mostrar opciones",
       hide: "Ocultar",
       show: "Mostrar",
@@ -1007,6 +1014,11 @@ const es = {
       changesSaved: "Cambios guardados correctamente",
       copiedToClipboard: "Copiado al portapapeles"
     },
+    utils: {
+      loader: {
+        label: "Cargando..."
+      }
+    },
     widgets: {
       category: {
         apply: "Aplicar",
@@ -1114,6 +1126,7 @@ const id = {
       copy: "Salin",
       save: "Simpan",
       add: "Tambah",
+      clear: "Bersihkan",
       showOptions: "Tampilkan opsi",
       hide: "Sembunyikan",
       show: "Tampilkan",
@@ -1154,6 +1167,11 @@ const id = {
       changesSaved: "Changes saved successfully",
       copiedToClipboard: "Tersalin ke clipboard"
     },
+    utils: {
+      loader: {
+        label: "Memuat..."
+      }
+    },
     widgets: {
       category: {
         apply: "Terapkan",

package/dist/{css-utils-lmkjeCdF.js → css-utils-CjUBRJVK.js}

@@ -817,6 +817,7 @@ const en = {
       copy: "Copy",
       save: "Save",
       add: "Add",
+      clear: "Clear",
       showOptions: "Show options",
       hide: "Hide",
       show: "Show",
@@ -857,6 +858,11 @@ const en = {
       changesSaved: "Changes saved successfully",
       copiedToClipboard: "Copied to clipboard"
     },
+    utils: {
+      loader: {
+        label: "Loading..."
+      }
+    },
     widgets: {
       category: {
         apply: "Apply",
@@ -966,6 +972,7 @@ const es = {
       copy: "Copiar",
       save: "Guardar",
       add: "Añadir",
+      clear: "Borrar",
       showOptions: "Mostrar opciones",
       hide: "Ocultar",
       show: "Mostrar",
@@ -1006,6 +1013,11 @@ const es = {
       changesSaved: "Cambios guardados correctamente",
       copiedToClipboard: "Copiado al portapapeles"
     },
+    utils: {
+      loader: {
+        label: "Cargando..."
+      }
+    },
     widgets: {
       category: {
         apply: "Aplicar",
@@ -1113,6 +1125,7 @@ const id = {
       copy: "Salin",
       save: "Simpan",
       add: "Tambah",
+      clear: "Bersihkan",
       showOptions: "Tampilkan opsi",
       hide: "Sembunyikan",
       show: "Tampilkan",
@@ -1153,6 +1166,11 @@ const id = {
       changesSaved: "Changes saved successfully",
       copiedToClipboard: "Tersalin ke clipboard"
     },
+    utils: {
+      loader: {
+        label: "Memuat..."
+      }
+    },
     widgets: {
       category: {
         apply: "Terapkan",

package/dist/custom-icons/index.cjs

@@ -5,7 +5,8 @@ const React = require("react");
 const material = require("@mui/material");
 const ArrowDown = require("../ArrowDown-DJ0vhbsw.cjs");
 const OpenDiagonallyRight = require("../OpenDiagonallyRight-CpL4ROwg.cjs");
-const SwatchSquare = require("../SwatchSquare-B8PIY3Rd.cjs");
+const Search = require("../Search-CMWbM9nD.cjs");
+const SwatchSquare = require("../SwatchSquare-DuXPIL7t.cjs");
 const Icon$3h = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
   "path",
   {
@@ -6345,7 +6346,7 @@ exports.ArrowDown = ArrowDown.ArrowDown;
 exports.ArrowUp = OpenDiagonallyRight.ArrowUp;
 exports.CloseDiagonallyRight = OpenDiagonallyRight.CloseDiagonallyRight;
 exports.OpenDiagonallyRight = OpenDiagonallyRight.OpenDiagonallyRight;
-exports.Search = SwatchSquare.Search;
+exports.Search = Search.Search;
 exports.SwatchSquare = SwatchSquare.SwatchSquare;
 exports.AccessIn = AccessIn$1;
 exports.AddApp = AddApp$1;

package/dist/custom-icons/index.js

@@ -3,7 +3,8 @@ import { forwardRef } from "react";
 import { createSvgIcon } from "@mui/material";
 import { A } from "../ArrowDown-d6bxUL0F.js";
 import { A as A2, C, O } from "../OpenDiagonallyRight-CGdCEXlF.js";
-import { S, a } from "../SwatchSquare-CaaLsjAC.js";
+import { S } from "../Search-C7wkXu3f.js";
+import { S as S2 } from "../SwatchSquare-B6KYVoqV.js";
 const Icon$3h = () => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsx(
   "path",
   {
@@ -6521,7 +6522,7 @@ export {
   SupplyChain$1 as SupplyChain,
   SwatchCircle$1 as SwatchCircle,
   SwatchCircleNone$1 as SwatchCircleNone,
-  a as SwatchSquare,
+  S2 as SwatchSquare,
   TableColumn$1 as TableColumn,
   TableColumnLimited$1 as TableColumnLimited,
   TempTable$1 as TempTable,

package/dist/theme/index.cjs

@@ -4,11 +4,11 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const material = require("@mui/material");
 const paletteUtils = require("../palette-utils-B9ybmwiI.cjs");
 const jsxRuntime = require("react/jsx-runtime");
-const cssUtils = require("../css-utils-BNXxLCyb.cjs");
+const cssUtils = require("../css-utils-CH7es90t.cjs");
 const iconsMaterial = require("@mui/icons-material");
 const ArrowDown = require("../ArrowDown-DJ0vhbsw.cjs");
 const xDatePickers = require("@mui/x-date-pickers");
-const MenuItem = require("../MenuItem-6ZIV5V7a.cjs");
+const MenuItem = require("../MenuItem-CgF4QdGi.cjs");
 const themeShadows = [
   "none",
   // 0
@@ -2273,9 +2273,12 @@ const navigationOverrides = {
         ...theme2.typography.body2,
         columnGap: theme2.spacing(1),
         minHeight: cssUtils.MENU_ITEM_SIZE_DEFAULT,
-        padding: theme2.spacing(0.75, 1, 0.75, 1.5),
+        padding: theme2.spacing(0.75, 0),
         whiteSpace: "normal",
         transition: "background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
+        "&.MuiMenuItem-gutters": {
+          padding: theme2.spacing(0.75, 1, 0.75, 1.5)
+        },
         [theme2.breakpoints.up("sm")]: {
           // Overrides an unwanted Mui default style
           "&.MuiButtonBase-root": {
@@ -2994,6 +2997,14 @@ const surfacesOverrides = {
     }
   }
 };
+const layoutOverrides = {
+  // Stack
+  MuiStack: {
+    defaultProps: {
+      useFlexGap: true
+    }
+  }
+};
 const CssBaseline = {
   // Accessibility focus (keyboard only)
   "*:focus-visible": {
@@ -3169,7 +3180,8 @@ const cartoThemeOptions = {
     ...dataDisplayOverrides,
     ...feedbackOverrides,
     ...surfacesOverrides,
-    ...datePickersOverrides
+    ...datePickersOverrides,
+    ...layoutOverrides
   }
 };
 const theme = material.responsiveFontSizes(material.createTheme(cartoThemeOptions));

package/dist/theme/index.js

@@ -3,12 +3,12 @@ import { alpha, Tooltip, responsiveFontSizes, createTheme } from "@mui/material"
 import { c as commonPalette } from "../palette-utils-BHqJlHm9.js";
 import { g } from "../palette-utils-BHqJlHm9.js";
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { T as Typography, a as TablePaginationActions, I as ICON_SIZE_LARGE, b as ICON_SIZE_MEDIUM, c as ICON_SIZE_SMALL, g as getSpacing, e as ellipsisStyles, M as MENU_ITEM_SIZE_DEFAULT, d as MENU_LIST_MAX_SIZE, f as MENU_ITEM_SIZE_DENSE, A as APPBAR_SIZE, B as BREAKPOINTS, S as SPACING } from "../css-utils-lmkjeCdF.js";
-import { h, N } from "../css-utils-lmkjeCdF.js";
+import { T as Typography, a as TablePaginationActions, I as ICON_SIZE_LARGE, b as ICON_SIZE_MEDIUM, c as ICON_SIZE_SMALL, g as getSpacing, e as ellipsisStyles, M as MENU_ITEM_SIZE_DEFAULT, d as MENU_LIST_MAX_SIZE, f as MENU_ITEM_SIZE_DENSE, A as APPBAR_SIZE, B as BREAKPOINTS, S as SPACING } from "../css-utils-CjUBRJVK.js";
+import { h, N } from "../css-utils-CjUBRJVK.js";
 import { Cancel, EventOutlined, ChevronRightOutlined, ChevronLeftOutlined, ExpandMoreOutlined, CheckCircleOutlined, InfoOutlined } from "@mui/icons-material";
 import { A as ArrowDown } from "../ArrowDown-d6bxUL0F.js";
 import { renderDigitalClockTimeView } from "@mui/x-date-pickers";
-import { M as MenuItem } from "../MenuItem-DgHhHW-j.js";
+import { M as MenuItem } from "../MenuItem-DRUK149i.js";
 const themeShadows = [
   "none",
   // 0
@@ -2273,9 +2273,12 @@ const navigationOverrides = {
         ...theme2.typography.body2,
         columnGap: theme2.spacing(1),
         minHeight: MENU_ITEM_SIZE_DEFAULT,
-        padding: theme2.spacing(0.75, 1, 0.75, 1.5),
+        padding: theme2.spacing(0.75, 0),
         whiteSpace: "normal",
         transition: "background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
+        "&.MuiMenuItem-gutters": {
+          padding: theme2.spacing(0.75, 1, 0.75, 1.5)
+        },
         [theme2.breakpoints.up("sm")]: {
           // Overrides an unwanted Mui default style
           "&.MuiButtonBase-root": {
@@ -2994,6 +2997,14 @@ const surfacesOverrides = {
     }
   }
 };
+const layoutOverrides = {
+  // Stack
+  MuiStack: {
+    defaultProps: {
+      useFlexGap: true
+    }
+  }
+};
 const CssBaseline = {
   // Accessibility focus (keyboard only)
   "*:focus-visible": {
@@ -3169,7 +3180,8 @@ const cartoThemeOptions = {
     ...dataDisplayOverrides,
     ...feedbackOverrides,
     ...surfacesOverrides,
-    ...datePickersOverrides
+    ...datePickersOverrides,
+    ...layoutOverrides
   }
 };
 const theme = responsiveFontSizes(createTheme(cartoThemeOptions));