@carto/meridian-ds 2.6.1 → 2.7.0-alpha-loader.1

package/dist/components/index.cjs

@@ -4,12 +4,11 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const material = require("@mui/material");
 const iconsMaterial = require("@mui/icons-material");
-const Alert$1 = require("../Alert-DOeOwxOe.cjs");
-const cssUtils = require("../css-utils-CCi3p7os.cjs");
+const cssUtils = require("../css-utils-CH7es90t.cjs");
+const Alert$1 = require("../Alert-C4W0H_uN.cjs");
 const ArrowDown = require("../ArrowDown-DJ0vhbsw.cjs");
 const OpenDiagonallyRight = require("../OpenDiagonallyRight-CpL4ROwg.cjs");
-const reactIntl = require("react-intl");
-const MenuItem = require("../MenuItem-CYJN2OVU.cjs");
+const MenuItem = require("../MenuItem-CgF4QdGi.cjs");
 require("cartocolor");
 const reactWindow = require("react-window");
 const reactCodemirror2 = require("react-codemirror2");
@@ -38,9 +37,11 @@ require("codemirror/addon/fold/markdown-fold.js");
 require("codemirror/addon/fold/comment-fold.js");
 const ClickAwayListener = require("@mui/material/ClickAwayListener");
 const DatePicker$1 = require("@mui/x-date-pickers/DatePicker");
+const reactIntl = require("react-intl");
 const xDatePickers = require("@mui/x-date-pickers");
 const TimePicker$1 = require("@mui/x-date-pickers/TimePicker");
 const DateTimePicker$1 = require("@mui/x-date-pickers/DateTimePicker");
