@ecohouse/ui 0.1.34 → 0.1.36

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;
@@ -9449,15 +9449,15 @@ var require_react_dom_development = __commonJS({
           };
         }
         var warnValidStyle$1 = warnValidStyle;
-        function createDangerousStringForStyles(styles34) {
+        function createDangerousStringForStyles(styles36) {
           {
             var serialized = "";
             var delimiter = "";
-            for (var styleName in styles34) {
-              if (!styles34.hasOwnProperty(styleName)) {
+            for (var styleName in styles36) {
+              if (!styles36.hasOwnProperty(styleName)) {
                 continue;
               }
-              var styleValue = styles34[styleName];
+              var styleValue = styles36[styleName];
               if (styleValue != null) {
                 var isCustomProperty = styleName.indexOf("--") === 0;
                 serialized += delimiter + (isCustomProperty ? styleName : hyphenateStyleName(styleName)) + ":";
@@ -9468,19 +9468,19 @@ var require_react_dom_development = __commonJS({
             return serialized || null;
           }
         }
-        function setValueForStyles(node, styles34) {
+        function setValueForStyles(node, styles36) {
           var style2 = node.style;
-          for (var styleName in styles34) {
-            if (!styles34.hasOwnProperty(styleName)) {
+          for (var styleName in styles36) {
+            if (!styles36.hasOwnProperty(styleName)) {
               continue;
             }
             var isCustomProperty = styleName.indexOf("--") === 0;
             {
               if (!isCustomProperty) {
-                warnValidStyle$1(styleName, styles34[styleName]);
+                warnValidStyle$1(styleName, styles36[styleName]);
               }
             }
-            var styleValue = dangerousStyleValue(styleName, styles34[styleName], isCustomProperty);
+            var styleValue = dangerousStyleValue(styleName, styles36[styleName], isCustomProperty);
             if (styleName === "float") {
               styleName = "cssFloat";
             }
@@ -9494,9 +9494,9 @@ var require_react_dom_development = __commonJS({
         function isValueEmpty(value) {
           return value == null || typeof value === "boolean" || value === "";
         }
-        function expandShorthandMap(styles34) {
+        function expandShorthandMap(styles36) {
           var expanded = {};
-          for (var key in styles34) {
+          for (var key in styles36) {
             var longhands = shorthandToLonghand[key] || [key];
             for (var i = 0; i < longhands.length; i++) {
               expanded[longhands[i]] = key;
@@ -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,
@@ -29693,6 +29693,26 @@ function MinusIcon({ size = 16, color = colors.white, strokeWidth = 2 }) {
   ) });
 }
 
+// src/icons/MoreHorizontal/moreHorizontalPath.ts
+var MORE_HORIZONTAL_PATH = "M6.33333 2.33333C6.70152 2.33333 7 2.03486 7 1.66667C7 1.29848 6.70152 1 6.33333 1C5.96514 1 5.66667 1.29848 5.66667 1.66667C5.66667 2.03486 5.96514 2.33333 6.33333 2.33333ZM11 2.33333C11.3682 2.33333 11.6667 2.03486 11.6667 1.66667C11.6667 1.29848 11.3682 1 11 1C10.6318 1 10.3333 1.29848 10.3333 1.66667C10.3333 2.03486 10.6318 2.33333 11 2.33333ZM1.66667 2.33333C2.03486 2.33333 2.33333 2.03486 2.33333 1.66667C2.33333 1.29848 2.03486 1 1.66667 1C1.29848 1 1 1.29848 1 1.66667C1 2.03486 1.29848 2.33333 1.66667 2.33333Z";
+var ASPECT_RATIO = 4 / 13;
+function MoreHorizontalIcon({
+  size = 13,
+  color = colors.white,
+  strokeWidth = 2
+}) {
+  return /* @__PURE__ */ jsx(Svg20, { width: size, height: size * ASPECT_RATIO, viewBox: "0 0 13 4", fill: "none", children: /* @__PURE__ */ jsx(
+    Path,
+    {
+      d: MORE_HORIZONTAL_PATH,
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+
 // src/icons/Navigate/navigatePath.ts
 var NAVIGATE_PATH = "M5.691 14.2339C11.5836 17.7694 16.2976 13.0554 15.7084 4.21658C6.86968 3.62732 2.15584 8.34151 5.691 14.2339ZM5.691 14.2339C5.69093 14.2338 5.69107 14.234 5.691 14.2339ZM5.691 14.2339L4.16675 15.7576M5.691 14.2339L8.88079 11.0436";
 function NavigateIcon({ size = 20, color = colors.primary, strokeWidth = 2 }) {
@@ -29918,6 +29938,21 @@ function StarFilledIcon({
   ) });
 }
 
+// src/icons/TableView/tableViewPath.ts
+var TABLE_VIEW_PATH = "M1 6L16 6M6 1L6 16M5 1H12C13.4001 1 14.1002 1 14.635 1.27248C15.1054 1.51217 15.4878 1.89462 15.7275 2.36502C16 2.8998 16 3.59987 16 5V12C16 13.4001 16 14.1002 15.7275 14.635C15.4878 15.1054 15.1054 15.4878 14.635 15.7275C14.1002 16 13.4001 16 12 16H5C3.59987 16 2.8998 16 2.36502 15.7275C1.89462 15.4878 1.51217 15.1054 1.27248 14.635C1 14.1002 1 13.4001 1 12V5C1 3.59987 1 2.8998 1.27248 2.36502C1.51217 1.89462 1.89462 1.51217 2.36502 1.27248C2.8998 1 3.59987 1 5 1Z";
+function TableViewIcon({ size = 17, color = colors.grey400, strokeWidth = 2 }) {
+  return /* @__PURE__ */ jsx(Svg20, { width: size, height: size, viewBox: "0 0 17 17", fill: "none", children: /* @__PURE__ */ jsx(
+    Path,
+    {
+      d: TABLE_VIEW_PATH,
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+
 // src/icons/User/userPath.ts
 var USER_PATH = "M15.8334 17.5C15.8334 14.2783 13.2217 11.6667 10 11.6667C6.77836 11.6667 4.16669 14.2783 4.16669 17.5M10 9.16667C8.15907 9.16667 6.66669 7.67428 6.66669 5.83333C6.66669 3.99238 8.15907 2.5 10 2.5C11.841 2.5 13.3334 3.99238 13.3334 5.83333C13.3334 7.67428 11.841 9.16667 10 9.16667Z";
 function UserIcon({ size = 20, color = colors.primary, strokeWidth = 2 }) {
@@ -30043,6 +30078,7 @@ var icons = {
   menu: MenuIcon,
   menuLines: MenuLinesIcon,
   minus: MinusIcon,
+  moreHorizontal: MoreHorizontalIcon,
   navigate: NavigateIcon,
   noSmoking: NoSmokingIcon,
   paw: PawIcon,
@@ -30062,6 +30098,7 @@ var icons = {
   sort: SortIcon,
   star: StarIcon,
   starFilled: StarFilledIcon,
+  tableView: TableViewIcon,
   tooltipArrow: TooltipArrowIcon,
   trash: TrashIcon,
   user: UserIcon,
@@ -30086,7 +30123,8 @@ var iconGroups = {
     "mapView",
     "menu",
     "menuLines",
-    "navigate"
+    "navigate",
+    "tableView"
   ],
   actions: [
     "show",
@@ -30117,6 +30155,7 @@ var iconGroups = {
     "star",
     "starFilled",
     "minus",
+    "moreHorizontal",
     "plus",
     "refresh",
     "refundStatus",
@@ -30514,7 +30553,87 @@ var styles2 = StyleSheet.create({
     flex: 1
   }
 });
-var ICON_SIZE2 = 16;
+var ICON_SLOT_SIZE = 41;
+var ICON_SIZE2 = 20;
+var InfoCardV2 = forwardRef(
+  function InfoCardV22({
+    label,
+    value,
+    icon: Icon2,
+    iconProps,
+    iconSize = ICON_SIZE2,
+    style,
+    className,
+    accessibilityLabel,
+    ...rest
+  }, forwardedRef) {
+    const containerRef = useRef(null);
+    const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
+    useApplyWebClassName(containerRef, className?.trim() || void 0);
+    return /* @__PURE__ */ jsxs(
+      View,
+      {
+        ...rest,
+        ref: setContainerRef,
+        accessibilityRole: "text",
+        accessibilityLabel: accessibilityLabel ?? `${label}. ${value}`,
+        style: [styles3.root, style],
+        children: [
+          /* @__PURE__ */ jsx(View, { style: styles3.iconSlot, children: /* @__PURE__ */ jsx(Icon2, { ...iconProps, size: iconSize, color: iconProps?.color ?? colors.primary }) }),
+          /* @__PURE__ */ jsxs(View, { style: styles3.content, children: [
+            /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles3.label, children: label }),
+            /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles3.value, children: value })
+          ] })
+        ]
+      }
+    );
+  }
+);
+var styles3 = StyleSheet.create({
+  root: {
+    minHeight: 65,
+    padding: 12,
+    flexDirection: "row",
+    alignItems: "center",
+    flexGrow: 1,
+    flexShrink: 0,
+    flexBasis: 0,
+    gap: 16,
+    borderRadius: 16,
+    backgroundColor: colors.grey700
+  },
+  iconSlot: {
+    width: ICON_SLOT_SIZE,
+    height: ICON_SLOT_SIZE,
+    borderRadius: 10,
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+    backgroundColor: colors.grey600
+  },
+  content: {
+    minWidth: 0,
+    flexShrink: 1,
+    gap: 6
+  },
+  label: {
+    fontFamily: fonts.sans,
+    fontSize: 14,
+    fontWeight: "500",
+    lineHeight: 16,
+    letterSpacing: 0,
+    color: colors.lightGrey
+  },
+  value: {
+    fontFamily: fonts.sans,
+    fontSize: 16,
+    fontWeight: "700",
+    lineHeight: 19,
+    letterSpacing: 0,
+    color: colors.white
+  }
+});
+var ICON_SIZE3 = 16;
 var BACKGROUND_COLOR = "#09090966";
 var webBlurStyle = Platform.OS === "web" ? {
   backdropFilter: "blur(10px)",
@@ -30555,10 +30674,10 @@ var FavoritesButton = forwardRef(
         hitSlop,
         onPress: handlePress,
         style: ({ pressed }) => [
-          styles3.button,
+          styles4.button,
           webBlurStyle,
-          pressed && styles3.pressed,
-          disabled && styles3.disabled,
+          pressed && styles4.pressed,
+          disabled && styles4.disabled,
           style
         ],
         children: /* @__PURE__ */ jsx(
@@ -30566,7 +30685,7 @@ var FavoritesButton = forwardRef(
           {
             color: isActive ? colors.red : colors.white,
             fillOpacity: isActive ? 1 : 0,
-            size: ICON_SIZE2,
+            size: ICON_SIZE3,
             strokeWidth: 2
           }
         )
@@ -30574,7 +30693,7 @@ var FavoritesButton = forwardRef(
     );
   }
 );
-var styles3 = StyleSheet.create({
+var styles4 = StyleSheet.create({
   button: {
     padding: 12,
     gap: 10,
@@ -30593,6 +30712,44 @@ var styles3 = StyleSheet.create({
     opacity: 0.5
   }
 });
+var webBlurStyle2 = Platform.OS === "web" ? {
+  backdropFilter: "blur(10px)",
+  WebkitBackdropFilter: "blur(10px)"
+} : {};
+var IconStatusBadge = forwardRef(
+  function IconStatusBadge2({ label, icon: Icon2, iconProps, iconSize = 16, style, className, ...rest }, forwardedRef) {
+    const badgeRef = useRef(null);
+    const setBadgeRef = useMemo(() => mergeRefs(badgeRef, forwardedRef), [forwardedRef]);
+    useApplyWebClassName(badgeRef, className);
+    return /* @__PURE__ */ jsxs(View, { ...rest, ref: setBadgeRef, style: [styles5.root, webBlurStyle2, style], children: [
+      /* @__PURE__ */ jsx(Icon2, { ...iconProps, size: iconSize }),
+      /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles5.label, children: label })
+    ] });
+  }
+);
+var styles5 = StyleSheet.create({
+  root: {
+    minHeight: 34,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 10,
+    alignSelf: "flex-start",
+    borderRadius: 39,
+    borderWidth: 1,
+    borderColor: colors.whiteAlpha10,
+    backgroundColor: "#09090966"
+  },
+  label: {
+    color: colors.white,
+    fontFamily: fonts.sans,
+    fontSize: 12,
+    fontWeight: "700",
+    lineHeight: 15
+  }
+});
 
 // src/primitives/BrandLogo/brandLogoPaths.ts
 var BRAND_LOGO_PATHS = [
@@ -30752,7 +30909,7 @@ var Avatar = forwardRef(function Avatar2({
   }, [isOpen, closeAndFocusTrigger]);
   const hasImage = Boolean(imageUrl) && !imageFailed;
   const resolvedAccessibilityLabel = accessibilityLabel ?? [name, email].filter(Boolean).join(", ");
-  return /* @__PURE__ */ jsxs(View, { ref: wrapperRef, style: [styles4.wrapper, isOpen && styles4.wrapperOpen], children: [
+  return /* @__PURE__ */ jsxs(View, { ref: wrapperRef, style: [styles6.wrapper, isOpen && styles6.wrapperOpen], children: [
     /* @__PURE__ */ jsxs(
       Pressable,
       {
@@ -30764,25 +30921,25 @@ var Avatar = forwardRef(function Avatar2({
         accessibilityRole: isInteractive ? "button" : void 0,
         accessibilityLabel: resolvedAccessibilityLabel,
         accessibilityState: isInteractive ? { disabled, expanded: hasMenu ? isOpen : void 0 } : void 0,
-        style: [styles4.root, disabled && styles4.disabled, style],
+        style: [styles6.root, disabled && styles6.disabled, style],
         children: [
-          /* @__PURE__ */ jsx(View, { style: styles4.imageWrap, children: hasImage ? /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(View, { style: styles6.imageWrap, children: hasImage ? /* @__PURE__ */ jsx(
             Image,
             {
               source: { uri: imageUrl ?? void 0 },
-              style: styles4.image,
+              style: styles6.image,
               onError: () => setImageFailed(true)
             }
-          ) : /* @__PURE__ */ jsx(View, { style: styles4.imageFallback, children: /* @__PURE__ */ jsx(UserIcon, { size: FALLBACK_ICON_SIZE, color: colors.primary }) }) }),
-          /* @__PURE__ */ jsxs(View, { style: styles4.textColumn, children: [
-            /* @__PURE__ */ jsx(Text, { style: styles4.name, numberOfLines: 1, children: name }),
-            email ? /* @__PURE__ */ jsx(Text, { style: styles4.email, numberOfLines: 1, children: email }) : null
+          ) : /* @__PURE__ */ jsx(View, { style: styles6.imageFallback, children: /* @__PURE__ */ jsx(UserIcon, { size: FALLBACK_ICON_SIZE, color: colors.primary }) }) }),
+          /* @__PURE__ */ jsxs(View, { style: styles6.textColumn, children: [
+            /* @__PURE__ */ jsx(Text, { style: styles6.name, numberOfLines: 1, children: name }),
+            email ? /* @__PURE__ */ jsx(Text, { style: styles6.email, numberOfLines: 1, children: email }) : null
           ] }),
-          showChevron ? /* @__PURE__ */ jsx(View, { style: [styles4.chevronSlot, isOpen && styles4.chevronOpen], children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: CHEVRON_SIZE, color: isOpen ? colors.primary : colors.grey100 }) }) : null
+          showChevron ? /* @__PURE__ */ jsx(View, { style: [styles6.chevronSlot, isOpen && styles6.chevronOpen], children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: CHEVRON_SIZE, color: isOpen ? colors.primary : colors.grey100 }) }) : null
         ]
       }
     ),
-    hasMenu && isOpen ? /* @__PURE__ */ jsx(View, { style: [styles4.menu, menuWidth != null && { right: void 0, width: menuWidth }], children: resolvedMenuItems.map((item) => {
+    hasMenu && isOpen ? /* @__PURE__ */ jsx(View, { style: [styles6.menu, menuWidth != null && { right: void 0, width: menuWidth }], children: resolvedMenuItems.map((item) => {
       const itemKey = item.key ?? item.label;
       return /* @__PURE__ */ jsx(
         MenuItem,
@@ -30799,7 +30956,7 @@ var Avatar = forwardRef(function Avatar2({
     }) }) : null
   ] });
 });
-var styles4 = StyleSheet.create({
+var styles6 = StyleSheet.create({
   wrapper: {
     position: "relative",
     alignSelf: "flex-start"
@@ -30910,23 +31067,23 @@ var AvatarSimple = forwardRef(
       {
         ...rest,
         ref: setContainerRef,
-        style: [styles5.root, compact ? styles5.rootCompact : styles5.rootCard, style],
+        style: [styles7.root, compact ? styles7.rootCompact : styles7.rootCard, style],
         accessibilityRole: "summary",
         accessibilityLabel: `${name}, ${email}`,
         children: [
-          /* @__PURE__ */ jsx(View, { style: styles5.avatar, children: showImage ? /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(View, { style: styles7.avatar, children: showImage ? /* @__PURE__ */ jsx(
             Image,
             {
               source: { uri: imageUrl ?? void 0 },
-              style: styles5.avatarImage,
+              style: styles7.avatarImage,
               onError: () => setImageFailed(true),
               accessibilityIgnoresInvertColors: true
             }
           ) : null }),
-          !compact ? /* @__PURE__ */ jsxs(View, { style: styles5.details, children: [
-            /* @__PURE__ */ jsxs(View, { style: styles5.textBlock, children: [
-              /* @__PURE__ */ jsx(Text, { style: styles5.name, numberOfLines: 1, ellipsizeMode: "tail", children: name }),
-              /* @__PURE__ */ jsx(Text, { style: styles5.email, numberOfLines: 1, ellipsizeMode: "tail", children: email })
+          !compact ? /* @__PURE__ */ jsxs(View, { style: styles7.details, children: [
+            /* @__PURE__ */ jsxs(View, { style: styles7.textBlock, children: [
+              /* @__PURE__ */ jsx(Text, { style: styles7.name, numberOfLines: 1, ellipsizeMode: "tail", children: name }),
+              /* @__PURE__ */ jsx(Text, { style: styles7.email, numberOfLines: 1, ellipsizeMode: "tail", children: email })
             ] }),
             /* @__PURE__ */ jsx(
               Pressable,
@@ -30935,7 +31092,7 @@ var AvatarSimple = forwardRef(
                 accessibilityRole: "button",
                 accessibilityLabel: logOutAccessibilityLabel,
                 hitSlop: 8,
-                style: styles5.logOutButton,
+                style: styles7.logOutButton,
                 children: /* @__PURE__ */ jsx(LogOutIcon, { color: colors.primary, size: LOG_OUT_SIZE, strokeWidth: 2 })
               }
             )
@@ -30945,7 +31102,7 @@ var AvatarSimple = forwardRef(
     );
   }
 );
-var styles5 = StyleSheet.create({
+var styles7 = StyleSheet.create({
   root: {
     flexDirection: "row",
     alignItems: "center",
@@ -31032,6 +31189,7 @@ var AccountHeader = forwardRef(
     onBackPress,
     onMenuPress,
     onNotificationsPress,
+    languageSlot,
     badge,
     backAccessibilityLabel = "Back",
     menuAccessibilityLabel = "Open menu",
@@ -31053,15 +31211,15 @@ var AccountHeader = forwardRef(
         ...webClassName(className),
         ref: setContainerRef,
         accessibilityRole: "header",
-        style: [styles6.base, style],
+        style: [styles8.base, style],
         children: [
           /* @__PURE__ */ jsxs(
             View,
             {
               style: [
-                styles6.start,
-                showBack ? styles6.startWithBack : null,
-                showMenu ? styles6.startWithMenu : null
+                styles8.start,
+                showBack ? styles8.startWithBack : null,
+                showMenu ? styles8.startWithMenu : null
               ],
               children: [
                 showBack ? /* @__PURE__ */ jsx(
@@ -31071,7 +31229,7 @@ var AccountHeader = forwardRef(
                     accessibilityLabel: backAccessibilityLabel,
                     hitSlop: 8,
                     onPress: onBackPress,
-                    style: styles6.iconButton,
+                    style: styles8.iconButton,
                     children: /* @__PURE__ */ jsx(
                       ChevronLeftIcon,
                       {
@@ -31092,41 +31250,44 @@ var AccountHeader = forwardRef(
                     accessibilityLabel: menuAccessibilityLabel,
                     hitSlop: 8,
                     onPress: onMenuPress,
-                    style: styles6.menuButton,
+                    style: styles8.menuButton,
                     children: /* @__PURE__ */ jsx(MenuLinesIcon, { color: colors.white, size: MENU_ICON_SIZE, strokeWidth: 2 })
                   }
                 ) : null,
-                /* @__PURE__ */ jsxs(View, { style: styles6.titleRow, children: [
+                /* @__PURE__ */ jsxs(View, { style: styles8.titleRow, children: [
                   /* @__PURE__ */ jsx(
                     Text,
                     {
                       ...webClassName("account-header-title"),
                       numberOfLines: 1,
-                      style: [styles6.title, titleStyle],
+                      style: [styles8.title, titleStyle],
                       children: title
                     }
                   ),
-                  badge != null ? /* @__PURE__ */ jsx(View, { style: styles6.badgeSlot, children: badge }) : null
+                  badge != null ? /* @__PURE__ */ jsx(View, { style: styles8.badgeSlot, children: badge }) : null
                 ] })
               ]
             }
           ),
-          /* @__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: styles8.end, children: [
+            languageSlot != null ? /* @__PURE__ */ jsx(View, { style: styles8.languageSlot, children: languageSlot }) : null,
+            /* @__PURE__ */ jsx(
+              Pressable,
+              {
+                accessibilityRole: "button",
+                accessibilityLabel: notificationsAccessibilityLabel,
+                onPress: onNotificationsPress,
+                style: styles8.iconButton,
+                children: /* @__PURE__ */ jsx(BellIcon, { color: colors.white, size: ICON_BUTTON_ICON_SIZE, strokeWidth: 1.5 })
+              }
+            )
+          ] })
         ]
       }
     );
   }
 );
-var styles6 = StyleSheet.create({
+var styles8 = StyleSheet.create({
   base: {
     height: HEADER_HEIGHT,
     width: "100%",
@@ -31140,7 +31301,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 +31326,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,
@@ -31197,8 +31370,8 @@ var styles6 = StyleSheet.create({
     flexShrink: 0
   }
 });
-var ICON_SIZE3 = 20;
-var webBlurStyle2 = Platform.OS === "web" ? {
+var ICON_SIZE4 = 20;
+var webBlurStyle3 = Platform.OS === "web" ? {
   backdropFilter: "blur(10.3px)",
   WebkitBackdropFilter: "blur(10.3px)"
 } : {};
@@ -31228,22 +31401,22 @@ var Badge = forwardRef(function Badge2({ label, variant = "default", icon: Icon2
       ...rest,
       ref: setContainerRef,
       style: [
-        styles7.base,
+        styles9.base,
         { backgroundColor: preset.backgroundColor },
-        preset.border ? styles7.transparentBorder : null,
-        preset.blur ? webBlurStyle2 : null,
+        preset.border ? styles9.transparentBorder : null,
+        preset.blur ? webBlurStyle3 : null,
         style
       ],
       accessibilityRole: "text",
       accessibilityLabel: accessibilityLabel ?? label,
       children: [
-        Icon2 ? /* @__PURE__ */ jsx(View, { style: styles7.iconSlot, children: /* @__PURE__ */ jsx(Icon2, { size: ICON_SIZE3, color: preset.iconColor }) }) : null,
-        /* @__PURE__ */ jsx(Text, { style: [styles7.label, Platform.OS === "android" ? styles7.labelAndroid : null], children: label })
+        Icon2 ? /* @__PURE__ */ jsx(View, { style: styles9.iconSlot, children: /* @__PURE__ */ jsx(Icon2, { size: ICON_SIZE4, color: preset.iconColor }) }) : null,
+        /* @__PURE__ */ jsx(Text, { style: [styles9.label, Platform.OS === "android" ? styles9.labelAndroid : null], children: label })
       ]
     }
   );
 });
-var styles7 = StyleSheet.create({
+var styles9 = StyleSheet.create({
   base: {
     flexDirection: "row",
     alignItems: "center",
@@ -31264,8 +31437,8 @@ var styles7 = StyleSheet.create({
     borderStyle: "solid"
   },
   iconSlot: {
-    width: ICON_SIZE3,
-    height: ICON_SIZE3,
+    width: ICON_SIZE4,
+    height: ICON_SIZE4,
     alignItems: "center",
     justifyContent: "center",
     flexShrink: 0
@@ -31292,7 +31465,7 @@ var toneConfig = {
     color: colors.red
   }
 };
-var webBlurStyle3 = Platform.OS === "web" ? {
+var webBlurStyle4 = Platform.OS === "web" ? {
   backdropFilter: "blur(39.5px)",
   WebkitBackdropFilter: "blur(39.5px)"
 } : {};
@@ -31309,14 +31482,14 @@ var StatusBadge = forwardRef(
         ref: setContainerRef,
         accessibilityRole: "text",
         accessibilityLabel: accessibilityLabel ?? label,
-        style: [styles8.base, { backgroundColor: preset.backgroundColor }, webBlurStyle3, style],
+        style: [styles10.base, { backgroundColor: preset.backgroundColor }, webBlurStyle4, style],
         children: /* @__PURE__ */ jsx(
           Text,
           {
             style: [
-              styles8.label,
+              styles10.label,
               { color: preset.color },
-              Platform.OS === "android" ? styles8.labelAndroid : null
+              Platform.OS === "android" ? styles10.labelAndroid : null
             ],
             children: label
           }
@@ -31325,7 +31498,7 @@ var StatusBadge = forwardRef(
     );
   }
 );
-var styles8 = StyleSheet.create({
+var styles10 = StyleSheet.create({
   base: {
     height: 28,
     minHeight: 28,
@@ -31377,7 +31550,7 @@ var PaginationDots = forwardRef(
         ref: setContainerRef,
         accessibilityRole: "adjustable",
         accessibilityLabel: accessibilityLabel ?? `Slide ${safeActive + 1} of ${safeCount}`,
-        style: [styles9.root, style],
+        style: [styles11.root, style],
         children: Array.from({ length: safeCount }, (_, index) => {
           const active = index === safeActive;
           return /* @__PURE__ */ jsx(
@@ -31390,8 +31563,8 @@ var PaginationDots = forwardRef(
               hitSlop: 8,
               onPress: () => onDotPress?.(index),
               style: [
-                styles9.dot,
-                active ? [styles9.dotActive, { width: pillWidth }] : styles9.dotInactive
+                styles11.dot,
+                active ? [styles11.dotActive, { width: pillWidth }] : styles11.dotInactive
               ]
             },
             index
@@ -31401,7 +31574,7 @@ var PaginationDots = forwardRef(
     );
   }
 );
-var styles9 = StyleSheet.create({
+var styles11 = StyleSheet.create({
   root: {
     width: TRACK_WIDTH,
     flexDirection: "row",
@@ -31423,7 +31596,7 @@ var styles9 = StyleSheet.create({
 });
 var WIDTH = 121;
 var HEIGHT = 48;
-var ICON_SIZE4 = 24;
+var ICON_SIZE5 = 24;
 var StepPager = forwardRef(function StepPager2({
   index,
   count,
@@ -31457,7 +31630,7 @@ var StepPager = forwardRef(function StepPager2({
         now: safeCount === 0 ? 0 : safeIndex + 1,
         text: label
       },
-      style: [styles10.root, webBlurStyle4, style],
+      style: [styles12.root, webBlurStyle5, style],
       children: [
         /* @__PURE__ */ jsx(
           Pressable,
@@ -31468,11 +31641,11 @@ var StepPager = forwardRef(function StepPager2({
             accessibilityRole: "button",
             accessibilityLabel: previousAccessibilityLabel,
             accessibilityState: { disabled: atStart || !onPrevious },
-            style: [styles10.navButton, (atStart || !onPrevious) && styles10.navDisabled],
-            children: /* @__PURE__ */ jsx(ChevronLeftIcon, { size: ICON_SIZE4, color: colors.white, strokeWidth: 2 })
+            style: [styles12.navButton, (atStart || !onPrevious) && styles12.navDisabled],
+            children: /* @__PURE__ */ jsx(ChevronLeftIcon, { size: ICON_SIZE5, color: colors.white, strokeWidth: 2 })
           }
         ),
-        /* @__PURE__ */ jsx(Text, { style: styles10.label, children: label }),
+        /* @__PURE__ */ jsx(Text, { style: styles12.label, children: label }),
         /* @__PURE__ */ jsx(
           Pressable,
           {
@@ -31482,19 +31655,19 @@ var StepPager = forwardRef(function StepPager2({
             accessibilityRole: "button",
             accessibilityLabel: nextAccessibilityLabel,
             accessibilityState: { disabled: atEnd || !onNext },
-            style: [styles10.navButton, (atEnd || !onNext) && styles10.navDisabled],
-            children: /* @__PURE__ */ jsx(View, { style: styles10.chevronRight, children: /* @__PURE__ */ jsx(ChevronLeftIcon, { size: ICON_SIZE4, color: colors.white, strokeWidth: 2 }) })
+            style: [styles12.navButton, (atEnd || !onNext) && styles12.navDisabled],
+            children: /* @__PURE__ */ jsx(View, { style: styles12.chevronRight, children: /* @__PURE__ */ jsx(ChevronLeftIcon, { size: ICON_SIZE5, color: colors.white, strokeWidth: 2 }) })
           }
         )
       ]
     }
   );
 });
-var webBlurStyle4 = Platform.OS === "web" ? {
+var webBlurStyle5 = Platform.OS === "web" ? {
   backdropFilter: "blur(50px)",
   WebkitBackdropFilter: "blur(50px)"
 } : {};
-var styles10 = StyleSheet.create({
+var styles12 = StyleSheet.create({
   root: {
     width: WIDTH,
     height: HEIGHT,
@@ -31508,8 +31681,8 @@ var styles10 = StyleSheet.create({
     overflow: "hidden"
   },
   navButton: {
-    width: ICON_SIZE4,
-    height: ICON_SIZE4,
+    width: ICON_SIZE5,
+    height: ICON_SIZE5,
     alignItems: "center",
     justifyContent: "center"
   },
@@ -31530,13 +31703,13 @@ var styles10 = StyleSheet.create({
   }
 });
 var ICON_SLOT = 36;
-var ICON_SIZE5 = 20;
+var ICON_SIZE6 = 20;
 var InfoTile = forwardRef(function InfoTile2({
   title,
   description,
   icon: Icon2,
   iconProps,
-  iconSize = ICON_SIZE5,
+  iconSize = ICON_SIZE6,
   iconSlotBackgroundColor = colors.grey600,
   style,
   className,
@@ -31554,18 +31727,18 @@ var InfoTile = forwardRef(function InfoTile2({
       ref: setContainerRef,
       accessibilityRole: "text",
       accessibilityLabel: accessibilityLabel ?? (hasDescription ? `${title}. ${description}` : title),
-      style: [styles11.root, style],
+      style: [styles13.root, style],
       children: [
-        /* @__PURE__ */ jsx(View, { style: [styles11.iconSlot, { backgroundColor: iconSlotBackgroundColor }], children: /* @__PURE__ */ jsx(Icon2, { ...iconProps, size: iconSize, color: iconProps?.color ?? colors.white }) }),
-        /* @__PURE__ */ jsxs(View, { style: styles11.textBlock, children: [
-          /* @__PURE__ */ jsx(Text, { style: styles11.title, children: title }),
-          hasDescription ? /* @__PURE__ */ jsx(Text, { style: styles11.description, children: description }) : null
+        /* @__PURE__ */ jsx(View, { style: [styles13.iconSlot, { backgroundColor: iconSlotBackgroundColor }], children: /* @__PURE__ */ jsx(Icon2, { ...iconProps, size: iconSize, color: iconProps?.color ?? colors.white }) }),
+        /* @__PURE__ */ jsxs(View, { style: styles13.textBlock, children: [
+          /* @__PURE__ */ jsx(Text, { style: styles13.title, children: title }),
+          hasDescription ? /* @__PURE__ */ jsx(Text, { style: styles13.description, children: description }) : null
         ] })
       ]
     }
   );
 });
-var styles11 = StyleSheet.create({
+var styles13 = StyleSheet.create({
   root: {
     flexDirection: "row",
     alignItems: "center",
@@ -31615,7 +31788,7 @@ var CARD_PADDING_DESKTOP = 24;
 var CARD_GAP_MOBILE = 16;
 var CARD_GAP_DESKTOP = 24;
 var ICON_SLOT2 = 48;
-var ICON_SIZE6 = 24;
+var ICON_SIZE7 = 24;
 var ICON_SLOT_BG = "#E38E5E0F";
 var ICON_COLOR = "#B76533";
 var ContactInfoCard = forwardRef(
@@ -31624,7 +31797,7 @@ var ContactInfoCard = forwardRef(
     value,
     icon: Icon2,
     iconProps,
-    iconSize = ICON_SIZE6,
+    iconSize = ICON_SIZE7,
     iconSlotBackgroundColor = ICON_SLOT_BG,
     style,
     className,
@@ -31644,7 +31817,7 @@ var ContactInfoCard = forwardRef(
         accessibilityRole: "text",
         accessibilityLabel: accessibilityLabel ?? `${title}. ${value}`,
         style: [
-          styles12.root,
+          styles14.root,
           {
             height: isDesktop ? CARD_HEIGHT_DESKTOP : CARD_HEIGHT_MOBILE,
             gap: isDesktop ? CARD_GAP_DESKTOP : CARD_GAP_MOBILE,
@@ -31653,7 +31826,7 @@ var ContactInfoCard = forwardRef(
           style
         ],
         children: [
-          /* @__PURE__ */ jsx(View, { style: [styles12.iconSlot, { backgroundColor: iconSlotBackgroundColor }], children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(View, { style: [styles14.iconSlot, { backgroundColor: iconSlotBackgroundColor }], children: /* @__PURE__ */ jsx(
             Icon2,
             {
               ...iconProps,
@@ -31662,16 +31835,16 @@ var ContactInfoCard = forwardRef(
               strokeWidth: iconProps?.strokeWidth ?? 2
             }
           ) }),
-          /* @__PURE__ */ jsxs(View, { style: styles12.textBlock, children: [
-            /* @__PURE__ */ jsx(Text, { style: styles12.title, children: title }),
-            /* @__PURE__ */ jsx(Text, { style: styles12.value, children: value })
+          /* @__PURE__ */ jsxs(View, { style: styles14.textBlock, children: [
+            /* @__PURE__ */ jsx(Text, { style: styles14.title, children: title }),
+            /* @__PURE__ */ jsx(Text, { style: styles14.value, children: value })
           ] })
         ]
       }
     );
   }
 );
-var styles12 = StyleSheet.create({
+var styles14 = StyleSheet.create({
   root: {
     width: "100%",
     flexDirection: "row",
@@ -31776,59 +31949,54 @@ var AccordionItem = forwardRef(
       inputRange: [0, 1],
       outputRange: ["0deg", "180deg"]
     });
-    const bodyTextStyle = [styles13.body, { fontSize: bodyFontSize, lineHeight: bodyLineHeight }];
+    const bodyTextStyle = [styles15.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,
+          styles15.root,
           {
             borderRadius: isDesktop ? RADIUS_DESKTOP : RADIUS_MOBILE,
             paddingRight: paddingX,
             paddingLeft: paddingX
           },
+          Platform.OS === "web" ? styles15.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: styles15.header, children: [
+            /* @__PURE__ */ jsx(Text, { style: styles15.title, children: title }),
+            /* @__PURE__ */ jsx(Animated.View, { style: [styles15.chevron, { transform: [{ rotate: chevronRotate }] }], children: /* @__PURE__ */ jsx(
+              ChevronDownIcon,
+              {
+                size: CHEVRON_SIZE2,
+                color: open ? colors.primary : colors.grey400,
+                strokeWidth: 2
+              }
+            ) })
+          ] }),
           /* @__PURE__ */ jsx(
             View,
             {
-              style: [styles13.measureHidden, { left: paddingX, right: paddingX }],
+              style: [styles15.measureHidden, { left: paddingX, right: paddingX }],
               pointerEvents: "none",
               onLayout: onBodyLayout,
               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: [styles15.bodyClip, { height: bodyHeight }], pointerEvents: "none", children: /* @__PURE__ */ jsx(View, { style: styles15.bodyInner, children: /* @__PURE__ */ jsx(Text, { style: bodyTextStyle, children }) }) })
         ]
       }
     );
   }
 );
-var styles13 = StyleSheet.create({
+var styles15 = StyleSheet.create({
   root: {
     width: "100%",
     paddingTop: 16,
@@ -31837,6 +32005,9 @@ var styles13 = StyleSheet.create({
     opacity: 1,
     overflow: "hidden"
   },
+  rootWeb: {
+    cursor: "pointer"
+  },
   header: {
     flexDirection: "row",
     alignItems: "center",
@@ -31884,7 +32055,7 @@ var ROW_GAP = 12;
 var CONNECTOR_WIDTH = 2;
 var CONNECTOR_HEIGHT = 19;
 var CONNECTOR_GAP = 8;
-var webBlurStyle5 = Platform.OS === "web" ? {
+var webBlurStyle6 = Platform.OS === "web" ? {
   backdropFilter: "blur(20px)",
   WebkitBackdropFilter: "blur(20px)"
 } : {};
@@ -31902,18 +32073,18 @@ var StepList = forwardRef(function StepList2({ steps, style, className, accessib
       ref: setContainerRef,
       accessibilityRole: "summary",
       accessibilityLabel,
-      style: [styles14.root, style],
+      style: [styles16.root, style],
       children: steps.map((description, index) => {
         const isLast = index === steps.length - 1;
         const number = index + 1;
-        return /* @__PURE__ */ jsxs(View, { style: styles14.stepBlock, children: [
-          /* @__PURE__ */ jsxs(View, { style: styles14.row, children: [
-            /* @__PURE__ */ jsx(View, { style: [styles14.badge, webBlurStyle5], children: /* @__PURE__ */ jsx(
+        return /* @__PURE__ */ jsxs(View, { style: styles16.stepBlock, children: [
+          /* @__PURE__ */ jsxs(View, { style: styles16.row, children: [
+            /* @__PURE__ */ jsx(View, { style: [styles16.badge, webBlurStyle6], children: /* @__PURE__ */ jsx(
               Text,
               {
                 style: [
-                  styles14.badgeLabel,
-                  Platform.OS === "android" ? styles14.labelAndroid : null
+                  styles16.badgeLabel,
+                  Platform.OS === "android" ? styles16.labelAndroid : null
                 ],
                 children: String(number)
               }
@@ -31921,18 +32092,18 @@ var StepList = forwardRef(function StepList2({ steps, style, className, accessib
             /* @__PURE__ */ jsx(
               Text,
               {
-                style: [styles14.description, Platform.OS === "android" ? styles14.labelAndroid : null],
+                style: [styles16.description, Platform.OS === "android" ? styles16.labelAndroid : null],
                 children: description
               }
             )
           ] }),
-          !isLast ? /* @__PURE__ */ jsx(View, { style: styles14.connectorSlot, children: /* @__PURE__ */ jsx(View, { style: styles14.connector }) }) : null
+          !isLast ? /* @__PURE__ */ jsx(View, { style: styles16.connectorSlot, children: /* @__PURE__ */ jsx(View, { style: styles16.connector }) }) : null
         ] }, `${number}-${description}`);
       })
     }
   );
 });
-var styles14 = StyleSheet.create({
+var styles16 = StyleSheet.create({
   root: {
     width: "100%"
   },
@@ -31990,7 +32161,7 @@ var styles14 = StyleSheet.create({
   }
 });
 var BUTTON_SIZE = 32;
-var webBlurStyle6 = Platform.OS === "web" ? {
+var webBlurStyle7 = Platform.OS === "web" ? {
   backdropFilter: "blur(20px)",
   WebkitBackdropFilter: "blur(20px)"
 } : {};
@@ -32027,7 +32198,7 @@ var Counter = forwardRef(function Counter2({
     if (!isControlled) setUncontrolledValue(next);
     onValueChange?.(next);
   };
-  return /* @__PURE__ */ jsxs(View, { ...rest, ref: setContainerRef, style: [styles15.base, style], children: [
+  return /* @__PURE__ */ jsxs(View, { ...rest, ref: setContainerRef, style: [styles17.base, style], children: [
     /* @__PURE__ */ jsx(
       Pressable,
       {
@@ -32037,11 +32208,11 @@ var Counter = forwardRef(function Counter2({
         accessibilityRole: "button",
         accessibilityLabel: "Decrease value",
         accessibilityState: { disabled: decrementDisabled },
-        style: [styles15.button, webBlurStyle6, decrementDisabled && styles15.buttonDisabled],
+        style: [styles17.button, webBlurStyle7, decrementDisabled && styles17.buttonDisabled],
         children: /* @__PURE__ */ jsx(MinusIcon, {})
       }
     ),
-    /* @__PURE__ */ jsx(Text, { style: styles15.value, children: resolvedValue }),
+    /* @__PURE__ */ jsx(Text, { style: styles17.value, children: resolvedValue }),
     /* @__PURE__ */ jsx(
       Pressable,
       {
@@ -32051,13 +32222,13 @@ var Counter = forwardRef(function Counter2({
         accessibilityRole: "button",
         accessibilityLabel: "Increase value",
         accessibilityState: { disabled: incrementDisabled },
-        style: [styles15.button, webBlurStyle6, incrementDisabled && styles15.buttonDisabled],
+        style: [styles17.button, webBlurStyle7, incrementDisabled && styles17.buttonDisabled],
         children: /* @__PURE__ */ jsx(PlusIcon, {})
       }
     )
   ] });
 });
-var styles15 = StyleSheet.create({
+var styles17 = StyleSheet.create({
   base: {
     flexDirection: "row",
     alignItems: "center",
@@ -32081,7 +32252,7 @@ var styles15 = StyleSheet.create({
     color: colors.white
   }
 });
-var ICON_SIZE7 = 20;
+var ICON_SIZE8 = 20;
 var ANIMATION_DURATION2 = 200;
 var OPTION_HORIZONTAL_PADDING = 16;
 var OPTION_CONTENT_GAP = 12;
@@ -32177,14 +32348,14 @@ var SegmentedToggle = forwardRef(
           onLayout?.(event);
         },
         style: [
-          styles16.base,
-          fullWidth ? styles16.fullWidth : styles16.contentWidth,
-          disabled && styles16.disabled,
+          styles18.base,
+          fullWidth ? styles18.fullWidth : styles18.contentWidth,
+          disabled && styles18.disabled,
           style
         ],
         accessibilityRole: "radiogroup",
         children: [
-          !fullWidth ? options.map(({ value: optionValue, label, icon: Icon2 }, index) => /* @__PURE__ */ jsxs(
+          !fullWidth ? options.map(({ value: optionValue, label, icon: Icon2, showLabel = true }, index) => /* @__PURE__ */ jsxs(
             View,
             {
               pointerEvents: "none",
@@ -32200,10 +32371,10 @@ var SegmentedToggle = forwardRef(
                   return nextWidths;
                 });
               },
-              style: styles16.optionMeasurement,
+              style: styles18.optionMeasurement,
               children: [
-                Icon2 ? /* @__PURE__ */ jsx(Icon2, { size: ICON_SIZE7 }) : null,
-                /* @__PURE__ */ jsx(Text, { style: [styles16.label, styles16.contentWidthLabel], children: label })
+                Icon2 ? /* @__PURE__ */ jsx(Icon2, { size: ICON_SIZE8 }) : null,
+                showLabel ? /* @__PURE__ */ jsx(Text, { style: [styles18.label, styles18.contentWidthLabel], children: label }) : null
               ]
             },
             `${optionValue}-measurement`
@@ -32213,12 +32384,12 @@ var SegmentedToggle = forwardRef(
             {
               pointerEvents: "none",
               style: [
-                styles16.activeIndicator,
+                styles18.activeIndicator,
                 { width: selectedOptionWidth, transform: [{ translateX: indicatorTranslateX }] }
               ]
             }
           ) : null,
-          options.map(({ value: optionValue, label, icon: Icon2 }, index) => {
+          options.map(({ value: optionValue, label, icon: Icon2, showLabel = true }, index) => {
             const selected = optionValue === selectedValue;
             const iconColor = selected ? colors.primary : colors.whiteAlpha20;
             const labelColor = selected ? colors.whiteAlpha86 : colors.whiteAlpha40;
@@ -32233,23 +32404,23 @@ var SegmentedToggle = forwardRef(
                 accessibilityLabel: label,
                 accessibilityState: { selected, disabled },
                 style: [
-                  styles16.option,
-                  fullWidth ? styles16.optionFullWidth : [styles16.optionContentWidth, optionWidth > 0 && { width: optionWidth }]
+                  styles18.option,
+                  fullWidth ? styles18.optionFullWidth : [styles18.optionContentWidth, optionWidth > 0 && { width: optionWidth }]
                 ],
-                children: /* @__PURE__ */ jsxs(View, { style: styles16.optionContent, children: [
-                  Icon2 ? /* @__PURE__ */ jsx(Icon2, { size: ICON_SIZE7, color: iconColor }) : null,
-                  /* @__PURE__ */ jsx(
+                children: /* @__PURE__ */ jsxs(View, { style: styles18.optionContent, children: [
+                  Icon2 ? /* @__PURE__ */ jsx(Icon2, { size: ICON_SIZE8, color: iconColor }) : null,
+                  showLabel ? /* @__PURE__ */ jsx(
                     Text,
                     {
                       numberOfLines: fullWidth ? 1 : void 0,
                       style: [
-                        styles16.label,
-                        !fullWidth && styles16.contentWidthLabel,
+                        styles18.label,
+                        !fullWidth && styles18.contentWidthLabel,
                         { color: labelColor }
                       ],
                       children: label
                     }
-                  )
+                  ) : null
                 ] })
               },
               optionValue
@@ -32260,7 +32431,7 @@ var SegmentedToggle = forwardRef(
     );
   }
 );
-var styles16 = StyleSheet.create({
+var styles18 = StyleSheet.create({
   base: {
     height: 44,
     flexDirection: "row",
@@ -32388,16 +32559,16 @@ var Sidebar = forwardRef(function Sidebar2({
     {
       ...rest,
       ref: setContainerRef,
-      style: [styles17.root, { width: widthAnim }, style],
+      style: [styles19.root, { width: widthAnim }, style],
       accessibilityRole: "menu",
       children: [
         /* @__PURE__ */ jsxs(
           View,
           {
             style: [
-              styles17.header,
-              collapsed ? styles17.headerCollapsed : styles17.headerExpanded,
-              !showCollapseToggle && !onClose ? styles17.headerNoToggle : null
+              styles19.header,
+              collapsed ? styles19.headerCollapsed : styles19.headerExpanded,
+              !showCollapseToggle && !onClose ? styles19.headerNoToggle : null
             ],
             children: [
               /* @__PURE__ */ jsx(
@@ -32405,7 +32576,7 @@ var Sidebar = forwardRef(function Sidebar2({
                 {
                   pointerEvents: collapsed ? "none" : "auto",
                   style: [
-                    styles17.logoSlot,
+                    styles19.logoSlot,
                     {
                       opacity: labelOpacity,
                       maxWidth: collapsed ? 0 : LOGO_WIDTH
@@ -32431,7 +32602,7 @@ var Sidebar = forwardRef(function Sidebar2({
                   accessibilityLabel: closeAccessibilityLabel,
                   hitSlop: 8,
                   onPress: onClose,
-                  style: styles17.toggleButton,
+                  style: styles19.toggleButton,
                   children: /* @__PURE__ */ jsx(CloseIcon, { color: colors.grey100, size: TOGGLE_SIZE, strokeWidth: 2 })
                 }
               ) : showCollapseToggle ? /* @__PURE__ */ jsx(
@@ -32442,7 +32613,7 @@ var Sidebar = forwardRef(function Sidebar2({
                   accessibilityState: { expanded: !collapsed },
                   hitSlop: 8,
                   onPress: () => setCollapsed(!collapsed),
-                  style: styles17.toggleButton,
+                  style: styles19.toggleButton,
                   children: /* @__PURE__ */ jsx(SidebarIcon, { color: colors.grey100, size: TOGGLE_SIZE, strokeWidth: 2 })
                 }
               ) : null
@@ -32454,7 +32625,7 @@ var Sidebar = forwardRef(function Sidebar2({
           {
             accessibilityLabel: navigationAccessibilityLabel,
             accessibilityRole: "menu",
-            style: styles17.nav,
+            style: styles19.nav,
             children: items.map((item) => {
               const isActive = Boolean(item.active);
               const iconColor = isActive ? colors.primary : colors.grey300;
@@ -32470,18 +32641,18 @@ var Sidebar = forwardRef(function Sidebar2({
                   hoverColor: colors.grey700,
                   onPress: item.onPress,
                   labelStyle: [
-                    styles17.menuLabel,
+                    styles19.menuLabel,
                     { color: isActive ? colors.white : colors.grey200 },
-                    collapsed ? styles17.menuLabelCollapsed : styles17.menuLabelExpanded
+                    collapsed ? styles19.menuLabelCollapsed : styles19.menuLabelExpanded
                   ],
-                  style: [styles17.menuItem, collapsed ? styles17.menuItemCollapsed : null]
+                  style: [styles19.menuItem, collapsed ? styles19.menuItemCollapsed : null]
                 },
                 item.key
               );
             })
           }
         ),
-        /* @__PURE__ */ jsx(View, { style: [styles17.footer, collapsed ? styles17.footerCollapsed : styles17.footerExpanded], children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(View, { style: [styles19.footer, collapsed ? styles19.footerCollapsed : styles19.footerExpanded], children: /* @__PURE__ */ jsx(
           AvatarSimple,
           {
             name: user.name,
@@ -32496,7 +32667,7 @@ var Sidebar = forwardRef(function Sidebar2({
     }
   );
 });
-var styles17 = StyleSheet.create({
+var styles19 = StyleSheet.create({
   root: {
     flexDirection: "column",
     alignSelf: "stretch",
@@ -32601,7 +32772,13 @@ var defaultLanguageOptions = [
 ];
 var CONTROL_WIDTH = 90;
 var CONTROL_HEIGHT = 35;
-var ICON_SIZE8 = 16;
+var ICON_SIZE9 = 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 +32789,7 @@ var LanguageSwitcher = forwardRef(
     defaultOpen = false,
     onOpenChange,
     disabled = false,
+    variant = "default",
     accessibilityLabel = "Language",
     style,
     className,
@@ -32631,6 +32809,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 +32860,14 @@ var LanguageSwitcher = forwardRef(
       {
         ...rest,
         ref: setWrapperRef,
-        style: [styles18.wrapper, isOpen && styles18.wrapperOpen, disabled && styles18.disabled, style],
+        style: [
+          styles20.wrapper,
+          isIconVariant ? styles20.wrapperIcon : styles20.wrapperDefault,
+          isOpen && styles20.wrapperOpen,
+          isOpen && isIconVariant && styles20.wrapperOpenIcon,
+          disabled && styles20.disabled,
+          style
+        ],
         children: [
           /* @__PURE__ */ jsxs(
             Pressable,
@@ -32696,49 +32882,76 @@ var LanguageSwitcher = forwardRef(
               onHoverIn: () => setTriggerHovered(true),
               onHoverOut: () => setTriggerHovered(false),
               style: ({ pressed }) => [
-                styles18.trigger,
-                (triggerHovered || pressed || isOpen) && styles18.triggerActive
+                isIconVariant ? styles20.triggerIcon : styles20.trigger,
+                !isIconVariant && (triggerHovered || pressed || isOpen) && styles20.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_SIZE9, color: colors.white, strokeWidth: isIconVariant ? 1.5 : 2 }),
+                !isIconVariant ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(Text, { style: styles20.triggerLabel, numberOfLines: 1, children: selectedOption?.label ?? "" }),
+                  /* @__PURE__ */ jsx(View, { style: [styles20.chevron, isOpen && styles20.chevronOpen], children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: ICON_SIZE9, 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: [styles20.menu, isIconVariant ? styles20.menuIcon : styles20.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 }) => [
+                      styles20.item,
+                      isIconVariant ? styles20.itemIcon : null,
+                      selected ? isIconVariant ? styles20.itemSelectedIcon : styles20.itemSelected : (hoveredValue === option.value || pressed) && styles20.itemHovered
+                    ],
+                    children: /* @__PURE__ */ jsx(
+                      Text,
+                      {
+                        style: [
+                          styles20.itemLabel,
+                          selected && (isIconVariant ? styles20.itemLabelSelectedIcon : styles20.itemLabelSelected)
+                        ],
+                        children: option.label
+                      }
+                    )
+                  },
+                  option.value
+                );
+              })
+            }
+          ) : null
         ]
       }
     );
   }
 );
-var styles18 = StyleSheet.create({
+var styles20 = 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 +32966,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
   },
@@ -32764,8 +32988,8 @@ var styles18 = StyleSheet.create({
     color: colors.white
   },
   chevron: {
-    width: ICON_SIZE8,
-    height: ICON_SIZE8,
+    width: ICON_SIZE9,
+    height: ICON_SIZE9,
     flexShrink: 0,
     alignItems: "center",
     justifyContent: "center"
@@ -32775,22 +32999,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 +33042,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,14 +33052,17 @@ var styles18 = StyleSheet.create({
   },
   itemLabelSelected: {
     color: colors.primary
+  },
+  itemLabelSelectedIcon: {
+    color: colors.primary
   }
 });
-var ICON_SIZE9 = 25.63181;
+var ICON_SIZE10 = 25.63181;
 var StatCard = forwardRef(function StatCard2({
   label,
   icon: Icon2,
   iconProps,
-  iconSize = ICON_SIZE9,
+  iconSize = ICON_SIZE10,
   style,
   className,
   accessibilityLabel,
@@ -32827,17 +33077,17 @@ var StatCard = forwardRef(function StatCard2({
     {
       ...rest,
       ref: setContainerRef,
-      style: [styles19.base, style],
+      style: [styles21.base, style],
       accessibilityRole: "text",
       accessibilityLabel: accessibilityLabel ?? label,
       children: [
         /* @__PURE__ */ jsx(Icon2, { ...iconProps, size: iconSize, color: iconProps?.color ?? colors.white }),
-        /* @__PURE__ */ jsx(Text, { style: styles19.label, children: label })
+        /* @__PURE__ */ jsx(Text, { style: styles21.label, children: label })
       ]
     }
   );
 });
-var styles19 = StyleSheet.create({
+var styles21 = StyleSheet.create({
   base: {
     width: 204.5,
     minHeight: 114,
@@ -32949,7 +33199,7 @@ var Button = forwardRef(
     useApplyWebClassName(textRef, textClassName);
     const iconNode = customIcon ?? /* @__PURE__ */ jsx(ArrowRightIcon, { size: metrics.iconSize, color: preset.iconColor });
     const containerStyle = [
-      styles20.base,
+      styles22.base,
       {
         minHeight: metrics.minHeight,
         height: variant === "danger" ? 33 : void 0,
@@ -32961,16 +33211,16 @@ var Button = forwardRef(
         paddingRight: hasIcon ? metrics.paddingRightWithIcon : metrics.paddingRight,
         gap: hasIcon ? metrics.gap : 0
       },
-      hasIcon ? styles20.contentWithIcon : styles20.contentWithoutIcon,
-      disabled && styles20.disabled,
+      hasIcon ? styles22.contentWithIcon : styles22.contentWithoutIcon,
+      disabled && styles22.disabled,
       style
     ];
     const labelStyle = [
-      styles20.label,
+      styles22.label,
       metrics.text,
       { color: preset.textColor },
-      Platform.OS === "android" ? styles20.labelAndroid : null,
-      !hasIcon && styles20.labelCentered,
+      Platform.OS === "android" ? styles22.labelAndroid : null,
+      !hasIcon && styles22.labelCentered,
       textStyle
     ];
     return /* @__PURE__ */ jsxs(
@@ -32991,7 +33241,7 @@ var Button = forwardRef(
             View,
             {
               style: [
-                styles20.iconContainer,
+                styles22.iconContainer,
                 {
                   width: metrics.iconContainerSize,
                   height: metrics.iconContainerSize,
@@ -33007,7 +33257,7 @@ var Button = forwardRef(
     );
   }
 );
-var styles20 = StyleSheet.create({
+var styles22 = StyleSheet.create({
   base: {
     flexDirection: "row",
     alignItems: "center",
@@ -33091,13 +33341,13 @@ var Checkbox = forwardRef(function Checkbox2({
       accessibilityRole: "checkbox",
       accessibilityLabel: resolvedAccessibilityLabel,
       accessibilityState: { checked: isActive, disabled },
-      style: [styles21.root, disabled && styles21.disabled, style],
+      style: [styles23.root, disabled && styles23.disabled, style],
       children: [
         /* @__PURE__ */ jsx(
           View,
           {
             style: [
-              styles21.box,
+              styles23.box,
               {
                 backgroundColor: chrome.backgroundColor,
                 borderColor: chrome.borderColor
@@ -33106,12 +33356,12 @@ var Checkbox = forwardRef(function Checkbox2({
             children: isActive ? /* @__PURE__ */ jsx(CheckIcon, { size: CHECK_SIZE, color: colors.primary, strokeWidth: CHECK_STROKE }) : null
           }
         ),
-        labelContent != null && labelContent !== false ? typeof labelContent === "string" || typeof labelContent === "number" ? /* @__PURE__ */ jsx(Text, { style: [styles21.label, labelStyle], children: labelContent }) : labelContent : null
+        labelContent != null && labelContent !== false ? typeof labelContent === "string" || typeof labelContent === "number" ? /* @__PURE__ */ jsx(Text, { style: [styles23.label, labelStyle], children: labelContent }) : labelContent : null
       ]
     }
   );
 });
-var styles21 = StyleSheet.create({
+var styles23 = StyleSheet.create({
   root: {
     flexDirection: "row",
     alignItems: "center",
@@ -33225,26 +33475,34 @@ 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 ICON_SIZE10 = 20;
+var MENU_PADDING = 12;
+var ICON_SIZE11 = 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,
   time
 }) {
-  return /* @__PURE__ */ jsxs(View, { style: styles22.rangeField, children: [
-    /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles22.rangeLabel, children: label }),
-    /* @__PURE__ */ jsxs(View, { style: styles22.rangeValueRow, children: [
-      /* @__PURE__ */ jsx(Text, { style: styles22.rangeDate, children: value }),
-      time ? /* @__PURE__ */ jsxs(View, { style: styles22.rangeTimeWrap, children: [
+  return /* @__PURE__ */ jsxs(View, { style: styles24.rangeField, children: [
+    /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles24.rangeLabel, children: label }),
+    /* @__PURE__ */ jsxs(View, { style: styles24.rangeValueRow, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles24.rangeDate, children: value }),
+      time ? /* @__PURE__ */ jsxs(View, { style: styles24.rangeTimeWrap, children: [
         /* @__PURE__ */ jsx(ClockFilledIcon, { color: colors.lightGrey, size: 16 }),
-        /* @__PURE__ */ jsx(Text, { style: styles22.rangeTime, children: time })
+        /* @__PURE__ */ jsx(Text, { style: styles24.rangeTime, children: time })
       ] }) : null
     ] })
   ] });
@@ -33434,15 +33692,15 @@ var DatePicker = forwardRef(
         ...rest,
         ref: setRootRef,
         style: [
-          styles22.root,
-          usesRangeTrigger && styles22.rangeRoot,
-          hideTrigger && styles22.rootHideTrigger,
-          isOpen && styles22.rootOpen,
-          disabled && styles22.disabled,
+          styles24.root,
+          usesRangeTrigger && styles24.rangeRoot,
+          hideTrigger && styles24.rootHideTrigger,
+          isOpen && styles24.rootOpen,
+          disabled && styles24.disabled,
           style
         ],
         accessibilityState: { disabled, expanded: isOpen },
-        children: /* @__PURE__ */ jsxs(View, { style: [styles22.triggerWrap, isOpen && styles22.triggerWrapOpen], children: [
+        children: /* @__PURE__ */ jsxs(View, { style: [styles24.triggerWrap, isOpen && styles24.triggerWrapOpen], children: [
           hideTrigger ? null : /* @__PURE__ */ jsx(
             Pressable,
             {
@@ -33453,9 +33711,9 @@ var DatePicker = forwardRef(
               accessibilityLabel: resolvedAccessibilityLabel,
               accessibilityState: { disabled, expanded: isOpen },
               style: [
-                styles22.trigger,
-                usesRangeTrigger && styles22.rangeTrigger,
-                usesRangeTrigger && (usesVerticalRangeTrigger ? styles22.rangeTriggerVertical : styles22.rangeTriggerHorizontal),
+                styles24.trigger,
+                usesRangeTrigger && styles24.rangeTrigger,
+                usesRangeTrigger && (usesVerticalRangeTrigger ? styles24.rangeTriggerVertical : styles24.rangeTriggerHorizontal),
                 {
                   borderColor: triggerBorderColor,
                   backgroundColor: usesRangeTrigger ? "transparent" : colors.grey700
@@ -33466,13 +33724,13 @@ var DatePicker = forwardRef(
                 /* @__PURE__ */ jsx(
                   View,
                   {
-                    style: usesVerticalRangeTrigger ? styles22.rangeDividerVertical : styles22.rangeDividerHorizontal
+                    style: usesVerticalRangeTrigger ? styles24.rangeDividerVertical : styles24.rangeDividerHorizontal
                   }
                 ),
                 /* @__PURE__ */ jsx(RangeTriggerField, { label: endLabel, time: endTime, value: endValue })
               ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx(Text, { style: [styles22.triggerText, { color: triggerTextColor }], numberOfLines: 1, children: triggerLabel }),
-                /* @__PURE__ */ jsx(View, { style: styles22.iconSlot, children: /* @__PURE__ */ jsx(CalendarOutlineIcon, { size: ICON_SIZE10, color: colors.grey100 }) })
+                /* @__PURE__ */ jsx(Text, { style: [styles24.triggerText, { color: triggerTextColor }], numberOfLines: 1, children: triggerLabel }),
+                /* @__PURE__ */ jsx(View, { style: styles24.iconSlot, children: /* @__PURE__ */ jsx(CalendarOutlineIcon, { size: ICON_SIZE11, color: colors.grey100 }) })
               ] })
             }
           ),
@@ -33480,13 +33738,13 @@ var DatePicker = forwardRef(
             View,
             {
               style: [
-                styles22.menu,
-                usesRangeTrigger && styles22.rangeMenu,
-                hideTrigger ? styles22.menuInline : menuAlignEnd ? styles22.menuAlignEnd : styles22.menuAlignStart,
+                styles24.menu,
+                usesRangeTrigger && styles24.rangeMenu,
+                hideTrigger ? styles24.menuInline : menuAlignEnd ? styles24.menuAlignEnd : styles24.menuAlignStart,
                 calendarStyle
               ],
               children: [
-                /* @__PURE__ */ jsxs(View, { style: styles22.calendarHeader, children: [
+                /* @__PURE__ */ jsxs(View, { style: styles24.calendarHeader, children: [
                   /* @__PURE__ */ jsx(
                     Pressable,
                     {
@@ -33494,11 +33752,11 @@ var DatePicker = forwardRef(
                       hitSlop: 8,
                       accessibilityRole: "button",
                       accessibilityLabel: "Previous month",
-                      style: styles22.navButton,
+                      style: styles24.navButton,
                       children: /* @__PURE__ */ jsx(ChevronLeftIcon, { size: NAV_ICON_SIZE, color: colors.white })
                     }
                   ),
-                  /* @__PURE__ */ jsxs(Text, { style: styles22.monthHeading, children: [
+                  /* @__PURE__ */ jsxs(Text, { style: styles24.monthHeading, children: [
                     monthNames[visibleMonth.getMonth()],
                     " ",
                     visibleMonth.getFullYear()
@@ -33510,13 +33768,13 @@ var DatePicker = forwardRef(
                       hitSlop: 8,
                       accessibilityRole: "button",
                       accessibilityLabel: "Next month",
-                      style: styles22.navButton,
-                      children: /* @__PURE__ */ jsx(View, { style: styles22.navIconMirror, children: /* @__PURE__ */ jsx(ChevronLeftIcon, { size: NAV_ICON_SIZE, color: colors.white }) })
+                      style: styles24.navButton,
+                      children: /* @__PURE__ */ jsx(View, { style: styles24.navIconMirror, children: /* @__PURE__ */ jsx(ChevronLeftIcon, { size: NAV_ICON_SIZE, color: colors.white }) })
                     }
                   )
                 ] }),
                 /* @__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: styles24.weekdayRow, children: weekdayLabels.map((weekdayLabel, index) => /* @__PURE__ */ jsx(View, { style: styles24.weekdayCell, children: /* @__PURE__ */ jsx(Text, { style: styles24.weekdayText, children: weekdayLabel }) }, `${weekdayLabel}-${index}`)) }),
                   weeks.map((week, weekIndex) => {
                     let rangeHighlightStyle = null;
                     if (isRange && rangeValue.start && rangeValue.end) {
@@ -33553,13 +33811,13 @@ var DatePicker = forwardRef(
                     return /* @__PURE__ */ jsxs(
                       View,
                       {
-                        style: [styles22.weekRow, weekIndex > 0 && styles22.weekRowSpaced],
+                        style: [styles24.weekRow, weekIndex > 0 && styles24.weekRowSpaced],
                         children: [
                           rangeHighlightStyle ? /* @__PURE__ */ jsx(
                             View,
                             {
                               pointerEvents: "none",
-                              style: [styles22.rangeHighlight, rangeHighlightStyle]
+                              style: [styles24.rangeHighlight, rangeHighlightStyle]
                             }
                           ) : null,
                           week.map((day, dayIndex) => {
@@ -33582,7 +33840,7 @@ var DatePicker = forwardRef(
                                 onHoverOut: () => setHoveredDayKey((current) => current === dayKey ? null : current),
                                 onPressIn: () => setHoveredDayKey(dayKey),
                                 onPressOut: () => setHoveredDayKey((current) => current === dayKey ? null : current),
-                                style: styles22.dayCellWrap,
+                                style: styles24.dayCellWrap,
                                 accessibilityRole: "button",
                                 accessibilityLabel: formatValue(day),
                                 accessibilityState: {
@@ -33594,14 +33852,14 @@ var DatePicker = forwardRef(
                                     View,
                                     {
                                       style: [
-                                        styles22.dayCircle,
-                                        isSelectedEndpoint && styles22.dayCircleSelected,
-                                        isHovered && styles22.dayCircleHovered
+                                        styles24.dayCircle,
+                                        isSelectedEndpoint && styles24.dayCircleSelected,
+                                        isHovered && styles24.dayCircleHovered
                                       ],
-                                      children: /* @__PURE__ */ jsx(Text, { style: [styles22.dayText, { color: dayTextColor }], children: day.getDate() })
+                                      children: /* @__PURE__ */ jsx(Text, { style: [styles24.dayText, { color: dayTextColor }], children: day.getDate() })
                                     }
                                   ),
-                                  isToday && !isSelectedEndpoint ? /* @__PURE__ */ jsx(View, { style: styles22.todayDot }) : null
+                                  isToday && !isSelectedEndpoint ? /* @__PURE__ */ jsx(View, { style: styles24.todayDot }) : null
                                 ]
                               },
                               dayIndex
@@ -33621,7 +33879,7 @@ var DatePicker = forwardRef(
     );
   }
 );
-var styles22 = StyleSheet.create({
+var styles24 = StyleSheet.create({
   root: {
     width: DEFAULT_WIDTH,
     gap: 8,
@@ -33726,8 +33984,8 @@ var styles22 = StyleSheet.create({
     backgroundColor: colors.grey500
   },
   iconSlot: {
-    width: ICON_SIZE10,
-    height: ICON_SIZE10,
+    width: ICON_SIZE11,
+    height: ICON_SIZE11,
     alignItems: "center",
     justifyContent: "center",
     flexShrink: 0
@@ -33740,10 +33998,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 +34031,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 +34054,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 +34077,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"
   },
@@ -33847,7 +34130,7 @@ var styles22 = StyleSheet.create({
 });
 var SIZE = 48;
 var PADDING = 12;
-var ICON_SIZE11 = 24;
+var ICON_SIZE12 = 24;
 var RADIUS = 64;
 var FloatingActionButton = forwardRef(function FloatingActionButton2({ onPress, disabled = false, icon, accessibilityLabel = "Add", style, className, ...rest }, forwardedRef) {
   const containerRef = useRef(null);
@@ -33865,12 +34148,12 @@ var FloatingActionButton = forwardRef(function FloatingActionButton2({ onPress,
       accessibilityRole: "button",
       accessibilityLabel,
       accessibilityState: { disabled },
-      style: [styles23.base, disabled && styles23.disabled, style],
-      children: icon ?? /* @__PURE__ */ jsx(PlusIcon, { color: colors.white, size: ICON_SIZE11, strokeWidth: 2 })
+      style: [styles25.base, disabled && styles25.disabled, style],
+      children: icon ?? /* @__PURE__ */ jsx(PlusIcon, { color: colors.white, size: ICON_SIZE12, strokeWidth: 2 })
     }
   );
 });
-var styles23 = StyleSheet.create({
+var styles25 = StyleSheet.create({
   base: {
     width: SIZE,
     height: SIZE,
@@ -33945,7 +34228,7 @@ var Modal = forwardRef(function Modal2({
     View,
     {
       ref: setContentRef,
-      style: [styles24.content, contentStyle],
+      style: [styles26.content, contentStyle],
       onStartShouldSetResponder: () => true,
       children
     }
@@ -33977,7 +34260,7 @@ var Modal = forwardRef(function Modal2({
       animationType: "fade",
       onRequestClose: onClose,
       statusBarTranslucent: true,
-      children: /* @__PURE__ */ jsxs(View, { style: styles24.root, accessibilityViewIsModal: true, children: [
+      children: /* @__PURE__ */ jsxs(View, { style: styles26.root, accessibilityViewIsModal: true, children: [
         /* @__PURE__ */ jsx(
           Pressable,
           {
@@ -33985,7 +34268,7 @@ var Modal = forwardRef(function Modal2({
             accessibilityLabel: backdropAccessibilityLabel,
             disabled: !closeOnBackdropPress,
             onPress: closeOnBackdropPress ? onClose : void 0,
-            style: styles24.backdrop
+            style: styles26.backdrop
           }
         ),
         content
@@ -33993,7 +34276,7 @@ var Modal = forwardRef(function Modal2({
     }
   );
 });
-var styles24 = StyleSheet.create({
+var styles26 = StyleSheet.create({
   root: {
     flex: 1,
     alignItems: "center",
@@ -34134,6 +34417,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,35 +34435,45 @@ 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);
-  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,
+  const fieldChromeStyle = [
+    styles27.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" ? styles27.fieldWeb : null,
+    fieldStyle
+  ];
+  return /* @__PURE__ */ jsxs(View, { ref: rootRef, style: [styles27.root, disabled && styles27.disabled, style], children: [
+    showLabel && label ? /* @__PURE__ */ jsx(Pressable, { disabled, onPress: focusInput, style: styles27.labelPressable, children: /* @__PURE__ */ jsx(Text, { style: [styles27.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,
+          hasLeftIcon ? /* @__PURE__ */ jsx(View, { style: [styles27.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }], children: leftIconNode }) : null,
           /* @__PURE__ */ jsx(
             TextInput,
             {
               ref: setInputRef,
               ...textInputProps,
+              nativeID: inputDomId,
               value: isControlled ? value : void 0,
               defaultValue: isControlled ? void 0 : defaultValue,
               editable: !disabled,
@@ -34197,11 +34492,11 @@ var Input = forwardRef(function Input2({
                 onBlur?.(event);
               },
               style: [
-                styles25.input,
+                styles27.input,
                 metrics.text,
                 { color: chrome.textColor },
-                Platform.OS === "web" ? styles25.inputWeb : null,
-                Platform.OS === "android" ? styles25.inputAndroid : null,
+                Platform.OS === "web" ? styles27.inputWeb : null,
+                Platform.OS === "android" ? styles27.inputAndroid : null,
                 inputStyle
               ],
               accessibilityLabel: resolvedAccessibilityLabel,
@@ -34213,20 +34508,29 @@ var Input = forwardRef(function Input2({
             {
               onPress: onRightIconPress,
               disabled,
-              style: [styles25.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }],
+              style: [styles27.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }],
               accessibilityRole: "button",
               accessibilityLabel: rightIconAccessibilityLabel,
               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: [styles27.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }],
+              children: rightIconNode
+            }
+          ) : null
         ]
       }
     ),
-    showHint && hint ? /* @__PURE__ */ jsx(Text, { style: [styles25.hint, { color: chrome.hintColor }], children: hint }) : null
+    showHint && hint ? /* @__PURE__ */ jsx(Text, { style: [styles27.hint, { color: chrome.hintColor }], children: hint }) : null
   ] });
 });
-var styles25 = StyleSheet.create({
+var styles27 = StyleSheet.create({
   root: {
     width: DEFAULT_WIDTH2,
     gap: 8,
@@ -34235,6 +34539,9 @@ var styles25 = StyleSheet.create({
   disabled: {
     opacity: 0.6
   },
+  labelPressable: {
+    alignSelf: "flex-start"
+  },
   label: {
     ...inputTypography.label
   },
@@ -34243,13 +34550,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
@@ -34382,8 +34697,8 @@ var VerificationCodeInput = forwardRef(function VerificationCodeInput2({
   const cellGap = mobile ? MOBILE_GAP : DESKTOP_GAP;
   const rowWidth = cellWidth * safeLength + cellGap * Math.max(0, safeLength - 1);
   const showErrorMessage = Boolean(error && errorMessage);
-  return /* @__PURE__ */ jsxs(View, { ...viewProps, ref: rootRef, style: [styles26.wrapper, disabled && styles26.disabled, style], children: [
-    /* @__PURE__ */ jsx(View, { style: [styles26.row, { width: rowWidth, maxWidth: "100%", gap: cellGap }], children: Array.from({ length: safeLength }, (_, index) => {
+  return /* @__PURE__ */ jsxs(View, { ...viewProps, ref: rootRef, style: [styles28.wrapper, disabled && styles28.disabled, style], children: [
+    /* @__PURE__ */ jsx(View, { style: [styles28.row, { width: rowWidth, maxWidth: "100%", gap: cellGap }], children: Array.from({ length: safeLength }, (_, index) => {
       const active = focusedIndex === index;
       const borderColor = error ? colors.red : active ? colors.primary : colors.grey600;
       return /* @__PURE__ */ jsx(
@@ -34408,15 +34723,15 @@ var VerificationCodeInput = forwardRef(function VerificationCodeInput2({
           onSubmitEditing: () => onSubmit?.(currentCode),
           selectTextOnFocus: true,
           style: [
-            styles26.cell,
+            styles28.cell,
             {
               width: cellWidth,
               height: cellHeight,
               borderColor,
               color: error ? colors.red : colors.white
             },
-            Platform.OS === "web" ? styles26.cellWeb : null,
-            Platform.OS === "android" ? styles26.cellAndroid : null,
+            Platform.OS === "web" ? styles28.cellWeb : null,
+            Platform.OS === "android" ? styles28.cellAndroid : null,
             inputStyle
           ],
           value: currentCode[index] ?? ""
@@ -34424,10 +34739,10 @@ var VerificationCodeInput = forwardRef(function VerificationCodeInput2({
         index
       );
     }) }),
-    showErrorMessage ? /* @__PURE__ */ jsx(Text, { accessibilityLiveRegion: "assertive", style: styles26.errorMessage, children: errorMessage }) : null
+    showErrorMessage ? /* @__PURE__ */ jsx(Text, { accessibilityLiveRegion: "assertive", style: styles28.errorMessage, children: errorMessage }) : null
   ] });
 });
-var styles26 = StyleSheet.create({
+var styles28 = StyleSheet.create({
   wrapper: {
     minWidth: 0,
     alignSelf: "center",
@@ -34478,7 +34793,7 @@ var TRIGGER_RADIUS2 = 60;
 var MENU_RADIUS3 = 24;
 var MENU_MAX_LIST_HEIGHT = 248;
 var ITEM_RADIUS2 = 12;
-var ICON_SIZE12 = 20;
+var ICON_SIZE13 = 20;
 var CHIP_GAP = 6;
 var FALLBACK_ELLIPSIS_WIDTH = 20;
 function itemBackground(state) {
@@ -34551,25 +34866,25 @@ function MultiValueChips({ options, disabled, onRemove }) {
     const next = Math.ceil(event.nativeEvent.layout.width);
     setEllipsisWidth((current) => current === next ? current : next);
   };
-  return /* @__PURE__ */ jsxs(View, { style: styles27.multiValueRoot, children: [
-    /* @__PURE__ */ jsxs(View, { pointerEvents: "none", style: styles27.measureRow, children: [
+  return /* @__PURE__ */ jsxs(View, { style: styles29.multiValueRoot, children: [
+    /* @__PURE__ */ jsxs(View, { pointerEvents: "none", style: styles29.measureRow, children: [
       options.map((option) => /* @__PURE__ */ jsxs(
         View,
         {
-          style: styles27.chip,
+          style: styles29.chip,
           onLayout: (event) => handleChipLayout(option.value, event),
           children: [
-            /* @__PURE__ */ jsx(Text, { style: styles27.chipLabel, numberOfLines: 1, children: option.label }),
-            /* @__PURE__ */ jsx(Text, { style: styles27.chipRemove, children: "\xD7" })
+            /* @__PURE__ */ jsx(Text, { style: styles29.chipLabel, numberOfLines: 1, children: option.label }),
+            /* @__PURE__ */ jsx(Text, { style: styles29.chipRemove, children: "\xD7" })
           ]
         },
         `measure-${option.value}`
       )),
-      /* @__PURE__ */ jsx(View, { style: styles27.ellipsis, onLayout: handleEllipsisLayout, children: /* @__PURE__ */ jsx(Text, { style: styles27.ellipsisText, children: "..." }) })
+      /* @__PURE__ */ jsx(View, { style: styles29.ellipsis, onLayout: handleEllipsisLayout, children: /* @__PURE__ */ jsx(Text, { style: styles29.ellipsisText, children: "..." }) })
     ] }),
-    /* @__PURE__ */ jsxs(View, { style: styles27.chipsRow, onLayout: handleContainerLayout, children: [
-      visible.map((option) => /* @__PURE__ */ jsxs(View, { style: styles27.chip, children: [
-        /* @__PURE__ */ jsx(Text, { style: styles27.chipLabel, numberOfLines: 1, children: option.label }),
+    /* @__PURE__ */ jsxs(View, { style: styles29.chipsRow, onLayout: handleContainerLayout, children: [
+      visible.map((option) => /* @__PURE__ */ jsxs(View, { style: styles29.chip, children: [
+        /* @__PURE__ */ jsx(Text, { style: styles29.chipLabel, numberOfLines: 1, children: option.label }),
         /* @__PURE__ */ jsx(
           Pressable,
           {
@@ -34581,11 +34896,11 @@ function MultiValueChips({ options, disabled, onRemove }) {
             hitSlop: 6,
             accessibilityRole: "button",
             accessibilityLabel: `Remove ${option.label}`,
-            children: /* @__PURE__ */ jsx(Text, { style: styles27.chipRemove, children: "\xD7" })
+            children: /* @__PURE__ */ jsx(Text, { style: styles29.chipRemove, children: "\xD7" })
           }
         )
       ] }, option.value)),
-      hasOverflow ? /* @__PURE__ */ jsx(View, { style: styles27.ellipsis, children: /* @__PURE__ */ jsx(Text, { style: styles27.ellipsisText, children: "..." }) }) : null
+      hasOverflow ? /* @__PURE__ */ jsx(View, { style: styles29.ellipsis, children: /* @__PURE__ */ jsx(Text, { style: styles29.ellipsisText, children: "..." }) }) : null
     ] })
   ] });
 }
@@ -34612,6 +34927,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 +34955,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 +34975,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 +35001,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);
@@ -34795,7 +35156,7 @@ var Select = forwardRef(
       setOpen
     ]);
     const leftIconNode = renderStatefulIcon(leftIcon, UserIcon, {
-      size: ICON_SIZE12,
+      size: ICON_SIZE13,
       color: error ? colors.red : colors.primary
     });
     const hasLeftIcon = showLeftIcon || leftIcon != null;
@@ -34810,11 +35171,11 @@ var Select = forwardRef(
       {
         ...rest,
         ref: setRootRef,
-        style: [styles27.root, isOpen && styles27.rootOpen, disabled && styles27.disabled, style],
+        style: [styles29.root, isOpen && styles29.rootOpen, disabled && styles29.disabled, style],
         accessibilityState: { disabled, expanded: isOpen },
         children: [
-          showLabel && label ? /* @__PURE__ */ jsx(Text, { style: [styles27.label, { color: labelColor }], children: label }) : null,
-          /* @__PURE__ */ jsxs(View, { style: [styles27.triggerWrap, isOpen && styles27.triggerWrapOpen], children: [
+          showLabel && label ? /* @__PURE__ */ jsx(Text, { style: [styles29.label, { color: labelColor }], children: label }) : null,
+          /* @__PURE__ */ jsxs(View, { style: [styles29.triggerWrap, isOpen && styles29.triggerWrapOpen], children: [
             /* @__PURE__ */ jsxs(
               Pressable,
               {
@@ -34825,97 +35186,108 @@ var Select = forwardRef(
                 accessibilityLabel: resolvedAccessibilityLabel,
                 accessibilityState: { disabled, expanded: isOpen },
                 style: [
-                  styles27.trigger,
+                  styles29.trigger,
                   {
                     borderColor: triggerBorderColor,
                     backgroundColor: colors.grey700
                   }
                 ],
                 children: [
-                  hasLeftIcon ? /* @__PURE__ */ jsx(View, { style: styles27.iconSlot, children: leftIconNode }) : null,
-                  /* @__PURE__ */ jsx(View, { style: styles27.triggerContent, children: multiple && hasValue ? /* @__PURE__ */ jsx(
+                  hasLeftIcon ? /* @__PURE__ */ jsx(View, { style: styles29.iconSlot, children: leftIconNode }) : null,
+                  /* @__PURE__ */ jsx(View, { style: styles29.triggerContent, children: multiple && hasValue ? /* @__PURE__ */ jsx(
                     MultiValueChips,
                     {
                       options: selectedOptions,
                       disabled,
                       onRemove: handleRemoveChip
                     }
-                  ) : /* @__PURE__ */ jsx(Text, { style: [styles27.triggerText, { color: triggerTextColor }], numberOfLines: 1, children: multiple ? placeholder : singleLabel }) }),
-                  /* @__PURE__ */ jsx(View, { style: [styles27.iconSlot, isOpen && styles27.chevronOpen], children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: ICON_SIZE12, color: isOpen ? colors.primary : colors.grey100 }) })
+                  ) : /* @__PURE__ */ jsx(Text, { style: [styles29.triggerText, { color: triggerTextColor }], numberOfLines: 1, children: multiple ? placeholder : singleLabel }) }),
+                  /* @__PURE__ */ jsx(View, { style: [styles29.iconSlot, isOpen && styles29.chevronOpen], children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: ICON_SIZE13, color: isOpen ? colors.primary : colors.grey100 }) })
                 ]
               }
             ),
-            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: [
+                  styles29.menu,
+                  menuAlignEnd ? styles29.menuAlignEnd : styles29.menuAlignStart,
+                  menuPlaceAbove ? styles29.menuAbove : styles29.menuBelow,
+                  menuStyle
+                ],
+                children: [
+                  showSearch ? /* @__PURE__ */ jsxs(View, { style: styles29.searchField, children: [
+                    /* @__PURE__ */ jsx(View, { style: styles29.iconSlot, children: /* @__PURE__ */ jsx(SearchIcon, { size: ICON_SIZE13, color: colors.grey100 }) }),
+                    /* @__PURE__ */ jsx(
+                      TextInput,
+                      {
+                        ref: searchInputRef,
+                        value: searchQuery,
+                        onChangeText: handleSearchChange,
+                        editable: !disabled,
+                        placeholder: searchPlaceholder,
+                        placeholderTextColor: colors.grey100,
+                        style: [
+                          styles29.searchInput,
+                          Platform.OS === "web" ? styles29.searchInputWeb : null,
+                          Platform.OS === "android" ? styles29.searchInputAndroid : null
+                        ],
+                        accessibilityLabel: searchPlaceholder
+                      }
+                    )
+                  ] }) : null,
+                  /* @__PURE__ */ jsxs(
+                    ScrollView,
+                    {
+                      style: styles29.optionList,
+                      contentContainerStyle: styles29.optionListContent,
+                      keyboardShouldPersistTaps: "handled",
+                      showsVerticalScrollIndicator: false,
+                      children: [
+                        loading ? /* @__PURE__ */ jsx(View, { style: styles29.statusRow, children: /* @__PURE__ */ jsx(Text, { style: styles29.statusText, children: "Loading..." }) }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsx(View, { style: styles29.statusRow, children: /* @__PURE__ */ jsx(Text, { style: styles29.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: [
+                                styles29.item,
+                                {
+                                  backgroundColor: itemBackground(visualState)
+                                }
+                              ],
+                              children: [
+                                multiple ? /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: styles29.itemCheckbox, children: /* @__PURE__ */ jsx(Checkbox, { value: isSelected, variant: "light" }) }) : null,
+                                /* @__PURE__ */ jsx(Text, { style: styles29.itemLabel, numberOfLines: 1, children: option.label })
+                              ]
+                            },
+                            option.value
+                          );
+                        })
+                      ]
+                    }
+                  )
+                ]
+              }
+            ) : null
           ] }),
-          showHint && hint ? /* @__PURE__ */ jsx(Text, { style: [styles27.hint, { color: hintColor }], children: hint }) : null
+          showHint && hint ? /* @__PURE__ */ jsx(Text, { style: [styles29.hint, { color: hintColor }], children: hint }) : null
         ]
       }
     );
   }
 );
-var styles27 = StyleSheet.create({
+var styles29 = StyleSheet.create({
   root: {
     width: DEFAULT_WIDTH3,
     gap: 8,
@@ -35005,8 +35377,8 @@ var styles27 = StyleSheet.create({
     lineHeight: 16
   },
   iconSlot: {
-    width: ICON_SIZE12,
-    height: ICON_SIZE12,
+    width: ICON_SIZE13,
+    height: ICON_SIZE13,
     alignItems: "center",
     justifyContent: "center",
     flexShrink: 0
@@ -35016,10 +35388,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 +35403,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 +35558,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,
+  return /* @__PURE__ */ jsxs(View, { ref: rootRef, style: [styles30.root, disabled && styles30.disabled, style], children: [
+    showLabel && label ? /* @__PURE__ */ jsx(Pressable, { disabled, onPress: focusInput, style: styles30.labelPressable, children: /* @__PURE__ */ jsx(Text, { style: [styles30.label, { color: chrome.labelColor }], children: label }) }) : null,
     /* @__PURE__ */ jsx(
-      View,
+      Pressable,
       {
+        accessibilityRole: "none",
+        disabled,
+        onPress: focusInput,
         style: [
-          styles28.field,
+          styles30.field,
           {
             borderColor: chrome.borderColor,
             backgroundColor: chrome.backgroundColor
           },
+          Platform.OS === "web" ? styles30.fieldWeb : null,
           fieldStyle
         ],
         children: /* @__PURE__ */ jsx(
@@ -35195,6 +35594,7 @@ var Textarea = forwardRef(function Textarea2({
           {
             ref: setInputRef,
             ...textInputProps,
+            nativeID: inputDomId,
             multiline: true,
             textAlignVertical: "top",
             value: isControlled ? value : void 0,
@@ -35215,11 +35615,11 @@ var Textarea = forwardRef(function Textarea2({
               onBlur?.(event);
             },
             style: [
-              styles28.input,
+              styles30.input,
               textareaTypography.field,
               { color: chrome.textColor },
-              Platform.OS === "web" ? styles28.inputWeb : null,
-              Platform.OS === "android" ? styles28.inputAndroid : null,
+              Platform.OS === "web" ? styles30.inputWeb : null,
+              Platform.OS === "android" ? styles30.inputAndroid : null,
               inputStyle
             ],
             accessibilityLabel: resolvedAccessibilityLabel,
@@ -35228,10 +35628,10 @@ var Textarea = forwardRef(function Textarea2({
         )
       }
     ),
-    showHint && hint ? /* @__PURE__ */ jsx(Text, { style: [styles28.hint, { color: chrome.hintColor }], children: hint }) : null
+    showHint && hint ? /* @__PURE__ */ jsx(Text, { style: [styles30.hint, { color: chrome.hintColor }], children: hint }) : null
   ] });
 });
-var styles28 = StyleSheet.create({
+var styles30 = StyleSheet.create({
   root: {
     width: DEFAULT_WIDTH4,
     gap: 8,
@@ -35240,6 +35640,9 @@ var styles28 = StyleSheet.create({
   disabled: {
     opacity: 0.6
   },
+  labelPressable: {
+    alignSelf: "flex-start"
+  },
   label: {
     ...textareaTypography.label
   },
@@ -35252,14 +35655,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
@@ -35331,13 +35741,13 @@ var Toggle = forwardRef(function Toggle2({
       accessibilityRole: "switch",
       accessibilityLabel: resolvedAccessibilityLabel,
       accessibilityState: { checked: isActive, disabled },
-      style: [styles29.pressable, disabled && styles29.disabled, style],
+      style: [styles31.pressable, disabled && styles31.disabled, style],
       children: [
         /* @__PURE__ */ jsx(
           Animated.View,
           {
             style: [
-              styles29.track,
+              styles31.track,
               {
                 backgroundColor: trackBackgroundColor
               }
@@ -35346,7 +35756,7 @@ var Toggle = forwardRef(function Toggle2({
               Animated.View,
               {
                 style: [
-                  styles29.thumb,
+                  styles31.thumb,
                   {
                     transform: [{ translateX: thumbTranslateX }]
                   }
@@ -35355,12 +35765,12 @@ var Toggle = forwardRef(function Toggle2({
             )
           }
         ),
-        labelContent != null && labelContent !== false ? typeof labelContent === "string" || typeof labelContent === "number" ? /* @__PURE__ */ jsx(Text, { style: [styles29.label, labelStyle], children: labelContent }) : labelContent : null
+        labelContent != null && labelContent !== false ? typeof labelContent === "string" || typeof labelContent === "number" ? /* @__PURE__ */ jsx(Text, { style: [styles31.label, labelStyle], children: labelContent }) : labelContent : null
       ]
     }
   );
 });
-var styles29 = StyleSheet.create({
+var styles31 = StyleSheet.create({
   pressable: {
     flexDirection: "row",
     alignItems: "center",
@@ -35413,13 +35823,13 @@ var ToggleRow = forwardRef(function ToggleRow2({
       ...rest,
       ref: setContainerRef,
       style: [
-        styles30.root,
+        styles32.root,
         {
           minHeight: isDesktop ? 65 : 57,
           paddingTop: isDesktop ? 20 : 16,
           paddingBottom: isDesktop ? 20 : 16
         },
-        !showBorder && styles30.noBorder,
+        !showBorder && styles32.noBorder,
         style
       ],
       children: [
@@ -35427,7 +35837,7 @@ var ToggleRow = forwardRef(function ToggleRow2({
           Text,
           {
             style: [
-              styles30.label,
+              styles32.label,
               {
                 fontSize: labelSize,
                 lineHeight: isDesktop ? 20 : 18,
@@ -35452,7 +35862,7 @@ var ToggleRow = forwardRef(function ToggleRow2({
     }
   );
 });
-var styles30 = StyleSheet.create({
+var styles32 = StyleSheet.create({
   root: {
     width: "100%",
     flexDirection: "row",
@@ -35524,21 +35934,21 @@ var RatingInput = forwardRef(
       {
         ...rest,
         ref: setContainerRef,
-        style: [styles31.root, disabled && styles31.disabled, style],
+        style: [styles33.root, disabled && styles33.disabled, style],
         children: [
-          showValue ? /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [styles31.value, valueStyle], children: selectedValue.toFixed(precision) }) : null,
+          showValue ? /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [styles33.value, valueStyle], children: selectedValue.toFixed(precision) }) : null,
           /* @__PURE__ */ jsx(
             View,
             {
               accessibilityRole: readOnly ? "image" : "radiogroup",
               accessibilityLabel: resolvedAccessibilityLabel,
               accessibilityState: { disabled },
-              style: [styles31.stars, { gap: resolvedStarGap }],
+              style: [styles33.stars, { gap: resolvedStarGap }],
               children: Array.from({ length: STAR_COUNT }, (_, index) => {
                 const starValue = index + 1;
                 const isSelected = starValue <= selectedStarCount;
                 const icon = isSelected ? /* @__PURE__ */ jsx(StarFilledIcon, { size: iconWidth, height: iconHeight }) : /* @__PURE__ */ jsx(StarIcon, { size: iconWidth, height: iconHeight });
-                const itemStyle = [styles31.starItem, { width: size, height: size }];
+                const itemStyle = [styles33.starItem, { width: size, height: size }];
                 if (readOnly) {
                   return /* @__PURE__ */ jsx(View, { style: itemStyle, children: icon }, starValue);
                 }
@@ -35564,7 +35974,7 @@ var RatingInput = forwardRef(
     );
   }
 );
-var styles31 = StyleSheet.create({
+var styles33 = StyleSheet.create({
   root: {
     flexDirection: "row",
     alignItems: "center",
@@ -35628,19 +36038,19 @@ var CommentCard = forwardRef(
       setExpanded(next);
       onExpandedChange?.(next);
     };
-    return /* @__PURE__ */ jsxs(View, { ...rest, ref: setContainerRef, style: [styles32.root, style], children: [
-      /* @__PURE__ */ jsxs(View, { style: styles32.header, children: [
-        /* @__PURE__ */ jsx(View, { style: styles32.avatar, children: hasImage ? /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsxs(View, { ...rest, ref: setContainerRef, style: [styles34.root, style], children: [
+      /* @__PURE__ */ jsxs(View, { style: styles34.header, children: [
+        /* @__PURE__ */ jsx(View, { style: styles34.avatar, children: hasImage ? /* @__PURE__ */ jsx(
           Image,
           {
             source: { uri: imageUrl ?? void 0 },
-            style: styles32.avatarImage,
+            style: styles34.avatarImage,
             onError: () => setImageFailed(true)
           }
         ) : /* @__PURE__ */ jsx(UserIcon, { size: 20, color: colors.primary }) }),
-        /* @__PURE__ */ jsxs(View, { style: styles32.identity, children: [
-          /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles32.name, children: userName }),
-          /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles32.date, children: date })
+        /* @__PURE__ */ jsxs(View, { style: styles34.identity, children: [
+          /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles34.name, children: userName }),
+          /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles34.date, children: date })
         ] }),
         /* @__PURE__ */ jsx(RatingInput, { value: rating, readOnly: true, showValue: false, size: 16 })
       ] }),
@@ -35648,7 +36058,7 @@ var CommentCard = forwardRef(
         Text,
         {
           numberOfLines: expanded ? void 0 : maxCommentLines,
-          style: [styles32.comment, commentStyle],
+          style: [styles34.comment, commentStyle],
           children: commentText
         }
       ),
@@ -35661,14 +36071,14 @@ var CommentCard = forwardRef(
           hitSlop: 6,
           onHoverIn: () => setActionHovered(true),
           onHoverOut: () => setActionHovered(false),
-          style: styles32.action,
+          style: styles34.action,
           children: /* @__PURE__ */ jsx(
             Text,
             {
               style: [
-                styles32.actionText,
-                expanded && styles32.closeActionText,
-                actionHovered && (expanded ? styles32.closeActionTextHovered : styles32.openActionTextHovered)
+                styles34.actionText,
+                expanded && styles34.closeActionText,
+                actionHovered && (expanded ? styles34.closeActionTextHovered : styles34.openActionTextHovered)
               ],
               children: expanded ? readLessLabel : readMoreLabel
             }
@@ -35678,7 +36088,7 @@ var CommentCard = forwardRef(
     ] });
   }
 );
-var styles32 = StyleSheet.create({
+var styles34 = StyleSheet.create({
   root: {
     width: CARD_WIDTH2,
     minHeight: CARD_MIN_HEIGHT,
@@ -36117,7 +36527,7 @@ var Range = forwardRef(function Range2({
       ...rest,
       ref: setRootRef,
       onLayout,
-      style: [styles33.root, disabled && styles33.disabled, style],
+      style: [styles35.root, disabled && styles35.disabled, style],
       children: [
         /* @__PURE__ */ jsxs(
           Pressable,
@@ -36131,16 +36541,16 @@ var Range = forwardRef(function Range2({
               updateNearestFromTrack(event.nativeEvent.offsetX);
             } : void 0,
             onPress: Platform.OS === "web" ? void 0 : handleTrackPress,
-            style: styles33.sliderPlane,
+            style: styles35.sliderPlane,
             tabIndex: -1,
             children: [
-              /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: styles33.track }),
+              /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: styles35.track }),
               /* @__PURE__ */ jsx(
                 View,
                 {
                   pointerEvents: "none",
                   style: [
-                    styles33.activeTrack,
+                    styles35.activeTrack,
                     {
                       left: TRACK_HORIZONTAL_INSET + fromOffset,
                       width: toOffset - fromOffset + THUMB_SIZE2
@@ -36182,9 +36592,9 @@ var Range = forwardRef(function Range2({
                   onAccessibilityAction: (event) => handleAccessibilityAction(event, effectiveFrom, updateFromInput),
                   pointerEvents: disabled ? "none" : "auto",
                   style: [
-                    styles33.thumb,
-                    Platform.OS === "web" && styles33.thumbWeb,
-                    focusedThumb === "from" && Platform.OS === "web" && styles33.thumbFocusedWeb,
+                    styles35.thumb,
+                    Platform.OS === "web" && styles35.thumbWeb,
+                    focusedThumb === "from" && Platform.OS === "web" && styles35.thumbFocusedWeb,
                     { left: TRACK_HORIZONTAL_INSET + fromOffset }
                   ],
                   tabIndex: disabled ? -1 : 0
@@ -36224,9 +36634,9 @@ var Range = forwardRef(function Range2({
                   onAccessibilityAction: (event) => handleAccessibilityAction(event, effectiveTo, updateToInput),
                   pointerEvents: disabled ? "none" : "auto",
                   style: [
-                    styles33.thumb,
-                    Platform.OS === "web" && styles33.thumbWeb,
-                    focusedThumb === "to" && Platform.OS === "web" && styles33.thumbFocusedWeb,
+                    styles35.thumb,
+                    Platform.OS === "web" && styles35.thumbWeb,
+                    focusedThumb === "to" && Platform.OS === "web" && styles35.thumbFocusedWeb,
                     { left: TRACK_HORIZONTAL_INSET + toOffset }
                   ],
                   tabIndex: disabled ? -1 : 0
@@ -36235,7 +36645,7 @@ var Range = forwardRef(function Range2({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs(View, { style: styles33.inputs, children: [
+        /* @__PURE__ */ jsxs(View, { style: styles35.inputs, children: [
           /* @__PURE__ */ jsx(
             RangeInput,
             {
@@ -36286,7 +36696,7 @@ function RangeInput({
   placeholder,
   value
 }) {
-  return /* @__PURE__ */ jsxs(View, { style: [styles33.inputField, focused && styles33.inputFieldFocused], children: [
+  return /* @__PURE__ */ jsxs(View, { style: [styles35.inputField, focused && styles35.inputFieldFocused], children: [
     /* @__PURE__ */ jsx(
       TextInput,
       {
@@ -36302,15 +36712,15 @@ function RangeInput({
         placeholder,
         placeholderTextColor: colors.grey150,
         returnKeyType: "done",
-        style: [styles33.input, Platform.OS === "web" && styles33.inputWeb],
+        style: [styles35.input, Platform.OS === "web" && styles35.inputWeb],
         tabIndex: disabled ? -1 : void 0,
         value
       }
     ),
-    /* @__PURE__ */ jsx(View, { style: styles33.currencySlot, children: /* @__PURE__ */ jsx(Text, { style: styles33.currency, children: currency }) })
+    /* @__PURE__ */ jsx(View, { style: styles35.currencySlot, children: /* @__PURE__ */ jsx(Text, { style: styles35.currency, children: currency }) })
   ] });
 }
-var styles33 = StyleSheet.create({
+var styles35 = StyleSheet.create({
   root: {
     width: DEFAULT_WIDTH5,
     gap: 15,
@@ -36519,6 +36929,6 @@ react-dom/cjs/react-dom.development.js:
    *)
 */
 
-export { AccordionItem, AccountHeader, AlertTriangleIcon, Amenity, AmenityIcon, AppleIcon, AreaExpandIcon, ArrowRightIcon, Avatar, AvatarSimple, BRAND_LOGO_COLORS, BRAND_LOGO_DEFAULT_HEIGHT, BRAND_LOGO_DEFAULT_WIDTH, Badge, BagIcon, BanIcon, BathroomsIcon, BedroomsIcon, BellIcon, BrandLogo, BuildingIcon, Button, CalendarIcon, CalendarOutlineIcon, CameraFilledIcon, CameraIcon, CardLocationIcon, CheckBadgeIcon, CheckIcon, CheckSuccessIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ClockFilledIcon, ClockIcon, CloseIcon, CommentCard, ContactInfoCard, CopyIcon, Counter, DatePicker, DownloadIcon, EditIcon, FacebookIcon, FavoritesButton, FiltersIcon, FloatingActionButton, FullscreenIcon, GlobeIcon, GooglePlayIcon, GuestsIcon, HeadsetIcon, HeartIcon, HelpCircleIcon, HideIcon, HomeIcon, Icon, InfoTile, Input, InstagramIcon, KeyIcon, LanguageSwitcher, LayoutGridIcon, LinkedInIcon, ListViewIcon, LocationPinIcon, LocationUserIcon, LockIcon, LogOutIcon, MailIcon, MapCollapseIcon, MapExpandIcon, MapViewIcon, MenuIcon, MenuItem, MenuLinesIcon, MinusIcon, Modal, NavigateIcon, NoSmokingIcon, PaginationDots, PawIcon, PhoneIcon, PlusIcon, QrCodeIcon, QuietHoursIcon, Range, RatingInput, RatingStarIcon, RefreshIcon, RefundStatusIcon, SaveHeartIcon, SearchIcon, SegmentedToggle, Select, SettingsIcon, ShareIcon, ShowIcon, Sidebar, SidebarIcon, SortIcon, StarFilledIcon, StarIcon, StatCard, StatusBadge, StepList, StepPager, Textarea, Toggle, ToggleRow, TooltipArrowIcon, TrashIcon, UserIcon, UsersAltIcon, VerificationCodeInput, VideoIcon, VideoOffIcon, WhatsAppIcon, ZoomOutIcon, abbreviateMonthName, avatarTypography, badgeTypography, buttonTypography, colors, commentCardTypography, counterTypography, datePickerTypography, defaultLanguageOptions, fonts, formatDate, formatDateDayShortMonth, getIconsByGroup, grey, iconGroupNames, iconGroups, iconNames, icons, inputTypography, languageSwitcherTypography, ratingTypography, resolvePopoverAlign, segmentedToggleTypography, selectTypography, statCardTypography, textareaTypography };
+export { AccordionItem, AccountHeader, AlertTriangleIcon, Amenity, AmenityIcon, AppleIcon, AreaExpandIcon, ArrowRightIcon, Avatar, AvatarSimple, BRAND_LOGO_COLORS, BRAND_LOGO_DEFAULT_HEIGHT, BRAND_LOGO_DEFAULT_WIDTH, Badge, BagIcon, BanIcon, BathroomsIcon, BedroomsIcon, BellIcon, BrandLogo, BuildingIcon, Button, CalendarIcon, CalendarOutlineIcon, CameraFilledIcon, CameraIcon, CardLocationIcon, CheckBadgeIcon, CheckIcon, CheckSuccessIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ClockFilledIcon, ClockIcon, CloseIcon, CommentCard, ContactInfoCard, CopyIcon, Counter, DatePicker, DownloadIcon, EditIcon, FacebookIcon, FavoritesButton, FiltersIcon, FloatingActionButton, FullscreenIcon, GlobeIcon, GooglePlayIcon, GuestsIcon, HeadsetIcon, HeartIcon, HelpCircleIcon, HideIcon, HomeIcon, Icon, IconStatusBadge, InfoCardV2, InfoTile, Input, InstagramIcon, KeyIcon, LanguageSwitcher, LayoutGridIcon, LinkedInIcon, ListViewIcon, LocationPinIcon, LocationUserIcon, LockIcon, LogOutIcon, MailIcon, MapCollapseIcon, MapExpandIcon, MapViewIcon, MenuIcon, MenuItem, MenuLinesIcon, MinusIcon, Modal, MoreHorizontalIcon, NavigateIcon, NoSmokingIcon, PaginationDots, PawIcon, PhoneIcon, PlusIcon, QrCodeIcon, QuietHoursIcon, Range, RatingInput, RatingStarIcon, RefreshIcon, RefundStatusIcon, SaveHeartIcon, SearchIcon, SegmentedToggle, Select, SettingsIcon, ShareIcon, ShowIcon, Sidebar, SidebarIcon, SortIcon, StarFilledIcon, StarIcon, StatCard, StatusBadge, StepList, StepPager, TableViewIcon, Textarea, Toggle, ToggleRow, TooltipArrowIcon, TrashIcon, UserIcon, UsersAltIcon, VerificationCodeInput, VideoIcon, VideoOffIcon, WhatsAppIcon, ZoomOutIcon, abbreviateMonthName, avatarTypography, badgeTypography, buttonTypography, colors, commentCardTypography, counterTypography, datePickerTypography, defaultLanguageOptions, fonts, formatDate, formatDateDayShortMonth, getIconsByGroup, grey, iconGroupNames, iconGroups, iconNames, icons, inputTypography, languageSwitcherTypography, ratingTypography, resolvePopoverAlign, segmentedToggleTypography, selectTypography, statCardTypography, textareaTypography };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map