@ecohouse/ui 0.1.5 → 0.1.6

package/dist/index.cjs

@@ -36,9 +36,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",
@@ -80,6 +86,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,
@@ -527,6 +561,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__ */ jsxRuntime.jsx(Svg__default.default, { width: size, height: size, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+    Svg.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 }) {
@@ -557,6 +606,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__ */ jsxRuntime.jsx(Svg__default.default, { width: size, height: size, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+    Svg.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";
@@ -632,6 +696,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__ */ jsxRuntime.jsx(Svg__default.default, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+    Svg.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 }) {
@@ -647,6 +726,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__ */ jsxRuntime.jsx(Svg__default.default, { width: size, height: size, viewBox: "0 0 28 28", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(Svg.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",
@@ -690,12 +775,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);
@@ -711,12 +800,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) {
@@ -1093,7 +1184,394 @@ var styles2 = reactNative.StyleSheet.create({
     })
   }
 });
+var ICON_SIZE2 = 20;
+var webBlurStyle = reactNative.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 = react.forwardRef(function Badge2({ label, variant = "default", icon: Icon2, style, className, accessibilityLabel, ...rest }, forwardedRef) {
+  const containerRef = react.useRef(null);
+  const preset = variantConfig[variant];
+  const resolvedClassName = className?.trim() || void 0;
+  const setContainerRef = react.useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
+  useApplyWebClassName(containerRef, resolvedClassName);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.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__ */ jsxRuntime.jsx(reactNative.View, { style: styles3.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(Icon2, { size: ICON_SIZE2, color: preset.iconColor }) }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles3.label, reactNative.Platform.OS === "android" ? styles3.labelAndroid : null], children: label })
+      ]
+    }
+  );
+});
+var styles3 = reactNative.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 = reactNative.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 = react.forwardRef(function Counter2({
+  value,
+  defaultValue,
+  onValueChange,
+  min = 1,
+  max,
+  step = 1,
+  disabled = false,
+  style,
+  className,
+  hitSlop,
+  ...rest
+}, forwardedRef) {
+  const containerRef = react.useRef(null);
+  const isControlled = value !== void 0;
+  const [uncontrolledValue, setUncontrolledValue] = react.useState(
+    () => clamp(defaultValue ?? min, min, max)
+  );
+  const resolvedValue = clamp(isControlled ? value : uncontrolledValue, min, max);
+  const resolvedClassName = className?.trim() || void 0;
+  const setContainerRef = react.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__ */ jsxRuntime.jsxs(reactNative.View, { ...rest, ref: setContainerRef, style: [styles4.base, style], children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.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__ */ jsxRuntime.jsx(MinusIcon, {})
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles4.value, children: resolvedValue }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.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__ */ jsxRuntime.jsx(PlusIcon, {})
+      }
+    )
+  ] });
+});
+var styles4 = reactNative.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 = react.forwardRef(
+  function SegmentedToggle2({
+    options,
+    value,
+    defaultValue = options[0].value,
+    onValueChange,
+    fullWidth = true,
+    disabled = false,
+    style,
+    className,
+    hitSlop,
+    onLayout,
+    ...rest
+  }, forwardedRef) {
+    const containerRef = react.useRef(null);
+    const isControlled = value !== void 0;
+    const [uncontrolledValue, setUncontrolledValue] = react.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 = react.useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
+    const progress = react.useRef(new reactNative.Animated.Value(selectedIndex)).current;
+    const [contentWidths, setContentWidths] = react.useState([0, 0]);
+    const [containerWidth, setContainerWidth] = react.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);
+    react.useEffect(() => {
+      const animation = reactNative.Animated.timing(progress, {
+        toValue: selectedIndex,
+        duration: ANIMATION_DURATION,
+        easing: reactNative.Easing.out(reactNative.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__ */ jsxRuntime.jsxs(
+      reactNative.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__ */ jsxRuntime.jsx(
+            reactNative.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__ */ jsxRuntime.jsx(
+              reactNative.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__ */ jsxRuntime.jsxs(
+                  reactNative.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__ */ jsxRuntime.jsx(Icon2, { size: ICON_SIZE3, color: iconColor }) : null,
+                      /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { numberOfLines: 1, style: [styles5.label, { color: labelColor }], children: label })
+                    ]
+                  }
+                )
+              },
+              optionValue
+            );
+          })
+        ]
+      }
+    );
+  }
+);
+var styles5 = reactNative.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 = react.forwardRef(function StatCard2({ label, icon: Icon2, style, className, accessibilityLabel, ...rest }, forwardedRef) {
+  const containerRef = react.useRef(null);
+  const resolvedClassName = className?.trim() || void 0;
+  const setContainerRef = react.useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
+  useApplyWebClassName(containerRef, resolvedClassName);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.View,
+    {
+      ...rest,
+      ref: setContainerRef,
+      style: [styles6.base, style],
+      accessibilityRole: "text",
+      accessibilityLabel: accessibilityLabel ?? label,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Icon2, { size: ICON_SIZE4, color: colors.white }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles6.label, children: label })
+      ]
+    }
+  );
+});
+var styles6 = reactNative.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,
@@ -1152,7 +1630,7 @@ var Button = react.forwardRef(
   }, forwardedRef) {
     const containerRef = react.useRef(null);
     const textRef = react.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";
@@ -1165,7 +1643,7 @@ var Button = react.forwardRef(
     useApplyWebClassName(textRef, textClassName);
     const iconNode = customIcon ?? /* @__PURE__ */ jsxRuntime.jsx(ArrowRightIcon, { size: metrics.iconSize, color: preset.iconColor });
     const containerStyle = [
-      styles3.base,
+      styles7.base,
       {
         minHeight: metrics.minHeight,
         borderRadius: metrics.borderRadius,
@@ -1176,15 +1654,15 @@ var Button = react.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 },
-      reactNative.Platform.OS === "android" ? styles3.labelAndroid : null,
-      !hasIcon && styles3.labelCentered,
+      reactNative.Platform.OS === "android" ? styles7.labelAndroid : null,
+      !hasIcon && styles7.labelCentered,
       textStyle
     ];
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1205,7 +1683,7 @@ var Button = react.forwardRef(
             reactNative.View,
             {
               style: [
-                styles3.iconContainer,
+                styles7.iconContainer,
                 {
                   width: metrics.iconContainerSize,
                   height: metrics.iconContainerSize,
@@ -1221,7 +1699,7 @@ var Button = react.forwardRef(
     );
   }
 );
-var styles3 = reactNative.StyleSheet.create({
+var styles7 = reactNative.StyleSheet.create({
   base: {
     flexDirection: "row",
     alignItems: "center",
@@ -1299,13 +1777,13 @@ var Checkbox = react.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__ */ jsxRuntime.jsx(
           reactNative.View,
           {
             style: [
-              styles4.box,
+              styles8.box,
               {
                 backgroundColor: chrome.backgroundColor,
                 borderColor: chrome.borderColor
@@ -1314,12 +1792,12 @@ var Checkbox = react.forwardRef(function Checkbox2({
             children: isActive ? /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { size: CHECK_SIZE, color: colors.primary, strokeWidth: CHECK_STROKE }) : null
           }
         ),
-        labelContent != null && labelContent !== false ? typeof labelContent === "string" || typeof labelContent === "number" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles4.label, labelStyle], children: labelContent }) : labelContent : null
+        labelContent != null && labelContent !== false ? typeof labelContent === "string" || typeof labelContent === "number" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles8.label, labelStyle], children: labelContent }) : labelContent : null
       ]
     }
   );
 });
-var styles4 = reactNative.StyleSheet.create({
+var styles8 = reactNative.StyleSheet.create({
   root: {
     flexDirection: "row",
     alignItems: "center",
@@ -1417,7 +1895,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;
@@ -1569,9 +2047,9 @@ var DatePicker = react.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__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles5.triggerWrap, isOpen && styles5.triggerWrapOpen], children: [
+        children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles9.triggerWrap, isOpen && styles9.triggerWrapOpen], children: [
           /* @__PURE__ */ jsxRuntime.jsxs(
             reactNative.Pressable,
             {
@@ -1582,17 +2060,17 @@ var DatePicker = react.forwardRef(
               accessibilityLabel: resolvedAccessibilityLabel,
               accessibilityState: { disabled, expanded: isOpen },
               style: [
-                styles5.trigger,
+                styles9.trigger,
                 { borderColor: triggerBorderColor, backgroundColor: colors.grey700 }
               ],
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles5.triggerText, { color: triggerTextColor }], numberOfLines: 1, children: triggerLabel }),
-                /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles5.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(CalendarOutlineIcon, { size: ICON_SIZE2, color: colors.grey100 }) })
+                /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles9.triggerText, { color: triggerTextColor }], numberOfLines: 1, children: triggerLabel }),
+                /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles9.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(CalendarOutlineIcon, { size: ICON_SIZE5, color: colors.grey100 }) })
               ]
             }
           ),
