Component cleanup

app/(app)/create/screens/card/CommunicationMethodsScreen.tsx

@@ -24,7 +24,7 @@ import {
   useFacetRecommendations,
 } from "../../hooks/useFacetRecommendations";
 import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
-import CardStack from "../../../../components/utility/CardStack";
+import CardStack from "../../../../components/cards/CardStack";
 import Create from "../../../../components/modals/Create";
 import InlineTextButton from "../../../../components/buttons/InlineTextButton";
 import { CreateFlowStepShell } from "../../components/CreateFlowStepShell";

app/(app)/create/screens/card/ConflictManagementScreen.tsx

@@ -22,7 +22,7 @@ import {
   useFacetRecommendations,
 } from "../../hooks/useFacetRecommendations";
 import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
-import CardStack from "../../../../components/utility/CardStack";
+import CardStack from "../../../../components/cards/CardStack";
 import Create from "../../../../components/modals/Create";
 import InlineTextButton from "../../../../components/buttons/InlineTextButton";
 import { CreateFlowStepShell } from "../../components/CreateFlowStepShell";

app/(app)/create/screens/card/MembershipMethodsScreen.tsx

@@ -23,7 +23,7 @@ import {
   useFacetRecommendations,
 } from "../../hooks/useFacetRecommendations";
 import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
-import CardStack from "../../../../components/utility/CardStack";
+import CardStack from "../../../../components/cards/CardStack";
 import Create from "../../../../components/modals/Create";
 import InlineTextButton from "../../../../components/buttons/InlineTextButton";
 import { CreateFlowStepShell } from "../../components/CreateFlowStepShell";

app/(app)/create/screens/completed/CompletedScreen.tsx

@@ -2,8 +2,8 @@
 
 import { useState, useEffect } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
-import CommunityRuleDocument from "../../../../components/sections/CommunityRuleDocument";
-import type { CommunityRuleDocumentSection } from "../../../../components/sections/CommunityRuleDocument/CommunityRuleDocument.types";
+import CommunityRule from "../../../../components/type/CommunityRule";
+import type { CommunityRuleSection } from "../../../../components/type/CommunityRule/CommunityRule.types";
 import Alert from "../../../../components/modals/Alert";
 import { useMessages } from "../../../../contexts/MessagesContext";
 import { fetchPublishedRuleDetail } from "../../../../../lib/create/api";
