@ecohouse/ui 0.1.53 → 0.1.55

package/dist/index.js

@@ -27555,7 +27555,7 @@ var require_react_dom_development = __commonJS({
           return root2;
         }
         var ReactVersion = "18.3.1";
-        function createPortal3(children, containerInfo, implementation) {
+        function createPortal4(children, containerInfo, implementation) {
           var key = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : null;
           {
             checkKeyStringCoercion(key);
@@ -28411,7 +28411,7 @@ var require_react_dom_development = __commonJS({
           if (!isValidContainer(container)) {
             throw new Error("Target container is not a DOM element.");
           }
-          return createPortal3(children, container, null, key);
+          return createPortal4(children, container, null, key);
         }
         function renderSubtreeIntoContainer(parentComponent, element, containerNode, callback) {
           return unstable_renderSubtreeIntoContainer(parentComponent, element, containerNode, callback);
@@ -28535,9 +28535,10 @@ var colors = {
   whiteAlpha40: "#FFFFFF66",
   whiteAlpha20: "#FFFFFF33",
   whiteAlpha1: "#FFFFFF03",
+  whiteAlpha5: "#FFFFFF0D",
   whiteAlpha6: "#FFFFFF0F",
+  whiteAlpha7: "#FFFFFF12",
   whiteAlpha10: "#FFFFFF1A",
-  whiteAlpha5: "#FFFFFF0D",
   dark: "#090909",
   red: "#A63E3E",
   lightGrey: "#B7B7B7",
@@ -31295,10 +31296,19 @@ function BrandLogo({
   );
 }
 var IMAGE_SIZE = 48;
+var CONTAINER_HEIGHT = 56;
 var CONTAINER_RADIUS = 71;
 var CHEVRON_SIZE = 20;
 var FALLBACK_ICON_SIZE = 20;
 var MENU_RADIUS = 16;
+var triggerWebBlurStyle = Platform.OS === "web" ? {
+  backdropFilter: "blur(40px)",
+  WebkitBackdropFilter: "blur(40px)"
+} : {};
+var menuWebBlurStyle = Platform.OS === "web" ? {
+  backdropFilter: "blur(40px)",
+  WebkitBackdropFilter: "blur(40px)"
+} : {};
 var Avatar = forwardRef(function Avatar2({
   name,
   email,
@@ -31306,6 +31316,7 @@ var Avatar = forwardRef(function Avatar2({
   onPress,
   disabled = false,
   showChevron = true,
+  variant = "light",
   menuItems,
   open: openProp,
   defaultOpen = false,
@@ -31327,6 +31338,7 @@ var Avatar = forwardRef(function Avatar2({
   const isOpenControlled = typeof openProp === "boolean";
   const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
   const isOpen = hasMenu && (isOpenControlled ? openProp : uncontrolledOpen);
+  const isLightVariant = variant === "light";
   useApplyWebClassName(containerRef, className);
   const setOpen = useCallback(
     (next) => {
@@ -31396,7 +31408,13 @@ var Avatar = forwardRef(function Avatar2({
         accessibilityRole: isInteractive ? "button" : void 0,
         accessibilityLabel: resolvedAccessibilityLabel,
         accessibilityState: isInteractive ? { disabled, expanded: hasMenu ? isOpen : void 0 } : void 0,
-        style: [styles6.root, disabled && styles6.disabled, style],
+        style: [
+          styles6.root,
+          isLightVariant ? styles6.rootLight : styles6.rootDark,
+          isLightVariant && triggerWebBlurStyle,
+          disabled && styles6.disabled,
+          style
+        ],
         children: [
           /* @__PURE__ */ jsx(View, { style: styles6.imageWrap, children: hasImage ? /* @__PURE__ */ jsx(
             Image,
@@ -31405,30 +31423,71 @@ var Avatar = forwardRef(function Avatar2({
               style: styles6.image,
               onError: () => setImageFailed(true)
             }
-          ) : /* @__PURE__ */ jsx(View, { style: styles6.imageFallback, children: /* @__PURE__ */ jsx(UserIcon, { size: FALLBACK_ICON_SIZE, color: colors.primary }) }) }),
+          ) : /* @__PURE__ */ jsx(
+            View,
+            {
+              style: [
+                styles6.imageFallback,
+                isLightVariant ? styles6.imageFallbackLight : styles6.imageFallbackDark
+              ],
+              children: /* @__PURE__ */ jsx(
+                UserIcon,
+                {
+                  size: FALLBACK_ICON_SIZE,
+                  color: isLightVariant ? colors.white : colors.primary
+                }
+              )
+            }
+          ) }),
           /* @__PURE__ */ jsxs(View, { style: styles6.textColumn, children: [
             /* @__PURE__ */ jsx(Text, { style: styles6.name, numberOfLines: 1, children: name }),
-            email ? /* @__PURE__ */ jsx(Text, { style: styles6.email, numberOfLines: 1, children: email }) : null
+            email ? /* @__PURE__ */ jsx(
+              Text,
+              {
+                style: [styles6.email, isLightVariant ? styles6.emailLight : styles6.emailDark],
+                numberOfLines: 1,
+                children: email
+              }
+            ) : null
           ] }),
-          showChevron ? /* @__PURE__ */ jsx(View, { style: [styles6.chevronSlot, isOpen && styles6.chevronOpen], children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: CHEVRON_SIZE, color: isOpen ? colors.primary : colors.grey100 }) }) : null
+          showChevron ? /* @__PURE__ */ jsx(View, { style: [styles6.chevronSlot, isOpen && styles6.chevronOpen], children: /* @__PURE__ */ jsx(
+            ChevronDownIcon,
+            {
+              size: CHEVRON_SIZE,
+              color: isLightVariant ? colors.white : isOpen ? colors.primary : colors.grey100
+            }
+          ) }) : null
         ]
       }
     ),
-    hasMenu && isOpen ? /* @__PURE__ */ jsx(View, { style: [styles6.menu, menuWidth != null && { right: void 0, width: menuWidth }], children: resolvedMenuItems.map((item) => {
-      const itemKey = item.key ?? item.label;
-      return /* @__PURE__ */ jsx(
-        MenuItem,
-        {
-          icon: item.icon,
-          label: item.label,
-          disabled: item.disabled,
-          backgroundColor: item.backgroundColor,
-          hoverColor: item.hoverColor,
-          onPress: () => handleItemPress(item)
-        },
-        itemKey
-      );
-    }) }) : null
+    hasMenu && isOpen ? /* @__PURE__ */ jsx(
+      View,
+      {
+        style: [
+          styles6.menu,
+          isLightVariant ? styles6.menuLight : styles6.menuDark,
+          isLightVariant && menuWebBlurStyle,
+          menuWidth != null && { right: void 0, width: menuWidth }
+        ],
+        children: resolvedMenuItems.map((item) => {
+          const itemKey = item.key ?? item.label;
+          return /* @__PURE__ */ jsx(
+            MenuItem,
+            {
+              icon: item.icon,
+              label: item.label,
+              disabled: item.disabled,
+              backgroundColor: item.backgroundColor,
+              hoverColor: item.hoverColor ?? (isLightVariant ? colors.whiteAlpha7 : void 0),
+              labelStyle: item.labelStyle,
+              onPress: () => handleItemPress(item),
+              style: isLightVariant ? item.backgroundColor ? styles6.emphasizedMenuItem : styles6.menuItem : void 0
+            },
+            itemKey
+          );
+        })
+      }
+    ) : null
   ] });
 });
 var styles6 = StyleSheet.create({
@@ -31440,6 +31499,7 @@ var styles6 = StyleSheet.create({
     zIndex: 20
   },
   root: {
+    height: CONTAINER_HEIGHT,
     flexDirection: "row",
     alignItems: "center",
     alignSelf: "flex-start",
@@ -31448,7 +31508,12 @@ var styles6 = StyleSheet.create({
     paddingBottom: 4,
     paddingLeft: 4,
     paddingRight: 12,
-    borderRadius: CONTAINER_RADIUS,
+    borderRadius: CONTAINER_RADIUS
+  },
+  rootLight: {
+    backgroundColor: colors.whiteAlpha5
+  },
+  rootDark: {
     backgroundColor: colors.grey700
   },
   disabled: {
@@ -31469,7 +31534,15 @@ var styles6 = StyleSheet.create({
     width: IMAGE_SIZE,
     height: IMAGE_SIZE,
     alignItems: "center",
-    justifyContent: "center",
+    justifyContent: "center"
+  },
+  imageFallbackLight: {
+    borderRadius: IMAGE_SIZE / 2,
+    backgroundColor: "transparent",
+    borderWidth: 1,
+    borderColor: colors.whiteAlpha10
+  },
+  imageFallbackDark: {
     backgroundColor: colors.grey600
   },
   textColumn: {
@@ -31482,7 +31555,12 @@ var styles6 = StyleSheet.create({
     color: colors.white
   },
   email: {
-    ...avatarTypography.email,
+    ...avatarTypography.email
+  },
+  emailLight: {
+    color: colors.whiteAlpha60
+  },
+  emailDark: {
     color: colors.grey0
   },
   chevronSlot: {
@@ -31504,7 +31582,15 @@ var styles6 = StyleSheet.create({
     zIndex: 10,
     borderRadius: MENU_RADIUS,
     padding: 8,
-    gap: 8,
+    gap: 8
+  },
+  menuLight: {
+    borderWidth: 1,
+    borderColor: colors.whiteAlpha10,
+    backgroundColor: colors.whiteAlpha5,
+    overflow: "hidden"
+  },
+  menuDark: {
     backgroundColor: colors.grey700,
     ...Platform.select({
       web: {
@@ -31514,6 +31600,16 @@ var styles6 = StyleSheet.create({
         elevation: 8
       }
     })
+  },
+  menuItem: {
+    height: 32,
+    minHeight: 32,
+    paddingVertical: 6
+  },
+  emphasizedMenuItem: {
+    height: 46,
+    minHeight: 46,
+    paddingVertical: 11
   }
 });
 var IMAGE_SIZE2 = 32;
@@ -33523,6 +33619,7 @@ var defaultLanguageOptions = [
 ];
 var CONTROL_WIDTH = 96;
 var CONTROL_HEIGHT = 35;
+var MENU_WIDTH = 90;
 var ICON_SIZE9 = 16;
 var ICON_BUTTON_SIZE2 = 32;
 var ICON_MENU_WIDTH = 67;
@@ -33530,6 +33627,10 @@ var ICON_MENU_HEIGHT = 129;
 var ICON_MENU_TOP = 39;
 var ITEM_HEIGHT = 35;
 var ACTIVE_ITEM_BACKGROUND = "#E38E5E12";
+var menuWebBlurStyle2 = Platform.OS === "web" ? {
+  backdropFilter: "blur(40px)",
+  WebkitBackdropFilter: "blur(40px)"
+} : {};
 var LanguageSwitcher = forwardRef(
   function LanguageSwitcher2({
     options = defaultLanguageOptions,
@@ -33634,7 +33735,7 @@ var LanguageSwitcher = forwardRef(
               onHoverOut: () => setTriggerHovered(false),
               style: ({ pressed }) => [
                 isIconVariant ? styles22.triggerIcon : styles22.trigger,
-                !isIconVariant && (triggerHovered || pressed || isOpen) && styles22.triggerActive
+                !isIconVariant && (triggerHovered || pressed) && styles22.triggerActive
               ],
               children: [
                 /* @__PURE__ */ jsx(GlobeIcon, { size: ICON_SIZE9, color: colors.white, strokeWidth: isIconVariant ? 1.5 : 2 }),
@@ -33648,7 +33749,11 @@ var LanguageSwitcher = forwardRef(
           isOpen && options.length > 0 ? /* @__PURE__ */ jsx(
             View,
             {
-              style: [styles22.menu, isIconVariant ? styles22.menuIcon : styles22.menuDefault],
+              style: [
+                styles22.menu,
+                !isIconVariant && menuWebBlurStyle2,
+                isIconVariant ? styles22.menuIcon : styles22.menuDefault
+              ],
               accessibilityRole: "menu",
               children: options.map((option) => {
                 const selected = option.value === selectedValue;
@@ -33663,15 +33768,15 @@ var LanguageSwitcher = forwardRef(
                     onHoverOut: () => setHoveredValue(null),
                     style: ({ pressed }) => [
                       styles22.item,
-                      isIconVariant ? styles22.itemIcon : null,
+                      isIconVariant ? styles22.itemIcon : styles22.itemDefault,
                       selected ? isIconVariant ? styles22.itemSelectedIcon : styles22.itemSelected : (hoveredValue === option.value || pressed) && styles22.itemHovered
                     ],
-                    children: /* @__PURE__ */ jsx(
+                    children: ({ pressed }) => /* @__PURE__ */ jsx(
                       Text,
                       {
                         style: [
                           styles22.itemLabel,
-                          selected && (isIconVariant ? styles22.itemLabelSelectedIcon : styles22.itemLabelSelected)
+                          (selected || hoveredValue === option.value || pressed) && styles22.itemLabelActive
                         ],
                         children: option.label
                       }
@@ -33756,10 +33861,14 @@ var styles22 = StyleSheet.create({
   },
   menuDefault: {
     top: CONTROL_HEIGHT + 8,
-    left: 0,
-    width: CONTROL_WIDTH,
-    gap: 8,
-    backgroundColor: colors.whiteAlpha6
+    left: (CONTROL_WIDTH - MENU_WIDTH) / 2,
+    width: MENU_WIDTH,
+    height: 129,
+    gap: 4,
+    backgroundColor: colors.whiteAlpha5,
+    borderWidth: 1,
+    borderColor: colors.whiteAlpha10,
+    borderRadius: 16
   },
   menuIcon: {
     top: ICON_MENU_TOP,
@@ -33787,11 +33896,15 @@ var styles22 = StyleSheet.create({
     width: 51,
     alignSelf: "stretch"
   },
+  itemDefault: {
+    width: 74,
+    alignSelf: "center"
+  },
   itemHovered: {
-    backgroundColor: colors.whiteAlpha6
+    backgroundColor: colors.whiteAlpha7
   },
   itemSelected: {
-    backgroundColor: colors.whiteAlpha6
+    backgroundColor: colors.whiteAlpha7
   },
   itemSelectedIcon: {
     backgroundColor: ACTIVE_ITEM_BACKGROUND
@@ -33799,13 +33912,10 @@ var styles22 = StyleSheet.create({
   itemLabel: {
     ...languageSwitcherTypography,
     ...Platform.select({ web: { fontFamily: `${fonts.sans}, sans-serif` } }),
-    color: colors.white
-  },
-  itemLabelSelected: {
-    color: colors.primary
+    color: colors.whiteAlpha60
   },
-  itemLabelSelectedIcon: {
-    color: colors.primary
+  itemLabelActive: {
+    color: colors.white
   }
 });
 var ICON_SIZE10 = 25.63181;
@@ -36208,6 +36318,9 @@ var styles32 = StyleSheet.create({
     color: colors.red
   }
 });
+
+// src/components/Select/Select.tsx
+var import_react_dom3 = __toESM(require_react_dom());
 var DEFAULT_WIDTH4 = 308;
 var TRIGGER_HEIGHT2 = 44;
 var TRIGGER_RADIUS2 = 60;
@@ -36217,6 +36330,9 @@ var ITEM_RADIUS2 = 12;
 var ICON_SIZE13 = 20;
 var CHIP_GAP = 6;
 var FALLBACK_ELLIPSIS_WIDTH = 20;
+var WEB_MENU_Z_INDEX = 600;
+var WEB_VIEWPORT_PADDING = 8;
+var WEB_MENU_GAP = 8;
 function itemBackground(state) {
   switch (state) {
     case "hover":
@@ -36363,6 +36479,7 @@ var Select = forwardRef(
     const valueProp = props.value;
     const rootRef = useRef(null);
     const triggerRef = useRef(null);
+    const menuRef = useRef(null);
     const searchInputRef = useRef(null);
     const setRootRef = useMemo(() => mergeRefs(rootRef, forwardedRef), [forwardedRef]);
     const isOpenControlled = typeof openProp === "boolean";
@@ -36378,6 +36495,7 @@ var Select = forwardRef(
     const [hoveredValue, setHoveredValue] = useState(null);
     const [menuAlignEnd, setMenuAlignEnd] = useState(false);
     const [menuPlaceAbove, setMenuPlaceAbove] = useState(false);
+    const [webMenuPosition, setWebMenuPosition] = useState(null);
     const selectedValues = useMemo(() => {
       const current = isValueControlled ? valueProp : multiple ? uncontrolledMultiple : uncontrolledSingle;
       return toArray(current);
@@ -36431,6 +36549,7 @@ var Select = forwardRef(
           setHoveredValue(null);
           setMenuAlignEnd(false);
           setMenuPlaceAbove(false);
+          setWebMenuPosition(null);
           onSearchChange?.("");
         }
       },
@@ -36442,15 +36561,18 @@ var Select = forwardRef(
         const trigger = triggerRef.current;
         const rect = trigger?.getBoundingClientRect?.();
         if (!rect) return;
-        const viewportPadding = 8;
-        const gap = 8;
         const menuWidth = Math.max(rect.width, resolvedMenuWidth ?? 0);
-        const overflowsRight = rect.left + menuWidth > window.innerWidth - viewportPadding;
+        const overflowsRight = rect.left + menuWidth > window.innerWidth - WEB_VIEWPORT_PADDING;
         setMenuAlignEnd(overflowsRight);
-        const spaceBelow = window.innerHeight - viewportPadding - rect.bottom;
-        const spaceAbove = rect.top - viewportPadding;
-        const needsAbove = estimatedMenuHeight + gap > spaceBelow && spaceAbove > spaceBelow;
+        const spaceBelow = window.innerHeight - WEB_VIEWPORT_PADDING - rect.bottom;
+        const spaceAbove = rect.top - WEB_VIEWPORT_PADDING;
+        const needsAbove = estimatedMenuHeight + WEB_MENU_GAP > spaceBelow && spaceAbove > spaceBelow;
         setMenuPlaceAbove(needsAbove);
+        const available = Math.max(0, (needsAbove ? spaceAbove : spaceBelow) - WEB_MENU_GAP);
+        const maxHeight = Math.min(estimatedMenuHeight, Math.max(available, TRIGGER_HEIGHT2));
+        const left = overflowsRight ? Math.max(WEB_VIEWPORT_PADDING, rect.right - menuWidth) : Math.min(rect.left, window.innerWidth - WEB_VIEWPORT_PADDING - menuWidth);
+        const top = needsAbove ? Math.max(WEB_VIEWPORT_PADDING, rect.top - WEB_MENU_GAP - maxHeight) : rect.bottom + WEB_MENU_GAP;
+        setWebMenuPosition({ top, left, width: menuWidth, maxHeight });
       };
       updateMenuPlacement();
       window.addEventListener("resize", updateMenuPlacement);
@@ -36467,11 +36589,12 @@ var Select = forwardRef(
     useEffect(() => {
       if (Platform.OS !== "web" || !isOpen) return;
       const handlePointerDown = (event) => {
-        const root = rootRef.current;
         const target = event.target;
-        if (root?.contains && target instanceof Node && !root.contains(target)) {
-          setOpen(false);
-        }
+        if (!(target instanceof Node)) return;
+        const root = rootRef.current;
+        const menu = menuRef.current;
+        if (root?.contains?.(target) || menu?.contains?.(target)) return;
+        setOpen(false);
       };
       document.addEventListener("mousedown", handlePointerDown);
       document.addEventListener("touchstart", handlePointerDown);
@@ -36585,7 +36708,7 @@ var Select = forwardRef(
     ]);
     const leftIconNode = renderStatefulIcon(leftIcon, UserIcon, {
       size: ICON_SIZE13,
-      color: error ? colors.red : colors.primary
+      color: error ? colors.red : isOpen ? colors.primary : colors.grey100
     });
     const hasLeftIcon = showLeftIcon || leftIcon != null;
     const triggerBorderColor = error ? colors.redMuted : isOpen ? colors.primaryMuted : colors.grey700;
@@ -36594,6 +36717,95 @@ var Select = forwardRef(
     const hintColor = error ? colors.red : colors.grey100;
     const singleLabel = selectedOptions[0]?.label ?? placeholder;
     const resolvedAccessibilityLabel = accessibilityLabel ?? (typeof label === "string" ? label : void 0);
+    const optionListMaxHeight = Platform.OS === "web" && webMenuPosition != null ? Math.max(43, webMenuPosition.maxHeight - (24 + (showSearch ? 48 : 0))) : resolvedOptionListMaxHeight;
+    const menuNode = isOpen ? /* @__PURE__ */ jsxs(
+      View,
+      {
+        ref: menuRef,
+        style: [
+          styles33.menu,
+          Platform.OS === "web" && webMenuPosition != null ? {
+            position: "fixed",
+            top: webMenuPosition.top,
+            left: webMenuPosition.left,
+            width: webMenuPosition.width,
+            minWidth: webMenuPosition.width,
+            maxHeight: webMenuPosition.maxHeight,
+            zIndex: WEB_MENU_Z_INDEX,
+            marginTop: 0,
+            marginBottom: 0
+          } : Platform.OS === "web" ? { position: "fixed", opacity: 0, pointerEvents: "none" } : [
+            menuAlignEnd ? styles33.menuAlignEnd : styles33.menuAlignStart,
+            menuPlaceAbove ? styles33.menuAbove : styles33.menuBelow
+          ],
+          menuStyle
+        ],
+        children: [
+          showSearch ? /* @__PURE__ */ jsxs(View, { style: styles33.searchField, children: [
+            /* @__PURE__ */ jsx(View, { style: styles33.iconSlot, children: /* @__PURE__ */ jsx(SearchIcon, { size: ICON_SIZE13, color: colors.grey100 }) }),
+            /* @__PURE__ */ jsx(
+              TextInput,
+              {
+                ref: searchInputRef,
+                value: searchQuery,
+                onChangeText: handleSearchChange,
+                editable: !disabled,
+                placeholder: searchPlaceholder,
+                placeholderTextColor: colors.grey100,
+                style: [
+                  styles33.searchInput,
+                  Platform.OS === "web" ? styles33.searchInputWeb : null,
+                  Platform.OS === "android" ? styles33.searchInputAndroid : null
+                ],
+                accessibilityLabel: searchPlaceholder
+              }
+            )
+          ] }) : null,
+          /* @__PURE__ */ jsxs(
+            ScrollView,
+            {
+              style: [styles33.optionList, { maxHeight: optionListMaxHeight }],
+              contentContainerStyle: styles33.optionListContent,
+              keyboardShouldPersistTaps: "handled",
+              showsVerticalScrollIndicator: false,
+              children: [
+                loading ? /* @__PURE__ */ jsx(View, { style: styles33.statusRow, children: /* @__PURE__ */ jsx(Text, { style: styles33.statusText, children: "Loading..." }) }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsx(View, { style: styles33.statusRow, children: /* @__PURE__ */ jsx(Text, { style: styles33.statusText, children: emptyText }) }) : null,
+                !loading && filteredOptions.map((option) => {
+                  const isSelected = selectedValues.includes(option.value);
+                  const isHovered = hoveredValue === option.value;
+                  const visualState = isSelected ? "selected" : isHovered ? "hover" : "default";
+                  return /* @__PURE__ */ jsxs(
+                    Pressable,
+                    {
+                      onPress: () => handleSelect(option.value),
+                      disabled,
+                      onHoverIn: () => setHoveredValue(option.value),
+                      onHoverOut: () => setHoveredValue((current) => current === option.value ? null : current),
+                      onPressIn: () => setHoveredValue(option.value),
+                      onPressOut: () => setHoveredValue((current) => current === option.value ? null : current),
+                      accessibilityRole: multiple ? "checkbox" : "button",
+                      accessibilityState: { selected: isSelected, checked: isSelected, disabled },
+                      style: [
+                        styles33.item,
+                        {
+                          backgroundColor: itemBackground(visualState)
+                        }
+                      ],
+                      children: [
+                        multiple ? /* @__PURE__ */ jsx(View, { style: [styles33.itemCheckbox, { pointerEvents: "none" }], children: /* @__PURE__ */ jsx(Checkbox, { value: isSelected, variant: "light" }) }) : null,
+                        /* @__PURE__ */ jsx(Text, { style: styles33.itemLabel, numberOfLines: 1, children: option.label })
+                      ]
+                    },
+                    option.value
+                  );
+                })
+              ]
+            }
+          )
+        ]
+      }
+    ) : null;
+    const webMenuPortal = Platform.OS === "web" && isOpen && typeof document !== "undefined" ? (0, import_react_dom3.createPortal)(menuNode, document.body) : null;
     return /* @__PURE__ */ jsxs(
       View,
       {
@@ -36634,80 +36846,7 @@ var Select = forwardRef(
                 ]
               }
             ),
-            isOpen ? /* @__PURE__ */ jsxs(
-              View,
-              {
-                style: [
-                  styles33.menu,
-                  menuAlignEnd ? styles33.menuAlignEnd : styles33.menuAlignStart,
-                  menuPlaceAbove ? styles33.menuAbove : styles33.menuBelow,
-                  menuStyle
-                ],
-                children: [
-                  showSearch ? /* @__PURE__ */ jsxs(View, { style: styles33.searchField, children: [
-                    /* @__PURE__ */ jsx(View, { style: styles33.iconSlot, children: /* @__PURE__ */ jsx(SearchIcon, { size: ICON_SIZE13, color: colors.grey100 }) }),
-                    /* @__PURE__ */ jsx(
-                      TextInput,
-                      {
-                        ref: searchInputRef,
-                        value: searchQuery,
-                        onChangeText: handleSearchChange,
-                        editable: !disabled,
-                        placeholder: searchPlaceholder,
-                        placeholderTextColor: colors.grey100,
-                        style: [
-                          styles33.searchInput,
-                          Platform.OS === "web" ? styles33.searchInputWeb : null,
-                          Platform.OS === "android" ? styles33.searchInputAndroid : null
-                        ],
-                        accessibilityLabel: searchPlaceholder
-                      }
-                    )
-                  ] }) : null,
-                  /* @__PURE__ */ jsxs(
-                    ScrollView,
-                    {
-                      style: [styles33.optionList, { maxHeight: resolvedOptionListMaxHeight }],
-                      contentContainerStyle: styles33.optionListContent,
-                      keyboardShouldPersistTaps: "handled",
-                      showsVerticalScrollIndicator: false,
-                      children: [
-                        loading ? /* @__PURE__ */ jsx(View, { style: styles33.statusRow, children: /* @__PURE__ */ jsx(Text, { style: styles33.statusText, children: "Loading..." }) }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsx(View, { style: styles33.statusRow, children: /* @__PURE__ */ jsx(Text, { style: styles33.statusText, children: emptyText }) }) : null,
-                        !loading && filteredOptions.map((option) => {
-                          const isSelected = selectedValues.includes(option.value);
-                          const isHovered = hoveredValue === option.value;
-                          const visualState = isSelected ? "selected" : isHovered ? "hover" : "default";
-                          return /* @__PURE__ */ jsxs(
-                            Pressable,
-                            {
-                              onPress: () => handleSelect(option.value),
-                              disabled,
-                              onHoverIn: () => setHoveredValue(option.value),
-                              onHoverOut: () => setHoveredValue((current) => current === option.value ? null : current),
-                              onPressIn: () => setHoveredValue(option.value),
-                              onPressOut: () => setHoveredValue((current) => current === option.value ? null : current),
-                              accessibilityRole: multiple ? "checkbox" : "button",
-                              accessibilityState: { selected: isSelected, checked: isSelected, disabled },
-                              style: [
-                                styles33.item,
-                                {
-                                  backgroundColor: itemBackground(visualState)
-                                }
-                              ],
-                              children: [
-                                multiple ? /* @__PURE__ */ jsx(View, { style: [styles33.itemCheckbox, { pointerEvents: "none" }], children: /* @__PURE__ */ jsx(Checkbox, { value: isSelected, variant: "light" }) }) : null,
-                                /* @__PURE__ */ jsx(Text, { style: styles33.itemLabel, numberOfLines: 1, children: option.label })
-                              ]
-                            },
-                            option.value
-                          );
-                        })
-                      ]
-                    }
-                  )
-                ]
-              }
-            ) : null
+            Platform.OS === "web" ? webMenuPortal : menuNode
           ] }),
           showHint && hint ? /* @__PURE__ */ jsx(Text, { style: [styles33.hint, { color: hintColor }], children: hint }) : null
         ]