@ecohouse/ui 0.1.34 → 0.1.36

package/dist/index.cjs

@@ -7403,7 +7403,7 @@ var require_react_dom_development = __commonJS({
         var HostPortal = 4;
         var HostComponent = 5;
         var HostText = 6;
-        var Fragment3 = 7;
+        var Fragment4 = 7;
         var Mode = 8;
         var ContextConsumer = 9;
         var ContextProvider = 10;
@@ -8558,7 +8558,7 @@ var require_react_dom_development = __commonJS({
               return "DehydratedFragment";
             case ForwardRef:
               return getWrappedName$1(type, type.render, "ForwardRef");
-            case Fragment3:
+            case Fragment4:
               return "Fragment";
             case HostComponent:
               return type;
@@ -9455,15 +9455,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)) + ":";
@@ -9474,19 +9474,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";
             }
@@ -9500,9 +9500,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;
@@ -16983,7 +16983,7 @@ var require_react_dom_development = __commonJS({
             }
           }
           function updateFragment2(returnFiber, current2, fragment, lanes, key) {
-            if (current2 === null || current2.tag !== Fragment3) {
+            if (current2 === null || current2.tag !== Fragment4) {
               var created = createFiberFromFragment(fragment, returnFiber.mode, lanes, key);
               created.return = returnFiber;
               return created;
@@ -17386,7 +17386,7 @@ var require_react_dom_development = __commonJS({
               if (child.key === key) {
                 var elementType = element.type;
                 if (elementType === REACT_FRAGMENT_TYPE) {
-                  if (child.tag === Fragment3) {
+                  if (child.tag === Fragment4) {
                     deleteRemainingChildren(returnFiber, child.sibling);
                     var existing = useFiber(child, element.props.children);
                     existing.return = returnFiber;
@@ -22860,7 +22860,7 @@ var require_react_dom_development = __commonJS({
               var _resolvedProps2 = workInProgress2.elementType === type ? _unresolvedProps2 : resolveDefaultProps(type, _unresolvedProps2);
               return updateForwardRef(current2, workInProgress2, type, _resolvedProps2, renderLanes2);
             }
-            case Fragment3:
+            case Fragment4:
               return updateFragment(current2, workInProgress2, renderLanes2);
             case Mode:
               return updateMode(current2, workInProgress2, renderLanes2);
@@ -23132,7 +23132,7 @@ var require_react_dom_development = __commonJS({
             case SimpleMemoComponent:
             case FunctionComponent:
             case ForwardRef:
-            case Fragment3:
+            case Fragment4:
             case Mode:
             case Profiler:
             case ContextConsumer:
@@ -27384,7 +27384,7 @@ var require_react_dom_development = __commonJS({
           return fiber;
         }
         function createFiberFromFragment(elements, mode, lanes, key) {
-          var fiber = createFiber(Fragment3, elements, key, mode);
+          var fiber = createFiber(Fragment4, elements, key, mode);
           fiber.lanes = lanes;
           return fiber;
         }
@@ -28619,8 +28619,8 @@ var languageSwitcherTypography = {
   fontFamily: fonts.sans,
   fontSize: 14,
   fontWeight: "600",
-  lineHeight: 19,
-  letterSpacing: 0
+  lineHeight: 14,
+  letterSpacing: 0.42
 };
 var counterTypography = {
   fontFamily: fonts.sans,
@@ -29415,9 +29415,9 @@ function HeadsetIcon({ size = 24, color = "#B76533", strokeWidth = 2 }) {
 }
 
 // src/icons/Globe/globePath.ts
-var GLOBE_PATH = "M18.3333 10C18.3333 14.6024 14.6024 18.3333 10 18.3333M18.3333 10C18.3333 5.39763 14.6024 1.66667 10 1.66667M18.3333 10H1.66667M10 18.3333C5.39763 18.3333 1.66667 14.6024 1.66667 10M10 18.3333C12.0833 16.0511 13.2675 13.0836 13.3333 10C13.2675 6.91643 12.0833 3.94892 10 1.66667M10 18.3333C7.91667 16.0511 6.73248 13.0836 6.66667 10C6.73248 6.91643 7.91667 3.94892 10 1.66667M1.66667 10C1.66667 5.39763 5.39763 1.66667 10 1.66667";
-function GlobeIcon({ size = 20, color = colors.primary, strokeWidth = 2 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Svg20__default.default, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+var GLOBE_PATH = "M1.3335 8.00004H14.6668M1.3335 8.00004C1.3335 11.6819 4.31826 14.6667 8.00016 14.6667M1.3335 8.00004C1.3335 4.31814 4.31826 1.33337 8.00016 1.33337M14.6668 8.00004C14.6668 11.6819 11.6821 14.6667 8.00016 14.6667M14.6668 8.00004C14.6668 4.31814 11.6821 1.33337 8.00016 1.33337M8.00016 1.33337C9.66768 3.15894 10.6153 5.52806 10.6668 8.00004C10.6153 10.472 9.66768 12.8411 8.00016 14.6667M8.00016 1.33337C6.33264 3.15894 5.38499 5.52806 5.3335 8.00004C5.38499 10.472 6.33264 12.8411 8.00016 14.6667";
+function GlobeIcon({ size = 16, color = colors.primary, strokeWidth = 1.5 }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Svg20__default.default, { width: size, height: size, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
     Svg20.Path,
     {
       d: GLOBE_PATH,
@@ -29485,7 +29485,7 @@ function InstagramIcon({ size = 20, color = colors.white }) {
 }
 
 // src/icons/Key/keyPath.ts
-var KEY_PATH = "M5.28673 10.0002L7.0545 11.768M7.6435 7.64301L9.41127 9.41078M10.0003 5.28624L11.768 7.05401M4.22553 11.0604L11.0609 4.22505C11.7209 3.56502 12.0513 3.235 12.4318 3.11136C12.7666 3.00259 13.127 3.00259 13.4618 3.11136C13.8421 3.23494 14.1718 3.56464 14.8311 4.22393L15.775 5.16785C16.4351 5.82788 16.7654 6.15867 16.8891 6.53922C16.9979 6.87396 16.9976 7.23381 16.8889 7.56855C16.7652 7.9491 16.4353 8.27937 15.7753 8.9394L8.93989 15.7748C8.27986 16.4348 7.94959 16.7647 7.56904 16.8884C7.2343 16.9971 6.87445 16.9974 6.53971 16.8886C6.15916 16.765 5.82837 16.4346 5.16834 15.7745L4.22441 14.8306C3.56513 14.1713 3.23542 13.8416 3.11185 13.4613C3.00308 13.1266 3.00308 12.7661 3.11185 12.4313C3.23549 12.0508 3.56551 11.7204 4.22553 11.0604Z";
+var KEY_PATH = "M14.1668 8.33333V6.66667C14.1668 4.36548 12.3013 2.5 10.0002 2.5C7.69898 2.5 5.8335 4.36548 5.8335 6.66667V8.33333M10.0002 12.0833V13.75M7.3335 17.5H12.6668C14.067 17.5 14.767 17.5 15.3018 17.2275C15.7722 16.9878 16.1547 16.6054 16.3943 16.135C16.6668 15.6002 16.6668 14.9001 16.6668 13.5V12.3333C16.6668 10.9332 16.6668 10.2331 16.3943 9.69836C16.1547 9.22795 15.7722 8.8455 15.3018 8.60582C14.767 8.33333 14.067 8.33333 12.6668 8.33333H7.3335C5.93336 8.33333 5.2333 8.33333 4.69852 8.60582C4.22811 8.8455 3.84566 9.22795 3.60598 9.69836C3.3335 10.2331 3.3335 10.9332 3.3335 12.3333V13.5C3.3335 14.9001 3.3335 15.6002 3.60598 16.135C3.84566 16.6054 4.22811 16.9878 4.69852 17.2275C5.2333 17.5 5.93336 17.5 7.3335 17.5Z";
 function KeyIcon({ size = 20, color = colors.primary, strokeWidth = 2 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(Svg20__default.default, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
     Svg20.Path,
@@ -29699,6 +29699,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__ */ jsxRuntime.jsx(Svg20__default.default, { width: size, height: size * ASPECT_RATIO, viewBox: "0 0 13 4", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+    Svg20.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 }) {
@@ -29924,6 +29944,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__ */ jsxRuntime.jsx(Svg20__default.default, { width: size, height: size, viewBox: "0 0 17 17", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+    Svg20.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 }) {
@@ -30049,6 +30084,7 @@ var icons = {
   menu: MenuIcon,
   menuLines: MenuLinesIcon,
   minus: MinusIcon,
+  moreHorizontal: MoreHorizontalIcon,
   navigate: NavigateIcon,
   noSmoking: NoSmokingIcon,
   paw: PawIcon,
@@ -30068,6 +30104,7 @@ var icons = {
   sort: SortIcon,
   star: StarIcon,
   starFilled: StarFilledIcon,
+  tableView: TableViewIcon,
   tooltipArrow: TooltipArrowIcon,
   trash: TrashIcon,
   user: UserIcon,
@@ -30092,7 +30129,8 @@ var iconGroups = {
     "mapView",
     "menu",
     "menuLines",
-    "navigate"
+    "navigate",
+    "tableView"
   ],
   actions: [
     "show",
@@ -30123,6 +30161,7 @@ var iconGroups = {
     "star",
     "starFilled",
     "minus",
+    "moreHorizontal",
     "plus",
     "refresh",
     "refundStatus",
@@ -30520,7 +30559,87 @@ var styles2 = reactNative.StyleSheet.create({
     flex: 1
   }
 });
-var ICON_SIZE2 = 16;
+var ICON_SLOT_SIZE = 41;
+var ICON_SIZE2 = 20;
+var InfoCardV2 = react.forwardRef(
+  function InfoCardV22({
+    label,
+    value,
+    icon: Icon2,
+    iconProps,
+    iconSize = ICON_SIZE2,
+    style,
+    className,
+    accessibilityLabel,
+    ...rest
+  }, forwardedRef) {
+    const containerRef = react.useRef(null);
+    const setContainerRef = react.useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
+    useApplyWebClassName(containerRef, className?.trim() || void 0);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      reactNative.View,
+      {
+        ...rest,
+        ref: setContainerRef,
+        accessibilityRole: "text",
+        accessibilityLabel: accessibilityLabel ?? `${label}. ${value}`,
+        style: [styles3.root, style],
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles3.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(Icon2, { ...iconProps, size: iconSize, color: iconProps?.color ?? colors.primary }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles3.content, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { numberOfLines: 1, style: styles3.label, children: label }),
+            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { numberOfLines: 1, style: styles3.value, children: value })
+          ] })
+        ]
+      }
+    );
+  }
+);
+var styles3 = reactNative.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 = reactNative.Platform.OS === "web" ? {
   backdropFilter: "blur(10px)",
@@ -30561,10 +30680,10 @@ var FavoritesButton = react.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__ */ jsxRuntime.jsx(
@@ -30572,7 +30691,7 @@ var FavoritesButton = react.forwardRef(
           {
             color: isActive ? colors.red : colors.white,
             fillOpacity: isActive ? 1 : 0,
-            size: ICON_SIZE2,
+            size: ICON_SIZE3,
             strokeWidth: 2
           }
         )
@@ -30580,7 +30699,7 @@ var FavoritesButton = react.forwardRef(
     );
   }
 );
-var styles3 = reactNative.StyleSheet.create({
+var styles4 = reactNative.StyleSheet.create({
   button: {
     padding: 12,
     gap: 10,
@@ -30599,6 +30718,44 @@ var styles3 = reactNative.StyleSheet.create({
     opacity: 0.5
   }
 });
+var webBlurStyle2 = reactNative.Platform.OS === "web" ? {
+  backdropFilter: "blur(10px)",
+  WebkitBackdropFilter: "blur(10px)"
+} : {};
+var IconStatusBadge = react.forwardRef(
+  function IconStatusBadge2({ label, icon: Icon2, iconProps, iconSize = 16, style, className, ...rest }, forwardedRef) {
+    const badgeRef = react.useRef(null);
+    const setBadgeRef = react.useMemo(() => mergeRefs(badgeRef, forwardedRef), [forwardedRef]);
+    useApplyWebClassName(badgeRef, className);
+    return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ...rest, ref: setBadgeRef, style: [styles5.root, webBlurStyle2, style], children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Icon2, { ...iconProps, size: iconSize }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { numberOfLines: 1, style: styles5.label, children: label })
+    ] });
+  }
+);
+var styles5 = reactNative.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 = [
@@ -30758,7 +30915,7 @@ var Avatar = react.forwardRef(function Avatar2({
   }, [isOpen, closeAndFocusTrigger]);
   const hasImage = Boolean(imageUrl) && !imageFailed;
   const resolvedAccessibilityLabel = accessibilityLabel ?? [name, email].filter(Boolean).join(", ");
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ref: wrapperRef, style: [styles4.wrapper, isOpen && styles4.wrapperOpen], children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ref: wrapperRef, style: [styles6.wrapper, isOpen && styles6.wrapperOpen], children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       reactNative.Pressable,
       {
@@ -30770,25 +30927,25 @@ var Avatar = react.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__ */ jsxRuntime.jsx(reactNative.View, { style: styles4.imageWrap, children: hasImage ? /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles6.imageWrap, children: hasImage ? /* @__PURE__ */ jsxRuntime.jsx(
             reactNative.Image,
             {
               source: { uri: imageUrl ?? void 0 },
-              style: styles4.image,
+              style: styles6.image,
               onError: () => setImageFailed(true)
             }
-          ) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles4.imageFallback, children: /* @__PURE__ */ jsxRuntime.jsx(UserIcon, { size: FALLBACK_ICON_SIZE, color: colors.primary }) }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles4.textColumn, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles4.name, numberOfLines: 1, children: name }),
-            email ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles4.email, numberOfLines: 1, children: email }) : null
+          ) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles6.imageFallback, children: /* @__PURE__ */ jsxRuntime.jsx(UserIcon, { size: FALLBACK_ICON_SIZE, color: colors.primary }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles6.textColumn, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles6.name, numberOfLines: 1, children: name }),
+            email ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles6.email, numberOfLines: 1, children: email }) : null
           ] }),
-          showChevron ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles4.chevronSlot, isOpen && styles4.chevronOpen], children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, { size: CHEVRON_SIZE, color: isOpen ? colors.primary : colors.grey100 }) }) : null
+          showChevron ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles6.chevronSlot, isOpen && styles6.chevronOpen], children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, { size: CHEVRON_SIZE, color: isOpen ? colors.primary : colors.grey100 }) }) : null
         ]
       }
     ),
-    hasMenu && isOpen ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles4.menu, menuWidth != null && { right: void 0, width: menuWidth }], children: resolvedMenuItems.map((item) => {
+    hasMenu && isOpen ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles6.menu, menuWidth != null && { right: void 0, width: menuWidth }], children: resolvedMenuItems.map((item) => {
       const itemKey = item.key ?? item.label;
       return /* @__PURE__ */ jsxRuntime.jsx(
         MenuItem,
@@ -30805,7 +30962,7 @@ var Avatar = react.forwardRef(function Avatar2({
     }) }) : null
   ] });
 });
-var styles4 = reactNative.StyleSheet.create({
+var styles6 = reactNative.StyleSheet.create({
   wrapper: {
     position: "relative",
     alignSelf: "flex-start"
@@ -30916,23 +31073,23 @@ var AvatarSimple = react.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__ */ jsxRuntime.jsx(reactNative.View, { style: styles5.avatar, children: showImage ? /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles7.avatar, children: showImage ? /* @__PURE__ */ jsxRuntime.jsx(
             reactNative.Image,
             {
               source: { uri: imageUrl ?? void 0 },
-              style: styles5.avatarImage,
+              style: styles7.avatarImage,
               onError: () => setImageFailed(true),
               accessibilityIgnoresInvertColors: true
             }
           ) : null }),
-          !compact ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles5.details, children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles5.textBlock, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles5.name, numberOfLines: 1, ellipsizeMode: "tail", children: name }),
-              /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles5.email, numberOfLines: 1, ellipsizeMode: "tail", children: email })
+          !compact ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles7.details, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles7.textBlock, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles7.name, numberOfLines: 1, ellipsizeMode: "tail", children: name }),
+              /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles7.email, numberOfLines: 1, ellipsizeMode: "tail", children: email })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx(
               reactNative.Pressable,
@@ -30941,7 +31098,7 @@ var AvatarSimple = react.forwardRef(
                 accessibilityRole: "button",
                 accessibilityLabel: logOutAccessibilityLabel,
                 hitSlop: 8,
-                style: styles5.logOutButton,
+                style: styles7.logOutButton,
                 children: /* @__PURE__ */ jsxRuntime.jsx(LogOutIcon, { color: colors.primary, size: LOG_OUT_SIZE, strokeWidth: 2 })
               }
             )
