@carto/meridian-ds 2.1.1-alpha-copiable-input-text.4 → 2.1.1-alpha-filter-dropdown.1

package/dist/components/index.cjs

@@ -5,12 +5,12 @@ const React = require("react");
 const reactIntl = require("react-intl");
 const material = require("@mui/material");
 const iconsMaterial = require("@mui/icons-material");
-const TablePaginationActions = require("../TablePaginationActions-D2K26kdR.cjs");
-const Link = require("../Link-_lzRY1Ay.cjs");
+const TablePaginationActions = require("../TablePaginationActions-MwqZJoRm.cjs");
+const Alert$1 = require("../Alert-oGAW_syG.cjs");
 const ArrowDown = require("../ArrowDown-DJ0vhbsw.cjs");
 const OpenDiagonallyRight = require("../OpenDiagonallyRight-CpL4ROwg.cjs");
 require("cartocolor");
-const MenuItem = require("../MenuItem-BY6fuF5U.cjs");
+const MenuItem = require("../MenuItem-8L6Ub4X5.cjs");
 const reactWindow = require("react-window");
 const DatePicker$1 = require("@mui/x-date-pickers/DatePicker");
 const xDatePickers = require("@mui/x-date-pickers");
@@ -41,198 +41,310 @@ 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 StyledMenu = material.styled(material.Menu, {
-  shouldForwardProp: (prop) => !["extended", "width", "height"].includes(prop)
-})(({ extended, width, height }) => ({
-  ...extended && {
-    ".MuiMenuItem-root": {
-      minHeight: TablePaginationActions.MENU_ITEM_SIZE_EXTENDED
+const IndicatorIcon = material.styled(material.Box)({
+  position: "absolute",
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center"
+});
+const HiddenText = material.styled(material.Box)({
+  visibility: "hidden",
+  pointerEvents: "none"
+});
+function _Button({
+  children,
+  loading,
+  disabled,
+  startIcon,
+  endIcon,
+  loadingPosition,
+  external,
+  showExternalIcon = true,
+  "aria-describedby": ariaDescribedby,
+  ...otherProps
+}, ref) {
+  const intl = reactIntl.useIntl();
+  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
+  const defaultIconLoader = /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 18, color: "inherit" });
+  const isDefaultLoading = loading && loadingPosition === void 0;
+  const isExternalLink = otherProps.href && external;
+  const renderContent = () => {
+    if (isDefaultLoading) {
+      return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { position: "relative" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(IndicatorIcon, { children: defaultIconLoader }),
+        /* @__PURE__ */ jsxRuntime.jsx(HiddenText, { children })
+      ] });
     }
-  },
-  ...width && {
-    ".MuiList-root": {
-      width,
-      minWidth: width
+    if (isExternalLink) {
+      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        children,
+        /* @__PURE__ */ jsxRuntime.jsx(Alert$1.ScreenReaderOnly, { id: "external-hint", children: `(${intlConfig.formatMessage({
+          id: "c4r.button.opensInNewTab"
+        })})` })
+      ] });
     }
-  },
-  ...height && {
-    ".MuiMenu-paper": {
-      overflow: "hidden"
-    },
-    ".MuiList-root": {
-      maxHeight: height
+    return children;
+  };
+  const getIconForPosition = (position) => {
+    if (isDefaultLoading) {
+      return void 0;
     }
-  }
-}));
-function _Menu({ extended, width, height, MenuListProps, ...otherProps }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    StyledMenu,
-    {
-      ...otherProps,
-      ref,
-      "data-name": "menu",
-      width,
-      height,
-      extended,
-      MenuListProps: {
-        ...MenuListProps,
-        "data-width": width,
-        "data-height": height,
-        "data-extended": extended
+    if (loading && loadingPosition !== void 0) {
+      if (loadingPosition === position) {
+        return defaultIconLoader;
       }
+      return void 0;
     }
-  );
-}
-const Menu$1 = React.forwardRef(_Menu);
-const StyledMenuList = material.styled(material.MenuList, {
-  shouldForwardProp: (prop) => !["extended", "width", "height"].includes(prop)
-})(({ extended, width, height }) => ({
-  ...extended && {
-    ".MuiMenuItem-root": {
-      minHeight: TablePaginationActions.MENU_ITEM_SIZE_EXTENDED
-    }
-  },
-  "&.MuiList-root": {
-    ...width && {
-      width,
-      minWidth: width
-    },
-    ...height && {
-      maxHeight: height
+    if (position === "start") {
+      return startIcon;
+    } else {
+      return endIcon || (isExternalLink && showExternalIcon ? /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.OpenInNewOutlined, {}) : void 0);
     }
-  }
-}));
-function _MenuList({ extended, width, height, ...otherProps }, ref) {
+  };
   return /* @__PURE__ */ jsxRuntime.jsx(
-    StyledMenuList,
+    material.Button,
     {
+      disabled: loading || disabled,
+      startIcon: getIconForPosition("start"),
+      endIcon: getIconForPosition("end"),
       ...otherProps,
+      role: otherProps.href ? "link" : "button",
+      ...isExternalLink && {
+        target: "_blank",
+        rel: "noopener noreferrer"
+      },
       ref,
-      width,
-      height,
-      extended,
-      "data-name": "menu-list",
-      "data-width": width,
-      "data-height": height,
-      "data-extended": extended
-    }
-  );
-}
-const MenuList = React.forwardRef(_MenuList);
-const StyledMenuItem$1 = material.styled(MenuItem.MenuItem)(() => ({
-  marginTop: "0 !important",
-  marginBottom: "0 !important"
-}));
-const LinkFilter = material.styled(material.Link)(
-  ({ disabled, theme }) => ({
-    display: "flex",
-    alignItems: "center",
-    gap: theme.spacing(1),
-    width: "100%",
-    textAlign: "initial",
-    ...disabled && {
-      pointerEvents: "none",
-      color: theme.palette.text.disabled
-    }
-  })
-);
-function _MenuItemFilter({
-  areAllSelected,
-  areAnySelected,
-  selectAll,
-  selectAllDisabled,
-  "aria-label": ariaLabel,
-  "data-testid": dataTestId
-}, ref) {
-  const intl = reactIntl.useIntl();
-  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    StyledMenuItem$1,
-    {
-      ref,
-      fixed: true,
-      "data-name": "menu-filter",
-      "aria-label": ariaLabel,
-      "data-testid": dataTestId,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(
-        LinkFilter,
-        {
-          variant: "body2",
-          color: "textPrimary",
-          component: "button",
-          underline: "none",
-          disabled: !!selectAllDisabled,
-          onClick: selectAll,
-          tabIndex: 0,
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              material.Checkbox,
-              {
-                checked: areAllSelected,
-                indeterminate: areAnySelected && !areAllSelected,
-                disabled: selectAllDisabled
-              }
-            ),
-            intlConfig.formatMessage({ id: "c4r.form.selectAll" })
-          ]
-        }
-      )
+      "aria-describedby": isExternalLink ? "external-hint" : ariaDescribedby,
+      children: /* @__PURE__ */ jsxRuntime.jsx(TablePaginationActions.Typography, { variant: "inherit", color: "inherit", noWrap: true, component: "span", children: renderContent() })
     }
   );
 }
