@carto/meridian-ds 2.10.2 → 2.11.1-multipleselectfield-custom.0

package/dist/components/index.js

@@ -1,15 +1,15 @@
 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 { styled, Box, Button as Button$1, CircularProgress as CircularProgress$1, Popper, Grow, Paper, ClickAwayListener, MenuList as MenuList$1, MenuItem, ButtonGroup as ButtonGroup$1, TextField, InputAdornment, Select, FormControl, InputLabel, FormHelperText, Link, Checkbox, IconButton as IconButton$1, ListItemText as ListItemText$1, Tooltip, ToggleButtonGroup as ToggleButtonGroup$1, Stack, Autocomplete as Autocomplete$1, Divider, ListItemIcon as ListItemIcon$1, createFilterOptions, alpha, useTheme, AppBar as AppBar$1, Toolbar, Dialog as Dialog$1, DialogTitle as DialogTitle$1, Chip, DialogContent as DialogContent$1, DialogActions as DialogActions$1, Slide, Accordion, AccordionSummary, AccordionDetails, Avatar as Avatar$1, Menu as Menu$2, useMediaQuery, Snackbar as Snackbar$1, Portal, Fade, ListSubheader as ListSubheader$1, Typography as Typography$1 } from "@mui/material";
+import { styled, Box, Button as Button$1, CircularProgress as CircularProgress$1, Popper, Grow, Paper, ClickAwayListener, MenuList as MenuList$1, MenuItem, ButtonGroup as ButtonGroup$1, TextField, InputAdornment, Select, FormControl, InputLabel, FormHelperText, Link, Checkbox, IconButton as IconButton$1, ListItemText as ListItemText$1, Tooltip, ToggleButtonGroup as ToggleButtonGroup$1, Stack, Autocomplete as Autocomplete$1, Divider, ListItemIcon as ListItemIcon$1, createFilterOptions, alpha, useTheme, AppBar as AppBar$1, Toolbar as Toolbar$1, Dialog as Dialog$1, DialogTitle as DialogTitle$1, Chip as Chip$1, DialogContent as DialogContent$1, DialogActions as DialogActions$1, Slide, Accordion, AccordionSummary, AccordionDetails, Avatar as Avatar$1, Menu as Menu$2, useMediaQuery, Snackbar as Snackbar$1, Portal, Fade, ListSubheader as ListSubheader$1, Typography as Typography$1, Popover } from "@mui/material";
 import { ListItemAvatar, ListItemSecondaryAction } from "@mui/material";
-import { OpenInNewOutlined, VisibilityOffOutlined, VisibilityOutlined, Cancel, ContentCopyOutlined, AddCircleOutlineOutlined, MenuOutlined, MoreVertOutlined, HelpOutline, ErrorOutline, CloseOutlined, Check, TodayOutlined } from "@mui/icons-material";
-import { u as useTranslationWithFallback, T as Typography, c as ICON_SIZE_SMALL, o as IconButton, f as MENU_ITEM_SIZE_DENSE, d as MENU_LIST_MAX_SIZE, l as MENU_ITEM_SIZE_EXTENDED, M as MENU_ITEM_SIZE_DEFAULT, A as APPBAR_SIZE, p as useImperativeIntl, b as ICON_SIZE_MEDIUM, N as NOTIFICATION_DURATION_IN_MS, e as ellipsisStyles, r as resolvePalettePath } from "../palette-utils-MuFJ3gQ2.js";
-import { a } from "../palette-utils-MuFJ3gQ2.js";
-import { S as ScreenReaderOnly, A as Alert$1, u as useListContextProps } from "../ListItem-BUH1WVMn.js";
-import { L, a as a2, b, c, d } from "../ListItem-BUH1WVMn.js";
+import { OpenInNewOutlined, VisibilityOffOutlined, VisibilityOutlined, Cancel, ContentCopyOutlined, AddCircleOutlineOutlined, MenuOutlined, MoreVertOutlined, HelpOutline, ErrorOutline, CloseOutlined, Check, TodayOutlined, StopCircleOutlined, ArrowUpwardOutlined } from "@mui/icons-material";
+import { u as useTranslationWithFallback, T as Typography, c as ICON_SIZE_SMALL, o as IconButton, f as MENU_ITEM_SIZE_DENSE, d as MENU_LIST_MAX_SIZE, l as MENU_ITEM_SIZE_EXTENDED, M as MENU_ITEM_SIZE_DEFAULT, A as APPBAR_SIZE, p as useImperativeIntl, b as ICON_SIZE_MEDIUM, N as NOTIFICATION_DURATION_IN_MS, e as ellipsisStyles, r as resolvePalettePath } from "../palette-utils-BMEVUZ5G.js";
+import { a } from "../palette-utils-BMEVUZ5G.js";
+import { S as ScreenReaderOnly, A as Alert$1, u as useListContextProps } from "../ListItem-Ce-ui7dI.js";
+import { L, a as a2, b, c, d } from "../ListItem-Ce-ui7dI.js";
 import { F as ForwardedComponent$1 } from "../ArrowDown-Bho9Ssnw.js";
 import { F as ForwardedComponent, b as ForwardedComponent$2, a as ForwardedComponent$3 } from "../OpenDiagonallyRight-DQEM4RAg.js";
