@12-apps/ui 2.1.0 → 3.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/ui",
-  "version": "2.1.0",
+  "version": "3.0.0",
   "license": "MIT",
   "packageManager": "pnpm@9.0.0",
   "type": "module",

package/src/components/data-display/Alert/Alert.types.ts

@@ -11,7 +11,7 @@ export interface AlertProps extends Omit<MuiAlertProps, 'variant' | 'color' | 'r
   /**
    * The color of the alert (when not using variant-specific colors)
    */
-  color?: Exclude<ColorValue, 'info'>;
+  color?: ColorValue;
   
   /**
    * Whether the alert should have a glow effect

package/src/components/data-display/Avatar/Avatar.types.ts

@@ -57,7 +57,7 @@ export interface AvatarProps extends Omit<MuiAvatarProps, 'variant'> {
   /**
    * Color of the avatar background when no image is provided
    */
-  color?: Exclude<ColorValue, 'info'>;
+  color?: ColorValue;
 
   /**
    * Whether the avatar is in a loading state

package/src/components/data-display/Avatar/Avatar.view.tsx

@@ -64,7 +64,11 @@ const getColorFromTheme = (theme: Theme, color: string): PaletteLike => {
     secondary: theme.palette.secondary,
     success: theme.palette.success,
     warning: theme.palette.warning,
-    error: theme.palette.error,
+    info: theme.palette.info,
+    // `danger`, not `error`. This map was keyed on MUI's word while the prop
+    // took the house one, so `danger` matched nothing and fell through to
+    // primary — a red avatar rendering blue, silently.
+    danger: theme.palette.error,
     neutral: { main: theme.palette.grey[700], contrastText: '#fff' },
   };
 

package/src/components/data-display/Badge/Badge.styles.ts

@@ -24,8 +24,10 @@ const getColorFromTheme = (theme: Theme, color: string) => {
     secondary: theme.palette.secondary,
     success: theme.palette.success,
     warning: theme.palette.warning,
-    error: theme.palette.error,
     info: theme.palette.info,
+    // `danger`, the house word the prop actually takes. Keyed on MUI's `error`
+    // it matched nothing and fell through to the default.
+    danger: theme.palette.error,
     neutral: {
       main: theme.palette.grey[600],
       light: theme.palette.grey[400],
@@ -74,7 +76,14 @@ export const getSizeStyles = (size: BadgeSize) => {
       fontSize: '0.875rem',
       padding: '0 8px',
       dotSize: 12,
-      iconSize: '1rem' } };
+      iconSize: '1rem' },
+    xl: {
+      minWidth: 28,
+      height: 28,
+      fontSize: '1rem',
+      padding: '0 10px',
+      dotSize: 14,
+      iconSize: '1.125rem' } };
 
   return sizeMap[size] || sizeMap.md;
 };

package/src/components/data-display/Badge/Badge.types.ts

@@ -14,7 +14,7 @@ export type BadgeVariant =
   | 'success'
   | 'warning';
 
-export type BadgeSize = Extract<SizeValue, 'xs' | 'sm' | 'md' | 'lg'>;
+export type BadgeSize = SizeValue;
 
 export interface BadgeProps extends Omit<MuiBadgeProps, 'variant' | 'color' | 'content'> {
   /**

package/src/components/data-display/Carousel/Carousel.types.ts

@@ -14,7 +14,7 @@ export interface CarouselProps {
   items: CarouselItem[];
   variant?: 'default' | 'glass' | 'gradient' | 'elevated' | 'minimal' | 'cards';
   size?: SizeValue;
-  color?: Exclude<ColorValue, 'neutral'>;
+  color?: ColorValue;
   autoPlay?: boolean;
   autoPlayInterval?: number;
   loop?: boolean;
@@ -51,7 +51,7 @@ export interface CarouselIndicatorsProps {
   activeIndex: number;
   onSelect: (index: number) => void;
   position?: 'top' | 'bottom' | 'left' | 'right';
-  color?: Exclude<ColorValue, 'neutral'>;
+  color?: ColorValue;
   variant?: 'dots' | 'lines' | 'numbers';
   className?: string;
   style?: CSSProperties;
@@ -64,8 +64,8 @@ export interface CarouselArrowsProps {
   disabled?: boolean;
   disablePrev?: boolean;
   disableNext?: boolean;
-  color?: Exclude<ColorValue, 'neutral'>;
-  size?: Extract<SizeValue, 'sm' | 'md' | 'lg'>;
+  color?: ColorValue;
+  size?: SizeValue;
   className?: string;
   style?: CSSProperties;
 }

package/src/components/data-display/Chart/Chart.types.ts

@@ -28,7 +28,7 @@ export interface ChartProps {
   type?: ChartType;
   variant?: 'default' | 'glass' | 'gradient' | 'elevated' | 'minimal' | 'neon';
   size?: SizeValue;
-  color?: Exclude<ColorValue, 'neutral'>;
+  color?: ColorValue;
   height?: number;
   width?: number | string;
   glow?: boolean;

package/src/components/data-display/Chart/ChartSpec.types.ts

@@ -18,7 +18,7 @@ export type ChartSpecType = 'line' | 'bar' | 'area' | 'pie' | 'donut';
  * The house vocabulary minus `neutral`: a data series is always an accent, and
  * an unaccented series would be indistinguishable from the grid it sits on.
  */
