@ecohouse/ui 0.1.21 → 0.1.23

package/dist/index.js

@@ -1,7 +1,7 @@
 import { forwardRef, useRef, useMemo, useState, useCallback, useEffect, useLayoutEffect, isValidElement, cloneElement } from 'react';
-import { Pressable, View, Text, StyleSheet, Platform, Image, Animated, Easing, TouchableOpacity, TextInput, ScrollView, PanResponder } from 'react-native';
+import { View, Text, Platform, Pressable, StyleSheet, Image, Animated, Easing, TouchableOpacity, TextInput, ScrollView, PanResponder } from 'react-native';
 import Svg16, { Path } from 'react-native-svg';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
 // src/components/Avatar/Avatar.tsx
 
@@ -99,7 +99,7 @@ var segmentedToggleTypography = {
   fontFamily: fonts.sans,
   fontSize: 12,
   fontWeight: "500",
-  lineHeight: 12,
+  lineHeight: 14,
   letterSpacing: 0
 };
 var languageSwitcherTypography = {
@@ -1453,6 +1453,138 @@ function useApplyWebClassName(ref, className, enabled = true) {
     };
   }, [ref, className, enabled]);
 }
+var Amenity = forwardRef(function Amenity2({
+  icon,
+  label,
+  variant = "display",
+  selected,
+  defaultSelected = false,
+  onSelectedChange,
+  disabled = false,
+  style,
+  labelStyle,
+  className,
+  accessibilityLabel,
+  ...rest
+}, forwardedRef) {
+  const rootRef = useRef(null);
+  const setRootRef = useMemo(() => mergeRefs(rootRef, forwardedRef), [forwardedRef]);
+  const isControlled = typeof selected === "boolean";
+  const [uncontrolledSelected, setUncontrolledSelected] = useState(defaultSelected);
+  const isSelected = isControlled ? selected : uncontrolledSelected;
+  const isSelectable = variant === "selectable";
+  const iconColor = isSelectable && isSelected ? colors.primary : colors.white;
+  useApplyWebClassName(rootRef, className?.trim() || void 0);
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(View, { style: styles.iconSlot, children: /* @__PURE__ */ jsx(AmenityIcon, { color: iconColor, name: icon }) }),
+    /* @__PURE__ */ jsx(
+      Text,
+      {
+        style: [
+          styles.label,
+          isSelectable ? styles.selectableLabel : styles.displayLabel,
+          Platform.OS === "android" ? styles.labelAndroid : null,
+          labelStyle
+        ],
+        children: label
+      }
+    )
+  ] });
+  if (!isSelectable) {
+    return /* @__PURE__ */ jsx(
+      View,
+      {
+        ...rest,
+        ref: setRootRef,
+        accessibilityLabel: accessibilityLabel ?? label,
+        accessibilityRole: "text",
+        style: [styles.base, styles.display, style],
+        children: content
+      }
+    );
+  }
+  const handlePress = () => {
+    if (disabled) return;
+    const nextSelected = !isSelected;
+    if (!isControlled) setUncontrolledSelected(nextSelected);
+    onSelectedChange?.(nextSelected);
+  };
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      ...rest,
+      ref: setRootRef,
+      accessibilityLabel: accessibilityLabel ?? label,
+      accessibilityRole: "checkbox",
+      accessibilityState: { checked: isSelected, disabled },
+      disabled,
+      onPress: handlePress,
+      style: [
+        styles.base,
+        styles.selectable,
+        isSelected && styles.selected,
+        disabled && styles.disabled,
+        style
+      ],
+      children: content
+    }
+  );
+});
+var styles = StyleSheet.create({
+  base: {
+    height: 44,
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    flexDirection: "row",
+    alignItems: "center",
+    alignSelf: "flex-start",
+    backgroundColor: colors.grey700
+  },
+  display: {
+    gap: 8,
+    borderRadius: 39,
+    backgroundColor: colors.grey750
+  },
+  selectable: {
+    gap: 12,
+    borderWidth: 1,
+    borderColor: "transparent",
+    borderStyle: "solid",
+    borderRadius: 79
+  },
+  selected: {
+    borderColor: colors.primary
+  },
+  disabled: {
+    opacity: 0.6
+  },
+  iconSlot: {
+    width: 20,
+    height: 20,
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0
+  },
+  label: {
+    fontFamily: fonts.sans,
+    color: colors.white
+  },
+  displayLabel: {
+    fontSize: 14,
+    fontWeight: "500",
+    lineHeight: 14,
+    letterSpacing: 0
+  },
+  selectableLabel: {
+    fontSize: 12,
+    fontWeight: "700",
+    lineHeight: 13.44,
+    letterSpacing: 0
+  },
+  labelAndroid: {
+    includeFontPadding: false
+  }
+});
 var ITEM_RADIUS = 12;
 var ICON_SIZE = 16;
 var MenuItem = forwardRef(function MenuItem2({
@@ -1507,19 +1639,19 @@ var MenuItem = forwardRef(function MenuItem2({
       accessibilityLabel: resolvedAccessibilityLabel,
       accessibilityState: { disabled },
       style: [
-        styles.root,
+        styles2.root,
         { backgroundColor: resolvedBackground },
-        disabled && styles.disabled,
+        disabled && styles2.disabled,
         style
       ],
       children: [
-        icon ? /* @__PURE__ */ jsx(View, { style: styles.iconSlot, children: icon }) : null,
-        /* @__PURE__ */ jsx(Text, { style: [styles.label, labelStyle], numberOfLines: 1, children: label })
+        icon ? /* @__PURE__ */ jsx(View, { style: styles2.iconSlot, children: icon }) : null,
+        /* @__PURE__ */ jsx(Text, { style: [styles2.label, labelStyle], numberOfLines: 1, children: label })
       ]
     }
   );
 });
-var styles = StyleSheet.create({
+var styles2 = StyleSheet.create({
   root: {
     minHeight: 40,
     borderRadius: ITEM_RADIUS,
@@ -1587,10 +1719,10 @@ var FavoritesButton = forwardRef(
         hitSlop,
         onPress: handlePress,
         style: ({ pressed }) => [
-          styles2.button,
+          styles3.button,
           webBlurStyle,
-          pressed && styles2.pressed,
-          disabled && styles2.disabled,
+          pressed && styles3.pressed,
+          disabled && styles3.disabled,
           style
         ],
         children: /* @__PURE__ */ jsx(
@@ -1606,7 +1738,7 @@ var FavoritesButton = forwardRef(
     );
   }
 );
-var styles2 = StyleSheet.create({
+var styles3 = StyleSheet.create({
   button: {
     padding: 12,
     gap: 10,
@@ -1784,7 +1916,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: [styles3.wrapper, isOpen && styles3.wrapperOpen], children: [
+  return /* @__PURE__ */ jsxs(View, { ref: wrapperRef, style: [styles4.wrapper, isOpen && styles4.wrapperOpen], children: [
     /* @__PURE__ */ jsxs(
       Pressable,
       {
@@ -1796,25 +1928,25 @@ var Avatar = forwardRef(function Avatar2({
         accessibilityRole: isInteractive ? "button" : void 0,
         accessibilityLabel: resolvedAccessibilityLabel,
         accessibilityState: isInteractive ? { disabled, expanded: hasMenu ? isOpen : void 0 } : void 0,
-        style: [styles3.root, disabled && styles3.disabled, style],
+        style: [styles4.root, disabled && styles4.disabled, style],
         children: [
-          /* @__PURE__ */ jsx(View, { style: styles3.imageWrap, children: hasImage ? /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(View, { style: styles4.imageWrap, children: hasImage ? /* @__PURE__ */ jsx(
             Image,
             {
               source: { uri: imageUrl ?? void 0 },
-              style: styles3.image,
+              style: styles4.image,
               onError: () => setImageFailed(true)
             }
-          ) : /* @__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
+          ) : /* @__PURE__ */ jsx(View, { style: styles4.imageFallback, children: /* @__PURE__ */ jsx(UserIcon, { size: FALLBACK_ICON_SIZE, color: colors.primary }) }) }),
+          /* @__PURE__ */ jsxs(View, { style: styles4.textColumn, children: [
+            /* @__PURE__ */ jsx(Text, { style: styles4.name, numberOfLines: 1, children: name }),
+            email ? /* @__PURE__ */ jsx(Text, { style: styles4.email, numberOfLines: 1, children: email }) : null
           ] }),
-          showChevron ? /* @__PURE__ */ jsx(View, { style: [styles3.chevronSlot, isOpen && styles3.chevronOpen], children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: CHEVRON_SIZE, color: isOpen ? colors.primary : colors.grey100 }) }) : null
+          showChevron ? /* @__PURE__ */ jsx(View, { style: [styles4.chevronSlot, isOpen && styles4.chevronOpen], children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: CHEVRON_SIZE, color: isOpen ? colors.primary : colors.grey100 }) }) : null
         ]
       }
     ),
-    hasMenu && isOpen ? /* @__PURE__ */ jsx(View, { style: [styles3.menu, menuWidth != null && { right: void 0, width: menuWidth }], children: resolvedMenuItems.map((item) => {
+    hasMenu && isOpen ? /* @__PURE__ */ jsx(View, { style: [styles4.menu, menuWidth != null && { right: void 0, width: menuWidth }], children: resolvedMenuItems.map((item) => {
       const itemKey = item.key ?? item.label;
       return /* @__PURE__ */ jsx(
         MenuItem,
@@ -1831,7 +1963,7 @@ var Avatar = forwardRef(function Avatar2({
     }) }) : null
   ] });
 });
-var styles3 = StyleSheet.create({
+var styles4 = StyleSheet.create({
   wrapper: {
     position: "relative",
     alignSelf: "flex-start"
@@ -1947,22 +2079,22 @@ var Badge = forwardRef(function Badge2({ label, variant = "default", icon: Icon2
       ...rest,
       ref: setContainerRef,
       style: [
-        styles4.base,
+        styles5.base,
         { backgroundColor: preset.backgroundColor },
-        preset.border ? styles4.transparentBorder : null,
+        preset.border ? styles5.transparentBorder : null,
         preset.blur ? webBlurStyle2 : null,
         style
       ],
       accessibilityRole: "text",
       accessibilityLabel: accessibilityLabel ?? label,
       children: [
-        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 })
+        Icon2 ? /* @__PURE__ */ jsx(View, { style: styles5.iconSlot, children: /* @__PURE__ */ jsx(Icon2, { size: ICON_SIZE3, color: preset.iconColor }) }) : null,
+        /* @__PURE__ */ jsx(Text, { style: [styles5.label, Platform.OS === "android" ? styles5.labelAndroid : null], children: label })
       ]
     }
   );
 });
-var styles4 = StyleSheet.create({
+var styles5 = StyleSheet.create({
   base: {
     flexDirection: "row",
     alignItems: "center",
@@ -2035,7 +2167,7 @@ var Counter = forwardRef(function Counter2({
     if (!isControlled) setUncontrolledValue(next);
     onValueChange?.(next);
   };
-  return /* @__PURE__ */ jsxs(View, { ...rest, ref: setContainerRef, style: [styles5.base, style], children: [
+  return /* @__PURE__ */ jsxs(View, { ...rest, ref: setContainerRef, style: [styles6.base, style], children: [
     /* @__PURE__ */ jsx(
       Pressable,
       {
@@ -2045,11 +2177,11 @@ var Counter = forwardRef(function Counter2({
         accessibilityRole: "button",
         accessibilityLabel: "Decrease value",
         accessibilityState: { disabled: decrementDisabled },
-        style: [styles5.button, webBlurStyle3, decrementDisabled && styles5.buttonDisabled],
+        style: [styles6.button, webBlurStyle3, decrementDisabled && styles6.buttonDisabled],
         children: /* @__PURE__ */ jsx(MinusIcon, {})
       }
     ),
-    /* @__PURE__ */ jsx(Text, { style: styles5.value, children: resolvedValue }),
+    /* @__PURE__ */ jsx(Text, { style: styles6.value, children: resolvedValue }),
     /* @__PURE__ */ jsx(
       Pressable,
       {
@@ -2059,13 +2191,13 @@ var Counter = forwardRef(function Counter2({
         accessibilityRole: "button",
         accessibilityLabel: "Increase value",
         accessibilityState: { disabled: incrementDisabled },
-        style: [styles5.button, webBlurStyle3, incrementDisabled && styles5.buttonDisabled],
+        style: [styles6.button, webBlurStyle3, incrementDisabled && styles6.buttonDisabled],
         children: /* @__PURE__ */ jsx(PlusIcon, {})
       }
     )
   ] });
 });
-var styles5 = StyleSheet.create({
+var styles6 = StyleSheet.create({
   base: {
     flexDirection: "row",
     alignItems: "center",
@@ -2092,6 +2224,7 @@ var styles5 = StyleSheet.create({
 var ICON_SIZE4 = 20;
 var ANIMATION_DURATION = 200;
 var OPTION_HORIZONTAL_PADDING = 16;
+var OPTION_MIN_WIDTH = 97;
 var SegmentedToggle = forwardRef(
   function SegmentedToggle2({
     options,
@@ -2117,12 +2250,9 @@ var SegmentedToggle = forwardRef(
     const resolvedClassName = className?.trim() || void 0;
     const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
     const progress = useRef(new Animated.Value(selectedIndex)).current;
-    const [contentWidths, setContentWidths] = useState([0, 0]);
     const [containerWidth, setContainerWidth] = useState(0);
     const availableOptionWidth = Math.max(0, (containerWidth - 12) / 2);
-    const widestContentWidth = Math.max(...contentWidths);
-    const contentBasedOptionWidth = widestContentWidth > 0 ? widestContentWidth + OPTION_HORIZONTAL_PADDING * 2 : 0;
-    const optionWidth = fullWidth ? availableOptionWidth : contentBasedOptionWidth;
+    const optionWidth = fullWidth ? availableOptionWidth : OPTION_MIN_WIDTH;
     const indicatorTranslateX = progress.interpolate({
       inputRange: [0, 1],
       outputRange: [0, optionWidth + 4]
@@ -2156,9 +2286,9 @@ var SegmentedToggle = forwardRef(
           onLayout?.(event);
         },
         style: [
-          styles6.base,
-          fullWidth ? styles6.fullWidth : styles6.contentWidth,
-          disabled && styles6.disabled,
+          styles7.base,
+          fullWidth ? styles7.fullWidth : styles7.contentWidth,
+          disabled && styles7.disabled,
           style
         ],
         accessibilityRole: "radiogroup",
@@ -2168,12 +2298,12 @@ var SegmentedToggle = forwardRef(
             {
               pointerEvents: "none",
               style: [
-                styles6.activeIndicator,
+                styles7.activeIndicator,
                 { width: optionWidth, transform: [{ translateX: indicatorTranslateX }] }
               ]
             }
           ) : null,
-          options.map(({ value: optionValue, label, icon: Icon2 }, index) => {
+          options.map(({ value: optionValue, label, icon: Icon2 }) => {
             const selected = optionValue === selectedValue;
             const iconColor = selected ? colors.primary : colors.whiteAlpha20;
             const labelColor = selected ? colors.whiteAlpha86 : colors.whiteAlpha40;
@@ -2187,28 +2317,13 @@ var SegmentedToggle = forwardRef(
                 accessibilityLabel: label,
                 accessibilityState: { selected, disabled },
                 style: [
-                  styles6.option,
-                  fullWidth ? styles6.optionFullWidth : optionWidth > 0 && { minWidth: optionWidth }
+                  styles7.option,
+                  fullWidth ? styles7.optionFullWidth : { width: OPTION_MIN_WIDTH, minWidth: OPTION_MIN_WIDTH }
                 ],
-                children: /* @__PURE__ */ jsxs(
-                  View,
-                  {
-                    onLayout: (event) => {
-                      const nextWidth = event.nativeEvent.layout.width;
-                      setContentWidths((currentWidths) => {
-                        if (currentWidths[index] === nextWidth) return currentWidths;
-                        const nextWidths = [currentWidths[0], currentWidths[1]];
-                        nextWidths[index] = nextWidth;
-                        return nextWidths;
-                      });
-                    },
-                    style: styles6.optionContent,
-                    children: [
-                      Icon2 ? /* @__PURE__ */ jsx(Icon2, { size: ICON_SIZE4, color: iconColor }) : null,
-                      /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [styles6.label, { color: labelColor }], children: label })
-                    ]
-                  }
-                )
+                children: /* @__PURE__ */ jsxs(View, { style: styles7.optionContent, children: [
+                  Icon2 ? /* @__PURE__ */ jsx(Icon2, { size: ICON_SIZE4, color: iconColor }) : null,
+                  /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [styles7.label, { color: labelColor }], children: label })
+                ] })
               },
               optionValue
             );
@@ -2218,7 +2333,7 @@ var SegmentedToggle = forwardRef(
     );
   }
 );
-var styles6 = StyleSheet.create({
+var styles7 = StyleSheet.create({
   base: {
     height: 44,
     flexDirection: "row",
@@ -2356,7 +2471,7 @@ var LanguageSwitcher = forwardRef(
       {
         ...rest,
         ref: setWrapperRef,
-        style: [styles7.wrapper, isOpen && styles7.wrapperOpen, disabled && styles7.disabled, style],
+        style: [styles8.wrapper, isOpen && styles8.wrapperOpen, disabled && styles8.disabled, style],
         children: [
           /* @__PURE__ */ jsxs(
             Pressable,
@@ -2371,17 +2486,17 @@ var LanguageSwitcher = forwardRef(
               onHoverIn: () => setTriggerHovered(true),
               onHoverOut: () => setTriggerHovered(false),
               style: ({ pressed }) => [
-                styles7.trigger,
-                (triggerHovered || pressed || isOpen) && styles7.triggerActive
+                styles8.trigger,
+                (triggerHovered || pressed || isOpen) && styles8.triggerActive
               ],
               children: [
                 /* @__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 }) })
+                /* @__PURE__ */ jsx(Text, { style: styles8.triggerLabel, numberOfLines: 1, children: selectedOption?.label ?? "" }),
+                /* @__PURE__ */ jsx(View, { style: [styles8.chevron, isOpen && styles8.chevronOpen], children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: ICON_SIZE5, color: colors.white, strokeWidth: 2 }) })
               ]
             }
           ),
-          isOpen && options.length > 0 ? /* @__PURE__ */ jsx(View, { style: styles7.menu, accessibilityRole: "menu", children: options.map((option) => {
+          isOpen && options.length > 0 ? /* @__PURE__ */ jsx(View, { style: styles8.menu, accessibilityRole: "menu", children: options.map((option) => {
             const selected = option.value === selectedValue;
             return /* @__PURE__ */ jsx(
               Pressable,
@@ -2393,10 +2508,10 @@ var LanguageSwitcher = forwardRef(
                 onHoverIn: () => setHoveredValue(option.value),
                 onHoverOut: () => setHoveredValue(null),
                 style: ({ pressed }) => [
-                  styles7.item,
-                  selected ? styles7.itemSelected : (hoveredValue === option.value || pressed) && styles7.itemHovered
+                  styles8.item,
+                  selected ? styles8.itemSelected : (hoveredValue === option.value || pressed) && styles8.itemHovered
                 ],
-                children: /* @__PURE__ */ jsx(Text, { style: [styles7.itemLabel, selected && styles7.itemLabelSelected], children: option.label })
+                children: /* @__PURE__ */ jsx(Text, { style: [styles8.itemLabel, selected && styles8.itemLabelSelected], children: option.label })
               },
               option.value
             );
@@ -2406,7 +2521,7 @@ var LanguageSwitcher = forwardRef(
     );
   }
 );
-var styles7 = StyleSheet.create({
+var styles8 = StyleSheet.create({
   wrapper: {
     position: "relative",
     width: CONTROL_WIDTH,
@@ -2502,17 +2617,17 @@ var StatCard = forwardRef(function StatCard2({
     {
       ...rest,
       ref: setContainerRef,
-      style: [styles8.base, style],
+      style: [styles9.base, style],
       accessibilityRole: "text",
       accessibilityLabel: accessibilityLabel ?? label,
       children: [
         /* @__PURE__ */ jsx(Icon2, { ...iconProps, size: iconSize, color: iconProps?.color ?? colors.white }),
-        /* @__PURE__ */ jsx(Text, { style: styles8.label, children: label })
+        /* @__PURE__ */ jsx(Text, { style: styles9.label, children: label })
       ]
     }
   );
 });
-var styles8 = StyleSheet.create({
+var styles9 = StyleSheet.create({
   base: {
     width: 204.5,
     minHeight: 114,
@@ -2598,7 +2713,7 @@ var Button = forwardRef(
     useApplyWebClassName(textRef, textClassName);
     const iconNode = customIcon ?? /* @__PURE__ */ jsx(ArrowRightIcon, { size: metrics.iconSize, color: preset.iconColor });
     const containerStyle = [
-      styles9.base,
+      styles10.base,
       {
         minHeight: metrics.minHeight,
         borderRadius: metrics.borderRadius,
@@ -2609,16 +2724,16 @@ var Button = forwardRef(
         paddingRight: hasIcon ? metrics.paddingRightWithIcon : metrics.paddingRight,
         gap: hasIcon ? metrics.gap : 0
       },
-      hasIcon ? styles9.contentWithIcon : styles9.contentWithoutIcon,
-      disabled && styles9.disabled,
+      hasIcon ? styles10.contentWithIcon : styles10.contentWithoutIcon,
+      disabled && styles10.disabled,
       style
     ];
     const labelStyle = [
-      styles9.label,
+      styles10.label,
       metrics.text,
       { color: preset.textColor },
-      Platform.OS === "android" ? styles9.labelAndroid : null,
-      !hasIcon && styles9.labelCentered,
+      Platform.OS === "android" ? styles10.labelAndroid : null,
+      !hasIcon && styles10.labelCentered,
       textStyle
     ];
     return /* @__PURE__ */ jsxs(
@@ -2639,7 +2754,7 @@ var Button = forwardRef(
             View,
             {
               style: [
-                styles9.iconContainer,
+                styles10.iconContainer,
                 {
                   width: metrics.iconContainerSize,
                   height: metrics.iconContainerSize,
@@ -2655,7 +2770,7 @@ var Button = forwardRef(
     );
   }
 );
-var styles9 = StyleSheet.create({
+var styles10 = StyleSheet.create({
   base: {
     flexDirection: "row",
     alignItems: "center",
@@ -2739,13 +2854,13 @@ var Checkbox = forwardRef(function Checkbox2({
       accessibilityRole: "checkbox",
       accessibilityLabel: resolvedAccessibilityLabel,
       accessibilityState: { checked: isActive, disabled },
-      style: [styles10.root, disabled && styles10.disabled, style],
+      style: [styles11.root, disabled && styles11.disabled, style],
       children: [
         /* @__PURE__ */ jsx(
           View,
           {
             style: [
-              styles10.box,
+              styles11.box,
               {
                 backgroundColor: chrome.backgroundColor,
                 borderColor: chrome.borderColor
@@ -2754,12 +2869,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: [styles10.label, labelStyle], children: labelContent }) : labelContent : null
+        labelContent != null && labelContent !== false ? typeof labelContent === "string" || typeof labelContent === "number" ? /* @__PURE__ */ jsx(Text, { style: [styles11.label, labelStyle], children: labelContent }) : labelContent : null
       ]
     }
   );
 });
-var styles10 = StyleSheet.create({
+var styles11 = StyleSheet.create({
   root: {
     flexDirection: "row",
     alignItems: "center",
@@ -3010,9 +3125,9 @@ var DatePicker = forwardRef(
       {
         ...rest,
         ref: setRootRef,
-        style: [styles11.root, isOpen && styles11.rootOpen, disabled && styles11.disabled, style],
+        style: [styles12.root, isOpen && styles12.rootOpen, disabled && styles12.disabled, style],
         accessibilityState: { disabled, expanded: isOpen },
-        children: /* @__PURE__ */ jsxs(View, { style: [styles11.triggerWrap, isOpen && styles11.triggerWrapOpen], children: [
+        children: /* @__PURE__ */ jsxs(View, { style: [styles12.triggerWrap, isOpen && styles12.triggerWrapOpen], children: [
           /* @__PURE__ */ jsxs(
             Pressable,
             {
@@ -3023,17 +3138,17 @@ var DatePicker = forwardRef(
               accessibilityLabel: resolvedAccessibilityLabel,
               accessibilityState: { disabled, expanded: isOpen },
               style: [
-                styles11.trigger,
+                styles12.trigger,
                 { borderColor: triggerBorderColor, backgroundColor: colors.grey700 }
               ],
               children: [
-                /* @__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 }) })
+                /* @__PURE__ */ jsx(Text, { style: [styles12.triggerText, { color: triggerTextColor }], numberOfLines: 1, children: triggerLabel }),
+                /* @__PURE__ */ jsx(View, { style: styles12.iconSlot, children: /* @__PURE__ */ jsx(CalendarOutlineIcon, { size: ICON_SIZE7, color: colors.grey100 }) })
               ]
             }
           ),
-          isOpen ? /* @__PURE__ */ jsxs(View, { style: [styles11.menu, calendarStyle], children: [
-            /* @__PURE__ */ jsxs(View, { style: styles11.calendarHeader, children: [
+          isOpen ? /* @__PURE__ */ jsxs(View, { style: [styles12.menu, calendarStyle], children: [
+            /* @__PURE__ */ jsxs(View, { style: styles12.calendarHeader, children: [
               /* @__PURE__ */ jsx(
                 Pressable,
                 {
@@ -3041,11 +3156,11 @@ var DatePicker = forwardRef(
                   hitSlop: 8,
                   accessibilityRole: "button",
                   accessibilityLabel: "Previous month",
-                  style: styles11.navButton,
+                  style: styles12.navButton,
                   children: /* @__PURE__ */ jsx(ChevronLeftIcon, { size: NAV_ICON_SIZE, color: colors.white })
                 }
               ),
-              /* @__PURE__ */ jsxs(Text, { style: styles11.monthHeading, children: [
+              /* @__PURE__ */ jsxs(Text, { style: styles12.monthHeading, children: [
                 monthNames[visibleMonth.getMonth()],
                 " ",
                 visibleMonth.getFullYear()
@@ -3057,13 +3172,13 @@ var DatePicker = forwardRef(
                   hitSlop: 8,
                   accessibilityRole: "button",
                   accessibilityLabel: "Next month",
-                  style: styles11.navButton,
-                  children: /* @__PURE__ */ jsx(View, { style: styles11.navIconMirror, children: /* @__PURE__ */ jsx(ChevronLeftIcon, { size: NAV_ICON_SIZE, color: colors.white }) })
+                  style: styles12.navButton,
+                  children: /* @__PURE__ */ jsx(View, { style: styles12.navIconMirror, children: /* @__PURE__ */ jsx(ChevronLeftIcon, { size: NAV_ICON_SIZE, color: colors.white }) })
                 }
               )
             ] }),
             /* @__PURE__ */ jsxs(View, { children: [
-              /* @__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}`)) }),
+              /* @__PURE__ */ jsx(View, { style: styles12.weekdayRow, children: weekdayLabels.map((weekdayLabel, index) => /* @__PURE__ */ jsx(View, { style: styles12.dayCellWrap, children: /* @__PURE__ */ jsx(Text, { style: styles12.weekdayText, children: weekdayLabel }) }, `${weekdayLabel}-${index}`)) }),
               weeks.map((week, weekIndex) => {
                 let rangeHighlightStyle = null;
                 if (isRange && rangeValue.start && rangeValue.end) {
@@ -3100,13 +3215,13 @@ var DatePicker = forwardRef(
                 return /* @__PURE__ */ jsxs(
                   View,
                   {
-                    style: [styles11.weekRow, weekIndex > 0 && styles11.weekRowSpaced],
+                    style: [styles12.weekRow, weekIndex > 0 && styles12.weekRowSpaced],
                     children: [
                       rangeHighlightStyle ? /* @__PURE__ */ jsx(
                         View,
                         {
                           pointerEvents: "none",
-                          style: [styles11.rangeHighlight, rangeHighlightStyle]
+                          style: [styles12.rangeHighlight, rangeHighlightStyle]
                         }
                       ) : null,
                       week.map((day, dayIndex) => {
@@ -3129,7 +3244,7 @@ var DatePicker = forwardRef(
                             onHoverOut: () => setHoveredDayKey((current) => current === dayKey ? null : current),
                             onPressIn: () => setHoveredDayKey(dayKey),
                             onPressOut: () => setHoveredDayKey((current) => current === dayKey ? null : current),
-                            style: styles11.dayCellWrap,
+                            style: styles12.dayCellWrap,
                             accessibilityRole: "button",
                             accessibilityLabel: formatValue(day),
                             accessibilityState: {
@@ -3141,14 +3256,14 @@ var DatePicker = forwardRef(
                                 View,
                                 {
                                   style: [
-                                    styles11.dayCircle,
-                                    isSelectedEndpoint && styles11.dayCircleSelected,
-                                    isHovered && styles11.dayCircleHovered
+                                    styles12.dayCircle,
+                                    isSelectedEndpoint && styles12.dayCircleSelected,
+                                    isHovered && styles12.dayCircleHovered
                                   ],
-                                  children: /* @__PURE__ */ jsx(Text, { style: [styles11.dayText, { color: dayTextColor }], children: day.getDate() })
+                                  children: /* @__PURE__ */ jsx(Text, { style: [styles12.dayText, { color: dayTextColor }], children: day.getDate() })
                                 }
                               ),
-                              isToday && !isSelectedEndpoint ? /* @__PURE__ */ jsx(View, { style: styles11.todayDot }) : null
+                              isToday && !isSelectedEndpoint ? /* @__PURE__ */ jsx(View, { style: styles12.todayDot }) : null
                             ]
                           },
                           dayIndex
@@ -3166,7 +3281,7 @@ var DatePicker = forwardRef(
     );
   }
 );
-var styles11 = StyleSheet.create({
+var styles12 = StyleSheet.create({
   root: {
     width: DEFAULT_WIDTH,
     gap: 8,
@@ -3445,13 +3560,13 @@ var Input = forwardRef(function Input2({
   });
   useApplyWebClassName(rootRef, className);
   useApplyWebClassName(inputRef, inputClassName);
-  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,
+  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,
     /* @__PURE__ */ jsxs(
       View,
       {
         style: [
-          styles12.field,
+          styles13.field,
           {
             height: metrics.height,
             borderRadius: metrics.borderRadius,
@@ -3466,7 +3581,7 @@ var Input = forwardRef(function Input2({
           fieldStyle
         ],
         children: [
-          hasLeftIcon ? /* @__PURE__ */ jsx(View, { style: [styles12.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }], children: leftIconNode }) : null,
+          hasLeftIcon ? /* @__PURE__ */ jsx(View, { style: [styles13.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }], children: leftIconNode }) : null,
           /* @__PURE__ */ jsx(
             TextInput,
             {
@@ -3490,11 +3605,11 @@ var Input = forwardRef(function Input2({
                 onBlur?.(event);
               },
               style: [
-                styles12.input,
+                styles13.input,
                 metrics.text,
                 { color: chrome.textColor },
-                Platform.OS === "web" ? styles12.inputWeb : null,
-                Platform.OS === "android" ? styles12.inputAndroid : null,
+                Platform.OS === "web" ? styles13.inputWeb : null,
+                Platform.OS === "android" ? styles13.inputAndroid : null,
                 inputStyle
               ],
               accessibilityLabel: resolvedAccessibilityLabel,
@@ -3506,20 +3621,20 @@ var Input = forwardRef(function Input2({
             {
               onPress: onRightIconPress,
               disabled,
-              style: [styles12.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }],
+              style: [styles13.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }],
               accessibilityRole: "button",
               accessibilityLabel: rightIconAccessibilityLabel,
               hitSlop: 8,
               children: rightIconNode
             }
-          ) : /* @__PURE__ */ jsx(View, { style: [styles12.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }], children: rightIconNode }) : null
+          ) : /* @__PURE__ */ jsx(View, { style: [styles13.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }], children: rightIconNode }) : null
         ]
       }
     ),
-    showHint && hint ? /* @__PURE__ */ jsx(Text, { style: [styles12.hint, { color: chrome.hintColor }], children: hint }) : null
+    showHint && hint ? /* @__PURE__ */ jsx(Text, { style: [styles13.hint, { color: chrome.hintColor }], children: hint }) : null
   ] });
 });
-var styles12 = StyleSheet.create({
+var styles13 = StyleSheet.create({
   root: {
     width: DEFAULT_WIDTH2,
     gap: 8,
@@ -3635,25 +3750,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: styles13.multiValueRoot, children: [
-    /* @__PURE__ */ jsxs(View, { pointerEvents: "none", style: styles13.measureRow, children: [
+  return /* @__PURE__ */ jsxs(View, { style: styles14.multiValueRoot, children: [
+    /* @__PURE__ */ jsxs(View, { pointerEvents: "none", style: styles14.measureRow, children: [
       options.map((option) => /* @__PURE__ */ jsxs(
         View,
         {
-          style: styles13.chip,
+          style: styles14.chip,
           onLayout: (event) => handleChipLayout(option.value, event),
           children: [
-            /* @__PURE__ */ jsx(Text, { style: styles13.chipLabel, numberOfLines: 1, children: option.label }),
-            /* @__PURE__ */ jsx(Text, { style: styles13.chipRemove, children: "\xD7" })
+            /* @__PURE__ */ jsx(Text, { style: styles14.chipLabel, numberOfLines: 1, children: option.label }),
+            /* @__PURE__ */ jsx(Text, { style: styles14.chipRemove, children: "\xD7" })
           ]
         },
         `measure-${option.value}`
       )),
-      /* @__PURE__ */ jsx(View, { style: styles13.ellipsis, onLayout: handleEllipsisLayout, children: /* @__PURE__ */ jsx(Text, { style: styles13.ellipsisText, children: "..." }) })
+      /* @__PURE__ */ jsx(View, { style: styles14.ellipsis, onLayout: handleEllipsisLayout, children: /* @__PURE__ */ jsx(Text, { style: styles14.ellipsisText, children: "..." }) })
     ] }),
-    /* @__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__ */ jsxs(View, { style: styles14.chipsRow, onLayout: handleContainerLayout, children: [
+      visible.map((option) => /* @__PURE__ */ jsxs(View, { style: styles14.chip, children: [
+        /* @__PURE__ */ jsx(Text, { style: styles14.chipLabel, numberOfLines: 1, children: option.label }),
         /* @__PURE__ */ jsx(
           Pressable,
           {
@@ -3665,11 +3780,11 @@ function MultiValueChips({ options, disabled, onRemove }) {
             hitSlop: 6,
             accessibilityRole: "button",
             accessibilityLabel: `Remove ${option.label}`,
-            children: /* @__PURE__ */ jsx(Text, { style: styles13.chipRemove, children: "\xD7" })
+            children: /* @__PURE__ */ jsx(Text, { style: styles14.chipRemove, children: "\xD7" })
           }
         )
       ] }, option.value)),
-      hasOverflow ? /* @__PURE__ */ jsx(View, { style: styles13.ellipsis, children: /* @__PURE__ */ jsx(Text, { style: styles13.ellipsisText, children: "..." }) }) : null
+      hasOverflow ? /* @__PURE__ */ jsx(View, { style: styles14.ellipsis, children: /* @__PURE__ */ jsx(Text, { style: styles14.ellipsisText, children: "..." }) }) : null
     ] })
   ] });
 }
@@ -3893,11 +4008,11 @@ var Select = forwardRef(
       {
         ...rest,
         ref: setRootRef,
-        style: [styles13.root, isOpen && styles13.rootOpen, disabled && styles13.disabled, style],
+        style: [styles14.root, isOpen && styles14.rootOpen, disabled && styles14.disabled, style],
         accessibilityState: { disabled, expanded: isOpen },
         children: [
-          showLabel && label ? /* @__PURE__ */ jsx(Text, { style: [styles13.label, { color: labelColor }], children: label }) : null,
-          /* @__PURE__ */ jsxs(View, { style: [styles13.triggerWrap, isOpen && styles13.triggerWrapOpen], children: [
+          showLabel && label ? /* @__PURE__ */ jsx(Text, { style: [styles14.label, { color: labelColor }], children: label }) : null,
+          /* @__PURE__ */ jsxs(View, { style: [styles14.triggerWrap, isOpen && styles14.triggerWrapOpen], children: [
             /* @__PURE__ */ jsxs(
               Pressable,
               {
@@ -3908,29 +4023,29 @@ var Select = forwardRef(
                 accessibilityLabel: resolvedAccessibilityLabel,
                 accessibilityState: { disabled, expanded: isOpen },
                 style: [
-                  styles13.trigger,
+                  styles14.trigger,
                   {
                     borderColor: triggerBorderColor,
                     backgroundColor: colors.grey700
                   }
                 ],
                 children: [
-                  hasLeftIcon ? /* @__PURE__ */ jsx(View, { style: styles13.iconSlot, children: leftIconNode }) : null,
-                  /* @__PURE__ */ jsx(View, { style: styles13.triggerContent, children: multiple && hasValue ? /* @__PURE__ */ jsx(
+                  hasLeftIcon ? /* @__PURE__ */ jsx(View, { style: styles14.iconSlot, children: leftIconNode }) : null,
+                  /* @__PURE__ */ jsx(View, { style: styles14.triggerContent, children: multiple && hasValue ? /* @__PURE__ */ jsx(
                     MultiValueChips,
                     {
                       options: selectedOptions,
                       disabled,
                       onRemove: handleRemoveChip
                     }
-                  ) : /* @__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 }) })
+                  ) : /* @__PURE__ */ jsx(Text, { style: [styles14.triggerText, { color: triggerTextColor }], numberOfLines: 1, children: multiple ? placeholder : singleLabel }) }),
+                  /* @__PURE__ */ jsx(View, { style: [styles14.iconSlot, isOpen && styles14.chevronOpen], children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: ICON_SIZE8, color: isOpen ? colors.primary : 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 }) }),
+            isOpen ? /* @__PURE__ */ jsxs(View, { style: styles14.menu, children: [
+              showSearch ? /* @__PURE__ */ jsxs(View, { style: styles14.searchField, children: [
+                /* @__PURE__ */ jsx(View, { style: styles14.iconSlot, children: /* @__PURE__ */ jsx(SearchIcon, { size: ICON_SIZE8, color: colors.grey100 }) }),
                 /* @__PURE__ */ jsx(
                   TextInput,
                   {
@@ -3941,9 +4056,9 @@ var Select = forwardRef(
                     placeholder: searchPlaceholder,
                     placeholderTextColor: colors.grey100,
                     style: [
-                      styles13.searchInput,
-                      Platform.OS === "web" ? styles13.searchInputWeb : null,
-                      Platform.OS === "android" ? styles13.searchInputAndroid : null
+                      styles14.searchInput,
+                      Platform.OS === "web" ? styles14.searchInputWeb : null,
+                      Platform.OS === "android" ? styles14.searchInputAndroid : null
                     ],
                     accessibilityLabel: searchPlaceholder
                   }
@@ -3952,12 +4067,12 @@ var Select = forwardRef(
               /* @__PURE__ */ jsxs(
                 ScrollView,
                 {
-                  style: styles13.optionList,
-                  contentContainerStyle: styles13.optionListContent,
+                  style: styles14.optionList,
+                  contentContainerStyle: styles14.optionListContent,
                   keyboardShouldPersistTaps: "handled",
                   showsVerticalScrollIndicator: false,
                   children: [
-                    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 ? /* @__PURE__ */ jsx(View, { style: styles14.statusRow, children: /* @__PURE__ */ jsx(Text, { style: styles14.statusText, children: "Loading..." }) }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsx(View, { style: styles14.statusRow, children: /* @__PURE__ */ jsx(Text, { style: styles14.statusText, children: emptyText }) }) : null,
                     !loading && filteredOptions.map((option) => {
                       const isSelected = selectedValues.includes(option.value);
                       const isHovered = hoveredValue === option.value;
@@ -3974,14 +4089,14 @@ var Select = forwardRef(
                           accessibilityRole: multiple ? "checkbox" : "button",
                           accessibilityState: { selected: isSelected, checked: isSelected, disabled },
                           style: [
-                            styles13.item,
+                            styles14.item,
                             {
                               backgroundColor: itemBackground(visualState)
                             }
                           ],
                           children: [
-                            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 })
+                            multiple ? /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: styles14.itemCheckbox, children: /* @__PURE__ */ jsx(Checkbox, { value: isSelected, variant: "light" }) }) : null,
+                            /* @__PURE__ */ jsx(Text, { style: styles14.itemLabel, numberOfLines: 1, children: option.label })
                           ]
                         },
                         option.value
@@ -3992,13 +4107,13 @@ var Select = forwardRef(
               )
             ] }) : null
           ] }),
-          showHint && hint ? /* @__PURE__ */ jsx(Text, { style: [styles13.hint, { color: hintColor }], children: hint }) : null
+          showHint && hint ? /* @__PURE__ */ jsx(Text, { style: [styles14.hint, { color: hintColor }], children: hint }) : null
         ]
       }
     );
   }
 );
-var styles13 = StyleSheet.create({
+var styles14 = StyleSheet.create({
   root: {
     width: DEFAULT_WIDTH3,
     gap: 8,
@@ -4260,13 +4375,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: [styles14.root, disabled && styles14.disabled, style], children: [
-    showLabel && label ? /* @__PURE__ */ jsx(Text, { style: [styles14.label, { color: chrome.labelColor }], children: label }) : null,
+  return /* @__PURE__ */ jsxs(View, { ref: rootRef, style: [styles15.root, disabled && styles15.disabled, style], children: [
+    showLabel && label ? /* @__PURE__ */ jsx(Text, { style: [styles15.label, { color: chrome.labelColor }], children: label }) : null,
     /* @__PURE__ */ jsx(
       View,
       {
         style: [
-          styles14.field,
+          styles15.field,
           {
             borderColor: chrome.borderColor,
             backgroundColor: chrome.backgroundColor
@@ -4298,11 +4413,11 @@ var Textarea = forwardRef(function Textarea2({
               onBlur?.(event);
             },
             style: [
-              styles14.input,
+              styles15.input,
               textareaTypography.field,
               { color: chrome.textColor },
-              Platform.OS === "web" ? styles14.inputWeb : null,
-              Platform.OS === "android" ? styles14.inputAndroid : null,
+              Platform.OS === "web" ? styles15.inputWeb : null,
+              Platform.OS === "android" ? styles15.inputAndroid : null,
               inputStyle
             ],
             accessibilityLabel: resolvedAccessibilityLabel,
@@ -4311,10 +4426,10 @@ var Textarea = forwardRef(function Textarea2({
         )
       }
     ),
-    showHint && hint ? /* @__PURE__ */ jsx(Text, { style: [styles14.hint, { color: chrome.hintColor }], children: hint }) : null
+    showHint && hint ? /* @__PURE__ */ jsx(Text, { style: [styles15.hint, { color: chrome.hintColor }], children: hint }) : null
   ] });
 });
-var styles14 = StyleSheet.create({
+var styles15 = StyleSheet.create({
   root: {
     width: DEFAULT_WIDTH4,
     gap: 8,
@@ -4414,13 +4529,13 @@ var Toggle = forwardRef(function Toggle2({
       accessibilityRole: "switch",
       accessibilityLabel: resolvedAccessibilityLabel,
       accessibilityState: { checked: isActive, disabled },
-      style: [styles15.pressable, disabled && styles15.disabled, style],
+      style: [styles16.pressable, disabled && styles16.disabled, style],
       children: [
         /* @__PURE__ */ jsx(
           Animated.View,
           {
             style: [
-              styles15.track,
+              styles16.track,
               {
                 backgroundColor: trackBackgroundColor
               }
@@ -4429,7 +4544,7 @@ var Toggle = forwardRef(function Toggle2({
               Animated.View,
               {
                 style: [
-                  styles15.thumb,
+                  styles16.thumb,
                   {
                     transform: [{ translateX: thumbTranslateX }]
                   }
@@ -4438,12 +4553,12 @@ var Toggle = forwardRef(function Toggle2({
             )
           }
         ),
-        labelContent != null && labelContent !== false ? typeof labelContent === "string" || typeof labelContent === "number" ? /* @__PURE__ */ jsx(Text, { style: [styles15.label, labelStyle], children: labelContent }) : labelContent : null
+        labelContent != null && labelContent !== false ? typeof labelContent === "string" || typeof labelContent === "number" ? /* @__PURE__ */ jsx(Text, { style: [styles16.label, labelStyle], children: labelContent }) : labelContent : null
       ]
     }
   );
 });
-var styles15 = StyleSheet.create({
+var styles16 = StyleSheet.create({
   pressable: {
     flexDirection: "row",
     alignItems: "center",
@@ -4518,21 +4633,21 @@ var RatingInput = forwardRef(
       {
         ...rest,
         ref: setContainerRef,
-        style: [styles16.root, disabled && styles16.disabled, style],
+        style: [styles17.root, disabled && styles17.disabled, style],
         children: [
-          showValue ? /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [styles16.value, valueStyle], children: selectedValue.toFixed(precision) }) : null,
+          showValue ? /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [styles17.value, valueStyle], children: selectedValue.toFixed(precision) }) : null,
           /* @__PURE__ */ jsx(
             View,
             {
               accessibilityRole: readOnly ? "image" : "radiogroup",
               accessibilityLabel: resolvedAccessibilityLabel,
               accessibilityState: { disabled },
-              style: [styles16.stars, { gap: resolvedStarGap }],
+              style: [styles17.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 = [styles16.starItem, { width: size, height: size }];
+                const itemStyle = [styles17.starItem, { width: size, height: size }];
                 if (readOnly) {
                   return /* @__PURE__ */ jsx(View, { style: itemStyle, children: icon }, starValue);
                 }
@@ -4558,7 +4673,7 @@ var RatingInput = forwardRef(
     );
   }
 );
-var styles16 = StyleSheet.create({
+var styles17 = StyleSheet.create({
   root: {
     flexDirection: "row",
     alignItems: "center",
@@ -4622,19 +4737,19 @@ var CommentCard = forwardRef(
       setExpanded(next);
       onExpandedChange?.(next);
     };
-    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(
+    return /* @__PURE__ */ jsxs(View, { ...rest, ref: setContainerRef, style: [styles18.root, style], children: [
+      /* @__PURE__ */ jsxs(View, { style: styles18.header, children: [
+        /* @__PURE__ */ jsx(View, { style: styles18.avatar, children: hasImage ? /* @__PURE__ */ jsx(
           Image,
           {
             source: { uri: imageUrl ?? void 0 },
-            style: styles17.avatarImage,
+            style: styles18.avatarImage,
             onError: () => setImageFailed(true)
           }
         ) : /* @__PURE__ */ jsx(UserIcon, { size: 20, color: colors.primary }) }),
-        /* @__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__ */ jsxs(View, { style: styles18.identity, children: [
+          /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles18.name, children: userName }),
+          /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles18.date, children: date })
         ] }),
         /* @__PURE__ */ jsx(RatingInput, { value: rating, readOnly: true, showValue: false, size: 16 })
       ] }),
@@ -4642,7 +4757,7 @@ var CommentCard = forwardRef(
         Text,
         {
           numberOfLines: expanded ? void 0 : maxCommentLines,
-          style: [styles17.comment, commentStyle],
+          style: [styles18.comment, commentStyle],
           children: commentText
         }
       ),
@@ -4655,14 +4770,14 @@ var CommentCard = forwardRef(
           hitSlop: 6,
           onHoverIn: () => setActionHovered(true),
           onHoverOut: () => setActionHovered(false),
-          style: styles17.action,
+          style: styles18.action,
           children: /* @__PURE__ */ jsx(
             Text,
             {
               style: [
-                styles17.actionText,
-                expanded && styles17.closeActionText,
-                actionHovered && (expanded ? styles17.closeActionTextHovered : styles17.openActionTextHovered)
+                styles18.actionText,
+                expanded && styles18.closeActionText,
+                actionHovered && (expanded ? styles18.closeActionTextHovered : styles18.openActionTextHovered)
               ],
               children: expanded ? readLessLabel : readMoreLabel
             }
@@ -4672,7 +4787,7 @@ var CommentCard = forwardRef(
     ] });
   }
 );
-var styles17 = StyleSheet.create({
+var styles18 = StyleSheet.create({
   root: {
     width: CARD_WIDTH,
     minHeight: CARD_MIN_HEIGHT,
@@ -5111,7 +5226,7 @@ var Range = forwardRef(function Range2({
       ...rest,
       ref: setRootRef,
       onLayout,
-      style: [styles18.root, disabled && styles18.disabled, style],
+      style: [styles19.root, disabled && styles19.disabled, style],
       children: [
         /* @__PURE__ */ jsxs(
           Pressable,
@@ -5125,16 +5240,16 @@ var Range = forwardRef(function Range2({
               updateNearestFromTrack(event.nativeEvent.offsetX);
             } : void 0,
             onPress: Platform.OS === "web" ? void 0 : handleTrackPress,
-            style: styles18.sliderPlane,
+            style: styles19.sliderPlane,
             tabIndex: -1,
             children: [
-              /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: styles18.track }),
+              /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: styles19.track }),
               /* @__PURE__ */ jsx(
                 View,
                 {
                   pointerEvents: "none",
                   style: [
-                    styles18.activeTrack,
+                    styles19.activeTrack,
                     {
                       left: TRACK_HORIZONTAL_INSET + fromOffset,
                       width: toOffset - fromOffset + THUMB_SIZE2
@@ -5176,9 +5291,9 @@ var Range = forwardRef(function Range2({
                   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,
+                    styles19.thumb,
+                    Platform.OS === "web" && styles19.thumbWeb,
+                    focusedThumb === "from" && Platform.OS === "web" && styles19.thumbFocusedWeb,
                     { left: TRACK_HORIZONTAL_INSET + fromOffset }
                   ],
                   tabIndex: disabled ? -1 : 0
@@ -5218,9 +5333,9 @@ var Range = forwardRef(function Range2({
                   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,
+                    styles19.thumb,
+                    Platform.OS === "web" && styles19.thumbWeb,
+                    focusedThumb === "to" && Platform.OS === "web" && styles19.thumbFocusedWeb,
                     { left: TRACK_HORIZONTAL_INSET + toOffset }
                   ],
                   tabIndex: disabled ? -1 : 0
@@ -5229,7 +5344,7 @@ var Range = forwardRef(function Range2({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs(View, { style: styles18.inputs, children: [
+        /* @__PURE__ */ jsxs(View, { style: styles19.inputs, children: [
           /* @__PURE__ */ jsx(
             RangeInput,
             {
@@ -5280,7 +5395,7 @@ function RangeInput({
   placeholder,
   value
 }) {
-  return /* @__PURE__ */ jsxs(View, { style: [styles18.inputField, focused && styles18.inputFieldFocused], children: [
+  return /* @__PURE__ */ jsxs(View, { style: [styles19.inputField, focused && styles19.inputFieldFocused], children: [
     /* @__PURE__ */ jsx(
       TextInput,
       {
@@ -5296,15 +5411,15 @@ function RangeInput({
         placeholder,
         placeholderTextColor: colors.grey150,
         returnKeyType: "done",
-        style: [styles18.input, Platform.OS === "web" && styles18.inputWeb],
+        style: [styles19.input, Platform.OS === "web" && styles19.inputWeb],
         tabIndex: disabled ? -1 : void 0,
         value
       }
     ),
-    /* @__PURE__ */ jsx(View, { style: styles18.currencySlot, children: /* @__PURE__ */ jsx(Text, { style: styles18.currency, children: currency }) })
+    /* @__PURE__ */ jsx(View, { style: styles19.currencySlot, children: /* @__PURE__ */ jsx(Text, { style: styles19.currency, children: currency }) })
   ] });
 }
-var styles18 = StyleSheet.create({
+var styles19 = StyleSheet.create({
   root: {
     width: DEFAULT_WIDTH5,
     gap: 15,
@@ -5408,6 +5523,6 @@ var styles18 = StyleSheet.create({
   }
 });
 
-export { AmenityIcon, AppleIcon, 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, CloseIcon, CommentCard, CopyIcon, Counter, DatePicker, FacebookIcon, FavoritesButton, FiltersIcon, GlobeIcon, GooglePlayIcon, GuestsIcon, HeartIcon, HelpCircleIcon, HomeIcon, Icon, Input, InstagramIcon, KeyIcon, LanguageSwitcher, LayoutGridIcon, LinkedInIcon, ListViewIcon, LocationPinIcon, LogOutIcon, MailIcon, MapCollapseIcon, MapExpandIcon, 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 };
+export { Amenity, AmenityIcon, AppleIcon, 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, CloseIcon, CommentCard, CopyIcon, Counter, DatePicker, FacebookIcon, FavoritesButton, FiltersIcon, GlobeIcon, GooglePlayIcon, GuestsIcon, HeartIcon, HelpCircleIcon, HomeIcon, Icon, Input, InstagramIcon, KeyIcon, LanguageSwitcher, LayoutGridIcon, LinkedInIcon, ListViewIcon, LocationPinIcon, LogOutIcon, MailIcon, MapCollapseIcon, MapExpandIcon, 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