@carto/meridian-ds 4.4.0 → 4.4.1-alpha.024ee4e.329

package/dist/components/index.js

@@ -1,13 +1,13 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import React, { forwardRef, useState, useRef, useEffect, useMemo, createElement, Fragment as Fragment$1, useCallback, useImperativeHandle, createContext, useContext } from "react";
-import { styled, Button as Button$1, Box, CircularProgress as CircularProgress$1, Tooltip, Popper, Grow, Paper, ClickAwayListener, MenuList as MenuList$1, MenuItem, ButtonGroup as ButtonGroup$1, TextField, InputAdornment, FormControl, InputLabel, FormHelperText, Select, Checkbox, Link as Link$1, ListItemText as ListItemText$1, IconButton as IconButton$1, ToggleButtonGroup as ToggleButtonGroup$1, Stack, Autocomplete as Autocomplete$1, Divider, ListItemIcon as ListItemIcon$1, createFilterOptions, alpha, useTheme, Toolbar as Toolbar$1, AppBar as AppBar$1, Dialog as Dialog$1, Chip as Chip$1, DialogTitle as DialogTitle$1, DialogContent as DialogContent$1, Fade, AlertTitle, Alert as Alert$2, DialogActions as DialogActions$1, Slide, Accordion, AccordionSummary, AccordionDetails, Avatar as Avatar$1, Menu as Menu$2, useMediaQuery, Portal, Snackbar as Snackbar$1, List as List$2, ListItemButton as ListItemButton$1, ListItem as ListItem$1, ListSubheader as ListSubheader$1, Typography as Typography$1, Popover } from "@mui/material";
+import { styled, Button as Button$1, CircularProgress as CircularProgress$1, Tooltip, Popper, Grow, Paper, ClickAwayListener, MenuList as MenuList$1, MenuItem, ButtonGroup as ButtonGroup$1, Box, TextField, InputAdornment, FormControl, InputLabel, FormHelperText, Select, Checkbox, Link as Link$1, ListItemText as ListItemText$1, IconButton as IconButton$1, ToggleButtonGroup as ToggleButtonGroup$1, Stack, Autocomplete as Autocomplete$1, Divider, ListItemIcon as ListItemIcon$1, createFilterOptions, alpha, useTheme, Toolbar as Toolbar$1, AppBar as AppBar$1, Dialog as Dialog$1, Chip as Chip$1, DialogTitle as DialogTitle$1, DialogContent as DialogContent$1, Fade, AlertTitle, Alert as Alert$2, DialogActions as DialogActions$1, Slide, Accordion, AccordionSummary, AccordionDetails, Avatar as Avatar$1, Menu as Menu$2, useMediaQuery, Portal, Snackbar as Snackbar$1, List as List$2, ListItemButton as ListItemButton$1, ListItem as ListItem$1, ListSubheader as ListSubheader$1, Popover } from "@mui/material";
 import { ListItemAvatar, ListItemSecondaryAction } from "@mui/material";
-import { T as Typography, I as ICON_SIZE_SMALL, a as ICON_SIZE_MEDIUM, M as MENU_ITEM_SIZE_EXTENDED, b as MENU_ITEM_SIZE_DEFAULT, c as MENU_LIST_MAX_SIZE, d as MENU_ITEM_SIZE_DENSE, A as APPBAR_SIZE, e as ICON_SIZE_LARGE, N as NOTIFICATION_DURATION_IN_MS, L as LIST_MAX_SIZE, f as LIST_ITEM_SIZE_DENSE, g as LIST_ITEM_SIZE_DEFAULT, h as LIST_OVERSCAN_ITEMS_COUNT, F as FontWeight, r as resolvePalettePath } from "../palette-utils-nq8gri_k.js";
-import { OpenInNewOutlined, VisibilityOffOutlined, VisibilityOutlined, Cancel, ContentCopyOutlined, AddCircleOutlineOutlined, MenuOutlined, MoreVertOutlined, HelpOutline, ErrorOutline, ArrowBackOutlined, CloseOutlined, Check, TodayOutlined, StopCircleOutlined, ArrowUpwardOutlined } from "@mui/icons-material";
+import { T as Typography, I as ICON_SIZE_SMALL, m as mergeSx, a as ICON_SIZE_MEDIUM, i as isPalettePath, M as MENU_ITEM_SIZE_EXTENDED, b as MENU_ITEM_SIZE_DEFAULT, c as MENU_LIST_MAX_SIZE, d as MENU_ITEM_SIZE_DENSE, A as APPBAR_SIZE, e as ICON_SIZE_LARGE, N as NOTIFICATION_DURATION_IN_MS, L as LIST_MAX_SIZE, f as LIST_ITEM_SIZE_DENSE, g as LIST_ITEM_SIZE_DEFAULT, h as LIST_OVERSCAN_ITEMS_COUNT, F as FontWeight, r as resolvePalettePath } from "../palette-utils-CGE9j8_H.js";
+import { OpenInNewOutlined, VisibilityOffOutlined, VisibilityOutlined, Cancel, ContentCopyOutlined, AddCircleOutlineOutlined, MenuOutlined, MoreVertOutlined, HelpOutlineOutlined, ErrorOutlineOutlined, ArrowBackOutlined, CloseOutlined, Check, TodayOutlined, StopCircleOutlined, ArrowUpwardOutlined } from "@mui/icons-material";
 import { F as ForwardedComponent$1 } from "../ArrowDown-Bho9Ssnw.js";
 import * as ReactWindow from "react-window";
-import { u as useTranslationWithFallback, I as IconButton, M as MenuItem$1, g as getThemeColor, e as ellipsisStyles, S as SVG_SELECTOR } from "../TablePaginationActions-DQx-xT-a.js";
-import { T } from "../TablePaginationActions-DQx-xT-a.js";
+import { u as useTranslationWithFallback, I as IconButton, M as MenuItem$1, g as getThemeColor, e as ellipsisStyles, S as SVG_SELECTOR } from "../utils-ti8hgJ5Q.js";
+import { T } from "../utils-ti8hgJ5Q.js";
 import { F as ForwardedComponent, a as ForwardedComponent$2, b as ForwardedComponent$3, c as ForwardedComponent$4 } from "../Search-DXfTNnxj.js";
 import "cartocolor";
 import { Controlled, UnControlled } from "react-codemirror2";
@@ -40,7 +40,7 @@ import { DatePicker as DatePicker$1 } from "@mui/x-date-pickers/DatePicker";
 import { useIntl } from "react-intl";
 import { u as useImperativeIntl } from "../useImperativeIntl-DXeh_Eda.js";
 import { DateCalendar } from "@mui/x-date-pickers/DateCalendar";
-import { PickersDay as PickersDay$1 } from "@mui/x-date-pickers";
+import { PickerDay as PickerDay$1 } from "@mui/x-date-pickers";
 import { DateTimePicker as DateTimePicker$1 } from "@mui/x-date-pickers/DateTimePicker";
 import { TimePicker as TimePicker$1 } from "@mui/x-date-pickers/TimePicker";
 import DOMPurify from "dompurify";
@@ -55,20 +55,7 @@ const ScreenReaderOnly = styled("span")(() => ({
   whiteSpace: "nowrap",
   border: 0
 }));
