@carto/meridian-ds 4.2.0 → 4.2.1-alpha.08dfe9f.307

package/CHANGELOG.md

@@ -2,6 +2,29 @@
 
 ## Unreleased
 
+- chore(deps): MUI v5 → v9 upgrade (integration branch) [sc-557186] [#485](https://github.com/CartoDB/meridian-ds/pull/485)
+- chore(deps): upgrade MUI core to v6 + prep peers/react-is [sc-563129] [#484](https://github.com/CartoDB/meridian-ds/pull/484)
+- chore(deps): bump yaml from 1.10.2 to 1.10.3 [#501](https://github.com/CartoDB/meridian-ds/pull/501)
+- chore(deps): bump postcss from 8.5.16 to 8.5.23 [#498](https://github.com/CartoDB/meridian-ds/pull/498)
+- chore(deps): bump picomatch from 2.3.1 to 2.3.2 [#500](https://github.com/CartoDB/meridian-ds/pull/500)
+- chore(deps-dev): bump vitest from 3.2.4 to 3.2.6 [#499](https://github.com/CartoDB/meridian-ds/pull/499)
+- chore(deps): bump lodash from 4.17.21 to 4.18.1 [#502](https://github.com/CartoDB/meridian-ds/pull/502)
+- chore(deps-dev): bump the storybook group with 7 updates [#493](https://github.com/CartoDB/meridian-ds/pull/493)
+- chore(deps-dev): bump @babel/core from 7.26.0 to 7.29.6 in /scripts/import-figma-icons [#491](https://github.com/CartoDB/meridian-ds/pull/491)
+- chore(deps): bump ws from 8.18.0 to 8.21.1 [#492](https://github.com/CartoDB/meridian-ds/pull/492)
+- chore(deps): bump @babel/core from 7.26.0 to 7.29.7 [#490](https://github.com/CartoDB/meridian-ds/pull/490)
+- chore(deps-dev): bump @vitest/browser from 3.2.4 to 3.2.7 [#488](https://github.com/CartoDB/meridian-ds/pull/488)
+- chore(deps): bump fast-uri from 3.0.3 to 3.1.4 [#489](https://github.com/CartoDB/meridian-ds/pull/489)
+- chore(deps): bump svgo from 3.3.2 to 3.3.4 in /scripts/import-figma-icons [#487](https://github.com/CartoDB/meridian-ds/pull/487)
+- chore(deps): bump brace-expansion from 1.1.12 to 1.1.16 [#483](https://github.com/CartoDB/meridian-ds/pull/483)
+- chore(deps-dev): bump the storybook group across 1 directory with 11 updates [#481](https://github.com/CartoDB/meridian-ds/pull/481)
+- chore(deps): bump qs from 6.15.1 to 6.15.3 [#476](https://github.com/CartoDB/meridian-ds/pull/476)
+- chore(deps): bump js-yaml from 4.1.1 to 4.3.0 [#468](https://github.com/CartoDB/meridian-ds/pull/468)
+- chore(deps): bump js-yaml from 4.1.1 to 4.3.0 in /scripts/import-figma-icons [#467](https://github.com/CartoDB/meridian-ds/pull/467)
+- chore(deps): bump form-data from 4.0.4 to 4.0.6 [#457](https://github.com/CartoDB/meridian-ds/pull/457)
+- chore(deps): bump undici from 7.25.0 to 7.28.0 [#456](https://github.com/CartoDB/meridian-ds/pull/456)
+- chore(deps-dev): bump dompurify from 3.2.6 to 3.4.11 [#455](https://github.com/CartoDB/meridian-ds/pull/455)
+
 ## 4.0
 
 ### 4.2.0

package/dist/{TablePaginationActions-WuqMxOyM.cjs → TablePaginationActions-B3Vtruj_.cjs}

@@ -2,7 +2,7 @@
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const material = require("@mui/material");
-const paletteUtils = require("./palette-utils-DX1R_i9N.cjs");
+const paletteUtils = require("./palette-utils-Dt4yj7Pv.cjs");
 const iconsMaterial = require("@mui/icons-material");
 const reactIntl = require("react-intl");
 const useImperativeIntl = require("./useImperativeIntl-lvkv1UNL.cjs");
@@ -249,10 +249,12 @@ function _IconButton({
               variant,
               color,
               active,
-              disabled: disabled || loading,
+              loading,
+              loadingIndicator: /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 18, color: "inherit" }),
+              disabled,
               role: "button",
               "aria-label": ariaLabel,
-              children: loading ? /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 18, color: "inherit" }) : icon
+              children: loading ? null : icon
             }
           )
         }

package/dist/{TablePaginationActions-BvKjTAmB.js → TablePaginationActions-CpCi2L7U.js}

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { styled, MenuItem as MenuItem$1, Tooltip, CircularProgress, IconButton as IconButton$1, Box } from "@mui/material";
-import { d as MENU_ITEM_SIZE_DENSE, M as MENU_ITEM_SIZE_EXTENDED, e as ICON_SIZE_LARGE, a as ICON_SIZE_MEDIUM, I as ICON_SIZE_SMALL } from "./palette-utils-d-9NY8qw.js";
+import { d as MENU_ITEM_SIZE_DENSE, M as MENU_ITEM_SIZE_EXTENDED, e as ICON_SIZE_LARGE, a as ICON_SIZE_MEDIUM, I as ICON_SIZE_SMALL } from "./palette-utils-Ccd-r_Nr.js";
 import { KeyboardArrowLeftOutlined, KeyboardArrowRightOutlined } from "@mui/icons-material";
 import { useIntl } from "react-intl";
 import { u as useImperativeIntl } from "./useImperativeIntl-BUw_LXAO.js";
@@ -248,10 +248,12 @@ function _IconButton({
               variant,
               color,
               active,
-              disabled: disabled || loading,
+              loading,
+              loadingIndicator: /* @__PURE__ */ jsx(CircularProgress, { size: 18, color: "inherit" }),
+              disabled,
               role: "button",
               "aria-label": ariaLabel,
-              children: loading ? /* @__PURE__ */ jsx(CircularProgress, { size: 18, color: "inherit" }) : icon
+              children: loading ? null : icon
             }
           )
         }

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-DX1R_i9N.cjs");
+const paletteUtils = require("../palette-utils-Dt4yj7Pv.cjs");
 const iconsMaterial = require("@mui/icons-material");
 const ArrowDown = require("../ArrowDown-84Oc8r9k.cjs");
 const ReactWindow = require("react-window");
-const TablePaginationActions = require("../TablePaginationActions-WuqMxOyM.cjs");
+const TablePaginationActions = require("../TablePaginationActions-B3Vtruj_.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,
@@ -103,46 +90,17 @@ function _Button({
     "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,7 +109,20 @@ 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 })
+          ]
+        }
+      )
     }
   );
 }
@@ -382,25 +353,27 @@ 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: {
+        input: {
+          ...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
+            }
+          ) })
+        }
+      }
     }
   );
 }
@@ -651,7 +624,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 +635,6 @@ const UnselectButton = material.styled(material.InputAdornment, {
     color: theme.palette.text.hint
   },
   ...size === "medium" && {
-    top: theme.spacing(3),
     right: theme.spacing(5)
   }
 }));
@@ -1553,9 +1527,11 @@ 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
+      slotProps: {
+        listbox: {
+          "aria-multiselectable": false,
+          ...props.ListboxProps
+        }
       }
     }
   );
@@ -1880,12 +1856,16 @@ function _CreatableAutocomplete({
       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: {
+        listbox: {
+          component: AutocompleteList,
+          ...listboxProps
+        }
+      }
     }
   );
 }
@@ -1957,14 +1937,18 @@ function _MultipleAutocomplete({
       getOptionLabel,
       renderOption: renderOption ?? multipleRenderOption,
       renderTags: finalRenderTags,
-      ListboxComponent: AutocompleteList,
-      ListboxProps: listboxProps,
       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: {
+        listbox: {
+          component: AutocompleteList,
+          ...listboxProps
+        }
+      }
     }
   );
 }