-          isOpen ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles5.menu, children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles5.calendarHeader, children: [
+          isOpen ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles9.menu, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles9.calendarHeader, children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 reactNative.Pressable,
                 {
@@ -1600,11 +2078,11 @@ var DatePicker = react.forwardRef(
                   hitSlop: 8,
                   accessibilityRole: "button",
                   accessibilityLabel: "Previous month",
-                  style: styles5.navButton,
+                  style: styles9.navButton,
                   children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon, { size: NAV_ICON_SIZE, color: colors.white })
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsxs(reactNative.Text, { style: styles5.monthHeading, children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(reactNative.Text, { style: styles9.monthHeading, children: [
                 monthNames[visibleMonth.getMonth()],
                 " ",
                 visibleMonth.getFullYear()
@@ -1616,13 +2094,13 @@ var DatePicker = react.forwardRef(
                   hitSlop: 8,
                   accessibilityRole: "button",
                   accessibilityLabel: "Next month",
-                  style: styles5.navButton,
-                  children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles5.navIconMirror, children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon, { size: NAV_ICON_SIZE, color: colors.white }) })
+                  style: styles9.navButton,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles9.navIconMirror, children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon, { size: NAV_ICON_SIZE, color: colors.white }) })
                 }
               )
             ] }),
             /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles5.weekdayRow, children: weekdayLabels.map((weekdayLabel, index) => /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles5.dayCellWrap, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles5.weekdayText, children: weekdayLabel }) }, `${weekdayLabel}-${index}`)) }),
