prime-ui-kit 0.21.3 → 0.21.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (49) hide show
  1. package/dist/chunks/{chunk-R5LI5BO3.js → chunk-CM2KZEDV.js} +388 -293
  2. package/dist/chunks/{chunk-HMLQCKRL.js → chunk-FWL3NJYA.js} +578 -552
  3. package/dist/chunks/{chunk-BAJRN3QN.js → chunk-KQLHVPF5.js} +5 -2
  4. package/dist/chunks/{chunk-JO7E6SZQ.js → chunk-XH64AMXF.js} +370 -338
  5. package/dist/chunks/chunk-ZGEHB27U.js +5643 -0
  6. package/dist/color-picker.js +3 -3
  7. package/dist/components/chat/Chat.d.ts +4 -2
  8. package/dist/components/chat/ChatRows.d.ts +57 -2
  9. package/dist/components/chat/messageFlow.d.ts +11 -0
  10. package/dist/components/index.d.ts +1 -1
  11. package/dist/components/input/Input.d.ts +1 -1
  12. package/dist/components/login-form/LoginForm.d.ts +5 -1
  13. package/dist/components/textarea/Textarea.d.ts +1 -1
  14. package/dist/icon-set.js +4 -4
  15. package/dist/icons/registry.d.ts +2 -0
  16. package/dist/index.css +1 -1
  17. package/dist/index.js +3 -3
  18. package/dist/internal/autofill.d.ts +30 -0
  19. package/dist/internal/messageList.d.ts +3 -1
  20. package/dist/skill/api-contract.md +2 -2
  21. package/dist/skill/checklist.md +2 -0
  22. package/dist/skill/composition.md +1 -1
  23. package/dist/skill/reference/components/button/examples/in-form.tsx +0 -1
  24. package/dist/skill/reference/components/chat/COMPONENT.md +41 -5
  25. package/dist/skill/reference/components/chat/examples/events.tsx +129 -0
  26. package/dist/skill/reference/components/chat/examples/screen.tsx +56 -2
  27. package/dist/skill/reference/components/drawer/examples/screen.tsx +1 -5
  28. package/dist/skill/reference/components/input/COMPONENT.md +3 -0
  29. package/dist/skill/reference/components/input/examples/in-form.tsx +0 -1
  30. package/dist/skill/reference/components/input/examples/validation.tsx +1 -1
  31. package/dist/skill/reference/components/login-form/COMPONENT.md +2 -2
  32. package/dist/skill/reference/components/login-form/examples/sizes.tsx +6 -2
  33. package/dist/skill/reference/components/tabs/examples/orientation.tsx +1 -1
  34. package/dist/skill/reference/components/textarea/COMPONENT.md +2 -0
  35. package/dist/skill/ux.md +19 -2
  36. package/package.json +1 -1
  37. package/src/components/button/examples/in-form.tsx +0 -1
  38. package/src/components/chat/COMPONENT.md +41 -5
  39. package/src/components/chat/examples/events.tsx +129 -0
  40. package/src/components/chat/examples/screen.tsx +56 -2
  41. package/src/components/drawer/examples/screen.tsx +1 -5
  42. package/src/components/input/COMPONENT.md +3 -0
  43. package/src/components/input/examples/in-form.tsx +0 -1
  44. package/src/components/input/examples/validation.tsx +1 -1
  45. package/src/components/login-form/COMPONENT.md +2 -2
  46. package/src/components/login-form/examples/sizes.tsx +6 -2
  47. package/src/components/tabs/examples/orientation.tsx +1 -1
  48. package/src/components/textarea/COMPONENT.md +2 -0
  49. package/dist/chunks/chunk-SUGCIPD7.js +0 -5669
@@ -4,12 +4,14 @@ import {
4
4
  Activity,
5
5
  AppWindow,
6
6
  ArrowDown,
7
+ ArrowRight,
7
8
  ArrowUp,
8
9
  ArrowUpDown,
9
10
  Bell,
10
11
  Bike,
11
12
  Bold,
12
13
  BookOpen,
14
+ Bot,
13
15
  COMPACT_QUERY,
14
16
  Calendar,
15
17
  Captions,
@@ -143,7 +145,7 @@ import {
143
145
  useIconRoot,
144
146
  useOptionalControlSize,
145
147
  usePresence
146
- } from "./chunk-HMLQCKRL.js";
148
+ } from "./chunk-FWL3NJYA.js";
147
149
 
148
150
  // src/components/scroll-container/ScrollContainer.tsx
149
151
  import * as React9 from "react";