@@ -30951,7 +31108,7 @@ var AvatarSimple = react.forwardRef(
     );
   }
 );
-var styles5 = reactNative.StyleSheet.create({
+var styles7 = reactNative.StyleSheet.create({
   root: {
     flexDirection: "row",
     alignItems: "center",
@@ -31038,6 +31195,7 @@ var AccountHeader = react.forwardRef(
     onBackPress,
     onMenuPress,
     onNotificationsPress,
+    languageSlot,
     badge,
     backAccessibilityLabel = "Back",
     menuAccessibilityLabel = "Open menu",
@@ -31059,15 +31217,15 @@ var AccountHeader = react.forwardRef(
         ...webClassName(className),
         ref: setContainerRef,
         accessibilityRole: "header",
-        style: [styles6.base, style],
+        style: [styles8.base, style],
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs(
             reactNative.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__ */ jsxRuntime.jsx(
@@ -31077,7 +31235,7 @@ var AccountHeader = react.forwardRef(
                     accessibilityLabel: backAccessibilityLabel,
                     hitSlop: 8,
                     onPress: onBackPress,
-                    style: styles6.iconButton,
+                    style: styles8.iconButton,
                     children: /* @__PURE__ */ jsxRuntime.jsx(
                       ChevronLeftIcon,
                       {
@@ -31098,41 +31256,44 @@ var AccountHeader = react.forwardRef(
                     accessibilityLabel: menuAccessibilityLabel,
                     hitSlop: 8,
                     onPress: onMenuPress,
-                    style: styles6.menuButton,
+                    style: styles8.menuButton,
                     children: /* @__PURE__ */ jsxRuntime.jsx(MenuLinesIcon, { color: colors.white, size: MENU_ICON_SIZE, strokeWidth: 2 })
                   }
                 ) : null,
-                /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles6.titleRow, children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles8.titleRow, children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
                     reactNative.Text,
                     {
                       ...webClassName("account-header-title"),
                       numberOfLines: 1,
-                      style: [styles6.title, titleStyle],
+                      style: [styles8.title, titleStyle],
                       children: title
                     }
                   ),
-                  badge != null ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles6.badgeSlot, children: badge }) : null
+                  badge != null ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles8.badgeSlot, children: badge }) : null
                 ] })
               ]
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles6.end, children: /* @__PURE__ */ jsxRuntime.jsx(
-            reactNative.Pressable,
-            {
-              accessibilityRole: "button",
-              accessibilityLabel: notificationsAccessibilityLabel,
-              onPress: onNotificationsPress,
-              style: styles6.iconButton,
-              children: /* @__PURE__ */ jsxRuntime.jsx(BellIcon, { color: colors.white, size: ICON_BUTTON_ICON_SIZE, strokeWidth: 1.5 })
-            }
-          ) })
+          /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles8.end, children: [
+            languageSlot != null ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles8.languageSlot, children: languageSlot }) : null,
+            /* @__PURE__ */ jsxRuntime.jsx(
+              reactNative.Pressable,
+              {
+                accessibilityRole: "button",
+                accessibilityLabel: notificationsAccessibilityLabel,
+                onPress: onNotificationsPress,
+                style: styles8.iconButton,
+                children: /* @__PURE__ */ jsxRuntime.jsx(BellIcon, { color: colors.white, size: ICON_BUTTON_ICON_SIZE, strokeWidth: 1.5 })
+              }
+            )
+          ] })
         ]
       }
     );
   }
 );
-var styles6 = reactNative.StyleSheet.create({
+var styles8 = reactNative.StyleSheet.create({
   base: {
     height: HEADER_HEIGHT,
     width: "100%",
@@ -31146,7 +31307,9 @@ var styles6 = reactNative.StyleSheet.create({
     paddingLeft: 24,
     backgroundColor: colors.dark,
     borderBottomWidth: 1,
-    borderBottomColor: colors.grey700
+    borderBottomColor: colors.grey700,
+    zIndex: 40,
+    position: "relative"
   },
   start: {
     flex: 1,
@@ -31169,7 +31332,17 @@ var styles6 = reactNative.StyleSheet.create({
   },
   end: {
     flexShrink: 0,
-    marginLeft: RIGHT_GAP
+    marginLeft: RIGHT_GAP,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    zIndex: 50,
+    position: "relative"
+  },
+  languageSlot: {
+    flexShrink: 0,
+    zIndex: 50,
+    position: "relative"
   },
   iconButton: {
     width: ICON_BUTTON_SIZE,
@@ -31203,8 +31376,8 @@ var styles6 = reactNative.StyleSheet.create({
     flexShrink: 0
   }
 });
-var ICON_SIZE3 = 20;
-var webBlurStyle2 = reactNative.Platform.OS === "web" ? {
+var ICON_SIZE4 = 20;
+var webBlurStyle3 = reactNative.Platform.OS === "web" ? {
   backdropFilter: "blur(10.3px)",
   WebkitBackdropFilter: "blur(10.3px)"
 } : {};
@@ -31234,22 +31407,22 @@ var Badge = react.forwardRef(function Badge2({ label, variant = "default", icon:
       ...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__ */ jsxRuntime.jsx(reactNative.View, { style: styles7.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(Icon2, { size: ICON_SIZE3, color: preset.iconColor }) }) : null,
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles7.label, reactNative.Platform.OS === "android" ? styles7.labelAndroid : null], children: label })
+        Icon2 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles9.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(Icon2, { size: ICON_SIZE4, color: preset.iconColor }) }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles9.label, reactNative.Platform.OS === "android" ? styles9.labelAndroid : null], children: label })
       ]
     }
   );
 });