+              /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles9.weekdayRow, children: weekdayLabels.map((weekdayLabel, index) => /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles9.dayCellWrap, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles9.weekdayText, children: weekdayLabel }) }, `${weekdayLabel}-${index}`)) }),
               weeks.map((week, weekIndex) => {
                 let rangeHighlightStyle = null;
                 if (isRange && rangeValue.start && rangeValue.end) {
@@ -1659,13 +2137,13 @@ var DatePicker = react.forwardRef(
                 return /* @__PURE__ */ jsxRuntime.jsxs(
                   reactNative.View,
                   {
-                    style: [styles5.weekRow, weekIndex > 0 && styles5.weekRowSpaced],
+                    style: [styles9.weekRow, weekIndex > 0 && styles9.weekRowSpaced],
                     children: [
                       rangeHighlightStyle ? /* @__PURE__ */ jsxRuntime.jsx(
                         reactNative.View,
                         {
                           pointerEvents: "none",
-                          style: [styles5.rangeHighlight, rangeHighlightStyle]
+                          style: [styles9.rangeHighlight, rangeHighlightStyle]
                         }
                       ) : null,
                       week.map((day, dayIndex) => {
@@ -1688,7 +2166,7 @@ var DatePicker = react.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: {
@@ -1700,14 +2178,14 @@ var DatePicker = react.forwardRef(
                                 reactNative.View,
                                 {
                                   style: [
-                                    styles5.dayCircle,
-                                    isSelectedEndpoint && styles5.dayCircleSelected,
-                                    isHovered && styles5.dayCircleHovered
+                                    styles9.dayCircle,
+                                    isSelectedEndpoint && styles9.dayCircleSelected,
+                                    isHovered && styles9.dayCircleHovered
                                   ],
-                                  children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles5.dayText, { color: dayTextColor }], children: day.getDate() })
+                                  children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles9.dayText, { color: dayTextColor }], children: day.getDate() })
                                 }
                               ),
-                              isToday && !isSelectedEndpoint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles5.todayDot }) : null
+                              isToday && !isSelectedEndpoint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles9.todayDot }) : null
                             ]
                           },
                           dayIndex
