Add Chip atom component

- Interactive tag for filtering, selection, and dismissible labels
- Wraps MUI Chip with FA tokens: 12 component tokens (height, padding, font, icon sizes)
- Two variants (filled/outlined) × two colours (default/primary) × two sizes (sm/md)
- Custom `selected` prop promotes to brand colour with warm bg (outlined)
- MUI theme overrides: soft tonal fills, branded outlines, hover/focus states
- 10 Storybook stories including interactive filter and removable tag demos
- Preflight passed all 5 checks

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/theme/generated/tokens.css

@@ -17,6 +17,12 @@
   --fa-button-icon-size-sm: 16px; /** 16px icons in small buttons */
   --fa-button-icon-size-md: 18px; /** 18px icons in medium buttons */
   --fa-button-icon-size-lg: 20px; /** 20px icons in large buttons */
+  --fa-chip-height-sm: 28px; /** Small — compact inline tags, tight layouts */
+  --fa-chip-height-md: 32px; /** Medium — default interactive chips, filter tags */
+  --fa-chip-icon-size-sm: 16px; /** 16px icons in small chips */
+  --fa-chip-icon-size-md: 18px; /** 18px icons in medium chips */
+  --fa-chip-delete-icon-size-sm: 14px; /** 14px delete icon in small chips */
+  --fa-chip-delete-icon-size-md: 16px; /** 16px delete icon in medium chips */
   --fa-input-height-sm: 40px; /** Small — compact forms, admin layouts, matches Button medium height */
   --fa-input-height-md: 48px; /** Medium (default) — standard forms, matches Button large for alignment */
   --fa-input-icon-size-default: 20px; /** 20px — icon size inside input field, matches Figma trailing icon */
@@ -242,6 +248,12 @@
   --fa-card-padding-compact: var(--fa-spacing-4); /** 16px — compact card padding (mobile, tight layouts) */
   --fa-card-shadow-default: var(--fa-shadow-md); /** Medium shadow — resting elevated card */
   --fa-card-shadow-hover: var(--fa-shadow-lg); /** High shadow — interactive card on hover */
+  --fa-chip-padding-x-sm: var(--fa-spacing-2); /** 8px — compact horizontal padding */
+  --fa-chip-padding-x-md: var(--fa-spacing-3); /** 12px — default horizontal padding */
+  --fa-chip-font-size-sm: var(--fa-font-size-xs); /** 12px — small chip text */
+  --fa-chip-font-size-md: var(--fa-font-size-sm); /** 14px — default chip text */
+  --fa-chip-icon-gap-default: var(--fa-spacing-1); /** 4px icon-text gap */
+  --fa-chip-border-radius-default: var(--fa-border-radius-full); /** Pill shape — fully rounded */
   --fa-input-padding-x-default: var(--fa-spacing-3); /** 12px — inner horizontal padding matching Figma design */
   --fa-input-padding-y-sm: var(--fa-spacing-2); /** 8px — compact vertical padding for small size */
   --fa-input-padding-y-md: var(--fa-spacing-3); /** 12px — standard vertical padding for medium size */

src/theme/generated/tokens.js

@@ -51,6 +51,18 @@ export const CardBorderSelected = "#ba834e"; // Brand border for selected/active
 export const CardBackgroundDefault = "#ffffff"; // White — standard card background (raised surface)
 export const CardBackgroundHover = "#fafafa"; // Subtle grey fill on hover — neutral.50 for soft interactive feedback
 export const CardBackgroundSelected = "#fef9f5"; // Warm tint for selected cards — brand.50 reinforces active state
