@openwarelabs/blocks 0.7.0 → 0.8.0

package/dist/index.js

@@ -1,22 +1,26 @@
 // blocks/src/heroes/Hero01/Hero01.tsx
 import { useId } from "react";
-import { Chip, cx, Text } from "@openwarelabs/ui";
+import { Chip, cx as cx2, Text } from "@openwarelabs/ui";
 
 // blocks/src/shared/BlockActions.tsx
-import { Button, buttonClassName } from "@openwarelabs/ui";
+import { Button, buttonClassName, cx } from "@openwarelabs/ui";
 import { jsx, jsxs } from "react/jsx-runtime";
-function BlockActionButton({ action, variant }) {
+function BlockActionButton({ action, variant, size = "lg", className, onAfterClick, fullWidth = false }) {
   const { label, href, onClick, startIcon, endIcon, target, "aria-label": ariaLabel } = action;
+  const click = onClick || onAfterClick ? (event) => {
+    onClick?.(event);
+    onAfterClick?.();
+  } : void 0;
   if (href !== void 0) {
     return /* @__PURE__ */ jsxs(
       "a",
       {
-        className: buttonClassName({ variant, size: "lg", shape: "pill" }),
+        className: cx(buttonClassName({ variant, size, shape: "pill" }), fullWidth && "ow-button--full", className),
         href,
         target,
         rel: target === "_blank" ? "noopener noreferrer" : void 0,
         "aria-label": ariaLabel,
-        onClick,
+        onClick: click,
         children: [
           startIcon ? /* @__PURE__ */ jsx("span", { className: "ow-button__icon", children: startIcon }) : null,
           label,
@@ -25,7 +29,21 @@ function BlockActionButton({ action, variant }) {
       }
     );
   }
-  return /* @__PURE__ */ jsx(Button, { variant, shape: "pill", size: "lg", startIcon, endIcon, "aria-label": ariaLabel, onClick, children: label });
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant,
+      shape: "pill",
+      size,
+      startIcon,
+      endIcon,
+      "aria-label": ariaLabel,
+      onClick: click,
+      fullWidth,
+      className,
+      children: label
+    }
+  );
 }
 function BlockActions({ primary, secondary, className }) {
   return /* @__PURE__ */ jsxs("div", { className, children: [
@@ -38,7 +56,7 @@ function BlockActions({ primary, secondary, className }) {
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function Hero01({ eyebrow, title, description, primaryAction, secondaryAction, note, visual, className, ...props }) {
   const titleId = useId();
-  return /* @__PURE__ */ jsxs2("section", { className: cx("ow-hero01", className), "aria-labelledby": titleId, ...props, children: [
+  return /* @__PURE__ */ jsxs2("section", { className: cx2("ow-hero01", className), "aria-labelledby": titleId, ...props, children: [
     /* @__PURE__ */ jsxs2("div", { className: "ow-hero01__inner", children: [
       eyebrow ? /* @__PURE__ */ jsx2(Chip, { children: eyebrow }) : null,
       /* @__PURE__ */ jsx2(Text, { variant: "hero", align: "center", id: titleId, className: "ow-hero01__title", children: title }),
@@ -52,11 +70,11 @@ function Hero01({ eyebrow, title, description, primaryAction, secondaryAction, n
 
 // blocks/src/heroes/Hero02/Hero02.tsx
 import { useId as useId2 } from "react";
-import { Chip as Chip2, cx as cx2, Text as Text2 } from "@openwarelabs/ui";
+import { Chip as Chip2, cx as cx3, Text as Text2 } from "@openwarelabs/ui";
 
 // blocks/src/shared/icons.tsx
 import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var icon = (paths) => function BlockIcon({ size = 16 }) {
+var icon = (paths) => function BlockIcon({ size = 16, strokeWidth = 2 }) {
   return /* @__PURE__ */ jsx3(
     "svg",
     {
@@ -66,7 +84,7 @@ var icon = (paths) => function BlockIcon({ size = 16 }) {
       viewBox: "0 0 24 24",
       fill: "none",
       stroke: "currentColor",
-      strokeWidth: 2,
+      strokeWidth,
       strokeLinecap: "round",
       strokeLinejoin: "round",
       "aria-hidden": "true",
@@ -88,12 +106,63 @@ var DownloadIcon = icon(
     /* @__PURE__ */ jsx3("path", { d: "m7 10 5 5 5-5" })
   ] })
 );
+var MenuIcon = icon(
+  /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx3("path", { d: "M4 5h16" }),
+    /* @__PURE__ */ jsx3("path", { d: "M4 12h16" }),
+    /* @__PURE__ */ jsx3("path", { d: "M4 19h16" })
+  ] })
+);
+var XIcon = icon(
+  /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx3("path", { d: "M18 6 6 18" }),
+    /* @__PURE__ */ jsx3("path", { d: "m6 6 12 12" })
+  ] })
+);
+var ChevronDownIcon = icon(/* @__PURE__ */ jsx3("path", { d: "m6 9 6 6 6-6" }));
+var ChevronRightIcon = icon(/* @__PURE__ */ jsx3("path", { d: "m9 18 6-6-6-6" }));
+var ArrowRightIcon = icon(
+  /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx3("path", { d: "M5 12h14" }),
+    /* @__PURE__ */ jsx3("path", { d: "m12 5 7 7-7 7" })
+  ] })
+);
+var MinusIcon = icon(/* @__PURE__ */ jsx3("path", { d: "M5 12h14" }));
+var SunIcon = icon(
+  /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "12", r: "4" }),
+    /* @__PURE__ */ jsx3("path", { d: "M12 2v2" }),
+    /* @__PURE__ */ jsx3("path", { d: "M12 20v2" }),
+    /* @__PURE__ */ jsx3("path", { d: "m4.93 4.93 1.41 1.41" }),
+    /* @__PURE__ */ jsx3("path", { d: "m17.66 17.66 1.41 1.41" }),
+    /* @__PURE__ */ jsx3("path", { d: "M2 12h2" }),
+    /* @__PURE__ */ jsx3("path", { d: "M20 12h2" }),
+    /* @__PURE__ */ jsx3("path", { d: "m6.34 17.66-1.41 1.41" }),
+    /* @__PURE__ */ jsx3("path", { d: "m19.07 4.93-1.41 1.41" })
+  ] })
+);
+var MoonIcon = icon(
+  /* @__PURE__ */ jsx3("path", { d: "M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401" })
+);
+var MonitorIcon = icon(
+  /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx3("rect", { width: "20", height: "14", x: "2", y: "3", rx: "2" }),
+    /* @__PURE__ */ jsx3("line", { x1: "8", x2: "16", y1: "21", y2: "21" }),
+    /* @__PURE__ */ jsx3("line", { x1: "12", x2: "12", y1: "17", y2: "21" })
+  ] })
+);
+var CircleCheckIcon = icon(
+  /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx3("path", { d: "m16 9-5.5 5.5L8 12" })
+  ] })
+);
 
 // blocks/src/heroes/Hero02/Hero02.tsx
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function Hero02({ eyebrow, title, description, primaryAction, secondaryAction, points, visual, className, ...props }) {
   const titleId = useId2();
-  return /* @__PURE__ */ jsx4("section", { className: cx2("ow-hero02", className), "aria-labelledby": titleId, ...props, children: /* @__PURE__ */ jsxs4("div", { className: "ow-hero02__inner", children: [
+  return /* @__PURE__ */ jsx4("section", { className: cx3("ow-hero02", className), "aria-labelledby": titleId, ...props, children: /* @__PURE__ */ jsxs4("div", { className: "ow-hero02__inner", children: [
     /* @__PURE__ */ jsxs4("div", { className: "ow-hero02__text", children: [
       eyebrow ? /* @__PURE__ */ jsx4(Chip2, { children: eyebrow }) : null,
       /* @__PURE__ */ jsx4(Text2, { variant: "page-title", id: titleId, className: "ow-hero02__title", children: title }),
@@ -110,7 +179,7 @@ function Hero02({ eyebrow, title, description, primaryAction, secondaryAction, p
 
 // blocks/src/heroes/Hero03/Hero03.tsx
 import { useEffect, useId as useId3, useRef, useState } from "react";
-import { Button as Button2, Chip as Chip3, cx as cx3, Input, Text as Text3 } from "@openwarelabs/ui";
+import { Button as Button2, Chip as Chip3, cx as cx4, Input, Text as Text3 } from "@openwarelabs/ui";
 import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 function Hero03({
@@ -162,7 +231,7 @@ function Hero03({
       setSending(false);
     }
   };
-  return /* @__PURE__ */ jsx5("section", { className: cx3("ow-hero03", className), "aria-labelledby": titleId, ...props, children: /* @__PURE__ */ jsxs5("div", { className: "ow-hero03__inner", children: [
+  return /* @__PURE__ */ jsx5("section", { className: cx4("ow-hero03", className), "aria-labelledby": titleId, ...props, children: /* @__PURE__ */ jsxs5("div", { className: "ow-hero03__inner", children: [
     eyebrow ? /* @__PURE__ */ jsx5(Chip3, { children: eyebrow }) : null,
     /* @__PURE__ */ jsx5(Text3, { variant: "hero", align: "center", id: titleId, className: "ow-hero03__title", children: title }),
     /* @__PURE__ */ jsx5(Text3, { variant: "lead", align: "center", className: "ow-hero03__lead", children: description }),
@@ -216,11 +285,11 @@ function Hero03({
 
 // blocks/src/heroes/Hero04/Hero04.tsx
 import { useId as useId4 } from "react";
-import { Chip as Chip4, cx as cx4, DotGrid, Text as Text4 } from "@openwarelabs/ui";
+import { Chip as Chip4, cx as cx5, DotGrid, Text as Text4 } from "@openwarelabs/ui";
 import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function Hero04({ eyebrow, title, description, primaryAction, secondaryAction, start, end, interactive = true, className, ...props }) {
   const titleId = useId4();
-  return /* @__PURE__ */ jsx6("section", { className: cx4("ow-hero04", className), "aria-labelledby": titleId, ...props, children: /* @__PURE__ */ jsx6(DotGrid, { fade: true, interactive, className: "ow-hero04__grid", children: /* @__PURE__ */ jsxs6("div", { className: "ow-hero04__layout", children: [
+  return /* @__PURE__ */ jsx6("section", { className: cx5("ow-hero04", className), "aria-labelledby": titleId, ...props, children: /* @__PURE__ */ jsx6(DotGrid, { fade: true, interactive, className: "ow-hero04__grid", children: /* @__PURE__ */ jsxs6("div", { className: "ow-hero04__layout", children: [
     start,
     /* @__PURE__ */ jsxs6("div", { className: "ow-hero04__text", children: [
       eyebrow ? /* @__PURE__ */ jsx6(Chip4, { children: eyebrow }) : null,
@@ -234,11 +303,11 @@ function Hero04({ eyebrow, title, description, primaryAction, secondaryAction, s
 
 // blocks/src/heroes/Hero05/Hero05.tsx
 import { useId as useId5 } from "react";
-import { Chip as Chip5, cx as cx5, Text as Text5 } from "@openwarelabs/ui";
+import { Chip as Chip5, cx as cx6, Text as Text5 } from "@openwarelabs/ui";
 import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 function Hero05({ eyebrow, title, description, primaryAction, secondaryAction, logosTitle, logos, className, ...props }) {
   const id = useId5();
-  return /* @__PURE__ */ jsx7("section", { className: cx5("ow-hero05", className), "aria-labelledby": `${id}-title`, ...props, children: /* @__PURE__ */ jsxs7("div", { className: "ow-hero05__inner", children: [
+  return /* @__PURE__ */ jsx7("section", { className: cx6("ow-hero05", className), "aria-labelledby": `${id}-title`, ...props, children: /* @__PURE__ */ jsxs7("div", { className: "ow-hero05__inner", children: [
     /* @__PURE__ */ jsxs7("div", { className: "ow-hero05__top", children: [
       /* @__PURE__ */ jsxs7("div", { className: "ow-hero05__heading", children: [
         eyebrow ? /* @__PURE__ */ jsx7(Chip5, { children: eyebrow }) : null,
@@ -258,7 +327,7 @@ function Hero05({ eyebrow, title, description, primaryAction, secondaryAction, l
 
 // blocks/src/heroes/Hero06/Hero06.tsx
 import { useEffect as useEffect2, useId as useId6, useState as useState2 } from "react";
-import { Button as Button3, buttonClassName as buttonClassName2, Chip as Chip6, cx as cx6, Link, Text as Text6 } from "@openwarelabs/ui";
+import { Button as Button3, buttonClassName as buttonClassName2, Chip as Chip6, cx as cx7, Link, Text as Text6 } from "@openwarelabs/ui";
 import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 function detectPlatform() {
   const nav = navigator;
@@ -321,7 +390,7 @@ function Hero06({
       platform.id
     );
   };
-  return /* @__PURE__ */ jsx8("section", { className: cx6("ow-hero06", className), "aria-labelledby": titleId, ...props, children: /* @__PURE__ */ jsxs8("div", { className: "ow-hero06__inner", children: [
+  return /* @__PURE__ */ jsx8("section", { className: cx7("ow-hero06", className), "aria-labelledby": titleId, ...props, children: /* @__PURE__ */ jsxs8("div", { className: "ow-hero06__inner", children: [
     /* @__PURE__ */ jsxs8("div", { className: "ow-hero06__text", children: [
       eyebrow ? /* @__PURE__ */ jsx8(Chip6, { children: eyebrow }) : null,
       /* @__PURE__ */ jsx8(Text6, { variant: "page-title", id: titleId, className: "ow-hero06__title", children: title }),
@@ -336,12 +405,1195 @@ function Hero06({
     visual
   ] }) });
 }
+
+// blocks/src/headers/Header01/Header01.tsx
+import { useEffect as useEffect3, useState as useState3 } from "react";
+import { Button as Button4, cx as cx8, Link as Link3, Popover, SiteHeader } from "@openwarelabs/ui";
+
+// blocks/src/shared/BlockBrandLink.tsx
+import { forwardRef } from "react";
+import { Link as Link2 } from "@openwarelabs/ui";
+import { jsxs as jsxs9 } from "react/jsx-runtime";
+var BlockBrandLink = forwardRef(function BlockBrandLink2({ brand, className }, ref) {
+  return /* @__PURE__ */ jsxs9(Link2, { ref, href: brand.href, variant: "standalone", className, children: [
+    brand.logo,
+    brand.name
+  ] });
+});
+
+// blocks/src/headers/Header01/Header01.tsx
+import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs10 } from "react/jsx-runtime";
+function Header01({ brand, links, primaryAction, secondaryLink, labels = {}, className, ...props }) {
+  const [menuOpen, setMenuOpen] = useState3(false);
+  const menuLabel = labels.menu ?? "Menu";
+  useEffect3(() => {
+    const wide = window.matchMedia("(min-width: 761px)");
+    const onChange = () => wide.matches && setMenuOpen(false);
+    wide.addEventListener("change", onChange);
+    return () => wide.removeEventListener("change", onChange);
+  }, []);
+  return /* @__PURE__ */ jsx9("div", { className: cx8("ow-header01", className), ...props, children: /* @__PURE__ */ jsx9(
+    SiteHeader,
+    {
+      brand: /* @__PURE__ */ jsx9(BlockBrandLink, { brand, className: "ow-header01__brand" }),
+      nav: links.map((link, index) => /* @__PURE__ */ jsx9(Link3, { href: link.href, variant: "standalone", "aria-current": link.current ? "page" : void 0, children: link.label }, index)),
+      actions: /* @__PURE__ */ jsxs10(Fragment2, { children: [
+        secondaryLink ? /* @__PURE__ */ jsx9(
+          Link3,
+          {
+            href: secondaryLink.href,
+            variant: "standalone",
+            className: "ow-header01__sign-in",
+            "aria-current": secondaryLink.current ? "page" : void 0,
+            children: secondaryLink.label
+          }
+        ) : null,
+        /* @__PURE__ */ jsx9(BlockActionButton, { action: primaryAction, variant: "primary", size: "sm" }),
+        /* @__PURE__ */ jsx9("span", { className: "ow-header01__phone-menu", children: /* @__PURE__ */ jsx9(
+          Popover,
+          {
+            "aria-label": menuLabel,
+            placement: "bottom-end",
+            width: 240,
+            open: menuOpen,
+            onOpenChange: setMenuOpen,
+            trigger: /* @__PURE__ */ jsx9(Button4, { variant: "ghost", shape: "pill", size: "sm", iconOnly: true, "aria-label": menuLabel, children: /* @__PURE__ */ jsx9(MenuIcon, { size: 16 }) }),
+            children: /* @__PURE__ */ jsxs10("nav", { className: "ow-header01__menu", "aria-label": "Main", children: [
+              links.map((link, index) => /* @__PURE__ */ jsx9(
+                Link3,
+                {
+                  href: link.href,
+                  variant: "standalone",
+                  className: "ow-header01__menu-link",
+                  "aria-current": link.current ? "page" : void 0,
+                  onClick: () => setMenuOpen(false),
+                  children: link.label
+                },
+                index
+              )),
+              secondaryLink ? /* @__PURE__ */ jsx9(
+                Link3,
+                {
+                  href: secondaryLink.href,
+                  variant: "standalone",
+                  className: "ow-header01__menu-link ow-header01__menu-link--sign-in",
+                  onClick: () => setMenuOpen(false),
+                  children: secondaryLink.label
+                }
+              ) : null
+            ] })
+          }
+        ) })
+      ] })
+    }
+  ) });
+}
+
+// blocks/src/headers/Header02/Header02.tsx
+import { Fragment as Fragment3, useEffect as useEffect4, useId as useId7, useState as useState4 } from "react";
+import { Badge, Button as Button5, buttonClassName as buttonClassName3, cx as cx9, Link as Link4, Menu, MenuItem, MenuSeparator, Popover as Popover2, Text as Text7 } from "@openwarelabs/ui";
+import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs11 } from "react/jsx-runtime";
+var navigateTo = (href) => window.location.assign(href);
+function PanelContent({ panel, onNavigate }) {
+  return /* @__PURE__ */ jsxs11("div", { className: "ow-header02__product", children: [
+    /* @__PURE__ */ jsx10("ul", { className: "ow-header02__features", children: panel.features.map((feature, index) => /* @__PURE__ */ jsx10("li", { children: /* @__PURE__ */ jsxs11(Link4, { href: feature.href, variant: "standalone", className: "ow-header02__feature", onClick: onNavigate, children: [
+      feature.icon ? /* @__PURE__ */ jsx10("span", { className: "ow-header02__feature-icon", "aria-hidden": "true", children: feature.icon }) : null,
+      /* @__PURE__ */ jsxs11("span", { className: "ow-header02__feature-text", children: [
+        /* @__PURE__ */ jsx10(Text7, { variant: "label", children: feature.title }),
+        /* @__PURE__ */ jsx10(Text7, { variant: "caption", children: feature.description })
+      ] })
+    ] }) }, index)) }),
+    panel.highlight ? /* @__PURE__ */ jsxs11(Link4, { href: panel.highlight.href, variant: "standalone", className: "ow-header02__news", onClick: onNavigate, children: [
+      panel.highlight.badge ? /* @__PURE__ */ jsx10(Badge, { size: "sm", variant: "active", children: panel.highlight.badge }) : null,
+      /* @__PURE__ */ jsx10(Text7, { variant: "label", children: panel.highlight.title }),
+      /* @__PURE__ */ jsxs11(Text7, { as: "span", tone: "primary", className: "ow-header02__news-link", children: [
+        panel.highlight.linkLabel,
+        /* @__PURE__ */ jsx10(ArrowRightIcon, { size: 14 })
+      ] })
+    ] }) : null
+  ] });
+}
+function Header02({
+  brand,
+  panel,
+  menus = [],
+  links = [],
+  primaryAction,
+  secondaryLink,
+  onNavigate = navigateTo,
+  defaultPanelOpen = false,
+  labels = {},
+  className,
+  ...props
+}) {
+  const [productOpen, setProductOpen] = useState4(defaultPanelOpen);
+  const [phoneOpen, setPhoneOpen] = useState4(false);
+  const phoneId = useId7();
+  const closePhone = () => setPhoneOpen(false);
+  useEffect4(() => {
+    const wide = window.matchMedia("(min-width: 761px)");
+    const onChange = () => wide.matches ? setPhoneOpen(false) : setProductOpen(false);
+    wide.addEventListener("change", onChange);
+    return () => wide.removeEventListener("change", onChange);
+  }, []);
+  return /* @__PURE__ */ jsxs11("header", { className: cx9("ow-header02", className), ...props, children: [
+    /* @__PURE__ */ jsxs11("div", { className: "ow-header02__inner", children: [
+      /* @__PURE__ */ jsx10(BlockBrandLink, { brand, className: "ow-header02__brand" }),
+      /* @__PURE__ */ jsxs11("nav", { className: "ow-header02__nav", "aria-label": "Main", children: [
+        panel ? /* @__PURE__ */ jsx10(
+          Popover2,
+          {
+            className: "ow-header02__popover",
+            "aria-label": panel.label,
+            width: 720,
+            autoFocus: false,
+            open: productOpen,
+            onOpenChange: setProductOpen,
+            trigger: /* @__PURE__ */ jsx10(Button5, { variant: "ghost", shape: "pill", size: "sm", className: "ow-header02__item", endIcon: /* @__PURE__ */ jsx10(ChevronDownIcon, { size: 14 }), children: panel.label }),
+            children: /* @__PURE__ */ jsx10(PanelContent, { panel, onNavigate: () => setProductOpen(false) })
+          }
+        ) : null,
+        menus.map((menu) => /* @__PURE__ */ jsx10(
+          Menu,
+          {
+            label: menu.label,
+            width: 220,
+            trigger: /* @__PURE__ */ jsx10(Button5, { variant: "ghost", shape: "pill", size: "sm", className: "ow-header02__item", endIcon: /* @__PURE__ */ jsx10(ChevronDownIcon, { size: 14 }), children: menu.label }),
+            children: menu.groups.map((group, index) => /* @__PURE__ */ jsxs11(Fragment3, { children: [
+              index > 0 ? /* @__PURE__ */ jsx10(MenuSeparator, {}) : null,
+              group.map((entry) => /* @__PURE__ */ jsx10(MenuItem, { icon: entry.icon, onSelect: () => onNavigate(entry.href), children: entry.label }, entry.label))
+            ] }, index))
+          },
+          menu.label
+        )),
+        links.map((link, index) => /* @__PURE__ */ jsx10(
+          "a",
+          {
+            href: link.href,
+            className: cx9(buttonClassName3({ variant: "ghost", shape: "pill", size: "sm" }), "ow-header02__item"),
+            "aria-current": link.current ? "page" : void 0,
+            children: link.label
+          },
+          index
+        ))
+      ] }),
+      /* @__PURE__ */ jsxs11("div", { className: "ow-header02__actions", children: [
+        secondaryLink ? /* @__PURE__ */ jsx10(
+          "a",
+          {
+            href: secondaryLink.href,
+            className: cx9(buttonClassName3({ variant: "ghost", shape: "pill", size: "sm" }), "ow-header02__item ow-header02__sign-in"),
+            children: secondaryLink.label
+          }
+        ) : null,
+        /* @__PURE__ */ jsx10(BlockActionButton, { action: primaryAction, variant: "primary", size: "sm" }),
+        /* @__PURE__ */ jsx10(
+          Button5,
+          {
+            className: "ow-header02__toggle",
+            variant: "ghost",
+            size: "sm",
+            iconOnly: true,
+            "aria-label": labels.menu ?? "Menu",
+            "aria-expanded": phoneOpen,
+            "aria-controls": phoneId,
+            onClick: () => setPhoneOpen((open) => !open),
+            children: phoneOpen ? /* @__PURE__ */ jsx10(XIcon, { size: 18 }) : /* @__PURE__ */ jsx10(MenuIcon, { size: 18 })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs11("nav", { id: phoneId, className: "ow-header02__panel", "aria-label": "Main", hidden: !phoneOpen, children: [
+      panel ? /* @__PURE__ */ jsxs11(Fragment4, { children: [
+        /* @__PURE__ */ jsx10(Text7, { variant: "overline", as: "p", className: "ow-header02__panel-label", children: panel.label }),
+        /* @__PURE__ */ jsx10("ul", { className: "ow-header02__panel-list", children: panel.features.map((feature, index) => /* @__PURE__ */ jsx10("li", { children: /* @__PURE__ */ jsxs11(Link4, { href: feature.href, variant: "standalone", className: "ow-header02__panel-link", onClick: closePhone, children: [
+          feature.icon,
+          feature.title
+        ] }) }, index)) })
+      ] }) : null,
+      menus.map((menu) => /* @__PURE__ */ jsxs11(Fragment3, { children: [
+        /* @__PURE__ */ jsx10(Text7, { variant: "overline", as: "p", className: "ow-header02__panel-label", children: menu.label }),
+        /* @__PURE__ */ jsx10("ul", { className: "ow-header02__panel-list ow-header02__panel-list--columns", children: menu.groups.flat().map((entry) => /* @__PURE__ */ jsx10("li", { children: /* @__PURE__ */ jsx10(Link4, { href: entry.href, variant: "standalone", className: "ow-header02__panel-link", onClick: closePhone, children: entry.label }) }, entry.label)) })
+      ] }, menu.label)),
+      links.length ? /* @__PURE__ */ jsx10("ul", { className: "ow-header02__panel-list ow-header02__panel-list--ruled", children: links.map((link, index) => /* @__PURE__ */ jsx10("li", { children: /* @__PURE__ */ jsx10(
+        Link4,
+        {
+          href: link.href,
+          variant: "standalone",
+          className: "ow-header02__panel-link",
+          "aria-current": link.current ? "page" : void 0,
+          onClick: closePhone,
+          children: link.label
+        }
+      ) }, index)) }) : null,
+      secondaryLink ? /* @__PURE__ */ jsx10("a", { href: secondaryLink.href, className: cx9(buttonClassName3({ shape: "pill" }), "ow-button--full"), onClick: closePhone, children: secondaryLink.label }) : null
+    ] })
+  ] });
+}
+
+// blocks/src/headers/Header03/Header03.tsx
+import { cx as cx10, Link as Link5, ScrollShadow } from "@openwarelabs/ui";
+import { jsx as jsx11, jsxs as jsxs12 } from "react/jsx-runtime";
+function NavLink({ link }) {
+  return /* @__PURE__ */ jsx11(Link5, { href: link.href, variant: "standalone", className: "ow-header03__link", "aria-current": link.current ? "page" : void 0, children: link.label });
+}
+function Header03({ brand, start, end = [], primaryAction, secondaryLink, labels = {}, className, ...props }) {
+  return /* @__PURE__ */ jsxs12("header", { className: cx10("ow-header03", className), ...props, children: [
+    /* @__PURE__ */ jsxs12("div", { className: "ow-header03__inner", children: [
+      /* @__PURE__ */ jsx11("nav", { className: "ow-header03__nav", "aria-label": labels.start ?? "Primary", children: start.map((link, index) => /* @__PURE__ */ jsx11(NavLink, { link }, index)) }),
+      secondaryLink ? /* @__PURE__ */ jsx11(Link5, { href: secondaryLink.href, variant: "standalone", className: "ow-header03__link ow-header03__phone-only", children: secondaryLink.label }) : null,
+      /* @__PURE__ */ jsx11(BlockBrandLink, { brand, className: "ow-header03__brand" }),
+      /* @__PURE__ */ jsxs12("div", { className: "ow-header03__end", children: [
+        end.length ? /* @__PURE__ */ jsx11("nav", { className: "ow-header03__nav", "aria-label": labels.end ?? "More", children: end.map((link, index) => /* @__PURE__ */ jsx11(NavLink, { link }, index)) }) : null,
+        /* @__PURE__ */ jsxs12("div", { className: "ow-header03__actions", children: [
+          secondaryLink ? /* @__PURE__ */ jsx11(NavLink, { link: secondaryLink }) : null,
+          /* @__PURE__ */ jsx11(BlockActionButton, { action: primaryAction, variant: "primary", size: "sm" })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx11(ScrollShadow, { orientation: "horizontal", size: 24, className: "ow-header03__phone-only ow-header03__phone-nav", children: /* @__PURE__ */ jsx11("nav", { "aria-label": labels.all ?? "Main", children: /* @__PURE__ */ jsx11("ul", { className: "ow-header03__phone-links", children: [...start, ...end].map((link, index) => /* @__PURE__ */ jsx11("li", { children: /* @__PURE__ */ jsx11(NavLink, { link }) }, index)) }) }) })
+  ] });
+}
+
+// blocks/src/headers/Header04/Header04.tsx
+import { useRef as useRef2, useState as useState5 } from "react";
+import { Button as Button6, CloseButton, cx as cx11, Link as Link6, Menu as Menu2, MenuItem as MenuItem2, MenuSeparator as MenuSeparator2, Text as Text8 } from "@openwarelabs/ui";
+import { Fragment as Fragment5, jsx as jsx12, jsxs as jsxs13 } from "react/jsx-runtime";
+var navigateTo2 = (href) => window.location.assign(href);
+function Header04({
+  announcement,
+  onDismiss,
+  defaultDismissed = false,
+  brand,
+  links,
+  primaryAction,
+  secondaryLink,
+  onNavigate = navigateTo2,
+  labels = {},
+  className,
+  ...props
+}) {
+  const [closed, setClosed] = useState5(defaultDismissed);
+  const brandRef = useRef2(null);
+  const dismiss = () => {
+    setClosed(true);
+    onDismiss?.();
+    brandRef.current?.focus();
+  };
+  return /* @__PURE__ */ jsxs13("div", { className: cx11("ow-header04", className), ...props, children: [
+    /* @__PURE__ */ jsx12(
+      "aside",
+      {
+        className: "ow-header04__notice",
+        "aria-label": labels.announcement ?? "Announcement",
+        "data-closed": closed || void 0,
+        "aria-hidden": closed || void 0,
+        children: /* @__PURE__ */ jsx12("div", { className: "ow-header04__clip", children: /* @__PURE__ */ jsxs13("div", { className: "ow-header04__notice-inner", children: [
+          /* @__PURE__ */ jsxs13(Text8, { className: "ow-header04__message", children: [
+            /* @__PURE__ */ jsx12("span", { className: "ow-header04__dot", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx12("strong", { children: announcement.title }),
+            announcement.description ? /* @__PURE__ */ jsxs13(Fragment5, { children: [
+              " ",
+              /* @__PURE__ */ jsx12("span", { className: "ow-header04__detail", children: announcement.description })
+            ] }) : null,
+            announcement.link ? /* @__PURE__ */ jsxs13(Link6, { href: announcement.link.href, className: "ow-header04__link", children: [
+              /* @__PURE__ */ jsx12("span", { className: "ow-header04__link-wide", children: announcement.link.label }),
+              /* @__PURE__ */ jsx12("span", { className: "ow-header04__link-narrow", children: announcement.link.shortLabel ?? announcement.link.label }),
+              /* @__PURE__ */ jsx12(ArrowRightIcon, { size: 14 })
+            ] }) : null
+          ] }),
+          /* @__PURE__ */ jsx12(CloseButton, { size: "sm", label: labels.dismiss ?? "Dismiss the announcement", onClick: dismiss })
+        ] }) })
+      }
+    ),
+    /* @__PURE__ */ jsx12("header", { className: "ow-header04__header", children: /* @__PURE__ */ jsxs13("div", { className: "ow-header04__inner", children: [
+      /* @__PURE__ */ jsx12(BlockBrandLink, { ref: brandRef, brand, className: "ow-header04__brand" }),
+      /* @__PURE__ */ jsx12("nav", { className: "ow-header04__nav", "aria-label": "Main", children: links.map((link, index) => /* @__PURE__ */ jsx12(
+        Link6,
+        {
+          href: link.href,
+          variant: "standalone",
+          className: "ow-header04__link-plain",
+          "aria-current": link.current ? "page" : void 0,
+          children: link.label
+        },
+        index
+      )) }),
+      /* @__PURE__ */ jsxs13("div", { className: "ow-header04__actions", children: [
+        secondaryLink ? /* @__PURE__ */ jsx12(Link6, { href: secondaryLink.href, variant: "standalone", className: "ow-header04__link-plain", children: secondaryLink.label }) : null,
+        /* @__PURE__ */ jsx12(BlockActionButton, { action: primaryAction, variant: "primary", size: "sm" }),
+        /* @__PURE__ */ jsx12("span", { className: "ow-header04__phone-menu", children: /* @__PURE__ */ jsxs13(
+          Menu2,
+          {
+            label: labels.menu ?? "Menu",
+            align: "end",
+            width: 220,
+            trigger: /* @__PURE__ */ jsx12(Button6, { variant: "ghost", size: "sm", iconOnly: true, "aria-label": labels.menu ?? "Menu", children: /* @__PURE__ */ jsx12(MenuIcon, { size: 18 }) }),
+            children: [
+              links.map((link, index) => /* @__PURE__ */ jsx12(MenuItem2, { onSelect: () => onNavigate(link.href), children: link.label }, index)),
+              secondaryLink ? /* @__PURE__ */ jsxs13(Fragment5, { children: [
+                /* @__PURE__ */ jsx12(MenuSeparator2, {}),
+                /* @__PURE__ */ jsx12(MenuItem2, { onSelect: () => onNavigate(secondaryLink.href), children: secondaryLink.label })
+              ] }) : null
+            ]
+          }
+        ) })
+      ] })
+    ] }) })
+  ] });
+}
+
+// blocks/src/headers/Header05/Header05.tsx
+import { useEffect as useEffect5, useId as useId8, useState as useState6 } from "react";
+import { Button as Button7, buttonClassName as buttonClassName4, cx as cx12, Drawer, Link as Link7, Text as Text9 } from "@openwarelabs/ui";
+import { Fragment as Fragment6, jsx as jsx13, jsxs as jsxs14 } from "react/jsx-runtime";
+var narrow = "(max-width: 1024px)";
+function Header05({ brand, links, more, primaryAction, secondaryLink, defaultOpen = false, labels = {}, className, ...props }) {
+  const [open, setOpen] = useState6(defaultOpen);
+  const moreId = useId8();
+  useEffect5(() => {
+    const query = window.matchMedia(narrow);
+    const onChange = () => !query.matches && setOpen(false);
+    query.addEventListener("change", onChange);
+    return () => query.removeEventListener("change", onChange);
+  }, []);
+  const close = () => setOpen(false);
+  return /* @__PURE__ */ jsxs14(Fragment6, { children: [
+    /* @__PURE__ */ jsx13("header", { className: cx12("ow-header05", className), ...props, children: /* @__PURE__ */ jsxs14("div", { className: "ow-header05__inner", children: [
+      /* @__PURE__ */ jsx13(BlockBrandLink, { brand, className: "ow-header05__brand" }),
+      /* @__PURE__ */ jsx13("nav", { className: "ow-header05__nav", "aria-label": "Main", children: links.map((link, index) => /* @__PURE__ */ jsx13(
+        Link7,
+        {
+          href: link.href,
+          variant: "standalone",
+          className: "ow-header05__link",
+          "aria-current": link.current ? "page" : void 0,
+          children: link.label
+        },
+        index
+      )) }),
+      /* @__PURE__ */ jsxs14("div", { className: "ow-header05__actions", children: [
+        secondaryLink ? /* @__PURE__ */ jsx13(Link7, { href: secondaryLink.href, variant: "standalone", className: "ow-header05__link", children: secondaryLink.label }) : null,
+        /* @__PURE__ */ jsx13(BlockActionButton, { action: primaryAction, variant: "primary", size: "sm" }),
+        /* @__PURE__ */ jsx13(
+          Button7,
+          {
+            className: "ow-header05__open",
+            variant: "ghost",
+            size: "sm",
+            iconOnly: true,
+            "aria-label": labels.open ?? "Open menu",
+            "aria-haspopup": "dialog",
+            "aria-expanded": open,
+            onClick: () => setOpen(true),
+            children: /* @__PURE__ */ jsx13(MenuIcon, { size: 18 })
+          }
+        )
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx13(
+      Drawer,
+      {
+        className: "ow-header05__drawer",
+        open,
+        onClose: close,
+        title: labels.title ?? "Menu",
+        side: "right",
+        size: 320,
+        footer: /* @__PURE__ */ jsxs14(Fragment6, { children: [
+          secondaryLink ? /* @__PURE__ */ jsx13("a", { href: secondaryLink.href, className: buttonClassName4({ shape: "pill" }), onClick: close, children: secondaryLink.label }) : null,
+          /* @__PURE__ */ jsx13(BlockActionButton, { action: primaryAction, variant: "primary", size: "md", onAfterClick: close })
+        ] }),
+        children: /* @__PURE__ */ jsxs14("nav", { "aria-label": "Main", children: [
+          /* @__PURE__ */ jsx13("ul", { className: "ow-header05__drawer-list", children: links.map((link, index) => /* @__PURE__ */ jsx13("li", { children: /* @__PURE__ */ jsxs14(
+            Link7,
+            {
+              href: link.href,
+              variant: "standalone",
+              className: "ow-header05__drawer-link",
+              "aria-current": link.current ? "page" : void 0,
+              onClick: close,
+              children: [
+                link.label,
+                link.current ? /* @__PURE__ */ jsx13("span", { className: "ow-header05__current", "aria-hidden": "true" }) : null,
+                /* @__PURE__ */ jsx13(ChevronRightIcon, { size: 16 })
+              ]
+            }
+          ) }, index)) }),
+          more ? /* @__PURE__ */ jsxs14("div", { className: "ow-header05__more", children: [
+            /* @__PURE__ */ jsx13(Text9, { variant: "overline", as: "p", className: "ow-header05__more-label", id: moreId, children: more.title }),
+            /* @__PURE__ */ jsx13("ul", { className: "ow-header05__more-list", "aria-labelledby": moreId, children: more.links.map((link, index) => /* @__PURE__ */ jsx13("li", { children: /* @__PURE__ */ jsx13(Link7, { href: link.href, variant: "standalone", className: "ow-header05__more-link", onClick: close, children: link.label }) }, index)) })
+          ] }) : null
+        ] })
+      }
+    )
+  ] });
+}
+
+// blocks/src/pricing/Pricing01/Pricing01.tsx
+import { useId as useId9 } from "react";
+import { Badge as Badge2, Card, cx as cx13, Link as Link8, SectionHeading, Text as Text10 } from "@openwarelabs/ui";
+import { jsx as jsx14, jsxs as jsxs15 } from "react/jsx-runtime";
+function Pricing01({ eyebrow, title, description, plans, enterprise, note, className, ...props }) {
+  const id = useId9();
+  return /* @__PURE__ */ jsx14("section", { className: cx13("ow-pricing01", className), "aria-labelledby": `${id}-title`, ...props, children: /* @__PURE__ */ jsxs15("div", { className: "ow-pricing01__inner", children: [
+    /* @__PURE__ */ jsx14(SectionHeading, { align: "center", eyebrow, title: /* @__PURE__ */ jsx14("span", { id: `${id}-title`, children: title }), intro: description }),
+    /* @__PURE__ */ jsx14("div", { className: "ow-pricing01__grid", children: plans.map((plan, index) => /* @__PURE__ */ jsxs15(
+      Card,
+      {
+        padding: "none",
+        className: "ow-pricing01__card",
+        "data-recommended": plan.recommended || void 0,
+        "aria-labelledby": `${id}-plan-${index}`,
+        role: "group",
+        children: [
+          /* @__PURE__ */ jsxs15("div", { className: "ow-pricing01__head", children: [
+            /* @__PURE__ */ jsxs15("div", { className: "ow-pricing01__name-row", children: [
+              /* @__PURE__ */ jsx14(Text10, { variant: "card-title", id: `${id}-plan-${index}`, children: plan.name }),
+              plan.badge ? /* @__PURE__ */ jsx14(Badge2, { size: "sm", variant: "active", children: plan.badge }) : null
+            ] }),
+            plan.summary ? /* @__PURE__ */ jsx14(Text10, { variant: "copy", className: "ow-pricing01__summary", children: plan.summary }) : null,
+            /* @__PURE__ */ jsxs15(Text10, { as: "p", variant: "body", tone: "muted", className: "ow-pricing01__price", children: [
+              /* @__PURE__ */ jsx14(Text10, { as: "span", variant: "section-title", tone: "default", className: "ow-pricing01__amount", children: plan.price }),
+              plan.unit
+            ] }),
+            /* @__PURE__ */ jsx14(BlockActionButton, { action: plan.action, variant: plan.recommended ? "primary" : "secondary", size: "md", fullWidth: true })
+          ] }),
+          /* @__PURE__ */ jsxs15("div", { className: "ow-pricing01__body", children: [
+            plan.featuresTitle ? /* @__PURE__ */ jsx14(Text10, { as: "p", variant: "label", children: plan.featuresTitle }) : null,
+            /* @__PURE__ */ jsx14("ul", { className: "ow-pricing01__features", children: plan.features.map((feature, featureIndex) => /* @__PURE__ */ jsxs15(Text10, { as: "li", variant: "body", tone: "soft", children: [
+              /* @__PURE__ */ jsx14(CheckIcon, { size: 16 }),
+              feature
+            ] }, featureIndex)) })
+          ] })
+        ]
+      },
+      index
+    )) }),
+    enterprise ? /* @__PURE__ */ jsxs15("div", { className: "ow-pricing01__enterprise", children: [
+      enterprise.icon ? /* @__PURE__ */ jsx14("span", { className: "ow-pricing01__enterprise-icon", "aria-hidden": "true", children: enterprise.icon }) : null,
+      /* @__PURE__ */ jsxs15(Text10, { variant: "copy", className: "ow-pricing01__enterprise-text", children: [
+        /* @__PURE__ */ jsx14(Text10, { as: "strong", variant: "label", tone: "default", children: enterprise.title }),
+        " ",
+        enterprise.description
+      ] }),
+      /* @__PURE__ */ jsxs15(Link8, { href: enterprise.link.href, variant: "standalone", className: "ow-pricing01__enterprise-link", children: [
+        enterprise.link.label,
+        /* @__PURE__ */ jsx14(ArrowRightIcon, { size: 14 })
+      ] })
+    ] }) : null,
+    note ? /* @__PURE__ */ jsx14(Text10, { as: "p", variant: "caption", align: "center", className: "ow-pricing01__note", children: note }) : null
+  ] }) });
+}
+
+// blocks/src/pricing/Pricing02/Pricing02.tsx
+import { useId as useId10, useState as useState7 } from "react";
+import { Badge as Badge3, cx as cx14, SectionHeading as SectionHeading2, SegmentedControl, Text as Text11, VisuallyHidden } from "@openwarelabs/ui";
+import { jsx as jsx15, jsxs as jsxs16 } from "react/jsx-runtime";
+var priceFor = (plan, period) => "amount" in plan.price ? plan.price : plan.price[period];
+var includes = (name) => `${name} includes`;
+function Pricing02({
+  eyebrow,
+  title,
+  description,
+  plans,
+  periodNote,
+  defaultPeriod = "monthly",
+  onPeriodChange,
+  note,
+  labels = {},
+  className,
+  ...props
+}) {
+  const [period, setPeriod] = useState7(defaultPeriod);
+  const id = useId10();
+  return /* @__PURE__ */ jsx15("section", { className: cx14("ow-pricing02", className), "aria-labelledby": `${id}-title`, ...props, children: /* @__PURE__ */ jsxs16("div", { className: "ow-pricing02__inner", children: [
+    /* @__PURE__ */ jsxs16("div", { className: "ow-pricing02__header", children: [
+      /* @__PURE__ */ jsx15(SectionHeading2, { eyebrow, title: /* @__PURE__ */ jsx15("span", { id: `${id}-title`, children: title }), intro: description }),
+      /* @__PURE__ */ jsxs16("div", { className: "ow-pricing02__switch", children: [
+        /* @__PURE__ */ jsx15(
+          SegmentedControl,
+          {
+            "aria-label": labels.period ?? "Billing period",
+            value: period,
+            onChange: (value) => {
+              setPeriod(value);
+              onPeriodChange?.(value);
+            },
+            options: [
+              { value: "monthly", label: labels.monthly ?? "Monthly" },
+              { value: "yearly", label: labels.yearly ?? "Yearly" }
+            ]
+          }
+        ),
+        periodNote ? /* @__PURE__ */ jsx15(Text11, { as: "p", variant: "caption", children: periodNote }) : null
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx15(VisuallyHidden, { "aria-live": "polite", children: period === "yearly" ? labels.showingYearly ?? "Showing yearly prices." : labels.showingMonthly ?? "Showing monthly prices." }),
+    /* @__PURE__ */ jsx15("div", { className: "ow-pricing02__panel", children: plans.map((plan, index) => {
+      const price = priceFor(plan, period);
+      return /* @__PURE__ */ jsxs16("div", { className: "ow-pricing02__plan", "data-popular": plan.recommended || void 0, children: [
+        /* @__PURE__ */ jsxs16("div", { className: "ow-pricing02__name-row", children: [
+          /* @__PURE__ */ jsx15(Text11, { variant: "card-title", children: plan.name }),
+          plan.badge ? /* @__PURE__ */ jsx15(Badge3, { size: "sm", variant: "active", children: plan.badge }) : null
+        ] }),
+        plan.summary ? /* @__PURE__ */ jsx15(Text11, { variant: "copy", className: "ow-pricing02__summary", children: plan.summary }) : null,
+        /* @__PURE__ */ jsxs16("div", { className: "ow-pricing02__price", children: [
+          /* @__PURE__ */ jsxs16(Text11, { as: "p", variant: "body", tone: "muted", className: "ow-pricing02__figure", children: [
+            /* @__PURE__ */ jsx15(
+              Text11,
+              {
+                as: "span",
+                variant: "section-title",
+                tone: "default",
+                className: price.custom ? "ow-pricing02__amount ow-pricing02__amount--text" : "ow-pricing02__amount",
+                children: price.amount
+              },
+              price.amount
+            ),
+            price.unit
+          ] }),
+          price.billing ? /* @__PURE__ */ jsx15(Text11, { as: "p", variant: "caption", className: "ow-pricing02__billing", children: price.billing }) : null
+        ] }),
+        /* @__PURE__ */ jsx15(BlockActionButton, { action: plan.action, variant: plan.recommended ? "primary" : "secondary", size: "md", fullWidth: true }),
+        /* @__PURE__ */ jsx15("ul", { className: "ow-pricing02__features", "aria-label": (labels.includes ?? includes)(plan.name), children: plan.features.map((feature, featureIndex) => /* @__PURE__ */ jsxs16(Text11, { as: "li", variant: "body", tone: "soft", children: [
+          /* @__PURE__ */ jsx15(CheckIcon, { size: 16 }),
+          feature
+        ] }, featureIndex)) })
+      ] }, index);
+    }) }),
+    note ? /* @__PURE__ */ jsx15(Text11, { as: "p", variant: "caption", align: "center", className: "ow-pricing02__note", children: note }) : null
+  ] }) });
+}
+
+// blocks/src/pricing/Pricing03/Pricing03.tsx
+import { useId as useId11, useState as useState8, useSyncExternalStore } from "react";
+import { Badge as Badge4, cx as cx15, SectionHeading as SectionHeading3, SegmentedControl as SegmentedControl2, Table, Text as Text12, VisuallyHidden as VisuallyHidden2 } from "@openwarelabs/ui";
+import { jsx as jsx16, jsxs as jsxs17 } from "react/jsx-runtime";
+var phoneQuery = "(max-width: 760px)";
+function useIsPhone() {
+  return useSyncExternalStore(
+    (onChange) => {
+      const list = window.matchMedia(phoneQuery);
+      list.addEventListener("change", onChange);
+      return () => list.removeEventListener("change", onChange);
+    },
+    () => window.matchMedia(phoneQuery).matches,
+    () => false
+  );
+}
+var caption = (title) => `${title}, by plan`;
+function Pricing03({ eyebrow, title, description, plans, groups, pricesNote, defaultPlan, note, labels = {}, className, ...props }) {
+  const id = useId11();
+  const isPhone = useIsPhone();
+  const [picked, setPicked] = useState8(() => defaultPlan ?? (plans.find((plan) => plan.recommended) ?? plans[0])?.id ?? "");
+  const shown = isPhone ? plans.filter((plan) => plan.id === picked) : plans;
+  const cell = (value) => {
+    if (value === true) {
+      return /* @__PURE__ */ jsxs17("span", { className: "ow-pricing03__yes", children: [
+        /* @__PURE__ */ jsx16(CheckIcon, { size: 14, strokeWidth: 2.5 }),
+        /* @__PURE__ */ jsx16(VisuallyHidden2, { children: labels.included ?? "Included" })
+      ] });
+    }
+    if (value === false) {
+      return /* @__PURE__ */ jsxs17("span", { className: "ow-pricing03__no", children: [
+        /* @__PURE__ */ jsx16(MinusIcon, { size: 16 }),
+        /* @__PURE__ */ jsx16(VisuallyHidden2, { children: labels.notIncluded ?? "Not included" })
+      ] });
+    }
+    return value;
+  };
+  const columns = (groupTitle) => [
+    {
+      key: "feature",
+      header: groupTitle,
+      render: (row) => /* @__PURE__ */ jsxs17(Text12, { as: "span", variant: "body", className: "ow-pricing03__feature", children: [
+        row.feature,
+        row.note ? /* @__PURE__ */ jsx16(Text12, { variant: "caption", className: "ow-pricing03__feature-note", children: row.note }) : null
+      ] })
+    },
+    ...shown.map((plan) => ({
+      key: plan.id,
+      header: plan.name,
+      render: (row) => cell(row.values[plan.id])
+    }))
+  ];
+  return /* @__PURE__ */ jsx16("section", { className: cx15("ow-pricing03", className), "aria-labelledby": `${id}-title`, ...props, children: /* @__PURE__ */ jsxs17("div", { className: "ow-pricing03__inner", children: [
+    /* @__PURE__ */ jsx16(SectionHeading3, { align: "center", eyebrow, title: /* @__PURE__ */ jsx16("span", { id: `${id}-title`, children: title }), intro: description }),
+    /* @__PURE__ */ jsx16("div", { className: "ow-pricing03__picker", children: /* @__PURE__ */ jsx16(
+      SegmentedControl2,
+      {
+        "aria-label": labels.picker ?? "Plan to compare",
+        fullWidth: true,
+        value: picked,
+        onChange: setPicked,
+        options: plans.map((plan) => ({ value: plan.id, label: plan.name }))
+      }
+    ) }),
+    /* @__PURE__ */ jsxs17("div", { className: "ow-pricing03__plans", children: [
+      pricesNote ? /* @__PURE__ */ jsx16(Text12, { as: "p", variant: "caption", className: "ow-pricing03__plans-label", children: pricesNote }) : null,
+      shown.map((plan) => /* @__PURE__ */ jsxs17("div", { className: "ow-pricing03__plan", children: [
+        /* @__PURE__ */ jsxs17(Text12, { as: "p", variant: "card-title", className: "ow-pricing03__plan-name", children: [
+          plan.name,
+          plan.badge ? /* @__PURE__ */ jsx16(Badge4, { size: "sm", variant: "active", children: plan.badge }) : null
+        ] }),
+        /* @__PURE__ */ jsxs17(Text12, { as: "p", variant: "caption", className: "ow-pricing03__plan-price", children: [
+          /* @__PURE__ */ jsx16(Text12, { as: "strong", variant: "label", tone: "default", className: "ow-pricing03__plan-amount", children: plan.price }),
+          " ",
+          plan.unit
+        ] }),
+        /* @__PURE__ */ jsx16(BlockActionButton, { action: plan.action, variant: plan.recommended ? "primary" : "secondary", size: "sm" })
+      ] }, plan.id))
+    ] }),
+    /* @__PURE__ */ jsx16("div", { className: "ow-pricing03__groups", children: groups.map((group) => /* @__PURE__ */ jsx16(
+      Table,
+      {
+        className: "ow-pricing03__group",
+        caption: (labels.caption ?? caption)(group.title),
+        hideCaption: true,
+        columns: columns(group.title),
+        rows: group.rows.map((row, index) => ({ ...row, id: `${group.title}-${index}` }))
+      },
+      group.title
+    )) }),
+    note ? /* @__PURE__ */ jsx16(Text12, { as: "p", variant: "caption", align: "center", className: "ow-pricing03__note", children: note }) : null
+  ] }) });
+}
+
+// blocks/src/pricing/Pricing04/Pricing04.tsx
+import { useId as useId12 } from "react";
+import { Card as Card2, cx as cx16, SectionHeading as SectionHeading4, Text as Text13 } from "@openwarelabs/ui";
+import { jsx as jsx17, jsxs as jsxs18 } from "react/jsx-runtime";
+function Pricing04({ eyebrow, title, description, product, offer, promises, className, ...props }) {
+  const id = useId12();
+  return /* @__PURE__ */ jsx17("section", { className: cx16("ow-pricing04", className), "aria-labelledby": `${id}-title`, ...props, children: /* @__PURE__ */ jsxs18("div", { className: "ow-pricing04__inner", children: [
+    /* @__PURE__ */ jsx17(SectionHeading4, { align: "center", eyebrow, title: /* @__PURE__ */ jsx17("span", { id: `${id}-title`, children: title }), intro: description }),
+    /* @__PURE__ */ jsxs18(Card2, { padding: "none", className: "ow-pricing04__card", children: [
+      /* @__PURE__ */ jsxs18("div", { className: "ow-pricing04__details", children: [
+        /* @__PURE__ */ jsx17(Text13, { variant: "heading", children: product.name }),
+        product.description ? /* @__PURE__ */ jsx17(Text13, { variant: "copy", className: "ow-pricing04__description", children: product.description }) : null,
+        product.featuresTitle ? /* @__PURE__ */ jsx17(Text13, { as: "p", variant: "label", tone: "primary", className: "ow-pricing04__included", children: product.featuresTitle }) : null,
+        /* @__PURE__ */ jsx17("ul", { className: "ow-pricing04__features", children: product.features.map((feature, index) => /* @__PURE__ */ jsxs18(Text13, { as: "li", variant: "body", tone: "soft", children: [
+          /* @__PURE__ */ jsx17(CheckIcon, { size: 16 }),
+          feature
+        ] }, index)) })
+      ] }),
+      /* @__PURE__ */ jsxs18("div", { className: "ow-pricing04__offer", children: [
+        offer.label ? /* @__PURE__ */ jsx17(Text13, { as: "p", variant: "label", tone: "soft", children: offer.label }) : null,
+        /* @__PURE__ */ jsxs18(Text13, { as: "p", variant: "label", tone: "muted", className: "ow-pricing04__price", children: [
+          /* @__PURE__ */ jsx17(Text13, { as: "span", variant: "page-title", tone: "default", className: "ow-pricing04__amount", children: offer.price }),
+          offer.currency
+        ] }),
+        offer.unit ? /* @__PURE__ */ jsx17(Text13, { variant: "body", tone: "muted", className: "ow-pricing04__unit", children: offer.unit }) : null,
+        /* @__PURE__ */ jsx17(BlockActionButton, { action: offer.action, variant: "primary", fullWidth: true }),
+        offer.note ? /* @__PURE__ */ jsx17(Text13, { as: "p", variant: "caption", className: "ow-pricing04__fine", children: offer.note }) : null
+      ] })
+    ] }),
+    promises?.length ? /* @__PURE__ */ jsx17("ul", { className: "ow-pricing04__promises", children: promises.map((promise, index) => /* @__PURE__ */ jsxs18(Text13, { as: "li", variant: "body", tone: "muted", children: [
+      promise.icon,
+      promise.text
+    ] }, index)) }) : null
+  ] }) });
+}
+
+// blocks/src/pricing/Pricing05/Pricing05.tsx
+import { useId as useId13, useMemo, useState as useState9 } from "react";
+import { Card as Card3, cx as cx17, SectionHeading as SectionHeading5, Slider, Text as Text14 } from "@openwarelabs/ui";
+import { Fragment as Fragment7, jsx as jsx18, jsxs as jsxs19 } from "react/jsx-runtime";
+function estimate(tiers, units) {
+  const lines = tiers.map((tier) => {
+    const count = Math.max(0, Math.min(units, tier.to) - tier.from);
+    return { tier, count, cost: count * tier.price };
+  });
+  return { lines, total: lines.reduce((sum, line) => sum + line.cost, 0) };
+}
+var capitalise = (text) => text.charAt(0).toUpperCase() + text.slice(1);
+function Pricing05({
+  eyebrow,
+  title,
+  description,
+  tiers,
+  aside,
+  estimate: words,
+  max,
+  step = max / 200,
+  defaultValue,
+  marks = [0, max / 4, max / 2, max * 3 / 4, max],
+  currency = "EUR",
+  locale,
+  action,
+  note,
+  labels = {},
+  className,
+  ...props
+}) {
+  const id = useId13();
+  const [units, setUnits] = useState9(defaultValue);
+  const { lines, total } = estimate(tiers, units);
+  const current = tiers.findIndex((tier) => units <= tier.to);
+  const unit = labels.unit ?? "unit";
+  const plural = labels.units ?? "units";
+  const perMonth = labels.perMonth ?? `${plural} a month`;
+  const format = useMemo(() => {
+    const number = new Intl.NumberFormat(locale);
+    const money = new Intl.NumberFormat(locale, { style: "currency", currency });
+    const unitPrice = new Intl.NumberFormat(locale, { style: "currency", currency, minimumFractionDigits: 2, maximumFractionDigits: 3 });
+    return { number: (value) => number.format(value), money: (value) => money.format(value), unitPrice: (value) => unitPrice.format(value) };
+  }, [locale, currency]);
+  const rangeLabel = (tier) => {
+    if (tier.from === 0) return `First ${format.number(tier.to)} ${plural}`;
+    if (tier.to === Infinity) return `Over ${format.number(tier.from)}`;
+    return `${format.number(tier.from + 1)} to ${format.number(tier.to)}`;
+  };
+  const mark = (value) => value === 0 ? "0" : value >= 1e3 && value % 1e3 === 0 ? `${value / 1e3}k` : format.number(value);
+  return /* @__PURE__ */ jsx18("section", { className: cx17("ow-pricing05", className), "aria-labelledby": `${id}-title`, ...props, children: /* @__PURE__ */ jsxs19("div", { className: "ow-pricing05__inner", children: [
+    /* @__PURE__ */ jsxs19("div", { children: [
+      /* @__PURE__ */ jsx18(SectionHeading5, { eyebrow, title: /* @__PURE__ */ jsx18("span", { id: `${id}-title`, children: title }), intro: description }),
+      /* @__PURE__ */ jsx18("ul", { className: "ow-pricing05__tiers", "aria-label": labels.tiers ?? `Price per ${unit}`, children: tiers.map((tier, index) => /* @__PURE__ */ jsxs19("li", { className: "ow-pricing05__tier", "data-current": index === current || void 0, children: [
+        /* @__PURE__ */ jsx18("span", { className: "ow-pricing05__tier-dot", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx18(Text14, { variant: index === current ? "label" : "body", tone: index === current ? "default" : "soft", children: rangeLabel(tier) }),
+        /* @__PURE__ */ jsx18(Text14, { variant: "label", className: "ow-pricing05__tier-price", children: tier.price === 0 ? labels.free ?? "Free" : /* @__PURE__ */ jsxs19(Fragment7, { children: [
+          format.unitPrice(tier.price),
+          /* @__PURE__ */ jsxs19(Text14, { as: "small", variant: "caption", className: "ow-pricing05__tier-unit", children: [
+            "a ",
+            unit
+          ] })
+        ] }) })
+      ] }, tier.from)) }),
+      aside ? /* @__PURE__ */ jsx18(Text14, { variant: "copy", className: "ow-pricing05__aside", children: aside }) : null
+    ] }),
+    /* @__PURE__ */ jsxs19(Card3, { padding: "none", className: "ow-pricing05__card", children: [
+      /* @__PURE__ */ jsx18(Text14, { variant: "card-title", children: words.title }),
+      words.description ? /* @__PURE__ */ jsx18(Text14, { variant: "copy", className: "ow-pricing05__card-intro", children: words.description }) : null,
+      /* @__PURE__ */ jsxs19(Text14, { as: "p", variant: "heading", className: "ow-pricing05__runs", "aria-hidden": "true", children: [
+        format.number(units),
+        " ",
+        /* @__PURE__ */ jsx18(Text14, { as: "small", variant: "body", tone: "muted", className: "ow-pricing05__runs-unit", children: perMonth })
+      ] }),
+      /* @__PURE__ */ jsx18(
+        Slider,
+        {
+          "aria-label": labels.slider ?? capitalise(perMonth),
+          showValue: false,
+          min: 0,
+          max,
+          step,
+          value: units,
+          onChange: setUnits,
+          formatValue: (value) => `${format.number(value)} ${plural}, about ${format.money(estimate(tiers, value).total)} a month`
+        }
+      ),
+      /* @__PURE__ */ jsx18("div", { className: "ow-pricing05__scale", "aria-hidden": "true", children: marks.map((value) => /* @__PURE__ */ jsx18("span", { children: mark(value) }, value)) }),
+      /* @__PURE__ */ jsx18("div", { className: "ow-pricing05__breakdown", children: lines.map(({ tier, count, cost }) => /* @__PURE__ */ jsxs19(Text14, { as: "div", variant: "body", tone: "soft", className: "ow-pricing05__line", "data-idle": count === 0 || void 0, children: [
+        /* @__PURE__ */ jsxs19("span", { children: [
+          format.number(count),
+          " ",
+          plural,
+          " ",
+          tier.price === 0 ? (labels.free ?? "Free").toLowerCase() : `at ${format.unitPrice(tier.price)}`
+        ] }),
+        /* @__PURE__ */ jsx18("span", { children: format.money(cost) })
+      ] }, tier.from)) }),
+      /* @__PURE__ */ jsxs19("div", { className: "ow-pricing05__total", children: [
+        /* @__PURE__ */ jsxs19(Text14, { as: "p", variant: "label", children: [
+          words.totalLabel,
+          words.totalNote ? /* @__PURE__ */ jsx18(Text14, { as: "small", variant: "caption", className: "ow-pricing05__total-note", children: words.totalNote }) : null
+        ] }),
+        /* @__PURE__ */ jsx18(Text14, { as: "p", variant: "section-title", className: "ow-pricing05__total-amount", children: format.money(total) })
+      ] }),
+      /* @__PURE__ */ jsx18(BlockActionButton, { action, variant: "primary", fullWidth: true, className: "ow-pricing05__action" }),
+      note ? /* @__PURE__ */ jsx18(Text14, { as: "p", variant: "caption", align: "center", className: "ow-pricing05__fine", children: note }) : null
+    ] })
+  ] }) });
+}
+
+// blocks/src/features/Features01/Features01.tsx
+import { useId as useId14 } from "react";
+import { cx as cx18, SectionHeading as SectionHeading6, Text as Text15 } from "@openwarelabs/ui";
+import { jsx as jsx19, jsxs as jsxs20 } from "react/jsx-runtime";
+function Features01({ eyebrow, title, description, features, footer, className, ...props }) {
+  const id = useId14();
+  return /* @__PURE__ */ jsx19("section", { className: cx18("ow-features01", className), "aria-labelledby": `${id}-title`, ...props, children: /* @__PURE__ */ jsxs20("div", { className: "ow-features01__inner", children: [
+    /* @__PURE__ */ jsx19(SectionHeading6, { align: "center", eyebrow, title: /* @__PURE__ */ jsx19("span", { id: `${id}-title`, children: title }), intro: description }),
+    /* @__PURE__ */ jsx19("ul", { className: "ow-features01__grid", children: features.map((feature, index) => /* @__PURE__ */ jsxs20("li", { className: "ow-features01__item", children: [
+      feature.icon ? /* @__PURE__ */ jsx19("span", { className: "ow-features01__icon", "aria-hidden": "true", children: feature.icon }) : null,
+      /* @__PURE__ */ jsx19(Text15, { variant: "card-title", className: "ow-features01__title", children: feature.title }),
+      /* @__PURE__ */ jsx19(Text15, { variant: "copy", className: "ow-features01__text", children: feature.description })
+    ] }, index)) }),
+    footer ? /* @__PURE__ */ jsx19(Text15, { variant: "copy", align: "center", className: "ow-features01__more", children: footer }) : null
+  ] }) });
+}
+
+// blocks/src/features/Features02/Features02.tsx
+import { useId as useId15 } from "react";
+import { cx as cx19, DotGrid as DotGrid2, Link as Link9, SectionHeading as SectionHeading7, Text as Text16 } from "@openwarelabs/ui";
+import { jsx as jsx20, jsxs as jsxs21 } from "react/jsx-runtime";
+function Features02({ eyebrow, title, description, rows, className, ...props }) {
+  const id = useId15();
+  return /* @__PURE__ */ jsx20("section", { className: cx19("ow-features02", className), "aria-labelledby": `${id}-title`, ...props, children: /* @__PURE__ */ jsxs21("div", { className: "ow-features02__inner", children: [
+    /* @__PURE__ */ jsx20(SectionHeading7, { eyebrow, title: /* @__PURE__ */ jsx20("span", { id: `${id}-title`, children: title }), intro: description }),
+    /* @__PURE__ */ jsx20("div", { className: "ow-features02__rows", children: rows.map((row, index) => /* @__PURE__ */ jsxs21("article", { className: "ow-features02__row", "aria-labelledby": `${id}-row-${index}`, children: [
+      /* @__PURE__ */ jsxs21("div", { className: "ow-features02__copy", children: [
+        row.kicker || row.icon ? /* @__PURE__ */ jsxs21(Text16, { variant: "label", tone: "primary", className: "ow-features02__kicker", children: [
+          row.icon,
+          row.kicker
+        ] }) : null,
+        /* @__PURE__ */ jsx20(Text16, { variant: "heading", id: `${id}-row-${index}`, className: "ow-features02__title", children: row.title }),
+        /* @__PURE__ */ jsx20(Text16, { variant: "lead", className: "ow-features02__text", children: row.description }),
+        row.points?.length ? /* @__PURE__ */ jsx20("ul", { className: "ow-features02__points", children: row.points.map((point, pointIndex) => /* @__PURE__ */ jsxs21(Text16, { as: "li", tone: "soft", className: "ow-features02__point", children: [
+          /* @__PURE__ */ jsx20(CheckIcon, { size: 16 }),
+          point
+        ] }, pointIndex)) }) : null,
+        row.link ? /* @__PURE__ */ jsxs21(Link9, { href: row.link.href, variant: "standalone", className: "ow-features02__link", children: [
+          row.link.label,
+          " \u2192"
+        ] }) : null
+      ] }),
+      /* @__PURE__ */ jsx20(
+        DotGrid2,
+        {
+          className: "ow-features02__stage",
+          role: row.visualLabel ? "img" : void 0,
+          "aria-label": row.visualLabel,
+          children: row.visual
+        }
+      )
+    ] }, index)) })
+  ] }) });
+}
+
+// blocks/src/features/Features03/Features03.tsx
+import { useId as useId16 } from "react";
+import { cx as cx20, SectionHeading as SectionHeading8, Text as Text17 } from "@openwarelabs/ui";
+import { jsx as jsx21, jsxs as jsxs22 } from "react/jsx-runtime";
+function Features03({ eyebrow, title, description, cards, className, ...props }) {
+  const id = useId16();
+  return /* @__PURE__ */ jsx21("section", { className: cx20("ow-features03", className), "aria-labelledby": `${id}-title`, ...props, children: /* @__PURE__ */ jsxs22("div", { className: "ow-features03__inner", children: [
+    /* @__PURE__ */ jsxs22("div", { className: "ow-features03__header", children: [
+      /* @__PURE__ */ jsx21(SectionHeading8, { eyebrow, title: /* @__PURE__ */ jsx21("span", { id: `${id}-title`, children: title }) }),
+      description ? /* @__PURE__ */ jsx21(Text17, { variant: "lead", className: "ow-features03__intro", children: description }) : null
+    ] }),
+    /* @__PURE__ */ jsx21("div", { className: "ow-features03__grid", children: cards.map((card, index) => {
+      const featured = index === 0;
+      return /* @__PURE__ */ jsxs22(
+        "article",
+        {
+          className: cx20(
+            "ow-features03__card",
+            featured && "ow-features03__card--featured",
+            index === cards.length - 1 && index > 0 && "ow-features03__card--last"
+          ),
+          "aria-labelledby": `${id}-card-${index}`,
+          children: [
+            /* @__PURE__ */ jsxs22("div", { className: "ow-features03__copy", children: [
+              /* @__PURE__ */ jsx21(Text17, { variant: featured ? "heading" : "card-title", id: `${id}-card-${index}`, children: card.title }),
+              /* @__PURE__ */ jsx21(Text17, { variant: featured ? "lead" : "copy", className: "ow-features03__text", children: card.description })
+            ] }),
+            /* @__PURE__ */ jsx21("div", { className: "ow-features03__visual", role: card.visualLabel ? "img" : void 0, "aria-label": card.visualLabel, children: card.visual })
+          ]
+        },
+        index
+      );
+    }) })
+  ] }) });
+}
+
+// blocks/src/features/Features04/Features04.tsx
+import { useId as useId17 } from "react";
+import { cx as cx21, SectionHeading as SectionHeading9, Tab, TabList, TabPanel, Tabs, Text as Text18 } from "@openwarelabs/ui";
+import { jsx as jsx22, jsxs as jsxs23 } from "react/jsx-runtime";
+function Features04({ eyebrow, title, description, tabs, defaultTab = 0, labels = {}, className, ...props }) {
+  const id = useId17();
+  return /* @__PURE__ */ jsx22("section", { className: cx21("ow-features04", className), "aria-labelledby": `${id}-title`, ...props, children: /* @__PURE__ */ jsxs23("div", { className: "ow-features04__inner", children: [
+    /* @__PURE__ */ jsx22(SectionHeading9, { align: "center", eyebrow, title: /* @__PURE__ */ jsx22("span", { id: `${id}-title`, children: title }), intro: description }),
+    /* @__PURE__ */ jsxs23(Tabs, { defaultValue: String(defaultTab), className: "ow-features04__tabs", children: [
+      /* @__PURE__ */ jsx22(TabList, { "aria-label": labels.tabs ?? "Features", children: tabs.map((tab, index) => /* @__PURE__ */ jsx22(Tab, { value: String(index), icon: tab.icon, children: tab.label }, index)) }),
+      tabs.map((tab, index) => /* @__PURE__ */ jsxs23(TabPanel, { value: String(index), className: "ow-features04__panel", children: [
+        tab.caption ? /* @__PURE__ */ jsx22(Text18, { variant: "copy", align: "center", className: "ow-features04__caption", children: tab.caption }) : null,
+        tab.visual
+      ] }, index))
+    ] })
+  ] }) });
+}
+
+// blocks/src/features/Features05/Features05.tsx
+import { useId as useId18 } from "react";
+import { cx as cx22, Link as Link10, SectionHeading as SectionHeading10, Text as Text19 } from "@openwarelabs/ui";
+import { jsx as jsx23, jsxs as jsxs24 } from "react/jsx-runtime";
+function Features05({ eyebrow, title, description, items, primaryAction, secondaryLink, visual, className, ...props }) {
+  const id = useId18();
+  return /* @__PURE__ */ jsx23("section", { className: cx22("ow-features05", className), "aria-labelledby": `${id}-title`, ...props, children: /* @__PURE__ */ jsxs24("div", { className: "ow-features05__inner", children: [
+    /* @__PURE__ */ jsxs24("div", { className: "ow-features05__copy", children: [
+      /* @__PURE__ */ jsx23(SectionHeading10, { eyebrow, title: /* @__PURE__ */ jsx23("span", { id: `${id}-title`, children: title }), intro: description }),
+      /* @__PURE__ */ jsx23("ul", { className: "ow-features05__list", children: items.map((item, index) => /* @__PURE__ */ jsxs24(Text19, { as: "li", tone: "soft", className: "ow-features05__item", children: [
+        /* @__PURE__ */ jsx23("span", { className: "ow-features05__tick", "aria-hidden": "true", children: /* @__PURE__ */ jsx23(CheckIcon, { size: 12, strokeWidth: 3 }) }),
+        item
+      ] }, index)) }),
+      primaryAction || secondaryLink ? /* @__PURE__ */ jsxs24("div", { className: "ow-features05__actions", children: [
+        primaryAction ? /* @__PURE__ */ jsx23(BlockActionButton, { action: primaryAction, variant: "primary" }) : null,
+        secondaryLink ? /* @__PURE__ */ jsx23(Link10, { href: secondaryLink.href, variant: "standalone", children: secondaryLink.label }) : null
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ jsx23("div", { className: "ow-features05__visual", children: visual })
+  ] }) });
+}
+
+// blocks/src/footers/Footer01/Footer01.tsx
+import { useEffect as useEffect6, useId as useId20, useState as useState10 } from "react";
+import { cx as cx23, Link as Link12, SegmentedControl as SegmentedControl3, Separator, Text as Text21 } from "@openwarelabs/ui";
+
+// blocks/src/shared/FooterColumns.tsx
+import { useId as useId19 } from "react";
+import { Link as Link11, Text as Text20 } from "@openwarelabs/ui";
+import { Fragment as Fragment8, jsx as jsx24, jsxs as jsxs25 } from "react/jsx-runtime";
+function FooterColumns({ columns, headingClassName, listClassName, badgeClassName }) {
+  const id = useId19();
+  return /* @__PURE__ */ jsx24(Fragment8, { children: columns.map((column, index) => /* @__PURE__ */ jsxs25("nav", { "aria-labelledby": `${id}-${index}`, children: [
+    /* @__PURE__ */ jsx24(Text20, { variant: "label", as: "h2", id: `${id}-${index}`, className: headingClassName, children: column.title }),
+    /* @__PURE__ */ jsx24("ul", { className: listClassName, children: column.links.map((link, linkIndex) => /* @__PURE__ */ jsxs25("li", { children: [
+      /* @__PURE__ */ jsx24(Link11, { href: link.href, variant: "standalone", children: link.label }),
+      link.badge ? /* @__PURE__ */ jsx24(Text20, { variant: "badge", className: badgeClassName, children: link.badge }) : null
+    ] }, linkIndex)) })
+  ] }, index)) });
+}
+
+// blocks/src/footers/Footer01/Footer01.tsx
+import { jsx as jsx25, jsxs as jsxs26 } from "react/jsx-runtime";
+var currentTheme = () => typeof document === "undefined" ? "system" : document.documentElement.dataset.theme ?? "system";
+function useTheme() {
+  const [theme, setTheme] = useState10(currentTheme);
+  useEffect6(() => {
+    const observer = new MutationObserver(() => setTheme(currentTheme()));
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme"] });
+    return () => observer.disconnect();
+  }, []);
+  const choose = (value) => {
+    document.documentElement.dataset.theme = value;
+    setTheme(value);
+  };
+  return [theme, choose];
+}
+function Footer01({ brand, description, status, columns, legal, legalLinks = [], themeSwitch = false, labels = {}, className, ...props }) {
+  const [theme, setTheme] = useTheme();
+  const themeId = useId20();
+  const home = labels.home ?? (typeof brand.name === "string" ? `${brand.name} home` : void 0);
+  return /* @__PURE__ */ jsx25("footer", { className: cx23("ow-footer01", className), ...props, children: /* @__PURE__ */ jsxs26("div", { className: "ow-footer01__inner", children: [
+    /* @__PURE__ */ jsxs26("div", { className: "ow-footer01__top", children: [
+      /* @__PURE__ */ jsxs26("div", { className: "ow-footer01__brand", children: [
+        /* @__PURE__ */ jsxs26(Link12, { href: brand.href, variant: "standalone", className: "ow-footer01__logo", "aria-label": home, children: [
+          brand.logo,
+          /* @__PURE__ */ jsx25(Text21, { variant: "dialog-title", as: "span", children: brand.name })
+        ] }),
+        description ? /* @__PURE__ */ jsx25(Text21, { variant: "copy", children: description }) : null,
+        status ? /* @__PURE__ */ jsxs26(Link12, { href: status.href, variant: "standalone", className: "ow-footer01__status", children: [
+          /* @__PURE__ */ jsx25("span", { className: "ow-footer01__status-dot", "aria-hidden": "true" }),
+          status.label
+        ] }) : null
+      ] }),
+      /* @__PURE__ */ jsx25(FooterColumns, { columns, headingClassName: "ow-footer01__heading", listClassName: "ow-footer01__links", badgeClassName: "ow-footer01__new" })
+    ] }),
+    /* @__PURE__ */ jsx25(Separator, {}),
+    /* @__PURE__ */ jsxs26("div", { className: "ow-footer01__bottom", children: [
+      /* @__PURE__ */ jsxs26(Text21, { variant: "caption", as: "p", className: "ow-footer01__legal", children: [
+        /* @__PURE__ */ jsx25("span", { children: legal }),
+        legalLinks.map((link, index) => /* @__PURE__ */ jsx25(Link12, { href: link.href, variant: "muted", children: link.label }, index))
+      ] }),
+      themeSwitch ? /* @__PURE__ */ jsxs26("div", { className: "ow-footer01__theme", children: [
+        /* @__PURE__ */ jsx25(Text21, { variant: "caption", id: themeId, children: labels.theme ?? "Theme" }),
+        /* @__PURE__ */ jsx25(
+          SegmentedControl3,
+          {
+            size: "sm",
+            "aria-labelledby": themeId,
+            options: [
+              { value: "light", label: null, icon: /* @__PURE__ */ jsx25(SunIcon, { size: 15 }), "aria-label": labels.light ?? "Light" },
+              { value: "dark", label: null, icon: /* @__PURE__ */ jsx25(MoonIcon, { size: 15 }), "aria-label": labels.dark ?? "Dark" },
+              { value: "system", label: null, icon: /* @__PURE__ */ jsx25(MonitorIcon, { size: 15 }), "aria-label": labels.system ?? "Match the system" }
+            ],
+            value: theme,
+            onChange: setTheme
+          }
+        )
+      ] }) : null
+    ] })
+  ] }) });
+}
+
+// blocks/src/footers/Footer02/Footer02.tsx
+import { cx as cx24, Link as Link13, Text as Text22 } from "@openwarelabs/ui";
+import { jsx as jsx26, jsxs as jsxs27 } from "react/jsx-runtime";
+function Footer02({ brand, links, legal, labels = {}, className, ...props }) {
+  return /* @__PURE__ */ jsx26("footer", { className: cx24("ow-footer02", className), ...props, children: /* @__PURE__ */ jsxs27("div", { className: "ow-footer02__inner", children: [
+    /* @__PURE__ */ jsx26(Link13, { href: brand.href, className: "ow-footer02__logo", "aria-label": labels.home ?? (typeof brand.name === "string" ? `${brand.name} home` : void 0), children: brand.logo }),
+    /* @__PURE__ */ jsx26("nav", { "aria-label": labels.nav ?? "Footer", children: /* @__PURE__ */ jsx26("ul", { className: "ow-footer02__links", children: links.map((link, index) => /* @__PURE__ */ jsx26("li", { children: /* @__PURE__ */ jsx26(Link13, { href: link.href, variant: "standalone", children: link.label }) }, index)) }) }),
+    /* @__PURE__ */ jsx26(Text22, { variant: "caption", as: "p", children: legal })
+  ] }) });
+}
+
+// blocks/src/footers/Footer03/Footer03.tsx
+import { useId as useId21, useRef as useRef3, useState as useState11 } from "react";
+import { Button as Button8, cx as cx25, Input as Input2, Link as Link14, Separator as Separator2, Text as Text23 } from "@openwarelabs/ui";
+import { jsx as jsx27, jsxs as jsxs28 } from "react/jsx-runtime";
+var emailPattern2 = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+function Footer03({ newsletter, brand, description, columns, legal, legalLinks = [], labels = {}, className, ...props }) {
+  const [email, setEmail] = useState11("");
+  const [error, setError] = useState11("");
+  const [sending, setSending] = useState11(false);
+  const [sentTo, setSentTo] = useState11("");
+  const input = useRef3(null);
+  const id = useId21();
+  const subscribe = async (event) => {
+    event.preventDefault();
+    const address = email.trim();
+    if (!address) setError(labels.empty ?? "Enter your email address.");
+    else if (!emailPattern2.test(address)) setError(labels.invalid ?? "That doesn't look like an email address. Check it for a typo.");
+    else {
+      setError("");
+      setSending(true);
+      try {
+        await newsletter.onSubmit(address);
+        setSentTo(address);
+        return;
+      } catch (failure) {
+        setError(failure instanceof Error && failure.message ? failure.message : labels.failed ?? "That didn't go through. Try again in a moment.");
+      } finally {
+        setSending(false);
+      }
+    }
+    input.current?.focus();
+  };
+  const startAgain = () => {
+    setSentTo("");
+    setEmail("");
+    window.setTimeout(() => input.current?.focus());
+  };
+  return /* @__PURE__ */ jsx27("footer", { className: cx25("ow-footer03", className), ...props, children: /* @__PURE__ */ jsxs28("div", { className: "ow-footer03__inner", children: [
+    /* @__PURE__ */ jsxs28("section", { className: "ow-footer03__signup", "aria-labelledby": `${id}-title`, children: [
+      /* @__PURE__ */ jsxs28("div", { children: [
+        /* @__PURE__ */ jsx27(Text23, { variant: "heading", as: "h2", id: `${id}-title`, children: newsletter.title }),
+        newsletter.description ? /* @__PURE__ */ jsx27(Text23, { variant: "copy", className: "ow-footer03__intro", children: newsletter.description }) : null
+      ] }),
+      sentTo ? /* @__PURE__ */ jsxs28("div", { className: "ow-footer03__done", role: "status", children: [
+        /* @__PURE__ */ jsx27(CircleCheckIcon, { size: 18 }),
+        /* @__PURE__ */ jsxs28("span", { className: "ow-footer03__done-text", children: [
+          /* @__PURE__ */ jsx27(Text23, { variant: "label", children: newsletter.successTitle }),
+          newsletter.successDescription ? /* @__PURE__ */ jsx27(Text23, { variant: "body", as: "span", tone: "soft", className: "ow-footer03__done-detail", children: newsletter.successDescription(sentTo) }) : null
+        ] }),
+        /* @__PURE__ */ jsx27(Button8, { size: "sm", variant: "ghost", onClick: startAgain, children: labels.change ?? "Change" })
+      ] }) : /* @__PURE__ */ jsxs28("form", { noValidate: true, onSubmit: subscribe, children: [
+        /* @__PURE__ */ jsxs28("div", { className: "ow-footer03__row", children: [
+          /* @__PURE__ */ jsx27(
+            Input2,
+            {
+              ref: input,
+              type: "email",
+              autoComplete: "email",
+              placeholder: labels.placeholder ?? "you@example.com",
+              "aria-label": labels.email ?? "Email address",
+              "aria-describedby": `${id}-note`,
+              className: "ow-footer03__email",
+              startContent: /* @__PURE__ */ jsx27(MailIcon, { size: 16 }),
+              isInvalid: Boolean(error),
+              value: email,
+              onChange: (event) => {
+                setEmail(event.target.value);
+                if (error) setError("");
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx27(Button8, { type: "submit", variant: "primary", shape: "pill", loading: sending, endIcon: newsletter.submitIcon, children: newsletter.submitLabel })
+        ] }),
+        /* @__PURE__ */ jsx27(
+          Text23,
+          {
+            variant: "caption",
+            as: "p",
+            id: `${id}-note`,
+            tone: error ? "danger" : void 0,
+            className: "ow-footer03__note",
+            "aria-live": "polite",
+            children: error || newsletter.note
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs28("div", { className: "ow-footer03__links", children: [
+      /* @__PURE__ */ jsxs28("div", { className: "ow-footer03__brand", children: [
+        /* @__PURE__ */ jsxs28(
+          Link14,
+          {
+            href: brand.href,
+            variant: "standalone",
+            className: "ow-footer03__logo",
+            "aria-label": labels.home ?? (typeof brand.name === "string" ? `${brand.name} home` : void 0),
+            children: [
+              brand.logo,
+              /* @__PURE__ */ jsx27(Text23, { variant: "dialog-title", as: "span", children: brand.name })
+            ]
+          }
+        ),
+        description ? /* @__PURE__ */ jsx27(Text23, { variant: "copy", className: "ow-footer03__line", children: description }) : null
+      ] }),
+      /* @__PURE__ */ jsx27(FooterColumns, { columns, headingClassName: "ow-footer03__heading", listClassName: "ow-footer03__list" })
+    ] }),
+    /* @__PURE__ */ jsx27(Separator2, {}),
+    /* @__PURE__ */ jsxs28("div", { className: "ow-footer03__bottom", children: [
+      /* @__PURE__ */ jsx27(Text23, { variant: "caption", as: "p", children: legal }),
+      legalLinks.length ? /* @__PURE__ */ jsx27(Text23, { variant: "caption", as: "ul", className: "ow-footer03__legal", children: legalLinks.map((link, index) => /* @__PURE__ */ jsx27("li", { children: /* @__PURE__ */ jsx27(Link14, { href: link.href, variant: "muted", children: link.label }) }, index)) }) : null
+    ] })
+  ] }) });
+}
+
+// blocks/src/footers/Footer04/Footer04.tsx
+import { cx as cx26, Link as Link15, Text as Text24 } from "@openwarelabs/ui";
+import { Fragment as Fragment9, jsx as jsx28, jsxs as jsxs29 } from "react/jsx-runtime";
+function Footer04({ title, titleMuted, primaryAction, columns, legal, legalLinks = [], wordmark, className, ...props }) {
+  return /* @__PURE__ */ jsx28("footer", { className: cx26("ow-footer04", className), ...props, children: /* @__PURE__ */ jsxs29("div", { className: "ow-footer04__inner", children: [
+    /* @__PURE__ */ jsxs29("div", { className: "ow-footer04__top", children: [
+      /* @__PURE__ */ jsxs29("div", { className: "ow-footer04__pitch", children: [
+        /* @__PURE__ */ jsxs29(Text24, { variant: "heading", as: "p", children: [
+          title,
+          titleMuted ? /* @__PURE__ */ jsxs29(Fragment9, { children: [
+            " ",
+            /* @__PURE__ */ jsx28(Text24, { variant: "heading", as: "span", tone: "muted", children: titleMuted })
+          ] }) : null
+        ] }),
+        primaryAction ? /* @__PURE__ */ jsx28(BlockActionButton, { action: primaryAction, variant: "primary", size: "md" }) : null
+      ] }),
+      /* @__PURE__ */ jsx28("div", { className: "ow-footer04__columns", children: /* @__PURE__ */ jsx28(FooterColumns, { columns, headingClassName: "ow-footer04__heading", listClassName: "ow-footer04__list" }) })
+    ] }),
+    /* @__PURE__ */ jsxs29("div", { className: "ow-footer04__legal", children: [
+      /* @__PURE__ */ jsx28(Text24, { variant: "caption", as: "p", children: legal }),
+      legalLinks.length ? /* @__PURE__ */ jsx28(Text24, { variant: "caption", as: "ul", className: "ow-footer04__legal-links", children: legalLinks.map((link, index) => /* @__PURE__ */ jsx28("li", { children: /* @__PURE__ */ jsx28(Link15, { href: link.href, variant: "muted", children: link.label }) }, index)) }) : null
+    ] }),
+    /* @__PURE__ */ jsx28("div", { className: "ow-footer04__name", "aria-hidden": "true", children: /* @__PURE__ */ jsx28("div", { className: "ow-footer04__crop", children: /* @__PURE__ */ jsx28("span", { children: wordmark }) }) })
+  ] }) });
+}
 export {
+  Features01,
+  Features02,
+  Features03,
+  Features04,
+  Features05,
+  Footer01,
+  Footer02,
+  Footer03,
+  Footer04,
+  Header01,
+  Header02,
+  Header03,
+  Header04,
+  Header05,
   Hero01,
   Hero02,
   Hero03,
   Hero04,
   Hero05,
-  Hero06
+  Hero06,
+  Pricing01,
+  Pricing02,
+  Pricing03,
+  Pricing04,
+  Pricing05
 };
 //# sourceMappingURL=index.js.map