@ecohouse/ui 0.1.28 → 0.1.29

package/dist/index.cjs

@@ -3871,6 +3871,207 @@ var styles13 = reactNative.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 = react.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] = react.useState(
+    () => normalizeVerificationCode(defaultValue, safeLength)
+  );
+  const [focusedIndex, setFocusedIndex] = react.useState(null);
+  const { width: viewportWidth } = reactNative.useWindowDimensions();
+  const rootRef = react.useRef(null);
+  const inputRefs = react.useRef([]);
+  const currentCode = normalizeVerificationCode(
+    isControlled ? value : uncontrolledValue,
+    safeLength
+  );
+  useApplyWebClassName(rootRef, className);
+  const focus = react.useCallback(
+    (index = 0) => {
+      const safeIndex = Math.min(Math.max(0, index), safeLength - 1);
+      inputRefs.current[safeIndex]?.focus();
+    },
+    [safeLength]
+  );
+  const commit = react.useCallback(
+    (nextValue) => {
+      const normalized = normalizeVerificationCode(nextValue, safeLength);
+      if (!isControlled) {
+        setUncontrolledValue(normalized);
+      }
+      onValueChange?.(normalized);
+      if (normalized.length === safeLength) {
+        onComplete?.(normalized);
+      }
+    },
+    [isControlled, onComplete, onValueChange, safeLength]
+  );
+  react.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__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      ...viewProps,
+      ref: rootRef,
+      style: [
+        styles14.root,
+        { width: rootWidth, maxWidth: "100%", gap: cellGap },
+        disabled && styles14.disabled,
+        style
+      ],
+      children: Array.from({ length: safeLength }, (_, index) => {
+        const active = focusedIndex === index;
+        const borderColor = error ? colors.redHover : active ? colors.primary : colors.grey600;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.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: reactNative.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: [
+              styles14.cell,
+              {
+                width: cellWidth,
+                height: CELL_HEIGHT,
+                borderColor,
+                color: error ? colors.red : colors.white
+              },
+              reactNative.Platform.OS === "web" ? styles14.cellWeb : null,
+              reactNative.Platform.OS === "android" ? styles14.cellAndroid : null,
+              inputStyle
+            ],
+            value: currentCode[index] ?? ""
+          },
+          index
+        );
+      })
+    }
+  );
+});
+var styles14 = reactNative.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;
@@ -3950,25 +4151,25 @@ function MultiValueChips({ options, disabled, onRemove }) {
     const next = Math.ceil(event.nativeEvent.layout.width);
     setEllipsisWidth((current) => current === next ? current : next);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles14.multiValueRoot, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { pointerEvents: "none", style: styles14.measureRow, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles15.multiValueRoot, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { pointerEvents: "none", style: styles15.measureRow, children: [
       options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
         reactNative.View,
         {
-          style: styles14.chip,
+          style: styles15.chip,
           onLayout: (event) => handleChipLayout(option.value, event),
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles14.chipLabel, numberOfLines: 1, children: option.label }),
-            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles14.chipRemove, children: "\xD7" })
+            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles15.chipLabel, numberOfLines: 1, children: option.label }),
+            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles15.chipRemove, children: "\xD7" })
           ]
         },
         `measure-${option.value}`
       )),
-      /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles14.ellipsis, onLayout: handleEllipsisLayout, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles14.ellipsisText, children: "..." }) })
+      /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles15.ellipsis, onLayout: handleEllipsisLayout, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles15.ellipsisText, children: "..." }) })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles14.chipsRow, onLayout: handleContainerLayout, children: [
-      visible.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles14.chip, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles14.chipLabel, numberOfLines: 1, children: option.label }),
+    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles15.chipsRow, onLayout: handleContainerLayout, children: [
+      visible.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles15.chip, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles15.chipLabel, numberOfLines: 1, children: option.label }),
         /* @__PURE__ */ jsxRuntime.jsx(
           reactNative.Pressable,
           {
@@ -3980,11 +4181,11 @@ function MultiValueChips({ options, disabled, onRemove }) {
             hitSlop: 6,
             accessibilityRole: "button",
             accessibilityLabel: `Remove ${option.label}`,
-            children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles14.chipRemove, children: "\xD7" })
+            children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles15.chipRemove, children: "\xD7" })
           }
         )
       ] }, option.value)),
-      hasOverflow ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles14.ellipsis, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles14.ellipsisText, children: "..." }) }) : null
+      hasOverflow ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles15.ellipsis, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles15.ellipsisText, children: "..." }) }) : null
     ] })
   ] });
 }
