@ecohouse/ui 0.1.1 → 0.1.3

package/dist/index.cjs

@@ -83,9 +83,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,
@@ -97,8 +120,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({
@@ -178,6 +224,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__ */ jsxRuntime.jsx(Svg__default.default, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+    Svg.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 }) {
@@ -193,6 +254,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__ */ jsxRuntime.jsx(Svg__default.default, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+    Svg.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 }) {
@@ -301,6 +381,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__ */ jsxRuntime.jsxs(Svg__default.default, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Svg.Path,
+      {
+        d: SEARCH_CIRCLE_PATH,
+        stroke: color,
+        strokeWidth,
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Svg.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";
@@ -351,7 +463,9 @@ var icons = {
   bell: BellIcon,
   building: BuildingIcon,
   camera: CameraIcon,
+  check: CheckIcon,
   checkBadge: CheckBadgeIcon,
+  chevronDown: ChevronDownIcon,
   clock: ClockIcon,
   facebook: FacebookIcon,
   home: HomeIcon,
@@ -361,13 +475,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"]
@@ -380,6 +495,18 @@ function Icon({ name, ...props }) {
   const Component = icons[name];
   return /* @__PURE__ */ jsxRuntime.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";
 }
@@ -460,107 +587,214 @@ var sizeConfig = {
     iconSize: 12
   }
 };
-function Button({
-  title,
-  children,
-  onPress,
+var Button = react.forwardRef(
+  function Button2({
+    title,
+    children,
+    onPress,
+    disabled = false,
+    variant = "primary",
+    size = "lg",
+    showIcon = false,
+    icon,
+    style,
+    textStyle,
+    className,
+    textClassName,
+    accessibilityLabel,
+    ...rest
+  }, forwardedRef) {
+    const containerRef = react.useRef(null);
+    const textRef = react.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 = react.useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
+    useApplyWebClassName(containerRef, resolvedContainerClassName);
+    useApplyWebClassName(textRef, textClassName);
+    const iconNode = customIcon ?? /* @__PURE__ */ jsxRuntime.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 },
+      reactNative.Platform.OS === "android" ? styles.labelAndroid : null,
+      !hasIcon && styles.labelCentered,
+      textStyle
+    ];
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      reactNative.TouchableOpacity,
+      {
+        ...rest,
+        ref: setContainerRef,
+        style: containerStyle,
+        onPress,
+        disabled,
+        activeOpacity: 0.7,
+        accessibilityRole: "button",
+        accessibilityLabel: resolvedAccessibilityLabel,
+        accessibilityState: { disabled },
+        children: [
+          hasCustomChildren ? children : /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { ref: textRef, style: labelStyle, children: label }),
+          hasIcon ? /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.View,
+            {
+              style: [
+                styles.iconContainer,
+                {
+                  width: metrics.iconContainerSize,
+                  height: metrics.iconContainerSize,
+                  borderRadius: metrics.iconContainerSize / 2,
+                  backgroundColor: preset.iconBadgeBackgroundColor
+                }
+              ],
+              children: iconNode
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+var styles = reactNative.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 = react.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 = react.useRef(null);
-  const textRef = react.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__ */ jsxRuntime.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 },
-    reactNative.Platform.OS === "android" ? styles.labelAndroid : null,
-    !hasIcon && styles.labelCentered,
-    textStyle
-  ];
+  const isControlled = typeof value === "boolean";
+  const [uncontrolledValue, setUncontrolledValue] = react.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 = react.useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
+  useApplyWebClassName(containerRef, className);
+  const handlePress = () => {
+    if (disabled) return;
+    const next = !isActive;
+    if (!isControlled) setUncontrolledValue(next);
+    onValueChange?.(next);
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    reactNative.TouchableOpacity,
+    reactNative.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__ */ jsxRuntime.jsx(reactNative.Text, { ref: textRef, style: labelStyle, children: label }),
-        hasIcon ? /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(
           reactNative.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__ */ jsxRuntime.jsx(CheckIcon, { size: CHECK_SIZE, color: colors.primary, strokeWidth: CHECK_STROKE }) : null
           }
-        ) : null
+        ),
+        labelContent != null && labelContent !== false ? typeof labelContent === "string" || typeof labelContent === "number" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles2.label, labelStyle], children: labelContent }) : labelContent : null
       ]
     }
   );
-}
-var styles = reactNative.StyleSheet.create({
-  base: {
+});
+var styles2 = reactNative.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;
@@ -584,14 +818,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";
@@ -643,13 +875,12 @@ function chromeFor(state) {
       return base;
   }
 }
