@carto/meridian-ds 2.5.4 → 2.5.5-alpha-ellipsis.1

package/dist/widgets/index.cjs

@@ -4,13 +4,13 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const material = require("@mui/material");
 const reactIntl = require("react-intl");
-const TablePaginationActions = require("../TablePaginationActions-DAMGtIub.cjs");
+const cssUtils = require("../css-utils-W9dzgcXq.cjs");
 const _ReactEcharts = require("echarts-for-react");
 const reactWindow = require("react-window");
 const SwatchSquare = require("../SwatchSquare-B8PIY3Rd.cjs");
-const Alert = require("../Alert-BdmDjcVc.cjs");
+const Alert = require("../Alert-CaashKPj.cjs");
 const iconsMaterial = require("@mui/icons-material");
-const paletteUtils = require("../paletteUtils-B9ybmwiI.cjs");
+const paletteUtils = require("../palette-utils-B9ybmwiI.cjs");
 function detectTouchscreen() {
   let result = false;
   if (window.PointerEvent && "maxTouchPoints" in navigator) {
@@ -157,7 +157,7 @@ var fastDeepEqual = function equal(a, b) {
   }
   return a !== a && b !== b;
 };
-const isEqual = /* @__PURE__ */ TablePaginationActions.getDefaultExportFromCjs(fastDeepEqual);
+const isEqual = /* @__PURE__ */ cssUtils.getDefaultExportFromCjs(fastDeepEqual);
 class ReactEcharts extends _ReactEcharts {
   componentDidUpdate(prevProps) {
     const { shouldSetOption } = this.props;
@@ -328,7 +328,7 @@ function BarWidgetUI(props) {
   const isMultiSeries = series.length > 1;
   const theme = material.useTheme();
   const intl = reactIntl.useIntl();
-  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
+  const intlConfig = cssUtils.useImperativeIntl(intl);
   const { showSkeleton } = useSkeleton(!!isLoading);
   const tooltipOptions = React.useMemo(
     () => ({
@@ -550,7 +550,7 @@ function BarWidgetUI(props) {
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     onSelectedBarsChange && /* @__PURE__ */ jsxRuntime.jsxs(OptionsSelectedBar$2, { container: true, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(TablePaginationActions.Typography, { variant: "caption", children: selectedBars.length > 0 ? intlConfig.formatMessage(
+      /* @__PURE__ */ jsxRuntime.jsx(cssUtils.Typography, { variant: "caption", children: selectedBars.length > 0 ? intlConfig.formatMessage(
         { id: "c4r.widgets.bar.selectedItems" },
         { items: selectedBars.length }
       ) : intlConfig.formatMessage({ id: "c4r.widgets.bar.all" }) }),
@@ -666,7 +666,7 @@ const CategoryLabelWrapper = material.styled(material.Grid, {
     }
   };
 });
-const CategoryLabel = material.styled(TablePaginationActions.Typography)(({ theme }) => ({
+const CategoryLabel = material.styled(cssUtils.Typography)(({ theme }) => ({
   fontWeight: theme.typography.fontWeightBold,
   marginRight: theme.spacing(2)
 }));
@@ -819,7 +819,7 @@ function CategoryWidgetUI({
   const referencedPrevAnimValues = React.useRef([]);
   const { showSkeleton } = useSkeleton(!!isLoading);
   const intl = reactIntl.useIntl();
-  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
+  const intlConfig = cssUtils.useImperativeIntl(intl);
   function sortBlockedSameAsData(blockedCategories2) {
     const blockedCategoriesSet = new Set(blockedCategories2);
     let sortedByOrderData = data;
@@ -1167,7 +1167,7 @@ function CategoryWidgetUI({
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(CategoriesRoot, { children: [
     filterable && sortedData.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(OptionsSelectedBar$1, { container: true, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(TablePaginationActions.Typography, { variant: "caption", children: selectedCategories.length > 0 ? intlConfig.formatMessage(
+      /* @__PURE__ */ jsxRuntime.jsx(cssUtils.Typography, { variant: "caption", children: selectedCategories.length > 0 ? intlConfig.formatMessage(
         { id: "c4r.widgets.category.selectedItems" },
         { items: selectedCategories.length }
       ) : intlConfig.formatMessage({ id: "c4r.widgets.category.all" }) }),
@@ -1249,10 +1249,10 @@ function CategoryWidgetUI({
         children: CategoryRow
       }
     ) : /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(TablePaginationActions.Typography, { variant: "body2", children: intlConfig.formatMessage({
+      /* @__PURE__ */ jsxRuntime.jsx(cssUtils.Typography, { variant: "body2", children: intlConfig.formatMessage({
         id: "c4r.widgets.category.noResults"
       }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(TablePaginationActions.Typography, { component: "p", variant: "caption", mb: 2, children: intlConfig.formatMessage(
+      /* @__PURE__ */ jsxRuntime.jsx(cssUtils.Typography, { component: "p", variant: "caption", mb: 2, children: intlConfig.formatMessage(
         { id: "c4r.widgets.category.noResultsMessage" },
         { searchValue }
       ) })
@@ -1339,12 +1339,12 @@ function FormulaWidgetUI({
   if (showSkeleton) {
     return /* @__PURE__ */ jsxRuntime.jsx(FormulaSkeleton, {});
   }
-  return isComplexFormat ? /* @__PURE__ */ jsxRuntime.jsxs(TablePaginationActions.Typography, { variant: "h5", component: "div", weight: "medium", children: [
+  return isComplexFormat ? /* @__PURE__ */ jsxRuntime.jsxs(cssUtils.Typography, { variant: "h5", component: "div", weight: "medium", children: [
     /* @__PURE__ */ jsxRuntime.jsx(Prefix, { children: formattedValue.prefix }),
     formattedValue.value,
     /* @__PURE__ */ jsxRuntime.jsx(Suffix, { children: formattedValue.suffix })
   ] }) : /* @__PURE__ */ jsxRuntime.jsx(
-    TablePaginationActions.Typography,
+    cssUtils.Typography,
     {
       variant: "h5",
       component: "div",
@@ -1543,7 +1543,7 @@ function HistogramWidgetUI({
 }) {
   const intl = reactIntl.useIntl();
   const theme = material.useTheme();
-  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
+  const intlConfig = cssUtils.useImperativeIntl(intl);
   const { showSkeleton } = useSkeleton(!!isLoading);
   const filterable = !!_filterable && !!onSelectedBarsChange;
   const [echartsInstance, setEchartInstance] = React.useState();
@@ -1563,7 +1563,7 @@ function HistogramWidgetUI({
     () => ({
       show: tooltip,
       trigger: "item",
-      padding: [TablePaginationActions.SPACING * 0.5, TablePaginationActions.SPACING],
+      padding: [cssUtils.SPACING * 0.5, cssUtils.SPACING],
       borderWidth: 0,
       textStyle: {
         ...theme.typography.caption,
@@ -1601,7 +1601,7 @@ function HistogramWidgetUI({
         showMaxLabel: true,
         ...theme.typography.overlineDelicate,
         hideOverlap: true,
-        padding: [TablePaginationActions.SPACING * 0.5, TablePaginationActions.SPACING * 0.5, 0, TablePaginationActions.SPACING * 0.5],
+        padding: [cssUtils.SPACING * 0.5, cssUtils.SPACING * 0.5, 0, cssUtils.SPACING * 0.5],
         formatter: (value) => {
           const formattedValue = processFormatterResult(xAxisFormatter(value));
           if (value === min) {
@@ -1621,7 +1621,7 @@ function HistogramWidgetUI({
     const denseAxisConfig = {
       margin: 0,
       verticalAlign: "bottom",
-      padding: [0, 0, TablePaginationActions.SPACING * 1.25, 0],
+      padding: [0, 0, cssUtils.SPACING * 1.25, 0],
       inside: true,
       color: (value) => {
         const maxValue = Math.max(...data.map((d) => d ?? Number.MIN_SAFE_INTEGER)) || 1;
@@ -1636,7 +1636,7 @@ function HistogramWidgetUI({
     };
     const fullAxisConfig = {
       verticalAlign: "middle",
-      padding: [0, 0, 0, TablePaginationActions.SPACING * 0.5],
+      padding: [0, 0, 0, cssUtils.SPACING * 0.5],
       color: theme.palette.black[60]
     };
     const axisLabelConfig = yAxisType === "dense" ? denseAxisConfig : fullAxisConfig;
@@ -1731,10 +1731,10 @@ function HistogramWidgetUI({
   const options = React.useMemo(
     () => ({
       grid: {
-        left: TablePaginationActions.SPACING * 0.1,
-        right: TablePaginationActions.SPACING * 0.1,
-        top: TablePaginationActions.SPACING * 2,
-        bottom: TablePaginationActions.SPACING * 0.5,
+        left: cssUtils.SPACING * 0.1,
+        right: cssUtils.SPACING * 0.1,
+        top: cssUtils.SPACING * 2,
+        bottom: cssUtils.SPACING * 0.5,
         containLabel: true
       },
       tooltip: tooltipOptions,
@@ -1758,7 +1758,7 @@ function HistogramWidgetUI({
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     filterable && /* @__PURE__ */ jsxRuntime.jsxs(OptionsSelectedBar, { container: true, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(TablePaginationActions.Typography, { variant: "caption", weight: "strong", children: selectedBars.length > 0 ? intlConfig.formatMessage(
+      /* @__PURE__ */ jsxRuntime.jsx(cssUtils.Typography, { variant: "caption", weight: "strong", children: selectedBars.length > 0 ? intlConfig.formatMessage(
         { id: "c4r.widgets.histogram.selectedItems" },
         {
           items: processFormatterResult(
@@ -1811,7 +1811,7 @@ function AlertBody({
   children
 }) {
   return children ? /* @__PURE__ */ jsxRuntime.jsx(material.Box, { mt: 0.5, children: /* @__PURE__ */ jsxRuntime.jsx(
-    TablePaginationActions.Typography,
+    cssUtils.Typography,
     {
       component: "div",
       variant: "caption",
@@ -1828,7 +1828,7 @@ function NoDataAlert({
   ...otherProps
 }) {
   return severity ? /* @__PURE__ */ jsxRuntime.jsx(Alert.Alert, { title, severity, ...otherProps, children: /* @__PURE__ */ jsxRuntime.jsx(AlertBody, { children: body }) }) : /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { ...otherProps, children: [
-    title && /* @__PURE__ */ jsxRuntime.jsx(TablePaginationActions.Typography, { variant: "body2", children: title }),
+    title && /* @__PURE__ */ jsxRuntime.jsx(cssUtils.Typography, { variant: "body2", children: title }),
     /* @__PURE__ */ jsxRuntime.jsx(AlertBody, { color: "textSecondary", children: body })
   ] });
 }
@@ -1949,10 +1949,10 @@ function PieCentralText({
     return null;
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(Root$4, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(TablePaginationActions.Typography, { variant: "h5", children: percentage }),
+    /* @__PURE__ */ jsxRuntime.jsx(cssUtils.Typography, { variant: "h5", children: percentage }),
     /* @__PURE__ */ jsxRuntime.jsxs(Category, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(MarkerColor, { bgcolor: color, component: "span" }),
-      /* @__PURE__ */ jsxRuntime.jsx(TablePaginationActions.Typography, { component: "span", variant: "body2", noWrap: true, children: name })
+      /* @__PURE__ */ jsxRuntime.jsx(cssUtils.Typography, { component: "span", variant: "body2", noWrap: true, children: name })
     ] })
   ] });
 }
@@ -2110,7 +2110,7 @@ function ChartLegend({
     series = [{ name: "", color: theme.palette.text.disabled }];
   }
   const intl = reactIntl.useIntl();
-  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
+  const intlConfig = cssUtils.useImperativeIntl(intl);
   function handleClickRight() {
     setOffset(offset + 1);
   }
@@ -2183,7 +2183,7 @@ function ChartLegend({
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  TablePaginationActions.Typography,
+                  cssUtils.Typography,
                   {
                     variant: "overline",
                     color: selected ? void 0 : "text.disabled",
@@ -2288,7 +2288,7 @@ function PieWidgetUI({
   );
   const { showSkeleton } = useSkeleton(!!isLoading);
   const intl = reactIntl.useIntl();
-  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
+  const intlConfig = cssUtils.useImperativeIntl(intl);
   const _percentFormatter = React.useMemo(() => {
     if (percentFormatter) {
       return percentFormatter;
@@ -2304,7 +2304,7 @@ function PieWidgetUI({
       _formatter = (params) => tooltipFormatter(params, formatter, _percentFormatter);
     }
     return {
-      padding: [TablePaginationActions.SPACING * 0.5, TablePaginationActions.SPACING],
+      padding: [cssUtils.SPACING * 0.5, cssUtils.SPACING],
       backgroundColor: theme.palette.black[90],
       borderColor: "transparent",
       textStyle: { color: theme.palette.common.white },
@@ -2344,7 +2344,7 @@ function PieWidgetUI({
         }),
         radius: ["74%", "90%"],
         selectedOffset: 0,
-        bottom: TablePaginationActions.SPACING * 1.5,
+        bottom: cssUtils.SPACING * 1.5,
         label: { show: false },
         emphasis: {
           focus: "series",
@@ -2424,7 +2424,7 @@ function PieWidgetUI({
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     filterable && /* @__PURE__ */ jsxRuntime.jsxs(OptionsBar, { container: true, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(TablePaginationActions.Typography, { variant: "caption", color: "textSecondary", children: selectedCategories.length ? intlConfig.formatMessage(
+      /* @__PURE__ */ jsxRuntime.jsx(cssUtils.Typography, { variant: "caption", color: "textSecondary", children: selectedCategories.length ? intlConfig.formatMessage(
         { id: "c4r.widgets.pie.selectedItems" },
         { items: selectedCategories.length }
       ) : intlConfig.formatMessage({ id: "c4r.widgets.pie.allSelected" }) }),
@@ -2585,7 +2585,7 @@ function RangeWidgetUI({
     max
   ]);
   const intl = reactIntl.useIntl();
-  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
+  const intlConfig = cssUtils.useImperativeIntl(intl);
   const { showSkeleton } = useSkeleton(!!isLoading);
   const limitsMarks = React.useMemo(() => {
     if (!limits || limits.length !== 2) {
@@ -2657,7 +2657,7 @@ function RangeWidgetUI({
     return /* @__PURE__ */ jsxRuntime.jsx(RangeSkeleton, {});
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(Root$2, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ClearWrapper, { children: hasBeenModified && /* @__PURE__ */ jsxRuntime.jsx(TablePaginationActions.Typography, { variant: "caption", color: "primary", children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(ClearWrapper, { children: hasBeenModified && /* @__PURE__ */ jsxRuntime.jsx(cssUtils.Typography, { variant: "caption", color: "primary", children: /* @__PURE__ */ jsxRuntime.jsx(
       ClearButton,
       {
         onClick: resetSlider,
@@ -2734,7 +2734,7 @@ const GraphGrid = material.styled(SkeletonGraphGrid)(({ theme }) => ({
   justifyContent: "center",
   marginLeft: theme.spacing(4),
   containerType: "inline-size",
-  [`@container (max-width: ${TablePaginationActions.BREAKPOINTS.XS}px)`]: {
+  [`@container (max-width: ${cssUtils.BREAKPOINTS.XS}px)`]: {
     " > div": {
       maxWidth: "75%"
     }
@@ -2795,7 +2795,7 @@ function __generateDefaultConfig({
       containLabel: true
     },
     tooltip: {
-      padding: [TablePaginationActions.SPACING * 0.5, TablePaginationActions.SPACING],
+      padding: [cssUtils.SPACING * 0.5, cssUtils.SPACING],
       textStyle: {
         ...theme.typography.caption,
         fontSize: 11,
@@ -2808,7 +2808,7 @@ function __generateDefaultConfig({
     xAxis: {
       axisLabel: {
         ...theme.typography.overlineDelicate,
-        padding: [TablePaginationActions.SPACING * 0.5, 0, 0, 0],
+        padding: [cssUtils.SPACING * 0.5, 0, 0, 0],
         formatter: (v) => processFormatterResult(xAxisFormatter(v))
       }
     },
@@ -2969,9 +2969,7 @@ const TableCellStyled = material.styled(material.TableCell)(() => ({
   overflow: "hidden",
   "& p": {
     maxWidth: "100%",
-    whiteSpace: "nowrap",
-    overflow: "hidden",
-    textOverflow: "ellipsis"
+    ...cssUtils.ellipsisStyles
   }
 }));
 const StyledTablePagination = material.styled(material.TablePagination)(({ theme }) => ({
@@ -3009,7 +3007,7 @@ function TableWidgetUI({
   var _a;
   const paginationRef = React.useRef(null);
   const intl = reactIntl.useIntl();
-  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
+  const intlConfig = cssUtils.useImperativeIntl(intl);
   const { showSkeleton } = useSkeleton(!!isLoading);
   function defaultLabelDisplayedRows({
     from,
@@ -3037,7 +3035,7 @@ function TableWidgetUI({
   if (height) {
     const paginationHeight = Math.max(
       ((_a = paginationRef == null ? void 0 : paginationRef.current) == null ? void 0 : _a.clientHeight) ?? 0,
-      pagination ? TablePaginationActions.SPACING * 6 : 0
+      pagination ? cssUtils.SPACING * 6 : 0
     );
     fixedHeightStyle.height = `calc(${height} - ${paginationHeight}px)`;
   }
@@ -3091,7 +3089,7 @@ function TableWidgetUI({
         onPageChange: handleChangePage,
         onRowsPerPageChange: handleChangeRowsPerPage,
         ActionsComponent: () => /* @__PURE__ */ jsxRuntime.jsx(
-          TablePaginationActions.TablePaginationActions,
+          cssUtils.TablePaginationActions,
           {
             count: totalCount,
             rowsPerPage,
@@ -3573,7 +3571,7 @@ function TimeSeriesProvider({
   const [_isPlaying, setIsPlaying] = React.useState(isPlaying);
   const [_isPaused, setIsPaused] = React.useState(isPaused);
   const [_timeWindow, setTimeWindow] = React.useState([]);
-  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
+  const intlConfig = cssUtils.useImperativeIntl(intl);
   React.useEffect(() => {
     const sorted = _timeWindow.sort((timeA, timeB) => timeA < timeB ? -1 : 1).map(getDate);
     onTimeWindowUpdate == null ? void 0 : onTimeWindowUpdate(sorted);
@@ -3874,11 +3872,11 @@ function addEventWithCleanUp(zr, eventKey, event) {
     };
   }
 }
-const CHART_HEIGHT_DEFAULT = TablePaginationActions.SPACING * 22;
+const CHART_HEIGHT_DEFAULT = cssUtils.SPACING * 22;
 const CHART_HEIGHT_FITHEIGHT = "100%";
 const DEFAULT_SPLIT_NUMBER = 5;
 const MIN_ADAPTIVE_SPLIT_NUMBER = 3;
-const ADAPTIVE_SPLIT_NUMBER_SPACING = TablePaginationActions.SPACING * 20;
+const ADAPTIVE_SPLIT_NUMBER_SPACING = cssUtils.SPACING * 20;
 function TimeSeriesChart({
   chartType,
   formatter,
@@ -3915,7 +3913,7 @@ function TimeSeriesChart({
       show: tooltip,
       trigger: "axis",
       appendToBody: true,
-      padding: [TablePaginationActions.SPACING * 0.5, TablePaginationActions.SPACING],
+      padding: [cssUtils.SPACING * 0.5, cssUtils.SPACING],
       textStyle: {
         ...theme.typography.caption,
         fontSize: 11,
@@ -3926,9 +3924,9 @@ function TimeSeriesChart({
       position: (point, params, dom, rect, size) => {
         const position = { top: 0 };
         if (size.contentSize[0] < size.viewSize[0] - point[0]) {
-          position.left = point[0] + TablePaginationActions.SPACING * 1.5;
+          position.left = point[0] + cssUtils.SPACING * 1.5;
         } else {
-          position.right = size.viewSize[0] - point[0] + TablePaginationActions.SPACING * 1.5;
+          position.right = size.viewSize[0] - point[0] + cssUtils.SPACING * 1.5;
         }
         return position;
       },
@@ -3940,7 +3938,7 @@ function TimeSeriesChart({
     const denseAxisConfig = {
       margin: 0,
       verticalAlign: "bottom",
-      padding: [0, 0, TablePaginationActions.SPACING * 1.25, 0],
+      padding: [0, 0, cssUtils.SPACING * 1.25, 0],
       inside: true,
       color: (value) => {
         let col = "transparent";
@@ -3953,7 +3951,7 @@ function TimeSeriesChart({
     const fullAxisConfig = {
       margin: 0,
       verticalAlign: "middle",
-      padding: [0, TablePaginationActions.SPACING * 0.75, 0, 0],
+      padding: [0, cssUtils.SPACING * 0.75, 0, 0],
       color: theme.palette.black[60]
     };
     const yAxisLabelConfig = yAxisType === "dense" ? denseAxisConfig : fullAxisConfig;
@@ -4081,10 +4079,10 @@ function TimeSeriesChart({
   const options = React.useMemo(
     () => ({
       grid: {
-        left: TablePaginationActions.SPACING * (yAxisType === "dense" ? 2 : 3.5),
-        top: TablePaginationActions.SPACING * 4,
-        right: TablePaginationActions.SPACING * 2,
-        bottom: TablePaginationActions.SPACING * 3
+        left: cssUtils.SPACING * (yAxisType === "dense" ? 2 : 3.5),
+        top: cssUtils.SPACING * 4,
+        right: cssUtils.SPACING * 2,
+        bottom: cssUtils.SPACING * 3
       },
       color: [theme.palette.secondary.main],
       tooltip: tooltipOptions,
@@ -4270,7 +4268,7 @@ function TimeSeriesControls({
         open: Boolean(anchorSpeedEl),
         onClose: handleCloseSpeedMenu,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(material.MenuItem, { disabled: true, children: /* @__PURE__ */ jsxRuntime.jsx(TablePaginationActions.Typography, { variant: "caption", color: "textSecondary", children: intl.formatMessage({ id: "c4r.widgets.timeSeries.speed" }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(material.MenuItem, { disabled: true, children: /* @__PURE__ */ jsxRuntime.jsx(cssUtils.Typography, { variant: "caption", color: "textSecondary", children: intl.formatMessage({ id: "c4r.widgets.timeSeries.speed" }) }) }),
           SPEED_FACTORS.map((speedItem) => /* @__PURE__ */ jsxRuntime.jsxs(
             material.MenuItem,
             {
@@ -4443,7 +4441,7 @@ const ControlsBox = material.styled(material.Box)(({ theme }) => ({
   flexShrink: 0,
   marginLeft: 0,
   paddingLeft: theme.spacing(1),
-  [`@container (max-width: ${TablePaginationActions.BREAKPOINTS.XS}px)`]: {
+  [`@container (max-width: ${cssUtils.BREAKPOINTS.XS}px)`]: {
     paddingLeft: 0
   },
   paddingBottom: theme.spacing(1.5),
@@ -4454,7 +4452,7 @@ const ChartBox = material.styled(material.Box)(({ theme }) => ({
   minWidth: 0,
   paddingLeft: theme.spacing(5),
   paddingBottom: theme.spacing(1.5),
-  [`@container (max-width: ${TablePaginationActions.BREAKPOINTS.XS}px)`]: {
+  [`@container (max-width: ${cssUtils.BREAKPOINTS.XS}px)`]: {
     paddingLeft: theme.spacing(1)
   }
 }));
@@ -4792,7 +4790,7 @@ function TimeSeriesWidgetUIContent({
   );
   const isLegendVisible = Boolean(showLegend ?? series.length > 1);
   const header = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(material.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(TablePaginationActions.Typography, { color: "textSecondary", variant: "caption", children: currentDate || "-" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(material.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(cssUtils.Typography, { color: "textSecondary", variant: "caption", children: currentDate || "-" }) }),
     filterable && showClearButton && /* @__PURE__ */ jsxRuntime.jsx(
       material.Link,
       {
@@ -4919,10 +4917,7 @@ const Text = material.styled(material.Typography, {
     WebkitLineClamp: 2,
     WebkitBoxOrient: "vertical"
   },
-  ...!expanded && {
-    whiteSpace: "nowrap",
-    textOverflow: "ellipsis"
-  }
+  ...!expanded && cssUtils.ellipsisStyles
 }));
 const HeaderItems = material.styled(material.Grid)(({ theme }) => ({
   display: "flex",
@@ -5393,7 +5388,7 @@ function ComparativeCategoryWidgetUI({
   const [tempSelection, setTempSelection] = React.useState(selectedCategories);
   const [searchValue, setSearchValue] = React.useState("");
   const intl = reactIntl.useIntl();
-  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
+  const intlConfig = cssUtils.useImperativeIntl(intl);
   const processedData = React.useMemo(() => {
     const _colors = colors.length ? colors : [
       theme.palette.secondary.main,
@@ -5510,11 +5505,11 @@ function ComparativeCategoryWidgetUI({
   const clickHandler = filterable ? searchActive ? selectTempCategory : selectCategory : void 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(Wrapper, { children: [
     filterable ? /* @__PURE__ */ jsxRuntime.jsxs(Toolbar, { center: true, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(TablePaginationActions.Typography, { variant: "caption", children: selectedCategories.length > 0 ? intlConfig.formatMessage(
+      /* @__PURE__ */ jsxRuntime.jsx(cssUtils.Typography, { variant: "caption", children: selectedCategories.length > 0 ? intlConfig.formatMessage(
         { id: "c4r.widgets.category.selectedItems" },
         { items: selectedCategories.length }
       ) : intlConfig.formatMessage({ id: "c4r.widgets.category.all" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(TablePaginationActions.Typography, { variant: "caption", component: "div", children: searchActive ? /* @__PURE__ */ jsxRuntime.jsx(Alert.Link, { onClick: applyTempSelection, children: intlConfig.formatMessage({ id: "c4r.widgets.category.apply" }) }) : blockingActive ? /* @__PURE__ */ jsxRuntime.jsx(Alert.Link, { onClick: disableBlocking, children: intlConfig.formatMessage({
+      /* @__PURE__ */ jsxRuntime.jsx(cssUtils.Typography, { variant: "caption", component: "div", children: searchActive ? /* @__PURE__ */ jsxRuntime.jsx(Alert.Link, { onClick: applyTempSelection, children: intlConfig.formatMessage({ id: "c4r.widgets.category.apply" }) }) : blockingActive ? /* @__PURE__ */ jsxRuntime.jsx(Alert.Link, { onClick: disableBlocking, children: intlConfig.formatMessage({
         id: "c4r.widgets.category.unlock"
       }) }) : selectedCategories.length ? /* @__PURE__ */ jsxRuntime.jsxs(
         material.Box,
@@ -5552,10 +5547,10 @@ function ComparativeCategoryWidgetUI({
     ) }) : null,
     /* @__PURE__ */ jsxRuntime.jsxs(CategoriesList, { children: [
       list.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(TablePaginationActions.Typography, { variant: "body2", children: intlConfig.formatMessage({
+        /* @__PURE__ */ jsxRuntime.jsx(cssUtils.Typography, { variant: "body2", children: intlConfig.formatMessage({
           id: "c4r.widgets.category.noResults"
         }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(TablePaginationActions.Typography, { variant: "caption", children: intlConfig.formatMessage(
+        /* @__PURE__ */ jsxRuntime.jsx(cssUtils.Typography, { variant: "caption", children: intlConfig.formatMessage(
           { id: "c4r.widgets.category.noResultsMessage" },
           { searchValue }
         ) })
@@ -5593,11 +5588,11 @@ function ComparativeCategoryWidgetUI({
     searchActive ? /* @__PURE__ */ jsxRuntime.jsx(material.Button, { size: "small", color: "primary", onClick: disableSearchMode, children: intlConfig.formatMessage({ id: "c4r.widgets.category.cancel" }) }) : null,
     /* @__PURE__ */ jsxRuntime.jsx(BulletListWrapper, { children: names.map((name, i) => /* @__PURE__ */ jsxRuntime.jsxs(BulletWrapper, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(Bullet, { color: (colors == null ? void 0 : colors[i]) ?? theme.palette.background.default }),
-      /* @__PURE__ */ jsxRuntime.jsx(TablePaginationActions.Typography, { variant: "overline", children: name })
+      /* @__PURE__ */ jsxRuntime.jsx(cssUtils.Typography, { variant: "overline", children: name })
     ] }, names[i])) })
   ] });
 }
-const Note = material.styled(TablePaginationActions.Typography)(({ theme }) => ({
+const Note = material.styled(cssUtils.Typography)(({ theme }) => ({
   display: "inline-block",
   marginTop: theme.spacing(0.5)
 }));
@@ -5614,10 +5609,10 @@ const MainLine = material.styled("div")(({ theme }) => ({
   color: theme.palette.text.primary,
   display: "flex"
 }));
-const Preffix = material.styled(TablePaginationActions.Typography)(({ theme }) => ({
+const Preffix = material.styled(cssUtils.Typography)(({ theme }) => ({
   marginRight: theme.spacing(0.5)
 }));
-const Unit = material.styled(TablePaginationActions.Typography)(({ theme }) => ({
+const Unit = material.styled(cssUtils.Typography)(({ theme }) => ({
   marginLeft: theme.spacing(0.5)
 }));
 function FormulaValue({
@@ -5765,19 +5760,19 @@ function ComparativePieWidgetUI({
       data: legendData,
       selectedMode: false,
       type: "scroll",
-      left: TablePaginationActions.SPACING,
-      bottom: TablePaginationActions.SPACING * -0.5,
-      itemGap: TablePaginationActions.SPACING * 3,
+      left: cssUtils.SPACING,
+      bottom: cssUtils.SPACING * -0.5,
+      itemGap: cssUtils.SPACING * 3,
       icon: "circle",
-      itemWidth: TablePaginationActions.SPACING,
-      itemHeight: TablePaginationActions.SPACING,
+      itemWidth: cssUtils.SPACING,
+      itemHeight: cssUtils.SPACING,
       textStyle: {
         ...theme.typography.overline,
         color: theme.palette.text.primary,
         fontWeight: 400,
         lineHeight: 1,
         verticalAlign: "bottom",
-        padding: [0, 0, 0, TablePaginationActions.SPACING * 0.5]
+        padding: [0, 0, 0, cssUtils.SPACING * 0.5]
       },
       inactiveColor: theme.palette.text.disabled,
       pageIcons: {
@@ -5786,13 +5781,13 @@ function ComparativePieWidgetUI({
           "path://M9 16.59 13.3265857 12 9 7.41 10.3319838 6 16 12 10.3319838 18z"
         ]
       },
-      pageIconSize: TablePaginationActions.SPACING * 1.5,
+      pageIconSize: cssUtils.SPACING * 1.5,
       pageIconColor: theme.palette.text.secondary,
       pageIconInactiveColor: theme.palette.text.disabled,
       pageTextStyle: {
         fontFamily: theme.typography.overline.fontFamily,
-        fontSize: TablePaginationActions.SPACING * 1.5,
-        lineHeight: TablePaginationActions.SPACING * 1.75,
+        fontSize: cssUtils.SPACING * 1.5,
+        lineHeight: cssUtils.SPACING * 1.75,
         fontWeight: 400,
         color: theme.palette.text.primary
       }
@@ -5804,15 +5799,15 @@ function ComparativePieWidgetUI({
       rich: {
         b: {
           fontFamily: theme.typography.overline.fontFamily,
-          fontSize: TablePaginationActions.SPACING * 1.75,
-          lineHeight: TablePaginationActions.SPACING * 1.75,
+          fontSize: cssUtils.SPACING * 1.75,
+          lineHeight: cssUtils.SPACING * 1.75,
           fontWeight: 400,
           color: theme.palette.text.primary
         },
         per: {
           ...theme.typography.overline,
-          fontSize: TablePaginationActions.SPACING * 3,
-          lineHeight: TablePaginationActions.SPACING * 4.5,
+          fontSize: cssUtils.SPACING * 3,
+          lineHeight: cssUtils.SPACING * 4.5,
           fontWeight: 600,
           color: theme.palette.text.primary
         }
@@ -5831,7 +5826,7 @@ function ComparativePieWidgetUI({
         radius: i === 0 ? ["75%", "90%"] : ["56%", "72%"],
         selectedOffset: 0,
         hoverOffset: 5,
-        bottom: TablePaginationActions.SPACING * 2.5,
+        bottom: cssUtils.SPACING * 2.5,
         avoidLabelOverlap: true,
         label: { show: false, ...labelOptions },
         emphasis: {
@@ -6026,7 +6021,7 @@ function FeatureSelectionUIDropdown({
         disabled: editDisabled && isEditItem(mode),
         children: /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { display: "flex", justifyContent: "space-between", alignItems: "center", children: [
           mode.icon,
-          /* @__PURE__ */ jsxRuntime.jsx(material.Box, { ml: 2, children: /* @__PURE__ */ jsxRuntime.jsx(TablePaginationActions.Typography, { variant: "body2", color: "inherit", children: material.capitalize(mode.label) }) })
+          /* @__PURE__ */ jsxRuntime.jsx(material.Box, { ml: 2, children: /* @__PURE__ */ jsxRuntime.jsx(cssUtils.Typography, { variant: "body2", color: "inherit", children: material.capitalize(mode.label) }) })
         ] })
       },
       mode.id
@@ -6055,7 +6050,7 @@ function FeatureSelectionUIDropdown({
         onClose: closeDropdown,
         MenuListProps: { "aria-labelledby": "feature-selection-menu-button" },
         children: [
-          menuHeaderText && /* @__PURE__ */ jsxRuntime.jsx(DisabledMenuItem, { disabled: true, children: /* @__PURE__ */ jsxRuntime.jsx(TablePaginationActions.Typography, { variant: "caption", color: "textSecondary", children: menuHeaderText }) }),
+          menuHeaderText && /* @__PURE__ */ jsxRuntime.jsx(DisabledMenuItem, { disabled: true, children: /* @__PURE__ */ jsxRuntime.jsx(cssUtils.Typography, { variant: "caption", color: "textSecondary", children: menuHeaderText }) }),
           !!selectionModes.length && selectionModes.map(createMenuItemWrapper),
           showDivider && /* @__PURE__ */ jsxRuntime.jsx(material.Divider, { sx: { margin: ({ spacing }) => spacing(1, 0) } }),
           !!editModes.length && editModes.map(createMenuItemWrapper)
@@ -6089,7 +6084,7 @@ function FeatureSelectionUIGeometryChips({
   chipLabel
 }) {
   const intl = reactIntl.useIntl();
-  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
+  const intlConfig = cssUtils.useImperativeIntl(intl);
   function translateType(type) {
     if (type === "MultiPoint") {
       return intlConfig.formatMessage({
@@ -6190,7 +6185,7 @@ function FeatureSelectionWidgetUI({
   chipLabel
 }) {
   const intl = reactIntl.useIntl();
-  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
+  const intlConfig = cssUtils.useImperativeIntl(intl);
   const selectionModeWithLocales = React.useMemo(() => {
     return selectionModes.map((mode) => ({
       ...mode,
@@ -6358,8 +6353,8 @@ const LegendIconWrapper = material.styled("li")(() => ({
 }));
 const LegendIconImageWrapper = material.styled("div")(({ theme }) => ({
   marginRight: theme.spacing(1.5),
-  width: TablePaginationActions.ICON_SIZE_MEDIUM,
-  height: TablePaginationActions.ICON_SIZE_MEDIUM,
+  width: cssUtils.ICON_SIZE_MEDIUM,
+  height: cssUtils.ICON_SIZE_MEDIUM,
   "& img": {
     margin: "auto",
     display: "block"
@@ -6390,7 +6385,7 @@ function LegendOpacityControl({
   onChange
 }) {
   const intl = reactIntl.useIntl();
-  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
+  const intlConfig = cssUtils.useImperativeIntl(intl);
   function handleTextFieldChange(e) {
     const newOpacity = parseInt(e.target.value || "0");
     const clamped = Math.min(Math.max(newOpacity, 0), 100);
@@ -6482,7 +6477,7 @@ function LegendLayerTitle({
     }
   }, [title, visible]);
   const element = /* @__PURE__ */ jsxRuntime.jsx(
-    TablePaginationActions.Typography,
+    cssUtils.Typography,
     {
       ref,
       color: visible ? "textPrimary" : "textSecondary",
@@ -6522,7 +6517,7 @@ function LegendCategories({
   const palette = paletteUtils.getPalette(colors, labels.length);
   const showHelperText = labels.length > MAX_CATEGORIES;
   const intl = reactIntl.useIntl();
-  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
+  const intlConfig = cssUtils.useImperativeIntl(intl);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(LegendVariableList, { "data-testid": "categories-legend", children: labels.slice(0, MAX_CATEGORIES).map((label, idx) => /* @__PURE__ */ jsxRuntime.jsx(
       LegendCategoriesRow,
@@ -6536,7 +6531,7 @@ function LegendCategories({
       `${label}${idx}`
     )) }),
     showHelperText && /* @__PURE__ */ jsxRuntime.jsx(
-      TablePaginationActions.Typography,
+      cssUtils.Typography,
       {
         variant: "caption",
         color: "textSecondary",
@@ -6680,7 +6675,7 @@ function LegendProportion({
   legend
 }) {
   const intl = reactIntl.useIntl();
-  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
+  const intlConfig = cssUtils.useImperativeIntl(intl);
   const showMinMax = legend.showMinMax ?? true;
   const { min, max, error } = calculateRange(legend);
   const [step1, step2] = !error ? calculateSteps(min, max) : [0, 0];
@@ -6693,20 +6688,20 @@ function LegendProportion({
       },
       index
     )) }),
-    /* @__PURE__ */ jsxRuntime.jsx(LabelList, { children: error ? /* @__PURE__ */ jsxRuntime.jsx(material.Box, { maxWidth: 240, children: /* @__PURE__ */ jsxRuntime.jsx(TablePaginationActions.Typography, { variant: "overline", children: "You need to specify valid numbers for the labels property" }) }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(TablePaginationActions.Typography, { variant: "overline", color: "textSecondary", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(LabelList, { children: error ? /* @__PURE__ */ jsxRuntime.jsx(material.Box, { maxWidth: 240, children: /* @__PURE__ */ jsxRuntime.jsx(cssUtils.Typography, { variant: "overline", children: "You need to specify valid numbers for the labels property" }) }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(cssUtils.Typography, { variant: "overline", color: "textSecondary", children: [
         showMinMax && intlConfig.formatMessage({ id: "c4r.widgets.legend.max" }) + ": ",
         intl.formatNumber(max, {
           maximumSignificantDigits: MAX_SIG_DIGITS
         })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(TablePaginationActions.Typography, { variant: "overline", color: "textSecondary", children: intl.formatNumber(step2, {
+      /* @__PURE__ */ jsxRuntime.jsx(cssUtils.Typography, { variant: "overline", color: "textSecondary", children: intl.formatNumber(step2, {
         maximumSignificantDigits: MAX_SIG_DIGITS
       }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(TablePaginationActions.Typography, { variant: "overline", color: "textSecondary", children: intl.formatNumber(step1, {
+      /* @__PURE__ */ jsxRuntime.jsx(cssUtils.Typography, { variant: "overline", color: "textSecondary", children: intl.formatNumber(step1, {
         maximumSignificantDigits: MAX_SIG_DIGITS
       }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs(TablePaginationActions.Typography, { variant: "overline", color: "textSecondary", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(cssUtils.Typography, { variant: "overline", color: "textSecondary", children: [
         showMinMax && intlConfig.formatMessage({ id: "c4r.widgets.legend.min" }) + ": ",
         intl.formatNumber(min, {
           maximumSignificantDigits: MAX_SIG_DIGITS
@@ -6749,7 +6744,7 @@ function LegendIcon({
         src: icons[idx],
         alt: label,
         width: "auto",
-        height: TablePaginationActions.ICON_SIZE_MEDIUM
+        height: cssUtils.ICON_SIZE_MEDIUM
       }
     ) }),
     /* @__PURE__ */ jsxRuntime.jsx(LegendLayerTitle, { visible: true, title: label })
@@ -6778,7 +6773,7 @@ function LegendRamp({
     minLabel = "< " + minLabel;
     maxLabel = "≥ " + maxLabel;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(material.Box, { py: 2, "data-testid": "ramp-legend", children: error ? /* @__PURE__ */ jsxRuntime.jsx(material.Box, { maxWidth: 240, children: /* @__PURE__ */ jsxRuntime.jsx(TablePaginationActions.Typography, { variant: "overline", children: "You need to specify valid numbers for the labels property" }) }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(material.Box, { py: 2, "data-testid": "ramp-legend", children: error ? /* @__PURE__ */ jsxRuntime.jsx(material.Box, { maxWidth: 240, children: /* @__PURE__ */ jsxRuntime.jsx(cssUtils.Typography, { variant: "overline", children: "You need to specify valid numbers for the labels property" }) }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(material.Box, { display: "flex", pb: 1, children: isContinuous ? /* @__PURE__ */ jsxRuntime.jsx(
       StepsContinuous,
       {
@@ -6795,8 +6790,8 @@ function LegendRamp({
       }
     ) }),
     /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { display: "flex", justifyContent: "space-between", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(TablePaginationActions.Typography, { variant: "overlineDelicate", color: "textSecondary", children: minLabel }),
-      /* @__PURE__ */ jsxRuntime.jsx(TablePaginationActions.Typography, { variant: "overlineDelicate", color: "textSecondary", children: maxLabel })
+      /* @__PURE__ */ jsxRuntime.jsx(cssUtils.Typography, { variant: "overlineDelicate", color: "textSecondary", children: minLabel }),
+      /* @__PURE__ */ jsxRuntime.jsx(cssUtils.Typography, { variant: "overlineDelicate", color: "textSecondary", children: maxLabel })
     ] })
   ] }) });
 }
@@ -6844,11 +6839,11 @@ const legendTypeMap = {
 };
 function LegendUnknown({ legend }) {
   const intl = reactIntl.useIntl();
-  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
+  const intlConfig = cssUtils.useImperativeIntl(intl);
   if (legend.select || !legend.type) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(TablePaginationActions.Typography, { variant: "body2", color: "textSecondary", component: "p", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(cssUtils.Typography, { variant: "body2", color: "textSecondary", component: "p", children: [
     legend.type,
     " ",
     intlConfig.formatMessage({ id: "c4r.widgets.legend.notSupported" }),
@@ -6875,7 +6870,7 @@ function LegendLayerVariable({
 }) {
   var _a;
   const intl = reactIntl.useIntl();
-  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
+  const intlConfig = cssUtils.useImperativeIntl(intl);
   const type = legend.type;
   const TypeComponent = legendTypeMap[type] ?? customLegendTypes[type] ?? LegendUnknown;
   const TypedComponent = TypeComponent;
@@ -6883,7 +6878,7 @@ function LegendLayerVariable({
   return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { component: "li", "data-testid": "legend-layer-variable", px: 2, children: [
     legend.attr ? /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { pb: 1, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        TablePaginationActions.Typography,
+        cssUtils.Typography,
         {
           gutterBottom: true,
           variant: "overlineDelicate",
@@ -6892,10 +6887,10 @@ function LegendLayerVariable({
           children: intlConfig.formatMessage({ id: getLegendSubtitle(legend) })
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(TablePaginationActions.Typography, { variant: "caption", component: "p", children: legend.attr })
+      /* @__PURE__ */ jsxRuntime.jsx(cssUtils.Typography, { variant: "caption", component: "p", children: legend.attr })
     ] }) : null,
     legend.select ? /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { pb: 1, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(TablePaginationActions.Typography, { variant: "caption", weight: "medium", component: "p", children: legend.select.label }),
+      /* @__PURE__ */ jsxRuntime.jsx(cssUtils.Typography, { variant: "caption", weight: "medium", component: "p", children: legend.select.label }),
       /* @__PURE__ */ jsxRuntime.jsx(
         material.Select,
         {
@@ -6945,7 +6940,7 @@ function LegendLayer({
   currentZoom = 0
 }) {
   const intl = reactIntl.useIntl();
-  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
+  const intlConfig = cssUtils.useImperativeIntl(intl);
   const menuAnchorRef = React.useRef(null);
   const [opacityOpen, setOpacityOpen] = React.useState(false);
   const id = layer.id;
@@ -7003,7 +6998,7 @@ function LegendLayer({
               id: "c4r.widgets.legend.zoomLevelTooltip"
             }),
             children: /* @__PURE__ */ jsxRuntime.jsxs(
-              TablePaginationActions.Typography,
+              cssUtils.Typography,
               {
                 color: visible ? "textPrimary" : "textSecondary",
                 variant: "caption",
@@ -7072,7 +7067,7 @@ function LegendLayer({
         }
       ),
       helperText && /* @__PURE__ */ jsxRuntime.jsx(
-        TablePaginationActions.Typography,
+        cssUtils.Typography,
         {
           variant: "caption",
           color: "textSecondary",
@@ -7122,9 +7117,9 @@ function LegendWidgetUI({
   sx
 }) {
   const intl = reactIntl.useIntl();
-  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
+  const intlConfig = cssUtils.useImperativeIntl(intl);
   const legendToggleHeader = /* @__PURE__ */ jsxRuntime.jsxs(LegendToggleHeader, { collapsed, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(TablePaginationActions.Typography, { variant: "caption", flexGrow: 1, children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx(cssUtils.Typography, { variant: "caption", flexGrow: 1, children: title }),
     /* @__PURE__ */ jsxRuntime.jsx(
       material.Tooltip,
       {