@lateralus-ai/shipping-ui 1.4.15 → 2.0.0-dev.0

package/src/icons/index.ts

@@ -0,0 +1,25 @@
+export { createIcon, IconSizeRow } from "./createIcon";
+export type { CreateIconOptions, IconPathSet } from "./createIcon";
+
+export { ChevronIcon } from "./ChevronIcon";
+export type { ChevronIconProps } from "./ChevronIcon";
+export { ArrowIcon } from "./ArrowIcon";
+export type { ArrowIconProps } from "./ArrowIcon";
+
+export { iconsData } from "./icons-data";
+export type { IconDataEntry, IconDataName } from "./icons-data";
+
+export * from "./generated";
+
+export { Icon, iconRegistry } from "./Icon";
+export type { IconName, IconRegistryProps } from "./Icon";
+
+export { hasIconSize, getFilledSizes, getOutlineSizes } from "./icon-sizes";
+
+export {
+  ICON_BOX,
+  type ArrowDirection,
+  type ChevronDirection,
+  type IconProps,
+  type IconSize,
+} from "./types";

package/src/icons/types.ts

@@ -0,0 +1,18 @@
+export type IconSize = "large" | "small" | "xs";
+
+export const ICON_BOX: Record<IconSize, number> = {
+  large: 24,
+  small: 16,
+  xs: 12,
+};
+
+export type IconProps = {
+  size?: IconSize;
+  filled?: boolean;
+  variant?: string;
+  className?: string;
+};
+
+export type ChevronDirection = "left" | "right" | "up" | "down" | "upDown";
+
+export type ArrowDirection = "left" | "right";

package/src/illustrations/AuditPreparation.tsx

@@ -0,0 +1,15 @@
+import { createIllustration } from "./createIllustration";
+
+export const AuditPreparationIllustration = createIllustration({
+  name: "Audit preparation",
+  children: (
+    <>
+      <rect x="36" y="24" width="48" height="64" rx="6" fill="var(--grey-50)" stroke="var(--grey-300)" strokeWidth="1.5" />
+      <rect x="44" y="36" width="32" height="4" rx="2" fill="var(--orange-50)" />
+      <rect x="44" y="48" width="24" height="4" rx="2" fill="var(--grey-200)" />
+      <rect x="44" y="60" width="28" height="4" rx="2" fill="var(--grey-200)" />
+      <path d="M28 88h64" stroke="var(--grey-300)" strokeWidth="2" strokeLinecap="round" />
+      <path d="M52 76v12M68 76v12" stroke="var(--grey-400)" strokeWidth="2" strokeLinecap="round" />
+    </>
+  ),
+});

package/src/illustrations/CompletedTasks.tsx

@@ -0,0 +1,16 @@
+import { createIllustration } from "./createIllustration";
+
+export const CompletedTasksIllustration = createIllustration({
+  name: "Completed tasks",
+  children: (
+    <>
+      <rect x="28" y="32" width="64" height="12" rx="4" fill="var(--green-100)" />
+      <rect x="28" y="52" width="64" height="12" rx="4" fill="var(--green-100)" />
+      <rect x="28" y="72" width="48" height="12" rx="4" fill="var(--grey-100)" />
+      <circle cx="36" cy="38" r="4" fill="var(--green-700)" />
+      <circle cx="36" cy="58" r="4" fill="var(--green-700)" />
+      <circle cx="36" cy="78" r="4" fill="var(--grey-300)" />
+      <path d="M34 38l1.5 1.5 3-3M34 58l1.5 1.5 3-3" stroke="white" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
+    </>
+  ),
+});

package/src/illustrations/Creation.tsx

@@ -0,0 +1,13 @@
+import { createIllustration } from "./createIllustration";
+
+export const CreationIllustration = createIllustration({
+  name: "Creation",
+  children: (
+    <>
+      <rect x="32" y="28" width="56" height="64" rx="8" fill="var(--grey-50)" stroke="var(--grey-300)" strokeWidth="1.5" />
+      <path d="M44 48h32M44 60h24M44 72h28" stroke="var(--grey-300)" strokeWidth="2" strokeLinecap="round" />
+      <circle cx="84" cy="36" r="12" fill="var(--blue-600)" />
+      <path d="M84 30v12M78 36h12" stroke="white" strokeWidth="2" strokeLinecap="round" />
+    </>
+  ),
+});

