@carto/meridian-ds 3.1.1-alpha.7c9a0df.290 → 4.0.0

package/CHANGELOG.md

@@ -2,8 +2,13 @@
 
 ## Unreleased
 
-- feat(legend): add geometry-aware `symbol`, `strokeLineStyle` and `fillPattern` props to `LegendCategories` — circle/square/line symbols, solid/dashed/dotted strokes, and 8 fill patterns (incl. `solid`), each a single value or per-category array, tinted by the row color, and white/transparent values stay visible. Reuses existing `Stroke*`/`Pattern*` icons and removes the dead `isMax` ring [#446](https://github.com/CartoDB/meridian-ds/pull/446)
-- fix(figma): sync Code Connect templates with the Meridian-DS Figma renames and add templates for the new `CopiableInputText` and `PasswordField` components [#436](https://github.com/CartoDB/meridian-ds/pull/436)
+## 4.0
+
+### 4.0.0
+
+- **BREAKING** feat(widgets): move all Builder chart/data widgets to their sole consumer (workspace-www) and remove echarts from Meridian. Removes `PieWidgetUI`, `TimeSeriesWidgetUI`, `CategoryWidgetUI`, `HistogramWidgetUI`, `BarWidgetUI`, `ScatterPlotWidgetUI`, `FormulaWidgetUI`, `RangeWidgetUI`, `TableWidgetUI`, `WrapperWidgetUI`, `FeatureSelectionWidgetUI`, `NoDataAlert`, `ChartLegend`, and the comparative widgets; only the `legend` widgets remain. Adds public `./charts` and `./hooks` subpaths for the shared chart infrastructure (skeleton primitives, chart constants, formatter/animation utils) and the hooks the extracted widgets depend on; `theme` now also exports `commonPalette`. Drops the `echarts`/`echarts-for-react` dependencies and the `ReactEcharts` wrapper. [#462](https://github.com/CartoDB/meridian-ds/pull/462)
+- fix(tooltip): prevent the hover "wave" (cascading tooltips) when scrubbing across icon-button lists — tune `MuiTooltip` defaults (`enterNextDelay`, `leaveDelay`, `Fade` transition) [#458](https://github.com/CartoDB/meridian-ds/pull/458)
+- feat(DateRangeCalendar): new component to select a date range in a single, always-visible calendar (no separate input fields), with a neutral hover preview of the pending range that turns into the selection color once committed — reuses `PickersDay` so styling stays token-driven [#465](https://github.com/CartoDB/meridian-ds/pull/465)
 
 ## 3.0
 

package/dist/{OpenDiagonallyRight-BPUv8cSL.cjs → Search-BsaXrSzs.cjs}

@@ -2,7 +2,7 @@
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const material = require("@mui/material");
-const Icon$2 = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+const Icon$3 = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
   "path",
   {
     fill: "currentColor",
@@ -11,10 +11,10 @@ const Icon$2 = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.
     clipRule: "evenodd"
   }
 ) });
-const BaseSvgIcon$2 = material.createSvgIcon(Icon$2(), "ArrowUp");
+const BaseSvgIcon$3 = material.createSvgIcon(Icon$3(), "ArrowUp");
 function ArrowUp({ width, height, sx, ...props }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    BaseSvgIcon$2,
+    BaseSvgIcon$3,
     {
       ref,
       viewBox: "0 0 24 24",
@@ -27,9 +27,9 @@ function ArrowUp({ width, height, sx, ...props }, ref) {
     }
   );
 }
-const ForwardedComponent$2 = React.forwardRef(ArrowUp);
-ForwardedComponent$2.displayName = "ArrowUp";
-const Icon$1 = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+const ForwardedComponent$3 = React.forwardRef(ArrowUp);
+ForwardedComponent$3.displayName = "ArrowUp";
+const Icon$2 = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
   "path",
   {
     fill: "currentColor",
@@ -38,10 +38,10 @@ const Icon$1 = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.
     clipRule: "evenodd"
   }
 ) });
-const BaseSvgIcon$1 = material.createSvgIcon(Icon$1(), "CloseDiagonallyRight");
+const BaseSvgIcon$2 = material.createSvgIcon(Icon$2(), "CloseDiagonallyRight");
 function CloseDiagonallyRight({ width, height, sx, ...props }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    BaseSvgIcon$1,
+    BaseSvgIcon$2,
     {
       ref,
       viewBox: "0 0 24 24",
@@ -54,9 +54,9 @@ function CloseDiagonallyRight({ width, height, sx, ...props }, ref) {
     }
   );
 }