@@ -1725,7 +2203,7 @@ var DatePicker = react.forwardRef(
     );
   }
 );
-var styles5 = reactNative.StyleSheet.create({
+var styles9 = reactNative.StyleSheet.create({
   root: {
     width: DEFAULT_WIDTH,
     gap: 8,
@@ -1761,8 +2239,8 @@ var styles5 = reactNative.StyleSheet.create({
     minWidth: 0
   },
   iconSlot: {
-    width: ICON_SIZE2,
-    height: ICON_SIZE2,
+    width: ICON_SIZE5,
+    height: ICON_SIZE5,
     alignItems: "center",
     justifyContent: "center",
     flexShrink: 0
@@ -1985,13 +2463,13 @@ var Input = react.forwardRef(function Input2({
   const rightIconNode = rightIcon ?? /* @__PURE__ */ jsxRuntime.jsx(ShowIcon, { size: metrics.iconSize, color: chrome.rightIconColor });
   useApplyWebClassName(rootRef, className);
   useApplyWebClassName(inputRef, inputClassName);
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ref: rootRef, style: [styles6.root, disabled && styles6.disabled, style], children: [
-    showLabel && label ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles6.label, { color: chrome.labelColor }], children: label }) : null,
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ref: rootRef, style: [styles10.root, disabled && styles10.disabled, style], children: [
+    showLabel && label ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles10.label, { color: chrome.labelColor }], children: label }) : null,
     /* @__PURE__ */ jsxRuntime.jsxs(
       reactNative.View,
       {
         style: [
-          styles6.field,
+          styles10.field,
           {
             height: metrics.height,
             borderRadius: metrics.borderRadius,
@@ -2006,7 +2484,7 @@ var Input = react.forwardRef(function Input2({
           fieldStyle
         ],
         children: [
-          hasLeftIcon ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles6.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }], children: leftIconNode }) : null,
+          hasLeftIcon ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles10.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }], children: leftIconNode }) : null,
           /* @__PURE__ */ jsxRuntime.jsx(
             reactNative.TextInput,
             {
@@ -2030,11 +2508,11 @@ var Input = react.forwardRef(function Input2({
                 onBlur?.(event);
               },
               style: [
-                styles6.input,
+                styles10.input,
                 metrics.text,
                 { color: chrome.textColor },
-                reactNative.Platform.OS === "web" ? styles6.inputWeb : null,
-                reactNative.Platform.OS === "android" ? styles6.inputAndroid : null,
+                reactNative.Platform.OS === "web" ? styles10.inputWeb : null,
+                reactNative.Platform.OS === "android" ? styles10.inputAndroid : null,
                 inputStyle
               ],
               accessibilityLabel: resolvedAccessibilityLabel,
@@ -2046,20 +2524,20 @@ var Input = react.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__ */ jsxRuntime.jsx(reactNative.View, { style: [styles6.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }], children: rightIconNode }) : null
+          ) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles10.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }], children: rightIconNode }) : null
         ]
       }
     ),