package/src/illustrations/InternalAudit.tsx

@@ -0,0 +1,13 @@
+import { createIllustration } from "./createIllustration";
+
+export const InternalAuditIllustration = createIllustration({
+  name: "Internal audit",
+  children: (
+    <>
+      <circle cx="60" cy="52" r="24" fill="var(--purple-100)" stroke="var(--purple-700)" strokeWidth="1.5" />
+      <path d="M60 40v16M52 52h16" stroke="var(--purple-700)" strokeWidth="2" strokeLinecap="round" />
+      <rect x="32" y="80" width="56" height="8" rx="4" fill="var(--grey-200)" />
+      <rect x="40" y="72" width="40" height="4" rx="2" fill="var(--grey-300)" />
+    </>
+  ),
+});

package/src/illustrations/Invite.tsx

@@ -0,0 +1,13 @@
+import { createIllustration } from "./createIllustration";
+
+export const InviteIllustration = createIllustration({
+  name: "Invite",
+  children: (
+    <>
+      <circle cx="48" cy="52" r="16" fill="var(--green-100)" stroke="var(--green-700)" strokeWidth="1.5" />
+      <circle cx="76" cy="52" r="12" fill="var(--blue-100)" stroke="var(--blue-600)" strokeWidth="1.5" />
+      <path d="M64 52h8M68 48v8" stroke="var(--grey-700)" strokeWidth="2" strokeLinecap="round" />
+      <rect x="32" y="76" width="56" height="20" rx="6" fill="var(--grey-100)" stroke="var(--grey-200)" strokeWidth="1.5" />
+    </>
+  ),
+});

package/src/illustrations/PortStateControl.tsx

@@ -0,0 +1,13 @@
+import { createIllustration } from "./createIllustration";
+
+export const PortStateControlIllustration = createIllustration({
+  name: "Port state control",
+  children: (
+    <>
+      <path d="M24 80h72" stroke="var(--blue-400)" strokeWidth="2" strokeLinecap="round" />
+      <path d="M36 80V52l24-16 24 16v28" fill="var(--blue-50)" stroke="var(--blue-600)" strokeWidth="1.5" strokeLinejoin="round" />
+      <rect x="52" y="60" width="16" height="20" rx="2" fill="var(--blue-100)" stroke="var(--blue-600)" strokeWidth="1.5" />
+      <circle cx="72" cy="44" r="8" fill="var(--orange-50)" stroke="var(--orange-700)" strokeWidth="1.5" />
+    </>
+  ),
+});

package/src/illustrations/Processing.tsx

@@ -0,0 +1,17 @@
+import { createIllustration } from "./createIllustration";
+
+export const ProcessingIllustration = createIllustration({
+  name: "Processing",
+  children: (
+    <>
+      <circle cx="60" cy="60" r="28" fill="var(--blue-50)" stroke="var(--blue-100)" strokeWidth="1.5" />
+      <path
+        d="M60 36a24 24 0 0 1 20.78 12"
+        stroke="var(--blue-600)"
+        strokeWidth="3"
+        strokeLinecap="round"
+      />
+      <circle cx="60" cy="60" r="4" fill="var(--blue-600)" />
+    </>
+  ),
+});

package/src/illustrations/QuestionsDone.tsx

@@ -0,0 +1,16 @@
+import { createIllustration } from "./createIllustration";
+
+export const QuestionsDoneIllustration = createIllustration({
+  name: "Questions done",
+  children: (
+    <>
+      <rect x="32" y="28" width="56" height="64" rx="8" fill="var(--grey-50)" stroke="var(--grey-300)" strokeWidth="1.5" />
+      <circle cx="44" cy="48" r="6" fill="var(--green-100)" stroke="var(--green-700)" strokeWidth="1.5" />
+      <path d="M42 48l1.5 1.5 3-3" stroke="var(--green-700)" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
+      <rect x="56" y="44" width="24" height="4" rx="2" fill="var(--grey-200)" />
+      <circle cx="44" cy="68" r="6" fill="var(--green-100)" stroke="var(--green-700)" strokeWidth="1.5" />
+      <path d="M42 68l1.5 1.5 3-3" stroke="var(--green-700)" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
+      <rect x="56" y="64" width="20" height="4" rx="2" fill="var(--grey-200)" />
+    </>
+  ),
+});