@@ -3338,11 +3322,12 @@ function _Dialog({
         fullScreen,
         height,
         width,
-        hasForm
+        hasForm,
+        // v7 renders role="dialog" on the paper, so the accessible name has to
+        // live there for getByRole('dialog', { name }) to match.
+        ...ariaLabel && { "aria-label": ariaLabel }
       },
       fullScreen,
-      role: "section",
-      "aria-label": ariaLabel,
       "data-testid": dataTestId,
       "data-size": size,
       "data-width": width,
@@ -6493,7 +6478,7 @@ function Snackbar({
       open,
       autoHideDuration: duration,
       onClose,
-      TransitionComponent: autoWidth ? material.Fade : material.Slide,
+      slots: { transition: autoWidth ? material.Fade : material.Slide },
       "data-auto-width": autoWidth,
       children: /* @__PURE__ */ jsxRuntime.jsxs(
         Content$1,

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, Typography as Typography$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-d-9NY8qw.js";
+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-Ccd-r_Nr.js";
 import { OpenInNewOutlined, VisibilityOffOutlined, VisibilityOutlined, Cancel, ContentCopyOutlined, AddCircleOutlineOutlined, MenuOutlined, MoreVertOutlined, HelpOutline, ErrorOutline, 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-BvKjTAmB.js";
-import { T } from "../TablePaginationActions-BvKjTAmB.js";
+import { u as useTranslationWithFallback, I as IconButton, M as MenuItem$1, g as getThemeColor, e as ellipsisStyles, S as SVG_SELECTOR } from "../TablePaginationActions-CpCi2L7U.js";
+import { T } from "../TablePaginationActions-CpCi2L7U.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";
@@ -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,7 +92,20 @@ 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 })
+          ]
+        }
+      )
     }
   );
 }
