@carto/meridian-ds 5.0.1-alpha.ce0f0f7.332 → 5.1.0

package/CHANGELOG.md

@@ -4,6 +4,21 @@
 
 ## 5.0
 
+### 5.1.0
+
+- feat(theme): support `color='tertiary'` — CARTO's purple accent — on Button, IconButton, ButtonGroup, SplitButton, Fab, ToggleButton, ToggleButtonGroup, Chip and Tag, plus a new `selectedColor` on MenuItem / FilterDropdown and `buttonColor` on MessageField [sc-567740] [#535](https://github.com/CartoDB/meridian-ds/pull/535)
+- fix(ToggleButton): `color` now drives the selected state on ToggleButton and ToggleButtonGroup — the theme previously pinned it to primary whatever the value; the default is unchanged [#535](https://github.com/CartoDB/meridian-ds/pull/535)
+- chore(deps): bump @figma/code-connect from 1.4.5 to 2.0.0 [#535](https://github.com/CartoDB/meridian-ds/pull/535)
+- chore(deps-dev): bump the storybook group to 10.6.0 — including `@storybook/addon-mcp` from 0.7 and `@chromatic-com/storybook` to 5.3.1 [#535](https://github.com/CartoDB/meridian-ds/pull/535)
+- chore(deps): bump js-yaml from 4.3.1 to 4.3.2 [#545](https://github.com/CartoDB/meridian-ds/pull/545)
+- chore(deps): bump js-yaml from 4.3.1 to 4.3.2 in /scripts/import-figma-icons [#543](https://github.com/CartoDB/meridian-ds/pull/543)
+- chore(deps): bump svgo from 3.3.4 to 3.3.5 in /scripts/import-figma-icons [#542](https://github.com/CartoDB/meridian-ds/pull/542)
+- chore(deps): bump fflate from 0.8.2 to 0.8.3 [#534](https://github.com/CartoDB/meridian-ds/pull/534)
+- chore(deps): bump fast-uri from 3.1.5 to 3.1.7 [#529](https://github.com/CartoDB/meridian-ds/pull/529)
+- chore(deps): bump qs from 6.15.3 to 6.16.0 [#530](https://github.com/CartoDB/meridian-ds/pull/530)
+- chore(deps): bump browserslist from 4.24.2 to 4.28.9 [#532](https://github.com/CartoDB/meridian-ds/pull/532)
+- chore(deps): bump browserslist from 4.24.2 to 4.28.8 in /scripts/import-figma-icons [#531](https://github.com/CartoDB/meridian-ds/pull/531)
+
 ### 5.0.0
 
 - chore(deps): upgrade MUI core + MUI X from v5 to v9 [sc-557186] [#485](https://github.com/CartoDB/meridian-ds/pull/485), in three phases — v6 [#484](https://github.com/CartoDB/meridian-ds/pull/484), v7 [#505](https://github.com/CartoDB/meridian-ds/pull/505), v9 [#524](https://github.com/CartoDB/meridian-ds/pull/524).

package/dist/components/index.cjs

@@ -7,7 +7,7 @@ const paletteUtils = require("../palette-utils-NhMBL9rx.cjs");
 const iconsMaterial = require("@mui/icons-material");
 const ArrowDown = require("../ArrowDown-84Oc8r9k.cjs");
 const ReactWindow = require("react-window");
-const utils = require("../utils-BiLDYqDS.cjs");
+const utils = require("../utils-B2bWHJl-.cjs");
 const Search = require("../Search-BsaXrSzs.cjs");
 require("cartocolor");
 const reactCodemirror2 = require("react-codemirror2");
@@ -3371,6 +3371,12 @@ const DialogPaper = material.styled(material.Paper, {
       // unreachable.
       overflowY: "auto",
       outline: 0,
+      // The focus trap focuses the paper when nothing inside autofocuses, and
+      // Chromium treats that as `:focus-visible` — the global ring would frame
+      // the whole dialog. It's a container, not a control.
+      "&:focus-visible": {
+        outline: "none !important"
+      },
       "@media print": {
         overflowY: "visible",
         boxShadow: "none"
@@ -5788,6 +5794,7 @@ const FilterDropdownMenuItem = ({
   selectedValue,
   dense,
   extended,
+  selectedColor,
   onItemChange
 }) => {
   const {
@@ -5824,6 +5831,7 @@ const FilterDropdownMenuItem = ({
       divider,
       fixed,
       iconColor,
+      selectedColor: item.selectedColor ?? selectedColor,
       "aria-label": ariaLabel,
       "aria-labelledby": menuItemId,
       "aria-selected": isSelected,
@@ -5885,6 +5893,7 @@ function _FilterDropdown({
   buttonColor = "primary",
   dense = false,
   extended = false,
+  selectedColor,
   "aria-label": ariaLabel,
   responsive,
   tooltipLabel,
@@ -5991,6 +6000,7 @@ function _FilterDropdown({
                 selectedValue: selected,
                 dense,
                 extended,
+                selectedColor,
                 onItemChange: handleChange
               },
               index
@@ -6104,6 +6114,7 @@ const MessageFieldFooter = ({
   stopLabel,
   iconButton,
   labelButton,
+  buttonColor = "primary",
   onClick,
   buttonIsDisabled,
   disabled,
@@ -6132,7 +6143,7 @@ const MessageFieldFooter = ({
         {
           onClick,
           disabled: buttonIsDisabled,
-          color: "primary",
+          color: buttonColor,
           variant: "contained",
           size,
           icon: iconButton,
@@ -6156,7 +6167,7 @@ const MessageFieldFooter = ({
                 {
                   onClick,
                   variant: "contained",
-                  color: "primary",
+                  color: buttonColor,
                   disabled: buttonIsDisabled,
                   size,
                   children: labelButton
@@ -6182,6 +6193,7 @@ function _MessageField({
   analyzing,
   iconButton = /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.ArrowUpwardOutlined, {}),
   labelButton,
+  buttonColor,
   disabledButton,
   helperText,
   helperTextAlign = "center",
@@ -6296,6 +6308,7 @@ function _MessageField({
                 stopLabel,
                 iconButton,
                 labelButton,
+                buttonColor,
                 onClick,
                 buttonIsDisabled,
                 disabled,
@@ -6834,6 +6847,19 @@ function colorProps(color, variant, theme, disabled) {
         backgroundColor: theme.palette.secondary.main,
         borderColor: "transparent"
       };
+    case "tertiary":
+      if (variant === "outlined") {
+        return {
+          color: theme.palette.tertiary.main,
+          backgroundColor: theme.palette.tertiary.relatedLight,
+          borderColor: theme.palette.tertiary.main
+        };
+      }
+      return {
+        color: theme.palette.tertiary.contrastText,
+        backgroundColor: theme.palette.tertiary.main,
+        borderColor: "transparent"
+      };
     case "success":
       if (variant === "outlined") {
         return {

package/dist/components/index.js

@@ -6,8 +6,8 @@ import { T as Typography, I as ICON_SIZE_SMALL, m as mergeSx, a as ICON_SIZE_MED
 import { OpenInNewOutlined, VisibilityOffOutlined, VisibilityOutlined, Cancel, ContentCopyOutlined, AddCircleOutlineOutlined, MenuOutlined, MoreVertOutlined, HelpOutlineOutlined, ErrorOutlineOutlined, ArrowBackOutlined, CloseOutlined, Check, TodayOutlined, StopCircleOutlined, ArrowUpwardOutlined } from "@mui/icons-material";
 import { F as ForwardedComponent$1 } from "../ArrowDown-Bho9Ssnw.js";
 import * as ReactWindow from "react-window";
-import { u as useTranslationWithFallback, I as IconButton, M as MenuItem$1, g as getThemeColor, e as ellipsisStyles, S as SVG_SELECTOR } from "../utils-BfI3xeuX.js";
-import { T } from "../utils-BfI3xeuX.js";
+import { u as useTranslationWithFallback, I as IconButton, M as MenuItem$1, g as getThemeColor, e as ellipsisStyles, S as SVG_SELECTOR } from "../utils-DeuEpVVh.js";
+import { T } from "../utils-DeuEpVVh.js";
 import { F as ForwardedComponent, a as ForwardedComponent$2, b as ForwardedComponent$3, c as ForwardedComponent$4 } from "../Search-DXfTNnxj.js";
 import "cartocolor";
 import { Controlled, UnControlled } from "react-codemirror2";
@@ -3354,6 +3354,12 @@ const DialogPaper = styled(Paper, {
       // unreachable.
       overflowY: "auto",
       outline: 0,
+      // The focus trap focuses the paper when nothing inside autofocuses, and
+      // Chromium treats that as `:focus-visible` — the global ring would frame
+      // the whole dialog. It's a container, not a control.
+      "&:focus-visible": {
+        outline: "none !important"
+      },
       "@media print": {
         overflowY: "visible",
         boxShadow: "none"
@@ -5771,6 +5777,7 @@ const FilterDropdownMenuItem = ({
   selectedValue,
   dense,
   extended,
+  selectedColor,
   onItemChange
 }) => {
   const {
@@ -5807,6 +5814,7 @@ const FilterDropdownMenuItem = ({
       divider,
       fixed,
       iconColor,
+      selectedColor: item.selectedColor ?? selectedColor,
       "aria-label": ariaLabel,
       "aria-labelledby": menuItemId,
       "aria-selected": isSelected,
@@ -5868,6 +5876,7 @@ function _FilterDropdown({
   buttonColor = "primary",
   dense = false,
   extended = false,
+  selectedColor,
   "aria-label": ariaLabel,
   responsive,
   tooltipLabel,
@@ -5974,6 +5983,7 @@ function _FilterDropdown({
                 selectedValue: selected,
                 dense,
                 extended,
+                selectedColor,
                 onItemChange: handleChange
               },
               index
@@ -6087,6 +6097,7 @@ const MessageFieldFooter = ({
   stopLabel,
   iconButton,
   labelButton,
+  buttonColor = "primary",
   onClick,
   buttonIsDisabled,
   disabled,
@@ -6115,7 +6126,7 @@ const MessageFieldFooter = ({
         {
           onClick,
           disabled: buttonIsDisabled,
-          color: "primary",
+          color: buttonColor,
           variant: "contained",
           size,
           icon: iconButton,
@@ -6139,7 +6150,7 @@ const MessageFieldFooter = ({
                 {
                   onClick,
                   variant: "contained",
-                  color: "primary",
+                  color: buttonColor,
                   disabled: buttonIsDisabled,
                   size,
                   children: labelButton
@@ -6165,6 +6176,7 @@ function _MessageField({
   analyzing,
   iconButton = /* @__PURE__ */ jsx(ArrowUpwardOutlined, {}),
   labelButton,
+  buttonColor,
   disabledButton,
   helperText,
   helperTextAlign = "center",
@@ -6279,6 +6291,7 @@ function _MessageField({
                 stopLabel,
                 iconButton,
                 labelButton,
+                buttonColor,
                 onClick,
                 buttonIsDisabled,
                 disabled,
@@ -6817,6 +6830,19 @@ function colorProps(color, variant, theme, disabled) {
         backgroundColor: theme.palette.secondary.main,
         borderColor: "transparent"
       };
+    case "tertiary":
+      if (variant === "outlined") {
+        return {
+          color: theme.palette.tertiary.main,
+          backgroundColor: theme.palette.tertiary.relatedLight,
+          borderColor: theme.palette.tertiary.main
+        };
+      }
+      return {
+        color: theme.palette.tertiary.contrastText,
+        backgroundColor: theme.palette.tertiary.main,
+        borderColor: "transparent"
+      };
     case "success":
       if (variant === "outlined") {
         return {

package/dist/metadata.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.0.1-alpha.ce0f0f7.332",
+  "version": "5.1.0",
   "conventions": "# Meridian usage conventions (for code-generating agents)\n\nSystem-level rules an agent should apply across all components.\n\nMeridian is the source of truth: when an existing codebase pattern contradicts Meridian, follow Meridian — don't replicate the contradicting local pattern.\n\n## Choosing a component\n\n- Don't hand-roll what the design system already provides. Before writing a\n  custom component, a styled wrapper, or a block of primitives (a modal,\n  chip/tag, card, empty state, dropdown, tooltip, copy-to-clipboard input,\n  etc.), confirm no Meridian component covers it — reuse or extend the existing one instead of rebuilding it.\n- Prefer a Meridian component over a bare MUI one whenever a Meridian wrapper\n  exists — the wrappers carry CARTO theming, a11y defaults, and narrowed APIs. MUI is correct for layout primitives (`Box`/`Grid`/`Stack`/`Container`) and for gaps Meridian doesn't fill (e.g. date pickers); \"prefer Meridian\" is not \"never MUI\".\n- Resolve \"which component\" by reading each one's `description` + `keywords`,\n  then confirm with its `decisionTree` (the conditions that point elsewhere) and `limitations` (what it lacks — check before you downgrade to it).\n  Don't infer selection from prop lists.\n\n## Icons\n\n- Source icons from Meridian's custom-icons first, then `@mui/icons-material`;\n  add a local SVG only when neither has an equivalent. Don't duplicate an icon\n  the design system already ships.\n- Find the right custom icon with `meridian_list_icons` — match by name or keyword (e.g. \"warehouse\" → `Bigquery`), import it from `@carto/meridian-ds/custom-icons`, and render `<Name />`. Every icon shares one prop type, `CustomIconProps` (MUI `SvgIconProps` — `color`/`fontSize`/`sx` — plus `width`/`height`).\n- To confirm a shortlisted icon by sight (or match an icon in a design you're implementing), call `meridian_get_screenshot` with `name: 'icons'` and Read the returned image path — a labeled grid of every icon.\n- Use the standard icon sizes — small 12px, medium (default) 18px, large 24px;\n  a value off this scale (e.g. 16, 20) needs design sign-off. Prefer the\n  outlined variants.\n- A new SVG must inherit, not bake in: set `fill='currentColor'` so it takes\n  the parent's color, and use the standard size — don't hardcode\n  color/opacity/dimensions.\n- For an icon color outside the palette `color` set, pass a theme token via\n  `htmlColor` (e.g. `htmlColor={theme.palette.text.secondary}`) — never a\n  hardcoded hex.\n\n## Accessibility\n\n- Any icon-only control needs an accessible name: `tooltip` or `aria-label`.\n- Don't disable a control without telling the user why — pair a disabled action with a tooltip explaining the requirement.\n- An `aria-label` must be human-readable text describing the control, not a test id in disguise — use a separate test hook for that.\n- User-facing strings (labels, `aria-label`, placeholders, messages) go through the app's i18n layer, not hardcoded literals.\n\n## Props\n\n- Two sources, both pinned to the installed `@carto/meridian-ds`: **exact props / types / JSDoc** come from the package's **type declarations** — read the `<Name>.d.ts` directly — while the **`meridian-design-system` MCP** (`meridian_*` tools) covers what types can't: which component, when, gotchas, and real examples.\n- A component's curation lists the high-value inherited MUI props worth knowing (`curation.mui`, e.g. `color`/`variant`/`size`); the rest of MUI's surface is available but rarely needed.\n- Don't use `sx`/inline styles to override a Meridian component's visual design (colors, typography, borders, sizing) — use its documented props and the theme tokens. (`sx` for layout/spacing on primitives is fine — see Styling.)\n- If no prop covers the visual change you need, treat it as a design-system gap: request the variant/behavior upstream in Meridian rather than permanently overriding the component locally — a local `styled()` of a Meridian component is a smell, not a fix.\n\n## Styling\n\n- Use theme tokens, never hardcoded values: colors from the palette (`text.*`, `background.*`, `divider`, semantic `*.main`) and spacing from the theme spacing scale — no raw hex/rgb or pixel literals for color or spacing. Use integer steps on the spacing scale (`theme.spacing(n)`, or `sx` numeric spacing like `px: 2` / `mt: 3` which resolve to it) — not fractional steps or raw px. Get the exact values — palette keys, spacing base, type ramp, `shape.borderRadius`, breakpoints, shadows — from `meridian_get_tokens`.\n- Text uses `<Typography variant=…>` (with the `weight` prop for emphasis), never hardcoded `fontSize`/`fontWeight`/`lineHeight`/`fontFamily`.\n- Meridian's type scale is custom and does not match MUI defaults (e.g. `body2`/`caption` differ from MUI's sizes, and there are Meridian-only variants like `code1`/`code2`/`code3` and `overlineDelicate`). Pick the variant by role from Typography's variant list (`meridian_get_examples('Typography')`) — don't assume a px size or map px → variant yourself.\n- `sx` is the right tool for one-off layout/spacing on primitives (`Box`/`Grid`/`Stack`), not the deprecated MUI system props\n  (`<Box px={2}>` → `<Box sx={{ px: 2 }}>`). This is layout, distinct from restyling a Meridian component (see Props).\n\n## Examples\n\n- Never invent example code when a story exists — use the component's real story source (`meridian_get_examples`). The lead Usage story is the copy-paste starting point; the later stories are illustrative (variants, edge cases) and may carry story-arg shells, so don't copy one wholesale as your baseline.\n",
   "components": [
     {
@@ -574,7 +574,7 @@
         {
           "name": "Color",
           "id": "components-chipgroup--color",
-          "code": "import { ChipGroup, ChipGroupProps } from '@carto/meridian-ds/components'\nimport { Box, Stack } from '@mui/material'\n\n// Story-only helpers, not exported by the package (stubbed so this compiles):\ndeclare const Container: any\ndeclare const Label: any\n\nconst Color = ({ chips, ...rest }: ChipGroupProps) => {\n  const colors = [\n    'default',\n    'primary',\n    'secondary',\n    'error',\n    'info',\n    'success',\n    'warning',\n  ] as const\n\n  const createColoredChips = (\n    color: (typeof colors)[number],\n    variant?: 'filled' | 'outlined',\n  ) =>\n    chips.map((chip) =>\n      typeof chip === 'string'\n        ? { label: chip, color, variant }\n        : { ...chip, color, variant },\n    )\n\n  return (\n    <Stack spacing={4}>\n      {colors.map((color) => (\n        <Box key={color}>\n          <Container>\n            <Label variant='body2' sx={{ textTransform: 'capitalize' }}>\n              {color}\n            </Label>\n            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>\n              <ChipGroup {...rest} chips={createColoredChips(color)} />\n              <ChipGroup\n                {...rest}\n                chips={createColoredChips(color, 'filled')}\n              />\n            </Box>\n          </Container>\n        </Box>\n      ))}\n    </Stack>\n  )\n}"
+          "code": "import { ChipGroup, ChipGroupProps } from '@carto/meridian-ds/components'\nimport { Box, Stack } from '@mui/material'\n\n// Story-only helpers, not exported by the package (stubbed so this compiles):\ndeclare const Container: any\ndeclare const Label: any\n\nconst Color = ({ chips, ...rest }: ChipGroupProps) => {\n  const colors = [\n    'default',\n    'primary',\n    'secondary',\n    'tertiary',\n    'error',\n    'info',\n    'success',\n    'warning',\n  ] as const\n\n  const createColoredChips = (\n    color: (typeof colors)[number],\n    variant?: 'filled' | 'outlined',\n  ) =>\n    chips.map((chip) =>\n      typeof chip === 'string'\n        ? { label: chip, color, variant }\n        : { ...chip, color, variant },\n    )\n\n  return (\n    <Stack spacing={4}>\n      {colors.map((color) => (\n        <Box key={color}>\n          <Container>\n            <Label variant='body2' sx={{ textTransform: 'capitalize' }}>\n              {color}\n            </Label>\n            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>\n              <ChipGroup {...rest} chips={createColoredChips(color)} />\n              <ChipGroup\n                {...rest}\n                chips={createColoredChips(color, 'filled')}\n              />\n            </Box>\n          </Container>\n        </Box>\n      ))}\n    </Stack>\n  )\n}"
         },
         {
           "name": "Size",
@@ -2022,6 +2022,11 @@
           "id": "components-filterdropdown--sizes",
           "code": "import { FilterDropdown, FilterDropdownProps } from '@carto/meridian-ds/components'\nimport { Box } from '@mui/material'\nimport { useEffect, useRef } from 'react'\n\n// Story-only helpers, not exported by the package (stubbed so this compiles):\ndeclare const LabeledConfig: any\ndeclare const LabeledConfigGrid: any\n\nconst OpenOnMount = ({ disabled, ...rest }: FilterDropdownProps) => {\n  const ref = useRef<HTMLDivElement>(null)\n  useEffect(() => {\n    if (disabled) return\n    ref.current?.querySelector<HTMLButtonElement>('button')?.click()\n  }, [disabled])\n  return (\n    <Box\n      ref={ref}\n      sx={{\n        display: 'flex',\n      }}\n    >\n      <FilterDropdown {...rest} disabled={disabled} />\n    </Box>\n  )\n}\n\nconst sizeConfigs: any<FilterDropdownProps>[] = [\n  { label: 'Default', args: {} },\n  { label: 'Dense', args: { dense: true } },\n  { label: 'Extended', args: { extended: true } },\n]\n\nconst Sizes = (args: FilterDropdownProps) => (\n  <LabeledConfigGrid\n    configs={sizeConfigs}\n    minColumnWidth={240}\n    minItemHeight={280}\n    renderItem={(configArgs) => <OpenOnMount {...args} {...configArgs} />}\n  />\n)"
         },
+        {
+          "name": "SelectedColor",
+          "id": "components-filterdropdown--selected-color",
+          "code": "import { FilterDropdown, FilterDropdownProps } from '@carto/meridian-ds/components'\nimport { Box } from '@mui/material'\nimport { useEffect, useRef } from 'react'\n\n// Story-only helpers, not exported by the package (stubbed so this compiles):\ndeclare const LabeledConfig: any\ndeclare const LabeledConfigGrid: any\n\nconst OpenOnMount = ({ disabled, ...rest }: FilterDropdownProps) => {\n  const ref = useRef<HTMLDivElement>(null)\n  useEffect(() => {\n    if (disabled) return\n    ref.current?.querySelector<HTMLButtonElement>('button')?.click()\n  }, [disabled])\n  return (\n    <Box\n      ref={ref}\n      sx={{\n        display: 'flex',\n      }}\n    >\n      <FilterDropdown {...rest} disabled={disabled} />\n    </Box>\n  )\n}\n\nconst selectedColorConfigs: any<FilterDropdownProps>[] = [\n  { label: 'Primary (default)', args: { selectedColor: 'primary' } },\n  { label: 'Secondary', args: { selectedColor: 'secondary' } },\n  { label: 'Tertiary', args: { selectedColor: 'tertiary' } },\n]\n\nconst SelectedColor = (args: FilterDropdownProps) => (\n  <LabeledConfigGrid\n    configs={selectedColorConfigs}\n    minColumnWidth={240}\n    minItemHeight={280}\n    renderItem={(configArgs) => <OpenOnMount {...args} {...configArgs} />}\n  />\n)"
+        },
         {
           "name": "SecondaryButtonColor",
           "id": "components-filterdropdown--secondary-button-color",
@@ -2098,7 +2103,7 @@
         {
           "name": "Colors",
           "id": "components-buttons-iconbutton--colors",
-          "code": "import { IconButton, IconButtonProps, Typography } from '@carto/meridian-ds/components'\nimport { CheckCircleOutlined } from '@mui/icons-material'\nimport { Box, Grid, Stack } from '@mui/material'\n\nconst SizeTemplate = (rest: IconButtonProps) => {\n  return (\n    <Grid container spacing={2}>\n      <Grid size={2}>\n        <Stack spacing={2} sx={{ alignItems: 'center' }}>\n          <Typography variant='body2' sx={{ mb: 2 }}>\n            Icon\n          </Typography>\n          <IconButton {...rest} variant='icon' icon={<CheckCircleOutlined />} />\n        </Stack>\n      </Grid>\n      <Grid size={2}>\n        <Stack spacing={2} sx={{ alignItems: 'center' }}>\n          <Typography variant='body2' sx={{ mb: 2 }}>\n            Contained\n          </Typography>\n          <IconButton\n            {...rest}\n            variant='contained'\n            icon={<CheckCircleOutlined />}\n          />\n        </Stack>\n      </Grid>\n      <Grid size={2}>\n        <Stack spacing={2} sx={{ alignItems: 'center' }}>\n          <Typography variant='body2' sx={{ mb: 2 }}>\n            Outlined\n          </Typography>\n          <IconButton\n            {...rest}\n            variant='outlined'\n            icon={<CheckCircleOutlined />}\n          />\n        </Stack>\n      </Grid>\n      <Grid size={2}>\n        <Stack spacing={2} sx={{ alignItems: 'center' }}>\n          <Typography variant='body2' sx={{ mb: 2 }}>\n            Disabled\n          </Typography>\n          <IconButton {...rest} disabled icon={<CheckCircleOutlined />} />\n        </Stack>\n      </Grid>\n      <Grid size={2}>\n        <Stack spacing={2} sx={{ alignItems: 'center' }}>\n          <Typography variant='body2' sx={{ mb: 2 }}>\n            Loading\n          </Typography>\n          <IconButton {...rest} loading icon={<CheckCircleOutlined />} />\n        </Stack>\n      </Grid>\n    </Grid>\n  )\n}\n\nconst colors = ['default', 'primary', 'secondary', 'error', 'warning'] as const\n\nconst Colors = (rest: IconButtonProps) => (\n  <>\n    {colors.map((color) => (\n      <Box\n        key={color}\n        sx={{\n          mb: 6,\n        }}\n      >\n        <Typography variant='h6' sx={{ mb: 4, textTransform: 'capitalize' }}>\n          {color}\n        </Typography>\n        <SizeTemplate {...rest} color={color} />\n      </Box>\n    ))}\n  </>\n)"
+          "code": "import { IconButton, IconButtonProps, Typography } from '@carto/meridian-ds/components'\nimport { CheckCircleOutlined } from '@mui/icons-material'\nimport { Box, Grid, Stack } from '@mui/material'\n\nconst SizeTemplate = (rest: IconButtonProps) => {\n  return (\n    <Grid container spacing={2}>\n      <Grid size={2}>\n        <Stack spacing={2} sx={{ alignItems: 'center' }}>\n          <Typography variant='body2' sx={{ mb: 2 }}>\n            Icon\n          </Typography>\n          <IconButton {...rest} variant='icon' icon={<CheckCircleOutlined />} />\n        </Stack>\n      </Grid>\n      <Grid size={2}>\n        <Stack spacing={2} sx={{ alignItems: 'center' }}>\n          <Typography variant='body2' sx={{ mb: 2 }}>\n            Contained\n          </Typography>\n          <IconButton\n            {...rest}\n            variant='contained'\n            icon={<CheckCircleOutlined />}\n          />\n        </Stack>\n      </Grid>\n      <Grid size={2}>\n        <Stack spacing={2} sx={{ alignItems: 'center' }}>\n          <Typography variant='body2' sx={{ mb: 2 }}>\n            Outlined\n          </Typography>\n          <IconButton\n            {...rest}\n            variant='outlined'\n            icon={<CheckCircleOutlined />}\n          />\n        </Stack>\n      </Grid>\n      <Grid size={2}>\n        <Stack spacing={2} sx={{ alignItems: 'center' }}>\n          <Typography variant='body2' sx={{ mb: 2 }}>\n            Disabled\n          </Typography>\n          <IconButton {...rest} disabled icon={<CheckCircleOutlined />} />\n        </Stack>\n      </Grid>\n      <Grid size={2}>\n        <Stack spacing={2} sx={{ alignItems: 'center' }}>\n          <Typography variant='body2' sx={{ mb: 2 }}>\n            Loading\n          </Typography>\n          <IconButton {...rest} loading icon={<CheckCircleOutlined />} />\n        </Stack>\n      </Grid>\n    </Grid>\n  )\n}\n\nconst colors = [\n  'default',\n  'primary',\n  'secondary',\n  'tertiary',\n  'error',\n  'warning',\n] as const\n\nconst Colors = (rest: IconButtonProps) => (\n  <>\n    {colors.map((color) => (\n      <Box\n        key={color}\n        sx={{\n          mb: 6,\n        }}\n      >\n        <Typography variant='h6' sx={{ mb: 4, textTransform: 'capitalize' }}>\n          {color}\n        </Typography>\n        <SizeTemplate {...rest} color={color} />\n      </Box>\n    ))}\n  </>\n)"
         },
         {
           "name": "IconButtonGroup",
@@ -2775,6 +2780,12 @@
           "summary": "`iconColor`: 'primary' recolors the icon to the theme text color; 'default' keeps the icon's own color",
           "code": "import { MenuItem, MenuItemProps, MenuList } from '@carto/meridian-ds/components'\nimport { Box, ListItemIcon, ListItemText, Stack } from '@mui/material'\n\n// Story-only helpers, not exported by the package (stubbed so this compiles):\ndeclare const Container: any\ndeclare const DocContainer: any\ndeclare const Label: any\n\nconst icon = (\n  <svg\n    xmlns='http://www.w3.org/2000/svg'\n    width='13.504'\n    height='13.5'\n    viewBox='0 0 13.504 13.5'\n  >\n    <path\n      fill='#8a2be2'\n      fillRule='evenodd'\n      d='M6.078 0a6.075 6.075 0 0 1 4.92 9.637l.034.028 2.39 2.39a.283.283 0 0 1 0 .4l-.966.965a.283.283 0 0 1-.4 0l-2.39-2.39a.283.283 0 0 1-.029-.033 6.075 6.075 0 1 1-3.561-11Zm0 1.573a4.509 4.509 0 1 0 4.511 4.506 4.508 4.508 0 0 0-4.511-4.506Zm.675 2.754V9.45a5.4 5.4 0 0 1-.674 0 5.379 5.379 0 0 1-.75-.041V4.327Zm-2.4 1.633v2.95a3.314 3.314 0 0 1-1.027-.973l-.127-.2V5.96Zm4.657.695v.995a3.374 3.374 0 0 1-1.147 1.229v-2.22H9.01Z'\n    />\n  </svg>\n)\n\nconst IconColor = ({\n  label,\n  ...args\n}: MenuItemProps & { label: string }) => {\n  return (\n    <>\n      <DocContainer severity='info'>\n        Default keeps the color of the icon as is, Primary changes the color of\n        the icon to theme.palette.text.primary.\n      </DocContainer>\n      <Stack spacing={6}>\n        <Box>\n          <Container>\n            <Label variant='body2'>{'Primary'}</Label>\n            <MenuList disablePadding>\n              <MenuItem {...args} iconColor='primary'>\n                <ListItemIcon>{icon}</ListItemIcon>\n                <ListItemText>{label}</ListItemText>\n              </MenuItem>\n            </MenuList>\n          </Container>\n        </Box>\n        <Box>\n          <Container>\n            <Label variant='body2'>{'Default'}</Label>\n            <MenuList disablePadding>\n              <MenuItem {...args} iconColor='default'>\n                <ListItemIcon>{icon}</ListItemIcon>\n                <ListItemText>{label}</ListItemText>\n              </MenuItem>\n            </MenuList>\n          </Container>\n        </Box>\n      </Stack>\n    </>\n  )\n}"
         },
+        {
+          "name": "SelectedColor",
+          "id": "components-menu--selected-color",
+          "summary": "`selectedColor`: tint of the selected row — 'primary' (default), 'secondary' or 'tertiary'",
+          "code": "import { MenuItem, MenuItemProps, MenuList } from '@carto/meridian-ds/components'\nimport { Box, ListItemIcon, ListItemText, Stack } from '@mui/material'\n\n// Story-only helpers, not exported by the package (stubbed so this compiles):\ndeclare const Container: any\ndeclare const DocContainer: any\ndeclare const Label: any\n\nconst icon = (\n  <svg\n    xmlns='http://www.w3.org/2000/svg'\n    width='13.504'\n    height='13.5'\n    viewBox='0 0 13.504 13.5'\n  >\n    <path\n      fill='#8a2be2'\n      fillRule='evenodd'\n      d='M6.078 0a6.075 6.075 0 0 1 4.92 9.637l.034.028 2.39 2.39a.283.283 0 0 1 0 .4l-.966.965a.283.283 0 0 1-.4 0l-2.39-2.39a.283.283 0 0 1-.029-.033 6.075 6.075 0 1 1-3.561-11Zm0 1.573a4.509 4.509 0 1 0 4.511 4.506 4.508 4.508 0 0 0-4.511-4.506Zm.675 2.754V9.45a5.4 5.4 0 0 1-.674 0 5.379 5.379 0 0 1-.75-.041V4.327Zm-2.4 1.633v2.95a3.314 3.314 0 0 1-1.027-.973l-.127-.2V5.96Zm4.657.695v.995a3.374 3.374 0 0 1-1.147 1.229v-2.22H9.01Z'\n    />\n  </svg>\n)\n\nconst SelectedColor = ({\n  label,\n  ...args\n}: MenuItemProps & { label: string }) => (\n  <>\n    <DocContainer severity='info'>\n      {`selectedColor tints the selected row. Tertiary is CARTO's purple accent.`}\n    </DocContainer>\n    <Stack spacing={6}>\n      {(['primary', 'secondary', 'tertiary'] as const).map((selectedColor) => (\n        <Box key={selectedColor}>\n          <Container>\n            <Label variant='body2' sx={{ textTransform: 'capitalize' }}>\n              {selectedColor}\n            </Label>\n            <MenuList disablePadding>\n              <MenuItem {...args} selected selectedColor={selectedColor}>\n                <ListItemIcon>{icon}</ListItemIcon>\n                <ListItemText>{label}</ListItemText>\n              </MenuItem>\n            </MenuList>\n          </Container>\n        </Box>\n      ))}\n    </Stack>\n  </>\n)"
+        },
         {
           "name": "Destructive",
           "id": "components-menu--destructive",
@@ -2887,7 +2898,7 @@
         {
           "name": "Action",
           "id": "components-messagefield--action",
-          "code": "import { MessageField, MessageFieldProps } from '@carto/meridian-ds/components'\nimport { SendOutlined } from '@mui/icons-material'\nimport { Box, Stack } from '@mui/material'\nimport { useState } from 'react'\n\n// Story-only helpers, not exported by the package (stubbed so this compiles):\ndeclare const Container: any\ndeclare const Label: any\n\nconst Action = (args: MessageFieldProps) => {\n  const { label, placeholder, ...rest } = args\n  const [value1, setValue1] = useState('')\n  const [value2, setValue2] = useState('')\n  const [value3, setValue3] = useState('')\n\n  return (\n    <Stack spacing={6}>\n      <Box>\n        <Container>\n          <Label variant='body2'>Default (IconButton)</Label>\n          <MessageField\n            {...rest}\n            onChange={(e) => setValue1(e.target.value)}\n            value={value1}\n            label={label}\n            placeholder={placeholder}\n          />\n        </Container>\n      </Box>\n      <Box>\n        <Container>\n          <Label variant='body2'>Custom IconButton</Label>\n          <MessageField\n            {...rest}\n            onChange={(e) => setValue2(e.target.value)}\n            value={value2}\n            label={label}\n            placeholder={placeholder}\n            iconButton={<SendOutlined />}\n          />\n        </Container>\n      </Box>\n      <Box>\n        <Container>\n          <Label variant='body2'>Text Button</Label>\n          <MessageField\n            {...rest}\n            onChange={(e) => setValue3(e.target.value)}\n            value={value3}\n            label={label}\n            placeholder={placeholder}\n            labelButton='Send'\n          />\n        </Container>\n      </Box>\n    </Stack>\n  )\n}"
+          "code": "import { MessageField, MessageFieldProps } from '@carto/meridian-ds/components'\nimport { SendOutlined } from '@mui/icons-material'\nimport { Box, Stack } from '@mui/material'\nimport { useState } from 'react'\n\n// Story-only helpers, not exported by the package (stubbed so this compiles):\ndeclare const Container: any\ndeclare const Label: any\n\nconst actionConfigs: { caption: string; props: Partial<MessageFieldProps> }[] =\n  [\n    { caption: 'Default (IconButton)', props: {} },\n    { caption: 'Custom IconButton', props: { iconButton: <SendOutlined /> } },\n    { caption: 'Text Button', props: { labelButton: 'Send' } },\n    {\n      caption: 'Tertiary Button',\n      props: { labelButton: 'Send', buttonColor: 'tertiary' },\n    },\n  ]\n\nconst ActionRow = ({\n  initialValue = '',\n  ...rest\n}: MessageFieldProps & { initialValue?: string }) => {\n  const [value, setValue] = useState(initialValue)\n\n  return (\n    <MessageField\n      {...rest}\n      onChange={(e) => setValue(e.target.value)}\n      value={value}\n    />\n  )\n}\n\nconst Action = (args: MessageFieldProps) => {\n  const { label, placeholder, ...rest } = args\n\n  return (\n    <Stack spacing={6}>\n      {actionConfigs.map(({ caption, props }) => (\n        <Box key={caption}>\n          <Container>\n            <Label variant='body2'>{caption}</Label>\n            <ActionRow\n              {...rest}\n              {...props}\n              label={label}\n              placeholder={placeholder}\n            />\n          </Container>\n        </Box>\n      ))}\n      {actionConfigs.map(({ caption, props }) => (\n        <Box key={`${caption} filled`}>\n          <Container>\n            <Label variant='body2'>{`${caption} — filled`}</Label>\n            <ActionRow\n              {...rest}\n              {...props}\n              label={label}\n              placeholder={placeholder}\n              initialValue='Message typed'\n            />\n          </Container>\n        </Box>\n      ))}\n    </Stack>\n  )\n}"
         },
         {
           "name": "Toolbar",
@@ -3547,7 +3558,7 @@
         {
           "name": "Colors",
           "id": "components-buttons-splitbutton--colors",
-          "code": "import { SplitButton, SplitButtonProps, Typography } from '@carto/meridian-ds/components'\nimport { Grid } from '@mui/material'\n\nconst SPLIT_BUTTON_COLORS = [\n  'default',\n  'primary',\n  'secondary',\n  'error',\n] as const\n\nconst DEFAULT_OPTIONS = [\n  { label: 'Item 1', disabled: false },\n  { label: 'Item 2', disabled: false },\n  { label: 'Item 3', disabled: true },\n]\n\nconst ColorTemplate = ({ color, ...rest }: SplitButtonProps) => {\n  return (\n    <div style={{ minHeight: 200 }}>\n      <SplitButton\n        {...rest}\n        color={color}\n        defaultOpen\n        options={DEFAULT_OPTIONS}\n      />\n    </div>\n  )\n}\n\nconst Colors = (props: SplitButtonProps) => (\n  <Grid container direction='row' spacing={4}>\n    {SPLIT_BUTTON_COLORS.map((color) => (\n      <Grid key={color}>\n        <Typography\n          variant='subtitle2'\n          sx={{ mb: 1, textTransform: 'capitalize' }}\n        >\n          {color}\n        </Typography>\n        <ColorTemplate {...props} color={color} />\n      </Grid>\n    ))}\n  </Grid>\n)"
+          "code": "import { SplitButton, SplitButtonProps, Typography } from '@carto/meridian-ds/components'\nimport { Grid } from '@mui/material'\n\nconst SPLIT_BUTTON_COLORS = [\n  'default',\n  'primary',\n  'secondary',\n  'tertiary',\n  'error',\n] as const\n\nconst DEFAULT_OPTIONS = [\n  { label: 'Item 1', disabled: false },\n  { label: 'Item 2', disabled: false },\n  { label: 'Item 3', disabled: true },\n]\n\nconst ColorTemplate = ({ color, ...rest }: SplitButtonProps) => {\n  return (\n    <div style={{ minHeight: 200 }}>\n      <SplitButton\n        {...rest}\n        color={color}\n        defaultOpen\n        options={DEFAULT_OPTIONS}\n      />\n    </div>\n  )\n}\n\nconst Colors = (props: SplitButtonProps) => (\n  <Grid container direction='row' spacing={4}>\n    {SPLIT_BUTTON_COLORS.map((color) => (\n      <Grid key={color}>\n        <Typography\n          variant='subtitle2'\n          sx={{ mb: 1, textTransform: 'capitalize' }}\n        >\n          {color}\n        </Typography>\n        <ColorTemplate {...props} color={color} />\n      </Grid>\n    ))}\n  </Grid>\n)"
         }
       ]
     },
@@ -3646,7 +3657,7 @@
         {
           "name": "Colors",
           "id": "components-tag--colors",
-          "code": "import { Tag, TagProps } from '@carto/meridian-ds/components'\nimport { Box, Grid, Stack } from '@mui/material'\nimport React from 'react'\n\nconst colorsOptions = [\n  { color: 'default' },\n  { color: 'neutral' },\n  { color: 'primary' },\n  { color: 'secondary' },\n  { color: 'success' },\n  { color: 'warning' },\n  { color: 'error' },\n] as const\n\nconst Colors = ({ ...args }: TagProps) => {\n  return (\n    <Grid container spacing={2}>\n      <Grid size={6}>\n        <Stack spacing={2}>\n          {colorsOptions.map((colorOption, index) => (\n            <React.Fragment key={index}>\n              <Box>\n                <Tag\n                  {...args}\n                  {...colorOption}\n                  variant='filled'\n                  label={`${colorOption.color} - filled`}\n                />\n              </Box>\n              <Grid\n                sx={{\n                  mb: 3,\n                }}\n              >\n                <Tag\n                  {...args}\n                  {...colorOption}\n                  variant='filled'\n                  label={`${colorOption.color} - filled disabled`}\n                  disabled\n                />\n              </Grid>\n            </React.Fragment>\n          ))}\n        </Stack>\n      </Grid>\n      <Grid size={6}>\n        <Stack spacing={2}>\n          {colorsOptions.map((colorOption, index) => (\n            <React.Fragment key={index}>\n              <Box>\n                <Tag\n                  {...args}\n                  {...colorOption}\n                  variant='outlined'\n                  label={`${colorOption.color} - outlined`}\n                />\n              </Box>\n              <Grid\n                sx={{\n                  mb: 3,\n                }}\n              >\n                <Tag\n                  {...args}\n                  {...colorOption}\n                  variant='outlined'\n                  label={`${colorOption.color} - outlined disabled`}\n                  disabled\n                />\n              </Grid>\n            </React.Fragment>\n          ))}\n        </Stack>\n      </Grid>\n    </Grid>\n  )\n}"
+          "code": "import { Tag, TagProps } from '@carto/meridian-ds/components'\nimport { Box, Grid, Stack } from '@mui/material'\nimport React from 'react'\n\nconst colorsOptions = [\n  { color: 'default' },\n  { color: 'neutral' },\n  { color: 'primary' },\n  { color: 'secondary' },\n  { color: 'tertiary' },\n  { color: 'success' },\n  { color: 'warning' },\n  { color: 'error' },\n] as const\n\nconst Colors = ({ ...args }: TagProps) => {\n  return (\n    <Grid container spacing={2}>\n      <Grid size={6}>\n        <Stack spacing={2}>\n          {colorsOptions.map((colorOption, index) => (\n            <React.Fragment key={index}>\n              <Box>\n                <Tag\n                  {...args}\n                  {...colorOption}\n                  variant='filled'\n                  label={`${colorOption.color} - filled`}\n                />\n              </Box>\n              <Grid\n                sx={{\n                  mb: 3,\n                }}\n              >\n                <Tag\n                  {...args}\n                  {...colorOption}\n                  variant='filled'\n                  label={`${colorOption.color} - filled disabled`}\n                  disabled\n                />\n              </Grid>\n            </React.Fragment>\n          ))}\n        </Stack>\n      </Grid>\n      <Grid size={6}>\n        <Stack spacing={2}>\n          {colorsOptions.map((colorOption, index) => (\n            <React.Fragment key={index}>\n              <Box>\n                <Tag\n                  {...args}\n                  {...colorOption}\n                  variant='outlined'\n                  label={`${colorOption.color} - outlined`}\n                />\n              </Box>\n              <Grid\n                sx={{\n                  mb: 3,\n                }}\n              >\n                <Tag\n                  {...args}\n                  {...colorOption}\n                  variant='outlined'\n                  label={`${colorOption.color} - outlined disabled`}\n                  disabled\n                />\n              </Grid>\n            </React.Fragment>\n          ))}\n        </Stack>\n      </Grid>\n    </Grid>\n  )\n}"
         },
         {
           "name": "WithIcons",
@@ -3790,6 +3801,10 @@
           {
             "name": "backgroundColor",
             "aiHint": "Group surface — 'primary' / 'secondary' / 'transparent' (defaults to 'primary', or 'transparent' for the unbounded variant)."
+          },
+          {
+            "name": "color",
+            "aiHint": "Tint of the selected buttons, applied to every ToggleButton in the group — 'primary' (default), 'secondary' or 'tertiary'. MUI's status colors carry no designed tint here."
           }
         ],
         "decisionTree": [
@@ -3835,6 +3850,11 @@
           "id": "components-buttons-toggle-button-group--variant",
           "code": "import { ToggleButtonGroup, ToggleButtonGroupProps, Typography } from '@carto/meridian-ds/components'\nimport { FormatAlignCenter, FormatAlignJustify, FormatAlignLeft, FormatAlignRight } from '@mui/icons-material'\nimport { Grid, Stack, ToggleButton } from '@mui/material'\nimport { useState } from 'react'\n\nconst TOGGLE_BUTTON_GROUP_VARIANTS = [\n  'floating',\n  'contained',\n  'unbounded',\n] as const\n\nconst LabeledToggleButtonGroup = ({\n  label,\n  title,\n  exclusive,\n  ...args\n}: ToggleButtonGroupProps & { label: string; title: string }) => {\n  const [selected, setSelected] = useState(() => ['AlignLeft'])\n  const handleChange = (_: React.MouseEvent, newAlignment: string[]) => {\n    setSelected(newAlignment)\n  }\n\n  return (\n    <Grid>\n      <Typography\n        variant='subtitle2'\n        sx={{ mb: 1, textTransform: 'capitalize' }}\n      >\n        {title}\n      </Typography>\n      <ToggleButtonGroup\n        {...args}\n        value={!exclusive && !Array.isArray(selected) ? [selected] : selected}\n        onChange={handleChange}\n        exclusive={exclusive}\n        aria-label='Text alignment'\n      >\n        <ToggleButton value='AlignLeft' aria-label='AlignLeft'>\n          {label ? label : <FormatAlignLeft />}\n        </ToggleButton>\n        <ToggleButton value='AlignCenter' aria-label='AlignCenter'>\n          {label ? label : <FormatAlignCenter />}\n        </ToggleButton>\n        <ToggleButton value='AlignRight' aria-label='AlignRight'>\n          {label ? label : <FormatAlignRight />}\n        </ToggleButton>\n        <ToggleButton value='AlignJustify' aria-label='AlignJustify' disabled>\n          {label ? label : <FormatAlignJustify />}\n        </ToggleButton>\n      </ToggleButtonGroup>\n    </Grid>\n  )\n}\n\nconst Variant = (\n  props: ToggleButtonGroupProps & { label: string; divider: boolean },\n) => (\n  <Stack spacing={4}>\n    {TOGGLE_BUTTON_GROUP_VARIANTS.map((variant) => (\n      <LabeledToggleButtonGroup\n        key={variant}\n        {...props}\n        title={variant}\n        variant={variant}\n      />\n    ))}\n  </Stack>\n)"
         },
+        {
+          "name": "Colors",
+          "id": "components-buttons-toggle-button-group--colors",
+          "code": "import { ToggleButtonGroup, ToggleButtonGroupProps, Typography } from '@carto/meridian-ds/components'\nimport { FormatAlignCenter, FormatAlignJustify, FormatAlignLeft, FormatAlignRight } from '@mui/icons-material'\nimport { Box, Stack, ToggleButton } from '@mui/material'\nimport { useState } from 'react'\n\n// Story-only helpers, not exported by the package (stubbed so this compiles):\ndeclare const toggleButtonColors: any\n\nconst GroupTemplate = ({\n  label,\n  exclusive,\n  ...args\n}: ToggleButtonGroupProps & { label: string; divider: boolean }) => {\n  const [selectedMedium, setSelectedMedium] = useState(() => ['AlignLeft'])\n  const [selectedSmall, setSelectedSmall] = useState(() => ['AlignLeft'])\n\n  const handleMediumChange = (\n    event: React.MouseEvent,\n    newAlignment: string[],\n  ) => {\n    setSelectedMedium(newAlignment)\n  }\n  const handleSmallChange = (\n    event: React.MouseEvent,\n    newAlignment: string[],\n  ) => {\n    setSelectedSmall(newAlignment)\n  }\n\n  return (\n    <Stack spacing={4}>\n      <Box>\n        <ToggleButtonGroup\n          {...args}\n          size='medium'\n          value={\n            !exclusive && !Array.isArray(selectedMedium)\n              ? [selectedMedium]\n              : selectedMedium\n          }\n          onChange={handleMediumChange}\n          exclusive={exclusive}\n          aria-label='Text alignment'\n        >\n          <ToggleButton value='AlignLeft' aria-label='AlignLeft'>\n            {label ? label : <FormatAlignLeft />}\n          </ToggleButton>\n          <ToggleButton value='AlignCenter' aria-label='AlignCenter'>\n            {label ? label : <FormatAlignCenter />}\n          </ToggleButton>\n          <ToggleButton value='AlignRight' aria-label='AlignRight'>\n            {label ? label : <FormatAlignRight />}\n          </ToggleButton>\n          <ToggleButton value='AlignJustify' aria-label='AlignJustify' disabled>\n            {label ? label : <FormatAlignJustify />}\n          </ToggleButton>\n        </ToggleButtonGroup>\n      </Box>\n      <Box>\n        <ToggleButtonGroup\n          {...args}\n          size='small'\n          value={\n            !exclusive && !Array.isArray(selectedSmall)\n              ? [selectedSmall]\n              : selectedSmall\n          }\n          onChange={handleSmallChange}\n          exclusive={exclusive}\n          aria-label='Text alignment'\n        >\n          <ToggleButton value='AlignLeft' aria-label='AlignLeft'>\n            {label ? label : <FormatAlignLeft />}\n          </ToggleButton>\n          <ToggleButton value='AlignCenter' aria-label='AlignCenter'>\n            {label ? label : <FormatAlignCenter />}\n          </ToggleButton>\n          <ToggleButton value='AlignRight' aria-label='AlignRight'>\n            {label ? label : <FormatAlignRight />}\n          </ToggleButton>\n          <ToggleButton value='AlignJustify' aria-label='AlignJustify' disabled>\n            {label ? label : <FormatAlignJustify />}\n          </ToggleButton>\n        </ToggleButtonGroup>\n      </Box>\n    </Stack>\n  )\n}\n\nconst Colors = (\n  props: ToggleButtonGroupProps & { label: string; divider: boolean },\n) => (\n  <Stack spacing={4}>\n    {toggleButtonColors.map((color) => (\n      <Box key={color}>\n        <Typography variant='subtitle2' sx={{ mb: 1 }}>\n          {color}\n        </Typography>\n        <GroupTemplate\n          {...props}\n          color={color as ToggleButtonGroupProps['color']}\n        />\n      </Box>\n    ))}\n  </Stack>\n)"
+        },
         {
           "name": "BackgroundColor",
           "id": "components-buttons-toggle-button-group--background-color",