-var styles7 = reactNative.StyleSheet.create({
+var styles9 = reactNative.StyleSheet.create({
   base: {
     flexDirection: "row",
     alignItems: "center",
@@ -31270,8 +31443,8 @@ var styles7 = reactNative.StyleSheet.create({
     borderStyle: "solid"
   },
   iconSlot: {
-    width: ICON_SIZE3,
-    height: ICON_SIZE3,
+    width: ICON_SIZE4,
+    height: ICON_SIZE4,
     alignItems: "center",
     justifyContent: "center",
     flexShrink: 0
@@ -31298,7 +31471,7 @@ var toneConfig = {
     color: colors.red
   }
 };
-var webBlurStyle3 = reactNative.Platform.OS === "web" ? {
+var webBlurStyle4 = reactNative.Platform.OS === "web" ? {
   backdropFilter: "blur(39.5px)",
   WebkitBackdropFilter: "blur(39.5px)"
 } : {};
@@ -31315,14 +31488,14 @@ var StatusBadge = react.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__ */ jsxRuntime.jsx(
           reactNative.Text,
           {
             style: [
-              styles8.label,
+              styles10.label,
               { color: preset.color },
-              reactNative.Platform.OS === "android" ? styles8.labelAndroid : null
+              reactNative.Platform.OS === "android" ? styles10.labelAndroid : null
             ],
             children: label
           }
@@ -31331,7 +31504,7 @@ var StatusBadge = react.forwardRef(
     );
   }
 );
-var styles8 = reactNative.StyleSheet.create({
+var styles10 = reactNative.StyleSheet.create({
   base: {
     height: 28,
     minHeight: 28,
@@ -31383,7 +31556,7 @@ var PaginationDots = react.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__ */ jsxRuntime.jsx(
@@ -31396,8 +31569,8 @@ var PaginationDots = react.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
@@ -31407,7 +31580,7 @@ var PaginationDots = react.forwardRef(
     );
   }
 );
-var styles9 = reactNative.StyleSheet.create({
+var styles11 = reactNative.StyleSheet.create({
   root: {
     width: TRACK_WIDTH,
     flexDirection: "row",
@@ -31429,7 +31602,7 @@ var styles9 = reactNative.StyleSheet.create({
 });
 var WIDTH = 121;
 var HEIGHT = 48;
-var ICON_SIZE4 = 24;
+var ICON_SIZE5 = 24;
 var StepPager = react.forwardRef(function StepPager2({
   index,
   count,
@@ -31463,7 +31636,7 @@ var StepPager = react.forwardRef(function StepPager2({
         now: safeCount === 0 ? 0 : safeIndex + 1,
         text: label
       },
-      style: [styles10.root, webBlurStyle4, style],
+      style: [styles12.root, webBlurStyle5, style],
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           reactNative.Pressable,
@@ -31474,11 +31647,11 @@ var StepPager = react.forwardRef(function StepPager2({
             accessibilityRole: "button",
             accessibilityLabel: previousAccessibilityLabel,
             accessibilityState: { disabled: atStart || !onPrevious },
-            style: [styles10.navButton, (atStart || !onPrevious) && styles10.navDisabled],
-            children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon, { size: ICON_SIZE4, color: colors.white, strokeWidth: 2 })
+            style: [styles12.navButton, (atStart || !onPrevious) && styles12.navDisabled],
+            children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon, { size: ICON_SIZE5, color: colors.white, strokeWidth: 2 })
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles10.label, children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles12.label, children: label }),
         /* @__PURE__ */ jsxRuntime.jsx(
           reactNative.Pressable,
           {
@@ -31488,19 +31661,19 @@ var StepPager = react.forwardRef(function StepPager2({
             accessibilityRole: "button",
             accessibilityLabel: nextAccessibilityLabel,
             accessibilityState: { disabled: atEnd || !onNext },
-            style: [styles10.navButton, (atEnd || !onNext) && styles10.navDisabled],
-            children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles10.chevronRight, children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon, { size: ICON_SIZE4, color: colors.white, strokeWidth: 2 }) })
+            style: [styles12.navButton, (atEnd || !onNext) && styles12.navDisabled],
+            children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles12.chevronRight, children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon, { size: ICON_SIZE5, color: colors.white, strokeWidth: 2 }) })
           }
         )
       ]
     }
   );
 });
-var webBlurStyle4 = reactNative.Platform.OS === "web" ? {
+var webBlurStyle5 = reactNative.Platform.OS === "web" ? {
   backdropFilter: "blur(50px)",
   WebkitBackdropFilter: "blur(50px)"
 } : {};
-var styles10 = reactNative.StyleSheet.create({
+var styles12 = reactNative.StyleSheet.create({
   root: {
     width: WIDTH,
     height: HEIGHT,
@@ -31514,8 +31687,8 @@ var styles10 = reactNative.StyleSheet.create({
     overflow: "hidden"
   },
   navButton: {
-    width: ICON_SIZE4,
-    height: ICON_SIZE4,
+    width: ICON_SIZE5,
+    height: ICON_SIZE5,
     alignItems: "center",
     justifyContent: "center"
   },
@@ -31536,13 +31709,13 @@ var styles10 = reactNative.StyleSheet.create({
   }
 });
 var ICON_SLOT = 36;
-var ICON_SIZE5 = 20;
+var ICON_SIZE6 = 20;
 var InfoTile = react.forwardRef(function InfoTile2({
   title,
   description,
   icon: Icon2,
   iconProps,
-  iconSize = ICON_SIZE5,
+  iconSize = ICON_SIZE6,
   iconSlotBackgroundColor = colors.grey600,
   style,
   className,
@@ -31560,18 +31733,18 @@ var InfoTile = react.forwardRef(function InfoTile2({
       ref: setContainerRef,
       accessibilityRole: "text",
       accessibilityLabel: accessibilityLabel ?? (hasDescription ? `${title}. ${description}` : title),
-      style: [styles11.root, style],
+      style: [styles13.root, style],
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles11.iconSlot, { backgroundColor: iconSlotBackgroundColor }], children: /* @__PURE__ */ jsxRuntime.jsx(Icon2, { ...iconProps, size: iconSize, color: iconProps?.color ?? colors.white }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles11.textBlock, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles11.title, children: title }),
-          hasDescription ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles11.description, children: description }) : null
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles13.iconSlot, { backgroundColor: iconSlotBackgroundColor }], children: /* @__PURE__ */ jsxRuntime.jsx(Icon2, { ...iconProps, size: iconSize, color: iconProps?.color ?? colors.white }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles13.textBlock, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles13.title, children: title }),
+          hasDescription ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles13.description, children: description }) : null
         ] })
       ]
     }
   );
 });
-var styles11 = reactNative.StyleSheet.create({
+var styles13 = reactNative.StyleSheet.create({
   root: {
     flexDirection: "row",
     alignItems: "center",
@@ -31621,7 +31794,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 = react.forwardRef(
@@ -31630,7 +31803,7 @@ var ContactInfoCard = react.forwardRef(
     value,
     icon: Icon2,
     iconProps,
-    iconSize = ICON_SIZE6,
+    iconSize = ICON_SIZE7,
     iconSlotBackgroundColor = ICON_SLOT_BG,
     style,
     className,
@@ -31650,7 +31823,7 @@ var ContactInfoCard = react.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,
@@ -31659,7 +31832,7 @@ var ContactInfoCard = react.forwardRef(
           style
         ],
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles12.iconSlot, { backgroundColor: iconSlotBackgroundColor }], children: /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles14.iconSlot, { backgroundColor: iconSlotBackgroundColor }], children: /* @__PURE__ */ jsxRuntime.jsx(
             Icon2,
             {
               ...iconProps,
@@ -31668,16 +31841,16 @@ var ContactInfoCard = react.forwardRef(
               strokeWidth: iconProps?.strokeWidth ?? 2
             }
           ) }),
-          /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles12.textBlock, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles12.title, children: title }),
-            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles12.value, children: value })
+          /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles14.textBlock, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles14.title, children: title }),
+            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles14.value, children: value })
           ] })
         ]
       }
     );
   }
 );
-var styles12 = reactNative.StyleSheet.create({
+var styles14 = reactNative.StyleSheet.create({
   root: {
     width: "100%",
     flexDirection: "row",
@@ -31782,59 +31955,54 @@ var AccordionItem = react.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__ */ jsxRuntime.jsxs(
-      reactNative.View,
+      reactNative.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
           },
+          reactNative.Platform.OS === "web" ? styles15.rootWeb : null,
           style
         ],
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            reactNative.Pressable,
-            {
-              accessibilityRole: "button",
-              accessibilityState: { expanded: open },
-              accessibilityLabel: accessibilityLabel ?? title,
-              onPress: toggle,
-              style: styles13.header,
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles13.title, children: title }),
-                /* @__PURE__ */ jsxRuntime.jsx(reactNative.Animated.View, { style: [styles13.chevron, { transform: [{ rotate: chevronRotate }] }], children: /* @__PURE__ */ jsxRuntime.jsx(
-                  ChevronDownIcon,
-                  {
-                    size: CHEVRON_SIZE2,
-                    color: open ? colors.primary : colors.grey400,
-                    strokeWidth: 2
-                  }
-                ) })
-              ]
-            }
-          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles15.header, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles15.title, children: title }),
+            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Animated.View, { style: [styles15.chevron, { transform: [{ rotate: chevronRotate }] }], children: /* @__PURE__ */ jsxRuntime.jsx(
+              ChevronDownIcon,
+              {
+                size: CHEVRON_SIZE2,
+                color: open ? colors.primary : colors.grey400,
+                strokeWidth: 2
+              }
+            ) })
+          ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
             reactNative.View,
             {
-              style: [styles13.measureHidden, { left: paddingX, right: paddingX }],
+              style: [styles15.measureHidden, { left: paddingX, right: paddingX }],
               pointerEvents: "none",
               onLayout: onBodyLayout,
               children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: bodyTextStyle, children })
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Animated.View, { style: [styles13.bodyClip, { height: bodyHeight }], children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles13.bodyInner, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: bodyTextStyle, children }) }) })
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Animated.View, { style: [styles15.bodyClip, { height: bodyHeight }], pointerEvents: "none", children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles15.bodyInner, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: bodyTextStyle, children }) }) })
         ]
       }
     );
   }
 );
-var styles13 = reactNative.StyleSheet.create({
+var styles15 = reactNative.StyleSheet.create({
   root: {
     width: "100%",
     paddingTop: 16,
@@ -31843,6 +32011,9 @@ var styles13 = reactNative.StyleSheet.create({
     opacity: 1,
     overflow: "hidden"
   },
+  rootWeb: {
+    cursor: "pointer"
+  },
   header: {
     flexDirection: "row",
     alignItems: "center",
@@ -31890,7 +32061,7 @@ var ROW_GAP = 12;
 var CONNECTOR_WIDTH = 2;
 var CONNECTOR_HEIGHT = 19;
 var CONNECTOR_GAP = 8;
-var webBlurStyle5 = reactNative.Platform.OS === "web" ? {
+var webBlurStyle6 = reactNative.Platform.OS === "web" ? {
   backdropFilter: "blur(20px)",
   WebkitBackdropFilter: "blur(20px)"
 } : {};
@@ -31908,18 +32079,18 @@ var StepList = react.forwardRef(function StepList2({ steps, style, className, ac
       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__ */ jsxRuntime.jsxs(reactNative.View, { style: styles14.stepBlock, children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles14.row, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles14.badge, webBlurStyle5], children: /* @__PURE__ */ jsxRuntime.jsx(
+        return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles16.stepBlock, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles16.row, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles16.badge, webBlurStyle6], children: /* @__PURE__ */ jsxRuntime.jsx(
               reactNative.Text,
               {
                 style: [
-                  styles14.badgeLabel,
-                  reactNative.Platform.OS === "android" ? styles14.labelAndroid : null
+                  styles16.badgeLabel,
+                  reactNative.Platform.OS === "android" ? styles16.labelAndroid : null
                 ],
                 children: String(number)
               }
@@ -31927,18 +32098,18 @@ var StepList = react.forwardRef(function StepList2({ steps, style, className, ac
             /* @__PURE__ */ jsxRuntime.jsx(
               reactNative.Text,
               {
-                style: [styles14.description, reactNative.Platform.OS === "android" ? styles14.labelAndroid : null],
+                style: [styles16.description, reactNative.Platform.OS === "android" ? styles16.labelAndroid : null],
                 children: description
               }
             )
           ] }),
-          !isLast ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles14.connectorSlot, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles14.connector }) }) : null
+          !isLast ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles16.connectorSlot, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles16.connector }) }) : null
         ] }, `${number}-${description}`);
       })
     }
   );
 });
-var styles14 = reactNative.StyleSheet.create({
+var styles16 = reactNative.StyleSheet.create({
   root: {
     width: "100%"
   },
@@ -31996,7 +32167,7 @@ var styles14 = reactNative.StyleSheet.create({
   }
 });
 var BUTTON_SIZE = 32;
-var webBlurStyle6 = reactNative.Platform.OS === "web" ? {
+var webBlurStyle7 = reactNative.Platform.OS === "web" ? {
   backdropFilter: "blur(20px)",
   WebkitBackdropFilter: "blur(20px)"
 } : {};
@@ -32033,7 +32204,7 @@ var Counter = react.forwardRef(function Counter2({
     if (!isControlled) setUncontrolledValue(next);
     onValueChange?.(next);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ...rest, ref: setContainerRef, style: [styles15.base, style], children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ...rest, ref: setContainerRef, style: [styles17.base, style], children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       reactNative.Pressable,
       {
@@ -32043,11 +32214,11 @@ var Counter = react.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__ */ jsxRuntime.jsx(MinusIcon, {})
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles15.value, children: resolvedValue }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles17.value, children: resolvedValue }),
     /* @__PURE__ */ jsxRuntime.jsx(
       reactNative.Pressable,
       {
@@ -32057,13 +32228,13 @@ var Counter = react.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__ */ jsxRuntime.jsx(PlusIcon, {})
       }
     )
   ] });
 });
-var styles15 = reactNative.StyleSheet.create({
+var styles17 = reactNative.StyleSheet.create({
   base: {
     flexDirection: "row",
     alignItems: "center",
@@ -32087,7 +32258,7 @@ var styles15 = reactNative.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;
@@ -32183,14 +32354,14 @@ var SegmentedToggle = react.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__ */ jsxRuntime.jsxs(
+          !fullWidth ? options.map(({ value: optionValue, label, icon: Icon2, showLabel = true }, index) => /* @__PURE__ */ jsxRuntime.jsxs(
             reactNative.View,
             {
               pointerEvents: "none",
@@ -32206,10 +32377,10 @@ var SegmentedToggle = react.forwardRef(
                   return nextWidths;
                 });
               },
-              style: styles16.optionMeasurement,
+              style: styles18.optionMeasurement,
               children: [
-                Icon2 ? /* @__PURE__ */ jsxRuntime.jsx(Icon2, { size: ICON_SIZE7 }) : null,
-                /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles16.label, styles16.contentWidthLabel], children: label })
+                Icon2 ? /* @__PURE__ */ jsxRuntime.jsx(Icon2, { size: ICON_SIZE8 }) : null,
+                showLabel ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles18.label, styles18.contentWidthLabel], children: label }) : null
               ]
             },
             `${optionValue}-measurement`
@@ -32219,12 +32390,12 @@ var SegmentedToggle = react.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;
@@ -32239,23 +32410,23 @@ var SegmentedToggle = react.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__ */ jsxRuntime.jsxs(reactNative.View, { style: styles16.optionContent, children: [
-                  Icon2 ? /* @__PURE__ */ jsxRuntime.jsx(Icon2, { size: ICON_SIZE7, color: iconColor }) : null,
-                  /* @__PURE__ */ jsxRuntime.jsx(
+                children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles18.optionContent, children: [
+                  Icon2 ? /* @__PURE__ */ jsxRuntime.jsx(Icon2, { size: ICON_SIZE8, color: iconColor }) : null,
+                  showLabel ? /* @__PURE__ */ jsxRuntime.jsx(
                     reactNative.Text,
                     {
                       numberOfLines: fullWidth ? 1 : void 0,
                       style: [
-                        styles16.label,
-                        !fullWidth && styles16.contentWidthLabel,
+                        styles18.label,
+                        !fullWidth && styles18.contentWidthLabel,
                         { color: labelColor }
                       ],
                       children: label
                     }
-                  )
+                  ) : null
                 ] })
               },
               optionValue
