@xsolla/xui-autocomplete 0.89.0 → 0.91.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/native/index.js +49 -174
  2. package/native/index.js.map +1 -1
  3. package/native/index.mjs +32 -157
  4. package/native/index.mjs.map +1 -1
  5. package/package.json +5 -4
  6. package/web/index.js +49 -180
  7. package/web/index.js.map +1 -1
  8. package/web/index.mjs +35 -166
  9. package/web/index.mjs.map +1 -1
package/web/index.js CHANGED
@@ -35,7 +35,7 @@ __export(index_exports, {
35
35
  module.exports = __toCommonJS(index_exports);
36
36
 
37
37
  // src/Autocomplete.tsx
38
- var import_react4 = require("react");
38
+ var import_react3 = require("react");
39
39
 
40
40
  // ../primitives-web/src/Box.tsx
41
41
  var import_react = __toESM(require("react"));
@@ -238,54 +238,10 @@ var Text = ({
238
238
  );
239
239
  };
240
240
 
241
- // ../primitives-web/src/Spinner.tsx
241
+ // ../primitives-web/src/Icon.tsx
242
242
  var import_styled_components3 = __toESM(require("styled-components"));
243
243
  var import_jsx_runtime3 = require("react/jsx-runtime");
244
- var rotate = import_styled_components3.keyframes`
245
- from {
246
- transform: rotate(0deg);
247
- }
248
- to {
249
- transform: rotate(360deg);
250
- }
251
- `;
252
- var StyledSpinner = import_styled_components3.default.div`
253
- width: ${(props) => typeof props.size === "number" ? `${props.size}px` : props.size || "24px"};
254
- height: ${(props) => typeof props.size === "number" ? `${props.size}px` : props.size || "24px"};
255
- border: ${(props) => props.strokeWidth || 2}px solid
256
- ${(props) => props.color || "currentColor"};
257
- border-bottom-color: transparent;
258
- border-radius: 50%;
259
- display: inline-block;
260
- box-sizing: border-box;
261
- animation: ${rotate} 1s linear infinite;
262
- `;
263
- var Spinner = ({
264
- role = "status",
265
- "aria-label": ariaLabel,
266
- "aria-live": ariaLive = "polite",
267
- "aria-describedby": ariaDescribedBy,
268
- testID,
269
- ...props
270
- }) => {
271
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
272
- StyledSpinner,
273
- {
274
- role,
275
- "aria-label": ariaLabel,
276
- "aria-live": ariaLive,
277
- "aria-describedby": ariaDescribedBy,
278
- "data-testid": testID,
279
- ...props
280
- }
281
- );
282
- };
283
- Spinner.displayName = "Spinner";
284
-
285
- // ../primitives-web/src/Icon.tsx
286
- var import_styled_components4 = __toESM(require("styled-components"));
287
- var import_jsx_runtime4 = require("react/jsx-runtime");
288
- var StyledIcon = import_styled_components4.default.div`
244
+ var StyledIcon = import_styled_components3.default.div`
289
245
  display: flex;
290
246
  align-items: center;
291
247
  justify-content: center;
@@ -301,36 +257,14 @@ var StyledIcon = import_styled_components4.default.div`
301
257
  }
302
258
  `;
303
259
  var Icon = ({ children, ...props }) => {
304
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(StyledIcon, { ...props, children });
260
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StyledIcon, { ...props, children });
305
261
  };
306
262
 
