@juwel-development/design-system 3.6.0 → 3.8.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/README.md +62 -0
- package/dist/design-system.js +258 -119
- package/dist/index.css +1 -1
- package/dist/types/Interaction/Choices/Choices.d.ts +69 -0
- package/dist/types/Interaction/Choices/ChoicesCompositionError.d.ts +3 -0
- package/dist/types/Interaction/Select/Select.d.ts +53 -0
- package/dist/types/index.d.ts +2 -0
- package/package.json +1 -1
- package/src/Interaction/Choices/Choices.tsx +256 -0
- package/src/Interaction/Choices/ChoicesCompositionError.ts +6 -0
- package/src/Interaction/Select/Select.tsx +140 -0
- package/src/Theme/renderTokens.ts +12 -0
- package/src/index.ts +2 -0
- package/src/tokens.css +6 -0
- package/src/tokens.dark.css +6 -0
- package/src/tokens.light.css +6 -0
package/dist/design-system.js
CHANGED
|
@@ -275,7 +275,7 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
|
|
|
275
275
|
"[&[data-notes=content]>table]:max-md:block",
|
|
276
276
|
"[&[data-notes=content]_thead]:max-md:block [&[data-notes=content]_tbody]:max-md:block [&[data-notes=content]_tfoot]:max-md:block",
|
|
277
277
|
"[&[data-notes=content]_tr]:max-md:block [&[data-notes=content]_td]:max-md:block [&[data-notes=content]_th]:max-md:block"
|
|
278
|
-
].join(" ")),
|
|
278
|
+
].join(" ")), ge = h("border-t border-solid border-border"), O = h("px-4 py-2 text-small first:pl-0 last:pr-0", {
|
|
279
279
|
variants: {
|
|
280
280
|
variant: {
|
|
281
281
|
value: "font-primary text-foreground tabular-nums",
|
|
@@ -291,14 +291,14 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
|
|
|
291
291
|
variant: "value",
|
|
292
292
|
align: "left"
|
|
293
293
|
}
|
|
294
|
-
}),
|
|
294
|
+
}), k = h("px-4 py-2 font-secondary font-medium text-label text-muted tracking-label first:pl-0 last:pr-0", {
|
|
295
295
|
variants: { align: {
|
|
296
296
|
left: "text-left",
|
|
297
297
|
right: "text-right",
|
|
298
298
|
center: "text-center"
|
|
299
299
|
} },
|
|
300
300
|
defaultVariants: { align: "left" }
|
|
301
|
-
}),
|
|
301
|
+
}), A = {
|
|
302
302
|
Root: ({ caption: n, notes: r, children: i, testId: a }) => {
|
|
303
303
|
let o = /* @__PURE__ */ t("table", { children: [/* @__PURE__ */ e("caption", { children: n }), i] });
|
|
304
304
|
return r === void 0 ? /* @__PURE__ */ e("section", {
|
|
@@ -318,24 +318,24 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
|
|
|
318
318
|
Body: ({ children: t }) => /* @__PURE__ */ e("tbody", { children: t }),
|
|
319
319
|
Footer: ({ children: t }) => /* @__PURE__ */ e("tfoot", { children: t }),
|
|
320
320
|
Row: ({ children: t, testId: n }) => /* @__PURE__ */ e("tr", {
|
|
321
|
-
className:
|
|
321
|
+
className: ge(),
|
|
322
322
|
"data-testid": n,
|
|
323
323
|
children: t
|
|
324
324
|
}),
|
|
325
325
|
HeaderCell: ({ scope: t, align: n, children: r }) => /* @__PURE__ */ e("th", {
|
|
326
326
|
scope: t,
|
|
327
|
-
className:
|
|
327
|
+
className: k({ align: n }),
|
|
328
328
|
children: r
|
|
329
329
|
}),
|
|
330
330
|
Cell: ({ variant: t, align: n, children: r }) => /* @__PURE__ */ e("td", {
|
|
331
|
-
className:
|
|
331
|
+
className: O({
|
|
332
332
|
variant: t,
|
|
333
333
|
align: n
|
|
334
334
|
}),
|
|
335
335
|
"data-variant": t ?? "value",
|
|
336
336
|
children: r
|
|
337
337
|
})
|
|
338
|
-
},
|
|
338
|
+
}, j = h("font-secondary text-label tracking-label font-medium", {
|
|
339
339
|
variants: { color: {
|
|
340
340
|
foreground: "text-foreground",
|
|
341
341
|
muted: "text-muted",
|
|
@@ -345,11 +345,11 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
|
|
|
345
345
|
info: "text-info"
|
|
346
346
|
} },
|
|
347
347
|
defaultVariants: { color: "muted" }
|
|
348
|
-
}),
|
|
349
|
-
className:
|
|
348
|
+
}), M = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("p", {
|
|
349
|
+
className: j({ color: n }),
|
|
350
350
|
"data-testid": r,
|
|
351
351
|
children: t
|
|
352
|
-
}),
|
|
352
|
+
}), N = h("font-primary text-display leading-display tracking-optical max-w-[var(--measure-display)]", {
|
|
353
353
|
variants: { color: {
|
|
354
354
|
foreground: "text-foreground",
|
|
355
355
|
muted: "text-muted",
|
|
@@ -359,11 +359,11 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
|
|
|
359
359
|
info: "text-info"
|
|
360
360
|
} },
|
|
361
361
|
defaultVariants: { color: "foreground" }
|
|
362
|
-
}),
|
|
363
|
-
className:
|
|
362
|
+
}), P = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h1", {
|
|
363
|
+
className: N({ color: n }),
|
|
364
364
|
"data-testid": r,
|
|
365
365
|
children: t
|
|
366
|
-
}),
|
|
366
|
+
}), F = h("font-primary text-title leading-title tracking-optical", {
|
|
367
367
|
variants: { color: {
|
|
368
368
|
foreground: "text-foreground",
|
|
369
369
|
muted: "text-muted",
|
|
@@ -373,11 +373,11 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
|
|
|
373
373
|
info: "text-info"
|
|
374
374
|
} },
|
|
375
375
|
defaultVariants: { color: "foreground" }
|
|
376
|
-
}),
|
|
377
|
-
className:
|
|
376
|
+
}), I = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h2", {
|
|
377
|
+
className: F({ color: n }),
|
|
378
378
|
"data-testid": r,
|
|
379
379
|
children: t
|
|
380
|
-
}),
|
|
380
|
+
}), L = h("font-primary text-subtitle leading-subtitle", {
|
|
381
381
|
variants: { color: {
|
|
382
382
|
foreground: "text-foreground",
|
|
383
383
|
muted: "text-muted",
|
|
@@ -387,11 +387,11 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
|
|
|
387
387
|
info: "text-info"
|
|
388
388
|
} },
|
|
389
389
|
defaultVariants: { color: "foreground" }
|
|
390
|
-
}),
|
|
391
|
-
className:
|
|
390
|
+
}), _e = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h3", {
|
|
391
|
+
className: L({ color: n }),
|
|
392
392
|
"data-testid": r,
|
|
393
393
|
children: t
|
|
394
|
-
}),
|
|
394
|
+
}), ve = h("font-primary text-body leading-body font-bold", {
|
|
395
395
|
variants: { color: {
|
|
396
396
|
foreground: "text-foreground",
|
|
397
397
|
muted: "text-muted",
|
|
@@ -401,11 +401,11 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
|
|
|
401
401
|
info: "text-info"
|
|
402
402
|
} },
|
|
403
403
|
defaultVariants: { color: "foreground" }
|
|
404
|
-
}),
|
|
405
|
-
className:
|
|
404
|
+
}), ye = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h4", {
|
|
405
|
+
className: ve({ color: n }),
|
|
406
406
|
"data-testid": r,
|
|
407
407
|
children: t
|
|
408
|
-
}),
|
|
408
|
+
}), be = h("font-primary text-body leading-body font-semibold", {
|
|
409
409
|
variants: { color: {
|
|
410
410
|
foreground: "text-foreground",
|
|
411
411
|
muted: "text-muted",
|
|
@@ -415,11 +415,11 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
|
|
|
415
415
|
info: "text-info"
|
|
416
416
|
} },
|
|
417
417
|
defaultVariants: { color: "foreground" }
|
|
418
|
-
}),
|
|
419
|
-
className:
|
|
418
|
+
}), xe = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h5", {
|
|
419
|
+
className: be({ color: n }),
|
|
420
420
|
"data-testid": r,
|
|
421
421
|
children: t
|
|
422
|
-
}),
|
|
422
|
+
}), Se = h("font-primary text-body leading-body font-medium", {
|
|
423
423
|
variants: { color: {
|
|
424
424
|
foreground: "text-foreground",
|
|
425
425
|
muted: "text-muted",
|
|
@@ -429,11 +429,11 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
|
|
|
429
429
|
info: "text-info"
|
|
430
430
|
} },
|
|
431
431
|
defaultVariants: { color: "foreground" }
|
|
432
|
-
}),
|
|
433
|
-
className:
|
|
432
|
+
}), Ce = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h6", {
|
|
433
|
+
className: Se({ color: n }),
|
|
434
434
|
"data-testid": r,
|
|
435
435
|
children: t
|
|
436
|
-
}),
|
|
436
|
+
}), we = h("font-secondary text-small", {
|
|
437
437
|
variants: { color: {
|
|
438
438
|
foreground: "text-foreground",
|
|
439
439
|
muted: "text-muted",
|
|
@@ -443,11 +443,11 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
|
|
|
443
443
|
info: "text-info"
|
|
444
444
|
} },
|
|
445
445
|
defaultVariants: { color: "foreground" }
|
|
446
|
-
}),
|
|
447
|
-
className:
|
|
446
|
+
}), Te = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("p", {
|
|
447
|
+
className: we({ color: n }),
|
|
448
448
|
"data-testid": r,
|
|
449
449
|
children: t
|
|
450
|
-
}),
|
|
450
|
+
}), Ee = h("font-primary text-body leading-body", {
|
|
451
451
|
variants: { color: {
|
|
452
452
|
foreground: "text-foreground",
|
|
453
453
|
muted: "text-muted",
|
|
@@ -457,11 +457,11 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
|
|
|
457
457
|
info: "text-info"
|
|
458
458
|
} },
|
|
459
459
|
defaultVariants: { color: "foreground" }
|
|
460
|
-
}),
|
|
461
|
-
className:
|
|
460
|
+
}), De = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("p", {
|
|
461
|
+
className: Ee({ color: n }),
|
|
462
462
|
"data-testid": r,
|
|
463
463
|
children: t
|
|
464
|
-
}),
|
|
464
|
+
}), Oe = h("flex max-w-[var(--measure)] flex-col gap-[var(--space-stack)]"), ke = h("font-primary text-lede leading-lede text-foreground"), Ae = h("font-primary text-body leading-body", {
|
|
465
465
|
variants: { color: {
|
|
466
466
|
foreground: "text-foreground",
|
|
467
467
|
muted: "text-muted",
|
|
@@ -471,47 +471,134 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
|
|
|
471
471
|
info: "text-info"
|
|
472
472
|
} },
|
|
473
473
|
defaultVariants: { color: "foreground" }
|
|
474
|
-
}),
|
|
474
|
+
}), je = h("font-primary text-small text-muted"), Me = {
|
|
475
475
|
Root: ({ children: t, testId: n }) => /* @__PURE__ */ e("div", {
|
|
476
|
-
className:
|
|
476
|
+
className: Oe(),
|
|
477
477
|
"data-testid": n,
|
|
478
478
|
children: t
|
|
479
479
|
}),
|
|
480
480
|
Lede: ({ children: t }) => /* @__PURE__ */ e("p", {
|
|
481
|
-
className:
|
|
481
|
+
className: ke(),
|
|
482
482
|
children: t
|
|
483
483
|
}),
|
|
484
484
|
Body: ({ color: t, children: n }) => /* @__PURE__ */ e("p", {
|
|
485
|
-
className:
|
|
485
|
+
className: Ae({ color: t }),
|
|
486
486
|
children: n
|
|
487
487
|
}),
|
|
488
488
|
Tail: ({ children: t }) => /* @__PURE__ */ e("p", {
|
|
489
|
-
className:
|
|
489
|
+
className: je(),
|
|
490
490
|
children: t
|
|
491
491
|
})
|
|
492
|
-
},
|
|
492
|
+
}, Ne = h("font-primary text-body 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)]", {
|
|
493
493
|
variants: { variant: {
|
|
494
494
|
primary: "px-4 sm:px-6 min-w-[var(--control-min-width)] bg-primary text-primary-foreground hover:bg-primary-hover",
|
|
495
495
|
secondary: "px-4 sm:px-6 min-w-[var(--control-min-width)] bg-secondary text-secondary-foreground hover:bg-secondary-hover",
|
|
496
496
|
ghost: "px-2 min-w-0 bg-transparent text-foreground hover:underline hover:decoration-[length:var(--underline-thickness)] hover:underline-offset-[var(--underline-offset)]"
|
|
497
497
|
} },
|
|
498
498
|
defaultVariants: { variant: "primary" }
|
|
499
|
-
}),
|
|
499
|
+
}), Pe = ({ children: t, disabled: n, testId: r, variant: i, onClick$: a, ariaLabel: o, type: s = "button" }) => /* @__PURE__ */ e("button", {
|
|
500
500
|
type: s,
|
|
501
501
|
"data-testid": r,
|
|
502
|
-
className:
|
|
502
|
+
className: Ne({ variant: i }),
|
|
503
503
|
onClick: () => a?.next(),
|
|
504
504
|
disabled: n,
|
|
505
505
|
"aria-label": o,
|
|
506
506
|
children: t
|
|
507
|
-
}),
|
|
507
|
+
}), Fe = class extends Error {
|
|
508
|
+
constructor(e) {
|
|
509
|
+
super(`Choices.${e} must be composed inside Choices.Root`), this.name = "ChoicesCompositionError";
|
|
510
|
+
}
|
|
511
|
+
}, Ie = h("flex flex-col gap-[var(--space-stack)]"), Le = h([
|
|
512
|
+
"group/choice flex w-full flex-row items-start gap-3 text-left",
|
|
513
|
+
"rounded-[var(--radius-control)] border border-solid border-control-border bg-transparent aria-checked:border-foreground",
|
|
514
|
+
"px-3 py-2",
|
|
515
|
+
"cursor-pointer disabled:cursor-not-allowed",
|
|
516
|
+
"transition-colors duration-[var(--motion-duration-color)]",
|
|
517
|
+
"outline-focus-ring outline-offset-[var(--focus-ring-offset)] focus-visible:outline focus-visible:outline-[length:var(--focus-ring-width)]"
|
|
518
|
+
].join(" ")), R = r(void 0), Re = (e) => {
|
|
519
|
+
let t = o(R);
|
|
520
|
+
if (t === void 0) throw new Fe(e);
|
|
521
|
+
return t;
|
|
522
|
+
}, ze = (e, t) => {
|
|
523
|
+
let n = e.closest("[role=\"radiogroup\"]");
|
|
524
|
+
if (n === null) return;
|
|
525
|
+
let r = Array.from(n.querySelectorAll(":scope > [role=\"radio\"]"));
|
|
526
|
+
return r[(r.indexOf(e) + t + r.length) % r.length];
|
|
527
|
+
}, Be = {
|
|
528
|
+
ArrowDown: 1,
|
|
529
|
+
ArrowRight: 1,
|
|
530
|
+
ArrowUp: -1,
|
|
531
|
+
ArrowLeft: -1
|
|
532
|
+
}, Ve = {
|
|
533
|
+
Root: ({ selected: t, onSelect$: n, label: r, inert: i, children: a, testId: o }) => /* @__PURE__ */ e(R.Provider, {
|
|
534
|
+
value: {
|
|
535
|
+
selected: t,
|
|
536
|
+
onSelect$: n,
|
|
537
|
+
inert: i === !0
|
|
538
|
+
},
|
|
539
|
+
children: /* @__PURE__ */ e("div", {
|
|
540
|
+
role: "radiogroup",
|
|
541
|
+
"aria-label": r,
|
|
542
|
+
"aria-disabled": i === !0 ? "true" : void 0,
|
|
543
|
+
className: Ie(),
|
|
544
|
+
"data-testid": o,
|
|
545
|
+
children: a
|
|
546
|
+
})
|
|
547
|
+
}),
|
|
548
|
+
Choice: ({ value: n, children: r, description: i, testId: a }) => {
|
|
549
|
+
let { selected: o, onSelect$: s, inert: l } = Re("Choice"), u = o === n, d = c(), f = `${d}-name`, p = `${d}-description`;
|
|
550
|
+
return /* @__PURE__ */ t("button", {
|
|
551
|
+
type: "button",
|
|
552
|
+
role: "radio",
|
|
553
|
+
"aria-checked": u,
|
|
554
|
+
"aria-labelledby": f,
|
|
555
|
+
"aria-describedby": p,
|
|
556
|
+
tabIndex: u && !l ? 0 : -1,
|
|
557
|
+
disabled: l,
|
|
558
|
+
"data-value": n,
|
|
559
|
+
"data-testid": a,
|
|
560
|
+
className: Le(),
|
|
561
|
+
onClick: () => {
|
|
562
|
+
u || s.next(n);
|
|
563
|
+
},
|
|
564
|
+
onKeyDown: (e) => {
|
|
565
|
+
let t = Be[e.key];
|
|
566
|
+
if (t === void 0 || l) return;
|
|
567
|
+
e.preventDefault();
|
|
568
|
+
let n = ze(e.currentTarget, t);
|
|
569
|
+
if (n === void 0) return;
|
|
570
|
+
n.focus();
|
|
571
|
+
let r = n.dataset.value;
|
|
572
|
+
r !== void 0 && r !== o && s.next(r);
|
|
573
|
+
},
|
|
574
|
+
children: [/* @__PURE__ */ e("span", {
|
|
575
|
+
className: "mt-[0.3rem] flex size-[var(--choice-marker-size)] shrink-0 items-center justify-center rounded-[var(--radius-control)] border border-solid border-control-border",
|
|
576
|
+
children: u && /* @__PURE__ */ e("span", {
|
|
577
|
+
"data-choice-marker-dot": !0,
|
|
578
|
+
className: "size-[var(--choice-marker-dot-size)] rounded-[var(--radius-control)] bg-foreground"
|
|
579
|
+
})
|
|
580
|
+
}), /* @__PURE__ */ t("span", {
|
|
581
|
+
className: "flex min-w-0 flex-col",
|
|
582
|
+
children: [/* @__PURE__ */ e("span", {
|
|
583
|
+
id: f,
|
|
584
|
+
className: "font-secondary font-medium text-body text-foreground group-disabled/choice:text-muted",
|
|
585
|
+
children: r
|
|
586
|
+
}), /* @__PURE__ */ e("span", {
|
|
587
|
+
id: p,
|
|
588
|
+
className: "font-secondary text-muted text-small",
|
|
589
|
+
children: i
|
|
590
|
+
})]
|
|
591
|
+
})]
|
|
592
|
+
});
|
|
593
|
+
}
|
|
594
|
+
}, He = h("block w-full rounded-[var(--radius-control)] border border-solid border-control-border bg-transparent px-3 py-2 font-primary text-body 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", {
|
|
508
595
|
variants: { variant: {
|
|
509
596
|
text: "",
|
|
510
597
|
email: "",
|
|
511
598
|
url: ""
|
|
512
599
|
} },
|
|
513
600
|
defaultVariants: { variant: "text" }
|
|
514
|
-
}),
|
|
601
|
+
}), Ue = ({ label: n, name: r, variant: i, required: a, optionalLabel: o, invalid: u, disabled: d, defaultValue: f, placeholder: p, autocomplete: m, hint: h, errorMessage: g, onInput$: _, reset$: v, testId: y }) => {
|
|
515
602
|
let b = c(), x = `${b}-control`, S = `${b}-hint`, C = `${b}-error`, w = [h ? S : void 0, u ? C : void 0].filter(Boolean).join(" ") || void 0, T = l(null);
|
|
516
603
|
return s(() => {
|
|
517
604
|
let e = v?.subscribe(() => {
|
|
@@ -531,7 +618,7 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
|
|
|
531
618
|
id: x,
|
|
532
619
|
name: r,
|
|
533
620
|
type: i ?? "text",
|
|
534
|
-
className:
|
|
621
|
+
className: He({ variant: i }),
|
|
535
622
|
required: a,
|
|
536
623
|
disabled: d,
|
|
537
624
|
defaultValue: f,
|
|
@@ -558,7 +645,7 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
|
|
|
558
645
|
})
|
|
559
646
|
]
|
|
560
647
|
});
|
|
561
|
-
},
|
|
648
|
+
}, We = h("outline-focus-ring outline-offset-[var(--focus-ring-offset)] focus-visible:outline focus-visible:outline-[length:var(--focus-ring-width)]", {
|
|
562
649
|
variants: { treatment: {
|
|
563
650
|
prose: "text-link underline decoration-[length:var(--underline-thickness)] underline-offset-[var(--underline-offset)] hover:decoration-[length:var(--underline-thickness-hover)]",
|
|
564
651
|
quiet: "font-secondary 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",
|
|
@@ -566,19 +653,71 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
|
|
|
566
653
|
graphic: "text-inherit no-underline"
|
|
567
654
|
} },
|
|
568
655
|
defaultVariants: { treatment: "prose" }
|
|
569
|
-
}),
|
|
656
|
+
}), Ge = ({ href: t, children: n, treatment: r, external: i, current: a, testId: o }) => /* @__PURE__ */ e("a", {
|
|
570
657
|
href: t,
|
|
571
|
-
className:
|
|
658
|
+
className: We({ treatment: r }),
|
|
572
659
|
target: i ? "_blank" : void 0,
|
|
573
660
|
rel: i ? "noopener noreferrer" : void 0,
|
|
574
661
|
"aria-current": a ? "page" : void 0,
|
|
575
662
|
"data-testid": o,
|
|
576
663
|
children: n
|
|
577
|
-
}),
|
|
664
|
+
}), Ke = h([
|
|
665
|
+
"flex flex-col gap-[var(--space-stack)]",
|
|
666
|
+
"[&>label]:font-secondary [&>label]:font-medium [&>label]:text-body [&>label]:text-foreground",
|
|
667
|
+
"[&>span]:font-secondary [&>span]:text-muted [&>span]:text-small",
|
|
668
|
+
"[&>p]:font-secondary [&>p]:text-small [&>p]:text-muted [&>p[data-error]]:text-error",
|
|
669
|
+
"[&>select]:block [&>select]:w-full [&>select]:rounded-[var(--radius-control)] [&>select]:border [&>select]:border-solid [&>select]:border-control-border [&>select]:bg-transparent [&>select]:px-3 [&>select]:py-2",
|
|
670
|
+
"[&>select]:font-primary [&>select]:text-body [&>select]:text-foreground [&>select]:transition-colors [&>select]:duration-[var(--motion-duration-color)]",
|
|
671
|
+
"[&>select]:outline-focus-ring [&>select]:outline-offset-[var(--focus-ring-offset)] [&>select]:focus-visible:outline [&>select]:focus-visible:outline-[length:var(--focus-ring-width)]",
|
|
672
|
+
"[&>select:user-invalid]:border-error [&>select]:aria-[invalid=true]:border-error [&>select]:disabled:cursor-not-allowed [&>select]:disabled:border-disabled [&>select]:disabled:text-muted"
|
|
673
|
+
].join(" ")), qe = {
|
|
674
|
+
Root: ({ label: n, name: r, required: i, optionalLabel: a, disabled: o, invalid: s, hint: l, errorMessage: u, testId: d, defaultValue: f, onChange$: p, placeholder: m, children: h }) => {
|
|
675
|
+
let g = c(), _ = `${g}-control`, v = `${g}-hint`, y = `${g}-error`, b = [l ? v : void 0, s && u ? y : void 0].filter(Boolean).join(" ") || void 0;
|
|
676
|
+
return /* @__PURE__ */ t("div", {
|
|
677
|
+
className: Ke(),
|
|
678
|
+
children: [
|
|
679
|
+
/* @__PURE__ */ e("label", {
|
|
680
|
+
htmlFor: _,
|
|
681
|
+
children: n
|
|
682
|
+
}),
|
|
683
|
+
/* @__PURE__ */ t("select", {
|
|
684
|
+
id: _,
|
|
685
|
+
name: r,
|
|
686
|
+
required: i,
|
|
687
|
+
disabled: o,
|
|
688
|
+
defaultValue: f ?? "",
|
|
689
|
+
"aria-invalid": s || void 0,
|
|
690
|
+
"aria-describedby": b,
|
|
691
|
+
"data-testid": d,
|
|
692
|
+
onChange: (e) => !o && p?.next(e.currentTarget.value),
|
|
693
|
+
children: [/* @__PURE__ */ e("option", {
|
|
694
|
+
value: "",
|
|
695
|
+
children: m
|
|
696
|
+
}), h]
|
|
697
|
+
}),
|
|
698
|
+
!i && a && /* @__PURE__ */ e("span", { children: a }),
|
|
699
|
+
l && /* @__PURE__ */ e("p", {
|
|
700
|
+
id: v,
|
|
701
|
+
children: l
|
|
702
|
+
}),
|
|
703
|
+
s && u && /* @__PURE__ */ e("p", {
|
|
704
|
+
id: y,
|
|
705
|
+
"data-error": !0,
|
|
706
|
+
children: u
|
|
707
|
+
})
|
|
708
|
+
]
|
|
709
|
+
});
|
|
710
|
+
},
|
|
711
|
+
Option: ({ value: t, children: n, testId: r }) => /* @__PURE__ */ e("option", {
|
|
712
|
+
value: t,
|
|
713
|
+
"data-testid": r,
|
|
714
|
+
children: n
|
|
715
|
+
})
|
|
716
|
+
}, z = class extends Error {
|
|
578
717
|
constructor(e) {
|
|
579
718
|
super(`Slider configuration: ${e}`), this.name = "SliderConfigurationError";
|
|
580
719
|
}
|
|
581
|
-
},
|
|
720
|
+
}, Je = h([
|
|
582
721
|
"block h-[var(--slider-thumb-size)] w-full cursor-pointer appearance-none bg-transparent",
|
|
583
722
|
"disabled:cursor-not-allowed",
|
|
584
723
|
"outline-focus-ring outline-offset-[var(--focus-ring-offset)] focus-visible:outline focus-visible:outline-[length:var(--focus-ring-width)]",
|
|
@@ -589,19 +728,19 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
|
|
|
589
728
|
"[&::-moz-range-track]:h-[var(--slider-track-thickness)] [&::-moz-range-track]:rounded-[var(--radius-control)] [&::-moz-range-track]:bg-control-border",
|
|
590
729
|
"[&::-moz-range-thumb]:size-[var(--slider-thumb-size)] [&::-moz-range-thumb]:rounded-[var(--radius-control)] [&::-moz-range-thumb]:border-none [&::-moz-range-thumb]:bg-foreground",
|
|
591
730
|
"[&:disabled::-moz-range-track]:bg-disabled [&:disabled::-moz-range-thumb]:bg-disabled"
|
|
592
|
-
].join(" ")),
|
|
731
|
+
].join(" ")), Ye = (e) => {
|
|
593
732
|
for (let [t, n] of Object.entries(e)) if (!Number.isFinite(n)) throw new z(`\`${t}\` must be a finite number, got ${n}`);
|
|
594
733
|
if (e.min >= e.max) throw new z(`\`min\` (${e.min}) must be below \`max\` (${e.max})`);
|
|
595
734
|
if (e.step <= 0) throw new z(`\`step\` (${e.step}) must be positive`);
|
|
596
735
|
if (e.value < e.min || e.value > e.max) throw new z(`\`value\` (${e.value}) must lie within [${e.min}, ${e.max}]`);
|
|
597
|
-
},
|
|
736
|
+
}, Xe = ({ min: t, max: n, step: r = 1, value: i, onInput$: a, label: o, valueText: s, disabled: c, testId: l }) => (Ye({
|
|
598
737
|
min: t,
|
|
599
738
|
max: n,
|
|
600
739
|
step: r,
|
|
601
740
|
value: i
|
|
602
741
|
}), /* @__PURE__ */ e("input", {
|
|
603
742
|
type: "range",
|
|
604
|
-
className:
|
|
743
|
+
className: Je(),
|
|
605
744
|
min: t,
|
|
606
745
|
max: n,
|
|
607
746
|
step: r,
|
|
@@ -611,37 +750,37 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
|
|
|
611
750
|
"aria-valuetext": s,
|
|
612
751
|
"data-testid": l,
|
|
613
752
|
onChange: (e) => a.next(e.currentTarget.valueAsNumber)
|
|
614
|
-
})),
|
|
753
|
+
})), Ze = class extends Error {
|
|
615
754
|
constructor(e) {
|
|
616
755
|
super(`Tabs.${e} must be composed inside Tabs.Root`), this.name = "TabsCompositionError";
|
|
617
756
|
}
|
|
618
|
-
},
|
|
757
|
+
}, Qe = h([
|
|
619
758
|
"flex flex-row overflow-x-auto",
|
|
620
759
|
"p-[calc(var(--focus-ring-width)+var(--focus-ring-offset))]",
|
|
621
760
|
"m-[calc(-1*(var(--focus-ring-width)+var(--focus-ring-offset)))]",
|
|
622
761
|
"scroll-p-[calc(var(--focus-ring-width)+var(--focus-ring-offset))]"
|
|
623
|
-
].join(" ")),
|
|
762
|
+
].join(" ")), $e = h([
|
|
624
763
|
"font-secondary text-label tracking-label",
|
|
625
764
|
"text-muted hover:text-foreground aria-selected:text-foreground",
|
|
626
765
|
"border-b-[length:var(--tab-marker-thickness)] border-solid border-transparent aria-selected:border-foreground",
|
|
627
766
|
"shrink-0 cursor-pointer select-none text-nowrap px-[var(--tab-inset-inline)] py-[var(--tab-inset-block)]",
|
|
628
767
|
"transition-colors duration-[var(--motion-duration-color)]",
|
|
629
768
|
"outline-focus-ring outline-offset-[var(--focus-ring-offset)] focus-visible:outline focus-visible:outline-[length:var(--focus-ring-width)]"
|
|
630
|
-
].join(" ")),
|
|
769
|
+
].join(" ")), et = h("outline-focus-ring outline-offset-[var(--focus-ring-offset)] focus-visible:outline focus-visible:outline-[length:var(--focus-ring-width)]"), B = r(void 0), V = (e) => {
|
|
631
770
|
let t = o(B);
|
|
632
|
-
if (t === void 0) throw new
|
|
771
|
+
if (t === void 0) throw new Ze(e);
|
|
633
772
|
return t;
|
|
634
|
-
}, H = (e) => e.split("").map((e) => e.charCodeAt(0).toString(16).padStart(4, "0")).join(""),
|
|
773
|
+
}, H = (e) => e.split("").map((e) => e.charCodeAt(0).toString(16).padStart(4, "0")).join(""), tt = (e) => {
|
|
635
774
|
e.currentTarget.scrollIntoView({
|
|
636
775
|
block: "nearest",
|
|
637
776
|
inline: "nearest"
|
|
638
777
|
});
|
|
639
|
-
}, U = (e, t) => `${e}tab-${H(t)}`, W = (e, t) => `${e}panel-${H(t)}`,
|
|
778
|
+
}, U = (e, t) => `${e}tab-${H(t)}`, W = (e, t) => `${e}panel-${H(t)}`, nt = (e, t) => {
|
|
640
779
|
let n = e.closest("[role=\"tablist\"]");
|
|
641
780
|
if (n === null) return;
|
|
642
781
|
let r = Array.from(n.querySelectorAll(":scope > [role=\"tab\"]"));
|
|
643
782
|
return r[(r.indexOf(e) + t + r.length) % r.length];
|
|
644
|
-
},
|
|
783
|
+
}, rt = {
|
|
645
784
|
Root: ({ active: t, onSelect$: n, label: r, children: i, testId: a }) => {
|
|
646
785
|
let o = c();
|
|
647
786
|
return /* @__PURE__ */ e(B.Provider, {
|
|
@@ -662,7 +801,7 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
|
|
|
662
801
|
return /* @__PURE__ */ e("div", {
|
|
663
802
|
role: "tablist",
|
|
664
803
|
"aria-label": r,
|
|
665
|
-
className:
|
|
804
|
+
className: Qe(),
|
|
666
805
|
"data-testid": n,
|
|
667
806
|
children: t
|
|
668
807
|
});
|
|
@@ -678,18 +817,18 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
|
|
|
678
817
|
tabIndex: s ? 0 : -1,
|
|
679
818
|
"data-value": t,
|
|
680
819
|
"data-testid": r,
|
|
681
|
-
className:
|
|
820
|
+
className: $e(),
|
|
682
821
|
onClick: () => a.next(t),
|
|
683
822
|
onKeyDown: (e) => {
|
|
684
823
|
if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
|
|
685
824
|
e.preventDefault();
|
|
686
|
-
let t =
|
|
825
|
+
let t = nt(e.currentTarget, e.key === "ArrowRight" ? 1 : -1);
|
|
687
826
|
if (t === void 0) return;
|
|
688
827
|
t.focus();
|
|
689
828
|
let n = t.dataset.value;
|
|
690
829
|
n !== void 0 && a.next(n);
|
|
691
830
|
},
|
|
692
|
-
onFocus:
|
|
831
|
+
onFocus: tt,
|
|
693
832
|
children: n
|
|
694
833
|
});
|
|
695
834
|
},
|
|
@@ -701,12 +840,12 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
|
|
|
701
840
|
"aria-labelledby": U(a, t),
|
|
702
841
|
hidden: !o,
|
|
703
842
|
tabIndex: o ? 0 : void 0,
|
|
704
|
-
className:
|
|
843
|
+
className: et(),
|
|
705
844
|
"data-testid": r,
|
|
706
845
|
children: o ? n : void 0
|
|
707
846
|
});
|
|
708
847
|
}
|
|
709
|
-
},
|
|
848
|
+
}, it = h("block min-h-24 w-full rounded-[var(--radius-control)] border border-solid border-control-border bg-transparent px-3 py-2 font-primary text-body 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"), at = ({ label: n, name: r, required: i, optionalLabel: a, invalid: o, disabled: u, defaultValue: d, placeholder: f, autocomplete: p, hint: m, errorMessage: h, onInput$: g, reset$: _, testId: v }) => {
|
|
710
849
|
let y = c(), b = `${y}-control`, x = `${y}-hint`, S = `${y}-error`, C = [m ? x : void 0, o ? S : void 0].filter(Boolean).join(" ") || void 0, w = l(null);
|
|
711
850
|
return s(() => {
|
|
712
851
|
let e = _?.subscribe(() => {
|
|
@@ -725,7 +864,7 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
|
|
|
725
864
|
ref: w,
|
|
726
865
|
id: b,
|
|
727
866
|
name: r,
|
|
728
|
-
className:
|
|
867
|
+
className: it(),
|
|
729
868
|
required: i,
|
|
730
869
|
disabled: u,
|
|
731
870
|
defaultValue: d,
|
|
@@ -752,29 +891,29 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
|
|
|
752
891
|
})
|
|
753
892
|
]
|
|
754
893
|
});
|
|
755
|
-
},
|
|
894
|
+
}, ot = h([
|
|
756
895
|
"flex flex-col items-center",
|
|
757
896
|
"min-h-[var(--cover-height)]",
|
|
758
897
|
"px-[var(--gutter)] py-[var(--space-region)]"
|
|
759
|
-
].join(" ")),
|
|
898
|
+
].join(" ")), st = "my-auto max-w-full", ct = ({ children: n, foot: r, testId: i }) => {
|
|
760
899
|
let a = r != null && typeof r != "boolean";
|
|
761
900
|
return /* @__PURE__ */ t("div", {
|
|
762
|
-
className:
|
|
901
|
+
className: ot(),
|
|
763
902
|
"data-testid": i,
|
|
764
903
|
children: [/* @__PURE__ */ e("div", {
|
|
765
|
-
className:
|
|
904
|
+
className: st,
|
|
766
905
|
children: n
|
|
767
906
|
}), a && /* @__PURE__ */ e("div", { children: r })]
|
|
768
907
|
});
|
|
769
|
-
},
|
|
908
|
+
}, lt = class extends Error {
|
|
770
909
|
constructor(e) {
|
|
771
910
|
super(`Dialog.${e} must be composed inside Dialog.Root`), this.name = "DialogCompositionError";
|
|
772
911
|
}
|
|
773
|
-
},
|
|
912
|
+
}, ut = class extends Error {
|
|
774
913
|
constructor() {
|
|
775
914
|
super("A Dialog takes exactly one accessible naming source: a visible Dialog.Title or ariaLabel on Dialog.Root, never both"), this.name = "DialogNamingError";
|
|
776
915
|
}
|
|
777
|
-
},
|
|
916
|
+
}, dt = h([
|
|
778
917
|
"open:flex open:flex-col m-auto p-0 overflow-hidden",
|
|
779
918
|
"bg-surface text-foreground",
|
|
780
919
|
"rounded-[var(--radius-dialog)] shadow-[var(--elevation-floating)]",
|
|
@@ -785,17 +924,17 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
|
|
|
785
924
|
content: ["w-[32rem] max-w-[calc(100vw-2*var(--gutter))]", "max-h-[calc(100dvh-2*var(--space-region))]"].join(" ")
|
|
786
925
|
} },
|
|
787
926
|
defaultVariants: { extent: "screen" }
|
|
788
|
-
}),
|
|
927
|
+
}), ft = h(["px-[var(--space-region)] pt-[var(--space-region)] pb-[var(--space-region)]", "[&:has(+[data-dialog-member=description])]:pb-0"].join(" ")), pt = h(["px-[var(--space-region)] pt-[var(--space-region)] pb-[var(--space-region)]", "[[data-dialog-member=title]+&]:mt-[var(--space-stack)] [[data-dialog-member=title]+&]:pt-0"].join(" ")), mt = h([
|
|
789
928
|
"grow shrink min-h-0 overflow-y-auto",
|
|
790
929
|
"px-[var(--space-region)] py-[var(--space-region)]",
|
|
791
930
|
"[&:not(:first-child)]:border-t [&:not(:first-child)]:border-border"
|
|
792
|
-
].join(" ")),
|
|
931
|
+
].join(" ")), ht = h([
|
|
793
932
|
"flex flex-row flex-wrap items-center justify-end gap-[var(--space-stack)] shrink-0",
|
|
794
933
|
"px-[var(--space-region)] pt-[var(--space-region)] pb-[var(--space-region)]",
|
|
795
934
|
"[[data-dialog-member=content]+&]:border-t [[data-dialog-member=content]+&]:border-border"
|
|
796
935
|
].join(" ")), G = r(void 0), K = (e) => {
|
|
797
936
|
let t = o(G);
|
|
798
|
-
if (t === void 0) throw new
|
|
937
|
+
if (t === void 0) throw new lt(e);
|
|
799
938
|
return t;
|
|
800
939
|
}, q = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])", J = (e, { presented: t, opener: n }) => {
|
|
801
940
|
if (e === void 0 || e.open) return;
|
|
@@ -803,7 +942,7 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
|
|
|
803
942
|
n.current = r instanceof HTMLElement && r !== document.body ? r : void 0, e.showModal(), t.current = !0, e.querySelector(q)?.focus();
|
|
804
943
|
}, Y = (e, { presented: t }) => {
|
|
805
944
|
t.current = !1, e?.open && e.close();
|
|
806
|
-
},
|
|
945
|
+
}, gt = {
|
|
807
946
|
Root: ({ children: t, onDismiss$: n, showDialog$: r, extent: i, ariaLabel: o, testId: d }) => {
|
|
808
947
|
let f = c(), p = l(void 0), m = l(!1), h = l(void 0), [g] = u(() => ({
|
|
809
948
|
presented: m,
|
|
@@ -839,7 +978,7 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
|
|
|
839
978
|
ref: (e) => {
|
|
840
979
|
p.current = e ?? void 0, e?.setAttribute("headingreset", "");
|
|
841
980
|
},
|
|
842
|
-
className:
|
|
981
|
+
className: dt({ extent: i }),
|
|
843
982
|
"aria-label": o,
|
|
844
983
|
"aria-labelledby": o === void 0 && _.title ? b.titleId : void 0,
|
|
845
984
|
"aria-describedby": _.description ? b.descriptionId : void 0,
|
|
@@ -864,10 +1003,10 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
|
|
|
864
1003
|
},
|
|
865
1004
|
Title: ({ children: t, testId: n }) => {
|
|
866
1005
|
let { titleId: r, isLabelled: i, registerNamePart: a } = K("Title");
|
|
867
|
-
if (s(() => a("title"), [a]), i) throw new
|
|
1006
|
+
if (s(() => a("title"), [a]), i) throw new ut();
|
|
868
1007
|
return /* @__PURE__ */ e("div", {
|
|
869
1008
|
"data-dialog-member": "title",
|
|
870
|
-
className:
|
|
1009
|
+
className: ft(),
|
|
871
1010
|
"data-testid": n,
|
|
872
1011
|
children: /* @__PURE__ */ e("h1", {
|
|
873
1012
|
id: r,
|
|
@@ -880,7 +1019,7 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
|
|
|
880
1019
|
let { descriptionId: r, registerNamePart: i } = K("Description");
|
|
881
1020
|
return s(() => i("description"), [i]), /* @__PURE__ */ e("div", {
|
|
882
1021
|
"data-dialog-member": "description",
|
|
883
|
-
className:
|
|
1022
|
+
className: pt(),
|
|
884
1023
|
"data-testid": n,
|
|
885
1024
|
children: /* @__PURE__ */ e("p", {
|
|
886
1025
|
id: r,
|
|
@@ -891,27 +1030,27 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
|
|
|
891
1030
|
},
|
|
892
1031
|
Content: ({ children: t, testId: n }) => (K("Content"), /* @__PURE__ */ e("div", {
|
|
893
1032
|
"data-dialog-member": "content",
|
|
894
|
-
className:
|
|
1033
|
+
className: mt(),
|
|
895
1034
|
"data-testid": n,
|
|
896
1035
|
children: t
|
|
897
1036
|
})),
|
|
898
1037
|
Actions: ({ children: t, testId: n }) => (K("Actions"), /* @__PURE__ */ e("div", {
|
|
899
1038
|
"data-dialog-member": "actions",
|
|
900
|
-
className:
|
|
1039
|
+
className: ht(),
|
|
901
1040
|
"data-testid": n,
|
|
902
1041
|
children: t
|
|
903
1042
|
}))
|
|
904
|
-
},
|
|
1043
|
+
}, _t = h("font-secondary text-small text-muted py-[var(--space-region)] px-[var(--gutter)]", {
|
|
905
1044
|
variants: { edge: {
|
|
906
1045
|
none: "",
|
|
907
1046
|
rule: "border-t border-solid border-rule"
|
|
908
1047
|
} },
|
|
909
1048
|
defaultVariants: { edge: "rule" }
|
|
910
|
-
}),
|
|
911
|
-
className:
|
|
1049
|
+
}), vt = ({ edge: t, children: n, testId: r }) => /* @__PURE__ */ e("footer", {
|
|
1050
|
+
className: _t({ edge: t }),
|
|
912
1051
|
"data-testid": r,
|
|
913
1052
|
children: n
|
|
914
|
-
}),
|
|
1053
|
+
}), yt = h("font-secondary text-small", {
|
|
915
1054
|
variants: { state: {
|
|
916
1055
|
idle: "text-muted",
|
|
917
1056
|
sending: "text-muted",
|
|
@@ -919,13 +1058,13 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
|
|
|
919
1058
|
failed: "text-error"
|
|
920
1059
|
} },
|
|
921
1060
|
defaultVariants: { state: "idle" }
|
|
922
|
-
}),
|
|
1061
|
+
}), bt = {
|
|
923
1062
|
sent: "status",
|
|
924
1063
|
failed: "alert"
|
|
925
|
-
},
|
|
1064
|
+
}, xt = ({ action: n, method: r = "post", state: i = "idle", children: a, actions: o, note: s, testId: c }) => {
|
|
926
1065
|
let l = s != null && typeof s != "boolean";
|
|
927
1066
|
if (i === "sent" && !l) throw Error("Form in the `sent` state must be given a `note` - it is the outcome message.");
|
|
928
|
-
let u = i !== "sent", d =
|
|
1067
|
+
let u = i !== "sent", d = bt[i];
|
|
929
1068
|
return /* @__PURE__ */ t("form", {
|
|
930
1069
|
action: n,
|
|
931
1070
|
method: r,
|
|
@@ -943,12 +1082,12 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
|
|
|
943
1082
|
}),
|
|
944
1083
|
l && /* @__PURE__ */ e("p", {
|
|
945
1084
|
role: d,
|
|
946
|
-
className:
|
|
1085
|
+
className: yt({ state: i }),
|
|
947
1086
|
children: s
|
|
948
1087
|
})
|
|
949
1088
|
]
|
|
950
1089
|
});
|
|
951
|
-
},
|
|
1090
|
+
}, St = h([
|
|
952
1091
|
"flex items-baseline justify-between",
|
|
953
1092
|
"font-secondary text-label leading-label tracking-label text-muted",
|
|
954
1093
|
"py-[var(--space-region)] px-[var(--gutter)]",
|
|
@@ -959,50 +1098,50 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
|
|
|
959
1098
|
rule: "border-b border-solid border-rule"
|
|
960
1099
|
} },
|
|
961
1100
|
defaultVariants: { edge: "rule" }
|
|
962
|
-
}),
|
|
1101
|
+
}), Ct = [
|
|
963
1102
|
"inline-flex shrink-0 items-center",
|
|
964
1103
|
"min-h-[calc(var(--text-label)*var(--leading-label))]",
|
|
965
1104
|
"min-w-[var(--standing-min-width)]"
|
|
966
|
-
].join(" "),
|
|
967
|
-
className:
|
|
1105
|
+
].join(" "), wt = ({ edge: n, standing: r, navName: i, children: a, testId: o }) => /* @__PURE__ */ t("header", {
|
|
1106
|
+
className: St({ edge: n }),
|
|
968
1107
|
"data-testid": o,
|
|
969
1108
|
children: [/* @__PURE__ */ e("div", {
|
|
970
|
-
className:
|
|
1109
|
+
className: Ct,
|
|
971
1110
|
children: r
|
|
972
1111
|
}), /* @__PURE__ */ e("nav", {
|
|
973
1112
|
"aria-label": i,
|
|
974
1113
|
className: "flex flex-wrap items-baseline gap-[var(--space-region)]",
|
|
975
1114
|
children: a
|
|
976
1115
|
})]
|
|
977
|
-
}),
|
|
1116
|
+
}), Tt = h("flex flex-col min-h-[var(--fold-height)] gap-[var(--space-stack)]", {
|
|
978
1117
|
variants: { place: {
|
|
979
1118
|
start: "justify-start",
|
|
980
1119
|
center: "justify-center",
|
|
981
1120
|
between: "justify-between"
|
|
982
1121
|
} },
|
|
983
1122
|
defaultVariants: { place: "center" }
|
|
984
|
-
}),
|
|
985
|
-
className:
|
|
1123
|
+
}), Et = ({ place: t, children: n, testId: r }) => /* @__PURE__ */ e("div", {
|
|
1124
|
+
className: Tt({ place: t }),
|
|
986
1125
|
"data-testid": r,
|
|
987
1126
|
children: n
|
|
988
|
-
}),
|
|
989
|
-
className:
|
|
1127
|
+
}), Dt = h("flex flex-col gap-[var(--space-stack)] py-[var(--space-band)] px-[var(--gutter)]"), Ot = h("font-primary text-title leading-title tracking-optical text-foreground"), kt = h("font-primary text-lede leading-lede text-foreground max-w-[var(--measure-wide)]"), X = h("font-primary text-small text-muted max-w-[var(--measure)]"), At = ({ title: n, lede: r, intro: i, testId: a }) => /* @__PURE__ */ t("header", {
|
|
1128
|
+
className: Dt(),
|
|
990
1129
|
"data-testid": a,
|
|
991
1130
|
children: [
|
|
992
1131
|
/* @__PURE__ */ e("h1", {
|
|
993
|
-
className:
|
|
1132
|
+
className: Ot(),
|
|
994
1133
|
children: n
|
|
995
1134
|
}),
|
|
996
1135
|
r !== void 0 && /* @__PURE__ */ e("p", {
|
|
997
|
-
className:
|
|
1136
|
+
className: kt(),
|
|
998
1137
|
children: r
|
|
999
1138
|
}),
|
|
1000
1139
|
i !== void 0 && /* @__PURE__ */ e("p", {
|
|
1001
|
-
className:
|
|
1140
|
+
className: X(),
|
|
1002
1141
|
children: i
|
|
1003
1142
|
})
|
|
1004
1143
|
]
|
|
1005
|
-
}),
|
|
1144
|
+
}), jt = h([
|
|
1006
1145
|
"relative",
|
|
1007
1146
|
"py-[var(--space-band)]",
|
|
1008
1147
|
"[[data-section]+&]:border-t [[data-section]+&]:border-solid [[data-section]+&]:border-rule"
|
|
@@ -1012,20 +1151,20 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
|
|
|
1012
1151
|
full: ""
|
|
1013
1152
|
} },
|
|
1014
1153
|
defaultVariants: { bleed: "inset" }
|
|
1015
|
-
}),
|
|
1154
|
+
}), Mt = ({ bleed: t, name: n, children: r, testId: i }) => /* @__PURE__ */ e("section", {
|
|
1016
1155
|
"data-section": "",
|
|
1017
|
-
className:
|
|
1156
|
+
className: jt({ bleed: t }),
|
|
1018
1157
|
"aria-label": n,
|
|
1019
1158
|
"data-testid": i,
|
|
1020
1159
|
children: r
|
|
1021
|
-
}),
|
|
1160
|
+
}), Nt = h([
|
|
1022
1161
|
"grid gap-[var(--space-region)] lg:grid-cols-[12rem_minmax(0,1fr)]",
|
|
1023
1162
|
"[&>div:first-child]:border-solid [&>div:first-child]:border-border [&>div:first-child]:border-b [&>div:first-child]:pb-[var(--space-stack)]",
|
|
1024
1163
|
"lg:[&>div:first-child]:border-b-0 lg:[&>div:first-child]:border-r lg:[&>div:first-child]:pb-0 lg:[&>div:first-child]:pr-[var(--space-stack)]",
|
|
1025
1164
|
"lg:[&>div:first-child>nav]:sticky lg:[&>div:first-child>nav]:top-0 lg:[&>div:first-child>nav]:max-h-[min(100dvh,var(--sidebar-scrollport-height,100dvh))] lg:[&>div:first-child>nav]:overflow-y-auto",
|
|
1026
1165
|
"[&>div:first-child>nav]:p-[calc(var(--focus-ring-width)+var(--focus-ring-offset))] lg:[&>div:first-child>nav]:scroll-p-[calc(var(--focus-ring-width)+var(--focus-ring-offset))]",
|
|
1027
1166
|
"[&>div:first-child>nav>ul]:flex [&>div:first-child>nav>ul]:flex-col [&>div:first-child>nav>ul]:gap-[var(--space-stack)]"
|
|
1028
|
-
].join(" ")),
|
|
1167
|
+
].join(" ")), Pt = (e) => {
|
|
1029
1168
|
if (!e) return;
|
|
1030
1169
|
let t = [];
|
|
1031
1170
|
for (let n = e.parentElement; n && n !== e.ownerDocument.documentElement; n = n.parentElement) t.push(n);
|
|
@@ -1039,7 +1178,7 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
|
|
|
1039
1178
|
return window.addEventListener("resize", n), () => {
|
|
1040
1179
|
r?.disconnect(), window.removeEventListener("resize", n), e.style.removeProperty("--sidebar-scrollport-height");
|
|
1041
1180
|
};
|
|
1042
|
-
},
|
|
1181
|
+
}, Ft = h([
|
|
1043
1182
|
"w-full text-left font-secondary text-label tracking-label",
|
|
1044
1183
|
"underline-offset-[var(--underline-offset)]",
|
|
1045
1184
|
"outline-focus-ring outline-offset-[var(--focus-ring-offset)] focus-visible:outline focus-visible:outline-[length:var(--focus-ring-width)]"
|
|
@@ -1054,7 +1193,7 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
|
|
|
1054
1193
|
let a = o(Z), s = a !== void 0 && a.active === t;
|
|
1055
1194
|
return /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e("button", {
|
|
1056
1195
|
type: "button",
|
|
1057
|
-
className:
|
|
1196
|
+
className: Ft({ state: r ? "inert" : s ? "active" : "usable" }),
|
|
1058
1197
|
disabled: r,
|
|
1059
1198
|
"aria-current": s ? "true" : void 0,
|
|
1060
1199
|
"data-testid": i,
|
|
@@ -1066,14 +1205,14 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
|
|
|
1066
1205
|
}, $ = ({ children: t, testId: n }) => /* @__PURE__ */ e("div", {
|
|
1067
1206
|
"data-testid": n,
|
|
1068
1207
|
children: t
|
|
1069
|
-
}),
|
|
1208
|
+
}), It = {
|
|
1070
1209
|
Root: ({ active: r, label: a, onSelect$: o, children: s, testId: c }) => {
|
|
1071
1210
|
let l = n.toArray(s).filter(i);
|
|
1072
1211
|
return /* @__PURE__ */ t("div", {
|
|
1073
|
-
className:
|
|
1212
|
+
className: Nt(),
|
|
1074
1213
|
"data-testid": c,
|
|
1075
1214
|
children: [/* @__PURE__ */ e("div", { children: /* @__PURE__ */ e("nav", {
|
|
1076
|
-
ref:
|
|
1215
|
+
ref: Pt,
|
|
1077
1216
|
"aria-label": a,
|
|
1078
1217
|
children: /* @__PURE__ */ e(Z, {
|
|
1079
1218
|
value: {
|
|
@@ -1087,7 +1226,7 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
|
|
|
1087
1226
|
},
|
|
1088
1227
|
Item: Q,
|
|
1089
1228
|
Content: $
|
|
1090
|
-
},
|
|
1229
|
+
}, Lt = {
|
|
1091
1230
|
surface: "#ffffff",
|
|
1092
1231
|
foreground: "#0f172a",
|
|
1093
1232
|
muted: "#64748b",
|
|
@@ -1112,7 +1251,7 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
|
|
|
1112
1251
|
warning: "#b45309",
|
|
1113
1252
|
error: "#d63384",
|
|
1114
1253
|
info: "#0e7490"
|
|
1115
|
-
},
|
|
1254
|
+
}, Rt = {
|
|
1116
1255
|
surface: "#0f172a",
|
|
1117
1256
|
foreground: "#f8fafc",
|
|
1118
1257
|
muted: "#94a3b8",
|
|
@@ -1139,4 +1278,4 @@ var p = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, m = f, h = (e
|
|
|
1139
1278
|
info: "#22d3ee"
|
|
1140
1279
|
};
|
|
1141
1280
|
//#endregion
|
|
1142
|
-
export { x as Brandmark,
|
|
1281
|
+
export { x as Brandmark, Pe as Button, w as Checklist, Ve as Choices, _ as Cluster, te as Collection, ct as Cover, ae as DefinitionList, gt as Dialog, M as Eyebrow, se as Figure, vt as Footer, xt as Form, P as H1, I as H2, _e as H3, ye as H4, xe as H5, Ce as H6, wt as Header, Et as Hero, Ue as Input, Ge as Link, ue as Meter, Te as Note, De as P, At as PageHead, Me as Prose, he as Rail, Mt as Section, qe as Select, It as Sidebar, Xe as Slider, y as Stack, A as Table, rt as Tabs, at as TextArea, Rt as dark, Lt as light };
|