+const Search = require("../Search-CMWbM9nD.cjs");
 const DOMPurify = require("dompurify");
 const IndicatorIcon = material.styled(material.Box)({
   position: "absolute",
@@ -69,7 +70,7 @@ function _Button({
   "aria-describedby": ariaDescribedby,
   ...otherProps
 }, ref) {
-  const screenReaderTextValue = Alert$1.useTranslationFallback(
+  const screenReaderTextValue = cssUtils.useTranslationWithFallback(
     "c4r.button.opensInNewTab",
     screenReaderText
   );
@@ -282,14 +283,25 @@ function _LabelWithIndicator({
   );
 }
 const LabelWithIndicator = React.forwardRef(_LabelWithIndicator);
-function _PasswordField({ InputProps, size = "small", disabled, ...otherProps }, ref) {
-  const intl = reactIntl.useIntl();
-  const intlConfig = cssUtils.useImperativeIntl(intl);
+function _PasswordField({
+  InputProps,
+  size = "small",
+  disabled,
+  showPasswordText,
+  hidePasswordText,
+  ...otherProps
+}, ref) {
+  const showPasswordLabel = cssUtils.useTranslationWithFallback(
+    "c4r.form.showPassword",
+    showPasswordText
+  );
+  const hidePasswordLabel = cssUtils.useTranslationWithFallback(
+    "c4r.form.hidePassword",
+    hidePasswordText
+  );
   const [showPassword, setShowPassword] = React.useState(false);
   const handleClickShowPassword = () => setShowPassword(!showPassword);
-  const showPasswordLabel = intlConfig.formatMessage({
-    id: `c4r.form.${showPassword ? "hidePassword" : "showPassword"}`
-  });
+  const label = showPassword ? hidePasswordLabel : showPasswordLabel;
   return /* @__PURE__ */ jsxRuntime.jsx(
     material.TextField,
     {
@@ -311,8 +323,8 @@ function _PasswordField({ InputProps, size = "small", disabled, ...otherProps },
             disabled,
             onClick: handleClickShowPassword,
             icon: showPassword ? /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.VisibilityOffOutlined, {}) : /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.VisibilityOutlined, {}),
-            tooltip: showPasswordLabel,
-            "aria-label": showPasswordLabel
+            tooltip: label,
+            "aria-label": label
           }
         ) })
       },
@@ -522,11 +534,14 @@ function _MenuItemFilter({
   areAnySelected,
   selectAll,
   selectAllDisabled,
+  selectAllText,
   "aria-label": ariaLabel,
   "data-testid": dataTestId
 }, ref) {
-  const intl = reactIntl.useIntl();
-  const intlConfig = cssUtils.useImperativeIntl(intl);
+  const selectAllLabel = cssUtils.useTranslationWithFallback(
+    "c4r.form.selectAll",
+    selectAllText
+  );
   return /* @__PURE__ */ jsxRuntime.jsx(
     StyledMenuItem$1,
     {
@@ -554,7 +569,7 @@ function _MenuItemFilter({
                 disabled: selectAllDisabled
               }
             ),
-            intlConfig.formatMessage({ id: "c4r.form.selectAll" })
+            selectAllLabel
           ]
         }
       )
@@ -601,6 +616,10 @@ function _MultipleSelectField({
   selectAllDisabled,
   tooltipPlacement,
   variant,
+  allSelectedText,
+  noneSelectedText,
+  selectedText,
+  selectAllText,
   ...props
 }, ref) {
   const {
@@ -617,11 +636,19 @@ function _MultipleSelectField({
   });
   const isSmall = size === "small";
   const paddingSize = isSmall || variant === "standard" ? 0 : 2;
-  const intl = reactIntl.useIntl();
-  const intlConfig = cssUtils.useImperativeIntl(intl);
-  const counterText = `${currentOptions.length} ${intlConfig.formatMessage({
-    id: "c4r.form.selected"
-  })}`;
+  const allSelectedLabel = cssUtils.useTranslationWithFallback(
+    "c4r.form.allSelected",
+    allSelectedText
+  );
+  const noneSelectedLabel = cssUtils.useTranslationWithFallback(
+    "c4r.form.noneSelected",
+    noneSelectedText
+  );
+  const selectedLabel = cssUtils.useTranslationWithFallback(
+    "c4r.form.selected",
+    selectedText
+  );
+  const counterText = `${currentOptions.length} ${selectedLabel}`;
   const renderValue = React.useMemo(() => {
     if (areAllSelected) {
       return /* @__PURE__ */ jsxRuntime.jsx(
@@ -631,7 +658,7 @@ function _MultipleSelectField({
           variant: isSmall ? "body2" : "body1",
           color: "textPrimary",
           ml: paddingSize,
-          children: intlConfig.formatMessage({ id: "c4r.form.allSelected" })
+          children: allSelectedLabel
         }
       );
     }
@@ -654,16 +681,17 @@ function _MultipleSelectField({
         variant: isSmall ? "body2" : "body1",
         color: "text.hint",
         ml: paddingSize,
-        children: placeholder ?? intlConfig.formatMessage({ id: "c4r.form.noneSelected" })
+        children: placeholder ?? noneSelectedLabel
       }
     );
   }, [
     areAllSelected,
     areAnySelected,
+    allSelectedLabel,
     counterText,
     currentOptions,
-    intlConfig,
     isSmall,
+    noneSelectedLabel,
     paddingSize,
     placeholder,
     showCounter
@@ -704,7 +732,8 @@ function _MultipleSelectField({
                 areAllSelected,
                 areAnySelected,
                 selectAll,
-                selectAllDisabled
+                selectAllDisabled,
+                selectAllText
               }
             )
           }
@@ -847,6 +876,64 @@ function _ToggleButtonGroup({
   );
 }
 const ToggleButtonGroup = React.forwardRef(_ToggleButtonGroup);
+const StyledGrid = material.styled(material.Grid, {
+  shouldForwardProp: (prop) => prop !== "fullHeight" && prop !== "height"
+})(({ fullHeight, theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: theme.spacing(1.5),
+  ...fullHeight && {
+    flex: 1,
+    height: "100%",
+    width: "100%"
+  }
+}));
+function _Loader({
+  label,
+  secondLabel,
+  color = "primary",
+  fullHeight,
+  ...otherProps
+}, ref) {
+  const labelText = cssUtils.useTranslationWithFallback("c4r.utils.loader.label", label);
+  const hasAnyLabel = labelText || secondLabel;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    StyledGrid,
+    {
+      container: true,
+      fullHeight,
+      ...otherProps,
+      ref,
+      "aria-busy": true,
+      "data-name": "loader",
+      "data-full-height": fullHeight,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          material.CircularProgress,
+          {
+            color,
+            "aria-labelledby": hasAnyLabel ? "loader-label" : void 0
+          }
+        ),
+        hasAnyLabel && /* @__PURE__ */ jsxRuntime.jsxs(material.Stack, { direction: "column", alignItems: "center", children: [
+          labelText && /* @__PURE__ */ jsxRuntime.jsx(cssUtils.Typography, { variant: "body2", color: "textSecondary", id: "loader-label", children: labelText }),
+          secondLabel && /* @__PURE__ */ jsxRuntime.jsx(
+            cssUtils.Typography,
+            {
+              variant: "body2",
+              color: "textSecondary",
+              id: labelText ? void 0 : "loader-label",
+              children: secondLabel
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+const Loader = React.forwardRef(_Loader);
 async function copyString(value) {
   return await navigator.clipboard.writeText(value);
 }
@@ -871,19 +958,22 @@ const _CopiableComponent = ({
   copiedText,
   button,
   buttonLabel,
+  buttonIcon,
   buttonProps,
   ariaLabel,
   dataTestId,
   tooltipPlacement = "top",
+  tooltipProps,
+  snackbarProps,
   ...props
 }, ref) => {
   const [open, setOpen] = React.useState(false);
-  const intl = reactIntl.useIntl();
-  const intlConfig = cssUtils.useImperativeIntl(intl);
-  const copyTooltipText = copyText === null ? null : copyText || intlConfig.formatMessage({ id: "c4r.button.copy" });
-  const copySuccessMessage = copiedText || intlConfig.formatMessage({
-    id: "c4r.notifications.copiedToClipboard"
-  });
+  const _copyText = cssUtils.useTranslationWithFallback("c4r.button.copy", copyText);
+  const copyTooltipText = copyText === null ? null : _copyText;
+  const copySuccessMessage = cssUtils.useTranslationWithFallback(
+    "c4r.notifications.copiedToClipboard",
+    copiedText
+  );
   const { copy } = useCopyValue(copyTooltipText, copySuccessMessage);
   const handleClick = (e) => {
     e.preventDefault();
@@ -892,6 +982,7 @@ const _CopiableComponent = ({
       setOpen(true);
     }).catch(console.error);
   };
+  const copyIcon = buttonIcon ?? /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.ContentCopyOutlined, {});
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       material.Tooltip,
@@ -899,6 +990,7 @@ const _CopiableComponent = ({
         title: copyTooltipText,
         leaveDelay: 0,
         placement: tooltipPlacement,
+        ...tooltipProps,
         children: /* @__PURE__ */ jsxRuntime.jsxs(
           material.Box,
           {
@@ -914,9 +1006,9 @@ const _CopiableComponent = ({
                 {
                   ...buttonProps,
                   disabled,
-                  icon: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.ContentCopyOutlined, {}),
+                  icon: copyIcon,
                   "data-testid": dataTestId,
-                  "aria-label": ariaLabel || buttonLabel || copyTooltipText || intlConfig.formatMessage({ id: "c4r.button.copy" }),
+                  "aria-label": ariaLabel || buttonLabel || (copyTooltipText ?? ""),
                   sx: {
                     display: "flex"
                   }
@@ -930,10 +1022,11 @@ const _CopiableComponent = ({
     /* @__PURE__ */ jsxRuntime.jsx(
       Snackbar,
       {
-        open,
         autoWidth: true,
         closeable: false,
         autoHideDuration: 4e3,
+        ...snackbarProps,
+        open,
         onClose: () => setOpen(false),
         children: copySuccessMessage
       }
@@ -977,16 +1070,22 @@ function _CopiableInputText({
   size = "small",
   onFocus,
   onBlur,
+  showText: showTextProp,
+  hideText: hideTextProp,
   ...rest
 }, ref) {
-  const intl = reactIntl.useIntl();
-  const intlConfig = cssUtils.useImperativeIntl(intl);
-  const [showText, setShowText] = React.useState(false);
+  const [showPassword, setShowPassword] = React.useState(false);
   const [isInputFocused, setIsInputFocused] = React.useState(false);
-  const inputType = !password ? "text" : showText ? "text" : "password";
-  const showTextLabel = intlConfig.formatMessage({
-    id: showText ? "c4r.button.hide" : "c4r.button.show"
-  });
+  const inputType = !password ? "text" : showPassword ? "text" : "password";
+  const showTextLabel = cssUtils.useTranslationWithFallback(
+    "c4r.button.show",
+    showTextProp
+  );
+  const hideTextLabel = cssUtils.useTranslationWithFallback(
+    "c4r.button.hide",
+    hideTextProp
+  );
+  const currentLabel = showPassword ? hideTextLabel : showTextLabel;
   const handleFocus = (event) => {
     setIsInputFocused(true);
     onFocus == null ? void 0 : onFocus(event);
@@ -999,11 +1098,11 @@ function _CopiableInputText({
     cssUtils.IconButton,
     {
       edge: variant !== "standard" ? "end" : void 0,
-      onClick: () => setShowText(!showText),
+      onClick: () => setShowPassword(!showPassword),
       size,
-      icon: showText ? /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.VisibilityOutlined, {}) : /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.VisibilityOffOutlined, {}),
-      tooltip: showTextLabel,
-      "aria-label": showTextLabel
+      icon: showPassword ? /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.VisibilityOutlined, {}) : /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.VisibilityOffOutlined, {}),
+      tooltip: currentLabel,
+      "aria-label": currentLabel
     }
   ) });
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1273,10 +1372,12 @@ function useCreatableAutocomplete({
   newItemIcon,
   multiple
 }) {
-  const intl = reactIntl.useIntl();
-  const intlConfig = cssUtils.useImperativeIntl(intl);
   const filter = material.createFilterOptions();
   const { renderOption: autocompleteRenderOption } = useAutocompleteRenderOption();
+  const addLabel = cssUtils.useTranslationWithFallback(
+    "c4r.form.add",
+    typeof newItemLabel === "string" ? newItemLabel : void 0
+  );
   const creatableFilterOptions = (options, params) => {
     const filtered = filter(
       options,
@@ -1290,10 +1391,8 @@ function useCreatableAutocomplete({
       let newItemText;
       if (typeof newItemLabel === "function") {
         newItemText = newItemLabel(inputValue);
-      } else if (newItemLabel) {
-        newItemText = `${newItemLabel} "${inputValue}"`;
       } else {
-        newItemText = `${intlConfig.formatMessage({ id: "c4r.form.add" })} "${inputValue}"`;
+        newItemText = `${addLabel} "${inputValue}"`;
       }
       filtered.push({
         inputValue,
@@ -1338,14 +1437,18 @@ function useMultipleAutocomplete({
   counterText,
   allSelectedText
 }) {
-  const intl = reactIntl.useIntl();
-  const intlConfig = cssUtils.useImperativeIntl(intl);
-  const defaultCounterText = counterText || intlConfig.formatMessage({ id: "c4r.form.selected" });
-  const defaultAllSelectedText = allSelectedText || intlConfig.formatMessage({ id: "c4r.form.allSelected" });
   const [multipleValue, setMultipleValue] = React.useState(
     Array.isArray(value) ? value : value ? [value] : []
   );
   const { renderOption: autocompleteRenderOption } = useAutocompleteRenderOption();
+  const defaultCounterText = cssUtils.useTranslationWithFallback(
+    "c4r.form.selected",
+    counterText
+  );
+  const defaultAllSelectedText = cssUtils.useTranslationWithFallback(
+    "c4r.form.allSelected",
+    allSelectedText
+  );
   React.useEffect(() => {
     const newValue = Array.isArray(value) ? value : value ? [value] : [];
     setMultipleValue(newValue);
@@ -1476,6 +1579,7 @@ function _AutocompleteList({
   extended,
   itemHeight,
   maxListHeight = cssUtils.MENU_LIST_MAX_SIZE,
+  selectAllText,
   ...otherProps
 }, ref) {
   const childrenArray = React.useMemo(() => {
@@ -1551,7 +1655,8 @@ function _AutocompleteList({
           {
             areAllSelected: !!allSelected,
             areAnySelected: !!someSelected,
-            selectAll: handleSelectAll
+            selectAll: handleSelectAll,
+            selectAllText
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -1582,6 +1687,7 @@ function _CreatableAutocomplete({
   counterFormatter,
   counterText,
   allSelectedText,
+  selectAllText,
   options = [],
   value,
   onChange,
@@ -1632,7 +1738,8 @@ function _CreatableAutocomplete({
     multiple,
     itemHeight,
     maxListHeight,
-    extended
+    extended,
+    selectAllText
   };
   const finalRenderTags = showCounter && multiple && !renderTags ? getCounterRenderTags() : renderTags;
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1671,6 +1778,7 @@ function _MultipleAutocomplete({
   counterFormatter,
   counterText,
   allSelectedText,
+  selectAllText,
   options,
   value,
   onChange,
@@ -1712,7 +1820,8 @@ function _MultipleAutocomplete({
     multiple: true,
     itemHeight,
     maxListHeight,
-    extended
+    extended,
+    selectAllText
   };
   const finalRenderTags = showCounter && !renderTags ? getCounterRenderTags() : renderTags;
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1853,6 +1962,7 @@ function SecondaryText({ text }) {
 }
 const Root$4 = material.styled(material.AppBar)(({ theme }) => ({
   backgroundColor: theme.palette.brand.appBarMain,
+  userSelect: "none",
   "& .MuiTypography-root": {
     color: theme.palette.brand.appBarContrastText
   },
@@ -1918,16 +2028,24 @@ const Footer = material.styled(material.Box, {
 function CodeAreaFooter({
   onClickFooter,
   buttonFooterLabelId,
+  buttonFooterText,
   disabledButtonFooter,
   withGutter = true,
   showSnackbar,
   onCloseSnackbar,
   loading,
   disabled,
+  changesSavedText,
   ...props
 }) {
-  const intl = reactIntl.useIntl();
-  const intlConfig = cssUtils.useImperativeIntl(intl);
+  const buttonFooterLabel = cssUtils.useTranslationWithFallback(
+    buttonFooterLabelId || "c4r.button.save",
+    buttonFooterText
+  );
+  const changesSavedLabel = cssUtils.useTranslationWithFallback(
+    "c4r.notifications.changesSaved",
+    changesSavedText
+  );
   if (!onClickFooter) return null;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Footer,
@@ -1945,9 +2063,7 @@ function CodeAreaFooter({
             loading,
             onClick: onClickFooter,
             disabled: disabled || disabledButtonFooter,
-            children: intlConfig.formatMessage({
-              id: buttonFooterLabelId || "c4r.button.save"
-            })
+            children: buttonFooterLabel
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -1958,9 +2074,7 @@ function CodeAreaFooter({
             closeable: false,
             autoHideDuration: 4e3,
             onClose: onCloseSnackbar,
-            children: intlConfig.formatMessage({
-              id: "c4r.notifications.changesSaved"
-            })
+            children: changesSavedLabel
           }
         )
       ]
@@ -1982,10 +2096,12 @@ function CodeAreaHeader({
   disabled,
   copyValue,
   onClickExpand,
-  size
+  size,
+  showOptionsTooltipText,
+  copyText,
+  expandText,
+  copiedText
 }) {
-  const intl = reactIntl.useIntl();
-  const intlConfig = cssUtils.useImperativeIntl(intl);
   const showExpandButton = !!onClickExpand;
   const showCopyButton = copyValue !== void 0;
   const showMenu = showExpandButton && showCopyButton;
@@ -1993,6 +2109,19 @@ function CodeAreaHeader({
   const [openSnackbar, setOpenSnackbar] = React.useState(false);
   const [anchorEl, setAnchorEl] = React.useState(null);
   const open = Boolean(anchorEl);
+  const showOptionsTooltipLabel = cssUtils.useTranslationWithFallback(
+    "c4r.button.showOptions",
+    showOptionsTooltipText
+  );
+  const copyLabel = cssUtils.useTranslationWithFallback("c4r.button.copy", copyText);
+  const expandLabel = cssUtils.useTranslationWithFallback(
+    "c4r.button.expand",
+    expandText
+  );
+  const copiedLabel = cssUtils.useTranslationWithFallback(
+    "c4r.notifications.copiedToClipboard",
+    copiedText
+  );
   const openDropdown = (event) => {
     setAnchorEl(event.currentTarget);
   };
@@ -2020,7 +2149,7 @@ function CodeAreaHeader({
             size,
             icon: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.MoreVertOutlined, {}),
             disabled,
-            tooltip: intlConfig.formatMessage({ id: `c4r.button.showOptions` }),
+            tooltip: showOptionsTooltipLabel,
             tooltipPlacement: "top",
             "aria-controls": open ? "basic-menu" : void 0,
             "aria-haspopup": "true",
@@ -2042,11 +2171,11 @@ function CodeAreaHeader({
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs(MenuItem.MenuItem, { onClick: handleCopy, disabled, id: "copy", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(material.ListItemIcon, { children: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.ContentCopyOutlined, {}) }),
-                /* @__PURE__ */ jsxRuntime.jsx(material.ListItemText, { children: intlConfig.formatMessage({ id: `c4r.button.copy` }) })
+                /* @__PURE__ */ jsxRuntime.jsx(material.ListItemText, { children: copyLabel })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs(MenuItem.MenuItem, { onClick: onClickExpand, disabled, id: "expand", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(material.ListItemIcon, { children: /* @__PURE__ */ jsxRuntime.jsx(OpenDiagonallyRight.OpenDiagonallyRight, {}) }),
-                /* @__PURE__ */ jsxRuntime.jsx(material.ListItemText, { children: intlConfig.formatMessage({ id: `c4r.button.expand` }) })
+                /* @__PURE__ */ jsxRuntime.jsx(material.ListItemText, { children: expandLabel })
               ] })
             ]
           }
@@ -2060,9 +2189,7 @@ function CodeAreaHeader({
           closeable: false,
           autoHideDuration: 4e3,
           onClose: () => setOpenSnackbar(false),
-          children: intlConfig.formatMessage({
-            id: "c4r.notifications.copiedToClipboard"
-          })
+          children: copiedLabel
         }
       )
     ] });
@@ -2074,7 +2201,9 @@ function CodeAreaHeader({
         disabled,
         value: copyValue,
         button: true,
-        buttonProps: { size }
+        buttonProps: { size },
+        copyText,
+        copiedText
       }
     ),
     showExpandButton && /* @__PURE__ */ jsxRuntime.jsx(
@@ -2085,7 +2214,7 @@ function CodeAreaHeader({
         onClick: onClickExpand,
         icon: /* @__PURE__ */ jsxRuntime.jsx(OpenDiagonallyRight.OpenDiagonallyRight, {}),
         disabled,
-        tooltip: intlConfig.formatMessage({ id: `c4r.button.expand` }),
+        tooltip: expandLabel,
         tooltipPlacement: "top"
       }
     )
@@ -3134,10 +3263,13 @@ function DialogHeader({
   secondaryActions,
   "aria-label": ariaLabel,
   closeIcon,
+  closeTooltipText,
   ...otherProps
 }) {
-  const intl = reactIntl.useIntl();
-  const intlConfig = cssUtils.useImperativeIntl(intl);
+  const closeTooltipLabel = cssUtils.useTranslationWithFallback(
+    "c4r.button.close",
+    closeTooltipText
+  );
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(DialogTitle, { component: "div", "data-name": "dialog-header", ...otherProps, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(Main$1, { children: [
@@ -3157,14 +3289,7 @@ function DialogHeader({
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs(ItemsWrapper$1, { children: [
           secondaryActions,
-          onClose && /* @__PURE__ */ jsxRuntime.jsx(
-            material.Tooltip,
-            {
-              title: intlConfig.formatMessage({ id: "c4r.button.close" }),
-              placement: "left",
-              children: /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { onClick: onClose, children: closeIcon || /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, { "data-testid": "CloseIcon" }) })
-            }
-          )
+          onClose && /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: closeTooltipLabel, placement: "left", children: /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { onClick: onClose, children: closeIcon || /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, { "data-testid": "CloseIcon" }) }) })
         ] })
       ] }),
       children
@@ -3173,42 +3298,56 @@ function DialogHeader({
   ] });
 }
 const Content$4 = material.styled(material.DialogContent, {
-  shouldForwardProp: (prop) => !["scrollableContent", "withGutter", "withBottomGutter"].includes(prop)
-})(({ theme, scrollableContent, withGutter, withBottomGutter }) => ({
-  display: "flex",
-  flexDirection: "column",
-  gap: theme.spacing(3),
-  padding: 0,
-  ...theme.typography.body2,
-  color: theme.palette.text.secondary,
-  ".MuiAlert-root": {
-    minHeight: "auto"
-  },
-  ...scrollableContent && {
-    borderBottom: `1px solid ${theme.palette.divider}`,
-    "+ .MuiDivider-root": {
-      display: "none"
-    }
-  },
-  ...withGutter && {
-    padding: ` ${theme.spacing(1, 2, 0)} !important`,
-    ".MuiDialog-paperFullScreen &": {
-      padding: `${theme.spacing(2, 2, 0)} !important`
-    }
-  },
-  ...withBottomGutter && {
-    paddingBottom: `${theme.spacing(3)} !important`,
-    ".MuiDialog-paperFullScreen &": {
-      paddingBottom: `${theme.spacing(3)} !important`
+  shouldForwardProp: (prop) => ![
+    "scrollableContent",
+    "withGutter",
+    "withBottomGutter",
+    "spacing"
+  ].includes(prop)
+})(
+  ({
+    theme,
+    scrollableContent,
+    withGutter,
+    withBottomGutter,
+    spacing = 3
+  }) => ({
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing(spacing),
+    padding: 0,
+    ...theme.typography.body2,
+    color: theme.palette.text.secondary,
+    ".MuiAlert-root": {
+      minHeight: "auto"
+    },
+    ...scrollableContent && {
+      borderBottom: `1px solid ${theme.palette.divider}`,
+      "+ .MuiDivider-root": {
+        display: "none"
+      }
+    },
+    ...withGutter && {
+      padding: ` ${theme.spacing(1, 2, 0)} !important`,
+      ".MuiDialog-paperFullScreen &": {
+        padding: `${theme.spacing(2, 2, 0)} !important`
+      }
+    },
+    ...withBottomGutter && {
+      paddingBottom: `${theme.spacing(3)} !important`,
+      ".MuiDialog-paperFullScreen &": {
+        paddingBottom: `${theme.spacing(3)} !important`
+      }
     }
-  }
-}));
+  })
+);
 function _DialogContent({
   children,
   scrollableContent,
   hasFooterAlert,
   withGutter = true,
   withBottomGutter = true,
+  spacing,
   onScroll,
   ...props
 }, ref) {
@@ -3256,6 +3395,7 @@ function _DialogContent({
       scrollableContent,
       withGutter,
       withBottomGutter: withBottomGutter && withGutter,
+      spacing,
       "data-name": "dialog-content",
       ...props,
       children
@@ -3583,15 +3723,30 @@ function CodeAreaDialogConfirmation({
   onClose,
   onCancel,
   cancelLabelId,
+  cancelText,
   cancelButton,
   closeButton,
   contentLabelId,
+  contentText,
   titleLabelId,
+  titleText,
   severity = "warning",
-  content
+  content,
+  leaveText
 }) {
-  const intl = reactIntl.useIntl();
-  const intlConfig = cssUtils.useImperativeIntl(intl);
+  const titleLabel = cssUtils.useTranslationWithFallback(
+    titleLabelId || "c4r.dialog.confirmation.title",
+    titleText
+  );
+  const cancelLabel = cssUtils.useTranslationWithFallback(
+    cancelLabelId || "c4r.button.cancel",
+    cancelText
+  );
+  const leaveLabel = cssUtils.useTranslationWithFallback("c4r.button.leave", leaveText);
+  const contentLabel = cssUtils.useTranslationWithFallback(
+    contentLabelId || "c4r.dialog.confirmation.content",
+    contentText
+  );
   if (!onClose || !onCancel) {
     return null;
   }
@@ -3600,20 +3755,12 @@ function CodeAreaDialogConfirmation({
     {
       opened: true,
       severity,
-      title: intlConfig.formatMessage({
-        id: titleLabelId || "c4r.dialog.confirmation.title"
-      }),
+      title: titleLabel,
       actions: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        onCancel && (cancelButton ? cancelButton : /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: onCancel, children: intlConfig.formatMessage({
-          id: cancelLabelId || "c4r.button.cancel"
-        }) })),
-        onClose && (closeButton ? closeButton : /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "contained", onClick: onClose, children: intlConfig.formatMessage({
-          id: "c4r.button.leave"
-        }) }))
+        onCancel && (cancelButton ? cancelButton : /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: onCancel, children: cancelLabel })),
+        onClose && (closeButton ? closeButton : /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "contained", onClick: onClose, children: leaveLabel }))
       ] }),
-      children: content ? content : intlConfig.formatMessage({
-        id: contentLabelId || "c4r.dialog.confirmation.content"
-      })
+      children: content ?? contentLabel
     }
   );
 }
@@ -3630,6 +3777,7 @@ function CodeAreaDialog({
   showConfirmation,
   onCancelConfirm,
   onCloseConfirm,
+  confirmationDialogTexts,
   footerProps,
   saveLoading,
   showSaveSnackbar,
@@ -3694,7 +3842,11 @@ function CodeAreaDialog({
           {
             onClose: onCloseConfirm ?? onClose,
             onCancel: onCancelConfirm,
-            cancelLabelId: "c4r.button.keepEditing"
+            cancelLabelId: "c4r.button.keepEditing",
+            titleText: confirmationDialogTexts == null ? void 0 : confirmationDialogTexts.titleText,
+            contentText: confirmationDialogTexts == null ? void 0 : confirmationDialogTexts.contentText,
+            cancelText: confirmationDialogTexts == null ? void 0 : confirmationDialogTexts.cancelText,
+            leaveText: confirmationDialogTexts == null ? void 0 : confirmationDialogTexts.leaveText
           }
         )
       ]
@@ -3862,10 +4014,13 @@ function DatePicker({
   readOnly,
   "aria-label": ariaLabel,
   "data-testid": dataTestId,
+  chooseDateAriaLabel,
   ...props
 }) {
-  const intl = reactIntl.useIntl();
-  const intlConfig = cssUtils.useImperativeIntl(intl);
+  const chooseDateText = cssUtils.useTranslationWithFallback(
+    "c4r.form.chooseDate",
+    chooseDateAriaLabel
+  );
   return (
     // Don't remove className, it's used for styling
     /* @__PURE__ */ jsxRuntime.jsx(material.Box, { className: "CartoDatePicker-root", "data-testid": "date-picker", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -3910,16 +4065,7 @@ function DatePicker({
             },
             slots: {
               clearButton: (props2) => /* @__PURE__ */ jsxRuntime.jsx(ClearButton, { ...props2, size, variant }),
-              openPickerButton: (props2) => /* @__PURE__ */ jsxRuntime.jsx(
-                material.IconButton,
-                {
-                  ...props2,
-                  size,
-                  "aria-label": intlConfig.formatMessage({
-                    id: "c4r.form.chooseDate"
-                  })
-                }
-              ),
+              openPickerButton: (props2) => /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { ...props2, size, "aria-label": chooseDateText }),
               ...slots
             },
             disableOpenPicker: !showCalendar,
@@ -4148,12 +4294,14 @@ function DateRangePicker({
   variant = "outlined",
   startProps,
   endProps,
+  startDateLabel,
+  endDateLabel,
+  startDateCalendarAriaLabel,
+  endDateCalendarAriaLabel,
   "aria-label": ariaLabel,
   "data-testid": dataTestId,
   ...props
 }) {
-  const intl = reactIntl.useIntl();
-  const intlConfig = cssUtils.useImperativeIntl(intl);
   const [isEndDateOpen, setIsEndDateOpen] = React.useState(false);
   const [isStartDateOpen, setIsStartDateOpen] = React.useState(false);
   const [startDate, setStartDate] = React.useState(
@@ -4164,6 +4312,22 @@ function DateRangePicker({
     (endProps == null ? void 0 : endProps.value) ?? (startProps == null ? void 0 : startProps.value) ?? /* @__PURE__ */ new Date()
   );
   const hasError = error ?? (startProps == null ? void 0 : startProps.error) ?? (endProps == null ? void 0 : endProps.error);
+  const _startDateLabel = cssUtils.useTranslationWithFallback(
+    "c4r.form.startDate",
+    startDateLabel
+  );
+  const _endDateLabel = cssUtils.useTranslationWithFallback(
+    "c4r.form.endDate",
+    endDateLabel
+  );
+  const startCalendarAriaLabel = cssUtils.useTranslationWithFallback(
+    "c4r.form.startDateCalendar",
+    startDateCalendarAriaLabel
+  );
+  const endCalendarAriaLabel = cssUtils.useTranslationWithFallback(
+    "c4r.form.endDateCalendar",
+    endDateCalendarAriaLabel
+  );
   const handleStartDateChange = (value, context) => {
     setStartDate(value);
     if (startProps == null ? void 0 : startProps.onChange) {
@@ -4217,13 +4381,11 @@ function DateRangePicker({
               ...startProps,
               value: (startProps == null ? void 0 : startProps.value) ?? startDate,
               maxDate: endDate ?? void 0,
-              label: (startProps == null ? void 0 : startProps.label) ?? intlConfig.formatMessage({ id: "c4r.form.startDate" }),
+              label: (startProps == null ? void 0 : startProps.label) ?? _startDateLabel,
               slotProps: {
                 popper: {
                   placement: "bottom-start",
-                  "aria-label": intlConfig.formatMessage({
-                    id: "c4r.form.startDateCalendar"
-                  })
+                  "aria-label": startCalendarAriaLabel
                 },
                 ...startProps == null ? void 0 : startProps.slotProps
               },
@@ -4258,9 +4420,7 @@ function DateRangePicker({
               minDate: startDate ?? void 0,
               slotProps: {
                 popper: {
-                  "aria-label": intlConfig.formatMessage({
-                    id: "c4r.form.endDateCalendar"
-                  })
+                  "aria-label": endCalendarAriaLabel
                 },
                 ...endProps == null ? void 0 : endProps.slotProps
               },
@@ -4276,7 +4436,7 @@ function DateRangePicker({
                 ),
                 ...endProps == null ? void 0 : endProps.slots
               },
-              label: (endProps == null ? void 0 : endProps.label) ?? intlConfig.formatMessage({ id: "c4r.form.endDate" }),
+              label: (endProps == null ? void 0 : endProps.label) ?? _endDateLabel,
               error: (endProps == null ? void 0 : endProps.error) ?? error,
               open: isEndDateOpen,
               onOpen: handleEndDateOpen,
@@ -4336,12 +4496,16 @@ function TimePicker({
   ampm = true,
   views = ["hours", "minutes"],
   format,
+  openPickerAriaLabel,
   "data-testid": dataTestId,
   "aria-label": ariaLabel,
   ...props
 }) {
-  const intl = reactIntl.useIntl();
-  const intlConfig = cssUtils.useImperativeIntl(intl);
+  const fieldLabel = cssUtils.useTranslationWithFallback("c4r.form.time", label);
+  const chooseDateAriaLabel = cssUtils.useTranslationWithFallback(
+    "c4r.form.chooseDate",
+    openPickerAriaLabel
+  );
   const inputRef = React.useRef(null);
   const [inputWidth, setInputWidth] = React.useState(0);
   React.useEffect(() => {
@@ -4375,7 +4539,7 @@ function TimePicker({
           label: /* @__PURE__ */ jsxRuntime.jsx(
             LabelWithIndicator,
             {
-              label: label ?? intlConfig.formatMessage({ id: "c4r.form.time" }),
+              label: fieldLabel,
               type,
               icon: labelHelpTooltip && /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: labelHelpTooltip, children: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.HelpOutline, { htmlColor: "text.secondary" }) })
             }
@@ -4415,9 +4579,7 @@ function TimePicker({
               {
                 ...props2,
                 size,
-                "aria-label": intlConfig.formatMessage({
-                  id: "c4r.form.chooseDate"
-                })
+                "aria-label": chooseDateAriaLabel
               }
             ),
             ...slots
@@ -4447,12 +4609,16 @@ function DateTimePicker({
   ampm = true,
   views = ["hours", "minutes"],
   format,
+  openPickerAriaLabel,
   "data-testid": dataTestId,
   "aria-label": ariaLabel,
   ...props
 }) {
-  const intl = reactIntl.useIntl();
-  const intlConfig = cssUtils.useImperativeIntl(intl);
+  const fieldLabel = cssUtils.useTranslationWithFallback("c4r.form.time", label);
+  const chooseDateAriaLabel = cssUtils.useTranslationWithFallback(
+    "c4r.form.chooseDate",
+    openPickerAriaLabel
+  );
   return /* @__PURE__ */ jsxRuntime.jsx(
     DateFieldContainer,
     {
@@ -4469,7 +4635,7 @@ function DateTimePicker({
           label: /* @__PURE__ */ jsxRuntime.jsx(
             LabelWithIndicator,
             {
-              label: label ?? intlConfig.formatMessage({ id: "c4r.form.time" }),
+              label: fieldLabel,
               type,
               icon: labelHelpTooltip && /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: labelHelpTooltip, children: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.HelpOutline, { htmlColor: "text.secondary" }) })
             }
@@ -4501,9 +4667,7 @@ function DateTimePicker({
               {
                 ...props2,
                 size,
-                "aria-label": intlConfig.formatMessage({
-                  id: "c4r.form.chooseDate"
-                })
+                "aria-label": chooseDateAriaLabel
               }
             ),
             ...slots
@@ -4616,37 +4780,6 @@ function _AccordionGroup({
   );
 }
 const AccordionGroup = React.forwardRef(_AccordionGroup);
-const sizes = {
-  large: 5,
-  medium: 4,
-  small: 3,
-  xsmall: 2.25
-};
-const StyledAvatar = material.styled(material.Avatar, {
-  shouldForwardProp: (prop) => prop !== "size" && prop !== "disabled"
-})(({ theme, size = "medium", disabled = false }) => ({
-  width: theme.spacing(sizes[size]),
-  height: theme.spacing(sizes[size]),
-  ...theme.typography.subtitle1,
-  ...size === "large" && {
-    ...theme.typography.h6
-  },
-  ...size === "small" && {
-    ...theme.typography.caption,
-    fontWeight: 500
-  },
-  ...size === "xsmall" && {
-    ...theme.typography.caption,
-    fontWeight: 500,
-    svg: {
-      width: cssUtils.ICON_SIZE_SMALL,
-      height: cssUtils.ICON_SIZE_SMALL
-    }
-  },
-  ...disabled && {
-    opacity: 0.6
-  }
-}));
 function _Avatar({
   size,
   disabled,
@@ -4655,7 +4788,7 @@ function _Avatar({
   ...otherProps
 }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    StyledAvatar,
+    material.Avatar,
     {
       ...otherProps,
       ref,
@@ -4852,6 +4985,9 @@ function _FilterDropdown({
   responsive,
   tooltipLabel,
   tooltipPlacement,
+  tooltipProps,
+  buttonProps,
+  iconButtonProps,
   slotProps,
   MenuListProps,
   ...props
@@ -4889,14 +5025,30 @@ function _FilterDropdown({
     "data-color": buttonColor
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: tooltipLabel, placement: tooltipPlacement, children: /* @__PURE__ */ jsxRuntime.jsx(ButtonWrapper, { isOpen, buttonColor, ref, children: isIcon ? /* @__PURE__ */ jsxRuntime.jsx(cssUtils.IconButton, { ...commonButtonProps, icon }) : /* @__PURE__ */ jsxRuntime.jsx(
-      Button,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      material.Tooltip,
       {
-        ...commonButtonProps,
-        endIcon: isOpen ? /* @__PURE__ */ jsxRuntime.jsx(OpenDiagonallyRight.ArrowUp, {}) : /* @__PURE__ */ jsxRuntime.jsx(ArrowDown.ArrowDown, {}),
-        children: menuLabel
+        title: tooltipLabel,
+        placement: tooltipPlacement,
+        ...tooltipProps,
+        children: /* @__PURE__ */ jsxRuntime.jsx(ButtonWrapper, { isOpen, buttonColor, ref, children: isIcon ? /* @__PURE__ */ jsxRuntime.jsx(
+          cssUtils.IconButton,
+          {
+            ...commonButtonProps,
+            icon,
+            ...iconButtonProps
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            ...commonButtonProps,
+            endIcon: isOpen ? /* @__PURE__ */ jsxRuntime.jsx(OpenDiagonallyRight.ArrowUp, {}) : /* @__PURE__ */ jsxRuntime.jsx(ArrowDown.ArrowDown, {}),
+            ...buttonProps,
+            children: menuLabel
+          }
+        ) })
       }
-    ) }) }),
+    ),
     /* @__PURE__ */ jsxRuntime.jsxs(
       Menu,
       {
@@ -4946,6 +5098,294 @@ function _FilterDropdown({
 const FilterDropdown = React.forwardRef(
   _FilterDropdown
 );
+const SearchIcon = material.styled(Search.Search, {
+  shouldForwardProp: (prop) => prop !== "minimized" && prop !== "disabled"
+})(
+  ({ theme, minimized, disabled }) => ({
+    cursor: !disabled && minimized ? "pointer" : "inherit",
+    width: cssUtils.ICON_SIZE_MEDIUM,
+    height: cssUtils.ICON_SIZE_MEDIUM,
+    path: {
+      fillOpacity: 1,
+      fill: disabled ? theme.palette.text.disabled : theme.palette.text.secondary
+    }
+  })
+);
+const ClearSearchIcon = material.styled(iconsMaterial.Cancel)(({ theme }) => ({
+  color: `${theme.palette.text.hint} !important`
+}));
+const LoadingSearchIcon = material.styled(material.CircularProgress)(({ theme }) => ({
+  svg: {
+    color: `${theme.palette.primary.main} !important`
+  }
+}));
+const SearchInputAdornment = material.styled(material.InputAdornment, {
+  shouldForwardProp: (prop) => prop !== "minimized" && prop !== "expanded"
+})(
+  ({ theme, minimized, expanded }) => ({
+    // Start adornment
+    transition: theme.transitions.create(["width", "margin"], {
+      easing: theme.transitions.easing.easeInOut,
+      duration: theme.transitions.duration.short
+    }),
+    "&.MuiInputAdornment-positionStart": {
+      marginLeft: minimized ? theme.spacing(2) : void 0,
+      "&.MuiInputAdornment-sizeSmall": {
+        marginLeft: minimized ? theme.spacing(1) : void 0
+      }
+    },
+    // End adornment
+    "&.MuiInputAdornment-positionEnd": {
+      minWidth: theme.spacing(4),
+      "&.MuiInputAdornment-sizeSmall": {
+        minWidth: theme.spacing(3)
+      }
+    },
+    ...expanded && !minimized && {
+      "&.MuiInputAdornment-root": {
+        minWidth: theme.spacing(9),
+        "&.MuiInputAdornment-sizeSmall": {
+          minWidth: theme.spacing(7)
+        }
+      }
+    }
+  })
+);
+const SearchFieldBase = material.styled(material.TextField, {
+  shouldForwardProp: (prop) => prop !== "minimized" && prop !== "isInputFocused" && prop !== "emphasis"
+})(({ theme, emphasis = "filled", minimized, isInputFocused }) => ({
+  "&.MuiTextField-root .MuiInputBase-root": {
+    paddingRight: theme.spacing(1),
+    transition: theme.transitions.create(["width", "padding"], {
+      easing: theme.transitions.easing.easeInOut,
+      duration: theme.transitions.duration.standard
+    }),
+    "&.MuiInputBase-sizeSmall": {
+      paddingRight: theme.spacing(0.5)
+    },
+    "&:before": {
+      border: "none !important",
+      "&:hover": {
+        border: "none !important"
+      }
+    },
+    // Input
+    "& .MuiInputBase-input": {
+      pointerEvents: isInputFocused ? "auto" : "none",
+      // Fix Chrome scroll issue https://issues.chromium.org/issues/41245282
+      transition: theme.transitions.create("width", {
+        easing: theme.transitions.easing.easeInOut,
+        duration: theme.transitions.duration.standard
+      })
+    },
+    // Error state
+    "&.Mui-error": {
+      "&::after": {
+        borderColor: "transparent !important"
+      }
+    },
+    ...minimized && {
+      display: "flex",
+      alignItems: "center",
+      padding: 0,
+      width: theme.spacing(6),
+      cursor: "pointer",
+      "& .MuiInputBase-input": {
+        width: 0
+      },
+      "&.MuiInputBase-sizeSmall": {
+        padding: 0,
+        width: theme.spacing(4)
+      }
+    }
+  },
+  // Variants
+  ...emphasis === "filled" && {
+    "& .MuiInputBase-root": {
+      backgroundColor: minimized ? "transparent !important" : void 0,
+      "&:hover": {
+        backgroundColor: `${theme.palette.action.hover} !important`
+      },
+      // not disabled
+      "&:not(.Mui-disabled):hover": {
+        backgroundColor: `${theme.palette.action.hover} !important`
+      }
+    }
+  },
+  ...emphasis === "transparent" && {
+    "& .MuiInputBase-root": {
+      backgroundColor: "transparent !important",
+      "&:hover": {
+        backgroundColor: minimized ? `${theme.palette.action.hover} !important` : "transparent !important"
+      },
+      "&.Mui-disabled": {
+        backgroundColor: "transparent !important"
+      }
+    }
+  },
+  ...emphasis === "floating" && {
+    "& .MuiInputBase-root": {
+      backgroundColor: `${theme.palette.background.paper} !important`,
+      boxShadow: theme.shadows[1],
+      "&:hover": {
+        backgroundColor: minimized ? `${theme.palette.action.hover} !important` : `${theme.palette.background.paper} !important`
+      },
+      "&.Mui-disabled": {
+        backgroundColor: `${theme.palette.background.paper} !important`
+      }
+    }
+  }
+}));
+const SearchFieldEndAdornment = ({
+  disabled,
+  showClearButton = true,
+  loading,
+  size,
+  endAdornment,
+  clearButton,
+  clearButtonLabel,
+  onClear
+}) => {
+  if (!showClearButton && !endAdornment && !loading) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SearchInputAdornment,
+    {
+      position: "end",
+      expanded: Boolean(endAdornment && showClearButton),
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        material.Stack,
+        {
+          direction: "row",
+          spacing: 1,
+          sx: {
+            alignItems: "center"
+          },
+          children: [
+            loading ? /* @__PURE__ */ jsxRuntime.jsx(LoadingSearchIcon, { size: cssUtils.ICON_SIZE_MEDIUM }) : showClearButton ? clearButton ?? /* @__PURE__ */ jsxRuntime.jsx(
+              cssUtils.IconButton,
+              {
+                onClick: onClear,
+                size,
+                color: "default",
+                disabled,
+                tooltip: clearButtonLabel,
+                "aria-label": clearButtonLabel,
+                icon: /* @__PURE__ */ jsxRuntime.jsx(ClearSearchIcon, {})
+              }
+            ) : null,
+            endAdornment
+          ]
+        }
+      )
+    }
+  );
+};
+const SearchFieldStartAdornment = ({
+  minimized,
+  loading,
+  startAdornment,
+  disabled
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(SearchInputAdornment, { position: "start", minimized, children: loading && minimized ? /* @__PURE__ */ jsxRuntime.jsx(LoadingSearchIcon, { size: cssUtils.ICON_SIZE_MEDIUM }) : startAdornment || /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, { disabled, minimized }) });
+};
+function _SearchField({
+  value,
+  defaultValue,
+  placeholder,
+  disabled,
+  minimized = false,
+  loading = false,
+  variant = "filled",
+  size = "small",
+  InputProps,
+  inputProps,
+  startAdornment,
+  endAdornment,
+  onFocus,
+  onBlur,
+  onChange,
+  onClick,
+  onResetSearch,
+  showClearButton = true,
+  clearButtonLabel,
+  clearButton,
+  ...otherProps
+}, ref) {
+  const [isInputFocused, setIsInputFocused] = React.useState(false);
+  const clearButtonVisibility = !disabled && Boolean(value ?? defaultValue) && showClearButton;
+  const clearButtonLabelValue = cssUtils.useTranslationWithFallback(
+    "c4r.button.clear",
+    clearButtonLabel
+  );
+  const handleFocus = (event) => {
+    setIsInputFocused(true);
+    onFocus == null ? void 0 : onFocus(event);
+  };
+  const handleBlur = (event) => {
+    setIsInputFocused(false);
+    onBlur == null ? void 0 : onBlur(event);
+  };
+  const handleClear = () => {
+    onResetSearch == null ? void 0 : onResetSearch();
+    onChange == null ? void 0 : onChange({ target: { value: "" } });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SearchFieldBase,
+    {
+      defaultValue,
+      value: minimized ? "" : value,
+      placeholder: minimized ? "" : placeholder,
+      onChange,
+      onClick,
+      variant: "filled",
+      emphasis: variant,
+      size,
+      focused: false,
+      isInputFocused,
+      disabled,
+      minimized,
+      InputProps: {
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        startAdornment: /* @__PURE__ */ jsxRuntime.jsx(
+          SearchFieldStartAdornment,
+          {
+            minimized,
+            loading,
+            disabled,
+            startAdornment
+          }
+        ),
+        endAdornment: !minimized && /* @__PURE__ */ jsxRuntime.jsx(
+          SearchFieldEndAdornment,
+          {
+            disabled,
+            loading,
+            showClearButton: clearButtonVisibility,
+            clearButton,
+            clearButtonLabel: clearButtonLabelValue,
+            onClear: handleClear,
+            size,
+            endAdornment
+          }
+        ),
+        ...InputProps
+      },
+      inputProps: {
+        role: "searchbox",
+        ...inputProps
+      },
+      role: "search",
+      "data-variant": variant,
+      "data-name": "search-field",
+      ref,
+      ...otherProps
+    }
+  );
+}
+const SearchField = React.forwardRef(_SearchField);
 const MAX_WIDTH = 480;
 const SnackbarRoot = material.styled(material.Snackbar)(({ theme }) => ({
   bottom: theme.spacing(2),
@@ -5050,10 +5490,13 @@ function Snackbar({
   onClose = () => void 0,
   autoWidth,
   icon,
+  closeTooltipText,
   ...rest
 }) {
-  const intl = reactIntl.useIntl();
-  const intlConfig = cssUtils.useImperativeIntl(intl);
+  const closeTooltipLabel = cssUtils.useTranslationWithFallback(
+    "c4r.button.close",
+    closeTooltipText
+  );
   const isNeutral = severity === "neutral";
   const disabledIcon = icon === false || isNeutral && !icon;
   const disabledAutoHide = autoHideDuration === null;
@@ -5094,9 +5537,7 @@ function Snackbar({
                 color: "default",
                 onClick: (e) => onClose(e, "timeout"),
                 icon: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.CloseOutlined, {}),
-                tooltip: intlConfig.formatMessage({
-                  id: "c4r.button.close"
-                })
+                tooltip: closeTooltipLabel
               }
             ) })
           ]
@@ -5419,10 +5860,26 @@ function useFileUpload({
   files,
   multiple,
   placeholder,
-  uploadInputRef
+  uploadInputRef,
+  filesSelectedText,
+  dragPlaceholderText,
+  dragActivePlaceholderText
 }) {
-  const intl = reactIntl.useIntl();
-  const intlConfig = cssUtils.useImperativeIntl(intl);
+  const filesSelectedLabel = cssUtils.useTranslationWithFallback(
+    "c4r.form.filesSelected",
+    filesSelectedText,
+    { count: (files == null ? void 0 : files.length) ?? 0 }
+  );
+  const dragPlaceholderLabel = cssUtils.useTranslationWithFallback(
+    "c4r.form.dragPlaceholder",
+    dragPlaceholderText,
+    { count: multiple ? 0 : 1 }
+  );
+  const dragActivePlaceholderLabel = cssUtils.useTranslationWithFallback(
+    "c4r.form.dragActivePlaceholder",
+    dragActivePlaceholderText,
+    { count: multiple ? 0 : 1 }
+  );
   const [filesText, setFilesText] = React.useState("");
   const [dragOver, setDragOver] = React.useState(false);
   React.useEffect(() => {
@@ -5431,14 +5888,9 @@ function useFileUpload({
     } else if (files.length === 1) {
       setFilesText(files[0].name);
     } else {
-      setFilesText(
-        intlConfig.formatMessage(
-          { id: "c4r.form.filesSelected" },
-          { count: files.length }
-        )
-      );
+      setFilesText(filesSelectedLabel);
     }
-  }, [files, intlConfig]);
+  }, [files, filesSelectedLabel]);
   const handleBrowse = () => {
     var _a;
     (_a = uploadInputRef.current) == null ? void 0 : _a.click();
@@ -5478,22 +5930,11 @@ function useFileUpload({
     onChange == null ? void 0 : onChange([]);
   };
   const getPlaceholder = React.useMemo(() => {
-    const defaultPlaceholder = intlConfig.formatMessage(
-      { id: `c4r.form.dragPlaceholder` },
-      { count: multiple ? 0 : 1 }
-    );
-    const dragPlaceholder = intlConfig.formatMessage(
-      { id: `c4r.form.dragActivePlaceholder` },
-      { count: multiple ? 0 : 1 }
-    );
-    let placeholderText = "";
     if (dragOver) {
-      placeholderText = dragPlaceholder;
-    } else {
-      placeholderText = placeholder ?? defaultPlaceholder;
+      return dragActivePlaceholderLabel;
     }
-    return placeholderText;
-  }, [dragOver, multiple, placeholder, intlConfig]);
+    return placeholder ?? dragPlaceholderLabel;
+  }, [dragOver, placeholder, dragPlaceholderLabel, dragActivePlaceholderLabel]);
   const inputEvents = {
     onDragOver: handleDragOver,
     onDragLeave: handleDragLeave,
@@ -5720,12 +6161,12 @@ function _EllipsisWithTooltip({
   );
 }
 const EllipsisWithTooltip = React.forwardRef(_EllipsisWithTooltip);
-exports.Alert = Alert$1.Alert;
-exports.Link = Alert$1.Link;
-exports.ScreenReaderOnly = Alert$1.ScreenReaderOnly;
 exports.IconButton = cssUtils.IconButton;
 exports.TablePaginationActions = cssUtils.TablePaginationActions;
 exports.Typography = cssUtils.Typography;
+exports.Alert = Alert$1.Alert;
+exports.Link = Alert$1.Link;
+exports.ScreenReaderOnly = Alert$1.ScreenReaderOnly;
 exports.MenuItem = MenuItem.MenuItem;
 exports.AUTOCOMPLETE_GROUP_HEADER_PROPERTY = AUTOCOMPLETE_GROUP_HEADER_PROPERTY;
 exports.AccordionGroup = AccordionGroup;
@@ -5763,12 +6204,14 @@ exports.EllipsisWithTooltip = EllipsisWithTooltip;
 exports.FilterDropdown = FilterDropdown;
 exports.FilterDropdownMenuItem = FilterDropdownMenuItem;
 exports.LabelWithIndicator = LabelWithIndicator;
+exports.Loader = Loader;
 exports.Menu = Menu;
 exports.MenuItemFilter = MenuItemFilter;
 exports.MenuList = MenuList;
 exports.MultipleAutocomplete = MultipleAutocomplete;
 exports.MultipleSelectField = MultipleSelectField;
 exports.PasswordField = PasswordField;
+exports.SearchField = SearchField;
 exports.SelectField = SelectField;
 exports.Snackbar = Snackbar;
 exports.SplitButton = SplitButton;