@ecohouse/ui 0.1.17 → 0.1.19

package/dist/index.js

@@ -1,5 +1,5 @@
 import { forwardRef, useRef, useMemo, useState, useCallback, useEffect, useLayoutEffect, isValidElement, cloneElement } from 'react';
-import { Pressable, View, Text, StyleSheet, Platform, Image, Animated, Easing, TouchableOpacity, TextInput, ScrollView } from 'react-native';
+import { Pressable, View, Text, StyleSheet, Platform, Image, Animated, Easing, TouchableOpacity, TextInput, ScrollView, PanResponder } from 'react-native';
 import Svg14, { Path } from 'react-native-svg';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -476,11 +476,18 @@ var CARD_LOCATION_DOT_PATH = "M6.49967 5.95833C7.24755 5.95833 7.85384 5.35205 7
 var GUESTS_PATH = "M8.20008 8.14683C8.5558 7.83892 8.84111 7.45809 9.03666 7.03018C9.23221 6.60227 9.33342 6.1373 9.33342 5.66683C9.33342 4.78277 8.98223 3.93493 8.3571 3.30981C7.73198 2.68469 6.88414 2.3335 6.00008 2.3335C5.11603 2.3335 4.26818 2.68469 3.64306 3.30981C3.01794 3.93493 2.66675 4.78277 2.66675 5.66683C2.66674 6.1373 2.76795 6.60227 2.9635 7.03018C3.15905 7.45809 3.44436 7.83892 3.80008 8.14683C2.86684 8.56942 2.07506 9.25185 1.5194 10.1125C0.963745 10.9732 0.667729 11.9757 0.666748 13.0002C0.666748 13.177 0.736986 13.3465 0.86201 13.4716C0.987034 13.5966 1.1566 13.6668 1.33341 13.6668C1.51023 13.6668 1.6798 13.5966 1.80482 13.4716C1.92984 13.3465 2.00008 13.177 2.00008 13.0002C2.00008 11.9393 2.42151 10.9219 3.17165 10.1717C3.9218 9.42159 4.93922 9.00016 6.00008 9.00016C7.06095 9.00016 8.07836 9.42159 8.82851 10.1717C9.57865 10.9219 10.0001 11.9393 10.0001 13.0002C10.0001 13.177 10.0703 13.3465 10.1953 13.4716C10.3204 13.5966 10.4899 13.6668 10.6667 13.6668C10.8436 13.6668 11.0131 13.5966 11.1382 13.4716C11.2632 13.3465 11.3334 13.177 11.3334 13.0002C11.3324 11.9757 11.0364 10.9732 10.4808 10.1125C9.92511 9.25185 9.13332 8.56942 8.20008 8.14683ZM6.00008 7.66683C5.60452 7.66683 5.21784 7.54953 4.88894 7.32977C4.56004 7.11001 4.3037 6.79765 4.15232 6.4322C4.00095 6.06674 3.96134 5.66461 4.03851 5.27665C4.11568 4.88869 4.30616 4.53232 4.58587 4.25262C4.86557 3.97291 5.22194 3.78243 5.6099 3.70526C5.99786 3.62809 6.4 3.6677 6.76545 3.81907C7.1309 3.97045 7.44326 4.22679 7.66302 4.55569C7.88278 4.88459 8.00008 5.27127 8.00008 5.66683C8.00008 6.19726 7.78937 6.70597 7.4143 7.08104C7.03922 7.45612 6.53051 7.66683 6.00008 7.66683ZM12.4934 7.88016C12.9201 7.39972 13.1988 6.8062 13.2959 6.17106C13.3931 5.53591 13.3047 4.88621 13.0413 4.30016C12.7778 3.71411 12.3506 3.21669 11.8111 2.86778C11.2715 2.51886 10.6426 2.33332 10.0001 2.3335C9.82327 2.3335 9.6537 2.40373 9.52868 2.52876C9.40365 2.65378 9.33342 2.82335 9.33342 3.00016C9.33342 3.17697 9.40365 3.34654 9.52868 3.47157C9.6537 3.59659 9.82327 3.66683 10.0001 3.66683C10.5305 3.66683 11.0392 3.87754 11.4143 4.25262C11.7894 4.62769 12.0001 5.1364 12.0001 5.66683C11.9991 6.01699 11.9063 6.36076 11.7308 6.66378C11.5553 6.96679 11.3033 7.21842 11.0001 7.3935C10.9012 7.45051 10.8187 7.53194 10.7603 7.62999C10.702 7.72804 10.6697 7.83943 10.6667 7.9535C10.664 8.06667 10.69 8.17869 10.7425 8.279C10.795 8.37931 10.8722 8.4646 10.9667 8.52683L11.2267 8.70016L11.3134 8.74683C12.117 9.12797 12.795 9.73082 13.2674 10.4844C13.7398 11.2379 13.9871 12.1108 13.9801 13.0002C13.9801 13.177 14.0503 13.3465 14.1753 13.4716C14.3004 13.5966 14.4699 13.6668 14.6467 13.6668C14.8236 13.6668 14.9931 13.5966 15.1182 13.4716C15.2432 13.3465 15.3134 13.177 15.3134 13.0002C15.3189 11.9771 15.0626 10.9697 14.5691 10.0735C14.0755 9.17741 13.361 8.42237 12.4934 7.88016Z";
 var BEDROOMS_PATH = "M4.66675 8.33333C5.06231 8.33333 5.44899 8.21604 5.77789 7.99627C6.10679 7.77651 6.36313 7.46415 6.51451 7.0987C6.66588 6.73325 6.70549 6.33111 6.62832 5.94315C6.55115 5.55519 6.36067 5.19882 6.08096 4.91912C5.80126 4.63941 5.44489 4.44893 5.05693 4.37176C4.66897 4.29459 4.26683 4.3342 3.90138 4.48557C3.53593 4.63695 3.22357 4.89329 3.00381 5.22219C2.78405 5.55109 2.66675 5.93777 2.66675 6.33333C2.66675 6.86377 2.87746 7.37247 3.25253 7.74755C3.62761 8.12262 4.13632 8.33333 4.66675 8.33333ZM4.66675 5.66667C4.7986 5.66667 4.9275 5.70577 5.03713 5.77902C5.14676 5.85227 5.23221 5.95639 5.28267 6.07821C5.33313 6.20003 5.34633 6.33407 5.32061 6.46339C5.29488 6.59271 5.23139 6.7115 5.13815 6.80474C5.04492 6.89797 4.92613 6.96147 4.79681 6.98719C4.66749 7.01291 4.53344 6.99971 4.41163 6.94925C4.28981 6.89879 4.18569 6.81335 4.11244 6.70371C4.03918 6.59408 4.00008 6.46519 4.00008 6.33333C4.00008 6.15652 4.07032 5.98695 4.19534 5.86193C4.32037 5.7369 4.48994 5.66667 4.66675 5.66667ZM13.3334 4.33333H8.00008C7.82327 4.33333 7.6537 4.40357 7.52868 4.5286C7.40365 4.65362 7.33342 4.82319 7.33342 5V9H2.00008V3.66667C2.00008 3.48986 1.92984 3.32029 1.80482 3.19526C1.6798 3.07024 1.51023 3 1.33341 3C1.1566 3 0.987034 3.07024 0.86201 3.19526C0.736986 3.32029 0.666748 3.48986 0.666748 3.66667V12.3333C0.666748 12.5101 0.736986 12.6797 0.86201 12.8047C0.987034 12.9298 1.1566 13 1.33341 13C1.51023 13 1.6798 12.9298 1.80482 12.8047C1.92984 12.6797 2.00008 12.5101 2.00008 12.3333V10.3333H14.0001V12.3333C14.0001 12.5101 14.0703 12.6797 14.1953 12.8047C14.3204 12.9298 14.4899 13 14.6667 13C14.8436 13 15.0131 12.9298 15.1382 12.8047C15.2632 12.6797 15.3334 12.5101 15.3334 12.3333V6.33333C15.3334 5.8029 15.1227 5.29419 14.7476 4.91912C14.3726 4.54405 13.8638 4.33333 13.3334 4.33333ZM14.0001 9H8.66675V5.66667H13.3334C13.5102 5.66667 13.6798 5.7369 13.8048 5.86193C13.9298 5.98695 14.0001 6.15652 14.0001 6.33333V9Z";
 var BATHROOMS_PATH = "M14.6667 7.99999H3.33341V4.27343C3.33108 4.03335 3.39444 3.7972 3.51664 3.59053C3.63885 3.38386 3.81525 3.21454 4.02675 3.10091C4.26062 2.97416 4.52713 2.92047 4.79184 2.94677C4.65711 3.35481 4.63797 3.79218 4.73654 4.21043C4.83511 4.62868 5.04755 5.01147 5.35031 5.3164L6.05737 6.02343C6.11926 6.08535 6.19274 6.13447 6.27362 6.16798C6.3545 6.20149 6.44118 6.21874 6.52873 6.21874C6.61627 6.21874 6.70296 6.20149 6.78384 6.16798C6.86471 6.13447 6.93819 6.08535 7.00008 6.02343L9.35686 3.66666C9.41877 3.60477 9.46789 3.53129 9.5014 3.45041C9.53492 3.36954 9.55217 3.28285 9.55217 3.19531C9.55217 3.10776 9.53492 3.02108 9.5014 2.9402C9.46789 2.85932 9.41877 2.78584 9.35686 2.72395L8.64982 2.01692C8.2563 1.62517 7.73578 1.38688 7.18209 1.34501C6.6284 1.30314 6.07796 1.46045 5.63001 1.78857C5.22612 1.63083 4.78981 1.57415 4.35902 1.62346C3.92824 1.67277 3.51602 1.82658 3.15823 2.07151C2.80043 2.31644 2.50789 2.64507 2.30605 3.02883C2.1042 3.41258 1.99917 3.83984 2.00008 4.27343V7.99999H1.33341C1.1566 7.99999 0.987034 8.07023 0.86201 8.19526C0.736986 8.32028 0.666748 8.48985 0.666748 8.66666C0.666748 8.84347 0.736986 9.01304 0.86201 9.13806C0.987034 9.26309 1.1566 9.33333 1.33341 9.33333H2.00008V11.3333C2.00135 11.7456 2.1302 12.1473 2.36893 12.4834C2.60766 12.8195 2.94458 13.0735 3.33341 13.2104V14C3.33341 14.1768 3.40365 14.3464 3.52868 14.4714C3.6537 14.5964 3.82327 14.6667 4.00008 14.6667C4.17689 14.6667 4.34646 14.5964 4.47149 14.4714C4.59651 14.3464 4.66675 14.1768 4.66675 14V13.3333H11.3334V14C11.3334 14.1768 11.4037 14.3464 11.5287 14.4714C11.6537 14.5964 11.8233 14.6667 12.0001 14.6667C12.1769 14.6667 12.3465 14.5964 12.4715 14.4714C12.5965 14.3464 12.6667 14.1768 12.6667 14V13.2105C13.0556 13.0735 13.3925 12.8195 13.6312 12.4834C13.87 12.1473 13.9988 11.7456 14.0001 11.3333V9.33333H14.6667C14.8436 9.33333 15.0131 9.26309 15.1382 9.13806C15.2632 9.01304 15.3334 8.84347 15.3334 8.66666C15.3334 8.48985 15.2632 8.32028 15.1382 8.19526C15.0131 8.07023 14.8436 7.99999 14.6667 7.99999ZM6.29305 2.95963C6.48074 2.77244 6.735 2.66731 7.00008 2.66731C7.26516 2.66731 7.51943 2.77244 7.70711 2.95963L7.94279 3.19531L6.52875 4.60937L6.29307 4.37369C6.10577 4.18606 6.00058 3.93178 6.00058 3.66666C6.00057 3.40155 6.10576 3.14727 6.29305 2.95963ZM12.6667 11.3333C12.6666 11.5101 12.5964 11.6796 12.4714 11.8046C12.3464 11.9296 12.1769 11.9999 12.0001 12H4.00008C3.82331 11.9999 3.65381 11.9296 3.52881 11.8046C3.40381 11.6796 3.33353 11.5101 3.33341 11.3333V9.33333H12.6667V11.3333Z";
