@carto/meridian-ds 2.6.1 → 2.6.2-alpha.0

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, 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 useTranslationFallback, S as ScreenReaderOnly, A as Alert$1 } from "../Alert-DHd9hCGz.js";
-import { L } from "../Alert-DHd9hCGz.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, N as NOTIFICATION_DURATION_IN_MS, e as ellipsisStyles } from "../css-utils-WejOmkiI.js";
-import { a } from "../css-utils-WejOmkiI.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, N as NOTIFICATION_DURATION_IN_MS, e as ellipsisStyles } from "../css-utils-lmkjeCdF.js";
+import { a } from "../css-utils-lmkjeCdF.js";
+import { S as ScreenReaderOnly, A as Alert$1 } from "../Alert-1A6BG2aO.js";
+import { L } from "../Alert-1A6BG2aO.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-MUmADf3e.js";
+import { M as MenuItem$1 } from "../MenuItem-DgHhHW-j.js";
 import "cartocolor";
 import { FixedSizeList } from "react-window";
 import { Controlled, UnControlled } from "react-codemirror2";
@@ -38,6 +37,7 @@ import "codemirror/addon/fold/markdown-fold.js";
 import "codemirror/addon/fold/comment-fold.js";
 import ClickAwayListener$1 from "@mui/material/ClickAwayListener";
 import { DatePicker as DatePicker$1 } from "@mui/x-date-pickers/DatePicker";
+import { useIntl } from "react-intl";
 import { PickersDay as PickersDay$1 } from "@mui/x-date-pickers";
 import { TimePicker as TimePicker$1 } from "@mui/x-date-pickers/TimePicker";
 import { DateTimePicker as DateTimePicker$1 } from "@mui/x-date-pickers/DateTimePicker";
@@ -69,7 +69,7 @@ function _Button({
   "aria-describedby": ariaDescribedby,
   ...otherProps
 }, ref) {
-  const screenReaderTextValue = useTranslationFallback(
+  const screenReaderTextValue = useTranslationWithFallback(
     "c4r.button.opensInNewTab",
     screenReaderText
   );
@@ -282,14 +282,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,
     {
@@ -311,8 +322,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
           }
         ) })
       },
@@ -522,11 +533,14 @@ function _MenuItemFilter({
   areAnySelected,
   selectAll,
   selectAllDisabled,
+  selectAllText,
   "aria-label": ariaLabel,
   "data-testid": dataTestId
 }, ref) {
-  const intl = useIntl();
-  const intlConfig = useImperativeIntl(intl);
+  const selectAllLabel = useTranslationWithFallback(
+    "c4r.form.selectAll",
+    selectAllText
+  );
   return /* @__PURE__ */ jsx(
     StyledMenuItem$1,
     {
@@ -554,7 +568,7 @@ function _MenuItemFilter({
                 disabled: selectAllDisabled
               }
             ),
-            intlConfig.formatMessage({ id: "c4r.form.selectAll" })
+            selectAllLabel
           ]
         }
       )
