@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.
@@ -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(" ")), O = h("border-t border-solid border-border"), k = h("px-4 py-2 text-small first:pl-0 last:pr-0", {
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
- }), A = h("px-4 py-2 font-secondary font-medium text-label text-muted tracking-label first:pl-0 last:pr-0", {
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
- }), j = {
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: O(),
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: A({ align: n }),
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: k({
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
- }, M = h("font-secondary text-label tracking-label font-medium", {
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
- }), N = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("p", {
349
- className: M({ color: n }),
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
- }), P = h("font-primary text-display leading-display tracking-optical max-w-[var(--measure-display)]", {
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
- }), F = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h1", {
363
- className: P({ color: n }),
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
- }), I = h("font-primary text-title leading-title tracking-optical", {
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
- }), L = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h2", {
377
- className: I({ color: n }),
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
- }), R = h("font-primary text-subtitle leading-subtitle", {
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
- }), ge = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h3", {
391
- className: R({ color: n }),
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
- }), _e = h("font-primary text-body leading-body font-bold", {
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
- }), ve = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h4", {
405
- className: _e({ color: n }),
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
- }), ye = h("font-primary text-body leading-body font-semibold", {
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
- }), be = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h5", {
419
- className: ye({ color: n }),
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
- }), xe = h("font-primary text-body leading-body font-medium", {
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
- }), Se = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("h6", {
433
- className: xe({ color: n }),
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
- }), Ce = h("font-secondary text-small", {
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
- }), we = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("p", {
447
- className: Ce({ color: n }),
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
- }), Te = h("font-primary text-body leading-body", {
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
- }), Ee = ({ children: t, color: n, testId: r }) => /* @__PURE__ */ e("p", {
461
- className: Te({ color: n }),
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
- }), De = h("flex max-w-[var(--measure)] flex-col gap-[var(--space-stack)]"), Oe = h("font-primary text-lede leading-lede text-foreground"), ke = h("font-primary text-body leading-body", {
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
- }), Ae = h("font-primary text-small text-muted"), je = {
474
+ }), je = h("font-primary text-small text-muted"), Me = {
475
475
  Root: ({ children: t, testId: n }) => /* @__PURE__ */ e("div", {
476
- className: De(),
476
+ className: Oe(),
477
477
  "data-testid": n,
478
478
  children: t
479
479
  }),
480
480
  Lede: ({ children: t }) => /* @__PURE__ */ e("p", {
481
- className: Oe(),
481
+ className: ke(),
482
482
  children: t
483
483
  }),
484
484
  Body: ({ color: t, children: n }) => /* @__PURE__ */ e("p", {
485
- className: ke({ color: t }),
485
+ className: Ae({ color: t }),
486
486
  children: n
487
487
  }),
488
488
  Tail: ({ children: t }) => /* @__PURE__ */ e("p", {
489
- className: Ae(),
489
+ className: je(),
490
490
  children: t
491
491
  })
492
- }, Me = 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)]", {
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
- }), Ne = ({ children: t, disabled: n, testId: r, variant: i, onClick$: a, ariaLabel: o, type: s = "button" }) => /* @__PURE__ */ e("button", {
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: Me({ variant: i }),
502
+ className: Ne({ variant: i }),
503
503
  onClick: () => a?.next(),
504
504
  disabled: n,
505
505
  "aria-label": o,
506
506
  children: t
507
- }), Pe = 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", {
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
- }), Fe = ({ 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 }) => {
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: Pe({ variant: i }),
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
- }, Ie = h("outline-focus-ring outline-offset-[var(--focus-ring-offset)] focus-visible:outline focus-visible:outline-[length:var(--focus-ring-width)]", {
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
- }), Le = ({ href: t, children: n, treatment: r, external: i, current: a, testId: o }) => /* @__PURE__ */ e("a", {
656
+ }), Ge = ({ href: t, children: n, treatment: r, external: i, current: a, testId: o }) => /* @__PURE__ */ e("a", {
570
657
  href: t,
571
- className: Ie({ treatment: r }),
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
- }), z = class extends Error {
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
- }, Re = h([
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(" ")), ze = (e) => {
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
- }, Be = ({ min: t, max: n, step: r = 1, value: i, onInput$: a, label: o, valueText: s, disabled: c, testId: l }) => (ze({
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: Re(),
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
- })), Ve = class extends Error {
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
- }, He = h([
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(" ")), Ue = h([
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(" ")), We = 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) => {
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 Ve(e);
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(""), Ge = (e) => {
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)}`, Ke = (e, 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
- }, qe = {
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: He(),
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: Ue(),
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 = Ke(e.currentTarget, e.key === "ArrowRight" ? 1 : -1);
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: Ge,
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: We(),
843
+ className: et(),
705
844
  "data-testid": r,
706
845
  children: o ? n : void 0
707
846
  });
708
847
  }
709
- }, Je = 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"), Ye = ({ 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 }) => {
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: Je(),
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
- }, Xe = h([
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(" ")), Ze = "my-auto max-w-full", Qe = ({ children: n, foot: r, testId: i }) => {
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: Xe(),
901
+ className: ot(),
763
902
  "data-testid": i,
764
903
  children: [/* @__PURE__ */ e("div", {
765
- className: Ze,
904
+ className: st,
766
905
  children: n
767
906
  }), a && /* @__PURE__ */ e("div", { children: r })]
768
907
  });
769
- }, $e = class extends Error {
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
- }, et = class extends Error {
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
- }, tt = h([
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
- }), nt = h(["px-[var(--space-region)] pt-[var(--space-region)] pb-[var(--space-region)]", "[&:has(+[data-dialog-member=description])]:pb-0"].join(" ")), rt = 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(" ")), it = h([
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(" ")), at = h([
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 $e(e);
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
- }, ot = {
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: tt({ extent: i }),
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 et();
1006
+ if (s(() => a("title"), [a]), i) throw new ut();
868
1007
  return /* @__PURE__ */ e("div", {
869
1008
  "data-dialog-member": "title",
870
- className: nt(),
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: rt(),
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: it(),
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: at(),
1039
+ className: ht(),
901
1040
  "data-testid": n,
902
1041
  children: t
903
1042
  }))
904
- }, st = h("font-secondary text-small text-muted py-[var(--space-region)] px-[var(--gutter)]", {
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
- }), ct = ({ edge: t, children: n, testId: r }) => /* @__PURE__ */ e("footer", {
911
- className: st({ edge: t }),
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
- }), lt = h("font-secondary text-small", {
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
- }), ut = {
1061
+ }), bt = {
923
1062
  sent: "status",
924
1063
  failed: "alert"
925
- }, dt = ({ action: n, method: r = "post", state: i = "idle", children: a, actions: o, note: s, testId: c }) => {
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 = ut[i];
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: lt({ state: i }),
1085
+ className: yt({ state: i }),
947
1086
  children: s
948
1087
  })
949
1088
  ]
950
1089
  });
951
- }, ft = h([
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
- }), pt = [
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(" "), mt = ({ edge: n, standing: r, navName: i, children: a, testId: o }) => /* @__PURE__ */ t("header", {
967
- className: ft({ edge: n }),
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: pt,
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
- }), ht = h("flex flex-col min-h-[var(--fold-height)] gap-[var(--space-stack)]", {
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
- }), gt = ({ place: t, children: n, testId: r }) => /* @__PURE__ */ e("div", {
985
- className: ht({ place: t }),
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
- }), _t = h("flex flex-col gap-[var(--space-stack)] py-[var(--space-band)] px-[var(--gutter)]"), vt = h("font-primary text-title leading-title tracking-optical text-foreground"), yt = h("font-primary text-lede leading-lede text-foreground max-w-[var(--measure-wide)]"), bt = h("font-primary text-small text-muted max-w-[var(--measure)]"), xt = ({ title: n, lede: r, intro: i, testId: a }) => /* @__PURE__ */ t("header", {
989
- className: _t(),
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: vt(),
1132
+ className: Ot(),
994
1133
  children: n
995
1134
  }),
996
1135
  r !== void 0 && /* @__PURE__ */ e("p", {
997
- className: yt(),
1136
+ className: kt(),
998
1137
  children: r
999
1138
  }),
1000
1139
  i !== void 0 && /* @__PURE__ */ e("p", {
1001
- className: bt(),
1140
+ className: X(),
1002
1141
  children: i
1003
1142
  })
1004
1143
  ]
1005
- }), St = h([
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
- }), X = ({ bleed: t, name: n, children: r, testId: i }) => /* @__PURE__ */ e("section", {
1154
+ }), Mt = ({ bleed: t, name: n, children: r, testId: i }) => /* @__PURE__ */ e("section", {
1016
1155
  "data-section": "",
1017
- className: St({ bleed: t }),
1156
+ className: jt({ bleed: t }),
1018
1157
  "aria-label": n,
1019
1158
  "data-testid": i,
1020
1159
  children: r
1021
- }), Ct = h([
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(" ")), wt = (e) => {
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
- }, Tt = h([
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: Tt({ state: r ? "inert" : s ? "active" : "usable" }),
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
- }), Et = {
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: Ct(),
1212
+ className: Nt(),
1074
1213
  "data-testid": c,
1075
1214
  children: [/* @__PURE__ */ e("div", { children: /* @__PURE__ */ e("nav", {
1076
- ref: wt,
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
- }, Dt = {
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
- }, Ot = {
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, Ne as Button, w as Checklist, _ as Cluster, te as Collection, Qe as Cover, ae as DefinitionList, ot as Dialog, N as Eyebrow, se as Figure, ct as Footer, dt as Form, F as H1, L as H2, ge as H3, ve as H4, be as H5, Se as H6, mt as Header, gt as Hero, Fe as Input, Le as Link, ue as Meter, we as Note, Ee as P, xt as PageHead, je as Prose, he as Rail, X as Section, Et as Sidebar, Be as Slider, y as Stack, j as Table, qe as Tabs, Ye as TextArea, Ot as dark, Dt as light };
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 };