@@ -2799,6 +2801,7 @@ var Tooltip = {
2799
2801
  var iconRegistry = {
2800
2802
  "nav.chevronDown": ChevronDown,
2801
2803
  "nav.chevronLeft": ChevronLeft,
2804
+ "nav.arrowRight": ArrowRight,
2802
2805
  "nav.chevronRight": ChevronRight,
2803
2806
  "nav.chevronUp": ChevronUp,
2804
2807
  "nav.chevronsLeft": ChevronsLeft,
@@ -2885,6 +2888,7 @@ var iconRegistry = {
2885
2888
  "object.fuel": Fuel,
2886
2889
  "object.funnel": Funnel,
2887
2890
  "object.globe": Globe,
2891
+ "object.bot": Bot,
2888
2892
  "object.headset": Headset,
2889
2893
  "object.image": Image,
2890
2894
  "object.inbox": Inbox,
@@ -5283,10 +5287,31 @@ function getPasswordStrength(value) {
5283
5287
  }
5284
5288
 
5285
5289
  // src/components/input/Input.tsx
5286
- import * as React51 from "react";
5290
+ import * as React52 from "react";
5287
5291
 
5288
- // src/internal/FieldAction.tsx
5292
+ // src/internal/autofill.tsx
5289
5293
  import * as React44 from "react";
5294
+ import { jsx as jsx24 } from "react/jsx-runtime";
5295
+ var AUTOFILL_OFF = {
5296
+ autoComplete: "off",
5297
+ "data-1p-ignore": "true",
5298
+ "data-lpignore": "true",
5299
+ "data-bwignore": "true",
5300
+ "data-form-type": "other"
5301
+ };
5302
+ var AutofillContext = React44.createContext(false);
5303
+ function AutofillScope({ children }) {
5304
+ return /* @__PURE__ */ jsx24(AutofillContext.Provider, { value: true, children });
5305
+ }
5306
+ function useAutofill(autoComplete) {
5307
+ const scoped = React44.useContext(AutofillContext);
5308
+ if (autoComplete && autoComplete !== "off") return { autoComplete };
5309
+ if (scoped && !autoComplete) return {};
5310
+ return AUTOFILL_OFF;
5311
+ }
5312
+
5313
+ // src/internal/FieldAction.tsx
5314
+ import * as React45 from "react";
5290
5315
 
5291
5316
  // src/internal/FieldAction.module.css
5292
5317
  var FieldAction_default = {
@@ -5294,7 +5319,7 @@ var FieldAction_default = {
5294
5319
  };
5295
5320
 
5296
5321
  // src/internal/FieldAction.tsx
5297
- import { Fragment as Fragment7, jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
5322
+ import { Fragment as Fragment7, jsx as jsx25, jsxs as jsxs13 } from "react/jsx-runtime";
5298
5323
  var fieldActionClass = cx(FieldAction_default.action, touchTargetBlockClass);
5299
5324
  function FieldActionButton({
5300
5325
  label,
@@ -5313,17 +5338,17 @@ function FieldActionButton({
5313
5338
  "aria-label": label,
5314
5339
  "data-field-action": ""
5315
5340
  };
5316
- const segment = asChild ? /* @__PURE__ */ jsx24(Slot, { ...shared, ref, "aria-disabled": disabled || void 0, children }) : /* @__PURE__ */ jsx24("button", { ...shared, ref, type, disabled, children: /* @__PURE__ */ jsx24(GlyphSwap, { children }) });
5341
+ const segment = asChild ? /* @__PURE__ */ jsx25(Slot, { ...shared, ref, "aria-disabled": disabled || void 0, children }) : /* @__PURE__ */ jsx25("button", { ...shared, ref, type, disabled, children: /* @__PURE__ */ jsx25(GlyphSwap, { children }) });
5317
5342
  if (!tooltip) return segment;
5318
5343
  return /* @__PURE__ */ jsxs13(Tooltip.Root, { children: [
5319
- /* @__PURE__ */ jsx24(Tooltip.Trigger, { children: segment }),
5320
- /* @__PURE__ */ jsx24(Tooltip.Content, { children: label })
5344
+ /* @__PURE__ */ jsx25(Tooltip.Trigger, { children: segment }),
5345
+ /* @__PURE__ */ jsx25(Tooltip.Content, { children: label })
5321
5346
  ] });
5322
5347
  }
5323
5348
  var COPY_FEEDBACK_MS = 1600;
5324
5349
  function FieldCopyButton({ getText, labels, onClick: onClick2, ...rest }) {
5325
- const [state, setState] = React44.useState("idle");
5326
- React44.useEffect(() => {
5350
+ const [state, setState] = React45.useState("idle");
5351
+ React45.useEffect(() => {
5327
5352
  if (state === "idle") return;
5328
5353
  const timer = window.setTimeout(() => setState("idle"), COPY_FEEDBACK_MS);
5329
5354
  return () => window.clearTimeout(timer);
@@ -5331,7 +5356,7 @@ function FieldCopyButton({ getText, labels, onClick: onClick2, ...rest }) {
5331
5356
  const label = state === "copied" ? labels.copied : state === "error" ? labels.copyError : labels.copy;
5332
5357
  const glyph = state === "copied" ? "action.check" : "action.copy";
5333
5358
  return /* @__PURE__ */ jsxs13(Fragment7, { children: [
5334
- /* @__PURE__ */ jsx24(
5359
+ /* @__PURE__ */ jsx25(
5335
5360
  FieldActionButton,
5336
5361
  {
5337
5362
  ...rest,
@@ -5347,15 +5372,15 @@ function FieldCopyButton({ getText, labels, onClick: onClick2, ...rest }) {
5347
5372
  setState("error");
5348
5373
  }
5349
5374
  },
5350
- children: /* @__PURE__ */ jsx24(Icon, { name: glyph })
5375
+ children: /* @__PURE__ */ jsx25(Icon, { name: glyph })
5351
5376
  }
5352
5377
  ),
5353
- /* @__PURE__ */ jsx24(VisuallyHidden, { live: "polite", children: state === "idle" ? "" : label })
5378
+ /* @__PURE__ */ jsx25(VisuallyHidden, { live: "polite", children: state === "idle" ? "" : label })
5354
5379
  ] });
5355
5380
  }
5356
5381
 
5357
5382
  // src/internal/FieldCommit.tsx
5358
- import * as React45 from "react";
5383
+ import * as React46 from "react";
5359
5384
 
5360
5385
  // src/internal/controlValue.ts
5361
5386
  function setControlValue(control, value) {
@@ -5370,36 +5395,36 @@ var FieldCommit_default = {
5370
5395
  };
5371
5396
 
5372
5397
  // src/internal/FieldCommit.tsx
5373
- import { Fragment as Fragment8, jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
5398
+ import { Fragment as Fragment8, jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
5374
5399
  var SAVED_MS = 1600;
5375
5400
  function useFieldCommit(controlRef, onCommit) {
5376
- const [state, setState] = React45.useState("idle");
5377
- const committed = React45.useRef(null);
5378
- const started = React45.useRef(0);
5379
- const settled = React45.useRef(0);
5380
- const pending2 = React45.useRef(0);
5381
- const onCommitRef = React45.useRef(onCommit);
5401
+ const [state, setState] = React46.useState("idle");
5402
+ const committed = React46.useRef(null);
5403
+ const started = React46.useRef(0);
5404
+ const settled = React46.useRef(0);
5405
+ const pending2 = React46.useRef(0);
5406
+ const onCommitRef = React46.useRef(onCommit);
5382
5407
  onCommitRef.current = onCommit;
5383
- React45.useLayoutEffect(() => {
5408
+ React46.useLayoutEffect(() => {
5384
5409
  if (committed.current === null && controlRef.current) {
5385
5410
  committed.current = controlRef.current.value;
5386
5411
  }
5387
5412
  }, [controlRef]);
5388
- React45.useEffect(() => {
5413
+ React46.useEffect(() => {
5389
5414
  if (state !== "saved") return;
5390
5415
  const timer = window.setTimeout(() => setState("idle"), SAVED_MS);
5391
5416
  return () => window.clearTimeout(timer);
5392
5417
  }, [state]);
5393
- const sync = React45.useCallback(() => {
5418
+ const sync = React46.useCallback(() => {
5394
5419
  if (pending2.current === 0 && controlRef.current) committed.current = controlRef.current.value;
5395
5420
  }, [controlRef]);
5396
- const revert = React45.useCallback(() => {
5421
+ const revert = React46.useCallback(() => {
5397
5422
  const control = controlRef.current;
5398
5423
  if (!control || committed.current === null || control.value === committed.current) return false;
5399
5424
  setControlValue(control, committed.current);
5400
5425
  return true;
5401
5426
  }, [controlRef]);
5402
- const commit = React45.useCallback(() => {
5427
+ const commit = React46.useCallback(() => {
5403
5428
  const control = controlRef.current;
5404
5429
  const handler = onCommitRef.current;
5405
5430
  if (!control || !handler) return;
@@ -5453,11 +5478,11 @@ function FieldCommitStatus({
5453
5478
  }) {
5454
5479
  const shown = state !== "idle";
5455
5480
  const presence = usePresence(shown, { exitDuration: "fast" });
5456
- const last = React45.useRef(state);
5481
+ const last = React46.useRef(state);
5457
5482
  if (shown) last.current = state;
5458
5483
  const glyph = shown ? state : last.current;
5459
5484
  return /* @__PURE__ */ jsxs14(Fragment8, { children: [
5460
- presence.mounted ? /* @__PURE__ */ jsx25(
5485
+ presence.mounted ? /* @__PURE__ */ jsx26(
5461
5486
  "span",
5462
5487
  {
5463
5488
  className: cx(
@@ -5468,21 +5493,21 @@ function FieldCommitStatus({
5468
5493
  "data-commit": glyph,
5469
5494
  "aria-hidden": "true",
5470
5495
  onAnimationEnd: presence.onExitEnd,
5471
- children: /* @__PURE__ */ jsx25(GlyphSwap, { children: glyph === "saved" ? /* @__PURE__ */ jsx25(Icon, { name: "action.check" }) : /* @__PURE__ */ jsx25(Spinner, { "aria-hidden": "true" }) })
5496
+ children: /* @__PURE__ */ jsx26(GlyphSwap, { children: glyph === "saved" ? /* @__PURE__ */ jsx26(Icon, { name: "action.check" }) : /* @__PURE__ */ jsx26(Spinner, { "aria-hidden": "true" }) })
5472
5497
  }
5473
5498
  ) : null,
5474
- /* @__PURE__ */ jsx25(VisuallyHidden, { live: "polite", children: state === "pending" ? labels.saving : state === "saved" ? labels.saved : "" })
5499
+ /* @__PURE__ */ jsx26(VisuallyHidden, { live: "polite", children: state === "pending" ? labels.saving : state === "saved" ? labels.saved : "" })
5475
5500
  ] });
5476
5501
  }
5477
5502
 
5478
5503
  // src/internal/FieldFrame.tsx
5479
- import * as React47 from "react";
5504
+ import * as React48 from "react";
5480
5505
 
5481
5506
  // src/internal/fieldCell.ts
5482
- import * as React46 from "react";
5483
- var FieldCellContext = React46.createContext(null);
5507
+ import * as React47 from "react";
5508
+ var FieldCellContext = React47.createContext(null);
5484
5509
  function useFieldCell() {
5485
- return React46.useContext(FieldCellContext);
5510
+ return React47.useContext(FieldCellContext);
5486
5511
  }
5487
5512
 
5488
5513
  // src/internal/FieldFrame.module.css
@@ -5500,7 +5525,7 @@ var FieldFrame_default = {
5500
5525
  };
5501
5526
 
5502
5527
  // src/internal/FieldFrame.tsx
5503
- import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
5528
+ import { jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
5504
5529
  var REQUIRED_ROLES = /* @__PURE__ */ new Set([
5505
5530
  "checkbox",
5506
5531
  "combobox",
@@ -5519,7 +5544,7 @@ function useFieldFrame(explicitId, {
5519
5544
  invalid,
5520
5545
  required
5521
5546
  }, ariaDescribedBy) {
5522
- const generated = React47.useId();
5547
+ const generated = React48.useId();
5523
5548
  const cell = useFieldCell();
5524
5549
  const controlId = explicitId ?? generated;
5525
5550
  const labelId = `${controlId}-label`;
@@ -5559,9 +5584,9 @@ function useFieldFrame(explicitId, {
5559
5584
  }
5560
5585
  function useErrorShake(invalid, error) {
5561
5586
  const key = !invalid ? null : typeof error === "string" || typeof error === "number" ? String(error) : "invalid";
5562
- const previous = React47.useRef(key);
5563
- const [count, setCount] = React47.useState(0);
5564
- React47.useEffect(() => {
5587
+ const previous = React48.useRef(key);
5588
+ const [count, setCount] = React48.useState(0);
5589
+ React48.useEffect(() => {
5565
5590
  if (key !== null && key !== previous.current) setCount((n) => n + 1);
5566
5591
  previous.current = key;
5567
5592
  }, [key]);
@@ -5569,7 +5594,7 @@ function useErrorShake(invalid, error) {
5569
5594
  return count % 2 ? "odd" : "even";
5570
5595
  }
5571
5596
  function useLeavingError(showError, error) {
5572
- const last = React47.useRef(error);
5597
+ const last = React48.useRef(error);
5573
5598
  if (showError) last.current = error;
5574
5599
  const presence = usePresence(showError, { exitDuration: "fast" });
5575
5600
  if (showError || !presence.mounted) return null;
@@ -5589,9 +5614,9 @@ function FieldSupport({
5589
5614
  }) {
5590
5615
  let text = null;
5591
5616
  if (ids.showError) {
5592
- text = /* @__PURE__ */ jsx26(Hint.Root, { id: ids.errorId, size, invalid: true, className: textClassName, children: error });
5617
+ text = /* @__PURE__ */ jsx27(Hint.Root, { id: ids.errorId, size, invalid: true, className: textClassName, children: error });
5593
5618
  } else if (leaving) {
5594
- text = /* @__PURE__ */ jsx26(
5619
+ text = /* @__PURE__ */ jsx27(
5595
5620
  Hint.Root,
5596
5621
  {
5597
5622
  size,
@@ -5603,7 +5628,7 @@ function FieldSupport({
5603
5628
  }
5604
5629
  );
5605
5630
  } else if (ids.showHint) {
5606
- text = /* @__PURE__ */ jsx26(
5631
+ text = /* @__PURE__ */ jsx27(
5607
5632
  Hint.Root,
5608
5633
  {
5609
5634
  id: ids.hintId,
@@ -5615,7 +5640,7 @@ function FieldSupport({
5615
5640
  }
5616
5641
  );
5617
5642
  }
5618
- return /* @__PURE__ */ jsx26("div", { className, "aria-live": live ? "polite" : void 0, children: text });
5643
+ return /* @__PURE__ */ jsx27("div", { className, "aria-live": live ? "polite" : void 0, children: text });
5619
5644
  }
5620
5645
  function FieldFrame({
5621
5646
  size,
@@ -5642,7 +5667,7 @@ function FieldFrame({
5642
5667
  const shake = useErrorShake(ids.invalid, error);
5643
5668
  const cell = useFieldCell();
5644
5669
  const shownLabel = hasContent(label) ? label : cell?.label;
5645
- const labelNode = hasContent(shownLabel) ? /* @__PURE__ */ jsx26(
5670
+ const labelNode = hasContent(shownLabel) ? /* @__PURE__ */ jsx27(
5646
5671
  Label.Root,
5647
5672
  {
5648
5673
  id: ids.labelId,
@@ -5674,7 +5699,7 @@ function FieldFrame({
5674
5699
  children: [
5675
5700
  labelEnd != null ? /* @__PURE__ */ jsxs15("div", { className: FieldFrame_default.labelRow, children: [
5676
5701
  labelNode,
5677
- /* @__PURE__ */ jsx26("span", { className: FieldFrame_default.labelEnd, children: labelEnd })
5702
+ /* @__PURE__ */ jsx27("span", { className: FieldFrame_default.labelEnd, children: labelEnd })
5678
5703
  ] }) : labelNode,
5679
5704
  /* @__PURE__ */ jsxs15("div", { className: cx(FieldFrame_default.body, enterMotion_default.shakeParts), "data-shake": shake, children: [
5680
5705
  children,
@@ -5689,7 +5714,7 @@ function FieldFrame({
5689
5714
  empty: !showSupport || void 0
5690
5715
  }),
5691
5716
  children: [
5692
- /* @__PURE__ */ jsx26(
5717
+ /* @__PURE__ */ jsx27(
5693
5718
  FieldSupport,
5694
5719
  {
5695
5720
  ids,
@@ -5708,7 +5733,7 @@ function FieldFrame({
5708
5733
  }
5709
5734
  )
5710
5735
  ] }),
5711
- requiredLabel && ids.required ? /* @__PURE__ */ jsx26(VisuallyHidden, { id: ids.requiredId, children: requiredLabel }) : null
5736
+ requiredLabel && ids.required ? /* @__PURE__ */ jsx27(VisuallyHidden, { id: ids.requiredId, children: requiredLabel }) : null
5712
5737
  ]
5713
5738
  }
5714
5739
  );
@@ -5723,18 +5748,18 @@ function FieldCounter({ current, max, size, label, className, ...rest }) {
5723
5748
  "data-invalid": current > max || void 0,
5724
5749
  children: [
5725
5750
  /* @__PURE__ */ jsxs15("span", { "aria-hidden": "true", children: [
5726
- /* @__PURE__ */ jsx26(RollingNumber, { children: current }),
5751
+ /* @__PURE__ */ jsx27(RollingNumber, { children: current }),
5727
5752
  "/",
5728
5753
  max
5729
5754
  ] }),
5730
- /* @__PURE__ */ jsx26(VisuallyHidden, { live: "polite", children: formatLabel(label, { current, max }) })
5755
+ /* @__PURE__ */ jsx27(VisuallyHidden, { live: "polite", children: formatLabel(label, { current, max }) })
5731
5756
  ]
5732
5757
  }
5733
5758
  );
5734
5759
  }
5735
5760
 
5736
5761
  // src/internal/listbox.ts
5737
- import * as React48 from "react";
5762
+ import * as React49 from "react";
5738
5763
 
5739
5764
  // src/internal/rovingFocus.ts
5740
5765
  var PREV = {
@@ -5802,11 +5827,11 @@ function createStore(initial) {
5802
5827
  };
5803
5828
  }
5804
5829
  function useCreateStore(initial) {
5805
- return React48.useState(() => createStore(initial))[0];
5830
+ return React49.useState(() => createStore(initial))[0];
5806
5831
  }
5807
5832
  function useStoreSlice(store, select) {
5808
5833
  const read = () => select(store.get());
5809
- return React48.useSyncExternalStore(store.subscribe, read, read);
5834
+ return React49.useSyncExternalStore(store.subscribe, read, read);
5810
5835
  }
5811
5836
  function createListboxRegistry() {
5812
5837
  const entries = /* @__PURE__ */ new Map();
@@ -5863,19 +5888,19 @@ function createListboxRegistry() {
5863
5888
  };
5864
5889
  }
5865
5890
  function useListboxRegistry() {
5866
- return React48.useState(createListboxRegistry)[0];
5891
+ return React49.useState(createListboxRegistry)[0];
5867
5892
  }
5868
5893
  function useListboxView(registry, query = "", filter = true) {
5869
5894
  const read = () => registry.view(query, filter);
5870
- return React48.useSyncExternalStore(registry.subscribe, read, read);
5895
+ return React49.useSyncExternalStore(registry.subscribe, read, read);
5871
5896
  }
5872
5897
  function useListboxItem(registry, id, item, nodeRef) {
5873
- const activateRef = React48.useRef(item.onActivate);
5874
- React48.useLayoutEffect(() => {
5898
+ const activateRef = React49.useRef(item.onActivate);
5899
+ React49.useLayoutEffect(() => {
5875
5900
  activateRef.current = item.onActivate;
5876
5901
  });
5877
5902
  const { label, haystack, disabled = false, persistent = false } = item;
5878
- React48.useLayoutEffect(
5903
+ React49.useLayoutEffect(
5879
5904
  () => registry.register(
5880
5905
  id,
5881
5906
  { label, haystack, disabled, persistent, onActivate: () => activateRef.current() },
@@ -5908,10 +5933,10 @@ function handleListboxKeyDown(event, { ids, highlight, activate }) {
5908
5933
  }
5909
5934
  var TYPEAHEAD_RESET_MS = 500;
5910
5935
  function useTypeahead() {
5911
- const state = React48.useRef({ buffer: "", timer: 0 });
5912
- React48.useEffect(() => () => window.clearTimeout(state.current.timer), []);
5913
- const isTyping = React48.useCallback(() => state.current.buffer !== "", []);
5914
- const find = React48.useCallback(
5936
+ const state = React49.useRef({ buffer: "", timer: 0 });
5937
+ React49.useEffect(() => () => window.clearTimeout(state.current.timer), []);
5938
+ const isTyping = React49.useCallback(() => state.current.buffer !== "", []);
5939
+ const find = React49.useCallback(
5915
5940
  (key, ids, highlighted, labelOf) => {
5916
5941
  const s = state.current;
5917
5942
  window.clearTimeout(s.timer);
@@ -5946,10 +5971,10 @@ var Input_default = {
5946
5971
  };
5947
5972
 
5948
5973
  // src/components/input/inputSuggestions.tsx
5949
- import * as React50 from "react";
5974
+ import * as React51 from "react";
5950
5975
 
5951
5976
  // src/internal/HighlightMatch.tsx
5952
- import * as React49 from "react";
5977
+ import * as React50 from "react";
5953
5978
 
5954
5979
  // src/internal/HighlightMatch.module.css
5955
5980
  var HighlightMatch_default = {
@@ -5957,7 +5982,7 @@ var HighlightMatch_default = {
5957
5982
  };
5958
5983
 
5959
5984
  // src/internal/HighlightMatch.tsx
5960
- import { Fragment as Fragment9, jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
5985
+ import { Fragment as Fragment9, jsx as jsx28, jsxs as jsxs16 } from "react/jsx-runtime";
5961
5986
  function matchIndex(text, query) {
5962
5987
  if (!query) return -1;
5963
5988
  return text.toLowerCase().indexOf(query.toLowerCase());
@@ -5969,11 +5994,11 @@ function HighlightMatch({
5969
5994
  }) {
5970
5995
  const q = query.trim();
5971
5996
  const at = matchIndex(text, q);
5972
- if (at < 0) return /* @__PURE__ */ jsx27(Fragment9, { children: text });
5997
+ if (at < 0) return /* @__PURE__ */ jsx28(Fragment9, { children: text });
5973
5998
  if (!all) {
5974
5999
  return /* @__PURE__ */ jsxs16("span", { children: [
5975
6000
  text.slice(0, at),
5976
- /* @__PURE__ */ jsx27("mark", { className: HighlightMatch_default.match, children: text.slice(at, at + q.length) }),
6001
+ /* @__PURE__ */ jsx28("mark", { className: HighlightMatch_default.match, children: text.slice(at, at + q.length) }),
5977
6002
  text.slice(at + q.length)
5978
6003
  ] });
5979
6004
  }
@@ -5984,18 +6009,18 @@ function HighlightMatch({
5984
6009
  for (let found = at; found >= 0; found = lower.indexOf(needle, from)) {
5985
6010
  if (found > from) pieces.push(text.slice(from, found));
5986
6011
  pieces.push(
5987
- /* @__PURE__ */ jsx27("mark", { className: HighlightMatch_default.match, children: text.slice(found, found + q.length) }, found)
6012
+ /* @__PURE__ */ jsx28("mark", { className: HighlightMatch_default.match, children: text.slice(found, found + q.length) }, found)
5988
6013
  );
5989
6014
  from = found + q.length;
5990
6015
  }
5991
6016
  if (from < text.length) pieces.push(text.slice(from));
5992
- return /* @__PURE__ */ jsx27("span", { children: pieces });
6017
+ return /* @__PURE__ */ jsx28("span", { children: pieces });
5993
6018
  }
5994
6019
  function highlightChildren(children, query) {
5995
6020
  if (!query.trim()) return children;
5996
- return React49.Children.map(
6021
+ return React50.Children.map(
5997
6022
  children,
5998
- (child) => typeof child === "string" || typeof child === "number" ? /* @__PURE__ */ jsx27(HighlightMatch, { text: String(child), query }) : child
6023
+ (child) => typeof child === "string" || typeof child === "number" ? /* @__PURE__ */ jsx28(HighlightMatch, { text: String(child), query }) : child
5999
6024
  );
6000
6025
  }
6001
6026
 
@@ -6021,26 +6046,26 @@ var menu_default = {
6021
6046
  };
6022
6047
 
6023
6048
  // src/components/input/inputSuggestions.tsx
6024
- import { jsx as jsx28 } from "react/jsx-runtime";
6049
+ import { jsx as jsx29 } from "react/jsx-runtime";
6025
6050
  function matchesOf(items, text) {
6026
6051
  const query = text.trim().toLocaleLowerCase();
6027
6052
  const found = items.filter((item) => item.toLocaleLowerCase().includes(query));
6028
6053
  return found.length === 1 && found[0]?.toLocaleLowerCase() === query ? [] : found;
6029
6054
  }
6030
6055
  function useInputSuggestions(items, inputRef, listboxId, labelledBy, { closeOnEscape, closeOnOutsideClick }) {
6031
- const [open, setOpen] = React50.useState(false);
6032
- const [query, setQuery] = React50.useState("");
6056
+ const [open, setOpen] = React51.useState(false);
6057
+ const [query, setQuery] = React51.useState("");
6033
6058
  const highlight = useCreateStore(void 0);
6034
- const anchorRef = React50.useRef(null);
6035
- const pickingRef = React50.useRef(false);
6059
+ const anchorRef = React51.useRef(null);
6060
+ const pickingRef = React51.useRef(false);
6036
6061
  const list = items ?? [];
6037
- const matches = React50.useMemo(() => items ? matchesOf(items, query) : [], [items, query]);
6062
+ const matches = React51.useMemo(() => items ? matchesOf(items, query) : [], [items, query]);
6038
6063
  const shown = open && matches.length > 0;
6039
- React50.useEffect(() => {
6064
+ React51.useEffect(() => {
6040
6065
  const current = highlight.get();
6041
6066
  if (current !== void 0 && !matches.includes(current)) highlight.set(void 0);
6042
6067
  }, [matches, highlight]);
6043
- const close = React50.useCallback(() => {
6068
+ const close = React51.useCallback(() => {
6044
6069
  setOpen(false);
6045
6070
  highlight.set(void 0);
6046
6071
  }, [highlight]);
@@ -6132,7 +6157,7 @@ function InputSuggestionList({
6132
6157
  closeOnOutsideClick: suggest.closeOnOutsideClick,
6133
6158
  matchAnchorWidth: true
6134
6159
  });
6135
- return /* @__PURE__ */ jsx28(
6160
+ return /* @__PURE__ */ jsx29(
6136
6161
  FloatingPanel,
6137
6162
  {
6138
6163
  floating,
@@ -6140,7 +6165,7 @@ function InputSuggestionList({
6140
6165
  scroll: true,
6141
6166
  width: "trigger",
6142
6167
  className: cx(fieldTierClass, menu_default.tier, menu_default.menu),
6143
- children: /* @__PURE__ */ jsx28("div", { id: suggest.listboxId, role: "listbox", "aria-labelledby": suggest.labelledBy, children: suggest.matches.map((item) => /* @__PURE__ */ jsx28(SuggestionOption, { item, suggest }, item)) })
6168
+ children: /* @__PURE__ */ jsx29("div", { id: suggest.listboxId, role: "listbox", "aria-labelledby": suggest.labelledBy, children: suggest.matches.map((item) => /* @__PURE__ */ jsx29(SuggestionOption, { item, suggest }, item)) })
6144
6169
  }
6145
6170
  );
6146
6171
  }
@@ -6148,7 +6173,7 @@ function SuggestionOption({ item, suggest }) {
6148
6173
  const highlighted = useStoreSlice(suggest.highlight, (value) => value === item);
6149
6174
  return (
6150
6175
  // biome-ignore lint/a11y/useKeyWithClickEvents: the keyboard stays in the field (`aria-activedescendant`)
6151
- /* @__PURE__ */ jsx28(
6176
+ /* @__PURE__ */ jsx29(
6152
6177
  "div",
6153
6178
  {
6154
6179
  id: optionDomId(suggest.listboxId, item),
@@ -6162,14 +6187,14 @@ function SuggestionOption({ item, suggest }) {
6162
6187
  if (!highlighted) suggest.highlight.set(item);
6163
6188
  },
6164
6189
  onClick: () => suggest.pick(item),
6165
- children: /* @__PURE__ */ jsx28(HighlightMatch, { text: item, query: suggest.query })
6190
+ children: /* @__PURE__ */ jsx29(HighlightMatch, { text: item, query: suggest.query })
6166
6191
  }
6167
6192
  )
6168
6193
  );
6169
6194
  }
6170
6195
 
6171
6196
  // src/components/input/Input.tsx
6172
- import { Fragment as Fragment10, jsx as jsx29, jsxs as jsxs17 } from "react/jsx-runtime";
6197
+ import { Fragment as Fragment10, jsx as jsx30, jsxs as jsxs17 } from "react/jsx-runtime";
6173
6198
  var INPUT_LABELS = {
6174
6199
  optional: "\u043D\u0435\u043E\u0431\u044F\u0437\u0430\u0442\u0435\u043B\u044C\u043D\u043E",
6175
6200
  clear: "\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C",
@@ -6195,7 +6220,7 @@ var STRENGTH_TONES = {
6195
6220
  4: "success"
6196
6221
  };
6197
6222
  var [InputProvider, useInputContext] = createComponentContext("Input");
6198
- var InputSegmentContext = React51.createContext(false);
6223
+ var InputSegmentContext = React52.createContext(false);
6199
6224
  var NO_HIGHLIGHT = createStore(void 0);
6200
6225
  function InputRoot({
6201
6226
  size: sizeProp,
@@ -6223,18 +6248,18 @@ function InputRoot({
6223
6248
  className,
6224
6249
  ...rest
6225
6250
  }) {
6226
- const [strengthValue, setStrengthValue] = React51.useState("");
6251
+ const [strengthValue, setStrengthValue] = React52.useState("");
6227
6252
  const tier = useHostTier(sizeProp);
6228
6253
  const { size } = tier;
6229
6254
  const labels = useLabels(INPUT_LABELS, labelsProp);
6230
6255
  const level = strength ? getStrength(strengthValue) : 0;
6231
6256
  const tooWeak = level > 0 && minStrength !== void 0 && level < minStrength;
6232
- const [weakReported, setWeakReported] = React51.useState(false);
6233
- const reportInvalid = React51.useCallback(() => setWeakReported(true), []);
6257
+ const [weakReported, setWeakReported] = React52.useState(false);
6258
+ const reportInvalid = React52.useCallback(() => setWeakReported(true), []);
6234
6259
  const shownError = error ?? (weakReported && tooWeak ? labels.strengthTooWeak : void 0);
6235
6260
  const ids = useFieldFrame(id, { label, hint, error: shownError, invalid, required });
6236
6261
  const { invalid: isInvalid, controlId: inputId, describedBy, required: isRequired } = ids;
6237
- const inputRef = React51.useRef(null);
6262
+ const inputRef = React52.useRef(null);
6238
6263
  const suggest = useInputSuggestions(
6239
6264
  suggestions,
6240
6265
  inputRef,
@@ -6244,14 +6269,14 @@ function InputRoot({
6244
6269
  );
6245
6270
  const commit = useFieldCommit(inputRef, onCommit);
6246
6271
  const hasCommit = onCommit !== void 0;
6247
- const [revealed, setRevealed] = React51.useState(false);
6248
- const selectionRef = React51.useRef(null);
6249
- const mountedRef = React51.useRef(false);
6250
- React51.useEffect(() => {
6272
+ const [revealed, setRevealed] = React52.useState(false);
6273
+ const selectionRef = React52.useRef(null);
6274
+ const mountedRef = React52.useRef(false);
6275
+ React52.useEffect(() => {
6251
6276
  mountedRef.current = true;
6252
6277
  }, []);
6253
- const [affixes, setAffixes] = React51.useState([]);
6254
- const addAffix = React51.useCallback((affixId) => {
6278
+ const [affixes, setAffixes] = React52.useState([]);
6279
+ const addAffix = React52.useCallback((affixId) => {
6255
6280
  setAffixes((current) => [...current, affixId]);
6256
6281
  return () => setAffixes((current) => current.filter((item) => item !== affixId));
6257
6282
  }, []);
@@ -6259,7 +6284,7 @@ function InputRoot({
6259
6284
  const isValid = Boolean(valid) && !isInvalid;
6260
6285
  const validId = valid === void 0 ? "" : `${inputId}-valid`;
6261
6286
  const customValidity = minStrength === void 0 ? null : tooWeak ? labels.strengthTooWeak : "";
6262
- const contextValue = React51.useMemo(
6287
+ const contextValue = React52.useMemo(
6263
6288
  () => ({
6264
6289
  size,
6265
6290
  invalid: isInvalid,
@@ -6307,7 +6332,7 @@ function InputRoot({
6307
6332
  );
6308
6333
  const levelTone = tooWeak ? "danger" : level ? STRENGTH_TONES[level] : void 0;
6309
6334
  const levelWord = level ? [labels.strengthWeak, labels.strengthEasy, labels.strengthMedium, labels.strengthHard][level - 1] : "";
6310
- return /* @__PURE__ */ jsx29(InputProvider, { value: contextValue, children: tier.provide(
6335
+ return /* @__PURE__ */ jsx30(InputProvider, { value: contextValue, children: tier.provide(
6311
6336
  /* @__PURE__ */ jsxs17(
6312
6337
  FieldFrame,
6313
6338
  {
@@ -6321,15 +6346,15 @@ function InputRoot({
6321
6346
  hintTone,
6322
6347
  error: shownError,
6323
6348
  counter: strength ? /* @__PURE__ */ jsxs17(Fragment10, { children: [
6324
- /* @__PURE__ */ jsx29(
6349
+ /* @__PURE__ */ jsx30(
6325
6350
  "span",
6326
6351
  {
6327
6352
  className: cx(textTone_default.tone, Input_default.strengthWord),
6328
6353
  "data-tone": levelTone,
6329
6354
  "aria-live": "polite",
6330
6355
  children: levelWord ? /* @__PURE__ */ jsxs17(Fragment10, { children: [
6331
- /* @__PURE__ */ jsx29(VisuallyHidden, { children: `${labels.strength}: ` }),
6332
- /* @__PURE__ */ jsx29(MorphText, { children: levelWord })
6356
+ /* @__PURE__ */ jsx30(VisuallyHidden, { children: `${labels.strength}: ` }),
6357
+ /* @__PURE__ */ jsx30(MorphText, { children: levelWord })
6333
6358
  ] }) : null
6334
6359
  }
6335
6360
  ),
@@ -6340,7 +6365,7 @@ function InputRoot({
6340
6365
  className: cx(fieldTierClass, Input_default.root, className),
6341
6366
  children: [
6342
6367
  children,
6343
- strength ? /* @__PURE__ */ jsx29(
6368
+ strength ? /* @__PURE__ */ jsx30(
6344
6369
  ProgressBar,
6345
6370
  {
6346
6371
  steps: true,
@@ -6373,11 +6398,11 @@ function InputWrapper({ children, className, ref, ...rest }) {
6373
6398
  "focus-ring": focusRing
6374
6399
  }),
6375
6400
  children: [
6376
- /* @__PURE__ */ jsx29(InputSegmentContext, { value: true, children }),
6377
- valid ? /* @__PURE__ */ jsx29(InputValidMark, {}) : null,
6378
- validId ? /* @__PURE__ */ jsx29(VisuallyHidden, { id: validId, live: "polite", children: valid ? labels.valid : "" }) : null,
6379
- hasCommit ? /* @__PURE__ */ jsx29(FieldCommitStatus, { state: commit.state, labels, className: Input_default.status }) : null,
6380
- suggest ? /* @__PURE__ */ jsx29(InputSuggestionList, { suggest, size }) : null
6401
+ /* @__PURE__ */ jsx30(InputSegmentContext, { value: true, children }),
6402
+ valid ? /* @__PURE__ */ jsx30(InputValidMark, {}) : null,
6403
+ validId ? /* @__PURE__ */ jsx30(VisuallyHidden, { id: validId, live: "polite", children: valid ? labels.valid : "" }) : null,
6404
+ hasCommit ? /* @__PURE__ */ jsx30(FieldCommitStatus, { state: commit.state, labels, className: Input_default.status }) : null,
6405
+ suggest ? /* @__PURE__ */ jsx30(InputSuggestionList, { suggest, size }) : null
6381
6406
  ]
6382
6407
  }
6383
6408
  );
@@ -6385,21 +6410,21 @@ function InputWrapper({ children, className, ref, ...rest }) {
6385
6410
  InputWrapper.displayName = "Input.Wrapper";
6386
6411
  function InputValidMark() {
6387
6412
  const { mountedRef } = useInputContext();
6388
- const [arrived] = React51.useState(() => mountedRef.current);
6389
- const [drawn, setDrawn] = React51.useState(!arrived);
6390
- React51.useEffect(() => {
6413
+ const [arrived] = React52.useState(() => mountedRef.current);
6414
+ const [drawn, setDrawn] = React52.useState(!arrived);
6415
+ React52.useEffect(() => {
6391
6416
  if (drawn) return;
6392
6417
  const frame2 = requestAnimationFrame(() => setDrawn(true));
6393
6418
  return () => cancelAnimationFrame(frame2);
6394
6419
  }, [drawn]);
6395
6420
  const presence = usePartPresence({ axis: "inline" });
6396
- return /* @__PURE__ */ jsx29(
6421
+ return /* @__PURE__ */ jsx30(
6397
6422
  "span",
6398
6423
  {
6399
6424
  ref: presence.ref,
6400
6425
  className: cx(iconSlotClass, Input_default.validMark, arrived && enterMotion_default.enter),
6401
6426
  "aria-hidden": "true",
6402
- children: /* @__PURE__ */ jsx29(Icon, { name: "action.check", drawn })
6427
+ children: /* @__PURE__ */ jsx30(Icon, { name: "action.check", drawn })
6403
6428
  }
6404
6429
  );
6405
6430
  }
@@ -6409,6 +6434,7 @@ function InputField({
6409
6434
  required,
6410
6435
  disabled: disabledProp,
6411
6436
  type,
6437
+ autoComplete,
6412
6438
  onChange,
6413
6439
  onValueChange,
6414
6440
  onFocus,
@@ -6440,8 +6466,9 @@ function InputField({
6440
6466
  const setRefs = useMergedRefs(inputRef, ref);
6441
6467
  const highlighted = useStoreSlice(suggest?.highlight ?? NO_HIGHLIGHT, (value) => value);
6442
6468
  const disabled = useInheritedDisabled(disabledProp);
6469
+ const autofill = useAutofill(autoComplete);
6443
6470
  const fieldType = type === "password" && revealed ? "text" : type;
6444
- React51.useLayoutEffect(() => {
6471
+ React52.useLayoutEffect(() => {
6445
6472
  const selection = selectionRef.current;
6446
6473
  const input = inputRef.current;
6447
6474
  if (!selection || !input || input.type !== (fieldType ?? "text")) return;
@@ -6449,16 +6476,16 @@ function InputField({
6449
6476
  input.setSelectionRange(selection[0], selection[1]);
6450
6477
  }, [fieldType, selectionRef, inputRef]);
6451
6478
  const controlled = rest.value;
6452
- React51.useEffect(() => {
6479
+ React52.useEffect(() => {
6453
6480
  if (!reportValue) return;
6454
6481
  if (controlled !== void 0) reportValue(String(controlled));
6455
6482
  else if (inputRef.current) reportValue(inputRef.current.value);
6456
6483
  }, [reportValue, controlled, inputRef]);
6457
- React51.useEffect(() => {
6484
+ React52.useEffect(() => {
6458
6485
  if (customValidity !== null) inputRef.current?.setCustomValidity(customValidity);
6459
6486
  }, [customValidity, inputRef]);
6460
6487
  const resolvedDescribedBy = [ariaDescribedBy, affixIds, describedBy, valid ? validId : void 0].filter(Boolean).join(" ") || void 0;
6461
- return /* @__PURE__ */ jsx29(
6488
+ return /* @__PURE__ */ jsx30(
6462
6489
  "input",
6463
6490
  {
6464
6491
  ...rest,
@@ -6471,9 +6498,11 @@ function InputField({
6471
6498
  required: required ?? (requiredCtx || void 0),
6472
6499
  type: fieldType,
6473
6500
  "aria-busy": commit.state === "pending" || void 0,
6501
+ ...autofill,
6474
6502
  ...suggest ? {
6503
+ // The kit's own list: no browser or password-manager list on top of it.
6504
+ ...AUTOFILL_OFF,
6475
6505
  role: "combobox",
6476
- autoComplete: "off",
6477
6506
  "aria-autocomplete": "list",
6478
6507
  "aria-expanded": suggest.shown,
6479
6508
  "aria-controls": suggest.shown ? suggest.listboxId : void 0,
@@ -6514,7 +6543,7 @@ function InputField({
6514
6543
  }
6515
6544
  InputField.displayName = "Input.Field";
6516
6545
  function InputIcon({ side, children, className, ...rest }) {
6517
- return /* @__PURE__ */ jsx29(
6546
+ return /* @__PURE__ */ jsx30(
6518
6547
  "span",
6519
6548
  {
6520
6549
  ...rest,
@@ -6528,12 +6557,12 @@ function InputIcon({ side, children, className, ...rest }) {
6528
6557
  InputIcon.displayName = "Input.Icon";
6529
6558
  function useAffixDescription(id, spokenText) {
6530
6559
  const { addAffix } = useInputContext();
6531
- const generated = React51.useId();
6560
+ const generated = React52.useId();
6532
6561
  const target = spokenText ? generated : id ?? generated;
6533
- React51.useLayoutEffect(() => addAffix(target), [addAffix, target]);
6562
+ React52.useLayoutEffect(() => addAffix(target), [addAffix, target]);
6534
6563
  return spokenText ? {
6535
6564
  id,
6536
- spoken: /* @__PURE__ */ jsx29("span", { id: generated, hidden: true, children: spokenText })
6565
+ spoken: /* @__PURE__ */ jsx30("span", { id: generated, hidden: true, children: spokenText })
6537
6566
  } : { id: target, spoken: null };
6538
6567
  }
6539
6568
  function InputAffix({
@@ -6588,10 +6617,10 @@ function InputInlineAffix({
6588
6617
  InputInlineAffix.displayName = "Input.InlineAffix";
6589
6618
  function InputClearButton({ onClick: onClick2, className, ref, ...rest }) {
6590
6619
  const { inputId, inputRef, labels, mountedRef } = useInputContext();
6591
- const [arrived] = React51.useState(() => mountedRef.current);
6620
+ const [arrived] = React52.useState(() => mountedRef.current);
6592
6621
  const presence = usePartPresence({ axis: "inline" });
6593
6622
  const setRefs = useMergedRefs(presence.ref, ref);
6594
- return /* @__PURE__ */ jsx29(
6623
+ return /* @__PURE__ */ jsx30(
6595
6624
  FieldActionButton,
6596
6625
  {
6597
6626
  tooltip: false,
@@ -6604,18 +6633,18 @@ function InputClearButton({ onClick: onClick2, className, ref, ...rest }) {
6604
6633
  onClick2?.(event);
6605
6634
  if (!event.defaultPrevented) inputRef.current?.focus();
6606
6635
  },
6607
- children: /* @__PURE__ */ jsx29(Icon, { name: "action.close" })
6636
+ children: /* @__PURE__ */ jsx30(Icon, { name: "action.close" })
6608
6637
  }
6609
6638
  );
6610
6639
  }
6611
6640
  InputClearButton.displayName = "Input.ClearButton";
6612
6641
  function InputAction(props) {
6613
- return /* @__PURE__ */ jsx29(FieldActionButton, { ...props });
6642
+ return /* @__PURE__ */ jsx30(FieldActionButton, { ...props });
6614
6643
  }
6615
6644
  InputAction.displayName = "Input.Action";
6616
6645
  function InputCopyButton({ value, ...rest }) {
6617
6646
  const { inputRef, labels } = useInputContext();
6618
- return /* @__PURE__ */ jsx29(
6647
+ return /* @__PURE__ */ jsx30(
6619
6648
  FieldCopyButton,
6620
6649
  {
6621
6650
  ...rest,
@@ -6628,7 +6657,7 @@ InputCopyButton.displayName = "Input.CopyButton";
6628
6657
  function InputRevealButton({ onClick: onClick2, onMouseDown, ref, ...rest }) {
6629
6658
  const { inputId, inputRef, labels, revealed, setRevealed, selectionRef } = useInputContext();
6630
6659
  const glyph = revealed ? "field.password.hide" : "field.password.show";
6631
- return /* @__PURE__ */ jsx29(
6660
+ return /* @__PURE__ */ jsx30(
6632
6661
  FieldActionButton,
6633
6662
  {
6634
6663
  tooltip: false,
@@ -6652,14 +6681,14 @@ function InputRevealButton({ onClick: onClick2, onMouseDown, ref, ...rest }) {
6652
6681
  }
6653
6682
  setRevealed((shown) => !shown);
6654
6683
  },
6655
- children: /* @__PURE__ */ jsx29(Icon, { name: glyph })
6684
+ children: /* @__PURE__ */ jsx30(Icon, { name: glyph })
6656
6685
  }
6657
6686
  );
6658
6687
  }
6659
6688
  InputRevealButton.displayName = "Input.RevealButton";
6660
6689
  function InputCounter(props) {
6661
6690
  const { size, labels } = useInputContext();
6662
- return /* @__PURE__ */ jsx29(FieldCounter, { ...props, size, label: labels.counter });
6691
+ return /* @__PURE__ */ jsx30(FieldCounter, { ...props, size, label: labels.counter });
6663
6692
  }
6664
6693
  InputCounter.displayName = "Input.Counter";
6665
6694
  var Input = {
@@ -6677,7 +6706,7 @@ var Input = {
6677
6706
  };
6678
6707
 
6679
6708
  // src/components/empty-page/EmptyPage.tsx
6680
- import * as React52 from "react";
6709
+ import * as React53 from "react";
6681
6710
 
6682
6711
  // src/components/empty-page/EmptyPage.module.css
6683
6712
  var EmptyPage_default = {
@@ -6689,7 +6718,7 @@ var EmptyPage_default = {
6689
6718
  };
6690
6719
 
6691
6720
  // src/components/empty-page/EmptyPage.tsx
6692
- import { jsx as jsx30, jsxs as jsxs18 } from "react/jsx-runtime";
6721
+ import { jsx as jsx31, jsxs as jsxs18 } from "react/jsx-runtime";
6693
6722
  var EMPTY_PAGE_LABELS = { retry: "\u041F\u043E\u0432\u0442\u043E\u0440\u0438\u0442\u044C" };
6694
6723
  var TITLE_ROLE = {
6695
6724
  xs: textRole_default.titleS,
@@ -6705,7 +6734,7 @@ var DESCRIPTION_ROLE = {
6705
6734
  l: textRole_default.bodyM,
6706
6735
  xl: textRole_default.bodyL
6707
6736
  };
6708
- var EmptyPageContext = React52.createContext({
6737
+ var EmptyPageContext = React53.createContext({
6709
6738
  tone: "neutral",
6710
6739
  size: "m",
6711
6740
  compact: false,
@@ -6732,7 +6761,7 @@ function EmptyPageRoot({
6732
6761
  labels: mergedLabels
6733
6762
  };
6734
6763
  return provide(
6735
- /* @__PURE__ */ jsx30(
6764
+ /* @__PURE__ */ jsx31(
6736
6765
  "div",
6737
6766
  {
6738
6767
  className: cx(EmptyPage_default.root, appear.entering && enterMotion_default.enterBaseChildren, className),
@@ -6744,17 +6773,17 @@ function EmptyPageRoot({
6744
6773
  layout: layout === "default" ? void 0 : layout,
6745
6774
  tone: tone === "neutral" ? void 0 : tone
6746
6775
  }),
6747
- children: /* @__PURE__ */ jsx30(EmptyPageContext.Provider, { value: context, children })
6776
+ children: /* @__PURE__ */ jsx31(EmptyPageContext.Provider, { value: context, children })
6748
6777
  }
6749
6778
  )
6750
6779
  );
6751
6780
  }
6752
6781
  EmptyPageRoot.displayName = "EmptyPage.Root";
6753
6782
  function EmptyPageIcon({ tone: toneProp, className, ...rest }) {
6754
- const { tone: rootTone, size, compact } = React52.useContext(EmptyPageContext);
6783
+ const { tone: rootTone, size, compact } = React53.useContext(EmptyPageContext);
6755
6784
  return (
6756
6785
  // The tile is decorative: the title says what the state is.
6757
- /* @__PURE__ */ jsx30(
6786
+ /* @__PURE__ */ jsx31(
6758
6787
  "div",
6759
6788
  {
6760
6789
  "aria-hidden": "true",
@@ -6768,8 +6797,8 @@ function EmptyPageIcon({ tone: toneProp, className, ...rest }) {
6768
6797
  }
6769
6798
  EmptyPageIcon.displayName = "EmptyPage.Icon";
6770
6799
  function EmptyPageTitle({ as: Tag = "h2", className, ref, ...rest }) {
6771
- const { size, compact } = React52.useContext(EmptyPageContext);
6772
- return /* @__PURE__ */ jsx30(
6800
+ const { size, compact } = React53.useContext(EmptyPageContext);
6801
+ return /* @__PURE__ */ jsx31(
6773
6802
  Tag,
6774
6803
  {
6775
6804
  ref,
@@ -6780,8 +6809,8 @@ function EmptyPageTitle({ as: Tag = "h2", className, ref, ...rest }) {
6780
6809
  }
6781
6810
  EmptyPageTitle.displayName = "EmptyPage.Title";
6782
6811
  function EmptyPageDescription({ className, ...rest }) {
6783
- const { size, compact } = React52.useContext(EmptyPageContext);
6784
- return /* @__PURE__ */ jsx30(
6812
+ const { size, compact } = React53.useContext(EmptyPageContext);
6813
+ return /* @__PURE__ */ jsx31(
6785
6814
  "p",
6786
6815
  {
6787
6816
  className: cx(
@@ -6795,11 +6824,11 @@ function EmptyPageDescription({ className, ...rest }) {
6795
6824
  }
6796
6825
  EmptyPageDescription.displayName = "EmptyPage.Description";
6797
6826
  function EmptyPageActions({ className, ...rest }) {
6798
- return /* @__PURE__ */ jsx30("div", { className: cx(EmptyPage_default.actions, className), ...rest });
6827
+ return /* @__PURE__ */ jsx31("div", { className: cx(EmptyPage_default.actions, className), ...rest });
6799
6828
  }
6800
6829
  EmptyPageActions.displayName = "EmptyPage.Actions";
6801
6830
  function EmptyPageRetryButton({ onRetry, children, disabled, ...rest }) {
6802
- const { labels } = React52.useContext(EmptyPageContext);
6831
+ const { labels } = React53.useContext(EmptyPageContext);
6803
6832
  const retry = usePendingAction(onRetry);
6804
6833
  return /* @__PURE__ */ jsxs18(
6805
6834
  Button.Root,
@@ -6811,7 +6840,7 @@ function EmptyPageRetryButton({ onRetry, children, disabled, ...rest }) {
6811
6840
  disabled,
6812
6841
  onClick: () => retry.run?.(),
6813
6842
  children: [
6814
- /* @__PURE__ */ jsx30(Button.Icon, { children: /* @__PURE__ */ jsx30(Icon, { name: "action.refresh" }) }),
6843
+ /* @__PURE__ */ jsx31(Button.Icon, { children: /* @__PURE__ */ jsx31(Icon, { name: "action.refresh" }) }),
6815
6844
  children ?? labels.retry
6816
6845
  ]
6817
6846
  }
@@ -6828,21 +6857,21 @@ var EmptyPage = {
6828
6857
  };
6829
6858
 
6830
6859
  // src/components/avatar/Avatar.tsx
6831
- import * as React56 from "react";
6860
+ import * as React57 from "react";
6832
6861
 
6833
6862
  // src/internal/imageSlot.tsx
6834
- import * as React54 from "react";
6863
+ import * as React55 from "react";
6835
6864
 
6836
6865
  // src/hooks/useImageStatus.ts
6837
- import * as React53 from "react";
6866
+ import * as React54 from "react";
6838
6867
  function useImageStatus(report, { onLoad, onError, decode = false } = {}) {
6839
- const [status, setStatus] = React53.useState("loading");
6840
- const settled = React53.useRef(false);
6841
- React53.useLayoutEffect(() => {
6868
+ const [status, setStatus] = React54.useState("loading");
6869
+ const settled = React54.useRef(false);
6870
+ React54.useLayoutEffect(() => {
6842
6871
  report("loading");
6843
6872
  return () => report("idle");
6844
6873
  }, [report]);
6845
- const loaded = React53.useCallback(
6874
+ const loaded = React54.useCallback(
6846
6875
  (element, event) => {
6847
6876
  const settle2 = () => {
6848
6877
  if (decode && (settled.current || !element.isConnected)) return;
@@ -6859,11 +6888,11 @@ function useImageStatus(report, { onLoad, onError, decode = false } = {}) {
6859
6888
  },
6860
6889
  [decode, onLoad, report]
6861
6890
  );
6862
- const handleLoad = React53.useCallback(
6891
+ const handleLoad = React54.useCallback(
6863
6892
  (event) => loaded(event.currentTarget, event),
6864
6893
  [loaded]
6865
6894
  );
6866
- const handleError = React53.useCallback(
6895
+ const handleError = React54.useCallback(
6867
6896
  (event) => {
6868
6897
  setStatus("error");
6869
6898
  report("error");
@@ -6871,7 +6900,7 @@ function useImageStatus(report, { onLoad, onError, decode = false } = {}) {
6871
6900
  },
6872
6901
  [onError, report]
6873
6902
  );
6874
- const ref = React53.useCallback(
6903
+ const ref = React54.useCallback(
6875
6904
  (element) => {
6876
6905
  if (decode && element instanceof HTMLImageElement && element.complete && element.naturalWidth > 0) {
6877
6906
  loaded(element, null);
@@ -6883,18 +6912,18 @@ function useImageStatus(report, { onLoad, onError, decode = false } = {}) {
6883
6912
  }
6884
6913
 
6885
6914
  // src/internal/imageSlot.tsx
6886
- import { Fragment as Fragment11, jsx as jsx31, jsxs as jsxs19 } from "react/jsx-runtime";
6915
+ import { Fragment as Fragment11, jsx as jsx32, jsxs as jsxs19 } from "react/jsx-runtime";
6887
6916
  function createImageSlot(name, classNames) {
6888
6917
  const [Provider, useSlotContext] = createComponentContext(name);
6889
6918
  function ImageSlotProvider({ children }) {
6890
- const [imageStatus, setImageStatus] = React54.useState("idle");
6891
- const value = React54.useMemo(() => ({ imageStatus, setImageStatus }), [imageStatus]);
6892
- return /* @__PURE__ */ jsx31(Provider, { value, children });
6919
+ const [imageStatus, setImageStatus] = React55.useState("idle");
6920
+ const value = React55.useMemo(() => ({ imageStatus, setImageStatus }), [imageStatus]);
6921
+ return /* @__PURE__ */ jsx32(Provider, { value, children });
6893
6922
  }
6894
6923
  function ImageInner({ src, alt = "", className, onLoad, onError, ...rest }) {
6895
6924
  const { setImageStatus } = useSlotContext();
6896
6925
  const image = useImageStatus(setImageStatus, { onLoad, onError });
6897
- return /* @__PURE__ */ jsx31(
6926
+ return /* @__PURE__ */ jsx32(
6898
6927
  "img",
6899
6928
  {
6900
6929
  loading: "lazy",
@@ -6911,7 +6940,7 @@ function createImageSlot(name, classNames) {
6911
6940
  }
6912
6941
  function LeavingImage({ image }) {
6913
6942
  const { ref: _ref, src, alt: _alt, className, ...rest } = image;
6914
- return /* @__PURE__ */ jsx31(
6943
+ return /* @__PURE__ */ jsx32(
6915
6944
  "img",
6916
6945
  {
6917
6946
  ...rest,
@@ -6925,23 +6954,23 @@ function createImageSlot(name, classNames) {
6925
6954
  );
6926
6955
  }
6927
6956
  function Image2({ onLoad, onError, onTransitionEnd, ...props }) {
6928
- const [shown, setShown] = React54.useState(null);
6929
- const [leaving, setLeaving] = React54.useState(null);
6930
- const [src, setSrc] = React54.useState(props.src);
6957
+ const [shown, setShown] = React55.useState(null);
6958
+ const [leaving, setLeaving] = React55.useState(null);
6959
+ const [src, setSrc] = React55.useState(props.src);
6931
6960
  if (props.src !== src) {
6932
6961
  setSrc(props.src);
6933
6962
  setLeaving(shown && !prefersReducedMotion() ? shown : null);
6934
6963
  setShown(null);
6935
6964
  }
6936
6965
  const leavingSrc = leaving?.src;
6937
- React54.useEffect(() => {
6966
+ React55.useEffect(() => {
6938
6967
  if (!leavingSrc || !shown) return;
6939
6968
  const timer = window.setTimeout(() => setLeaving(null), exitTimeoutMs("slow"));
6940
6969
  return () => window.clearTimeout(timer);
6941
6970
  }, [leavingSrc, shown]);
6942
6971
  return /* @__PURE__ */ jsxs19(Fragment11, { children: [
6943
- leaving ? /* @__PURE__ */ jsx31(LeavingImage, { image: leaving }) : null,
6944
- /* @__PURE__ */ jsx31(
6972
+ leaving ? /* @__PURE__ */ jsx32(LeavingImage, { image: leaving }) : null,
6973
+ /* @__PURE__ */ jsx32(
6945
6974
  ImageInner,
6946
6975
  {
6947
6976
  ...props,
@@ -6965,7 +6994,7 @@ function createImageSlot(name, classNames) {
6965
6994
  Image2.displayName = `${name}.Image`;
6966
6995
  function Fallback({ className, ...rest }) {
6967
6996
  const { imageStatus } = useSlotContext();
6968
- return /* @__PURE__ */ jsx31(
6997
+ return /* @__PURE__ */ jsx32(
6969
6998
  "span",
6970
6999
  {
6971
7000
  className: cx(classNames.fallback, className),
@@ -6985,22 +7014,22 @@ function createImageSlot(name, classNames) {
6985
7014
  }
6986
7015
 
6987
7016
  // src/internal/mediaSlot.tsx
6988
- import * as React55 from "react";
6989
- import { jsx as jsx32 } from "react/jsx-runtime";
6990
- var MediaSlotContext = React55.createContext(null);
7017
+ import * as React56 from "react";
7018
+ import { jsx as jsx33 } from "react/jsx-runtime";
7019
+ var MediaSlotContext = React56.createContext(null);
6991
7020
  var MEDIA_SLOT_SIZE = { avatar: "l", thumbnail: "m" };
6992
7021
  function useMediaSlotHost() {
6993
- const [count, setCount] = React55.useState(0);
6994
- const value = React55.useMemo(
7022
+ const [count, setCount] = React56.useState(0);
7023
+ const value = React56.useMemo(
6995
7024
  () => ({ report: (present) => setCount((n) => Math.max(0, n + (present ? 1 : -1))) }),
6996
7025
  []
6997
7026
  );
6998
- const provide = (children) => /* @__PURE__ */ jsx32(MediaSlotContext.Provider, { value, children });
7027
+ const provide = (children) => /* @__PURE__ */ jsx33(MediaSlotContext.Provider, { value, children });
6999
7028
  return { media: count > 0, provide };
7000
7029
  }
7001
7030
  function useMediaSlotSize(kind) {
7002
- const slot3 = React55.useContext(MediaSlotContext);
7003
- React55.useLayoutEffect(() => {
7031
+ const slot3 = React56.useContext(MediaSlotContext);
7032
+ React56.useLayoutEffect(() => {
7004
7033
  if (!slot3) return;
7005
7034
  slot3.report(true);
7006
7035
  return () => slot3.report(false);
@@ -7019,16 +7048,16 @@ var Avatar_default = {
7019
7048
  };
7020
7049
 
7021
7050
  // src/components/avatar/Avatar.tsx
7022
- import { jsx as jsx33 } from "react/jsx-runtime";
7051
+ import { jsx as jsx34 } from "react/jsx-runtime";
7023
7052
  var slot = createImageSlot("Avatar", {
7024
7053
  image: Avatar_default.image,
7025
7054
  fallback: cx(Avatar_default.fallback, iconSlotClass)
7026
7055
  });
7027
- var AvatarGroupSizeContext = React56.createContext(void 0);
7056
+ var AvatarGroupSizeContext = React57.createContext(void 0);
7028
7057
  function AvatarRoot({ size, color = "gray", className, children, ...rest }) {
7029
- const groupSize = React56.useContext(AvatarGroupSizeContext);
7058
+ const groupSize = React57.useContext(AvatarGroupSizeContext);
7030
7059
  const slotSize = useMediaSlotSize("avatar");
7031
- return /* @__PURE__ */ jsx33(slot.ImageSlotProvider, { children: /* @__PURE__ */ jsx33(
7060
+ return /* @__PURE__ */ jsx34(slot.ImageSlotProvider, { children: /* @__PURE__ */ jsx34(
7032
7061
  "div",
7033
7062
  {
7034
7063
  role: namedRole(rest, "img"),
@@ -7050,7 +7079,7 @@ var AVATAR_STATUS_LABELS = {
7050
7079
  };
7051
7080
  function AvatarStatus({ status, labels, className, ...rest }) {
7052
7081
  slot.useImageSlot();
7053
- return /* @__PURE__ */ jsx33(
7082
+ return /* @__PURE__ */ jsx34(
7054
7083
  "span",
7055
7084
  {
7056
7085
  role: "img",
@@ -7063,7 +7092,7 @@ function AvatarStatus({ status, labels, className, ...rest }) {
7063
7092
  }
7064
7093
  AvatarStatus.displayName = "Avatar.Status";
7065
7094
  function AvatarGroup({ size, className, role = "group", ...rest }) {
7066
- return /* @__PURE__ */ jsx33(AvatarGroupSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx33(
7095
+ return /* @__PURE__ */ jsx34(AvatarGroupSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx34(
7067
7096
  "div",
7068
7097
  {
7069
7098
  role,
@@ -7075,8 +7104,8 @@ function AvatarGroup({ size, className, role = "group", ...rest }) {
7075
7104
  }
7076
7105
  AvatarGroup.displayName = "Avatar.Group";
7077
7106
  function AvatarOverflow({ size, className, ...rest }) {
7078
- const groupSize = React56.useContext(AvatarGroupSizeContext);
7079
- return /* @__PURE__ */ jsx33(
7107
+ const groupSize = React57.useContext(AvatarGroupSizeContext);
7108
+ return /* @__PURE__ */ jsx34(
7080
7109
  "div",
7081
7110
  {
7082
7111
  role: namedRole(rest, "img"),
@@ -7097,7 +7126,7 @@ var Avatar = {
7097
7126
  };
7098
7127
 
7099
7128
  // src/components/checkbox/Checkbox.tsx
7100
- import * as React58 from "react";
7129
+ import * as React59 from "react";
7101
7130
 
7102
7131
  // src/internal/CheckMark.module.css
7103
7132
  var CheckMark_default = {
@@ -7107,7 +7136,7 @@ var CheckMark_default = {
7107
7136
  };
7108
7137
 
7109
7138
  // src/internal/CheckMark.tsx
7110
- import { jsx as jsx34, jsxs as jsxs20 } from "react/jsx-runtime";
7139
+ import { jsx as jsx35, jsxs as jsxs20 } from "react/jsx-runtime";
7111
7140
  function CheckMark({ state, className }) {
7112
7141
  return /* @__PURE__ */ jsxs20(
7113
7142
  "svg",
@@ -7118,15 +7147,15 @@ function CheckMark({ state, className }) {
7118
7147
  "aria-hidden": "true",
7119
7148
  focusable: "false",
7120
7149
  children: [
7121
- /* @__PURE__ */ jsx34("path", { d: "M5.5 12.5l4.25 4.25L18.5 8", pathLength: 1, className: CheckMark_default.check }),
7122
- /* @__PURE__ */ jsx34("path", { d: "M7 12h10", pathLength: 1, className: CheckMark_default.bar })
7150
+ /* @__PURE__ */ jsx35("path", { d: "M5.5 12.5l4.25 4.25L18.5 8", pathLength: 1, className: CheckMark_default.check }),
7151
+ /* @__PURE__ */ jsx35("path", { d: "M7 12h10", pathLength: 1, className: CheckMark_default.bar })
7123
7152
  ]
7124
7153
  }
7125
7154
  );
7126
7155
  }
7127
7156
 
7128
7157
  // src/internal/ChoiceField.tsx
7129
- import * as React57 from "react";
7158
+ import * as React58 from "react";
7130
7159
 
7131
7160
  // src/internal/ChoiceField.module.css
7132
7161
  var ChoiceField_default = {
@@ -7142,12 +7171,12 @@ var ChoiceField_default = {
7142
7171
  };
7143
7172
 
7144
7173
  // src/internal/ChoiceField.tsx
7145
- import { Fragment as Fragment12, jsx as jsx35, jsxs as jsxs21 } from "react/jsx-runtime";
7174
+ import { Fragment as Fragment12, jsx as jsx36, jsxs as jsxs21 } from "react/jsx-runtime";
7146
7175
  var choiceInputClass = ChoiceField_default.input;
7147
7176
  var choiceVisualClass = cx(ChoiceField_default.visual, press_default.pressPartCompact);
7148
7177
  var choiceBoxClass = ChoiceField_default.box;
7149
7178
  var choiceTrackClass = ChoiceField_default.track;
7150
- var ChoiceMarksContext = React57.createContext(null);
7179
+ var ChoiceMarksContext = React58.createContext(null);
7151
7180
  function ChoiceField({
7152
7181
  ids,
7153
7182
  size,
@@ -7168,11 +7197,11 @@ function ChoiceField({
7168
7197
  }) {
7169
7198
  const shake = useErrorShake(!groupOption && ids.invalid, error);
7170
7199
  const leaving = useLeavingError(ids.showError, error);
7171
- const marks = React57.useMemo(
7200
+ const marks = React58.useMemo(
7172
7201
  () => ({ required, optional, optionalLabel, disabled }),
7173
7202
  [required, optional, optionalLabel, disabled]
7174
7203
  );
7175
- return /* @__PURE__ */ jsx35(ControlSizeProvider, { value: size, children: /* @__PURE__ */ jsxs21(
7204
+ return /* @__PURE__ */ jsx36(ControlSizeProvider, { value: size, children: /* @__PURE__ */ jsxs21(
7176
7205
  "div",
7177
7206
  {
7178
7207
  className: cx(fieldTierClass, ChoiceField_default.field, className),
@@ -7191,7 +7220,7 @@ function ChoiceField({
7191
7220
  className: cx(ChoiceField_default.row, press_default.pressHost),
7192
7221
  "data-loading": busy || void 0,
7193
7222
  children: [
7194
- /* @__PURE__ */ jsx35(
7223
+ /* @__PURE__ */ jsx36(
7195
7224
  "span",
7196
7225
  {
7197
7226
  className: cx(ChoiceField_default.controlCell, enterMotion_default.shake, touchTargetClass),
@@ -7199,11 +7228,11 @@ function ChoiceField({
7199
7228
  children: control
7200
7229
  }
7201
7230
  ),
7202
- /* @__PURE__ */ jsx35(ChoiceMarksContext, { value: marks, children })
7231
+ /* @__PURE__ */ jsx36(ChoiceMarksContext, { value: marks, children })
7203
7232
  ]
7204
7233
  }
7205
7234
  ),
7206
- /* @__PURE__ */ jsx35(
7235
+ /* @__PURE__ */ jsx36(
7207
7236
  FieldSupport,
7208
7237
  {
7209
7238
  ids,
@@ -7222,13 +7251,13 @@ function ChoiceField({
7222
7251
  ) });
7223
7252
  }
7224
7253
  function ChoiceLabel({ className, children, ...rest }) {
7225
- const marks = React57.use(ChoiceMarksContext);
7254
+ const marks = React58.use(ChoiceMarksContext);
7226
7255
  const marked = marks && (marks.required || marks.optional);
7227
7256
  return /* @__PURE__ */ jsxs21("span", { className: cx(ChoiceField_default.text, className), ...rest, children: [
7228
7257
  children,
7229
7258
  marked ? /* @__PURE__ */ jsxs21(Fragment12, { children: [
7230
7259
  " ",
7231
- /* @__PURE__ */ jsx35(
7260
+ /* @__PURE__ */ jsx36(
7232
7261
  LabelMarks,
7233
7262
  {
7234
7263
  required: marks.required,
@@ -7249,7 +7278,7 @@ var Checkbox_default = {
7249
7278
  };
7250
7279
 
7251
7280
  // src/components/checkbox/Checkbox.tsx
7252
- import { Fragment as Fragment13, jsx as jsx36, jsxs as jsxs22 } from "react/jsx-runtime";
7281
+ import { Fragment as Fragment13, jsx as jsx37, jsxs as jsxs22 } from "react/jsx-runtime";
7253
7282
  var CHECKBOX_LABELS = { optional: "\u043D\u0435\u043E\u0431\u044F\u0437\u0430\u0442\u0435\u043B\u044C\u043D\u043E" };
7254
7283
  function CheckboxRoot({
7255
7284
  id,
@@ -7282,12 +7311,12 @@ function CheckboxRoot({
7282
7311
  defaultValue: defaultChecked,
7283
7312
  onChange: onCheckedChange
7284
7313
  });
7285
- const internalRef = React58.useRef(null);
7314
+ const internalRef = React59.useRef(null);
7286
7315
  const mergedRef = useMergedRefs(internalRef, ref);
7287
- React58.useLayoutEffect(() => {
7316
+ React59.useLayoutEffect(() => {
7288
7317
  if (internalRef.current) internalRef.current.indeterminate = indeterminate;
7289
7318
  });
7290
- return /* @__PURE__ */ jsx36(
7319
+ return /* @__PURE__ */ jsx37(
7291
7320
  ChoiceField,
7292
7321
  {
7293
7322
  ids,
@@ -7303,7 +7332,7 @@ function CheckboxRoot({
7303
7332
  error,
7304
7333
  className: cx(Checkbox_default.root, className),
7305
7334
  control: /* @__PURE__ */ jsxs22(Fragment13, { children: [
7306
- /* @__PURE__ */ jsx36(
7335
+ /* @__PURE__ */ jsx37(
7307
7336
  "input",
7308
7337
  {
7309
7338
  ...inputRest,
@@ -7322,13 +7351,13 @@ function CheckboxRoot({
7322
7351
  "aria-describedby": ids.describedBy
7323
7352
  }
7324
7353
  ),
7325
- /* @__PURE__ */ jsx36(
7354
+ /* @__PURE__ */ jsx37(
7326
7355
  "span",
7327
7356
  {
7328
7357
  className: cx(choiceVisualClass, choiceBoxClass, Checkbox_default.control),
7329
7358
  "data-shape": shape,
7330
7359
  "aria-hidden": "true",
7331
- children: /* @__PURE__ */ jsx36(
7360
+ children: /* @__PURE__ */ jsx37(
7332
7361
  CheckMark,
7333
7362
  {
7334
7363
  state: indeterminate ? "indeterminate" : checked ? "checked" : "unchecked"
@@ -7343,7 +7372,7 @@ function CheckboxRoot({
7343
7372
  }
7344
7373
  CheckboxRoot.displayName = "Checkbox.Root";
7345
7374
  function CheckboxLabel(props) {
7346
- return /* @__PURE__ */ jsx36(ChoiceLabel, { ...props });
7375
+ return /* @__PURE__ */ jsx37(ChoiceLabel, { ...props });
7347
7376
  }
7348
7377
  CheckboxLabel.displayName = "Checkbox.Label";
7349
7378
  function CheckboxIndicator({
@@ -7356,7 +7385,7 @@ function CheckboxIndicator({
7356
7385
  ...rest
7357
7386
  }) {
7358
7387
  const size = useControlSize(sizeProp);
7359
- return /* @__PURE__ */ jsx36(
7388
+ return /* @__PURE__ */ jsx37(
7360
7389
  "span",
7361
7390
  {
7362
7391
  "aria-hidden": "true",
@@ -7375,7 +7404,7 @@ function CheckboxIndicator({
7375
7404
  disabled: disabled || void 0
7376
7405
  }),
7377
7406
  ...rest,
7378
- children: /* @__PURE__ */ jsx36(CheckMark, { state: indeterminate ? "indeterminate" : checked ? "checked" : "unchecked" })
7407
+ children: /* @__PURE__ */ jsx37(CheckMark, { state: indeterminate ? "indeterminate" : checked ? "checked" : "unchecked" })
7379
7408
  }
7380
7409
  );
7381
7410
  }
@@ -7387,7 +7416,7 @@ var Checkbox = {
7387
7416
  };
7388
7417
 
7389
7418
  // src/components/thumbnail/Thumbnail.tsx
7390
- import * as React60 from "react";
7419
+ import * as React61 from "react";
7391
7420
 
7392
7421
  // src/internal/formatClock.ts
7393
7422
  var pad = (value) => String(value).padStart(2, "0");
@@ -7459,20 +7488,20 @@ var mediaDisk_default = {
7459
7488
  };
7460
7489
 
7461
7490
  // src/internal/mediaDisk.tsx
7462
- import { jsx as jsx37 } from "react/jsx-runtime";
7491
+ import { jsx as jsx38 } from "react/jsx-runtime";
7463
7492
  var mediaDiskClass = cx(fieldTierClass, mediaPill_default.ink, mediaDisk_default.disk);
7464
7493
  function MediaPlayMark({
7465
7494
  shown = true,
7466
7495
  className
7467
7496
  }) {
7468
- return /* @__PURE__ */ jsx37(
7497
+ return /* @__PURE__ */ jsx38(
7469
7498
  "span",
7470
7499
  {
7471
7500
  className: cx(mediaDiskClass, className),
7472
7501
  "data-size": "l",
7473
7502
  "data-shown": shown,
7474
7503
  "aria-hidden": "true",
7475
- children: /* @__PURE__ */ jsx37(Icon, { name: "action.play", fill: "currentColor" })
7504
+ children: /* @__PURE__ */ jsx38(Icon, { name: "action.play", fill: "currentColor" })
7476
7505
  }
7477
7506
  );
7478
7507
  }
@@ -7483,7 +7512,7 @@ function firstFrame(src) {
7483
7512
  }
7484
7513
 
7485
7514
  // src/internal/mediaSession.ts
7486
- import * as React59 from "react";
7515
+ import * as React60 from "react";
7487
7516
  var active = null;
7488
7517
  var audible = (media) => !media.muted && media.volume > 0;
7489
7518
  function claimPlayback(media) {
@@ -7495,7 +7524,7 @@ function releasePlayback(media) {
7495
7524
  if (active === media) active = null;
7496
7525
  }
7497
7526
  function useMediaSession(ref) {
7498
- React59.useEffect(() => {
7527
+ React60.useEffect(() => {
7499
7528
  const media = ref.current;
7500
7529
  if (!media) return;
7501
7530
  const claim = () => claimPlayback(media);
@@ -7532,7 +7561,7 @@ var Thumbnail_default = {
7532
7561
  };
7533
7562
 
7534
7563
  // src/components/thumbnail/Thumbnail.tsx
7535
- import { Fragment as Fragment14, jsx as jsx38, jsxs as jsxs23 } from "react/jsx-runtime";
7564
+ import { Fragment as Fragment14, jsx as jsx39, jsxs as jsxs23 } from "react/jsx-runtime";
7536
7565
  var slot2 = createImageSlot("Thumbnail", { image: Thumbnail_default.image, fallback: Thumbnail_default.fallback });
7537
7566
  function ThumbnailRoot({
7538
7567
  size: sizeProp,
@@ -7574,7 +7603,7 @@ function ThumbnailRoot({
7574
7603
  if (selectable) {
7575
7604
  const { onClick: onClick2 } = rest;
7576
7605
  return provide(
7577
- /* @__PURE__ */ jsx38(slot2.ImageSlotProvider, { children: /* @__PURE__ */ jsxs23(
7606
+ /* @__PURE__ */ jsx39(slot2.ImageSlotProvider, { children: /* @__PURE__ */ jsxs23(
7578
7607
  "button",
7579
7608
  {
7580
7609
  ...rest,
@@ -7589,7 +7618,7 @@ function ThumbnailRoot({
7589
7618
  },
7590
7619
  children: [
7591
7620
  children,
7592
- /* @__PURE__ */ jsx38("span", { className: cx(Thumbnail_default.check, mediaPill_default.choice), "aria-hidden": "true", children: /* @__PURE__ */ jsx38(Checkbox.Indicator, { checked, size: fullWidth ? "s" : compactTier(size) }) })
7621
+ /* @__PURE__ */ jsx39("span", { className: cx(Thumbnail_default.check, mediaPill_default.choice), "aria-hidden": "true", children: /* @__PURE__ */ jsx39(Checkbox.Indicator, { checked, size: fullWidth ? "s" : compactTier(size) }) })
7593
7622
  ]
7594
7623
  }
7595
7624
  ) })
@@ -7597,16 +7626,16 @@ function ThumbnailRoot({
7597
7626
  }
7598
7627
  if (asChild) {
7599
7628
  return provide(
7600
- /* @__PURE__ */ jsx38(slot2.ImageSlotProvider, { children: /* @__PURE__ */ jsx38(Slot, { ...rest, ...frame2, ref, children }) })
7629
+ /* @__PURE__ */ jsx39(slot2.ImageSlotProvider, { children: /* @__PURE__ */ jsx39(Slot, { ...rest, ...frame2, ref, children }) })
7601
7630
  );
7602
7631
  }
7603
7632
  return provide(
7604
- /* @__PURE__ */ jsx38(slot2.ImageSlotProvider, { children: /* @__PURE__ */ jsx38("div", { ref, ...frame2, ...rest, children }) })
7633
+ /* @__PURE__ */ jsx39(slot2.ImageSlotProvider, { children: /* @__PURE__ */ jsx39("div", { ref, ...frame2, ...rest, children }) })
7605
7634
  );
7606
7635
  }
7607
7636
  ThumbnailRoot.displayName = "Thumbnail.Root";
7608
7637
  function ThumbnailImage({ fit = "cover", ...rest }) {
7609
- return /* @__PURE__ */ jsx38(slot2.Image, { ...rest, "data-fit": fit });
7638
+ return /* @__PURE__ */ jsx39(slot2.Image, { ...rest, "data-fit": fit });
7610
7639
  }
7611
7640
  ThumbnailImage.displayName = "Thumbnail.Image";
7612
7641
  function ThumbnailVideoInner({
@@ -7626,22 +7655,22 @@ function ThumbnailVideoInner({
7626
7655
  ...rest
7627
7656
  }) {
7628
7657
  const report = slot2.useReportStatus();
7629
- const mute = React60.useCallback(
7658
+ const mute = React61.useCallback(
7630
7659
  (node) => {
7631
7660
  if (node) node.muted = autoPlay && !controls;
7632
7661
  },
7633
7662
  [autoPlay, controls]
7634
7663
  );
7635
- const sessionRef = React60.useRef(null);
7664
+ const sessionRef = React61.useRef(null);
7636
7665
  useMediaSession(sessionRef);
7637
7666
  const videoRef = useMergedRefs(mute, sessionRef, ref);
7638
7667
  const media = useImageStatus(report, { onError });
7639
- const [duration, setDuration] = React60.useState(null);
7640
- const [playing, setPlaying] = React60.useState(false);
7641
- const [still] = React60.useState(prefersReducedMotion);
7668
+ const [duration, setDuration] = React61.useState(null);
7669
+ const [playing, setPlaying] = React61.useState(false);
7670
+ const [still] = React61.useState(prefersReducedMotion);
7642
7671
  const loops = autoPlay && !still && !controls;
7643
7672
  return /* @__PURE__ */ jsxs23(Fragment14, { children: [
7644
- /* @__PURE__ */ jsx38(
7673
+ /* @__PURE__ */ jsx39(
7645
7674
  "video",
7646
7675
  {
7647
7676
  ...rest,
@@ -7676,12 +7705,12 @@ function ThumbnailVideoInner({
7676
7705
  }
7677
7706
  }
7678
7707
  ),
7679
- !controls && !loops ? /* @__PURE__ */ jsx38(MediaPlayMark, { shown: !playing, className: Thumbnail_default.play }) : null,
7680
- !controls && duration !== null ? /* @__PURE__ */ jsx38("span", { className: cx(textRole_default.caption, mediaPill_default.pill, Thumbnail_default.duration), children: formatDuration(duration) }) : null
7708
+ !controls && !loops ? /* @__PURE__ */ jsx39(MediaPlayMark, { shown: !playing, className: Thumbnail_default.play }) : null,
7709
+ !controls && duration !== null ? /* @__PURE__ */ jsx39("span", { className: cx(textRole_default.caption, mediaPill_default.pill, Thumbnail_default.duration), children: formatDuration(duration) }) : null
7681
7710
  ] });
7682
7711
  }
7683
7712
  function ThumbnailVideo(props) {
7684
- return /* @__PURE__ */ jsx38(ThumbnailVideoInner, { ...props }, props.src);
7713
+ return /* @__PURE__ */ jsx39(ThumbnailVideoInner, { ...props }, props.src);
7685
7714
  }
7686
7715
  ThumbnailVideo.displayName = "Thumbnail.Video";
7687
7716
  var ThumbnailFallback = slot2.Fallback;
@@ -7693,10 +7722,10 @@ var Thumbnail = {
7693
7722
  };
7694
7723
 
7695
7724
  // src/components/select/Select.tsx
7696
- import * as React64 from "react";
7725
+ import * as React65 from "react";
7697
7726
 
7698
7727
  // src/hooks/useLoadMore.ts
7699
- import * as React61 from "react";
7728
+ import * as React62 from "react";
7700
7729
  var LIST_ROOT_MARGIN = "0px 0px 48px 0px";
7701
7730
  var NONE2 = /* @__PURE__ */ Symbol("none");
7702
7731
  function useLoadMore({
@@ -7706,19 +7735,19 @@ function useLoadMore({
7706
7735
  round,
7707
7736
  rootMargin = LIST_ROOT_MARGIN
7708
7737
  }) {
7709
- const sentinelRef = React61.useRef(null);
7710
- const handlerRef = React61.useRef(onLoadMore);
7738
+ const sentinelRef = React62.useRef(null);
7739
+ const handlerRef = React62.useRef(onLoadMore);
7711
7740
  handlerRef.current = onLoadMore;
7712
- const askedIn = React61.useRef(NONE2);
7713
- React61.useLayoutEffect(() => {
7741
+ const askedIn = React62.useRef(NONE2);
7742
+ React62.useLayoutEffect(() => {
7714
7743
  if (!enabled) askedIn.current = NONE2;
7715
7744
  }, [enabled]);
7716
- const request = React61.useCallback(() => {
7745
+ const request = React62.useCallback(() => {
7717
7746
  if (!enabled || Object.is(askedIn.current, round)) return;
7718
7747
  askedIn.current = round;
7719
7748
  void handlerRef.current?.();
7720
7749
  }, [enabled, round]);
7721
- React61.useEffect(() => {
7750
+ React62.useEffect(() => {
7722
7751
  const root = scrollRef.current;
7723
7752
  const target = sentinelRef.current;
7724
7753
  if (!enabled || !root || !target || typeof IntersectionObserver === "undefined") return;
@@ -7735,10 +7764,10 @@ function useLoadMore({
7735
7764
  }
7736
7765
 
7737
7766
  // src/internal/MenuGroup.tsx
7738
- import * as React62 from "react";
7739
- import { jsx as jsx39, jsxs as jsxs24 } from "react/jsx-runtime";
7767
+ import * as React63 from "react";
7768
+ import { jsx as jsx40, jsxs as jsxs24 } from "react/jsx-runtime";
7740
7769
  function MenuGroup({ label, className, children, ...rest }) {
7741
- const labelId = React62.useId();
7770
+ const labelId = React63.useId();
7742
7771
  return (
7743
7772
  // biome-ignore lint/a11y/useSemanticElements: role="group" inside a menu / listbox; <fieldset> is not allowed there
7744
7773
  /* @__PURE__ */ jsxs24(
@@ -7749,7 +7778,7 @@ function MenuGroup({ label, className, children, ...rest }) {
7749
7778
  "aria-labelledby": label != null ? labelId : void 0,
7750
7779
  className: cx(menu_default.group, className),
7751
7780
  children: [
7752
- label != null ? /* @__PURE__ */ jsx39("div", { id: labelId, role: "presentation", className: cx(textRole_default.caption, menu_default.groupLabel), children: label }) : null,
7781
+ label != null ? /* @__PURE__ */ jsx40("div", { id: labelId, role: "presentation", className: cx(textRole_default.caption, menu_default.groupLabel), children: label }) : null,
7753
7782
  children
7754
7783
  ]
7755
7784
  }
@@ -7783,22 +7812,22 @@ var Select_default = {
7783
7812
  };
7784
7813
 
7785
7814
  // src/components/select/SelectItem.tsx
7786
- import * as React63 from "react";
7815
+ import * as React64 from "react";
7787
7816
 
7788
7817
  // src/components/select/selectContext.ts
7789
7818
  var normalize = (text) => text.trim().toLocaleLowerCase();
7790
7819
  var [SelectProvider, useSelectContext] = createComponentContext("Select");
7791
7820
 
7792
7821
  // src/components/select/SelectItem.tsx
7793
- import { jsx as jsx40, jsxs as jsxs25 } from "react/jsx-runtime";
7822
+ import { jsx as jsx41, jsxs as jsxs25 } from "react/jsx-runtime";
7794
7823
  function SelectItemIcon({ className, ...rest }) {
7795
- return /* @__PURE__ */ jsx40("span", { "aria-hidden": "true", className: cx(menu_default.itemIcon, iconSlotClass, className), ...rest });
7824
+ return /* @__PURE__ */ jsx41("span", { "aria-hidden": "true", className: cx(menu_default.itemIcon, iconSlotClass, className), ...rest });
7796
7825
  }
7797
7826
  SelectItemIcon.displayName = "Select.ItemIcon";
7798
- var OptionQueryContext = React63.createContext("");
7827
+ var OptionQueryContext = React64.createContext("");
7799
7828
  function SelectItemText({ children, className, ...rest }) {
7800
- const query = React63.useContext(OptionQueryContext);
7801
- return /* @__PURE__ */ jsx40("span", { ...rest, className: cx(Select_default.itemTitle, className), children: highlightChildren(children, query) });
7829
+ const query = React64.useContext(OptionQueryContext);
7830
+ return /* @__PURE__ */ jsx41("span", { ...rest, className: cx(Select_default.itemTitle, className), children: highlightChildren(children, query) });
7802
7831
  }
7803
7832
  SelectItemText.displayName = "Select.ItemText";
7804
7833
  function SelectItemDescription({
@@ -7806,12 +7835,12 @@ function SelectItemDescription({
7806
7835
  className,
7807
7836
  ...rest
7808
7837
  }) {
7809
- const query = React63.useContext(OptionQueryContext);
7810
- return /* @__PURE__ */ jsx40("span", { ...rest, className: cx(Select_default.itemDescription, className), children: highlightChildren(children, query) });
7838
+ const query = React64.useContext(OptionQueryContext);
7839
+ return /* @__PURE__ */ jsx41("span", { ...rest, className: cx(Select_default.itemDescription, className), children: highlightChildren(children, query) });
7811
7840
  }
7812
7841
  SelectItemDescription.displayName = "Select.ItemDescription";
7813
7842
  function SelectItemMeta({ children, className, ...rest }) {
7814
- return /* @__PURE__ */ jsx40("span", { ...rest, className: cx(Select_default.itemMeta, className), children });
7843
+ return /* @__PURE__ */ jsx41("span", { ...rest, className: cx(Select_default.itemMeta, className), children });
7815
7844
  }
7816
7845
  SelectItemMeta.displayName = "Select.ItemMeta";
7817
7846
  function splitItemChildren(children) {
@@ -7824,11 +7853,11 @@ function splitItemChildren(children) {
7824
7853
  description: ""
7825
7854
  };
7826
7855
  let plain = "";
7827
- for (const child of React63.Children.toArray(children)) {
7828
- if (!React63.isValidElement(child)) {
7856
+ for (const child of React64.Children.toArray(children)) {
7857
+ if (!React64.isValidElement(child)) {
7829
7858
  plain += nodeText(child);
7830
7859
  parts.body.push(child);
7831
- } else if (child.type === React63.Fragment) {
7860
+ } else if (child.type === React64.Fragment) {
7832
7861
  const inner = splitItemChildren(child.props.children);
7833
7862
  parts.leading.push(...inner.leading);
7834
7863
  parts.body.push(...inner.body);
@@ -7858,7 +7887,7 @@ function splitItemChildren(children) {
7858
7887
  }
7859
7888
  function sizeMedia(leading, size) {
7860
7889
  return leading.map(
7861
- (node) => React63.isValidElement(node) && (node.type === Thumbnail.Root || node.type === Avatar.Root) ? React63.cloneElement(node, {
7890
+ (node) => React64.isValidElement(node) && (node.type === Thumbnail.Root || node.type === Avatar.Root) ? React64.cloneElement(node, {
7862
7891
  size: node.props.size ?? tierMappings.rowMedia[size],
7863
7892
  className: cx(Select_default.media, node.props.className),
7864
7893
  "aria-hidden": true
@@ -7883,7 +7912,7 @@ function SelectItem({
7883
7912
  const haystack = normalize(`${resolvedLabel} ${parts.description} ${keywords ?? ""}`);
7884
7913
  const isSelected = selected.includes(value);
7885
7914
  const isHighlighted = useStoreSlice(highlight, (current) => current === value);
7886
- const nodeRef = React63.useRef(null);
7915
+ const nodeRef = React64.useRef(null);
7887
7916
  const setRefs = useMergedRefs(nodeRef, ref);
7888
7917
  useListboxItem(
7889
7918
  registry,
@@ -7922,11 +7951,11 @@ function SelectItem({
7922
7951
  rich: parts.rich || void 0
7923
7952
  }),
7924
7953
  children: [
7925
- multiple ? /* @__PURE__ */ jsx40(Checkbox.Indicator, { checked: isSelected, disabled, size: stepDown(size) }) : null,
7954
+ multiple ? /* @__PURE__ */ jsx41(Checkbox.Indicator, { checked: isSelected, disabled, size: stepDown(size) }) : null,
7926
7955
  sizeMedia(parts.leading, size),
7927
- /* @__PURE__ */ jsx40("span", { className: Select_default.itemText, children: /* @__PURE__ */ jsx40(OptionQueryContext.Provider, { value: query, children: highlightChildren(parts.body, query) }) }),
7956
+ /* @__PURE__ */ jsx41("span", { className: Select_default.itemText, children: /* @__PURE__ */ jsx41(OptionQueryContext.Provider, { value: query, children: highlightChildren(parts.body, query) }) }),
7928
7957
  parts.meta,
7929
- multiple ? null : /* @__PURE__ */ jsx40("span", { className: menu_default.check, "aria-hidden": "true", children: isSelected ? /* @__PURE__ */ jsx40(Icon, { name: "action.check" }) : null })
7958
+ multiple ? null : /* @__PURE__ */ jsx41("span", { className: menu_default.check, "aria-hidden": "true", children: isSelected ? /* @__PURE__ */ jsx41(Icon, { name: "action.check" }) : null })
7930
7959
  ]
7931
7960
  }
7932
7961
  )
@@ -7946,10 +7975,10 @@ function SelectAction({
7946
7975
  ...rest
7947
7976
  }) {
7948
7977
  const { highlight, listboxId, setOpen, size, registry } = useSelectContext();
7949
- const value = `${ACTION_PREFIX}${React63.useId()}`;
7978
+ const value = `${ACTION_PREFIX}${React64.useId()}`;
7950
7979
  const isHighlighted = useStoreSlice(highlight, (current) => current === value);
7951
7980
  const parts = splitItemChildren(children);
7952
- const nodeRef = React63.useRef(null);
7981
+ const nodeRef = React64.useRef(null);
7953
7982
  const setRefs = useMergedRefs(nodeRef, ref);
7954
7983
  useListboxItem(
7955
7984
  registry,
@@ -7994,7 +8023,7 @@ function SelectAction({
7994
8023
  }),
7995
8024
  children: [
7996
8025
  sizeMedia(parts.leading, size),
7997
- /* @__PURE__ */ jsx40("span", { className: Select_default.itemText, children: parts.body })
8026
+ /* @__PURE__ */ jsx41("span", { className: Select_default.itemText, children: parts.body })
7998
8027
  ]
7999
8028
  }
8000
8029
  )
@@ -8003,7 +8032,7 @@ function SelectAction({
8003
8032
  SelectAction.displayName = "Select.Action";
8004
8033
 
8005
8034
  // src/components/select/Select.tsx
8006
- import { Fragment as Fragment16, jsx as jsx41, jsxs as jsxs26 } from "react/jsx-runtime";
8035
+ import { Fragment as Fragment16, jsx as jsx42, jsxs as jsxs26 } from "react/jsx-runtime";
8007
8036
  var SELECT_LABELS = {
8008
8037
  search: "\u041F\u043E\u0438\u0441\u043A",
8009
8038
  empty: "\u041D\u0438\u0447\u0435\u0433\u043E \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E",
@@ -8067,7 +8096,7 @@ function SelectRoot(props) {
8067
8096
  const changes = usePendingChanges(stored, takeNext);
8068
8097
  const value = changes.shown;
8069
8098
  const saving = changes.pending.length > 0;
8070
- const [announcement, setAnnouncement] = React64.useState("");
8099
+ const [announcement, setAnnouncement] = React65.useState("");
8071
8100
  const onValueChange = props.onValueChange;
8072
8101
  const commit = (next) => {
8073
8102
  if (saving || Object.is(next, value)) return;
@@ -8082,9 +8111,9 @@ function SelectRoot(props) {
8082
8111
  onReject: () => setAnnouncement(labels.changeFailed)
8083
8112
  });
8084
8113
  };
8085
- const commitRef = React64.useRef(commit);
8114
+ const commitRef = React65.useRef(commit);
8086
8115
  commitRef.current = commit;
8087
- const selected = React64.useMemo(
8116
+ const selected = React65.useMemo(
8088
8117
  () => Array.isArray(value) ? value : value ? [value] : [],
8089
8118
  [value]
8090
8119
  );
@@ -8096,18 +8125,18 @@ function SelectRoot(props) {
8096
8125
  defaultValue: defaultSearch,
8097
8126
  onChange: onSearchChange
8098
8127
  });
8099
- const triggerRef = React64.useRef(null);
8100
- const inSegment = React64.useContext(InputSegmentContext);
8101
- const segment = React64.useMemo(
8128
+ const triggerRef = React65.useRef(null);
8129
+ const inSegment = React65.useContext(InputSegmentContext);
8130
+ const segment = React65.useMemo(
8102
8131
  () => inSegment ? { label: ariaLabel } : null,
8103
8132
  [inSegment, ariaLabel]
8104
8133
  );
8105
- const wasOpenRef = React64.useRef(isOpen);
8106
- React64.useEffect(() => {
8134
+ const wasOpenRef = React65.useRef(isOpen);
8135
+ React65.useEffect(() => {
8107
8136
  if (wasOpenRef.current && !isOpen) setQuery("");
8108
8137
  wasOpenRef.current = isOpen;
8109
8138
  }, [isOpen, setQuery]);
8110
- const pick = React64.useCallback(
8139
+ const pick = React65.useCallback(
8111
8140
  (optionValue) => {
8112
8141
  if (multiple) {
8113
8142
  const list = Array.isArray(value) ? value : [];
@@ -8121,8 +8150,8 @@ function SelectRoot(props) {
8121
8150
  },
8122
8151
  [multiple, value, setOpen]
8123
8152
  );
8124
- const clear = React64.useCallback(() => commitRef.current(multiple ? [] : ""), [multiple]);
8125
- const context = React64.useMemo(
8153
+ const clear = React65.useCallback(() => commitRef.current(multiple ? [] : ""), [multiple]);
8154
+ const context = React65.useMemo(
8126
8155
  () => ({
8127
8156
  size,
8128
8157
  invalid: ids.invalid,
@@ -8193,13 +8222,13 @@ function SelectRoot(props) {
8193
8222
  ]
8194
8223
  );
8195
8224
  const body = /* @__PURE__ */ jsxs26(Fragment16, { children: [
8196
- /* @__PURE__ */ jsx41(SelectProvider, { value: context, children }),
8197
- name ? (selected.length > 0 || multiple ? selected : [""]).map((item) => /* @__PURE__ */ jsx41("input", { type: "hidden", name, value: item, disabled }, item)) : null,
8198
- /* @__PURE__ */ jsx41(VisuallyHidden, { live: "polite", children: announcement })
8225
+ /* @__PURE__ */ jsx42(SelectProvider, { value: context, children }),
8226
+ name ? (selected.length > 0 || multiple ? selected : [""]).map((item) => /* @__PURE__ */ jsx42("input", { type: "hidden", name, value: item, disabled }, item)) : null,
8227
+ /* @__PURE__ */ jsx42(VisuallyHidden, { live: "polite", children: announcement })
8199
8228
  ] });
8200
8229
  if (segment) {
8201
8230
  return tier.provide(
8202
- /* @__PURE__ */ jsx41(
8231
+ /* @__PURE__ */ jsx42(
8203
8232
  "div",
8204
8233
  {
8205
8234
  ...rest,
@@ -8212,7 +8241,7 @@ function SelectRoot(props) {
8212
8241
  );
8213
8242
  }
8214
8243
  return tier.provide(
8215
- /* @__PURE__ */ jsx41(
8244
+ /* @__PURE__ */ jsx42(
8216
8245
  FieldFrame,
8217
8246
  {
8218
8247
  ...rest,
@@ -8269,8 +8298,8 @@ function SelectTrigger({
8269
8298
  useListboxView(registry);
8270
8299
  const valueText = selected.map(registry.labelOf).join(", ");
8271
8300
  const segmentName = segment?.label ? valueText ? `${segment.label}: ${valueText}` : segment.label : void 0;
8272
- const parts = React64.Children.toArray(children);
8273
- const iconOnly = parts.some((node) => React64.isValidElement(node) && node.type === SelectTriggerIcon) && !parts.some((node) => React64.isValidElement(node) && node.type === SelectValue);
8301
+ const parts = React65.Children.toArray(children);
8302
+ const iconOnly = parts.some((node) => React65.isValidElement(node) && node.type === SelectTriggerIcon) && !parts.some((node) => React65.isValidElement(node) && node.type === SelectValue);
8274
8303
  const busy = loading || saving;
8275
8304
  const showClear = clearable && selected.length > 0 && !disabled && !busy;
8276
8305
  const clearPresence = usePartPresence({ present: showClear, axis: "inline" });
@@ -8326,13 +8355,13 @@ function SelectTrigger({
8326
8355
  children: [
8327
8356
  /* @__PURE__ */ jsxs26("span", { className: Select_default.triggerMain, children: [
8328
8357
  children,
8329
- iconOnly ? /* @__PURE__ */ jsx41(SelectValue, { className: visuallyHiddenClass }) : null
8358
+ iconOnly ? /* @__PURE__ */ jsx42(SelectValue, { className: visuallyHiddenClass }) : null
8330
8359
  ] }),
8331
8360
  showClear ? (
8332
8361
  // A segment, not a button: interactive content inside a <button> is invalid. The keyboard
8333
8362
  // clears with Delete / Backspace on the trigger. A touch target in height, like the clear
8334
8363
  // segment of a field (`FieldAction`).
8335
- /* @__PURE__ */ jsx41(
8364
+ /* @__PURE__ */ jsx42(
8336
8365
  "span",
8337
8366
  {
8338
8367
  ref: clearPresence.ref,
@@ -8345,11 +8374,11 @@ function SelectTrigger({
8345
8374
  event.stopPropagation();
8346
8375
  clear();
8347
8376
  },
8348
- children: /* @__PURE__ */ jsx41(Icon, { name: "action.close" })
8377
+ children: /* @__PURE__ */ jsx42(Icon, { name: "action.close" })
8349
8378
  }
8350
8379
  )
8351
8380
  ) : null,
8352
- /* @__PURE__ */ jsx41("span", { className: Select_default.chevron, "aria-hidden": "true", children: /* @__PURE__ */ jsx41(GlyphSwap, { children: busy ? /* @__PURE__ */ jsx41(Spinner, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx41(Icon, { name: "nav.chevronDown" }) }) })
8381
+ /* @__PURE__ */ jsx42("span", { className: Select_default.chevron, "aria-hidden": "true", children: /* @__PURE__ */ jsx42(GlyphSwap, { children: busy ? /* @__PURE__ */ jsx42(Spinner, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx42(Icon, { name: "nav.chevronDown" }) }) })
8353
8382
  ]
8354
8383
  }
8355
8384
  );
@@ -8373,13 +8402,13 @@ function SelectValue({ renderValue, className, ...rest }) {
8373
8402
  }),
8374
8403
  children: [
8375
8404
  sizeMedia(parts.leading, size),
8376
- /* @__PURE__ */ jsx41("span", { className: Select_default.valueBody, children: parts.body }),
8405
+ /* @__PURE__ */ jsx42("span", { className: Select_default.valueBody, children: parts.body }),
8377
8406
  parts.meta
8378
8407
  ]
8379
8408
  }
8380
8409
  );
8381
8410
  }
8382
- return /* @__PURE__ */ jsx41(
8411
+ return /* @__PURE__ */ jsx42(
8383
8412
  "span",
8384
8413
  {
8385
8414
  ...rest,
@@ -8391,19 +8420,19 @@ function SelectValue({ renderValue, className, ...rest }) {
8391
8420
  }
8392
8421
  SelectValue.displayName = "Select.Value";
8393
8422
  function SelectTriggerIcon({ className, ...rest }) {
8394
- return /* @__PURE__ */ jsx41("span", { "aria-hidden": "true", className: cx(Select_default.triggerIcon, className), ...rest });
8423
+ return /* @__PURE__ */ jsx42("span", { "aria-hidden": "true", className: cx(Select_default.triggerIcon, className), ...rest });
8395
8424
  }
8396
8425
  SelectTriggerIcon.displayName = "Select.TriggerIcon";
8397
8426
  var LOADING_ROWS2 = 4;
8398
8427
  var LOADING_MORE_ROWS = 2;
8399
8428
  function SkeletonRows({ count }) {
8400
- return Array.from({ length: count }, (_, index) => /* @__PURE__ */ jsx41(
8429
+ return Array.from({ length: count }, (_, index) => /* @__PURE__ */ jsx42(
8401
8430
  "div",
8402
8431
  {
8403
8432
  "aria-hidden": "true",
8404
8433
  className: cx(menu_default.item, menu_default.skeletonRow),
8405
8434
  "data-skeleton": "",
8406
- children: /* @__PURE__ */ jsx41(Skeleton, {})
8435
+ children: /* @__PURE__ */ jsx42(Skeleton, {})
8407
8436
  },
8408
8437
  index
8409
8438
  ));
@@ -8433,12 +8462,12 @@ function SelectContent({ searchable = false, className, children, ...rest }) {
8433
8462
  labels,
8434
8463
  registry
8435
8464
  } = useSelectContext();
8436
- const listboxRef = React64.useRef(null);
8465
+ const listboxRef = React65.useRef(null);
8437
8466
  const setListboxRef = useMergedRefs(listboxRef);
8438
8467
  const items = [];
8439
8468
  const actions = [];
8440
- for (const child of React64.Children.toArray(children)) {
8441
- (React64.isValidElement(child) && child.type === SelectAction ? actions : items).push(child);
8469
+ for (const child of React65.Children.toArray(children)) {
8470
+ (React65.isValidElement(child) && child.type === SelectAction ? actions : items).push(child);
8442
8471
  }
8443
8472
  const actionsId = `${listboxId}-actions`;
8444
8473
  const floating = useFloatingLayer({
@@ -8465,7 +8494,7 @@ function SelectContent({ searchable = false, className, children, ...rest }) {
8465
8494
  });
8466
8495
  const setSentinelRef = useMergedRefs(sentinelRef);
8467
8496
  const lastOption = view.navigable.filter((id) => !isActionValue(id)).at(-1);
8468
- React64.useEffect(() => {
8497
+ React65.useEffect(() => {
8469
8498
  if (highlighted !== void 0 && highlighted === lastOption) requestMore();
8470
8499
  }, [highlighted, lastOption, requestMore]);
8471
8500
  const handleKeyDown = (event) => {
@@ -8496,7 +8525,7 @@ function SelectContent({ searchable = false, className, children, ...rest }) {
8496
8525
  });
8497
8526
  if (moved !== null) revealHighlighted(registry.nodeOf(moved));
8498
8527
  };
8499
- if (!floating.mounted) return /* @__PURE__ */ jsx41("div", { hidden: true, children: items });
8528
+ if (!floating.mounted) return /* @__PURE__ */ jsx42("div", { hidden: true, children: items });
8500
8529
  const activeDescendant = isOpen && highlighted !== void 0 ? optionDomId(listboxId, highlighted) : void 0;
8501
8530
  return /* @__PURE__ */ jsxs26(
8502
8531
  FloatingPanel,
@@ -8511,11 +8540,11 @@ function SelectContent({ searchable = false, className, children, ...rest }) {
8511
8540
  searchable ? (
8512
8541
  // The permanent focus of the panel: no ring, the caret is the indicator (foundation §7).
8513
8542
  /* @__PURE__ */ jsxs26("div", { className: cx(menu_default.searchRow, Select_default.search), children: [
8514
- /* @__PURE__ */ jsx41(Icon, { name: "action.search", size: "s" }),
8515
- /* @__PURE__ */ jsx41(
8543
+ /* @__PURE__ */ jsx42(Icon, { name: "action.search", size: "s" }),
8544
+ /* @__PURE__ */ jsx42(
8516
8545
  "input",
8517
8546
  {
8518
- type: "text",
8547
+ type: "search",
8519
8548
  className: menu_default.searchInput,
8520
8549
  value: query,
8521
8550
  placeholder: labels.search,
@@ -8523,7 +8552,7 @@ function SelectContent({ searchable = false, className, children, ...rest }) {
8523
8552
  "aria-controls": region === "error" ? void 0 : listboxId,
8524
8553
  "aria-activedescendant": activeDescendant,
8525
8554
  "aria-autocomplete": "list",
8526
- autoComplete: "off",
8555
+ ...AUTOFILL_OFF,
8527
8556
  spellCheck: false,
8528
8557
  "data-autofocus": "",
8529
8558
  onChange: (event) => setQuery(event.target.value)
@@ -8531,10 +8560,10 @@ function SelectContent({ searchable = false, className, children, ...rest }) {
8531
8560
  )
8532
8561
  ] })
8533
8562
  ) : null,
8534
- /* @__PURE__ */ jsx41(RegionSwap, { state: region, fill: true, children: region === "error" ? /* @__PURE__ */ jsxs26(EmptyPage.Root, { layout: "compact", size, role: "alert", children: [
8535
- /* @__PURE__ */ jsx41(EmptyPage.Title, { as: "p", children: loadError }),
8536
- onRetry ? /* @__PURE__ */ jsx41(EmptyPage.Actions, { children: /* @__PURE__ */ jsxs26(Button.Root, { variant: "soft", tone: "neutral", onClick: onRetry, children: [
8537
- /* @__PURE__ */ jsx41(Button.Icon, { children: /* @__PURE__ */ jsx41(Icon, { name: "action.refresh" }) }),
8563
+ /* @__PURE__ */ jsx42(RegionSwap, { state: region, fill: true, children: region === "error" ? /* @__PURE__ */ jsxs26(EmptyPage.Root, { layout: "compact", size, role: "alert", children: [
8564
+ /* @__PURE__ */ jsx42(EmptyPage.Title, { as: "p", children: loadError }),
8565
+ onRetry ? /* @__PURE__ */ jsx42(EmptyPage.Actions, { children: /* @__PURE__ */ jsxs26(Button.Root, { variant: "soft", tone: "neutral", onClick: onRetry, children: [
8566
+ /* @__PURE__ */ jsx42(Button.Icon, { children: /* @__PURE__ */ jsx42(Icon, { name: "action.refresh" }) }),
8538
8567
  labels.retry
8539
8568
  ] }) }) : null
8540
8569
  ] }) : /* @__PURE__ */ jsxs26(Fragment16, { children: [
@@ -8554,22 +8583,22 @@ function SelectContent({ searchable = false, className, children, ...rest }) {
8554
8583
  className: Select_default.listbox,
8555
8584
  children: [
8556
8585
  items,
8557
- region === "loading" ? /* @__PURE__ */ jsx41(SkeletonRows, { count: LOADING_ROWS2 }) : null,
8558
- region === "ready" && hasMore ? /* @__PURE__ */ jsx41("div", { ref: setSentinelRef, "aria-hidden": "true", className: menu_default.loadSentinel }) : null,
8559
- region === "ready" && loadingMore ? /* @__PURE__ */ jsx41(SkeletonRows, { count: LOADING_MORE_ROWS }) : null
8586
+ region === "loading" ? /* @__PURE__ */ jsx42(SkeletonRows, { count: LOADING_ROWS2 }) : null,
8587
+ region === "ready" && hasMore ? /* @__PURE__ */ jsx42("div", { ref: setSentinelRef, "aria-hidden": "true", className: menu_default.loadSentinel }) : null,
8588
+ region === "ready" && loadingMore ? /* @__PURE__ */ jsx42(SkeletonRows, { count: LOADING_MORE_ROWS }) : null
8560
8589
  ]
8561
8590
  }
8562
8591
  ),
8563
- region === "ready" && isEmpty ? /* @__PURE__ */ jsx41(EmptyPage.Root, { layout: "compact", size, role: "status", children: /* @__PURE__ */ jsx41(EmptyPage.Title, { as: "p", children: labels.empty }) }) : null,
8592
+ region === "ready" && isEmpty ? /* @__PURE__ */ jsx42(EmptyPage.Root, { layout: "compact", size, role: "status", children: /* @__PURE__ */ jsx42(EmptyPage.Title, { as: "p", children: labels.empty }) }) : null,
8564
8593
  actions.length > 0 ? (
8565
8594
  // Owned by the listbox (`aria-owns`): its options for assistive tech, pinned under
8566
8595
  // the scroller and the empty state for the eye.
8567
8596
  // biome-ignore lint/a11y/useSemanticElements: a group of options inside a listbox, not a form fieldset
8568
- /* @__PURE__ */ jsx41("div", { id: actionsId, role: "group", className: Select_default.actions, children: actions })
8597
+ /* @__PURE__ */ jsx42("div", { id: actionsId, role: "group", className: Select_default.actions, children: actions })
8569
8598
  ) : null
8570
8599
  ] }) }),
8571
- /* @__PURE__ */ jsx41(VisuallyHidden, { live: "polite", children: loading || loadingMore ? labels.loading : "" }),
8572
- /* @__PURE__ */ jsx41(HighlightOnOpen, {})
8600
+ /* @__PURE__ */ jsx42(VisuallyHidden, { live: "polite", children: loading || loadingMore ? labels.loading : "" }),
8601
+ /* @__PURE__ */ jsx42(HighlightOnOpen, {})
8573
8602
  ]
8574
8603
  }
8575
8604
  );
@@ -8578,9 +8607,9 @@ SelectContent.displayName = "Select.Content";
8578
8607
  function HighlightOnOpen() {
8579
8608
  const { isOpen, query, filter, selected, registry, highlight } = useSelectContext();
8580
8609
  const view = useListboxView(registry, query, filter);
8581
- const latest = React64.useRef({ query, filter, selected });
8610
+ const latest = React65.useRef({ query, filter, selected });
8582
8611
  latest.current = { query, filter, selected };
8583
- React64.useLayoutEffect(() => {
8612
+ React65.useLayoutEffect(() => {
8584
8613
  if (!isOpen) return;
8585
8614
  const { query: text, filter: filtered, selected: picked } = latest.current;
8586
8615
  const first = registry.view(text, filtered).navigable.find((id) => picked.includes(id));
@@ -8588,12 +8617,12 @@ function HighlightOnOpen() {
8588
8617
  if (first !== void 0) revealHighlighted(registry.nodeOf(first));
8589
8618
  return () => highlight.set(void 0);
8590
8619
  }, [isOpen, registry, highlight]);
8591
- const latestView = React64.useRef(view);
8620
+ const latestView = React65.useRef(view);
8592
8621
  latestView.current = view;
8593
- React64.useLayoutEffect(() => {
8622
+ React65.useLayoutEffect(() => {
8594
8623
  if (query !== "") highlight.set(latestView.current.navigable[0]);
8595
8624
  }, [query, highlight]);
8596
- React64.useLayoutEffect(() => {
8625
+ React65.useLayoutEffect(() => {
8597
8626
  if (query === "") return;
8598
8627
  const current = highlight.get();
8599
8628
  if (current === void 0 || isActionValue(current) || !view.navigable.includes(current)) {
@@ -8603,11 +8632,11 @@ function HighlightOnOpen() {
8603
8632
  return null;
8604
8633
  }
8605
8634
  function SelectGroup({ className, ...rest }) {
8606
- return /* @__PURE__ */ jsx41(MenuGroup, { ...rest, className: cx(Select_default.group, className) });
8635
+ return /* @__PURE__ */ jsx42(MenuGroup, { ...rest, className: cx(Select_default.group, className) });
8607
8636
  }
8608
8637
  SelectGroup.displayName = "Select.Group";
8609
8638
  function SelectSeparator({ className, ...rest }) {
8610
- return /* @__PURE__ */ jsx41(Divider, { ...rest, className: cx(menu_default.separator, Select_default.separator, className) });
8639
+ return /* @__PURE__ */ jsx42(Divider, { ...rest, className: cx(menu_default.separator, Select_default.separator, className) });
8611
8640
  }
8612
8641
  SelectSeparator.displayName = "Select.Separator";
8613
8642
  var Select = {
@@ -8627,7 +8656,7 @@ var Select = {
8627
8656
  };
8628
8657
 
8629
8658
  // src/internal/swatch.tsx
8630
- import * as React65 from "react";
8659
+ import * as React66 from "react";
8631
8660
 
8632
8661
  // src/internal/swatch.module.css
8633
8662
  var swatch_default = {
@@ -8644,7 +8673,7 @@ var swatch_default = {
8644
8673
  };
8645
8674
 
8646
8675
  // src/internal/swatch.tsx
8647
- import { Fragment as Fragment17, jsx as jsx42, jsxs as jsxs27 } from "react/jsx-runtime";
8676
+ import { Fragment as Fragment17, jsx as jsx43, jsxs as jsxs27 } from "react/jsx-runtime";
8648
8677
  var COLOR_PRESETS = [
8649
8678
  { value: "#ef4444", label: "\u041A\u0440\u0430\u0441\u043D\u044B\u0439" },
8650
8679
  { value: "#f97316", label: "\u041E\u0440\u0430\u043D\u0436\u0435\u0432\u044B\u0439" },
@@ -8677,7 +8706,7 @@ var PALETTE_COLOR_NAMES = {
8677
8706
  };
8678
8707
  var PALETTE_ORDER = Object.keys(PALETTE_COLOR_NAMES);
8679
8708
  function useSwatchOptions(presets, allowEmpty, emptyLabel) {
8680
- return React65.useMemo(
8709
+ return React66.useMemo(
8681
8710
  () => [
8682
8711
  ...presets.map((preset) => ({ ...preset, contrast: markContrast(preset.value) })),
8683
8712
  ...allowEmpty ? [{ value: null, label: emptyLabel, contrast: "surface" }] : []
@@ -8686,7 +8715,7 @@ function useSwatchOptions(presets, allowEmpty, emptyLabel) {
8686
8715
  );
8687
8716
  }
8688
8717
  function usePaletteOptions(palette, allowEmpty, emptyLabel, names) {
8689
- return React65.useMemo(
8718
+ return React66.useMemo(
8690
8719
  () => [
8691
8720
  ...palette.map((hue) => ({ value: hue, label: names[hue], contrast: "hue" })),
8692
8721
  ...allowEmpty ? [{ value: null, label: emptyLabel, contrast: "surface" }] : []
@@ -8700,9 +8729,9 @@ var swatchTierClass = cx(fieldTierClass, swatch_default.tier);
8700
8729
  var swatchGridClass = swatch_default.grid;
8701
8730
  var checkerboardClass = swatch_default.checkerboard;
8702
8731
  function SwatchFill({ value, hue = false }) {
8703
- if (value == null) return /* @__PURE__ */ jsx42("span", { "aria-hidden": true, className: swatch_default.checker });
8704
- if (hue) return /* @__PURE__ */ jsx42("span", { "aria-hidden": true, className: cx(swatch_default.fill, swatch_default.hueFill) });
8705
- return /* @__PURE__ */ jsx42("svg", { className: swatch_default.fill, "aria-hidden": "true", viewBox: "0 0 1 1", preserveAspectRatio: "none", children: /* @__PURE__ */ jsx42("rect", { width: "1", height: "1", fill: value }) });
8732
+ if (value == null) return /* @__PURE__ */ jsx43("span", { "aria-hidden": true, className: swatch_default.checker });
8733
+ if (hue) return /* @__PURE__ */ jsx43("span", { "aria-hidden": true, className: cx(swatch_default.fill, swatch_default.hueFill) });
8734
+ return /* @__PURE__ */ jsx43("svg", { className: swatch_default.fill, "aria-hidden": "true", viewBox: "0 0 1 1", preserveAspectRatio: "none", children: /* @__PURE__ */ jsx43("rect", { width: "1", height: "1", fill: value }) });
8706
8735
  }
8707
8736
  function SwatchContent({
8708
8737
  value,
@@ -8710,12 +8739,12 @@ function SwatchContent({
8710
8739
  hue = false
8711
8740
  }) {
8712
8741
  return /* @__PURE__ */ jsxs27(Fragment17, { children: [
8713
- /* @__PURE__ */ jsx42(SwatchFill, { value, hue }),
8714
- /* @__PURE__ */ jsx42(CheckMark, { state: selected ? "checked" : "unchecked", className: swatch_default.check })
8742
+ /* @__PURE__ */ jsx43(SwatchFill, { value, hue }),
8743
+ /* @__PURE__ */ jsx43(CheckMark, { state: selected ? "checked" : "unchecked", className: swatch_default.check })
8715
8744
  ] });
8716
8745
  }
8717
8746
  function SwatchChip({ value, className, ...rest }) {
8718
- return /* @__PURE__ */ jsx42("span", { ...rest, "aria-hidden": true, className: cx(swatch_default.chip, className), children: /* @__PURE__ */ jsx42(SwatchFill, { value }) });
8747
+ return /* @__PURE__ */ jsx43("span", { ...rest, "aria-hidden": true, className: cx(swatch_default.chip, className), children: /* @__PURE__ */ jsx43(SwatchFill, { value }) });
8719
8748
  }
8720
8749
  function parseHexColor(text) {
8721
8750
  const hex = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(text.trim())?.[1]?.toLowerCase();
@@ -8769,15 +8798,15 @@ function balancedColumns(count, width, cell, gap) {
8769
8798
  return Math.ceil(count / rows);
8770
8799
  }
8771
8800
  function useBalancedColumns(gridRef, count, cellSelector) {
8772
- const [columns, setColumns] = React65.useState();
8773
- const measure = React65.useCallback(() => {
8801
+ const [columns, setColumns] = React66.useState();
8802
+ const measure = React66.useCallback(() => {
8774
8803
  const grid = gridRef.current;
8775
8804
  if (!grid) return;
8776
8805
  const cell = grid.querySelector(cellSelector)?.offsetHeight ?? 0;
8777
8806
  const gap = Number.parseFloat(getComputedStyle(grid).columnGap) || 0;
8778
8807
  setColumns(cell > 0 ? balancedColumns(count, grid.clientWidth, cell, gap) : void 0);
8779
8808
  }, [gridRef, count, cellSelector]);
8780
- React65.useLayoutEffect(measure, [measure]);
8809
+ React66.useLayoutEffect(measure, [measure]);
8781
8810
  useResizeEffect(gridRef, measure);
8782
8811
  return columns;
8783
8812
  }
@@ -8787,14 +8816,14 @@ function firstRowLength(items) {
8787
8816
  return Math.max(1, count === -1 ? items.length : count);
8788
8817
  }
8789
8818
  function useSwatchGrid(count) {
8790
- const items = React65.useRef([]);
8791
- const itemRef = React65.useCallback(
8819
+ const items = React66.useRef([]);
8820
+ const itemRef = React66.useCallback(
8792
8821
  (index) => (node) => {
8793
8822
  items.current[index] = node;
8794
8823
  },
8795
8824
  []
8796
8825
  );
8797
- const move = React65.useCallback(
8826
+ const move = React66.useCallback(
8798
8827
  (event, from, columns) => {
8799
8828
  const focused = document.activeElement;
8800
8829
  const current = focused instanceof HTMLElement ? items.current.indexOf(focused) : -1;
@@ -8811,14 +8840,14 @@ function useSwatchGrid(count) {
8811
8840
  },
8812
8841
  [count]
8813
8842
  );
8814
- const focus = React65.useCallback((index) => {
8843
+ const focus = React66.useCallback((index) => {
8815
8844
  items.current[index]?.focus({ preventScroll: true });
8816
8845
  }, []);
8817
8846
  return { itemRef, move, focus };
8818
8847
  }
8819
8848
 
8820
8849
  // src/components/color-swatches/ColorSwatches.tsx
8821
- import * as React66 from "react";
8850
+ import * as React67 from "react";
8822
8851
 
8823
8852
  // src/components/color-swatches/ColorSwatches.module.css
8824
8853
  var ColorSwatches_default = {
@@ -8826,7 +8855,7 @@ var ColorSwatches_default = {
8826
8855
  };
8827
8856
 
8828
8857
  // src/components/color-swatches/ColorSwatches.tsx
8829
- import { jsx as jsx43, jsxs as jsxs28 } from "react/jsx-runtime";
8858
+ import { jsx as jsx44, jsxs as jsxs28 } from "react/jsx-runtime";
8830
8859
  var COLOR_SWATCHES_LABELS = {
8831
8860
  group: "\u0426\u0432\u0435\u0442",
8832
8861
  empty: "\u0411\u0435\u0437 \u0446\u0432\u0435\u0442\u0430",
@@ -8843,7 +8872,7 @@ function ColorSwatches(props) {
8843
8872
  palette = PALETTE_ORDER,
8844
8873
  ...rest
8845
8874
  } = props;
8846
- return /* @__PURE__ */ jsx43(
8875
+ return /* @__PURE__ */ jsx44(
8847
8876
  SwatchGrid,
8848
8877
  {
8849
8878
  ...rest,
@@ -8886,7 +8915,7 @@ function SwatchGrid({
8886
8915
  const disabled = useInheritedDisabled(disabledProp);
8887
8916
  const frameSize = useControlSize(void 0);
8888
8917
  const merged = useLabels(COLOR_SWATCHES_LABELS, labelsProp);
8889
- const labels = React66.useMemo(
8918
+ const labels = React67.useMemo(
8890
8919
  () => ({
8891
8920
  ...merged,
8892
8921
  colorNames: { ...COLOR_SWATCHES_LABELS.colorNames, ...labelsProp?.colorNames }
@@ -8905,14 +8934,14 @@ function SwatchGrid({
8905
8934
  const selectedIndex = options.findIndex((option) => sameColor(option.value, value));
8906
8935
  const focusIndex = Math.max(0, selectedIndex);
8907
8936
  const grid = useSwatchGrid(options.length);
8908
- const gridRef = React66.useRef(null);
8937
+ const gridRef = React67.useRef(null);
8909
8938
  const columns = useBalancedColumns(gridRef, options.length, "[role='radio']");
8910
8939
  const labelledBy = ariaLabelledBy ?? ids.labelledBy;
8911
8940
  const onKeyDown2 = (event) => {
8912
8941
  const next = grid.move(event, focusIndex);
8913
8942
  if (next !== null) setValue(options[next]?.value ?? null);
8914
8943
  };
8915
- return /* @__PURE__ */ jsx43(
8944
+ return /* @__PURE__ */ jsx44(
8916
8945
  FieldFrame,
8917
8946
  {
8918
8947
  ...rest,
@@ -8957,7 +8986,7 @@ function SwatchGrid({
8957
8986
  const selected = index === selectedIndex;
8958
8987
  return (
8959
8988
  // biome-ignore lint/a11y/useSemanticElements: a swatch is a styled button in a roving radiogroup; a native radio cannot carry the color fill and check mark
8960
- /* @__PURE__ */ jsx43(
8989
+ /* @__PURE__ */ jsx44(
8961
8990
  "button",
8962
8991
  {
8963
8992
  ref: grid.itemRef(index),
@@ -8975,13 +9004,13 @@ function SwatchGrid({
8975
9004
  color: hues ? option.value ?? void 0 : void 0
8976
9005
  }),
8977
9006
  onClick: () => setValue(option.value),
8978
- children: /* @__PURE__ */ jsx43(SwatchContent, { value: option.value, selected, hue: hues })
9007
+ children: /* @__PURE__ */ jsx44(SwatchContent, { value: option.value, selected, hue: hues })
8979
9008
  },
8980
9009
  option.value ?? "empty"
8981
9010
  )
8982
9011
  );
8983
9012
  }),
8984
- name ? /* @__PURE__ */ jsx43("input", { type: "hidden", name, value: value ?? "" }) : null
9013
+ name ? /* @__PURE__ */ jsx44("input", { type: "hidden", name, value: value ?? "" }) : null
8985
9014
  ]
8986
9015
  }
8987
9016
  )
@@ -9118,6 +9147,9 @@ export {
9118
9147
  useFieldFrame,
9119
9148
  FieldFrame,
9120
9149
  FieldCounter,
9150
+ AUTOFILL_OFF,
9151
+ AutofillScope,
9152
+ useAutofill,
9121
9153
  FieldActionButton,
9122
9154
  FieldCopyButton,
9123
9155
  setControlValue,