@carto/meridian-ds 1.4.3-alpha-codemirror.6 → 1.4.3-alpha-tag.2

package/dist/components/index.cjs

@@ -3,10 +3,10 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const material = require("@mui/material");
-const palette = require("../palette-CD5ph5A-.cjs");
+const TablePaginationActions = require("../TablePaginationActions-BG2gWq0M.cjs");
 const reactIntl = require("react-intl");
 const iconsMaterial = require("@mui/icons-material");
-const Alert$1 = require("../Alert-ChcvNOU6.cjs");
+const Alert$1 = require("../Alert-DFaAeTZf.cjs");
 require("cartocolor");
 const MenuItem = require("../MenuItem-Br2jY2lt.cjs");
 const ArrowDown = require("../ArrowDown-8fLj23Ge.cjs");
@@ -14,31 +14,6 @@ const DatePicker$1 = require("@mui/x-date-pickers/DatePicker");
 const xDatePickers = require("@mui/x-date-pickers");
 const TimePicker$1 = require("@mui/x-date-pickers/TimePicker");
 const DateTimePicker$1 = require("@mui/x-date-pickers/DateTimePicker");
-const OpenDiagonallyRight = require("../OpenDiagonallyRight-BrRyCV4Q.cjs");
-const reactCodemirror2 = require("react-codemirror2");
-const colors = require("@mui/material/colors");
-require("codemirror/lib/codemirror.css");
-require("codemirror/lib/codemirror.js");
-require("codemirror/mode/sql/sql.js");
-require("codemirror/mode/javascript/javascript.js");
-require("codemirror/mode/htmlmixed/htmlmixed.js");
-require("codemirror/mode/markdown/markdown.js");
-require("codemirror/mode/shell/shell.js");
-require("codemirror/mode/python/python.js");
-require("codemirror/addon/display/placeholder");
-require("codemirror/addon/hint/sql-hint.js");
-require("codemirror/addon/hint/show-hint.css");
-require("codemirror/addon/hint/show-hint.js");
-require("codemirror/addon/selection/active-line.js");
-require("codemirror/addon/edit/matchbrackets.js");
-require("codemirror/addon/fold/foldcode.js");
-require("codemirror/addon/fold/foldgutter.js");
-require("codemirror/addon/fold/foldgutter.css");
-require("codemirror/addon/fold/brace-fold.js");
-require("codemirror/addon/fold/xml-fold.js");
-require("codemirror/addon/fold/indent-fold.js");
-require("codemirror/addon/fold/markdown-fold.js");
-require("codemirror/addon/fold/comment-fold.js");
 const ClickAwayListener = require("@mui/material/ClickAwayListener");
 const IndicatorIcon = material.styled(material.Box)({
   position: "absolute",
@@ -95,17 +70,17 @@ function _Button({
       ...otherProps,
       role: otherProps.href ? "link" : "button",
       ref,
-      children: /* @__PURE__ */ jsxRuntime.jsx(palette.Typography, { variant: "inherit", color: "inherit", noWrap: true, component: "span", children: renderContent() })
+      children: /* @__PURE__ */ jsxRuntime.jsx(TablePaginationActions.Typography, { variant: "inherit", color: "inherit", noWrap: true, component: "span", children: renderContent() })
     }
   );
 }
 const Button = React.forwardRef(_Button);
-const Root$5 = material.styled(material.Box)(({ theme }) => ({
+const Root$4 = material.styled(material.Box)(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   gap: theme.spacing(0.5)
 }));
-const Indicator = material.styled(palette.Typography)(({ theme }) => ({
+const Indicator = material.styled(TablePaginationActions.Typography)(({ theme }) => ({
   ".Mui-disabled &": {
     color: theme.palette.text.disabled
   }
@@ -113,9 +88,9 @@ const Indicator = material.styled(palette.Typography)(({ theme }) => ({
 const Icon = material.styled(material.Box)(({ theme }) => ({
   display: "flex",
   svg: {
-    width: palette.ICON_SIZE_SMALL,
-    height: palette.ICON_SIZE_SMALL,
-    fontSize: palette.ICON_SIZE_SMALL,
+    width: TablePaginationActions.ICON_SIZE_SMALL,
+    height: TablePaginationActions.ICON_SIZE_SMALL,
+    fontSize: TablePaginationActions.ICON_SIZE_SMALL,
     path: {
       fill: theme.palette.text.secondary,
       ".Mui-disabled &": {
@@ -130,7 +105,7 @@ function LabelWithIndicator({
   icon,
   inheritSize
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(Root$5, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Root$4, { children: [
     label,
     type && /* @__PURE__ */ jsxRuntime.jsx(
       Indicator,
@@ -147,7 +122,7 @@ function LabelWithIndicator({
 }
 function _PasswordField({ InputProps, size = "small", ...otherProps }, ref) {
   const intl = reactIntl.useIntl();
-  const intlConfig = palette.useImperativeIntl(intl);
+  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
   const [showPassword, setShowPassword] = React.useState(false);
   const handleClickShowPassword = () => setShowPassword(!showPassword);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -273,7 +248,7 @@ function _SelectField({
             },
             children: [
               placeholder && /* @__PURE__ */ jsxRuntime.jsx(PlaceholderItem, { disabled: true, value: "", children: /* @__PURE__ */ jsxRuntime.jsx(
-                palette.Typography,
+                TablePaginationActions.Typography,
                 {
                   variant: isSmall ? "body2" : "body1",
                   color: "text.hint",
@@ -542,7 +517,7 @@ function _MenuItemFilter({
   "data-testid": dataTestId
 }, ref) {
   const intl = reactIntl.useIntl();
-  const intlConfig = palette.useImperativeIntl(intl);
+  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
   return /* @__PURE__ */ jsxRuntime.jsx(
     StyledMenuItem$1,
     {
@@ -683,14 +658,14 @@ function _MultipleSelectField({
   const isSmall = size === "small";
   const paddingSize = isSmall || variant === "standard" ? 0 : 2;
   const intl = reactIntl.useIntl();
-  const intlConfig = palette.useImperativeIntl(intl);
+  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
   const counterText = `${currentOptions.length} ${intlConfig.formatMessage({
     id: "c4r.form.selected"
   })}`;
   const renderValue = React.useMemo(() => {
     if (areAllSelected) {
       return /* @__PURE__ */ jsxRuntime.jsx(
-        palette.Typography,
+        TablePaginationActions.Typography,
         {
           component: "span",
           variant: isSmall ? "body2" : "body1",
@@ -702,7 +677,7 @@ function _MultipleSelectField({
     }
     if (areAnySelected) {
       return /* @__PURE__ */ jsxRuntime.jsx(
-        palette.Typography,
+        TablePaginationActions.Typography,
         {
           component: "span",
           variant: isSmall ? "body2" : "body1",
@@ -713,7 +688,7 @@ function _MultipleSelectField({
       );
     }
     return /* @__PURE__ */ jsxRuntime.jsx(
-      palette.Typography,
+      TablePaginationActions.Typography,
       {
         component: "span",
         variant: isSmall ? "body2" : "body1",
@@ -920,7 +895,7 @@ function useFileUpload({
   uploadInputRef
 }) {
   const intl = reactIntl.useIntl();
-  const intlConfig = palette.useImperativeIntl(intl);
+  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
   const [filesText, setFilesText] = React.useState("");
   const [dragOver, setDragOver] = React.useState(false);
   React.useEffect(() => {
@@ -1157,7 +1132,7 @@ function useAutocompleteRenderOption() {
                 title
               ),
               secondaryText && /* @__PURE__ */ jsxRuntime.jsx(
-                palette.Typography,
+                TablePaginationActions.Typography,
                 {
                   component: "p",
                   variant: "caption",
@@ -1181,7 +1156,7 @@ function useCreatableAutocomplete({
   multiple
 }) {
   const intl = reactIntl.useIntl();
-  const intlConfig = palette.useImperativeIntl(intl);
+  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
   const filter = material.createFilterOptions();
   const { renderOption: autocompleteRenderOption } = useAutocompleteRenderOption();
   const creatableFilterOptions = (options, params) => {
@@ -1452,7 +1427,7 @@ const _CopiableComponent = ({
   ...props
 }, ref) => {
   const intl = reactIntl.useIntl();
-  const intlConfig = palette.useImperativeIntl(intl);
+  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
   const [open, setOpen] = React.useState(false);
   const { copy } = useCopyValue(copyText, copiedText);
   const handleClick = (e) => {
@@ -1585,8 +1560,8 @@ const StyledAvatar = material.styled(material.Avatar, {
     ...theme.typography.caption,
     fontWeight: 500,
     svg: {
-      width: palette.ICON_SIZE_SMALL,
-      height: palette.ICON_SIZE_SMALL
+      width: TablePaginationActions.ICON_SIZE_SMALL,
+      height: TablePaginationActions.ICON_SIZE_SMALL
     }
   },
   ...disabled && {
@@ -1609,7 +1584,7 @@ const SnackbarRoot = material.styled(material.Snackbar)(({ theme }) => ({
     maxWidth: `${MAX_WIDTH}px`
   }
 }));
-const Content$4 = material.styled(material.Box, {
+const Content$3 = material.styled(material.Box, {
   shouldForwardProp: (prop) => prop !== "autoWidth"
 })(({ autoWidth, theme }) => ({
   minWidth: "100%",
@@ -1691,7 +1666,7 @@ const CloseButtonWrapper = material.styled(material.Box)(({ theme }) => ({
 }));
 function Snackbar({
   severity = "neutral",
-  autoHideDuration = palette.NOTIFICATION_DURATION_IN_MS,
+  autoHideDuration = TablePaginationActions.NOTIFICATION_DURATION_IN_MS,
   closeable = true,
   children,
   title,
@@ -1703,11 +1678,11 @@ function Snackbar({
   ...rest
 }) {
   const intl = reactIntl.useIntl();
-  const intlConfig = palette.useImperativeIntl(intl);
+  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
   const isNeutral = severity === "neutral";
   const disabledIcon = icon === false || isNeutral && !icon;
   const disabledAutoHide = autoHideDuration === null;
-  const duration = disabledAutoHide ? null : autoHideDuration || palette.NOTIFICATION_DURATION_IN_MS;
+  const duration = disabledAutoHide ? null : autoHideDuration || TablePaginationActions.NOTIFICATION_DURATION_IN_MS;
   return /* @__PURE__ */ jsxRuntime.jsx(material.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
     SnackbarRoot,
     {
@@ -1718,7 +1693,7 @@ function Snackbar({
       TransitionComponent: autoWidth ? material.Fade : material.Slide,
       "data-auto-width": autoWidth,
       children: /* @__PURE__ */ jsxRuntime.jsxs(
-        Content$4,
+        Content$3,
         {
           sx: {
             position: "relative"
@@ -1755,10 +1730,192 @@ function Snackbar({
     }
   ) });
 }
+function colorProps(color, variant, theme, disabled) {
+  if (disabled) {
+    if (variant === "outlined") {
+      return {
+        color: theme.palette.text.disabled,
+        backgroundColor: theme.palette.black[4],
+        borderColor: theme.palette.action.focus
+      };
+    }
+    return {
+      color: theme.palette.text.disabled,
+      backgroundColor: theme.palette.action.disabledBackground,
+      borderColor: "transparent"
+    };
+  }
+  switch (color) {
+    case "default":
+      if (variant === "outlined") {
+        return {
+          color: theme.palette.text.secondary,
+          backgroundColor: theme.palette.black["4"],
+          borderColor: theme.palette.divider
+        };
+      }
+      return {
+        color: theme.palette.text.primary,
+        backgroundColor: theme.palette.default.main,
+        borderColor: "transparent"
+      };
+    case "primary":
+      if (variant === "outlined") {
+        return {
+          color: theme.palette.primary.main,
+          backgroundColor: theme.palette.primary.relatedLight,
+          borderColor: theme.palette.primary.main
+        };
+      }
+      return {
+        color: theme.palette.primary.contrastText,
+        backgroundColor: theme.palette.primary.main,
+        borderColor: "transparent"
+      };
+    case "secondary":
+      if (variant === "outlined") {
+        return {
+          color: theme.palette.secondary.main,
+          backgroundColor: theme.palette.secondary.relatedLight,
+          borderColor: theme.palette.secondary.main
+        };
+      }
+      return {
+        color: theme.palette.text.primary,
+        backgroundColor: theme.palette.secondary.main,
+        borderColor: "transparent"
+      };
+    case "success":
+      if (variant === "outlined") {
+        return {
+          color: theme.palette.success.main,
+          backgroundColor: theme.palette.success.relatedLight,
+          borderColor: theme.palette.success.main
+        };
+      }
+      return {
+        color: theme.palette.success.main,
+        backgroundColor: theme.palette.success.relatedLight,
+        borderColor: "transparent"
+      };
+    case "warning":
+      if (variant === "outlined") {
+        return {
+          color: theme.palette.warning.main,
+          backgroundColor: theme.palette.warning.relatedLight,
+          borderColor: theme.palette.warning.main
+        };
+      }
+      return {
+        color: theme.palette.text.primary,
+        backgroundColor: theme.palette.warning.main,
+        borderColor: "transparent"
+      };
+    case "error":
+      if (variant === "outlined") {
+        return {
+          color: theme.palette.error.main,
+          backgroundColor: theme.palette.error.relatedLight,
+          borderColor: theme.palette.error.main
+        };
+      }
+      return {
+        color: theme.palette.primary.contrastText,
+        backgroundColor: theme.palette.error.main,
+        borderColor: "transparent"
+      };
+  }
+}
+const TagRoot = material.styled("div", {
+  shouldForwardProp: (prop) => !["color", "variant", "disabled"].includes(prop)
+})(({
+  color,
+  variant,
+  disabled,
+  theme
+}) => {
+  return {
+    display: "inline-flex",
+    flexDirection: "row",
+    flexWrap: "nowrap",
+    alignItems: "center",
+    padding: theme.spacing(0, 0.5),
+    borderRadius: theme.spacing(0.25),
+    gap: theme.spacing(0.5),
+    height: theme.spacing(2),
+    borderWidth: "1px",
+    borderStyle: "solid",
+    ...colorProps(color ?? "primary", variant ?? "filled", theme, disabled)
+  };
+});
+const TagIcon = material.styled("div")(({ theme }) => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  "& svg": {
+    width: theme.spacing(TablePaginationActions.ICON_SIZE_SMALL),
+    height: theme.spacing(TablePaginationActions.ICON_SIZE_SMALL),
+    "& g": {
+      fill: "currentColor"
+    }
+  }
+}));
+const TagLabel = material.styled("span", {
+  shouldForwardProp: (prop) => !["type", "icon"].includes(prop)
+})(({ type, icon, theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  paddingTop: type === "code" || icon ? theme.spacing(0.25) : void 0
+}));
+function _Tag({
+  label,
+  color = "primary",
+  variant = "filled",
+  icon,
+  type = "default",
+  typographyProps,
+  noWrap = true,
+  disabled,
+  ...otherProps
+}, ref) {
+  const typeCode = type === "code";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    TagRoot,
+    {
+      ref,
+      className: "CartoTag-root",
+      color,
+      variant,
+      disabled,
+      "aria-disabled": disabled,
+      "data-color": color,
+      "data-variant": variant,
+      "data-type": type,
+      "data-name": "tag",
+      ...otherProps,
+      children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx(TagIcon, { children: icon }),
+        /* @__PURE__ */ jsxRuntime.jsx(TagLabel, { icon: !!icon, type, children: /* @__PURE__ */ jsxRuntime.jsx(
+          TablePaginationActions.Typography,
+          {
+            component: "span",
+            color: "inherit",
+            variant: typeCode ? "code3" : "caption",
+            weight: typeCode ? "strong" : "medium",
+            noWrap,
+            ...typographyProps,
+            children: label
+          }
+        ) })
+      ]
+    }
+  );
+}
+const Tag = React.forwardRef(_Tag);
 const Menu = material.styled("div")(({ theme }) => ({
   display: "flex",
   alignItems: "center",
-  height: palette.APPBAR_SIZE,
+  height: TablePaginationActions.APPBAR_SIZE,
   marginRight: theme.spacing(1.5)
 }));
 const MenuButton = material.styled(material.IconButton)(({ theme }) => ({
@@ -1804,7 +1961,7 @@ const Logo = material.styled("div")(({ theme }) => ({
 function BrandLogo({ logo }) {
   return /* @__PURE__ */ jsxRuntime.jsx(Logo, { children: logo });
 }
-const Text$1 = material.styled(palette.Typography)({
+const Text$1 = material.styled(TablePaginationActions.Typography)({
   display: "flex",
   alignItems: "center",
   whiteSpace: "nowrap"
@@ -1821,7 +1978,7 @@ function BrandText({ text }) {
     }
   );
 }
-const Text = material.styled(palette.Typography)(({ theme }) => ({
+const Text = material.styled(TablePaginationActions.Typography)(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   "&::before": {
@@ -1844,7 +2001,7 @@ function SecondaryText({ text }) {
     }
   );
 }
-const Root$4 = material.styled(material.AppBar)(({ theme }) => ({
+const Root$3 = material.styled(material.AppBar)(({ theme }) => ({
   backgroundColor: theme.palette.brand.appBarMain,
   "& .MuiTypography-root": {
     color: theme.palette.brand.appBarContrastText
@@ -1862,7 +2019,7 @@ const BrandElements = material.styled("div")(({ theme }) => ({
     minWidth: "192px"
   }
 }));
-const Content$3 = material.styled("div")(({ theme }) => ({
+const Content$2 = material.styled("div")(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
@@ -1878,14 +2035,14 @@ function AppBar({
   onClickMenu,
   ...otherProps
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Root$4, { ...otherProps, children: /* @__PURE__ */ jsxRuntime.jsxs(material.Toolbar, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(Root$3, { ...otherProps, children: /* @__PURE__ */ jsxRuntime.jsxs(material.Toolbar, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(BrandElements, { children: [
       showBurgerMenu && /* @__PURE__ */ jsxRuntime.jsx(BurgerMenu, { onClickMenu }),
       brandLogo && /* @__PURE__ */ jsxRuntime.jsx(BrandLogo, { logo: brandLogo }),
       brandText && /* @__PURE__ */ jsxRuntime.jsx(BrandText, { text: brandText }),
       secondaryText && /* @__PURE__ */ jsxRuntime.jsx(SecondaryText, { text: secondaryText })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(Content$3, { children })
+    /* @__PURE__ */ jsxRuntime.jsx(Content$2, { children })
   ] }) });
 }
 const Container = material.styled(material.Box, {
@@ -1911,7 +2068,7 @@ function ClearButton({
   ...props
 }) {
   const intl = reactIntl.useIntl();
-  const intlConfig = palette.useImperativeIntl(intl);
+  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
   return /* @__PURE__ */ jsxRuntime.jsx(Container, { size, variant, children: /* @__PURE__ */ jsxRuntime.jsx(
     material.IconButton,
     {
@@ -1923,7 +2080,7 @@ function ClearButton({
     }
   ) });
 }
-const Root$3 = material.styled(material.Box, {
+const Root$2 = material.styled(material.Box, {
   shouldForwardProp: (prop) => !["size", "variant", "readOnly"].includes(prop)
 })(({ size, variant, readOnly, theme }) => ({
   // There is no specific slot to change TextField styles at DatePicker level, so we need to wrap our component to isolate this override. https://mui.com/x/react-date-pickers/date-picker/#customization
@@ -1963,7 +2120,7 @@ function DateFieldContainer({
   readOnly,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Root$3, { ...props, size, variant, readOnly, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(Root$2, { ...props, size, variant, readOnly, children });
 }
 function DatePicker({
   handleClear,
@@ -1984,7 +2141,7 @@ function DatePicker({
   ...props
 }) {
   const intl = reactIntl.useIntl();
-  const intlConfig = palette.useImperativeIntl(intl);
+  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
   return (
     // Don't remove className, it's used for styling
     /* @__PURE__ */ jsxRuntime.jsx(material.Box, { className: "CartoDatePicker-root", "data-testid": "date-picker", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -2272,7 +2429,7 @@ function DateRangePicker({
   ...props
 }) {
   const intl = reactIntl.useIntl();
-  const intlConfig = palette.useImperativeIntl(intl);
+  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
   const [isEndDateOpen, setIsEndDateOpen] = React.useState(false);
   const [isStartDateOpen, setIsStartDateOpen] = React.useState(false);
   const [startDate, setStartDate] = React.useState(
@@ -2460,7 +2617,7 @@ function TimePicker({
   ...props
 }) {
   const intl = reactIntl.useIntl();
-  const intlConfig = palette.useImperativeIntl(intl);
+  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
   const inputRef = React.useRef(null);
   const [inputWidth, setInputWidth] = React.useState(0);
   React.useEffect(() => {
@@ -2571,7 +2728,7 @@ function DateTimePicker({
   ...props
 }) {
   const intl = reactIntl.useIntl();
-  const intlConfig = palette.useImperativeIntl(intl);
+  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
   return /* @__PURE__ */ jsxRuntime.jsx(
     DateFieldContainer,
     {
@@ -2636,7 +2793,7 @@ function DateTimePicker({
   );
 }
 const DEFAULT_ITEMS = [{ outlinedBullet: false, value: "" }];
-const Content$2 = material.styled("ul")(({ theme }) => ({
+const Content$1 = material.styled("ul")(({ theme }) => ({
   listStyle: "none",
   paddingLeft: 0,
   margin: theme.spacing(0.5, 0, 0, 0)
@@ -2657,7 +2814,7 @@ const Bullet = material.styled("span")(({ theme }) => ({
   borderRadius: "50%",
   backgroundColor: theme.palette.qualitative.bold[1]
 }));
-const Category = material.styled(palette.Typography)(({ theme }) => ({
+const Category = material.styled(TablePaginationActions.Typography)(({ theme }) => ({
   minWidth: theme.spacing(10),
   marginRight: theme.spacing(1.5)
 }));
@@ -2666,8 +2823,8 @@ function TooltipData({
   title
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    title && /* @__PURE__ */ jsxRuntime.jsx(palette.Typography, { color: "inherit", variant: "caption", weight: "medium", children: title }),
-    /* @__PURE__ */ jsxRuntime.jsx(Content$2, { children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(Entry, { children: [
+    title && /* @__PURE__ */ jsxRuntime.jsx(TablePaginationActions.Typography, { color: "inherit", variant: "caption", weight: "medium", children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx(Content$1, { children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(Entry, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         Bullet,
         {
@@ -2678,869 +2835,10 @@ function TooltipData({
         }
       ),
       item.category && /* @__PURE__ */ jsxRuntime.jsx(Category, { color: "inherit", variant: "caption", children: item.category }),
-      /* @__PURE__ */ jsxRuntime.jsx(palette.Typography, { color: "inherit", variant: "caption", weight: "medium", children: item.value })
+      /* @__PURE__ */ jsxRuntime.jsx(TablePaginationActions.Typography, { color: "inherit", variant: "caption", weight: "medium", children: item.value })
     ] }, index)) })
   ] });
 }
-const Footer = material.styled(material.Box, {
-  shouldForwardProp: (prop) => !["withGutter", "disabled"].includes(prop)
-})(
-  ({ withGutter, disabled, theme }) => ({
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "flex-end",
-    gap: theme.spacing(1),
-    ...withGutter && {
-      height: theme.spacing(4),
-      padding: theme.spacing(0, 0.5),
-      borderTop: `1px solid ${theme.palette.divider}`,
-      borderBottom: "1px solid transparent"
-    },
-    ...disabled && {
-      backgroundColor: theme.palette.default.background
-    }
-  })
-);
-function CodeAreaFooter({
-  onClickFooter,
-  labelIdButtonFooter,
-  disabledButtonFooter,
-  withGutter = true,
-  showSnackbar,
-  onCloseSnackbar,
-  loading,
-  disabled,
-  ...props
-}) {
-  const intl = reactIntl.useIntl();
-  const intlConfig = palette.useImperativeIntl(intl);
-  if (!onClickFooter) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    Footer,
-    {
-      withGutter,
-      disabled,
-      "data-name": "code-area-footer",
-      "data-gutter": withGutter,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Button,
-          {
-            variant: "text",
-            ...props,
-            loading,
-            onClick: onClickFooter,
-            disabled: disabled || disabledButtonFooter,
-            children: intlConfig.formatMessage({
-              id: labelIdButtonFooter || "c4r.button.save"
-            })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Snackbar,
-          {
-            open: showSnackbar,
-            autoWidth: true,
-            closeable: false,
-            autoHideDuration: 4e3,
-            onClose: onCloseSnackbar,
-            children: intlConfig.formatMessage({
-              id: "c4r.notifications.changesSaved"
-            })
-          }
-        )
-      ]
-    }
-  );
-}
-const Header = material.styled(material.Box, { shouldForwardProp: (prop) => prop !== "size" })(({ size, theme }) => ({
-  position: "absolute",
-  top: 0,
-  right: theme.spacing(0.5),
-  zIndex: 1,
-  display: "flex",
-  justifyContent: "flex-end",
-  gap: theme.spacing(1),
-  padding: size === "small" ? theme.spacing(0.5) : theme.spacing(1, 2, 2),
-  paddingRight: size === "small" ? 0 : theme.spacing(1.5)
-}));
-function CodeAreaHeader({
-  disabled,
-  copyValue,
-  onClickExpand,
-  size
-}) {
-  const intl = reactIntl.useIntl();
-  const intlConfig = palette.useImperativeIntl(intl);
-  const showExpandButton = !!onClickExpand;
-  const showCopyButton = copyValue !== void 0;
-  const showMenu = showExpandButton && showCopyButton;
-  const { copy } = useCopyValue();
-  const [openSnackbar, setOpenSnackbar] = React.useState(false);
-  const [anchorEl, setAnchorEl] = React.useState(null);
-  const open = Boolean(anchorEl);
-  const openDropdown = (event) => {
-    setAnchorEl(event.currentTarget);
-  };
-  const closeDropdown = () => {
-    setAnchorEl(null);
-  };
-  const handleCopy = (e) => {
-    e.preventDefault();
-    if (copyValue) {
-      copy(copyValue).then(() => {
-        setOpenSnackbar(true);
-      }).catch(console.error);
-    }
-  };
-  if (!showExpandButton && !showCopyButton) {
-    return null;
-  }
-  if (showMenu) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(Header, { size, "data-size": size, "data-name": "code-area-header", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          IconButton,
-          {
-            color: "default",
-            size,
-            icon: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.MoreVertOutlined, {}),
-            disabled,
-            tooltip: intlConfig.formatMessage({ id: `c4r.button.showOptions` }),
-            tooltipPlacement: "top",
-            "aria-controls": open ? "basic-menu" : void 0,
-            "aria-haspopup": "true",
-            "aria-expanded": open ? "true" : void 0,
-            onClick: openDropdown
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          Menu$1,
-          {
-            anchorEl,
-            open,
-            onClose: closeDropdown,
-            id: "menu",
-            MenuListProps: { "aria-labelledby": "menu-button" },
-            "aria-label": "Code area actions",
-            transformOrigin: { vertical: "top", horizontal: "right" },
-            anchorOrigin: { vertical: "bottom", horizontal: "right" },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(MenuItem.MenuItem, { onClick: handleCopy, disabled, id: "copy", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(material.ListItemIcon, { children: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.ContentCopyOutlined, {}) }),
-                /* @__PURE__ */ jsxRuntime.jsx(material.ListItemText, { children: intlConfig.formatMessage({ id: `c4r.button.copy` }) })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs(MenuItem.MenuItem, { onClick: onClickExpand, disabled, id: "expand", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(material.ListItemIcon, { children: /* @__PURE__ */ jsxRuntime.jsx(OpenDiagonallyRight.OpenDiagonallyRight, {}) }),
-                /* @__PURE__ */ jsxRuntime.jsx(material.ListItemText, { children: intlConfig.formatMessage({ id: `c4r.button.expand` }) })
-              ] })
-            ]
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Snackbar,
-        {
-          open: openSnackbar,
-          autoWidth: true,
-          closeable: false,
-          autoHideDuration: 4e3,
-          onClose: () => setOpenSnackbar(false),
-          children: intlConfig.formatMessage({
-            id: "c4r.notifications.copiedToClipboard"
-          })
-        }
-      )
-    ] });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(Header, { size, "data-size": size, "data-name": "code-area-header", children: [
-    showCopyButton && /* @__PURE__ */ jsxRuntime.jsx(
-      CopiableComponent,
-      {
-        disabled,
-        value: copyValue,
-        button: true,
-        buttonProps: { size }
-      }
-    ),
-    showExpandButton && /* @__PURE__ */ jsxRuntime.jsx(
-      IconButton,
-      {
-        color: "default",
-        size,
-        onClick: onClickExpand,
-        icon: /* @__PURE__ */ jsxRuntime.jsx(OpenDiagonallyRight.OpenDiagonallyRight, {}),
-        disabled,
-        tooltip: intlConfig.formatMessage({ id: `c4r.button.expand` }),
-        tooltipPlacement: "top"
-      }
-    )
-  ] });
-}
-const CodeAreaTheme = material.styled(material.Box, {
-  shouldForwardProp: (prop) => !["size", "height"].includes(prop)
-})(({ size, height, theme }) => ({
-  position: "relative",
-  flex: 1,
-  display: "flex",
-  cursor: "text",
-  ":focus-within &, .error &": {
-    marginBottom: 0
-  },
-  "& .react-codemirror2": {
-    width: "100%",
-    height: "100% !important",
-    position: "relative"
-  },
-  "& .CodeMirror": {
-    position: "absolute",
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    zIndex: 1,
-    height: "100% !important",
-    backgroundColor: theme.palette.background.default
-  },
-  "& .CodeMirror-code": {
-    "&> div:first-of-type .CodeMirror-line": {
-      marginTop: theme.spacing(-0.25)
-    }
-  },
-  "& .CodeMirror-scroll": {
-    paddingLeft: theme.spacing(1),
-    paddingRight: theme.spacing(1),
-    backgroundColor: "transparent"
-  },
-  "& .CodeMirror-lines": {
-    padding: theme.spacing(1, 0)
-  },
-  "& .CodeMirror pre.CodeMirror-line, & .CodeMirror pre.CodeMirror-line-like": {
-    boxSizing: "border-box",
-    paddingLeft: 0,
-    paddingTop: theme.spacing(0.25),
-    lineHeight: 1.2
-  },
-  "& .CodeMirror-linenumbers": {
-    width: `${theme.spacing(4.5)} !important`
-  },
-  "& .CodeMirror-linenumber": {
-    width: `${theme.spacing(4.5)} !important`,
-    height: theme.spacing(2),
-    marginBottom: `${theme.spacing(-0.25)} !important`,
-    paddingTop: theme.spacing(0.25),
-    paddingRight: theme.spacing(1.25),
-    boxSizing: "border-box !important",
-    color: theme.palette.text.secondary
-  },
-  // Active line addon
-  "& .CodeMirror-activeline-background, & .CodeMirror-activeline-gutter": {
-    backgroundColor: "transparent"
-  },
-  "& .CodeMirror-gutter-background": {
-    width: `${theme.spacing(6.25)} !important`
-    // Hack needed to simulate active line background
-  },
-  "& .CodeMirror-sizer": {
-    paddingTop: theme.spacing(0.25),
-    marginLeft: `${theme.spacing(5.25)} !important`,
-    borderRightWidth: `${theme.spacing(4)} !important`
-    // Hack needed to simulate active line background
-  },
-  "& .CodeMirror-matchingbracket": {
-    color: `${colors.lime[900]} !important`,
-    backgroundColor: theme.palette.black[4],
-    boxShadow: `0 0 0 1px ${theme.palette.text.hint}`
-  },
-  // Selected line
-  "& .CodeMirror-selected, & .CodeMirror-focused .CodeMirror-selected, & .CodeMirror-line::selection, & .CodeMirror-line > span::selection, & .CodeMirror-line > span > span::selection": {
-    background: `${material.alpha(colors.blue[800], 0.2)} !important`
-  },
-  "& .CodeMirror-gutters": {
-    borderRight: 0,
-    color: theme.palette.text.secondary,
-    backgroundColor: theme.palette.default.background
-  },
-  "& .CodeMirror-gutter-elt": {
-    "& .CodeMirror-foldgutter-open, .CodeMirror-foldgutter-folded": {
-      marginLeft: theme.spacing(-1),
-      "&:after": {
-        fontSize: theme.typography.caption.fontSize
-      }
-    }
-  },
-  "& .CodeMirror-placeholder": {
-    paddingTop: "0 !important",
-    marginLeft: `${theme.spacing(-0.5)} !important`,
-    marginBottom: `${theme.spacing(-0.25)} !important`,
-    color: `${theme.palette.text.hint} !important`
-  },
-  "& .MuiLinearProgress-root": {
-    height: "2px",
-    position: "absolute",
-    top: 0,
-    left: 0,
-    right: 0,
-    zIndex: 1
-  },
-  "& .pre.CodeMirror-line, .CodeMirror pre.CodeMirror-line-like, & .cm-bracket": {
-    color: theme.palette.text.primary
-  },
-  "& .CodeMirror pre.CodeMirror-placeholder": {
-    color: theme.palette.text.hint
-  },
-  "& .CodeMirror-composing": {
-    border: 0
-  },
-  // Theme: light
-  "& .cm-keyword, & .cm-string, & .cm-string-2, & .cm-other": {
-    color: colors.purple[500]
-  },
-  "& .cm-operator, & .cm-tag, & .cm-attribute": {
-    color: colors.teal[700]
-  },
-  "& .cm-number, & .cm-property, & .cm-builtin": {
-    color: colors.red[700]
-  },
-  "& .cm-comment": {
-    color: theme.palette.text.secondary
-  },
-  "& .cm-variable": {
-    color: colors.lime[900]
-  },
-  "& .cm-variable-2": {
-    color: theme.palette.text.primary
-  },
-  "& .cm-punctuation, & .cm-def, ": {
-    color: colors.blue[800]
-  },
-  "& .cm-variable-3, & .cm-type": {
-    color: colors.indigo[800]
-  },
-  "& .CodeMirror-foldmarker": {
-    textShadow: "none",
-    color: theme.palette.primary.main
-  },
-  "& .cm-error": {
-    color: theme.palette.error.main
-  },
-  "& .CodeMirror-selected": {
-    background: colors.blue[800]
-  },
-  "& .cm-header-1": {
-    fontSize: theme.typography.h2.fontSize
-  },
-  "& .cm-header-2": {
-    fontSize: theme.typography.h3.fontSize
-  },
-  "& .cm-header-3": {
-    fontSize: theme.typography.h4.fontSize
-  },
-  "& .cm-header-4": {
-    fontSize: theme.typography.h5.fontSize
-  },
-  "& .cm-header-5": {
-    fontSize: theme.typography.h6.fontSize
-  },
-  ...size === "small" && {
-    "& .CodeMirror": {
-      height: height ? height : "auto",
-      minHeight: theme.spacing(9),
-      ...theme.typography.code3
-    }
-  }
-}));
-function findCodeAreaControlCodeOccurrences(content) {
-  const lines = content.split("\n");
-  const matches = [];
-  const beginStack = [];
-  lines.forEach((line, index) => {
-    const lineNumber = index + 1;
-    if (line.trim() === "-- BEGIN CONTROL CODE") {
-      beginStack.push(lineNumber);
-    } else if (line.trim() === "-- END CONTROL CODE" && beginStack.length > 0) {
-      const startLine = beginStack.pop();
-      matches.push({
-        from: startLine,
-        to: lineNumber
-      });
-    }
-  });
-  while (beginStack.length > 0) {
-    const startLine = beginStack.pop();
-    matches.push({
-      from: startLine,
-      to: lines.length
-      // Set end to last line for unmatched BEGIN
-    });
-  }
-  return matches;
-}
-function CodeAreaInput({
-  options,
-  value,
-  defaultValue,
-  id,
-  onEditorDidMount,
-  onChange,
-  onBlur,
-  onFocus,
-  placeholder,
-  disabled,
-  size = "small",
-  height,
-  "data-testid": dataTestId,
-  "aria-label": ariaLabel,
-  ...props
-}) {
-  var _a;
-  const editorRef = React.useRef();
-  const codeMirrorOptions = {
-    mode: "sql",
-    theme: "light",
-    lineNumbers: true,
-    lineWrapping: true,
-    extraKeys: { "Ctrl-Space": "autocomplete" },
-    placeholder,
-    disabled,
-    gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
-    styleActiveLine: { nonEmpty: true },
-    styleActiveSelected: true,
-    matchBrackets: true,
-    foldOptions: {
-      minFoldSize: 1,
-      scanUp: false
-    },
-    ...options
-  };
-  const [editor, setEditor] = React.useState(null);
-  React.useEffect(() => {
-    return () => {
-      setEditor(null);
-    };
-  }, []);
-  const foldCode = React.useCallback(
-    ({ from, to }) => {
-      editor.foldCode(
-        0,
-        {
-          rangeFinder: () => {
-            if (!to) return;
-            return {
-              from: { line: from - 1, ch: 0 },
-              to: { line: to - 1, ch: 0 }
-            };
-          }
-        },
-        "fold"
-      );
-    },
-    [editor]
-  );
-  React.useEffect(() => {
-    if (!value || !editor) return;
-    const numberOfBlocks = findCodeAreaControlCodeOccurrences(value);
-    if (!numberOfBlocks.length) return;
-    for (const line of numberOfBlocks) {
-      foldCode(line);
-    }
-  }, [value, foldCode, editor]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    CodeAreaTheme,
-    {
-      size,
-      height,
-      id,
-      "data-size": size,
-      "data-height": height,
-      "data-mode": typeof (options == null ? void 0 : options.mode) === "object" && ((_a = options.mode) == null ? void 0 : _a.name) ? options.mode.name : options == null ? void 0 : options.mode,
-      "data-fold-gutter": options == null ? void 0 : options.foldGutter,
-      "data-testid": dataTestId,
-      "aria-label": ariaLabel ?? "Code editor text area",
-      "data-name": "code-area-input",
-      children: [
-        value !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
-          reactCodemirror2.Controlled,
-          {
-            ...props,
-            value,
-            editorDidMount: (editor2) => {
-              editorRef.current = editor2;
-              setEditor(editor2);
-              onEditorDidMount == null ? void 0 : onEditorDidMount(editor2);
-            },
-            options: codeMirrorOptions,
-            onBeforeChange: (editor2, data, value2) => {
-              onChange == null ? void 0 : onChange(value2);
-            },
-            onBlur: (editor2) => {
-              onBlur == null ? void 0 : onBlur(editor2.getValue());
-            },
-            onFocus
-          }
-        ),
-        defaultValue !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
-          reactCodemirror2.UnControlled,
-          {
-            ...props,
-            value: defaultValue,
-            options: codeMirrorOptions,
-            onBlur: (editor2) => {
-              onBlur == null ? void 0 : onBlur(editor2.getValue());
-            },
-            onFocus
-          }
-        )
-      ]
-    }
-  );
-}
-const Root$2 = material.styled(material.FormControl)(() => ({
-  display: "flex",
-  flexDirection: "column",
-  flex: 1
-}));
-const CodeMirrorWrapper = material.styled(material.Box, {
-  shouldForwardProp: (prop) => ![
-    "variant",
-    "error",
-    "disabled",
-    "readOnly",
-    "lineNumbers",
-    "fullScreen"
-  ].includes(prop)
-})(
-  ({ variant, error, disabled, readOnly, lineNumbers, fullScreen, theme }) => ({
-    position: "relative",
-    overflow: "auto",
-    display: "flex",
-    flexDirection: "column",
-    flex: 1,
-    width: "100%",
-    minHeight: 0,
-    background: theme.palette.background.paper,
-    // Active line addon
-    ".CodeMirror-focused .CodeMirror-activeline": {
-      "& .CodeMirror-activeline-background, & .CodeMirror-activeline-gutter": {
-        background: theme.palette.primary.background
-      }
-    },
-    ...fullScreen && {
-      maxWidth: "100%",
-      maxHeight: "100vh",
-      height: "100vh"
-    },
-    ...(variant === "filled" || variant === "outlined") && {
-      borderRadius: theme.spacing(0.5),
-      transition: theme.transitions.create("background-color", {
-        easing: theme.transitions.easing.easeInOut,
-        duration: theme.transitions.duration.shortest
-      }),
-      "&:after": {
-        content: '""',
-        position: "absolute",
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        pointerEvents: "none",
-        border: `1px solid ${theme.palette.default.outlinedBorder}`,
-        borderRadius: theme.spacing(0.5),
-        transition: theme.transitions.create("border-color", {
-          easing: theme.transitions.easing.easeInOut,
-          duration: theme.transitions.duration.shortest
-        })
-      },
-      "&:hover:after": {
-        borderColor: theme.palette.common.black
-      },
-      "&:focus-within": {
-        overflow: "hidden",
-        "&:after": {
-          borderWidth: "2px",
-          borderColor: theme.palette.primary.main
-        }
-      },
-      ...error && {
-        "&.MuiBox-root:after": {
-          borderWidth: "2px",
-          borderColor: theme.palette.error.main
-        }
-      }
-    },
-    ...variant === "filled" && {
-      backgroundColor: theme.palette.background.paper,
-      "&.codeArea-filled:after": {
-        borderColor: "transparent"
-      },
-      "&.codeArea-filled:hover:after": {
-        borderColor: theme.palette.common.black
-      },
-      "&.codeArea-filled:focus-within:after": {
-        borderWidth: "2px",
-        borderColor: theme.palette.primary.main
-      },
-      "& .CodeMirror": {
-        backgroundColor: theme.palette.default.background,
-        "&:focus-within": {
-          backgroundColor: theme.palette.background.paper
-        }
-      },
-      ...error && {
-        borderColor: theme.palette.error.main,
-        "& .CodeMirror": {
-          backgroundColor: theme.palette.default.background
-        },
-        "&:hover, &:focus-within, &.codeArea-filled:after, &.codeArea-filled:hover:after, &.codeArea-filled:focus-within:after": {
-          borderColor: theme.palette.error.main
-        },
-        "&:focus-within": {
-          "& .CodeMirror": {
-            backgroundColor: theme.palette.background.paper
-          }
-        }
-      }
-    },
-    ...readOnly && {
-      "& .CodeMirror": {
-        backgroundColor: theme.palette.default.background,
-        ".CodeMirror-cursors": {
-          visibility: "hidden !important"
-        }
-      },
-      ...variant === "filled" && {
-        backgroundColor: theme.palette.background.paper
-      }
-    },
-    ...disabled && {
-      pointerEvents: "none",
-      "& .CodeMirror": {
-        color: theme.palette.text.disabled,
-        backgroundColor: theme.palette.default.background,
-        "& span, .CodeMirror-linenumber, .CodeMirror-guttermarker-subtle": {
-          color: theme.palette.text.disabled
-        }
-      },
-      ...variant === "filled" && {
-        backgroundColor: theme.palette.background.paper
-      }
-    },
-    ...!lineNumbers && {
-      "& .CodeMirror-scroll .CodeMirror-sizer": {
-        marginLeft: `${theme.spacing(1)} !important`
-      },
-      "& .CodeMirror-gutter-background": {
-        width: `${theme.spacing(2)} !important`
-      }
-    }
-  })
-);
-const InputWrapper = material.styled(material.Box, {
-  shouldForwardProp: (prop) => prop !== "hasActions"
-})(({ theme, hasActions }) => ({
-  flex: "1 1 auto",
-  overflowY: "auto",
-  display: "flex",
-  flexDirection: "column",
-  ...hasActions && {
-    ".CodeMirror-line": {
-      paddingRight: `${theme.spacing(4)} !important`
-    }
-  }
-}));
-const HelpIcon = material.styled(iconsMaterial.HelpOutline)(({ theme }) => ({
-  width: palette.ICON_SIZE_SMALL,
-  height: palette.ICON_SIZE_SMALL,
-  fill: theme.palette.text.secondary
-}));
-function CodeAreaField({
-  value,
-  defaultValue,
-  validate,
-  onChange,
-  onBlur,
-  onFocus,
-  label,
-  labelHelpTooltip,
-  placeholder,
-  type,
-  disabled,
-  copyValue,
-  helperText,
-  error,
-  size = "small",
-  variant = "outlined",
-  onClickExpand,
-  onClickFooter,
-  disabledButtonFooter,
-  labelIdButtonFooter,
-  options,
-  id = "code-area-field",
-  saveLoading,
-  showSaveSnackbar,
-  onCloseSaveSnackbar,
-  fullScreen,
-  isExpanded,
-  ...props
-}) {
-  const [focused, setFocused] = React.useState(false);
-  const readOnly = (options == null ? void 0 : options.readOnly) ?? false;
-  const lineNumbers = (options == null ? void 0 : options.lineNumbers) ?? true;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    Root$2,
-    {
-      size,
-      error,
-      disabled,
-      "aria-disabled": disabled,
-      "data-size": size,
-      "data-full-screen": fullScreen,
-      "data-variant": variant,
-      "data-name": "code-area-field",
-      children: [
-        label && /* @__PURE__ */ jsxRuntime.jsx(
-          material.InputLabel,
-          {
-            htmlFor: id,
-            disabled,
-            error,
-            focused,
-            shrink: true,
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              LabelWithIndicator,
-              {
-                label,
-                type,
-                icon: labelHelpTooltip ? /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: labelHelpTooltip, children: /* @__PURE__ */ jsxRuntime.jsx(
-                  HelpIcon,
-                  {
-                    "aria-label": typeof labelHelpTooltip === "string" ? labelHelpTooltip : void 0
-                  }
-                ) }) : void 0
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          CodeMirrorWrapper,
-          {
-            variant,
-            error: !!error,
-            disabled,
-            readOnly,
-            lineNumbers,
-            className: variant === "filled" ? "codeArea-filled" : "",
-            fullScreen,
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                CodeAreaHeader,
-                {
-                  onClickExpand,
-                  copyValue,
-                  disabled,
-                  size: isExpanded ? "medium" : "small"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(InputWrapper, { hasActions: !!copyValue || !!onClickExpand, children: /* @__PURE__ */ jsxRuntime.jsx(
-                CodeAreaInput,
-                {
-                  ...props,
-                  id,
-                  disabled,
-                  value,
-                  defaultValue,
-                  placeholder,
-                  onFocus: () => {
-                    setFocused(true);
-                    onFocus == null ? void 0 : onFocus();
-                  },
-                  onBlur: (value2) => {
-                    if (onBlur) onBlur(value2);
-                    if (onChange) onChange(value2);
-                    if (validate) validate(value2);
-                    setFocused(false);
-                  },
-                  onChange,
-                  size,
-                  options: {
-                    ...readOnly && {
-                      styleActiveLine: false,
-                      matchBrackets: false
-                    },
-                    ...options
-                  }
-                }
-              ) }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                CodeAreaFooter,
-                {
-                  labelIdButtonFooter,
-                  onClickFooter,
-                  disabled,
-                  disabledButtonFooter,
-                  size: "small",
-                  loading: !!saveLoading,
-                  showSnackbar: showSaveSnackbar,
-                  onCloseSnackbar: onCloseSaveSnackbar
-                }
-              )
-            ]
-          }
-        ),
-        helperText && /* @__PURE__ */ jsxRuntime.jsx(material.FormHelperText, { children: helperText })
-      ]
-    }
-  );
-}
-const ErrorWrapper = material.styled(material.Box)(({ theme }) => ({
-  position: "relative",
-  marginBottom: "1px",
-  padding: theme.spacing(1.5, 2, 1.5, 5.5),
-  "&:before": {
-    content: '""',
-    position: "absolute",
-    top: 0,
-    left: 0,
-    bottom: 0,
-    zIndex: 1,
-    width: theme.spacing(5),
-    background: theme.palette.background.default
-  },
-  "&:after": {
-    content: '""',
-    position: "absolute",
-    top: 0,
-    right: 0,
-    left: 0,
-    bottom: 0,
-    zIndex: 2,
-    background: `linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 40%)`
-  },
-  ".MuiFormHelperText-root": {
-    marginTop: 0
-  }
-}));
-const ErrorContent = material.styled(material.Box)(({ theme }) => ({
-  position: "relative",
-  zIndex: 3,
-  display: "flex",
-  alignItems: "center",
-  gap: theme.spacing(1)
-}));
-function CodeAreaDialogError({
-  children,
-  hasDivider
-}) {
-  const theme = material.useTheme();
-  if (!children) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ErrorWrapper, { children: /* @__PURE__ */ jsxRuntime.jsxs(ErrorContent, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.ErrorOutline, { htmlColor: theme.palette.error.main }),
-      /* @__PURE__ */ jsxRuntime.jsx(material.FormHelperText, { error: true, children })
-    ] }) }),
-    hasDivider && /* @__PURE__ */ jsxRuntime.jsx(material.Divider, {})
-  ] });
-}
 const sizesHeight = {
   [
     "small"
@@ -3786,13 +3084,13 @@ function DialogHeader({
   ...otherProps
 }) {
   const intl = reactIntl.useIntl();
-  const intlConfig = palette.useImperativeIntl(intl);
+  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(DialogTitle, { component: "div", "data-name": "dialog-header", ...otherProps, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(Main$1, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs(ItemsWrapper$1, { flex: 1, maxWidth: 0.8, children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            palette.Typography,
+            TablePaginationActions.Typography,
             {
               component: "h2",
               variant: "inherit",
@@ -3821,7 +3119,7 @@ function DialogHeader({
     children && /* @__PURE__ */ jsxRuntime.jsx(DividerBottom, {})
   ] });
 }
-const Content$1 = material.styled(material.DialogContent, {
+const Content = material.styled(material.DialogContent, {
   shouldForwardProp: (prop) => !["scrollableContent", "withGutter", "withBottomGutter"].includes(prop)
 })(({ theme, scrollableContent, withGutter, withBottomGutter }) => ({
   display: "flex",
@@ -3898,7 +3196,7 @@ function _DialogContent({
     return () => resizeObserver.disconnect();
   }, [contentRef, updateBorders]);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    Content$1,
+    Content,
     {
       ref: setContentRef,
       onScroll: handleScroll,
@@ -4190,168 +3488,15 @@ function DialogStepper({
         "data-state": isCompleted ? "completed" : isCurrent ? "current" : "uncompleted",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(StepNumber, { completed: isCompleted, current: isCurrent, children: isCompleted ? /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.Check, { fontSize: "small", "aria-label": "Completed step" }) : step }),
-          /* @__PURE__ */ jsxRuntime.jsx(palette.Typography, { variant: "caption", component: "div", color: labelColor, children: stepLabel })
+          /* @__PURE__ */ jsxRuntime.jsx(TablePaginationActions.Typography, { variant: "caption", component: "div", color: labelColor, children: stepLabel })
         ]
       },
       idx
     );
   }) }) });
 }
-const Content = material.styled(DialogContent, {
-  shouldForwardProp: (prop) => !["error", "withBorder"].includes(prop)
-})(
-  ({ error, withBorder, theme }) => ({
-    gap: 0,
-    border: withBorder ? `1px solid ${theme.palette.divider} !important` : void 0,
-    borderBottom: error ? "none !important" : void 0,
-    ".react-codemirror2": {
-      display: "flex",
-      flexDirection: "column",
-      minHeight: "100%"
-    },
-    ".CodeMirror-wrap": {
-      display: "flex",
-      flexDirection: "column",
-      flex: 1
-    },
-    "& + .MuiDivider-root": {
-      display: "none"
-    }
-  })
-);
-function CodeAreaDialogContent({
-  children,
-  error,
-  withBorder = true,
-  withGutter = false
-}) {
-  if (!children) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(Content, { withGutter, error, withBorder, children });
-}
-function CodeAreaDialogConfirmation({
-  onClose,
-  onCancel,
-  cancelLabelId,
-  cancelButton,
-  closeButton,
-  contentLabelId,
-  titleLabelId,
-  severity = "warning",
-  content
-}) {
-  const intl = reactIntl.useIntl();
-  const intlConfig = palette.useImperativeIntl(intl);
-  if (!onClose || !onCancel) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    DialogConfirmation,
-    {
-      opened: true,
-      severity,
-      title: intlConfig.formatMessage({
-        id: titleLabelId || "c4r.dialog.confirmation.title"
-      }),
-      actions: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        onCancel && (cancelButton ? cancelButton : /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: onCancel, children: intlConfig.formatMessage({
-          id: cancelLabelId || "c4r.button.cancel"
-        }) })),
-        onClose && (closeButton ? closeButton : /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "contained", onClick: onClose, children: intlConfig.formatMessage({
-          id: "c4r.button.leave"
-        }) }))
-      ] }),
-      children: content ? content : intlConfig.formatMessage({
-        id: contentLabelId || "c4r.dialog.confirmation.content"
-      })
-    }
-  );
-}
-function CodeAreaDialog({
-  open,
-  onClose,
-  title,
-  error,
-  helperText,
-  onClickFooter,
-  disabledButtonFooter,
-  labelIdButtonFooter,
-  disabled,
-  showConfirmation,
-  onCancelConfirm,
-  onCloseConfirm,
-  footerProps,
-  saveLoading,
-  showSaveSnackbar,
-  onCloseSaveSnackbar,
-  "data-testid": dataTestId,
-  "aria-label": ariaLabel,
-  ...props
-}) {
-  const showFooter = error || !!onClickFooter || !!footerProps;
-  if (!open) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    Dialog,
-    {
-      open,
-      fullScreen: true,
-      onClose,
-      "data-testid": dataTestId,
-      "aria-label": ariaLabel,
-      "data-name": "code-area-dialog",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          DialogHeader,
-          {
-            title,
-            onClose,
-            closeIcon: !onClickFooter && /* @__PURE__ */ jsxRuntime.jsx(OpenDiagonallyRight.CloseDiagonallyRight, {})
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(CodeAreaDialogContent, { error, children: /* @__PURE__ */ jsxRuntime.jsx(
-          CodeAreaField,
-          {
-            ...props,
-            disabled,
-            variant: null,
-            isExpanded: true
-          }
-        ) }),
-        showFooter && /* @__PURE__ */ jsxRuntime.jsx(
-          DialogFooter,
-          {
-            ...footerProps,
-            topContent: error && /* @__PURE__ */ jsxRuntime.jsx(CodeAreaDialogError, { hasDivider: !!onClickFooter, children: helperText }),
-            children: !!onClickFooter && /* @__PURE__ */ jsxRuntime.jsx(
-              CodeAreaFooter,
-              {
-                onClickFooter,
-                labelIdButtonFooter,
-                disabled,
-                disabledButtonFooter,
-                withGutter: false,
-                variant: "contained",
-                size: "medium",
-                loading: !!saveLoading,
-                showSnackbar: showSaveSnackbar,
-                onCloseSnackbar: onCloseSaveSnackbar
-              }
-            )
-          }
-        ),
-        showConfirmation && /* @__PURE__ */ jsxRuntime.jsx(
-          CodeAreaDialogConfirmation,
-          {
-            onClose: onCloseConfirm ?? onClose,
-            onCancel: onCancelConfirm,
-            cancelLabelId: "c4r.button.keepEditing"
-          }
-        )
-      ]
-    }
-  );
-}
-exports.TablePaginationActions = palette.TablePaginationActions;
-exports.Typography = palette.Typography;
+exports.TablePaginationActions = TablePaginationActions.TablePaginationActions;
+exports.Typography = TablePaginationActions.Typography;
 exports.Alert = Alert$1.Alert;
 exports.MenuItem = MenuItem.MenuItem;
 exports.AccordionGroup = AccordionGroup;
@@ -4359,14 +3504,6 @@ exports.AppBar = AppBar;
 exports.Autocomplete = Autocomplete;
 exports.Avatar = Avatar;
 exports.Button = Button;
-exports.CodeAreaDialog = CodeAreaDialog;
-exports.CodeAreaDialogConfirmation = CodeAreaDialogConfirmation;
-exports.CodeAreaDialogContent = CodeAreaDialogContent;
-exports.CodeAreaDialogError = CodeAreaDialogError;
-exports.CodeAreaField = CodeAreaField;
-exports.CodeAreaFooter = CodeAreaFooter;
-exports.CodeAreaHeader = CodeAreaHeader;
-exports.CodeAreaInput = CodeAreaInput;
 exports.CopiableComponent = CopiableComponent;
 exports.CreatableAutocomplete = CreatableAutocomplete;
 exports.DatePicker = DatePicker;
@@ -4392,6 +3529,7 @@ exports.MultipleSelectField = MultipleSelectField;
 exports.PasswordField = PasswordField;
 exports.SelectField = SelectField;
 exports.Snackbar = Snackbar;
+exports.Tag = Tag;
 exports.TimePicker = TimePicker;
 exports.ToggleButtonGroup = ToggleButtonGroup;
 exports.TooltipData = TooltipData;