-const MenuItemFilter = React.forwardRef(_MenuItemFilter);
-const idCounter = {};
-function uniqueId(prefix = "$lodash$") {
-  if (!idCounter[prefix]) {
-    idCounter[prefix] = 0;
-  }
-  const id = ++idCounter[prefix];
-  if (prefix === "$lodash$") {
-    return `${id}`;
-  }
-  return `${prefix}${id}`;
-}
-const StyledSelect = material.styled(material.Select)(({ theme }) => ({
-  "& .MuiInputAdornment-positionStart": {
-    paddingLeft: theme.spacing(2),
-    "&.MuiInputAdornment-sizeSmall": {
-      paddingLeft: theme.spacing(1.5)
-    }
-  },
-  "& .MuiInputBase-inputAdornedStart": {
-    paddingLeft: "0px !important"
-  },
-  "& .MuiSelect-select .MuiMenuItem-root:hover": {
-    backgroundColor: "transparent"
-  },
-  "&.MuiInputBase-root .MuiSelect-select.MuiSelect-multiple": {
-    paddingRight: theme.spacing(7)
+const Button = React.forwardRef(_Button);
+const ButtonGroup = material.styled(material.ButtonGroup)(({ theme, size }) => ({
+  "& .MuiButton-root:last-child": {
+    padding: 0,
+    minWidth: size === "small" ? theme.spacing(3) : size === "large" ? theme.spacing(6) : theme.spacing(4)
   }
 }));
-const PlaceholderItem = material.styled(material.MenuItem)(() => ({
-  display: "none"
-}));
-function _SelectField({
-  children,
-  placeholder,
-  size = "small",
-  displayEmpty,
-  menuProps,
-  inputProps,
-  labelId,
-  label,
-  labelSecondary,
-  helperText,
-  name,
-  error,
-  focused,
+function SplitButton({
+  options,
   disabled,
-  fullWidth,
-  required,
-  "aria-label": ariaLabel,
+  loading,
+  loadingPosition,
+  onClick,
+  variant,
+  size,
+  color,
   ...otherProps
-}, ref) {
-  const isSmall = size === "small";
+}) {
+  var _a;
+  const [open, setOpen] = React.useState(false);
+  const anchorRef = React.useRef(null);
+  const [selectedIndex, setSelectedIndex] = React.useState(0);
+  const handleClick = () => {
+    onClick(options[selectedIndex]);
+  };
+  const handleMenuItemClick = (_, index) => {
+    setSelectedIndex(index);
+    setOpen(false);
+  };
+  const handleToggle = () => {
+    setOpen((prevOpen) => !prevOpen);
+  };
+  const handleClose = (event) => {
+    var _a2;
+    if ((_a2 = anchorRef.current) == null ? void 0 : _a2.contains(event.target)) {
+      return;
+    }
+    setOpen(false);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      ButtonGroup,
+      {
+        "data-name": "split-button",
+        ref: anchorRef,
+        variant,
+        size,
+        color,
+        ...otherProps,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              disabled,
+              loading,
+              loadingPosition,
+              onClick: handleClick,
+              children: (_a = options[selectedIndex]) == null ? void 0 : _a.label
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(Button, { disabled: loading || disabled, onClick: handleToggle, children: open ? /* @__PURE__ */ jsxRuntime.jsx(OpenDiagonallyRight.ArrowUp, {}) : /* @__PURE__ */ jsxRuntime.jsx(ArrowDown.ArrowDown, {}) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      material.Popper,
+      {
+        sx: { zIndex: 1 },
+        open,
+        anchorEl: anchorRef.current,
+        role: void 0,
+        transition: true,
+        disablePortal: true,
+        placement: "bottom-end",
+        children: ({ TransitionProps, placement }) => /* @__PURE__ */ jsxRuntime.jsx(
+          material.Grow,
+          {
+            ...TransitionProps,
+            style: {
+              transformOrigin: placement === "bottom" ? "center top" : "center bottom"
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(material.Paper, { elevation: 8, children: /* @__PURE__ */ jsxRuntime.jsx(material.ClickAwayListener, { onClickAway: handleClose, children: /* @__PURE__ */ jsxRuntime.jsx(material.MenuList, { autoFocusItem: true, sx: { paddingY: 1 }, children: options.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx(
+              material.MenuItem,
+              {
+                disabled: option.disabled,
+                selected: index === selectedIndex,
+                onClick: (event) => handleMenuItemClick(event, index),
+                children: option.label
+              },
+              option.label
+            )) }) }) })
+          }
+        )
+      }
+    )
+  ] });
+}
+const Root$5 = material.styled(material.Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(0.5)
+}));
+const Indicator = material.styled(TablePaginationActions.Typography)(({ theme }) => ({
+  ".Mui-disabled &": {
+    color: theme.palette.text.disabled
+  }
+}));
+const Icon = material.styled(material.Box)(({ theme }) => ({
+  display: "flex",
+  svg: {
+    width: TablePaginationActions.ICON_SIZE_SMALL,
+    height: TablePaginationActions.ICON_SIZE_SMALL,
+    fontSize: TablePaginationActions.ICON_SIZE_SMALL,
+    path: {
+      fill: theme.palette.text.secondary,
+      ".Mui-disabled &": {
+        fill: theme.palette.text.disabled
+      }
+    }
+  }
+}));
+function LabelWithIndicator({
+  label,
+  type,
+  icon,
+  inheritSize
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Root$5, { children: [
+    label,
+    type && /* @__PURE__ */ jsxRuntime.jsx(
+      Indicator,
+      {
+        component: "span",
+        variant: inheritSize ? "inherit" : "caption",
+        color: "textSecondary",
+        weight: "regular",
+        children: type === "required" ? "(required)" : "(optional)"
+      }
+    ),
+    icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: icon })
+  ] });
+}
+function _PasswordField({ InputProps, size = "small", ...otherProps }, ref) {
+  const intl = reactIntl.useIntl();
+  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
+  const [showPassword, setShowPassword] = React.useState(false);
+  const handleClickShowPassword = () => setShowPassword(!showPassword);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.TextField,
+    {
+      ...otherProps,
+      ref,
+      type: showPassword ? "text" : "password",
+      size,
+      InputProps: {
+        ...InputProps,
+        endAdornment: /* @__PURE__ */ jsxRuntime.jsx(material.InputAdornment, { position: "end", children: /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { size, onClick: handleClickShowPassword, children: /* @__PURE__ */ jsxRuntime.jsx(
+          material.Tooltip,
+          {
+            title: intlConfig.formatMessage({
+              id: `c4r.form.${showPassword ? "hidePassword" : "showPassword"}`
+            }),
+            children: showPassword ? /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.VisibilityOffOutlined, {}) : /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.VisibilityOutlined, {})
+          }
+        ) }) })
+      }
+    }
+  );
+}
+const PasswordField = React.forwardRef(_PasswordField);
+const idCounter = {};
+function uniqueId(prefix = "$lodash$") {
+  if (!idCounter[prefix]) {
+    idCounter[prefix] = 0;
+  }
+  const id = ++idCounter[prefix];
+  if (prefix === "$lodash$") {
+    return `${id}`;
+  }
+  return `${prefix}${id}`;
+}
+const StyledSelect = material.styled(material.Select)(({ theme }) => ({
+  "& .MuiInputAdornment-positionStart": {
+    paddingLeft: theme.spacing(2),
+    "&.MuiInputAdornment-sizeSmall": {
+      paddingLeft: theme.spacing(1.5)
+    }
+  },
+  "& .MuiInputBase-inputAdornedStart": {
+    paddingLeft: "0px !important"
+  },
+  "& .MuiSelect-select .MuiMenuItem-root:hover": {
+    backgroundColor: "transparent"
+  },
+  "&.MuiInputBase-root .MuiSelect-select.MuiSelect-multiple": {
+    paddingRight: theme.spacing(7)
+  }
+}));
+const PlaceholderItem = material.styled(material.MenuItem)(() => ({
+  display: "none"
+}));
+function _SelectField({
+  children,
+  placeholder,
+  size = "small",
+  displayEmpty,
+  menuProps,
+  inputProps,
+  labelId,
+  label,
+  labelSecondary,
+  helperText,
+  name,
+  error,
+  focused,
+  disabled,
+  fullWidth,
+  required,
+  "aria-label": ariaLabel,
+  ...otherProps
+}, ref) {
+  const isSmall = size === "small";
   const [defaultId] = React.useState(() => uniqueId("select-label-"));
   const ariaLabelledBy = label ? labelId ?? defaultId : void 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -299,177 +411,407 @@ function _SelectField({
   );
 }
 const SelectField = React.forwardRef(_SelectField);
-function useMultipleSelectField({
-  selectedOptions,
-  options,
-  onChange
-}) {
-  const [currentOptions, setCurrentOptions] = React.useState(selectedOptions ?? []);
-  const isInternalUpdate = React.useRef(false);
-  React.useEffect(() => {
-    if (!isInternalUpdate.current) {
-      setCurrentOptions(selectedOptions ?? []);
-    }
-    isInternalUpdate.current = false;
-  }, [selectedOptions]);
-  const enabledOptions = React.useMemo(
-    () => options.filter(({ disabled }) => !disabled),
-    [options]
-  );
-  const enabledOptionValues = React.useMemo(
-    () => enabledOptions.map(({ value }) => value),
-    [enabledOptions]
-  );
-  const areAllSelected = enabledOptionValues.length > 0 && enabledOptionValues.every((value) => currentOptions.includes(value));
-  const areAnySelected = currentOptions.length > 0;
-  const handleChange = (event) => {
-    if (isInternalUpdate.current) {
-      return;
-    }
-    const {
-      target: { value }
-    } = event;
-    const newOptions = typeof value === "string" ? value.split(",") : value.filter((v) => v !== void 0);
-    setCurrentOptions(newOptions);
-    onChange(newOptions);
-  };
-  const selectAll = () => {
-    const optionsValues = options == null ? void 0 : options.filter(({ disabled }) => !disabled).map(({ value }) => value);
-    if (optionsValues) {
-      const allSelected = optionsValues.every(
-        (value) => currentOptions.includes(value)
-      );
-      const newValue = allSelected ? [] : optionsValues;
-      isInternalUpdate.current = true;
-      setCurrentOptions(newValue);
-      onChange(newValue);
-    }
-  };
-  const unselectAll = () => {
-    const newValue = [];
-    isInternalUpdate.current = true;
-    setCurrentOptions(newValue);
-    onChange(newValue);
-  };
-  return {
-    areAllSelected,
-    areAnySelected,
-    currentOptions,
-    handleChange,
-    selectAll,
-    unselectAll
-  };
-}
-const StyledMenuItem = material.styled(material.MenuItem)(({ theme }) => ({
-  "&.Mui-disabled": {
-    pointerEvents: "auto",
-    "&:hover": {
-      backgroundColor: `${theme.palette.background.default} !important`
+const StyledToggleButtonGroup = material.styled(material.ToggleButtonGroup, {
+  shouldForwardProp: (prop) => prop !== "variant" && prop !== "backgroundColor"
+})(({ variant, backgroundColor, theme }) => ({
+  // Variants
+  ...variant === "contained" && {
+    boxShadow: "none"
+  },
+  ...variant === "unbounded" && {
+    boxShadow: "none",
+    borderRadius: theme.spacing(0.5),
+    "& .MuiDivider-root": {
+      height: theme.spacing(4),
+      "&.MuiToggleButtonGroup-groupedHorizontal": {
+        height: theme.spacing(4)
+      },
+      "&.MuiToggleButtonGroup-groupedVertical": {
+        height: "auto",
+        width: theme.spacing(4),
+        margin: `${theme.spacing(0.5, 0, 1)} !important`,
+        borderRadius: "0 !important"
+      }
+    },
+    "& .MuiToggleButton-sizeSmall": {
+      margin: 0,
+      "&.MuiToggleButtonGroup-grouped:not(.MuiDivider-root)": {
+        margin: 0
+      },
+      "& + .MuiDivider-root.MuiToggleButtonGroup-groupedHorizontal": {
+        height: theme.spacing(3)
+      },
+      "& + .MuiDivider-root.MuiToggleButtonGroup-groupedVertical": {
+        height: "auto",
+        width: theme.spacing(3)
+      }
+    },
+    ".MuiToggleButtonGroup-grouped:not(.MuiDivider-root)": {
+      margin: 0,
+      "&:first-of-type": {
+        marginLeft: 0
+      },
+      "&:not(:last-of-type)": {
+        marginRight: theme.spacing(0.5)
+      }
+    },
+    "&.MuiToggleButtonGroup-horizontal:not(.MuiDivider-root)": {
+      ".MuiToggleButtonGroup-grouped": {
+        margin: theme.spacing(0, 0.5)
+      }
+    },
+    "&.MuiToggleButtonGroup-vertical:not(.MuiDivider-root)": {
+      ".MuiToggleButtonGroup-grouped": {
+        margin: theme.spacing(0, 0, 0.5),
+        "&:not(:last-of-type)": {
+          marginRight: 0
+        },
+        "&:last-of-type": {
+          marginBottom: 0
+        }
+      }
     }
+  },
+  // Colors
+  ...backgroundColor === "primary" && {
+    backgroundColor: theme.palette.background.paper
+  },
+  ...backgroundColor === "secondary" && {
+    backgroundColor: theme.palette.background.default
+  },
+  ...backgroundColor === "transparent" && {
+    backgroundColor: "transparent"
   }
 }));
-const UnselectButton = material.styled(material.InputAdornment, {
-  shouldForwardProp: (prop) => prop !== "size"
-})(({ theme, size }) => ({
-  display: "none",
-  position: "absolute",
-  top: theme.spacing(2),
-  right: theme.spacing(3.5),
-  ".MuiInputBase-root:hover &, .MuiInputBase-root.Mui-focused &": {
-    display: "flex"
+function ToggleButtonGroup({
+  children,
+  variant = "floating",
+  backgroundColor,
+  ...rest
+}) {
+  const isUnbounded = variant === "unbounded";
+  const defaultColor = isUnbounded ? "transparent" : "primary";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    StyledToggleButtonGroup,
+    {
+      ...rest,
+      variant,
+      backgroundColor: backgroundColor ?? defaultColor,
+      children
+    }
+  );
+}
+const StyledMenu = material.styled(material.Menu, {
+  shouldForwardProp: (prop) => !["extended", "width", "height"].includes(prop)
+})(({ extended, width, height }) => ({
+  ...extended && {
+    ".MuiMenuItem-root": {
+      minHeight: TablePaginationActions.MENU_ITEM_SIZE_EXTENDED
+    }
   },
-  ".MuiSvgIcon-root": {
-    color: theme.palette.text.hint
+  ...width && {
+    ".MuiList-root": {
+      width,
+      minWidth: width
+    }
   },
-  ...size === "medium" && {
-    top: theme.spacing(3),
-    right: theme.spacing(5)
+  ...height && {
+    ".MuiMenu-paper": {
+      overflow: "hidden"
+    },
+    ".MuiList-root": {
+      maxHeight: height
+    }
   }
 }));
-const EMPTY_ARRAY = [];
-const EMPTY_FN = () => void 0;
-function _MultipleSelectField({
-  options = EMPTY_ARRAY,
-  selectedOptions,
-  size = "small",
-  placeholder,
-  showCounter,
-  showFilters = true,
-  onChange = EMPTY_FN,
-  selectAllDisabled,
-  tooltipPlacement,
-  variant,
-  ...props
-}, ref) {
-  const {
-    areAllSelected,
-    areAnySelected,
-    currentOptions,
-    handleChange,
-    selectAll,
-    unselectAll
-  } = useMultipleSelectField({
-    options,
-    selectedOptions,
-    onChange
-  });
-  const isSmall = size === "small";
-  const paddingSize = isSmall || variant === "standard" ? 0 : 2;
-  const intl = reactIntl.useIntl();
-  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(
-        TablePaginationActions.Typography,
-        {
-          component: "span",
-          variant: isSmall ? "body2" : "body1",
-          color: "textPrimary",
-          ml: paddingSize,
-          children: intlConfig.formatMessage({ id: "c4r.form.allSelected" })
-        }
-      );
+function _Menu({ extended, width, height, MenuListProps, ...otherProps }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    StyledMenu,
+    {
+      ...otherProps,
+      ref,
+      "data-name": "menu",
+      width,
+      height,
+      extended,
+      MenuListProps: {
+        ...MenuListProps,
+        "data-width": width,
+        "data-height": height,
+        "data-extended": extended
+      }
     }
-    if (areAnySelected) {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        TablePaginationActions.Typography,
-        {
-          component: "span",
-          variant: isSmall ? "body2" : "body1",
-          color: "textPrimary",
-          ml: paddingSize,
-          children: showCounter && currentOptions.length > 1 ? counterText : currentOptions.join(", ")
-        }
-      );
+  );
+}
+const Menu$1 = React.forwardRef(_Menu);
+const StyledMenuList = material.styled(material.MenuList, {
+  shouldForwardProp: (prop) => !["extended", "width", "height"].includes(prop)
+})(({ extended, width, height }) => ({
+  ...extended && {
+    ".MuiMenuItem-root": {
+      minHeight: TablePaginationActions.MENU_ITEM_SIZE_EXTENDED
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      TablePaginationActions.Typography,
-      {
-        component: "span",
-        variant: isSmall ? "body2" : "body1",
-        color: "text.hint",
-        ml: paddingSize,
-        children: placeholder ?? intlConfig.formatMessage({ id: "c4r.form.noneSelected" })
-      }
-    );
-  }, [
-    areAllSelected,
-    areAnySelected,
-    counterText,
-    currentOptions,
-    intlConfig,
-    isSmall,
-    paddingSize,
-    placeholder,
-    showCounter
-  ]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    SelectField,
+  },
+  "&.MuiList-root": {
+    ...width && {
+      width,
+      minWidth: width
+    },
+    ...height && {
+      maxHeight: height
+    }
+  }
+}));
+function _MenuList({ extended, width, height, ...otherProps }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    StyledMenuList,
     {
-      ...props,
+      ...otherProps,
+      ref,
+      width,
+      height,
+      extended,
+      "data-name": "menu-list",
+      "data-width": width,
+      "data-height": height,
+      "data-extended": extended
+    }
+  );
+}
+const MenuList = React.forwardRef(_MenuList);
+const StyledMenuItem$1 = material.styled(MenuItem.MenuItem)(() => ({
+  marginTop: "0 !important",
+  marginBottom: "0 !important"
+}));
+const LinkFilter = material.styled(material.Link)(
+  ({ disabled, theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(1),
+    width: "100%",
+    textAlign: "initial",
+    ...disabled && {
+      pointerEvents: "none",
+      color: theme.palette.text.disabled
+    }
+  })
+);
+function _MenuItemFilter({
+  areAllSelected,
+  areAnySelected,
+  selectAll,
+  selectAllDisabled,
+  "aria-label": ariaLabel,
+  "data-testid": dataTestId
+}, ref) {
+  const intl = reactIntl.useIntl();
+  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    StyledMenuItem$1,
+    {
+      ref,
+      fixed: true,
+      "data-name": "menu-filter",
+      "aria-label": ariaLabel,
+      "data-testid": dataTestId,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        LinkFilter,
+        {
+          variant: "body2",
+          color: "textPrimary",
+          component: "button",
+          underline: "none",
+          disabled: !!selectAllDisabled,
+          onClick: selectAll,
+          tabIndex: 0,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              material.Checkbox,
+              {
+                checked: areAllSelected,
+                indeterminate: areAnySelected && !areAllSelected,
+                disabled: selectAllDisabled
+              }
+            ),
+            intlConfig.formatMessage({ id: "c4r.form.selectAll" })
+          ]
+        }
+      )
+    }
+  );
+}
+const MenuItemFilter = React.forwardRef(_MenuItemFilter);
+function useMultipleSelectField({
+  selectedOptions,
+  options,
+  onChange
+}) {
+  const [currentOptions, setCurrentOptions] = React.useState(selectedOptions ?? []);
+  const isInternalUpdate = React.useRef(false);
+  React.useEffect(() => {
+    if (!isInternalUpdate.current) {
+      setCurrentOptions(selectedOptions ?? []);
+    }
+    isInternalUpdate.current = false;
+  }, [selectedOptions]);
+  const enabledOptions = React.useMemo(
+    () => options.filter(({ disabled }) => !disabled),
+    [options]
+  );
+  const enabledOptionValues = React.useMemo(
+    () => enabledOptions.map(({ value }) => value),
+    [enabledOptions]
+  );
+  const areAllSelected = enabledOptionValues.length > 0 && enabledOptionValues.every((value) => currentOptions.includes(value));
+  const areAnySelected = currentOptions.length > 0;
+  const handleChange = (event) => {
+    if (isInternalUpdate.current) {
+      return;
+    }
+    const {
+      target: { value }
+    } = event;
+    const newOptions = typeof value === "string" ? value.split(",") : value.filter((v) => v !== void 0);
+    setCurrentOptions(newOptions);
+    onChange(newOptions);
+  };
+  const selectAll = () => {
+    const optionsValues = options == null ? void 0 : options.filter(({ disabled }) => !disabled).map(({ value }) => value);
+    if (optionsValues) {
+      const allSelected = optionsValues.every(
+        (value) => currentOptions.includes(value)
+      );
+      const newValue = allSelected ? [] : optionsValues;
+      isInternalUpdate.current = true;
+      setCurrentOptions(newValue);
+      onChange(newValue);
+    }
+  };
+  const unselectAll = () => {
+    const newValue = [];
+    isInternalUpdate.current = true;
+    setCurrentOptions(newValue);
+    onChange(newValue);
+  };
+  return {
+    areAllSelected,
+    areAnySelected,
+    currentOptions,
+    handleChange,
+    selectAll,
+    unselectAll
+  };
+}
+const StyledMenuItem = material.styled(material.MenuItem)(({ theme }) => ({
+  "&.Mui-disabled": {
+    pointerEvents: "auto",
+    "&:hover": {
+      backgroundColor: `${theme.palette.background.default} !important`
+    }
+  }
+}));
+const UnselectButton = material.styled(material.InputAdornment, {
+  shouldForwardProp: (prop) => prop !== "size"
+})(({ theme, size }) => ({
+  display: "none",
+  position: "absolute",
+  top: theme.spacing(2),
+  right: theme.spacing(3.5),
+  ".MuiInputBase-root:hover &, .MuiInputBase-root.Mui-focused &": {
+    display: "flex"
+  },
+  ".MuiSvgIcon-root": {
+    color: theme.palette.text.hint
+  },
+  ...size === "medium" && {
+    top: theme.spacing(3),
+    right: theme.spacing(5)
+  }
+}));
+const EMPTY_ARRAY = [];
+const EMPTY_FN = () => void 0;
+function _MultipleSelectField({
+  options = EMPTY_ARRAY,
+  selectedOptions,
+  size = "small",
+  placeholder,
+  showCounter,
+  showFilters = true,
+  onChange = EMPTY_FN,
+  selectAllDisabled,
+  tooltipPlacement,
+  variant,
+  ...props
+}, ref) {
+  const {
+    areAllSelected,
+    areAnySelected,
+    currentOptions,
+    handleChange,
+    selectAll,
+    unselectAll
+  } = useMultipleSelectField({
+    options,
+    selectedOptions,
+    onChange
+  });
+  const isSmall = size === "small";
+  const paddingSize = isSmall || variant === "standard" ? 0 : 2;
+  const intl = reactIntl.useIntl();
+  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(
+        TablePaginationActions.Typography,
+        {
+          component: "span",
+          variant: isSmall ? "body2" : "body1",
+          color: "textPrimary",
+          ml: paddingSize,
+          children: intlConfig.formatMessage({ id: "c4r.form.allSelected" })
+        }
+      );
+    }
+    if (areAnySelected) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        TablePaginationActions.Typography,
+        {
+          component: "span",
+          variant: isSmall ? "body2" : "body1",
+          color: "textPrimary",
+          ml: paddingSize,
+          children: showCounter && currentOptions.length > 1 ? counterText : currentOptions.join(", ")
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      TablePaginationActions.Typography,
+      {
+        component: "span",
+        variant: isSmall ? "body2" : "body1",
+        color: "text.hint",
+        ml: paddingSize,
+        children: placeholder ?? intlConfig.formatMessage({ id: "c4r.form.noneSelected" })
+      }
+    );
+  }, [
+    areAllSelected,
+    areAnySelected,
+    counterText,
+    currentOptions,
+    intlConfig,
+    isSmall,
+    paddingSize,
+    placeholder,
+    showCounter
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    SelectField,
+    {
+      ...props,
       ref,
       multiple: true,
       displayEmpty: true,
@@ -1529,17 +1871,107 @@ function useAutocomplete({
     getOptionLabel: internalGetOptionLabel
   };
 }
-const AccordionContainer = material.styled("div", {
-  shouldForwardProp: (prop) => prop !== "variant"
-})(({ variant, theme }) => ({
-  width: "100%",
-  borderRadius: theme.spacing(0.5),
-  ...variant === "outlined" && {
-    backgroundColor: theme.palette.background.paper,
-    boxShadow: `inset 0 0 0 1px ${theme.palette.divider}`
-  }
-}));
-function AccordionGroup({
+const _CopiableComponent = ({
+  children,
+  disabled,
+  value,
+  onCopied,
+  copyText = "c4r.button.copy",
+  copiedText = "c4r.notifications.copiedToClipboard",
+  button,
+  buttonLabel,
+  buttonProps,
+  ariaLabel,
+  dataTestId,
+  tooltipPlacement = "top",
+  ...props
+}, ref) => {
+  const intl = reactIntl.useIntl();
+  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
+  const [open, setOpen] = React.useState(false);
+  const { copy } = useCopyValue(copyText, copiedText);
+  const handleClick = (e) => {
+    e.preventDefault();
+    copy(value).then(() => {
+      onCopied == null ? void 0 : onCopied();
+      setOpen(true);
+    }).catch(console.error);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      material.Tooltip,
+      {
+        title: intlConfig.formatMessage({ id: copyText }),
+        leaveDelay: 0,
+        placement: tooltipPlacement,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          material.Box,
+          {
+            ...props,
+            sx: { cursor: disabled ? void 0 : "pointer" },
+            onClick: handleClick,
+            "data-name": "copiable",
+            ref,
+            children: [
+              children,
+              button && /* @__PURE__ */ jsxRuntime.jsx(
+                Alert$1.IconButton,
+                {
+                  ...buttonProps,
+                  disabled,
+                  icon: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.ContentCopyOutlined, {}),
+                  "data-testid": dataTestId,
+                  "aria-label": ariaLabel || buttonLabel,
+                  sx: {
+                    display: "flex"
+                  }
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Snackbar,
+      {
+        open,
+        autoWidth: true,
+        closeable: false,
+        autoHideDuration: 4e3,
+        onClose: () => setOpen(false),
+        children: intlConfig.formatMessage({ id: copiedText })
+      }
+    )
+  ] });
+};
+const CopiableComponent = React.forwardRef(_CopiableComponent);
+async function copyString(value) {
+  return await navigator.clipboard.writeText(value);
+}
+const useCopyValue = (msg = "c4r.button.copy", copiedMsg = "c4r.notifications.copiedToClipboard") => {
+  const [message, setMessage] = React.useState(msg);
+  const copy = async (text) => {
+    await copyString(text);
+    setMessage(copiedMsg);
+    setTimeout(() => setMessage(msg), 1e3);
+  };
+  return {
+    message,
+    copy
+  };
+};
+const AccordionContainer = material.styled("div", {
+  shouldForwardProp: (prop) => prop !== "variant"
+})(({ variant, theme }) => ({
+  width: "100%",
+  borderRadius: theme.spacing(0.5),
+  ...variant === "outlined" && {
+    backgroundColor: theme.palette.background.paper,
+    boxShadow: `inset 0 0 0 1px ${theme.palette.divider}`
+  }
+}));
+function AccordionGroup({
   variant = "standard",
   items,
   ...otherProps
@@ -1628,7 +2060,7 @@ const Content$4 = material.styled(material.Box, {
     }
   }
 }));
-const Alert = material.styled(Link.Alert, {
+const Alert = material.styled(Alert$1.Alert, {
   shouldForwardProp: (prop) => !["hasActions", "closeable"].includes(prop)
 })(({ hasActions, closeable, icon, theme }) => ({
   position: "relative",
@@ -1742,7 +2174,7 @@ function Snackbar({
               }
             ),
             closeable && /* @__PURE__ */ jsxRuntime.jsx(CloseButtonWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
-              Link.IconButton,
+              Alert$1.IconButton,
               {
                 color: "default",
                 onClick: (e) => onClose(e, "timeout"),
@@ -1824,652 +2256,129 @@ function colorProps(color, variant, theme, disabled) {
       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),
-    '.Mui-selected &, [aria-selected="true"] &': {
-      borderColor: theme.palette.primary.main,
-      backgroundColor: theme.palette.primary.background,
-      ".MuiTypography-root": {
-        color: theme.palette.primary.main
-      }
-    }
-  };
-});
-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("div", {
-  shouldForwardProp: (prop) => !["type"].includes(prop)
-})(({ type, theme }) => ({
-  display: "flex",
-  alignItems: "center",
-  paddingTop: type === "code" ? 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, { 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 _CopiableComponent = ({
-  children,
-  disabled,
-  value,
-  onCopied,
-  copyText,
-  copiedText,
-  button,
-  buttonLabel,
-  buttonProps,
-  ariaLabel,
-  dataTestId,
-  tooltipPlacement = "top",
-  ...props
-}, ref) => {
-  const [open, setOpen] = React.useState(false);
-  const intl = reactIntl.useIntl();
-  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
-  const copyTooltipText = copyText || intlConfig.formatMessage({ id: "c4r.button.copy" });
-  const copySuccessMessage = copiedText || intlConfig.formatMessage({
-    id: "c4r.notifications.copiedToClipboard"
-  });
-  const { copy } = useCopyValue(copyTooltipText, copySuccessMessage);
-  const handleClick = (e) => {
-    e.preventDefault();
-    copy(value).then(() => {
-      onCopied == null ? void 0 : onCopied();
-      setOpen(true);
-    }).catch(console.error);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      material.Tooltip,
-      {
-        title: copyTooltipText,
-        leaveDelay: 0,
-        placement: tooltipPlacement,
-        children: /* @__PURE__ */ jsxRuntime.jsxs(
-          material.Box,
-          {
-            ...props,
-            sx: { cursor: disabled ? void 0 : "pointer" },
-            onClick: handleClick,
-            "data-name": "copiable",
-            ref,
-            children: [
-              children,
-              button && /* @__PURE__ */ jsxRuntime.jsx(
-                Link.IconButton,
-                {
-                  ...buttonProps,
-                  disabled,
-                  icon: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.ContentCopyOutlined, {}),
-                  "data-testid": dataTestId,
-                  "aria-label": ariaLabel || buttonLabel || copyTooltipText,
-                  sx: {
-                    display: "flex"
-                  }
-                }
-              )
-            ]
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      Snackbar,
-      {
-        open,
-        autoWidth: true,
-        closeable: false,
-        autoHideDuration: 4e3,
-        onClose: () => setOpen(false),
-        children: copySuccessMessage
-      }
-    )
-  ] });
-};
-const CopiableComponent = React.forwardRef(_CopiableComponent);
-const StyledTextField = material.styled(material.TextField)(() => ({
-  "& input": {
-    textOverflow: "unset"
-    // This is needed to avoid scrolling issues in the input
-  }
-}));
-const AdornmentWrapper = material.styled(material.Box, {
-  shouldForwardProp: (prop) => !["size", "variant"].includes(prop)
-})(({ variant, size, theme }) => ({
-  width: theme.spacing(3),
-  ...variant === "standard" ? {
-    marginLeft: theme.spacing(-0.25)
-  } : {
-    marginRight: theme.spacing(-1)
-  },
-  ...size === "medium" && {
-    width: theme.spacing(4),
-    ...variant === "standard" ? {
-      marginLeft: theme.spacing(-0.5)
-    } : {
-      marginLeft: theme.spacing(1)
-    }
-  }
-}));
-function _CopiableInputText({
-  value,
-  variant,
-  InputProps,
-  extraEndAdornment,
-  onCopied,
-  password,
-  size = "small",
-  ...rest
-}, ref) {
-  const intl = reactIntl.useIntl();
-  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
-  const [showText, setShowText] = React.useState(false);
-  const inputType = !password ? "text" : showText ? "text" : "password";
-  const showTextLabel = intlConfig.formatMessage({
-    id: showText ? "c4r.button.hide" : "c4r.button.show"
-  });
-  const passwordAdornment = /* @__PURE__ */ jsxRuntime.jsx(material.InputAdornment, { position: "end", children: /* @__PURE__ */ jsxRuntime.jsx(
-    Link.IconButton,
-    {
-      edge: variant !== "standard" ? "end" : void 0,
-      onClick: () => setShowText(!showText),
-      size,
-      icon: showText ? /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.VisibilityOutlined, {}) : /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.VisibilityOffOutlined, {}),
-      tooltip: showTextLabel,
-      "aria-label": showTextLabel
-    }
-  ) });
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    StyledTextField,
-    {
-      ...rest,
-      size,
-      value,
-      variant,
-      InputProps: {
-        readOnly: true,
-        endAdornment: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          password ? passwordAdornment : extraEndAdornment,
-          /* @__PURE__ */ jsxRuntime.jsx(material.InputAdornment, { position: "end", children: /* @__PURE__ */ jsxRuntime.jsx(AdornmentWrapper, { size, variant, children: /* @__PURE__ */ jsxRuntime.jsx(
-            CopiableComponent,
-            {
-              value,
-              onCopied,
-              button: true,
-              buttonProps: {
-                size
-              }
-            }
-          ) }) })
-        ] }),
-        ...variant === "filled" && {
-          disableUnderline: true
-        },
-        ...InputProps
-      },
-      type: inputType,
-      "data-name": "copiable-input-text",
-      ref
-    }
-  );
-}
-const CopiableInputText = React.forwardRef(_CopiableInputText);
-async function copyString(value) {
-  return await navigator.clipboard.writeText(value);
-}
-const useCopyValue = (msg = "c4r.button.copy", copiedMsg = "c4r.notifications.copiedToClipboard") => {
-  const [message, setMessage] = React.useState(msg);
-  const copy = async (text) => {
-    await copyString(text);
-    setMessage(copiedMsg);
-    setTimeout(() => setMessage(msg), 1e3);
-  };
-  return {
-    message,
-    copy
-  };
-};
-const IndicatorIcon = material.styled(material.Box)({
-  position: "absolute",
-  top: 0,
-  left: 0,
-  right: 0,
-  bottom: 0,
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center"
-});
-const HiddenText = material.styled(material.Box)({
-  visibility: "hidden",
-  pointerEvents: "none"
-});
-function _Button({
-  children,
-  loading,
-  disabled,
-  startIcon,
-  endIcon,
-  loadingPosition,
-  external,
-  showExternalIcon = true,
-  "aria-describedby": ariaDescribedby,
-  ...otherProps
-}, ref) {
-  const intl = reactIntl.useIntl();
-  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
-  const defaultIconLoader = /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 18, color: "inherit" });
-  const isDefaultLoading = loading && loadingPosition === void 0;
-  const isExternalLink = otherProps.href && external;
-  const renderContent = () => {
-    if (isDefaultLoading) {
-      return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { position: "relative" }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(IndicatorIcon, { children: defaultIconLoader }),
-        /* @__PURE__ */ jsxRuntime.jsx(HiddenText, { children })
-      ] });
-    }
-    if (isExternalLink) {
-      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        children,
-        /* @__PURE__ */ jsxRuntime.jsx(Link.ScreenReaderOnly, { id: "external-hint", children: `(${intlConfig.formatMessage({
-          id: "c4r.button.opensInNewTab"
-        })})` })
-      ] });
-    }
-    return children;
-  };
-  const getIconForPosition = (position) => {
-    if (isDefaultLoading) {
-      return void 0;
-    }
-    if (loading && loadingPosition !== void 0) {
-      if (loadingPosition === position) {
-        return defaultIconLoader;
-      }
-      return void 0;
-    }
-    if (position === "start") {
-      return startIcon;
-    } else {
-      return endIcon || (isExternalLink && showExternalIcon ? /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.OpenInNewOutlined, {}) : void 0);
-    }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    material.Button,
-    {
-      disabled: loading || disabled,
-      startIcon: getIconForPosition("start"),
-      endIcon: getIconForPosition("end"),
-      ...otherProps,
-      role: otherProps.href ? "link" : "button",
-      ...isExternalLink && {
-        target: "_blank",
-        rel: "noopener noreferrer"
-      },
-      ref,
-      "aria-describedby": isExternalLink ? "external-hint" : ariaDescribedby,
-      children: /* @__PURE__ */ jsxRuntime.jsx(TablePaginationActions.Typography, { variant: "inherit", color: "inherit", noWrap: true, component: "span", children: renderContent() })
-    }
-  );
-}
-const Button = React.forwardRef(_Button);
-const ButtonGroup = material.styled(material.ButtonGroup)(({ theme, size }) => ({
-  "& .MuiButton-root:last-child": {
-    padding: 0,
-    minWidth: size === "small" ? theme.spacing(3) : size === "large" ? theme.spacing(6) : theme.spacing(4)
-  }
-}));
-function SplitButton({
-  options,
-  disabled,
-  loading,
-  loadingPosition,
-  onClick,
-  variant,
-  size,
-  color,
-  ...otherProps
-}) {
-  var _a;
-  const [open, setOpen] = React.useState(false);
-  const anchorRef = React.useRef(null);
-  const [selectedIndex, setSelectedIndex] = React.useState(0);
-  const handleClick = () => {
-    onClick(options[selectedIndex]);
-  };
-  const handleMenuItemClick = (_, index) => {
-    setSelectedIndex(index);
-    setOpen(false);
-  };
-  const handleToggle = () => {
-    setOpen((prevOpen) => !prevOpen);
-  };
-  const handleClose = (event) => {
-    var _a2;
-    if ((_a2 = anchorRef.current) == null ? void 0 : _a2.contains(event.target)) {
-      return;
-    }
-    setOpen(false);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      ButtonGroup,
-      {
-        "data-name": "split-button",
-        ref: anchorRef,
-        variant,
-        size,
-        color,
-        ...otherProps,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Button,
-            {
-              disabled,
-              loading,
-              loadingPosition,
-              onClick: handleClick,
-              children: (_a = options[selectedIndex]) == null ? void 0 : _a.label
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(Button, { disabled: loading || disabled, onClick: handleToggle, children: open ? /* @__PURE__ */ jsxRuntime.jsx(OpenDiagonallyRight.ArrowUp, {}) : /* @__PURE__ */ jsxRuntime.jsx(ArrowDown.ArrowDown, {}) })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      material.Popper,
-      {
-        sx: { zIndex: 1 },
-        open,
-        anchorEl: anchorRef.current,
-        role: void 0,
-        transition: true,
-        disablePortal: true,
-        placement: "bottom-end",
-        children: ({ TransitionProps, placement }) => /* @__PURE__ */ jsxRuntime.jsx(
-          material.Grow,
-          {
-            ...TransitionProps,
-            style: {
-              transformOrigin: placement === "bottom" ? "center top" : "center bottom"
-            },
-            children: /* @__PURE__ */ jsxRuntime.jsx(material.Paper, { elevation: 8, children: /* @__PURE__ */ jsxRuntime.jsx(material.ClickAwayListener, { onClickAway: handleClose, children: /* @__PURE__ */ jsxRuntime.jsx(material.MenuList, { autoFocusItem: true, sx: { paddingY: 1 }, children: options.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx(
-              material.MenuItem,
-              {
-                disabled: option.disabled,
-                selected: index === selectedIndex,
-                onClick: (event) => handleMenuItemClick(event, index),
-                children: option.label
-              },
-              option.label
-            )) }) }) })
-          }
-        )
+        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 Root$5 = material.styled(material.Box)(({ theme }) => ({
+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),
+    '.Mui-selected &, [aria-selected="true"] &': {
+      borderColor: theme.palette.primary.main,
+      backgroundColor: theme.palette.primary.background,
+      ".MuiTypography-root": {
+        color: theme.palette.primary.main
+      }
+    }
+  };
+});
+const TagIcon = material.styled("div")(({ theme }) => ({
   display: "flex",
+  justifyContent: "center",
   alignItems: "center",
-  gap: theme.spacing(0.5)
-}));
-const Indicator = material.styled(TablePaginationActions.Typography)(({ theme }) => ({
-  ".Mui-disabled &": {
-    color: theme.palette.text.disabled
+  "& svg": {
+    width: theme.spacing(TablePaginationActions.ICON_SIZE_SMALL),
+    height: theme.spacing(TablePaginationActions.ICON_SIZE_SMALL),
+    "& g": {
+      fill: "currentColor"
+    }
   }
 }));
-const Icon = material.styled(material.Box)(({ theme }) => ({
+const TagLabel = material.styled("div", {
+  shouldForwardProp: (prop) => !["type"].includes(prop)
+})(({ type, theme }) => ({
   display: "flex",
-  svg: {
-    width: TablePaginationActions.ICON_SIZE_SMALL,
-    height: TablePaginationActions.ICON_SIZE_SMALL,
-    fontSize: TablePaginationActions.ICON_SIZE_SMALL,
-    path: {
-      fill: theme.palette.text.secondary,
-      ".Mui-disabled &": {
-        fill: theme.palette.text.disabled
-      }
-    }
-  }
+  alignItems: "center",
+  paddingTop: type === "code" ? theme.spacing(0.25) : void 0
 }));
-function LabelWithIndicator({
+function _Tag({
   label,
-  type,
+  color = "primary",
+  variant = "filled",
   icon,
-  inheritSize
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(Root$5, { children: [
-    label,
-    type && /* @__PURE__ */ jsxRuntime.jsx(
-      Indicator,
-      {
-        component: "span",
-        variant: inheritSize ? "inherit" : "caption",
-        color: "textSecondary",
-        weight: "regular",
-        children: type === "required" ? "(required)" : "(optional)"
-      }
-    ),
-    icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: icon })
-  ] });
-}
-function _PasswordField({ InputProps, size = "small", ...otherProps }, ref) {
-  const intl = reactIntl.useIntl();
-  const intlConfig = TablePaginationActions.useImperativeIntl(intl);
-  const [showPassword, setShowPassword] = React.useState(false);
-  const handleClickShowPassword = () => setShowPassword(!showPassword);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    material.TextField,
+  type = "default",
+  typographyProps,
+  noWrap = true,
+  disabled,
+  ...otherProps
+}, ref) {
+  const typeCode = type === "code";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    TagRoot,
     {
-      ...otherProps,
       ref,
-      type: showPassword ? "text" : "password",
-      size,
-      InputProps: {
-        ...InputProps,
-        endAdornment: /* @__PURE__ */ jsxRuntime.jsx(material.InputAdornment, { position: "end", children: /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { size, onClick: handleClickShowPassword, children: /* @__PURE__ */ jsxRuntime.jsx(
-          material.Tooltip,
+      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, { type, children: /* @__PURE__ */ jsxRuntime.jsx(
+          TablePaginationActions.Typography,
           {
-            title: intlConfig.formatMessage({
-              id: `c4r.form.${showPassword ? "hidePassword" : "showPassword"}`
-            }),
-            children: showPassword ? /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.VisibilityOffOutlined, {}) : /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.VisibilityOutlined, {})
+            component: "span",
+            color: "inherit",
+            variant: typeCode ? "code3" : "caption",
+            weight: typeCode ? "strong" : "medium",
+            noWrap,
+            ...typographyProps,
+            children: label
           }
-        ) }) })
-      }
-    }
-  );
-}
-const PasswordField = React.forwardRef(_PasswordField);
-const StyledToggleButtonGroup = material.styled(material.ToggleButtonGroup, {
-  shouldForwardProp: (prop) => prop !== "variant" && prop !== "backgroundColor"
-})(({ variant, backgroundColor, theme }) => ({
-  // Variants
-  ...variant === "contained" && {
-    boxShadow: "none"
-  },
-  ...variant === "unbounded" && {
-    boxShadow: "none",
-    borderRadius: theme.spacing(0.5),
-    "& .MuiDivider-root": {
-      height: theme.spacing(4),
-      "&.MuiToggleButtonGroup-groupedHorizontal": {
-        height: theme.spacing(4)
-      },
-      "&.MuiToggleButtonGroup-groupedVertical": {
-        height: "auto",
-        width: theme.spacing(4),
-        margin: `${theme.spacing(0.5, 0, 1)} !important`,
-        borderRadius: "0 !important"
-      }
-    },
-    "& .MuiToggleButton-sizeSmall": {
-      margin: 0,
-      "&.MuiToggleButtonGroup-grouped:not(.MuiDivider-root)": {
-        margin: 0
-      },
-      "& + .MuiDivider-root.MuiToggleButtonGroup-groupedHorizontal": {
-        height: theme.spacing(3)
-      },
-      "& + .MuiDivider-root.MuiToggleButtonGroup-groupedVertical": {
-        height: "auto",
-        width: theme.spacing(3)
-      }
-    },
-    ".MuiToggleButtonGroup-grouped:not(.MuiDivider-root)": {
-      margin: 0,
-      "&:first-of-type": {
-        marginLeft: 0
-      },
-      "&:not(:last-of-type)": {
-        marginRight: theme.spacing(0.5)
-      }
-    },
-    "&.MuiToggleButtonGroup-horizontal:not(.MuiDivider-root)": {
-      ".MuiToggleButtonGroup-grouped": {
-        margin: theme.spacing(0, 0.5)
-      }
-    },
-    "&.MuiToggleButtonGroup-vertical:not(.MuiDivider-root)": {
-      ".MuiToggleButtonGroup-grouped": {
-        margin: theme.spacing(0, 0, 0.5),
-        "&:not(:last-of-type)": {
-          marginRight: 0
-        },
-        "&:last-of-type": {
-          marginBottom: 0
-        }
-      }
-    }
-  },
-  // Colors
-  ...backgroundColor === "primary" && {
-    backgroundColor: theme.palette.background.paper
-  },
-  ...backgroundColor === "secondary" && {
-    backgroundColor: theme.palette.background.default
-  },
-  ...backgroundColor === "transparent" && {
-    backgroundColor: "transparent"
-  }
-}));
-function ToggleButtonGroup({
-  children,
-  variant = "floating",
-  backgroundColor,
-  ...rest
-}) {
-  const isUnbounded = variant === "unbounded";
-  const defaultColor = isUnbounded ? "transparent" : "primary";
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    StyledToggleButtonGroup,
-    {
-      ...rest,
-      variant,
-      backgroundColor: backgroundColor ?? defaultColor,
-      children
+        ) })
+      ]
     }
   );
 }
