@carto/meridian-ds 4.4.1-alpha.fbe7378.320 → 5.0.0

package/CHANGELOG.md

@@ -2,8 +2,20 @@
 
 ## 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)
+## 5.0
+
+### 5.0.0
+
+- chore(deps): upgrade MUI core + MUI X from v5 to v9 [sc-557186] [#485](https://github.com/CartoDB/meridian-ds/pull/485), in three phases — v6 [#484](https://github.com/CartoDB/meridian-ds/pull/484), v7 [#505](https://github.com/CartoDB/meridian-ds/pull/505), v9 [#524](https://github.com/CartoDB/meridian-ds/pull/524).
+- **BREAKING** chore(theme): dot-path palette colors are inert on MUI components — `color='text.secondary'` no longer resolves; move it to `sx`.
+- **BREAKING** chore(fields): `InputProps` / `inputProps` are gone from every component inheriting `TextFieldProps`. Use `slotProps.input` or `slotProps.htmlInput`.
+- **BREAKING** chore(Dialog): `PaperProps` removed — use `slotProps.paper`. The dialog role, `aria-label` and `data-*` now sit on the paper, so selectors keyed on `.MuiDialog-root` stop matching.
+- **BREAKING** chore(Autocomplete): `renderTags` → `renderValue`, and `ListboxComponent` / `PaperComponent` / `MenuListProps` → `slots` / `slotProps`.
+- **BREAKING** chore(MenuItem): `MenuItem` throws outside a `MenuList` or `Menu` — hand-rolled dropdown surfaces must wrap their rows.
+- **BREAKING** chore(date-pickers): the field renders editable `role='spinbutton'` sections instead of a single `<input>`; `.MuiInputBase-root` and the `PickersYear` / `PickersMonth` wrappers no longer match; `DatePicker`'s `placeholder` is deprecated and reaches nobody. `AdapterDateFns` now requires date-fns v3/v4 — on v2, import `@mui/x-date-pickers/AdapterDateFnsV2`.
+- **BREAKING** chore(icons): the filled `*Outline` icons are gone — rename to `*Outlined`.
+- **BREAKING** chore(Divider): drop the `light` prop.
+- **BREAKING** chore(theme): `cartoThemeOptions` is typed `ThemeOptions`, so its members are optional — read values from the exported `theme` instead.
 
 ## 4.0
 

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-m2Gb_Pd2.cjs");
+const paletteUtils = require("../palette-utils-NhMBL9rx.cjs");
 const iconsMaterial = require("@mui/icons-material");
 const ArrowDown = require("../ArrowDown-84Oc8r9k.cjs");
 const ReactWindow = require("react-window");
-const utils = require("../utils-DjaqQq9F.cjs");
+const utils = require("../utils-DOVvVhN1.cjs");
 const Search = require("../Search-BsaXrSzs.cjs");
 require("cartocolor");
 const reactCodemirror2 = require("react-codemirror2");
@@ -127,6 +127,7 @@ function _Button({
   );
 }
 const Button = React.forwardRef(_Button);
+Button.displayName = "Button";
 const idCounter = {};
 function uniqueId(prefix = "$lodash$") {
   if (!idCounter[prefix]) {
@@ -432,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,
     {
@@ -480,13 +486,18 @@ function _SelectField({
             ...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,
@@ -986,6 +997,7 @@ function _Link({
   );
 }
 const Link = React.forwardRef(_Link);
+Link.displayName = "Link";
 function _CircularProgress({
   color = "primary",
   size = 40,
@@ -1322,8 +1334,11 @@ const { FixedSizeList: FixedSizeList$1 } = ReactWindow__namespace;
 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>.
-  shouldForwardProp: (prop) => prop !== "hasFilters"
+  // 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`
@@ -1623,7 +1638,14 @@ function _Autocomplete({
       slotProps: {
         ...slotProps,
         listbox: mergeSlotProps({
-          ownProps: { "aria-multiselectable": false },
+          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
         })
       }
@@ -3313,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,
@@ -3325,6 +3365,22 @@ 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,
+      // The focus trap focuses the paper when nothing inside autofocuses, and
+      // Chromium treats that as `:focus-visible` — the global ring would frame
+      // the whole dialog. It's a container, not a control.
+      "&:focus-visible": {
+        outline: "none !important"
+      },
+      "@media print": {
+        overflowY: "visible",
+        boxShadow: "none"
+      },
       display: "flex",
       flexDirection: "column",
       margin: theme.spacing(5),
@@ -3431,6 +3487,7 @@ function _Dialog({
   hasForm,
   "aria-label": ariaLabel,
   "data-testid": dataTestId,
+  slots,
   slotProps,
   ...props
 }, ref) {
@@ -3478,7 +3535,7 @@ function _Dialog({
   return /* @__PURE__ */ jsxRuntime.jsx(
     material.Dialog,
     {
-      slots: { paper: DialogPaper },
+      slots: { ...slots, paper: DialogPaper },
       slotProps: {
         ...slotProps,
         paper: mergeSlotProps({
@@ -6467,6 +6524,7 @@ function _SearchField({
   size = "small",
   dense = false,
   slotProps,
+  InputProps,
   startAdornment,
   endAdornment,
   onFocus,
@@ -6542,7 +6600,13 @@ function _SearchField({
               }
             )
           },
-          consumerProps: slotProps == null ? void 0 : slotProps.input
+          // 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" },
@@ -7144,6 +7208,7 @@ function _UploadField({
   focused,
   nativeInputProps,
   "data-testid": dataTestId,
+  slotProps,
   ...props
 }, ref) {
   const accept = _accept ?? DEFAULT_ACCEPT;
@@ -7176,7 +7241,13 @@ function _UploadField({
         dragOver,
         inProgress,
         hasFiles: Boolean(filesText),
-        slotProps: { input: inputEvents },
+        slotProps: {
+          ...slotProps,
+          input: mergeSlotProps({
+            ownProps: inputEvents,
+            consumerProps: slotProps == null ? void 0 : slotProps.input
+          })
+        },
         buttonText,
         "data-testid": dataTestId
       }
@@ -7752,7 +7823,7 @@ function _ListSubheader({
       "data-disable-gutters": effectiveDisableGutters,
       "data-disable-padding": effectiveDisablePadding,
       children: /* @__PURE__ */ jsxRuntime.jsx(
-        material.Typography,
+        paletteUtils.Typography,
         {
           ...mergeTypographyProps(
             DEFAULT_TYPOGRAPHY_PROPS,

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, 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 { styled, Button as Button$1, CircularProgress as CircularProgress$1, Tooltip, Popper, Grow, Paper, ClickAwayListener, MenuList as MenuList$1, MenuItem, ButtonGroup as ButtonGroup$1, Box, TextField, InputAdornment, FormControl, InputLabel, FormHelperText, Select, Checkbox, Link as Link$1, ListItemText as ListItemText$1, IconButton as IconButton$1, ToggleButtonGroup as ToggleButtonGroup$1, Stack, Autocomplete as Autocomplete$1, Divider, ListItemIcon as ListItemIcon$1, createFilterOptions, alpha, useTheme, Toolbar as Toolbar$1, AppBar as AppBar$1, Dialog as Dialog$1, Chip as Chip$1, DialogTitle as DialogTitle$1, DialogContent as DialogContent$1, Fade, AlertTitle, Alert as Alert$2, DialogActions as DialogActions$1, Slide, Accordion, AccordionSummary, AccordionDetails, Avatar as Avatar$1, Menu as Menu$2, useMediaQuery, Portal, Snackbar as Snackbar$1, List as List$2, ListItemButton as ListItemButton$1, ListItem as ListItem$1, ListSubheader as ListSubheader$1, Popover } from "@mui/material";
 import { ListItemAvatar, ListItemSecondaryAction } from "@mui/material";
-import { T as Typography, I as ICON_SIZE_SMALL, m as mergeSx, a as ICON_SIZE_MEDIUM, i as isPalettePath, M as MENU_ITEM_SIZE_EXTENDED, b as MENU_ITEM_SIZE_DEFAULT, c as MENU_LIST_MAX_SIZE, d as MENU_ITEM_SIZE_DENSE, A as APPBAR_SIZE, e as ICON_SIZE_LARGE, N as NOTIFICATION_DURATION_IN_MS, L as LIST_MAX_SIZE, f as LIST_ITEM_SIZE_DENSE, g as LIST_ITEM_SIZE_DEFAULT, h as LIST_OVERSCAN_ITEMS_COUNT, F as FontWeight, r as resolvePalettePath } from "../palette-utils-BCQ0HY6h.js";
+import { T as Typography, I as ICON_SIZE_SMALL, m as mergeSx, a as ICON_SIZE_MEDIUM, i as isPalettePath, M as MENU_ITEM_SIZE_EXTENDED, b as MENU_ITEM_SIZE_DEFAULT, c as MENU_LIST_MAX_SIZE, d as MENU_ITEM_SIZE_DENSE, A as APPBAR_SIZE, e as ICON_SIZE_LARGE, N as NOTIFICATION_DURATION_IN_MS, L as LIST_MAX_SIZE, f as LIST_ITEM_SIZE_DENSE, g as LIST_ITEM_SIZE_DEFAULT, h as LIST_OVERSCAN_ITEMS_COUNT, F as FontWeight, r as resolvePalettePath } from "../palette-utils-BmPPGzZt.js";
 import { OpenInNewOutlined, VisibilityOffOutlined, VisibilityOutlined, Cancel, ContentCopyOutlined, AddCircleOutlineOutlined, MenuOutlined, MoreVertOutlined, HelpOutlineOutlined, ErrorOutlineOutlined, ArrowBackOutlined, CloseOutlined, Check, TodayOutlined, StopCircleOutlined, ArrowUpwardOutlined } from "@mui/icons-material";
 import { F as ForwardedComponent$1 } from "../ArrowDown-Bho9Ssnw.js";
 import * as ReactWindow from "react-window";
-import { u as useTranslationWithFallback, I as IconButton, M as MenuItem$1, g as getThemeColor, e as ellipsisStyles, S as SVG_SELECTOR } from "../utils-BkM2jqPv.js";
-import { T } from "../utils-BkM2jqPv.js";
+import { u as useTranslationWithFallback, I as IconButton, M as MenuItem$1, g as getThemeColor, e as ellipsisStyles, S as SVG_SELECTOR } from "../utils-7LZAkgSl.js";
+import { T } from "../utils-7LZAkgSl.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";
@@ -110,6 +110,7 @@ function _Button({
   );
 }
 const Button = forwardRef(_Button);
+Button.displayName = "Button";
 const idCounter = {};
 function uniqueId(prefix = "$lodash$") {
   if (!idCounter[prefix]) {
@@ -415,11 +416,16 @@ function _SelectField({
   fullWidth,
   required,
   "aria-label": ariaLabel,
+  SelectDisplayProps,
   ...otherProps
 }, ref) {
   const isSmall = size === "small";
   const [defaultId] = useState(() => uniqueId("select-label-"));
   const ariaLabelledBy = label ? labelId ?? defaultId : void 0;
+  const [fallbackDisplayId] = useState(() => uniqueId("select-value-"));
+  const displayId = (SelectDisplayProps == null ? void 0 : SelectDisplayProps.id) ?? (name ? `mui-component-select-${name}` : fallbackDisplayId);
+  const isUnnamed = !ariaLabelledBy && !ariaLabel;
+  const selfLabelProps = isUnnamed ? { id: displayId, "aria-labelledby": displayId } : void 0;
   return /* @__PURE__ */ jsxs(
     FormControl,
     {
@@ -463,13 +469,18 @@ function _SelectField({
             ...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,
@@ -969,6 +980,7 @@ function _Link({
   );
 }
 const Link = forwardRef(_Link);
+Link.displayName = "Link";
 function _CircularProgress({
   color = "primary",
   size = 40,
@@ -1305,8 +1317,11 @@ const { FixedSizeList: FixedSizeList$1 } = ReactWindow;
 const List$1 = styled(MenuList$1, {
   // MenuList is a component, so emotion forwards every prop to it (unlike a
   // string tag, where invalid HTML attributes are dropped) — `hasFilters` would
-  // reach the underlying <ul>.
-  shouldForwardProp: (prop) => prop !== "hasFilters"
+  // 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`
@@ -1606,7 +1621,14 @@ function _Autocomplete({
       slotProps: {
         ...slotProps,
         listbox: mergeSlotProps({
-          ownProps: { "aria-multiselectable": false },
+          ownProps: {
+            "aria-multiselectable": false,
+            component: MenuList$1
+            // `useAutocomplete`'s `singleRenderOption` emits Meridian MenuItems,
+            // and on v9 a MenuItem throws without a MenuListContext. Set through
+            // `component` rather than `slots.listbox`: swapping the slot would
+            // drop the listbox's own styles (max-height/overflow) with it.
+          },
           consumerProps: slotProps == null ? void 0 : slotProps.listbox
         })
       }
@@ -3296,7 +3318,25 @@ const dialogDimensionsBySize = {
   }
 };
 const DialogPaper = styled(Paper, {
-  shouldForwardProp: (prop) => !["fullScreen", "height", "width", "hasForm"].includes(prop)
+  // `as` must stay with emotion: MUI renders the paper slot as
+  // `<PaperSlot as={Paper} …>`, so forwarding `as` to Paper shadows a
+  // consumer's `slotProps.paper.component` and a form dialog renders a div.
+  //
+  // `ownerState`/`theme`/`sx` mirror MUI's own `slotShouldForwardProp`, which a
+  // custom `shouldForwardProp` replaces rather than extends. As the Dialog's
+  // `paper` slot this receives the *Dialog's* ownerState; Paper spreads it over
+  // its own, so `variant: 'elevation'` stops matching and neither the elevation
+  // shadow nor the `outlined` border is emitted.
+  shouldForwardProp: (prop) => ![
+    "ownerState",
+    "theme",
+    "sx",
+    "as",
+    "fullScreen",
+    "height",
+    "width",
+    "hasForm"
+  ].includes(prop)
 })(
   ({
     fullScreen,
@@ -3308,6 +3348,22 @@ const DialogPaper = styled(Paper, {
   }) => ({
     "&.MuiPaper-root": {
       position: "relative",
+      // MUI's Dialog paper styles are replaced, not composed, once this is the
+      // `paper` slot — so carry the ones consumers depend on. Without
+      // `overflowY` a fullScreen dialog cannot scroll and overflowing content is
+      // unreachable.
+      overflowY: "auto",
+      outline: 0,
+      // The focus trap focuses the paper when nothing inside autofocuses, and
+      // Chromium treats that as `:focus-visible` — the global ring would frame
+      // the whole dialog. It's a container, not a control.
+      "&:focus-visible": {
+        outline: "none !important"
+      },
+      "@media print": {
+        overflowY: "visible",
+        boxShadow: "none"
+      },
       display: "flex",
       flexDirection: "column",
       margin: theme.spacing(5),
@@ -3414,6 +3470,7 @@ function _Dialog({
   hasForm,
   "aria-label": ariaLabel,
   "data-testid": dataTestId,
+  slots,
   slotProps,
   ...props
 }, ref) {
@@ -3461,7 +3518,7 @@ function _Dialog({
   return /* @__PURE__ */ jsx(
     Dialog$1,
     {
-      slots: { paper: DialogPaper },
+      slots: { ...slots, paper: DialogPaper },
       slotProps: {
         ...slotProps,
         paper: mergeSlotProps({
@@ -6450,6 +6507,7 @@ function _SearchField({
   size = "small",
   dense = false,
   slotProps,
+  InputProps,
   startAdornment,
   endAdornment,
   onFocus,
@@ -6525,7 +6583,13 @@ function _SearchField({
               }
             )
           },
-          consumerProps: slotProps == null ? void 0 : slotProps.input
+          // 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" },
@@ -7127,6 +7191,7 @@ function _UploadField({
   focused,
   nativeInputProps,
   "data-testid": dataTestId,
+  slotProps,
   ...props
 }, ref) {
   const accept = _accept ?? DEFAULT_ACCEPT;
@@ -7159,7 +7224,13 @@ function _UploadField({
         dragOver,
         inProgress,
         hasFiles: Boolean(filesText),
-        slotProps: { input: inputEvents },
+        slotProps: {
+          ...slotProps,
+          input: mergeSlotProps({
+            ownProps: inputEvents,
+            consumerProps: slotProps == null ? void 0 : slotProps.input
+          })
+        },
         buttonText,
         "data-testid": dataTestId
       }
@@ -7735,7 +7806,7 @@ function _ListSubheader({
       "data-disable-gutters": effectiveDisableGutters,
       "data-disable-padding": effectiveDisablePadding,
       children: /* @__PURE__ */ jsx(
-        Typography$1,
+        Typography,
         {
           ...mergeTypographyProps(
             DEFAULT_TYPOGRAPHY_PROPS,

package/dist/metadata.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.4.1-alpha.fbe7378.320",
+  "version": "5.0.0",
   "conventions": "# Meridian usage conventions (for code-generating agents)\n\nSystem-level rules an agent should apply across all components.\n\nMeridian is the source of truth: when an existing codebase pattern contradicts Meridian, follow Meridian — don't replicate the contradicting local pattern.\n\n## Choosing a component\n\n- Don't hand-roll what the design system already provides. Before writing a\n  custom component, a styled wrapper, or a block of primitives (a modal,\n  chip/tag, card, empty state, dropdown, tooltip, copy-to-clipboard input,\n  etc.), confirm no Meridian component covers it — reuse or extend the existing one instead of rebuilding it.\n- Prefer a Meridian component over a bare MUI one whenever a Meridian wrapper\n  exists — the wrappers carry CARTO theming, a11y defaults, and narrowed APIs. MUI is correct for layout primitives (`Box`/`Grid`/`Stack`/`Container`) and for gaps Meridian doesn't fill (e.g. date pickers); \"prefer Meridian\" is not \"never MUI\".\n- Resolve \"which component\" by reading each one's `description` + `keywords`,\n  then confirm with its `decisionTree` (the conditions that point elsewhere) and `limitations` (what it lacks — check before you downgrade to it).\n  Don't infer selection from prop lists.\n\n## Icons\n\n- Source icons from Meridian's custom-icons first, then `@mui/icons-material`;\n  add a local SVG only when neither has an equivalent. Don't duplicate an icon\n  the design system already ships.\n- Find the right custom icon with `meridian_list_icons` — match by name or keyword (e.g. \"warehouse\" → `Bigquery`), import it from `@carto/meridian-ds/custom-icons`, and render `<Name />`. Every icon shares one prop type, `CustomIconProps` (MUI `SvgIconProps` — `color`/`fontSize`/`sx` — plus `width`/`height`).\n- To confirm a shortlisted icon by sight (or match an icon in a design you're implementing), call `meridian_get_screenshot` with `name: 'icons'` and Read the returned image path — a labeled grid of every icon.\n- Use the standard icon sizes — small 12px, medium (default) 18px, large 24px;\n  a value off this scale (e.g. 16, 20) needs design sign-off. Prefer the\n  outlined variants.\n- A new SVG must inherit, not bake in: set `fill='currentColor'` so it takes\n  the parent's color, and use the standard size — don't hardcode\n  color/opacity/dimensions.\n- For an icon color outside the palette `color` set, pass a theme token via\n  `htmlColor` (e.g. `htmlColor={theme.palette.text.secondary}`) — never a\n  hardcoded hex.\n\n## Accessibility\n\n- Any icon-only control needs an accessible name: `tooltip` or `aria-label`.\n- Don't disable a control without telling the user why — pair a disabled action with a tooltip explaining the requirement.\n- An `aria-label` must be human-readable text describing the control, not a test id in disguise — use a separate test hook for that.\n- User-facing strings (labels, `aria-label`, placeholders, messages) go through the app's i18n layer, not hardcoded literals.\n\n## Props\n\n- Two sources, both pinned to the installed `@carto/meridian-ds`: **exact props / types / JSDoc** come from the package's **type declarations** — read the `<Name>.d.ts` directly — while the **`meridian-design-system` MCP** (`meridian_*` tools) covers what types can't: which component, when, gotchas, and real examples.\n- A component's curation lists the high-value inherited MUI props worth knowing (`curation.mui`, e.g. `color`/`variant`/`size`); the rest of MUI's surface is available but rarely needed.\n- Don't use `sx`/inline styles to override a Meridian component's visual design (colors, typography, borders, sizing) — use its documented props and the theme tokens. (`sx` for layout/spacing on primitives is fine — see Styling.)\n- If no prop covers the visual change you need, treat it as a design-system gap: request the variant/behavior upstream in Meridian rather than permanently overriding the component locally — a local `styled()` of a Meridian component is a smell, not a fix.\n\n## Styling\n\n- Use theme tokens, never hardcoded values: colors from the palette (`text.*`, `background.*`, `divider`, semantic `*.main`) and spacing from the theme spacing scale — no raw hex/rgb or pixel literals for color or spacing. Use integer steps on the spacing scale (`theme.spacing(n)`, or `sx` numeric spacing like `px: 2` / `mt: 3` which resolve to it) — not fractional steps or raw px. Get the exact values — palette keys, spacing base, type ramp, `shape.borderRadius`, breakpoints, shadows — from `meridian_get_tokens`.\n- Text uses `<Typography variant=…>` (with the `weight` prop for emphasis), never hardcoded `fontSize`/`fontWeight`/`lineHeight`/`fontFamily`.\n- Meridian's type scale is custom and does not match MUI defaults (e.g. `body2`/`caption` differ from MUI's sizes, and there are Meridian-only variants like `code1`/`code2`/`code3` and `overlineDelicate`). Pick the variant by role from Typography's variant list (`meridian_get_examples('Typography')`) — don't assume a px size or map px → variant yourself.\n- `sx` is the right tool for one-off layout/spacing on primitives (`Box`/`Grid`/`Stack`), not the deprecated MUI system props\n  (`<Box px={2}>` → `<Box sx={{ px: 2 }}>`). This is layout, distinct from restyling a Meridian component (see Props).\n\n## Examples\n\n- Never invent example code when a story exists — use the component's real story source (`meridian_get_examples`). The lead Usage story is the copy-paste starting point; the later stories are illustrative (variants, edge cases) and may carry story-arg shells, so don't copy one wholesale as your baseline.\n",
   "components": [
     {
@@ -330,7 +330,7 @@
         {
           "name": "Prefix",
           "id": "components-autocomplete-autocomplete--prefix",
-          "summary": "Pin a fixed leading icon/adornment inside the input (params.InputProps.startAdornment)",
+          "summary": "Pin a fixed leading icon/adornment inside the input (params.slotProps.input.startAdornment)",
           "code": "import { Autocomplete, AutocompleteProps } from '@carto/meridian-ds/components'\nimport { AnalyticsOutlined } from '@mui/icons-material'\nimport { InputAdornment, TextField } from '@mui/material'\n\n// Story-only helpers, not exported by the package (stubbed so this compiles):\ndeclare const getTop100Films: any\n\nconst top100Films = getTop100Films()\n\nconst Prefix = ({\n  label,\n  variant,\n  placeholder,\n  helperText,\n  error,\n  size,\n  required,\n  disableCloseOnSelect,\n  ...props\n}: AutocompleteProps<(typeof top100Films)[number]> &\n  any) => {\n  return (\n    <Autocomplete\n      {...props}\n      options={top100Films}\n      getOptionLabel={(option) => option.title}\n      renderInput={(params) => {\n        params.slotProps.input.startAdornment = (\n          <InputAdornment position='start'>\n            {<AnalyticsOutlined />}\n          </InputAdornment>\n        )\n        return (\n          <TextField\n            {...params}\n            label={label}\n            placeholder={placeholder}\n            helperText={helperText}\n            variant={variant}\n            error={error}\n            size={size}\n            required={required}\n          />\n        )\n      }}\n      size={size}\n      disableCloseOnSelect={disableCloseOnSelect}\n    />\n  )\n}"
         },
         {
@@ -2706,7 +2706,7 @@
         "subComponents": [
           {
             "name": "MenuItem",
-            "description": "A row inside a Menu/MenuList. Compose its content as children — `<ListItemIcon>` for a leading icon/avatar, `<ListItemText>` for the label (+ a caption Typography for secondary text), and a trailing element (e.g. a Tag). `subtitle` turns it into a non-interactive section header with a divider; `destructive` styles a dangerous action (delete) in red; `iconColor='primary'` recolors the icon to the theme text color, `'default'` keeps the icon's own color; `extended` gives a taller row for avatars/secondary text. Use this (not a bare ListItem) to keep a row interactive — and keep the content to an icon + text + a short trailing element: the whole row is one interactive target, so don't nest buttons or inputs (it breaks keyboard semantics)."
+            "description": "A row inside a Menu/MenuList — it must have one as an ancestor, or MUI throws `MenuListContext is missing` (v9 made the context mandatory, and it is sealed, so this cannot be softened here). Compose its content as children — `<ListItemIcon>` for a leading icon/avatar, `<ListItemText>` for the label (+ a caption Typography for secondary text), and a trailing element (e.g. a Tag). `subtitle` turns it into a non-interactive section header with a divider; `destructive` styles a dangerous action (delete) in red; `iconColor='primary'` recolors the icon to the theme text color, `'default'` keeps the icon's own color; `extended` gives a taller row for avatars/secondary text. Use this (not a bare ListItem) to keep a row interactive — and keep the content to an icon + text + a short trailing element: the whole row is one interactive target, so don't nest buttons or inputs (it breaks keyboard semantics)."
           },
           {
             "name": "MenuItemFilter",

package/dist/{palette-utils-BCQ0HY6h.js → palette-utils-BmPPGzZt.js}

@@ -11,8 +11,11 @@ function mergeSx({
   own,
   consumer
 }) {
+  const applied = own.filter((entry) => Boolean(entry));
+  if (applied.length === 0) return consumer;
+  if (consumer === void 0) return applied;
   return [
-    ...own,
+    ...applied,
     ...Array.isArray(consumer) ? consumer : [consumer]
   ];
 }
@@ -52,6 +55,7 @@ function _Typography({
   );
 }
 const Typography = forwardRef(_Typography);
+Typography.displayName = "Typography";
 const SPACING = 8;
 const BREAKPOINTS = {
   XS: 320,

package/dist/{palette-utils-m2Gb_Pd2.cjs → palette-utils-NhMBL9rx.cjs}

@@ -29,8 +29,11 @@ function mergeSx({
   own,
   consumer
 }) {
+  const applied = own.filter((entry) => Boolean(entry));
+  if (applied.length === 0) return consumer;
+  if (consumer === void 0) return applied;
   return [
-    ...own,
+    ...applied,
     ...Array.isArray(consumer) ? consumer : [consumer]
   ];
 }
@@ -70,6 +73,7 @@ function _Typography({
   );
 }
 const Typography = React.forwardRef(_Typography);
+Typography.displayName = "Typography";
 const SPACING = 8;
 const BREAKPOINTS = {
   XS: 320,