@@ -601,6 +615,10 @@ function _MultipleSelectField({
   selectAllDisabled,
   tooltipPlacement,
   variant,
+  allSelectedText,
+  noneSelectedText,
+  selectedText,
+  selectAllText,
   ...props
 }, ref) {
   const {
@@ -617,11 +635,19 @@ function _MultipleSelectField({
   });
   const isSmall = size === "small";
   const paddingSize = isSmall || variant === "standard" ? 0 : 2;
-  const intl = useIntl();
-  const intlConfig = useImperativeIntl(intl);
-  const counterText = `${currentOptions.length} ${intlConfig.formatMessage({
-    id: "c4r.form.selected"
-  })}`;
+  const allSelectedLabel = useTranslationWithFallback(
+    "c4r.form.allSelected",
+    allSelectedText
+  );
+  const noneSelectedLabel = useTranslationWithFallback(
+    "c4r.form.noneSelected",
+    noneSelectedText
+  );
+  const selectedLabel = useTranslationWithFallback(
+    "c4r.form.selected",
+    selectedText
+  );
+  const counterText = `${currentOptions.length} ${selectedLabel}`;
   const renderValue = useMemo(() => {
     if (areAllSelected) {
       return /* @__PURE__ */ jsx(
@@ -631,7 +657,7 @@ function _MultipleSelectField({
           variant: isSmall ? "body2" : "body1",
           color: "textPrimary",
           ml: paddingSize,
-          children: intlConfig.formatMessage({ id: "c4r.form.allSelected" })
+          children: allSelectedLabel
         }
       );
     }
@@ -654,16 +680,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 +731,8 @@ function _MultipleSelectField({
                 areAllSelected,
                 areAnySelected,
                 selectAll,
-                selectAllDisabled
+                selectAllDisabled,
+                selectAllText
               }
             )
           }
@@ -871,19 +899,22 @@ const _CopiableComponent = ({
   copiedText,
   button,
   buttonLabel,
+  buttonIcon,
   buttonProps,
   ariaLabel,
   dataTestId,
   tooltipPlacement = "top",
+  tooltipProps,
+  snackbarProps,
   ...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();
@@ -892,6 +923,7 @@ const _CopiableComponent = ({
       setOpen(true);
     }).catch(console.error);
   };
+  const copyIcon = buttonIcon ?? /* @__PURE__ */ jsx(ContentCopyOutlined, {});
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       Tooltip,
@@ -899,6 +931,7 @@ const _CopiableComponent = ({
         title: copyTooltipText,
         leaveDelay: 0,
         placement: tooltipPlacement,
+        ...tooltipProps,
         children: /* @__PURE__ */ jsxs(
           Box,
           {
@@ -914,9 +947,9 @@ const _CopiableComponent = ({
                 {
                   ...buttonProps,
                   disabled,
-                  icon: /* @__PURE__ */ jsx(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 +963,11 @@ const _CopiableComponent = ({
     /* @__PURE__ */ jsx(
       Snackbar,
       {
-        open,
         autoWidth: true,
         closeable: false,
         autoHideDuration: 4e3,
+        ...snackbarProps,
+        open,
         onClose: () => setOpen(false),
         children: copySuccessMessage
       }
@@ -977,16 +1011,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);
@@ -999,11 +1039,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(
@@ -1273,10 +1313,12 @@ function useCreatableAutocomplete({
   newItemIcon,
   multiple
 }) {
-  const intl = useIntl();
-  const intlConfig = useImperativeIntl(intl);
   const filter = createFilterOptions();
   const { renderOption: autocompleteRenderOption } = useAutocompleteRenderOption();
+  const addLabel = useTranslationWithFallback(
+    "c4r.form.add",
+    typeof newItemLabel === "string" ? newItemLabel : void 0
+  );
   const creatableFilterOptions = (options, params) => {
     const filtered = filter(
       options,
@@ -1290,10 +1332,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 +1378,18 @@ function useMultipleAutocomplete({
   counterText,
   allSelectedText
 }) {
-  const intl = useIntl();
-  const intlConfig = useImperativeIntl(intl);
-  const defaultCounterText = counterText || intlConfig.formatMessage({ id: "c4r.form.selected" });
-  const defaultAllSelectedText = allSelectedText || intlConfig.formatMessage({ id: "c4r.form.allSelected" });
   const [multipleValue, setMultipleValue] = useState(
     Array.isArray(value) ? value : value ? [value] : []
   );
   const { renderOption: autocompleteRenderOption } = useAutocompleteRenderOption();
+  const defaultCounterText = useTranslationWithFallback(
+    "c4r.form.selected",
+    counterText
+  );
+  const defaultAllSelectedText = useTranslationWithFallback(
+    "c4r.form.allSelected",
+    allSelectedText
+  );
   useEffect(() => {
     const newValue = Array.isArray(value) ? value : value ? [value] : [];
     setMultipleValue(newValue);
@@ -1476,6 +1520,7 @@ function _AutocompleteList({
   extended,
   itemHeight,
   maxListHeight = MENU_LIST_MAX_SIZE,
+  selectAllText,
   ...otherProps
 }, ref) {
   const childrenArray = useMemo(() => {
@@ -1551,7 +1596,8 @@ function _AutocompleteList({
           {
             areAllSelected: !!allSelected,
             areAnySelected: !!someSelected,
-            selectAll: handleSelectAll
+            selectAll: handleSelectAll,
+            selectAllText
           }
         ),
         /* @__PURE__ */ jsx(
@@ -1582,6 +1628,7 @@ function _CreatableAutocomplete({
   counterFormatter,
   counterText,
   allSelectedText,
+  selectAllText,
   options = [],
   value,
   onChange,
@@ -1632,7 +1679,8 @@ function _CreatableAutocomplete({
     multiple,
     itemHeight,
     maxListHeight,
-    extended
+    extended,
+    selectAllText
   };
   const finalRenderTags = showCounter && multiple && !renderTags ? getCounterRenderTags() : renderTags;
   return /* @__PURE__ */ jsx(
@@ -1671,6 +1719,7 @@ function _MultipleAutocomplete({
   counterFormatter,
   counterText,
   allSelectedText,
+  selectAllText,
   options,
   value,
   onChange,
@@ -1712,7 +1761,8 @@ function _MultipleAutocomplete({
     multiple: true,
     itemHeight,
     maxListHeight,
-    extended
+    extended,
+    selectAllText
   };
   const finalRenderTags = showCounter && !renderTags ? getCounterRenderTags() : renderTags;
   return /* @__PURE__ */ jsx(
@@ -1853,6 +1903,7 @@ function SecondaryText({ text }) {
 }
 const Root$4 = styled(AppBar$1)(({ theme }) => ({
   backgroundColor: theme.palette.brand.appBarMain,
+  userSelect: "none",
   "& .MuiTypography-root": {
     color: theme.palette.brand.appBarContrastText
   },
@@ -1918,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,
@@ -1945,9 +2004,7 @@ function CodeAreaFooter({
             loading,
             onClick: onClickFooter,
             disabled: disabled || disabledButtonFooter,
-            children: intlConfig.formatMessage({
-              id: buttonFooterLabelId || "c4r.button.save"
-            })
+            children: buttonFooterLabel
           }
         ),
         /* @__PURE__ */ jsx(
@@ -1958,9 +2015,7 @@ function CodeAreaFooter({
             closeable: false,
             autoHideDuration: 4e3,
             onClose: onCloseSnackbar,
-            children: intlConfig.formatMessage({
-              id: "c4r.notifications.changesSaved"
-            })
+            children: changesSavedLabel
           }
         )
       ]
@@ -1982,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;
@@ -1993,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);
   };
@@ -2020,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",
@@ -2042,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 })
               ] })
             ]
           }
@@ -2060,9 +2130,7 @@ function CodeAreaHeader({
           closeable: false,
           autoHideDuration: 4e3,
           onClose: () => setOpenSnackbar(false),
-          children: intlConfig.formatMessage({
-            id: "c4r.notifications.copiedToClipboard"
-          })
+          children: copiedLabel
         }
       )
     ] });
@@ -2074,7 +2142,9 @@ function CodeAreaHeader({
         disabled,
         value: copyValue,
         button: true,
-        buttonProps: { size }
+        buttonProps: { size },
+        copyText,
+        copiedText
       }
     ),
     showExpandButton && /* @__PURE__ */ jsx(
@@ -2085,7 +2155,7 @@ function CodeAreaHeader({
         onClick: onClickExpand,
         icon: /* @__PURE__ */ jsx(OpenDiagonallyRight, {}),
         disabled,
-        tooltip: intlConfig.formatMessage({ id: `c4r.button.expand` }),
+        tooltip: expandLabel,
         tooltipPlacement: "top"
       }
     )
@@ -3134,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: [
@@ -3157,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
@@ -3173,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) {
@@ -3256,6 +3336,7 @@ function _DialogContent({
       scrollableContent,
       withGutter,
       withBottomGutter: withBottomGutter && withGutter,
+      spacing,
       "data-name": "dialog-content",
       ...props,
       children
@@ -3583,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;
   }
@@ -3600,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
     }
   );
 }
@@ -3630,6 +3718,7 @@ function CodeAreaDialog({
   showConfirmation,
   onCancelConfirm,
   onCloseConfirm,
+  confirmationDialogTexts,
   footerProps,
   saveLoading,
   showSaveSnackbar,
@@ -3694,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
           }
         )
       ]
@@ -3862,10 +3955,13 @@ function DatePicker({
   readOnly,
   "aria-label": ariaLabel,
   "data-testid": dataTestId,
+  chooseDateAriaLabel,
   ...props
 }) {
-  const intl = useIntl();
-  const intlConfig = useImperativeIntl(intl);
+  const chooseDateText = useTranslationWithFallback(
+    "c4r.form.chooseDate",
+    chooseDateAriaLabel
+  );
   return (
     // Don't remove className, it's used for styling
     /* @__PURE__ */ jsx(Box, { className: "CartoDatePicker-root", "data-testid": "date-picker", children: /* @__PURE__ */ jsx(
@@ -3910,16 +4006,7 @@ function DatePicker({
             },
             slots: {
               clearButton: (props2) => /* @__PURE__ */ jsx(ClearButton, { ...props2, size, variant }),
-              openPickerButton: (props2) => /* @__PURE__ */ jsx(
-                IconButton$1,
-                {
-                  ...props2,
-                  size,
-                  "aria-label": intlConfig.formatMessage({
-                    id: "c4r.form.chooseDate"
-                  })
-                }
-              ),
+              openPickerButton: (props2) => /* @__PURE__ */ jsx(IconButton$1, { ...props2, size, "aria-label": chooseDateText }),
               ...slots
             },
             disableOpenPicker: !showCalendar,
@@ -4148,12 +4235,14 @@ function DateRangePicker({
   variant = "outlined",
   startProps,
   endProps,
+  startDateLabel,
+  endDateLabel,
+  startDateCalendarAriaLabel,
+  endDateCalendarAriaLabel,
   "aria-label": ariaLabel,
   "data-testid": dataTestId,
   ...props
 }) {
-  const intl = useIntl();
-  const intlConfig = useImperativeIntl(intl);
   const [isEndDateOpen, setIsEndDateOpen] = useState(false);
   const [isStartDateOpen, setIsStartDateOpen] = useState(false);
   const [startDate, setStartDate] = useState(
@@ -4164,6 +4253,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 = useTranslationWithFallback(
+    "c4r.form.startDate",
+    startDateLabel
+  );
+  const _endDateLabel = useTranslationWithFallback(
+    "c4r.form.endDate",
+    endDateLabel
+  );
+  const startCalendarAriaLabel = useTranslationWithFallback(
+    "c4r.form.startDateCalendar",
+    startDateCalendarAriaLabel
+  );
+  const endCalendarAriaLabel = useTranslationWithFallback(
+    "c4r.form.endDateCalendar",
+    endDateCalendarAriaLabel
+  );
   const handleStartDateChange = (value, context) => {
     setStartDate(value);
     if (startProps == null ? void 0 : startProps.onChange) {
@@ -4217,13 +4322,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 +4361,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 +4377,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 +4437,16 @@ function TimePicker({
   ampm = true,
   views = ["hours", "minutes"],
   format,
+  openPickerAriaLabel,
   "data-testid": dataTestId,
   "aria-label": ariaLabel,
   ...props
 }) {
-  const intl = useIntl();
-  const intlConfig = useImperativeIntl(intl);
+  const fieldLabel = useTranslationWithFallback("c4r.form.time", label);
+  const chooseDateAriaLabel = useTranslationWithFallback(
+    "c4r.form.chooseDate",
+    openPickerAriaLabel
+  );
   const inputRef = useRef(null);
   const [inputWidth, setInputWidth] = useState(0);
   useEffect(() => {
@@ -4375,7 +4480,7 @@ function TimePicker({
           label: /* @__PURE__ */ jsx(
             LabelWithIndicator,
             {
-              label: label ?? intlConfig.formatMessage({ id: "c4r.form.time" }),
+              label: fieldLabel,
               type,
               icon: labelHelpTooltip && /* @__PURE__ */ jsx(Tooltip, { title: labelHelpTooltip, children: /* @__PURE__ */ jsx(HelpOutline, { htmlColor: "text.secondary" }) })
             }
@@ -4415,9 +4520,7 @@ function TimePicker({
               {
                 ...props2,
                 size,
-                "aria-label": intlConfig.formatMessage({
-                  id: "c4r.form.chooseDate"
-                })
+                "aria-label": chooseDateAriaLabel
               }
             ),
             ...slots
@@ -4447,12 +4550,16 @@ function DateTimePicker({
   ampm = true,
   views = ["hours", "minutes"],
   format,
+  openPickerAriaLabel,
   "data-testid": dataTestId,
   "aria-label": ariaLabel,
   ...props
 }) {
-  const intl = useIntl();
-  const intlConfig = useImperativeIntl(intl);
+  const fieldLabel = useTranslationWithFallback("c4r.form.time", label);
+  const chooseDateAriaLabel = useTranslationWithFallback(
+    "c4r.form.chooseDate",
+    openPickerAriaLabel
+  );
   return /* @__PURE__ */ jsx(
     DateFieldContainer,
     {
@@ -4469,7 +4576,7 @@ function DateTimePicker({
           label: /* @__PURE__ */ jsx(
             LabelWithIndicator,
             {
-              label: label ?? intlConfig.formatMessage({ id: "c4r.form.time" }),
+              label: fieldLabel,
               type,
               icon: labelHelpTooltip && /* @__PURE__ */ jsx(Tooltip, { title: labelHelpTooltip, children: /* @__PURE__ */ jsx(HelpOutline, { htmlColor: "text.secondary" }) })
             }
@@ -4501,9 +4608,7 @@ function DateTimePicker({
               {
                 ...props2,
                 size,
-                "aria-label": intlConfig.formatMessage({
-                  id: "c4r.form.chooseDate"
-                })
+                "aria-label": chooseDateAriaLabel
               }
             ),
             ...slots
@@ -4616,37 +4721,6 @@ function _AccordionGroup({
   );
 }
 const AccordionGroup = forwardRef(_AccordionGroup);
-const sizes = {
-  large: 5,
-  medium: 4,
-  small: 3,
-  xsmall: 2.25
-};
-const StyledAvatar = styled(Avatar$1, {
-  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: ICON_SIZE_SMALL,
-      height: ICON_SIZE_SMALL
-    }
-  },
-  ...disabled && {
-    opacity: 0.6
-  }
-}));
 function _Avatar({
   size,
   disabled,
@@ -4655,7 +4729,7 @@ function _Avatar({
   ...otherProps
 }, ref) {
   return /* @__PURE__ */ jsx(
-    StyledAvatar,
+    Avatar$1,
     {
       ...otherProps,
       ref,
@@ -4852,6 +4926,9 @@ function _FilterDropdown({
   responsive,
   tooltipLabel,
   tooltipPlacement,
+  tooltipProps,
+  buttonProps,
+  iconButtonProps,
   slotProps,
   MenuListProps,
   ...props
@@ -4889,14 +4966,30 @@ function _FilterDropdown({
     "data-color": buttonColor
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Tooltip, { title: tooltipLabel, placement: tooltipPlacement, children: /* @__PURE__ */ jsx(ButtonWrapper, { isOpen, buttonColor, ref, children: isIcon ? /* @__PURE__ */ jsx(IconButton, { ...commonButtonProps, icon }) : /* @__PURE__ */ jsx(
-      Button,
+    /* @__PURE__ */ jsx(
+      Tooltip,
       {
-        ...commonButtonProps,
-        endIcon: isOpen ? /* @__PURE__ */ jsx(ArrowUp, {}) : /* @__PURE__ */ jsx(ArrowDown, {}),
-        children: menuLabel
+        title: tooltipLabel,
+        placement: tooltipPlacement,
+        ...tooltipProps,
+        children: /* @__PURE__ */ jsx(ButtonWrapper, { isOpen, buttonColor, ref, children: isIcon ? /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            ...commonButtonProps,
+            icon,
+            ...iconButtonProps
+          }
+        ) : /* @__PURE__ */ jsx(
+          Button,
+          {
+            ...commonButtonProps,
+            endIcon: isOpen ? /* @__PURE__ */ jsx(ArrowUp, {}) : /* @__PURE__ */ jsx(ArrowDown, {}),
+            ...buttonProps,
+            children: menuLabel
+          }
+        ) })
       }
-    ) }) }),
+    ),
     /* @__PURE__ */ jsxs(
       Menu,
       {
@@ -5050,10 +5143,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;
@@ -5094,9 +5190,7 @@ function Snackbar({
                 color: "default",
                 onClick: (e) => onClose(e, "timeout"),
                 icon: /* @__PURE__ */ jsx(CloseOutlined, {}),
-                tooltip: intlConfig.formatMessage({
-                  id: "c4r.button.close"
-                })
+                tooltip: closeTooltipLabel
               }
             ) })
           ]
@@ -5419,10 +5513,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(() => {
@@ -5431,14 +5541,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 +5583,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,