@orangecheck/design 0.19.0 → 0.20.0

package/dist/index.mjs

@@ -4,7 +4,7 @@ import * as React2 from 'react';
 import { createContext, useState, useRef, useEffect, useCallback, useMemo, useContext, Fragment as Fragment$1, useId } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useTheme } from 'next-themes';
-import { ChevronDown, Palette, Check, Sun, Moon, Monitor, CheckIcon, CircleIcon, X, XIcon, AlertTriangle, Pencil, ChevronLeft, ChevronRight, ChevronDownIcon, ChevronUpIcon, Maximize2, Copy, HelpCircle, Boxes, CornerDownLeft, Plus, Loader2, Menu } from 'lucide-react';
+import { ChevronDown, Plus, Palette, Check, Sun, Moon, Monitor, CheckIcon, CircleIcon, X, XIcon, AlertTriangle, Pencil, ChevronLeft, ChevronRight, ChevronDownIcon, ChevronUpIcon, Maximize2, Copy, HelpCircle, Boxes, CornerDownLeft, Loader2, Menu } from 'lucide-react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import * as LabelPrimitive from '@radix-ui/react-label';
@@ -53,6 +53,12 @@ var OC_THEMES = [
     label: "gold",
     description: "sound money \u2014 digital gold, hard 0.125rem milled edge, mono ledger \xB7 21M",
     accent: "#e3b831"
+  },
+  {
+    id: "ember",
+    label: "ember",
+    description: "the warmth \u2014 burnt-sienna terracotta, soft 1rem corners, pill buttons, Hanken Grotesk \xB7 approachable, human",
+    accent: "#da6736"
   }
 ];
 var OC_DEFAULT_ACCENT = "#f97316";
@@ -421,7 +427,14 @@ var buttonVariants = cva(
         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"
+        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",
@@ -464,7 +477,8 @@ var badgeVariants = cva(
         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-brand border-brand-soft",
+        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"
       }
     },
@@ -489,7 +503,7 @@ function Input({ className, type, ...props }) {
       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-brand/25 dark:aria-invalid:ring-brand/35 aria-invalid:border-brand",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
         className
       ),
       ...props
@@ -519,7 +533,7 @@ function Checkbox({ className, ...props }) {
         "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
         "disabled:cursor-not-allowed disabled:opacity-50",
         "data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=checked]:text-primary-foreground",
-        "aria-invalid:ring-brand/25 dark:aria-invalid:ring-brand/35 aria-invalid:border-brand",
+        "aria-invalid:ring-2 aria-invalid:ring-destructive/50 aria-invalid:border-destructive",
         className
       ),
       ...props,
@@ -560,7 +574,7 @@ function RadioGroupItem({
         "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
         "disabled:cursor-not-allowed disabled:opacity-50",
         "data-[state=checked]:border-primary",
-        "aria-invalid:ring-brand/25 dark:aria-invalid:ring-brand/35 aria-invalid:border-brand",
+        "aria-invalid:ring-2 aria-invalid:ring-destructive/50 aria-invalid:border-destructive",
         className
       ),
       ...props,
@@ -585,7 +599,7 @@ function Switch({ className, ...props }) {
         "data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
         "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
         "disabled:cursor-not-allowed disabled:opacity-50",
-        "aria-invalid:ring-brand/25 dark:aria-invalid:ring-brand/35",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
         className
       ),
       ...props,
@@ -743,7 +757,7 @@ function Textarea({ className, ...props }) {
         "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
         // aria-invalid parity with Input — error styling when a consumer
         // marks the field invalid.
-        "aria-invalid:ring-brand/25 dark:aria-invalid:ring-brand/35 aria-invalid:border-brand",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
         className
       ),
       ...props
@@ -1575,18 +1589,19 @@ function Tooltip({
 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, ...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
+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 py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+      "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,
-      /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 shrink-0 transition-transform duration-200" })
+      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" })
     ]
   }
 ) }));