-function Input({
+var Input = react.forwardRef(function Input2({
   label = "Label",
   showLabel = true,
   hint = "Hint",
   showHint = true,
   placeholder = "placeholder",
-  state: stateProp,
   size = "lg",
   disabled = false,
   error = false,
@@ -663,43 +894,40 @@ function Input({
   rightIcon,
   showRightIcon = false,
   onRightIconPress,
+  rightIconAccessibilityLabel,
   style,
   fieldStyle,
   inputStyle,
   className,
   inputClassName,
+  accessibilityLabel,
   ...textInputProps
-}) {
+}, forwardedRef) {
   const rootRef = react.useRef(null);
   const inputRef = react.useRef(null);
+  const setInputRef = react.useMemo(() => mergeRefs(inputRef, forwardedRef), [forwardedRef]);
   const [focused, setFocused] = react.useState(false);
   const [uncontrolledValue, setUncontrolledValue] = react.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__ */ jsxRuntime.jsx(UserIcon, { size: metrics.iconSize, color: chrome.leftIconColor });
   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: [styles2.root, isDisabled && styles2.disabled, style], children: [
-    showLabel && label ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles2.label, { color: chrome.labelColor }], children: label }) : null,
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ref: rootRef, style: [styles3.root, disabled && styles3.disabled, style], children: [
+    showLabel && label ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles3.label, { color: chrome.labelColor }], children: label }) : null,
     /* @__PURE__ */ jsxRuntime.jsxs(
       reactNative.View,
       {
         style: [
-          styles2.field,
+          styles3.field,
           {
             height: metrics.height,
             borderRadius: metrics.borderRadius,
@@ -714,15 +942,15 @@ function Input({
           fieldStyle
         ],
         children: [
-          hasLeftIcon ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles2.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }], children: leftIconNode }) : null,
+          hasLeftIcon ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles3.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }], children: leftIconNode }) : null,
           /* @__PURE__ */ jsxRuntime.jsx(
             reactNative.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) => {
@@ -738,34 +966,36 @@ function Input({
                 onBlur?.(event);
               },
               style: [
-                styles2.input,
+                styles3.input,
                 metrics.text,
                 { color: chrome.textColor },
-                reactNative.Platform.OS === "web" ? styles2.inputWeb : null,
-                reactNative.Platform.OS === "android" ? styles2.inputAndroid : null,
+                reactNative.Platform.OS === "web" ? styles3.inputWeb : null,
+                reactNative.Platform.OS === "android" ? styles3.inputAndroid : null,
                 inputStyle
               ],
-              accessibilityState: { disabled: isDisabled }
+              accessibilityLabel: resolvedAccessibilityLabel,
+              accessibilityState: { disabled }
             }
           ),
           hasRightIcon ? onRightIconPress ? /* @__PURE__ */ jsxRuntime.jsx(
             reactNative.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__ */ jsxRuntime.jsx(reactNative.View, { style: [styles2.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }], children: rightIconNode }) : null
+          ) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles3.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }], children: rightIconNode }) : null
         ]
       }
     ),
-    showHint && hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles2.hint, { color: chrome.hintColor }], children: hint }) : null
+    showHint && hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles3.hint, { color: chrome.hintColor }], children: hint }) : null
   ] });
