@orangecheck/design 0.19.0 → 0.20.0

package/dist/components.js

@@ -6,10 +6,23 @@ var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
 var Link6 = require('next/link');
-var React = require('react');
+var React2 = require('react');
+var reactSlot = require('@radix-ui/react-slot');
+var classVarianceAuthority = require('class-variance-authority');
+require('@radix-ui/react-label');
+require('@radix-ui/react-checkbox');
+require('@radix-ui/react-radio-group');
+require('@radix-ui/react-switch');
+var nextThemes = require('next-themes');
+require('@radix-ui/react-separator');
+require('@radix-ui/react-dialog');
+var AccordionPrimitive = require('@radix-ui/react-accordion');
+require('@radix-ui/react-select');
+require('sonner');
+require('@radix-ui/react-tabs');
+require('qrcode');
 var router = require('next/router');
 var authClient = require('@orangecheck/auth-client');
-var nextThemes = require('next-themes');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -33,7 +46,8 @@ function _interopNamespace(e) {
 
 var Popover__namespace = /*#__PURE__*/_interopNamespace(Popover);
 var Link6__default = /*#__PURE__*/_interopDefault(Link6);
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
+var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
 
 // src/composites/help-hint.tsx
 function cn(...inputs) {
@@ -190,7 +204,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__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-1", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "label-mono text-[10px]", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "label-mono text-muted-foreground text-[10px]", children: label }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "span",
       {
@@ -262,7 +276,7 @@ function DefinitionList({ items, className }) {
         "grid gap-x-5 gap-y-2 text-sm sm:grid-cols-[auto_1fr] sm:items-baseline",
         className
       ),
-      children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+      children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs(React2.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx("dt", { className: "label-mono text-muted-foreground text-[10px]", children: item.label }),
         /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "text-foreground font-mono text-xs break-all", children: item.value })
       ] }, i))