@@ -4208,11 +4409,11 @@ var Select = react.forwardRef(
       {
         ...rest,
         ref: setRootRef,
-        style: [styles14.root, isOpen && styles14.rootOpen, disabled && styles14.disabled, style],
+        style: [styles15.root, isOpen && styles15.rootOpen, disabled && styles15.disabled, style],
         accessibilityState: { disabled, expanded: isOpen },
         children: [
-          showLabel && label ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles14.label, { color: labelColor }], children: label }) : null,
-          /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles14.triggerWrap, isOpen && styles14.triggerWrapOpen], children: [
+          showLabel && label ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles15.label, { color: labelColor }], children: label }) : null,
+          /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles15.triggerWrap, isOpen && styles15.triggerWrapOpen], children: [
             /* @__PURE__ */ jsxRuntime.jsxs(
               reactNative.Pressable,
               {
@@ -4223,29 +4424,29 @@ var Select = react.forwardRef(
                 accessibilityLabel: resolvedAccessibilityLabel,
                 accessibilityState: { disabled, expanded: isOpen },
                 style: [
-                  styles14.trigger,
+                  styles15.trigger,
                   {
                     borderColor: triggerBorderColor,
                     backgroundColor: colors.grey700
                   }
                 ],
                 children: [
-                  hasLeftIcon ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles14.iconSlot, children: leftIconNode }) : null,
-                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles14.triggerContent, children: multiple && hasValue ? /* @__PURE__ */ jsxRuntime.jsx(
+                  hasLeftIcon ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles15.iconSlot, children: leftIconNode }) : null,
+                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles15.triggerContent, children: multiple && hasValue ? /* @__PURE__ */ jsxRuntime.jsx(
                     MultiValueChips,
                     {
                       options: selectedOptions,
                       disabled,
                       onRemove: handleRemoveChip
                     }
-                  ) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles14.triggerText, { color: triggerTextColor }], numberOfLines: 1, children: multiple ? placeholder : singleLabel }) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles14.iconSlot, isOpen && styles14.chevronOpen], children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, { size: ICON_SIZE8, color: isOpen ? colors.primary : colors.grey100 }) })
+                  ) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles15.triggerText, { color: triggerTextColor }], numberOfLines: 1, children: multiple ? placeholder : singleLabel }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles15.iconSlot, isOpen && styles15.chevronOpen], children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, { size: ICON_SIZE8, color: isOpen ? colors.primary : colors.grey100 }) })
                 ]
               }
             ),
-            isOpen ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles14.menu, children: [
-              showSearch ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles14.searchField, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles14.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, { size: ICON_SIZE8, color: colors.grey100 }) }),
+            isOpen ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles15.menu, children: [
+              showSearch ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles15.searchField, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles15.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, { size: ICON_SIZE8, color: colors.grey100 }) }),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   reactNative.TextInput,
                   {
@@ -4256,9 +4457,9 @@ var Select = react.forwardRef(
                     placeholder: searchPlaceholder,
                     placeholderTextColor: colors.grey100,
                     style: [
-                      styles14.searchInput,
-                      reactNative.Platform.OS === "web" ? styles14.searchInputWeb : null,
-                      reactNative.Platform.OS === "android" ? styles14.searchInputAndroid : null
+                      styles15.searchInput,
+                      reactNative.Platform.OS === "web" ? styles15.searchInputWeb : null,
+                      reactNative.Platform.OS === "android" ? styles15.searchInputAndroid : null
                     ],
                     accessibilityLabel: searchPlaceholder
                   }
@@ -4267,12 +4468,12 @@ var Select = react.forwardRef(
               /* @__PURE__ */ jsxRuntime.jsxs(
                 reactNative.ScrollView,
                 {
-                  style: styles14.optionList,
-                  contentContainerStyle: styles14.optionListContent,
+                  style: styles15.optionList,
+                  contentContainerStyle: styles15.optionListContent,
                   keyboardShouldPersistTaps: "handled",
                   showsVerticalScrollIndicator: false,
                   children: [
-                    loading ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles14.statusRow, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles14.statusText, children: "Loading..." }) }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles14.statusRow, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles14.statusText, children: emptyText }) }) : null,
+                    loading ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles15.statusRow, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles15.statusText, children: "Loading..." }) }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles15.statusRow, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles15.statusText, children: emptyText }) }) : null,
                     !loading && filteredOptions.map((option) => {
                       const isSelected = selectedValues.includes(option.value);
                       const isHovered = hoveredValue === option.value;
@@ -4289,14 +4490,14 @@ var Select = react.forwardRef(
                           accessibilityRole: multiple ? "checkbox" : "button",
                           accessibilityState: { selected: isSelected, checked: isSelected, disabled },
                           style: [
-                            styles14.item,
+                            styles15.item,
                             {
                               backgroundColor: itemBackground(visualState)
                             }
                           ],
                           children: [
-                            multiple ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { pointerEvents: "none", style: styles14.itemCheckbox, children: /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { value: isSelected, variant: "light" }) }) : null,
-                            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles14.itemLabel, numberOfLines: 1, children: option.label })
+                            multiple ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { pointerEvents: "none", style: styles15.itemCheckbox, children: /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { value: isSelected, variant: "light" }) }) : null,
+                            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles15.itemLabel, numberOfLines: 1, children: option.label })
                           ]
                         },
                         option.value
