Informational and text templates

app/components/type/HeaderLockup/HeaderLockup.container.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { memo } from "react";
+import HeaderLockupView from "./HeaderLockup.view";
+import type { HeaderLockupProps } from "./HeaderLockup.types";
+import {
+  normalizeHeaderLockupJustification,
+  normalizeHeaderLockupSize,
+} from "../../../../lib/propNormalization";
+
+const HeaderLockupContainer = memo<HeaderLockupProps>(
+  ({
+    title,
+    description,
+    justification: justificationProp = "left",
+    size: sizeProp = "L",
+  }) => {
+    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
+    const justification = normalizeHeaderLockupJustification(justificationProp);
+    const size = normalizeHeaderLockupSize(sizeProp);
+
+    return (
+      <HeaderLockupView
+        title={title}
+        description={description}
+        justification={justification}
+        size={size}
+      />
+    );
+  },
+);
+
+HeaderLockupContainer.displayName = "HeaderLockup";
+
+export default HeaderLockupContainer;

app/components/type/HeaderLockup/HeaderLockup.types.ts

@@ -0,0 +1,30 @@
+export type HeaderLockupJustificationValue = "left" | "center" | "Left" | "Center";
+export type HeaderLockupSizeValue = "L" | "M" | "l" | "m";
+
+export interface HeaderLockupProps {
+  /**
+   * Title text (required)
+   */
+  title: string;
+  /**
+   * Description text (optional)
+   */
+  description?: string;
+  /**
+   * Text justification. Accepts both PascalCase (Figma) and lowercase (codebase).
+   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   */
+  justification?: HeaderLockupJustificationValue;
+  /**
+   * Size variant. Accepts both PascalCase (Figma) and lowercase (codebase).
+   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   */
+  size?: HeaderLockupSizeValue;
+}
+
+export interface HeaderLockupViewProps {
+  title: string;
+  description?: string;
+  justification: "left" | "center";
+  size: "L" | "M";
+}

app/components/type/HeaderLockup/HeaderLockup.view.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { memo } from "react";
+import type { HeaderLockupViewProps } from "./HeaderLockup.types";
+
+function HeaderLockupView({
+  title,
+  description,
+  justification,
+  size,
+}: HeaderLockupViewProps) {
+  const isL = size === "L";
+  const isLeft = justification === "left";
+
+  return (
+    <div
+      className={`flex flex-col gap-[var(--measures-spacing-200,8px)] py-[12px] relative ${
+        isLeft ? "items-start" : "items-center"
+      }`}
+    >
+      {/* Title */}
+      <div className="flex items-center relative shrink-0 w-full">
+        <h1
+          className={`flex-[1_0_0] min-h-px min-w-px overflow-hidden relative text-[var(--color-content-default-primary,white)] text-ellipsis whitespace-pre-wrap ${
+            isLeft ? "text-left" : "text-center"
+          } ${
+            isL
+              ? "font-bricolage-grotesque font-extrabold text-[36px] leading-[44px]"
+              : "font-bricolage-grotesque font-bold text-[28px] leading-[36px]"
+          }`}
+        >
+          {title}
+        </h1>
+      </div>
+
+      {/* Description */}
+      {description && (
+        <p
+          className={`font-inter font-normal max-w-[640px] overflow-hidden relative shrink-0 text-[var(--color-content-default-tertiary,#b4b4b4)] text-ellipsis w-full whitespace-pre-wrap ${
+            isLeft ? "" : "text-center"
+          } ${
+            isL
+              ? "text-[18px] leading-[1.3]"
+              : "text-[14px] leading-[20px]"
+          }`}
+        >
+          {description}
+        </p>
+      )}
+    </div>
+  );
+}
+
+HeaderLockupView.displayName = "HeaderLockupView";
+
+export default memo(HeaderLockupView);

app/components/type/HeaderLockup/index.tsx

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

