@carto/meridian-ds 2.1.1-alpha-filter-dropdown.1 → 2.2.0

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, 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 { 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 { 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$1 } from "../MenuItem-Cx8rUKOU.js";
+import { M as MenuItem } from "../MenuItem-CKrhDizf.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,307 +41,195 @@ 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 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 })
-      ] });
+const StyledMenu = styled(Menu$2, {
+  shouldForwardProp: (prop) => !["extended", "width", "height"].includes(prop)
+})(({ extended, width, height }) => ({
+  ...extended && {
+    ".MuiMenuItem-root": {
+      minHeight: MENU_ITEM_SIZE_EXTENDED
     }
-    if (isExternalLink) {
-      return /* @__PURE__ */ jsxs(Fragment, { children: [
-        children,
-        /* @__PURE__ */ jsx(ScreenReaderOnly, { id: "external-hint", children: `(${intlConfig.formatMessage({
-          id: "c4r.button.opensInNewTab"
-        })})` })
-      ] });
+  },
+  ...width && {
+    ".MuiList-root": {
+      width,
+      minWidth: width
     }
-    return children;
-  };
-  const getIconForPosition = (position) => {
-    if (isDefaultLoading) {
-      return void 0;
+  },
+  ...height && {
+    ".MuiMenu-paper": {
+      overflow: "hidden"
+    },
+    ".MuiList-root": {
+      maxHeight: height
     }
-    if (loading && loadingPosition !== void 0) {
-      if (loadingPosition === position) {
-        return defaultIconLoader;
+  }
+}));
+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
       }
-      return void 0;
     }
-    if (position === "start") {
-      return startIcon;
-    } else {
-      return endIcon || (isExternalLink && showExternalIcon ? /* @__PURE__ */ jsx(OpenInNewOutlined, {}) : 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
+    }
+  }
+}));
+function _MenuList({ extended, width, height, ...otherProps }, ref) {
   return /* @__PURE__ */ jsx(
-    Button$1,
+    StyledMenuList,
     {
-      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() })
+      width,
+      height,
+      extended,
+      "data-name": "menu-list",
+      "data-width": width,
+      "data-height": height,
+      "data-extended": extended
     }
   );
 }
-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 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" })
+          ]
+        }
+      )
+    }
+  );
+}
+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)
   }
 }));