package/src/illustrations/RightShipInspection.tsx

@@ -0,0 +1,18 @@
+import { createIllustration } from "./createIllustration";
+
+export const RightShipInspectionIllustration = createIllustration({
+  name: "RightShip inspection",
+  children: (
+    <>
+      <path
+        d="M30 72c0-16 13.5-28 30-28s30 12 30 28"
+        fill="var(--blue-50)"
+        stroke="var(--blue-600)"
+        strokeWidth="1.5"
+      />
+      <rect x="46" y="44" width="28" height="16" rx="4" fill="var(--blue-100)" stroke="var(--blue-600)" strokeWidth="1.5" />
+      <path d="M42 72h36" stroke="var(--grey-400)" strokeWidth="2" strokeLinecap="round" />
+      <circle cx="78" cy="36" r="6" fill="var(--green-700)" />
+    </>
+  ),
+});

package/src/illustrations/Upload.tsx

@@ -0,0 +1,12 @@
+import { createIllustration } from "./createIllustration";
+
+export const UploadIllustration = createIllustration({
+  name: "Upload",
+  children: (
+    <>
+      <rect x="28" y="36" width="64" height="48" rx="8" fill="var(--grey-100)" stroke="var(--grey-300)" strokeWidth="1.5" />
+      <path d="M60 52v20M52 60l8-8 8 8" stroke="var(--blue-600)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+      <rect x="36" y="28" width="48" height="8" rx="4" fill="var(--grey-200)" />
+    </>
+  ),
+});

package/src/illustrations/WorkflowCreated.tsx

@@ -0,0 +1,13 @@
+import { createIllustration } from "./createIllustration";
+
+export const WorkflowCreatedIllustration = createIllustration({
+  name: "Workflow created",
+  children: (
+    <>
+      <rect x="24" y="40" width="72" height="40" rx="8" fill="var(--blue-50)" stroke="var(--blue-600)" strokeWidth="1.5" />
+      <path d="M40 60h40M52 48v24" stroke="var(--blue-400)" strokeWidth="1.5" strokeLinecap="round" />
+      <circle cx="84" cy="32" r="14" fill="var(--green-100)" stroke="var(--green-700)" strokeWidth="1.5" />
+      <path d="M79 32l3 3 6-6" stroke="var(--green-700)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    </>
+  ),
+});

package/src/illustrations/Workflows.tsx

@@ -0,0 +1,13 @@
+import { createIllustration } from "./createIllustration";
+
+export const WorkflowsIllustration = createIllustration({
+  name: "Workflows",
+  children: (
+    <>
+      <rect x="20" y="24" width="32" height="24" rx="6" fill="var(--blue-50)" stroke="var(--blue-600)" strokeWidth="1.5" />
+      <rect x="68" y="24" width="32" height="24" rx="6" fill="var(--blue-50)" stroke="var(--blue-600)" strokeWidth="1.5" />
+      <rect x="44" y="72" width="32" height="24" rx="6" fill="var(--blue-100)" stroke="var(--blue-600)" strokeWidth="1.5" />
+      <path d="M52 48v12M68 48v12M52 60h16" stroke="var(--blue-400)" strokeWidth="1.5" strokeLinecap="round" />
+    </>
+  ),
+});

package/src/illustrations/createIllustration.tsx

@@ -0,0 +1,30 @@
+import type { ReactNode, SVGProps } from "react";
+import { cn } from "../utils/cn";
+
+export type IllustrationProps = SVGProps<SVGSVGElement>;
+
+type CreateIllustrationOptions = {
+  name: string;
+  children: ReactNode;
+};
+
+export const createIllustration = ({ name, children }: CreateIllustrationOptions) => {
+  const Illustration = ({ className, ...props }: IllustrationProps) => (
+    <svg
+      width={120}
+      height={120}
+      viewBox="0 0 120 120"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      role="img"
+      aria-label={name}
+      className={cn("shrink-0", className)}
+      {...props}
+    >
+      {children}
+    </svg>
+  );
+
+  Illustration.displayName = name;
+  return Illustration;
+};

package/src/illustrations/index.ts