@@ -4307,13 +4508,13 @@ var Select = react.forwardRef(
               )
             ] }) : null
           ] }),
-          showHint && hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles14.hint, { color: hintColor }], children: hint }) : null
+          showHint && hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles15.hint, { color: hintColor }], children: hint }) : null
         ]
       }
     );
   }
 );
-var styles14 = reactNative.StyleSheet.create({
+var styles15 = reactNative.StyleSheet.create({
   root: {
     width: DEFAULT_WIDTH3,
     gap: 8,
@@ -4575,13 +4776,13 @@ var Textarea = react.forwardRef(function Textarea2({
   const resolvedAccessibilityLabel = accessibilityLabel ?? (showLabel ? void 0 : label);
   useApplyWebClassName(rootRef, className);
   useApplyWebClassName(inputRef, inputClassName);
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ref: rootRef, style: [styles15.root, disabled && styles15.disabled, style], children: [
-    showLabel && label ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles15.label, { color: chrome.labelColor }], children: label }) : null,
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ref: rootRef, style: [styles16.root, disabled && styles16.disabled, style], children: [
+    showLabel && label ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles16.label, { color: chrome.labelColor }], children: label }) : null,
     /* @__PURE__ */ jsxRuntime.jsx(
       reactNative.View,
       {
         style: [
-          styles15.field,
+          styles16.field,
           {
             borderColor: chrome.borderColor,
             backgroundColor: chrome.backgroundColor
@@ -4613,11 +4814,11 @@ var Textarea = react.forwardRef(function Textarea2({
               onBlur?.(event);
             },
             style: [
-              styles15.input,
+              styles16.input,
               textareaTypography.field,
               { color: chrome.textColor },
-              reactNative.Platform.OS === "web" ? styles15.inputWeb : null,
-              reactNative.Platform.OS === "android" ? styles15.inputAndroid : null,
+              reactNative.Platform.OS === "web" ? styles16.inputWeb : null,
+              reactNative.Platform.OS === "android" ? styles16.inputAndroid : null,
               inputStyle
             ],
             accessibilityLabel: resolvedAccessibilityLabel,
@@ -4626,10 +4827,10 @@ var Textarea = react.forwardRef(function Textarea2({
         )
       }
     ),
-    showHint && hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles15.hint, { color: chrome.hintColor }], children: hint }) : null
+    showHint && hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles16.hint, { color: chrome.hintColor }], children: hint }) : null
   ] });
 });
