@ecohouse/ui 0.1.1 → 0.1.3

package/dist/index.js

@@ -1,5 +1,5 @@
-import { useRef, useState, useLayoutEffect } from 'react';
-import { StyleSheet, Platform, TouchableOpacity, Text, View, TextInput } from 'react-native';
+import { forwardRef, useRef, useMemo, useState, useCallback, useEffect, useLayoutEffect } from 'react';
+import { Platform, TouchableOpacity, Text, View, StyleSheet, Pressable, TextInput, ScrollView, Animated, Easing } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
@@ -77,9 +77,32 @@ var inputTypography = {
     fontFamily: fonts.sans,
     fontSize: 12,
     fontWeight: "500",
-    lineHeight: 16,
+    lineHeight: 12,
+    letterSpacing: 0.36
+  },
+  field: {
+    fontFamily: fonts.sans,
+    fontSize: 14,
+    fontWeight: "400",
+    lineHeight: 19,
     letterSpacing: 0
   },
+  hint: {
+    fontFamily: fonts.sans,
+    fontSize: 12,
+    fontWeight: "400",
+    lineHeight: 12,
+    letterSpacing: 0.36
+  }
+};
+var selectTypography = {
+  label: {
+    fontFamily: fonts.sans,
+    fontSize: 12,
+    fontWeight: "500",
+    lineHeight: 12,
+    letterSpacing: 0.36
+  },
   field: {
     fontFamily: fonts.sans,
     fontSize: 14,
@@ -91,8 +114,31 @@ var inputTypography = {
     fontFamily: fonts.sans,
     fontSize: 12,
     fontWeight: "400",
-    lineHeight: 16,
+    lineHeight: 12,
+    letterSpacing: 0.36
+  }
+};
+var textareaTypography = {
+  label: {
+    fontFamily: fonts.sans,
+    fontSize: 12,
+    fontWeight: "500",
+    lineHeight: 12,
+    letterSpacing: 0.36
+  },
+  field: {
+    fontFamily: fonts.sans,
+    fontSize: 14,
+    fontWeight: "400",
+    lineHeight: 19,
     letterSpacing: 0
+  },
+  hint: {
+    fontFamily: fonts.sans,
+    fontSize: 12,
+    fontWeight: "400",
+    lineHeight: 12,
+    letterSpacing: 0.36
   }
 };
 function ArrowRightIcon({
@@ -172,6 +218,21 @@ function CameraIcon({ size = 24, color = colors.primary, strokeWidth = 2 }) {
   ) });
 }
 
+// src/icons/Check/checkPath.ts
+var CHECK_PATH = "M4.16669 10.8333L7.50002 14.1667L15.8334 5.83334";
+function CheckIcon({ 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: CHECK_PATH,
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+
 // src/icons/CheckBadge/checkBadgePath.ts
 var CHECK_BADGE_PATH = "M12.5 8.33317L9.16663 11.6665L7.49996 9.99984M11.0384 2.88233L12.0558 3.74941C12.3122 3.96786 12.6305 4.09992 12.9662 4.12671L14.2987 4.23291C15.0822 4.29543 15.7045 4.91733 15.767 5.70077L15.8729 7.03353C15.8997 7.36925 16.0322 7.68799 16.2507 7.94433L17.1174 8.96152C17.6272 9.5597 17.6272 10.4396 17.1175 11.0378L16.2508 12.0551C16.0323 12.3115 15.9 12.6303 15.8732 12.9661L15.7666 14.2986C15.704 15.082 15.0827 15.7043 14.2993 15.7668L12.9663 15.8732C12.6305 15.9 12.312 16.0317 12.0556 16.2502L11.0384 17.1173C10.4402 17.627 9.55973 17.6271 8.96155 17.1174L7.9443 16.2502C7.68796 16.0318 7.36938 15.8998 7.03365 15.8731L5.70064 15.7668C4.9172 15.7043 4.29588 15.0822 4.23336 14.2987L4.12675 12.9661C4.09996 12.6304 3.96759 12.3118 3.74915 12.0555L2.88245 11.0378C2.37268 10.4397 2.37244 9.56002 2.88221 8.96184L3.74969 7.94418C3.96814 7.68784 4.09923 7.36926 4.12602 7.03353L4.23263 5.70093C4.29515 4.91749 4.91826 4.29535 5.70171 4.23283L7.03324 4.12663C7.36897 4.09984 7.68771 3.96788 7.94404 3.74943L8.96164 2.88233C9.55982 2.37256 10.4402 2.37256 11.0384 2.88233Z";
 function CheckBadgeIcon({ size = 20, color = colors.primary, strokeWidth = 2 }) {
@@ -187,6 +248,25 @@ function CheckBadgeIcon({ size = 20, color = colors.primary, strokeWidth = 2 })
   ) });
 }
 
