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

package/dist/components/index.js

@@ -1,16 +1,16 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import React, { forwardRef, useState, useRef, useEffect, useMemo, createElement, Fragment as Fragment$1, useCallback, useImperativeHandle } from "react";
 import { useIntl } from "react-intl";
-import { styled, Menu as Menu$2, MenuList as MenuList$1, Link, Checkbox, Select, MenuItem as MenuItem$1, FormControl, Box, InputLabel, FormHelperText, InputAdornment, IconButton, ListItemText, Tooltip, TextField, CircularProgress, Button as Button$1, Autocomplete as Autocomplete$1, Divider, ListItemIcon, createFilterOptions, Accordion, AccordionSummary, AccordionDetails, Avatar as Avatar$1, Snackbar as Snackbar$1, Portal, Fade, Slide, Popper, Grow, Paper, ClickAwayListener, ButtonGroup as ButtonGroup$1, ToggleButtonGroup as ToggleButtonGroup$1, alpha, useTheme, Toolbar, AppBar as AppBar$1, Dialog as Dialog$1, DialogTitle as DialogTitle$1, Chip, DialogContent as DialogContent$1, DialogActions as DialogActions$1 } from "@mui/material";
-import { Cancel, AddCircleOutlineOutlined, CloseOutlined, ContentCopyOutlined, VisibilityOutlined, VisibilityOffOutlined, OpenInNewOutlined, MenuOutlined, HelpOutline, TodayOutlined, MoreVertOutlined, ErrorOutline, Check } from "@mui/icons-material";
-import { f as MENU_ITEM_SIZE_EXTENDED, u as useImperativeIntl, T as Typography, e as MENU_ITEM_SIZE_DENSE, d as MENU_LIST_MAX_SIZE, M as MENU_ITEM_SIZE_DEFAULT, c as ICON_SIZE_SMALL, N as NOTIFICATION_DURATION_IN_MS, A as APPBAR_SIZE } from "../TablePaginationActions-CCDi-BO-.js";
-import { a } from "../TablePaginationActions-CCDi-BO-.js";
-import { A as Alert$1, I as IconButton$1, S as ScreenReaderOnly } from "../Link-D5fKicEY.js";
-import { L } from "../Link-D5fKicEY.js";
+import { styled, Box, Button as Button$1, CircularProgress, Popper, Grow, Paper, ClickAwayListener, MenuList as MenuList$1, MenuItem, ButtonGroup as ButtonGroup$1, TextField, InputAdornment, IconButton, Tooltip, Select, FormControl, InputLabel, FormHelperText, ToggleButtonGroup as ToggleButtonGroup$1, Menu as Menu$2, Link, Checkbox, ListItemText, Autocomplete as Autocomplete$1, Divider, ListItemIcon, createFilterOptions, Accordion, AccordionSummary, AccordionDetails, Avatar as Avatar$1, Snackbar as Snackbar$1, Portal, Fade, Slide, alpha, useTheme, Toolbar, AppBar as AppBar$1, Dialog as Dialog$1, DialogTitle as DialogTitle$1, Chip, DialogContent as DialogContent$1, DialogActions as DialogActions$1 } from "@mui/material";
+import { OpenInNewOutlined, VisibilityOffOutlined, VisibilityOutlined, Cancel, AddCircleOutlineOutlined, ContentCopyOutlined, CloseOutlined, MenuOutlined, HelpOutline, TodayOutlined, MoreVertOutlined, ErrorOutline, Check } from "@mui/icons-material";
+import { u as useImperativeIntl, T as Typography, c as ICON_SIZE_SMALL, f as MENU_ITEM_SIZE_EXTENDED, e as MENU_ITEM_SIZE_DENSE, d as MENU_LIST_MAX_SIZE, M as MENU_ITEM_SIZE_DEFAULT, N as NOTIFICATION_DURATION_IN_MS, A as APPBAR_SIZE } from "../TablePaginationActions-BWer8cmX.js";
+import { a } from "../TablePaginationActions-BWer8cmX.js";
+import { S as ScreenReaderOnly, I as IconButton$1, A as Alert$1 } from "../Alert-yL5uEg4Z.js";
+import { L } from "../Alert-yL5uEg4Z.js";
 import { A as ArrowDown } from "../ArrowDown-d6bxUL0F.js";
 import { A as ArrowUp, O as OpenDiagonallyRight, C as CloseDiagonallyRight } from "../OpenDiagonallyRight-CGdCEXlF.js";
 import "cartocolor";