-export type ChartSemanticColor = Exclude<ColorValue, 'neutral'>;
+export type ChartSemanticColor = ColorValue;
 
 /**
  * Number formatting applied to tooltip values and the y axis.

package/src/components/data-display/Chip/Chip.tsx

@@ -15,7 +15,7 @@ import type { ChipProps } from './Chip.types';
 
 /** MUI draws two chip sizes; ours are the house abbreviations for them. */
 const muiSizeFor = (size: NonNullable<ChipProps['size']>): 'small' | 'medium' =>
-  size === 'sm' ? 'small' : 'medium';
+  size === 'xs' || size === 'sm' ? 'small' : 'medium';
 
 type MuiChipColor =
   | 'primary'

package/src/components/data-display/Chip/Chip.types.ts

@@ -13,10 +13,13 @@ export type ChipVariant = 'filled' | 'outlined';
  * `ChipSize` nowhere and reached MUI as an unknown value, and the chip silently
  * rendered at the default `medium`. Twelve of them are doing that today.
  *
- * Only two entries, because a MUI chip only draws two. Inventing `lg` here would
- * put a size in the type that nothing can render.
+ * All five stops, and `Chip.tsx` draws them: MUI gives a chip two heights, so
+ * `xs`/`sm` map to small and `md` and up to medium. Offering fewer than five
+ * here is what made callers write `size="sm"` against a type that did not have
+ * it — the scale is the vocabulary, and a component that speaks a dialect of it
+ * is the problem, not the solution.
  */
-export type ChipSize = Extract<SizeValue, 'sm' | 'md'>;
+export type ChipSize = SizeValue;
 
 /**
  * The colours a chip can draw — THE HOUSE VOCABULARY, identical to `ButtonProps`.

package/src/components/data-display/DateTimeDisplay/DateTimeDisplay.types.ts

@@ -26,7 +26,7 @@ export interface DateTimeDisplayProps {
    * Size variant
    * @default 'medium'
    */
-  size?: Extract<SizeValue, 'sm' | 'md' | 'lg'>;
+  size?: SizeValue;
   /**
    * Whether to show a tooltip with full date/time
    * @default true

package/src/components/data-display/InteractiveTooltip/InteractiveTooltip.types.ts

@@ -20,7 +20,7 @@ export interface InteractiveTooltipProps extends Omit<MuiTooltipProps, 'variant'
   /**
    * Size of the tooltip
    */
-  size?: Extract<SizeValue, 'sm' | 'md' | 'lg'>;
+  size?: SizeValue;
 
   /**
    * Maximum width of the tooltip

package/src/components/data-display/LoadingState/LoadingState.helpers.ts

@@ -4,15 +4,19 @@ export const SIZE_MAP: Record<
   LoadingStateSize,
   { spinner: number; text: 'body2' | 'body1' | 'h6' }
 > = {
+  xs: { spinner: 16, text: 'body2' },
   sm: { spinner: 24, text: 'body2' },
   md: { spinner: 40, text: 'body1' },
   lg: { spinner: 56, text: 'h6' },
+  xl: { spinner: 64, text: 'h6' },
 };
 
 export const SKELETON_ROW_HEIGHT: Record<LoadingStateSize, number> = {
+  xs: 14,
   sm: 20,
   md: 28,
   lg: 36,
+  xl: 44,
 };
 
 type LoadingStateDefaultedKeys = 'variant' | 'size' | 'skeletonRows';

package/src/components/data-display/LoadingState/LoadingState.types.ts

@@ -1,6 +1,6 @@
 import type { SizeValue } from '../../../tokens/scales';
 export type LoadingStateVariant = 'spinner' | 'skeleton';
-export type LoadingStateSize = Extract<SizeValue, 'sm' | 'md' | 'lg'>;
+export type LoadingStateSize = SizeValue;
 
 export interface LoadingStateProps {
   /**

package/src/components/data-display/Progress/Progress.styles.ts

@@ -34,6 +34,7 @@ export const getColorFromTheme = (theme: Theme, color: string): PaletteColor =>
     success: theme.palette.success,
     warning: theme.palette.warning,
     error: theme.palette.error,
+    info: theme.palette.info,
     danger: theme.palette.error, // Add danger alias
   };
 
@@ -42,9 +43,11 @@ export const getColorFromTheme = (theme: Theme, color: string): PaletteColor =>
 };
 
 const SIZE_MAP: Record<ProgressSize, { height: number; circularSize: number; fontSize: string }> = {
+  xs: { height: 2, circularSize: 24, fontSize: '0.625rem' },
   sm: { height: 4, circularSize: 32, fontSize: '0.75rem' },
   md: { height: 6, circularSize: 40, fontSize: '0.875rem' },
   lg: { height: 8, circularSize: 48, fontSize: '1rem' },
+  xl: { height: 10, circularSize: 56, fontSize: '1.125rem' },
 };
 
 export const getSizeStyles = (size?: ProgressSize) => SIZE_MAP[size as ProgressSize] || SIZE_MAP.md;

package/src/components/data-display/Progress/Progress.types.ts

@@ -2,7 +2,7 @@ import type { ColorValue, SizeValue } from '../../../tokens/scales';
 import type { LinearProgressProps } from '@mui/material';
 
 export type ProgressVariant = 'linear' | 'circular' | 'segmented' | 'gradient' | 'glass';
-export type ProgressSize = Extract<SizeValue, 'sm' | 'md' | 'lg'>;
+export type ProgressSize = SizeValue;
 
 export interface ProgressProps extends Omit<LinearProgressProps, 'variant' | 'color'> {
   /**
@@ -18,7 +18,7 @@ export interface ProgressProps extends Omit<LinearProgressProps, 'variant' | 'co
   /**
    * The color of the progress
    */
