@carto/meridian-ds 2.6.1-alpha-searchfield.3 → 2.6.1-alpha-searchfield.4

package/dist/components/index.js

@@ -2,14 +2,13 @@ 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, 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, Tooltip, ToggleButtonGroup as ToggleButtonGroup$1, Autocomplete as Autocomplete$1, Divider, ListItemIcon, 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, Stack, Snackbar as Snackbar$1, Portal, Fade } 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, S as ScreenReaderOnly, A as Alert$1 } from "../Alert-BN993lHa.js";
-import { L } from "../Alert-BN993lHa.js";
-import { T as Typography, c as ICON_SIZE_SMALL, u as useImperativeIntl, i as IconButton, f as MENU_ITEM_SIZE_DENSE, d as MENU_LIST_MAX_SIZE, h as MENU_ITEM_SIZE_EXTENDED, M as MENU_ITEM_SIZE_DEFAULT, A as APPBAR_SIZE, b as ICON_SIZE_MEDIUM, N as NOTIFICATION_DURATION_IN_MS, e as ellipsisStyles } from "../css-utils-hxI-qUxK.js";
-import { a } from "../css-utils-hxI-qUxK.js";
+import { u as useTranslationWithFallback, T as Typography, c as ICON_SIZE_SMALL, i as IconButton, f as MENU_ITEM_SIZE_DENSE, d as MENU_LIST_MAX_SIZE, h as MENU_ITEM_SIZE_EXTENDED, M as MENU_ITEM_SIZE_DEFAULT, A as APPBAR_SIZE, j as useImperativeIntl, b as ICON_SIZE_MEDIUM, N as NOTIFICATION_DURATION_IN_MS, e as ellipsisStyles } from "../css-utils-BHYA7By_.js";
+import { a } from "../css-utils-BHYA7By_.js";
+import { S as ScreenReaderOnly, A as Alert$1 } from "../Alert-1-pacqlp.js";
+import { L } from "../Alert-1-pacqlp.js";
 import { A as ArrowDown } from "../ArrowDown-d6bxUL0F.js";
 import { A as ArrowUp, O as OpenDiagonallyRight, C as CloseDiagonallyRight } from "../OpenDiagonallyRight-CGdCEXlF.js";
-import { useIntl } from "react-intl";
-import { M as MenuItem$1 } from "../MenuItem-COajCLkS.js";
+import { M as MenuItem$1 } from "../MenuItem-GpTpLidu.js";
 import "cartocolor";
 import { FixedSizeList } from "react-window";
 import { Controlled, UnControlled } from "react-codemirror2";
@@ -37,6 +36,7 @@ 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";
+import { useIntl } from "react-intl";
 import { DatePicker as DatePicker$1 } from "@mui/x-date-pickers/DatePicker";
 import { PickersDay as PickersDay$1 } from "@mui/x-date-pickers";
 import { TimePicker as TimePicker$1 } from "@mui/x-date-pickers/TimePicker";
@@ -283,14 +283,25 @@ function _LabelWithIndicator({
   );
 }
 const LabelWithIndicator = forwardRef(_LabelWithIndicator);
-function _PasswordField({ InputProps, size = "small", disabled, ...otherProps }, ref) {
-  const intl = useIntl();
-  const intlConfig = useImperativeIntl(intl);
+function _PasswordField({
+  InputProps,
+  size = "small",
+  disabled,
+  showPasswordText,
+  hidePasswordText,
+  ...otherProps
+}, ref) {
+  const showPasswordLabel = useTranslationWithFallback(
+    "c4r.form.showPassword",
+    showPasswordText
+  );
+  const hidePasswordLabel = useTranslationWithFallback(
+    "c4r.form.hidePassword",
+    hidePasswordText
+  );
   const [showPassword, setShowPassword] = useState(false);
   const handleClickShowPassword = () => setShowPassword(!showPassword);
-  const showPasswordLabel = intlConfig.formatMessage({
-    id: `c4r.form.${showPassword ? "hidePassword" : "showPassword"}`
-  });
+  const label = showPassword ? hidePasswordLabel : showPasswordLabel;
   return /* @__PURE__ */ jsx(
     TextField,
     {
@@ -312,8 +323,8 @@ function _PasswordField({ InputProps, size = "small", disabled, ...otherProps },
             disabled,
             onClick: handleClickShowPassword,
             icon: showPassword ? /* @__PURE__ */ jsx(VisibilityOffOutlined, {}) : /* @__PURE__ */ jsx(VisibilityOutlined, {}),
-            tooltip: showPasswordLabel,
-            "aria-label": showPasswordLabel
+            tooltip: label,
+            "aria-label": label
           }
         ) })
       },
