@carto/meridian-ds 3.0.3-alpha.f11fdb3.265 → 3.1.0

package/CHANGELOG.md

@@ -2,10 +2,15 @@
 
 ## Unreleased
 
-- feat(ai-metadata): expose component knowledge to AI agents via the new `meridian-ds-mcp` MCP server — a build-time `dist/metadata.json` bundle (curation, conventions, example code) authored per component via `<Name>.metadata.ts` + JSDoc, validated in CI [#443](https://github.com/CartoDB/meridian-ds/pull/443)
-
 ## 3.0
 
+### 3.1.0
+
+- feat(components): add IconWrapper [#453](https://github.com/CartoDB/meridian-ds/pull/453)
+- feat(custom-icons): add Leftsidebar, Rightsidebar, SqlSource; update RunReuse from the Figma import
+- feat(ai-metadata): expose component knowledge to AI agents via the new `meridian-ds-mcp` MCP server — a build-time `dist/metadata.json` bundle (curation, conventions, example code) authored per component via `<Name>.metadata.ts` + JSDoc, validated in CI [#443](https://github.com/CartoDB/meridian-ds/pull/443)
+- feat(ai-metadata): full component-catalog coverage (every public component documented) plus CI enforcement — coverage gate, listable `decisionTree`/`subComponent` targets, and repo-wide JSDoc tag hygiene; custom icons + theme still to come [#459](https://github.com/CartoDB/meridian-ds/pull/459)
+
 ### 3.0.2
 
 - fix(CodeArea): keep a comfortable right padding for long, wrapped values in read-only / `lineNumbers: false` blocks — wrapped content no longer touches the right edge [#448](https://github.com/CartoDB/meridian-ds/pull/448)

package/dist/{ListItem-BOr1gyyO.cjs → ListItem-CLIaUyDV.cjs}

@@ -4,7 +4,7 @@ const React = require("react");
 const material = require("@mui/material");
 const iconsMaterial = require("@mui/icons-material");
 require("cartocolor");
-const paletteUtils = require("./palette-utils-CfP0zi6X.cjs");
+const paletteUtils = require("./palette-utils-Ou97WiuF.cjs");
 const ReactWindow = require("react-window");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });

package/dist/{ListItem-CW7C1948.js → ListItem-CRSS7jTs.js}

@@ -3,7 +3,7 @@ import React, { forwardRef, useState, createContext, useMemo, useContext } from
 import { styled, Link as Link$1, Alert as Alert$1, Fade, AlertTitle, List as List$1, ListItemButton as ListItemButton$1, ListItem as ListItem$1 } from "@mui/material";
 import { OpenInNewOutlined } from "@mui/icons-material";
 import "cartocolor";
-import { c as ICON_SIZE_SMALL, b as ICON_SIZE_MEDIUM, u as useTranslationWithFallback, T as Typography, m as LIST_MAX_SIZE, n as LIST_OVERSCAN_ITEMS_COUNT, h as LIST_ITEM_SIZE_DENSE, i as LIST_ITEM_SIZE_DEFAULT } from "./palette-utils-gZwK5wCD.js";
+import { c as ICON_SIZE_SMALL, b as ICON_SIZE_MEDIUM, u as useTranslationWithFallback, T as Typography, m as LIST_MAX_SIZE, n as LIST_OVERSCAN_ITEMS_COUNT, h as LIST_ITEM_SIZE_DENSE, i as LIST_ITEM_SIZE_DEFAULT } from "./palette-utils-B2CZD7oM.js";
 import * as ReactWindow from "react-window";
 const ScreenReaderOnly = styled("span")(() => ({
   position: "absolute",

package/dist/bin/meridian-ds-mcp.js

@@ -10,6 +10,9 @@ import { createRequire } from "module";
 function subName(s) {
   return typeof s === "string" ? s : s.name;
 }
+function relatedName(e) {
+  return typeof e === "string" ? e : e.name;
+}
 
 // ai-metadata/mcp/server.ts
 var __dirname = path.dirname(fileURLToPath(import.meta.url));
@@ -28,12 +31,13 @@ function resolveBundlePath() {
   }
 }
 var DOCS = [];
+var KNOWN = [];
 var CONVENTIONS = "";
 var VERSION = "0.0.0";
 var TOOLS = [
   {
     name: "meridian_list_components",
-    description: "List all Meridian components with their description and keywords, plus a family signal where relevant (`subComponents` for a compound component, `variants` for sibling components chosen between \u2014 each with a one-line description). Start here: the catalog is small, so read it and pick the component whose description/keywords match your need.",
+    description: "List all Meridian components with their description and keywords, plus a family signal where relevant (`subComponents` for a compound component, `variants` for sibling components chosen between \u2014 each with a one-line description). Start here: the catalog is small, so read it and pick the component whose description/keywords match your need. Rows flagged `documented: false` are not yet curated (no when-to-use/decisionTree/prop guidance): most still have example stories via get_examples; a few are known-only \u2014 real, importable components with no stories yet, for which get_component/get_examples just point at the type declarations.",
     inputSchema: {
       type: "object",
       properties: {},
@@ -42,7 +46,7 @@ var TOOLS = [
   },
   {
     name: "meridian_get_component",
-    description: "Curation for one component: when to use it, its decisionTree (when to reach for a different component), any limitations (capabilities it lacks vs. similar components \u2014 check before downgrading from one), and the high-value inherited MUI props (curation.mui, some with an aiHint). Own props, types, and JSDoc are NOT here \u2014 read the shipped .d.ts (the propTypes field gives the exact command). Sub-components and variants (`DialogHeader`, `MultipleAutocomplete`, \u2026) have no standalone catalog entry \u2014 `meridian_get_component`/`meridian_get_examples` on them return a pointer to the parent (check its `curation.subComponents`/`curation.variants`).",
+    description: "Curation for one component: when to use it, its decisionTree (when to reach for a different component), any limitations (capabilities it lacks vs. similar components \u2014 check before downgrading from one), and the high-value inherited MUI props (curation.mui, some with an aiHint). Own props, types, and JSDoc are NOT here \u2014 read the shipped .d.ts (the propTypes field gives the exact command). For a not-yet-curated component (`documented: false`) it returns a note + .d.ts pointer in place of curation \u2014 plus its example stories when any exist (a known-only component has none, so rely on the .d.ts). Sub-components and variants (`DialogHeader`, `MultipleAutocomplete`, \u2026) have no standalone catalog entry \u2014 `meridian_get_component`/`meridian_get_examples` on them return a pointer to the parent (check its `curation.subComponents`/`curation.variants`).",
     inputSchema: {
       type: "object",
       properties: {
@@ -79,26 +83,37 @@ var TOOLS = [
   }
 ];
 var find = (name) => DOCS.find((d) => d.name.toLowerCase() === String(name).toLowerCase());
-var notFound = (name) => ({
-  error: `Unknown component "${name}". Available: ${DOCS.map((d) => d.name).join(", ")}`
-});
+function notFound(name) {
+  const canonical = KNOWN.find((c) => c.toLowerCase() === String(name).toLowerCase());
+  if (canonical)
+    return {
+      note: `"${canonical}" is a Meridian component but isn't individually documented or listed in this catalog. If it's part of the public API, import it from '@carto/meridian-ds/components' and read its props from its type declarations: ${dtsFindRecipe(canonical)}. Prefer a documented component (see meridian_list_components) when one fits.`
+    };
+  return {
+    error: `No Meridian component named "${name}" (check the spelling). See meridian_list_components for the catalog.`
+  };
+}
 function dtsFindRecipe(...names) {
   const root = "find node_modules/@carto/meridian-ds/dist/types";
   const clauses = names.map((n) => `-name '${n}.d.ts'`);
   return names.length > 1 ? `${root} \\( ${clauses.join(" -o ")} \\)` : `${root} ${clauses[0]}`;
 }
-function familyRedirect(name) {
+function familyParent(name) {
   const lc = String(name).toLowerCase();
   for (const d of DOCS) {
     const part = d.curation.subComponents?.map(subName).find((s) => s.toLowerCase() === lc);
+    if (part) return { parent: d.name, canonical: part, role: "sub-component" };
     const variant = d.curation.variants?.map(subName).find((v) => v.toLowerCase() === lc);
-    const canonical = part ?? variant;
-    if (!canonical) continue;
-    const note = part ? `"${canonical}" is a sub-component of ${d.name} (a compound component) \u2014 it has no standalone catalog entry. See meridian_get_examples('${d.name}') for how it's composed, and read its own props from its type declarations: ${dtsFindRecipe(canonical)}.` : `"${canonical}" is a variant of ${d.name} \u2014 a full component in its own right, not yet individually documented in this catalog. For now use meridian_get_component('${d.name}') / meridian_get_examples('${d.name}'), and read ${canonical}'s own props from its type declarations: ${dtsFindRecipe(canonical)}.`;
-    return { note };
+    if (variant) return { parent: d.name, canonical: variant, role: "variant" };
   }
   return void 0;
 }
+function familyRedirect(name) {
+  const f = familyParent(name);
+  if (!f) return void 0;
+  const note = f.role === "sub-component" ? `"${f.canonical}" is a sub-component of ${f.parent} (a compound component) \u2014 it has no standalone catalog entry. See meridian_get_examples('${f.parent}') for how it's composed, and read its own props from its type declarations: ${dtsFindRecipe(f.canonical)}.` : `"${f.canonical}" is a variant of ${f.parent} \u2014 a full component in its own right, not yet individually documented in this catalog. For now use meridian_get_component('${f.parent}') / meridian_get_examples('${f.parent}'), and read ${f.canonical}'s own props from its type declarations: ${dtsFindRecipe(f.canonical)}.`;
+  return { note };
+}
 function partitionExamples(examples) {
   const usage = examples.filter((e) => e.isUsage);
   const summarized = examples.filter((e) => !e.isUsage && e.summary);
@@ -125,12 +140,27 @@ function listComponents() {
   return DOCS.map((d) => ({
     name: d.name,
     description: d.description,
+    // LISTED-only components (no metadata file): flagged so an agent knows
+    // get_component won't carry when-to-use/decisionTree/mui guidance for them —
+    // examples + the .d.ts are still available. Documented rows omit the flag.
+    ...d.documented ? {} : { documented: false },
     keywords: d.curation.keywords ?? [],
     // Family signal: the parts a compound component is composed with, and the
     // sibling variants chosen between — each as { name, description } (same shape
     // as get_component) so an agent can pick a family member while scanning.
     ...d.curation.subComponents?.length ? { subComponents: d.curation.subComponents } : {},
-    ...d.curation.variants?.length ? { variants: d.curation.variants } : {}
+    ...d.curation.variants?.length ? { variants: d.curation.variants } : {},
+    // The public hooks/utils/constants that ship with this component — name,
+    // kind, and description (same as subComponents/variants, so an agent can pick
+    // one while scanning without a get_component round-trip). get_component adds
+    // `import` (the entry point — constant across the family, so omitted here).
+    ...d.curation.relatedExports?.length ? {
+      relatedExports: d.curation.relatedExports.map((e) => ({
+        name: relatedName(e),
+        ...typeof e === "object" && e.kind ? { kind: e.kind } : {},
+        ...typeof e === "object" && e.description ? { description: e.description } : {}
+      }))
+    } : {}
   }));
 }
 function getComponent(name) {
@@ -139,18 +169,26 @@ function getComponent(name) {
   const parts = (doc.curation.subComponents ?? []).map(subName);
   const dtsGlob = dtsFindRecipe(doc.name, ...parts);
   const compound = parts.length > 0 ? `${doc.name} is a compound component \u2014 compose it with its parts: ${parts.join(", ")}. ` : "";
+  const parent = doc.documented ? void 0 : familyParent(doc.name);
+  const sourceHint = doc.examples.length ? "Use the examples below and its type declarations" : "No example stories ship for it either \u2014 rely on its type declarations (the propTypes recipe below)";
+  const note = doc.documented ? void 0 : `${parent ? `${doc.name} is a ${parent.role} of ${parent.parent} \u2014 compose it within ${parent.parent} (see meridian_get_component('${parent.parent}')). ` : ""}Not yet curated: no when-to-use / decisionTree / keywords / promoted-prop guidance for this component. ${sourceHint} \u2014 and still prefer it over a bare MUI equivalent.`;
   return {
     name: doc.name,
     description: doc.description,
+    documented: doc.documented,
+    ...note ? { note } : {},
     curation: doc.curation,
     // Own props/types/JSDoc aren't in the bundle by design; point a headless
     // agent at the shipped .d.ts (no IDE/hover assumed) — for the root and, for a
     // compound component, every part. Promoted inherited MUI props, when curated,
     // are already in `curation.mui` above.
     propTypes: `${compound}Own props, exact types, and JSDoc are not in this payload \u2014 they ship as TypeScript declarations. Read them from the installed package: \`${dtsGlob}\`. Import from '@carto/meridian-ds/components'.`,
-    examples: {
+    examples: doc.examples.length ? {
       note: "Stories are ordered by copy-value; the flagged lead is the starting point. Call meridian_get_examples(name) for the lead in full plus an index of the rest; pass a storyId for any specific one.",
       stories: exampleStories(doc.examples)
+    } : {
+      note: "No example stories ship for this component yet \u2014 read its props from the .d.ts (see propTypes above).",
+      stories: []
     }
   };
 }
@@ -173,9 +211,10 @@ function getComponentExamples(name, storyId) {
 
 ${summary}${ex.code}`;
   }
-  if (!doc.examples.length) return `# ${doc.name}
+  if (!doc.examples.length)
+    return `# ${doc.name}
 
-No examples available.`;
+No example stories ship for ${doc.name} yet. It's a real Meridian component \u2014 import it from '@carto/meridian-ds/components' and read its props from its type declarations: ${dtsFindRecipe(doc.name)}.`;
   const componentId = doc.examples[0].id.split("--")[0];
   const { shown, rest } = partitionExamples(doc.examples);
   let md = `# ${doc.name}
@@ -223,7 +262,7 @@ function callTool(name, args) {
         args.storyId ? String(args.storyId) : void 0
       );
     case "meridian_get_conventions":
-      return { conventions: CONVENTIONS };
+      return CONVENTIONS;
     default:
       throw new Error(`Unknown tool: ${name}`);
   }
@@ -238,6 +277,8 @@ Flow:
 3. meridian_get_component(name) \u2014 when to use it, its decisionTree (conditions that point to a different component), and the high-value inherited MUI props worth knowing (curation.mui; some carry an aiHint). It also returns the example story ids.
 4. meridian_get_examples(name[, storyId]) \u2014 real, copy-able example code. With no storyId: the lead usage story and the notable stories in full plus a list of the rest; pass a storyId for one story's full code.
 
+Three tiers of components, by how much each carries (all are real and importable \u2014 always prefer one over a bare MUI equivalent): CURATED (most) have full when-to-use / decisionTree / promoted-prop guidance; LISTED (flagged "documented": false, with example stories) carry no curation yet \u2014 lean on get_examples + the .d.ts; KNOWN (flagged "documented": false, no stories) are real components not yet documented \u2014 get_component/get_examples point you at their type declarations (.d.ts).
+
 Exact own props, types, and JSDoc are NOT served here \u2014 they ship as TypeScript declarations in the installed package. Read them with: find node_modules/@carto/meridian-ds/dist/types -name '<Component>.d.ts'. Import the component from '@carto/meridian-ds/components'. Prefer a Meridian component over a bare MUI one whenever one exists.`;
 function send(msg) {
   process.stdout.write(JSON.stringify(msg) + "\n");
@@ -292,6 +333,7 @@ function load() {
     fs.readFileSync(bundlePath, "utf8")
   );
   DOCS = bundle.components;
+  KNOWN = bundle.knownComponents ?? [];
   CONVENTIONS = bundle.conventions;
   VERSION = bundle.version;
   process.stderr.write(

package/dist/components/index.cjs

@@ -4,11 +4,11 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const material = require("@mui/material");
 const iconsMaterial = require("@mui/icons-material");
-const paletteUtils = require("../palette-utils-CfP0zi6X.cjs");
-const ListItem = require("../ListItem-BOr1gyyO.cjs");
+const paletteUtils = require("../palette-utils-Ou97WiuF.cjs");
+const ListItem = require("../ListItem-CLIaUyDV.cjs");
 const ArrowDown = require("../ArrowDown-84Oc8r9k.cjs");
 const OpenDiagonallyRight = require("../OpenDiagonallyRight-BUZBgnkY.cjs");
-const utils = require("../utils-BfSr53C0.cjs");
+const utils = require("../utils-DtB4pKaP.cjs");
 require("cartocolor");
 const ReactWindow = require("react-window");
 const reactCodemirror2 = require("react-codemirror2");
@@ -4758,7 +4758,7 @@ const Root$1 = material.styled(material.Stack, {
   height: contentHeight,
   minHeight: contentHeight
 }));
-const IconWrapper = material.styled(material.Box, {
+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));
@@ -4833,7 +4833,7 @@ function _EmptyState({
       "data-icon-size": iconSize,
       "data-icon-color": iconColor ?? "null",
       children: [
-        icon && /* @__PURE__ */ jsxRuntime.jsx(IconWrapper, { size, iconSize, iconColor, children: icon }),
+        icon && /* @__PURE__ */ jsxRuntime.jsx(IconWrapper$1, { size, iconSize, iconColor, children: icon }),
         hasAnyTextContent && /* @__PURE__ */ jsxRuntime.jsxs(TextContent, { contentWidth, children: [
           title && /* @__PURE__ */ jsxRuntime.jsx(
             paletteUtils.Typography,
@@ -4989,6 +4989,192 @@ function _Avatar({
   );
 }
 const Avatar = React.forwardRef(_Avatar);
+function colorStyles({
+  color,
+  background,
+  backgroundAlpha,
+  disabled,
+  theme
+}) {
+  let iconColor;
+  let derivedBackground;
+  if (disabled) {
+    iconColor = theme.palette.text.disabled;
+    derivedBackground = theme.palette.action.disabledBackground;
+  } else if (color === "inherit") {
+    iconColor = "inherit";
+    derivedBackground = void 0;
+  } else if (color === "default") {
+    iconColor = theme.palette.text.secondary;
+    derivedBackground = theme.palette.default.background;
+  } else if (color === "primary") {
+    iconColor = theme.palette.primary.main;
+    derivedBackground = theme.palette.primary.background;
+  } else if (color === "secondary") {
+    iconColor = theme.palette.secondary.dark;
+    derivedBackground = theme.palette.secondary.background;
+  } else {
+    iconColor = color;
+    derivedBackground = material.alpha(color, backgroundAlpha);
+  }
+  const customBackground = !disabled && typeof background === "string" ? background : void 0;
+  const backgroundColor = customBackground ?? derivedBackground;
+  const isExplicitColor = color !== "inherit" && color !== "default";
+  return {
+    color: iconColor,
+    ...!!background && backgroundColor && {
+      backgroundColor,
+      // A disabled ancestor dims the frame too — the extra class/attribute
+      // outranks the plain `backgroundColor` above.
+      '[aria-disabled="true"] &, .Mui-disabled &': {
+        backgroundColor: `${theme.palette.action.disabledBackground} !important`
+      }
+    },
+    // Monochrome icon paths follow the wrapper color via `currentColor`. The
+    // tripled `&&&` (0,3,2) reliably outranks ambient container rules that fill
+    // the icon directly — e.g. an extended MenuItem's `.MuiMenuItem-root
+    // .MuiListItemIcon-root svg path { fill }` (0,2,2) — so a `default` icon
+    // consistently follows the wrapper color (and a selected container's
+    // recolor, via `currentColor`). Multi-color/brand icons keep their own
+    // fills under `color="inherit"`, which skips this rule entirely.
+    ...color !== "inherit" && {
+      "&&& svg path": { fill: "currentColor" }
+    },
+    // An explicit color must win over EVERY container style, including ones that
+    // recolor via `svg { color }` (e.g. the selected-list rule
+    // `[aria-selected="true"] .MuiListItemIcon-root …:not(:has()) svg`, 0,4,1)
+    // or that set the path fill directly. `!important` on both guarantees it
+    // without a specificity arms race. `default` is intentionally NOT pinned, so
+    // a selected container can still recolor a default icon as usual.
+    ...isExplicitColor && {
+      "& svg": { color: `${iconColor} !important` },
+      "& svg path": { fill: `${iconColor} !important` },
+      // …but a disabled ancestor (ListItem/MenuItem) must still dim the icon.
+      // The extra class/attribute outranks the pins above among the `!important`
+      // rules, re-asserting the disabled color.
+      '[aria-disabled="true"] & svg, .Mui-disabled & svg': {
+        color: `${theme.palette.text.disabled} !important`
+      },
+      '[aria-disabled="true"] & svg path, .Mui-disabled & svg path': {
+        fill: `${theme.palette.text.disabled} !important`
+      }
+    }
+  };
+}
+const IconWrapperRoot = material.styled(material.Box, {
+  shouldForwardProp: (prop) => ![
+    "size",
+    "variant",
+    "color",
+    "background",
+    "backgroundAlpha",
+    "disablePadding",
+    "withBorder",
+    "disabled"
+    // drives styling only; `span`/`div` has no native `disabled`
+  ].includes(prop)
+  // Only the styling props — all defaulted by the time they reach the root,
+  // hence Required. The rest of IconWrapperProps are DOM/ARIA attributes that
+  // Box already types and forwards, so they must not be pulled in here.
+})(({
+  theme,
+  size,
+  variant,
+  color,
+  background,
+  backgroundAlpha,
+  disablePadding,
+  withBorder,
+  disabled
+}) => {
+  let iconSize;
+  if (disablePadding) iconSize = `${size}px`;
+  else if (size <= 12) iconSize = `${Math.max(size - 2, 0)}px`;
+  else if (size <= 18) iconSize = paletteUtils.ICON_SIZE_SMALL;
+  else if (size <= 32) iconSize = paletteUtils.ICON_SIZE_MEDIUM;
+  else iconSize = paletteUtils.ICON_SIZE_LARGE;
+  const borderRadius = variant === "circular" ? "50%" : variant === "rounded" ? theme.spacing(size <= 12 ? 0.25 : size <= 32 ? 0.5 : 1) : 0;
+  return {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    boxSizing: "border-box",
+    flexShrink: 0,
+    width: size,
+    height: size,
+    borderRadius,
+    ...withBorder && { border: `1px solid ${theme.palette.divider}` },
+    ...colorStyles({ color, background, backgroundAlpha, disabled, theme }),
+    // Size the icon. `!important` guarantees the wrapper's `size` wins over
+    // high-specificity container rules that size descendant svgs — e.g.
+    // ListItemIcon's `[data-icon-size] …:not(:has()) svg { width }` (0,5,1) or a
+    // MenuItem forcing `svg { width: 18px }`. (Path fill is in `colorStyles`.)
+    "&& svg": {
+      fontSize: `${iconSize} !important`,
+      width: `${iconSize} !important`,
+      minWidth: `${iconSize} !important`,
+      height: `${iconSize} !important`,
+      // Dim + desaturate when disabled — also covers multi-color icons, which
+      // don't react to `text.disabled`. `grayscale` is a no-op on monochrome
+      // (currentColor) icons.
+      ...disabled && color === "inherit" && {
+        opacity: 0.4,
+        filter: "grayscale(1)"
+      }
+    }
+  };
+});
+function _IconWrapper({
+  children,
+  size = 24,
+  variant = "rounded",
+  color = "default",
+  withBorder = false,
+  background = false,
+  backgroundAlpha = 0.2,
+  disablePadding = false,
+  disabled = false,
+  tooltip,
+  tooltipProps,
+  ...otherProps
+}, ref) {
+  const ariaLabel = typeof tooltip === "string" ? tooltip : void 0;
+  const root = /* @__PURE__ */ jsxRuntime.jsx(
+    IconWrapperRoot,
+    {
+      ref,
+      size,
+      variant,
+      color,
+      background,
+      backgroundAlpha,
+      disablePadding,
+      withBorder,
+      disabled,
+      "aria-disabled": disabled,
+      "aria-label": ariaLabel,
+      tabIndex: tooltip ? 0 : void 0,
+      "data-name": "icon-wrapper",
+      "data-size": size,
+      "data-variant": variant,
+      "data-color": color,
+      ...otherProps,
+      children
+    }
+  );
+  if (!tooltip) return root;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.Tooltip,
+    {
+      title: tooltip,
+      describeChild: Boolean(ariaLabel),
+      ...tooltipProps,
+      children: root
+    }
+  );
+}
+const IconWrapper = React.forwardRef(_IconWrapper);
+IconWrapper.displayName = "IconWrapper";
 const StyledMenu = material.styled(material.Menu, {
   shouldForwardProp: (prop) => !["extended", "width", "height"].includes(prop)
 })(({ extended, width, height }) => ({
@@ -6650,16 +6836,26 @@ const DEFAULT_SECONDARY_TYPOGRAPHY_PROPS = {
   color: "text.secondary",
   noWrap: true
 };
-function mergeTypographyProps$1(defaultProps, userProps) {
-  if (!userProps) return defaultProps;
-  const { sx: userSx, ...userRest } = userProps;
+function resolveTypographyProps(defaultProps, userProps) {
+  const {
+    weight,
+    italic,
+    sx: userSx,
+    ...userRest
+  } = userProps ?? {};
   const { sx: defaultSx, ...defaultRest } = defaultProps;
+  const fontSx = {};
+  if (weight) fontSx.fontWeight = paletteUtils.FontWeight[weight];
+  if (italic) fontSx.fontStyle = "italic";
+  const sxParts = [
+    defaultSx,
+    userSx,
+    Object.keys(fontSx).length ? fontSx : void 0
+  ].filter(Boolean);
   return {
     ...defaultRest,
     ...userRest,
-    ...(defaultSx || userSx) && {
-      sx: [defaultSx, userSx].filter(Boolean)
-    }
+    ...sxParts.length > 0 && { sx: sxParts }
   };
 }
 function _ListItemText({
@@ -6671,11 +6867,11 @@ function _ListItemText({
     material.ListItemText,
     {
       ...props,
-      primaryTypographyProps: mergeTypographyProps$1(
+      primaryTypographyProps: resolveTypographyProps(
         DEFAULT_PRIMARY_TYPOGRAPHY_PROPS,
         primaryTypographyProps
       ),
-      secondaryTypographyProps: mergeTypographyProps$1(
+      secondaryTypographyProps: resolveTypographyProps(
         DEFAULT_SECONDARY_TYPOGRAPHY_PROPS,
         secondaryTypographyProps
       ),
@@ -7053,6 +7249,7 @@ exports.EllipsisWithTooltip = EllipsisWithTooltip;
 exports.EmptyState = EmptyState;
 exports.FilterDropdown = FilterDropdown;
 exports.FilterDropdownMenuItem = FilterDropdownMenuItem;
+exports.IconWrapper = IconWrapper;
 exports.LabelWithIndicator = LabelWithIndicator;
 exports.ListItemIcon = ListItemIcon;
 exports.ListItemRightContent = ListItemRightContent;