-    showHint && hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles6.hint, { color: chrome.hintColor }], children: hint }) : null
+    showHint && hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles10.hint, { color: chrome.hintColor }], children: hint }) : null
   ] });
 });
-var styles6 = reactNative.StyleSheet.create({
+var styles10 = reactNative.StyleSheet.create({
   root: {
     width: DEFAULT_WIDTH2,
     gap: 8,
@@ -2102,7 +2580,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) {
@@ -2175,25 +2653,25 @@ function MultiValueChips({ options, disabled, onRemove }) {
     const next = Math.ceil(event.nativeEvent.layout.width);
     setEllipsisWidth((current) => current === next ? current : next);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles7.multiValueRoot, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { pointerEvents: "none", style: styles7.measureRow, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles11.multiValueRoot, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { pointerEvents: "none", style: styles11.measureRow, children: [
       options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
         reactNative.View,
         {
-          style: styles7.chip,
+          style: styles11.chip,
           onLayout: (event) => handleChipLayout(option.value, event),
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles7.chipLabel, numberOfLines: 1, children: option.label }),
-            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles7.chipRemove, children: "\xD7" })
+            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles11.chipLabel, numberOfLines: 1, children: option.label }),
+            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles11.chipRemove, children: "\xD7" })
           ]
         },
         `measure-${option.value}`
       )),
-      /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles7.ellipsis, onLayout: handleEllipsisLayout, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles7.ellipsisText, children: "..." }) })
+      /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles11.ellipsis, onLayout: handleEllipsisLayout, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles11.ellipsisText, children: "..." }) })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles7.chipsRow, onLayout: handleContainerLayout, children: [
-      visible.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles7.chip, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles7.chipLabel, numberOfLines: 1, children: option.label }),
+    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles11.chipsRow, onLayout: handleContainerLayout, children: [
+      visible.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles11.chip, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles11.chipLabel, numberOfLines: 1, children: option.label }),
         /* @__PURE__ */ jsxRuntime.jsx(
           reactNative.Pressable,
           {
@@ -2205,11 +2683,11 @@ function MultiValueChips({ options, disabled, onRemove }) {
             hitSlop: 6,
             accessibilityRole: "button",
             accessibilityLabel: `Remove ${option.label}`,
-            children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles7.chipRemove, children: "\xD7" })
+            children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles11.chipRemove, children: "\xD7" })
           }
         )
       ] }, option.value)),
-      hasOverflow ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles7.ellipsis, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles7.ellipsisText, children: "..." }) }) : null
+      hasOverflow ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles11.ellipsis, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles11.ellipsisText, children: "..." }) }) : null
     ] })
   ] });
 }
