App reorganization

app/components/controls/MultiSelect/MultiSelect.container.tsx

@@ -3,17 +3,17 @@
 import { memo } from "react";
 import MultiSelectView from "./MultiSelect.view";
 import type { MultiSelectProps } from "./MultiSelect.types";
-import {
-  normalizeMultiSelectSize,
-  normalizeChipPalette,
-} from "../../../../lib/propNormalization";
 
+/**
+ * Figma: "Control / MultiSelect" (TODO(figma)). Labelled set of chips for
+ * picking multiple values, with an optional add button for custom entries.
+ */
 const MultiSelectContainer = memo<MultiSelectProps>(
   ({
     label,
     showHelpIcon = true,
-    size: sizeProp = "M",
-    palette: paletteProp = "Default",
+    size: sizeProp = "m",
+    palette: paletteProp = "default",
     options,
     onChipClick,
     onAddClick,
@@ -24,8 +24,8 @@ const MultiSelectContainer = memo<MultiSelectProps>(
     onCustomChipClose,
     className = "",
   }) => {
-    const size = normalizeMultiSelectSize(sizeProp);
-    const palette = normalizeChipPalette(paletteProp);
+    const size = sizeProp;
+    const palette = paletteProp;
 
     return (
       <MultiSelectView

app/components/controls/MultiSelect/MultiSelect.types.ts

@@ -9,7 +9,7 @@ export interface ChipOption {
   state?: ChipStateValue;
 }
 
-export type MultiSelectSizeValue = "S" | "M" | "s" | "m";
+export type MultiSelectSizeValue = "s" | "m";
 
 export interface MultiSelectProps {
   /**
@@ -21,13 +21,11 @@ export interface MultiSelectProps {
    */
   showHelpIcon?: boolean;
   /**
-   * Size variant: "S" (small) or "M" (medium)
-   * Accepts both uppercase (Figma) and lowercase values.
+   * Size variant: "s" (small) or "m" (medium)
    */
   size?: MultiSelectSizeValue;
   /**
-   * Palette for chips: "Default" or "Inverse"
-   * Accepts both PascalCase (Figma) and lowercase values.
+   * Palette for chips: "default" or "inverse"
    */
   palette?: ChipPaletteValue;
   /**

app/components/controls/MultiSelect/MultiSelect.view.tsx

@@ -28,7 +28,7 @@ function MultiSelectView({
     ? "gap-[var(--measures-spacing-200,8px)]"
     : "gap-[var(--measures-spacing-300,12px)]";
 
-  const chipSize = isSmall ? "S" : "M";
+  const chipSize = size;
 
   return (
     <div
@@ -41,8 +41,8 @@ function MultiSelectView({
           helpIcon={showHelpIcon}
           asterisk={false}
           helperText={false}
-          size={size === "s" ? "S" : "M"}
-          palette={palette === "inverse" ? "Inverse" : "Default"}
+          size={size}
+          palette={palette}
         />
       )}
 
@@ -53,13 +53,12 @@ function MultiSelectView({
         {options.map((option) => (
           <Chip
             key={option.id}
-            label={option.state === "Custom" ? "" : option.label}
-            state={option.state || "Unselected"}
-            palette={palette === "inverse" ? "Inverse" : "Default"}
+            label={option.state === "custom" ? "" : option.label}
+            state={option.state || "unselected"}
+            palette={palette}
             size={chipSize}
             onClick={() => {
-              // Only toggle if not in Custom state
-              if (option.state !== "Custom" && onChipClick) {
+              if (option.state !== "custom" && onChipClick) {
                 onChipClick(option.id);
               }
             }}