@openwarelabs/blocks 0.7.0 → 0.8.0

package/dist/index.cjs

@@ -20,12 +20,31 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // blocks/src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  Features01: () => Features01,
+  Features02: () => Features02,
+  Features03: () => Features03,
+  Features04: () => Features04,
+  Features05: () => Features05,
+  Footer01: () => Footer01,
+  Footer02: () => Footer02,
+  Footer03: () => Footer03,
+  Footer04: () => Footer04,
+  Header01: () => Header01,
+  Header02: () => Header02,
+  Header03: () => Header03,
+  Header04: () => Header04,
+  Header05: () => Header05,
   Hero01: () => Hero01,
   Hero02: () => Hero02,
   Hero03: () => Hero03,
   Hero04: () => Hero04,
   Hero05: () => Hero05,
-  Hero06: () => Hero06
+  Hero06: () => Hero06,
+  Pricing01: () => Pricing01,
+  Pricing02: () => Pricing02,
+  Pricing03: () => Pricing03,
+  Pricing04: () => Pricing04,
+  Pricing05: () => Pricing05
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -36,18 +55,22 @@ var import_ui2 = require("@openwarelabs/ui");
 // blocks/src/shared/BlockActions.tsx
 var import_ui = require("@openwarelabs/ui");
 var import_jsx_runtime = require("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__ */ (0, import_jsx_runtime.jsxs)(
       "a",
       {
-        className: (0, import_ui.buttonClassName)({ variant, size: "lg", shape: "pill" }),
+        className: (0, import_ui.cx)((0, import_ui.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__ */ (0, import_jsx_runtime.jsx)("span", { className: "ow-button__icon", children: startIcon }) : null,
           label,
@@ -56,7 +79,21 @@ function BlockActionButton({ action, variant }) {
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Button, { variant, shape: "pill", size: "lg", startIcon, endIcon, "aria-label": ariaLabel, onClick, children: label });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_ui.Button,
+    {
+      variant,
+      shape: "pill",
+      size,
+      startIcon,
+      endIcon,
+      "aria-label": ariaLabel,
+      onClick: click,
+      fullWidth,
+      className,
+      children: label
+    }
+  );
 }
 function BlockActions({ primary, secondary, className }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className, children: [
@@ -87,7 +124,7 @@ var import_ui3 = require("@openwarelabs/ui");
 
 // blocks/src/shared/icons.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var icon = (paths) => function BlockIcon({ size = 16 }) {
+var icon = (paths) => function BlockIcon({ size = 16, strokeWidth = 2 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "svg",
     {
@@ -97,7 +134,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",
@@ -119,6 +156,57 @@ var DownloadIcon = icon(
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m7 10 5 5 5-5" })
   ] })
 );
+var MenuIcon = icon(
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M4 5h16" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M4 12h16" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M4 19h16" })
+  ] })
+);
+var XIcon = icon(
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M18 6 6 18" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m6 6 12 12" })
+  ] })
+);
+var ChevronDownIcon = icon(/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m6 9 6 6 6-6" }));
+var ChevronRightIcon = icon(/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m9 18 6-6-6-6" }));
+var ArrowRightIcon = icon(
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M5 12h14" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m12 5 7 7-7 7" })
+  ] })
+);
+var MinusIcon = icon(/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M5 12h14" }));
+var SunIcon = icon(
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "12", cy: "12", r: "4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 2v2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 20v2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m4.93 4.93 1.41 1.41" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m17.66 17.66 1.41 1.41" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M2 12h2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M20 12h2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m6.34 17.66-1.41 1.41" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m19.07 4.93-1.41 1.41" })
+  ] })
+);
+var MoonIcon = icon(
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { width: "20", height: "14", x: "2", y: "3", rx: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "8", x2: "16", y1: "21", y2: "21" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "12", x2: "12", y1: "17", y2: "21" })
+  ] })
+);
+var CircleCheckIcon = icon(
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m16 9-5.5 5.5L8 12" })
+  ] })
+);
 
 // blocks/src/heroes/Hero02/Hero02.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
@@ -367,4 +455,1168 @@ function Hero06({
     visual
   ] }) });
 }
