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/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 } },
+          },
+        },
+      },
+    },
   },
 });