@ecohouse/ui 0.1.4 → 0.1.5

package/dist/index.js

@@ -1,5 +1,5 @@
 import { forwardRef, useRef, useMemo, useState, useCallback, useEffect, useLayoutEffect } from 'react';
-import { Platform, View, Pressable, Image, Text, StyleSheet, TouchableOpacity, TextInput, ScrollView, Animated, Easing } from 'react-native';
+import { Pressable, View, Text, StyleSheet, Platform, Image, TouchableOpacity, TextInput, ScrollView, Animated, Easing } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -34,6 +34,7 @@ var colors = {
   red: "#A63E3E",
   lightGrey: "#B7B7B7",
   primaryMuted: "#B464360F",
+  primaryHover: "#B4643633",
   redMuted: "#A63E3E0F",
   redHover: "#A63E3E33",
   grey0: grey["0"],
@@ -142,6 +143,38 @@ var avatarTypography = {
     letterSpacing: 0
   }
 };
+var datePickerTypography = {
+  field: {
+    fontFamily: fonts.sans,
+    fontSize: 12,
+    fontWeight: "400",
+    lineHeight: 12,
+    letterSpacing: 0.36
+  },
+  /** Calendar month/year heading — Bold, centered, White. */
+  monthHeading: {
+    fontFamily: fonts.sans,
+    fontSize: 14,
+    fontWeight: "700",
+    lineHeight: 14,
+    letterSpacing: 0
+  },
+  /** Weekday header (ԵՐ, ԵՔ, ...) — Regular, uppercase, centered, Grey/300. */
+  weekday: {
+    fontFamily: fonts.sans,
+    fontSize: 12,
+    fontWeight: "400",
+    lineHeight: 12,
+    letterSpacing: 0
+  },
+  day: {
+    fontFamily: fonts.sans,
+    fontSize: 14,
+    fontWeight: "400",
+    lineHeight: 14,
+    letterSpacing: 0
+  }
+};
 var textareaTypography = {
   label: {
     fontFamily: fonts.sans,
@@ -242,6 +275,25 @@ function CalendarIcon({ size = 20, color = colors.primary, strokeWidth = 1.5 })
   ) });
 }
 
+// src/icons/CalendarOutline/calendarOutlinePath.ts
+var CALENDAR_OUTLINE_PATH = "M10.6667 1.33334V4.00001M5.33333 1.33334V4.00001M2 6.66668H14M5.2 2.66668H10.8C11.9201 2.66668 12.4802 2.66668 12.908 2.88466C13.2843 3.07641 13.5903 3.38237 13.782 3.7587C14 4.18652 14 4.74657 14 5.86668V11.4667C14 12.5868 14 13.1468 13.782 13.5747C13.5903 13.951 13.2843 14.2569 12.908 14.4487C12.4802 14.6667 11.9201 14.6667 10.8 14.6667H5.2C4.0799 14.6667 3.51984 14.6667 3.09202 14.4487C2.71569 14.2569 2.40973 13.951 2.21799 13.5747C2 13.1468 2 12.5868 2 11.4667V5.86668C2 4.74657 2 4.18652 2.21799 3.7587C2.40973 3.38237 2.71569 3.07641 3.09202 2.88466C3.51984 2.66668 4.0799 2.66668 5.2 2.66668Z";
+function CalendarOutlineIcon({
+  size = 20,
+  color = colors.primary,
+  strokeWidth = 1.5
+}) {
+  return /* @__PURE__ */ jsx(Svg, { width: size, height: size, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx(
+    Path,
+    {
+      d: CALENDAR_OUTLINE_PATH,
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+
 // src/icons/Camera/cameraPath.ts
 var CAMERA_PATH = "M9.48898 7H6.2002C5.08009 7 4.51962 7 4.0918 7.21799C3.71547 7.40973 3.40973 7.71547 3.21799 8.0918C3 8.51962 3 9.08009 3 10.2002V15.8002C3 16.9203 3 17.4796 3.21799 17.9074C3.40973 18.2837 3.71547 18.5905 4.0918 18.7822C4.5192 19 5.07899 19 6.19691 19H17.8031C18.921 19 19.48 19 19.9074 18.7822C20.2837 18.5905 20.5905 18.2837 20.7822 17.9074C21 17.48 21 16.921 21 15.8031V10.1969C21 9.07899 21 8.5192 20.7822 8.0918C20.5905 7.71547 20.2837 7.40973 19.9074 7.21799C19.4796 7 18.9203 7 17.8002 7H14.5108M9.48898 7H9.55078M9.48898 7C9.50151 7.00001 9.51468 7 9.52857 7L9.55078 7M9.48898 7C9.38286 6.99995 9.32339 6.99941 9.27637 6.99414C8.68878 6.92835 8.28578 6.36908 8.40918 5.79084C8.42066 5.73703 8.44336 5.66894 8.4883 5.53412L8.49023 5.52841C8.54156 5.37443 8.56723 5.29743 8.59558 5.22949C8.88586 4.53389 9.54322 4.06083 10.2949 4.00541C10.3683 4 10.449 4 10.6113 4H13.3886C13.5509 4 13.6322 4 13.7057 4.00541C14.4574 4.06083 15.114 4.53389 15.4043 5.22949C15.4326 5.29743 15.4584 5.37434 15.5098 5.52832C15.556 5.66699 15.5791 5.73636 15.5908 5.79093C15.7142 6.36917 15.3118 6.92835 14.7242 6.99414C14.6772 6.99941 14.6171 6.99995 14.5108 7M9.55078 7H14.449M14.449 7H14.5108M14.449 7L14.4712 7C14.4851 7 14.4983 7.00001 14.5108 7M12 16C10.3431 16 9 14.6569 9 13C9 11.3431 10.3431 10 12 10C13.6569 10 15 11.3431 15 13C15 14.6569 13.6569 16 12 16Z";
 function CameraIcon({ size = 24, color = colors.primary, strokeWidth = 2 }) {
@@ -306,6 +358,21 @@ function ChevronDownIcon({
   ) });
 }
 
+// src/icons/ChevronLeft/chevronLeftPath.ts
+var CHEVRON_LEFT_PATH = "M12.5 15L7.5 10L12.5 5";
+function ChevronLeftIcon({ size = 20, color = colors.primary, strokeWidth = 2 }) {
+  return /* @__PURE__ */ jsx(Svg, { 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"
+    }
+  ) });
+}
+
 // src/icons/Clock/clockPath.ts
 var CLOCK_PATH = "M12 7V12H17M12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21Z";
 function ClockIcon({ size = 24, color = colors.primary, strokeWidth = 2 }) {
@@ -600,10 +667,12 @@ var icons = {
   bell: BellIcon,
   building: BuildingIcon,
   calendar: CalendarIcon,
+  calendarOutline: CalendarOutlineIcon,
   camera: CameraIcon,
   check: CheckIcon,
   checkBadge: CheckBadgeIcon,
   chevronDown: ChevronDownIcon,
+  chevronLeft: ChevronLeftIcon,
   clock: ClockIcon,
   facebook: FacebookIcon,
   heart: HeartIcon,
@@ -625,8 +694,19 @@ var icons = {
 };
 var iconNames = Object.keys(icons);
 var iconGroups = {
-  navigation: ["arrowRight", "chevronDown", "home", "navigate"],
-  actions: ["show", "bell", "camera", "key", "check", "checkBadge", "search", "calendar", "heart"],
+  navigation: ["arrowRight", "chevronDown", "chevronLeft", "home", "navigate"],
+  actions: [
+    "show",
+    "bell",
+    "camera",
+    "key",
+    "check",
+    "checkBadge",
+    "search",
+    "calendar",
+    "calendarOutline",
+    "heart"
+  ],
   objects: ["bag", "building", "clock", "user", "video"],
   communication: ["mail", "phone"],
   social: ["facebook", "instagram", "linkedin"],
@@ -692,13 +772,104 @@ function useApplyWebClassName(ref, className, enabled = true) {
     };
   }, [ref, className, enabled]);
 }
+var ITEM_RADIUS = 12;
+var ICON_SIZE = 16;
+var MenuItem = forwardRef(function MenuItem2({
+  icon,
+  label,
+  onPress,
+  disabled = false,
+  backgroundColor,
+  hoverColor,
+  style,
+  labelStyle,
+  className,
+  accessibilityLabel,
+  hitSlop = 4,
+  onHoverIn,
+  onHoverOut,
+  onPressIn,
+  onPressOut,
+  ...rest
+}, forwardedRef) {
+  const containerRef = useRef(null);
+  const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
+  const [hovered, setHovered] = useState(false);
+  useApplyWebClassName(containerRef, className);
+  const resolvedBackground = hovered ? hoverColor ?? colors.grey600 : backgroundColor ?? "transparent";
+  const resolvedAccessibilityLabel = accessibilityLabel ?? label;
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      ...rest,
+      ref: setContainerRef,
+      onPress,
+      disabled,
+      hitSlop,
+      onHoverIn: (event) => {
+        setHovered(true);
+        onHoverIn?.(event);
+      },
+      onHoverOut: (event) => {
+        setHovered(false);
+        onHoverOut?.(event);
+      },
+      onPressIn: (event) => {
+        setHovered(true);
+        onPressIn?.(event);
+      },
+      onPressOut: (event) => {
+        setHovered(false);
+        onPressOut?.(event);
+      },
+      accessibilityRole: "menuitem",
+      accessibilityLabel: resolvedAccessibilityLabel,
+      accessibilityState: { disabled },
+      style: [
+        styles.root,
+        { backgroundColor: resolvedBackground },
+        disabled && styles.disabled,
+        style
+      ],
+      children: [
+        icon ? /* @__PURE__ */ jsx(View, { style: styles.iconSlot, children: icon }) : null,
+        /* @__PURE__ */ jsx(Text, { style: [styles.label, labelStyle], numberOfLines: 1, children: label })
+      ]
+    }
+  );
+});
+var styles = StyleSheet.create({
+  root: {
+    minHeight: 40,
+    borderRadius: ITEM_RADIUS,
+    paddingVertical: 12,
+    paddingHorizontal: 12,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    alignSelf: "stretch"
+  },
+  disabled: {
+    opacity: 0.5
+  },
+  iconSlot: {
+    width: ICON_SIZE,
+    height: ICON_SIZE,
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0
+  },
+  label: {
+    ...avatarTypography.menuItem,
+    color: colors.white,
+    flex: 1
+  }
+});
 var IMAGE_SIZE = 48;
 var CONTAINER_RADIUS = 71;
 var CHEVRON_SIZE = 20;
 var FALLBACK_ICON_SIZE = 20;
 var MENU_RADIUS = 16;
