App reorganization

app/components/controls/Chip/Chip.container.tsx

@@ -3,18 +3,17 @@
 import { memo, useState, useEffect, useRef } from "react";
 import ChipView from "./Chip.view";
 import type { ChipProps } from "./Chip.types";
-import {
-  normalizeChipPalette,
-  normalizeChipSize,
-  normalizeChipState,
-} from "../../../../lib/propNormalization";
 
+/**
+ * Figma: "Control / Chip" (TODO(figma)). Compact pill-shaped tag with
+ * selectable, removable, and inline-editable (custom) states.
+ */
 const ChipContainer = memo<ChipProps>(
   ({
     label,
-    state: stateProp = "Unselected",
-    palette: paletteProp = "Default",
-    size: sizeProp = "S",
+    state: stateProp = "unselected",
+    palette: paletteProp = "default",
+    size: sizeProp = "s",
     className = "",
     disabled,
     onClick,
@@ -23,9 +22,9 @@ const ChipContainer = memo<ChipProps>(
     onClose,
     ariaLabel,
   }) => {
-    const state = normalizeChipState(stateProp);
-    const palette = normalizeChipPalette(paletteProp);
-    const size = normalizeChipSize(sizeProp);
+    const state = stateProp;
+    const palette = paletteProp;
+    const size = sizeProp;
 
     const isDisabled = disabled ?? state === "disabled";
     const isCustom = state === "custom";

app/components/controls/Chip/Chip.types.ts

@@ -7,38 +7,32 @@ import type {
 export interface ChipProps {
   label: string;
   /**
-   * Visual state of the chip, aligned with Figma:
-   * - "Unselected"
-   * - "Selected"
-   * - "Disabled"
-   * - "Custom" (editable chips with check/close buttons)
-   *
-   * Accepts both PascalCase (Figma) and lowercase values.
+   * Visual state of the chip:
+   * - "unselected"
+   * - "selected"
+   * - "disabled"
+   * - "custom" (editable chips with check/close buttons)
    */
   state?: ChipStateValue;
   /**
-   * Palette of the chip, aligned with Figma:
-   * - "Default"
-   * - "Inverse"
-   *
-   * Accepts both PascalCase (Figma) and lowercase values.
+   * Palette of the chip:
+   * - "default"
+   * - "inverse"
    */
   palette?: ChipPaletteValue;
   /**
-   * Size of the chip, aligned with Figma:
-   * - "S"
-   * - "M"
-   *
-   * Accepts both uppercase (Figma) and lowercase values.
+   * Size of the chip:
+   * - "s"
+   * - "m"
    */
   size?: ChipSizeValue;
   className?: string;
   /**
    * Whether the chip should be non-interactive. Defaults to `true` when
    * `state === "disabled"` to preserve historical behavior. Pass
-   * `disabled={false}` alongside `state="Disabled"` to render the dimmed
+   * `disabled={false}` alongside `state="disabled"` to render the dimmed
    * "disabled" visual while keeping the chip clickable — useful for toggle
-   * groups where the unselected state is the disabled Figma visual.
+   * groups where the unselected state is the disabled visual.
    */
   disabled?: boolean;
   onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;