@ecohouse/ui 0.1.4 → 0.1.6

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, Animated, Easing, TouchableOpacity, TextInput, ScrollView } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -30,10 +30,17 @@ var colors = {
   primary: "#B46436",
   black: "#000000",
   white: "#ffffff",
+  whiteAlpha86: "#FFFFFFDB",
+  whiteAlpha40: "#FFFFFF66",
+  whiteAlpha20: "#FFFFFF33",
+  whiteAlpha10: "#FFFFFF1A",
+  whiteAlpha5: "#FFFFFF0D",
   dark: "#090909",
   red: "#A63E3E",
   lightGrey: "#B7B7B7",
+  green: "#34A853",
   primaryMuted: "#B464360F",
+  primaryHover: "#B4643633",
   redMuted: "#A63E3E0F",
   redHover: "#A63E3E33",
   grey0: grey["0"],
@@ -73,6 +80,34 @@ var buttonTypography = {
     letterSpacing: 0.36
   }
 };
+var badgeTypography = {
+  fontFamily: fonts.sans,
+  fontSize: 14,
+  fontWeight: "400",
+  lineHeight: 16,
+  letterSpacing: 0
+};
+var statCardTypography = {
+  fontFamily: fonts.sans,
+  fontSize: 16,
+  fontWeight: "500",
+  lineHeight: 16,
+  letterSpacing: 0
+};
+var segmentedToggleTypography = {
+  fontFamily: fonts.sans,
+  fontSize: 14,
+  fontWeight: "500",
+  lineHeight: 14,
+  letterSpacing: 0
+};
+var counterTypography = {
+  fontFamily: fonts.sans,
+  fontSize: 14,
+  fontWeight: "700",
+  lineHeight: 14,
+  letterSpacing: 0
+};
 var inputTypography = {
   label: {
     fontFamily: fonts.sans,
@@ -142,6 +177,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 +309,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 +392,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 }) {
@@ -454,6 +555,21 @@ function MailIcon({ size = 20, color = colors.primary, strokeWidth = 2 }) {
   ) });
 }
 