app/components/type/NumberedList/NumberedList.container.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { memo } from "react";
+import NumberedListView from "./NumberedList.view";
+import type { NumberedListProps } from "./NumberedList.types";
+import { normalizeNumberedListSize } from "../../../../lib/propNormalization";
+
+const NumberedListContainer = memo<NumberedListProps>(
+  ({ items, size: sizeProp = "M" }) => {
+    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
+    const size = normalizeNumberedListSize(sizeProp);
+
+    return <NumberedListView items={items} size={size} />;
+  },
+);
+
+NumberedListContainer.displayName = "NumberedList";
+
+export default NumberedListContainer;

app/components/type/NumberedList/NumberedList.types.ts

@@ -0,0 +1,23 @@
+export type NumberedListSizeValue = "M" | "S" | "m" | "s";
+
+export interface NumberedListItem {
+  title: string;
+  description: string;
+}
+
+export interface NumberedListProps {
+  /**
+   * Array of list items, each with title and description
+   */
+  items: NumberedListItem[];
+  /**
+   * Size variant. Accepts both PascalCase (Figma) and lowercase (codebase).
+   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   */
+  size?: NumberedListSizeValue;
+}
+
+export interface NumberedListViewProps {
+  items: NumberedListItem[];
+  size: "M" | "S";
+}

app/components/type/NumberedList/NumberedList.view.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { memo } from "react";
+import type { NumberedListViewProps } from "./NumberedList.types";
+
+function NumberedListView({ items, size }: NumberedListViewProps) {
+  const isM = size === "M";
+
+  return (
+    <ol className="flex flex-col gap-[var(--measures-spacing-600,24px)] items-start relative w-full list-none">
+      {items.map((item, index) => (
+        <li
+          key={index}
+          className="flex gap-[12px] items-center relative shrink-0 w-full"
+        >
+          {/* Number Indicator */}
+          <div
+            className={`bg-[var(--color-surface-inverse-primary,white)] flex flex-col items-center justify-center px-[11.2px] py-[4px] relative rounded-full shrink-0 ${
+              isM ? "size-[32px]" : "size-[24px]"
+            }`}
+          >
+            <div
+              className={`flex flex-col justify-center leading-[0] overflow-hidden relative shrink-0 text-[var(--color-content-inverse-primary,black)] text-ellipsis whitespace-nowrap ${
+                isM
+                  ? "font-inter font-bold text-[20px] leading-[28px]"
+                  : "font-bricolage-grotesque font-bold text-[16px] leading-[22px]"
+              }`}
+            >
+              <span>{index + 1}</span>
+            </div>
+          </div>
+
+          {/* Content */}
+          <div className="flex flex-[1_0_0] flex-col gap-[var(--measures-spacing-100,4px)] items-start justify-center min-h-px min-w-px">
+            {/* Title */}
+            <div className="flex items-center relative shrink-0 w-full">
+              <h3
+                className={`flex-[1_0_0] min-h-px min-w-px overflow-hidden relative text-[var(--color-content-default-primary,white)] text-ellipsis whitespace-pre-wrap ${
+                  isM
+                    ? "font-inter font-bold text-[20px] leading-[28px]"
+                    : "font-bricolage-grotesque font-bold text-[16px] leading-[22px]"
+                }`}
+              >
+                {item.title}
+              </h3>
+            </div>
+
+            {/* Description */}
+            <p
+              className={`font-inter font-normal max-w-[640px] overflow-hidden relative shrink-0 text-[var(--color-content-default-tertiary,#b4b4b4)] text-ellipsis w-full whitespace-pre-wrap ${
+                isM
+                  ? "text-[14px] leading-[20px]"
+                  : "text-[12px] leading-[16px]"
+              }`}
+            >
+              {item.description}
+            </p>
+          </div>
+        </li>
+      ))}
+    </ol>
+  );
+}
+
+NumberedListView.displayName = "NumberedListView";
+
+export default memo(NumberedListView);

app/components/type/NumberedList/index.tsx

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