+const Tag = React.forwardRef(_Tag);
 const Menu = material.styled("div")(({ theme }) => ({
   display: "flex",
   alignItems: "center",
@@ -3515,7 +3424,7 @@ function CodeAreaHeader({
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs(Header, { size, "data-size": size, "data-name": "code-area-header", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          Link.IconButton,
+          Alert$1.IconButton,
           {
             color: "default",
             size,
@@ -3579,7 +3488,7 @@ function CodeAreaHeader({
       }
     ),
     showExpandButton && /* @__PURE__ */ jsxRuntime.jsx(
-      Link.IconButton,
+      Alert$1.IconButton,
       {
         color: "default",
         size,
@@ -4751,7 +4660,7 @@ const DialogContentPadded = material.styled(DialogContent, {
     paddingBottom: `${theme.spacing(3)} !important`
   }
 }));
-const StyledAlert = material.styled(Link.Alert)(({ theme }) => ({
+const StyledAlert = material.styled(Alert$1.Alert)(({ theme }) => ({
   minHeight: "auto",
   padding: 0,
   backgroundColor: "transparent",
@@ -5183,10 +5092,10 @@ function CodeAreaDialog({
 }
 exports.TablePaginationActions = TablePaginationActions.TablePaginationActions;
 exports.Typography = TablePaginationActions.Typography;
-exports.Alert = Link.Alert;
-exports.IconButton = Link.IconButton;
-exports.Link = Link.Link;
-exports.ScreenReaderOnly = Link.ScreenReaderOnly;
+exports.Alert = Alert$1.Alert;
+exports.IconButton = Alert$1.IconButton;
+exports.Link = Alert$1.Link;
+exports.ScreenReaderOnly = Alert$1.ScreenReaderOnly;
 exports.MenuItem = MenuItem.MenuItem;
 exports.AUTOCOMPLETE_GROUP_HEADER_PROPERTY = AUTOCOMPLETE_GROUP_HEADER_PROPERTY;
 exports.AccordionGroup = AccordionGroup;
@@ -5205,7 +5114,6 @@ exports.CodeAreaHeader = CodeAreaHeader;
 exports.CodeAreaInput = CodeAreaInput;
 exports.CodeAreaMarkTextPattern = CodeAreaMarkTextPattern;
 exports.CopiableComponent = CopiableComponent;
-exports.CopiableInputText = CopiableInputText;
 exports.CreatableAutocomplete = CreatableAutocomplete;
 exports.DatePicker = DatePicker;
 exports.DateRangePicker = DateRangePicker;