+// src/icons/Minus/minusPath.ts
+var MINUS_PATH = "M3.33337 8H12.6667";
+function MinusIcon({ size = 16, color = colors.white, strokeWidth = 2 }) {
+  return /* @__PURE__ */ jsx(Svg, { width: size, height: size, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx(
+    Path,
+    {
+      d: MINUS_PATH,
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+
 // src/icons/Navigate/navigatePath.ts
 var NAVIGATE_PATH = "M5.691 14.2339C11.5836 17.7694 16.2976 13.0554 15.7084 4.21658C6.86968 3.62732 2.15584 8.34151 5.691 14.2339ZM5.691 14.2339C5.69093 14.2338 5.69107 14.234 5.691 14.2339ZM5.691 14.2339L4.16675 15.7576M5.691 14.2339L8.88079 11.0436";
 function NavigateIcon({ size = 20, color = colors.primary, strokeWidth = 2 }) {
@@ -484,6 +600,21 @@ function PhoneIcon({ size = 20, color = colors.primary, strokeWidth = 2 }) {
   ) });
 }
 
+// src/icons/Plus/plusPath.ts
+var PLUS_PATH = "M8.00004 3.33325V12.6666M3.33337 7.99992H12.6667";
+function PlusIcon({ size = 16, color = colors.white, strokeWidth = 2 }) {
+  return /* @__PURE__ */ jsx(Svg, { width: size, height: size, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx(
+    Path,
+    {
+      d: PLUS_PATH,
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+
 // src/icons/Search/searchPath.ts
 var SEARCH_CIRCLE_PATH = "M9.16667 15.8333C12.8486 15.8333 15.8333 12.8486 15.8333 9.16667C15.8333 5.48477 12.8486 2.5 9.16667 2.5C5.48477 2.5 2.5 5.48477 2.5 9.16667C2.5 12.8486 5.48477 15.8333 9.16667 15.8333Z";
 var SEARCH_HANDLE_PATH = "M17.5 17.5L13.875 13.875";
@@ -559,6 +690,21 @@ function ShowIcon({ size = 20, color = colors.primary, strokeWidth = 2 }) {
   ] });
 }
 
+// src/icons/Sidebar/sidebarPath.ts
+var SIDEBAR_PATH = "M12.5 2.5V17.5M6.5 2.5H13.5C14.9001 2.5 15.6002 2.5 16.135 2.77248C16.6054 3.01217 16.9878 3.39462 17.2275 3.86502C17.5 4.3998 17.5 5.09987 17.5 6.5V13.5C17.5 14.9001 17.5 15.6002 17.2275 16.135C16.9878 16.6054 16.6054 16.9878 16.135 17.2275C15.6002 17.5 14.9001 17.5 13.5 17.5H6.5C5.09987 17.5 4.3998 17.5 3.86502 17.2275C3.39462 16.9878 3.01217 16.6054 2.77248 16.135C2.5 15.6002 2.5 14.9001 2.5 13.5V6.5C2.5 5.09987 2.5 4.3998 2.77248 3.86502C3.01217 3.39462 3.39462 3.01217 3.86502 2.77248C4.3998 2.5 5.09987 2.5 6.5 2.5Z";
+function SidebarIcon({ 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: SIDEBAR_PATH,
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+
 // src/icons/User/userPath.ts
 var USER_PATH = "M15.8334 17.5C15.8334 14.2783 13.2217 11.6667 10 11.6667C6.77836 11.6667 4.16669 14.2783 4.16669 17.5M10 9.16667C8.15907 9.16667 6.66669 7.67428 6.66669 5.83333C6.66669 3.99238 8.15907 2.5 10 2.5C11.841 2.5 13.3334 3.99238 13.3334 5.83333C13.3334 7.67428 11.841 9.16667 10 9.16667Z";
 function UserIcon({ size = 20, color = colors.primary, strokeWidth = 2 }) {
@@ -574,6 +720,12 @@ function UserIcon({ size = 20, color = colors.primary, strokeWidth = 2 }) {
   ) });
 }
 
+// src/icons/UsersAlt/usersAltPath.ts
+var USERS_ALT_PATH = "M14.35 14.2566C14.9725 13.7177 15.4718 13.0513 15.814 12.3024C16.1562 11.5536 16.3333 10.7399 16.3333 9.91659C16.3333 8.36949 15.7187 6.88576 14.6248 5.7918C13.5308 4.69783 12.0471 4.08325 10.5 4.08325C8.95289 4.08325 7.46916 4.69783 6.3752 5.7918C5.28124 6.88576 4.66666 8.36949 4.66666 9.91659C4.66665 10.7399 4.84376 11.5536 5.18597 12.3024C5.52818 13.0513 6.02748 13.7177 6.64999 14.2566C5.01682 14.9961 3.6312 16.1904 2.6588 17.6966C1.6864 19.2027 1.16837 20.9571 1.16666 22.7499C1.16666 23.0593 1.28957 23.3561 1.50837 23.5749C1.72716 23.7937 2.0239 23.9166 2.33332 23.9166C2.64274 23.9166 2.93949 23.7937 3.15828 23.5749C3.37707 23.3561 3.49999 23.0593 3.49999 22.7499C3.49999 20.8934 4.23749 19.1129 5.55024 17.8002C6.863 16.4874 8.64347 15.7499 10.5 15.7499C12.3565 15.7499 14.137 16.4874 15.4497 17.8002C16.7625 19.1129 17.5 20.8934 17.5 22.7499C17.5 23.0593 17.6229 23.3561 17.8417 23.5749C18.0605 23.7937 18.3572 23.9166 18.6667 23.9166C18.9761 23.9166 19.2728 23.7937 19.4916 23.5749C19.7104 23.3561 19.8333 23.0593 19.8333 22.7499C19.8316 20.9571 19.3136 19.2027 18.3412 17.6966C17.3688 16.1904 15.9832 14.9961 14.35 14.2566ZM10.5 13.4166C9.80775 13.4166 9.13107 13.2113 8.55549 12.8267C7.97992 12.4421 7.53132 11.8955 7.26641 11.256C7.0015 10.6164 6.93219 9.9127 7.06724 9.23377C7.20229 8.55484 7.53563 7.9312 8.02512 7.44171C8.5146 6.95223 9.13824 6.61889 9.81717 6.48384C10.4961 6.34879 11.1998 6.4181 11.8394 6.68301C12.4789 6.94791 13.0255 7.39652 13.4101 7.97209C13.7947 8.54766 14 9.22435 14 9.91659C14 10.8448 13.6312 11.7351 12.9749 12.3915C12.3185 13.0478 11.4282 13.4166 10.5 13.4166ZM21.8633 13.7899C22.61 12.9491 23.0977 11.9105 23.2678 10.799C23.4378 9.68748 23.2831 8.55051 22.822 7.52492C22.361 6.49933 21.6134 5.62885 20.6692 5.01825C19.725 4.40764 18.6244 4.08295 17.5 4.08325C17.1906 4.08325 16.8938 4.20617 16.675 4.42496C16.4562 4.64375 16.3333 4.9405 16.3333 5.24992C16.3333 5.55934 16.4562 5.85608 16.675 6.07488C16.8938 6.29367 17.1906 6.41659 17.5 6.41659C18.4282 6.41659 19.3185 6.78533 19.9749 7.44171C20.6312 8.09809 21 8.98833 21 9.91659C20.9983 10.5294 20.8358 11.131 20.5287 11.6612C20.2216 12.1915 19.7807 12.6319 19.25 12.9383C19.077 13.038 18.9325 13.1805 18.8304 13.3521C18.7283 13.5237 18.6719 13.7186 18.6667 13.9183C18.6618 14.1163 18.7074 14.3123 18.7993 14.4879C18.8911 14.6634 19.0262 14.8127 19.1917 14.9216L19.6467 15.2249L19.7983 15.3066C21.2046 15.9736 22.391 17.0286 23.2178 18.3473C24.0446 19.666 24.4773 21.1935 24.465 22.7499C24.465 23.0593 24.5879 23.3561 24.8067 23.5749C25.0255 23.7937 25.3222 23.9166 25.6317 23.9166C25.9411 23.9166 26.2378 23.7937 26.4566 23.5749C26.6754 23.3561 26.7983 23.0593 26.7983 22.7499C26.8079 20.9596 26.3594 19.1965 25.4957 17.6283C24.632 16.0601 23.3816 14.7388 21.8633 13.7899Z";
+function UsersAltIcon({ size = 28, color = colors.white }) {
+  return /* @__PURE__ */ jsx(Svg, { width: size, height: size, viewBox: "0 0 28 28", fill: "none", children: /* @__PURE__ */ jsx(Path, { d: USERS_ALT_PATH, fill: color }) });
+}
+
 // src/icons/Video/videoPath.ts
 var VIDEO_PATHS = [
   "M14.6667 5.95424C14.6667 5.55036 14.6667 5.34843 14.5868 5.25492C14.5175 5.17378 14.4136 5.13072 14.3072 5.13909C14.1846 5.14874 14.0418 5.29153 13.7563 5.57712L11.3334 7.99999L13.7563 10.4229C14.0418 10.7085 14.1846 10.8512 14.3072 10.8609C14.4136 10.8693 14.5175 10.8262 14.5868 10.7451C14.6667 10.6516 14.6667 10.4496 14.6667 10.0457V5.95424Z",
@@ -600,10 +752,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,
@@ -615,22 +769,39 @@ var icons = {
   linkedin: LinkedInIcon,
   logOut: LogOutIcon,
   mail: MailIcon,
+  minus: MinusIcon,
   navigate: NavigateIcon,
   phone: PhoneIcon,
+  plus: PlusIcon,
   search: SearchIcon,
   settings: SettingsIcon,
   show: ShowIcon,
+  sidebar: SidebarIcon,
   user: UserIcon,
+  usersAlt: UsersAltIcon,
   video: VideoIcon
 };
 var iconNames = Object.keys(icons);
 var iconGroups = {
-  navigation: ["arrowRight", "chevronDown", "home", "navigate"],
-  actions: ["show", "bell", "camera", "key", "check", "checkBadge", "search", "calendar", "heart"],
-  objects: ["bag", "building", "clock", "user", "video"],
+  navigation: ["arrowRight", "chevronDown", "chevronLeft", "home", "navigate"],
+  actions: [
+    "show",
+    "bell",
+    "camera",
+    "key",
+    "check",
+    "checkBadge",
+    "search",
+    "calendar",
+    "calendarOutline",
+    "heart",
+    "minus",
+    "plus"
+  ],
+  objects: ["bag", "building", "clock", "user", "usersAlt", "video"],
   communication: ["mail", "phone"],
   social: ["facebook", "instagram", "linkedin"],
-  interface: ["layoutGrid", "settings", "helpCircle", "logOut"]
+  interface: ["layoutGrid", "sidebar", "settings", "helpCircle", "logOut"]
 };
 var iconGroupNames = Object.keys(iconGroups);
 function getIconsByGroup(group) {
@@ -692,13 +863,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 +983,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 +994,6 @@ var Avatar = forwardRef(function Avatar2({
     (next) => {
       if (!isOpenControlled) setUncontrolledOpen(next);
       onOpenChange?.(next);
-      if (!next) setHoveredKey(null);
     },
     [isOpenControlled, onOpenChange]
   );
@@ -785,7 +1046,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 +1058,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,33 +1176,396 @@ var styles = StyleSheet.create({
         elevation: 8
       }
     })
-  },
-  menuItem: {
-    minHeight: 40,
-    borderRadius: MENU_ITEM_RADIUS,
-    paddingVertical: 12,
-    paddingHorizontal: 12,
+  }
+});
+var ICON_SIZE2 = 20;
+var webBlurStyle = Platform.OS === "web" ? {
+  backdropFilter: "blur(10.3px)",
+  WebkitBackdropFilter: "blur(10.3px)"
+} : {};
+var variantConfig = {
+  default: {
+    backgroundColor: colors.grey750,
+    iconColor: colors.white,
+    border: false,
+    blur: false
+  },
+  transparent: {
+    backgroundColor: colors.whiteAlpha5,
+    iconColor: colors.primary,
+    border: true,
+    blur: true
+  }
+};
+var Badge = forwardRef(function Badge2({ label, variant = "default", icon: Icon2, style, className, accessibilityLabel, ...rest }, forwardedRef) {
+  const containerRef = useRef(null);
+  const preset = variantConfig[variant];
+  const resolvedClassName = className?.trim() || void 0;
+  const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
+  useApplyWebClassName(containerRef, resolvedClassName);
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      ...rest,
+      ref: setContainerRef,
+      style: [
+        styles3.base,
+        { backgroundColor: preset.backgroundColor },
+        preset.border ? styles3.transparentBorder : null,
+        preset.blur ? webBlurStyle : null,
+        style
+      ],
+      accessibilityRole: "text",
+      accessibilityLabel: accessibilityLabel ?? label,
+      children: [
+        Icon2 ? /* @__PURE__ */ jsx(View, { style: styles3.iconSlot, children: /* @__PURE__ */ jsx(Icon2, { size: ICON_SIZE2, color: preset.iconColor }) }) : null,
+        /* @__PURE__ */ jsx(Text, { style: [styles3.label, Platform.OS === "android" ? styles3.labelAndroid : null], children: label })
+      ]
+    }
+  );
+});
+var styles3 = StyleSheet.create({
+  base: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 8
+    alignSelf: "flex-start",
+    minHeight: 44,
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    gap: 12,
+    borderRadius: 79,
+    overflow: "hidden",
+    borderWidth: 0,
+    borderColor: "transparent",
+    borderStyle: "solid"
   },
-  menuItemDisabled: {
-    opacity: 0.5
+  transparentBorder: {
+    borderWidth: 1,
+    borderColor: colors.whiteAlpha5,
+    borderStyle: "solid"
   },
-  menuItemIcon: {
-    width: MENU_ITEM_ICON_SIZE,
-    height: MENU_ITEM_ICON_SIZE,
+  iconSlot: {
+    width: ICON_SIZE2,
+    height: ICON_SIZE2,
     alignItems: "center",
     justifyContent: "center",
     flexShrink: 0
   },
-  menuItemLabel: {
-    ...avatarTypography.menuItem,
-    color: colors.white,
-    flex: 1
+  label: {
+    ...badgeTypography,
+    color: colors.white
+  },
+  labelAndroid: {
+    includeFontPadding: false
+  }
+});
+var BUTTON_SIZE = 32;
+var webBlurStyle2 = Platform.OS === "web" ? {
+  backdropFilter: "blur(20px)",
+  WebkitBackdropFilter: "blur(20px)"
+} : {};
+function clamp(value, min, max) {
+  return Math.max(min, max === void 0 ? value : Math.min(value, max));
+}
+var Counter = forwardRef(function Counter2({
+  value,
+  defaultValue,
+  onValueChange,
+  min = 1,
+  max,
+  step = 1,
+  disabled = false,
+  style,
+  className,
+  hitSlop,
+  ...rest
+}, forwardedRef) {
+  const containerRef = useRef(null);
+  const isControlled = value !== void 0;
+  const [uncontrolledValue, setUncontrolledValue] = useState(
+    () => clamp(defaultValue ?? min, min, max)
+  );
+  const resolvedValue = clamp(isControlled ? value : uncontrolledValue, min, max);
+  const resolvedClassName = className?.trim() || void 0;
+  const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
+  const decrementDisabled = disabled || resolvedValue <= min;
+  const incrementDisabled = disabled || max !== void 0 && resolvedValue >= max;
+  useApplyWebClassName(containerRef, resolvedClassName);
+  const updateValue = (nextValue) => {
+    const next = clamp(nextValue, min, max);
+    if (next === resolvedValue) return;
+    if (!isControlled) setUncontrolledValue(next);
+    onValueChange?.(next);
+  };
+  return /* @__PURE__ */ jsxs(View, { ...rest, ref: setContainerRef, style: [styles4.base, style], children: [
+    /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        disabled: decrementDisabled,
+        hitSlop,
+        onPress: () => updateValue(resolvedValue - step),
+        accessibilityRole: "button",
+        accessibilityLabel: "Decrease value",
+        accessibilityState: { disabled: decrementDisabled },
+        style: [styles4.button, webBlurStyle2, decrementDisabled && styles4.buttonDisabled],
+        children: /* @__PURE__ */ jsx(MinusIcon, {})
+      }
+    ),
+    /* @__PURE__ */ jsx(Text, { style: styles4.value, children: resolvedValue }),
+    /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        disabled: incrementDisabled,
+        hitSlop,
+        onPress: () => updateValue(resolvedValue + step),
+        accessibilityRole: "button",
+        accessibilityLabel: "Increase value",
+        accessibilityState: { disabled: incrementDisabled },
+        style: [styles4.button, webBlurStyle2, incrementDisabled && styles4.buttonDisabled],
+        children: /* @__PURE__ */ jsx(PlusIcon, {})
+      }
+    )
+  ] });
+});
+var styles4 = StyleSheet.create({
+  base: {
+    flexDirection: "row",
+    alignItems: "center",
+    alignSelf: "flex-start",
+    gap: 17
+  },
+  button: {
+    width: BUTTON_SIZE,
+    height: BUTTON_SIZE,
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: 1,
+    borderColor: colors.whiteAlpha10,
+    borderRadius: 39
+  },
+  buttonDisabled: {
+    opacity: 0.25
+  },
+  value: {
+    ...counterTypography,
+    color: colors.white
+  }
+});
+var ICON_SIZE3 = 20;
+var ANIMATION_DURATION = 200;
+var SegmentedToggle = forwardRef(
+  function SegmentedToggle2({
+    options,
+    value,
+    defaultValue = options[0].value,
+    onValueChange,
+    fullWidth = true,
+    disabled = false,
+    style,
+    className,
+    hitSlop,
+    onLayout,
+    ...rest
+  }, forwardedRef) {
+    const containerRef = useRef(null);
+    const isControlled = value !== void 0;
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+    const selectedValue = isControlled ? value : uncontrolledValue;
+    const selectedIndex = Math.max(
+      0,
+      options.findIndex(({ value: optionValue }) => optionValue === selectedValue)
+    );
+    const resolvedClassName = className?.trim() || void 0;
+    const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
+    const progress = useRef(new Animated.Value(selectedIndex)).current;
+    const [contentWidths, setContentWidths] = useState([0, 0]);
+    const [containerWidth, setContainerWidth] = useState(0);
+    const availableOptionWidth = Math.max(0, (containerWidth - 12) / 2);
+    const widestContentWidth = Math.max(...contentWidths);
+    const contentBasedOptionWidth = widestContentWidth > 0 ? widestContentWidth + 24 * 2 : 0;
+    const optionWidth = fullWidth ? availableOptionWidth : contentBasedOptionWidth;
+    const indicatorTranslateX = progress.interpolate({
+      inputRange: [0, 1],
+      outputRange: [0, optionWidth + 4]
+    });
+    useApplyWebClassName(containerRef, resolvedClassName);
+    useEffect(() => {
+      const animation = Animated.timing(progress, {
+        toValue: selectedIndex,
+        duration: ANIMATION_DURATION,
+        easing: Easing.out(Easing.cubic),
+        useNativeDriver: true
+      });
+      animation.start();
+      return () => animation.stop();
+    }, [progress, selectedIndex]);
+    const selectOption = (nextValue) => {
+      if (disabled || nextValue === selectedValue) return;
+      if (!isControlled) setUncontrolledValue(nextValue);
+      onValueChange?.(nextValue);
+    };
+    return /* @__PURE__ */ jsxs(
+      View,
+      {
+        ...rest,
+        ref: setContainerRef,
+        onLayout: (event) => {
+          const nextWidth = event.nativeEvent.layout.width;
+          setContainerWidth(
+            (currentWidth) => currentWidth === nextWidth ? currentWidth : nextWidth
+          );
+          onLayout?.(event);
+        },
+        style: [
+          styles5.base,
+          fullWidth ? styles5.fullWidth : styles5.contentWidth,
+          disabled && styles5.disabled,
+          style
+        ],
+        accessibilityRole: "radiogroup",
+        children: [
+          optionWidth > 0 ? /* @__PURE__ */ jsx(
+            Animated.View,
+            {
+              pointerEvents: "none",
+              style: [
+                styles5.activeIndicator,
+                { width: optionWidth, transform: [{ translateX: indicatorTranslateX }] }
+              ]
+            }
+          ) : null,
+          options.map(({ value: optionValue, label, icon: Icon2 }, index) => {
+            const selected = optionValue === selectedValue;
+            const iconColor = selected ? colors.primary : colors.whiteAlpha20;
+            const labelColor = selected ? colors.whiteAlpha86 : colors.whiteAlpha40;
+            return /* @__PURE__ */ jsx(
+              Pressable,
+              {
+                onPress: () => selectOption(optionValue),
+                disabled,
+                hitSlop,
+                accessibilityRole: "radio",
+                accessibilityLabel: label,
+                accessibilityState: { selected, disabled },
+                style: [
+                  styles5.option,
+                  fullWidth ? styles5.optionFullWidth : optionWidth > 0 && { minWidth: optionWidth }
+                ],
+                children: /* @__PURE__ */ jsxs(
+                  View,
+                  {
+                    onLayout: (event) => {
+                      const nextWidth = event.nativeEvent.layout.width;
+                      setContentWidths((currentWidths) => {
+                        if (currentWidths[index] === nextWidth) return currentWidths;
+                        const nextWidths = [currentWidths[0], currentWidths[1]];
+                        nextWidths[index] = nextWidth;
+                        return nextWidths;
+                      });
+                    },
+                    style: styles5.optionContent,
+                    children: [
+                      Icon2 ? /* @__PURE__ */ jsx(Icon2, { size: ICON_SIZE3, color: iconColor }) : null,
+                      /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [styles5.label, { color: labelColor }], children: label })
+                    ]
+                  }
+                )
+              },
+              optionValue
+            );
+          })
+        ]
+      }
+    );
+  }
+);
+var styles5 = StyleSheet.create({
+  base: {
+    height: 44,
+    flexDirection: "row",
+    padding: 4,
+    gap: 4,
+    borderRadius: 60,
+    backgroundColor: colors.grey700,
+    overflow: "hidden"
+  },
+  fullWidth: {
+    width: "100%",
+    alignSelf: "stretch"
+  },
+  contentWidth: {
+    alignSelf: "flex-start"
+  },
+  disabled: {
+    opacity: 0.6
+  },
+  option: {
+    zIndex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: 24,
+    borderRadius: 60
+  },
+  optionContent: {
+    maxWidth: "100%",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12
+  },
+  optionFullWidth: {
+    flex: 1,
+    minWidth: 0
+  },
+  activeIndicator: {
+    position: "absolute",
+    top: 4,
+    left: 4,
+    height: 36,
+    backgroundColor: colors.grey600,
+    borderRadius: 60
+  },
+  label: {
+    ...segmentedToggleTypography,
+    flexShrink: 1
+  }
+});
+var ICON_SIZE4 = 28;
+var StatCard = forwardRef(function StatCard2({ label, icon: Icon2, style, className, accessibilityLabel, ...rest }, forwardedRef) {
+  const containerRef = useRef(null);
+  const resolvedClassName = className?.trim() || void 0;
+  const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
+  useApplyWebClassName(containerRef, resolvedClassName);
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      ...rest,
+      ref: setContainerRef,
+      style: [styles6.base, style],
+      accessibilityRole: "text",
+      accessibilityLabel: accessibilityLabel ?? label,
+      children: [
+        /* @__PURE__ */ jsx(Icon2, { size: ICON_SIZE4, color: colors.white }),
+        /* @__PURE__ */ jsx(Text, { style: styles6.label, children: label })
+      ]
+    }
+  );
+});
+var styles6 = StyleSheet.create({
+  base: {
+    width: 204.5,
+    minHeight: 114,
+    padding: 24,
+    gap: 16,
+    borderRadius: 20,
+    backgroundColor: colors.grey750
+  },
+  label: {
+    ...statCardTypography,
+    color: colors.whiteAlpha86
   }
 });