@@ -2420,7 +2898,7 @@ var Select = react.forwardRef(
     const leftIconNode = leftIcon ?? /* @__PURE__ */ jsxRuntime.jsx(
       UserIcon,
       {
-        size: ICON_SIZE3,
+        size: ICON_SIZE6,
         color: error ? colors.red : isOpen ? colors.primary : colors.grey100
       }
     );
@@ -2436,11 +2914,11 @@ var Select = react.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__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles7.label, { color: labelColor }], children: label }) : null,
-          /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles7.triggerWrap, isOpen && styles7.triggerWrapOpen], children: [
+          showLabel && label ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles11.label, { color: labelColor }], children: label }) : null,
+          /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles11.triggerWrap, isOpen && styles11.triggerWrapOpen], children: [
             /* @__PURE__ */ jsxRuntime.jsxs(
               reactNative.Pressable,
               {
@@ -2451,29 +2929,29 @@ var Select = react.forwardRef(
                 accessibilityLabel: resolvedAccessibilityLabel,
                 accessibilityState: { disabled, expanded: isOpen },
                 style: [
-                  styles7.trigger,
+                  styles11.trigger,
                   {
                     borderColor: triggerBorderColor,
                     backgroundColor: colors.grey700
                   }
                 ],
                 children: [
-                  hasLeftIcon ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles7.iconSlot, children: leftIconNode }) : null,
-                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles7.triggerContent, children: multiple && hasValue ? /* @__PURE__ */ jsxRuntime.jsx(
+                  hasLeftIcon ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles11.iconSlot, children: leftIconNode }) : null,
+                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles11.triggerContent, children: multiple && hasValue ? /* @__PURE__ */ jsxRuntime.jsx(
                     MultiValueChips,
                     {
                       options: selectedOptions,
                       disabled,
                       onRemove: handleRemoveChip
                     }
-                  ) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles7.triggerText, { color: triggerTextColor }], numberOfLines: 1, children: multiple ? placeholder : singleLabel }) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles7.iconSlot, isOpen && styles7.chevronOpen], children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, { size: ICON_SIZE3, color: isOpen ? colors.primary : colors.grey100 }) })
+                  ) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles11.triggerText, { color: triggerTextColor }], numberOfLines: 1, children: multiple ? placeholder : singleLabel }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles11.iconSlot, isOpen && styles11.chevronOpen], children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, { size: ICON_SIZE6, color: isOpen ? colors.primary : colors.grey100 }) })
                 ]
               }
             ),
-            isOpen ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles7.menu, children: [
-              showSearch ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles7.searchField, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles7.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, { size: ICON_SIZE3, color: colors.grey100 }) }),
+            isOpen ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles11.menu, children: [
+              showSearch ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles11.searchField, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles11.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, { size: ICON_SIZE6, color: colors.grey100 }) }),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   reactNative.TextInput,
                   {
@@ -2484,9 +2962,9 @@ var Select = react.forwardRef(
                     placeholder: searchPlaceholder,
                     placeholderTextColor: colors.grey100,
                     style: [
-                      styles7.searchInput,
-                      reactNative.Platform.OS === "web" ? styles7.searchInputWeb : null,
-                      reactNative.Platform.OS === "android" ? styles7.searchInputAndroid : null
+                      styles11.searchInput,
+                      reactNative.Platform.OS === "web" ? styles11.searchInputWeb : null,
+                      reactNative.Platform.OS === "android" ? styles11.searchInputAndroid : null
                     ],
                     accessibilityLabel: searchPlaceholder
                   }
@@ -2495,12 +2973,12 @@ var Select = react.forwardRef(
               /* @__PURE__ */ jsxRuntime.jsxs(
                 reactNative.ScrollView,
                 {
-                  style: styles7.optionList,
-                  contentContainerStyle: styles7.optionListContent,
+                  style: styles11.optionList,
+                  contentContainerStyle: styles11.optionListContent,
                   keyboardShouldPersistTaps: "handled",
                   showsVerticalScrollIndicator: false,
                   children: [
-                    loading ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles7.statusRow, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles7.statusText, children: "Loading..." }) }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles7.statusRow, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles7.statusText, children: emptyText }) }) : null,
+                    loading ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles11.statusRow, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles11.statusText, children: "Loading..." }) }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles11.statusRow, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles11.statusText, children: emptyText }) }) : null,
                     !loading && filteredOptions.map((option) => {
                       const isSelected = selectedValues.includes(option.value);
                       const isHovered = hoveredValue === option.value;
@@ -2517,14 +2995,14 @@ var Select = react.forwardRef(
                           accessibilityRole: multiple ? "checkbox" : "button",
                           accessibilityState: { selected: isSelected, checked: isSelected, disabled },
                           style: [
-                            styles7.item,
+                            styles11.item,
                             {
                               backgroundColor: itemBackground(visualState)
                             }
                           ],
                           children: [
-                            multiple ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { pointerEvents: "none", style: styles7.itemCheckbox, children: /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { value: isSelected, variant: "light" }) }) : null,
-                            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles7.itemLabel, numberOfLines: 1, children: option.label })
+                            multiple ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { pointerEvents: "none", style: styles11.itemCheckbox, children: /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { value: isSelected, variant: "light" }) }) : null,
+                            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles11.itemLabel, numberOfLines: 1, children: option.label })
                           ]
                         },
                         option.value
