@juwel-development/design-system 2.0.0 → 2.1.1

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 (18) hide show
  1. package/README.md +19 -3
  2. package/dist/design-system.js +177 -165
  3. package/dist/index.css +1 -1
  4. package/dist/types/Display/Checklist/Checklist.d.ts +4 -3
  5. package/dist/types/Interaction/Input/Input.d.ts +2 -0
  6. package/dist/types/Interaction/TextArea/TextArea.d.ts +2 -0
  7. package/dist/types/Theme/renderTokens.d.ts +16 -3
  8. package/package.json +5 -1
  9. package/src/Display/Checklist/Checklist.tsx +23 -15
  10. package/src/Interaction/Button/Button.tsx +2 -2
  11. package/src/Interaction/Input/Input.tsx +18 -1
  12. package/src/Interaction/TextArea/TextArea.tsx +18 -1
  13. package/src/Theme/renderTokens.ts +89 -29
  14. package/src/styles.dark.css +9 -0
  15. package/src/styles.light.css +9 -0
  16. package/src/tokens.css +5 -0
  17. package/src/tokens.dark.css +169 -0
  18. package/src/tokens.light.css +169 -0
package/dist/design-system.js CHANGED
@@ -1,44 +1,44 @@
1
1
  import { jsx as e, jsxs as t } from "react/jsx-runtime";
2
- import { useId as n } from "react";
2
+ import { useEffect as n, useId as r, useRef as i } from "react";
3
3
  import './index.css';//#region node_modules/clsx/dist/clsx.mjs
4
- function r(e) {
5
- var t, n, i = "";
6
- if (typeof e == "string" || typeof e == "number") i += e;
4
+ function a(e) {
5
+ var t, n, r = "";
6
+ if (typeof e == "string" || typeof e == "number") r += e;
7
7
  else if (typeof e == "object") {
8
8
  if (Array.isArray(e)) {
9
- var a = e.length;
10
- for (t = 0; t < a; t++) e[t] && (n = r(e[t])) && (i && (i += " "), i += n);
11
- } else for (n in e) e[n] && (i && (i += " "), i += n);
9
+ var i = e.length;
10
+ for (t = 0; t < i; t++) e[t] && (n = a(e[t])) && (r && (r += " "), r += n);
11
+ } else for (n in e) e[n] && (r && (r += " "), r += n);
12
12
  }
13
- return i;
13
+ return r;
14
14
  }
