@orangecheck/design 0.19.0 → 0.20.0

package/dist/components.mjs

@@ -1,14 +1,27 @@
 import * as Popover from '@radix-ui/react-popover';
-import { HelpCircle, Boxes, ChevronDown, Check, CornerDownLeft, Plus, Loader2, Copy, X, Menu, Sun, Moon, Monitor } from 'lucide-react';
+import { ChevronDown, Plus, HelpCircle, X, Check, Boxes, CornerDownLeft, Loader2, Copy, Menu, Sun, Moon, Monitor } from 'lucide-react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { jsxs, jsx, Fragment as Fragment$1 } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import Link6 from 'next/link';
-import * as React from 'react';
+import * as React2 from 'react';
 import { createContext, Fragment, useState, useRef, useEffect, useId, useContext } from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import '@radix-ui/react-label';
+import '@radix-ui/react-checkbox';
+import '@radix-ui/react-radio-group';
+import '@radix-ui/react-switch';
+import { useTheme } from 'next-themes';
+import '@radix-ui/react-separator';
+import '@radix-ui/react-dialog';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import '@radix-ui/react-select';
+import 'sonner';
+import '@radix-ui/react-tabs';
+import 'qrcode';
 import { useRouter } from 'next/router';
 import { useOcSession, fetchOcLinkedIdentities } from '@orangecheck/auth-client';
