@dreamtree-org/landing-kit 0.2.0 → 0.4.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.
- package/MIGRATION.md +9 -0
- package/README.md +98 -8
- package/auth.css +42 -0
- package/auth.d.ts +3 -2
- package/demo-server.d.ts +24 -0
- package/dist/auth.cjs +176 -32
- package/dist/auth.js +176 -32
- package/dist/demo-server.cjs +75 -0
- package/dist/demo-server.js +47 -0
- package/dist/index.cjs +484 -340
- package/dist/index.js +477 -333
- package/index.d.ts +74 -1
- package/package.json +7 -1
- package/styles.css +42 -0
package/dist/index.js
CHANGED
|
@@ -1,11 +1,113 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
|
|
3
3
|
// src/LandingPage.jsx
|
|
4
|
-
import { Fragment as
|
|
4
|
+
import { Fragment as Fragment5, cloneElement, isValidElement as isValidElement2 } from "react";
|
|
5
5
|
|
|
6
6
|
// src/AuthShell.jsx
|
|
7
7
|
import { useId } from "react";
|
|
8
|
-
|
|
8
|
+
|
|
9
|
+
// src/DemoAccounts.jsx
|
|
10
|
+
import { useEffect, useRef, useState } from "react";
|
|
11
|
+
|
|
12
|
+
// src/demoFill.js
|
|
13
|
+
var DEMO_ACCOUNTS_URL = "/api/auth/demo-accounts";
|
|
14
|
+
var FILL_KEY = "dt-demo-fill";
|
|
15
|
+
async function fetchDemoAccounts(url = DEMO_ACCOUNTS_URL, init = {}) {
|
|
16
|
+
try {
|
|
17
|
+
const res = await fetch(url, { credentials: "include", cache: "no-store", ...init, headers: { Accept: "application/json", ...init.headers } });
|
|
18
|
+
if (!res.ok) return { accounts: [] };
|
|
19
|
+
return normalizeDemoAccounts(await res.json());
|
|
20
|
+
} catch {
|
|
21
|
+
return { accounts: [] };
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
function normalizeDemoAccounts(data) {
|
|
25
|
+
const list = Array.isArray(data) ? data : Array.isArray(data == null ? void 0 : data.accounts) ? data.accounts : [];
|
|
26
|
+
const accounts = list.filter((a) => a && typeof a.label === "string" && typeof a.identifier === "string");
|
|
27
|
+
let sharedPassword = typeof (data == null ? void 0 : data.sharedPassword) === "string" ? data.sharedPassword : void 0;
|
|
28
|
+
if (!sharedPassword && accounts.length > 1 && accounts.every((a) => a.password && a.password === accounts[0].password)) {
|
|
29
|
+
sharedPassword = accounts[0].password;
|
|
30
|
+
}
|
|
31
|
+
return sharedPassword ? { accounts, sharedPassword } : { accounts };
|
|
32
|
+
}
|
|
33
|
+
function stashDemoFill(account) {
|
|
34
|
+
var _a;
|
|
35
|
+
try {
|
|
36
|
+
sessionStorage.setItem(FILL_KEY, JSON.stringify({ identifier: account.identifier, password: (_a = account.password) != null ? _a : "", company: account.company }));
|
|
37
|
+
} catch {
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
function takeDemoFill() {
|
|
41
|
+
try {
|
|
42
|
+
const raw = sessionStorage.getItem(FILL_KEY);
|
|
43
|
+
if (!raw) return null;
|
|
44
|
+
sessionStorage.removeItem(FILL_KEY);
|
|
45
|
+
return JSON.parse(raw);
|
|
46
|
+
} catch {
|
|
47
|
+
return null;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
// src/DemoAccounts.jsx
|
|
52
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
53
|
+
function DemoAccounts({ load, onSelect, className = "" }) {
|
|
54
|
+
const [state, setState] = useState({ status: "loading", accounts: [] });
|
|
55
|
+
const [picked, setPicked] = useState(null);
|
|
56
|
+
const loadRef = useRef(load);
|
|
57
|
+
useEffect(() => {
|
|
58
|
+
let live = true;
|
|
59
|
+
Promise.resolve().then(() => loadRef.current()).then((data) => live && setState({ status: "ready", ...normalizeDemoAccounts(data) })).catch(() => live && setState({ status: "ready", accounts: [] }));
|
|
60
|
+
return () => {
|
|
61
|
+
live = false;
|
|
62
|
+
};
|
|
63
|
+
}, []);
|
|
64
|
+
if (state.status === "ready" && !state.accounts.length) return null;
|
|
65
|
+
const pick = (account, i) => {
|
|
66
|
+
setPicked(i);
|
|
67
|
+
onSelect == null ? void 0 : onSelect(account);
|
|
68
|
+
};
|
|
69
|
+
return /* @__PURE__ */ jsxs("div", { className: `dt-auth-demo ${className}`, "aria-busy": state.status === "loading" || void 0, children: [
|
|
70
|
+
/* @__PURE__ */ jsx("p", { className: "dt-auth-demo-label", children: "Demo accounts" }),
|
|
71
|
+
state.status === "loading" ? /* @__PURE__ */ jsx("div", { className: "dt-auth-demo-chips", "aria-hidden": "true", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx("span", { className: "dt-auth-demo-chip dt-auth-demo-chip--skeleton" }, i)) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
72
|
+
/* @__PURE__ */ jsx("div", { className: "dt-auth-demo-chips", children: state.accounts.map((a, i) => /* @__PURE__ */ jsx(
|
|
73
|
+
"button",
|
|
74
|
+
{
|
|
75
|
+
type: "button",
|
|
76
|
+
className: "dt-auth-demo-chip",
|
|
77
|
+
"aria-pressed": picked === i,
|
|
78
|
+
title: a.company ? `${a.identifier} \xB7 ${a.company}` : a.identifier,
|
|
79
|
+
onClick: () => pick(a, i),
|
|
80
|
+
children: a.label
|
|
81
|
+
},
|
|
82
|
+
`${a.label}-${a.identifier}`
|
|
83
|
+
)) }),
|
|
84
|
+
/* @__PURE__ */ jsx("p", { className: "dt-auth-demo-note", children: state.sharedPassword ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
85
|
+
"Shared password ",
|
|
86
|
+
/* @__PURE__ */ jsx("code", { children: state.sharedPassword }),
|
|
87
|
+
" \u2014 tap a role to fill."
|
|
88
|
+
] }) : "Tap a role to fill." })
|
|
89
|
+
] })
|
|
90
|
+
] });
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
// src/useTapReveal.js
|
|
94
|
+
import { useCallback, useRef as useRef2, useState as useState2 } from "react";
|
|
95
|
+
function useTapReveal({ taps = 4, windowMs = 1500 } = {}) {
|
|
96
|
+
const [revealed, setRevealed] = useState2(false);
|
|
97
|
+
const count = useRef2(0);
|
|
98
|
+
const last = useRef2(0);
|
|
99
|
+
const onClick = useCallback(() => {
|
|
100
|
+
if (revealed) return;
|
|
101
|
+
const now = Date.now();
|
|
102
|
+
count.current = now - last.current <= windowMs ? count.current + 1 : 1;
|
|
103
|
+
last.current = now;
|
|
104
|
+
if (count.current >= taps) setRevealed(true);
|
|
105
|
+
}, [revealed, taps, windowMs]);
|
|
106
|
+
return { revealed, tapProps: { onClick, style: { userSelect: "none", WebkitUserSelect: "none" } } };
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
// src/AuthShell.jsx
|
|
110
|
+
import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
9
111
|
var DEFAULT_LEGAL = [
|
|
10
112
|
{ label: "Privacy Policy", href: "/privacy" },
|
|
11
113
|
{ label: "Terms", href: "/terms" },
|
|
@@ -13,10 +115,10 @@ var DEFAULT_LEGAL = [
|
|
|
13
115
|
];
|
|
14
116
|
function BrandMark({ brand, size }) {
|
|
15
117
|
if (brand.logoSrc) {
|
|
16
|
-
return /* @__PURE__ */
|
|
118
|
+
return /* @__PURE__ */ jsx2("img", { className: "dt-auth-mark-img", src: brand.logoSrc, alt: "", width: size, height: size });
|
|
17
119
|
}
|
|
18
|
-
if (brand.mark) return /* @__PURE__ */
|
|
19
|
-
return /* @__PURE__ */
|
|
120
|
+
if (brand.mark) return /* @__PURE__ */ jsx2("span", { className: "dt-auth-mark-node", children: brand.mark });
|
|
121
|
+
return /* @__PURE__ */ jsx2("span", { className: "dt-auth-monogram", style: { width: size, height: size }, "aria-hidden": "true", children: brand.name.charAt(0) });
|
|
20
122
|
}
|
|
21
123
|
function brandStyle(brand) {
|
|
22
124
|
return {
|
|
@@ -34,50 +136,53 @@ function AuthShell({
|
|
|
34
136
|
variant = "tenant",
|
|
35
137
|
legalLinks = DEFAULT_LEGAL,
|
|
36
138
|
linkComponent: LinkComponent,
|
|
37
|
-
className = ""
|
|
139
|
+
className = "",
|
|
140
|
+
demoAccounts
|
|
38
141
|
}) {
|
|
39
|
-
var _a;
|
|
142
|
+
var _a, _b;
|
|
40
143
|
const headingId = useId();
|
|
144
|
+
const { revealed, tapProps } = useTapReveal({ taps: (_a = demoAccounts == null ? void 0 : demoAccounts.taps) != null ? _a : 4 });
|
|
41
145
|
const isPlatform = variant === "platform";
|
|
42
146
|
const headline = isPlatform ? brand.platformHeadline || "Platform administration" : brand.headline;
|
|
43
147
|
const pitch = isPlatform ? brand.platformPitch || `Super administrator console for ${brand.name}. Every action here is audited.` : brand.pitch;
|
|
44
|
-
const renderLink = (l) => LinkComponent ? /* @__PURE__ */
|
|
45
|
-
return /* @__PURE__ */
|
|
148
|
+
const renderLink = (l) => LinkComponent ? /* @__PURE__ */ jsx2(LinkComponent, { to: l.href, href: l.href, className: "dt-auth-legal-link", children: l.label }, l.href) : /* @__PURE__ */ jsx2("a", { href: l.href, className: "dt-auth-legal-link", children: l.label }, l.href);
|
|
149
|
+
return /* @__PURE__ */ jsxs2(
|
|
46
150
|
"div",
|
|
47
151
|
{
|
|
48
152
|
className: `dt-auth ${isPlatform ? "dt-auth--platform" : ""} ${className}`,
|
|
49
153
|
style: brandStyle(brand),
|
|
50
154
|
"data-product": brand.id,
|
|
51
155
|
children: [
|
|
52
|
-
/* @__PURE__ */
|
|
53
|
-
/* @__PURE__ */
|
|
54
|
-
/* @__PURE__ */
|
|
55
|
-
/* @__PURE__ */
|
|
56
|
-
isPlatform ? /* @__PURE__ */
|
|
156
|
+
/* @__PURE__ */ jsxs2("aside", { className: "dt-auth-panel", children: [
|
|
157
|
+
/* @__PURE__ */ jsxs2("a", { href: "/", className: "dt-auth-brand", children: [
|
|
158
|
+
/* @__PURE__ */ jsx2(BrandMark, { brand, size: 28 }),
|
|
159
|
+
/* @__PURE__ */ jsx2("span", { className: "dt-auth-brand-name", children: brand.name }),
|
|
160
|
+
isPlatform ? /* @__PURE__ */ jsx2("span", { className: "dt-auth-badge", children: "Platform" }) : null
|
|
57
161
|
] }),
|
|
58
|
-
/* @__PURE__ */
|
|
59
|
-
/* @__PURE__ */
|
|
60
|
-
pitch ? /* @__PURE__ */
|
|
61
|
-
!isPlatform && ((
|
|
162
|
+
/* @__PURE__ */ jsxs2("div", { className: "dt-auth-pitch", children: [
|
|
163
|
+
/* @__PURE__ */ jsx2("h2", { children: headline }),
|
|
164
|
+
pitch ? /* @__PURE__ */ jsx2("p", { children: pitch }) : null,
|
|
165
|
+
!isPlatform && ((_b = brand.points) == null ? void 0 : _b.length) ? /* @__PURE__ */ jsx2("ul", { children: brand.points.map((p) => /* @__PURE__ */ jsx2("li", { children: p }, p)) }) : null
|
|
62
166
|
] }),
|
|
63
|
-
/* @__PURE__ */
|
|
167
|
+
/* @__PURE__ */ jsx2("p", { className: "dt-auth-panel-foot", children: brand.category || "by Dreamtree-Org" })
|
|
64
168
|
] }),
|
|
65
|
-
/* @__PURE__ */
|
|
66
|
-
/* @__PURE__ */
|
|
67
|
-
/* @__PURE__ */
|
|
68
|
-
/* @__PURE__ */
|
|
69
|
-
isPlatform ? /* @__PURE__ */
|
|
169
|
+
/* @__PURE__ */ jsx2("main", { className: "dt-auth-main", children: /* @__PURE__ */ jsxs2("div", { className: "dt-auth-column", children: [
|
|
170
|
+
/* @__PURE__ */ jsxs2("a", { href: "/", className: "dt-auth-brand dt-auth-brand--mobile", children: [
|
|
171
|
+
/* @__PURE__ */ jsx2(BrandMark, { brand, size: 24 }),
|
|
172
|
+
/* @__PURE__ */ jsx2("span", { className: "dt-auth-brand-name", children: brand.name }),
|
|
173
|
+
isPlatform ? /* @__PURE__ */ jsx2("span", { className: "dt-auth-badge", children: "Platform" }) : null
|
|
70
174
|
] }),
|
|
71
|
-
/* @__PURE__ */
|
|
72
|
-
/* @__PURE__ */
|
|
73
|
-
/* @__PURE__ */
|
|
74
|
-
subtitle ? /* @__PURE__ */
|
|
175
|
+
/* @__PURE__ */ jsxs2("section", { className: "dt-auth-card", "aria-labelledby": headingId, children: [
|
|
176
|
+
/* @__PURE__ */ jsxs2("header", { className: "dt-auth-head", children: [
|
|
177
|
+
/* @__PURE__ */ jsx2("h1", { id: headingId, ...demoAccounts ? tapProps : {}, children: title }),
|
|
178
|
+
subtitle ? /* @__PURE__ */ jsx2("p", { children: subtitle }) : null
|
|
75
179
|
] }),
|
|
76
|
-
children
|
|
180
|
+
children,
|
|
181
|
+
demoAccounts && revealed ? /* @__PURE__ */ jsx2(DemoAccounts, { load: demoAccounts.load, onSelect: demoAccounts.onSelect }) : null
|
|
77
182
|
] }),
|
|
78
|
-
footer ? /* @__PURE__ */
|
|
79
|
-
(legalLinks == null ? void 0 : legalLinks.length) ? /* @__PURE__ */
|
|
80
|
-
i > 0 ? /* @__PURE__ */
|
|
183
|
+
footer ? /* @__PURE__ */ jsx2("div", { className: "dt-auth-footer", children: footer }) : null,
|
|
184
|
+
(legalLinks == null ? void 0 : legalLinks.length) ? /* @__PURE__ */ jsx2("nav", { className: "dt-auth-legal", "aria-label": "Legal", children: legalLinks.map((l, i) => /* @__PURE__ */ jsxs2("span", { className: "dt-auth-legal-item", children: [
|
|
185
|
+
i > 0 ? /* @__PURE__ */ jsx2("span", { "aria-hidden": "true", children: "\xB7" }) : null,
|
|
81
186
|
renderLink(l)
|
|
82
187
|
] }, l.href)) }) : null
|
|
83
188
|
] }) })
|
|
@@ -88,7 +193,7 @@ function AuthShell({
|
|
|
88
193
|
|
|
89
194
|
// src/context.jsx
|
|
90
195
|
import { createContext, useContext } from "react";
|
|
91
|
-
import { jsx as
|
|
196
|
+
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
92
197
|
var LandingContext = createContext({ brand: null, linkComponent: null, onBookDemo: null, home: true });
|
|
93
198
|
var LandingProvider = LandingContext.Provider;
|
|
94
199
|
var useLanding = () => useContext(LandingContext);
|
|
@@ -101,17 +206,17 @@ function SmartLink({ href, children, className, reload, ...rest }) {
|
|
|
101
206
|
const to = resolveHref(href, home);
|
|
102
207
|
const internal = to && to.startsWith("/") && !to.startsWith("//") && !to.includes("#");
|
|
103
208
|
if (Link && internal && !reload) {
|
|
104
|
-
return /* @__PURE__ */
|
|
209
|
+
return /* @__PURE__ */ jsx3(Link, { to, href: to, className, ...rest, children });
|
|
105
210
|
}
|
|
106
|
-
return /* @__PURE__ */
|
|
211
|
+
return /* @__PURE__ */ jsx3("a", { href: to, className, ...rest, children });
|
|
107
212
|
}
|
|
108
213
|
|
|
109
214
|
// src/Header.jsx
|
|
110
|
-
import { useState } from "react";
|
|
215
|
+
import { useState as useState3 } from "react";
|
|
111
216
|
|
|
112
217
|
// src/icons.jsx
|
|
113
218
|
import { createElement, isValidElement } from "react";
|
|
114
|
-
import { Fragment, jsx as
|
|
219
|
+
import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
115
220
|
var base = {
|
|
116
221
|
viewBox: "0 0 24 24",
|
|
117
222
|
fill: "none",
|
|
@@ -123,29 +228,29 @@ var base = {
|
|
|
123
228
|
focusable: "false"
|
|
124
229
|
};
|
|
125
230
|
var make = (paths) => function Icon({ size = 16, className = "dt-lp-icon" }) {
|
|
126
|
-
return /* @__PURE__ */
|
|
231
|
+
return /* @__PURE__ */ jsx4("svg", { ...base, width: size, height: size, className, children: paths });
|
|
127
232
|
};
|
|
128
|
-
var ArrowRight = make(/* @__PURE__ */
|
|
129
|
-
var ChevronRight = make(/* @__PURE__ */
|
|
130
|
-
var Check = make(/* @__PURE__ */
|
|
233
|
+
var ArrowRight = make(/* @__PURE__ */ jsx4("path", { d: "M5 12h14M13 6l6 6-6 6" }));
|
|
234
|
+
var ChevronRight = make(/* @__PURE__ */ jsx4("path", { d: "m9 6 6 6-6 6" }));
|
|
235
|
+
var Check = make(/* @__PURE__ */ jsx4("path", { d: "M20 6 9 17l-5-5" }));
|
|
131
236
|
var Help = make(
|
|
132
|
-
/* @__PURE__ */
|
|
133
|
-
/* @__PURE__ */
|
|
134
|
-
/* @__PURE__ */
|
|
237
|
+
/* @__PURE__ */ jsxs3(Fragment2, { children: [
|
|
238
|
+
/* @__PURE__ */ jsx4("circle", { cx: "12", cy: "12", r: "10" }),
|
|
239
|
+
/* @__PURE__ */ jsx4("path", { d: "M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3M12 17h.01" })
|
|
135
240
|
] })
|
|
136
241
|
);
|
|
137
242
|
var Alert = make(
|
|
138
|
-
/* @__PURE__ */
|
|
139
|
-
/* @__PURE__ */
|
|
140
|
-
/* @__PURE__ */
|
|
243
|
+
/* @__PURE__ */ jsxs3(Fragment2, { children: [
|
|
244
|
+
/* @__PURE__ */ jsx4("path", { d: "M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z" }),
|
|
245
|
+
/* @__PURE__ */ jsx4("path", { d: "M12 9v4M12 17h.01" })
|
|
141
246
|
] })
|
|
142
247
|
);
|
|
143
|
-
var MenuIcon = make(/* @__PURE__ */
|
|
144
|
-
var Close = make(/* @__PURE__ */
|
|
248
|
+
var MenuIcon = make(/* @__PURE__ */ jsx4("path", { d: "M4 6h16M4 12h16M4 18h16" }));
|
|
249
|
+
var Close = make(/* @__PURE__ */ jsx4("path", { d: "M18 6 6 18M6 6l12 12" }));
|
|
145
250
|
var Calendar = make(
|
|
146
|
-
/* @__PURE__ */
|
|
147
|
-
/* @__PURE__ */
|
|
148
|
-
/* @__PURE__ */
|
|
251
|
+
/* @__PURE__ */ jsxs3(Fragment2, { children: [
|
|
252
|
+
/* @__PURE__ */ jsx4("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2" }),
|
|
253
|
+
/* @__PURE__ */ jsx4("path", { d: "M16 2v4M8 2v4M3 10h18m-12 6 2 2 4-4" })
|
|
149
254
|
] })
|
|
150
255
|
);
|
|
151
256
|
function renderIcon(icon, size = 20, className = "dt-lp-icon") {
|
|
@@ -155,41 +260,41 @@ function renderIcon(icon, size = 20, className = "dt-lp-icon") {
|
|
|
155
260
|
}
|
|
156
261
|
|
|
157
262
|
// src/Brand.jsx
|
|
158
|
-
import { jsx as
|
|
263
|
+
import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
159
264
|
function BrandMark2({ brand, size = 36 }) {
|
|
160
265
|
if (brand.logoSrc) {
|
|
161
|
-
return /* @__PURE__ */
|
|
266
|
+
return /* @__PURE__ */ jsx5("img", { className: "dt-lp-mark-img", src: brand.logoSrc, alt: "", width: size, height: size });
|
|
162
267
|
}
|
|
163
|
-
if (brand.mark) return /* @__PURE__ */
|
|
164
|
-
return /* @__PURE__ */
|
|
268
|
+
if (brand.mark) return /* @__PURE__ */ jsx5("span", { className: "dt-lp-mark-node", "aria-hidden": "true", children: brand.mark });
|
|
269
|
+
return /* @__PURE__ */ jsx5("span", { className: "dt-lp-monogram", style: { width: size, height: size }, "aria-hidden": "true", children: brand.name.charAt(0) });
|
|
165
270
|
}
|
|
166
271
|
function Wordmark({ name }) {
|
|
167
272
|
const m = /^(.+?)(Pro)$/.exec(name);
|
|
168
|
-
if (!m) return /* @__PURE__ */
|
|
169
|
-
return /* @__PURE__ */
|
|
273
|
+
if (!m) return /* @__PURE__ */ jsx5("span", { className: "dt-lp-wordmark", children: name });
|
|
274
|
+
return /* @__PURE__ */ jsxs4("span", { className: "dt-lp-wordmark", children: [
|
|
170
275
|
m[1],
|
|
171
|
-
/* @__PURE__ */
|
|
276
|
+
/* @__PURE__ */ jsx5("span", { className: "dt-lp-wordmark-hi", children: m[2] })
|
|
172
277
|
] });
|
|
173
278
|
}
|
|
174
279
|
function BrandLockup({ brand: own, byline = "by Dreamtree-Org", href = "/" }) {
|
|
175
280
|
const ctx = useLanding();
|
|
176
281
|
const brand = own || ctx.brand;
|
|
177
282
|
if (!brand) return null;
|
|
178
|
-
return /* @__PURE__ */
|
|
179
|
-
/* @__PURE__ */
|
|
180
|
-
/* @__PURE__ */
|
|
181
|
-
/* @__PURE__ */
|
|
182
|
-
byline ? /* @__PURE__ */
|
|
283
|
+
return /* @__PURE__ */ jsxs4("a", { href, className: "dt-lp-brand", "aria-label": `${brand.name}${byline ? ` ${byline}` : ""}, home`, children: [
|
|
284
|
+
/* @__PURE__ */ jsx5(BrandMark2, { brand }),
|
|
285
|
+
/* @__PURE__ */ jsxs4("span", { className: "dt-lp-brand-text", "aria-hidden": "true", children: [
|
|
286
|
+
/* @__PURE__ */ jsx5(Wordmark, { name: brand.name }),
|
|
287
|
+
byline ? /* @__PURE__ */ jsx5("span", { className: "dt-lp-byline", children: byline }) : null
|
|
183
288
|
] })
|
|
184
289
|
] });
|
|
185
290
|
}
|
|
186
291
|
|
|
187
292
|
// src/BookDemoButton.jsx
|
|
188
|
-
import { jsx as
|
|
293
|
+
import { jsx as jsx6 } from "react/jsx-runtime";
|
|
189
294
|
function BookDemoButton({ size = "md", variant = "primary", className = "", children = "Book a demo", onClick }) {
|
|
190
295
|
const { onBookDemo } = useLanding();
|
|
191
296
|
const handler = onClick || (onBookDemo ? (e) => onBookDemo(e.currentTarget) : void 0);
|
|
192
|
-
return /* @__PURE__ */
|
|
297
|
+
return /* @__PURE__ */ jsx6(
|
|
193
298
|
"button",
|
|
194
299
|
{
|
|
195
300
|
type: "button",
|
|
@@ -203,61 +308,61 @@ function BookDemoButton({ size = "md", variant = "primary", className = "", chil
|
|
|
203
308
|
}
|
|
204
309
|
|
|
205
310
|
// src/Section.jsx
|
|
206
|
-
import { jsx as
|
|
311
|
+
import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
207
312
|
function Wrap({ className = "", narrow, children }) {
|
|
208
|
-
return /* @__PURE__ */
|
|
313
|
+
return /* @__PURE__ */ jsx7("div", { className: `dt-lp-wrap${narrow ? " dt-lp-wrap--narrow" : ""} ${className}`.trim(), children });
|
|
209
314
|
}
|
|
210
315
|
function Eyebrow({ children, className = "" }) {
|
|
211
316
|
if (!children) return null;
|
|
212
|
-
return /* @__PURE__ */
|
|
317
|
+
return /* @__PURE__ */ jsx7("p", { className: `dt-lp-eyebrow ${className}`.trim(), children });
|
|
213
318
|
}
|
|
214
319
|
function SectionIntro({ id, eyebrow, title, body, align = "start", children }) {
|
|
215
|
-
return /* @__PURE__ */
|
|
216
|
-
/* @__PURE__ */
|
|
217
|
-
/* @__PURE__ */
|
|
218
|
-
body ? /* @__PURE__ */
|
|
320
|
+
return /* @__PURE__ */ jsxs5("div", { className: `dt-lp-intro dt-lp-intro--${align}`, children: [
|
|
321
|
+
/* @__PURE__ */ jsx7(Eyebrow, { children: eyebrow }),
|
|
322
|
+
/* @__PURE__ */ jsx7("h2", { id, className: "dt-lp-h2", children: title }),
|
|
323
|
+
body ? /* @__PURE__ */ jsx7("p", { className: "dt-lp-lead", children: body }) : null,
|
|
219
324
|
children
|
|
220
325
|
] });
|
|
221
326
|
}
|
|
222
327
|
function Section({ id, labelledBy, tone = "plain", className = "", children, narrow }) {
|
|
223
|
-
return /* @__PURE__ */
|
|
328
|
+
return /* @__PURE__ */ jsx7("section", { id, "aria-labelledby": labelledBy, className: `dt-lp-section dt-lp-tone--${tone} ${className}`.trim(), children: /* @__PURE__ */ jsx7(Wrap, { narrow, children }) });
|
|
224
329
|
}
|
|
225
330
|
function TextLink({ href, children, className = "", ...rest }) {
|
|
226
|
-
return /* @__PURE__ */
|
|
331
|
+
return /* @__PURE__ */ jsxs5(SmartLink, { href, className: `dt-lp-textlink ${className}`.trim(), ...rest, children: [
|
|
227
332
|
children,
|
|
228
333
|
" ",
|
|
229
|
-
/* @__PURE__ */
|
|
334
|
+
/* @__PURE__ */ jsx7(ArrowRight, {})
|
|
230
335
|
] });
|
|
231
336
|
}
|
|
232
337
|
function Cta({ cta, className = "" }) {
|
|
233
338
|
if (!cta) return null;
|
|
234
339
|
if (Array.isArray(cta)) {
|
|
235
340
|
if (!cta.length) return null;
|
|
236
|
-
return /* @__PURE__ */
|
|
341
|
+
return /* @__PURE__ */ jsx7("div", { className: `dt-lp-ctas ${className}`.trim(), children: cta.map((c2, i) => /* @__PURE__ */ jsx7(Cta, { cta: c2 }, i)) });
|
|
237
342
|
}
|
|
238
343
|
const c = typeof cta === "string" ? { label: cta, demo: true } : cta;
|
|
239
|
-
if (c.href && !c.demo) return /* @__PURE__ */
|
|
240
|
-
return /* @__PURE__ */
|
|
344
|
+
if (c.href && !c.demo) return /* @__PURE__ */ jsx7(TextLink, { href: c.href, className, children: c.label });
|
|
345
|
+
return /* @__PURE__ */ jsxs5(BookDemoButton, { size: "lg", className, children: [
|
|
241
346
|
c.label,
|
|
242
347
|
" ",
|
|
243
|
-
/* @__PURE__ */
|
|
348
|
+
/* @__PURE__ */ jsx7(ArrowRight, {})
|
|
244
349
|
] });
|
|
245
350
|
}
|
|
246
351
|
|
|
247
352
|
// src/Header.jsx
|
|
248
|
-
import { jsx as
|
|
353
|
+
import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
249
354
|
function Header({ nav = [], login = { label: "Log in", href: "/login" }, cta = "Book a demo", brand }) {
|
|
250
355
|
const { home } = useLanding();
|
|
251
|
-
const [open, setOpen] =
|
|
356
|
+
const [open, setOpen] = useState3(false);
|
|
252
357
|
const items = login ? [...nav, login] : nav;
|
|
253
|
-
return /* @__PURE__ */
|
|
254
|
-
/* @__PURE__ */
|
|
255
|
-
/* @__PURE__ */
|
|
256
|
-
nav.length ? /* @__PURE__ */
|
|
257
|
-
/* @__PURE__ */
|
|
258
|
-
login ? /* @__PURE__ */
|
|
259
|
-
cta ? /* @__PURE__ */
|
|
260
|
-
items.length ? /* @__PURE__ */
|
|
358
|
+
return /* @__PURE__ */ jsxs6("header", { className: "dt-lp-header", children: [
|
|
359
|
+
/* @__PURE__ */ jsxs6(Wrap, { className: "dt-lp-header-bar", children: [
|
|
360
|
+
/* @__PURE__ */ jsx8(BrandLockup, { brand }),
|
|
361
|
+
nav.length ? /* @__PURE__ */ jsx8("nav", { "aria-label": "Primary", className: "dt-lp-nav", children: nav.map((n) => /* @__PURE__ */ jsx8(SmartLink, { href: n.href, className: "dt-lp-nav-link", children: n.label }, n.href)) }) : null,
|
|
362
|
+
/* @__PURE__ */ jsxs6("div", { className: "dt-lp-header-actions", children: [
|
|
363
|
+
login ? /* @__PURE__ */ jsx8(SmartLink, { href: login.href, className: "dt-lp-nav-link dt-lp-login", reload: true, children: login.label }) : null,
|
|
364
|
+
cta ? /* @__PURE__ */ jsx8(BookDemoButton, { size: "sm", children: cta }) : null,
|
|
365
|
+
items.length ? /* @__PURE__ */ jsxs6(
|
|
261
366
|
"button",
|
|
262
367
|
{
|
|
263
368
|
type: "button",
|
|
@@ -268,29 +373,29 @@ function Header({ nav = [], login = { label: "Log in", href: "/login" }, cta = "
|
|
|
268
373
|
"data-menu-toggle": "",
|
|
269
374
|
onClick: () => setOpen((o) => !o),
|
|
270
375
|
children: [
|
|
271
|
-
/* @__PURE__ */
|
|
272
|
-
/* @__PURE__ */
|
|
376
|
+
/* @__PURE__ */ jsx8("span", { className: "dt-lp-menu-open", children: /* @__PURE__ */ jsx8(MenuIcon, { size: 20 }) }),
|
|
377
|
+
/* @__PURE__ */ jsx8("span", { className: "dt-lp-menu-close", children: /* @__PURE__ */ jsx8(Close, { size: 20 }) })
|
|
273
378
|
]
|
|
274
379
|
}
|
|
275
380
|
) : null
|
|
276
381
|
] })
|
|
277
382
|
] }),
|
|
278
|
-
items.length ? /* @__PURE__ */
|
|
383
|
+
items.length ? /* @__PURE__ */ jsx8("nav", { id: "mobile-nav", "aria-label": "Mobile", className: "dt-lp-mobile-nav", hidden: !open, onClick: (e) => {
|
|
279
384
|
var _a, _b;
|
|
280
385
|
return ((_b = (_a = e.target).closest) == null ? void 0 : _b.call(_a, "a")) && setOpen(false);
|
|
281
|
-
}, children: /* @__PURE__ */
|
|
386
|
+
}, children: /* @__PURE__ */ jsx8(Wrap, { children: /* @__PURE__ */ jsx8("ul", { children: items.map((n) => /* @__PURE__ */ jsx8("li", { children: /* @__PURE__ */ jsx8(SmartLink, { href: n.href, reload: n === login, children: n.label }) }, n.href)) }) }) }) : null
|
|
282
387
|
] });
|
|
283
388
|
}
|
|
284
389
|
|
|
285
390
|
// src/DreamtreeFooter.jsx
|
|
286
|
-
import { jsx as
|
|
391
|
+
import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
287
392
|
function DreamtreeMark({ size = 28 }) {
|
|
288
|
-
return /* @__PURE__ */
|
|
289
|
-
/* @__PURE__ */
|
|
290
|
-
/* @__PURE__ */
|
|
291
|
-
/* @__PURE__ */
|
|
393
|
+
return /* @__PURE__ */ jsxs7("span", { className: "dt-lp-org", role: "img", "aria-label": "Dreamtree-Org", children: [
|
|
394
|
+
/* @__PURE__ */ jsx9("svg", { viewBox: "0 0 48.35 48.35", width: size, height: size, "aria-hidden": "true", children: /* @__PURE__ */ jsxs7("g", { fill: "none", strokeWidth: "4", strokeLinecap: "round", strokeLinejoin: "round", stroke: "#0f766e", children: [
|
|
395
|
+
/* @__PURE__ */ jsx9("path", { d: "M23.01,44.02c-9.02.03-16.36-7.27-16.39-16.29-.02-7.98,5.72-14.81,13.59-16.16,13.31-2.57,16.81-3.78,21.48-9.57,2.33,4.67,4.67,9.76,4.67,18.67,0,12.84-11.16,23.34-23.34,23.34Z" }),
|
|
396
|
+
/* @__PURE__ */ jsx9("path", { d: "M2,46.35c0-7,4.32-12.51,11.86-14.01,5.65-1.12,11.49-4.67,13.82-7" })
|
|
292
397
|
] }) }),
|
|
293
|
-
/* @__PURE__ */
|
|
398
|
+
/* @__PURE__ */ jsx9("span", { "aria-hidden": "true", className: "dt-lp-org-name", children: "Dreamtree-Org" })
|
|
294
399
|
] });
|
|
295
400
|
}
|
|
296
401
|
function DreamtreeFooter({
|
|
@@ -304,27 +409,27 @@ function DreamtreeFooter({
|
|
|
304
409
|
}) {
|
|
305
410
|
const ctx = useLanding();
|
|
306
411
|
const brand = own || ctx.brand;
|
|
307
|
-
return /* @__PURE__ */
|
|
308
|
-
/* @__PURE__ */
|
|
309
|
-
/* @__PURE__ */
|
|
310
|
-
/* @__PURE__ */
|
|
311
|
-
blurb ? /* @__PURE__ */
|
|
412
|
+
return /* @__PURE__ */ jsxs7("footer", { className: "dt-lp-footer", children: [
|
|
413
|
+
/* @__PURE__ */ jsxs7(Wrap, { className: `dt-lp-footer-grid dt-lp-footer-grid--${Math.min(columns.length, 3)}`, children: [
|
|
414
|
+
/* @__PURE__ */ jsxs7("div", { className: "dt-lp-footer-about", children: [
|
|
415
|
+
/* @__PURE__ */ jsx9(DreamtreeMark, {}),
|
|
416
|
+
blurb ? /* @__PURE__ */ jsx9("p", { children: blurb }) : null
|
|
312
417
|
] }),
|
|
313
|
-
columns.map((col) => /* @__PURE__ */
|
|
314
|
-
/* @__PURE__ */
|
|
315
|
-
/* @__PURE__ */
|
|
418
|
+
columns.map((col) => /* @__PURE__ */ jsxs7("nav", { "aria-label": col.label || col.title, className: "dt-lp-footer-col", children: [
|
|
419
|
+
/* @__PURE__ */ jsx9("p", { className: "dt-lp-footer-title", children: col.title }),
|
|
420
|
+
/* @__PURE__ */ jsx9("ul", { className: col.links.length > 5 && col.compact !== false ? "dt-lp-footer-links" : "dt-lp-footer-links dt-lp-footer-links--one", children: col.links.map((l) => /* @__PURE__ */ jsx9("li", { children: /* @__PURE__ */ jsx9(SmartLink, { href: l.href, reload: l.reload, children: l.label }) }, l.href)) })
|
|
316
421
|
] }, col.title))
|
|
317
422
|
] }),
|
|
318
|
-
/* @__PURE__ */
|
|
319
|
-
/* @__PURE__ */
|
|
423
|
+
/* @__PURE__ */ jsx9("div", { className: "dt-lp-footer-bar", children: /* @__PURE__ */ jsxs7(Wrap, { className: "dt-lp-footer-bar-inner", children: [
|
|
424
|
+
/* @__PURE__ */ jsxs7("p", { children: [
|
|
320
425
|
"\xA9 ",
|
|
321
426
|
year,
|
|
322
427
|
" ",
|
|
323
428
|
org,
|
|
324
429
|
". All rights reserved."
|
|
325
430
|
] }),
|
|
326
|
-
legal.length ? /* @__PURE__ */
|
|
327
|
-
brand && tagline ? /* @__PURE__ */
|
|
431
|
+
legal.length ? /* @__PURE__ */ jsx9("nav", { "aria-label": "Legal", className: "dt-lp-footer-legal", children: legal.map((l) => /* @__PURE__ */ jsx9(SmartLink, { href: l.href, children: l.label }, l.href)) }) : null,
|
|
432
|
+
brand && tagline ? /* @__PURE__ */ jsxs7("p", { children: [
|
|
328
433
|
brand.name,
|
|
329
434
|
": ",
|
|
330
435
|
tagline
|
|
@@ -334,7 +439,7 @@ function DreamtreeFooter({
|
|
|
334
439
|
}
|
|
335
440
|
|
|
336
441
|
// src/MarketingLayout.jsx
|
|
337
|
-
import { jsx as
|
|
442
|
+
import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
338
443
|
function MarketingLayout({
|
|
339
444
|
brand,
|
|
340
445
|
nav = [],
|
|
@@ -350,16 +455,16 @@ function MarketingLayout({
|
|
|
350
455
|
if (!brand || !brand.name) {
|
|
351
456
|
throw new Error(`landing-kit: "brand" is missing. Pass getBrand('<product>') from @dreamtree-org/auth-kit, or your own { id, name, primary }.`);
|
|
352
457
|
}
|
|
353
|
-
return /* @__PURE__ */
|
|
354
|
-
/* @__PURE__ */
|
|
355
|
-
/* @__PURE__ */
|
|
356
|
-
/* @__PURE__ */
|
|
357
|
-
footer === false ? null : /* @__PURE__ */
|
|
458
|
+
return /* @__PURE__ */ jsx10(LandingProvider, { value: { brand, linkComponent, onBookDemo, home }, children: /* @__PURE__ */ jsxs8("div", { className: `dt-landing ${className}`.trim(), style: brandStyle(brand), "data-product": brand.id, children: [
|
|
459
|
+
/* @__PURE__ */ jsx10("a", { href: "#main", className: "dt-lp-skip", children: "Skip to content" }),
|
|
460
|
+
/* @__PURE__ */ jsx10(Header, { nav, ...login !== void 0 ? { login } : {}, ...cta !== void 0 ? { cta } : {} }),
|
|
461
|
+
/* @__PURE__ */ jsx10("main", { id: "main", children }),
|
|
462
|
+
footer === false ? null : /* @__PURE__ */ jsx10(DreamtreeFooter, { ...footer || {} })
|
|
358
463
|
] }) });
|
|
359
464
|
}
|
|
360
465
|
|
|
361
466
|
// src/Hero.jsx
|
|
362
|
-
import { Fragment as
|
|
467
|
+
import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
363
468
|
function Hero({
|
|
364
469
|
eyebrow,
|
|
365
470
|
title,
|
|
@@ -374,169 +479,169 @@ function Hero({
|
|
|
374
479
|
backdrop
|
|
375
480
|
}) {
|
|
376
481
|
const [first, hi] = Array.isArray(title) ? title : [title, null];
|
|
377
|
-
return /* @__PURE__ */
|
|
378
|
-
/* @__PURE__ */
|
|
379
|
-
backdrop ? /* @__PURE__ */
|
|
380
|
-
/* @__PURE__ */
|
|
381
|
-
/* @__PURE__ */
|
|
382
|
-
/* @__PURE__ */
|
|
482
|
+
return /* @__PURE__ */ jsxs9("section", { id, "aria-labelledby": "hero-title", className: `dt-lp-hero${overlap ? " dt-lp-hero--overlap" : ""}`, children: [
|
|
483
|
+
/* @__PURE__ */ jsx11("div", { className: "dt-lp-hero-glow", "aria-hidden": "true" }),
|
|
484
|
+
backdrop ? /* @__PURE__ */ jsx11("div", { className: "dt-lp-hero-backdrop", "aria-hidden": "true", children: backdrop }) : null,
|
|
485
|
+
/* @__PURE__ */ jsxs9(Wrap, { className: "dt-lp-hero-inner", children: [
|
|
486
|
+
/* @__PURE__ */ jsx11(Eyebrow, { children: eyebrow }),
|
|
487
|
+
/* @__PURE__ */ jsxs9("h1", { id: "hero-title", className: "dt-lp-h1", children: [
|
|
383
488
|
first,
|
|
384
|
-
hi ? /* @__PURE__ */
|
|
489
|
+
hi ? /* @__PURE__ */ jsxs9(Fragment3, { children: [
|
|
385
490
|
" ",
|
|
386
|
-
/* @__PURE__ */
|
|
491
|
+
/* @__PURE__ */ jsx11("span", { className: "dt-lp-h1-hi", children: hi })
|
|
387
492
|
] }) : null
|
|
388
493
|
] }),
|
|
389
|
-
subtitle ? /* @__PURE__ */
|
|
390
|
-
lead ? /* @__PURE__ */
|
|
391
|
-
/* @__PURE__ */
|
|
392
|
-
cta ? /* @__PURE__ */
|
|
393
|
-
secondary ? /* @__PURE__ */
|
|
494
|
+
subtitle ? /* @__PURE__ */ jsx11("p", { className: "dt-lp-hero-subtitle", children: subtitle }) : null,
|
|
495
|
+
lead ? /* @__PURE__ */ jsx11("p", { className: "dt-lp-hero-lead", children: lead }) : null,
|
|
496
|
+
/* @__PURE__ */ jsxs9("div", { className: "dt-lp-actions", children: [
|
|
497
|
+
cta ? /* @__PURE__ */ jsx11(BookDemoButton, { size: "lg", children: cta }) : null,
|
|
498
|
+
secondary ? /* @__PURE__ */ jsx11(TextLink, { href: secondary.href, children: secondary.label }) : null
|
|
394
499
|
] }),
|
|
395
|
-
(chips == null ? void 0 : chips.length) ? /* @__PURE__ */
|
|
500
|
+
(chips == null ? void 0 : chips.length) ? /* @__PURE__ */ jsx11("ul", { className: "dt-lp-chips", "aria-label": chipsLabel, children: chips.map((c) => /* @__PURE__ */ jsx11("li", { children: c }, c)) }) : null
|
|
396
501
|
] })
|
|
397
502
|
] });
|
|
398
503
|
}
|
|
399
504
|
|
|
400
505
|
// src/FeatureSection.jsx
|
|
401
|
-
import { Fragment as
|
|
506
|
+
import { Fragment as Fragment4, jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
402
507
|
var asItem = (x) => typeof x === "string" ? { title: x } : x;
|
|
403
508
|
function Items({ items, kind }) {
|
|
404
|
-
return /* @__PURE__ */
|
|
405
|
-
f.icon ? /* @__PURE__ */
|
|
406
|
-
/* @__PURE__ */
|
|
407
|
-
f.label ? /* @__PURE__ */
|
|
408
|
-
/* @__PURE__ */
|
|
409
|
-
f.body ? /* @__PURE__ */
|
|
509
|
+
return /* @__PURE__ */ jsx12("ul", { className: `dt-lp-grid dt-lp-grid--${kind}`, children: items.map(asItem).map((f) => /* @__PURE__ */ jsxs10("li", { className: `dt-lp-card dt-lp-card--${kind}`, children: [
|
|
510
|
+
f.icon ? /* @__PURE__ */ jsx12("span", { className: "dt-lp-icon-tile", children: renderIcon(f.icon, 20) }) : null,
|
|
511
|
+
/* @__PURE__ */ jsxs10("div", { className: "dt-lp-card-text", children: [
|
|
512
|
+
f.label ? /* @__PURE__ */ jsx12("p", { className: "dt-lp-kicker", children: f.label }) : null,
|
|
513
|
+
/* @__PURE__ */ jsx12("h3", { className: "dt-lp-h3", children: f.href ? /* @__PURE__ */ jsx12(SmartLink, { href: f.href, children: f.title }) : f.title }),
|
|
514
|
+
f.body ? /* @__PURE__ */ jsx12("p", { children: f.body }) : null
|
|
410
515
|
] })
|
|
411
516
|
] }, f.title)) });
|
|
412
517
|
}
|
|
413
518
|
function Checklist({ items, icon: Icon = Check, tone = "good", labelledBy }) {
|
|
414
|
-
return /* @__PURE__ */
|
|
415
|
-
/* @__PURE__ */
|
|
416
|
-
/* @__PURE__ */
|
|
519
|
+
return /* @__PURE__ */ jsx12("ul", { className: `dt-lp-checklist dt-lp-checklist--${tone}`, "aria-labelledby": labelledBy, children: items.map((x) => /* @__PURE__ */ jsxs10("li", { children: [
|
|
520
|
+
/* @__PURE__ */ jsx12(Icon, { size: 18 }),
|
|
521
|
+
/* @__PURE__ */ jsx12("span", { children: x })
|
|
417
522
|
] }, x)) });
|
|
418
523
|
}
|
|
419
524
|
function InlineItems({ items }) {
|
|
420
525
|
if (!(items == null ? void 0 : items.length)) return null;
|
|
421
|
-
return /* @__PURE__ */
|
|
526
|
+
return /* @__PURE__ */ jsx12("ul", { className: "dt-lp-inline-items", children: items.map(asItem).map((f) => /* @__PURE__ */ jsxs10("li", { children: [
|
|
422
527
|
f.icon ? renderIcon(f.icon, 22) : null,
|
|
423
|
-
/* @__PURE__ */
|
|
424
|
-
/* @__PURE__ */
|
|
425
|
-
f.body ? /* @__PURE__ */
|
|
528
|
+
/* @__PURE__ */ jsxs10("span", { children: [
|
|
529
|
+
/* @__PURE__ */ jsx12("span", { className: "dt-lp-inline-title", children: f.title }),
|
|
530
|
+
f.body ? /* @__PURE__ */ jsx12("span", { className: "dt-lp-inline-body", children: f.body }) : null
|
|
426
531
|
] })
|
|
427
532
|
] }, f.title)) });
|
|
428
533
|
}
|
|
429
534
|
function Media({ children }) {
|
|
430
|
-
return /* @__PURE__ */
|
|
535
|
+
return /* @__PURE__ */ jsx12("div", { className: "dt-lp-media", children });
|
|
431
536
|
}
|
|
432
537
|
function Pair({ className, reverse, text, side }) {
|
|
433
|
-
return /* @__PURE__ */
|
|
538
|
+
return /* @__PURE__ */ jsxs10("div", { className: `${className}${reverse ? " dt-lp-pair--reverse" : ""}`, children: [
|
|
434
539
|
reverse ? side : text,
|
|
435
540
|
reverse ? text : side
|
|
436
541
|
] });
|
|
437
542
|
}
|
|
438
543
|
function Chips({ items, label, className = "" }) {
|
|
439
544
|
if (!(items == null ? void 0 : items.length)) return null;
|
|
440
|
-
return /* @__PURE__ */
|
|
545
|
+
return /* @__PURE__ */ jsx12("ul", { className: `dt-lp-chips dt-lp-chips--start ${className}`.trim(), "aria-label": label, children: items.map((c) => /* @__PURE__ */ jsx12("li", { children: c }, c)) });
|
|
441
546
|
}
|
|
442
547
|
function FeatureSection(props) {
|
|
443
548
|
const { id, variant = "cards", tone, eyebrow, title, body, items = [], cta, footnote, media, reverse, bullets } = props;
|
|
444
549
|
const hid = `${id || variant}-title`;
|
|
445
550
|
const defaultTone = { highlight: "dark", split: "tinted", compare: "muted" }[variant] || "plain";
|
|
446
|
-
const shell = (children, extra = {}) => /* @__PURE__ */
|
|
551
|
+
const shell = (children, extra = {}) => /* @__PURE__ */ jsx12(Section, { id, labelledBy: hid, tone: tone || defaultTone, className: `dt-lp-feature dt-lp-feature--${variant}`, ...extra, children });
|
|
447
552
|
switch (variant) {
|
|
448
553
|
case "split":
|
|
449
554
|
return shell(
|
|
450
|
-
/* @__PURE__ */
|
|
555
|
+
/* @__PURE__ */ jsx12(
|
|
451
556
|
Pair,
|
|
452
557
|
{
|
|
453
558
|
className: "dt-lp-split",
|
|
454
559
|
reverse,
|
|
455
|
-
text: /* @__PURE__ */
|
|
456
|
-
media ? /* @__PURE__ */
|
|
457
|
-
(bullets == null ? void 0 : bullets.length) ? /* @__PURE__ */
|
|
458
|
-
/* @__PURE__ */
|
|
560
|
+
text: /* @__PURE__ */ jsxs10(SectionIntro, { id: hid, eyebrow, title, body, children: [
|
|
561
|
+
media ? /* @__PURE__ */ jsx12(InlineItems, { items }) : null,
|
|
562
|
+
(bullets == null ? void 0 : bullets.length) ? /* @__PURE__ */ jsx12(Checklist, { items: bullets }) : null,
|
|
563
|
+
/* @__PURE__ */ jsx12(Cta, { cta, className: "dt-lp-mt" })
|
|
459
564
|
] }, "text"),
|
|
460
|
-
side: media ? /* @__PURE__ */
|
|
565
|
+
side: media ? /* @__PURE__ */ jsx12(Media, { children: media }, "side") : /* @__PURE__ */ jsx12(Items, { items, kind: "split" }, "side")
|
|
461
566
|
}
|
|
462
567
|
)
|
|
463
568
|
);
|
|
464
569
|
case "list":
|
|
465
570
|
return shell(
|
|
466
|
-
/* @__PURE__ */
|
|
467
|
-
/* @__PURE__ */
|
|
468
|
-
/* @__PURE__ */
|
|
469
|
-
/* @__PURE__ */
|
|
571
|
+
/* @__PURE__ */ jsxs10(Fragment4, { children: [
|
|
572
|
+
/* @__PURE__ */ jsx12(SectionIntro, { id: hid, eyebrow, title, body, align: "center" }),
|
|
573
|
+
/* @__PURE__ */ jsx12(Items, { items, kind: "list" }),
|
|
574
|
+
/* @__PURE__ */ jsx12(Cta, { cta, className: "dt-lp-mt" })
|
|
470
575
|
] })
|
|
471
576
|
);
|
|
472
577
|
case "intro": {
|
|
473
578
|
const { subtitle, detail, note, glance = [], glanceTitle = "At a glance", link } = props;
|
|
474
579
|
return shell(
|
|
475
|
-
/* @__PURE__ */
|
|
476
|
-
/* @__PURE__ */
|
|
477
|
-
/* @__PURE__ */
|
|
478
|
-
subtitle ? /* @__PURE__ */
|
|
479
|
-
detail ? /* @__PURE__ */
|
|
480
|
-
note ? /* @__PURE__ */
|
|
481
|
-
/* @__PURE__ */
|
|
580
|
+
/* @__PURE__ */ jsxs10("div", { className: "dt-lp-intro-grid", children: [
|
|
581
|
+
/* @__PURE__ */ jsxs10("div", { children: [
|
|
582
|
+
/* @__PURE__ */ jsx12(SectionIntro, { id: hid, eyebrow, title, body }),
|
|
583
|
+
subtitle ? /* @__PURE__ */ jsx12("h3", { className: "dt-lp-h3 dt-lp-h3--lg", children: subtitle }) : null,
|
|
584
|
+
detail ? /* @__PURE__ */ jsx12("p", { className: "dt-lp-body", children: detail }) : null,
|
|
585
|
+
note ? /* @__PURE__ */ jsx12("p", { className: "dt-lp-note", children: note }) : null,
|
|
586
|
+
/* @__PURE__ */ jsx12(Cta, { cta, className: "dt-lp-mt" })
|
|
482
587
|
] }),
|
|
483
|
-
glance.length ? /* @__PURE__ */
|
|
484
|
-
/* @__PURE__ */
|
|
485
|
-
/* @__PURE__ */
|
|
486
|
-
props.glanceNote ? /* @__PURE__ */
|
|
487
|
-
link ? /* @__PURE__ */
|
|
588
|
+
glance.length ? /* @__PURE__ */ jsxs10("aside", { className: "dt-lp-glance", "aria-labelledby": `${hid}-glance`, children: [
|
|
589
|
+
/* @__PURE__ */ jsx12("p", { id: `${hid}-glance`, className: "dt-lp-eyebrow", children: glanceTitle }),
|
|
590
|
+
/* @__PURE__ */ jsx12(Checklist, { items: glance }),
|
|
591
|
+
props.glanceNote ? /* @__PURE__ */ jsx12("p", { className: "dt-lp-note", children: props.glanceNote }) : null,
|
|
592
|
+
link ? /* @__PURE__ */ jsx12(TextLink, { href: link.href, className: "dt-lp-mt", children: link.label }) : null
|
|
488
593
|
] }) : null
|
|
489
594
|
] })
|
|
490
595
|
);
|
|
491
596
|
}
|
|
492
597
|
case "highlight": {
|
|
493
598
|
const { note, noteLabel = "Important:" } = props;
|
|
494
|
-
const text = /* @__PURE__ */
|
|
495
|
-
/* @__PURE__ */
|
|
496
|
-
/* @__PURE__ */
|
|
497
|
-
body ? /* @__PURE__ */
|
|
498
|
-
note ? /* @__PURE__ */
|
|
499
|
-
/* @__PURE__ */
|
|
500
|
-
/* @__PURE__ */
|
|
501
|
-
/* @__PURE__ */
|
|
599
|
+
const text = /* @__PURE__ */ jsxs10("div", { className: "dt-lp-intro", children: [
|
|
600
|
+
/* @__PURE__ */ jsx12(Eyebrow, { children: eyebrow }),
|
|
601
|
+
/* @__PURE__ */ jsx12("h2", { id: hid, className: "dt-lp-h2", children: title }),
|
|
602
|
+
body ? /* @__PURE__ */ jsx12("p", { className: "dt-lp-lead", children: body }) : null,
|
|
603
|
+
note ? /* @__PURE__ */ jsxs10("p", { className: "dt-lp-callout", children: [
|
|
604
|
+
/* @__PURE__ */ jsx12(Alert, { size: 20 }),
|
|
605
|
+
/* @__PURE__ */ jsxs10("span", { children: [
|
|
606
|
+
/* @__PURE__ */ jsx12("strong", { children: noteLabel }),
|
|
502
607
|
" ",
|
|
503
608
|
note
|
|
504
609
|
] })
|
|
505
610
|
] }) : null,
|
|
506
|
-
media ? /* @__PURE__ */
|
|
507
|
-
/* @__PURE__ */
|
|
611
|
+
media ? /* @__PURE__ */ jsx12(InlineItems, { items }) : null,
|
|
612
|
+
/* @__PURE__ */ jsx12(Cta, { cta, className: "dt-lp-mt" })
|
|
508
613
|
] }, "text");
|
|
509
|
-
const side = media ? /* @__PURE__ */
|
|
614
|
+
const side = media ? /* @__PURE__ */ jsx12(Media, { children: media }, "side") : /* @__PURE__ */ jsx12("ul", { className: "dt-lp-grid dt-lp-grid--chips", children: items.map(asItem).map((f) => /* @__PURE__ */ jsxs10("li", { className: "dt-lp-chip-card", children: [
|
|
510
615
|
renderIcon(f.icon, 22),
|
|
511
|
-
/* @__PURE__ */
|
|
616
|
+
/* @__PURE__ */ jsx12("span", { children: f.title })
|
|
512
617
|
] }, f.title)) }, "side");
|
|
513
|
-
return shell(/* @__PURE__ */
|
|
618
|
+
return shell(/* @__PURE__ */ jsx12(Pair, { className: "dt-lp-split dt-lp-split--wide", reverse, text, side }));
|
|
514
619
|
}
|
|
515
620
|
case "band": {
|
|
516
621
|
const { examples, examplesLabel = "Examples" } = props;
|
|
517
|
-
const text = /* @__PURE__ */
|
|
518
|
-
/* @__PURE__ */
|
|
519
|
-
/* @__PURE__ */
|
|
520
|
-
media ? /* @__PURE__ */
|
|
521
|
-
/* @__PURE__ */
|
|
622
|
+
const text = /* @__PURE__ */ jsxs10("div", { children: [
|
|
623
|
+
/* @__PURE__ */ jsx12(SectionIntro, { id: hid, eyebrow, title, body }),
|
|
624
|
+
/* @__PURE__ */ jsx12(Chips, { items: examples, label: examplesLabel, className: "dt-lp-mt" }),
|
|
625
|
+
media ? /* @__PURE__ */ jsx12(InlineItems, { items }) : null,
|
|
626
|
+
/* @__PURE__ */ jsx12(Cta, { cta, className: "dt-lp-mt" })
|
|
522
627
|
] }, "text");
|
|
523
|
-
const side = media ? /* @__PURE__ */
|
|
628
|
+
const side = media ? /* @__PURE__ */ jsx12(Media, { children: media }, "side") : /* @__PURE__ */ jsx12("ul", { className: "dt-lp-band-list", children: items.map(asItem).map((f) => /* @__PURE__ */ jsxs10("li", { children: [
|
|
524
629
|
renderIcon(f.icon, 22),
|
|
525
|
-
/* @__PURE__ */
|
|
630
|
+
/* @__PURE__ */ jsx12("span", { children: f.title })
|
|
526
631
|
] }, f.title)) }, "side");
|
|
527
|
-
return shell(/* @__PURE__ */
|
|
632
|
+
return shell(/* @__PURE__ */ jsx12(Pair, { className: "dt-lp-band", reverse, text, side }));
|
|
528
633
|
}
|
|
529
634
|
case "compare": {
|
|
530
635
|
const { columns = [] } = props;
|
|
531
636
|
return shell(
|
|
532
|
-
/* @__PURE__ */
|
|
533
|
-
/* @__PURE__ */
|
|
534
|
-
/* @__PURE__ */
|
|
637
|
+
/* @__PURE__ */ jsxs10(Fragment4, { children: [
|
|
638
|
+
/* @__PURE__ */ jsx12(SectionIntro, { id: hid, eyebrow, title, body }),
|
|
639
|
+
/* @__PURE__ */ jsx12("div", { className: "dt-lp-compare", children: columns.map((col, i) => {
|
|
535
640
|
const cid = `${id || "compare"}-${i + 1}`;
|
|
536
641
|
const tone2 = col.tone || (i === 0 ? "good" : "check");
|
|
537
|
-
return /* @__PURE__ */
|
|
538
|
-
/* @__PURE__ */
|
|
539
|
-
/* @__PURE__ */
|
|
642
|
+
return /* @__PURE__ */ jsxs10("div", { className: "dt-lp-card dt-lp-card--compare", children: [
|
|
643
|
+
/* @__PURE__ */ jsx12("h3", { id: cid, className: "dt-lp-h3 dt-lp-h3--lg", children: col.title }),
|
|
644
|
+
/* @__PURE__ */ jsx12(Checklist, { items: col.items, tone: tone2, icon: tone2 === "good" ? Check : Help, labelledBy: cid })
|
|
540
645
|
] }, cid);
|
|
541
646
|
}) })
|
|
542
647
|
] })
|
|
@@ -544,124 +649,124 @@ function FeatureSection(props) {
|
|
|
544
649
|
}
|
|
545
650
|
case "links":
|
|
546
651
|
return shell(
|
|
547
|
-
/* @__PURE__ */
|
|
548
|
-
/* @__PURE__ */
|
|
549
|
-
/* @__PURE__ */
|
|
550
|
-
/* @__PURE__ */
|
|
652
|
+
/* @__PURE__ */ jsxs10(Fragment4, { children: [
|
|
653
|
+
/* @__PURE__ */ jsx12(SectionIntro, { id: hid, eyebrow, title, body }),
|
|
654
|
+
/* @__PURE__ */ jsx12("ul", { className: "dt-lp-grid dt-lp-grid--links", children: items.map((s) => /* @__PURE__ */ jsx12("li", { children: /* @__PURE__ */ jsxs10(SmartLink, { href: s.href, className: "dt-lp-linkcard", children: [
|
|
655
|
+
/* @__PURE__ */ jsxs10("span", { className: "dt-lp-linkcard-title", children: [
|
|
551
656
|
s.title,
|
|
552
657
|
" ",
|
|
553
|
-
/* @__PURE__ */
|
|
658
|
+
/* @__PURE__ */ jsx12(ArrowRight, {})
|
|
554
659
|
] }),
|
|
555
|
-
s.body ? /* @__PURE__ */
|
|
660
|
+
s.body ? /* @__PURE__ */ jsx12("span", { className: "dt-lp-linkcard-body", children: s.body }) : null
|
|
556
661
|
] }) }, s.href)) })
|
|
557
662
|
] })
|
|
558
663
|
);
|
|
559
664
|
case "detail": {
|
|
560
665
|
return shell(
|
|
561
|
-
/* @__PURE__ */
|
|
562
|
-
/* @__PURE__ */
|
|
563
|
-
/* @__PURE__ */
|
|
564
|
-
body ? /* @__PURE__ */
|
|
565
|
-
(bullets == null ? void 0 : bullets.length) ? /* @__PURE__ */
|
|
666
|
+
/* @__PURE__ */ jsxs10("div", { className: "dt-lp-detail", children: [
|
|
667
|
+
/* @__PURE__ */ jsx12("h2", { id: hid, className: "dt-lp-h2", children: title }),
|
|
668
|
+
/* @__PURE__ */ jsxs10("div", { children: [
|
|
669
|
+
body ? /* @__PURE__ */ jsx12("p", { className: "dt-lp-body", children: body }) : null,
|
|
670
|
+
(bullets == null ? void 0 : bullets.length) ? /* @__PURE__ */ jsx12(Checklist, { items: bullets }) : null
|
|
566
671
|
] })
|
|
567
672
|
] })
|
|
568
673
|
);
|
|
569
674
|
}
|
|
570
675
|
default:
|
|
571
676
|
return shell(
|
|
572
|
-
/* @__PURE__ */
|
|
573
|
-
/* @__PURE__ */
|
|
574
|
-
/* @__PURE__ */
|
|
575
|
-
footnote ? /* @__PURE__ */
|
|
576
|
-
/* @__PURE__ */
|
|
677
|
+
/* @__PURE__ */ jsxs10(Fragment4, { children: [
|
|
678
|
+
/* @__PURE__ */ jsx12(SectionIntro, { id: hid, eyebrow, title, body }),
|
|
679
|
+
/* @__PURE__ */ jsx12(Items, { items, kind: "cards" }),
|
|
680
|
+
footnote ? /* @__PURE__ */ jsx12("p", { className: "dt-lp-footnote", children: footnote }) : null,
|
|
681
|
+
/* @__PURE__ */ jsx12(Cta, { cta, className: "dt-lp-mt" })
|
|
577
682
|
] })
|
|
578
683
|
);
|
|
579
684
|
}
|
|
580
685
|
}
|
|
581
686
|
|
|
582
687
|
// src/Audiences.jsx
|
|
583
|
-
import { jsx as
|
|
688
|
+
import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
584
689
|
function Audiences({ id = "audiences", eyebrow, title, body, items = [], linkLabel = "See how it works", tone = "muted" }) {
|
|
585
690
|
const hid = `${id}-title`;
|
|
586
|
-
return /* @__PURE__ */
|
|
587
|
-
/* @__PURE__ */
|
|
588
|
-
/* @__PURE__ */
|
|
691
|
+
return /* @__PURE__ */ jsxs11(Section, { id, labelledBy: hid, tone, className: "dt-lp-audiences", children: [
|
|
692
|
+
/* @__PURE__ */ jsx13(SectionIntro, { id: hid, eyebrow, title, body, align: "center" }),
|
|
693
|
+
/* @__PURE__ */ jsx13("div", { className: `dt-lp-grid dt-lp-grid--audiences dt-lp-grid--n${Math.min(items.length, 4)}`, children: items.map((a, i) => {
|
|
589
694
|
var _a;
|
|
590
695
|
const aid = a.id || `${id}-${i + 1}`;
|
|
591
|
-
return /* @__PURE__ */
|
|
592
|
-
a.icon ? /* @__PURE__ */
|
|
593
|
-
/* @__PURE__ */
|
|
594
|
-
/* @__PURE__ */
|
|
595
|
-
a.keyword ? /* @__PURE__ */
|
|
596
|
-
/* @__PURE__ */
|
|
597
|
-
/* @__PURE__ */
|
|
696
|
+
return /* @__PURE__ */ jsxs11("article", { id: aid, "aria-labelledby": `${aid}-title`, className: "dt-lp-card dt-lp-card--audience", children: [
|
|
697
|
+
a.icon ? /* @__PURE__ */ jsx13("span", { className: "dt-lp-audience-icon", children: renderIcon(a.icon, 30) }) : null,
|
|
698
|
+
/* @__PURE__ */ jsxs11("div", { className: a.media ? "dt-lp-audience-head" : void 0, children: [
|
|
699
|
+
/* @__PURE__ */ jsxs11("div", { children: [
|
|
700
|
+
a.keyword ? /* @__PURE__ */ jsx13("p", { className: "dt-lp-kicker", children: a.keyword }) : null,
|
|
701
|
+
/* @__PURE__ */ jsx13("h3", { id: `${aid}-title`, className: "dt-lp-h3 dt-lp-h3--lg", children: a.title }),
|
|
702
|
+
/* @__PURE__ */ jsx13("p", { className: a.media || a.features ? void 0 : "dt-lp-grow", children: a.body })
|
|
598
703
|
] }),
|
|
599
|
-
a.media ? /* @__PURE__ */
|
|
704
|
+
a.media ? /* @__PURE__ */ jsx13("div", { className: "dt-lp-audience-media", "aria-hidden": "true", children: a.media }) : null
|
|
600
705
|
] }),
|
|
601
|
-
((_a = a.features) == null ? void 0 : _a.length) ? /* @__PURE__ */
|
|
706
|
+
((_a = a.features) == null ? void 0 : _a.length) ? /* @__PURE__ */ jsx13("ul", { className: "dt-lp-audience-features dt-lp-grow", children: a.features.map((f) => {
|
|
602
707
|
const it = typeof f === "string" ? { title: f } : f;
|
|
603
|
-
return /* @__PURE__ */
|
|
708
|
+
return /* @__PURE__ */ jsxs11("li", { children: [
|
|
604
709
|
it.icon ? renderIcon(it.icon, 22) : null,
|
|
605
|
-
/* @__PURE__ */
|
|
710
|
+
/* @__PURE__ */ jsx13("span", { children: it.title })
|
|
606
711
|
] }, it.title);
|
|
607
712
|
}) }) : null,
|
|
608
|
-
a.href ? /* @__PURE__ */
|
|
713
|
+
a.href ? /* @__PURE__ */ jsx13(TextLink, { href: a.href, "aria-label": `${a.keyword || a.title}: ${(a.linkLabel || linkLabel).toLowerCase()}`, children: a.linkLabel || linkLabel }) : null
|
|
609
714
|
] }, aid);
|
|
610
715
|
}) })
|
|
611
716
|
] });
|
|
612
717
|
}
|
|
613
718
|
|
|
614
719
|
// src/HowItWorks.jsx
|
|
615
|
-
import { jsx as
|
|
720
|
+
import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
616
721
|
function HowItWorks({ id = "how-it-works", eyebrow, title, body, steps, items, tone = "plain", cta }) {
|
|
617
722
|
const list = steps || items || [];
|
|
618
723
|
const hid = `${id}-title`;
|
|
619
|
-
return /* @__PURE__ */
|
|
620
|
-
/* @__PURE__ */
|
|
621
|
-
/* @__PURE__ */
|
|
622
|
-
/* @__PURE__ */
|
|
623
|
-
/* @__PURE__ */
|
|
624
|
-
/* @__PURE__ */
|
|
724
|
+
return /* @__PURE__ */ jsxs12(Section, { id, labelledBy: hid, tone, className: "dt-lp-steps", children: [
|
|
725
|
+
/* @__PURE__ */ jsx14(SectionIntro, { id: hid, eyebrow, title, body }),
|
|
726
|
+
/* @__PURE__ */ jsx14("ol", { className: "dt-lp-grid dt-lp-grid--steps", children: list.map((st, i) => /* @__PURE__ */ jsxs12("li", { className: "dt-lp-card", children: [
|
|
727
|
+
/* @__PURE__ */ jsx14("span", { className: "dt-lp-step-num", "aria-hidden": "true", children: i + 1 }),
|
|
728
|
+
/* @__PURE__ */ jsx14("h3", { className: "dt-lp-h3", children: st.name || st.title }),
|
|
729
|
+
/* @__PURE__ */ jsx14("p", { children: st.text || st.body })
|
|
625
730
|
] }, st.name || st.title)) }),
|
|
626
|
-
/* @__PURE__ */
|
|
731
|
+
/* @__PURE__ */ jsx14(Cta, { cta, className: "dt-lp-mt" })
|
|
627
732
|
] });
|
|
628
733
|
}
|
|
629
734
|
|
|
630
735
|
// src/Faq.jsx
|
|
631
|
-
import { jsx as
|
|
736
|
+
import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
632
737
|
function Faq({ id = "faq", eyebrow, title = "Frequently asked questions", intro, items = [], openFirst = true, tone = "muted" }) {
|
|
633
738
|
const hid = `${id}-title`;
|
|
634
|
-
return /* @__PURE__ */
|
|
635
|
-
/* @__PURE__ */
|
|
636
|
-
/* @__PURE__ */
|
|
637
|
-
/* @__PURE__ */
|
|
638
|
-
/* @__PURE__ */
|
|
639
|
-
/* @__PURE__ */
|
|
739
|
+
return /* @__PURE__ */ jsxs13(Section, { id, labelledBy: hid, tone, narrow: true, className: "dt-lp-faq", children: [
|
|
740
|
+
/* @__PURE__ */ jsx15(SectionIntro, { id: hid, eyebrow, title, body: intro, align: "center" }),
|
|
741
|
+
/* @__PURE__ */ jsx15("div", { className: "dt-lp-faq-list", children: items.map((f, i) => /* @__PURE__ */ jsxs13("details", { className: "dt-lp-faq-item", open: openFirst && i === 0, children: [
|
|
742
|
+
/* @__PURE__ */ jsxs13("summary", { children: [
|
|
743
|
+
/* @__PURE__ */ jsx15("h3", { className: "dt-lp-h3", children: f.q }),
|
|
744
|
+
/* @__PURE__ */ jsx15(ChevronRight, { size: 18, className: "dt-lp-icon dt-lp-faq-chevron" })
|
|
640
745
|
] }),
|
|
641
|
-
/* @__PURE__ */
|
|
746
|
+
/* @__PURE__ */ jsx15("p", { children: f.a })
|
|
642
747
|
] }, f.q)) })
|
|
643
748
|
] });
|
|
644
749
|
}
|
|
645
750
|
|
|
646
751
|
// src/DemoCta.jsx
|
|
647
|
-
import { jsx as
|
|
752
|
+
import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
648
753
|
function DemoCta({ id = "demo", eyebrow, title, body, label = "Book a demo", chips, chipsLabel = "Business types", note, link }) {
|
|
649
|
-
return /* @__PURE__ */
|
|
650
|
-
eyebrow ? /* @__PURE__ */
|
|
651
|
-
/* @__PURE__ */
|
|
652
|
-
body ? /* @__PURE__ */
|
|
653
|
-
/* @__PURE__ */
|
|
654
|
-
(chips == null ? void 0 : chips.length) ? /* @__PURE__ */
|
|
655
|
-
note ? /* @__PURE__ */
|
|
656
|
-
note.title ? /* @__PURE__ */
|
|
657
|
-
note.body ? /* @__PURE__ */
|
|
754
|
+
return /* @__PURE__ */ jsx16("section", { id, "aria-labelledby": `${id}-title`, className: "dt-lp-section dt-lp-cta", children: /* @__PURE__ */ jsx16(Wrap, { children: /* @__PURE__ */ jsxs14("div", { className: "dt-lp-cta-panel", children: [
|
|
755
|
+
eyebrow ? /* @__PURE__ */ jsx16("p", { className: "dt-lp-eyebrow dt-lp-eyebrow--inverse", children: eyebrow }) : null,
|
|
756
|
+
/* @__PURE__ */ jsx16("h2", { id: `${id}-title`, className: "dt-lp-h2 dt-lp-h2--cta", children: title }),
|
|
757
|
+
body ? /* @__PURE__ */ jsx16("p", { className: "dt-lp-cta-body", children: body }) : null,
|
|
758
|
+
/* @__PURE__ */ jsx16(BookDemoButton, { size: "lg", variant: "inverse", children: label }),
|
|
759
|
+
(chips == null ? void 0 : chips.length) ? /* @__PURE__ */ jsx16("ul", { className: "dt-lp-chips dt-lp-chips--inverse", "aria-label": chipsLabel, children: chips.map((k) => /* @__PURE__ */ jsx16("li", { children: k }, k)) }) : null,
|
|
760
|
+
note ? /* @__PURE__ */ jsxs14("div", { className: "dt-lp-cta-note", children: [
|
|
761
|
+
note.title ? /* @__PURE__ */ jsx16("h3", { className: "dt-lp-h3", children: note.title }) : null,
|
|
762
|
+
note.body ? /* @__PURE__ */ jsx16("p", { children: note.body }) : null
|
|
658
763
|
] }) : null,
|
|
659
|
-
link ? /* @__PURE__ */
|
|
764
|
+
link ? /* @__PURE__ */ jsx16("p", { className: "dt-lp-cta-link", children: /* @__PURE__ */ jsx16(SmartLink, { href: link.href, reload: link.reload, children: link.label }) }) : null
|
|
660
765
|
] }) }) });
|
|
661
766
|
}
|
|
662
767
|
|
|
663
768
|
// src/LandingPage.jsx
|
|
664
|
-
import { jsx as
|
|
769
|
+
import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
665
770
|
var BLOCKS = { audiences: Audiences, steps: HowItWorks, faq: Faq, cta: DemoCta };
|
|
666
771
|
var TAIL = ["audiences", "steps", "faq", "cta"];
|
|
667
772
|
function LandingPage({ brand, content, preview = null, slots = {}, linkComponent, onBookDemo, home = true, className }) {
|
|
@@ -675,22 +780,22 @@ function LandingPage({ brand, content, preview = null, slots = {}, linkComponent
|
|
|
675
780
|
var _a;
|
|
676
781
|
if (!s) return null;
|
|
677
782
|
if (isValidElement2(s)) return cloneElement(s, { key: (_a = s.key) != null ? _a : `el-${i}` });
|
|
678
|
-
if (s.use === "preview") return preview ? /* @__PURE__ */
|
|
783
|
+
if (s.use === "preview") return preview ? /* @__PURE__ */ jsx17("div", { children: preview }, "preview") : null;
|
|
679
784
|
if (s.use) {
|
|
680
785
|
if (slots && Object.prototype.hasOwnProperty.call(slots, s.use)) {
|
|
681
786
|
const node = slots[s.use];
|
|
682
|
-
return node ? /* @__PURE__ */
|
|
787
|
+
return node ? /* @__PURE__ */ jsx17(Fragment5, { children: node }, `slot-${s.use}`) : null;
|
|
683
788
|
}
|
|
684
789
|
const Block = BLOCKS[s.use];
|
|
685
790
|
if (!Block) {
|
|
686
791
|
const known = ["preview", ...TAIL, ...Object.keys(slots || {})].join(", ");
|
|
687
792
|
throw new Error(`landing-kit: unknown section use "${s.use}" (known: ${known}). Pass custom sections as <LandingPage slots={{ ${s.use}: <YourSection /> }} />.`);
|
|
688
793
|
}
|
|
689
|
-
return content[s.use] ? /* @__PURE__ */
|
|
794
|
+
return content[s.use] ? /* @__PURE__ */ jsx17(Block, { ...content[s.use] }, s.use) : null;
|
|
690
795
|
}
|
|
691
|
-
return /* @__PURE__ */
|
|
796
|
+
return /* @__PURE__ */ jsx17(FeatureSection, { ...s }, s.id || `section-${i}`);
|
|
692
797
|
};
|
|
693
|
-
return /* @__PURE__ */
|
|
798
|
+
return /* @__PURE__ */ jsxs15(
|
|
694
799
|
MarketingLayout,
|
|
695
800
|
{
|
|
696
801
|
brand,
|
|
@@ -703,12 +808,12 @@ function LandingPage({ brand, content, preview = null, slots = {}, linkComponent
|
|
|
703
808
|
onBookDemo,
|
|
704
809
|
className,
|
|
705
810
|
children: [
|
|
706
|
-
/* @__PURE__ */
|
|
811
|
+
/* @__PURE__ */ jsx17(Hero, { ...hero, overlap: !!preview && !previewInline }),
|
|
707
812
|
preview && !previewInline ? preview : null,
|
|
708
813
|
sections.map(render),
|
|
709
814
|
TAIL.filter((k) => !used.has(k) && content[k]).map((k) => {
|
|
710
815
|
const Block = BLOCKS[k];
|
|
711
|
-
return /* @__PURE__ */
|
|
816
|
+
return /* @__PURE__ */ jsx17(Block, { ...content[k] }, k);
|
|
712
817
|
})
|
|
713
818
|
]
|
|
714
819
|
}
|
|
@@ -716,7 +821,7 @@ function LandingPage({ brand, content, preview = null, slots = {}, linkComponent
|
|
|
716
821
|
}
|
|
717
822
|
|
|
718
823
|
// src/PreviewFrame.jsx
|
|
719
|
-
import { jsx as
|
|
824
|
+
import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
720
825
|
function PreviewFrame({
|
|
721
826
|
id = "product",
|
|
722
827
|
heading,
|
|
@@ -728,25 +833,25 @@ function PreviewFrame({
|
|
|
728
833
|
}) {
|
|
729
834
|
const ctx = useLanding();
|
|
730
835
|
const brand = own || ctx.brand;
|
|
731
|
-
return /* @__PURE__ */
|
|
732
|
-
/* @__PURE__ */
|
|
733
|
-
/* @__PURE__ */
|
|
734
|
-
/* @__PURE__ */
|
|
735
|
-
/* @__PURE__ */
|
|
736
|
-
brand ? /* @__PURE__ */
|
|
737
|
-
meta ? /* @__PURE__ */
|
|
836
|
+
return /* @__PURE__ */ jsxs16("section", { id, "aria-labelledby": `${id}-title`, className: "dt-lp-preview", children: [
|
|
837
|
+
/* @__PURE__ */ jsx18("h2", { id: `${id}-title`, className: "dt-lp-sr-only", children: heading || `${brand ? brand.name : "Product"} overview` }),
|
|
838
|
+
/* @__PURE__ */ jsx18(Wrap, { children: /* @__PURE__ */ jsxs16("figure", { className: "dt-lp-preview-frame", children: [
|
|
839
|
+
/* @__PURE__ */ jsxs16("div", { className: "dt-lp-preview-bar", children: [
|
|
840
|
+
/* @__PURE__ */ jsxs16("div", { className: "dt-lp-preview-title", children: [
|
|
841
|
+
brand ? /* @__PURE__ */ jsx18(Wordmark, { name: brand.name }) : null,
|
|
842
|
+
meta ? /* @__PURE__ */ jsx18("span", { className: "dt-lp-preview-meta", children: meta }) : null
|
|
738
843
|
] }),
|
|
739
|
-
badge ? /* @__PURE__ */
|
|
844
|
+
badge ? /* @__PURE__ */ jsx18("span", { className: "dt-lp-preview-badge", children: badge }) : null
|
|
740
845
|
] }),
|
|
741
|
-
/* @__PURE__ */
|
|
742
|
-
caption ? /* @__PURE__ */
|
|
846
|
+
/* @__PURE__ */ jsx18("div", { className: "dt-lp-preview-body", children }),
|
|
847
|
+
caption ? /* @__PURE__ */ jsx18("figcaption", { className: "dt-lp-sr-only", children: caption }) : null
|
|
743
848
|
] }) })
|
|
744
849
|
] });
|
|
745
850
|
}
|
|
746
851
|
|
|
747
852
|
// src/DemoDialog.jsx
|
|
748
|
-
import { useEffect, useRef, useState as
|
|
749
|
-
import { jsx as
|
|
853
|
+
import { useEffect as useEffect2, useRef as useRef3, useState as useState4 } from "react";
|
|
854
|
+
import { jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
750
855
|
var DEFAULT_DEMO_FIELDS = [
|
|
751
856
|
{ name: "name", label: "Your name", required: true, maxLength: 120, autoComplete: "name" },
|
|
752
857
|
{ name: "phone", label: "Mobile", type: "tel", required: true, maxLength: 20, autoComplete: "tel", inputMode: "tel" },
|
|
@@ -768,14 +873,14 @@ function Field({ f, value, onChange, error }) {
|
|
|
768
873
|
};
|
|
769
874
|
let control;
|
|
770
875
|
if (f.type === "select") {
|
|
771
|
-
control = /* @__PURE__ */
|
|
772
|
-
/* @__PURE__ */
|
|
773
|
-
(f.options || []).map((o) => /* @__PURE__ */
|
|
876
|
+
control = /* @__PURE__ */ jsxs17("select", { ...common, children: [
|
|
877
|
+
/* @__PURE__ */ jsx19("option", { value: "", children: f.placeholder || "Choose one" }),
|
|
878
|
+
(f.options || []).map((o) => /* @__PURE__ */ jsx19("option", { value: o.value, children: o.label }, o.value))
|
|
774
879
|
] });
|
|
775
880
|
} else if (f.type === "textarea") {
|
|
776
|
-
control = /* @__PURE__ */
|
|
881
|
+
control = /* @__PURE__ */ jsx19("textarea", { ...common, rows: f.rows || 3, maxLength: f.maxLength });
|
|
777
882
|
} else {
|
|
778
|
-
control = /* @__PURE__ */
|
|
883
|
+
control = /* @__PURE__ */ jsx19(
|
|
779
884
|
"input",
|
|
780
885
|
{
|
|
781
886
|
...common,
|
|
@@ -788,13 +893,13 @@ function Field({ f, value, onChange, error }) {
|
|
|
788
893
|
}
|
|
789
894
|
);
|
|
790
895
|
}
|
|
791
|
-
return /* @__PURE__ */
|
|
792
|
-
/* @__PURE__ */
|
|
896
|
+
return /* @__PURE__ */ jsxs17("label", { htmlFor: id, className: `dt-lp-field${f.wide || f.type === "textarea" ? " dt-lp-field--wide" : ""}`, children: [
|
|
897
|
+
/* @__PURE__ */ jsxs17("span", { children: [
|
|
793
898
|
f.label,
|
|
794
899
|
f.required ? " *" : ""
|
|
795
900
|
] }),
|
|
796
901
|
control,
|
|
797
|
-
error ? /* @__PURE__ */
|
|
902
|
+
error ? /* @__PURE__ */ jsx19("span", { id: errId, className: "dt-lp-field-error", children: error }) : null
|
|
798
903
|
] });
|
|
799
904
|
}
|
|
800
905
|
function DemoDialog({
|
|
@@ -814,16 +919,16 @@ function DemoDialog({
|
|
|
814
919
|
successMessage,
|
|
815
920
|
validate
|
|
816
921
|
}) {
|
|
817
|
-
const ref =
|
|
818
|
-
const [form, setForm] =
|
|
819
|
-
const [website, setWebsite] =
|
|
820
|
-
const [consent, setConsent] =
|
|
821
|
-
const [busy, setBusy] =
|
|
822
|
-
const [err, setErr] =
|
|
823
|
-
const [fieldErrors, setFieldErrors] =
|
|
824
|
-
const [sent, setSent] =
|
|
922
|
+
const ref = useRef3(null);
|
|
923
|
+
const [form, setForm] = useState4(() => initial(fields));
|
|
924
|
+
const [website, setWebsite] = useState4("");
|
|
925
|
+
const [consent, setConsent] = useState4(false);
|
|
926
|
+
const [busy, setBusy] = useState4(false);
|
|
927
|
+
const [err, setErr] = useState4("");
|
|
928
|
+
const [fieldErrors, setFieldErrors] = useState4({});
|
|
929
|
+
const [sent, setSent] = useState4(false);
|
|
825
930
|
const name = brand ? brand.name : "a";
|
|
826
|
-
|
|
931
|
+
useEffect2(() => {
|
|
827
932
|
const dlg = ref.current;
|
|
828
933
|
if (open && dlg && !dlg.open && typeof dlg.showModal === "function") dlg.showModal();
|
|
829
934
|
}, [open]);
|
|
@@ -858,7 +963,7 @@ function DemoDialog({
|
|
|
858
963
|
};
|
|
859
964
|
const first = String(form.name || "").trim().split(/\s+/)[0] || "there";
|
|
860
965
|
const thanks = typeof successMessage === "function" ? successMessage(form) : successMessage || `Thanks, ${first}. We have your request. Someone from the ${name} team will call you within one working day to fix a time.`;
|
|
861
|
-
return /* @__PURE__ */
|
|
966
|
+
return /* @__PURE__ */ jsxs17(
|
|
862
967
|
"dialog",
|
|
863
968
|
{
|
|
864
969
|
ref,
|
|
@@ -871,33 +976,33 @@ function DemoDialog({
|
|
|
871
976
|
onClose();
|
|
872
977
|
},
|
|
873
978
|
children: [
|
|
874
|
-
/* @__PURE__ */
|
|
875
|
-
/* @__PURE__ */
|
|
876
|
-
/* @__PURE__ */
|
|
979
|
+
/* @__PURE__ */ jsxs17("div", { className: "dt-lp-dialog-head", children: [
|
|
980
|
+
/* @__PURE__ */ jsx19("h2", { id: "dt-demo-title", children: sent ? "Thank you" : title || `Book a ${name} demo` }),
|
|
981
|
+
/* @__PURE__ */ jsx19("button", { type: "button", className: "dt-lp-dialog-x", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsx19(Close, { size: 18 }) })
|
|
877
982
|
] }),
|
|
878
|
-
/* @__PURE__ */
|
|
879
|
-
/* @__PURE__ */
|
|
880
|
-
/* @__PURE__ */
|
|
881
|
-
] }) : /* @__PURE__ */
|
|
882
|
-
intro ? /* @__PURE__ */
|
|
883
|
-
err ? /* @__PURE__ */
|
|
884
|
-
/* @__PURE__ */
|
|
885
|
-
/* @__PURE__ */
|
|
983
|
+
/* @__PURE__ */ jsx19("div", { className: "dt-lp-dialog-body", children: sent ? /* @__PURE__ */ jsxs17("div", { className: "dt-lp-stack", children: [
|
|
984
|
+
/* @__PURE__ */ jsx19("p", { role: "status", children: thanks }),
|
|
985
|
+
/* @__PURE__ */ jsx19("button", { type: "button", className: "dt-lp-btn dt-lp-btn--outline dt-lp-btn--md", onClick: onClose, children: "Close" })
|
|
986
|
+
] }) : /* @__PURE__ */ jsxs17("form", { className: "dt-lp-stack", onSubmit: submit, noValidate: true, children: [
|
|
987
|
+
intro ? /* @__PURE__ */ jsx19("p", { className: "dt-lp-muted", children: intro }) : null,
|
|
988
|
+
err ? /* @__PURE__ */ jsx19("p", { role: "alert", className: "dt-lp-error", children: err }) : null,
|
|
989
|
+
/* @__PURE__ */ jsx19("div", { className: "dt-lp-fields", children: fields.map((f) => /* @__PURE__ */ jsx19(Field, { f, value: form[f.name], onChange: set(f.name), error: fieldErrors[f.name] }, f.name)) }),
|
|
990
|
+
/* @__PURE__ */ jsx19("div", { "aria-hidden": "true", className: "dt-lp-honeypot", children: /* @__PURE__ */ jsxs17("label", { children: [
|
|
886
991
|
"Website",
|
|
887
|
-
/* @__PURE__ */
|
|
992
|
+
/* @__PURE__ */ jsx19("input", { type: "text", name: "website", tabIndex: -1, autoComplete: "off", value: website, onChange: (e) => setWebsite(e.target.value) })
|
|
888
993
|
] }) }),
|
|
889
|
-
/* @__PURE__ */
|
|
890
|
-
/* @__PURE__ */
|
|
891
|
-
/* @__PURE__ */
|
|
994
|
+
/* @__PURE__ */ jsxs17("label", { className: "dt-lp-consent", children: [
|
|
995
|
+
/* @__PURE__ */ jsx19("input", { type: "checkbox", checked: consent, onChange: (e) => setConsent(e.target.checked) }),
|
|
996
|
+
/* @__PURE__ */ jsx19("span", { children: consentText || `I agree that ${fiduciary} may call, message or email me about this demo.` })
|
|
892
997
|
] }),
|
|
893
|
-
privacyHref ? /* @__PURE__ */
|
|
998
|
+
privacyHref ? /* @__PURE__ */ jsxs17("p", { className: "dt-lp-fineprint", children: [
|
|
894
999
|
"Used only to arrange your demo. See the ",
|
|
895
|
-
/* @__PURE__ */
|
|
1000
|
+
/* @__PURE__ */ jsx19("a", { href: privacyHref, children: "privacy policy" }),
|
|
896
1001
|
policyVersion ? ` (v${policyVersion})` : "",
|
|
897
1002
|
"."
|
|
898
1003
|
] }) : null,
|
|
899
|
-
/* @__PURE__ */
|
|
900
|
-
/* @__PURE__ */
|
|
1004
|
+
/* @__PURE__ */ jsxs17("button", { type: "submit", className: "dt-lp-btn dt-lp-btn--primary dt-lp-btn--md", disabled: !ready || busy, "aria-busy": busy ? "true" : void 0, children: [
|
|
1005
|
+
/* @__PURE__ */ jsx19(Calendar, { size: 16 }),
|
|
901
1006
|
busy ? "Sending\u2026" : submitLabel
|
|
902
1007
|
] })
|
|
903
1008
|
] }) })
|
|
@@ -907,33 +1012,33 @@ function DemoDialog({
|
|
|
907
1012
|
}
|
|
908
1013
|
|
|
909
1014
|
// src/PageHero.jsx
|
|
910
|
-
import { jsx as
|
|
1015
|
+
import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
911
1016
|
function Breadcrumbs({ items = [] }) {
|
|
912
1017
|
if (!items.length) return null;
|
|
913
|
-
return /* @__PURE__ */
|
|
1018
|
+
return /* @__PURE__ */ jsx20("nav", { "aria-label": "Breadcrumb", className: "dt-lp-crumbs", children: /* @__PURE__ */ jsx20("ol", { children: items.map((c, i) => {
|
|
914
1019
|
const last = i === items.length - 1;
|
|
915
|
-
return /* @__PURE__ */
|
|
916
|
-
i > 0 ? /* @__PURE__ */
|
|
917
|
-
last || !c.href ? /* @__PURE__ */
|
|
1020
|
+
return /* @__PURE__ */ jsxs18("li", { children: [
|
|
1021
|
+
i > 0 ? /* @__PURE__ */ jsx20(ChevronRight, { size: 14 }) : null,
|
|
1022
|
+
last || !c.href ? /* @__PURE__ */ jsx20("span", { "aria-current": last ? "page" : void 0, children: c.label }) : /* @__PURE__ */ jsx20(SmartLink, { href: c.href, children: c.label })
|
|
918
1023
|
] }, `${c.label}-${i}`);
|
|
919
1024
|
}) }) });
|
|
920
1025
|
}
|
|
921
1026
|
function PageHero({ breadcrumbs, eyebrow, title, lead, cta = "Book a demo", secondary }) {
|
|
922
|
-
return /* @__PURE__ */
|
|
923
|
-
/* @__PURE__ */
|
|
924
|
-
/* @__PURE__ */
|
|
925
|
-
/* @__PURE__ */
|
|
926
|
-
lead ? /* @__PURE__ */
|
|
927
|
-
/* @__PURE__ */
|
|
928
|
-
cta ? /* @__PURE__ */
|
|
929
|
-
secondary ? /* @__PURE__ */
|
|
1027
|
+
return /* @__PURE__ */ jsx20("section", { "aria-labelledby": "hero-title", className: "dt-lp-hero dt-lp-hero--page", children: /* @__PURE__ */ jsxs18(Wrap, { className: "dt-lp-hero-inner dt-lp-hero-inner--start", children: [
|
|
1028
|
+
/* @__PURE__ */ jsx20(Breadcrumbs, { items: breadcrumbs }),
|
|
1029
|
+
/* @__PURE__ */ jsx20(Eyebrow, { className: "dt-lp-mt-lg", children: eyebrow }),
|
|
1030
|
+
/* @__PURE__ */ jsx20("h1", { id: "hero-title", className: "dt-lp-h1 dt-lp-h1--page", children: title }),
|
|
1031
|
+
lead ? /* @__PURE__ */ jsx20("p", { id: "answer", className: "dt-lp-hero-lead", children: lead }) : null,
|
|
1032
|
+
/* @__PURE__ */ jsxs18("div", { className: "dt-lp-actions dt-lp-actions--start", children: [
|
|
1033
|
+
cta ? /* @__PURE__ */ jsx20(BookDemoButton, { size: "lg", children: cta }) : null,
|
|
1034
|
+
secondary ? /* @__PURE__ */ jsx20(TextLink, { href: secondary.href, children: secondary.label }) : null
|
|
930
1035
|
] })
|
|
931
1036
|
] }) });
|
|
932
1037
|
}
|
|
933
1038
|
|
|
934
1039
|
// src/island.jsx
|
|
935
1040
|
import { createRoot } from "react-dom/client";
|
|
936
|
-
import { jsx as
|
|
1041
|
+
import { jsx as jsx21 } from "react/jsx-runtime";
|
|
937
1042
|
function createDemoIsland(props) {
|
|
938
1043
|
let root;
|
|
939
1044
|
let returnTo = null;
|
|
@@ -952,7 +1057,7 @@ function createDemoIsland(props) {
|
|
|
952
1057
|
root = createRoot(host);
|
|
953
1058
|
}
|
|
954
1059
|
const p = typeof props === "function" ? props() : props;
|
|
955
|
-
root.render(/* @__PURE__ */
|
|
1060
|
+
root.render(/* @__PURE__ */ jsx21(DemoDialog, { ...p, onClose: close }, Date.now()));
|
|
956
1061
|
},
|
|
957
1062
|
close
|
|
958
1063
|
};
|
|
@@ -1073,11 +1178,42 @@ var brands = {
|
|
|
1073
1178
|
category: "by Dreamtree-Org"
|
|
1074
1179
|
}
|
|
1075
1180
|
};
|
|
1181
|
+
var warned = false;
|
|
1076
1182
|
function getBrand(id) {
|
|
1183
|
+
if (!warned && typeof console !== "undefined") {
|
|
1184
|
+
warned = true;
|
|
1185
|
+
console.warn('landing-kit: getBrand() and the built-in brands are deprecated (removed in 0.5.0). Keep your brand in dreamtree.brand.json and use toLandingBrand(require("./dreamtree.brand.json"), copy).');
|
|
1186
|
+
}
|
|
1077
1187
|
const b = brands[id];
|
|
1078
1188
|
if (!b) throw new Error(`landing-kit: unknown brand "${id}" (known: ${Object.keys(brands).join(", ")})`);
|
|
1079
1189
|
return b;
|
|
1080
1190
|
}
|
|
1191
|
+
|
|
1192
|
+
// src/brandFile.js
|
|
1193
|
+
var shellOf = (role) => {
|
|
1194
|
+
const shell = role && role.shell;
|
|
1195
|
+
return typeof shell === "string" ? shell : shell && shell.light;
|
|
1196
|
+
};
|
|
1197
|
+
function toLandingBrand(file, copy = {}) {
|
|
1198
|
+
if (!file || typeof file !== "object") throw new Error("landing-kit: toLandingBrand needs the parsed dreamtree.brand.json object.");
|
|
1199
|
+
const id = file.id || file.name;
|
|
1200
|
+
if (!id) throw new Error('landing-kit: the brand file has no "id". Run `npx @dreamtree-org/twreact-ui brand validate`.');
|
|
1201
|
+
const scale = file.color && file.color.primary || {};
|
|
1202
|
+
const marketing = file.marketing || {};
|
|
1203
|
+
const primary = marketing.primary || scale["600"] || scale["700"] || scale["500"];
|
|
1204
|
+
if (!primary) throw new Error(`landing-kit: brand "${id}" sets no primary colour (color.primary.600 or marketing.primary).`);
|
|
1205
|
+
const brand = {
|
|
1206
|
+
id,
|
|
1207
|
+
name: (file.id ? file.name : file.label) || id,
|
|
1208
|
+
primary,
|
|
1209
|
+
accent: marketing.accent || scale["300"] || void 0,
|
|
1210
|
+
panel: marketing.panel || shellOf(file.role) || void 0,
|
|
1211
|
+
logoSrc: file.logo && file.logo.mark || void 0,
|
|
1212
|
+
headline: "",
|
|
1213
|
+
...copy
|
|
1214
|
+
};
|
|
1215
|
+
return Object.fromEntries(Object.entries(brand).filter(([, v]) => v !== void 0));
|
|
1216
|
+
}
|
|
1081
1217
|
export {
|
|
1082
1218
|
Audiences,
|
|
1083
1219
|
AuthShell,
|
|
@@ -1087,6 +1223,8 @@ export {
|
|
|
1087
1223
|
Breadcrumbs,
|
|
1088
1224
|
Cta,
|
|
1089
1225
|
DEFAULT_DEMO_FIELDS,
|
|
1226
|
+
DEMO_ACCOUNTS_URL,
|
|
1227
|
+
DemoAccounts,
|
|
1090
1228
|
DemoCta,
|
|
1091
1229
|
DemoDialog,
|
|
1092
1230
|
DreamtreeFooter,
|
|
@@ -1111,7 +1249,13 @@ export {
|
|
|
1111
1249
|
brandStyle,
|
|
1112
1250
|
brands,
|
|
1113
1251
|
createDemoIsland,
|
|
1252
|
+
fetchDemoAccounts,
|
|
1114
1253
|
getBrand,
|
|
1254
|
+
normalizeDemoAccounts,
|
|
1115
1255
|
resolveHref,
|
|
1116
|
-
|
|
1256
|
+
stashDemoFill,
|
|
1257
|
+
takeDemoFill,
|
|
1258
|
+
toLandingBrand,
|
|
1259
|
+
useLanding,
|
|
1260
|
+
useTapReveal
|
|
1117
1261
|
};
|