@scripso-homepad/ui 0.4.1 → 0.4.3

package/dist/index.js

@@ -1,9 +1,9 @@
-import { colors, buttonTypography, fontSize, fontWeight, fonts, spacing, radii, INPUT_ICON_GAP, useApplyWebClassName, resolveInputVisualState, getInputFieldStyles, Label, inputFieldMetrics } from './chunk-C7GHBVMM.js';
-export { Input, Label, brand, buttonTypography, colors, emeraldGreen, fontSize, fontWeight, fonts, labelTypography, navy, radii, rubyRed, shadows, spacing, stormGray } from './chunk-C7GHBVMM.js';
-import { useRef, useState, useLayoutEffect } from 'react';
-import { StyleSheet, Platform, TouchableOpacity, Text, View, Pressable, ScrollView, Modal, TextInput, Dimensions } from 'react-native';
-import Svg, { Path } from 'react-native-svg';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { colors, buttonTypography, spacing, fontSize, fontWeight, fonts, radii, INPUT_ICON_GAP, useApplyWebClassName, resolveInputVisualState, Label, getInputFieldStyles, inputFieldMetrics } from './chunk-66WR57JJ.js';
+export { Input, Label, brand, buttonTypography, colors, emeraldGreen, fontSize, fontWeight, fonts, labelTypography, navy, radii, rubyRed, shadows, spacing, stormGray } from './chunk-66WR57JJ.js';
+import { createContext, useRef, useState, useEffect, useMemo, useLayoutEffect, useContext, isValidElement, cloneElement } from 'react';
+import { StyleSheet, Platform, TouchableOpacity, Text, View, Animated, Easing, Pressable, Modal, ScrollView, TextInput, Dimensions } from 'react-native';
+import Svg3, { Path } from 'react-native-svg';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/icons/arrowUpRightPath.ts
 var ARROW_UP_RIGHT_PATH = "M14.1667 14.1668V5.8335H5.83333M14.1667 5.8335L5.83333 14.1668";