@@ -0,0 +1,14 @@
+export { createIllustration, type IllustrationProps } from "./createIllustration";
+
+export { WorkflowsIllustration } from "./Workflows";
+export { UploadIllustration } from "./Upload";
+export { ProcessingIllustration } from "./Processing";
+export { InviteIllustration } from "./Invite";
+export { CreationIllustration } from "./Creation";
+export { CompletedTasksIllustration } from "./CompletedTasks";
+export { WorkflowCreatedIllustration } from "./WorkflowCreated";
+export { AuditPreparationIllustration } from "./AuditPreparation";
+export { PortStateControlIllustration } from "./PortStateControl";
+export { RightShipInspectionIllustration } from "./RightShipInspection";
+export { InternalAuditIllustration } from "./InternalAudit";
+export { QuestionsDoneIllustration } from "./QuestionsDone";

package/src/index.ts

@@ -1,4 +1,50 @@
-export { theme as tailwindTheme } from "../src/tailwind-theme";
-export { materialTheme } from "../src/material-theme";
+export { theme as tailwindTheme } from "./tailwind-theme";
 
-export * from "../src/components";
+export * from "./tokens";
+export * from "./icons";
+export * from "./primitives";
+export * from "./illustrations";
+
+export {
+  Input,
+  ReportInput,
+  InputType,
+  Chip,
+  Checkbox,
+  Tab,
+  Tabs,
+  Header,
+  Entry,
+  EmptyState,
+  ModalPanel,
+  PdfViewer,
+  ImageViewer,
+  DocumentEditor,
+} from "./components";
+
+export type {
+  InputProps,
+  InputState,
+  ReportInputProps,
+  ReportInputState,
+  InputTypeProps,
+  InputTypeKind,
+  InputTypeState,
+  ChipProps,
+  ChipVariant,
+  CheckboxProps,
+  TabProps,
+  TabState,
+  TabsProps,
+  TabsItem,
+  TabsType,
+  HeaderProps,
+  HeaderVariant,
+  EntryProps,
+  EntryType,
+  EntryState,
+  EmptyStateProps,
+} from "./components";
+
+export * as Patterns from "./patterns";
+export * as Domain from "./domain";

package/src/patterns/Chat/Attachment.tsx

@@ -0,0 +1,27 @@
+import { FileIcon } from "../../icons";
+import { cn } from "../../utils/cn";
+
+export type AttachmentProps = {
+  name?: string;
+  size?: string;
+  className?: string;
+};
+
+export const Attachment = ({
+  name = "inspection-report.pdf",
+  size = "2.4 MB",
+  className,
+}: AttachmentProps) => (
+  <div
+    className={cn(
+      "inline-flex items-center gap-2 rounded-control border border-divider-primary bg-background-secondary px-3 py-2",
+      className,
+    )}
+  >
+    <FileIcon className="size-5 shrink-0 text-display-on-light-tertiary" />
+    <div className="min-w-0">
+      <p className="truncate text-caption-2-em text-display-on-light-primary">{name}</p>
+      <p className="text-footnote text-display-on-light-quaternary">{size}</p>
+    </div>
+  </div>
+);

package/src/patterns/Chat/ChatEntry.tsx

@@ -0,0 +1,41 @@
+import { type ReactNode } from "react";
+import { Avatar } from "../../primitives";
+import { cn } from "../../utils/cn";
+import type { Chief } from "../Sidebar/Switcher";
+
+export type ChatEntryRole = "user" | "chief";
+
+export type ChatEntryProps = {
+  role?: ChatEntryRole;
+  chief?: Chief;
+  children?: ReactNode;
+  className?: string;
+};
+
+export const ChatEntry = ({
+  role = "chief",
+  chief = "technical",
+  children = "Based on the inspection data, all critical systems are operating within acceptable parameters.",
+  className,
+}: ChatEntryProps) => (
+  <div
+    className={cn(
+      "flex gap-3",
+      role === "user" ? "flex-row-reverse" : "flex-row",
+      className,
+    )}
+    data-role={role}
+  >
+    {role === "chief" && <Avatar chief={chief} size={32} />}
+    <div
+      className={cn(
+        "max-w-[80%] rounded-control px-4 py-3 text-body",
+        role === "user"
+          ? "bg-action-primary-idle text-action-primary-on-idle"
+          : "bg-background-secondary text-display-on-light-primary",
+      )}
+    >
+      {children}
+    </div>
+  </div>
+);