-}
-var styles2 = reactNative.StyleSheet.create({
+});
+var styles3 = reactNative.StyleSheet.create({
   root: {
     width: DEFAULT_WIDTH,
     gap: 8,
@@ -802,6 +1032,924 @@ var styles2 = reactNative.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] = react.useState(0);
+  const [chipWidths, setChipWidths] = react.useState({});
+  const [ellipsisWidth, setEllipsisWidth] = react.useState(FALLBACK_ELLIPSIS_WIDTH);
+  react.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 } = react.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__ */ jsxRuntime.jsxs(reactNative.View, { style: styles4.multiValueRoot, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { pointerEvents: "none", style: styles4.measureRow, children: [
+      options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
+        reactNative.View,
+        {
+          style: styles4.chip,
+          onLayout: (event) => handleChipLayout(option.value, event),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles4.chipLabel, numberOfLines: 1, children: option.label }),
+            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles4.chipRemove, children: "\xD7" })
+          ]
+        },
+        `measure-${option.value}`
+      )),
+      /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles4.ellipsis, onLayout: handleEllipsisLayout, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles4.ellipsisText, children: "..." }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles4.chipsRow, onLayout: handleContainerLayout, children: [
+      visible.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles4.chip, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles4.chipLabel, numberOfLines: 1, children: option.label }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Pressable,
+          {
+            onPress: (event) => {
+              event?.stopPropagation?.();
+              onRemove(option.value);
+            },
+            disabled,
+            hitSlop: 6,
+            accessibilityRole: "button",
+            accessibilityLabel: `Remove ${option.label}`,
+            children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles4.chipRemove, children: "\xD7" })
+          }
+        )
+      ] }, option.value)),
+      hasOverflow ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles4.ellipsis, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles4.ellipsisText, children: "..." }) }) : null
+    ] })
+  ] });
+}
+var Select = react.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 = react.useRef(null);
+    const triggerRef = react.useRef(null);
+    const searchInputRef = react.useRef(null);
+    const setRootRef = react.useMemo(() => mergeRefs(rootRef, forwardedRef), [forwardedRef]);
+    const isOpenControlled = typeof openProp === "boolean";
+    const isValueControlled = valueProp !== void 0;
+    const [uncontrolledSingle, setUncontrolledSingle] = react.useState(
+      !multiple ? props.defaultValue ?? "" : ""
+    );
+    const [uncontrolledMultiple, setUncontrolledMultiple] = react.useState(
+      multiple ? props.defaultValue ?? [] : []
+    );
+    const [uncontrolledOpen, setUncontrolledOpen] = react.useState(defaultOpen);
+    const [searchQuery, setSearchQuery] = react.useState("");
+    const [hoveredValue, setHoveredValue] = react.useState(null);
+    const selectedValues = react.useMemo(() => {
+      const current = isValueControlled ? valueProp : multiple ? uncontrolledMultiple : uncontrolledSingle;
+      return toArray(current);
+    }, [isValueControlled, multiple, valueProp, uncontrolledMultiple, uncontrolledSingle]);
+    const isOpen = isOpenControlled ? openProp : uncontrolledOpen;
+    const selectedOptions = react.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 = react.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 = react.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);
+    };
+    react.useEffect(() => {
+      if (reactNative.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 = react.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 = react.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 = react.useCallback(() => {
+      const node = triggerRef.current;
+      node?.focus?.();
+    }, []);
+    const closeAndFocusTrigger = react.useCallback(() => {
+      setOpen(false);
+      focusTrigger();
+    }, [focusTrigger, setOpen]);
+    react.useEffect(() => {
+      if (reactNative.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+      reactNative.View,
+      {
+        ...rest,
+        ref: setRootRef,
+        style: [styles4.root, isOpen && styles4.rootOpen, disabled && styles4.disabled, style],
+        accessibilityState: { disabled, expanded: isOpen },
+        children: [
+          showLabel && label ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles4.label, { color: labelColor }], children: label }) : null,
+          /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles4.triggerWrap, isOpen && styles4.triggerWrapOpen], children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              reactNative.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__ */ jsxRuntime.jsx(reactNative.View, { style: styles4.iconSlot, children: leftIconNode }) : null,
+                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles4.triggerContent, children: multiple && hasValue ? /* @__PURE__ */ jsxRuntime.jsx(
+                    MultiValueChips,
+                    {
+                      options: selectedOptions,
+                      disabled,
+                      onRemove: handleRemoveChip
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles4.triggerText, { color: triggerTextColor }], numberOfLines: 1, children: multiple ? placeholder : singleLabel }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles4.iconSlot, isOpen && styles4.chevronOpen], children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, { size: ICON_SIZE, color: colors.grey100 }) })
+                ]
+              }
+            ),
+            isOpen ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles4.menu, children: [
+              showSearch ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles4.searchField, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles4.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, { size: ICON_SIZE, color: colors.grey100 }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  reactNative.TextInput,
+                  {
+                    ref: searchInputRef,
+                    value: searchQuery,
+                    onChangeText: handleSearchChange,
+                    editable: !disabled,
+                    placeholder: searchPlaceholder,
+                    placeholderTextColor: colors.grey100,
+                    style: [
+                      styles4.searchInput,
+                      reactNative.Platform.OS === "web" ? styles4.searchInputWeb : null,
+                      reactNative.Platform.OS === "android" ? styles4.searchInputAndroid : null
+                    ],
+                    accessibilityLabel: searchPlaceholder
+                  }
+                )
+              ] }) : null,
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                reactNative.ScrollView,
+                {
+                  style: styles4.optionList,
+                  contentContainerStyle: styles4.optionListContent,
+                  keyboardShouldPersistTaps: "handled",
+                  showsVerticalScrollIndicator: false,
+                  children: [
+                    loading ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles4.statusRow, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles4.statusText, children: "Loading..." }) }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles4.statusRow, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.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__ */ jsxRuntime.jsxs(
+                        reactNative.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__ */ jsxRuntime.jsx(reactNative.View, { pointerEvents: "none", style: styles4.itemCheckbox, children: /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { value: isSelected, variant: "light" }) }) : null,
+                            /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles4.itemLabel, numberOfLines: 1, children: option.label })
+                          ]
+                        },
+                        option.value
+                      );
+                    })
+                  ]
+                }
+              )
+            ] }) : null
+          ] }),
+          showHint && hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles4.hint, { color: hintColor }], children: hint }) : null
+        ]
+      }
+    );
+  }
+);
+var styles4 = reactNative.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,
+    ...reactNative.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 = react.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 = react.useRef(null);
+  const inputRef = react.useRef(null);
+  const setInputRef = react.useMemo(() => mergeRefs(inputRef, forwardedRef), [forwardedRef]);
+  const [focused, setFocused] = react.useState(false);
+  const [uncontrolledValue, setUncontrolledValue] = react.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__ */ jsxRuntime.jsxs(reactNative.View, { ref: rootRef, style: [styles5.root, disabled && styles5.disabled, style], children: [
+    showLabel && label ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles5.label, { color: chrome.labelColor }], children: label }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.View,
+      {
+        style: [
+          styles5.field,
+          {
+            borderColor: chrome.borderColor,
+            backgroundColor: chrome.backgroundColor
+          },
+          fieldStyle
+        ],
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.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 },
+              reactNative.Platform.OS === "web" ? styles5.inputWeb : null,
+              reactNative.Platform.OS === "android" ? styles5.inputAndroid : null,
+              inputStyle
+            ],
+            accessibilityLabel: resolvedAccessibilityLabel,
+            accessibilityState: { disabled }
+          }
+        )
+      }
+    ),
+    showHint && hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles5.hint, { color: chrome.hintColor }], children: hint }) : null
+  ] });
+});
+var styles5 = reactNative.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 = react.forwardRef(function Toggle2({
+  value,
+  defaultValue = false,
+  onValueChange,
+  disabled = false,
+  label,
+  children,
+  accessibilityLabel,
+  style,
+  labelStyle,
+  className,
+  hitSlop = 10,
+  ...rest
+}, forwardedRef) {
+  const containerRef = react.useRef(null);
+  const isControlled = typeof value === "boolean";
+  const [uncontrolledValue, setUncontrolledValue] = react.useState(defaultValue);
+  const isActive = isControlled ? value : uncontrolledValue;
+  const labelContent = children ?? label;
+  const resolvedAccessibilityLabel = accessibilityLabel ?? (typeof labelContent === "string" ? labelContent : void 0);
+  const setContainerRef = react.useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
+  const progress = react.useRef(new reactNative.Animated.Value(isActive ? 1 : 0)).current;
+  useApplyWebClassName(containerRef, className);
+  react.useEffect(() => {
+    reactNative.Animated.timing(progress, {
+      toValue: isActive ? 1 : 0,
+      duration: ANIMATION_DURATION,
+      easing: reactNative.Easing.out(reactNative.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__ */ jsxRuntime.jsxs(
+    reactNative.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__ */ jsxRuntime.jsx(
+          reactNative.Animated.View,
+          {
+            style: [
+              styles6.track,
+              {
+                backgroundColor: trackBackgroundColor
+              }
+            ],
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              reactNative.Animated.View,
+              {
+                style: [
+                  styles6.thumb,
+                  {
+                    transform: [{ translateX: thumbTranslateX }]
+                  }
+                ]
+              }
+            )
+          }
+        ),
+        labelContent != null && labelContent !== false ? typeof labelContent === "string" || typeof labelContent === "number" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles6.label, labelStyle], children: labelContent }) : labelContent : null
+      ]
+    }
+  );
+});
+var styles6 = reactNative.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
+  }
+});
 
 exports.ArrowRightIcon = ArrowRightIcon;
 exports.BagIcon = BagIcon;
