@multiplatform.one/forms 6.0.0

package/dist/jsx/fields/Combobox/index.native.js

@@ -0,0 +1,2032 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var Combobox_exports = {};
+__export(Combobox_exports, {
+  Combobox: () => Combobox
+});
+module.exports = __toCommonJS(Combobox_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_react2 = require("@phosphor-icons/react");
+var import_react3 = require("@floating-ui/react");
+var import_tamagui = require("tamagui");
+var import_Chip = require("../../Chip/index.native.js");
+var import_Skeleton = require("../../Skeleton/index.native.js");
+var import_fieldLayout = require("../../fieldLayout.native.js");
+var import_InputParts = require("../../InputParts/index.native.js");
+var import_Spinner = require("../../Spinner/index.native.js");
+var import_colorRamps = require("../../shared/colorRamps.native.js");
+var import_utils = require("../../shared/utils.native.js");
+var import_floatingList = require("../../shared/floatingList.native.js");
+var import_FloatingPanel = require("../../FloatingPanel/index.native.js");
+var import_zIndex = require("../../shared/zIndex.native.js");
+var import_useDragScroll = require("../../shared/useDragScroll.native.js");
+var import_tableCellContext = require("../../shared/tableCellContext.native.js");
+var scrollArrowBuffer = 28;
+var ComboboxRow = (0, import_tamagui.styled)(import_tamagui.View, {
+  name: "ComboboxRow",
+  flexDirection: "row",
+  alignItems: "center",
+  gap: "$2",
+  paddingHorizontal: "$3",
+  cursor: "default",
+  outlineStyle: "none",
+  hoverStyle: {
+    backgroundColor: import_colorRamps.formInputColors.background.focus
+  },
+  focusStyle: {
+    outlineStyle: "none"
+  },
+  focusVisibleStyle: {
+    outlineStyle: "none"
+  },
+  variants: {
+    selected: {
+      true: {
+        backgroundColor: import_colorRamps.formInputColors.background.base
+      },
+      false: {
+        backgroundColor: "transparent"
+      }
+    },
+    size: {
+      "...size": function (val) {
+        return {
+          height: val
+        };
+      }
+    }
+  }
+});
+var GroupHeader = (0, import_tamagui.styled)(import_tamagui.Text, {
+  name: "ComboboxGroupHeader",
+  paddingHorizontal: "$3",
+  paddingVertical: "$2",
+  paddingTop: "$3",
+  fontWeight: "600",
+  fontSize: "$2",
+  opacity: 0.6,
+  numberOfLines: 1,
+  userSelect: "none",
+  cursor: "default"
+});
+function groupComboboxOptions(options) {
+  var hasGroups = options.some(function (o) {
+    return o.group;
+  });
+  if (!hasGroups) {
+    return {
+      items: options.map(function (option3, index) {
+        return {
+          type: "option",
+          option: option3,
+          flatIndex: index
+        };
+      }),
+      flatOptions: options
+    };
+  }
+  var ungrouped = options.filter(function (o) {
+    return !o.group;
+  });
+  var grouped = options.filter(function (o) {
+    return o.group;
+  });
+  var groups = /* @__PURE__ */new Map();
+  var _iteratorNormalCompletion = true,
+    _didIteratorError = false,
+    _iteratorError = void 0;
+  try {
+    for (var _iterator = grouped[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+      var option = _step.value;
+      var groupLabel = option.group;
+      if (!groups.has(groupLabel)) {
+        groups.set(groupLabel, []);
+      }
+      groups.get(groupLabel).push(option);
+    }
+  } catch (err) {
+    _didIteratorError = true;
+    _iteratorError = err;
+  } finally {
+    try {
+      if (!_iteratorNormalCompletion && _iterator.return != null) {
+        _iterator.return();
+      }
+    } finally {
+      if (_didIteratorError) {
+        throw _iteratorError;
+      }
+    }
+  }
+  var items = [];
+  var flatOptions = [];
+  var _iteratorNormalCompletion1 = true,
+    _didIteratorError1 = false,
+    _iteratorError1 = void 0;
+  try {
+    for (var _iterator1 = ungrouped[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = true) {
+      var option1 = _step1.value;
+      items.push({
+        type: "option",
+        option: option1,
+        flatIndex: flatOptions.length
+      });
+      flatOptions.push(option1);
+    }
+  } catch (err) {
+    _didIteratorError1 = true;
+    _iteratorError1 = err;
+  } finally {
+    try {
+      if (!_iteratorNormalCompletion1 && _iterator1.return != null) {
+        _iterator1.return();
+      }
+    } finally {
+      if (_didIteratorError1) {
+        throw _iteratorError1;
+      }
+    }
+  }
+  var _iteratorNormalCompletion2 = true,
+    _didIteratorError2 = false,
+    _iteratorError2 = void 0;
+  try {
+    for (var _iterator2 = groups[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+      var [groupLabel1, groupOptions] = _step2.value;
+      items.push({
+        type: "header",
+        label: groupLabel1
+      });
+      var _iteratorNormalCompletion3 = true,
+        _didIteratorError3 = false,
+        _iteratorError3 = void 0;
+      try {
+        for (var _iterator3 = groupOptions[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
+          var option2 = _step3.value;
+          items.push({
+            type: "option",
+            option: option2,
+            flatIndex: flatOptions.length
+          });
+          flatOptions.push(option2);
+        }
+      } catch (err) {
+        _didIteratorError3 = true;
+        _iteratorError3 = err;
+      } finally {
+        try {
+          if (!_iteratorNormalCompletion3 && _iterator3.return != null) {
+            _iterator3.return();
+          }
+        } finally {
+          if (_didIteratorError3) {
+            throw _iteratorError3;
+          }
+        }
+      }
+    }
+  } catch (err) {
+    _didIteratorError2 = true;
+    _iteratorError2 = err;
+  } finally {
+    try {
+      if (!_iteratorNormalCompletion2 && _iterator2.return != null) {
+        _iterator2.return();
+      }
+    } finally {
+      if (_didIteratorError2) {
+        throw _iteratorError2;
+      }
+    }
+  }
+  return {
+    items,
+    flatOptions
+  };
+}
+var ComboboxItem = /* @__PURE__ */(0, import_react.memo)(function ComboboxItem2(param) {
+  var {
+    option,
+    index,
+    isSelected,
+    isActive,
+    suppressHover,
+    handlers
+  } = param;
+  var ctx = handlers.current;
+  var itemProps = ctx.getItemProps({
+    onClick(event) {
+      ctx.onSelect(option, index, event);
+    }
+  });
+  var defaultOnKeyDown = itemProps.onKeyDown;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(ComboboxRow, {
+    ref: function ref(node) {
+      ctx.listItemsRef.current[index] = node;
+    },
+    ...itemProps,
+    "data-combobox-index": index,
+    "data-active": isActive,
+    onKeyDown: function onKeyDown(e) {
+      if (["j", "k"].includes(e.key)) {
+        var _ctx_onItemKeyDown;
+        (_ctx_onItemKeyDown = ctx.onItemKeyDown) === null || _ctx_onItemKeyDown === void 0 ? void 0 : _ctx_onItemKeyDown.call(ctx, e, index);
+      } else {
+        defaultOnKeyDown === null || defaultOnKeyDown === void 0 ? void 0 : defaultOnKeyDown(e);
+      }
+    },
+    ...(ctx.onItemHover ? {
+      onMouseEnter: ctx.onItemHover
+    } : {}),
+    role: "option",
+    tabIndex: -1,
+    selected: isSelected,
+    "aria-selected": isSelected,
+    "data-state": isSelected ? "active" : "inactive",
+    size: ctx.knobProps.sizeToken,
+    ...(suppressHover ? {
+      hoverStyle: {
+        backgroundColor: isActive ? import_colorRamps.formInputColors.background.focus : isSelected ? import_colorRamps.formInputColors.background.base : "transparent"
+      },
+      backgroundColor: isActive ? import_colorRamps.formInputColors.background.focus : isSelected ? import_colorRamps.formInputColors.background.base : void 0
+    } : {
+      hoverStyle: {
+        backgroundColor: isSelected ? import_colorRamps.formInputColors.background.base : import_colorRamps.formInputColors.background.focus
+      }
+    }),
+    ...(ctx.knobProps.transition ? {
+      animation: ctx.knobProps.transition
+    } : void 0),
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+      fontFamily: ctx.knobProps.body.fontFamily,
+      fontWeight: ctx.knobProps.body.fontWeight,
+      color: ctx.textColor,
+      numberOfLines: 1,
+      flex: 1,
+      children: option.label
+    }), isSelected && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.CheckIcon, {
+      size: 14
+    })]
+  });
+});
+function FloatingComboboxCore(param) {
+  var {
+    options,
+    value,
+    onValueChange,
+    onBlur,
+    placeholder,
+    searchPlaceholder,
+    emptyMessage,
+    onSearch,
+    loading,
+    onLoadMore,
+    hasMore,
+    disabled,
+    id,
+    tabIndexOverride,
+    popoverWidth,
+    trigger: triggerRender,
+    knobProps,
+    multiple,
+    dismissible,
+    creatable,
+    onCreate,
+    createLabel = 'Create "{value}"',
+    hideSearch,
+    searchValue,
+    open: openProp,
+    onOpenChange
+  } = param;
+  var _ref;
+  var inTableCell = (0, import_tableCellContext.useIsInTableCell)();
+  var [internalOpen, setInternalOpen] = (0, import_react.useState)(false);
+  var open = openProp !== void 0 ? openProp : internalOpen;
+  var setOpen = (0, import_react.useCallback)(function (nextOpen) {
+    if (openProp !== void 0) {
+      onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(nextOpen);
+    } else {
+      setInternalOpen(nextOpen);
+    }
+  }, [openProp, onOpenChange]);
+  var [internalFilter, setInternalFilter] = (0, import_react.useState)("");
+  var filter = searchValue !== void 0 ? searchValue : internalFilter;
+  var [activeIndex, setActiveIndex] = (0, import_react.useState)(null);
+  var textColor = knobProps.textAccentColor;
+  var labelCacheRef = (0, import_react.useRef)(/* @__PURE__ */new Map());
+  var _iteratorNormalCompletion = true,
+    _didIteratorError = false,
+    _iteratorError = void 0;
+  try {
+    for (var _iterator = options[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+      var o = _step.value;
+      labelCacheRef.current.set(o.value, o.label);
+    }
+  } catch (err) {
+    _didIteratorError = true;
+    _iteratorError = err;
+  } finally {
+    try {
+      if (!_iteratorNormalCompletion && _iterator.return != null) {
+        _iterator.return();
+      }
+    } finally {
+      if (_didIteratorError) {
+        throw _iteratorError;
+      }
+    }
+  }
+  var getLabel = (0, import_react.useCallback)(function (v) {
+    var _labelCacheRef_current_get;
+    return (_labelCacheRef_current_get = labelCacheRef.current.get(v)) !== null && _labelCacheRef_current_get !== void 0 ? _labelCacheRef_current_get : v;
+  }, []);
+  var selectedValues = (0, import_react.useMemo)(function () {
+    if (!multiple) return [];
+    var vals = Array.isArray(value) ? value : value ? [value] : [];
+    return [...vals].sort(function (a, b) {
+      return getLabel(a).localeCompare(getLabel(b));
+    });
+  }, [multiple, value, getLabel]);
+  var selectedOption = (0, import_react.useMemo)(function () {
+    return multiple ? void 0 : options.find(function (option) {
+      return option.value === value;
+    });
+  }, [options, value, multiple]);
+  var selectedOptions = (0, import_react.useMemo)(function () {
+    return multiple ? options.filter(function (o2) {
+      return selectedValues.includes(o2.value);
+    }) : [];
+  }, [options, selectedValues, multiple]);
+  var isSelected = (0, import_react.useCallback)(function (optionValue) {
+    return multiple ? selectedValues.includes(optionValue) : optionValue === value;
+  }, [multiple, selectedValues, value]);
+  var handleDismiss = (0, import_react.useCallback)(function (valueToRemove) {
+    if (!multiple) return;
+    var current = Array.isArray(value) ? value : value ? [value] : [];
+    var next = current.filter(function (v) {
+      return v !== valueToRemove;
+    });
+    onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(next);
+  }, [multiple, value, onValueChange]);
+  var filtered = (0, import_react.useMemo)(function () {
+    if (onSearch || !filter) return options;
+    var query = filter.toLowerCase();
+    return options.filter(function (option) {
+      return option.label.toLowerCase().includes(query) || option.value.toLowerCase().includes(query) || option.keywords && option.keywords.toLowerCase().includes(query);
+    });
+  }, [options, filter, onSearch]);
+  var showCreateOption = (0, import_react.useMemo)(function () {
+    if (!creatable || !filter.trim()) return false;
+    var trimmed = filter.trim().toLowerCase();
+    return !options.some(function (o2) {
+      return o2.label.toLowerCase() === trimmed || o2.value.toLowerCase() === trimmed;
+    });
+  }, [creatable, filter, options]);
+  var handleCreate = (0, import_react.useCallback)(function () {
+    if (!onCreate || !filter.trim()) return;
+    var newOption = onCreate(filter.trim());
+    if (newOption) {
+      if (multiple) {
+        var current = Array.isArray(value) ? value : value ? [value] : [];
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange([...current, newOption.value]);
+      } else {
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newOption.value);
+        setOpen(false);
+      }
+    }
+    setInternalFilter("");
+  }, [onCreate, filter, multiple, value, onValueChange]);
+  var initialOrderRef = (0, import_react.useRef)(null);
+  var hasSearchedRef = (0, import_react.useRef)(false);
+  var sortedFiltered = (0, import_react.useMemo)(function () {
+    if (filter.trim()) {
+      hasSearchedRef.current = true;
+      return filtered;
+    }
+    if (!multiple) return filtered;
+    if (!open) return filtered;
+    if (hasSearchedRef.current) return filtered;
+    if (initialOrderRef.current === null) {
+      var current = Array.isArray(value) ? value : value ? [value] : [];
+      var snap = new Set(current);
+      if (snap.size === 0) {
+        initialOrderRef.current = filtered;
+      } else {
+        var first = filtered.filter(function (o2) {
+          return snap.has(o2.value);
+        }).sort(function (a, b) {
+          return a.label.localeCompare(b.label);
+        });
+        var rest = filtered.filter(function (o2) {
+          return !snap.has(o2.value);
+        });
+        initialOrderRef.current = [...first, ...rest];
+      }
+    }
+    return initialOrderRef.current;
+  }, [filtered, filter, open, multiple, value]);
+  var {
+    items: groupedItems,
+    flatOptions: _flatOptions
+  } = (0, import_react.useMemo)(function () {
+    return groupComboboxOptions(sortedFiltered);
+  }, [sortedFiltered]);
+  var searchCleanupRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(function () {
+    if (!onSearch || !open) return;
+    var timerId = setTimeout(function () {
+      var _searchCleanupRef_current;
+      (_searchCleanupRef_current = searchCleanupRef.current) === null || _searchCleanupRef_current === void 0 ? void 0 : _searchCleanupRef_current.call(searchCleanupRef);
+      var cleanup = onSearch(filter);
+      searchCleanupRef.current = cleanup !== null && cleanup !== void 0 ? cleanup : null;
+    }, 200);
+    return function () {
+      var _searchCleanupRef_current;
+      clearTimeout(timerId);
+      (_searchCleanupRef_current = searchCleanupRef.current) === null || _searchCleanupRef_current === void 0 ? void 0 : _searchCleanupRef_current.call(searchCleanupRef);
+      searchCleanupRef.current = null;
+    };
+  }, [filter, onSearch, open]);
+  var listItemsRef = (0, import_react.useRef)([]);
+  var searchInputRef = (0, import_react.useRef)(null);
+  var listScrollRef = (0, import_react.useRef)(null);
+  var keyboardNavRef = (0, import_react.useRef)(false);
+  var lastMousePosRef = (0, import_react.useRef)(null);
+  var currentMousePosRef = (0, import_react.useRef)({
+    x: 0,
+    y: 0
+  });
+  var lastKeyboardNavTimeRef = (0, import_react.useRef)(0);
+  var overlayStyle = (0, import_react.useRef)(null);
+  var searchTopRef = (0, import_react.useRef)(null);
+  var grownRef = (0, import_react.useRef)(false);
+  var lastScrollTopRef = (0, import_react.useRef)(0);
+  var growConstraintRef = (0, import_react.useRef)(null);
+  var filterRef = (0, import_react.useRef)(filter);
+  filterRef.current = filter;
+  var repositionRef = (0, import_react.useRef)(null);
+  var panel = (0, import_FloatingPanel.useFloatingPanel)({
+    open,
+    onOpenChange: function onOpenChange2(nextOpen) {
+      setOpen(nextOpen);
+      if (!nextOpen) onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    },
+    disabled,
+    repositionRef,
+    wheelGrowRef: grownRef,
+    scrollBoundaryRef: listScrollRef,
+    middleware: [],
+    useAutoUpdate: false,
+    onBeforeOpen: function onBeforeOpen() {
+      overlayStyle.current = null;
+      searchTopRef.current = null;
+      grownRef.current = false;
+      lastScrollTopRef.current = 0;
+    }
+  });
+  var {
+    scrollRef: dragScrollRef,
+    dragProps
+  } = (0, import_useDragScroll.useDragScroll)({
+    direction: "vertical"
+  });
+  (0, import_react.useEffect)(function () {
+    if (listScrollRef.current) {
+      dragScrollRef.current = listScrollRef.current;
+    }
+  }, [open, dragScrollRef]);
+  var justResetFromFilterRef = (0, import_react.useRef)(false);
+  (0, import_react.useEffect)(function () {
+    if (open) {
+      justResetFromFilterRef.current = true;
+      setActiveIndex(0);
+      hasSelectedSinceOpenRef.current = false;
+    } else {
+      setInternalFilter("");
+      setActiveIndex(null);
+      lastMousePosRef.current = null;
+      initialOrderRef.current = null;
+      hasSearchedRef.current = false;
+    }
+  }, [open]);
+  var activeIndexRef = (0, import_react.useRef)(activeIndex);
+  activeIndexRef.current = activeIndex;
+  var sortedFilteredRef = (0, import_react.useRef)(sortedFiltered);
+  sortedFilteredRef.current = sortedFiltered;
+  var showCreateOptionRef = (0, import_react.useRef)(showCreateOption);
+  showCreateOptionRef.current = showCreateOption;
+  var multipleRef = (0, import_react.useRef)(multiple);
+  multipleRef.current = multiple;
+  var repositionOverlay = (0, import_react.useCallback)(function (source) {
+    var _ref2, _ref1;
+    var dropdownElement = panel.refs.floating.current;
+    var trigger = panel.triggerRef.current;
+    var listScrollElement = listScrollRef.current;
+    if (!dropdownElement || !trigger) return;
+    var suppressTransition = source === "init" || source === "filter";
+    if (suppressTransition) dropdownElement.style.transition = "none";
+    var triggerBounds = trigger.getBoundingClientRect();
+    var viewportHeight = window.innerHeight;
+    var viewportWidth = window.innerWidth;
+    var minWidth = popoverWidth !== null && popoverWidth !== void 0 ? popoverWidth : triggerBounds.width + 8;
+    var maxWidth = viewportWidth - 20;
+    dropdownElement.style.minWidth = `${minWidth}px`;
+    dropdownElement.style.maxWidth = `${maxWidth}px`;
+    if (popoverWidth) dropdownElement.style.width = `${popoverWidth}px`;
+    var searchBarElement = dropdownElement.children[0];
+    var searchBarHeight = (_ref2 = searchBarElement === null || searchBarElement === void 0 ? void 0 : searchBarElement.offsetHeight) !== null && _ref2 !== void 0 ? _ref2 : 0;
+    var listContentHeight = (_ref1 = listScrollElement === null || listScrollElement === void 0 ? void 0 : listScrollElement.scrollHeight) !== null && _ref1 !== void 0 ? _ref1 : 0;
+    var computedStyle = getComputedStyle(dropdownElement);
+    var borderHeight = (parseFloat(computedStyle.borderTopWidth) || 0) + (parseFloat(computedStyle.borderBottomWidth) || 0);
+    var contentHeight = searchBarHeight + listContentHeight + borderHeight;
+    var isDropup = panel.placement.startsWith("top");
+    var top;
+    if (searchTopRef.current === null) {
+      if (isDropup) {
+        var availableAbove = triggerBounds.bottom - import_FloatingPanel.panelViewportPadding;
+        var initialHeight = Math.min(contentHeight, availableAbove);
+        top = triggerBounds.bottom - initialHeight;
+      } else {
+        top = triggerBounds.top;
+      }
+      searchTopRef.current = top;
+      var maxAvailable = isDropup ? triggerBounds.bottom - top : viewportHeight - top - import_FloatingPanel.panelViewportPadding;
+      var height = Math.min(contentHeight, maxAvailable);
+      height = Math.max(120, height);
+      dropdownElement.style.top = `${top}px`;
+      dropdownElement.style.left = `${triggerBounds.left}px`;
+      dropdownElement.style.height = `${height}px`;
+      dropdownElement.style.maxHeight = "";
+      overlayStyle.current = {
+        top,
+        maxHeight: height
+      };
+      if (listScrollRef.current) listScrollRef.current.scrollTop = 0;
+      void dropdownElement.offsetHeight;
+      if (suppressTransition) dropdownElement.style.transition = import_FloatingPanel.panelTransition;
+      requestAnimationFrame(function () {
+        if (listScrollRef.current) {
+          panel.updateArrows(listScrollRef.current);
+          requestAnimationFrame(function () {
+            if (listScrollRef.current) panel.updateArrows(listScrollRef.current);
+          });
+        }
+      });
+      return;
+    } else if (source === "wheel") {
+      var _ref22;
+      var _overlayStyle_current;
+      top = searchTopRef.current;
+      var currentHeight = (_ref22 = (_overlayStyle_current = overlayStyle.current) === null || _overlayStyle_current === void 0 ? void 0 : _overlayStyle_current.maxHeight) !== null && _ref22 !== void 0 ? _ref22 : 0;
+      var grownHeight = currentHeight;
+      var constraint = growConstraintRef.current;
+      if (constraint !== "no-down") {
+        var canGrowDown = Math.max(0, viewportHeight - import_FloatingPanel.panelViewportPadding - (top + currentHeight));
+        grownHeight += canGrowDown;
+      }
+      if (constraint !== "no-up") {
+        var canGrowUp = Math.max(0, top - import_FloatingPanel.panelViewportPadding);
+        top -= canGrowUp;
+        grownHeight += canGrowUp;
+      }
+      grownHeight = Math.min(grownHeight, contentHeight);
+      searchTopRef.current = top;
+      var maxAvailable1 = viewportHeight - top - import_FloatingPanel.panelViewportPadding;
+      var height1 = Math.min(grownHeight, maxAvailable1);
+      height1 = Math.max(120, height1);
+      var triggerTop = triggerBounds.top;
+      var triggerBottom = triggerBounds.bottom;
+      if (!isDropup) {
+        top = Math.min(top, triggerTop);
+      } else {
+        var panelBottom = top + height1;
+        if (panelBottom < triggerBottom) {
+          top = triggerBottom - height1;
+        }
+      }
+      searchTopRef.current = top;
+      var cached = overlayStyle.current;
+      if (!cached || cached.top !== top || cached.maxHeight !== height1) {
+        dropdownElement.style.top = `${top}px`;
+        dropdownElement.style.left = `${triggerBounds.left}px`;
+        dropdownElement.style.height = `${height1}px`;
+        dropdownElement.style.maxHeight = "";
+        overlayStyle.current = {
+          top,
+          maxHeight: height1
+        };
+      }
+      void dropdownElement.offsetHeight;
+      requestAnimationFrame(function () {
+        if (listScrollRef.current) {
+          panel.updateArrows(listScrollRef.current);
+        }
+      });
+      return;
+    } else {
+      top = searchTopRef.current;
+    }
+    var hasTyped = filterRef.current.length > 0;
+    var maxAvailable2 = !hasTyped && isDropup ? triggerBounds.bottom - top : viewportHeight - top - import_FloatingPanel.panelViewportPadding;
+    var height2 = Math.min(contentHeight, maxAvailable2);
+    height2 = Math.max(120, height2);
+    var cached1 = overlayStyle.current;
+    if (!cached1 || cached1.top !== top || cached1.maxHeight !== height2) {
+      dropdownElement.style.top = `${top}px`;
+      dropdownElement.style.left = `${triggerBounds.left}px`;
+      dropdownElement.style.height = `${height2}px`;
+      dropdownElement.style.maxHeight = "";
+      overlayStyle.current = {
+        top,
+        maxHeight: height2
+      };
+    }
+    void dropdownElement.offsetHeight;
+    if (suppressTransition) dropdownElement.style.transition = import_FloatingPanel.panelTransition;
+    requestAnimationFrame(function () {
+      if (listScrollRef.current) {
+        panel.updateArrows(listScrollRef.current);
+        requestAnimationFrame(function () {
+          if (listScrollRef.current) panel.updateArrows(listScrollRef.current);
+        });
+      }
+    });
+  }, [panel.placement, panel.updateArrows, popoverWidth, panel.refs]);
+  repositionRef.current = function () {
+    return repositionOverlay("wheel");
+  };
+  (0, import_react.useLayoutEffect)(function () {
+    if (!open || !panel.mounted) return;
+    grownRef.current = false;
+    repositionOverlay("filter");
+  }, [open, panel.mounted, filtered.length, loading, repositionOverlay]);
+  (0, import_react.useEffect)(function () {
+    if (open && panel.mounted && !hideSearch) {
+      requestAnimationFrame(function () {
+        var _searchInputRef_current;
+        return (_searchInputRef_current = searchInputRef.current) === null || _searchInputRef_current === void 0 ? void 0 : _searchInputRef_current.focus();
+      });
+    }
+  }, [open, panel.mounted, hideSearch]);
+  var loadMoreTriggeredRef = (0, import_react.useRef)(false);
+  var repositionOverlayRef = (0, import_react.useRef)(repositionOverlay);
+  repositionOverlayRef.current = repositionOverlay;
+  var handleListScroll = (0, import_react.useCallback)(function (event) {
+    var element = event.target;
+    panel.updateArrows(element);
+    var arrowDir = panel.arrowScrollDirRef.current;
+    if (arrowDir) {
+      panel.arrowScrollDirRef.current = null;
+      lastScrollTopRef.current = element.scrollTop;
+      growConstraintRef.current = arrowDir === "down" ? "no-down" : "no-up";
+      repositionOverlayRef.current("wheel");
+      growConstraintRef.current = null;
+      return;
+    }
+    lastScrollTopRef.current = element.scrollTop;
+    if (onLoadMore && hasMore && !loading) {
+      var nearBottom = element.scrollHeight - element.scrollTop - element.clientHeight < 100;
+      if (nearBottom && !loadMoreTriggeredRef.current) {
+        loadMoreTriggeredRef.current = true;
+        onLoadMore();
+      } else if (!nearBottom) {
+        loadMoreTriggeredRef.current = false;
+      }
+    }
+  }, [panel.updateArrows, onLoadMore, hasMore, loading]);
+  (0, import_react.useEffect)(function () {
+    if (!open) return;
+    var frame = requestAnimationFrame(function () {
+      var scrollElement = listScrollRef.current;
+      if (scrollElement) panel.updateArrows(scrollElement);
+    });
+    return function () {
+      return cancelAnimationFrame(frame);
+    };
+  }, [open, filtered, panel.updateArrows]);
+  (0, import_react.useEffect)(function () {
+    if (!open || typeof document === "undefined") return;
+    var onMove = function onMove2(e) {
+      var _el_closest;
+      var {
+        clientX: x,
+        clientY: y
+      } = e;
+      currentMousePosRef.current = {
+        x,
+        y
+      };
+      if (keyboardNavRef.current) return;
+      var floating = panel.refs.floating.current;
+      if (!floating) return;
+      var el = document.elementFromPoint(x, y);
+      if (!el || !floating.contains(el)) return;
+      var row = (_el_closest = el.closest) === null || _el_closest === void 0 ? void 0 : _el_closest.call(el, "[data-combobox-index]");
+      var actualIndex = row === null || row === void 0 ? void 0 : row.getAttribute("data-combobox-index");
+      var list = sortedFilteredRef.current;
+      var len = list.length + (showCreateOptionRef.current ? 1 : 0);
+      var activeIdx = activeIndexRef.current;
+      var n = actualIndex != null ? Number(actualIndex) : null;
+      var next = n != null && n >= 0 && n < len ? n : activeIdx;
+      if (next !== activeIdx) {
+        setActiveIndex(next);
+      }
+    };
+    document.addEventListener("mousemove", onMove, {
+      passive: true
+    });
+    return function () {
+      return document.removeEventListener("mousemove", onMove);
+    };
+  }, [open, panel.refs]);
+  (0, import_react.useLayoutEffect)(function () {
+    var _currentMousePosRef_current;
+    keyboardNavRef.current = false;
+    var len = sortedFiltered.length + (showCreateOption ? 1 : 0);
+    listItemsRef.current.length = len;
+    justResetFromFilterRef.current = true;
+    var rawPos = (_currentMousePosRef_current = currentMousePosRef.current) !== null && _currentMousePosRef_current !== void 0 ? _currentMousePosRef_current : lastMousePosRef.current;
+    var pos = rawPos && (rawPos.x > 0 || rawPos.y > 0) ? rawPos : null;
+    if (pos && typeof document !== "undefined") {
+      var _el_closest;
+      var el = document.elementFromPoint(pos.x, pos.y);
+      var row = el === null || el === void 0 ? void 0 : (_el_closest = el.closest) === null || _el_closest === void 0 ? void 0 : _el_closest.call(el, "[data-combobox-index]");
+      var idx = row === null || row === void 0 ? void 0 : row.getAttribute("data-combobox-index");
+      if (idx != null) {
+        var n = Number(idx);
+        if (n >= 0 && n < len) setActiveIndex(n);else setActiveIndex(null);
+      } else {
+        setActiveIndex(null);
+      }
+    } else {
+      setActiveIndex(0);
+    }
+  }, [filter, sortedFiltered.length, showCreateOption]);
+  var click = (0, import_react3.useClick)(panel.context, {
+    event: "mousedown",
+    keyboardHandlers: false
+  });
+  var dismiss = (0, import_react3.useDismiss)(panel.context);
+  var role = (0, import_react3.useRole)(panel.context, {
+    role: "listbox"
+  });
+  var listNav = (0, import_react3.useListNavigation)(panel.context, {
+    listRef: listItemsRef,
+    activeIndex,
+    onNavigate: function onNavigate(index) {
+      if (index !== null) {
+        keyboardNavRef.current = true;
+        lastKeyboardNavTimeRef.current = Date.now();
+        lastMousePosRef.current = {
+          ...currentMousePosRef.current
+        };
+        setActiveIndex(index);
+      }
+    },
+    virtual: true,
+    loop: true,
+    scrollItemIntoView: false,
+    focusItemOnHover: false
+  });
+  var {
+    getReferenceProps,
+    getFloatingProps,
+    getItemProps
+  } = (0, import_react3.useInteractions)([click, dismiss, role, listNav]);
+  var lastSelectedIndexRef = (0, import_react.useRef)(null);
+  var hasSelectedSinceOpenRef = (0, import_react.useRef)(false);
+  var handleSelect = (0, import_react.useCallback)(function (option, index, event) {
+    hasSelectedSinceOpenRef.current = true;
+    if (multiple) {
+      var current = Array.isArray(value) ? value : value ? [value] : [];
+      if ((event === null || event === void 0 ? void 0 : event.shiftKey) && lastSelectedIndexRef.current != null) {
+        var from = Math.min(lastSelectedIndexRef.current, index);
+        var to = Math.max(lastSelectedIndexRef.current, index);
+        var rangeValues = sortedFiltered.slice(from, to + 1).map(function (o2) {
+          return o2.value;
+        });
+        var merged = /* @__PURE__ */new Set([...current, ...rangeValues]);
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange([...merged]);
+      } else {
+        var next = current.includes(option.value) ? current.filter(function (v) {
+          return v !== option.value;
+        }) : [...current, option.value];
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(next);
+        lastSelectedIndexRef.current = index;
+      }
+    } else {
+      onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(option.value);
+      setOpen(false);
+    }
+  }, [onValueChange, multiple, value, sortedFiltered]);
+  var handleListMouseMove = (0, import_react.useCallback)(function (e) {
+    var {
+      clientX,
+      clientY
+    } = e;
+    currentMousePosRef.current = {
+      x: clientX,
+      y: clientY
+    };
+    if (!keyboardNavRef.current && typeof document !== "undefined") {
+      var _el_closest;
+      var el = document.elementFromPoint(clientX, clientY);
+      var row = el === null || el === void 0 ? void 0 : (_el_closest = el.closest) === null || _el_closest === void 0 ? void 0 : _el_closest.call(el, "[data-combobox-index]");
+      var actualIndex = row === null || row === void 0 ? void 0 : row.getAttribute("data-combobox-index");
+      var list = sortedFilteredRef.current;
+      var len = list.length + (showCreateOptionRef.current ? 1 : 0);
+      var activeIdx = activeIndexRef.current;
+      var n = actualIndex != null ? Number(actualIndex) : null;
+      var next = n != null && n >= 0 && n < len ? n : activeIdx;
+      if (next !== activeIdx) setActiveIndex(next);
+    }
+    var last = lastMousePosRef.current;
+    var posChanged = last != null && (clientX !== last.x || clientY !== last.y);
+    if (!posChanged) return;
+    var now = Date.now();
+    if (now - lastKeyboardNavTimeRef.current < 200) return;
+    lastMousePosRef.current = {
+      x: clientX,
+      y: clientY
+    };
+    keyboardNavRef.current = false;
+  }, []);
+  var handlersRef = (0, import_react.useRef)({});
+  var handleSelectRef = (0, import_react.useRef)(handleSelect);
+  handleSelectRef.current = handleSelect;
+  (0, import_react.useEffect)(function () {
+    if (!open || typeof document === "undefined") return;
+    var onKeyDown = function onKeyDown2(e) {
+      var floatingEl = panel.refs.floating.current;
+      var triggerEl = panel.triggerRef.current;
+      var target = e.target;
+      var inPanel = target && ((floatingEl === null || floatingEl === void 0 ? void 0 : floatingEl.contains(target)) || (triggerEl === null || triggerEl === void 0 ? void 0 : triggerEl.contains(target)));
+      if (!inPanel) return;
+      if (e.key === "Escape") {
+        e.preventDefault();
+        e.stopPropagation();
+        setOpen(false);
+      } else if (e.key === "Enter" || e.key === " ") {
+        var target1 = e.target;
+        if (e.key === " " && (target1 === null || target1 === void 0 ? void 0 : target1.tagName) === "INPUT" && target1.type !== "checkbox") return;
+        e.preventDefault();
+        e.stopPropagation();
+        var idx = activeIndexRef.current;
+        var list = sortedFilteredRef.current;
+        var createIdx = showCreateOptionRef.current ? list.length : -1;
+        if (idx === createIdx && showCreateOptionRef.current) {
+          handleCreate();
+        } else if (e.key === "Enter" && multipleRef.current && hasSelectedSinceOpenRef.current) {
+          setOpen(false);
+        } else if (idx != null && list[idx]) {
+          handleSelectRef.current(list[idx], idx);
+          if (e.key === "Enter" || !multipleRef.current) setOpen(false);
+        } else {
+          setOpen(false);
+        }
+      }
+    };
+    document.addEventListener("keydown", onKeyDown, {
+      capture: true
+    });
+    return function () {
+      return document.removeEventListener("keydown", onKeyDown, {
+        capture: true
+      });
+    };
+  }, [open, showCreateOption, handleCreate, setOpen]);
+  var referenceProps = getReferenceProps({
+    ref: panel.setReferenceRef,
+    onKeyDown(event) {
+      if (event.key === "Enter" || event.code === "Space" || event.key === " " || event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "j" || event.key === "k") {
+        event.preventDefault();
+        setOpen(true);
+        setActiveIndex(0);
+      }
+    }
+  });
+  var boxEventProps = {};
+  var _iteratorNormalCompletion1 = true,
+    _didIteratorError1 = false,
+    _iteratorError1 = void 0;
+  try {
+    for (var _iterator1 = Object.entries(referenceProps)[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = true) {
+      var [key, val] = _step1.value;
+      if (key === "ref" || typeof val === "function") boxEventProps[key] = val;
+      if (key.startsWith("aria-") || key === "role" || key === "tabIndex") boxEventProps[key] = val;
+    }
+  } catch (err) {
+    _didIteratorError1 = true;
+    _iteratorError1 = err;
+  } finally {
+    try {
+      if (!_iteratorNormalCompletion1 && _iterator1.return != null) {
+        _iterator1.return();
+      }
+    } finally {
+      if (_didIteratorError1) {
+        throw _iteratorError1;
+      }
+    }
+  }
+  boxEventProps.tabIndex = disabled ? -1 : tabIndexOverride !== null && tabIndexOverride !== void 0 ? tabIndexOverride : 0;
+  boxEventProps.role = "combobox";
+  boxEventProps["aria-haspopup"] = "listbox";
+  boxEventProps["aria-expanded"] = open;
+  var totalNavigableItems = sortedFiltered.length + (showCreateOption ? 1 : 0);
+  var createOptionIndex = showCreateOption ? sortedFiltered.length : -1;
+  var handleItemKeyDown = (0, import_react.useCallback)(function (e, _index) {
+    var isDown = e.key === "j";
+    var isUp = e.key === "k";
+    if (isDown || isUp) {
+      e.preventDefault();
+      e.stopPropagation();
+      keyboardNavRef.current = true;
+      lastKeyboardNavTimeRef.current = Date.now();
+      lastMousePosRef.current = {
+        ...currentMousePosRef.current
+      };
+      setActiveIndex(function (prev) {
+        var next = isDown ? prev == null ? 0 : prev + 1 : prev == null ? totalNavigableItems - 1 : prev - 1;
+        return isDown ? next >= totalNavigableItems ? 0 : next : next < 0 ? totalNavigableItems - 1 : next;
+      });
+    }
+  }, [totalNavigableItems]);
+  handlersRef.current = {
+    getItemProps,
+    onSelect: handleSelect,
+    onItemHover: void 0,
+    onItemKeyDown: handleItemKeyDown,
+    knobProps,
+    textColor,
+    listItemsRef
+  };
+  var handleSearchKeyDown = (0, import_react.useCallback)(function (event) {
+    var isDown = event.key === "ArrowDown" || event.key === "j";
+    var isUp = event.key === "ArrowUp" || event.key === "k";
+    if (isDown) {
+      event.preventDefault();
+      keyboardNavRef.current = true;
+      lastKeyboardNavTimeRef.current = Date.now();
+      lastMousePosRef.current = {
+        ...currentMousePosRef.current
+      };
+      setActiveIndex(function (prev) {
+        var next = prev == null ? 0 : prev + 1;
+        return next >= totalNavigableItems ? 0 : next;
+      });
+    } else if (isUp) {
+      event.preventDefault();
+      keyboardNavRef.current = true;
+      lastKeyboardNavTimeRef.current = Date.now();
+      lastMousePosRef.current = {
+        ...currentMousePosRef.current
+      };
+      setActiveIndex(function (prev) {
+        var next = prev == null ? totalNavigableItems - 1 : prev - 1;
+        return next < 0 ? totalNavigableItems - 1 : next;
+      });
+    } else if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      if (activeIndex === createOptionIndex && showCreateOption) {
+        handleCreate();
+      } else if (event.key === "Enter" && multiple && hasSelectedSinceOpenRef.current) {
+        setOpen(false);
+      } else if (activeIndex != null && sortedFiltered[activeIndex]) {
+        handleSelect(sortedFiltered[activeIndex], activeIndex);
+        if (event.key === "Enter" || !multiple) setOpen(false);
+      } else {
+        setOpen(false);
+      }
+    } else if (event.key === "Escape") {
+      setOpen(false);
+    }
+  }, [sortedFiltered, activeIndex, handleSelect, handleCreate, totalNavigableItems, createOptionIndex, showCreateOption, multiple]);
+  (0, import_react.useEffect)(function () {
+    if (activeIndex == null) return;
+    var scrollContainer = listScrollRef.current;
+    if (!scrollContainer) return;
+    var rafId = requestAnimationFrame(function () {
+      var item = listItemsRef.current[activeIndex];
+      var container = listScrollRef.current;
+      if (!item || !container) return;
+      var containerRect = container.getBoundingClientRect();
+      var itemRect = item.getBoundingClientRect();
+      var bottomEdge = containerRect.bottom - scrollArrowBuffer;
+      var topEdge = containerRect.top + scrollArrowBuffer;
+      var didScroll = false;
+      var scrollDir = null;
+      if (itemRect.bottom > bottomEdge) {
+        scrollDir = "down";
+        container.scrollTop += itemRect.bottom - bottomEdge;
+        didScroll = true;
+      } else if (itemRect.top < topEdge) {
+        scrollDir = "up";
+        container.scrollTop -= topEdge - itemRect.top;
+        didScroll = true;
+      }
+      if (didScroll && scrollDir && !justResetFromFilterRef.current) {
+        lastScrollTopRef.current = container.scrollTop;
+        growConstraintRef.current = scrollDir === "down" ? "no-down" : "no-up";
+        repositionOverlayRef.current("wheel");
+        growConstraintRef.current = null;
+      }
+      justResetFromFilterRef.current = false;
+    });
+    return function () {
+      return cancelAnimationFrame(rafId);
+    };
+  }, [activeIndex, multiple ? value : void 0]);
+  var triggerContent = triggerRender ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    ...boxEventProps,
+    "data-testid": "combobox-trigger",
+    children: triggerRender(multiple ? selectedOptions : selectedOption, open)
+  }) : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_InputParts.Input.Box, {
+    ...boxEventProps,
+    "data-testid": "combobox-trigger",
+    cursor: disabled ? "not-allowed" : "pointer",
+    opacity: disabled ? 0.5 : 1,
+    disabled,
+    size: knobProps.sizeToken,
+    ...(inTableCell ? {} : {
+      borderRadius: knobProps.borderRadius.borderRadius,
+      borderWidth: knobProps.borderRadius.borderWidth
+    }),
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_floatingList.SyncFocusToOpen, {
+      open
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      flex: 1,
+      paddingHorizontal: "$3",
+      paddingVertical: "$2",
+      id,
+      justifyContent: multiple && selectedValues.length > 0 ? "center" : "flex-start",
+      alignItems: multiple && selectedValues.length > 0 ? "center" : "flex-start",
+      children: multiple && selectedValues.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+        flexDirection: "row",
+        flexWrap: "nowrap",
+        gap: "$1.5",
+        alignItems: "center",
+        maxHeight: (0, import_utils.getFieldHeight)(knobProps.sizeToken) * 0.75,
+        overflow: "hidden",
+        overflowX: "auto",
+        children: selectedValues.map(function (v) {
+          var _knobProps_sizeToken;
+          return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Chip.Chip, {
+            size: (_knobProps_sizeToken = {
+              $3: "$2",
+              $4: "$3",
+              $5: "$4"
+            }[knobProps.sizeToken]) !== null && _knobProps_sizeToken !== void 0 ? _knobProps_sizeToken : "$3",
+            color: "gray",
+            onDismiss: dismissible && !disabled ? function () {
+              return handleDismiss(v);
+            } : void 0,
+            children: getLabel(v)
+          }, v);
+        })
+      }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        fontFamily: knobProps.body.fontFamily,
+        fontWeight: knobProps.body.fontWeight,
+        color: selectedOption ? textColor : import_colorRamps.formCommonColors.muted,
+        numberOfLines: 1,
+        userSelect: "none",
+        children: (_ref = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) !== null && _ref !== void 0 ? _ref : placeholder
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      paddingRight: "$2",
+      alignSelf: "center",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.CaretDownIcon, {
+        size: 16
+      })
+    })]
+  });
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+    children: [triggerContent, panel.mounted && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react3.FloatingFocusManager, {
+      context: panel.context,
+      modal: false,
+      initialFocus: -1,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        outlineWidth: 0,
+        pointerEvents: panel.visible ? "auto" : "none",
+        ...getFloatingProps({
+          ref: panel.refs.setFloating
+        }),
+        style: {
+          position: "fixed",
+          top: 0,
+          left: 0,
+          zIndex: import_zIndex.zIndex.dropdown,
+          overflow: "hidden",
+          display: "flex",
+          flexDirection: "column",
+          boxShadow: "0px 8px 28px rgba(0,0,0,0.12), 0px 2px 6px rgba(0,0,0,0.04)",
+          opacity: panel.visible ? 1 : 0,
+          transform: panel.visible ? "scale(1)" : "scale(0.96)",
+          transition: import_FloatingPanel.panelTransition,
+          transformOrigin: panel.placement.startsWith("top") ? "bottom left" : "top left",
+          boxSizing: "border-box"
+        },
+        backgroundColor: "$background",
+        borderRadius: panel.dropdownRadius,
+        borderWidth: panel.hasBorder ? knobProps.borderRadius.borderWidth : 0,
+        borderColor: panel.hasBorder ? import_colorRamps.formInputColors.border.focus : "transparent",
+        "data-testid": "combobox-dropdown",
+        children: [!hideSearch && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input, {
+          size: knobProps.sizeToken,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_InputParts.Input.Box, {
+            borderWidth: 0,
+            borderBottomWidth: 1,
+            borderBottomColor: import_colorRamps.formCommonColors.divider,
+            borderRadius: 0,
+            elevation: void 0,
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Section, {
+              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Icon, {
+                adornment: "leading",
+                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.MagnifyingGlassIcon, {})
+              })
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Section, {
+              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Area, {
+                ref: searchInputRef,
+                defaultValue: "",
+                onChangeText: function onChangeText(text) {
+                  return setInternalFilter(text);
+                },
+                placeholder: searchPlaceholder,
+                onKeyDown: handleSearchKeyDown
+              })
+            }), loading ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Section, {
+              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Icon, {
+                adornment: "trailing",
+                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Spinner.Spinner, {
+                  size: "small"
+                })
+              })
+            }) : filter ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Section, {
+              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Button, {
+                onPress: function onPress() {
+                  return setInternalFilter("");
+                },
+                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Icon, {
+                  children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.XIcon, {})
+                })
+              })
+            }) : null]
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+          ref: listScrollRef,
+          overflow: "scroll",
+          flex: 1,
+          minHeight: 0,
+          onScroll: handleListScroll,
+          onMouseMove: handleListMouseMove,
+          onPointerDown: dragProps.onPointerDown,
+          style: dragProps.style,
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_floatingList.ScrollArrow, {
+            direction: "up",
+            scrollRef: listScrollRef,
+            visible: panel.arrowUp,
+            arrowScrollDirRef: panel.arrowScrollDirRef
+          }), sortedFiltered.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_react.Fragment, {
+            children: [multiple ? sortedFiltered.map(function (option, index) {
+              return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ComboboxItem, {
+                option,
+                index,
+                isSelected: isSelected(option.value),
+                isActive: index === activeIndex,
+                suppressHover: activeIndex != null,
+                handlers: handlersRef
+              }, option.value);
+            }) : groupedItems.map(function (item, _i) {
+              return item.type === "header" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(GroupHeader, {
+                color: textColor,
+                children: item.label
+              }, `header-${item.label}`) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(ComboboxItem, {
+                option: item.option,
+                index: item.flatIndex,
+                isSelected: isSelected(item.option.value),
+                isActive: item.flatIndex === activeIndex,
+                suppressHover: activeIndex != null,
+                handlers: handlersRef
+              }, item.option.value);
+            }), showCreateOption && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(ComboboxRow, {
+              role: "option",
+              tabIndex: -1,
+              selected: false,
+              size: knobProps.sizeToken,
+              "data-combobox-index": createOptionIndex,
+              "data-active": createOptionIndex === activeIndex,
+              backgroundColor: createOptionIndex === activeIndex ? import_colorRamps.formInputColors.background.focus : void 0,
+              hoverStyle: activeIndex != null ? {
+                backgroundColor: createOptionIndex === activeIndex ? import_colorRamps.formInputColors.background.focus : "transparent"
+              } : void 0,
+              onPress: handleCreate,
+              ...(knobProps.transition ? {
+                animation: knobProps.transition
+              } : void 0),
+              children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.PlusIcon, {
+                size: 14,
+                color: knobProps.textAccentColor
+              }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+                fontFamily: knobProps.body.fontFamily,
+                fontWeight: knobProps.body.fontWeight,
+                color: textColor,
+                numberOfLines: 1,
+                flex: 1,
+                children: createLabel.replace("{value}", filter.trim())
+              })]
+            })]
+          }, filter) : showCreateOption ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
+            flexDirection: "row",
+            alignItems: "center",
+            gap: "$2",
+            paddingHorizontal: "$3",
+            height: knobProps.sizeToken,
+            "data-combobox-index": createOptionIndex,
+            "data-active": createOptionIndex === activeIndex,
+            onPress: handleCreate,
+            hoverStyle: activeIndex != null ? {
+              backgroundColor: createOptionIndex === activeIndex ? import_colorRamps.formInputColors.background.focus : "transparent"
+            } : {
+              backgroundColor: import_colorRamps.formInputColors.background.focus
+            },
+            backgroundColor: createOptionIndex === activeIndex ? import_colorRamps.formInputColors.background.focus : "transparent",
+            pressStyle: {
+              backgroundColor: import_colorRamps.formInputColors.background.focus
+            },
+            ...(knobProps.transition ? {
+              animation: knobProps.transition
+            } : void 0),
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.PlusIcon, {
+              size: 14,
+              color: knobProps.textAccentColor
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+              fontFamily: knobProps.body.fontFamily,
+              fontWeight: knobProps.body.fontWeight,
+              color: textColor,
+              numberOfLines: 1,
+              flex: 1,
+              children: createLabel.replace("{value}", filter.trim())
+            })]
+          }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+            ...knobProps.panelPadding,
+            alignItems: "center",
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+              color: import_colorRamps.formCommonColors.muted,
+              fontSize: knobProps.sizeToken,
+              fontFamily: knobProps.body.fontFamily,
+              fontWeight: knobProps.body.fontWeight,
+              children: emptyMessage
+            })
+          }), hasMore && loading && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+            padding: "$2",
+            alignItems: "center",
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Spinner.Spinner, {
+              size: "small"
+            })
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_floatingList.ScrollArrow, {
+            direction: "down",
+            scrollRef: listScrollRef,
+            visible: panel.arrowDown,
+            arrowScrollDirRef: panel.arrowScrollDirRef
+          })]
+        })]
+      })
+    })]
+  });
+}
+var comboboxSearchHeader = function comboboxSearchHeader2(knobProps, filter, setFilter, searchPlaceholder, textColor, mutedColor, loading, onKeyDown) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+    alignItems: "center",
+    gap: "$2",
+    paddingHorizontal: "$3",
+    height: knobProps.sizeToken,
+    borderBottomWidth: 1,
+    borderBottomColor: import_colorRamps.formCommonColors.divider,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.MagnifyingGlassIcon, {
+      size: 16,
+      color: mutedColor
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Input, {
+      unstyled: true,
+      flex: 1,
+      placeholder: searchPlaceholder,
+      value: filter,
+      onChangeText: setFilter,
+      onKeyDown,
+      fontFamily: knobProps.body.fontFamily,
+      fontWeight: knobProps.body.fontWeight,
+      color: textColor,
+      placeholderTextColor: mutedColor,
+      autoFocus: true
+    }), loading ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Spinner.Spinner, {
+      size: "small"
+    }) : filter ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      onPress: function onPress() {
+        return setFilter("");
+      },
+      opacity: 0.6,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.XIcon, {
+        size: 16
+      })
+    }) : null]
+  });
+};
+function NativeComboboxCore(param) {
+  var {
+    options,
+    value,
+    onValueChange,
+    onBlur,
+    placeholder,
+    searchPlaceholder,
+    emptyMessage,
+    onSearch,
+    loading,
+    onLoadMore,
+    hasMore,
+    disabled,
+    id,
+    trigger: triggerRender,
+    knobProps,
+    multiple,
+    dismissible,
+    creatable,
+    onCreate,
+    createLabel = 'Create "{value}"',
+    hideSearch,
+    searchValue,
+    open: openProp,
+    onOpenChange
+  } = param;
+  var _ref, _knobProps_transition, _ref1;
+  var _theme_color7;
+  var inTableCell = (0, import_tableCellContext.useIsInTableCell)();
+  var [internalOpen, setInternalOpen] = (0, import_react.useState)(false);
+  var open = openProp !== void 0 ? openProp : internalOpen;
+  var setOpen = (0, import_react.useCallback)(function (nextOpen) {
+    if (openProp !== void 0) {
+      onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(nextOpen);
+    } else {
+      setInternalOpen(nextOpen);
+    }
+  }, [openProp, onOpenChange]);
+  var [internalFilter, setInternalFilter] = (0, import_react.useState)("");
+  var filter = searchValue !== void 0 ? searchValue : internalFilter;
+  var [activeIndex, setActiveIndex] = (0, import_react.useState)(0);
+  var listRef = (0, import_react.useRef)(null);
+  var textColor = knobProps.textAccentColor;
+  var theme = (0, import_tamagui.useTheme)();
+  var mutedColor = (_ref = (_theme_color7 = theme.color7) === null || _theme_color7 === void 0 ? void 0 : _theme_color7.val) !== null && _ref !== void 0 ? _ref : "$color7";
+  var labelCacheRef = (0, import_react.useRef)(/* @__PURE__ */new Map());
+  var _iteratorNormalCompletion = true,
+    _didIteratorError = false,
+    _iteratorError = void 0;
+  try {
+    for (var _iterator = options[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+      var o = _step.value;
+      labelCacheRef.current.set(o.value, o.label);
+    }
+  } catch (err) {
+    _didIteratorError = true;
+    _iteratorError = err;
+  } finally {
+    try {
+      if (!_iteratorNormalCompletion && _iterator.return != null) {
+        _iterator.return();
+      }
+    } finally {
+      if (_didIteratorError) {
+        throw _iteratorError;
+      }
+    }
+  }
+  var getLabel = (0, import_react.useCallback)(function (v) {
+    var _labelCacheRef_current_get;
+    return (_labelCacheRef_current_get = labelCacheRef.current.get(v)) !== null && _labelCacheRef_current_get !== void 0 ? _labelCacheRef_current_get : v;
+  }, []);
+  var selectedValues = (0, import_react.useMemo)(function () {
+    if (!multiple) return [];
+    var vals = Array.isArray(value) ? value : value ? [value] : [];
+    return [...vals].sort(function (a, b) {
+      return getLabel(a).localeCompare(getLabel(b));
+    });
+  }, [multiple, value, options]);
+  var selectedOption = (0, import_react.useMemo)(function () {
+    return multiple ? void 0 : options.find(function (o2) {
+      return o2.value === value;
+    });
+  }, [options, value, multiple]);
+  var selectedOptions = (0, import_react.useMemo)(function () {
+    return multiple ? options.filter(function (o2) {
+      return selectedValues.includes(o2.value);
+    }) : [];
+  }, [options, selectedValues, multiple]);
+  var isSelectedFn = (0, import_react.useCallback)(function (optionValue) {
+    return multiple ? selectedValues.includes(optionValue) : optionValue === value;
+  }, [multiple, selectedValues, value]);
+  var handleDismiss = (0, import_react.useCallback)(function (valueToRemove) {
+    if (!multiple) return;
+    var current = Array.isArray(value) ? value : value ? [value] : [];
+    var next = current.filter(function (v) {
+      return v !== valueToRemove;
+    });
+    onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(next);
+  }, [multiple, value, onValueChange]);
+  var filtered = (0, import_react.useMemo)(function () {
+    if (onSearch || !filter) return options;
+    var query = filter.toLowerCase();
+    return options.filter(function (option) {
+      return option.label.toLowerCase().includes(query) || option.value.toLowerCase().includes(query) || option.keywords && option.keywords.toLowerCase().includes(query);
+    });
+  }, [options, filter, onSearch]);
+  var showCreateOption = (0, import_react.useMemo)(function () {
+    if (!creatable || !filter.trim()) return false;
+    var trimmed = filter.trim().toLowerCase();
+    return !options.some(function (o2) {
+      return o2.label.toLowerCase() === trimmed || o2.value.toLowerCase() === trimmed;
+    });
+  }, [creatable, filter, options]);
+  var handleCreate = (0, import_react.useCallback)(function () {
+    if (!onCreate || !filter.trim()) return;
+    var newOption = onCreate(filter.trim());
+    if (newOption) {
+      if (multiple) {
+        var current = Array.isArray(value) ? value : value ? [value] : [];
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange([...current, newOption.value]);
+      } else {
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newOption.value);
+        setOpen(false);
+      }
+    }
+    setInternalFilter("");
+  }, [onCreate, filter, multiple, value, onValueChange]);
+  var hasScrollableContent = filtered.length > 6;
+  var sheetTransition = (_knobProps_transition = knobProps.transition) !== null && _knobProps_transition !== void 0 ? _knobProps_transition : "medium";
+  var sortedFiltered = (0, import_react.useMemo)(function () {
+    if (filter.trim()) return filtered;
+    var current = Array.isArray(value) ? value : value ? [value] : [];
+    if (current.length === 0) return filtered;
+    var first = filtered.filter(function (o2) {
+      return current.includes(o2.value);
+    }).sort(function (a, b) {
+      return getLabel(a.value).localeCompare(getLabel(b.value));
+    });
+    var rest = filtered.filter(function (o2) {
+      return !current.includes(o2.value);
+    });
+    return [...first, ...rest];
+  }, [filtered, value, filter, getLabel]);
+  var searchCleanupRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(function () {
+    if (!onSearch || !open) return;
+    var timerId = setTimeout(function () {
+      var _searchCleanupRef_current;
+      (_searchCleanupRef_current = searchCleanupRef.current) === null || _searchCleanupRef_current === void 0 ? void 0 : _searchCleanupRef_current.call(searchCleanupRef);
+      var cleanup = onSearch(filter);
+      searchCleanupRef.current = cleanup !== null && cleanup !== void 0 ? cleanup : null;
+    }, 200);
+    return function () {
+      var _searchCleanupRef_current;
+      clearTimeout(timerId);
+      (_searchCleanupRef_current = searchCleanupRef.current) === null || _searchCleanupRef_current === void 0 ? void 0 : _searchCleanupRef_current.call(searchCleanupRef);
+      searchCleanupRef.current = null;
+    };
+  }, [filter, onSearch, open]);
+  (0, import_react.useEffect)(function () {
+    if (open) {
+      setActiveIndex(0);
+      requestAnimationFrame(function () {
+        var _listRef_current;
+        return (_listRef_current = listRef.current) === null || _listRef_current === void 0 ? void 0 : _listRef_current.focus();
+      });
+    } else {
+      setInternalFilter("");
+    }
+  }, [open]);
+  var totalItems = sortedFiltered.length + (showCreateOption ? 1 : 0);
+  var createOptionIndex = showCreateOption ? sortedFiltered.length : -1;
+  var handleSelect = (0, import_react.useCallback)(function (option) {
+    if (multiple) {
+      var current = Array.isArray(value) ? value : value ? [value] : [];
+      var next = current.includes(option.value) ? current.filter(function (v) {
+        return v !== option.value;
+      }) : [...current, option.value];
+      onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(next);
+    } else {
+      onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(option.value);
+      setOpen(false);
+    }
+  }, [onValueChange, multiple, value]);
+  var handleSearchKeyDown = (0, import_react.useCallback)(function (e) {
+    var isDown = e.key === "ArrowDown" || e.key === "j";
+    var isUp = e.key === "ArrowUp" || e.key === "k";
+    if (isDown) {
+      var _listRef_current;
+      e.preventDefault();
+      (_listRef_current = listRef.current) === null || _listRef_current === void 0 ? void 0 : _listRef_current.focus();
+      setActiveIndex(function (prev) {
+        var next = prev == null ? 0 : prev + 1;
+        return next >= totalItems ? 0 : next;
+      });
+    } else if (isUp) {
+      var _listRef_current1;
+      e.preventDefault();
+      (_listRef_current1 = listRef.current) === null || _listRef_current1 === void 0 ? void 0 : _listRef_current1.focus();
+      setActiveIndex(function (prev) {
+        var next = prev == null ? totalItems - 1 : prev - 1;
+        return next < 0 ? totalItems - 1 : next;
+      });
+    }
+  }, [totalItems]);
+  var handleListKeyDown = (0, import_react.useCallback)(function (e) {
+    if (totalItems === 0) return;
+    var isDown = e.key === "ArrowDown" || e.key === "j";
+    var isUp = e.key === "ArrowUp" || e.key === "k";
+    if (isDown) {
+      e.preventDefault();
+      setActiveIndex(function (prev) {
+        var next = prev == null ? 0 : prev + 1;
+        return next >= totalItems ? 0 : next;
+      });
+    } else if (isUp) {
+      e.preventDefault();
+      setActiveIndex(function (prev) {
+        var next = prev == null ? totalItems - 1 : prev - 1;
+        return next < 0 ? totalItems - 1 : next;
+      });
+    } else if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      if (activeIndex === createOptionIndex && showCreateOption) {
+        handleCreate();
+      } else if (activeIndex != null && activeIndex >= 0 && sortedFiltered[activeIndex]) {
+        handleSelect(sortedFiltered[activeIndex]);
+        if (e.key === "Enter" || !multiple) setOpen(false);
+      }
+    }
+  }, [totalItems, createOptionIndex, showCreateOption, activeIndex, sortedFiltered, handleCreate, handleSelect, multiple]);
+  (0, import_react.useEffect)(function () {
+    if (!open || typeof document === "undefined") return;
+    var onKeyDown = function onKeyDown2(e) {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        setOpen(false);
+      } else if (e.key === "Enter" || e.key === " ") {
+        var target = e.target;
+        if (e.key === " " && (target === null || target === void 0 ? void 0 : target.tagName) === "INPUT" && target.type !== "checkbox") return;
+        e.preventDefault();
+        e.stopPropagation();
+        if (activeIndex === createOptionIndex && showCreateOption) {
+          handleCreate();
+        } else if (activeIndex != null && activeIndex >= 0 && sortedFiltered[activeIndex]) {
+          handleSelect(sortedFiltered[activeIndex]);
+          if (e.key === "Enter" || !multiple) setOpen(false);
+        } else {
+          setOpen(false);
+        }
+      }
+    };
+    document.addEventListener("keydown", onKeyDown, {
+      capture: true
+    });
+    return function () {
+      return document.removeEventListener("keydown", onKeyDown, {
+        capture: true
+      });
+    };
+  }, [open, activeIndex, createOptionIndex, showCreateOption, sortedFiltered, handleCreate, handleSelect, multiple]);
+  var handleOpenChange = (0, import_react.useCallback)(function (val) {
+    setOpen(val);
+    if (!val) onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+  }, [onBlur]);
+  var searchHeader = hideSearch ? void 0 : comboboxSearchHeader(knobProps, filter, setInternalFilter, searchPlaceholder, textColor, mutedColor, loading !== null && loading !== void 0 ? loading : false, handleSearchKeyDown);
+  var listContent = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
+    ref: listRef,
+    tabIndex: 0,
+    onKeyDown: handleListKeyDown,
+    outlineStyle: "none",
+    flex: 1,
+    children: [sortedFiltered.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+      children: [sortedFiltered.map(function (option, i) {
+        var selected = isSelectedFn(option.value);
+        var active = i === activeIndex;
+        var prevGroup = i > 0 ? sortedFiltered[i - 1].group : void 0;
+        var showGroupHeader = option.group && option.group !== prevGroup;
+        return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
+          children: [showGroupHeader && /* @__PURE__ */(0, import_jsx_runtime.jsx)(GroupHeader, {
+            color: textColor,
+            children: option.group
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
+            flexDirection: "row",
+            alignItems: "center",
+            gap: "$2",
+            paddingHorizontal: "$3",
+            height: knobProps.sizeToken,
+            onPress: function onPress() {
+              return handleSelect(option);
+            },
+            onMouseEnter: function onMouseEnter() {
+              return setActiveIndex(i);
+            },
+            hoverStyle: activeIndex != null ? {
+              backgroundColor: active ? import_colorRamps.formInputColors.background.focus : selected ? import_colorRamps.formInputColors.background.base : "transparent"
+            } : {
+              backgroundColor: selected ? import_colorRamps.formInputColors.background.base : import_colorRamps.formInputColors.background.focus
+            },
+            backgroundColor: active ? import_colorRamps.formInputColors.background.focus : selected ? import_colorRamps.formInputColors.background.base : "transparent",
+            pressStyle: {
+              backgroundColor: import_colorRamps.formInputColors.background.focus
+            },
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+              fontFamily: knobProps.body.fontFamily,
+              fontWeight: knobProps.body.fontWeight,
+              color: textColor,
+              numberOfLines: 1,
+              flex: 1,
+              children: option.label
+            }), selected && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.CheckIcon, {
+              size: 14
+            })]
+          })]
+        }, option.value);
+      }), showCreateOption && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: "$2",
+        paddingHorizontal: "$3",
+        height: knobProps.sizeToken,
+        onPress: handleCreate,
+        onMouseEnter: function onMouseEnter() {
+          return setActiveIndex(createOptionIndex);
+        },
+        hoverStyle: activeIndex != null ? {
+          backgroundColor: createOptionIndex === activeIndex ? import_colorRamps.formInputColors.background.focus : "transparent"
+        } : {
+          backgroundColor: import_colorRamps.formInputColors.background.focus
+        },
+        backgroundColor: createOptionIndex === activeIndex ? import_colorRamps.formInputColors.background.focus : "transparent",
+        pressStyle: {
+          backgroundColor: import_colorRamps.formInputColors.background.focus
+        },
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.PlusIcon, {
+          size: 14,
+          color: textColor
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          fontFamily: knobProps.body.fontFamily,
+          fontWeight: knobProps.body.fontWeight,
+          color: textColor,
+          numberOfLines: 1,
+          flex: 1,
+          children: createLabel.replace("{value}", filter.trim())
+        })]
+      })]
+    }) : showCreateOption ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: "$2",
+      paddingHorizontal: "$3",
+      height: knobProps.sizeToken,
+      onPress: handleCreate,
+      onMouseEnter: function onMouseEnter() {
+        return setActiveIndex(createOptionIndex);
+      },
+      hoverStyle: activeIndex != null ? {
+        backgroundColor: createOptionIndex === activeIndex ? import_colorRamps.formInputColors.background.focus : "transparent"
+      } : {
+        backgroundColor: import_colorRamps.formInputColors.background.focus
+      },
+      backgroundColor: createOptionIndex === activeIndex ? import_colorRamps.formInputColors.background.focus : "transparent",
+      pressStyle: {
+        backgroundColor: import_colorRamps.formInputColors.background.focus
+      },
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.PlusIcon, {
+        size: 14,
+        color: textColor
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        fontFamily: knobProps.body.fontFamily,
+        fontWeight: knobProps.body.fontWeight,
+        color: textColor,
+        numberOfLines: 1,
+        flex: 1,
+        children: createLabel.replace("{value}", filter.trim())
+      })]
+    }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      ...knobProps.panelPadding,
+      alignItems: "center",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        color: import_colorRamps.formCommonColors.muted,
+        fontSize: knobProps.sizeToken,
+        fontFamily: knobProps.body.fontFamily,
+        fontWeight: knobProps.body.fontWeight,
+        children: emptyMessage
+      })
+    }), hasMore && loading && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      padding: "$2",
+      alignItems: "center",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Spinner.Spinner, {
+        size: "small"
+      })
+    })]
+  });
+  var triggerContent = triggerRender ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    "data-testid": "combobox-trigger",
+    children: triggerRender(multiple ? selectedOptions : selectedOption, open)
+  }) : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_InputParts.Input.Box, {
+    "data-testid": "combobox-trigger",
+    cursor: disabled ? "not-allowed" : "pointer",
+    opacity: disabled ? 0.5 : 1,
+    disabled,
+    size: knobProps.sizeToken,
+    ...(inTableCell ? {} : {
+      borderRadius: knobProps.borderRadius.borderRadius,
+      borderWidth: knobProps.borderRadius.borderWidth
+    }),
+    tabIndex: disabled ? -1 : 0,
+    onKeyDown: function onKeyDown(e) {
+      if (["Enter", " ", "ArrowDown", "ArrowUp", "j", "k"].includes(e.key) || e.code === "Space") {
+        e.preventDefault();
+        if (!open) handleOpenChange(true);
+      }
+    },
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      flex: 1,
+      paddingHorizontal: "$3",
+      paddingVertical: "$2",
+      id,
+      justifyContent: multiple && selectedValues.length > 0 ? "center" : "flex-start",
+      alignItems: multiple && selectedValues.length > 0 ? "center" : "flex-start",
+      children: multiple && selectedValues.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+        flexDirection: "row",
+        flexWrap: "nowrap",
+        gap: "$1.5",
+        alignItems: "center",
+        maxHeight: (0, import_utils.getFieldHeight)(knobProps.sizeToken) * 0.75,
+        overflow: "hidden",
+        overflowX: "auto",
+        children: selectedValues.map(function (v) {
+          var _knobProps_sizeToken;
+          return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Chip.Chip, {
+            size: (_knobProps_sizeToken = {
+              $3: "$2",
+              $4: "$3",
+              $5: "$4"
+            }[knobProps.sizeToken]) !== null && _knobProps_sizeToken !== void 0 ? _knobProps_sizeToken : "$3",
+            color: "gray",
+            onDismiss: dismissible && !disabled ? function () {
+              return handleDismiss(v);
+            } : void 0,
+            children: getLabel(v)
+          }, v);
+        })
+      }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        fontFamily: knobProps.body.fontFamily,
+        fontWeight: knobProps.body.fontWeight,
+        color: selectedOption ? textColor : import_colorRamps.formCommonColors.muted,
+        numberOfLines: 1,
+        children: (_ref1 = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) !== null && _ref1 !== void 0 ? _ref1 : placeholder
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      paddingRight: "$2",
+      alignSelf: "center",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.CaretDownIcon, {
+        size: 16
+      })
+    })]
+  });
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FloatingPanel.FloatingPanel, {
+    open,
+    onOpenChange: handleOpenChange,
+    sheet: true,
+    trigger: triggerContent,
+    header: searchHeader,
+    scrollable: hasScrollableContent,
+    disabled,
+    contentPadding: "none",
+    transition: typeof sheetTransition === "string" ? sheetTransition : "medium",
+    scrollViewProps: {
+      onScroll: function onScroll(e) {
+        if (!onLoadMore || !hasMore || loading) return;
+        var {
+          layoutMeasurement,
+          contentOffset,
+          contentSize
+        } = e.nativeEvent;
+        if (contentSize.height - contentOffset.y - layoutMeasurement.height < 100) {
+          onLoadMore();
+        }
+      },
+      scrollEventThrottle: 100
+    },
+    children: listContent
+  });
+}
+function Combobox(param) {
+  var {
+    options,
+    value: valueProp,
+    defaultValue,
+    onValueChange,
+    placeholder = "Select...",
+    searchPlaceholder = "Search...",
+    emptyMessage = "No results found.",
+    onSearch,
+    loading,
+    onLoadMore,
+    hasMore,
+    trigger,
+    name,
+    form: formProp,
+    validators,
+    label,
+    labelProps,
+    helperText,
+    error,
+    required,
+    disabled,
+    readOnly,
+    size: sizeProp,
+    id: idProp,
+    onBlur,
+    popoverWidth,
+    tabIndex: tabIndexProp,
+    multiple,
+    dismissible,
+    skeleton,
+    compact,
+    creatable,
+    onCreate,
+    createLabel,
+    hideSearch,
+    searchValue,
+    open,
+    onOpenChange,
+    ...rest
+  } = param;
+  var {
+    resolvedForm,
+    knobProps,
+    id
+  } = (0, import_utils.useFormField)({
+    form: formProp,
+    id: idProp,
+    compact
+  });
+  var resolvedValidators = (0, import_utils.useResolvedValidators)(required, validators, label, name);
+  var viewportGtSm = (0, import_FloatingPanel.useViewportGtSm)();
+  var effectiveGtSm = typeof window !== "undefined" ? viewportGtSm : false;
+  var shouldUseSheet = !import_tamagui.isWeb || !effectiveGtSm;
+  var textColor = knobProps.textAccentColor;
+  if (skeleton) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_InputParts.Input, {
+      size: sizeProp || knobProps.sizeToken,
+      children: [label && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
+        variant: "text",
+        width: "30%",
+        height: 14
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
+        variant: "rounded",
+        width: "100%",
+        height: knobProps.sizeToken
+      })]
+    });
+  }
+  var renderReadOnly = function renderReadOnly2(selectValue) {
+    var _ref;
+    if (multiple && Array.isArray(selectValue)) {
+      var labels = selectValue.map(function (v) {
+        var _ref2;
+        var _options_find;
+        return (_ref2 = (_options_find = options.find(function (o) {
+          return o.value === v;
+        })) === null || _options_find === void 0 ? void 0 : _options_find.label) !== null && _ref2 !== void 0 ? _ref2 : v;
+      }).join(", ");
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        fontSize: knobProps.sizeToken,
+        color: textColor,
+        paddingVertical: "$2",
+        paddingHorizontal: "$3",
+        fontFamily: knobProps.body.fontFamily,
+        fontWeight: knobProps.body.fontWeight,
+        children: labels || "-"
+      });
+    }
+    var sv = typeof selectValue === "string" ? selectValue : void 0;
+    var selected = options.find(function (option) {
+      return option.value === sv;
+    });
+    var displayText = (_ref = selected === null || selected === void 0 ? void 0 : selected.label) !== null && _ref !== void 0 ? _ref : sv || "-";
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+      fontSize: knobProps.sizeToken,
+      color: textColor,
+      paddingVertical: "$2",
+      paddingHorizontal: "$3",
+      fontFamily: knobProps.body.fontFamily,
+      fontWeight: knobProps.body.fontWeight,
+      children: displayText
+    });
+  };
+  var renderComboboxContent = function renderComboboxContent2(selectValue, handleValueChange, handleBlur) {
+    if (readOnly) return renderReadOnly(selectValue);
+    var ComboboxCore = shouldUseSheet ? NativeComboboxCore : FloatingComboboxCore;
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ComboboxCore, {
+      options,
+      value: selectValue,
+      onValueChange: function onValueChange1(value) {
+        if (disabled) return;
+        handleValueChange === null || handleValueChange === void 0 ? void 0 : handleValueChange(value);
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(value);
+      },
+      onBlur: handleBlur,
+      placeholder,
+      searchPlaceholder,
+      emptyMessage,
+      onSearch,
+      loading,
+      onLoadMore,
+      hasMore,
+      disabled,
+      id,
+      tabIndexOverride: tabIndexProp,
+      popoverWidth,
+      trigger,
+      knobProps,
+      multiple,
+      dismissible,
+      creatable,
+      onCreate,
+      createLabel,
+      hideSearch,
+      searchValue,
+      open,
+      onOpenChange
+    });
+  };
+  if (trigger) {
+    return renderComboboxContent(valueProp, onValueChange, onBlur);
+  }
+  if (!resolvedForm || !name) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
+      id,
+      label,
+      labelProps,
+      error,
+      helperText,
+      required,
+      size: sizeProp,
+      knobProps,
+      ...rest,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input, {
+        size: sizeProp || knobProps.sizeToken,
+        children: renderComboboxContent(valueProp !== null && valueProp !== void 0 ? valueProp : defaultValue, onValueChange, onBlur)
+      })
+    });
+  }
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.Field, {
+    form: resolvedForm,
+    name,
+    defaultValue,
+    validators: resolvedValidators,
+    children: function children(field) {
+      var resolvedError = (0, import_utils.getFieldError)(field, error);
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
+        id,
+        label,
+        labelProps,
+        error: resolvedError,
+        helperText,
+        required,
+        size: sizeProp,
+        knobProps,
+        ...rest,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input, {
+          size: sizeProp || knobProps.sizeToken,
+          children: renderComboboxContent(field.state.value, function (value) {
+            return field.handleChange(value);
+          }, (0, import_utils.mergeFieldHandler)(field, "handleBlur", onBlur))
+        })
+      });
+    }
+  });
+}
+//# sourceMappingURL=index.native.js.map