package/src/patterns/Chat/ChatHeader.tsx

@@ -0,0 +1,39 @@
+import { Avatar, IconButton } from "../../primitives";
+import { MoreIcon } from "../../icons";
+import { cn } from "../../utils/cn";
+import type { Chief } from "../Sidebar/Switcher";
+
+export type ChatHeaderProps = {
+  chief?: Chief;
+  title?: string;
+  className?: string;
+};
+
+const chiefTitles: Record<Chief, string> = {
+  technical: "Technical Chief",
+  compliance: "Compliance Chief",
+};
+
+export const ChatHeader = ({
+  chief = "technical",
+  title = "Hull inspection report",
+  className,
+}: ChatHeaderProps) => (
+  <header
+    className={cn(
+      "flex items-center gap-3 border-b border-divider-primary px-4 py-3",
+      className,
+    )}
+  >
+    <Avatar chief={chief} size={32} />
+    <div className="min-w-0 flex-1">
+      <p className="truncate text-caption-2 text-display-on-light-tertiary">
+        {chiefTitles[chief]}
+      </p>
+      <h2 className="truncate text-subheader-em text-display-on-light-primary">{title}</h2>
+    </div>
+    <IconButton hierarchy="quaternary" size="small" aria-label="More options">
+      <MoreIcon />
+    </IconButton>
+  </header>
+);

package/src/patterns/Chat/ChatInput.tsx

@@ -0,0 +1,35 @@
+import { IconButton } from "../../primitives";
+import { AttachmentIcon, SendIcon } from "../../icons";
+import { cn } from "../../utils/cn";
+
+export type ChatInputProps = {
+  placeholder?: string;
+  className?: string;
+};
+
+export const ChatInput = ({
+  placeholder = "Ask your Chief anything...",
+  className,
+}: ChatInputProps) => (
+  <div
+    className={cn(
+      "flex items-end gap-2 rounded-control border border-divider-primary bg-background-primary p-3 shadow-raise1",
+      className,
+    )}
+  >
+    <IconButton hierarchy="quaternary" size="small" aria-label="Attach file">
+      <AttachmentIcon />
+    </IconButton>
+
+    <textarea
+      rows={1}
+      placeholder={placeholder}
+      className="max-h-32 min-h-6 flex-1 resize-none bg-transparent text-body text-display-on-light-primary placeholder:text-display-on-light-quaternary focus:outline-none"
+      aria-label="Message input"
+    />
+
+    <IconButton hierarchy="tertiary" size="small" aria-label="Send message">
+      <SendIcon />
+    </IconButton>
+  </div>
+);

package/src/patterns/Chat/ChatStatus.tsx

@@ -0,0 +1,26 @@
+import { ThinkingDot } from "../../primitives";
+import { cn } from "../../utils/cn";
+
+export type ChatStatusProps = {
+  status?: "thinking" | "typing" | "idle";
+  message?: string;
+  className?: string;
+};
+
+export const ChatStatus = ({
+  status = "thinking",
+  message = "Chief is thinking",
+  className,
+}: ChatStatusProps) => (
+  <div
+    className={cn(
+      "flex items-center gap-2 text-caption-2 text-display-on-light-tertiary",
+      className,
+    )}
+    role="status"
+    data-status={status}
+  >
+    {status === "thinking" && <ThinkingDot />}
+    <span>{message}</span>
+  </div>
+);

package/src/patterns/Chat/ChatTile.tsx

@@ -0,0 +1,40 @@
+import { ChatIcon } from "../../icons";
+import { Avatar } from "../../primitives";
+import { cn } from "../../utils/cn";
+import type { Chief } from "../Sidebar/Switcher";
+
+export type ChatTileProps = {
+  chief?: Chief;
+  title?: string;
+  preview?: string;
+  timestamp?: string;
+  className?: string;
+};
+
+export const ChatTile = ({
+  chief = "technical",
+  title = "Hull inspection report",
+  preview = "Based on the inspection data, all critical systems are operating...",
+  timestamp = "2h ago",
+  className,
+}: ChatTileProps) => (
+  <button
+    type="button"
+    className={cn(
+      "flex w-full items-start gap-3 rounded-control border border-divider-primary bg-background-primary p-3 text-left transition-colors hover:border-divider-secondary hover:bg-background-hover",
+      className,
+    )}
+  >
+    <Avatar chief={chief} size={32} />
+    <div className="min-w-0 flex-1">
+      <div className="flex items-center justify-between gap-2">
+        <span className="truncate text-caption-1-em text-display-on-light-primary">{title}</span>
+        <span className="shrink-0 text-footnote text-display-on-light-quaternary">{timestamp}</span>
+      </div>
+      <p className="mt-0.5 line-clamp-2 text-caption-2 text-display-on-light-secondary">
+        {preview}
+      </p>
+    </div>
+    <ChatIcon className="size-4 shrink-0 text-display-on-light-quaternary" />
+  </button>
+);

