@carto/meridian-ds 3.1.0 → 3.1.1-alpha.01e04ce.288

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+- **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)
+
 ## 3.0
 
 ### 3.1.0

package/dist/{OpenDiagonallyRight-BUZBgnkY.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;
+const ForwardedComponent = React.forwardRef(Search);
+ForwardedComponent.displayName = "Search";
+exports.ForwardedComponent = ForwardedComponent$3;
 exports.ForwardedComponent$1 = ForwardedComponent$1;
-exports.ForwardedComponent$2 = ForwardedComponent;
+exports.ForwardedComponent$2 = ForwardedComponent$2;
+exports.ForwardedComponent$3 = ForwardedComponent;

package/dist/{OpenDiagonallyRight-DQEM4RAg.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$3 as F,
   ForwardedComponent$1 as a,
-  ForwardedComponent as b
+  ForwardedComponent$2 as b,
+  ForwardedComponent as c
 };

package/dist/{utils-DtB4pKaP.cjs → TablePaginationActions-WuqMxOyM.cjs}

@@ -2,18 +2,20 @@
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const material = require("@mui/material");
-const paletteUtils = require("./palette-utils-Ou97WiuF.cjs");
-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
+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
   );
-  return typeof colorValue === "string" ? colorValue : void 0;
 }
 const StyledMenuItem = material.styled(material.MenuItem, {
   shouldForwardProp: (prop) => !["subtitle", "destructive", "extended", "fixed", "iconColor"].includes(
@@ -190,14 +192,174 @@ function _MenuItem({
   );
 }
 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;

package/dist/{utils-BnqQIMbU.js → TablePaginationActions-XEVsnuDF.js}

@@ -1,18 +1,20 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { styled, MenuItem as MenuItem$1 } from "@mui/material";
-import { f as MENU_ITEM_SIZE_DENSE, l as MENU_ITEM_SIZE_EXTENDED, c as ICON_SIZE_SMALL, b as ICON_SIZE_MEDIUM, I as ICON_SIZE_LARGE } from "./palette-utils-B2CZD7oM.js";
-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
+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-F7dMdI2q.js";
+import { KeyboardArrowLeftOutlined, KeyboardArrowRightOutlined } from "@mui/icons-material";
+import { useIntl } from "react-intl";
+import { u as useImperativeIntl } from "./useImperativeIntl-BUw_LXAO.js";
+function useTranslationWithFallback(translationKey, customText, intlValues) {
+  const intl = useIntl();
+  const intlConfig = useImperativeIntl(intl);
+  if (customText !== void 0 && customText !== null) {
+    return customText;
+  }
+  return intlConfig.formatMessage(
+    { id: translationKey },
+    intlValues
   );
-  return typeof colorValue === "string" ? colorValue : void 0;
 }
 const StyledMenuItem = styled(MenuItem$1, {
   shouldForwardProp: (prop) => !["subtitle", "destructive", "extended", "fixed", "iconColor"].includes(
@@ -189,16 +191,176 @@ function _MenuItem({
   );
 }
 const MenuItem = forwardRef(_MenuItem);
+const Option = 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 = styled(IconButton$1, {
+  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__ */ jsx(
+    Tooltip,
+    {
+      placement: tooltipPlacement,
+      title: tooltip ?? "",
+      describeChild: Boolean(ariaLabel),
+      children: /* @__PURE__ */ jsx(
+        Option,
+        {
+          className: `optionIconButton ${className ?? ""}`,
+          sx,
+          "data-testid": "icon-button",
+          children: /* @__PURE__ */ jsx(
+            StyledIconButton,
+            {
+              ...props,
+              ref,
+              size,
+              variant,
+              color,
+              active,
+              disabled: disabled || loading,
+              role: "button",
+              "aria-label": ariaLabel,
+              children: loading ? /* @__PURE__ */ jsx(CircularProgress, { size: 18, color: "inherit" }) : icon
+            }
+          )
+        }
+      )
+    }
+  );
+}
+const IconButton = 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: ICON_SIZE_SMALL,
   medium: ICON_SIZE_MEDIUM,
   large: ICON_SIZE_LARGE
 });
+const Root = styled(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__ */ jsxs(
+    Root,
+    {
+      ref,
+      "data-testid": dataTestId,
+      "aria-label": ariaLabel,
+      "data-name": "table-pagination-actions",
+      children: [
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            onClick: handleBackButtonClick,
+            disabled: page === 0,
+            "aria-label": prevLabel,
+            icon: /* @__PURE__ */ jsx(KeyboardArrowLeftOutlined, {}),
+            tooltip: isFirstPage ? noMorePagesText : prevLabel
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            onClick: handleNextButtonClick,
+            disabled: page >= Math.ceil(count / rowsPerPage) - 1,
+            "aria-label": nextLabel,
+            icon: /* @__PURE__ */ jsx(KeyboardArrowRightOutlined, {}),
+            tooltip: isLastPage ? lastPageTooltip ?? noMorePagesText : nextLabel
+          }
+        )
+      ]
+    }
+  );
+}
+const TablePaginationActions = forwardRef(_TablePaginationActions);
 export {
+  IconButton as I,
   MenuItem as M,
   SVG_SELECTOR as S,
-  getIconSizeMap as a,
-  getThemeColor as b,
-  getPixelToRem as g
+  TablePaginationActions as T,
+  getPixelToRem as a,
+  getIconSizeMap as b,
+  ellipsisStyles as e,
+  getThemeColor as g,
+  useTranslationWithFallback as u
 };

package/dist/chart-constants-BPSHJ52D.js

@@ -0,0 +1,12 @@
+const REST_CATEGORY = "__rest__";
+const OTHERS_CATEGORY_NAME = "Others";
+var OrderTypes = /* @__PURE__ */ ((OrderTypes2) => {
+  OrderTypes2["Ranking"] = "ranking";
+  OrderTypes2["Fixed"] = "fixed";
+  return OrderTypes2;
+})(OrderTypes || {});
+export {
+  OTHERS_CATEGORY_NAME as O,
+  REST_CATEGORY as R,
+  OrderTypes as a
+};

package/dist/chart-constants-C9FrXEWV.cjs

@@ -0,0 +1,11 @@
+"use strict";
+const REST_CATEGORY = "__rest__";
+const OTHERS_CATEGORY_NAME = "Others";
+var OrderTypes = /* @__PURE__ */ ((OrderTypes2) => {
+  OrderTypes2["Ranking"] = "ranking";
+  OrderTypes2["Fixed"] = "fixed";
+  return OrderTypes2;
+})(OrderTypes || {});
+exports.OTHERS_CATEGORY_NAME = OTHERS_CATEGORY_NAME;
+exports.OrderTypes = OrderTypes;
+exports.REST_CATEGORY = REST_CATEGORY;