-const ForwardedComponent$1 = React.forwardRef(CloseDiagonallyRight);
-ForwardedComponent$1.displayName = "CloseDiagonallyRight";
-const Icon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+const ForwardedComponent$2 = React.forwardRef(CloseDiagonallyRight);
+ForwardedComponent$2.displayName = "CloseDiagonallyRight";
+const Icon$1 = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
   "path",
   {
     fill: "currentColor",
@@ -65,8 +65,35 @@ const Icon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3
     clipRule: "evenodd"
   }
 ) });
-const BaseSvgIcon = material.createSvgIcon(Icon(), "OpenDiagonallyRight");
+const BaseSvgIcon$1 = material.createSvgIcon(Icon$1(), "OpenDiagonallyRight");
 function OpenDiagonallyRight({ width, height, sx, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    BaseSvgIcon$1,
+    {
+      ref,
+      viewBox: "0 0 24 24",
+      sx: {
+        width,
+        height: height || width,
+        ...sx
+      },
+      ...props
+    }
+  );
+}
+const ForwardedComponent$1 = React.forwardRef(OpenDiagonallyRight);
+ForwardedComponent$1.displayName = "OpenDiagonallyRight";
+const Icon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+  "path",
+  {
+    fill: "currentColor",
+    fillRule: "evenodd",
+    d: "M11 4a7 7 0 0 1 5.386 11.472l3.089 3.089-1.414 1.414-3.161-3.161A7 7 0 1 1 11 4m0 2a5 5 0 1 0 0 10 5 5 0 0 0 0-10",
+    clipRule: "evenodd"
+  }
+) });
+const BaseSvgIcon = material.createSvgIcon(Icon(), "Search");
+function Search({ width, height, sx, ...props }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     BaseSvgIcon,
     {
@@ -81,8 +108,9 @@ function OpenDiagonallyRight({ width, height, sx, ...props }, ref) {
     }
   );
 }
-const ForwardedComponent = React.forwardRef(OpenDiagonallyRight);
-ForwardedComponent.displayName = "OpenDiagonallyRight";
-exports.ForwardedComponent = ForwardedComponent$2;
-exports.ForwardedComponent$1 = ForwardedComponent;
-exports.ForwardedComponent$2 = ForwardedComponent$1;
+const ForwardedComponent = React.forwardRef(Search);
+ForwardedComponent.displayName = "Search";
+exports.ForwardedComponent = ForwardedComponent$3;
+exports.ForwardedComponent$1 = ForwardedComponent$1;
+exports.ForwardedComponent$2 = ForwardedComponent$2;
+exports.ForwardedComponent$3 = ForwardedComponent;

package/dist/{OpenDiagonallyRight-DuJMadZ8.js → Search-DXfTNnxj.js}

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { createSvgIcon } from "@mui/material";
-const Icon$2 = () => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsx(
+const Icon$3 = () => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsx(
   "path",
   {
     fill: "currentColor",
@@ -10,10 +10,10 @@ const Icon$2 = () => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000
     clipRule: "evenodd"
   }
 ) });
-const BaseSvgIcon$2 = createSvgIcon(Icon$2(), "ArrowUp");
+const BaseSvgIcon$3 = createSvgIcon(Icon$3(), "ArrowUp");
 function ArrowUp({ width, height, sx, ...props }, ref) {
   return /* @__PURE__ */ jsx(
-    BaseSvgIcon$2,
+    BaseSvgIcon$3,
     {
       ref,
       viewBox: "0 0 24 24",
@@ -26,9 +26,9 @@ function ArrowUp({ width, height, sx, ...props }, ref) {
     }
   );
 }
-const ForwardedComponent$2 = forwardRef(ArrowUp);
-ForwardedComponent$2.displayName = "ArrowUp";
-const Icon$1 = () => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsx(
+const ForwardedComponent$3 = forwardRef(ArrowUp);
+ForwardedComponent$3.displayName = "ArrowUp";
+const Icon$2 = () => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsx(
   "path",
   {
     fill: "currentColor",
@@ -37,10 +37,10 @@ const Icon$1 = () => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000
     clipRule: "evenodd"
   }
 ) });