-function SaveHeartIcon({ size = 16, color = colors.white, strokeWidth = 2 }) {
+function SaveHeartIcon({
+  size = 16,
+  color = colors.white,
+  strokeWidth = 2,
+  fillOpacity = 0
+}) {
   return /* @__PURE__ */ jsx(Svg14, { width: size, height: size, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx(
     Path,
     {
       d: SAVE_HEART_PATH,
+      fill: color,
+      fillOpacity,
       stroke: color,
       strokeWidth,
       strokeLinecap: "round",
@@ -1386,6 +1393,85 @@ var styles = StyleSheet.create({
     flex: 1
   }
 });
+var ICON_SIZE2 = 16;
+var BACKGROUND_COLOR = "#09090966";
+var webBlurStyle = Platform.OS === "web" ? {
+  backdropFilter: "blur(10px)",
+  WebkitBackdropFilter: "blur(10px)"
+} : {};
+var FavoritesButton = forwardRef(
+  function FavoritesButton2({
+    value,
+    defaultValue = false,
+    onValueChange,
+    disabled = false,
+    style,
+    className,
+    accessibilityLabel,
+    hitSlop = 8,
+    ...rest
+  }, forwardedRef) {
+    const buttonRef = useRef(null);
+    const isControlled = typeof value === "boolean";
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+    const isActive = isControlled ? value : uncontrolledValue;
+    const setButtonRef = useMemo(() => mergeRefs(buttonRef, forwardedRef), [forwardedRef]);
+    useApplyWebClassName(buttonRef, className?.trim() || void 0);
+    const handlePress = () => {
+      const nextValue = !isActive;
+      if (!isControlled) setUncontrolledValue(nextValue);
+      onValueChange?.(nextValue);
+    };
+    return /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        ...rest,
+        ref: setButtonRef,
+        accessibilityLabel: accessibilityLabel ?? (isActive ? "Remove from favorites" : "Add to favorites"),
+        accessibilityRole: "togglebutton",
+        accessibilityState: { checked: isActive, disabled },
+        disabled,
+        hitSlop,
+        onPress: handlePress,
+        style: ({ pressed }) => [
+          styles2.button,
+          webBlurStyle,
+          pressed && styles2.pressed,
+          disabled && styles2.disabled,
+          style
+        ],
+        children: /* @__PURE__ */ jsx(
+          SaveHeartIcon,
+          {
+            color: isActive ? colors.red : colors.white,
+            fillOpacity: isActive ? 1 : 0,
+            size: ICON_SIZE2,
+            strokeWidth: 2
+          }
+        )
+      }
+    );
+  }
+);
+var styles2 = StyleSheet.create({
+  button: {
+    padding: 12,
+    gap: 10,
+    alignItems: "center",
+    justifyContent: "center",
+    alignSelf: "flex-start",
+    borderRadius: 39,
+    borderWidth: 1,
+    borderColor: colors.whiteAlpha10,
+    backgroundColor: BACKGROUND_COLOR
+  },
+  pressed: {
+    opacity: 0.8
+  },
+  disabled: {
+    opacity: 0.5
+  }
+});
 
 // src/primitives/BrandLogo/brandLogoPaths.ts
 var BRAND_LOGO_PATHS = [
@@ -1545,7 +1631,7 @@ var Avatar = forwardRef(function Avatar2({
   }, [isOpen, closeAndFocusTrigger]);
   const hasImage = Boolean(imageUrl) && !imageFailed;
   const resolvedAccessibilityLabel = accessibilityLabel ?? [name, email].filter(Boolean).join(", ");
-  return /* @__PURE__ */ jsxs(View, { ref: wrapperRef, style: [styles2.wrapper, isOpen && styles2.wrapperOpen], children: [
+  return /* @__PURE__ */ jsxs(View, { ref: wrapperRef, style: [styles3.wrapper, isOpen && styles3.wrapperOpen], children: [
     /* @__PURE__ */ jsxs(
       Pressable,
       {
@@ -1557,25 +1643,25 @@ var Avatar = forwardRef(function Avatar2({
         accessibilityRole: isInteractive ? "button" : void 0,
         accessibilityLabel: resolvedAccessibilityLabel,
         accessibilityState: isInteractive ? { disabled, expanded: hasMenu ? isOpen : void 0 } : void 0,
-        style: [styles2.root, disabled && styles2.disabled, style],
+        style: [styles3.root, disabled && styles3.disabled, style],
         children: [
-          /* @__PURE__ */ jsx(View, { style: styles2.imageWrap, children: hasImage ? /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(View, { style: styles3.imageWrap, children: hasImage ? /* @__PURE__ */ jsx(
             Image,
             {
               source: { uri: imageUrl ?? void 0 },
-              style: styles2.image,
+              style: styles3.image,
               onError: () => setImageFailed(true)
             }
-          ) : /* @__PURE__ */ jsx(View, { style: styles2.imageFallback, children: /* @__PURE__ */ jsx(UserIcon, { size: FALLBACK_ICON_SIZE, color: colors.primary }) }) }),
-          /* @__PURE__ */ jsxs(View, { style: styles2.textColumn, children: [
-            /* @__PURE__ */ jsx(Text, { style: styles2.name, numberOfLines: 1, children: name }),
-            email ? /* @__PURE__ */ jsx(Text, { style: styles2.email, numberOfLines: 1, children: email }) : null
+          ) : /* @__PURE__ */ jsx(View, { style: styles3.imageFallback, children: /* @__PURE__ */ jsx(UserIcon, { size: FALLBACK_ICON_SIZE, color: colors.primary }) }) }),
+          /* @__PURE__ */ jsxs(View, { style: styles3.textColumn, children: [
+            /* @__PURE__ */ jsx(Text, { style: styles3.name, numberOfLines: 1, children: name }),
+            email ? /* @__PURE__ */ jsx(Text, { style: styles3.email, numberOfLines: 1, children: email }) : null
           ] }),
-          showChevron ? /* @__PURE__ */ jsx(View, { style: [styles2.chevronSlot, isOpen && styles2.chevronOpen], children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: CHEVRON_SIZE, color: isOpen ? colors.primary : colors.grey100 }) }) : null
+          showChevron ? /* @__PURE__ */ jsx(View, { style: [styles3.chevronSlot, isOpen && styles3.chevronOpen], children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: CHEVRON_SIZE, color: isOpen ? colors.primary : colors.grey100 }) }) : null
         ]
       }
     ),
-    hasMenu && isOpen ? /* @__PURE__ */ jsx(View, { style: [styles2.menu, menuWidth != null && { right: void 0, width: menuWidth }], children: resolvedMenuItems.map((item) => {
+    hasMenu && isOpen ? /* @__PURE__ */ jsx(View, { style: [styles3.menu, menuWidth != null && { right: void 0, width: menuWidth }], children: resolvedMenuItems.map((item) => {
       const itemKey = item.key ?? item.label;
       return /* @__PURE__ */ jsx(
         MenuItem,
@@ -1592,7 +1678,7 @@ var Avatar = forwardRef(function Avatar2({
     }) }) : null
   ] });
 });
-var styles2 = StyleSheet.create({
+var styles3 = StyleSheet.create({
   wrapper: {
     position: "relative",
     alignSelf: "flex-start"
@@ -1677,8 +1763,8 @@ var styles2 = StyleSheet.create({
     })
   }
 });
-var ICON_SIZE2 = 20;
-var webBlurStyle = Platform.OS === "web" ? {
+var ICON_SIZE3 = 20;
+var webBlurStyle2 = Platform.OS === "web" ? {
   backdropFilter: "blur(10.3px)",
   WebkitBackdropFilter: "blur(10.3px)"
 } : {};
@@ -1708,22 +1794,22 @@ var Badge = forwardRef(function Badge2({ label, variant = "default", icon: Icon2
       ...rest,
       ref: setContainerRef,
       style: [
-        styles3.base,
+        styles4.base,
         { backgroundColor: preset.backgroundColor },
-        preset.border ? styles3.transparentBorder : null,
-        preset.blur ? webBlurStyle : null,
+        preset.border ? styles4.transparentBorder : null,
+        preset.blur ? webBlurStyle2 : null,
         style
       ],
       accessibilityRole: "text",
       accessibilityLabel: accessibilityLabel ?? label,
       children: [
-        Icon2 ? /* @__PURE__ */ jsx(View, { style: styles3.iconSlot, children: /* @__PURE__ */ jsx(Icon2, { size: ICON_SIZE2, color: preset.iconColor }) }) : null,
-        /* @__PURE__ */ jsx(Text, { style: [styles3.label, Platform.OS === "android" ? styles3.labelAndroid : null], children: label })
+        Icon2 ? /* @__PURE__ */ jsx(View, { style: styles4.iconSlot, children: /* @__PURE__ */ jsx(Icon2, { size: ICON_SIZE3, color: preset.iconColor }) }) : null,
+        /* @__PURE__ */ jsx(Text, { style: [styles4.label, Platform.OS === "android" ? styles4.labelAndroid : null], children: label })
       ]
     }
   );
 });
-var styles3 = StyleSheet.create({
+var styles4 = StyleSheet.create({
   base: {
     flexDirection: "row",
     alignItems: "center",
@@ -1744,8 +1830,8 @@ var styles3 = StyleSheet.create({
     borderStyle: "solid"
   },
   iconSlot: {
-    width: ICON_SIZE2,
-    height: ICON_SIZE2,
+    width: ICON_SIZE3,
+    height: ICON_SIZE3,
     alignItems: "center",
     justifyContent: "center",
     flexShrink: 0
@@ -1759,7 +1845,7 @@ var styles3 = StyleSheet.create({
   }
 });
 var BUTTON_SIZE = 32;
-var webBlurStyle2 = Platform.OS === "web" ? {
+var webBlurStyle3 = Platform.OS === "web" ? {
   backdropFilter: "blur(20px)",
   WebkitBackdropFilter: "blur(20px)"
 } : {};
@@ -1796,7 +1882,7 @@ var Counter = forwardRef(function Counter2({
     if (!isControlled) setUncontrolledValue(next);
     onValueChange?.(next);
   };
-  return /* @__PURE__ */ jsxs(View, { ...rest, ref: setContainerRef, style: [styles4.base, style], children: [
+  return /* @__PURE__ */ jsxs(View, { ...rest, ref: setContainerRef, style: [styles5.base, style], children: [
     /* @__PURE__ */ jsx(
       Pressable,
       {
@@ -1806,11 +1892,11 @@ var Counter = forwardRef(function Counter2({
         accessibilityRole: "button",
         accessibilityLabel: "Decrease value",
         accessibilityState: { disabled: decrementDisabled },
-        style: [styles4.button, webBlurStyle2, decrementDisabled && styles4.buttonDisabled],
+        style: [styles5.button, webBlurStyle3, decrementDisabled && styles5.buttonDisabled],
         children: /* @__PURE__ */ jsx(MinusIcon, {})
       }
     ),
-    /* @__PURE__ */ jsx(Text, { style: styles4.value, children: resolvedValue }),
+    /* @__PURE__ */ jsx(Text, { style: styles5.value, children: resolvedValue }),
     /* @__PURE__ */ jsx(
       Pressable,
       {
@@ -1820,13 +1906,13 @@ var Counter = forwardRef(function Counter2({
         accessibilityRole: "button",
         accessibilityLabel: "Increase value",
         accessibilityState: { disabled: incrementDisabled },
-        style: [styles4.button, webBlurStyle2, incrementDisabled && styles4.buttonDisabled],
+        style: [styles5.button, webBlurStyle3, incrementDisabled && styles5.buttonDisabled],
         children: /* @__PURE__ */ jsx(PlusIcon, {})
       }
     )
   ] });
 });
-var styles4 = StyleSheet.create({
+var styles5 = StyleSheet.create({
   base: {
     flexDirection: "row",
     alignItems: "center",
@@ -1850,7 +1936,7 @@ var styles4 = StyleSheet.create({
     color: colors.white
   }
 });
-var ICON_SIZE3 = 20;
+var ICON_SIZE4 = 20;
 var ANIMATION_DURATION = 200;
 var OPTION_HORIZONTAL_PADDING = 16;
 var SegmentedToggle = forwardRef(
@@ -1917,9 +2003,9 @@ var SegmentedToggle = forwardRef(
           onLayout?.(event);
         },
         style: [
-          styles5.base,
-          fullWidth ? styles5.fullWidth : styles5.contentWidth,
-          disabled && styles5.disabled,
+          styles6.base,
+          fullWidth ? styles6.fullWidth : styles6.contentWidth,
+          disabled && styles6.disabled,
           style
         ],
         accessibilityRole: "radiogroup",
@@ -1929,7 +2015,7 @@ var SegmentedToggle = forwardRef(
             {
               pointerEvents: "none",
               style: [
-                styles5.activeIndicator,
+                styles6.activeIndicator,
                 { width: optionWidth, transform: [{ translateX: indicatorTranslateX }] }
               ]
             }
@@ -1948,8 +2034,8 @@ var SegmentedToggle = forwardRef(
                 accessibilityLabel: label,
                 accessibilityState: { selected, disabled },
                 style: [
-                  styles5.option,
-                  fullWidth ? styles5.optionFullWidth : optionWidth > 0 && { minWidth: optionWidth }
+                  styles6.option,
+                  fullWidth ? styles6.optionFullWidth : optionWidth > 0 && { minWidth: optionWidth }
                 ],
                 children: /* @__PURE__ */ jsxs(
                   View,
@@ -1963,10 +2049,10 @@ var SegmentedToggle = forwardRef(
                         return nextWidths;
                       });
                     },
-                    style: styles5.optionContent,
+                    style: styles6.optionContent,
                     children: [
-                      Icon2 ? /* @__PURE__ */ jsx(Icon2, { size: ICON_SIZE3, color: iconColor }) : null,
-                      /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [styles5.label, { color: labelColor }], children: label })
+                      Icon2 ? /* @__PURE__ */ jsx(Icon2, { size: ICON_SIZE4, color: iconColor }) : null,
+                      /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [styles6.label, { color: labelColor }], children: label })
                     ]
                   }
                 )
@@ -1979,7 +2065,7 @@ var SegmentedToggle = forwardRef(
     );
   }
 );
-var styles5 = StyleSheet.create({
+var styles6 = StyleSheet.create({
   base: {
     height: 44,
     flexDirection: "row",
@@ -2037,7 +2123,7 @@ var defaultLanguageOptions = [
 ];
 var CONTROL_WIDTH = 90;
 var CONTROL_HEIGHT = 35;
-var ICON_SIZE4 = 16;
+var ICON_SIZE5 = 16;
 var LanguageSwitcher = forwardRef(
   function LanguageSwitcher2({
     options = defaultLanguageOptions,
@@ -2117,7 +2203,7 @@ var LanguageSwitcher = forwardRef(
       {
         ...rest,
         ref: setWrapperRef,
-        style: [styles6.wrapper, isOpen && styles6.wrapperOpen, disabled && styles6.disabled, style],
+        style: [styles7.wrapper, isOpen && styles7.wrapperOpen, disabled && styles7.disabled, style],
         children: [
           /* @__PURE__ */ jsxs(
             Pressable,
@@ -2132,17 +2218,17 @@ var LanguageSwitcher = forwardRef(
               onHoverIn: () => setTriggerHovered(true),
               onHoverOut: () => setTriggerHovered(false),
               style: ({ pressed }) => [
-                styles6.trigger,
-                (triggerHovered || pressed || isOpen) && styles6.triggerActive
+                styles7.trigger,
+                (triggerHovered || pressed || isOpen) && styles7.triggerActive
               ],
               children: [
-                /* @__PURE__ */ jsx(GlobeIcon, { size: ICON_SIZE4, color: colors.white, strokeWidth: 2 }),
-                /* @__PURE__ */ jsx(Text, { style: styles6.triggerLabel, numberOfLines: 1, children: selectedOption?.label ?? "" }),
-                /* @__PURE__ */ jsx(View, { style: [styles6.chevron, isOpen && styles6.chevronOpen], children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: ICON_SIZE4, color: colors.white, strokeWidth: 2 }) })
+                /* @__PURE__ */ jsx(GlobeIcon, { size: ICON_SIZE5, color: colors.white, strokeWidth: 2 }),
+                /* @__PURE__ */ jsx(Text, { style: styles7.triggerLabel, numberOfLines: 1, children: selectedOption?.label ?? "" }),
+                /* @__PURE__ */ jsx(View, { style: [styles7.chevron, isOpen && styles7.chevronOpen], children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: ICON_SIZE5, color: colors.white, strokeWidth: 2 }) })
               ]
             }
           ),
-          isOpen && options.length > 0 ? /* @__PURE__ */ jsx(View, { style: styles6.menu, accessibilityRole: "menu", children: options.map((option) => {
+          isOpen && options.length > 0 ? /* @__PURE__ */ jsx(View, { style: styles7.menu, accessibilityRole: "menu", children: options.map((option) => {
             const selected = option.value === selectedValue;
             return /* @__PURE__ */ jsx(
               Pressable,
@@ -2154,10 +2240,10 @@ var LanguageSwitcher = forwardRef(
                 onHoverIn: () => setHoveredValue(option.value),
                 onHoverOut: () => setHoveredValue(null),
                 style: ({ pressed }) => [
-                  styles6.item,
-                  selected ? styles6.itemSelected : (hoveredValue === option.value || pressed) && styles6.itemHovered
+                  styles7.item,
+                  selected ? styles7.itemSelected : (hoveredValue === option.value || pressed) && styles7.itemHovered
                 ],
-                children: /* @__PURE__ */ jsx(Text, { style: [styles6.itemLabel, selected && styles6.itemLabelSelected], children: option.label })
+                children: /* @__PURE__ */ jsx(Text, { style: [styles7.itemLabel, selected && styles7.itemLabelSelected], children: option.label })
               },
               option.value
             );
@@ -2167,7 +2253,7 @@ var LanguageSwitcher = forwardRef(
     );
   }
 );
-var styles6 = StyleSheet.create({
+var styles7 = StyleSheet.create({
   wrapper: {
     position: "relative",
     width: CONTROL_WIDTH,
@@ -2200,8 +2286,8 @@ var styles6 = StyleSheet.create({
     color: colors.white
   },
   chevron: {
-    width: ICON_SIZE4,
-    height: ICON_SIZE4,
+    width: ICON_SIZE5,
+    height: ICON_SIZE5,
     flexShrink: 0,
     alignItems: "center",
     justifyContent: "center"
@@ -2243,8 +2329,17 @@ var styles6 = StyleSheet.create({
     color: colors.primary
   }
 });
-var ICON_SIZE5 = 28;
-var StatCard = forwardRef(function StatCard2({ label, icon: Icon2, style, className, accessibilityLabel, ...rest }, forwardedRef) {
+var ICON_SIZE6 = 28;
+var StatCard = forwardRef(function StatCard2({
+  label,
+  icon: Icon2,
+  iconProps,
+  iconSize = ICON_SIZE6,
+  style,
+  className,
+  accessibilityLabel,
+  ...rest
+}, forwardedRef) {
   const containerRef = useRef(null);
   const resolvedClassName = className?.trim() || void 0;
   const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
@@ -2254,17 +2349,17 @@ var StatCard = forwardRef(function StatCard2({ label, icon: Icon2, style, classN
     {
       ...rest,
       ref: setContainerRef,
-      style: [styles7.base, style],
+      style: [styles8.base, style],
       accessibilityRole: "text",
       accessibilityLabel: accessibilityLabel ?? label,
       children: [
-        /* @__PURE__ */ jsx(Icon2, { size: ICON_SIZE5, color: colors.white }),
-        /* @__PURE__ */ jsx(Text, { style: styles7.label, children: label })
+        /* @__PURE__ */ jsx(Icon2, { ...iconProps, size: iconSize, color: iconProps?.color ?? colors.white }),
+        /* @__PURE__ */ jsx(Text, { style: styles8.label, children: label })
       ]
     }
   );
 });
-var styles7 = StyleSheet.create({
+var styles8 = StyleSheet.create({
   base: {
     width: 204.5,
     minHeight: 114,
@@ -2350,7 +2445,7 @@ var Button = forwardRef(
     useApplyWebClassName(textRef, textClassName);
     const iconNode = customIcon ?? /* @__PURE__ */ jsx(ArrowRightIcon, { size: metrics.iconSize, color: preset.iconColor });
     const containerStyle = [
-      styles8.base,
+      styles9.base,
       {
         minHeight: metrics.minHeight,
         borderRadius: metrics.borderRadius,
@@ -2361,16 +2456,16 @@ var Button = forwardRef(
         paddingRight: hasIcon ? metrics.paddingRightWithIcon : metrics.paddingRight,
         gap: hasIcon ? metrics.gap : 0
       },
-      hasIcon ? styles8.contentWithIcon : styles8.contentWithoutIcon,
-      disabled && styles8.disabled,
+      hasIcon ? styles9.contentWithIcon : styles9.contentWithoutIcon,
+      disabled && styles9.disabled,
       style
     ];
     const labelStyle = [
-      styles8.label,
+      styles9.label,
       metrics.text,
       { color: preset.textColor },
-      Platform.OS === "android" ? styles8.labelAndroid : null,
-      !hasIcon && styles8.labelCentered,
+      Platform.OS === "android" ? styles9.labelAndroid : null,
+      !hasIcon && styles9.labelCentered,
       textStyle
     ];
     return /* @__PURE__ */ jsxs(
@@ -2391,7 +2486,7 @@ var Button = forwardRef(
             View,
             {
               style: [
-                styles8.iconContainer,
+                styles9.iconContainer,
                 {
                   width: metrics.iconContainerSize,
                   height: metrics.iconContainerSize,
@@ -2407,7 +2502,7 @@ var Button = forwardRef(
     );
   }
 );
-var styles8 = StyleSheet.create({
+var styles9 = StyleSheet.create({
   base: {
     flexDirection: "row",
     alignItems: "center",
@@ -2491,13 +2586,13 @@ var Checkbox = forwardRef(function Checkbox2({
       accessibilityRole: "checkbox",
       accessibilityLabel: resolvedAccessibilityLabel,
       accessibilityState: { checked: isActive, disabled },
-      style: [styles9.root, disabled && styles9.disabled, style],
+      style: [styles10.root, disabled && styles10.disabled, style],
       children: [
         /* @__PURE__ */ jsx(
           View,
           {
             style: [
-              styles9.box,
+              styles10.box,
               {
                 backgroundColor: chrome.backgroundColor,
                 borderColor: chrome.borderColor
@@ -2506,12 +2601,12 @@ var Checkbox = forwardRef(function Checkbox2({
             children: isActive ? /* @__PURE__ */ jsx(CheckIcon, { size: CHECK_SIZE, color: colors.primary, strokeWidth: CHECK_STROKE }) : null
           }
         ),
-        labelContent != null && labelContent !== false ? typeof labelContent === "string" || typeof labelContent === "number" ? /* @__PURE__ */ jsx(Text, { style: [styles9.label, labelStyle], children: labelContent }) : labelContent : null
+        labelContent != null && labelContent !== false ? typeof labelContent === "string" || typeof labelContent === "number" ? /* @__PURE__ */ jsx(Text, { style: [styles10.label, labelStyle], children: labelContent }) : labelContent : null
       ]
     }
   );
 });
-var styles9 = StyleSheet.create({
+var styles10 = StyleSheet.create({
   root: {
     flexDirection: "row",
     alignItems: "center",
@@ -2609,7 +2704,7 @@ var DEFAULT_WIDTH = 380;
 var TRIGGER_HEIGHT = 44;
 var TRIGGER_RADIUS = 60;
 var MENU_RADIUS2 = 20;
-var ICON_SIZE6 = 20;
+var ICON_SIZE7 = 20;
 var NAV_ICON_SIZE = 20;
 var DAY_CELL_HEIGHT = 44;
 var DAY_CIRCLE_SIZE = 44;
@@ -2762,9 +2857,9 @@ var DatePicker = forwardRef(
       {
         ...rest,
         ref: setRootRef,
-        style: [styles10.root, isOpen && styles10.rootOpen, disabled && styles10.disabled, style],
+        style: [styles11.root, isOpen && styles11.rootOpen, disabled && styles11.disabled, style],
         accessibilityState: { disabled, expanded: isOpen },
-        children: /* @__PURE__ */ jsxs(View, { style: [styles10.triggerWrap, isOpen && styles10.triggerWrapOpen], children: [
+        children: /* @__PURE__ */ jsxs(View, { style: [styles11.triggerWrap, isOpen && styles11.triggerWrapOpen], children: [
           /* @__PURE__ */ jsxs(
             Pressable,
             {
@@ -2775,17 +2870,17 @@ var DatePicker = forwardRef(
               accessibilityLabel: resolvedAccessibilityLabel,
               accessibilityState: { disabled, expanded: isOpen },
               style: [
-                styles10.trigger,
+                styles11.trigger,
                 { borderColor: triggerBorderColor, backgroundColor: colors.grey700 }
               ],
               children: [
-                /* @__PURE__ */ jsx(Text, { style: [styles10.triggerText, { color: triggerTextColor }], numberOfLines: 1, children: triggerLabel }),
-                /* @__PURE__ */ jsx(View, { style: styles10.iconSlot, children: /* @__PURE__ */ jsx(CalendarOutlineIcon, { size: ICON_SIZE6, color: colors.grey100 }) })
+                /* @__PURE__ */ jsx(Text, { style: [styles11.triggerText, { color: triggerTextColor }], numberOfLines: 1, children: triggerLabel }),
+                /* @__PURE__ */ jsx(View, { style: styles11.iconSlot, children: /* @__PURE__ */ jsx(CalendarOutlineIcon, { size: ICON_SIZE7, color: colors.grey100 }) })
               ]
             }
           ),
-          isOpen ? /* @__PURE__ */ jsxs(View, { style: [styles10.menu, calendarStyle], children: [
-            /* @__PURE__ */ jsxs(View, { style: styles10.calendarHeader, children: [
+          isOpen ? /* @__PURE__ */ jsxs(View, { style: [styles11.menu, calendarStyle], children: [
+            /* @__PURE__ */ jsxs(View, { style: styles11.calendarHeader, children: [
               /* @__PURE__ */ jsx(
                 Pressable,
                 {
@@ -2793,11 +2888,11 @@ var DatePicker = forwardRef(
                   hitSlop: 8,
                   accessibilityRole: "button",
                   accessibilityLabel: "Previous month",
-                  style: styles10.navButton,
+                  style: styles11.navButton,
                   children: /* @__PURE__ */ jsx(ChevronLeftIcon, { size: NAV_ICON_SIZE, color: colors.white })
                 }
               ),
-              /* @__PURE__ */ jsxs(Text, { style: styles10.monthHeading, children: [
+              /* @__PURE__ */ jsxs(Text, { style: styles11.monthHeading, children: [
                 monthNames[visibleMonth.getMonth()],
                 " ",
                 visibleMonth.getFullYear()
@@ -2809,13 +2904,13 @@ var DatePicker = forwardRef(
                   hitSlop: 8,
                   accessibilityRole: "button",
                   accessibilityLabel: "Next month",
-                  style: styles10.navButton,
-                  children: /* @__PURE__ */ jsx(View, { style: styles10.navIconMirror, children: /* @__PURE__ */ jsx(ChevronLeftIcon, { size: NAV_ICON_SIZE, color: colors.white }) })
+                  style: styles11.navButton,
+                  children: /* @__PURE__ */ jsx(View, { style: styles11.navIconMirror, children: /* @__PURE__ */ jsx(ChevronLeftIcon, { size: NAV_ICON_SIZE, color: colors.white }) })
                 }
               )
             ] }),
             /* @__PURE__ */ jsxs(View, { children: [
-              /* @__PURE__ */ jsx(View, { style: styles10.weekdayRow, children: weekdayLabels.map((weekdayLabel, index) => /* @__PURE__ */ jsx(View, { style: styles10.dayCellWrap, children: /* @__PURE__ */ jsx(Text, { style: styles10.weekdayText, children: weekdayLabel }) }, `${weekdayLabel}-${index}`)) }),
+              /* @__PURE__ */ jsx(View, { style: styles11.weekdayRow, children: weekdayLabels.map((weekdayLabel, index) => /* @__PURE__ */ jsx(View, { style: styles11.dayCellWrap, children: /* @__PURE__ */ jsx(Text, { style: styles11.weekdayText, children: weekdayLabel }) }, `${weekdayLabel}-${index}`)) }),
               weeks.map((week, weekIndex) => {
                 let rangeHighlightStyle = null;
                 if (isRange && rangeValue.start && rangeValue.end) {
@@ -2852,13 +2947,13 @@ var DatePicker = forwardRef(
                 return /* @__PURE__ */ jsxs(
                   View,
                   {
-                    style: [styles10.weekRow, weekIndex > 0 && styles10.weekRowSpaced],
+                    style: [styles11.weekRow, weekIndex > 0 && styles11.weekRowSpaced],
                     children: [
                       rangeHighlightStyle ? /* @__PURE__ */ jsx(
                         View,
                         {
                           pointerEvents: "none",
-                          style: [styles10.rangeHighlight, rangeHighlightStyle]
+                          style: [styles11.rangeHighlight, rangeHighlightStyle]
                         }
                       ) : null,
                       week.map((day, dayIndex) => {
@@ -2881,7 +2976,7 @@ var DatePicker = forwardRef(
                             onHoverOut: () => setHoveredDayKey((current) => current === dayKey ? null : current),
                             onPressIn: () => setHoveredDayKey(dayKey),
                             onPressOut: () => setHoveredDayKey((current) => current === dayKey ? null : current),
-                            style: styles10.dayCellWrap,
+                            style: styles11.dayCellWrap,
                             accessibilityRole: "button",
                             accessibilityLabel: formatValue(day),
                             accessibilityState: {
@@ -2893,14 +2988,14 @@ var DatePicker = forwardRef(
                                 View,
                                 {
                                   style: [
-                                    styles10.dayCircle,
-                                    isSelectedEndpoint && styles10.dayCircleSelected,
-                                    isHovered && styles10.dayCircleHovered
+                                    styles11.dayCircle,
+                                    isSelectedEndpoint && styles11.dayCircleSelected,
+                                    isHovered && styles11.dayCircleHovered
                                   ],
-                                  children: /* @__PURE__ */ jsx(Text, { style: [styles10.dayText, { color: dayTextColor }], children: day.getDate() })
+                                  children: /* @__PURE__ */ jsx(Text, { style: [styles11.dayText, { color: dayTextColor }], children: day.getDate() })
                                 }
                               ),
-                              isToday && !isSelectedEndpoint ? /* @__PURE__ */ jsx(View, { style: styles10.todayDot }) : null
+                              isToday && !isSelectedEndpoint ? /* @__PURE__ */ jsx(View, { style: styles11.todayDot }) : null
                             ]
                           },
                           dayIndex
@@ -2918,7 +3013,7 @@ var DatePicker = forwardRef(
     );
   }
 );
-var styles10 = StyleSheet.create({
+var styles11 = StyleSheet.create({
   root: {
     width: DEFAULT_WIDTH,
     gap: 8,
@@ -2954,8 +3049,8 @@ var styles10 = StyleSheet.create({
     minWidth: 0
   },
   iconSlot: {
-    width: ICON_SIZE6,
-    height: ICON_SIZE6,
+    width: ICON_SIZE7,
+    height: ICON_SIZE7,
     alignItems: "center",
     justifyContent: "center",
     flexShrink: 0
@@ -3197,13 +3292,13 @@ var Input = forwardRef(function Input2({
   });
   useApplyWebClassName(rootRef, className);
   useApplyWebClassName(inputRef, inputClassName);
-  return /* @__PURE__ */ jsxs(View, { ref: rootRef, style: [styles11.root, disabled && styles11.disabled, style], children: [
-    showLabel && label ? /* @__PURE__ */ jsx(Text, { style: [styles11.label, { color: chrome.labelColor }], children: label }) : null,
+  return /* @__PURE__ */ jsxs(View, { ref: rootRef, style: [styles12.root, disabled && styles12.disabled, style], children: [
+    showLabel && label ? /* @__PURE__ */ jsx(Text, { style: [styles12.label, { color: chrome.labelColor }], children: label }) : null,
     /* @__PURE__ */ jsxs(
       View,
       {
         style: [
-          styles11.field,
+          styles12.field,
           {
             height: metrics.height,
             borderRadius: metrics.borderRadius,
@@ -3218,7 +3313,7 @@ var Input = forwardRef(function Input2({
           fieldStyle
         ],
         children: [
-          hasLeftIcon ? /* @__PURE__ */ jsx(View, { style: [styles11.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }], children: leftIconNode }) : null,
+          hasLeftIcon ? /* @__PURE__ */ jsx(View, { style: [styles12.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }], children: leftIconNode }) : null,
           /* @__PURE__ */ jsx(
             TextInput,
             {
@@ -3242,11 +3337,11 @@ var Input = forwardRef(function Input2({
                 onBlur?.(event);
               },
               style: [
-                styles11.input,
+                styles12.input,
                 metrics.text,
                 { color: chrome.textColor },
-                Platform.OS === "web" ? styles11.inputWeb : null,
-                Platform.OS === "android" ? styles11.inputAndroid : null,
+                Platform.OS === "web" ? styles12.inputWeb : null,
+                Platform.OS === "android" ? styles12.inputAndroid : null,
                 inputStyle
               ],
               accessibilityLabel: resolvedAccessibilityLabel,
@@ -3258,20 +3353,20 @@ var Input = forwardRef(function Input2({
             {
               onPress: onRightIconPress,
               disabled,
-              style: [styles11.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }],
+              style: [styles12.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }],
               accessibilityRole: "button",
               accessibilityLabel: rightIconAccessibilityLabel,
               hitSlop: 8,
               children: rightIconNode
             }
-          ) : /* @__PURE__ */ jsx(View, { style: [styles11.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }], children: rightIconNode }) : null
+          ) : /* @__PURE__ */ jsx(View, { style: [styles12.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }], children: rightIconNode }) : null
         ]
       }
     ),
-    showHint && hint ? /* @__PURE__ */ jsx(Text, { style: [styles11.hint, { color: chrome.hintColor }], children: hint }) : null
+    showHint && hint ? /* @__PURE__ */ jsx(Text, { style: [styles12.hint, { color: chrome.hintColor }], children: hint }) : null
   ] });
 });
-var styles11 = StyleSheet.create({
+var styles12 = StyleSheet.create({
   root: {
     width: DEFAULT_WIDTH2,
     gap: 8,
@@ -3314,7 +3409,7 @@ var TRIGGER_RADIUS2 = 60;
 var MENU_RADIUS3 = 24;
 var MENU_MAX_LIST_HEIGHT = 248;
 var ITEM_RADIUS2 = 12;
-var ICON_SIZE7 = 20;
+var ICON_SIZE8 = 20;
 var CHIP_GAP = 6;
 var FALLBACK_ELLIPSIS_WIDTH = 20;
 function itemBackground(state) {
@@ -3387,25 +3482,25 @@ function MultiValueChips({ options, disabled, onRemove }) {
     const next = Math.ceil(event.nativeEvent.layout.width);
     setEllipsisWidth((current) => current === next ? current : next);
   };
-  return /* @__PURE__ */ jsxs(View, { style: styles12.multiValueRoot, children: [
-    /* @__PURE__ */ jsxs(View, { pointerEvents: "none", style: styles12.measureRow, children: [
+  return /* @__PURE__ */ jsxs(View, { style: styles13.multiValueRoot, children: [
+    /* @__PURE__ */ jsxs(View, { pointerEvents: "none", style: styles13.measureRow, children: [
       options.map((option) => /* @__PURE__ */ jsxs(
         View,
         {
-          style: styles12.chip,
+          style: styles13.chip,
           onLayout: (event) => handleChipLayout(option.value, event),
           children: [
-            /* @__PURE__ */ jsx(Text, { style: styles12.chipLabel, numberOfLines: 1, children: option.label }),
-            /* @__PURE__ */ jsx(Text, { style: styles12.chipRemove, children: "\xD7" })
+            /* @__PURE__ */ jsx(Text, { style: styles13.chipLabel, numberOfLines: 1, children: option.label }),
+            /* @__PURE__ */ jsx(Text, { style: styles13.chipRemove, children: "\xD7" })
           ]
         },
         `measure-${option.value}`
       )),
-      /* @__PURE__ */ jsx(View, { style: styles12.ellipsis, onLayout: handleEllipsisLayout, children: /* @__PURE__ */ jsx(Text, { style: styles12.ellipsisText, children: "..." }) })
+      /* @__PURE__ */ jsx(View, { style: styles13.ellipsis, onLayout: handleEllipsisLayout, children: /* @__PURE__ */ jsx(Text, { style: styles13.ellipsisText, children: "..." }) })
     ] }),
-    /* @__PURE__ */ jsxs(View, { style: styles12.chipsRow, onLayout: handleContainerLayout, children: [
-      visible.map((option) => /* @__PURE__ */ jsxs(View, { style: styles12.chip, children: [
-        /* @__PURE__ */ jsx(Text, { style: styles12.chipLabel, numberOfLines: 1, children: option.label }),
+    /* @__PURE__ */ jsxs(View, { style: styles13.chipsRow, onLayout: handleContainerLayout, children: [
+      visible.map((option) => /* @__PURE__ */ jsxs(View, { style: styles13.chip, children: [
+        /* @__PURE__ */ jsx(Text, { style: styles13.chipLabel, numberOfLines: 1, children: option.label }),
         /* @__PURE__ */ jsx(
           Pressable,
           {
@@ -3417,11 +3512,11 @@ function MultiValueChips({ options, disabled, onRemove }) {
             hitSlop: 6,
             accessibilityRole: "button",
             accessibilityLabel: `Remove ${option.label}`,
-            children: /* @__PURE__ */ jsx(Text, { style: styles12.chipRemove, children: "\xD7" })
+            children: /* @__PURE__ */ jsx(Text, { style: styles13.chipRemove, children: "\xD7" })
           }
         )
       ] }, option.value)),
-      hasOverflow ? /* @__PURE__ */ jsx(View, { style: styles12.ellipsis, children: /* @__PURE__ */ jsx(Text, { style: styles12.ellipsisText, children: "..." }) }) : null
+      hasOverflow ? /* @__PURE__ */ jsx(View, { style: styles13.ellipsis, children: /* @__PURE__ */ jsx(Text, { style: styles13.ellipsisText, children: "..." }) }) : null
     ] })
   ] });
 }
@@ -3630,7 +3725,7 @@ var Select = forwardRef(
       setOpen
     ]);
     const leftIconNode = renderStatefulIcon(leftIcon, UserIcon, {
-      size: ICON_SIZE7,
+      size: ICON_SIZE8,
       color: error ? colors.red : isOpen ? colors.primary : colors.grey100
     });
     const hasLeftIcon = showLeftIcon || leftIcon != null;
@@ -3645,11 +3740,11 @@ var Select = forwardRef(
       {
         ...rest,
         ref: setRootRef,
-        style: [styles12.root, isOpen && styles12.rootOpen, disabled && styles12.disabled, style],
+        style: [styles13.root, isOpen && styles13.rootOpen, disabled && styles13.disabled, style],
         accessibilityState: { disabled, expanded: isOpen },
         children: [
-          showLabel && label ? /* @__PURE__ */ jsx(Text, { style: [styles12.label, { color: labelColor }], children: label }) : null,
-          /* @__PURE__ */ jsxs(View, { style: [styles12.triggerWrap, isOpen && styles12.triggerWrapOpen], children: [
+          showLabel && label ? /* @__PURE__ */ jsx(Text, { style: [styles13.label, { color: labelColor }], children: label }) : null,
+          /* @__PURE__ */ jsxs(View, { style: [styles13.triggerWrap, isOpen && styles13.triggerWrapOpen], children: [
             /* @__PURE__ */ jsxs(
               Pressable,
               {
@@ -3660,29 +3755,29 @@ var Select = forwardRef(
                 accessibilityLabel: resolvedAccessibilityLabel,
                 accessibilityState: { disabled, expanded: isOpen },
                 style: [
-                  styles12.trigger,
+                  styles13.trigger,
                   {
                     borderColor: triggerBorderColor,
                     backgroundColor: colors.grey700
                   }
                 ],
                 children: [
-                  hasLeftIcon ? /* @__PURE__ */ jsx(View, { style: styles12.iconSlot, children: leftIconNode }) : null,
-                  /* @__PURE__ */ jsx(View, { style: styles12.triggerContent, children: multiple && hasValue ? /* @__PURE__ */ jsx(
+                  hasLeftIcon ? /* @__PURE__ */ jsx(View, { style: styles13.iconSlot, children: leftIconNode }) : null,
+                  /* @__PURE__ */ jsx(View, { style: styles13.triggerContent, children: multiple && hasValue ? /* @__PURE__ */ jsx(
                     MultiValueChips,
                     {
                       options: selectedOptions,
                       disabled,
                       onRemove: handleRemoveChip
                     }
-                  ) : /* @__PURE__ */ jsx(Text, { style: [styles12.triggerText, { color: triggerTextColor }], numberOfLines: 1, children: multiple ? placeholder : singleLabel }) }),
-                  /* @__PURE__ */ jsx(View, { style: [styles12.iconSlot, isOpen && styles12.chevronOpen], children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: ICON_SIZE7, color: isOpen ? colors.primary : colors.grey100 }) })
+                  ) : /* @__PURE__ */ jsx(Text, { style: [styles13.triggerText, { color: triggerTextColor }], numberOfLines: 1, children: multiple ? placeholder : singleLabel }) }),
+                  /* @__PURE__ */ jsx(View, { style: [styles13.iconSlot, isOpen && styles13.chevronOpen], children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: ICON_SIZE8, color: isOpen ? colors.primary : colors.grey100 }) })
                 ]
               }
             ),
-            isOpen ? /* @__PURE__ */ jsxs(View, { style: styles12.menu, children: [
-              showSearch ? /* @__PURE__ */ jsxs(View, { style: styles12.searchField, children: [
-                /* @__PURE__ */ jsx(View, { style: styles12.iconSlot, children: /* @__PURE__ */ jsx(SearchIcon, { size: ICON_SIZE7, color: colors.grey100 }) }),
+            isOpen ? /* @__PURE__ */ jsxs(View, { style: styles13.menu, children: [
+              showSearch ? /* @__PURE__ */ jsxs(View, { style: styles13.searchField, children: [
+                /* @__PURE__ */ jsx(View, { style: styles13.iconSlot, children: /* @__PURE__ */ jsx(SearchIcon, { size: ICON_SIZE8, color: colors.grey100 }) }),
                 /* @__PURE__ */ jsx(
                   TextInput,
                   {
@@ -3693,9 +3788,9 @@ var Select = forwardRef(
                     placeholder: searchPlaceholder,
                     placeholderTextColor: colors.grey100,
                     style: [
-                      styles12.searchInput,
-                      Platform.OS === "web" ? styles12.searchInputWeb : null,
-                      Platform.OS === "android" ? styles12.searchInputAndroid : null
+                      styles13.searchInput,
+                      Platform.OS === "web" ? styles13.searchInputWeb : null,
+                      Platform.OS === "android" ? styles13.searchInputAndroid : null
                     ],
                     accessibilityLabel: searchPlaceholder
                   }
@@ -3704,12 +3799,12 @@ var Select = forwardRef(
               /* @__PURE__ */ jsxs(
                 ScrollView,
                 {
-                  style: styles12.optionList,
-                  contentContainerStyle: styles12.optionListContent,
+                  style: styles13.optionList,
+                  contentContainerStyle: styles13.optionListContent,
                   keyboardShouldPersistTaps: "handled",
                   showsVerticalScrollIndicator: false,
                   children: [
-                    loading ? /* @__PURE__ */ jsx(View, { style: styles12.statusRow, children: /* @__PURE__ */ jsx(Text, { style: styles12.statusText, children: "Loading..." }) }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsx(View, { style: styles12.statusRow, children: /* @__PURE__ */ jsx(Text, { style: styles12.statusText, children: emptyText }) }) : null,
+                    loading ? /* @__PURE__ */ jsx(View, { style: styles13.statusRow, children: /* @__PURE__ */ jsx(Text, { style: styles13.statusText, children: "Loading..." }) }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsx(View, { style: styles13.statusRow, children: /* @__PURE__ */ jsx(Text, { style: styles13.statusText, children: emptyText }) }) : null,
                     !loading && filteredOptions.map((option) => {
                       const isSelected = selectedValues.includes(option.value);
                       const isHovered = hoveredValue === option.value;
@@ -3726,14 +3821,14 @@ var Select = forwardRef(
                           accessibilityRole: multiple ? "checkbox" : "button",
                           accessibilityState: { selected: isSelected, checked: isSelected, disabled },
                           style: [
-                            styles12.item,
+                            styles13.item,
                             {
                               backgroundColor: itemBackground(visualState)
                             }
                           ],
                           children: [
-                            multiple ? /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: styles12.itemCheckbox, children: /* @__PURE__ */ jsx(Checkbox, { value: isSelected, variant: "light" }) }) : null,
-                            /* @__PURE__ */ jsx(Text, { style: styles12.itemLabel, numberOfLines: 1, children: option.label })
+                            multiple ? /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: styles13.itemCheckbox, children: /* @__PURE__ */ jsx(Checkbox, { value: isSelected, variant: "light" }) }) : null,
+                            /* @__PURE__ */ jsx(Text, { style: styles13.itemLabel, numberOfLines: 1, children: option.label })
                           ]
                         },
                         option.value
@@ -3744,13 +3839,13 @@ var Select = forwardRef(
               )
             ] }) : null
           ] }),
-          showHint && hint ? /* @__PURE__ */ jsx(Text, { style: [styles12.hint, { color: hintColor }], children: hint }) : null
+          showHint && hint ? /* @__PURE__ */ jsx(Text, { style: [styles13.hint, { color: hintColor }], children: hint }) : null
         ]
       }
     );
   }
 );
-var styles12 = StyleSheet.create({
+var styles13 = StyleSheet.create({
   root: {
     width: DEFAULT_WIDTH3,
     gap: 8,
@@ -3840,8 +3935,8 @@ var styles12 = StyleSheet.create({
     lineHeight: 16
   },
   iconSlot: {
-    width: ICON_SIZE7,
-    height: ICON_SIZE7,
+    width: ICON_SIZE8,
+    height: ICON_SIZE8,
     alignItems: "center",
     justifyContent: "center",
     flexShrink: 0
@@ -4012,13 +4107,13 @@ var Textarea = forwardRef(function Textarea2({
   const resolvedAccessibilityLabel = accessibilityLabel ?? (showLabel ? void 0 : label);
   useApplyWebClassName(rootRef, className);
   useApplyWebClassName(inputRef, inputClassName);
-  return /* @__PURE__ */ jsxs(View, { ref: rootRef, style: [styles13.root, disabled && styles13.disabled, style], children: [
-    showLabel && label ? /* @__PURE__ */ jsx(Text, { style: [styles13.label, { color: chrome.labelColor }], children: label }) : null,
+  return /* @__PURE__ */ jsxs(View, { ref: rootRef, style: [styles14.root, disabled && styles14.disabled, style], children: [
+    showLabel && label ? /* @__PURE__ */ jsx(Text, { style: [styles14.label, { color: chrome.labelColor }], children: label }) : null,
     /* @__PURE__ */ jsx(
       View,
       {
         style: [
-          styles13.field,
+          styles14.field,
           {
             borderColor: chrome.borderColor,
             backgroundColor: chrome.backgroundColor
@@ -4050,11 +4145,11 @@ var Textarea = forwardRef(function Textarea2({
               onBlur?.(event);
             },
             style: [
-              styles13.input,
+              styles14.input,
               textareaTypography.field,
               { color: chrome.textColor },
-              Platform.OS === "web" ? styles13.inputWeb : null,
-              Platform.OS === "android" ? styles13.inputAndroid : null,
+              Platform.OS === "web" ? styles14.inputWeb : null,
+              Platform.OS === "android" ? styles14.inputAndroid : null,
               inputStyle
             ],
             accessibilityLabel: resolvedAccessibilityLabel,
@@ -4063,10 +4158,10 @@ var Textarea = forwardRef(function Textarea2({
         )
       }
     ),
-    showHint && hint ? /* @__PURE__ */ jsx(Text, { style: [styles13.hint, { color: chrome.hintColor }], children: hint }) : null
+    showHint && hint ? /* @__PURE__ */ jsx(Text, { style: [styles14.hint, { color: chrome.hintColor }], children: hint }) : null
   ] });
 });
-var styles13 = StyleSheet.create({
+var styles14 = StyleSheet.create({
   root: {
     width: DEFAULT_WIDTH4,
     gap: 8,
@@ -4166,13 +4261,13 @@ var Toggle = forwardRef(function Toggle2({
       accessibilityRole: "switch",
       accessibilityLabel: resolvedAccessibilityLabel,
       accessibilityState: { checked: isActive, disabled },
-      style: [styles14.pressable, disabled && styles14.disabled, style],
+      style: [styles15.pressable, disabled && styles15.disabled, style],
       children: [
         /* @__PURE__ */ jsx(
           Animated.View,
           {
             style: [
-              styles14.track,
+              styles15.track,
               {
                 backgroundColor: trackBackgroundColor
               }
@@ -4181,7 +4276,7 @@ var Toggle = forwardRef(function Toggle2({
               Animated.View,
               {
                 style: [
-                  styles14.thumb,
+                  styles15.thumb,
                   {
                     transform: [{ translateX: thumbTranslateX }]
                   }
@@ -4190,12 +4285,12 @@ var Toggle = forwardRef(function Toggle2({
             )
           }
         ),
-        labelContent != null && labelContent !== false ? typeof labelContent === "string" || typeof labelContent === "number" ? /* @__PURE__ */ jsx(Text, { style: [styles14.label, labelStyle], children: labelContent }) : labelContent : null
+        labelContent != null && labelContent !== false ? typeof labelContent === "string" || typeof labelContent === "number" ? /* @__PURE__ */ jsx(Text, { style: [styles15.label, labelStyle], children: labelContent }) : labelContent : null
       ]
     }
   );
 });
-var styles14 = StyleSheet.create({
+var styles15 = StyleSheet.create({
   pressable: {
     flexDirection: "row",
     alignItems: "center",
@@ -4270,21 +4365,21 @@ var RatingInput = forwardRef(
       {
         ...rest,
         ref: setContainerRef,
-        style: [styles15.root, disabled && styles15.disabled, style],
+        style: [styles16.root, disabled && styles16.disabled, style],
         children: [
-          showValue ? /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [styles15.value, valueStyle], children: selectedValue.toFixed(precision) }) : null,
+          showValue ? /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [styles16.value, valueStyle], children: selectedValue.toFixed(precision) }) : null,
           /* @__PURE__ */ jsx(
             View,
             {
               accessibilityRole: readOnly ? "image" : "radiogroup",
               accessibilityLabel: resolvedAccessibilityLabel,
               accessibilityState: { disabled },
-              style: [styles15.stars, { gap: resolvedStarGap }],
+              style: [styles16.stars, { gap: resolvedStarGap }],
               children: Array.from({ length: STAR_COUNT }, (_, index) => {
                 const starValue = index + 1;
                 const isSelected = starValue <= selectedStarCount;
                 const icon = isSelected ? /* @__PURE__ */ jsx(StarFilledIcon, { size: iconWidth, height: iconHeight }) : /* @__PURE__ */ jsx(StarIcon, { size: iconWidth, height: iconHeight });
-                const itemStyle = [styles15.starItem, { width: size, height: size }];
+                const itemStyle = [styles16.starItem, { width: size, height: size }];
                 if (readOnly) {
                   return /* @__PURE__ */ jsx(View, { style: itemStyle, children: icon }, starValue);
                 }
@@ -4310,7 +4405,7 @@ var RatingInput = forwardRef(
     );
   }
 );
-var styles15 = StyleSheet.create({
+var styles16 = StyleSheet.create({
   root: {
     flexDirection: "row",
     alignItems: "center",
@@ -4374,19 +4469,19 @@ var CommentCard = forwardRef(
       setExpanded(next);
       onExpandedChange?.(next);
     };
-    return /* @__PURE__ */ jsxs(View, { ...rest, ref: setContainerRef, style: [styles16.root, style], children: [
-      /* @__PURE__ */ jsxs(View, { style: styles16.header, children: [
-        /* @__PURE__ */ jsx(View, { style: styles16.avatar, children: hasImage ? /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsxs(View, { ...rest, ref: setContainerRef, style: [styles17.root, style], children: [
+      /* @__PURE__ */ jsxs(View, { style: styles17.header, children: [
+        /* @__PURE__ */ jsx(View, { style: styles17.avatar, children: hasImage ? /* @__PURE__ */ jsx(
           Image,
           {
             source: { uri: imageUrl ?? void 0 },
-            style: styles16.avatarImage,
+            style: styles17.avatarImage,
             onError: () => setImageFailed(true)
           }
         ) : /* @__PURE__ */ jsx(UserIcon, { size: 20, color: colors.primary }) }),
-        /* @__PURE__ */ jsxs(View, { style: styles16.identity, children: [
-          /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles16.name, children: userName }),
-          /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles16.date, children: date })
+        /* @__PURE__ */ jsxs(View, { style: styles17.identity, children: [
+          /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles17.name, children: userName }),
+          /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles17.date, children: date })
         ] }),
         /* @__PURE__ */ jsx(RatingInput, { value: rating, readOnly: true, showValue: false, size: 16 })
       ] }),
@@ -4394,7 +4489,7 @@ var CommentCard = forwardRef(
         Text,
         {
           numberOfLines: expanded ? void 0 : maxCommentLines,
-          style: [styles16.comment, commentStyle],
+          style: [styles17.comment, commentStyle],
           children: commentText
         }
       ),
@@ -4407,14 +4502,14 @@ var CommentCard = forwardRef(
           hitSlop: 6,
           onHoverIn: () => setActionHovered(true),
           onHoverOut: () => setActionHovered(false),
-          style: styles16.action,
+          style: styles17.action,
           children: /* @__PURE__ */ jsx(
             Text,
             {
               style: [
-                styles16.actionText,
-                expanded && styles16.closeActionText,
-                actionHovered && (expanded ? styles16.closeActionTextHovered : styles16.openActionTextHovered)
+                styles17.actionText,
+                expanded && styles17.closeActionText,
+                actionHovered && (expanded ? styles17.closeActionTextHovered : styles17.openActionTextHovered)
               ],
               children: expanded ? readLessLabel : readMoreLabel
             }
@@ -4424,7 +4519,7 @@ var CommentCard = forwardRef(
     ] });
   }
 );
-var styles16 = StyleSheet.create({
+var styles17 = StyleSheet.create({
   root: {
     width: CARD_WIDTH,
     minHeight: CARD_MIN_HEIGHT,
@@ -4490,6 +4585,676 @@ var styles16 = StyleSheet.create({
   }
 });
 
-export { AreaExpandIcon, ArrowRightIcon, Avatar, BRAND_LOGO_COLORS, BRAND_LOGO_DEFAULT_HEIGHT, BRAND_LOGO_DEFAULT_WIDTH, Badge, BagIcon, BathroomsIcon, BedroomsIcon, BellIcon, BrandLogo, BuildingIcon, Button, CalendarIcon, CalendarOutlineIcon, CameraIcon, CardLocationIcon, CheckBadgeIcon, CheckIcon, CheckSuccessIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ClockFilledIcon, ClockIcon, CommentCard, CopyIcon, Counter, DatePicker, FacebookIcon, FiltersIcon, GlobeIcon, GuestsIcon, HeartIcon, HelpCircleIcon, HomeIcon, Icon, Input, InstagramIcon, KeyIcon, LanguageSwitcher, LayoutGridIcon, LinkedInIcon, ListViewIcon, LocationPinIcon, LogOutIcon, MailIcon, MapViewIcon, MenuIcon, MenuItem, MinusIcon, NavigateIcon, PhoneIcon, PlusIcon, QrCodeIcon, RatingInput, RatingStarIcon, SaveHeartIcon, SearchIcon, SegmentedToggle, Select, SettingsIcon, ShareIcon, ShowIcon, SidebarIcon, SortIcon, StarFilledIcon, StarIcon, StatCard, Textarea, Toggle, TooltipArrowIcon, UserIcon, UsersAltIcon, VideoIcon, WhatsAppIcon, avatarTypography, badgeTypography, buttonTypography, colors, commentCardTypography, counterTypography, datePickerTypography, defaultLanguageOptions, fonts, getIconsByGroup, grey, iconGroupNames, iconGroups, iconNames, icons, inputTypography, languageSwitcherTypography, ratingTypography, segmentedToggleTypography, selectTypography, statCardTypography, textareaTypography };
+// src/components/Range/Range.utils.ts
+function decimals(value) {
+  const [coefficient, exponentText = "0"] = Math.abs(value).toString().toLowerCase().split("e");
+  const [, fraction = ""] = coefficient.split(".");
+  return Math.max(0, fraction.length - Number(exponentText));
+}
+function clampAndSnap(value, min, max, step) {
+  const clamped = Math.min(max, Math.max(min, value));
+  const snapped = min + Math.round((clamped - min) / step) * step;
+  const precision = Math.min(15, Math.max(decimals(min), decimals(step)));
+  return Number(Math.min(max, Math.max(min, snapped)).toFixed(precision));
+}
+function clampRangeValue(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+function snapRangeDelta(start, delta, step) {
+  const steps = Math.round(Math.abs(delta) / step) * Math.sign(delta);
+  const precision = Math.min(15, Math.max(decimals(start), decimals(step)));
+  return Number((start + steps * step).toFixed(precision));
+}
+function parseRangeDraft(draft, parseValue) {
+  if (!draft.trim()) return { kind: "empty" };
+  const parsed = parseValue(draft);
+  if (parsed === void 0 || !Number.isFinite(parsed)) return { kind: "invalid" };
+  return { kind: "value", value: parsed };
+}
+function normalizeRangeValue(value, min, max) {
+  const from = typeof value.from === "number" && Number.isFinite(value.from) ? clampRangeValue(value.from, min, max) : void 0;
+  const to = typeof value.to === "number" && Number.isFinite(value.to) ? clampRangeValue(value.to, min, max) : void 0;
+  if (from !== void 0 && to !== void 0 && from > to) {
+    return { from: to, to: from };
+  }
+  return { from, to };
+}
+var DEFAULT_WIDTH5 = 347;
+var TRACK_HEIGHT2 = 4;
+var TRACK_HORIZONTAL_INSET = 20;
+var THUMB_SIZE2 = 20;
+var INPUT_WIDTH = 120;
+function defaultParseValue(value) {
+  const normalized = value.replace(/[\s,]/g, "");
+  if (!normalized) return void 0;
+  const parsed = Number(normalized);
+  return Number.isFinite(parsed) ? parsed : void 0;
+}
+function valuesEqual(a, b) {
+  return a.from === b.from && a.to === b.to;
+}
+var Range = forwardRef(function Range2({
+  min = 0,
+  max = 100,
+  step = 1,
+  value,
+  defaultValue = {},
+  onValueChange,
+  fromPlaceholder = "\u054D\u056F\u057D\u0561\u056E",
+  toPlaceholder = "\u0544\u056B\u0576\u0579\u0587",
+  currency = "\u058F",
+  fromAccessibilityLabel = fromPlaceholder,
+  toAccessibilityLabel = toPlaceholder,
+  disabled = false,
+  formatValue = String,
+  parseValue = defaultParseValue,
+  style,
+  className,
+  onLayout,
+  ...rest
+}, forwardedRef) {
+  const rootRef = useRef(null);
+  const fromThumbRef = useRef(null);
+  const toThumbRef = useRef(null);
+  const setRootRef = useMemo(() => mergeRefs(rootRef, forwardedRef), [forwardedRef]);
+  const lowerBound = Math.min(min, max);
+  const upperBound = Math.max(min, max);
+  const safeStep = Number.isFinite(step) && step > 0 ? step : 1;
+  const isControlled = value !== void 0;
+  const [uncontrolledValue, setUncontrolledValue] = useState(
+    () => normalizeRangeValue(defaultValue, lowerBound, upperBound)
+  );
+  const resolvedValue = normalizeRangeValue(
+    isControlled ? value : uncontrolledValue,
+    lowerBound,
+    upperBound
+  );
+  const latestValueRef = useRef(resolvedValue);
+  const [trackWidth, setTrackWidth] = useState(DEFAULT_WIDTH5);
+  const [fromDraft, setFromDraft] = useState(
+    resolvedValue.from === void 0 ? "" : formatValue(resolvedValue.from)
+  );
+  const [toDraft, setToDraft] = useState(
+    resolvedValue.to === void 0 ? "" : formatValue(resolvedValue.to)
+  );
+  const [editingField, setEditingField] = useState(null);
+  const [focusedThumb, setFocusedThumb] = useState(null);
+  const dragStartRef = useRef({ from: lowerBound, to: upperBound });
+  const nativeDragTargetRef = useRef(null);
+  const pointerDragRef = useRef(null);
+  useApplyWebClassName(rootRef, className?.trim() || void 0);
+  useEffect(() => {
+    if (editingField !== "from") {
+      setFromDraft(resolvedValue.from === void 0 ? "" : formatValue(resolvedValue.from));
+    }
+  }, [editingField, formatValue, resolvedValue.from]);
+  useEffect(() => {
+    if (editingField !== "to") {
+      setToDraft(resolvedValue.to === void 0 ? "" : formatValue(resolvedValue.to));
+    }
+  }, [editingField, formatValue, resolvedValue.to]);
+  useEffect(() => {
+    const nextValue = { from: resolvedValue.from, to: resolvedValue.to };
+    const changedOutsideInteraction = !valuesEqual(nextValue, latestValueRef.current);
+    latestValueRef.current = nextValue;
+    if (!changedOutsideInteraction) return;
+    if (editingField === "from") {
+      setFromDraft(nextValue.from === void 0 ? "" : formatValue(nextValue.from));
+    }
+    if (editingField === "to") {
+      setToDraft(nextValue.to === void 0 ? "" : formatValue(nextValue.to));
+    }
+  }, [editingField, formatValue, resolvedValue.from, resolvedValue.to]);
+  useEffect(() => {
+    if (isControlled) return;
+    setUncontrolledValue((current) => {
+      const normalized = normalizeRangeValue(current, lowerBound, upperBound);
+      return valuesEqual(current, normalized) ? current : normalized;
+    });
+  }, [isControlled, lowerBound, upperBound]);
+  const emitValue = useCallback(
+    (nextValue) => {
+      const normalized = normalizeRangeValue(nextValue, lowerBound, upperBound);
+      if (valuesEqual(normalized, latestValueRef.current)) return;
+      latestValueRef.current = normalized;
+      if (!isControlled) setUncontrolledValue(normalized);
+      onValueChange?.(normalized);
+    },
+    [isControlled, lowerBound, onValueChange, upperBound]
+  );
+  const updateFrom = useCallback(
+    (next) => {
+      const current = latestValueRef.current;
+      const maximum = current.to ?? upperBound;
+      const snapped = next === void 0 ? void 0 : clampAndSnap(next, lowerBound, upperBound, safeStep);
+      emitValue({
+        ...current,
+        from: snapped === void 0 ? void 0 : clampRangeValue(snapped, lowerBound, maximum)
+      });
+    },
+    [emitValue, lowerBound, safeStep, upperBound]
+  );
+  const updateTo = useCallback(
+    (next) => {
+      const current = latestValueRef.current;
+      const minimum = current.from ?? lowerBound;
+      const snapped = next === void 0 ? void 0 : clampAndSnap(next, lowerBound, upperBound, safeStep);
+      emitValue({
+        ...current,
+        to: snapped === void 0 ? void 0 : clampRangeValue(snapped, minimum, upperBound)
+      });
+    },
+    [emitValue, lowerBound, safeStep, upperBound]
+  );
+  const updateFromInput = useCallback(
+    (next) => {
+      const current = latestValueRef.current;
+      const maximum = current.to ?? upperBound;
+      emitValue({
+        ...current,
+        from: next === void 0 ? void 0 : clampRangeValue(next, lowerBound, maximum)
+      });
+    },
+    [emitValue, lowerBound, upperBound]
+  );
+  const updateToInput = useCallback(
+    (next) => {
+      const current = latestValueRef.current;
+      const minimum = current.from ?? lowerBound;
+      emitValue({
+        ...current,
+        to: next === void 0 ? void 0 : clampRangeValue(next, minimum, upperBound)
+      });
+    },
+    [emitValue, lowerBound, upperBound]
+  );
+  const span = upperBound - lowerBound;
+  const thumbTravel = Math.max(0, trackWidth - TRACK_HORIZONTAL_INSET * 2 - THUMB_SIZE2);
+  const effectiveFrom = resolvedValue.from ?? lowerBound;
+  const effectiveTo = resolvedValue.to ?? upperBound;
+  const valueToOffset = useCallback(
+    (next) => span === 0 ? 0 : (next - lowerBound) / span * thumbTravel,
+    [lowerBound, span, thumbTravel]
+  );
+  const deltaToValue = useCallback(
+    (delta) => thumbTravel === 0 || span === 0 ? 0 : delta / thumbTravel * span,
+    [span, thumbTravel]
+  );
+  const fromOffset = valueToOffset(effectiveFrom);
+  const toOffset = valueToOffset(effectiveTo);
+  const fromPanResponder = useMemo(
+    () => PanResponder.create({
+      onStartShouldSetPanResponder: () => !disabled,
+      onMoveShouldSetPanResponder: () => !disabled,
+      onPanResponderGrant: () => {
+        dragStartRef.current = { from: effectiveFrom, to: effectiveTo };
+        nativeDragTargetRef.current = effectiveFrom === effectiveTo ? null : "from";
+      },
+      onPanResponderMove: (_, gesture) => {
+        if (!nativeDragTargetRef.current && gesture.dx !== 0) {
+          nativeDragTargetRef.current = gesture.dx < 0 ? "from" : "to";
+        }
+        const delta = deltaToValue(gesture.dx);
+        if (nativeDragTargetRef.current === "to") {
+          updateToInput(snapRangeDelta(dragStartRef.current.to, delta, safeStep));
+        } else if (nativeDragTargetRef.current === "from") {
+          updateFromInput(snapRangeDelta(dragStartRef.current.from, delta, safeStep));
+        }
+      },
+      onPanResponderRelease: () => {
+        nativeDragTargetRef.current = null;
+      },
+      onPanResponderTerminate: () => {
+        nativeDragTargetRef.current = null;
+      }
+    }),
+    [deltaToValue, disabled, effectiveFrom, effectiveTo, safeStep, updateFromInput, updateToInput]
+  );
+  const toPanResponder = useMemo(
+    () => PanResponder.create({
+      onStartShouldSetPanResponder: () => !disabled,
+      onMoveShouldSetPanResponder: () => !disabled,
+      onPanResponderGrant: () => {
+        dragStartRef.current = { from: effectiveFrom, to: effectiveTo };
+        nativeDragTargetRef.current = effectiveFrom === effectiveTo ? null : "to";
+      },
+      onPanResponderMove: (_, gesture) => {
+        if (!nativeDragTargetRef.current && gesture.dx !== 0) {
+          nativeDragTargetRef.current = gesture.dx < 0 ? "from" : "to";
+        }
+        const delta = deltaToValue(gesture.dx);
+        if (nativeDragTargetRef.current === "from") {
+          updateFromInput(snapRangeDelta(dragStartRef.current.from, delta, safeStep));
+        } else if (nativeDragTargetRef.current === "to") {
+          updateToInput(snapRangeDelta(dragStartRef.current.to, delta, safeStep));
+        }
+      },
+      onPanResponderRelease: () => {
+        nativeDragTargetRef.current = null;
+      },
+      onPanResponderTerminate: () => {
+        nativeDragTargetRef.current = null;
+      }
+    }),
+    [deltaToValue, disabled, effectiveFrom, effectiveTo, safeStep, updateFromInput, updateToInput]
+  );
+  const beginPointerDrag = (target, currentValue, event) => {
+    if (disabled) return;
+    event.stopPropagation();
+    const pointerId = event.nativeEvent.pointerId;
+    const node = event.currentTarget;
+    node.focus?.();
+    node.setPointerCapture?.(pointerId);
+    pointerDragRef.current = {
+      target,
+      pointerId,
+      startPageX: event.nativeEvent.pageX,
+      startValue: currentValue,
+      coincident: effectiveFrom === effectiveTo
+    };
+  };
+  const movePointerDrag = (event) => {
+    const drag = pointerDragRef.current;
+    if (!drag || drag.pointerId !== event.nativeEvent.pointerId) return;
+    const deltaX = event.nativeEvent.pageX - drag.startPageX;
+    const nextValue = snapRangeDelta(drag.startValue, deltaToValue(deltaX), safeStep);
+    if (drag.coincident && deltaX !== 0) {
+      drag.target = deltaX < 0 ? "from" : "to";
+      drag.coincident = false;
+    }
+    const target = drag.target;
+    if (target === "from") updateFromInput(nextValue);
+    else updateToInput(nextValue);
+  };
+  const endPointerDrag = (event) => {
+    const drag = pointerDragRef.current;
+    if (!drag || drag.pointerId !== event.nativeEvent.pointerId) return;
+    const node = event.currentTarget;
+    if (node.hasPointerCapture?.(drag.pointerId)) node.releasePointerCapture?.(drag.pointerId);
+    pointerDragRef.current = null;
+  };
+  const handleAccessibilityAction = (event, current, update) => {
+    if (disabled) return;
+    if (event.nativeEvent.actionName === "increment") update(current + safeStep);
+    if (event.nativeEvent.actionName === "decrement") update(current - safeStep);
+  };
+  const handleWebKeyDown = (event, current, minimum, maximum, update) => {
+    if (disabled) return;
+    const key = event.nativeEvent?.key ?? event.key;
+    let nextValue;
+    if (key === "ArrowRight" || key === "ArrowUp") nextValue = current + safeStep;
+    if (key === "ArrowLeft" || key === "ArrowDown") nextValue = current - safeStep;
+    if (key === "Home") nextValue = minimum;
+    if (key === "End") nextValue = maximum;
+    if (nextValue === void 0) return;
+    event.preventDefault();
+    event.stopPropagation();
+    update(nextValue);
+  };
+  const commitDraft = (draft, update) => {
+    const result = parseRangeDraft(draft, parseValue);
+    if (result.kind === "empty") update(void 0);
+    if (result.kind === "value") update(result.value);
+  };
+  const changeFromDraft = (draft) => {
+    setFromDraft(draft);
+    const result = parseRangeDraft(draft, parseValue);
+    if (result.kind === "empty") updateFromInput(void 0);
+    if (result.kind === "value") updateFromInput(result.value);
+  };
+  const changeToDraft = (draft) => {
+    setToDraft(draft);
+    const result = parseRangeDraft(draft, parseValue);
+    if (result.kind === "empty") updateToInput(void 0);
+    if (result.kind === "value") updateToInput(result.value);
+  };
+  const focusWebThumb = (target) => {
+    if (Platform.OS !== "web") return;
+    const node = target === "from" ? fromThumbRef.current : toThumbRef.current;
+    node?.focus?.();
+  };
+  const updateNearestFromTrack = (locationX) => {
+    if (disabled || thumbTravel === 0 || span === 0) return;
+    const offset = Math.min(
+      thumbTravel,
+      Math.max(0, locationX - TRACK_HORIZONTAL_INSET - THUMB_SIZE2 / 2)
+    );
+    const nextValue = clampAndSnap(
+      lowerBound + offset / thumbTravel * span,
+      lowerBound,
+      upperBound,
+      safeStep
+    );
+    const fromDistance = Math.abs(nextValue - effectiveFrom);
+    const toDistance = Math.abs(nextValue - effectiveTo);
+    if (effectiveFrom === effectiveTo && fromDistance === toDistance) {
+      if (nextValue < effectiveFrom) {
+        focusWebThumb("from");
+        updateFrom(nextValue);
+      }
+      if (nextValue > effectiveTo) {
+        focusWebThumb("to");
+        updateTo(nextValue);
+      }
+    } else if (fromDistance <= toDistance) {
+      focusWebThumb("from");
+      updateFrom(nextValue);
+    } else {
+      focusWebThumb("to");
+      updateTo(nextValue);
+    }
+  };
+  const handleTrackPress = (event) => {
+    updateNearestFromTrack(event.nativeEvent.locationX);
+  };
+  const handleTrackLayout = (event) => {
+    setTrackWidth(event.nativeEvent.layout.width);
+  };
+  const fromValueText = `${formatValue(effectiveFrom)}${currency ? ` ${currency}` : ""}`;
+  const toValueText = `${formatValue(effectiveTo)}${currency ? ` ${currency}` : ""}`;
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      ...rest,
+      ref: setRootRef,
+      onLayout,
+      style: [styles18.root, disabled && styles18.disabled, style],
+      children: [
+        /* @__PURE__ */ jsxs(
+          Pressable,
+          {
+            accessible: false,
+            disabled,
+            focusable: false,
+            onLayout: handleTrackLayout,
+            onPointerDown: Platform.OS === "web" ? (event) => {
+              event.preventDefault();
+              updateNearestFromTrack(event.nativeEvent.offsetX);
+            } : void 0,
+            onPress: Platform.OS === "web" ? void 0 : handleTrackPress,
+            style: styles18.sliderPlane,
+            tabIndex: -1,
+            children: [
+              /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: styles18.track }),
+              /* @__PURE__ */ jsx(
+                View,
+                {
+                  pointerEvents: "none",
+                  style: [
+                    styles18.activeTrack,
+                    {
+                      left: TRACK_HORIZONTAL_INSET + fromOffset,
+                      width: toOffset - fromOffset + THUMB_SIZE2
+                    }
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                View,
+                {
+                  ref: fromThumbRef,
+                  ...Platform.OS === "web" ? {
+                    onPointerCancel: endPointerDrag,
+                    onPointerDown: (event) => beginPointerDrag("from", effectiveFrom, event),
+                    onLostPointerCapture: endPointerDrag,
+                    onPointerMove: movePointerDrag,
+                    onPointerUp: endPointerDrag,
+                    onBlur: () => setFocusedThumb(null),
+                    onFocus: () => setFocusedThumb("from"),
+                    onKeyDown: (event) => handleWebKeyDown(event, effectiveFrom, lowerBound, effectiveTo, updateFromInput)
+                  } : fromPanResponder.panHandlers,
+                  "aria-disabled": disabled,
+                  "aria-valuemax": effectiveTo,
+                  "aria-valuemin": lowerBound,
+                  "aria-valuenow": effectiveFrom,
+                  "aria-valuetext": fromValueText,
+                  accessible: true,
+                  accessibilityActions: [{ name: "increment" }, { name: "decrement" }],
+                  accessibilityLabel: fromAccessibilityLabel,
+                  accessibilityRole: "adjustable",
+                  accessibilityState: { disabled },
+                  accessibilityValue: {
+                    min: lowerBound,
+                    max: effectiveTo,
+                    now: effectiveFrom,
+                    text: fromValueText
+                  },
+                  focusable: !disabled,
+                  onAccessibilityAction: (event) => handleAccessibilityAction(event, effectiveFrom, updateFromInput),
+                  pointerEvents: disabled ? "none" : "auto",
+                  style: [
+                    styles18.thumb,
+                    Platform.OS === "web" && styles18.thumbWeb,
+                    focusedThumb === "from" && Platform.OS === "web" && styles18.thumbFocusedWeb,
+                    { left: TRACK_HORIZONTAL_INSET + fromOffset }
+                  ],
+                  tabIndex: disabled ? -1 : 0
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                View,
+                {
+                  ref: toThumbRef,
+                  ...Platform.OS === "web" ? {
+                    onPointerCancel: endPointerDrag,
+                    onPointerDown: (event) => beginPointerDrag("to", effectiveTo, event),
+                    onLostPointerCapture: endPointerDrag,
+                    onPointerMove: movePointerDrag,
+                    onPointerUp: endPointerDrag,
+                    onBlur: () => setFocusedThumb(null),
+                    onFocus: () => setFocusedThumb("to"),
+                    onKeyDown: (event) => handleWebKeyDown(event, effectiveTo, effectiveFrom, upperBound, updateToInput)
+                  } : toPanResponder.panHandlers,
+                  "aria-disabled": disabled,
+                  "aria-valuemax": upperBound,
+                  "aria-valuemin": effectiveFrom,
+                  "aria-valuenow": effectiveTo,
+                  "aria-valuetext": toValueText,
+                  accessible: true,
+                  accessibilityActions: [{ name: "increment" }, { name: "decrement" }],
+                  accessibilityLabel: toAccessibilityLabel,
+                  accessibilityRole: "adjustable",
+                  accessibilityState: { disabled },
+                  accessibilityValue: {
+                    min: effectiveFrom,
+                    max: upperBound,
+                    now: effectiveTo,
+                    text: toValueText
+                  },
+                  focusable: !disabled,
+                  onAccessibilityAction: (event) => handleAccessibilityAction(event, effectiveTo, updateToInput),
+                  pointerEvents: disabled ? "none" : "auto",
+                  style: [
+                    styles18.thumb,
+                    Platform.OS === "web" && styles18.thumbWeb,
+                    focusedThumb === "to" && Platform.OS === "web" && styles18.thumbFocusedWeb,
+                    { left: TRACK_HORIZONTAL_INSET + toOffset }
+                  ],
+                  tabIndex: disabled ? -1 : 0
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(View, { style: styles18.inputs, children: [
+          /* @__PURE__ */ jsx(
+            RangeInput,
+            {
+              accessibilityLabel: fromAccessibilityLabel,
+              currency,
+              disabled,
+              focused: editingField === "from",
+              onChangeText: changeFromDraft,
+              onCommit: () => {
+                setEditingField(null);
+                commitDraft(fromDraft, updateFromInput);
+              },
+              onFocus: () => setEditingField("from"),
+              placeholder: fromPlaceholder,
+              value: fromDraft
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            RangeInput,
+            {
+              accessibilityLabel: toAccessibilityLabel,
+              currency,
+              disabled,
+              focused: editingField === "to",
+              onChangeText: changeToDraft,
+              onCommit: () => {
+                setEditingField(null);
+                commitDraft(toDraft, updateToInput);
+              },
+              onFocus: () => setEditingField("to"),
+              placeholder: toPlaceholder,
+              value: toDraft
+            }
+          )
+        ] })
+      ]
+    }
+  );
+});
+function RangeInput({
+  accessibilityLabel,
+  currency,
+  disabled,
+  focused,
+  onChangeText,
+  onCommit,
+  onFocus,
+  placeholder,
+  value
+}) {
+  return /* @__PURE__ */ jsxs(View, { style: [styles18.inputField, focused && styles18.inputFieldFocused], children: [
+    /* @__PURE__ */ jsx(
+      TextInput,
+      {
+        "aria-disabled": disabled,
+        accessibilityLabel,
+        accessibilityState: { disabled },
+        editable: !disabled,
+        inputMode: "decimal",
+        onBlur: onCommit,
+        onChangeText,
+        onFocus,
+        onSubmitEditing: onCommit,
+        placeholder,
+        placeholderTextColor: colors.grey150,
+        returnKeyType: "done",
+        style: [styles18.input, Platform.OS === "web" && styles18.inputWeb],
+        tabIndex: disabled ? -1 : void 0,
+        value
+      }
+    ),
+    /* @__PURE__ */ jsx(View, { style: styles18.currencySlot, children: /* @__PURE__ */ jsx(Text, { style: styles18.currency, children: currency }) })
+  ] });
+}
+var styles18 = StyleSheet.create({
+  root: {
+    width: DEFAULT_WIDTH5,
+    gap: 15,
+    alignSelf: "flex-start"
+  },
+  disabled: {
+    opacity: 0.6
+  },
+  sliderPlane: {
+    width: "100%",
+    height: THUMB_SIZE2,
+    position: "relative"
+  },
+  track: {
+    position: "absolute",
+    top: 8,
+    left: 0,
+    width: "100%",
+    height: TRACK_HEIGHT2,
+    borderRadius: 16,
+    backgroundColor: colors.grey600
+  },
+  activeTrack: {
+    position: "absolute",
+    top: 8,
+    height: TRACK_HEIGHT2,
+    borderRadius: 16,
+    backgroundColor: colors.primary
+  },
+  thumb: {
+    position: "absolute",
+    top: 0,
+    width: THUMB_SIZE2,
+    height: THUMB_SIZE2,
+    borderRadius: 32,
+    borderWidth: 2,
+    borderColor: colors.primary,
+    backgroundColor: colors.white
+  },
+  thumbWeb: {
+    cursor: "grab",
+    touchAction: "none"
+  },
+  thumbFocusedWeb: {
+    outlineColor: colors.white,
+    outlineOffset: 2,
+    outlineStyle: "solid",
+    outlineWidth: 2
+  },
+  inputs: {
+    width: "100%",
+    height: 44,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
+  },
+  inputField: {
+    width: INPUT_WIDTH,
+    height: 44,
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    borderWidth: 1,
+    borderColor: colors.grey700,
+    borderRadius: 60,
+    backgroundColor: colors.grey700
+  },
+  inputFieldFocused: {
+    borderColor: colors.primary
+  },
+  input: {
+    minWidth: 0,
+    flex: 1,
+    margin: 0,
+    padding: 0,
+    fontFamily: fonts.sans,
+    fontSize: 12,
+    fontWeight: "400",
+    lineHeight: 16,
+    letterSpacing: 0.36,
+    color: colors.white
+  },
+  inputWeb: {
+    outlineStyle: "none"
+  },
+  currencySlot: {
+    width: 20,
+    height: 20,
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0
+  },
+  currency: {
+    fontFamily: fonts.sans,
+    fontSize: 16,
+    fontWeight: "600",
+    lineHeight: 22,
+    color: colors.white
+  }
+});
+
+export { AreaExpandIcon, ArrowRightIcon, Avatar, BRAND_LOGO_COLORS, BRAND_LOGO_DEFAULT_HEIGHT, BRAND_LOGO_DEFAULT_WIDTH, Badge, BagIcon, BathroomsIcon, BedroomsIcon, BellIcon, BrandLogo, BuildingIcon, Button, CalendarIcon, CalendarOutlineIcon, CameraIcon, CardLocationIcon, CheckBadgeIcon, CheckIcon, CheckSuccessIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ClockFilledIcon, ClockIcon, CommentCard, CopyIcon, Counter, DatePicker, FacebookIcon, FavoritesButton, FiltersIcon, GlobeIcon, GuestsIcon, HeartIcon, HelpCircleIcon, HomeIcon, Icon, Input, InstagramIcon, KeyIcon, LanguageSwitcher, LayoutGridIcon, LinkedInIcon, ListViewIcon, LocationPinIcon, LogOutIcon, MailIcon, MapViewIcon, MenuIcon, MenuItem, MinusIcon, NavigateIcon, PhoneIcon, PlusIcon, QrCodeIcon, Range, RatingInput, RatingStarIcon, SaveHeartIcon, SearchIcon, SegmentedToggle, Select, SettingsIcon, ShareIcon, ShowIcon, SidebarIcon, SortIcon, StarFilledIcon, StarIcon, StatCard, Textarea, Toggle, TooltipArrowIcon, UserIcon, UsersAltIcon, VideoIcon, WhatsAppIcon, avatarTypography, badgeTypography, buttonTypography, colors, commentCardTypography, counterTypography, datePickerTypography, defaultLanguageOptions, fonts, getIconsByGroup, grey, iconGroupNames, iconGroups, iconNames, icons, inputTypography, languageSwitcherTypography, ratingTypography, segmentedToggleTypography, selectTypography, statCardTypography, textareaTypography };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map