Component cleanup

app/components/controls/Checkbox/Checkbox.container.tsx

@@ -6,7 +6,7 @@ import { CheckboxView } from "./Checkbox.view";
 import type { CheckboxProps } from "./Checkbox.types";
 
 /**
- * Figma: "Control / Checkbox" (TODO(figma)). Single boolean checkbox with
+ * Figma: "Control / Checkbox". Single boolean checkbox with
  * optional label, supporting standard and inverse modes.
  */
 const CheckboxContainer = memo<CheckboxProps>(

app/components/controls/CheckboxGroup/CheckboxGroup.container.tsx

@@ -5,7 +5,7 @@ import { CheckboxGroupView } from "./CheckboxGroup.view";
 import type { CheckboxGroupProps } from "./CheckboxGroup.types";
 
 /**
- * Figma: "Control / CheckboxGroup" (TODO(figma)). Group of checkboxes sharing
+ * Figma: "Control / CheckboxGroup". Group of checkboxes sharing
  * a name that emits the array of currently selected values.
  */
 const CheckboxGroupContainer = ({

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

@@ -5,7 +5,7 @@ import ChipView from "./Chip.view";
 import type { ChipProps } from "./Chip.types";
 
 /**
- * Figma: "Control / Chip" (TODO(figma)). Compact pill-shaped tag with
+ * Figma: "Control / Chip". Compact pill-shaped tag with
  * selectable, removable, and inline-editable (custom) states.
  */
 const ChipContainer = memo<ChipProps>(

app/components/controls/IncrementerBlock/IncrementerBlock.types.ts

@@ -2,7 +2,7 @@ import type { IncrementerProps } from "../Incrementer/Incrementer.types";
 import type {
   InputLabelPaletteValue,
   InputLabelSizeValue,
-} from "../../utility/InputLabel/InputLabel.types";
+} from "../../type/InputLabel/InputLabel.types";
 
 export interface IncrementerBlockProps extends IncrementerProps {
   /** Label text displayed above the incrementer. */

app/components/controls/IncrementerBlock/IncrementerBlock.view.tsx

@@ -2,7 +2,7 @@
 
 import { memo } from "react";
 import Incrementer from "../Incrementer";
-import InputLabel from "../../utility/InputLabel";
+import InputLabel from "../../type/InputLabel";
 import type { IncrementerBlockViewProps } from "./IncrementerBlock.types";
 
 function IncrementerBlockView({

app/components/controls/InfoMessageBox/InfoMessageBox.container.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { memo, useCallback, useState } from "react";
+import InfoMessageBoxView from "./InfoMessageBox.view";
+import type { InfoMessageBoxProps } from "./InfoMessageBox.types";
+
+/**
+ * Figma: "Utility / InfoMessageBox"; canonical code under `controls/`.
+ * Bordered message box that lists checkbox items under a title with optional
+ * leading icon.
+ */
+const InfoMessageBoxContainer = memo<InfoMessageBoxProps>(
+  ({
+    title,
+    items,
+    icon,
+    checkedIds: controlledCheckedIds,
+    onCheckboxChange,
+    className = "",
+  }) => {
+    const [internalCheckedIds, setInternalCheckedIds] = useState<string[]>([]);
+    const checkedIds =
+      controlledCheckedIds !== undefined
+        ? controlledCheckedIds
+        : internalCheckedIds;
+
+    const handleGroupChange = useCallback(
+      (newValue: string[]) => {
+        if (controlledCheckedIds === undefined) {
+          setInternalCheckedIds(newValue);
+        }
+        if (!onCheckboxChange) return;
+        const prevSet = new Set(checkedIds);
+        const newSet = new Set(newValue);
+        items.forEach((item) => {
+          const nowChecked = newSet.has(item.id);
+          const wasChecked = prevSet.has(item.id);
+          if (nowChecked !== wasChecked) {
+            onCheckboxChange(item.id, nowChecked);
+          }
+        });
+      },
+      [checkedIds, controlledCheckedIds, items, onCheckboxChange],
+    );
+
+    return (
+      <InfoMessageBoxView
+        title={title}
+        items={items}
+        icon={icon}
+        checkedIds={checkedIds}
+        onGroupChange={handleGroupChange}
+        className={className}
+      />
+    );
+  },
+);
+
+InfoMessageBoxContainer.displayName = "InfoMessageBox";
+
+export default InfoMessageBoxContainer;

app/components/controls/InfoMessageBox/InfoMessageBox.types.ts

@@ -0,0 +1,29 @@
+import type { ReactNode } from "react";
+
+export interface InfoMessageBoxItem {
+  id: string;
+  label: string;
+}
+
+export interface InfoMessageBoxProps {
+  /** Heading text for the message box */
+  title: string;
+  /** Checkbox items (id used as value for CheckboxGroup) */
+  items: InfoMessageBoxItem[];
+  /** Optional icon (e.g. exclamation); default exclamation icon used if not provided */
+  icon?: ReactNode;
+  /** Controlled checked ids; if undefined, uncontrolled */
+  checkedIds?: string[];
+  /** Callback when a checkbox is toggled */
+  onCheckboxChange?: (id: string, checked: boolean) => void;
+  className?: string;
+}
+
+export interface InfoMessageBoxViewProps {
+  title: string;
+  items: InfoMessageBoxItem[];
+  icon?: ReactNode;
+  checkedIds: string[];
+  onGroupChange: (value: string[]) => void;
+  className: string;
+}

app/components/controls/InfoMessageBox/InfoMessageBox.view.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { memo } from "react";
+import CheckboxGroup from "../CheckboxGroup";
+import type { InfoMessageBoxViewProps } from "./InfoMessageBox.types";
+
+/** Exclamation icon per Figma 19751:35053 – vertical bar + dot inside circle; circle bg white 10% opacity, no border */
+function ExclamationIconInline() {
+  const fillColor = "var(--color-content-default-primary, white)";
+  return (
+    <svg
+      width={24}
+      height={24}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className="shrink-0"
+      aria-hidden
+    >
+      <circle cx="12" cy="12" r="10" fill="rgba(255,255,255,0.1)" />
+      <path
+        d="M11.25 14.0386V5.53857H12.75V14.0386H11.25ZM11.25 18.4616V16.9616H12.75V18.4616H11.25Z"
+        fill={fillColor}
+      />
+    </svg>
+  );
+}
+
+function InfoMessageBoxView({
+  title,
+  items,
+  icon,
+  checkedIds,
+  onGroupChange,
+  className,
+}: InfoMessageBoxViewProps) {
+  const options = items.map((item) => ({
+    value: item.id,
+    label: item.label,
+  }));
+
+  const handleChange = (data: { value: string[] }) => {
+    onGroupChange(data.value);
+  };
+
+  return (
+    <div
+      className={`flex flex-col gap-[12px] p-[var(--spacing-measures-spacing-500,20px)] rounded-[var(--measures-radius-300,12px)] border-l-2 border-solid border-[var(--color-border-default-secondary,#1f1f1f)] bg-[var(--color-content-inverse-secondary,#1f1f1f)] w-full min-w-0 ${className}`}
+      role="region"
+      aria-label={title}
+    >
+      <div className="flex items-center gap-[var(--measures-spacing-200,8px)] min-w-0">
+        <div
+          className="relative shrink-0 size-6 flex items-center justify-center"
+          data-name="Asset / Icon / exclamation"
+        >
+          {icon ?? <ExclamationIconInline />}
+        </div>
+        <p className="font-inter font-medium text-[14px] leading-[16px] text-[var(--color-content-default-primary,white)] min-w-0">
+          {title}
+        </p>
+      </div>
+      <div className="flex flex-col gap-[12px] [&_label]:gap-[6px] [&_label_span]:text-[12px] [&_label_span]:leading-[16px] [&_label_span]:opacity-80 pl-8">
+        <CheckboxGroup
+          mode="standard"
+          value={checkedIds}
+          onChange={handleChange}
+          options={options}
+          aria-label={title}
+          className="flex flex-col gap-[12px] !space-y-0"
+        />
+      </div>
+    </div>
+  );
+}
+
+export default memo(InfoMessageBoxView);

app/components/controls/InfoMessageBox/index.tsx

@@ -0,0 +1,5 @@
+export { default } from "./InfoMessageBox.container";
+export type {
+  InfoMessageBoxProps,
+  InfoMessageBoxItem,
+} from "./InfoMessageBox.types";

app/components/controls/InputWithCounter/InputWithCounter.container.tsx

@@ -5,7 +5,7 @@ import { InputWithCounterView } from "./InputWithCounter.view";
 import type { InputWithCounterProps } from "./InputWithCounter.types";
 
 /**
- * Figma: "Control / InputWithCounter" (TODO(figma)).
+ * Figma: "Control / InputWithCounter".
  * Single-line text input with a label, optional help glyph, and a live
  * `value.length / maxLength` counter underneath.
  */

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

@@ -5,7 +5,7 @@ import MultiSelectView from "./MultiSelect.view";
 import type { MultiSelectProps } from "./MultiSelect.types";
 
 /**
- * Figma: "Control / MultiSelect" (TODO(figma)). Labelled set of chips for
+ * Figma: "Control / MultiSelect". Labelled set of chips for
  * picking multiple values, with an optional add button for custom entries.
  */
 const MultiSelectContainer = memo<MultiSelectProps>(

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

@@ -2,7 +2,7 @@
 
 import { memo } from "react";
 import Chip from "../Chip";
-import InputLabel from "../../utility/InputLabel";
+import InputLabel from "../../type/InputLabel";
 import type { MultiSelectViewProps } from "./MultiSelect.types";
 
 function MultiSelectView({
@@ -88,7 +88,7 @@ function MultiSelectView({
             }}
             className={
               !addButtonText
-                ? // Circular button with border (RuleCard style)
+                ? // Circular button with border (Rule style)
                   `bg-[var(--color-surface-default-transparent,rgba(0,0,0,0))] border-[1.25px] ${isInverse ? "border-[var(--color-border-default-primary,#141414)]" : "border-[var(--color-border-default-tertiary,#464646)]"} border-solid flex items-center justify-center ${isSmall ? "size-[30px]" : "size-[40px]"} rounded-[var(--measures-radius-full,9999px)] shrink-0 hover:opacity-80 transition-opacity`
                 : // Text add control (default palette: white label + brand “+”; inverse: inverse primary for both)
                   `flex items-center justify-center overflow-hidden rounded-[var(--measures-radius-full,9999px)] shrink-0 hover:opacity-80 transition-opacity ${

app/components/controls/RadioGroup/RadioGroup.container.tsx

@@ -5,7 +5,7 @@ import { RadioGroupView } from "./RadioGroup.view";
 import type { RadioGroupProps } from "./RadioGroup.types";
 
 /**
- * Figma: "Control / RadioGroup" (TODO(figma)). Group of radio buttons sharing
+ * Figma: "Control / RadioGroup". Group of radio buttons sharing
  * a name that emits the single currently selected value.
  */
 const RadioGroupContainer = ({

app/components/controls/SelectInput/SelectInput.container.tsx

@@ -18,7 +18,7 @@ import { SelectInputView } from "./SelectInput.view";
 import type { SelectInputProps } from "./SelectInput.types";
 
 /**
- * Figma: "Control / SelectInput" (TODO(figma)). Custom-styled select dropdown
+ * Figma: "Control / SelectInput". Custom-styled select dropdown
  * with a labelled trigger button and floating option menu.
  */
 const SelectInputContainer = forwardRef<HTMLButtonElement, SelectInputProps>(

app/components/controls/SelectOption/SelectOption.container.tsx

@@ -5,7 +5,7 @@ import { SelectOptionView } from "./SelectOption.view";
 import type { SelectOptionProps } from "./SelectOption.types";
 
 /**
- * Figma: "Control / SelectOption" (TODO(figma)). Single option row rendered
+ * Figma: "Control / SelectOption". Single option row rendered
  * inside `SelectInput`'s dropdown menu.
  */
 const SelectOptionContainer = forwardRef<HTMLDivElement, SelectOptionProps>(

app/components/controls/Switch/Switch.container.tsx

@@ -5,7 +5,7 @@ import { SwitchView } from "./Switch.view";
 import type { SwitchProps } from "./Switch.types";
 
 /**
- * Figma: "Control / Switch" (TODO(figma)). Animated on/off toggle switch,
+ * Figma: "Control / Switch". Animated on/off toggle switch,
  * optionally paired with a trailing text label.
  */
 const SwitchContainer = memo(

app/components/controls/TextArea/TextArea.container.tsx

@@ -6,7 +6,7 @@ import { TextAreaView } from "./TextArea.view";
 import type { TextAreaProps } from "./TextArea.types";
 
 /**
- * Figma: "Control / TextArea" (TODO(figma)). Multi-line text input with size
+ * Figma: "Control / TextArea". Multi-line text input with size
  * variants, an embedded appearance, and an optional label and help glyph.
  */
 const TextAreaContainer = forwardRef<HTMLTextAreaElement, TextAreaProps>(

app/components/controls/TextInput/TextInput.container.tsx

@@ -6,7 +6,7 @@ import { TextInputView } from "./TextInput.view";
 import type { TextInputProps } from "./TextInput.types";
 
 /**
- * Figma: "Control / TextInput" (TODO(figma)). Single-line text input with size
+ * Figma: "Control / TextInput". Single-line text input with size
  * variants and managed default/active/focus/error states.
  */
 const TextInputContainer = forwardRef<HTMLInputElement, TextInputProps>(

app/components/controls/Toggle/Toggle.container.tsx

@@ -5,7 +5,7 @@ import { ToggleView } from "./Toggle.view";
 import type { ToggleProps } from "./Toggle.types";
 
 /**
- * Figma: "Control / Toggle" (TODO(figma)). Pill-shaped toggle button with
+ * Figma: "Control / Toggle". Pill-shaped toggle button with
  * checked/unchecked states and optional leading icon and text.
  */
 const ToggleContainer = forwardRef<HTMLButtonElement, ToggleProps>(

app/components/controls/ToggleGroup/ToggleGroup.container.tsx

@@ -5,7 +5,7 @@ import { ToggleGroupView } from "./ToggleGroup.view";
 import type { ToggleGroupProps } from "./ToggleGroup.types";
 
 /**
- * Figma: "Control / ToggleGroup" (TODO(figma)). Segmented row of `Toggle`
+ * Figma: "Control / ToggleGroup". Segmented row of `Toggle`
  * buttons whose corner radii are shared based on position (left/middle/right).
  */
 const ToggleGroupContainer = memo(

app/components/controls/Upload/Upload.container.tsx

@@ -5,7 +5,7 @@ import UploadView from "./Upload.view";
 import type { UploadProps } from "./Upload.types";
 
 /**
- * Figma: "Control / Upload" (TODO(figma)). Click-to-upload tile with a label
+ * Figma: "Control / Upload". Click-to-upload tile with a label
  * and hint text used to add an image from the user's device.
  */
 const UploadContainer = memo<UploadProps>(

app/components/controls/Upload/Upload.view.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { memo } from "react";
-import InputLabel from "../../utility/InputLabel";
+import InputLabel from "../../type/InputLabel";
 import type { UploadViewProps } from "./Upload.types";
 
 function UploadView({