@ecohouse/ui 0.1.28 → 0.1.30

package/dist/index.js

@@ -1,5 +1,5 @@
-import { forwardRef, useRef, useMemo, useState, useCallback, useEffect, useLayoutEffect, isValidElement, cloneElement } from 'react';
-import { View, Text, Platform, Pressable, StyleSheet, Image, Animated, Easing, TouchableOpacity, TextInput, ScrollView, PanResponder } from 'react-native';
+import { forwardRef, useRef, useMemo, useState, useCallback, useEffect, useImperativeHandle, useLayoutEffect, isValidElement, cloneElement } from 'react';
+import { View, Text, Platform, Pressable, StyleSheet, Image, Animated, Easing, TouchableOpacity, TextInput, useWindowDimensions, ScrollView, PanResponder } from 'react-native';
 import Svg16, { Path } from 'react-native-svg';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
@@ -872,7 +872,7 @@ function LocationPinIcon({ size = 20, color = colors.grey200, strokeWidth = 2 })
 }
 
 // src/icons/LogOut/logOutPath.ts
-var LOG_OUT_PATH = "M10.6667 4.66667L14 8L10.6667 11.3333M14 8H6M8 11.3333C8 11.5304 8 11.6289 7.99268 11.7143C7.91655 12.6013 7.26324 13.3312 6.39002 13.5049C6.30602 13.5216 6.20801 13.5324 6.01223 13.5542L5.3313 13.6299C4.30832 13.7435 3.7968 13.8004 3.39044 13.6703C2.84862 13.4969 2.40628 13.101 2.17412 12.5817C2 12.1921 2 11.6775 2 10.6482V5.3518C2 4.32251 2 3.80787 2.17412 3.41835C2.40628 2.89899 2.84862 2.50307 3.39044 2.32969C3.79681 2.19965 4.3083 2.25648 5.33129 2.37015L6.01223 2.44581C6.20808 2.46757 6.306 2.47845 6.39002 2.49515C7.26324 2.66877 7.91655 3.39869 7.99268 4.28574C8 4.37109 8 4.46962 8 4.66667";
+var LOG_OUT_PATH = "M10.6667 4.66667L14 8L10.6667 11.3333M14 8H6M6 2H5.2C4.0799 2 3.51984 2 3.09202 2.21799C2.7157 2.40973 2.40973 2.71569 2.21799 3.09202C2 3.51984 2 4.07989 2 5.2V10.8C2 11.9201 2 12.4802 2.21799 12.908C2.40973 13.2843 2.71569 13.5903 3.09202 13.782C3.51984 14 4.0799 14 5.2 14H6";
 function LogOutIcon({ size = 20, color = colors.red, strokeWidth = 1.5 }) {
   return /* @__PURE__ */ jsx(Svg16, { width: size, height: size, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx(
     Path,
@@ -2070,6 +2070,136 @@ var styles4 = StyleSheet.create({
     })
   }
 });
+var IMAGE_SIZE2 = 32;
+var CARD_WIDTH = 268;
+var CARD_HEIGHT = 56;
+var LOG_OUT_SIZE = 16;
+var AvatarSimple = forwardRef(
+  function AvatarSimple2({
+    name,
+    email,
+    imageUrl,
+    onLogOut,
+    logOutAccessibilityLabel = "Log out",
+    compact = false,
+    style,
+    className,
+    ...rest
+  }, forwardedRef) {
+    const containerRef = useRef(null);
+    const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
+    const [imageFailed, setImageFailed] = useState(false);
+    const showImage = Boolean(imageUrl) && !imageFailed;
+    useApplyWebClassName(containerRef, className);
+    return /* @__PURE__ */ jsxs(
+      View,
+      {
+        ...rest,
+        ref: setContainerRef,
+        style: [styles5.root, compact ? styles5.rootCompact : styles5.rootCard, style],
+        accessibilityRole: "summary",
+        accessibilityLabel: `${name}, ${email}`,
+        children: [
+          /* @__PURE__ */ jsx(View, { style: styles5.avatar, children: showImage ? /* @__PURE__ */ jsx(
+            Image,
+            {
+              source: { uri: imageUrl ?? void 0 },
+              style: styles5.avatarImage,
+              onError: () => setImageFailed(true),
+              accessibilityIgnoresInvertColors: true
+            }
+          ) : null }),
+          !compact ? /* @__PURE__ */ jsxs(View, { style: styles5.details, children: [
+            /* @__PURE__ */ jsxs(View, { style: styles5.textBlock, children: [
+              /* @__PURE__ */ jsx(Text, { style: styles5.name, numberOfLines: 1, children: name }),
+              /* @__PURE__ */ jsx(Text, { style: styles5.email, numberOfLines: 1, children: email })
+            ] }),
+            /* @__PURE__ */ jsx(
+              Pressable,
+              {
+                onPress: onLogOut,
+                accessibilityRole: "button",
+                accessibilityLabel: logOutAccessibilityLabel,
+                hitSlop: 8,
+                style: styles5.logOutButton,
+                children: /* @__PURE__ */ jsx(LogOutIcon, { color: colors.primary, size: LOG_OUT_SIZE, strokeWidth: 2 })
+              }
+            )
+          ] }) : null
+        ]
+      }
+    );
+  }
+);
+var styles5 = StyleSheet.create({
+  root: {
+    flexDirection: "row",
+    alignItems: "center",
+    overflow: "hidden"
+  },
+  rootCard: {
+    width: CARD_WIDTH,
+    height: CARD_HEIGHT,
+    gap: 12,
+    borderRadius: 12,
+    paddingVertical: 4,
+    paddingHorizontal: 12,
+    backgroundColor: colors.grey700
+  },
+  rootCompact: {
+    width: IMAGE_SIZE2,
+    height: IMAGE_SIZE2,
+    borderRadius: IMAGE_SIZE2,
+    backgroundColor: "transparent"
+  },
+  avatar: {
+    width: IMAGE_SIZE2,
+    height: IMAGE_SIZE2,
+    borderRadius: 56,
+    backgroundColor: colors.grey500,
+    overflow: "hidden",
+    flexShrink: 0
+  },
+  avatarImage: {
+    width: IMAGE_SIZE2,
+    height: IMAGE_SIZE2
+  },
+  details: {
+    flex: 1,
+    minWidth: 0,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12
+  },
+  textBlock: {
+    flex: 1,
+    minWidth: 0
+  },
+  name: {
+    fontFamily: fonts.sans,
+    fontSize: 12,
+    fontWeight: "600",
+    lineHeight: 16,
+    letterSpacing: 0,
+    color: colors.white
+  },
+  email: {
+    marginTop: 2,
+    fontFamily: fonts.sans,
+    fontSize: 12,
+    fontWeight: "400",
+    lineHeight: 16,
+    letterSpacing: 0,
+    color: colors.grey0
+  },
+  logOutButton: {
+    width: LOG_OUT_SIZE,
+    height: LOG_OUT_SIZE,
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0
+  }
+});
 var ICON_SIZE3 = 20;
 var webBlurStyle2 = Platform.OS === "web" ? {
   backdropFilter: "blur(10.3px)",
@@ -2101,22 +2231,22 @@ var Badge = forwardRef(function Badge2({ label, variant = "default", icon: Icon2
       ...rest,
       ref: setContainerRef,
       style: [
-        styles5.base,
+        styles6.base,
         { backgroundColor: preset.backgroundColor },
-        preset.border ? styles5.transparentBorder : null,
+        preset.border ? styles6.transparentBorder : null,
         preset.blur ? webBlurStyle2 : null,
         style
       ],
       accessibilityRole: "text",
       accessibilityLabel: accessibilityLabel ?? label,
       children: [
-        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 })
+        Icon2 ? /* @__PURE__ */ jsx(View, { style: styles6.iconSlot, children: /* @__PURE__ */ jsx(Icon2, { size: ICON_SIZE3, color: preset.iconColor }) }) : null,
+        /* @__PURE__ */ jsx(Text, { style: [styles6.label, Platform.OS === "android" ? styles6.labelAndroid : null], children: label })
       ]
     }
   );
 });
