@openwarelabs/blocks 0.7.0 → 0.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (106) hide show
  1. package/dist/calls-to-action/Cta01/Cta01.d.cts +3 -0
  2. package/dist/calls-to-action/Cta01/Cta01.d.ts +3 -0
  3. package/dist/calls-to-action/Cta01/Cta01.types.d.cts +14 -0
  4. package/dist/calls-to-action/Cta01/Cta01.types.d.ts +14 -0
  5. package/dist/calls-to-action/Cta02/Cta02.d.cts +3 -0
  6. package/dist/calls-to-action/Cta02/Cta02.d.ts +3 -0
  7. package/dist/calls-to-action/Cta02/Cta02.types.d.cts +16 -0
  8. package/dist/calls-to-action/Cta02/Cta02.types.d.ts +16 -0
  9. package/dist/calls-to-action/Cta03/Cta03.d.cts +3 -0
  10. package/dist/calls-to-action/Cta03/Cta03.d.ts +3 -0
  11. package/dist/calls-to-action/Cta03/Cta03.types.d.cts +18 -0
  12. package/dist/calls-to-action/Cta03/Cta03.types.d.ts +18 -0
  13. package/dist/features/Features01/Features01.d.cts +3 -0
  14. package/dist/features/Features01/Features01.d.ts +3 -0
  15. package/dist/features/Features01/Features01.types.d.cts +21 -0
  16. package/dist/features/Features01/Features01.types.d.ts +21 -0
  17. package/dist/features/Features02/Features02.d.cts +3 -0
  18. package/dist/features/Features02/Features02.d.ts +3 -0
  19. package/dist/features/Features02/Features02.types.d.cts +30 -0
  20. package/dist/features/Features02/Features02.types.d.ts +30 -0
  21. package/dist/features/Features03/Features03.d.cts +3 -0
  22. package/dist/features/Features03/Features03.d.ts +3 -0
  23. package/dist/features/Features03/Features03.types.d.cts +24 -0
  24. package/dist/features/Features03/Features03.types.d.ts +24 -0
  25. package/dist/features/Features04/Features04.d.cts +3 -0
  26. package/dist/features/Features04/Features04.d.ts +3 -0
  27. package/dist/features/Features04/Features04.types.d.cts +29 -0
  28. package/dist/features/Features04/Features04.types.d.ts +29 -0
  29. package/dist/features/Features05/Features05.d.cts +3 -0
  30. package/dist/features/Features05/Features05.d.ts +3 -0
  31. package/dist/features/Features05/Features05.types.d.cts +18 -0
  32. package/dist/features/Features05/Features05.types.d.ts +18 -0
  33. package/dist/footers/Footer01/Footer01.d.cts +3 -0
  34. package/dist/footers/Footer01/Footer01.d.ts +3 -0
  35. package/dist/footers/Footer01/Footer01.types.d.cts +32 -0
  36. package/dist/footers/Footer01/Footer01.types.d.ts +32 -0
  37. package/dist/footers/Footer02/Footer02.d.cts +3 -0
  38. package/dist/footers/Footer02/Footer02.d.ts +3 -0
  39. package/dist/footers/Footer02/Footer02.types.d.cts +18 -0
  40. package/dist/footers/Footer02/Footer02.types.d.ts +18 -0
  41. package/dist/footers/Footer03/Footer03.d.cts +3 -0
  42. package/dist/footers/Footer03/Footer03.d.ts +3 -0
  43. package/dist/footers/Footer03/Footer03.types.d.cts +53 -0
  44. package/dist/footers/Footer03/Footer03.types.d.ts +53 -0
  45. package/dist/footers/Footer04/Footer04.d.cts +3 -0
  46. package/dist/footers/Footer04/Footer04.d.ts +3 -0
  47. package/dist/footers/Footer04/Footer04.types.d.cts +18 -0
  48. package/dist/footers/Footer04/Footer04.types.d.ts +18 -0
  49. package/dist/headers/Header01/Header01.d.cts +6 -0
  50. package/dist/headers/Header01/Header01.d.ts +6 -0
  51. package/dist/headers/Header01/Header01.types.d.cts +18 -0
  52. package/dist/headers/Header01/Header01.types.d.ts +18 -0
  53. package/dist/headers/Header02/Header02.d.cts +6 -0
  54. package/dist/headers/Header02/Header02.d.ts +6 -0
  55. package/dist/headers/Header02/Header02.types.d.cts +69 -0
  56. package/dist/headers/Header02/Header02.types.d.ts +69 -0
  57. package/dist/headers/Header03/Header03.d.cts +6 -0
  58. package/dist/headers/Header03/Header03.d.ts +6 -0
  59. package/dist/headers/Header03/Header03.types.d.cts +24 -0
  60. package/dist/headers/Header03/Header03.types.d.ts +24 -0
  61. package/dist/headers/Header04/Header04.d.cts +3 -0
  62. package/dist/headers/Header04/Header04.d.ts +3 -0
  63. package/dist/headers/Header04/Header04.types.d.cts +47 -0
  64. package/dist/headers/Header04/Header04.types.d.ts +47 -0
  65. package/dist/headers/Header05/Header05.d.cts +3 -0
  66. package/dist/headers/Header05/Header05.d.ts +3 -0
  67. package/dist/headers/Header05/Header05.types.d.cts +27 -0
  68. package/dist/headers/Header05/Header05.types.d.ts +27 -0
  69. package/dist/index.cjs +1323 -7
  70. package/dist/index.cjs.map +4 -4
  71. package/dist/index.d.cts +45 -1
  72. package/dist/index.d.ts +45 -1
  73. package/dist/index.js +1336 -20
  74. package/dist/index.js.map +4 -4
  75. package/dist/pricing/Pricing01/Pricing01.d.cts +3 -0
  76. package/dist/pricing/Pricing01/Pricing01.d.ts +3 -0
  77. package/dist/pricing/Pricing01/Pricing01.types.d.cts +43 -0
  78. package/dist/pricing/Pricing01/Pricing01.types.d.ts +43 -0
  79. package/dist/pricing/Pricing02/Pricing02.d.cts +3 -0
  80. package/dist/pricing/Pricing02/Pricing02.d.ts +3 -0
  81. package/dist/pricing/Pricing02/Pricing02.types.d.cts +64 -0
  82. package/dist/pricing/Pricing02/Pricing02.types.d.ts +64 -0
  83. package/dist/pricing/Pricing03/Pricing03.d.cts +3 -0
  84. package/dist/pricing/Pricing03/Pricing03.d.ts +3 -0
  85. package/dist/pricing/Pricing03/Pricing03.types.d.cts +65 -0
  86. package/dist/pricing/Pricing03/Pricing03.types.d.ts +65 -0
  87. package/dist/pricing/Pricing04/Pricing04.d.cts +3 -0
  88. package/dist/pricing/Pricing04/Pricing04.d.ts +3 -0
  89. package/dist/pricing/Pricing04/Pricing04.types.d.cts +38 -0
  90. package/dist/pricing/Pricing04/Pricing04.types.d.ts +38 -0
  91. package/dist/pricing/Pricing05/Pricing05.d.cts +3 -0
  92. package/dist/pricing/Pricing05/Pricing05.d.ts +3 -0
  93. package/dist/pricing/Pricing05/Pricing05.types.d.cts +64 -0
  94. package/dist/pricing/Pricing05/Pricing05.types.d.ts +64 -0
  95. package/dist/shared/BlockActions.d.cts +1 -1
  96. package/dist/shared/BlockActions.d.ts +1 -1
  97. package/dist/shared/BlockBrandLink.d.cts +3 -0
  98. package/dist/shared/BlockBrandLink.d.ts +3 -0
  99. package/dist/shared/FooterColumns.d.cts +3 -0
  100. package/dist/shared/FooterColumns.d.ts +3 -0
  101. package/dist/shared/icons.d.cts +13 -3
  102. package/dist/shared/icons.d.ts +13 -3
  103. package/dist/shared/shared.types.d.cts +49 -1
  104. package/dist/shared/shared.types.d.ts +49 -1
  105. package/dist/styles.css +3762 -323
  106. package/package.json +2 -2
package/dist/index.cjs CHANGED
@@ -20,12 +20,34 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
20
20
  // blocks/src/index.ts
21
21
  var index_exports = {};
22
22
  __export(index_exports, {
23
+ Cta01: () => Cta01,
24
+ Cta02: () => Cta02,
25
+ Cta03: () => Cta03,
26
+ Features01: () => Features01,
27
+ Features02: () => Features02,
28
+ Features03: () => Features03,
29
+ Features04: () => Features04,
30
+ Features05: () => Features05,
31
+ Footer01: () => Footer01,
32
+ Footer02: () => Footer02,
33
+ Footer03: () => Footer03,
34
+ Footer04: () => Footer04,
35
+ Header01: () => Header01,
36
+ Header02: () => Header02,
37
+ Header03: () => Header03,
38
+ Header04: () => Header04,
39
+ Header05: () => Header05,
23
40
  Hero01: () => Hero01,
24
41
  Hero02: () => Hero02,
25
42
  Hero03: () => Hero03,
26
43
  Hero04: () => Hero04,
27
44
  Hero05: () => Hero05,
28
- Hero06: () => Hero06
45
+ Hero06: () => Hero06,
46
+ Pricing01: () => Pricing01,
47
+ Pricing02: () => Pricing02,
48
+ Pricing03: () => Pricing03,
49
+ Pricing04: () => Pricing04,
50
+ Pricing05: () => Pricing05
29
51
  });
