@ecohouse/ui 0.1.34 → 0.1.35

package/dist/index.cjs

@@ -7403,7 +7403,7 @@ var require_react_dom_development = __commonJS({
         var HostPortal = 4;
         var HostComponent = 5;
         var HostText = 6;
-        var Fragment3 = 7;
+        var Fragment4 = 7;
         var Mode = 8;
         var ContextConsumer = 9;
         var ContextProvider = 10;
@@ -8558,7 +8558,7 @@ var require_react_dom_development = __commonJS({
               return "DehydratedFragment";
             case ForwardRef:
               return getWrappedName$1(type, type.render, "ForwardRef");
-            case Fragment3:
+            case Fragment4:
               return "Fragment";
             case HostComponent:
               return type;
@@ -16983,7 +16983,7 @@ var require_react_dom_development = __commonJS({
             }
           }
           function updateFragment2(returnFiber, current2, fragment, lanes, key) {
-            if (current2 === null || current2.tag !== Fragment3) {
+            if (current2 === null || current2.tag !== Fragment4) {
               var created = createFiberFromFragment(fragment, returnFiber.mode, lanes, key);
               created.return = returnFiber;
               return created;
@@ -17386,7 +17386,7 @@ var require_react_dom_development = __commonJS({
               if (child.key === key) {
                 var elementType = element.type;
                 if (elementType === REACT_FRAGMENT_TYPE) {
-                  if (child.tag === Fragment3) {
+                  if (child.tag === Fragment4) {
                     deleteRemainingChildren(returnFiber, child.sibling);
                     var existing = useFiber(child, element.props.children);
                     existing.return = returnFiber;
@@ -22860,7 +22860,7 @@ var require_react_dom_development = __commonJS({
               var _resolvedProps2 = workInProgress2.elementType === type ? _unresolvedProps2 : resolveDefaultProps(type, _unresolvedProps2);
               return updateForwardRef(current2, workInProgress2, type, _resolvedProps2, renderLanes2);
             }
-            case Fragment3:
+            case Fragment4:
               return updateFragment(current2, workInProgress2, renderLanes2);
             case Mode:
               return updateMode(current2, workInProgress2, renderLanes2);
@@ -23132,7 +23132,7 @@ var require_react_dom_development = __commonJS({
             case SimpleMemoComponent:
             case FunctionComponent:
             case ForwardRef:
-            case Fragment3:
+            case Fragment4:
             case Mode:
             case Profiler:
             case ContextConsumer:
@@ -27384,7 +27384,7 @@ var require_react_dom_development = __commonJS({
           return fiber;
         }
         function createFiberFromFragment(elements, mode, lanes, key) {
-          var fiber = createFiber(Fragment3, elements, key, mode);
+          var fiber = createFiber(Fragment4, elements, key, mode);
           fiber.lanes = lanes;
           return fiber;
         }
@@ -28619,8 +28619,8 @@ var languageSwitcherTypography = {
   fontFamily: fonts.sans,
   fontSize: 14,
   fontWeight: "600",
-  lineHeight: 19,
-  letterSpacing: 0
+  lineHeight: 14,
+  letterSpacing: 0.42
 };
 var counterTypography = {
   fontFamily: fonts.sans,
@@ -29415,9 +29415,9 @@ function HeadsetIcon({ size = 24, color = "#B76533", strokeWidth = 2 }) {
 }
 
 // src/icons/Globe/globePath.ts
-var GLOBE_PATH = "M18.3333 10C18.3333 14.6024 14.6024 18.3333 10 18.3333M18.3333 10C18.3333 5.39763 14.6024 1.66667 10 1.66667M18.3333 10H1.66667M10 18.3333C5.39763 18.3333 1.66667 14.6024 1.66667 10M10 18.3333C12.0833 16.0511 13.2675 13.0836 13.3333 10C13.2675 6.91643 12.0833 3.94892 10 1.66667M10 18.3333C7.91667 16.0511 6.73248 13.0836 6.66667 10C6.73248 6.91643 7.91667 3.94892 10 1.66667M1.66667 10C1.66667 5.39763 5.39763 1.66667 10 1.66667";
-function GlobeIcon({ size = 20, color = colors.primary, strokeWidth = 2 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Svg20__default.default, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+var GLOBE_PATH = "M1.3335 8.00004H14.6668M1.3335 8.00004C1.3335 11.6819 4.31826 14.6667 8.00016 14.6667M1.3335 8.00004C1.3335 4.31814 4.31826 1.33337 8.00016 1.33337M14.6668 8.00004C14.6668 11.6819 11.6821 14.6667 8.00016 14.6667M14.6668 8.00004C14.6668 4.31814 11.6821 1.33337 8.00016 1.33337M8.00016 1.33337C9.66768 3.15894 10.6153 5.52806 10.6668 8.00004C10.6153 10.472 9.66768 12.8411 8.00016 14.6667M8.00016 1.33337C6.33264 3.15894 5.38499 5.52806 5.3335 8.00004C5.38499 10.472 6.33264 12.8411 8.00016 14.6667";
+function GlobeIcon({ size = 16, color = colors.primary, strokeWidth = 1.5 }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Svg20__default.default, { width: size, height: size, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
     Svg20.Path,
     {
       d: GLOBE_PATH,
@@ -29485,7 +29485,7 @@ function InstagramIcon({ size = 20, color = colors.white }) {
 }
 
 // src/icons/Key/keyPath.ts
-var KEY_PATH = "M5.28673 10.0002L7.0545 11.768M7.6435 7.64301L9.41127 9.41078M10.0003 5.28624L11.768 7.05401M4.22553 11.0604L11.0609 4.22505C11.7209 3.56502 12.0513 3.235 12.4318 3.11136C12.7666 3.00259 13.127 3.00259 13.4618 3.11136C13.8421 3.23494 14.1718 3.56464 14.8311 4.22393L15.775 5.16785C16.4351 5.82788 16.7654 6.15867 16.8891 6.53922C16.9979 6.87396 16.9976 7.23381 16.8889 7.56855C16.7652 7.9491 16.4353 8.27937 15.7753 8.9394L8.93989 15.7748C8.27986 16.4348 7.94959 16.7647 7.56904 16.8884C7.2343 16.9971 6.87445 16.9974 6.53971 16.8886C6.15916 16.765 5.82837 16.4346 5.16834 15.7745L4.22441 14.8306C3.56513 14.1713 3.23542 13.8416 3.11185 13.4613C3.00308 13.1266 3.00308 12.7661 3.11185 12.4313C3.23549 12.0508 3.56551 11.7204 4.22553 11.0604Z";
+var KEY_PATH = "M14.1668 8.33333V6.66667C14.1668 4.36548 12.3013 2.5 10.0002 2.5C7.69898 2.5 5.8335 4.36548 5.8335 6.66667V8.33333M10.0002 12.0833V13.75M7.3335 17.5H12.6668C14.067 17.5 14.767 17.5 15.3018 17.2275C15.7722 16.9878 16.1547 16.6054 16.3943 16.135C16.6668 15.6002 16.6668 14.9001 16.6668 13.5V12.3333C16.6668 10.9332 16.6668 10.2331 16.3943 9.69836C16.1547 9.22795 15.7722 8.8455 15.3018 8.60582C14.767 8.33333 14.067 8.33333 12.6668 8.33333H7.3335C5.93336 8.33333 5.2333 8.33333 4.69852 8.60582C4.22811 8.8455 3.84566 9.22795 3.60598 9.69836C3.3335 10.2331 3.3335 10.9332 3.3335 12.3333V13.5C3.3335 14.9001 3.3335 15.6002 3.60598 16.135C3.84566 16.6054 4.22811 16.9878 4.69852 17.2275C5.2333 17.5 5.93336 17.5 7.3335 17.5Z";
 function KeyIcon({ size = 20, color = colors.primary, strokeWidth = 2 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(Svg20__default.default, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
     Svg20.Path,
@@ -31038,6 +31038,7 @@ var AccountHeader = react.forwardRef(
     onBackPress,
     onMenuPress,
     onNotificationsPress,
+    languageSlot,
     badge,
     backAccessibilityLabel = "Back",
     menuAccessibilityLabel = "Open menu",
@@ -31117,16 +31118,19 @@ var AccountHeader = react.forwardRef(
               ]
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles6.end, children: /* @__PURE__ */ jsxRuntime.jsx(
-            reactNative.Pressable,
-            {
-              accessibilityRole: "button",
-              accessibilityLabel: notificationsAccessibilityLabel,
-              onPress: onNotificationsPress,
-              style: styles6.iconButton,
-              children: /* @__PURE__ */ jsxRuntime.jsx(BellIcon, { color: colors.white, size: ICON_BUTTON_ICON_SIZE, strokeWidth: 1.5 })
-            }
-          ) })
+          /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles6.end, children: [
+            languageSlot != null ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles6.languageSlot, children: languageSlot }) : null,
+            /* @__PURE__ */ jsxRuntime.jsx(
+              reactNative.Pressable,
+              {
+                accessibilityRole: "button",
+                accessibilityLabel: notificationsAccessibilityLabel,
+                onPress: onNotificationsPress,
+                style: styles6.iconButton,
+                children: /* @__PURE__ */ jsxRuntime.jsx(BellIcon, { color: colors.white, size: ICON_BUTTON_ICON_SIZE, strokeWidth: 1.5 })
+              }
+            )
+          ] })
         ]
       }
     );
@@ -31146,7 +31150,9 @@ var styles6 = reactNative.StyleSheet.create({
     paddingLeft: 24,
     backgroundColor: colors.dark,
     borderBottomWidth: 1,
-    borderBottomColor: colors.grey700
+    borderBottomColor: colors.grey700,
+    zIndex: 40,
+    position: "relative"
   },
   start: {
     flex: 1,
@@ -31169,7 +31175,17 @@ var styles6 = reactNative.StyleSheet.create({
   },
   end: {
     flexShrink: 0,
-    marginLeft: RIGHT_GAP
+    marginLeft: RIGHT_GAP,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    zIndex: 50,
+    position: "relative"
+  },
+  languageSlot: {
+    flexShrink: 0,
+    zIndex: 50,
+    position: "relative"
   },
   iconButton: {
     width: ICON_BUTTON_SIZE,
@@ -31784,10 +31800,14 @@ var AccordionItem = react.forwardRef(
     });
     const bodyTextStyle = [styles13.body, { fontSize: bodyFontSize, lineHeight: bodyLineHeight }];
     return /* @__PURE__ */ jsxRuntime.jsxs(
-      reactNative.View,
+      reactNative.Pressable,
       {
         ...rest,
         ref: setContainerRef,
+        accessibilityRole: "button",
+        accessibilityState: { expanded: open },
+        accessibilityLabel: accessibilityLabel ?? title,
+        onPress: toggle,
         style: [
           styles13.root,
           {
@@ -31795,30 +31815,21 @@ var AccordionItem = react.forwardRef(
             paddingRight: paddingX,
             paddingLeft: paddingX
           },
+          reactNative.Platform.OS === "web" ? styles13.rootWeb : null,
           style
         ],
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            reactNative.Pressable,
-            {
-              accessibilityRole: "button",
-              accessibilityState: { expanded: open },
-              accessibilityLabel: accessibilityLabel ?? title,
-              onPress: toggle,
-              style: styles13.header,
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles13.title, children: title }),
-                /* @__PURE__ */ jsxRuntime.jsx(reactNative.Animated.View, { style: [styles13.chevron, { transform: [{ rotate: chevronRotate }] }], children: /* @__PURE__ */ jsxRuntime.jsx(
-                  ChevronDownIcon,
-                  {
-                    size: CHEVRON_SIZE2,
-                    color: open ? colors.primary : colors.grey400,
-                    strokeWidth: 2
-                  }
-                ) })
-              ]
-            }
-          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles13.header, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles13.title, children: title }),
+            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Animated.View, { style: [styles13.chevron, { transform: [{ rotate: chevronRotate }] }], children: /* @__PURE__ */ jsxRuntime.jsx(
+              ChevronDownIcon,
+              {
+                size: CHEVRON_SIZE2,
+                color: open ? colors.primary : colors.grey400,
+                strokeWidth: 2
+              }
+            ) })
+          ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
             reactNative.View,
             {
@@ -31828,7 +31839,7 @@ var AccordionItem = react.forwardRef(
               children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: bodyTextStyle, children })
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Animated.View, { style: [styles13.bodyClip, { height: bodyHeight }], children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles13.bodyInner, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: bodyTextStyle, children }) }) })
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Animated.View, { style: [styles13.bodyClip, { height: bodyHeight }], pointerEvents: "none", children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles13.bodyInner, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: bodyTextStyle, children }) }) })
         ]
       }
     );
@@ -31843,6 +31854,9 @@ var styles13 = reactNative.StyleSheet.create({
     opacity: 1,
     overflow: "hidden"
   },
+  rootWeb: {
+    cursor: "pointer"
+  },
   header: {
     flexDirection: "row",
     alignItems: "center",
@@ -32608,6 +32622,12 @@ var defaultLanguageOptions = [
 var CONTROL_WIDTH = 90;
 var CONTROL_HEIGHT = 35;
 var ICON_SIZE8 = 16;
+var ICON_BUTTON_SIZE2 = 32;
+var ICON_MENU_WIDTH = 67;
+var ICON_MENU_HEIGHT = 129;
+var ICON_MENU_TOP = 39;
+var ITEM_HEIGHT = 35;
+var ACTIVE_ITEM_BACKGROUND = "#E38E5E12";
 var LanguageSwitcher = react.forwardRef(
   function LanguageSwitcher2({
     options = defaultLanguageOptions,
@@ -32618,6 +32638,7 @@ var LanguageSwitcher = react.forwardRef(
     defaultOpen = false,
     onOpenChange,
     disabled = false,
+    variant = "default",
     accessibilityLabel = "Language",
     style,
     className,
@@ -32637,6 +32658,7 @@ var LanguageSwitcher = react.forwardRef(
     const selectedValue = isValueControlled ? value : uncontrolledValue;
     const isOpen = isOpenControlled ? openProp : uncontrolledOpen;
     const selectedOption = options.find((option) => option.value === selectedValue) ?? options[0] ?? null;
+    const isIconVariant = variant === "icon";
     useApplyWebClassName(wrapperRef, className?.trim() || void 0);
     const setOpen = react.useCallback(
       (next) => {
@@ -32687,7 +32709,14 @@ var LanguageSwitcher = react.forwardRef(
       {
         ...rest,
         ref: setWrapperRef,
-        style: [styles18.wrapper, isOpen && styles18.wrapperOpen, disabled && styles18.disabled, style],
+        style: [
+          styles18.wrapper,
+          isIconVariant ? styles18.wrapperIcon : styles18.wrapperDefault,
+          isOpen && styles18.wrapperOpen,
+          isOpen && isIconVariant && styles18.wrapperOpenIcon,
+          disabled && styles18.disabled,
+          style
+        ],
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs(
             reactNative.Pressable,
@@ -32702,36 +32731,55 @@ var LanguageSwitcher = react.forwardRef(
               onHoverIn: () => setTriggerHovered(true),
               onHoverOut: () => setTriggerHovered(false),
               style: ({ pressed }) => [
-                styles18.trigger,
-                (triggerHovered || pressed || isOpen) && styles18.triggerActive
+                isIconVariant ? styles18.triggerIcon : styles18.trigger,
+                !isIconVariant && (triggerHovered || pressed || isOpen) && styles18.triggerActive
               ],
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx(GlobeIcon, { size: ICON_SIZE8, color: colors.white, strokeWidth: 2 }),
-                /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles18.triggerLabel, numberOfLines: 1, children: selectedOption?.label ?? "" }),
-                /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles18.chevron, isOpen && styles18.chevronOpen], children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, { size: ICON_SIZE8, color: colors.white, strokeWidth: 2 }) })
+                /* @__PURE__ */ jsxRuntime.jsx(GlobeIcon, { size: ICON_SIZE8, color: colors.white, strokeWidth: isIconVariant ? 1.5 : 2 }),
+                !isIconVariant ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles18.triggerLabel, numberOfLines: 1, children: selectedOption?.label ?? "" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles18.chevron, isOpen && styles18.chevronOpen], children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, { size: ICON_SIZE8, color: colors.white, strokeWidth: 2 }) })
+                ] }) : null
               ]
             }
           ),
-          isOpen && options.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles18.menu, accessibilityRole: "menu", children: options.map((option) => {
-            const selected = option.value === selectedValue;
-            return /* @__PURE__ */ jsxRuntime.jsx(
-              reactNative.Pressable,
-              {
-                onPress: () => selectLanguage(option.value),
-                accessibilityRole: "menuitem",
-                accessibilityLabel: option.label,
-                accessibilityState: { selected },
-                onHoverIn: () => setHoveredValue(option.value),
-                onHoverOut: () => setHoveredValue(null),
-                style: ({ pressed }) => [
-                  styles18.item,
-                  selected ? styles18.itemSelected : (hoveredValue === option.value || pressed) && styles18.itemHovered
-                ],
-                children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles18.itemLabel, selected && styles18.itemLabelSelected], children: option.label })
-              },
-              option.value
-            );
-          }) }) : null
+          isOpen && options.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.View,
+            {
+              style: [styles18.menu, isIconVariant ? styles18.menuIcon : styles18.menuDefault],
+              accessibilityRole: "menu",
+              children: options.map((option) => {
+                const selected = option.value === selectedValue;
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  reactNative.Pressable,
+                  {
+                    onPress: () => selectLanguage(option.value),
+                    accessibilityRole: "menuitem",
+                    accessibilityLabel: option.label,
+                    accessibilityState: { selected },
+                    onHoverIn: () => setHoveredValue(option.value),
+                    onHoverOut: () => setHoveredValue(null),
+                    style: ({ pressed }) => [
+                      styles18.item,
+                      isIconVariant ? styles18.itemIcon : null,
+                      selected ? isIconVariant ? styles18.itemSelectedIcon : styles18.itemSelected : (hoveredValue === option.value || pressed) && styles18.itemHovered
+                    ],
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      reactNative.Text,
+                      {
+                        style: [
+                          styles18.itemLabel,
+                          selected && (isIconVariant ? styles18.itemLabelSelectedIcon : styles18.itemLabelSelected)
+                        ],
+                        children: option.label
+                      }
+                    )
+                  },
+                  option.value
+                );
+              })
+            }
+          ) : null
         ]
       }
     );