-import { M as MenuItem$1, b as getThemeColor, S as SVG_SELECTOR } from "../utils-B-IEyPJ0.js";
+import { M as MenuItem$1, b as getThemeColor, S as SVG_SELECTOR } from "../utils-DYO_K3Z4.js";
 import "cartocolor";
 import * as ReactWindow from "react-window";
 import { Controlled, UnControlled } from "react-codemirror2";
@@ -622,6 +622,7 @@ function _MultipleSelectField({
   noneSelectedText,
   selectedText,
   selectAllText,
+  renderItemLabel,
   ...props
 }, ref) {
   const {
@@ -755,7 +756,7 @@ function _MultipleSelectField({
                     checked: currentOptions.includes(option.value)
                   }
                 ),
-                /* @__PURE__ */ jsx(ListItemText$1, { primary: option.label })
+                renderItemLabel ? renderItemLabel(option) : /* @__PURE__ */ jsx(ListItemText$1, { primary: option.label })
               ]
             },
             option.value
@@ -1951,7 +1952,7 @@ const BrandElements = styled("div")(({ theme }) => ({
     minWidth: "192px"
   }
 }));
-const Content$5 = styled("div")(({ theme }) => ({
+const Content$6 = styled("div")(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
@@ -1967,14 +1968,14 @@ function _AppBar({
   onClickMenu,
   ...otherProps
 }, ref) {
-  return /* @__PURE__ */ jsx(Root$6, { ...otherProps, ref, "data-name": "app-bar", children: /* @__PURE__ */ jsxs(Toolbar, { children: [
+  return /* @__PURE__ */ jsx(Root$6, { ...otherProps, ref, "data-name": "app-bar", children: /* @__PURE__ */ jsxs(Toolbar$1, { children: [
     /* @__PURE__ */ jsxs(BrandElements, { children: [
       showBurgerMenu && /* @__PURE__ */ jsx(BurgerMenu, { onClickMenu }),
       brandLogo && /* @__PURE__ */ jsx(BrandLogo, { logo: brandLogo }),
       brandText && /* @__PURE__ */ jsx(BrandText, { text: brandText }),
       secondaryText && /* @__PURE__ */ jsx(SecondaryText, { text: secondaryText })
     ] }),
-    /* @__PURE__ */ jsx(Content$5, { children })
+    /* @__PURE__ */ jsx(Content$6, { children })
   ] }) });
 }
 const AppBar = forwardRef(_AppBar);
@@ -2053,7 +2054,7 @@ function CodeAreaFooter({
     }
   );
 }
-const Header = styled(Box, { shouldForwardProp: (prop) => prop !== "size" })(({ size, theme }) => ({
+const Header$1 = styled(Box, { shouldForwardProp: (prop) => prop !== "size" })(({ size, theme }) => ({
   position: "absolute",
   top: 0,
   right: theme.spacing(0.5),
@@ -2113,7 +2114,7 @@ function CodeAreaHeader({
   }
   if (showMenu) {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs(Header, { size, "data-size": size, "data-name": "code-area-header", children: [
+      /* @__PURE__ */ jsxs(Header$1, { size, "data-size": size, "data-name": "code-area-header", children: [
         /* @__PURE__ */ jsx(
           IconButton,
           {
@@ -2166,7 +2167,7 @@ function CodeAreaHeader({
       )
     ] });
   }
-  return /* @__PURE__ */ jsxs(Header, { size, "data-size": size, "data-name": "code-area-header", children: [
+  return /* @__PURE__ */ jsxs(Header$1, { size, "data-size": size, "data-name": "code-area-header", children: [
     showCopyButton && /* @__PURE__ */ jsx(
       CopiableComponent,
       {
@@ -2787,7 +2788,7 @@ const CodeMirrorWrapper = styled(Box, {
     }
   })
 );
-const InputWrapper = styled(Box, {
+const InputWrapper$1 = styled(Box, {
   shouldForwardProp: (prop) => prop !== "hasActions"
 })(({ theme, hasActions }) => ({
   flex: "1 1 auto",
@@ -2893,7 +2894,7 @@ function CodeAreaField({
                   size: isExpanded ? "medium" : "small"
                 }
               ),
-              /* @__PURE__ */ jsx(InputWrapper, { hasActions: !!copyValue || !!onClickExpand, children: /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx(InputWrapper$1, { hasActions: !!copyValue || !!onClickExpand, children: /* @__PURE__ */ jsx(
                 CodeAreaInput,
                 {
                   ...props,
@@ -3259,7 +3260,7 @@ function DialogHeader({
               children: title
             }
           ),
-          chipLabel && /* @__PURE__ */ jsx(Chip, { color: "default", label: chipLabel, ...chipProps })
+          chipLabel && /* @__PURE__ */ jsx(Chip$1, { color: "default", label: chipLabel, ...chipProps })
         ] }),
         /* @__PURE__ */ jsxs(ItemsWrapper$1, { children: [
           secondaryActions,
@@ -3279,7 +3280,7 @@ function DialogHeader({
     children && /* @__PURE__ */ jsx(DividerBottom, {})
   ] });
 }
-const Content$4 = styled(DialogContent$1, {
+const Content$5 = styled(DialogContent$1, {
   shouldForwardProp: (prop) => ![
     "scrollableContent",
     "withGutter",
@@ -3370,7 +3371,7 @@ function _DialogContent({
     return () => resizeObserver.disconnect();
   }, [contentRef, updateBorders]);
   return /* @__PURE__ */ jsx(
-    Content$4,
+    Content$5,
     {
       ref: setContentRef,
       onScroll: handleScroll,
@@ -3677,7 +3678,7 @@ function DialogStepper({
     );
   }) }) });
 }
-const Content$3 = styled(DialogContent, {
+const Content$4 = styled(DialogContent, {
   shouldForwardProp: (prop) => !["error", "withBorder"].includes(prop)
 })(
   ({ error, withBorder, theme }) => ({
@@ -3706,7 +3707,7 @@ function CodeAreaDialogContent({
   withGutter = false
 }) {
   if (!children) return null;
-  return /* @__PURE__ */ jsx(Content$3, { withGutter, error, withBorder, children });
+  return /* @__PURE__ */ jsx(Content$4, { withGutter, error, withBorder, children });
 }
 function CodeAreaDialogConfirmation({
   onClose,
@@ -4786,7 +4787,7 @@ function _EmptyState({
 }
 const EmptyState = forwardRef(_EmptyState);
 const DEFAULT_ITEMS = [{ outlinedBullet: false, value: "" }];
-const Content$2 = styled("ul")(({ theme }) => ({
+const Content$3 = styled("ul")(({ theme }) => ({
   listStyle: "none",
   paddingLeft: 0,
   margin: theme.spacing(0.5, 0, 0, 0)
@@ -4817,7 +4818,7 @@ function TooltipData({
 }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     title && /* @__PURE__ */ jsx(Typography, { color: "inherit", variant: "caption", weight: "medium", children: title }),
-    /* @__PURE__ */ jsx(Content$2, { children: items.map((item, index) => /* @__PURE__ */ jsxs(Entry, { children: [
+    /* @__PURE__ */ jsx(Content$3, { children: items.map((item, index) => /* @__PURE__ */ jsxs(Entry, { children: [
       /* @__PURE__ */ jsx(
         Bullet,
         {
@@ -4867,6 +4868,7 @@ function _AccordionGroup({
           disabled: item.disabled,
           defaultExpanded: item.defaultExpanded,
           onChange: item.onChange,
+          sx: item.sx,
           children: [
             /* @__PURE__ */ jsx(
               AccordionSummary,
@@ -5203,6 +5205,296 @@ function _FilterDropdown({
 const FilterDropdown = forwardRef(
   _FilterDropdown
 );
+const Header = styled(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  flexWrap: "wrap",
+  gap: theme.spacing(0.5),
+  padding: theme.spacing(0.5)
+}));
+const Content$2 = styled(Box, {
+  shouldForwardProp: (prop) => !["hasToolbar"].includes(prop)
+})(({ hasToolbar }) => ({
+  display: "flex",
+  alignItems: "flex-end",
+  ...hasToolbar && {
+    display: "block"
+  }
+}));
+const TextFieldBase = styled(TextField)(({ theme }) => ({
+  "& .MuiInputBase-root": {
+    minHeight: "auto !important",
+    "&:before": {
+      border: `none !important`,
+      "&:hover": {
+        border: `none !important`
+      }
+    },
+    "& textarea": {
+      maxHeight: theme.spacing(32),
+      // 256px, defined in the design specs
+      overflowY: "auto !important",
+      boxSizing: "border-box"
+    },
+    // Sizes
+    "&.MuiInputBase-multiline.MuiInputBase-sizeSmall textarea": {
+      padding: theme.spacing(0.75, 1.25)
+    }
+  },
+  // Variant's overrides
+  "& .MuiFilledInput-root": {
+    backgroundColor: "transparent !important"
+  },
+  "& .MuiOutlinedInput-root": {
+    backgroundColor: "transparent !important",
+    "& .MuiOutlinedInput-notchedOutline": {
+      border: "none !important"
+    }
+  }
+}));
+const InputWrapper = styled(Box, {
+  shouldForwardProp: (prop) => !["variant", "disabled", "error"].includes(prop)
+})(({ theme, variant, disabled, error }) => ({
+  borderRadius: theme.spacing(0.5),
+  transition: theme.transitions.create(["background-color", "box-shadow"], {
+    easing: theme.transitions.easing.easeInOut,
+    duration: theme.transitions.duration.shortest
+  }),
+  // States
+  ...error && {
+    boxShadow: `0 0 0 2px inset ${theme.palette.error.light}`
+  },
+  // Variants
+  ...variant === "filled" && {
+    backgroundColor: theme.palette.default.background,
+    "&:hover": {
+      backgroundColor: !disabled && theme.palette.action.hover
+    },
+    "&:focus-within": {
+      backgroundColor: theme.palette.default.background
+    }
+  },
+  ...variant === "outlined" && {
+    boxShadow: `0 0 0 1px inset ${theme.palette.default.outlinedBorder}`
+    // TBD when we need to support outlined variant
+  }
+}));
+const FooterWrapper = styled(Box, {
+  shouldForwardProp: (prop) => !["size"].includes(prop)
+})(({ theme, size }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: theme.spacing(0.5),
+  padding: theme.spacing(size === "small" ? 0.5 : 1)
+}));
+const Toolbar = styled(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(0.5),
+  // Reset margin
+  "& .MuiButtonBase-root, & .optionIconButton": {
+    marginLeft: 0
+  }
+}));
+const MessageFieldFooter = ({
+  size,
+  toolbar,
+  analyzing,
+  onStop,
+  stopLabel,
+  iconButton,
+  labelButton,
+  onClick,
+  buttonIsDisabled,
+  disabled,
+  typeToSendLabel,
+  sendLabel
+}) => {
+  const stopAriaLabel = typeof stopLabel === "string" ? stopLabel : void 0;
+  const sendButtonLabel = buttonIsDisabled ? typeToSendLabel : sendLabel;
+  const sendAriaLabel = typeof sendButtonLabel === "string" ? sendButtonLabel : void 0;
+  return /* @__PURE__ */ jsxs(FooterWrapper, { size, children: [
+    toolbar && /* @__PURE__ */ jsx(Toolbar, { children: toolbar }),
+    /* @__PURE__ */ jsx(Fragment, { children: analyzing ? /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        onClick: onStop,
+        color: "default",
+        size,
+        icon: /* @__PURE__ */ jsx(StopCircleOutlined, {}),
+        tooltip: stopLabel,
+        "aria-label": stopAriaLabel,
+        tooltipPlacement: "top"
+      }
+    ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      iconButton && !labelButton && /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          onClick,
+          disabled: buttonIsDisabled,
+          color: "primary",
+          variant: "contained",
+          size,
+          icon: iconButton,
+          tooltip: !disabled ? sendButtonLabel : void 0,
+          "aria-label": sendAriaLabel,
+          tooltipPlacement: "top"
+        }
+      ),
+      labelButton && /* @__PURE__ */ jsx(
+        Tooltip,
+        {
+          title: buttonIsDisabled && !disabled ? typeToSendLabel : void 0,
+          children: /* @__PURE__ */ jsx(Box, { display: "flex", children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              onClick,
+              variant: "contained",
+              color: "primary",
+              disabled: buttonIsDisabled,
+              size,
+              children: labelButton
+            }
+          ) })
+        }
+      )
+    ] }) })
+  ] });
+};
+function _MessageField({
+  value,
+  defaultValue,
+  label,
+  onChange,
+  onClick,
+  onStop,
+  disabled,
+  variant = "filled",
+  size = "small",
+  analyzing,
+  iconButton = /* @__PURE__ */ jsx(ArrowUpwardOutlined, {}),
+  labelButton,
+  disabledButton,
+  helperText,
+  error,
+  fullWidth = true,
+  validationType,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  focused: _focused,
+  onKeyDown,
+  textFieldProps,
+  toolbar,
+  header,
+  stopText,
+  typeToSendText,
+  sendText,
+  "data-testid": dataTestId,
+  "aria-label": ariaLabel,
+  ...otherProps
+}, ref) {
+  const stopLabel = useTranslationWithFallback("c4r.button.stop", stopText);
+  const typeToSendLabel = useTranslationWithFallback(
+    "c4r.button.typeToSend",
+    typeToSendText
+  );
+  const sendLabel = useTranslationWithFallback("c4r.button.send", sendText);
+  const inputIsDisabled = disabled || analyzing;
+  const currentValue = value ?? defaultValue ?? "";
+  const buttonIsDisabled = currentValue === "" || disabledButton || disabled;
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      if (e.ctrlKey || e.shiftKey) {
+        e.preventDefault();
+        const textarea = e.target;
+        const cursorPosition = e.target.selectionStart;
+        const textValue = textarea.value;
+        const newValue = textValue.slice(0, cursorPosition) + "\n" + textValue.slice(cursorPosition);
+        const onChangeHandler = (textFieldProps == null ? void 0 : textFieldProps.onChange) || onChange;
+        if (onChangeHandler) {
+          const newEvent = {
+            ...e,
+            target: {
+              ...e.target,
+              value: newValue
+            }
+          };
+          onChangeHandler(newEvent);
+        } else {
+          textarea.value = newValue;
+        }
+        requestAnimationFrame(() => {
+          textarea.setSelectionRange(cursorPosition + 1, cursorPosition + 1);
+        });
+      } else {
+        e.preventDefault();
+        onClick(e);
+      }
+    }
+    const onKeyDownHandler = (textFieldProps == null ? void 0 : textFieldProps.onKeyDown) || onKeyDown;
+    onKeyDownHandler == null ? void 0 : onKeyDownHandler(e);
+  };
+  return /* @__PURE__ */ jsxs(
+    FormControl,
+    {
+      ref,
+      fullWidth,
+      size,
+      error,
+      disabled: inputIsDisabled,
+      role: "group",
+      "data-name": "message-field",
+      "data-testid": dataTestId,
+      "aria-label": ariaLabel,
+      children: [
+        label && /* @__PURE__ */ jsx(InputLabel, { shrink: true, children: /* @__PURE__ */ jsx(LabelWithIndicator, { label, type: validationType }) }),
+        /* @__PURE__ */ jsxs(InputWrapper, { variant, disabled: inputIsDisabled, error, children: [
+          header && /* @__PURE__ */ jsx(Header, { children: header }),
+          /* @__PURE__ */ jsxs(Content$2, { hasToolbar: !!toolbar, children: [
+            /* @__PURE__ */ jsx(
+              TextFieldBase,
+              {
+                multiline: true,
+                ...value !== void 0 ? { value } : { defaultValue },
+                onChange,
+                focused: false,
+                disabled: inputIsDisabled,
+                variant,
+                size,
+                fullWidth,
+                required: validationType === "required",
+                inputProps: { "aria-invalid": !!error },
+                ...otherProps,
+                ...textFieldProps,
+                onKeyDown: handleKeyDown
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              MessageFieldFooter,
+              {
+                size,
+                toolbar,
+                analyzing,
+                onStop,
+                stopLabel,
+                iconButton,
+                labelButton,
+                onClick,
+                buttonIsDisabled,
+                disabled,
+                typeToSendLabel,
+                sendLabel
+              }
+            )
+          ] })
+        ] }),
+        helperText && /* @__PURE__ */ jsx(FormHelperText, { children: helperText })
+      ]
+    }
+  );
+}
+const MessageField = forwardRef(_MessageField);
+MessageField.displayName = "MessageField";
 const SearchIcon = styled(ForwardedComponent$4, {
   shouldForwardProp: (prop) => prop !== "minimized" && prop !== "disabled"
 })(
@@ -6431,6 +6723,197 @@ function _ListItemIcon({ iconProps, sx, ...otherProps }, ref) {
 }
 const ListItemIcon = forwardRef(_ListItemIcon);
 ListItemIcon.displayName = "ListItemIcon";
+const Chip = styled(Chip$1)(() => ({
+  maxWidth: "100%"
+}));
+function _ChipGroupItem({
+  chipData,
+  index,
+  displayLabel,
+  showTooltip = false,
+  disabled,
+  onClick,
+  onDelete,
+  ...restProps
+}, ref) {
+  const uniqueId2 = `chip-${index}`;
+  const isDisabled = chipData.disabled ?? disabled;
+  const chipElement = /* @__PURE__ */ jsx(
+    Chip,
+    {
+      ...restProps,
+      ref,
+      label: /* @__PURE__ */ jsx(
+        Typography,
+        {
+          component: "p",
+          variant: "inherit",
+          color: "inherit",
+          noWrap: true,
+          id: uniqueId2,
+          children: displayLabel
+        }
+      ),
+      variant: chipData.variant ?? "outlined",
+      color: chipData.color ?? "default",
+      size: chipData.size ?? "small",
+      disabled: isDisabled,
+      avatar: chipData.avatar,
+      icon: chipData.icon,
+      deleteIcon: chipData.deleteIcon,
+      onClick,
+      onDelete,
+      "aria-disabled": isDisabled,
+      "aria-labelledby": uniqueId2,
+      "data-truncated": showTooltip
+    }
+  );
+  if (!showTooltip && !chipData.tooltip) {
+    return chipElement;
+  }
+  return /* @__PURE__ */ jsx(Tooltip, { title: chipData.tooltip || chipData.label, children: chipElement });
+}
+const ChipGroupItem = forwardRef(_ChipGroupItem);
+ChipGroupItem.displayName = "ChipGroupItem";
+const PopoverMenu = styled(Popover)(({ theme }) => ({
+  ".MuiPaper-root": {
+    pointerEvents: "all",
+    padding: theme.spacing(1),
+    marginTop: 0,
+    marginLeft: theme.spacing(0.5)
+  }
+}));
+function _ChipGroup({
+  chips,
+  disabled,
+  maxVisibleChips = 3,
+  maxLengthChip = 30,
+  onClickAllChips,
+  onDeleteAllChips,
+  ...rootProps
+}, ref) {
+  const [openedRef, setOpen] = useState(null);
+  const localRef = useRef(null);
+  const hasChips = Boolean(chips == null ? void 0 : chips.length);
+  const normalizedChips = (chips == null ? void 0 : chips.map((chip) => {
+    if (typeof chip === "string") {
+      return { label: chip };
+    }
+    return chip;
+  })) || [];
+  const chipsToShow = normalizedChips.slice(0, maxVisibleChips);
+  const additionalChips = Math.max(0, normalizedChips.length - maxVisibleChips);
+  const hiddenChips = normalizedChips.slice(maxVisibleChips);
+  const firstChip = normalizedChips[0];
+  const indicatorVariant = (firstChip == null ? void 0 : firstChip.variant) ?? "outlined";
+  const indicatorColor = (firstChip == null ? void 0 : firstChip.color) ?? "default";
+  const indicatorSize = (firstChip == null ? void 0 : firstChip.size) ?? "small";
+  const handleMouseOver = () => setOpen(localRef.current);
+  const handleMouseLeave = () => setOpen(null);
+  const truncateChipLabel = (label) => {
+    if (maxLengthChip !== void 0 && label.length > maxLengthChip) {
+      return label.slice(0, maxLengthChip) + "...";
+    }
+    return label;
+  };
+  const getClickHandler = (chipData) => {
+    return onClickAllChips ? (event) => onClickAllChips(chipData, event) : chipData.onClick;
+  };
+  const getDeleteHandler = (chipData) => {
+    return onDeleteAllChips ? (event) => onDeleteAllChips(chipData, event) : chipData.onDelete;
+  };
+  const getChipDisplayProps = (chipData) => {
+    const displayLabel = truncateChipLabel(chipData.label);
+    const showTooltip = displayLabel !== chipData.label || Boolean(chipData.tooltip);
+    return { displayLabel, showTooltip };
+  };
+  if (!hasChips) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      Stack,
+      {
+        direction: "row",
+        spacing: 0.5,
+        ...rootProps,
+        ref,
+        "data-name": "chip-group",
+        children: [
+          chipsToShow.map((chipData, index) => {
+            const { displayLabel, showTooltip } = getChipDisplayProps(chipData);
+            return /* @__PURE__ */ jsx(
+              ChipGroupItem,
+              {
+                chipData,
+                index,
+                displayLabel,
+                showTooltip,
+                disabled,
+                onClick: getClickHandler(chipData),
+                onDelete: getDeleteHandler(chipData)
+              },
+              chipData.id ?? `${chipData.label}-${index}`
+            );
+          }),
+          Boolean(additionalChips) && /* @__PURE__ */ jsx(
+            ChipGroupItem,
+            {
+              ref: localRef,
+              chipData: {
+                label: `+${additionalChips}`,
+                variant: indicatorVariant,
+                color: indicatorColor,
+                size: indicatorSize
+              },
+              index: -1,
+              displayLabel: `+${additionalChips}`,
+              onMouseOver: handleMouseOver,
+              onMouseLeave: handleMouseLeave,
+              "aria-label": "Additional items",
+              disabled
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      PopoverMenu,
+      {
+        sx: { pointerEvents: "none", outline: "none" },
+        anchorOrigin: { vertical: "top", horizontal: "right" },
+        transformOrigin: { vertical: "top", horizontal: "left" },
+        anchorEl: openedRef,
+        open: Boolean(openedRef),
+        disableAutoFocus: true,
+        disableEnforceFocus: true,
+        slotProps: {
+          paper: {
+            onMouseEnter: handleMouseOver,
+            onMouseLeave: handleMouseLeave
+          }
+        },
+        children: /* @__PURE__ */ jsx(Stack, { direction: "column", spacing: 1, children: hiddenChips.map((chipData, index) => {
+          const chipIndex = index + maxVisibleChips;
+          const { displayLabel, showTooltip } = getChipDisplayProps(chipData);
+          return /* @__PURE__ */ jsx(
+            ChipGroupItem,
+            {
+              chipData,
+              index: chipIndex,
+              displayLabel,
+              showTooltip,
+              disabled,
+              onClick: getClickHandler(chipData),
+              onDelete: getDeleteHandler(chipData)
+            },
+            chipData.id ?? `${chipData.label}-hidden-${index}`
+          );
+        }) })
+      }
+    )
+  ] });
+}
+const ChipGroup = forwardRef(_ChipGroup);
+ChipGroup.displayName = "ChipGroup";
 export {
   AUTOCOMPLETE_GROUP_HEADER_PROPERTY,
   AccordionGroup,
@@ -6440,6 +6923,7 @@ export {
   AutocompleteList,
   Avatar,
   Button,
+  ChipGroup,
   CircularProgress,
   CodeAreaDialog,
   CodeAreaDialogConfirmation,
@@ -6488,6 +6972,7 @@ export {
   MenuItem$1 as MenuItem,
   MenuItemFilter,
   MenuList,
+  MessageField,
   MultipleAutocomplete,
   MultipleSelectField,
   PasswordField,