@12-apps/ui 6.34.0 → 6.35.0

package/src/components/navigation/CommandPalette/CommandPaletteResults.tsx

@@ -12,6 +12,7 @@ import React from 'react';
 import { ShortcutChip } from './ShortcutChip';
 import type { PaletteCommand } from './CommandPalette.types';
 import type { CommandPaletteCopy } from '../../../copy';
+import { rem, sxRem } from '../../../tokens/relative';
 
 const ResultsList = styled(List)(({ theme }) => ({
   maxHeight: 400,
@@ -50,7 +51,7 @@ const CommandItem = styled(ListItem)<{ selected?: boolean }>(({ theme, selected
 }));
 
 const CategoryLabel = styled(Typography)(({ theme }) => ({
-  fontSize: '0.75rem',
+  fontSize: rem(theme, 12),
   fontWeight: 600,
   color: theme.palette.text.secondary,
   textTransform: 'uppercase',
@@ -84,8 +85,8 @@ const CommandRow: React.FC<{
     <ListItemText
       primary={command.label}
       secondary={command.description}
-      primaryTypographyProps={{ fontSize: '0.9rem', fontWeight: selected ? 500 : 400 }}
-      secondaryTypographyProps={{ fontSize: '0.75rem' }}
+      primaryTypographyProps={{ fontSize: sxRem(14.4), fontWeight: selected ? 500 : 400 }}
+      secondaryTypographyProps={{ fontSize: sxRem(12) }}
     />
     {command.shortcut && <ShortcutChip label={command.shortcut} size="small" />}
   </CommandItem>
@@ -168,7 +169,7 @@ export const PaletteResults: React.FC<{
       {showRecentSection && (
         <>
           <CategoryLabel data-testid={`${dataTestId}-group-recent`}>
-            <RecentIcon sx={{ fontSize: 14, mr: 0.5, verticalAlign: 'middle' }} />
+            <RecentIcon sx={{ fontSize: sxRem(14), mr: 0.5, verticalAlign: 'middle' }} />
             {copy.recent}
           </CategoryLabel>
           {recent.map(row)}

package/src/components/navigation/CommandPalette/ShortcutChip.tsx

@@ -2,6 +2,8 @@ import type { ChipProps } from '@mui/material/Chip/index.js';
 import Chip from '@mui/material/Chip/index.js';
 import React from 'react';
 
+import { sxRem } from '../../../tokens/relative';
+
 // A plain component rather than styled(Chip): a styled component's inferred type
 // cannot be named across a module boundary in this package (TS2742), and both
 // the results list and the palette footer need this one.
@@ -10,7 +12,7 @@ export const ShortcutChip: React.FC<ChipProps> = (props) => (
     {...props}
     sx={{
       height: 20,
-      fontSize: '0.7rem',
+      fontSize: sxRem(11.2),
       fontFamily: 'monospace',
       ...props.sx,
     }}

package/src/components/navigation/ContextMenu/ContextMenu.tsx

@@ -10,6 +10,7 @@ import React, { cloneElement, isValidElement,useState } from 'react';
 
 import type { ContextMenuItem,ContextMenuProps } from './ContextMenu.types';
 import { absoluteInk, neutralTones, shadowInk, sheen } from '../../../tokens/ink';
+import { rem } from '../../../tokens/relative';
 
 const StyledMenu = styled(Menu, {
   shouldForwardProp: (prop) => prop !== 'customVariant' && prop !== 'size',
@@ -41,7 +42,7 @@ const StyledMenu = styled(Menu, {
 
     ...(size === 'sm' && {
       '& .MuiMenuItem-root': {
-        fontSize: '0.875rem',
+        fontSize: rem(theme, 14),
         minHeight: 32,
         padding: theme.spacing(0.5, 1.5),
       },
@@ -49,7 +50,7 @@ const StyledMenu = styled(Menu, {
 
     ...(size === 'lg' && {
       '& .MuiMenuItem-root': {
-        fontSize: '1.125rem',
+        fontSize: rem(theme, 18),
         minHeight: 48,
         padding: theme.spacing(1.5, 2),
       },
@@ -96,7 +97,7 @@ const StyledMenuItem = styled(MenuItem, {
 
 const MenuHeader = styled(Typography)(({ theme }) => ({
   padding: theme.spacing(1, 2),
-  fontSize: '0.75rem',
+  fontSize: rem(theme, 12),
   fontWeight: 600,
   textTransform: 'uppercase',
   color: theme.palette.text.secondary,
@@ -104,7 +105,7 @@ const MenuHeader = styled(Typography)(({ theme }) => ({
 }));
 
 const ShortcutText = styled(Typography)(({ theme }) => ({
-  fontSize: '0.75rem',
+  fontSize: rem(theme, 12),
   color: theme.palette.text.secondary,
   marginLeft: 'auto',
   paddingLeft: theme.spacing(2),

package/src/components/navigation/DropdownMenu/DropdownMenu.tsx

@@ -13,6 +13,7 @@ import React, { cloneElement, isValidElement,useRef, useState } from 'react';
 
 import type { DropdownMenuItem,DropdownMenuProps } from './DropdownMenu.types';
 import { modeInk, shadowInk, sheen } from '../../../tokens/ink';
+import { rem } from '../../../tokens/relative';
 
 // Resolves every light/dark decision once. The inline version repeated
 // `theme.palette.mode === 'dark' ? … : …` nine times, and two of those had the
@@ -79,7 +80,7 @@ const StyledMenu = styled(Menu, {
 
     ...(size === 'sm' && {
       '& .MuiMenuItem-root': {
-        fontSize: '0.875rem',
+        fontSize: rem(theme, 14),
         minHeight: 32,
         padding: theme.spacing(0.75, 2),
       },
@@ -87,7 +88,7 @@ const StyledMenu = styled(Menu, {
 
     ...(size === 'lg' && {
       '& .MuiMenuItem-root': {
-        fontSize: '1.125rem',
+        fontSize: rem(theme, 18),
         minHeight: 48,
         padding: theme.spacing(1.5, 3),
       },
@@ -132,7 +133,7 @@ const StyledMenuItem = styled(MenuItem, {
 
 const MenuHeader = styled(Typography)(({ theme }) => ({
   padding: theme.spacing(1, 2),
-  fontSize: '0.75rem',
+  fontSize: rem(theme, 12),
   fontWeight: 600,
   textTransform: 'uppercase',
   color: theme.palette.text.secondary,
@@ -140,7 +141,7 @@ const MenuHeader = styled(Typography)(({ theme }) => ({
 }));
 
 const ShortcutText = styled(Typography)(({ theme }) => ({
-  fontSize: '0.75rem',
+  fontSize: rem(theme, 12),
   color: theme.palette.text.secondary,
   marginLeft: 'auto',
   paddingLeft: theme.spacing(2),

package/src/components/navigation/NavigationMenu/NavigationMenu.styles.ts

@@ -1,5 +1,6 @@
 import { alpha, keyframes } from '@mui/material/styles/index.js';
 import type { CSSObject, Theme } from '@mui/material/styles/index.js';
+import { rem } from '../../../tokens/relative';
 
 import { EFFECT_GLOW } from '../../../tokens/ink.core';
 
@@ -29,12 +30,12 @@ export const pulseGlow = keyframes`
 const SIZE_STYLES: Record<string, (theme: Theme) => CSSObject> = {
   sm: (theme) => ({
     padding: theme.spacing(1, 1.5),
-    fontSize: '0.875rem',
+    fontSize: rem(theme, 14),
     '& .MuiListItemIcon-root': { transform: 'scale(0.85)' },
   }),
   lg: (theme) => ({
     padding: theme.spacing(2, 2.5),
-    fontSize: '1.125rem',
+    fontSize: rem(theme, 18),
     '& .MuiListItemIcon-root': { transform: 'scale(1.15)' },
   }),
 };

package/src/components/navigation/NavigationMenu/NavigationMenuItem.tsx

@@ -17,6 +17,7 @@ import { useMenuItemState } from './NavigationMenuItem.hooks';
 import { navItemButtonStyles, pulseGlow } from './NavigationMenu.styles';
 import type { NavigationMenuItem } from './NavigationMenu.types';
 import { onMedia, shadowInk, uiInk } from '../../../tokens/ink';
+import { sxRem } from '../../../tokens/relative';
 
 const StyledListItem = styled(ListItem, {
   shouldForwardProp: (prop) => !['variant', 'active', 'size', 'level'].includes(prop as string) })<{ variant?: string; active?: boolean; size?: string; level?: number }>(
@@ -150,7 +151,7 @@ const MenuItemLabel: React.FC<{
             height: 20,
             px: 0.75,
             borderRadius: '10px',
-            fontSize: '0.75rem',
+            fontSize: sxRem(12),
             fontWeight: 600,
             color: (theme) => onMedia(theme),
             background: (theme) =>

package/src/components/navigation/Pagination/Pagination.styles.ts

@@ -1,14 +1,15 @@
 import { alpha } from '@mui/material/styles/index.js';
 import type { CSSObject, Theme } from '@mui/material/styles/index.js';
+import { rem } from '../../../tokens/relative';
 
 const ITEM_SIZE_STYLES: Record<string, (theme: Theme) => CSSObject> = {
   sm: (theme) => ({
-      fontSize: '0.875rem',
+      fontSize: rem(theme, 14),
       minWidth: 28,
       height: 28,
       padding: theme.spacing(0.25, 0.5) }),
   lg: (theme) => ({
-      fontSize: '1.125rem',
+      fontSize: rem(theme, 18),
       minWidth: 44,
       height: 44,
       padding: theme.spacing(1, 1.5) }) };

package/src/components/navigation/Tabs/Tabs.styles.ts

@@ -1,11 +1,12 @@
 import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 import { alpha } from '@mui/material/styles/index.js';
+import { rem } from '../../../tokens/relative';
 
 const sizeStyles = (theme: Theme, size?: string): CSSObject => ({
     ...(size === 'sm' && {
       minHeight: 32,
       '& .MuiTab-root': {
-        fontSize: '0.875rem',
+        fontSize: rem(theme, 14),
         minHeight: 32,
         padding: theme.spacing(0.5, 1.5),
       },
@@ -14,7 +15,7 @@ const sizeStyles = (theme: Theme, size?: string): CSSObject => ({
     ...(size === 'lg' && {
       minHeight: 56,
       '& .MuiTab-root': {
-        fontSize: '1.125rem',
+        fontSize: rem(theme, 18),
         minHeight: 56,
         padding: theme.spacing(1.5, 3),
       },

package/src/components/navigation/Tabs/Tabs.tsx

@@ -10,6 +10,7 @@ import React from 'react';
 import { CustomTabPanel } from './TabsPanel';
 import { tabsRootStyles } from './Tabs.styles';
 import type { TabItem, TabsProps } from './Tabs.types';
+import { rem } from '../../../tokens/relative';
 
 const StyledTabs = styled(MuiTabs, {
   shouldForwardProp: (prop) => !['customVariant', 'size', 'showDividers'].includes(prop as string) })<{ customVariant?: string; size?: string; showDividers?: boolean }>(
@@ -32,11 +33,11 @@ const CloseButton = styled(Box)(({ theme }) => ({
     backgroundColor: alpha(theme.palette.error.main, 0.1),
     color: theme.palette.error.main } }));
 
-const BadgeWrapper = styled(Badge)(() => ({
+const BadgeWrapper = styled(Badge)(({ theme }) => ({
   '& .MuiBadge-badge': {
     right: -6,
     top: 4,
-    fontSize: '0.75rem',
+    fontSize: rem(theme, 12),
     minWidth: 16,
     height: 16,
     padding: 0 } }));

package/src/components/typography/Blockquote/Blockquote.tsx

@@ -7,6 +7,7 @@ import React from 'react';
 
 import type { BlockquoteProps } from './Blockquote.types';
 import { absoluteInk, controlNeutral, neutralTones } from '../../../tokens/ink';
+import { rem } from '../../../tokens/relative';
 
 const getColorFromTheme = (theme: Theme, color: string) => {
   if (color === 'neutral') {
@@ -39,7 +40,7 @@ const StyledBlockquote = styled('blockquote', {
     padding: 0,
     position: 'relative' as const,
     fontFamily: theme.typography.body1.fontFamily,
-    fontSize: '1.125rem',
+    fontSize: rem(theme, 18),
     lineHeight: 1.6,
     fontStyle: 'italic',
     color: theme.palette.text.primary,
@@ -105,7 +106,7 @@ const QuoteIcon = styled(FormatQuote)<{ customColor: string }>(({ theme, customC
     position: 'absolute',
     top: theme.spacing(1),
     left: theme.spacing(1),
-    fontSize: '2rem',
+    fontSize: rem(theme, 32),
     opacity: 0.3,
     transform: 'rotate(180deg)',
     color: colorPalette.main,
@@ -121,12 +122,12 @@ const CitationContainer = styled(Box)(({ theme }) => ({
 
 const AuthorName = styled(Typography)(({ theme }) => ({
   fontWeight: 600,
-  fontSize: '0.875rem',
+  fontSize: rem(theme, 14),
   marginBottom: theme.spacing(0.5),
 }));
 
-const SourceName = styled(Typography)(() => ({
-  fontSize: '0.75rem',
+const SourceName = styled(Typography)(({ theme }) => ({
+  fontSize: rem(theme, 12),
   opacity: 0.7,
 }));
 

package/src/components/typography/Code/Code.tsx

@@ -8,6 +8,7 @@ import React, { useState } from 'react';
 
 import type { CodeProps } from './Code.types';
 import { modeInk, neutralTones } from '../../../tokens/ink';
+import { rem } from '../../../tokens/relative';
 
 const StyledCodeContainer = styled(Box, {
   shouldForwardProp: (prop) =>
@@ -20,17 +21,17 @@ const StyledCodeContainer = styled(Box, {
 }>(({ theme, customVariant = 'inline', customSize = 'md', copyable }) => {
   // Size mapping
   const sizeMap = {
-    xs: { fontSize: '0.75rem', padding: '2px 4px' },
-    sm: { fontSize: '0.8125rem', padding: '3px 6px' },
-    md: { fontSize: '0.875rem', padding: '4px 8px' },
-    lg: { fontSize: '1rem', padding: '6px 12px' },
+    xs: { fontSize: rem(theme, 12), padding: '2px 4px' },
+    sm: { fontSize: rem(theme, 13), padding: '3px 6px' },
+    md: { fontSize: rem(theme, 14), padding: '4px 8px' },
+    lg: { fontSize: rem(theme, 16), padding: '6px 12px' },
   };
 
   const blockSizeMap = {
-    xs: { fontSize: '0.75rem', padding: '8px 12px' },
-    sm: { fontSize: '0.8125rem', padding: '12px 16px' },
-    md: { fontSize: '0.875rem', padding: '16px 20px' },
-    lg: { fontSize: '1rem', padding: '20px 24px' },
+    xs: { fontSize: rem(theme, 12), padding: '8px 12px' },
+    sm: { fontSize: rem(theme, 13), padding: '12px 16px' },
+    md: { fontSize: rem(theme, 14), padding: '16px 20px' },
+    lg: { fontSize: rem(theme, 16), padding: '20px 24px' },
   };
 
   const baseStyles = {
@@ -121,7 +122,7 @@ const CopyButton = styled(IconButton)(({ theme }) => ({
     transform: 'scale(1.05)',
   },
   '& .MuiSvgIcon-root': {
-    fontSize: 16,
+    fontSize: rem(theme, 16),
   },
 }));
 
@@ -129,7 +130,7 @@ const LanguageLabel = styled(Box)(({ theme }) => ({
   position: 'absolute',
   top: theme.spacing(1),
   left: theme.spacing(2),
-  fontSize: '0.75rem',
+  fontSize: rem(theme, 12),
   fontWeight: 500,
   color: alpha(theme.palette.text.primary, 0.6),
   backgroundColor:

package/src/components/typography/Paragraph/Paragraph.tsx

@@ -16,7 +16,8 @@ import {
 } from './Paragraph.metrics';
 import type { ParagraphProps } from './Paragraph.types';
 import { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';
-import { px } from '../../../tokens/theme';
+import { rem } from '../../../tokens/relative';
+import type { UiTypeStep } from '../../../tokens/theme';
 
 const getColorFromTheme = (theme: Theme, color: string) => {
   if (color === 'neutral') {
@@ -37,17 +38,20 @@ const getColorFromTheme = (theme: Theme, color: string) => {
 
 // Derived from the shared metrics, not restated: the native `Paragraph` reads
 // the same table, so the two renderers cannot disagree on a size.
-const sizeMap: Record<string, { fontSize: string; lineHeight: number }> = Object.fromEntries(
-  Object.entries(PARAGRAPH_SIZES).map(([size, step]) => [
-    size,
-    { fontSize: px(step.fontSize), lineHeight: step.lineHeight },
-  ]),
-);
+// The table keeps the design px; the size is converted where it is read.
+const sizeMap: Readonly<Record<string, UiTypeStep | undefined>> = PARAGRAPH_SIZES;
+
+const sizeStyles = (theme: Theme, customSize: string): CSSObject => {
+  const step = sizeMap[customSize];
+  return step ? { fontSize: rem(theme, step.fontSize), lineHeight: step.lineHeight } : {};
+};
 
 // `lead` and `small` shrink or grow relative to the scale, but only at the
 // default size — an explicit size wins.
-const sizeOverride = (customSize: string, atDefault: number): string | undefined =>
-  customSize === 'md' ? px(atDefault) : sizeMap[customSize]?.fontSize;
+const sizeOverride = (theme: Theme, customSize: string, atDefault: number): string | undefined => {
+  const drawnAt = customSize === 'md' ? atDefault : sizeMap[customSize]?.fontSize;
+  return drawnAt === undefined ? undefined : rem(theme, drawnAt);
+};
 
 const StyledParagraph = styled(Typography, {
   shouldForwardProp: (prop) =>
@@ -63,7 +67,7 @@ const StyledParagraph = styled(Typography, {
     fontFamily: theme.typography.body1.fontFamily,
     margin: `0 0 ${PARAGRAPH_MARGIN_BOTTOM_EM}em 0`,
     transition: 'all 0.2s ease',
-    ...sizeMap[customSize],
+    ...sizeStyles(theme, customSize),
   };
 
   // Variant-specific styles
@@ -77,7 +81,7 @@ const StyledParagraph = styled(Typography, {
       ...baseStyles,
       color: textColor,
       fontWeight: PARAGRAPH_FONT_WEIGHT,
-      fontSize: sizeOverride(customSize, LEAD_FONT_SIZE),
+      fontSize: sizeOverride(theme, customSize, LEAD_FONT_SIZE),
       lineHeight: LEAD_LINE_HEIGHT,
       letterSpacing: `${LEAD_LETTER_SPACING_EM}em`,
     },
@@ -90,7 +94,7 @@ const StyledParagraph = styled(Typography, {
     small: {
       ...baseStyles,
       color: theme.palette.text.secondary,
-      fontSize: sizeOverride(customSize, SMALL_FONT_SIZE),
+      fontSize: sizeOverride(theme, customSize, SMALL_FONT_SIZE),
       fontWeight: PARAGRAPH_FONT_WEIGHT,
       lineHeight: SMALL_LINE_HEIGHT,
     },

package/src/components/typography/Text/Text.tsx

@@ -22,7 +22,8 @@ import {
 import type { TextProps } from './Text.types';
 import { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';
 import type { ColorValue } from '../../../tokens/scales';
-import { px } from '../../../tokens/theme';
+import { rem } from '../../../tokens/relative';
+import type { UiTypeStep } from '../../../tokens/theme';
 
 const getColorFromTheme = (theme: Theme, color: ColorValue): string => {
   if (color === 'neutral') {
@@ -50,12 +51,13 @@ const getColorFromTheme = (theme: Theme, color: ColorValue): string => {
 
 // Derived from the shared metrics, not restated: the native `Text` reads the
 // same table, so the two renderers cannot disagree on a size.
-const SIZE_MAP: Record<string, { fontSize: string; lineHeight: number }> = Object.fromEntries(
-  Object.entries(TEXT_SIZES).map(([size, step]) => [
-    size,
-    { fontSize: px(step.fontSize), lineHeight: step.lineHeight },
-  ]),
-);
+// The table keeps the design px; the size is converted where it is read.
+const SIZE_MAP: Readonly<Record<string, UiTypeStep | undefined>> = TEXT_SIZES;
+
+const fontSizeFor = (theme: Theme, customSize: string | undefined): string | undefined => {
+  const drawnAt = SIZE_MAP[customSize ?? 'md']?.fontSize;
+  return drawnAt === undefined ? undefined : rem(theme, drawnAt);
+};
 
 const WEIGHT_MAP: Record<string, number> = TEXT_WEIGHTS;
 
@@ -77,7 +79,7 @@ const decorationFor = (underline?: boolean, strikethrough?: boolean): string =>
 
 const baseTextStyles = (theme: Theme, a: TextStyleArgs): CSSObject => ({
   color: getColorFromTheme(theme, a.customColor ?? 'neutral'),
-  fontSize: SIZE_MAP[a.customSize ?? 'md']?.fontSize,
+  fontSize: fontSizeFor(theme, a.customSize),
   lineHeight: SIZE_MAP[a.customSize ?? 'md']?.lineHeight,
   fontWeight: WEIGHT_MAP[a.customWeight ?? 'normal'],
   fontStyle: a.italic ? 'italic' : 'normal',
@@ -87,8 +89,12 @@ const baseTextStyles = (theme: Theme, a: TextStyleArgs): CSSObject => ({
 
 // Captions and code shrink relative to the body scale, but only at the default
 // size — an explicit size wins.
-const sizeOverride = (customSize: string | undefined, atDefault: string): string | undefined =>
-  (customSize ?? 'md') === 'md' ? atDefault : SIZE_MAP[customSize ?? 'md']?.fontSize;
+const sizeOverride = (
+  theme: Theme,
+  customSize: string | undefined,
+  atDefault: number,
+): string | undefined =>
+  (customSize ?? 'md') === 'md' ? rem(theme, atDefault) : fontSizeFor(theme, customSize);
 
 const textVariantStyles = (theme: Theme, a: TextStyleArgs, base: CSSObject): CSSObject => {
   const weight = a.customWeight ?? 'normal';
@@ -104,7 +110,7 @@ const textVariantStyles = (theme: Theme, a: TextStyleArgs, base: CSSObject): CSS
     case 'caption':
       return {
         ...base,
-        fontSize: sizeOverride(a.customSize, px(CAPTION_FONT_SIZE)),
+        fontSize: sizeOverride(theme, a.customSize, CAPTION_FONT_SIZE),
         opacity: CAPTION_OPACITY,
         letterSpacing: `${CAPTION_LETTER_SPACING_EM}em`,
       };
@@ -112,7 +118,7 @@ const textVariantStyles = (theme: Theme, a: TextStyleArgs, base: CSSObject): CSS
       return {
         ...base,
         fontFamily: 'Monaco, Menlo, "Ubuntu Mono", "Courier New", monospace',
-        fontSize: sizeOverride(a.customSize, px(CODE_FONT_SIZE)),
+        fontSize: sizeOverride(theme, a.customSize, CODE_FONT_SIZE),
         backgroundColor: alpha(theme.palette.primary.main, CODE_BACKGROUND_ALPHA),
         padding: `${CODE_PADDING.vertical}px ${CODE_PADDING.horizontal}px`,
         borderRadius: theme.shape.borderRadius * CODE_RADIUS_FACTOR,

package/src/components/utility/AnimatedIcon/AnimatedIcon.styles.ts

@@ -23,13 +23,15 @@ import {
 } from './AnimatedIcon.animations';
 import type { AnimationSize, AnimationVariant } from './AnimatedIcon.types';
 import { neutralTones, shadowInk, sheen } from '../../../tokens/ink';
+import { rem } from '../../../tokens/relative';
 
-export const sizeConfigs: Record<AnimationSize, { size: number; fontSize: number }> = {
-  xs: { size: 12, fontSize: 10 },
-  sm: { size: 24, fontSize: 20 },
-  md: { size: 32, fontSize: 28 },
-  lg: { size: 48, fontSize: 44 },
-  xl: { size: 64, fontSize: 60 },
+/** Per size: the ring's edge and the glyph's edge (its font size, width and height), in design px. */
+export const sizeConfigs: Record<AnimationSize, { size: number; glyph: number }> = {
+  xs: { size: 12, glyph: 10 },
+  sm: { size: 24, glyph: 20 },
+  md: { size: 32, glyph: 28 },
+  lg: { size: 48, glyph: 44 },
+  xl: { size: 64, glyph: 60 },
 };
 
 /**
@@ -185,7 +187,7 @@ export const iconSx = (theme: Theme, flags: IconStyleFlags): CSSObject => {
 
   // Both selectors size the same glyph — MUI icons render an MuiSvgIcon-root,
   // a bare child renders an svg.
-  const glyphSize = { fontSize: $fontSize, width: $fontSize, height: $fontSize };
+  const glyphSize = { fontSize: rem(theme, $fontSize), width: $fontSize, height: $fontSize };
 
   return {
     display: 'inline-flex',

package/src/components/utility/AnimatedIcon/AnimatedIcon.tsx

@@ -43,7 +43,7 @@ export const AnimatedIcon: FC<AnimatedIconProps> = (props) => {
   return (
     <AnimationContainer
       $size={config.size}
-      $fontSize={config.fontSize}
+      $fontSize={config.glyph}
       $animationVariant={variant}
       $duration={duration}
       $delay={delay}

package/src/components/utility/WorkflowStep/WorkflowStep.parts.tsx

@@ -12,6 +12,7 @@ import type {
   WorkflowStepProps,
 } from './WorkflowStep.types';
 import { neutralTones } from '../../../tokens/ink';
+import { rem } from '../../../tokens/relative';
 
 // `outlined` shows the surface through a coloured rim; the other three fill it and
 // differ only in what border they keep.
@@ -84,7 +85,7 @@ const StepIndicator = styled(Box, {
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    fontSize: theme.typography.caption.fontSize,
+    fontSize: rem(theme, 12),
     fontWeight: theme.typography.fontWeightMedium,
     cursor: interactive && !disabled ? 'pointer' : 'default',
     transition: animated
@@ -134,7 +135,7 @@ const StepContent = styled(Box, {
   flex: 1,
 
   '& .step-title': {
-    fontSize: theme.typography.body2.fontSize,
+    fontSize: rem(theme, 14),
     fontWeight: theme.typography.fontWeightMedium,
     color: theme.palette.text.primary,
     marginBottom: theme.spacing(0.5),
@@ -145,7 +146,7 @@ const StepContent = styled(Box, {
   },
 
   '& .step-description': {
-    fontSize: theme.typography.caption.fontSize,
+    fontSize: rem(theme, 12),
     color: theme.palette.text.secondary,
     overflow: 'hidden',
     textOverflow: 'ellipsis',

package/src/icons/Icon.tsx

@@ -5,6 +5,7 @@ import { iconFill } from './icon-color';
 import { iconSize, type IconBaseProps } from './Icon.types';
 import { ICON_PATHS } from './paths.generated';
 import { resolveTestId } from '../platform/test-id';
+import { sxRem } from '../tokens/relative';
 import { useUiTheme } from '../provider/use-ui-theme';
 
 export interface IconProps extends IconBaseProps {
@@ -20,7 +21,6 @@ export interface IconProps extends IconBaseProps {
 export const Icon = React.forwardRef<SVGSVGElement, IconProps>(
   ({ name, size, color, label, className, style, ...rest }, ref) => {
     const theme = useUiTheme();
-    const px = iconSize(size);
     const fill = iconFill(theme, color, 'currentColor');
     const testId = resolveTestId(rest, `icon-${name}`);
 
@@ -30,7 +30,7 @@ export const Icon = React.forwardRef<SVGSVGElement, IconProps>(
         viewBox="0 0 24 24"
         className={className}
         style={style}
-        sx={{ fontSize: px, color: fill }}
+        sx={{ fontSize: sxRem(iconSize(size)), color: fill }}
         titleAccess={label}
         aria-hidden={label ? undefined : true}
         data-testid={testId}

package/dist/chunk-2BFUUUDS.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/data-display/Lightbox/Lightbox.constants.ts"],"sourcesContent":["import type { Theme } from '@mui/material/styles/index.js';\n\nimport { onMedia, scrim, sheen } from '../../../tokens/ink';\n\nexport const MIN_ZOOM = 0.5;\nexport const MAX_ZOOM = 5;\nexport const ZOOM_STEP = 1.2;\n// Each wheel notch is ~100 deltaY, so this makes one notch a 1x zoom change.\nexport const WHEEL_ZOOM_FACTOR = 0.01;\n\nexport const DEFAULT_AUTOPLAY_INTERVAL_MS = 4000;\nexport const MIN_SWIPE_DISTANCE = 50;\nexport const OVERLAY_Z_INDEX = 1000;\n\nconst SCRIM = (theme: Theme): string => scrim(theme, 0.5);\nconst SCRIM_HOVER = (theme: Theme): string => scrim(theme, 0.7);\n\nexport const overlayButtonSx = {\n  color: onMedia,\n  backgroundColor: SCRIM,\n  '&:hover': { backgroundColor: SCRIM_HOVER },\n} as const;\n\n// The arrows drop their hover treatment at the ends of a non-looping gallery and\n// dim instead, so a disabled arrow does not look pressable.\nexport const navButtonSx = {\n  color: onMedia,\n  backgroundColor: SCRIM,\n  '&:hover:not(:disabled)': { backgroundColor: SCRIM_HOVER },\n  '&:disabled': { color: (theme: Theme) => sheen(theme, 0.3) },\n} as const;\n\nexport const captionSx = {\n  color: onMedia,\n  textAlign: 'center',\n  backgroundColor: SCRIM_HOVER,\n  borderRadius: 1,\n} as const;\n\nexport const counterSx = {\n  color: onMedia,\n  fontSize: '0.875rem',\n  backgroundColor: SCRIM,\n  borderRadius: 1,\n} as const;\n\nexport const thumbnailStripSx = {\n  background: SCRIM,\n  borderRadius: 1,\n} as const;\n\n// Every element gets `${dataTestId}-suffix` when the caller supplied an id, and\n// `lightbox-suffix` otherwise.\nexport const makeTestId =\n  (dataTestId?: string) =>\n  (suffix: string): string =>\n    dataTestId ? `${dataTestId}-${suffix}` : `lightbox-${suffix}`;\n"],"mappings":";;;;;;;AAIO,IAAM,WAAW;AACjB,IAAM,WAAW;AACjB,IAAM,YAAY;AAElB,IAAM,oBAAoB;AAE1B,IAAM,+BAA+B;AACrC,IAAM,qBAAqB;AAC3B,IAAM,kBAAkB;AAE/B,IAAM,QAAQ,CAAC,UAAyB,MAAM,OAAO,GAAG;AACxD,IAAM,cAAc,CAAC,UAAyB,MAAM,OAAO,GAAG;AAEvD,IAAM,kBAAkB;AAAA,EAC7B,OAAO;AAAA,EACP,iBAAiB;AAAA,EACjB,WAAW,EAAE,iBAAiB,YAAY;AAC5C;AAIO,IAAM,cAAc;AAAA,EACzB,OAAO;AAAA,EACP,iBAAiB;AAAA,EACjB,0BAA0B,EAAE,iBAAiB,YAAY;AAAA,EACzD,cAAc,EAAE,OAAO,CAAC,UAAiB,MAAM,OAAO,GAAG,EAAE;AAC7D;AAEO,IAAM,YAAY;AAAA,EACvB,OAAO;AAAA,EACP,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,cAAc;AAChB;AAEO,IAAM,YAAY;AAAA,EACvB,OAAO;AAAA,EACP,UAAU;AAAA,EACV,iBAAiB;AAAA,EACjB,cAAc;AAChB;AAEO,IAAM,mBAAmB;AAAA,EAC9B,YAAY;AAAA,EACZ,cAAc;AAChB;AAIO,IAAM,aACX,CAAC,eACD,CAAC,WACC,aAAa,GAAG,UAAU,IAAI,MAAM,KAAK,YAAY,MAAM;","names":[]}

package/dist/chunk-2CEV746H.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/form/HeaderButton/HeaderButton.tsx"],"sourcesContent":["'use client';\n\nimport Box from '@mui/material/Box/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport type { ButtonProps } from '@mui/material/Button/index.js';\nimport type { ReactNode } from 'react';\n\ntype Breakpoint = 'sm' | 'md' | 'lg';\n\nexport interface HeaderButtonProps {\n  /** The label — shown next to the icon on wide screens, hidden (icon-only) below `collapseBelow`. */\n  text: ReactNode;\n  /** Leading icon/image — always visible. */\n  icon: ReactNode;\n  /** Optional trailing icon (e.g. a dropdown chevron) — always visible. */\n  endIcon?: ReactNode;\n  onClick?: ButtonProps['onClick'];\n  /** MUI variant. @default 'contained' */\n  variant?: ButtonProps['variant'];\n  /** MUI color. @default 'primary' */\n  color?: ButtonProps['color'];\n  disabled?: boolean;\n  /** Width below which the button collapses to icon-only. @default 'md' */\n  collapseBelow?: Breakpoint;\n  fullWidth?: boolean;\n  'aria-haspopup'?: ButtonProps['aria-haspopup'];\n  'aria-expanded'?: boolean;\n  dataTestId?: string;\n}\n\n/**\n * A page-header action that adapts to width: below `collapseBelow` it renders\n * ONLY its icon (compact, so several fit one line on phones); at/above it renders\n * the icon + text label. The accessible name is always `text`, so the icon-only\n * state stays labeled for screen readers.\n */\nexport function HeaderButton({\n  text,\n  icon,\n  endIcon,\n  onClick,\n  variant = 'contained',\n  color = 'primary',\n  disabled,\n  collapseBelow = 'md',\n  fullWidth,\n  dataTestId,\n  ...aria\n}: HeaderButtonProps): React.JSX.Element {\n  // Hide the label below the breakpoint; keep the icon(s). `gap` collapses around\n  // the display:none label, so on mobile it reads as a compact icon button.\n  const labelDisplay = { xs: 'none', [collapseBelow]: 'inline' };\n  const horizontalPad = { xs: 1, [collapseBelow]: 2 };\n  return (\n    <Button\n      variant={variant}\n      color={color}\n      size=\"medium\"\n      onClick={onClick}\n      disabled={disabled}\n      fullWidth={fullWidth}\n      aria-label={typeof text === 'string' ? text : undefined}\n      aria-haspopup={aria['aria-haspopup']}\n      aria-expanded={aria['aria-expanded']}\n      data-testid={dataTestId}\n      sx={{ minWidth: 0, gap: 0.75, px: horizontalPad, py: 1, fontSize: '1rem', textTransform: 'none' }}\n    >\n      <Box component=\"span\" sx={{ display: 'inline-flex', alignItems: 'center' }}>\n        {icon}\n      </Box>\n      <Box component=\"span\" sx={{ display: labelDisplay }}>\n        {text}\n      </Box>\n      {endIcon != null && (\n        <Box component=\"span\" sx={{ display: 'inline-flex', alignItems: 'center' }}>\n          {endIcon}\n        </Box>\n      )}\n    </Button>\n  );\n}\n"],"mappings":";AAEA,OAAO,SAAS;AAChB,OAAO,YAAY;AAmDf,SAaE,KAbF;AAlBG,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,QAAQ;AAAA,EACR;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAyC;AAGvC,QAAM,eAAe,EAAE,IAAI,QAAQ,CAAC,aAAa,GAAG,SAAS;AAC7D,QAAM,gBAAgB,EAAE,IAAI,GAAG,CAAC,aAAa,GAAG,EAAE;AAClD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAY,OAAO,SAAS,WAAW,OAAO;AAAA,MAC9C,iBAAe,KAAK,eAAe;AAAA,MACnC,iBAAe,KAAK,eAAe;AAAA,MACnC,eAAa;AAAA,MACb,IAAI,EAAE,UAAU,GAAG,KAAK,MAAM,IAAI,eAAe,IAAI,GAAG,UAAU,QAAQ,eAAe,OAAO;AAAA,MAEhG;AAAA,4BAAC,OAAI,WAAU,QAAO,IAAI,EAAE,SAAS,eAAe,YAAY,SAAS,GACtE,gBACH;AAAA,QACA,oBAAC,OAAI,WAAU,QAAO,IAAI,EAAE,SAAS,aAAa,GAC/C,gBACH;AAAA,QACC,WAAW,QACV,oBAAC,OAAI,WAAU,QAAO,IAAI,EAAE,SAAS,eAAe,YAAY,SAAS,GACtE,mBACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/chunk-2CK7SHQQ.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/form/Command/Command.tsx"],"sourcesContent":["import CloseIcon from '@mui/icons-material/Close';\nimport SearchIcon from '@mui/icons-material/Search';\nimport Box from '@mui/material/Box/index.js';\nimport Chip from '@mui/material/Chip/index.js';\nimport Dialog from '@mui/material/Dialog/index.js';\nimport DialogContent from '@mui/material/DialogContent/index.js';\nimport Divider from '@mui/material/Divider/index.js';\nimport Fade from '@mui/material/Fade/index.js';\nimport Grow from '@mui/material/Grow/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport InputAdornment from '@mui/material/InputAdornment/index.js';\nimport List from '@mui/material/List/index.js';\nimport ListItemButton from '@mui/material/ListItemButton/index.js';\nimport ListItemIcon from '@mui/material/ListItemIcon/index.js';\nimport ListItemText from '@mui/material/ListItemText/index.js';\nimport TextField from '@mui/material/TextField/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, useTheme } from '@mui/material/styles/index.js';\nimport React, { useMemo } from 'react';\n\nimport { resolveCommandProps, useCommandPalette } from './Command.hooks';\nimport { CommandEmpty, CommandLoading } from './Command.parts';\nimport { commandPaperStyles, commandSizeStyles } from './Command.styles';\nimport type {\n  CommandGroupProps,\n  CommandInputProps,\n  CommandItem,\n  CommandItemProps,\n  CommandListProps,\n  CommandProps,\n} from './Command.types';\n\nexport { CommandEmpty, CommandLoading, CommandSeparator } from './Command.parts';\n\nconst makeTestId = (dataTestId?: string) => (suffix: string) =>\n  dataTestId ? `${dataTestId}-${suffix}` : undefined;\n\nexport const Command: React.FC<CommandProps> = (rawProps) => {\n  const props = resolveCommandProps(rawProps);\n  const { open, onOpenChange, variant, dataTestId } = props;\n  const theme = useTheme();\n  const testId = makeTestId(dataTestId);\n\n  const { internalValue, filteredItems, highlightedId, handleValueChange, handleSelect, handleKeyDown } =\n    useCommandPalette(props);\n\n  return (\n    <Dialog\n      open={open}\n      onClose={() => onOpenChange?.(false)}\n      maxWidth={false}\n      PaperProps={{\n        sx: {\n          ...commandPaperStyles(theme, props),\n          ...commandSizeStyles(props.size),\n          overflow: 'hidden',\n          ...props.style,\n        },\n        className: props.className,\n        'data-testid': dataTestId,\n      }}\n      TransitionComponent={variant === 'glass' ? Fade : Grow}\n      onClick={props.onClick}\n    >\n      <Box sx={{ p: 0 }}>\n        <CommandInput\n          placeholder={props.placeholder}\n          value={internalValue}\n          onChange={handleValueChange}\n          onFocus={props.onFocus}\n          onBlur={props.onBlur}\n          disabled={props.disabled}\n          autoFocus={props.autoFocus}\n          onKeyDown={handleKeyDown}\n          dataTestId={testId('input')}\n        />\n\n        <Divider />\n\n        <DialogContent sx={{ p: 0, maxHeight: props.maxHeight, overflow: 'auto' }}>\n          <CommandBody\n            loading={props.loading}\n            items={filteredItems}\n            value={internalValue}\n            emptyMessage={props.emptyMessage}\n            onSelect={handleSelect}\n            selectedId={highlightedId}\n            showCategories={props.showCategories}\n            showShortcuts={props.showShortcuts}\n            showDescriptions={props.showDescriptions}\n            testId={testId}\n          />\n          {props.children}\n        </DialogContent>\n      </Box>\n    </Dialog>\n  );\n};\n\ntype CommandBodyProps = Pick<\n  CommandListProps,\n  'items' | 'value' | 'onSelect' | 'selectedId' | 'showCategories' | 'showShortcuts' | 'showDescriptions'\n> & {\n  loading: boolean;\n  emptyMessage: string;\n  testId: (suffix: string) => string | undefined;\n};\n\n/** Three mutually exclusive states share the scrolling area: busy, empty, or a list. */\nconst CommandBody: React.FC<CommandBodyProps> = ({ loading, emptyMessage, testId, ...list }) => {\n  if (loading) {\n    return <CommandLoading dataTestId={testId('loading')} />;\n  }\n\n  if (!list.items?.length) {\n    return <CommandEmpty message={emptyMessage} dataTestId={testId('empty')} />;\n  }\n\n  return <CommandList {...list} dataTestId={testId('list')} />;\n};\n\nexport const CommandInput: React.FC<CommandInputProps> = ({\n  placeholder,\n  value,\n  onChange,\n  onFocus,\n  onBlur,\n  disabled,\n  autoFocus,\n  onKeyDown,\n  className,\n  style,\n  dataTestId,\n}) => (\n    <TextField\n      fullWidth\n      value={value}\n      onChange={(e) => onChange?.(e.target.value)}\n      onFocus={onFocus}\n      onBlur={onBlur}\n      onKeyDown={onKeyDown}\n      placeholder={placeholder}\n      disabled={disabled}\n      autoFocus={autoFocus}\n      variant=\"standard\"\n      className={className}\n      inputProps={{\n        'data-testid': dataTestId,\n      }}\n      sx={{\n        p: 2,\n        '& .MuiInput-underline:before': { border: 'none' },\n        '& .MuiInput-underline:after': { border: 'none' },\n        ...style,\n      }}\n      InputProps={{\n        startAdornment: (\n          <InputAdornment position=\"start\">\n            <SearchIcon />\n          </InputAdornment>\n        ),\n        endAdornment: value && (\n          <InputAdornment position=\"end\">\n            <IconButton size=\"small\" onClick={() => onChange?.('')}>\n              <CloseIcon fontSize=\"small\" />\n            </IconButton>\n          </InputAdornment>\n        ),\n      }}\n    />\n  );\n\nexport const CommandList: React.FC<CommandListProps> = ({\n  items = [],\n  onSelect,\n  selectedId,\n  emptyMessage,\n  showCategories,\n  showShortcuts,\n  showDescriptions,\n  loading,\n  className,\n  style,\n  dataTestId,\n}) => {\n  const groupedItems = useMemo(() => {\n    if (!showCategories) return { '': items };\n\n    const groups: Record<string, CommandItem[]> = {};\n    items.forEach(item => {\n      const category = item.category || '';\n      if (!groups[category]) groups[category] = [];\n      groups[category].push(item);\n    });\n    return groups;\n  }, [items, showCategories]);\n\n  if (loading) return <CommandLoading dataTestId={dataTestId ? `${dataTestId}-loading` : undefined} />;\n  if (items.length === 0) return <CommandEmpty message={emptyMessage} dataTestId={dataTestId ? `${dataTestId}-empty` : undefined} />;\n\n  return (\n    <List className={className} sx={style} data-testid={dataTestId}>\n      {Object.entries(groupedItems).map(([category, categoryItems]) => (\n        <CommandGroup\n          key={category}\n          heading={category}\n          items={categoryItems}\n          onSelect={onSelect}\n          selectedId={selectedId}\n          showShortcuts={showShortcuts}\n          showDescriptions={showDescriptions}\n        />\n      ))}\n    </List>\n  );\n};\n\nexport const CommandGroup: React.FC<CommandGroupProps> = ({\n  heading,\n  items = [],\n  onSelect,\n  selectedId,\n  showShortcuts,\n  showDescriptions,\n  className,\n  style,\n  dataTestId,\n}) => {\n  const groupTestId = dataTestId || (heading ? `command-group-${heading}` : undefined);\n\n  return (\n    <Box className={className} sx={style} data-testid={groupTestId}>\n      {heading && (\n        <Typography\n          variant=\"caption\"\n          sx={{\n            px: 2,\n            py: 1,\n            display: 'block',\n            color: 'text.secondary',\n            fontWeight: 600,\n            textTransform: 'uppercase',\n          }}\n        >\n          {heading}\n        </Typography>\n      )}\n      {items.map((item) => (\n        <CommandItemComponent\n          key={item.id}\n          {...item}\n          selected={selectedId === item.id}\n          onSelect={() => onSelect?.(item)}\n          showShortcut={showShortcuts}\n          showDescription={showDescriptions}\n          dataTestId={`command-item-${item.id}`}\n        />\n      ))}\n    </Box>\n  );\n};\n\nconst CommandItemComponent: React.FC<CommandItemProps> = ({\n  label,\n  description,\n  icon,\n  shortcut,\n  disabled,\n  selected,\n  onSelect,\n  showShortcut,\n  showDescription,\n  className,\n  style,\n  dataTestId,\n}) => {\n  const theme = useTheme();\n\n  return (\n    <ListItemButton\n      onClick={onSelect}\n      disabled={disabled}\n      selected={selected}\n      className={className}\n      data-testid={dataTestId}\n      sx={{\n        py: 1.5,\n        px: 2,\n        '&:hover': {\n          backgroundColor: alpha(theme.palette.primary.main, 0.08),\n        },\n        '&.Mui-selected': {\n          backgroundColor: alpha(theme.palette.primary.main, 0.12),\n          '&:hover': {\n            backgroundColor: alpha(theme.palette.primary.main, 0.16),\n          },\n        },\n        ...style,\n      }}\n    >\n      {icon && (\n        <ListItemIcon sx={{ minWidth: 40 }}>\n          {icon}\n        </ListItemIcon>\n      )}\n\n      <ListItemText\n        primary={label}\n        secondary={showDescription && description}\n        primaryTypographyProps={{\n          fontSize: '0.875rem',\n          fontWeight: selected ? 600 : 400,\n        }}\n        secondaryTypographyProps={{\n          fontSize: '0.75rem',\n        }}\n      />\n\n      {showShortcut && shortcut && (\n        <Chip\n          label={shortcut}\n          size=\"small\"\n          variant=\"outlined\"\n          sx={{\n            height: 20,\n            fontSize: '0.7rem',\n            ml: 1,\n          }}\n        />\n      )}\n    </ListItemButton>\n  );\n};\n"],"mappings":"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","names":[]}