@multiplatform.one/components 6.7.0 → 7.0.0

package/src/charts/charts.spec.tsx

@@ -134,6 +134,29 @@ describe("BarChart", () => {
     const img = screen.getByRole("img");
     expect(img.getAttribute("aria-label")).toContain("no data");
   });
+
+  it("pins the value axis to an explicit domain without nicing", () => {
+    const { unmount: unmountShort } = renderWithProviders(
+      <BarChart data={[{ label: "atk", value: 90 }]} width={WIDTH} domain={[0, 180]} />,
+    );
+    const shortHeight = Number(markRects()[0].getAttribute("height"));
+    unmountShort();
+
+    const { unmount: unmountFull } = renderWithProviders(
+      <BarChart data={[{ label: "atk", value: 180 }]} width={WIDTH} domain={[0, 180]} />,
+    );
+    const fullHeight = Number(markRects()[0].getAttribute("height"));
+    expect(fullHeight).toBeGreaterThan(0);
+    expect(shortHeight / fullHeight).toBeCloseTo(0.5, 1);
+    unmountFull();
+
+    // 255 on a 0–255 scale must not nice out to 260 (ticks would show 260).
+    renderWithProviders(
+      <BarChart data={[{ label: "hp", value: 255 }]} width={WIDTH} domain={[0, 255]} />,
+    );
+    const ticks = Array.from(document.querySelectorAll("svg text")).map((node) => node.textContent);
+    expect(ticks).not.toContain("260");
+  });
 });
 
 describe("LineChart / AreaChart", () => {
@@ -314,6 +337,8 @@ describe("charts barrel", () => {
       "AreaChart",
       "PieChart",
       "Sparkline",
+      "computeCartesianPlot",
+      "resolveSeriesFills",
     ]) {
       expect(ChartExports).toHaveProperty(name);
     }

package/src/charts/index.ts

@@ -46,6 +46,15 @@ export type {
   PlotArea,
 } from "./types";
 
+// Shared layout/color plumbing (composed charts + consumers that pin a domain)
+export {
+  computeCartesianPlot,
+  resolveSeriesFills,
+  thinCategories,
+  type CartesianPlotInput,
+  type SeriesFillsInput,
+} from "./composeChart";
+
 // Theming (chrome from knobs + ramps; series from useChartPalette)
 export { useChartTheme, type ChartTheme } from "./useChartTheme";
 

package/src/code/CodeBlock/index.tsx

@@ -9,11 +9,13 @@
 import { LinearGradient } from "@tamagui/linear-gradient";
 import { CheckCircleIcon, ClipboardIcon, WarningCircleIcon } from "@phosphor-icons/react";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
+import { useEffect, useRef, useState } from "react";
+import { useTranslation } from "../../shared/i18n";
+import type { TamaguiElement } from "tamagui";
 import { ScrollView } from "tamagui";
 import { Button, zIndex } from "@multiplatform.one/forms";
 import { Spacer, TooltipSimple, XStack, YStack } from "tamagui";
+import { settleMs } from "../../AnimateHeight";
 import { ErrorBoundary } from "../../ErrorBoundary";
 import { Code } from "../Code";
 import { HighlightedCode } from "../HighlightedCode";
@@ -59,20 +61,54 @@ export function CodeBlock({
   const showLineNumbers = propShowLineNumbers ?? lines > 10;
   const isLong = lines > 22;
   const [isCutoff, setIsCutoff] = useState(isLong);
+  // Reveal tween: "Show more" measures the clamped wrapper's full content
+  // height and tweens maxHeight 400 → measured px on the knob transition
+  // (revealing to intrinsic height cannot tween — the AnimationLab
+  // auto-height defect), then releases the clamp entirely once settled.
+  const [expandTarget, setExpandTarget] = useState<number | null>(null);
+  const clampRef = useRef<TamaguiElement | null>(null);
+  const revealTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  useEffect(
+    () => () => {
+      if (revealTimerRef.current != null) clearTimeout(revealTimerRef.current);
+    },
+    [],
+  );
+  const transition = knobProps.transition;
+  const revealAll = () => {
+    const node = clampRef.current as unknown as HTMLElement | null;
+    const fullHeight = typeof node?.scrollHeight === "number" ? node.scrollHeight : null;
+    // No tween possible (reduced motion / animation=none, native — the RN
+    // driver applies layout props directly — or nothing to grow): reveal now.
+    if (!transition || fullHeight == null || fullHeight <= 400) {
+      setIsCutoff(false);
+      return;
+    }
+    setExpandTarget(fullHeight);
+    revealTimerRef.current = setTimeout(() => {
+      revealTimerRef.current = null;
+      // content height equals the clamp by now — removing it is invisible
+      setExpandTarget(null);
+      setIsCutoff(false);
+    }, settleMs(transition));
+  };
+  const clamped = isCutoff || expandTarget != null;
   const { hasCopied, hasCopyFailed, onCopy } = useClipboard(codeText);
 
   return (
     <YStack position="relative" marginBottom="$4">
       <ErrorBoundary>
         <YStack
+          ref={clampRef}
           position="relative"
-          {...(isCutoff && {
-            maxHeight: 400,
-            overflow: "hidden",
+          {...(clamped && {
+            maxHeight: expandTarget ?? 400,
+            overflow: "hidden" as const,
             ...knobProps.borderRadius,
+            ...(transition ? { transition } : {}),
           })}
         >
-          {isCutoff && (
+          {isCutoff && expandTarget == null && (
             <LinearGradient
               position="absolute"
               bottom={0}
@@ -83,7 +119,7 @@ export function CodeBlock({
               zIndex={zIndex.localTop}
             >
               <Spacer flex={1} />
-              <Button onPress={() => setIsCutoff(!isCutoff)} alignSelf="center">
+              <Button onPress={revealAll} alignSelf="center">
                 Show more
               </Button>
               <Spacer size="$4" />

package/src/export-surface.spec.tsx

@@ -0,0 +1,137 @@
+/**
+ * LC-70 CURATED-REEXPORT-IS-CATALOG export-surface spec — the VERIFY teeth.
+ *
+ * Every bare name the @multiplatform.one/components barrel exports is catalog
+ * output: it must be a house implementation (knob-consuming), a house shadow
+ * over one (Button, Spinner), or a raw framework re-export explicitly
+ * declared knob-immune in ./knobImmuneExports.ts with a reason. Raw
+ * primitives ride ONLY `Tamagui*`-prefixed escape hatches chosen deliberately
+ * at the import site.
+ *
+ * Mechanics: a raw re-export is detected by VALUE IDENTITY with the tamagui /
+ * @tamagui/toast export of the same name — a house implementation or shadow
+ * is never `===` the raw primitive. This spec therefore FAILS the moment
+ * someone re-exports a raw primitive under a bare house name, with no list to
+ * forget to update (the registry is the only escape valve, and it is locked
+ * in both directions).
+ *
+ * Companion: ./tamagui.spec.ts locks the specific curation choices (excluded
+ * names, allowlist presence, house shadows stay house). This spec is the
+ * generic partition invariant.
+ */
+import { cleanup } from "@testing-library/react";
+import * as toast from "@tamagui/toast";
+import * as forms from "@multiplatform.one/forms";
+import { Preset } from "@multiplatform.one/theme";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import * as tamagui from "tamagui";
+import { afterEach, describe, expect, it } from "vitest";
+import * as pkg from "./index";
+import { knobImmuneExports } from "./knobImmuneExports";
+
+const barrel = pkg as Record<string, unknown>;
+const rawTamagui = tamagui as Record<string, unknown>;
+const rawToast = toast as Record<string, unknown>;
+
+/** Value-identity with the same-name raw export = raw re-export. */
+function isRawReexport(name: string): boolean {
+  const value = barrel[name];
+  return (
+    (rawTamagui[name] !== undefined && value === rawTamagui[name]) ||
+    (rawToast[name] !== undefined && value === rawToast[name])
+  );
+}
+
+describe("export surface partition (LC-70)", () => {
+  const exportNames = Object.keys(barrel);
+
+  it("exports every bare name as house-or-registered; raw primitives only via Tamagui* prefixes", () => {
+    const violations: string[] = [];
+    for (const name of exportNames) {
+      if (!isRawReexport(name)) continue;
+      // TamaguiProvider is tamagui's own name (registry row), not a hatch.
+      if (name.startsWith("Tamagui") && knobImmuneExports[name] === undefined) continue;
+      if (knobImmuneExports[name] === undefined) {
+        violations.push(name);
+      }
+    }
+    expect(
+      violations,
+      `LC-70: bare barrel export(s) [${violations.join(", ")}] are RAW framework primitives. ` +
+        "Either shadow with a knob-consuming house implementation (Button/Spinner precedent), " +
+        "demote to a Tamagui*-prefixed escape hatch in ./tamagui.ts, or declare knob-immune " +
+        "with a reason in ./knobImmuneExports.ts.",
+    ).toEqual([]);
+  });
+
+  it("keeps every Tamagui*-prefixed escape hatch identical to the raw primitive it names", () => {
+    for (const name of exportNames) {
+      if (!name.startsWith("Tamagui")) continue;
+      // Raw re-exports of tamagui's own Tamagui*-named exports (TamaguiProvider)
+      // are registry rows, not escape hatches.
+      if (isRawReexport(name) && knobImmuneExports[name] !== undefined) continue;
+      const stripped = name.slice("Tamagui".length);
+      const raw = rawTamagui[stripped] ?? rawToast[stripped];
+      expect(
+        raw,
+        `escape hatch "${name}" names no raw tamagui/@tamagui-toast export "${stripped}"`,
+      ).toBeDefined();
+      expect(
+        barrel[name],
+        `escape hatch "${name}" must be the raw "${stripped}" primitive, nothing else`,
+      ).toBe(raw);
+    }
+  });
+
+  it("keeps the registry honest: every row is a live raw bare re-export", () => {
+    for (const [name, reason] of Object.entries(knobImmuneExports)) {
+      expect(reason.length, `registry row "${name}" needs a non-empty reason`).toBeGreaterThan(0);
+      expect(
+        barrel[name],
+        `registry row "${name}" is stale — the barrel no longer exports it`,
+      ).toBeDefined();
+      expect(
+        isRawReexport(name),
+        `registry row "${name}" is not a raw re-export — house implementations do not get ` +
+          "registry rows (delete the row; the house implementation IS the knob story)",
+      ).toBe(true);
+    }
+  });
+});
+
+describe("Spinner shadow (LC-70 census hit)", () => {
+  afterEach(cleanup);
+
+  it("exports the knob-consuming forms Spinner as the bare name, raw only as TamaguiSpinner", () => {
+    expect(pkg.Spinner).toBe(forms.Spinner);
+    expect(pkg.Spinner).not.toBe(tamagui.Spinner);
+    expect(pkg.TamaguiSpinner).toBe(tamagui.Spinner);
+  });
+
+  it("stops spinning at animation none — the animation knob reaches the rendered frame", () => {
+    const { container } = renderWithProviders(
+      <Preset overrides={{ animation: "none" }}>
+        <pkg.Spinner />
+      </Preset>,
+    );
+    const spinner = container.querySelector("[role='status']") as HTMLElement;
+    expect(spinner).toBeTruthy();
+    expect(spinner.className).toContain("mp1-spinner-static");
+  });
+
+  it("keeps spinning with motion on (positive control proving the probe measures)", () => {
+    const { container } = renderWithProviders(<pkg.Spinner />);
+    const spinner = container.querySelector("[role='status']") as HTMLElement;
+    expect(spinner).toBeTruthy();
+    expect(spinner.className).toContain("mp1-spinner");
+    expect(spinner.className).not.toContain("mp1-spinner-static");
+  });
+});
+
+// Type-level lock: the bare SpinnerProps is the forms contract now.
+type _SpinnerPropsIsForms =
+  import("./index").SpinnerProps extends import("@multiplatform.one/forms").SpinnerProps
+    ? true
+    : never;
+const _spinnerPropsLock: _SpinnerPropsIsForms = true;
+void _spinnerPropsLock;

package/src/feedback/ConfirmDialog.spec.tsx

@@ -137,6 +137,42 @@ describe("ConfirmDialog", () => {
     expect(dialog).toBeTruthy();
     expect(dialog?.getAttribute("aria-modal")).toBe("true");
   });
+
+  it("parks pointer-origin open on the panel, not a control (LC-71)", async () => {
+    renderWithProviders(
+      <ConfirmDialog
+        open
+        title="Leave this page?"
+        body="Edits will be discarded."
+        confirmLabel="Continue"
+      />,
+    );
+    const dialog = alertdialog();
+    expect(dialog).toBeTruthy();
+    expect(dialog?.getAttribute("tabindex")).toBe("-1");
+
+    await waitFor(() => {
+      const active = document.activeElement;
+      expect(active).toBeTruthy();
+      // wasKeyboardFocus is pinned false in test-utils — park on the frame.
+      expect(active === dialog || dialog?.contains(active)).toBe(true);
+      if (active && active !== dialog) {
+        expect(active.getAttribute("role")).not.toBe("button");
+      }
+    });
+  });
+
+  it("focuses a body text field on open (typed-confirm / LC-71 text-entry)", async () => {
+    renderWithProviders(
+      <ConfirmDialog open title="Delete project?" confirmLabel="Delete" destructive>
+        <input aria-label="Project name" />
+      </ConfirmDialog>,
+    );
+    await waitFor(() => {
+      const field = root().querySelector('input[aria-label="Project name"]');
+      expect(document.activeElement).toBe(field);
+    });
+  });
 });
 
 describe("ConfirmDialog action rules (DG-ACT-05 / DG-OVL-04)", () => {

package/src/feedback/ConfirmDialog.stories.tsx

@@ -31,6 +31,8 @@ function ConfirmHarness({
   confirmLabel = "Delete",
   title = "Delete customer?",
   body = "This removes the customer record. This cannot be undone.",
+  confirmDisabled = false,
+  confirmDisabledReason,
 }: {
   destructive?: boolean;
   warning?: boolean;
@@ -38,10 +40,12 @@ function ConfirmHarness({
   confirmLabel?: string;
   title?: string;
   body?: string;
+  confirmDisabled?: boolean;
+  confirmDisabledReason?: string;
 }) {
   const [open, setOpen] = useState(startOpen);
   return (
-    <YStack minHeight={320} gap="$3" padding="$4" alignItems="flex-start">
+    <YStack minHeight={360} gap="$3" padding="$4" alignItems="flex-start">
       <Button size="$3" onPress={() => setOpen(true)}>
         Open confirm
       </Button>
@@ -54,6 +58,8 @@ function ConfirmHarness({
         cancelLabel="Cancel"
         destructive={destructive}
         warning={warning}
+        confirmDisabled={confirmDisabled}
+        confirmDisabledReason={confirmDisabledReason}
         onConfirm={() => action("confirm")()}
         onCancel={() => action("cancel")()}
       />
@@ -88,6 +94,19 @@ export const Warning: Story = {
   ),
 };
 
+export const Gated: Story = {
+  render: () => (
+    <ConfirmHarness
+      destructive
+      confirmLabel="Delete"
+      title="Delete project acme?"
+      body="Type the project name to confirm. This cannot be undone."
+      confirmDisabled
+      confirmDisabledReason='Type "acme" to confirm.'
+    />
+  ),
+};
+
 function NotifyBlockingDemo() {
   useEffect(() => {
     resetToasts();

package/src/feedback/ConfirmDialog.tsx

@@ -5,6 +5,12 @@
  * cancels. Pointer-outside light-dismiss is disabled (blocking confirm).
  * `destructive` paints the confirm button with the danger (error) theme.
  *
+ * Focus (LC-71 / Radix AlertDialog / WAI-ARIA APG / macOS NSAlert):
+ * the panel is not a control — auto-focus on open never paints a ring on
+ * the frame. Keyboard-origin open moves focus to the first tab stop (Cancel,
+ * or a body field) with a ring. Pointer-origin open parks on the panel
+ * unless the first stop is a text field (typing is next).
+ *
  * Action rules: cancel never renders disabled — `cancelDisabled` is ignored
  * by design (DG-ACT-05, `cancel-disabled` DEV warn). Cancel + confirm are the
  * two sanctioned actions; extra pressables in the body DEV-warn
@@ -12,14 +18,65 @@
  */
 
 import { Button } from "@multiplatform.one/forms";
-import { warnCancelDisabled, warnDialogTooManyActions } from "@multiplatform.one/theme";
-import { useEffect, useRef, type ReactNode } from "react";
-import { useTranslation } from "react-i18next";
-import { Dialog, Paragraph, XStack, YStack } from "tamagui";
+import {
+  ensureKeyboardModalityTracking,
+  useResolvedKnobs,
+  warnCancelDisabled,
+  warnDialogTooManyActions,
+  wasKeyboardFocus,
+} from "@multiplatform.one/theme";
+import { useCallback, useEffect, useRef, type ReactNode } from "react";
+import { useTranslation } from "../shared/i18n";
+import { Dialog, Paragraph, XStack, YStack, type TamaguiElement } from "tamagui";
 import { countActionsInTree } from "../shared/actionScan";
 import { useReturnFocusOnClose } from "../shared/useReturnFocusOnClose";
 import { DialogContent, DialogOverlay } from "../surfaces";
 
+const TAB_STOPS =
+  'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), [contenteditable="true"]';
+
+function asHtml(node: unknown): HTMLElement | null {
+  return node instanceof HTMLElement ? node : null;
+}
+
+function panelNode(ref: unknown): HTMLElement | null {
+  const fromRef = asHtml(ref);
+  if (fromRef) return fromRef;
+  if (typeof document === "undefined") return null;
+  return document.querySelector<HTMLElement>("[data-mp-confirm-dialog]");
+}
+
+function isTextEntry(el: HTMLElement): boolean {
+  const tag = el.tagName;
+  if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return true;
+  if (el.isContentEditable) return true;
+  const role = el.getAttribute("role");
+  if (role === "textbox" || role === "searchbox" || role === "combobox") return true;
+  return Boolean(el.querySelector("input, textarea, [contenteditable='true']"));
+}
+
+function firstTabStop(root: HTMLElement): HTMLElement | null {
+  const nodes = root.querySelectorAll<HTMLElement>(TAB_STOPS);
+  for (const el of nodes) {
+    if (el === root) continue;
+    if (el.getAttribute("aria-hidden") === "true") continue;
+    if (typeof el.closest === "function" && el.closest("[data-focus-skip]")) continue;
+    return el;
+  }
+  return null;
+}
+
+function applyOpenFocus(panel: HTMLElement) {
+  const keyboard = wasKeyboardFocus();
+  const first = firstTabStop(panel);
+  const toControl = Boolean(first && (keyboard || isTextEntry(first)));
+  const target = toControl && first ? first : panel;
+  target.focus({
+    preventScroll: true,
+    focusVisible: keyboard && toControl,
+  } as FocusOptions);
+}
+
 export interface ConfirmDialogProps {
   open: boolean;
   onOpenChange?: (open: boolean) => void;
@@ -86,12 +143,16 @@ export function ConfirmDialog({
   allowManyActions = false,
 }: ConfirmDialogProps) {
   const { t } = useTranslation();
+  const { knobProps } = useResolvedKnobs();
   const confirmLabel = confirmLabelProp ?? t("Confirm");
   const cancelLabel = cancelLabelProp ?? t("Cancel");
   const description = body ?? children;
+  const contentRef = useRef<TamaguiElement | null>(null);
   /** Distinguishes confirm close from Escape/cancel so onCancel isn't double-fired. */
   const closeReason = useRef<"confirm" | "cancel" | null>(null);
 
+  ensureKeyboardModalityTracking();
+
   // DG-A11Y-04 / Axiom 7: ConfirmDialog is always opened programmatically
   // (no Dialog.Trigger), so Tamagui's focus scope cannot restore focus on
   // close — without this, Escape/cancel dropped focus on <body>.
@@ -123,34 +184,82 @@ export function ConfirmDialog({
     onOpenChange?.(next);
   };
 
+  const handleOpenAutoFocus = useCallback((event: Event) => {
+    event.preventDefault();
+    const panel = panelNode(contentRef.current);
+    if (panel) applyOpenFocus(panel);
+  }, []);
+
+  // Radix onOpenAutoFocus is the web path; this effect covers jsdom and the
+  // frame where the portal ref is not ready in the auto-focus callback.
+  useEffect(() => {
+    if (!open) return;
+    let cancelled = false;
+    let frames = 0;
+    const run = () => {
+      if (cancelled) return;
+      const panel = panelNode(contentRef.current);
+      if (!panel) {
+        if (frames++ < 8) requestAnimationFrame(run);
+        return;
+      }
+      applyOpenFocus(panel);
+    };
+    run();
+    return () => {
+      cancelled = true;
+    };
+  }, [open]);
+
   return (
     <Dialog modal open={open} onOpenChange={handleOpenChange}>
       <Dialog.Portal>
         <DialogOverlay key="overlay" />
         <DialogContent
+          ref={contentRef}
           key="content"
-          maxWidth={440}
+          // Polaris small modal / macOS alert: fixed alert width, not shrink-wrap.
+          width="90%"
+          maxWidth={420}
           role="alertdialog"
+          tabIndex={-1}
+          // LC-71: the frame is not a control. Own the no-ring contract here
+          // so panel auto-focus cannot paint even if DialogContent changes.
+          outlineWidth={0}
+          focusStyle={{ outlineWidth: 0 }}
+          focusVisibleStyle={{ outlineWidth: 0 }}
           // Test / automation hook for confirm tone (theme class names vary by runtime).
           data-tone={destructive ? "destructive" : warning ? "warning" : "default"}
+          data-mp-confirm-dialog=""
           // Blocking confirm: no light-dismiss. Escape still cancels via
           // Dialog's default escape → onOpenChange(false).
           onPointerDownOutside={(e) => e.preventDefault()}
           onInteractOutside={(e) => e.preventDefault()}
+          onOpenAutoFocus={handleOpenAutoFocus}
         >
-          <Dialog.Title>{title}</Dialog.Title>
+          <Dialog.Title {...knobProps.heading} fontSize="$6">
+            {title}
+          </Dialog.Title>
           {description != null ? (
             <Dialog.Description asChild>
               {typeof description === "string" || typeof description === "number" ? (
-                <Paragraph size="$3">{description}</Paragraph>
+                <Paragraph {...knobProps.body} size="$3" color="$color11">
+                  {description}
+                </Paragraph>
               ) : (
-                <YStack>{description}</YStack>
+                <YStack {...knobProps.gap}>{description}</YStack>
               )}
             </Dialog.Description>
           ) : null}
-          <XStack gap="$2" marginTop="$4" justifyContent="flex-end" alignItems="flex-start">
+          <XStack
+            {...knobProps.gap}
+            justifyContent="flex-end"
+            alignItems="flex-start"
+            flexWrap="wrap"
+          >
             <Button
               chromeless
+              compact
               // DG-ACT-05: never disabled; `cancelDisabled` requests are ignored.
               data-mp-cancel-disabled-ignored={cancelDisabled ? "true" : undefined}
               onPress={() => {
@@ -161,8 +270,11 @@ export function ConfirmDialog({
               {cancelLabel}
             </Button>
             <Button
+              compact
+              accent={!destructive && !warning}
               error={destructive}
               warning={!destructive && warning}
+              actionRole="primary"
               disabled={confirmDisabled || undefined}
               // DG-ST-03: gated confirm explains itself (visible reason,
               // no hover) instead of dangling as a bare-disabled dead end.

package/src/feedback/NotifyHost.tsx

@@ -8,7 +8,7 @@
 import { useMemo, useSyncExternalStore, type ReactNode } from "react";
 import { zIndex } from "@multiplatform.one/forms";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "../shared/i18n";
 import { YStack } from "tamagui";
 import { Alert, type AlertIntent } from "../Alert";
 import { ToastViewport, type ToastViewportProps } from "../Toast";

package/src/icons/themed.tsx

@@ -1,5 +1,6 @@
+import { isTouchSurface, sizeRecipeForToken } from "@multiplatform.one/theme";
 import type { FC } from "react";
-import { getTokens, getVariable, getVariableValue, useProps, useTheme } from "tamagui";
+import { getVariable, useProps, useTheme } from "tamagui";
 
 export function themed<A extends FC>(Component: A) {
   return ((props: any) => {
@@ -14,7 +15,11 @@ export function themed<A extends FC>(Component: A) {
             (!disableTheme ? theme.color : null) ||
             "#000",
         )}
-        size={typeof size === "string" ? getVariableValue(getTokens().size[size] || size) : size}
+        size={
+          typeof size === "string"
+            ? sizeRecipeForToken(size, { touch: isTouchSurface() }).iconSize
+            : size
+        }
       />
     );
   }) as A;