@thorprovider/blocks 1.0.0 → 3.0.0

package/dist/blocks/marketing/footers/footer-section.mjs

@@ -0,0 +1,332 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import { ArrowRight } from "lucide-react";
+import { cn } from "../../../lib/utils.mjs";
+import { Button } from "../../../ui/button.mjs";
+import { Input } from "../../../ui/input.mjs";
+const footerPresentations = [
+  "brand-columns",
+  "newsletter-grid",
+  "contact"
+];
+function DefaultFooterMark() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      className: "size-8 shrink-0 text-primary",
+      viewBox: "0 0 32 32",
+      fill: "none",
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M4 5h6v18h17M7 11h18l-4 8H7V11Z",
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: "2"
+          }
+        ),
+        /* @__PURE__ */ jsx("circle", { cx: "11", cy: "27", r: "1.5", fill: "currentColor" }),
+        /* @__PURE__ */ jsx("circle", { cx: "23", cy: "27", r: "1.5", fill: "currentColor" })
+      ]
+    }
+  );
+}
+function FooterBrand({
+  brandName,
+  brandAccent,
+  brandDescription,
+  logo
+}) {
+  const accent = brandAccent?.text ?? "";
+  const hasTrailingAccent = Boolean(accent && brandName.endsWith(accent));
+  const brandPrefix = hasTrailingAccent ? brandName.slice(0, brandName.length - accent.length) : brandName;
+  return /* @__PURE__ */ jsxs("div", { className: "flex max-w-sm flex-col gap-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      logo ?? /* @__PURE__ */ jsx(DefaultFooterMark, {}),
+      /* @__PURE__ */ jsxs("h2", { className: "text-2xl font-bold text-balance", children: [
+        brandPrefix,
+        hasTrailingAccent ? /* @__PURE__ */ jsx("span", { className: cn("text-primary", brandAccent?.className), children: accent }) : null
+      ] })
+    ] }),
+    brandDescription ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm leading-relaxed text-balance", children: brandDescription }) : null
+  ] });
+}
+function FooterContactDetails({ contact }) {
+  if (!contact) return null;
+  const items = [contact.address, contact.phone, contact.email].filter(
+    (item) => Boolean(item)
+  );
+  if (items.length === 0 && !contact.heading) return null;
+  return /* @__PURE__ */ jsxs("address", { className: "not-italic", children: [
+    contact.heading ? /* @__PURE__ */ jsx("h3", { className: "mb-4 text-base font-semibold text-balance", children: contact.heading }) : null,
+    /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-3", children: items.map((item) => /* @__PURE__ */ jsx("li", { children: item.href ? /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: item.href,
+        className: "text-muted-foreground hover:text-foreground text-sm transition-colors",
+        children: item.label
+      }
+    ) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: item.label }) }, JSON.stringify([item.label, item.href ?? null]))) })
+  ] });
+}
+function assertUniqueKeys(items, getTuple, listName) {
+  const keys = /* @__PURE__ */ new Set();
+  for (const item of items) {
+    const key = JSON.stringify(getTuple(item));
+    if (typeof key !== "string") {
+      throw new Error(`FooterSection could not derive a ${listName} key.`);
+    }
+    if (keys.has(key)) {
+      throw new Error(`FooterSection ${listName} keys must be unique.`);
+    }
+    keys.add(key);
+  }
+}
+function FooterNewsletterForm({
+  newsletter,
+  onSubmit
+}) {
+  const [email, setEmail] = useState("");
+  const inputId = useId();
+  function handleSubmit(event) {
+    event.preventDefault();
+    if (!onSubmit) return;
+    onSubmit(email);
+  }
+  return /* @__PURE__ */ jsxs("section", { "aria-label": newsletter.title ?? "Newsletter", className: "w-full", children: [
+    newsletter.title ? /* @__PURE__ */ jsx("h3", { className: "mb-4 text-base font-semibold text-balance", children: newsletter.title }) : null,
+    /* @__PURE__ */ jsxs("form", { className: "flex w-full max-w-xl gap-2", onSubmit: handleSubmit, children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "sr-only", children: newsletter.placeholder ?? newsletter.title ?? newsletter.buttonLabel }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          id: inputId,
+          type: "email",
+          autoComplete: "email",
+          placeholder: newsletter.placeholder,
+          value: email,
+          onChange: (event) => setEmail(event.currentTarget.value),
+          disabled: !onSubmit
+        }
+      ),
+      /* @__PURE__ */ jsxs(Button, { type: "submit", disabled: !onSubmit, children: [
+        newsletter.buttonLabel,
+        /* @__PURE__ */ jsx(ArrowRight, { "aria-hidden": "true" })
+      ] })
+    ] })
+  ] });
+}
+function FooterSocialLinks({
+  socialLinks,
+  socialIcons,
+  onSocialClick,
+  socialLinkBehavior
+}) {
+  if (!socialLinks || socialLinks.length === 0) return null;
+  return /* @__PURE__ */ jsx("nav", { "aria-label": "Social media", children: /* @__PURE__ */ jsx("ul", { className: "flex flex-wrap items-center gap-3", children: socialLinks.map((social) => {
+    const Icon = socialIcons?.[social.icon];
+    const content = Icon ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", className: "size-5" }),
+      /* @__PURE__ */ jsx("span", { className: "sr-only", children: social.label })
+    ] }) : social.label;
+    return /* @__PURE__ */ jsx("li", { children: social.href && (socialLinkBehavior === "native" || onSocialClick) ? /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: social.href,
+        "aria-label": social.ariaLabel ?? social.label,
+        onClick: (event) => {
+          if (socialLinkBehavior === "host") {
+            event.preventDefault();
+          }
+          onSocialClick?.(social.label);
+        },
+        className: "inline-flex min-h-10 min-w-10 items-center justify-center rounded-full bg-accent p-2 text-muted-foreground transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-hidden",
+        children: content
+      }
+    ) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: content }) }, JSON.stringify([social.label, social.href ?? null, social.icon]));
+  }) }) });
+}
+function FooterLegalLinks({
+  links,
+  onLinkClick,
+  linkBehavior
+}) {
+  if (!links || links.length === 0) return null;
+  return /* @__PURE__ */ jsx("nav", { "aria-label": "Legal information", children: /* @__PURE__ */ jsx("ul", { className: "flex flex-wrap gap-x-5 gap-y-2", children: links.map((link) => /* @__PURE__ */ jsx("li", { children: link.href && (linkBehavior === "native" || onLinkClick) ? /* @__PURE__ */ jsx(
+    "a",
+    {
+      href: link.href,
+      onClick: (event) => {
+        if (linkBehavior === "host") {
+          event.preventDefault();
+        }
+        onLinkClick?.(link);
+      },
+      className: "text-muted-foreground hover:text-foreground text-sm transition-colors",
+      children: link.label
+    }
+  ) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: link.label }) }, JSON.stringify([link.label, link.href ?? null]))) }) });
+}
+function FooterLinkColumns({
+  columns,
+  onLinkClick,
+  linkBehavior,
+  className
+}) {
+  if (columns.length === 0) return null;
+  return /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-1 gap-8 sm:grid-cols-2", className), children: columns.map((column) => /* @__PURE__ */ jsxs("nav", { "aria-label": column.title, children: [
+    /* @__PURE__ */ jsx("h3", { className: "mb-4 text-base font-semibold text-balance", children: column.title }),
+    /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-3", children: column.links.map((link) => /* @__PURE__ */ jsx("li", { children: link.href && (linkBehavior === "native" || onLinkClick) ? /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: link.href,
+        onClick: (event) => {
+          if (linkBehavior === "host") {
+            event.preventDefault();
+          }
+          onLinkClick?.(link);
+        },
+        className: "text-muted-foreground hover:text-foreground focus-visible:ring-ring rounded-sm text-sm transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden",
+        children: link.label
+      }
+    ) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: link.label }) }, JSON.stringify([link.label, link.href ?? null]))) })
+  ] }, JSON.stringify([column.title]))) });
+}
+function FooterSection({
+  presentation,
+  brandName,
+  brandAccent,
+  brandDescription,
+  linkColumns,
+  newsletter,
+  contact,
+  legalLinks,
+  socialLinks,
+  socialIcons,
+  copyright,
+  logo,
+  className,
+  onNewsletterSubmit,
+  onLinkClick,
+  onSocialClick,
+  linkBehavior = "host",
+  socialLinkBehavior = "host"
+}) {
+  if (!footerPresentations.includes(presentation)) {
+    throw new Error(
+      `FooterSection requires a supported presentation; received ${String(presentation)}.`
+    );
+  }
+  assertUniqueKeys(linkColumns, (column) => [column.title], "column");
+  for (const column of linkColumns) {
+    assertUniqueKeys(
+      column.links,
+      (link) => [link.label, link.href ?? null],
+      "link"
+    );
+  }
+  assertUniqueKeys(
+    legalLinks ?? [],
+    (link) => [link.label, link.href ?? null],
+    "legal link"
+  );
+  assertUniqueKeys(
+    socialLinks ?? [],
+    (social) => [social.label, social.href ?? null, social.icon],
+    "social"
+  );
+  const brand = /* @__PURE__ */ jsx(
+    FooterBrand,
+    {
+      brandName,
+      brandAccent,
+      brandDescription,
+      logo
+    }
+  );
+  const columns = /* @__PURE__ */ jsx(
+    FooterLinkColumns,
+    {
+      columns: linkColumns,
+      onLinkClick,
+      linkBehavior
+    }
+  );
+  const contactDetails = /* @__PURE__ */ jsx(FooterContactDetails, { contact });
+  const newsletterForm = newsletter ? /* @__PURE__ */ jsx(
+    FooterNewsletterForm,
+    {
+      newsletter,
+      onSubmit: onNewsletterSubmit
+    }
+  ) : null;
+  const legal = /* @__PURE__ */ jsx(
+    FooterLegalLinks,
+    {
+      links: legalLinks,
+      onLinkClick,
+      linkBehavior
+    }
+  );
+  const socials = /* @__PURE__ */ jsx(
+    FooterSocialLinks,
+    {
+      socialLinks,
+      socialIcons,
+      onSocialClick,
+      socialLinkBehavior
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    "footer",
+    {
+      role: "contentinfo",
+      "aria-label": `${brandName} footer`,
+      className: cn(
+        "w-full border-t border-border bg-background text-foreground",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 sm:py-16 lg:px-8", children: [
+        presentation === "brand-columns" ? /* @__PURE__ */ jsxs("div", { className: "grid gap-12 md:grid-cols-[minmax(0,1fr)_2fr]", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-8", children: [
+            brand,
+            newsletterForm,
+            contactDetails
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-8", children: [
+            columns,
+            legal
+          ] })
+        ] }) : null,
+        presentation === "newsletter-grid" ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-12", children: [
+          /* @__PURE__ */ jsxs("div", { className: "grid gap-8 border-b border-border pb-10 md:grid-cols-[minmax(0,1fr)_2fr] md:items-end", children: [
+            brand,
+            contactDetails
+          ] }),
+          newsletterForm,
+          columns,
+          legal
+        ] }) : null,
+        presentation === "contact" ? /* @__PURE__ */ jsxs("div", { className: "grid gap-10 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_2fr]", children: [
+          brand,
+          contactDetails,
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-8", children: [
+            newsletterForm,
+            columns,
+            legal
+          ] })
+        ] }) : null,
+        socials ? /* @__PURE__ */ jsx("div", { className: "mt-10", children: socials }) : null,
+        copyright ? /* @__PURE__ */ jsx("div", { className: "mt-10 border-t border-border pt-6", children: /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: copyright }) }) : null
+      ] })
+    }
+  );
+}
+export {
+  FooterSection
+};
+//# sourceMappingURL=footer-section.mjs.map

