Component cleanup

app/components/asset/Avatar/index.tsx

@@ -0,0 +1,2 @@
+export { default } from "./Avatar";
+export type { AvatarSizeValue } from "./Avatar";

app/components/asset/icon/Icon.tsx

@@ -1,14 +1,15 @@
 "use client";
 
+import Image from "next/image";
 import { memo } from "react";
-import ArrowBackIcon from "./icon/arrow_back.svg";
-import ContentCopyIcon from "./icon/content_copy.svg";
-import EditIcon from "./icon/edit.svg";
-import ExclamationIcon from "./icon/exclamation.svg";
-import ChevronRightIcon from "./icon/chevron_right.svg";
-import LogOutIcon from "./icon/log_out.svg";
-import MailIcon from "./icon/mail.svg";
-import WarningIcon from "./icon/warning.svg";
+import ArrowBackIcon from "./arrow_back.svg";
+import ContentCopyIcon from "./content_copy.svg";
+import EditIcon from "./edit.svg";
+import ExclamationIcon from "./exclamation.svg";
+import ChevronRightIcon from "./chevron_right.svg";
+import LogOutIcon from "./log_out.svg";
+import MailIcon from "./mail.svg";
+import WarningIcon from "./warning.svg";
 
 export const ICON_NAME_OPTIONS = [
   "arrow_back",
@@ -75,12 +76,13 @@ function IconComponent({
   // Turbopack/webpack mismatch: `.svg` may be a URL string instead of SVGR output.
   if (typeof resolved === "string") {
     return (
-      <img
+      <Image
         src={resolved}
         width={size}
         height={size}
         className={className}
         alt=""
+        unoptimized
         aria-hidden={ariaHidden}
       />
     );

app/components/asset/icon/index.tsx

@@ -0,0 +1,3 @@
+export { default } from "./Icon";
+export { ICON_NAME_OPTIONS } from "./Icon";
+export type { IconName, IconProps } from "./Icon";

app/components/asset/index.tsx

@@ -1,3 +0,0 @@
-export { default as Icon, ICON_NAME_OPTIONS } from "./Icon";
-export type { IconName, IconProps } from "./Icon";
-export { default as Logo } from "./logo";

app/components/buttons/Button/Button.tsx

@@ -4,7 +4,7 @@ import type {
   ButtonTypeValue,
   ButtonPaletteValue,
   ButtonStateValue,
-} from "../../../lib/propNormalization";
+} from "../../../../lib/propNormalization";
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   children: React.ReactNode;

app/components/buttons/Button/index.tsx

@@ -0,0 +1 @@
+export { default } from "./Button";

app/components/buttons/InlineTextButton/index.tsx

@@ -0,0 +1,2 @@
+export { default } from "./InlineTextButton";
+export type { InlineTextButtonProps } from "./InlineTextButton";

app/components/cards/Card/Card.view.tsx

@@ -1,101 +0,0 @@
-"use client";
-
-import Tag from "../../utility/Tag";
-import type { CardViewProps } from "./Card.types";
-
-function InfoIcon() {
-  return (
-    <span
-      className="flex h-[var(--spacing-scale-016)] w-[var(--spacing-scale-016)] shrink-0 items-center justify-center rounded-full border border-[var(--color-content-invert-brand-secondary)] bg-transparent font-inter text-[10px] font-medium leading-none text-[var(--color-content-invert-brand-secondary)]"
-      aria-hidden
-    >
-      ?
-    </span>
-  );
-}
-
-function CardTag({
-  recommended,
-  selected,
-}: {
-  recommended: boolean;
-  selected: boolean;
-}) {
-  if (selected) return <Tag variant="selected" />;
-  if (recommended) return <Tag variant="recommended" />;
-  return null;
-}
-
-export function CardView({
-  label,
-  supportText,
-  recommended,
-  selected,
-  orientation,
-  showInfoIcon,
-  id: cardId,
-  className,
-  onClick,
-  onKeyDown,
-}: CardViewProps) {
-  const borderClass = "border border-[var(--color-border-default-primary)]";
-  const selectedBorder = selected
-    ? "outline outline-2 outline-dashed outline-black outline-offset-[-2px]"
-    : "";
-  const baseClasses = `select-none rounded-[var(--radius-measures-radius-small)] bg-[#FFFFFF] p-4 transition-[border-color,box-shadow,outline] duration-200 cursor-pointer ${borderClass} ${selectedBorder} ${className}`;
-
-  if (orientation === "horizontal") {
-    return (
-      <div
-        {...(cardId ? { "data-card-id": cardId } : {})}
-        role="button"
-        tabIndex={0}
-        aria-label={supportText ? `${label}: ${supportText}` : label}
-        className={baseClasses}
-        onClick={onClick}
-        onKeyDown={onKeyDown}
-      >
-        <div className="flex flex-col gap-2 items-start w-full">
-          <CardTag recommended={recommended} selected={selected} />
-          <span className="font-inter text-base font-semibold leading-6 text-black w-full">
-            {label}
-          </span>
-          {supportText ? (
-            <p className="font-inter text-sm font-normal leading-5 text-black w-full">
-              {supportText}
-            </p>
-          ) : null}
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div
-      {...(cardId ? { "data-card-id": cardId } : {})}
-      role="button"
-      tabIndex={0}
-      aria-label={supportText ? `${label}: ${supportText}` : label}
-      className={`${baseClasses} flex flex-row items-center justify-between gap-4`}
-      onClick={onClick}
-      onKeyDown={onKeyDown}
-    >
-      <div className="min-w-0 flex-1 flex flex-col gap-1">
-        <div className="flex items-center gap-2">
-          <span className="font-inter text-base font-semibold leading-6 text-black">
-            {label}
-          </span>
-          {showInfoIcon ? <InfoIcon /> : null}
-        </div>
-        {supportText ? (
-          <p className="font-inter text-sm font-normal leading-5 text-black">
-            {supportText}
-          </p>
-        ) : null}
-      </div>
-      <div className="shrink-0 w-[6rem]">
-        <CardTag recommended={recommended} selected={selected} />
-      </div>
-    </div>
-  );
-}

app/components/cards/Card/index.tsx

@@ -1,2 +0,0 @@
-export { default } from "./Card.container";
-export type { CardProps } from "./Card.types";

app/components/cards/CardStack/CardStack.container.tsx

@@ -8,7 +8,8 @@ const DEFAULT_TOGGLE_LABEL = "See all communication approaches";
 const DEFAULT_SHOW_LESS_LABEL = "Show less";
 
 /**
- * Figma: "Utility / CardStack" (TODO(figma)). Selectable stack of cards with
+ * Figma: "Utility / CardStack"; canonical code under `cards/`.
+ * Selectable stack of cards with
  * an optional "see all"/"show less" expand toggle.
  */
 const CardStackContainer = memo<CardStackProps>(

app/components/cards/CardStack/CardStack.view.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import HeaderLockup from "../../type/HeaderLockup";
-import Card from "../../cards/Card";
+import Selection from "../Selection";
 import type { CardStackViewProps } from "./CardStack.types";
 
 export function CardStackView({
@@ -59,7 +59,7 @@ export function CardStackView({
         ) : null}
         <div className="flex w-full min-w-0 flex-col gap-2">
           {displayedCards.map((item) => (
-            <Card
+            <Selection
               key={item.id}
               id={item.id}
               label={item.label}
@@ -103,7 +103,7 @@ export function CardStackView({
       {expanded ? (
         <div className="mx-auto grid w-full max-w-[min(100%,860px)] grid-cols-1 gap-x-4 gap-y-6 md:grid-cols-2">
           {cards.map((item) => (
-            <Card
+            <Selection
               key={item.id}
               id={item.id}
               label={item.label}
@@ -120,7 +120,7 @@ export function CardStackView({
         <>
           <div className="flex w-full flex-col gap-2 md:hidden">
             {compactCards.map((item) => (
-              <Card
+              <Selection
                 key={item.id}
                 id={item.id}
                 label={item.label}
@@ -143,7 +143,7 @@ export function CardStackView({
             <div className="hidden flex-col gap-2 lg:flex">
               <div className="flex justify-center gap-2">
                 {compactCards.slice(0, 3).map((item) => (
-                  <Card
+                  <Selection
                     key={item.id}
                     id={item.id}
                     label={item.label}
@@ -162,7 +162,7 @@ export function CardStackView({
                   {compactCards
                     .slice(3, compactRecommendedLimit)
                     .map((item) => (
-                      <Card
+                      <Selection
                         key={item.id}
                         id={item.id}
                         label={item.label}
@@ -181,7 +181,7 @@ export function CardStackView({
             <div className="hidden flex-col gap-2 md:flex lg:hidden">
               <div className="flex justify-center gap-2">
                 {compactCards.slice(0, 2).map((item) => (
-                  <Card
+                  <Selection
                     key={item.id}
                     id={item.id}
                     label={item.label}
@@ -197,7 +197,7 @@ export function CardStackView({
               </div>
               <div className="flex justify-center gap-2">
                 {compactCards.slice(2, 4).map((item) => (
-                  <Card
+                  <Selection
                     key={item.id}
                     id={item.id}
                     label={item.label}
@@ -213,7 +213,7 @@ export function CardStackView({
               </div>
               {compactCards[4] ? (
                 <div className="flex justify-center gap-2">
-                  <Card
+                  <Selection
                     id={compactCards[4].id}
                     label={compactCards[4].label}
                     supportText={compactCards[4].supportText}
@@ -233,7 +233,7 @@ export function CardStackView({
         <>
           <div className="flex w-full flex-col gap-2 md:hidden">
             {compactCards.map((item) => (
-              <Card
+              <Selection
                 key={item.id}
                 id={item.id}
                 label={item.label}
@@ -253,7 +253,7 @@ export function CardStackView({
               <div className="mx-auto hidden w-full max-w-[min(100%,860px)] flex-col gap-2 md:flex lg:hidden">
                 <div className="flex justify-center gap-2">
                   {compactCards.slice(0, 2).map((item) => (
-                    <Card
+                    <Selection
                       key={item.id}
                       id={item.id}
                       label={item.label}
@@ -268,7 +268,7 @@ export function CardStackView({
                   ))}
                 </div>
                 <div className="flex justify-center">
-                  <Card
+                  <Selection
                     id={compactCards[2].id}
                     label={compactCards[2].label}
                     supportText={compactCards[2].supportText}
@@ -283,7 +283,7 @@ export function CardStackView({
               </div>
               <div className="mx-auto hidden w-full max-w-[min(100%,860px)] flex-wrap justify-center gap-2 lg:flex">
                 {compactCards.map((item) => (
-                  <Card
+                  <Selection
                     key={item.id}
                     id={item.id}
                     label={item.label}
@@ -305,7 +305,7 @@ export function CardStackView({
                   key={item.id}
                   className="flex w-full min-w-0 shrink-0 justify-center md:w-[281px] md:max-w-[281px]"
                 >
-                  <Card
+                  <Selection
                     id={item.id}
                     label={item.label}
                     supportText={item.supportText}
@@ -326,7 +326,7 @@ export function CardStackView({
           {/* Compact under 640: single column, up to 5 recommended cards */}
           <div className="flex w-full flex-col gap-2 md:hidden">
             {compactCards.map((item) => (
-              <Card
+              <Selection
                 key={item.id}
                 id={item.id}
                 label={item.label}
@@ -352,7 +352,7 @@ export function CardStackView({
                       : "md:col-start-4 md:col-span-2";
               return (
                 <div key={item.id} className={colClass}>
-                  <Card
+                  <Selection
                     id={item.id}
                     label={item.label}
                     supportText={item.supportText}

app/components/cards/Icon/Icon.container.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 import { memo } from "react";
-import { IconCardView } from "./IconCard.view";
-import type { IconCardProps } from "./IconCard.types";
+import { IconView } from "./Icon.view";
+import type { IconProps } from "./Icon.types";
 
-const IconCardContainer = memo<IconCardProps>(
+const IconContainer = memo<IconProps>(
   ({ icon, title, description, className = "", onClick }) => {
     const handleClick = () => {
       if (onClick) onClick();
@@ -18,7 +18,7 @@ const IconCardContainer = memo<IconCardProps>(
     };
 
     return (
-      <IconCardView
+      <IconView
         icon={icon}
         title={title}
         description={description}
@@ -30,6 +30,6 @@ const IconCardContainer = memo<IconCardProps>(
   },
 );
 
-IconCardContainer.displayName = "IconCard";
+IconContainer.displayName = "Icon";
 
-export default IconCardContainer;
+export default IconContainer;

app/components/cards/Icon/Icon.types.ts

@@ -1,4 +1,4 @@
-export interface IconCardProps {
+export interface IconProps {
   icon: React.ReactNode;
   title: string;
   description: string;
@@ -6,7 +6,7 @@ export interface IconCardProps {
   onClick?: () => void;
 }
 
-export interface IconCardViewProps {
+export interface IconViewProps {
   icon: React.ReactNode;
   title: string;
   description: string;

app/components/cards/Icon/Icon.view.tsx

@@ -1,15 +1,15 @@
 "use client";
 
-import type { IconCardViewProps } from "./IconCard.types";
+import type { IconViewProps } from "./Icon.types";
 
-export function IconCardView({
+export function IconView({
   icon,
   title,
   description,
   className,
   onClick,
   onKeyDown,
-}: IconCardViewProps) {
+}: IconViewProps) {
   return (
     <div
       className={`border border-[var(--color-border-default-primary)] flex flex-col h-[350px] items-start justify-between p-[var(--measures-spacing-020)] relative w-[288px] bg-transparent cursor-pointer transition-all duration-200 hover:scale-[1.02] hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-brand-primary)] focus:ring-offset-2 ${className}`}

app/components/cards/Icon/index.tsx

@@ -0,0 +1,2 @@
+export { default } from "./Icon.container";
+export type { IconProps } from "./Icon.types";

app/components/cards/IconCard/index.tsx

@@ -1,2 +0,0 @@
-export { default } from "./IconCard.container";
-export type { IconCardProps } from "./IconCard.types";

app/components/cards/Mini/Mini.container.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 import { memo, useMemo } from "react";
-import MiniCardView from "./MiniCard.view";
-import type { MiniCardProps } from "./MiniCard.types";
+import MiniView from "./Mini.view";
+import type { MiniProps } from "./Mini.types";
 
-const MiniCardContainer = memo<MiniCardProps>(
+const MiniContainer = memo<MiniProps>(
   ({
     children,
     className = "",
@@ -75,7 +75,7 @@ const MiniCardContainer = memo<MiniCardProps>(
     }, [href, onClick, computedAriaLabel]);
 
     return (
-      <MiniCardView
+      <MiniView
         className={className}
         backgroundColor={backgroundColor}
         panelContent={panelContent}
@@ -87,11 +87,11 @@ const MiniCardContainer = memo<MiniCardProps>(
         wrapperProps={wrapperProps}
       >
         {children}
-      </MiniCardView>
+      </MiniView>
     );
   },
 );
 
-MiniCardContainer.displayName = "MiniCard";
+MiniContainer.displayName = "Mini";
 
-export default MiniCardContainer;
+export default MiniContainer;

app/components/cards/Mini/Mini.types.ts

@@ -1,4 +1,4 @@
-export interface MiniCardProps {
+export interface MiniProps {
   children?: React.ReactNode;
   className?: string;
   backgroundColor?: string;
@@ -11,7 +11,7 @@ export interface MiniCardProps {
   ariaLabel?: string;
 }
 
-export interface MiniCardViewProps {
+export interface MiniViewProps {
   children?: React.ReactNode;
   className: string;
   backgroundColor: string;

app/components/cards/Mini/Mini.view.tsx

@@ -2,9 +2,9 @@
 
 import { memo } from "react";
 import Image from "next/image";
-import type { MiniCardViewProps } from "./MiniCard.types";
+import type { MiniViewProps } from "./Mini.types";
 
-function MiniCardView({
+function MiniView({
   children,
   className,
   backgroundColor,
@@ -15,7 +15,7 @@ function MiniCardView({
   computedAriaLabel,
   wrapperElement,
   wrapperProps,
-}: MiniCardViewProps) {
+}: MiniViewProps) {
   const cardContentElement = (
     <div className={`h-[186px] flex flex-col gap-[7px] ${className}`}>
       {/* Top part - Inner panel */}
@@ -81,6 +81,6 @@ function MiniCardView({
   );
 }
 
-MiniCardView.displayName = "MiniCardView";
+MiniView.displayName = "MiniView";
 
-export default memo(MiniCardView);
+export default memo(MiniView);

app/components/cards/Mini/index.tsx

@@ -0,0 +1,2 @@
+export { default } from "./Mini.container";
+export type { MiniProps } from "./Mini.types";

app/components/cards/MiniCard/index.tsx

@@ -1,2 +0,0 @@
-export { default } from "./MiniCard.container";
-export type { MiniCardProps } from "./MiniCard.types";

app/components/cards/Rule/Rule.container.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import { memo } from "react";
-import { RuleCardView } from "./RuleCard.view";
-import type { RuleCardProps } from "./RuleCard.types";
+import { RuleView } from "./Rule.view";
+import type { RuleProps } from "./Rule.types";
 
 declare global {
   interface Window {
@@ -21,7 +21,7 @@ declare global {
  * Figma: "Card / Rule" — e.g. profile `22143:900771` when **Has bottom link** is on
  * (`hasBottomLinks` + `bottomLinks` / optional `bottomStatusLabel`).
  */
-const RuleCardContainer = memo<RuleCardProps>(
+const RuleContainer = memo<RuleProps>(
   ({
     title,
     description,
@@ -72,7 +72,7 @@ const RuleCardContainer = memo<RuleCardProps>(
     };
 
     return (
-      <RuleCardView
+      <RuleView
         title={title}
         description={description}
         icon={icon}
@@ -95,6 +95,6 @@ const RuleCardContainer = memo<RuleCardProps>(
   },
 );
 
-RuleCardContainer.displayName = "RuleCard";
+RuleContainer.displayName = "Rule";
 
-export default RuleCardContainer;
+export default RuleContainer;

app/components/cards/Rule/Rule.types.ts

@@ -1,4 +1,5 @@
 import type { ChipOption } from "../../controls/MultiSelect/MultiSelect.types";
+import type { RuleSizeValue } from "../../../../lib/propNormalization";
 
 export interface Category {
   name: string;
@@ -14,14 +15,14 @@ export interface Category {
 }
 
 /** Bottom row for `Card / Rule` when Figma **Has bottom link** is on (profile, etc.). */
-export interface RuleCardBottomLink {
+export interface RuleBottomLink {
   id: string;
   label: string;
   href?: string;
   onClick?: () => void;
 }
 
-export interface RuleCardProps {
+export interface RuleProps {
   title: string;
   description?: string;
   icon?: React.ReactNode;
@@ -29,7 +30,7 @@ export interface RuleCardProps {
   className?: string;
   onClick?: () => void;
   expanded?: boolean;
-  size?: "XS" | "S" | "M" | "L";
+  size?: RuleSizeValue;
   categories?: Category[];
   logoUrl?: string;
   logoAlt?: string;
@@ -44,10 +45,10 @@ export interface RuleCardProps {
   hasBottomLinks?: boolean;
   /** Uppercase chip (e.g. IN PROGRESS); omit when no left badge. */
   bottomStatusLabel?: string;
-  bottomLinks?: RuleCardBottomLink[];
+  bottomLinks?: RuleBottomLink[];
 }
 
-export interface RuleCardViewProps {
+export interface RuleViewProps {
   title: string;
   description?: string;
   icon?: React.ReactNode;
@@ -56,7 +57,7 @@ export interface RuleCardViewProps {
   onClick?: () => void;
   onKeyDown?: (_event: React.KeyboardEvent<HTMLDivElement>) => void;
   expanded: boolean;
-  size: "XS" | "S" | "M" | "L";
+  size: RuleSizeValue;
   categories?: Category[];
   logoUrl?: string;
   logoAlt?: string;
@@ -64,5 +65,5 @@ export interface RuleCardViewProps {
   hideCategoryAddButton?: boolean;
   hasBottomLinks?: boolean;
   bottomStatusLabel?: string;
-  bottomLinks?: RuleCardBottomLink[];
+  bottomLinks?: RuleBottomLink[];
 }

app/components/cards/Rule/Rule.view.tsx

@@ -4,9 +4,9 @@ import Image from "next/image";
 import { useTranslation } from "../../../contexts/MessagesContext";
 import MultiSelect from "../../controls/MultiSelect";
 import NavigationLink from "../../navigation/Link";
-import type { RuleCardBottomLink, RuleCardViewProps } from "./RuleCard.types";
+import type { RuleBottomLink, RuleViewProps } from "./Rule.types";
 
-export function RuleCardView({
+export function RuleView({
   title,
   description,
   icon,
@@ -24,7 +24,7 @@ export function RuleCardView({
   hasBottomLinks = false,
   bottomStatusLabel,
   bottomLinks,
-}: RuleCardViewProps) {
+}: RuleViewProps) {
   const t = useTranslation("ruleCard");
   const ariaLabel = t("ariaLabel")?.replace("{title}", title) || title;
   const interactiveCard = !hasBottomLinks;
@@ -181,7 +181,7 @@ export function RuleCardView({
         ? "rounded-[var(--measures-radius-300,12px)]"
         : "rounded-[var(--radius-measures-radius-small)]";
 
-  function renderBottomLink(link: RuleCardBottomLink) {
+  function renderBottomLink(link: RuleBottomLink) {
     const shared = {
       variant: "paragraph" as const,
       type: "primary" as const,

app/components/cards/Rule/index.tsx

@@ -0,0 +1,2 @@
+export { default } from "./Rule.container";
+export type { Category, RuleBottomLink, RuleProps } from "./Rule.types";

app/components/cards/RuleCard/index.tsx

@@ -1,5 +0,0 @@
-export { default } from "./RuleCard.container";
-export type {
-  RuleCardBottomLink,
-  RuleCardProps,
-} from "./RuleCard.types";

app/components/cards/Selection/Selection.container.tsx

@@ -1,10 +1,14 @@
 "use client";
 
 import { memo } from "react";
-import { CardView } from "./Card.view";
-import type { CardProps } from "./Card.types";
+import { SelectionView } from "./Selection.view";
+import type { SelectionProps } from "./Selection.types";
 
-const CardContainer = memo<CardProps>(
+/**
+ * Figma: "Card / CardSelection" — stacked tile e.g. `16775:28762` (recommended + label + supportText).
+ * `orientation="horizontal"` selects that vertical stack; `"vertical"` is label + optional info icon with tag on the right (CardStack expanded / single-column).
+ */
+const SelectionContainer = memo<SelectionProps>(
   ({
     label,
     supportText = "",
@@ -28,7 +32,7 @@ const CardContainer = memo<CardProps>(
     };
 
     return (
-      <CardView
+      <SelectionView
         label={label}
         supportText={supportText}
         recommended={recommended}
@@ -44,6 +48,6 @@ const CardContainer = memo<CardProps>(
   },
 );
 
-CardContainer.displayName = "Card";
+SelectionContainer.displayName = "Selection";
 
-export default CardContainer;
+export default SelectionContainer;

app/components/cards/Selection/Selection.types.ts

@@ -1,17 +1,17 @@
-export interface CardProps {
+export interface SelectionProps {
   label: string;
   supportText?: string;
   recommended?: boolean;
   selected?: boolean;
   orientation: "horizontal" | "vertical";
   showInfoIcon?: boolean;
-  /** Optional id for the card root (e.g. data-card-id for focus after modal close). */
+  /** Optional id for the root (e.g. `data-card-id` for focus after modal close). */
   id?: string;
   className?: string;
   onClick?: () => void;
 }
 
-export interface CardViewProps {
+export interface SelectionViewProps {
   label: string;
   supportText: string;
   recommended: boolean;

app/components/cards/Selection/Selection.view.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import Tag from "../../utility/Tag";
+import type { SelectionViewProps } from "./Selection.types";
+
+function InfoIcon() {
+  return (
+    <span
+      className="flex h-[var(--spacing-scale-016)] w-[var(--spacing-scale-016)] shrink-0 items-center justify-center rounded-full border border-[var(--color-content-invert-brand-secondary)] bg-transparent font-inter text-[10px] font-medium leading-none text-[var(--color-content-invert-brand-secondary)]"
+      aria-hidden
+    >
+      ?
+    </span>
+  );
+}
+
+function SelectionTag({
+  recommended,
+  selected,
+}: {
+  recommended: boolean;
+  selected: boolean;
+}) {
+  if (selected) return <Tag variant="selected" />;
+  if (recommended) return <Tag variant="recommended" />;
+  return null;
+}
+
+export function SelectionView({
+  label,
+  supportText,
+  recommended,
+  selected,
+  orientation,
+  showInfoIcon,
+  id: selectionId,
+  className,
+  onClick,
+  onKeyDown,
+}: SelectionViewProps) {
+  const borderClass = "border border-[var(--color-border-default-primary)]";
+  const selectedBorder = selected
+    ? "outline outline-2 outline-dashed outline-black outline-offset-[-2px]"
+    : "";
+
+  // Figma: "Card / CardSelection" vertical stack — node `16775:28762` (dev).
+  // Prop `orientation="horizontal"` is this stacked layout (historical naming).
+  if (orientation === "horizontal") {
+    const baseClasses = `select-none rounded-[var(--measures-radius-200,8px)] bg-[var(--color-gray-000)] px-4 py-3 transition-[border-color,box-shadow,outline] duration-200 cursor-pointer ${borderClass} ${selectedBorder} ${className}`;
+
+    return (
+      <div
+        {...(selectionId ? { "data-card-id": selectionId } : {})}
+        role="button"
+        tabIndex={0}
+        aria-label={supportText ? `${label}: ${supportText}` : label}
+        className={`${baseClasses} flex min-h-0 w-full flex-col items-start justify-center gap-1`}
+        onClick={onClick}
+        onKeyDown={onKeyDown}
+      >
+        <SelectionTag recommended={recommended} selected={selected} />
+        <span className="w-full font-inter text-base font-medium leading-5 text-[var(--color-content-invert-secondary)]">
+          {label}
+        </span>
+        {supportText ? (
+          <p className="w-full font-inter text-xs font-normal leading-4 text-[var(--color-content-invert-tertiary)]">
+            {supportText}
+          </p>
+        ) : null}
+      </div>
+    );
+  }
+
+  const baseClasses = `select-none rounded-[var(--measures-radius-200,8px)] bg-[var(--color-gray-000)] p-4 transition-[border-color,box-shadow,outline] duration-200 cursor-pointer ${borderClass} ${selectedBorder} ${className}`;
+
+  return (
+    <div
+      {...(selectionId ? { "data-card-id": selectionId } : {})}
+      role="button"
+      tabIndex={0}
+      aria-label={supportText ? `${label}: ${supportText}` : label}
+      className={`${baseClasses} flex flex-row items-center justify-between gap-4`}
+      onClick={onClick}
+      onKeyDown={onKeyDown}
+    >
+      <div className="flex min-w-0 flex-1 flex-col gap-1">
+        <div className="flex items-center gap-1">
+          <span className="font-inter text-base font-medium leading-5 text-[var(--color-content-invert-secondary)]">
+            {label}
+          </span>
+          {showInfoIcon ? <InfoIcon /> : null}
+        </div>
+        {supportText ? (
+          <p className="font-inter text-xs font-normal leading-4 text-[var(--color-content-invert-tertiary)]">
+            {supportText}
+          </p>
+        ) : null}
+      </div>
+      <div className="shrink-0">
+        <SelectionTag recommended={recommended} selected={selected} />
+      </div>
+    </div>
+  );
+}

app/components/cards/Selection/index.tsx

@@ -0,0 +1,2 @@
+export { default } from "./Selection.container";
+export type { SelectionProps } from "./Selection.types";

app/components/cards/Step/Step.tsx

@@ -1,19 +1,18 @@
 "use client";
 
 import { memo } from "react";
-import SectionNumber from "../sections/SectionNumber";
+import type { StepSizeValue } from "../../../../lib/propNormalization";
+import SectionNumber from "../../sections/SectionNumber";
 
-export type NumberCardSizeValue = "small" | "medium" | "large" | "xlarge";
-
-interface NumberCardProps {
+interface StepProps {
   number: number;
   text: string;
-  size?: NumberCardSizeValue;
+  size?: StepSizeValue;
   iconShape?: string;
   iconColor?: string;
 }
 
-const NumberCard = memo<NumberCardProps>(({ number, text, size: sizeProp }) => {
+const Step = memo<StepProps>(({ number, text, size: sizeProp }) => {
   const baseClasses =
     "bg-[var(--color-surface-inverse-primary)] rounded-[12px] shadow-lg";
 
@@ -101,6 +100,6 @@ const NumberCard = memo<NumberCardProps>(({ number, text, size: sizeProp }) => {
   );
 });
 
-NumberCard.displayName = "NumberCard";
+Step.displayName = "Step";
 
-export default NumberCard;
+export default Step;

app/components/cards/Step/index.tsx

@@ -0,0 +1,2 @@
+export { default } from "./Step";
+export type { StepSizeValue } from "../../../../lib/propNormalization";

app/components/cards/TemplateReviewCard/TemplateChipDetailModal.tsx

@@ -3,7 +3,7 @@
 import { useMemo } from "react";
 import Create from "../../modals/Create";
 import Chip from "../../controls/Chip";
-import InputLabel from "../../utility/InputLabel";
+import InputLabel from "../../type/InputLabel";
 import ContentLockup from "../../type/ContentLockup";
 import ModalTextAreaField from "../../../(app)/create/components/ModalTextAreaField";
 import { useMessages, useTranslation } from "../../../contexts/MessagesContext";

app/components/cards/TemplateReviewCard/TemplateReviewCard.tsx

@@ -2,11 +2,8 @@
 
 import { useMemo, useState } from "react";
 import Image from "next/image";
-import RuleCard from "../RuleCard";
-import type {
-  Category,
-  RuleCardProps,
-} from "../RuleCard/RuleCard.types";
+import Rule from "../Rule";
+import type { Category, RuleProps } from "../Rule";
 import { getAssetPath } from "../../../../lib/assetUtils";
 import type { RuleTemplateDto } from "../../../../lib/create/fetchTemplates";
 import {
@@ -21,14 +18,14 @@ import { TemplateChipDetailModal } from "./TemplateChipDetailModal";
 
 export interface TemplateReviewCardProps {
   template: RuleTemplateDto;
-  /** Merged onto RuleCard `className` (e.g. final-review desktop vs mobile radius/padding). */
+  /** Merged onto Rule `className` (e.g. final-review desktop vs mobile radius/padding). */
   ruleCardClassName?: string;
-  /** RuleCard size; create-flow passes `L` at/above `md`, `M` below (640px). */
-  size?: RuleCardProps["size"];
+  /** Rule size; create-flow passes `L` at/above `md`, `M` below (640px). */
+  size?: RuleProps["size"];
 }
 
 /**
- * Expanded RuleCard for template review: surfaces + icon from Figma catalog (21764-16435);
+ * Expanded Rule for template review: surfaces + icon from Figma catalog (21764-16435);
  * tag rows from API `body`. Chip clicks open a read-only detail modal per
  * facet group (values / communication / membership / decision-making / conflict
  * management) so reviewers can see what each chip means without editing.
@@ -56,7 +53,7 @@ export function TemplateReviewCard({
           setActiveChipId(chipId);
         },
       })),
-    [rawCategories],
+    [rawCategories, setActiveChipId],
   );
 
   const activeDetail =
@@ -64,7 +61,7 @@ export function TemplateReviewCard({
 
   return (
     <>
-      <RuleCard
+      <Rule
         title={template.title}
         description={summary}
         expanded

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

@@ -5,8 +5,9 @@ import InfoMessageBoxView from "./InfoMessageBox.view";
 import type { InfoMessageBoxProps } from "./InfoMessageBox.types";
 
 /**
- * Figma: "Utility / InfoMessageBox" (TODO(figma)). Bordered message box that
- * lists checkbox items under a title with an optional leading icon.
+ * 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>(
   ({

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

@@ -1,7 +1,7 @@
 "use client";
 
 import { memo } from "react";
-import CheckboxGroup from "../../controls/CheckboxGroup";
+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 */

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({

app/components/layout/List/List.types.ts

@@ -1,4 +1,4 @@
-import type { IconName } from "../../asset/Icon";
+import type { IconName } from "../../asset/icon";
 import type {
   ListEntryVariant,
   ListSize,

app/components/layout/ListEntry/ListEntry.types.ts

@@ -1,4 +1,4 @@
-import type { IconName } from "../../asset/Icon";
+import type { IconName } from "../../asset/icon";
 
 export const LIST_SIZE_OPTIONS = ["s", "m", "l"] as const;
 export type ListSize = (typeof LIST_SIZE_OPTIONS)[number];

app/components/layout/ListEntry/ListEntry.view.tsx

@@ -2,7 +2,7 @@
 
 import { memo } from "react";
 import Link from "next/link";
-import Icon, { type IconName } from "../../asset/Icon";
+import Icon, { type IconName } from "../../asset/icon";
 import Divider from "../../utility/Divider";
 import { FIGMA_LIST_ENTRY_OUTER, listEntrySizeLayout } from "../listSizeLayout";
 import type {

app/components/modals/ContextMenu/ContextMenu.tsx

@@ -1,41 +0,0 @@
-"use client";
-
-import { forwardRef, memo } from "react";
-
-interface ContextMenuProps extends React.HTMLAttributes<HTMLDivElement> {
-  className?: string;
-  children?: React.ReactNode;
-}
-
-const ContextMenu = forwardRef<HTMLDivElement, ContextMenuProps>(
-  ({ className = "", children, ...props }, ref) => {
-    const menuClasses = `
-      bg-black
-      border border-[var(--color-border-default-tertiary)]
-      rounded-[var(--measures-radius-medium)]
-      shadow-lg
-      p-[4px]
-      min-w-[200px]
-      max-w-[300px]
-      ${className}
-    `
-      .trim()
-      .replace(/\s+/g, " ");
-
-    return (
-      <div
-        ref={ref}
-        className={menuClasses}
-        role="menu"
-        style={{ backgroundColor: "#000000" }}
-        {...props}
-      >
-        {children}
-      </div>
-    );
-  },
-);
-
-ContextMenu.displayName = "ContextMenu";
-
-export default memo(ContextMenu);

app/components/modals/ContextMenu/ContextMenuDivider.tsx

@@ -1,27 +0,0 @@
-"use client";
-
-import { forwardRef, memo } from "react";
-
-interface ContextMenuDividerProps extends React.HTMLAttributes<HTMLDivElement> {
-  className?: string;
-}
-
-const ContextMenuDivider = forwardRef<HTMLDivElement, ContextMenuDividerProps>(
-  ({ className = "", ...props }, ref) => {
-    const dividerClasses = `
-    border-t border-[var(--color-border-default-tertiary)]
-    my-1
-    ${className}
-  `
-      .trim()
-      .replace(/\s+/g, " ");
-
-    return (
-      <div ref={ref} className={dividerClasses} role="separator" {...props} />
-    );
-  },
-);
-
-ContextMenuDivider.displayName = "ContextMenuDivider";
-
-export default memo(ContextMenuDivider);

app/components/modals/ContextMenu/ContextMenuSection.tsx

@@ -1,36 +0,0 @@
-"use client";
-
-import { forwardRef, memo } from "react";
-
-interface ContextMenuSectionProps extends React.HTMLAttributes<HTMLDivElement> {
-  title?: string;
-  children?: React.ReactNode;
-  className?: string;
-}
-
-const ContextMenuSection = forwardRef<HTMLDivElement, ContextMenuSectionProps>(
-  ({ title, children, className = "", ...props }, ref) => {
-    const sectionClasses = `
-    ${className}
-  `
-      .trim()
-      .replace(/\s+/g, " ");
-
-    return (
-      <div ref={ref} className={sectionClasses} role="group" {...props}>
-        {title && (
-          <div className="px-3 py-2">
-            <div className="text-[var(--color-content-default-primary)] text-sm font-medium">
-              {title}
-            </div>
-          </div>
-        )}
-        {children}
-      </div>
-    );
-  },
-);
-
-ContextMenuSection.displayName = "ContextMenuSection";
-
-export default memo(ContextMenuSection);

app/components/modals/ContextMenuItem/ContextMenuItem.container.tsx

@@ -1,101 +0,0 @@
-"use client";
-
-import { forwardRef, memo, useCallback } from "react";
-import { ContextMenuItemView } from "./ContextMenuItem.view";
-import type { ContextMenuItemProps } from "./ContextMenuItem.types";
-
-const ContextMenuItemContainer = forwardRef<
-  HTMLDivElement,
-  ContextMenuItemProps
->(
-  (
-    {
-      children,
-      selected = false,
-      hasSubmenu = false,
-      disabled = false,
-      className = "",
-      onClick,
-      size: sizeProp = "medium",
-      ...props
-    },
-    ref,
-  ) => {
-    const size = sizeProp;
-    const getTextSize = (): string => {
-      switch (size) {
-        case "small":
-          return "text-[10px] leading-[14px]";
-        case "medium":
-          return "text-[14px] leading-[20px]";
-        case "large":
-          return "text-[16px] leading-[24px]";
-        default:
-          return "text-[14px] leading-[20px]";
-      }
-    };
-
-    const itemClasses = `
-      flex items-center justify-between
-      px-[8px] py-[4px]
-      text-[var(--color-content-default-brand-primary)]
-      ${getTextSize()}
-      cursor-pointer
-      transition-colors duration-150
-      ${
-        selected
-          ? "bg-[var(--color-surface-default-secondary)] rounded-[var(--measures-radius-small)]"
-          : ""
-      }
-      ${
-        disabled
-          ? "opacity-50 cursor-not-allowed"
-          : "hover:!bg-[var(--color-surface-default-secondary)] hover:!rounded-[var(--measures-radius-small)]"
-      }
-      ${className}
-    `
-      .trim()
-      .replace(/\s+/g, " ");
-
-    const handleClick = useCallback(
-      (e: React.MouseEvent<HTMLDivElement>) => {
-        if (!disabled && onClick) {
-          onClick(e);
-        }
-      },
-      [disabled, onClick],
-    );
-
-    const handleKeyDown = useCallback(
-      (e: React.KeyboardEvent<HTMLDivElement>) => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          if (!disabled && onClick) {
-            onClick(e);
-          }
-        }
-      },
-      [disabled, onClick],
-    );
-
-    return (
-      <ContextMenuItemView
-        ref={ref}
-        selected={selected}
-        hasSubmenu={hasSubmenu}
-        disabled={disabled}
-        className={className}
-        itemClasses={itemClasses}
-        handleClick={handleClick}
-        handleKeyDown={handleKeyDown}
-        {...props}
-      >
-        {children}
-      </ContextMenuItemView>
-    );
-  },
-);
-
-ContextMenuItemContainer.displayName = "ContextMenuItem";
-
-export default memo(ContextMenuItemContainer);

app/components/modals/ContextMenuItem/ContextMenuItem.types.ts

@@ -1,27 +0,0 @@
-export type ContextMenuItemSizeValue = "small" | "medium" | "large";
-
-export interface ContextMenuItemProps extends React.HTMLAttributes<HTMLDivElement> {
-  children?: React.ReactNode;
-  selected?: boolean;
-  hasSubmenu?: boolean;
-  disabled?: boolean;
-  className?: string;
-  onClick?: (
-    _e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>,
-  ) => void;
-  /**
-   * Context menu item size.
-   */
-  size?: ContextMenuItemSizeValue;
-}
-
-export interface ContextMenuItemViewProps {
-  children?: React.ReactNode;
-  selected: boolean;
-  hasSubmenu: boolean;
-  disabled: boolean;
-  className: string;
-  itemClasses: string;
-  handleClick: (_e: React.MouseEvent<HTMLDivElement>) => void;
-  handleKeyDown: (_e: React.KeyboardEvent<HTMLDivElement>) => void;
-}

app/components/modals/ContextMenuItem/ContextMenuItem.view.tsx

@@ -1,71 +0,0 @@
-import { forwardRef } from "react";
-import type { ContextMenuItemViewProps } from "./ContextMenuItem.types";
-
-export const ContextMenuItemView = forwardRef<
-  HTMLDivElement,
-  ContextMenuItemViewProps
->(
-  (
-    {
-      children,
-      selected,
-      hasSubmenu,
-      disabled,
-      itemClasses,
-      handleClick,
-      handleKeyDown,
-      ...props
-    },
-    ref,
-  ) => {
-    return (
-      <div
-        ref={ref}
-        className={itemClasses}
-        role="menuitem"
-        tabIndex={disabled ? -1 : 0}
-        aria-current={selected ? "true" : undefined}
-        aria-disabled={disabled}
-        onClick={handleClick}
-        onKeyDown={handleKeyDown}
-        {...props}
-      >
-        <div className="flex items-center gap-[8px]">
-          {selected && (
-            <svg
-              className="w-4 h-4 text-[var(--color-content-default-brand-primary)]"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M5 13l4 4L19 7"
-              />
-            </svg>
-          )}
-          <span>{children}</span>
-        </div>
-        {hasSubmenu && (
-          <svg
-            className="w-4 h-4 text-[var(--color-content-default-brand-primary)]"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={2}
-              d="M9 5l7 7-7 7"
-            />
-          </svg>
-        )}
-      </div>
-    );
-  },
-);
-
-ContextMenuItemView.displayName = "ContextMenuItemView";

app/components/modals/ContextMenuItem/index.tsx

@@ -1,2 +0,0 @@
-export { default } from "./ContextMenuItem.container";
-export type { ContextMenuItemProps } from "./ContextMenuItem.types";

app/components/modals/Create/Create.view.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import ContentLockup from "../../type/ContentLockup";
-import ModalFooter from "../../utility/ModalFooter";
-import ModalHeader from "../../utility/ModalHeader";
+import ModalFooter from "../ModalFooter";
+import ModalHeader from "../ModalHeader";
 import { CreateModalFrameView } from "./CreateModalFrame.view";
 import type { CreateViewProps } from "./Create.types";
 

app/components/modals/Create/useCreateModalA11y.ts

@@ -78,5 +78,5 @@ export function useCreateModalA11y(
       document.removeEventListener("keydown", handleTab);
       previousActiveElementRef.current?.focus();
     };
-  }, [isOpen]);
+  }, [dialogRef, isOpen]);
 }

app/components/modals/Dialog/Dialog.container.tsx

@@ -32,7 +32,6 @@ const DialogContainer = memo<DialogProps>(
         title={title}
         description={description}
         footer={footer}
-        children={children}
         className={className}
         ariaLabel={ariaLabel}
         ariaLabelledBy={titleId}
@@ -40,7 +39,9 @@ const DialogContainer = memo<DialogProps>(
         backdropVariant={backdropVariant}
         overlayRef={overlayRef}
         dialogRef={dialogRef}
-      />
+      >
+        {children}
+      </DialogView>
     );
   },
 );

app/components/modals/Dialog/Dialog.view.tsx

@@ -2,8 +2,8 @@
 
 import { memo } from "react";
 import ContentLockup from "../../type/ContentLockup";
-import ModalFooter from "../../utility/ModalFooter";
-import ModalHeader from "../../utility/ModalHeader";
+import ModalFooter from "../ModalFooter";
+import ModalHeader from "../ModalHeader";
 import { CreateModalFrameView } from "../Create/CreateModalFrame.view";
 import type { DialogViewProps } from "./Dialog.types";
 

app/components/modals/Login/Login.view.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { createPortal } from "react-dom";
-import ModalHeader from "../../utility/ModalHeader";
+import ModalHeader from "../ModalHeader";
 import type { LoginBackdropVariant, LoginViewProps } from "./Login.types";
 
 const backdropClasses: Record<LoginBackdropVariant, string> = {

app/components/modals/ModalFooter/ModalFooter.container.tsx

@@ -5,7 +5,7 @@ import { ModalFooterView } from "./ModalFooter.view";
 import type { ModalFooterProps } from "./ModalFooter.types";
 
 /**
- * Figma: "Utility / ModalFooter" (TODO(figma)).
+ * Figma: "Utility / ModalFooter". Lives under `modals/` with other composed modal chrome.
  * Sticky modal footer slot used by the create-flow + login modals to host
  * primary/secondary actions.
  */

app/components/modals/ModalHeader/ModalHeader.container.tsx

@@ -5,7 +5,7 @@ import { ModalHeaderView } from "./ModalHeader.view";
 import type { ModalHeaderProps } from "./ModalHeader.types";
 
 /**
- * Figma: "Utility / ModalHeader" (TODO(figma)).
+ * Figma: "Utility / ModalHeader". Lives under `modals/` with other composed modal chrome.
  * Sticky 48px modal header with optional close (left) and more-options
  * (right) icon buttons.
  */

app/components/navigation/ConditionalNavigationClient.tsx

@@ -2,7 +2,7 @@
 
 import { memo } from "react";
 import { usePathname } from "next/navigation";
-import TopNavWithPathname from "./TopNav/TopNavWithPathname";
+import TopWithPathname from "./Top/TopWithPathname";
 
 export type ConditionalNavigationClientProps = {
   initialSignedIn: boolean;
@@ -22,7 +22,7 @@ const ConditionalNavigationClient = memo(
       return null;
     }
 
-    return <TopNavWithPathname initialSignedIn={initialSignedIn} />;
+    return <TopWithPathname initialSignedIn={initialSignedIn} />;
   },
 );
 

app/components/navigation/CreateFlowFooter/CreateFlowFooter.container.tsx

@@ -5,7 +5,7 @@ import { CreateFlowFooterView } from "./CreateFlowFooter.view";
 import type { CreateFlowFooterProps } from "./CreateFlowFooter.types";
 
 /**
- * Figma: "Utility / CreateFlowFooter" (TODO(figma)). Sticky footer for the
+ * Figma: "Utility / CreateFlowFooter". Sticky footer for the
  * create flow with a back action, optional secondary button, and progress bar.
  */
 const CreateFlowFooterContainer = memo<CreateFlowFooterProps>(

app/components/navigation/CreateFlowTopNav/CreateFlowTopNav.container.tsx

@@ -6,8 +6,8 @@ import { CreateFlowTopNavView } from "./CreateFlowTopNav.view";
 import type { CreateFlowTopNavProps } from "./CreateFlowTopNav.types";
 
 /**
- * Figma: "Utility / CreateFlowTopNav" (TODO(figma)). Top navigation bar for
- * the create flow with exit, share, export, and edit actions.
+ * Figma: Utility / CreateFlowTopNav — wizard header (create-flow chrome).
+ * Exit, optional share / export / edit; strings in `messages/en/create/topNav.json`.
  */
 const CreateFlowTopNavContainer = memo<CreateFlowTopNavProps>(
   ({

app/components/navigation/CreateFlowTopNav/CreateFlowTopNav.view.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import Logo from "../../asset/logo";
+import Logo from "../../asset/Logo";
 import Button from "../../buttons/Button";
 import { useTranslation } from "../../../contexts/MessagesContext";
 import type { CreateFlowTopNavProps } from "./CreateFlowTopNav.types";
@@ -27,12 +27,12 @@ export function CreateFlowTopNavView({
     <header
       className={`bg-black w-full ${className}`}
       role="banner"
-      aria-label="Create Rule Flow Navigation"
+      aria-label={t("bannerAriaLabel")}
     >
       <nav
         className="flex items-center justify-between mx-auto max-w-[639px] md:max-w-[1920px] px-[var(--spacing-measures-spacing-500,20px)] md:px-[48px] py-[var(--spacing-measures-spacing-300,12px)] md:py-[var(--spacing-measures-spacing-016,16px)]"
         role="navigation"
-        aria-label="Create Flow Navigation"
+        aria-label={t("navAriaLabel")}
       >
         <Logo size="createFlow" wordmark palette={buttonPalette} />
 

app/components/navigation/Footer.tsx

@@ -3,8 +3,8 @@
 import { memo } from "react";
 import { useTranslation } from "../../contexts/MessagesContext";
 import Link from "next/link";
-import Logo from "../asset/logo";
-import Separator from "../utility/Separator";
+import Logo from "../asset/Logo";
+import Divider from "../utility/Divider";
 import { getAssetPath, ASSETS } from "../../../lib/assetUtils";
 
 /**
@@ -158,7 +158,7 @@ const Footer = memo(() => {
             </div>
           </div>
 
-          <Separator />
+          <Divider />
 
           <div
             className="flex w-full flex-col

app/components/navigation/Menu.tsx

@@ -3,27 +3,27 @@
 import { memo } from "react";
 import { useTranslation } from "../../contexts/MessagesContext";
 
-export type MenuBarSizeValue =
+export type MenuSizeValue =
   | "X Small"
   | "Small"
   | "Medium"
   | "Large"
   | "X Large";
 
-interface MenuBarProps extends React.HTMLAttributes<HTMLElement> {
+interface MenuProps extends React.HTMLAttributes<HTMLElement> {
   children?: React.ReactNode;
   className?: string;
   /**
-   * Menu bar size. Uses Figma format: "X Small", "Small", "Medium", "Large", "X Large".
+   * Menu size. Uses Figma format: "X Small", "Small", "Medium", "Large", "X Large".
    * @default "X Small"
    */
-  size?: MenuBarSizeValue;
+  size?: MenuSizeValue;
 }
 
-const MenuBar = memo<MenuBarProps>(
+const Menu = memo<MenuProps>(
   ({ children, className = "", size: sizeProp = "X Small", ...props }) => {
     const size = sizeProp ?? "X Small";
-    const t = useTranslation("menuBar");
+    const t = useTranslation("menu");
 
     // Size styles based on Figma specifications
     const sizeStyles: Record<
@@ -57,6 +57,6 @@ const MenuBar = memo<MenuBarProps>(
   },
 );
 
-MenuBar.displayName = "MenuBar";
+Menu.displayName = "Menu";
 
-export default MenuBar;
+export default Menu;

app/components/navigation/MenuBarItem/index.tsx

@@ -1,2 +0,0 @@
-export { default } from "./MenuBarItem.container";
-export type { MenuBarItemProps } from "./MenuBarItem.types";

app/components/navigation/MenuItem/MenuItem.container.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 import { memo } from "react";
-import MenuBarItemView from "./MenuBarItem.view";
-import type { MenuBarItemProps } from "./MenuBarItem.types";
+import MenuItemView from "./MenuItem.view";
+import type { MenuItemProps } from "./MenuItem.types";
 
-const MenuBarItemContainer = memo<MenuBarItemProps>(
+const MenuItemContainer = memo<MenuItemProps>(
   ({
     href = "#",
     buttonOnClick,
@@ -106,7 +106,7 @@ const MenuBarItemContainer = memo<MenuBarItemProps>(
     };
 
     return (
-      <MenuBarItemView
+      <MenuItemView
         href={href}
         buttonOnClick={buttonOnClick}
         disabled={disabled}
@@ -115,11 +115,11 @@ const MenuBarItemContainer = memo<MenuBarItemProps>(
         accessibilityProps={accessibilityProps}
       >
         {children}
-      </MenuBarItemView>
+      </MenuItemView>
     );
   },
 );
 
-MenuBarItemContainer.displayName = "MenuBarItem";
+MenuItemContainer.displayName = "MenuItem";
 
-export default MenuBarItemContainer;
+export default MenuItemContainer;

app/components/navigation/MenuItem/MenuItem.types.ts

@@ -1,40 +1,40 @@
-export type MenuBarItemSizeValue =
+export type MenuItemSizeValue =
   | "X Small"
   | "Small"
   | "Medium"
   | "Large"
   | "X Large";
 
-export type MenuBarItemStateValue = "default" | "hover" | "selected";
+export type MenuItemStateValue = "default" | "hover" | "selected";
 
-export type MenuBarItemModeValue = "default" | "inverse";
+export type MenuItemModeValue = "default" | "inverse";
 
-export interface MenuBarItemProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+export interface MenuItemProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   href?: string;
   /** When set, renders a `<button type="button">` instead of a link (e.g. open login modal). */
   buttonOnClick?: () => void;
   children?: React.ReactNode;
   /**
-   * Menu bar item state: "default", "hover", or "selected".
+   * Menu item state: "default", "hover", or "selected".
    * @default "default"
    */
-  state?: MenuBarItemStateValue;
+  state?: MenuItemStateValue;
   /**
-   * Menu bar item mode. Default mode has yellow text on dark background.
+   * Menu item mode. Default mode has yellow text on dark background.
    * Inverse mode has black text on yellow background (for folderTop variant).
    * @default "default"
    */
-  mode?: MenuBarItemModeValue;
+  mode?: MenuItemModeValue;
   /**
    * Whether to show an icon (for future icon support).
    * @default false
    */
   icon?: boolean;
   /**
-   * Menu bar item size. Uses Figma format: "X Small", "Small", "Medium", "Large", "X Large".
+   * Menu item size. Uses Figma format: "X Small", "Small", "Medium", "Large", "X Large".
    * @default "X Small"
    */
-  size?: MenuBarItemSizeValue;
+  size?: MenuItemSizeValue;
   className?: string;
   disabled?: boolean;
   /**
@@ -45,7 +45,7 @@ export interface MenuBarItemProps extends React.AnchorHTMLAttributes<HTMLAnchorE
   ariaLabel?: string;
 }
 
-export interface MenuBarItemViewProps {
+export interface MenuItemViewProps {
   href: string;
   buttonOnClick?: () => void;
   children?: React.ReactNode;

app/components/navigation/MenuItem/MenuItem.view.tsx

@@ -1,14 +1,14 @@
 import { memo } from "react";
-import type { MenuBarItemViewProps } from "./MenuBarItem.types";
+import type { MenuItemViewProps } from "./MenuItem.types";
 
-function MenuBarItemView({
+function MenuItemView({
   href,
   buttonOnClick,
   children,
   disabled,
   combinedStyles,
   accessibilityProps,
-}: MenuBarItemViewProps) {
+}: MenuItemViewProps) {
   if (disabled) {
     return (
       <span className={combinedStyles} {...accessibilityProps}>
@@ -37,6 +37,6 @@ function MenuBarItemView({
   );
 }
 
-MenuBarItemView.displayName = "MenuBarItemView";
+MenuItemView.displayName = "MenuItemView";
 
-export default memo(MenuBarItemView);
+export default memo(MenuItemView);