@@ -810,6 +1958,9 @@ exports.BuildingIcon = BuildingIcon;
 exports.Button = Button;
 exports.CameraIcon = CameraIcon;
 exports.CheckBadgeIcon = CheckBadgeIcon;
+exports.CheckIcon = CheckIcon;
+exports.Checkbox = Checkbox;
+exports.ChevronDownIcon = ChevronDownIcon;
 exports.ClockIcon = ClockIcon;
 exports.FacebookIcon = FacebookIcon;
 exports.HomeIcon = HomeIcon;
@@ -821,7 +1972,11 @@ exports.LinkedInIcon = LinkedInIcon;
 exports.MailIcon = MailIcon;
 exports.NavigateIcon = NavigateIcon;
 exports.PhoneIcon = PhoneIcon;
+exports.SearchIcon = SearchIcon;
+exports.Select = Select;
 exports.ShowIcon = ShowIcon;
+exports.Textarea = Textarea;
+exports.Toggle = Toggle;
 exports.UserIcon = UserIcon;
 exports.buttonTypography = buttonTypography;
 exports.colors = colors;
@@ -833,5 +1988,7 @@ exports.iconGroups = iconGroups;
 exports.iconNames = iconNames;
 exports.icons = icons;
 exports.inputTypography = inputTypography;
+exports.selectTypography = selectTypography;
+exports.textareaTypography = textareaTypography;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map