@multiplatform.one/forms 6.0.0

package/dist/esm/fields/Select/index.native.js

@@ -0,0 +1,1357 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, memo } from "react";
+import { CaretDownIcon, CheckIcon } from "@phosphor-icons/react";
+import { useClick, useDismiss, useInteractions, useListNavigation, useRole, useTypeahead, FloatingFocusManager } from "@floating-ui/react";
+import { Paragraph, Text, View, YStack, isWeb, styled } from "tamagui";
+import { Chip } from "../../Chip/index.native.js";
+import { Skeleton } from "../../Skeleton/index.native.js";
+import { Field, FieldLayout } from "../../fieldLayout.native.js";
+import { Input as InputParts } from "../../InputParts/index.native.js";
+import { formCommonColors, formInputColors } from "../../shared/colorRamps.native.js";
+import { getFieldError, getFieldHeight, mergeFieldHandler, useFormField, useResolvedValidators } from "../../shared/utils.native.js";
+import { SyncFocusToOpen, ScrollArrow } from "../../shared/floatingList.native.js";
+import { FloatingPanel, useFloatingPanel, panelTransition, panelViewportPadding, useViewportGtSm } from "../../FloatingPanel/index.native.js";
+import { zIndex } from "../../shared/zIndex.native.js";
+import { useDragScroll } from "../../shared/useDragScroll.native.js";
+import { useIsInTableCell } from "../../shared/tableCellContext.native.js";
+var SelectRow = styled(View, {
+  name: "SelectRow",
+  flexDirection: "row",
+  alignItems: "center",
+  gap: "$2",
+  paddingHorizontal: "$3",
+  cursor: "default",
+  outlineStyle: "none",
+  hoverStyle: {
+    backgroundColor: formInputColors.background.focus
+  },
+  focusStyle: {
+    outlineStyle: "none"
+  },
+  focusVisibleStyle: {
+    outlineStyle: "none"
+  },
+  variants: {
+    selected: {
+      true: {
+        backgroundColor: formInputColors.background.base
+      },
+      false: {
+        backgroundColor: "transparent"
+      }
+    },
+    active: {
+      true: {
+        backgroundColor: formInputColors.background.focus
+      },
+      false: {}
+    },
+    size: {
+      "...size": function (val) {
+        return {
+          height: val
+        };
+      }
+    }
+  }
+});
+var GroupHeader = styled(Text, {
+  name: "SelectGroupHeader",
+  paddingHorizontal: "$3",
+  paddingVertical: "$2",
+  paddingTop: "$3",
+  fontWeight: "600",
+  fontSize: "$2",
+  opacity: 0.6,
+  numberOfLines: 1,
+  userSelect: "none",
+  cursor: "default"
+});
+function groupOptions(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, groupOptions2] = _step2.value;
+      items.push({
+        type: "header",
+        label: groupLabel1
+      });
+      var _iteratorNormalCompletion3 = true,
+        _didIteratorError3 = false,
+        _iteratorError3 = void 0;
+      try {
+        for (var _iterator3 = groupOptions2[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 SelectItem = /* @__PURE__ */memo(function SelectItem2(param) {
+  var {
+    option,
+    index,
+    isSelected,
+    isActive,
+    suppressHover,
+    handlers,
+    setActiveIndex,
+    setControlledScrolling,
+    optionCount
+  } = param;
+  var ctx = handlers.current;
+  var isDown = function isDown2(k) {
+    return k === "ArrowDown" || k === "j";
+  };
+  var isUp = function isUp2(k) {
+    return k === "ArrowUp" || k === "k";
+  };
+  return /* @__PURE__ */_jsxs(SelectRow, {
+    ref: function ref(node) {
+      ctx.listItemsRef.current[index] = node;
+    },
+    ...ctx.getItemProps({
+      onKeyDown(event) {
+        if (event.key === "Enter" || event.key === " " || event.code === "Space") {
+          event.preventDefault();
+          event.stopPropagation();
+          ctx.handleSelect(index);
+          if (event.key === "Enter" || event.code === "Enter" || !ctx.multiple) ctx.setOpen(false);
+        } else if (isDown(event.key) || isUp(event.key)) {
+          event.preventDefault();
+          event.stopPropagation();
+          if (optionCount === 0) return;
+          var nextIndex = isDown(event.key) ? index + 1 >= optionCount ? 0 : index + 1 : index - 1 < 0 ? optionCount - 1 : index - 1;
+          setActiveIndex(nextIndex);
+          setControlledScrolling(true);
+        }
+      },
+      onClick(event) {
+        if (ctx.allowSelectRef.current) ctx.handleSelect(index, event);
+      },
+      onMouseUp() {
+        if (!ctx.allowMouseUpRef.current) {
+          ctx.allowMouseUpRef.current = true;
+          ctx.allowSelectRef.current = true;
+          return;
+        }
+        if (!ctx.multiple) {
+          if (ctx.allowSelectRef.current) ctx.handleSelect(index);
+        }
+        if (ctx.selectTimeoutRef.current) clearTimeout(ctx.selectTimeoutRef.current);
+        ctx.selectTimeoutRef.current = setTimeout(function () {
+          ctx.allowSelectRef.current = true;
+        });
+      }
+    }),
+    role: "option",
+    tabIndex: -1,
+    selected: isSelected,
+    active: isActive,
+    "aria-selected": isSelected,
+    "data-state": isSelected ? "active" : "inactive",
+    size: ctx.knobProps.sizeToken,
+    onMouseEnter: function onMouseEnter() {
+      return setActiveIndex(index);
+    },
+    ...(suppressHover ? {
+      hoverStyle: {
+        backgroundColor: isActive ? formInputColors.background.focus : isSelected ? formInputColors.background.base : "transparent"
+      }
+    } : {
+      hoverStyle: {
+        backgroundColor: isSelected ? formInputColors.background.base : formInputColors.background.focus
+      }
+    }),
+    ...(ctx.knobProps.transition ? {
+      animation: ctx.knobProps.transition
+    } : void 0),
+    children: [/* @__PURE__ */_jsx(Text, {
+      fontFamily: ctx.knobProps.body.fontFamily,
+      fontWeight: ctx.knobProps.body.fontWeight,
+      color: ctx.textColor,
+      numberOfLines: 1,
+      flex: 1,
+      children: option.label
+    }), isSelected && /* @__PURE__ */_jsx(CheckIcon, {
+      size: 14
+    })]
+  });
+});
+function FloatingSelectCore(param) {
+  var {
+    options,
+    value,
+    onValueChange,
+    onBlur,
+    placeholder,
+    disabled,
+    id,
+    knobProps,
+    groupLabel,
+    multiple,
+    dismissible
+  } = param;
+  var _ref, _ref1, _ref2, _panel_x;
+  var _overlayStyle_current;
+  var inTableCell = useIsInTableCell();
+  var [open, setOpen] = useState(false);
+  var [activeIndex, setActiveIndex] = useState(null);
+  var [controlledScrolling, setControlledScrolling] = useState(false);
+  var labelCacheRef = 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 = 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 = 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 {
+    items: groupedItems,
+    flatOptions
+  } = useMemo(function () {
+    return groupOptions(options);
+  }, [options]);
+  var selectedIndex = useMemo(function () {
+    return multiple ? -1 : options.findIndex(function (option) {
+      return option.value === value;
+    });
+  }, [options, value, multiple]);
+  var selectedOption = selectedIndex >= 0 ? options[selectedIndex] : void 0;
+  var isSelected = useCallback(function (optionValue) {
+    return multiple ? selectedValues.includes(optionValue) : optionValue === value;
+  }, [multiple, selectedValues, value]);
+  var handleDismiss = 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 textColor = knobProps.textAccentColor;
+  var listItemsRef = useRef([]);
+  var listContentRef = useRef(options.map(function (option) {
+    return option.label;
+  }));
+  var allowSelectRef = useRef(false);
+  var allowMouseUpRef = useRef(true);
+  var selectTimeoutRef = useRef(null);
+  var stateRef = useRef({
+    isTyping: false
+  });
+  var overlayStyle = useRef(null);
+  useEffect(function () {
+    listContentRef.current = options.map(function (option) {
+      return option.label;
+    });
+  }, [options]);
+  var sortedOptionsRef = useRef(options);
+  var computeSortedOptions = useCallback(function () {
+    if (!multiple) {
+      sortedOptionsRef.current = options;
+      return;
+    }
+    var selected = Array.isArray(value) ? value : value ? [value] : [];
+    if (selected.length === 0) {
+      sortedOptionsRef.current = options;
+      return;
+    }
+    var selectedSet = new Set(selected);
+    var first = options.filter(function (o2) {
+      return selectedSet.has(o2.value);
+    }).sort(function (a, b) {
+      return a.label.localeCompare(b.label);
+    });
+    var rest = options.filter(function (o2) {
+      return !selectedSet.has(o2.value);
+    });
+    sortedOptionsRef.current = [...first, ...rest];
+  }, [options, value, multiple]);
+  var programmaticScrollRef = useRef(0);
+  var pinnedTopRef = useRef(0);
+  var pinnedHeightRef = useRef(0);
+  var grownRef = useRef(false);
+  var growUpOnlyRef = useRef(false);
+  var growDownOnlyRef = useRef(false);
+  var lastScrollTopRef = useRef(0);
+  var repositionRef = useRef(null);
+  var panel = useFloatingPanel({
+    open,
+    onOpenChange: setOpen,
+    disabled,
+    repositionRef,
+    wheelGrowRef: selectedIndex >= 0 ? grownRef : void 0,
+    onBeforeOpen: function onBeforeOpen() {
+      computeSortedOptions();
+      overlayStyle.current = null;
+      pinnedTopRef.current = 0;
+      pinnedHeightRef.current = 0;
+      grownRef.current = false;
+      growUpOnlyRef.current = false;
+      growDownOnlyRef.current = false;
+      lastScrollTopRef.current = 0;
+      programmaticScrollRef.current = 0;
+    }
+  });
+  var {
+    scrollRef: dragScrollRef,
+    dragProps
+  } = useDragScroll({
+    direction: "vertical"
+  });
+  useEffect(function () {
+    if (panel.refs.floating.current) {
+      dragScrollRef.current = panel.refs.floating.current;
+    }
+  }, [panel.refs.floating.current, dragScrollRef]);
+  useEffect(function () {
+    if (open) {
+      setActiveIndex(selectedIndex >= 0 ? selectedIndex : 0);
+    } else {
+      setActiveIndex(null);
+      setControlledScrolling(false);
+    }
+  }, [open, selectedIndex]);
+  var repositionOverlay = useCallback(function () {
+    var dropdownElement = panel.refs.floating.current;
+    var selectedItemIndex = selectedIndex >= 0 ? selectedIndex : 0;
+    var selectedItem = listItemsRef.current[selectedItemIndex];
+    var trigger = panel.triggerRef.current;
+    if (!dropdownElement || !selectedItem || !trigger) return;
+    var isInitial = panel.initializingRef.current;
+    if (isInitial) dropdownElement.style.transition = "none";
+    if (pinnedTopRef.current === 0 && pinnedHeightRef.current === 0) {
+      programmaticScrollRef.current++;
+      dropdownElement.scrollTop = 0;
+    }
+    var triggerBounds = trigger.getBoundingClientRect();
+    var viewportHeight = window.innerHeight;
+    var computedStyle = getComputedStyle(dropdownElement);
+    var borderTopWidth = parseFloat(computedStyle.borderTopWidth) || 0;
+    var borderBottomWidth = parseFloat(computedStyle.borderBottomWidth) || 0;
+    var totalBorderWidth = borderTopWidth + borderBottomWidth;
+    var scrollContentHeight = dropdownElement.scrollHeight;
+    var totalContentHeight = scrollContentHeight + totalBorderWidth;
+    var idealTop;
+    if (selectedIndex >= 0) {
+      idealTop = triggerBounds.top - borderTopWidth - selectedItem.offsetTop;
+    } else if (panel.placement.startsWith("top")) {
+      idealTop = triggerBounds.bottom - totalContentHeight;
+    } else {
+      var _selectedItem_offsetTop;
+      idealTop = triggerBounds.top - borderTopWidth - ((_selectedItem_offsetTop = selectedItem.offsetTop) !== null && _selectedItem_offsetTop !== void 0 ? _selectedItem_offsetTop : 0);
+    }
+    var idealBottom = idealTop + totalContentHeight;
+    var pinnedTop = Math.max(panelViewportPadding, idealTop);
+    var pinnedBottom = Math.min(viewportHeight - panelViewportPadding, idealBottom);
+    var pinnedHeight = Math.max(120, pinnedBottom - pinnedTop);
+    if (pinnedTopRef.current === 0 && pinnedHeightRef.current === 0) {
+      pinnedTopRef.current = pinnedTop;
+      pinnedHeightRef.current = pinnedHeight;
+    }
+    var top = pinnedTopRef.current;
+    var height = pinnedHeightRef.current;
+    if (grownRef.current) {
+      var canGrowDown = Math.max(0, viewportHeight - panelViewportPadding - (top + height));
+      height += canGrowDown;
+      var canGrowUp = Math.max(0, top - panelViewportPadding);
+      top -= canGrowUp;
+      height += canGrowUp;
+    }
+    if (growUpOnlyRef.current) {
+      var canGrowUp1 = Math.max(0, top - panelViewportPadding);
+      top -= canGrowUp1;
+      height += canGrowUp1;
+    }
+    if (growDownOnlyRef.current) {
+      var canGrowDown1 = Math.max(0, viewportHeight - panelViewportPadding - (top + height));
+      height += canGrowDown1;
+    }
+    height = Math.min(height, viewportHeight - top - panelViewportPadding);
+    height = Math.min(height, totalContentHeight);
+    height = Math.max(120, height);
+    var availableViewport = viewportHeight - 2 * panelViewportPadding;
+    if ((grownRef.current || growUpOnlyRef.current || growDownOnlyRef.current) && height < availableViewport) {
+      if (panel.placement.startsWith("top")) {
+        top = panelViewportPadding;
+      } else {
+        top = viewportHeight - panelViewportPadding - height;
+      }
+    }
+    var cachedOverlayStyle = overlayStyle.current;
+    if (!cachedOverlayStyle || cachedOverlayStyle.top !== top || cachedOverlayStyle.maxHeight !== height) {
+      dropdownElement.style.top = `${top}px`;
+      dropdownElement.style.maxHeight = `${height}px`;
+      dropdownElement.style.height = "";
+      overlayStyle.current = {
+        top,
+        maxHeight: height
+      };
+      void dropdownElement.offsetHeight;
+    }
+    if (!grownRef.current && !growUpOnlyRef.current && !growDownOnlyRef.current) {
+      var maxScrollTop = dropdownElement.scrollHeight - dropdownElement.clientHeight;
+      if (selectedIndex >= 0) {
+        var neededScroll = top + borderTopWidth + selectedItem.offsetTop - triggerBounds.top;
+        var clampedScrollTop = Math.max(0, Math.min(neededScroll, maxScrollTop));
+        if (Math.abs(dropdownElement.scrollTop - clampedScrollTop) > 0.5) {
+          programmaticScrollRef.current++;
+          dropdownElement.scrollTop = clampedScrollTop;
+        }
+        if (Math.abs(neededScroll - clampedScrollTop) > 0.5) {
+          var scrollDeficit = neededScroll - clampedScrollTop;
+          top -= scrollDeficit;
+          top = Math.max(panelViewportPadding, top);
+          var remainingContentHeight = totalContentHeight - clampedScrollTop;
+          var adjustedMaxHeight = Math.min(remainingContentHeight, viewportHeight - top - panelViewportPadding);
+          dropdownElement.style.top = `${top}px`;
+          dropdownElement.style.maxHeight = `${adjustedMaxHeight}px`;
+          overlayStyle.current = {
+            top,
+            maxHeight: adjustedMaxHeight
+          };
+        }
+      }
+    }
+    panel.initializingRef.current = false;
+    void dropdownElement.offsetHeight;
+    if (isInitial) dropdownElement.style.transition = panelTransition;
+    requestAnimationFrame(function () {
+      if (dropdownElement) {
+        panel.updateArrows(dropdownElement);
+        requestAnimationFrame(function () {
+          if (dropdownElement) panel.updateArrows(dropdownElement);
+        });
+      }
+    });
+  }, [selectedIndex, panel.refs, panel.updateArrows, panel.placement, options.length]);
+  repositionRef.current = repositionOverlay;
+  useLayoutEffect(function () {
+    if (!open || !panel.mounted) return;
+    repositionOverlay();
+  }, [open, panel.mounted, selectedIndex, repositionOverlay, panel.y]);
+  var onMatch = useCallback(function (index) {
+    if (open) {
+      setActiveIndex(index);
+    } else {
+      var matchedOption = options[index];
+      if (matchedOption) onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(matchedOption.value);
+    }
+  }, [open, options, onValueChange]);
+  var click = useClick(panel.context, {
+    event: "mousedown",
+    keyboardHandlers: false
+  });
+  var dismiss = useDismiss(panel.context);
+  var role = useRole(panel.context, {
+    role: "listbox"
+  });
+  var listNav = useListNavigation(panel.context, {
+    listRef: listItemsRef,
+    activeIndex: activeIndex !== null && activeIndex !== void 0 ? activeIndex : 0,
+    selectedIndex: selectedIndex >= 0 ? selectedIndex : void 0,
+    onNavigate: function onNavigate(index) {
+      if (index !== null) setActiveIndex(index);
+    },
+    scrollItemIntoView: false,
+    focusItemOnHover: false
+  });
+  var typeahead = useTypeahead(panel.context, {
+    listRef: listContentRef,
+    onMatch,
+    selectedIndex: selectedIndex >= 0 ? selectedIndex : void 0,
+    activeIndex,
+    onTypingChange: function onTypingChange(typing) {
+      stateRef.current.isTyping = typing;
+    }
+  });
+  var {
+    getReferenceProps,
+    getFloatingProps,
+    getItemProps
+  } = useInteractions([click, dismiss, role, listNav, typeahead]);
+  useLayoutEffect(function () {
+    if (open) {
+      allowMouseUpRef.current = false;
+      selectTimeoutRef.current = setTimeout(function () {
+        allowSelectRef.current = true;
+        allowMouseUpRef.current = true;
+      }, 300);
+      return function () {
+        if (selectTimeoutRef.current) clearTimeout(selectTimeoutRef.current);
+      };
+    }
+    allowSelectRef.current = false;
+    allowMouseUpRef.current = true;
+  }, [open]);
+  useEffect(function () {
+    if (!open || activeIndex == null) return;
+    var floatingElement = panel.refs.floating.current;
+    var itemElement = listItemsRef.current[activeIndex];
+    if (controlledScrolling && floatingElement && itemElement) {
+      var containerRect = floatingElement.getBoundingClientRect();
+      var itemRect = itemElement.getBoundingClientRect();
+      if (itemRect.bottom > containerRect.bottom) {
+        floatingElement.scrollTop += itemRect.bottom - containerRect.bottom;
+      } else if (itemRect.top < containerRect.top) {
+        floatingElement.scrollTop -= containerRect.top - itemRect.top;
+      }
+    }
+    requestAnimationFrame(function () {
+      var _listItemsRef_current_activeIndex;
+      (_listItemsRef_current_activeIndex = listItemsRef.current[activeIndex]) === null || _listItemsRef_current_activeIndex === void 0 ? void 0 : _listItemsRef_current_activeIndex.focus({
+        preventScroll: true
+      });
+      if (floatingElement) {
+        panel.updateArrows(floatingElement);
+      }
+    });
+  }, [open, controlledScrolling, activeIndex, panel.refs, panel.updateArrows]);
+  var lastSelectedIndexRef = useRef(null);
+  var valueRef = useRef(value);
+  valueRef.current = value;
+  var handleSelect = useCallback(function (index, event) {
+    var displayOptions = sortedOptionsRef.current;
+    var option = displayOptions[index];
+    if (!option) return;
+    if (multiple) {
+      var latestValue = valueRef.current;
+      var current = Array.isArray(latestValue) ? latestValue : latestValue ? [latestValue] : [];
+      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 = displayOptions.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);
+      onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    }
+  }, [onValueChange, onBlur, multiple]);
+  var handleSelectByOption = useCallback(function (option) {
+    var displayOptions = sortedOptionsRef.current;
+    var index = displayOptions.findIndex(function (o2) {
+      return o2.value === option.value;
+    });
+    if (index >= 0) handleSelect(index);
+  }, [handleSelect]);
+  var handlersRef = useRef({});
+  handlersRef.current = {
+    getItemProps,
+    handleSelect,
+    setOpen,
+    knobProps,
+    textColor,
+    allowSelectRef,
+    allowMouseUpRef,
+    selectTimeoutRef,
+    isTypingRef: stateRef,
+    listItemsRef,
+    multiple
+  };
+  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(selectedIndex >= 0 ? selectedIndex : 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 : 0;
+  boxEventProps.role = "combobox";
+  boxEventProps["aria-haspopup"] = "listbox";
+  boxEventProps["aria-expanded"] = open;
+  boxEventProps["aria-autocomplete"] = "none";
+  var handleScroll = useCallback(function (event) {
+    var el = event.target;
+    panel.updateArrows(el);
+    if (panel.initializingRef.current || programmaticScrollRef.current > 0) {
+      if (programmaticScrollRef.current > 0) programmaticScrollRef.current--;
+      lastScrollTopRef.current = el.scrollTop;
+      return;
+    }
+    var arrowDir = panel.arrowScrollDirRef.current;
+    if (arrowDir) {
+      panel.arrowScrollDirRef.current = null;
+      lastScrollTopRef.current = el.scrollTop;
+      if (arrowDir === "down") {
+        growUpOnlyRef.current = true;
+      } else {
+        growDownOnlyRef.current = true;
+      }
+      repositionOverlay();
+      return;
+    }
+    var delta = el.scrollTop - lastScrollTopRef.current;
+    lastScrollTopRef.current = el.scrollTop;
+    if (delta !== 0) {
+      grownRef.current = true;
+      repositionOverlay();
+    }
+  }, [panel.updateArrows, repositionOverlay]);
+  return /* @__PURE__ */_jsxs(_Fragment, {
+    children: [/* @__PURE__ */_jsxs(InputParts.Box, {
+      ...boxEventProps,
+      "data-testid": "select-trigger",
+      cursor: "pointer",
+      disabled,
+      size: knobProps.sizeToken,
+      ...(inTableCell ? {} : {
+        borderRadius: knobProps.borderRadius.borderRadius,
+        borderWidth: knobProps.borderRadius.borderWidth
+      }),
+      children: [/* @__PURE__ */_jsx(SyncFocusToOpen, {
+        open
+      }), /* @__PURE__ */_jsx(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__ */_jsx(View, {
+          flexDirection: "row",
+          flexWrap: "nowrap",
+          gap: "$1.5",
+          alignItems: "center",
+          maxHeight: getFieldHeight(knobProps.sizeToken) * 0.75,
+          overflow: "hidden",
+          overflowX: "auto",
+          children: selectedValues.map(function (v) {
+            var _knobProps_sizeToken;
+            return /* @__PURE__ */_jsx(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__ */_jsx(Text, {
+          fontFamily: knobProps.body.fontFamily,
+          fontWeight: knobProps.body.fontWeight,
+          color: selectedOption ? textColor : formCommonColors.muted,
+          numberOfLines: 1,
+          userSelect: "none",
+          children: (_ref = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) !== null && _ref !== void 0 ? _ref : placeholder
+        })
+      }), /* @__PURE__ */_jsx(View, {
+        paddingRight: "$2",
+        alignSelf: "center",
+        children: /* @__PURE__ */_jsx(CaretDownIcon, {
+          size: 16
+        })
+      })]
+    }), panel.mounted && /* @__PURE__ */_jsx(_Fragment, {
+      children: /* @__PURE__ */_jsx(FloatingFocusManager, {
+        context: panel.context,
+        modal: false,
+        initialFocus: -1,
+        children: /* @__PURE__ */_jsxs(YStack, {
+          outlineWidth: 0,
+          pointerEvents: panel.visible ? "auto" : "none",
+          ...getFloatingProps({
+            ref: panel.refs.setFloating,
+            style: {
+              position: panel.strategy,
+              top: (_ref1 = (_ref2 = (_overlayStyle_current = overlayStyle.current) === null || _overlayStyle_current === void 0 ? void 0 : _overlayStyle_current.top) !== null && _ref2 !== void 0 ? _ref2 : panel.y) !== null && _ref1 !== void 0 ? _ref1 : 0,
+              left: (_panel_x = panel.x) !== null && _panel_x !== void 0 ? _panel_x : 0,
+              scrollbarWidth: "none",
+              zIndex: zIndex.dropdown,
+              overflow: "auto",
+              ...panel.floatingStyleRef.current,
+              ...(overlayStyle.current ? {
+                maxHeight: overlayStyle.current.maxHeight
+              } : {}),
+              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: panelTransition,
+              transformOrigin: panel.placement.startsWith("top") ? "bottom left" : "top left",
+              ...dragProps.style
+            },
+            onPointerDown: dragProps.onPointerDown,
+            onKeyDown(e) {
+              setControlledScrolling(true);
+              var count = flatOptions.length;
+              if (count === 0) return;
+              var isDown = e.key === "ArrowDown" || e.key === "j";
+              var isUp = e.key === "ArrowUp" || e.key === "k";
+              if (isDown) {
+                e.preventDefault();
+                e.stopPropagation();
+                setActiveIndex(function (prev) {
+                  return prev == null ? 0 : prev + 1 >= count ? 0 : prev + 1;
+                });
+              } else if (isUp) {
+                e.preventDefault();
+                e.stopPropagation();
+                setActiveIndex(function (prev) {
+                  return prev == null ? count - 1 : prev - 1 < 0 ? count - 1 : prev - 1;
+                });
+              } else if (e.key === "Enter" || e.key === " " || e.code === "Space") {
+                e.preventDefault();
+                e.stopPropagation();
+                if (activeIndex != null) {
+                  var option = flatOptions[activeIndex];
+                  if (option) handleSelectByOption(option);
+                  if (e.key === "Enter" || e.code === "Enter" || !multiple) setOpen(false);
+                }
+              }
+            },
+            onContextMenu(event) {
+              event.preventDefault();
+            },
+            onScroll: handleScroll
+          }),
+          backgroundColor: "$background",
+          borderRadius: panel.dropdownRadius,
+          borderWidth: panel.hasBorder ? knobProps.borderRadius.borderWidth : 0,
+          borderColor: panel.hasBorder ? formInputColors.border.focus : "transparent",
+          "data-testid": "select-dropdown",
+          paddingVertical: 0,
+          children: [/* @__PURE__ */_jsx(ScrollArrow, {
+            direction: "up",
+            scrollRef: panel.refs.floating,
+            visible: panel.arrowUp,
+            arrowScrollDirRef: panel.arrowScrollDirRef
+          }), groupLabel && /* @__PURE__ */_jsx(GroupHeader, {
+            color: textColor,
+            children: groupLabel
+          }), multiple ? sortedOptionsRef.current.map(function (option, i) {
+            return /* @__PURE__ */_jsx(SelectItem, {
+              option,
+              index: i,
+              isSelected: isSelected(option.value),
+              isActive: i === activeIndex,
+              suppressHover: activeIndex != null,
+              handlers: handlersRef,
+              setActiveIndex,
+              setControlledScrolling,
+              optionCount: sortedOptionsRef.current.length
+            }, option.value);
+          }) : groupedItems.map(function (item) {
+            return item.type === "header" ? /* @__PURE__ */_jsx(GroupHeader, {
+              color: textColor,
+              children: item.label
+            }, `header-${item.label}`) : /* @__PURE__ */_jsx(SelectItem, {
+              option: item.option,
+              index: item.flatIndex,
+              isSelected: isSelected(item.option.value),
+              isActive: item.flatIndex === activeIndex,
+              suppressHover: activeIndex != null,
+              handlers: handlersRef,
+              setActiveIndex,
+              setControlledScrolling,
+              optionCount: flatOptions.length
+            }, item.option.value);
+          }), /* @__PURE__ */_jsx(ScrollArrow, {
+            direction: "down",
+            scrollRef: panel.refs.floating,
+            visible: panel.arrowDown,
+            arrowScrollDirRef: panel.arrowScrollDirRef
+          })]
+        })
+      })
+    })]
+  });
+}
+function NativeSelectCore(param) {
+  var {
+    options,
+    value,
+    onValueChange,
+    onBlur,
+    placeholder,
+    disabled,
+    id,
+    knobProps,
+    groupLabel,
+    multiple,
+    dismissible
+  } = param;
+  var _knobProps_transition, _ref;
+  var inTableCell = useIsInTableCell();
+  var [open, setOpen] = useState(false);
+  var [activeIndex, setActiveIndex] = useState(0);
+  var listRef = useRef(null);
+  var labelCacheRef = 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 = 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 = 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 = useMemo(function () {
+    return multiple ? void 0 : options.find(function (o2) {
+      return o2.value === value;
+    });
+  }, [options, value, multiple]);
+  var isSelectedFn = useCallback(function (optionValue) {
+    return multiple ? selectedValues.includes(optionValue) : optionValue === value;
+  }, [multiple, selectedValues, value]);
+  var handleDismiss = 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 textColor = knobProps.textAccentColor;
+  var sheetTransition = (_knobProps_transition = knobProps.transition) !== null && _knobProps_transition !== void 0 ? _knobProps_transition : "medium";
+  var hasScrollableContent = options.length > 6;
+  var selectedIndex = options.findIndex(function (o2) {
+    return o2.value === value;
+  });
+  useEffect(function () {
+    if (open) {
+      setActiveIndex(selectedIndex >= 0 ? selectedIndex : 0);
+      requestAnimationFrame(function () {
+        var _listRef_current;
+        return (_listRef_current = listRef.current) === null || _listRef_current === void 0 ? void 0 : _listRef_current.focus();
+      });
+    }
+  }, [open, selectedIndex]);
+  var handleSelect = useCallback(function (optionValue) {
+    if (multiple) {
+      var current = Array.isArray(value) ? value : value ? [value] : [];
+      var next = current.includes(optionValue) ? current.filter(function (v) {
+        return v !== optionValue;
+      }) : [...current, optionValue];
+      onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(next);
+    } else {
+      onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(optionValue);
+      setOpen(false);
+      onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    }
+  }, [onValueChange, onBlur, multiple, value]);
+  var handleListKeyDown = useCallback(function (e) {
+    var count = options.length;
+    if (count === 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 >= count ? 0 : next;
+      });
+    } else if (isUp) {
+      e.preventDefault();
+      setActiveIndex(function (prev) {
+        var next = prev == null ? count - 1 : prev - 1;
+        return next < 0 ? count - 1 : next;
+      });
+    } else if (e.key === "Enter" || e.key === " " || e.code === "Space") {
+      e.preventDefault();
+      e.stopPropagation();
+      if (activeIndex != null) {
+        var option = options[activeIndex];
+        if (option) handleSelect(option.value);
+      }
+    }
+  }, [options, activeIndex, handleSelect]);
+  var listContent = /* @__PURE__ */_jsxs(View, {
+    ref: listRef,
+    tabIndex: 0,
+    onKeyDown: handleListKeyDown,
+    outlineStyle: "none",
+    flex: 1,
+    children: [groupLabel && /* @__PURE__ */_jsx(Text, {
+      paddingHorizontal: "$3",
+      paddingVertical: "$2",
+      fontFamily: knobProps.body.fontFamily,
+      fontWeight: "700",
+      color: textColor,
+      opacity: 0.5,
+      numberOfLines: 1,
+      children: groupLabel
+    }), options.map(function (option, i) {
+      var selected = isSelectedFn(option.value);
+      var active = i === activeIndex;
+      return /* @__PURE__ */_jsxs(View, {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: "$2",
+        paddingHorizontal: "$3",
+        height: knobProps.sizeToken,
+        onPress: function onPress() {
+          return handleSelect(option.value);
+        },
+        onMouseEnter: function onMouseEnter() {
+          return setActiveIndex(i);
+        },
+        hoverStyle: activeIndex != null ? {
+          backgroundColor: active ? formInputColors.background.focus : selected ? formInputColors.background.base : "transparent"
+        } : {
+          backgroundColor: selected ? formInputColors.background.base : formInputColors.background.focus
+        },
+        backgroundColor: active ? formInputColors.background.focus : selected ? formInputColors.background.base : "transparent",
+        pressStyle: {
+          backgroundColor: formInputColors.background.focus
+        },
+        children: [/* @__PURE__ */_jsx(Text, {
+          fontFamily: knobProps.body.fontFamily,
+          fontWeight: knobProps.body.fontWeight,
+          color: textColor,
+          numberOfLines: 1,
+          flex: 1,
+          children: option.label
+        }), selected && /* @__PURE__ */_jsx(CheckIcon, {
+          size: 14
+        })]
+      }, option.value);
+    })]
+  });
+  return /* @__PURE__ */_jsx(FloatingPanel, {
+    open,
+    onOpenChange: function onOpenChange(val) {
+      setOpen(val);
+      if (!val) onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    },
+    sheet: true,
+    trigger: /* @__PURE__ */_jsxs(InputParts.Box, {
+      disabled,
+      size: knobProps.sizeToken,
+      ...(inTableCell ? {} : {
+        borderRadius: knobProps.borderRadius.borderRadius,
+        borderWidth: knobProps.borderRadius.borderWidth
+      }),
+      "data-testid": "select-trigger",
+      tabIndex: disabled ? -1 : 0,
+      onKeyDown: function onKeyDown(e) {
+        if (["Enter", " ", "ArrowDown", "ArrowUp", "j", "k"].includes(e.key) || e.code === "Space") {
+          e.preventDefault();
+          if (!open) setOpen(true);
+        }
+      },
+      children: [/* @__PURE__ */_jsx(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__ */_jsx(View, {
+          flexDirection: "row",
+          flexWrap: "nowrap",
+          gap: "$1.5",
+          alignItems: "center",
+          maxHeight: getFieldHeight(knobProps.sizeToken) * 0.75,
+          overflow: "hidden",
+          overflowX: "auto",
+          children: selectedValues.map(function (v) {
+            var _knobProps_sizeToken;
+            return /* @__PURE__ */_jsx(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__ */_jsx(Text, {
+          fontFamily: knobProps.body.fontFamily,
+          fontWeight: knobProps.body.fontWeight,
+          color: selectedOption ? textColor : formCommonColors.muted,
+          numberOfLines: 1,
+          children: (_ref = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) !== null && _ref !== void 0 ? _ref : placeholder
+        })
+      }), /* @__PURE__ */_jsx(View, {
+        paddingRight: "$2",
+        alignSelf: "center",
+        children: /* @__PURE__ */_jsx(CaretDownIcon, {
+          size: 16
+        })
+      })]
+    }),
+    scrollable: hasScrollableContent,
+    disabled,
+    contentPadding: "none",
+    transition: typeof sheetTransition === "string" ? sheetTransition : "medium",
+    children: listContent
+  });
+}
+function Select(param) {
+  var {
+    name,
+    form: formProp,
+    validators,
+    label,
+    labelProps,
+    helperText,
+    error,
+    required,
+    disabled,
+    readOnly,
+    size: sizeProp,
+    id: idProp,
+    value,
+    defaultValue,
+    onValueChange,
+    onBlur,
+    options,
+    placeholder = "Select an option",
+    groupLabel,
+    multiple,
+    dismissible,
+    skeleton,
+    compact,
+    ...rest
+  } = param;
+  var {
+    resolvedForm,
+    knobProps,
+    id
+  } = useFormField({
+    form: formProp,
+    id: idProp,
+    compact
+  });
+  var resolvedValidators = useResolvedValidators(required, validators, label, name);
+  var viewportGtSm = useViewportGtSm();
+  var effectiveGtSm = typeof window !== "undefined" ? viewportGtSm : false;
+  var shouldUseSheet = !isWeb || !effectiveGtSm;
+  if (skeleton) {
+    return /* @__PURE__ */_jsxs(InputParts, {
+      size: sizeProp || knobProps.sizeToken,
+      children: [label && /* @__PURE__ */_jsx(Skeleton, {
+        variant: "text",
+        width: "30%",
+        height: 14
+      }), /* @__PURE__ */_jsx(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__ */_jsx(Paragraph, {
+        fontSize: knobProps.sizeToken,
+        color: knobProps.textAccentColor,
+        paddingVertical: "$2",
+        paddingHorizontal: "$3",
+        fontFamily: knobProps.body.fontFamily,
+        fontWeight: knobProps.body.fontWeight,
+        "aria-readonly": "true",
+        children: labels || "-"
+      });
+    }
+    var sv = typeof selectValue === "string" ? selectValue : void 0;
+    var selectedOption = options.find(function (option) {
+      return option.value === sv;
+    });
+    var displayText = (_ref = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) !== null && _ref !== void 0 ? _ref : sv || "-";
+    return /* @__PURE__ */_jsx(Paragraph, {
+      fontSize: knobProps.sizeToken,
+      color: knobProps.textAccentColor,
+      paddingVertical: "$2",
+      paddingHorizontal: "$3",
+      fontFamily: knobProps.body.fontFamily,
+      fontWeight: knobProps.body.fontWeight,
+      borderRadius: knobProps.borderRadius.borderRadius,
+      borderWidth: knobProps.borderRadius.borderWidth,
+      ...(knobProps.outlined ? {
+        backgroundColor: "transparent"
+      } : void 0),
+      "aria-readonly": "true",
+      children: displayText
+    });
+  };
+  var renderSelectContent = function renderSelectContent2(selectValue, handleValueChange, handleBlur) {
+    if (readOnly) return renderReadOnly(selectValue);
+    var SelectCore = shouldUseSheet ? NativeSelectCore : FloatingSelectCore;
+    return /* @__PURE__ */_jsx(SelectCore, {
+      options,
+      value: selectValue,
+      onValueChange: function onValueChange1(val) {
+        if (disabled) return;
+        handleValueChange === null || handleValueChange === void 0 ? void 0 : handleValueChange(val);
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(val);
+      },
+      onBlur: handleBlur,
+      placeholder,
+      disabled,
+      id,
+      knobProps,
+      groupLabel,
+      multiple,
+      dismissible
+    });
+  };
+  if (!resolvedForm || !name) {
+    return /* @__PURE__ */_jsx(FieldLayout, {
+      id,
+      label,
+      labelProps,
+      error,
+      helperText,
+      required,
+      size: sizeProp,
+      knobProps,
+      ...rest,
+      children: /* @__PURE__ */_jsx(InputParts, {
+        size: sizeProp || knobProps.sizeToken,
+        children: renderSelectContent(value !== null && value !== void 0 ? value : defaultValue, void 0, onBlur)
+      })
+    });
+  }
+  return /* @__PURE__ */_jsx(Field, {
+    form: resolvedForm,
+    name,
+    defaultValue,
+    validators: resolvedValidators,
+    children: function children(field) {
+      var resolvedError = getFieldError(field, error);
+      return /* @__PURE__ */_jsx(FieldLayout, {
+        id,
+        label,
+        labelProps,
+        error: resolvedError,
+        helperText,
+        required,
+        size: sizeProp,
+        knobProps,
+        ...rest,
+        children: /* @__PURE__ */_jsx(InputParts, {
+          size: sizeProp || knobProps.sizeToken,
+          children: renderSelectContent(field.state.value, function (val) {
+            return field.handleChange(val);
+          }, mergeFieldHandler(field, "handleBlur", onBlur))
+        })
+      });
+    }
+  });
+}
+export { Select };
+//# sourceMappingURL=index.native.js.map