@@ -32266,7 +32437,7 @@ var SegmentedToggle = react.forwardRef(
     );
   }
 );
-var styles16 = reactNative.StyleSheet.create({
+var styles18 = reactNative.StyleSheet.create({
   base: {
     height: 44,
     flexDirection: "row",
@@ -32394,16 +32565,16 @@ var Sidebar = react.forwardRef(function Sidebar2({
     {
       ...rest,
       ref: setContainerRef,
-      style: [styles17.root, { width: widthAnim }, style],
+      style: [styles19.root, { width: widthAnim }, style],
       accessibilityRole: "menu",
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           reactNative.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__ */ jsxRuntime.jsx(
@@ -32411,7 +32582,7 @@ var Sidebar = react.forwardRef(function Sidebar2({
                 {
                   pointerEvents: collapsed ? "none" : "auto",
                   style: [
-                    styles17.logoSlot,
+                    styles19.logoSlot,
                     {
                       opacity: labelOpacity,
                       maxWidth: collapsed ? 0 : LOGO_WIDTH
@@ -32437,7 +32608,7 @@ var Sidebar = react.forwardRef(function Sidebar2({
                   accessibilityLabel: closeAccessibilityLabel,
                   hitSlop: 8,
                   onPress: onClose,
-                  style: styles17.toggleButton,
+                  style: styles19.toggleButton,
                   children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, { color: colors.grey100, size: TOGGLE_SIZE, strokeWidth: 2 })
                 }
               ) : showCollapseToggle ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -32448,7 +32619,7 @@ var Sidebar = react.forwardRef(function Sidebar2({
                   accessibilityState: { expanded: !collapsed },
                   hitSlop: 8,
                   onPress: () => setCollapsed(!collapsed),
-                  style: styles17.toggleButton,
+                  style: styles19.toggleButton,
                   children: /* @__PURE__ */ jsxRuntime.jsx(SidebarIcon, { color: colors.grey100, size: TOGGLE_SIZE, strokeWidth: 2 })
                 }
               ) : null
@@ -32460,7 +32631,7 @@ var Sidebar = react.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;
@@ -32476,18 +32647,18 @@ var Sidebar = react.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__ */ jsxRuntime.jsx(reactNative.View, { style: [styles17.footer, collapsed ? styles17.footerCollapsed : styles17.footerExpanded], children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles19.footer, collapsed ? styles19.footerCollapsed : styles19.footerExpanded], children: /* @__PURE__ */ jsxRuntime.jsx(
           AvatarSimple,
           {
             name: user.name,
@@ -32502,7 +32673,7 @@ var Sidebar = react.forwardRef(function Sidebar2({
     }
   );
 });
-var styles17 = reactNative.StyleSheet.create({
+var styles19 = reactNative.StyleSheet.create({
   root: {
     flexDirection: "column",
     alignSelf: "stretch",
@@ -32607,7 +32778,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 = react.forwardRef(
   function LanguageSwitcher2({
     options = defaultLanguageOptions,
@@ -32618,6 +32795,7 @@ var LanguageSwitcher = react.forwardRef(
     defaultOpen = false,
     onOpenChange,
     disabled = false,
+    variant = "default",
     accessibilityLabel = "Language",
     style,
     className,
@@ -32637,6 +32815,7 @@ var LanguageSwitcher = react.forwardRef(
     const selectedValue = isValueControlled ? value : uncontrolledValue;
     const isOpen = isOpenControlled ? openProp : uncontrolledOpen;
     const selectedOption = options.find((option) => option.value === selectedValue) ?? options[0] ?? null;
+    const isIconVariant = variant === "icon";
     useApplyWebClassName(wrapperRef, className?.trim() || void 0);
     const setOpen = react.useCallback(
       (next) => {
@@ -32687,7 +32866,14 @@ var LanguageSwitcher = react.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__ */ jsxRuntime.jsxs(
             reactNative.Pressable,
@@ -32702,49 +32888,76 @@ var LanguageSwitcher = react.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__ */ jsxRuntime.jsx(GlobeIcon, { size: ICON_SIZE8, color: colors.white, strokeWidth: 2 }),
-                /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles18.triggerLabel, numberOfLines: 1, children: selectedOption?.label ?? "" }),
-                /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles18.chevron, isOpen && styles18.chevronOpen], children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, { size: ICON_SIZE8, color: colors.white, strokeWidth: 2 }) })
+                /* @__PURE__ */ jsxRuntime.jsx(GlobeIcon, { size: ICON_SIZE9, color: colors.white, strokeWidth: isIconVariant ? 1.5 : 2 }),
+                !isIconVariant ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles20.triggerLabel, numberOfLines: 1, children: selectedOption?.label ?? "" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles20.chevron, isOpen && styles20.chevronOpen], children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, { size: ICON_SIZE9, color: colors.white, strokeWidth: 2 }) })
+                ] }) : null
               ]
             }
           ),
-          isOpen && options.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles18.menu, accessibilityRole: "menu", children: options.map((option) => {
-            const selected = option.value === selectedValue;
-            return /* @__PURE__ */ jsxRuntime.jsx(
-              reactNative.Pressable,
-              {
-                onPress: () => selectLanguage(option.value),
-                accessibilityRole: "menuitem",
-                accessibilityLabel: option.label,
-                accessibilityState: { selected },
-                onHoverIn: () => setHoveredValue(option.value),
-                onHoverOut: () => setHoveredValue(null),
-                style: ({ pressed }) => [
-                  styles18.item,
-                  selected ? styles18.itemSelected : (hoveredValue === option.value || pressed) && styles18.itemHovered
-                ],
-                children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles18.itemLabel, selected && styles18.itemLabelSelected], children: option.label })
-              },
-              option.value
-            );
-          }) }) : null
+          isOpen && options.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.View,
+            {
+              style: [styles20.menu, isIconVariant ? styles20.menuIcon : styles20.menuDefault],
+              accessibilityRole: "menu",
+              children: options.map((option) => {
+                const selected = option.value === selectedValue;
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  reactNative.Pressable,
+                  {
+                    onPress: () => selectLanguage(option.value),
+                    accessibilityRole: "menuitem",
+                    accessibilityLabel: option.label,
+                    accessibilityState: { selected },
+                    onHoverIn: () => setHoveredValue(option.value),
+                    onHoverOut: () => setHoveredValue(null),
+                    style: ({ pressed }) => [
+                      styles20.item,
+                      isIconVariant ? styles20.itemIcon : null,
+                      selected ? isIconVariant ? styles20.itemSelectedIcon : styles20.itemSelected : (hoveredValue === option.value || pressed) && styles20.itemHovered
+                    ],
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      reactNative.Text,
+                      {
+                        style: [
+                          styles20.itemLabel,
+                          selected && (isIconVariant ? styles20.itemLabelSelectedIcon : styles20.itemLabelSelected)
+                        ],
+                        children: option.label
+                      }
+                    )
+                  },
+                  option.value
+                );
+              })
+            }
+          ) : null
         ]
       }
     );
   }
 );
-var styles18 = reactNative.StyleSheet.create({
+var styles20 = reactNative.StyleSheet.create({
   wrapper: {
     position: "relative",
-    width: CONTROL_WIDTH,
     alignSelf: "flex-start"
   },
+  wrapperDefault: {
+    width: CONTROL_WIDTH
+  },
+  wrapperIcon: {
+    width: ICON_BUTTON_SIZE2
+  },
   wrapperOpen: {
-    zIndex: 20
+    zIndex: 100
+  },
+  wrapperOpenIcon: {
+    zIndex: 200
   },
   disabled: {
     opacity: 0.6
@@ -32759,6 +32972,17 @@ var styles18 = reactNative.StyleSheet.create({
     borderRadius: 12,
     backgroundColor: "transparent"
   },
+  triggerIcon: {
+    width: ICON_BUTTON_SIZE2,
+    height: ICON_BUTTON_SIZE2,
+    padding: 8,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 5,
+    backgroundColor: colors.grey800,
+    borderWidth: 1,
+    borderColor: colors.grey700
+  },
   triggerActive: {
     backgroundColor: colors.whiteAlpha6
   },
@@ -32770,8 +32994,8 @@ var styles18 = reactNative.StyleSheet.create({
     color: colors.white
   },
   chevron: {
-    width: ICON_SIZE8,
-    height: ICON_SIZE8,
+    width: ICON_SIZE9,
+    height: ICON_SIZE9,
     flexShrink: 0,
     alignItems: "center",
     justifyContent: "center"
@@ -32781,22 +33005,42 @@ var styles18 = reactNative.StyleSheet.create({
   },
   menu: {
     position: "absolute",
+    padding: 8,
+    borderRadius: 12,
+    overflow: "hidden"
+  },
+  menuDefault: {
     top: CONTROL_HEIGHT + 8,
     left: 0,
     width: CONTROL_WIDTH,
-    padding: 8,
     gap: 8,
-    borderRadius: 12,
-    backgroundColor: colors.whiteAlpha6,
-    overflow: "hidden"
+    backgroundColor: colors.whiteAlpha6
+  },
+  menuIcon: {
+    top: ICON_MENU_TOP,
+    left: (ICON_BUTTON_SIZE2 - ICON_MENU_WIDTH) / 2,
+    right: "auto",
+    width: ICON_MENU_WIDTH,
+    height: ICON_MENU_HEIGHT,
+    gap: 4,
+    opacity: 1,
+    zIndex: 200,
+    backgroundColor: colors.grey800,
+    borderWidth: 1,
+    borderColor: colors.grey700
   },
   item: {
-    height: CONTROL_HEIGHT,
+    height: ITEM_HEIGHT,
     alignItems: "center",
     justifyContent: "center",
     paddingVertical: 8,
     paddingHorizontal: 12,
-    borderRadius: 8
+    borderRadius: 8,
+    gap: 8
+  },
+  itemIcon: {
+    width: 51,
+    alignSelf: "stretch"
   },
   itemHovered: {
     backgroundColor: colors.whiteAlpha6
@@ -32804,6 +33048,9 @@ var styles18 = reactNative.StyleSheet.create({
   itemSelected: {
     backgroundColor: colors.whiteAlpha6
   },
+  itemSelectedIcon: {
+    backgroundColor: ACTIVE_ITEM_BACKGROUND
+  },
   itemLabel: {
     ...languageSwitcherTypography,
     ...reactNative.Platform.select({ web: { fontFamily: `${fonts.sans}, sans-serif` } }),
@@ -32811,14 +33058,17 @@ var styles18 = reactNative.StyleSheet.create({
   },
   itemLabelSelected: {
     color: colors.primary
+  },
+  itemLabelSelectedIcon: {
+    color: colors.primary
   }
 });
-var ICON_SIZE9 = 25.63181;
+var ICON_SIZE10 = 25.63181;
 var StatCard = react.forwardRef(function StatCard2({
   label,
   icon: Icon2,
   iconProps,
-  iconSize = ICON_SIZE9,
+  iconSize = ICON_SIZE10,
   style,
   className,
   accessibilityLabel,
@@ -32833,17 +33083,17 @@ var StatCard = react.forwardRef(function StatCard2({
     {
       ...rest,
       ref: setContainerRef,
-      style: [styles19.base, style],
+      style: [styles21.base, style],
       accessibilityRole: "text",
       accessibilityLabel: accessibilityLabel ?? label,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(Icon2, { ...iconProps, size: iconSize, color: iconProps?.color ?? colors.white }),
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles19.label, children: label })
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles21.label, children: label })
       ]
     }
   );
 });
-var styles19 = reactNative.StyleSheet.create({
+var styles21 = reactNative.StyleSheet.create({
   base: {
     width: 204.5,
     minHeight: 114,
@@ -32955,7 +33205,7 @@ var Button = react.forwardRef(
     useApplyWebClassName(textRef, textClassName);
     const iconNode = customIcon ?? /* @__PURE__ */ jsxRuntime.jsx(ArrowRightIcon, { size: metrics.iconSize, color: preset.iconColor });
     const containerStyle = [
-      styles20.base,
+      styles22.base,
       {
         minHeight: metrics.minHeight,
         height: variant === "danger" ? 33 : void 0,
@@ -32967,16 +33217,16 @@ var Button = react.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 },
-      reactNative.Platform.OS === "android" ? styles20.labelAndroid : null,
-      !hasIcon && styles20.labelCentered,
+      reactNative.Platform.OS === "android" ? styles22.labelAndroid : null,
+      !hasIcon && styles22.labelCentered,
       textStyle
     ];
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -32997,7 +33247,7 @@ var Button = react.forwardRef(
             reactNative.View,
             {
               style: [
-                styles20.iconContainer,
+                styles22.iconContainer,
                 {
                   width: metrics.iconContainerSize,
                   height: metrics.iconContainerSize,
@@ -33013,7 +33263,7 @@ var Button = react.forwardRef(
     );
   }
 );
-var styles20 = reactNative.StyleSheet.create({
+var styles22 = reactNative.StyleSheet.create({
   base: {
     flexDirection: "row",
     alignItems: "center",
@@ -33097,13 +33347,13 @@ var Checkbox = react.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__ */ jsxRuntime.jsx(
           reactNative.View,
           {
             style: [
-              styles21.box,
+              styles23.box,
               {
                 backgroundColor: chrome.backgroundColor,
                 borderColor: chrome.borderColor
@@ -33112,12 +33362,12 @@ var Checkbox = react.forwardRef(function Checkbox2({
             children: isActive ? /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { size: CHECK_SIZE, color: colors.primary, strokeWidth: CHECK_STROKE }) : null
           }
         ),
-        labelContent != null && labelContent !== false ? typeof labelContent === "string" || typeof labelContent === "number" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles21.label, labelStyle], children: labelContent }) : labelContent : null
+        labelContent != null && labelContent !== false ? typeof labelContent === "string" || typeof labelContent === "number" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles23.label, labelStyle], children: labelContent }) : labelContent : null
       ]
     }
   );
 });
-var styles21 = reactNative.StyleSheet.create({
+var styles23 = reactNative.StyleSheet.create({
   root: {
     flexDirection: "row",
     alignItems: "center",
@@ -33231,26 +33481,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__ */ jsxRuntime.jsxs(reactNative.View, { style: styles22.rangeField, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { numberOfLines: 1, style: styles22.rangeLabel, children: label }),
-    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles22.rangeValueRow, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles22.rangeDate, children: value }),
-      time ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles22.rangeTimeWrap, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles24.rangeField, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { numberOfLines: 1, style: styles24.rangeLabel, children: label }),
+    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles24.rangeValueRow, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles24.rangeDate, children: value }),
+      time ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles24.rangeTimeWrap, children: [
         /* @__PURE__ */ jsxRuntime.jsx(ClockFilledIcon, { color: colors.lightGrey, size: 16 }),
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles22.rangeTime, children: time })
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles24.rangeTime, children: time })
       ] }) : null
     ] })
   ] });
@@ -33440,15 +33698,15 @@ var DatePicker = react.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__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles22.triggerWrap, isOpen && styles22.triggerWrapOpen], children: [
+        children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles24.triggerWrap, isOpen && styles24.triggerWrapOpen], children: [
           hideTrigger ? null : /* @__PURE__ */ jsxRuntime.jsx(
             reactNative.Pressable,
             {
@@ -33459,9 +33717,9 @@ var DatePicker = react.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
@@ -33472,13 +33730,13 @@ var DatePicker = react.forwardRef(
                 /* @__PURE__ */ jsxRuntime.jsx(
                   reactNative.View,
                   {
-                    style: usesVerticalRangeTrigger ? styles22.rangeDividerVertical : styles22.rangeDividerHorizontal
+                    style: usesVerticalRangeTrigger ? styles24.rangeDividerVertical : styles24.rangeDividerHorizontal
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(RangeTriggerField, { label: endLabel, time: endTime, value: endValue })
               ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles22.triggerText, { color: triggerTextColor }], numberOfLines: 1, children: triggerLabel }),
-                /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles22.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(CalendarOutlineIcon, { size: ICON_SIZE10, color: colors.grey100 }) })
+                /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles24.triggerText, { color: triggerTextColor }], numberOfLines: 1, children: triggerLabel }),
+                /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles24.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(CalendarOutlineIcon, { size: ICON_SIZE11, color: colors.grey100 }) })
               ] })
             }
           ),
