@scripso-homepad/ui 0.4.2 → 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,
@@ -817,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,
-  disabled = false,
-  style,
-  className
-}) {
+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,
+  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
@@ -1172,149 +1461,1723 @@ 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,
+
+// 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: styles5.countrySelector
+          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
   }
 });
@@ -1326,8 +3189,8 @@ function LockIcon({
   color = "#c7cdd1",
   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: LOCK_ICON_PATH,
       stroke: color,
@@ -1339,13 +3202,19 @@ function LockIcon({
 }
 
 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;
@@ -1354,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