-var variantConfig = {
+var variantConfig2 = {
   primary: {
     backgroundColor: colors.primary,
     textColor: colors.white,
@@ -1013,7 +1624,7 @@ var Button = forwardRef(
   }, forwardedRef) {
     const containerRef = useRef(null);
     const textRef = useRef(null);
-    const preset = variantConfig[variant];
+    const preset = variantConfig2[variant];
     const metrics = sizeConfig[size];
     const label = typeof children !== "undefined" ? children : title;
     const hasCustomChildren = typeof children !== "undefined";
@@ -1026,7 +1637,7 @@ var Button = forwardRef(
     useApplyWebClassName(textRef, textClassName);
     const iconNode = customIcon ?? /* @__PURE__ */ jsx(ArrowRightIcon, { size: metrics.iconSize, color: preset.iconColor });
     const containerStyle = [
-      styles2.base,
+      styles7.base,
       {
         minHeight: metrics.minHeight,
         borderRadius: metrics.borderRadius,
@@ -1037,15 +1648,15 @@ var Button = forwardRef(
         paddingRight: hasIcon ? metrics.paddingRightWithIcon : metrics.paddingRight,
         gap: hasIcon ? metrics.gap : 0
       },
-      disabled && styles2.disabled,
+      disabled && styles7.disabled,
       style
     ];
     const labelStyle = [
-      styles2.label,
+      styles7.label,
       metrics.text,
       { color: preset.textColor },
-      Platform.OS === "android" ? styles2.labelAndroid : null,
-      !hasIcon && styles2.labelCentered,
+      Platform.OS === "android" ? styles7.labelAndroid : null,
+      !hasIcon && styles7.labelCentered,
       textStyle
     ];
     return /* @__PURE__ */ jsxs(
@@ -1066,7 +1677,7 @@ var Button = forwardRef(
             View,
             {
               style: [
-                styles2.iconContainer,
+                styles7.iconContainer,
                 {
                   width: metrics.iconContainerSize,
                   height: metrics.iconContainerSize,
@@ -1082,7 +1693,7 @@ var Button = forwardRef(
     );
   }
 );
-var styles2 = StyleSheet.create({
+var styles7 = StyleSheet.create({
   base: {
     flexDirection: "row",
     alignItems: "center",
@@ -1160,13 +1771,13 @@ var Checkbox = forwardRef(function Checkbox2({
       accessibilityRole: "checkbox",
       accessibilityLabel: resolvedAccessibilityLabel,
       accessibilityState: { checked: isActive, disabled },
-      style: [styles3.root, disabled && styles3.disabled, style],
+      style: [styles8.root, disabled && styles8.disabled, style],
       children: [
         /* @__PURE__ */ jsx(
           View,
           {
             style: [
-              styles3.box,
+              styles8.box,
               {
                 backgroundColor: chrome.backgroundColor,
                 borderColor: chrome.borderColor
@@ -1175,12 +1786,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: [styles8.label, labelStyle], children: labelContent }) : labelContent : null
       ]
     }
   );
 });
-var styles3 = StyleSheet.create({
+var styles8 = StyleSheet.create({
   root: {
     flexDirection: "row",
     alignItems: "center",
@@ -1204,7 +1815,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_SIZE5 = 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: [styles9.root, isOpen && styles9.rootOpen, disabled && styles9.disabled, style],
+        accessibilityState: { disabled, expanded: isOpen },
+        children: /* @__PURE__ */ jsxs(View, { style: [styles9.triggerWrap, isOpen && styles9.triggerWrapOpen], children: [
+          /* @__PURE__ */ jsxs(
+            Pressable,
+            {
+              ref: triggerRef,
+              onPress: handleTriggerPress,
+              disabled,
+              accessibilityRole: "button",
+              accessibilityLabel: resolvedAccessibilityLabel,
+              accessibilityState: { disabled, expanded: isOpen },
+              style: [
+                styles9.trigger,
+                { borderColor: triggerBorderColor, backgroundColor: colors.grey700 }
+              ],
+              children: [
+                /* @__PURE__ */ jsx(Text, { style: [styles9.triggerText, { color: triggerTextColor }], numberOfLines: 1, children: triggerLabel }),
+                /* @__PURE__ */ jsx(View, { style: styles9.iconSlot, children: /* @__PURE__ */ jsx(CalendarOutlineIcon, { size: ICON_SIZE5, color: colors.grey100 }) })
+              ]
+            }
+          ),
+          isOpen ? /* @__PURE__ */ jsxs(View, { style: styles9.menu, children: [
+            /* @__PURE__ */ jsxs(View, { style: styles9.calendarHeader, children: [
+              /* @__PURE__ */ jsx(
+                Pressable,
+                {
+                  onPress: handlePrevMonth,
+                  hitSlop: 8,
+                  accessibilityRole: "button",
+                  accessibilityLabel: "Previous month",
+                  style: styles9.navButton,
+                  children: /* @__PURE__ */ jsx(ChevronLeftIcon, { size: NAV_ICON_SIZE, color: colors.white })
+                }
+              ),
+              /* @__PURE__ */ jsxs(Text, { style: styles9.monthHeading, children: [
+                monthNames[visibleMonth.getMonth()],
+                " ",
+                visibleMonth.getFullYear()
+              ] }),
+              /* @__PURE__ */ jsx(
+                Pressable,
+                {
+                  onPress: handleNextMonth,
+                  hitSlop: 8,
+                  accessibilityRole: "button",
+                  accessibilityLabel: "Next month",
+                  style: styles9.navButton,
+                  children: /* @__PURE__ */ jsx(View, { style: styles9.navIconMirror, children: /* @__PURE__ */ jsx(ChevronLeftIcon, { size: NAV_ICON_SIZE, color: colors.white }) })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs(View, { children: [
+              /* @__PURE__ */ jsx(View, { style: styles9.weekdayRow, children: weekdayLabels.map((weekdayLabel, index) => /* @__PURE__ */ jsx(View, { style: styles9.dayCellWrap, children: /* @__PURE__ */ jsx(Text, { style: styles9.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: [styles9.weekRow, weekIndex > 0 && styles9.weekRowSpaced],
+                    children: [
+                      rangeHighlightStyle ? /* @__PURE__ */ jsx(
+                        View,
+                        {
+                          pointerEvents: "none",
+                          style: [styles9.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: styles9.dayCellWrap,
+                            accessibilityRole: "button",
+                            accessibilityLabel: formatValue(day),
+                            accessibilityState: {
+                              disabled: dayDisabled,
+                              selected: isSelectedEndpoint
+                            },
+                            children: [
+                              /* @__PURE__ */ jsx(
+                                View,
+                                {
+                                  style: [
+                                    styles9.dayCircle,
+                                    isSelectedEndpoint && styles9.dayCircleSelected,
+                                    isHovered && styles9.dayCircleHovered
+                                  ],
+                                  children: /* @__PURE__ */ jsx(Text, { style: [styles9.dayText, { color: dayTextColor }], children: day.getDate() })
+                                }
+                              ),
+                              isToday && !isSelectedEndpoint ? /* @__PURE__ */ jsx(View, { style: styles9.todayDot }) : null
+                            ]
+                          },
+                          dayIndex
+                        );
+                      })
+                    ]
+                  },
+                  weekIndex
+                );
+              })
+            ] })
+          ] }) : null
+        ] })
+      }
+    );
+  }
+);
+var styles9 = 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_SIZE5,
+    height: ICON_SIZE5,
+    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 +2457,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: [styles10.root, disabled && styles10.disabled, style], children: [
+    showLabel && label ? /* @__PURE__ */ jsx(Text, { style: [styles10.label, { color: chrome.labelColor }], children: label }) : null,
     /* @__PURE__ */ jsxs(
       View,
       {
         style: [
-          styles4.field,
+          styles10.field,
           {
             height: metrics.height,
             borderRadius: metrics.borderRadius,
@@ -1349,7 +2478,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: [styles10.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }], children: leftIconNode }) : null,
           /* @__PURE__ */ jsx(
             TextInput,
             {
@@ -1373,11 +2502,11 @@ var Input = forwardRef(function Input2({
                 onBlur?.(event);
               },
               style: [
-                styles4.input,
+                styles10.input,
                 metrics.text,
                 { color: chrome.textColor },
-                Platform.OS === "web" ? styles4.inputWeb : null,
-                Platform.OS === "android" ? styles4.inputAndroid : null,
+                Platform.OS === "web" ? styles10.inputWeb : null,
+                Platform.OS === "android" ? styles10.inputAndroid : null,
                 inputStyle
               ],
               accessibilityLabel: resolvedAccessibilityLabel,
@@ -1389,22 +2518,22 @@ var Input = forwardRef(function Input2({
             {
               onPress: onRightIconPress,
               disabled,
-              style: [styles4.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }],
+              style: [styles10.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: [styles10.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: [styles10.hint, { color: chrome.hintColor }], children: hint }) : null
   ] });
 });
-var styles4 = StyleSheet.create({
+var styles10 = StyleSheet.create({
   root: {
-    width: DEFAULT_WIDTH,
+    width: DEFAULT_WIDTH2,
     gap: 8,
     alignSelf: "flex-start"
   },
@@ -1439,13 +2568,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_SIZE6 = 20;
 var CHIP_GAP = 6;
 var FALLBACK_ELLIPSIS_WIDTH = 20;
 function itemBackground(state) {
@@ -1518,25 +2647,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: styles11.multiValueRoot, children: [
+    /* @__PURE__ */ jsxs(View, { pointerEvents: "none", style: styles11.measureRow, children: [
       options.map((option) => /* @__PURE__ */ jsxs(
         View,
         {
-          style: styles5.chip,
+          style: styles11.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: styles11.chipLabel, numberOfLines: 1, children: option.label }),
+            /* @__PURE__ */ jsx(Text, { style: styles11.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: styles11.ellipsis, onLayout: handleEllipsisLayout, children: /* @__PURE__ */ jsx(Text, { style: styles11.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: styles11.chipsRow, onLayout: handleContainerLayout, children: [
+      visible.map((option) => /* @__PURE__ */ jsxs(View, { style: styles11.chip, children: [
+        /* @__PURE__ */ jsx(Text, { style: styles11.chipLabel, numberOfLines: 1, children: option.label }),
         /* @__PURE__ */ jsx(
           Pressable,
           {
@@ -1548,11 +2677,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: styles11.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: styles11.ellipsis, children: /* @__PURE__ */ jsx(Text, { style: styles11.ellipsisText, children: "..." }) }) : null
     ] })
   ] });
 }
@@ -1763,7 +2892,7 @@ var Select = forwardRef(
     const leftIconNode = leftIcon ?? /* @__PURE__ */ jsx(
       UserIcon,
       {
-        size: ICON_SIZE,
+        size: ICON_SIZE6,
         color: error ? colors.red : isOpen ? colors.primary : colors.grey100
       }
     );
@@ -1779,11 +2908,11 @@ var Select = forwardRef(
       {
         ...rest,
         ref: setRootRef,
-        style: [styles5.root, isOpen && styles5.rootOpen, disabled && styles5.disabled, style],
+        style: [styles11.root, isOpen && styles11.rootOpen, disabled && styles11.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: [styles11.label, { color: labelColor }], children: label }) : null,
+          /* @__PURE__ */ jsxs(View, { style: [styles11.triggerWrap, isOpen && styles11.triggerWrapOpen], children: [
             /* @__PURE__ */ jsxs(
               Pressable,
               {
@@ -1794,29 +2923,29 @@ var Select = forwardRef(
                 accessibilityLabel: resolvedAccessibilityLabel,
                 accessibilityState: { disabled, expanded: isOpen },
                 style: [
-                  styles5.trigger,
+                  styles11.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: styles11.iconSlot, children: leftIconNode }) : null,
+                  /* @__PURE__ */ jsx(View, { style: styles11.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: [styles11.triggerText, { color: triggerTextColor }], numberOfLines: 1, children: multiple ? placeholder : singleLabel }) }),
+                  /* @__PURE__ */ jsx(View, { style: [styles11.iconSlot, isOpen && styles11.chevronOpen], children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: ICON_SIZE6, 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: styles11.menu, children: [
+              showSearch ? /* @__PURE__ */ jsxs(View, { style: styles11.searchField, children: [
+                /* @__PURE__ */ jsx(View, { style: styles11.iconSlot, children: /* @__PURE__ */ jsx(SearchIcon, { size: ICON_SIZE6, color: colors.grey100 }) }),
                 /* @__PURE__ */ jsx(
                   TextInput,
                   {
@@ -1827,9 +2956,9 @@ var Select = forwardRef(
                     placeholder: searchPlaceholder,
                     placeholderTextColor: colors.grey100,
                     style: [
-                      styles5.searchInput,
-                      Platform.OS === "web" ? styles5.searchInputWeb : null,
-                      Platform.OS === "android" ? styles5.searchInputAndroid : null
+                      styles11.searchInput,
+                      Platform.OS === "web" ? styles11.searchInputWeb : null,
+                      Platform.OS === "android" ? styles11.searchInputAndroid : null
                     ],
                     accessibilityLabel: searchPlaceholder
                   }
@@ -1838,12 +2967,12 @@ var Select = forwardRef(
               /* @__PURE__ */ jsxs(
                 ScrollView,
                 {
-                  style: styles5.optionList,
-                  contentContainerStyle: styles5.optionListContent,
+                  style: styles11.optionList,
+                  contentContainerStyle: styles11.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: styles11.statusRow, children: /* @__PURE__ */ jsx(Text, { style: styles11.statusText, children: "Loading..." }) }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsx(View, { style: styles11.statusRow, children: /* @__PURE__ */ jsx(Text, { style: styles11.statusText, children: emptyText }) }) : null,
                     !loading && filteredOptions.map((option) => {
                       const isSelected = selectedValues.includes(option.value);
                       const isHovered = hoveredValue === option.value;
@@ -1860,14 +2989,14 @@ var Select = forwardRef(
                           accessibilityRole: multiple ? "checkbox" : "button",
                           accessibilityState: { selected: isSelected, checked: isSelected, disabled },
                           style: [
-                            styles5.item,
+                            styles11.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: styles11.itemCheckbox, children: /* @__PURE__ */ jsx(Checkbox, { value: isSelected, variant: "light" }) }) : null,
+                            /* @__PURE__ */ jsx(Text, { style: styles11.itemLabel, numberOfLines: 1, children: option.label })
                           ]
                         },
                         option.value
@@ -1878,15 +3007,15 @@ var Select = forwardRef(
               )
             ] }) : null
           ] }),
-          showHint && hint ? /* @__PURE__ */ jsx(Text, { style: [styles5.hint, { color: hintColor }], children: hint }) : null
+          showHint && hint ? /* @__PURE__ */ jsx(Text, { style: [styles11.hint, { color: hintColor }], children: hint }) : null
         ]
       }
     );
   }
 );
-var styles5 = StyleSheet.create({
+var styles11 = StyleSheet.create({
   root: {
-    width: DEFAULT_WIDTH2,
+    width: DEFAULT_WIDTH3,
     gap: 8,
     alignSelf: "flex-start"
   },
@@ -1907,8 +3036,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 +3103,8 @@ var styles5 = StyleSheet.create({
     lineHeight: 16
   },
   iconSlot: {
-    width: ICON_SIZE,
-    height: ICON_SIZE,
+    width: ICON_SIZE6,
+    height: ICON_SIZE6,
     alignItems: "center",
     justifyContent: "center",
     flexShrink: 0
@@ -1990,7 +3119,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 +3149,7 @@ var styles5 = StyleSheet.create({
   },
   searchField: {
     height: 40,
-    borderRadius: ITEM_RADIUS,
+    borderRadius: ITEM_RADIUS2,
     paddingHorizontal: 12,
     flexDirection: "row",
     alignItems: "center",
@@ -2042,7 +3171,7 @@ var styles5 = StyleSheet.create({
   },
   item: {
     minHeight: 43,
-    borderRadius: ITEM_RADIUS,
+    borderRadius: ITEM_RADIUS2,
     padding: 12,
     flexDirection: "row",
     alignItems: "center",
@@ -2060,7 +3189,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 +3275,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: [styles12.root, disabled && styles12.disabled, style], children: [
+    showLabel && label ? /* @__PURE__ */ jsx(Text, { style: [styles12.label, { color: chrome.labelColor }], children: label }) : null,
     /* @__PURE__ */ jsx(
       View,
       {
         style: [
-          styles6.field,
+          styles12.field,
           {
             borderColor: chrome.borderColor,
             backgroundColor: chrome.backgroundColor
@@ -2184,11 +3313,11 @@ var Textarea = forwardRef(function Textarea2({
               onBlur?.(event);
             },
             style: [
-              styles6.input,
+              styles12.input,
               textareaTypography.field,
               { color: chrome.textColor },
-              Platform.OS === "web" ? styles6.inputWeb : null,
-              Platform.OS === "android" ? styles6.inputAndroid : null,
+              Platform.OS === "web" ? styles12.inputWeb : null,
+              Platform.OS === "android" ? styles12.inputAndroid : null,
               inputStyle
             ],
             accessibilityLabel: resolvedAccessibilityLabel,
@@ -2197,12 +3326,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: [styles12.hint, { color: chrome.hintColor }], children: hint }) : null
   ] });
 });
-var styles6 = StyleSheet.create({
+var styles12 = StyleSheet.create({
   root: {
-    width: DEFAULT_WIDTH3,
+    width: DEFAULT_WIDTH4,
     gap: 8,
     alignSelf: "flex-start"
   },
@@ -2243,7 +3372,7 @@ var TRACK_RADIUS = 43;
 var TRACK_PADDING = 4;
 var THUMB_SIZE = TRACK_HEIGHT - TRACK_PADDING * 2;
 var THUMB_TRAVEL = TRACK_WIDTH - TRACK_PADDING * 2 - THUMB_SIZE;
-var ANIMATION_DURATION = 300;
+var ANIMATION_DURATION2 = 300;
 var Toggle = forwardRef(function Toggle2({
   value,
   defaultValue = false,
@@ -2270,7 +3399,7 @@ var Toggle = forwardRef(function Toggle2({
   useEffect(() => {
     Animated.timing(progress, {
       toValue: isActive ? 1 : 0,
-      duration: ANIMATION_DURATION,
+      duration: ANIMATION_DURATION2,
       easing: Easing.out(Easing.ease),
       useNativeDriver: false
     }).start();
@@ -2300,13 +3429,13 @@ var Toggle = forwardRef(function Toggle2({
       accessibilityRole: "switch",
       accessibilityLabel: resolvedAccessibilityLabel,
       accessibilityState: { checked: isActive, disabled },
-      style: [styles7.pressable, disabled && styles7.disabled, style],
+      style: [styles13.pressable, disabled && styles13.disabled, style],
       children: [
         /* @__PURE__ */ jsx(
           Animated.View,
           {
             style: [
-              styles7.track,
+              styles13.track,
               {
                 backgroundColor: trackBackgroundColor
               }
@@ -2315,7 +3444,7 @@ var Toggle = forwardRef(function Toggle2({
               Animated.View,
               {
                 style: [
-                  styles7.thumb,
+                  styles13.thumb,
                   {
                     transform: [{ translateX: thumbTranslateX }]
                   }
@@ -2324,12 +3453,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: [styles13.label, labelStyle], children: labelContent }) : labelContent : null
       ]
     }
   );
 });
-var styles7 = StyleSheet.create({
+var styles13 = StyleSheet.create({
   pressable: {
     flexDirection: "row",
     alignItems: "center",
@@ -2358,6 +3487,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, Badge, BagIcon, BellIcon, BuildingIcon, Button, CalendarIcon, CalendarOutlineIcon, CameraIcon, CheckBadgeIcon, CheckIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ClockIcon, Counter, DatePicker, FacebookIcon, HeartIcon, HelpCircleIcon, HomeIcon, Icon, Input, InstagramIcon, KeyIcon, LayoutGridIcon, LinkedInIcon, LogOutIcon, MailIcon, MenuItem, MinusIcon, NavigateIcon, PhoneIcon, PlusIcon, SearchIcon, SegmentedToggle, Select, SettingsIcon, ShowIcon, SidebarIcon, StatCard, Textarea, Toggle, UserIcon, UsersAltIcon, VideoIcon, avatarTypography, badgeTypography, buttonTypography, colors, counterTypography, datePickerTypography, fonts, getIconsByGroup, grey, iconGroupNames, iconGroups, iconNames, icons, inputTypography, segmentedToggleTypography, selectTypography, statCardTypography, textareaTypography };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map