@@ -33486,13 +33744,13 @@ var DatePicker = react.forwardRef(
             reactNative.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__ */ jsxRuntime.jsxs(reactNative.View, { style: styles22.calendarHeader, children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles24.calendarHeader, children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
                     reactNative.Pressable,
                     {
@@ -33500,11 +33758,11 @@ var DatePicker = react.forwardRef(
                       hitSlop: 8,
                       accessibilityRole: "button",
                       accessibilityLabel: "Previous month",
-                      style: styles22.navButton,
+                      style: styles24.navButton,
                       children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon, { size: NAV_ICON_SIZE, color: colors.white })
                     }
                   ),
-                  /* @__PURE__ */ jsxRuntime.jsxs(reactNative.Text, { style: styles22.monthHeading, children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(reactNative.Text, { style: styles24.monthHeading, children: [
                     monthNames[visibleMonth.getMonth()],
                     " ",
                     visibleMonth.getFullYear()
@@ -33516,13 +33774,13 @@ var DatePicker = react.forwardRef(
                       hitSlop: 8,
                       accessibilityRole: "button",
                       accessibilityLabel: "Next month",
-                      style: styles22.navButton,
-                      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles22.navIconMirror, children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon, { size: NAV_ICON_SIZE, color: colors.white }) })
+                      style: styles24.navButton,
+                      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles24.navIconMirror, children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon, { size: NAV_ICON_SIZE, color: colors.white }) })
                     }
                   )
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles22.weekdayRow, children: weekdayLabels.map((weekdayLabel, index) => /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles22.dayCellWrap, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles22.weekdayText, children: weekdayLabel }) }, `${weekdayLabel}-${index}`)) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles24.weekdayRow, children: weekdayLabels.map((weekdayLabel, index) => /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles24.weekdayCell, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles24.weekdayText, children: weekdayLabel }) }, `${weekdayLabel}-${index}`)) }),
                   weeks.map((week, weekIndex) => {
                     let rangeHighlightStyle = null;
                     if (isRange && rangeValue.start && rangeValue.end) {
@@ -33559,13 +33817,13 @@ var DatePicker = react.forwardRef(
                     return /* @__PURE__ */ jsxRuntime.jsxs(
                       reactNative.View,
                       {
-                        style: [styles22.weekRow, weekIndex > 0 && styles22.weekRowSpaced],
+                        style: [styles24.weekRow, weekIndex > 0 && styles24.weekRowSpaced],
                         children: [
                           rangeHighlightStyle ? /* @__PURE__ */ jsxRuntime.jsx(
                             reactNative.View,
                             {
                               pointerEvents: "none",
-                              style: [styles22.rangeHighlight, rangeHighlightStyle]
+                              style: [styles24.rangeHighlight, rangeHighlightStyle]
                             }
                           ) : null,
                           week.map((day, dayIndex) => {
@@ -33588,7 +33846,7 @@ var DatePicker = react.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: {
@@ -33600,14 +33858,14 @@ var DatePicker = react.forwardRef(
                                     reactNative.View,
                                     {
                                       style: [
-                                        styles22.dayCircle,
-                                        isSelectedEndpoint && styles22.dayCircleSelected,
-                                        isHovered && styles22.dayCircleHovered
+                                        styles24.dayCircle,
+                                        isSelectedEndpoint && styles24.dayCircleSelected,
+                                        isHovered && styles24.dayCircleHovered
                                       ],
-                                      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles22.dayText, { color: dayTextColor }], children: day.getDate() })
+                                      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles24.dayText, { color: dayTextColor }], children: day.getDate() })
                                     }
                                   ),
-                                  isToday && !isSelectedEndpoint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles22.todayDot }) : null
+                                  isToday && !isSelectedEndpoint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles24.todayDot }) : null
                                 ]
                               },
                               dayIndex
@@ -33627,7 +33885,7 @@ var DatePicker = react.forwardRef(
     );
   }
 );