-var styles5 = StyleSheet.create({
+var styles6 = StyleSheet.create({
   base: {
     flexDirection: "row",
     alignItems: "center",
@@ -2189,7 +2319,7 @@ var Counter = forwardRef(function Counter2({
     if (!isControlled) setUncontrolledValue(next);
     onValueChange?.(next);
   };
-  return /* @__PURE__ */ jsxs(View, { ...rest, ref: setContainerRef, style: [styles6.base, style], children: [
+  return /* @__PURE__ */ jsxs(View, { ...rest, ref: setContainerRef, style: [styles7.base, style], children: [
     /* @__PURE__ */ jsx(
       Pressable,
       {
@@ -2199,11 +2329,11 @@ var Counter = forwardRef(function Counter2({
         accessibilityRole: "button",
         accessibilityLabel: "Decrease value",
         accessibilityState: { disabled: decrementDisabled },
-        style: [styles6.button, webBlurStyle3, decrementDisabled && styles6.buttonDisabled],
+        style: [styles7.button, webBlurStyle3, decrementDisabled && styles7.buttonDisabled],
         children: /* @__PURE__ */ jsx(MinusIcon, {})
       }
     ),
-    /* @__PURE__ */ jsx(Text, { style: styles6.value, children: resolvedValue }),
+    /* @__PURE__ */ jsx(Text, { style: styles7.value, children: resolvedValue }),
     /* @__PURE__ */ jsx(
       Pressable,
       {
@@ -2213,13 +2343,13 @@ var Counter = forwardRef(function Counter2({
         accessibilityRole: "button",
         accessibilityLabel: "Increase value",
         accessibilityState: { disabled: incrementDisabled },
-        style: [styles6.button, webBlurStyle3, incrementDisabled && styles6.buttonDisabled],
+        style: [styles7.button, webBlurStyle3, incrementDisabled && styles7.buttonDisabled],
         children: /* @__PURE__ */ jsx(PlusIcon, {})
       }
     )
   ] });
 });
-var styles6 = StyleSheet.create({
+var styles7 = StyleSheet.create({
   base: {
     flexDirection: "row",
     alignItems: "center",
@@ -2249,6 +2379,17 @@ var OPTION_HORIZONTAL_PADDING = 16;
 var OPTION_CONTENT_GAP = 12;
 var OPTION_MIN_WIDTH = 97;
 var OPTION_MEASUREMENT_TOLERANCE = 0.5;
+var TRACK_PADDING = 4;
+var OPTION_GAP = 4;
+function buildIndicatorOutputRange(optionWidths) {
+  const outputRange = [];
+  let offset = 0;
+  for (let index = 0; index < optionWidths.length; index += 1) {
+    outputRange.push(offset);
+    offset += optionWidths[index] + OPTION_GAP;
+  }
+  return outputRange;
+}
 var SegmentedToggle = forwardRef(
   function SegmentedToggle2({
     options,
@@ -2263,6 +2404,7 @@ var SegmentedToggle = forwardRef(
     onLayout,
     ...rest
   }, forwardedRef) {
+    const optionCount = options.length;
     const containerRef = useRef(null);
     const isControlled = value !== void 0;
     const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
@@ -2274,20 +2416,31 @@ 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 [contentWidths, setContentWidths] = useState(
+      () => Array.from({ length: optionCount }, () => 0)
+    );
     const [containerWidth, setContainerWidth] = useState(0);
-    const availableOptionWidth = Math.max(0, (containerWidth - 12) / 2);
+    const trackChrome = TRACK_PADDING * 2 + OPTION_GAP * (optionCount - 1);
+    const availableOptionWidth = Math.max(0, (containerWidth - trackChrome) / optionCount);
     const resolveContentOptionWidth = (contentWidth) => contentWidth > 0 ? Math.max(
       OPTION_MIN_WIDTH,
       contentWidth + OPTION_HORIZONTAL_PADDING * 2 + OPTION_MEASUREMENT_TOLERANCE
     ) : 0;
-    const optionWidths = fullWidth ? [availableOptionWidth, availableOptionWidth] : [resolveContentOptionWidth(contentWidths[0]), resolveContentOptionWidth(contentWidths[1])];
-    const selectedOptionWidth = optionWidths[selectedIndex];
+    const optionWidths = fullWidth ? Array.from({ length: optionCount }, () => availableOptionWidth) : contentWidths.map((width) => resolveContentOptionWidth(width));
+    const selectedOptionWidth = optionWidths[selectedIndex] ?? 0;
+    const indicatorInputRange = options.map((_, index) => index);
+    const indicatorOutputRange = buildIndicatorOutputRange(optionWidths);
     const indicatorTranslateX = progress.interpolate({
-      inputRange: [0, 1],
-      outputRange: [0, optionWidths[0] + 4]
+      inputRange: indicatorInputRange,
+      outputRange: indicatorOutputRange
     });
     useApplyWebClassName(containerRef, resolvedClassName);
+    useEffect(() => {
+      setContentWidths((current) => {
+        if (current.length === optionCount) return current;
+        return Array.from({ length: optionCount }, (_, index) => current[index] ?? 0);
+      });
+    }, [optionCount]);
     useEffect(() => {
       const animation = Animated.timing(progress, {
         toValue: selectedIndex,
@@ -2316,9 +2469,9 @@ var SegmentedToggle = forwardRef(
           onLayout?.(event);
         },
         style: [
-          styles7.base,
-          fullWidth ? styles7.fullWidth : styles7.contentWidth,
-          disabled && styles7.disabled,
+          styles8.base,
+          fullWidth ? styles8.fullWidth : styles8.contentWidth,
+          disabled && styles8.disabled,
           style
         ],
         accessibilityRole: "radiogroup",
@@ -2334,15 +2487,15 @@ var SegmentedToggle = forwardRef(
                 const nextWidth = event.nativeEvent.layout.width;
                 setContentWidths((currentWidths) => {
                   if (currentWidths[index] === nextWidth) return currentWidths;
-                  const nextWidths = [currentWidths[0], currentWidths[1]];
+                  const nextWidths = [...currentWidths];
                   nextWidths[index] = nextWidth;
                   return nextWidths;
                 });
               },
-              style: styles7.optionMeasurement,
+              style: styles8.optionMeasurement,
               children: [
                 Icon2 ? /* @__PURE__ */ jsx(Icon2, { size: ICON_SIZE4 }) : null,
-                /* @__PURE__ */ jsx(Text, { style: [styles7.label, styles7.contentWidthLabel], children: label })
+                /* @__PURE__ */ jsx(Text, { style: [styles8.label, styles8.contentWidthLabel], children: label })
               ]
             },
             `${optionValue}-measurement`
@@ -2352,7 +2505,7 @@ var SegmentedToggle = forwardRef(
             {
               pointerEvents: "none",
               style: [
-                styles7.activeIndicator,
+                styles8.activeIndicator,
                 { width: selectedOptionWidth, transform: [{ translateX: indicatorTranslateX }] }
               ]
             }
@@ -2361,6 +2514,7 @@ var SegmentedToggle = forwardRef(
             const selected = optionValue === selectedValue;
             const iconColor = selected ? colors.primary : colors.whiteAlpha20;
             const labelColor = selected ? colors.whiteAlpha86 : colors.whiteAlpha40;
+            const optionWidth = optionWidths[index] ?? 0;
             return /* @__PURE__ */ jsx(
               Pressable,
               {
@@ -2371,21 +2525,18 @@ var SegmentedToggle = forwardRef(
                 accessibilityLabel: label,
                 accessibilityState: { selected, disabled },
                 style: [
-                  styles7.option,
-                  fullWidth ? styles7.optionFullWidth : [
-                    styles7.optionContentWidth,
-                    optionWidths[index] > 0 && { width: optionWidths[index] }
-                  ]
+                  styles8.option,
+                  fullWidth ? styles8.optionFullWidth : [styles8.optionContentWidth, optionWidth > 0 && { width: optionWidth }]
                 ],
-                children: /* @__PURE__ */ jsxs(View, { style: styles7.optionContent, children: [
+                children: /* @__PURE__ */ jsxs(View, { style: styles8.optionContent, children: [
                   Icon2 ? /* @__PURE__ */ jsx(Icon2, { size: ICON_SIZE4, color: iconColor }) : null,
                   /* @__PURE__ */ jsx(
                     Text,
                     {
                       numberOfLines: fullWidth ? 1 : void 0,
                       style: [
-                        styles7.label,
-                        !fullWidth && styles7.contentWidthLabel,
+                        styles8.label,
+                        !fullWidth && styles8.contentWidthLabel,
                         { color: labelColor }
                       ],
                       children: label
@@ -2401,12 +2552,12 @@ var SegmentedToggle = forwardRef(
     );
   }
 );
-var styles7 = StyleSheet.create({
+var styles8 = StyleSheet.create({
   base: {
     height: 44,
     flexDirection: "row",
-    padding: 4,
-    gap: 4,
+    padding: TRACK_PADDING,
+    gap: OPTION_GAP,
     borderRadius: 60,
     backgroundColor: colors.grey700,
     overflow: "hidden"
@@ -2451,8 +2602,8 @@ var styles7 = StyleSheet.create({
   },
   activeIndicator: {
     position: "absolute",
-    top: 4,
-    left: 4,
+    top: TRACK_PADDING,
+    left: TRACK_PADDING,
     height: 36,
     backgroundColor: colors.grey600,
     borderRadius: 60
@@ -2465,6 +2616,242 @@ var styles7 = StyleSheet.create({
     flexShrink: 0
   }
 });
+var SIDEBAR_WIDTH = 300;
+var SIDEBAR_COLLAPSED_WIDTH = 72;
+var HEADER_HEIGHT = 64;
+var LOGO_WIDTH = 31;
+var LOGO_HEIGHT = 44;
+var TOGGLE_SIZE = 20;
+var MENU_ICON_SIZE = 16;
+var PROFILE_SECTION_HEIGHT = 80;
+var SIDEBAR_TRANSITION_MS = 300;
+var Sidebar = forwardRef(function Sidebar2({
+  items,
+  user,
+  onLogOut,
+  logoAccessibilityLabel = "Cortel Booking",
+  navigationAccessibilityLabel = "Account navigation",
+  collapseAccessibilityLabel = "Collapse sidebar",
+  expandAccessibilityLabel = "Expand sidebar",
+  logOutAccessibilityLabel = "Log out",
+  collapsed: collapsedProp,
+  defaultCollapsed = false,
+  onCollapsedChange,
+  style,
+  className,
+  ...rest
+}, forwardedRef) {
+  const containerRef = useRef(null);
+  const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
+  const [uncontrolledCollapsed, setUncontrolledCollapsed] = useState(defaultCollapsed);
+  const collapsed = collapsedProp ?? uncontrolledCollapsed;
+  const widthAnim = useRef(
+    new Animated.Value(collapsed ? SIDEBAR_COLLAPSED_WIDTH : SIDEBAR_WIDTH)
+  ).current;
+  const labelOpacity = useRef(new Animated.Value(collapsed ? 0 : 1)).current;
+  useApplyWebClassName(containerRef, className);
+  useEffect(() => {
+    const nextWidth = collapsed ? SIDEBAR_COLLAPSED_WIDTH : SIDEBAR_WIDTH;
+    const nextOpacity = collapsed ? 0 : 1;
+    const timing = {
+      duration: SIDEBAR_TRANSITION_MS,
+      easing: Easing.inOut(Easing.ease),
+      useNativeDriver: false
+    };
+    const widthAnimation = Animated.timing(widthAnim, { ...timing, toValue: nextWidth });
+    const opacityAnimation = Animated.timing(labelOpacity, { ...timing, toValue: nextOpacity });
+    Animated.parallel([widthAnimation, opacityAnimation]).start();
+    return () => {
+      widthAnimation.stop();
+      opacityAnimation.stop();
+    };
+  }, [collapsed, labelOpacity, widthAnim]);
+  const setCollapsed = (next) => {
+    onCollapsedChange?.(next);
+    if (collapsedProp === void 0) {
+      setUncontrolledCollapsed(next);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    Animated.View,
+    {
+      ...rest,
+      ref: setContainerRef,
+      style: [styles9.root, { width: widthAnim }, style],
+      accessibilityRole: "menu",
+      children: [
+        /* @__PURE__ */ jsxs(View, { style: [styles9.header, collapsed ? styles9.headerCollapsed : styles9.headerExpanded], children: [
+          /* @__PURE__ */ jsx(
+            Animated.View,
+            {
+              pointerEvents: collapsed ? "none" : "auto",
+              style: [
+                styles9.logoSlot,
+                {
+                  opacity: labelOpacity,
+                  maxWidth: collapsed ? 0 : LOGO_WIDTH
+                }
+              ],
+              accessibilityElementsHidden: collapsed,
+              importantForAccessibility: collapsed ? "no-hide-descendants" : "auto",
+              children: /* @__PURE__ */ jsx(
+                BrandLogo,
+                {
+                  accessibilityLabel: logoAccessibilityLabel,
+                  height: LOGO_HEIGHT,
+                  variant: "brand",
+                  width: LOGO_WIDTH
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              accessibilityRole: "button",
+              accessibilityLabel: collapsed ? expandAccessibilityLabel : collapseAccessibilityLabel,
+              accessibilityState: { expanded: !collapsed },
+              hitSlop: 8,
+              onPress: () => setCollapsed(!collapsed),
+              style: styles9.toggleButton,
+              children: /* @__PURE__ */ jsx(SidebarIcon, { color: colors.grey100, size: TOGGLE_SIZE, strokeWidth: 2 })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            accessibilityLabel: navigationAccessibilityLabel,
+            accessibilityRole: "menu",
+            style: styles9.nav,
+            children: items.map((item) => {
+              const isActive = Boolean(item.active);
+              const iconColor = isActive ? colors.primary : colors.grey300;
+              const Icon2 = item.icon;
+              const iconNode = /* @__PURE__ */ jsx(Icon2, { color: iconColor, size: MENU_ICON_SIZE, strokeWidth: 1.5 });
+              return /* @__PURE__ */ jsx(
+                MenuItem,
+                {
+                  icon: iconNode,
+                  label: item.label,
+                  accessibilityLabel: item.label,
+                  backgroundColor: isActive ? colors.grey700 : "transparent",
+                  hoverColor: colors.grey700,
+                  onPress: item.onPress,
+                  labelStyle: [
+                    styles9.menuLabel,
+                    { color: isActive ? colors.white : colors.grey200 },
+                    collapsed ? styles9.menuLabelCollapsed : styles9.menuLabelExpanded
+                  ],
+                  style: [styles9.menuItem, collapsed ? styles9.menuItemCollapsed : null]
+                },
+                item.key
+              );
+            })
+          }
+        ),
+        /* @__PURE__ */ jsx(View, { style: [styles9.footer, collapsed ? styles9.footerCollapsed : styles9.footerExpanded], children: /* @__PURE__ */ jsx(
+          AvatarSimple,
+          {
+            name: user.name,
+            email: user.email,
+            imageUrl: user.imageUrl,
+            onLogOut,
+            logOutAccessibilityLabel,
+            compact: collapsed
+          }
+        ) })
+      ]
+    }
+  );
+});
+var styles9 = StyleSheet.create({
+  root: {
+    height: "100%",
+    flexShrink: 0,
+    backgroundColor: colors.dark,
+    borderRightWidth: 1,
+    borderRightColor: colors.grey700,
+    overflow: "hidden"
+  },
+  header: {
+    zIndex: 1,
+    height: HEADER_HEIGHT,
+    width: "100%",
+    flexDirection: "row",
+    alignItems: "center",
+    borderBottomWidth: 1,
+    borderBottomColor: colors.grey700,
+    backgroundColor: colors.dark
+  },
+  headerExpanded: {
+    justifyContent: "space-between",
+    paddingHorizontal: 24
+  },
+  headerCollapsed: {
+    justifyContent: "center",
+    paddingHorizontal: 0
+  },
+  logoSlot: {
+    minWidth: 0,
+    height: LOGO_HEIGHT,
+    flexShrink: 0,
+    overflow: "hidden"
+  },
+  toggleButton: {
+    width: TOGGLE_SIZE,
+    height: TOGGLE_SIZE,
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0
+  },
+  nav: {
+    flex: 1,
+    width: "100%",
+    padding: 16,
+    gap: 10
+  },
+  menuItem: {
+    gap: 8
+  },
+  menuItemCollapsed: {
+    gap: 0
+  },
+  menuLabel: {
+    fontFamily: fonts.sans,
+    fontSize: 12,
+    fontWeight: "600",
+    lineHeight: 16,
+    letterSpacing: 0
+  },
+  menuLabelExpanded: {
+    flexGrow: 1,
+    flexShrink: 1,
+    opacity: 1
+  },
+  menuLabelCollapsed: {
+    flexGrow: 0,
+    flexShrink: 0,
+    width: 0,
+    maxWidth: 0,
+    opacity: 0,
+    overflow: "hidden"
+  },
+  footer: {
+    height: PROFILE_SECTION_HEIGHT,
+    width: "100%",
+    flexShrink: 0,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: 12
+  },
+  footerExpanded: {
+    paddingHorizontal: 16
+  },
+  footerCollapsed: {
+    paddingHorizontal: 0
+  }
+});
 var defaultLanguageOptions = [
   { value: "hy", label: "\u0540\u0561\u0575" },
   { value: "en", label: "Eng" },
@@ -2552,7 +2939,7 @@ var LanguageSwitcher = forwardRef(
       {
         ...rest,
         ref: setWrapperRef,
-        style: [styles8.wrapper, isOpen && styles8.wrapperOpen, disabled && styles8.disabled, style],
+        style: [styles10.wrapper, isOpen && styles10.wrapperOpen, disabled && styles10.disabled, style],
         children: [
           /* @__PURE__ */ jsxs(
             Pressable,
@@ -2567,17 +2954,17 @@ var LanguageSwitcher = forwardRef(
               onHoverIn: () => setTriggerHovered(true),
               onHoverOut: () => setTriggerHovered(false),
               style: ({ pressed }) => [
-                styles8.trigger,
-                (triggerHovered || pressed || isOpen) && styles8.triggerActive
+                styles10.trigger,
+                (triggerHovered || pressed || isOpen) && styles10.triggerActive
               ],
               children: [
                 /* @__PURE__ */ jsx(GlobeIcon, { 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 }) })
+                /* @__PURE__ */ jsx(Text, { style: styles10.triggerLabel, numberOfLines: 1, children: selectedOption?.label ?? "" }),
+                /* @__PURE__ */ jsx(View, { style: [styles10.chevron, isOpen && styles10.chevronOpen], children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: ICON_SIZE5, color: colors.white, strokeWidth: 2 }) })
               ]
             }
           ),
-          isOpen && options.length > 0 ? /* @__PURE__ */ jsx(View, { style: styles8.menu, accessibilityRole: "menu", children: options.map((option) => {
+          isOpen && options.length > 0 ? /* @__PURE__ */ jsx(View, { style: styles10.menu, accessibilityRole: "menu", children: options.map((option) => {
             const selected = option.value === selectedValue;
             return /* @__PURE__ */ jsx(
               Pressable,
@@ -2589,10 +2976,10 @@ var LanguageSwitcher = forwardRef(
                 onHoverIn: () => setHoveredValue(option.value),
                 onHoverOut: () => setHoveredValue(null),
                 style: ({ pressed }) => [
-                  styles8.item,
-                  selected ? styles8.itemSelected : (hoveredValue === option.value || pressed) && styles8.itemHovered
+                  styles10.item,
+                  selected ? styles10.itemSelected : (hoveredValue === option.value || pressed) && styles10.itemHovered
                 ],
-                children: /* @__PURE__ */ jsx(Text, { style: [styles8.itemLabel, selected && styles8.itemLabelSelected], children: option.label })
+                children: /* @__PURE__ */ jsx(Text, { style: [styles10.itemLabel, selected && styles10.itemLabelSelected], children: option.label })
               },
               option.value
             );
@@ -2602,7 +2989,7 @@ var LanguageSwitcher = forwardRef(
     );
   }
 );
-var styles8 = StyleSheet.create({
+var styles10 = StyleSheet.create({
   wrapper: {
     position: "relative",
     width: CONTROL_WIDTH,
@@ -2698,17 +3085,17 @@ var StatCard = forwardRef(function StatCard2({
     {
       ...rest,
       ref: setContainerRef,
-      style: [styles9.base, style],
+      style: [styles11.base, style],
       accessibilityRole: "text",
       accessibilityLabel: accessibilityLabel ?? label,
       children: [
         /* @__PURE__ */ jsx(Icon2, { ...iconProps, size: iconSize, color: iconProps?.color ?? colors.white }),
-        /* @__PURE__ */ jsx(Text, { style: styles9.label, children: label })
+        /* @__PURE__ */ jsx(Text, { style: styles11.label, children: label })
       ]
     }
   );
 });
-var styles9 = StyleSheet.create({
+var styles11 = StyleSheet.create({
   base: {
     width: 204.5,
     minHeight: 114,
@@ -2794,7 +3181,7 @@ var Button = forwardRef(
     useApplyWebClassName(textRef, textClassName);
     const iconNode = customIcon ?? /* @__PURE__ */ jsx(ArrowRightIcon, { size: metrics.iconSize, color: preset.iconColor });
     const containerStyle = [
-      styles10.base,
+      styles12.base,
       {
         minHeight: metrics.minHeight,
         borderRadius: metrics.borderRadius,
@@ -2805,16 +3192,16 @@ var Button = forwardRef(
         paddingRight: hasIcon ? metrics.paddingRightWithIcon : metrics.paddingRight,
         gap: hasIcon ? metrics.gap : 0
       },
-      hasIcon ? styles10.contentWithIcon : styles10.contentWithoutIcon,
-      disabled && styles10.disabled,
+      hasIcon ? styles12.contentWithIcon : styles12.contentWithoutIcon,
+      disabled && styles12.disabled,
       style
     ];
     const labelStyle = [
-      styles10.label,
+      styles12.label,
       metrics.text,
       { color: preset.textColor },
-      Platform.OS === "android" ? styles10.labelAndroid : null,
-      !hasIcon && styles10.labelCentered,
+      Platform.OS === "android" ? styles12.labelAndroid : null,
+      !hasIcon && styles12.labelCentered,
       textStyle
     ];
     return /* @__PURE__ */ jsxs(
@@ -2835,7 +3222,7 @@ var Button = forwardRef(
             View,
             {
               style: [
-                styles10.iconContainer,
+                styles12.iconContainer,
                 {
                   width: metrics.iconContainerSize,
                   height: metrics.iconContainerSize,
@@ -2851,7 +3238,7 @@ var Button = forwardRef(
     );
   }
 );
-var styles10 = StyleSheet.create({
+var styles12 = StyleSheet.create({
   base: {
     flexDirection: "row",
     alignItems: "center",
@@ -2935,13 +3322,13 @@ var Checkbox = forwardRef(function Checkbox2({
       accessibilityRole: "checkbox",
       accessibilityLabel: resolvedAccessibilityLabel,
       accessibilityState: { checked: isActive, disabled },
-      style: [styles11.root, disabled && styles11.disabled, style],
+      style: [styles13.root, disabled && styles13.disabled, style],
       children: [
         /* @__PURE__ */ jsx(
           View,
           {
             style: [
-              styles11.box,
+              styles13.box,
               {
                 backgroundColor: chrome.backgroundColor,
                 borderColor: chrome.borderColor
@@ -2950,12 +3337,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: [styles11.label, labelStyle], children: labelContent }) : labelContent : null
+        labelContent != null && labelContent !== false ? typeof labelContent === "string" || typeof labelContent === "number" ? /* @__PURE__ */ jsx(Text, { style: [styles13.label, labelStyle], children: labelContent }) : labelContent : null
       ]
     }
   );
 });
-var styles11 = StyleSheet.create({
+var styles13 = StyleSheet.create({
   root: {
     flexDirection: "row",
     alignItems: "center",
@@ -3063,13 +3450,13 @@ function RangeTriggerField({
   value,
   time
 }) {
-  return /* @__PURE__ */ jsxs(View, { style: styles12.rangeField, children: [
-    /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles12.rangeLabel, children: label }),
-    /* @__PURE__ */ jsxs(View, { style: styles12.rangeValueRow, children: [
-      /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles12.rangeDate, children: value }),
-      time ? /* @__PURE__ */ jsxs(View, { style: styles12.rangeTimeWrap, children: [
+  return /* @__PURE__ */ jsxs(View, { style: styles14.rangeField, children: [
+    /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles14.rangeLabel, children: label }),
+    /* @__PURE__ */ jsxs(View, { style: styles14.rangeValueRow, children: [
+      /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles14.rangeDate, children: value }),
+      time ? /* @__PURE__ */ jsxs(View, { style: styles14.rangeTimeWrap, children: [
         /* @__PURE__ */ jsx(ClockFilledIcon, { color: colors.lightGrey, size: 16 }),
-        /* @__PURE__ */ jsx(Text, { style: styles12.rangeTime, children: time })
+        /* @__PURE__ */ jsx(Text, { style: styles14.rangeTime, children: time })
       ] }) : null
     ] })
   ] });
@@ -3235,14 +3622,14 @@ var DatePicker = forwardRef(
         ...rest,
         ref: setRootRef,
         style: [
-          styles12.root,
-          usesRangeTrigger && styles12.rangeRoot,
-          isOpen && styles12.rootOpen,
-          disabled && styles12.disabled,
+          styles14.root,
+          usesRangeTrigger && styles14.rangeRoot,
+          isOpen && styles14.rootOpen,
+          disabled && styles14.disabled,
           style
         ],
         accessibilityState: { disabled, expanded: isOpen },
-        children: /* @__PURE__ */ jsxs(View, { style: [styles12.triggerWrap, isOpen && styles12.triggerWrapOpen], children: [
+        children: /* @__PURE__ */ jsxs(View, { style: [styles14.triggerWrap, isOpen && styles14.triggerWrapOpen], children: [
           /* @__PURE__ */ jsx(
             Pressable,
             {
@@ -3253,9 +3640,9 @@ var DatePicker = forwardRef(
               accessibilityLabel: resolvedAccessibilityLabel,
               accessibilityState: { disabled, expanded: isOpen },
               style: [
-                styles12.trigger,
-                usesRangeTrigger && styles12.rangeTrigger,
-                usesRangeTrigger && (usesVerticalRangeTrigger ? styles12.rangeTriggerVertical : styles12.rangeTriggerHorizontal),
+                styles14.trigger,
+                usesRangeTrigger && styles14.rangeTrigger,
+                usesRangeTrigger && (usesVerticalRangeTrigger ? styles14.rangeTriggerVertical : styles14.rangeTriggerHorizontal),
                 {
                   borderColor: triggerBorderColor,
                   backgroundColor: usesRangeTrigger ? "transparent" : colors.grey700
@@ -3266,18 +3653,18 @@ var DatePicker = forwardRef(
                 /* @__PURE__ */ jsx(
                   View,
                   {
-                    style: usesVerticalRangeTrigger ? styles12.rangeDividerVertical : styles12.rangeDividerHorizontal
+                    style: usesVerticalRangeTrigger ? styles14.rangeDividerVertical : styles14.rangeDividerHorizontal
                   }
                 ),
                 /* @__PURE__ */ jsx(RangeTriggerField, { label: endLabel, time: endTime, value: endValue })
               ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__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 }) })
+                /* @__PURE__ */ jsx(Text, { style: [styles14.triggerText, { color: triggerTextColor }], numberOfLines: 1, children: triggerLabel }),
+                /* @__PURE__ */ jsx(View, { style: styles14.iconSlot, children: /* @__PURE__ */ jsx(CalendarOutlineIcon, { size: ICON_SIZE7, color: colors.grey100 }) })
               ] })
             }
           ),
-          isOpen ? /* @__PURE__ */ jsxs(View, { style: [styles12.menu, usesRangeTrigger && styles12.rangeMenu, calendarStyle], children: [
-            /* @__PURE__ */ jsxs(View, { style: styles12.calendarHeader, children: [
+          isOpen ? /* @__PURE__ */ jsxs(View, { style: [styles14.menu, usesRangeTrigger && styles14.rangeMenu, calendarStyle], children: [
+            /* @__PURE__ */ jsxs(View, { style: styles14.calendarHeader, children: [
               /* @__PURE__ */ jsx(
                 Pressable,
                 {
@@ -3285,11 +3672,11 @@ var DatePicker = forwardRef(
                   hitSlop: 8,
                   accessibilityRole: "button",
                   accessibilityLabel: "Previous month",
-                  style: styles12.navButton,
+                  style: styles14.navButton,
                   children: /* @__PURE__ */ jsx(ChevronLeftIcon, { size: NAV_ICON_SIZE, color: colors.white })
                 }
               ),
-              /* @__PURE__ */ jsxs(Text, { style: styles12.monthHeading, children: [
+              /* @__PURE__ */ jsxs(Text, { style: styles14.monthHeading, children: [
                 monthNames[visibleMonth.getMonth()],
                 " ",
                 visibleMonth.getFullYear()
@@ -3301,13 +3688,13 @@ var DatePicker = forwardRef(
                   hitSlop: 8,
                   accessibilityRole: "button",
                   accessibilityLabel: "Next month",
-                  style: styles12.navButton,
-                  children: /* @__PURE__ */ jsx(View, { style: styles12.navIconMirror, children: /* @__PURE__ */ jsx(ChevronLeftIcon, { size: NAV_ICON_SIZE, color: colors.white }) })
+                  style: styles14.navButton,
+                  children: /* @__PURE__ */ jsx(View, { style: styles14.navIconMirror, children: /* @__PURE__ */ jsx(ChevronLeftIcon, { size: NAV_ICON_SIZE, color: colors.white }) })
                 }
               )
             ] }),
             /* @__PURE__ */ jsxs(View, { children: [
-              /* @__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}`)) }),
+              /* @__PURE__ */ jsx(View, { style: styles14.weekdayRow, children: weekdayLabels.map((weekdayLabel, index) => /* @__PURE__ */ jsx(View, { style: styles14.dayCellWrap, children: /* @__PURE__ */ jsx(Text, { style: styles14.weekdayText, children: weekdayLabel }) }, `${weekdayLabel}-${index}`)) }),
               weeks.map((week, weekIndex) => {
                 let rangeHighlightStyle = null;
                 if (isRange && rangeValue.start && rangeValue.end) {
@@ -3344,13 +3731,13 @@ var DatePicker = forwardRef(
                 return /* @__PURE__ */ jsxs(
                   View,
                   {
-                    style: [styles12.weekRow, weekIndex > 0 && styles12.weekRowSpaced],
+                    style: [styles14.weekRow, weekIndex > 0 && styles14.weekRowSpaced],
                     children: [
                       rangeHighlightStyle ? /* @__PURE__ */ jsx(
                         View,
                         {
                           pointerEvents: "none",
-                          style: [styles12.rangeHighlight, rangeHighlightStyle]
+                          style: [styles14.rangeHighlight, rangeHighlightStyle]
                         }
                       ) : null,
                       week.map((day, dayIndex) => {
@@ -3373,7 +3760,7 @@ var DatePicker = forwardRef(
                             onHoverOut: () => setHoveredDayKey((current) => current === dayKey ? null : current),
                             onPressIn: () => setHoveredDayKey(dayKey),
                             onPressOut: () => setHoveredDayKey((current) => current === dayKey ? null : current),
-                            style: styles12.dayCellWrap,
+                            style: styles14.dayCellWrap,
                             accessibilityRole: "button",
                             accessibilityLabel: formatValue(day),
                             accessibilityState: {
@@ -3385,14 +3772,14 @@ var DatePicker = forwardRef(
                                 View,
                                 {
                                   style: [
-                                    styles12.dayCircle,
-                                    isSelectedEndpoint && styles12.dayCircleSelected,
-                                    isHovered && styles12.dayCircleHovered
+                                    styles14.dayCircle,
+                                    isSelectedEndpoint && styles14.dayCircleSelected,
+                                    isHovered && styles14.dayCircleHovered
                                   ],
-                                  children: /* @__PURE__ */ jsx(Text, { style: [styles12.dayText, { color: dayTextColor }], children: day.getDate() })
+                                  children: /* @__PURE__ */ jsx(Text, { style: [styles14.dayText, { color: dayTextColor }], children: day.getDate() })
                                 }
                               ),
-                              isToday && !isSelectedEndpoint ? /* @__PURE__ */ jsx(View, { style: styles12.todayDot }) : null
+                              isToday && !isSelectedEndpoint ? /* @__PURE__ */ jsx(View, { style: styles14.todayDot }) : null
                             ]
                           },
                           dayIndex
@@ -3410,7 +3797,7 @@ var DatePicker = forwardRef(
     );
   }
 );
-var styles12 = StyleSheet.create({
+var styles14 = StyleSheet.create({
   root: {
     width: DEFAULT_WIDTH,
     gap: 8,
@@ -3754,13 +4141,13 @@ var Input = forwardRef(function Input2({
   });
   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: [styles15.root, disabled && styles15.disabled, style], children: [
+    showLabel && label ? /* @__PURE__ */ jsx(Text, { style: [styles15.label, { color: chrome.labelColor }], children: label }) : null,
     /* @__PURE__ */ jsxs(
       View,
       {
         style: [
-          styles13.field,
+          styles15.field,
           {
             height: metrics.height,
             borderRadius: metrics.borderRadius,
@@ -3775,7 +4162,7 @@ var Input = forwardRef(function Input2({
           fieldStyle
         ],
         children: [
-          hasLeftIcon ? /* @__PURE__ */ jsx(View, { style: [styles13.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }], children: leftIconNode }) : null,
+          hasLeftIcon ? /* @__PURE__ */ jsx(View, { style: [styles15.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }], children: leftIconNode }) : null,
           /* @__PURE__ */ jsx(
             TextInput,
             {
@@ -3799,11 +4186,11 @@ var Input = forwardRef(function Input2({
                 onBlur?.(event);
               },
               style: [
-                styles13.input,
+                styles15.input,
                 metrics.text,
                 { color: chrome.textColor },
-                Platform.OS === "web" ? styles13.inputWeb : null,
-                Platform.OS === "android" ? styles13.inputAndroid : null,
+                Platform.OS === "web" ? styles15.inputWeb : null,
+                Platform.OS === "android" ? styles15.inputAndroid : null,
                 inputStyle
               ],
               accessibilityLabel: resolvedAccessibilityLabel,
@@ -3815,20 +4202,20 @@ var Input = forwardRef(function Input2({
             {
               onPress: onRightIconPress,
               disabled,
-              style: [styles13.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }],
+              style: [styles15.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }],
               accessibilityRole: "button",
               accessibilityLabel: rightIconAccessibilityLabel,
               hitSlop: 8,
               children: rightIconNode
             }
-          ) : /* @__PURE__ */ jsx(View, { style: [styles13.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }], children: rightIconNode }) : null
+          ) : /* @__PURE__ */ jsx(View, { style: [styles15.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }], children: rightIconNode }) : null
         ]
       }
     ),
-    showHint && hint ? /* @__PURE__ */ jsx(Text, { style: [styles13.hint, { color: chrome.hintColor }], children: hint }) : null
+    showHint && hint ? /* @__PURE__ */ jsx(Text, { style: [styles15.hint, { color: chrome.hintColor }], children: hint }) : null
   ] });
 });
-var styles13 = StyleSheet.create({
+var styles15 = StyleSheet.create({
   root: {
     width: DEFAULT_WIDTH2,
     gap: 8,
@@ -3865,6 +4252,207 @@ var styles13 = StyleSheet.create({
     ...inputTypography.hint
   }
 });
+
+// src/components/VerificationCodeInput/VerificationCodeInput.utils.ts
+function normalizeVerificationCode(value, length) {
+  return value.replace(/\D/g, "").slice(0, Math.max(1, length));
+}
+function updateVerificationCode(currentCode, index, input, length) {
+  const safeLength = Math.max(1, length);
+  const safeIndex = Math.min(Math.max(0, index), safeLength - 1);
+  const current = normalizeVerificationCode(currentCode, safeLength);
+  const insertedDigits = normalizeVerificationCode(input, safeLength - safeIndex);
+  if (!insertedDigits) {
+    return {
+      code: `${current.slice(0, safeIndex)}${current.slice(safeIndex + 1)}`,
+      nextFocus: safeIndex
+    };
+  }
+  return {
+    code: `${current.slice(0, safeIndex)}${insertedDigits}${current.slice(
+      safeIndex + insertedDigits.length
+    )}`.slice(0, safeLength),
+    nextFocus: Math.min(safeIndex + insertedDigits.length, safeLength - 1)
+  };
+}
+var DEFAULT_LENGTH = 6;
+var DESKTOP_CELL_WIDTH = 54;
+var MOBILE_CELL_WIDTH = 50;
+var CELL_HEIGHT = 68;
+var DESKTOP_GAP = 12;
+var MOBILE_GAP = 4;
+var MOBILE_BREAKPOINT = 640;
+var VerificationCodeInput = forwardRef(function VerificationCodeInput2({
+  length = DEFAULT_LENGTH,
+  value,
+  defaultValue = "",
+  onValueChange,
+  onComplete,
+  onSubmit,
+  error = false,
+  disabled = false,
+  autoFocus = false,
+  getDigitAccessibilityLabel,
+  style,
+  inputStyle,
+  className,
+  ...viewProps
+}, forwardedRef) {
+  const safeLength = Math.max(1, Math.floor(length));
+  const isControlled = typeof value === "string";
+  const [uncontrolledValue, setUncontrolledValue] = useState(
+    () => normalizeVerificationCode(defaultValue, safeLength)
+  );
+  const [focusedIndex, setFocusedIndex] = useState(null);
+  const { width: viewportWidth } = useWindowDimensions();
+  const rootRef = useRef(null);
+  const inputRefs = useRef([]);
+  const currentCode = normalizeVerificationCode(
+    isControlled ? value : uncontrolledValue,
+    safeLength
+  );
+  useApplyWebClassName(rootRef, className);
+  const focus = useCallback(
+    (index = 0) => {
+      const safeIndex = Math.min(Math.max(0, index), safeLength - 1);
+      inputRefs.current[safeIndex]?.focus();
+    },
+    [safeLength]
+  );
+  const commit = useCallback(
+    (nextValue) => {
+      const normalized = normalizeVerificationCode(nextValue, safeLength);
+      if (!isControlled) {
+        setUncontrolledValue(normalized);
+      }
+      onValueChange?.(normalized);
+      if (normalized.length === safeLength) {
+        onComplete?.(normalized);
+      }
+    },
+    [isControlled, onComplete, onValueChange, safeLength]
+  );
+  useImperativeHandle(
+    forwardedRef,
+    () => ({
+      clear: () => {
+        commit("");
+        focus(0);
+      },
+      focus
+    }),
+    [commit, focus]
+  );
+  const handleChange = (index, input) => {
+    const update = updateVerificationCode(currentCode, index, input, safeLength);
+    commit(update.code);
+    focus(update.nextFocus);
+  };
+  const handleKeyPress = (index, event) => {
+    const key = event.nativeEvent.key;
+    if (key === "Backspace" && !currentCode[index] && index > 0) {
+      const update = updateVerificationCode(currentCode, index - 1, "", safeLength);
+      commit(update.code);
+      focus(index - 1);
+      return;
+    }
+    if (key === "ArrowLeft" && index > 0) {
+      focus(index - 1);
+    }
+    if (key === "ArrowRight" && index < safeLength - 1) {
+      focus(index + 1);
+    }
+  };
+  const mobile = viewportWidth < MOBILE_BREAKPOINT;
+  const cellWidth = mobile ? MOBILE_CELL_WIDTH : DESKTOP_CELL_WIDTH;
+  const cellGap = mobile ? MOBILE_GAP : DESKTOP_GAP;
+  const rootWidth = cellWidth * safeLength + cellGap * Math.max(0, safeLength - 1);
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      ...viewProps,
+      ref: rootRef,
+      style: [
+        styles16.root,
+        { width: rootWidth, maxWidth: "100%", gap: cellGap },
+        disabled && styles16.disabled,
+        style
+      ],
+      children: Array.from({ length: safeLength }, (_, index) => {
+        const active = focusedIndex === index;
+        const borderColor = error ? colors.redHover : active ? colors.primary : colors.grey600;
+        return /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            ref: (element) => {
+              inputRefs.current[index] = element;
+            },
+            accessibilityLabel: getDigitAccessibilityLabel?.(index) ?? `Verification code digit ${index + 1}`,
+            accessibilityState: { disabled },
+            autoComplete: index === 0 ? "one-time-code" : "off",
+            autoFocus: autoFocus && index === 0,
+            caretHidden: Platform.OS !== "web",
+            editable: !disabled,
+            inputMode: "numeric",
+            keyboardType: "number-pad",
+            maxLength: safeLength,
+            onBlur: () => setFocusedIndex((current) => current === index ? null : current),
+            onChangeText: (text) => handleChange(index, text),
+            onFocus: () => setFocusedIndex(index),
+            onKeyPress: (event) => handleKeyPress(index, event),
+            onSubmitEditing: () => onSubmit?.(currentCode),
+            selectTextOnFocus: true,
+            style: [
+              styles16.cell,
+              {
+                width: cellWidth,
+                height: CELL_HEIGHT,
+                borderColor,
+                color: error ? colors.red : colors.white
+              },
+              Platform.OS === "web" ? styles16.cellWeb : null,
+              Platform.OS === "android" ? styles16.cellAndroid : null,
+              inputStyle
+            ],
+            value: currentCode[index] ?? ""
+          },
+          index
+        );
+      })
+    }
+  );
+});
+var styles16 = StyleSheet.create({
+  root: {
+    minWidth: 0,
+    alignSelf: "center",
+    flexDirection: "row",
+    justifyContent: "center"
+  },
+  disabled: {
+    opacity: 0.6
+  },
+  cell: {
+    minWidth: 0,
+    flexGrow: 0,
+    flexShrink: 0,
+    borderWidth: 1,
+    borderRadius: 16,
+    padding: 0,
+    margin: 0,
+    textAlign: "center",
+    fontFamily: fonts.sans,
+    fontSize: 22,
+    fontWeight: "600",
+    lineHeight: 22
+  },
+  cellWeb: {
+    outlineStyle: "none"
+  },
+  cellAndroid: {
+    includeFontPadding: false
+  }
+});
 var DEFAULT_WIDTH3 = 308;
 var TRIGGER_HEIGHT2 = 44;
 var TRIGGER_RADIUS2 = 60;
@@ -3944,25 +4532,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: styles14.multiValueRoot, children: [
-    /* @__PURE__ */ jsxs(View, { pointerEvents: "none", style: styles14.measureRow, children: [
+  return /* @__PURE__ */ jsxs(View, { style: styles17.multiValueRoot, children: [
+    /* @__PURE__ */ jsxs(View, { pointerEvents: "none", style: styles17.measureRow, children: [
       options.map((option) => /* @__PURE__ */ jsxs(
         View,
         {
-          style: styles14.chip,
+          style: styles17.chip,
           onLayout: (event) => handleChipLayout(option.value, event),
           children: [
-            /* @__PURE__ */ jsx(Text, { style: styles14.chipLabel, numberOfLines: 1, children: option.label }),
-            /* @__PURE__ */ jsx(Text, { style: styles14.chipRemove, children: "\xD7" })
+            /* @__PURE__ */ jsx(Text, { style: styles17.chipLabel, numberOfLines: 1, children: option.label }),
+            /* @__PURE__ */ jsx(Text, { style: styles17.chipRemove, children: "\xD7" })
           ]
         },
         `measure-${option.value}`
       )),
-      /* @__PURE__ */ jsx(View, { style: styles14.ellipsis, onLayout: handleEllipsisLayout, children: /* @__PURE__ */ jsx(Text, { style: styles14.ellipsisText, children: "..." }) })
+      /* @__PURE__ */ jsx(View, { style: styles17.ellipsis, onLayout: handleEllipsisLayout, children: /* @__PURE__ */ jsx(Text, { style: styles17.ellipsisText, children: "..." }) })
     ] }),
-    /* @__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__ */ jsxs(View, { style: styles17.chipsRow, onLayout: handleContainerLayout, children: [
+      visible.map((option) => /* @__PURE__ */ jsxs(View, { style: styles17.chip, children: [
+        /* @__PURE__ */ jsx(Text, { style: styles17.chipLabel, numberOfLines: 1, children: option.label }),
         /* @__PURE__ */ jsx(
           Pressable,
           {
@@ -3974,11 +4562,11 @@ function MultiValueChips({ options, disabled, onRemove }) {
             hitSlop: 6,
             accessibilityRole: "button",
             accessibilityLabel: `Remove ${option.label}`,
-            children: /* @__PURE__ */ jsx(Text, { style: styles14.chipRemove, children: "\xD7" })
+            children: /* @__PURE__ */ jsx(Text, { style: styles17.chipRemove, children: "\xD7" })
           }
         )
       ] }, option.value)),
-      hasOverflow ? /* @__PURE__ */ jsx(View, { style: styles14.ellipsis, children: /* @__PURE__ */ jsx(Text, { style: styles14.ellipsisText, children: "..." }) }) : null
+      hasOverflow ? /* @__PURE__ */ jsx(View, { style: styles17.ellipsis, children: /* @__PURE__ */ jsx(Text, { style: styles17.ellipsisText, children: "..." }) }) : null
     ] })
   ] });
 }
@@ -4202,11 +4790,11 @@ var Select = forwardRef(
       {
         ...rest,
         ref: setRootRef,
-        style: [styles14.root, isOpen && styles14.rootOpen, disabled && styles14.disabled, style],
+        style: [styles17.root, isOpen && styles17.rootOpen, disabled && styles17.disabled, style],
         accessibilityState: { disabled, expanded: isOpen },
         children: [
-          showLabel && label ? /* @__PURE__ */ jsx(Text, { style: [styles14.label, { color: labelColor }], children: label }) : null,
-          /* @__PURE__ */ jsxs(View, { style: [styles14.triggerWrap, isOpen && styles14.triggerWrapOpen], children: [
+          showLabel && label ? /* @__PURE__ */ jsx(Text, { style: [styles17.label, { color: labelColor }], children: label }) : null,
+          /* @__PURE__ */ jsxs(View, { style: [styles17.triggerWrap, isOpen && styles17.triggerWrapOpen], children: [
             /* @__PURE__ */ jsxs(
               Pressable,
               {
@@ -4217,29 +4805,29 @@ var Select = forwardRef(
                 accessibilityLabel: resolvedAccessibilityLabel,
                 accessibilityState: { disabled, expanded: isOpen },
                 style: [
-                  styles14.trigger,
+                  styles17.trigger,
                   {
                     borderColor: triggerBorderColor,
                     backgroundColor: colors.grey700
                   }
                 ],
                 children: [
-                  hasLeftIcon ? /* @__PURE__ */ jsx(View, { style: styles14.iconSlot, children: leftIconNode }) : null,
-                  /* @__PURE__ */ jsx(View, { style: styles14.triggerContent, children: multiple && hasValue ? /* @__PURE__ */ jsx(
+                  hasLeftIcon ? /* @__PURE__ */ jsx(View, { style: styles17.iconSlot, children: leftIconNode }) : null,
+                  /* @__PURE__ */ jsx(View, { style: styles17.triggerContent, children: multiple && hasValue ? /* @__PURE__ */ jsx(
                     MultiValueChips,
                     {
                       options: selectedOptions,
                       disabled,
                       onRemove: handleRemoveChip
                     }
-                  ) : /* @__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 }) })
+                  ) : /* @__PURE__ */ jsx(Text, { style: [styles17.triggerText, { color: triggerTextColor }], numberOfLines: 1, children: multiple ? placeholder : singleLabel }) }),
+                  /* @__PURE__ */ jsx(View, { style: [styles17.iconSlot, isOpen && styles17.chevronOpen], children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: ICON_SIZE8, color: isOpen ? colors.primary : 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 }) }),
+            isOpen ? /* @__PURE__ */ jsxs(View, { style: styles17.menu, children: [
+              showSearch ? /* @__PURE__ */ jsxs(View, { style: styles17.searchField, children: [
+                /* @__PURE__ */ jsx(View, { style: styles17.iconSlot, children: /* @__PURE__ */ jsx(SearchIcon, { size: ICON_SIZE8, color: colors.grey100 }) }),
                 /* @__PURE__ */ jsx(
                   TextInput,
                   {
@@ -4250,9 +4838,9 @@ var Select = forwardRef(
                     placeholder: searchPlaceholder,
                     placeholderTextColor: colors.grey100,
                     style: [
-                      styles14.searchInput,
-                      Platform.OS === "web" ? styles14.searchInputWeb : null,
-                      Platform.OS === "android" ? styles14.searchInputAndroid : null
+                      styles17.searchInput,
+                      Platform.OS === "web" ? styles17.searchInputWeb : null,
+                      Platform.OS === "android" ? styles17.searchInputAndroid : null
                     ],
                     accessibilityLabel: searchPlaceholder
                   }
@@ -4261,12 +4849,12 @@ var Select = forwardRef(
               /* @__PURE__ */ jsxs(
                 ScrollView,
                 {
-                  style: styles14.optionList,
-                  contentContainerStyle: styles14.optionListContent,
+                  style: styles17.optionList,
+                  contentContainerStyle: styles17.optionListContent,
                   keyboardShouldPersistTaps: "handled",
                   showsVerticalScrollIndicator: false,
                   children: [
-                    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 ? /* @__PURE__ */ jsx(View, { style: styles17.statusRow, children: /* @__PURE__ */ jsx(Text, { style: styles17.statusText, children: "Loading..." }) }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsx(View, { style: styles17.statusRow, children: /* @__PURE__ */ jsx(Text, { style: styles17.statusText, children: emptyText }) }) : null,
                     !loading && filteredOptions.map((option) => {
                       const isSelected = selectedValues.includes(option.value);
                       const isHovered = hoveredValue === option.value;
@@ -4283,14 +4871,14 @@ var Select = forwardRef(
                           accessibilityRole: multiple ? "checkbox" : "button",
                           accessibilityState: { selected: isSelected, checked: isSelected, disabled },
                           style: [
-                            styles14.item,
+                            styles17.item,
                             {
                               backgroundColor: itemBackground(visualState)
                             }
                           ],
                           children: [
-                            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 })
+                            multiple ? /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: styles17.itemCheckbox, children: /* @__PURE__ */ jsx(Checkbox, { value: isSelected, variant: "light" }) }) : null,
+                            /* @__PURE__ */ jsx(Text, { style: styles17.itemLabel, numberOfLines: 1, children: option.label })
                           ]
                         },
                         option.value
@@ -4301,13 +4889,13 @@ var Select = forwardRef(
               )
             ] }) : null
           ] }),
-          showHint && hint ? /* @__PURE__ */ jsx(Text, { style: [styles14.hint, { color: hintColor }], children: hint }) : null
+          showHint && hint ? /* @__PURE__ */ jsx(Text, { style: [styles17.hint, { color: hintColor }], children: hint }) : null
         ]
       }
     );
   }
 );
-var styles14 = StyleSheet.create({
+var styles17 = StyleSheet.create({
   root: {
     width: DEFAULT_WIDTH3,
     gap: 8,
@@ -4569,13 +5157,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: [styles15.root, disabled && styles15.disabled, style], children: [
-    showLabel && label ? /* @__PURE__ */ jsx(Text, { style: [styles15.label, { color: chrome.labelColor }], children: label }) : null,
+  return /* @__PURE__ */ jsxs(View, { ref: rootRef, style: [styles18.root, disabled && styles18.disabled, style], children: [
+    showLabel && label ? /* @__PURE__ */ jsx(Text, { style: [styles18.label, { color: chrome.labelColor }], children: label }) : null,
     /* @__PURE__ */ jsx(
       View,
       {
         style: [
-          styles15.field,
+          styles18.field,
           {
             borderColor: chrome.borderColor,
             backgroundColor: chrome.backgroundColor
@@ -4607,11 +5195,11 @@ var Textarea = forwardRef(function Textarea2({
               onBlur?.(event);
             },
             style: [
-              styles15.input,
+              styles18.input,
               textareaTypography.field,
               { color: chrome.textColor },
-              Platform.OS === "web" ? styles15.inputWeb : null,
-              Platform.OS === "android" ? styles15.inputAndroid : null,
+              Platform.OS === "web" ? styles18.inputWeb : null,
+              Platform.OS === "android" ? styles18.inputAndroid : null,
               inputStyle
             ],
             accessibilityLabel: resolvedAccessibilityLabel,
@@ -4620,10 +5208,10 @@ var Textarea = forwardRef(function Textarea2({
         )
       }
     ),
-    showHint && hint ? /* @__PURE__ */ jsx(Text, { style: [styles15.hint, { color: chrome.hintColor }], children: hint }) : null
+    showHint && hint ? /* @__PURE__ */ jsx(Text, { style: [styles18.hint, { color: chrome.hintColor }], children: hint }) : null
   ] });
 });
-var styles15 = StyleSheet.create({
+var styles18 = StyleSheet.create({
   root: {
     width: DEFAULT_WIDTH4,
     gap: 8,
@@ -4663,9 +5251,9 @@ var styles15 = StyleSheet.create({
 var TRACK_WIDTH = 44;
 var TRACK_HEIGHT = 24;
 var TRACK_RADIUS = 43;
-var TRACK_PADDING = 4;
-var THUMB_SIZE = TRACK_HEIGHT - TRACK_PADDING * 2;
-var THUMB_TRAVEL = TRACK_WIDTH - TRACK_PADDING * 2 - THUMB_SIZE;
+var TRACK_PADDING2 = 4;
+var THUMB_SIZE = TRACK_HEIGHT - TRACK_PADDING2 * 2;
+var THUMB_TRAVEL = TRACK_WIDTH - TRACK_PADDING2 * 2 - THUMB_SIZE;
 var ANIMATION_DURATION2 = 300;
 var Toggle = forwardRef(function Toggle2({
   value,
@@ -4723,13 +5311,13 @@ var Toggle = forwardRef(function Toggle2({
       accessibilityRole: "switch",
       accessibilityLabel: resolvedAccessibilityLabel,
       accessibilityState: { checked: isActive, disabled },
-      style: [styles16.pressable, disabled && styles16.disabled, style],
+      style: [styles19.pressable, disabled && styles19.disabled, style],
       children: [
         /* @__PURE__ */ jsx(
           Animated.View,
           {
             style: [
-              styles16.track,
+              styles19.track,
               {
                 backgroundColor: trackBackgroundColor
               }
@@ -4738,7 +5326,7 @@ var Toggle = forwardRef(function Toggle2({
               Animated.View,
               {
                 style: [
-                  styles16.thumb,
+                  styles19.thumb,
                   {
                     transform: [{ translateX: thumbTranslateX }]
                   }
@@ -4747,12 +5335,12 @@ var Toggle = forwardRef(function Toggle2({
             )
           }
         ),
-        labelContent != null && labelContent !== false ? typeof labelContent === "string" || typeof labelContent === "number" ? /* @__PURE__ */ jsx(Text, { style: [styles16.label, labelStyle], children: labelContent }) : labelContent : null
+        labelContent != null && labelContent !== false ? typeof labelContent === "string" || typeof labelContent === "number" ? /* @__PURE__ */ jsx(Text, { style: [styles19.label, labelStyle], children: labelContent }) : labelContent : null
       ]
     }
   );
 });
-var styles16 = StyleSheet.create({
+var styles19 = StyleSheet.create({
   pressable: {
     flexDirection: "row",
     alignItems: "center",
@@ -4766,7 +5354,7 @@ var styles16 = StyleSheet.create({
     width: TRACK_WIDTH,
     height: TRACK_HEIGHT,
     borderRadius: TRACK_RADIUS,
-    padding: TRACK_PADDING,
+    padding: TRACK_PADDING2,
     justifyContent: "center"
   },
   thumb: {
@@ -4827,21 +5415,21 @@ var RatingInput = forwardRef(
       {
         ...rest,
         ref: setContainerRef,
-        style: [styles17.root, disabled && styles17.disabled, style],
+        style: [styles20.root, disabled && styles20.disabled, style],
         children: [
-          showValue ? /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [styles17.value, valueStyle], children: selectedValue.toFixed(precision) }) : null,
+          showValue ? /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [styles20.value, valueStyle], children: selectedValue.toFixed(precision) }) : null,
           /* @__PURE__ */ jsx(
             View,
             {
               accessibilityRole: readOnly ? "image" : "radiogroup",
               accessibilityLabel: resolvedAccessibilityLabel,
               accessibilityState: { disabled },
-              style: [styles17.stars, { gap: resolvedStarGap }],
+              style: [styles20.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 = [styles17.starItem, { width: size, height: size }];
+                const itemStyle = [styles20.starItem, { width: size, height: size }];
                 if (readOnly) {
                   return /* @__PURE__ */ jsx(View, { style: itemStyle, children: icon }, starValue);
                 }
@@ -4867,7 +5455,7 @@ var RatingInput = forwardRef(
     );
   }
 );
-var styles17 = StyleSheet.create({
+var styles20 = StyleSheet.create({
   root: {
     flexDirection: "row",
     alignItems: "center",
@@ -4891,7 +5479,7 @@ var styles17 = StyleSheet.create({
     opacity: 0.5
   }
 });
-var CARD_WIDTH = 370;
+var CARD_WIDTH2 = 370;
 var CARD_MIN_HEIGHT = 173;
 var AVATAR_SIZE = 44;
 var CommentCard = forwardRef(
@@ -4931,19 +5519,19 @@ var CommentCard = forwardRef(
       setExpanded(next);
       onExpandedChange?.(next);
     };
-    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(
+    return /* @__PURE__ */ jsxs(View, { ...rest, ref: setContainerRef, style: [styles21.root, style], children: [
+      /* @__PURE__ */ jsxs(View, { style: styles21.header, children: [
+        /* @__PURE__ */ jsx(View, { style: styles21.avatar, children: hasImage ? /* @__PURE__ */ jsx(
           Image,
           {
             source: { uri: imageUrl ?? void 0 },
-            style: styles18.avatarImage,
+            style: styles21.avatarImage,
             onError: () => setImageFailed(true)
           }
         ) : /* @__PURE__ */ jsx(UserIcon, { size: 20, color: colors.primary }) }),
-        /* @__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__ */ jsxs(View, { style: styles21.identity, children: [
+          /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles21.name, children: userName }),
+          /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles21.date, children: date })
         ] }),
         /* @__PURE__ */ jsx(RatingInput, { value: rating, readOnly: true, showValue: false, size: 16 })
       ] }),
@@ -4951,7 +5539,7 @@ var CommentCard = forwardRef(
         Text,
         {
           numberOfLines: expanded ? void 0 : maxCommentLines,
-          style: [styles18.comment, commentStyle],
+          style: [styles21.comment, commentStyle],
           children: commentText
         }
       ),
@@ -4964,14 +5552,14 @@ var CommentCard = forwardRef(
           hitSlop: 6,
           onHoverIn: () => setActionHovered(true),
           onHoverOut: () => setActionHovered(false),
-          style: styles18.action,
+          style: styles21.action,
           children: /* @__PURE__ */ jsx(
             Text,
             {
               style: [
-                styles18.actionText,
-                expanded && styles18.closeActionText,
-                actionHovered && (expanded ? styles18.closeActionTextHovered : styles18.openActionTextHovered)
+                styles21.actionText,
+                expanded && styles21.closeActionText,
+                actionHovered && (expanded ? styles21.closeActionTextHovered : styles21.openActionTextHovered)
               ],
               children: expanded ? readLessLabel : readMoreLabel
             }
@@ -4981,9 +5569,9 @@ var CommentCard = forwardRef(
     ] });
   }
 );
-var styles18 = StyleSheet.create({
+var styles21 = StyleSheet.create({
   root: {
-    width: CARD_WIDTH,
+    width: CARD_WIDTH2,
     minHeight: CARD_MIN_HEIGHT,
     padding: 16,
     gap: 12,
@@ -5420,7 +6008,7 @@ var Range = forwardRef(function Range2({
       ...rest,
       ref: setRootRef,
       onLayout,
-      style: [styles19.root, disabled && styles19.disabled, style],
+      style: [styles22.root, disabled && styles22.disabled, style],
       children: [
         /* @__PURE__ */ jsxs(
           Pressable,
@@ -5434,16 +6022,16 @@ var Range = forwardRef(function Range2({
               updateNearestFromTrack(event.nativeEvent.offsetX);
             } : void 0,
             onPress: Platform.OS === "web" ? void 0 : handleTrackPress,
-            style: styles19.sliderPlane,
+            style: styles22.sliderPlane,
             tabIndex: -1,
             children: [
-              /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: styles19.track }),
+              /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: styles22.track }),
               /* @__PURE__ */ jsx(
                 View,
                 {
                   pointerEvents: "none",
                   style: [
-                    styles19.activeTrack,
+                    styles22.activeTrack,
                     {
                       left: TRACK_HORIZONTAL_INSET + fromOffset,
                       width: toOffset - fromOffset + THUMB_SIZE2
@@ -5485,9 +6073,9 @@ var Range = forwardRef(function Range2({
                   onAccessibilityAction: (event) => handleAccessibilityAction(event, effectiveFrom, updateFromInput),
                   pointerEvents: disabled ? "none" : "auto",
                   style: [
-                    styles19.thumb,
-                    Platform.OS === "web" && styles19.thumbWeb,
-                    focusedThumb === "from" && Platform.OS === "web" && styles19.thumbFocusedWeb,
+                    styles22.thumb,
+                    Platform.OS === "web" && styles22.thumbWeb,
+                    focusedThumb === "from" && Platform.OS === "web" && styles22.thumbFocusedWeb,
                     { left: TRACK_HORIZONTAL_INSET + fromOffset }
                   ],
                   tabIndex: disabled ? -1 : 0
@@ -5527,9 +6115,9 @@ var Range = forwardRef(function Range2({
                   onAccessibilityAction: (event) => handleAccessibilityAction(event, effectiveTo, updateToInput),
                   pointerEvents: disabled ? "none" : "auto",
                   style: [
-                    styles19.thumb,
-                    Platform.OS === "web" && styles19.thumbWeb,
-                    focusedThumb === "to" && Platform.OS === "web" && styles19.thumbFocusedWeb,
+                    styles22.thumb,
+                    Platform.OS === "web" && styles22.thumbWeb,
+                    focusedThumb === "to" && Platform.OS === "web" && styles22.thumbFocusedWeb,
                     { left: TRACK_HORIZONTAL_INSET + toOffset }
                   ],
                   tabIndex: disabled ? -1 : 0
@@ -5538,7 +6126,7 @@ var Range = forwardRef(function Range2({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs(View, { style: styles19.inputs, children: [
+        /* @__PURE__ */ jsxs(View, { style: styles22.inputs, children: [
           /* @__PURE__ */ jsx(
             RangeInput,
             {
@@ -5589,7 +6177,7 @@ function RangeInput({
   placeholder,
   value
 }) {
-  return /* @__PURE__ */ jsxs(View, { style: [styles19.inputField, focused && styles19.inputFieldFocused], children: [
+  return /* @__PURE__ */ jsxs(View, { style: [styles22.inputField, focused && styles22.inputFieldFocused], children: [
     /* @__PURE__ */ jsx(
       TextInput,
       {
@@ -5605,15 +6193,15 @@ function RangeInput({
         placeholder,
         placeholderTextColor: colors.grey150,
         returnKeyType: "done",
-        style: [styles19.input, Platform.OS === "web" && styles19.inputWeb],
+        style: [styles22.input, Platform.OS === "web" && styles22.inputWeb],
         tabIndex: disabled ? -1 : void 0,
         value
       }
     ),
-    /* @__PURE__ */ jsx(View, { style: styles19.currencySlot, children: /* @__PURE__ */ jsx(Text, { style: styles19.currency, children: currency }) })
+    /* @__PURE__ */ jsx(View, { style: styles22.currencySlot, children: /* @__PURE__ */ jsx(Text, { style: styles22.currency, children: currency }) })
   ] });
 }
-var styles19 = StyleSheet.create({
+var styles22 = StyleSheet.create({
   root: {
     width: DEFAULT_WIDTH5,
     gap: 15,
@@ -5717,6 +6305,6 @@ var styles19 = StyleSheet.create({
   }
 });
 
-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 };
+export { Amenity, AmenityIcon, AppleIcon, AreaExpandIcon, ArrowRightIcon, Avatar, AvatarSimple, 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, Sidebar, SidebarIcon, SortIcon, StarFilledIcon, StarIcon, StatCard, Textarea, Toggle, TooltipArrowIcon, UserIcon, UsersAltIcon, VerificationCodeInput, 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