307
- // ../primitives-web/src/Divider.tsx
308
- var import_styled_components5 = __toESM(require("styled-components"));
309
- var import_jsx_runtime5 = require("react/jsx-runtime");
310
- var StyledDivider = import_styled_components5.default.div`
311
- background-color: ${(props) => props.dashStroke ? "transparent" : props.color || "rgba(255, 255, 255, 0.15)"};
312
- width: ${(props) => props.vertical ? typeof props.width === "number" ? `${props.width}px` : props.width || "1px" : "100%"};
313
- height: ${(props) => props.vertical ? "100%" : typeof props.height === "number" ? `${props.height}px` : props.height || "1px"};
314
-
315
- ${(props) => props.dashStroke && `
316
- border-style: dashed;
317
- border-color: ${props.color || "rgba(255, 255, 255, 0.15)"};
318
- border-width: 0;
319
- ${props.vertical ? `
320
- border-left-width: ${typeof props.width === "number" ? `${props.width}px` : props.width || "1px"};
321
- height: 100%;
322
- ` : `
323
- border-top-width: ${typeof props.height === "number" ? `${props.height}px` : props.height || "1px"};
324
- width: 100%;
325
- `}
326
- `}
327
- `;
328
-
329
263
  // ../primitives-web/src/Input.tsx
330
264
  var import_react2 = require("react");
331
- var import_styled_components6 = __toESM(require("styled-components"));
332
- var import_jsx_runtime6 = require("react/jsx-runtime");
333
- var StyledInput = import_styled_components6.default.input`
265
+ var import_styled_components4 = __toESM(require("styled-components"));
266
+ var import_jsx_runtime4 = require("react/jsx-runtime");
267
+ var StyledInput = import_styled_components4.default.input`
334
268
  background: transparent;
335
269
  border: none;
336
270
  outline: none;
@@ -389,7 +323,7 @@ var InputPrimitive = (0, import_react2.forwardRef)(
389
323
  }
390
324
  };
391
325
  const inputValue = value !== void 0 ? value : "";
392
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
326
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
393
327
  StyledInput,
394
328
  {
395
329
  ref,
@@ -423,76 +357,11 @@ var InputPrimitive = (0, import_react2.forwardRef)(
423
357
  );
424
358
  InputPrimitive.displayName = "InputPrimitive";
425
359
 
426
- // ../primitives-web/src/TextArea.tsx
427
- var import_react3 = require("react");
428
- var import_styled_components7 = __toESM(require("styled-components"));
429
- var import_jsx_runtime7 = require("react/jsx-runtime");
430
- var StyledTextArea = import_styled_components7.default.textarea`
431
- background: transparent;
432
- border: none;
433
- outline: none;
434
- width: 100%;
435
- height: 100%;
436
- padding: 0;
437
- margin: 0;
438
- color: ${(props) => props.color || "inherit"};
439
- font-size: ${(props) => typeof props.fontSize === "number" ? `${props.fontSize}px` : props.fontSize || "inherit"};
440
- font-family: inherit;
441
- text-align: inherit;
442
- resize: none;
443
-
444
- &::placeholder {
445
- color: ${(props) => props.placeholderTextColor || "rgba(255, 255, 255, 0.5)"};
446
- }
447
-
448
- &:disabled {
449
- cursor: not-allowed;
450
- }
451
- `;
452
- var TextAreaPrimitive = (0, import_react3.forwardRef)(
453
- ({
454
- value,
455
- placeholder,
456
- onChangeText,
457
- onFocus,
458
- onBlur,
459
- onKeyDown,
460
- disabled,
461
- style,
462
- color,
463
- fontSize,
464
- placeholderTextColor,
465
- maxLength,
466
- rows
467
- }, ref) => {
468
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
469
- StyledTextArea,
470
- {
471
- ref,
472
- value,
473
- placeholder,
474
- onChange: (e) => onChangeText?.(e.target.value),
475
- onFocus,
476
- onBlur,
477
- onKeyDown,
478
- disabled,
479
- style,
480
- color,
481
- fontSize,
482
- placeholderTextColor,
483
- maxLength,
484
- rows
485
- }
486
- );
487
- }
488
- );
489
- TextAreaPrimitive.displayName = "TextAreaPrimitive";
490
-
491
360
  // src/Autocomplete.tsx
492
361
  var import_xui_core = require("@xsolla/xui-core");
493
362
  var import_xui_spinner = require("@xsolla/xui-spinner");
494
- var import_jsx_runtime8 = require("react/jsx-runtime");
495
- var SearchIcon = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
363
+ var import_jsx_runtime5 = require("react/jsx-runtime");
364
+ var SearchIcon = () => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
496
365
  "svg",