-import { M as MenuItem } from "../MenuItem-CKrhDizf.js";
+import { M as MenuItem$1 } from "../MenuItem-Cx8rUKOU.js";
 import { FixedSizeList } from "react-window";
 import { DatePicker as DatePicker$1 } from "@mui/x-date-pickers/DatePicker";
 import { PickersDay as PickersDay$1 } from "@mui/x-date-pickers";
@@ -41,199 +41,311 @@ import "codemirror/addon/fold/indent-fold.js";
 import "codemirror/addon/fold/markdown-fold.js";
 import "codemirror/addon/fold/comment-fold.js";
 import ClickAwayListener$1 from "@mui/material/ClickAwayListener";
-const StyledMenu = styled(Menu$2, {
-  shouldForwardProp: (prop) => !["extended", "width", "height"].includes(prop)
-})(({ extended, width, height }) => ({
-  ...extended && {
-    ".MuiMenuItem-root": {
-      minHeight: MENU_ITEM_SIZE_EXTENDED
+const IndicatorIcon = styled(Box)({
+  position: "absolute",
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center"
+});
+const HiddenText = styled(Box)({
+  visibility: "hidden",
+  pointerEvents: "none"
+});
+function _Button({
+  children,
+  loading,
+  disabled,
+  startIcon,
+  endIcon,
+  loadingPosition,
+  external,
+  showExternalIcon = true,
+  "aria-describedby": ariaDescribedby,
+  ...otherProps
+}, ref) {
+  const intl = useIntl();
+  const intlConfig = useImperativeIntl(intl);
+  const defaultIconLoader = /* @__PURE__ */ jsx(CircularProgress, { size: 18, color: "inherit" });
+  const isDefaultLoading = loading && loadingPosition === void 0;
+  const isExternalLink = otherProps.href && external;
+  const renderContent = () => {
+    if (isDefaultLoading) {
+      return /* @__PURE__ */ jsxs(Box, { sx: { position: "relative" }, children: [
+        /* @__PURE__ */ jsx(IndicatorIcon, { children: defaultIconLoader }),
+        /* @__PURE__ */ jsx(HiddenText, { children })
+      ] });
     }
-  },
-  ...width && {
-    ".MuiList-root": {
-      width,
-      minWidth: width
+    if (isExternalLink) {
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        children,
+        /* @__PURE__ */ jsx(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__ */ 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 = forwardRef(_Menu);
-const StyledMenuList = styled(MenuList$1, {
-  shouldForwardProp: (prop) => !["extended", "width", "height"].includes(prop)
-})(({ extended, width, height }) => ({
-  ...extended && {
-    ".MuiMenuItem-root": {
-      minHeight: MENU_ITEM_SIZE_EXTENDED
-    }
-  },
-  "&.MuiList-root": {
-    ...width && {
-      width,
-      minWidth: width
-    },
-    ...height && {
-      maxHeight: height
+    if (position === "start") {
+      return startIcon;
+    } else {
+      return endIcon || (isExternalLink && showExternalIcon ? /* @__PURE__ */ jsx(OpenInNewOutlined, {}) : void 0);
     }
-  }
-}));
-function _MenuList({ extended, width, height, ...otherProps }, ref) {
+  };
   return /* @__PURE__ */ jsx(
-    StyledMenuList,
+    Button$1,
     {
+      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 = forwardRef(_MenuList);
-const StyledMenuItem$1 = styled(MenuItem)(() => ({
-  marginTop: "0 !important",
-  marginBottom: "0 !important"
-}));
-const LinkFilter = styled(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 = useIntl();
-  const intlConfig = useImperativeIntl(intl);
-  return /* @__PURE__ */ jsx(
-    StyledMenuItem$1,
-    {
-      ref,
-      fixed: true,
-      "data-name": "menu-filter",
-      "aria-label": ariaLabel,
-      "data-testid": dataTestId,
-      children: /* @__PURE__ */ jsxs(
-        LinkFilter,
-        {
-          variant: "body2",
-          color: "textPrimary",
-          component: "button",
-          underline: "none",
-          disabled: !!selectAllDisabled,
-          onClick: selectAll,
-          tabIndex: 0,
-          children: [
-            /* @__PURE__ */ jsx(
-              Checkbox,
-              {
-                checked: areAllSelected,
-                indeterminate: areAnySelected && !areAllSelected,
-                disabled: selectAllDisabled
-              }
-            ),
-            intlConfig.formatMessage({ id: "c4r.form.selectAll" })
-          ]
-        }
-      )
+      "aria-describedby": isExternalLink ? "external-hint" : ariaDescribedby,
+      children: /* @__PURE__ */ jsx(Typography, { variant: "inherit", color: "inherit", noWrap: true, component: "span", children: renderContent() })
     }
   );
 }
-const MenuItemFilter = 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 = styled(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 = forwardRef(_Button);
+const ButtonGroup = styled(ButtonGroup$1)(({ theme, size }) => ({
+  "& .MuiButton-root:last-child": {
+    padding: 0,
+    minWidth: size === "small" ? theme.spacing(3) : size === "large" ? theme.spacing(6) : theme.spacing(4)
   }
 }));
-const PlaceholderItem = styled(MenuItem$1)(() => ({
-  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";
-  const [defaultId] = useState(() => uniqueId("select-label-"));
+}) {
+  var _a;
+  const [open, setOpen] = useState(false);
+  const anchorRef = useRef(null);
+  const [selectedIndex, setSelectedIndex] = 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__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      ButtonGroup,
+      {
+        "data-name": "split-button",
+        ref: anchorRef,
+        variant,
+        size,
+        color,
+        ...otherProps,
+        children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              disabled,
+              loading,
+              loadingPosition,
+              onClick: handleClick,
+              children: (_a = options[selectedIndex]) == null ? void 0 : _a.label
+            }
+          ),
+          /* @__PURE__ */ jsx(Button, { disabled: loading || disabled, onClick: handleToggle, children: open ? /* @__PURE__ */ jsx(ArrowUp, {}) : /* @__PURE__ */ jsx(ArrowDown, {}) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Popper,
+      {
+        sx: { zIndex: 1 },
+        open,
+        anchorEl: anchorRef.current,
+        role: void 0,
+        transition: true,
+        disablePortal: true,
+        placement: "bottom-end",
+        children: ({ TransitionProps, placement }) => /* @__PURE__ */ jsx(
+          Grow,
+          {
+            ...TransitionProps,
+            style: {
+              transformOrigin: placement === "bottom" ? "center top" : "center bottom"
+            },
+            children: /* @__PURE__ */ jsx(Paper, { elevation: 8, children: /* @__PURE__ */ jsx(ClickAwayListener, { onClickAway: handleClose, children: /* @__PURE__ */ jsx(MenuList$1, { autoFocusItem: true, sx: { paddingY: 1 }, children: options.map((option, index) => /* @__PURE__ */ jsx(
+              MenuItem,
+              {
+                disabled: option.disabled,
+                selected: index === selectedIndex,
+                onClick: (event) => handleMenuItemClick(event, index),
+                children: option.label
+              },
+              option.label
+            )) }) }) })
+          }
+        )
+      }
+    )
+  ] });
+}
+const Root$5 = styled(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(0.5)
+}));
+const Indicator = styled(Typography)(({ theme }) => ({
+  ".Mui-disabled &": {
+    color: theme.palette.text.disabled
+  }
+}));
+const Icon = styled(Box)(({ theme }) => ({
+  display: "flex",
+  svg: {
+    width: ICON_SIZE_SMALL,
+    height: ICON_SIZE_SMALL,
+    fontSize: ICON_SIZE_SMALL,
+    path: {
+      fill: theme.palette.text.secondary,
+      ".Mui-disabled &": {
+        fill: theme.palette.text.disabled
+      }
+    }
+  }
+}));
+function LabelWithIndicator({
+  label,
+  type,
+  icon,
+  inheritSize
+}) {
+  return /* @__PURE__ */ jsxs(Root$5, { children: [
+    label,
+    type && /* @__PURE__ */ jsx(
+      Indicator,
+      {
+        component: "span",
+        variant: inheritSize ? "inherit" : "caption",
+        color: "textSecondary",
+        weight: "regular",
+        children: type === "required" ? "(required)" : "(optional)"
+      }
+    ),
+    icon && /* @__PURE__ */ jsx(Icon, { children: icon })
+  ] });
+}
+function _PasswordField({ InputProps, size = "small", ...otherProps }, ref) {
+  const intl = useIntl();
+  const intlConfig = useImperativeIntl(intl);
+  const [showPassword, setShowPassword] = useState(false);
+  const handleClickShowPassword = () => setShowPassword(!showPassword);
+  return /* @__PURE__ */ jsx(
+    TextField,
+    {
+      ...otherProps,
+      ref,
+      type: showPassword ? "text" : "password",
+      size,
+      InputProps: {
+        ...InputProps,
+        endAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(IconButton, { size, onClick: handleClickShowPassword, children: /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            title: intlConfig.formatMessage({
+              id: `c4r.form.${showPassword ? "hidePassword" : "showPassword"}`
+            }),
+            children: showPassword ? /* @__PURE__ */ jsx(VisibilityOffOutlined, {}) : /* @__PURE__ */ jsx(VisibilityOutlined, {})
+          }
+        ) }) })
+      }
+    }
+  );
+}
+const PasswordField = 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 = styled(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 = styled(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] = useState(() => uniqueId("select-label-"));
   const ariaLabelledBy = label ? labelId ?? defaultId : void 0;
   return /* @__PURE__ */ jsxs(
     FormControl,
@@ -299,134 +411,364 @@ function _SelectField({
   );
 }
 const SelectField = forwardRef(_SelectField);
-function useMultipleSelectField({
-  selectedOptions,
-  options,
-  onChange
-}) {
-  const [currentOptions, setCurrentOptions] = useState(selectedOptions ?? []);
-  const isInternalUpdate = useRef(false);
-  useEffect(() => {
-    if (!isInternalUpdate.current) {
-      setCurrentOptions(selectedOptions ?? []);
-    }
-    isInternalUpdate.current = false;
-  }, [selectedOptions]);
-  const enabledOptions = useMemo(
-    () => options.filter(({ disabled }) => !disabled),
-    [options]
-  );
-  const enabledOptionValues = 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 = styled(MenuItem$1)(({ theme }) => ({
-  "&.Mui-disabled": {
-    pointerEvents: "auto",
-    "&:hover": {
-      backgroundColor: `${theme.palette.background.default} !important`
+const StyledToggleButtonGroup = styled(ToggleButtonGroup$1, {
+  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 = styled(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__ */ jsx(
+    StyledToggleButtonGroup,
+    {
+      ...rest,
+      variant,
+      backgroundColor: backgroundColor ?? defaultColor,
+      children
+    }
+  );
+}
+const StyledMenu = styled(Menu$2, {
+  shouldForwardProp: (prop) => !["extended", "width", "height"].includes(prop)
+})(({ extended, width, height }) => ({
+  ...extended && {
+    ".MuiMenuItem-root": {
+      minHeight: 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,
+function _Menu({ extended, width, height, MenuListProps, ...otherProps }, ref) {
+  return /* @__PURE__ */ jsx(
+    StyledMenu,
+    {
+      ...otherProps,
+      ref,
+      "data-name": "menu",
+      width,
+      height,
+      extended,
+      MenuListProps: {
+        ...MenuListProps,
+        "data-width": width,
+        "data-height": height,
+        "data-extended": extended
+      }
+    }
+  );
+}
+const Menu$1 = forwardRef(_Menu);
+const StyledMenuList = styled(MenuList$1, {
+  shouldForwardProp: (prop) => !["extended", "width", "height"].includes(prop)
+})(({ extended, width, height }) => ({
+  ...extended && {
+    ".MuiMenuItem-root": {
+      minHeight: MENU_ITEM_SIZE_EXTENDED
+    }
+  },
+  "&.MuiList-root": {
+    ...width && {
+      width,
+      minWidth: width
+    },
+    ...height && {
+      maxHeight: height
+    }
+  }
+}));
+function _MenuList({ extended, width, height, ...otherProps }, ref) {
+  return /* @__PURE__ */ jsx(
+    StyledMenuList,
+    {
+      ...otherProps,
+      ref,
+      width,
+      height,
+      extended,
+      "data-name": "menu-list",
+      "data-width": width,
+      "data-height": height,
+      "data-extended": extended
+    }
+  );
+}
+const MenuList = forwardRef(_MenuList);
+const StyledMenuItem$1 = styled(MenuItem$1)(() => ({
+  marginTop: "0 !important",
+  marginBottom: "0 !important"
+}));
+const LinkFilter = styled(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,
-  tooltipPlacement,
-  variant,
-  ...props
+  "aria-label": ariaLabel,
+  "data-testid": dataTestId
 }, 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 = useIntl();
   const intlConfig = useImperativeIntl(intl);
-  const counterText = `${currentOptions.length} ${intlConfig.formatMessage({
-    id: "c4r.form.selected"
-  })}`;
-  const renderValue = useMemo(() => {
-    if (areAllSelected) {
-      return /* @__PURE__ */ jsx(
-        Typography,
+  return /* @__PURE__ */ jsx(
+    StyledMenuItem$1,
+    {
+      ref,
+      fixed: true,
+      "data-name": "menu-filter",
+      "aria-label": ariaLabel,
+      "data-testid": dataTestId,
+      children: /* @__PURE__ */ jsxs(
+        LinkFilter,
         {
-          component: "span",
-          variant: isSmall ? "body2" : "body1",
+          variant: "body2",
+          color: "textPrimary",
+          component: "button",
+          underline: "none",
+          disabled: !!selectAllDisabled,
+          onClick: selectAll,
+          tabIndex: 0,
+          children: [
+            /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                checked: areAllSelected,
+                indeterminate: areAnySelected && !areAllSelected,
+                disabled: selectAllDisabled
+              }
+            ),
+            intlConfig.formatMessage({ id: "c4r.form.selectAll" })
+          ]
+        }
+      )
+    }
+  );
+}
+const MenuItemFilter = forwardRef(_MenuItemFilter);
+function useMultipleSelectField({
+  selectedOptions,
+  options,
+  onChange
+}) {
+  const [currentOptions, setCurrentOptions] = useState(selectedOptions ?? []);
+  const isInternalUpdate = useRef(false);
+  useEffect(() => {
+    if (!isInternalUpdate.current) {
+      setCurrentOptions(selectedOptions ?? []);
+    }
+    isInternalUpdate.current = false;
+  }, [selectedOptions]);
+  const enabledOptions = useMemo(
+    () => options.filter(({ disabled }) => !disabled),
+    [options]
+  );
+  const enabledOptionValues = 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 = styled(MenuItem)(({ theme }) => ({
+  "&.Mui-disabled": {
+    pointerEvents: "auto",
+    "&:hover": {
+      backgroundColor: `${theme.palette.background.default} !important`
+    }
+  }
+}));
+const UnselectButton = styled(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 = useIntl();
+  const intlConfig = useImperativeIntl(intl);
+  const counterText = `${currentOptions.length} ${intlConfig.formatMessage({
+    id: "c4r.form.selected"
+  })}`;
+  const renderValue = useMemo(() => {
+    if (areAllSelected) {
+      return /* @__PURE__ */ jsx(
+        Typography,
+        {
+          component: "span",
+          variant: isSmall ? "body2" : "body1",
           color: "textPrimary",
           ml: paddingSize,
           children: intlConfig.formatMessage({ id: "c4r.form.allSelected" })
@@ -948,7 +1290,7 @@ function useAutocompleteRenderOption() {
     const { key, ...otherProps } = props;
     if (isAutocompleteListGroupHeader(option)) {
       return /* @__PURE__ */ createElement(
-        MenuItem,
+        MenuItem$1,
         {
           ...otherProps,
           subtitle: true,
@@ -990,7 +1332,7 @@ function useAutocompleteRenderOption() {
     return /* @__PURE__ */ jsx(Fragment$1, { children: divider ? /* @__PURE__ */ jsx(Divider, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
       inputValue && /* @__PURE__ */ jsx(Divider, {}),
       /* @__PURE__ */ jsxs(
-        MenuItem,
+        MenuItem$1,
         {
           ...otherProps,
           ...!isPrimitiveOptionType && {
@@ -1529,6 +1871,96 @@ function useAutocomplete({
     getOptionLabel: internalGetOptionLabel
   };
 }
+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 = useIntl();
+  const intlConfig = useImperativeIntl(intl);
+  const [open, setOpen] = 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__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        title: intlConfig.formatMessage({ id: copyText }),
+        leaveDelay: 0,
+        placement: tooltipPlacement,
+        children: /* @__PURE__ */ jsxs(
+          Box,
+          {
+            ...props,
+            sx: { cursor: disabled ? void 0 : "pointer" },
+            onClick: handleClick,
+            "data-name": "copiable",
+            ref,
+            children: [
+              children,
+              button && /* @__PURE__ */ jsx(
+                IconButton$1,
+                {
+                  ...buttonProps,
+                  disabled,
+                  icon: /* @__PURE__ */ jsx(ContentCopyOutlined, {}),
+                  "data-testid": dataTestId,
+                  "aria-label": ariaLabel || buttonLabel,
+                  sx: {
+                    display: "flex"
+                  }
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Snackbar,
+      {
+        open,
+        autoWidth: true,
+        closeable: false,
+        autoHideDuration: 4e3,
+        onClose: () => setOpen(false),
+        children: intlConfig.formatMessage({ id: copiedText })
+      }
+    )
+  ] });
+};
+const CopiableComponent = 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] = useState(msg);
+  const copy = async (text) => {
+    await copyString(text);
+    setMessage(copiedMsg);
+    setTimeout(() => setMessage(msg), 1e3);
+  };
+  return {
+    message,
+    copy
+  };
+};
 const AccordionContainer = styled("div", {
   shouldForwardProp: (prop) => prop !== "variant"
 })(({ variant, theme }) => ({
@@ -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 = 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 = styled("div")(({ theme }) => ({
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  "& svg": {
-    width: theme.spacing(ICON_SIZE_SMALL),
-    height: theme.spacing(ICON_SIZE_SMALL),
-    "& g": {
-      fill: "currentColor"
-    }
-  }
-}));
-const TagLabel = 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__ */ 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__ */ jsx(TagIcon, { children: icon }),
-        /* @__PURE__ */ jsx(TagLabel, { type, children: /* @__PURE__ */ jsx(
-          Typography,
-          {
-            component: "span",
-            color: "inherit",
-            variant: typeCode ? "code3" : "caption",
-            weight: typeCode ? "strong" : "medium",
-            noWrap,
-            ...typographyProps,
-            children: label
-          }
-        ) })
-      ]
-    }
-  );
-}
-const Tag = forwardRef(_Tag);
-const _CopiableComponent = ({
-  children,
-  disabled,
-  value,
-  onCopied,
-  copyText,
-  copiedText,
-  button,
-  buttonLabel,
-  buttonProps,
-  ariaLabel,
-  dataTestId,
-  tooltipPlacement = "top",
-  ...props
-}, ref) => {
-  const [open, setOpen] = useState(false);
-  const intl = useIntl();
-  const intlConfig = 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__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      Tooltip,
-      {
-        title: copyTooltipText,
-        leaveDelay: 0,
-        placement: tooltipPlacement,
-        children: /* @__PURE__ */ jsxs(
-          Box,
-          {
-            ...props,
-            sx: { cursor: disabled ? void 0 : "pointer" },
-            onClick: handleClick,
-            "data-name": "copiable",
-            ref,
-            children: [
-              children,
-              button && /* @__PURE__ */ jsx(
-                IconButton$1,
-                {
-                  ...buttonProps,
-                  disabled,
-                  icon: /* @__PURE__ */ jsx(ContentCopyOutlined, {}),
-                  "data-testid": dataTestId,
-                  "aria-label": ariaLabel || buttonLabel || copyTooltipText,
-                  sx: {
-                    display: "flex"
-                  }
-                }
-              )
-            ]
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Snackbar,
-      {
-        open,
-        autoWidth: true,
-        closeable: false,
-        autoHideDuration: 4e3,
-        onClose: () => setOpen(false),
-        children: copySuccessMessage
-      }
-    )
-  ] });
-};
-const CopiableComponent = forwardRef(_CopiableComponent);
-const StyledTextField = styled(TextField)(() => ({
-  "& input": {
-    textOverflow: "unset"
-    // This is needed to avoid scrolling issues in the input
-  }
-}));
-const AdornmentWrapper = styled(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 = useIntl();
-  const intlConfig = useImperativeIntl(intl);
-  const [showText, setShowText] = useState(false);
-  const inputType = !password ? "text" : showText ? "text" : "password";
-  const showTextLabel = intlConfig.formatMessage({
-    id: showText ? "c4r.button.hide" : "c4r.button.show"
-  });
-  const passwordAdornment = /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
-    IconButton$1,
-    {
-      edge: variant !== "standard" ? "end" : void 0,
-      onClick: () => setShowText(!showText),
-      size,
-      icon: showText ? /* @__PURE__ */ jsx(VisibilityOutlined, {}) : /* @__PURE__ */ jsx(VisibilityOffOutlined, {}),
-      tooltip: showTextLabel,
-      "aria-label": showTextLabel
-    }
-  ) });
-  return /* @__PURE__ */ jsx(
-    StyledTextField,
-    {
-      ...rest,
-      size,
-      value,
-      variant,
-      InputProps: {
-        readOnly: true,
-        endAdornment: /* @__PURE__ */ jsxs(Fragment, { children: [
-          password ? passwordAdornment : extraEndAdornment,
-          /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(AdornmentWrapper, { size, variant, children: /* @__PURE__ */ jsx(
-            CopiableComponent,
-            {
-              value,
-              onCopied,
-              button: true,
-              buttonProps: {
-                size
-              }
-            }
-          ) }) })
-        ] }),
-        ...variant === "filled" && {
-          disableUnderline: true
-        },
-        ...InputProps
-      },
-      type: inputType,
-      "data-name": "copiable-input-text",
-      ref
-    }
-  );
-}
-const CopiableInputText = 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] = useState(msg);
-  const copy = async (text) => {
-    await copyString(text);
-    setMessage(copiedMsg);
-    setTimeout(() => setMessage(msg), 1e3);
-  };
-  return {
-    message,
-    copy
-  };
-};
-const IndicatorIcon = styled(Box)({
-  position: "absolute",
-  top: 0,
-  left: 0,
-  right: 0,
-  bottom: 0,
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center"
-});
-const HiddenText = styled(Box)({
-  visibility: "hidden",
-  pointerEvents: "none"
-});
-function _Button({
-  children,
-  loading,
-  disabled,
-  startIcon,
-  endIcon,
-  loadingPosition,
-  external,
-  showExternalIcon = true,
-  "aria-describedby": ariaDescribedby,
-  ...otherProps
-}, ref) {
-  const intl = useIntl();
-  const intlConfig = useImperativeIntl(intl);
-  const defaultIconLoader = /* @__PURE__ */ jsx(CircularProgress, { size: 18, color: "inherit" });
-  const isDefaultLoading = loading && loadingPosition === void 0;
-  const isExternalLink = otherProps.href && external;
-  const renderContent = () => {
-    if (isDefaultLoading) {
-      return /* @__PURE__ */ jsxs(Box, { sx: { position: "relative" }, children: [
-        /* @__PURE__ */ jsx(IndicatorIcon, { children: defaultIconLoader }),
-        /* @__PURE__ */ jsx(HiddenText, { children })
-      ] });
-    }
-    if (isExternalLink) {
-      return /* @__PURE__ */ jsxs(Fragment, { children: [
-        children,
-        /* @__PURE__ */ jsx(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__ */ jsx(OpenInNewOutlined, {}) : void 0);
-    }
-  };
-  return /* @__PURE__ */ jsx(
-    Button$1,
-    {
-      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__ */ jsx(Typography, { variant: "inherit", color: "inherit", noWrap: true, component: "span", children: renderContent() })
-    }
-  );
-}
-const Button = forwardRef(_Button);
-const ButtonGroup = styled(ButtonGroup$1)(({ 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] = useState(false);
-  const anchorRef = useRef(null);
-  const [selectedIndex, setSelectedIndex] = 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__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      ButtonGroup,
-      {
-        "data-name": "split-button",
-        ref: anchorRef,
-        variant,
-        size,
-        color,
-        ...otherProps,
-        children: [
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              disabled,
-              loading,
-              loadingPosition,
-              onClick: handleClick,
-              children: (_a = options[selectedIndex]) == null ? void 0 : _a.label
-            }
-          ),
-          /* @__PURE__ */ jsx(Button, { disabled: loading || disabled, onClick: handleToggle, children: open ? /* @__PURE__ */ jsx(ArrowUp, {}) : /* @__PURE__ */ jsx(ArrowDown, {}) })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Popper,
-      {
-        sx: { zIndex: 1 },
-        open,
-        anchorEl: anchorRef.current,
-        role: void 0,
-        transition: true,
-        disablePortal: true,
-        placement: "bottom-end",
-        children: ({ TransitionProps, placement }) => /* @__PURE__ */ jsx(
-          Grow,
-          {
-            ...TransitionProps,
-            style: {
-              transformOrigin: placement === "bottom" ? "center top" : "center bottom"
-            },
-            children: /* @__PURE__ */ jsx(Paper, { elevation: 8, children: /* @__PURE__ */ jsx(ClickAwayListener, { onClickAway: handleClose, children: /* @__PURE__ */ jsx(MenuList$1, { autoFocusItem: true, sx: { paddingY: 1 }, children: options.map((option, index) => /* @__PURE__ */ jsx(
-              MenuItem$1,
-              {
-                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 = styled(Box)(({ theme }) => ({
+const TagRoot = 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 = styled("div")(({ theme }) => ({
   display: "flex",
+  justifyContent: "center",
   alignItems: "center",
-  gap: theme.spacing(0.5)
-}));
-const Indicator = styled(Typography)(({ theme }) => ({
-  ".Mui-disabled &": {
-    color: theme.palette.text.disabled
+  "& svg": {
+    width: theme.spacing(ICON_SIZE_SMALL),
+    height: theme.spacing(ICON_SIZE_SMALL),
+    "& g": {
+      fill: "currentColor"
+    }
   }
 }));
-const Icon = styled(Box)(({ theme }) => ({
+const TagLabel = styled("div", {
+  shouldForwardProp: (prop) => !["type"].includes(prop)
+})(({ type, theme }) => ({
   display: "flex",
-  svg: {
-    width: ICON_SIZE_SMALL,
-    height: ICON_SIZE_SMALL,
-    fontSize: 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__ */ jsxs(Root$5, { children: [
-    label,
-    type && /* @__PURE__ */ jsx(
-      Indicator,
-      {
-        component: "span",
-        variant: inheritSize ? "inherit" : "caption",
-        color: "textSecondary",
-        weight: "regular",
-        children: type === "required" ? "(required)" : "(optional)"
-      }
-    ),
-    icon && /* @__PURE__ */ jsx(Icon, { children: icon })
-  ] });
-}
-function _PasswordField({ InputProps, size = "small", ...otherProps }, ref) {
-  const intl = useIntl();
-  const intlConfig = useImperativeIntl(intl);
-  const [showPassword, setShowPassword] = useState(false);
-  const handleClickShowPassword = () => setShowPassword(!showPassword);
-  return /* @__PURE__ */ jsx(
-    TextField,
+  type = "default",
+  typographyProps,
+  noWrap = true,
+  disabled,
+  ...otherProps
+}, ref) {
+  const typeCode = type === "code";
+  return /* @__PURE__ */ jsxs(
+    TagRoot,
     {
-      ...otherProps,
       ref,
-      type: showPassword ? "text" : "password",
-      size,
-      InputProps: {
-        ...InputProps,
-        endAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(IconButton, { size, onClick: handleClickShowPassword, children: /* @__PURE__ */ jsx(
-          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__ */ jsx(TagIcon, { children: icon }),
+        /* @__PURE__ */ jsx(TagLabel, { type, children: /* @__PURE__ */ jsx(
+          Typography,
           {
-            title: intlConfig.formatMessage({
-              id: `c4r.form.${showPassword ? "hidePassword" : "showPassword"}`
-            }),
-            children: showPassword ? /* @__PURE__ */ jsx(VisibilityOffOutlined, {}) : /* @__PURE__ */ jsx(VisibilityOutlined, {})
+            component: "span",
+            color: "inherit",
+            variant: typeCode ? "code3" : "caption",
+            weight: typeCode ? "strong" : "medium",
+            noWrap,
+            ...typographyProps,
+            children: label
           }
-        ) }) })
-      }
-    }
-  );
-}
-const PasswordField = forwardRef(_PasswordField);
-const StyledToggleButtonGroup = styled(ToggleButtonGroup$1, {
-  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__ */ jsx(
-    StyledToggleButtonGroup,
-    {
-      ...rest,
-      variant,
-      backgroundColor: backgroundColor ?? defaultColor,
-      children
+        ) })
+      ]
     }
   );
 }
+const Tag = forwardRef(_Tag);
 const Menu = styled("div")(({ theme }) => ({
   display: "flex",
   alignItems: "center",
@@ -3541,11 +3450,11 @@ function CodeAreaHeader({
             transformOrigin: { vertical: "top", horizontal: "right" },
             anchorOrigin: { vertical: "bottom", horizontal: "right" },
             children: [
-              /* @__PURE__ */ jsxs(MenuItem, { onClick: handleCopy, disabled, id: "copy", children: [
+              /* @__PURE__ */ jsxs(MenuItem$1, { onClick: handleCopy, disabled, id: "copy", children: [
                 /* @__PURE__ */ jsx(ListItemIcon, { children: /* @__PURE__ */ jsx(ContentCopyOutlined, {}) }),
                 /* @__PURE__ */ jsx(ListItemText, { children: intlConfig.formatMessage({ id: `c4r.button.copy` }) })
               ] }),
-              /* @__PURE__ */ jsxs(MenuItem, { onClick: onClickExpand, disabled, id: "expand", children: [
+              /* @__PURE__ */ jsxs(MenuItem$1, { onClick: onClickExpand, disabled, id: "expand", children: [
                 /* @__PURE__ */ jsx(ListItemIcon, { children: /* @__PURE__ */ jsx(OpenDiagonallyRight, {}) }),
                 /* @__PURE__ */ jsx(ListItemText, { children: intlConfig.formatMessage({ id: `c4r.button.expand` }) })
               ] })
@@ -5200,7 +5109,6 @@ export {
   CodeAreaInput,
   CodeAreaMarkTextPattern,
   CopiableComponent,
-  CopiableInputText,
   CreatableAutocomplete,
   DatePicker,
   DateRangePicker,
@@ -5219,7 +5127,7 @@ export {
   LabelWithIndicator,
   L as Link,
   Menu$1 as Menu,
-  MenuItem,
+  MenuItem$1 as MenuItem,
   MenuItemFilter,
   MenuList,
   MultipleAutocomplete,