@@ -288,6 +302,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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { children: lead }),
+        muted ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col", centered && "items-center text-center", className), children: [
+    eyebrow && /* @__PURE__ */ jsxRuntime.jsx(
+      "p",
+      {
+        className: cn(
+          "label-mono mb-3",
+          tone === "onBrand" ? "text-primary-foreground/80" : "text-primary"
+        ),
+        children: eyebrow
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      TwoToneHeading,
+      {
+        lead,
+        muted,
+        as,
+        tone,
+        className: cn("max-w-4xl", centered && "mx-auto")
+      }
+    ),
+    body && /* @__PURE__ */ jsxRuntime.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 = classVarianceAuthority.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 ? reactSlot.Slot : "button";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Comp,
+    {
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+classVarianceAuthority.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__ */ jsxRuntime.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
+    }
+  );
+}
+classVarianceAuthority.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__namespace.useState(false);
+  const [focusing, setFocusing] = React2__namespace.useState(false);
+  const [isFinePointer, setIsFinePointer] = React2__namespace.useState(false);
+  const openTimer = React2__namespace.useRef(null);
+  const closeTimer = React2__namespace.useRef(null);
+  React2__namespace.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__namespace.useCallback(() => {
+    if (openTimer.current) clearTimeout(openTimer.current);
+    if (closeTimer.current) clearTimeout(closeTimer.current);
+  }, []);
+  React2__namespace.useEffect(() => clearTimers, [clearTimers]);
+  React2__namespace.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__namespace.cloneElement(children, extra);
+  const contentEl = /* @__PURE__ */ jsxRuntime.jsx(
+    Popover__namespace.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__ */ jsxRuntime.jsxs(
+    Popover__namespace.Root,
+    {
+      open: effectiveOpen,
+      onOpenChange: (o) => {
+        if (!o) {
+          clearTimers();
+          setHovering(false);
+          setFocusing(false);
+        }
+      },
+      modal: false,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Anchor, { asChild: true, children: trigger }),
+        portal ? /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Portal, { children: contentEl }) : contentEl
+      ]
+    }
+  );
+}
+var Accordion = AccordionPrimitive__namespace.Root;
+var AccordionItem = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Item, { ref, className: cn("border-b", className), ...props }));
+AccordionItem.displayName = "AccordionItem";
+var AccordionTrigger = React2__namespace.forwardRef(({ className, children, icon = "chevron", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Header, { className: "flex", children: /* @__PURE__ */ jsxRuntime.jsxs(
+  AccordionPrimitive__namespace.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__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-4 w-4 shrink-0 transition-transform duration-200" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "text-primary h-5 w-5 shrink-0 transition-transform duration-200" })
+    ]
+  }
+) }));
+AccordionTrigger.displayName = AccordionPrimitive__namespace.Trigger.displayName;
+var AccordionContent = React2__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  AccordionPrimitive__namespace.Content,
+  {
+    ref,
+    className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm transition-all",
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("pt-0 pb-4", className), children })
+  }
+));
+AccordionContent.displayName = AccordionPrimitive__namespace.Content.displayName;
+var surfaceVariants = classVarianceAuthority.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__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "surface",
+      className: cn(surfaceVariants({ tone, elevation, bordered, pad }), className),
+      ...props
+    }
+  );
+}
+var iconBadgeVariants = classVarianceAuthority.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+          IconBadge,
+          {
+            tone: iconTone,
+            size: "lg",
+            className: cn(horizontal ? "shrink-0" : "mb-4"),
+            children: icon
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(horizontal && "min-w-0"), children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold", children: title }),
+          children && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+    "div",
+    {
+      id,
+      className: cn("w-full", TONE[tone], showDiagonal && "oc-diagonal", className),
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("py-16 sm:py-20 md:py-24", WIDTH[width], innerClassName), children })
+    }
+  );
+}
+function BrandBand(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Section, { tone: "brand", ...props });
+}
+function ComparisonTable({ rows, columns, className }) {
+  const cols = { feature: "", theirs: "A normal login", ours: "OrangeCheck", ...columns };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("overflow-hidden rounded-xl border", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-[32rem]", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[1.4fr_1fr_1fr]", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "label-mono text-muted-foreground px-4 py-3.5 sm:px-6", children: cols.feature }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-3.5 font-semibold text-foreground sm:px-6", children: cols.theirs }),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[1.4fr_1fr_1fr] border-t", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-3.5 font-medium text-foreground sm:px-6", children: row.label }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-muted-foreground flex items-center gap-2 px-4 py-3.5 sm:px-6", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "text-muted-foreground/70 size-4" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: row.theirs })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Check, { className: "size-4 text-primary" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: row.ours })
+      ] })
+    ] }, i))
+  ] }) }) });
+}
+function NumberedStep({
+  n,
+  title,
+  children,
+  tone = "default",
+  card = false,
+  className
+}) {
+  const onBrand = tone === "onBrand";
+  const body = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(!card && className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(IconBadge, { tone: onBrand ? "onBrand" : "peach", size: "sm", children: n }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 text-lg font-semibold", children: title }),
+    children && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: cn("grid gap-6 sm:grid-cols-2 sm:gap-8", COLUMNS[columns], className), children: steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    NumberedStep,
+    {
+      n: index + 1,
+      title: step.title,
+      tone,
+      card: variant === "card",
+      children: step.children
+    },
+    index
+  )) });
+}
+function Faq({ items, defaultOpen, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Accordion,
+    {
+      type: "single",
+      collapsible: true,
+      defaultValue: defaultOpen != null ? String(defaultOpen) : void 0,
+      className: cn("w-full", className),
+      children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs(AccordionItem, { value: String(i), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          AccordionTrigger,
+          {
+            icon: "plusMinus",
+            className: "text-foreground text-base font-semibold",
+            children: item.q
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("form", { action, method, onSubmit, className: cn(className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-center", children: [
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Button, { type: "submit", variant: onBrand ? "onBrand" : "default", className: "rounded-full", children: cta })
+    ] }),
+    note && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("li", { className: cn("inline-flex items-center gap-2", label), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: cn("size-4 shrink-0", glyph) }),
+        item
+      ] }, i))
+    }
+  );
+}
+function AccentNote({ lead, children, tone = "default", className }) {
+  const onBrand = tone === "onBrand";
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+          "strong",
+          {
+            className: cn(
+              "mr-1.5 font-semibold",
+              onBrand ? "text-primary-foreground" : "text-foreground"
+            ),
+            children: lead
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+function AccentList({ items, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col", className), children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn("border-l-2 py-2 pl-5", item.active ? "border-primary" : "border-border"),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "font-semibold",
+              item.active ? "text-foreground" : "text-muted-foreground"
+            ),
+            children: item.title
+          }
+        ),
+        item.active && item.children && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+    Surface,
+    {
+      elevation: "lg",
+      pad: "none",
+      className: cn("inline-flex items-center gap-3 rounded-full px-3 py-2", className),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(IconBadge, { tone: iconTone, size: "sm", children: icon ?? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, {}) }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pr-2 text-sm font-semibold text-foreground", children: label })
+      ]
+    }
+  );
+}
 var ENTRIES = [
   {
     slug: "home",
@@ -409,9 +1166,9 @@ function EcosystemSwitcher({
   className,
   showOwnerEntries = false
 }) {
-  const [open, setOpen] = React.useState(false);
-  const containerRef = React.useRef(null);
-  React.useEffect(() => {
+  const [open, setOpen] = React2.useState(false);
+  const containerRef = React2.useRef(null);
+  React2.useEffect(() => {
     if (!open) return;
     function onDoc(e) {
       if (!containerRef.current) return;
@@ -494,141 +1251,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__namespace.useState(false);
-  const [focusing, setFocusing] = React__namespace.useState(false);
-  const [isFinePointer, setIsFinePointer] = React__namespace.useState(false);
-  const openTimer = React__namespace.useRef(null);
-  const closeTimer = React__namespace.useRef(null);
-  React__namespace.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__namespace.useCallback(() => {
-    if (openTimer.current) clearTimeout(openTimer.current);
-    if (closeTimer.current) clearTimeout(closeTimer.current);
-  }, []);
-  React__namespace.useEffect(() => clearTimers, [clearTimers]);
-  React__namespace.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__namespace.cloneElement(children, extra);
-  const contentEl = /* @__PURE__ */ jsxRuntime.jsx(
-    Popover__namespace.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__ */ jsxRuntime.jsxs(
-    Popover__namespace.Root,
-    {
-      open: effectiveOpen,
-      onOpenChange: (o) => {
-        if (!o) {
-          clearTimers();
-          setHovering(false);
-          setFocusing(false);
-        }
-      },
-      modal: false,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Anchor, { asChild: true, children: trigger }),
-        portal ? /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Portal, { children: contentEl }) : contentEl
-      ]
-    }
-  );
-}
 
 // src/chrome/family-properties.ts
 var FAMILY_PROPERTIES = [
@@ -864,9 +1486,9 @@ function OcLogoDropdown({
   popoverClassName,
   showOwnerEntries = false
 }) {
-  const [open, setOpen] = React.useState(false);
-  const containerRef = React.useRef(null);
-  const menuId = React.useId();
+  const [open, setOpen] = React2.useState(false);
+  const containerRef = React2.useRef(null);
+  const menuId = React2.useId();
   const router$1 = router.useRouter();
   const currentCategory = findFamilyProperty(current)?.category ?? "hub";
   function handleTriggerClick(e) {
@@ -878,7 +1500,7 @@ function OcLogoDropdown({
     }
     setOpen((v) => !v);
   }
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (!open) return;
     function onDoc(e) {
       if (!containerRef.current) return;
@@ -1042,9 +1664,9 @@ function OcLogoDropdown({
     }
   );
 }
-var OcSkinContext = React.createContext(null);
+var OcSkinContext = React2.createContext(null);
 function useOcSkin() {
-  const ctx = React.useContext(OcSkinContext);
+  const ctx = React2.useContext(OcSkinContext);
   if (!ctx) {
     throw new Error("useOcSkin must be used within <OcThemeProvider>");
   }
@@ -1058,12 +1680,12 @@ var MODES = [
 function AppearanceControls({ className }) {
   const { skin, setSkin, themes } = useOcSkin();
   const { theme, setTheme } = nextThemes.useTheme();
-  const [mounted, setMounted] = React.useState(false);
-  React.useEffect(() => setMounted(true), []);
+  const [mounted, setMounted] = React2.useState(false);
+  React2.useEffect(() => setMounted(true), []);
   const activeMode = mounted ? theme ?? "system" : null;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "label-mono text-muted-foreground px-3 pt-3 pb-2", children: "mode" }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-3 gap-1 px-2 pb-2", children: MODES.map(({ id, label, Icon }) => {
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
         "button",
@@ -1077,7 +1699,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__ */ jsxRuntime.jsx(Icon, { className: "size-4", "aria-hidden": true }),
+            /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: "size-4", "aria-hidden": true }),
             label
           ]
         },
@@ -1147,9 +1769,9 @@ async function writeClipboard(text) {
   }
 }
 function CopyableDid({ did }) {
-  const [copied, setCopied] = React.useState(false);
-  const timerRef = React.useRef(null);
-  React.useEffect(
+  const [copied, setCopied] = React2.useState(false);
+  const timerRef = React2.useRef(null);
+  React2.useEffect(
     () => () => {
       if (timerRef.current) clearTimeout(timerRef.current);
     },
@@ -1195,9 +1817,9 @@ function PromoteRow({
   disabled,
   onPromote
 }) {
-  const [copied, setCopied] = React.useState(false);
-  const timerRef = React.useRef(null);
-  React.useEffect(
+  const [copied, setCopied] = React2.useState(false);
+  const timerRef = React2.useRef(null);
+  React2.useEffect(
     () => () => {
       if (timerRef.current) clearTimeout(timerRef.current);
     },
@@ -1268,12 +1890,12 @@ function IdentityPromoteSection({
   open,
   setDisplayIdentity
 }) {
-  const [identities, setIdentities] = React.useState(null);
-  const [loadFailed, setLoadFailed] = React.useState(false);
-  const [promoting, setPromoting] = React.useState(null);
-  const [promoteErr, setPromoteErr] = React.useState(null);
-  const lastFetchKeyRef = React.useRef(null);
-  React.useEffect(() => {
+  const [identities, setIdentities] = React2.useState(null);
+  const [loadFailed, setLoadFailed] = React2.useState(false);
+  const [promoting, setPromoting] = React2.useState(null);
+  const [promoteErr, setPromoteErr] = React2.useState(null);
+  const lastFetchKeyRef = React2.useRef(null);
+  React2.useEffect(() => {
     if (!open) return;
     if (lastFetchKeyRef.current === didOc) return;
     lastFetchKeyRef.current = didOc;
@@ -1364,9 +1986,9 @@ function MobileMenu({
   primary,
   secondary
 }) {
-  const [open, setOpen] = React.useState(false);
-  const ref = React.useRef(null);
-  React.useEffect(() => {
+  const [open, setOpen] = React2.useState(false);
+  const ref = React2.useRef(null);
+  React2.useEffect(() => {
     if (!open) return;
     const onClick = (e) => {
       if (ref.current && !ref.current.contains(e.target)) setOpen(false);
@@ -1473,15 +2095,15 @@ function OcAccountMenuView({
     addAccountUrl,
     tabPinned
   } = session;
-  const [hydrated, setHydrated] = React.useState(false);
-  const [open, setOpen] = React.useState(false);
-  const wrapRef = React.useRef(null);
+  const [hydrated, setHydrated] = React2.useState(false);
+  const [open, setOpen] = React2.useState(false);
+  const wrapRef = React2.useRef(null);
   const property = findFamilyProperty(current);
   const hostname = property?.hostname ?? `${current}.ochk.io`;
   const isHome = current === "home";
   const familyDashboardEnabled = showFamilyDashboard ?? !isHome;
-  React.useEffect(() => setHydrated(true), []);
-  React.useEffect(() => {
+  React2.useEffect(() => setHydrated(true), []);
+  React2.useEffect(() => {
     const onWake = () => {
       if (document.visibilityState === "visible") void refresh();
     };
@@ -1493,7 +2115,7 @@ function OcAccountMenuView({
       window.removeEventListener("focus", onFocus);
     };
   }, [refresh]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (!open) return;
     const onClick = (e) => {
       if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false);
@@ -1741,8 +2363,8 @@ function AccountsSection({
   signOut,
   onActionStart
 }) {
-  const [switching, setSwitching] = React.useState(null);
-  const [err, setErr] = React.useState(null);
+  const [switching, setSwitching] = React2.useState(null);
+  const [err, setErr] = React2.useState(null);
   if (!addAccountUrl) return null;
   const onSwitch = async (didOc) => {
     if (!switchAccount || switching) return;
@@ -2005,8 +2627,8 @@ function OcDashboardShell({
   children,
   className
 }) {
-  const [drawerOpen, setDrawerOpen] = React.useState(false);
-  React.useEffect(() => {
+  const [drawerOpen, setDrawerOpen] = React2.useState(false);
+  React2.useEffect(() => {
     if (!drawerOpen) return;
     function onKey(e) {
       if (e.key === "Escape") setDrawerOpen(false);
@@ -2336,15 +2958,25 @@ function OcAppBar({
   );
 }
 
+exports.AccentList = AccentList;
+exports.AccentNote = AccentNote;
 exports.AppShell = AppShell;
+exports.BrandBand = BrandBand;
 exports.Callout = Callout;
+exports.CheckList = CheckList;
+exports.ComparisonTable = ComparisonTable;
 exports.DataRow = DataRow;
 exports.DefinitionList = DefinitionList;
 exports.EcosystemSwitcher = EcosystemSwitcher;
+exports.EmailCapture = EmailCapture;
 exports.EmptyState = EmptyState;
 exports.FAMILY_PROPERTIES = FAMILY_PROPERTIES;
+exports.Faq = Faq;
+exports.FeatureCard = FeatureCard;
 exports.HelpHint = HelpHint;
 exports.LayoutSubHeader = LayoutSubHeader;
+exports.MarketingHeading = MarketingHeading;
+exports.NumberedStep = NumberedStep;
 exports.OcAccountMenu = OcAccountMenu;
 exports.OcAccountMenuView = OcAccountMenuView;
 exports.OcAppBar = OcAppBar;
@@ -2353,10 +2985,14 @@ exports.OcDashboardShell = OcDashboardShell;
 exports.OcLogoDropdown = OcLogoDropdown;
 exports.OcPrimaryNav = OcPrimaryNav;
 exports.SITE_STATE_LABEL = SITE_STATE_LABEL;
+exports.Section = Section;
 exports.SectionHeader = SectionHeader;
 exports.StatCard = StatCard;
 exports.StatGrid = StatGrid;
 exports.StatTile = StatTile;
+exports.StepList = StepList;
+exports.TwoToneHeading = TwoToneHeading;
+exports.VerifiedChip = VerifiedChip;
 exports.findFamilyProperty = findFamilyProperty;
 //# sourceMappingURL=components.js.map
 //# sourceMappingURL=components.js.map