@ecohouse/ui 0.1.34 → 0.1.35

package/dist/index.js

@@ -1,4 +1,4 @@
-import { forwardRef, useRef, useMemo, useState, useCallback, useEffect, useLayoutEffect, useImperativeHandle, isValidElement, cloneElement } from 'react';
+import { forwardRef, useRef, useMemo, useState, useCallback, useEffect, useLayoutEffect, useId, useImperativeHandle, isValidElement, cloneElement } from 'react';
 import { View, Text, Platform, Pressable, StyleSheet, Image, useWindowDimensions, Animated, Easing, TouchableOpacity, Modal as Modal$1, TextInput, ScrollView, PanResponder } from 'react-native';
 import Svg20, { Path } from 'react-native-svg';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
@@ -7397,7 +7397,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;
@@ -8552,7 +8552,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;
@@ -16977,7 +16977,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;
@@ -17380,7 +17380,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;
@@ -22854,7 +22854,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);
@@ -23126,7 +23126,7 @@ var require_react_dom_development = __commonJS({
             case SimpleMemoComponent:
             case FunctionComponent:
             case ForwardRef:
-            case Fragment3:
+            case Fragment4:
             case Mode:
             case Profiler:
             case ContextConsumer:
@@ -27378,7 +27378,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;
         }
@@ -28613,8 +28613,8 @@ var languageSwitcherTypography = {
   fontFamily: fonts.sans,
   fontSize: 14,
   fontWeight: "600",
-  lineHeight: 19,
-  letterSpacing: 0
+  lineHeight: 14,
+  letterSpacing: 0.42
 };
 var counterTypography = {
   fontFamily: fonts.sans,
@@ -29409,9 +29409,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__ */ jsx(Svg20, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ 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__ */ jsx(Svg20, { width: size, height: size, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx(
     Path,
     {
       d: GLOBE_PATH,
@@ -29479,7 +29479,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__ */ jsx(Svg20, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx(
     Path,
@@ -31032,6 +31032,7 @@ var AccountHeader = forwardRef(
     onBackPress,
     onMenuPress,
     onNotificationsPress,
+    languageSlot,
     badge,
     backAccessibilityLabel = "Back",
     menuAccessibilityLabel = "Open menu",
@@ -31111,16 +31112,19 @@ var AccountHeader = forwardRef(
               ]
             }
           ),
-          /* @__PURE__ */ jsx(View, { style: styles6.end, children: /* @__PURE__ */ jsx(
-            Pressable,
-            {
-              accessibilityRole: "button",
-              accessibilityLabel: notificationsAccessibilityLabel,
-              onPress: onNotificationsPress,
-              style: styles6.iconButton,
-              children: /* @__PURE__ */ jsx(BellIcon, { color: colors.white, size: ICON_BUTTON_ICON_SIZE, strokeWidth: 1.5 })
-            }
-          ) })
+          /* @__PURE__ */ jsxs(View, { style: styles6.end, children: [
+            languageSlot != null ? /* @__PURE__ */ jsx(View, { style: styles6.languageSlot, children: languageSlot }) : null,
+            /* @__PURE__ */ jsx(
+              Pressable,
+              {
+                accessibilityRole: "button",
+                accessibilityLabel: notificationsAccessibilityLabel,
+                onPress: onNotificationsPress,
+                style: styles6.iconButton,
+                children: /* @__PURE__ */ jsx(BellIcon, { color: colors.white, size: ICON_BUTTON_ICON_SIZE, strokeWidth: 1.5 })
+              }
+            )
+          ] })
         ]
       }
     );
@@ -31140,7 +31144,9 @@ var styles6 = StyleSheet.create({
     paddingLeft: 24,
     backgroundColor: colors.dark,
     borderBottomWidth: 1,
-    borderBottomColor: colors.grey700
+    borderBottomColor: colors.grey700,
+    zIndex: 40,
+    position: "relative"
   },
   start: {
     flex: 1,
@@ -31163,7 +31169,17 @@ var styles6 = 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,
@@ -31778,10 +31794,14 @@ var AccordionItem = forwardRef(
     });
     const bodyTextStyle = [styles13.body, { fontSize: bodyFontSize, lineHeight: bodyLineHeight }];
     return /* @__PURE__ */ jsxs(
-      View,
+      Pressable,
       {
         ...rest,
         ref: setContainerRef,
+        accessibilityRole: "button",
+        accessibilityState: { expanded: open },
+        accessibilityLabel: accessibilityLabel ?? title,
+        onPress: toggle,
         style: [
           styles13.root,
           {
@@ -31789,30 +31809,21 @@ var AccordionItem = forwardRef(
             paddingRight: paddingX,
             paddingLeft: paddingX
           },
+          Platform.OS === "web" ? styles13.rootWeb : null,
           style
         ],
         children: [
-          /* @__PURE__ */ jsxs(
-            Pressable,
-            {
-              accessibilityRole: "button",
-              accessibilityState: { expanded: open },
-              accessibilityLabel: accessibilityLabel ?? title,
-              onPress: toggle,
-              style: styles13.header,
-              children: [
-                /* @__PURE__ */ jsx(Text, { style: styles13.title, children: title }),
-                /* @__PURE__ */ jsx(Animated.View, { style: [styles13.chevron, { transform: [{ rotate: chevronRotate }] }], children: /* @__PURE__ */ jsx(
-                  ChevronDownIcon,
-                  {
-                    size: CHEVRON_SIZE2,
-                    color: open ? colors.primary : colors.grey400,
-                    strokeWidth: 2
-                  }
-                ) })
-              ]
-            }
-          ),
+          /* @__PURE__ */ jsxs(View, { style: styles13.header, children: [
+            /* @__PURE__ */ jsx(Text, { style: styles13.title, children: title }),
+            /* @__PURE__ */ jsx(Animated.View, { style: [styles13.chevron, { transform: [{ rotate: chevronRotate }] }], children: /* @__PURE__ */ jsx(
+              ChevronDownIcon,
+              {
+                size: CHEVRON_SIZE2,
+                color: open ? colors.primary : colors.grey400,
+                strokeWidth: 2
+              }
+            ) })
+          ] }),
           /* @__PURE__ */ jsx(
             View,
             {
@@ -31822,7 +31833,7 @@ var AccordionItem = forwardRef(
               children: /* @__PURE__ */ jsx(Text, { style: bodyTextStyle, children })
             }
           ),
-          /* @__PURE__ */ jsx(Animated.View, { style: [styles13.bodyClip, { height: bodyHeight }], children: /* @__PURE__ */ jsx(View, { style: styles13.bodyInner, children: /* @__PURE__ */ jsx(Text, { style: bodyTextStyle, children }) }) })
+          /* @__PURE__ */ jsx(Animated.View, { style: [styles13.bodyClip, { height: bodyHeight }], pointerEvents: "none", children: /* @__PURE__ */ jsx(View, { style: styles13.bodyInner, children: /* @__PURE__ */ jsx(Text, { style: bodyTextStyle, children }) }) })
         ]
       }
     );
@@ -31837,6 +31848,9 @@ var styles13 = StyleSheet.create({
     opacity: 1,
     overflow: "hidden"
   },
+  rootWeb: {
+    cursor: "pointer"
+  },
   header: {
     flexDirection: "row",
     alignItems: "center",
@@ -32602,6 +32616,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 = forwardRef(
   function LanguageSwitcher2({
     options = defaultLanguageOptions,
@@ -32612,6 +32632,7 @@ var LanguageSwitcher = forwardRef(
     defaultOpen = false,
     onOpenChange,
     disabled = false,
+    variant = "default",
     accessibilityLabel = "Language",
     style,
     className,
@@ -32631,6 +32652,7 @@ var LanguageSwitcher = 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 = useCallback(
       (next) => {
@@ -32681,7 +32703,14 @@ var LanguageSwitcher = 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__ */ jsxs(
             Pressable,
@@ -32696,36 +32725,55 @@ var LanguageSwitcher = 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__ */ jsx(GlobeIcon, { size: ICON_SIZE8, color: colors.white, strokeWidth: 2 }),
-                /* @__PURE__ */ jsx(Text, { style: styles18.triggerLabel, numberOfLines: 1, children: selectedOption?.label ?? "" }),
-                /* @__PURE__ */ jsx(View, { style: [styles18.chevron, isOpen && styles18.chevronOpen], children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: ICON_SIZE8, color: colors.white, strokeWidth: 2 }) })
+                /* @__PURE__ */ jsx(GlobeIcon, { size: ICON_SIZE8, color: colors.white, strokeWidth: isIconVariant ? 1.5 : 2 }),
+                !isIconVariant ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(Text, { style: styles18.triggerLabel, numberOfLines: 1, children: selectedOption?.label ?? "" }),
+                  /* @__PURE__ */ jsx(View, { style: [styles18.chevron, isOpen && styles18.chevronOpen], children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: ICON_SIZE8, color: colors.white, strokeWidth: 2 }) })
+                ] }) : null
               ]
             }
           ),
-          isOpen && options.length > 0 ? /* @__PURE__ */ jsx(View, { style: styles18.menu, accessibilityRole: "menu", children: options.map((option) => {
-            const selected = option.value === selectedValue;
-            return /* @__PURE__ */ jsx(
-              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__ */ jsx(Text, { style: [styles18.itemLabel, selected && styles18.itemLabelSelected], children: option.label })
-              },
-              option.value
-            );
-          }) }) : null
+          isOpen && options.length > 0 ? /* @__PURE__ */ jsx(
+            View,
+            {
+              style: [styles18.menu, isIconVariant ? styles18.menuIcon : styles18.menuDefault],
+              accessibilityRole: "menu",
+              children: options.map((option) => {
+                const selected = option.value === selectedValue;
+                return /* @__PURE__ */ jsx(
+                  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__ */ jsx(
+                      Text,
+                      {
+                        style: [
+                          styles18.itemLabel,
+                          selected && (isIconVariant ? styles18.itemLabelSelectedIcon : styles18.itemLabelSelected)
+                        ],
+                        children: option.label
+                      }
+                    )
+                  },
+                  option.value
+                );
+              })
+            }
+          ) : null
         ]
       }
     );
@@ -32734,11 +32782,19 @@ var LanguageSwitcher = forwardRef(
 var styles18 = 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
@@ -32753,6 +32809,17 @@ var styles18 = 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
   },
@@ -32775,22 +32842,42 @@ var styles18 = 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
@@ -32798,6 +32885,9 @@ var styles18 = StyleSheet.create({
   itemSelected: {
     backgroundColor: colors.whiteAlpha6
   },
+  itemSelectedIcon: {
+    backgroundColor: ACTIVE_ITEM_BACKGROUND
+  },
   itemLabel: {
     ...languageSwitcherTypography,
     ...Platform.select({ web: { fontFamily: `${fonts.sans}, sans-serif` } }),
@@ -32805,6 +32895,9 @@ var styles18 = StyleSheet.create({
   },
   itemLabelSelected: {
     color: colors.primary
+  },
+  itemLabelSelectedIcon: {
+    color: colors.primary
   }
 });
 var ICON_SIZE9 = 25.63181;
@@ -33225,14 +33318,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,
@@ -33516,7 +33617,7 @@ var DatePicker = forwardRef(
                   )
                 ] }),
                 /* @__PURE__ */ jsxs(View, { children: [
-                  /* @__PURE__ */ jsx(View, { style: styles22.weekdayRow, children: weekdayLabels.map((weekdayLabel, index) => /* @__PURE__ */ jsx(View, { style: styles22.dayCellWrap, children: /* @__PURE__ */ jsx(Text, { style: styles22.weekdayText, children: weekdayLabel }) }, `${weekdayLabel}-${index}`)) }),
+                  /* @__PURE__ */ jsx(View, { style: styles22.weekdayRow, children: weekdayLabels.map((weekdayLabel, index) => /* @__PURE__ */ jsx(View, { style: styles22.weekdayCell, children: /* @__PURE__ */ jsx(Text, { style: styles22.weekdayText, children: weekdayLabel }) }, `${weekdayLabel}-${index}`)) }),
                   weeks.map((week, weekIndex) => {
                     let rangeHighlightStyle = null;
                     if (isRange && rangeValue.start && rangeValue.end) {
@@ -33740,10 +33841,11 @@ var styles22 = StyleSheet.create({
     marginTop: 8,
     zIndex: 10,
     borderRadius: MENU_RADIUS2,
-    padding: 12,
+    padding: MENU_PADDING,
     gap: 0,
     opacity: 1,
     backgroundColor: colors.grey700,
+    overflow: "hidden",
     ...Platform.select({
       web: {
         boxShadow: `0 8px 24px ${colors.black}73`
@@ -33772,14 +33874,17 @@ var styles22 = 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"
   },
@@ -33792,7 +33897,21 @@ var styles22 = 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,
@@ -33801,29 +33920,36 @@ var styles22 = 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"
   },
@@ -34134,6 +34260,8 @@ var Input = forwardRef(function Input2({
   const [focused, setFocused] = useState(false);
   const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? "");
   const metrics = sizeConfig2[size];
+  const reactId = useId();
+  const inputDomId = `eh-input-${reactId.replace(/:/g, "")}`;
   const isControlled = typeof value === "string";
   const currentValue = isControlled ? value : uncontrolledValue;
   const hasValue = currentValue.length > 0;
@@ -34150,28 +34278,37 @@ var Input = 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
+    },
+    Platform.OS === "web" ? styles25.fieldWeb : null,
+    fieldStyle
+  ];
   return /* @__PURE__ */ jsxs(View, { ref: rootRef, style: [styles25.root, disabled && styles25.disabled, style], children: [
-    showLabel && label ? /* @__PURE__ */ jsx(Text, { style: [styles25.label, { color: chrome.labelColor }], children: label }) : null,
+    showLabel && label ? /* @__PURE__ */ jsx(Pressable, { disabled, onPress: focusInput, style: styles25.labelPressable, children: /* @__PURE__ */ jsx(Text, { style: [styles25.label, { color: chrome.labelColor }], children: label }) }) : null,
     /* @__PURE__ */ jsxs(
-      View,
+      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__ */ jsx(View, { style: [styles25.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }], children: leftIconNode }) : null,
           /* @__PURE__ */ jsx(
@@ -34179,6 +34316,7 @@ var Input = forwardRef(function Input2({
             {
               ref: setInputRef,
               ...textInputProps,
+              nativeID: inputDomId,
               value: isControlled ? value : void 0,
               defaultValue: isControlled ? void 0 : defaultValue,
               editable: !disabled,
@@ -34219,7 +34357,16 @@ var Input = forwardRef(function Input2({
               hitSlop: 8,
               children: rightIconNode
             }
-          ) : /* @__PURE__ */ jsx(View, { style: [styles25.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }], children: rightIconNode }) : null
+          ) : /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              accessibilityRole: "none",
+              disabled,
+              onPress: focusInput,
+              style: [styles25.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }],
+              children: rightIconNode
+            }
+          ) : null
         ]
       }
     ),
@@ -34235,6 +34382,9 @@ var styles25 = StyleSheet.create({
   disabled: {
     opacity: 0.6
   },
+  labelPressable: {
+    alignSelf: "flex-start"
+  },
   label: {
     ...inputTypography.label
   },
@@ -34243,13 +34393,21 @@ var styles25 = 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
@@ -34612,6 +34770,7 @@ var Select = forwardRef(
       emptyText = "No results",
       valueColor,
       style,
+      menuStyle,
       className,
       accessibilityLabel,
       // Pulled out only to keep them off `rest` (which is spread onto the root View);
@@ -34639,6 +34798,8 @@ var Select = forwardRef(
     const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
     const [searchQuery, setSearchQuery] = useState("");
     const [hoveredValue, setHoveredValue] = useState(null);
+    const [menuAlignEnd, setMenuAlignEnd] = useState(false);
+    const [menuPlaceAbove, setMenuPlaceAbove] = useState(false);
     const selectedValues = useMemo(() => {
       const current = isValueControlled ? valueProp : multiple ? uncontrolledMultiple : uncontrolledSingle;
       return toArray(current);
@@ -34657,6 +34818,23 @@ var Select = forwardRef(
       return options.filter((option) => option.label.toLowerCase().includes(query));
     }, [isExternalSearch, options, searchQuery]);
     useApplyWebClassName(rootRef, className);
+    const resolvedMenuWidth = useMemo(() => {
+      const flat = 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 = 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 = useCallback(
       (next) => {
         if (!isOpenControlled) setUncontrolledOpen(next);
@@ -34666,11 +34844,37 @@ var Select = forwardRef(
         } else {
           setSearchQuery("");
           setHoveredValue(null);
+          setMenuAlignEnd(false);
+          setMenuPlaceAbove(false);
           onSearchChange?.("");
         }
       },
       [isOpenControlled, onOpenChange, onSearchChange, selectedValues]
     );
+    useLayoutEffect(() => {
+      if (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);
@@ -34845,69 +35049,80 @@ var Select = forwardRef(
                 ]
               }
             ),
-            isOpen ? /* @__PURE__ */ jsxs(View, { style: styles27.menu, children: [
-              showSearch ? /* @__PURE__ */ jsxs(View, { style: styles27.searchField, children: [
-                /* @__PURE__ */ jsx(View, { style: styles27.iconSlot, children: /* @__PURE__ */ jsx(SearchIcon, { size: ICON_SIZE12, color: colors.grey100 }) }),
-                /* @__PURE__ */ jsx(
-                  TextInput,
-                  {
-                    ref: searchInputRef,
-                    value: searchQuery,
-                    onChangeText: handleSearchChange,
-                    editable: !disabled,
-                    placeholder: searchPlaceholder,
-                    placeholderTextColor: colors.grey100,
-                    style: [
-                      styles27.searchInput,
-                      Platform.OS === "web" ? styles27.searchInputWeb : null,
-                      Platform.OS === "android" ? styles27.searchInputAndroid : null
-                    ],
-                    accessibilityLabel: searchPlaceholder
-                  }
-                )
-              ] }) : null,
-              /* @__PURE__ */ jsxs(
-                ScrollView,
-                {
-                  style: styles27.optionList,
-                  contentContainerStyle: styles27.optionListContent,
-                  keyboardShouldPersistTaps: "handled",
-                  showsVerticalScrollIndicator: false,
-                  children: [
-                    loading ? /* @__PURE__ */ jsx(View, { style: styles27.statusRow, children: /* @__PURE__ */ jsx(Text, { style: styles27.statusText, children: "Loading..." }) }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsx(View, { style: styles27.statusRow, children: /* @__PURE__ */ jsx(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__ */ 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: [
-                            styles27.item,
+            isOpen ? /* @__PURE__ */ jsxs(
+              View,
+              {
+                style: [
+                  styles27.menu,
+                  menuAlignEnd ? styles27.menuAlignEnd : styles27.menuAlignStart,
+                  menuPlaceAbove ? styles27.menuAbove : styles27.menuBelow,
+                  menuStyle
+                ],
+                children: [
+                  showSearch ? /* @__PURE__ */ jsxs(View, { style: styles27.searchField, children: [
+                    /* @__PURE__ */ jsx(View, { style: styles27.iconSlot, children: /* @__PURE__ */ jsx(SearchIcon, { size: ICON_SIZE12, color: colors.grey100 }) }),
+                    /* @__PURE__ */ jsx(
+                      TextInput,
+                      {
+                        ref: searchInputRef,
+                        value: searchQuery,
+                        onChangeText: handleSearchChange,
+                        editable: !disabled,
+                        placeholder: searchPlaceholder,
+                        placeholderTextColor: colors.grey100,
+                        style: [
+                          styles27.searchInput,
+                          Platform.OS === "web" ? styles27.searchInputWeb : null,
+                          Platform.OS === "android" ? styles27.searchInputAndroid : null
+                        ],
+                        accessibilityLabel: searchPlaceholder
+                      }
+                    )
+                  ] }) : null,
+                  /* @__PURE__ */ jsxs(
+                    ScrollView,
+                    {
+                      style: styles27.optionList,
+                      contentContainerStyle: styles27.optionListContent,
+                      keyboardShouldPersistTaps: "handled",
+                      showsVerticalScrollIndicator: false,
+                      children: [
+                        loading ? /* @__PURE__ */ jsx(View, { style: styles27.statusRow, children: /* @__PURE__ */ jsx(Text, { style: styles27.statusText, children: "Loading..." }) }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsx(View, { style: styles27.statusRow, children: /* @__PURE__ */ jsx(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__ */ jsxs(
+                            Pressable,
                             {
-                              backgroundColor: itemBackground(visualState)
-                            }
-                          ],
-                          children: [
-                            multiple ? /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: styles27.itemCheckbox, children: /* @__PURE__ */ jsx(Checkbox, { value: isSelected, variant: "light" }) }) : null,
-                            /* @__PURE__ */ jsx(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__ */ jsx(View, { pointerEvents: "none", style: styles27.itemCheckbox, children: /* @__PURE__ */ jsx(Checkbox, { value: isSelected, variant: "light" }) }) : null,
+                                /* @__PURE__ */ jsx(Text, { style: styles27.itemLabel, numberOfLines: 1, children: option.label })
+                              ]
+                            },
+                            option.value
+                          );
+                        })
+                      ]
+                    }
+                  )
+                ]
+              }
+            ) : null
           ] }),
           showHint && hint ? /* @__PURE__ */ jsx(Text, { style: [styles27.hint, { color: hintColor }], children: hint }) : null
         ]
@@ -35016,10 +35231,7 @@ var styles27 = StyleSheet.create({
   },
   menu: {
     position: "absolute",
-    top: "100%",
-    left: 0,
-    right: 0,
-    marginTop: 8,
+    minWidth: "100%",
     zIndex: 10,
     borderRadius: MENU_RADIUS3,
     padding: 12,
@@ -35034,6 +35246,26 @@ var styles27 = 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
   },
@@ -35169,25 +35401,35 @@ var Textarea = forwardRef(function Textarea2({
   const setInputRef = useMemo(() => mergeRefs(inputRef, forwardedRef), [forwardedRef]);
   const [focused, setFocused] = useState(false);
   const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? "");
+  const reactId = 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__ */ jsxs(View, { ref: rootRef, style: [styles28.root, disabled && styles28.disabled, style], children: [
-    showLabel && label ? /* @__PURE__ */ jsx(Text, { style: [styles28.label, { color: chrome.labelColor }], children: label }) : null,
+    showLabel && label ? /* @__PURE__ */ jsx(Pressable, { disabled, onPress: focusInput, style: styles28.labelPressable, children: /* @__PURE__ */ jsx(Text, { style: [styles28.label, { color: chrome.labelColor }], children: label }) }) : null,
     /* @__PURE__ */ jsx(
-      View,
+      Pressable,
       {
+        accessibilityRole: "none",
+        disabled,
+        onPress: focusInput,
         style: [
           styles28.field,
           {
             borderColor: chrome.borderColor,
             backgroundColor: chrome.backgroundColor
           },
+          Platform.OS === "web" ? styles28.fieldWeb : null,
           fieldStyle
         ],
         children: /* @__PURE__ */ jsx(
@@ -35195,6 +35437,7 @@ var Textarea = forwardRef(function Textarea2({
           {
             ref: setInputRef,
             ...textInputProps,
+            nativeID: inputDomId,
             multiline: true,
             textAlignVertical: "top",
             value: isControlled ? value : void 0,
@@ -35240,6 +35483,9 @@ var styles28 = StyleSheet.create({
   disabled: {
     opacity: 0.6
   },
+  labelPressable: {
+    alignSelf: "flex-start"
+  },
   label: {
     ...textareaTypography.label
   },
@@ -35252,14 +35498,21 @@ var styles28 = 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