@@ -899,12 +910,12 @@ const _CopiableComponent = ({
   ...props
 }, ref) => {
   const [open, setOpen] = useState(false);
-  const intl = useIntl();
-  const intlConfig = 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 = useTranslationWithFallback("c4r.button.copy", copyText);
+  const copyTooltipText = copyText === null ? null : _copyText;
+  const copySuccessMessage = useTranslationWithFallback(
+    "c4r.notifications.copiedToClipboard",
+    copiedText
+  );
   const { copy } = useCopyValue(copyTooltipText, copySuccessMessage);
   const handleClick = (e) => {
     e.preventDefault();
@@ -939,7 +950,7 @@ const _CopiableComponent = ({
                   disabled,
                   icon: copyIcon,
                   "data-testid": dataTestId,
-                  "aria-label": ariaLabel || buttonLabel || copyTooltipText || intlConfig.formatMessage({ id: "c4r.button.copy" }),
+                  "aria-label": ariaLabel || buttonLabel || (copyTooltipText ?? ""),
                   sx: {
                     display: "flex"
                   }
@@ -1001,16 +1012,22 @@ function _CopiableInputText({
   size = "small",
   onFocus,
   onBlur,
+  showText: showTextProp,
+  hideText: hideTextProp,
   ...rest
 }, ref) {
-  const intl = useIntl();
-  const intlConfig = useImperativeIntl(intl);
-  const [showText, setShowText] = useState(false);
+  const [showPassword, setShowPassword] = 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 inputType = !password ? "text" : showPassword ? "text" : "password";
+  const showTextLabel = useTranslationWithFallback(
+    "c4r.button.show",
+    showTextProp
+  );
+  const hideTextLabel = useTranslationWithFallback(
+    "c4r.button.hide",
+    hideTextProp
+  );
+  const currentLabel = showPassword ? hideTextLabel : showTextLabel;
   const handleFocus = (event) => {
     setIsInputFocused(true);
     onFocus == null ? void 0 : onFocus(event);
@@ -1023,11 +1040,11 @@ function _CopiableInputText({
     IconButton,
     {
       edge: variant !== "standard" ? "end" : void 0,
-      onClick: () => setShowText(!showText),
+      onClick: () => setShowPassword(!showPassword),
       size,
-      icon: showText ? /* @__PURE__ */ jsx(VisibilityOutlined, {}) : /* @__PURE__ */ jsx(VisibilityOffOutlined, {}),
-      tooltip: showTextLabel,
-      "aria-label": showTextLabel
+      icon: showPassword ? /* @__PURE__ */ jsx(VisibilityOutlined, {}) : /* @__PURE__ */ jsx(VisibilityOffOutlined, {}),
+      tooltip: currentLabel,
+      "aria-label": currentLabel
     }
   ) });
   return /* @__PURE__ */ jsx(
@@ -1504,6 +1521,7 @@ function _AutocompleteList({
   extended,
   itemHeight,
   maxListHeight = MENU_LIST_MAX_SIZE,
+  selectAllText,
   ...otherProps
 }, ref) {
   const childrenArray = useMemo(() => {
@@ -1579,7 +1597,8 @@ function _AutocompleteList({
           {
             areAllSelected: !!allSelected,
             areAnySelected: !!someSelected,
-            selectAll: handleSelectAll
+            selectAll: handleSelectAll,
+            selectAllText
           }
         ),
         /* @__PURE__ */ jsx(
@@ -1610,6 +1629,7 @@ function _CreatableAutocomplete({
   counterFormatter,
   counterText,
   allSelectedText,
+  selectAllText,
   options = [],
   value,
   onChange,
@@ -1660,7 +1680,8 @@ function _CreatableAutocomplete({
     multiple,
     itemHeight,
     maxListHeight,
-    extended
+    extended,
+    selectAllText
   };
   const finalRenderTags = showCounter && multiple && !renderTags ? getCounterRenderTags() : renderTags;
   return /* @__PURE__ */ jsx(
@@ -1699,6 +1720,7 @@ function _MultipleAutocomplete({
   counterFormatter,
   counterText,
   allSelectedText,
+  selectAllText,
   options,
   value,
   onChange,
@@ -1740,7 +1762,8 @@ function _MultipleAutocomplete({
     multiple: true,
     itemHeight,
     maxListHeight,
-    extended
+    extended,
+    selectAllText
   };
   const finalRenderTags = showCounter && !renderTags ? getCounterRenderTags() : renderTags;
   return /* @__PURE__ */ jsx(
@@ -1946,16 +1969,24 @@ const Footer = styled(Box, {
 function CodeAreaFooter({
   onClickFooter,
   buttonFooterLabelId,
+  buttonFooterText,
   disabledButtonFooter,
   withGutter = true,
   showSnackbar,
   onCloseSnackbar,
   loading,
   disabled,
+  changesSavedText,
   ...props
 }) {
-  const intl = useIntl();
-  const intlConfig = useImperativeIntl(intl);
+  const buttonFooterLabel = useTranslationWithFallback(
+    buttonFooterLabelId ?? "c4r.button.save",
+    buttonFooterText
+  );
+  const changesSavedLabel = useTranslationWithFallback(
+    "c4r.notifications.changesSaved",
+    changesSavedText
+  );
   if (!onClickFooter) return null;
   return /* @__PURE__ */ jsxs(
     Footer,
@@ -1973,9 +2004,7 @@ function CodeAreaFooter({
             loading,
             onClick: onClickFooter,
             disabled: disabled || disabledButtonFooter,
-            children: intlConfig.formatMessage({
-              id: buttonFooterLabelId || "c4r.button.save"
-            })
+            children: buttonFooterLabel
           }
         ),
         /* @__PURE__ */ jsx(
@@ -1986,9 +2015,7 @@ function CodeAreaFooter({
             closeable: false,
             autoHideDuration: 4e3,
             onClose: onCloseSnackbar,
-            children: intlConfig.formatMessage({
-              id: "c4r.notifications.changesSaved"
-            })
+            children: changesSavedLabel
           }
         )
       ]
@@ -2010,10 +2037,12 @@ function CodeAreaHeader({
   disabled,
   copyValue,
   onClickExpand,
-  size
+  size,
+  showOptionsTooltipText,
+  copyText,
+  expandText,
+  copiedText
 }) {
-  const intl = useIntl();
-  const intlConfig = useImperativeIntl(intl);
   const showExpandButton = !!onClickExpand;
   const showCopyButton = copyValue !== void 0;
   const showMenu = showExpandButton && showCopyButton;
@@ -2021,6 +2050,19 @@ function CodeAreaHeader({
   const [openSnackbar, setOpenSnackbar] = useState(false);
   const [anchorEl, setAnchorEl] = useState(null);
   const open = Boolean(anchorEl);
+  const showOptionsTooltipLabel = useTranslationWithFallback(
+    "c4r.button.showOptions",
+    showOptionsTooltipText
+  );
+  const copyLabel = useTranslationWithFallback("c4r.button.copy", copyText);
+  const expandLabel = useTranslationWithFallback(
+    "c4r.button.expand",
+    expandText
+  );
+  const copiedLabel = useTranslationWithFallback(
+    "c4r.notifications.copiedToClipboard",
+    copiedText
+  );
   const openDropdown = (event) => {
     setAnchorEl(event.currentTarget);
   };
@@ -2048,7 +2090,7 @@ function CodeAreaHeader({
             size,
             icon: /* @__PURE__ */ jsx(MoreVertOutlined, {}),
             disabled,
-            tooltip: intlConfig.formatMessage({ id: `c4r.button.showOptions` }),
+            tooltip: showOptionsTooltipLabel,
             tooltipPlacement: "top",
             "aria-controls": open ? "basic-menu" : void 0,
             "aria-haspopup": "true",
@@ -2070,11 +2112,11 @@ function CodeAreaHeader({
             children: [
               /* @__PURE__ */ jsxs(MenuItem$1, { onClick: handleCopy, disabled, id: "copy", children: [
                 /* @__PURE__ */ jsx(ListItemIcon, { children: /* @__PURE__ */ jsx(ContentCopyOutlined, {}) }),
-                /* @__PURE__ */ jsx(ListItemText, { children: intlConfig.formatMessage({ id: `c4r.button.copy` }) })
+                /* @__PURE__ */ jsx(ListItemText, { children: copyLabel })
               ] }),
               /* @__PURE__ */ jsxs(MenuItem$1, { onClick: onClickExpand, disabled, id: "expand", children: [
                 /* @__PURE__ */ jsx(ListItemIcon, { children: /* @__PURE__ */ jsx(OpenDiagonallyRight, {}) }),
-                /* @__PURE__ */ jsx(ListItemText, { children: intlConfig.formatMessage({ id: `c4r.button.expand` }) })
+                /* @__PURE__ */ jsx(ListItemText, { children: expandLabel })
               ] })
             ]
           }
@@ -2088,9 +2130,7 @@ function CodeAreaHeader({
           closeable: false,
           autoHideDuration: 4e3,
           onClose: () => setOpenSnackbar(false),
-          children: intlConfig.formatMessage({
-            id: "c4r.notifications.copiedToClipboard"
-          })
+          children: copiedLabel
         }
       )
     ] });
@@ -2102,7 +2142,9 @@ function CodeAreaHeader({
         disabled,
         value: copyValue,
         button: true,
-        buttonProps: { size }
+        buttonProps: { size },
+        copyText,
+        copiedText
       }
     ),
     showExpandButton && /* @__PURE__ */ jsx(
@@ -2113,7 +2155,7 @@ function CodeAreaHeader({
         onClick: onClickExpand,
         icon: /* @__PURE__ */ jsx(OpenDiagonallyRight, {}),
         disabled,
-        tooltip: intlConfig.formatMessage({ id: `c4r.button.expand` }),
+        tooltip: expandLabel,
         tooltipPlacement: "top"
       }
     )
@@ -3162,10 +3204,13 @@ function DialogHeader({
   secondaryActions,
   "aria-label": ariaLabel,
   closeIcon,
+  closeTooltipText,
   ...otherProps
 }) {
-  const intl = useIntl();
-  const intlConfig = useImperativeIntl(intl);
+  const closeTooltipLabel = useTranslationWithFallback(
+    "c4r.button.close",
+    closeTooltipText
+  );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(DialogTitle, { component: "div", "data-name": "dialog-header", ...otherProps, children: [
       /* @__PURE__ */ jsxs(Main$1, { children: [
@@ -3185,14 +3230,7 @@ function DialogHeader({
         ] }),
         /* @__PURE__ */ jsxs(ItemsWrapper$1, { children: [
           secondaryActions,
-          onClose && /* @__PURE__ */ jsx(
-            Tooltip,
-            {
-              title: intlConfig.formatMessage({ id: "c4r.button.close" }),
-              placement: "left",
-              children: /* @__PURE__ */ jsx(IconButton$1, { onClick: onClose, children: closeIcon || /* @__PURE__ */ jsx(CloseIcon, { "data-testid": "CloseIcon" }) })
-            }
-          )
+          onClose && /* @__PURE__ */ jsx(Tooltip, { title: closeTooltipLabel, placement: "left", children: /* @__PURE__ */ jsx(IconButton$1, { onClick: onClose, children: closeIcon || /* @__PURE__ */ jsx(CloseIcon, { "data-testid": "CloseIcon" }) }) })
         ] })
       ] }),
       children
@@ -3201,42 +3239,56 @@ function DialogHeader({
   ] });
 }
 const Content$4 = styled(DialogContent$1, {
-  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) {
@@ -3284,6 +3336,7 @@ function _DialogContent({
       scrollableContent,
       withGutter,
       withBottomGutter: withBottomGutter && withGutter,
+      spacing,
       "data-name": "dialog-content",
       ...props,
       children
@@ -3611,15 +3664,30 @@ function CodeAreaDialogConfirmation({
   onClose,
   onCancel,
   cancelLabelId,
+  cancelText,
   cancelButton,
   closeButton,
   contentLabelId,
+  contentText,
   titleLabelId,
+  titleText,
   severity = "warning",
-  content
+  content,
+  leaveText
 }) {
-  const intl = useIntl();
-  const intlConfig = useImperativeIntl(intl);
+  const titleLabel = useTranslationWithFallback(
+    titleLabelId || "c4r.dialog.confirmation.title",
+    titleText
+  );
+  const cancelLabel = useTranslationWithFallback(
+    cancelLabelId || "c4r.button.cancel",
+    cancelText
+  );
+  const leaveLabel = useTranslationWithFallback("c4r.button.leave", leaveText);
+  const contentLabel = useTranslationWithFallback(
+    contentLabelId || "c4r.dialog.confirmation.content",
+    contentText
+  );
   if (!onClose || !onCancel) {
     return null;
   }
@@ -3628,20 +3696,12 @@ function CodeAreaDialogConfirmation({
     {
       opened: true,
       severity,
-      title: intlConfig.formatMessage({
-        id: titleLabelId || "c4r.dialog.confirmation.title"
-      }),
+      title: titleLabel,
       actions: /* @__PURE__ */ jsxs(Fragment, { children: [
-        onCancel && (cancelButton ? cancelButton : /* @__PURE__ */ jsx(Button, { onClick: onCancel, children: intlConfig.formatMessage({
-          id: cancelLabelId || "c4r.button.cancel"
-        }) })),
-        onClose && (closeButton ? closeButton : /* @__PURE__ */ jsx(Button, { variant: "contained", onClick: onClose, children: intlConfig.formatMessage({
-          id: "c4r.button.leave"
-        }) }))
+        onCancel && (cancelButton ? cancelButton : /* @__PURE__ */ jsx(Button, { onClick: onCancel, children: cancelLabel })),
+        onClose && (closeButton ? closeButton : /* @__PURE__ */ jsx(Button, { variant: "contained", onClick: onClose, children: leaveLabel }))
       ] }),
-      children: content ? content : intlConfig.formatMessage({
-        id: contentLabelId || "c4r.dialog.confirmation.content"
-      })
+      children: content ?? contentLabel
     }
   );
 }
@@ -3658,6 +3718,7 @@ function CodeAreaDialog({
   showConfirmation,
   onCancelConfirm,
   onCloseConfirm,
+  confirmationDialogTexts,
   footerProps,
   saveLoading,
   showSaveSnackbar,
@@ -3722,7 +3783,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
           }
         )
       ]
@@ -5006,30 +5071,32 @@ const SearchIcon = styled(Search, {
     }
   })
 );
-const CancelSearchIcon = styled(Cancel)(({ theme }) => ({
+const ClearSearchIcon = styled(Cancel)(({ theme }) => ({
   color: `${theme.palette.text.hint} !important`
 }));
 const LoadingSearchIcon = styled(CircularProgress)(({ theme }) => ({
   svg: {
-    color: theme.palette.primary.main
+    color: `${theme.palette.primary.main} !important`
   }
 }));
 const SearchInputAdornment = styled(InputAdornment, {
   shouldForwardProp: (prop) => prop !== "minimized" && prop !== "expanded"
 })(
   ({ theme, minimized, expanded }) => ({
+    // Start adornment
+    "&.MuiInputAdornment-positionStart": {
+      marginLeft: minimized ? theme.spacing(1) : void 0
+    },
+    // End adornment
     "&.MuiInputAdornment-positionEnd": {
       minWidth: theme.spacing(4),
       "&.MuiInputAdornment-sizeSmall": {
         minWidth: theme.spacing(3)
       }
     },
-    "&.MuiInputAdornment-positionStart": {
-      marginLeft: minimized ? theme.spacing(1.5) : void 0
-    },
     ...expanded && !minimized && {
       "&.MuiInputAdornment-root": {
-        minWidth: theme.spacing(8),
+        minWidth: theme.spacing(9),
         "&.MuiInputAdornment-sizeSmall": {
           minWidth: theme.spacing(7)
         }
@@ -5115,13 +5182,64 @@ const SearchFieldBase = styled(TextField, {
     }
   }
 }));
+const SearchFieldEndAdornment = ({
+  disabled,
+  showClearButton = true,
+  loading,
+  size,
+  endAdornment,
+  clearButton,
+  clearButtonLabel,
+  onClear
+}) => {
+  if (!showClearButton && !endAdornment && !loading) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    SearchInputAdornment,
+    {
+      position: "end",
+      expanded: Boolean(endAdornment && showClearButton),
+      children: /* @__PURE__ */ jsxs(
+        Stack,
+        {
+          direction: "row",
+          spacing: 1,
+          sx: {
+            alignItems: "center"
+          },
+          children: [
+            loading ? /* @__PURE__ */ jsx(LoadingSearchIcon, { size: ICON_SIZE_MEDIUM }) : showClearButton ? clearButton ?? /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                onClick: onClear,
+                size,
+                color: "default",
+                disabled,
+                tooltip: clearButtonLabel,
+                "aria-label": String(clearButtonLabel),
+                icon: /* @__PURE__ */ jsx(ClearSearchIcon, {})
+              }
+            ) : null,
+            endAdornment
+          ]
+        }
+      )
+    }
+  );
+};
+const SearchFieldStartAdornment = ({
+  minimized,
+  loading,
+  startAdornment,
+  disabled
+}) => {
+  return /* @__PURE__ */ jsx(SearchInputAdornment, { position: "start", minimized, children: loading && minimized ? /* @__PURE__ */ jsx(LoadingSearchIcon, { size: ICON_SIZE_MEDIUM }) : startAdornment || /* @__PURE__ */ jsx(SearchIcon, { disabled, minimized }) });
+};
 function _SearchField({
   value,
   defaultValue,
   placeholder,
-  onChange,
-  onClick,
-  onResetSearch,
   disabled,
   minimized = false,
   loading = false,
@@ -5133,10 +5251,16 @@ function _SearchField({
   endAdornment,
   onFocus,
   onBlur,
+  onChange,
+  onClick,
+  onResetSearch,
+  showClearButton = true,
   clearButtonLabel,
+  clearButton,
   ...otherProps
 }, ref) {
   const [isInputFocused, setIsInputFocused] = useState(false);
+  const clearButtonVisibility = !disabled && Boolean(value ?? defaultValue) && showClearButton;
   const clearButtonLabelValue = useTranslationWithFallback(
     "c4r.button.clear",
     clearButtonLabel
@@ -5149,49 +5273,10 @@ function _SearchField({
     setIsInputFocused(false);
     onBlur == null ? void 0 : onBlur(event);
   };
-  const handleClearText = () => {
+  const handleClear = () => {
     onResetSearch == null ? void 0 : onResetSearch();
     onChange == null ? void 0 : onChange({ target: { value: "" } });
   };
-  const getEndAdornment = () => {
-    const showClearButton = !disabled && (value ?? defaultValue);
-    if (minimized) {
-      return void 0;
-    }
-    const clearButtonAriaLabel = typeof clearButtonLabelValue === "string" ? clearButtonLabelValue : String(clearButtonLabelValue);
-    return /* @__PURE__ */ jsx(
-      SearchInputAdornment,
-      {
-        position: "end",
-        expanded: Boolean(endAdornment && showClearButton),
-        children: /* @__PURE__ */ jsxs(
-          Stack,
-          {
-            direction: "row",
-            spacing: 1,
-            sx: {
-              alignItems: "center"
-            },
-            children: [
-              loading ? /* @__PURE__ */ jsx(LoadingSearchIcon, { size: ICON_SIZE_MEDIUM }) : !disabled && showClearButton ? /* @__PURE__ */ jsx(
-                IconButton,
-                {
-                  icon: /* @__PURE__ */ jsx(CancelSearchIcon, {}),
-                  onClick: handleClearText,
-                  size,
-                  color: "default",
-                  disabled,
-                  tooltip: clearButtonLabelValue,
-                  "aria-label": clearButtonAriaLabel
-                }
-              ) : void 0,
-              endAdornment
-            ]
-          }
-        )
-      }
-    );
-  };
   return /* @__PURE__ */ jsx(
     SearchFieldBase,
     {
@@ -5210,8 +5295,28 @@ function _SearchField({
       InputProps: {
         onFocus: handleFocus,
         onBlur: handleBlur,
-        startAdornment: /* @__PURE__ */ jsx(SearchInputAdornment, { position: "start", minimized, children: /* @__PURE__ */ jsx(Box, { sx: { display: "inline-flex", ml: minimized ? -0.75 : 0 }, children: loading && minimized ? /* @__PURE__ */ jsx(LoadingSearchIcon, { size: ICON_SIZE_MEDIUM }) : startAdornment || /* @__PURE__ */ jsx(SearchIcon, { disabled, minimized }) }) }),
-        endAdornment: getEndAdornment(),
+        startAdornment: /* @__PURE__ */ jsx(
+          SearchFieldStartAdornment,
+          {
+            minimized,
+            loading,
+            disabled,
+            startAdornment
+          }
+        ),
+        endAdornment: !minimized && /* @__PURE__ */ jsx(
+          SearchFieldEndAdornment,
+          {
+            disabled,
+            loading,
+            showClearButton: clearButtonVisibility,
+            clearButton,
+            clearButtonLabel: clearButtonLabelValue,
+            onClear: handleClear,
+            size,
+            endAdornment
+          }
+        ),
         ...InputProps
       },
       inputProps: {
@@ -5331,10 +5436,13 @@ function Snackbar({
   onClose = () => void 0,
   autoWidth,
   icon,
+  closeTooltipText,
   ...rest
 }) {
-  const intl = useIntl();
-  const intlConfig = useImperativeIntl(intl);
+  const closeTooltipLabel = useTranslationWithFallback(
+    "c4r.button.close",
+    closeTooltipText
+  );
   const isNeutral = severity === "neutral";
   const disabledIcon = icon === false || isNeutral && !icon;
   const disabledAutoHide = autoHideDuration === null;
@@ -5375,9 +5483,7 @@ function Snackbar({
                 color: "default",
                 onClick: (e) => onClose(e, "timeout"),
                 icon: /* @__PURE__ */ jsx(CloseOutlined, {}),
-                tooltip: intlConfig.formatMessage({
-                  id: "c4r.button.close"
-                })
+                tooltip: closeTooltipLabel
               }
             ) })
           ]
@@ -5700,10 +5806,26 @@ function useFileUpload({
   files,
   multiple,
   placeholder,
-  uploadInputRef
+  uploadInputRef,
+  filesSelectedText,
+  dragPlaceholderText,
+  dragActivePlaceholderText
 }) {
-  const intl = useIntl();
-  const intlConfig = useImperativeIntl(intl);
+  const filesSelectedLabel = useTranslationWithFallback(
+    "c4r.form.filesSelected",
+    filesSelectedText,
+    { count: (files == null ? void 0 : files.length) ?? 0 }
+  );
+  const dragPlaceholderLabel = useTranslationWithFallback(
+    "c4r.form.dragPlaceholder",
+    dragPlaceholderText,
+    { count: multiple ? 0 : 1 }
+  );
+  const dragActivePlaceholderLabel = useTranslationWithFallback(
+    "c4r.form.dragActivePlaceholder",
+    dragActivePlaceholderText,
+    { count: multiple ? 0 : 1 }
+  );
   const [filesText, setFilesText] = useState("");
   const [dragOver, setDragOver] = useState(false);
   useEffect(() => {
@@ -5712,14 +5834,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();
@@ -5759,22 +5876,11 @@ function useFileUpload({
     onChange == null ? void 0 : onChange([]);
   };
   const getPlaceholder = 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,