15
- function i() {
16
- for (var e, t, n = 0, i = "", a = arguments.length; n < a; n++) (e = arguments[n]) && (t = r(e)) && (i && (i += " "), i += t);
17
- return i;
15
+ function o() {
16
+ for (var e, t, n = 0, r = "", i = arguments.length; n < i; n++) (e = arguments[n]) && (t = a(e)) && (r && (r += " "), r += t);
17
+ return r;
18
18
  }
19
19
  //#endregion
20
20
  //#region node_modules/class-variance-authority/dist/index.mjs
21
- var a = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, o = i, s = (e, t) => (n) => {
22
- if (t?.variants == null) return o(e, n?.class, n?.className);
23
- let { variants: r, defaultVariants: i } = t, s = Object.keys(r).map((e) => {
24
- let t = n?.[e], o = i?.[e];
21
+ var s = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, c = o, l = (e, t) => (n) => {
22
+ if (t?.variants == null) return c(e, n?.class, n?.className);
23
+ let { variants: r, defaultVariants: i } = t, a = Object.keys(r).map((e) => {
24
+ let t = n?.[e], a = i?.[e];
25
25
  if (t === null) return null;
26
- let s = a(t) || a(o);
27
- return r[e][s];
28
- }), c = n && Object.entries(n).reduce((e, t) => {
26
+ let o = s(t) || s(a);
27
+ return r[e][o];
28
+ }), o = n && Object.entries(n).reduce((e, t) => {
29
29
  let [n, r] = t;
30
30
  return r === void 0 || (e[n] = r), e;
31
31
  }, {});
32
- return o(e, s, t?.compoundVariants?.reduce((e, t) => {
32
+ return c(e, a, t?.compoundVariants?.reduce((e, t) => {
33
33
  let { class: n, className: r, ...a } = t;
34
34
  return Object.entries(a).every((e) => {
35
35
  let [t, n] = e;
36
36
  return Array.isArray(n) ? n.includes({
37
37
  ...i,
38
- ...c
38
+ ...o
39
39
  }[t]) : {
40
40
  ...i,
41
- ...c
41
+ ...o
42
42
  }[t] === n;
43
43
  }) ? [
44
44
  ...e,
@@ -46,61 +46,61 @@ var a = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, o = i, s = (e
46
46
  r
47
47
  ] : e;
48
48
  }, []), n?.class, n?.className);
49
- }, c = s("inline-flex", { variants: { cut: {
49
+ }, u = l("inline-flex", { variants: { cut: {
50
50
  full: "",
51
51
  compact: ""
52
- } } }), l = ({ name: t, cut: n, children: r, testId: i }) => t === "" ? /* @__PURE__ */ e("span", {
52
+ } } }), d = ({ name: t, cut: n, children: r, testId: i }) => t === "" ? /* @__PURE__ */ e("span", {
53
53
  "aria-hidden": "true",
54
54
  "data-cut": n,
55
- className: c({ cut: n }),
55
+ className: u({ cut: n }),
56
56
  "data-testid": i,
57
57
  children: r
58
58
  }) : /* @__PURE__ */ e("span", {
59
59
  role: "img",
60
60
  "aria-label": t,
61
61
  "data-cut": n,
62
- className: c({ cut: n }),
62
+ className: u({ cut: n }),
63
63
  "data-testid": i,
64
64
  children: r
65
- }), u = s("m-0 list-none p-0"), d = s([
65
+ }), f = l("m-0 list-none p-0"), p = l([
66
66
  "flex items-start gap-3 font-primary text-body leading-body text-foreground",
67
- "before:mt-[0.7em] before:h-[var(--tick-thickness)] before:w-[var(--tick-length)] before:shrink-0 before:bg-[var(--color-rule)] before:content-['']",
67
+ "before:mt-[0.35em] before:size-[calc(var(--tick-length)*0.7)] before:shrink-0 before:rotate-45 before:[border-top:var(--tick-thickness)_solid_var(--color-rule)] before:[border-right:var(--tick-thickness)_solid_var(--color-rule)] before:content-['']",
68
68
  "[&:not(:first-child)]:mt-[var(--space-stack)] [&:not(:first-child)]:border-border [&:not(:first-child)]:border-t [&:not(:first-child)]:border-solid [&:not(:first-child)]:pt-[var(--space-stack)]"
69
- ].join(" ")), f = {
69
+ ].join(" ")), m = {
70
70
  Root: ({ children: t, testId: n }) => /* @__PURE__ */ e("ul", {
71
- className: u(),
71
+ className: f(),
72
72
  role: "list",
73
73
  "data-testid": n,
74
74
  children: t
75
75
  }),
76
76
  Item: ({ children: t }) => /* @__PURE__ */ e("li", {
77
- className: d(),
77
+ className: p(),
78
78
  children: t
79
79
  })
80
- }, p = s([
80
+ }, h = l([
81
81
  "grid gap-[var(--space-stack)] py-6",
82
82
  "border-b border-solid border-border first:border-t",
83
83
  "lg:grid-cols-[16rem_minmax(0,1fr)] lg:items-baseline lg:gap-x-12",
84
84
  "lg:[&>dt]:col-start-1 lg:[&>dd]:col-start-2 lg:[&>dd]:row-start-1"
85
- ].join(" ")), m = s("font-primary text-subtitle leading-subtitle text-foreground"), h = s("font-primary text-body leading-body text-muted max-w-[var(--measure)]"), g = {
85
+ ].join(" ")), g = l("font-primary text-subtitle leading-subtitle text-foreground"), _ = l("font-primary text-body leading-body text-muted max-w-[var(--measure)]"), v = {
86
86
  Root: ({ children: t, testId: n }) => /* @__PURE__ */ e("dl", {
87
87
  "data-testid": n,
88
88
  children: t
89
89
  }),
90
90
  Item: ({ children: t, testId: n }) => /* @__PURE__ */ e("div", {
91
- className: p(),
91
+ className: h(),
92
92
  "data-testid": n,
93
93
  children: t
94
94
  }),
95
95
  Term: ({ children: t }) => /* @__PURE__ */ e("dt", {
96
- className: m(),
96
+ className: g(),
97
97
  children: t
98
98
  }),
99
99
  Description: ({ children: t }) => /* @__PURE__ */ e("dd", {
100
- className: h(),
100
+ className: _(),
101
101
  children: t
102
102
  })
103
- }, _ = s("block w-full object-cover bg-backing", {
103
+ }, y = l("block w-full object-cover bg-backing", {
104
104
  variants: {
105
105
  ratio: {
106
106
  portrait: "aspect-portrait",
@@ -117,13 +117,13 @@ var a = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, o = i, s = (e
117
117
  }
118
118
  },
119
119
  defaultVariants: { focus: "center" }
120
- }), v = ({ src: n, alt: r, width: i, height: a, ratio: o, focus: s, responsive: c, caption: l, priority: u, testId: d }) => {
120
+ }), b = ({ src: n, alt: r, width: i, height: a, ratio: o, focus: s, responsive: c, caption: l, priority: u, testId: d }) => {
121
121
  let f = /* @__PURE__ */ e("img", {
122
122
  src: n,
123
123
  alt: r,
124
124
  width: i,
125
125
  height: a,
126
- className: _({
126
+ className: y({
127
127
  ratio: o,
128
128
  focus: s
129
129
  }),
@@ -142,21 +142,21 @@ var a = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, o = i, s = (e
142
142
  children: l
143
143
  })]
144
144
  });
145
- }, y = s(["grid gap-[var(--space-stack)]", "lg:grid-cols-[10rem_minmax(0,1fr)] lg:items-start lg:gap-x-12"].join(" ")), b = s("lg:sticky lg:top-6"), x = s("block border-b border-solid border-border pb-1 font-secondary text-label tracking-label text-muted"), ee = s("block pt-1 font-secondary text-label tracking-label text-foreground"), S = {
145
+ }, x = l(["grid gap-[var(--space-stack)]", "lg:grid-cols-[10rem_minmax(0,1fr)] lg:items-start lg:gap-x-12"].join(" ")), S = l("lg:sticky lg:top-6"), C = l("block border-b border-solid border-border pb-1 font-secondary text-label tracking-label text-muted"), w = l("block pt-1 font-secondary text-label tracking-label text-foreground"), ee = {
146
146
  Root: ({ children: t, testId: n }) => /* @__PURE__ */ e("div", {
147
- className: y(),
147
+ className: x(),
148
148
  "data-testid": n,
149
149
  children: t
150
150
  }),
151
151
  Index: ({ number: n, children: r, testId: i }) => /* @__PURE__ */ t("div", {
152
- className: b(),
152
+ className: S(),
153
153
  "data-testid": i,
154
154
  "aria-hidden": "true",
155
155
  children: [n !== void 0 && /* @__PURE__ */ e("span", {
156
- className: x(),
156
+ className: C(),
157
157
  children: n
158
158
  }), /* @__PURE__ */ e("span", {
159
- className: ee(),
159
+ className: w(),
160
160
  children: r
161
161
  })]
162
162
  }),
@@ -164,7 +164,7 @@ var a = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, o = i, s = (e
164
164
  "data-testid": n,
165
165
  children: t
166
166
  })
167
- }, C = s([
167
+ }, T = l([
168
168
  "[&:not([data-notes])]:overflow-x-auto",
169
169
  "[&>table]:w-full [&>table]:border-collapse [&>table]:text-left",
170
170
  "[&_caption]:pb-3 [&_caption]:text-left [&_caption]:font-secondary [&_caption]:text-label [&_caption]:tracking-label [&_caption]:text-muted",
@@ -173,7 +173,7 @@ var a = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, o = i, s = (e
173
173
  "[&[data-notes=content]>table]:max-md:block",
174
174
  "[&[data-notes=content]_thead]:max-md:block [&[data-notes=content]_tbody]:max-md:block [&[data-notes=content]_tfoot]:max-md:block",
175
175
  "[&[data-notes=content]_tr]:max-md:block [&[data-notes=content]_td]:max-md:block [&[data-notes=content]_th]:max-md:block"
176
- ].join(" ")), w = s("border-t border-solid border-border"), T = s("px-4 py-2 text-small first:pl-0 last:pr-0", {
176
+ ].join(" ")), E = l("border-t border-solid border-border"), D = l("px-4 py-2 text-small first:pl-0 last:pr-0", {
177
177
  variants: {
178
178
  variant: {
179
179
  value: "font-primary text-foreground tabular-nums",
@@ -189,24 +189,24 @@ var a = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, o = i, s = (e
189
189
  variant: "value",
190
190
  align: "left"
191
191
  }
192
- }), E = s("px-4 py-2 font-secondary font-medium text-label text-muted tracking-label first:pl-0 last:pr-0", {
192
+ }), O = l("px-4 py-2 font-secondary font-medium text-label text-muted tracking-label first:pl-0 last:pr-0", {
193
193
  variants: { align: {
194
194
  left: "text-left",
195
195
  right: "text-right",
196
196
  center: "text-center"
197
197
  } },
198
198
  defaultVariants: { align: "left" }
199
- }), D = {
199
+ }), k = {
200
200
  Root: ({ caption: n, notes: r, children: i, testId: a }) => {
201
201
  let o = /* @__PURE__ */ t("table", { children: [/* @__PURE__ */ e("caption", { children: n }), i] });
202
202
  return r === void 0 ? /* @__PURE__ */ e("section", {
203
- className: C(),
203
+ className: T(),
204
204
  "data-testid": a,
205
205
  "aria-label": n,
206
206
  tabIndex: 0,
207
207
  children: o
208
208
  }) : /* @__PURE__ */ e("div", {
209
- className: C(),
209
+ className: T(),
210
210
  "data-notes": r,
211
211
  "data-testid": a,
212
212
  children: o
@@ -216,191 +216,197 @@ var a = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, o = i, s = (e
216
216
  Body: ({ children: t }) => /* @__PURE__ */ e("tbody", { children: t }),
217
217
  Footer: ({ children: t }) => /* @__PURE__ */ e("tfoot", { children: t }),
218
218
  Row: ({ children: t, testId: n }) => /* @__PURE__ */ e("tr", {
219
- className: w(),
219
+ className: E(),
220
220
  "data-testid": n,
221
221
  children: t
222
222
  }),
223
223
  HeaderCell: ({ scope: t, align: n, children: r }) => /* @__PURE__ */ e("th", {
224
224
  scope: t,
225
- className: E({ align: n }),
225
+ className: O({ align: n }),
226
226
  children: r
227
227
  }),
228
228
  Cell: ({ variant: t, align: n, children: r }) => /* @__PURE__ */ e("td", {
229
- className: T({
229
+ className: D({
230
230
  variant: t,
231
231
  align: n
232
232
  }),
233
233
  "data-variant": t ?? "value",
234
234
  children: r
235
235
  })
236
- }, O = s("font-secondary text-label tracking-label font-medium", {
236
+ }, A = l("font-secondary text-label tracking-label font-medium", {
237
237
  variants: { color: {
238
238
  foreground: "text-foreground",
239
239
  muted: "text-muted"
240
240
  } },
241
241
  defaultVariants: { color: "muted" }
242
- }), k = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("p", {
243
- className: O({ color: n }),
244
- "data-testid": r,
245
- children: t
246
- }), A = s("font-primary text-display leading-display tracking-optical", {
247
- variants: { color: {
248
- foreground: "text-foreground",
249
- muted: "text-muted"
250
- } },
251
- defaultVariants: { color: "foreground" }
252
- }), j = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h1", {
242
+ }), j = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("p", {
253
243
  className: A({ color: n }),
254
244
  "data-testid": r,
255
245
  children: t
256
- }), M = s("font-primary text-title leading-title tracking-optical", {
246
+ }), M = l("font-primary text-display leading-display tracking-optical", {
257
247
  variants: { color: {
258
248
  foreground: "text-foreground",
259
249
  muted: "text-muted"
260
250
  } },
261
251
  defaultVariants: { color: "foreground" }
262
- }), N = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h2", {
252
+ }), N = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h1", {
263
253
  className: M({ color: n }),
264
254
  "data-testid": r,
265
255
  children: t
266
- }), P = s("font-primary text-subtitle leading-subtitle", {
256
+ }), P = l("font-primary text-title leading-title tracking-optical", {
267
257
  variants: { color: {
268
258
  foreground: "text-foreground",
269
259
  muted: "text-muted"
270
260
  } },
271
261
  defaultVariants: { color: "foreground" }
272
- }), F = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h3", {
262
+ }), F = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h2", {
273
263
  className: P({ color: n }),
274
264
  "data-testid": r,
275
265
  children: t
276
- }), I = s("font-primary text-body leading-body font-bold", {
266
+ }), I = l("font-primary text-subtitle leading-subtitle", {
277
267
  variants: { color: {
278
268
  foreground: "text-foreground",
279
269
  muted: "text-muted"
280
270
  } },
281
271
  defaultVariants: { color: "foreground" }
282
- }), L = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h4", {
272
+ }), L = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h3", {
283
273
  className: I({ color: n }),
284
274
  "data-testid": r,
285
275
  children: t
286
- }), R = s("font-primary text-body leading-body font-semibold", {
276
+ }), R = l("font-primary text-body leading-body font-bold", {
287
277
  variants: { color: {
288
278
  foreground: "text-foreground",
289
279
  muted: "text-muted"
290
280
  } },
291
281
  defaultVariants: { color: "foreground" }
292
- }), z = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h5", {
282
+ }), z = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h4", {
293
283
  className: R({ color: n }),
294
284
  "data-testid": r,
295
285
  children: t
296
- }), B = s("font-primary text-body leading-body font-medium", {
286
+ }), B = l("font-primary text-body leading-body font-semibold", {
297
287
  variants: { color: {
298
288
  foreground: "text-foreground",
299
289
  muted: "text-muted"
300
290
  } },
301
291
  defaultVariants: { color: "foreground" }
302
- }), V = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h6", {
292
+ }), V = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h5", {
303
293
  className: B({ color: n }),
