@robr0/design-system 0.13.0 → 0.15.0

package/components/CircularButton/CircularButton.css

@@ -196,6 +196,43 @@
   background-color: var(--color-action-passive-bg-active);
 }
 
+/* ============================================
+   NEUTRAL VARIANT (SOLID GREY)
+   Filled like primary but in the neutral greys —
+   unlike tertiary, the background is always shown.
+   ============================================ */
+
+.ds-circular-button--neutral {
+  background-color: var(--color-action-neutral-bg);
+  border: none;
+}
+
+.ds-circular-button--neutral .ds-circular-button__icon {
+  color: var(--color-action-neutral-text);
+}
+
+.ds-circular-button--neutral.ds-circular-button--hover {
+  background-color: var(--color-action-neutral-bg-hover);
+}
+
+.ds-circular-button--neutral.ds-circular-button--active {
+  background-color: var(--color-action-neutral-bg-active);
+}
+
+.ds-circular-button--neutral.ds-circular-button--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* Interactive hover/active */
+.ds-circular-button--neutral:not(.ds-circular-button--disabled):hover {
+  background-color: var(--color-action-neutral-bg-hover);
+}
+
+.ds-circular-button--neutral:not(.ds-circular-button--disabled):active {
+  background-color: var(--color-action-neutral-bg-active);
+}
+
 /* ============================================
    LOADING
    Keeps the variant's full-colour appearance (no disabled dim);
@@ -207,6 +244,15 @@
   pointer-events: none;
 }
 
+/* The spinner is a box, not a glyph: left inline, it sits on the text
+   baseline and the strut's descender pushes it ~1px above the button's
+   centre. Flex centres it geometrically. */
+.ds-circular-button--loading .ds-circular-button__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
 /* ============================================
    FOCUS
    ============================================ */

package/components/CircularButton/CircularButton.d.ts

