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

package/dist/components/index.cjs

@@ -3,11 +3,11 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const material = require("@mui/material");
-const paletteUtils = require("../palette-utils-C8uRrL9Q.cjs");
+const paletteUtils = require("../palette-utils-Cza0wkfu.cjs");
 const iconsMaterial = require("@mui/icons-material");
 const ArrowDown = require("../ArrowDown-84Oc8r9k.cjs");
 const ReactWindow = require("react-window");
-const TablePaginationActions = require("../TablePaginationActions-BJS_RrOa.cjs");
+const utils = require("../utils-D4zfQQdi.cjs");
 const Search = require("../Search-BsaXrSzs.cjs");
 require("cartocolor");
 const reactCodemirror2 = require("react-codemirror2");
@@ -72,20 +72,7 @@ const ScreenReaderOnly = material.styled("span")(() => ({
   whiteSpace: "nowrap",
   border: 0
 }));
-const IndicatorIcon = material.styled(material.Box)({
-  position: "absolute",
-  top: 0,
-  left: 0,
-  right: 0,
-  bottom: 0,
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center"
-});
-const HiddenText = material.styled(material.Box)({
-  visibility: "hidden",
-  pointerEvents: "none"
-});
+const loadingIndicator = /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 18, color: "inherit" });
 function _Button({
   children,
   loading,
@@ -99,50 +86,21 @@ function _Button({
   "aria-describedby": ariaDescribedby,
   ...otherProps
 }, ref) {
-  const screenReaderTextValue = TablePaginationActions.useTranslationWithFallback(
+  const screenReaderTextValue = utils.useTranslationWithFallback(
     "c4r.button.opensInNewTab",
     screenReaderText
   );
-  const defaultIconLoader = /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 18, color: "inherit" });
-  const isDefaultLoading = loading && loadingPosition === void 0;
   const isExternalLink = otherProps.href && external;
-  const renderContent = () => {
-    if (isDefaultLoading) {
-      return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { position: "relative" }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(IndicatorIcon, { children: defaultIconLoader }),
-        /* @__PURE__ */ jsxRuntime.jsx(HiddenText, { children })
-      ] });
-    }
-    if (isExternalLink) {
-      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        children,
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(iconsMaterial.OpenInNewOutlined, {}) : void 0);
-    }
-  };
+  const isCenterLoading = loading && loadingPosition === void 0;
   return /* @__PURE__ */ jsxRuntime.jsx(
     material.Button,
     {
-      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__ */ jsxRuntime.jsx(iconsMaterial.OpenInNewOutlined, {}) : void 0),
       ...otherProps,
       role: otherProps.href ? "link" : "button",
       ...isExternalLink && {
@@ -151,11 +109,25 @@ function _Button({
       },
       ref,
       "aria-describedby": isExternalLink ? "external-hint" : ariaDescribedby,
-      children: /* @__PURE__ */ jsxRuntime.jsx(paletteUtils.Typography, { variant: "inherit", color: "inherit", noWrap: true, component: "span", children: renderContent() })
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        paletteUtils.Typography,
+        {
+          variant: "inherit",
+          color: "inherit",
+          noWrap: true,
+          component: "span",
+          sx: isCenterLoading ? { visibility: "hidden" } : void 0,
+          children: [
+            children,
+            isExternalLink && /* @__PURE__ */ jsxRuntime.jsx(ScreenReaderOnly, { id: "external-hint", children: screenReaderTextValue })
+          ]
+        }
+      )
     }
   );
 }
 const Button = React.forwardRef(_Button);