-  color?: Exclude<ColorValue, 'info'>;
+  color?: ColorValue;
 
   /**
    * Whether the progress should have a glow effect

package/src/components/data-display/Sheet/Sheet.types.ts

@@ -14,7 +14,7 @@ export interface SheetProps {
    * "the whole viewport", so it extends rather than replaces.
    */
   size?: SizeValue | 'full';
-  color?: Exclude<ColorValue, 'neutral'>;
+  color?: ColorValue;
   glow?: boolean;
   pulse?: boolean;
   glass?: boolean;

package/src/components/data-display/Stepper/Stepper.tsx

@@ -8,6 +8,18 @@ import {
 import React from 'react';
 
 import type { Step, StepItemProps, StepperProps } from './Stepper.types';
+import type { SizeValue } from '../../../tokens/scales';
+
+/**
+ * The five house stops, drawn rather than collapsed.
+ *
+ * These were two-way ternaries on `sm`, which is what a two-value size prop
+ * allows; with the full scale they have to be real values or the three new
+ * stops would render identically to `md` and the prop would be a lie.
+ */
+const STEP_MIN_WIDTH: Record<SizeValue, number> = { xs: 44, sm: 56, md: 80, lg: 96, xl: 112 };
+const STEP_ICON_SIZE: Record<SizeValue, number> = { xs: 14, sm: 18, md: 24, lg: 30, xl: 36 };
+
 
 const StepperRoot = styled(Box, {
   shouldForwardProp: (prop) => prop !== 'orientation',
@@ -37,12 +49,12 @@ const StepItem = styled(Box, {
 }));
 
 /** Circle diameter per size. */
-const CIRCLE_SIZE = { sm: 32, md: 48 } as const;
+const CIRCLE_SIZE: Record<SizeValue, number> = { xs: 24, sm: 32, md: 48, lg: 60, xl: 72 };
 
 const StepButton = styled(Button, {
   shouldForwardProp: (prop) =>
     !['isActive', 'isCompleted', 'clickable', 'stepSize'].includes(prop as string),
-})<{ isActive: boolean; isCompleted: boolean; clickable: boolean; stepSize: 'sm' | 'md' }>(
+})<{ isActive: boolean; isCompleted: boolean; clickable: boolean; stepSize: SizeValue }>(
   ({ theme, isActive, isCompleted, clickable, stepSize }) => ({
     minWidth: CIRCLE_SIZE[stepSize],
     width: CIRCLE_SIZE[stepSize],
@@ -80,7 +92,7 @@ const StepButton = styled(Button, {
 const StepConnector = styled(Box, {
   shouldForwardProp: (prop) =>
     !['orientation', 'isCompleted', 'size'].includes(prop as string),
-})<{ orientation: 'horizontal' | 'vertical'; isCompleted: boolean; size: 'sm' | 'md' }>(
+})<{ orientation: 'horizontal' | 'vertical'; isCompleted: boolean; size: SizeValue }>(
   ({ theme, orientation, isCompleted, size }) => ({
     backgroundColor: isCompleted ? theme.palette.primary.main : theme.palette.grey[300],
     transition: theme.transitions.create('background-color', {
@@ -115,7 +127,7 @@ const StepLabel = styled(Box, {
   marginTop: orientation === 'horizontal' ? 8 : 0,
 }));
 
-type StepSize = 'sm' | 'md';
+type StepSize = SizeValue;
 type LabelVariant = 'caption' | 'body2';
 
 /** Space-joined state classes for a step (active / completed / optional). */
@@ -132,7 +144,7 @@ function stepClasses(isActive: boolean, isCompleted: boolean, optional?: boolean
 /** The circle content-column width per orientation/size. */
 function contentSx(orientation: 'horizontal' | 'vertical', size: StepSize) {
   return orientation === 'horizontal'
-    ? { minWidth: size === 'sm' ? 56 : 80, maxWidth: 150, flex: '0 1 auto' }
+    ? { minWidth: STEP_MIN_WIDTH[size], maxWidth: 150, flex: '0 1 auto' }
     : { flexShrink: 0 };
 }
 
@@ -162,7 +174,7 @@ const StepCircle: React.FC<
       data-testid={`stepper-step-icon-${index}`}
     >
       {isCompleted ? (
-        <CheckCircle sx={{ fontSize: size === 'sm' ? 18 : 24 }} />
+        <CheckCircle sx={{ fontSize: STEP_ICON_SIZE[size] }} />
       ) : (
         <Typography variant={labelVariant} fontWeight="bold">
           {index + 1}

package/src/components/data-display/Stepper/Stepper.types.ts

@@ -41,7 +41,7 @@ export interface StepperProps {
    * takes far less vertical space — useful above the fold on mobile checkouts.
    * @default 'md'
    */
-  size?: Extract<SizeValue, 'sm' | 'md'>;
+  size?: SizeValue;
   
   /**
    * Navigation variant controlling step access
@@ -89,7 +89,7 @@ export interface StepItemProps {
   isCompleted: boolean;
   isLast: boolean;
   orientation: 'horizontal' | 'vertical';
-  size: 'sm' | 'md';
+  size: SizeValue;
   variant: 'linear' | 'non-linear';
   clickable: boolean;
   onStepClick?: (id: string) => void;

package/src/components/data-display/Tooltip/Tooltip.types.ts

@@ -20,7 +20,7 @@ export interface TooltipProps extends Omit<MuiTooltipProps, 'variant'> {
   /**
    * Size of the tooltip
    */
-  size?: Extract<SizeValue, 'sm' | 'md' | 'lg'>;
+  size?: SizeValue;
 
   /**
    * Maximum width of the tooltip

package/src/components/form/Button/Button.styles.ts

@@ -46,6 +46,7 @@ export const getColorFromTheme = (theme: Theme, color: string): ColorPalette =>
     secondary: theme.palette.secondary as ColorPalette,
     success: theme.palette.success as ColorPalette,
     warning: theme.palette.warning as ColorPalette,
+    info: theme.palette.info as ColorPalette,
     danger: theme.palette.error as ColorPalette,
   };
 

package/src/components/form/Command/Command.types.ts

@@ -23,7 +23,7 @@ export interface CommandProps {
   onSelect?: (item: CommandItem) => void;
   variant?: 'default' | 'glass' | 'gradient' | 'minimal' | 'elevated';
   size?: SizeValue;
-  color?: Exclude<ColorValue, 'neutral'>;
+  color?: ColorValue;
   glow?: boolean;
   pulse?: boolean;
   loading?: boolean;

package/src/components/form/CreatableSelect/CreatableSelect.tsx

@@ -9,6 +9,7 @@ import { useId, useMemo } from 'react';
 
 import { FormControl, FormLabel, FormMessage } from '../Form';
 import type { CreatableSelectOption, CreatableSelectProps } from './CreatableSelect.types';
+import type { SizeValue } from '../../../tokens/scales';
 
 /** Internal option shape: a real option, or the synthetic "create new" row. */
 interface InternalOption extends CreatableSelectOption {
@@ -25,7 +26,9 @@ const filterOptions = createFilterOptions<InternalOption>();
 const INDENT_STEP = 16;
 
 /** `sm`/`md` → MUI's own scale, the same mapping {@link Input} uses. */
-const MUI_SIZE = { sm: 'small', md: 'medium' } as const;
+// All five house stops onto MUI's two. `xs`/`sm` draw small; `md` and up draw
+// medium, because an autocomplete field has no third or fourth height to give.
+const MUI_SIZE = { xs: 'small', sm: 'small', md: 'medium', lg: 'medium', xl: 'medium' } as const;
 
 /** Match the outlined border treatment of `Input` so siblings look identical. */
 const fieldSx = {
@@ -92,7 +95,7 @@ function renderField(
     placeholder?: string;
     error?: string;
     loading: boolean;
-    size: 'sm' | 'md';
+    size: SizeValue;
     dataTestId: string;
   },
 ): React.JSX.Element {

package/src/components/form/CreatableSelect/CreatableSelect.types.ts

@@ -45,7 +45,7 @@ export interface CreatableSelectProps {
    * Control height, matching {@link Input}'s scale so the two line up when they
    * share a grid row (default: `md`).
    */
-  size?: Extract<SizeValue, 'sm' | 'md'>;
+  size?: SizeValue;
   /** Base test id; the input is `<dataTestId>-input`. */
   dataTestId?: string;
 }

package/src/components/form/Input/Input.styles.ts

@@ -34,10 +34,14 @@ export const muiVariantFor = (variant: InputVariant): 'outlined' | 'filled' | 's
   }
 };
 
+// MUI gives a text field two heights, so the five house stops are drawn as two
+// plus padding: `xs` tightens below small, `lg`/`xl` open up above medium.
 export const SIZE_MAP = {
+  xs: { size: 'small' as const, sx: { '& .MuiInputBase-input': { padding: '6px 10px' } } },
   sm: { size: 'small' as const },
   md: { size: 'medium' as const },
   lg: { size: 'medium' as const, sx: { '& .MuiInputBase-input': { padding: '16px 14px' } } },
+  xl: { size: 'medium' as const, sx: { '& .MuiInputBase-input': { padding: '20px 16px' } } },
 };
 
 export const glowStyles = (theme: Theme): CSSObject => ({

package/src/components/form/Input/Input.types.ts

@@ -4,7 +4,7 @@ import type { InputHTMLAttributes, ReactNode } from 'react';
 import type React from 'react';
 
 export type InputVariant = 'outlined' | 'filled' | 'glass' | 'underline' | 'gradient';
-export type InputSize = Extract<SizeValue, 'sm' | 'md' | 'lg'>;
+export type InputSize = SizeValue;
 
 export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'color'> {
   variant?: InputVariant;

package/src/components/form/InputOTP/InputOTP.styles.ts

@@ -23,6 +23,7 @@ const namedPalette = (theme: Theme, color: string): ColorPalette => {
     secondary: theme.palette.secondary,
     success: theme.palette.success,
     warning: theme.palette.warning,
+    info: theme.palette.info,
     danger: theme.palette.error,
   };
 

package/src/components/form/InputOTP/InputOTP.types.ts

@@ -9,7 +9,7 @@ export interface InputOTPProps {
   /**
    * The color theme of the OTP input
    */
-  color?: Exclude<ColorValue, 'info'>;
+  color?: ColorValue;
   
   /**
    * The size of the OTP input

package/src/components/form/RadioGroup/RadioGroup.styles.ts

@@ -29,6 +29,7 @@ const namedPalette = (theme: Theme, color: string): ColorPalette => {
     secondary: theme.palette.secondary,
     success: theme.palette.success,
     warning: theme.palette.warning,
+    info: theme.palette.info,
     danger: theme.palette.error,
   };
 

package/src/components/form/RadioGroup/RadioGroup.types.ts

@@ -19,7 +19,7 @@ export interface RadioGroupProps extends Omit<MuiRadioGroupProps, 'color'> {
   /**
    * The color theme of the radio group
    */
-  color?: Exclude<ColorValue, 'info'>;
+  color?: ColorValue;
 
   /**
    * The size of the radio group

package/src/components/form/Select/Select.types.ts

@@ -38,7 +38,7 @@ export interface SelectProps extends Omit<MuiSelectProps, 'variant' | 'size'> {
    * Size of the select component
    * @default 'medium'
    */
-  size?: Extract<SizeValue, 'sm' | 'md'>;
+  size?: SizeValue;
   /**
    * Placeholder text when no option is selected
    */

package/src/components/form/Slider/Slider.styles.ts

@@ -25,6 +25,7 @@ const namedPalette = (theme: Theme, color: string): ColorPalette => {
     secondary: theme.palette.secondary,
     success: theme.palette.success,
     warning: theme.palette.warning,
+    info: theme.palette.info,
     danger: theme.palette.error,
   };
 

package/src/components/form/Slider/Slider.types.ts

@@ -10,7 +10,7 @@ export interface SliderProps extends Omit<MuiSliderProps, 'color' | 'size'> {
   /**
    * The color theme of the slider
    */
-  color?: Exclude<ColorValue, 'info'>;
+  color?: ColorValue;
 
   /**
    * The size of the slider

package/src/components/form/Switch/Switch.styles.ts

@@ -35,6 +35,7 @@ const namedPalette = (theme: Theme, color: string): ColorPalette => {
     secondary: theme.palette.secondary,
     success: theme.palette.success,
     warning: theme.palette.warning,
+    info: theme.palette.info,
     danger: theme.palette.error,
   };
 

package/src/components/form/Switch/Switch.types.ts

@@ -11,7 +11,7 @@ export interface SwitchProps extends Omit<MuiSwitchProps, 'color' | 'size'> {
   /**
    * The color theme of the switch
    */
-  color?: Exclude<ColorValue, 'info'>;
+  color?: ColorValue;
   
   /**
    * The size of the switch

package/src/components/form/Textarea/Textarea.styles.ts

@@ -80,6 +80,7 @@ export const getColorFromTheme = (theme: Theme, color: string): ResolvedPalette
     secondary: theme.palette.secondary,
     success: theme.palette.success,
     warning: theme.palette.warning,
+    info: theme.palette.info,
     danger: theme.palette.error,
   };
 

package/src/components/form/Textarea/Textarea.types.ts

@@ -11,7 +11,7 @@ export interface TextareaProps extends Omit<TextareaAutosizeProps, 'variant' | '
   /**
    * The color theme of the textarea
    */
-  color?: Exclude<ColorValue, 'info'>;
+  color?: ColorValue;
   
   /**
    * The size of the textarea

package/src/components/form/Toggle/Toggle.styles.ts

@@ -42,6 +42,7 @@ export const getColorFromTheme = (theme: Theme, color: string): TogglePalette =>
     secondary: theme.palette.secondary,
     success: theme.palette.success,
     warning: theme.palette.warning,
+    info: theme.palette.info,
     danger: theme.palette.error,
   };
 

package/src/components/form/Toggle/Toggle.types.ts

@@ -11,7 +11,7 @@ export interface ToggleProps extends Omit<ToggleButtonProps, 'color' | 'size'> {
   /**
    * The color theme of the toggle
    */
-  color?: Exclude<ColorValue, 'info'>;
+  color?: ColorValue;
   
   /**
    * The size of the toggle

package/src/components/form/ToggleGroup/ToggleGroup.tsx

@@ -20,6 +20,7 @@ const getColorFromTheme = (theme: Theme, color: string) => {
     secondary: theme.palette.secondary,
     success: theme.palette.success,
     warning: theme.palette.warning,
+    info: theme.palette.info,
     danger: theme.palette.error,
   };
 

package/src/components/form/ToggleGroup/ToggleGroup.types.ts

@@ -18,7 +18,7 @@ export interface ToggleGroupProps extends Omit<ToggleButtonGroupProps, 'color' |
   /**
    * The color theme of the toggle group
    */
-  color?: Exclude<ColorValue, 'info'>;
+  color?: ColorValue;
 
   /**
    * The size of the toggle group

package/src/components/navigation/Breadcrumbs/Breadcrumbs.styles.tsx

@@ -207,6 +207,9 @@ export const breadcrumbLinkStyles = ({
       padding: theme.spacing(0.375, 0.5) } });
 
 export const sizeIconMap = {
-  sm: 'small' as const,
-  md: 'small' as const,
-  lg: 'medium' as const };
+  xs: 'small',
+  sm: 'small',
+  md: 'small',
+  lg: 'medium',
+  xl: 'medium',
+} as const;

package/src/components/navigation/Breadcrumbs/Breadcrumbs.types.ts

@@ -106,7 +106,7 @@ export interface BreadcrumbsProps extends Omit<MuiBreadcrumbsProps, 'separator'>
    * Size of the breadcrumbs
    * @default 'md'
    */
-  size?: Extract<SizeValue, 'sm' | 'md' | 'lg'>;
+  size?: SizeValue;
   
   /**
    * Color scheme for separators and accents

package/src/components/navigation/ContextMenu/ContextMenu.types.ts

@@ -83,7 +83,7 @@ export interface ContextMenuProps extends Omit<MenuProps, 'open' | 'anchorEl' |
   /**
    * Size of the menu items
    */
-  size?: Extract<SizeValue, 'sm' | 'md' | 'lg'>;
+  size?: SizeValue;
   
   /**
    * Custom className for the trigger element

package/src/components/navigation/DropdownMenu/DropdownMenu.types.ts

@@ -102,7 +102,7 @@ export interface DropdownMenuProps extends Omit<MenuProps, 'open' | 'variant'> {
   /**
    * Size of the menu items
    */
-  size?: Extract<SizeValue, 'sm' | 'md' | 'lg'>;
+  size?: SizeValue;
   
   /**
    * Maximum height of the menu

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

@@ -86,7 +86,7 @@ export interface NavigationMenuProps {
   /**
    * Size of the menu items
    */
-  size?: Extract<SizeValue, 'sm' | 'md' | 'lg'>;
+  size?: SizeValue;
 
   /**
    * Minimal style with no borders, shadows, or container backgrounds

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

@@ -11,7 +11,7 @@ export interface PaginationProps extends Omit<MuiPaginationProps, 'variant' | 's
   /**
    * Size of the pagination buttons
    */
-  size?: Extract<SizeValue, 'sm' | 'md' | 'lg'>;
+  size?: SizeValue;
   
   /**
    * Current page number

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

@@ -58,7 +58,7 @@ export interface TabsProps extends Omit<MuiTabsProps, 'variant' | 'children' | '
   /**
    * Size of the tabs
    */
-  size?: Extract<SizeValue, 'sm' | 'md' | 'lg'>;
+  size?: SizeValue;
   
   /**
    * Array of tab items

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

@@ -20,6 +20,7 @@ const getColorFromTheme = (theme: Theme, color: string) => {
     secondary: theme.palette.secondary,
     success: theme.palette.success,
     warning: theme.palette.warning,
+    info: theme.palette.info,
     danger: theme.palette.error,
   };
 

package/src/components/typography/Blockquote/Blockquote.types.ts

@@ -7,6 +7,6 @@ export interface BlockquoteProps extends React.HTMLAttributes<HTMLElement> {
   variant?: BlockquoteVariant;
   author?: string;
   source?: string;
-  color?: Exclude<ColorValue, 'info'>;
+  color?: ColorValue;
   children: React.ReactNode;
 }

package/src/components/typography/Code/Code.types.ts

@@ -8,6 +8,6 @@ export interface CodeProps extends React.HTMLAttributes<HTMLElement> {
   language?: string;
   copyable?: boolean;
   lineNumbers?: boolean;
-  size?: Extract<SizeValue, 'xs' | 'sm' | 'md' | 'lg'>;
+  size?: SizeValue;
   children: React.ReactNode;
 }

package/src/components/typography/Heading/Heading.styles.ts

@@ -1,24 +1,32 @@
 import type { CSSObject, Theme } from '@mui/material';
 
 import type { HeadingProps } from './Heading.types';
+import type { ColorValue } from '../../../tokens/scales';
 
 type Level = NonNullable<HeadingProps['level']>;
 type Weight = NonNullable<HeadingProps['weight']>;
 
-const getColorFromTheme = (theme: Theme, color: string): string => {
+// Exhaustive over ColorValue, and deliberately without a fallback. The map
+// happened to hold all seven already, but it was `Record<string, string>` with
+// `|| text.primary` behind it — so nothing kept it that way, and the eighth
+// colour would have rendered as ordinary body text with no complaint. That is
+// the failure this whole vocabulary exists to make impossible; `Text` was
+// tightened the same way and this one was missed.
+const getColorFromTheme = (theme: Theme, color: ColorValue): string => {
   if (color === 'neutral') {
     return theme.palette.text.primary;
   }
 
-  const colorMap: Record<string, string> = {
+  const colorMap: Record<Exclude<ColorValue, 'neutral'>, string> = {
     primary: theme.palette.primary.main,
     secondary: theme.palette.secondary.main,
     success: theme.palette.success.main,
     warning: theme.palette.warning.main,
+    info: theme.palette.info.main,
     danger: theme.palette.error.main,
   };
 
-  return colorMap[color] || theme.palette.text.primary;
+  return colorMap[color];
 };
 
 const WEIGHTS: Record<Weight, number> = {
@@ -50,22 +58,30 @@ const PRIMARY_STOPS = (theme: Theme): [string, string] => [
   theme.palette.secondary.main,
 ];
 
-const GRADIENT_STOPS: Record<string, (theme: Theme) => [string, string]> = {
+// Keyed over the whole vocabulary, with no `?? PRIMARY_STOPS` behind it. Two
+// stops were missing — `info` and `neutral` — so a gradient heading in either
+// colour painted the PRIMARY gradient and looked deliberate while ignoring the
+// prop entirely. The fallback is what hid it, so the fallback is gone.
+const GRADIENT_STOPS: Record<ColorValue, (theme: Theme) => [string, string]> = {
   primary: PRIMARY_STOPS,
   secondary: (theme) => [theme.palette.secondary.main, theme.palette.primary.main],
   success: (theme) => [theme.palette.success.light, theme.palette.success.dark],
   warning: (theme) => [theme.palette.warning.light, theme.palette.warning.dark],
+  info: (theme) => [theme.palette.info.light, theme.palette.info.dark],
   danger: (theme) => [theme.palette.error.light, theme.palette.error.dark],
+  // The grey ramp has no light/dark pair, and every stop on it is
+  // `string | undefined` under `noUncheckedIndexedAccess`.
+  neutral: (theme) => [theme.palette.grey[500] ?? '#9e9e9e', theme.palette.grey[900] ?? '#212121'],
 };
 
-const gradientFor = (theme: Theme, color: string) => {
-  const [from, to] = (GRADIENT_STOPS[color] ?? PRIMARY_STOPS)(theme);
+const gradientFor = (theme: Theme, color: ColorValue) => {
+  const [from, to] = GRADIENT_STOPS[color](theme);
   return `linear-gradient(135deg, ${from} 0%, ${to} 100%)`;
 };
 
 export interface HeadingFlags {
   customLevel?: string;
-  customColor?: string;
+  customColor?: ColorValue;
   customWeight?: string;
   gradient?: boolean;
 }

package/src/components/typography/Heading/Heading.types.ts

@@ -5,7 +5,7 @@ export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'display';
 
 export interface HeadingProps extends React.HTMLAttributes<globalThis.HTMLHeadingElement> {
   level?: HeadingLevel;
-  color?: Exclude<ColorValue, 'info'>;
+  color?: ColorValue;
   weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold';
   gradient?: boolean;
   children: React.ReactNode;

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

@@ -15,6 +15,7 @@ const getColorFromTheme = (theme: Theme, color: string) => {
     secondary: theme.palette.secondary.main,
     success: theme.palette.success.main,
     warning: theme.palette.warning.main,
+    info: theme.palette.info.main,
     danger: theme.palette.error.main,
   };
 

package/src/components/typography/Paragraph/Paragraph.types.ts

@@ -5,7 +5,7 @@ export type ParagraphVariant = 'default' | 'lead' | 'muted' | 'small';
 
 export interface ParagraphProps extends React.HTMLAttributes<globalThis.HTMLParagraphElement> {
   variant?: ParagraphVariant;
-  color?: Exclude<ColorValue, 'info'>;
+  color?: ColorValue;
   size?: SizeValue;
   children: React.ReactNode;
 }

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

@@ -6,8 +6,9 @@ import { styled } from '@mui/material/styles';
 import React from 'react';
 
 import type { TextProps } from './Text.types';
+import type { ColorValue } from '../../../tokens/scales';
 
-const getColorFromTheme = (theme: Theme, color: string) => {
+const getColorFromTheme = (theme: Theme, color: ColorValue): string => {
   if (color === 'neutral') {
     return theme.palette.text.primary;
   }
@@ -16,14 +17,19 @@ const getColorFromTheme = (theme: Theme, color: string) => {
     return theme.palette.text.secondary;
   }
 
-  const colorMap: Record<string, string> = {
+  // Exhaustive over ColorValue on purpose. It was a partial `Record<string, …>`
+  // with a silent `|| text.primary` fallback, so `info` — accepted by the type
+  // — rendered as ordinary body text. Typing the key means a colour added to
+  // the vocabulary cannot reach here without a home.
+  const colorMap: Record<Exclude<ColorValue, 'neutral' | 'secondary'>, string> = {
     primary: theme.palette.primary.main,
     success: theme.palette.success.main,
     warning: theme.palette.warning.main,
+    info: theme.palette.info.main,
     danger: theme.palette.error.main,
   };
 
-  return colorMap[color] || theme.palette.text.primary;
+  return colorMap[color];
 };
 
 const SIZE_MAP: Record<string, { fontSize: string; lineHeight: number }> = {
@@ -45,7 +51,7 @@ const WEIGHT_MAP: Record<string, number> = {
 interface TextStyleArgs {
   theme: Theme;
   customVariant?: string;
-  customColor?: string;
+  customColor?: ColorValue;
   customSize?: string;
   customWeight?: string;
   italic?: boolean;
@@ -119,7 +125,7 @@ const StyledText = styled(Typography, {
     ].includes(prop as string),
 })<{
   customVariant?: string;
-  customColor?: string;
+  customColor?: ColorValue;
   customSize?: string;
   customWeight?: string;
   italic?: boolean;

package/src/components/typography/Text/Text.types.ts

@@ -5,7 +5,7 @@ export type TextVariant = 'body' | 'heading' | 'caption' | 'code';
 
 export interface TextProps extends React.HTMLAttributes<HTMLSpanElement> {
   variant?: TextVariant;
-  color?: Exclude<ColorValue, 'info'>;
+  color?: ColorValue;
   size?: SizeValue;
   weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold';
   as?: keyof React.JSX.IntrinsicElements;

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

@@ -24,6 +24,7 @@ import {
 import type { AnimationSize, AnimationVariant } from './AnimatedIcon.types';
 
 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 },

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

@@ -20,7 +20,7 @@ export type AnimationVariant =
   | 'neonFlicker'
   | 'breathe';
 
-export type AnimationSize = Extract<SizeValue, 'sm' | 'md' | 'lg' | 'xl'>;
+export type AnimationSize = SizeValue;
 
 export type ShadowStyle = 'soft' | 'hard' | 'elevated' | 'none';
 

package/src/components/utility/WorkflowStep/WorkflowStep.types.ts

@@ -19,7 +19,7 @@ export type WorkflowStepOrientation = 'horizontal' | 'vertical';
 /**
  * Color theme for the workflow step component
  */
-export type WorkflowStepColor = Exclude<ColorValue, 'info'>;
+export type WorkflowStepColor = ColorValue;
 
 /**
  * Size variant for step indicators

package/src/tokens/scales.ts

@@ -18,13 +18,13 @@ import type { Theme } from '@mui/material/styles';
  *
  * So the vocabulary is declared once, here, and components derive from it.
  *
- * DERIVE, DON'T COPY, AND SUBSET HONESTLY. A component that cannot draw the
- * whole scale narrows with `Extract` rather than restating a union — an
- * independent copy is what drifts. And it narrows rather than accepting the lot:
- * a MUI chip draws two sizes, so putting `lg` in its type would promise
- * something nothing can render.
- *
- *     size?: Extract<SizeValue, 'sm' | 'md'>;
+ * DERIVE, DON'T COPY — AND TAKE THE WHOLE VOCABULARY. Every size prop is
+ * `SizeValue` and every colour prop is `ColorValue`, with no `Extract` and no
+ * `Exclude`. Handing a component a slice was tried and undone: it is the same
+ * fragmentation wearing the canonical type's name, and it leaves a caller having
+ * to remember which components accept `xs` and which accept `info`. Where the
+ * underlying widget draws fewer steps than five, that is a rendering detail and
+ * belongs at the MUI boundary below — not in the prop's type.
  *
  * A component whose size or colour is not this concept at all keeps its own type
  * — `Scrollbar`'s `thin|medium|thick` is a track width, `Sheet`'s `full` is a
@@ -37,9 +37,17 @@ import type { Theme } from '@mui/material/styles';
  *
  * Abbreviated, because that is what 26 of the 30 components with a real size
  * already used and what every caller has been taught to write.
+ *
+ * Declared as the array and the type together so the two cannot disagree. The
+ * runtime list is what Storybook `argTypes.options` and the demo grids iterate;
+ * spelled by hand in each story it drifts, and it had — twelve colour lists
+ * omitted `info`, so the control that documents the vocabulary offered a
+ * component less than the component accepted.
  */
 export type SizeValue = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
+export const SIZE_VALUES = ['xs', 'sm', 'md', 'lg', 'xl'] as const satisfies readonly SizeValue[];
+
 /**
  * The house colour vocabulary.
  *
@@ -53,6 +61,8 @@ export type SizeValue = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
  * component calls its unaccented state). The translation must be a real mapping
  * and never a cast: a cast is precisely what let `danger` through untouched and
  * had MUI fall back to grey.
+ *
+ * Array and type declared together, for the reason given on {@link SIZE_VALUES}.
  */
 export type ColorValue =
   | 'primary'
@@ -63,6 +73,47 @@ export type ColorValue =
   | 'danger'
   | 'neutral';
 
+export const COLOR_VALUES = [
+  'primary',
+  'secondary',
+  'success',
+  'warning',
+  'info',
+  'danger',
+  'neutral',
+] as const satisfies readonly ColorValue[];
+
+/* ── Array and union, pinned to each other ────────────────────────────────── */
+
+/**
+ * The arrays above are written out rather than derived, because deriving the
+ * union from the array (`(typeof COLOR_VALUES)[number]`) costs the alias its
+ * name: TypeScript resolves the indexed access eagerly, and every error in the
+ * package stops saying `not assignable to type 'ColorValue'` and starts dumping
+ * seven string literals. In a package whose entire purpose is teaching this
+ * vocabulary, the name in the error message is worth keeping.
+ *
+ * Writing both means they could disagree, so both directions are checked here.
+ * `satisfies` above catches an entry that is not a member. These catch the other
+ * half — a member missing from the array — which `satisfies` cannot see and
+ * which is the direction that actually bit: twelve story control lists offered
+ * six colours for a vocabulary of seven, so `info` was undocumented everywhere.
+ *
+ * A gap makes the assignment below fail, and the error names the missing member.
+ */
+type Missing<Union extends string, Listed extends string> = Exclude<Union, Listed>;
+
+const _allSizesListed: Missing<SizeValue, (typeof SIZE_VALUES)[number]> extends never
+  ? true
+  : never = true;
+
+const _allColorsListed: Missing<ColorValue, (typeof COLOR_VALUES)[number]> extends never
+  ? true
+  : never = true;
+
+void _allSizesListed;
+void _allColorsListed;
+
 /* ── The MUI boundary ─────────────────────────────────────────────────────── */
 
 /** What MUI calls a size. Three entries against our five. */