@@ -2535,13 +3013,13 @@ var Select = react.forwardRef(
               )
             ] }) : null
           ] }),
-          showHint && hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles7.hint, { color: hintColor }], children: hint }) : null
+          showHint && hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles11.hint, { color: hintColor }], children: hint }) : null
         ]
       }
     );
   }
 );
-var styles7 = reactNative.StyleSheet.create({
+var styles11 = reactNative.StyleSheet.create({
   root: {
     width: DEFAULT_WIDTH3,
     gap: 8,
@@ -2631,8 +3109,8 @@ var styles7 = reactNative.StyleSheet.create({
     lineHeight: 16
   },
   iconSlot: {
-    width: ICON_SIZE3,
-    height: ICON_SIZE3,
+    width: ICON_SIZE6,
+    height: ICON_SIZE6,
     alignItems: "center",
     justifyContent: "center",
     flexShrink: 0
@@ -2803,13 +3281,13 @@ var Textarea = react.forwardRef(function Textarea2({
   const resolvedAccessibilityLabel = accessibilityLabel ?? (showLabel ? void 0 : label);
   useApplyWebClassName(rootRef, className);
   useApplyWebClassName(inputRef, inputClassName);
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ref: rootRef, style: [styles8.root, disabled && styles8.disabled, style], children: [
-    showLabel && label ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles8.label, { color: chrome.labelColor }], children: label }) : null,
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ref: rootRef, style: [styles12.root, disabled && styles12.disabled, style], children: [
+    showLabel && label ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles12.label, { color: chrome.labelColor }], children: label }) : null,
     /* @__PURE__ */ jsxRuntime.jsx(
       reactNative.View,
       {
         style: [
-          styles8.field,
+          styles12.field,
           {
             borderColor: chrome.borderColor,
             backgroundColor: chrome.backgroundColor
@@ -2841,11 +3319,11 @@ var Textarea = react.forwardRef(function Textarea2({
               onBlur?.(event);
             },
             style: [
-              styles8.input,
+              styles12.input,
               textareaTypography.field,
               { color: chrome.textColor },
-              reactNative.Platform.OS === "web" ? styles8.inputWeb : null,
-              reactNative.Platform.OS === "android" ? styles8.inputAndroid : null,
+              reactNative.Platform.OS === "web" ? styles12.inputWeb : null,
+              reactNative.Platform.OS === "android" ? styles12.inputAndroid : null,
               inputStyle
             ],
             accessibilityLabel: resolvedAccessibilityLabel,
@@ -2854,10 +3332,10 @@ var Textarea = react.forwardRef(function Textarea2({
         )
       }
     ),
-    showHint && hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles8.hint, { color: chrome.hintColor }], children: hint }) : null
+    showHint && hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles12.hint, { color: chrome.hintColor }], children: hint }) : null
   ] });
 });
-var styles8 = reactNative.StyleSheet.create({
+var styles12 = reactNative.StyleSheet.create({
   root: {
     width: DEFAULT_WIDTH4,
     gap: 8,
@@ -2900,7 +3378,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 = react.forwardRef(function Toggle2({
   value,
   defaultValue = false,
@@ -2927,7 +3405,7 @@ var Toggle = react.forwardRef(function Toggle2({
   react.useEffect(() => {
     reactNative.Animated.timing(progress, {
       toValue: isActive ? 1 : 0,
-      duration: ANIMATION_DURATION,
+      duration: ANIMATION_DURATION2,
       easing: reactNative.Easing.out(reactNative.Easing.ease),
       useNativeDriver: false
     }).start();
@@ -2957,13 +3435,13 @@ var Toggle = react.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__ */ jsxRuntime.jsx(
           reactNative.Animated.View,
           {
             style: [
-              styles9.track,
+              styles13.track,
               {
                 backgroundColor: trackBackgroundColor
               }
@@ -2972,7 +3450,7 @@ var Toggle = react.forwardRef(function Toggle2({
               reactNative.Animated.View,
               {
                 style: [
-                  styles9.thumb,
+                  styles13.thumb,
                   {
                     transform: [{ translateX: thumbTranslateX }]
                   }
@@ -2981,12 +3459,12 @@ var Toggle = react.forwardRef(function Toggle2({
             )
           }
         ),
-        labelContent != null && labelContent !== false ? typeof labelContent === "string" || typeof labelContent === "number" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles9.label, labelStyle], children: labelContent }) : labelContent : null
+        labelContent != null && labelContent !== false ? typeof labelContent === "string" || typeof labelContent === "number" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles13.label, labelStyle], children: labelContent }) : labelContent : null
       ]
     }
   );
 });
-var styles9 = reactNative.StyleSheet.create({
+var styles13 = reactNative.StyleSheet.create({
   pressable: {
     flexDirection: "row",
     alignItems: "center",
@@ -3017,6 +3495,7 @@ var styles9 = reactNative.StyleSheet.create({
 
 exports.ArrowRightIcon = ArrowRightIcon;
 exports.Avatar = Avatar;
+exports.Badge = Badge;
 exports.BagIcon = BagIcon;
 exports.BellIcon = BellIcon;
 exports.BuildingIcon = BuildingIcon;
@@ -3030,6 +3509,7 @@ exports.Checkbox = Checkbox;
 exports.ChevronDownIcon = ChevronDownIcon;
 exports.ChevronLeftIcon = ChevronLeftIcon;
 exports.ClockIcon = ClockIcon;
+exports.Counter = Counter;
 exports.DatePicker = DatePicker;
 exports.FacebookIcon = FacebookIcon;
 exports.HeartIcon = HeartIcon;
@@ -3044,19 +3524,27 @@ exports.LinkedInIcon = LinkedInIcon;
 exports.LogOutIcon = LogOutIcon;
 exports.MailIcon = MailIcon;
 exports.MenuItem = MenuItem;
+exports.MinusIcon = MinusIcon;
 exports.NavigateIcon = NavigateIcon;
 exports.PhoneIcon = PhoneIcon;
+exports.PlusIcon = PlusIcon;
 exports.SearchIcon = SearchIcon;
+exports.SegmentedToggle = SegmentedToggle;
 exports.Select = Select;
 exports.SettingsIcon = SettingsIcon;
 exports.ShowIcon = ShowIcon;
+exports.SidebarIcon = SidebarIcon;
+exports.StatCard = StatCard;
 exports.Textarea = Textarea;
 exports.Toggle = Toggle;
 exports.UserIcon = UserIcon;
+exports.UsersAltIcon = UsersAltIcon;
 exports.VideoIcon = VideoIcon;
 exports.avatarTypography = avatarTypography;
+exports.badgeTypography = badgeTypography;
 exports.buttonTypography = buttonTypography;
 exports.colors = colors;
+exports.counterTypography = counterTypography;
 exports.datePickerTypography = datePickerTypography;
 exports.fonts = fonts;
 exports.getIconsByGroup = getIconsByGroup;
@@ -3066,7 +3554,9 @@ exports.iconGroups = iconGroups;
 exports.iconNames = iconNames;
 exports.icons = icons;
 exports.inputTypography = inputTypography;
+exports.segmentedToggleTypography = segmentedToggleTypography;
 exports.selectTypography = selectTypography;
+exports.statCardTypography = statCardTypography;
 exports.textareaTypography = textareaTypography;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map