@@ -4,7 +4,7 @@ type CircularButtonOwnProps = {
     /** Material Symbol icon name */
     icon: string;
     /** Visual treatment */
-    variant?: 'primary' | 'secondary' | 'tertiary';
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'neutral';
     /**
      * Legacy alias for `variant`.
      *
@@ -34,6 +34,17 @@ type CircularButtonOwnProps = {
     loading?: boolean;
     /** Accessible label — required, because the button has no visible text */
     ariaLabel: string;
+    /**
+     * The hover/focus tooltip. An icon-only control names itself: by default
+     * the button wears a Tooltip carrying `ariaLabel`. Pass a string to show
+     * different wording, or `false` to opt out — for a host that labels the
+     * control another way, or one that owns the button's box directly
+     * (SplitButton's trigger stretches to its sibling segment, which the
+     * tooltip wrapper would block).
+     */
+    tooltip?: string | false;
+    /** Which side the tooltip opens on. */
+    tooltipPosition?: 'top' | 'bottom' | 'left' | 'right';
     /** Optional href — renders as <a> instead of <button> */
     href?: string;
     /** Optional target attribute for links */
@@ -48,7 +59,7 @@ export interface CircularButtonProps extends CircularButtonOwnProps, Omit<React.
 /**
  * Circular icon button component.
  * A round button containing a single icon, available in
- * primary, secondary and tertiary variants with default and compact sizes.
+ * primary, secondary, tertiary and neutral variants with default and compact sizes.
  *
  * Renders a `<button>`, or an `<a>` when `href` is supplied. Forwards a ref to
  * whichever element it renders, and spreads unrecognised props onto it.

package/components/CircularButton/CircularButton.js

@@ -1,6 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import React from "react";
 import { Spinner } from "../Spinner/Spinner.js";
+import { Tooltip } from "../Tooltip/Tooltip.js";
 import "./CircularButton.css";
 import "../../fonts/material-symbols.css";
 const CircularButton = React.forwardRef(
@@ -13,6 +14,8 @@ const CircularButton = React.forwardRef(
     size = "default",
     loading,
     ariaLabel,
+    tooltip,
+    tooltipPosition = "top",
     href,
     target,
     rel,
@@ -33,22 +36,19 @@ const CircularButton = React.forwardRef(
       className
     ].filter(Boolean).join(" ");
     const children = isLoading ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon`, "aria-hidden": "true", children: /* @__PURE__ */ jsx(Spinner, { size: size === "compact" ? "sm" : "md", variant: "inherit" }) }) : /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon material-symbols-rounded`, "aria-hidden": "true", children: icon });
-    if (href && !isDisabled && !isLoading) {
-      return /* @__PURE__ */ jsx(
-        "a",
-        {
-          ...rest,
-          ref,
-          className: classes,
-          href,
-          target,
-          rel,
-          "aria-label": ariaLabel,
-          children
-        }
-      );
-    }
-    return /* @__PURE__ */ jsx(
+    const control = href && !isDisabled && !isLoading ? /* @__PURE__ */ jsx(
+      "a",
+      {
+        ...rest,
+        ref,
+        className: classes,
+        href,
+        target,
+        rel,
+        "aria-label": ariaLabel,
+        children
+      }
+    ) : /* @__PURE__ */ jsx(
       "button",
       {
         ...rest,
@@ -61,6 +61,9 @@ const CircularButton = React.forwardRef(
         children
       }
     );
+    const tooltipContent = tooltip === false ? null : tooltip ?? ariaLabel;
+    if (!tooltipContent) return control;
+    return /* @__PURE__ */ jsx(Tooltip, { content: tooltipContent, position: tooltipPosition, children: control });
   }
 );
 CircularButton.displayName = "CircularButton";

package/components/CommandPalette/CommandPalette.css

@@ -14,13 +14,20 @@
   opacity: 0;
   visibility: hidden; /* also removes the input from the tab order */
   pointer-events: none;
-  transition: opacity var(--motion-duration-fast) var(--motion-ease-standard), visibility var(--motion-duration-fast) var(--motion-ease-standard);
+  /* Visibility waits out the fade only on close (duration token as delay);
+     on open it must flip instantly — the open effect focuses the input a
+     frame later, and focus() on a still-hidden element is a no-op, which
+     left the palette opening without its caret. */
+  transition: opacity var(--motion-duration-fast) var(--motion-ease-standard),
+    visibility 0s linear var(--motion-duration-fast);
 }
 
 .ds-command-palette--open {
   opacity: 1;
   visibility: visible;
   pointer-events: auto;
+  transition: opacity var(--motion-duration-fast) var(--motion-ease-standard),
+    visibility 0s;
 }
 
 /* ============================================
@@ -70,6 +77,13 @@
   padding: var(--padding-sm-md) var(--padding-md); /* 12px 16px */
   border-bottom: var(--border-xs) solid var(--color-divider);
   flex-shrink: 0;
+  transition: border-color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+/* The focused field marks the whole row with the active input border, the
+   same signal a focused Input gives its own edge. */
+.ds-command-palette__search:focus-within {
+  border-bottom-color: var(--color-input-border-selected);
 }
 
 .ds-command-palette__search-icon {
@@ -135,6 +149,17 @@
   min-height: 0;
   overflow-y: auto;
   padding: var(--padding-xxs);
+  /* Quiet scrollbar, ChatThread's recipe: thin and token-coloured instead
+     of the 15px native chrome rail a classic-scrollbar platform would draw
+     inside the panel. The stable gutter matters here because filtering
+     toggles overflow — without it every keystroke that crosses the
+     threshold reflows the rows sideways. */
+  scrollbar-width: thin;
+  scrollbar-gutter: stable;
+  scrollbar-color: var(--color-divider) transparent;
+  /* The scroll lock lets wheel and touch through only inside this list, so
+     hitting its ends must not chain the leftover delta to the page. */
+  overscroll-behavior: contain;
 }
 
 .ds-command-palette__status {

package/components/CommandPalette/CommandPalette.js

@@ -80,15 +80,19 @@ const CommandPalette = ({
     }
   }, [open]);
   useEffect(() => {
-    if (open) {
-      document.body.style.overflow = "hidden";
-    } else {
-      document.body.style.overflow = "";
-    }
+    if (!open) return;
+    const block = (event) => {
+      const target = event.target instanceof Element ? event.target : null;
+      if (target?.closest(`.${baseClass}__list`)) return;
+      event.preventDefault();
+    };
+    document.addEventListener("wheel", block, { passive: false });
+    document.addEventListener("touchmove", block, { passive: false });
     return () => {
-      document.body.style.overflow = "";
+      document.removeEventListener("wheel", block);
+      document.removeEventListener("touchmove", block);
     };
-  }, [open]);
+  }, [open, baseClass]);
   useEffect(() => {
     if (!open) return;
     const handleTrapKeyDown = (e) => {

package/components/Composer/Composer.css

@@ -140,6 +140,24 @@
   }
 }
 
+/* Working: while a response streams, the ring stays lit and keeps turning
+   whether or not the field holds focus — the visible half of the `streaming`
+   contract for glowing composers. The pairing is defined in design.md's
+   Composer section; streaming without aiGlow changes nothing. */
+.ds-composer--ai-glow.ds-composer--streaming {
+  border-color: transparent;
+}
+
+.ds-composer--ai-glow.ds-composer--streaming::before {
+  opacity: 1;
+  animation-play-state: running;
+}
+
+.ds-composer--ai-glow.ds-composer--streaming::after {
+  opacity: 0.3;
+  animation-play-state: running;
+}
+
 /* Reduced motion: the ring and glow stay, the turning stops. */
 @media (prefers-reduced-motion: reduce) {
   .ds-composer--ai-glow::before,

package/components/Composer/Composer.d.ts

@@ -21,7 +21,8 @@ type ComposerOwnProps = {
     onSubmit?: (value: string) => void;
     /**
      * A response is streaming: the send button becomes a stop button, submit
-     * is blocked, and Enter is inert.
+     * is blocked, and Enter is inert. On a glowing composer (`aiGlow`) the
+     * gradient ring also stays lit and keeps turning while this is true.
      */
     streaming?: boolean;
     /** Fires when the stop button is pressed while `streaming`. */
@@ -32,7 +33,8 @@ type ComposerOwnProps = {
      * While focused, the shell wears AiButton's slowly rotating gradient ring
      * and glow in place of the plain selected border — the system's "a model
      * answers here" signal, for composers whose messages are answered by one.
-     * Off by default.
+     * While `streaming`, the ring stays lit and turning whether or not the
+     * field holds focus. Off by default.
      */
     aiGlow?: boolean;
     /**

package/components/Composer/Composer.js

@@ -77,6 +77,7 @@ const Composer = React.forwardRef(
     const classes = [
       baseClass,
       aiGlow ? `${baseClass}--ai-glow` : "",
+      streaming ? `${baseClass}--streaming` : "",
       disabled ? `${baseClass}--disabled` : "",
       className
     ].filter(Boolean).join(" ");

package/components/ContributionGraph/ContributionGraph.css

@@ -4,14 +4,20 @@
    day, coloured by the contribution colour ramp
    ============================================ */
 
+/* Card chrome, header, and padding come from the shared chart styles
+   (Chart.css); this file owns the grid, legend, and cell ramp. */
+
 .ds-contribution-graph {
   --ds-contribution-cell: 12px;
   --ds-contribution-gap: 3px;
 
+  min-width: 0;
+}
+
+.ds-contribution-graph__content {
   display: flex;
   flex-direction: column;
   gap: var(--gap-sm);
-  width: 100%;
   min-width: 0;
 }
 
@@ -73,6 +79,27 @@
   width: 100%;
   height: auto;
   aspect-ratio: 1 / 1;
+  /* The year sweeps in left to right on mount: each column's delay steps by
+     a fraction of the entrance duration (--ds-contribution-week, set inline
+     per column). Token-composed, so reduced motion collapses the sweep. */
+  animation: ds-contribution-fade var(--motion-duration-slow) var(--motion-ease-standard)
+    backwards;
+  animation-delay: calc(
+    var(--ds-contribution-week, 0) * var(--motion-duration-slower) / 40
+  );
+}
+
+@keyframes ds-contribution-fade {
+  from {
+    opacity: 0;
+  }
+}
+
+/* Hover lifts the day under the pointer, so the title tooltip has a visible
+   anchor. */
+.ds-contribution-graph__week .ds-contribution-graph__cell:not(.ds-contribution-graph__cell--empty):hover {
+  outline: var(--border-xs) solid var(--color-text-tertiary);
+  outline-offset: calc(-1 * var(--border-xs));
 }
 
 .ds-contribution-graph__cell--empty {

package/components/ContributionGraph/ContributionGraph.d.ts

@@ -9,6 +9,12 @@ export interface ContributionDay {
 export interface ContributionGraphProps {
     /** One entry per day, ordered oldest to newest */
     days: ContributionDay[];
+    /** Chart title, in the shared chart header. */
+    title?: string;
+    /** Description text below the title. */
+    subtitle?: string;
+    /** Strip the card chrome (border, padding, fill) when the chart sits inside another panel that supplies the surface */
+    bare?: boolean;
     /** Summary line shown under the grid, e.g. "496 contributions in the last year" */
     caption?: string;
     /** Show month labels above the grid */
@@ -22,5 +28,7 @@ export interface ContributionGraphProps {
  * ContributionGraph renders a GitHub-style contribution heatmap:
  * one cell per day, arranged in weekday rows and week columns,
  * coloured by activity level via the --color-chart-contribution-* ramp.
+ * It wears the chart family's card chrome (title, subtitle, padding) and
+ * takes `bare` to drop it inside a panel that supplies the surface.
  */
-export declare const ContributionGraph: ({ days, caption, showMonthLabels, showLegend, className, }: ContributionGraphProps) => import("react").JSX.Element;
+export declare const ContributionGraph: ({ days, title, subtitle, bare, caption, showMonthLabels, showLegend, className, }: ContributionGraphProps) => import("react").JSX.Element;

package/components/ContributionGraph/ContributionGraph.js

@@ -1,4 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
+import "../Chart/Chart.css";
 import "./ContributionGraph.css";
 const MONTH_LABELS = [
   "Jan",
@@ -62,6 +63,9 @@ const buildMonthLabels = (weeks) => {
 };
 const ContributionGraph = ({
   days,
+  title,
+  subtitle,
+  bare = false,
   caption,
   showMonthLabels = true,
   showLegend = true,
@@ -69,53 +73,73 @@ const ContributionGraph = ({
 }) => {
   const weeks = buildWeeks(days);
   const monthLabels = buildMonthLabels(weeks);
-  const classes = ["ds-contribution-graph", className].filter(Boolean).join(" ");
+  const chartClass = "ds-chart";
+  const classes = [
+    chartClass,
+    bare && `${chartClass}--bare`,
+    "ds-contribution-graph",
+    className
+  ].filter(Boolean).join(" ");
   const columnTemplate = `repeat(${weeks.length}, minmax(var(--ds-contribution-cell), 1fr))`;
   return /* @__PURE__ */ jsxs("div", { className: classes, children: [
-    /* @__PURE__ */ jsxs("div", { className: "ds-contribution-graph__scroll", children: [
-      showMonthLabels && /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "ds-contribution-graph__months",
-          style: { gridTemplateColumns: columnTemplate },
-          "aria-hidden": "true",
-          children: monthLabels.map(({ weekIndex, label }) => /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: "ds-contribution-graph__month-label",
-              style: { gridColumnStart: weekIndex + 1 },
-              children: label
-            },
-            `${label}-${weekIndex}`
-          ))
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "ds-contribution-graph__grid",
-          style: { gridTemplateColumns: columnTemplate },
-          role: "img",
-          "aria-label": caption ?? "Contribution activity",
-          children: weeks.map((week, weekIndex) => /* @__PURE__ */ jsx("div", { className: "ds-contribution-graph__week", children: week.map(
-            (day, dayIndex) => day ? /* @__PURE__ */ jsx(
+    (title || subtitle) && /* @__PURE__ */ jsx("div", { className: `${chartClass}__header`, children: /* @__PURE__ */ jsxs("div", { className: `${chartClass}__header-text`, children: [
+      title && /* @__PURE__ */ jsx("h3", { className: `${chartClass}__title`, children: title }),
+      subtitle && /* @__PURE__ */ jsx("p", { className: `${chartClass}__subtitle`, children: subtitle })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: `${chartClass}__body ds-contribution-graph__content`, children: [
+      /* @__PURE__ */ jsxs("div", { className: "ds-contribution-graph__scroll", children: [
+        showMonthLabels && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "ds-contribution-graph__months",
+            style: { gridTemplateColumns: columnTemplate },
+            "aria-hidden": "true",
+            children: monthLabels.map(({ weekIndex, label }) => /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "ds-contribution-graph__month-label",
+                style: { gridColumnStart: weekIndex + 1 },
+                children: label
+              },
+              `${label}-${weekIndex}`
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "ds-contribution-graph__grid",
+            style: { gridTemplateColumns: columnTemplate },
+            role: "img",
+            "aria-label": caption ?? "Contribution activity",
+            children: weeks.map((week, weekIndex) => /* @__PURE__ */ jsx(
               "div",
               {
-                className: `ds-contribution-graph__cell ds-contribution-graph__cell--level-${day.level}`,
-                title: formatTooltip(day)
+                className: "ds-contribution-graph__week",
+                style: { "--ds-contribution-week": weekIndex },
+                children: week.map(
+                  (day, dayIndex) => day ? /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: `ds-contribution-graph__cell ds-contribution-graph__cell--level-${day.level}`,
+                      title: formatTooltip(day)
+                    },
+                    day.date
+                  ) : /* @__PURE__ */ jsx("div", { className: "ds-contribution-graph__cell ds-contribution-graph__cell--empty" }, `pad-${dayIndex}`)
+                )
               },
-              day.date
-            ) : /* @__PURE__ */ jsx("div", { className: "ds-contribution-graph__cell ds-contribution-graph__cell--empty" }, `pad-${dayIndex}`)
-          ) }, weekIndex))
-        }
-      )
-    ] }),
-    (caption || showLegend) && /* @__PURE__ */ jsxs("div", { className: "ds-contribution-graph__footer", children: [
-      caption && /* @__PURE__ */ jsx("span", { className: "ds-contribution-graph__caption", children: caption }),
-      showLegend && /* @__PURE__ */ jsxs("div", { className: "ds-contribution-graph__legend", "aria-hidden": "true", children: [
-        /* @__PURE__ */ jsx("span", { className: "ds-contribution-graph__legend-label", children: "Less" }),
-        [0, 1, 2, 3, 4].map((level) => /* @__PURE__ */ jsx("div", { className: `ds-contribution-graph__cell ds-contribution-graph__cell--level-${level}` }, level)),
-        /* @__PURE__ */ jsx("span", { className: "ds-contribution-graph__legend-label", children: "More" })
+              weekIndex
+            ))
+          }
+        )
+      ] }),
+      (caption || showLegend) && /* @__PURE__ */ jsxs("div", { className: "ds-contribution-graph__footer", children: [
+        caption && /* @__PURE__ */ jsx("span", { className: "ds-contribution-graph__caption", children: caption }),
+        showLegend && /* @__PURE__ */ jsxs("div", { className: "ds-contribution-graph__legend", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx("span", { className: "ds-contribution-graph__legend-label", children: "Less" }),
+          [0, 1, 2, 3, 4].map((level) => /* @__PURE__ */ jsx("div", { className: `ds-contribution-graph__cell ds-contribution-graph__cell--level-${level}` }, level)),
+          /* @__PURE__ */ jsx("span", { className: "ds-contribution-graph__legend-label", children: "More" })
+        ] })
       ] })
     ] })
   ] });

package/components/EmptyState/EmptyState.css

@@ -13,6 +13,11 @@
   gap: var(--gap-md); /* 16px */
   padding: var(--padding-xl); /* 32px */
   width: 100%;
+  /* width: 100% plus own padding — border-box locally (as ContactCard,
+     Checkbox, Composer, SelectionCard and Textarea do), so a consumer
+     without a global reset doesn't get a horizontal scrollbar wherever
+     this is embedded. */
+  box-sizing: border-box;
 }
 
 /* ============================================

package/components/Figure/Figure.css

@@ -47,15 +47,25 @@
    ZOOMABLE (has onClick)
    ============================================ */
 
-.ds-figure--zoomable {
+/* The zoom control is a real <button> wrapping the media (ARIA forbids
+   role="button" on <figure>), stripped back to a bare block. */
+.ds-figure__zoom {
+  display: block;
+  width: 100%;
+  padding: 0;
+  border: 0;
+  background: none;
+  font: inherit;
   cursor: zoom-in;
 }
 
-.ds-figure--zoomable:hover .ds-figure__media img {
+.ds-figure__zoom:hover .ds-figure__media img {
   opacity: 0.88;
 }
 
-.ds-figure--zoomable:focus-visible {
+/* Inset ring: the button sits inside the figure's overflow clip, so an
+   outset outline would be cropped away. */
+.ds-figure__zoom:focus-visible {
   outline: 2px solid var(--color-action-primary-bg);
-  outline-offset: 2px;
+  outline-offset: -2px;
 }

package/components/Figure/Figure.js

@@ -9,26 +9,17 @@ const Figure = ({
 }) => {
   const baseClass = "ds-figure";
   const classes = [baseClass, onClick && `${baseClass}--zoomable`, className].filter(Boolean).join(" ");
-  const onKeyDown = onClick ? (e) => {
-    if (e.key === "Enter" || e.key === " ") {
-      e.preventDefault();
-      onClick();
-    }
-  } : void 0;
-  return /* @__PURE__ */ jsxs(
-    "figure",
-    {
-      className: classes,
-      onClick,
-      onKeyDown,
-      role: onClick ? "button" : void 0,
-      tabIndex: onClick ? 0 : void 0,
-      children: [
-        /* @__PURE__ */ jsx("div", { className: `${baseClass}__media`, children }),
-        caption && /* @__PURE__ */ jsx("figcaption", { className: `${baseClass}__caption`, children: caption })
-      ]
-    }
-  );
+  const media = /* @__PURE__ */ jsx("div", { className: `${baseClass}__media`, children });
+  return /* @__PURE__ */ jsxs("figure", { className: classes, children: [
+    onClick ? (
+      // A real button rather than role="button" on the figure: ARIA
+      // forbids the button role on <figure>, and the element brings
+      // Enter/Space activation itself. Its accessible name is the
+      // child image's alt text.
+      /* @__PURE__ */ jsx("button", { type: "button", className: `${baseClass}__zoom`, onClick, children: media })
+    ) : media,
+    caption && /* @__PURE__ */ jsx("figcaption", { className: `${baseClass}__caption`, children: caption })
+  ] });
 };
 export {
   Figure

package/components/FunnelChart/FunnelChart.css

@@ -1,41 +1,17 @@
 /* ============================================
    FUNNEL CHART COMPONENT
-   Side-by-side vertical bars stepping down with
-   each stage's share of the first. Geometry and
-   colour arrive per stage as inline custom
-   properties (--funnel-stage-size, a clamped
-   percentage number; --funnel-stage-color, a
-   chart-series token), so the rules here stay
-   token-only.
+   Centred trapezoid funnel built on Recharts'
+   native Funnel. Card chrome, header, padding
+   and the tooltip surface all come from the
+   shared chart styles (Chart.css); colour
+   arrives per stage as a chart-series token
+   resolved live in SVG paint. This file owns
+   only what the shared styles cannot reach.
    ============================================ */
 
-/* Base */
+/* The stage-name labels draw as SVG text, which inherits no typography from
+   the shared chart classes — pin them to the family's primary face. */
 
-.ds-funnel-chart {
-  display: flex;
-  align-items: center;
-  gap: var(--gap-xxs);
-}
-
-/* Parts */
-
-.ds-funnel-chart__stage {
-  flex: 1;
-  min-width: 0;
-  height: calc(var(--funnel-stage-size) * 1%);
-  border-radius: var(--radius-sm);
-  background-color: var(--funnel-stage-color);
-  display: grid;
-  place-items: center;
-}
-
-.ds-funnel-chart__pct {
-  background-color: var(--color-bg-container-primary);
-  color: var(--color-text-primary);
-  border-radius: var(--radius-full);
-  padding: var(--padding-xxxs) var(--padding-xs);
-  font-family: var(--font-caption-family);
-  font-size: var(--font-caption-size);
-  font-weight: var(--font-paragraph-sm-em-weight);
-  line-height: var(--font-caption-line-height);
+.ds-funnel-chart .recharts-label-list text {
+  font-family: var(--font-family-primary);
 }