-var styles22 = reactNative.StyleSheet.create({
+var styles24 = reactNative.StyleSheet.create({
   root: {
     width: DEFAULT_WIDTH,
     gap: 8,
@@ -33732,8 +33990,8 @@ var styles22 = reactNative.StyleSheet.create({
     backgroundColor: colors.grey500
   },
   iconSlot: {
-    width: ICON_SIZE10,
-    height: ICON_SIZE10,
+    width: ICON_SIZE11,
+    height: ICON_SIZE11,
     alignItems: "center",
     justifyContent: "center",
     flexShrink: 0
@@ -33746,10 +34004,11 @@ var styles22 = reactNative.StyleSheet.create({
     marginTop: 8,
     zIndex: 10,
     borderRadius: MENU_RADIUS2,
-    padding: 12,
+    padding: MENU_PADDING,
     gap: 0,
     opacity: 1,
     backgroundColor: colors.grey700,
+    overflow: "hidden",
     ...reactNative.Platform.select({
       web: {
         boxShadow: `0 8px 24px ${colors.black}73`
@@ -33778,14 +34037,17 @@ var styles22 = reactNative.StyleSheet.create({
     width: RANGE_TRIGGER_WIDTH
   },
   calendarHeader: {
-    height: 36,
+    height: HEADER_HEIGHT3,
+    paddingTop: 8,
+    paddingBottom: 8,
     flexDirection: "row",
     alignItems: "center",
-    justifyContent: "space-between"
+    justifyContent: "space-between",
+    opacity: 1
   },
   navButton: {
-    width: 36,
-    height: 36,
+    width: HEADER_HEIGHT3,
+    height: HEADER_HEIGHT3,
     alignItems: "center",
     justifyContent: "center"
   },
@@ -33798,7 +34060,21 @@ var styles22 = reactNative.StyleSheet.create({
     textAlign: "center"
   },
   weekdayRow: {
-    flexDirection: "row"
+    width: MENU_CONTENT_WIDTH,
+    height: WEEKDAY_ROW_HEIGHT,
+    marginTop: WEEKDAY_ROW_GAP,
+    flexDirection: "row",
+    alignItems: "center",
+    opacity: 1
+  },
+  weekdayCell: {
+    width: DAY_CELL_WIDTH,
+    height: WEEKDAY_ROW_HEIGHT,
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: 0,
+    alignItems: "center",
+    justifyContent: "center"
   },
   weekdayText: {
     ...datePickerTypography.weekday,
@@ -33807,29 +34083,36 @@ var styles22 = reactNative.StyleSheet.create({
     textTransform: "uppercase"
   },
   weekRow: {
+    width: MENU_CONTENT_WIDTH,
     flexDirection: "row",
     position: "relative"
   },
   weekRowSpaced: {
-    marginTop: 8
+    marginTop: WEEK_ROW_GAP
   },
   rangeHighlight: {
     position: "absolute",
-    top: (DAY_CELL_HEIGHT - DAY_CIRCLE_SIZE) / 2,
-    bottom: (DAY_CELL_HEIGHT - DAY_CIRCLE_SIZE) / 2,
-    borderRadius: DAY_CIRCLE_SIZE / 2,
+    top: 0,
+    bottom: 0,
+    borderRadius: DAY_CELL_RADIUS,
     backgroundColor: colors.primaryHover
   },
   dayCellWrap: {
-    flex: 1,
+    width: DAY_CELL_WIDTH,
     height: DAY_CELL_HEIGHT,
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: 0,
     alignItems: "center",
-    justifyContent: "center"
+    justifyContent: "center",
+    opacity: 1
   },
   dayCircle: {
-    width: DAY_CIRCLE_SIZE,
-    height: DAY_CIRCLE_SIZE,
-    borderRadius: DAY_CIRCLE_SIZE / 2,
+    width: "100%",
+    height: "100%",
+    borderRadius: DAY_CELL_RADIUS,
+    padding: DAY_CELL_PADDING,
+    gap: 10,
     alignItems: "center",
     justifyContent: "center"
   },
@@ -33853,7 +34136,7 @@ var styles22 = reactNative.StyleSheet.create({
 });
 var SIZE = 48;
 var PADDING = 12;
-var ICON_SIZE11 = 24;
+var ICON_SIZE12 = 24;
 var RADIUS = 64;
 var FloatingActionButton = react.forwardRef(function FloatingActionButton2({ onPress, disabled = false, icon, accessibilityLabel = "Add", style, className, ...rest }, forwardedRef) {
   const containerRef = react.useRef(null);
@@ -33871,12 +34154,12 @@ var FloatingActionButton = react.forwardRef(function FloatingActionButton2({ onP
       accessibilityRole: "button",
       accessibilityLabel,
       accessibilityState: { disabled },
-      style: [styles23.base, disabled && styles23.disabled, style],
-      children: icon ?? /* @__PURE__ */ jsxRuntime.jsx(PlusIcon, { color: colors.white, size: ICON_SIZE11, strokeWidth: 2 })
+      style: [styles25.base, disabled && styles25.disabled, style],
+      children: icon ?? /* @__PURE__ */ jsxRuntime.jsx(PlusIcon, { color: colors.white, size: ICON_SIZE12, strokeWidth: 2 })
     }
   );
 });
-var styles23 = reactNative.StyleSheet.create({
+var styles25 = reactNative.StyleSheet.create({
   base: {
     width: SIZE,
     height: SIZE,
@@ -33951,7 +34234,7 @@ var Modal = react.forwardRef(function Modal2({
     reactNative.View,
     {
       ref: setContentRef,
-      style: [styles24.content, contentStyle],
+      style: [styles26.content, contentStyle],
       onStartShouldSetResponder: () => true,
       children
     }
@@ -33983,7 +34266,7 @@ var Modal = react.forwardRef(function Modal2({
       animationType: "fade",
       onRequestClose: onClose,
       statusBarTranslucent: true,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles24.root, accessibilityViewIsModal: true, children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles26.root, accessibilityViewIsModal: true, children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           reactNative.Pressable,
           {
@@ -33991,7 +34274,7 @@ var Modal = react.forwardRef(function Modal2({
             accessibilityLabel: backdropAccessibilityLabel,
             disabled: !closeOnBackdropPress,
             onPress: closeOnBackdropPress ? onClose : void 0,
-            style: styles24.backdrop
+            style: styles26.backdrop
           }
         ),
         content
@@ -33999,7 +34282,7 @@ var Modal = react.forwardRef(function Modal2({
     }
   );
 });
-var styles24 = reactNative.StyleSheet.create({
+var styles26 = reactNative.StyleSheet.create({
   root: {
     flex: 1,
     alignItems: "center",
@@ -34140,6 +34423,8 @@ var Input = react.forwardRef(function Input2({
   const [focused, setFocused] = react.useState(false);
   const [uncontrolledValue, setUncontrolledValue] = react.useState(defaultValue ?? "");
   const metrics = sizeConfig2[size];
+  const reactId = react.useId();
+  const inputDomId = `eh-input-${reactId.replace(/:/g, "")}`;
   const isControlled = typeof value === "string";
   const currentValue = isControlled ? value : uncontrolledValue;
   const hasValue = currentValue.length > 0;
@@ -34156,35 +34441,45 @@ var Input = react.forwardRef(function Input2({
     size: metrics.iconSize,
     color: chrome.rightIconColor
   });
+  const focusInput = () => {
+    if (disabled) return;
+    inputRef.current?.focus();
+  };
   useApplyWebClassName(rootRef, className);
   useApplyWebClassName(inputRef, inputClassName);
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ref: rootRef, style: [styles25.root, disabled && styles25.disabled, style], children: [
-    showLabel && label ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles25.label, { color: chrome.labelColor }], children: label }) : null,
+  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
+    },
+    reactNative.Platform.OS === "web" ? styles27.fieldWeb : null,
+    fieldStyle
+  ];
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ref: rootRef, style: [styles27.root, disabled && styles27.disabled, style], children: [
+    showLabel && label ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Pressable, { disabled, onPress: focusInput, style: styles27.labelPressable, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles27.label, { color: chrome.labelColor }], children: label }) }) : null,
     /* @__PURE__ */ jsxRuntime.jsxs(
-      reactNative.View,
+      reactNative.Pressable,
       {
-        style: [
-          styles25.field,
-          {
-            height: metrics.height,
-            borderRadius: metrics.borderRadius,
-            paddingTop: metrics.paddingVertical,
-            paddingBottom: metrics.paddingVertical,
-            paddingLeft: metrics.paddingHorizontal,
-            paddingRight: metrics.paddingHorizontal,
-            gap: metrics.gap,
-            borderColor: chrome.borderColor,
-            backgroundColor: chrome.backgroundColor
-          },
-          fieldStyle
-        ],
+        accessibilityRole: "none",
+        disabled,
+        onPress: focusInput,
+        style: fieldChromeStyle,
         children: [
-          hasLeftIcon ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles25.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }], children: leftIconNode }) : null,
+          hasLeftIcon ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles27.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }], children: leftIconNode }) : null,
           /* @__PURE__ */ jsxRuntime.jsx(
             reactNative.TextInput,
             {
               ref: setInputRef,
               ...textInputProps,
+              nativeID: inputDomId,
               value: isControlled ? value : void 0,
               defaultValue: isControlled ? void 0 : defaultValue,
               editable: !disabled,
@@ -34203,11 +34498,11 @@ var Input = react.forwardRef(function Input2({
                 onBlur?.(event);
               },
               style: [
-                styles25.input,
+                styles27.input,
                 metrics.text,
                 { color: chrome.textColor },
-                reactNative.Platform.OS === "web" ? styles25.inputWeb : null,
-                reactNative.Platform.OS === "android" ? styles25.inputAndroid : null,
+                reactNative.Platform.OS === "web" ? styles27.inputWeb : null,
+                reactNative.Platform.OS === "android" ? styles27.inputAndroid : null,
                 inputStyle
               ],
               accessibilityLabel: resolvedAccessibilityLabel,
@@ -34219,20 +34514,29 @@ var Input = react.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__ */ jsxRuntime.jsx(reactNative.View, { style: [styles25.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }], children: rightIconNode }) : null
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.Pressable,
+            {
+              accessibilityRole: "none",
+              disabled,
+              onPress: focusInput,
+              style: [styles27.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }],
+              children: rightIconNode
+            }
+          ) : null
         ]
       }
     ),
-    showHint && hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles25.hint, { color: chrome.hintColor }], children: hint }) : null
+    showHint && hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles27.hint, { color: chrome.hintColor }], children: hint }) : null
   ] });
 });
-var styles25 = reactNative.StyleSheet.create({
+var styles27 = reactNative.StyleSheet.create({
   root: {
     width: DEFAULT_WIDTH2,
     gap: 8,
@@ -34241,6 +34545,9 @@ var styles25 = reactNative.StyleSheet.create({
   disabled: {
     opacity: 0.6
   },
+  labelPressable: {
+    alignSelf: "flex-start"
+  },
   label: {
     ...inputTypography.label
   },
@@ -34249,13 +34556,21 @@ var styles25 = reactNative.StyleSheet.create({
     flexDirection: "row",
     alignItems: "center"
   },
+  fieldWeb: {
+    // Web-only cursor for the clickable field chrome.
+    cursor: "text"
+  },
   input: {
     flex: 1,
+    alignSelf: "stretch",
     paddingVertical: 0,
     margin: 0
   },
   inputWeb: {
-    outlineStyle: "none"
+    outlineStyle: "none",
+    height: "100%",
+    minWidth: 0,
+    cursor: "text"
   },
   inputAndroid: {
     includeFontPadding: false
@@ -34388,8 +34703,8 @@ var VerificationCodeInput = react.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__ */ jsxRuntime.jsxs(reactNative.View, { ...viewProps, ref: rootRef, style: [styles26.wrapper, disabled && styles26.disabled, style], children: [
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles26.row, { width: rowWidth, maxWidth: "100%", gap: cellGap }], children: Array.from({ length: safeLength }, (_, index) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ...viewProps, ref: rootRef, style: [styles28.wrapper, disabled && styles28.disabled, style], children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.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__ */ jsxRuntime.jsx(
@@ -34414,15 +34729,15 @@ var VerificationCodeInput = react.forwardRef(function VerificationCodeInput2({
           onSubmitEditing: () => onSubmit?.(currentCode),
           selectTextOnFocus: true,
           style: [
-            styles26.cell,
+            styles28.cell,
             {
               width: cellWidth,
               height: cellHeight,
               borderColor,
               color: error ? colors.red : colors.white
             },
-            reactNative.Platform.OS === "web" ? styles26.cellWeb : null,
-            reactNative.Platform.OS === "android" ? styles26.cellAndroid : null,
+            reactNative.Platform.OS === "web" ? styles28.cellWeb : null,
+            reactNative.Platform.OS === "android" ? styles28.cellAndroid : null,
             inputStyle
           ],
           value: currentCode[index] ?? ""
@@ -34430,10 +34745,10 @@ var VerificationCodeInput = react.forwardRef(function VerificationCodeInput2({
         index
       );
     }) }),
-    showErrorMessage ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { accessibilityLiveRegion: "assertive", style: styles26.errorMessage, children: errorMessage }) : null
+    showErrorMessage ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { accessibilityLiveRegion: "assertive", style: styles28.errorMessage, children: errorMessage }) : null
   ] });
 });
-var styles26 = reactNative.StyleSheet.create({
+var styles28 = reactNative.StyleSheet.create({
   wrapper: {
     minWidth: 0,
     alignSelf: "center",
@@ -34484,7 +34799,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) {
@@ -34557,25 +34872,25 @@ function MultiValueChips({ options, disabled, onRemove }) {
     const next = Math.ceil(event.nativeEvent.layout.width);
     setEllipsisWidth((current) => current === next ? current : next);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles27.multiValueRoot, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { pointerEvents: "none", style: styles27.measureRow, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles29.multiValueRoot, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { pointerEvents: "none", style: styles29.measureRow, children: [
       options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
         reactNative.View,
         {
-          style: styles27.chip,
+          style: styles29.chip,
           onLayout: (event) => handleChipLayout(option.value, event),
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles27.chipLabel, numberOfLines: 1, children: option.label }),
-            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles27.chipRemove, children: "\xD7" })
+            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles29.chipLabel, numberOfLines: 1, children: option.label }),
+            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles29.chipRemove, children: "\xD7" })
           ]
         },
         `measure-${option.value}`
       )),
-      /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles27.ellipsis, onLayout: handleEllipsisLayout, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles27.ellipsisText, children: "..." }) })
+      /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles29.ellipsis, onLayout: handleEllipsisLayout, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles29.ellipsisText, children: "..." }) })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles27.chipsRow, onLayout: handleContainerLayout, children: [
-      visible.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles27.chip, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles27.chipLabel, numberOfLines: 1, children: option.label }),
+    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles29.chipsRow, onLayout: handleContainerLayout, children: [
+      visible.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles29.chip, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles29.chipLabel, numberOfLines: 1, children: option.label }),
         /* @__PURE__ */ jsxRuntime.jsx(
           reactNative.Pressable,
           {
@@ -34587,11 +34902,11 @@ function MultiValueChips({ options, disabled, onRemove }) {
             hitSlop: 6,
             accessibilityRole: "button",
             accessibilityLabel: `Remove ${option.label}`,
-            children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles27.chipRemove, children: "\xD7" })
+            children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles29.chipRemove, children: "\xD7" })
           }
         )
       ] }, option.value)),
-      hasOverflow ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles27.ellipsis, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles27.ellipsisText, children: "..." }) }) : null
+      hasOverflow ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles29.ellipsis, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles29.ellipsisText, children: "..." }) }) : null
     ] })
   ] });
 }