30
52
  module.exports = __toCommonJS(index_exports);
31
53
 
@@ -36,18 +58,22 @@ var import_ui2 = require("@openwarelabs/ui");
36
58
  // blocks/src/shared/BlockActions.tsx
37
59
  var import_ui = require("@openwarelabs/ui");
38
60
  var import_jsx_runtime = require("react/jsx-runtime");
39
- function BlockActionButton({ action, variant }) {
61
+ function BlockActionButton({ action, variant, size = "lg", className, onAfterClick, fullWidth = false }) {
40
62
  const { label, href, onClick, startIcon, endIcon, target, "aria-label": ariaLabel } = action;
63
+ const click = onClick || onAfterClick ? (event) => {
64
+ onClick?.(event);
65
+ onAfterClick?.();
66
+ } : void 0;
41
67
  if (href !== void 0) {
42
68
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
43
69
  "a",
44
70
  {
45
- className: (0, import_ui.buttonClassName)({ variant, size: "lg", shape: "pill" }),
71
+ className: (0, import_ui.cx)((0, import_ui.buttonClassName)({ variant, size, shape: "pill" }), fullWidth && "ow-button--full", className),
46
72
  href,
47
73
  target,
48
74
  rel: target === "_blank" ? "noopener noreferrer" : void 0,
49
75
  "aria-label": ariaLabel,
50
- onClick,
76
+ onClick: click,
51
77
  children: [
52
78
  startIcon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ow-button__icon", children: startIcon }) : null,
53
79
  label,
@@ -56,7 +82,21 @@ function BlockActionButton({ action, variant }) {
56
82
  }
57
83
  );
58
84
  }
59
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Button, { variant, shape: "pill", size: "lg", startIcon, endIcon, "aria-label": ariaLabel, onClick, children: label });
85
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
86
+ import_ui.Button,
87
+ {
88
+ variant,
89
+ shape: "pill",
90
+ size,
91
+ startIcon,
92
+ endIcon,
93
+ "aria-label": ariaLabel,
94
+ onClick: click,
95
+ fullWidth,
96
+ className,
97
+ children: label
98
+ }
99
+ );
60
100
  }