+Button.displayName = "Button";
 const idCounter = {};
 function uniqueId(prefix = "$lodash$") {
   if (!idCounter[prefix]) {
@@ -187,7 +159,7 @@ function SplitButton({
   ...otherProps
 }) {
   var _a;
-  const toggleLabel = TablePaginationActions.useTranslationWithFallback(
+  const toggleLabel = utils.useTranslationWithFallback(
     "c4r.button.showOptions",
     toggleAriaLabel
   );
@@ -356,24 +328,56 @@ function _LabelWithIndicator({
 }
 const LabelWithIndicator = React.forwardRef(_LabelWithIndicator);
 function _PasswordField({
-  InputProps,
   size = "small",
   disabled,
   showPasswordText,
   hidePasswordText,
+  slotProps,
   ...otherProps
 }, ref) {
-  const showPasswordLabel = TablePaginationActions.useTranslationWithFallback(
+  const showPasswordLabel = utils.useTranslationWithFallback(
     "c4r.form.showPassword",
     showPasswordText
   );
-  const hidePasswordLabel = TablePaginationActions.useTranslationWithFallback(
+  const hidePasswordLabel = utils.useTranslationWithFallback(
     "c4r.form.hidePassword",
     hidePasswordText
   );
   const [showPassword, setShowPassword] = React.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__ */ jsxRuntime.jsx(material.InputAdornment, { position: "end", children: /* @__PURE__ */ jsxRuntime.jsx(
+      utils.IconButton,
+      {
+        size,
+        disabled,
+        onClick: handleClickShowPassword,
+        icon: showPassword ? /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.VisibilityOffOutlined, {}) : /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.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__ */ jsxRuntime.jsx(
     material.TextField,
     {
@@ -382,25 +386,11 @@ function _PasswordField({
       type: showPassword ? "text" : "password",
       size,
       disabled,
-      InputProps: {
-        ...InputProps,
-        inputProps: {
-          ...InputProps == null ? void 0 : InputProps.inputProps,
-          role: "textbox"
-        },
-        endAdornment: /* @__PURE__ */ jsxRuntime.jsx(material.InputAdornment, { position: "end", children: /* @__PURE__ */ jsxRuntime.jsx(
-          TablePaginationActions.IconButton,
-          {
-            size,
-            disabled,
-            onClick: handleClickShowPassword,
-            icon: showPassword ? /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.VisibilityOffOutlined, {}) : /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.VisibilityOutlined, {}),
-            tooltip: label,
-            "aria-label": label
-          }
-        ) })
-      },
-      "data-name": "password-field"
+      "data-name": "password-field",
+      slotProps: {
+        ...slotProps,
+        input: inputSlotProps
+      }
     }
   );
 }
@@ -412,7 +402,7 @@ const StyledSelect = material.styled(material.Select)(({ theme }) => ({
       paddingLeft: theme.spacing(1.5)
     }
   },
-  "& .MuiInputBase-inputAdornedStart": {
+  "&.MuiInputBase-adornedStart > .MuiInputBase-input": {
     paddingLeft: "0px !important"
   },
   "& .MuiSelect-select .MuiMenuItem-root:hover": {
@@ -443,11 +433,16 @@ function _SelectField({
   fullWidth,
   required,
   "aria-label": ariaLabel,
+  SelectDisplayProps,
   ...otherProps
 }, ref) {
   const isSmall = size === "small";
   const [defaultId] = React.useState(() => uniqueId("select-label-"));
   const ariaLabelledBy = label ? labelId ?? defaultId : void 0;
+  const [fallbackDisplayId] = React.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__ */ jsxRuntime.jsxs(
     material.FormControl,
     {
@@ -460,23 +455,49 @@ function _SelectField({
       "data-name": "select-field",
       "data-size": size,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", children: [
-          label && /* @__PURE__ */ jsxRuntime.jsx(material.InputLabel, { shrink: true, id: ariaLabelledBy, children: label }),
-          labelSecondary && /* @__PURE__ */ jsxRuntime.jsx(material.Box, { display: "flex", alignItems: "center", ml: 2, mb: 0.5, children: labelSecondary })
-        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          material.Box,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between"
+            },
+            children: [
+              label && /* @__PURE__ */ jsxRuntime.jsx(material.InputLabel, { shrink: true, id: ariaLabelledBy, children: label }),
+              labelSecondary && /* @__PURE__ */ jsxRuntime.jsx(
+                material.Box,
+                {
+                  sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    ml: 2,
+                    mb: 0.5
+                  },
+                  children: labelSecondary
+                }
+              )
+            ]
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.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,
@@ -497,7 +518,7 @@ function _SelectField({
                 paletteUtils.Typography,
                 {
                   variant: isSmall ? "body2" : "body1",
-                  color: "text.hint",
+                  color: "textHint",
                   component: "span",
                   children: placeholder
                 }
@@ -573,7 +594,7 @@ function useMultipleSelectField({
     unselectAll
   };
 }
-const StyledMenuItem$1 = material.styled(TablePaginationActions.MenuItem)(() => ({
+const StyledMenuItem$1 = material.styled(utils.MenuItem)(() => ({
   marginTop: "0 !important",
   marginBottom: "0 !important"
 }));
@@ -599,7 +620,7 @@ function _MenuItemFilter({
   "aria-label": ariaLabel,
   "data-testid": dataTestId
 }, ref) {
-  const selectAllLabel = TablePaginationActions.useTranslationWithFallback(
+  const selectAllLabel = utils.useTranslationWithFallback(
     "c4r.form.selectAll",
     selectAllText
   );
@@ -651,7 +672,9 @@ const UnselectButton = material.styled(material.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"
@@ -660,7 +683,6 @@ const UnselectButton = material.styled(material.InputAdornment, {
     color: theme.palette.text.hint
   },
   ...size === "medium" && {
-    top: theme.spacing(3),
     right: theme.spacing(5)
   }
 }));
@@ -699,15 +721,15 @@ function _MultipleSelectField({
   });
   const isSmall = size === "small";
   const paddingSize = isSmall || variant === "standard" ? 0 : 2;
-  const allSelectedLabel = TablePaginationActions.useTranslationWithFallback(
+  const allSelectedLabel = utils.useTranslationWithFallback(
     "c4r.form.allSelected",
     allSelectedText
   );
-  const noneSelectedLabel = TablePaginationActions.useTranslationWithFallback(
+  const noneSelectedLabel = utils.useTranslationWithFallback(
     "c4r.form.noneSelected",
     noneSelectedText
   );
-  const selectedLabel = TablePaginationActions.useTranslationWithFallback(
+  const selectedLabel = utils.useTranslationWithFallback(
     "c4r.form.selected",
     selectedText
   );
@@ -733,7 +755,7 @@ function _MultipleSelectField({
         return { content: currentOptions.join(", ") };
       }
       return {
-        color: "text.hint",
+        color: "textHint",
         content: placeholder ?? noneSelectedLabel
       };
     })();
@@ -743,7 +765,9 @@ function _MultipleSelectField({
         component: "span",
         variant: isSmall ? "body2" : "body1",
         color,
-        ml: paddingSize,
+        sx: {
+          ml: paddingSize
+        },
         children: content
       }
     );
@@ -776,10 +800,12 @@ function _MultipleSelectField({
       variant,
       endAdornment: showFilters && areAnySelected && /* @__PURE__ */ jsxRuntime.jsx(UnselectButton, { position: "end", size, children: /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { onClick: unselectAll, size, children: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.Cancel, {}) }) }),
       menuProps: {
-        PaperProps: {
-          sx: {
-            ".MuiList-root": {
-              paddingTop: 0
+        slotProps: {
+          paper: {
+            sx: {
+              ".MuiList-root": {
+                paddingTop: 0
+              }
             }
           }
         }
@@ -872,8 +898,12 @@ function _ToggleButtonGroup({
   );
 }
 const ToggleButtonGroup = React.forwardRef(_ToggleButtonGroup);
-const StyledLink = material.styled(material.Link)(() => ({
-  display: "inline-block"
+const StyledLink = material.styled(material.Link)(({ 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 = material.styled("span", {
   shouldForwardProp: (prop) => prop !== "variant" && prop !== "iconPosition"
@@ -924,27 +954,35 @@ function _Link({
   external,
   showExternalIcon = true,
   screenReaderText,
-  fontWeight = 500,
+  fontWeight,
   target,
   rel,
   "aria-describedby": ariaDescribedby,
   ...otherProps
 }, ref) {
-  const screenReaderTextValue = TablePaginationActions.useTranslationWithFallback(
+  const screenReaderTextValue = utils.useTranslationWithFallback(
     "c4r.button.opensInNewTab",
     screenReaderText
   );
   const isButtonLink = otherProps.component === "button";
+  const { sx: consumerSx } = otherProps;
+  const usesPalettePath = paletteUtils.isPalettePath(color);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     StyledLink,
     {
       ...otherProps,
       variant,
-      fontWeight,
-      "data-color": color,
+      sx: paletteUtils.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,
@@ -959,6 +997,7 @@ function _Link({
   );
 }
 const Link = React.forwardRef(_Link);
+Link.displayName = "Link";
 function _CircularProgress({
   color = "primary",
   size = 40,
@@ -1006,7 +1045,7 @@ function _Loader({
   sx,
   ...otherProps
 }, ref) {
-  const labelText = TablePaginationActions.useTranslationWithFallback("c4r.utils.loader.label", label);
+  const labelText = utils.useTranslationWithFallback("c4r.utils.loader.label", label);
   const hasAnyLabel = labelText || secondLabel;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Wrapper,
@@ -1028,28 +1067,37 @@ function _Loader({
             "aria-labelledby": hasAnyLabel ? "loader-label" : void 0
           }
         ),
-        hasAnyLabel && /* @__PURE__ */ jsxRuntime.jsxs(material.Stack, { direction: "column", alignItems: "center", children: [
-          labelText && /* @__PURE__ */ jsxRuntime.jsx(
-            paletteUtils.Typography,
-            {
-              variant: "body2",
-              color: "textSecondary",
-              ...labelProps,
-              id: "loader-label",
-              children: labelText
-            }
-          ),
-          secondLabel && /* @__PURE__ */ jsxRuntime.jsx(
-            paletteUtils.Typography,
-            {
-              variant: "caption",
-              color: "textSecondary",
-              ...secondLabelProps,
-              id: labelText ? void 0 : "loader-label",
-              children: secondLabel
-            }
-          )
-        ] })
+        hasAnyLabel && /* @__PURE__ */ jsxRuntime.jsxs(
+          material.Stack,
+          {
+            direction: "column",
+            sx: {
+              alignItems: "center"
+            },
+            children: [
+              labelText && /* @__PURE__ */ jsxRuntime.jsx(
+                paletteUtils.Typography,
+                {
+                  variant: "body2",
+                  color: "textSecondary",
+                  ...labelProps,
+                  id: "loader-label",
+                  children: labelText
+                }
+              ),
+              secondLabel && /* @__PURE__ */ jsxRuntime.jsx(
+                paletteUtils.Typography,
+                {
+                  variant: "caption",
+                  color: "textSecondary",
+                  ...secondLabelProps,
+                  id: labelText ? void 0 : "loader-label",
+                  children: secondLabel
+                }
+              )
+            ]
+          }
+        )
       ]
     }
   );
@@ -1089,9 +1137,9 @@ const _CopiableComponent = ({
   ...props
 }, ref) => {
   const [open, setOpen] = React.useState(false);
-  const _copyText = TablePaginationActions.useTranslationWithFallback("c4r.button.copy", copyText);
+  const _copyText = utils.useTranslationWithFallback("c4r.button.copy", copyText);
   const copyTooltipText = copyText === null ? null : _copyText;
-  const copySuccessMessage = TablePaginationActions.useTranslationWithFallback(
+  const copySuccessMessage = utils.useTranslationWithFallback(
     "c4r.notifications.copiedToClipboard",
     copiedText
   );
@@ -1123,7 +1171,7 @@ const _CopiableComponent = ({
             children: [
               children,
               button && /* @__PURE__ */ jsxRuntime.jsx(
-                TablePaginationActions.IconButton,
+                utils.IconButton,
                 {
                   ...buttonProps,
                   disabled,
@@ -1155,6 +1203,19 @@ const _CopiableComponent = ({
   ] });
 };
 const CopiableComponent = React.forwardRef(_CopiableComponent);
+function mergeSlotProps({
+  ownProps,
+  consumerProps
+}) {
+  if (typeof consumerProps === "function") {
+    const resolveConsumerProps = consumerProps;
+    return (ownerState) => ({
+      ...ownProps,
+      ...resolveConsumerProps(ownerState)
+    });
+  }
+  return { ...ownProps, ...consumerProps };
+}
 const StyledTextField = material.styled(material.TextField, {
   shouldForwardProp: (prop) => !["isInputFocused"].includes(prop)
 })(({ isInputFocused }) => ({
@@ -1184,7 +1245,7 @@ const AdornmentWrapper = material.styled(material.Box, {
 function _CopiableInputText({
   value,
   variant,
-  InputProps,
+  slotProps,
   extraEndAdornment,
   onCopied,
   password,
@@ -1198,11 +1259,11 @@ function _CopiableInputText({
   const [showPassword, setShowPassword] = React.useState(false);
   const [isInputFocused, setIsInputFocused] = React.useState(false);
   const inputType = !password ? "text" : showPassword ? "text" : "password";
-  const showTextLabel = TablePaginationActions.useTranslationWithFallback(
+  const showTextLabel = utils.useTranslationWithFallback(
     "c4r.button.show",
     showTextProp
   );
-  const hideTextLabel = TablePaginationActions.useTranslationWithFallback(
+  const hideTextLabel = utils.useTranslationWithFallback(
     "c4r.button.hide",
     hideTextProp
   );
@@ -1216,7 +1277,7 @@ function _CopiableInputText({
     onBlur == null ? void 0 : onBlur(event);
   };
   const passwordAdornment = /* @__PURE__ */ jsxRuntime.jsx(material.InputAdornment, { position: "end", children: /* @__PURE__ */ jsxRuntime.jsx(
-    TablePaginationActions.IconButton,
+    utils.IconButton,
     {
       edge: variant !== "standard" ? "end" : void 0,
       onClick: () => setShowPassword(!showPassword),
@@ -1234,28 +1295,33 @@ function _CopiableInputText({
       size,
       value,
       variant,
-      InputProps: {
-        readOnly: true,
-        onFocus: handleFocus,
-        onBlur: handleBlur,
-        endAdornment: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          password ? passwordAdornment : extraEndAdornment,
-          /* @__PURE__ */ jsxRuntime.jsx(material.InputAdornment, { position: "end", children: /* @__PURE__ */ jsxRuntime.jsx(AdornmentWrapper, { size, variant, children: /* @__PURE__ */ jsxRuntime.jsx(
-            CopiableComponent,
-            {
-              value,
-              onCopied,
-              button: true,
-              buttonProps: {
-                size
-              }
+      slotProps: {
+        ...slotProps,
+        input: mergeSlotProps({
+          ownProps: {
+            readOnly: true,
+            onFocus: handleFocus,
+            onBlur: handleBlur,
+            endAdornment: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              password ? passwordAdornment : extraEndAdornment,
+              /* @__PURE__ */ jsxRuntime.jsx(material.InputAdornment, { position: "end", children: /* @__PURE__ */ jsxRuntime.jsx(AdornmentWrapper, { size, variant, children: /* @__PURE__ */ jsxRuntime.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",
@@ -1265,13 +1331,19 @@ function _CopiableInputText({
 }
 const CopiableInputText = React.forwardRef(_CopiableInputText);
 const { FixedSizeList: FixedSizeList$1 } = ReactWindow__namespace;
-const List$1 = material.styled("ul")(
-  ({ theme, hasFilters }) => ({
-    ...!hasFilters && {
-      paddingTop: `${theme.spacing(1)} !important`
-    }
-  })
-);
+const List$1 = material.styled(material.MenuList, {
+  // 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 = material.styled("div")(({ style, theme, isSubtitle, isExtended, isMultiple }) => {
   const getSubtitleStyles = () => {
     const baseStyles = {
@@ -1293,9 +1365,15 @@ const ItemWrapper = material.styled("div")(({ style, theme, isSubtitle, isExtend
   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"
@@ -1450,10 +1528,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)
     );
@@ -1461,7 +1540,7 @@ function createCounterRenderTags({
     const text = formatCounter({
       selectedCount,
       totalCount,
-      selectedItems: value,
+      selectedItems,
       allItems: selectableOptions,
       getOptionLabel
     });
@@ -1540,9 +1619,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__ */ jsxRuntime.jsx(
@@ -1553,9 +1634,20 @@ function _Autocomplete({
       disabled: disabled || loading,
       popupIcon: loading ? /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 18, color: "inherit" }) : /* @__PURE__ */ jsxRuntime.jsx(ArrowDown.ForwardedComponent, {}),
       "data-name": "autocomplete",
-      ListboxProps: {
-        "aria-multiselectable": false,
-        ...props.ListboxProps
+      slots,
+      slotProps: {
+        ...slotProps,
+        listbox: mergeSlotProps({
+          ownProps: {
+            "aria-multiselectable": false,
+            component: material.MenuList
+            // `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
+        })
       }
     }
   );
@@ -1566,7 +1658,7 @@ function useAutocompleteRenderOption() {
     const { key, ...otherProps } = props;
     if (isAutocompleteListGroupHeader(option)) {
       return /* @__PURE__ */ React.createElement(
-        TablePaginationActions.MenuItem,
+        utils.MenuItem,
         {
           ...otherProps,
           subtitle: true,
@@ -1608,7 +1700,7 @@ function useAutocompleteRenderOption() {
     return /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: divider ? /* @__PURE__ */ jsxRuntime.jsx(material.Divider, {}) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       inputValue && /* @__PURE__ */ jsxRuntime.jsx(material.Divider, {}),
       /* @__PURE__ */ jsxRuntime.jsxs(
-        TablePaginationActions.MenuItem,
+        utils.MenuItem,
         {
           ...otherProps,
           ...!isPrimitiveOptionType && {
@@ -1665,11 +1757,11 @@ function useCreatableAutocomplete({
 }) {
   const filter = material.createFilterOptions();
   const { renderOption: autocompleteRenderOption } = useAutocompleteRenderOption();
-  const addLabel = TablePaginationActions.useTranslationWithFallback(
+  const addLabel = utils.useTranslationWithFallback(
     "c4r.form.add",
     typeof newItemLabel === "string" ? newItemLabel : void 0
   );
-  const noOptionsLabel = TablePaginationActions.useTranslationWithFallback(
+  const noOptionsLabel = utils.useTranslationWithFallback(
     "c4r.form.noOptions",
     noOptionsText
   );
@@ -1746,11 +1838,11 @@ function useMultipleAutocomplete({
     Array.isArray(value) ? value : value ? [value] : []
   );
   const { renderOption: autocompleteRenderOption } = useAutocompleteRenderOption();
-  const defaultCounterText = TablePaginationActions.useTranslationWithFallback(
+  const defaultCounterText = utils.useTranslationWithFallback(
     "c4r.form.selected",
     counterText
   );
-  const defaultAllSelectedText = TablePaginationActions.useTranslationWithFallback(
+  const defaultAllSelectedText = utils.useTranslationWithFallback(
     "c4r.form.allSelected",
     allSelectedText
   );
@@ -1833,11 +1925,12 @@ function _CreatableAutocomplete({
   value,
   onChange,
   getLimitTagsText,
-  renderTags,
+  renderValue,
   itemHeight,
   maxListHeight,
   extended,
   groupBy,
+  slotProps,
   ...props
 }, ref) {
   if (groupBy) {
@@ -1887,7 +1980,7 @@ function _CreatableAutocomplete({
     extended,
     selectAllText
   };
-  const finalRenderTags = showCounter && multiple && !renderTags ? getCounterRenderTags() : renderTags;
+  const finalRenderValue = showCounter && multiple && !renderValue ? getCounterRenderTags() : renderValue;
   return /* @__PURE__ */ jsxRuntime.jsx(
     material.Autocomplete,
     {
@@ -1900,17 +1993,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__ */ jsxRuntime.jsx(material.CircularProgress, { size: 18, color: "inherit" }) : /* @__PURE__ */ jsxRuntime.jsx(ArrowDown.ForwardedComponent, {}),
-      "data-name": "creatable-autocomplete"
+      "data-name": "creatable-autocomplete",
+      slotProps: {
+        ...slotProps,
+        listbox: mergeSlotProps({
+          ownProps: {
+            component: AutocompleteList,
+            ...listboxProps
+          },
+          consumerProps: slotProps == null ? void 0 : slotProps.listbox
+        })
+      }
     }
   );
 }
@@ -1931,11 +2032,12 @@ function _MultipleAutocomplete({
   onChange,
   getOptionLabel,
   getLimitTagsText,
-  renderTags,
+  renderValue,
   itemHeight,
   maxListHeight,
   extended,
   groupBy,
+  slotProps,
   ...props
 }, ref) {
   if (groupBy) {
@@ -1970,7 +2072,7 @@ function _MultipleAutocomplete({
     extended,
     selectAllText
   };
-  const finalRenderTags = showCounter && !renderTags ? getCounterRenderTags() : renderTags;
+  const finalRenderValue = showCounter && !renderValue ? getCounterRenderTags() : renderValue;
   return /* @__PURE__ */ jsxRuntime.jsx(
     material.Autocomplete,
     {
@@ -1981,15 +2083,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__ */ jsxRuntime.jsx(material.CircularProgress, { size: 18, color: "inherit" }) : /* @__PURE__ */ jsxRuntime.jsx(ArrowDown.ForwardedComponent, {}),
-      "data-name": "multiple-autocomplete"
+      "data-name": "multiple-autocomplete",
+      slotProps: {
+        ...slotProps,
+        listbox: mergeSlotProps({
+          ownProps: {
+            component: AutocompleteList,
+            ...listboxProps
+          },
+          consumerProps: slotProps == null ? void 0 : slotProps.listbox
+        })
+      }
     }
   );
 }
@@ -2185,11 +2295,11 @@ function CodeAreaFooter({
   changesSavedText,
   ...props
 }) {
-  const buttonFooterLabel = TablePaginationActions.useTranslationWithFallback(
+  const buttonFooterLabel = utils.useTranslationWithFallback(
     buttonFooterLabelId || "c4r.button.save",
     buttonFooterText
   );
-  const changesSavedLabel = TablePaginationActions.useTranslationWithFallback(
+  const changesSavedLabel = utils.useTranslationWithFallback(
     "c4r.notifications.changesSaved",
     changesSavedText
   );
@@ -2256,16 +2366,16 @@ function CodeAreaHeader({
   const [openSnackbar, setOpenSnackbar] = React.useState(false);
   const [anchorEl, setAnchorEl] = React.useState(null);
   const open = Boolean(anchorEl);
-  const showOptionsTooltipLabel = TablePaginationActions.useTranslationWithFallback(
+  const showOptionsTooltipLabel = utils.useTranslationWithFallback(
     "c4r.button.showOptions",
     showOptionsTooltipText
   );
-  const copyLabel = TablePaginationActions.useTranslationWithFallback("c4r.button.copy", copyText);
-  const expandLabel = TablePaginationActions.useTranslationWithFallback(
+  const copyLabel = utils.useTranslationWithFallback("c4r.button.copy", copyText);
+  const expandLabel = utils.useTranslationWithFallback(
     "c4r.button.expand",
     expandText
   );
-  const copiedLabel = TablePaginationActions.useTranslationWithFallback(
+  const copiedLabel = utils.useTranslationWithFallback(
     "c4r.notifications.copiedToClipboard",
     copiedText
   );
@@ -2290,7 +2400,7 @@ function CodeAreaHeader({
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs(Header$1, { size, "data-size": size, "data-name": "code-area-header", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          TablePaginationActions.IconButton,
+          utils.IconButton,
           {
             color: "default",
             size,
@@ -2311,16 +2421,18 @@ 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__ */ jsxRuntime.jsxs(TablePaginationActions.MenuItem, { onClick: handleCopy, disabled, id: "copy", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(utils.MenuItem, { onClick: handleCopy, disabled, id: "copy", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(material.ListItemIcon, { children: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.ContentCopyOutlined, {}) }),
                 /* @__PURE__ */ jsxRuntime.jsx(material.ListItemText, { children: copyLabel })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs(TablePaginationActions.MenuItem, { onClick: onClickExpand, disabled, id: "expand", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(utils.MenuItem, { onClick: onClickExpand, disabled, id: "expand", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(material.ListItemIcon, { children: /* @__PURE__ */ jsxRuntime.jsx(Search.ForwardedComponent$1, {}) }),
                 /* @__PURE__ */ jsxRuntime.jsx(material.ListItemText, { children: expandLabel })
               ] })
@@ -2354,7 +2466,7 @@ function CodeAreaHeader({
       }
     ),
     showExpandButton && /* @__PURE__ */ jsxRuntime.jsx(
-      TablePaginationActions.IconButton,
+      utils.IconButton,
       {
         color: "default",
         size,
@@ -2978,7 +3090,7 @@ const InputWrapper$1 = material.styled(material.Box, {
     }
   }
 }));
-const HelpIcon = material.styled(iconsMaterial.HelpOutline)(({ theme }) => ({
+const HelpIcon = material.styled(iconsMaterial.HelpOutlineOutlined)(({ theme }) => ({
   width: paletteUtils.ICON_SIZE_SMALL,
   height: paletteUtils.ICON_SIZE_SMALL,
   fill: theme.palette.text.secondary
@@ -3166,7 +3278,7 @@ function CodeAreaDialogError({
   if (!children) return null;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(ErrorWrapper, { children: /* @__PURE__ */ jsxRuntime.jsxs(ErrorContent, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.ErrorOutline, { htmlColor: theme.palette.error.main }),
+      /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.ErrorOutlineOutlined, { htmlColor: theme.palette.error.main }),
       /* @__PURE__ */ jsxRuntime.jsx(material.FormHelperText, { error: true, children })
     ] }) }),
     hasDivider && /* @__PURE__ */ jsxRuntime.jsx(material.Divider, {})
@@ -3223,7 +3335,25 @@ const dialogDimensionsBySize = {
   }
 };
 const DialogPaper = material.styled(material.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,
@@ -3235,6 +3365,16 @@ const DialogPaper = material.styled(material.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),
@@ -3322,20 +3462,31 @@ const DialogPaper = material.styled(material.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__ */ jsxRuntime.jsx(
       DialogPaper,
       {
@@ -3348,32 +3499,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__ */ jsxRuntime.jsx(
     material.Dialog,
     {
-      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
     }
@@ -3422,20 +3587,20 @@ function DialogHeader({
   backIconButtonProps,
   ...otherProps
 }) {
-  const closeTooltipLabel = TablePaginationActions.useTranslationWithFallback(
+  const closeTooltipLabel = utils.useTranslationWithFallback(
     "c4r.button.close",
     closeTooltipText
   );
-  const backTooltipLabel = TablePaginationActions.useTranslationWithFallback(
+  const backTooltipLabel = utils.useTranslationWithFallback(
     "c4r.button.back",
     backTooltipText
   );
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(DialogTitle, { component: "div", "data-name": "dialog-header", ...otherProps, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(Main$1, { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(ItemsWrapper$1, { flex: 1, maxWidth: 0.8, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(ItemsWrapper$1, { sx: { flex: 1, maxWidth: 0.8 }, children: [
           onBack && /* @__PURE__ */ jsxRuntime.jsx(
-            TablePaginationActions.IconButton,
+            utils.IconButton,
             {
               "aria-label": backTooltipLabel,
               onClick: onBack,
@@ -3461,7 +3626,7 @@ function DialogHeader({
         /* @__PURE__ */ jsxRuntime.jsxs(ItemsWrapper$1, { children: [
           secondaryActions,
           onClose && /* @__PURE__ */ jsxRuntime.jsx(
-            TablePaginationActions.IconButton,
+            utils.IconButton,
             {
               "aria-label": closeTooltipLabel,
               onClick: onClose,
@@ -4030,16 +4195,16 @@ function CodeAreaDialogConfirmation({
   content,
   leaveText
 }) {
-  const titleLabel = TablePaginationActions.useTranslationWithFallback(
+  const titleLabel = utils.useTranslationWithFallback(
     titleLabelId || "c4r.dialog.confirmation.title",
     titleText
   );
-  const cancelLabel = TablePaginationActions.useTranslationWithFallback(
+  const cancelLabel = utils.useTranslationWithFallback(
     cancelLabelId || "c4r.button.cancel",
     cancelText
   );
-  const leaveLabel = TablePaginationActions.useTranslationWithFallback("c4r.button.leave", leaveText);
-  const contentLabel = TablePaginationActions.useTranslationWithFallback(
+  const leaveLabel = utils.useTranslationWithFallback("c4r.button.leave", leaveText);
+  const contentLabel = utils.useTranslationWithFallback(
     contentLabelId || "c4r.dialog.confirmation.content",
     contentText
   );
@@ -4316,10 +4481,14 @@ function DatePicker({
   chooseDateAriaLabel,
   ...props
 }) {
-  const chooseDateText = TablePaginationActions.useTranslationWithFallback(
+  const chooseDateText = utils.useTranslationWithFallback(
     "c4r.form.chooseDate",
     chooseDateAriaLabel
   );
+  const htmlInputProps = {
+    "data-testid": "date-picker-input",
+    placeholder
+  };
   return (
     // Don't remove className, it's used for styling
     /* @__PURE__ */ jsxRuntime.jsx(material.Box, { className: "CartoDatePicker-root", "data-testid": "date-picker", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -4340,7 +4509,7 @@ function DatePicker({
               {
                 label,
                 type,
-                icon: labelHelpTooltip && /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: labelHelpTooltip, children: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.HelpOutline, { htmlColor: "text.secondary" }) })
+                icon: labelHelpTooltip && /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: labelHelpTooltip, children: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.HelpOutlineOutlined, { htmlColor: "text.secondary" }) })
               }
             ),
             slotProps: {
@@ -4348,13 +4517,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,
@@ -4375,7 +4543,7 @@ function DatePicker({
     ) })
   );
 }
-const PickersDayWrapper = material.styled(material.Box, {
+const PickerDayWrapper = material.styled(material.Box, {
   shouldForwardProp: (prop) => ![
     "isSelected",
     "isStartDate",
@@ -4398,7 +4566,7 @@ const PickersDayWrapper = material.styled(material.Box, {
   }) => ({
     position: "relative",
     margin: theme.spacing(0.25),
-    "& .MuiPickersDay-root": {
+    "& .MuiPickerDay-root": {
       margin: 0
     },
     // Highlight the selected date range
@@ -4451,7 +4619,7 @@ const PickersDayWrapper = material.styled(material.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}`
@@ -4478,11 +4646,11 @@ const PickersDayWrapper = material.styled(material.Box, {
     }
   })
 );
-const CustomPickersDay = material.styled(xDatePickers.PickersDay, {
+const CustomPickerDay = material.styled(xDatePickers.PickerDay, {
   shouldForwardProp: (prop) => !["isDateRangeLimit", "isPreview"].includes(prop)
 })(
   ({ theme, isDateRangeLimit, isPreview }) => ({
-    "&.MuiPickersDay-root": {
+    "&.MuiPickerDay-root": {
       position: "relative",
       zIndex: 1,
       "&.Mui-selected": {
@@ -4513,7 +4681,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,
@@ -4540,7 +4708,7 @@ function PickersDay({
     selectedMonth && day.getMonth() === selectedMonth.getMonth()
   );
   return /* @__PURE__ */ jsxRuntime.jsx(
-    PickersDayWrapper,
+    PickerDayWrapper,
     {
       isSelected: isInsideRange,
       isStartDate: isRangeStart,
@@ -4550,7 +4718,7 @@ function PickersDay({
       isFirstDay: isFirstDayOfMonth,
       isPreview,
       children: /* @__PURE__ */ jsxRuntime.jsx(
-        CustomPickersDay,
+        CustomPickerDay,
         {
           ...otherProps,
           day,
@@ -4568,15 +4736,21 @@ const FieldsWrapper = material.styled(material.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"
           }
         },
@@ -4593,11 +4767,11 @@ const FieldsWrapper = material.styled(material.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"
           }
         },
@@ -4635,13 +4809,13 @@ 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 = TablePaginationActions.useTranslationWithFallback("c4r.form.startDate");
-  const endDateLabel = TablePaginationActions.useTranslationWithFallback("c4r.form.endDate");
-  const startCalendarAriaLabel = TablePaginationActions.useTranslationWithFallback(
+  const startDateLabel = utils.useTranslationWithFallback("c4r.form.startDate");
+  const endDateLabel = utils.useTranslationWithFallback("c4r.form.endDate");
+  const startCalendarAriaLabel = utils.useTranslationWithFallback(
     "c4r.form.startDateCalendar",
     startDateCalendarAriaLabel
   );
-  const endCalendarAriaLabel = TablePaginationActions.useTranslationWithFallback(
+  const endCalendarAriaLabel = utils.useTranslationWithFallback(
     "c4r.form.endDateCalendar",
     endDateCalendarAriaLabel
   );
@@ -4709,7 +4883,7 @@ function DateRangePicker({
               slots: {
                 openPickerIcon: iconsMaterial.TodayOutlined,
                 day: (props2) => /* @__PURE__ */ jsxRuntime.jsx(
-                  PickersDay,
+                  PickerDay,
                   {
                     ...props2,
                     startDate,
@@ -4743,7 +4917,7 @@ function DateRangePicker({
               },
               slots: {
                 day: (props2) => /* @__PURE__ */ jsxRuntime.jsx(
-                  PickersDay,
+                  PickerDay,
                   {
                     ...props2,
                     startDate,
@@ -4843,7 +5017,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__ */ jsxRuntime.jsx(
         DateCalendar.DateCalendar,
         {
@@ -4852,7 +5026,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
@@ -4913,8 +5087,8 @@ function TimePicker({
   "aria-label": ariaLabel,
   ...props
 }) {
-  const fieldLabel = TablePaginationActions.useTranslationWithFallback("c4r.form.time", label);
-  const chooseDateAriaLabel = TablePaginationActions.useTranslationWithFallback(
+  const fieldLabel = utils.useTranslationWithFallback("c4r.form.time", label);
+  const chooseDateAriaLabel = utils.useTranslationWithFallback(
     "c4r.form.chooseDate",
     openPickerAriaLabel
   );
@@ -4934,6 +5108,10 @@ function TimePicker({
       resizeObserver.disconnect();
     };
   }, []);
+  const htmlInputProps = {
+    "data-testid": "time-picker-input",
+    placeholder
+  };
   return /* @__PURE__ */ jsxRuntime.jsx(
     DateFieldContainer,
     {
@@ -4953,7 +5131,7 @@ function TimePicker({
             {
               label: fieldLabel,
               type,
-              icon: labelHelpTooltip && /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: labelHelpTooltip, children: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.HelpOutline, { htmlColor: "text.secondary" }) })
+              icon: labelHelpTooltip && /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: labelHelpTooltip, children: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.HelpOutlineOutlined, { htmlColor: "text.secondary" }) })
             }
           ),
           views: ["hours"],
@@ -4962,13 +5140,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,
@@ -5026,11 +5203,15 @@ function DateTimePicker({
   "aria-label": ariaLabel,
   ...props
 }) {
-  const fieldLabel = TablePaginationActions.useTranslationWithFallback("c4r.form.time", label);
-  const chooseDateAriaLabel = TablePaginationActions.useTranslationWithFallback(
+  const fieldLabel = utils.useTranslationWithFallback("c4r.form.time", label);
+  const chooseDateAriaLabel = utils.useTranslationWithFallback(
     "c4r.form.chooseDate",
     openPickerAriaLabel
   );
+  const htmlInputProps = {
+    "data-testid": "date-time-picker-input",
+    placeholder
+  };
   return /* @__PURE__ */ jsxRuntime.jsx(
     DateFieldContainer,
     {
@@ -5049,7 +5230,7 @@ function DateTimePicker({
             {
               label: fieldLabel,
               type,
-              icon: labelHelpTooltip && /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: labelHelpTooltip, children: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.HelpOutline, { htmlColor: "text.secondary" }) })
+              icon: labelHelpTooltip && /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: labelHelpTooltip, children: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.HelpOutlineOutlined, { htmlColor: "text.secondary" }) })
             }
           ),
           views: ["year", "month", "day", "hours"],
@@ -5058,13 +5239,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,
@@ -5107,7 +5287,7 @@ const IconWrapper$1 = material.styled(material.Box, {
   shouldForwardProp: (prop) => prop !== "size" && prop !== "iconSize" && prop !== "iconColor"
 })(({ size, iconSize, iconColor, theme }) => {
   const finalIconSize = iconSize ?? (size === "small" ? theme.spacing(5) : theme.spacing(6));
-  const colorValue = iconColor === null || iconColor === void 0 ? void 0 : TablePaginationActions.getThemeColor(iconColor, theme);
+  const colorValue = iconColor === null || iconColor === void 0 ? void 0 : utils.getThemeColor(iconColor, theme);
   return {
     display: "flex",
     ".MuiSvgIcon-root": {
@@ -5164,7 +5344,6 @@ function _EmptyState({
     Root$1,
     {
       ref,
-      alignItems: "center",
       size,
       spacing,
       contentHeight,
@@ -5239,7 +5418,7 @@ function TooltipData({
   title
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    title && /* @__PURE__ */ jsxRuntime.jsx(paletteUtils.Typography, { color: "inherit", variant: "caption", weight: "medium", children: title }),
+    title && /* @__PURE__ */ jsxRuntime.jsx(paletteUtils.Typography, { variant: "caption", weight: "medium", color: "inherit", children: title }),
     /* @__PURE__ */ jsxRuntime.jsx(Content$3, { children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(Entry, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         Bullet,
@@ -5253,7 +5432,7 @@ function TooltipData({
         }
       ),
       item.category && /* @__PURE__ */ jsxRuntime.jsx(Category, { color: "inherit", variant: "caption", children: item.category }),
-      /* @__PURE__ */ jsxRuntime.jsx(paletteUtils.Typography, { color: "inherit", variant: "caption", weight: "medium", children: item.value })
+      /* @__PURE__ */ jsxRuntime.jsx(paletteUtils.Typography, { variant: "caption", weight: "medium", color: "inherit", children: item.value })
     ] }, index)) })
   ] });
 }
@@ -5543,7 +5722,7 @@ const StyledMenu = material.styled(material.Menu, {
     }
   }
 }));
-function _Menu({ extended, width, height, MenuListProps: MenuListProps2, ...otherProps }, ref) {
+function _Menu({ extended, width, height, slotProps, ...otherProps }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     StyledMenu,
     {
@@ -5553,11 +5732,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
+        })
       }
     }
   );
@@ -5627,7 +5812,7 @@ const FilterDropdownMenuItem = ({
   const isSelected = selected || (selectedValue == null ? void 0 : selectedValue.id) === id;
   if (hidden) return null;
   return /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: tooltipLabel, placement: tooltipPlacement, children: /* @__PURE__ */ jsxRuntime.jsxs(
-    TablePaginationActions.MenuItem,
+    utils.MenuItem,
     {
       onClick: disabled ? void 0 : (event) => onItemChange(item, event),
       selected: isSelected,
@@ -5656,9 +5841,11 @@ const FilterDropdownMenuItem = ({
           {
             primary: label,
             secondary: description,
-            primaryTypographyProps: {
-              variant: "body2",
-              id: menuItemId
+            slotProps: {
+              primary: {
+                variant: "body2",
+                id: menuItemId
+              }
             }
           }
         ),
@@ -5706,7 +5893,6 @@ function _FilterDropdown({
   buttonProps,
   iconButtonProps,
   slotProps,
-  MenuListProps,
   ...props
 }, ref) {
   const [selected_, setSelected] = React.useState(defaultValue || void 0);
@@ -5749,7 +5935,7 @@ function _FilterDropdown({
         placement: tooltipPlacement,
         ...tooltipProps,
         children: /* @__PURE__ */ jsxRuntime.jsx(ButtonWrapper, { isOpen, buttonColor, ref, children: isIcon ? /* @__PURE__ */ jsxRuntime.jsx(
-          TablePaginationActions.IconButton,
+          utils.IconButton,
           {
             ...commonButtonProps,
             icon,
@@ -5781,19 +5967,22 @@ 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__ */ jsxRuntime.jsx(TablePaginationActions.MenuItem, { subtitle: true, children: menuTitle }),
+          menuTitle && /* @__PURE__ */ jsxRuntime.jsx(utils.MenuItem, { subtitle: true, children: menuTitle }),
           menuItems.map((item, index) => {
             return /* @__PURE__ */ jsxRuntime.jsx(
               FilterDropdownMenuItem,
@@ -5927,7 +6116,7 @@ const MessageFieldFooter = ({
   return /* @__PURE__ */ jsxRuntime.jsxs(FooterWrapper, { size, children: [
     toolbar && /* @__PURE__ */ jsxRuntime.jsx(Toolbar, { children: toolbar }),
     /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: analyzing ? /* @__PURE__ */ jsxRuntime.jsx(
-      TablePaginationActions.IconButton,
+      utils.IconButton,
       {
         onClick: onStop,
         color: "default",
@@ -5939,7 +6128,7 @@ const MessageFieldFooter = ({
       }
     ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       iconButton && !labelButton && /* @__PURE__ */ jsxRuntime.jsx(
-        TablePaginationActions.IconButton,
+        utils.IconButton,
         {
           onClick,
           disabled: buttonIsDisabled,
@@ -5956,17 +6145,25 @@ const MessageFieldFooter = ({
         material.Tooltip,
         {
           title: buttonIsDisabled && !disabled ? typeToSendLabel : void 0,
-          children: /* @__PURE__ */ jsxRuntime.jsx(material.Box, { display: "flex", children: /* @__PURE__ */ jsxRuntime.jsx(
-            Button,
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            material.Box,
             {
-              onClick,
-              variant: "contained",
-              color: "primary",
-              disabled: buttonIsDisabled,
-              size,
-              children: labelButton
+              sx: {
+                display: "flex"
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                Button,
+                {
+                  onClick,
+                  variant: "contained",
+                  color: "primary",
+                  disabled: buttonIsDisabled,
+                  size,
+                  children: labelButton
+                }
+              )
             }
-          ) })
+          )
         }
       )
     ] }) })
@@ -6004,12 +6201,13 @@ function _MessageField({
   "aria-label": ariaLabel,
   ...otherProps
 }, ref) {
-  const stopLabel = TablePaginationActions.useTranslationWithFallback("c4r.button.stop", stopText);
-  const typeToSendLabel = TablePaginationActions.useTranslationWithFallback(
+  var _a, _b;
+  const stopLabel = utils.useTranslationWithFallback("c4r.button.stop", stopText);
+  const typeToSendLabel = utils.useTranslationWithFallback(
     "c4r.button.typeToSend",
     typeToSendText
   );
-  const sendLabel = TablePaginationActions.useTranslationWithFallback("c4r.button.send", sendText);
+  const sendLabel = utils.useTranslationWithFallback("c4r.button.send", sendText);
   const inputIsDisabled = disabled || analyzing;
   const currentValue = value ?? defaultValue ?? "";
   const buttonIsDisabled = currentValue === "" || disabledButton || disabled;
@@ -6075,9 +6273,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
               }
             ),
@@ -6276,7 +6481,7 @@ const SearchFieldEndAdornment = ({
           },
           children: [
             loading ? /* @__PURE__ */ jsxRuntime.jsx(LoadingSearchIcon, { size: paletteUtils.ICON_SIZE_MEDIUM }) : showClearButton ? clearButton ?? /* @__PURE__ */ jsxRuntime.jsx(
-              TablePaginationActions.IconButton,
+              utils.IconButton,
               {
                 onClick: onClear,
                 size,
@@ -6312,8 +6517,8 @@ function _SearchField({
   variant = "filled",
   size = "small",
   dense = false,
+  slotProps,
   InputProps,
-  inputProps,
   startAdornment,
   endAdornment,
   onFocus,
@@ -6328,7 +6533,7 @@ function _SearchField({
 }, ref) {
   const [isInputFocused, setIsInputFocused] = React.useState(false);
   const clearButtonVisibility = !disabled && Boolean(value ?? defaultValue) && showClearButton;
-  const clearButtonLabelValue = TablePaginationActions.useTranslationWithFallback(
+  const clearButtonLabelValue = utils.useTranslationWithFallback(
     "c4r.button.clear",
     clearButtonLabel
   );
@@ -6360,36 +6565,47 @@ function _SearchField({
       disabled,
       minimized,
       dense,
-      InputProps: {
-        onFocus: handleFocus,
-        onBlur: handleBlur,
-        startAdornment: /* @__PURE__ */ jsxRuntime.jsx(
-          SearchFieldStartAdornment,
-          {
-            minimized,
-            loading,
-            disabled,
-            startAdornment
-          }
-        ),
-        endAdornment: !minimized && /* @__PURE__ */ jsxRuntime.jsx(
-          SearchFieldEndAdornment,
-          {
-            disabled,
-            loading,
-            showClearButton: clearButtonVisibility,
-            clearButton,
-            clearButtonLabel: clearButtonLabelValue,
-            onClear: handleClear,
-            size,
-            endAdornment
-          }
-        ),
-        ...InputProps
-      },
-      inputProps: {
-        role: "searchbox",
-        ...inputProps
+      slotProps: {
+        ...slotProps,
+        input: mergeSlotProps({
+          ownProps: {
+            onFocus: handleFocus,
+            onBlur: handleBlur,
+            startAdornment: /* @__PURE__ */ jsxRuntime.jsx(
+              SearchFieldStartAdornment,
+              {
+                minimized,
+                loading,
+                disabled,
+                startAdornment
+              }
+            ),
+            endAdornment: !minimized && /* @__PURE__ */ jsxRuntime.jsx(
+              SearchFieldEndAdornment,
+              {
+                disabled,
+                loading,
+                showClearButton: clearButtonVisibility,
+                clearButton,
+                clearButtonLabel: clearButtonLabelValue,
+                onClear: handleClear,
+                size,
+                endAdornment
+              }
+            )
+          },
+          // 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,
@@ -6464,7 +6680,7 @@ const Alert = material.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 && {
@@ -6509,7 +6725,7 @@ function Snackbar({
   disablePortal,
   ...rest
 }) {
-  const closeTooltipLabel = TablePaginationActions.useTranslationWithFallback(
+  const closeTooltipLabel = utils.useTranslationWithFallback(
     "c4r.button.close",
     closeTooltipText
   );
@@ -6524,7 +6740,7 @@ function Snackbar({
       open,
       autoHideDuration: duration,
       onClose,
-      TransitionComponent: autoWidth ? material.Fade : material.Slide,
+      slots: { transition: autoWidth ? material.Fade : material.Slide, ...rest.slots },
       "data-auto-width": autoWidth,
       children: /* @__PURE__ */ jsxRuntime.jsxs(
         Content$1,
@@ -6548,7 +6764,7 @@ function Snackbar({
               }
             ),
             closeable && /* @__PURE__ */ jsxRuntime.jsx(CloseButtonWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
-              TablePaginationActions.IconButton,
+              utils.IconButton,
               {
                 color: "default",
                 onClick: (e) => onClose(e, "timeout"),
@@ -6706,7 +6922,7 @@ const TagLabel = material.styled("div", {
 })(({ type, theme }) => ({
   display: "flex",
   alignItems: "center",
-  ...TablePaginationActions.ellipsisStyles,
+  ...utils.ellipsisStyles,
   paddingTop: type === "code" ? theme.spacing(0.25) : void 0
 }));
 function _Tag({
@@ -6827,7 +7043,7 @@ function _UploadFieldBase({
   focused,
   buttonText = "Browse",
   inProgress,
-  InputProps,
+  slotProps,
   size = "small",
   hasFiles,
   cursor = "pointer",
@@ -6845,25 +7061,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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+            FilesAction,
+            {
+              buttonText,
+              hasFiles,
+              size,
+              error,
+              disabled: !!dragOver,
+              handleReset,
+              handleOpen,
+              inProgress
+            }
+          )
+        })
       },
       "data-cursor": cursor,
       "data-drag-over": dragOver,
@@ -6882,17 +7103,17 @@ function useFileUpload({
   dragPlaceholderText,
   dragActivePlaceholderText
 }) {
-  const filesSelectedLabel = TablePaginationActions.useTranslationWithFallback(
+  const filesSelectedLabel = utils.useTranslationWithFallback(
     "c4r.form.filesSelected",
     filesSelectedText,
     { count: (files == null ? void 0 : files.length) ?? 0 }
   );
-  const dragPlaceholderLabel = TablePaginationActions.useTranslationWithFallback(
+  const dragPlaceholderLabel = utils.useTranslationWithFallback(
     "c4r.form.dragPlaceholder",
     dragPlaceholderText,
     { count: multiple ? 0 : 1 }
   );
-  const dragActivePlaceholderLabel = TablePaginationActions.useTranslationWithFallback(
+  const dragActivePlaceholderLabel = utils.useTranslationWithFallback(
     "c4r.form.dragActivePlaceholder",
     dragActivePlaceholderText,
     { count: multiple ? 0 : 1 }
@@ -6981,6 +7202,7 @@ function _UploadField({
   focused,
   nativeInputProps,
   "data-testid": dataTestId,
+  slotProps,
   ...props
 }, ref) {
   const accept = _accept ?? DEFAULT_ACCEPT;
@@ -7013,7 +7235,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
       }
@@ -7046,7 +7274,7 @@ const Content = material.styled("span", {
   if (lines > 1) {
     return {
       display: "-webkit-box",
-      ...TablePaginationActions.ellipsisStyles,
+      ...utils.ellipsisStyles,
       whiteSpace: "initial !important",
       WebkitLineClamp: lines,
       WebkitBoxOrient: "vertical",
@@ -7060,7 +7288,7 @@ const Content = material.styled("span", {
       overflow: "hidden",
       "& > *:nth-of-type(1)": {
         display: "block",
-        ...TablePaginationActions.ellipsisStyles
+        ...utils.ellipsisStyles
       }
     };
   }
@@ -7070,13 +7298,13 @@ const Content = material.styled("span", {
       flex: "1",
       "& > *": {
         display: "block",
-        ...TablePaginationActions.ellipsisStyles
+        ...utils.ellipsisStyles
       }
     };
   }
   return {
     display: "block",
-    ...TablePaginationActions.ellipsisStyles,
+    ...utils.ellipsisStyles,
     fontWeight: "inherit",
     "& > *": { display: "inline" }
   };
@@ -7434,13 +7662,13 @@ const ListItem = React.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) {
@@ -7468,22 +7696,32 @@ function resolveTypographyProps(defaultProps, userProps) {
 function _ListItemText({
   primaryTypographyProps,
   secondaryTypographyProps,
+  slotProps,
   ...props
 }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     material.ListItemText,
     {
       ...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
+        })
+      }
     }
   );
 }
@@ -7504,13 +7742,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__ */ jsxRuntime.jsx(material.Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: actions })
+        actions && /* @__PURE__ */ jsxRuntime.jsx(
+          material.Stack,
+          {
+            direction: "row",
+            spacing: 0.5,
+            sx: {
+              alignItems: "center"
+            },
+            children: actions
+          }
+        )
       ]
     }
   );
@@ -7518,7 +7766,7 @@ function ListItemRightContent({
 ListItemRightContent.displayName = "ListItemRightContent";
 const DEFAULT_TYPOGRAPHY_PROPS = {
   variant: "caption",
-  color: "text.secondary",
+  color: "textSecondary",
   component: "span"
 };
 function mergeTypographyProps(defaultProps, userProps) {
@@ -7569,7 +7817,7 @@ function _ListSubheader({
       "data-disable-gutters": effectiveDisableGutters,
       "data-disable-padding": effectiveDisablePadding,
       children: /* @__PURE__ */ jsxRuntime.jsx(
-        material.Typography,
+        paletteUtils.Typography,
         {
           ...mergeTypographyProps(
             DEFAULT_TYPOGRAPHY_PROPS,
@@ -7596,7 +7844,7 @@ function _ListItemIcon({ iconProps, sx, ...otherProps }, ref) {
       "data-icon-color": (iconProps == null ? void 0 : iconProps.color) ?? "text.secondary",
       sx: {
         // Apply color only to SVGs that are not inside Radio or Checkbox
-        [TablePaginationActions.SVG_SELECTOR]: {
+        [utils.SVG_SELECTOR]: {
           color
         },
         ...sx
@@ -7807,9 +8055,9 @@ Object.defineProperty(exports, "ListItemSecondaryAction", {
   get: () => material.ListItemSecondaryAction
 });
 exports.Typography = paletteUtils.Typography;
-exports.IconButton = TablePaginationActions.IconButton;
-exports.MenuItem = TablePaginationActions.MenuItem;
-exports.TablePaginationActions = TablePaginationActions.TablePaginationActions;
+exports.IconButton = utils.IconButton;
+exports.MenuItem = utils.MenuItem;
+exports.TablePaginationActions = utils.TablePaginationActions;
 exports.AUTOCOMPLETE_GROUP_HEADER_PROPERTY = AUTOCOMPLETE_GROUP_HEADER_PROPERTY;
 exports.AccordionGroup = AccordionGroup;
 exports.Alert = Alert$1;