-var MENU_ITEM_RADIUS = 12;
-var MENU_ITEM_ICON_SIZE = 16;
 var Avatar = forwardRef(function Avatar2({
   name,
   email,
@@ -721,8 +892,8 @@ var Avatar = forwardRef(function Avatar2({
   const containerRef = useRef(null);
   const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
   const [imageFailed, setImageFailed] = useState(false);
-  const [hoveredKey, setHoveredKey] = useState(null);
-  const hasMenu = Boolean(menuItems && menuItems.length > 0);
+  const resolvedMenuItems = menuItems ?? [];
+  const hasMenu = resolvedMenuItems.length > 0;
   const isInteractive = onPress != null || hasMenu;
   const isOpenControlled = typeof openProp === "boolean";
   const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
@@ -732,7 +903,6 @@ var Avatar = forwardRef(function Avatar2({
     (next) => {
       if (!isOpenControlled) setUncontrolledOpen(next);
       onOpenChange?.(next);
-      if (!next) setHoveredKey(null);
     },
     [isOpenControlled, onOpenChange]
   );
@@ -785,7 +955,7 @@ var Avatar = forwardRef(function Avatar2({
   }, [isOpen, closeAndFocusTrigger]);
   const hasImage = Boolean(imageUrl) && !imageFailed;
   const resolvedAccessibilityLabel = accessibilityLabel ?? [name, email].filter(Boolean).join(", ");
-  return /* @__PURE__ */ jsxs(View, { ref: wrapperRef, style: [styles.wrapper, isOpen && styles.wrapperOpen], children: [
+  return /* @__PURE__ */ jsxs(View, { ref: wrapperRef, style: [styles2.wrapper, isOpen && styles2.wrapperOpen], children: [
     /* @__PURE__ */ jsxs(
       Pressable,
       {
@@ -797,55 +967,42 @@ var Avatar = forwardRef(function Avatar2({
         accessibilityRole: isInteractive ? "button" : void 0,
         accessibilityLabel: resolvedAccessibilityLabel,
         accessibilityState: isInteractive ? { disabled, expanded: hasMenu ? isOpen : void 0 } : void 0,
-        style: [styles.root, disabled && styles.disabled, style],
+        style: [styles2.root, disabled && styles2.disabled, style],
         children: [
-          /* @__PURE__ */ jsx(View, { style: styles.imageWrap, children: hasImage ? /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(View, { style: styles2.imageWrap, children: hasImage ? /* @__PURE__ */ jsx(
             Image,
             {
               source: { uri: imageUrl ?? void 0 },
-              style: styles.image,
+              style: styles2.image,
               onError: () => setImageFailed(true)
             }
-          ) : /* @__PURE__ */ jsx(View, { style: styles.imageFallback, children: /* @__PURE__ */ jsx(UserIcon, { size: FALLBACK_ICON_SIZE, color: colors.primary }) }) }),
-          /* @__PURE__ */ jsxs(View, { style: styles.textColumn, children: [
-            /* @__PURE__ */ jsx(Text, { style: styles.name, numberOfLines: 1, children: name }),
-            email ? /* @__PURE__ */ jsx(Text, { style: styles.email, numberOfLines: 1, children: email }) : null
+          ) : /* @__PURE__ */ jsx(View, { style: styles2.imageFallback, children: /* @__PURE__ */ jsx(UserIcon, { size: FALLBACK_ICON_SIZE, color: colors.primary }) }) }),
+          /* @__PURE__ */ jsxs(View, { style: styles2.textColumn, children: [
+            /* @__PURE__ */ jsx(Text, { style: styles2.name, numberOfLines: 1, children: name }),
+            email ? /* @__PURE__ */ jsx(Text, { style: styles2.email, numberOfLines: 1, children: email }) : null
           ] }),
-          showChevron ? /* @__PURE__ */ jsx(View, { style: [styles.chevronSlot, isOpen && styles.chevronOpen], children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: CHEVRON_SIZE, color: isOpen ? colors.primary : colors.grey100 }) }) : null
+          showChevron ? /* @__PURE__ */ jsx(View, { style: [styles2.chevronSlot, isOpen && styles2.chevronOpen], children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: CHEVRON_SIZE, color: isOpen ? colors.primary : colors.grey100 }) }) : null
         ]
       }
     ),
-    hasMenu && isOpen ? /* @__PURE__ */ jsx(View, { style: [styles.menu, menuWidth != null && { right: void 0, width: menuWidth }], children: menuItems.map((item) => {
+    hasMenu && isOpen ? /* @__PURE__ */ jsx(View, { style: [styles2.menu, menuWidth != null && { right: void 0, width: menuWidth }], children: resolvedMenuItems.map((item) => {
       const itemKey = item.key ?? item.label;
-      const isHovered = hoveredKey === itemKey;
-      const backgroundColor = isHovered ? item.hoverColor ?? colors.grey600 : item.backgroundColor ?? "transparent";
-      return /* @__PURE__ */ jsxs(
-        Pressable,
+      return /* @__PURE__ */ jsx(
+        MenuItem,
         {
-          onPress: () => handleItemPress(item),
+          icon: item.icon,
+          label: item.label,
           disabled: item.disabled,
-          onHoverIn: () => setHoveredKey(itemKey),
-          onHoverOut: () => setHoveredKey((current) => current === itemKey ? null : current),
-          onPressIn: () => setHoveredKey(itemKey),
-          onPressOut: () => setHoveredKey((current) => current === itemKey ? null : current),
-          accessibilityRole: "menuitem",
-          accessibilityState: { disabled: item.disabled },
-          style: [
-            styles.menuItem,
-            { backgroundColor },
-            item.disabled && styles.menuItemDisabled
-          ],
-          children: [
-            item.icon ? /* @__PURE__ */ jsx(View, { style: styles.menuItemIcon, children: item.icon }) : null,
-            /* @__PURE__ */ jsx(Text, { style: styles.menuItemLabel, numberOfLines: 1, children: item.label })
-          ]
+          backgroundColor: item.backgroundColor,
+          hoverColor: item.hoverColor,
+          onPress: () => handleItemPress(item)
         },
         itemKey
       );
     }) }) : null
   ] });
 });
-var styles = StyleSheet.create({
+var styles2 = StyleSheet.create({
   wrapper: {
     position: "relative",
     alignSelf: "flex-start"
@@ -928,30 +1085,6 @@ var styles = StyleSheet.create({
         elevation: 8
       }
     })
-  },
-  menuItem: {
-    minHeight: 40,
-    borderRadius: MENU_ITEM_RADIUS,
-    paddingVertical: 12,
-    paddingHorizontal: 12,
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8
-  },
-  menuItemDisabled: {
-    opacity: 0.5
-  },
-  menuItemIcon: {
-    width: MENU_ITEM_ICON_SIZE,
-    height: MENU_ITEM_ICON_SIZE,
-    alignItems: "center",
-    justifyContent: "center",
-    flexShrink: 0
-  },
-  menuItemLabel: {
-    ...avatarTypography.menuItem,
-    color: colors.white,
-    flex: 1
   }
 });
 var variantConfig = {
@@ -1026,7 +1159,7 @@ var Button = forwardRef(
     useApplyWebClassName(textRef, textClassName);
     const iconNode = customIcon ?? /* @__PURE__ */ jsx(ArrowRightIcon, { size: metrics.iconSize, color: preset.iconColor });
     const containerStyle = [
-      styles2.base,
+      styles3.base,
       {
         minHeight: metrics.minHeight,
         borderRadius: metrics.borderRadius,
@@ -1037,15 +1170,15 @@ var Button = forwardRef(
         paddingRight: hasIcon ? metrics.paddingRightWithIcon : metrics.paddingRight,
         gap: hasIcon ? metrics.gap : 0
       },
-      disabled && styles2.disabled,
+      disabled && styles3.disabled,
       style
     ];
     const labelStyle = [
-      styles2.label,
+      styles3.label,
       metrics.text,
       { color: preset.textColor },
-      Platform.OS === "android" ? styles2.labelAndroid : null,
-      !hasIcon && styles2.labelCentered,
+      Platform.OS === "android" ? styles3.labelAndroid : null,
+      !hasIcon && styles3.labelCentered,
       textStyle
     ];
     return /* @__PURE__ */ jsxs(
@@ -1066,7 +1199,7 @@ var Button = forwardRef(
             View,
             {
               style: [
-                styles2.iconContainer,
+                styles3.iconContainer,
                 {
                   width: metrics.iconContainerSize,
                   height: metrics.iconContainerSize,
@@ -1082,7 +1215,7 @@ var Button = forwardRef(
     );
   }
 );
-var styles2 = StyleSheet.create({
+var styles3 = StyleSheet.create({
   base: {
     flexDirection: "row",
     alignItems: "center",
@@ -1160,13 +1293,13 @@ var Checkbox = forwardRef(function Checkbox2({
       accessibilityRole: "checkbox",
       accessibilityLabel: resolvedAccessibilityLabel,
       accessibilityState: { checked: isActive, disabled },
-      style: [styles3.root, disabled && styles3.disabled, style],
+      style: [styles4.root, disabled && styles4.disabled, style],
       children: [
         /* @__PURE__ */ jsx(
           View,
           {
             style: [
-              styles3.box,
+              styles4.box,
               {
                 backgroundColor: chrome.backgroundColor,
                 borderColor: chrome.borderColor
@@ -1175,12 +1308,12 @@ var Checkbox = forwardRef(function Checkbox2({
             children: isActive ? /* @__PURE__ */ jsx(CheckIcon, { size: CHECK_SIZE, color: colors.primary, strokeWidth: CHECK_STROKE }) : null
           }
         ),
-        labelContent != null && labelContent !== false ? typeof labelContent === "string" || typeof labelContent === "number" ? /* @__PURE__ */ jsx(Text, { style: [styles3.label, labelStyle], children: labelContent }) : labelContent : null
+        labelContent != null && labelContent !== false ? typeof labelContent === "string" || typeof labelContent === "number" ? /* @__PURE__ */ jsx(Text, { style: [styles4.label, labelStyle], children: labelContent }) : labelContent : null
       ]
     }
   );
 });
-var styles3 = StyleSheet.create({
+var styles4 = StyleSheet.create({
   root: {
     flexDirection: "row",
     alignItems: "center",
@@ -1204,7 +1337,525 @@ var styles3 = StyleSheet.create({
     color: colors.white
   }
 });
-var DEFAULT_WIDTH = 308;
+
+// src/utils/dateUtils.ts
+function startOfDay(date) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+function isSameDay(a, b) {
+  if (a == null || b == null) return false;
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function isSameMonth(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
+}
+function addMonths(date, amount) {
+  return new Date(date.getFullYear(), date.getMonth() + amount, 1);
+}
+function isBefore(a, b) {
+  return startOfDay(a).getTime() < startOfDay(b).getTime();
+}
+function isAfter(a, b) {
+  return startOfDay(a).getTime() > startOfDay(b).getTime();
+}
+function isWithinRange(date, start, end) {
+  const time = startOfDay(date).getTime();
+  return time >= startOfDay(start).getTime() && time <= startOfDay(end).getTime();
+}
+function isDateDisabled(date, min, max) {
+  if (min && isBefore(date, min)) return true;
+  if (max && isAfter(date, max)) return true;
+  return false;
+}
+function formatDate(date) {
+  const day = String(date.getDate()).padStart(2, "0");
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  return `${day}.${month}.${date.getFullYear()}`;
+}
+function getMonthMatrix(monthDate, weekStartsOn = 1) {
+  const year = monthDate.getFullYear();
+  const month = monthDate.getMonth();
+  const firstOfMonth = new Date(year, month, 1);
+  const firstWeekday = firstOfMonth.getDay();
+  const leadingDays = (firstWeekday - weekStartsOn + 7) % 7;
+  const gridStart = new Date(year, month, 1 - leadingDays);
+  const weeks = [];
+  let cursor = gridStart;
+  for (let week = 0; week < 6; week += 1) {
+    const days = [];
+    for (let day = 0; day < 7; day += 1) {
+      days.push(cursor);
+      cursor = new Date(cursor.getFullYear(), cursor.getMonth(), cursor.getDate() + 1);
+    }
+    weeks.push(days);
+  }
+  return weeks;
+}
+var DEFAULT_MONTH_NAMES = [
+  "\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"
+];
+var DEFAULT_WEEKDAY_LABELS = ["\u0535\u0550", "\u0535\u0554", "\u0549\u0550", "\u0540\u0546", "\u0548\u0552\u0550", "\u0547\u0532", "\u053F\u0550"];
+var EMPTY_RANGE = { start: null, end: null };
+var DEFAULT_WIDTH = 380;
+var TRIGGER_HEIGHT = 44;
+var TRIGGER_RADIUS = 60;
+var MENU_RADIUS2 = 20;
+var ICON_SIZE2 = 20;
+var NAV_ICON_SIZE = 20;
+var DAY_CELL_HEIGHT = 44;
+var DAY_CIRCLE_SIZE = 44;
+var DatePicker = forwardRef(
+  function DatePicker2(props, forwardedRef) {
+    const {
+      placeholder = "Select date",
+      open: openProp,
+      defaultOpen = false,
+      onOpenChange,
+      disabled = false,
+      closeOnSelect = true,
+      minDate,
+      maxDate,
+      defaultVisibleMonth,
+      monthNames = DEFAULT_MONTH_NAMES,
+      weekdayLabels = DEFAULT_WEEKDAY_LABELS,
+      formatValue = formatDate,
+      weekStartsOn = 1,
+      style,
+      className,
+      accessibilityLabel,
+      // Pulled out only to keep them off `rest` (which is spread onto the root View);
+      // the real values are read from `props` directly below to preserve discriminated typing.
+      range: _range,
+      value: _value,
+      defaultValue: _defaultValue,
+      onValueChange: _onValueChange,
+      ...rest
+    } = props;
+    const isRange = props.range === true;
+    const valueProp = props.value;
+    const rootRef = useRef(null);
+    const triggerRef = useRef(null);
+    const setRootRef = useMemo(() => mergeRefs(rootRef, forwardedRef), [forwardedRef]);
+    const isOpenControlled = typeof openProp === "boolean";
+    const isValueControlled = valueProp !== void 0;
+    const [uncontrolledSingle, setUncontrolledSingle] = useState(
+      !isRange ? props.defaultValue ?? null : null
+    );
+    const [uncontrolledRange, setUncontrolledRange] = useState(
+      isRange ? props.defaultValue ?? EMPTY_RANGE : EMPTY_RANGE
+    );
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+    const [hoveredDayKey, setHoveredDayKey] = useState(null);
+    const rangeValue = isRange ? isValueControlled ? valueProp ?? EMPTY_RANGE : uncontrolledRange : EMPTY_RANGE;
+    const singleValue = !isRange ? isValueControlled ? valueProp ?? null : uncontrolledSingle : null;
+    const isOpen = isOpenControlled ? openProp : uncontrolledOpen;
+    const [visibleMonth, setVisibleMonth] = useState(() => {
+      const anchor = defaultVisibleMonth ?? (isRange ? rangeValue.start : singleValue) ?? /* @__PURE__ */ new Date();
+      return new Date(anchor.getFullYear(), anchor.getMonth(), 1);
+    });
+    useApplyWebClassName(rootRef, className);
+    const setOpen = useCallback(
+      (next) => {
+        if (!isOpenControlled) setUncontrolledOpen(next);
+        onOpenChange?.(next);
+        if (next) {
+          const anchor = (isRange ? rangeValue.start : singleValue) ?? /* @__PURE__ */ new Date();
+          setVisibleMonth(new Date(anchor.getFullYear(), anchor.getMonth(), 1));
+        } else {
+          setHoveredDayKey(null);
+        }
+      },
+      [isOpenControlled, isRange, onOpenChange, rangeValue.start, singleValue]
+    );
+    useEffect(() => {
+      if (Platform.OS !== "web" || !isOpen) return;
+      const handlePointerDown = (event) => {
+        const root = rootRef.current;
+        const target = event.target;
+        if (root?.contains && target instanceof Node && !root.contains(target)) {
+          setOpen(false);
+        }
+      };
+      document.addEventListener("mousedown", handlePointerDown);
+      document.addEventListener("touchstart", handlePointerDown);
+      return () => {
+        document.removeEventListener("mousedown", handlePointerDown);
+        document.removeEventListener("touchstart", handlePointerDown);
+      };
+    }, [isOpen, setOpen]);
+    const focusTrigger = useCallback(() => {
+      const node = triggerRef.current;
+      node?.focus?.();
+    }, []);
+    const closeAndFocusTrigger = useCallback(() => {
+      setOpen(false);
+      focusTrigger();
+    }, [focusTrigger, setOpen]);
+    useEffect(() => {
+      if (Platform.OS !== "web" || !isOpen) return;
+      const handleKeyDown = (event) => {
+        if (event.key === "Escape") {
+          event.preventDefault();
+          closeAndFocusTrigger();
+        }
+      };
+      document.addEventListener("keydown", handleKeyDown);
+      return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [isOpen, closeAndFocusTrigger]);
+    const handleTriggerPress = () => {
+      if (disabled) return;
+      setOpen(!isOpen);
+    };
+    const handleDayPress = useCallback(
+      (day) => {
+        if (disabled || isDateDisabled(day, minDate, maxDate)) return;
+        const picked = startOfDay(day);
+        if (!isRange) {
+          if (!isValueControlled) setUncontrolledSingle(picked);
+          props.onValueChange?.(picked);
+          if (closeOnSelect) setOpen(false);
+          return;
+        }
+        const { start, end } = rangeValue;
+        const startingNewRange = !start || start && end;
+        const nextRange = startingNewRange ? { start: picked, end: null } : isBefore(picked, start) ? { start: picked, end: null } : { start, end: picked };
+        if (!isValueControlled) setUncontrolledRange(nextRange);
+        props.onValueChange?.(nextRange);
+        if (closeOnSelect && nextRange.start && nextRange.end) setOpen(false);
+      },
+      [
+        closeOnSelect,
+        disabled,
+        isRange,
+        isValueControlled,
+        maxDate,
+        minDate,
+        props,
+        rangeValue,
+        setOpen
+      ]
+    );
+    const handlePrevMonth = () => setVisibleMonth((current) => addMonths(current, -1));
+    const handleNextMonth = () => setVisibleMonth((current) => addMonths(current, 1));
+    const weeks = useMemo(
+      () => getMonthMatrix(visibleMonth, weekStartsOn),
+      [visibleMonth, weekStartsOn]
+    );
+    const today = useMemo(() => startOfDay(/* @__PURE__ */ new Date()), []);
+    const hasValue = isRange ? rangeValue.start != null : singleValue != null;
+    const triggerLabel = isRange ? rangeValue.start && rangeValue.end ? `${formatValue(rangeValue.start)} - ${formatValue(rangeValue.end)}` : rangeValue.start ? `${formatValue(rangeValue.start)} - ...` : placeholder : singleValue ? formatValue(singleValue) : placeholder;
+    const triggerBorderColor = isOpen ? colors.primaryMuted : colors.grey700;
+    const triggerTextColor = hasValue ? colors.white : colors.grey100;
+    const resolvedAccessibilityLabel = accessibilityLabel ?? placeholder;
+    return /* @__PURE__ */ jsx(
+      View,
+      {
+        ...rest,
+        ref: setRootRef,
+        style: [styles5.root, isOpen && styles5.rootOpen, disabled && styles5.disabled, style],
+        accessibilityState: { disabled, expanded: isOpen },
+        children: /* @__PURE__ */ jsxs(View, { style: [styles5.triggerWrap, isOpen && styles5.triggerWrapOpen], children: [
+          /* @__PURE__ */ jsxs(
+            Pressable,
+            {
+              ref: triggerRef,
+              onPress: handleTriggerPress,
+              disabled,
+              accessibilityRole: "button",
+              accessibilityLabel: resolvedAccessibilityLabel,
+              accessibilityState: { disabled, expanded: isOpen },
+              style: [
+                styles5.trigger,
+                { borderColor: triggerBorderColor, backgroundColor: colors.grey700 }
+              ],
+              children: [
+                /* @__PURE__ */ jsx(Text, { style: [styles5.triggerText, { color: triggerTextColor }], numberOfLines: 1, children: triggerLabel }),
+                /* @__PURE__ */ jsx(View, { style: styles5.iconSlot, children: /* @__PURE__ */ jsx(CalendarOutlineIcon, { size: ICON_SIZE2, color: colors.grey100 }) })
+              ]
+            }
+          ),
+          isOpen ? /* @__PURE__ */ jsxs(View, { style: styles5.menu, children: [
+            /* @__PURE__ */ jsxs(View, { style: styles5.calendarHeader, children: [
+              /* @__PURE__ */ jsx(
+                Pressable,
+                {
+                  onPress: handlePrevMonth,
+                  hitSlop: 8,
+                  accessibilityRole: "button",
+                  accessibilityLabel: "Previous month",
+                  style: styles5.navButton,
+                  children: /* @__PURE__ */ jsx(ChevronLeftIcon, { size: NAV_ICON_SIZE, color: colors.white })
+                }
+              ),
+              /* @__PURE__ */ jsxs(Text, { style: styles5.monthHeading, children: [
+                monthNames[visibleMonth.getMonth()],
+                " ",
+                visibleMonth.getFullYear()
+              ] }),
+              /* @__PURE__ */ jsx(
+                Pressable,
+                {
+                  onPress: handleNextMonth,
+                  hitSlop: 8,
+                  accessibilityRole: "button",
+                  accessibilityLabel: "Next month",
+                  style: styles5.navButton,
+                  children: /* @__PURE__ */ jsx(View, { style: styles5.navIconMirror, children: /* @__PURE__ */ jsx(ChevronLeftIcon, { size: NAV_ICON_SIZE, color: colors.white }) })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs(View, { children: [
+              /* @__PURE__ */ jsx(View, { style: styles5.weekdayRow, children: weekdayLabels.map((weekdayLabel, index) => /* @__PURE__ */ jsx(View, { style: styles5.dayCellWrap, children: /* @__PURE__ */ jsx(Text, { style: styles5.weekdayText, children: weekdayLabel }) }, `${weekdayLabel}-${index}`)) }),
+              weeks.map((week, weekIndex) => {
+                let rangeHighlightStyle = null;
+                if (isRange && rangeValue.start && rangeValue.end) {
+                  const rangeIndices = week.reduce((acc, day, index) => {
+                    if (isWithinRange(day, rangeValue.start, rangeValue.end)) {
+                      acc.push(index);
+                    }
+                    return acc;
+                  }, []);
+                  if (rangeIndices.length > 0) {
+                    const first = rangeIndices[0];
+                    const last = rangeIndices[rangeIndices.length - 1];
+                    const startsHere = isSameDay(week[first], rangeValue.start);
+                    const endsHere = isSameDay(week[last], rangeValue.end);
+                    const cellPct = 100 / 7;
+                    const halfCellPct = cellPct / 2;
+                    let leftPct = first * cellPct;
+                    let widthPct = (last - first + 1) * cellPct;
+                    if (startsHere) {
+                      leftPct += halfCellPct;
+                      widthPct -= halfCellPct;
+                    }
+                    if (endsHere) {
+                      widthPct -= halfCellPct;
+                    }
+                    if (widthPct > 0) {
+                      rangeHighlightStyle = {
+                        left: `${leftPct}%`,
+                        width: `${widthPct}%`
+                      };
+                    }
+                  }
+                }
+                return /* @__PURE__ */ jsxs(
+                  View,
+                  {
+                    style: [styles5.weekRow, weekIndex > 0 && styles5.weekRowSpaced],
+                    children: [
+                      rangeHighlightStyle ? /* @__PURE__ */ jsx(
+                        View,
+                        {
+                          pointerEvents: "none",
+                          style: [styles5.rangeHighlight, rangeHighlightStyle]
+                        }
+                      ) : null,
+                      week.map((day, dayIndex) => {
+                        const inCurrentMonth = isSameMonth(day, visibleMonth);
+                        const isToday = isSameDay(day, today);
+                        const isSelectedSingle = !isRange && isSameDay(day, singleValue);
+                        const isRangeStart = isRange && isSameDay(day, rangeValue.start);
+                        const isRangeEnd = isRange && isSameDay(day, rangeValue.end);
+                        const isSelectedEndpoint = isSelectedSingle || isRangeStart || isRangeEnd;
+                        const dayDisabled = disabled || isDateDisabled(day, minDate, maxDate);
+                        const dayKey = startOfDay(day).getTime();
+                        const isHovered = !dayDisabled && !isSelectedEndpoint && hoveredDayKey === dayKey;
+                        const dayTextColor = isSelectedEndpoint ? colors.white : dayDisabled ? colors.grey400 : isToday ? colors.primary : !inCurrentMonth ? colors.grey300 : colors.white;
+                        return /* @__PURE__ */ jsxs(
+                          Pressable,
+                          {
+                            onPress: () => handleDayPress(day),
+                            disabled: dayDisabled,
+                            onHoverIn: () => setHoveredDayKey(dayKey),
+                            onHoverOut: () => setHoveredDayKey((current) => current === dayKey ? null : current),
+                            onPressIn: () => setHoveredDayKey(dayKey),
+                            onPressOut: () => setHoveredDayKey((current) => current === dayKey ? null : current),
+                            style: styles5.dayCellWrap,
+                            accessibilityRole: "button",
+                            accessibilityLabel: formatValue(day),
+                            accessibilityState: {
+                              disabled: dayDisabled,
+                              selected: isSelectedEndpoint
+                            },
+                            children: [
+                              /* @__PURE__ */ jsx(
+                                View,
+                                {
+                                  style: [
+                                    styles5.dayCircle,
+                                    isSelectedEndpoint && styles5.dayCircleSelected,
+                                    isHovered && styles5.dayCircleHovered
+                                  ],
+                                  children: /* @__PURE__ */ jsx(Text, { style: [styles5.dayText, { color: dayTextColor }], children: day.getDate() })
+                                }
+                              ),
+                              isToday && !isSelectedEndpoint ? /* @__PURE__ */ jsx(View, { style: styles5.todayDot }) : null
+                            ]
+                          },
+                          dayIndex
+                        );
+                      })
+                    ]
+                  },
+                  weekIndex
+                );
+              })
+            ] })
+          ] }) : null
+        ] })
+      }
+    );
+  }
+);
+var styles5 = StyleSheet.create({
+  root: {
+    width: DEFAULT_WIDTH,
+    gap: 8,
+    alignSelf: "flex-start"
+  },
+  rootOpen: {
+    zIndex: 30
+  },
+  disabled: {
+    opacity: 0.6
+  },
+  triggerWrap: {
+    position: "relative",
+    zIndex: 1
+  },
+  triggerWrapOpen: {
+    zIndex: 20
+  },
+  trigger: {
+    height: TRIGGER_HEIGHT,
+    borderRadius: TRIGGER_RADIUS,
+    borderWidth: 1,
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    overflow: "hidden"
+  },
+  triggerText: {
+    ...datePickerTypography.field,
+    flex: 1,
+    minWidth: 0
+  },
+  iconSlot: {
+    width: ICON_SIZE2,
+    height: ICON_SIZE2,
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0
+  },
+  menu: {
+    position: "absolute",
+    top: "100%",
+    left: 0,
+    right: 0,
+    marginTop: 8,
+    zIndex: 10,
+    borderRadius: MENU_RADIUS2,
+    padding: 12,
+    gap: 0,
+    backgroundColor: colors.grey700,
+    ...Platform.select({
+      web: {
+        boxShadow: `0 8px 24px ${colors.black}73`
+      },
+      default: {
+        elevation: 8
+      }
+    })
+  },
+  calendarHeader: {
+    height: 36,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
+  },
+  navButton: {
+    width: 36,
+    height: 36,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  navIconMirror: {
+    transform: [{ scaleX: -1 }]
+  },
+  monthHeading: {
+    ...datePickerTypography.monthHeading,
+    color: colors.white,
+    textAlign: "center"
+  },
+  weekdayRow: {
+    flexDirection: "row"
+  },
+  weekdayText: {
+    ...datePickerTypography.weekday,
+    color: colors.grey300,
+    textAlign: "center",
+    textTransform: "uppercase"
+  },
+  weekRow: {
+    flexDirection: "row",
+    position: "relative"
+  },
+  weekRowSpaced: {
+    marginTop: 8
+  },
+  rangeHighlight: {
+    position: "absolute",
+    top: (DAY_CELL_HEIGHT - DAY_CIRCLE_SIZE) / 2,
+    bottom: (DAY_CELL_HEIGHT - DAY_CIRCLE_SIZE) / 2,
+    borderRadius: DAY_CIRCLE_SIZE / 2,
+    backgroundColor: colors.primaryHover
+  },
+  dayCellWrap: {
+    flex: 1,
+    height: DAY_CELL_HEIGHT,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  dayCircle: {
+    width: DAY_CIRCLE_SIZE,
+    height: DAY_CIRCLE_SIZE,
+    borderRadius: DAY_CIRCLE_SIZE / 2,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  dayCircleSelected: {
+    backgroundColor: colors.primary
+  },
+  dayCircleHovered: {
+    backgroundColor: colors.grey600
+  },
+  dayText: {
+    ...datePickerTypography.day
+  },
+  todayDot: {
+    position: "absolute",
+    bottom: 2,
+    width: 4,
+    height: 4,
+    borderRadius: 2,
+    backgroundColor: colors.primary
+  }
+});
+var DEFAULT_WIDTH2 = 308;
 var sizeConfig2 = {
   lg: {
     height: 44,
@@ -1328,13 +1979,13 @@ var Input = forwardRef(function Input2({
   const rightIconNode = rightIcon ?? /* @__PURE__ */ jsx(ShowIcon, { size: metrics.iconSize, color: chrome.rightIconColor });
   useApplyWebClassName(rootRef, className);
   useApplyWebClassName(inputRef, inputClassName);
-  return /* @__PURE__ */ jsxs(View, { ref: rootRef, style: [styles4.root, disabled && styles4.disabled, style], children: [
-    showLabel && label ? /* @__PURE__ */ jsx(Text, { style: [styles4.label, { color: chrome.labelColor }], children: label }) : null,
+  return /* @__PURE__ */ jsxs(View, { ref: rootRef, style: [styles6.root, disabled && styles6.disabled, style], children: [
+    showLabel && label ? /* @__PURE__ */ jsx(Text, { style: [styles6.label, { color: chrome.labelColor }], children: label }) : null,
     /* @__PURE__ */ jsxs(
       View,
       {
         style: [
-          styles4.field,
+          styles6.field,
           {
             height: metrics.height,
             borderRadius: metrics.borderRadius,
@@ -1349,7 +2000,7 @@ var Input = forwardRef(function Input2({
           fieldStyle
         ],
         children: [
-          hasLeftIcon ? /* @__PURE__ */ jsx(View, { style: [styles4.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }], children: leftIconNode }) : null,
+          hasLeftIcon ? /* @__PURE__ */ jsx(View, { style: [styles6.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }], children: leftIconNode }) : null,
           /* @__PURE__ */ jsx(
             TextInput,
             {
@@ -1373,11 +2024,11 @@ var Input = forwardRef(function Input2({
                 onBlur?.(event);
               },
               style: [
-                styles4.input,
+                styles6.input,
                 metrics.text,
                 { color: chrome.textColor },
-                Platform.OS === "web" ? styles4.inputWeb : null,
-                Platform.OS === "android" ? styles4.inputAndroid : null,
+                Platform.OS === "web" ? styles6.inputWeb : null,
+                Platform.OS === "android" ? styles6.inputAndroid : null,
                 inputStyle
               ],
               accessibilityLabel: resolvedAccessibilityLabel,
@@ -1389,22 +2040,22 @@ var Input = forwardRef(function Input2({
             {
               onPress: onRightIconPress,
               disabled,
-              style: [styles4.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }],
+              style: [styles6.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }],
               accessibilityRole: "button",
               accessibilityLabel: rightIconAccessibilityLabel,
               hitSlop: 8,
               children: rightIconNode
             }
-          ) : /* @__PURE__ */ jsx(View, { style: [styles4.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }], children: rightIconNode }) : null
+          ) : /* @__PURE__ */ jsx(View, { style: [styles6.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }], children: rightIconNode }) : null
         ]
       }
     ),
-    showHint && hint ? /* @__PURE__ */ jsx(Text, { style: [styles4.hint, { color: chrome.hintColor }], children: hint }) : null
+    showHint && hint ? /* @__PURE__ */ jsx(Text, { style: [styles6.hint, { color: chrome.hintColor }], children: hint }) : null
   ] });
 });
-var styles4 = StyleSheet.create({
+var styles6 = StyleSheet.create({
   root: {
-    width: DEFAULT_WIDTH,
+    width: DEFAULT_WIDTH2,
     gap: 8,
     alignSelf: "flex-start"
   },
@@ -1439,13 +2090,13 @@ var styles4 = StyleSheet.create({
     ...inputTypography.hint
   }
 });
-var DEFAULT_WIDTH2 = 308;
-var TRIGGER_HEIGHT = 44;
-var TRIGGER_RADIUS = 60;
-var MENU_RADIUS2 = 24;
+var DEFAULT_WIDTH3 = 308;
+var TRIGGER_HEIGHT2 = 44;
+var TRIGGER_RADIUS2 = 60;
+var MENU_RADIUS3 = 24;
 var MENU_MAX_LIST_HEIGHT = 248;
-var ITEM_RADIUS = 12;
-var ICON_SIZE = 20;
+var ITEM_RADIUS2 = 12;
+var ICON_SIZE3 = 20;
 var CHIP_GAP = 6;
 var FALLBACK_ELLIPSIS_WIDTH = 20;
 function itemBackground(state) {
@@ -1518,25 +2169,25 @@ function MultiValueChips({ options, disabled, onRemove }) {
     const next = Math.ceil(event.nativeEvent.layout.width);
     setEllipsisWidth((current) => current === next ? current : next);
   };
-  return /* @__PURE__ */ jsxs(View, { style: styles5.multiValueRoot, children: [
-    /* @__PURE__ */ jsxs(View, { pointerEvents: "none", style: styles5.measureRow, children: [
+  return /* @__PURE__ */ jsxs(View, { style: styles7.multiValueRoot, children: [
+    /* @__PURE__ */ jsxs(View, { pointerEvents: "none", style: styles7.measureRow, children: [
       options.map((option) => /* @__PURE__ */ jsxs(
         View,
         {
-          style: styles5.chip,
+          style: styles7.chip,
           onLayout: (event) => handleChipLayout(option.value, event),
           children: [
-            /* @__PURE__ */ jsx(Text, { style: styles5.chipLabel, numberOfLines: 1, children: option.label }),
-            /* @__PURE__ */ jsx(Text, { style: styles5.chipRemove, children: "\xD7" })
+            /* @__PURE__ */ jsx(Text, { style: styles7.chipLabel, numberOfLines: 1, children: option.label }),
+            /* @__PURE__ */ jsx(Text, { style: styles7.chipRemove, children: "\xD7" })
           ]
         },
         `measure-${option.value}`
       )),
-      /* @__PURE__ */ jsx(View, { style: styles5.ellipsis, onLayout: handleEllipsisLayout, children: /* @__PURE__ */ jsx(Text, { style: styles5.ellipsisText, children: "..." }) })
+      /* @__PURE__ */ jsx(View, { style: styles7.ellipsis, onLayout: handleEllipsisLayout, children: /* @__PURE__ */ jsx(Text, { style: styles7.ellipsisText, children: "..." }) })
     ] }),
-    /* @__PURE__ */ jsxs(View, { style: styles5.chipsRow, onLayout: handleContainerLayout, children: [
-      visible.map((option) => /* @__PURE__ */ jsxs(View, { style: styles5.chip, children: [
-        /* @__PURE__ */ jsx(Text, { style: styles5.chipLabel, numberOfLines: 1, children: option.label }),
+    /* @__PURE__ */ jsxs(View, { style: styles7.chipsRow, onLayout: handleContainerLayout, children: [
+      visible.map((option) => /* @__PURE__ */ jsxs(View, { style: styles7.chip, children: [
+        /* @__PURE__ */ jsx(Text, { style: styles7.chipLabel, numberOfLines: 1, children: option.label }),
         /* @__PURE__ */ jsx(
           Pressable,
           {
@@ -1548,11 +2199,11 @@ function MultiValueChips({ options, disabled, onRemove }) {
             hitSlop: 6,
             accessibilityRole: "button",
             accessibilityLabel: `Remove ${option.label}`,
-            children: /* @__PURE__ */ jsx(Text, { style: styles5.chipRemove, children: "\xD7" })
+            children: /* @__PURE__ */ jsx(Text, { style: styles7.chipRemove, children: "\xD7" })
           }
         )
       ] }, option.value)),
-      hasOverflow ? /* @__PURE__ */ jsx(View, { style: styles5.ellipsis, children: /* @__PURE__ */ jsx(Text, { style: styles5.ellipsisText, children: "..." }) }) : null
+      hasOverflow ? /* @__PURE__ */ jsx(View, { style: styles7.ellipsis, children: /* @__PURE__ */ jsx(Text, { style: styles7.ellipsisText, children: "..." }) }) : null
     ] })
   ] });
 }
@@ -1763,7 +2414,7 @@ var Select = forwardRef(
     const leftIconNode = leftIcon ?? /* @__PURE__ */ jsx(
       UserIcon,
       {
-        size: ICON_SIZE,
+        size: ICON_SIZE3,
         color: error ? colors.red : isOpen ? colors.primary : colors.grey100
       }
     );
@@ -1779,11 +2430,11 @@ var Select = forwardRef(
       {
         ...rest,
         ref: setRootRef,
-        style: [styles5.root, isOpen && styles5.rootOpen, disabled && styles5.disabled, style],
+        style: [styles7.root, isOpen && styles7.rootOpen, disabled && styles7.disabled, style],
         accessibilityState: { disabled, expanded: isOpen },
         children: [
-          showLabel && label ? /* @__PURE__ */ jsx(Text, { style: [styles5.label, { color: labelColor }], children: label }) : null,
-          /* @__PURE__ */ jsxs(View, { style: [styles5.triggerWrap, isOpen && styles5.triggerWrapOpen], children: [
+          showLabel && label ? /* @__PURE__ */ jsx(Text, { style: [styles7.label, { color: labelColor }], children: label }) : null,
+          /* @__PURE__ */ jsxs(View, { style: [styles7.triggerWrap, isOpen && styles7.triggerWrapOpen], children: [
             /* @__PURE__ */ jsxs(
               Pressable,
               {
@@ -1794,29 +2445,29 @@ var Select = forwardRef(
                 accessibilityLabel: resolvedAccessibilityLabel,
                 accessibilityState: { disabled, expanded: isOpen },
                 style: [
-                  styles5.trigger,
+                  styles7.trigger,
                   {
                     borderColor: triggerBorderColor,
                     backgroundColor: colors.grey700
                   }
                 ],
                 children: [
-                  hasLeftIcon ? /* @__PURE__ */ jsx(View, { style: styles5.iconSlot, children: leftIconNode }) : null,
-                  /* @__PURE__ */ jsx(View, { style: styles5.triggerContent, children: multiple && hasValue ? /* @__PURE__ */ jsx(
+                  hasLeftIcon ? /* @__PURE__ */ jsx(View, { style: styles7.iconSlot, children: leftIconNode }) : null,
+                  /* @__PURE__ */ jsx(View, { style: styles7.triggerContent, children: multiple && hasValue ? /* @__PURE__ */ jsx(
                     MultiValueChips,
                     {
                       options: selectedOptions,
                       disabled,
                       onRemove: handleRemoveChip
                     }
-                  ) : /* @__PURE__ */ jsx(Text, { style: [styles5.triggerText, { color: triggerTextColor }], numberOfLines: 1, children: multiple ? placeholder : singleLabel }) }),
-                  /* @__PURE__ */ jsx(View, { style: [styles5.iconSlot, isOpen && styles5.chevronOpen], children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: ICON_SIZE, color: isOpen ? colors.primary : colors.grey100 }) })
+                  ) : /* @__PURE__ */ jsx(Text, { style: [styles7.triggerText, { color: triggerTextColor }], numberOfLines: 1, children: multiple ? placeholder : singleLabel }) }),
+                  /* @__PURE__ */ jsx(View, { style: [styles7.iconSlot, isOpen && styles7.chevronOpen], children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: ICON_SIZE3, color: isOpen ? colors.primary : colors.grey100 }) })
                 ]
               }
             ),
-            isOpen ? /* @__PURE__ */ jsxs(View, { style: styles5.menu, children: [
-              showSearch ? /* @__PURE__ */ jsxs(View, { style: styles5.searchField, children: [
-                /* @__PURE__ */ jsx(View, { style: styles5.iconSlot, children: /* @__PURE__ */ jsx(SearchIcon, { size: ICON_SIZE, color: colors.grey100 }) }),
+            isOpen ? /* @__PURE__ */ jsxs(View, { style: styles7.menu, children: [
+              showSearch ? /* @__PURE__ */ jsxs(View, { style: styles7.searchField, children: [
+                /* @__PURE__ */ jsx(View, { style: styles7.iconSlot, children: /* @__PURE__ */ jsx(SearchIcon, { size: ICON_SIZE3, color: colors.grey100 }) }),
                 /* @__PURE__ */ jsx(
                   TextInput,
                   {
@@ -1827,9 +2478,9 @@ var Select = forwardRef(
                     placeholder: searchPlaceholder,
                     placeholderTextColor: colors.grey100,
                     style: [
-                      styles5.searchInput,
-                      Platform.OS === "web" ? styles5.searchInputWeb : null,
-                      Platform.OS === "android" ? styles5.searchInputAndroid : null
+                      styles7.searchInput,
+                      Platform.OS === "web" ? styles7.searchInputWeb : null,
+                      Platform.OS === "android" ? styles7.searchInputAndroid : null
                     ],
                     accessibilityLabel: searchPlaceholder
                   }
@@ -1838,12 +2489,12 @@ var Select = forwardRef(
               /* @__PURE__ */ jsxs(
                 ScrollView,
                 {
-                  style: styles5.optionList,
-                  contentContainerStyle: styles5.optionListContent,
+                  style: styles7.optionList,
+                  contentContainerStyle: styles7.optionListContent,
                   keyboardShouldPersistTaps: "handled",
                   showsVerticalScrollIndicator: false,
                   children: [
-                    loading ? /* @__PURE__ */ jsx(View, { style: styles5.statusRow, children: /* @__PURE__ */ jsx(Text, { style: styles5.statusText, children: "Loading..." }) }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsx(View, { style: styles5.statusRow, children: /* @__PURE__ */ jsx(Text, { style: styles5.statusText, children: emptyText }) }) : null,
+                    loading ? /* @__PURE__ */ jsx(View, { style: styles7.statusRow, children: /* @__PURE__ */ jsx(Text, { style: styles7.statusText, children: "Loading..." }) }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsx(View, { style: styles7.statusRow, children: /* @__PURE__ */ jsx(Text, { style: styles7.statusText, children: emptyText }) }) : null,
                     !loading && filteredOptions.map((option) => {
                       const isSelected = selectedValues.includes(option.value);
                       const isHovered = hoveredValue === option.value;
@@ -1860,14 +2511,14 @@ var Select = forwardRef(
                           accessibilityRole: multiple ? "checkbox" : "button",
                           accessibilityState: { selected: isSelected, checked: isSelected, disabled },
                           style: [
-                            styles5.item,
+                            styles7.item,
                             {
                               backgroundColor: itemBackground(visualState)
                             }
                           ],
                           children: [
-                            multiple ? /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: styles5.itemCheckbox, children: /* @__PURE__ */ jsx(Checkbox, { value: isSelected, variant: "light" }) }) : null,
-                            /* @__PURE__ */ jsx(Text, { style: styles5.itemLabel, numberOfLines: 1, children: option.label })
+                            multiple ? /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: styles7.itemCheckbox, children: /* @__PURE__ */ jsx(Checkbox, { value: isSelected, variant: "light" }) }) : null,
+                            /* @__PURE__ */ jsx(Text, { style: styles7.itemLabel, numberOfLines: 1, children: option.label })
                           ]
                         },
                         option.value
@@ -1878,15 +2529,15 @@ var Select = forwardRef(
               )
             ] }) : null
           ] }),
-          showHint && hint ? /* @__PURE__ */ jsx(Text, { style: [styles5.hint, { color: hintColor }], children: hint }) : null
+          showHint && hint ? /* @__PURE__ */ jsx(Text, { style: [styles7.hint, { color: hintColor }], children: hint }) : null
         ]
       }
     );
   }
 );
-var styles5 = StyleSheet.create({
+var styles7 = StyleSheet.create({
   root: {
-    width: DEFAULT_WIDTH2,
+    width: DEFAULT_WIDTH3,
     gap: 8,
     alignSelf: "flex-start"
   },
@@ -1907,8 +2558,8 @@ var styles5 = StyleSheet.create({
     zIndex: 20
   },
   trigger: {
-    height: TRIGGER_HEIGHT,
-    borderRadius: TRIGGER_RADIUS,
+    height: TRIGGER_HEIGHT2,
+    borderRadius: TRIGGER_RADIUS2,
     borderWidth: 1,
     paddingVertical: 12,
     paddingHorizontal: 16,
@@ -1974,8 +2625,8 @@ var styles5 = StyleSheet.create({
     lineHeight: 16
   },
   iconSlot: {
-    width: ICON_SIZE,
-    height: ICON_SIZE,
+    width: ICON_SIZE3,
+    height: ICON_SIZE3,
     alignItems: "center",
     justifyContent: "center",
     flexShrink: 0
@@ -1990,7 +2641,7 @@ var styles5 = StyleSheet.create({
     right: 0,
     marginTop: 8,
     zIndex: 10,
-    borderRadius: MENU_RADIUS2,
+    borderRadius: MENU_RADIUS3,
     padding: 12,
     gap: 8,
     backgroundColor: colors.grey700,
@@ -2020,7 +2671,7 @@ var styles5 = StyleSheet.create({
   },
   searchField: {
     height: 40,
-    borderRadius: ITEM_RADIUS,
+    borderRadius: ITEM_RADIUS2,
     paddingHorizontal: 12,
     flexDirection: "row",
     alignItems: "center",
@@ -2042,7 +2693,7 @@ var styles5 = StyleSheet.create({
   },
   item: {
     minHeight: 43,
-    borderRadius: ITEM_RADIUS,
+    borderRadius: ITEM_RADIUS2,
     padding: 12,
     flexDirection: "row",
     alignItems: "center",
@@ -2060,7 +2711,7 @@ var styles5 = StyleSheet.create({
     ...selectTypography.hint
   }
 });
-var DEFAULT_WIDTH3 = 308;
+var DEFAULT_WIDTH4 = 308;
 var FIELD_HEIGHT = 100;
 var FIELD_RADIUS = 16;
 var FIELD_PADDING_VERTICAL = 12;
@@ -2146,13 +2797,13 @@ var Textarea = forwardRef(function Textarea2({
   const resolvedAccessibilityLabel = accessibilityLabel ?? (showLabel ? void 0 : label);
   useApplyWebClassName(rootRef, className);
   useApplyWebClassName(inputRef, inputClassName);
-  return /* @__PURE__ */ jsxs(View, { ref: rootRef, style: [styles6.root, disabled && styles6.disabled, style], children: [
-    showLabel && label ? /* @__PURE__ */ jsx(Text, { style: [styles6.label, { color: chrome.labelColor }], children: label }) : null,
+  return /* @__PURE__ */ jsxs(View, { ref: rootRef, style: [styles8.root, disabled && styles8.disabled, style], children: [
+    showLabel && label ? /* @__PURE__ */ jsx(Text, { style: [styles8.label, { color: chrome.labelColor }], children: label }) : null,
     /* @__PURE__ */ jsx(
       View,
       {
         style: [
-          styles6.field,
+          styles8.field,
           {
             borderColor: chrome.borderColor,
             backgroundColor: chrome.backgroundColor
@@ -2184,11 +2835,11 @@ var Textarea = forwardRef(function Textarea2({
               onBlur?.(event);
             },
             style: [
-              styles6.input,
+              styles8.input,
               textareaTypography.field,
               { color: chrome.textColor },
-              Platform.OS === "web" ? styles6.inputWeb : null,
-              Platform.OS === "android" ? styles6.inputAndroid : null,
+              Platform.OS === "web" ? styles8.inputWeb : null,
+              Platform.OS === "android" ? styles8.inputAndroid : null,
               inputStyle
             ],
             accessibilityLabel: resolvedAccessibilityLabel,
@@ -2197,12 +2848,12 @@ var Textarea = forwardRef(function Textarea2({
         )
       }
     ),
-    showHint && hint ? /* @__PURE__ */ jsx(Text, { style: [styles6.hint, { color: chrome.hintColor }], children: hint }) : null
+    showHint && hint ? /* @__PURE__ */ jsx(Text, { style: [styles8.hint, { color: chrome.hintColor }], children: hint }) : null
   ] });
 });
-var styles6 = StyleSheet.create({
+var styles8 = StyleSheet.create({
   root: {
-    width: DEFAULT_WIDTH3,
+    width: DEFAULT_WIDTH4,
     gap: 8,
     alignSelf: "flex-start"
   },
@@ -2300,13 +2951,13 @@ var Toggle = forwardRef(function Toggle2({
       accessibilityRole: "switch",
       accessibilityLabel: resolvedAccessibilityLabel,
       accessibilityState: { checked: isActive, disabled },
-      style: [styles7.pressable, disabled && styles7.disabled, style],
+      style: [styles9.pressable, disabled && styles9.disabled, style],
       children: [
         /* @__PURE__ */ jsx(
           Animated.View,
           {
             style: [
-              styles7.track,
+              styles9.track,
               {
                 backgroundColor: trackBackgroundColor
               }
@@ -2315,7 +2966,7 @@ var Toggle = forwardRef(function Toggle2({
               Animated.View,
               {
                 style: [
-                  styles7.thumb,
+                  styles9.thumb,
                   {
                     transform: [{ translateX: thumbTranslateX }]
                   }
@@ -2324,12 +2975,12 @@ var Toggle = forwardRef(function Toggle2({
             )
           }
         ),
-        labelContent != null && labelContent !== false ? typeof labelContent === "string" || typeof labelContent === "number" ? /* @__PURE__ */ jsx(Text, { style: [styles7.label, labelStyle], children: labelContent }) : labelContent : null
+        labelContent != null && labelContent !== false ? typeof labelContent === "string" || typeof labelContent === "number" ? /* @__PURE__ */ jsx(Text, { style: [styles9.label, labelStyle], children: labelContent }) : labelContent : null
       ]
     }
   );
 });
-var styles7 = StyleSheet.create({
+var styles9 = StyleSheet.create({
   pressable: {
     flexDirection: "row",
     alignItems: "center",
@@ -2358,6 +3009,6 @@ var styles7 = StyleSheet.create({
   }
 });
 
-export { ArrowRightIcon, Avatar, BagIcon, BellIcon, BuildingIcon, Button, CalendarIcon, CameraIcon, CheckBadgeIcon, CheckIcon, Checkbox, ChevronDownIcon, ClockIcon, FacebookIcon, HeartIcon, HelpCircleIcon, HomeIcon, Icon, Input, InstagramIcon, KeyIcon, LayoutGridIcon, LinkedInIcon, LogOutIcon, MailIcon, NavigateIcon, PhoneIcon, SearchIcon, Select, SettingsIcon, ShowIcon, Textarea, Toggle, UserIcon, VideoIcon, avatarTypography, buttonTypography, colors, fonts, getIconsByGroup, grey, iconGroupNames, iconGroups, iconNames, icons, inputTypography, selectTypography, textareaTypography };
+export { ArrowRightIcon, Avatar, BagIcon, BellIcon, BuildingIcon, Button, CalendarIcon, CalendarOutlineIcon, CameraIcon, CheckBadgeIcon, CheckIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ClockIcon, DatePicker, FacebookIcon, HeartIcon, HelpCircleIcon, HomeIcon, Icon, Input, InstagramIcon, KeyIcon, LayoutGridIcon, LinkedInIcon, LogOutIcon, MailIcon, MenuItem, NavigateIcon, PhoneIcon, SearchIcon, Select, SettingsIcon, ShowIcon, Textarea, Toggle, UserIcon, VideoIcon, avatarTypography, buttonTypography, colors, datePickerTypography, fonts, getIconsByGroup, grey, iconGroupNames, iconGroups, iconNames, icons, inputTypography, selectTypography, textareaTypography };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map