61
101
  function BlockActions({ primary, secondary, className }) {
62
102
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className, children: [
@@ -87,7 +127,7 @@ var import_ui3 = require("@openwarelabs/ui");
87
127
 
88
128
  // blocks/src/shared/icons.tsx
89
129
  var import_jsx_runtime3 = require("react/jsx-runtime");
90
- var icon = (paths) => function BlockIcon({ size = 16 }) {
130
+ var icon = (paths) => function BlockIcon({ size = 16, strokeWidth = 2 }) {
91
131
  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
92
132
  "svg",
93
133
  {
@@ -97,7 +137,7 @@ var icon = (paths) => function BlockIcon({ size = 16 }) {
97
137
  viewBox: "0 0 24 24",
98
138
  fill: "none",
99
139
  stroke: "currentColor",
100
- strokeWidth: 2,
140
+ strokeWidth,
101
141
  strokeLinecap: "round",
102
142
  strokeLinejoin: "round",
103
143
  "aria-hidden": "true",
@@ -119,6 +159,57 @@ var DownloadIcon = icon(
119
159
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m7 10 5 5 5-5" })
120
160
  ] })
121
161
  );
162
+ var MenuIcon = icon(
163
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
164
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M4 5h16" }),
165
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M4 12h16" }),
166
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M4 19h16" })
167
+ ] })
168
+ );
169
+ var XIcon = icon(
170
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
171
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M18 6 6 18" }),
172
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m6 6 12 12" })
173
+ ] })
174
+ );
175
+ var ChevronDownIcon = icon(/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m6 9 6 6 6-6" }));
176
+ var ChevronRightIcon = icon(/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m9 18 6-6-6-6" }));
177
+ var ArrowRightIcon = icon(
178
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
179
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M5 12h14" }),
180
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m12 5 7 7-7 7" })
181
+ ] })
182
+ );
183
+ var MinusIcon = icon(/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M5 12h14" }));
184
+ var SunIcon = icon(
185
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
186
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "12", cy: "12", r: "4" }),
187
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 2v2" }),
188
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 20v2" }),
189
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m4.93 4.93 1.41 1.41" }),
190
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m17.66 17.66 1.41 1.41" }),
191
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M2 12h2" }),
192
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M20 12h2" }),
193
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m6.34 17.66-1.41 1.41" }),
194
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m19.07 4.93-1.41 1.41" })
195
+ ] })
196
+ );
197
+ var MoonIcon = icon(
198
+ /* @__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" })
199
+ );
200
+ var MonitorIcon = icon(
201
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
202
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { width: "20", height: "14", x: "2", y: "3", rx: "2" }),
203
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "8", x2: "16", y1: "21", y2: "21" }),
204
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "12", x2: "12", y1: "17", y2: "21" })
205
+ ] })
206
+ );
207
+ var CircleCheckIcon = icon(
208
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
209
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
210
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m16 9-5.5 5.5L8 12" })
211
+ ] })
212
+ );
122
213
 
123
214
  // blocks/src/heroes/Hero02/Hero02.tsx
124
215
  var import_jsx_runtime4 = require("react/jsx-runtime");
@@ -367,4 +458,1229 @@ function Hero06({
367
458
  visual
368
459
  ] }) });
369
460
  }
461
+
462
+ // blocks/src/headers/Header01/Header01.tsx
463
+ var import_react8 = require("react");
464
+ var import_ui9 = require("@openwarelabs/ui");
465
+
466
+ // blocks/src/shared/BlockBrandLink.tsx
467
+ var import_react7 = require("react");
468
+ var import_ui8 = require("@openwarelabs/ui");
469
+ var import_jsx_runtime9 = require("react/jsx-runtime");
470
+ var BlockBrandLink = (0, import_react7.forwardRef)(function BlockBrandLink2({ brand, className }, ref) {
471
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_ui8.Link, { ref, href: brand.href, variant: "standalone", className, children: [
472
+ brand.logo,
473
+ brand.name
474
+ ] });
475
+ });
476
+
477
+ // blocks/src/headers/Header01/Header01.tsx
478
+ var import_jsx_runtime10 = require("react/jsx-runtime");
479
+ function Header01({ brand, links, primaryAction, secondaryLink, labels = {}, className, ...props }) {
480
+ const [menuOpen, setMenuOpen] = (0, import_react8.useState)(false);
481
+ const menuLabel = labels.menu ?? "Menu";
482
+ (0, import_react8.useEffect)(() => {
483
+ const wide = window.matchMedia("(min-width: 761px)");
484
+ const onChange = () => wide.matches && setMenuOpen(false);
485
+ wide.addEventListener("change", onChange);
486
+ return () => wide.removeEventListener("change", onChange);
487
+ }, []);
488
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: (0, import_ui9.cx)("ow-header01", className), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
489
+ import_ui9.SiteHeader,
490
+ {
491
+ brand: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(BlockBrandLink, { brand, className: "ow-header01__brand" }),
492
+ 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)),
493
+ actions: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
494
+ secondaryLink ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
495
+ import_ui9.Link,
496
+ {
497
+ href: secondaryLink.href,
498
+ variant: "standalone",
499
+ className: "ow-header01__sign-in",
500
+ "aria-current": secondaryLink.current ? "page" : void 0,
501
+ children: secondaryLink.label
502
+ }
503
+ ) : null,
504
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(BlockActionButton, { action: primaryAction, variant: "primary", size: "sm" }),
505
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "ow-header01__phone-menu", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
506
+ import_ui9.Popover,
507
+ {
508
+ "aria-label": menuLabel,
509
+ placement: "bottom-end",
510
+ width: 240,
511
+ open: menuOpen,
512
+ onOpenChange: setMenuOpen,
513
+ 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 }) }),
514
+ children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("nav", { className: "ow-header01__menu", "aria-label": "Main", children: [
515
+ links.map((link, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
516
+ import_ui9.Link,
517
+ {
518
+ href: link.href,
519
+ variant: "standalone",
520
+ className: "ow-header01__menu-link",
521
+ "aria-current": link.current ? "page" : void 0,
522
+ onClick: () => setMenuOpen(false),
523
+ children: link.label
524
+ },
525
+ index
526
+ )),
527
+ secondaryLink ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
528
+ import_ui9.Link,
529
+ {
530
+ href: secondaryLink.href,
531
+ variant: "standalone",
532
+ className: "ow-header01__menu-link ow-header01__menu-link--sign-in",
533
+ onClick: () => setMenuOpen(false),
534
+ children: secondaryLink.label
535
+ }
536
+ ) : null
537
+ ] })
538
+ }
539
+ ) })
540
+ ] })
541
+ }
542
+ ) });
543
+ }
544
+
545
+ // blocks/src/headers/Header02/Header02.tsx
546
+ var import_react9 = require("react");
547
+ var import_ui10 = require("@openwarelabs/ui");
548
+ var import_jsx_runtime11 = require("react/jsx-runtime");
549
+ var navigateTo = (href) => window.location.assign(href);
550
+ function PanelContent({ panel, onNavigate }) {
551
+ return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "ow-header02__product", children: [
552
+ /* @__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: [
553
+ feature.icon ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "ow-header02__feature-icon", "aria-hidden": "true", children: feature.icon }) : null,
554
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "ow-header02__feature-text", children: [
555
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_ui10.Text, { variant: "label", children: feature.title }),
556
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_ui10.Text, { variant: "caption", children: feature.description })
557
+ ] })
558
+ ] }) }, index)) }),
559
+ panel.highlight ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_ui10.Link, { href: panel.highlight.href, variant: "standalone", className: "ow-header02__news", onClick: onNavigate, children: [
560
+ panel.highlight.badge ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_ui10.Badge, { size: "sm", variant: "active", children: panel.highlight.badge }) : null,
561
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_ui10.Text, { variant: "label", children: panel.highlight.title }),
562
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_ui10.Text, { as: "span", tone: "primary", className: "ow-header02__news-link", children: [
563
+ panel.highlight.linkLabel,
564
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ArrowRightIcon, { size: 14 })
565
+ ] })
566
+ ] }) : null
567
+ ] });
568
+ }
569
+ function Header02({
570
+ brand,
571
+ panel,
572
+ menus = [],
573
+ links = [],
574
+ primaryAction,
575
+ secondaryLink,
576
+ onNavigate = navigateTo,
577
+ defaultPanelOpen = false,
578
+ labels = {},
579
+ className,
580
+ ...props
581
+ }) {
582
+ const [productOpen, setProductOpen] = (0, import_react9.useState)(defaultPanelOpen);
583
+ const [phoneOpen, setPhoneOpen] = (0, import_react9.useState)(false);
584
+ const phoneId = (0, import_react9.useId)();
585
+ const closePhone = () => setPhoneOpen(false);
586
+ (0, import_react9.useEffect)(() => {
587
+ const wide = window.matchMedia("(min-width: 761px)");
588
+ const onChange = () => wide.matches ? setPhoneOpen(false) : setProductOpen(false);
589
+ wide.addEventListener("change", onChange);
590
+ return () => wide.removeEventListener("change", onChange);
591
+ }, []);
592
+ return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("header", { className: (0, import_ui10.cx)("ow-header02", className), ...props, children: [
593
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "ow-header02__inner", children: [
594
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(BlockBrandLink, { brand, className: "ow-header02__brand" }),
595
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("nav", { className: "ow-header02__nav", "aria-label": "Main", children: [
596
+ panel ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
597
+ import_ui10.Popover,
598
+ {
599
+ className: "ow-header02__popover",
600
+ "aria-label": panel.label,
601
+ width: 720,
602
+ autoFocus: false,
603
+ open: productOpen,
604
+ onOpenChange: setProductOpen,
605
+ 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 }),
606
+ children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PanelContent, { panel, onNavigate: () => setProductOpen(false) })
607
+ }
608
+ ) : null,
609
+ menus.map((menu) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
610
+ import_ui10.Menu,
611
+ {
612
+ label: menu.label,
613
+ width: 220,
614
+ 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 }),
615
+ children: menu.groups.map((group, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react9.Fragment, { children: [
616
+ index > 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_ui10.MenuSeparator, {}) : null,
617
+ group.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_ui10.MenuItem, { icon: entry.icon, onSelect: () => onNavigate(entry.href), children: entry.label }, entry.label))
618
+ ] }, index))
619
+ },
620
+ menu.label
621
+ )),
622
+ links.map((link, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
623
+ "a",
624
+ {
625
+ href: link.href,
626
+ className: (0, import_ui10.cx)((0, import_ui10.buttonClassName)({ variant: "ghost", shape: "pill", size: "sm" }), "ow-header02__item"),
627
+ "aria-current": link.current ? "page" : void 0,
628
+ children: link.label
629
+ },
630
+ index
631
+ ))
632
+ ] }),
633
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "ow-header02__actions", children: [
634
+ secondaryLink ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
635
+ "a",
636
+ {
637
+ href: secondaryLink.href,
638
+ className: (0, import_ui10.cx)((0, import_ui10.buttonClassName)({ variant: "ghost", shape: "pill", size: "sm" }), "ow-header02__item ow-header02__sign-in"),
639
+ children: secondaryLink.label
640
+ }
641
+ ) : null,
642
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(BlockActionButton, { action: primaryAction, variant: "primary", size: "sm" }),
643
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
644
+ import_ui10.Button,
645
+ {
646
+ className: "ow-header02__toggle",
647
+ variant: "ghost",
648
+ size: "sm",
649
+ iconOnly: true,
650
+ "aria-label": labels.menu ?? "Menu",
651
+ "aria-expanded": phoneOpen,
652
+ "aria-controls": phoneId,
653
+ onClick: () => setPhoneOpen((open) => !open),
654
+ children: phoneOpen ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(XIcon, { size: 18 }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MenuIcon, { size: 18 })
655
+ }
656
+ )
657
+ ] })
658
+ ] }),
659
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("nav", { id: phoneId, className: "ow-header02__panel", "aria-label": "Main", hidden: !phoneOpen, children: [
660
+ panel ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
661
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_ui10.Text, { variant: "overline", as: "p", className: "ow-header02__panel-label", children: panel.label }),
662
+ /* @__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: [
663
+ feature.icon,
664
+ feature.title
665
+ ] }) }, index)) })
666
+ ] }) : null,
667
+ menus.map((menu) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react9.Fragment, { children: [
668
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_ui10.Text, { variant: "overline", as: "p", className: "ow-header02__panel-label", children: menu.label }),
669
+ /* @__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)) })
670
+ ] }, menu.label)),
671
+ 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)(
672
+ import_ui10.Link,
673
+ {
674
+ href: link.href,
675
+ variant: "standalone",
676
+ className: "ow-header02__panel-link",
677
+ "aria-current": link.current ? "page" : void 0,
678
+ onClick: closePhone,
679
+ children: link.label
680
+ }
681
+ ) }, index)) }) : null,
682
+ 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
683
+ ] })
684
+ ] });
685
+ }
686
+
687
+ // blocks/src/headers/Header03/Header03.tsx
688
+ var import_ui11 = require("@openwarelabs/ui");
689
+ var import_jsx_runtime12 = require("react/jsx-runtime");
690
+ function NavLink({ link }) {
691
+ 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 });
692
+ }
693
+ function Header03({ brand, start, end = [], primaryAction, secondaryLink, labels = {}, className, ...props }) {
694
+ return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("header", { className: (0, import_ui11.cx)("ow-header03", className), ...props, children: [
695
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "ow-header03__inner", children: [
696
+ /* @__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)) }),
697
+ 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,
698
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(BlockBrandLink, { brand, className: "ow-header03__brand" }),
699
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "ow-header03__end", children: [
700
+ 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,
701
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "ow-header03__actions", children: [
702
+ secondaryLink ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(NavLink, { link: secondaryLink }) : null,
703
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(BlockActionButton, { action: primaryAction, variant: "primary", size: "sm" })
704
+ ] })
705
+ ] })
706
+ ] }),
707
+ /* @__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)) }) }) })
708
+ ] });
709
+ }
710
+
711
+ // blocks/src/headers/Header04/Header04.tsx
712
+ var import_react10 = require("react");
713
+ var import_ui12 = require("@openwarelabs/ui");
714
+ var import_jsx_runtime13 = require("react/jsx-runtime");
715
+ var navigateTo2 = (href) => window.location.assign(href);
716
+ function Header04({
717
+ announcement,
718
+ onDismiss,
719
+ defaultDismissed = false,
720
+ brand,
721
+ links,
722
+ primaryAction,
723
+ secondaryLink,
724
+ onNavigate = navigateTo2,
725
+ labels = {},
726
+ className,
727
+ ...props
728
+ }) {
729
+ const [closed, setClosed] = (0, import_react10.useState)(defaultDismissed);
730
+ const brandRef = (0, import_react10.useRef)(null);
731
+ const dismiss = () => {
732
+ setClosed(true);
733
+ onDismiss?.();
734
+ brandRef.current?.focus();
735
+ };
736
+ return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: (0, import_ui12.cx)("ow-header04", className), ...props, children: [
737
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
738
+ "aside",
739
+ {
740
+ className: "ow-header04__notice",
741
+ "aria-label": labels.announcement ?? "Announcement",
742
+ "data-closed": closed || void 0,
743
+ "aria-hidden": closed || void 0,
744
+ 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: [
745
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_ui12.Text, { className: "ow-header04__message", children: [
746
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "ow-header04__dot", "aria-hidden": "true" }),
747
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("strong", { children: announcement.title }),
748
+ announcement.description ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
749
+ " ",
750
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "ow-header04__detail", children: announcement.description })
751
+ ] }) : null,
752
+ announcement.link ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_ui12.Link, { href: announcement.link.href, className: "ow-header04__link", children: [
753
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "ow-header04__link-wide", children: announcement.link.label }),
754
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "ow-header04__link-narrow", children: announcement.link.shortLabel ?? announcement.link.label }),
755
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ArrowRightIcon, { size: 14 })
756
+ ] }) : null
757
+ ] }),
758
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_ui12.CloseButton, { size: "sm", label: labels.dismiss ?? "Dismiss the announcement", onClick: dismiss })
759
+ ] }) })
760
+ }
761
+ ),
762
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("header", { className: "ow-header04__header", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "ow-header04__inner", children: [
763
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(BlockBrandLink, { ref: brandRef, brand, className: "ow-header04__brand" }),
764
+ /* @__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)(
765
+ import_ui12.Link,
766
+ {
767
+ href: link.href,
768
+ variant: "standalone",
769
+ className: "ow-header04__link-plain",
770
+ "aria-current": link.current ? "page" : void 0,
771
+ children: link.label
772
+ },
773
+ index
774
+ )) }),
775
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "ow-header04__actions", children: [
776
+ secondaryLink ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_ui12.Link, { href: secondaryLink.href, variant: "standalone", className: "ow-header04__link-plain", children: secondaryLink.label }) : null,
777
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(BlockActionButton, { action: primaryAction, variant: "primary", size: "sm" }),
778
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "ow-header04__phone-menu", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
779
+ import_ui12.Menu,
780
+ {
781
+ label: labels.menu ?? "Menu",
782
+ align: "end",
783
+ width: 220,
784
+ 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 }) }),
785
+ children: [
786
+ links.map((link, index) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_ui12.MenuItem, { onSelect: () => onNavigate(link.href), children: link.label }, index)),
787
+ secondaryLink ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
788
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_ui12.MenuSeparator, {}),
789
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_ui12.MenuItem, { onSelect: () => onNavigate(secondaryLink.href), children: secondaryLink.label })
790
+ ] }) : null
791
+ ]
792
+ }
793
+ ) })
794
+ ] })
795
+ ] }) })
796
+ ] });
797
+ }
798
+
799
+ // blocks/src/headers/Header05/Header05.tsx
800
+ var import_react11 = require("react");
801
+ var import_ui13 = require("@openwarelabs/ui");
802
+ var import_jsx_runtime14 = require("react/jsx-runtime");
803
+ var narrow = "(max-width: 1024px)";
804
+ function Header05({ brand, links, more, primaryAction, secondaryLink, defaultOpen = false, labels = {}, className, ...props }) {
805
+ const [open, setOpen] = (0, import_react11.useState)(defaultOpen);
806
+ const moreId = (0, import_react11.useId)();
807
+ (0, import_react11.useEffect)(() => {
808
+ const query = window.matchMedia(narrow);
809
+ const onChange = () => !query.matches && setOpen(false);
810
+ query.addEventListener("change", onChange);
811
+ return () => query.removeEventListener("change", onChange);
812
+ }, []);
813
+ const close = () => setOpen(false);
814
+ return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
815
+ /* @__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: [
816
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(BlockBrandLink, { brand, className: "ow-header05__brand" }),
817
+ /* @__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)(
818
+ import_ui13.Link,
819
+ {
820
+ href: link.href,
821
+ variant: "standalone",
822
+ className: "ow-header05__link",
823
+ "aria-current": link.current ? "page" : void 0,
824
+ children: link.label
825
+ },
826
+ index
827
+ )) }),
828
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "ow-header05__actions", children: [
829
+ secondaryLink ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_ui13.Link, { href: secondaryLink.href, variant: "standalone", className: "ow-header05__link", children: secondaryLink.label }) : null,
830
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(BlockActionButton, { action: primaryAction, variant: "primary", size: "sm" }),
831
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
832
+ import_ui13.Button,
833
+ {
834
+ className: "ow-header05__open",
835
+ variant: "ghost",
836
+ size: "sm",
837
+ iconOnly: true,
838
+ "aria-label": labels.open ?? "Open menu",
839
+ "aria-haspopup": "dialog",
840
+ "aria-expanded": open,
841
+ onClick: () => setOpen(true),
842
+ children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MenuIcon, { size: 18 })
843
+ }
844
+ )
845
+ ] })
846
+ ] }) }),
847
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
848
+ import_ui13.Drawer,
849
+ {
850
+ className: "ow-header05__drawer",
851
+ open,
852
+ onClose: close,
853
+ title: labels.title ?? "Menu",
854
+ side: "right",
855
+ size: 320,
856
+ footer: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
857
+ secondaryLink ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("a", { href: secondaryLink.href, className: (0, import_ui13.buttonClassName)({ shape: "pill" }), onClick: close, children: secondaryLink.label }) : null,
858
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(BlockActionButton, { action: primaryAction, variant: "primary", size: "md", onAfterClick: close })
859
+ ] }),
860
+ children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("nav", { "aria-label": "Main", children: [
861
+ /* @__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)(
862
+ import_ui13.Link,
863
+ {
864
+ href: link.href,
865
+ variant: "standalone",
866
+ className: "ow-header05__drawer-link",
867
+ "aria-current": link.current ? "page" : void 0,
868
+ onClick: close,
869
+ children: [
870
+ link.label,
871
+ link.current ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "ow-header05__current", "aria-hidden": "true" }) : null,
872
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ChevronRightIcon, { size: 16 })
873
+ ]
874
+ }
875
+ ) }, index)) }),
876
+ more ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "ow-header05__more", children: [
877
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_ui13.Text, { variant: "overline", as: "p", className: "ow-header05__more-label", id: moreId, children: more.title }),
878
+ /* @__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)) })
879
+ ] }) : null
880
+ ] })
881
+ }
882
+ )
883
+ ] });
884
+ }
885
+
886
+ // blocks/src/pricing/Pricing01/Pricing01.tsx
887
+ var import_react12 = require("react");
888
+ var import_ui14 = require("@openwarelabs/ui");
889
+ var import_jsx_runtime15 = require("react/jsx-runtime");
890
+ function Pricing01({ eyebrow, title, description, plans, enterprise, note, className, ...props }) {
891
+ const id = (0, import_react12.useId)();
892
+ 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: [
893
+ /* @__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 }),
894
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "ow-pricing01__grid", children: plans.map((plan, index) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
895
+ import_ui14.Card,
896
+ {
897
+ padding: "none",
898
+ className: "ow-pricing01__card",
899
+ "data-recommended": plan.recommended || void 0,
900
+ "aria-labelledby": `${id}-plan-${index}`,
901
+ role: "group",
902
+ children: [
903
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "ow-pricing01__head", children: [
904
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "ow-pricing01__name-row", children: [
905
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_ui14.Text, { variant: "card-title", id: `${id}-plan-${index}`, children: plan.name }),
906
+ plan.badge ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_ui14.Badge, { size: "sm", variant: "active", children: plan.badge }) : null
907
+ ] }),
908
+ plan.summary ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_ui14.Text, { variant: "copy", className: "ow-pricing01__summary", children: plan.summary }) : null,
909
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_ui14.Text, { as: "p", variant: "body", tone: "muted", className: "ow-pricing01__price", children: [
910
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_ui14.Text, { as: "span", variant: "section-title", tone: "default", className: "ow-pricing01__amount", children: plan.price }),
911
+ plan.unit
912
+ ] }),
913
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BlockActionButton, { action: plan.action, variant: plan.recommended ? "primary" : "secondary", size: "md", fullWidth: true })
914
+ ] }),
915
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "ow-pricing01__body", children: [
916
+ plan.featuresTitle ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_ui14.Text, { as: "p", variant: "label", children: plan.featuresTitle }) : null,
917
+ /* @__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: [
918
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CheckIcon, { size: 16 }),
919
+ feature
920
+ ] }, featureIndex)) })
921
+ ] })
922
+ ]
923
+ },
924
+ index
925
+ )) }),
926
+ enterprise ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "ow-pricing01__enterprise", children: [
927
+ enterprise.icon ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "ow-pricing01__enterprise-icon", "aria-hidden": "true", children: enterprise.icon }) : null,
928
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_ui14.Text, { variant: "copy", className: "ow-pricing01__enterprise-text", children: [
929
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_ui14.Text, { as: "strong", variant: "label", tone: "default", children: enterprise.title }),
930
+ " ",
931
+ enterprise.description
932
+ ] }),
933
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_ui14.Link, { href: enterprise.link.href, variant: "standalone", className: "ow-pricing01__enterprise-link", children: [
934
+ enterprise.link.label,
935
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ArrowRightIcon, { size: 14 })
936
+ ] })
937
+ ] }) : null,
938
+ note ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_ui14.Text, { as: "p", variant: "caption", align: "center", className: "ow-pricing01__note", children: note }) : null
939
+ ] }) });
940
+ }
941
+
942
+ // blocks/src/pricing/Pricing02/Pricing02.tsx
943
+ var import_react13 = require("react");
944
+ var import_ui15 = require("@openwarelabs/ui");
945
+ var import_jsx_runtime16 = require("react/jsx-runtime");
946
+ var priceFor = (plan, period) => "amount" in plan.price ? plan.price : plan.price[period];
947
+ var includes = (name) => `${name} includes`;
948
+ function Pricing02({
949
+ eyebrow,
950
+ title,
951
+ description,
952
+ plans,
953
+ periodNote,
954
+ defaultPeriod = "monthly",
955
+ onPeriodChange,
956
+ note,
957
+ labels = {},
958
+ className,
959
+ ...props
960
+ }) {
961
+ const [period, setPeriod] = (0, import_react13.useState)(defaultPeriod);
962
+ const id = (0, import_react13.useId)();
963
+ 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: [
964
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "ow-pricing02__header", children: [
965
+ /* @__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 }),
966
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "ow-pricing02__switch", children: [
967
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
968
+ import_ui15.SegmentedControl,
969
+ {
970
+ "aria-label": labels.period ?? "Billing period",
971
+ value: period,
972
+ onChange: (value) => {
973
+ setPeriod(value);
974
+ onPeriodChange?.(value);
975
+ },
976
+ options: [
977
+ { value: "monthly", label: labels.monthly ?? "Monthly" },
978
+ { value: "yearly", label: labels.yearly ?? "Yearly" }
979
+ ]
980
+ }
981
+ ),
982
+ periodNote ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_ui15.Text, { as: "p", variant: "caption", children: periodNote }) : null
983
+ ] })
984
+ ] }),
985
+ /* @__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." }),
986
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "ow-pricing02__panel", children: plans.map((plan, index) => {
987
+ const price = priceFor(plan, period);
988
+ return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "ow-pricing02__plan", "data-popular": plan.recommended || void 0, children: [
989
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "ow-pricing02__name-row", children: [
990
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_ui15.Text, { variant: "card-title", children: plan.name }),
991
+ plan.badge ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_ui15.Badge, { size: "sm", variant: "active", children: plan.badge }) : null
992
+ ] }),
993
+ plan.summary ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_ui15.Text, { variant: "copy", className: "ow-pricing02__summary", children: plan.summary }) : null,
994
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "ow-pricing02__price", children: [
995
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_ui15.Text, { as: "p", variant: "body", tone: "muted", className: "ow-pricing02__figure", children: [
996
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
997
+ import_ui15.Text,
998
+ {
999
+ as: "span",
1000
+ variant: "section-title",
1001
+ tone: "default",
1002
+ className: price.custom ? "ow-pricing02__amount ow-pricing02__amount--text" : "ow-pricing02__amount",
1003
+ children: price.amount
1004
+ },
1005
+ price.amount
1006
+ ),
1007
+ price.unit
1008
+ ] }),
1009
+ price.billing ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_ui15.Text, { as: "p", variant: "caption", className: "ow-pricing02__billing", children: price.billing }) : null
1010
+ ] }),
1011
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(BlockActionButton, { action: plan.action, variant: plan.recommended ? "primary" : "secondary", size: "md", fullWidth: true }),
1012
+ /* @__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: [
1013
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CheckIcon, { size: 16 }),
1014
+ feature
1015
+ ] }, featureIndex)) })
1016
+ ] }, index);
1017
+ }) }),
1018
+ note ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_ui15.Text, { as: "p", variant: "caption", align: "center", className: "ow-pricing02__note", children: note }) : null
1019
+ ] }) });
1020
+ }
1021
+
1022
+ // blocks/src/pricing/Pricing03/Pricing03.tsx
1023
+ var import_react14 = require("react");
1024
+ var import_ui16 = require("@openwarelabs/ui");
1025
+ var import_jsx_runtime17 = require("react/jsx-runtime");
1026
+ var phoneQuery = "(max-width: 760px)";
1027
+ function useIsPhone() {
1028
+ return (0, import_react14.useSyncExternalStore)(
1029
+ (onChange) => {
1030
+ const list = window.matchMedia(phoneQuery);
1031
+ list.addEventListener("change", onChange);
1032
+ return () => list.removeEventListener("change", onChange);
1033
+ },
1034
+ () => window.matchMedia(phoneQuery).matches,
1035
+ () => false
1036
+ );
1037
+ }
1038
+ var caption = (title) => `${title}, by plan`;
1039
+ function Pricing03({ eyebrow, title, description, plans, groups, pricesNote, defaultPlan, note, labels = {}, className, ...props }) {
1040
+ const id = (0, import_react14.useId)();
1041
+ const isPhone = useIsPhone();
1042
+ const [picked, setPicked] = (0, import_react14.useState)(() => defaultPlan ?? (plans.find((plan) => plan.recommended) ?? plans[0])?.id ?? "");
1043
+ const shown = isPhone ? plans.filter((plan) => plan.id === picked) : plans;
1044
+ const cell = (value) => {
1045
+ if (value === true) {
1046
+ return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "ow-pricing03__yes", children: [
1047
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CheckIcon, { size: 14, strokeWidth: 2.5 }),
1048
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_ui16.VisuallyHidden, { children: labels.included ?? "Included" })
1049
+ ] });
1050
+ }
1051
+ if (value === false) {
1052
+ return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "ow-pricing03__no", children: [
1053
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(MinusIcon, { size: 16 }),
1054
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_ui16.VisuallyHidden, { children: labels.notIncluded ?? "Not included" })
1055
+ ] });
1056
+ }
1057
+ return value;
1058
+ };
1059
+ const columns = (groupTitle) => [
1060
+ {
1061
+ key: "feature",
1062
+ header: groupTitle,
1063
+ render: (row) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_ui16.Text, { as: "span", variant: "body", className: "ow-pricing03__feature", children: [
1064
+ row.feature,
1065
+ row.note ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_ui16.Text, { variant: "caption", className: "ow-pricing03__feature-note", children: row.note }) : null
1066
+ ] })
1067
+ },
1068
+ ...shown.map((plan) => ({
1069
+ key: plan.id,
1070
+ header: plan.name,
1071
+ render: (row) => cell(row.values[plan.id])
1072
+ }))
1073
+ ];
1074
+ 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: [
1075
+ /* @__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 }),
1076
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "ow-pricing03__picker", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1077
+ import_ui16.SegmentedControl,
1078
+ {
1079
+ "aria-label": labels.picker ?? "Plan to compare",
1080
+ fullWidth: true,
1081
+ value: picked,
1082
+ onChange: setPicked,
1083
+ options: plans.map((plan) => ({ value: plan.id, label: plan.name }))
1084
+ }
1085
+ ) }),
1086
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "ow-pricing03__plans", children: [
1087
+ pricesNote ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_ui16.Text, { as: "p", variant: "caption", className: "ow-pricing03__plans-label", children: pricesNote }) : null,
1088
+ shown.map((plan) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "ow-pricing03__plan", children: [
1089
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_ui16.Text, { as: "p", variant: "card-title", className: "ow-pricing03__plan-name", children: [
1090
+ plan.name,
1091
+ plan.badge ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_ui16.Badge, { size: "sm", variant: "active", children: plan.badge }) : null
1092
+ ] }),
1093
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_ui16.Text, { as: "p", variant: "caption", className: "ow-pricing03__plan-price", children: [
1094
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_ui16.Text, { as: "strong", variant: "label", tone: "default", className: "ow-pricing03__plan-amount", children: plan.price }),
1095
+ " ",
1096
+ plan.unit
1097
+ ] }),
1098
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(BlockActionButton, { action: plan.action, variant: plan.recommended ? "primary" : "secondary", size: "sm" })
1099
+ ] }, plan.id))
1100
+ ] }),
1101
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "ow-pricing03__groups", children: groups.map((group) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1102
+ import_ui16.Table,
1103
+ {
1104
+ className: "ow-pricing03__group",
1105
+ caption: (labels.caption ?? caption)(group.title),
1106
+ hideCaption: true,
1107
+ columns: columns(group.title),
1108
+ rows: group.rows.map((row, index) => ({ ...row, id: `${group.title}-${index}` }))
1109
+ },
1110
+ group.title
1111
+ )) }),
1112
+ note ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_ui16.Text, { as: "p", variant: "caption", align: "center", className: "ow-pricing03__note", children: note }) : null
1113
+ ] }) });
1114
+ }
1115
+
1116
+ // blocks/src/pricing/Pricing04/Pricing04.tsx
1117
+ var import_react15 = require("react");
1118
+ var import_ui17 = require("@openwarelabs/ui");
1119
+ var import_jsx_runtime18 = require("react/jsx-runtime");
1120
+ function Pricing04({ eyebrow, title, description, product, offer, promises, className, ...props }) {
1121
+ const id = (0, import_react15.useId)();
1122
+ 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: [
1123
+ /* @__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 }),
1124
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_ui17.Card, { padding: "none", className: "ow-pricing04__card", children: [
1125
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "ow-pricing04__details", children: [
1126
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_ui17.Text, { variant: "heading", children: product.name }),
1127
+ product.description ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_ui17.Text, { variant: "copy", className: "ow-pricing04__description", children: product.description }) : null,
1128
+ 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,
1129
+ /* @__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: [
1130
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(CheckIcon, { size: 16 }),
1131
+ feature
1132
+ ] }, index)) })
1133
+ ] }),
1134
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "ow-pricing04__offer", children: [
1135
+ offer.label ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_ui17.Text, { as: "p", variant: "label", tone: "soft", children: offer.label }) : null,
1136
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_ui17.Text, { as: "p", variant: "label", tone: "muted", className: "ow-pricing04__price", children: [
1137
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_ui17.Text, { as: "span", variant: "page-title", tone: "default", className: "ow-pricing04__amount", children: offer.price }),
1138
+ offer.currency
1139
+ ] }),
1140
+ offer.unit ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_ui17.Text, { variant: "body", tone: "muted", className: "ow-pricing04__unit", children: offer.unit }) : null,
1141
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(BlockActionButton, { action: offer.action, variant: "primary", fullWidth: true }),
1142
+ offer.note ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_ui17.Text, { as: "p", variant: "caption", className: "ow-pricing04__fine", children: offer.note }) : null
1143
+ ] })
1144
+ ] }),
1145
+ 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: [
1146
+ promise.icon,
1147
+ promise.text
1148
+ ] }, index)) }) : null
1149
+ ] }) });
1150
+ }
1151
+
1152
+ // blocks/src/pricing/Pricing05/Pricing05.tsx
1153
+ var import_react16 = require("react");
1154
+ var import_ui18 = require("@openwarelabs/ui");
1155
+ var import_jsx_runtime19 = require("react/jsx-runtime");
1156
+ function estimate(tiers, units) {
1157
+ const lines = tiers.map((tier) => {
1158
+ const count = Math.max(0, Math.min(units, tier.to) - tier.from);
1159
+ return { tier, count, cost: count * tier.price };
1160
+ });
1161
+ return { lines, total: lines.reduce((sum, line) => sum + line.cost, 0) };
1162
+ }
1163
+ var capitalise = (text) => text.charAt(0).toUpperCase() + text.slice(1);
1164
+ function Pricing05({
1165
+ eyebrow,
1166
+ title,
1167
+ description,
1168
+ tiers,
1169
+ aside,
1170
+ estimate: words,
1171
+ max,
1172
+ step = max / 200,
1173
+ defaultValue,
1174
+ marks = [0, max / 4, max / 2, max * 3 / 4, max],
1175
+ currency = "EUR",
1176
+ locale,
1177
+ action,
1178
+ note,
1179
+ labels = {},
1180
+ className,
1181
+ ...props
1182
+ }) {
1183
+ const id = (0, import_react16.useId)();
1184
+ const [units, setUnits] = (0, import_react16.useState)(defaultValue);
1185
+ const { lines, total } = estimate(tiers, units);
1186
+ const current = tiers.findIndex((tier) => units <= tier.to);
1187
+ const unit = labels.unit ?? "unit";
1188
+ const plural = labels.units ?? "units";
1189
+ const perMonth = labels.perMonth ?? `${plural} a month`;
1190
+ const format = (0, import_react16.useMemo)(() => {
1191
+ const number = new Intl.NumberFormat(locale);
1192
+ const money = new Intl.NumberFormat(locale, { style: "currency", currency });
1193
+ const unitPrice = new Intl.NumberFormat(locale, { style: "currency", currency, minimumFractionDigits: 2, maximumFractionDigits: 3 });
1194
+ return { number: (value) => number.format(value), money: (value) => money.format(value), unitPrice: (value) => unitPrice.format(value) };
1195
+ }, [locale, currency]);
1196
+ const rangeLabel = (tier) => {
1197
+ if (tier.from === 0) return `First ${format.number(tier.to)} ${plural}`;
1198
+ if (tier.to === Infinity) return `Over ${format.number(tier.from)}`;
1199
+ return `${format.number(tier.from + 1)} to ${format.number(tier.to)}`;
1200
+ };
1201
+ const mark = (value) => value === 0 ? "0" : value >= 1e3 && value % 1e3 === 0 ? `${value / 1e3}k` : format.number(value);
1202
+ 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: [
1203
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
1204
+ /* @__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 }),
1205
+ /* @__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: [
1206
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "ow-pricing05__tier-dot", "aria-hidden": "true" }),
1207
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_ui18.Text, { variant: index === current ? "label" : "body", tone: index === current ? "default" : "soft", children: rangeLabel(tier) }),
1208
+ /* @__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: [
1209
+ format.unitPrice(tier.price),
1210
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_ui18.Text, { as: "small", variant: "caption", className: "ow-pricing05__tier-unit", children: [
1211
+ "a ",
1212
+ unit
1213
+ ] })
1214
+ ] }) })
1215
+ ] }, tier.from)) }),
1216
+ aside ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_ui18.Text, { variant: "copy", className: "ow-pricing05__aside", children: aside }) : null
1217
+ ] }),
1218
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_ui18.Card, { padding: "none", className: "ow-pricing05__card", children: [
1219
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_ui18.Text, { variant: "card-title", children: words.title }),
1220
+ words.description ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_ui18.Text, { variant: "copy", className: "ow-pricing05__card-intro", children: words.description }) : null,
1221
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_ui18.Text, { as: "p", variant: "heading", className: "ow-pricing05__runs", "aria-hidden": "true", children: [
1222
+ format.number(units),
1223
+ " ",
1224
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_ui18.Text, { as: "small", variant: "body", tone: "muted", className: "ow-pricing05__runs-unit", children: perMonth })
1225
+ ] }),
1226
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
1227
+ import_ui18.Slider,
1228
+ {
1229
+ "aria-label": labels.slider ?? capitalise(perMonth),
1230
+ showValue: false,
1231
+ min: 0,
1232
+ max,
1233
+ step,
1234
+ value: units,
1235
+ onChange: setUnits,
1236
+ formatValue: (value) => `${format.number(value)} ${plural}, about ${format.money(estimate(tiers, value).total)} a month`
1237
+ }
1238
+ ),
1239
+ /* @__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)) }),
1240
+ /* @__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: [
1241
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { children: [
1242
+ format.number(count),
1243
+ " ",
1244
+ plural,
1245
+ " ",
1246
+ tier.price === 0 ? (labels.free ?? "Free").toLowerCase() : `at ${format.unitPrice(tier.price)}`
1247
+ ] }),
1248
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: format.money(cost) })
1249
+ ] }, tier.from)) }),
1250
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "ow-pricing05__total", children: [
1251
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_ui18.Text, { as: "p", variant: "label", children: [
1252
+ words.totalLabel,
1253
+ words.totalNote ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_ui18.Text, { as: "small", variant: "caption", className: "ow-pricing05__total-note", children: words.totalNote }) : null
1254
+ ] }),
1255
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_ui18.Text, { as: "p", variant: "section-title", className: "ow-pricing05__total-amount", children: format.money(total) })
1256
+ ] }),
1257
+ /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(BlockActionButton, { action, variant: "primary", fullWidth: true, className: "ow-pricing05__action" }),
1258
+ note ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_ui18.Text, { as: "p", variant: "caption", align: "center", className: "ow-pricing05__fine", children: note }) : null
1259
+ ] })
1260
+ ] }) });
1261
+ }
1262
+
1263
+ // blocks/src/features/Features01/Features01.tsx
1264
+ var import_react17 = require("react");
1265
+ var import_ui19 = require("@openwarelabs/ui");
1266
+ var import_jsx_runtime20 = require("react/jsx-runtime");
1267
+ function Features01({ eyebrow, title, description, features, footer, className, ...props }) {
1268
+ const id = (0, import_react17.useId)();
1269
+ 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: [
1270
+ /* @__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 }),
1271
+ /* @__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: [
1272
+ feature.icon ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "ow-features01__icon", "aria-hidden": "true", children: feature.icon }) : null,
1273
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_ui19.Text, { variant: "card-title", className: "ow-features01__title", children: feature.title }),
1274
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_ui19.Text, { variant: "copy", className: "ow-features01__text", children: feature.description })
1275
+ ] }, index)) }),
1276
+ footer ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_ui19.Text, { variant: "copy", align: "center", className: "ow-features01__more", children: footer }) : null
1277
+ ] }) });
1278
+ }
1279
+
1280
+ // blocks/src/features/Features02/Features02.tsx
1281
+ var import_react18 = require("react");
1282
+ var import_ui20 = require("@openwarelabs/ui");
1283
+ var import_jsx_runtime21 = require("react/jsx-runtime");
1284
+ function Features02({ eyebrow, title, description, rows, className, ...props }) {
1285
+ const id = (0, import_react18.useId)();
1286
+ 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: [
1287
+ /* @__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 }),
1288
+ /* @__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: [
1289
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "ow-features02__copy", children: [
1290
+ row.kicker || row.icon ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_ui20.Text, { variant: "label", tone: "primary", className: "ow-features02__kicker", children: [
1291
+ row.icon,
1292
+ row.kicker
1293
+ ] }) : null,
1294
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_ui20.Text, { variant: "heading", id: `${id}-row-${index}`, className: "ow-features02__title", children: row.title }),
1295
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_ui20.Text, { variant: "lead", className: "ow-features02__text", children: row.description }),
1296
+ 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: [
1297
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CheckIcon, { size: 16 }),
1298
+ point
1299
+ ] }, pointIndex)) }) : null,
1300
+ row.link ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_ui20.Link, { href: row.link.href, variant: "standalone", className: "ow-features02__link", children: [
1301
+ row.link.label,
1302
+ " \u2192"
1303
+ ] }) : null
1304
+ ] }),
1305
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
1306
+ import_ui20.DotGrid,
1307
+ {
1308
+ className: "ow-features02__stage",
1309
+ role: row.visualLabel ? "img" : void 0,
1310
+ "aria-label": row.visualLabel,
1311
+ children: row.visual
1312
+ }
1313
+ )
1314
+ ] }, index)) })
1315
+ ] }) });
1316
+ }
1317
+
1318
+ // blocks/src/features/Features03/Features03.tsx
1319
+ var import_react19 = require("react");
1320
+ var import_ui21 = require("@openwarelabs/ui");
1321
+ var import_jsx_runtime22 = require("react/jsx-runtime");
1322
+ function Features03({ eyebrow, title, description, cards, className, ...props }) {
1323
+ const id = (0, import_react19.useId)();
1324
+ 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: [
1325
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "ow-features03__header", children: [
1326
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_ui21.SectionHeading, { eyebrow, title: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { id: `${id}-title`, children: title }) }),
1327
+ description ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_ui21.Text, { variant: "lead", className: "ow-features03__intro", children: description }) : null
1328
+ ] }),
1329
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "ow-features03__grid", children: cards.map((card, index) => {
1330
+ const featured = index === 0;
1331
+ return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
1332
+ "article",
1333
+ {
1334
+ className: (0, import_ui21.cx)(
1335
+ "ow-features03__card",
1336
+ featured && "ow-features03__card--featured",
1337
+ index === cards.length - 1 && index > 0 && "ow-features03__card--last"
1338
+ ),
1339
+ "aria-labelledby": `${id}-card-${index}`,
1340
+ children: [
1341
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "ow-features03__copy", children: [
1342
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_ui21.Text, { variant: featured ? "heading" : "card-title", id: `${id}-card-${index}`, children: card.title }),
1343
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_ui21.Text, { variant: featured ? "lead" : "copy", className: "ow-features03__text", children: card.description })
1344
+ ] }),
1345
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "ow-features03__visual", role: card.visualLabel ? "img" : void 0, "aria-label": card.visualLabel, children: card.visual })
1346
+ ]
1347
+ },
1348
+ index
1349
+ );
1350
+ }) })
1351
+ ] }) });
1352
+ }
1353
+
1354
+ // blocks/src/features/Features04/Features04.tsx
1355
+ var import_react20 = require("react");
1356
+ var import_ui22 = require("@openwarelabs/ui");
1357
+ var import_jsx_runtime23 = require("react/jsx-runtime");
1358
+ function Features04({ eyebrow, title, description, tabs, defaultTab = 0, labels = {}, className, ...props }) {
1359
+ const id = (0, import_react20.useId)();
1360
+ 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: [
1361
+ /* @__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 }),
1362
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_ui22.Tabs, { defaultValue: String(defaultTab), className: "ow-features04__tabs", children: [
1363
+ /* @__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)) }),
1364
+ tabs.map((tab, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_ui22.TabPanel, { value: String(index), className: "ow-features04__panel", children: [
1365
+ tab.caption ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_ui22.Text, { variant: "copy", align: "center", className: "ow-features04__caption", children: tab.caption }) : null,
1366
+ tab.visual
1367
+ ] }, index))
1368
+ ] })
1369
+ ] }) });
1370
+ }
1371
+
1372
+ // blocks/src/features/Features05/Features05.tsx
1373
+ var import_react21 = require("react");
1374
+ var import_ui23 = require("@openwarelabs/ui");
1375
+ var import_jsx_runtime24 = require("react/jsx-runtime");
1376
+ function Features05({ eyebrow, title, description, items, primaryAction, secondaryLink, visual, className, ...props }) {
1377
+ const id = (0, import_react21.useId)();
1378
+ 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: [
1379
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "ow-features05__copy", children: [
1380
+ /* @__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 }),
1381
+ /* @__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: [
1382
+ /* @__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 }) }),
1383
+ item
1384
+ ] }, index)) }),
1385
+ primaryAction || secondaryLink ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "ow-features05__actions", children: [
1386
+ primaryAction ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(BlockActionButton, { action: primaryAction, variant: "primary" }) : null,
1387
+ secondaryLink ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_ui23.Link, { href: secondaryLink.href, variant: "standalone", children: secondaryLink.label }) : null
1388
+ ] }) : null
1389
+ ] }),
1390
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "ow-features05__visual", children: visual })
1391
+ ] }) });
1392
+ }
1393
+
1394
+ // blocks/src/footers/Footer01/Footer01.tsx
1395
+ var import_react23 = require("react");
1396
+ var import_ui25 = require("@openwarelabs/ui");
1397
+
1398
+ // blocks/src/shared/FooterColumns.tsx
1399
+ var import_react22 = require("react");
1400
+ var import_ui24 = require("@openwarelabs/ui");
1401
+ var import_jsx_runtime25 = require("react/jsx-runtime");
1402
+ function FooterColumns({ columns, headingClassName, listClassName, badgeClassName }) {
1403
+ const id = (0, import_react22.useId)();
1404
+ 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: [
1405
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_ui24.Text, { variant: "label", as: "h2", id: `${id}-${index}`, className: headingClassName, children: column.title }),
1406
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("ul", { className: listClassName, children: column.links.map((link, linkIndex) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("li", { children: [
1407
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_ui24.Link, { href: link.href, variant: "standalone", children: link.label }),
1408
+ link.badge ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_ui24.Text, { variant: "badge", className: badgeClassName, children: link.badge }) : null
1409
+ ] }, linkIndex)) })
1410
+ ] }, index)) });
1411
+ }
1412
+
1413
+ // blocks/src/footers/Footer01/Footer01.tsx
1414
+ var import_jsx_runtime26 = require("react/jsx-runtime");
1415
+ var currentTheme = () => typeof document === "undefined" ? "system" : document.documentElement.dataset.theme ?? "system";
1416
+ function useTheme() {
1417
+ const [theme, setTheme] = (0, import_react23.useState)(currentTheme);
1418
+ (0, import_react23.useEffect)(() => {
1419
+ const observer = new MutationObserver(() => setTheme(currentTheme()));
1420
+ observer.observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme"] });
1421
+ return () => observer.disconnect();
1422
+ }, []);
1423
+ const choose = (value) => {
1424
+ document.documentElement.dataset.theme = value;
1425
+ setTheme(value);
1426
+ };
1427
+ return [theme, choose];
1428
+ }
1429
+ function Footer01({ brand, description, status, columns, legal, legalLinks = [], themeSwitch = false, labels = {}, className, ...props }) {
1430
+ const [theme, setTheme] = useTheme();
1431
+ const themeId = (0, import_react23.useId)();
1432
+ const home = labels.home ?? (typeof brand.name === "string" ? `${brand.name} home` : void 0);
1433
+ 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: [
1434
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "ow-footer01__top", children: [
1435
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "ow-footer01__brand", children: [
1436
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_ui25.Link, { href: brand.href, variant: "standalone", className: "ow-footer01__logo", "aria-label": home, children: [
1437
+ brand.logo,
1438
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_ui25.Text, { variant: "dialog-title", as: "span", children: brand.name })
1439
+ ] }),
1440
+ description ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_ui25.Text, { variant: "copy", children: description }) : null,
1441
+ status ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_ui25.Link, { href: status.href, variant: "standalone", className: "ow-footer01__status", children: [
1442
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "ow-footer01__status-dot", "aria-hidden": "true" }),
1443
+ status.label
1444
+ ] }) : null
1445
+ ] }),
1446
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(FooterColumns, { columns, headingClassName: "ow-footer01__heading", listClassName: "ow-footer01__links", badgeClassName: "ow-footer01__new" })
1447
+ ] }),
1448
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_ui25.Separator, {}),
1449
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "ow-footer01__bottom", children: [
1450
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_ui25.Text, { variant: "caption", as: "p", className: "ow-footer01__legal", children: [
1451
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: legal }),
1452
+ legalLinks.map((link, index) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_ui25.Link, { href: link.href, variant: "muted", children: link.label }, index))
1453
+ ] }),
1454
+ themeSwitch ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "ow-footer01__theme", children: [
1455
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_ui25.Text, { variant: "caption", id: themeId, children: labels.theme ?? "Theme" }),
1456
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
1457
+ import_ui25.SegmentedControl,
1458
+ {
1459
+ size: "sm",
1460
+ "aria-labelledby": themeId,
1461
+ options: [
1462
+ { value: "light", label: null, icon: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SunIcon, { size: 15 }), "aria-label": labels.light ?? "Light" },
1463
+ { value: "dark", label: null, icon: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(MoonIcon, { size: 15 }), "aria-label": labels.dark ?? "Dark" },
1464
+ { value: "system", label: null, icon: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(MonitorIcon, { size: 15 }), "aria-label": labels.system ?? "Match the system" }
1465
+ ],
1466
+ value: theme,
1467
+ onChange: setTheme
1468
+ }
1469
+ )
1470
+ ] }) : null
1471
+ ] })
1472
+ ] }) });
1473
+ }
1474
+
1475
+ // blocks/src/footers/Footer02/Footer02.tsx
1476
+ var import_ui26 = require("@openwarelabs/ui");
1477
+ var import_jsx_runtime27 = require("react/jsx-runtime");
1478
+ function Footer02({ brand, links, legal, labels = {}, className, ...props }) {
1479
+ 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: [
1480
+ /* @__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 }),
1481
+ /* @__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)) }) }),
1482
+ /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_ui26.Text, { variant: "caption", as: "p", children: legal })
1483
+ ] }) });
1484
+ }
1485
+
1486
+ // blocks/src/footers/Footer03/Footer03.tsx
1487
+ var import_react24 = require("react");
1488
+ var import_ui27 = require("@openwarelabs/ui");
1489
+ var import_jsx_runtime28 = require("react/jsx-runtime");
1490
+ var emailPattern2 = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
1491
+ function Footer03({ newsletter, brand, description, columns, legal, legalLinks = [], labels = {}, className, ...props }) {
1492
+ const [email, setEmail] = (0, import_react24.useState)("");
1493
+ const [error, setError] = (0, import_react24.useState)("");
1494
+ const [sending, setSending] = (0, import_react24.useState)(false);
1495
+ const [sentTo, setSentTo] = (0, import_react24.useState)("");
1496
+ const input = (0, import_react24.useRef)(null);
1497
+ const id = (0, import_react24.useId)();
1498
+ const subscribe = async (event) => {
1499
+ event.preventDefault();
1500
+ const address = email.trim();
1501
+ if (!address) setError(labels.empty ?? "Enter your email address.");
1502
+ else if (!emailPattern2.test(address)) setError(labels.invalid ?? "That doesn't look like an email address. Check it for a typo.");
1503
+ else {
1504
+ setError("");
1505
+ setSending(true);
1506
+ try {
1507
+ await newsletter.onSubmit(address);
1508
+ setSentTo(address);
1509
+ return;
1510
+ } catch (failure) {
1511
+ setError(failure instanceof Error && failure.message ? failure.message : labels.failed ?? "That didn't go through. Try again in a moment.");
1512
+ } finally {
1513
+ setSending(false);
1514
+ }
1515
+ }
1516
+ input.current?.focus();
1517
+ };
1518
+ const startAgain = () => {
1519
+ setSentTo("");
1520
+ setEmail("");
1521
+ window.setTimeout(() => input.current?.focus());
1522
+ };
1523
+ 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: [
1524
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("section", { className: "ow-footer03__signup", "aria-labelledby": `${id}-title`, children: [
1525
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { children: [
1526
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_ui27.Text, { variant: "heading", as: "h2", id: `${id}-title`, children: newsletter.title }),
1527
+ newsletter.description ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_ui27.Text, { variant: "copy", className: "ow-footer03__intro", children: newsletter.description }) : null
1528
+ ] }),
1529
+ sentTo ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "ow-footer03__done", role: "status", children: [
1530
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CircleCheckIcon, { size: 18 }),
1531
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: "ow-footer03__done-text", children: [
1532
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_ui27.Text, { variant: "label", children: newsletter.successTitle }),
1533
+ 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
1534
+ ] }),
1535
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_ui27.Button, { size: "sm", variant: "ghost", onClick: startAgain, children: labels.change ?? "Change" })
1536
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("form", { noValidate: true, onSubmit: subscribe, children: [
1537
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "ow-footer03__row", children: [
1538
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
1539
+ import_ui27.Input,
1540
+ {
1541
+ ref: input,
1542
+ type: "email",
1543
+ autoComplete: "email",
1544
+ placeholder: labels.placeholder ?? "you@example.com",
1545
+ "aria-label": labels.email ?? "Email address",
1546
+ "aria-describedby": `${id}-note`,
1547
+ className: "ow-footer03__email",
1548
+ startContent: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(MailIcon, { size: 16 }),
1549
+ isInvalid: Boolean(error),
1550
+ value: email,
1551
+ onChange: (event) => {
1552
+ setEmail(event.target.value);
1553
+ if (error) setError("");
1554
+ }
1555
+ }
1556
+ ),
1557
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_ui27.Button, { type: "submit", variant: "primary", shape: "pill", loading: sending, endIcon: newsletter.submitIcon, children: newsletter.submitLabel })
1558
+ ] }),
1559
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
1560
+ import_ui27.Text,
1561
+ {
1562
+ variant: "caption",
1563
+ as: "p",
1564
+ id: `${id}-note`,
1565
+ tone: error ? "danger" : void 0,
1566
+ className: "ow-footer03__note",
1567
+ "aria-live": "polite",
1568
+ children: error || newsletter.note
1569
+ }
1570
+ )
1571
+ ] })
1572
+ ] }),
1573
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "ow-footer03__links", children: [
1574
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "ow-footer03__brand", children: [
1575
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
1576
+ import_ui27.Link,
1577
+ {
1578
+ href: brand.href,
1579
+ variant: "standalone",
1580
+ className: "ow-footer03__logo",
1581
+ "aria-label": labels.home ?? (typeof brand.name === "string" ? `${brand.name} home` : void 0),
1582
+ children: [
1583
+ brand.logo,
1584
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_ui27.Text, { variant: "dialog-title", as: "span", children: brand.name })
1585
+ ]
1586
+ }
1587
+ ),
1588
+ description ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_ui27.Text, { variant: "copy", className: "ow-footer03__line", children: description }) : null
1589
+ ] }),
1590
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(FooterColumns, { columns, headingClassName: "ow-footer03__heading", listClassName: "ow-footer03__list" })
1591
+ ] }),
1592
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_ui27.Separator, {}),
1593
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "ow-footer03__bottom", children: [
1594
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_ui27.Text, { variant: "caption", as: "p", children: legal }),
1595
+ 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
1596
+ ] })
1597
+ ] }) });
1598
+ }
1599
+
1600
+ // blocks/src/footers/Footer04/Footer04.tsx
1601
+ var import_ui28 = require("@openwarelabs/ui");
1602
+ var import_jsx_runtime29 = require("react/jsx-runtime");
1603
+ function Footer04({ title, titleMuted, primaryAction, columns, legal, legalLinks = [], wordmark, className, ...props }) {
1604
+ 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: [
1605
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "ow-footer04__top", children: [
1606
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "ow-footer04__pitch", children: [
1607
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_ui28.Text, { variant: "heading", as: "p", children: [
1608
+ title,
1609
+ titleMuted ? /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
1610
+ " ",
1611
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_ui28.Text, { variant: "heading", as: "span", tone: "muted", children: titleMuted })
1612
+ ] }) : null
1613
+ ] }),
1614
+ primaryAction ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(BlockActionButton, { action: primaryAction, variant: "primary", size: "md" }) : null
1615
+ ] }),
1616
+ /* @__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" }) })
1617
+ ] }),
1618
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "ow-footer04__legal", children: [
1619
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_ui28.Text, { variant: "caption", as: "p", children: legal }),
1620
+ 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
1621
+ ] }),
1622
+ /* @__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 }) }) })
1623
+ ] }) });
1624
+ }
1625
+
1626
+ // blocks/src/calls-to-action/Cta01/Cta01.tsx
1627
+ var import_react25 = require("react");
1628
+ var import_ui29 = require("@openwarelabs/ui");
1629
+ var import_jsx_runtime30 = require("react/jsx-runtime");
1630
+ function Cta01({ title, description, primaryAction, secondaryAction, note, className, ...props }) {
1631
+ const id = (0, import_react25.useId)();
1632
+ return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("section", { className: (0, import_ui29.cx)("ow-cta01", className), "aria-labelledby": id, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_ui29.DotGrid, { fade: true, className: "ow-cta01__panel", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "ow-cta01__content", children: [
1633
+ /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "ow-cta01__text", children: [
1634
+ /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_ui29.Text, { variant: "section-title", id, children: title }),
1635
+ description ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_ui29.Text, { variant: "lead", className: "ow-cta01__lead", children: description }) : null
1636
+ ] }),
1637
+ /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "ow-cta01__side", children: [
1638
+ /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(BlockActions, { className: "ow-cta01__actions", primary: primaryAction, secondary: secondaryAction }),
1639
+ note ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_ui29.Text, { as: "p", variant: "caption", className: "ow-cta01__note", children: note }) : null
1640
+ ] })
1641
+ ] }) }) });
1642
+ }
1643
+
1644
+ // blocks/src/calls-to-action/Cta02/Cta02.tsx
1645
+ var import_react26 = require("react");
1646
+ var import_ui30 = require("@openwarelabs/ui");
1647
+ var import_jsx_runtime31 = require("react/jsx-runtime");
1648
+ function Cta02({ eyebrow, title, description, primaryAction, secondaryLink, facts, className, ...props }) {
1649
+ const id = (0, import_react26.useId)();
1650
+ return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("section", { className: (0, import_ui30.cx)("ow-cta02", className), "aria-labelledby": id, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_ui30.DotGrid, { fade: true, className: "ow-cta02__plate", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "ow-cta02__content", children: [
1651
+ eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_ui30.Text, { as: "p", variant: "body", className: "ow-cta02__eyebrow", children: eyebrow }) : null,
1652
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_ui30.Text, { as: "h2", variant: "page-title", id, className: "ow-cta02__title", children: title }),
1653
+ description ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_ui30.Text, { variant: "lead", className: "ow-cta02__lead", children: description }) : null,
1654
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "ow-cta02__actions", children: [
1655
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(BlockActionButton, { action: primaryAction, variant: "secondary", className: "ow-cta02__action" }),
1656
+ secondaryLink ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_ui30.Link, { href: secondaryLink.href, variant: "standalone", className: "ow-cta02__link", children: [
1657
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_ui30.Text, { variant: "label", children: secondaryLink.label }),
1658
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ArrowRightIcon, { size: 16 })
1659
+ ] }) : null
1660
+ ] }),
1661
+ facts?.length ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("ul", { className: "ow-cta02__facts", children: facts.map((fact, index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_ui30.Text, { as: "li", variant: "body", children: [
1662
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CheckIcon, { size: 15 }),
1663
+ fact
1664
+ ] }, index)) }) : null
1665
+ ] }) }) });
1666
+ }
1667
+
1668
+ // blocks/src/calls-to-action/Cta03/Cta03.tsx
1669
+ var import_react27 = require("react");
1670
+ var import_ui31 = require("@openwarelabs/ui");
1671
+ var import_jsx_runtime32 = require("react/jsx-runtime");
1672
+ function Cta03({ eyebrow, title, description, primaryAction, secondaryAction, points, visual, className, ...props }) {
1673
+ const id = (0, import_react27.useId)();
1674
+ return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("section", { className: (0, import_ui31.cx)("ow-cta03", className), "aria-labelledby": id, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "ow-cta03__inner", children: [
1675
+ /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { children: [
1676
+ /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_ui31.SectionHeading, { eyebrow, title: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { id, children: title }), intro: description }),
1677
+ /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(BlockActions, { className: "ow-cta03__actions", primary: primaryAction, secondary: secondaryAction }),
1678
+ points?.length ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("ul", { className: "ow-cta03__points", children: points.map((point, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_ui31.Text, { as: "li", variant: "body", tone: "soft", children: [
1679
+ /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CheckIcon, { size: 16 }),
1680
+ point
1681
+ ] }, index)) }) : null
1682
+ ] }),
1683
+ visual
1684
+ ] }) });
1685
+ }
370
1686
  //# sourceMappingURL=index.cjs.map