package/dist/blocks/marketing/footers/footer-section.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/marketing/footers/footer-section.tsx"],"sourcesContent":["'use client'\n\nimport { useId, useState, type FormEvent, type ReactNode } from 'react'\nimport { ArrowRight, type LucideIcon } from 'lucide-react'\nimport { cn } from '../../../lib/utils'\nimport { Button } from '../../../ui/button'\nimport { Input } from '../../../ui/input'\n\nexport type FooterPresentation = 'brand-columns' | 'newsletter-grid' | 'contact'\nexport type FooterLinkBehavior = 'host' | 'native'\n\nexport interface FooterBrandAccent {\n  text: string\n  className?: string\n}\n\nexport interface FooterLink {\n  label: string\n  href?: string\n}\n\nexport interface FooterLinkColumn {\n  title: string\n  links: FooterLink[]\n}\n\nexport interface FooterSocialLink {\n  label: string\n  href?: string\n  icon: string\n  ariaLabel?: string\n}\n\nexport interface FooterNewsletter {\n  title?: string\n  placeholder?: string\n  buttonLabel: string\n}\n\nexport interface FooterContactItem {\n  label: string\n  href?: string\n}\n\nexport interface FooterContact {\n  heading?: string\n  address?: FooterContactItem\n  phone?: FooterContactItem\n  email?: FooterContactItem\n}\n\nexport interface FooterSectionProps {\n  presentation: FooterPresentation\n  brandName: string\n  linkColumns: FooterLinkColumn[]\n  brandAccent?: FooterBrandAccent\n  brandDescription?: string\n  newsletter?: FooterNewsletter\n  contact?: FooterContact\n  legalLinks?: FooterLink[]\n  socialLinks?: FooterSocialLink[]\n  copyright?: string\n  logo?: ReactNode\n  socialIcons?: Record<string, LucideIcon>\n  className?: string\n  linkBehavior?: FooterLinkBehavior\n  socialLinkBehavior?: FooterLinkBehavior\n  onNewsletterSubmit?: (email: string) => void\n  onLinkClick?: (link: FooterLink) => void\n  onSocialClick?: (label: string) => void\n}\n\nconst footerPresentations: readonly FooterPresentation[] = [\n  'brand-columns',\n  'newsletter-grid',\n  'contact',\n]\n\nfunction DefaultFooterMark() {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      className=\"size-8 shrink-0 text-primary\"\n      viewBox=\"0 0 32 32\"\n      fill=\"none\"\n    >\n      <path\n        d=\"M4 5h6v18h17M7 11h18l-4 8H7V11Z\"\n        stroke=\"currentColor\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        strokeWidth=\"2\"\n      />\n      <circle cx=\"11\" cy=\"27\" r=\"1.5\" fill=\"currentColor\" />\n      <circle cx=\"23\" cy=\"27\" r=\"1.5\" fill=\"currentColor\" />\n    </svg>\n  )\n}\n\nfunction FooterBrand({\n  brandName,\n  brandAccent,\n  brandDescription,\n  logo,\n}: Pick<\n  FooterSectionProps,\n  'brandName' | 'brandAccent' | 'brandDescription' | 'logo'\n>) {\n  const accent = brandAccent?.text ?? ''\n  const hasTrailingAccent = Boolean(accent && brandName.endsWith(accent))\n  const brandPrefix = hasTrailingAccent\n    ? brandName.slice(0, brandName.length - accent.length)\n    : brandName\n\n  return (\n    <div className=\"flex max-w-sm flex-col gap-4\">\n      <div className=\"flex items-center gap-3\">\n        {logo ?? <DefaultFooterMark />}\n        <h2 className=\"text-2xl font-bold text-balance\">\n          {brandPrefix}\n          {hasTrailingAccent ? (\n            <span className={cn('text-primary', brandAccent?.className)}>\n              {accent}\n            </span>\n          ) : null}\n        </h2>\n      </div>\n      {brandDescription ? (\n        <p className=\"text-muted-foreground text-sm leading-relaxed text-balance\">\n          {brandDescription}\n        </p>\n      ) : null}\n    </div>\n  )\n}\n\nfunction FooterContactDetails({ contact }: { contact?: FooterContact }) {\n  if (!contact) return null\n\n  const items = [contact.address, contact.phone, contact.email].filter(\n    (item): item is FooterContactItem => Boolean(item),\n  )\n\n  if (items.length === 0 && !contact.heading) return null\n\n  return (\n    <address className=\"not-italic\">\n      {contact.heading ? (\n        <h3 className=\"mb-4 text-base font-semibold text-balance\">\n          {contact.heading}\n        </h3>\n      ) : null}\n      <ul className=\"flex flex-col gap-3\">\n        {items.map((item) => (\n          <li key={JSON.stringify([item.label, item.href ?? null])}>\n            {item.href ? (\n              <a\n                href={item.href}\n                className=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n              >\n                {item.label}\n              </a>\n            ) : (\n              <span className=\"text-muted-foreground text-sm\">\n                {item.label}\n              </span>\n            )}\n          </li>\n        ))}\n      </ul>\n    </address>\n  )\n}\n\nfunction assertUniqueKeys<T>(\n  items: readonly T[],\n  getTuple: (item: T) => readonly (string | null)[],\n  listName: string,\n) {\n  const keys = new Set<string>()\n\n  for (const item of items) {\n    const key = JSON.stringify(getTuple(item))\n\n    if (typeof key !== 'string') {\n      throw new Error(`FooterSection could not derive a ${listName} key.`)\n    }\n\n    if (keys.has(key)) {\n      throw new Error(`FooterSection ${listName} keys must be unique.`)\n    }\n\n    keys.add(key)\n  }\n}\n\nfunction FooterNewsletterForm({\n  newsletter,\n  onSubmit,\n}: {\n  newsletter: FooterNewsletter\n  onSubmit?: (email: string) => void\n}) {\n  const [email, setEmail] = useState('')\n  const inputId = useId()\n\n  function handleSubmit(event: FormEvent<HTMLFormElement>) {\n    event.preventDefault()\n    if (!onSubmit) return\n\n    onSubmit(email)\n  }\n\n  return (\n    <section aria-label={newsletter.title ?? 'Newsletter'} className=\"w-full\">\n      {newsletter.title ? (\n        <h3 className=\"mb-4 text-base font-semibold text-balance\">\n          {newsletter.title}\n        </h3>\n      ) : null}\n      <form className=\"flex w-full max-w-xl gap-2\" onSubmit={handleSubmit}>\n        <label htmlFor={inputId} className=\"sr-only\">\n          {newsletter.placeholder ?? newsletter.title ?? newsletter.buttonLabel}\n        </label>\n        <Input\n          id={inputId}\n          type=\"email\"\n          autoComplete=\"email\"\n          placeholder={newsletter.placeholder}\n          value={email}\n          onChange={(event) => setEmail(event.currentTarget.value)}\n          disabled={!onSubmit}\n        />\n        <Button type=\"submit\" disabled={!onSubmit}>\n          {newsletter.buttonLabel}\n          <ArrowRight aria-hidden=\"true\" />\n        </Button>\n      </form>\n    </section>\n  )\n}\n\nfunction FooterSocialLinks({\n  socialLinks,\n  socialIcons,\n  onSocialClick,\n  socialLinkBehavior,\n}: {\n  socialLinks?: FooterSocialLink[]\n  socialIcons?: Record<string, LucideIcon>\n  onSocialClick?: (label: string) => void\n  socialLinkBehavior: FooterLinkBehavior\n}) {\n  if (!socialLinks || socialLinks.length === 0) return null\n\n  return (\n    <nav aria-label=\"Social media\">\n      <ul className=\"flex flex-wrap items-center gap-3\">\n        {socialLinks.map((social) => {\n          const Icon = socialIcons?.[social.icon]\n          const content = Icon ? (\n            <>\n              <Icon aria-hidden=\"true\" className=\"size-5\" />\n              <span className=\"sr-only\">{social.label}</span>\n            </>\n          ) : (\n            social.label\n          )\n\n          return (\n            <li key={JSON.stringify([social.label, social.href ?? null, social.icon])}>\n              {social.href &&\n              (socialLinkBehavior === 'native' || onSocialClick) ? (\n                <a\n                  href={social.href}\n                  aria-label={social.ariaLabel ?? social.label}\n                  onClick={(event) => {\n                    if (socialLinkBehavior === 'host') {\n                      event.preventDefault()\n                    }\n                    onSocialClick?.(social.label)\n                  }}\n                  className=\"inline-flex min-h-10 min-w-10 items-center justify-center rounded-full bg-accent p-2 text-muted-foreground transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-hidden\"\n                >\n                  {content}\n                </a>\n              ) : (\n                <span className=\"text-muted-foreground text-sm\">{content}</span>\n              )}\n            </li>\n          )\n        })}\n      </ul>\n    </nav>\n  )\n}\n\nfunction FooterLegalLinks({\n  links,\n  onLinkClick,\n  linkBehavior,\n}: {\n  links?: FooterLink[]\n  onLinkClick?: (link: FooterLink) => void\n  linkBehavior: FooterLinkBehavior\n}) {\n  if (!links || links.length === 0) return null\n\n  return (\n    <nav aria-label=\"Legal information\">\n      <ul className=\"flex flex-wrap gap-x-5 gap-y-2\">\n        {links.map((link) => (\n          <li key={JSON.stringify([link.label, link.href ?? null])}>\n            {link.href && (linkBehavior === 'native' || onLinkClick) ? (\n              <a\n                href={link.href}\n                onClick={(event) => {\n                  if (linkBehavior === 'host') {\n                    event.preventDefault()\n                  }\n                  onLinkClick?.(link)\n                }}\n                className=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n              >\n                {link.label}\n              </a>\n            ) : (\n              <span className=\"text-muted-foreground text-sm\">\n                {link.label}\n              </span>\n            )}\n          </li>\n        ))}\n      </ul>\n    </nav>\n  )\n}\n\nfunction FooterLinkColumns({\n  columns,\n  onLinkClick,\n  linkBehavior,\n  className,\n}: {\n  columns: FooterLinkColumn[]\n  onLinkClick?: (link: FooterLink) => void\n  linkBehavior: FooterLinkBehavior\n  className?: string\n}) {\n  if (columns.length === 0) return null\n\n  return (\n    <div className={cn('grid grid-cols-1 gap-8 sm:grid-cols-2', className)}>\n      {columns.map((column) => (\n        <nav key={JSON.stringify([column.title])} aria-label={column.title}>\n          <h3 className=\"mb-4 text-base font-semibold text-balance\">\n            {column.title}\n          </h3>\n          <ul className=\"flex flex-col gap-3\">\n            {column.links.map((link) => (\n              <li key={JSON.stringify([link.label, link.href ?? null])}>\n                {link.href && (linkBehavior === 'native' || onLinkClick) ? (\n                  <a\n                    href={link.href}\n                    onClick={(event) => {\n                      if (linkBehavior === 'host') {\n                        event.preventDefault()\n                      }\n                      onLinkClick?.(link)\n                    }}\n                    className=\"text-muted-foreground hover:text-foreground focus-visible:ring-ring rounded-sm text-sm transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden\"\n                  >\n                    {link.label}\n                  </a>\n                ) : (\n                  <span className=\"text-muted-foreground text-sm\">\n                    {link.label}\n                  </span>\n                )}\n              </li>\n            ))}\n          </ul>\n        </nav>\n      ))}\n    </div>\n  )\n}\n\nexport function FooterSection({\n  presentation,\n  brandName,\n  brandAccent,\n  brandDescription,\n  linkColumns,\n  newsletter,\n  contact,\n  legalLinks,\n  socialLinks,\n  socialIcons,\n  copyright,\n  logo,\n  className,\n  onNewsletterSubmit,\n  onLinkClick,\n  onSocialClick,\n  linkBehavior = 'host',\n  socialLinkBehavior = 'host',\n}: FooterSectionProps) {\n  if (!footerPresentations.includes(presentation)) {\n    throw new Error(\n      `FooterSection requires a supported presentation; received ${String(presentation)}.`,\n    )\n  }\n\n  assertUniqueKeys(linkColumns, (column) => [column.title], 'column')\n\n  for (const column of linkColumns) {\n    assertUniqueKeys(\n      column.links,\n      (link) => [link.label, link.href ?? null],\n      'link',\n    )\n  }\n\n  assertUniqueKeys(\n    legalLinks ?? [],\n    (link) => [link.label, link.href ?? null],\n    'legal link',\n  )\n  assertUniqueKeys(\n    socialLinks ?? [],\n    (social) => [social.label, social.href ?? null, social.icon],\n    'social',\n  )\n\n  const brand = (\n    <FooterBrand\n      brandName={brandName}\n      brandAccent={brandAccent}\n      brandDescription={brandDescription}\n      logo={logo}\n    />\n  )\n  const columns = (\n    <FooterLinkColumns\n      columns={linkColumns}\n      onLinkClick={onLinkClick}\n      linkBehavior={linkBehavior}\n    />\n  )\n  const contactDetails = <FooterContactDetails contact={contact} />\n  const newsletterForm = newsletter ? (\n    <FooterNewsletterForm\n      newsletter={newsletter}\n      onSubmit={onNewsletterSubmit}\n    />\n  ) : null\n  const legal = (\n    <FooterLegalLinks\n      links={legalLinks}\n      onLinkClick={onLinkClick}\n      linkBehavior={linkBehavior}\n    />\n  )\n  const socials = (\n    <FooterSocialLinks\n      socialLinks={socialLinks}\n      socialIcons={socialIcons}\n      onSocialClick={onSocialClick}\n      socialLinkBehavior={socialLinkBehavior}\n    />\n  )\n\n  return (\n    <footer\n      role=\"contentinfo\"\n      aria-label={`${brandName} footer`}\n      className={cn(\n        'w-full border-t border-border bg-background text-foreground',\n        className,\n      )}\n    >\n      <div className=\"mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 sm:py-16 lg:px-8\">\n        {presentation === 'brand-columns' ? (\n          <div className=\"grid gap-12 md:grid-cols-[minmax(0,1fr)_2fr]\">\n            <div className=\"flex flex-col gap-8\">\n              {brand}\n              {newsletterForm}\n              {contactDetails}\n            </div>\n            <div className=\"flex flex-col gap-8\">\n              {columns}\n              {legal}\n            </div>\n          </div>\n        ) : null}\n\n        {presentation === 'newsletter-grid' ? (\n          <div className=\"flex flex-col gap-12\">\n            <div className=\"grid gap-8 border-b border-border pb-10 md:grid-cols-[minmax(0,1fr)_2fr] md:items-end\">\n              {brand}\n              {contactDetails}\n            </div>\n            {newsletterForm}\n            {columns}\n            {legal}\n          </div>\n        ) : null}\n\n        {presentation === 'contact' ? (\n          <div className=\"grid gap-10 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_2fr]\">\n            {brand}\n            {contactDetails}\n            <div className=\"flex flex-col gap-8\">\n              {newsletterForm}\n              {columns}\n              {legal}\n            </div>\n          </div>\n        ) : null}\n\n        {socials ? <div className=\"mt-10\">{socials}</div> : null}\n\n        {copyright ? (\n          <div className=\"mt-10 border-t border-border pt-6\">\n            <p className=\"text-muted-foreground text-sm\">{copyright}</p>\n          </div>\n        ) : null}\n      </div>\n    </footer>\n  )\n}\n"],"mappings":"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","names":[]}