-import { useTheme } from 'next-themes';
 
 // src/composites/help-hint.tsx
 function cn(...inputs) {
@@ -165,7 +178,7 @@ function StatTile({ children, ...item }) {
 function StatBlock({ label, value, sub, delta, tone = "default", className }) {
   const toneClass = tone === "success" ? "text-success" : tone === "warning" ? "text-warning" : tone === "destructive" ? "text-destructive" : "text-foreground";
   return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1", className), children: [
-    /* @__PURE__ */ jsx("span", { className: "label-mono text-[10px]", children: label }),
+    /* @__PURE__ */ jsx("span", { className: "label-mono text-muted-foreground text-[10px]", children: label }),
     /* @__PURE__ */ jsx(
       "span",
       {
@@ -263,6 +276,749 @@ function DataRow({ children, meta, action, as, className }) {
     }
   );
 }
+function TwoToneHeading({
+  lead,
+  muted,
+  as,
+  tone = "default",
+  className
+}) {
+  const Tag = as ?? "h2";
+  const leadColor = tone === "onBrand" ? "text-primary-foreground" : "text-foreground";
+  const mutedColor = tone === "onBrand" ? "text-primary-foreground/60" : "text-foreground/40";
+  return /* @__PURE__ */ jsxs(
+    Tag,
+    {
+      className: cn(
+        "font-extrabold tracking-[-0.02em] leading-[1.0] text-balance",
+        "text-3xl sm:text-4xl md:text-5xl",
+        leadColor,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { children: lead }),
+        muted ? /* @__PURE__ */ jsxs("span", { className: mutedColor, children: [
+          " ",
+          muted
+        ] }) : null
+      ]
+    }
+  );
+}
+function MarketingHeading({
+  eyebrow,
+  lead,
+  muted,
+  body,
+  align = "start",
+  tone = "default",
+  as,
+  className
+}) {
+  const centered = align === "center";
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col", centered && "items-center text-center", className), children: [
+    eyebrow && /* @__PURE__ */ jsx(
+      "p",
+      {
+        className: cn(
+          "label-mono mb-3",
+          tone === "onBrand" ? "text-primary-foreground/80" : "text-primary"
+        ),
+        children: eyebrow
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      TwoToneHeading,
+      {
+        lead,
+        muted,
+        as,
+        tone,
+        className: cn("max-w-4xl", centered && "mx-auto")
+      }
+    ),
+    body && /* @__PURE__ */ jsx(
+      "p",
+      {
+        className: cn(
+          "mt-4 max-w-2xl text-base sm:text-lg",
+          tone === "onBrand" ? "text-primary-foreground/80" : "text-muted-foreground",
+          centered && "mx-auto"
+        ),
+        children: body
+      }
+    )
+  ] });
+}
+var buttonVariants = cva(
+  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white",
+        outline: "bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border shadow-xs",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+        // For CTAs placed ON a saturated brand band or a dark section
+        // (e.g. a terracotta hero / footer / a forced-dark block) where
+        // the surface is dark+light-text in either mode. A neutral white
+        // pill + a translucent-white ghost read on any such surface;
+        // hardcoded white is deliberate (cf. destructive's text-white).
+        onBrand: "bg-white text-neutral-900 shadow-sm hover:bg-white/90",
+        onBrandOutline: "border border-white/40 bg-transparent text-white hover:bg-white/10"
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+cva(
+  "focus-visible:border-ring focus-visible:ring-ring/50 inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-md border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent",
+        secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent",
+        destructive: "bg-destructive text-destructive-foreground [a&]:hover:bg-destructive/90 border-transparent",
+        warning: "bg-warning text-warning-foreground [a&]:hover:bg-warning/90 border-transparent",
+        success: "bg-success text-success-foreground [a&]:hover:bg-success/90 border-transparent",
+        info: "bg-info text-info-foreground [a&]:hover:bg-info/90 border-transparent",
+        brand: "bg-brand-soft text-accent-foreground border-transparent",
+        neutral: "bg-foreground text-background [a&]:hover:bg-foreground/90 border-transparent",
+        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
+      }
+    },
+    defaultVariants: { variant: "default" }
+  }
+);
+function Input({ className, type, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      type,
+      "data-slot": "input",
+      className: cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground border-input bg-input/30 hover:bg-input/50 dark:bg-input/30 dark:hover:bg-input/50 h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base shadow-xs transition-[color,box-shadow,background-color] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      ),
+      ...props
+    }
+  );
+}
+cva(
+  "relative grid w-full grid-cols-[0_1fr] items-start gap-x-0 gap-y-0.5 rounded-md border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive: "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+        success: "text-success bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-success/90",
+        warning: "text-warning bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-warning/90"
+      }
+    },
+    defaultVariants: { variant: "default" }
+  }
+);
+globalThis.process?.env?.NODE_ENV;
+globalThis.process?.env?.NODE_ENV;
+var TOOLTIP_SURFACE_CLASS = "bg-popover text-popover-foreground border-border rounded-md border p-2.5 shadow-md";
+var TOOLTIP_MOTION_CLASS = "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-1 data-[side=top]:slide-in-from-bottom-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 origin-(--radix-popover-content-transform-origin) duration-150 ease-out";
+function compose(theirs, ours) {
+  return (e) => {
+    theirs?.(e);
+    ours(e);
+  };
+}
+var lastInputWasKeyboard = false;
+var modalityInstalled = false;
+function installModalityTracking() {
+  if (modalityInstalled || typeof window === "undefined") return;
+  modalityInstalled = true;
+  window.addEventListener("keydown", () => lastInputWasKeyboard = true, true);
+  window.addEventListener("pointerdown", () => lastInputWasKeyboard = false, true);
+}
+function Tooltip({
+  content,
+  children,
+  side = "bottom",
+  align = "start",
+  sideOffset = 8,
+  collisionPadding = 12,
+  openDelay = 300,
+  closeDelay = 90,
+  disabled = false,
+  portal = true,
+  zIndexClassName = "z-50",
+  contentClassName
+}) {
+  const [hovering, setHovering] = React2.useState(false);
+  const [focusing, setFocusing] = React2.useState(false);
+  const [isFinePointer, setIsFinePointer] = React2.useState(false);
+  const openTimer = React2.useRef(null);
+  const closeTimer = React2.useRef(null);
+  React2.useEffect(() => {
+    installModalityTracking();
+    const mq = window.matchMedia("(hover: hover) and (pointer: fine)");
+    const apply = () => setIsFinePointer(mq.matches);
+    apply();
+    mq.addEventListener("change", apply);
+    return () => mq.removeEventListener("change", apply);
+  }, []);
+  const clearTimers = React2.useCallback(() => {
+    if (openTimer.current) clearTimeout(openTimer.current);
+    if (closeTimer.current) clearTimeout(closeTimer.current);
+  }, []);
+  React2.useEffect(() => clearTimers, [clearTimers]);
+  React2.useEffect(() => {
+    if (disabled) {
+      clearTimers();
+      setHovering(false);
+    }
+  }, [disabled, clearTimers]);
+  const handlePointerEnter = () => {
+    if (!isFinePointer) return;
+    if (closeTimer.current) clearTimeout(closeTimer.current);
+    openTimer.current = setTimeout(() => setHovering(true), openDelay);
+  };
+  const handlePointerLeave = () => {
+    if (openTimer.current) clearTimeout(openTimer.current);
+    closeTimer.current = setTimeout(() => setHovering(false), closeDelay);
+  };
+  const handlePointerDown = () => {
+    clearTimers();
+    setHovering(false);
+    setFocusing(false);
+  };
+  const handleFocus = () => {
+    if (lastInputWasKeyboard) {
+      clearTimers();
+      setFocusing(true);
+    }
+  };
+  const handleBlur = () => {
+    clearTimers();
+    setFocusing(false);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Escape") {
+      clearTimers();
+      setHovering(false);
+      setFocusing(false);
+    }
+  };
+  const effectiveOpen = !disabled && (isFinePointer && hovering || focusing);
+  const extra = {};
+  const childProps = children.props;
+  extra.onPointerEnter = compose(childProps.onPointerEnter, handlePointerEnter);
+  extra.onPointerLeave = compose(childProps.onPointerLeave, handlePointerLeave);
+  extra.onPointerDown = compose(childProps.onPointerDown, handlePointerDown);
+  extra.onFocus = compose(childProps.onFocus, handleFocus);
+  extra.onBlur = compose(childProps.onBlur, handleBlur);
+  extra.onKeyDown = compose(childProps.onKeyDown, handleKeyDown);
+  const trigger = React2.cloneElement(children, extra);
+  const contentEl = /* @__PURE__ */ jsx(
+    Popover.Content,
+    {
+      side,
+      align,
+      sideOffset,
+      collisionPadding,
+      "aria-hidden": true,
+      onOpenAutoFocus: (e) => e.preventDefault(),
+      onCloseAutoFocus: (e) => e.preventDefault(),
+      onFocusOutside: (e) => e.preventDefault(),
+      className: cn(
+        TOOLTIP_SURFACE_CLASS,
+        TOOLTIP_MOTION_CLASS,
+        "pointer-events-none",
+        zIndexClassName,
+        contentClassName
+      ),
+      children: content
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    Popover.Root,
+    {
+      open: effectiveOpen,
+      onOpenChange: (o) => {
+        if (!o) {
+          clearTimers();
+          setHovering(false);
+          setFocusing(false);
+        }
+      },
+      modal: false,
+      children: [
+        /* @__PURE__ */ jsx(Popover.Anchor, { asChild: true, children: trigger }),
+        portal ? /* @__PURE__ */ jsx(Popover.Portal, { children: contentEl }) : contentEl
+      ]
+    }
+  );
+}
+var Accordion = AccordionPrimitive.Root;
+var AccordionItem = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Item, { ref, className: cn("border-b", className), ...props }));
+AccordionItem.displayName = "AccordionItem";
+var AccordionTrigger = React2.forwardRef(({ className, children, icon = "chevron", ...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
+  AccordionPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      "flex flex-1 items-center justify-between gap-4 py-4 text-left font-medium transition-all hover:underline",
+      icon === "chevron" ? "[&[data-state=open]>svg]:rotate-180" : "[&[data-state=open]>svg]:rotate-45",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      icon === "chevron" ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 shrink-0 transition-transform duration-200" }) : /* @__PURE__ */ jsx(Plus, { className: "text-primary h-5 w-5 shrink-0 transition-transform duration-200" })
+    ]
+  }
+) }));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+var AccordionContent = React2.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+  AccordionPrimitive.Content,
+  {
+    ref,
+    className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm transition-all",
+    ...props,
+    children: /* @__PURE__ */ jsx("div", { className: cn("pt-0 pb-4", className), children })
+  }
+));
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+var surfaceVariants = cva("rounded-xl transition-colors", {
+  variants: {
+    tone: {
+      /* Crisp panel floating on the page — the default soft card. */
+      default: "bg-card text-card-foreground",
+      /* Warm-gray recessed panel. */
+      muted: "bg-muted text-foreground",
+      /* Solid brand fill — small terracotta panel; inverts child text. */
+      brand: "bg-brand text-brand-foreground",
+      /* High-contrast neutral panel (near-black in light, near-white in dark). */
+      contrast: "bg-foreground text-background",
+      /* Translucent lightened tile for cards sitting ON a brand band. */
+      onBrand: "text-brand-foreground [background:color-mix(in_oklch,white_16%,var(--brand))] [border-color:color-mix(in_oklch,white_24%,transparent)]",
+      /* Frame only, transparent fill. */
+      outline: "bg-transparent text-foreground"
+    },
+    elevation: {
+      none: "shadow-none",
+      sm: "shadow-sm",
+      md: "shadow-md",
+      lg: "shadow-lg",
+      xl: "shadow-xl"
+    },
+    bordered: {
+      true: "border",
+      false: ""
+    },
+    pad: {
+      none: "p-0",
+      sm: "p-4",
+      md: "p-5 sm:p-6",
+      lg: "p-6 sm:p-8"
+    }
+  },
+  defaultVariants: {
+    tone: "default",
+    elevation: "sm",
+    bordered: true,
+    pad: "md"
+  }
+});
+function Surface({
+  className,
+  tone,
+  elevation,
+  bordered,
+  pad,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "surface",
+      className: cn(surfaceVariants({ tone, elevation, bordered, pad }), className),
+      ...props
+    }
+  );
+}
+var iconBadgeVariants = cva(
+  "inline-flex shrink-0 items-center justify-center rounded-md font-semibold [&_svg]:pointer-events-none",
+  {
+    variants: {
+      tone: {
+        /* The signature peach tile — soft accent fill, terracotta glyph.
+           Auto-swaps to warm-dark + light-peach in dark mode via tokens. */
+        peach: "bg-accent text-accent-foreground",
+        /* Inverted near-black tile, light glyph ("never do" promises). */
+        dark: "bg-foreground text-background",
+        /* Solid brand tile. */
+        brand: "bg-primary text-primary-foreground",
+        /* White tile on a brand band, terracotta glyph (numbered steps). */
+        onBrand: "bg-brand-foreground text-primary",
+        /* Quiet neutral tile. */
+        muted: "bg-muted text-foreground",
+        /* Crisp white (card-colored) tile with a terracotta glyph and a
+           soft lift — the elevated icon chip on muted/colored cards. */
+        surface: "bg-card text-primary shadow-sm"
+      },
+      size: {
+        sm: "size-9 text-xs [&_svg]:size-4",
+        md: "size-11 text-sm [&_svg]:size-5",
+        lg: "size-12 text-base [&_svg]:size-6",
+        xl: "size-14 text-lg [&_svg]:size-7"
+      }
+    },
+    defaultVariants: { tone: "peach", size: "md" }
+  }
+);
+function IconBadge({ className, tone, size, children, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "icon-badge",
+      className: cn(iconBadgeVariants({ tone, size }), className),
+      ...props,
+      children
+    }
+  );
+}
+function FeatureCard({
+  icon,
+  iconTone = "peach",
+  title,
+  children,
+  orientation = "vertical",
+  align = "start",
+  tone = "default",
+  elevation = "sm",
+  className
+}) {
+  const horizontal = orientation === "horizontal";
+  const centered = !horizontal && align === "center";
+  return /* @__PURE__ */ jsxs(
+    Surface,
+    {
+      tone,
+      elevation,
+      pad: horizontal ? "md" : "lg",
+      className: cn(
+        "flex h-full",
+        horizontal ? "flex-row gap-4" : "flex-col",
+        centered && "items-center text-center",
+        className
+      ),
+      children: [
+        icon && /* @__PURE__ */ jsx(
+          IconBadge,
+          {
+            tone: iconTone,
+            size: "lg",
+            className: cn(horizontal ? "shrink-0" : "mb-4"),
+            children: icon
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: cn(horizontal && "min-w-0"), children: [
+          /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold", children: title }),
+          children && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-1.5 text-sm leading-relaxed", children })
+        ] })
+      ]
+    }
+  );
+}
+var TONE = {
+  default: "bg-background text-foreground",
+  muted: "bg-muted text-foreground",
+  brand: "bg-brand text-brand-foreground",
+  // `dark` activates the .dark variant locally so descendant package
+  // components render their dark arm even on an otherwise light page.
+  dark: "dark bg-background text-foreground"
+};
+var WIDTH = {
+  default: "container",
+  wide: "mx-auto w-full max-w-screen-2xl px-4 sm:px-6 lg:px-8",
+  full: ""
+};
+function Section({
+  tone = "default",
+  width = "default",
+  diagonal,
+  id,
+  className,
+  innerClassName,
+  children
+}) {
+  const showDiagonal = diagonal ?? tone === "brand";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      id,
+      className: cn("w-full", TONE[tone], showDiagonal && "oc-diagonal", className),
+      children: /* @__PURE__ */ jsx("div", { className: cn("py-16 sm:py-20 md:py-24", WIDTH[width], innerClassName), children })
+    }
+  );
+}
+function BrandBand(props) {
+  return /* @__PURE__ */ jsx(Section, { tone: "brand", ...props });
+}
+function ComparisonTable({ rows, columns, className }) {
+  const cols = { feature: "", theirs: "A normal login", ours: "OrangeCheck", ...columns };
+  return /* @__PURE__ */ jsx("div", { className: cn("overflow-hidden rounded-xl border", className), children: /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs("div", { className: "min-w-[32rem]", children: [
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[1.4fr_1fr_1fr]", children: [
+      /* @__PURE__ */ jsx("div", { className: "label-mono text-muted-foreground px-4 py-3.5 sm:px-6", children: cols.feature }),
+      /* @__PURE__ */ jsx("div", { className: "px-4 py-3.5 font-semibold text-foreground sm:px-6", children: cols.theirs }),
+      /* @__PURE__ */ jsx("div", { className: "bg-accent/60 border-border/60 border-l px-4 py-3.5 font-semibold text-primary sm:px-6", children: cols.ours })
+    ] }),
+    rows.map((row, i) => /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[1.4fr_1fr_1fr] border-t", children: [
+      /* @__PURE__ */ jsx("div", { className: "px-4 py-3.5 font-medium text-foreground sm:px-6", children: row.label }),
+      /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground flex items-center gap-2 px-4 py-3.5 sm:px-6", children: [
+        /* @__PURE__ */ jsx(X, { className: "text-muted-foreground/70 size-4" }),
+        /* @__PURE__ */ jsx("span", { children: row.theirs })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "bg-accent/40 border-border/60 flex items-center gap-2 border-l px-4 py-3.5 text-foreground sm:px-6", children: [
+        /* @__PURE__ */ jsx(Check, { className: "size-4 text-primary" }),
+        /* @__PURE__ */ jsx("span", { children: row.ours })
+      ] })
+    ] }, i))
+  ] }) }) });
+}
+function NumberedStep({
+  n,
+  title,
+  children,
+  tone = "default",
+  card = false,
+  className
+}) {
+  const onBrand = tone === "onBrand";
+  const body = /* @__PURE__ */ jsxs("div", { className: cn(!card && className), children: [
+    /* @__PURE__ */ jsx(IconBadge, { tone: onBrand ? "onBrand" : "peach", size: "sm", children: n }),
+    /* @__PURE__ */ jsx("div", { className: "mt-4 text-lg font-semibold", children: title }),
+    children && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "mt-1.5 text-sm leading-relaxed",
+          onBrand ? "text-brand-foreground/80" : "text-muted-foreground"
+        ),
+        children
+      }
+    )
+  ] });
+  if (!card) return body;
+  return /* @__PURE__ */ jsx(
+    Surface,
+    {
+      tone: onBrand ? "onBrand" : "default",
+      elevation: onBrand ? "none" : "sm",
+      pad: "md",
+      className,
+      children: body
+    }
+  );
+}
+var COLUMNS = {
+  2: "md:grid-cols-2",
+  3: "md:grid-cols-3",
+  4: "md:grid-cols-4"
+};
+function StepList({
+  steps,
+  variant = "bare",
+  tone = "default",
+  columns = 3,
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("grid gap-6 sm:grid-cols-2 sm:gap-8", COLUMNS[columns], className), children: steps.map((step, index) => /* @__PURE__ */ jsx(
+    NumberedStep,
+    {
+      n: index + 1,
+      title: step.title,
+      tone,
+      card: variant === "card",
+      children: step.children
+    },
+    index
+  )) });
+}
+function Faq({ items, defaultOpen, className }) {
+  return /* @__PURE__ */ jsx(
+    Accordion,
+    {
+      type: "single",
+      collapsible: true,
+      defaultValue: defaultOpen != null ? String(defaultOpen) : void 0,
+      className: cn("w-full", className),
+      children: items.map((item, i) => /* @__PURE__ */ jsxs(AccordionItem, { value: String(i), children: [
+        /* @__PURE__ */ jsx(
+          AccordionTrigger,
+          {
+            icon: "plusMinus",
+            className: "text-foreground text-base font-semibold",
+            children: item.q
+          }
+        ),
+        /* @__PURE__ */ jsx(AccordionContent, { className: "text-muted-foreground leading-relaxed", children: item.a })
+      ] }, i))
+    }
+  );
+}
+function EmailCapture({
+  action,
+  method,
+  onSubmit,
+  name = "email",
+  placeholder = "you@email.com",
+  cta = "Join the waitlist",
+  note,
+  tone = "default",
+  className
+}) {
+  const onBrand = tone === "onBrand";
+  return /* @__PURE__ */ jsxs("form", { action, method, onSubmit, className: cn(className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-center", children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          type: "email",
+          name,
+          required: true,
+          placeholder,
+          className: cn(
+            "rounded-full text-base md:text-sm",
+            onBrand && "[background:color-mix(in_oklch,white_18%,transparent)] placeholder:text-primary-foreground/60 border-transparent text-primary-foreground"
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(Button, { type: "submit", variant: onBrand ? "onBrand" : "default", className: "rounded-full", children: cta })
+    ] }),
+    note && /* @__PURE__ */ jsx(
+      "p",
+      {
+        className: cn(
+          "mt-3 text-sm",
+          onBrand ? "text-primary-foreground/70" : "text-muted-foreground"
+        ),
+        children: note
+      }
+    )
+  ] });
+}
+function CheckList({
+  items,
+  orientation = "horizontal",
+  tone = "default",
+  className
+}) {
+  const glyph = tone === "onBrand" ? "text-brand-foreground" : "text-primary";
+  const label = tone === "onBrand" ? "text-brand-foreground/90" : "text-foreground";
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      className: cn(
+        orientation === "horizontal" ? "flex flex-wrap gap-x-6 gap-y-2 text-sm" : "flex flex-col gap-2 text-sm",
+        className
+      ),
+      children: items.map((item, i) => /* @__PURE__ */ jsxs("li", { className: cn("inline-flex items-center gap-2", label), children: [
+        /* @__PURE__ */ jsx(Check, { className: cn("size-4 shrink-0", glyph) }),
+        item
+      ] }, i))
+    }
+  );
+}
+function AccentNote({ lead, children, tone = "default", className }) {
+  const onBrand = tone === "onBrand";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "border-l-2 pl-4 text-sm leading-relaxed",
+        onBrand ? "border-primary-foreground/60 text-primary-foreground/80" : "border-primary text-muted-foreground",
+        className
+      ),
+      children: [
+        lead && /* @__PURE__ */ jsx(
+          "strong",
+          {
+            className: cn(
+              "mr-1.5 font-semibold",
+              onBrand ? "text-primary-foreground" : "text-foreground"
+            ),
+            children: lead
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+function AccentList({ items, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col", className), children: items.map((item, i) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("border-l-2 py-2 pl-5", item.active ? "border-primary" : "border-border"),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "font-semibold",
+              item.active ? "text-foreground" : "text-muted-foreground"
+            ),
+            children: item.title
+          }
+        ),
+        item.active && item.children && /* @__PURE__ */ jsx("div", { className: "text-muted-foreground mt-1 text-sm leading-relaxed", children: item.children })
+      ]
+    },
+    i
+  )) });
+}
+function VerifiedChip({ icon, iconTone = "peach", label, className }) {
+  return /* @__PURE__ */ jsxs(
+    Surface,
+    {
+      elevation: "lg",
+      pad: "none",
+      className: cn("inline-flex items-center gap-3 rounded-full px-3 py-2", className),
+      children: [
+        /* @__PURE__ */ jsx(IconBadge, { tone: iconTone, size: "sm", children: icon ?? /* @__PURE__ */ jsx(Check, {}) }),
+        /* @__PURE__ */ jsx("span", { className: "pr-2 text-sm font-semibold text-foreground", children: label })
+      ]
+    }
+  );
+}
 var ENTRIES = [
   {
     slug: "home",
@@ -469,141 +1225,6 @@ function EcosystemSwitcher({
     )
   ] });
 }
