npm - @xsolla/xui-select - Versions diffs - 0.156.0 → 0.157.0-pr302.1779365565 - Mend

@xsolla/xui-select 0.156.0 → 0.157.0-pr302.1779365565

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/README.md CHANGED Viewed

@@ -13,17 +13,17 @@ npm install @xsolla/xui-select
 ### Basic Select
 ```tsx
-import * as React from 'react';
-import { Select } from '@xsolla/xui-select';
+import * as React from "react";
+import { Select } from "@xsolla/xui-select";
 export default function BasicSelect() {
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = React.useState("");
   return (
     <Select
       value={value}
       onChange={setValue}
-      options={['Option 1', 'Option 2', 'Option 3']}
+      options={["Option 1", "Option 2", "Option 3"]}
       placeholder="Select an option"
     />
   );
@@ -33,18 +33,24 @@ export default function BasicSelect() {
 ### Select with Label
 ```tsx
-import * as React from 'react';
-import { Select } from '@xsolla/xui-select';
+import * as React from "react";
+import { Select } from "@xsolla/xui-select";
 export default function LabeledSelect() {
-  const [country, setCountry] = React.useState('');
+  const [country, setCountry] = React.useState("");
   return (
     <Select
       label="Country"
       value={country}
       onChange={setCountry}
-      options={['United States', 'Canada', 'United Kingdom', 'Germany', 'France']}
+      options={[
+        "United States",
+        "Canada",
+        "United Kingdom",
+        "Germany",
+        "France",
+      ]}
       placeholder="Select a country"
     />
   );
@@ -54,16 +60,16 @@ export default function LabeledSelect() {
 ### Select with Object Options
 ```tsx
-import * as React from 'react';
-import { Select } from '@xsolla/xui-select';
+import * as React from "react";
+import { Select } from "@xsolla/xui-select";
 export default function ObjectOptionsSelect() {
-  const [status, setStatus] = React.useState('');
+  const [status, setStatus] = React.useState("");
   const options = [
-    { label: 'Active', value: 'active' },
-    { label: 'Pending', value: 'pending' },
-    { label: 'Inactive', value: 'inactive' },
+    { label: "Active", value: "active" },
+    { label: "Pending", value: "pending" },
+    { label: "Inactive", value: "inactive" },
   ];
   return (
@@ -81,14 +87,14 @@ export default function ObjectOptionsSelect() {
 ### Select Sizes
 ```tsx
-import * as React from 'react';
-import { Select } from '@xsolla/xui-select';
+import * as React from "react";
+import { Select } from "@xsolla/xui-select";
 export default function SelectSizes() {
-  const options = ['Small', 'Medium', 'Large'];
+  const options = ["Small", "Medium", "Large"];
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
       <Select size="xs" options={options} placeholder="Extra Small" />
       <Select size="sm" options={options} placeholder="Small" />
       <Select size="md" options={options} placeholder="Medium (default)" />
@@ -102,15 +108,15 @@ export default function SelectSizes() {
 ### Select with Icons
 ```tsx
-import * as React from 'react';
-import { Select } from '@xsolla/xui-select';
-import { Globe } from '@xsolla/xui-icons-base';
+import * as React from "react";
+import { Select } from "@xsolla/xui-select";
+import { Globe } from "@xsolla/xui-icons-base";
 export default function SelectWithIcons() {
   return (
     <Select
       iconLeft={<Globe />}
-      options={['English', 'Spanish', 'French', 'German']}
+      options={["English", "Spanish", "French", "German"]}
       placeholder="Select language"
     />
   );
@@ -122,20 +128,20 @@ export default function SelectWithIcons() {
 Import the component and use it directly:
 ```jsx
-import { Select } from '@xsolla/xui-select';
+import { Select } from "@xsolla/xui-select";
 <Select
-  label="Field Label"           // Optional label above select
-  value={value}                 // Controlled selected value
-  onChange={setValue}           // Value change handler
-  options={['A', 'B', 'C']}     // Array of options (strings or objects)
-  placeholder="Select..."       // Placeholder text
-  iconLeft={<Icon />}           // Optional left icon
-  iconRight={<Icon />}          // Optional right icon (default: ChevronDown)
-  filled                        // Whether to show filled background
-  state="error"                 // State: "default" | "disable" | "error"
-  errorMessage="Error message"  // Error message (shown when state="error")
-/>
+  label="Field Label" // Optional label above select
+  value={value} // Controlled selected value
+  onChange={setValue} // Value change handler
+  options={["A", "B", "C"]} // Array of options (strings or objects)
+  placeholder="Select..." // Placeholder text
+  iconLeft={<Icon />} // Optional left icon
+  iconRight={<Icon />} // Optional right icon (default: ChevronDown)
+  filled // Whether to show filled background
+  state="error" // State: "default" | "disable" | "error"
+  errorMessage="Error message" // Error message (shown when state="error")
+/>;
 ```
 ## Examples
@@ -143,8 +149,8 @@ import { Select } from '@xsolla/xui-select';
 ### Error State
 ```tsx
-import * as React from 'react';
-import { Select } from '@xsolla/xui-select';
+import * as React from "react";
+import { Select } from "@xsolla/xui-select";
 export default function ErrorSelect() {
   return (
@@ -152,7 +158,7 @@ export default function ErrorSelect() {
       label="Required Field"
       state="error"
       errorMessage="Please select an option"
-      options={['Option 1', 'Option 2', 'Option 3']}
+      options={["Option 1", "Option 2", "Option 3"]}
       placeholder="Select an option"
     />
   );
@@ -162,8 +168,8 @@ export default function ErrorSelect() {
 ### Disabled Select
 ```tsx
-import * as React from 'react';
-import { Select } from '@xsolla/xui-select';
+import * as React from "react";
+import { Select } from "@xsolla/xui-select";
 export default function DisabledSelect() {
   return (
@@ -171,7 +177,7 @@ export default function DisabledSelect() {
       label="Disabled Field"
       value="Option 1"
       state="disable"
-      options={['Option 1', 'Option 2', 'Option 3']}
+      options={["Option 1", "Option 2", "Option 3"]}
     />
   );
 }
@@ -180,14 +186,14 @@ export default function DisabledSelect() {
 ### Unfilled/Transparent Background
 ```tsx
-import * as React from 'react';
-import { Select } from '@xsolla/xui-select';
+import * as React from "react";
+import { Select } from "@xsolla/xui-select";
 export default function UnfilledSelect() {
   return (
     <Select
       filled={false}
-      options={['Option 1', 'Option 2', 'Option 3']}
+      options={["Option 1", "Option 2", "Option 3"]}
       placeholder="Transparent background"
     />
   );
@@ -197,16 +203,16 @@ export default function UnfilledSelect() {
 ### Icon Only Select
 ```tsx
-import * as React from 'react';
-import { Select } from '@xsolla/xui-select';
-import { Settings } from '@xsolla/xui-icons';
+import * as React from "react";
+import { Select } from "@xsolla/xui-select";
+import { Settings } from "@xsolla/xui-icons";
 export default function IconOnlySelect() {
   return (
     <Select
       iconOnly
       iconLeft={<Settings />}
-      options={['Settings', 'Preferences', 'Advanced']}
+      options={["Settings", "Preferences", "Advanced"]}
     />
   );
 }
@@ -215,41 +221,43 @@ export default function IconOnlySelect() {
 ### Form with Select
 ```tsx
-import * as React from 'react';
-import { Select } from '@xsolla/xui-select';
-import { Input } from '@xsolla/xui-input';
-import { Button } from '@xsolla/xui-button';
+import * as React from "react";
+import { Select } from "@xsolla/xui-select";
+import { Input } from "@xsolla/xui-input";
+import { Button } from "@xsolla/xui-button";
 export default function FormWithSelect() {
   const [form, setForm] = React.useState({
-    name: '',
-    category: '',
-    priority: '',
+    name: "",
+    category: "",
+    priority: "",
   });
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 16, width: 300 }}>
+    <div
+      style={{ display: "flex", flexDirection: "column", gap: 16, width: 300 }}
+    >
       <Input
         label="Task Name"
         value={form.name}
-        onChangeText={(name) => setForm(prev => ({ ...prev, name }))}
+        onChangeText={(name) => setForm((prev) => ({ ...prev, name }))}
         placeholder="Enter task name"
       />
       <Select
         label="Category"
         value={form.category}
-        onChange={(category) => setForm(prev => ({ ...prev, category }))}
-        options={['Development', 'Design', 'Marketing', 'Sales']}
+        onChange={(category) => setForm((prev) => ({ ...prev, category }))}
+        options={["Development", "Design", "Marketing", "Sales"]}
         placeholder="Select category"
       />
       <Select
         label="Priority"
         value={form.priority}
-        onChange={(priority) => setForm(prev => ({ ...prev, priority }))}
+        onChange={(priority) => setForm((prev) => ({ ...prev, priority }))}
         options={[
-          { label: 'High', value: 'high' },
-          { label: 'Medium', value: 'medium' },
-          { label: 'Low', value: 'low' },
+          { label: "High", value: "high" },
+          { label: "Medium", value: "medium" },
+          { label: "Low", value: "low" },
         ]}
         placeholder="Select priority"
       />
@@ -267,33 +275,34 @@ The main select component. Renders a button trigger with dropdown menu.
 **Select Props:**
-| Prop | Type | Default | Description |
-| :--- | :--- | :------ | :---------- |
-| value | `string` | - | The controlled selected value. |
-| placeholder | `string` | `"Select"` | Placeholder text when no value selected. |
-| onPress | `() => void` | - | Callback when select trigger is pressed. |
-| size | `"xl" \| "lg" \| "md" \| "sm" \| "xs"` | `"md"` | The size of the select. |
-| state | `"default" \| "hover" \| "focus" \| "disable" \| "error"` | `"default"` | The visual state of the select. |
-| label | `string` | - | Label text displayed above the select. |
-| disabled | `boolean` | `false` | Whether the select is disabled. Also triggered when `state="disable"`. |
-| errorMessage | `string` | - | Error message displayed below the select (also sets error styling). |
-| iconLeft | `ReactNode` | - | Icon displayed on the left side. |
-| iconRight | `ReactNode` | `<ChevronDown />` | Icon displayed on the right side. |
-| filled | `boolean` | `true` | Whether to show filled background. |
-| iconOnly | `boolean` | `false` | Whether to show only icon without text. |
-| options | `(string \| SelectOption)[]` | `[]` | Array of options to display. |
-| onChange | `(value: string) => void` | - | Callback when value changes. |
-| searchable | `boolean` | `false` | Whether to show a search input in the dropdown. |
-| searchPlaceholder | `string` | `"Search"` | Placeholder text for the search input. |
-| noOptionsMessage | `string` | `"No results"` | Message shown when no options match the search. |
-| maxHeight | `number` | `300` | Maximum height of the dropdown in pixels. |
+| Prop              | Type                                                      | Default           | Description                                                                                                   |
+| :---------------- | :-------------------------------------------------------- | :---------------- | :------------------------------------------------------------------------------------------------------------ |
+| `testID`          | `string`                                                  | —                 | Test ID for testing frameworks. On web this renders as `data-testid`; on React Native it renders as `testID`. |
+| value             | `string`                                                  | -                 | The controlled selected value.                                                                                |
+| placeholder       | `string`                                                  | `"Select"`        | Placeholder text when no value selected.                                                                      |
+| onPress           | `() => void`                                              | -                 | Callback when select trigger is pressed.                                                                      |
+| size              | `"xl" \| "lg" \| "md" \| "sm" \| "xs"`                    | `"md"`            | The size of the select.                                                                                       |
+| state             | `"default" \| "hover" \| "focus" \| "disable" \| "error"` | `"default"`       | The visual state of the select.                                                                               |
+| label             | `string`                                                  | -                 | Label text displayed above the select.                                                                        |
+| disabled          | `boolean`                                                 | `false`           | Whether the select is disabled. Also triggered when `state="disable"`.                                        |
+| errorMessage      | `string`                                                  | -                 | Error message displayed below the select (also sets error styling).                                           |
+| iconLeft          | `ReactNode`                                               | -                 | Icon displayed on the left side.                                                                              |
+| iconRight         | `ReactNode`                                               | `<ChevronDown />` | Icon displayed on the right side.                                                                             |
+| filled            | `boolean`                                                 | `true`            | Whether to show filled background.                                                                            |
+| iconOnly          | `boolean`                                                 | `false`           | Whether to show only icon without text.                                                                       |
+| options           | `(string \| SelectOption)[]`                              | `[]`              | Array of options to display.                                                                                  |
+| onChange          | `(value: string) => void`                                 | -                 | Callback when value changes.                                                                                  |
+| searchable        | `boolean`                                                 | `false`           | Whether to show a search input in the dropdown.                                                               |
+| searchPlaceholder | `string`                                                  | `"Search"`        | Placeholder text for the search input.                                                                        |
+| noOptionsMessage  | `string`                                                  | `"No results"`    | Message shown when no options match the search.                                                               |
+| maxHeight         | `number`                                                  | `300`             | Maximum height of the dropdown in pixels.                                                                     |
 **SelectOption Type:**
 ```typescript
 interface SelectOption {
-  label: string;     // Display text
-  value: any;        // Value to be selected
+  label: string; // Display text
+  value: any; // Value to be selected
   disabled?: boolean; // Whether this option is disabled
 }
 ```
@@ -302,13 +311,13 @@ interface SelectOption {
 The Select component works on React Native with the following differences:
-| Feature | Web | React Native |
-|---------|-----|-------------|
-| Searchable dropdown | Supported (`searchable` prop) | **Not available** — prop is ignored |
-| Dropdown shadow | CSS `box-shadow` | Android `elevation: 4` |
-| Scroll behavior | `overflowY: auto` | Native `ScrollView` |
-| Cursor styles | `pointer` / `not-allowed` | Ignored |
-| Click-outside dismiss | `document.addEventListener` | Not active (guarded by `isNative`) |
+| Feature               | Web                           | React Native                        |
+| --------------------- | ----------------------------- | ----------------------------------- |
+| Searchable dropdown   | Supported (`searchable` prop) | **Not available** — prop is ignored |
+| Dropdown shadow       | CSS `box-shadow`              | Android `elevation: 4`              |
+| Scroll behavior       | `overflowY: auto`             | Native `ScrollView`                 |
+| Cursor styles         | `pointer` / `not-allowed`     | Ignored                             |
+| Click-outside dismiss | `document.addEventListener`   | Not active (guarded by `isNative`)  |
 ## Accessibility

package/native/index.d.mts CHANGED Viewed

@@ -25,6 +25,8 @@ interface SelectProps extends ThemeOverrideProps {
     searchPlaceholder?: string;
     noOptionsMessage?: string;
     maxHeight?: number;
+    /** Test ID for testing frameworks */
+    testID?: string;
 }
 declare const Select: React.FC<SelectProps>;

package/native/index.d.ts CHANGED Viewed

@@ -25,6 +25,8 @@ interface SelectProps extends ThemeOverrideProps {
     searchPlaceholder?: string;
     noOptionsMessage?: string;
     maxHeight?: number;
+    /** Test ID for testing frameworks */
+    testID?: string;
 }
 declare const Select: React.FC<SelectProps>;

package/native/index.js CHANGED Viewed

@@ -238,6 +238,8 @@ var Text = ({
   numberOfLines,
   id,
   role,
+  testID,
+  "data-testid": dataTestId,
   style: styleProp,
   ...props
 }) => {
@@ -267,7 +269,7 @@ var Text = ({
     {
       style: baseStyle,
       numberOfLines,
-      testID: id,
+      testID: dataTestId || testID || id,
       accessibilityRole,
       children
     }
@@ -278,7 +280,13 @@ var Text = ({
 var import_react = __toESM(require("react"));
 var import_react_native3 = require("react-native");
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var Icon = ({ children, color, size }) => {
+var Icon = ({
+  children,
+  color,
+  size,
+  testID,
+  "data-testid": dataTestId
+}) => {
   const style = {
     width: typeof size === "number" ? size : void 0,
     height: typeof size === "number" ? size : void 0,
@@ -295,7 +303,7 @@ var Icon = ({ children, color, size }) => {
     }
     return child;
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { style, children: childrenWithProps });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { style, testID: dataTestId || testID, children: childrenWithProps });
 };
 // ../../foundation/primitives-native/src/index.tsx
@@ -325,6 +333,7 @@ var Select = ({
   searchPlaceholder = "Search",
   noOptionsMessage = "No results",
   maxHeight = 300,
+  testID,
   themeMode,
   themeProductContext
 }) => {
@@ -432,6 +441,7 @@ var Select = ({
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     Box,
     {
+      testID,
       ref: containerRef,
       flexDirection: "column",
       gap: sizeStyles.fieldGap,
@@ -591,6 +601,7 @@ var Select = ({
                     return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                       Box,
                       {
+                        testID,
                         ref: isSelected ? selectedItemRef : void 0,
                         paddingVertical: sizeStyles.paddingVertical,
                         paddingHorizontal: sizeStyles.paddingHorizontal,

package/native/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/index.tsx","../../src/Select.tsx","../../../../foundation/primitives-native/src/Box.tsx","../../../../foundation/primitives-native/src/Text.tsx","../../../../foundation/primitives-native/src/Icon.tsx","../../../../foundation/primitives-native/src/index.tsx"],"sourcesContent":["export * from \"./Select\";\n","import React, { useState, useRef, useEffect } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text, Icon, isWeb, isNative } from \"@xsolla/xui-primitives\";\nimport { useResolvedTheme, type ThemeOverrideProps } from \"@xsolla/xui-core\";\nimport {\n ChevronDown,\n ChevronUp,\n ExclamationMarkCr,\n Search as SearchIcon,\n} from \"@xsolla/xui-icons-base\";\n\nexport interface SelectOption {\n label: string;\n value: any;\n disabled?: boolean;\n}\n\nexport interface SelectProps extends ThemeOverrideProps {\n value?: string;\n placeholder?: string;\n onPress?: () => void;\n size?: \"xl\" \| \"lg\" \| \"md\" \| \"sm\" \| \"xs\";\n state?: \"default\" \| \"hover\" \| \"focus\" \| \"disable\" \| \"error\";\n disabled?: boolean;\n label?: string;\n errorMessage?: string;\n iconLeft?: React.ReactNode;\n iconRight?: React.ReactNode;\n filled?: boolean;\n iconOnly?: boolean;\n options?: (string \| SelectOption)[];\n onChange?: (value: string) => void;\n searchable?: boolean;\n searchPlaceholder?: string;\n noOptionsMessage?: string;\n maxHeight?: number;\n}\n\nexport const Select: React.FC<SelectProps> = ({\n value,\n placeholder = \"Select\",\n onPress,\n size = \"md\",\n state: externalState,\n disabled = false,\n label,\n errorMessage,\n iconLeft,\n iconRight,\n filled = true,\n iconOnly = false,\n options = [],\n onChange,\n searchable = false,\n searchPlaceholder = \"Search\",\n noOptionsMessage = \"No results\",\n maxHeight = 300,\n themeMode,\n themeProductContext,\n}) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n const [isOpen, setIsOpen] = useState(false);\n const [selectedValue, setSelectedValue] = useState<string \| undefined>(value);\n const [searchValue, setSearchValue] = useState(\"\");\n const containerRef = useRef<HTMLDivElement>(null);\n const dropdownRef = useRef<HTMLDivElement>(null);\n const selectedItemRef = useRef<HTMLDivElement>(null);\n const searchInputRef = useRef<HTMLInputElement>(null);\n\n const isDisable = externalState === \"disable\" \|\| disabled;\n const isError = externalState === \"error\" \|\| !!errorMessage;\n const isFocus = externalState === \"focus\" \|\| isOpen;\n\n // Sync selectedValue with value prop\n React.useEffect(() => {\n if (value !== undefined) {\n setSelectedValue(value);\n }\n }, [value]);\n\n // Auto-scroll to selected item when dropdown opens (show at top)\n useEffect(() => {\n if (isFocus && selectedItemRef.current && dropdownRef.current) {\n // Use setTimeout to ensure DOM has rendered\n const timeoutId = setTimeout(() => {\n const selectedItem = selectedItemRef.current;\n if (selectedItem && isWeb) {\n selectedItem.scrollIntoView({ block: \"nearest\" });\n }\n }, 0);\n return () => clearTimeout(timeoutId);\n }\n }, [isFocus]);\n\n // Focus search input when dropdown opens\n useEffect(() => {\n if (isFocus && searchable) {\n searchInputRef.current?.focus();\n }\n }, [isFocus, searchable]);\n\n // Reset search when dropdown closes\n useEffect(() => {\n if (!isFocus) {\n setSearchValue(\"\");\n }\n }, [isFocus]);\n\n // Close dropdown when clicking outside (web only)\n useEffect(() => {\n if (isNative \|\| !isOpen) return;\n\n const handleClickOutside = (event: MouseEvent) => {\n if (\n containerRef.current &&\n !containerRef.current.contains(event.target as Node)\n ) {\n setIsOpen(false);\n }\n };\n\n document.addEventListener(\"mousedown\", handleClickOutside);\n return () => document.removeEventListener(\"mousedown\", handleClickOutside);\n }, [isOpen]);\n\n const getOptionLabel = (option: string \| SelectOption) => {\n if (typeof option === \"string\") return option;\n return option.label;\n };\n\n const getOptionValue = (option: string \| SelectOption) => {\n if (typeof option === \"string\") return option;\n return option.value;\n };\n\n const getOptionDisabled = (option: string \| SelectOption) => {\n if (typeof option === \"string\") return false;\n return option.disabled \|\| false;\n };\n\n // Filter options based on search value\n const filteredOptions =\n searchable && searchValue\n ? options.filter((option) => {\n const label = getOptionLabel(option);\n return label.toLowerCase().includes(searchValue.toLowerCase());\n })\n : options;\n\n // 1. Resolve Config from Theme\n const sizeStyles = theme.sizing.input(size);\n const inputColors = theme.colors.control.input;\n\n const handlePress = () => {\n if (!isDisable) {\n if (onPress) onPress();\n setIsOpen(!isOpen);\n }\n };\n\n const handleSelect = (option: string \| SelectOption) => {\n if (getOptionDisabled(option)) return;\n const val = getOptionValue(option);\n setSelectedValue(val);\n setIsOpen(false);\n if (onChange) onChange(val);\n };\n\n // Resolve background and border colors based on state\n const isHover = externalState === \"hover\";\n let backgroundColor = inputColors.bg;\n let borderColor = inputColors.border;\n\n if (isDisable) {\n backgroundColor = inputColors.bgDisable;\n borderColor = inputColors.borderDisable;\n } else if (isFocus) {\n backgroundColor = theme.colors.control.focus.bg;\n borderColor = isError\n ? theme.colors.border.alert\n : theme.colors.border.brand;\n } else if (isError) {\n borderColor = theme.colors.border.alert;\n } else if (isHover) {\n backgroundColor = inputColors.bgHover;\n borderColor = inputColors.borderHover;\n }\n\n // Handle filled override if provided\n if (filled === false && !isFocus && !isError && !isHover) {\n backgroundColor = \"transparent\";\n }\n\n const currentLabel = selectedValue\n ? getOptionLabel(\n options.find((o) => getOptionValue(o) === selectedValue) \|\|\n selectedValue\n )\n : placeholder;\n\n const textColor = isDisable\n ? inputColors.textDisable\n : selectedValue\n ? inputColors.text\n : inputColors.placeholder;\n const iconColor = isDisable ? inputColors.textDisable : inputColors.text;\n\n return (\n <Box\n ref={containerRef}\n flexDirection=\"column\"\n gap={sizeStyles.fieldGap}\n width=\"100%\"\n position=\"relative\"\n >\n {label && (\n <Text\n color={theme.colors.content.secondary}\n fontSize={sizeStyles.fontSize - 2}\n fontWeight=\"500\"\n >\n {label}\n </Text>\n )}\n <Box\n onPress={handlePress}\n backgroundColor={backgroundColor}\n borderColor={borderColor}\n borderWidth={borderColor !== \"transparent\" ? 1 : 0}\n borderRadius={sizeStyles.radius}\n height={sizeStyles.height}\n width={iconOnly ? sizeStyles.height : \"100%\"}\n paddingHorizontal={iconOnly ? 0 : sizeStyles.paddingHorizontal}\n flexDirection=\"row\"\n alignItems=\"center\"\n justifyContent={iconOnly ? \"center\" : \"flex-start\"}\n gap={iconOnly ? 4 : 12}\n position=\"relative\"\n hoverStyle={\n !isDisable && !isFocus && !isError\n ? {\n backgroundColor: inputColors.bgHover,\n borderColor: inputColors.borderHover,\n }\n : undefined\n }\n >\n {iconLeft && (\n <Box alignItems=\"center\" justifyContent=\"center\">\n <Icon size={sizeStyles.iconSize} color={iconColor}>\n {iconLeft}\n </Icon>\n </Box>\n )}\n\n {!iconOnly && (\n <Box flex={1} height=\"100%\" justifyContent=\"center\">\n <Text\n color={textColor}\n fontSize={sizeStyles.fontSize}\n numberOfLines={1}\n >\n {currentLabel}\n </Text>\n </Box>\n )}\n\n {/* Trailing controls /}\n <Box flexDirection=\"row\" alignItems=\"center\" gap={4}>\n {/ Error icon /}\n {isError && (\n <Icon\n size={sizeStyles.iconSize}\n color={theme.colors.content.alert.primary}\n >\n <ExclamationMarkCr />\n </Icon>\n )}\n\n {/ Right icon or default caret /}\n <Icon size={sizeStyles.iconSize} color={iconColor}>\n {iconRight !== undefined ? (\n iconRight\n ) : isFocus ? (\n <ChevronUp />\n ) : (\n <ChevronDown />\n )}\n </Icon>\n </Box>\n </Box>\n\n {/ Dropdown Menu /}\n {isFocus && options.length > 0 && (\n <Box\n ref={dropdownRef}\n position=\"absolute\"\n top={\n sizeStyles.height +\n (label ? sizeStyles.fontSize + sizeStyles.fieldGap : 0) +\n sizeStyles.fieldGap\n }\n width=\"100%\"\n backgroundColor={theme.colors.background.secondary}\n borderColor={theme.colors.border.secondary}\n borderWidth={1}\n borderRadius={theme.radius.button}\n style={{\n zIndex: 1000,\n ...(isNative\n ? { elevation: 4 }\n : { boxShadow: \"0 4px 12px rgba(0,0,0,0.1)\" }),\n minWidth: iconOnly ? sizeStyles.height 3 : undefined,\n }}\n >\n {/* Search Input - Outside scrollable area (web only) /}\n {searchable && !isNative && (\n <Box\n paddingHorizontal={sizeStyles.paddingHorizontal}\n paddingVertical={sizeStyles.paddingVertical}\n borderBottomWidth={1}\n borderColor={theme.colors.border.secondary}\n >\n <Box\n flexDirection=\"row\"\n alignItems=\"center\"\n gap={sizeStyles.paddingHorizontal / 2}\n paddingHorizontal={4}\n >\n <Icon\n size={sizeStyles.iconSize - 2}\n color={inputColors.placeholder}\n >\n <SearchIcon />\n </Icon>\n <Box\n as=\"input\"\n ref={searchInputRef}\n flex={1}\n type=\"text\"\n value={searchValue}\n onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\n setSearchValue(e.target.value)\n }\n placeholder={searchPlaceholder}\n style={{\n border: \"none\",\n outline: \"none\",\n background: \"transparent\",\n color: inputColors.text,\n fontSize: sizeStyles.fontSize,\n width: \"100%\",\n }}\n />\n </Box>\n </Box>\n )}\n\n {/ Options List - Scrollable /}\n <Box\n paddingVertical={4}\n overflow=\"scroll\"\n style={{\n maxHeight: searchable ? maxHeight - 60 : maxHeight,\n ...(isWeb ? { overflowY: \"auto\" } : {}),\n }}\n >\n {filteredOptions.length === 0 ? (\n <Box\n paddingVertical={sizeStyles.paddingVertical 2}\n paddingHorizontal={sizeStyles.paddingHorizontal}\n alignItems=\"center\"\n >\n <Text\n color={theme.colors.content.tertiary}\n fontSize={sizeStyles.fontSize}\n >\n {noOptionsMessage}\n </Text>\n </Box>\n ) : (\n filteredOptions.map((option, index) => {\n const optionValue = getOptionValue(option);\n const optionLabel = getOptionLabel(option);\n const isOptionDisabled = getOptionDisabled(option);\n const isSelected = optionValue === selectedValue;\n const brandColors = theme.colors.control.brand.primary;\n const contentColors = theme.colors.content;\n\n return (\n <Box\n key={index}\n ref={isSelected ? selectedItemRef : undefined}\n paddingVertical={sizeStyles.paddingVertical}\n paddingHorizontal={sizeStyles.paddingHorizontal}\n onPress={\n isOptionDisabled ? undefined : () => handleSelect(option)\n }\n flexDirection=\"row\"\n alignItems=\"center\"\n justifyContent=\"space-between\"\n backgroundColor={\n isSelected ? brandColors.bg : \"transparent\"\n }\n style={{\n ...(isWeb\n ? {\n cursor: isOptionDisabled\n ? \"not-allowed\"\n : \"pointer\",\n }\n : {}),\n opacity: isOptionDisabled ? 0.5 : 1,\n }}\n hoverStyle={\n !isSelected && !isOptionDisabled\n ? {\n backgroundColor: theme.colors.control.input.bgHover,\n }\n : undefined\n }\n >\n <Text\n color={\n isSelected\n ? contentColors.on.brand\n : theme.colors.content.secondary\n }\n fontSize={sizeStyles.fontSize}\n fontWeight=\"400\"\n >\n {optionLabel}\n </Text>\n </Box>\n );\n })\n )}\n </Box>\n </Box>\n )}\n\n {isError && errorMessage && (\n <Text\n color={theme.colors.content.alert.primary}\n fontSize={sizeStyles.fontSize - 2}\n style={{ lineHeight: sizeStyles.lineHeight + \"px\" }}\n >\n {errorMessage}\n </Text>\n )}\n </Box>\n );\n};\n","import React from \"react\";\nimport {\n View,\n Pressable,\n Image,\n ViewStyle,\n ImageStyle,\n DimensionValue,\n AnimatableNumericValue,\n} from \"react-native\";\nimport { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Box: React.FC<BoxProps> = ({\n children,\n onPress,\n onLayout,\n onMoveShouldSetResponder,\n onResponderGrant,\n onResponderMove,\n onResponderRelease,\n onResponderTerminate,\n backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius,\n borderStyle,\n height,\n padding,\n paddingHorizontal,\n paddingVertical,\n margin,\n marginTop,\n marginBottom,\n marginLeft,\n marginRight,\n flexDirection,\n alignItems,\n justifyContent,\n position,\n top,\n bottom,\n left,\n right,\n width,\n minWidth,\n minHeight,\n maxWidth,\n maxHeight,\n flex,\n overflow,\n zIndex,\n hoverStyle,\n pressStyle,\n style,\n \"data-testid\": dataTestId,\n testID,\n as,\n src,\n alt,\n ...rest\n}) => {\n const getContainerStyle = (pressed?: boolean): ViewStyle => ({\n backgroundColor:\n pressed && pressStyle?.backgroundColor\n ? pressStyle.backgroundColor\n : backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius: borderRadius as AnimatableNumericValue,\n borderStyle: borderStyle as ViewStyle[\"borderStyle\"],\n overflow,\n zIndex,\n height: height as DimensionValue,\n width: width as DimensionValue,\n minWidth: minWidth as DimensionValue,\n minHeight: minHeight as DimensionValue,\n maxWidth: maxWidth as DimensionValue,\n maxHeight: maxHeight as DimensionValue,\n padding: padding as DimensionValue,\n paddingHorizontal: paddingHorizontal as DimensionValue,\n paddingVertical: paddingVertical as DimensionValue,\n margin: margin as DimensionValue,\n marginTop: marginTop as DimensionValue,\n marginBottom: marginBottom as DimensionValue,\n marginLeft: marginLeft as DimensionValue,\n marginRight: marginRight as DimensionValue,\n flexDirection,\n alignItems,\n justifyContent,\n position: position as ViewStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n flex,\n ...(style as ViewStyle),\n });\n\n const finalTestID = dataTestId \|\| testID;\n\n // Destructure and drop web-only props from rest before passing to RN components\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const {\n role,\n tabIndex,\n onKeyDown,\n onKeyUp,\n \"aria-label\": _ariaLabel,\n \"aria-labelledby\": _ariaLabelledBy,\n \"aria-current\": _ariaCurrent,\n \"aria-disabled\": _ariaDisabled,\n \"aria-live\": _ariaLive,\n className,\n \"data-testid\": _dataTestId,\n ...nativeRest\n } = rest as Record<string, unknown>;\n\n // Handle as=\"img\" for React Native\n if (as === \"img\" && src) {\n const imageStyle: ImageStyle = {\n width: width as DimensionValue,\n height: height as DimensionValue,\n borderRadius: borderRadius as number,\n position: position as ImageStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n ...(style as ImageStyle),\n };\n\n return (\n <Image\n source={{ uri: src }}\n style={imageStyle}\n testID={finalTestID}\n resizeMode=\"cover\"\n {...nativeRest}\n />\n );\n }\n\n if (onPress) {\n return (\n <Pressable\n onPress={onPress}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n style={({ pressed }) => getContainerStyle(pressed)}\n testID={finalTestID}\n {...nativeRest}\n >\n {children}\n </Pressable>\n );\n }\n\n return (\n <View\n style={getContainerStyle()}\n testID={finalTestID}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n {...nativeRest}\n >\n {children}\n </View>\n );\n};\n","import React from \"react\";\nimport {\n Text as RNText,\n TextStyle,\n AccessibilityRole,\n StyleSheet,\n} from \"react-native\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst roleMap: Record<string, AccessibilityRole> = {\n alert: \"alert\",\n heading: \"header\",\n button: \"button\",\n link: \"link\",\n text: \"text\",\n};\n\nconst parseNumericValue = (\n value: string \| number \| undefined\n): number \| undefined => {\n if (value === undefined) return undefined;\n if (typeof value === \"number\") return value;\n const parsed = parseFloat(value);\n return isNaN(parsed) ? undefined : parsed;\n};\n\nexport const Text: React.FC<TextProps> = ({\n children,\n color,\n fontSize,\n fontWeight,\n fontFamily,\n textAlign,\n lineHeight,\n numberOfLines,\n id,\n role,\n style: styleProp,\n ...props\n}) => {\n let resolvedFontFamily = fontFamily\n ? fontFamily.split(\",\")[0].replace(/['\"]/g, \"\").trim()\n : undefined;\n\n if (\n resolvedFontFamily === \"Pilat Wide\" \|\|\n resolvedFontFamily === \"Pilat Wide Bold\" \|\|\n resolvedFontFamily === \"Aktiv Grotesk\"\n ) {\n resolvedFontFamily = undefined;\n }\n\n const incomingStyle = StyleSheet.flatten(styleProp) as TextStyle \| undefined;\n\n const baseStyle: TextStyle = {\n color: color ?? incomingStyle?.color,\n fontSize: typeof fontSize === \"number\" ? fontSize : undefined,\n fontWeight: fontWeight as TextStyle[\"fontWeight\"],\n fontFamily: resolvedFontFamily,\n textDecorationLine: props.textDecoration as TextStyle[\"textDecorationLine\"],\n textAlign: textAlign ?? incomingStyle?.textAlign,\n lineHeight: parseNumericValue(lineHeight ?? incomingStyle?.lineHeight),\n marginTop: parseNumericValue(\n incomingStyle?.marginTop as number \| string \| undefined\n ),\n marginBottom: parseNumericValue(\n incomingStyle?.marginBottom as number \| string \| undefined\n ),\n };\n\n const accessibilityRole = role ? roleMap[role] : undefined;\n\n return (\n <RNText\n style={baseStyle}\n numberOfLines={numberOfLines}\n testID={id}\n accessibilityRole={accessibilityRole}\n >\n {children}\n </RNText>\n );\n};\n","import React from \"react\";\nimport { View, ViewStyle } from \"react-native\";\nimport { IconProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Icon: React.FC<IconProps> = ({ children, color, size }) => {\n const style: ViewStyle = {\n width: typeof size === \"number\" ? size : undefined,\n height: typeof size === \"number\" ? size : undefined,\n alignItems: \"center\",\n justifyContent: \"center\",\n };\n\n // On native, we try to pass the color down to children (like Text primitives)\n // to mimic the CSS inheritance behavior of the web version.\n const childrenWithProps = React.Children.map(children, (child) => {\n if (React.isValidElement(child)) {\n return React.cloneElement(child, {\n color: child.props.color \|\| color,\n // Also pass size if child seems to be an icon that needs it\n size: child.props.size \|\| size,\n });\n }\n return child;\n });\n\n return <View style={style}>{childrenWithProps}</View>;\n};\n","export * from \"./Box\";\nexport * from \"./Text\";\nexport * from \"./Spinner\";\nexport * from \"./Icon\";\nexport * from \"./Divider\";\nexport * from \"./Input\";\nexport * from \"./TextArea\";\nexport * from \"./LinearGradient\";\n\nexport const isWeb = false;\nexport const isNative = true;\n"],"mappings":"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","names":["import_react","import_react_native","import_jsx_runtime","RNText","import_react_native","import_jsx_runtime","React","import_jsx_runtime","React","label","SearchIcon"]}
1	+ {"version":3,"sources":["../../src/index.tsx","../../src/Select.tsx","../../../../foundation/primitives-native/src/Box.tsx","../../../../foundation/primitives-native/src/Text.tsx","../../../../foundation/primitives-native/src/Icon.tsx","../../../../foundation/primitives-native/src/index.tsx"],"sourcesContent":["export * from \"./Select\";\n","import React, { useState, useRef, useEffect } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text, Icon, isWeb, isNative } from \"@xsolla/xui-primitives\";\nimport { useResolvedTheme, type ThemeOverrideProps } from \"@xsolla/xui-core\";\nimport {\n ChevronDown,\n ChevronUp,\n ExclamationMarkCr,\n Search as SearchIcon,\n} from \"@xsolla/xui-icons-base\";\n\nexport interface SelectOption {\n label: string;\n value: any;\n disabled?: boolean;\n}\n\nexport interface SelectProps extends ThemeOverrideProps {\n value?: string;\n placeholder?: string;\n onPress?: () => void;\n size?: \"xl\" \| \"lg\" \| \"md\" \| \"sm\" \| \"xs\";\n state?: \"default\" \| \"hover\" \| \"focus\" \| \"disable\" \| \"error\";\n disabled?: boolean;\n label?: string;\n errorMessage?: string;\n iconLeft?: React.ReactNode;\n iconRight?: React.ReactNode;\n filled?: boolean;\n iconOnly?: boolean;\n options?: (string \| SelectOption)[];\n onChange?: (value: string) => void;\n searchable?: boolean;\n searchPlaceholder?: string;\n noOptionsMessage?: string;\n maxHeight?: number;\n /** Test ID for testing frameworks /\n testID?: string;\n}\n\nexport const Select: React.FC<SelectProps> = ({\n value,\n placeholder = \"Select\",\n onPress,\n size = \"md\",\n state: externalState,\n disabled = false,\n label,\n errorMessage,\n iconLeft,\n iconRight,\n filled = true,\n iconOnly = false,\n options = [],\n onChange,\n searchable = false,\n searchPlaceholder = \"Search\",\n noOptionsMessage = \"No results\",\n maxHeight = 300,\n testID,\n themeMode,\n themeProductContext,\n}) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n const [isOpen, setIsOpen] = useState(false);\n const [selectedValue, setSelectedValue] = useState<string \| undefined>(value);\n const [searchValue, setSearchValue] = useState(\"\");\n const containerRef = useRef<HTMLDivElement>(null);\n const dropdownRef = useRef<HTMLDivElement>(null);\n const selectedItemRef = useRef<HTMLDivElement>(null);\n const searchInputRef = useRef<HTMLInputElement>(null);\n\n const isDisable = externalState === \"disable\" \|\| disabled;\n const isError = externalState === \"error\" \|\| !!errorMessage;\n const isFocus = externalState === \"focus\" \|\| isOpen;\n\n // Sync selectedValue with value prop\n React.useEffect(() => {\n if (value !== undefined) {\n setSelectedValue(value);\n }\n }, [value]);\n\n // Auto-scroll to selected item when dropdown opens (show at top)\n useEffect(() => {\n if (isFocus && selectedItemRef.current && dropdownRef.current) {\n // Use setTimeout to ensure DOM has rendered\n const timeoutId = setTimeout(() => {\n const selectedItem = selectedItemRef.current;\n if (selectedItem && isWeb) {\n selectedItem.scrollIntoView({ block: \"nearest\" });\n }\n }, 0);\n return () => clearTimeout(timeoutId);\n }\n }, [isFocus]);\n\n // Focus search input when dropdown opens\n useEffect(() => {\n if (isFocus && searchable) {\n searchInputRef.current?.focus();\n }\n }, [isFocus, searchable]);\n\n // Reset search when dropdown closes\n useEffect(() => {\n if (!isFocus) {\n setSearchValue(\"\");\n }\n }, [isFocus]);\n\n // Close dropdown when clicking outside (web only)\n useEffect(() => {\n if (isNative \|\| !isOpen) return;\n\n const handleClickOutside = (event: MouseEvent) => {\n if (\n containerRef.current &&\n !containerRef.current.contains(event.target as Node)\n ) {\n setIsOpen(false);\n }\n };\n\n document.addEventListener(\"mousedown\", handleClickOutside);\n return () => document.removeEventListener(\"mousedown\", handleClickOutside);\n }, [isOpen]);\n\n const getOptionLabel = (option: string \| SelectOption) => {\n if (typeof option === \"string\") return option;\n return option.label;\n };\n\n const getOptionValue = (option: string \| SelectOption) => {\n if (typeof option === \"string\") return option;\n return option.value;\n };\n\n const getOptionDisabled = (option: string \| SelectOption) => {\n if (typeof option === \"string\") return false;\n return option.disabled \|\| false;\n };\n\n // Filter options based on search value\n const filteredOptions =\n searchable && searchValue\n ? options.filter((option) => {\n const label = getOptionLabel(option);\n return label.toLowerCase().includes(searchValue.toLowerCase());\n })\n : options;\n\n // 1. Resolve Config from Theme\n const sizeStyles = theme.sizing.input(size);\n const inputColors = theme.colors.control.input;\n\n const handlePress = () => {\n if (!isDisable) {\n if (onPress) onPress();\n setIsOpen(!isOpen);\n }\n };\n\n const handleSelect = (option: string \| SelectOption) => {\n if (getOptionDisabled(option)) return;\n const val = getOptionValue(option);\n setSelectedValue(val);\n setIsOpen(false);\n if (onChange) onChange(val);\n };\n\n // Resolve background and border colors based on state\n const isHover = externalState === \"hover\";\n let backgroundColor = inputColors.bg;\n let borderColor = inputColors.border;\n\n if (isDisable) {\n backgroundColor = inputColors.bgDisable;\n borderColor = inputColors.borderDisable;\n } else if (isFocus) {\n backgroundColor = theme.colors.control.focus.bg;\n borderColor = isError\n ? theme.colors.border.alert\n : theme.colors.border.brand;\n } else if (isError) {\n borderColor = theme.colors.border.alert;\n } else if (isHover) {\n backgroundColor = inputColors.bgHover;\n borderColor = inputColors.borderHover;\n }\n\n // Handle filled override if provided\n if (filled === false && !isFocus && !isError && !isHover) {\n backgroundColor = \"transparent\";\n }\n\n const currentLabel = selectedValue\n ? getOptionLabel(\n options.find((o) => getOptionValue(o) === selectedValue) \|\|\n selectedValue\n )\n : placeholder;\n\n const textColor = isDisable\n ? inputColors.textDisable\n : selectedValue\n ? inputColors.text\n : inputColors.placeholder;\n const iconColor = isDisable ? inputColors.textDisable : inputColors.text;\n\n return (\n <Box\n testID={testID}\n ref={containerRef}\n flexDirection=\"column\"\n gap={sizeStyles.fieldGap}\n width=\"100%\"\n position=\"relative\"\n >\n {label && (\n <Text\n color={theme.colors.content.secondary}\n fontSize={sizeStyles.fontSize - 2}\n fontWeight=\"500\"\n >\n {label}\n </Text>\n )}\n <Box\n onPress={handlePress}\n backgroundColor={backgroundColor}\n borderColor={borderColor}\n borderWidth={borderColor !== \"transparent\" ? 1 : 0}\n borderRadius={sizeStyles.radius}\n height={sizeStyles.height}\n width={iconOnly ? sizeStyles.height : \"100%\"}\n paddingHorizontal={iconOnly ? 0 : sizeStyles.paddingHorizontal}\n flexDirection=\"row\"\n alignItems=\"center\"\n justifyContent={iconOnly ? \"center\" : \"flex-start\"}\n gap={iconOnly ? 4 : 12}\n position=\"relative\"\n hoverStyle={\n !isDisable && !isFocus && !isError\n ? {\n backgroundColor: inputColors.bgHover,\n borderColor: inputColors.borderHover,\n }\n : undefined\n }\n >\n {iconLeft && (\n <Box alignItems=\"center\" justifyContent=\"center\">\n <Icon size={sizeStyles.iconSize} color={iconColor}>\n {iconLeft}\n </Icon>\n </Box>\n )}\n\n {!iconOnly && (\n <Box flex={1} height=\"100%\" justifyContent=\"center\">\n <Text\n color={textColor}\n fontSize={sizeStyles.fontSize}\n numberOfLines={1}\n >\n {currentLabel}\n </Text>\n </Box>\n )}\n\n {/ Trailing controls /}\n <Box flexDirection=\"row\" alignItems=\"center\" gap={4}>\n {/ Error icon /}\n {isError && (\n <Icon\n size={sizeStyles.iconSize}\n color={theme.colors.content.alert.primary}\n >\n <ExclamationMarkCr />\n </Icon>\n )}\n\n {/ Right icon or default caret /}\n <Icon size={sizeStyles.iconSize} color={iconColor}>\n {iconRight !== undefined ? (\n iconRight\n ) : isFocus ? (\n <ChevronUp />\n ) : (\n <ChevronDown />\n )}\n </Icon>\n </Box>\n </Box>\n\n {/ Dropdown Menu /}\n {isFocus && options.length > 0 && (\n <Box\n ref={dropdownRef}\n position=\"absolute\"\n top={\n sizeStyles.height +\n (label ? sizeStyles.fontSize + sizeStyles.fieldGap : 0) +\n sizeStyles.fieldGap\n }\n width=\"100%\"\n backgroundColor={theme.colors.background.secondary}\n borderColor={theme.colors.border.secondary}\n borderWidth={1}\n borderRadius={theme.radius.button}\n style={{\n zIndex: 1000,\n ...(isNative\n ? { elevation: 4 }\n : { boxShadow: \"0 4px 12px rgba(0,0,0,0.1)\" }),\n minWidth: iconOnly ? sizeStyles.height 3 : undefined,\n }}\n >\n {/* Search Input - Outside scrollable area (web only) /}\n {searchable && !isNative && (\n <Box\n paddingHorizontal={sizeStyles.paddingHorizontal}\n paddingVertical={sizeStyles.paddingVertical}\n borderBottomWidth={1}\n borderColor={theme.colors.border.secondary}\n >\n <Box\n flexDirection=\"row\"\n alignItems=\"center\"\n gap={sizeStyles.paddingHorizontal / 2}\n paddingHorizontal={4}\n >\n <Icon\n size={sizeStyles.iconSize - 2}\n color={inputColors.placeholder}\n >\n <SearchIcon />\n </Icon>\n <Box\n as=\"input\"\n ref={searchInputRef}\n flex={1}\n type=\"text\"\n value={searchValue}\n onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\n setSearchValue(e.target.value)\n }\n placeholder={searchPlaceholder}\n style={{\n border: \"none\",\n outline: \"none\",\n background: \"transparent\",\n color: inputColors.text,\n fontSize: sizeStyles.fontSize,\n width: \"100%\",\n }}\n />\n </Box>\n </Box>\n )}\n\n {/ Options List - Scrollable /}\n <Box\n paddingVertical={4}\n overflow=\"scroll\"\n style={{\n maxHeight: searchable ? maxHeight - 60 : maxHeight,\n ...(isWeb ? { overflowY: \"auto\" } : {}),\n }}\n >\n {filteredOptions.length === 0 ? (\n <Box\n paddingVertical={sizeStyles.paddingVertical 2}\n paddingHorizontal={sizeStyles.paddingHorizontal}\n alignItems=\"center\"\n >\n <Text\n color={theme.colors.content.tertiary}\n fontSize={sizeStyles.fontSize}\n >\n {noOptionsMessage}\n </Text>\n </Box>\n ) : (\n filteredOptions.map((option, index) => {\n const optionValue = getOptionValue(option);\n const optionLabel = getOptionLabel(option);\n const isOptionDisabled = getOptionDisabled(option);\n const isSelected = optionValue === selectedValue;\n const brandColors = theme.colors.control.brand.primary;\n const contentColors = theme.colors.content;\n\n return (\n <Box\n testID={testID}\n key={index}\n ref={isSelected ? selectedItemRef : undefined}\n paddingVertical={sizeStyles.paddingVertical}\n paddingHorizontal={sizeStyles.paddingHorizontal}\n onPress={\n isOptionDisabled ? undefined : () => handleSelect(option)\n }\n flexDirection=\"row\"\n alignItems=\"center\"\n justifyContent=\"space-between\"\n backgroundColor={\n isSelected ? brandColors.bg : \"transparent\"\n }\n style={{\n ...(isWeb\n ? {\n cursor: isOptionDisabled\n ? \"not-allowed\"\n : \"pointer\",\n }\n : {}),\n opacity: isOptionDisabled ? 0.5 : 1,\n }}\n hoverStyle={\n !isSelected && !isOptionDisabled\n ? {\n backgroundColor: theme.colors.control.input.bgHover,\n }\n : undefined\n }\n >\n <Text\n color={\n isSelected\n ? contentColors.on.brand\n : theme.colors.content.secondary\n }\n fontSize={sizeStyles.fontSize}\n fontWeight=\"400\"\n >\n {optionLabel}\n </Text>\n </Box>\n );\n })\n )}\n </Box>\n </Box>\n )}\n\n {isError && errorMessage && (\n <Text\n color={theme.colors.content.alert.primary}\n fontSize={sizeStyles.fontSize - 2}\n style={{ lineHeight: sizeStyles.lineHeight + \"px\" }}\n >\n {errorMessage}\n </Text>\n )}\n </Box>\n );\n};\n","import React from \"react\";\nimport {\n View,\n Pressable,\n Image,\n ViewStyle,\n ImageStyle,\n DimensionValue,\n AnimatableNumericValue,\n} from \"react-native\";\nimport { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Box: React.FC<BoxProps> = ({\n children,\n onPress,\n onLayout,\n onMoveShouldSetResponder,\n onResponderGrant,\n onResponderMove,\n onResponderRelease,\n onResponderTerminate,\n backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius,\n borderStyle,\n height,\n padding,\n paddingHorizontal,\n paddingVertical,\n margin,\n marginTop,\n marginBottom,\n marginLeft,\n marginRight,\n flexDirection,\n alignItems,\n justifyContent,\n position,\n top,\n bottom,\n left,\n right,\n width,\n minWidth,\n minHeight,\n maxWidth,\n maxHeight,\n flex,\n overflow,\n zIndex,\n hoverStyle,\n pressStyle,\n style,\n \"data-testid\": dataTestId,\n testID,\n as,\n src,\n alt,\n ...rest\n}) => {\n const getContainerStyle = (pressed?: boolean): ViewStyle => ({\n backgroundColor:\n pressed && pressStyle?.backgroundColor\n ? pressStyle.backgroundColor\n : backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius: borderRadius as AnimatableNumericValue,\n borderStyle: borderStyle as ViewStyle[\"borderStyle\"],\n overflow,\n zIndex,\n height: height as DimensionValue,\n width: width as DimensionValue,\n minWidth: minWidth as DimensionValue,\n minHeight: minHeight as DimensionValue,\n maxWidth: maxWidth as DimensionValue,\n maxHeight: maxHeight as DimensionValue,\n padding: padding as DimensionValue,\n paddingHorizontal: paddingHorizontal as DimensionValue,\n paddingVertical: paddingVertical as DimensionValue,\n margin: margin as DimensionValue,\n marginTop: marginTop as DimensionValue,\n marginBottom: marginBottom as DimensionValue,\n marginLeft: marginLeft as DimensionValue,\n marginRight: marginRight as DimensionValue,\n flexDirection,\n alignItems,\n justifyContent,\n position: position as ViewStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n flex,\n ...(style as ViewStyle),\n });\n\n const finalTestID = dataTestId \|\| testID;\n\n // Destructure and drop web-only props from rest before passing to RN components\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const {\n role,\n tabIndex,\n onKeyDown,\n onKeyUp,\n \"aria-label\": _ariaLabel,\n \"aria-labelledby\": _ariaLabelledBy,\n \"aria-current\": _ariaCurrent,\n \"aria-disabled\": _ariaDisabled,\n \"aria-live\": _ariaLive,\n className,\n \"data-testid\": _dataTestId,\n ...nativeRest\n } = rest as Record<string, unknown>;\n\n // Handle as=\"img\" for React Native\n if (as === \"img\" && src) {\n const imageStyle: ImageStyle = {\n width: width as DimensionValue,\n height: height as DimensionValue,\n borderRadius: borderRadius as number,\n position: position as ImageStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n ...(style as ImageStyle),\n };\n\n return (\n <Image\n source={{ uri: src }}\n style={imageStyle}\n testID={finalTestID}\n resizeMode=\"cover\"\n {...nativeRest}\n />\n );\n }\n\n if (onPress) {\n return (\n <Pressable\n onPress={onPress}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n style={({ pressed }) => getContainerStyle(pressed)}\n testID={finalTestID}\n {...nativeRest}\n >\n {children}\n </Pressable>\n );\n }\n\n return (\n <View\n style={getContainerStyle()}\n testID={finalTestID}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n {...nativeRest}\n >\n {children}\n </View>\n );\n};\n","import React from \"react\";\nimport {\n Text as RNText,\n TextStyle,\n AccessibilityRole,\n StyleSheet,\n} from \"react-native\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst roleMap: Record<string, AccessibilityRole> = {\n alert: \"alert\",\n heading: \"header\",\n button: \"button\",\n link: \"link\",\n text: \"text\",\n};\n\nconst parseNumericValue = (\n value: string \| number \| undefined\n): number \| undefined => {\n if (value === undefined) return undefined;\n if (typeof value === \"number\") return value;\n const parsed = parseFloat(value);\n return isNaN(parsed) ? undefined : parsed;\n};\n\nexport const Text: React.FC<TextProps> = ({\n children,\n color,\n fontSize,\n fontWeight,\n fontFamily,\n textAlign,\n lineHeight,\n numberOfLines,\n id,\n role,\n testID,\n \"data-testid\": dataTestId,\n style: styleProp,\n ...props\n}) => {\n let resolvedFontFamily = fontFamily\n ? fontFamily.split(\",\")[0].replace(/['\"]/g, \"\").trim()\n : undefined;\n\n if (\n resolvedFontFamily === \"Pilat Wide\" \|\|\n resolvedFontFamily === \"Pilat Wide Bold\" \|\|\n resolvedFontFamily === \"Aktiv Grotesk\"\n ) {\n resolvedFontFamily = undefined;\n }\n\n const incomingStyle = StyleSheet.flatten(styleProp) as TextStyle \| undefined;\n\n const baseStyle: TextStyle = {\n color: color ?? incomingStyle?.color,\n fontSize: typeof fontSize === \"number\" ? fontSize : undefined,\n fontWeight: fontWeight as TextStyle[\"fontWeight\"],\n fontFamily: resolvedFontFamily,\n textDecorationLine: props.textDecoration as TextStyle[\"textDecorationLine\"],\n textAlign: textAlign ?? incomingStyle?.textAlign,\n lineHeight: parseNumericValue(lineHeight ?? incomingStyle?.lineHeight),\n marginTop: parseNumericValue(\n incomingStyle?.marginTop as number \| string \| undefined\n ),\n marginBottom: parseNumericValue(\n incomingStyle?.marginBottom as number \| string \| undefined\n ),\n };\n\n const accessibilityRole = role ? roleMap[role] : undefined;\n\n return (\n <RNText\n style={baseStyle}\n numberOfLines={numberOfLines}\n testID={dataTestId \|\| testID \|\| id}\n accessibilityRole={accessibilityRole}\n >\n {children}\n </RNText>\n );\n};\n","import React from \"react\";\nimport { View, ViewStyle } from \"react-native\";\nimport { IconProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Icon: React.FC<IconProps> = ({\n children,\n color,\n size,\n testID,\n \"data-testid\": dataTestId,\n}) => {\n const style: ViewStyle = {\n width: typeof size === \"number\" ? size : undefined,\n height: typeof size === \"number\" ? size : undefined,\n alignItems: \"center\",\n justifyContent: \"center\",\n };\n\n // On native, we try to pass the color down to children (like Text primitives)\n // to mimic the CSS inheritance behavior of the web version.\n const childrenWithProps = React.Children.map(children, (child) => {\n if (React.isValidElement(child)) {\n return React.cloneElement(child, {\n color: child.props.color \|\| color,\n // Also pass size if child seems to be an icon that needs it\n size: child.props.size \|\| size,\n });\n }\n return child;\n });\n\n return (\n <View style={style} testID={dataTestId \|\| testID}>\n {childrenWithProps}\n </View>\n );\n};\n","export * from \"./Box\";\nexport * from \"./Text\";\nexport * from \"./Spinner\";\nexport * from \"./Icon\";\nexport * from \"./Divider\";\nexport * from \"./Input\";\nexport * from \"./TextArea\";\nexport * from \"./LinearGradient\";\n\nexport const isWeb = false;\nexport const isNative = true;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,IAAAA,gBAAmD;;;ACCnD,0BAQO;AA2ID;AAxIC,IAAM,MAA0B,CAAC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,oBAAoB,CAAC,aAAkC;AAAA,IAC3D,iBACE,WAAW,YAAY,kBACnB,WAAW,kBACX;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAI;AAAA,EACN;AAEA,QAAM,cAAc,cAAc;AAIlC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB,aAAa;AAAA,IACb;AAAA,IACA,eAAe;AAAA,IACf,GAAG;AAAA,EACL,IAAI;AAGJ,MAAI,OAAO,SAAS,KAAK;AACvB,UAAM,aAAyB;AAAA,MAC7B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAI;AAAA,IACN;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ,EAAE,KAAK,IAAI;AAAA,QACnB,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,YAAW;AAAA,QACV,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AAEA,MAAI,SAAS;AACX,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO,CAAC,EAAE,QAAQ,MAAM,kBAAkB,OAAO;AAAA,QACjD,QAAQ;AAAA,QACP,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,kBAAkB;AAAA,MACzB,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;;;AC/LA,IAAAC,uBAKO;AAqEH,IAAAC,sBAAA;AAlEJ,IAAM,UAA6C;AAAA,EACjD,OAAO;AAAA,EACP,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,MAAM;AACR;AAEA,IAAM,oBAAoB,CACxB,UACuB;AACvB,MAAI,UAAU,OAAW,QAAO;AAChC,MAAI,OAAO,UAAU,SAAU,QAAO;AACtC,QAAM,SAAS,WAAW,KAAK;AAC/B,SAAO,MAAM,MAAM,IAAI,SAAY;AACrC;AAEO,IAAM,OAA4B,CAAC;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,OAAO;AAAA,EACP,GAAG;AACL,MAAM;AACJ,MAAI,qBAAqB,aACrB,WAAW,MAAM,GAAG,EAAE,CAAC,EAAE,QAAQ,SAAS,EAAE,EAAE,KAAK,IACnD;AAEJ,MACE,uBAAuB,gBACvB,uBAAuB,qBACvB,uBAAuB,iBACvB;AACA,yBAAqB;AAAA,EACvB;AAEA,QAAM,gBAAgB,gCAAW,QAAQ,SAAS;AAElD,QAAM,YAAuB;AAAA,IAC3B,OAAO,SAAS,eAAe;AAAA,IAC/B,UAAU,OAAO,aAAa,WAAW,WAAW;AAAA,IACpD;AAAA,IACA,YAAY;AAAA,IACZ,oBAAoB,MAAM;AAAA,IAC1B,WAAW,aAAa,eAAe;AAAA,IACvC,YAAY,kBAAkB,cAAc,eAAe,UAAU;AAAA,IACrE,WAAW;AAAA,MACT,eAAe;AAAA,IACjB;AAAA,IACA,cAAc;AAAA,MACZ,eAAe;AAAA,IACjB;AAAA,EACF;AAEA,QAAM,oBAAoB,OAAO,QAAQ,IAAI,IAAI;AAEjD,SACE;AAAA,IAAC,qBAAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,MACP;AAAA,MACA,QAAQ,cAAc,UAAU;AAAA,MAChC;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;;;ACpFA,mBAAkB;AAClB,IAAAC,uBAAgC;AA+B5B,IAAAC,sBAAA;AA5BG,IAAM,OAA4B,CAAC;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AACjB,MAAM;AACJ,QAAM,QAAmB;AAAA,IACvB,OAAO,OAAO,SAAS,WAAW,OAAO;AAAA,IACzC,QAAQ,OAAO,SAAS,WAAW,OAAO;AAAA,IAC1C,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AAIA,QAAM,oBAAoB,aAAAC,QAAM,SAAS,IAAI,UAAU,CAAC,UAAU;AAChE,QAAI,aAAAA,QAAM,eAAe,KAAK,GAAG;AAC/B,aAAO,aAAAA,QAAM,aAAa,OAAO;AAAA,QAC/B,OAAO,MAAM,MAAM,SAAS;AAAA;AAAA,QAE5B,MAAM,MAAM,MAAM,QAAQ;AAAA,MAC5B,CAAC;AAAA,IACH;AACA,WAAO;AAAA,EACT,CAAC;AAED,SACE,6CAAC,6BAAK,OAAc,QAAQ,cAAc,QACvC,6BACH;AAEJ;;;AC3BO,IAAM,QAAQ;AACd,IAAM,WAAW;;;AJPxB,sBAA0D;AAC1D,4BAKO;AAmNC,IAAAC,sBAAA;AApLD,IAAM,SAAgC,CAAC;AAAA,EAC5C;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,OAAO;AAAA,EACP,OAAO;AAAA,EACP,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,WAAW;AAAA,EACX,UAAU,CAAC;AAAA,EACX;AAAA,EACA,aAAa;AAAA,EACb,oBAAoB;AAAA,EACpB,mBAAmB;AAAA,EACnB,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,MAAM,QAAI,kCAAiB,EAAE,WAAW,oBAAoB,CAAC;AACrE,QAAM,CAAC,QAAQ,SAAS,QAAI,wBAAS,KAAK;AAC1C,QAAM,CAAC,eAAe,gBAAgB,QAAI,wBAA6B,KAAK;AAC5E,QAAM,CAAC,aAAa,cAAc,QAAI,wBAAS,EAAE;AACjD,QAAM,mBAAe,sBAAuB,IAAI;AAChD,QAAM,kBAAc,sBAAuB,IAAI;AAC/C,QAAM,sBAAkB,sBAAuB,IAAI;AACnD,QAAM,qBAAiB,sBAAyB,IAAI;AAEpD,QAAM,YAAY,kBAAkB,aAAa;AACjD,QAAM,UAAU,kBAAkB,WAAW,CAAC,CAAC;AAC/C,QAAM,UAAU,kBAAkB,WAAW;AAG7C,gBAAAC,QAAM,UAAU,MAAM;AACpB,QAAI,UAAU,QAAW;AACvB,uBAAiB,KAAK;AAAA,IACxB;AAAA,EACF,GAAG,CAAC,KAAK,CAAC;AAGV,+BAAU,MAAM;AACd,QAAI,WAAW,gBAAgB,WAAW,YAAY,SAAS;AAE7D,YAAM,YAAY,WAAW,MAAM;AACjC,cAAM,eAAe,gBAAgB;AACrC,YAAI,gBAAgB,OAAO;AACzB,uBAAa,eAAe,EAAE,OAAO,UAAU,CAAC;AAAA,QAClD;AAAA,MACF,GAAG,CAAC;AACJ,aAAO,MAAM,aAAa,SAAS;AAAA,IACrC;AAAA,EACF,GAAG,CAAC,OAAO,CAAC;AAGZ,+BAAU,MAAM;AACd,QAAI,WAAW,YAAY;AACzB,qBAAe,SAAS,MAAM;AAAA,IAChC;AAAA,EACF,GAAG,CAAC,SAAS,UAAU,CAAC;AAGxB,+BAAU,MAAM;AACd,QAAI,CAAC,SAAS;AACZ,qBAAe,EAAE;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,OAAO,CAAC;AAGZ,+BAAU,MAAM;AACd,QAAI,YAAY,CAAC,OAAQ;AAEzB,UAAM,qBAAqB,CAAC,UAAsB;AAChD,UACE,aAAa,WACb,CAAC,aAAa,QAAQ,SAAS,MAAM,MAAc,GACnD;AACA,kBAAU,KAAK;AAAA,MACjB;AAAA,IACF;AAEA,aAAS,iBAAiB,aAAa,kBAAkB;AACzD,WAAO,MAAM,SAAS,oBAAoB,aAAa,kBAAkB;AAAA,EAC3E,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,iBAAiB,CAAC,WAAkC;AACxD,QAAI,OAAO,WAAW,SAAU,QAAO;AACvC,WAAO,OAAO;AAAA,EAChB;AAEA,QAAM,iBAAiB,CAAC,WAAkC;AACxD,QAAI,OAAO,WAAW,SAAU,QAAO;AACvC,WAAO,OAAO;AAAA,EAChB;AAEA,QAAM,oBAAoB,CAAC,WAAkC;AAC3D,QAAI,OAAO,WAAW,SAAU,QAAO;AACvC,WAAO,OAAO,YAAY;AAAA,EAC5B;AAGA,QAAM,kBACJ,cAAc,cACV,QAAQ,OAAO,CAAC,WAAW;AACzB,UAAMC,SAAQ,eAAe,MAAM;AACnC,WAAOA,OAAM,YAAY,EAAE,SAAS,YAAY,YAAY,CAAC;AAAA,EAC/D,CAAC,IACD;AAGN,QAAM,aAAa,MAAM,OAAO,MAAM,IAAI;AAC1C,QAAM,cAAc,MAAM,OAAO,QAAQ;AAEzC,QAAM,cAAc,MAAM;AACxB,QAAI,CAAC,WAAW;AACd,UAAI,QAAS,SAAQ;AACrB,gBAAU,CAAC,MAAM;AAAA,IACnB;AAAA,EACF;AAEA,QAAM,eAAe,CAAC,WAAkC;AACtD,QAAI,kBAAkB,MAAM,EAAG;AAC/B,UAAM,MAAM,eAAe,MAAM;AACjC,qBAAiB,GAAG;AACpB,cAAU,KAAK;AACf,QAAI,SAAU,UAAS,GAAG;AAAA,EAC5B;AAGA,QAAM,UAAU,kBAAkB;AAClC,MAAI,kBAAkB,YAAY;AAClC,MAAI,cAAc,YAAY;AAE9B,MAAI,WAAW;AACb,sBAAkB,YAAY;AAC9B,kBAAc,YAAY;AAAA,EAC5B,WAAW,SAAS;AAClB,sBAAkB,MAAM,OAAO,QAAQ,MAAM;AAC7C,kBAAc,UACV,MAAM,OAAO,OAAO,QACpB,MAAM,OAAO,OAAO;AAAA,EAC1B,WAAW,SAAS;AAClB,kBAAc,MAAM,OAAO,OAAO;AAAA,EACpC,WAAW,SAAS;AAClB,sBAAkB,YAAY;AAC9B,kBAAc,YAAY;AAAA,EAC5B;AAGA,MAAI,WAAW,SAAS,CAAC,WAAW,CAAC,WAAW,CAAC,SAAS;AACxD,sBAAkB;AAAA,EACpB;AAEA,QAAM,eAAe,gBACjB;AAAA,IACE,QAAQ,KAAK,CAAC,MAAM,eAAe,CAAC,MAAM,aAAa,KACrD;AAAA,EACJ,IACA;AAEJ,QAAM,YAAY,YACd,YAAY,cACZ,gBACE,YAAY,OACZ,YAAY;AAClB,QAAM,YAAY,YAAY,YAAY,cAAc,YAAY;AAEpE,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,KAAK;AAAA,MACL,eAAc;AAAA,MACd,KAAK,WAAW;AAAA,MAChB,OAAM;AAAA,MACN,UAAS;AAAA,MAER;AAAA,iBACC;AAAA,UAAC;AAAA;AAAA,YACC,OAAO,MAAM,OAAO,QAAQ;AAAA,YAC5B,UAAU,WAAW,WAAW;AAAA,YAChC,YAAW;AAAA,YAEV;AAAA;AAAA,QACH;AAAA,QAEF;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,YACT;AAAA,YACA;AAAA,YACA,aAAa,gBAAgB,gBAAgB,IAAI;AAAA,YACjD,cAAc,WAAW;AAAA,YACzB,QAAQ,WAAW;AAAA,YACnB,OAAO,WAAW,WAAW,SAAS;AAAA,YACtC,mBAAmB,WAAW,IAAI,WAAW;AAAA,YAC7C,eAAc;AAAA,YACd,YAAW;AAAA,YACX,gBAAgB,WAAW,WAAW;AAAA,YACtC,KAAK,WAAW,IAAI;AAAA,YACpB,UAAS;AAAA,YACT,YACE,CAAC,aAAa,CAAC,WAAW,CAAC,UACvB;AAAA,cACE,iBAAiB,YAAY;AAAA,cAC7B,aAAa,YAAY;AAAA,YAC3B,IACA;AAAA,YAGL;AAAA,0BACC,6CAAC,OAAI,YAAW,UAAS,gBAAe,UACtC,uDAAC,QAAK,MAAM,WAAW,UAAU,OAAO,WACrC,oBACH,GACF;AAAA,cAGD,CAAC,YACA,6CAAC,OAAI,MAAM,GAAG,QAAO,QAAO,gBAAe,UACzC;AAAA,gBAAC;AAAA;AAAA,kBACC,OAAO;AAAA,kBACP,UAAU,WAAW;AAAA,kBACrB,eAAe;AAAA,kBAEd;AAAA;AAAA,cACH,GACF;AAAA,cAIF,8CAAC,OAAI,eAAc,OAAM,YAAW,UAAS,KAAK,GAE/C;AAAA,2BACC;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAM,WAAW;AAAA,oBACjB,OAAO,MAAM,OAAO,QAAQ,MAAM;AAAA,oBAElC,uDAAC,2CAAkB;AAAA;AAAA,gBACrB;AAAA,gBAIF,6CAAC,QAAK,MAAM,WAAW,UAAU,OAAO,WACrC,wBAAc,SACb,YACE,UACF,6CAAC,mCAAU,IAEX,6CAAC,qCAAY,GAEjB;AAAA,iBACF;AAAA;AAAA;AAAA,QACF;AAAA,QAGC,WAAW,QAAQ,SAAS,KAC3B;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,UAAS;AAAA,YACT,KACE,WAAW,UACV,QAAQ,WAAW,WAAW,WAAW,WAAW,KACrD,WAAW;AAAA,YAEb,OAAM;AAAA,YACN,iBAAiB,MAAM,OAAO,WAAW;AAAA,YACzC,aAAa,MAAM,OAAO,OAAO;AAAA,YACjC,aAAa;AAAA,YACb,cAAc,MAAM,OAAO;AAAA,YAC3B,OAAO;AAAA,cACL,QAAQ;AAAA,cACR,GAAI,WACA,EAAE,WAAW,EAAE,IACf,EAAE,WAAW,6BAA6B;AAAA,cAC9C,UAAU,WAAW,WAAW,SAAS,IAAI;AAAA,YAC/C;AAAA,YAGC;AAAA,4BAAc,CAAC,YACd;AAAA,gBAAC;AAAA;AAAA,kBACC,mBAAmB,WAAW;AAAA,kBAC9B,iBAAiB,WAAW;AAAA,kBAC5B,mBAAmB;AAAA,kBACnB,aAAa,MAAM,OAAO,OAAO;AAAA,kBAEjC;AAAA,oBAAC;AAAA;AAAA,sBACC,eAAc;AAAA,sBACd,YAAW;AAAA,sBACX,KAAK,WAAW,oBAAoB;AAAA,sBACpC,mBAAmB;AAAA,sBAEnB;AAAA;AAAA,0BAAC;AAAA;AAAA,4BACC,MAAM,WAAW,WAAW;AAAA,4BAC5B,OAAO,YAAY;AAAA,4BAEnB,uDAAC,sBAAAC,QAAA,EAAW;AAAA;AAAA,wBACd;AAAA,wBACA;AAAA,0BAAC;AAAA;AAAA,4BACC,IAAG;AAAA,4BACH,KAAK;AAAA,4BACL,MAAM;AAAA,4BACN,MAAK;AAAA,4BACL,OAAO;AAAA,4BACP,UAAU,CAAC,MACT,eAAe,EAAE,OAAO,KAAK;AAAA,4BAE/B,aAAa;AAAA,4BACb,OAAO;AAAA,8BACL,QAAQ;AAAA,8BACR,SAAS;AAAA,8BACT,YAAY;AAAA,8BACZ,OAAO,YAAY;AAAA,8BACnB,UAAU,WAAW;AAAA,8BACrB,OAAO;AAAA,4BACT;AAAA;AAAA,wBACF;AAAA;AAAA;AAAA,kBACF;AAAA;AAAA,cACF;AAAA,cAIF;AAAA,gBAAC;AAAA;AAAA,kBACC,iBAAiB;AAAA,kBACjB,UAAS;AAAA,kBACT,OAAO;AAAA,oBACL,WAAW,aAAa,YAAY,KAAK;AAAA,oBACzC,GAAI,QAAQ,EAAE,WAAW,OAAO,IAAI,CAAC;AAAA,kBACvC;AAAA,kBAEC,0BAAgB,WAAW,IAC1B;AAAA,oBAAC;AAAA;AAAA,sBACC,iBAAiB,WAAW,kBAAkB;AAAA,sBAC9C,mBAAmB,WAAW;AAAA,sBAC9B,YAAW;AAAA,sBAEX;AAAA,wBAAC;AAAA;AAAA,0BACC,OAAO,MAAM,OAAO,QAAQ;AAAA,0BAC5B,UAAU,WAAW;AAAA,0BAEpB;AAAA;AAAA,sBACH;AAAA;AAAA,kBACF,IAEA,gBAAgB,IAAI,CAAC,QAAQ,UAAU;AACrC,0BAAM,cAAc,eAAe,MAAM;AACzC,0BAAM,cAAc,eAAe,MAAM;AACzC,0BAAM,mBAAmB,kBAAkB,MAAM;AACjD,0BAAM,aAAa,gBAAgB;AACnC,0BAAM,cAAc,MAAM,OAAO,QAAQ,MAAM;AAC/C,0BAAM,gBAAgB,MAAM,OAAO;AAEnC,2BACE;AAAA,sBAAC;AAAA;AAAA,wBACC;AAAA,wBAEA,KAAK,aAAa,kBAAkB;AAAA,wBACpC,iBAAiB,WAAW;AAAA,wBAC5B,mBAAmB,WAAW;AAAA,wBAC9B,SACE,mBAAmB,SAAY,MAAM,aAAa,MAAM;AAAA,wBAE1D,eAAc;AAAA,wBACd,YAAW;AAAA,wBACX,gBAAe;AAAA,wBACf,iBACE,aAAa,YAAY,KAAK;AAAA,wBAEhC,OAAO;AAAA,0BACL,GAAI,QACA;AAAA,4BACE,QAAQ,mBACJ,gBACA;AAAA,0BACN,IACA,CAAC;AAAA,0BACL,SAAS,mBAAmB,MAAM;AAAA,wBACpC;AAAA,wBACA,YACE,CAAC,cAAc,CAAC,mBACZ;AAAA,0BACE,iBAAiB,MAAM,OAAO,QAAQ,MAAM;AAAA,wBAC9C,IACA;AAAA,wBAGN;AAAA,0BAAC;AAAA;AAAA,4BACC,OACE,aACI,cAAc,GAAG,QACjB,MAAM,OAAO,QAAQ;AAAA,4BAE3B,UAAU,WAAW;AAAA,4BACrB,YAAW;AAAA,4BAEV;AAAA;AAAA,wBACH;AAAA;AAAA,sBAzCK;AAAA,oBA0CP;AAAA,kBAEJ,CAAC;AAAA;AAAA,cAEL;AAAA;AAAA;AAAA,QACF;AAAA,QAGD,WAAW,gBACV;AAAA,UAAC;AAAA;AAAA,YACC,OAAO,MAAM,OAAO,QAAQ,MAAM;AAAA,YAClC,UAAU,WAAW,WAAW;AAAA,YAChC,OAAO,EAAE,YAAY,WAAW,aAAa,KAAK;AAAA,YAEjD;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":["import_react","import_react_native","import_jsx_runtime","RNText","import_react_native","import_jsx_runtime","React","import_jsx_runtime","React","label","SearchIcon"]}