@carto/meridian-ds 3.0.3-alpha.ca7b172.256 → 3.0.3-alpha.cdb2a4e.260

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

@@ -26,7 +26,7 @@ var VERSION = "0.0.0";
 var TOOLS = [
   {
     name: "meridian_list_components",
-    description: "List all Meridian components with their description, keywords, and example count. 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, keywords, and example count, plus a family signal where relevant (`subComponents` for a compound component, `variants` for sibling components chosen between). Start here: the catalog is small, so read it and pick the component whose description/keywords match your need.",
     inputSchema: {
       type: "object",
       properties: {},
@@ -47,7 +47,7 @@ var TOOLS = [
   },
   {
     name: "meridian_get_examples",
-    description: "Real, copy-able example code (per Storybook story, with imports), shipped in the package. With no storyId: the first few stories in full plus an 'Other Stories' list (name + id) of the rest. Pass a storyId (from that list or meridian_get_component) to get just that story's full code.",
+    description: "Real, copy-able example code (per Storybook story, with imports), shipped in the package. With no storyId: the lead usage story and the notable stories in full, plus an 'Other Stories' list (name + id) of the rest. Pass a storyId (from that list or meridian_get_component) to get just that story's full code.",
     inputSchema: {
       type: "object",
       properties: {
@@ -75,39 +75,76 @@ var find = (name) => DOCS.find((d) => d.name.toLowerCase() === String(name).toLo
 var notFound = (name) => ({
   error: `Unknown component "${name}". Available: ${DOCS.map((d) => d.name).join(", ")}`
 });
+function familyRedirect(name) {
+  const lc = String(name).toLowerCase();
+  for (const d of DOCS) {
+    const isPart = d.curation.subComponents?.some((s) => s.toLowerCase() === lc);
+    const isVariant = d.curation.variants?.some((v) => v.toLowerCase() === lc);
+    if (!isPart && !isVariant) continue;
+    const rel = isPart ? `a sub-component of ${d.name} (a compound component)` : `a variant of ${d.name}`;
+    return {
+      note: `"${name}" is ${rel} and has no standalone catalog entry. See meridian_get_examples('${d.name}') for usage/composition and meridian_get_component('${d.name}') for its curation. Read ${name}'s own props from its type declarations: find node_modules/@carto/meridian-ds/dist/types -name '${name}.d.ts'.`
+    };
+  }
+  return void 0;
+}
+function partitionExamples(examples) {
+  const usage = examples.filter((e) => e.isUsage);
+  const summarized = examples.filter((e) => !e.isUsage && e.summary);
+  let shown = [...usage, ...summarized];
+  if (!shown.length) shown = examples.slice(0, 1);
+  const inShown = new Set(shown);
+  return { shown, rest: examples.filter((e) => !inShown.has(e)) };
+}
 function listComponents() {
   return DOCS.map((d) => ({
     name: d.name,
     description: d.description,
     keywords: d.curation.keywords ?? [],
-    examples: d.examples.length
+    examples: d.examples.length,
+    // Family signal: the parts a compound component is composed with, and the
+    // sibling variants chosen between — so relationships are visible while scanning.
+    ...d.curation.subComponents?.length ? { subComponents: d.curation.subComponents } : {},
+    ...d.curation.variants?.length ? { variants: d.curation.variants } : {}
   }));
 }
 function getComponent(name) {
   const doc = find(name);
-  if (!doc) return notFound(name);
+  if (!doc) return familyRedirect(name) ?? notFound(name);
+  const parts = doc.curation.subComponents ?? [];
+  const dtsGlob = parts.length > 0 ? `find node_modules/@carto/meridian-ds/dist/types \\( ${[doc.name, ...parts].map((n) => `-name '${n}.d.ts'`).join(" -o ")} \\)` : `find node_modules/@carto/meridian-ds/dist/types -name '${doc.name}.d.ts'`;
+  const compound = parts.length > 0 ? `${doc.name} is a compound component \u2014 compose it with its parts: ${parts.join(", ")}. ` : "";
   return {
     name: doc.name,
     description: doc.description,
     reminder: "Apply the session conventions when using this \u2014 call meridian_get_conventions first if you have not this session.",
     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). Promoted inherited MUI
-    // props, when curated, are already in `curation.mui` above.
-    propTypes: `Own props, exact types, and JSDoc are not in this payload \u2014 they ship as TypeScript declarations. Read them from the installed package: \`find node_modules/@carto/meridian-ds/dist/types -name '${doc.name}.d.ts'\`. Import the component from '@carto/meridian-ds/components'.`,
-    examples: {
-      note: "Call meridian_get_examples(name) for the first stories in full plus an index of the rest; pass a storyId for any specific one.",
-      storyIds: doc.examples.map((e) => e.id)
-    }
+    // 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: (() => {
+      const { shown, rest } = partitionExamples(doc.examples);
+      const leadId = shown[0]?.id;
+      return {
+        note: "Stories are ordered by copy-value; the flagged lead is the starting point. Call meridian_get_examples(name) for the lead and the summarized stories in full plus an index of the rest; pass a storyId for any specific one.",
+        stories: [...shown, ...rest].map((e) => ({
+          id: e.id,
+          name: titleize(e.name),
+          ...e.id === leadId ? { lead: true } : {},
+          ...e.summary ? { summary: e.summary } : {}
+        }))
+      };
+    })()
   };
 }
-var EXAMPLES_FULL = 5;
 function titleize(name) {
   return name.replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/([A-Z]+)([A-Z][a-z])/g, "$1 $2").trim();
 }
 function getComponentExamples(name, storyId) {
   const doc = find(name);
-  if (!doc) return notFound(name);
+  if (!doc) return familyRedirect(name) ?? notFound(name);
   if (storyId) {
     const ex = doc.examples.find((e) => e.id === storyId || e.name === storyId);
     if (!ex)
@@ -125,8 +162,7 @@ ${summary}${ex.code}`;
 
 No examples available.`;
   const componentId = doc.examples[0].id.split("--")[0];
-  const shown = doc.examples.slice(0, EXAMPLES_FULL);
-  const rest = doc.examples.slice(EXAMPLES_FULL);
+  const { shown, rest } = partitionExamples(doc.examples);
   let md = `# ${doc.name}
 
 ID: ${componentId}
@@ -185,7 +221,7 @@ Flow:
 1. meridian_get_conventions \u2014 read first; apply throughout the session.
 2. meridian_list_components \u2014 read the (small) catalog and pick by description + keywords. There is no search tool; match by meaning (the model already knows "picker" \u2248 "dropdown" \u2248 "select").
 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 first few stories in full plus a list of the rest; pass a storyId for one story's full code.
+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.
 
 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) {

package/dist/metadata.json

@@ -1,6 +1,6 @@
 {
-  "version": "3.0.3-alpha.ca7b172.256",
-  "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.\n- Resolve \"which component\" by reading each one's `description` + `keywords`,\n  then confirm with its `decisionTree` (the conditions that point elsewhere).\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`; add a local SVG only when neither has an equivalent. Don't duplicate an icon the design system already ships.\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- Never pass `sx`/inline styles to restyle a component; use its documented props and the theme tokens.\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.\n- Text uses `<Typography variant=…>` (with the `weight` prop for emphasis), never hardcoded `fontSize`/`fontWeight`/`lineHeight`/`fontFamily`.\n- Use `sx` for one-off styling, not the deprecated MUI system props\n  (`<Box px={2}>` → `<Box sx={{ px: 2 }}>`).\n\n## Examples\n\n- Never invent example code when a story exists — use the component's real story source (`meridian_get_examples`).\n",
+  "version": "3.0.3-alpha.cdb2a4e.260",
+  "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`; add a local SVG only when neither has an equivalent. Don't duplicate an icon the design system already ships.\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\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.\n- Text uses `<Typography variant=…>` (with the `weight` prop for emphasis), never hardcoded `fontSize`/`fontWeight`/`lineHeight`/`fontFamily`.\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": [
     {
       "name": "Autocomplete",
@@ -22,10 +22,17 @@
             "name": "value",
             "aiHint": "Always pass an explicit value (or null for cleared state); leaving it undefined causes MUI to switch between controlled and uncontrolled modes."
           },
-          "onChange",
+          {
+            "name": "onChange",
+            "aiHint": "The other half of the controlled pair with value - update your state here so value stays in sync (signature is (event, newValue))."
+          },
           {
             "name": "getOptionLabel",
-            "aiHint": "If users need to search across multiple fields (e.g., name, email, role) but getOptionLabel returns only one, provide a custom filterOptions function that matches across all relevant fields - the default filter only inspects the getOptionLabel return value."
+            "aiHint": "Extracts the display/search text from an option. The default filter only inspects this return value, so to search across multiple fields (e.g. name, email, role) pass a custom filterOptions that matches all of them."
+          },
+          {
+            "name": "filterOptions",
+            "aiHint": "Override the default substring match - e.g. multi-field search, or createFilterOptions for \"add new\" entries. See CreatableAutocomplete for the creatable pattern."
           },
           {
             "name": "open",
@@ -54,24 +61,25 @@
             "use": "SelectField"
           },
           {
-            "condition": "Multiple selection",
-            "use": "MultipleAutocomplete"
+            "condition": "Multiple selection (optionally grouped)",
+            "use": "MultipleAutocomplete",
+            "aiHint": "To group options (e.g. user/group selection), use the createAutocompleteGroupByList utility imported from @carto/meridian-ds/components."
           },
           {
             "condition": "User-created options",
             "use": "CreatableAutocomplete"
-          },
-          {
-            "condition": "User/group selection with grouping",
-            "use": "MultipleAutocomplete",
-            "aiHint": "Use createAutocompleteGroupByList utility to group options"
           }
+        ],
+        "variants": [
+          "MultipleAutocomplete",
+          "CreatableAutocomplete"
         ]
       },
       "examples": [
         {
           "name": "Usage",
           "id": "components-autocomplete-autocomplete--usage",
+          "isUsage": true,
           "code": "import { Autocomplete } from '@carto/meridian-ds/components'\nimport { TextField } from '@mui/material'\nimport { useState } from 'react'\n\nconst Usage = () => {\n    // options: { title: string; year: number }[]\n    const films = [\n      { title: 'The Shawshank Redemption', year: 1994 },\n      { title: 'The Godfather', year: 1972 },\n    ]\n    const [value, setValue] = useState<(typeof films)[number] | null>(null)\n    return (\n      <Autocomplete\n        value={value}\n        onChange={(_event, newValue) => setValue(newValue)}\n        options={films}\n        getOptionLabel={(option) => option.title}\n        renderInput={(params) => (\n          <TextField\n            {...params}\n            label='Film'\n            placeholder='Search films'\n            InputLabelProps={{ shrink: true }}\n          />\n        )}\n      />\n    )\n  }"
         },
         {
@@ -87,6 +95,7 @@
         {
           "name": "Prefix",
           "id": "components-autocomplete-autocomplete--prefix",
+          "summary": "Pin a fixed leading icon/adornment inside the input (params.InputProps.startAdornment)",
           "code": "import { Autocomplete, AutocompleteProps } from '@carto/meridian-ds/components'\nimport { AnalyticsOutlined } from '@mui/icons-material'\nimport { InputAdornment, TextField } from '@mui/material'\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  AutocompleteInputProps) => {\n  return (\n    <Autocomplete\n      {...props}\n      options={top100Films}\n      getOptionLabel={(option) => option.title}\n      renderInput={(params) => {\n        params.InputProps.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            InputLabelProps={{ shrink: true }}\n          />\n        )\n      }}\n      size={size}\n      disableCloseOnSelect={disableCloseOnSelect}\n    />\n  )\n}"
         },
         {
@@ -102,16 +111,19 @@
         {
           "name": "CustomRenderOption",
           "id": "components-autocomplete-autocomplete--custom-render-option",
+          "summary": "Custom option rows (icon + primary/secondary text) via renderOption",
           "code": "import { Autocomplete, AutocompleteProps, MenuItem } from '@carto/meridian-ds/components'\nimport { InputAdornment, ListItemIcon, ListItemText, TextField } from '@mui/material'\nimport { useState } from 'react'\n\nconst top100FilmsStartAndEndAdornment = getTop100Films({\n  includeStartAdornment: true,\n  includeEndAdornment: true,\n})\n\nconst CustomRenderOption = ({\n  label,\n  variant,\n  placeholder,\n  helperText,\n  error,\n  size,\n  required,\n  disableCloseOnSelect,\n  ...props\n}: AutocompleteProps<(typeof top100FilmsStartAndEndAdornment)[number]> &\n  AutocompleteInputProps) => {\n  const [selectedOption, setSelectedOption] = useState<\n    (typeof top100FilmsStartAndEndAdornment)[number] | null\n  >(null)\n\n  return (\n    <>\n      <DocContainer severity='info'>\n        Uses `startAdornment` for the icon in the input and `renderOption` to\n        override default list items\n      </DocContainer>\n\n      <Autocomplete\n        {...props}\n        size={size}\n        value={selectedOption}\n        options={top100FilmsStartAndEndAdornment}\n        getOptionLabel={(option) => `${option.title} (${option.year})`}\n        onChange={(event, newValue) => {\n          setSelectedOption(newValue)\n        }}\n        renderInput={(params) => {\n          if (selectedOption) {\n            params.InputProps.startAdornment = (\n              <InputAdornment position='start'>\n                {selectedOption.startAdornment}\n              </InputAdornment>\n            )\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              InputLabelProps={{ shrink: true }}\n            />\n          )\n        }}\n        renderOption={(props, option) => (\n          <MenuItem {...props} key={option.title}>\n            <ListItemIcon>{option.startAdornment}</ListItemIcon>\n            <ListItemText>\n              {option.year ? `${option.title} (${option.year})` : option.title}\n            </ListItemText>\n            {option.endAdornment}\n          </MenuItem>\n        )}\n        disableCloseOnSelect={disableCloseOnSelect}\n      />\n    </>\n  )\n}"
         },
         {
           "name": "FreeSolo",
           "id": "components-autocomplete-autocomplete--free-solo",
+          "summary": "Accept arbitrary typed values not in the options list (free text / tags)",
           "code": "import { Autocomplete, AutocompleteProps } from '@carto/meridian-ds/components'\nimport { TextField } from '@mui/material'\nimport { useState } from 'react'\n\nconst top100Films = getTop100Films()\n\nconst FreeSolo = ({\n  label,\n  variant,\n  placeholder,\n  helperText,\n  error,\n  size,\n  required,\n  disableCloseOnSelect,\n  ...props\n}: AutocompleteProps<(typeof top100Films)[number], boolean, false, true> &\n  AutocompleteInputProps) => {\n  const [values, setValues] = useState<typeof top100Films>([])\n\n  return (\n    <>\n      <DocContainer severity='info'>\n        The textbox can contain any arbitrary value.\n      </DocContainer>\n\n      <Autocomplete\n        {...props}\n        freeSolo\n        options={values}\n        onChange={(ev, values) => {\n          const newValues = Array.isArray(values) ? values : [values]\n          setValues(newValues as unknown as typeof top100Films)\n        }}\n        renderInput={(params) => (\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            InputLabelProps={{ shrink: true }}\n          />\n        )}\n        size={size}\n        disableCloseOnSelect={disableCloseOnSelect}\n      />\n    </>\n  )\n}"
         },
         {
           "name": "VirtualizedList",
           "id": "components-autocomplete-autocomplete--virtualized-list",
+          "summary": "Render very large option lists (10k+) performantly via a virtualized listbox",
           "code": "import { Autocomplete, AutocompleteList, AutocompleteListProps, AutocompleteProps, Typography, createAutocompleteGroupByList, isAutocompleteListGroupHeader, useAutocomplete } from '@carto/meridian-ds/components'\nimport { Grid, TextField } from '@mui/material'\nimport { useState } from 'react'\n\nconst largeMenuList = getLargeMenuList()\n\nconst VirtualizedList = ({\n  label,\n  variant,\n  placeholder,\n  helperText,\n  error,\n  size,\n  required,\n  disableCloseOnSelect,\n  ...props\n}: AutocompleteProps<(typeof largeMenuList)[number], boolean> &\n  AutocompleteInputProps) => {\n  const [value, setValue] = useState<StorybookFilmProps | null>(null)\n\n  // Create grouped options for the grouped items example\n  const sampleData = largeMenuList.map((item) => ({\n    ...item,\n    category: `Category ${Math.floor(Math.random() * 2000) + 1}`,\n  }))\n\n  const groupedOptions = createAutocompleteGroupByList({\n    options: sampleData,\n    groupBy: (option: (typeof sampleData)[number]) => option.category,\n  })\n\n  const { singleRenderOption, getOptionLabel } = useAutocomplete({\n    getOptionLabel: (option) => (option as StorybookFilmProps).title,\n  })\n\n  return (\n    <Grid container direction='column' spacing={6}>\n      <Grid item>\n        <Container>\n          <Label variant='body2'>{'Default'}</Label>\n          <Autocomplete\n            {...props}\n            value={value}\n            onChange={(ev, newValue) => {\n              if (!newValue) {\n                setValue(null)\n              } else if (Array.isArray(newValue)) {\n                setValue(newValue[0] || null)\n              } else {\n                setValue(newValue)\n              }\n            }}\n            options={largeMenuList}\n            getOptionLabel={(option) => option.title}\n            ListboxComponent={AutocompleteList}\n            renderInput={(params) => (\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                InputLabelProps={{ shrink: true }}\n              />\n            )}\n            size={size}\n            disableCloseOnSelect={disableCloseOnSelect}\n          />\n        </Container>\n      </Grid>\n      <Grid item>\n        <Container>\n          <Label variant='body2'>{'Custom ListboxProps'}</Label>\n          <Autocomplete\n            {...props}\n            value={value}\n            onChange={(ev, newValue) => {\n              if (!newValue) {\n                setValue(null)\n              } else if (Array.isArray(newValue)) {\n                setValue(newValue[0] || null)\n              } else {\n                setValue(newValue)\n              }\n            }}\n            options={largeMenuList}\n            getOptionLabel={(option) => option.title}\n            ListboxComponent={AutocompleteList}\n            ListboxProps={\n              {\n                itemHeight: 24,\n                maxListHeight: 200,\n              } as AutocompleteListProps\n            }\n            renderInput={(params) => (\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                InputLabelProps={{ shrink: true }}\n              />\n            )}\n            size={size}\n            disableCloseOnSelect={disableCloseOnSelect}\n          />\n        </Container>\n      </Grid>\n      <Grid item>\n        <Container>\n          <Label variant='body2'>{'Grouped items'}</Label>\n          <Autocomplete\n            {...props}\n            value={value}\n            onChange={(ev, newValue) => {\n              if (!newValue) {\n                setValue(null)\n              } else if (Array.isArray(newValue)) {\n                const firstValue: unknown = newValue[0]\n                // Filter out group headers and arrays\n                if (\n                  firstValue &&\n                  typeof firstValue === 'object' &&\n                  'title' in firstValue &&\n                  !isAutocompleteListGroupHeader(firstValue)\n                ) {\n                  setValue(firstValue as StorybookFilmProps)\n                } else {\n                  setValue(null)\n                }\n              } else {\n                // Filter out group headers\n                if (\n                  typeof newValue === 'object' &&\n                  'title' in newValue &&\n                  !isAutocompleteListGroupHeader(newValue)\n                ) {\n                  setValue(newValue as StorybookFilmProps)\n                } else {\n                  setValue(null)\n                }\n              }\n            }}\n            options={groupedOptions}\n            getOptionLabel={getOptionLabel}\n            renderOption={singleRenderOption}\n            ListboxComponent={AutocompleteList}\n            renderInput={(params) => (\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                InputLabelProps={{ shrink: true }}\n              />\n            )}\n            size={size}\n            disableCloseOnSelect={disableCloseOnSelect}\n          />\n        </Container>\n      </Grid>\n      <Grid item>\n        <DocContainer severity='info'>\n          <Typography variant='body2' mb={2}>\n            Regular Autocomplete doesn&apos;t support virtualization by default\n            to prioritize flexibility. If you need virtualization, use the\n            `AutocompleteList` component, which is a wrapper around\n            `react-window` and is optimized for virtualization.\n          </Typography>\n          <Typography variant='body2' weight='strong' mb={2}>\n            Virtualization Examples\n          </Typography>\n          <Typography variant='body2' weight='strong' mb={2}>\n            1. Basic Virtualization:\n          </Typography>\n          <Typography variant='body2' component='div' mb={2}>\n            {`<Autocomplete ListboxComponent={AutocompleteList} />`}\n          </Typography>\n          <Typography variant='body2' weight='strong' mb={2}>\n            2. Custom Height Settings:\n          </Typography>\n          <Typography variant='body2' component='div' mb={2}>\n            {`ListboxProps={{ itemHeight: 24, maxListHeight: 200 }}`}\n          </Typography>\n          <Typography variant='body2' weight='strong' mb={2}>\n            3. Grouped Virtualization:\n          </Typography>\n          <Typography variant='body2' component='div' mb={1}>\n            {`const groupedOptions = createAutocompleteGroupByList(data, (item) => item.category)`}\n          </Typography>\n          <Typography variant='body2' component='div' mb={1}>\n            {`  const { singleRenderOption, getOptionLabel } = useAutocomplete({\n    getOptionLabel: (option) => option.title,\n  })`}\n          </Typography>\n          <Typography variant='body2' component='div' mb={2}>\n            {`<Autocomplete options={groupedOptions} renderOption={singleRenderOption} getOptionLabel={getOptionLabel} />`}\n          </Typography>\n          <Typography variant='body2'>\n            Group headers are automatically styled as subtitles with proper\n            dividers and cannot be selected.\n          </Typography>\n        </DocContainer>\n      </Grid>\n    </Grid>\n  )\n}"
         },
         {
@@ -176,17 +188,7 @@
             "use": "SplitButton"
           },
           {
-            "condition": "Copying text to clipboard",
-            "use": "CopiableComponent",
-            "aiHint": "Adds copy-to-clipboard with tooltip and success notification"
-          },
-          {
-            "condition": "Selecting a filter value triggered by a button or icon",
-            "use": "FilterDropdown",
-            "aiHint": "Triggered by a button/icon, single option selection"
-          },
-          {
-            "condition": "Selecting a sort or setting value in a form",
+            "condition": "Selecting a value in a form rather than triggering an action",
             "use": "SelectField",
             "aiHint": "Not an action trigger, just selecting a value"
           }
@@ -206,11 +208,13 @@
         {
           "name": "Behavior",
           "id": "components-buttons-button--behavior",
+          "summary": "Wrap in a Tooltip for label overflow; loading/loadingPosition control spinner placement",
           "code": "import { Button, ButtonProps, Typography } from '@carto/meridian-ds/components'\nimport { Add, Close } from '@mui/icons-material'\nimport { Grid, Tooltip } from '@mui/material'\n\nconst Behavior = ({ children, ...rest }: ButtonProps) => {\n  const overflowLabel = 'Text Button with overflow'\n\n  return (\n    <Grid container direction='column' spacing={6}>\n      <Grid item container direction='column' xs={4}>\n        <Typography variant='body1' sx={{ mb: 2 }}>\n          {'Overflow + tooltip'}\n        </Typography>\n        <Grid container spacing={2}>\n          <Grid item xs={4}>\n            <Tooltip title={overflowLabel}>\n              <Button {...rest}>{overflowLabel}</Button>\n            </Tooltip>\n          </Grid>\n          <Grid item xs={4}>\n            <Tooltip title={overflowLabel}>\n              <Button {...rest} startIcon={<Add />}>\n                {overflowLabel}\n              </Button>\n            </Tooltip>\n          </Grid>\n          <Grid item xs={4}>\n            <Tooltip title={overflowLabel}>\n              <Button {...rest} endIcon={<Close />}>\n                {overflowLabel}\n              </Button>\n            </Tooltip>\n          </Grid>\n        </Grid>\n      </Grid>\n\n      <Grid item container direction='column' xs={4}>\n        <Typography variant='body1' sx={{ mb: 2 }}>\n          {'Pairing buttons'}\n        </Typography>\n        <Grid container spacing={2}>\n          <Grid item>\n            <Button {...rest}>{children}</Button>\n            <Button {...rest} startIcon={<Add />}>\n              {children}\n            </Button>\n          </Grid>\n        </Grid>\n      </Grid>\n\n      <Grid item container direction='column' xs={4}>\n        <Typography variant='body1' sx={{ mb: 2 }}>\n          {'Loading'}\n        </Typography>\n        <Grid container spacing={2}>\n          <Grid item xs={4}>\n            <Button loading variant='contained'>\n              {children}\n            </Button>\n          </Grid>\n          <Grid item xs={4}>\n            <Button\n              loading\n              loadingPosition='start'\n              variant='contained'\n              startIcon={<Add />}\n            >\n              {children}\n            </Button>\n          </Grid>\n          <Grid item xs={4}>\n            <Button\n              loading\n              loadingPosition='end'\n              variant='contained'\n              endIcon={<Close />}\n            >\n              {children}\n            </Button>\n          </Grid>\n        </Grid>\n      </Grid>\n    </Grid>\n  )\n}"
         },
         {
           "name": "ExternalLink",
           "id": "components-buttons-button--external-link",
+          "summary": "href links that open in a new tab — control/hide the external icon, set screenReaderText",
           "code": "import { Button, ButtonProps, Typography } from '@carto/meridian-ds/components'\nimport { Close } from '@mui/icons-material'\nimport { Grid } from '@mui/material'\n\nconst ExternalLink = ({ children, ...rest }: ButtonProps) => {\n  return (\n    <Grid container direction='column' spacing={4}>\n      <Grid item container direction='column'>\n        <Typography variant='body1' sx={{ mb: 2 }}>\n          {'External Link Buttons (with href)'}\n        </Typography>\n        <Grid container spacing={2}>\n          <Grid item xs={4}>\n            <Button {...rest} variant='contained'>\n              {children}\n            </Button>\n          </Grid>\n          <Grid item xs={4}>\n            <Button {...rest} variant='outlined'>\n              {children}\n            </Button>\n          </Grid>\n          <Grid item xs={4}>\n            <Button {...rest} variant='text'>\n              {children}\n            </Button>\n          </Grid>\n        </Grid>\n      </Grid>\n\n      <Grid item container direction='column'>\n        <Typography variant='body1' sx={{ mb: 2 }}>\n          {'External with Custom End Icon (custom icon takes precedence)'}\n        </Typography>\n        <Grid container spacing={2}>\n          <Grid item xs={4}>\n            <Button {...rest} endIcon={<Close />} variant='contained'>\n              {children}\n            </Button>\n          </Grid>\n          <Grid item xs={4}>\n            <Button {...rest} endIcon={<Close />} variant='outlined'>\n              {children}\n            </Button>\n          </Grid>\n          <Grid item xs={4}>\n            <Button {...rest} endIcon={<Close />} variant='text'>\n              {children}\n            </Button>\n          </Grid>\n        </Grid>\n      </Grid>\n\n      <Grid item container direction='column'>\n        <Typography variant='body1' sx={{ mb: 2 }}>\n          {'External without End Icon'}\n        </Typography>\n        <Grid container spacing={2}>\n          <Grid item xs={4}>\n            <Button {...rest} showExternalIcon={false} variant='contained'>\n              {children}\n            </Button>\n          </Grid>\n          <Grid item xs={4}>\n            <Button {...rest} showExternalIcon={false} variant='outlined'>\n              {children}\n            </Button>\n          </Grid>\n          <Grid item xs={4}>\n            <Button {...rest} showExternalIcon={false} variant='text'>\n              {children}\n            </Button>\n          </Grid>\n        </Grid>\n      </Grid>\n\n      <Grid item container direction='column'>\n        <Typography variant='body1' sx={{ mb: 2 }}>\n          {\n            'External with Custom screenReaderText (custom text for screen readers)'\n          }\n        </Typography>\n        <Grid container spacing={2}>\n          <Grid item xs={4}>\n            <Button\n              {...rest}\n              screenReaderText='Se abre en nueva pestaña'\n              variant='contained'\n            >\n              {children}\n            </Button>\n          </Grid>\n          <Grid item xs={4}>\n            <Button\n              {...rest}\n              screenReaderText='Se abre en nueva pestaña'\n              variant='outlined'\n            >\n              {children}\n            </Button>\n          </Grid>\n          <Grid item xs={4}>\n            <Button\n              {...rest}\n              screenReaderText='Se abre en nueva pestaña'\n              variant='text'\n            >\n              {children}\n            </Button>\n          </Grid>\n        </Grid>\n      </Grid>\n    </Grid>\n  )\n}"
         }
       ]
@@ -240,10 +244,17 @@
             "aiHint": "Required for accessibility. Describes the dialog purpose."
           }
         ],
+        "subComponents": [
+          "DialogHeader",
+          "DialogContent",
+          "DialogFooter",
+          "DialogStepper"
+        ],
         "decisionTree": [
           {
-            "condition": "Brief auto-dismissing notification",
-            "use": "Snackbar"
+            "condition": "Brief, non-blocking, or auto-dismissing notification",
+            "use": "Snackbar",
+            "aiHint": "Dialogs block the rest of the UI; use Snackbar for non-blocking confirmations and Alert for inline status."
           },
           {
             "condition": "Non-blocking inline message or warning",
@@ -253,11 +264,6 @@
           {
             "condition": "Quick selection anchored to a trigger",
             "use": "Menu"
-          },
-          {
-            "condition": "Non-blocking, transient notification",
-            "use": "Snackbar",
-            "aiHint": "Dialogs block the rest of the UI; use Snackbar for non-blocking confirmations and Alert for inline status."
           }
         ]
       },
@@ -265,6 +271,7 @@
         {
           "name": "Usage",
           "id": "components-dialogs-dialog--usage",
+          "isUsage": true,
           "code": "import { Button, Dialog, DialogContent, DialogFooter, DialogHeader, Typography } from '@carto/meridian-ds/components'\nimport { useState } from 'react'\n\nconst Usage = () => {\n    const [open, setOpen] = useState(false)\n    const close = () => setOpen(false)\n    return (\n      <>\n        <Button variant='outlined' onClick={() => setOpen(true)}>\n          Open dialog\n        </Button>\n        <Dialog open={open} onClose={close} size='small'>\n          <DialogHeader title='Delete item' onClose={close} />\n          <DialogContent>\n            <Typography variant='body1'>\n              This action cannot be undone.\n            </Typography>\n          </DialogContent>\n          <DialogFooter>\n            <Button variant='text' onClick={close}>\n              Cancel\n            </Button>\n            <Button variant='contained' color='error' onClick={close}>\n              Delete\n            </Button>\n          </DialogFooter>\n        </Dialog>\n      </>\n    )\n  }"
         },
         {
@@ -275,6 +282,7 @@
         {
           "name": "GutterContent",
           "id": "components-dialogs-dialog--gutter-content",
+          "summary": "Remove default content padding for full-bleed content (image/map) via withGutter",
           "code": "import { Button, Dialog, DialogContent, DialogFooter, DialogHeader, DialogStepper, Typography } from '@carto/meridian-ds/components'\nimport { Box, useTheme } from '@mui/material'\nimport { useState } from 'react'\n\nconst BaseDialog = ({\n  title,\n  chipLabel,\n  scrollableContent,\n  closeButton,\n  children,\n  showActions,\n  showStepper,\n  withGutter = true,\n  withBottomGutter = true,\n  spacing,\n  nonModal = true,\n  ...dialogArgs\n}: DialogStoryProps) => {\n  const theme = useTheme()\n  const [open, setOpen] = useState(false)\n\n  const handleClickOpen = (): void => {\n    setOpen(!open)\n  }\n\n  const handleClose = () => setOpen(false)\n\n  return (\n    <Box\n      sx={{\n        p: 2,\n        backgroundColor: nonModal ? theme.palette.black[12] : 'transparent',\n      }}\n    >\n      {!nonModal && (\n        <Button variant='outlined' color='primary' onClick={handleClickOpen}>\n          {open ? 'Close' : 'Open'} modal dialog\n        </Button>\n      )}\n      <Dialog\n        {...dialogArgs}\n        open={open}\n        onClose={closeButton ? handleClose : undefined}\n        nonModal={nonModal}\n      >\n        <DialogHeader\n          onClose={closeButton ? handleClose : undefined}\n          chipLabel={chipLabel}\n          title={title}\n        >\n          {showStepper && (\n            <DialogStepper\n              currentStep={1}\n              stepsLabels={['Step 1', 'Step 2', 'Step 3']}\n            />\n          )}\n        </DialogHeader>\n        <DialogContent\n          scrollableContent={scrollableContent}\n          withGutter={withGutter}\n          withBottomGutter={withBottomGutter}\n          spacing={spacing}\n        >\n          {children}\n        </DialogContent>\n        {showActions && (\n          <DialogFooter>\n            <Button variant='contained' onClick={handleClose}>\n              Done\n            </Button>\n          </DialogFooter>\n        )}\n      </Dialog>\n    </Box>\n  )\n}\n\nconst GutterContent = (args: DialogStoryProps) => {\n  return (\n    <>\n      <Typography variant='subtitle1' color='textSecondary' mb={1}>\n        {'WithGutter (default)'}\n      </Typography>\n      <BaseDialog\n        {...args}\n        open={true}\n        nonModal={true}\n        showActions={true}\n        title={args.title}\n      >\n        <img src={Map} alt='Map sample' />\n      </BaseDialog>\n\n      <Typography variant='subtitle1' color='textSecondary' mt={3} mb={1}>\n        {'Without gutter (withGutter={false})'}\n      </Typography>\n      <BaseDialog\n        {...args}\n        open={true}\n        nonModal={true}\n        showActions={true}\n        withGutter={false}\n        title={args.title}\n      >\n        <img src={Map} alt='Map sample' />\n      </BaseDialog>\n\n      <Typography variant='subtitle1' color='textSecondary' mt={3} mb={1}>\n        {'Without bottom gutter (withBottomGutter={false})'}\n      </Typography>\n      <BaseDialog\n        {...args}\n        open={true}\n        nonModal={true}\n        showActions={true}\n        withBottomGutter={false}\n        title={args.title}\n      >\n        <img src={Map} alt='Map sample' />\n      </BaseDialog>\n    </>\n  )\n}"
         },
         {
@@ -305,26 +313,31 @@
         {
           "name": "FluidHeight",
           "id": "components-dialogs-dialog--fluid-height",
+          "summary": "Height shrink-wraps content instead of the fixed size (height='auto')",
           "code": "import { Alert, Button, Dialog, DialogContent, DialogFooter, DialogHeader, DialogStepper, Typography } from '@carto/meridian-ds/components'\nimport { Box, useTheme } from '@mui/material'\nimport { useState } from 'react'\n\nconst SampleContentSmall = () => (\n  <>\n    <Typography variant='body2' color='textSecondary'>\n      Numeric, string and boolean are supported.\n    </Typography>\n\n    <div>\n      <Alert severity='warning'>\n        <Typography variant='code3' component='pre'>\n          {someRandomCode}\n        </Typography>\n      </Alert>\n    </div>\n  </>\n)\n\nconst BaseDialog = ({\n  title,\n  chipLabel,\n  scrollableContent,\n  closeButton,\n  children,\n  showActions,\n  showStepper,\n  withGutter = true,\n  withBottomGutter = true,\n  spacing,\n  nonModal = true,\n  ...dialogArgs\n}: DialogStoryProps) => {\n  const theme = useTheme()\n  const [open, setOpen] = useState(false)\n\n  const handleClickOpen = (): void => {\n    setOpen(!open)\n  }\n\n  const handleClose = () => setOpen(false)\n\n  return (\n    <Box\n      sx={{\n        p: 2,\n        backgroundColor: nonModal ? theme.palette.black[12] : 'transparent',\n      }}\n    >\n      {!nonModal && (\n        <Button variant='outlined' color='primary' onClick={handleClickOpen}>\n          {open ? 'Close' : 'Open'} modal dialog\n        </Button>\n      )}\n      <Dialog\n        {...dialogArgs}\n        open={open}\n        onClose={closeButton ? handleClose : undefined}\n        nonModal={nonModal}\n      >\n        <DialogHeader\n          onClose={closeButton ? handleClose : undefined}\n          chipLabel={chipLabel}\n          title={title}\n        >\n          {showStepper && (\n            <DialogStepper\n              currentStep={1}\n              stepsLabels={['Step 1', 'Step 2', 'Step 3']}\n            />\n          )}\n        </DialogHeader>\n        <DialogContent\n          scrollableContent={scrollableContent}\n          withGutter={withGutter}\n          withBottomGutter={withBottomGutter}\n          spacing={spacing}\n        >\n          {children}\n        </DialogContent>\n        {showActions && (\n          <DialogFooter>\n            <Button variant='contained' onClick={handleClose}>\n              Done\n            </Button>\n          </DialogFooter>\n        )}\n      </Dialog>\n    </Box>\n  )\n}\n\nconst someRandomCode = `export default {\n  title: 'Components/Dialogs/Dialog',\n  component: Dialog,\n  tags: ['autodocs']\n}\n`\n\nconst FluidHeight = ({ explanation, ...args }: DialogStoryProps) => {\n  return (\n    <>\n      {explanation && (\n        <Typography variant='subtitle1' color='textSecondary' mb={1}>\n          {explanation}\n        </Typography>\n      )}\n      <BaseDialog {...args} nonModal={false}>\n        <SampleContentSmall />\n      </BaseDialog>\n    </>\n  )\n}"
         },
         {
           "name": "FluidWidth",
           "id": "components-dialogs-dialog--fluid-width",
+          "summary": "Width shrink-wraps content instead of the fixed size (width='auto')",
           "code": "import { Alert, Button, Dialog, DialogContent, DialogFooter, DialogHeader, DialogStepper, Typography } from '@carto/meridian-ds/components'\nimport { Box, useTheme } from '@mui/material'\nimport { useState } from 'react'\n\nconst SampleContentSmall = () => (\n  <>\n    <Typography variant='body2' color='textSecondary'>\n      Numeric, string and boolean are supported.\n    </Typography>\n\n    <div>\n      <Alert severity='warning'>\n        <Typography variant='code3' component='pre'>\n          {someRandomCode}\n        </Typography>\n      </Alert>\n    </div>\n  </>\n)\n\nconst BaseDialog = ({\n  title,\n  chipLabel,\n  scrollableContent,\n  closeButton,\n  children,\n  showActions,\n  showStepper,\n  withGutter = true,\n  withBottomGutter = true,\n  spacing,\n  nonModal = true,\n  ...dialogArgs\n}: DialogStoryProps) => {\n  const theme = useTheme()\n  const [open, setOpen] = useState(false)\n\n  const handleClickOpen = (): void => {\n    setOpen(!open)\n  }\n\n  const handleClose = () => setOpen(false)\n\n  return (\n    <Box\n      sx={{\n        p: 2,\n        backgroundColor: nonModal ? theme.palette.black[12] : 'transparent',\n      }}\n    >\n      {!nonModal && (\n        <Button variant='outlined' color='primary' onClick={handleClickOpen}>\n          {open ? 'Close' : 'Open'} modal dialog\n        </Button>\n      )}\n      <Dialog\n        {...dialogArgs}\n        open={open}\n        onClose={closeButton ? handleClose : undefined}\n        nonModal={nonModal}\n      >\n        <DialogHeader\n          onClose={closeButton ? handleClose : undefined}\n          chipLabel={chipLabel}\n          title={title}\n        >\n          {showStepper && (\n            <DialogStepper\n              currentStep={1}\n              stepsLabels={['Step 1', 'Step 2', 'Step 3']}\n            />\n          )}\n        </DialogHeader>\n        <DialogContent\n          scrollableContent={scrollableContent}\n          withGutter={withGutter}\n          withBottomGutter={withBottomGutter}\n          spacing={spacing}\n        >\n          {children}\n        </DialogContent>\n        {showActions && (\n          <DialogFooter>\n            <Button variant='contained' onClick={handleClose}>\n              Done\n            </Button>\n          </DialogFooter>\n        )}\n      </Dialog>\n    </Box>\n  )\n}\n\nconst someRandomCode = `export default {\n  title: 'Components/Dialogs/Dialog',\n  component: Dialog,\n  tags: ['autodocs']\n}\n`\n\nconst FluidWidth = ({ explanation, ...args }: DialogStoryProps) => {\n  return (\n    <>\n      {explanation && (\n        <Typography variant='subtitle1' color='textSecondary' mb={1}>\n          {explanation}\n        </Typography>\n      )}\n      <BaseDialog {...args} nonModal={false}>\n        <SampleContentSmall />\n      </BaseDialog>\n    </>\n  )\n}"
         },
         {
           "name": "WithStepperAndChip",
           "id": "components-dialogs-dialog--with-stepper-and-chip",
+          "summary": "Multi-step wizard — header stepper plus a status Chip",
           "code": "import { Alert, Button, Dialog, DialogContent, DialogFooter, DialogHeader, DialogStepper, Typography } from '@carto/meridian-ds/components'\nimport { Box, useTheme } from '@mui/material'\nimport { useState } from 'react'\n\nconst SampleContentSmall = () => (\n  <>\n    <Typography variant='body2' color='textSecondary'>\n      Numeric, string and boolean are supported.\n    </Typography>\n\n    <div>\n      <Alert severity='warning'>\n        <Typography variant='code3' component='pre'>\n          {someRandomCode}\n        </Typography>\n      </Alert>\n    </div>\n  </>\n)\n\nconst BaseDialog = ({\n  title,\n  chipLabel,\n  scrollableContent,\n  closeButton,\n  children,\n  showActions,\n  showStepper,\n  withGutter = true,\n  withBottomGutter = true,\n  spacing,\n  nonModal = true,\n  ...dialogArgs\n}: DialogStoryProps) => {\n  const theme = useTheme()\n  const [open, setOpen] = useState(false)\n\n  const handleClickOpen = (): void => {\n    setOpen(!open)\n  }\n\n  const handleClose = () => setOpen(false)\n\n  return (\n    <Box\n      sx={{\n        p: 2,\n        backgroundColor: nonModal ? theme.palette.black[12] : 'transparent',\n      }}\n    >\n      {!nonModal && (\n        <Button variant='outlined' color='primary' onClick={handleClickOpen}>\n          {open ? 'Close' : 'Open'} modal dialog\n        </Button>\n      )}\n      <Dialog\n        {...dialogArgs}\n        open={open}\n        onClose={closeButton ? handleClose : undefined}\n        nonModal={nonModal}\n      >\n        <DialogHeader\n          onClose={closeButton ? handleClose : undefined}\n          chipLabel={chipLabel}\n          title={title}\n        >\n          {showStepper && (\n            <DialogStepper\n              currentStep={1}\n              stepsLabels={['Step 1', 'Step 2', 'Step 3']}\n            />\n          )}\n        </DialogHeader>\n        <DialogContent\n          scrollableContent={scrollableContent}\n          withGutter={withGutter}\n          withBottomGutter={withBottomGutter}\n          spacing={spacing}\n        >\n          {children}\n        </DialogContent>\n        {showActions && (\n          <DialogFooter>\n            <Button variant='contained' onClick={handleClose}>\n              Done\n            </Button>\n          </DialogFooter>\n        )}\n      </Dialog>\n    </Box>\n  )\n}\n\nconst someRandomCode = `export default {\n  title: 'Components/Dialogs/Dialog',\n  component: Dialog,\n  tags: ['autodocs']\n}\n`\n\nconst WithStepperAndChip = (args: DialogStoryProps) => {\n  return (\n    <BaseDialog\n      {...args}\n      nonModal={true}\n      showStepper={true}\n      showActions={true}\n      title={args.title}\n      chipLabel={args.chipLabel}\n      chipProps={args.chipProps}\n    >\n      <Box>\n        This is step <strong>{args.step}</strong> of {args.title}\n      </Box>\n      <SampleContentSmall />\n    </BaseDialog>\n  )\n}"
         },
         {
           "name": "ScrollableContent",
           "id": "components-dialogs-dialog--scrollable-content",
+          "summary": "Whole body scrolls as one block (DialogContent scrollableContent); header/footer stay pinned",
           "code": "import { Alert, Button, Dialog, DialogContent, DialogFooter, DialogHeader, DialogStepper, Typography } from '@carto/meridian-ds/components'\nimport { Box, useTheme } from '@mui/material'\nimport { useState } from 'react'\n\nconst BaseDialog = ({\n  title,\n  chipLabel,\n  scrollableContent,\n  closeButton,\n  children,\n  showActions,\n  showStepper,\n  withGutter = true,\n  withBottomGutter = true,\n  spacing,\n  nonModal = true,\n  ...dialogArgs\n}: DialogStoryProps) => {\n  const theme = useTheme()\n  const [open, setOpen] = useState(false)\n\n  const handleClickOpen = (): void => {\n    setOpen(!open)\n  }\n\n  const handleClose = () => setOpen(false)\n\n  return (\n    <Box\n      sx={{\n        p: 2,\n        backgroundColor: nonModal ? theme.palette.black[12] : 'transparent',\n      }}\n    >\n      {!nonModal && (\n        <Button variant='outlined' color='primary' onClick={handleClickOpen}>\n          {open ? 'Close' : 'Open'} modal dialog\n        </Button>\n      )}\n      <Dialog\n        {...dialogArgs}\n        open={open}\n        onClose={closeButton ? handleClose : undefined}\n        nonModal={nonModal}\n      >\n        <DialogHeader\n          onClose={closeButton ? handleClose : undefined}\n          chipLabel={chipLabel}\n          title={title}\n        >\n          {showStepper && (\n            <DialogStepper\n              currentStep={1}\n              stepsLabels={['Step 1', 'Step 2', 'Step 3']}\n            />\n          )}\n        </DialogHeader>\n        <DialogContent\n          scrollableContent={scrollableContent}\n          withGutter={withGutter}\n          withBottomGutter={withBottomGutter}\n          spacing={spacing}\n        >\n          {children}\n        </DialogContent>\n        {showActions && (\n          <DialogFooter>\n            <Button variant='contained' onClick={handleClose}>\n              Done\n            </Button>\n          </DialogFooter>\n        )}\n      </Dialog>\n    </Box>\n  )\n}\n\nconst someRandomText = (\n  <Typography variant='body2' color='textSecondary'>\n    Numeric, string and boolean are supported. Date and timestamps will be\n    encoded as strings. Learn more about tilesets in our documentation.\n  </Typography>\n)\n\nconst someBigRandomLog = `2023-10-13 11:54:35.526 [info] > git config --get commit.template [8ms]\n2023-10-13 11:54:35.560 [info] > git for-each-ref --format=%(refname)%00%(upstream:short)%00%(objectname)%00%(upstream:track)%00%(upstream:remotename)%00%(upstream:remoteref) --ignore-case refs/heads/zbigg/server-data-export-ui refs/remotes/zbigg/server-data-export-ui [39ms]\n2023-10-13 11:54:35.651 [info] > git status -z -uall [91ms]\n2023-10-13 11:54:36.770 [info] > git ls-files --stage -- /Users/zbigg/carto/cloud-native/workspace-www/src/features/common/utils/urlUtils.ts [23ms]\n2023-10-13 11:54:36.770 [info] > git ls-files --stage -- /Users/zbigg/carto/cloud-native/workspace-www/src/features/jobs/ui/JobItem/DownloadsPart.tsx [28ms]\n2023-10-13 11:54:36.770 [info] > git ls-files --stage -- /Users/zbigg/carto/cloud-native/workspace-www/src/features/jobs/ui/JobItem/DownloadsDialog.tsx [33ms]\n2023-10-13 11:54:36.770 [info] > git ls-files --stage -- /Users/zbigg/carto/cloud-native/Makefile [52ms]\n2023-10-13 11:54:36.770 [info] > git ls-files --stage -- /Users/zbigg/carto/cloud-native/jobs-samples.md [53ms]\n2023-10-13 11:54:36.770 [info] > git ls-files --stage -- /Users/zbigg/carto/cloud-native/time-series-fixes-and-enchancements.md [54ms]\n2023-10-13 11:54:36.772 [info] > git ls-files --stage -- /Users/zbigg/carto/cloud-native/workspace-www/src/features/access-token/ui/AccessTokenForm/AccessTokenFormApi/AccessTokenFormApiOptions.tsx [25ms]\n2023-10-13 11:54:36.772 [info] > git ls-files --stage -- /Users/zbigg/carto/cloud-native/workspace-www/src/features/data-explorer/ui/Resources/Actions/Subscription/SubscriptionExportDialog/SubscriptionExportDialogContent/JobSuccessDownload.tsx [26ms]\n2023-10-13 11:54:36.773 [info] > git ls-files --stage -- /Users/zbigg/carto/cloud-native/workspace-www/src/features/common/ui/utils/CopiableComponent.tsx [28ms]\n2023-10-13 11:54:36.773 [info] > git ls-files --stage -- /Users/zbigg/carto/cloud-native/workspace-www/src/features/common/utils/dateFormat.ts [28ms]\n2023-10-13 11:54:36.775 [info] > git ls-files --stage -- /Users/zbigg/carto/cloud-native/workspace-www/src/features/jobs/ui/JobItem/ErrorDetailsDialog.tsx [34ms]\n2023-10-13 11:54:36.775 [info] > git ls-files --stage -- /Users/zbigg/carto/cloud-native/workspace-www/src/__tests__/features/jobs/mocks/processingJobs.ts [41ms]\n2023-10-13 11:54:36.781 [info] > git ls-files --stage -- /Users/zbigg/carto/cloud-native/workspace-www/src/features/jobs/state/jobsExportingSlice.ts [48ms]\n2023-10-13 11:54:36.781 [info] > git ls-files --stage -- /Users/zbigg/carto/cloud-native/workspace-www/src/features/metrics/state/metricsSagas.ts [48ms]\n2023-10-13 11:54:36.782 [info] > git ls-files --stage -- /Users/zbigg/carto/cloud-native/workspace-www/src/features/analysis/ui/NewAnalysisDialog/AnalysisCatalog/Buffer/Form/TractsDropdown.tsx [54ms]\n2023-10-13 11:54:36.783 [info] > git ls-files --stage -- /Users/zbigg/carto/cloud-native/workspace-www/src/features/jobs/models/exportsModel.ts [52ms]\n2023-10-13 11:54:36.784 [info] > git ls-files --stage -- /Users/zbigg/carto/cloud-native/workspace-www/src/features/data-explorer/ui/Resources/Actions/Subscription/SubscriptionExportDialog/useExportHooks.ts [53ms]\n2023-10-13 11:54:36.786 [info] > git ls-files --stage -- /Users/zbigg/carto/cloud-native/workspace-www/src/features/builder/ui/BuilderPrivate/BuilderHeader/BuilderHeaderActions/ExportDataDialog.tsx [63ms]\n2023-10-13 11:54:36.787 [info] > git ls-files --stage -- /Users/zbigg/carto/cloud-native/accounts-www/src/features/accounts/ui/Form/FormSelect.tsx [62ms]\n2023-10-13 11:54:36.787 [info] > git ls-files --stage -- /Users/zbigg/carto/cloud-native/workspace-www/src/features/jobs/ui/JobsPopper.tsx [67ms]\n2023-10-13 11:54:36.788 [info] > git ls-files --stage -- /Users/zbigg/carto/cloud-native/workspace-www/src/features/common/ui/AppTemplate/HeaderBase/Partials/JobsStatusIndicator.`\n\nconst someRandomLogElement = (\n  <Typography variant='code3' component='pre'>\n    {someBigRandomLog}\n  </Typography>\n)\n\nconst ScrollableContent = (args: DialogStoryProps) => (\n  <BaseDialog {...args} nonModal scrollableContent showActions closeButton>\n    {someRandomText}\n    <div>\n      <Alert severity='warning'>{someRandomLogElement}</Alert>\n    </div>\n  </BaseDialog>\n)"
         },
         {
           "name": "InternallScroll",
           "id": "components-dialogs-dialog--internall-scroll",
+          "summary": "Only a sub-region scrolls (overflow on an inner wrapper); the rest stays static",
           "code": "import { Alert, Button, Dialog, DialogContent, DialogFooter, DialogHeader, DialogStepper, Typography } from '@carto/meridian-ds/components'\nimport { Box, useTheme } from '@mui/material'\nimport { useState } from 'react'\n\nconst BaseDialog = ({\n  title,\n  chipLabel,\n  scrollableContent,\n  closeButton,\n  children,\n  showActions,\n  showStepper,\n  withGutter = true,\n  withBottomGutter = true,\n  spacing,\n  nonModal = true,\n  ...dialogArgs\n}: DialogStoryProps) => {\n  const theme = useTheme()\n  const [open, setOpen] = useState(false)\n\n  const handleClickOpen = (): void => {\n    setOpen(!open)\n  }\n\n  const handleClose = () => setOpen(false)\n\n  return (\n    <Box\n      sx={{\n        p: 2,\n        backgroundColor: nonModal ? theme.palette.black[12] : 'transparent',\n      }}\n    >\n      {!nonModal && (\n        <Button variant='outlined' color='primary' onClick={handleClickOpen}>\n          {open ? 'Close' : 'Open'} modal dialog\n        </Button>\n      )}\n      <Dialog\n        {...dialogArgs}\n        open={open}\n        onClose={closeButton ? handleClose : undefined}\n        nonModal={nonModal}\n      >\n        <DialogHeader\n          onClose={closeButton ? handleClose : undefined}\n          chipLabel={chipLabel}\n          title={title}\n        >\n          {showStepper && (\n            <DialogStepper\n              currentStep={1}\n              stepsLabels={['Step 1', 'Step 2', 'Step 3']}\n            />\n          )}\n        </DialogHeader>\n        <DialogContent\n          scrollableContent={scrollableContent}\n          withGutter={withGutter}\n          withBottomGutter={withBottomGutter}\n          spacing={spacing}\n        >\n          {children}\n        </DialogContent>\n        {showActions && (\n          <DialogFooter>\n            <Button variant='contained' onClick={handleClose}>\n              Done\n            </Button>\n          </DialogFooter>\n        )}\n      </Dialog>\n    </Box>\n  )\n}\n\nconst someRandomText = (\n  <Typography variant='body2' color='textSecondary'>\n    Numeric, string and boolean are supported. Date and timestamps will be\n    encoded as strings. Learn more about tilesets in our documentation.\n  </Typography>\n)\n\nconst someBigRandomLog = `2023-10-13 11:54:35.526 [info] > git config --get commit.template [8ms]\n2023-10-13 11:54:35.560 [info] > git for-each-ref --format=%(refname)%00%(upstream:short)%00%(objectname)%00%(upstream:track)%00%(upstream:remotename)%00%(upstream:remoteref) --ignore-case refs/heads/zbigg/server-data-export-ui refs/remotes/zbigg/server-data-export-ui [39ms]\n2023-10-13 11:54:35.651 [info] > git status -z -uall [91ms]\n2023-10-13 11:54:36.770 [info] > git ls-files --stage -- /Users/zbigg/carto/cloud-native/workspace-www/src/features/common/utils/urlUtils.ts [23ms]\n2023-10-13 11:54:36.770 [info] > git ls-files --stage -- /Users/zbigg/carto/cloud-native/workspace-www/src/features/jobs/ui/JobItem/DownloadsPart.tsx [28ms]\n2023-10-13 11:54:36.770 [info] > git ls-files --stage -- /Users/zbigg/carto/cloud-native/workspace-www/src/features/jobs/ui/JobItem/DownloadsDialog.tsx [33ms]\n2023-10-13 11:54:36.770 [info] > git ls-files --stage -- /Users/zbigg/carto/cloud-native/Makefile [52ms]\n2023-10-13 11:54:36.770 [info] > git ls-files --stage -- /Users/zbigg/carto/cloud-native/jobs-samples.md [53ms]\n2023-10-13 11:54:36.770 [info] > git ls-files --stage -- /Users/zbigg/carto/cloud-native/time-series-fixes-and-enchancements.md [54ms]\n2023-10-13 11:54:36.772 [info] > git ls-files --stage -- /Users/zbigg/carto/cloud-native/workspace-www/src/features/access-token/ui/AccessTokenForm/AccessTokenFormApi/AccessTokenFormApiOptions.tsx [25ms]\n2023-10-13 11:54:36.772 [info] > git ls-files --stage -- /Users/zbigg/carto/cloud-native/workspace-www/src/features/data-explorer/ui/Resources/Actions/Subscription/SubscriptionExportDialog/SubscriptionExportDialogContent/JobSuccessDownload.tsx [26ms]\n2023-10-13 11:54:36.773 [info] > git ls-files --stage -- /Users/zbigg/carto/cloud-native/workspace-www/src/features/common/ui/utils/CopiableComponent.tsx [28ms]\n2023-10-13 11:54:36.773 [info] > git ls-files --stage -- /Users/zbigg/carto/cloud-native/workspace-www/src/features/common/utils/dateFormat.ts [28ms]\n2023-10-13 11:54:36.775 [info] > git ls-files --stage -- /Users/zbigg/carto/cloud-native/workspace-www/src/features/jobs/ui/JobItem/ErrorDetailsDialog.tsx [34ms]\n2023-10-13 11:54:36.775 [info] > git ls-files --stage -- /Users/zbigg/carto/cloud-native/workspace-www/src/__tests__/features/jobs/mocks/processingJobs.ts [41ms]\n2023-10-13 11:54:36.781 [info] > git ls-files --stage -- /Users/zbigg/carto/cloud-native/workspace-www/src/features/jobs/state/jobsExportingSlice.ts [48ms]\n2023-10-13 11:54:36.781 [info] > git ls-files --stage -- /Users/zbigg/carto/cloud-native/workspace-www/src/features/metrics/state/metricsSagas.ts [48ms]\n2023-10-13 11:54:36.782 [info] > git ls-files --stage -- /Users/zbigg/carto/cloud-native/workspace-www/src/features/analysis/ui/NewAnalysisDialog/AnalysisCatalog/Buffer/Form/TractsDropdown.tsx [54ms]\n2023-10-13 11:54:36.783 [info] > git ls-files --stage -- /Users/zbigg/carto/cloud-native/workspace-www/src/features/jobs/models/exportsModel.ts [52ms]\n2023-10-13 11:54:36.784 [info] > git ls-files --stage -- /Users/zbigg/carto/cloud-native/workspace-www/src/features/data-explorer/ui/Resources/Actions/Subscription/SubscriptionExportDialog/useExportHooks.ts [53ms]\n2023-10-13 11:54:36.786 [info] > git ls-files --stage -- /Users/zbigg/carto/cloud-native/workspace-www/src/features/builder/ui/BuilderPrivate/BuilderHeader/BuilderHeaderActions/ExportDataDialog.tsx [63ms]\n2023-10-13 11:54:36.787 [info] > git ls-files --stage -- /Users/zbigg/carto/cloud-native/accounts-www/src/features/accounts/ui/Form/FormSelect.tsx [62ms]\n2023-10-13 11:54:36.787 [info] > git ls-files --stage -- /Users/zbigg/carto/cloud-native/workspace-www/src/features/jobs/ui/JobsPopper.tsx [67ms]\n2023-10-13 11:54:36.788 [info] > git ls-files --stage -- /Users/zbigg/carto/cloud-native/workspace-www/src/features/common/ui/AppTemplate/HeaderBase/Partials/JobsStatusIndicator.`\n\nconst someRandomLogElement = (\n  <Typography variant='code3' component='pre'>\n    {someBigRandomLog}\n  </Typography>\n)\n\nconst InternallScroll = (args: DialogStoryProps) => (\n  <BaseDialog {...args} nonModal showActions closeButton>\n    {someRandomText}\n    <Box style={{ maxHeight: 'fit-content', overflowY: 'scroll' }}>\n      <Alert severity='warning'>{someRandomLogElement}</Alert>\n    </Box>\n  </BaseDialog>\n)"
         },
         {
@@ -420,7 +433,8 @@
         "decisionTree": [
           {
             "condition": ">10 items or search needed",
-            "use": "Autocomplete"
+            "use": "Autocomplete",
+            "aiHint": "SelectField has no search; switch to Autocomplete past ~10 options."
           },
           {
             "condition": "Users need to create options not in the predefined list",
@@ -446,11 +460,6 @@
             "condition": "2-5 options in a toolbar with icons",
             "use": "ToggleButtonGroup",
             "aiHint": "Compact, supports icons, good for mode toggles (e.g., grid/list view)"
-          },
-          {
-            "condition": "Large list of options needing search",
-            "use": "Autocomplete",
-            "aiHint": "SelectField has no search; switch to Autocomplete past ~10 options."
           }
         ]
       },
@@ -458,6 +467,7 @@
         {
           "name": "Usage",
           "id": "components-select-field-select-field--usage",
+          "isUsage": true,
           "code": "import { MenuItem, SelectField } from '@carto/meridian-ds/components'\nimport { useState } from 'react'\n\nconst Usage = () => {\n    const [country, setCountry] = useState('es')\n    return (\n      <SelectField\n        label='Country'\n        value={country}\n        onChange={(event) => setCountry(event.target.value)}\n      >\n        <MenuItem value='es'>Spain</MenuItem>\n        <MenuItem value='fr'>France</MenuItem>\n        <MenuItem value='de'>Germany</MenuItem>\n      </SelectField>\n    )\n  }"
         },
         {
@@ -473,6 +483,7 @@
         {
           "name": "Prefix",
           "id": "components-select-field-select-field--prefix",
+          "summary": "Add a unit or icon startAdornment (e.g. 'Kg' or a map icon) for inline context",
           "code": "import { MenuItem, SelectField } from '@carto/meridian-ds/components'\nimport { MapOutlined } from '@mui/icons-material'\nimport { Grid, InputAdornment, SelectChangeEvent } from '@mui/material'\nimport { useState } from 'react'\n\nconst menuItems = [\n  { label: 'Ten: super large text with overflow', id: '10' },\n  { label: 'Twenty', id: '20' },\n  { label: 'Thirty', id: '30' },\n]\n\nconst SelectFieldItem = ({\n  label,\n  required,\n  placeholder,\n  variant,\n  helperText,\n  size,\n  focused,\n  disabled,\n  error,\n  ...rest\n}: SelectFieldProps) => {\n  const [content, setContent] = useState([] as string[])\n\n  const handleChange = (event: SelectChangeEvent<unknown>) => {\n    const value = event.target.value\n    setContent(\n      // On autofill we get a stringified value\n      typeof value === 'string' ? value.split(',') : (value as string[]),\n    )\n  }\n\n  return (\n    <SelectField\n      {...rest}\n      variant={variant}\n      label={label}\n      placeholder={placeholder}\n      helperText={helperText}\n      value={content}\n      focused={focused}\n      disabled={disabled}\n      onChange={handleChange}\n      error={error}\n      size={size}\n      fullWidth={rest.fullWidth}\n      required={required}\n    >\n      {menuItems.map((o, i) => (\n        <MenuItem key={i} value={o.label}>\n          {o.label}\n        </MenuItem>\n      ))}\n    </SelectField>\n  )\n}\n\nconst Prefix = ({ label, placeholder, ...rest }: SelectFieldProps) => {\n  return (\n    <Grid container direction='column' spacing={6}>\n      <Grid item>\n        <Container>\n          <Label variant='body2'>{'Prefix (text)'}</Label>\n          <SelectFieldItem\n            {...rest}\n            label={label}\n            placeholder={placeholder}\n            startAdornment={\n              <InputAdornment position='start'>Kg</InputAdornment>\n            }\n          />\n        </Container>\n      </Grid>\n      <Grid item>\n        <Container>\n          <Label variant='body2'>{'Prefix (icon)'}</Label>\n          <SelectFieldItem\n            {...rest}\n            label={label}\n            placeholder={placeholder}\n            startAdornment={\n              <InputAdornment position='start'>\n                <MapOutlined />\n              </InputAdornment>\n            }\n          />\n        </Container>\n      </Grid>\n      <Grid item>\n        <Container>\n          <Label variant='body2'>{'None'}</Label>\n          <SelectFieldItem {...rest} label={label} placeholder={placeholder} />\n        </Container>\n      </Grid>\n    </Grid>\n  )\n}"
         },
         {
@@ -488,6 +499,7 @@
         {
           "name": "Behavior",
           "id": "components-select-field-select-field--behavior",
+          "summary": "Layout: long-option overflow truncation, pairing fields, fullWidth vs fixed width",
           "code": "import { MenuItem, SelectField } from '@carto/meridian-ds/components'\nimport { Grid, SelectChangeEvent } from '@mui/material'\nimport { useState } from 'react'\n\nconst menuItems = [\n  { label: 'Ten: super large text with overflow', id: '10' },\n  { label: 'Twenty', id: '20' },\n  { label: 'Thirty', id: '30' },\n]\n\nconst SelectFieldItem = ({\n  label,\n  required,\n  placeholder,\n  variant,\n  helperText,\n  size,\n  focused,\n  disabled,\n  error,\n  ...rest\n}: SelectFieldProps) => {\n  const [content, setContent] = useState([] as string[])\n\n  const handleChange = (event: SelectChangeEvent<unknown>) => {\n    const value = event.target.value\n    setContent(\n      // On autofill we get a stringified value\n      typeof value === 'string' ? value.split(',') : (value as string[]),\n    )\n  }\n\n  return (\n    <SelectField\n      {...rest}\n      variant={variant}\n      label={label}\n      placeholder={placeholder}\n      helperText={helperText}\n      value={content}\n      focused={focused}\n      disabled={disabled}\n      onChange={handleChange}\n      error={error}\n      size={size}\n      fullWidth={rest.fullWidth}\n      required={required}\n    >\n      {menuItems.map((o, i) => (\n        <MenuItem key={i} value={o.label}>\n          {o.label}\n        </MenuItem>\n      ))}\n    </SelectField>\n  )\n}\n\nconst Behavior = ({\n  label,\n  placeholder,\n  ...rest\n}: SelectFieldProps) => {\n  return (\n    <Grid container direction='column' spacing={6}>\n      <Grid item>\n        <Label variant='subtitle1'>{'Overflow'}</Label>\n        <Container style={{ maxWidth: '440px' }}>\n          <Label variant='body2'>{'Default'}</Label>\n          <SelectFieldItem {...rest} label={label} placeholder={placeholder} />\n        </Container>\n      </Grid>\n\n      <Grid item>\n        <Label variant='subtitle1'>{'Grouping'}</Label>\n        <Container>\n          <Label variant='body2'>{'Pairing'}</Label>\n\n          <Grid container spacing={2}>\n            <Grid item>\n              <SelectFieldItem\n                {...rest}\n                label={label}\n                placeholder={placeholder}\n              />\n            </Grid>\n            <Grid item>\n              <SelectFieldItem\n                {...rest}\n                label={label}\n                placeholder={placeholder}\n              />\n            </Grid>\n          </Grid>\n        </Container>\n      </Grid>\n\n      <Grid item>\n        <Label variant='subtitle1'>{'Width'}</Label>\n        <Container>\n          <Label variant='body2'>{'Default (fullWidth)'}</Label>\n          <SelectFieldItem {...rest} label={label} placeholder={placeholder} />\n        </Container>\n        <Container>\n          <Label variant='body2'>{'No fullWidth'}</Label>\n          <SelectFieldItem\n            {...rest}\n            label={label}\n            placeholder={placeholder}\n            fullWidth={false}\n          />\n        </Container>\n      </Grid>\n    </Grid>\n  )\n}"
         },
         {
@@ -524,23 +536,13 @@
             "aiHint": "Not an action trigger, just selecting a value"
           },
           {
-            "condition": "Collection of unrelated actions",
+            "condition": "Unrelated or navigational entries, or more than ~5 options",
             "use": "Menu",
-            "aiHint": "Use separate Button instances if there are only a few unrelated actions"
-          },
-          {
-            "condition": "More than ~5 related action options",
-            "use": "Menu",
-            "aiHint": "Switch to SelectField if the goal is choosing a value rather than triggering an action"
+            "aiHint": "SplitButton is for a primary action plus close variants; use Menu when the entries are unrelated or navigational, or a few separate Buttons for a handful of unrelated actions."
           },
           {
             "condition": "Single action with no variants",
             "use": "Button"
-          },
-          {
-            "condition": "Dropdown of navigation links or unrelated actions",
-            "use": "Menu",
-            "aiHint": "SplitButton is for a primary action plus close variants; use Menu when the entries are unrelated or navigational."
           }
         ],
         "limitations": [
@@ -551,6 +553,7 @@
         {
           "name": "Usage",
           "id": "components-buttons-splitbutton--usage",
+          "isUsage": true,
           "code": "import { SplitButton } from '@carto/meridian-ds/components'\n\nconst Usage = () => (\n    <SplitButton\n      // Options carry their own data; the dropdown only sets the default.\n      // onClick fires on the main button with the selected option.\n      options={[\n        { label: 'Save', run: () => console.log('Saved') },\n        { label: 'Save as…', run: () => console.log('Saved as a copy') },\n        { label: 'Save and close', run: () => console.log('Saved and closed') },\n      ]}\n      onClick={(option) => option.run()}\n    />\n  )"
         },
         {
@@ -607,6 +610,7 @@
         {
           "name": "Types",
           "id": "components-tag--types",
+          "summary": "type='code' renders the label in monospace (Overpass Mono) for tokens/IDs/code",
           "code": "import { Tag, TagProps } from '@carto/meridian-ds/components'\nimport { Grid } from '@mui/material'\n\nconst Types = ({ ...args }: TagProps) => {\n  return (\n    <Grid container spacing={2}>\n      <Grid item xs={6}>\n        <Grid container spacing={2} direction='column'>\n          <Grid item>\n            <Tag\n              {...args}\n              type='default'\n              variant='filled'\n              label='Inter Font - filled'\n            />\n          </Grid>\n          <Grid item>\n            <Tag\n              {...args}\n              type='code'\n              variant='filled'\n              label='Overpass Mono - filled'\n            />\n          </Grid>\n        </Grid>\n      </Grid>\n      <Grid item xs={6}>\n        <Grid container spacing={2} direction='column'>\n          <Grid item>\n            <Tag\n              {...args}\n              type='default'\n              variant='outlined'\n              label='Inter Font - outlined'\n            />\n          </Grid>\n          <Grid item>\n            <Tag\n              {...args}\n              type='code'\n              variant='outlined'\n              label='Overpass Mono - outlined'\n            />\n          </Grid>\n        </Grid>\n      </Grid>\n    </Grid>\n  )\n}"
         },
         {
@@ -617,6 +621,7 @@
         {
           "name": "CustomColor",
           "id": "components-tag--custom-color",
+          "summary": "Arbitrary brand color outside the color enum via inline style (backgroundColor/color)",
           "code": "import { Tag, TagProps } from '@carto/meridian-ds/components'\n\nconst CustomColor = ({ ...args }: TagProps) => {\n  return <Tag {...args} />\n}"
         },
         {

package/dist/types/components/Autocomplete/Autocomplete/Autocomplete.metadata.d.ts

@@ -21,6 +21,7 @@ declare const curation: {
         aiHint: string;
         isMUI?: undefined;
     })[];
+    variants: string[];
 };
 export default curation;
 //# sourceMappingURL=Autocomplete.metadata.d.ts.map

package/dist/types/components/Autocomplete/Autocomplete/Autocomplete.metadata.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.metadata.d.ts","sourceRoot":"","sources":["../../../../../src/components/Autocomplete/Autocomplete/Autocomplete.metadata.ts"],"names":[],"mappings":"AAEA,uHAAuH;AACvH,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;CA6DM,CAAA;AAEpB,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"Autocomplete.metadata.d.ts","sourceRoot":"","sources":["../../../../../src/components/Autocomplete/Autocomplete/Autocomplete.metadata.ts"],"names":[],"mappings":"AAEA,uHAAuH;AACvH,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;CAwEM,CAAA;AAEpB,eAAe,QAAQ,CAAA"}

package/dist/types/components/Autocomplete/Autocomplete/Autocomplete.stories.d.ts

@@ -116,6 +116,7 @@ export declare const LabelAndHelperText: {
         helperText: string;
     };
 };
+/** @summary Pin a fixed leading icon/adornment inside the input (params.InputProps.startAdornment) */
 export declare const Prefix: {
     render: ({ label, variant, placeholder, helperText, error, size, required, disableCloseOnSelect, ...props }: AutocompleteProps<(typeof top100Films)[number]> & AutocompleteInputProps) => import("react/jsx-runtime").JSX.Element;
     args: {
@@ -202,6 +203,7 @@ export declare const Small: {
         };
     };
 };
+/** @summary Custom option rows (icon + primary/secondary text) via renderOption */
 export declare const CustomRenderOption: {
     render: ({ label, variant, placeholder, helperText, error, size, required, disableCloseOnSelect, ...props }: AutocompleteProps<(typeof top100FilmsStartAndEndAdornment)[number]> & AutocompleteInputProps) => import("react/jsx-runtime").JSX.Element;
     args: {
@@ -210,6 +212,7 @@ export declare const CustomRenderOption: {
         helperText: string;
     };
 };
+/** @summary Accept arbitrary typed values not in the options list (free text / tags) */
 export declare const FreeSolo: {
     render: ({ label, variant, placeholder, helperText, error, size, required, disableCloseOnSelect, ...props }: AutocompleteProps<(typeof top100Films)[number], boolean, false, true> & AutocompleteInputProps) => import("react/jsx-runtime").JSX.Element;
     args: {
@@ -218,6 +221,7 @@ export declare const FreeSolo: {
         helperText: string;
     };
 };
+/** @summary Render very large option lists (10k+) performantly via a virtualized listbox */
 export declare const VirtualizedList: {
     render: ({ label, variant, placeholder, helperText, error, size, required, disableCloseOnSelect, ...props }: AutocompleteProps<(typeof largeMenuList)[number], boolean> & AutocompleteInputProps) => import("react/jsx-runtime").JSX.Element;
     args: {

package/dist/types/components/Autocomplete/Autocomplete/Autocomplete.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Autocomplete/Autocomplete/Autocomplete.stories.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Autocomplete.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Autocomplete/Autocomplete/Autocomplete.stories.tsx"],"names":[],"mappings":"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"}

package/dist/types/components/Button/Button.metadata.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.metadata.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/Button.metadata.ts"],"names":[],"mappings":"AAEA,iHAAiH;AACjH,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;CA0DM,CAAA;AAEpB,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"Button.metadata.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/Button.metadata.ts"],"names":[],"mappings":"AAEA,iHAAiH;AACjH,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;CAgDM,CAAA;AAEpB,eAAe,QAAQ,CAAA"}

package/dist/types/components/Button/Button.stories.d.ts

@@ -125,12 +125,14 @@ export declare const Variants: {
 export declare const Colors: {
     render: (props: ButtonProps) => import("react/jsx-runtime").JSX.Element;
 };
+/** @summary Wrap in a Tooltip for label overflow; loading/loadingPosition control spinner placement */
 export declare const Behavior: {
     render: ({ children, ...rest }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
     args: {
         children: string;
     };
 };
+/** @summary href links that open in a new tab — control/hide the external icon, set screenReaderText */
 export declare const ExternalLink: {
     render: ({ children, ...rest }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
     args: {

package/dist/types/components/Button/Button.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/Button.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAc,MAAM,cAAc,CAAA;AAmBtD,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4EG,CAAA;AAChB,eAAe,OAAO,CAAA;AA0YtB,eAAO,MAAM,UAAU;mBAxYW,WAAW;;;;;;;;;;;;;;CA8Y5C,CAAA;AAED,eAAO,MAAM,KAAK;;;;;;;;;;;;CAKjB,CAAA;AAED,eAAO,MAAM,QAAQ;oBA1Pe,WAAW;CA4P9C,CAAA;AAED,eAAO,MAAM,MAAM;oBA3Qe,WAAW;CA6Q5C,CAAA;AAED,eAAO,MAAM,QAAQ;oCAlP4B,WAAW;;;;CAqP3D,CAAA;AAED,eAAO,MAAM,YAAY;oCArK4B,WAAW;;;;;;CA4K/D,CAAA;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;oBA7RU,WAAW;CAgS5C,CAAA;AAED,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;oBAlSG,WAAW;CAqS5C,CAAA"}
+{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/Button.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAc,MAAM,cAAc,CAAA;AAmBtD,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4EG,CAAA;AAChB,eAAe,OAAO,CAAA;AA0YtB,eAAO,MAAM,UAAU;mBAxYW,WAAW;;;;;;;;;;;;;;CA8Y5C,CAAA;AAED,eAAO,MAAM,KAAK;;;;;;;;;;;;CAKjB,CAAA;AAED,eAAO,MAAM,QAAQ;oBA1Pe,WAAW;CA4P9C,CAAA;AAED,eAAO,MAAM,MAAM;oBA3Qe,WAAW;CA6Q5C,CAAA;AAED,uGAAuG;AACvG,eAAO,MAAM,QAAQ;oCAnP4B,WAAW;;;;CAsP3D,CAAA;AAED,wGAAwG;AACxG,eAAO,MAAM,YAAY;oCAvK4B,WAAW;;;;;;CA8K/D,CAAA;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;oBA/RU,WAAW;CAkS5C,CAAA;AAED,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;oBApSG,WAAW;CAuS5C,CAAA"}

package/dist/types/components/Dialog/Dialog/Dialog.metadata.d.ts

@@ -5,11 +5,12 @@ declare const curation: {
         name: string;
         aiHint: string;
     })[];
+    subComponents: string[];
     decisionTree: ({
         condition: string;
         use: string;
+        aiHint: string;
         isMUI?: undefined;
-        aiHint?: undefined;
     } | {
         condition: string;
         use: string;
@@ -18,7 +19,7 @@ declare const curation: {
     } | {
         condition: string;
         use: string;
-        aiHint: string;
+        aiHint?: undefined;
         isMUI?: undefined;
     })[];
 };

package/dist/types/components/Dialog/Dialog/Dialog.metadata.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.metadata.d.ts","sourceRoot":"","sources":["../../../../../src/components/Dialog/Dialog/Dialog.metadata.ts"],"names":[],"mappings":"AAEA,iHAAiH;AACjH,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;CAsCM,CAAA;AAEpB,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"Dialog.metadata.d.ts","sourceRoot":"","sources":["../../../../../src/components/Dialog/Dialog/Dialog.metadata.ts"],"names":[],"mappings":"AAEA,iHAAiH;AACjH,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;CA4CM,CAAA;AAEpB,eAAe,QAAQ,CAAA"}

package/dist/types/components/Dialog/Dialog/Dialog.stories.d.ts

@@ -170,6 +170,7 @@ export declare const Types: {
         };
     };
 };
+/** @summary Remove default content padding for full-bleed content (image/map) via withGutter */
 export declare const GutterContent: {
     render: (args: DialogStoryProps) => import("react/jsx-runtime").JSX.Element;
     argTypes: {
@@ -392,6 +393,7 @@ export declare const FullScreen: {
         };
     };
 };
+/** @summary Height shrink-wraps content instead of the fixed size (height='auto') */
 export declare const FluidHeight: {
     render: ({ explanation, ...args }: DialogStoryProps) => import("react/jsx-runtime").JSX.Element;
     args: {
@@ -432,6 +434,7 @@ export declare const FluidHeight: {
         };
     };
 };
+/** @summary Width shrink-wraps content instead of the fixed size (width='auto') */
 export declare const FluidWidth: {
     render: ({ explanation, ...args }: DialogStoryProps) => import("react/jsx-runtime").JSX.Element;
     args: {
@@ -472,6 +475,7 @@ export declare const FluidWidth: {
         };
     };
 };
+/** @summary Multi-step wizard — header stepper plus a status Chip */
 export declare const WithStepperAndChip: {
     render: (args: DialogStoryProps) => import("react/jsx-runtime").JSX.Element;
     args: {
@@ -514,6 +518,7 @@ export declare const WithStepperAndChip: {
         };
     };
 };
+/** @summary Whole body scrolls as one block (DialogContent scrollableContent); header/footer stay pinned */
 export declare const ScrollableContent: {
     render: (args: DialogStoryProps) => import("react/jsx-runtime").JSX.Element;
     args: {
@@ -552,6 +557,7 @@ export declare const ScrollableContent: {
         };
     };
 };
+/** @summary Only a sub-region scrolls (overflow on an inner wrapper); the rest stays static */
 export declare const InternallScroll: {
     render: (args: DialogStoryProps) => import("react/jsx-runtime").JSX.Element;
     args: {

package/dist/types/components/Dialog/Dialog/Dialog.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Dialog/Dialog/Dialog.stories.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Dialog.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Dialog/Dialog/Dialog.stories.tsx"],"names":[],"mappings":"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"}

package/dist/types/components/SelectField/SelectField/SelectField.metadata.d.ts

@@ -8,18 +8,18 @@ declare const curation: {
     decisionTree: ({
         condition: string;
         use: string;
+        aiHint: string;
         isMUI?: undefined;
-        aiHint?: undefined;
     } | {
         condition: string;
         use: string;
-        isMUI: true;
-        aiHint: string;
+        aiHint?: undefined;
+        isMUI?: undefined;
     } | {
         condition: string;
         use: string;
+        isMUI: true;
         aiHint: string;
-        isMUI?: undefined;
     })[];
 };
 export default curation;

package/dist/types/components/SelectField/SelectField/SelectField.metadata.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectField.metadata.d.ts","sourceRoot":"","sources":["../../../../../src/components/SelectField/SelectField/SelectField.metadata.ts"],"names":[],"mappings":"AAEA,sHAAsH;AACtH,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;CAgEM,CAAA;AAEpB,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"SelectField.metadata.d.ts","sourceRoot":"","sources":["../../../../../src/components/SelectField/SelectField/SelectField.metadata.ts"],"names":[],"mappings":"AAEA,sHAAsH;AACtH,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;CA+DM,CAAA;AAEpB,eAAe,QAAQ,CAAA"}

package/dist/types/components/SelectField/SelectField/SelectField.stories.d.ts

@@ -167,6 +167,7 @@ export declare const LabelAndHelperText: {
         };
     };
 };
+/** @summary Add a unit or icon startAdornment (e.g. 'Kg' or a map icon) for inline context */
 export declare const Prefix: {
     render: ({ label, placeholder, ...rest }: SelectFieldProps) => import("react/jsx-runtime").JSX.Element;
     args: {
@@ -237,6 +238,7 @@ export declare const Small: {
         };
     };
 };
+/** @summary Layout: long-option overflow truncation, pairing fields, fullWidth vs fixed width */
 export declare const Behavior: {
     render: ({ label, placeholder, ...rest }: SelectFieldProps) => import("react/jsx-runtime").JSX.Element;
     args: {

package/dist/types/components/SelectField/SelectField/SelectField.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectField.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/SelectField/SelectField/SelectField.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAY,MAAM,OAAO,CAAA;AAUhD,OAAO,EAAc,WAAW,EAAY,MAAM,cAAc,CAAA;AAgBhE,QAAA,MAAM,OAAO;;;WAsID,CAAF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CArFM,CAAA;AAChB,eAAe,OAAO,CAAA;AAQtB,KAAK,gBAAgB,GAAG,cAAc,CAAC,OAAO,WAAW,CAAC,CAAA;AAyxB1D,eAAO,MAAM,UAAU;mBAxuBW,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+uBjD,CAAA;AAED,eAAO,MAAM,WAAW;mBAjvBU,gBAAgB;;;;;;;;;;;;;;;;;;;8BAsvBhB;QAAE,aAAa,EAAE,WAAW,CAAA;KAAE;CA6B/D,CAAA;AAED,eAAO,MAAM,KAAK;;;;;;;;;;;;CAKjB,CAAA;AAED,eAAO,MAAM,QAAQ;8CApxBlB,gBAAgB;;;;;;;;;;;;;;;;;;CAwxBlB,CAAA;AAED,eAAO,MAAM,kBAAkB;0DA7uB5B,gBAAgB;;;;;;;;;;;;;;;;;;CAivBlB,CAAA;AAED,eAAO,MAAM,MAAM;8CA3sBsC,gBAAgB;;;;;;CA8sBxE,CAAA;AAED,eAAO,MAAM,MAAM;gEAjqBhB,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqqBlB,CAAA;AAED,eAAO,MAAM,KAAK;gEAvqBf,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2qBlB,CAAA;AAED,eAAO,MAAM,QAAQ;8CA1YlB,gBAAgB;;;;;;;;;;;;;;;;;;CA8YlB,CAAA;AAED,eAAO,MAAM,OAAO;gEArRjB,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;CAiSlB,CAAA;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;8CAr0BrB,gBAAgB;;;;;;;;;;;;;;;;;;CA00BlB,CAAA;AAED,eAAO,MAAM,KAAK;;;;;;;;;;;;;CAgBjB,CAAA"}
+{"version":3,"file":"SelectField.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/SelectField/SelectField/SelectField.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAY,MAAM,OAAO,CAAA;AAUhD,OAAO,EAAc,WAAW,EAAY,MAAM,cAAc,CAAA;AAgBhE,QAAA,MAAM,OAAO;;;WAsID,CAAF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CArFM,CAAA;AAChB,eAAe,OAAO,CAAA;AAQtB,KAAK,gBAAgB,GAAG,cAAc,CAAC,OAAO,WAAW,CAAC,CAAA;AAyxB1D,eAAO,MAAM,UAAU;mBAxuBW,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+uBjD,CAAA;AAED,eAAO,MAAM,WAAW;mBAjvBU,gBAAgB;;;;;;;;;;;;;;;;;;;8BAsvBhB;QAAE,aAAa,EAAE,WAAW,CAAA;KAAE;CA6B/D,CAAA;AAED,eAAO,MAAM,KAAK;;;;;;;;;;;;CAKjB,CAAA;AAED,eAAO,MAAM,QAAQ;8CApxBlB,gBAAgB;;;;;;;;;;;;;;;;;;CAwxBlB,CAAA;AAED,eAAO,MAAM,kBAAkB;0DA7uB5B,gBAAgB;;;;;;;;;;;;;;;;;;CAivBlB,CAAA;AAED,8FAA8F;AAC9F,eAAO,MAAM,MAAM;8CA5sBsC,gBAAgB;;;;;;CA+sBxE,CAAA;AAED,eAAO,MAAM,MAAM;gEAlqBhB,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsqBlB,CAAA;AAED,eAAO,MAAM,KAAK;gEAxqBf,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4qBlB,CAAA;AAED,iGAAiG;AACjG,eAAO,MAAM,QAAQ;8CA5YlB,gBAAgB;;;;;;;;;;;;;;;;;;CAgZlB,CAAA;AAED,eAAO,MAAM,OAAO;gEAvRjB,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;CAmSlB,CAAA;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;8CAv0BrB,gBAAgB;;;;;;;;;;;;;;;;;;CA40BlB,CAAA;AAED,eAAO,MAAM,KAAK;;;;;;;;;;;;;CAgBjB,CAAA"}

package/dist/types/components/SplitButton/SplitButton.metadata.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SplitButton.metadata.d.ts","sourceRoot":"","sources":["../../../../src/components/SplitButton/SplitButton.metadata.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,QAAQ;;;;;;;;;;;;CA6CM,CAAA;AAEpB,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"SplitButton.metadata.d.ts","sourceRoot":"","sources":["../../../../src/components/SplitButton/SplitButton.metadata.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,QAAQ;;;;;;;;;;;;CAiCM,CAAA;AAEpB,eAAe,QAAQ,CAAA"}

package/dist/types/components/Tag/Tag.stories.d.ts

@@ -68,12 +68,14 @@ export declare const Playground: {
 export declare const Variants: {
     render: ({ color, ...args }: TagProps) => import("react/jsx-runtime").JSX.Element;
 };
+/** @summary type='code' renders the label in monospace (Overpass Mono) for tokens/IDs/code */
 export declare const Types: {
     render: ({ ...args }: TagProps) => import("react/jsx-runtime").JSX.Element;
 };
 export declare const Colors: {
     render: ({ ...args }: TagProps) => import("react/jsx-runtime").JSX.Element;
 };
+/** @summary Arbitrary brand color outside the color enum via inline style (backgroundColor/color) */
 export declare const CustomColor: {
     render: ({ ...args }: TagProps) => import("react/jsx-runtime").JSX.Element;
     args: {

package/dist/types/components/Tag/Tag.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Tag/Tag.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAUzB,OAAO,EAAO,QAAQ,EAAE,MAAM,cAAc,CAAA;AAI5C,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2Ce,CAAA;AAE5B,eAAe,OAAO,CAAA;AA8PtB,eAAO,MAAM,UAAU;0BAlPQ,QAAQ;;;;;;;;;;;CAuPtC,CAAA;AAED,eAAO,MAAM,QAAQ;iCApByB,QAAQ;CAsBrD,CAAA;AAED,eAAO,MAAM,KAAK;0BAvEkB,QAAQ;CAyE3C,CAAA;AAED,eAAO,MAAM,MAAM;0BA7PkB,QAAQ;CA+P5C,CAAA;AAED,eAAO,MAAM,WAAW;0BArQO,QAAQ;;;;;;;;CA8QtC,CAAA;AAED,eAAO,MAAM,SAAS;0BAnNc,QAAQ;CAqN3C,CAAA"}
+{"version":3,"file":"Tag.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Tag/Tag.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAUzB,OAAO,EAAO,QAAQ,EAAE,MAAM,cAAc,CAAA;AAI5C,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2Ce,CAAA;AAE5B,eAAe,OAAO,CAAA;AA8PtB,eAAO,MAAM,UAAU;0BAlPQ,QAAQ;;;;;;;;;;;CAuPtC,CAAA;AAED,eAAO,MAAM,QAAQ;iCApByB,QAAQ;CAsBrD,CAAA;AAED,8FAA8F;AAC9F,eAAO,MAAM,KAAK;0BAxEkB,QAAQ;CA0E3C,CAAA;AAED,eAAO,MAAM,MAAM;0BA9PkB,QAAQ;CAgQ5C,CAAA;AAED,qGAAqG;AACrG,eAAO,MAAM,WAAW;0BAvQO,QAAQ;;;;;;;;CAgRtC,CAAA;AAED,eAAO,MAAM,SAAS;0BArNc,QAAQ;CAuN3C,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carto/meridian-ds",
-  "version": "3.0.3-alpha.ca7b172.256",
+  "version": "3.0.3-alpha.cdb2a4e.260",
   "description": "CARTO Meridian Design System",
   "type": "module",
   "scripts": {