@@ -32740,11 +32788,19 @@ var LanguageSwitcher = react.forwardRef(
 var styles18 = reactNative.StyleSheet.create({
   wrapper: {
     position: "relative",
-    width: CONTROL_WIDTH,
     alignSelf: "flex-start"
   },
+  wrapperDefault: {
+    width: CONTROL_WIDTH
+  },
+  wrapperIcon: {
+    width: ICON_BUTTON_SIZE2
+  },
   wrapperOpen: {
-    zIndex: 20
+    zIndex: 100
+  },
+  wrapperOpenIcon: {
+    zIndex: 200
   },
   disabled: {
     opacity: 0.6
@@ -32759,6 +32815,17 @@ var styles18 = reactNative.StyleSheet.create({
     borderRadius: 12,
     backgroundColor: "transparent"
   },
+  triggerIcon: {
+    width: ICON_BUTTON_SIZE2,
+    height: ICON_BUTTON_SIZE2,
+    padding: 8,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 5,
+    backgroundColor: colors.grey800,
+    borderWidth: 1,
+    borderColor: colors.grey700
+  },
   triggerActive: {
     backgroundColor: colors.whiteAlpha6
   },
@@ -32781,22 +32848,42 @@ var styles18 = reactNative.StyleSheet.create({
   },
   menu: {
     position: "absolute",
+    padding: 8,
+    borderRadius: 12,
+    overflow: "hidden"
+  },
+  menuDefault: {
     top: CONTROL_HEIGHT + 8,
     left: 0,
     width: CONTROL_WIDTH,
-    padding: 8,
     gap: 8,
-    borderRadius: 12,
-    backgroundColor: colors.whiteAlpha6,
-    overflow: "hidden"
+    backgroundColor: colors.whiteAlpha6
+  },
+  menuIcon: {
+    top: ICON_MENU_TOP,
+    left: (ICON_BUTTON_SIZE2 - ICON_MENU_WIDTH) / 2,
+    right: "auto",
+    width: ICON_MENU_WIDTH,
+    height: ICON_MENU_HEIGHT,
+    gap: 4,
+    opacity: 1,
+    zIndex: 200,
+    backgroundColor: colors.grey800,
+    borderWidth: 1,
+    borderColor: colors.grey700
   },
   item: {
-    height: CONTROL_HEIGHT,
+    height: ITEM_HEIGHT,
     alignItems: "center",
     justifyContent: "center",
     paddingVertical: 8,
     paddingHorizontal: 12,
-    borderRadius: 8
+    borderRadius: 8,
+    gap: 8
+  },
+  itemIcon: {
+    width: 51,
+    alignSelf: "stretch"
   },
   itemHovered: {
     backgroundColor: colors.whiteAlpha6
@@ -32804,6 +32891,9 @@ var styles18 = reactNative.StyleSheet.create({
   itemSelected: {
     backgroundColor: colors.whiteAlpha6
   },
+  itemSelectedIcon: {
+    backgroundColor: ACTIVE_ITEM_BACKGROUND
+  },
   itemLabel: {
     ...languageSwitcherTypography,
     ...reactNative.Platform.select({ web: { fontFamily: `${fonts.sans}, sans-serif` } }),
@@ -32811,6 +32901,9 @@ var styles18 = reactNative.StyleSheet.create({
   },
   itemLabelSelected: {
     color: colors.primary
+  },
+  itemLabelSelectedIcon: {
+    color: colors.primary
   }
 });
 var ICON_SIZE9 = 25.63181;
@@ -33231,14 +33324,22 @@ var DEFAULT_WEEKDAY_LABELS = ["\u0535\u0550", "\u0535\u0554", "\u0549\u0550", "\
 var EMPTY_RANGE = { start: null, end: null };
 var DEFAULT_WIDTH = 320;
 var DEFAULT_MENU_HEIGHT = 388;
+var MENU_CONTENT_WIDTH = 296;
 var RANGE_TRIGGER_WIDTH = 382;
 var TRIGGER_HEIGHT = 44;
 var TRIGGER_RADIUS = 60;
 var MENU_RADIUS2 = 20;
+var MENU_PADDING = 12;
 var ICON_SIZE10 = 20;
 var NAV_ICON_SIZE = 20;
+var HEADER_HEIGHT3 = 36;
+var WEEKDAY_ROW_HEIGHT = 44;
+var WEEKDAY_ROW_GAP = 8;
+var WEEK_ROW_GAP = 16;
+var DAY_CELL_WIDTH = 42.28571701049805;
 var DAY_CELL_HEIGHT = 44;
-var DAY_CIRCLE_SIZE = 44;
+var DAY_CELL_RADIUS = 67;
+var DAY_CELL_PADDING = 12;
 function RangeTriggerField({
   label,
   value,
@@ -33522,7 +33623,7 @@ var DatePicker = react.forwardRef(
                   )
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles22.weekdayRow, children: weekdayLabels.map((weekdayLabel, index) => /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles22.dayCellWrap, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles22.weekdayText, children: weekdayLabel }) }, `${weekdayLabel}-${index}`)) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles22.weekdayRow, children: weekdayLabels.map((weekdayLabel, index) => /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles22.weekdayCell, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles22.weekdayText, children: weekdayLabel }) }, `${weekdayLabel}-${index}`)) }),
                   weeks.map((week, weekIndex) => {
                     let rangeHighlightStyle = null;
                     if (isRange && rangeValue.start && rangeValue.end) {
@@ -33746,10 +33847,11 @@ var styles22 = reactNative.StyleSheet.create({
     marginTop: 8,
     zIndex: 10,
     borderRadius: MENU_RADIUS2,
-    padding: 12,
+    padding: MENU_PADDING,
     gap: 0,
     opacity: 1,
     backgroundColor: colors.grey700,
+    overflow: "hidden",
     ...reactNative.Platform.select({
       web: {
         boxShadow: `0 8px 24px ${colors.black}73`
@@ -33778,14 +33880,17 @@ var styles22 = reactNative.StyleSheet.create({
     width: RANGE_TRIGGER_WIDTH
   },
   calendarHeader: {
-    height: 36,
+    height: HEADER_HEIGHT3,
+    paddingTop: 8,
+    paddingBottom: 8,
     flexDirection: "row",
     alignItems: "center",
-    justifyContent: "space-between"
+    justifyContent: "space-between",
+    opacity: 1
   },
   navButton: {
-    width: 36,
-    height: 36,
+    width: HEADER_HEIGHT3,
+    height: HEADER_HEIGHT3,
     alignItems: "center",
     justifyContent: "center"
   },
@@ -33798,7 +33903,21 @@ var styles22 = reactNative.StyleSheet.create({
     textAlign: "center"
   },
   weekdayRow: {
-    flexDirection: "row"
+    width: MENU_CONTENT_WIDTH,
+    height: WEEKDAY_ROW_HEIGHT,
+    marginTop: WEEKDAY_ROW_GAP,
+    flexDirection: "row",
+    alignItems: "center",
+    opacity: 1
+  },
+  weekdayCell: {
+    width: DAY_CELL_WIDTH,
+    height: WEEKDAY_ROW_HEIGHT,
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: 0,
+    alignItems: "center",
+    justifyContent: "center"
   },
   weekdayText: {
     ...datePickerTypography.weekday,
@@ -33807,29 +33926,36 @@ var styles22 = reactNative.StyleSheet.create({
     textTransform: "uppercase"
   },
   weekRow: {
+    width: MENU_CONTENT_WIDTH,
     flexDirection: "row",
     position: "relative"
   },
   weekRowSpaced: {
-    marginTop: 8
+    marginTop: WEEK_ROW_GAP
   },
   rangeHighlight: {
     position: "absolute",
-    top: (DAY_CELL_HEIGHT - DAY_CIRCLE_SIZE) / 2,
-    bottom: (DAY_CELL_HEIGHT - DAY_CIRCLE_SIZE) / 2,
-    borderRadius: DAY_CIRCLE_SIZE / 2,
+    top: 0,
+    bottom: 0,
+    borderRadius: DAY_CELL_RADIUS,
     backgroundColor: colors.primaryHover
   },
   dayCellWrap: {
-    flex: 1,
+    width: DAY_CELL_WIDTH,
     height: DAY_CELL_HEIGHT,
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: 0,
     alignItems: "center",
-    justifyContent: "center"
+    justifyContent: "center",
+    opacity: 1
   },
   dayCircle: {
-    width: DAY_CIRCLE_SIZE,
-    height: DAY_CIRCLE_SIZE,
-    borderRadius: DAY_CIRCLE_SIZE / 2,
+    width: "100%",
+    height: "100%",
+    borderRadius: DAY_CELL_RADIUS,
+    padding: DAY_CELL_PADDING,
+    gap: 10,
     alignItems: "center",
     justifyContent: "center"
   },
@@ -34140,6 +34266,8 @@ var Input = react.forwardRef(function Input2({
   const [focused, setFocused] = react.useState(false);
   const [uncontrolledValue, setUncontrolledValue] = react.useState(defaultValue ?? "");
   const metrics = sizeConfig2[size];
+  const reactId = react.useId();
+  const inputDomId = `eh-input-${reactId.replace(/:/g, "")}`;
   const isControlled = typeof value === "string";
   const currentValue = isControlled ? value : uncontrolledValue;
   const hasValue = currentValue.length > 0;
@@ -34156,28 +34284,37 @@ var Input = react.forwardRef(function Input2({
     size: metrics.iconSize,
     color: chrome.rightIconColor
   });
+  const focusInput = () => {
+    if (disabled) return;
+    inputRef.current?.focus();
+  };
   useApplyWebClassName(rootRef, className);
   useApplyWebClassName(inputRef, inputClassName);
+  const fieldChromeStyle = [
+    styles25.field,
+    {
+      height: metrics.height,
+      borderRadius: metrics.borderRadius,
+      paddingTop: metrics.paddingVertical,
+      paddingBottom: metrics.paddingVertical,
+      paddingLeft: metrics.paddingHorizontal,
+      paddingRight: metrics.paddingHorizontal,
+      gap: metrics.gap,
+      borderColor: chrome.borderColor,
+      backgroundColor: chrome.backgroundColor
+    },
+    reactNative.Platform.OS === "web" ? styles25.fieldWeb : null,
+    fieldStyle
+  ];
   return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ref: rootRef, style: [styles25.root, disabled && styles25.disabled, style], children: [
-    showLabel && label ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles25.label, { color: chrome.labelColor }], children: label }) : null,
+    showLabel && label ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Pressable, { disabled, onPress: focusInput, style: styles25.labelPressable, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles25.label, { color: chrome.labelColor }], children: label }) }) : null,
     /* @__PURE__ */ jsxRuntime.jsxs(
-      reactNative.View,
+      reactNative.Pressable,
       {
-        style: [
-          styles25.field,
-          {
-            height: metrics.height,
-            borderRadius: metrics.borderRadius,
-            paddingTop: metrics.paddingVertical,
-            paddingBottom: metrics.paddingVertical,
-            paddingLeft: metrics.paddingHorizontal,
-            paddingRight: metrics.paddingHorizontal,
-            gap: metrics.gap,
-            borderColor: chrome.borderColor,
-            backgroundColor: chrome.backgroundColor
-          },
-          fieldStyle
-        ],
+        accessibilityRole: "none",
+        disabled,
+        onPress: focusInput,
+        style: fieldChromeStyle,
         children: [
           hasLeftIcon ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles25.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }], children: leftIconNode }) : null,
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -34185,6 +34322,7 @@ var Input = react.forwardRef(function Input2({
             {
               ref: setInputRef,
               ...textInputProps,
+              nativeID: inputDomId,
               value: isControlled ? value : void 0,
               defaultValue: isControlled ? void 0 : defaultValue,
               editable: !disabled,
@@ -34225,7 +34363,16 @@ var Input = react.forwardRef(function Input2({
               hitSlop: 8,
               children: rightIconNode
             }
-          ) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles25.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }], children: rightIconNode }) : null
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.Pressable,
+            {
+              accessibilityRole: "none",
+              disabled,
+              onPress: focusInput,
+              style: [styles25.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }],
+              children: rightIconNode
+            }
+          ) : null
         ]
       }
     ),
@@ -34241,6 +34388,9 @@ var styles25 = reactNative.StyleSheet.create({
   disabled: {
     opacity: 0.6
   },
+  labelPressable: {
+    alignSelf: "flex-start"
+  },
   label: {
     ...inputTypography.label
   },
@@ -34249,13 +34399,21 @@ var styles25 = reactNative.StyleSheet.create({
     flexDirection: "row",
     alignItems: "center"
   },
+  fieldWeb: {
+    // Web-only cursor for the clickable field chrome.
+    cursor: "text"
+  },
   input: {
     flex: 1,
+    alignSelf: "stretch",
     paddingVertical: 0,
     margin: 0
   },
   inputWeb: {
-    outlineStyle: "none"
+    outlineStyle: "none",
+    height: "100%",
+    minWidth: 0,
+    cursor: "text"
   },
   inputAndroid: {
     includeFontPadding: false
@@ -34618,6 +34776,7 @@ var Select = react.forwardRef(
       emptyText = "No results",
       valueColor,
       style,
+      menuStyle,
       className,
       accessibilityLabel,
       // Pulled out only to keep them off `rest` (which is spread onto the root View);
@@ -34645,6 +34804,8 @@ var Select = react.forwardRef(
     const [uncontrolledOpen, setUncontrolledOpen] = react.useState(defaultOpen);
     const [searchQuery, setSearchQuery] = react.useState("");
     const [hoveredValue, setHoveredValue] = react.useState(null);
+    const [menuAlignEnd, setMenuAlignEnd] = react.useState(false);
+    const [menuPlaceAbove, setMenuPlaceAbove] = react.useState(false);
     const selectedValues = react.useMemo(() => {
       const current = isValueControlled ? valueProp : multiple ? uncontrolledMultiple : uncontrolledSingle;
       return toArray(current);
@@ -34663,6 +34824,23 @@ var Select = react.forwardRef(
       return options.filter((option) => option.label.toLowerCase().includes(query));
     }, [isExternalSearch, options, searchQuery]);
     useApplyWebClassName(rootRef, className);
+    const resolvedMenuWidth = react.useMemo(() => {
+      const flat = reactNative.StyleSheet.flatten(menuStyle);
+      const width = flat?.width;
+      if (typeof width === "number") return width;
+      const minWidth = flat?.minWidth;
+      if (typeof minWidth === "number") return minWidth;
+      return null;
+    }, [menuStyle]);
+    const estimatedMenuHeight = react.useMemo(() => {
+      const searchBlock = showSearch ? 40 + 8 : 0;
+      const optionCount = Math.max(filteredOptions.length, 1);
+      const listHeight = Math.min(
+        optionCount * 43 + Math.max(0, optionCount - 1) * 8,
+        MENU_MAX_LIST_HEIGHT
+      );
+      return 24 + searchBlock + listHeight;
+    }, [filteredOptions.length, showSearch]);
     const setOpen = react.useCallback(
       (next) => {
         if (!isOpenControlled) setUncontrolledOpen(next);
@@ -34672,11 +34850,37 @@ var Select = react.forwardRef(
         } else {
           setSearchQuery("");
           setHoveredValue(null);
+          setMenuAlignEnd(false);
+          setMenuPlaceAbove(false);
           onSearchChange?.("");
         }
       },
       [isOpenControlled, onOpenChange, onSearchChange, selectedValues]
     );
+    react.useLayoutEffect(() => {
+      if (reactNative.Platform.OS !== "web" || !isOpen) return;
+      const updateMenuPlacement = () => {
+        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;
+        setMenuAlignEnd(overflowsRight);
+        const spaceBelow = window.innerHeight - viewportPadding - rect.bottom;
+        const spaceAbove = rect.top - viewportPadding;
+        const needsAbove = estimatedMenuHeight + gap > spaceBelow && spaceAbove > spaceBelow;
+        setMenuPlaceAbove(needsAbove);
+      };
+      updateMenuPlacement();
+      window.addEventListener("resize", updateMenuPlacement);
+      window.addEventListener("scroll", updateMenuPlacement, true);
+      return () => {
+        window.removeEventListener("resize", updateMenuPlacement);
+        window.removeEventListener("scroll", updateMenuPlacement, true);
+      };
+    }, [estimatedMenuHeight, isOpen, resolvedMenuWidth]);
     const handleSearchChange = (text) => {
       setSearchQuery(text);
       onSearchChange?.(text);
@@ -34851,69 +35055,80 @@ var Select = react.forwardRef(
                 ]
               }
             ),
-            isOpen ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles27.menu, children: [
-              showSearch ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles27.searchField, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles27.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, { size: ICON_SIZE12, color: colors.grey100 }) }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  reactNative.TextInput,
-                  {
-                    ref: searchInputRef,
-                    value: searchQuery,
-                    onChangeText: handleSearchChange,
-                    editable: !disabled,
-                    placeholder: searchPlaceholder,
-                    placeholderTextColor: colors.grey100,
-                    style: [
-                      styles27.searchInput,
-                      reactNative.Platform.OS === "web" ? styles27.searchInputWeb : null,
-                      reactNative.Platform.OS === "android" ? styles27.searchInputAndroid : null
-                    ],
-                    accessibilityLabel: searchPlaceholder
-                  }
-                )
-              ] }) : null,
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                reactNative.ScrollView,
-                {
-                  style: styles27.optionList,
-                  contentContainerStyle: styles27.optionListContent,
-                  keyboardShouldPersistTaps: "handled",
-                  showsVerticalScrollIndicator: false,
-                  children: [
-                    loading ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles27.statusRow, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles27.statusText, children: "Loading..." }) }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles27.statusRow, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles27.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__ */ jsxRuntime.jsxs(
-                        reactNative.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: [
-                            styles27.item,
+            isOpen ? /* @__PURE__ */ jsxRuntime.jsxs(
+              reactNative.View,
+              {
+                style: [
+                  styles27.menu,
+                  menuAlignEnd ? styles27.menuAlignEnd : styles27.menuAlignStart,
+                  menuPlaceAbove ? styles27.menuAbove : styles27.menuBelow,
+                  menuStyle
+                ],
+                children: [
+                  showSearch ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles27.searchField, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles27.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, { size: ICON_SIZE12, color: colors.grey100 }) }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      reactNative.TextInput,
+                      {
+                        ref: searchInputRef,
+                        value: searchQuery,
+                        onChangeText: handleSearchChange,
+                        editable: !disabled,
+                        placeholder: searchPlaceholder,
+                        placeholderTextColor: colors.grey100,
+                        style: [
+                          styles27.searchInput,
+                          reactNative.Platform.OS === "web" ? styles27.searchInputWeb : null,
+                          reactNative.Platform.OS === "android" ? styles27.searchInputAndroid : null
+                        ],
+                        accessibilityLabel: searchPlaceholder
+                      }
+                    )
+                  ] }) : null,
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    reactNative.ScrollView,
+                    {
+                      style: styles27.optionList,
+                      contentContainerStyle: styles27.optionListContent,
+                      keyboardShouldPersistTaps: "handled",
+                      showsVerticalScrollIndicator: false,
+                      children: [
+                        loading ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles27.statusRow, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles27.statusText, children: "Loading..." }) }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles27.statusRow, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles27.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__ */ jsxRuntime.jsxs(
+                            reactNative.Pressable,
                             {
-                              backgroundColor: itemBackground(visualState)
-                            }
-                          ],
-                          children: [
-                            multiple ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { pointerEvents: "none", style: styles27.itemCheckbox, children: /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { value: isSelected, variant: "light" }) }) : null,
-                            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles27.itemLabel, numberOfLines: 1, children: option.label })
-                          ]
-                        },
-                        option.value
-                      );
-                    })
-                  ]
-                }
-              )
-            ] }) : null
+                              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: [
+                                styles27.item,
+                                {
+                                  backgroundColor: itemBackground(visualState)
+                                }
+                              ],
+                              children: [
+                                multiple ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { pointerEvents: "none", style: styles27.itemCheckbox, children: /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { value: isSelected, variant: "light" }) }) : null,
+                                /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles27.itemLabel, numberOfLines: 1, children: option.label })
+                              ]
+                            },
+                            option.value
+                          );
+                        })
+                      ]
+                    }
+                  )
+                ]
+              }
+            ) : null
           ] }),
           showHint && hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles27.hint, { color: hintColor }], children: hint }) : null
         ]
