@scripso-homepad/ui 0.4.1 → 0.4.3

package/dist/index.cjs

@@ -2,12 +2,12 @@
 
 var react = require('react');
 var reactNative = require('react-native');
-var Svg = require('react-native-svg');
+var Svg5 = require('react-native-svg');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var Svg__default = /*#__PURE__*/_interopDefault(Svg);
+var Svg5__default = /*#__PURE__*/_interopDefault(Svg5);
 
 // src/components/Button.tsx
 
@@ -18,8 +18,8 @@ function ArrowUpRightIcon({
   color = "#08275d",
   strokeWidth = 2
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Svg__default.default, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
-    Svg.Path,
+  return /* @__PURE__ */ jsxRuntime.jsx(Svg5__default.default, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+    Svg5.Path,
     {
       d: ARROW_UP_RIGHT_PATH,
       stroke: color,
@@ -467,9 +467,9 @@ function EyeIcon({
   color = "#c7cdd1",
   strokeWidth = 2
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(Svg__default.default, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Svg5__default.default, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      Svg.Path,
+      Svg5.Path,
       {
         d: EYE_OPEN_OUTLINE_PATH,
         stroke: color,
@@ -479,7 +479,7 @@ function EyeIcon({
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      Svg.Path,
+      Svg5.Path,
       {
         d: EYE_OPEN_PUPIL_PATH,
         stroke: color,
@@ -495,8 +495,8 @@ function EyeOffIcon({
   color = "#c7cdd1",
   strokeWidth = 2
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Svg__default.default, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
-    Svg.Path,
+  return /* @__PURE__ */ jsxRuntime.jsx(Svg5__default.default, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+    Svg5.Path,
     {
       d: EYE_OFF_PATH,
       stroke: color,
@@ -510,6 +510,9 @@ var INPUT_HEIGHT = 52;
 var INPUT_ICON_SIZE = 20;
 var INPUT_ICON_GAP = 10;
 var INPUT_OUTLINE_WIDTH = 2;
+var INPUT_INNER_LINE_HEIGHT = 20;
+var INPUT_WEB_INNER_LINE_HEIGHT = 22;
+var INPUT_WEB_VERTICAL_PADDING = 14;
 function resolveInputVisualState({
   focused = false,
   error = false,
@@ -603,15 +606,19 @@ var inputFieldMetrics = reactNative.StyleSheet.create({
     borderRadius: radii.lg,
     padding: 16,
     gap: INPUT_ICON_GAP,
-    ...reactNative.Platform.OS === "web" ? { boxSizing: "border-box" } : null
+    ...reactNative.Platform.OS === "web" ? {
+      boxSizing: "border-box",
+      paddingVertical: INPUT_WEB_VERTICAL_PADDING,
+      paddingHorizontal: 16
+    } : null
   },
   input: {
     flex: 1,
-    alignSelf: "stretch",
+    minWidth: 0,
     fontFamily: fonts.sans,
     fontSize: fontSize.md,
     fontWeight: fontWeight.medium,
-    lineHeight: reactNative.Platform.OS === "web" ? fontSize.md : 20,
+    lineHeight: INPUT_INNER_LINE_HEIGHT,
     paddingVertical: 0,
     paddingHorizontal: 0,
     margin: 0,
@@ -619,10 +626,12 @@ var inputFieldMetrics = reactNative.StyleSheet.create({
     backgroundColor: colors.transparent,
     ...reactNative.Platform.OS === "android" ? { includeFontPadding: false } : null,
     ...reactNative.Platform.OS === "web" ? {
-      height: "100%",
-      minHeight: 0,
+      alignSelf: "center",
+      lineHeight: INPUT_WEB_INNER_LINE_HEIGHT,
       outlineStyle: "none"
-    } : null
+    } : {
+      alignSelf: "stretch"
+    }
   }
 });
 function Label({
@@ -676,6 +685,7 @@ function Input({
   leftIcon,
   rightIcon,
   error,
+  invalid,
   hint,
   containerStyle,
   style,
@@ -704,11 +714,12 @@ function Input({
   useApplyWebClassName(inputRef, inputClassName);
   useApplyWebClassName(helperRef, error ? errorClassName : hintClassName);
   const isDisabled = editable === false;
+  const hasError = Boolean(error) || Boolean(invalid);
   const passwordToggleEnabled = secureTextEntry === true && showPasswordToggle !== false && rightIcon == null;
   const effectiveSecureTextEntry = passwordToggleEnabled ? !passwordVisible : secureTextEntry;
   const visualState = resolveInputVisualState({
     focused,
-    error: Boolean(error),
+    error: hasError,
     disabled: isDisabled
   });
   const fieldStyles = getInputFieldStyles(visualState);
@@ -806,354 +817,643 @@ var styles3 = reactNative.StyleSheet.create({
   }
 });
 
-// src/data/countries.ts
-var defaultCountry = {
-  code: "AM",
-  name: "Armenia",
-  dialCode: "+374"
-};
-var countries = [
-  defaultCountry,
-  { code: "AF", name: "Afghanistan", dialCode: "+93" },
-  { code: "AL", name: "Albania", dialCode: "+355" },
-  { code: "DZ", name: "Algeria", dialCode: "+213" },
-  { code: "AR", name: "Argentina", dialCode: "+54" },
-  { code: "AU", name: "Australia", dialCode: "+61" },
-  { code: "AT", name: "Austria", dialCode: "+43" },
-  { code: "AZ", name: "Azerbaijan", dialCode: "+994" },
-  { code: "BH", name: "Bahrain", dialCode: "+973" },
-  { code: "BY", name: "Belarus", dialCode: "+375" },
-  { code: "BE", name: "Belgium", dialCode: "+32" },
-  { code: "BR", name: "Brazil", dialCode: "+55" },
-  { code: "BG", name: "Bulgaria", dialCode: "+359" },
-  { code: "CA", name: "Canada", dialCode: "+1" },
-  { code: "CL", name: "Chile", dialCode: "+56" },
-  { code: "CN", name: "China", dialCode: "+86" },
-  { code: "CO", name: "Colombia", dialCode: "+57" },
-  { code: "HR", name: "Croatia", dialCode: "+385" },
-  { code: "CY", name: "Cyprus", dialCode: "+357" },
-  { code: "CZ", name: "Czech Republic", dialCode: "+420" },
-  { code: "DK", name: "Denmark", dialCode: "+45" },
-  { code: "EG", name: "Egypt", dialCode: "+20" },
-  { code: "EE", name: "Estonia", dialCode: "+372" },
-  { code: "FI", name: "Finland", dialCode: "+358" },
-  { code: "FR", name: "France", dialCode: "+33" },
-  { code: "GE", name: "Georgia", dialCode: "+995" },
-  { code: "DE", name: "Germany", dialCode: "+49" },
-  { code: "GR", name: "Greece", dialCode: "+30" },
-  { code: "HK", name: "Hong Kong", dialCode: "+852" },
-  { code: "HU", name: "Hungary", dialCode: "+36" },
-  { code: "IN", name: "India", dialCode: "+91" },
-  { code: "ID", name: "Indonesia", dialCode: "+62" },
-  { code: "IR", name: "Iran", dialCode: "+98" },
-  { code: "IQ", name: "Iraq", dialCode: "+964" },
-  { code: "IE", name: "Ireland", dialCode: "+353" },
-  { code: "IL", name: "Israel", dialCode: "+972" },
-  { code: "IT", name: "Italy", dialCode: "+39" },
-  { code: "JP", name: "Japan", dialCode: "+81" },
-  { code: "JO", name: "Jordan", dialCode: "+962" },
-  { code: "KZ", name: "Kazakhstan", dialCode: "+7" },
-  { code: "KW", name: "Kuwait", dialCode: "+965" },
-  { code: "LV", name: "Latvia", dialCode: "+371" },
-  { code: "LB", name: "Lebanon", dialCode: "+961" },
-  { code: "LT", name: "Lithuania", dialCode: "+370" },
-  { code: "LU", name: "Luxembourg", dialCode: "+352" },
-  { code: "MY", name: "Malaysia", dialCode: "+60" },
-  { code: "MX", name: "Mexico", dialCode: "+52" },
-  { code: "MD", name: "Moldova", dialCode: "+373" },
-  { code: "NL", name: "Netherlands", dialCode: "+31" },
-  { code: "NZ", name: "New Zealand", dialCode: "+64" },
-  { code: "NG", name: "Nigeria", dialCode: "+234" },
-  { code: "NO", name: "Norway", dialCode: "+47" },
-  { code: "PK", name: "Pakistan", dialCode: "+92" },
-  { code: "PS", name: "Palestine", dialCode: "+970" },
-  { code: "PH", name: "Philippines", dialCode: "+63" },
-  { code: "PL", name: "Poland", dialCode: "+48" },
-  { code: "PT", name: "Portugal", dialCode: "+351" },
-  { code: "QA", name: "Qatar", dialCode: "+974" },
-  { code: "RO", name: "Romania", dialCode: "+40" },
-  { code: "RU", name: "Russia", dialCode: "+7" },
-  { code: "SA", name: "Saudi Arabia", dialCode: "+966" },
-  { code: "RS", name: "Serbia", dialCode: "+381" },
-  { code: "SG", name: "Singapore", dialCode: "+65" },
-  { code: "SK", name: "Slovakia", dialCode: "+421" },
-  { code: "SI", name: "Slovenia", dialCode: "+386" },
-  { code: "ZA", name: "South Africa", dialCode: "+27" },
-  { code: "KR", name: "South Korea", dialCode: "+82" },
-  { code: "ES", name: "Spain", dialCode: "+34" },
-  { code: "SE", name: "Sweden", dialCode: "+46" },
-  { code: "CH", name: "Switzerland", dialCode: "+41" },
-  { code: "SY", name: "Syria", dialCode: "+963" },
-  { code: "TW", name: "Taiwan", dialCode: "+886" },
-  { code: "TH", name: "Thailand", dialCode: "+66" },
-  { code: "TR", name: "Turkey", dialCode: "+90" },
-  { code: "UA", name: "Ukraine", dialCode: "+380" },
-  { code: "AE", name: "United Arab Emirates", dialCode: "+971" },
-  { code: "GB", name: "United Kingdom", dialCode: "+44" },
-  { code: "US", name: "United States", dialCode: "+1" },
-  { code: "UZ", name: "Uzbekistan", dialCode: "+998" },
-  { code: "VN", name: "Vietnam", dialCode: "+84" }
-];
-function findCountry(code) {
-  return countries.find((country) => country.code === code) ?? defaultCountry;
-}
-
 // src/icons/chevronDownPath.ts
 var CHEVRON_DOWN_PATH = "M4 6L8 10L12 6";
+var CHEVRON_DOWN_PATH_20 = "M5 7.5L10 12.5L15 7.5";
 function ChevronDownIcon({
   size = 16,
   color = "#dadde0",
   strokeWidth = 2
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Svg__default.default, { width: size, height: size, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
-    Svg.Path,
+  const useLarge = size >= 20;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Svg5__default.default,
     {
-      d: CHEVRON_DOWN_PATH,
-      stroke: color,
-      strokeWidth,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
+      width: size,
+      height: size,
+      viewBox: useLarge ? "0 0 20 20" : "0 0 16 16",
+      fill: "none",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        Svg5.Path,
+        {
+          d: useLarge ? CHEVRON_DOWN_PATH_20 : CHEVRON_DOWN_PATH,
+          stroke: color,
+          strokeWidth,
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
     }
-  ) });
-}
-
-// src/utils/countryFlag.ts
-function countryCodeToFlagEmoji(code) {
-  const upper = code.trim().toUpperCase();
-  if (upper.length !== 2) return "";
-  return String.fromCodePoint(
-    ...upper.split("").map((char) => 127462 - 65 + char.charCodeAt(0))
   );
 }
+var SELECT_HEIGHT = 52;
+var SELECT_PADDING = 16;
+var SELECT_INNER_GAP = 10;
+var SELECT_ICON_SIZE = 20;
+var SELECT_LABEL_GAP = spacing.sm;
+var SELECT_DROPDOWN_GAP = spacing.sm;
+var SELECT_DROPDOWN_PADDING = spacing.sm;
+var SELECT_DROPDOWN_MAX_HEIGHT = 317;
+var SELECT_OPTION_HEIGHT = 43;
+var SELECT_OPTION_GAP = spacing.sm;
+var SELECT_CHEVRON_SIZE = 20;
+var SELECT_CHEVRON_COLOR = colors.stormGray150;
+var SELECT_CHEVRON_ROTATION_MS = 200;
+var selectLabelTypography = {
+  fontFamily: fonts.sans,
+  fontSize: fontSize.sm,
+  fontWeight: fontWeight.medium,
+  lineHeight: fontSize.sm,
+  letterSpacing: 0,
+  color: colors.slateBlue
+};
+var selectValueTypography = {
+  fontFamily: fonts.sans,
+  fontSize: fontSize.md,
+  fontWeight: fontWeight.regular,
+  lineHeight: fontSize.md,
+  letterSpacing: 0,
+  textAlign: "left"
+};
+var INPUT_OUTLINE_WIDTH2 = 2;
+function createOutlineStyle2(ringColor) {
+  return {
+    borderRadius: radii.lg + INPUT_OUTLINE_WIDTH2,
+    borderWidth: INPUT_OUTLINE_WIDTH2,
+    borderColor: ringColor,
+    padding: 0,
+    backgroundColor: colors.transparent,
+    width: "100%",
+    alignSelf: "stretch",
+    ...reactNative.Platform.OS !== "web" ? { overflow: "hidden" } : null
+  };
+}
+var defaultOutline2 = createOutlineStyle2(colors.transparent);
+function getSelectFieldStyles(state) {
+  const containerBase = {
+    borderRadius: radii.lg,
+    ...reactNative.Platform.OS !== "web" ? { overflow: "hidden" } : null
+  };
+  const valueBase = {
+    ...selectValueTypography,
+    color: colors.slateBlue
+  };
+  switch (state) {
+    case "disabled":
+      return {
+        outline: defaultOutline2,
+        container: {
+          ...containerBase,
+          borderWidth: 1,
+          borderColor: colors.stormGray50,
+          backgroundColor: colors.stormGray50
+        },
+        value: { ...valueBase, color: colors.stormGray300 },
+        placeholder: colors.stormGray300,
+        icon: colors.stormGray150
+      };
+    case "error":
+      return {
+        outline: createOutlineStyle2(colors.inputOutlineError),
+        container: {
+          ...containerBase,
+          borderWidth: 1,
+          borderColor: colors.inputError,
+          backgroundColor: colors.white
+        },
+        value: { ...valueBase, color: colors.inputError },
+        placeholder: colors.stormGray200,
+        icon: colors.inputError
+      };
+    case "focused":
+      return {
+        outline: createOutlineStyle2(colors.inputOutlineFocus),
+        container: {
+          ...containerBase,
+          borderWidth: 1,
+          borderColor: colors.navy,
+          backgroundColor: colors.white
+        },
+        value: valueBase,
+        placeholder: colors.stormGray200,
+        icon: colors.navy
+      };
+    default:
+      return {
+        outline: defaultOutline2,
+        container: {
+          ...containerBase,
+          borderWidth: 1,
+          borderColor: colors.stormGray50,
+          backgroundColor: colors.white
+        },
+        value: valueBase,
+        placeholder: colors.stormGray200,
+        icon: colors.stormGray150
+      };
+  }
+}
+var selectFieldMetrics = reactNative.StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    height: SELECT_HEIGHT,
+    minHeight: SELECT_HEIGHT,
+    maxHeight: SELECT_HEIGHT,
+    borderRadius: radii.lg,
+    padding: SELECT_PADDING,
+    gap: SELECT_INNER_GAP,
+    ...reactNative.Platform.OS === "web" ? {
+      boxSizing: "border-box"
+    } : null
+  },
+  value: {
+    flex: 1,
+    minWidth: 0,
+    ...selectValueTypography,
+    paddingVertical: 0,
+    paddingHorizontal: 0,
+    margin: 0,
+    ...reactNative.Platform.OS === "android" ? { includeFontPadding: false } : null,
+    ...reactNative.Platform.OS === "web" ? {
+      outlineStyle: "none"
+    } : null
+  }
+});
+var selectDropdownMetrics = reactNative.StyleSheet.create({
+  menu: {
+    borderRadius: radii.lg,
+    borderWidth: 1,
+    borderColor: colors.stormGray50,
+    backgroundColor: colors.white,
+    padding: SELECT_DROPDOWN_PADDING,
+    overflow: "hidden"
+  },
+  option: {
+    width: "100%",
+    height: SELECT_OPTION_HEIGHT,
+    minHeight: SELECT_OPTION_HEIGHT,
+    maxHeight: SELECT_OPTION_HEIGHT,
+    paddingTop: 12,
+    paddingRight: spacing.sm,
+    paddingBottom: 12,
+    paddingLeft: spacing.sm,
+    justifyContent: "center",
+    alignItems: "flex-start"
+  },
+  optionLabel: {
+    fontFamily: fonts.sans,
+    fontSize: fontSize.md,
+    fontWeight: fontWeight.regular,
+    lineHeight: fontSize.md,
+    letterSpacing: 0,
+    textAlign: "left",
+    color: colors.slateBlue,
+    width: "100%"
+  },
+  optionLabelSelected: {
+    fontWeight: fontWeight.medium,
+    color: colors.slateBlue
+  },
+  optionSelected: {
+    opacity: 1,
+    borderRadius: radii.sm,
+    paddingTop: 12,
+    paddingRight: spacing.sm,
+    paddingBottom: 12,
+    paddingLeft: spacing.sm,
+    backgroundColor: colors.countrySelectorSelectedBg
+  },
+  optionHighlighted: {
+    backgroundColor: colors.stormGray0
+  }
+});
+function resolveSelectDropdownHeight(optionCount) {
+  const contentHeight = optionCount * SELECT_OPTION_HEIGHT + Math.max(0, optionCount - 1) * SELECT_OPTION_GAP + SELECT_DROPDOWN_PADDING * 2;
+  return Math.min(contentHeight, SELECT_DROPDOWN_MAX_HEIGHT);
+}
+function resolveSelectDropdownTop(anchor, dropdownHeight) {
+  const windowHeight = reactNative.Dimensions.get("window").height;
+  const spaceBelow = windowHeight - (anchor.y + anchor.height + SELECT_DROPDOWN_GAP);
+  const spaceAbove = anchor.y - SELECT_DROPDOWN_GAP;
+  const topBelow = anchor.y + anchor.height + SELECT_DROPDOWN_GAP;
+  const topAbove = anchor.y - SELECT_DROPDOWN_GAP - dropdownHeight;
+  if (spaceBelow >= dropdownHeight) {
+    return topBelow;
+  }
+  if (spaceAbove >= dropdownHeight) {
+    return topAbove;
+  }
+  if (spaceAbove > spaceBelow) {
+    return Math.max(0, topAbove);
+  }
+  return Math.max(0, Math.min(topBelow, windowHeight - dropdownHeight));
+}
 var COUNTRY_DROPDOWN_SCROLL_CLASS = "hp-country-dropdown-scroll";
-var STYLE_ID = "hp-country-dropdown-scroll-styles";
-var countryDropdownScrollCss = `
-  .${COUNTRY_DROPDOWN_SCROLL_CLASS} {
+var SELECT_DROPDOWN_SCROLL_CLASS = "hp-select-dropdown-scroll";
+var STYLE_ID = "hp-dropdown-scroll-styles";
+function createDropdownScrollCss(className) {
+  return `
+  .${className} {
     scrollbar-width: thin;
     scrollbar-color: ${colors.stormGray300} transparent;
     overflow-y: auto;
   }
 
-  .${COUNTRY_DROPDOWN_SCROLL_CLASS}::-webkit-scrollbar {
+  .${className}::-webkit-scrollbar {
     width: 4px;
+    -webkit-appearance: none;
+    appearance: none;
   }
 
-  .${COUNTRY_DROPDOWN_SCROLL_CLASS}::-webkit-scrollbar-corner {
+  .${className}::-webkit-scrollbar-corner {
     background: transparent;
   }
 
-  .${COUNTRY_DROPDOWN_SCROLL_CLASS}::-webkit-scrollbar-button,
-  .${COUNTRY_DROPDOWN_SCROLL_CLASS}::-webkit-scrollbar-button:single-button,
-  .${COUNTRY_DROPDOWN_SCROLL_CLASS}::-webkit-scrollbar-button:vertical:start:decrement,
-  .${COUNTRY_DROPDOWN_SCROLL_CLASS}::-webkit-scrollbar-button:vertical:end:increment {
+  .${className}::-webkit-scrollbar-button,
+  .${className}::-webkit-scrollbar-button:single-button,
+  .${className}::-webkit-scrollbar-button:double-button,
+  .${className}::-webkit-scrollbar-button:horizontal:decrement,
+  .${className}::-webkit-scrollbar-button:horizontal:increment,
+  .${className}::-webkit-scrollbar-button:horizontal:start:decrement,
+  .${className}::-webkit-scrollbar-button:horizontal:end:increment,
+  .${className}::-webkit-scrollbar-button:vertical:decrement,
+  .${className}::-webkit-scrollbar-button:vertical:increment,
+  .${className}::-webkit-scrollbar-button:vertical:start:decrement,
+  .${className}::-webkit-scrollbar-button:vertical:end:increment,
+  .${className}::-webkit-scrollbar-button:start:decrement,
+  .${className}::-webkit-scrollbar-button:end:increment,
+  .${className}::-webkit-scrollbar-button:decrement,
+  .${className}::-webkit-scrollbar-button:increment {
     display: none;
     width: 0;
     height: 0;
+    max-width: 0;
+    max-height: 0;
+    min-width: 0;
+    min-height: 0;
+    padding: 0;
+    margin: 0;
+    border: 0;
+    background: transparent;
     -webkit-appearance: none;
     appearance: none;
   }
 
-  .${COUNTRY_DROPDOWN_SCROLL_CLASS}::-webkit-scrollbar-track {
+  .${className}::-webkit-scrollbar-track {
     background: transparent;
   }
 
-  .${COUNTRY_DROPDOWN_SCROLL_CLASS}::-webkit-scrollbar-thumb {
+  .${className}::-webkit-scrollbar-thumb {
     background-color: ${colors.stormGray300};
     border-radius: 9999px;
   }
 `;
-function ensureCountryDropdownScrollStyles() {
+}
+var dropdownScrollCss = [
+  createDropdownScrollCss(COUNTRY_DROPDOWN_SCROLL_CLASS),
+  createDropdownScrollCss(SELECT_DROPDOWN_SCROLL_CLASS)
+].join("\n");
+function ensureDropdownScrollStyles() {
   if (reactNative.Platform.OS !== "web" || typeof document === "undefined") return;
   if (document.getElementById(STYLE_ID)) return;
   const style = document.createElement("style");
   style.id = STYLE_ID;
-  style.textContent = countryDropdownScrollCss;
+  style.textContent = dropdownScrollCss;
   document.head.appendChild(style);
 }
-var DROPDOWN_GAP = 10;
-var DROPDOWN_HEIGHT = 186;
-var DROPDOWN_PADDING = 8;
-var OPTION_GAP = 10;
-var OPTION_HEIGHT = 35;
-var TRIGGER_HEIGHT = 52;
-var CHEVRON_SIZE = 16;
-function resolveDropdownTop(anchor) {
-  const windowHeight = reactNative.Dimensions.get("window").height;
-  const topBelow = anchor.y + anchor.height + DROPDOWN_GAP;
-  const topAbove = anchor.y - DROPDOWN_GAP - DROPDOWN_HEIGHT;
-  const fitsBelow = topBelow + DROPDOWN_HEIGHT <= windowHeight;
-  if (fitsBelow) return topBelow;
-  if (topAbove >= 0) return topAbove;
-  return Math.max(0, Math.min(topBelow, windowHeight - DROPDOWN_HEIGHT));
+function ensureCountryDropdownScrollStyles() {
+  ensureDropdownScrollStyles();
 }
-function CountryCodeSelector({
-  value = defaultCountry.code,
-  onValueChange,
-  options = countries,
+function ensureSelectDropdownScrollStyles() {
+  ensureDropdownScrollStyles();
+}
+
+// src/utils/formatMultiSelectDisplay.ts
+var MULTI_SELECT_SUFFIX = " ... + ";
+var MULTI_SELECT_SUFFIX_UNIT = " items";
+function estimateTextWidth(text, size = fontSize.md) {
+  return text.length * size * 0.58;
+}
+function formatMultiSelectDisplay(labels, maxWidth, textSize = fontSize.md) {
+  if (labels.length === 0) {
+    return "";
+  }
+  if (labels.length === 1) {
+    return labels[0];
+  }
+  const fits = (text) => estimateTextWidth(text, textSize) <= maxWidth;
+  const fullText = labels.join(", ");
+  if (fits(fullText)) {
+    return fullText;
+  }
+  for (let visibleCount = labels.length - 1; visibleCount >= 1; visibleCount -= 1) {
+    const hiddenCount = labels.length - visibleCount;
+    const truncatedText = `${labels.slice(0, visibleCount).join(", ")}${MULTI_SELECT_SUFFIX}${hiddenCount}${MULTI_SELECT_SUFFIX_UNIT}`;
+    if (fits(truncatedText)) {
+      return truncatedText;
+    }
+  }
+  return `... + ${labels.length}${MULTI_SELECT_SUFFIX_UNIT}`;
+}
+function resolveSelectedLabels(options, selectedValues) {
+  if (selectedValues.length === 0) {
+    return [];
+  }
+  const labelByValue = new Map(options.map((option) => [option.value, option.label]));
+  return selectedValues.map((value) => labelByValue.get(value)).filter((label) => Boolean(label));
+}
+function renderSelectIcon(icon, color) {
+  if (!icon) return null;
+  if (react.isValidElement(icon)) {
+    return react.cloneElement(icon, {
+      size: icon.props.size ?? SELECT_ICON_SIZE,
+      color: icon.props.color ?? color
+    });
+  }
+  return icon;
+}
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? react.useEffect : react.useLayoutEffect;
+function normalizeSelectedValues(multiple, value) {
+  if (multiple) {
+    if (Array.isArray(value)) {
+      return value;
+    }
+    return value ? [value] : [];
+  }
+  return typeof value === "string" && value.length > 0 ? [value] : [];
+}
+function Select({
+  label,
+  placeholder = "placeholder",
+  value,
+  onValueChange,
+  options,
+  leftIcon,
+  multiple = false,
   disabled = false,
-  style,
-  className
+  error,
+  invalid,
+  hint,
+  containerStyle,
+  className,
+  fieldClassName,
+  menuClassName,
+  labelClassName,
+  errorClassName,
+  hintClassName
 }) {
   const wrapperRef = react.useRef(null);
   const triggerRef = react.useRef(null);
+  const menuRef = react.useRef(null);
   const scrollRef = react.useRef(null);
+  const helperRef = react.useRef(null);
+  const chevronRotation = react.useRef(new reactNative.Animated.Value(0)).current;
   const [open, setOpen] = react.useState(false);
   const [anchor, setAnchor] = react.useState(null);
+  const [highlightedIndex, setHighlightedIndex] = react.useState(-1);
+  const [valueContainerWidth, setValueContainerWidth] = react.useState(0);
   useApplyWebClassName(wrapperRef, className);
-  useApplyWebClassName(
-    scrollRef,
-    COUNTRY_DROPDOWN_SCROLL_CLASS,
-    open && Boolean(anchor)
-  );
-  react.useLayoutEffect(() => {
-    ensureCountryDropdownScrollStyles();
+  useApplyWebClassName(triggerRef, fieldClassName);
+  useApplyWebClassName(menuRef, menuClassName);
+  useApplyWebClassName(scrollRef, SELECT_DROPDOWN_SCROLL_CLASS, open && Boolean(anchor));
+  useApplyWebClassName(helperRef, error ? errorClassName : hintClassName);
+  useIsomorphicLayoutEffect(() => {
+    ensureSelectDropdownScrollStyles();
   }, []);
-  const selected = findCountry(value);
-  const textColor = disabled ? colors.stormGray200 : colors.slateBlue;
-  function closeDropdown() {
+  react.useEffect(() => {
+    reactNative.Animated.timing(chevronRotation, {
+      toValue: open ? 1 : 0,
+      duration: SELECT_CHEVRON_ROTATION_MS,
+      easing: reactNative.Easing.out(reactNative.Easing.ease),
+      useNativeDriver: true
+    }).start();
+  }, [chevronRotation, open]);
+  const chevronRotate = chevronRotation.interpolate({
+    inputRange: [0, 1],
+    outputRange: ["0deg", "180deg"]
+  });
+  const hasError = Boolean(error) || Boolean(invalid);
+  const visualState = resolveInputVisualState({
+    focused: open,
+    error: hasError,
+    disabled
+  });
+  const fieldStyles = getSelectFieldStyles(visualState);
+  const selectedValues = react.useMemo(
+    () => normalizeSelectedValues(multiple, value),
+    [multiple, value]
+  );
+  const selectedValueSet = react.useMemo(() => new Set(selectedValues), [selectedValues]);
+  const selectedLabels = react.useMemo(
+    () => resolveSelectedLabels(options, selectedValues),
+    [options, selectedValues]
+  );
+  const selectableOptions = react.useMemo(
+    () => options.filter((option) => !option.disabled),
+    [options]
+  );
+  const selectableIndexByValue = react.useMemo(
+    () => new Map(
+      selectableOptions.map((option, index) => [option.value, index])
+    ),
+    [selectableOptions]
+  );
+  const displayLabel = react.useMemo(() => {
+    if (selectedLabels.length === 0) {
+      return placeholder;
+    }
+    if (!multiple) {
+      return selectedLabels[0];
+    }
+    if (valueContainerWidth <= 0) {
+      return selectedLabels.join(", ");
+    }
+    return formatMultiSelectDisplay(selectedLabels, valueContainerWidth);
+  }, [multiple, placeholder, selectedLabels, valueContainerWidth]);
+  const isPlaceholder = selectedLabels.length === 0;
+  const dropdownHeight = resolveSelectDropdownHeight(options.length);
+  const helperMessage = error ?? hint;
+  function closeMenu() {
     setOpen(false);
     setAnchor(null);
+    setHighlightedIndex(-1);
   }
-  function handleOpen() {
-    if (disabled) return;
+  function openMenu() {
+    if (disabled || selectableOptions.length === 0) {
+      return;
+    }
     triggerRef.current?.measureInWindow((x, y, width, height) => {
+      const selectedIndex = selectableOptions.findIndex(
+        (option) => selectedValueSet.has(option.value)
+      );
+      setHighlightedIndex(selectedIndex >= 0 ? selectedIndex : 0);
       setAnchor({ x, y, width, height });
       setOpen(true);
     });
   }
-  function handleSelect(code) {
-    onValueChange?.(code);
-    closeDropdown();
+  function handleSelect(nextValue) {
+    if (multiple) {
+      const nextValues = selectedValues.includes(nextValue) ? selectedValues.filter((item) => item !== nextValue) : [...selectedValues, nextValue];
+      onValueChange?.(nextValues);
+      return;
+    }
+    onValueChange?.(nextValue);
+    closeMenu();
   }
-  const dropdownTop = anchor ? resolveDropdownTop(anchor) : 0;
-  const optionList = options.map((item, index) => {
-    const isSelected = item.code === selected.code;
+  const optionList = options.map((option, index) => {
+    const selectableIndex = selectableIndexByValue.get(option.value) ?? -1;
+    const isSelected = selectedValueSet.has(option.value);
+    const isHighlighted = selectableIndex === highlightedIndex;
     const isLast = index === options.length - 1;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       reactNative.Pressable,
       {
         accessibilityRole: "button",
-        onPress: () => handleSelect(item.code),
+        accessibilityState: { disabled: option.disabled, selected: isSelected },
+        disabled: option.disabled,
+        onPress: () => {
+          if (!option.disabled) {
+            handleSelect(option.value);
+          }
+        },
+        onHoverIn: () => {
+          if (!option.disabled && selectableIndex >= 0) {
+            setHighlightedIndex(selectableIndex);
+          }
+        },
         style: [
-          styles4.option,
-          isSelected && styles4.optionSelected,
-          !isLast && styles4.optionSpacing
+          selectDropdownMetrics.option,
+          isSelected && selectDropdownMetrics.optionSelected,
+          isHighlighted && !isSelected && !option.disabled ? selectDropdownMetrics.optionHighlighted : null,
+          !isLast && styles4.optionSpacing,
+          option.disabled && styles4.optionDisabled
         ],
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles4.flag, children: countryCodeToFlagEmoji(item.code) }),
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles4.optionDialCode, children: item.dialCode })
-        ]
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Text,
+          {
+            style: [
+              selectDropdownMetrics.optionLabel,
+              isSelected && selectDropdownMetrics.optionLabelSelected,
+              option.disabled && styles4.optionLabelDisabled
+            ],
+            numberOfLines: 1,
+            children: option.label
+          }
+        )
       },
-      item.code
+      option.value
     );
   });
-  const dropdownList = /* @__PURE__ */ jsxRuntime.jsx(
-    reactNative.ScrollView,
-    {
-      ref: scrollRef,
-      style: styles4.dropdownScroll,
-      contentContainerStyle: styles4.dropdownContent,
-      keyboardShouldPersistTaps: "handled",
-      showsVerticalScrollIndicator: true,
-      bounces: false,
-      nestedScrollEnabled: true,
-      children: optionList
-    }
-  );
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ref: wrapperRef, style: [styles4.root, style], children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
+  const dropdownTop = anchor ? resolveSelectDropdownTop(anchor, dropdownHeight) : 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ref: wrapperRef, style: [styles4.wrapper, containerStyle], children: [
+    label ? /* @__PURE__ */ jsxRuntime.jsx(Label, { disabled, style: styles4.label, className: labelClassName, children: label }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: fieldStyles.outline, children: /* @__PURE__ */ jsxRuntime.jsxs(
       reactNative.Pressable,
       {
         ref: triggerRef,
         accessibilityRole: "button",
+        accessibilityState: { disabled, expanded: open },
         disabled,
-        onPress: handleOpen,
-        style: [
-          styles4.trigger,
-          disabled ? styles4.triggerDisabled : styles4.triggerEnabled,
-          reactNative.Platform.OS === "web" ? styles4.triggerWeb : null
-        ],
+        onPress: open ? closeMenu : openMenu,
+        style: [selectFieldMetrics.container, fieldStyles.container],
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles4.flag, children: countryCodeToFlagEmoji(selected.code) }),
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles4.dialCode, { color: textColor }], children: selected.dialCode }),
-          /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, { size: CHEVRON_SIZE, color: colors.stormGray100 })
+          leftIcon ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles4.iconSlot, children: renderSelectIcon(leftIcon, fieldStyles.icon) }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.View,
+            {
+              style: styles4.valueContainer,
+              onLayout: (event) => {
+                setValueContainerWidth(event.nativeEvent.layout.width);
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                reactNative.Text,
+                {
+                  style: [
+                    selectFieldMetrics.value,
+                    fieldStyles.value,
+                    isPlaceholder && { color: fieldStyles.placeholder }
+                  ],
+                  numberOfLines: 1,
+                  children: displayLabel
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.Animated.View,
+            {
+              style: [styles4.iconSlot, { transform: [{ rotate: chevronRotate }] }],
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                ChevronDownIcon,
+                {
+                  size: SELECT_CHEVRON_SIZE,
+                  color: disabled ? colors.stormGray200 : SELECT_CHEVRON_COLOR
+                }
+              )
+            }
+          )
         ]
       }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      reactNative.Modal,
+    ) }),
+    helperMessage ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { ref: helperRef, style: error ? styles4.error : styles4.hint, children: helperMessage }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Modal, { visible: open, transparent: true, animationType: "fade", onRequestClose: closeMenu, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Pressable, { style: styles4.overlay, onPress: closeMenu, children: anchor ? /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.View,
       {
-        visible: open,
-        transparent: true,
-        animationType: "fade",
-        onRequestClose: closeDropdown,
-        children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Pressable, { style: styles4.overlay, onPress: closeDropdown, children: anchor ? /* @__PURE__ */ jsxRuntime.jsx(
-          reactNative.View,
+        ref: menuRef,
+        style: [
+          selectDropdownMetrics.menu,
+          styles4.dropdown,
           {
-            style: [
-              styles4.dropdown,
-              {
-                top: dropdownTop,
-                left: anchor.x,
-                width: anchor.width
-              }
-            ],
-            children: dropdownList
+            top: dropdownTop,
+            left: anchor.x,
+            width: anchor.width,
+            height: dropdownHeight
           }
-        ) : null })
+        ],
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.ScrollView,
+          {
+            ref: scrollRef,
+            style: styles4.dropdownScroll,
+            contentContainerStyle: styles4.dropdownContent,
+            keyboardShouldPersistTaps: "handled",
+            showsVerticalScrollIndicator: true,
+            bounces: false,
+            nestedScrollEnabled: true,
+            children: optionList
+          }
+        )
       }
-    )
+    ) : null }) })
   ] });
 }
 var styles4 = reactNative.StyleSheet.create({
-  root: {
-    alignSelf: "flex-start",
-    flexShrink: 0
-  },
-  trigger: {
-    flexDirection: "row",
-    alignItems: "center",
-    alignSelf: "flex-start",
-    flexGrow: 0,
-    flexShrink: 0,
-    height: TRIGGER_HEIGHT,
-    borderRadius: radii.lg,
-    borderWidth: 1,
-    padding: spacing.lg,
-    gap: spacing.sm
-  },
-  triggerEnabled: {
-    borderColor: colors.stormGray50,
-    backgroundColor: colors.white
-  },
-  triggerDisabled: {
-    borderColor: colors.stormGray50,
-    backgroundColor: colors.stormGray50
+  wrapper: {
+    width: "100%",
+    gap: SELECT_LABEL_GAP
   },
-  triggerWeb: {
-    width: "max-content"
+  label: {
+    ...selectLabelTypography
   },
-  flag: {
-    fontSize: 18,
-    lineHeight: 22
+  iconSlot: {
+    width: SELECT_ICON_SIZE,
+    height: SELECT_ICON_SIZE,
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0
   },
-  dialCode: {
-    fontSize: fontSize.md,
-    fontWeight: fontWeight.medium
+  valueContainer: {
+    flex: 1,
+    minWidth: 0,
+    justifyContent: "center"
   },
   overlay: {
     flex: 1,
-    backgroundColor: "transparent"
+    backgroundColor: colors.transparent
   },
   dropdown: {
-    position: "absolute",
-    height: DROPDOWN_HEIGHT,
-    borderRadius: radii.lg,
-    borderWidth: 1,
-    borderColor: colors.stormGray50,
-    backgroundColor: colors.white,
-    padding: DROPDOWN_PADDING,
-    overflow: "hidden"
+    position: "absolute"
   },
   dropdownScroll: {
     flex: 1
@@ -1161,160 +1461,1760 @@ var styles4 = reactNative.StyleSheet.create({
   dropdownContent: {
     flexGrow: 1
   },
-  option: {
-    flexDirection: "row",
-    alignItems: "center",
-    height: OPTION_HEIGHT,
-    borderRadius: radii.sm,
-    padding: spacing.sm,
-    gap: spacing.sm
-  },
   optionSpacing: {
-    marginBottom: OPTION_GAP
+    marginBottom: SELECT_OPTION_GAP
   },
-  optionSelected: {
-    backgroundColor: colors.countrySelectorSelectedBg
+  optionDisabled: {
+    opacity: 0.5
   },
-  optionDialCode: {
-    fontFamily: fonts.sans,
-    fontSize: fontSize.md,
-    fontWeight: fontWeight.regular,
-    lineHeight: fontSize.md,
-    letterSpacing: 0,
-    textAlign: "center",
-    color: colors.slateBlue
+  optionLabelDisabled: {
+    color: colors.stormGray300
+  },
+  error: {
+    fontSize: 12,
+    lineHeight: 12,
+    color: colors.inputError
+  },
+  hint: {
+    fontSize: 12,
+    lineHeight: 12,
+    color: colors.stormGray300
   }
 });
-function PhoneInput({
-  label,
-  countryCode,
-  onCountryCodeChange,
-  error,
-  hint,
-  containerStyle,
-  style,
-  className,
-  labelClassName,
-  inputClassName,
-  errorClassName,
-  hintClassName,
-  editable = true,
-  onFocus,
-  onBlur,
-  ...props
-}) {
-  const wrapperRef = react.useRef(null);
-  const inputRef = react.useRef(null);
-  const helperRef = react.useRef(null);
-  const [focused, setFocused] = react.useState(false);
-  useApplyWebClassName(wrapperRef, className);
-  useApplyWebClassName(inputRef, inputClassName);
-  useApplyWebClassName(helperRef, error ? errorClassName : hintClassName);
-  const isDisabled = editable === false;
-  const phoneVisualState = resolveInputVisualState({
-    focused,
-    error: Boolean(error),
-    disabled: isDisabled
-  });
-  const phoneFieldStyles = getInputFieldStyles(phoneVisualState);
-  function handleFocus(event) {
-    setFocused(true);
-    onFocus?.(event);
-  }
-  function handleBlur(event) {
-    setFocused(false);
-    onBlur?.(event);
-  }
-  const helperMessage = error ?? hint;
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ref: wrapperRef, style: [styles5.wrapper, containerStyle], children: [
-    label ? /* @__PURE__ */ jsxRuntime.jsx(Label, { disabled: isDisabled, className: labelClassName, children: label }) : null,
-    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles5.row, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        CountryCodeSelector,
-        {
-          value: countryCode,
-          onValueChange: onCountryCodeChange,
-          disabled: isDisabled,
-          style: styles5.countrySelector
-        }
+
+// src/data/countries.ts
+var defaultCountry = {
+  code: "AM",
+  name: "Armenia",
+  dialCode: "+374"
+};
+var countries = [
+  defaultCountry,
+  { code: "AF", name: "Afghanistan", dialCode: "+93" },
+  { code: "AL", name: "Albania", dialCode: "+355" },
+  { code: "DZ", name: "Algeria", dialCode: "+213" },
+  { code: "AR", name: "Argentina", dialCode: "+54" },
+  { code: "AU", name: "Australia", dialCode: "+61" },
+  { code: "AT", name: "Austria", dialCode: "+43" },
+  { code: "AZ", name: "Azerbaijan", dialCode: "+994" },
+  { code: "BH", name: "Bahrain", dialCode: "+973" },
+  { code: "BY", name: "Belarus", dialCode: "+375" },
+  { code: "BE", name: "Belgium", dialCode: "+32" },
+  { code: "BR", name: "Brazil", dialCode: "+55" },
+  { code: "BG", name: "Bulgaria", dialCode: "+359" },
+  { code: "CA", name: "Canada", dialCode: "+1" },
+  { code: "CL", name: "Chile", dialCode: "+56" },
+  { code: "CN", name: "China", dialCode: "+86" },
+  { code: "CO", name: "Colombia", dialCode: "+57" },
+  { code: "HR", name: "Croatia", dialCode: "+385" },
+  { code: "CY", name: "Cyprus", dialCode: "+357" },
+  { code: "CZ", name: "Czech Republic", dialCode: "+420" },
+  { code: "DK", name: "Denmark", dialCode: "+45" },
+  { code: "EG", name: "Egypt", dialCode: "+20" },
+  { code: "EE", name: "Estonia", dialCode: "+372" },
+  { code: "FI", name: "Finland", dialCode: "+358" },
+  { code: "FR", name: "France", dialCode: "+33" },
+  { code: "GE", name: "Georgia", dialCode: "+995" },
+  { code: "DE", name: "Germany", dialCode: "+49" },
+  { code: "GR", name: "Greece", dialCode: "+30" },
+  { code: "HK", name: "Hong Kong", dialCode: "+852" },
+  { code: "HU", name: "Hungary", dialCode: "+36" },
+  { code: "IN", name: "India", dialCode: "+91" },
+  { code: "ID", name: "Indonesia", dialCode: "+62" },
+  { code: "IR", name: "Iran", dialCode: "+98" },
+  { code: "IQ", name: "Iraq", dialCode: "+964" },
+  { code: "IE", name: "Ireland", dialCode: "+353" },
+  { code: "IL", name: "Israel", dialCode: "+972" },
+  { code: "IT", name: "Italy", dialCode: "+39" },
+  { code: "JP", name: "Japan", dialCode: "+81" },
+  { code: "JO", name: "Jordan", dialCode: "+962" },
+  { code: "KZ", name: "Kazakhstan", dialCode: "+7" },
+  { code: "KW", name: "Kuwait", dialCode: "+965" },
+  { code: "LV", name: "Latvia", dialCode: "+371" },
+  { code: "LB", name: "Lebanon", dialCode: "+961" },
+  { code: "LT", name: "Lithuania", dialCode: "+370" },
+  { code: "LU", name: "Luxembourg", dialCode: "+352" },
+  { code: "MY", name: "Malaysia", dialCode: "+60" },
+  { code: "MX", name: "Mexico", dialCode: "+52" },
+  { code: "MD", name: "Moldova", dialCode: "+373" },
+  { code: "NL", name: "Netherlands", dialCode: "+31" },
+  { code: "NZ", name: "New Zealand", dialCode: "+64" },
+  { code: "NG", name: "Nigeria", dialCode: "+234" },
+  { code: "NO", name: "Norway", dialCode: "+47" },
+  { code: "PK", name: "Pakistan", dialCode: "+92" },
+  { code: "PS", name: "Palestine", dialCode: "+970" },
+  { code: "PH", name: "Philippines", dialCode: "+63" },
+  { code: "PL", name: "Poland", dialCode: "+48" },
+  { code: "PT", name: "Portugal", dialCode: "+351" },
+  { code: "QA", name: "Qatar", dialCode: "+974" },
+  { code: "RO", name: "Romania", dialCode: "+40" },
+  { code: "RU", name: "Russia", dialCode: "+7" },
+  { code: "SA", name: "Saudi Arabia", dialCode: "+966" },
+  { code: "RS", name: "Serbia", dialCode: "+381" },
+  { code: "SG", name: "Singapore", dialCode: "+65" },
+  { code: "SK", name: "Slovakia", dialCode: "+421" },
+  { code: "SI", name: "Slovenia", dialCode: "+386" },
+  { code: "ZA", name: "South Africa", dialCode: "+27" },
+  { code: "KR", name: "South Korea", dialCode: "+82" },
+  { code: "ES", name: "Spain", dialCode: "+34" },
+  { code: "SE", name: "Sweden", dialCode: "+46" },
+  { code: "CH", name: "Switzerland", dialCode: "+41" },
+  { code: "SY", name: "Syria", dialCode: "+963" },
+  { code: "TW", name: "Taiwan", dialCode: "+886" },
+  { code: "TH", name: "Thailand", dialCode: "+66" },
+  { code: "TR", name: "Turkey", dialCode: "+90" },
+  { code: "UA", name: "Ukraine", dialCode: "+380" },
+  { code: "AE", name: "United Arab Emirates", dialCode: "+971" },
+  { code: "GB", name: "United Kingdom", dialCode: "+44" },
+  { code: "US", name: "United States", dialCode: "+1" },
+  { code: "UZ", name: "Uzbekistan", dialCode: "+998" },
+  { code: "VN", name: "Vietnam", dialCode: "+84" }
+];
+function findCountry(code) {
+  return countries.find((country) => country.code === code) ?? defaultCountry;
+}
+
+// src/utils/countryFlag.ts
+function countryCodeToFlagEmoji(code) {
+  const upper = code.trim().toUpperCase();
+  if (upper.length !== 2) return "";
+  return String.fromCodePoint(
+    ...upper.split("").map((char) => 127462 - 65 + char.charCodeAt(0))
+  );
+}
+var DROPDOWN_GAP = 10;
+var DROPDOWN_HEIGHT = 186;
+var DROPDOWN_PADDING = 8;
+var OPTION_GAP = 10;
+var OPTION_HEIGHT = 35;
+var TRIGGER_HEIGHT = 52;
+var CHEVRON_SIZE = 16;
+function resolveDropdownTop(anchor) {
+  const windowHeight = reactNative.Dimensions.get("window").height;
+  const topBelow = anchor.y + anchor.height + DROPDOWN_GAP;
+  const topAbove = anchor.y - DROPDOWN_GAP - DROPDOWN_HEIGHT;
+  const fitsBelow = topBelow + DROPDOWN_HEIGHT <= windowHeight;
+  if (fitsBelow) return topBelow;
+  if (topAbove >= 0) return topAbove;
+  return Math.max(0, Math.min(topBelow, windowHeight - DROPDOWN_HEIGHT));
+}
+function CountryCodeSelector({
+  value = defaultCountry.code,
+  onValueChange,
+  options = countries,
+  disabled = false,
+  style,
+  className
+}) {
+  const wrapperRef = react.useRef(null);
+  const triggerRef = react.useRef(null);
+  const scrollRef = react.useRef(null);
+  const [open, setOpen] = react.useState(false);
+  const [anchor, setAnchor] = react.useState(null);
+  useApplyWebClassName(wrapperRef, className);
+  useApplyWebClassName(
+    scrollRef,
+    COUNTRY_DROPDOWN_SCROLL_CLASS,
+    open && Boolean(anchor)
+  );
+  react.useLayoutEffect(() => {
+    ensureCountryDropdownScrollStyles();
+  }, []);
+  const selected = findCountry(value);
+  const textColor = disabled ? colors.stormGray200 : colors.slateBlue;
+  function closeDropdown() {
+    setOpen(false);
+    setAnchor(null);
+  }
+  function handleOpen() {
+    if (disabled) return;
+    triggerRef.current?.measureInWindow((x, y, width, height) => {
+      setAnchor({ x, y, width, height });
+      setOpen(true);
+    });
+  }
+  function handleSelect(code) {
+    onValueChange?.(code);
+    closeDropdown();
+  }
+  const dropdownTop = anchor ? resolveDropdownTop(anchor) : 0;
+  const optionList = options.map((item, index) => {
+    const isSelected = item.code === selected.code;
+    const isLast = index === options.length - 1;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      reactNative.Pressable,
+      {
+        accessibilityRole: "button",
+        onPress: () => handleSelect(item.code),
+        style: [
+          styles5.option,
+          isSelected && styles5.optionSelected,
+          !isLast && styles5.optionSpacing
+        ],
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles5.flag, children: countryCodeToFlagEmoji(item.code) }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles5.optionDialCode, children: item.dialCode })
+        ]
+      },
+      item.code
+    );
+  });
+  const dropdownList = /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.ScrollView,
+    {
+      ref: scrollRef,
+      style: styles5.dropdownScroll,
+      contentContainerStyle: styles5.dropdownContent,
+      keyboardShouldPersistTaps: "handled",
+      showsVerticalScrollIndicator: true,
+      bounces: false,
+      nestedScrollEnabled: true,
+      children: optionList
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ref: wrapperRef, style: [styles5.root, style], children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      reactNative.Pressable,
+      {
+        ref: triggerRef,
+        accessibilityRole: "button",
+        disabled,
+        onPress: handleOpen,
+        style: [
+          styles5.trigger,
+          disabled ? styles5.triggerDisabled : styles5.triggerEnabled,
+          reactNative.Platform.OS === "web" ? styles5.triggerWeb : null
+        ],
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles5.flag, children: countryCodeToFlagEmoji(selected.code) }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles5.dialCode, { color: textColor }], children: selected.dialCode }),
+          /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, { size: CHEVRON_SIZE, color: colors.stormGray100 })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.Modal,
+      {
+        visible: open,
+        transparent: true,
+        animationType: "fade",
+        onRequestClose: closeDropdown,
+        children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Pressable, { style: styles5.overlay, onPress: closeDropdown, children: anchor ? /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.View,
+          {
+            style: [
+              styles5.dropdown,
+              {
+                top: dropdownTop,
+                left: anchor.x,
+                width: anchor.width
+              }
+            ],
+            children: dropdownList
+          }
+        ) : null })
+      }
+    )
+  ] });
+}
+var styles5 = reactNative.StyleSheet.create({
+  root: {
+    alignSelf: "flex-start",
+    flexShrink: 0
+  },
+  trigger: {
+    flexDirection: "row",
+    alignItems: "center",
+    alignSelf: "flex-start",
+    flexGrow: 0,
+    flexShrink: 0,
+    height: TRIGGER_HEIGHT,
+    borderRadius: radii.lg,
+    borderWidth: 1,
+    padding: spacing.lg,
+    gap: spacing.sm
+  },
+  triggerEnabled: {
+    borderColor: colors.stormGray50,
+    backgroundColor: colors.white
+  },
+  triggerDisabled: {
+    borderColor: colors.stormGray50,
+    backgroundColor: colors.stormGray50
+  },
+  triggerWeb: {
+    width: "max-content"
+  },
+  flag: {
+    fontSize: 18,
+    lineHeight: 22
+  },
+  dialCode: {
+    fontSize: fontSize.md,
+    fontWeight: fontWeight.medium
+  },
+  overlay: {
+    flex: 1,
+    backgroundColor: "transparent"
+  },
+  dropdown: {
+    position: "absolute",
+    height: DROPDOWN_HEIGHT,
+    borderRadius: radii.lg,
+    borderWidth: 1,
+    borderColor: colors.stormGray50,
+    backgroundColor: colors.white,
+    padding: DROPDOWN_PADDING,
+    overflow: "hidden"
+  },
+  dropdownScroll: {
+    flex: 1
+  },
+  dropdownContent: {
+    flexGrow: 1
+  },
+  option: {
+    flexDirection: "row",
+    alignItems: "center",
+    height: OPTION_HEIGHT,
+    borderRadius: radii.sm,
+    padding: spacing.sm,
+    gap: spacing.sm
+  },
+  optionSpacing: {
+    marginBottom: OPTION_GAP
+  },
+  optionSelected: {
+    backgroundColor: colors.countrySelectorSelectedBg
+  },
+  optionDialCode: {
+    fontFamily: fonts.sans,
+    fontSize: fontSize.md,
+    fontWeight: fontWeight.regular,
+    lineHeight: fontSize.md,
+    letterSpacing: 0,
+    textAlign: "center",
+    color: colors.slateBlue
+  }
+});
+function PhoneInput({
+  label,
+  countryCode,
+  onCountryCodeChange,
+  error,
+  hint,
+  containerStyle,
+  style,
+  className,
+  labelClassName,
+  inputClassName,
+  errorClassName,
+  hintClassName,
+  editable = true,
+  onFocus,
+  onBlur,
+  ...props
+}) {
+  const wrapperRef = react.useRef(null);
+  const inputRef = react.useRef(null);
+  const helperRef = react.useRef(null);
+  const [focused, setFocused] = react.useState(false);
+  useApplyWebClassName(wrapperRef, className);
+  useApplyWebClassName(inputRef, inputClassName);
+  useApplyWebClassName(helperRef, error ? errorClassName : hintClassName);
+  const isDisabled = editable === false;
+  const phoneVisualState = resolveInputVisualState({
+    focused,
+    error: Boolean(error),
+    disabled: isDisabled
+  });
+  const phoneFieldStyles = getInputFieldStyles(phoneVisualState);
+  function handleFocus(event) {
+    setFocused(true);
+    onFocus?.(event);
+  }
+  function handleBlur(event) {
+    setFocused(false);
+    onBlur?.(event);
+  }
+  const helperMessage = error ?? hint;
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ref: wrapperRef, style: [styles6.wrapper, containerStyle], children: [
+    label ? /* @__PURE__ */ jsxRuntime.jsx(Label, { disabled: isDisabled, className: labelClassName, children: label }) : null,
+    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles6.row, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        CountryCodeSelector,
+        {
+          value: countryCode,
+          onValueChange: onCountryCodeChange,
+          disabled: isDisabled,
+          style: styles6.countrySelector
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles6.phoneColumn, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [phoneFieldStyles.outline, styles6.phoneOutline], children: /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.View,
+          {
+            style: [
+              inputFieldMetrics.container,
+              phoneFieldStyles.container,
+              styles6.phoneField
+            ],
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              reactNative.TextInput,
+              {
+                ref: inputRef,
+                style: [
+                  inputFieldMetrics.input,
+                  phoneFieldStyles.text,
+                  style
+                ],
+                keyboardType: "phone-pad",
+                placeholderTextColor: phoneFieldStyles.placeholder,
+                editable,
+                onFocus: handleFocus,
+                onBlur: handleBlur,
+                accessibilityState: { disabled: isDisabled },
+                ...props
+              }
+            )
+          }
+        ) }),
+        helperMessage ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { ref: helperRef, style: error ? styles6.error : styles6.hint, children: helperMessage }) : null
+      ] })
+    ] })
+  ] });
+}
+var styles6 = reactNative.StyleSheet.create({
+  wrapper: {
+    width: "100%",
+    gap: spacing.sm
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    gap: INPUT_ICON_GAP
+  },
+  countrySelector: {
+    flexShrink: 0,
+    alignSelf: "flex-start"
+  },
+  phoneColumn: {
+    flex: 1,
+    gap: spacing.sm
+  },
+  phoneOutline: {
+    width: "100%"
+  },
+  phoneField: {
+    flex: 1
+  },
+  error: {
+    fontSize: 12,
+    lineHeight: 16,
+    color: colors.inputError
+  },
+  hint: {
+    fontSize: 12,
+    lineHeight: 16,
+    color: colors.stormGray300
+  }
+});
+
+// src/icons/chevronNavPaths.ts
+var CHEVRON_LEFT_PATH = "M12.5 15L7.5 10L12.5 5";
+var CHEVRON_RIGHT_PATH = "M7.5 15L12.5 10L7.5 5";
+function ChevronLeftIcon({
+  size = 20,
+  color = "#151a1e",
+  strokeWidth = 2
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Svg5__default.default, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+    Svg5.Path,
+    {
+      d: CHEVRON_LEFT_PATH,
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+function ChevronRightIcon({
+  size = 20,
+  color = "#151a1e",
+  strokeWidth = 2
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Svg5__default.default, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+    Svg5.Path,
+    {
+      d: CHEVRON_RIGHT_PATH,
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+var CALENDAR_DROPDOWN_GAP = spacing.sm;
+var CALENDAR_PANEL_WIDTH = 296;
+var CALENDAR_PANEL_PADDING = spacing.md;
+var CALENDAR_PANEL_GAP = spacing.md;
+var CALENDAR_CONTENT_WIDTH = CALENDAR_PANEL_WIDTH - CALENDAR_PANEL_PADDING * 2;
+var CALENDAR_HEADER_HEIGHT = 20;
+var CALENDAR_WEEKDAY_CELL_SIZE = 32;
+var CALENDAR_WEEKDAY_GAP = spacing.sm;
+var CALENDAR_WEEKDAY_RADIUS = 6;
+var CALENDAR_DAY_SIZE = CALENDAR_WEEKDAY_CELL_SIZE;
+var CALENDAR_DAY_GRID_WIDTH = CALENDAR_CONTENT_WIDTH;
+var CALENDAR_DAY_GAP_X = spacing.sm;
+var CALENDAR_DAY_GAP_Y = spacing.lg;
+var CALENDAR_DAY_ROWS = 6;
+var CALENDAR_DAY_GRID_HEIGHT = CALENDAR_DAY_SIZE * CALENDAR_DAY_ROWS + CALENDAR_DAY_GAP_Y * (CALENDAR_DAY_ROWS - 1);
+var CALENDAR_PICKER_COLUMNS = 3;
+var CALENDAR_YEARS_PER_PAGE = 12;
+var CALENDAR_PICKER_CELL_WIDTH = (CALENDAR_DAY_GRID_WIDTH - CALENDAR_DAY_GAP_X * (CALENDAR_PICKER_COLUMNS - 1)) / CALENDAR_PICKER_COLUMNS;
+var CALENDAR_PICKER_CELL_HEIGHT = 36;
+var CALENDAR_PICKER_BODY_HEIGHT = CALENDAR_WEEKDAY_CELL_SIZE + CALENDAR_WEEKDAY_GAP + CALENDAR_DAY_GRID_HEIGHT;
+var CALENDAR_DAY_DOT_SIZE = 3;
+var CALENDAR_TODAY_TEXT_COLOR = "#082640";
+var CALENDAR_TODAY_DOT_COLOR = "#0033A0";
+var CALENDAR_NAV_ICON_SIZE = 20;
+var CALENDAR_NAV_ICON_COLOR = colors.stormGray850;
+var CALENDAR_FIELD_ICON_SIZE = 20;
+var CALENDAR_FIELD_WIDTH = CALENDAR_PANEL_WIDTH;
+var CALENDAR_FIELD_HEIGHT = 52;
+var CALENDAR_FIELD_PADDING = spacing.lg;
+var CALENDAR_FIELD_GAP = spacing.sm;
+var CALENDAR_FIELD_PLACEHOLDER_COLOR = colors.stormGray200;
+var CALENDAR_PANEL_TOTAL_HEIGHT = CALENDAR_PANEL_PADDING * 2 + CALENDAR_HEADER_HEIGHT + CALENDAR_PANEL_GAP * 2 + CALENDAR_WEEKDAY_CELL_SIZE + CALENDAR_DAY_GRID_HEIGHT;
+var CALENDAR_PANEL_HEIGHT = CALENDAR_PANEL_TOTAL_HEIGHT;
+var calendarLabelTypography = {
+  fontFamily: fonts.sans,
+  fontSize: fontSize.sm,
+  fontWeight: fontWeight.medium,
+  lineHeight: fontSize.sm,
+  letterSpacing: 0,
+  color: colors.slateBlue
+};
+var calendarFieldTypography = {
+  fontFamily: fonts.sans,
+  fontSize: fontSize.md,
+  fontWeight: fontWeight.regular,
+  lineHeight: fontSize.md,
+  letterSpacing: 0,
+  textAlign: "left"
+};
+var calendarFieldPlaceholderTypography = {
+  ...calendarFieldTypography,
+  color: CALENDAR_FIELD_PLACEHOLDER_COLOR
+};
+var calendarDropdownMetrics = reactNative.StyleSheet.create({
+  panel: {
+    width: CALENDAR_PANEL_WIDTH,
+    height: CALENDAR_PANEL_HEIGHT,
+    borderRadius: radii.lg,
+    borderWidth: 1,
+    borderColor: colors.stormGray50,
+    backgroundColor: colors.white,
+    padding: CALENDAR_PANEL_PADDING,
+    gap: CALENDAR_PANEL_GAP,
+    overflow: "hidden",
+    flexDirection: "column",
+    opacity: 1,
+    ...reactNative.Platform.OS === "web" ? {
+      boxSizing: "border-box"
+    } : null
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    height: CALENDAR_HEADER_HEIGHT,
+    minHeight: CALENDAR_HEADER_HEIGHT,
+    maxHeight: CALENDAR_HEADER_HEIGHT
+  },
+  headerTitle: {
+    textAlign: "center",
+    fontFamily: fonts.sans,
+    fontSize: fontSize.md,
+    fontWeight: fontWeight.bold,
+    lineHeight: 18,
+    letterSpacing: 0,
+    color: colors.stormGray850
+  },
+  headerTitlePressable: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    minHeight: CALENDAR_HEADER_HEIGHT
+  },
+  navButton: {
+    width: CALENDAR_NAV_ICON_SIZE,
+    height: CALENDAR_NAV_ICON_SIZE,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  weekdayRow: {
+    flexDirection: "row",
+    gap: CALENDAR_WEEKDAY_GAP,
+    height: CALENDAR_WEEKDAY_CELL_SIZE,
+    minHeight: CALENDAR_WEEKDAY_CELL_SIZE,
+    maxHeight: CALENDAR_WEEKDAY_CELL_SIZE,
+    opacity: 1
+  },
+  weekdayCell: {
+    width: CALENDAR_WEEKDAY_CELL_SIZE,
+    height: CALENDAR_WEEKDAY_CELL_SIZE,
+    borderRadius: CALENDAR_WEEKDAY_RADIUS,
+    padding: spacing.xs,
+    backgroundColor: colors.stormGray0,
+    alignItems: "center",
+    justifyContent: "center",
+    opacity: 1,
+    ...reactNative.Platform.OS === "web" ? {
+      boxSizing: "border-box"
+    } : null
+  },
+  weekdayLabel: {
+    fontFamily: fonts.sans,
+    fontSize: fontSize.sm,
+    fontWeight: fontWeight.regular,
+    lineHeight: fontSize.sm,
+    letterSpacing: 0,
+    textAlign: "center",
+    color: colors.stormGray300,
+    textTransform: "uppercase"
+  },
+  dayGrid: {
+    width: CALENDAR_DAY_GRID_WIDTH,
+    height: CALENDAR_DAY_GRID_HEIGHT,
+    flexDirection: "row",
+    flexWrap: "wrap",
+    columnGap: CALENDAR_DAY_GAP_X,
+    rowGap: CALENDAR_DAY_GAP_Y,
+    alignContent: "flex-start",
+    opacity: 1
+  },
+  dayCell: {
+    width: CALENDAR_DAY_SIZE,
+    height: CALENDAR_DAY_SIZE,
+    minHeight: CALENDAR_DAY_SIZE,
+    maxHeight: CALENDAR_DAY_SIZE,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: CALENDAR_WEEKDAY_RADIUS,
+    padding: spacing.xs,
+    backgroundColor: colors.white,
+    opacity: 1,
+    position: "relative",
+    ...reactNative.Platform.OS === "web" ? {
+      boxSizing: "border-box"
+    } : null
+  },
+  dayCellPast: {
+    backgroundColor: colors.stormGray50
+  },
+  dayCellSelected: {
+    backgroundColor: colors.navy
+  },
+  dayLabel: {
+    fontFamily: fonts.sans,
+    fontSize: fontSize.md,
+    fontWeight: fontWeight.regular,
+    lineHeight: 18,
+    letterSpacing: 0,
+    textAlign: "center",
+    color: colors.navy,
+    includeFontPadding: false,
+    textAlignVertical: "center"
+  },
+  dayLabelToday: {
+    color: CALENDAR_TODAY_TEXT_COLOR
+  },
+  dayLabelSelected: {
+    fontWeight: fontWeight.semibold,
+    color: colors.white
+  },
+  dayLabelFuture: {
+    color: colors.navy
+  },
+  dayLabelMuted: {
+    color: colors.stormGray300
+  },
+  dayLabelOutsideMonth: {
+    color: colors.stormGray300
+  },
+  dayLabelDisabled: {
+    color: colors.stormGray300,
+    opacity: 0.5
+  },
+  todayDot: {
+    position: "absolute",
+    bottom: 5,
+    left: "50%",
+    width: CALENDAR_DAY_DOT_SIZE,
+    height: CALENDAR_DAY_DOT_SIZE,
+    borderRadius: 15,
+    backgroundColor: CALENDAR_TODAY_DOT_COLOR,
+    marginLeft: -1.5,
+    zIndex: 1
+  },
+  pickerBody: {
+    width: CALENDAR_DAY_GRID_WIDTH,
+    height: CALENDAR_PICKER_BODY_HEIGHT,
+    justifyContent: "center"
+  },
+  pickerGrid: {
+    width: CALENDAR_DAY_GRID_WIDTH,
+    flexDirection: "row",
+    flexWrap: "wrap",
+    columnGap: CALENDAR_DAY_GAP_X,
+    rowGap: CALENDAR_DAY_GAP_Y,
+    alignContent: "flex-start"
+  },
+  pickerCell: {
+    width: CALENDAR_PICKER_CELL_WIDTH,
+    minHeight: CALENDAR_PICKER_CELL_HEIGHT,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: CALENDAR_WEEKDAY_RADIUS,
+    paddingHorizontal: spacing.xs,
+    paddingVertical: spacing.xs,
+    backgroundColor: colors.white,
+    ...reactNative.Platform.OS === "web" ? {
+      boxSizing: "border-box"
+    } : null
+  },
+  pickerCellSelected: {
+    backgroundColor: colors.navy
+  },
+  pickerLabel: {
+    fontFamily: fonts.sans,
+    fontSize: fontSize.md,
+    fontWeight: fontWeight.regular,
+    lineHeight: 18,
+    letterSpacing: 0,
+    textAlign: "center",
+    color: colors.navy,
+    includeFontPadding: false,
+    ...reactNative.Platform.OS === "android" ? { textAlignVertical: "center" } : null
+  },
+  pickerLabelSelected: {
+    fontWeight: fontWeight.semibold,
+    color: colors.white
+  },
+  pickerLabelDisabled: {
+    color: colors.stormGray300,
+    opacity: 0.5
+  },
+  pickerLabelCurrent: {
+    color: CALENDAR_TODAY_TEXT_COLOR
+  }
+});
+function resolveCalendarDropdownTop(anchor, panelHeight = CALENDAR_PANEL_HEIGHT) {
+  const windowHeight = reactNative.Dimensions.get("window").height;
+  const spaceBelow = windowHeight - (anchor.y + anchor.height + CALENDAR_DROPDOWN_GAP);
+  const spaceAbove = anchor.y - CALENDAR_DROPDOWN_GAP;
+  const topBelow = anchor.y + anchor.height + CALENDAR_DROPDOWN_GAP;
+  const topAbove = anchor.y - CALENDAR_DROPDOWN_GAP - panelHeight;
+  if (spaceBelow >= panelHeight) {
+    return topBelow;
+  }
+  if (spaceAbove >= panelHeight) {
+    return topAbove;
+  }
+  if (spaceAbove > spaceBelow) {
+    return Math.max(0, topAbove);
+  }
+  return Math.max(0, Math.min(topBelow, windowHeight - panelHeight));
+}
+function resolveCalendarDropdownLeft(anchor, panelWidth = CALENDAR_PANEL_WIDTH) {
+  const windowWidth = reactNative.Dimensions.get("window").width;
+  const maxLeft = Math.max(0, windowWidth - panelWidth);
+  return Math.max(0, Math.min(anchor.x, maxLeft));
+}
+var calendarFieldMetrics = reactNative.StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    width: CALENDAR_FIELD_WIDTH,
+    minWidth: CALENDAR_FIELD_WIDTH,
+    maxWidth: CALENDAR_FIELD_WIDTH,
+    height: CALENDAR_FIELD_HEIGHT,
+    minHeight: CALENDAR_FIELD_HEIGHT,
+    maxHeight: CALENDAR_FIELD_HEIGHT,
+    borderRadius: radii.lg,
+    padding: CALENDAR_FIELD_PADDING,
+    gap: CALENDAR_FIELD_GAP,
+    opacity: 1,
+    ...reactNative.Platform.OS === "web" ? {
+      boxSizing: "border-box"
+    } : null
+  },
+  value: {
+    flex: 1,
+    minWidth: 0,
+    ...calendarFieldTypography,
+    paddingVertical: 0,
+    paddingHorizontal: 0,
+    margin: 0,
+    ...reactNative.Platform.OS === "android" ? { includeFontPadding: false } : null,
+    ...reactNative.Platform.OS === "web" ? {
+      outlineStyle: "none"
+    } : null
+  }
+});
+
+// src/utils/calendarDays.ts
+function stripTime(date) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+function normalizeDateRange(range) {
+  if (!range?.start) {
+    return {};
+  }
+  const start = stripTime(range.start);
+  if (!range.end) {
+    return { start };
+  }
+  const end = stripTime(range.end);
+  if (isBeforeDay(end, start)) {
+    return { start: end, end: start };
+  }
+  return { start, end };
+}
+function isInDateRange(date, start, end) {
+  if (!start) {
+    return false;
+  }
+  const day = stripTime(date);
+  if (!end) {
+    return isSameDay(day, start);
+  }
+  return !isBeforeDay(day, start) && !isAfterDay(day, end);
+}
+function selectRangeDate(clicked, current) {
+  const clickedDate = stripTime(clicked);
+  if (!current?.start || current.end) {
+    return { start: clickedDate };
+  }
+  const start = stripTime(current.start);
+  if (isSameDay(clickedDate, start)) {
+    return { start, end: clickedDate };
+  }
+  if (isBeforeDay(clickedDate, start)) {
+    return { start: clickedDate };
+  }
+  return { start, end: clickedDate };
+}
+function isSameDay(left, right) {
+  return left.getFullYear() === right.getFullYear() && left.getMonth() === right.getMonth() && left.getDate() === right.getDate();
+}
+function isBeforeDay(left, right) {
+  return stripTime(left).getTime() < stripTime(right).getTime();
+}
+function isAfterDay(left, right) {
+  return stripTime(left).getTime() > stripTime(right).getTime();
+}
+function addMonths(date, amount) {
+  return new Date(date.getFullYear(), date.getMonth() + amount, 1);
+}
+function isDateDisabled(date, minDate, maxDate) {
+  if (minDate && isBeforeDay(date, minDate)) {
+    return true;
+  }
+  if (maxDate && isAfterDay(date, maxDate)) {
+    return true;
+  }
+  return false;
+}
+var CALENDAR_VISIBLE_DAY_COUNT = 42;
+var MONDAY_WEEK_START = 1;
+function buildCalendarDays({
+  viewDate,
+  selectedDate,
+  selectedRange,
+  today,
+  minDate,
+  maxDate
+}) {
+  const { start: rangeStart, end: rangeEnd } = normalizeDateRange(selectedRange);
+  const year = viewDate.getFullYear();
+  const month = viewDate.getMonth();
+  const firstOfMonth = new Date(year, month, 1);
+  const startOffset = (firstOfMonth.getDay() - MONDAY_WEEK_START + 7) % 7;
+  const gridStart = new Date(year, month, 1 - startOffset);
+  const days = [];
+  for (let index = 0; index < CALENDAR_VISIBLE_DAY_COUNT; index += 1) {
+    const date = new Date(
+      gridStart.getFullYear(),
+      gridStart.getMonth(),
+      gridStart.getDate() + index
+    );
+    const inCurrentMonth = date.getMonth() === month;
+    const isPast = inCurrentMonth && isBeforeDay(date, today);
+    const isDisabled = isDateDisabled(date, minDate, maxDate);
+    const isRangeStart = rangeStart ? isSameDay(date, rangeStart) : false;
+    const isRangeEnd = rangeEnd ? isSameDay(date, rangeEnd) : false;
+    const inSelectedRange = rangeStart && rangeEnd ? isInDateRange(date, rangeStart, rangeEnd) : false;
+    const isInRange = inSelectedRange && !isRangeStart && !isRangeEnd;
+    const isSelected = selectedDate ? isSameDay(date, selectedDate) : inSelectedRange || Boolean(rangeStart && !rangeEnd && isRangeStart);
+    days.push({
+      date,
+      inCurrentMonth,
+      isToday: isSameDay(date, today),
+      isSelected,
+      isRangeStart,
+      isRangeEnd,
+      isInRange,
+      isPast,
+      isDisabled
+    });
+  }
+  return days;
+}
+function formatCalendarYear(year, locale) {
+  return new Intl.DateTimeFormat(locale, { year: "numeric" }).format(new Date(year, 0, 1));
+}
+function getYearPageStart(year, yearsPerPage = 12) {
+  return Math.floor(year / yearsPerPage) * yearsPerPage;
+}
+function isMonthDisabled(year, month, minDate, maxDate) {
+  const firstDay = new Date(year, month, 1);
+  const lastDay = new Date(year, month + 1, 0);
+  if (minDate && isBeforeDay(lastDay, minDate)) {
+    return true;
+  }
+  if (maxDate && isAfterDay(firstDay, maxDate)) {
+    return true;
+  }
+  return false;
+}
+function isYearDisabled(year, minDate, maxDate) {
+  const firstDay = new Date(year, 0, 1);
+  const lastDay = new Date(year, 11, 31);
+  if (minDate && isBeforeDay(lastDay, minDate)) {
+    return true;
+  }
+  if (maxDate && isAfterDay(firstDay, maxDate)) {
+    return true;
+  }
+  return false;
+}
+function formatCalendarDate(date, locale) {
+  return new Intl.DateTimeFormat(locale, {
+    day: "numeric",
+    month: "long",
+    year: "numeric"
+  }).format(date);
+}
+function formatCalendarDateRange(range, locale, separator = " \u2013 ") {
+  const { start, end } = normalizeDateRange(range);
+  if (!start) {
+    return "";
+  }
+  if (!end) {
+    return formatCalendarDate(start, locale);
+  }
+  return `${formatCalendarDate(start, locale)}${separator}${formatCalendarDate(end, locale)}`;
+}
+
+// src/utils/calendarLocalization.ts
+var calendarTranslations = {
+  "hy-AM": {
+    weekdays: ["\u0535\u0550", "\u0535\u0554", "\u0549\u0550", "\u0540\u0546", "\u0548\u0552\u0550", "\u0547\u0532", "\u053F\u0550"],
+    monthsShort: [
+      "\u0540\u0576\u057E",
+      "\u0553\u057F\u057E",
+      "\u0544\u0580\u057F",
+      "\u0531\u057A\u0580",
+      "\u0544\u0575\u057D",
+      "\u0540\u0578\u0582\u0576",
+      "\u0540\u0578\u0582\u056C",
+      "\u0555\u0563\u057D",
+      "\u054D\u0565\u057A",
+      "\u0540\u0578\u056F",
+      "\u0546\u0578\u0575",
+      "\u0534\u0565\u056F"
+    ],
+    monthsLong: [
+      "\u0540\u0578\u0582\u0576\u057E\u0561\u0580",
+      "\u0553\u0565\u057F\u0580\u057E\u0561\u0580",
+      "\u0544\u0561\u0580\u057F",
+      "\u0531\u057A\u0580\u056B\u056C",
+      "\u0544\u0561\u0575\u056B\u057D",
+      "\u0540\u0578\u0582\u0576\u056B\u057D",
+      "\u0540\u0578\u0582\u056C\u056B\u057D",
+      "\u0555\u0563\u0578\u057D\u057F\u0578\u057D",
+      "\u054D\u0565\u057A\u057F\u0565\u0574\u0562\u0565\u0580",
+      "\u0540\u0578\u056F\u057F\u0565\u0574\u0562\u0565\u0580",
+      "\u0546\u0578\u0575\u0565\u0574\u0562\u0565\u0580",
+      "\u0534\u0565\u056F\u057F\u0565\u0574\u0562\u0565\u0580"
+    ],
+    datePlaceholder: "\u0538\u0576\u057F\u0580\u0565\u056C \u0561\u0574\u057D\u0561\u0569\u056B\u057E",
+    rangePlaceholder: "\u0538\u0576\u057F\u0580\u0565\u056C \u056A\u0561\u0574\u0561\u0576\u0561\u056F\u0561\u0570\u0561\u057F\u057E\u0561\u056E",
+    previousMonth: "\u0546\u0561\u056D\u0578\u0580\u0564 \u0561\u0574\u056B\u057D",
+    nextMonth: "\u0540\u0561\u057B\u0578\u0580\u0564 \u0561\u0574\u056B\u057D",
+    previousYear: "\u0546\u0561\u056D\u0578\u0580\u0564 \u057F\u0561\u0580\u056B",
+    nextYear: "\u0540\u0561\u057B\u0578\u0580\u0564 \u057F\u0561\u0580\u056B",
+    previousYears: "\u0546\u0561\u056D\u0578\u0580\u0564 \u057F\u0561\u0580\u056B\u0576\u0565\u0580",
+    nextYears: "\u0540\u0561\u057B\u0578\u0580\u0564 \u057F\u0561\u0580\u056B\u0576\u0565\u0580",
+    selectMonth: "\u0538\u0576\u057F\u0580\u0565\u056C \u0561\u0574\u056B\u057D",
+    selectYear: "\u0538\u0576\u057F\u0580\u0565\u056C \u057F\u0561\u0580\u056B",
+    closeCalendar: "\u0553\u0561\u056F\u0565\u056C \u0585\u0580\u0561\u0581\u0578\u0582\u0575\u0581\u0568"
+  },
+  "en-US": {
+    weekdays: ["MO", "TU", "WE", "TH", "FR", "SA", "SU"],
+    monthsShort: [
+      "Jan",
+      "Feb",
+      "Mar",
+      "Apr",
+      "May",
+      "Jun",
+      "Jul",
+      "Aug",
+      "Sep",
+      "Oct",
+      "Nov",
+      "Dec"
+    ],
+    monthsLong: [
+      "January",
+      "February",
+      "March",
+      "April",
+      "May",
+      "June",
+      "July",
+      "August",
+      "September",
+      "October",
+      "November",
+      "December"
+    ],
+    datePlaceholder: "Select date",
+    rangePlaceholder: "Select date range",
+    previousMonth: "Previous month",
+    nextMonth: "Next month",
+    previousYear: "Previous year",
+    nextYear: "Next year",
+    previousYears: "Previous years",
+    nextYears: "Next years",
+    selectMonth: "Select month",
+    selectYear: "Select year",
+    closeCalendar: "Close calendar"
+  },
+  "ru-RU": {
+    weekdays: ["\u041F\u041D", "\u0412\u0422", "\u0421\u0420", "\u0427\u0422", "\u041F\u0422", "\u0421\u0411", "\u0412\u0421"],
+    monthsShort: [
+      "\u042F\u043D\u0432",
+      "\u0424\u0435\u0432",
+      "\u041C\u0430\u0440",
+      "\u0410\u043F\u0440",
+      "\u041C\u0430\u0439",
+      "\u0418\u044E\u043D",
+      "\u0418\u044E\u043B",
+      "\u0410\u0432\u0433",
+      "\u0421\u0435\u043D",
+      "\u041E\u043A\u0442",
+      "\u041D\u043E\u044F",
+      "\u0414\u0435\u043A"
+    ],
+    monthsLong: [
+      "\u042F\u043D\u0432\u0430\u0440\u044C",
+      "\u0424\u0435\u0432\u0440\u0430\u043B\u044C",
+      "\u041C\u0430\u0440\u0442",
+      "\u0410\u043F\u0440\u0435\u043B\u044C",
+      "\u041C\u0430\u0439",
+      "\u0418\u044E\u043D\u044C",
+      "\u0418\u044E\u043B\u044C",
+      "\u0410\u0432\u0433\u0443\u0441\u0442",
+      "\u0421\u0435\u043D\u0442\u044F\u0431\u0440\u044C",
+      "\u041E\u043A\u0442\u044F\u0431\u0440\u044C",
+      "\u041D\u043E\u044F\u0431\u0440\u044C",
+      "\u0414\u0435\u043A\u0430\u0431\u0440\u044C"
+    ],
+    datePlaceholder: "\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0434\u0430\u0442\u0443",
+    rangePlaceholder: "\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u043F\u0435\u0440\u0438\u043E\u0434",
+    previousMonth: "\u041F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0438\u0439 \u043C\u0435\u0441\u044F\u0446",
+    nextMonth: "\u0421\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0439 \u043C\u0435\u0441\u044F\u0446",
+    previousYear: "\u041F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0438\u0439 \u0433\u043E\u0434",
+    nextYear: "\u0421\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0439 \u0433\u043E\u0434",
+    previousYears: "\u041F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0438\u0435 \u0433\u043E\u0434\u044B",
+    nextYears: "\u0421\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0435 \u0433\u043E\u0434\u044B",
+    selectMonth: "\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u043C\u0435\u0441\u044F\u0446",
+    selectYear: "\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0433\u043E\u0434",
+    closeCalendar: "\u0417\u0430\u043A\u0440\u044B\u0442\u044C \u043A\u0430\u043B\u0435\u043D\u0434\u0430\u0440\u044C"
+  }
+};
+function resolveCalendarLocale(locale) {
+  const normalizedLocale = locale.toLowerCase();
+  if (normalizedLocale.startsWith("hy")) {
+    return "hy-AM";
+  }
+  if (normalizedLocale.startsWith("ru")) {
+    return "ru-RU";
+  }
+  return "en-US";
+}
+function getCalendarTranslations(locale) {
+  return calendarTranslations[resolveCalendarLocale(locale)];
+}
+function resolveWeekdayLabels(locale) {
+  return getCalendarTranslations(locale).weekdays;
+}
+function getCalendarMonthLabels(locale, width = "short") {
+  const translations = getCalendarTranslations(locale);
+  return width === "short" ? translations.monthsShort : translations.monthsLong;
+}
+function formatLocalizedCalendarMonthYear(date, locale) {
+  return `${getCalendarMonthLabels(locale)[date.getMonth()]} ${date.getFullYear()}`;
+}
+var LOCALE_STORAGE_KEY = "homepad.locale";
+var LOCALE_CHANGE_EVENT = "homepad:locale-change";
+var DEFAULT_CALENDAR_LOCALE = "hy-AM";
+var CalendarLocaleContext = react.createContext(void 0);
+function CalendarLocaleProvider({ locale, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(CalendarLocaleContext.Provider, { value: locale, children });
+}
+function normalizeProjectLocale(locale) {
+  if (!locale) {
+    return null;
+  }
+  return resolveCalendarLocale(locale);
+}
+function readBrowserLocale() {
+  if (typeof window === "undefined") {
+    return null;
+  }
+  let storedLocale = null;
+  try {
+    storedLocale = normalizeProjectLocale(window.localStorage.getItem(LOCALE_STORAGE_KEY));
+  } catch {
+    storedLocale = null;
+  }
+  if (storedLocale) {
+    return storedLocale;
+  }
+  const documentLocale = normalizeProjectLocale(window.document?.documentElement.lang);
+  if (documentLocale) {
+    return documentLocale;
+  }
+  return normalizeProjectLocale(window.navigator.language);
+}
+function useCalendarLocale(locale) {
+  const contextLocale = react.useContext(CalendarLocaleContext);
+  const controlledLocale = locale ?? contextLocale;
+  const [browserLocale, setBrowserLocale] = react.useState(
+    () => readBrowserLocale() ?? DEFAULT_CALENDAR_LOCALE
+  );
+  react.useEffect(() => {
+    if (controlledLocale !== void 0 || typeof window === "undefined") {
+      return;
+    }
+    const syncLocale = () => {
+      setBrowserLocale(readBrowserLocale() ?? DEFAULT_CALENDAR_LOCALE);
+    };
+    const handleLocaleChange = (event) => {
+      const customEvent = event;
+      const nextLocale = normalizeProjectLocale(customEvent.detail);
+      if (nextLocale) {
+        setBrowserLocale(nextLocale);
+        return;
+      }
+      syncLocale();
+    };
+    window.addEventListener(LOCALE_CHANGE_EVENT, handleLocaleChange);
+    window.addEventListener("storage", syncLocale);
+    return () => {
+      window.removeEventListener(LOCALE_CHANGE_EVENT, handleLocaleChange);
+      window.removeEventListener("storage", syncLocale);
+    };
+  }, [controlledLocale]);
+  return react.useMemo(
+    () => normalizeProjectLocale(controlledLocale) ?? browserLocale,
+    [browserLocale, controlledLocale]
+  );
+}
+function resolveDayCellStyle(day) {
+  if (day.isDisabled) {
+    return [calendarDropdownMetrics.dayCell];
+  }
+  if (day.isSelected) {
+    return [calendarDropdownMetrics.dayCell, calendarDropdownMetrics.dayCellSelected];
+  }
+  return [
+    calendarDropdownMetrics.dayCell,
+    day.inCurrentMonth && day.isPast && !day.isToday ? calendarDropdownMetrics.dayCellPast : null
+  ];
+}
+function resolveDayLabelStyle(day) {
+  if (day.isDisabled) {
+    return [calendarDropdownMetrics.dayLabel, calendarDropdownMetrics.dayLabelDisabled];
+  }
+  if (day.isSelected) {
+    return [calendarDropdownMetrics.dayLabel, calendarDropdownMetrics.dayLabelSelected];
+  }
+  if (!day.inCurrentMonth) {
+    return [calendarDropdownMetrics.dayLabel, calendarDropdownMetrics.dayLabelOutsideMonth];
+  }
+  if (day.isToday) {
+    return [calendarDropdownMetrics.dayLabel, calendarDropdownMetrics.dayLabelToday];
+  }
+  if (day.isPast) {
+    return [calendarDropdownMetrics.dayLabel, calendarDropdownMetrics.dayLabelMuted];
+  }
+  return [calendarDropdownMetrics.dayLabel, calendarDropdownMetrics.dayLabelFuture];
+}
+function Calendar(props) {
+  const rangeProps = props.mode === "range" ? props : null;
+  const singleProps = props.mode === "range" ? null : props;
+  const {
+    viewDate,
+    defaultViewDate,
+    onViewDateChange,
+    locale,
+    labels,
+    minDate,
+    maxDate,
+    today = /* @__PURE__ */ new Date(),
+    style,
+    className
+  } = props;
+  const rootRef = react.useRef(null);
+  const [internalViewDate, setInternalViewDate] = react.useState(() => {
+    if (defaultViewDate) {
+      return defaultViewDate;
+    }
+    if (rangeProps) {
+      return rangeProps.value?.start ?? today;
+    }
+    return singleProps?.value ?? today;
+  });
+  const activeViewDate = viewDate ?? internalViewDate;
+  const [pickerView, setPickerView] = react.useState("days");
+  const [pickerYear, setPickerYear] = react.useState(() => activeViewDate.getFullYear());
+  const [yearPageStart, setYearPageStart] = react.useState(
+    () => getYearPageStart(activeViewDate.getFullYear(), CALENDAR_YEARS_PER_PAGE)
+  );
+  const customWeekdayLabels = labels?.weekdays;
+  const formatMonthYearLabel = labels?.formatMonthYear;
+  const resolvedLocale = useCalendarLocale(locale);
+  const translations = react.useMemo(
+    () => getCalendarTranslations(resolvedLocale),
+    [resolvedLocale]
+  );
+  useApplyWebClassName(rootRef, className);
+  const weekdayLabels = react.useMemo(
+    () => customWeekdayLabels ?? resolveWeekdayLabels(resolvedLocale),
+    [customWeekdayLabels, resolvedLocale]
+  );
+  const monthLabels = react.useMemo(() => getCalendarMonthLabels(resolvedLocale), [resolvedLocale]);
+  const monthYearLabel = react.useMemo(() => {
+    if (formatMonthYearLabel) {
+      return formatMonthYearLabel(activeViewDate);
+    }
+    return formatLocalizedCalendarMonthYear(activeViewDate, resolvedLocale);
+  }, [activeViewDate, formatMonthYearLabel, resolvedLocale]);
+  const headerLabel = react.useMemo(() => {
+    if (pickerView === "months") {
+      return formatCalendarYear(pickerYear, resolvedLocale);
+    }
+    if (pickerView === "years") {
+      const endYear = yearPageStart + CALENDAR_YEARS_PER_PAGE - 1;
+      return `${yearPageStart} \u2013 ${endYear}`;
+    }
+    return monthYearLabel;
+  }, [monthYearLabel, pickerView, pickerYear, resolvedLocale, yearPageStart]);
+  const days = react.useMemo(
+    () => buildCalendarDays({
+      viewDate: activeViewDate,
+      selectedDate: singleProps?.value,
+      selectedRange: rangeProps?.value,
+      today,
+      minDate,
+      maxDate
+    }),
+    [activeViewDate, maxDate, minDate, rangeProps?.value, singleProps?.value, today]
+  );
+  const yearOptions = react.useMemo(
+    () => Array.from({ length: CALENDAR_YEARS_PER_PAGE }, (_, index) => yearPageStart + index),
+    [yearPageStart]
+  );
+  function getLabel(key) {
+    return labels?.[key] ?? translations[key];
+  }
+  function setViewDate(nextDate) {
+    if (viewDate === void 0) {
+      setInternalViewDate(nextDate);
+    }
+    onViewDateChange?.(nextDate);
+  }
+  function handlePrevious() {
+    if (pickerView === "months") {
+      setPickerYear((year) => year - 1);
+      return;
+    }
+    if (pickerView === "years") {
+      setYearPageStart((start) => start - CALENDAR_YEARS_PER_PAGE);
+      return;
+    }
+    setViewDate(addMonths(activeViewDate, -1));
+  }
+  function handleNext() {
+    if (pickerView === "months") {
+      setPickerYear((year) => year + 1);
+      return;
+    }
+    if (pickerView === "years") {
+      setYearPageStart((start) => start + CALENDAR_YEARS_PER_PAGE);
+      return;
+    }
+    setViewDate(addMonths(activeViewDate, 1));
+  }
+  function handleHeaderPress() {
+    if (pickerView === "days") {
+      setPickerYear(activeViewDate.getFullYear());
+      setPickerView("months");
+      return;
+    }
+    if (pickerView === "months") {
+      setYearPageStart(getYearPageStart(pickerYear, CALENDAR_YEARS_PER_PAGE));
+      setPickerView("years");
+    }
+  }
+  function handleMonthSelect(month) {
+    setViewDate(new Date(pickerYear, month, 1));
+    setPickerView("days");
+  }
+  function handleYearSelect(year) {
+    setPickerYear(year);
+    setPickerView("months");
+  }
+  function handleDayPress(date) {
+    if (rangeProps) {
+      rangeProps.onChange?.(selectRangeDate(date, rangeProps.value));
+      return;
+    }
+    singleProps?.onChange?.(date);
+  }
+  const headerIsPressable = pickerView === "days" || pickerView === "months";
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ref: rootRef, style: [calendarDropdownMetrics.panel, style], children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: calendarDropdownMetrics.header, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: pickerView === "months" ? getLabel("previousYear") : pickerView === "years" ? getLabel("previousYears") : getLabel("previousMonth"),
+          onPress: handlePrevious,
+          style: calendarDropdownMetrics.navButton,
+          children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon, { size: CALENDAR_NAV_ICON_SIZE, color: CALENDAR_NAV_ICON_COLOR })
+        }
       ),
-      /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles5.phoneColumn, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [phoneFieldStyles.outline, styles5.phoneOutline], children: /* @__PURE__ */ jsxRuntime.jsx(
-          reactNative.View,
-          {
-            style: [
-              inputFieldMetrics.container,
-              phoneFieldStyles.container,
-              styles5.phoneField
-            ],
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              reactNative.TextInput,
-              {
-                ref: inputRef,
-                style: [
-                  inputFieldMetrics.input,
-                  phoneFieldStyles.text,
-                  style
-                ],
-                keyboardType: "phone-pad",
-                placeholderTextColor: phoneFieldStyles.placeholder,
-                editable,
-                onFocus: handleFocus,
-                onBlur: handleBlur,
-                accessibilityState: { disabled: isDisabled },
-                ...props
-              }
-            )
-          }
-        ) }),
-        helperMessage ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { ref: helperRef, style: error ? styles5.error : styles5.hint, children: helperMessage }) : null
-      ] })
-    ] })
+      headerIsPressable ? /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: pickerView === "days" ? getLabel("selectMonth") : getLabel("selectYear"),
+          onPress: handleHeaderPress,
+          style: calendarDropdownMetrics.headerTitlePressable,
+          children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: calendarDropdownMetrics.headerTitle, children: headerLabel })
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: calendarDropdownMetrics.headerTitlePressable, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: calendarDropdownMetrics.headerTitle, children: headerLabel }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: pickerView === "months" ? getLabel("nextYear") : pickerView === "years" ? getLabel("nextYears") : getLabel("nextMonth"),
+          onPress: handleNext,
+          style: calendarDropdownMetrics.navButton,
+          children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRightIcon, { size: CALENDAR_NAV_ICON_SIZE, color: CALENDAR_NAV_ICON_COLOR })
+        }
+      )
+    ] }),
+    pickerView === "days" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: calendarDropdownMetrics.weekdayRow, children: weekdayLabels.map((weekday) => /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: calendarDropdownMetrics.weekdayCell, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: calendarDropdownMetrics.weekdayLabel, children: weekday }) }, weekday)) }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: calendarDropdownMetrics.dayGrid, children: days.map((day) => /* @__PURE__ */ jsxRuntime.jsxs(
+        reactNative.Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityState: {
+            selected: day.isSelected,
+            disabled: day.isDisabled
+          },
+          disabled: day.isDisabled,
+          onPress: () => handleDayPress(day.date),
+          style: resolveDayCellStyle(day),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: resolveDayLabelStyle(day), children: day.date.getDate() }),
+            day.isToday && day.inCurrentMonth && !day.isSelected ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: calendarDropdownMetrics.todayDot }) : null
+          ]
+        },
+        day.date.toISOString()
+      )) })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: calendarDropdownMetrics.pickerBody, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: calendarDropdownMetrics.pickerGrid, children: pickerView === "months" ? monthLabels.map((monthLabel, month) => {
+      const isSelected = activeViewDate.getFullYear() === pickerYear && activeViewDate.getMonth() === month;
+      const isCurrent = today.getFullYear() === pickerYear && today.getMonth() === month;
+      const disabled = isMonthDisabled(pickerYear, month, minDate, maxDate);
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityState: { selected: isSelected, disabled },
+          disabled,
+          onPress: () => handleMonthSelect(month),
+          style: [
+            calendarDropdownMetrics.pickerCell,
+            isSelected ? calendarDropdownMetrics.pickerCellSelected : null
+          ],
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.Text,
+            {
+              style: [
+                calendarDropdownMetrics.pickerLabel,
+                isSelected ? calendarDropdownMetrics.pickerLabelSelected : null,
+                !isSelected && isCurrent ? calendarDropdownMetrics.pickerLabelCurrent : null,
+                disabled ? calendarDropdownMetrics.pickerLabelDisabled : null
+              ],
+              children: monthLabel
+            }
+          )
+        },
+        monthLabel
+      );
+    }) : yearOptions.map((year) => {
+      const isSelected = activeViewDate.getFullYear() === year;
+      const isCurrent = today.getFullYear() === year;
+      const disabled = isYearDisabled(year, minDate, maxDate);
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityState: { selected: isSelected, disabled },
+          disabled,
+          onPress: () => handleYearSelect(year),
+          style: [
+            calendarDropdownMetrics.pickerCell,
+            isSelected ? calendarDropdownMetrics.pickerCellSelected : null
+          ],
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.Text,
+            {
+              style: [
+                calendarDropdownMetrics.pickerLabel,
+                isSelected ? calendarDropdownMetrics.pickerLabelSelected : null,
+                !isSelected && isCurrent ? calendarDropdownMetrics.pickerLabelCurrent : null,
+                disabled ? calendarDropdownMetrics.pickerLabelDisabled : null
+              ],
+              children: year
+            }
+          )
+        },
+        year
+      );
+    }) }) })
   ] });
 }
-var styles5 = reactNative.StyleSheet.create({
+
+// src/icons/calendarIconPaths.ts
+var CALENDAR_ICON_BODY_PATH = "M6.66667 1.6665V4.99984M13.3333 1.6665V4.99984M2.5 8.33317H17.5M4.16667 3.33317H15.8333C16.7538 3.33317 17.5 4.07936 17.5 4.99984V16.6665C17.5 17.587 16.7538 18.3332 15.8333 18.3332H4.16667C3.24619 18.3332 2.5 17.587 2.5 16.6665V4.99984C2.5 4.07936 3.24619 3.33317 4.16667 3.33317Z";
+function CalendarIcon({
+  size = 20,
+  color = "#C7CDD1",
+  strokeWidth = 2
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Svg5__default.default, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+    Svg5.Path,
+    {
+      d: CALENDAR_ICON_BODY_PATH,
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+function DatePicker(props) {
+  const {
+    label,
+    placeholder,
+    locale,
+    labels,
+    minDate,
+    maxDate,
+    today,
+    viewDate,
+    defaultViewDate,
+    onViewDateChange,
+    disabled = false,
+    error,
+    invalid,
+    hint,
+    containerStyle,
+    className,
+    fieldClassName,
+    panelClassName,
+    labelClassName,
+    errorClassName,
+    hintClassName,
+    defaultOpen = false
+  } = props;
+  const mode = props.mode ?? "single";
+  const closeOnRangeComplete = props.mode === "range" ? props.closeOnRangeComplete ?? true : false;
+  const resolvedLocale = useCalendarLocale(locale);
+  const translations = getCalendarTranslations(resolvedLocale);
+  const resolvedPlaceholder = placeholder ?? (mode === "range" ? translations.rangePlaceholder : translations.datePlaceholder);
+  const wrapperRef = react.useRef(null);
+  const triggerRef = react.useRef(null);
+  const helperRef = react.useRef(null);
+  const [open, setOpen] = react.useState(defaultOpen);
+  const [anchor, setAnchor] = react.useState(null);
+  useApplyWebClassName(wrapperRef, className);
+  useApplyWebClassName(triggerRef, fieldClassName);
+  useApplyWebClassName(helperRef, error ? errorClassName : hintClassName);
+  react.useEffect(() => {
+    if (!defaultOpen || disabled) {
+      return;
+    }
+    const frame = requestAnimationFrame(() => {
+      triggerRef.current?.measureInWindow((x, y, width, height) => {
+        setAnchor({ x, y, width, height });
+        setOpen(true);
+      });
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [defaultOpen, disabled]);
+  const hasError = Boolean(error) || Boolean(invalid);
+  const fieldStyles = getSelectFieldStyles(
+    resolveInputVisualState({
+      error: hasError,
+      disabled
+    })
+  );
+  const hasValue = mode === "single" ? Boolean(props.value) : Boolean(props.mode === "range" && props.value?.start);
+  const displayValue = (() => {
+    if (props.mode === "range") {
+      if (!props.value?.start) {
+        return resolvedPlaceholder;
+      }
+      return props.formatRange?.(props.value) ?? formatCalendarDateRange(props.value, resolvedLocale, props.rangeSeparator);
+    }
+    if (props.value) {
+      return props.formatDate?.(props.value) ?? formatCalendarDate(props.value, resolvedLocale);
+    }
+    return resolvedPlaceholder;
+  })();
+  const isPlaceholder = !hasValue;
+  const valueTextStyle = isPlaceholder ? {
+    ...calendarFieldPlaceholderTypography,
+    color: disabled ? colors.stormGray300 : calendarFieldPlaceholderTypography.color
+  } : {
+    ...calendarFieldTypography,
+    color: fieldStyles.value.color
+  };
+  const helperMessage = error ?? hint;
+  const panelWidth = CALENDAR_PANEL_WIDTH;
+  const panelLeft = anchor ? resolveCalendarDropdownLeft(anchor, panelWidth) : 0;
+  const dropdownTop = anchor ? resolveCalendarDropdownTop(anchor) : 0;
+  const resolvedDefaultViewDate = defaultViewDate ?? (props.mode === "range" ? props.value?.start : props.value) ?? today;
+  function closePicker() {
+    setOpen(false);
+    setAnchor(null);
+  }
+  function openPicker() {
+    if (disabled) {
+      return;
+    }
+    triggerRef.current?.measureInWindow((x, y, width, height) => {
+      setAnchor({ x, y, width, height });
+      setOpen(true);
+    });
+  }
+  function handleSingleSelect(date) {
+    if (props.mode === "range") {
+      return;
+    }
+    props.onChange?.(date);
+    closePicker();
+  }
+  function handleRangeSelect(range) {
+    if (props.mode !== "range") {
+      return;
+    }
+    props.onChange?.(range);
+    if (closeOnRangeComplete && range.end) {
+      closePicker();
+    }
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ref: wrapperRef, style: [styles7.wrapper, containerStyle], children: [
+    label ? /* @__PURE__ */ jsxRuntime.jsx(Label, { disabled, style: styles7.label, className: labelClassName, children: label }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [fieldStyles.outline, styles7.fieldOutline], children: /* @__PURE__ */ jsxRuntime.jsxs(
+      reactNative.Pressable,
+      {
+        ref: triggerRef,
+        accessibilityRole: "button",
+        accessibilityState: { disabled, expanded: open },
+        disabled,
+        onPress: openPicker,
+        style: [calendarFieldMetrics.container, fieldStyles.container],
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.Text,
+            {
+              style: [calendarFieldMetrics.value, valueTextStyle],
+              numberOfLines: 1,
+              children: displayValue
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles7.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(
+            CalendarIcon,
+            {
+              size: CALENDAR_FIELD_ICON_SIZE,
+              color: disabled ? colors.stormGray200 : colors.stormGray150
+            }
+          ) })
+        ]
+      }
+    ) }),
+    helperMessage ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { ref: helperRef, style: error ? styles7.error : styles7.hint, children: helperMessage }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Modal, { visible: open, transparent: true, animationType: "fade", onRequestClose: closePicker, children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles7.modalRoot, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.Pressable,
+        {
+          style: styles7.backdrop,
+          onPress: closePicker,
+          accessibilityRole: "button",
+          accessibilityLabel: labels?.closeCalendar ?? translations.closeCalendar
+        }
+      ),
+      anchor ? /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.View,
+        {
+          style: [
+            styles7.panelPosition,
+            {
+              top: dropdownTop,
+              left: panelLeft,
+              width: panelWidth,
+              height: CALENDAR_PANEL_HEIGHT
+            }
+          ],
+          children: props.mode === "range" ? /* @__PURE__ */ jsxRuntime.jsx(
+            Calendar,
+            {
+              mode: "range",
+              value: props.value,
+              onChange: handleRangeSelect,
+              viewDate,
+              defaultViewDate: resolvedDefaultViewDate,
+              onViewDateChange,
+              locale: resolvedLocale,
+              labels,
+              minDate,
+              maxDate,
+              today,
+              className: panelClassName
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            Calendar,
+            {
+              mode: "single",
+              value: props.value,
+              onChange: handleSingleSelect,
+              viewDate,
+              defaultViewDate: resolvedDefaultViewDate,
+              onViewDateChange,
+              locale: resolvedLocale,
+              labels,
+              minDate,
+              maxDate,
+              today,
+              className: panelClassName
+            }
+          )
+        }
+      ) : null
+    ] }) })
+  ] });
+}
+var styles7 = reactNative.StyleSheet.create({
   wrapper: {
-    width: "100%",
-    gap: spacing.sm
-  },
-  row: {
-    flexDirection: "row",
-    alignItems: "flex-start",
-    gap: INPUT_ICON_GAP
+    width: CALENDAR_FIELD_WIDTH,
+    maxWidth: "100%",
+    gap: SELECT_LABEL_GAP
   },
-  countrySelector: {
-    flexShrink: 0,
+  fieldOutline: {
+    width: CALENDAR_FIELD_WIDTH,
+    maxWidth: "100%",
     alignSelf: "flex-start"
   },
-  phoneColumn: {
-    flex: 1,
-    gap: spacing.sm
+  label: {
+    ...calendarLabelTypography
   },
-  phoneOutline: {
-    width: "100%"
+  iconSlot: {
+    width: CALENDAR_FIELD_ICON_SIZE,
+    height: CALENDAR_FIELD_ICON_SIZE,
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0
   },
-  phoneField: {
+  modalRoot: {
     flex: 1
   },
+  backdrop: {
+    ...reactNative.StyleSheet.absoluteFillObject,
+    backgroundColor: colors.transparent
+  },
+  panelPosition: {
+    position: "absolute",
+    zIndex: 1
+  },
   error: {
     fontSize: 12,
-    lineHeight: 16,
+    lineHeight: 12,
     color: colors.inputError
   },
   hint: {
     fontSize: 12,
-    lineHeight: 16,
+    lineHeight: 12,
     color: colors.stormGray300
   }
 });
 
+// src/icons/lockIconPaths.ts
+var LOCK_ICON_PATH = "M5.83333 8.33317V5.83317C5.83333 4.7281 6.27232 3.66829 7.05372 2.88689C7.83512 2.10549 8.89493 1.6665 10 1.6665C11.1051 1.6665 12.1649 2.10549 12.9463 2.88689C13.7277 3.66829 14.1667 4.7281 14.1667 5.83317V8.33317M10.8333 13.3332C10.8333 13.7934 10.4602 14.1665 10 14.1665C9.53976 14.1665 9.16667 13.7934 9.16667 13.3332C9.16667 12.8729 9.53976 12.4998 10 12.4998C10.4602 12.4998 10.8333 12.8729 10.8333 13.3332ZM4.16667 8.33317H15.8333C16.7538 8.33317 17.5 9.07936 17.5 9.99984V16.6665C17.5 17.587 16.7538 18.3332 15.8333 18.3332H4.16667C3.24619 18.3332 2.5 17.587 2.5 16.6665V9.99984C2.5 9.07936 3.24619 8.33317 4.16667 8.33317Z";
+function LockIcon({
+  size = 20,
+  color = "#c7cdd1",
+  strokeWidth = 2
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Svg5__default.default, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+    Svg5.Path,
+    {
+      d: LOCK_ICON_PATH,
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+
 exports.Button = Button;
+exports.Calendar = Calendar;
+exports.CalendarIcon = CalendarIcon;
+exports.CalendarLocaleProvider = CalendarLocaleProvider;
 exports.CountryCodeSelector = CountryCodeSelector;
+exports.DatePicker = DatePicker;
 exports.Input = Input;
 exports.Label = Label;
+exports.LockIcon = LockIcon;
 exports.PhoneInput = PhoneInput;
+exports.Select = Select;
 exports.brand = brand;
 exports.buttonTypography = buttonTypography;
+exports.calendarTranslations = calendarTranslations;
 exports.colors = colors;
 exports.countries = countries;
 exports.defaultCountry = defaultCountry;
@@ -1323,12 +3223,18 @@ exports.findCountry = findCountry;
 exports.fontSize = fontSize;
 exports.fontWeight = fontWeight;
 exports.fonts = fonts;
+exports.formatLocalizedCalendarMonthYear = formatLocalizedCalendarMonthYear;
+exports.getCalendarMonthLabels = getCalendarMonthLabels;
+exports.getCalendarTranslations = getCalendarTranslations;
 exports.labelTypography = labelTypography;
 exports.navy = navy;
 exports.radii = radii;
+exports.resolveCalendarLocale = resolveCalendarLocale;
+exports.resolveWeekdayLabels = resolveWeekdayLabels;
 exports.rubyRed = rubyRed;
 exports.shadows = shadows;
 exports.spacing = spacing;
 exports.stormGray = stormGray;
+exports.useCalendarLocale = useCalendarLocale;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map