-const IndicatorIcon = styled(Box)({
-  position: "absolute",
-  top: 0,
-  left: 0,
-  right: 0,
-  bottom: 0,
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center"
-});
-const HiddenText = styled(Box)({
-  visibility: "hidden",
-  pointerEvents: "none"
-});
+const loadingIndicator = /* @__PURE__ */ jsx(CircularProgress$1, { size: 18, color: "inherit" });
 function _Button({
   children,
   loading,
@@ -86,46 +73,17 @@ function _Button({
     "c4r.button.opensInNewTab",
     screenReaderText
   );
-  const defaultIconLoader = /* @__PURE__ */ jsx(CircularProgress$1, { size: 18, color: "inherit" });
-  const isDefaultLoading = loading && loadingPosition === void 0;
   const isExternalLink = otherProps.href && external;
-  const renderContent = () => {
-    if (isDefaultLoading) {
-      return /* @__PURE__ */ jsxs(Box, { sx: { position: "relative" }, children: [
-        /* @__PURE__ */ jsx(IndicatorIcon, { children: defaultIconLoader }),
-        /* @__PURE__ */ jsx(HiddenText, { children })
-      ] });
-    }
-    if (isExternalLink) {
-      return /* @__PURE__ */ jsxs(Fragment, { children: [
-        children,
-        /* @__PURE__ */ jsx(ScreenReaderOnly, { id: "external-hint", children: screenReaderTextValue })
-      ] });
-    }
-    return children;
-  };
-  const getIconForPosition = (position) => {
-    if (isDefaultLoading) {
-      return void 0;
-    }
-    if (loading && loadingPosition !== void 0) {
-      if (loadingPosition === position) {
-        return defaultIconLoader;
-      }
-      return void 0;
-    }
-    if (position === "start") {
-      return startIcon;
-    } else {
-      return endIcon || (isExternalLink && showExternalIcon ? /* @__PURE__ */ jsx(OpenInNewOutlined, {}) : void 0);
-    }
-  };
+  const isCenterLoading = loading && loadingPosition === void 0;
   return /* @__PURE__ */ jsx(
     Button$1,
     {
-      disabled: loading || disabled,
-      startIcon: getIconForPosition("start"),
-      endIcon: getIconForPosition("end"),
+      loading,
+      loadingPosition,
+      loadingIndicator,
+      disabled,
+      startIcon: loading ? void 0 : startIcon,
+      endIcon: loading ? void 0 : endIcon || (isExternalLink && showExternalIcon ? /* @__PURE__ */ jsx(OpenInNewOutlined, {}) : void 0),
       ...otherProps,
       role: otherProps.href ? "link" : "button",
       ...isExternalLink && {
@@ -134,11 +92,25 @@ function _Button({
       },
       ref,
       "aria-describedby": isExternalLink ? "external-hint" : ariaDescribedby,
-      children: /* @__PURE__ */ jsx(Typography, { variant: "inherit", color: "inherit", noWrap: true, component: "span", children: renderContent() })
+      children: /* @__PURE__ */ jsxs(
+        Typography,
+        {
+          variant: "inherit",
+          color: "inherit",
+          noWrap: true,
+          component: "span",
+          sx: isCenterLoading ? { visibility: "hidden" } : void 0,
+          children: [
+            children,
+            isExternalLink && /* @__PURE__ */ jsx(ScreenReaderOnly, { id: "external-hint", children: screenReaderTextValue })
+          ]
+        }
+      )
     }
   );
 }
 const Button = forwardRef(_Button);
+Button.displayName = "Button";
 const idCounter = {};
 function uniqueId(prefix = "$lodash$") {
   if (!idCounter[prefix]) {
@@ -339,11 +311,11 @@ function _LabelWithIndicator({
 }
 const LabelWithIndicator = forwardRef(_LabelWithIndicator);
 function _PasswordField({
-  InputProps,
   size = "small",
   disabled,
   showPasswordText,
   hidePasswordText,
+  slotProps,
   ...otherProps
 }, ref) {
   const showPasswordLabel = useTranslationWithFallback(
@@ -357,6 +329,38 @@ function _PasswordField({
   const [showPassword, setShowPassword] = useState(false);
   const handleClickShowPassword = () => setShowPassword(!showPassword);
   const label = showPassword ? hidePasswordLabel : showPasswordLabel;
+  const consumerInput = slotProps == null ? void 0 : slotProps.input;
+  const consumerHtmlInput = slotProps == null ? void 0 : slotProps.htmlInput;
+  const buildInputSlotProps = ({
+    input,
+    htmlInput
+  }) => ({
+    ...input,
+    inputProps: {
+      ...htmlInput,
+      ...input == null ? void 0 : input.inputProps,
+      role: "textbox"
+    },
+    endAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        size,
+        disabled,
+        onClick: handleClickShowPassword,
+        icon: showPassword ? /* @__PURE__ */ jsx(VisibilityOffOutlined, {}) : /* @__PURE__ */ jsx(VisibilityOutlined, {}),
+        tooltip: label,
+        "aria-label": label
+      }
+    ) })
+  });
+  const resolve = (value, ownerState) => typeof value === "function" ? value(ownerState) : value;
+  const inputSlotProps = typeof consumerInput === "function" || typeof consumerHtmlInput === "function" ? (ownerState) => buildInputSlotProps({
+    input: resolve(consumerInput, ownerState),
+    htmlInput: resolve(consumerHtmlInput, ownerState)
+  }) : buildInputSlotProps({
+    input: consumerInput,
+    htmlInput: consumerHtmlInput
+  });
   return /* @__PURE__ */ jsx(
     TextField,
     {
@@ -365,25 +369,11 @@ function _PasswordField({
       type: showPassword ? "text" : "password",
       size,
       disabled,
-      InputProps: {
-        ...InputProps,
-        inputProps: {
-          ...InputProps == null ? void 0 : InputProps.inputProps,
-          role: "textbox"
-        },
-        endAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
-          IconButton,
-          {
-            size,
-            disabled,
-            onClick: handleClickShowPassword,
-            icon: showPassword ? /* @__PURE__ */ jsx(VisibilityOffOutlined, {}) : /* @__PURE__ */ jsx(VisibilityOutlined, {}),
-            tooltip: label,
-            "aria-label": label
-          }
-        ) })
-      },
-      "data-name": "password-field"
+      "data-name": "password-field",
+      slotProps: {
+        ...slotProps,
+        input: inputSlotProps
+      }
     }
   );
 }
@@ -395,7 +385,7 @@ const StyledSelect = styled(Select)(({ theme }) => ({
       paddingLeft: theme.spacing(1.5)
     }
   },
-  "& .MuiInputBase-inputAdornedStart": {
+  "&.MuiInputBase-adornedStart > .MuiInputBase-input": {
     paddingLeft: "0px !important"
   },
   "& .MuiSelect-select .MuiMenuItem-root:hover": {
@@ -426,11 +416,16 @@ function _SelectField({
   fullWidth,
   required,
   "aria-label": ariaLabel,
+  SelectDisplayProps,
   ...otherProps
 }, ref) {
   const isSmall = size === "small";
   const [defaultId] = useState(() => uniqueId("select-label-"));
   const ariaLabelledBy = label ? labelId ?? defaultId : void 0;
+  const [fallbackDisplayId] = useState(() => uniqueId("select-value-"));
+  const displayId = (SelectDisplayProps == null ? void 0 : SelectDisplayProps.id) ?? (name ? `mui-component-select-${name}` : fallbackDisplayId);
+  const isUnnamed = !ariaLabelledBy && !ariaLabel;
+  const selfLabelProps = isUnnamed ? { id: displayId, "aria-labelledby": displayId } : void 0;
   return /* @__PURE__ */ jsxs(
     FormControl,
     {
@@ -443,23 +438,49 @@ function _SelectField({
       "data-name": "select-field",
       "data-size": size,
       children: [
-        /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", children: [
-          label && /* @__PURE__ */ jsx(InputLabel, { shrink: true, id: ariaLabelledBy, children: label }),
-          labelSecondary && /* @__PURE__ */ jsx(Box, { display: "flex", alignItems: "center", ml: 2, mb: 0.5, children: labelSecondary })
-        ] }),
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between"
+            },
+            children: [
+              label && /* @__PURE__ */ jsx(InputLabel, { shrink: true, id: ariaLabelledBy, children: label }),
+              labelSecondary && /* @__PURE__ */ jsx(
+                Box,
+                {
+                  sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    ml: 2,
+                    mb: 0.5
+                  },
+                  children: labelSecondary
+                }
+              )
+            ]
+          }
+        ),
         /* @__PURE__ */ jsxs(
           StyledSelect,
           {
             ...otherProps,
             labelId: ariaLabelledBy,
             name,
+            SelectDisplayProps: { ...selfLabelProps, ...SelectDisplayProps },
             ref,
             size,
             fullWidth,
             displayEmpty: displayEmpty ?? !!placeholder,
             inputProps: {
               ...inputProps,
-              "aria-label": ariaLabel
+              // Written only when set: an unconditional key means an *absent*
+              // `aria-label` prop overwrites one the caller put in `inputProps`.
+              // When both are given the dedicated prop still wins — it is the
+              // documented API, and that ranking is unchanged.
+              ...ariaLabel !== void 0 && { "aria-label": ariaLabel }
             },
             MenuProps: {
               ...menuProps,
@@ -480,7 +501,7 @@ function _SelectField({
                 Typography,
                 {
                   variant: isSmall ? "body2" : "body1",
-                  color: "text.hint",
+                  color: "textHint",
                   component: "span",
                   children: placeholder
                 }
@@ -634,7 +655,9 @@ const UnselectButton = styled(InputAdornment, {
 })(({ theme, size }) => ({
   display: "none",
   position: "absolute",
-  top: theme.spacing(2),
+  // Center vertically regardless of the input's height.
+  top: "50%",
+  transform: "translateY(-50%)",
   right: theme.spacing(3.5),
   ".MuiInputBase-root:hover &, .MuiInputBase-root.Mui-focused &": {
     display: "flex"
@@ -643,7 +666,6 @@ const UnselectButton = styled(InputAdornment, {
     color: theme.palette.text.hint
   },
   ...size === "medium" && {
-    top: theme.spacing(3),
     right: theme.spacing(5)
   }
 }));
@@ -716,7 +738,7 @@ function _MultipleSelectField({
         return { content: currentOptions.join(", ") };
       }
       return {
-        color: "text.hint",
+        color: "textHint",
         content: placeholder ?? noneSelectedLabel
       };
     })();
@@ -726,7 +748,9 @@ function _MultipleSelectField({
         component: "span",
         variant: isSmall ? "body2" : "body1",
         color,
-        ml: paddingSize,
+        sx: {
+          ml: paddingSize
+        },
         children: content
       }
     );
@@ -759,10 +783,12 @@ function _MultipleSelectField({
       variant,
       endAdornment: showFilters && areAnySelected && /* @__PURE__ */ jsx(UnselectButton, { position: "end", size, children: /* @__PURE__ */ jsx(IconButton$1, { onClick: unselectAll, size, children: /* @__PURE__ */ jsx(Cancel, {}) }) }),
       menuProps: {
-        PaperProps: {
-          sx: {
-            ".MuiList-root": {
-              paddingTop: 0
+        slotProps: {
+          paper: {
+            sx: {
+              ".MuiList-root": {
+                paddingTop: 0
+              }
             }
           }
         }
@@ -855,8 +881,12 @@ function _ToggleButtonGroup({
   );
 }
 const ToggleButtonGroup = forwardRef(_ToggleButtonGroup);
-const StyledLink = styled(Link$1)(() => ({
-  display: "inline-block"
+const StyledLink = styled(Link$1)(({ theme }) => ({
+  display: "inline-block",
+  // Meridian's default weight. Kept here rather than in the MuiLink theme key,
+  // which would also restyle raw MUI Links, and out of `sx` so a consumer's
+  // `sx`/`className` can still win.
+  fontWeight: theme.typography.fontWeightMedium
 }));
 const Icon = styled("span", {
   shouldForwardProp: (prop) => prop !== "variant" && prop !== "iconPosition"
@@ -907,7 +937,7 @@ function _Link({
   external,
   showExternalIcon = true,
   screenReaderText,
-  fontWeight = 500,
+  fontWeight,
   target,
   rel,
   "aria-describedby": ariaDescribedby,
@@ -918,16 +948,24 @@ function _Link({
     screenReaderText
   );
   const isButtonLink = otherProps.component === "button";
+  const { sx: consumerSx } = otherProps;
+  const usesPalettePath = isPalettePath(color);
   return /* @__PURE__ */ jsxs(
     StyledLink,
     {
       ...otherProps,
       variant,
-      fontWeight,
-      "data-color": color,
+      sx: mergeSx({
+        own: [
+          fontWeight !== void 0 && { fontWeight },
+          usesPalettePath && { color }
+        ],
+        consumer: consumerSx
+      }),
+      "data-color": usesPalettePath ? void 0 : color,
       "data-name": isButtonLink ? "button-link" : "link",
       role: isButtonLink ? "button" : "link",
-      color,
+      color: usesPalettePath ? void 0 : color,
       ref,
       target: external ? "_blank" : target,
       rel: external ? "noopener noreferrer" : rel,
@@ -942,6 +980,7 @@ function _Link({
   );
 }
 const Link = forwardRef(_Link);
+Link.displayName = "Link";
 function _CircularProgress({
   color = "primary",
   size = 40,
@@ -1011,28 +1050,37 @@ function _Loader({
             "aria-labelledby": hasAnyLabel ? "loader-label" : void 0
           }
         ),
-        hasAnyLabel && /* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "center", children: [
-          labelText && /* @__PURE__ */ jsx(
-            Typography,
-            {
-              variant: "body2",
-              color: "textSecondary",
-              ...labelProps,
-              id: "loader-label",
-              children: labelText
-            }
-          ),
-          secondLabel && /* @__PURE__ */ jsx(
-            Typography,
-            {
-              variant: "caption",
-              color: "textSecondary",
-              ...secondLabelProps,
-              id: labelText ? void 0 : "loader-label",
-              children: secondLabel
-            }
-          )
-        ] })
+        hasAnyLabel && /* @__PURE__ */ jsxs(
+          Stack,
+          {
+            direction: "column",
+            sx: {
+              alignItems: "center"
+            },
+            children: [
+              labelText && /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  variant: "body2",
+                  color: "textSecondary",
+                  ...labelProps,
+                  id: "loader-label",
+                  children: labelText
+                }
+              ),
+              secondLabel && /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  variant: "caption",
+                  color: "textSecondary",
+                  ...secondLabelProps,
+                  id: labelText ? void 0 : "loader-label",
+                  children: secondLabel
+                }
+              )
+            ]
+          }
+        )
       ]
     }
   );
@@ -1138,6 +1186,19 @@ const _CopiableComponent = ({
   ] });
 };
 const CopiableComponent = forwardRef(_CopiableComponent);
+function mergeSlotProps({
+  ownProps,
+  consumerProps
+}) {
+  if (typeof consumerProps === "function") {
+    const resolveConsumerProps = consumerProps;
+    return (ownerState) => ({
+      ...ownProps,
+      ...resolveConsumerProps(ownerState)
+    });
+  }
+  return { ...ownProps, ...consumerProps };
+}
 const StyledTextField = styled(TextField, {
   shouldForwardProp: (prop) => !["isInputFocused"].includes(prop)
 })(({ isInputFocused }) => ({
@@ -1167,7 +1228,7 @@ const AdornmentWrapper = styled(Box, {
 function _CopiableInputText({
   value,
   variant,
-  InputProps,
+  slotProps,
   extraEndAdornment,
   onCopied,
   password,
@@ -1217,28 +1278,33 @@ function _CopiableInputText({
       size,
       value,
       variant,
-      InputProps: {
-        readOnly: true,
-        onFocus: handleFocus,
-        onBlur: handleBlur,
-        endAdornment: /* @__PURE__ */ jsxs(Fragment, { children: [
-          password ? passwordAdornment : extraEndAdornment,
-          /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(AdornmentWrapper, { size, variant, children: /* @__PURE__ */ jsx(
-            CopiableComponent,
-            {
-              value,
-              onCopied,
-              button: true,
-              buttonProps: {
-                size
-              }
+      slotProps: {
+        ...slotProps,
+        input: mergeSlotProps({
+          ownProps: {
+            readOnly: true,
+            onFocus: handleFocus,
+            onBlur: handleBlur,
+            endAdornment: /* @__PURE__ */ jsxs(Fragment, { children: [
+              password ? passwordAdornment : extraEndAdornment,
+              /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(AdornmentWrapper, { size, variant, children: /* @__PURE__ */ jsx(
+                CopiableComponent,
+                {
+                  value,
+                  onCopied,
+                  button: true,
+                  buttonProps: {
+                    size
+                  }
+                }
+              ) }) })
+            ] }),
+            ...variant === "filled" && {
+              disableUnderline: true
             }
-          ) }) })
-        ] }),
-        ...variant === "filled" && {
-          disableUnderline: true
-        },
-        ...InputProps
+          },
+          consumerProps: slotProps == null ? void 0 : slotProps.input
+        })
       },
       type: inputType,
       "data-name": "copiable-input-text",
@@ -1248,13 +1314,19 @@ function _CopiableInputText({
 }
 const CopiableInputText = forwardRef(_CopiableInputText);
 const { FixedSizeList: FixedSizeList$1 } = ReactWindow;
-const List$1 = styled("ul")(
-  ({ theme, hasFilters }) => ({
-    ...!hasFilters && {
-      paddingTop: `${theme.spacing(1)} !important`
-    }
-  })
-);
+const List$1 = styled(MenuList$1, {
+  // MenuList is a component, so emotion forwards every prop to it (unlike a
+  // string tag, where invalid HTML attributes are dropped) — `hasFilters` would
+  // reach the underlying <ul>. `ownerState`/`theme`/`sx`/`as` mirror MUI's own
+  // `slotShouldForwardProp`, which a custom `shouldForwardProp` replaces rather
+  // than extends: as Autocomplete's `listbox` slot this receives the
+  // Autocomplete's ownerState, which must not reach MenuList.
+  shouldForwardProp: (prop) => !["ownerState", "theme", "sx", "as", "hasFilters"].includes(prop)
+})(({ theme, hasFilters }) => ({
+  ...!hasFilters && {
+    paddingTop: `${theme.spacing(1)} !important`
+  }
+}));
 const ItemWrapper = styled("div")(({ style, theme, isSubtitle, isExtended, isMultiple }) => {
   const getSubtitleStyles = () => {
     const baseStyles = {
@@ -1276,9 +1348,15 @@ const ItemWrapper = styled("div")(({ style, theme, isSubtitle, isExtended, isMul
   return {
     pointerEvents: "none",
     // To avoid the extra div to receive the click event
+    // Whatever the row renders as must take the click back. Scoping this to
+    // `.MuiMenuItem-root` only worked when a `renderOption` produced a Meridian
+    // MenuItem; the documented bare usage (`slots={{ listbox: AutocompleteList }}`
+    // with no renderOption) leaves MUI's own `.MuiAutocomplete-option`, which
+    // then inherited `pointer-events: none` and could not be clicked.
+    "& > *": {
+      pointerEvents: "auto"
+    },
     "& .MuiMenuItem-root": {
-      pointerEvents: "auto",
-      // Allow pointer events for the menu item
       marginTop: 0,
       "&:first-of-type": {
         marginTop: "0 !important"
@@ -1433,10 +1511,11 @@ function createCounterRenderTags({
   getOptionLabel = getDefaultOptionLabel
 }) {
   const CounterRenderTags = (value) => {
-    if (value.length === 0) {
+    const selectedItems = Array.isArray(value) ? value : value == null ? [] : [value];
+    if (selectedItems.length === 0) {
       return null;
     }
-    const selectedCount = value.length;
+    const selectedCount = selectedItems.length;
     const selectableOptions = options.filter(
       (option) => !isAutocompleteListGroupHeader(option)
     );
@@ -1444,7 +1523,7 @@ function createCounterRenderTags({
     const text = formatCounter({
       selectedCount,
       totalCount,
-      selectedItems: value,
+      selectedItems,
       allItems: selectableOptions,
       getOptionLabel
     });
@@ -1523,9 +1602,11 @@ const warnDeprecatedGroupBy = /* @__PURE__ */ (() => {
 function _Autocomplete({
   disabled,
   loading,
+  slots,
+  slotProps,
   ...props
 }, ref) {
-  if (props.groupBy && props.ListboxComponent === AutocompleteList) {
+  if (props.groupBy && (slots == null ? void 0 : slots.listbox) === AutocompleteList) {
     warnDeprecatedGroupBy("Autocomplete");
   }
   return /* @__PURE__ */ jsx(
@@ -1536,9 +1617,20 @@ function _Autocomplete({
       disabled: disabled || loading,
       popupIcon: loading ? /* @__PURE__ */ jsx(CircularProgress$1, { size: 18, color: "inherit" }) : /* @__PURE__ */ jsx(ForwardedComponent$1, {}),
       "data-name": "autocomplete",
-      ListboxProps: {
-        "aria-multiselectable": false,
-        ...props.ListboxProps
+      slots,
+      slotProps: {
+        ...slotProps,
+        listbox: mergeSlotProps({
+          ownProps: {
+            "aria-multiselectable": false,
+            component: MenuList$1
+            // `useAutocomplete`'s `singleRenderOption` emits Meridian MenuItems,
+            // and on v9 a MenuItem throws without a MenuListContext. Set through
+            // `component` rather than `slots.listbox`: swapping the slot would
+            // drop the listbox's own styles (max-height/overflow) with it.
+          },
+          consumerProps: slotProps == null ? void 0 : slotProps.listbox
+        })
       }
     }
   );
@@ -1816,11 +1908,12 @@ function _CreatableAutocomplete({
   value,
   onChange,
   getLimitTagsText,
-  renderTags,
+  renderValue,
   itemHeight,
   maxListHeight,
   extended,
   groupBy,
+  slotProps,
   ...props
 }, ref) {
   if (groupBy) {
@@ -1870,7 +1963,7 @@ function _CreatableAutocomplete({
     extended,
     selectAllText
   };
-  const finalRenderTags = showCounter && multiple && !renderTags ? getCounterRenderTags() : renderTags;
+  const finalRenderValue = showCounter && multiple && !renderValue ? getCounterRenderTags() : renderValue;
   return /* @__PURE__ */ jsx(
     Autocomplete$1,
     {
@@ -1883,17 +1976,25 @@ function _CreatableAutocomplete({
       getOptionLabel: creatableOptionLabel,
       renderOption: creatableRenderOption,
       getOptionDisabled: isOptionDisabled,
-      renderTags: finalRenderTags,
+      renderValue: finalRenderValue,
       freeSolo,
       forcePopupIcon: true,
       multiple,
       disableCloseOnSelect: disableCloseOnSelect ?? multiple,
-      ListboxComponent: AutocompleteList,
-      ListboxProps: listboxProps,
       getLimitTagsText: getLimitTagsText ?? getDefaultLimitTagsText,
       disabled: disabled || loading,
       popupIcon: loading ? /* @__PURE__ */ jsx(CircularProgress$1, { size: 18, color: "inherit" }) : /* @__PURE__ */ jsx(ForwardedComponent$1, {}),
-      "data-name": "creatable-autocomplete"
+      "data-name": "creatable-autocomplete",
+      slotProps: {
+        ...slotProps,
+        listbox: mergeSlotProps({
+          ownProps: {
+            component: AutocompleteList,
+            ...listboxProps
+          },
+          consumerProps: slotProps == null ? void 0 : slotProps.listbox
+        })
+      }
     }
   );
 }
@@ -1914,11 +2015,12 @@ function _MultipleAutocomplete({
   onChange,
   getOptionLabel,
   getLimitTagsText,
-  renderTags,
+  renderValue,
   itemHeight,
   maxListHeight,
   extended,
   groupBy,
+  slotProps,
   ...props
 }, ref) {
   if (groupBy) {
@@ -1953,7 +2055,7 @@ function _MultipleAutocomplete({
     extended,
     selectAllText
   };
-  const finalRenderTags = showCounter && !renderTags ? getCounterRenderTags() : renderTags;
+  const finalRenderValue = showCounter && !renderValue ? getCounterRenderTags() : renderValue;
   return /* @__PURE__ */ jsx(
     Autocomplete$1,
     {
@@ -1964,15 +2066,23 @@ function _MultipleAutocomplete({
       onChange: handleChange,
       getOptionLabel,
       renderOption: renderOption ?? multipleRenderOption,
-      renderTags: finalRenderTags,
-      ListboxComponent: AutocompleteList,
-      ListboxProps: listboxProps,
+      renderValue: finalRenderValue,
       multiple: true,
       getLimitTagsText: getLimitTagsText ?? getDefaultLimitTagsText,
       disableCloseOnSelect,
       disabled: disabled || loading,
       popupIcon: loading ? /* @__PURE__ */ jsx(CircularProgress$1, { size: 18, color: "inherit" }) : /* @__PURE__ */ jsx(ForwardedComponent$1, {}),
-      "data-name": "multiple-autocomplete"
+      "data-name": "multiple-autocomplete",
+      slotProps: {
+        ...slotProps,
+        listbox: mergeSlotProps({
+          ownProps: {
+            component: AutocompleteList,
+            ...listboxProps
+          },
+          consumerProps: slotProps == null ? void 0 : slotProps.listbox
+        })
+      }
     }
   );
 }
@@ -2294,10 +2404,12 @@ function CodeAreaHeader({
             open,
             onClose: closeDropdown,
             id: "menu",
-            MenuListProps: { "aria-labelledby": "menu-button" },
             "aria-label": "Code area actions",
             transformOrigin: { vertical: "top", horizontal: "right" },
             anchorOrigin: { vertical: "bottom", horizontal: "right" },
+            slotProps: {
+              list: { "aria-labelledby": "menu-button" }
+            },
             children: [
               /* @__PURE__ */ jsxs(MenuItem$1, { onClick: handleCopy, disabled, id: "copy", children: [
                 /* @__PURE__ */ jsx(ListItemIcon$1, { children: /* @__PURE__ */ jsx(ContentCopyOutlined, {}) }),
@@ -2961,7 +3073,7 @@ const InputWrapper$1 = styled(Box, {
     }
   }
 }));
-const HelpIcon = styled(HelpOutline)(({ theme }) => ({
+const HelpIcon = styled(HelpOutlineOutlined)(({ theme }) => ({
   width: ICON_SIZE_SMALL,
   height: ICON_SIZE_SMALL,
   fill: theme.palette.text.secondary
@@ -3149,7 +3261,7 @@ function CodeAreaDialogError({
   if (!children) return null;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(ErrorWrapper, { children: /* @__PURE__ */ jsxs(ErrorContent, { children: [
-      /* @__PURE__ */ jsx(ErrorOutline, { htmlColor: theme.palette.error.main }),
+      /* @__PURE__ */ jsx(ErrorOutlineOutlined, { htmlColor: theme.palette.error.main }),
       /* @__PURE__ */ jsx(FormHelperText, { error: true, children })
     ] }) }),
     hasDivider && /* @__PURE__ */ jsx(Divider, {})
@@ -3206,7 +3318,25 @@ const dialogDimensionsBySize = {
   }
 };
 const DialogPaper = styled(Paper, {
-  shouldForwardProp: (prop) => !["fullScreen", "height", "width", "hasForm"].includes(prop)
+  // `as` must stay with emotion: MUI renders the paper slot as
+  // `<PaperSlot as={Paper} …>`, so forwarding `as` to Paper shadows a
+  // consumer's `slotProps.paper.component` and a form dialog renders a div.
+  //
+  // `ownerState`/`theme`/`sx` mirror MUI's own `slotShouldForwardProp`, which a
+  // custom `shouldForwardProp` replaces rather than extends. As the Dialog's
+  // `paper` slot this receives the *Dialog's* ownerState; Paper spreads it over
+  // its own, so `variant: 'elevation'` stops matching and neither the elevation
+  // shadow nor the `outlined` border is emitted.
+  shouldForwardProp: (prop) => ![
+    "ownerState",
+    "theme",
+    "sx",
+    "as",
+    "fullScreen",
+    "height",
+    "width",
+    "hasForm"
+  ].includes(prop)
 })(
   ({
     fullScreen,
@@ -3218,6 +3348,16 @@ const DialogPaper = styled(Paper, {
   }) => ({
     "&.MuiPaper-root": {
       position: "relative",
+      // MUI's Dialog paper styles are replaced, not composed, once this is the
+      // `paper` slot — so carry the ones consumers depend on. Without
+      // `overflowY` a fullScreen dialog cannot scroll and overflowing content is
+      // unreachable.
+      overflowY: "auto",
+      outline: 0,
+      "@media print": {
+        overflowY: "visible",
+        boxShadow: "none"
+      },
       display: "flex",
       flexDirection: "column",
       margin: theme.spacing(5),
@@ -3305,20 +3445,31 @@ const DialogPaper = styled(Paper, {
     }
   })
 );
+function splitSurfaceAttributes({ props }) {
+  const surfaceAttributes = {};
+  const rootProps = {};
+  for (const [key, value] of Object.entries(props)) {
+    const target = key.startsWith("data-") ? surfaceAttributes : rootProps;
+    target[key] = value;
+  }
+  return { surfaceAttributes, rootProps };
+}
 function _Dialog({
   nonModal,
   children,
   size = "small",
-  PaperProps,
   fullScreen,
   height,
   width,
   hasForm,
   "aria-label": ariaLabel,
   "data-testid": dataTestId,
+  slots,
+  slotProps,
   ...props
 }, ref) {
   if (nonModal) {
+    const nonModalPaperProps = typeof (slotProps == null ? void 0 : slotProps.paper) === "function" ? void 0 : slotProps == null ? void 0 : slotProps.paper;
     return /* @__PURE__ */ jsx(
       DialogPaper,
       {
@@ -3331,32 +3482,46 @@ function _Dialog({
         "data-testid": dataTestId,
         "data-name": "dialog",
         ...props,
+        ...nonModalPaperProps,
         ref,
         children
       }
     );
   }
+  const { surfaceAttributes, rootProps } = splitSurfaceAttributes({ props });
+  const paperProps = {
+    "data-name": "dialog",
+    "data-size": size,
+    ...width && { "data-width": width },
+    ...height && { "data-height": height },
+    size,
+    fullScreen,
+    height,
+    width,
+    hasForm,
+    ...dataTestId && { "data-testid": dataTestId },
+    // Standard accname precedence is kept deliberately: `aria-labelledby` wins
+    // over this when a DialogHeader title renders. Consumers pass `aria-label`
+    // as a test hook often enough that making it authoritative would rename
+    // titled dialogs after the hook.
+    ...ariaLabel && { "aria-label": ariaLabel },
+    // Consumer-supplied data-* wins over the defaults above, as it did when
+    // they all spread onto the root.
+    ...surfaceAttributes
+  };
   return /* @__PURE__ */ jsx(
     Dialog$1,
     {
-      PaperComponent: DialogPaper,
-      PaperProps: {
-        ...PaperProps,
-        size,
-        fullScreen,
-        height,
-        width,
-        hasForm
+      slots: { ...slots, paper: DialogPaper },
+      slotProps: {
+        ...slotProps,
+        paper: mergeSlotProps({
+          ownProps: paperProps,
+          consumerProps: slotProps == null ? void 0 : slotProps.paper
+        })
       },
       fullScreen,
-      role: "section",
-      "aria-label": ariaLabel,
-      "data-testid": dataTestId,
-      "data-size": size,
-      "data-width": width,
-      "data-height": height,
-      "data-name": "dialog",
-      ...props,
+      ...rootProps,
       ref,
       children
     }
@@ -3416,7 +3581,7 @@ function DialogHeader({
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(DialogTitle, { component: "div", "data-name": "dialog-header", ...otherProps, children: [
       /* @__PURE__ */ jsxs(Main$1, { children: [
-        /* @__PURE__ */ jsxs(ItemsWrapper$1, { flex: 1, maxWidth: 0.8, children: [
+        /* @__PURE__ */ jsxs(ItemsWrapper$1, { sx: { flex: 1, maxWidth: 0.8 }, children: [
           onBack && /* @__PURE__ */ jsx(
             IconButton,
             {
@@ -4303,6 +4468,10 @@ function DatePicker({
     "c4r.form.chooseDate",
     chooseDateAriaLabel
   );
+  const htmlInputProps = {
+    "data-testid": "date-picker-input",
+    placeholder
+  };
   return (
     // Don't remove className, it's used for styling
     /* @__PURE__ */ jsx(Box, { className: "CartoDatePicker-root", "data-testid": "date-picker", children: /* @__PURE__ */ jsx(
@@ -4323,7 +4492,7 @@ function DatePicker({
               {
                 label,
                 type,
-                icon: labelHelpTooltip && /* @__PURE__ */ jsx(Tooltip, { title: labelHelpTooltip, children: /* @__PURE__ */ jsx(HelpOutline, { htmlColor: "text.secondary" }) })
+                icon: labelHelpTooltip && /* @__PURE__ */ jsx(Tooltip, { title: labelHelpTooltip, children: /* @__PURE__ */ jsx(HelpOutlineOutlined, { htmlColor: "text.secondary" }) })
               }
             ),
             slotProps: {
@@ -4331,13 +4500,12 @@ function DatePicker({
               textField: {
                 variant,
                 helperText,
-                placeholder,
                 size,
                 error: error ?? void 0,
                 // undefined is needed to allow the component to control the error state for the default validation
-                inputProps: {
-                  "data-testid": "date-picker-input"
-                }
+                // v9: legacy inputProps/placeholder are dropped on Picker fields;
+                // they live under the textField slot's own slotProps now.
+                slotProps: { htmlInput: htmlInputProps }
               },
               field: {
                 clearable: !!handleClear,
@@ -4358,7 +4526,7 @@ function DatePicker({
     ) })
   );
 }
-const PickersDayWrapper = styled(Box, {
+const PickerDayWrapper = styled(Box, {
   shouldForwardProp: (prop) => ![
     "isSelected",
     "isStartDate",
@@ -4381,7 +4549,7 @@ const PickersDayWrapper = styled(Box, {
   }) => ({
     position: "relative",
     margin: theme.spacing(0.25),
-    "& .MuiPickersDay-root": {
+    "& .MuiPickerDay-root": {
       margin: 0
     },
     // Highlight the selected date range
@@ -4434,7 +4602,7 @@ const PickersDayWrapper = styled(Box, {
           borderRadius: theme.shape.borderRadius
         }
       },
-      "& .MuiPickersDay-today": {
+      "& .MuiPickerDay-today": {
         borderColor: `${theme.palette.default.outlinedBorder} !important`,
         ...(isStartDate || isEndDate) && {
           boxShadow: `0 0 0 1px inset ${theme.palette.background.paper}`
@@ -4461,11 +4629,11 @@ const PickersDayWrapper = styled(Box, {
     }
   })
 );
-const CustomPickersDay = styled(PickersDay$1, {
+const CustomPickerDay = styled(PickerDay$1, {
   shouldForwardProp: (prop) => !["isDateRangeLimit", "isPreview"].includes(prop)
 })(
   ({ theme, isDateRangeLimit, isPreview }) => ({
-    "&.MuiPickersDay-root": {
+    "&.MuiPickerDay-root": {
       position: "relative",
       zIndex: 1,
       "&.Mui-selected": {
@@ -4496,7 +4664,7 @@ const isSameDay = (d1, d2) => {
   if (!d1 || !d2) return false;
   return d1.getFullYear() === d2.getFullYear() && d1.getMonth() === d2.getMonth() && d1.getDate() === d2.getDate();
 };
-function PickersDay({
+function PickerDay({
   day,
   startDate,
   endDate,
@@ -4523,7 +4691,7 @@ function PickersDay({
     selectedMonth && day.getMonth() === selectedMonth.getMonth()
   );
   return /* @__PURE__ */ jsx(
-    PickersDayWrapper,
+    PickerDayWrapper,
     {
       isSelected: isInsideRange,
       isStartDate: isRangeStart,
@@ -4533,7 +4701,7 @@ function PickersDay({
       isFirstDay: isFirstDayOfMonth,
       isPreview,
       children: /* @__PURE__ */ jsx(
-        CustomPickersDay,
+        CustomPickerDay,
         {
           ...otherProps,
           day,
@@ -4551,15 +4719,21 @@ const FieldsWrapper = styled(Box, {
 })(({ variant, theme }) => ({
   display: "flex",
   gap: variant === "standard" ? theme.spacing(1) : "1px",
+  // v9's field is a row of section spans instead of an <input>: an input can
+  // shrink below its content width, spans cannot, so the flex children need
+  // `min-width: 0` or two side-by-side fields overflow their container.
+  "& .CartoDatePicker-root, & .CartoDatePicker-root .MuiFormControl-root": {
+    minWidth: 0
+  },
   "& .CartoDatePicker-root": {
     // Start date field
     "&:first-of-type": {
-      ".MuiInputBase-root": {
+      ".MuiInputBase-root, .MuiPickersInputBase-root": {
         borderRadius: theme.spacing(0.5, 0, 0, 0.5),
         boxShadow: `1px 0 0 0 ${theme.palette.default.outlinedBorder}`,
         ...variant === "outlined" && {
           // Remove border from the right side only in its default state. Nested negation selector to target only specific Mui rules, otherwise it would force us to rewrite the state styles.
-          "&:not(:hover):not(.Mui-focused):not(.Mui-error) .MuiOutlinedInput-notchedOutline": {
+          "&:not(:hover):not(.Mui-focused):not(.Mui-error) .MuiOutlinedInput-notchedOutline, &:not(:hover):not(.Mui-focused):not(.Mui-error) .MuiPickersOutlinedInput-notchedOutline": {
             borderRightColor: "transparent"
           }
         },
@@ -4576,11 +4750,11 @@ const FieldsWrapper = styled(Box, {
     },
     // End date field
     "&:last-of-type": {
-      ".MuiInputBase-root": {
+      ".MuiInputBase-root, .MuiPickersInputBase-root": {
         borderRadius: theme.spacing(0, 0.5, 0.5, 0),
         ...variant === "outlined" && {
           // Remove border from the left side only in its default state
-          "&:not(:hover):not(.Mui-focused):not(.Mui-error) .MuiOutlinedInput-notchedOutline": {
+          "&:not(:hover):not(.Mui-focused):not(.Mui-error) .MuiOutlinedInput-notchedOutline, &:not(:hover):not(.Mui-focused):not(.Mui-error) .MuiPickersOutlinedInput-notchedOutline": {
             borderLeftColor: "transparent"
           }
         },
@@ -4692,7 +4866,7 @@ function DateRangePicker({
               slots: {
                 openPickerIcon: TodayOutlined,
                 day: (props2) => /* @__PURE__ */ jsx(
-                  PickersDay,
+                  PickerDay,
                   {
                     ...props2,
                     startDate,
@@ -4726,7 +4900,7 @@ function DateRangePicker({
               },
               slots: {
                 day: (props2) => /* @__PURE__ */ jsx(
-                  PickersDay,
+                  PickerDay,
                   {
                     ...props2,
                     startDate,
@@ -4826,7 +5000,7 @@ function DateRangeCalendar({
       "aria-label": ariaLabel,
       "data-testid": dataTestId,
       onMouseLeave: () => setHoveredDate(null),
-      sx: isSelectingEnd || isCommitting ? { "& .MuiPickersDay-root": { transition: "none" } } : void 0,
+      sx: isSelectingEnd || isCommitting ? { "& .MuiPickerDay-root": { transition: "none" } } : void 0,
       children: /* @__PURE__ */ jsx(
         DateCalendar,
         {
@@ -4835,7 +5009,7 @@ function DateRangeCalendar({
           value: endDate ?? startDate,
           onChange: handleChange,
           onMonthChange: handleMonthChange,
-          slots: { day: PickersDay, ...slots },
+          slots: { day: PickerDay, ...slots },
           slotProps: {
             ...slotProps,
             // Merge the consumer's day slotProps (ours win on conflict, since
@@ -4917,6 +5091,10 @@ function TimePicker({
       resizeObserver.disconnect();
     };
   }, []);
+  const htmlInputProps = {
+    "data-testid": "time-picker-input",
+    placeholder
+  };
   return /* @__PURE__ */ jsx(
     DateFieldContainer,
     {
@@ -4936,7 +5114,7 @@ function TimePicker({
             {
               label: fieldLabel,
               type,
-              icon: labelHelpTooltip && /* @__PURE__ */ jsx(Tooltip, { title: labelHelpTooltip, children: /* @__PURE__ */ jsx(HelpOutline, { htmlColor: "text.secondary" }) })
+              icon: labelHelpTooltip && /* @__PURE__ */ jsx(Tooltip, { title: labelHelpTooltip, children: /* @__PURE__ */ jsx(HelpOutlineOutlined, { htmlColor: "text.secondary" }) })
             }
           ),
           views: ["hours"],
@@ -4945,13 +5123,12 @@ function TimePicker({
             textField: {
               variant,
               helperText,
-              placeholder,
               size,
               error: error ?? void 0,
               // undefined is needed to allow the component to control the error state for the default validation
-              inputProps: {
-                "data-testid": "time-picker-input"
-              }
+              // v9: legacy inputProps/placeholder are dropped on Picker fields;
+              // they live under the textField slot's own slotProps now.
+              slotProps: { htmlInput: htmlInputProps }
             },
             field: {
               clearable: !!handleClear,
@@ -5014,6 +5191,10 @@ function DateTimePicker({
     "c4r.form.chooseDate",
     openPickerAriaLabel
   );
+  const htmlInputProps = {
+    "data-testid": "date-time-picker-input",
+    placeholder
+  };
   return /* @__PURE__ */ jsx(
     DateFieldContainer,
     {
@@ -5032,7 +5213,7 @@ function DateTimePicker({
             {
               label: fieldLabel,
               type,
-              icon: labelHelpTooltip && /* @__PURE__ */ jsx(Tooltip, { title: labelHelpTooltip, children: /* @__PURE__ */ jsx(HelpOutline, { htmlColor: "text.secondary" }) })
+              icon: labelHelpTooltip && /* @__PURE__ */ jsx(Tooltip, { title: labelHelpTooltip, children: /* @__PURE__ */ jsx(HelpOutlineOutlined, { htmlColor: "text.secondary" }) })
             }
           ),
           views: ["year", "month", "day", "hours"],
@@ -5041,13 +5222,12 @@ function DateTimePicker({
             textField: {
               variant,
               helperText,
-              placeholder,
               size,
               error: error ?? void 0,
               // undefined is needed to allow the component to control the error state for the default validation
-              inputProps: {
-                "data-testid": "date-time-picker-input"
-              }
+              // v9: legacy inputProps/placeholder are dropped on Picker fields;
+              // they live under the textField slot's own slotProps now.
+              slotProps: { htmlInput: htmlInputProps }
             },
             field: {
               clearable: !!handleClear,
@@ -5147,7 +5327,6 @@ function _EmptyState({
     Root$1,
     {
       ref,
-      alignItems: "center",
       size,
       spacing,
       contentHeight,
@@ -5222,7 +5401,7 @@ function TooltipData({
   title
 }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    title && /* @__PURE__ */ jsx(Typography, { color: "inherit", variant: "caption", weight: "medium", children: title }),
+    title && /* @__PURE__ */ jsx(Typography, { variant: "caption", weight: "medium", color: "inherit", children: title }),
     /* @__PURE__ */ jsx(Content$3, { children: items.map((item, index) => /* @__PURE__ */ jsxs(Entry, { children: [
       /* @__PURE__ */ jsx(
         Bullet,
@@ -5236,7 +5415,7 @@ function TooltipData({
         }
       ),
       item.category && /* @__PURE__ */ jsx(Category, { color: "inherit", variant: "caption", children: item.category }),
-      /* @__PURE__ */ jsx(Typography, { color: "inherit", variant: "caption", weight: "medium", children: item.value })
+      /* @__PURE__ */ jsx(Typography, { variant: "caption", weight: "medium", color: "inherit", children: item.value })
     ] }, index)) })
   ] });
 }
@@ -5526,7 +5705,7 @@ const StyledMenu = styled(Menu$2, {
     }
   }
 }));
-function _Menu({ extended, width, height, MenuListProps: MenuListProps2, ...otherProps }, ref) {
+function _Menu({ extended, width, height, slotProps, ...otherProps }, ref) {
   return /* @__PURE__ */ jsx(
     StyledMenu,
     {
@@ -5536,11 +5715,17 @@ function _Menu({ extended, width, height, MenuListProps: MenuListProps2, ...othe
       width,
       height,
       extended,
-      MenuListProps: {
-        ...MenuListProps2,
-        "data-width": width,
-        "data-height": height,
-        "data-extended": extended
+      slotProps: {
+        ...slotProps,
+        // v9 replaced MenuListProps with slotProps.list.
+        list: mergeSlotProps({
+          ownProps: {
+            "data-width": width,
+            "data-height": height,
+            "data-extended": extended
+          },
+          consumerProps: slotProps == null ? void 0 : slotProps.list
+        })
       }
     }
   );
@@ -5639,9 +5824,11 @@ const FilterDropdownMenuItem = ({
           {
             primary: label,
             secondary: description,
-            primaryTypographyProps: {
-              variant: "body2",
-              id: menuItemId
+            slotProps: {
+              primary: {
+                variant: "body2",
+                id: menuItemId
+              }
             }
           }
         ),
@@ -5689,7 +5876,6 @@ function _FilterDropdown({
   buttonProps,
   iconButtonProps,
   slotProps,
-  MenuListProps,
   ...props
 }, ref) {
   const [selected_, setSelected] = useState(defaultValue || void 0);
@@ -5764,16 +5950,19 @@ function _FilterDropdown({
           paper: {
             "data-name": "filter-dropdown",
             ...slotProps == null ? void 0 : slotProps.paper
-          }
-        },
-        MenuListProps: {
-          "aria-labelledby": buttonId,
-          ...dense && {
-            "data-dense": dense
           },
-          autoFocus: true,
-          // To allow keyboard navigation
-          ...MenuListProps
+          // v9 replaced MenuListProps with slotProps.list.
+          list: mergeSlotProps({
+            ownProps: {
+              "aria-labelledby": buttonId,
+              ...dense && {
+                "data-dense": dense
+              },
+              autoFocus: true
+              // To allow keyboard navigation
+            },
+            consumerProps: slotProps == null ? void 0 : slotProps.list
+          })
         },
         children: [
           menuTitle && /* @__PURE__ */ jsx(MenuItem$1, { subtitle: true, children: menuTitle }),
@@ -5939,17 +6128,25 @@ const MessageFieldFooter = ({
         Tooltip,
         {
           title: buttonIsDisabled && !disabled ? typeToSendLabel : void 0,
-          children: /* @__PURE__ */ jsx(Box, { display: "flex", children: /* @__PURE__ */ jsx(
-            Button,
+          children: /* @__PURE__ */ jsx(
+            Box,
             {
-              onClick,
-              variant: "contained",
-              color: "primary",
-              disabled: buttonIsDisabled,
-              size,
-              children: labelButton
+              sx: {
+                display: "flex"
+              },
+              children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  onClick,
+                  variant: "contained",
+                  color: "primary",
+                  disabled: buttonIsDisabled,
+                  size,
+                  children: labelButton
+                }
+              )
             }
-          ) })
+          )
         }
       )
     ] }) })
@@ -5987,6 +6184,7 @@ function _MessageField({
   "aria-label": ariaLabel,
   ...otherProps
 }, ref) {
+  var _a, _b;
   const stopLabel = useTranslationWithFallback("c4r.button.stop", stopText);
   const typeToSendLabel = useTranslationWithFallback(
     "c4r.button.typeToSend",
@@ -6058,9 +6256,16 @@ function _MessageField({
                 size,
                 fullWidth,
                 required: validationType === "required",
-                inputProps: { "aria-invalid": !!error },
                 ...otherProps,
                 ...textFieldProps,
+                slotProps: {
+                  ...otherProps.slotProps,
+                  ...textFieldProps == null ? void 0 : textFieldProps.slotProps,
+                  htmlInput: mergeSlotProps({
+                    ownProps: { "aria-invalid": !!error },
+                    consumerProps: ((_a = textFieldProps == null ? void 0 : textFieldProps.slotProps) == null ? void 0 : _a.htmlInput) ?? ((_b = otherProps.slotProps) == null ? void 0 : _b.htmlInput)
+                  })
+                },
                 onKeyDown: handleKeyDown
               }
             ),
@@ -6295,8 +6500,8 @@ function _SearchField({
   variant = "filled",
   size = "small",
   dense = false,
+  slotProps,
   InputProps,
-  inputProps,
   startAdornment,
   endAdornment,
   onFocus,
@@ -6343,36 +6548,47 @@ function _SearchField({
       disabled,
       minimized,
       dense,
-      InputProps: {
-        onFocus: handleFocus,
-        onBlur: handleBlur,
-        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: {
-        role: "searchbox",
-        ...inputProps
+      slotProps: {
+        ...slotProps,
+        input: mergeSlotProps({
+          ownProps: {
+            onFocus: handleFocus,
+            onBlur: handleBlur,
+            startAdornment: /* @__PURE__ */ jsx(
+              SearchFieldStartAdornment,
+              {
+                minimized,
+                loading,
+                disabled,
+                startAdornment
+              }
+            ),
+            endAdornment: !minimized && /* @__PURE__ */ jsx(
+              SearchFieldEndAdornment,
+              {
+                disabled,
+                loading,
+                showClearButton: clearButtonVisibility,
+                clearButton,
+                clearButtonLabel: clearButtonLabelValue,
+                onClear: handleClear,
+                size,
+                endAdornment
+              }
+            )
+          },
+          // The deprecated `InputProps` feeds the same slot, ranked below
+          // `slotProps.input` so the modern form wins. Without this it rode
+          // `otherProps` onto the DOM once v9 stopped accepting it on TextField.
+          consumerProps: mergeSlotProps({
+            ownProps: InputProps ?? {},
+            consumerProps: slotProps == null ? void 0 : slotProps.input
+          })
+        }),
+        htmlInput: mergeSlotProps({
+          ownProps: { role: "searchbox" },
+          consumerProps: slotProps == null ? void 0 : slotProps.htmlInput
+        })
       },
       role: "search",
       "data-variant": variant,
@@ -6447,7 +6663,7 @@ const Alert = styled(Alert$1, {
     width: theme.spacing(3),
     marginTop: theme.spacing(0.5)
   },
-  "&.MuiAlert-standardError": {
+  "&.MuiAlert-standard.MuiAlert-colorError": {
     backgroundColor: theme.palette.error.main
   },
   ...icon !== false && {
@@ -6507,7 +6723,7 @@ function Snackbar({
       open,
       autoHideDuration: duration,
       onClose,
-      TransitionComponent: autoWidth ? Fade : Slide,
+      slots: { transition: autoWidth ? Fade : Slide, ...rest.slots },
       "data-auto-width": autoWidth,
       children: /* @__PURE__ */ jsxs(
         Content$1,
@@ -6810,7 +7026,7 @@ function _UploadFieldBase({
   focused,
   buttonText = "Browse",
   inProgress,
-  InputProps,
+  slotProps,
   size = "small",
   hasFiles,
   cursor = "pointer",
@@ -6828,25 +7044,30 @@ function _UploadFieldBase({
       focused: focused ?? dragOver,
       cursor,
       "data-testid": dataTestId,
-      InputProps: {
-        ...InputProps,
-        name,
-        // multiple prop cannot be used here because it is not a valid prop for TextField InputProps
-        // not used for any UI logic
-        readOnly: true,
-        endAdornment: /* @__PURE__ */ jsx(
-          FilesAction,
-          {
-            buttonText,
-            hasFiles,
-            size,
-            error,
-            disabled: !!dragOver,
-            handleReset,
-            handleOpen,
-            inProgress
-          }
-        )
+      slotProps: {
+        ...slotProps,
+        // Own props are spread last on purpose: name/readOnly/endAdornment are
+        // this component's contract and must win over the consumer's.
+        input: (ownerState) => ({
+          ...typeof (slotProps == null ? void 0 : slotProps.input) === "function" ? slotProps.input(ownerState) : slotProps == null ? void 0 : slotProps.input,
+          name,
+          // multiple prop cannot be used here because it is not a valid prop for TextField InputProps
+          // not used for any UI logic
+          readOnly: true,
+          endAdornment: /* @__PURE__ */ jsx(
+            FilesAction,
+            {
+              buttonText,
+              hasFiles,
+              size,
+              error,
+              disabled: !!dragOver,
+              handleReset,
+              handleOpen,
+              inProgress
+            }
+          )
+        })
       },
       "data-cursor": cursor,
       "data-drag-over": dragOver,
@@ -6964,6 +7185,7 @@ function _UploadField({
   focused,
   nativeInputProps,
   "data-testid": dataTestId,
+  slotProps,
   ...props
 }, ref) {
   const accept = _accept ?? DEFAULT_ACCEPT;
@@ -6996,7 +7218,13 @@ function _UploadField({
         dragOver,
         inProgress,
         hasFiles: Boolean(filesText),
-        InputProps: inputEvents,
+        slotProps: {
+          ...slotProps,
+          input: mergeSlotProps({
+            ownProps: inputEvents,
+            consumerProps: slotProps == null ? void 0 : slotProps.input
+          })
+        },
         buttonText,
         "data-testid": dataTestId
       }
@@ -7417,13 +7645,13 @@ const ListItem = forwardRef(_ListItem);
 ListItem.displayName = "ListItem";
 const DEFAULT_PRIMARY_TYPOGRAPHY_PROPS = {
   variant: "body2",
-  color: "text.primary",
+  color: "textPrimary",
   noWrap: true,
   component: "span"
 };
 const DEFAULT_SECONDARY_TYPOGRAPHY_PROPS = {
   variant: "caption",
-  color: "text.secondary",
+  color: "textSecondary",
   noWrap: true
 };
 function resolveTypographyProps(defaultProps, userProps) {
@@ -7451,22 +7679,32 @@ function resolveTypographyProps(defaultProps, userProps) {
 function _ListItemText({
   primaryTypographyProps,
   secondaryTypographyProps,
+  slotProps,
   ...props
 }, ref) {
   return /* @__PURE__ */ jsx(
     ListItemText$1,
     {
       ...props,
-      primaryTypographyProps: resolveTypographyProps(
-        DEFAULT_PRIMARY_TYPOGRAPHY_PROPS,
-        primaryTypographyProps
-      ),
-      secondaryTypographyProps: resolveTypographyProps(
-        DEFAULT_SECONDARY_TYPOGRAPHY_PROPS,
-        secondaryTypographyProps
-      ),
       ref,
-      "data-name": "list-item-text"
+      "data-name": "list-item-text",
+      slotProps: {
+        ...slotProps,
+        primary: mergeSlotProps({
+          ownProps: resolveTypographyProps(
+            DEFAULT_PRIMARY_TYPOGRAPHY_PROPS,
+            primaryTypographyProps
+          ),
+          consumerProps: slotProps == null ? void 0 : slotProps.primary
+        }),
+        secondary: mergeSlotProps({
+          ownProps: resolveTypographyProps(
+            DEFAULT_SECONDARY_TYPOGRAPHY_PROPS,
+            secondaryTypographyProps
+          ),
+          consumerProps: slotProps == null ? void 0 : slotProps.secondary
+        })
+      }
     }
   );
 }
@@ -7487,13 +7725,23 @@ function ListItemRightContent({
     Root,
     {
       direction: "row",
-      alignItems: "center",
       spacing: 1.5,
+      sx: { alignItems: "center" },
       ...props,
       "data-name": "list-item-right-content",
       children: [
         children,
-        actions && /* @__PURE__ */ jsx(Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: actions })
+        actions && /* @__PURE__ */ jsx(
+          Stack,
+          {
+            direction: "row",
+            spacing: 0.5,
+            sx: {
+              alignItems: "center"
+            },
+            children: actions
+          }
+        )
       ]
     }
   );
@@ -7501,7 +7749,7 @@ function ListItemRightContent({
 ListItemRightContent.displayName = "ListItemRightContent";
 const DEFAULT_TYPOGRAPHY_PROPS = {
   variant: "caption",
-  color: "text.secondary",
+  color: "textSecondary",
   component: "span"
 };
 function mergeTypographyProps(defaultProps, userProps) {
@@ -7552,7 +7800,7 @@ function _ListSubheader({
       "data-disable-gutters": effectiveDisableGutters,
       "data-disable-padding": effectiveDisablePadding,
       children: /* @__PURE__ */ jsx(
-        Typography$1,
+        Typography,
         {
           ...mergeTypographyProps(
             DEFAULT_TYPOGRAPHY_PROPS,