@ecohouse/ui 0.1.5 → 0.1.6

package/dist/index.js

@@ -1,5 +1,5 @@
 import { forwardRef, useRef, useMemo, useState, useCallback, useEffect, useLayoutEffect } from 'react';
-import { Pressable, View, Text, StyleSheet, Platform, Image, 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,9 +30,15 @@ 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",
@@ -74,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,
@@ -521,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 }) {
@@ -551,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";
@@ -626,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 }) {
@@ -641,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",
@@ -684,12 +769,16 @@ 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);
@@ -705,12 +794,14 @@ var iconGroups = {
     "search",
     "calendar",
     "calendarOutline",
-    "heart"
+    "heart",
+    "minus",
+    "plus"
   ],
-  objects: ["bag", "building", "clock", "user", "video"],
+  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) {
@@ -1087,7 +1178,394 @@ var styles2 = StyleSheet.create({
     })
   }
 });
+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",
+    alignSelf: "flex-start",
+    minHeight: 44,
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    gap: 12,
+    borderRadius: 79,
+    overflow: "hidden",
+    borderWidth: 0,
+    borderColor: "transparent",
+    borderStyle: "solid"
+  },
+  transparentBorder: {
+    borderWidth: 1,
+    borderColor: colors.whiteAlpha5,
+    borderStyle: "solid"
+  },
+  iconSlot: {
+    width: ICON_SIZE2,
+    height: ICON_SIZE2,
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0
+  },
+  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 variantConfig2 = {
   primary: {
     backgroundColor: colors.primary,
     textColor: colors.white,
@@ -1146,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";
@@ -1159,7 +1637,7 @@ var Button = forwardRef(
     useApplyWebClassName(textRef, textClassName);
     const iconNode = customIcon ?? /* @__PURE__ */ jsx(ArrowRightIcon, { size: metrics.iconSize, color: preset.iconColor });
     const containerStyle = [
-      styles3.base,
+      styles7.base,
       {
         minHeight: metrics.minHeight,
         borderRadius: metrics.borderRadius,
@@ -1170,15 +1648,15 @@ var Button = forwardRef(
         paddingRight: hasIcon ? metrics.paddingRightWithIcon : metrics.paddingRight,
         gap: hasIcon ? metrics.gap : 0
       },
-      disabled && styles3.disabled,
+      disabled && styles7.disabled,
       style
     ];
     const labelStyle = [
-      styles3.label,
+      styles7.label,
       metrics.text,
       { color: preset.textColor },
-      Platform.OS === "android" ? styles3.labelAndroid : null,
-      !hasIcon && styles3.labelCentered,
+      Platform.OS === "android" ? styles7.labelAndroid : null,
+      !hasIcon && styles7.labelCentered,
       textStyle
     ];
     return /* @__PURE__ */ jsxs(
@@ -1199,7 +1677,7 @@ var Button = forwardRef(
             View,
             {
               style: [
-                styles3.iconContainer,
+                styles7.iconContainer,
                 {
                   width: metrics.iconContainerSize,
                   height: metrics.iconContainerSize,
@@ -1215,7 +1693,7 @@ var Button = forwardRef(
     );
   }
 );
-var styles3 = StyleSheet.create({
+var styles7 = StyleSheet.create({
   base: {
     flexDirection: "row",
     alignItems: "center",
@@ -1293,13 +1771,13 @@ var Checkbox = forwardRef(function Checkbox2({
       accessibilityRole: "checkbox",
       accessibilityLabel: resolvedAccessibilityLabel,
       accessibilityState: { checked: isActive, disabled },
-      style: [styles4.root, disabled && styles4.disabled, style],
+      style: [styles8.root, disabled && styles8.disabled, style],
       children: [
         /* @__PURE__ */ jsx(
           View,
           {
             style: [
-              styles4.box,
+              styles8.box,
               {
                 backgroundColor: chrome.backgroundColor,
                 borderColor: chrome.borderColor
@@ -1308,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: [styles4.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 styles4 = StyleSheet.create({
+var styles8 = StyleSheet.create({
   root: {
     flexDirection: "row",
     alignItems: "center",
@@ -1411,7 +1889,7 @@ var DEFAULT_WIDTH = 380;
 var TRIGGER_HEIGHT = 44;
 var TRIGGER_RADIUS = 60;
 var MENU_RADIUS2 = 20;
-var ICON_SIZE2 = 20;
+var ICON_SIZE5 = 20;
 var NAV_ICON_SIZE = 20;
 var DAY_CELL_HEIGHT = 44;
 var DAY_CIRCLE_SIZE = 44;
@@ -1563,9 +2041,9 @@ var DatePicker = forwardRef(
       {
         ...rest,
         ref: setRootRef,
-        style: [styles5.root, isOpen && styles5.rootOpen, disabled && styles5.disabled, style],
+        style: [styles9.root, isOpen && styles9.rootOpen, disabled && styles9.disabled, style],
         accessibilityState: { disabled, expanded: isOpen },
-        children: /* @__PURE__ */ jsxs(View, { style: [styles5.triggerWrap, isOpen && styles5.triggerWrapOpen], children: [
+        children: /* @__PURE__ */ jsxs(View, { style: [styles9.triggerWrap, isOpen && styles9.triggerWrapOpen], children: [
           /* @__PURE__ */ jsxs(
             Pressable,
             {
@@ -1576,17 +2054,17 @@ var DatePicker = forwardRef(
               accessibilityLabel: resolvedAccessibilityLabel,
               accessibilityState: { disabled, expanded: isOpen },
               style: [
-                styles5.trigger,
+                styles9.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 }) })
+                /* @__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: styles5.menu, children: [
-            /* @__PURE__ */ jsxs(View, { style: styles5.calendarHeader, children: [
+          isOpen ? /* @__PURE__ */ jsxs(View, { style: styles9.menu, children: [
+            /* @__PURE__ */ jsxs(View, { style: styles9.calendarHeader, children: [
               /* @__PURE__ */ jsx(
                 Pressable,
                 {
@@ -1594,11 +2072,11 @@ var DatePicker = forwardRef(
                   hitSlop: 8,
                   accessibilityRole: "button",
                   accessibilityLabel: "Previous month",
-                  style: styles5.navButton,
+                  style: styles9.navButton,
                   children: /* @__PURE__ */ jsx(ChevronLeftIcon, { size: NAV_ICON_SIZE, color: colors.white })
                 }
               ),
-              /* @__PURE__ */ jsxs(Text, { style: styles5.monthHeading, children: [
+              /* @__PURE__ */ jsxs(Text, { style: styles9.monthHeading, children: [
                 monthNames[visibleMonth.getMonth()],
                 " ",
                 visibleMonth.getFullYear()
@@ -1610,13 +2088,13 @@ var DatePicker = forwardRef(
                   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 }) })
+                  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: styles5.weekdayRow, children: weekdayLabels.map((weekdayLabel, index) => /* @__PURE__ */ jsx(View, { style: styles5.dayCellWrap, children: /* @__PURE__ */ jsx(Text, { style: styles5.weekdayText, children: weekdayLabel }) }, `${weekdayLabel}-${index}`)) }),
+              /* @__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) {
@@ -1653,13 +2131,13 @@ var DatePicker = forwardRef(
                 return /* @__PURE__ */ jsxs(
                   View,
                   {
-                    style: [styles5.weekRow, weekIndex > 0 && styles5.weekRowSpaced],
+                    style: [styles9.weekRow, weekIndex > 0 && styles9.weekRowSpaced],
                     children: [
                       rangeHighlightStyle ? /* @__PURE__ */ jsx(
                         View,
                         {
                           pointerEvents: "none",
-                          style: [styles5.rangeHighlight, rangeHighlightStyle]
+                          style: [styles9.rangeHighlight, rangeHighlightStyle]
                         }
                       ) : null,
                       week.map((day, dayIndex) => {
@@ -1682,7 +2160,7 @@ var DatePicker = forwardRef(
                             onHoverOut: () => setHoveredDayKey((current) => current === dayKey ? null : current),
                             onPressIn: () => setHoveredDayKey(dayKey),
                             onPressOut: () => setHoveredDayKey((current) => current === dayKey ? null : current),
-                            style: styles5.dayCellWrap,
+                            style: styles9.dayCellWrap,
                             accessibilityRole: "button",
                             accessibilityLabel: formatValue(day),
                             accessibilityState: {
@@ -1694,14 +2172,14 @@ var DatePicker = forwardRef(
                                 View,
                                 {
                                   style: [
-                                    styles5.dayCircle,
-                                    isSelectedEndpoint && styles5.dayCircleSelected,
-                                    isHovered && styles5.dayCircleHovered
+                                    styles9.dayCircle,
+                                    isSelectedEndpoint && styles9.dayCircleSelected,
+                                    isHovered && styles9.dayCircleHovered
                                   ],
-                                  children: /* @__PURE__ */ jsx(Text, { style: [styles5.dayText, { color: dayTextColor }], children: day.getDate() })
+                                  children: /* @__PURE__ */ jsx(Text, { style: [styles9.dayText, { color: dayTextColor }], children: day.getDate() })
                                 }
                               ),
-                              isToday && !isSelectedEndpoint ? /* @__PURE__ */ jsx(View, { style: styles5.todayDot }) : null
+                              isToday && !isSelectedEndpoint ? /* @__PURE__ */ jsx(View, { style: styles9.todayDot }) : null
                             ]
                           },
                           dayIndex
@@ -1719,7 +2197,7 @@ var DatePicker = forwardRef(
     );
   }
 );
-var styles5 = StyleSheet.create({
+var styles9 = StyleSheet.create({
   root: {
     width: DEFAULT_WIDTH,
     gap: 8,
@@ -1755,8 +2233,8 @@ var styles5 = StyleSheet.create({
     minWidth: 0
   },
   iconSlot: {
-    width: ICON_SIZE2,
-    height: ICON_SIZE2,
+    width: ICON_SIZE5,
+    height: ICON_SIZE5,
     alignItems: "center",
     justifyContent: "center",
     flexShrink: 0
@@ -1979,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: [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: [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: [
-          styles6.field,
+          styles10.field,
           {
             height: metrics.height,
             borderRadius: metrics.borderRadius,
@@ -2000,7 +2478,7 @@ var Input = forwardRef(function Input2({
           fieldStyle
         ],
         children: [
-          hasLeftIcon ? /* @__PURE__ */ jsx(View, { style: [styles6.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,
             {
@@ -2024,11 +2502,11 @@ var Input = forwardRef(function Input2({
                 onBlur?.(event);
               },
               style: [
-                styles6.input,
+                styles10.input,
                 metrics.text,
                 { color: chrome.textColor },
-                Platform.OS === "web" ? styles6.inputWeb : null,
-                Platform.OS === "android" ? styles6.inputAndroid : null,
+                Platform.OS === "web" ? styles10.inputWeb : null,
+                Platform.OS === "android" ? styles10.inputAndroid : null,
                 inputStyle
               ],
               accessibilityLabel: resolvedAccessibilityLabel,
@@ -2040,20 +2518,20 @@ var Input = forwardRef(function Input2({
             {
               onPress: onRightIconPress,
               disabled,
-              style: [styles6.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: [styles6.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: [styles6.hint, { color: chrome.hintColor }], children: hint }) : null
+    showHint && hint ? /* @__PURE__ */ jsx(Text, { style: [styles10.hint, { color: chrome.hintColor }], children: hint }) : null
   ] });
 });
-var styles6 = StyleSheet.create({
+var styles10 = StyleSheet.create({
   root: {
     width: DEFAULT_WIDTH2,
     gap: 8,
@@ -2096,7 +2574,7 @@ var TRIGGER_RADIUS2 = 60;
 var MENU_RADIUS3 = 24;
 var MENU_MAX_LIST_HEIGHT = 248;
 var ITEM_RADIUS2 = 12;
-var ICON_SIZE3 = 20;
+var ICON_SIZE6 = 20;
 var CHIP_GAP = 6;
 var FALLBACK_ELLIPSIS_WIDTH = 20;
 function itemBackground(state) {
@@ -2169,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: styles7.multiValueRoot, children: [
-    /* @__PURE__ */ jsxs(View, { pointerEvents: "none", style: styles7.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: styles7.chip,
+          style: styles11.chip,
           onLayout: (event) => handleChipLayout(option.value, event),
           children: [
-            /* @__PURE__ */ jsx(Text, { style: styles7.chipLabel, numberOfLines: 1, children: option.label }),
-            /* @__PURE__ */ jsx(Text, { style: styles7.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: styles7.ellipsis, onLayout: handleEllipsisLayout, children: /* @__PURE__ */ jsx(Text, { style: styles7.ellipsisText, children: "..." }) })
+      /* @__PURE__ */ jsx(View, { style: styles11.ellipsis, onLayout: handleEllipsisLayout, children: /* @__PURE__ */ jsx(Text, { style: styles11.ellipsisText, children: "..." }) })
     ] }),
-    /* @__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__ */ 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,
           {
@@ -2199,11 +2677,11 @@ function MultiValueChips({ options, disabled, onRemove }) {
             hitSlop: 6,
             accessibilityRole: "button",
             accessibilityLabel: `Remove ${option.label}`,
-            children: /* @__PURE__ */ jsx(Text, { style: styles7.chipRemove, children: "\xD7" })
+            children: /* @__PURE__ */ jsx(Text, { style: styles11.chipRemove, children: "\xD7" })
           }
         )
       ] }, option.value)),
-      hasOverflow ? /* @__PURE__ */ jsx(View, { style: styles7.ellipsis, children: /* @__PURE__ */ jsx(Text, { style: styles7.ellipsisText, children: "..." }) }) : null
+      hasOverflow ? /* @__PURE__ */ jsx(View, { style: styles11.ellipsis, children: /* @__PURE__ */ jsx(Text, { style: styles11.ellipsisText, children: "..." }) }) : null
     ] })
   ] });
 }
@@ -2414,7 +2892,7 @@ var Select = forwardRef(
     const leftIconNode = leftIcon ?? /* @__PURE__ */ jsx(
       UserIcon,
       {
-        size: ICON_SIZE3,
+        size: ICON_SIZE6,
         color: error ? colors.red : isOpen ? colors.primary : colors.grey100
       }
     );
@@ -2430,11 +2908,11 @@ var Select = forwardRef(
       {
         ...rest,
         ref: setRootRef,
-        style: [styles7.root, isOpen && styles7.rootOpen, disabled && styles7.disabled, style],
+        style: [styles11.root, isOpen && styles11.rootOpen, disabled && styles11.disabled, style],
         accessibilityState: { disabled, expanded: isOpen },
         children: [
-          showLabel && label ? /* @__PURE__ */ jsx(Text, { style: [styles7.label, { color: labelColor }], children: label }) : null,
-          /* @__PURE__ */ jsxs(View, { style: [styles7.triggerWrap, isOpen && styles7.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,
               {
@@ -2445,29 +2923,29 @@ var Select = forwardRef(
                 accessibilityLabel: resolvedAccessibilityLabel,
                 accessibilityState: { disabled, expanded: isOpen },
                 style: [
-                  styles7.trigger,
+                  styles11.trigger,
                   {
                     borderColor: triggerBorderColor,
                     backgroundColor: colors.grey700
                   }
                 ],
                 children: [
-                  hasLeftIcon ? /* @__PURE__ */ jsx(View, { style: styles7.iconSlot, children: leftIconNode }) : null,
-                  /* @__PURE__ */ jsx(View, { style: styles7.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: [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 }) })
+                  ) : /* @__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: 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 }) }),
+            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,
                   {
@@ -2478,9 +2956,9 @@ var Select = forwardRef(
                     placeholder: searchPlaceholder,
                     placeholderTextColor: colors.grey100,
                     style: [
-                      styles7.searchInput,
-                      Platform.OS === "web" ? styles7.searchInputWeb : null,
-                      Platform.OS === "android" ? styles7.searchInputAndroid : null
+                      styles11.searchInput,
+                      Platform.OS === "web" ? styles11.searchInputWeb : null,
+                      Platform.OS === "android" ? styles11.searchInputAndroid : null
                     ],
                     accessibilityLabel: searchPlaceholder
                   }
@@ -2489,12 +2967,12 @@ var Select = forwardRef(
               /* @__PURE__ */ jsxs(
                 ScrollView,
                 {
-                  style: styles7.optionList,
-                  contentContainerStyle: styles7.optionListContent,
+                  style: styles11.optionList,
+                  contentContainerStyle: styles11.optionListContent,
                   keyboardShouldPersistTaps: "handled",
                   showsVerticalScrollIndicator: false,
                   children: [
-                    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 ? /* @__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;
@@ -2511,14 +2989,14 @@ var Select = forwardRef(
                           accessibilityRole: multiple ? "checkbox" : "button",
                           accessibilityState: { selected: isSelected, checked: isSelected, disabled },
                           style: [
-                            styles7.item,
+                            styles11.item,
                             {
                               backgroundColor: itemBackground(visualState)
                             }
                           ],
                           children: [
-                            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 })
+                            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
@@ -2529,13 +3007,13 @@ var Select = forwardRef(
               )
             ] }) : null
           ] }),
-          showHint && hint ? /* @__PURE__ */ jsx(Text, { style: [styles7.hint, { color: hintColor }], children: hint }) : null
+          showHint && hint ? /* @__PURE__ */ jsx(Text, { style: [styles11.hint, { color: hintColor }], children: hint }) : null
         ]
       }
     );
   }
 );
-var styles7 = StyleSheet.create({
+var styles11 = StyleSheet.create({
   root: {
     width: DEFAULT_WIDTH3,
     gap: 8,
@@ -2625,8 +3103,8 @@ var styles7 = StyleSheet.create({
     lineHeight: 16
   },
   iconSlot: {
-    width: ICON_SIZE3,
-    height: ICON_SIZE3,
+    width: ICON_SIZE6,
+    height: ICON_SIZE6,
     alignItems: "center",
     justifyContent: "center",
     flexShrink: 0
@@ -2797,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: [styles8.root, disabled && styles8.disabled, style], children: [
-    showLabel && label ? /* @__PURE__ */ jsx(Text, { style: [styles8.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: [
-          styles8.field,
+          styles12.field,
           {
             borderColor: chrome.borderColor,
             backgroundColor: chrome.backgroundColor
@@ -2835,11 +3313,11 @@ var Textarea = forwardRef(function Textarea2({
               onBlur?.(event);
             },
             style: [
-              styles8.input,
+              styles12.input,
               textareaTypography.field,
               { color: chrome.textColor },
-              Platform.OS === "web" ? styles8.inputWeb : null,
-              Platform.OS === "android" ? styles8.inputAndroid : null,
+              Platform.OS === "web" ? styles12.inputWeb : null,
+              Platform.OS === "android" ? styles12.inputAndroid : null,
               inputStyle
             ],
             accessibilityLabel: resolvedAccessibilityLabel,
@@ -2848,10 +3326,10 @@ var Textarea = forwardRef(function Textarea2({
         )
       }
     ),
-    showHint && hint ? /* @__PURE__ */ jsx(Text, { style: [styles8.hint, { color: chrome.hintColor }], children: hint }) : null
+    showHint && hint ? /* @__PURE__ */ jsx(Text, { style: [styles12.hint, { color: chrome.hintColor }], children: hint }) : null
   ] });
 });
-var styles8 = StyleSheet.create({
+var styles12 = StyleSheet.create({
   root: {
     width: DEFAULT_WIDTH4,
     gap: 8,
@@ -2894,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,
@@ -2921,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();
@@ -2951,13 +3429,13 @@ var Toggle = forwardRef(function Toggle2({
       accessibilityRole: "switch",
       accessibilityLabel: resolvedAccessibilityLabel,
       accessibilityState: { checked: isActive, disabled },
-      style: [styles9.pressable, disabled && styles9.disabled, style],
+      style: [styles13.pressable, disabled && styles13.disabled, style],
       children: [
         /* @__PURE__ */ jsx(
           Animated.View,
           {
             style: [
-              styles9.track,
+              styles13.track,
               {
                 backgroundColor: trackBackgroundColor
               }
@@ -2966,7 +3444,7 @@ var Toggle = forwardRef(function Toggle2({
               Animated.View,
               {
                 style: [
-                  styles9.thumb,
+                  styles13.thumb,
                   {
                     transform: [{ translateX: thumbTranslateX }]
                   }
@@ -2975,12 +3453,12 @@ var Toggle = forwardRef(function Toggle2({
             )
           }
         ),
-        labelContent != null && labelContent !== false ? typeof labelContent === "string" || typeof labelContent === "number" ? /* @__PURE__ */ jsx(Text, { style: [styles9.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 styles9 = StyleSheet.create({
+var styles13 = StyleSheet.create({
   pressable: {
     flexDirection: "row",
     alignItems: "center",
@@ -3009,6 +3487,6 @@ var styles9 = StyleSheet.create({
   }
 });
 
-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 };
+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