304
294
  "data-testid": r,
305
295
  children: t
306
- }), H = s("font-primary text-body leading-body", {
296
+ }), H = l("font-primary text-body leading-body font-medium", {
307
297
  variants: { color: {
308
298
  foreground: "text-foreground",
309
299
  muted: "text-muted"
310
300
  } },
311
301
  defaultVariants: { color: "foreground" }
312
- }), U = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("p", {
302
+ }), U = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h6", {
313
303
  className: H({ color: n }),
314
304
  "data-testid": r,
315
305
  children: t
316
- }), W = s("flex max-w-[var(--measure)] flex-col gap-[var(--space-stack)]"), G = s("font-primary text-lede leading-lede text-foreground"), te = s("font-primary text-body leading-body", {
306
+ }), W = l("font-primary text-body leading-body", {
307
+ variants: { color: {
308
+ foreground: "text-foreground",
309
+ muted: "text-muted"
310
+ } },
311
+ defaultVariants: { color: "foreground" }
312
+ }), G = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("p", {
313
+ className: W({ color: n }),
314
+ "data-testid": r,
315
+ children: t
316
+ }), K = l("flex max-w-[var(--measure)] flex-col gap-[var(--space-stack)]"), q = l("font-primary text-lede leading-lede text-foreground"), J = l("font-primary text-body leading-body", {
317
317
  variants: { color: {
318
318
  foreground: "text-foreground",
319
319
  muted: "text-muted"
320
320
  } },
321
321
  defaultVariants: { color: "foreground" }
322
- }), K = s("font-primary text-small text-muted"), q = {
322
+ }), Y = l("font-primary text-small text-muted"), te = {
323
323
  Root: ({ children: t, testId: n }) => /* @__PURE__ */ e("div", {
324
- className: W(),
324
+ className: K(),
325
325
  "data-testid": n,
326
326
  children: t
327
327
  }),
328
328
  Lede: ({ children: t }) => /* @__PURE__ */ e("p", {
329
- className: G(),
329
+ className: q(),
330
330
  children: t
331
331
  }),
332
332
  Body: ({ color: t, children: n }) => /* @__PURE__ */ e("p", {
333
- className: te({ color: t }),
333
+ className: J({ color: t }),
334
334
  children: n
335
335
  }),
336
336
  Tail: ({ children: t }) => /* @__PURE__ */ e("p", {
337
- className: K(),
337
+ className: Y(),
338
338
  children: t
339
339
  })
340
- }, J = s("transition-colors duration-[var(--motion-duration-color)] rounded-[var(--radius-control)] py-2 sm:py-2 disabled:bg-disabled disabled:hover:bg-disabled-hover cursor-pointer disabled:cursor-not-allowed select-none text-nowrap inline-flex flex-row items-center justify-center gap-2 outline-focus-ring outline-offset-[var(--focus-ring-offset)] focus-visible:outline focus-visible:outline-[length:var(--focus-ring-width)]", {
340
+ }, X = l("transition-colors duration-[var(--motion-duration-color)] rounded-[var(--radius-control)] py-2 sm:py-2 disabled:bg-disabled disabled:hover:bg-disabled-hover cursor-pointer disabled:cursor-not-allowed select-none text-nowrap inline-flex flex-row items-center justify-center gap-2 outline-focus-ring outline-offset-[var(--focus-ring-offset)] focus-visible:outline focus-visible:outline-[length:var(--focus-ring-width)]", {
341
341
  variants: { variant: {
342
- primary: "px-4 sm:px-6 min-w-42 bg-primary text-primary-foreground hover:bg-primary-hover",
343
- secondary: "px-4 sm:px-6 min-w-42 bg-secondary text-secondary-foreground hover:bg-secondary-hover",
342
+ primary: "px-4 sm:px-6 min-w-[var(--control-min-width)] bg-primary text-primary-foreground hover:bg-primary-hover",
343
+ secondary: "px-4 sm:px-6 min-w-[var(--control-min-width)] bg-secondary text-secondary-foreground hover:bg-secondary-hover",
344
344
  ghost: "px-2 min-w-0 bg-transparent text-foreground hover:underline hover:decoration-[length:var(--underline-thickness)] hover:underline-offset-[var(--underline-offset)]"
345
345
  } },
346
346
  defaultVariants: { variant: "primary" }
347
- }), Y = ({ children: t, disabled: n, testId: r, variant: i, onClick$: a, ariaLabel: o, type: s = "button" }) => /* @__PURE__ */ e("button", {
347
+ }), Z = ({ children: t, disabled: n, testId: r, variant: i, onClick$: a, ariaLabel: o, type: s = "button" }) => /* @__PURE__ */ e("button", {
348
348
  type: s,
349
349
  "data-testid": r,
350
- className: J({ variant: i }),
350
+ className: X({ variant: i }),
351
351
  onClick: () => a?.next(),
352
352
  disabled: n,
353
353
  "aria-label": o,
354
354
  children: t
355
- }), X = s("block w-full rounded-[var(--radius-control)] border border-solid border-control-border bg-transparent px-3 py-2 text-foreground transition-colors duration-[var(--motion-duration-color)] outline-focus-ring outline-offset-[var(--focus-ring-offset)] focus-visible:outline focus-visible:outline-[length:var(--focus-ring-width)] [&:user-invalid]:border-error aria-[invalid=true]:border-error disabled:cursor-not-allowed disabled:border-disabled disabled:text-muted", {
355
+ }), Q = l("block w-full rounded-[var(--radius-control)] border border-solid border-control-border bg-transparent px-3 py-2 text-foreground transition-colors duration-[var(--motion-duration-color)] outline-focus-ring outline-offset-[var(--focus-ring-offset)] focus-visible:outline focus-visible:outline-[length:var(--focus-ring-width)] [&:user-invalid]:border-error aria-[invalid=true]:border-error disabled:cursor-not-allowed disabled:border-disabled disabled:text-muted", {
356
356
  variants: { variant: {
357
357
  text: "",
358
358
  email: "",
359
359
  url: ""
360
360
  } },
361
361
  defaultVariants: { variant: "text" }
362
- }), Z = ({ label: r, name: i, variant: a, required: o, invalid: s, disabled: c, defaultValue: l, placeholder: u, autocomplete: d, hint: f, errorMessage: p, onInput$: m, testId: h }) => {
363
- let g = n(), _ = `${g}-control`, v = `${g}-hint`, y = `${g}-error`, b = [f ? v : void 0, s ? y : void 0].filter(Boolean).join(" ") || void 0;
364
- return /* @__PURE__ */ t("div", {
362
+ }), ne = ({ label: a, name: o, variant: s, required: c, invalid: l, disabled: u, defaultValue: d, placeholder: f, autocomplete: p, hint: m, errorMessage: h, onInput$: g, reset$: _, testId: v }) => {
363
+ let y = r(), b = `${y}-control`, x = `${y}-hint`, S = `${y}-error`, C = [m ? x : void 0, l ? S : void 0].filter(Boolean).join(" ") || void 0, w = i(null);
364
+ return n(() => {
365
+ let e = _?.subscribe(() => {
366
+ w.current && (w.current.value = "");
367
+ });
368
+ return () => e?.unsubscribe();
369
+ }, [_]), /* @__PURE__ */ t("div", {
365
370
  className: "flex flex-col gap-[var(--space-stack)]",
366
371
  children: [
367
372
  /* @__PURE__ */ e("label", {
368
- htmlFor: _,
373
+ htmlFor: b,
369
374
  className: "font-medium text-foreground",
370
- children: r
375
+ children: a
371
376
  }),
372
377
  /* @__PURE__ */ e("input", {
373
- id: _,
374
- name: i,
375
- type: a ?? "text",
376
- className: X({ variant: a }),
377
- required: o,
378
- disabled: c,
379
- defaultValue: l,
380
- placeholder: u,
381
- autoComplete: d,
382
- "aria-invalid": s || void 0,
383
- "aria-describedby": b,
384
- "data-testid": h,
385
- onInput: (e) => m?.next(e.currentTarget.value)
378
+ ref: w,
379
+ id: b,
380
+ name: o,
381
+ type: s ?? "text",
382
+ className: Q({ variant: s }),
383
+ required: c,
384
+ disabled: u,
385
+ defaultValue: d,
386
+ placeholder: f,
387
+ autoComplete: p,
388
+ "aria-invalid": l || void 0,
389
+ "aria-describedby": C,
390
+ "data-testid": v,
391
+ onInput: (e) => g?.next(e.currentTarget.value)
386
392
  }),
387
- !o && /* @__PURE__ */ e("span", {
393
+ !c && /* @__PURE__ */ e("span", {
388
394
  className: "text-muted text-sm",
389
395
  children: "optional"
390
396
  }),
391
- f && /* @__PURE__ */ e("p", {
392
- id: v,
397
+ m && /* @__PURE__ */ e("p", {
398
+ id: x,
393
399
  className: "text-muted text-sm",
394
- children: f
400
+ children: m
395
401
  }),
396
- s && /* @__PURE__ */ e("p", {
397
- id: y,
402
+ l && /* @__PURE__ */ e("p", {
403
+ id: S,
398
404
  className: "text-error text-sm",
399
- children: p
405
+ children: h
400
406
  })
401
407
  ]
402
408
  });
403
- }, Q = s("outline-focus-ring outline-offset-[var(--focus-ring-offset)] focus-visible:outline focus-visible:outline-[length:var(--focus-ring-width)]", {
409
+ }, re = l("outline-focus-ring outline-offset-[var(--focus-ring-offset)] focus-visible:outline focus-visible:outline-[length:var(--focus-ring-width)]", {
404
410
  variants: { treatment: {
405
411
  prose: "text-link underline decoration-[length:var(--underline-thickness)] underline-offset-[var(--underline-offset)] hover:decoration-[length:var(--underline-thickness-hover)]",
406
412
  quiet: "text-muted no-underline decoration-[length:var(--underline-thickness)] underline-offset-[var(--underline-offset)] transition-colors duration-[var(--motion-duration-color)] hover:text-foreground hover:underline",
@@ -408,65 +414,71 @@ var a = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, o = i, s = (e
408
414
  graphic: "text-inherit no-underline"
409
415
  } },
410
416
  defaultVariants: { treatment: "prose" }
411
- }), ne = ({ href: t, children: n, treatment: r, external: i, current: a, testId: o }) => /* @__PURE__ */ e("a", {
417
+ }), ie = ({ href: t, children: n, treatment: r, external: i, current: a, testId: o }) => /* @__PURE__ */ e("a", {
412
418
  href: t,
413
- className: Q({ treatment: r }),
419
+ className: re({ treatment: r }),
414
420
  target: i ? "_blank" : void 0,
415
421
  rel: i ? "noopener noreferrer" : void 0,
416
422
  "aria-current": a ? "page" : void 0,
417
423
  "data-testid": o,
418
424
  children: n
419
- }), re = s("block min-h-24 w-full rounded-[var(--radius-control)] border border-solid border-control-border bg-transparent px-3 py-2 text-foreground transition-colors duration-[var(--motion-duration-color)] outline-focus-ring outline-offset-[var(--focus-ring-offset)] focus-visible:outline focus-visible:outline-[length:var(--focus-ring-width)] [&:user-invalid]:border-error aria-[invalid=true]:border-error disabled:cursor-not-allowed disabled:border-disabled disabled:text-muted"), ie = ({ label: r, name: i, required: a, invalid: o, disabled: s, defaultValue: c, placeholder: l, autocomplete: u, hint: d, errorMessage: f, onInput$: p, testId: m }) => {
420
- let h = n(), g = `${h}-control`, _ = `${h}-hint`, v = `${h}-error`, y = [d ? _ : void 0, o ? v : void 0].filter(Boolean).join(" ") || void 0;
421
- return /* @__PURE__ */ t("div", {
425
+ }), ae = l("block min-h-24 w-full rounded-[var(--radius-control)] border border-solid border-control-border bg-transparent px-3 py-2 text-foreground transition-colors duration-[var(--motion-duration-color)] outline-focus-ring outline-offset-[var(--focus-ring-offset)] focus-visible:outline focus-visible:outline-[length:var(--focus-ring-width)] [&:user-invalid]:border-error aria-[invalid=true]:border-error disabled:cursor-not-allowed disabled:border-disabled disabled:text-muted"), oe = ({ label: a, name: o, required: s, invalid: c, disabled: l, defaultValue: u, placeholder: d, autocomplete: f, hint: p, errorMessage: m, onInput$: h, reset$: g, testId: _ }) => {
426
+ let v = r(), y = `${v}-control`, b = `${v}-hint`, x = `${v}-error`, S = [p ? b : void 0, c ? x : void 0].filter(Boolean).join(" ") || void 0, C = i(null);
427
+ return n(() => {
428
+ let e = g?.subscribe(() => {
429
+ C.current && (C.current.value = "");
430
+ });
431
+ return () => e?.unsubscribe();
432
+ }, [g]), /* @__PURE__ */ t("div", {
422
433
  className: "flex flex-col gap-[var(--space-stack)]",
423
434
  children: [
424
435
  /* @__PURE__ */ e("label", {
425
- htmlFor: g,
436
+ htmlFor: y,
426
437
  className: "font-medium text-foreground",
427
- children: r
438
+ children: a
428
439
  }),
429
440
  /* @__PURE__ */ e("textarea", {
430
- id: g,
431
- name: i,
432
- className: re(),
433
- required: a,
434
- disabled: s,
435
- defaultValue: c,
436
- placeholder: l,
437
- autoComplete: u,
438
- "aria-invalid": o || void 0,
439
- "aria-describedby": y,
440
- "data-testid": m,
441
- onInput: (e) => p?.next(e.currentTarget.value)
441
+ ref: C,
442
+ id: y,
443
+ name: o,
444
+ className: ae(),
445
+ required: s,
446
+ disabled: l,
447
+ defaultValue: u,
448
+ placeholder: d,
449
+ autoComplete: f,
450
+ "aria-invalid": c || void 0,
451
+ "aria-describedby": S,
452
+ "data-testid": _,
453
+ onInput: (e) => h?.next(e.currentTarget.value)
442
454
  }),
443
- !a && /* @__PURE__ */ e("span", {
455
+ !s && /* @__PURE__ */ e("span", {
444
456
  className: "text-muted text-sm",
445
457
  children: "optional"
446
458
  }),
447
- d && /* @__PURE__ */ e("p", {
448
- id: _,
459
+ p && /* @__PURE__ */ e("p", {
460
+ id: b,
449
461
  className: "text-muted text-sm",
450
- children: d
462
+ children: p
451
463
  }),
452
- o && /* @__PURE__ */ e("p", {
453
- id: v,
464
+ c && /* @__PURE__ */ e("p", {
465
+ id: x,
454
466
  className: "text-error text-sm",
455
- children: f
467
+ children: m
456
468
  })
457
469
  ]
458
470
  });
459
- }, ae = s("font-secondary text-small text-muted py-[var(--space-region)] px-[var(--gutter)]", {
471
+ }, se = l("font-secondary text-small text-muted py-[var(--space-region)] px-[var(--gutter)]", {
460
472
  variants: { edge: {
461
473
  none: "",
462
474
  rule: "border-t border-solid border-rule"
463
475
  } },
464
476
  defaultVariants: { edge: "rule" }
465
- }), oe = ({ edge: t, children: n, testId: r }) => /* @__PURE__ */ e("footer", {
466
- className: ae({ edge: t }),
477
+ }), ce = ({ edge: t, children: n, testId: r }) => /* @__PURE__ */ e("footer", {
478
+ className: se({ edge: t }),
467
479
  "data-testid": r,
468
480
  children: n
469
- }), se = s("text-sm", {
481
+ }), le = l("text-sm", {
470
482
  variants: { state: {
471
483
  idle: "text-muted",
472
484
  sending: "text-muted",
@@ -474,12 +486,12 @@ var a = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, o = i, s = (e
474
486
  failed: "text-error"
475
487
  } },
476
488
  defaultVariants: { state: "idle" }
477
- }), ce = {
489
+ }), ue = {
478
490
  sent: "status",
479
491
  failed: "alert"
480
- }, le = ({ action: n, method: r = "post", state: i = "idle", children: a, actions: o, note: s, testId: c }) => {
492
+ }, de = ({ action: n, method: r = "post", state: i = "idle", children: a, actions: o, note: s, testId: c }) => {
481
493
  if (i === "sent" && !s) throw Error("Form in the `sent` state must be given a `note` - it is the outcome message.");
482
- let l = i !== "sent", u = ce[i];
494
+ let l = i !== "sent", u = ue[i];
483
495
  return /* @__PURE__ */ t("form", {
484
496
  action: n,
485
497
  method: r,
@@ -497,12 +509,12 @@ var a = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, o = i, s = (e
497
509
  }),
498
510
  s && /* @__PURE__ */ e("p", {
499
511
  role: u,
500
- className: se({ state: i }),
512
+ className: le({ state: i }),
501
513
  children: s
502
514
  })
503
515
  ]
504
516
  });
505
- }, ue = s([
517
+ }, fe = l([
506
518
  "flex items-baseline justify-between",
507
519
  "font-secondary text-label tracking-label text-muted",
508
520
  "py-[var(--space-region)] px-[var(--gutter)]",
@@ -513,55 +525,55 @@ var a = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, o = i, s = (e
513
525
  rule: "border-b border-solid border-rule"
514
526
  } },
515
527
  defaultVariants: { edge: "rule" }
516
- }), de = ({ edge: n, standing: r, navName: i, children: a, testId: o }) => /* @__PURE__ */ t("header", {
517
- className: ue({ edge: n }),
528
+ }), pe = ({ edge: n, standing: r, navName: i, children: a, testId: o }) => /* @__PURE__ */ t("header", {
529
+ className: fe({ edge: n }),
518
530
  "data-testid": o,
519
531
  children: [/* @__PURE__ */ e("div", { children: r }), /* @__PURE__ */ e("nav", {
520
532
  "aria-label": i,
521
533
  className: "flex flex-wrap items-baseline gap-[var(--space-region)]",
522
534
  children: a
523
535
  })]
524
- }), fe = s("flex flex-col min-h-[var(--fold-height)] gap-[var(--space-stack)]", {
536
+ }), $ = l("flex flex-col min-h-[var(--fold-height)] gap-[var(--space-stack)]", {
525
537
  variants: { place: {
526
538
  start: "justify-start",
527
539
  center: "justify-center",
528
540
  between: "justify-between"
529
541
  } },
530
542
  defaultVariants: { place: "center" }
531
- }), pe = ({ place: t, children: n, testId: r }) => /* @__PURE__ */ e("div", {
532
- className: fe({ place: t }),
543
+ }), me = ({ place: t, children: n, testId: r }) => /* @__PURE__ */ e("div", {
544
+ className: $({ place: t }),
533
545
  "data-testid": r,
534
546
  children: n
535
- }), $ = s("flex flex-col gap-[var(--space-stack)] py-[var(--space-band)] px-[var(--gutter)]"), me = s("font-primary text-title leading-title tracking-optical text-foreground"), he = s("font-primary text-lede leading-lede text-foreground max-w-[var(--measure-wide)]"), ge = s("font-primary text-small text-muted max-w-[var(--measure)]"), _e = ({ title: n, lede: r, intro: i, testId: a }) => /* @__PURE__ */ t("header", {
536
- className: $(),
547
+ }), he = l("flex flex-col gap-[var(--space-stack)] py-[var(--space-band)] px-[var(--gutter)]"), ge = l("font-primary text-title leading-title tracking-optical text-foreground"), _e = l("font-primary text-lede leading-lede text-foreground max-w-[var(--measure-wide)]"), ve = l("font-primary text-small text-muted max-w-[var(--measure)]"), ye = ({ title: n, lede: r, intro: i, testId: a }) => /* @__PURE__ */ t("header", {
548
+ className: he(),
537
549
  "data-testid": a,
538
550
  children: [
539
551
  /* @__PURE__ */ e("h1", {
540
- className: me(),
552
+ className: ge(),
541
553
  children: n
542
554
  }),
543
555
  r !== void 0 && /* @__PURE__ */ e("p", {
544
- className: he(),
556
+ className: _e(),
545
557
  children: r
546
558
  }),
547
559
  i !== void 0 && /* @__PURE__ */ e("p", {
548
- className: ge(),
560
+ className: ve(),
549
561
  children: i
550
562
  })
551
563
  ]
552
- }), ve = s(["py-[var(--space-band)]", "[[data-section]+&]:border-t [[data-section]+&]:border-solid [[data-section]+&]:border-rule"].join(" "), {
564
+ }), be = l(["py-[var(--space-band)]", "[[data-section]+&]:border-t [[data-section]+&]:border-solid [[data-section]+&]:border-rule"].join(" "), {
553
565
  variants: { bleed: {
554
566
  inset: "px-[var(--gutter)]",
555
567
  full: ""
556
568
  } },
557
569
  defaultVariants: { bleed: "inset" }
558
- }), ye = ({ bleed: t, name: n, children: r, testId: i }) => /* @__PURE__ */ e("section", {
570
+ }), xe = ({ bleed: t, name: n, children: r, testId: i }) => /* @__PURE__ */ e("section", {
559
571
  "data-section": "",
560
- className: ve({ bleed: t }),
572
+ className: be({ bleed: t }),
561
573
  "aria-label": n,
562
574
  "data-testid": i,
563
575
  children: r
564
- }), be = {
576
+ }), Se = {
565
577
  surface: "#ffffff",
566
578
  foreground: "#0f172a",
567
579
  muted: "#64748b",
@@ -583,7 +595,7 @@ var a = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, o = i, s = (e
583
595
  warning: "#f59e0b",
584
596
  error: "#d63384",
585
597
  info: "#06b6d4"
586
- }, xe = {
598
+ }, Ce = {
587
599
  surface: "#0f172a",
588
600
  foreground: "#f8fafc",
589
601
  muted: "#94a3b8",
@@ -607,4 +619,4 @@ var a = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, o = i, s = (e
607
619
  info: "#22d3ee"
608
620
  };
609
621
  //#endregion
610
- export { l as Brandmark, Y as Button, f as Checklist, g as DefinitionList, k as Eyebrow, v as Figure, oe as Footer, le as Form, j as H1, N as H2, F as H3, L as H4, z as H5, V as H6, de as Header, pe as Hero, Z as Input, ne as Link, U as P, _e as PageHead, q as Prose, S as Rail, ye as Section, D as Table, ie as TextArea, xe as dark, be as light };
622
+ export { d as Brandmark, Z as Button, m as Checklist, v as DefinitionList, j as Eyebrow, b as Figure, ce as Footer, de as Form, N as H1, F as H2, L as H3, z as H4, V as H5, U as H6, pe as Header, me as Hero, ne as Input, ie as Link, G as P, ye as PageHead, te as Prose, ee as Rail, xe as Section, k as Table, oe as TextArea, Ce as dark, Se as light };