@mieweb/ui 0.10.0-dev.15 → 0.10.0-dev.17

package/dist/chunk-KHSFJTEX.js

@@ -0,0 +1,1924 @@
+import { inputVariants, RequiredMark } from './chunk-3IMM2PM4.js';
+import { Badge } from './chunk-BMSG4NBH.js';
+import { buttonVariants } from './chunk-GVM6DTR5.js';
+import { cn } from './chunk-TQONQSJO.js';
+import * as React from 'react';
+import { ChevronDown, ArrowRight, ChevronRight, CircleCheck, Check, TrendingDown, TrendingUp, Star, X, Zap, Wrench, Workflow, Users, UserCheck, Truck, Timer, Target, Syringe, Stethoscope, Sparkles, Smartphone, ShieldCheck, Shield, Settings, Search, Scale, Rocket, Plug, Plane, Phone, Microscope, MessageSquare, MapPin, Mail, Lock, Lightbulb, Leaf, Layers, Hospital, HeartPulse, Headset, HardHat, Handshake, GraduationCap, Globe, FlaskConical, FileText, Factory, DollarSign, Database, Cloud, Clock, ClipboardCheck, ChartLine, ChartColumn, CalendarCheck, Calendar, Building2, Briefcase, Bell, BadgeCheck, Award, Activity } from 'lucide-react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/utils/own.ts
+function ownProperty(map, key) {
+  return map != null && Object.hasOwn(map, key) ? map[key] : void 0;
+}
+var templateIcons = {
+  activity: Activity,
+  award: Award,
+  "badge-check": BadgeCheck,
+  bell: Bell,
+  briefcase: Briefcase,
+  building: Building2,
+  calendar: Calendar,
+  "calendar-check": CalendarCheck,
+  "chart-column": ChartColumn,
+  "chart-line": ChartLine,
+  "circle-check": CircleCheck,
+  "clipboard-check": ClipboardCheck,
+  clock: Clock,
+  cloud: Cloud,
+  database: Database,
+  "dollar-sign": DollarSign,
+  factory: Factory,
+  "file-text": FileText,
+  flask: FlaskConical,
+  globe: Globe,
+  "graduation-cap": GraduationCap,
+  handshake: Handshake,
+  "hard-hat": HardHat,
+  headset: Headset,
+  "heart-pulse": HeartPulse,
+  hospital: Hospital,
+  layers: Layers,
+  leaf: Leaf,
+  lightbulb: Lightbulb,
+  lock: Lock,
+  mail: Mail,
+  "map-pin": MapPin,
+  "message-square": MessageSquare,
+  microscope: Microscope,
+  phone: Phone,
+  plane: Plane,
+  plug: Plug,
+  rocket: Rocket,
+  scale: Scale,
+  search: Search,
+  settings: Settings,
+  shield: Shield,
+  "shield-check": ShieldCheck,
+  smartphone: Smartphone,
+  sparkles: Sparkles,
+  stethoscope: Stethoscope,
+  syringe: Syringe,
+  target: Target,
+  timer: Timer,
+  "trending-up": TrendingUp,
+  truck: Truck,
+  "user-check": UserCheck,
+  users: Users,
+  workflow: Workflow,
+  wrench: Wrench,
+  zap: Zap
+};
+function TemplateIcon({ name, icons, className }) {
+  const Icon = ownProperty(icons, name) ?? ownProperty(templateIcons, name);
+  if (Icon)
+    return /* @__PURE__ */ jsx(
+      Icon,
+      {
+        "aria-hidden": "true",
+        strokeWidth: 1.75,
+        className: cn("size-5", className)
+      }
+    );
+  if (name.length <= 4)
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: cn("text-xs font-bold tracking-wide", className),
+        children: name
+      }
+    );
+  return null;
+}
+var toneSurface = {
+  default: "bg-background text-foreground",
+  muted: "bg-muted text-foreground",
+  brand: "bg-primary-900 text-white"
+};
+var toneClass = (tone) => toneSurface[tone];
+var cardClass = (tone) => tone === "brand" ? "border border-white/15 bg-white/5 text-white" : "border border-border bg-card text-card-foreground";
+var mutedTextClass = (tone) => tone === "brand" ? "text-white/80" : tone === "muted" ? "text-foreground/80" : "text-muted-foreground";
+var headingTextClass = (tone) => tone === "brand" ? "text-white" : "text-foreground";
+var accentTextClass = (tone) => tone === "brand" ? "text-white" : "text-primary-800 dark:text-primary-300";
+var containerClass = (width = "wide") => cn(
+  "mx-auto w-full px-4 sm:px-6 lg:px-8",
+  width === "narrow" ? "max-w-3xl" : "max-w-7xl"
+);
+var SAFE_HREF_SCHEME = /^(?:https?|mailto|tel):/i;
+function safeHref(href) {
+  if (href == null) return void 0;
+  const stripped = href.replace(/[\u0000-\u0020]/g, "");
+  if (!stripped) return void 0;
+  if (!/^[a-z][a-z0-9+.-]*:/i.test(stripped)) return href;
+  return SAFE_HREF_SCHEME.test(stripped) ? href : void 0;
+}
+function TemplateAnchor({
+  components,
+  trackingId,
+  children,
+  ...props
+}) {
+  const Link = components?.Link;
+  const href = safeHref(props.href);
+  const all = { ...props, href, "data-track": trackingId };
+  return Link && href != null ? /* @__PURE__ */ jsx(Link, { ...all, href, children }) : /* @__PURE__ */ jsx("a", { ...all, children });
+}
+var fetchPriorityHigh = React.version.startsWith("18.") ? { fetchpriority: "high" } : { fetchPriority: "high" };
+function TemplateImg({
+  components,
+  priority,
+  ...image
+}) {
+  const Image = components?.Image;
+  if (Image) return /* @__PURE__ */ jsx(Image, { ...image, priority });
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      ...image,
+      alt: image.alt,
+      loading: priority ? void 0 : "lazy",
+      ...priority ? fetchPriorityHigh : {},
+      decoding: "async"
+    }
+  );
+}
+function SectionHeading({
+  eyebrow,
+  title,
+  description,
+  as: Heading = "h2",
+  size = "section",
+  align = "start",
+  tone = "default",
+  titleId,
+  className
+}) {
+  if (!eyebrow && !title && !description) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "section-heading",
+      className: cn(
+        "max-w-3xl",
+        align === "center" && "mx-auto text-center",
+        className
+      ),
+      children: [
+        eyebrow && /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: cn(
+              "mb-3 text-sm font-semibold tracking-wider uppercase",
+              accentTextClass(tone)
+            ),
+            children: eyebrow
+          }
+        ),
+        title && /* @__PURE__ */ jsx(
+          Heading,
+          {
+            id: titleId,
+            className: cn(
+              "font-bold tracking-tight text-balance",
+              headingTextClass(tone),
+              size === "hero" ? "text-4xl sm:text-5xl lg:text-6xl" : "text-3xl sm:text-4xl"
+            ),
+            children: title
+          }
+        ),
+        description && /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: cn(
+              "mt-4 text-pretty",
+              size === "hero" ? "text-lg sm:text-xl" : "text-lg",
+              mutedTextClass(tone)
+            ),
+            children: description
+          }
+        )
+      ]
+    }
+  );
+}
+var SectionShell = React.forwardRef(
+  ({
+    eyebrow,
+    title,
+    description,
+    tone = "default",
+    align = "start",
+    width = "wide",
+    spacing = "default",
+    className,
+    children,
+    components,
+    ...rest
+  }, ref) => {
+    const titleId = React.useId();
+    return /* @__PURE__ */ jsx(
+      "section",
+      {
+        ref,
+        "data-slot": "landing-section",
+        "data-tone": tone,
+        "aria-labelledby": title ? titleId : void 0,
+        className: cn(
+          spacing === "compact" ? "py-10 sm:py-14" : "py-16 sm:py-24",
+          toneClass(tone),
+          className
+        ),
+        ...rest,
+        children: /* @__PURE__ */ jsxs("div", { className: containerClass(width), children: [
+          /* @__PURE__ */ jsx(
+            SectionHeading,
+            {
+              eyebrow,
+              title,
+              description,
+              align,
+              tone,
+              titleId,
+              className: cn(width === "narrow" && "max-w-none")
+            }
+          ),
+          children
+        ] })
+      }
+    );
+  }
+);
+SectionShell.displayName = "SectionShell";
+function CtaLinks({
+  primary,
+  secondary,
+  tone = "default",
+  align = "start",
+  className,
+  components
+}) {
+  if (!primary && !secondary) return null;
+  const onBrand = tone === "brand";
+  const wrap = "h-auto min-h-12 py-3 whitespace-normal text-center";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "cta-links",
+      className: cn(
+        "flex flex-col gap-3 sm:flex-row sm:flex-wrap",
+        align === "center" && "sm:justify-center",
+        className
+      ),
+      children: [
+        primary && /* @__PURE__ */ jsxs(
+          TemplateAnchor,
+          {
+            href: primary.href,
+            trackingId: primary.trackingId,
+            components,
+            "data-slot": "cta-primary",
+            className: cn(
+              buttonVariants({ variant: "primary", size: "lg" }),
+              wrap,
+              onBrand && "text-primary-900 hover:bg-primary-50 active:bg-primary-100 bg-white"
+            ),
+            children: [
+              primary.label,
+              /* @__PURE__ */ jsx(ArrowRight, { "aria-hidden": "true", className: "size-5 rtl:-scale-x-100" })
+            ]
+          }
+        ),
+        secondary && /* @__PURE__ */ jsx(
+          TemplateAnchor,
+          {
+            href: secondary.href,
+            trackingId: secondary.trackingId,
+            components,
+            "data-slot": "cta-secondary",
+            className: cn(
+              buttonVariants({ variant: "outline", size: "lg" }),
+              wrap,
+              onBrand && "border-white/70 text-white hover:bg-white/10 hover:text-white dark:border-white/70 dark:text-white dark:hover:bg-white/10"
+            ),
+            children: secondary.label
+          }
+        )
+      ]
+    }
+  );
+}
+function IconTile({
+  name,
+  icons,
+  tone = "default",
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "icon-tile",
+      className: cn(
+        "inline-flex size-11 shrink-0 items-center justify-center rounded-xl",
+        tone === "brand" ? "bg-white/10 text-white" : "bg-primary-100 text-primary-900 dark:bg-primary-900/60 dark:text-primary-200",
+        className
+      ),
+      children: /* @__PURE__ */ jsx(TemplateIcon, { name, icons })
+    }
+  );
+}
+var cellClass = "px-3 py-3 sm:px-5 sm:py-4";
+var ComparisonSection = React.forwardRef(
+  ({
+    columns,
+    rows,
+    highlightColumn,
+    labels,
+    title,
+    tone = "default",
+    align = "center",
+    ...rest
+  }, ref) => {
+    const renderValue = (value) => typeof value === "string" ? value : value ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Check,
+        {
+          "aria-hidden": "true",
+          className: "text-success mx-auto size-5",
+          strokeWidth: 2.5
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "sr-only", children: labels?.included ?? "Included" })
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        X,
+        {
+          "aria-hidden": "true",
+          className: cn("mx-auto size-5", mutedTextClass(tone))
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "sr-only", children: labels?.notIncluded ?? "Not included" })
+    ] });
+    return /* @__PURE__ */ jsx(
+      SectionShell,
+      {
+        ref,
+        "data-slot": "comparison-section",
+        title,
+        tone,
+        align,
+        ...rest,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn("mt-12 overflow-x-auto rounded-2xl", cardClass(tone)),
+            children: /* @__PURE__ */ jsxs(
+              "table",
+              {
+                className: cn(
+                  "w-full border-collapse text-start",
+                  // Two value columns fit a phone; more scroll sideways.
+                  columns.length > 2 && "min-w-[36rem]"
+                ),
+                children: [
+                  title && /* @__PURE__ */ jsx("caption", { className: "sr-only", children: title }),
+                  /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+                    /* @__PURE__ */ jsx(
+                      "th",
+                      {
+                        scope: "col",
+                        className: cn(cellClass, "text-start text-sm font-semibold"),
+                        children: labels?.feature ?? "Feature"
+                      }
+                    ),
+                    columns.map((column, i) => /* @__PURE__ */ jsx(
+                      "th",
+                      {
+                        scope: "col",
+                        className: cn(
+                          cellClass,
+                          "text-center text-sm font-semibold",
+                          i === highlightColumn && "bg-primary-800 text-white"
+                        ),
+                        children: column
+                      },
+                      column
+                    ))
+                  ] }) }),
+                  /* @__PURE__ */ jsx("tbody", { children: rows.map((row) => /* @__PURE__ */ jsxs(
+                    "tr",
+                    {
+                      className: cn(
+                        "border-t",
+                        tone === "brand" ? "border-white/15" : "border-border"
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "th",
+                          {
+                            scope: "row",
+                            className: cn(cellClass, "text-start font-medium"),
+                            children: row.feature
+                          }
+                        ),
+                        columns.map((column, i) => /* @__PURE__ */ jsx(
+                          "td",
+                          {
+                            className: cn(
+                              cellClass,
+                              "text-center text-sm",
+                              i === highlightColumn && "bg-primary-500/10 font-semibold"
+                            ),
+                            children: renderValue(row.values[i] ?? "")
+                          },
+                          column
+                        ))
+                      ]
+                    },
+                    row.feature
+                  )) })
+                ]
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+);
+ComparisonSection.displayName = "ComparisonSection";
+var CtaSection = React.forwardRef(
+  ({
+    eyebrow,
+    title,
+    description,
+    primaryCta,
+    secondaryCta,
+    note,
+    tone = "brand",
+    align = "center",
+    layout = "band",
+    components,
+    className,
+    ...rest
+  }, ref) => {
+    const titleId = React.useId();
+    const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        SectionHeading,
+        {
+          eyebrow,
+          title,
+          description,
+          align,
+          tone,
+          titleId
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        CtaLinks,
+        {
+          primary: primaryCta,
+          secondary: secondaryCta,
+          tone,
+          align,
+          components,
+          className: "mt-8"
+        }
+      ),
+      note && /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: cn(
+            "mt-4 text-sm",
+            mutedTextClass(tone),
+            align === "center" && "text-center"
+          ),
+          children: note
+        }
+      )
+    ] });
+    return /* @__PURE__ */ jsx(
+      "section",
+      {
+        ref,
+        "data-slot": "cta-section",
+        "data-tone": tone,
+        "aria-labelledby": titleId,
+        className: cn(
+          "py-16 sm:py-24",
+          layout === "band" ? toneClass(tone) : "bg-background",
+          className
+        ),
+        ...rest,
+        children: /* @__PURE__ */ jsx("div", { className: containerClass(), children: layout === "panel" ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "rounded-3xl px-6 py-12 sm:px-12 sm:py-16",
+              toneClass(tone),
+              tone !== "brand" && "border-border border"
+            ),
+            children: body
+          }
+        ) : body })
+      }
+    );
+  }
+);
+CtaSection.displayName = "CtaSection";
+var FaqSection = React.forwardRef(
+  ({ items, tone = "default", align = "center", ...rest }, ref) => /* @__PURE__ */ jsx(
+    SectionShell,
+    {
+      ref,
+      "data-slot": "faq-section",
+      tone,
+      align,
+      width: "narrow",
+      ...rest,
+      children: /* @__PURE__ */ jsx("div", { className: "mt-10 space-y-3", children: items.map((item) => /* @__PURE__ */ jsxs(
+        "details",
+        {
+          id: item.id,
+          className: cn("group rounded-xl", cardClass(tone)),
+          children: [
+            /* @__PURE__ */ jsxs(
+              "summary",
+              {
+                className: cn(
+                  "flex cursor-pointer list-none items-center justify-between gap-4 rounded-xl px-5 py-4 text-start font-semibold",
+                  "focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none",
+                  "[&::-webkit-details-marker]:hidden"
+                ),
+                children: [
+                  item.question,
+                  /* @__PURE__ */ jsx(
+                    ChevronDown,
+                    {
+                      "aria-hidden": "true",
+                      className: "size-5 shrink-0 transition-transform group-open:rotate-180 motion-reduce:transition-none"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "px-5 pb-5 whitespace-pre-line",
+                  mutedTextClass(tone)
+                ),
+                children: item.answer
+              }
+            )
+          ]
+        },
+        item.id ?? item.question
+      )) })
+    }
+  )
+);
+FaqSection.displayName = "FaqSection";
+var columnClass = {
+  2: "lg:grid-cols-2",
+  3: "lg:grid-cols-3",
+  4: "lg:grid-cols-4"
+};
+var FeatureGridSection = React.forwardRef(
+  ({
+    features,
+    columns = 3,
+    variant = "cards",
+    icons,
+    tone = "default",
+    align = "start",
+    components,
+    ...rest
+  }, ref) => /* @__PURE__ */ jsx(
+    SectionShell,
+    {
+      ref,
+      "data-slot": "feature-grid-section",
+      tone,
+      align,
+      ...rest,
+      children: /* @__PURE__ */ jsx(
+        "ul",
+        {
+          className: cn("mt-12 grid gap-6 sm:grid-cols-2", columnClass[columns]),
+          children: features.map((feature) => /* @__PURE__ */ jsxs(
+            "li",
+            {
+              className: cn(
+                "flex flex-col gap-3",
+                variant === "cards" && cn("rounded-2xl p-6", cardClass(tone))
+              ),
+              children: [
+                feature.icon && /* @__PURE__ */ jsx(IconTile, { name: feature.icon, icons, tone }),
+                feature.tag && /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: cn(
+                      "text-xs font-semibold tracking-wider uppercase",
+                      accentTextClass(tone)
+                    ),
+                    children: feature.tag
+                  }
+                ),
+                /* @__PURE__ */ jsx("h3", { className: cn("text-lg font-semibold", headingTextClass(tone)), children: feature.title }),
+                /* @__PURE__ */ jsx("p", { className: mutedTextClass(tone), children: feature.description }),
+                feature.link && /* @__PURE__ */ jsxs(
+                  TemplateAnchor,
+                  {
+                    href: feature.link.href,
+                    trackingId: feature.link.trackingId,
+                    components,
+                    className: cn(
+                      "mt-auto inline-flex items-center gap-1 font-semibold hover:underline",
+                      accentTextClass(tone)
+                    ),
+                    children: [
+                      feature.link.label,
+                      /* @__PURE__ */ jsx(
+                        ArrowRight,
+                        {
+                          "aria-hidden": "true",
+                          className: "size-4 rtl:-scale-x-100"
+                        }
+                      )
+                    ]
+                  }
+                )
+              ]
+            },
+            feature.title
+          ))
+        }
+      )
+    }
+  )
+);
+FeatureGridSection.displayName = "FeatureGridSection";
+var HeroSection = React.forwardRef(
+  ({
+    eyebrow,
+    title,
+    description,
+    variant = "centered",
+    tone = "default",
+    primaryCta,
+    secondaryCta,
+    ctaNote,
+    highlights,
+    image,
+    breadcrumbs,
+    headingLevel = "h1",
+    labels,
+    components,
+    className,
+    ...rest
+  }, ref) => {
+    const titleId = React.useId();
+    const split = variant === "split" && !!image;
+    const align = split ? "start" : "center";
+    return /* @__PURE__ */ jsx(
+      "section",
+      {
+        ref,
+        "data-slot": "hero-section",
+        "data-tone": tone,
+        "aria-labelledby": titleId,
+        className: cn("py-16 sm:py-24 lg:py-28", toneClass(tone), className),
+        ...rest,
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              containerClass(),
+              split && "grid items-center gap-12 lg:grid-cols-2"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: cn(!split && "flex flex-col items-center"), children: [
+                breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsx(
+                  "nav",
+                  {
+                    "aria-label": labels?.breadcrumb ?? "Breadcrumb",
+                    className: "mb-6",
+                    children: /* @__PURE__ */ jsx(
+                      "ol",
+                      {
+                        className: cn(
+                          "flex flex-wrap items-center gap-1 text-sm",
+                          mutedTextClass(tone),
+                          !split && "justify-center"
+                        ),
+                        children: breadcrumbs.map((crumb, i) => {
+                          const last = i === breadcrumbs.length - 1;
+                          return /* @__PURE__ */ jsx("li", { className: "flex items-center gap-1", children: last ? /* @__PURE__ */ jsx("span", { "aria-current": "page", children: crumb.label }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                            /* @__PURE__ */ jsx(
+                              TemplateAnchor,
+                              {
+                                href: crumb.href,
+                                trackingId: crumb.trackingId,
+                                components,
+                                className: "hover:underline focus-visible:underline",
+                                children: crumb.label
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              ChevronRight,
+                              {
+                                "aria-hidden": "true",
+                                className: "size-4 rtl:-scale-x-100"
+                              }
+                            )
+                          ] }) }, crumb.href);
+                        })
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  SectionHeading,
+                  {
+                    as: headingLevel,
+                    size: "hero",
+                    eyebrow,
+                    title,
+                    description,
+                    align,
+                    tone,
+                    titleId
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  CtaLinks,
+                  {
+                    primary: primaryCta,
+                    secondary: secondaryCta,
+                    tone,
+                    align,
+                    components,
+                    className: "mt-8"
+                  }
+                ),
+                ctaNote && /* @__PURE__ */ jsx("p", { className: cn("mt-4 text-sm", mutedTextClass(tone)), children: ctaNote }),
+                highlights && highlights.length > 0 && /* @__PURE__ */ jsx(
+                  "ul",
+                  {
+                    className: cn(
+                      "mt-8 flex flex-wrap gap-x-6 gap-y-2 text-sm font-medium",
+                      !split && "justify-center"
+                    ),
+                    children: highlights.map((item) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ jsx(
+                        CircleCheck,
+                        {
+                          "aria-hidden": "true",
+                          className: cn("size-4 shrink-0", accentTextClass(tone))
+                        }
+                      ),
+                      item
+                    ] }, item))
+                  }
+                )
+              ] }),
+              image && /* @__PURE__ */ jsx(
+                TemplateImg,
+                {
+                  ...image,
+                  priority: true,
+                  components,
+                  className: cn(
+                    "h-auto w-full rounded-2xl object-cover shadow-xl",
+                    !split && "mx-auto mt-12 max-w-5xl"
+                  )
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+HeroSection.displayName = "HeroSection";
+var defaultLeadFormFields = [
+  {
+    name: "firstName",
+    label: "First name",
+    required: true,
+    autoComplete: "given-name",
+    width: "half"
+  },
+  {
+    name: "lastName",
+    label: "Last name",
+    required: true,
+    autoComplete: "family-name",
+    width: "half"
+  },
+  {
+    name: "email",
+    label: "Work email",
+    type: "email",
+    required: true,
+    autoComplete: "email"
+  },
+  {
+    name: "company",
+    label: "Company",
+    required: true,
+    autoComplete: "organization"
+  }
+];
+var controlClass = cn(
+  // Input's field styling (single source of truth for form controls); h-auto
+  // and py-2.5 because this one class also sizes <textarea> and <select>.
+  inputVariants({ size: "md" }),
+  "block h-auto py-2.5"
+);
+var LeadFormSection = React.forwardRef(
+  ({
+    eyebrow,
+    title,
+    description,
+    action,
+    method = "post",
+    fields = defaultLeadFormFields,
+    hiddenFields,
+    submitLabel = "Submit",
+    note,
+    layout = "split",
+    tone = "muted",
+    submitTrackingId,
+    components,
+    className,
+    ...rest
+  }, ref) => {
+    const baseId = React.useId();
+    const titleId = `${baseId}-title`;
+    const split = layout === "split";
+    const resolvedAction = typeof action === "string" ? safeHref(action) : action;
+    if (resolvedAction == null) return null;
+    return /* @__PURE__ */ jsx(
+      "section",
+      {
+        ref,
+        "data-slot": "lead-form-section",
+        "data-tone": tone,
+        "aria-labelledby": titleId,
+        className: cn("py-16 sm:py-24", toneClass(tone), className),
+        ...rest,
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              containerClass(split ? "wide" : "narrow"),
+              split && "grid items-start gap-12 lg:grid-cols-2"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                SectionHeading,
+                {
+                  eyebrow,
+                  title,
+                  description,
+                  align: split ? "start" : "center",
+                  tone,
+                  titleId
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "form",
+                {
+                  action: resolvedAction,
+                  method: typeof resolvedAction === "string" ? method : void 0,
+                  "aria-labelledby": titleId,
+                  className: cn(
+                    "grid gap-5 rounded-2xl p-6 sm:grid-cols-2 sm:p-8",
+                    // The form card always uses the theme surface so inputs stay legible on a brand band.
+                    cardClass("default"),
+                    !split && "mt-10"
+                  ),
+                  children: [
+                    hiddenFields && Object.entries(hiddenFields).map(([name, value]) => /* @__PURE__ */ jsx("input", { type: "hidden", name, value }, name)),
+                    fields.map((field) => {
+                      const id = `${baseId}-${field.name}`;
+                      const common = {
+                        id,
+                        name: field.name,
+                        required: field.required,
+                        autoComplete: field.autoComplete,
+                        className: controlClass
+                      };
+                      return /* @__PURE__ */ jsxs(
+                        "div",
+                        {
+                          className: cn(field.width !== "half" && "sm:col-span-2"),
+                          children: [
+                            /* @__PURE__ */ jsxs(
+                              "label",
+                              {
+                                htmlFor: id,
+                                className: "mb-1.5 block text-sm font-medium",
+                                children: [
+                                  field.label,
+                                  field.required && /* @__PURE__ */ jsx(RequiredMark, {})
+                                ]
+                              }
+                            ),
+                            field.type === "textarea" ? /* @__PURE__ */ jsx(
+                              "textarea",
+                              {
+                                ...common,
+                                rows: 4,
+                                placeholder: field.placeholder
+                              }
+                            ) : field.type === "select" ? /* @__PURE__ */ jsxs("select", { ...common, defaultValue: "", children: [
+                              /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: field.placeholder ?? "" }),
+                              field.options?.map((option) => /* @__PURE__ */ jsx("option", { value: option, children: option }, option))
+                            ] }) : /* @__PURE__ */ jsx(
+                              "input",
+                              {
+                                ...common,
+                                type: field.type ?? "text",
+                                placeholder: field.placeholder
+                              }
+                            )
+                          ]
+                        },
+                        field.name
+                      );
+                    }),
+                    /* @__PURE__ */ jsxs("div", { className: "sm:col-span-2", children: [
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "submit",
+                          "data-track": submitTrackingId,
+                          className: cn(
+                            buttonVariants({
+                              variant: "primary",
+                              size: "lg",
+                              fullWidth: true
+                            }),
+                            "h-auto min-h-12 py-3 whitespace-normal"
+                          ),
+                          children: submitLabel
+                        }
+                      ),
+                      note && /* @__PURE__ */ jsx("p", { className: cn("mt-3 text-xs", mutedTextClass("default")), children: note })
+                    ] })
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+LeadFormSection.displayName = "LeadFormSection";
+var duration = { slow: "60s", normal: "40s", fast: "25s" };
+function Logo({
+  logo,
+  tone,
+  hidden,
+  components
+}) {
+  const mark = logo.src ? /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: logo.src,
+      alt: hidden ? "" : logo.name,
+      loading: "lazy",
+      decoding: "async",
+      className: cn(
+        "h-8 w-auto max-w-[9rem] object-contain opacity-70 grayscale transition hover:opacity-100 hover:grayscale-0",
+        // Logos are drawn white on dark surfaces so dark wordmarks stay visible.
+        tone === "brand" ? "brightness-0 invert" : "dark:brightness-0 dark:invert"
+      )
+    }
+  ) : /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "text-lg font-semibold whitespace-nowrap",
+        mutedTextClass(tone ?? "default")
+      ),
+      children: logo.name
+    }
+  );
+  return logo.href ? /* @__PURE__ */ jsx(
+    TemplateAnchor,
+    {
+      href: logo.href,
+      trackingId: logo.trackingId,
+      components,
+      tabIndex: hidden ? -1 : void 0,
+      className: "focus-visible:ring-ring inline-flex rounded focus-visible:ring-2 focus-visible:outline-none",
+      children: mark
+    }
+  ) : mark;
+}
+var LogoCloudSection = React.forwardRef(
+  ({
+    logos,
+    variant = "grid",
+    speed = "normal",
+    tone = "default",
+    align = "center",
+    components,
+    ...rest
+  }, ref) => /* @__PURE__ */ jsx(
+    SectionShell,
+    {
+      ref,
+      "data-slot": "logo-cloud-section",
+      tone,
+      align,
+      spacing: "compact",
+      ...rest,
+      children: variant === "marquee" ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "mie-marquee-host mt-8 overflow-hidden [mask-image:linear-gradient(90deg,transparent,black_10%,black_90%,transparent)]",
+          style: { "--mie-marquee-duration": duration[speed] },
+          children: /* @__PURE__ */ jsxs("ul", { className: "mie-marquee flex w-max items-center", children: [
+            logos.map((logo) => /* @__PURE__ */ jsx("li", { className: "shrink-0 pe-12", children: /* @__PURE__ */ jsx(Logo, { logo, tone, components }) }, logo.name)),
+            logos.map((logo) => /* @__PURE__ */ jsx(
+              "li",
+              {
+                "data-duplicate": "",
+                "aria-hidden": "true",
+                className: "shrink-0 pe-12",
+                children: /* @__PURE__ */ jsx(Logo, { logo, tone, components, hidden: true })
+              },
+              `${logo.name}-copy`
+            ))
+          ] })
+        }
+      ) : /* @__PURE__ */ jsx("ul", { className: "mt-8 flex flex-wrap items-center justify-center gap-x-12 gap-y-8", children: logos.map((logo) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Logo, { logo, tone, components }) }, logo.name)) })
+    }
+  )
+);
+LogoCloudSection.displayName = "LogoCloudSection";
+var columnClass2 = [
+  "",
+  "lg:grid-cols-1",
+  "lg:grid-cols-2",
+  "lg:grid-cols-3",
+  "lg:grid-cols-4"
+];
+var PricingSection = React.forwardRef(
+  ({ plans, note, tone = "default", align = "center", components, ...rest }, ref) => /* @__PURE__ */ jsxs(
+    SectionShell,
+    {
+      ref,
+      "data-slot": "pricing-section",
+      tone,
+      align,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          "ul",
+          {
+            className: cn(
+              "mt-12 grid items-stretch gap-6 md:grid-cols-2",
+              columnClass2[Math.min(plans.length, 4)],
+              plans.length === 1 && "mx-auto max-w-md"
+            ),
+            children: plans.map((plan) => /* @__PURE__ */ jsxs(
+              "li",
+              {
+                className: cn(
+                  "relative flex flex-col rounded-2xl p-6 sm:p-8",
+                  cardClass(tone),
+                  plan.highlighted && "ring-primary-600 dark:ring-primary-400 ring-2"
+                ),
+                children: [
+                  plan.highlighted && plan.badge && /* @__PURE__ */ jsx(Badge, { className: "bg-primary-800 dark:bg-primary-800 absolute start-6 -top-3 px-3 py-1 text-xs font-semibold text-white dark:text-white", children: plan.badge }),
+                  /* @__PURE__ */ jsx("h3", { className: cn("text-lg font-semibold", headingTextClass(tone)), children: plan.name }),
+                  plan.description && /* @__PURE__ */ jsx("p", { className: cn("mt-2 text-sm", mutedTextClass(tone)), children: plan.description }),
+                  /* @__PURE__ */ jsxs("p", { className: "mt-6 flex flex-wrap items-baseline gap-x-2", children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: cn(
+                          "text-4xl font-bold tracking-tight",
+                          headingTextClass(tone)
+                        ),
+                        children: plan.price
+                      }
+                    ),
+                    plan.period && /* @__PURE__ */ jsx("span", { className: cn("text-sm", mutedTextClass(tone)), children: plan.period })
+                  ] }),
+                  /* @__PURE__ */ jsx("ul", { className: "mt-6 flex-1 space-y-3 text-sm", children: plan.features.map((feature) => /* @__PURE__ */ jsxs("li", { className: "flex gap-3", children: [
+                    /* @__PURE__ */ jsx(
+                      Check,
+                      {
+                        "aria-hidden": "true",
+                        className: cn(
+                          "mt-0.5 size-4 shrink-0",
+                          accentTextClass(tone)
+                        )
+                      }
+                    ),
+                    feature
+                  ] }, feature)) }),
+                  plan.cta && /* @__PURE__ */ jsx(
+                    TemplateAnchor,
+                    {
+                      href: plan.cta.href,
+                      trackingId: plan.cta.trackingId,
+                      components,
+                      className: cn(
+                        buttonVariants({
+                          variant: plan.highlighted ? "primary" : "outline",
+                          size: "lg",
+                          fullWidth: true
+                        }),
+                        "mt-8 h-auto min-h-12 py-3 whitespace-normal",
+                        tone === "brand" && (plan.highlighted ? "text-primary-900 hover:bg-primary-50 bg-white" : "border-white/70 text-white hover:bg-white/10 hover:text-white dark:border-white/70 dark:text-white")
+                      ),
+                      children: plan.cta.label
+                    }
+                  )
+                ]
+              },
+              plan.name
+            ))
+          }
+        ),
+        note && /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: cn(
+              "mt-8 text-sm",
+              mutedTextClass(tone),
+              align === "center" && "text-center"
+            ),
+            children: note
+          }
+        )
+      ]
+    }
+  )
+);
+PricingSection.displayName = "PricingSection";
+var columnClass3 = [
+  "",
+  "",
+  "lg:grid-cols-2",
+  "lg:grid-cols-3",
+  "lg:grid-cols-4"
+];
+var connectorInset = [
+  "",
+  "",
+  "inset-x-[25%]",
+  "inset-x-[16.667%]",
+  "inset-x-[12.5%]"
+];
+var ProcessStepsSection = React.forwardRef(({ steps, icons, tone = "default", align = "center", ...rest }, ref) => {
+  const columns = Math.min(steps.length, 4);
+  return /* @__PURE__ */ jsx(
+    SectionShell,
+    {
+      ref,
+      "data-slot": "process-steps-section",
+      tone,
+      align,
+      ...rest,
+      children: /* @__PURE__ */ jsxs("div", { className: "relative mt-12", children: [
+        steps.length > 1 && steps.length <= 4 && /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "absolute top-6 hidden h-px lg:block",
+              connectorInset[columns],
+              tone === "brand" ? "bg-white/25" : "bg-border"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("ol", { className: cn("relative grid gap-10", columnClass3[columns]), children: steps.map((step, i) => /* @__PURE__ */ jsxs(
+          "li",
+          {
+            className: "flex flex-col items-center text-center",
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: cn(
+                    "flex size-12 items-center justify-center rounded-full text-lg font-bold",
+                    tone === "brand" ? "text-primary-900 bg-white" : "bg-primary-800 text-white"
+                  ),
+                  children: step.icon ? /* @__PURE__ */ jsx(TemplateIcon, { name: step.icon, icons }) : i + 1
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "h3",
+                {
+                  className: cn(
+                    "mt-5 text-lg font-semibold",
+                    headingTextClass(tone)
+                  ),
+                  children: step.title
+                }
+              ),
+              /* @__PURE__ */ jsx("p", { className: cn("mt-2 max-w-xs", mutedTextClass(tone)), children: step.description })
+            ]
+          },
+          step.title
+        )) })
+      ] })
+    }
+  );
+});
+ProcessStepsSection.displayName = "ProcessStepsSection";
+var columnClass4 = {
+  2: "lg:grid-cols-2",
+  3: "lg:grid-cols-3",
+  4: "lg:grid-cols-4"
+};
+var ResourceCardsSection = React.forwardRef(
+  ({
+    items,
+    columns = 3,
+    viewAll,
+    tone = "default",
+    align = "start",
+    components,
+    ...rest
+  }, ref) => /* @__PURE__ */ jsxs(
+    SectionShell,
+    {
+      ref,
+      "data-slot": "resource-cards-section",
+      tone,
+      align,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          "ul",
+          {
+            className: cn("mt-12 grid gap-6 sm:grid-cols-2", columnClass4[columns]),
+            children: items.map((item) => /* @__PURE__ */ jsxs(
+              "li",
+              {
+                className: cn(
+                  "group relative flex flex-col overflow-hidden rounded-2xl",
+                  "focus-within:ring-ring focus-within:ring-2",
+                  cardClass(tone)
+                ),
+                children: [
+                  item.image && /* @__PURE__ */ jsx(
+                    TemplateImg,
+                    {
+                      ...item.image,
+                      components,
+                      className: "aspect-video w-full object-cover"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-2 p-6", children: [
+                    item.kind && /* @__PURE__ */ jsx(
+                      "p",
+                      {
+                        className: cn(
+                          "text-xs font-semibold tracking-wider uppercase",
+                          accentTextClass(tone)
+                        ),
+                        children: item.kind
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "h3",
+                      {
+                        className: cn("text-lg font-semibold", headingTextClass(tone)),
+                        children: /* @__PURE__ */ jsx(
+                          TemplateAnchor,
+                          {
+                            href: item.href,
+                            trackingId: item.trackingId,
+                            components,
+                            className: "group-hover:underline after:absolute after:inset-0 focus-visible:outline-none",
+                            children: item.title
+                          }
+                        )
+                      }
+                    ),
+                    item.excerpt && /* @__PURE__ */ jsx("p", { className: cn("line-clamp-3", mutedTextClass(tone)), children: item.excerpt }),
+                    item.meta && /* @__PURE__ */ jsx("p", { className: cn("mt-auto pt-2 text-sm", mutedTextClass(tone)), children: item.meta })
+                  ] })
+                ]
+              },
+              item.href
+            ))
+          }
+        ),
+        viewAll && /* @__PURE__ */ jsx("p", { className: cn("mt-10", align === "center" && "text-center"), children: /* @__PURE__ */ jsxs(
+          TemplateAnchor,
+          {
+            href: viewAll.href,
+            trackingId: viewAll.trackingId,
+            components,
+            className: cn(
+              "inline-flex items-center gap-1 font-semibold hover:underline",
+              accentTextClass(tone)
+            ),
+            children: [
+              viewAll.label,
+              /* @__PURE__ */ jsx(
+                ArrowRight,
+                {
+                  "aria-hidden": "true",
+                  className: "size-4 rtl:-scale-x-100"
+                }
+              )
+            ]
+          }
+        ) })
+      ]
+    }
+  )
+);
+ResourceCardsSection.displayName = "ResourceCardsSection";
+var SplitContentSection = React.forwardRef(
+  ({
+    eyebrow,
+    title,
+    description,
+    image,
+    caption,
+    bullets,
+    primaryCta,
+    secondaryCta,
+    mediaPosition = "end",
+    tone = "default",
+    components,
+    className,
+    ...rest
+  }, ref) => {
+    const titleId = React.useId();
+    return /* @__PURE__ */ jsx(
+      "section",
+      {
+        ref,
+        "data-slot": "split-content-section",
+        "data-tone": tone,
+        "aria-labelledby": titleId,
+        className: cn("py-16 sm:py-24", toneClass(tone), className),
+        ...rest,
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              containerClass(),
+              "grid items-center gap-12 lg:grid-cols-2"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx(
+                  SectionHeading,
+                  {
+                    eyebrow,
+                    title,
+                    description,
+                    tone,
+                    titleId
+                  }
+                ),
+                bullets && bullets.length > 0 && /* @__PURE__ */ jsx("ul", { className: "mt-6 space-y-3", children: bullets.map((item) => /* @__PURE__ */ jsxs("li", { className: "flex gap-3", children: [
+                  /* @__PURE__ */ jsx(
+                    CircleCheck,
+                    {
+                      "aria-hidden": "true",
+                      className: cn(
+                        "mt-0.5 size-5 shrink-0",
+                        accentTextClass(tone)
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: mutedTextClass(tone), children: item })
+                ] }, item)) }),
+                /* @__PURE__ */ jsx(
+                  CtaLinks,
+                  {
+                    primary: primaryCta,
+                    secondary: secondaryCta,
+                    tone,
+                    components,
+                    className: "mt-8"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("figure", { className: cn(mediaPosition === "start" && "lg:order-first"), children: [
+                /* @__PURE__ */ jsx(
+                  TemplateImg,
+                  {
+                    ...image,
+                    components,
+                    className: "h-auto w-full rounded-2xl object-cover shadow-lg"
+                  }
+                ),
+                caption && /* @__PURE__ */ jsx("figcaption", { className: cn("mt-3 text-sm", mutedTextClass(tone)), children: caption })
+              ] })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+SplitContentSection.displayName = "SplitContentSection";
+var columnClass5 = [
+  "",
+  "",
+  "lg:grid-cols-2",
+  "lg:grid-cols-3",
+  "lg:grid-cols-4"
+];
+var StatsSection = React.forwardRef(
+  ({
+    stats,
+    variant = "plain",
+    locale,
+    tone = "default",
+    align = "center",
+    ...rest
+  }, ref) => {
+    const format = new Intl.NumberFormat(locale);
+    return /* @__PURE__ */ jsx(
+      SectionShell,
+      {
+        ref,
+        "data-slot": "stats-section",
+        tone,
+        align,
+        ...rest,
+        children: /* @__PURE__ */ jsx(
+          "dl",
+          {
+            className: cn(
+              "mt-12 grid gap-6 sm:grid-cols-2",
+              columnClass5[Math.min(stats.length, 4)]
+            ),
+            children: stats.map((stat) => {
+              const Trend = stat.trend === "down" ? TrendingDown : TrendingUp;
+              return /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "flex flex-col-reverse gap-2",
+                    align === "center" && "items-center text-center",
+                    variant === "cards" && cn("rounded-2xl p-6", cardClass(tone))
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxs("dt", { children: [
+                      /* @__PURE__ */ jsx("span", { className: "font-semibold", children: stat.label }),
+                      stat.description && /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: cn("mt-1 block text-sm", mutedTextClass(tone)),
+                          children: stat.description
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs(
+                      "dd",
+                      {
+                        className: cn(
+                          "flex items-center gap-2 text-4xl font-bold tracking-tight tabular-nums sm:text-5xl",
+                          tone === "brand" ? "text-white" : "text-primary-800 dark:text-primary-300"
+                        ),
+                        children: [
+                          stat.trend && /* @__PURE__ */ jsx(Trend, { "aria-hidden": "true", className: "size-7 shrink-0" }),
+                          stat.prefix,
+                          typeof stat.value === "number" ? format.format(stat.value) : stat.value,
+                          stat.suffix
+                        ]
+                      }
+                    )
+                  ]
+                },
+                stat.label
+              );
+            })
+          }
+        )
+      }
+    );
+  }
+);
+StatsSection.displayName = "StatsSection";
+var TestimonialSection = React.forwardRef(
+  ({
+    testimonials,
+    variant = "cards",
+    labels,
+    tone = "default",
+    align = "center",
+    components,
+    ...rest
+  }, ref) => {
+    const featured = variant === "featured";
+    const items = featured ? testimonials.slice(0, 1) : testimonials;
+    return /* @__PURE__ */ jsx(
+      SectionShell,
+      {
+        ref,
+        "data-slot": "testimonial-section",
+        tone,
+        align,
+        width: featured ? "narrow" : "wide",
+        ...rest,
+        children: /* @__PURE__ */ jsx(
+          "ul",
+          {
+            className: cn(
+              "mt-12 grid gap-6",
+              !featured && "md:grid-cols-2 lg:grid-cols-3"
+            ),
+            children: items.map(({ rating, ...t }) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+              "figure",
+              {
+                className: cn(
+                  "flex h-full flex-col gap-6",
+                  featured ? "items-center text-center" : cn("rounded-2xl p-6", cardClass(tone))
+                ),
+                children: [
+                  rating && /* @__PURE__ */ jsxs("p", { className: "text-warning flex gap-0.5", children: [
+                    Array.from({ length: 5 }, (_, i) => /* @__PURE__ */ jsx(
+                      Star,
+                      {
+                        "aria-hidden": "true",
+                        className: cn(
+                          "size-4",
+                          i < rating ? "fill-current" : "opacity-30"
+                        )
+                      },
+                      i
+                    )),
+                    /* @__PURE__ */ jsx("span", { className: "sr-only", children: (labels?.rating ?? "Rated {rating} out of 5").replace(
+                      "{rating}",
+                      String(rating)
+                    ) })
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    "blockquote",
+                    {
+                      className: cn(
+                        "text-pretty",
+                        featured ? cn(
+                          "text-2xl font-medium sm:text-3xl",
+                          headingTextClass(tone)
+                        ) : "text-base"
+                      ),
+                      children: /* @__PURE__ */ jsx("p", { children: t.quote })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("figcaption", { className: "mt-auto flex items-center gap-3", children: [
+                    t.avatar && /* @__PURE__ */ jsx(
+                      TemplateImg,
+                      {
+                        src: t.avatar,
+                        alt: "",
+                        width: 44,
+                        height: 44,
+                        components,
+                        className: "size-11 rounded-full object-cover"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("span", { className: cn(!featured && "text-start"), children: [
+                      /* @__PURE__ */ jsx("span", { className: "block font-semibold", children: t.author }),
+                      (t.role || t.company) && /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: cn("block text-sm", mutedTextClass(tone)),
+                          children: [t.role, t.company].filter(Boolean).join(", ")
+                        }
+                      )
+                    ] })
+                  ] })
+                ]
+              }
+            ) }, `${t.author}-${t.quote.slice(0, 24)}`))
+          }
+        )
+      }
+    );
+  }
+);
+TestimonialSection.displayName = "TestimonialSection";
+var VideoSection = React.forwardRef(
+  ({ video, caption, tone = "default", align = "center", ...rest }, ref) => /* @__PURE__ */ jsx(
+    SectionShell,
+    {
+      ref,
+      "data-slot": "video-section",
+      tone,
+      align,
+      ...rest,
+      children: /* @__PURE__ */ jsxs("figure", { className: "mx-auto mt-12 max-w-5xl", children: [
+        /* @__PURE__ */ jsx("div", { className: "aspect-video overflow-hidden rounded-2xl bg-neutral-900 shadow-xl", children: "youtubeId" in video ? /* @__PURE__ */ jsx(
+          "iframe",
+          {
+            src: `https://www.youtube-nocookie.com/embed/${encodeURIComponent(video.youtubeId)}`,
+            title: video.title,
+            loading: "lazy",
+            allow: "accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",
+            allowFullScreen: true,
+            referrerPolicy: "strict-origin-when-cross-origin",
+            className: "size-full border-0"
+          }
+        ) : /* @__PURE__ */ jsx(
+          "video",
+          {
+            src: video.src,
+            poster: video.poster,
+            title: video.title,
+            "aria-label": video.title,
+            controls: true,
+            preload: "none",
+            className: "size-full object-cover",
+            children: /* @__PURE__ */ jsx(
+              "track",
+              {
+                kind: "captions",
+                src: video.captions.src,
+                srcLang: video.captions.srcLang,
+                label: video.captions.label,
+                default: true
+              }
+            )
+          }
+        ) }),
+        caption && /* @__PURE__ */ jsx(
+          "figcaption",
+          {
+            className: cn(
+              "mt-3 text-sm",
+              mutedTextClass(tone),
+              align === "center" && "text-center"
+            ),
+            children: caption
+          }
+        )
+      ] })
+    }
+  )
+);
+VideoSection.displayName = "VideoSection";
+var sections = {
+  hero: HeroSection,
+  logos: LogoCloudSection,
+  features: FeatureGridSection,
+  split: SplitContentSection,
+  process: ProcessStepsSection,
+  stats: StatsSection,
+  comparison: ComparisonSection,
+  pricing: PricingSection,
+  video: VideoSection,
+  testimonials: TestimonialSection,
+  resources: ResourceCardsSection,
+  faq: FaqSection,
+  "lead-form": LeadFormSection,
+  cta: CtaSection
+};
+var landingBlockTypes = [
+  ...Object.keys(sections),
+  "custom"
+];
+var takesIcons = /* @__PURE__ */ new Set(["features", "process"]);
+var LandingPage = React.forwardRef(
+  ({ blocks, icons, components, custom, actions, ...rest }, ref) => /* @__PURE__ */ jsx("div", { ref, "data-slot": "landing-page", ...rest, children: blocks.map((block, i) => {
+    const key = block.id ?? `${block.type}-${i}`;
+    if (block.type === "custom") {
+      const Custom = ownProperty(custom, block.component);
+      return Custom ? /* @__PURE__ */ jsx(Custom, { id: block.id, ...block.props }, key) : null;
+    }
+    const { type, ...props } = block;
+    const Section = ownProperty(
+      sections,
+      type
+    );
+    if (!Section) return null;
+    const action = block.type === "lead-form" ? ownProperty(actions, block.action) ?? safeHref(block.action) : void 0;
+    if (block.type === "lead-form" && action == null) return null;
+    const data = { ...props };
+    delete data.children;
+    delete data.dangerouslySetInnerHTML;
+    return /* @__PURE__ */ jsx(
+      Section,
+      {
+        ...data,
+        components,
+        ...takesIcons.has(type) ? { icons } : {},
+        ...block.type === "lead-form" ? { action } : {}
+      },
+      key
+    );
+  }) })
+);
+LandingPage.displayName = "LandingPage";
+
+// src/components/LandingPage/presets.ts
+var landingPresets = {
+  "vertical-hub": {
+    label: "Industry / vertical hub",
+    description: "One page per industry served: the sector problem, what the product does for it, proof, and a way in.",
+    sequence: [
+      "hero",
+      "logos",
+      "features",
+      "split",
+      "stats",
+      "process",
+      "testimonials",
+      "resources",
+      "faq",
+      "cta"
+    ],
+    required: ["hero", "features", "faq", "cta"]
+  },
+  "service-detail": {
+    label: "Service / product detail",
+    description: "One offering explained: what it is, how it works, how it compares, and how to start.",
+    sequence: [
+      "hero",
+      "features",
+      "video",
+      "process",
+      "comparison",
+      "pricing",
+      "stats",
+      "testimonials",
+      "faq",
+      "cta"
+    ],
+    required: ["hero", "features", "cta"]
+  },
+  campaign: {
+    label: "Campaign / ABM landing",
+    description: "A focused page for a campaign or named account that converts on the page itself.",
+    sequence: [
+      "hero",
+      "logos",
+      "features",
+      "stats",
+      "testimonials",
+      "lead-form",
+      "faq"
+    ],
+    required: ["hero", "lead-form"]
+  },
+  comparison: {
+    label: "Comparison",
+    description: "Your product against an alternative or the status quo, row by row.",
+    sequence: ["hero", "comparison", "features", "testimonials", "faq", "cta"],
+    required: ["hero", "comparison", "cta"]
+  },
+  resource: {
+    label: "Resource / lead magnet",
+    description: "A guide, report or tool offered in exchange for contact details.",
+    sequence: ["hero", "split", "lead-form", "resources", "faq"],
+    required: ["hero", "lead-form"]
+  },
+  pricing: {
+    label: "Pricing",
+    description: "Plans and what each includes, the proof that they are worth it, and the questions buyers ask before they pay.",
+    sequence: [
+      "hero",
+      "pricing",
+      "comparison",
+      "stats",
+      "testimonials",
+      "faq",
+      "cta"
+    ],
+    required: ["hero", "pricing", "faq"]
+  }
+};
+var headedItems = /* @__PURE__ */ new Set([
+  "features",
+  "process",
+  "pricing",
+  "resources"
+]);
+function validateLandingPage(blocks, preset) {
+  const issues = [];
+  const types = blocks.map((b) => b.type);
+  const knownTypes = new Set(landingBlockTypes);
+  blocks.forEach((b, index) => {
+    if (!knownTypes.has(b.type))
+      issues.push({
+        severity: "error",
+        index,
+        message: `Unknown block type "${b.type}": the renderer skips this block.`
+      });
+    if (b.type === "lead-form" && safeHref(b.action) == null)
+      issues.push({
+        severity: "error",
+        index,
+        message: `Unsafe lead-form action "${b.action}": the renderer skips this block.`
+      });
+  });
+  const h1Heroes = blocks.flatMap(
+    (b, i) => b.type === "hero" && (b.headingLevel ?? "h1") === "h1" ? [i] : []
+  );
+  if (h1Heroes.length > 1)
+    h1Heroes.slice(1).forEach(
+      (index) => issues.push({
+        severity: "error",
+        index,
+        message: 'A second h1 hero: a page has one h1. Set headingLevel: "h2" or remove it.'
+      })
+    );
+  if (h1Heroes.length === 0)
+    issues.push({
+      severity: "warning",
+      message: "No h1 hero. The page must render its own h1 outside the blocks."
+    });
+  const firstHero = types.indexOf("hero");
+  if (firstHero > 0)
+    issues.push({
+      severity: "warning",
+      index: firstHero,
+      message: "The hero is not the first block."
+    });
+  if (h1Heroes.length > 0 && h1Heroes[0] !== firstHero)
+    issues.push({
+      severity: "warning",
+      index: h1Heroes[0],
+      message: "The h1 hero is not the first hero: an h2 hero precedes the page h1."
+    });
+  const seen = /* @__PURE__ */ new Map();
+  blocks.forEach((b, index) => {
+    const ids = [
+      ...b.id ? [b.id] : [],
+      ...b.type === "faq" ? b.items.flatMap((item) => item.id ? [item.id] : []) : []
+    ];
+    ids.forEach((id) => {
+      if (seen.has(id))
+        issues.push({
+          severity: "error",
+          index,
+          message: `Duplicate id "${id}" (also block ${seen.get(id)}).`
+        });
+      else seen.set(id, index);
+    });
+  });
+  blocks.forEach((b, index) => {
+    if (headedItems.has(b.type) && !("title" in b && b.title))
+      issues.push({
+        severity: "warning",
+        index,
+        message: `"${b.type}" has no title, so its h3 item titles skip the h2 level.`
+      });
+    if (b.type !== "comparison") return;
+    b.rows.forEach((row, r) => {
+      if (row.values.length !== b.columns.length)
+        issues.push({
+          severity: "error",
+          index,
+          message: `Comparison row ${r} ("${row.feature}") has ${row.values.length} values for ${b.columns.length} columns.`
+        });
+    });
+    if (b.highlightColumn !== void 0 && (b.highlightColumn < 0 || b.highlightColumn >= b.columns.length))
+      issues.push({
+        severity: "warning",
+        index,
+        message: `highlightColumn ${b.highlightColumn} is outside the ${b.columns.length} comparison columns.`
+      });
+  });
+  if (!preset) return issues;
+  const spec = typeof preset === "string" ? landingPresets[preset] : preset;
+  for (const type of spec.required)
+    if (!types.includes(type))
+      issues.push({
+        severity: "error",
+        message: `Missing required "${type}" block for the ${spec.label} preset.`
+      });
+  let last = -1;
+  blocks.forEach((b, index) => {
+    const rank = spec.sequence.indexOf(b.type);
+    if (rank === -1) return;
+    if (rank < last)
+      issues.push({
+        severity: "warning",
+        index,
+        message: `"${b.type}" is out of the ${spec.label} preset's recommended order.`
+      });
+    else last = rank;
+  });
+  return issues;
+}
+
+export { ComparisonSection, CtaSection, FaqSection, FeatureGridSection, HeroSection, LandingPage, LeadFormSection, LogoCloudSection, PricingSection, ProcessStepsSection, ResourceCardsSection, SectionHeading, SectionShell, SplitContentSection, StatsSection, TemplateIcon, TestimonialSection, VideoSection, defaultLeadFormFields, landingPresets, templateIcons, validateLandingPage };
+//# sourceMappingURL=chunk-KHSFJTEX.js.map
+//# sourceMappingURL=chunk-KHSFJTEX.js.map