+// src/icons/ChevronDown/chevronDownPath.ts
+var CHEVRON_DOWN_PATH = "M5 7.5L10 12.5L15 7.5";
+function ChevronDownIcon({
+  size = 20,
+  color = colors.primary,
+  strokeWidth = 2
+}) {
+  return /* @__PURE__ */ jsx(Svg, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx(
+    Path,
+    {
+      d: CHEVRON_DOWN_PATH,
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+
 // src/icons/Clock/clockPath.ts
 var CLOCK_PATH = "M12 7V12H17M12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21Z";
 function ClockIcon({ size = 24, color = colors.primary, strokeWidth = 2 }) {
@@ -295,6 +375,38 @@ function PhoneIcon({ size = 20, color = colors.primary, strokeWidth = 2 }) {
   ) });
 }
 
+// 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";
+function SearchIcon({
+  size = 20,
+  color = colors.primary,
+  strokeWidth = 2
+}) {
+  return /* @__PURE__ */ jsxs(Svg, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: [
+    /* @__PURE__ */ jsx(
+      Path,
+      {
+        d: SEARCH_CIRCLE_PATH,
+        stroke: color,
+        strokeWidth,
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Path,
+      {
+        d: SEARCH_HANDLE_PATH,
+        stroke: color,
+        strokeWidth,
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  ] });
+}
+
 // src/icons/Show/showPath.ts
 var SHOW_PATH = "M1.66669 10C1.66669 10 4.16669 4.16667 10 4.16667C15.8334 4.16667 18.3334 10 18.3334 10C18.3334 10 15.8334 15.8333 10 15.8333C4.16669 15.8333 1.66669 10 1.66669 10Z";
 var SHOW_PUPIL_PATH = "M10 12.5C11.3807 12.5 12.5 11.3807 12.5 10C12.5 8.61929 11.3807 7.5 10 7.5C8.61929 7.5 7.5 8.61929 7.5 10C7.5 11.3807 8.61929 12.5 10 12.5Z";
@@ -345,7 +457,9 @@ var icons = {
   bell: BellIcon,
   building: BuildingIcon,
   camera: CameraIcon,
+  check: CheckIcon,
   checkBadge: CheckBadgeIcon,
+  chevronDown: ChevronDownIcon,
   clock: ClockIcon,
   facebook: FacebookIcon,
   home: HomeIcon,
@@ -355,13 +469,14 @@ var icons = {
   mail: MailIcon,
   navigate: NavigateIcon,
   phone: PhoneIcon,
+  search: SearchIcon,
   show: ShowIcon,
   user: UserIcon
 };
 var iconNames = Object.keys(icons);
 var iconGroups = {
-  navigation: ["arrowRight", "home", "navigate"],
-  actions: ["show", "bell", "camera", "key", "checkBadge"],
+  navigation: ["arrowRight", "chevronDown", "home", "navigate"],
+  actions: ["show", "bell", "camera", "key", "check", "checkBadge", "search"],
   objects: ["bag", "building", "clock", "user"],
   communication: ["mail", "phone"],
   social: ["facebook", "instagram", "linkedin"]
@@ -374,6 +489,18 @@ function Icon({ name, ...props }) {
   const Component = icons[name];
   return /* @__PURE__ */ jsx(Component, { ...props });
 }
+
+// src/utils/mergeRefs.ts
+function mergeRefs(internalRef, forwardedRef) {
+  return (node) => {
+    internalRef.current = node;
+    if (typeof forwardedRef === "function") {
+      forwardedRef(node);
+    } else if (forwardedRef) {
+      forwardedRef.current = node;
+    }
+  };
+}
 function hasClassList(node) {
   return typeof node === "object" && node !== null && "classList" in node && typeof node.classList?.add === "function";
 }
@@ -454,107 +581,214 @@ var sizeConfig = {
     iconSize: 12
   }
 };
-function Button({
-  title,
-  children,
-  onPress,
+var Button = forwardRef(
+  function Button2({
+    title,
+    children,
+    onPress,
+    disabled = false,
+    variant = "primary",
+    size = "lg",
+    showIcon = false,
+    icon,
+    style,
+    textStyle,
+    className,
+    textClassName,
+    accessibilityLabel,
+    ...rest
+  }, forwardedRef) {
+    const containerRef = useRef(null);
+    const textRef = useRef(null);
+    const preset = variantConfig[variant];
+    const metrics = sizeConfig[size];
+    const label = typeof children !== "undefined" ? children : title;
+    const hasCustomChildren = typeof children !== "undefined";
+    const customIcon = icon != null && typeof icon !== "boolean" ? icon : void 0;
+    const hasIcon = showIcon || icon === true || customIcon != null;
+    const resolvedContainerClassName = className?.trim() || void 0;
+    const resolvedAccessibilityLabel = accessibilityLabel ?? (typeof label === "string" ? label : void 0);
+    const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
+    useApplyWebClassName(containerRef, resolvedContainerClassName);
+    useApplyWebClassName(textRef, textClassName);
+    const iconNode = customIcon ?? /* @__PURE__ */ jsx(ArrowRightIcon, { size: metrics.iconSize, color: preset.iconColor });
+    const containerStyle = [
+      styles.base,
+      {
+        minHeight: metrics.minHeight,
+        borderRadius: metrics.borderRadius,
+        backgroundColor: preset.backgroundColor,
+        paddingTop: metrics.paddingVertical,
+        paddingBottom: metrics.paddingVertical,
+        paddingLeft: metrics.paddingLeft,
+        paddingRight: hasIcon ? metrics.paddingRightWithIcon : metrics.paddingRight,
+        gap: hasIcon ? metrics.gap : 0
+      },
+      disabled && styles.disabled,
+      style
+    ];
+    const labelStyle = [
+      styles.label,
+      metrics.text,
+      { color: preset.textColor },
+      Platform.OS === "android" ? styles.labelAndroid : null,
+      !hasIcon && styles.labelCentered,
+      textStyle
+    ];
+    return /* @__PURE__ */ jsxs(
+      TouchableOpacity,
+      {
+        ...rest,
+        ref: setContainerRef,
+        style: containerStyle,
+        onPress,
+        disabled,
+        activeOpacity: 0.7,
+        accessibilityRole: "button",
+        accessibilityLabel: resolvedAccessibilityLabel,
+        accessibilityState: { disabled },
+        children: [
+          hasCustomChildren ? children : /* @__PURE__ */ jsx(Text, { ref: textRef, style: labelStyle, children: label }),
+          hasIcon ? /* @__PURE__ */ jsx(
+            View,
+            {
+              style: [
+                styles.iconContainer,
+                {
+                  width: metrics.iconContainerSize,
+                  height: metrics.iconContainerSize,
+                  borderRadius: metrics.iconContainerSize / 2,
+                  backgroundColor: preset.iconBadgeBackgroundColor
+                }
+              ],
+              children: iconNode
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+var styles = StyleSheet.create({
+  base: {
+    flexDirection: "row",
+    alignItems: "center",
+    alignSelf: "flex-start",
+    borderWidth: 0
+  },
+  disabled: {
+    opacity: 0.6
+  },
+  label: {},
+  labelAndroid: {
+    includeFontPadding: false
+  },
+  labelCentered: {
+    textAlign: "center"
+  },
+  iconContainer: {
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0
+  }
+});
+var BOX_SIZE = 20;
+var BOX_RADIUS = 6;
+var CHECK_SIZE = 12;
+var CHECK_STROKE = 2.5;
+var variantChrome = {
+  default: {
+    backgroundColor: colors.dark,
+    borderColor: colors.grey700
+  },
+  light: {
+    backgroundColor: colors.grey700,
+    borderColor: colors.grey500
+  }
+};
+var Checkbox = forwardRef(function Checkbox2({
+  value,
+  defaultValue = false,
+  onValueChange,
   disabled = false,
-  variant = "primary",
-  size = "lg",
-  showIcon = false,
-  icon,
+  variant = "default",
+  label,
+  children,
   style,
-  textStyle,
+  labelStyle,
   className,
-  textClassName
-}) {
+  hitSlop = 8,
+  accessibilityLabel,
+  ...rest
+}, forwardedRef) {
   const containerRef = useRef(null);
-  const textRef = useRef(null);
-  const preset = variantConfig[variant];
-  const metrics = sizeConfig[size];
-  const label = typeof children !== "undefined" ? children : title;
-  const hasCustomChildren = typeof children !== "undefined";
-  const customIcon = icon != null && typeof icon !== "boolean" ? icon : void 0;
-  const hasIcon = showIcon || icon === true || customIcon != null;
-  const resolvedContainerClassName = className?.trim() || void 0;
-  useApplyWebClassName(containerRef, resolvedContainerClassName);
-  useApplyWebClassName(textRef, textClassName);
-  const iconNode = customIcon ?? /* @__PURE__ */ jsx(ArrowRightIcon, { size: metrics.iconSize, color: preset.iconColor });
-  const containerStyle = [
-    styles.base,
-    {
-      minHeight: metrics.minHeight,
-      borderRadius: metrics.borderRadius,
-      backgroundColor: preset.backgroundColor,
-      paddingTop: metrics.paddingVertical,
-      paddingBottom: metrics.paddingVertical,
-      paddingLeft: metrics.paddingLeft,
-      paddingRight: hasIcon ? metrics.paddingRightWithIcon : metrics.paddingRight,
-      gap: hasIcon ? metrics.gap : 0
-    },
-    disabled && styles.disabled,
-    style
-  ];
-  const labelStyle = [
-    styles.label,
-    metrics.text,
-    { color: preset.textColor },
-    Platform.OS === "android" ? styles.labelAndroid : null,
-    !hasIcon && styles.labelCentered,
-    textStyle
-  ];
+  const isControlled = typeof value === "boolean";
+  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+  const isActive = isControlled ? value : uncontrolledValue;
+  const chrome = variantChrome[variant];
+  const labelContent = children ?? label;
+  const resolvedAccessibilityLabel = accessibilityLabel ?? (typeof labelContent === "string" ? labelContent : void 0);
+  const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
+  useApplyWebClassName(containerRef, className);
+  const handlePress = () => {
+    if (disabled) return;
+    const next = !isActive;
+    if (!isControlled) setUncontrolledValue(next);
+    onValueChange?.(next);
+  };
   return /* @__PURE__ */ jsxs(
-    TouchableOpacity,
+    Pressable,
     {
-      ref: containerRef,
-      style: containerStyle,
-      onPress,
+      ...rest,
+      ref: setContainerRef,
+      onPress: handlePress,
       disabled,
-      activeOpacity: 0.7,
-      accessibilityRole: "button",
-      accessibilityState: { disabled },
+      hitSlop,
+      accessibilityRole: "checkbox",
+      accessibilityLabel: resolvedAccessibilityLabel,
+      accessibilityState: { checked: isActive, disabled },
+      style: [styles2.root, disabled && styles2.disabled, style],
       children: [
-        hasCustomChildren ? children : /* @__PURE__ */ jsx(Text, { ref: textRef, style: labelStyle, children: label }),
-        hasIcon ? /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(
           View,
           {
             style: [
-              styles.iconContainer,
+              styles2.box,
               {
-                width: metrics.iconContainerSize,
-                height: metrics.iconContainerSize,
-                borderRadius: metrics.iconContainerSize / 2,
-                backgroundColor: preset.iconBadgeBackgroundColor
+                backgroundColor: chrome.backgroundColor,
+                borderColor: chrome.borderColor
               }
             ],
-            children: iconNode
+            children: isActive ? /* @__PURE__ */ jsx(CheckIcon, { size: CHECK_SIZE, color: colors.primary, strokeWidth: CHECK_STROKE }) : null
           }
-        ) : null
+        ),
+        labelContent != null && labelContent !== false ? typeof labelContent === "string" || typeof labelContent === "number" ? /* @__PURE__ */ jsx(Text, { style: [styles2.label, labelStyle], children: labelContent }) : labelContent : null
       ]
     }
   );
-}
-var styles = StyleSheet.create({
-  base: {
+});
+var styles2 = StyleSheet.create({
+  root: {
     flexDirection: "row",
     alignItems: "center",
     alignSelf: "flex-start",
-    borderWidth: 0
+    gap: 10
   },
   disabled: {
-    opacity: 0.6
+    opacity: 0.5
   },
-  label: {},
-  labelAndroid: {
-    includeFontPadding: false
-  },
-  labelCentered: {
-    textAlign: "center"
-  },
-  iconContainer: {
+  box: {
+    width: BOX_SIZE,
+    height: BOX_SIZE,
+    borderRadius: BOX_RADIUS,
+    borderWidth: 1,
     alignItems: "center",
     justifyContent: "center",
     flexShrink: 0
+  },
+  label: {
+    ...inputTypography.field,
+    color: colors.white
   }
 });
 var DEFAULT_WIDTH = 308;
@@ -578,14 +812,12 @@ var sizeConfig2 = {
     text: inputTypography.hint
   }
 };
-function resolveState({
-  state,
+function resolveVisualState({
   disabled,
   error,
   focused,
   hasValue
 }) {
-  if (state) return state;
   if (disabled) return "disabled";
   if (error) return "error";
   if (focused) return "active";
@@ -637,13 +869,12 @@ function chromeFor(state) {
       return base;
   }
 }
-function Input({
+var Input = forwardRef(function Input2({
   label = "Label",
   showLabel = true,
   hint = "Hint",
   showHint = true,
   placeholder = "placeholder",
-  state: stateProp,
   size = "lg",
   disabled = false,
   error = false,
@@ -657,43 +888,40 @@ function Input({
   rightIcon,
   showRightIcon = false,
   onRightIconPress,
+  rightIconAccessibilityLabel,
   style,
   fieldStyle,
   inputStyle,
   className,
   inputClassName,
+  accessibilityLabel,
   ...textInputProps
-}) {
+}, forwardedRef) {
   const rootRef = useRef(null);
   const inputRef = useRef(null);
+  const setInputRef = useMemo(() => mergeRefs(inputRef, forwardedRef), [forwardedRef]);
   const [focused, setFocused] = useState(false);
   const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? "");
   const metrics = sizeConfig2[size];
   const isControlled = typeof value === "string";
   const currentValue = isControlled ? value : uncontrolledValue;
   const hasValue = currentValue.length > 0;
-  const resolvedState = resolveState({
-    state: stateProp,
-    disabled,
-    error,
-    focused,
-    hasValue
-  });
-  const chrome = chromeFor(resolvedState);
-  const isDisabled = resolvedState === "disabled" || disabled;
+  const visualState = resolveVisualState({ disabled, error, focused, hasValue });
+  const chrome = chromeFor(visualState);
+  const resolvedAccessibilityLabel = accessibilityLabel ?? (showLabel ? void 0 : label);
   const hasLeftIcon = showLeftIcon || leftIcon != null;
   const hasRightIcon = showRightIcon || rightIcon != null;
   const leftIconNode = leftIcon ?? /* @__PURE__ */ jsx(UserIcon, { size: metrics.iconSize, color: chrome.leftIconColor });
   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: [styles2.root, isDisabled && styles2.disabled, style], children: [
-    showLabel && label ? /* @__PURE__ */ jsx(Text, { style: [styles2.label, { color: chrome.labelColor }], children: label }) : null,
+  return /* @__PURE__ */ jsxs(View, { ref: rootRef, style: [styles3.root, disabled && styles3.disabled, style], children: [
+    showLabel && label ? /* @__PURE__ */ jsx(Text, { style: [styles3.label, { color: chrome.labelColor }], children: label }) : null,
     /* @__PURE__ */ jsxs(
       View,
       {
         style: [
-          styles2.field,
+          styles3.field,
           {
             height: metrics.height,
             borderRadius: metrics.borderRadius,
@@ -708,15 +936,15 @@ function Input({
           fieldStyle
         ],
         children: [
-          hasLeftIcon ? /* @__PURE__ */ jsx(View, { style: [styles2.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }], children: leftIconNode }) : null,
+          hasLeftIcon ? /* @__PURE__ */ jsx(View, { style: [styles3.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }], children: leftIconNode }) : null,
           /* @__PURE__ */ jsx(
             TextInput,
             {
-              ref: inputRef,
+              ref: setInputRef,
               ...textInputProps,
               value: isControlled ? value : void 0,
               defaultValue: isControlled ? void 0 : defaultValue,
-              editable: !isDisabled,
+              editable: !disabled,
               placeholder,
               placeholderTextColor: chrome.placeholderColor,
               onChangeText: (text) => {
@@ -732,34 +960,36 @@ function Input({
                 onBlur?.(event);
               },
               style: [
-                styles2.input,
+                styles3.input,
                 metrics.text,
                 { color: chrome.textColor },
-                Platform.OS === "web" ? styles2.inputWeb : null,
-                Platform.OS === "android" ? styles2.inputAndroid : null,
+                Platform.OS === "web" ? styles3.inputWeb : null,
+                Platform.OS === "android" ? styles3.inputAndroid : null,
                 inputStyle
               ],
-              accessibilityState: { disabled: isDisabled }
+              accessibilityLabel: resolvedAccessibilityLabel,
+              accessibilityState: { disabled }
             }
           ),
           hasRightIcon ? onRightIconPress ? /* @__PURE__ */ jsx(
             TouchableOpacity,
             {
               onPress: onRightIconPress,
-              disabled: isDisabled,
-              style: [styles2.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }],
+              disabled,
+              style: [styles3.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }],
               accessibilityRole: "button",
+              accessibilityLabel: rightIconAccessibilityLabel,
               hitSlop: 8,
               children: rightIconNode
             }
-          ) : /* @__PURE__ */ jsx(View, { style: [styles2.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }], children: rightIconNode }) : null
+          ) : /* @__PURE__ */ jsx(View, { style: [styles3.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }], children: rightIconNode }) : null
         ]
       }
     ),
-    showHint && hint ? /* @__PURE__ */ jsx(Text, { style: [styles2.hint, { color: chrome.hintColor }], children: hint }) : null
+    showHint && hint ? /* @__PURE__ */ jsx(Text, { style: [styles3.hint, { color: chrome.hintColor }], children: hint }) : null
   ] });
-}
-var styles2 = StyleSheet.create({
+});
+var styles3 = StyleSheet.create({
   root: {
     width: DEFAULT_WIDTH,
     gap: 8,
@@ -796,7 +1026,925 @@ var styles2 = StyleSheet.create({
     ...inputTypography.hint
   }
 });
+var DEFAULT_WIDTH2 = 308;
+var TRIGGER_HEIGHT = 44;
+var TRIGGER_RADIUS = 60;
+var MENU_RADIUS = 24;
+var MENU_MAX_LIST_HEIGHT = 248;
+var ITEM_RADIUS = 12;
+var ICON_SIZE = 20;
+var CHIP_GAP = 6;
+var FALLBACK_ELLIPSIS_WIDTH = 20;
+function itemBackground(state) {
+  switch (state) {
+    case "hover":
+      return colors.grey600;
+    case "selected":
+      return colors.primaryMuted;
+    default:
+      return "transparent";
+  }
+}
+function toArray(value) {
+  if (value == null || value === "") return [];
+  return Array.isArray(value) ? value : [value];
+}
+function resolveVisibleOptions(options, containerWidth, chipWidths, ellipsisWidth) {
+  if (options.length === 0) return { visible: [], hasOverflow: false };
+  if (containerWidth <= 0) return { visible: options.slice(0, 1), hasOverflow: options.length > 1 };
+  const visible = [];
+  let used = 0;
+  for (let index = 0; index < options.length; index += 1) {
+    const option = options[index];
+    const chipWidth = chipWidths[option.value];
+    if (chipWidth == null) {
+      if (visible.length === 0) visible.push(option);
+      break;
+    }
+    const remainingAfter = options.length - index - 1;
+    const gap = visible.length > 0 ? CHIP_GAP : 0;
+    const reserve = remainingAfter > 0 ? CHIP_GAP + ellipsisWidth : 0;
+    const nextUsed = used + gap + chipWidth;
+    if (visible.length > 0 && nextUsed + reserve > containerWidth) {
+      return { visible, hasOverflow: true };
+    }
+    visible.push(option);
+    used = nextUsed;
+  }
+  return { visible, hasOverflow: visible.length < options.length };
+}
+function MultiValueChips({ options, disabled, onRemove }) {
+  const [containerWidth, setContainerWidth] = useState(0);
+  const [chipWidths, setChipWidths] = useState({});
+  const [ellipsisWidth, setEllipsisWidth] = useState(FALLBACK_ELLIPSIS_WIDTH);
+  useEffect(() => {
+    setChipWidths((current) => {
+      const validValues = new Set(options.map((option) => option.value));
+      const keys = Object.keys(current);
+      if (keys.every((key) => validValues.has(key))) return current;
+      const next = {};
+      for (const key of keys) {
+        if (validValues.has(key)) next[key] = current[key];
+      }
+      return next;
+    });
+  }, [options]);
+  const { visible, hasOverflow } = useMemo(
+    () => resolveVisibleOptions(options, containerWidth, chipWidths, ellipsisWidth),
+    [chipWidths, containerWidth, ellipsisWidth, options]
+  );
+  const handleContainerLayout = (event) => {
+    const next = Math.floor(event.nativeEvent.layout.width);
+    setContainerWidth((current) => current === next ? current : next);
+  };
+  const handleChipLayout = (value, event) => {
+    const next = Math.ceil(event.nativeEvent.layout.width);
+    setChipWidths((current) => current[value] === next ? current : { ...current, [value]: next });
+  };
+  const handleEllipsisLayout = (event) => {
+    const next = Math.ceil(event.nativeEvent.layout.width);
+    setEllipsisWidth((current) => current === next ? current : next);
+  };
+  return /* @__PURE__ */ jsxs(View, { style: styles4.multiValueRoot, children: [
+    /* @__PURE__ */ jsxs(View, { pointerEvents: "none", style: styles4.measureRow, children: [
+      options.map((option) => /* @__PURE__ */ jsxs(
+        View,
+        {
+          style: styles4.chip,
+          onLayout: (event) => handleChipLayout(option.value, event),
+          children: [
+            /* @__PURE__ */ jsx(Text, { style: styles4.chipLabel, numberOfLines: 1, children: option.label }),
+            /* @__PURE__ */ jsx(Text, { style: styles4.chipRemove, children: "\xD7" })
+          ]
+        },
+        `measure-${option.value}`
+      )),
+      /* @__PURE__ */ jsx(View, { style: styles4.ellipsis, onLayout: handleEllipsisLayout, children: /* @__PURE__ */ jsx(Text, { style: styles4.ellipsisText, children: "..." }) })
+    ] }),
+    /* @__PURE__ */ jsxs(View, { style: styles4.chipsRow, onLayout: handleContainerLayout, children: [
+      visible.map((option) => /* @__PURE__ */ jsxs(View, { style: styles4.chip, children: [
+        /* @__PURE__ */ jsx(Text, { style: styles4.chipLabel, numberOfLines: 1, children: option.label }),
+        /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            onPress: (event) => {
+              event?.stopPropagation?.();
+              onRemove(option.value);
+            },
+            disabled,
+            hitSlop: 6,
+            accessibilityRole: "button",
+            accessibilityLabel: `Remove ${option.label}`,
+            children: /* @__PURE__ */ jsx(Text, { style: styles4.chipRemove, children: "\xD7" })
+          }
+        )
+      ] }, option.value)),
+      hasOverflow ? /* @__PURE__ */ jsx(View, { style: styles4.ellipsis, children: /* @__PURE__ */ jsx(Text, { style: styles4.ellipsisText, children: "..." }) }) : null
+    ] })
+  ] });
+}
+var Select = forwardRef(
+  function Select2(props, forwardedRef) {
+    const {
+      label = "Label",
+      showLabel = true,
+      hint,
+      showHint = false,
+      placeholder = "placeholder",
+      options,
+      open: openProp,
+      defaultOpen = false,
+      onOpenChange,
+      disabled = false,
+      error = false,
+      leftIcon,
+      showLeftIcon = true,
+      showSearch = true,
+      searchPlaceholder = "Search...",
+      onSearchChange,
+      loading = false,
+      emptyText = "No results",
+      style,
+      className,
+      accessibilityLabel,
+      // Pulled out only to keep them off `rest` (which is spread onto the root View);
+      // the real values are read from `props` directly below to preserve discriminated typing.
+      multiple: _multiple,
+      value: _value,
+      defaultValue: _defaultValue,
+      onValueChange: _onValueChange,
+      ...rest
+    } = props;
+    const multiple = props.multiple === true;
+    const valueProp = props.value;
+    const rootRef = useRef(null);
+    const triggerRef = useRef(null);
+    const searchInputRef = useRef(null);
+    const setRootRef = useMemo(() => mergeRefs(rootRef, forwardedRef), [forwardedRef]);
+    const isOpenControlled = typeof openProp === "boolean";
+    const isValueControlled = valueProp !== void 0;
+    const [uncontrolledSingle, setUncontrolledSingle] = useState(
+      !multiple ? props.defaultValue ?? "" : ""
+    );
+    const [uncontrolledMultiple, setUncontrolledMultiple] = useState(
+      multiple ? props.defaultValue ?? [] : []
+    );
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+    const [searchQuery, setSearchQuery] = useState("");
+    const [hoveredValue, setHoveredValue] = useState(null);
+    const selectedValues = useMemo(() => {
+      const current = isValueControlled ? valueProp : multiple ? uncontrolledMultiple : uncontrolledSingle;
+      return toArray(current);
+    }, [isValueControlled, multiple, valueProp, uncontrolledMultiple, uncontrolledSingle]);
+    const isOpen = isOpenControlled ? openProp : uncontrolledOpen;
+    const selectedOptions = useMemo(
+      () => selectedValues.map((value) => options.find((option) => option.value === value)).filter((option) => option != null),
+      [options, selectedValues]
+    );
+    const hasValue = selectedOptions.length > 0;
+    const isExternalSearch = onSearchChange != null;
+    const filteredOptions = useMemo(() => {
+      if (isExternalSearch) return options;
+      const query = searchQuery.trim().toLowerCase();
+      if (!query) return options;
+      return options.filter((option) => option.label.toLowerCase().includes(query));
+    }, [isExternalSearch, options, searchQuery]);
+    useApplyWebClassName(rootRef, className);
+    const setOpen = useCallback(
+      (next) => {
+        if (!isOpenControlled) setUncontrolledOpen(next);
+        onOpenChange?.(next);
+        if (next) {
+          setHoveredValue(selectedValues[0] ?? null);
+        } else {
+          setSearchQuery("");
+          setHoveredValue(null);
+          onSearchChange?.("");
+        }
+      },
+      [isOpenControlled, onOpenChange, onSearchChange, selectedValues]
+    );
+    const handleSearchChange = (text) => {
+      setSearchQuery(text);
+      onSearchChange?.(text);
+    };
+    useEffect(() => {
+      if (Platform.OS !== "web" || !isOpen) return;
+      const handlePointerDown = (event) => {
+        const root = rootRef.current;
+        const target = event.target;
+        if (root?.contains && target instanceof Node && !root.contains(target)) {
+          setOpen(false);
+        }
+      };
+      document.addEventListener("mousedown", handlePointerDown);
+      document.addEventListener("touchstart", handlePointerDown);
+      return () => {
+        document.removeEventListener("mousedown", handlePointerDown);
+        document.removeEventListener("touchstart", handlePointerDown);
+      };
+    }, [isOpen, setOpen]);
+    const commitValues = useCallback(
+      (nextValues) => {
+        if (multiple) {
+          if (!isValueControlled) setUncontrolledMultiple(nextValues);
+          props.onValueChange?.(nextValues);
+          return;
+        }
+        const nextValue = nextValues[0] ?? "";
+        if (!isValueControlled) setUncontrolledSingle(nextValue);
+        props.onValueChange?.(nextValue);
+      },
+      [isValueControlled, multiple, props]
+    );
+    const handleTriggerPress = () => {
+      if (disabled) return;
+      setOpen(!isOpen);
+    };
+    const handleSelect = useCallback(
+      (optionValue) => {
+        if (disabled) return;
+        if (multiple) {
+          const exists = selectedValues.includes(optionValue);
+          const nextValues = exists ? selectedValues.filter((value) => value !== optionValue) : [...selectedValues, optionValue];
+          commitValues(nextValues);
+          return;
+        }
+        commitValues([optionValue]);
+        setOpen(false);
+      },
+      [commitValues, disabled, multiple, selectedValues, setOpen]
+    );
+    const handleRemoveChip = (optionValue) => {
+      if (disabled || !multiple) return;
+      commitValues(selectedValues.filter((value) => value !== optionValue));
+    };
+    const focusTrigger = useCallback(() => {
+      const node = triggerRef.current;
+      node?.focus?.();
+    }, []);
+    const closeAndFocusTrigger = useCallback(() => {
+      setOpen(false);
+      focusTrigger();
+    }, [focusTrigger, setOpen]);
+    useEffect(() => {
+      if (Platform.OS !== "web") return;
+      const isTriggerFocused = () => document.activeElement === triggerRef.current;
+      const isSearchFocused = () => document.activeElement === searchInputRef.current;
+      const handleKeyDown = (event) => {
+        if (!isOpen) {
+          if (!isTriggerFocused() || disabled) return;
+          if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter") {
+            event.preventDefault();
+            setOpen(true);
+          }
+          return;
+        }
+        if (event.key === "Escape") {
+          event.preventDefault();
+          closeAndFocusTrigger();
+          return;
+        }
+        if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+          event.preventDefault();
+          setHoveredValue((current) => {
+            if (filteredOptions.length === 0) return current;
+            const currentIndex = filteredOptions.findIndex((option) => option.value === current);
+            const delta = event.key === "ArrowDown" ? 1 : -1;
+            const nextIndex = currentIndex === -1 ? delta === 1 ? 0 : filteredOptions.length - 1 : Math.min(Math.max(currentIndex + delta, 0), filteredOptions.length - 1);
+            return filteredOptions[nextIndex]?.value ?? current;
+          });
+          return;
+        }
+        if (isSearchFocused() && (event.key === "Home" || event.key === "End" || event.key === " ")) {
+          return;
+        }
+        if (event.key === "Home" || event.key === "End") {
+          if (filteredOptions.length === 0) return;
+          event.preventDefault();
+          setHoveredValue(
+            event.key === "Home" ? filteredOptions[0].value : filteredOptions[filteredOptions.length - 1].value
+          );
+          return;
+        }
+        if (event.key === "Enter" || event.key === " ") {
+          if (hoveredValue == null) return;
+          event.preventDefault();
+          handleSelect(hoveredValue);
+          if (!multiple) focusTrigger();
+        }
+      };
+      document.addEventListener("keydown", handleKeyDown);
+      return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [
+      isOpen,
+      disabled,
+      filteredOptions,
+      hoveredValue,
+      multiple,
+      closeAndFocusTrigger,
+      focusTrigger,
+      handleSelect,
+      setOpen
+    ]);
+    const leftIconNode = leftIcon ?? /* @__PURE__ */ jsx(
+      UserIcon,
+      {
+        size: ICON_SIZE,
+        color: error ? colors.red : isOpen ? colors.primary : colors.grey100
+      }
+    );
+    const hasLeftIcon = showLeftIcon || leftIcon != null;
+    const triggerBorderColor = error ? colors.redMuted : isOpen ? colors.primaryMuted : colors.grey700;
+    const triggerTextColor = hasValue ? error ? colors.red : colors.white : error ? colors.red : colors.grey100;
+    const labelColor = error ? colors.red : colors.white;
+    const hintColor = error ? colors.red : colors.grey100;
+    const singleLabel = selectedOptions[0]?.label ?? placeholder;
+    const resolvedAccessibilityLabel = accessibilityLabel ?? (typeof label === "string" ? label : void 0);
+    return /* @__PURE__ */ jsxs(
+      View,
+      {
+        ...rest,
+        ref: setRootRef,
+        style: [styles4.root, isOpen && styles4.rootOpen, disabled && styles4.disabled, style],
+        accessibilityState: { disabled, expanded: isOpen },
+        children: [
+          showLabel && label ? /* @__PURE__ */ jsx(Text, { style: [styles4.label, { color: labelColor }], children: label }) : null,
+          /* @__PURE__ */ jsxs(View, { style: [styles4.triggerWrap, isOpen && styles4.triggerWrapOpen], children: [
+            /* @__PURE__ */ jsxs(
+              Pressable,
+              {
+                ref: triggerRef,
+                onPress: handleTriggerPress,
+                disabled,
+                accessibilityRole: "combobox",
+                accessibilityLabel: resolvedAccessibilityLabel,
+                accessibilityState: { disabled, expanded: isOpen },
+                style: [
+                  styles4.trigger,
+                  {
+                    borderColor: triggerBorderColor,
+                    backgroundColor: colors.grey700
+                  }
+                ],
+                children: [
+                  hasLeftIcon ? /* @__PURE__ */ jsx(View, { style: styles4.iconSlot, children: leftIconNode }) : null,
+                  /* @__PURE__ */ jsx(View, { style: styles4.triggerContent, children: multiple && hasValue ? /* @__PURE__ */ jsx(
+                    MultiValueChips,
+                    {
+                      options: selectedOptions,
+                      disabled,
+                      onRemove: handleRemoveChip
+                    }
+                  ) : /* @__PURE__ */ jsx(Text, { style: [styles4.triggerText, { color: triggerTextColor }], numberOfLines: 1, children: multiple ? placeholder : singleLabel }) }),
+                  /* @__PURE__ */ jsx(View, { style: [styles4.iconSlot, isOpen && styles4.chevronOpen], children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: ICON_SIZE, color: colors.grey100 }) })
+                ]
+              }
+            ),
+            isOpen ? /* @__PURE__ */ jsxs(View, { style: styles4.menu, children: [
+              showSearch ? /* @__PURE__ */ jsxs(View, { style: styles4.searchField, children: [
+                /* @__PURE__ */ jsx(View, { style: styles4.iconSlot, children: /* @__PURE__ */ jsx(SearchIcon, { size: ICON_SIZE, color: colors.grey100 }) }),
+                /* @__PURE__ */ jsx(
+                  TextInput,
+                  {
+                    ref: searchInputRef,
+                    value: searchQuery,
+                    onChangeText: handleSearchChange,
+                    editable: !disabled,
+                    placeholder: searchPlaceholder,
+                    placeholderTextColor: colors.grey100,
+                    style: [
+                      styles4.searchInput,
+                      Platform.OS === "web" ? styles4.searchInputWeb : null,
+                      Platform.OS === "android" ? styles4.searchInputAndroid : null
+                    ],
+                    accessibilityLabel: searchPlaceholder
+                  }
+                )
+              ] }) : null,
+              /* @__PURE__ */ jsxs(
+                ScrollView,
+                {
+                  style: styles4.optionList,
+                  contentContainerStyle: styles4.optionListContent,
+                  keyboardShouldPersistTaps: "handled",
+                  showsVerticalScrollIndicator: false,
+                  children: [
+                    loading ? /* @__PURE__ */ jsx(View, { style: styles4.statusRow, children: /* @__PURE__ */ jsx(Text, { style: styles4.statusText, children: "Loading..." }) }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsx(View, { style: styles4.statusRow, children: /* @__PURE__ */ jsx(Text, { style: styles4.statusText, children: emptyText }) }) : null,
+                    !loading && filteredOptions.map((option) => {
+                      const isSelected = selectedValues.includes(option.value);
+                      const isHovered = hoveredValue === option.value;
+                      const visualState = isSelected ? "selected" : isHovered ? "hover" : "default";
+                      return /* @__PURE__ */ jsxs(
+                        Pressable,
+                        {
+                          onPress: () => handleSelect(option.value),
+                          disabled,
+                          onHoverIn: () => setHoveredValue(option.value),
+                          onHoverOut: () => setHoveredValue((current) => current === option.value ? null : current),
+                          onPressIn: () => setHoveredValue(option.value),
+                          onPressOut: () => setHoveredValue((current) => current === option.value ? null : current),
+                          accessibilityRole: multiple ? "checkbox" : "button",
+                          accessibilityState: { selected: isSelected, checked: isSelected, disabled },
+                          style: [
+                            styles4.item,
+                            {
+                              backgroundColor: itemBackground(visualState)
+                            }
+                          ],
+                          children: [
+                            multiple ? /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: styles4.itemCheckbox, children: /* @__PURE__ */ jsx(Checkbox, { value: isSelected, variant: "light" }) }) : null,
+                            /* @__PURE__ */ jsx(Text, { style: styles4.itemLabel, numberOfLines: 1, children: option.label })
+                          ]
+                        },
+                        option.value
+                      );
+                    })
+                  ]
+                }
+              )
+            ] }) : null
+          ] }),
+          showHint && hint ? /* @__PURE__ */ jsx(Text, { style: [styles4.hint, { color: hintColor }], children: hint }) : null
+        ]
+      }
+    );
+  }
+);
+var styles4 = StyleSheet.create({
+  root: {
+    width: DEFAULT_WIDTH2,
+    gap: 8,
+    alignSelf: "flex-start"
+  },
+  rootOpen: {
+    zIndex: 30
+  },
+  disabled: {
+    opacity: 0.6
+  },
+  label: {
+    ...selectTypography.label
+  },
+  triggerWrap: {
+    position: "relative",
+    zIndex: 1
+  },
+  triggerWrapOpen: {
+    zIndex: 20
+  },
+  trigger: {
+    height: TRIGGER_HEIGHT,
+    borderRadius: TRIGGER_RADIUS,
+    borderWidth: 1,
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    overflow: "hidden"
+  },
+  triggerContent: {
+    flex: 1,
+    justifyContent: "center",
+    minWidth: 0,
+    overflow: "hidden"
+  },
+  triggerText: {
+    ...selectTypography.field
+  },
+  multiValueRoot: {
+    width: "100%",
+    position: "relative"
+  },
+  measureRow: {
+    position: "absolute",
+    left: 0,
+    top: 0,
+    flexDirection: "row",
+    opacity: 0,
+    zIndex: -1
+  },
+  chipsRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: CHIP_GAP,
+    overflow: "hidden"
+  },
+  chip: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    paddingVertical: 2,
+    paddingHorizontal: 8,
+    borderRadius: 999,
+    backgroundColor: colors.grey600,
+    flexShrink: 0
+  },
+  chipLabel: {
+    ...selectTypography.hint,
+    color: colors.white,
+    maxWidth: 120
+  },
+  chipRemove: {
+    color: colors.grey100,
+    fontSize: 14,
+    lineHeight: 14
+  },
+  ellipsis: {
+    flexShrink: 0,
+    paddingHorizontal: 2
+  },
+  ellipsisText: {
+    ...selectTypography.field,
+    color: colors.white,
+    lineHeight: 16
+  },
+  iconSlot: {
+    width: ICON_SIZE,
+    height: ICON_SIZE,
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0
+  },
+  chevronOpen: {
+    transform: [{ rotate: "180deg" }]
+  },
+  menu: {
+    position: "absolute",
+    top: "100%",
+    left: 0,
+    right: 0,
+    marginTop: 8,
+    zIndex: 10,
+    borderRadius: MENU_RADIUS,
+    padding: 12,
+    gap: 8,
+    backgroundColor: colors.grey700,
+    ...Platform.select({
+      web: {
+        boxShadow: `0 8px 24px ${colors.black}73`
+      },
+      default: {
+        elevation: 8
+      }
+    })
+  },
+  optionList: {
+    maxHeight: MENU_MAX_LIST_HEIGHT
+  },
+  optionListContent: {
+    gap: 8
+  },
+  statusRow: {
+    minHeight: 43,
+    padding: 12,
+    justifyContent: "center"
+  },
+  statusText: {
+    ...selectTypography.field,
+    color: colors.grey100
+  },
+  searchField: {
+    height: 40,
+    borderRadius: ITEM_RADIUS,
+    paddingHorizontal: 12,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    backgroundColor: colors.grey800
+  },
+  searchInput: {
+    ...selectTypography.field,
+    flex: 1,
+    color: colors.white,
+    paddingVertical: 0,
+    margin: 0
+  },
+  searchInputWeb: {
+    outlineStyle: "none"
+  },
+  searchInputAndroid: {
+    includeFontPadding: false
+  },
+  item: {
+    minHeight: 43,
+    borderRadius: ITEM_RADIUS,
+    padding: 12,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  itemCheckbox: {
+    flexShrink: 0
+  },
+  itemLabel: {
+    ...selectTypography.field,
+    color: colors.white,
+    flex: 1
+  },
+  hint: {
+    ...selectTypography.hint
+  }
+});
+var DEFAULT_WIDTH3 = 308;
+var FIELD_HEIGHT = 100;
+var FIELD_RADIUS = 16;
+var FIELD_PADDING_VERTICAL = 12;
+var FIELD_PADDING_HORIZONTAL = 16;
+function resolveVisualState2({
+  disabled,
+  error,
+  focused,
+  hasValue
+}) {
+  if (disabled) return "disabled";
+  if (error) return "error";
+  if (focused) return "active";
+  if (hasValue) return "filled";
+  return "default";
+}
+function chromeFor2(state) {
+  const base = {
+    borderColor: colors.grey700,
+    backgroundColor: colors.grey700,
+    textColor: colors.white,
+    placeholderColor: colors.grey100,
+    labelColor: colors.white,
+    hintColor: colors.grey100
+  };
+  switch (state) {
+    case "active":
+      return {
+        ...base,
+        borderColor: colors.primaryMuted
+      };
+    case "error":
+      return {
+        ...base,
+        borderColor: colors.redMuted,
+        textColor: colors.red,
+        placeholderColor: colors.red,
+        labelColor: colors.red,
+        hintColor: colors.red
+      };
+    case "filled":
+      return base;
+    case "disabled":
+      return {
+        ...base,
+        textColor: colors.grey0
+      };
+    default:
+      return base;
+  }
+}
+var Textarea = forwardRef(function Textarea2({
+  label = "Label",
+  showLabel = true,
+  hint = "Hint",
+  showHint = true,
+  placeholder = "placeholder",
+  disabled = false,
+  error = false,
+  value,
+  defaultValue,
+  onChangeText,
+  onFocus,
+  onBlur,
+  style,
+  fieldStyle,
+  inputStyle,
+  className,
+  inputClassName,
+  accessibilityLabel,
+  ...textInputProps
+}, forwardedRef) {
+  const rootRef = useRef(null);
+  const inputRef = useRef(null);
+  const setInputRef = useMemo(() => mergeRefs(inputRef, forwardedRef), [forwardedRef]);
+  const [focused, setFocused] = useState(false);
+  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? "");
+  const isControlled = typeof value === "string";
+  const currentValue = isControlled ? value : uncontrolledValue;
+  const hasValue = currentValue.length > 0;
+  const visualState = resolveVisualState2({ disabled, error, focused, hasValue });
+  const chrome = chromeFor2(visualState);
+  const resolvedAccessibilityLabel = accessibilityLabel ?? (showLabel ? void 0 : label);
+  useApplyWebClassName(rootRef, className);
+  useApplyWebClassName(inputRef, inputClassName);
+  return /* @__PURE__ */ jsxs(View, { ref: rootRef, style: [styles5.root, disabled && styles5.disabled, style], children: [
+    showLabel && label ? /* @__PURE__ */ jsx(Text, { style: [styles5.label, { color: chrome.labelColor }], children: label }) : null,
+    /* @__PURE__ */ jsx(
+      View,
+      {
+        style: [
+          styles5.field,
+          {
+            borderColor: chrome.borderColor,
+            backgroundColor: chrome.backgroundColor
+          },
+          fieldStyle
+        ],
+        children: /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            ref: setInputRef,
+            ...textInputProps,
+            multiline: true,
+            textAlignVertical: "top",
+            value: isControlled ? value : void 0,
+            defaultValue: isControlled ? void 0 : defaultValue,
+            editable: !disabled,
+            placeholder,
+            placeholderTextColor: chrome.placeholderColor,
+            onChangeText: (text) => {
+              if (!isControlled) setUncontrolledValue(text);
+              onChangeText?.(text);
+            },
+            onFocus: (event) => {
+              setFocused(true);
+              onFocus?.(event);
+            },
+            onBlur: (event) => {
+              setFocused(false);
+              onBlur?.(event);
+            },
+            style: [
+              styles5.input,
+              textareaTypography.field,
+              { color: chrome.textColor },
+              Platform.OS === "web" ? styles5.inputWeb : null,
+              Platform.OS === "android" ? styles5.inputAndroid : null,
+              inputStyle
+            ],
+            accessibilityLabel: resolvedAccessibilityLabel,
+            accessibilityState: { disabled }
+          }
+        )
+      }
+    ),
+    showHint && hint ? /* @__PURE__ */ jsx(Text, { style: [styles5.hint, { color: chrome.hintColor }], children: hint }) : null
+  ] });
+});
+var styles5 = StyleSheet.create({
+  root: {
+    width: DEFAULT_WIDTH3,
+    gap: 8,
+    alignSelf: "flex-start"
+  },
+  disabled: {
+    opacity: 0.6
+  },
+  label: {
+    ...textareaTypography.label
+  },
+  field: {
+    height: FIELD_HEIGHT,
+    borderRadius: FIELD_RADIUS,
+    borderWidth: 1,
+    paddingTop: FIELD_PADDING_VERTICAL,
+    paddingBottom: FIELD_PADDING_VERTICAL,
+    paddingLeft: FIELD_PADDING_HORIZONTAL,
+    paddingRight: FIELD_PADDING_HORIZONTAL
+  },
+  input: {
+    flex: 1,
+    paddingVertical: 0,
+    margin: 0
+  },
+  inputWeb: {
+    outlineStyle: "none",
+    resize: "none"
+  },
+  inputAndroid: {
+    includeFontPadding: false
+  },
+  hint: {
+    ...textareaTypography.hint
+  }
+});
+var TRACK_WIDTH = 44;
+var TRACK_HEIGHT = 24;
+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 Toggle = forwardRef(function Toggle2({
+  value,
+  defaultValue = false,
+  onValueChange,
+  disabled = false,
+  label,
+  children,
+  accessibilityLabel,
+  style,
+  labelStyle,
+  className,
+  hitSlop = 10,
+  ...rest
+}, forwardedRef) {
+  const containerRef = useRef(null);
+  const isControlled = typeof value === "boolean";
+  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+  const isActive = isControlled ? value : uncontrolledValue;
+  const labelContent = children ?? label;
+  const resolvedAccessibilityLabel = accessibilityLabel ?? (typeof labelContent === "string" ? labelContent : void 0);
+  const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
+  const progress = useRef(new Animated.Value(isActive ? 1 : 0)).current;
+  useApplyWebClassName(containerRef, className);
+  useEffect(() => {
+    Animated.timing(progress, {
+      toValue: isActive ? 1 : 0,
+      duration: ANIMATION_DURATION,
+      easing: Easing.out(Easing.ease),
+      useNativeDriver: false
+    }).start();
+  }, [isActive, progress]);
+  const handlePress = () => {
+    if (disabled) return;
+    const next = !isActive;
+    if (!isControlled) setUncontrolledValue(next);
+    onValueChange?.(next);
+  };
+  const trackBackgroundColor = progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [colors.grey700, colors.primary]
+  });
+  const thumbTranslateX = progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, THUMB_TRAVEL]
+  });
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      ...rest,
+      ref: setContainerRef,
+      onPress: handlePress,
+      disabled,
+      hitSlop,
+      accessibilityRole: "switch",
+      accessibilityLabel: resolvedAccessibilityLabel,
+      accessibilityState: { checked: isActive, disabled },
+      style: [styles6.pressable, disabled && styles6.disabled, style],
+      children: [
+        /* @__PURE__ */ jsx(
+          Animated.View,
+          {
+            style: [
+              styles6.track,
+              {
+                backgroundColor: trackBackgroundColor
+              }
+            ],
+            children: /* @__PURE__ */ jsx(
+              Animated.View,
+              {
+                style: [
+                  styles6.thumb,
+                  {
+                    transform: [{ translateX: thumbTranslateX }]
+                  }
+                ]
+              }
+            )
+          }
+        ),
+        labelContent != null && labelContent !== false ? typeof labelContent === "string" || typeof labelContent === "number" ? /* @__PURE__ */ jsx(Text, { style: [styles6.label, labelStyle], children: labelContent }) : labelContent : null
+      ]
+    }
+  );
+});
+var styles6 = StyleSheet.create({
+  pressable: {
+    flexDirection: "row",
+    alignItems: "center",
+    alignSelf: "flex-start",
+    gap: 10
+  },
+  disabled: {
+    opacity: 0.6
+  },
+  track: {
+    width: TRACK_WIDTH,
+    height: TRACK_HEIGHT,
+    borderRadius: TRACK_RADIUS,
+    padding: TRACK_PADDING,
+    justifyContent: "center"
+  },
+  thumb: {
+    width: THUMB_SIZE,
+    height: THUMB_SIZE,
+    borderRadius: THUMB_SIZE / 2,
+    backgroundColor: colors.white
+  },
+  label: {
+    ...inputTypography.field,
+    color: colors.white
+  }
+});
 
-export { ArrowRightIcon, BagIcon, BellIcon, BuildingIcon, Button, CameraIcon, CheckBadgeIcon, ClockIcon, FacebookIcon, HomeIcon, Icon, Input, InstagramIcon, KeyIcon, LinkedInIcon, MailIcon, NavigateIcon, PhoneIcon, ShowIcon, UserIcon, buttonTypography, colors, fonts, getIconsByGroup, grey, iconGroupNames, iconGroups, iconNames, icons, inputTypography };
+export { ArrowRightIcon, BagIcon, BellIcon, BuildingIcon, Button, CameraIcon, CheckBadgeIcon, CheckIcon, Checkbox, ChevronDownIcon, ClockIcon, FacebookIcon, HomeIcon, Icon, Input, InstagramIcon, KeyIcon, LinkedInIcon, MailIcon, NavigateIcon, PhoneIcon, SearchIcon, Select, ShowIcon, Textarea, Toggle, UserIcon, buttonTypography, colors, fonts, getIconsByGroup, grey, iconGroupNames, iconGroups, iconNames, icons, inputTypography, selectTypography, textareaTypography };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map