@@ -34618,6 +34933,7 @@ var Select = react.forwardRef(
       emptyText = "No results",
       valueColor,
       style,
+      menuStyle,
       className,
       accessibilityLabel,
       // Pulled out only to keep them off `rest` (which is spread onto the root View);
@@ -34645,6 +34961,8 @@ var Select = react.forwardRef(
     const [uncontrolledOpen, setUncontrolledOpen] = react.useState(defaultOpen);
     const [searchQuery, setSearchQuery] = react.useState("");
     const [hoveredValue, setHoveredValue] = react.useState(null);
+    const [menuAlignEnd, setMenuAlignEnd] = react.useState(false);
+    const [menuPlaceAbove, setMenuPlaceAbove] = react.useState(false);
     const selectedValues = react.useMemo(() => {
       const current = isValueControlled ? valueProp : multiple ? uncontrolledMultiple : uncontrolledSingle;
       return toArray(current);
@@ -34663,6 +34981,23 @@ var Select = react.forwardRef(
       return options.filter((option) => option.label.toLowerCase().includes(query));
     }, [isExternalSearch, options, searchQuery]);
     useApplyWebClassName(rootRef, className);
+    const resolvedMenuWidth = react.useMemo(() => {
+      const flat = reactNative.StyleSheet.flatten(menuStyle);
+      const width = flat?.width;
+      if (typeof width === "number") return width;
+      const minWidth = flat?.minWidth;
+      if (typeof minWidth === "number") return minWidth;
+      return null;
+    }, [menuStyle]);
+    const estimatedMenuHeight = react.useMemo(() => {
+      const searchBlock = showSearch ? 40 + 8 : 0;
+      const optionCount = Math.max(filteredOptions.length, 1);
+      const listHeight = Math.min(
+        optionCount * 43 + Math.max(0, optionCount - 1) * 8,
+        MENU_MAX_LIST_HEIGHT
+      );
+      return 24 + searchBlock + listHeight;
+    }, [filteredOptions.length, showSearch]);
     const setOpen = react.useCallback(
       (next) => {
         if (!isOpenControlled) setUncontrolledOpen(next);
@@ -34672,11 +35007,37 @@ var Select = react.forwardRef(
         } else {
           setSearchQuery("");
           setHoveredValue(null);
+          setMenuAlignEnd(false);
+          setMenuPlaceAbove(false);
           onSearchChange?.("");
         }
       },
       [isOpenControlled, onOpenChange, onSearchChange, selectedValues]
     );
+    react.useLayoutEffect(() => {
+      if (reactNative.Platform.OS !== "web" || !isOpen) return;
+      const updateMenuPlacement = () => {
+        const trigger = triggerRef.current;
+        const rect = trigger?.getBoundingClientRect?.();
+        if (!rect) return;
+        const viewportPadding = 8;
+        const gap = 8;
+        const menuWidth = Math.max(rect.width, resolvedMenuWidth ?? 0);
+        const overflowsRight = rect.left + menuWidth > window.innerWidth - viewportPadding;
+        setMenuAlignEnd(overflowsRight);
+        const spaceBelow = window.innerHeight - viewportPadding - rect.bottom;
+        const spaceAbove = rect.top - viewportPadding;
+        const needsAbove = estimatedMenuHeight + gap > spaceBelow && spaceAbove > spaceBelow;
+        setMenuPlaceAbove(needsAbove);
+      };
+      updateMenuPlacement();
+      window.addEventListener("resize", updateMenuPlacement);
+      window.addEventListener("scroll", updateMenuPlacement, true);
+      return () => {
+        window.removeEventListener("resize", updateMenuPlacement);
+        window.removeEventListener("scroll", updateMenuPlacement, true);
+      };
+    }, [estimatedMenuHeight, isOpen, resolvedMenuWidth]);
     const handleSearchChange = (text) => {
       setSearchQuery(text);
       onSearchChange?.(text);
@@ -34801,7 +35162,7 @@ var Select = react.forwardRef(
       setOpen
     ]);
     const leftIconNode = renderStatefulIcon(leftIcon, UserIcon, {
-      size: ICON_SIZE12,
+      size: ICON_SIZE13,
       color: error ? colors.red : colors.primary
     });
     const hasLeftIcon = showLeftIcon || leftIcon != null;
@@ -34816,11 +35177,11 @@ var Select = react.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__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles27.label, { color: labelColor }], children: label }) : null,
-          /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles27.triggerWrap, isOpen && styles27.triggerWrapOpen], children: [
+          showLabel && label ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles29.label, { color: labelColor }], children: label }) : null,
+          /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles29.triggerWrap, isOpen && styles29.triggerWrapOpen], children: [
             /* @__PURE__ */ jsxRuntime.jsxs(
               reactNative.Pressable,
               {
@@ -34831,97 +35192,108 @@ var Select = react.forwardRef(
                 accessibilityLabel: resolvedAccessibilityLabel,
                 accessibilityState: { disabled, expanded: isOpen },
                 style: [
-                  styles27.trigger,
+                  styles29.trigger,
                   {
                     borderColor: triggerBorderColor,
                     backgroundColor: colors.grey700
                   }
                 ],
                 children: [
-                  hasLeftIcon ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles27.iconSlot, children: leftIconNode }) : null,
-                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles27.triggerContent, children: multiple && hasValue ? /* @__PURE__ */ jsxRuntime.jsx(
+                  hasLeftIcon ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles29.iconSlot, children: leftIconNode }) : null,
+                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles29.triggerContent, children: multiple && hasValue ? /* @__PURE__ */ jsxRuntime.jsx(
                     MultiValueChips,
                     {
                       options: selectedOptions,
                       disabled,
                       onRemove: handleRemoveChip
                     }
-                  ) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles27.triggerText, { color: triggerTextColor }], numberOfLines: 1, children: multiple ? placeholder : singleLabel }) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles27.iconSlot, isOpen && styles27.chevronOpen], children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, { size: ICON_SIZE12, color: isOpen ? colors.primary : colors.grey100 }) })
+                  ) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles29.triggerText, { color: triggerTextColor }], numberOfLines: 1, children: multiple ? placeholder : singleLabel }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles29.iconSlot, isOpen && styles29.chevronOpen], children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, { size: ICON_SIZE13, color: isOpen ? colors.primary : colors.grey100 }) })
                 ]
               }
             ),
-            isOpen ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles27.menu, children: [
-              showSearch ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles27.searchField, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles27.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, { size: ICON_SIZE12, color: colors.grey100 }) }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  reactNative.TextInput,
-                  {
-                    ref: searchInputRef,
-                    value: searchQuery,
-                    onChangeText: handleSearchChange,
-                    editable: !disabled,
-                    placeholder: searchPlaceholder,
-                    placeholderTextColor: colors.grey100,
-                    style: [
-                      styles27.searchInput,
-                      reactNative.Platform.OS === "web" ? styles27.searchInputWeb : null,
-                      reactNative.Platform.OS === "android" ? styles27.searchInputAndroid : null
-                    ],
-                    accessibilityLabel: searchPlaceholder
-                  }
-                )
-              ] }) : null,
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                reactNative.ScrollView,
-                {
-                  style: styles27.optionList,
-                  contentContainerStyle: styles27.optionListContent,
-                  keyboardShouldPersistTaps: "handled",
-                  showsVerticalScrollIndicator: false,
-                  children: [
-                    loading ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles27.statusRow, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles27.statusText, children: "Loading..." }) }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles27.statusRow, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles27.statusText, children: emptyText }) }) : null,
-                    !loading && filteredOptions.map((option) => {
-                      const isSelected = selectedValues.includes(option.value);
-                      const isHovered = hoveredValue === option.value;
-                      const visualState = isSelected ? "selected" : isHovered ? "hover" : "default";
-                      return /* @__PURE__ */ jsxRuntime.jsxs(
-                        reactNative.Pressable,
-                        {
-                          onPress: () => handleSelect(option.value),
-                          disabled,
-                          onHoverIn: () => setHoveredValue(option.value),
-                          onHoverOut: () => setHoveredValue((current) => current === option.value ? null : current),
-                          onPressIn: () => setHoveredValue(option.value),
-                          onPressOut: () => setHoveredValue((current) => current === option.value ? null : current),
-                          accessibilityRole: multiple ? "checkbox" : "button",
-                          accessibilityState: { selected: isSelected, checked: isSelected, disabled },
-                          style: [
-                            styles27.item,
+            isOpen ? /* @__PURE__ */ jsxRuntime.jsxs(
+              reactNative.View,
+              {
+                style: [
+                  styles29.menu,
+                  menuAlignEnd ? styles29.menuAlignEnd : styles29.menuAlignStart,
+                  menuPlaceAbove ? styles29.menuAbove : styles29.menuBelow,
+                  menuStyle
+                ],
+                children: [
+                  showSearch ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles29.searchField, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles29.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, { size: ICON_SIZE13, color: colors.grey100 }) }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      reactNative.TextInput,
+                      {
+                        ref: searchInputRef,
+                        value: searchQuery,
+                        onChangeText: handleSearchChange,
+                        editable: !disabled,
+                        placeholder: searchPlaceholder,
+                        placeholderTextColor: colors.grey100,
+                        style: [
+                          styles29.searchInput,
+                          reactNative.Platform.OS === "web" ? styles29.searchInputWeb : null,
+                          reactNative.Platform.OS === "android" ? styles29.searchInputAndroid : null
+                        ],
+                        accessibilityLabel: searchPlaceholder
+                      }
+                    )
+                  ] }) : null,
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    reactNative.ScrollView,
+                    {
+                      style: styles29.optionList,
+                      contentContainerStyle: styles29.optionListContent,
+                      keyboardShouldPersistTaps: "handled",
+                      showsVerticalScrollIndicator: false,
+                      children: [
+                        loading ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles29.statusRow, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles29.statusText, children: "Loading..." }) }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles29.statusRow, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.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__ */ jsxRuntime.jsxs(
+                            reactNative.Pressable,
                             {
-                              backgroundColor: itemBackground(visualState)
-                            }
-                          ],
-                          children: [
-                            multiple ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { pointerEvents: "none", style: styles27.itemCheckbox, children: /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { value: isSelected, variant: "light" }) }) : null,
-                            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles27.itemLabel, numberOfLines: 1, children: option.label })
-                          ]
-                        },
-                        option.value
-                      );
-                    })
-                  ]
-                }
-              )
-            ] }) : null
+                              onPress: () => handleSelect(option.value),
+                              disabled,
+                              onHoverIn: () => setHoveredValue(option.value),
+                              onHoverOut: () => setHoveredValue((current) => current === option.value ? null : current),
+                              onPressIn: () => setHoveredValue(option.value),
+                              onPressOut: () => setHoveredValue((current) => current === option.value ? null : current),
+                              accessibilityRole: multiple ? "checkbox" : "button",
+                              accessibilityState: { selected: isSelected, checked: isSelected, disabled },
+                              style: [
+                                styles29.item,
+                                {
+                                  backgroundColor: itemBackground(visualState)
+                                }
+                              ],
+                              children: [
+                                multiple ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { pointerEvents: "none", style: styles29.itemCheckbox, children: /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { value: isSelected, variant: "light" }) }) : null,
+                                /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles29.itemLabel, numberOfLines: 1, children: option.label })
+                              ]
+                            },
+                            option.value
+                          );
+                        })
+                      ]
+                    }
+                  )
+                ]
+              }
+            ) : null
           ] }),
-          showHint && hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles27.hint, { color: hintColor }], children: hint }) : null
+          showHint && hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles29.hint, { color: hintColor }], children: hint }) : null
         ]
       }
     );
   }
 );