package/dist/blocks/marketing/hero-sections/avatar-group.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export declare function AvatarGroup({ children, className, overlap, }: {
+    children: React.ReactNode;
+    className?: string;
+    /** Negative margin applied to every item but the first. Set to `''` for a non-overlapping row. */
+    overlap?: string;
+}): React.JSX.Element;
+export default AvatarGroup;
+//# sourceMappingURL=avatar-group.d.ts.map

package/dist/blocks/marketing/hero-sections/avatar-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-group.d.ts","sourceRoot":"","sources":["../../../../src/blocks/marketing/hero-sections/avatar-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAyB9B,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,OAAiB,GAClB,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,kGAAkG;IAClG,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,qBA+CA;AAED,eAAe,WAAW,CAAA"}

package/dist/blocks/marketing/hero-sections/avatar-group.js

@@ -0,0 +1,92 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var avatar_group_exports = {};
+__export(avatar_group_exports, {
+  AvatarGroup: () => AvatarGroup,
+  default: () => avatar_group_default
+});
+module.exports = __toCommonJS(avatar_group_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var React = __toESM(require("react"));
+var import_react = require("react");
+var import_utils = require("../../../lib/utils.js");
+const LIFT = -4;
+const FALLOFF = 0.45;
+const ACTIVE_SCALE = 1.05;
+const DURATION = 320;
+const EASE_IN = "cubic-bezier(0.22, 1, 0.36, 1)";
+const EASE_OUT = "cubic-bezier(0.34, 3.85, 0.64, 1)";
+function AvatarGroup({
+  children,
+  className,
+  overlap = "-ml-2"
+}) {
+  const items = React.Children.toArray(children);
+  const [activeIndex, setActiveIndex] = (0, import_react.useState)(null);
+  const [reducedMotion, setReducedMotion] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    const query = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const sync = () => setReducedMotion(query.matches);
+    sync();
+    query.addEventListener("change", sync);
+    return () => query.removeEventListener("change", sync);
+  }, []);
+  const itemStyle = (index) => {
+    if (reducedMotion) {
+      return void 0;
+    }
+    const isActive = index === activeIndex;
+    const shift = activeIndex === null ? 0 : LIFT * FALLOFF ** Math.abs(index - activeIndex);
+    return {
+      // translateY before scale, so scaling never amplifies the lift distance.
+      transform: `translateY(${shift.toFixed(3)}px) scale(${isActive ? ACTIVE_SCALE : 1})`,
+      transition: `transform ${DURATION}ms ${activeIndex === null ? EASE_OUT : EASE_IN}`,
+      willChange: "transform",
+      // A lifted item has to sit above the neighbour overlapping it, or the lift happens underneath.
+      zIndex: isActive ? 1 : void 0
+    };
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_utils.cn)("flex", className), onMouseLeave: () => setActiveIndex(null), children: items.map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: (0, import_utils.cn)("relative", index > 0 && overlap),
+      style: itemStyle(index),
+      onMouseEnter: () => setActiveIndex(index),
+      children: child
+    },
+    index
+  )) });
+}
+var avatar_group_default = AvatarGroup;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AvatarGroup
+});
+//# sourceMappingURL=avatar-group.js.map

