@mieweb/ui 0.10.0-dev.3 → 0.10.0-dev.30

package/dist/chunk-T4JYUICS.js

@@ -0,0 +1,2657 @@
+import { SectionShell, cardClass, SectionHeading, CtaLinks, mutedTextClass, toneClass, containerClass, IconTile, accentTextClass, headingTextClass, TemplateAnchor, TemplateImg, safeHref, TemplateIcon, MetricStatusBadge, ownProperty } from './chunk-FBCDYTWM.js';
+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 React5 from 'react';
+import { ChevronDown, ArrowRight, ChevronRight, CircleCheck, Check, TrendingDown, TrendingUp, Star, Info, Download, ExternalLink, X } from 'lucide-react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var cellClass = "px-3 py-3 sm:px-5 sm:py-4";
+var ComparisonSection = React5.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 = React5.forwardRef(
+  ({
+    eyebrow,
+    title,
+    description,
+    primaryCta,
+    secondaryCta,
+    note,
+    tone = "brand",
+    align = "center",
+    layout = "band",
+    components,
+    className,
+    ...rest
+  }, ref) => {
+    const titleId = React5.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 = React5.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 = React5.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 = React5.forwardRef(
+  ({
+    eyebrow,
+    title,
+    description,
+    variant = "centered",
+    tone = "default",
+    primaryCta,
+    secondaryCta,
+    ctaNote,
+    highlights,
+    meta,
+    logo,
+    image,
+    breadcrumbs,
+    headingLevel = "h1",
+    labels,
+    components,
+    className,
+    ...rest
+  }, ref) => {
+    const titleId = React5.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);
+                        })
+                      }
+                    )
+                  }
+                ),
+                logo && /* @__PURE__ */ jsx(
+                  TemplateImg,
+                  {
+                    ...logo,
+                    components,
+                    className: "mb-6 h-12 w-auto"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  SectionHeading,
+                  {
+                    as: headingLevel,
+                    size: "hero",
+                    eyebrow,
+                    title,
+                    description,
+                    align,
+                    tone,
+                    titleId
+                  }
+                ),
+                meta && meta.length > 0 && /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    "data-slot": "hero-meta",
+                    className: cn(
+                      "mt-6 flex flex-wrap gap-x-2 gap-y-1 text-sm font-medium",
+                      mutedTextClass(tone),
+                      !split && "justify-center"
+                    ),
+                    children: meta.map((item, i) => /* @__PURE__ */ jsxs(React5.Fragment, { children: [
+                      i > 0 && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xB7" }),
+                      /* @__PURE__ */ jsx("span", { children: item })
+                    ] }, item))
+                  }
+                ),
+                /* @__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 = React5.forwardRef(
+  ({
+    eyebrow,
+    title,
+    description,
+    action,
+    method = "post",
+    fields = defaultLeadFormFields,
+    hiddenFields,
+    submitLabel = "Submit",
+    note,
+    layout = "split",
+    highlights,
+    tone = "muted",
+    submitTrackingId,
+    components,
+    className,
+    ...rest
+  }, ref) => {
+    const baseId = React5.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__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx(
+                  SectionHeading,
+                  {
+                    eyebrow,
+                    title,
+                    description,
+                    align: split ? "start" : "center",
+                    tone,
+                    titleId
+                  }
+                ),
+                highlights && highlights.length > 0 && /* @__PURE__ */ jsx(
+                  "ul",
+                  {
+                    className: cn(
+                      "mt-6 space-y-2",
+                      !split && "mx-auto w-fit",
+                      mutedTextClass(tone)
+                    ),
+                    children: highlights.map((item) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2", children: [
+                      /* @__PURE__ */ jsx(
+                        CircleCheck,
+                        {
+                          "aria-hidden": "true",
+                          className: cn(
+                            "mt-0.5 size-4 shrink-0",
+                            accentTextClass(tone)
+                          )
+                        }
+                      ),
+                      item
+                    ] }, item))
+                  }
+                )
+              ] }),
+              /* @__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 = React5.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 = React5.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 = React5.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 = React5.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 = React5.forwardRef(
+  ({
+    eyebrow,
+    title,
+    description,
+    image,
+    caption,
+    bullets,
+    primaryCta,
+    secondaryCta,
+    mediaPosition = "end",
+    tone = "default",
+    components,
+    className,
+    ...rest
+  }, ref) => {
+    const titleId = React5.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 = React5.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;
+              const ruled = variant === "ruled";
+              const shown = typeof stat.value === "number" ? format.format(stat.value) : stat.value;
+              const long = `${stat.prefix ?? ""}${shown}${stat.suffix ?? ""}`.length > 6;
+              return /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "flex flex-col-reverse gap-2",
+                    align === "center" && !ruled && "items-center text-center",
+                    variant === "cards" && cn("rounded-2xl p-6", cardClass(tone)),
+                    ruled && "border-accent/70 border-s-2 ps-5"
+                  ),
+                  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 font-bold tracking-tight tabular-nums",
+                          ruled && long ? "text-2xl sm:text-3xl" : "text-4xl 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,
+                          shown,
+                          stat.suffix
+                        ]
+                      }
+                    )
+                  ]
+                },
+                stat.label
+              );
+            })
+          }
+        )
+      }
+    );
+  }
+);
+StatsSection.displayName = "StatsSection";
+var TestimonialSection = React5.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 = React5.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 BenchmarkTableSection = React5.forwardRef(
+  ({
+    columns,
+    rows,
+    rowHeader,
+    caption,
+    footnote,
+    locale,
+    tone = "default",
+    components,
+    title,
+    ...rest
+  }, ref) => {
+    const formatters = columns.map(
+      (col) => new Intl.NumberFormat(locale, col.format)
+    );
+    const maxima = columns.map(
+      (col) => col.bar ? Math.max(
+        1,
+        ...rows.map((r) => {
+          const v = r.values[col.key];
+          return typeof v === "number" ? v : 0;
+        })
+      ) : 1
+    );
+    const cellBase = "px-4 py-3 tabular-nums";
+    const stickyBg = tone === "brand" ? "bg-primary-900" : "bg-card";
+    return /* @__PURE__ */ jsxs(
+      SectionShell,
+      {
+        ref,
+        "data-slot": "benchmark-table-section",
+        tone,
+        title,
+        components,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn("mt-10 overflow-x-auto rounded-2xl", cardClass(tone)),
+              children: /* @__PURE__ */ jsxs("table", { className: "divide-border min-w-full divide-y text-sm", children: [
+                (caption ?? title) && /* @__PURE__ */ jsx("caption", { className: "sr-only", children: caption ?? title }),
+                /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+                  /* @__PURE__ */ jsx(
+                    "th",
+                    {
+                      scope: "col",
+                      className: cn(
+                        "sticky start-0 z-10 px-4 py-3 text-start font-semibold",
+                        stickyBg
+                      ),
+                      children: rowHeader
+                    }
+                  ),
+                  columns.map((col) => /* @__PURE__ */ jsx(
+                    "th",
+                    {
+                      scope: "col",
+                      className: cn(
+                        "px-4 py-3 font-semibold whitespace-nowrap",
+                        col.bar ? "text-start" : "text-end",
+                        col.emphasis && "bg-primary-500/10"
+                      ),
+                      children: col.label
+                    },
+                    col.key
+                  ))
+                ] }) }),
+                /* @__PURE__ */ jsx("tbody", { className: "divide-border divide-y", children: rows.map((row) => /* @__PURE__ */ jsxs("tr", { children: [
+                  /* @__PURE__ */ jsxs(
+                    "th",
+                    {
+                      scope: "row",
+                      className: cn(
+                        "sticky start-0 z-10 px-4 py-3 text-start font-medium",
+                        stickyBg
+                      ),
+                      children: [
+                        row.href ? /* @__PURE__ */ jsx(
+                          TemplateAnchor,
+                          {
+                            href: row.href,
+                            components,
+                            className: cn(
+                              "underline-offset-2 hover:underline",
+                              accentTextClass(tone)
+                            ),
+                            children: row.label
+                          }
+                        ) : row.label,
+                        row.sublabel && /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: cn(
+                              "block text-xs font-normal",
+                              mutedTextClass(tone)
+                            ),
+                            children: row.sublabel
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  columns.map((col, c) => {
+                    const v = row.values[col.key];
+                    const shown = v == null ? "\u2014" : typeof v === "number" ? formatters[c].format(v) : v;
+                    return /* @__PURE__ */ jsx(
+                      "td",
+                      {
+                        className: cn(
+                          cellBase,
+                          col.bar ? "text-start" : "text-end whitespace-nowrap",
+                          col.emphasis && cn(
+                            "bg-primary-500/10 font-semibold",
+                            accentTextClass(tone)
+                          )
+                        ),
+                        children: col.bar && typeof v === "number" ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-3", children: [
+                          /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              "aria-hidden": "true",
+                              className: "bg-muted h-2 w-32 max-w-full flex-none overflow-hidden rounded-full",
+                              children: /* @__PURE__ */ jsx(
+                                "span",
+                                {
+                                  className: "bg-primary-600 block h-full rounded-full",
+                                  style: {
+                                    width: `${Math.round(v / maxima[c] * 100)}%`
+                                  }
+                                }
+                              )
+                            }
+                          ),
+                          shown
+                        ] }) : shown
+                      },
+                      col.key
+                    );
+                  })
+                ] }, row.label)) })
+              ] })
+            }
+          ),
+          footnote && /* @__PURE__ */ jsx("p", { className: cn("mt-4 max-w-3xl text-sm", mutedTextClass(tone)), children: footnote })
+        ]
+      }
+    );
+  }
+);
+BenchmarkTableSection.displayName = "BenchmarkTableSection";
+var LinkGroupsSection = React5.forwardRef(({ groups, columns = 3, tone = "muted", components, ...rest }, ref) => /* @__PURE__ */ jsx(
+  SectionShell,
+  {
+    ref,
+    "data-slot": "link-groups-section",
+    tone,
+    components,
+    ...rest,
+    children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "mt-10 grid gap-6",
+          columns === 3 ? "lg:grid-cols-3" : "md:grid-cols-2"
+        ),
+        children: groups.map((group) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn("rounded-2xl p-6", cardClass(tone)),
+            children: [
+              /* @__PURE__ */ jsx("h3", { className: cn("text-lg font-semibold", headingTextClass(tone)), children: group.title }),
+              group.description && /* @__PURE__ */ jsx("p", { className: cn("mt-1 text-sm", mutedTextClass(tone)), children: group.description }),
+              /* @__PURE__ */ jsx("ul", { className: "mt-4 space-y-1", children: group.links.map((link) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+                TemplateAnchor,
+                {
+                  href: link.href,
+                  trackingId: link.trackingId,
+                  components,
+                  className: cn(
+                    "group flex items-center justify-between gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors",
+                    tone === "brand" ? "hover:bg-white/10" : "hover:bg-primary-500/10 hover:text-primary-800 dark:hover:text-primary-300"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx("span", { children: link.label }),
+                    /* @__PURE__ */ jsx(
+                      ArrowRight,
+                      {
+                        "aria-hidden": "true",
+                        className: "size-4 flex-none opacity-50 group-hover:opacity-100 rtl:-scale-x-100"
+                      }
+                    )
+                  ]
+                }
+              ) }, link.href)) })
+            ]
+          },
+          group.title
+        ))
+      }
+    )
+  }
+));
+LinkGroupsSection.displayName = "LinkGroupsSection";
+var MetricListSection = React5.forwardRef(
+  ({
+    metrics,
+    takeaway,
+    positive,
+    labels,
+    tone = "default",
+    components,
+    ...rest
+  }, ref) => {
+    const measured = metrics.some((m) => m.value);
+    return /* @__PURE__ */ jsxs(
+      SectionShell,
+      {
+        ref,
+        "data-slot": "metric-list-section",
+        "data-measured": measured || void 0,
+        tone,
+        spacing: "compact",
+        status: measured ? "live" : "maturing",
+        components,
+        ...rest,
+        children: [
+          !measured && /* @__PURE__ */ jsx("p", { className: cn("mt-3 text-xs font-medium", mutedTextClass(tone)), children: labels?.preview ?? "Roadmap preview" }),
+          takeaway && /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "mt-6 max-w-3xl rounded-xl border p-4 text-sm leading-relaxed font-medium",
+                tone === "brand" ? "border-white/20 bg-white/5" : "border-success/30 bg-success/10 text-foreground"
+              ),
+              children: takeaway
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "ul",
+            {
+              className: cn(
+                "mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3",
+                !measured && "border-border rounded-3xl border border-dashed p-4"
+              ),
+              children: metrics.map((metric) => /* @__PURE__ */ jsxs(
+                "li",
+                {
+                  className: cn(
+                    "rounded-xl p-5",
+                    cardClass(tone),
+                    positive && metric.value && "border-s-success border-s-4"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+                      /* @__PURE__ */ jsx(
+                        "h3",
+                        {
+                          className: cn(
+                            "min-w-0 text-sm font-semibold",
+                            headingTextClass(tone)
+                          ),
+                          children: metric.label
+                        }
+                      ),
+                      metric.unit && /* @__PURE__ */ jsx("span", { className: "bg-primary-500/10 flex-none rounded-full px-2 py-0.5 text-xs font-medium", children: metric.unit })
+                    ] }),
+                    metric.value && /* @__PURE__ */ jsx(
+                      "p",
+                      {
+                        className: cn(
+                          "mt-3 text-3xl font-bold tracking-tight tabular-nums",
+                          headingTextClass(tone)
+                        ),
+                        children: metric.value
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "p",
+                      {
+                        className: cn(
+                          "mt-2 text-sm leading-relaxed",
+                          mutedTextClass(tone)
+                        ),
+                        children: metric.description
+                      }
+                    )
+                  ]
+                },
+                metric.label
+              ))
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+MetricListSection.displayName = "MetricListSection";
+var PdfEmbedSection = React5.forwardRef(
+  ({
+    title,
+    src,
+    downloadAs,
+    aspectRatio = 0.5625,
+    notice,
+    labels,
+    tone = "muted",
+    align = "center",
+    components,
+    ...rest
+  }, ref) => {
+    const pdfSrc = safeHref(src);
+    const viewerSrc = pdfSrc && (pdfSrc.includes("#") ? pdfSrc : `${pdfSrc}#view=FitH`);
+    const onBrand = tone === "brand";
+    return /* @__PURE__ */ jsxs(
+      SectionShell,
+      {
+        ref,
+        "data-slot": "pdf-embed-section",
+        title,
+        tone,
+        align,
+        components,
+        ...rest,
+        children: [
+          notice && /* @__PURE__ */ jsxs("p", { className: "border-primary-500/30 bg-primary-500/10 mx-auto mt-8 flex max-w-3xl items-start gap-3 rounded-xl border px-4 py-3 text-start text-sm", children: [
+            /* @__PURE__ */ jsx(Info, { "aria-hidden": "true", className: "mt-0.5 size-5 flex-none" }),
+            notice
+          ] }),
+          pdfSrc && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "border-border bg-card relative mt-10 overflow-hidden rounded-2xl border shadow-lg",
+                style: { paddingTop: `${(aspectRatio * 100).toFixed(4)}%` },
+                children: /* @__PURE__ */ jsx(
+                  "object",
+                  {
+                    data: viewerSrc,
+                    type: "application/pdf",
+                    "aria-label": title,
+                    className: "absolute inset-0 size-full",
+                    children: /* @__PURE__ */ jsx(
+                      "p",
+                      {
+                        className: cn(
+                          "flex size-full items-center justify-center p-6 text-center text-sm",
+                          mutedTextClass("default")
+                        ),
+                        children: /* @__PURE__ */ jsx("a", { href: pdfSrc, className: "underline underline-offset-2", children: labels?.fallback ?? "Open the PDF" })
+                      }
+                    )
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "mt-6 flex flex-wrap gap-3",
+                  align === "center" && "justify-center"
+                ),
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    "a",
+                    {
+                      href: pdfSrc,
+                      download: downloadAs ?? true,
+                      className: cn(
+                        buttonVariants({ variant: "primary" }),
+                        onBrand && "text-primary-900 hover:bg-primary-50 bg-white"
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsx(Download, { "aria-hidden": "true", className: "size-4" }),
+                        labels?.download ?? "Download PDF"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "a",
+                    {
+                      href: pdfSrc,
+                      target: "_blank",
+                      rel: "noopener noreferrer",
+                      className: cn(
+                        buttonVariants({ variant: "outline" }),
+                        onBrand && "border-white/70 text-white hover:bg-white/10"
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsx(ExternalLink, { "aria-hidden": "true", className: "size-4" }),
+                        labels?.open ?? "Open in new tab"
+                      ]
+                    }
+                  )
+                ]
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+PdfEmbedSection.displayName = "PdfEmbedSection";
+var barClass = {
+  primary: "bg-primary-600",
+  accent: "bg-accent",
+  success: "bg-success"
+};
+var RankedListSection = React5.forwardRef(
+  ({
+    lists,
+    numbered,
+    layout = "stacked",
+    bar = "primary",
+    locale,
+    tone = "default",
+    components,
+    ...rest
+  }, ref) => {
+    const format = new Intl.NumberFormat(locale);
+    return /* @__PURE__ */ jsx(
+      SectionShell,
+      {
+        ref,
+        "data-slot": "ranked-list-section",
+        tone,
+        components,
+        ...rest,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "mt-10 grid gap-6",
+              lists.length > 1 && "lg:grid-cols-2"
+            ),
+            children: lists.map((list, l) => {
+              const max = Math.max(1, ...list.items.map((i) => i.value));
+              return /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    layout === "inline" && cn("rounded-2xl p-6", cardClass(tone))
+                  ),
+                  children: [
+                    list.title && /* @__PURE__ */ jsx(
+                      "h3",
+                      {
+                        className: cn(
+                          "mb-4 text-lg font-semibold",
+                          headingTextClass(tone)
+                        ),
+                        children: list.title
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("ol", { className: "space-y-3", children: list.items.map((item, i) => {
+                      const label = item.href ? /* @__PURE__ */ jsx(
+                        TemplateAnchor,
+                        {
+                          href: item.href,
+                          components,
+                          className: cn(
+                            "font-medium underline-offset-2 hover:underline",
+                            accentTextClass(tone)
+                          ),
+                          children: item.label
+                        }
+                      ) : /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: cn("font-medium", headingTextClass(tone)),
+                          children: item.label
+                        }
+                      );
+                      const track = /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          "aria-hidden": "true",
+                          className: cn(
+                            "block h-2 overflow-hidden rounded-full",
+                            tone === "brand" ? "bg-white/10" : "bg-muted"
+                          ),
+                          children: /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              className: cn(
+                                "block h-full rounded-full",
+                                barClass[bar]
+                              ),
+                              style: {
+                                width: `${Math.round(item.value / max * 100)}%`
+                              }
+                            }
+                          )
+                        }
+                      );
+                      const rank = numbered && /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: cn(
+                            "text-sm font-semibold tabular-nums",
+                            mutedTextClass(tone)
+                          ),
+                          children: String(i + 1).padStart(2, "0")
+                        }
+                      );
+                      const value = item.display ?? format.format(item.value);
+                      return layout === "inline" ? /* @__PURE__ */ jsxs(
+                        "li",
+                        {
+                          className: "flex items-center gap-3 text-sm",
+                          children: [
+                            rank,
+                            /* @__PURE__ */ jsx("span", { className: "w-28 flex-none truncate sm:w-36", children: label }),
+                            /* @__PURE__ */ jsx("span", { className: "flex-1", children: track }),
+                            /* @__PURE__ */ jsx("span", { className: "w-20 flex-none text-end font-semibold tabular-nums", children: value })
+                          ]
+                        },
+                        item.label
+                      ) : /* @__PURE__ */ jsxs(
+                        "li",
+                        {
+                          className: cn("rounded-xl p-4", cardClass(tone)),
+                          children: [
+                            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
+                              /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-3", children: [
+                                rank,
+                                label
+                              ] }),
+                              /* @__PURE__ */ jsxs("span", { className: cn("text-xs", mutedTextClass(tone)), children: [
+                                item.note ?? value,
+                                item.note && /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+                                  ": ",
+                                  value
+                                ] })
+                              ] })
+                            ] }),
+                            /* @__PURE__ */ jsx("span", { className: "mt-2 block", children: track })
+                          ]
+                        },
+                        item.label
+                      );
+                    }) })
+                  ]
+                },
+                list.title ?? l
+              );
+            })
+          }
+        )
+      }
+    );
+  }
+);
+RankedListSection.displayName = "RankedListSection";
+var ReportByline = React5.forwardRef(
+  ({
+    authors,
+    published,
+    updated,
+    labels,
+    tone = "default",
+    components,
+    className,
+    ...rest
+  }, ref) => {
+    const headingId = React5.useId();
+    return /* @__PURE__ */ jsx(
+      "section",
+      {
+        ref,
+        "data-slot": "report-byline",
+        "data-tone": tone,
+        "aria-labelledby": headingId,
+        className: cn(
+          "border-border border-t py-8",
+          toneClass(tone),
+          className
+        ),
+        ...rest,
+        children: /* @__PURE__ */ jsxs("div", { className: containerClass(), children: [
+          /* @__PURE__ */ jsx("h2", { id: headingId, className: "sr-only", children: labels?.heading ?? "About the author" }),
+          /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-6", children: authors.map((author) => /* @__PURE__ */ jsxs(
+            "li",
+            {
+              className: "flex flex-wrap items-center gap-4",
+              children: [
+                author.avatar && /* @__PURE__ */ jsx(
+                  TemplateImg,
+                  {
+                    ...author.avatar,
+                    width: author.avatar.width ?? 48,
+                    height: author.avatar.height ?? 48,
+                    components,
+                    className: "ring-border size-12 flex-none rounded-full object-cover ring-1"
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                  /* @__PURE__ */ jsxs("p", { className: cn("text-sm", mutedTextClass(tone)), children: [
+                    labels?.by ?? "By",
+                    " ",
+                    author.href ? /* @__PURE__ */ jsx(
+                      TemplateAnchor,
+                      {
+                        href: author.href,
+                        components,
+                        className: cn(
+                          "font-semibold underline-offset-2 hover:underline",
+                          headingTextClass(tone)
+                        ),
+                        children: author.name
+                      }
+                    ) : /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: cn("font-semibold", headingTextClass(tone)),
+                        children: author.name
+                      }
+                    ),
+                    author.role && /* @__PURE__ */ jsxs("span", { children: [
+                      " \xB7 ",
+                      author.role
+                    ] })
+                  ] }),
+                  (published || updated) && /* @__PURE__ */ jsxs("p", { className: cn("text-sm", mutedTextClass(tone)), children: [
+                    published && `${labels?.published ?? "Published"} ${published}`,
+                    published && updated && " \xB7 ",
+                    updated && `${labels?.updated ?? "Updated"} ${updated}`
+                  ] })
+                ] }),
+                author.profiles && author.profiles.length > 0 && /* @__PURE__ */ jsx("div", { className: "ms-auto flex flex-wrap gap-2", children: author.profiles.map((profile) => {
+                  const href = safeHref(profile.href);
+                  if (!href) return null;
+                  return /* @__PURE__ */ jsxs(
+                    "a",
+                    {
+                      href,
+                      target: "_blank",
+                      rel: "noopener noreferrer",
+                      "data-track": profile.trackingId,
+                      className: "border-border hover:border-primary-600 hover:text-primary-800 dark:hover:text-primary-300 inline-flex items-center rounded-full border px-3 py-1.5 text-sm font-medium",
+                      children: [
+                        /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+                          author.name,
+                          " on "
+                        ] }),
+                        profile.label
+                      ]
+                    },
+                    profile.href
+                  );
+                }) })
+              ]
+            },
+            author.name
+          )) })
+        ] })
+      }
+    );
+  }
+);
+ReportByline.displayName = "ReportByline";
+var ReportLegend = React5.forwardRef(
+  ({
+    entries,
+    title = "How to read the data",
+    tone = "muted",
+    components,
+    ...rest
+  }, ref) => /* @__PURE__ */ jsx(
+    SectionShell,
+    {
+      ref,
+      "data-slot": "report-legend",
+      title,
+      tone,
+      spacing: "compact",
+      components,
+      ...rest,
+      children: /* @__PURE__ */ jsx("dl", { className: "mt-6 grid gap-3 sm:grid-cols-2 lg:grid-cols-3", children: entries.map((entry) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "flex flex-col gap-2 rounded-xl p-4",
+            cardClass(tone)
+          ),
+          children: [
+            /* @__PURE__ */ jsx("dt", { children: /* @__PURE__ */ jsx(
+              MetricStatusBadge,
+              {
+                status: entry.status,
+                label: entry.label,
+                onDark: tone === "brand"
+              }
+            ) }),
+            /* @__PURE__ */ jsx("dd", { className: cn("text-sm leading-snug", mutedTextClass(tone)), children: entry.description })
+          ]
+        },
+        entry.status
+      )) })
+    }
+  )
+);
+ReportLegend.displayName = "ReportLegend";
+var ReportMethodology = React5.forwardRef(
+  ({
+    sources,
+    citation,
+    notes,
+    resources,
+    labels,
+    tone = "muted",
+    components,
+    ...rest
+  }, ref) => {
+    const card = cn("rounded-2xl p-6", cardClass(tone));
+    const subheading = cn(
+      "text-sm font-semibold tracking-wide uppercase",
+      mutedTextClass(tone)
+    );
+    return /* @__PURE__ */ jsxs(
+      SectionShell,
+      {
+        ref,
+        "data-slot": "report-methodology",
+        tone,
+        components,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx("dl", { className: "mt-10 grid gap-6 sm:grid-cols-2", children: sources.map((source) => /* @__PURE__ */ jsxs("div", { className: card, children: [
+            /* @__PURE__ */ jsx("dt", { className: cn("font-semibold", headingTextClass(tone)), children: source.label }),
+            /* @__PURE__ */ jsxs("dd", { className: cn("mt-2 text-sm", mutedTextClass(tone)), children: [
+              source.description,
+              safeHref(source.href) && /* @__PURE__ */ jsxs(Fragment, { children: [
+                " ",
+                /* @__PURE__ */ jsxs(
+                  "a",
+                  {
+                    href: safeHref(source.href),
+                    rel: "noopener noreferrer",
+                    className: cn(
+                      "font-medium underline underline-offset-2",
+                      accentTextClass(tone)
+                    ),
+                    children: [
+                      labels?.sourceLink ?? "Source",
+                      /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+                        ": ",
+                        source.label
+                      ] })
+                    ]
+                  }
+                )
+              ] })
+            ] })
+          ] }, source.label)) }),
+          citation && /* @__PURE__ */ jsxs("div", { className: cn(card, "mt-10 border-dashed"), children: [
+            /* @__PURE__ */ jsx("h3", { className: subheading, children: labels?.citation ?? "How to cite this report" }),
+            /* @__PURE__ */ jsx("p", { className: "mt-3 font-mono text-sm break-words select-all", children: citation })
+          ] }),
+          notes?.map((note) => /* @__PURE__ */ jsxs("div", { className: cn(card, "mt-6"), children: [
+            /* @__PURE__ */ jsx("h3", { className: subheading, children: note.title }),
+            /* @__PURE__ */ jsx("p", { className: cn("mt-3 max-w-3xl text-sm", mutedTextClass(tone)), children: note.body })
+          ] }, note.title)),
+          resources && /* @__PURE__ */ jsxs("div", { className: cn(card, "mt-6"), children: [
+            /* @__PURE__ */ jsx("h3", { className: subheading, children: resources.title }),
+            resources.description && /* @__PURE__ */ jsx("p", { className: cn("mt-3 max-w-3xl text-sm", mutedTextClass(tone)), children: resources.description }),
+            /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-wrap gap-3", children: resources.links.map((link) => /* @__PURE__ */ jsx(
+              TemplateAnchor,
+              {
+                href: link.href,
+                trackingId: link.trackingId,
+                components,
+                className: cn(
+                  "border-border hover:border-primary-600 inline-flex items-center rounded-full border px-4 py-2 text-sm font-medium",
+                  accentTextClass(tone)
+                ),
+                children: link.label
+              },
+              link.href
+            )) })
+          ] })
+        ]
+      }
+    );
+  }
+);
+ReportMethodology.displayName = "ReportMethodology";
+
+// src/components/TileCartogramSection/tiles.ts
+var grid = [
+  ["AK", "Alaska", 0, 0],
+  ["ME", "Maine", 0, 10],
+  ["VT", "Vermont", 1, 9],
+  ["NH", "New Hampshire", 1, 10],
+  ["WA", "Washington", 2, 0],
+  ["ID", "Idaho", 2, 1],
+  ["MT", "Montana", 2, 2],
+  ["ND", "North Dakota", 2, 3],
+  ["MN", "Minnesota", 2, 4],
+  ["IL", "Illinois", 2, 5],
+  ["WI", "Wisconsin", 2, 6],
+  ["MI", "Michigan", 2, 8],
+  ["NY", "New York", 2, 9],
+  ["MA", "Massachusetts", 2, 10],
+  ["OR", "Oregon", 3, 0],
+  ["NV", "Nevada", 3, 1],
+  ["WY", "Wyoming", 3, 2],
+  ["SD", "South Dakota", 3, 3],
+  ["IA", "Iowa", 3, 4],
+  ["IN", "Indiana", 3, 5],
+  ["OH", "Ohio", 3, 6],
+  ["PA", "Pennsylvania", 3, 7],
+  ["NJ", "New Jersey", 3, 8],
+  ["CT", "Connecticut", 3, 9],
+  ["RI", "Rhode Island", 3, 10],
+  ["CA", "California", 4, 0],
+  ["UT", "Utah", 4, 1],
+  ["CO", "Colorado", 4, 2],
+  ["NE", "Nebraska", 4, 3],
+  ["MO", "Missouri", 4, 4],
+  ["KY", "Kentucky", 4, 5],
+  ["WV", "West Virginia", 4, 6],
+  ["VA", "Virginia", 4, 7],
+  ["MD", "Maryland", 4, 8],
+  ["DE", "Delaware", 4, 9],
+  ["AZ", "Arizona", 5, 1],
+  ["NM", "New Mexico", 5, 2],
+  ["KS", "Kansas", 5, 3],
+  ["AR", "Arkansas", 5, 4],
+  ["TN", "Tennessee", 5, 5],
+  ["NC", "North Carolina", 5, 6],
+  ["SC", "South Carolina", 5, 7],
+  ["DC", "District of Columbia", 5, 8],
+  ["OK", "Oklahoma", 6, 3],
+  ["LA", "Louisiana", 6, 4],
+  ["MS", "Mississippi", 6, 5],
+  ["AL", "Alabama", 6, 6],
+  ["GA", "Georgia", 6, 7],
+  ["HI", "Hawaii", 7, 0],
+  ["TX", "Texas", 7, 3],
+  ["FL", "Florida", 7, 7]
+];
+var usStateTiles = grid.map(
+  ([code, name, row, col]) => ({ code, name, row, col })
+);
+function quartileBuckets(values) {
+  const sorted = Object.values(values).filter((v) => typeof v === "number").sort((a, b) => a - b);
+  const q = (p) => sorted[Math.floor((sorted.length - 1) * p)];
+  const out = {};
+  for (const [code, v] of Object.entries(values)) {
+    out[code] = typeof v !== "number" || sorted.length === 0 ? 0 : v <= q(0.25) ? 1 : v <= q(0.5) ? 2 : v <= q(0.75) ? 3 : 4;
+  }
+  return out;
+}
+var bucketClass = {
+  0: "bg-muted text-muted-foreground",
+  1: "bg-primary-600/20 text-foreground",
+  2: "bg-primary-600/40 text-foreground",
+  3: "bg-primary-800 text-white",
+  4: "bg-primary-950 text-white"
+};
+var TileCartogramSection = React5.forwardRef(
+  ({
+    values,
+    legend,
+    layout = usStateTiles,
+    mapTitle,
+    mapDescription,
+    tone = "default",
+    components,
+    ...rest
+  }, ref) => {
+    const columns = Math.max(...layout.map((t) => t.col)) + 1;
+    return /* @__PURE__ */ jsx(
+      SectionShell,
+      {
+        ref,
+        "data-slot": "tile-cartogram-section",
+        tone,
+        components,
+        ...rest,
+        children: /* @__PURE__ */ jsxs("div", { className: cn("mt-10 rounded-2xl p-6", cardClass(tone)), children: [
+          mapTitle && /* @__PURE__ */ jsx("h3", { className: cn("text-lg font-semibold", headingTextClass(tone)), children: mapTitle }),
+          mapDescription && /* @__PURE__ */ jsx("p", { className: cn("mt-1 text-sm", mutedTextClass(tone)), children: mapDescription }),
+          /* @__PURE__ */ jsx(
+            "ul",
+            {
+              className: "mx-auto mt-6 grid w-full max-w-xl gap-1",
+              style: {
+                gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`
+              },
+              children: layout.map((tile) => {
+                const value = values[tile.code];
+                const bucket = value?.bucket ?? 0;
+                return /* @__PURE__ */ jsxs(
+                  "li",
+                  {
+                    title: value?.detail ? `${tile.name}: ${value.detail}` : tile.name,
+                    style: {
+                      gridColumnStart: tile.col + 1,
+                      gridRowStart: tile.row + 1
+                    },
+                    className: cn(
+                      "flex aspect-square items-center justify-center rounded-md text-[9px] font-semibold sm:text-[11px]",
+                      bucketClass[bucket]
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: tile.code }),
+                      /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+                        tile.name,
+                        value?.detail ? `: ${value.detail}` : ""
+                      ] })
+                    ]
+                  },
+                  tile.code
+                );
+              })
+            }
+          ),
+          /* @__PURE__ */ jsx("ul", { className: "mt-6 flex flex-wrap items-center justify-center gap-x-4 gap-y-2 text-xs", children: legend.map((entry) => /* @__PURE__ */ jsxs(
+            "li",
+            {
+              className: "inline-flex items-center gap-1.5",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    className: cn(
+                      "ring-border size-3 rounded ring-1",
+                      bucketClass[entry.bucket]
+                    )
+                  }
+                ),
+                entry.label
+              ]
+            },
+            entry.bucket
+          )) })
+        ] })
+      }
+    );
+  }
+);
+TileCartogramSection.displayName = "TileCartogramSection";
+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,
+  "report-legend": ReportLegend,
+  "benchmark-table": BenchmarkTableSection,
+  "ranked-list": RankedListSection,
+  "tile-cartogram": TileCartogramSection,
+  "metric-list": MetricListSection,
+  methodology: ReportMethodology,
+  byline: ReportByline,
+  "link-groups": LinkGroupsSection,
+  "pdf-embed": PdfEmbedSection
+};
+var landingBlockTypes = [
+  ...Object.keys(sections),
+  "custom"
+];
+var takesIcons = /* @__PURE__ */ new Set(["features", "process"]);
+var LandingPage = React5.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"]
+  },
+  "benchmark-report": {
+    label: "Benchmark report",
+    description: "A published data report: headline findings, the figures with their provenance, how they were built, and who wrote it.",
+    sequence: [
+      "hero",
+      "stats",
+      "report-legend",
+      "features",
+      "benchmark-table",
+      "tile-cartogram",
+      "ranked-list",
+      "metric-list",
+      "methodology",
+      "byline",
+      "link-groups",
+      "pdf-embed",
+      "lead-form",
+      "cta"
+    ],
+    required: ["hero", "methodology"]
+  }
+};
+var headedItems = /* @__PURE__ */ new Set([
+  "features",
+  "process",
+  "pricing",
+  "resources",
+  "metric-list",
+  "link-groups"
+]);
+var rendersH3 = (b) => headedItems.has(b.type) || b.type === "ranked-list" && b.lists.some((l) => l.title) || b.type === "tile-cartogram" && !!b.mapTitle || b.type === "methodology" && !!(b.citation || b.notes?.length || b.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 (rendersH3(b) && !("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 === "benchmark-table") {
+      const keys = new Set(b.columns.map((c) => c.key));
+      b.rows.forEach((row) => {
+        const unknown = Object.keys(row.values).filter((k) => !keys.has(k));
+        if (unknown.length)
+          issues.push({
+            severity: "warning",
+            index,
+            message: `Benchmark row "${row.label}" has values for unknown columns: ${unknown.join(", ")}.`
+          });
+      });
+    }
+    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;
+  const placed = /* @__PURE__ */ new Set();
+  blocks.forEach((b, index) => {
+    const rank = spec.sequence.indexOf(b.type);
+    if (rank === -1 || placed.has(b.type)) return;
+    placed.add(b.type);
+    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 { BenchmarkTableSection, ComparisonSection, CtaSection, FaqSection, FeatureGridSection, HeroSection, LandingPage, LeadFormSection, LinkGroupsSection, LogoCloudSection, MetricListSection, PdfEmbedSection, PricingSection, ProcessStepsSection, RankedListSection, ReportByline, ReportLegend, ReportMethodology, ResourceCardsSection, SplitContentSection, StatsSection, TestimonialSection, TileCartogramSection, VideoSection, defaultLeadFormFields, landingPresets, quartileBuckets, usStateTiles, validateLandingPage };
+//# sourceMappingURL=chunk-T4JYUICS.js.map
+//# sourceMappingURL=chunk-T4JYUICS.js.map