-const BaseSvgIcon$1 = createSvgIcon(Icon$1(), "CloseDiagonallyRight");
+const BaseSvgIcon$2 = createSvgIcon(Icon$2(), "CloseDiagonallyRight");
 function CloseDiagonallyRight({ width, height, sx, ...props }, ref) {
   return /* @__PURE__ */ jsx(
-    BaseSvgIcon$1,
+    BaseSvgIcon$2,
     {
       ref,
       viewBox: "0 0 24 24",
@@ -53,9 +53,9 @@ function CloseDiagonallyRight({ width, height, sx, ...props }, ref) {
     }
   );
 }
-const ForwardedComponent$1 = forwardRef(CloseDiagonallyRight);
-ForwardedComponent$1.displayName = "CloseDiagonallyRight";
-const Icon = () => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsx(
+const ForwardedComponent$2 = forwardRef(CloseDiagonallyRight);
+ForwardedComponent$2.displayName = "CloseDiagonallyRight";
+const Icon$1 = () => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsx(
   "path",
   {
     fill: "currentColor",
@@ -64,8 +64,35 @@ const Icon = () => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/s
     clipRule: "evenodd"
   }
 ) });
-const BaseSvgIcon = createSvgIcon(Icon(), "OpenDiagonallyRight");
+const BaseSvgIcon$1 = createSvgIcon(Icon$1(), "OpenDiagonallyRight");
 function OpenDiagonallyRight({ width, height, sx, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    BaseSvgIcon$1,
+    {
+      ref,
+      viewBox: "0 0 24 24",
+      sx: {
+        width,
+        height: height || width,
+        ...sx
+      },
+      ...props
+    }
+  );
+}
+const ForwardedComponent$1 = forwardRef(OpenDiagonallyRight);
+ForwardedComponent$1.displayName = "OpenDiagonallyRight";
+const Icon = () => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    fill: "currentColor",
+    fillRule: "evenodd",
+    d: "M11 4a7 7 0 0 1 5.386 11.472l3.089 3.089-1.414 1.414-3.161-3.161A7 7 0 1 1 11 4m0 2a5 5 0 1 0 0 10 5 5 0 0 0 0-10",
+    clipRule: "evenodd"
+  }
+) });
+const BaseSvgIcon = createSvgIcon(Icon(), "Search");
+function Search({ width, height, sx, ...props }, ref) {
   return /* @__PURE__ */ jsx(
     BaseSvgIcon,
     {
@@ -80,10 +107,11 @@ function OpenDiagonallyRight({ width, height, sx, ...props }, ref) {
     }
   );
 }
-const ForwardedComponent = forwardRef(OpenDiagonallyRight);
-ForwardedComponent.displayName = "OpenDiagonallyRight";
+const ForwardedComponent = forwardRef(Search);
+ForwardedComponent.displayName = "Search";
 export {
-  ForwardedComponent$2 as F,
-  ForwardedComponent as a,
-  ForwardedComponent$1 as b
+  ForwardedComponent$3 as F,
+  ForwardedComponent$1 as a,
+  ForwardedComponent$2 as b,
+  ForwardedComponent as c
 };

package/dist/{Search-Bx9LZ_VF.js → SwatchSquare-BDOWVMHN.js}

@@ -1,17 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { createSvgIcon } from "@mui/material";
-const Icon = () => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsx(
-  "path",
-  {
-    fill: "currentColor",
-    fillRule: "evenodd",
-    d: "M11 4a7 7 0 0 1 5.386 11.472l3.089 3.089-1.414 1.414-3.161-3.161A7 7 0 1 1 11 4m0 2a5 5 0 1 0 0 10 5 5 0 0 0 0-10",
-    clipRule: "evenodd"
-  }
-) });
-const BaseSvgIcon = createSvgIcon(Icon(), "Search");
-function Search({ width, height, sx, ...props }, ref) {
+const Icon = () => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsx("rect", { width: 16, height: 16, x: 4, y: 4, fill: "currentColor", rx: 2 }) });
+const BaseSvgIcon = createSvgIcon(Icon(), "SwatchSquare");
+function SwatchSquare({ width, height, sx, ...props }, ref) {
   return /* @__PURE__ */ jsx(
     BaseSvgIcon,
     {
@@ -26,8 +18,8 @@ function Search({ width, height, sx, ...props }, ref) {
     }
   );
 }
-const ForwardedComponent = forwardRef(Search);
-ForwardedComponent.displayName = "Search";
+const ForwardedComponent = forwardRef(SwatchSquare);
+ForwardedComponent.displayName = "SwatchSquare";
 export {
   ForwardedComponent as F
 };

package/dist/{Search-DFMUrdFt.cjs → SwatchSquare-BydXPPhd.cjs}

@@ -2,17 +2,9 @@
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const material = require("@mui/material");
-const Icon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
-  "path",
-  {
-    fill: "currentColor",
-    fillRule: "evenodd",
-    d: "M11 4a7 7 0 0 1 5.386 11.472l3.089 3.089-1.414 1.414-3.161-3.161A7 7 0 1 1 11 4m0 2a5 5 0 1 0 0 10 5 5 0 0 0 0-10",
-    clipRule: "evenodd"
-  }
-) });
-const BaseSvgIcon = material.createSvgIcon(Icon(), "Search");
-function Search({ width, height, sx, ...props }, ref) {
+const Icon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { width: 16, height: 16, x: 4, y: 4, fill: "currentColor", rx: 2 }) });
+const BaseSvgIcon = material.createSvgIcon(Icon(), "SwatchSquare");
+function SwatchSquare({ width, height, sx, ...props }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     BaseSvgIcon,
     {
@@ -27,6 +19,6 @@ function Search({ width, height, sx, ...props }, ref) {
     }
   );
 }