@@ -35022,10 +35237,7 @@ var styles27 = reactNative.StyleSheet.create({
   },
   menu: {
     position: "absolute",
-    top: "100%",
-    left: 0,
-    right: 0,
-    marginTop: 8,
+    minWidth: "100%",
     zIndex: 10,
     borderRadius: MENU_RADIUS3,
     padding: 12,
@@ -35040,6 +35252,26 @@ var styles27 = reactNative.StyleSheet.create({
       }
     })
   },
+  menuAlignStart: {
+    left: 0,
+    right: "auto"
+  },
+  menuAlignEnd: {
+    left: "auto",
+    right: 0
+  },
+  menuBelow: {
+    top: "100%",
+    bottom: "auto",
+    marginTop: 8,
+    marginBottom: 0
+  },
+  menuAbove: {
+    top: "auto",
+    bottom: "100%",
+    marginTop: 0,
+    marginBottom: 8
+  },
   optionList: {
     maxHeight: MENU_MAX_LIST_HEIGHT
   },
@@ -35175,25 +35407,35 @@ var Textarea = react.forwardRef(function Textarea2({
   const setInputRef = react.useMemo(() => mergeRefs(inputRef, forwardedRef), [forwardedRef]);
   const [focused, setFocused] = react.useState(false);
   const [uncontrolledValue, setUncontrolledValue] = react.useState(defaultValue ?? "");
+  const reactId = react.useId();
+  const inputDomId = `eh-textarea-${reactId.replace(/:/g, "")}`;
   const isControlled = typeof value === "string";
   const currentValue = isControlled ? value : uncontrolledValue;
   const hasValue = currentValue.length > 0;
   const visualState = resolveVisualState2({ disabled, error, focused, hasValue });
   const chrome = chromeFor2(visualState);
   const resolvedAccessibilityLabel = accessibilityLabel ?? (showLabel ? void 0 : label);
+  const focusInput = () => {
+    if (disabled) return;
+    inputRef.current?.focus();
+  };
   useApplyWebClassName(rootRef, className);
   useApplyWebClassName(inputRef, inputClassName);
   return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ref: rootRef, style: [styles28.root, disabled && styles28.disabled, style], children: [
-    showLabel && label ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles28.label, { color: chrome.labelColor }], children: label }) : null,
+    showLabel && label ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Pressable, { disabled, onPress: focusInput, style: styles28.labelPressable, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles28.label, { color: chrome.labelColor }], children: label }) }) : null,
     /* @__PURE__ */ jsxRuntime.jsx(
-      reactNative.View,
+      reactNative.Pressable,
       {
+        accessibilityRole: "none",
+        disabled,
+        onPress: focusInput,
         style: [
           styles28.field,
           {
             borderColor: chrome.borderColor,
             backgroundColor: chrome.backgroundColor
           },
+          reactNative.Platform.OS === "web" ? styles28.fieldWeb : null,
           fieldStyle
         ],
         children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -35201,6 +35443,7 @@ var Textarea = react.forwardRef(function Textarea2({
           {
             ref: setInputRef,
             ...textInputProps,
+            nativeID: inputDomId,
             multiline: true,
             textAlignVertical: "top",
             value: isControlled ? value : void 0,
@@ -35246,6 +35489,9 @@ var styles28 = reactNative.StyleSheet.create({
   disabled: {
     opacity: 0.6
   },
+  labelPressable: {
+    alignSelf: "flex-start"
+  },
   label: {
     ...textareaTypography.label
   },
@@ -35258,14 +35504,21 @@ var styles28 = reactNative.StyleSheet.create({
     paddingLeft: FIELD_PADDING_HORIZONTAL,
     paddingRight: FIELD_PADDING_HORIZONTAL
   },
+  fieldWeb: {
+    cursor: "text"
+  },
   input: {
     flex: 1,
+    alignSelf: "stretch",
     paddingVertical: 0,
     margin: 0
   },
   inputWeb: {
     outlineStyle: "none",
-    resize: "none"
+    resize: "none",
+    height: "100%",
+    minWidth: 0,
+    cursor: "text"
   },
   inputAndroid: {
     includeFontPadding: false