@@ -24,7 +24,7 @@ function initialCompletedUi(
 ): {
   headerTitle: string;
   headerDescription: string | undefined;
-  documentSections: CommunityRuleDocumentSection[];
+  documentSections: CommunityRuleSection[];
 } {
   if (ruleIdFromUrl) {
     return {
@@ -80,7 +80,7 @@ export function CompletedScreen() {
     string | undefined
   >(initial.headerDescription);
   const [documentSections, setDocumentSections] =
-    useState<CommunityRuleDocumentSection[]>(initial.documentSections);
+    useState<CommunityRuleSection[]>(initial.documentSections);
 
   useEffect(() => {
     if (!ruleIdParam) return;
@@ -170,7 +170,7 @@ export function CompletedScreen() {
               aria-hidden
             />
             <div className="w-full min-w-0 py-0 md:pb-8">
-              <CommunityRuleDocument
+              <CommunityRule
                 sections={documentSections}
                 useCardStyle={!mdUp}
                 className={mdUp ? "min-w-0" : "w-full min-w-0 p-4"}

app/(app)/create/screens/review/CommunityReviewScreen.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useRef } from "react";
 import { useRouter } from "next/navigation";
-import RuleCard from "../../../../components/cards/RuleCard";
+import Rule from "../../../../components/cards/Rule";
 import { useTranslation } from "../../../../contexts/MessagesContext";
 import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
 import { useCreateFlow } from "../../context/CreateFlowContext";
@@ -12,6 +12,10 @@ import {
   CREATE_FLOW_MD_UP_GRID_CELL_CLASS,
   CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS,
 } from "../../components/createFlowLayoutTokens";
+import {
+  getAssetPath,
+  vectorMarkPath,
+} from "../../../../../lib/assetUtils";
 
 /**
  * Targets for a `pendingTemplateAction` redirect. Customize resumes the
@@ -90,13 +94,13 @@ export function CommunityReviewScreen() {
           />
         </div>
         <div className={CREATE_FLOW_MD_UP_GRID_CELL_CLASS}>
-          <RuleCard
+          <Rule
             title={cardTitle}
             description={cardDescription}
             size={lgUp ? "L" : "M"}
             expanded={false}
             backgroundColor="bg-[var(--color-teal-teal50,#c9fef9)]"
-            logoUrl="/assets/Vector_MutualAid.svg"
+            logoUrl={getAssetPath(vectorMarkPath("mutual-aid"))}
             logoAlt={cardTitle}
             className="rounded-[24px]"
           />

app/(app)/create/screens/review/FinalReviewScreen.tsx

@@ -1,14 +1,13 @@
 "use client";
 
 import { useCallback, useMemo, useState } from "react";
-import RuleCard from "../../../../components/cards/RuleCard";
-import type { Category } from "../../../../components/cards/RuleCard/RuleCard.types";
+import Rule, { type Category } from "../../../../components/cards/Rule";
 import { TemplateChipDetailModal } from "../../../../components/cards/TemplateReviewCard/TemplateChipDetailModal";
 import { useMessages, useTranslation } from "../../../../contexts/MessagesContext";
 import { useCreateFlow } from "../../context/CreateFlowContext";
 import { useCreateFlowMdUp } from "../../hooks/useCreateFlowMdUp";
 import {
-  CREATE_FLOW_REVIEW_RULE_CARD_LAYOUT_CLASS,
+  CREATE_FLOW_REVIEW_RULE_LAYOUT_CLASS,
   CreateFlowLockupCardStepShell,
 } from "../../components/CreateFlowLockupCardStepShell";
 import {
@@ -22,12 +21,16 @@ import {
   type FinalReviewChipEditPatch,
   type FinalReviewChipEditTarget,
 } from "../../components/FinalReviewChipEditModal";
+import {
+  getAssetPath,
+  vectorMarkPath,
+} from "../../../../../lib/assetUtils";
 
 /**
  * `finalReview.json.categories` ships a demo ordering + localized names
  * (Values / Communication / Membership / Decision-making / Conflict
  * management). We reuse that ordering for the state-derived rows so the
- * RuleCard layout stays stable across customize / use-without-changes /
+ * Rule layout stays stable across customize / use-without-changes /
  * plain-custom flows, and fall back to the demo chips when state resolves
  * to nothing selected.
  */
@@ -183,16 +186,16 @@ export function FinalReviewScreen() {
       lockupTitle={t("title")}
       lockupDescription={t("description")}
     >
-      <RuleCard
+      <Rule
         title={ruleCardTitle}
         description={ruleCardDescription}
         size={mdUp ? "L" : "M"}
         expanded={true}
         backgroundColor="bg-[#c9fef9]"
-        logoUrl="/assets/Vector_MutualAid.svg"
+        logoUrl={getAssetPath(vectorMarkPath("mutual-aid"))}
         logoAlt={ruleCardTitle}
         categories={finalReviewCategories}
-        className={CREATE_FLOW_REVIEW_RULE_CARD_LAYOUT_CLASS}
+        className={CREATE_FLOW_REVIEW_RULE_LAYOUT_CLASS}
         onClick={() => {}}
       />
       <FinalReviewChipEditModal

app/(app)/create/screens/right-rail/DecisionApproachesScreen.tsx

@@ -17,12 +17,13 @@
  */
 
 import { useState, useCallback, useMemo } from "react";
-import DecisionMakingSidebar from "../../../../components/utility/DecisionMakingSidebar";
-import CardStack from "../../../../components/utility/CardStack";
+import CardStack from "../../../../components/cards/CardStack";
+import HeaderLockup from "../../../../components/type/HeaderLockup";
 import Create from "../../../../components/modals/Create";
 import InlineTextButton from "../../../../components/buttons/InlineTextButton";
-import type { InfoMessageBoxItem } from "../../../../components/utility/InfoMessageBox/InfoMessageBox.types";
-import type { CardStackItem } from "../../../../components/utility/CardStack/CardStack.types";
+import InfoMessageBox from "../../../../components/controls/InfoMessageBox";
+import type { InfoMessageBoxItem } from "../../../../components/controls/InfoMessageBox/InfoMessageBox.types";
+import type { CardStackItem } from "../../../../components/cards/CardStack/CardStack.types";
 import { useMessages } from "../../../../contexts/MessagesContext";
 import { useCreateFlow } from "../../context/CreateFlowContext";
 import { useCreateFlowMdUp } from "../../hooks/useCreateFlowMdUp";
@@ -204,16 +205,20 @@ export function DecisionApproachesScreen() {
       contentTopBelowMd="space-800"
       lgVerticalAlign="start"
       header={
-        <DecisionMakingSidebar
-          title={da.sidebar.title}
-          description={sidebarDescription}
-          messageBoxTitle={da.messageBox.title}
-          messageBoxItems={messageBoxItems}
-          messageBoxCheckedIds={messageBoxCheckedIds}
-          onMessageBoxCheckboxChange={handleMessageBoxCheckboxChange}
-          size={mdUp ? "L" : "M"}
-          justification={mdUp ? "left" : "center"}
-        />
+        <div className="flex w-full min-w-0 flex-col gap-3">
+          <HeaderLockup
+            title={da.sidebar.title}
+            description={sidebarDescription}
+            size={mdUp ? "L" : "M"}
+            justification={mdUp ? "left" : "center"}
+          />
+          <InfoMessageBox
+            title={da.messageBox.title}
+            items={messageBoxItems}
+            checkedIds={messageBoxCheckedIds}
+            onCheckboxChange={handleMessageBoxCheckboxChange}
+          />
+        </div>
       }
     >
       <div className="flex w-full min-w-0 flex-col items-stretch gap-6 py-0">