+
+// blocks/src/headers/Header01/Header01.tsx
+var import_react8 = require("react");
+var import_ui9 = require("@openwarelabs/ui");
+
+// blocks/src/shared/BlockBrandLink.tsx
+var import_react7 = require("react");
+var import_ui8 = require("@openwarelabs/ui");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var BlockBrandLink = (0, import_react7.forwardRef)(function BlockBrandLink2({ brand, className }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_ui8.Link, { ref, href: brand.href, variant: "standalone", className, children: [
+    brand.logo,
+    brand.name
+  ] });
+});
+
+// blocks/src/headers/Header01/Header01.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function Header01({ brand, links, primaryAction, secondaryLink, labels = {}, className, ...props }) {
+  const [menuOpen, setMenuOpen] = (0, import_react8.useState)(false);
+  const menuLabel = labels.menu ?? "Menu";
+  (0, import_react8.useEffect)(() => {
+    const wide = window.matchMedia("(min-width: 761px)");
+    const onChange = () => wide.matches && setMenuOpen(false);
+    wide.addEventListener("change", onChange);
+    return () => wide.removeEventListener("change", onChange);
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: (0, import_ui9.cx)("ow-header01", className), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    import_ui9.SiteHeader,
+    {
+      brand: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(BlockBrandLink, { brand, className: "ow-header01__brand" }),
+      nav: links.map((link, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_ui9.Link, { href: link.href, variant: "standalone", "aria-current": link.current ? "page" : void 0, children: link.label }, index)),
+      actions: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+        secondaryLink ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          import_ui9.Link,
+          {
+            href: secondaryLink.href,
+            variant: "standalone",
+            className: "ow-header01__sign-in",
+            "aria-current": secondaryLink.current ? "page" : void 0,
+            children: secondaryLink.label
+          }
+        ) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(BlockActionButton, { action: primaryAction, variant: "primary", size: "sm" }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "ow-header01__phone-menu", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          import_ui9.Popover,
+          {
+            "aria-label": menuLabel,
+            placement: "bottom-end",
+            width: 240,
+            open: menuOpen,
+            onOpenChange: setMenuOpen,
+            trigger: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_ui9.Button, { variant: "ghost", shape: "pill", size: "sm", iconOnly: true, "aria-label": menuLabel, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MenuIcon, { size: 16 }) }),
+            children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("nav", { className: "ow-header01__menu", "aria-label": "Main", children: [
+              links.map((link, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                import_ui9.Link,
+                {
+                  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__ */ (0, import_jsx_runtime10.jsx)(
+                import_ui9.Link,
+                {
+                  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
+var import_react9 = require("react");
+var import_ui10 = require("@openwarelabs/ui");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var navigateTo = (href) => window.location.assign(href);
+function PanelContent({ panel, onNavigate }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "ow-header02__product", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("ul", { className: "ow-header02__features", children: panel.features.map((feature, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_ui10.Link, { href: feature.href, variant: "standalone", className: "ow-header02__feature", onClick: onNavigate, children: [
+      feature.icon ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "ow-header02__feature-icon", "aria-hidden": "true", children: feature.icon }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "ow-header02__feature-text", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_ui10.Text, { variant: "label", children: feature.title }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_ui10.Text, { variant: "caption", children: feature.description })
+      ] })
+    ] }) }, index)) }),
+    panel.highlight ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_ui10.Link, { href: panel.highlight.href, variant: "standalone", className: "ow-header02__news", onClick: onNavigate, children: [
+      panel.highlight.badge ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_ui10.Badge, { size: "sm", variant: "active", children: panel.highlight.badge }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_ui10.Text, { variant: "label", children: panel.highlight.title }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_ui10.Text, { as: "span", tone: "primary", className: "ow-header02__news-link", children: [
+        panel.highlight.linkLabel,
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ArrowRightIcon, { size: 14 })
+      ] })
+    ] }) : null
+  ] });
+}
+function Header02({
+  brand,
+  panel,
+  menus = [],
+  links = [],
+  primaryAction,
+  secondaryLink,
+  onNavigate = navigateTo,
+  defaultPanelOpen = false,
+  labels = {},
+  className,
+  ...props
+}) {
+  const [productOpen, setProductOpen] = (0, import_react9.useState)(defaultPanelOpen);
+  const [phoneOpen, setPhoneOpen] = (0, import_react9.useState)(false);
+  const phoneId = (0, import_react9.useId)();
+  const closePhone = () => setPhoneOpen(false);
+  (0, import_react9.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime11.jsxs)("header", { className: (0, import_ui10.cx)("ow-header02", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "ow-header02__inner", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(BlockBrandLink, { brand, className: "ow-header02__brand" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("nav", { className: "ow-header02__nav", "aria-label": "Main", children: [
+        panel ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          import_ui10.Popover,
+          {
+            className: "ow-header02__popover",
+            "aria-label": panel.label,
+            width: 720,
+            autoFocus: false,
+            open: productOpen,
+            onOpenChange: setProductOpen,
+            trigger: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_ui10.Button, { variant: "ghost", shape: "pill", size: "sm", className: "ow-header02__item", endIcon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ChevronDownIcon, { size: 14 }), children: panel.label }),
+            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PanelContent, { panel, onNavigate: () => setProductOpen(false) })
+          }
+        ) : null,
+        menus.map((menu) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          import_ui10.Menu,
+          {
+            label: menu.label,
+            width: 220,
+            trigger: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_ui10.Button, { variant: "ghost", shape: "pill", size: "sm", className: "ow-header02__item", endIcon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ChevronDownIcon, { size: 14 }), children: menu.label }),
+            children: menu.groups.map((group, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react9.Fragment, { children: [
+              index > 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_ui10.MenuSeparator, {}) : null,
+              group.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_ui10.MenuItem, { icon: entry.icon, onSelect: () => onNavigate(entry.href), children: entry.label }, entry.label))
+            ] }, index))
+          },
+          menu.label
+        )),
+        links.map((link, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "a",
+          {
+            href: link.href,
+            className: (0, import_ui10.cx)((0, import_ui10.buttonClassName)({ variant: "ghost", shape: "pill", size: "sm" }), "ow-header02__item"),
+            "aria-current": link.current ? "page" : void 0,
+            children: link.label
+          },
+          index
+        ))
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "ow-header02__actions", children: [
+        secondaryLink ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "a",
+          {
+            href: secondaryLink.href,
+            className: (0, import_ui10.cx)((0, import_ui10.buttonClassName)({ variant: "ghost", shape: "pill", size: "sm" }), "ow-header02__item ow-header02__sign-in"),
+            children: secondaryLink.label
+          }
+        ) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(BlockActionButton, { action: primaryAction, variant: "primary", size: "sm" }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          import_ui10.Button,
+          {
+            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__ */ (0, import_jsx_runtime11.jsx)(XIcon, { size: 18 }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MenuIcon, { size: 18 })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("nav", { id: phoneId, className: "ow-header02__panel", "aria-label": "Main", hidden: !phoneOpen, children: [
+      panel ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_ui10.Text, { variant: "overline", as: "p", className: "ow-header02__panel-label", children: panel.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("ul", { className: "ow-header02__panel-list", children: panel.features.map((feature, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_ui10.Link, { href: feature.href, variant: "standalone", className: "ow-header02__panel-link", onClick: closePhone, children: [
+          feature.icon,
+          feature.title
+        ] }) }, index)) })
+      ] }) : null,
+      menus.map((menu) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react9.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_ui10.Text, { variant: "overline", as: "p", className: "ow-header02__panel-label", children: menu.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("ul", { className: "ow-header02__panel-list ow-header02__panel-list--columns", children: menu.groups.flat().map((entry) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_ui10.Link, { href: entry.href, variant: "standalone", className: "ow-header02__panel-link", onClick: closePhone, children: entry.label }) }, entry.label)) })
+      ] }, menu.label)),
+      links.length ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("ul", { className: "ow-header02__panel-list ow-header02__panel-list--ruled", children: links.map((link, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        import_ui10.Link,
+        {
+          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__ */ (0, import_jsx_runtime11.jsx)("a", { href: secondaryLink.href, className: (0, import_ui10.cx)((0, import_ui10.buttonClassName)({ shape: "pill" }), "ow-button--full"), onClick: closePhone, children: secondaryLink.label }) : null
+    ] })
+  ] });
+}
+
+// blocks/src/headers/Header03/Header03.tsx
+var import_ui11 = require("@openwarelabs/ui");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function NavLink({ link }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_ui11.Link, { 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__ */ (0, import_jsx_runtime12.jsxs)("header", { className: (0, import_ui11.cx)("ow-header03", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "ow-header03__inner", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("nav", { className: "ow-header03__nav", "aria-label": labels.start ?? "Primary", children: start.map((link, index) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(NavLink, { link }, index)) }),
+      secondaryLink ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_ui11.Link, { href: secondaryLink.href, variant: "standalone", className: "ow-header03__link ow-header03__phone-only", children: secondaryLink.label }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(BlockBrandLink, { brand, className: "ow-header03__brand" }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "ow-header03__end", children: [
+        end.length ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("nav", { className: "ow-header03__nav", "aria-label": labels.end ?? "More", children: end.map((link, index) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(NavLink, { link }, index)) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "ow-header03__actions", children: [
+          secondaryLink ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(NavLink, { link: secondaryLink }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(BlockActionButton, { action: primaryAction, variant: "primary", size: "sm" })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_ui11.ScrollShadow, { orientation: "horizontal", size: 24, className: "ow-header03__phone-only ow-header03__phone-nav", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("nav", { "aria-label": labels.all ?? "Main", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("ul", { className: "ow-header03__phone-links", children: [...start, ...end].map((link, index) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(NavLink, { link }) }, index)) }) }) })
+  ] });
+}
+
+// blocks/src/headers/Header04/Header04.tsx
+var import_react10 = require("react");
+var import_ui12 = require("@openwarelabs/ui");
+var import_jsx_runtime13 = require("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] = (0, import_react10.useState)(defaultDismissed);
+  const brandRef = (0, import_react10.useRef)(null);
+  const dismiss = () => {
+    setClosed(true);
+    onDismiss?.();
+    brandRef.current?.focus();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: (0, import_ui12.cx)("ow-header04", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      "aside",
+      {
+        className: "ow-header04__notice",
+        "aria-label": labels.announcement ?? "Announcement",
+        "data-closed": closed || void 0,
+        "aria-hidden": closed || void 0,
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "ow-header04__clip", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "ow-header04__notice-inner", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_ui12.Text, { className: "ow-header04__message", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "ow-header04__dot", "aria-hidden": "true" }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("strong", { children: announcement.title }),
+            announcement.description ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+              " ",
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "ow-header04__detail", children: announcement.description })
+            ] }) : null,
+            announcement.link ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_ui12.Link, { href: announcement.link.href, className: "ow-header04__link", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "ow-header04__link-wide", children: announcement.link.label }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "ow-header04__link-narrow", children: announcement.link.shortLabel ?? announcement.link.label }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ArrowRightIcon, { size: 14 })
+            ] }) : null
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_ui12.CloseButton, { size: "sm", label: labels.dismiss ?? "Dismiss the announcement", onClick: dismiss })
+        ] }) })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("header", { className: "ow-header04__header", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "ow-header04__inner", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(BlockBrandLink, { ref: brandRef, brand, className: "ow-header04__brand" }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("nav", { className: "ow-header04__nav", "aria-label": "Main", children: links.map((link, index) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        import_ui12.Link,
+        {
+          href: link.href,
+          variant: "standalone",
+          className: "ow-header04__link-plain",
+          "aria-current": link.current ? "page" : void 0,
+          children: link.label
+        },
+        index
+      )) }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "ow-header04__actions", children: [
+        secondaryLink ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_ui12.Link, { href: secondaryLink.href, variant: "standalone", className: "ow-header04__link-plain", children: secondaryLink.label }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(BlockActionButton, { action: primaryAction, variant: "primary", size: "sm" }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "ow-header04__phone-menu", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+          import_ui12.Menu,
+          {
+            label: labels.menu ?? "Menu",
+            align: "end",
+            width: 220,
+            trigger: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_ui12.Button, { variant: "ghost", size: "sm", iconOnly: true, "aria-label": labels.menu ?? "Menu", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(MenuIcon, { size: 18 }) }),
+            children: [
+              links.map((link, index) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_ui12.MenuItem, { onSelect: () => onNavigate(link.href), children: link.label }, index)),
+              secondaryLink ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_ui12.MenuSeparator, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_ui12.MenuItem, { onSelect: () => onNavigate(secondaryLink.href), children: secondaryLink.label })
+              ] }) : null
+            ]
+          }
+        ) })
+      ] })
+    ] }) })
+  ] });
+}
+
+// blocks/src/headers/Header05/Header05.tsx
+var import_react11 = require("react");
+var import_ui13 = require("@openwarelabs/ui");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var narrow = "(max-width: 1024px)";
+function Header05({ brand, links, more, primaryAction, secondaryLink, defaultOpen = false, labels = {}, className, ...props }) {
+  const [open, setOpen] = (0, import_react11.useState)(defaultOpen);
+  const moreId = (0, import_react11.useId)();
+  (0, import_react11.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("header", { className: (0, import_ui13.cx)("ow-header05", className), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "ow-header05__inner", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(BlockBrandLink, { brand, className: "ow-header05__brand" }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("nav", { className: "ow-header05__nav", "aria-label": "Main", children: links.map((link, index) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        import_ui13.Link,
+        {
+          href: link.href,
+          variant: "standalone",
+          className: "ow-header05__link",
+          "aria-current": link.current ? "page" : void 0,
+          children: link.label
+        },
+        index
+      )) }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "ow-header05__actions", children: [
+        secondaryLink ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_ui13.Link, { href: secondaryLink.href, variant: "standalone", className: "ow-header05__link", children: secondaryLink.label }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(BlockActionButton, { action: primaryAction, variant: "primary", size: "sm" }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          import_ui13.Button,
+          {
+            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__ */ (0, import_jsx_runtime14.jsx)(MenuIcon, { size: 18 })
+          }
+        )
+      ] })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      import_ui13.Drawer,
+      {
+        className: "ow-header05__drawer",
+        open,
+        onClose: close,
+        title: labels.title ?? "Menu",
+        side: "right",
+        size: 320,
+        footer: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+          secondaryLink ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("a", { href: secondaryLink.href, className: (0, import_ui13.buttonClassName)({ shape: "pill" }), onClick: close, children: secondaryLink.label }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(BlockActionButton, { action: primaryAction, variant: "primary", size: "md", onAfterClick: close })
+        ] }),
+        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("nav", { "aria-label": "Main", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("ul", { className: "ow-header05__drawer-list", children: links.map((link, index) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+            import_ui13.Link,
+            {
+              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__ */ (0, import_jsx_runtime14.jsx)("span", { className: "ow-header05__current", "aria-hidden": "true" }) : null,
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ChevronRightIcon, { size: 16 })
+              ]
+            }
+          ) }, index)) }),
+          more ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "ow-header05__more", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_ui13.Text, { variant: "overline", as: "p", className: "ow-header05__more-label", id: moreId, children: more.title }),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("ul", { className: "ow-header05__more-list", "aria-labelledby": moreId, children: more.links.map((link, index) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_ui13.Link, { href: link.href, variant: "standalone", className: "ow-header05__more-link", onClick: close, children: link.label }) }, index)) })
+          ] }) : null
+        ] })
+      }
+    )
+  ] });
+}
+
+// blocks/src/pricing/Pricing01/Pricing01.tsx
+var import_react12 = require("react");
+var import_ui14 = require("@openwarelabs/ui");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function Pricing01({ eyebrow, title, description, plans, enterprise, note, className, ...props }) {
+  const id = (0, import_react12.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("section", { className: (0, import_ui14.cx)("ow-pricing01", className), "aria-labelledby": `${id}-title`, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "ow-pricing01__inner", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_ui14.SectionHeading, { align: "center", eyebrow, title: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { id: `${id}-title`, children: title }), intro: description }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "ow-pricing01__grid", children: plans.map((plan, index) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+      import_ui14.Card,
+      {
+        padding: "none",
+        className: "ow-pricing01__card",
+        "data-recommended": plan.recommended || void 0,
+        "aria-labelledby": `${id}-plan-${index}`,
+        role: "group",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "ow-pricing01__head", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "ow-pricing01__name-row", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_ui14.Text, { variant: "card-title", id: `${id}-plan-${index}`, children: plan.name }),
+              plan.badge ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_ui14.Badge, { size: "sm", variant: "active", children: plan.badge }) : null
+            ] }),
+            plan.summary ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_ui14.Text, { variant: "copy", className: "ow-pricing01__summary", children: plan.summary }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_ui14.Text, { as: "p", variant: "body", tone: "muted", className: "ow-pricing01__price", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_ui14.Text, { as: "span", variant: "section-title", tone: "default", className: "ow-pricing01__amount", children: plan.price }),
+              plan.unit
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BlockActionButton, { action: plan.action, variant: plan.recommended ? "primary" : "secondary", size: "md", fullWidth: true })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "ow-pricing01__body", children: [
+            plan.featuresTitle ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_ui14.Text, { as: "p", variant: "label", children: plan.featuresTitle }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("ul", { className: "ow-pricing01__features", children: plan.features.map((feature, featureIndex) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_ui14.Text, { as: "li", variant: "body", tone: "soft", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CheckIcon, { size: 16 }),
+              feature
+            ] }, featureIndex)) })
+          ] })
+        ]
+      },
+      index
+    )) }),
+    enterprise ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "ow-pricing01__enterprise", children: [
+      enterprise.icon ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "ow-pricing01__enterprise-icon", "aria-hidden": "true", children: enterprise.icon }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_ui14.Text, { variant: "copy", className: "ow-pricing01__enterprise-text", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_ui14.Text, { as: "strong", variant: "label", tone: "default", children: enterprise.title }),
+        " ",
+        enterprise.description
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_ui14.Link, { href: enterprise.link.href, variant: "standalone", className: "ow-pricing01__enterprise-link", children: [
+        enterprise.link.label,
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ArrowRightIcon, { size: 14 })
+      ] })
+    ] }) : null,
+    note ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_ui14.Text, { as: "p", variant: "caption", align: "center", className: "ow-pricing01__note", children: note }) : null
+  ] }) });
+}
+
+// blocks/src/pricing/Pricing02/Pricing02.tsx
+var import_react13 = require("react");
+var import_ui15 = require("@openwarelabs/ui");
+var import_jsx_runtime16 = require("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] = (0, import_react13.useState)(defaultPeriod);
+  const id = (0, import_react13.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("section", { className: (0, import_ui15.cx)("ow-pricing02", className), "aria-labelledby": `${id}-title`, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "ow-pricing02__inner", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "ow-pricing02__header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_ui15.SectionHeading, { eyebrow, title: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { id: `${id}-title`, children: title }), intro: description }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "ow-pricing02__switch", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          import_ui15.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__ */ (0, import_jsx_runtime16.jsx)(import_ui15.Text, { as: "p", variant: "caption", children: periodNote }) : null
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_ui15.VisuallyHidden, { "aria-live": "polite", children: period === "yearly" ? labels.showingYearly ?? "Showing yearly prices." : labels.showingMonthly ?? "Showing monthly prices." }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "ow-pricing02__panel", children: plans.map((plan, index) => {
+      const price = priceFor(plan, period);
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "ow-pricing02__plan", "data-popular": plan.recommended || void 0, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "ow-pricing02__name-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_ui15.Text, { variant: "card-title", children: plan.name }),
+          plan.badge ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_ui15.Badge, { size: "sm", variant: "active", children: plan.badge }) : null
+        ] }),
+        plan.summary ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_ui15.Text, { variant: "copy", className: "ow-pricing02__summary", children: plan.summary }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "ow-pricing02__price", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_ui15.Text, { as: "p", variant: "body", tone: "muted", className: "ow-pricing02__figure", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              import_ui15.Text,
+              {
+                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__ */ (0, import_jsx_runtime16.jsx)(import_ui15.Text, { as: "p", variant: "caption", className: "ow-pricing02__billing", children: price.billing }) : null
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(BlockActionButton, { action: plan.action, variant: plan.recommended ? "primary" : "secondary", size: "md", fullWidth: true }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("ul", { className: "ow-pricing02__features", "aria-label": (labels.includes ?? includes)(plan.name), children: plan.features.map((feature, featureIndex) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_ui15.Text, { as: "li", variant: "body", tone: "soft", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CheckIcon, { size: 16 }),
+          feature
+        ] }, featureIndex)) })
+      ] }, index);
+    }) }),
+    note ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_ui15.Text, { as: "p", variant: "caption", align: "center", className: "ow-pricing02__note", children: note }) : null
+  ] }) });
+}
+
+// blocks/src/pricing/Pricing03/Pricing03.tsx
+var import_react14 = require("react");
+var import_ui16 = require("@openwarelabs/ui");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var phoneQuery = "(max-width: 760px)";
+function useIsPhone() {
+  return (0, import_react14.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 = (0, import_react14.useId)();
+  const isPhone = useIsPhone();
+  const [picked, setPicked] = (0, import_react14.useState)(() => 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__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "ow-pricing03__yes", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CheckIcon, { size: 14, strokeWidth: 2.5 }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_ui16.VisuallyHidden, { children: labels.included ?? "Included" })
+      ] });
+    }
+    if (value === false) {
+      return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "ow-pricing03__no", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(MinusIcon, { size: 16 }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_ui16.VisuallyHidden, { children: labels.notIncluded ?? "Not included" })
+      ] });
+    }
+    return value;
+  };
+  const columns = (groupTitle) => [
+    {
+      key: "feature",
+      header: groupTitle,
+      render: (row) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_ui16.Text, { as: "span", variant: "body", className: "ow-pricing03__feature", children: [
+        row.feature,
+        row.note ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_ui16.Text, { 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__ */ (0, import_jsx_runtime17.jsx)("section", { className: (0, import_ui16.cx)("ow-pricing03", className), "aria-labelledby": `${id}-title`, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "ow-pricing03__inner", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_ui16.SectionHeading, { align: "center", eyebrow, title: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { id: `${id}-title`, children: title }), intro: description }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "ow-pricing03__picker", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      import_ui16.SegmentedControl,
+      {
+        "aria-label": labels.picker ?? "Plan to compare",
+        fullWidth: true,
+        value: picked,
+        onChange: setPicked,
+        options: plans.map((plan) => ({ value: plan.id, label: plan.name }))
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "ow-pricing03__plans", children: [
+      pricesNote ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_ui16.Text, { as: "p", variant: "caption", className: "ow-pricing03__plans-label", children: pricesNote }) : null,
+      shown.map((plan) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "ow-pricing03__plan", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_ui16.Text, { as: "p", variant: "card-title", className: "ow-pricing03__plan-name", children: [
+          plan.name,
+          plan.badge ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_ui16.Badge, { size: "sm", variant: "active", children: plan.badge }) : null
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_ui16.Text, { as: "p", variant: "caption", className: "ow-pricing03__plan-price", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_ui16.Text, { as: "strong", variant: "label", tone: "default", className: "ow-pricing03__plan-amount", children: plan.price }),
+          " ",
+          plan.unit
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(BlockActionButton, { action: plan.action, variant: plan.recommended ? "primary" : "secondary", size: "sm" })
+      ] }, plan.id))
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "ow-pricing03__groups", children: groups.map((group) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      import_ui16.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__ */ (0, import_jsx_runtime17.jsx)(import_ui16.Text, { as: "p", variant: "caption", align: "center", className: "ow-pricing03__note", children: note }) : null
+  ] }) });
+}
+
+// blocks/src/pricing/Pricing04/Pricing04.tsx
+var import_react15 = require("react");
+var import_ui17 = require("@openwarelabs/ui");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+function Pricing04({ eyebrow, title, description, product, offer, promises, className, ...props }) {
+  const id = (0, import_react15.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("section", { className: (0, import_ui17.cx)("ow-pricing04", className), "aria-labelledby": `${id}-title`, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "ow-pricing04__inner", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_ui17.SectionHeading, { align: "center", eyebrow, title: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { id: `${id}-title`, children: title }), intro: description }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_ui17.Card, { padding: "none", className: "ow-pricing04__card", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "ow-pricing04__details", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_ui17.Text, { variant: "heading", children: product.name }),
+        product.description ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_ui17.Text, { variant: "copy", className: "ow-pricing04__description", children: product.description }) : null,
+        product.featuresTitle ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_ui17.Text, { as: "p", variant: "label", tone: "primary", className: "ow-pricing04__included", children: product.featuresTitle }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("ul", { className: "ow-pricing04__features", children: product.features.map((feature, index) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_ui17.Text, { as: "li", variant: "body", tone: "soft", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(CheckIcon, { size: 16 }),
+          feature
+        ] }, index)) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "ow-pricing04__offer", children: [
+        offer.label ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_ui17.Text, { as: "p", variant: "label", tone: "soft", children: offer.label }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_ui17.Text, { as: "p", variant: "label", tone: "muted", className: "ow-pricing04__price", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_ui17.Text, { as: "span", variant: "page-title", tone: "default", className: "ow-pricing04__amount", children: offer.price }),
+          offer.currency
+        ] }),
+        offer.unit ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_ui17.Text, { variant: "body", tone: "muted", className: "ow-pricing04__unit", children: offer.unit }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(BlockActionButton, { action: offer.action, variant: "primary", fullWidth: true }),
+        offer.note ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_ui17.Text, { as: "p", variant: "caption", className: "ow-pricing04__fine", children: offer.note }) : null
+      ] })
+    ] }),
+    promises?.length ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("ul", { className: "ow-pricing04__promises", children: promises.map((promise, index) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_ui17.Text, { as: "li", variant: "body", tone: "muted", children: [
+      promise.icon,
+      promise.text
+    ] }, index)) }) : null
+  ] }) });
+}
+
+// blocks/src/pricing/Pricing05/Pricing05.tsx
+var import_react16 = require("react");
+var import_ui18 = require("@openwarelabs/ui");
+var import_jsx_runtime19 = require("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 = (0, import_react16.useId)();
+  const [units, setUnits] = (0, import_react16.useState)(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 = (0, import_react16.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__ */ (0, import_jsx_runtime19.jsx)("section", { className: (0, import_ui18.cx)("ow-pricing05", className), "aria-labelledby": `${id}-title`, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "ow-pricing05__inner", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_ui18.SectionHeading, { eyebrow, title: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { id: `${id}-title`, children: title }), intro: description }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("ul", { className: "ow-pricing05__tiers", "aria-label": labels.tiers ?? `Price per ${unit}`, children: tiers.map((tier, index) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("li", { className: "ow-pricing05__tier", "data-current": index === current || void 0, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "ow-pricing05__tier-dot", "aria-hidden": "true" }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_ui18.Text, { variant: index === current ? "label" : "body", tone: index === current ? "default" : "soft", children: rangeLabel(tier) }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_ui18.Text, { variant: "label", className: "ow-pricing05__tier-price", children: tier.price === 0 ? labels.free ?? "Free" : /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+          format.unitPrice(tier.price),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_ui18.Text, { as: "small", variant: "caption", className: "ow-pricing05__tier-unit", children: [
+            "a ",
+            unit
+          ] })
+        ] }) })
+      ] }, tier.from)) }),
+      aside ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_ui18.Text, { variant: "copy", className: "ow-pricing05__aside", children: aside }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_ui18.Card, { padding: "none", className: "ow-pricing05__card", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_ui18.Text, { variant: "card-title", children: words.title }),
+      words.description ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_ui18.Text, { variant: "copy", className: "ow-pricing05__card-intro", children: words.description }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_ui18.Text, { as: "p", variant: "heading", className: "ow-pricing05__runs", "aria-hidden": "true", children: [
+        format.number(units),
+        " ",
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_ui18.Text, { as: "small", variant: "body", tone: "muted", className: "ow-pricing05__runs-unit", children: perMonth })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        import_ui18.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__ */ (0, import_jsx_runtime19.jsx)("div", { className: "ow-pricing05__scale", "aria-hidden": "true", children: marks.map((value) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: mark(value) }, value)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "ow-pricing05__breakdown", children: lines.map(({ tier, count, cost }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_ui18.Text, { as: "div", variant: "body", tone: "soft", className: "ow-pricing05__line", "data-idle": count === 0 || void 0, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { children: [
+          format.number(count),
+          " ",
+          plural,
+          " ",
+          tier.price === 0 ? (labels.free ?? "Free").toLowerCase() : `at ${format.unitPrice(tier.price)}`
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: format.money(cost) })
+      ] }, tier.from)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "ow-pricing05__total", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_ui18.Text, { as: "p", variant: "label", children: [
+          words.totalLabel,
+          words.totalNote ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_ui18.Text, { as: "small", variant: "caption", className: "ow-pricing05__total-note", children: words.totalNote }) : null
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_ui18.Text, { as: "p", variant: "section-title", className: "ow-pricing05__total-amount", children: format.money(total) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(BlockActionButton, { action, variant: "primary", fullWidth: true, className: "ow-pricing05__action" }),
+      note ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_ui18.Text, { as: "p", variant: "caption", align: "center", className: "ow-pricing05__fine", children: note }) : null
+    ] })
+  ] }) });
+}
+
+// blocks/src/features/Features01/Features01.tsx
+var import_react17 = require("react");
+var import_ui19 = require("@openwarelabs/ui");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+function Features01({ eyebrow, title, description, features, footer, className, ...props }) {
+  const id = (0, import_react17.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("section", { className: (0, import_ui19.cx)("ow-features01", className), "aria-labelledby": `${id}-title`, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "ow-features01__inner", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_ui19.SectionHeading, { align: "center", eyebrow, title: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { id: `${id}-title`, children: title }), intro: description }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("ul", { className: "ow-features01__grid", children: features.map((feature, index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("li", { className: "ow-features01__item", children: [
+      feature.icon ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "ow-features01__icon", "aria-hidden": "true", children: feature.icon }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_ui19.Text, { variant: "card-title", className: "ow-features01__title", children: feature.title }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_ui19.Text, { variant: "copy", className: "ow-features01__text", children: feature.description })
+    ] }, index)) }),
+    footer ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_ui19.Text, { variant: "copy", align: "center", className: "ow-features01__more", children: footer }) : null
+  ] }) });
+}
+
+// blocks/src/features/Features02/Features02.tsx
+var import_react18 = require("react");
+var import_ui20 = require("@openwarelabs/ui");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+function Features02({ eyebrow, title, description, rows, className, ...props }) {
+  const id = (0, import_react18.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("section", { className: (0, import_ui20.cx)("ow-features02", className), "aria-labelledby": `${id}-title`, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "ow-features02__inner", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_ui20.SectionHeading, { eyebrow, title: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { id: `${id}-title`, children: title }), intro: description }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "ow-features02__rows", children: rows.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("article", { className: "ow-features02__row", "aria-labelledby": `${id}-row-${index}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "ow-features02__copy", children: [
+        row.kicker || row.icon ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_ui20.Text, { variant: "label", tone: "primary", className: "ow-features02__kicker", children: [
+          row.icon,
+          row.kicker
+        ] }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_ui20.Text, { variant: "heading", id: `${id}-row-${index}`, className: "ow-features02__title", children: row.title }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_ui20.Text, { variant: "lead", className: "ow-features02__text", children: row.description }),
+        row.points?.length ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("ul", { className: "ow-features02__points", children: row.points.map((point, pointIndex) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_ui20.Text, { as: "li", tone: "soft", className: "ow-features02__point", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CheckIcon, { size: 16 }),
+          point
+        ] }, pointIndex)) }) : null,
+        row.link ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_ui20.Link, { href: row.link.href, variant: "standalone", className: "ow-features02__link", children: [
+          row.link.label,
+          " \u2192"
+        ] }) : null
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        import_ui20.DotGrid,
+        {
+          className: "ow-features02__stage",
+          role: row.visualLabel ? "img" : void 0,
+          "aria-label": row.visualLabel,
+          children: row.visual
+        }
+      )
+    ] }, index)) })
+  ] }) });
+}
+
+// blocks/src/features/Features03/Features03.tsx
+var import_react19 = require("react");
+var import_ui21 = require("@openwarelabs/ui");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+function Features03({ eyebrow, title, description, cards, className, ...props }) {
+  const id = (0, import_react19.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("section", { className: (0, import_ui21.cx)("ow-features03", className), "aria-labelledby": `${id}-title`, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "ow-features03__inner", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "ow-features03__header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_ui21.SectionHeading, { eyebrow, title: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { id: `${id}-title`, children: title }) }),
+      description ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_ui21.Text, { variant: "lead", className: "ow-features03__intro", children: description }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "ow-features03__grid", children: cards.map((card, index) => {
+      const featured = index === 0;
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+        "article",
+        {
+          className: (0, import_ui21.cx)(
+            "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__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "ow-features03__copy", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_ui21.Text, { variant: featured ? "heading" : "card-title", id: `${id}-card-${index}`, children: card.title }),
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_ui21.Text, { variant: featured ? "lead" : "copy", className: "ow-features03__text", children: card.description })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("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
+var import_react20 = require("react");
+var import_ui22 = require("@openwarelabs/ui");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+function Features04({ eyebrow, title, description, tabs, defaultTab = 0, labels = {}, className, ...props }) {
+  const id = (0, import_react20.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("section", { className: (0, import_ui22.cx)("ow-features04", className), "aria-labelledby": `${id}-title`, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "ow-features04__inner", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_ui22.SectionHeading, { align: "center", eyebrow, title: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { id: `${id}-title`, children: title }), intro: description }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_ui22.Tabs, { defaultValue: String(defaultTab), className: "ow-features04__tabs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_ui22.TabList, { "aria-label": labels.tabs ?? "Features", children: tabs.map((tab, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_ui22.Tab, { value: String(index), icon: tab.icon, children: tab.label }, index)) }),
+      tabs.map((tab, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_ui22.TabPanel, { value: String(index), className: "ow-features04__panel", children: [
+        tab.caption ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_ui22.Text, { variant: "copy", align: "center", className: "ow-features04__caption", children: tab.caption }) : null,
+        tab.visual
+      ] }, index))
+    ] })
+  ] }) });
+}
+
+// blocks/src/features/Features05/Features05.tsx
+var import_react21 = require("react");
+var import_ui23 = require("@openwarelabs/ui");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+function Features05({ eyebrow, title, description, items, primaryAction, secondaryLink, visual, className, ...props }) {
+  const id = (0, import_react21.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("section", { className: (0, import_ui23.cx)("ow-features05", className), "aria-labelledby": `${id}-title`, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "ow-features05__inner", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "ow-features05__copy", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_ui23.SectionHeading, { eyebrow, title: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { id: `${id}-title`, children: title }), intro: description }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("ul", { className: "ow-features05__list", children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_ui23.Text, { as: "li", tone: "soft", className: "ow-features05__item", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "ow-features05__tick", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CheckIcon, { size: 12, strokeWidth: 3 }) }),
+        item
+      ] }, index)) }),
+      primaryAction || secondaryLink ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "ow-features05__actions", children: [
+        primaryAction ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(BlockActionButton, { action: primaryAction, variant: "primary" }) : null,
+        secondaryLink ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_ui23.Link, { href: secondaryLink.href, variant: "standalone", children: secondaryLink.label }) : null
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "ow-features05__visual", children: visual })
+  ] }) });
+}
+
+// blocks/src/footers/Footer01/Footer01.tsx
+var import_react23 = require("react");
+var import_ui25 = require("@openwarelabs/ui");
+
+// blocks/src/shared/FooterColumns.tsx
+var import_react22 = require("react");
+var import_ui24 = require("@openwarelabs/ui");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+function FooterColumns({ columns, headingClassName, listClassName, badgeClassName }) {
+  const id = (0, import_react22.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_jsx_runtime25.Fragment, { children: columns.map((column, index) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("nav", { "aria-labelledby": `${id}-${index}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_ui24.Text, { variant: "label", as: "h2", id: `${id}-${index}`, className: headingClassName, children: column.title }),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("ul", { className: listClassName, children: column.links.map((link, linkIndex) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("li", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_ui24.Link, { href: link.href, variant: "standalone", children: link.label }),
+      link.badge ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_ui24.Text, { variant: "badge", className: badgeClassName, children: link.badge }) : null
+    ] }, linkIndex)) })
+  ] }, index)) });
+}
+
+// blocks/src/footers/Footer01/Footer01.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var currentTheme = () => typeof document === "undefined" ? "system" : document.documentElement.dataset.theme ?? "system";
+function useTheme() {
+  const [theme, setTheme] = (0, import_react23.useState)(currentTheme);
+  (0, import_react23.useEffect)(() => {
+    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 = (0, import_react23.useId)();
+  const home = labels.home ?? (typeof brand.name === "string" ? `${brand.name} home` : void 0);
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("footer", { className: (0, import_ui25.cx)("ow-footer01", className), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "ow-footer01__inner", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "ow-footer01__top", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "ow-footer01__brand", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_ui25.Link, { href: brand.href, variant: "standalone", className: "ow-footer01__logo", "aria-label": home, children: [
+          brand.logo,
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_ui25.Text, { variant: "dialog-title", as: "span", children: brand.name })
+        ] }),
+        description ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_ui25.Text, { variant: "copy", children: description }) : null,
+        status ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_ui25.Link, { href: status.href, variant: "standalone", className: "ow-footer01__status", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "ow-footer01__status-dot", "aria-hidden": "true" }),
+          status.label
+        ] }) : null
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(FooterColumns, { columns, headingClassName: "ow-footer01__heading", listClassName: "ow-footer01__links", badgeClassName: "ow-footer01__new" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_ui25.Separator, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "ow-footer01__bottom", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_ui25.Text, { variant: "caption", as: "p", className: "ow-footer01__legal", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: legal }),
+        legalLinks.map((link, index) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_ui25.Link, { href: link.href, variant: "muted", children: link.label }, index))
+      ] }),
+      themeSwitch ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "ow-footer01__theme", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_ui25.Text, { variant: "caption", id: themeId, children: labels.theme ?? "Theme" }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          import_ui25.SegmentedControl,
+          {
+            size: "sm",
+            "aria-labelledby": themeId,
+            options: [
+              { value: "light", label: null, icon: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SunIcon, { size: 15 }), "aria-label": labels.light ?? "Light" },
+              { value: "dark", label: null, icon: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(MoonIcon, { size: 15 }), "aria-label": labels.dark ?? "Dark" },
+              { value: "system", label: null, icon: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(MonitorIcon, { size: 15 }), "aria-label": labels.system ?? "Match the system" }
+            ],
+            value: theme,
+            onChange: setTheme
+          }
+        )
+      ] }) : null
+    ] })
+  ] }) });
+}
+
+// blocks/src/footers/Footer02/Footer02.tsx
+var import_ui26 = require("@openwarelabs/ui");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+function Footer02({ brand, links, legal, labels = {}, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("footer", { className: (0, import_ui26.cx)("ow-footer02", className), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "ow-footer02__inner", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_ui26.Link, { href: brand.href, className: "ow-footer02__logo", "aria-label": labels.home ?? (typeof brand.name === "string" ? `${brand.name} home` : void 0), children: brand.logo }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("nav", { "aria-label": labels.nav ?? "Footer", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("ul", { className: "ow-footer02__links", children: links.map((link, index) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_ui26.Link, { href: link.href, variant: "standalone", children: link.label }) }, index)) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_ui26.Text, { variant: "caption", as: "p", children: legal })
+  ] }) });
+}
+
+// blocks/src/footers/Footer03/Footer03.tsx
+var import_react24 = require("react");
+var import_ui27 = require("@openwarelabs/ui");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var emailPattern2 = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+function Footer03({ newsletter, brand, description, columns, legal, legalLinks = [], labels = {}, className, ...props }) {
+  const [email, setEmail] = (0, import_react24.useState)("");
+  const [error, setError] = (0, import_react24.useState)("");
+  const [sending, setSending] = (0, import_react24.useState)(false);
+  const [sentTo, setSentTo] = (0, import_react24.useState)("");
+  const input = (0, import_react24.useRef)(null);
+  const id = (0, import_react24.useId)();
+  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__ */ (0, import_jsx_runtime28.jsx)("footer", { className: (0, import_ui27.cx)("ow-footer03", className), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "ow-footer03__inner", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("section", { className: "ow-footer03__signup", "aria-labelledby": `${id}-title`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_ui27.Text, { variant: "heading", as: "h2", id: `${id}-title`, children: newsletter.title }),
+        newsletter.description ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_ui27.Text, { variant: "copy", className: "ow-footer03__intro", children: newsletter.description }) : null
+      ] }),
+      sentTo ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "ow-footer03__done", role: "status", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CircleCheckIcon, { size: 18 }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: "ow-footer03__done-text", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_ui27.Text, { variant: "label", children: newsletter.successTitle }),
+          newsletter.successDescription ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_ui27.Text, { variant: "body", as: "span", tone: "soft", className: "ow-footer03__done-detail", children: newsletter.successDescription(sentTo) }) : null
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_ui27.Button, { size: "sm", variant: "ghost", onClick: startAgain, children: labels.change ?? "Change" })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("form", { noValidate: true, onSubmit: subscribe, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "ow-footer03__row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            import_ui27.Input,
+            {
+              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__ */ (0, import_jsx_runtime28.jsx)(MailIcon, { size: 16 }),
+              isInvalid: Boolean(error),
+              value: email,
+              onChange: (event) => {
+                setEmail(event.target.value);
+                if (error) setError("");
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_ui27.Button, { type: "submit", variant: "primary", shape: "pill", loading: sending, endIcon: newsletter.submitIcon, children: newsletter.submitLabel })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          import_ui27.Text,
+          {
+            variant: "caption",
+            as: "p",
+            id: `${id}-note`,
+            tone: error ? "danger" : void 0,
+            className: "ow-footer03__note",
+            "aria-live": "polite",
+            children: error || newsletter.note
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "ow-footer03__links", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "ow-footer03__brand", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+          import_ui27.Link,
+          {
+            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__ */ (0, import_jsx_runtime28.jsx)(import_ui27.Text, { variant: "dialog-title", as: "span", children: brand.name })
+            ]
+          }
+        ),
+        description ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_ui27.Text, { variant: "copy", className: "ow-footer03__line", children: description }) : null
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(FooterColumns, { columns, headingClassName: "ow-footer03__heading", listClassName: "ow-footer03__list" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_ui27.Separator, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "ow-footer03__bottom", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_ui27.Text, { variant: "caption", as: "p", children: legal }),
+      legalLinks.length ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_ui27.Text, { variant: "caption", as: "ul", className: "ow-footer03__legal", children: legalLinks.map((link, index) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_ui27.Link, { href: link.href, variant: "muted", children: link.label }) }, index)) }) : null
+    ] })
+  ] }) });
+}
+
+// blocks/src/footers/Footer04/Footer04.tsx
+var import_ui28 = require("@openwarelabs/ui");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+function Footer04({ title, titleMuted, primaryAction, columns, legal, legalLinks = [], wordmark, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("footer", { className: (0, import_ui28.cx)("ow-footer04", className), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "ow-footer04__inner", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "ow-footer04__top", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "ow-footer04__pitch", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_ui28.Text, { variant: "heading", as: "p", children: [
+          title,
+          titleMuted ? /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
+            " ",
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_ui28.Text, { variant: "heading", as: "span", tone: "muted", children: titleMuted })
+          ] }) : null
+        ] }),
+        primaryAction ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(BlockActionButton, { action: primaryAction, variant: "primary", size: "md" }) : null
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "ow-footer04__columns", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(FooterColumns, { columns, headingClassName: "ow-footer04__heading", listClassName: "ow-footer04__list" }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "ow-footer04__legal", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_ui28.Text, { variant: "caption", as: "p", children: legal }),
+      legalLinks.length ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_ui28.Text, { variant: "caption", as: "ul", className: "ow-footer04__legal-links", children: legalLinks.map((link, index) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_ui28.Link, { href: link.href, variant: "muted", children: link.label }) }, index)) }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "ow-footer04__name", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "ow-footer04__crop", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { children: wordmark }) }) })
+  ] }) });
+}
 //# sourceMappingURL=index.cjs.map