-function SplitButton({
-  options,
+const PlaceholderItem = styled(MenuItem$1)(() => ({
+  display: "none"
+}));
+function _SelectField({
+  children,
+  placeholder,
+  size = "small",
+  displayEmpty,
+  menuProps,
+  inputProps,
+  labelId,
+  label,
+  labelSecondary,
+  helperText,
+  name,
+  error,
+  focused,
   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,
-              {
-                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,
+  fullWidth,
+  required,
+  "aria-label": ariaLabel,
   ...otherProps
 }, ref) {
   const isSmall = size === "small";
@@ -411,236 +299,6 @@ function _SelectField({
   );
 }
 const SelectField = forwardRef(_SelectField);
-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 StyledMenu = styled(Menu$2, {
-  shouldForwardProp: (prop) => !["extended", "width", "height"].includes(prop)
-})(({ extended, width, height }) => ({
-  ...extended && {
-    ".MuiMenuItem-root": {
-      minHeight: MENU_ITEM_SIZE_EXTENDED
-    }
-  },
-  ...width && {
-    ".MuiList-root": {
-      width,
-      minWidth: width
-    }
-  },
-  ...height && {
-    ".MuiMenu-paper": {
-      overflow: "hidden"
-    },
-    ".MuiList-root": {
-      maxHeight: height
-    }
-  }
-}));
-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,
-  "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" })
-          ]
-        }
-      )
-    }
-  );
-}
-const MenuItemFilter = forwardRef(_MenuItemFilter);
 function useMultipleSelectField({
   selectedOptions,
   options,
@@ -702,7 +360,7 @@ function useMultipleSelectField({
     unselectAll
   };
 }
-const StyledMenuItem = styled(MenuItem)(({ theme }) => ({
+const StyledMenuItem = styled(MenuItem$1)(({ theme }) => ({
   "&.Mui-disabled": {
     pointerEvents: "auto",
     "&:hover": {
@@ -1290,7 +948,7 @@ function useAutocompleteRenderOption() {
     const { key, ...otherProps } = props;
     if (isAutocompleteListGroupHeader(option)) {
       return /* @__PURE__ */ createElement(
-        MenuItem$1,
+        MenuItem,
         {
           ...otherProps,
           subtitle: true,
@@ -1332,7 +990,7 @@ function useAutocompleteRenderOption() {
     return /* @__PURE__ */ jsx(Fragment$1, { children: divider ? /* @__PURE__ */ jsx(Divider, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
       inputValue && /* @__PURE__ */ jsx(Divider, {}),
       /* @__PURE__ */ jsxs(
-        MenuItem$1,
+        MenuItem,
         {
           ...otherProps,
           ...!isPrimitiveOptionType && {
@@ -1871,96 +1529,6 @@ 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 }) => ({
@@ -2314,71 +1882,610 @@ const TagRoot = styled("div", {
       }
     }
   };
-});
-const TagIcon = styled("div")(({ theme }) => ({
+});
+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, {
+  shouldForwardProp: (prop) => !["isInputFocused"].includes(prop)
+})(({ isInputFocused }) => ({
+  "& input": {
+    pointerEvents: isInputFocused ? "auto" : "none"
+    // Disable pointer events when not focused https://issues.chromium.org/issues/41245282
+  }
+}));
+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",
+  onFocus,
+  onBlur,
+  ...rest
+}, ref) {
+  const intl = useIntl();
+  const intlConfig = useImperativeIntl(intl);
+  const [showText, setShowText] = useState(false);
+  const [isInputFocused, setIsInputFocused] = useState(false);
+  const inputType = !password ? "text" : showText ? "text" : "password";
+  const showTextLabel = intlConfig.formatMessage({
+    id: showText ? "c4r.button.hide" : "c4r.button.show"
+  });
+  const handleFocus = (event) => {
+    setIsInputFocused(true);
+    onFocus == null ? void 0 : onFocus(event);
+  };
+  const handleBlur = (event) => {
+    setIsInputFocused(false);
+    onBlur == null ? void 0 : onBlur(event);
+  };
+  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,
+      isInputFocused,
+      size,
+      value,
+      variant,
+      InputProps: {
+        readOnly: true,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        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
+            )) }) }) })
+          }
+        )
+      }
+    )
+  ] });
+}
+const Root$5 = styled(Box)(({ theme }) => ({
   display: "flex",
-  justifyContent: "center",
   alignItems: "center",
-  "& svg": {
-    width: theme.spacing(ICON_SIZE_SMALL),
-    height: theme.spacing(ICON_SIZE_SMALL),
-    "& g": {
-      fill: "currentColor"
-    }
+  gap: theme.spacing(0.5)
+}));
+const Indicator = styled(Typography)(({ theme }) => ({
+  ".Mui-disabled &": {
+    color: theme.palette.text.disabled
   }
 }));
-const TagLabel = styled("div", {
-  shouldForwardProp: (prop) => !["type"].includes(prop)
-})(({ type, theme }) => ({
+const Icon = styled(Box)(({ theme }) => ({
   display: "flex",
-  alignItems: "center",
-  paddingTop: type === "code" ? theme.spacing(0.25) : void 0
+  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 _Tag({
+function LabelWithIndicator({
   label,
-  color = "primary",
-  variant = "filled",
+  type,
   icon,
-  type = "default",
-  typographyProps,
-  noWrap = true,
-  disabled,
-  ...otherProps
-}, ref) {
-  const typeCode = type === "code";
-  return /* @__PURE__ */ jsxs(
-    TagRoot,
+  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,
     {
-      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,
+      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,
           {
-            component: "span",
-            color: "inherit",
-            variant: typeCode ? "code3" : "caption",
-            weight: typeCode ? "strong" : "medium",
-            noWrap,
-            ...typographyProps,
-            children: label
+            title: intlConfig.formatMessage({
+              id: `c4r.form.${showPassword ? "hidePassword" : "showPassword"}`
+            }),
+            children: showPassword ? /* @__PURE__ */ jsx(VisibilityOffOutlined, {}) : /* @__PURE__ */ jsx(VisibilityOutlined, {})
           }
-        ) })
-      ]
+        ) }) })
+      }
+    }
+  );
+}
+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",
@@ -3450,11 +3557,11 @@ function CodeAreaHeader({
             transformOrigin: { vertical: "top", horizontal: "right" },
             anchorOrigin: { vertical: "bottom", horizontal: "right" },
             children: [
-              /* @__PURE__ */ jsxs(MenuItem$1, { onClick: handleCopy, disabled, id: "copy", children: [
+              /* @__PURE__ */ jsxs(MenuItem, { 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$1, { onClick: onClickExpand, disabled, id: "expand", children: [
+              /* @__PURE__ */ jsxs(MenuItem, { onClick: onClickExpand, disabled, id: "expand", children: [
                 /* @__PURE__ */ jsx(ListItemIcon, { children: /* @__PURE__ */ jsx(OpenDiagonallyRight, {}) }),
                 /* @__PURE__ */ jsx(ListItemText, { children: intlConfig.formatMessage({ id: `c4r.button.expand` }) })
               ] })
@@ -5109,6 +5216,7 @@ export {
   CodeAreaInput,
   CodeAreaMarkTextPattern,
   CopiableComponent,
+  CopiableInputText,
   CreatableAutocomplete,
   DatePicker,
   DateRangePicker,
@@ -5127,7 +5235,7 @@ export {
   LabelWithIndicator,
   L as Link,
   Menu$1 as Menu,
-  MenuItem$1 as MenuItem,
+  MenuItem,
   MenuItemFilter,
   MenuList,
   MultipleAutocomplete,