@@ -12,7 +12,7 @@ function ArrowUpRightIcon({
   color = "#08275d",
   strokeWidth = 2
 }) {
-  return /* @__PURE__ */ jsx(Svg, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Svg3, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx(
     Path,
     {
       d: ARROW_UP_RIGHT_PATH,
@@ -194,6 +194,671 @@ var styles = StyleSheet.create({
   }
 });
 
+// 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
+}) {
+  const useLarge = size >= 20;
+  return /* @__PURE__ */ jsx(
+    Svg3,
+    {
+      width: size,
+      height: size,
+      viewBox: useLarge ? "0 0 20 20" : "0 0 16 16",
+      fill: "none",
+      children: /* @__PURE__ */ jsx(
+        Path,
+        {
+          d: useLarge ? CHEVRON_DOWN_PATH_20 : CHEVRON_DOWN_PATH,
+          stroke: color,
+          strokeWidth,
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+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_WIDTH = 2;
+function createOutlineStyle(ringColor) {
+  return {
+    borderRadius: radii.lg + INPUT_OUTLINE_WIDTH,
+    borderWidth: INPUT_OUTLINE_WIDTH,
+    borderColor: ringColor,
+    padding: 0,
+    backgroundColor: colors.transparent,
+    width: "100%",
+    alignSelf: "stretch",
+    ...Platform.OS !== "web" ? { overflow: "hidden" } : null
+  };
+}
+var defaultOutline = createOutlineStyle(colors.transparent);
+function getSelectFieldStyles(state) {
+  const containerBase = {
+    borderRadius: radii.lg,
+    ...Platform.OS !== "web" ? { overflow: "hidden" } : null
+  };
+  const valueBase = {
+    ...selectValueTypography,
+    color: colors.slateBlue
+  };
+  switch (state) {
+    case "disabled":
+      return {
+        outline: defaultOutline,
+        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: createOutlineStyle(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: createOutlineStyle(colors.inputOutlineFocus),
+        container: {
+          ...containerBase,
+          borderWidth: 1,
+          borderColor: colors.navy,
+          backgroundColor: colors.white
+        },
+        value: valueBase,
+        placeholder: colors.stormGray200,
+        icon: colors.navy
+      };
+    default:
+      return {
+        outline: defaultOutline,
+        container: {
+          ...containerBase,
+          borderWidth: 1,
+          borderColor: colors.stormGray50,
+          backgroundColor: colors.white
+        },
+        value: valueBase,
+        placeholder: colors.stormGray200,
+        icon: colors.stormGray150
+      };
+  }
+}
+var selectFieldMetrics = 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,
+    ...Platform.OS === "web" ? {
+      boxSizing: "border-box"
+    } : null
+  },
+  value: {
+    flex: 1,
+    minWidth: 0,
+    ...selectValueTypography,
+    paddingVertical: 0,
+    paddingHorizontal: 0,
+    margin: 0,
+    ...Platform.OS === "android" ? { includeFontPadding: false } : null,
+    ...Platform.OS === "web" ? {
+      outlineStyle: "none"
+    } : null
+  }
+});
+var selectDropdownMetrics = 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 = 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 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;
+  }
+
+  .${className}::-webkit-scrollbar {
+    width: 4px;
+    -webkit-appearance: none;
+    appearance: none;
+  }
+
+  .${className}::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
+  .${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;
+  }
+
+  .${className}::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .${className}::-webkit-scrollbar-thumb {
+    background-color: ${colors.stormGray300};
+    border-radius: 9999px;
+  }
+`;
+}
+var dropdownScrollCss = [
+  createDropdownScrollCss(COUNTRY_DROPDOWN_SCROLL_CLASS),
+  createDropdownScrollCss(SELECT_DROPDOWN_SCROLL_CLASS)
+].join("\n");
+function ensureDropdownScrollStyles() {
+  if (Platform.OS !== "web" || typeof document === "undefined") return;
+  if (document.getElementById(STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = dropdownScrollCss;
+  document.head.appendChild(style);
+}
+function ensureCountryDropdownScrollStyles() {
+  ensureDropdownScrollStyles();
+}
+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 (isValidElement(icon)) {
+    return cloneElement(icon, {
+      size: icon.props.size ?? SELECT_ICON_SIZE,
+      color: icon.props.color ?? color
+    });
+  }
+  return icon;
+}
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : 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 = useRef(null);
+  const triggerRef = useRef(null);
+  const menuRef = useRef(null);
+  const scrollRef = useRef(null);
+  const helperRef = useRef(null);
+  const chevronRotation = useRef(new Animated.Value(0)).current;
+  const [open, setOpen] = useState(false);
+  const [anchor, setAnchor] = useState(null);
+  const [highlightedIndex, setHighlightedIndex] = useState(-1);
+  const [valueContainerWidth, setValueContainerWidth] = useState(0);
+  useApplyWebClassName(wrapperRef, className);
+  useApplyWebClassName(triggerRef, fieldClassName);
+  useApplyWebClassName(menuRef, menuClassName);
+  useApplyWebClassName(scrollRef, SELECT_DROPDOWN_SCROLL_CLASS, open && Boolean(anchor));
+  useApplyWebClassName(helperRef, error ? errorClassName : hintClassName);
+  useIsomorphicLayoutEffect(() => {
+    ensureSelectDropdownScrollStyles();
+  }, []);
+  useEffect(() => {
+    Animated.timing(chevronRotation, {
+      toValue: open ? 1 : 0,
+      duration: SELECT_CHEVRON_ROTATION_MS,
+      easing: Easing.out(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 = useMemo(
+    () => normalizeSelectedValues(multiple, value),
+    [multiple, value]
+  );
+  const selectedValueSet = useMemo(() => new Set(selectedValues), [selectedValues]);
+  const selectedLabels = useMemo(
+    () => resolveSelectedLabels(options, selectedValues),
+    [options, selectedValues]
+  );
+  const selectableOptions = useMemo(
+    () => options.filter((option) => !option.disabled),
+    [options]
+  );
+  const selectableIndexByValue = useMemo(
+    () => new Map(
+      selectableOptions.map((option, index) => [option.value, index])
+    ),
+    [selectableOptions]
+  );
+  const displayLabel = 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 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(nextValue) {
+    if (multiple) {
+      const nextValues = selectedValues.includes(nextValue) ? selectedValues.filter((item) => item !== nextValue) : [...selectedValues, nextValue];
+      onValueChange?.(nextValues);
+      return;
+    }
+    onValueChange?.(nextValue);
+    closeMenu();
+  }
+  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__ */ jsx(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        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: [
+          selectDropdownMetrics.option,
+          isSelected && selectDropdownMetrics.optionSelected,
+          isHighlighted && !isSelected && !option.disabled ? selectDropdownMetrics.optionHighlighted : null,
+          !isLast && styles2.optionSpacing,
+          option.disabled && styles2.optionDisabled
+        ],
+        children: /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: [
+              selectDropdownMetrics.optionLabel,
+              isSelected && selectDropdownMetrics.optionLabelSelected,
+              option.disabled && styles2.optionLabelDisabled
+            ],
+            numberOfLines: 1,
+            children: option.label
+          }
+        )
+      },
+      option.value
+    );
+  });
+  const dropdownTop = anchor ? resolveSelectDropdownTop(anchor, dropdownHeight) : 0;
+  return /* @__PURE__ */ jsxs(View, { ref: wrapperRef, style: [styles2.wrapper, containerStyle], children: [
+    label ? /* @__PURE__ */ jsx(Label, { disabled, style: styles2.label, className: labelClassName, children: label }) : null,
+    /* @__PURE__ */ jsx(View, { style: fieldStyles.outline, children: /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        ref: triggerRef,
+        accessibilityRole: "button",
+        accessibilityState: { disabled, expanded: open },
+        disabled,
+        onPress: open ? closeMenu : openMenu,
+        style: [selectFieldMetrics.container, fieldStyles.container],
+        children: [
+          leftIcon ? /* @__PURE__ */ jsx(View, { style: styles2.iconSlot, children: renderSelectIcon(leftIcon, fieldStyles.icon) }) : null,
+          /* @__PURE__ */ jsx(
+            View,
+            {
+              style: styles2.valueContainer,
+              onLayout: (event) => {
+                setValueContainerWidth(event.nativeEvent.layout.width);
+              },
+              children: /* @__PURE__ */ jsx(
+                Text,
+                {
+                  style: [
+                    selectFieldMetrics.value,
+                    fieldStyles.value,
+                    isPlaceholder && { color: fieldStyles.placeholder }
+                  ],
+                  numberOfLines: 1,
+                  children: displayLabel
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Animated.View,
+            {
+              style: [styles2.iconSlot, { transform: [{ rotate: chevronRotate }] }],
+              children: /* @__PURE__ */ jsx(
+                ChevronDownIcon,
+                {
+                  size: SELECT_CHEVRON_SIZE,
+                  color: disabled ? colors.stormGray200 : SELECT_CHEVRON_COLOR
+                }
+              )
+            }
+          )
+        ]
+      }
+    ) }),
+    helperMessage ? /* @__PURE__ */ jsx(Text, { ref: helperRef, style: error ? styles2.error : styles2.hint, children: helperMessage }) : null,
+    /* @__PURE__ */ jsx(Modal, { visible: open, transparent: true, animationType: "fade", onRequestClose: closeMenu, children: /* @__PURE__ */ jsx(Pressable, { style: styles2.overlay, onPress: closeMenu, children: anchor ? /* @__PURE__ */ jsx(
+      View,
+      {
+        ref: menuRef,
+        style: [
+          selectDropdownMetrics.menu,
+          styles2.dropdown,
+          {
+            top: dropdownTop,
+            left: anchor.x,
+            width: anchor.width,
+            height: dropdownHeight
+          }
+        ],
+        children: /* @__PURE__ */ jsx(
+          ScrollView,
+          {
+            ref: scrollRef,
+            style: styles2.dropdownScroll,
+            contentContainerStyle: styles2.dropdownContent,
+            keyboardShouldPersistTaps: "handled",
+            showsVerticalScrollIndicator: true,
+            bounces: false,
+            nestedScrollEnabled: true,
+            children: optionList
+          }
+        )
+      }
+    ) : null }) })
+  ] });
+}
+var styles2 = StyleSheet.create({
+  wrapper: {
+    width: "100%",
+    gap: SELECT_LABEL_GAP
+  },
+  label: {
+    ...selectLabelTypography
+  },
+  iconSlot: {
+    width: SELECT_ICON_SIZE,
+    height: SELECT_ICON_SIZE,
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0
+  },
+  valueContainer: {
+    flex: 1,
+    minWidth: 0,
+    justifyContent: "center"
+  },
+  overlay: {
+    flex: 1,
+    backgroundColor: colors.transparent
+  },
+  dropdown: {
+    position: "absolute"
+  },
+  dropdownScroll: {
+    flex: 1
+  },
+  dropdownContent: {
+    flexGrow: 1
+  },
+  optionSpacing: {
+    marginBottom: SELECT_OPTION_GAP
+  },
+  optionDisabled: {
+    opacity: 0.5
+  },
+  optionLabelDisabled: {
+    color: colors.stormGray300
+  },
+  error: {
+    fontSize: 12,
+    lineHeight: 12,
+    color: colors.inputError
+  },
+  hint: {
+    fontSize: 12,
+    lineHeight: 12,
+    color: colors.stormGray300
+  }
+});
+
 // src/data/countries.ts
 var defaultCountry = {
   code: "AM",
@@ -286,25 +951,6 @@ function findCountry(code) {
   return countries.find((country) => country.code === code) ?? defaultCountry;
 }
 
-// src/icons/chevronDownPath.ts
-var CHEVRON_DOWN_PATH = "M4 6L8 10L12 6";
-function ChevronDownIcon({
-  size = 16,
-  color = "#dadde0",
-  strokeWidth = 2
-}) {
-  return /* @__PURE__ */ jsx(Svg, { width: size, height: size, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx(
-    Path,
-    {
-      d: CHEVRON_DOWN_PATH,
-      stroke: color,
-      strokeWidth,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ) });
-}
-
 // src/utils/countryFlag.ts
 function countryCodeToFlagEmoji(code) {
   const upper = code.trim().toUpperCase();
@@ -313,51 +959,6 @@ function countryCodeToFlagEmoji(code) {
     ...upper.split("").map((char) => 127462 - 65 + char.charCodeAt(0))
   );
 }
-var COUNTRY_DROPDOWN_SCROLL_CLASS = "hp-country-dropdown-scroll";
-var STYLE_ID = "hp-country-dropdown-scroll-styles";
-var countryDropdownScrollCss = `
-  .${COUNTRY_DROPDOWN_SCROLL_CLASS} {
-    scrollbar-width: thin;
-    scrollbar-color: ${colors.stormGray300} transparent;
-    overflow-y: auto;
-  }
-
-  .${COUNTRY_DROPDOWN_SCROLL_CLASS}::-webkit-scrollbar {
-    width: 4px;
-  }
-
-  .${COUNTRY_DROPDOWN_SCROLL_CLASS}::-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 {
-    display: none;
-    width: 0;
-    height: 0;
-    -webkit-appearance: none;
-    appearance: none;
-  }
-
-  .${COUNTRY_DROPDOWN_SCROLL_CLASS}::-webkit-scrollbar-track {
-    background: transparent;
-  }
-
-  .${COUNTRY_DROPDOWN_SCROLL_CLASS}::-webkit-scrollbar-thumb {
-    background-color: ${colors.stormGray300};
-    border-radius: 9999px;
-  }
-`;
-function ensureCountryDropdownScrollStyles() {
-  if (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;
-  document.head.appendChild(style);
-}
 var DROPDOWN_GAP = 10;
 var DROPDOWN_HEIGHT = 186;
 var DROPDOWN_PADDING = 8;
@@ -423,13 +1024,13 @@ function CountryCodeSelector({
         accessibilityRole: "button",
         onPress: () => handleSelect(item.code),
         style: [
-          styles2.option,
-          isSelected && styles2.optionSelected,
-          !isLast && styles2.optionSpacing
+          styles3.option,
+          isSelected && styles3.optionSelected,
+          !isLast && styles3.optionSpacing
         ],
         children: [
-          /* @__PURE__ */ jsx(Text, { style: styles2.flag, children: countryCodeToFlagEmoji(item.code) }),
-          /* @__PURE__ */ jsx(Text, { style: styles2.optionDialCode, children: item.dialCode })
+          /* @__PURE__ */ jsx(Text, { style: styles3.flag, children: countryCodeToFlagEmoji(item.code) }),
+          /* @__PURE__ */ jsx(Text, { style: styles3.optionDialCode, children: item.dialCode })
         ]
       },
       item.code
@@ -439,8 +1040,8 @@ function CountryCodeSelector({
     ScrollView,
     {
       ref: scrollRef,
-      style: styles2.dropdownScroll,
-      contentContainerStyle: styles2.dropdownContent,
+      style: styles3.dropdownScroll,
+      contentContainerStyle: styles3.dropdownContent,
       keyboardShouldPersistTaps: "handled",
       showsVerticalScrollIndicator: true,
       bounces: false,
@@ -448,7 +1049,7 @@ function CountryCodeSelector({
       children: optionList
     }
   );
-  return /* @__PURE__ */ jsxs(View, { ref: wrapperRef, style: [styles2.root, style], children: [
+  return /* @__PURE__ */ jsxs(View, { ref: wrapperRef, style: [styles3.root, style], children: [
     /* @__PURE__ */ jsxs(
       Pressable,
       {
@@ -457,13 +1058,13 @@ function CountryCodeSelector({
         disabled,
         onPress: handleOpen,
         style: [
-          styles2.trigger,
-          disabled ? styles2.triggerDisabled : styles2.triggerEnabled,
-          Platform.OS === "web" ? styles2.triggerWeb : null
+          styles3.trigger,
+          disabled ? styles3.triggerDisabled : styles3.triggerEnabled,
+          Platform.OS === "web" ? styles3.triggerWeb : null
         ],
         children: [
-          /* @__PURE__ */ jsx(Text, { style: styles2.flag, children: countryCodeToFlagEmoji(selected.code) }),
-          /* @__PURE__ */ jsx(Text, { style: [styles2.dialCode, { color: textColor }], children: selected.dialCode }),
+          /* @__PURE__ */ jsx(Text, { style: styles3.flag, children: countryCodeToFlagEmoji(selected.code) }),
+          /* @__PURE__ */ jsx(Text, { style: [styles3.dialCode, { color: textColor }], children: selected.dialCode }),
           /* @__PURE__ */ jsx(ChevronDownIcon, { size: CHEVRON_SIZE, color: colors.stormGray100 })
         ]
       }
@@ -475,11 +1076,11 @@ function CountryCodeSelector({
         transparent: true,
         animationType: "fade",
         onRequestClose: closeDropdown,
-        children: /* @__PURE__ */ jsx(Pressable, { style: styles2.overlay, onPress: closeDropdown, children: anchor ? /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsx(Pressable, { style: styles3.overlay, onPress: closeDropdown, children: anchor ? /* @__PURE__ */ jsx(
           View,
           {
             style: [
-              styles2.dropdown,
+              styles3.dropdown,
               {
                 top: dropdownTop,
                 left: anchor.x,
@@ -493,7 +1094,7 @@ function CountryCodeSelector({
     )
   ] });
 }
-var styles2 = StyleSheet.create({
+var styles3 = StyleSheet.create({
   root: {
     alignSelf: "flex-start",
     flexShrink: 0
@@ -614,26 +1215,26 @@ function PhoneInput({
     onBlur?.(event);
   }
   const helperMessage = error ?? hint;
-  return /* @__PURE__ */ jsxs(View, { ref: wrapperRef, style: [styles3.wrapper, containerStyle], children: [
+  return /* @__PURE__ */ jsxs(View, { ref: wrapperRef, style: [styles4.wrapper, containerStyle], children: [
     label ? /* @__PURE__ */ jsx(Label, { disabled: isDisabled, className: labelClassName, children: label }) : null,
-    /* @__PURE__ */ jsxs(View, { style: styles3.row, children: [
+    /* @__PURE__ */ jsxs(View, { style: styles4.row, children: [
       /* @__PURE__ */ jsx(
         CountryCodeSelector,
         {
           value: countryCode,
           onValueChange: onCountryCodeChange,
           disabled: isDisabled,
-          style: styles3.countrySelector
+          style: styles4.countrySelector
         }
       ),
-      /* @__PURE__ */ jsxs(View, { style: styles3.phoneColumn, children: [
-        /* @__PURE__ */ jsx(View, { style: [phoneFieldStyles.outline, styles3.phoneOutline], children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxs(View, { style: styles4.phoneColumn, children: [
+        /* @__PURE__ */ jsx(View, { style: [phoneFieldStyles.outline, styles4.phoneOutline], children: /* @__PURE__ */ jsx(
           View,
           {
             style: [
               inputFieldMetrics.container,
               phoneFieldStyles.container,
-              styles3.phoneField
+              styles4.phoneField
             ],
             children: /* @__PURE__ */ jsx(
               TextInput,
@@ -655,12 +1256,12 @@ function PhoneInput({
             )
           }
         ) }),
-        helperMessage ? /* @__PURE__ */ jsx(Text, { ref: helperRef, style: error ? styles3.error : styles3.hint, children: helperMessage }) : null
+        helperMessage ? /* @__PURE__ */ jsx(Text, { ref: helperRef, style: error ? styles4.error : styles4.hint, children: helperMessage }) : null
       ] })
     ] })
   ] });
 }
-var styles3 = StyleSheet.create({
+var styles4 = StyleSheet.create({
   wrapper: {
     width: "100%",
     gap: spacing.sm
@@ -696,6 +1297,1287 @@ var styles3 = StyleSheet.create({
   }
 });
 
-export { Button, CountryCodeSelector, PhoneInput, countries, defaultCountry, findCountry };
+// 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__ */ jsx(Svg3, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx(
+    Path,
+    {
+      d: CHEVRON_LEFT_PATH,
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+function ChevronRightIcon({
+  size = 20,
+  color = "#151a1e",
+  strokeWidth = 2
+}) {
+  return /* @__PURE__ */ jsx(Svg3, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx(
+    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 = 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,
+    ...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,
+    ...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",
+    ...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,
+    ...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,
+    ...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 = 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 = Dimensions.get("window").width;
+  const maxLeft = Math.max(0, windowWidth - panelWidth);
+  return Math.max(0, Math.min(anchor.x, maxLeft));
+}
+var calendarFieldMetrics = 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,
+    ...Platform.OS === "web" ? {
+      boxSizing: "border-box"
+    } : null
+  },
+  value: {
+    flex: 1,
+    minWidth: 0,
+    ...calendarFieldTypography,
+    paddingVertical: 0,
+    paddingHorizontal: 0,
+    margin: 0,
+    ...Platform.OS === "android" ? { includeFontPadding: false } : null,
+    ...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 = createContext(void 0);
+function CalendarLocaleProvider({ locale, children }) {
+  return /* @__PURE__ */ 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 = useContext(CalendarLocaleContext);
+  const controlledLocale = locale ?? contextLocale;
+  const [browserLocale, setBrowserLocale] = useState(
+    () => readBrowserLocale() ?? DEFAULT_CALENDAR_LOCALE
+  );
+  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 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 = useRef(null);
+  const [internalViewDate, setInternalViewDate] = useState(() => {
+    if (defaultViewDate) {
+      return defaultViewDate;
+    }
+    if (rangeProps) {
+      return rangeProps.value?.start ?? today;
+    }
+    return singleProps?.value ?? today;
+  });
+  const activeViewDate = viewDate ?? internalViewDate;
+  const [pickerView, setPickerView] = useState("days");
+  const [pickerYear, setPickerYear] = useState(() => activeViewDate.getFullYear());
+  const [yearPageStart, setYearPageStart] = useState(
+    () => getYearPageStart(activeViewDate.getFullYear(), CALENDAR_YEARS_PER_PAGE)
+  );
+  const customWeekdayLabels = labels?.weekdays;
+  const formatMonthYearLabel = labels?.formatMonthYear;
+  const resolvedLocale = useCalendarLocale(locale);
+  const translations = useMemo(
+    () => getCalendarTranslations(resolvedLocale),
+    [resolvedLocale]
+  );
+  useApplyWebClassName(rootRef, className);
+  const weekdayLabels = useMemo(
+    () => customWeekdayLabels ?? resolveWeekdayLabels(resolvedLocale),
+    [customWeekdayLabels, resolvedLocale]
+  );
+  const monthLabels = useMemo(() => getCalendarMonthLabels(resolvedLocale), [resolvedLocale]);
+  const monthYearLabel = useMemo(() => {
+    if (formatMonthYearLabel) {
+      return formatMonthYearLabel(activeViewDate);
+    }
+    return formatLocalizedCalendarMonthYear(activeViewDate, resolvedLocale);
+  }, [activeViewDate, formatMonthYearLabel, resolvedLocale]);
+  const headerLabel = 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 = useMemo(
+    () => buildCalendarDays({
+      viewDate: activeViewDate,
+      selectedDate: singleProps?.value,
+      selectedRange: rangeProps?.value,
+      today,
+      minDate,
+      maxDate
+    }),
+    [activeViewDate, maxDate, minDate, rangeProps?.value, singleProps?.value, today]
+  );
+  const yearOptions = 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__ */ jsxs(View, { ref: rootRef, style: [calendarDropdownMetrics.panel, style], children: [
+    /* @__PURE__ */ jsxs(View, { style: calendarDropdownMetrics.header, children: [
+      /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: pickerView === "months" ? getLabel("previousYear") : pickerView === "years" ? getLabel("previousYears") : getLabel("previousMonth"),
+          onPress: handlePrevious,
+          style: calendarDropdownMetrics.navButton,
+          children: /* @__PURE__ */ jsx(ChevronLeftIcon, { size: CALENDAR_NAV_ICON_SIZE, color: CALENDAR_NAV_ICON_COLOR })
+        }
+      ),
+      headerIsPressable ? /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: pickerView === "days" ? getLabel("selectMonth") : getLabel("selectYear"),
+          onPress: handleHeaderPress,
+          style: calendarDropdownMetrics.headerTitlePressable,
+          children: /* @__PURE__ */ jsx(Text, { style: calendarDropdownMetrics.headerTitle, children: headerLabel })
+        }
+      ) : /* @__PURE__ */ jsx(View, { style: calendarDropdownMetrics.headerTitlePressable, children: /* @__PURE__ */ jsx(Text, { style: calendarDropdownMetrics.headerTitle, children: headerLabel }) }),
+      /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: pickerView === "months" ? getLabel("nextYear") : pickerView === "years" ? getLabel("nextYears") : getLabel("nextMonth"),
+          onPress: handleNext,
+          style: calendarDropdownMetrics.navButton,
+          children: /* @__PURE__ */ jsx(ChevronRightIcon, { size: CALENDAR_NAV_ICON_SIZE, color: CALENDAR_NAV_ICON_COLOR })
+        }
+      )
+    ] }),
+    pickerView === "days" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(View, { style: calendarDropdownMetrics.weekdayRow, children: weekdayLabels.map((weekday) => /* @__PURE__ */ jsx(View, { style: calendarDropdownMetrics.weekdayCell, children: /* @__PURE__ */ jsx(Text, { style: calendarDropdownMetrics.weekdayLabel, children: weekday }) }, weekday)) }),
+      /* @__PURE__ */ jsx(View, { style: calendarDropdownMetrics.dayGrid, children: days.map((day) => /* @__PURE__ */ jsxs(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityState: {
+            selected: day.isSelected,
+            disabled: day.isDisabled
+          },
+          disabled: day.isDisabled,
+          onPress: () => handleDayPress(day.date),
+          style: resolveDayCellStyle(day),
+          children: [
+            /* @__PURE__ */ jsx(Text, { style: resolveDayLabelStyle(day), children: day.date.getDate() }),
+            day.isToday && day.inCurrentMonth && !day.isSelected ? /* @__PURE__ */ jsx(View, { style: calendarDropdownMetrics.todayDot }) : null
+          ]
+        },
+        day.date.toISOString()
+      )) })
+    ] }) : /* @__PURE__ */ jsx(View, { style: calendarDropdownMetrics.pickerBody, children: /* @__PURE__ */ jsx(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__ */ jsx(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityState: { selected: isSelected, disabled },
+          disabled,
+          onPress: () => handleMonthSelect(month),
+          style: [
+            calendarDropdownMetrics.pickerCell,
+            isSelected ? calendarDropdownMetrics.pickerCellSelected : null
+          ],
+          children: /* @__PURE__ */ jsx(
+            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__ */ jsx(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityState: { selected: isSelected, disabled },
+          disabled,
+          onPress: () => handleYearSelect(year),
+          style: [
+            calendarDropdownMetrics.pickerCell,
+            isSelected ? calendarDropdownMetrics.pickerCellSelected : null
+          ],
+          children: /* @__PURE__ */ jsx(
+            Text,
+            {
+              style: [
+                calendarDropdownMetrics.pickerLabel,
+                isSelected ? calendarDropdownMetrics.pickerLabelSelected : null,
+                !isSelected && isCurrent ? calendarDropdownMetrics.pickerLabelCurrent : null,
+                disabled ? calendarDropdownMetrics.pickerLabelDisabled : null
+              ],
+              children: year
+            }
+          )
+        },
+        year
+      );
+    }) }) })
+  ] });
+}
+
+// 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__ */ jsx(Svg3, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx(
+    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 = useRef(null);
+  const triggerRef = useRef(null);
+  const helperRef = useRef(null);
+  const [open, setOpen] = useState(defaultOpen);
+  const [anchor, setAnchor] = useState(null);
+  useApplyWebClassName(wrapperRef, className);
+  useApplyWebClassName(triggerRef, fieldClassName);
+  useApplyWebClassName(helperRef, error ? errorClassName : hintClassName);
+  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__ */ jsxs(View, { ref: wrapperRef, style: [styles5.wrapper, containerStyle], children: [
+    label ? /* @__PURE__ */ jsx(Label, { disabled, style: styles5.label, className: labelClassName, children: label }) : null,
+    /* @__PURE__ */ jsx(View, { style: [fieldStyles.outline, styles5.fieldOutline], children: /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        ref: triggerRef,
+        accessibilityRole: "button",
+        accessibilityState: { disabled, expanded: open },
+        disabled,
+        onPress: openPicker,
+        style: [calendarFieldMetrics.container, fieldStyles.container],
+        children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              style: [calendarFieldMetrics.value, valueTextStyle],
+              numberOfLines: 1,
+              children: displayValue
+            }
+          ),
+          /* @__PURE__ */ jsx(View, { style: styles5.iconSlot, children: /* @__PURE__ */ jsx(
+            CalendarIcon,
+            {
+              size: CALENDAR_FIELD_ICON_SIZE,
+              color: disabled ? colors.stormGray200 : colors.stormGray150
+            }
+          ) })
+        ]
+      }
+    ) }),
+    helperMessage ? /* @__PURE__ */ jsx(Text, { ref: helperRef, style: error ? styles5.error : styles5.hint, children: helperMessage }) : null,
+    /* @__PURE__ */ jsx(Modal, { visible: open, transparent: true, animationType: "fade", onRequestClose: closePicker, children: /* @__PURE__ */ jsxs(View, { style: styles5.modalRoot, children: [
+      /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          style: styles5.backdrop,
+          onPress: closePicker,
+          accessibilityRole: "button",
+          accessibilityLabel: labels?.closeCalendar ?? translations.closeCalendar
+        }
+      ),
+      anchor ? /* @__PURE__ */ jsx(
+        View,
+        {
+          style: [
+            styles5.panelPosition,
+            {
+              top: dropdownTop,
+              left: panelLeft,
+              width: panelWidth,
+              height: CALENDAR_PANEL_HEIGHT
+            }
+          ],
+          children: props.mode === "range" ? /* @__PURE__ */ jsx(
+            Calendar,
+            {
+              mode: "range",
+              value: props.value,
+              onChange: handleRangeSelect,
+              viewDate,
+              defaultViewDate: resolvedDefaultViewDate,
+              onViewDateChange,
+              locale: resolvedLocale,
+              labels,
+              minDate,
+              maxDate,
+              today,
+              className: panelClassName
+            }
+          ) : /* @__PURE__ */ jsx(
+            Calendar,
+            {
+              mode: "single",
+              value: props.value,
+              onChange: handleSingleSelect,
+              viewDate,
+              defaultViewDate: resolvedDefaultViewDate,
+              onViewDateChange,
+              locale: resolvedLocale,
+              labels,
+              minDate,
+              maxDate,
+              today,
+              className: panelClassName
+            }
+          )
+        }
+      ) : null
+    ] }) })
+  ] });
+}
+var styles5 = StyleSheet.create({
+  wrapper: {
+    width: CALENDAR_FIELD_WIDTH,
+    maxWidth: "100%",
+    gap: SELECT_LABEL_GAP
+  },
+  fieldOutline: {
+    width: CALENDAR_FIELD_WIDTH,
+    maxWidth: "100%",
+    alignSelf: "flex-start"
+  },
+  label: {
+    ...calendarLabelTypography
+  },
+  iconSlot: {
+    width: CALENDAR_FIELD_ICON_SIZE,
+    height: CALENDAR_FIELD_ICON_SIZE,
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0
+  },
+  modalRoot: {
+    flex: 1
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: colors.transparent
+  },
+  panelPosition: {
+    position: "absolute",
+    zIndex: 1
+  },
+  error: {
+    fontSize: 12,
+    lineHeight: 12,
+    color: colors.inputError
+  },
+  hint: {
+    fontSize: 12,
+    lineHeight: 12,
+    color: colors.stormGray300
+  }
+});
+
+// src/icons/lockIconPaths.ts
+var LOCK_ICON_PATH = "M5.83333 8.33317V5.83317C5.83333 4.7281 6.27232 3.66829 7.05372 2.88689C7.83512 2.10549 8.89493 1.6665 10 1.6665C11.1051 1.6665 12.1649 2.10549 12.9463 2.88689C13.7277 3.66829 14.1667 4.7281 14.1667 5.83317V8.33317M10.8333 13.3332C10.8333 13.7934 10.4602 14.1665 10 14.1665C9.53976 14.1665 9.16667 13.7934 9.16667 13.3332C9.16667 12.8729 9.53976 12.4998 10 12.4998C10.4602 12.4998 10.8333 12.8729 10.8333 13.3332ZM4.16667 8.33317H15.8333C16.7538 8.33317 17.5 9.07936 17.5 9.99984V16.6665C17.5 17.587 16.7538 18.3332 15.8333 18.3332H4.16667C3.24619 18.3332 2.5 17.587 2.5 16.6665V9.99984C2.5 9.07936 3.24619 8.33317 4.16667 8.33317Z";
+function LockIcon({
+  size = 20,
+  color = "#c7cdd1",
+  strokeWidth = 2
+}) {
+  return /* @__PURE__ */ jsx(Svg3, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx(
+    Path,
+    {
+      d: LOCK_ICON_PATH,
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+
+export { Button, Calendar, CalendarIcon, CalendarLocaleProvider, CountryCodeSelector, DatePicker, LockIcon, PhoneInput, Select, calendarTranslations, countries, defaultCountry, findCountry, formatLocalizedCalendarMonthYear, getCalendarMonthLabels, getCalendarTranslations, resolveCalendarLocale, resolveWeekdayLabels, useCalendarLocale };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map