497
366
  {
498
367
  width: "100%",
@@ -501,7 +370,7 @@ var SearchIcon = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
501
370
  fill: "none",
502
371
  xmlns: "http://www.w3.org/2000/svg",
503
372
  children: [
504
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
373
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
505
374
  "path",
506
375
  {
507
376
  d: "M8.25 14.25C11.5637 14.25 14.25 11.5637 14.25 8.25C14.25 4.93629 11.5637 2.25 8.25 2.25C4.93629 2.25 2.25 4.93629 2.25 8.25C2.25 11.5637 4.93629 14.25 8.25 14.25Z",
@@ -511,7 +380,7 @@ var SearchIcon = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
511
380
  strokeLinejoin: "round"
512
381
  }
513
382
  ),
514
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
383
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
515
384
  "path",
516
385
  {
517
386
  d: "M15.75 15.75L12.4875 12.4875",
@@ -524,7 +393,7 @@ var SearchIcon = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
524
393
  ]
525
394
  }
526
395
  );
527
- var ChevronDown = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
396
+ var ChevronDown = () => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
528
397
  "svg",
529
398
  {
530
399
  width: "100%",
@@ -532,7 +401,7 @@ var ChevronDown = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
532
401
  viewBox: "0 0 18 18",
533
402
  fill: "none",
534
403
  xmlns: "http://www.w3.org/2000/svg",
535
- children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
404
+ children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
536
405
  "path",
537
406
  {
538
407
  d: "M4.5 6.75L9 11.25L13.5 6.75",
@@ -544,7 +413,7 @@ var ChevronDown = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
544
413
  )
545
414
  }
546
415
  );
547
- var ChevronUp = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
416
+ var ChevronUp = () => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
548
417
  "svg",
549
418
  {
550
419
  width: "100%",
@@ -552,7 +421,7 @@ var ChevronUp = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
552
421
  viewBox: "0 0 18 18",
553
422
  fill: "none",
554
423
  xmlns: "http://www.w3.org/2000/svg",
555
- children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
424
+ children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
556
425
  "path",
557
426
  {
558
427
  d: "M13.5 11.25L9 6.75L4.5 11.25",
@@ -564,7 +433,7 @@ var ChevronUp = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
564
433
  )
565
434
  }
566
435
  );
567
- var CloseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
436
+ var CloseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
568
437
  "svg",
