@orangecheck/design 0.18.0 → 0.20.0

package/dist/composites.mjs

@@ -1,10 +1,25 @@
 import * as Popover from '@radix-ui/react-popover';
-import { HelpCircle } from 'lucide-react';
+import { ChevronDown, Plus, HelpCircle, X, Check } from 'lucide-react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import Link from 'next/link';
+import * as React3 from 'react';
 import { Fragment } 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 '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';
 
 // src/composites/help-hint.tsx
 function cn(...inputs) {
@@ -161,7 +176,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",
       {
@@ -259,7 +274,615 @@ 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 Accordion = AccordionPrimitive.Root;
+var AccordionItem = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Item, { ref, className: cn("border-b", className), ...props }));
+AccordionItem.displayName = "AccordionItem";
+var AccordionTrigger = React3.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 = React3.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 })
+      ]
+    }
+  );
+}
 
-export { Callout, DataRow, DefinitionList, EmptyState, HelpHint, SectionHeader, StatCard, StatGrid, StatTile };
+export { AccentList, AccentNote, BrandBand, Callout, CheckList, ComparisonTable, DataRow, DefinitionList, EmailCapture, EmptyState, Faq, FeatureCard, HelpHint, MarketingHeading, NumberedStep, Section, SectionHeader, StatCard, StatGrid, StatTile, StepList, TwoToneHeading, VerifiedChip };
 //# sourceMappingURL=composites.mjs.map
 //# sourceMappingURL=composites.mjs.map