-var styles27 = reactNative.StyleSheet.create({
+var styles29 = reactNative.StyleSheet.create({
   root: {
     width: DEFAULT_WIDTH3,
     gap: 8,
@@ -35011,8 +35383,8 @@ var styles27 = reactNative.StyleSheet.create({
     lineHeight: 16
   },
   iconSlot: {
-    width: ICON_SIZE12,
-    height: ICON_SIZE12,
+    width: ICON_SIZE13,
+    height: ICON_SIZE13,
     alignItems: "center",
     justifyContent: "center",
     flexShrink: 0
@@ -35022,10 +35394,7 @@ var styles27 = reactNative.StyleSheet.create({
   },
   menu: {
     position: "absolute",
-    top: "100%",
-    left: 0,
-    right: 0,
-    marginTop: 8,
+    minWidth: "100%",
     zIndex: 10,
     borderRadius: MENU_RADIUS3,
     padding: 12,
@@ -35040,6 +35409,26 @@ var styles27 = reactNative.StyleSheet.create({
       }
     })
   },
+  menuAlignStart: {
+    left: 0,
+    right: "auto"
+  },
+  menuAlignEnd: {
+    left: "auto",
+    right: 0
+  },
+  menuBelow: {
+    top: "100%",
+    bottom: "auto",
+    marginTop: 8,
+    marginBottom: 0
+  },
+  menuAbove: {
+    top: "auto",
+    bottom: "100%",
+    marginTop: 0,
+    marginBottom: 8
+  },
   optionList: {
     maxHeight: MENU_MAX_LIST_HEIGHT
   },
@@ -35175,25 +35564,35 @@ var Textarea = react.forwardRef(function Textarea2({
   const setInputRef = react.useMemo(() => mergeRefs(inputRef, forwardedRef), [forwardedRef]);
   const [focused, setFocused] = react.useState(false);
   const [uncontrolledValue, setUncontrolledValue] = react.useState(defaultValue ?? "");
+  const reactId = react.useId();
+  const inputDomId = `eh-textarea-${reactId.replace(/:/g, "")}`;
   const isControlled = typeof value === "string";
   const currentValue = isControlled ? value : uncontrolledValue;
   const hasValue = currentValue.length > 0;
   const visualState = resolveVisualState2({ disabled, error, focused, hasValue });
   const chrome = chromeFor2(visualState);
   const resolvedAccessibilityLabel = accessibilityLabel ?? (showLabel ? void 0 : label);
+  const focusInput = () => {
+    if (disabled) return;
+    inputRef.current?.focus();
+  };
   useApplyWebClassName(rootRef, className);
   useApplyWebClassName(inputRef, inputClassName);
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ref: rootRef, style: [styles28.root, disabled && styles28.disabled, style], children: [
-    showLabel && label ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles28.label, { color: chrome.labelColor }], children: label }) : null,
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ref: rootRef, style: [styles30.root, disabled && styles30.disabled, style], children: [
+    showLabel && label ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Pressable, { disabled, onPress: focusInput, style: styles30.labelPressable, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles30.label, { color: chrome.labelColor }], children: label }) }) : null,
     /* @__PURE__ */ jsxRuntime.jsx(
-      reactNative.View,
+      reactNative.Pressable,
       {
+        accessibilityRole: "none",
+        disabled,
+        onPress: focusInput,
         style: [
-          styles28.field,
+          styles30.field,
           {
             borderColor: chrome.borderColor,
             backgroundColor: chrome.backgroundColor
           },
+          reactNative.Platform.OS === "web" ? styles30.fieldWeb : null,
           fieldStyle
         ],
         children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -35201,6 +35600,7 @@ var Textarea = react.forwardRef(function Textarea2({
           {
             ref: setInputRef,
             ...textInputProps,
+            nativeID: inputDomId,
             multiline: true,
             textAlignVertical: "top",
             value: isControlled ? value : void 0,
@@ -35221,11 +35621,11 @@ var Textarea = react.forwardRef(function Textarea2({
               onBlur?.(event);
             },
             style: [
-              styles28.input,
+              styles30.input,
               textareaTypography.field,
               { color: chrome.textColor },
-              reactNative.Platform.OS === "web" ? styles28.inputWeb : null,
-              reactNative.Platform.OS === "android" ? styles28.inputAndroid : null,
+              reactNative.Platform.OS === "web" ? styles30.inputWeb : null,
+              reactNative.Platform.OS === "android" ? styles30.inputAndroid : null,
               inputStyle
             ],
             accessibilityLabel: resolvedAccessibilityLabel,
@@ -35234,10 +35634,10 @@ var Textarea = react.forwardRef(function Textarea2({
         )
       }
     ),
-    showHint && hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles28.hint, { color: chrome.hintColor }], children: hint }) : null
+    showHint && hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles30.hint, { color: chrome.hintColor }], children: hint }) : null
   ] });
 });
-var styles28 = reactNative.StyleSheet.create({
+var styles30 = reactNative.StyleSheet.create({
   root: {
     width: DEFAULT_WIDTH4,
     gap: 8,
@@ -35246,6 +35646,9 @@ var styles28 = reactNative.StyleSheet.create({
   disabled: {
     opacity: 0.6
   },
+  labelPressable: {
+    alignSelf: "flex-start"
+  },
   label: {
     ...textareaTypography.label
   },
@@ -35258,14 +35661,21 @@ var styles28 = reactNative.StyleSheet.create({
     paddingLeft: FIELD_PADDING_HORIZONTAL,
     paddingRight: FIELD_PADDING_HORIZONTAL
   },
+  fieldWeb: {
+    cursor: "text"
+  },
   input: {
     flex: 1,
+    alignSelf: "stretch",
     paddingVertical: 0,
     margin: 0
   },
   inputWeb: {
     outlineStyle: "none",
-    resize: "none"
+    resize: "none",
+    height: "100%",
+    minWidth: 0,
+    cursor: "text"
   },
   inputAndroid: {
     includeFontPadding: false
@@ -35337,13 +35747,13 @@ var Toggle = react.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__ */ jsxRuntime.jsx(
           reactNative.Animated.View,
           {
             style: [
-              styles29.track,
+              styles31.track,
               {
                 backgroundColor: trackBackgroundColor
               }
@@ -35352,7 +35762,7 @@ var Toggle = react.forwardRef(function Toggle2({
               reactNative.Animated.View,
               {
                 style: [
-                  styles29.thumb,
+                  styles31.thumb,
                   {
                     transform: [{ translateX: thumbTranslateX }]
                   }
@@ -35361,12 +35771,12 @@ var Toggle = react.forwardRef(function Toggle2({
             )
           }
         ),
-        labelContent != null && labelContent !== false ? typeof labelContent === "string" || typeof labelContent === "number" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles29.label, labelStyle], children: labelContent }) : labelContent : null
+        labelContent != null && labelContent !== false ? typeof labelContent === "string" || typeof labelContent === "number" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles31.label, labelStyle], children: labelContent }) : labelContent : null
       ]
     }
   );
 });
-var styles29 = reactNative.StyleSheet.create({
+var styles31 = reactNative.StyleSheet.create({
   pressable: {
     flexDirection: "row",
     alignItems: "center",
@@ -35419,13 +35829,13 @@ var ToggleRow = react.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: [
@@ -35433,7 +35843,7 @@ var ToggleRow = react.forwardRef(function ToggleRow2({
           reactNative.Text,
           {
             style: [
-              styles30.label,
+              styles32.label,
               {
                 fontSize: labelSize,
                 lineHeight: isDesktop ? 20 : 18,
@@ -35458,7 +35868,7 @@ var ToggleRow = react.forwardRef(function ToggleRow2({
     }
   );
 });
-var styles30 = reactNative.StyleSheet.create({
+var styles32 = reactNative.StyleSheet.create({
   root: {
     width: "100%",
     flexDirection: "row",
@@ -35530,21 +35940,21 @@ var RatingInput = react.forwardRef(
       {
         ...rest,
         ref: setContainerRef,
-        style: [styles31.root, disabled && styles31.disabled, style],
+        style: [styles33.root, disabled && styles33.disabled, style],
         children: [
-          showValue ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { numberOfLines: 1, style: [styles31.value, valueStyle], children: selectedValue.toFixed(precision) }) : null,
+          showValue ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { numberOfLines: 1, style: [styles33.value, valueStyle], children: selectedValue.toFixed(precision) }) : null,
           /* @__PURE__ */ jsxRuntime.jsx(
             reactNative.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__ */ jsxRuntime.jsx(StarFilledIcon, { size: iconWidth, height: iconHeight }) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(reactNative.View, { style: itemStyle, children: icon }, starValue);
                 }
@@ -35570,7 +35980,7 @@ var RatingInput = react.forwardRef(
     );
   }
 );
-var styles31 = reactNative.StyleSheet.create({
+var styles33 = reactNative.StyleSheet.create({
   root: {
     flexDirection: "row",
     alignItems: "center",
@@ -35634,19 +36044,19 @@ var CommentCard = react.forwardRef(
       setExpanded(next);
       onExpandedChange?.(next);
     };
-    return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ...rest, ref: setContainerRef, style: [styles32.root, style], children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles32.header, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles32.avatar, children: hasImage ? /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ...rest, ref: setContainerRef, style: [styles34.root, style], children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles34.header, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles34.avatar, children: hasImage ? /* @__PURE__ */ jsxRuntime.jsx(
           reactNative.Image,
           {
             source: { uri: imageUrl ?? void 0 },
-            style: styles32.avatarImage,
+            style: styles34.avatarImage,
             onError: () => setImageFailed(true)
           }
         ) : /* @__PURE__ */ jsxRuntime.jsx(UserIcon, { size: 20, color: colors.primary }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles32.identity, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { numberOfLines: 1, style: styles32.name, children: userName }),
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { numberOfLines: 1, style: styles32.date, children: date })
+        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles34.identity, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { numberOfLines: 1, style: styles34.name, children: userName }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { numberOfLines: 1, style: styles34.date, children: date })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(RatingInput, { value: rating, readOnly: true, showValue: false, size: 16 })
       ] }),
@@ -35654,7 +36064,7 @@ var CommentCard = react.forwardRef(
         reactNative.Text,
         {
           numberOfLines: expanded ? void 0 : maxCommentLines,
-          style: [styles32.comment, commentStyle],
+          style: [styles34.comment, commentStyle],
           children: commentText
         }
       ),
@@ -35667,14 +36077,14 @@ var CommentCard = react.forwardRef(
           hitSlop: 6,
           onHoverIn: () => setActionHovered(true),
           onHoverOut: () => setActionHovered(false),
-          style: styles32.action,
+          style: styles34.action,
           children: /* @__PURE__ */ jsxRuntime.jsx(
             reactNative.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
             }
@@ -35684,7 +36094,7 @@ var CommentCard = react.forwardRef(
     ] });
   }
 );
-var styles32 = reactNative.StyleSheet.create({
+var styles34 = reactNative.StyleSheet.create({
   root: {
     width: CARD_WIDTH2,
     minHeight: CARD_MIN_HEIGHT,
@@ -36123,7 +36533,7 @@ var Range = react.forwardRef(function Range2({
       ...rest,
       ref: setRootRef,
       onLayout,
-      style: [styles33.root, disabled && styles33.disabled, style],
+      style: [styles35.root, disabled && styles35.disabled, style],
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           reactNative.Pressable,
@@ -36137,16 +36547,16 @@ var Range = react.forwardRef(function Range2({
               updateNearestFromTrack(event.nativeEvent.offsetX);
             } : void 0,
             onPress: reactNative.Platform.OS === "web" ? void 0 : handleTrackPress,
-            style: styles33.sliderPlane,
+            style: styles35.sliderPlane,
             tabIndex: -1,
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { pointerEvents: "none", style: styles33.track }),
+              /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { pointerEvents: "none", style: styles35.track }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 reactNative.View,
                 {
                   pointerEvents: "none",
                   style: [
-                    styles33.activeTrack,
+                    styles35.activeTrack,
                     {
                       left: TRACK_HORIZONTAL_INSET + fromOffset,
                       width: toOffset - fromOffset + THUMB_SIZE2
@@ -36188,9 +36598,9 @@ var Range = react.forwardRef(function Range2({
                   onAccessibilityAction: (event) => handleAccessibilityAction(event, effectiveFrom, updateFromInput),
                   pointerEvents: disabled ? "none" : "auto",
                   style: [
-                    styles33.thumb,
-                    reactNative.Platform.OS === "web" && styles33.thumbWeb,
-                    focusedThumb === "from" && reactNative.Platform.OS === "web" && styles33.thumbFocusedWeb,
+                    styles35.thumb,
+                    reactNative.Platform.OS === "web" && styles35.thumbWeb,
+                    focusedThumb === "from" && reactNative.Platform.OS === "web" && styles35.thumbFocusedWeb,
                     { left: TRACK_HORIZONTAL_INSET + fromOffset }
                   ],
                   tabIndex: disabled ? -1 : 0
@@ -36230,9 +36640,9 @@ var Range = react.forwardRef(function Range2({
                   onAccessibilityAction: (event) => handleAccessibilityAction(event, effectiveTo, updateToInput),
                   pointerEvents: disabled ? "none" : "auto",
                   style: [
-                    styles33.thumb,
-                    reactNative.Platform.OS === "web" && styles33.thumbWeb,
-                    focusedThumb === "to" && reactNative.Platform.OS === "web" && styles33.thumbFocusedWeb,
+                    styles35.thumb,
+                    reactNative.Platform.OS === "web" && styles35.thumbWeb,
+                    focusedThumb === "to" && reactNative.Platform.OS === "web" && styles35.thumbFocusedWeb,
                     { left: TRACK_HORIZONTAL_INSET + toOffset }
                   ],
                   tabIndex: disabled ? -1 : 0
@@ -36241,7 +36651,7 @@ var Range = react.forwardRef(function Range2({
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles33.inputs, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles35.inputs, children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             RangeInput,
             {
@@ -36292,7 +36702,7 @@ function RangeInput({
   placeholder,
   value
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles33.inputField, focused && styles33.inputFieldFocused], children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles35.inputField, focused && styles35.inputFieldFocused], children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       reactNative.TextInput,
       {
@@ -36308,15 +36718,15 @@ function RangeInput({
         placeholder,
         placeholderTextColor: colors.grey150,
         returnKeyType: "done",
-        style: [styles33.input, reactNative.Platform.OS === "web" && styles33.inputWeb],
+        style: [styles35.input, reactNative.Platform.OS === "web" && styles35.inputWeb],
         tabIndex: disabled ? -1 : void 0,
         value
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles33.currencySlot, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles33.currency, children: currency }) })
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles35.currencySlot, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles35.currency, children: currency }) })
   ] });
 }
-var styles33 = reactNative.StyleSheet.create({
+var styles35 = reactNative.StyleSheet.create({
   root: {
     width: DEFAULT_WIDTH5,
     gap: 15,
@@ -36582,6 +36992,8 @@ exports.HelpCircleIcon = HelpCircleIcon;
 exports.HideIcon = HideIcon;
 exports.HomeIcon = HomeIcon;
 exports.Icon = Icon;
+exports.IconStatusBadge = IconStatusBadge;
+exports.InfoCardV2 = InfoCardV2;
 exports.InfoTile = InfoTile;
 exports.Input = Input;
 exports.InstagramIcon = InstagramIcon;
@@ -36603,6 +37015,7 @@ exports.MenuItem = MenuItem;
 exports.MenuLinesIcon = MenuLinesIcon;
 exports.MinusIcon = MinusIcon;
 exports.Modal = Modal;
+exports.MoreHorizontalIcon = MoreHorizontalIcon;
 exports.NavigateIcon = NavigateIcon;
 exports.NoSmokingIcon = NoSmokingIcon;
 exports.PaginationDots = PaginationDots;
@@ -36632,6 +37045,7 @@ exports.StatCard = StatCard;
 exports.StatusBadge = StatusBadge;
 exports.StepList = StepList;
 exports.StepPager = StepPager;
+exports.TableViewIcon = TableViewIcon;
 exports.Textarea = Textarea;
 exports.Toggle = Toggle;
 exports.ToggleRow = ToggleRow;