@@ -365,25 +336,27 @@ 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: {
+        input: {
+          ...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
+            }
+          ) })
+        }
+      }
     }
   );
 }
@@ -634,7 +607,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 +618,6 @@ const UnselectButton = styled(InputAdornment, {
     color: theme.palette.text.hint
   },
   ...size === "medium" && {
-    top: theme.spacing(3),
     right: theme.spacing(5)
   }
 }));
@@ -1536,9 +1510,11 @@ 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
+      slotProps: {
+        listbox: {
+          "aria-multiselectable": false,
+          ...props.ListboxProps
+        }
       }
     }
   );
@@ -1863,12 +1839,16 @@ function _CreatableAutocomplete({
       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: {
+        listbox: {
+          component: AutocompleteList,
+          ...listboxProps
+        }
+      }
     }
   );
 }
@@ -1940,14 +1920,18 @@ function _MultipleAutocomplete({
       getOptionLabel,
       renderOption: renderOption ?? multipleRenderOption,
       renderTags: finalRenderTags,
-      ListboxComponent: AutocompleteList,
-      ListboxProps: listboxProps,
       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: {
+        listbox: {
+          component: AutocompleteList,
+          ...listboxProps
+        }
+      }
     }
   );
 }
@@ -3321,11 +3305,12 @@ function _Dialog({
         fullScreen,
         height,
         width,
-        hasForm
+        hasForm,
+        // v7 renders role="dialog" on the paper, so the accessible name has to
+        // live there for getByRole('dialog', { name }) to match.
+        ...ariaLabel && { "aria-label": ariaLabel }
       },
       fullScreen,
-      role: "section",
-      "aria-label": ariaLabel,
       "data-testid": dataTestId,
       "data-size": size,
       "data-width": width,
@@ -6476,7 +6461,7 @@ function Snackbar({
       open,
       autoHideDuration: duration,
       onClose,
-      TransitionComponent: autoWidth ? Fade : Slide,
+      slots: { transition: autoWidth ? Fade : Slide },
       "data-auto-width": autoWidth,
       children: /* @__PURE__ */ jsxs(
         Content$1,