569
438
  {
570
439
  width: "100%",
@@ -573,7 +442,7 @@ var CloseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
573
442
  fill: "none",
574
443
  xmlns: "http://www.w3.org/2000/svg",
575
444
  children: [
576
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
445
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
577
446
  "path",
578
447
  {
579
448
  d: "M13.5 4.5L4.5 13.5",
@@ -583,7 +452,7 @@ var CloseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
583
452
  strokeLinejoin: "round"
584
453
  }
585
454
  ),
586
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
455
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
587
456
  "path",
588
457
  {
589
458
  d: "M4.5 4.5L13.5 13.5",
@@ -623,7 +492,7 @@ var Autocomplete = ({
623
492
  state: externalState,
624
493
  label,
625
494
  errorLabel,
626
- iconLeft = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SearchIcon, {}),
495
+ iconLeft = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SearchIcon, {}),
627
496
  chevronRight = true,
628
497
  filled = true,
629
498
  maxHeight = 250,
@@ -631,11 +500,11 @@ var Autocomplete = ({
631
500
  emptyMessage = "No results found"
632
501
  }) => {
633
502
  const { theme } = (0, import_xui_core.useDesignSystem)();
634
- const [internalValue, setInternalValue] = (0, import_react4.useState)(propValue || "");
635
- const [isFocused, setIsFocused] = (0, import_react4.useState)(false);
636
- const [activeIndex, setActiveIndex] = (0, import_react4.useState)(-1);
637
- const containerRef = (0, import_react4.useRef)(null);
638
- const inputRef = (0, import_react4.useRef)(null);
503
+ const [internalValue, setInternalValue] = (0, import_react3.useState)(propValue || "");
504
+ const [isFocused, setIsFocused] = (0, import_react3.useState)(false);
505
+ const [activeIndex, setActiveIndex] = (0, import_react3.useState)(-1);
506
+ const containerRef = (0, import_react3.useRef)(null);
507
+ const inputRef = (0, import_react3.useRef)(null);
639
508
  const value = propValue !== void 0 ? propValue : internalValue;
640
509
  const state = externalState || (isFocused ? "focus" : "default");
641
510
  const isDisable = state === "disable";
@@ -651,12 +520,12 @@ var Autocomplete = ({
651
520
  }));
652
521
  const hasOptions = normalizedOptions.length > 0;
653
522
  const showDropdown = isFocus && (hasOptions || isLoading || value.length > 0);
654
- (0, import_react4.useEffect)(() => {
523
+ (0, import_react3.useEffect)(() => {
655
524
  if (!showDropdown) {
656
525
  setActiveIndex(-1);
657
526
  }
658
527
  }, [showDropdown]);
659
- (0, import_react4.useEffect)(() => {
528
+ (0, import_react3.useEffect)(() => {
660
529
  const handleClickOutside = (event) => {
661
530
  if (containerRef.current && !containerRef.current.contains(event.target)) {
662
531
  setIsFocused(false);
@@ -669,7 +538,7 @@ var Autocomplete = ({
669
538
  document.removeEventListener("mousedown", handleClickOutside);
670
539
  };
671
540
  }, [isFocused]);
672
- (0, import_react4.useEffect)(() => {
541
+ (0, import_react3.useEffect)(() => {
673
542
  const handleEscape = (event) => {
674
543
  if (event.key === "Escape" && isFocused) {
675
544
  setIsFocused(false);
@@ -689,7 +558,7 @@ var Autocomplete = ({
689
558
  setActiveIndex(-1);
690
559
  }
691
560
  };
692
- const handleSelect = (0, import_react4.useCallback)(
561
+ const handleSelect = (0, import_react3.useCallback)(
693
562
  (option) => {
694
563
  setInternalValue(option.label);
695
564
  setIsFocused(false);
@@ -770,7 +639,7 @@ var Autocomplete = ({
770
639
  }
771
640
  return "transparent";
772
641
  };
773
- return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
642
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
774
643
  Box,
775
644
  {
776
645
  ref: containerRef,
@@ -779,7 +648,7 @@ var Autocomplete = ({
779
648
  width: "100%",
780
649
  position: "relative",
781
650
  children: [
782
- label && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
651
+ label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
783
652
  Text,
784
653
  {
785
654
  color: theme.colors.content.secondary,
@@ -789,7 +658,7 @@ var Autocomplete = ({
789
658
  children: label
790
659
  }
791
660
  ),
792
- /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
661
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
793
662
  Box,
794
663
  {
795
664
  backgroundColor,
@@ -807,8 +676,8 @@ var Autocomplete = ({
807
676
  borderColor: inputColors.borderHover
808
677
  } : void 0,
809
678
  children: [
810
- iconLeft && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { size: sizeStyles.iconSize, color: iconColor, children: iconLeft }) }),
811
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { flex: 1, height: "100%", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
679
+ iconLeft && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Box, { alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { size: sizeStyles.iconSize, color: iconColor, children: iconLeft }) }),
680
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Box, { flex: 1, height: "100%", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
812
681
  InputPrimitive,
813
682
  {
814
683
  ref: inputRef,
@@ -828,9 +697,9 @@ var Autocomplete = ({
828
697
  "aria-activedescendant": activeIndex >= 0 ? `autocomplete-option-${normalizedOptions[activeIndex]?.id}` : void 0
829
698
  }
830
699
  ) }),
831
- /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Box, { flexDirection: "row", alignItems: "center", gap: 4, children: [
832
- value.length > 0 && !isDisable && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { onPress: handleClear, padding: 2, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { size: sizeStyles.iconSize - 2, color: iconColor, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CloseIcon, {}) }) }),
833
- chevronRight && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
700
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Box, { flexDirection: "row", alignItems: "center", gap: 4, children: [
701
+ value.length > 0 && !isDisable && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Box, { onPress: handleClear, padding: 2, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { size: sizeStyles.iconSize - 2, color: iconColor, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CloseIcon, {}) }) }),
702
+ chevronRight && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
834
703
  Box,
835
704
  {
836
705
  alignItems: "center",
@@ -846,14 +715,14 @@ var Autocomplete = ({
846
715
  }
847
716
  },
848
717
  style: { cursor: isDisable ? "not-allowed" : "pointer" },
849
- children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { size: sizeStyles.iconSize, color: iconColor, children: isFocus ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ChevronUp, {}) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ChevronDown, {}) })
718
+ children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { size: sizeStyles.iconSize, color: iconColor, children: isFocus ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChevronUp, {}) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChevronDown, {}) })
850
719
  }
851
720
  )
852
721
  ] })
853
722
  ]
854
723
  }
855
724
  ),
856
- showDropdown && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
725
+ showDropdown && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
857
726
  Box,
858
727
  {
859
728
  position: "absolute",
@@ -875,14 +744,14 @@ var Autocomplete = ({
875
744
  id: "autocomplete-listbox",
876
745
  role: "listbox",
877
746
  "aria-label": "Autocomplete suggestions",
878
- children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
747
+ children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
879
748
  Box,
880
749
  {
881
750
  padding: 16,
882
751
  alignItems: "center",
883
752
  justifyContent: "center",
884
753
  minHeight: 60,
885
- children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
754
+ children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
886
755
  import_xui_spinner.Spinner,
887
756
  {
888
757
  size: "md",
@@ -890,7 +759,7 @@ var Autocomplete = ({
890
759
  }
891
760
  )
892
761
  }
893
- ) : hasOptions ? normalizedOptions.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
762
+ ) : hasOptions ? normalizedOptions.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
894
763
  Box,
895
764
  {
896
765
  id: `autocomplete-option-${option.id}`,
@@ -911,14 +780,14 @@ var Autocomplete = ({
911
780
  opacity: option.disabled ? 0.5 : 1
912
781
  },
913
782
  children: [
914
- option.icon && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
783
+ option.icon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
915
784
  Box,
916
785
  {
917
786
  width: menuSizeStyles.iconSize,
918
787
  marginTop: option.description ? 2 : 0,
919
788
  alignItems: "center",
920
789
  justifyContent: "center",
921
- children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
790
+ children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
922
791
  Icon,
923
792
  {
924
793
  size: menuSizeStyles.iconSize,
@@ -928,8 +797,8 @@ var Autocomplete = ({
928
797
  )
929
798
  }
930
799
  ),
931
- /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Box, { flex: 1, flexDirection: "column", gap: 2, children: [
932
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
800
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Box, { flex: 1, flexDirection: "column", gap: 2, children: [
801
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
933
802
  Text,
934
803
  {
935
804
  color: option.disabled ? theme.colors.control.input.textDisable : theme.colors.content.primary,
@@ -939,7 +808,7 @@ var Autocomplete = ({
939
808
  children: option.label
940
809
  }
941
810
  ),
942
- option.description && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
811
+ option.description && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
943
812
  Text,
944
813
  {
945
814
  color: theme.colors.content.tertiary,
@@ -952,7 +821,7 @@ var Autocomplete = ({
952
821
  ]
953
822
  },
954
823
  option.id
955
- )) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { padding: 16, alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
824
+ )) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Box, { padding: 16, alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
956
825
  Text,
957
826
  {
958
827
  color: theme.colors.content.tertiary,
@@ -962,7 +831,7 @@ var Autocomplete = ({
962
831
  ) })
963
832
  }
964
833
  ),
965
- isError && errorLabel && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
834
+ isError && errorLabel && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
966
835
  Text,
967
836
  {
968
837
  color: theme.colors.content.alert.primary,