-var styles15 = reactNative.StyleSheet.create({
+var styles16 = reactNative.StyleSheet.create({
   root: {
     width: DEFAULT_WIDTH4,
     gap: 8,
@@ -4729,13 +4930,13 @@ var Toggle = react.forwardRef(function Toggle2({
       accessibilityRole: "switch",
       accessibilityLabel: resolvedAccessibilityLabel,
       accessibilityState: { checked: isActive, disabled },
-      style: [styles16.pressable, disabled && styles16.disabled, style],
+      style: [styles17.pressable, disabled && styles17.disabled, style],
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           reactNative.Animated.View,
           {
             style: [
-              styles16.track,
+              styles17.track,
               {
                 backgroundColor: trackBackgroundColor
               }
@@ -4744,7 +4945,7 @@ var Toggle = react.forwardRef(function Toggle2({
               reactNative.Animated.View,
               {
                 style: [
-                  styles16.thumb,
+                  styles17.thumb,
                   {
                     transform: [{ translateX: thumbTranslateX }]
                   }
@@ -4753,12 +4954,12 @@ var Toggle = react.forwardRef(function Toggle2({
             )
           }
         ),
-        labelContent != null && labelContent !== false ? typeof labelContent === "string" || typeof labelContent === "number" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles16.label, labelStyle], children: labelContent }) : labelContent : null
+        labelContent != null && labelContent !== false ? typeof labelContent === "string" || typeof labelContent === "number" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles17.label, labelStyle], children: labelContent }) : labelContent : null
       ]
     }
   );
 });
-var styles16 = reactNative.StyleSheet.create({
+var styles17 = reactNative.StyleSheet.create({
   pressable: {
     flexDirection: "row",
     alignItems: "center",
@@ -4833,21 +5034,21 @@ var RatingInput = react.forwardRef(
       {
         ...rest,
         ref: setContainerRef,
-        style: [styles17.root, disabled && styles17.disabled, style],
+        style: [styles18.root, disabled && styles18.disabled, style],
         children: [
-          showValue ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { numberOfLines: 1, style: [styles17.value, valueStyle], children: selectedValue.toFixed(precision) }) : null,
+          showValue ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { numberOfLines: 1, style: [styles18.value, valueStyle], children: selectedValue.toFixed(precision) }) : null,
           /* @__PURE__ */ jsxRuntime.jsx(
             reactNative.View,
             {
               accessibilityRole: readOnly ? "image" : "radiogroup",
               accessibilityLabel: resolvedAccessibilityLabel,
               accessibilityState: { disabled },
-              style: [styles17.stars, { gap: resolvedStarGap }],
+              style: [styles18.stars, { gap: resolvedStarGap }],
               children: Array.from({ length: STAR_COUNT }, (_, index) => {
                 const starValue = index + 1;
                 const isSelected = starValue <= selectedStarCount;
                 const icon = isSelected ? /* @__PURE__ */ jsxRuntime.jsx(StarFilledIcon, { size: iconWidth, height: iconHeight }) : /* @__PURE__ */ jsxRuntime.jsx(StarIcon, { size: iconWidth, height: iconHeight });
-                const itemStyle = [styles17.starItem, { width: size, height: size }];
+                const itemStyle = [styles18.starItem, { width: size, height: size }];
                 if (readOnly) {
                   return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: itemStyle, children: icon }, starValue);
                 }
@@ -4873,7 +5074,7 @@ var RatingInput = react.forwardRef(
     );
   }
 );
-var styles17 = reactNative.StyleSheet.create({
+var styles18 = reactNative.StyleSheet.create({
   root: {
     flexDirection: "row",
     alignItems: "center",
@@ -4937,19 +5138,19 @@ var CommentCard = react.forwardRef(
       setExpanded(next);
       onExpandedChange?.(next);
     };
-    return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ...rest, ref: setContainerRef, style: [styles18.root, style], children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles18.header, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles18.avatar, children: hasImage ? /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ...rest, ref: setContainerRef, style: [styles19.root, style], children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles19.header, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles19.avatar, children: hasImage ? /* @__PURE__ */ jsxRuntime.jsx(
           reactNative.Image,
           {
             source: { uri: imageUrl ?? void 0 },
-            style: styles18.avatarImage,
+            style: styles19.avatarImage,
             onError: () => setImageFailed(true)
           }
         ) : /* @__PURE__ */ jsxRuntime.jsx(UserIcon, { size: 20, color: colors.primary }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles18.identity, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { numberOfLines: 1, style: styles18.name, children: userName }),
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { numberOfLines: 1, style: styles18.date, children: date })
+        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles19.identity, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { numberOfLines: 1, style: styles19.name, children: userName }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { numberOfLines: 1, style: styles19.date, children: date })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(RatingInput, { value: rating, readOnly: true, showValue: false, size: 16 })
       ] }),
@@ -4957,7 +5158,7 @@ var CommentCard = react.forwardRef(
         reactNative.Text,
         {
           numberOfLines: expanded ? void 0 : maxCommentLines,
-          style: [styles18.comment, commentStyle],
+          style: [styles19.comment, commentStyle],
           children: commentText
         }
       ),
@@ -4970,14 +5171,14 @@ var CommentCard = react.forwardRef(
           hitSlop: 6,
           onHoverIn: () => setActionHovered(true),
           onHoverOut: () => setActionHovered(false),
-          style: styles18.action,
+          style: styles19.action,
           children: /* @__PURE__ */ jsxRuntime.jsx(
             reactNative.Text,
             {
               style: [
-                styles18.actionText,
-                expanded && styles18.closeActionText,
-                actionHovered && (expanded ? styles18.closeActionTextHovered : styles18.openActionTextHovered)
+                styles19.actionText,
+                expanded && styles19.closeActionText,
+                actionHovered && (expanded ? styles19.closeActionTextHovered : styles19.openActionTextHovered)
               ],
               children: expanded ? readLessLabel : readMoreLabel
             }
@@ -4987,7 +5188,7 @@ var CommentCard = react.forwardRef(
     ] });
   }
 );
-var styles18 = reactNative.StyleSheet.create({
+var styles19 = reactNative.StyleSheet.create({
   root: {
     width: CARD_WIDTH,
     minHeight: CARD_MIN_HEIGHT,
@@ -5426,7 +5627,7 @@ var Range = react.forwardRef(function Range2({
       ...rest,
       ref: setRootRef,
       onLayout,
-      style: [styles19.root, disabled && styles19.disabled, style],
+      style: [styles20.root, disabled && styles20.disabled, style],
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           reactNative.Pressable,
@@ -5440,16 +5641,16 @@ var Range = react.forwardRef(function Range2({
               updateNearestFromTrack(event.nativeEvent.offsetX);
             } : void 0,
             onPress: reactNative.Platform.OS === "web" ? void 0 : handleTrackPress,
-            style: styles19.sliderPlane,
+            style: styles20.sliderPlane,
             tabIndex: -1,
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { pointerEvents: "none", style: styles19.track }),
+              /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { pointerEvents: "none", style: styles20.track }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 reactNative.View,
                 {
                   pointerEvents: "none",
                   style: [
-                    styles19.activeTrack,
+                    styles20.activeTrack,
                     {
                       left: TRACK_HORIZONTAL_INSET + fromOffset,
                       width: toOffset - fromOffset + THUMB_SIZE2
@@ -5491,9 +5692,9 @@ var Range = react.forwardRef(function Range2({
                   onAccessibilityAction: (event) => handleAccessibilityAction(event, effectiveFrom, updateFromInput),
                   pointerEvents: disabled ? "none" : "auto",
                   style: [
-                    styles19.thumb,
-                    reactNative.Platform.OS === "web" && styles19.thumbWeb,
-                    focusedThumb === "from" && reactNative.Platform.OS === "web" && styles19.thumbFocusedWeb,
+                    styles20.thumb,
+                    reactNative.Platform.OS === "web" && styles20.thumbWeb,
+                    focusedThumb === "from" && reactNative.Platform.OS === "web" && styles20.thumbFocusedWeb,
                     { left: TRACK_HORIZONTAL_INSET + fromOffset }
                   ],
                   tabIndex: disabled ? -1 : 0
@@ -5533,9 +5734,9 @@ var Range = react.forwardRef(function Range2({
                   onAccessibilityAction: (event) => handleAccessibilityAction(event, effectiveTo, updateToInput),
                   pointerEvents: disabled ? "none" : "auto",
                   style: [
-                    styles19.thumb,
-                    reactNative.Platform.OS === "web" && styles19.thumbWeb,
-                    focusedThumb === "to" && reactNative.Platform.OS === "web" && styles19.thumbFocusedWeb,
+                    styles20.thumb,
+                    reactNative.Platform.OS === "web" && styles20.thumbWeb,
+                    focusedThumb === "to" && reactNative.Platform.OS === "web" && styles20.thumbFocusedWeb,
                     { left: TRACK_HORIZONTAL_INSET + toOffset }
                   ],
                   tabIndex: disabled ? -1 : 0
@@ -5544,7 +5745,7 @@ var Range = react.forwardRef(function Range2({
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles19.inputs, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles20.inputs, children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             RangeInput,
             {
@@ -5595,7 +5796,7 @@ function RangeInput({
   placeholder,
   value
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles19.inputField, focused && styles19.inputFieldFocused], children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles20.inputField, focused && styles20.inputFieldFocused], children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       reactNative.TextInput,
       {
@@ -5611,15 +5812,15 @@ function RangeInput({
         placeholder,
         placeholderTextColor: colors.grey150,
         returnKeyType: "done",
-        style: [styles19.input, reactNative.Platform.OS === "web" && styles19.inputWeb],
+        style: [styles20.input, reactNative.Platform.OS === "web" && styles20.inputWeb],
         tabIndex: disabled ? -1 : void 0,
         value
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles19.currencySlot, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles19.currency, children: currency }) })
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles20.currencySlot, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles20.currency, children: currency }) })
   ] });
 }
-var styles19 = reactNative.StyleSheet.create({
+var styles20 = reactNative.StyleSheet.create({
   root: {
     width: DEFAULT_WIDTH5,
     gap: 15,
@@ -5807,6 +6008,7 @@ exports.Toggle = Toggle;
 exports.TooltipArrowIcon = TooltipArrowIcon;
 exports.UserIcon = UserIcon;
 exports.UsersAltIcon = UsersAltIcon;
+exports.VerificationCodeInput = VerificationCodeInput;
 exports.VideoIcon = VideoIcon;
 exports.WhatsAppIcon = WhatsAppIcon;
 exports.avatarTypography = avatarTypography;