@@ -1779,6 +1794,105 @@ var Toaster = ({ ...props }) => {
     }
   );
 };
+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 Card({
   id,
   title,
@@ -1891,7 +2005,7 @@ function Sparkline({ data, width = 96, height = 24, area = false, className }) {
 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",
       {
@@ -2484,6 +2598,385 @@ 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
+      }
+    )
+  ] });
+}
+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 TONE2 = {
+  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", TONE2[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",
@@ -4329,6 +4822,6 @@ function OcAppBar({
   );
 }
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, AlertWithAction, AlertWithCountdown, AppShell, AppearanceControls, Badge, Bar, BitcoinAddress, Button, Callout, Card, Checkbox, ConfirmHost, CopyButton, DEFAULT_OC_THEME, DataRow, DefinitionList, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, EcosystemSwitcher, EmptyState, ErrorBoundary, FAMILY_PROPERTIES, HelpHint, Input, Label, LayoutSubHeader, Modal, OC_DEFAULT_ACCENT, OC_SKIN_COOKIE, OC_THEMES, OcAccountMenu, OcAccountMenuView, OcAppBar, OcAppearanceMenu, OcAurora, OcDashboardHub, OcDashboardShell, OcLogoDropdown, OcPrimaryNav, OcThemeBridge, OcThemePicker, OcThemeProvider, Pagination, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PromptHost, QrCode, REFERENCE_BTC_USD, RadioGroup, RadioGroupItem, SITE_STATE_LABEL, SatsAmount, SectionHeader, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, Sparkline, StatBlock, StatCard, StatGrid, StatTile, StatusPill, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeToggle, ThemeToggleLink, Toaster, Tooltip, Working, WorkingPanel, accentFor, asOf, badgeVariants, buttonVariants, cn, confirm, explorerUrl, findFamilyProperty, formatSats, formatSatsCompact, getOcThemeInitScript, isKnownTheme, makeStatusPill, priceBoth, prompt, relativeTime, resolveTheme, satsToUsd, shortenAddress, usdToSats, useOcSkin, useSpotPrice };
+export { AccentList, AccentNote, Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, AlertWithAction, AlertWithCountdown, AppShell, AppearanceControls, Badge, Bar, BitcoinAddress, BrandBand, Button, Callout, Card, CheckList, Checkbox, ComparisonTable, ConfirmHost, CopyButton, DEFAULT_OC_THEME, DataRow, DefinitionList, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, EcosystemSwitcher, EmailCapture, EmptyState, ErrorBoundary, FAMILY_PROPERTIES, Faq, FeatureCard, HelpHint, IconBadge, Input, Label, LayoutSubHeader, MarketingHeading, Modal, NumberedStep, OC_DEFAULT_ACCENT, OC_SKIN_COOKIE, OC_THEMES, OcAccountMenu, OcAccountMenuView, OcAppBar, OcAppearanceMenu, OcAurora, OcDashboardHub, OcDashboardShell, OcLogoDropdown, OcPrimaryNav, OcThemeBridge, OcThemePicker, OcThemeProvider, Pagination, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PromptHost, QrCode, REFERENCE_BTC_USD, RadioGroup, RadioGroupItem, SITE_STATE_LABEL, SatsAmount, Section, SectionHeader, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, Sparkline, StatBlock, StatCard, StatGrid, StatTile, StatusPill, StepList, Surface, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeToggle, ThemeToggleLink, Toaster, Tooltip, TwoToneHeading, VerifiedChip, Working, WorkingPanel, accentFor, asOf, badgeVariants, buttonVariants, cn, confirm, explorerUrl, findFamilyProperty, formatSats, formatSatsCompact, getOcThemeInitScript, iconBadgeVariants, isKnownTheme, makeStatusPill, priceBoth, prompt, relativeTime, resolveTheme, satsToUsd, shortenAddress, surfaceVariants, usdToSats, useOcSkin, useSpotPrice };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map