+export const ChipHeightSm = "28px"; // Small — compact inline tags, tight layouts
+export const ChipHeightMd = "32px"; // Medium — default interactive chips, filter tags
+export const ChipPaddingXSm = "8px"; // 8px — compact horizontal padding
+export const ChipPaddingXMd = "12px"; // 12px — default horizontal padding
+export const ChipFontSizeSm = "0.75rem"; // 12px — small chip text
+export const ChipFontSizeMd = "0.875rem"; // 14px — default chip text
+export const ChipIconSizeSm = "16px"; // 16px icons in small chips
+export const ChipIconSizeMd = "18px"; // 18px icons in medium chips
+export const ChipDeleteIconSizeSm = "14px"; // 14px delete icon in small chips
+export const ChipDeleteIconSizeMd = "16px"; // 16px delete icon in medium chips
+export const ChipIconGapDefault = "4px"; // 4px icon-text gap
+export const ChipBorderRadiusDefault = "9999px"; // Pill shape — fully rounded
 export const InputHeightSm = "40px"; // Small — compact forms, admin layouts, matches Button medium height
 export const InputHeightMd = "48px"; // Medium (default) — standard forms, matches Button large for alignment
 export const InputPaddingXDefault = "12px"; // 12px — inner horizontal padding matching Figma design

src/theme/index.ts

@@ -577,6 +577,63 @@ export const theme = createTheme({
         },
       },
     },
+    MuiChip: {
+      defaultProps: {
+        size: 'medium',
+      },
+      styleOverrides: {
+        root: {
+          borderRadius: parseInt(t.ChipBorderRadiusDefault, 10),
+          fontWeight: 500,
+          letterSpacing: '0.01em',
+          transition: 'background-color 150ms ease-in-out, border-color 150ms ease-in-out, box-shadow 150ms ease-in-out',
+          '&:focus-visible': {
+            outline: `2px solid ${t.ColorInteractiveFocus}`,
+            outlineOffset: '2px',
+          },
+        },
+        sizeMedium: {
+          height: parseInt(t.ChipHeightMd, 10),
+          fontSize: t.ChipFontSizeMd,
+          '& .MuiChip-icon': { fontSize: t.ChipIconSizeMd, marginLeft: t.ChipPaddingXMd },
+          '& .MuiChip-deleteIcon': { fontSize: t.ChipDeleteIconSizeMd, marginRight: t.ChipPaddingXMd },
+        },
+        sizeSmall: {
+          height: parseInt(t.ChipHeightSm, 10),
+          fontSize: t.ChipFontSizeSm,
+          '& .MuiChip-icon': { fontSize: t.ChipIconSizeSm, marginLeft: t.ChipPaddingXSm },
+          '& .MuiChip-deleteIcon': { fontSize: t.ChipDeleteIconSizeSm, marginRight: t.ChipPaddingXSm },
+        },
+        filled: {
+          '&.MuiChip-colorDefault': {
+            backgroundColor: t.ColorNeutral200,
+            color: t.ColorNeutral700,
+            '&:hover': { backgroundColor: t.ColorNeutral300 },
+            '& .MuiChip-deleteIcon': { color: t.ColorNeutral500, '&:hover': { color: t.ColorNeutral700 } },
+          },
+          '&.MuiChip-colorPrimary': {
+            backgroundColor: t.ColorBrand200,
+            color: t.ColorBrand700,
+            '&:hover': { backgroundColor: t.ColorBrand300 },
+            '& .MuiChip-deleteIcon': { color: t.ColorBrand400, '&:hover': { color: t.ColorBrand700 } },
+          },
+        },
+        outlined: {
+          '&.MuiChip-colorDefault': {
+            borderColor: t.ColorNeutral300,
+            color: t.ColorNeutral700,
+            '&:hover': { backgroundColor: t.ColorNeutral100, borderColor: t.ColorNeutral400 },
+            '& .MuiChip-deleteIcon': { color: t.ColorNeutral400, '&:hover': { color: t.ColorNeutral700 } },
+          },
+          '&.MuiChip-colorPrimary': {
+            borderColor: t.ColorBrand400,
+            color: t.ColorBrand700,
+            '&:hover': { backgroundColor: t.ColorBrand100, borderColor: t.ColorBrand500 },
+            '& .MuiChip-deleteIcon': { color: t.ColorBrand400, '&:hover': { color: t.ColorBrand700 } },
+          },
+        },
+      },
+    },
   },
 });