-const ForwardedComponent = React.forwardRef(Search);
-ForwardedComponent.displayName = "Search";
+const ForwardedComponent = React.forwardRef(SwatchSquare);
+ForwardedComponent.displayName = "SwatchSquare";
 exports.ForwardedComponent = ForwardedComponent;

package/dist/TablePaginationActions-WuqMxOyM.cjs

@@ -0,0 +1,365 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const material = require("@mui/material");
+const paletteUtils = require("./palette-utils-DX1R_i9N.cjs");
+const iconsMaterial = require("@mui/icons-material");
+const reactIntl = require("react-intl");
+const useImperativeIntl = require("./useImperativeIntl-lvkv1UNL.cjs");
+function useTranslationWithFallback(translationKey, customText, intlValues) {
+  const intl = reactIntl.useIntl();
+  const intlConfig = useImperativeIntl.useImperativeIntl(intl);
+  if (customText !== void 0 && customText !== null) {
+    return customText;
+  }
+  return intlConfig.formatMessage(
+    { id: translationKey },
+    intlValues
+  );
+}
+const StyledMenuItem = material.styled(material.MenuItem, {
+  shouldForwardProp: (prop) => !["subtitle", "destructive", "extended", "fixed", "iconColor"].includes(
+    prop
+  )
+})(
+  ({
+    theme,
+    dense,
+    subtitle,
+    destructive,
+    extended,
+    fixed,
+    iconColor = "primary"
+  }) => ({
+    ...subtitle && {
+      pointerEvents: "none",
+      columnGap: 0,
+      ...theme.typography.caption,
+      fontWeight: 500,
+      color: `${theme.palette.text.secondary} !important`,
+      ".MuiListItemText-root .MuiTypography-root": {
+        ...theme.typography.caption,
+        fontWeight: 500,
+        color: theme.palette.text.secondary
+      },
+      "&.MuiMenuItem-root": {
+        minHeight: paletteUtils.MENU_ITEM_SIZE_DENSE,
+        paddingTop: 0,
+        paddingBottom: 0,
+        marginTop: theme.spacing(1),
+        "&:not(:first-of-type)": {
+          marginTop: theme.spacing(2),
+          "&::before": {
+            content: '""',
+            position: "absolute",
+            top: theme.spacing(-1),
+            left: 0,
+            right: 0,
+            height: 1,
+            backgroundColor: theme.palette.divider
+          }
+        }
+      }
+    },
+    ...iconColor === "primary" && {
+      ".MuiListItemIcon-root svg path": {
+        fill: theme.palette.text.primary
+      },
+      "&.Mui-selected .MuiListItemIcon-root svg path": {
+        fill: theme.palette.primary.main
+      },
+      '.MuiAutocomplete-listbox &[aria-selected="true"] svg path': {
+        fill: theme.palette.primary.main
+      }
+    },
+    ...destructive && {
+      color: theme.palette.error.main,
+      ".MuiTypography-root": {
+        color: theme.palette.error.main
+      },
+      "svg, & .MuiSvgIcon-root": {
+        color: theme.palette.error.main
+      },
+      ".MuiListItemIcon-root svg path": {
+        fill: theme.palette.error.main
+      },
+      "&.Mui-selected .MuiListItemIcon-root svg path": {
+        fill: theme.palette.error.main
+      },
+      "&:hover": {
+        backgroundColor: theme.palette.error.relatedLight
+      },
+      "&.Mui-selected": {
+        color: theme.palette.error.main,
+        ".MuiTypography-root": {
+          color: theme.palette.error.main
+        },
+        "svg, & .MuiSvgIcon-root": {
+          color: theme.palette.error.main
+        }
+      },
+      "&.Mui-disabled": {
+        color: theme.palette.text.disabled,
+        ".MuiTypography-root": {
+          color: theme.palette.text.disabled
+        },
+        svg: {
+          color: theme.palette.text.disabled
+        }
+      }
+    },
+    ...extended && {
+      "&.MuiButtonBase-root.MuiMenuItem-root": {
+        minHeight: paletteUtils.MENU_ITEM_SIZE_EXTENDED
+      }
+    },
+    ...fixed && {
+      "&.MuiMenuItem-root": {
+        position: "sticky",
+        top: 0,
+        left: 0,
+        bottom: 0,
+        right: 0,
+        zIndex: 2,
+        minHeight: paletteUtils.MENU_ITEM_SIZE_EXTENDED,
+        marginBottom: theme.spacing(1),
+        padding: theme.spacing(0.5, 0),
+        backgroundColor: `${theme.palette.background.paper} !important`,
+        borderBottom: `1px solid ${theme.palette.divider}`
+      },
+      "&.MuiMenuItem-gutters": {
+        padding: theme.spacing(0.5, 1.5)
+      },
+      ".MuiAutocomplete-listbox &.MuiAutocomplete-option:first-of-type": {
+        minHeight: paletteUtils.MENU_ITEM_SIZE_EXTENDED,
+        marginTop: 0,
+        "&:hover": {
+          backgroundColor: theme.palette.background.paper
+        }
+      }
+    },
+    ...!fixed && {
+      ".MuiList-root &:first-of-type": {
+        marginTop: theme.spacing(1)
+      },
+      ".MuiList-root &:last-of-type": {
+        marginBottom: theme.spacing(1)
+      }
+    },
+    ...dense && {
+      "&.MuiButtonBase-root.MuiMenuItem-root": {
+        minHeight: paletteUtils.MENU_ITEM_SIZE_DENSE,
+        padding: theme.spacing(0.25, 0)
+      },
+      "&.MuiButtonBase-root.MuiMenuItem-gutters": {
+        padding: theme.spacing(0.25, 1.5)
+      }
+    }
+  })
+);
+function _MenuItem({
+  disabled,
+  subtitle,
+  destructive,
+  extended,
+  fixed,
+  iconColor = "primary",
+  dense,
+  disableGutters,
+  ...props
+}, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    StyledMenuItem,
+    {
+      "data-name": "menu-item",
+      ...props,
+      ref,
+      disabled: disabled || subtitle,
+      subtitle,
+      destructive,
+      extended,
+      dense,
+      fixed,
+      iconColor,
+      disableGutters,
+      "data-destructive": destructive,
+      "data-extended": extended,
+      "data-dense": dense,
+      "data-fixed": fixed,
+      "data-icon-color": iconColor,
+      "data-disable-gutters": disableGutters
+    }
+  );
+}
+const MenuItem = React.forwardRef(_MenuItem);
+const Option = material.styled("div")(({ theme }) => ({
+  position: "relative",
+  display: "inline-flex",
+  // TODO: Remove this once we have a better way to handle the spacing between icon buttons:
+  // https://app.shortcut.com/cartoteam/story/471284/create-iconbuttongroup-component-to-properly-group-several-icons
+  "& + &, & + .optionIconButton": {
+    marginLeft: theme.spacing(0.5)
+  }
+}));
+const StyledIconButton = material.styled(material.IconButton, {
+  shouldForwardProp: (prop) => !["active"].includes(prop)
+})(({ active, theme }) => ({
+  ...active && {
+    color: theme.palette.primary.main,
+    backgroundColor: theme.palette.primary.background,
+    "& svg:not(.doNotFillIcon) path": {
+      fill: theme.palette.primary.main
+    }
+  }
+}));
+function _IconButton({
+  tooltip,
+  tooltipPlacement = "top",
+  icon,
+  size = "medium",
+  variant = "icon",
+  color = "default",
+  sx,
+  className,
+  loading,
+  disabled,
+  active,
+  "aria-label": _ariaLabel,
+  ...props
+}, ref) {
+  const ariaLabel = _ariaLabel ?? (typeof tooltip === "string" ? tooltip : void 0);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.Tooltip,
+    {
+      placement: tooltipPlacement,
+      title: tooltip ?? "",
+      describeChild: Boolean(ariaLabel),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        Option,
+        {
+          className: `optionIconButton ${className ?? ""}`,
+          sx,
+          "data-testid": "icon-button",
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            StyledIconButton,
+            {
+              ...props,
+              ref,
+              size,
+              variant,
+              color,
+              active,
+              disabled: disabled || loading,
+              role: "button",
+              "aria-label": ariaLabel,
+              children: loading ? /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 18, color: "inherit" }) : icon
+            }
+          )
+        }
+      )
+    }
+  );
+}
+const IconButton = React.forwardRef(_IconButton);
+function getPixelToRem(px) {
+  const fontBase = 16;
+  const rem = 1 / fontBase * px + "rem";
+  return rem;
+}
+function getThemeColor(colorPath, theme) {
+  const colorValue = colorPath.split(".").reduce(
+    (acc, part) => acc && typeof acc === "object" && part in acc ? acc[part] : void 0,
+    theme.palette
+  );
+  return typeof colorValue === "string" ? colorValue : void 0;
+}
+const ellipsisStyles = {
+  textOverflow: "ellipsis",
+  overflow: "hidden",
+  whiteSpace: "nowrap"
+};
+const SVG_SELECTOR = "&:not(:has(.MuiRadio-root)):not(:has(.MuiCheckbox-root)) svg";
+const getIconSizeMap = () => ({
+  small: paletteUtils.ICON_SIZE_SMALL,
+  medium: paletteUtils.ICON_SIZE_MEDIUM,
+  large: paletteUtils.ICON_SIZE_LARGE
+});
+const Root = material.styled(material.Box)(({ theme }) => ({
+  display: "flex",
+  gap: theme.spacing(0.5),
+  marginLeft: theme.spacing(1)
+}));
+function _TablePaginationActions({
+  count,
+  page,
+  rowsPerPage = 10,
+  onPageChange,
+  lastPageTooltip,
+  prevPageText,
+  nextPageText,
+  noMorePagesText: noMorePagesTextProp,
+  "aria-label": ariaLabel,
+  "data-testid": dataTestId
+}, ref) {
+  const handleBackButtonClick = (event) => {
+    onPageChange(event, page - 1);
+  };
+  const handleNextButtonClick = (event) => {
+    onPageChange(event, page + 1);
+  };
+  const isLastPage = page === Math.ceil(count / rowsPerPage) - 1;
+  const isFirstPage = page === 0;
+  const prevLabel = useTranslationWithFallback(
+    "c4r.form.pagination.prevPage",
+    prevPageText
+  );
+  const nextLabel = useTranslationWithFallback(
+    "c4r.form.pagination.nextPage",
+    nextPageText
+  );
+  const noMorePagesText = useTranslationWithFallback(
+    "c4r.form.pagination.noMorePages",
+    noMorePagesTextProp
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Root,
+    {
+      ref,
+      "data-testid": dataTestId,
+      "aria-label": ariaLabel,
+      "data-name": "table-pagination-actions",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          IconButton,
+          {
+            onClick: handleBackButtonClick,
+            disabled: page === 0,
+            "aria-label": prevLabel,
+            icon: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.KeyboardArrowLeftOutlined, {}),
+            tooltip: isFirstPage ? noMorePagesText : prevLabel
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          IconButton,
+          {
+            onClick: handleNextButtonClick,
+            disabled: page >= Math.ceil(count / rowsPerPage) - 1,
+            "aria-label": nextLabel,
+            icon: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.KeyboardArrowRightOutlined, {}),
+            tooltip: isLastPage ? lastPageTooltip ?? noMorePagesText : nextLabel
+          }
+        )
+      ]
+    }
+  );
+}
+const TablePaginationActions = React.forwardRef(_TablePaginationActions);
+exports.IconButton = IconButton;
+exports.MenuItem = MenuItem;
+exports.SVG_SELECTOR = SVG_SELECTOR;
+exports.TablePaginationActions = TablePaginationActions;
+exports.ellipsisStyles = ellipsisStyles;
+exports.getIconSizeMap = getIconSizeMap;
+exports.getPixelToRem = getPixelToRem;
+exports.getThemeColor = getThemeColor;
+exports.useTranslationWithFallback = useTranslationWithFallback;