package/dist/blocks/marketing/hero-sections/avatar-group.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/marketing/hero-sections/avatar-group.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { useEffect, useState } from 'react'\n\nimport { cn } from '../../../lib/utils'\n\n/**\n * @title Avatar group\n * @description Overlapping avatar stack whose neighbours lift with a distance falloff on hover.\n *\n * Adapted from Transitions.dev \"Avatar group hover\".\n *\n * A dock, not a switch. Lifting only the hovered item makes the row twitch — one element jumps\n * while the rest sit rigid — so the response falls off with distance: the neighbour rises about\n * half as far, the next barely at all. The falloff is what makes the row read as one soft object.\n *\n * The return is deliberately springier than the approach: a strong overshoot curve on the way back\n * reads as elastic rather than mechanical.\n */\nconst LIFT = -4\nconst FALLOFF = 0.45\nconst ACTIVE_SCALE = 1.05\nconst DURATION = 320\nconst EASE_IN = 'cubic-bezier(0.22, 1, 0.36, 1)'\nconst EASE_OUT = 'cubic-bezier(0.34, 3.85, 0.64, 1)'\n\nexport function AvatarGroup({\n  children,\n  className,\n  overlap = '-ml-2',\n}: {\n  children: React.ReactNode\n  className?: string\n  /** Negative margin applied to every item but the first. Set to `''` for a non-overlapping row. */\n  overlap?: string\n}) {\n  const items = React.Children.toArray(children)\n  const [activeIndex, setActiveIndex] = useState<number | null>(null)\n  const [reducedMotion, setReducedMotion] = useState(false)\n\n  useEffect(() => {\n    const query = window.matchMedia('(prefers-reduced-motion: reduce)')\n    const sync = () => setReducedMotion(query.matches)\n\n    sync()\n    query.addEventListener('change', sync)\n    return () => query.removeEventListener('change', sync)\n  }, [])\n\n  const itemStyle = (index: number): React.CSSProperties | undefined => {\n    if (reducedMotion) {\n      return undefined\n    }\n\n    const isActive = index === activeIndex\n    const shift = activeIndex === null ? 0 : LIFT * FALLOFF ** Math.abs(index - activeIndex)\n\n    return {\n      // translateY before scale, so scaling never amplifies the lift distance.\n      transform: `translateY(${shift.toFixed(3)}px) scale(${isActive ? ACTIVE_SCALE : 1})`,\n      transition: `transform ${DURATION}ms ${activeIndex === null ? EASE_OUT : EASE_IN}`,\n      willChange: 'transform',\n      // A lifted item has to sit above the neighbour overlapping it, or the lift happens underneath.\n      zIndex: isActive ? 1 : undefined,\n    }\n  }\n\n  return (\n    <div className={cn('flex', className)} onMouseLeave={() => setActiveIndex(null)}>\n      {items.map((child, index) => (\n        <div\n          // eslint-disable-next-line react/no-array-index-key -- position is the identity here\n          key={index}\n          className={cn('relative', index > 0 && overlap)}\n          style={itemStyle(index)}\n          onMouseEnter={() => setActiveIndex(index)}\n        >\n          {child}\n        </div>\n      ))}\n    </div>\n  )\n}\n\nexport default AvatarGroup"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuEQ;AArER,YAAuB;AACvB,mBAAoC;AAEpC,mBAAmB;AAenB,MAAM,OAAO;AACb,MAAM,UAAU;AAChB,MAAM,eAAe;AACrB,MAAM,WAAW;AACjB,MAAM,UAAU;AAChB,MAAM,WAAW;AAEV,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA,UAAU;AACZ,GAKG;AACD,QAAM,QAAQ,MAAM,SAAS,QAAQ,QAAQ;AAC7C,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAwB,IAAI;AAClE,QAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAS,KAAK;AAExD,8BAAU,MAAM;AACd,UAAM,QAAQ,OAAO,WAAW,kCAAkC;AAClE,UAAM,OAAO,MAAM,iBAAiB,MAAM,OAAO;AAEjD,SAAK;AACL,UAAM,iBAAiB,UAAU,IAAI;AACrC,WAAO,MAAM,MAAM,oBAAoB,UAAU,IAAI;AAAA,EACvD,GAAG,CAAC,CAAC;AAEL,QAAM,YAAY,CAAC,UAAmD;AACpE,QAAI,eAAe;AACjB,aAAO;AAAA,IACT;AAEA,UAAM,WAAW,UAAU;AAC3B,UAAM,QAAQ,gBAAgB,OAAO,IAAI,OAAO,WAAW,KAAK,IAAI,QAAQ,WAAW;AAEvF,WAAO;AAAA;AAAA,MAEL,WAAW,cAAc,MAAM,QAAQ,CAAC,CAAC,aAAa,WAAW,eAAe,CAAC;AAAA,MACjF,YAAY,aAAa,QAAQ,MAAM,gBAAgB,OAAO,WAAW,OAAO;AAAA,MAChF,YAAY;AAAA;AAAA,MAEZ,QAAQ,WAAW,IAAI;AAAA,IACzB;AAAA,EACF;AAEA,SACE,4CAAC,SAAI,eAAW,iBAAG,QAAQ,SAAS,GAAG,cAAc,MAAM,eAAe,IAAI,GAC3E,gBAAM,IAAI,CAAC,OAAO,UACjB;AAAA,IAAC;AAAA;AAAA,MAGC,eAAW,iBAAG,YAAY,QAAQ,KAAK,OAAO;AAAA,MAC9C,OAAO,UAAU,KAAK;AAAA,MACtB,cAAc,MAAM,eAAe,KAAK;AAAA,MAEvC;AAAA;AAAA,IALI;AAAA,EAMP,CACD,GACH;AAEJ;AAEA,IAAO,uBAAQ;","names":[]}

package/dist/blocks/marketing/hero-sections/avatar-group.mjs

@@ -0,0 +1,58 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { useEffect, useState } from "react";
+import { cn } from "../../../lib/utils.mjs";
+const LIFT = -4;
+const FALLOFF = 0.45;
+const ACTIVE_SCALE = 1.05;
+const DURATION = 320;
+const EASE_IN = "cubic-bezier(0.22, 1, 0.36, 1)";
+const EASE_OUT = "cubic-bezier(0.34, 3.85, 0.64, 1)";
+function AvatarGroup({
+  children,
+  className,
+  overlap = "-ml-2"
+}) {
+  const items = React.Children.toArray(children);
+  const [activeIndex, setActiveIndex] = useState(null);
+  const [reducedMotion, setReducedMotion] = useState(false);
+  useEffect(() => {
+    const query = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const sync = () => setReducedMotion(query.matches);
+    sync();
+    query.addEventListener("change", sync);
+    return () => query.removeEventListener("change", sync);
+  }, []);
+  const itemStyle = (index) => {
+    if (reducedMotion) {
+      return void 0;
+    }
+    const isActive = index === activeIndex;
+    const shift = activeIndex === null ? 0 : LIFT * FALLOFF ** Math.abs(index - activeIndex);
+    return {
+      // translateY before scale, so scaling never amplifies the lift distance.
+      transform: `translateY(${shift.toFixed(3)}px) scale(${isActive ? ACTIVE_SCALE : 1})`,
+      transition: `transform ${DURATION}ms ${activeIndex === null ? EASE_OUT : EASE_IN}`,
+      willChange: "transform",
+      // A lifted item has to sit above the neighbour overlapping it, or the lift happens underneath.
+      zIndex: isActive ? 1 : void 0
+    };
+  };
+  return /* @__PURE__ */ jsx("div", { className: cn("flex", className), onMouseLeave: () => setActiveIndex(null), children: items.map((child, index) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("relative", index > 0 && overlap),
+      style: itemStyle(index),
+      onMouseEnter: () => setActiveIndex(index),
+      children: child
+    },
+    index
+  )) });
+}
+var avatar_group_default = AvatarGroup;
+export {
+  AvatarGroup,
+  avatar_group_default as default
+};
+//# sourceMappingURL=avatar-group.mjs.map

package/dist/blocks/marketing/hero-sections/avatar-group.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/marketing/hero-sections/avatar-group.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { useEffect, useState } from 'react'\n\nimport { cn } from '../../../lib/utils'\n\n/**\n * @title Avatar group\n * @description Overlapping avatar stack whose neighbours lift with a distance falloff on hover.\n *\n * Adapted from Transitions.dev \"Avatar group hover\".\n *\n * A dock, not a switch. Lifting only the hovered item makes the row twitch — one element jumps\n * while the rest sit rigid — so the response falls off with distance: the neighbour rises about\n * half as far, the next barely at all. The falloff is what makes the row read as one soft object.\n *\n * The return is deliberately springier than the approach: a strong overshoot curve on the way back\n * reads as elastic rather than mechanical.\n */\nconst LIFT = -4\nconst FALLOFF = 0.45\nconst ACTIVE_SCALE = 1.05\nconst DURATION = 320\nconst EASE_IN = 'cubic-bezier(0.22, 1, 0.36, 1)'\nconst EASE_OUT = 'cubic-bezier(0.34, 3.85, 0.64, 1)'\n\nexport function AvatarGroup({\n  children,\n  className,\n  overlap = '-ml-2',\n}: {\n  children: React.ReactNode\n  className?: string\n  /** Negative margin applied to every item but the first. Set to `''` for a non-overlapping row. */\n  overlap?: string\n}) {\n  const items = React.Children.toArray(children)\n  const [activeIndex, setActiveIndex] = useState<number | null>(null)\n  const [reducedMotion, setReducedMotion] = useState(false)\n\n  useEffect(() => {\n    const query = window.matchMedia('(prefers-reduced-motion: reduce)')\n    const sync = () => setReducedMotion(query.matches)\n\n    sync()\n    query.addEventListener('change', sync)\n    return () => query.removeEventListener('change', sync)\n  }, [])\n\n  const itemStyle = (index: number): React.CSSProperties | undefined => {\n    if (reducedMotion) {\n      return undefined\n    }\n\n    const isActive = index === activeIndex\n    const shift = activeIndex === null ? 0 : LIFT * FALLOFF ** Math.abs(index - activeIndex)\n\n    return {\n      // translateY before scale, so scaling never amplifies the lift distance.\n      transform: `translateY(${shift.toFixed(3)}px) scale(${isActive ? ACTIVE_SCALE : 1})`,\n      transition: `transform ${DURATION}ms ${activeIndex === null ? EASE_OUT : EASE_IN}`,\n      willChange: 'transform',\n      // A lifted item has to sit above the neighbour overlapping it, or the lift happens underneath.\n      zIndex: isActive ? 1 : undefined,\n    }\n  }\n\n  return (\n    <div className={cn('flex', className)} onMouseLeave={() => setActiveIndex(null)}>\n      {items.map((child, index) => (\n        <div\n          // eslint-disable-next-line react/no-array-index-key -- position is the identity here\n          key={index}\n          className={cn('relative', index > 0 && overlap)}\n          style={itemStyle(index)}\n          onMouseEnter={() => setActiveIndex(index)}\n        >\n          {child}\n        </div>\n      ))}\n    </div>\n  )\n}\n\nexport default AvatarGroup"],"mappings":";AAuEQ;AArER,YAAY,WAAW;AACvB,SAAS,WAAW,gBAAgB;AAEpC,SAAS,UAAU;AAenB,MAAM,OAAO;AACb,MAAM,UAAU;AAChB,MAAM,eAAe;AACrB,MAAM,WAAW;AACjB,MAAM,UAAU;AAChB,MAAM,WAAW;AAEV,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA,UAAU;AACZ,GAKG;AACD,QAAM,QAAQ,MAAM,SAAS,QAAQ,QAAQ;AAC7C,QAAM,CAAC,aAAa,cAAc,IAAI,SAAwB,IAAI;AAClE,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,KAAK;AAExD,YAAU,MAAM;AACd,UAAM,QAAQ,OAAO,WAAW,kCAAkC;AAClE,UAAM,OAAO,MAAM,iBAAiB,MAAM,OAAO;AAEjD,SAAK;AACL,UAAM,iBAAiB,UAAU,IAAI;AACrC,WAAO,MAAM,MAAM,oBAAoB,UAAU,IAAI;AAAA,EACvD,GAAG,CAAC,CAAC;AAEL,QAAM,YAAY,CAAC,UAAmD;AACpE,QAAI,eAAe;AACjB,aAAO;AAAA,IACT;AAEA,UAAM,WAAW,UAAU;AAC3B,UAAM,QAAQ,gBAAgB,OAAO,IAAI,OAAO,WAAW,KAAK,IAAI,QAAQ,WAAW;AAEvF,WAAO;AAAA;AAAA,MAEL,WAAW,cAAc,MAAM,QAAQ,CAAC,CAAC,aAAa,WAAW,eAAe,CAAC;AAAA,MACjF,YAAY,aAAa,QAAQ,MAAM,gBAAgB,OAAO,WAAW,OAAO;AAAA,MAChF,YAAY;AAAA;AAAA,MAEZ,QAAQ,WAAW,IAAI;AAAA,IACzB;AAAA,EACF;AAEA,SACE,oBAAC,SAAI,WAAW,GAAG,QAAQ,SAAS,GAAG,cAAc,MAAM,eAAe,IAAI,GAC3E,gBAAM,IAAI,CAAC,OAAO,UACjB;AAAA,IAAC;AAAA;AAAA,MAGC,WAAW,GAAG,YAAY,QAAQ,KAAK,OAAO;AAAA,MAC9C,OAAO,UAAU,KAAK;AAAA,MACtB,cAAc,MAAM,eAAe,KAAK;AAAA,MAEvC;AAAA;AAAA,IALI;AAAA,EAMP,CACD,GACH;AAEJ;AAEA,IAAO,uBAAQ;","names":[]}

package/dist/blocks/marketing/hero-sections/hero-section-1.d.ts

@@ -0,0 +1,27 @@
+import type { CTA } from '../../../lib/types';
+interface AvatarItem {
+    id: string | number;
+    avatarUrl: string;
+    fallback: string;
+    alt?: string;
+}
+interface Rating {
+    value: number;
+    count: number;
+}
+interface HeroSection1Props {
+    title: string;
+    description: string;
+    badge?: string;
+    cta?: CTA;
+    reviewers?: AvatarItem[];
+    rating?: Rating;
+    trustedBy?: string;
+    image?: {
+        src: string;
+        alt: string;
+    };
+}
+export declare function HeroSection1({ title, description, badge, cta, reviewers, rating, trustedBy, image, }: HeroSection1Props): import("react").JSX.Element;
+export default HeroSection1;
+//# sourceMappingURL=hero-section-1.d.ts.map

package/dist/blocks/marketing/hero-sections/hero-section-1.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hero-section-1.d.ts","sourceRoot":"","sources":["../../../../src/blocks/marketing/hero-sections/hero-section-1.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAA;AAE7C,UAAU,UAAU;IAClB,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;IACnB,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,CAAA;IAChB,GAAG,CAAC,EAAE,MAAM,CAAA;CACb;AAED,UAAU,MAAM;IACd,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd;AAED,UAAU,iBAAiB;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,GAAG,CAAC,EAAE,GAAG,CAAA;IACT,SAAS,CAAC,EAAE,UAAU,EAAE,CAAA;IACxB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAA;CACrC;AAED,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,WAAW,EACX,KAAK,EACL,GAAG,EACH,SAAS,EACT,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,iBAAiB,+BA6FnB;AAED,eAAe,YAAY,CAAA"}