package/src/patterns/Chat/Copilot.tsx

@@ -0,0 +1,50 @@
+import { ChatEntry } from "./ChatEntry";
+import { ChatHeader } from "./ChatHeader";
+import { ChatInput } from "./ChatInput";
+import { ChatStatus } from "./ChatStatus";
+import { Greeting } from "./Greeting";
+import { Sources } from "./Sources";
+import { Suggestions } from "./Suggestions";
+import { cn } from "../../utils/cn";
+import type { Chief } from "../Sidebar/Switcher";
+
+export type CopilotProps = {
+  chief?: Chief;
+  empty?: boolean;
+  thinking?: boolean;
+  className?: string;
+};
+
+export const Copilot = ({
+  chief = "technical",
+  empty = false,
+  thinking = false,
+  className,
+}: CopilotProps) => (
+  <div className={cn("flex h-full flex-col bg-background-primary", className)}>
+    <ChatHeader chief={chief} />
+
+    <div className="flex flex-1 flex-col gap-4 overflow-y-auto p-4">
+      {empty ? (
+        <>
+          <Greeting chief={chief} />
+          <Suggestions />
+        </>
+      ) : (
+        <>
+          <ChatEntry role="user">Can you review the hull inspection report?</ChatEntry>
+          <ChatEntry role="chief" chief={chief}>
+            I&apos;ve reviewed the hull inspection report. The overall condition is satisfactory
+            with minor observations noted in sections 4 and 7.
+          </ChatEntry>
+          <Sources count={2} />
+          {thinking && <ChatStatus status="thinking" />}
+        </>
+      )}
+    </div>
+
+    <div className="border-t border-divider-primary p-4">
+      <ChatInput />
+    </div>
+  </div>
+);

package/src/patterns/Chat/Draft.tsx

@@ -0,0 +1,23 @@
+import { cn } from "../../utils/cn";
+
+export type DraftProps = {
+  content?: string;
+  className?: string;
+};
+
+export const Draft = ({
+  content = "Based on the inspection report, I recommend scheduling a follow-up survey within 30 days...",
+  className,
+}: DraftProps) => (
+  <div
+    className={cn(
+      "rounded-control border border-divider-primary bg-background-secondary px-4 py-3",
+      className,
+    )}
+    role="region"
+    aria-label="Draft response"
+  >
+    <p className="mb-2 text-footnote-em text-display-on-light-tertiary">Draft</p>
+    <p className="text-body text-display-on-light-primary">{content}</p>
+  </div>
+);

package/src/patterns/Chat/Greeting.tsx

@@ -0,0 +1,32 @@
+import { Avatar } from "../../primitives";
+import { cn } from "../../utils/cn";
+import type { Chief } from "../Sidebar/Switcher";
+
+export type GreetingProps = {
+  chief?: Chief;
+  name?: string;
+  className?: string;
+};
+
+const chiefGreetings: Record<Chief, string> = {
+  technical: "How can I help with technical matters?",
+  compliance: "How can I help with compliance today?",
+};
+
+export const Greeting = ({
+  chief = "technical",
+  name = "there",
+  className,
+}: GreetingProps) => (
+  <div className={cn("flex flex-col items-center gap-4 text-center", className)}>
+    <Avatar chief={chief} size={32} />
+    <div>
+      <h1 className="font-heading text-heading text-display-on-light-primary">
+        Hello, {name}
+      </h1>
+      <p className="mt-2 text-body text-display-on-light-secondary">
+        {chiefGreetings[chief]}
+      </p>
+    </div>
+  </div>
+);