diff --git a/app/components-preview/page.tsx b/app/components-preview/page.tsx
index 7b23a5e..315a6f5 100644
--- a/app/components-preview/page.tsx
+++ b/app/components-preview/page.tsx
@@ -17,14 +17,14 @@ interface ChipData {
 
 // MultiSelect example component with state management
 function MultiSelectExample({ size }: { size: "S" | "M" }) {
-  const [options, setOptions] = useState([
-    { id: "1", label: "1 member", state: "Unselected" as const },
-    { id: "2", label: "2-10 members", state: "Unselected" as const },
-    { id: "3", label: "10-24 members", state: "Unselected" as const },
-    { id: "4", label: "24-64 members", state: "Unselected" as const },
-    { id: "5", label: "64-128 members", state: "Unselected" as const },
-    { id: "6", label: "125-1000 members", state: "Unselected" as const },
-    { id: "7", label: "1000+ members", state: "Unselected" as const },
+  const [options, setOptions] = useState<Array<{ id: string; label: string; state: "Unselected" | "Selected" | "Custom" }>>([
+    { id: "1", label: "1 member", state: "Unselected" },
+    { id: "2", label: "2-10 members", state: "Unselected" },
+    { id: "3", label: "10-24 members", state: "Unselected" },
+    { id: "4", label: "24-64 members", state: "Unselected" },
+    { id: "5", label: "64-128 members", state: "Unselected" },
+    { id: "6", label: "125-1000 members", state: "Unselected" },
+    { id: "7", label: "1000+ members", state: "Unselected" },
   ]);
 
   const handleChipClick = (chipId: string) => {
@@ -33,7 +33,7 @@ function MultiSelectExample({ size }: { size: "S" | "M" }) {
         opt.id === chipId
           ? {
               ...opt,
-              state: opt.state === "Selected" ? ("Unselected" as const) : ("Selected" as const),
+              state: opt.state === "Selected" ? "Unselected" : "Selected",
             }
           : opt
       )
@@ -44,7 +44,7 @@ function MultiSelectExample({ size }: { size: "S" | "M" }) {
     const newId = `custom-${Date.now()}`;
     setOptions((prev) => [
       ...prev,
-      { id: newId, label: "", state: "Custom" as const },
+      { id: newId, label: "", state: "Custom" },
     ]);
   };
 
@@ -83,7 +83,6 @@ function MultiSelectExample({ size }: { size: "S" | "M" }) {
 }
 
 export default function ComponentsPreview() {
-  const [expandedCard, setExpandedCard] = useState<string | null>(null);
   const [chipStates, setChipStates] = useState<Record<string, "Unselected" | "Selected">>({
     "default-s": "Unselected",
     "default-m": "Unselected",
@@ -98,15 +97,22 @@ export default function ComponentsPreview() {
   ]);
 
   // RuleCard categories with chip options and state management
-  const [ruleCardCategories, setRuleCardCategories] = useState([
+  const [ruleCardCategories, setRuleCardCategories] = useState<Array<{
+    name: string;
+    chipOptions: Array<{ id: string; label: string; state: "Unselected" | "Selected" | "Custom" }>;
+    onChipClick?: (categoryName: string, chipId: string) => void;
+    onAddClick?: (categoryName: string) => void;
+    onCustomChipConfirm?: (categoryName: string, chipId: string, value: string) => void;
+    onCustomChipClose?: (categoryName: string, chipId: string) => void;
+  }>>([
     {
       name: "Values",
       chipOptions: [
-        { id: "values-1", label: "Consciousness", state: "Unselected" as const },
-        { id: "values-2", label: "Ecology", state: "Unselected" as const },
-        { id: "values-3", label: "Abundance", state: "Unselected" as const },
-        { id: "values-4", label: "Art", state: "Unselected" as const },
-        { id: "values-5", label: "Decisiveness", state: "Unselected" as const },
+        { id: "values-1", label: "Consciousness", state: "Unselected" },
+        { id: "values-2", label: "Ecology", state: "Unselected" },
+        { id: "values-3", label: "Abundance", state: "Unselected" },
+        { id: "values-4", label: "Art", state: "Unselected" },
+        { id: "values-5", label: "Decisiveness", state: "Unselected" },
       ],
       onChipClick: (categoryName: string, chipId: string) => {
         setRuleCardCategories((prev) =>
@@ -118,7 +124,7 @@ export default function ComponentsPreview() {
                     opt.id === chipId
                       ? {
                           ...opt,
-                          state: opt.state === "Selected" ? ("Unselected" as const) : ("Selected" as const),
+                          state: opt.state === "Selected" ? "Unselected" : "Selected",
                         }
                       : opt
                   ),
@@ -136,7 +142,7 @@ export default function ComponentsPreview() {
                   ...cat,
                   chipOptions: [
                     ...cat.chipOptions,
-                    { id: newId, label: "", state: "Custom" as const },
+                    { id: newId, label: "", state: "Custom" },
                   ],
                 }
               : cat
@@ -151,7 +157,7 @@ export default function ComponentsPreview() {
                   ...cat,
                   chipOptions: cat.chipOptions.map((opt) =>
                     opt.id === chipId
-                      ? { ...opt, label: value, state: "Selected" as const }
+                      ? { ...opt, label: value, state: "Selected" }
                       : opt
                   ),
                 }
@@ -175,7 +181,7 @@ export default function ComponentsPreview() {
     {
       name: "Communication",
       chipOptions: [
-        { id: "comm-1", label: "Signal", state: "Unselected" as const },
+        { id: "comm-1", label: "Signal", state: "Unselected" },
       ],
       onChipClick: (categoryName: string, chipId: string) => {
         setRuleCardCategories((prev) =>
@@ -187,7 +193,7 @@ export default function ComponentsPreview() {
                     opt.id === chipId
                       ? {
                           ...opt,
-                          state: opt.state === "Selected" ? ("Unselected" as const) : ("Selected" as const),
+                          state: opt.state === "Selected" ? "Unselected" : "Selected",
                         }
                       : opt
                   ),
@@ -205,7 +211,7 @@ export default function ComponentsPreview() {
                   ...cat,
                   chipOptions: [
                     ...cat.chipOptions,
-                    { id: newId, label: "", state: "Custom" as const },
+                    { id: newId, label: "", state: "Custom" },
                   ],
                 }
               : cat
@@ -220,7 +226,7 @@ export default function ComponentsPreview() {
                   ...cat,
                   chipOptions: cat.chipOptions.map((opt) =>
                     opt.id === chipId
-                      ? { ...opt, label: value, state: "Selected" as const }
+                      ? { ...opt, label: value, state: "Selected" }
                       : opt
                   ),
                 }
@@ -244,7 +250,7 @@ export default function ComponentsPreview() {
     {
       name: "Membership",
       chipOptions: [
-        { id: "membership-1", label: "Open Admission", state: "Unselected" as const },
+        { id: "membership-1", label: "Open Admission", state: "Unselected" },
       ],
       onChipClick: (categoryName: string, chipId: string) => {
         setRuleCardCategories((prev) =>
@@ -256,7 +262,7 @@ export default function ComponentsPreview() {
                     opt.id === chipId
                       ? {
                           ...opt,
-                          state: opt.state === "Selected" ? ("Unselected" as const) : ("Selected" as const),
+                          state: opt.state === "Selected" ? "Unselected" : "Selected",
                         }
                       : opt
                   ),
@@ -274,7 +280,7 @@ export default function ComponentsPreview() {
                   ...cat,
                   chipOptions: [
                     ...cat.chipOptions,
-                    { id: newId, label: "", state: "Custom" as const },
+                    { id: newId, label: "", state: "Custom" },
                   ],
                 }
               : cat
@@ -289,7 +295,7 @@ export default function ComponentsPreview() {
                   ...cat,
                   chipOptions: cat.chipOptions.map((opt) =>
                     opt.id === chipId
-                      ? { ...opt, label: value, state: "Selected" as const }
+                      ? { ...opt, label: value, state: "Selected" }
                       : opt
                   ),
                 }
@@ -313,8 +319,8 @@ export default function ComponentsPreview() {
     {
       name: "Decision-making",
       chipOptions: [
-        { id: "decision-1", label: "Lazy Consensus", state: "Unselected" as const },
-        { id: "decision-2", label: "Modified Consensus", state: "Unselected" as const },
+        { id: "decision-1", label: "Lazy Consensus", state: "Unselected" },
+        { id: "decision-2", label: "Modified Consensus", state: "Unselected" },
       ],
       onChipClick: (categoryName: string, chipId: string) => {
         setRuleCardCategories((prev) =>
@@ -326,7 +332,7 @@ export default function ComponentsPreview() {
                     opt.id === chipId
                       ? {
                           ...opt,
-                          state: opt.state === "Selected" ? ("Unselected" as const) : ("Selected" as const),
+                          state: opt.state === "Selected" ? "Unselected" : "Selected",
                         }
                       : opt
                   ),
@@ -344,7 +350,7 @@ export default function ComponentsPreview() {
                   ...cat,
                   chipOptions: [
                     ...cat.chipOptions,
-                    { id: newId, label: "", state: "Custom" as const },
+                    { id: newId, label: "", state: "Custom" },
                   ],
                 }
               : cat
@@ -359,7 +365,7 @@ export default function ComponentsPreview() {
                   ...cat,
                   chipOptions: cat.chipOptions.map((opt) =>
                     opt.id === chipId
-                      ? { ...opt, label: value, state: "Selected" as const }
+                      ? { ...opt, label: value, state: "Selected" }
                       : opt
                   ),
                 }
@@ -383,8 +389,8 @@ export default function ComponentsPreview() {
     {
       name: "Conflict management",
       chipOptions: [
-        { id: "conflict-1", label: "Code of Conduct", state: "Unselected" as const },
-        { id: "conflict-2", label: "Restorative Justice", state: "Unselected" as const },
+        { id: "conflict-1", label: "Code of Conduct", state: "Unselected" },
+        { id: "conflict-2", label: "Restorative Justice", state: "Unselected" },
       ],
       onChipClick: (categoryName: string, chipId: string) => {
         setRuleCardCategories((prev) =>
@@ -396,7 +402,7 @@ export default function ComponentsPreview() {
                     opt.id === chipId
                       ? {
                           ...opt,
-                          state: opt.state === "Selected" ? ("Unselected" as const) : ("Selected" as const),
+                          state: opt.state === "Selected" ? "Unselected" : "Selected",
                         }
                       : opt
                   ),
@@ -414,7 +420,7 @@ export default function ComponentsPreview() {
                   ...cat,
                   chipOptions: [
                     ...cat.chipOptions,
-                    { id: newId, label: "", state: "Custom" as const },
+                    { id: newId, label: "", state: "Custom" },
                   ],
                 }
               : cat
@@ -429,7 +435,7 @@ export default function ComponentsPreview() {
                   ...cat,
                   chipOptions: cat.chipOptions.map((opt) =>
                     opt.id === chipId
-                      ? { ...opt, label: value, state: "Selected" as const }
+                      ? { ...opt, label: value, state: "Selected" }
                       : opt
                   ),
                 }
@@ -520,7 +526,7 @@ export default function ComponentsPreview() {
                         setCustomChips((prev) =>
                           prev.map((c) =>
                             c.id === chip.id
-                              ? { ...c, label: value, state: "Selected" as const }
+                              ? { ...c, label: value, state: "Selected" }
                               : c
                           )
                         );
@@ -538,7 +544,7 @@ export default function ComponentsPreview() {
                               c.id === chip.id
                                 ? {
                                     ...c,
-                                    state: c.state === "Selected" ? ("Unselected" as const) : ("Selected" as const),
+                                    state: c.state === "Selected" ? "Unselected" : "Selected",
                                   }
                                 : c
                             )
diff --git a/app/components/AskOrganizer/AskOrganizer.container.tsx b/app/components/AskOrganizer/AskOrganizer.container.tsx
index 831f4ff..1933187 100644
--- a/app/components/AskOrganizer/AskOrganizer.container.tsx
+++ b/app/components/AskOrganizer/AskOrganizer.container.tsx
@@ -11,7 +11,7 @@ import type {
 import { normalizeAskOrganizerVariant } from "../../../lib/propNormalization";
 
 const VARIANT_STYLES: Record<
-  AskOrganizerVariant,
+  "centered" | "left-aligned" | "compact" | "inverse",
   { container: string; buttonContainer: string }
 > = {
   centered: {
diff --git a/app/components/Checkbox/Checkbox.types.ts b/app/components/Checkbox/Checkbox.types.ts
index 8faefb9..c6cd369 100644
--- a/app/components/Checkbox/Checkbox.types.ts
+++ b/app/components/Checkbox/Checkbox.types.ts
@@ -30,7 +30,7 @@ export interface CheckboxViewProps {
   labelId: string;
   checked: boolean;
   mode: "standard" | "inverse";
-  state: "default" | "hover" | "focus";
+  state: "default" | "hover" | "focus" | "selected";
   disabled: boolean;
   label?: string;
   name?: string;
diff --git a/app/components/Chip/Chip.view.tsx b/app/components/Chip/Chip.view.tsx
index a8a91a1..2402994 100644
--- a/app/components/Chip/Chip.view.tsx
+++ b/app/components/Chip/Chip.view.tsx
@@ -134,12 +134,12 @@ function ChipView({
     .filter(Boolean)
     .join(" ");
 
-  const handleClick: React.MouseEventHandler<HTMLButtonElement> = (event) => {
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => {
     if (isDisabled) {
       event.preventDefault();
       return;
     }
-    onClick?.(event);
+    onClick?.(event as React.MouseEvent<HTMLButtonElement>);
   };
 
   const sharedA11y = {
diff --git a/app/components/MultiSelect/MultiSelect.types.ts b/app/components/MultiSelect/MultiSelect.types.ts
index d834320..9c035cc 100644
--- a/app/components/MultiSelect/MultiSelect.types.ts
+++ b/app/components/MultiSelect/MultiSelect.types.ts
@@ -1,4 +1,4 @@
-import type { ChipStateValue, ChipSizeValue, ChipPaletteValue } from "../../../lib/propNormalization";
+import type { ChipStateValue, ChipPaletteValue } from "../../../lib/propNormalization";
 
 export interface ChipOption {
   id: string;
diff --git a/app/components/RadioGroup/RadioGroup.types.ts b/app/components/RadioGroup/RadioGroup.types.ts
index db44f87..f1588b5 100644
--- a/app/components/RadioGroup/RadioGroup.types.ts
+++ b/app/components/RadioGroup/RadioGroup.types.ts
@@ -32,7 +32,7 @@ export interface RadioGroupViewProps {
   groupId: string;
   value?: string;
   mode: "standard" | "inverse";
-  state: "default" | "hover" | "focus";
+  state: "default" | "hover" | "focus" | "selected";
   disabled: boolean;
   options: RadioOption[];
   className: string;
diff --git a/app/components/RuleStack/RuleStack.view.tsx b/app/components/RuleStack/RuleStack.view.tsx
index d7533c2..788db53 100644
--- a/app/components/RuleStack/RuleStack.view.tsx
+++ b/app/components/RuleStack/RuleStack.view.tsx
@@ -48,7 +48,6 @@ export function RuleStackView({
 
   // Icon sizes: XS=40px, S=56px, M=56px, L=90px
   // Use a large default (90px) and let CSS handle responsive sizing
-  const iconSize = 90;
 
   // Card data
   const cards = [
diff --git a/app/components/SelectInput/SelectInput.container.tsx b/app/components/SelectInput/SelectInput.container.tsx
index 6318265..76add96 100644
--- a/app/components/SelectInput/SelectInput.container.tsx
+++ b/app/components/SelectInput/SelectInput.container.tsx
@@ -42,6 +42,9 @@ const SelectInputContainer = forwardRef<HTMLButtonElement, SelectInputProps>(
     // Note: labelVariant and size are normalized for future use but not yet implemented in the view
     const _labelVariant = labelVariantProp ? normalizeLabelVariant(labelVariantProp) : undefined;
     const _size = sizeProp ? normalizeSmallMediumLargeSize(sizeProp) : undefined;
+    // Mark as intentionally unused for future implementation
+    void _labelVariant;
+    void _size;
     const externalState = normalizeState(externalStateProp);
     
     const generatedId = useId();
diff --git a/app/components/SelectInput/SelectInput.view.tsx b/app/components/SelectInput/SelectInput.view.tsx
index 26ea67b..ba8b9a7 100644
--- a/app/components/SelectInput/SelectInput.view.tsx
+++ b/app/components/SelectInput/SelectInput.view.tsx
@@ -7,7 +7,7 @@ import type { SelectOptionData } from "./SelectInput.types";
 export interface SelectInputViewProps {
   label?: string;
   placeholder: string;
-  state: "default" | "active" | "hover" | "focus";
+  state: "default" | "active" | "hover" | "focus" | "selected";
   disabled: boolean;
   error: boolean;
   className: string;
diff --git a/app/components/Switch/Switch.types.ts b/app/components/Switch/Switch.types.ts
index 93569ad..2bccb8b 100644
--- a/app/components/Switch/Switch.types.ts
+++ b/app/components/Switch/Switch.types.ts
@@ -24,7 +24,7 @@ export interface SwitchProps extends Omit<
 export interface SwitchViewProps {
   switchId: string;
   checked: boolean;
-  state: "default" | "hover" | "focus";
+  state: "default" | "hover" | "focus" | "selected";
   label?: string;
   className: string;
   switchClasses: string;
diff --git a/app/components/Toggle/Toggle.types.ts b/app/components/Toggle/Toggle.types.ts
index a0fe919..cd09bf5 100644
--- a/app/components/Toggle/Toggle.types.ts
+++ b/app/components/Toggle/Toggle.types.ts
@@ -31,7 +31,7 @@ export interface ToggleViewProps {
   labelId: string;
   checked: boolean;
   disabled: boolean;
-  state: "default" | "hover" | "focus";
+  state: "default" | "hover" | "focus" | "selected";
   label?: string;
   showIcon: boolean;
   showText: boolean;
diff --git a/lib/propNormalization.ts b/lib/propNormalization.ts
index 9ebd610..3a1071b 100644
--- a/lib/propNormalization.ts
+++ b/lib/propNormalization.ts
@@ -142,13 +142,13 @@ export function normalizeVariant(
  */
 export function normalizeSize(
   value: string | undefined,
-  defaultValue: "xsmall" = "xsmall"
+  defaultValue: "xsmall" | "small" | "medium" | "large" | "xlarge" = "xsmall"
 ): "xsmall" | "small" | "medium" | "large" | "xlarge" {
   if (!value) return defaultValue;
   const normalized = value.toLowerCase();
   const sizes = ["xsmall", "small", "medium", "large", "xlarge"];
   if (sizes.includes(normalized)) {
-    return normalized as typeof defaultValue;
+    return normalized as "xsmall" | "small" | "medium" | "large" | "xlarge";
   }
   return defaultValue;
 }