-var TOOLTIP_SURFACE_CLASS = "bg-popover text-popover-foreground border-border rounded-md border p-2.5 shadow-md";
-var TOOLTIP_MOTION_CLASS = "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-1 data-[side=top]:slide-in-from-bottom-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 origin-(--radix-popover-content-transform-origin) duration-150 ease-out";
-function compose(theirs, ours) {
-  return (e) => {
-    theirs?.(e);
-    ours(e);
-  };
-}
-var lastInputWasKeyboard = false;
-var modalityInstalled = false;
-function installModalityTracking() {
-  if (modalityInstalled || typeof window === "undefined") return;
-  modalityInstalled = true;
-  window.addEventListener("keydown", () => lastInputWasKeyboard = true, true);
-  window.addEventListener("pointerdown", () => lastInputWasKeyboard = false, true);
-}
-function Tooltip({
-  content,
-  children,
-  side = "bottom",
-  align = "start",
-  sideOffset = 8,
-  collisionPadding = 12,
-  openDelay = 300,
-  closeDelay = 90,
-  disabled = false,
-  portal = true,
-  zIndexClassName = "z-50",
-  contentClassName
-}) {
-  const [hovering, setHovering] = React.useState(false);
-  const [focusing, setFocusing] = React.useState(false);
-  const [isFinePointer, setIsFinePointer] = React.useState(false);
-  const openTimer = React.useRef(null);
-  const closeTimer = React.useRef(null);
-  React.useEffect(() => {
-    installModalityTracking();
-    const mq = window.matchMedia("(hover: hover) and (pointer: fine)");
-    const apply = () => setIsFinePointer(mq.matches);
-    apply();
-    mq.addEventListener("change", apply);
-    return () => mq.removeEventListener("change", apply);
-  }, []);
-  const clearTimers = React.useCallback(() => {
-    if (openTimer.current) clearTimeout(openTimer.current);
-    if (closeTimer.current) clearTimeout(closeTimer.current);
-  }, []);
-  React.useEffect(() => clearTimers, [clearTimers]);
-  React.useEffect(() => {
-    if (disabled) {
-      clearTimers();
-      setHovering(false);
-    }
-  }, [disabled, clearTimers]);
-  const handlePointerEnter = () => {
-    if (!isFinePointer) return;
-    if (closeTimer.current) clearTimeout(closeTimer.current);
-    openTimer.current = setTimeout(() => setHovering(true), openDelay);
-  };
-  const handlePointerLeave = () => {
-    if (openTimer.current) clearTimeout(openTimer.current);
-    closeTimer.current = setTimeout(() => setHovering(false), closeDelay);
-  };
-  const handlePointerDown = () => {
-    clearTimers();
-    setHovering(false);
-    setFocusing(false);
-  };
-  const handleFocus = () => {
-    if (lastInputWasKeyboard) {
-      clearTimers();
-      setFocusing(true);
-    }
-  };
-  const handleBlur = () => {
-    clearTimers();
-    setFocusing(false);
-  };
-  const handleKeyDown = (e) => {
-    if (e.key === "Escape") {
-      clearTimers();
-      setHovering(false);
-      setFocusing(false);
-    }
-  };
-  const effectiveOpen = !disabled && (isFinePointer && hovering || focusing);
-  const extra = {};
-  const childProps = children.props;
-  extra.onPointerEnter = compose(childProps.onPointerEnter, handlePointerEnter);
-  extra.onPointerLeave = compose(childProps.onPointerLeave, handlePointerLeave);
-  extra.onPointerDown = compose(childProps.onPointerDown, handlePointerDown);
-  extra.onFocus = compose(childProps.onFocus, handleFocus);
-  extra.onBlur = compose(childProps.onBlur, handleBlur);
-  extra.onKeyDown = compose(childProps.onKeyDown, handleKeyDown);
-  const trigger = React.cloneElement(children, extra);
-  const contentEl = /* @__PURE__ */ jsx(
-    Popover.Content,
-    {
-      side,
-      align,
-      sideOffset,
-      collisionPadding,
-      "aria-hidden": true,
-      onOpenAutoFocus: (e) => e.preventDefault(),
-      onCloseAutoFocus: (e) => e.preventDefault(),
-      onFocusOutside: (e) => e.preventDefault(),
-      className: cn(
-        TOOLTIP_SURFACE_CLASS,
-        TOOLTIP_MOTION_CLASS,
-        "pointer-events-none",
-        zIndexClassName,
-        contentClassName
-      ),
-      children: content
-    }
-  );
-  return /* @__PURE__ */ jsxs(
-    Popover.Root,
-    {
-      open: effectiveOpen,
-      onOpenChange: (o) => {
-        if (!o) {
-          clearTimers();
-          setHovering(false);
-          setFocusing(false);
-        }
-      },
-      modal: false,
-      children: [
-        /* @__PURE__ */ jsx(Popover.Anchor, { asChild: true, children: trigger }),
-        portal ? /* @__PURE__ */ jsx(Popover.Portal, { children: contentEl }) : contentEl
-      ]
-    }
-  );
-}
 
 // src/chrome/family-properties.ts
 var FAMILY_PROPERTIES = [
@@ -1038,7 +1659,7 @@ function AppearanceControls({ className }) {
   const activeMode = mounted ? theme ?? "system" : null;
   return /* @__PURE__ */ jsxs("div", { className, children: [
     /* @__PURE__ */ jsx("div", { className: "label-mono text-muted-foreground px-3 pt-3 pb-2", children: "mode" }),
-    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-1 px-2 pb-2", children: MODES.map(({ id, label, Icon }) => {
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-1 px-2 pb-2", children: MODES.map(({ id, label, Icon: Icon2 }) => {
       const active = activeMode === id;
       return /* @__PURE__ */ jsxs(
         "button",
@@ -1052,7 +1673,7 @@ function AppearanceControls({ className }) {
             active ? "border-primary text-foreground bg-accent" : "border-transparent text-muted-foreground hover:bg-accent hover:text-accent-foreground"
           ),
           children: [
-            /* @__PURE__ */ jsx(Icon, { className: "size-4", "aria-hidden": true }),
+            /* @__PURE__ */ jsx(Icon2, { className: "size-4", "aria-hidden": true }),
             label
           ]
         },
@@ -2311,6 +2932,6 @@ function OcAppBar({
   );
 }
 
-export { AppShell, Callout, DataRow, DefinitionList, EcosystemSwitcher, EmptyState, FAMILY_PROPERTIES, HelpHint, LayoutSubHeader, OcAccountMenu, OcAccountMenuView, OcAppBar, OcDashboardHub, OcDashboardShell, OcLogoDropdown, OcPrimaryNav, SITE_STATE_LABEL, SectionHeader, StatCard, StatGrid, StatTile, findFamilyProperty };
+export { AccentList, AccentNote, AppShell, BrandBand, Callout, CheckList, ComparisonTable, DataRow, DefinitionList, EcosystemSwitcher, EmailCapture, EmptyState, FAMILY_PROPERTIES, Faq, FeatureCard, HelpHint, LayoutSubHeader, MarketingHeading, NumberedStep, OcAccountMenu, OcAccountMenuView, OcAppBar, OcDashboardHub, OcDashboardShell, OcLogoDropdown, OcPrimaryNav, SITE_STATE_LABEL, Section, SectionHeader, StatCard, StatGrid, StatTile, StepList, TwoToneHeading, VerifiedChip, findFamilyProperty };
 //# sourceMappingURL=components.mjs.map
 //# sourceMappingURL=components.mjs.map