@xsolla/xui-select 0.128.0 → 0.130.0

package/web/index.mjs

@@ -39,6 +39,8 @@ var StyledBox = styled.div`
   width: ${(props) => typeof props.width === "number" ? `${props.width}px` : props.width || "auto"};
   min-width: ${(props) => typeof props.minWidth === "number" ? `${props.minWidth}px` : props.minWidth || "auto"};
   min-height: ${(props) => typeof props.minHeight === "number" ? `${props.minHeight}px` : props.minHeight || "auto"};
+  max-width: ${(props) => typeof props.maxWidth === "number" ? `${props.maxWidth}px` : props.maxWidth || "none"};
+  max-height: ${(props) => typeof props.maxHeight === "number" ? `${props.maxHeight}px` : props.maxHeight || "none"};
 
   padding: ${(props) => typeof props.padding === "number" ? `${props.padding}px` : props.padding || 0};
   ${(props) => props.paddingHorizontal && `
@@ -226,110 +228,458 @@ var Icon = ({ children, ...props }) => {
 };
 
 // src/Select.tsx
-import { useDesignSystem, isNative } from "@xsolla/xui-core";
-import { jsx as jsx4, jsxs } from "react/jsx-runtime";
-var ChevronDown = () => /* @__PURE__ */ jsx4(
-  "svg",
-  {
-    width: "100%",
-    height: "100%",
-    viewBox: "0 0 18 18",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx4(
-      "path",
-      {
-        d: "M4.5 6.75L9 11.25L13.5 6.75",
-        stroke: "currentColor",
-        strokeWidth: "1",
-        strokeLinecap: "round",
-        strokeLinejoin: "round"
-      }
-    )
-  }
-);
-var ChevronUp = () => /* @__PURE__ */ jsx4(
-  "svg",
-  {
-    width: "100%",
-    height: "100%",
-    viewBox: "0 0 18 18",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx4(
-      "path",
-      {
-        d: "M13.5 11.25L9 6.75L4.5 11.25",
-        stroke: "currentColor",
-        strokeWidth: "1",
-        strokeLinecap: "round",
-        strokeLinejoin: "round"
-      }
-    )
-  }
-);
-var ExclamationMarkCr = () => /* @__PURE__ */ jsxs(
-  "svg",
-  {
-    width: "100%",
-    height: "100%",
-    viewBox: "0 0 18 18",
-    fill: "none",
-    style: { stroke: "none" },
-    xmlns: "http://www.w3.org/2000/svg",
-    children: [
-      /* @__PURE__ */ jsx4(
-        "path",
-        {
-          d: "M9.75 12.75C9.75 13.16 9.41 13.5 9 13.5C8.59 13.5 8.25 13.16 8.25 12.75C8.25 12.34 8.59 12 9 12C9.41 12 9.75 12.34 9.75 12.75Z",
-          fill: "currentColor"
-        }
-      ),
-      /* @__PURE__ */ jsx4("path", { d: "M9.75 10.5H8.25V4.5H9.75V10.5Z", fill: "currentColor" }),
-      /* @__PURE__ */ jsx4(
-        "path",
-        {
-          fillRule: "evenodd",
-          clipRule: "evenodd",
-          d: "M9 1.5C13.14 1.5 16.5 4.86 16.5 9C16.5 13.14 13.14 16.5 9 16.5C4.86 16.5 1.5 13.14 1.5 9C1.5 4.86 4.86 1.5 9 1.5ZM9 3C5.69 3 3 5.69 3 9C3 12.31 5.69 15 9 15C12.31 15 15 12.31 15 9C15 5.69 12.31 3 9 3Z",
-          fill: "currentColor"
-        }
-      )
-    ]
-  }
-);
-var SearchIcon = () => /* @__PURE__ */ jsxs(
-  "svg",
-  {
-    width: "100%",
-    height: "100%",
-    viewBox: "0 0 18 18",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: [
-      /* @__PURE__ */ jsx4(
-        "path",
-        {
-          d: "M8.25 14.25C11.5637 14.25 14.25 11.5637 14.25 8.25C14.25 4.93629 11.5637 2.25 8.25 2.25C4.93629 2.25 2.25 4.93629 2.25 8.25C2.25 11.5637 4.93629 14.25 8.25 14.25Z",
-          stroke: "currentColor",
-          strokeWidth: "1.5",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }
-      ),
-      /* @__PURE__ */ jsx4(
-        "path",
-        {
-          d: "M15.75 15.75L12.4875 12.4875",
-          stroke: "currentColor",
-          strokeWidth: "1.5",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }
-      )
-    ]
+import {
+  useResolvedTheme,
+  isNative,
+  isWeb
+} from "@xsolla/xui-core";
+
+// ../icons-base/dist/web/index.mjs
+import styled4 from "styled-components";
+import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx42 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx222 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx322 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
+import { jsx as jsx422 } from "react/jsx-runtime";
+import { jsx as jsx43 } from "react/jsx-runtime";
+import { jsx as jsx44 } from "react/jsx-runtime";
+import { jsx as jsx45 } from "react/jsx-runtime";
+import { jsx as jsx46 } from "react/jsx-runtime";
+import { jsx as jsx47 } from "react/jsx-runtime";
+import { jsx as jsx48 } from "react/jsx-runtime";
+import { jsx as jsx49 } from "react/jsx-runtime";
+import { jsx as jsx50 } from "react/jsx-runtime";
+import { jsx as jsx51 } from "react/jsx-runtime";
+import { jsx as jsx52 } from "react/jsx-runtime";
+import { jsx as jsx53 } from "react/jsx-runtime";
+import { jsx as jsx54 } from "react/jsx-runtime";
+import { jsx as jsx55 } from "react/jsx-runtime";
+import { jsx as jsx56 } from "react/jsx-runtime";
+import { jsx as jsx57 } from "react/jsx-runtime";
+import { jsx as jsx58 } from "react/jsx-runtime";
+import { jsx as jsx59 } from "react/jsx-runtime";
+import { jsx as jsx60 } from "react/jsx-runtime";
+import { jsx as jsx61 } from "react/jsx-runtime";
+import { jsx as jsx62 } from "react/jsx-runtime";
+import { jsx as jsx63 } from "react/jsx-runtime";
+import { jsx as jsx64 } from "react/jsx-runtime";
+import { jsx as jsx65 } from "react/jsx-runtime";
+import { jsx as jsx66 } from "react/jsx-runtime";
+import { jsx as jsx67 } from "react/jsx-runtime";
+import { jsx as jsx68 } from "react/jsx-runtime";
+import { jsx as jsx69 } from "react/jsx-runtime";
+import { jsx as jsx70 } from "react/jsx-runtime";
+import { jsx as jsx71 } from "react/jsx-runtime";
+import { jsx as jsx72 } from "react/jsx-runtime";
+import { jsx as jsx73 } from "react/jsx-runtime";
+import { jsx as jsx74 } from "react/jsx-runtime";
+import { jsx as jsx75 } from "react/jsx-runtime";
+import { jsx as jsx76 } from "react/jsx-runtime";
+import { jsx as jsx77 } from "react/jsx-runtime";
+import { jsx as jsx78 } from "react/jsx-runtime";
+import { jsx as jsx79 } from "react/jsx-runtime";
+import { jsx as jsx80 } from "react/jsx-runtime";
+import { jsx as jsx81 } from "react/jsx-runtime";
+import { jsx as jsx82 } from "react/jsx-runtime";
+import { jsx as jsx83 } from "react/jsx-runtime";
+import { jsx as jsx84 } from "react/jsx-runtime";
+import { jsx as jsx85 } from "react/jsx-runtime";
+import { jsx as jsx86 } from "react/jsx-runtime";
+import { jsx as jsx87 } from "react/jsx-runtime";
+import { jsx as jsx88 } from "react/jsx-runtime";
+import { jsx as jsx89 } from "react/jsx-runtime";
+import { jsx as jsx90 } from "react/jsx-runtime";
+import { jsx as jsx91 } from "react/jsx-runtime";
+import { jsx as jsx92 } from "react/jsx-runtime";
+import { jsx as jsx93 } from "react/jsx-runtime";
+import { jsx as jsx94 } from "react/jsx-runtime";
+import { jsx as jsx95 } from "react/jsx-runtime";
+import { jsx as jsx96 } from "react/jsx-runtime";
+import { jsx as jsx97 } from "react/jsx-runtime";
+import { jsx as jsx98 } from "react/jsx-runtime";
+import { jsx as jsx99 } from "react/jsx-runtime";
+import { jsx as jsx100 } from "react/jsx-runtime";
+import { jsx as jsx101 } from "react/jsx-runtime";
+import { jsx as jsx102 } from "react/jsx-runtime";
+import { jsx as jsx103 } from "react/jsx-runtime";
+import { jsx as jsx104 } from "react/jsx-runtime";
+import { jsx as jsx105 } from "react/jsx-runtime";
+import { jsx as jsx106 } from "react/jsx-runtime";
+import { jsx as jsx107 } from "react/jsx-runtime";
+import { jsx as jsx108 } from "react/jsx-runtime";
+import { jsx as jsx109 } from "react/jsx-runtime";
+import { jsx as jsx110 } from "react/jsx-runtime";
+import { jsx as jsx111 } from "react/jsx-runtime";
+import { jsx as jsx112 } from "react/jsx-runtime";
+import { jsx as jsx113 } from "react/jsx-runtime";
+import { jsx as jsx114 } from "react/jsx-runtime";
+import { jsx as jsx115 } from "react/jsx-runtime";
+import { jsx as jsx116 } from "react/jsx-runtime";
+import { jsx as jsx117 } from "react/jsx-runtime";
+import { jsx as jsx118 } from "react/jsx-runtime";
+import { jsx as jsx119 } from "react/jsx-runtime";
+import { jsx as jsx120 } from "react/jsx-runtime";
+import { jsx as jsx121 } from "react/jsx-runtime";
+import { jsx as jsx122 } from "react/jsx-runtime";
+import { jsx as jsx123 } from "react/jsx-runtime";
+import { jsx as jsx124 } from "react/jsx-runtime";
+import { jsx as jsx125 } from "react/jsx-runtime";
+import { jsx as jsx126 } from "react/jsx-runtime";
+import { jsx as jsx127 } from "react/jsx-runtime";
+import { jsx as jsx128 } from "react/jsx-runtime";
+import { jsx as jsx129 } from "react/jsx-runtime";
+import { jsx as jsx130 } from "react/jsx-runtime";
+import { jsx as jsx131 } from "react/jsx-runtime";
+import { jsx as jsx132 } from "react/jsx-runtime";
+import { jsx as jsx133 } from "react/jsx-runtime";
+import { jsx as jsx134 } from "react/jsx-runtime";
+import { jsx as jsx135 } from "react/jsx-runtime";
+import { jsx as jsx136 } from "react/jsx-runtime";
+import { jsx as jsx137 } from "react/jsx-runtime";
+import { jsx as jsx138 } from "react/jsx-runtime";
+import { jsx as jsx139 } from "react/jsx-runtime";
+import { jsx as jsx140 } from "react/jsx-runtime";
+import { jsx as jsx141 } from "react/jsx-runtime";
+import { jsx as jsx142 } from "react/jsx-runtime";
+import { jsx as jsx143 } from "react/jsx-runtime";
+import { jsx as jsx144 } from "react/jsx-runtime";
+import { jsx as jsx145 } from "react/jsx-runtime";
+import { jsx as jsx146 } from "react/jsx-runtime";
+import { jsx as jsx147 } from "react/jsx-runtime";
+import { jsx as jsx148 } from "react/jsx-runtime";
+import { jsx as jsx149 } from "react/jsx-runtime";
+import { jsx as jsx150 } from "react/jsx-runtime";
+import { jsx as jsx151 } from "react/jsx-runtime";
+import { jsx as jsx152 } from "react/jsx-runtime";
+import { jsx as jsx153 } from "react/jsx-runtime";
+import { jsx as jsx154 } from "react/jsx-runtime";
+import { jsx as jsx155 } from "react/jsx-runtime";
+import { jsx as jsx156 } from "react/jsx-runtime";
+import { jsx as jsx157 } from "react/jsx-runtime";
+import { jsx as jsx158 } from "react/jsx-runtime";
+import { jsx as jsx159 } from "react/jsx-runtime";
+import { jsx as jsx160 } from "react/jsx-runtime";
+import { jsx as jsx161 } from "react/jsx-runtime";
+import { jsx as jsx162 } from "react/jsx-runtime";
+import { jsx as jsx163 } from "react/jsx-runtime";
+import { jsx as jsx164 } from "react/jsx-runtime";
+import { jsx as jsx165 } from "react/jsx-runtime";
+import { jsx as jsx166 } from "react/jsx-runtime";
+import { jsx as jsx167 } from "react/jsx-runtime";
+import { jsx as jsx168 } from "react/jsx-runtime";
+import { jsx as jsx169 } from "react/jsx-runtime";
+import { jsx as jsx170 } from "react/jsx-runtime";
+import { jsx as jsx171 } from "react/jsx-runtime";
+import { jsx as jsx172 } from "react/jsx-runtime";
+import { jsx as jsx173 } from "react/jsx-runtime";
+import { jsx as jsx174 } from "react/jsx-runtime";
+import { jsx as jsx175 } from "react/jsx-runtime";
+import { jsx as jsx176 } from "react/jsx-runtime";
+import { jsx as jsx177 } from "react/jsx-runtime";
+import { jsx as jsx178 } from "react/jsx-runtime";
+import { jsx as jsx179 } from "react/jsx-runtime";
+import { jsx as jsx180 } from "react/jsx-runtime";
+import { jsx as jsx181 } from "react/jsx-runtime";
+import { jsx as jsx182 } from "react/jsx-runtime";
+import { jsx as jsx183 } from "react/jsx-runtime";
+import { jsx as jsx184 } from "react/jsx-runtime";
+import { jsx as jsx185 } from "react/jsx-runtime";
+import { jsx as jsx186 } from "react/jsx-runtime";
+import { jsx as jsx187 } from "react/jsx-runtime";
+import { jsx as jsx188 } from "react/jsx-runtime";
+import { jsx as jsx189 } from "react/jsx-runtime";
+import { jsx as jsx190 } from "react/jsx-runtime";
+import { jsx as jsx191 } from "react/jsx-runtime";
+import { jsx as jsx192 } from "react/jsx-runtime";
+import { jsx as jsx193 } from "react/jsx-runtime";
+import { jsx as jsx194 } from "react/jsx-runtime";
+import { jsx as jsx195 } from "react/jsx-runtime";
+import { jsx as jsx196 } from "react/jsx-runtime";
+import { jsx as jsx197 } from "react/jsx-runtime";
+import { jsx as jsx198 } from "react/jsx-runtime";
+import { jsx as jsx199 } from "react/jsx-runtime";
+import { jsx as jsx200 } from "react/jsx-runtime";
+import { jsx as jsx201 } from "react/jsx-runtime";
+import { jsx as jsx202 } from "react/jsx-runtime";
+import { jsx as jsx203 } from "react/jsx-runtime";
+import { jsx as jsx204 } from "react/jsx-runtime";
+import { jsx as jsx205 } from "react/jsx-runtime";
+import { jsx as jsx206 } from "react/jsx-runtime";
+import { jsx as jsx207 } from "react/jsx-runtime";
+import { jsx as jsx208 } from "react/jsx-runtime";
+import { jsx as jsx209 } from "react/jsx-runtime";
+import { jsx as jsx210 } from "react/jsx-runtime";
+import { jsx as jsx211 } from "react/jsx-runtime";
+import { jsx as jsx212 } from "react/jsx-runtime";
+import { jsx as jsx213 } from "react/jsx-runtime";
+import { jsx as jsx214 } from "react/jsx-runtime";
+import { jsx as jsx215 } from "react/jsx-runtime";
+import { jsx as jsx216 } from "react/jsx-runtime";
+import { jsx as jsx217 } from "react/jsx-runtime";
+import { jsx as jsx218 } from "react/jsx-runtime";
+import { jsx as jsx219 } from "react/jsx-runtime";
+import { jsx as jsx220 } from "react/jsx-runtime";
+import { jsx as jsx221 } from "react/jsx-runtime";
+import { jsx as jsx2222 } from "react/jsx-runtime";
+import { jsx as jsx223 } from "react/jsx-runtime";
+import { jsx as jsx224 } from "react/jsx-runtime";
+import { jsx as jsx225 } from "react/jsx-runtime";
+import { jsx as jsx226 } from "react/jsx-runtime";
+import { jsx as jsx227 } from "react/jsx-runtime";
+import { jsx as jsx228 } from "react/jsx-runtime";
+import { jsx as jsx229 } from "react/jsx-runtime";
+import { jsx as jsx230 } from "react/jsx-runtime";
+import { jsx as jsx231 } from "react/jsx-runtime";
+import { jsx as jsx232 } from "react/jsx-runtime";
+import { jsx as jsx233 } from "react/jsx-runtime";
+import { jsx as jsx234 } from "react/jsx-runtime";
+import { jsx as jsx235 } from "react/jsx-runtime";
+import { jsx as jsx236 } from "react/jsx-runtime";
+import { jsx as jsx237 } from "react/jsx-runtime";
+import { jsx as jsx238 } from "react/jsx-runtime";
+import { jsx as jsx239 } from "react/jsx-runtime";
+import { jsx as jsx240 } from "react/jsx-runtime";
+import { jsx as jsx241 } from "react/jsx-runtime";
+import { jsx as jsx242 } from "react/jsx-runtime";
+import { jsx as jsx243 } from "react/jsx-runtime";
+import { jsx as jsx244 } from "react/jsx-runtime";
+import { jsx as jsx245 } from "react/jsx-runtime";
+import { jsx as jsx246 } from "react/jsx-runtime";
+import { jsx as jsx247 } from "react/jsx-runtime";
+import { jsx as jsx248 } from "react/jsx-runtime";
+import { jsx as jsx249 } from "react/jsx-runtime";
+import { jsx as jsx250 } from "react/jsx-runtime";
+import { jsx as jsx251 } from "react/jsx-runtime";
+import { jsx as jsx252 } from "react/jsx-runtime";
+import { jsx as jsx253 } from "react/jsx-runtime";
+import { jsx as jsx254 } from "react/jsx-runtime";
+import { jsx as jsx255 } from "react/jsx-runtime";
+import { jsx as jsx256 } from "react/jsx-runtime";
+import { jsx as jsx257 } from "react/jsx-runtime";
+import { jsx as jsx258 } from "react/jsx-runtime";
+import { jsx as jsx259 } from "react/jsx-runtime";
+import { jsx as jsx260 } from "react/jsx-runtime";
+import { jsx as jsx261 } from "react/jsx-runtime";
+import { jsx as jsx262 } from "react/jsx-runtime";
+import { jsx as jsx263 } from "react/jsx-runtime";
+import { jsx as jsx264 } from "react/jsx-runtime";
+import { jsx as jsx265 } from "react/jsx-runtime";
+import { jsx as jsx266 } from "react/jsx-runtime";
+import { jsx as jsx267 } from "react/jsx-runtime";
+import { jsx as jsx268 } from "react/jsx-runtime";
+import { jsx as jsx269 } from "react/jsx-runtime";
+import { jsx as jsx270 } from "react/jsx-runtime";
+import { jsx as jsx271 } from "react/jsx-runtime";
+import { jsx as jsx272 } from "react/jsx-runtime";
+import { jsx as jsx273 } from "react/jsx-runtime";
+import { jsx as jsx274 } from "react/jsx-runtime";
+import { jsx as jsx275 } from "react/jsx-runtime";
+import { jsx as jsx276 } from "react/jsx-runtime";
+import { jsx as jsx277 } from "react/jsx-runtime";
+import { jsx as jsx278 } from "react/jsx-runtime";
+import { jsx as jsx279 } from "react/jsx-runtime";
+import { jsx as jsx280 } from "react/jsx-runtime";
+import { jsx as jsx281 } from "react/jsx-runtime";
+import { jsx as jsx282 } from "react/jsx-runtime";
+import { jsx as jsx283 } from "react/jsx-runtime";
+import { jsx as jsx284 } from "react/jsx-runtime";
+import { jsx as jsx285 } from "react/jsx-runtime";
+import { jsx as jsx286 } from "react/jsx-runtime";
+import { jsx as jsx287 } from "react/jsx-runtime";
+import { jsx as jsx288 } from "react/jsx-runtime";
+import { jsx as jsx289 } from "react/jsx-runtime";
+import { jsx as jsx290 } from "react/jsx-runtime";
+import { jsx as jsx291 } from "react/jsx-runtime";
+import { jsx as jsx292 } from "react/jsx-runtime";
+import { jsx as jsx293 } from "react/jsx-runtime";
+import { jsx as jsx294 } from "react/jsx-runtime";
+import { jsx as jsx295 } from "react/jsx-runtime";
+import { jsx as jsx296 } from "react/jsx-runtime";
+import { jsx as jsx297 } from "react/jsx-runtime";
+import { jsx as jsx298 } from "react/jsx-runtime";
+import { jsx as jsx299 } from "react/jsx-runtime";
+import { jsx as jsx300 } from "react/jsx-runtime";
+import { jsx as jsx301 } from "react/jsx-runtime";
+import { jsx as jsx302 } from "react/jsx-runtime";
+import { jsx as jsx303 } from "react/jsx-runtime";
+import { jsx as jsx304 } from "react/jsx-runtime";
+import { jsx as jsx305 } from "react/jsx-runtime";
+import { jsx as jsx306 } from "react/jsx-runtime";
+import { jsx as jsx307 } from "react/jsx-runtime";
+import { jsx as jsx308 } from "react/jsx-runtime";
+import { jsx as jsx309 } from "react/jsx-runtime";
+import { jsx as jsx310 } from "react/jsx-runtime";
+import { jsx as jsx311 } from "react/jsx-runtime";
+import { jsx as jsx312 } from "react/jsx-runtime";
+import { jsx as jsx313 } from "react/jsx-runtime";
+import { jsx as jsx314 } from "react/jsx-runtime";
+import { jsx as jsx315 } from "react/jsx-runtime";
+import { jsx as jsx316 } from "react/jsx-runtime";
+import { jsx as jsx317 } from "react/jsx-runtime";
+import { jsx as jsx318 } from "react/jsx-runtime";
+import { jsx as jsx319 } from "react/jsx-runtime";
+import { jsx as jsx320 } from "react/jsx-runtime";
+import { jsx as jsx321 } from "react/jsx-runtime";
+import { jsx as jsx3222 } from "react/jsx-runtime";
+import { jsx as jsx323 } from "react/jsx-runtime";
+import { jsx as jsx324 } from "react/jsx-runtime";
+import { jsx as jsx325 } from "react/jsx-runtime";
+import { jsx as jsx326 } from "react/jsx-runtime";
+import { jsx as jsx327 } from "react/jsx-runtime";
+import { jsx as jsx328 } from "react/jsx-runtime";
+import { jsx as jsx329 } from "react/jsx-runtime";
+import { jsx as jsx330 } from "react/jsx-runtime";
+import { jsx as jsx331 } from "react/jsx-runtime";
+import { jsx as jsx332 } from "react/jsx-runtime";
+import { jsx as jsx333 } from "react/jsx-runtime";
+import { jsx as jsx334 } from "react/jsx-runtime";
+import { jsx as jsx335 } from "react/jsx-runtime";
+import { jsx as jsx336 } from "react/jsx-runtime";
+import { jsx as jsx337 } from "react/jsx-runtime";
+import { jsx as jsx338 } from "react/jsx-runtime";
+import { jsx as jsx339 } from "react/jsx-runtime";
+import { jsx as jsx340 } from "react/jsx-runtime";
+import { jsx as jsx341 } from "react/jsx-runtime";
+import { jsx as jsx342 } from "react/jsx-runtime";
+import { jsx as jsx343 } from "react/jsx-runtime";
+import { jsx as jsx344 } from "react/jsx-runtime";
+import { jsx as jsx345 } from "react/jsx-runtime";
+import { jsx as jsx346 } from "react/jsx-runtime";
+import { jsx as jsx347 } from "react/jsx-runtime";
+import { jsx as jsx348 } from "react/jsx-runtime";
+import { jsx as jsx349 } from "react/jsx-runtime";
+import { jsx as jsx350 } from "react/jsx-runtime";
+import { jsx as jsx351 } from "react/jsx-runtime";
+import { jsx as jsx352 } from "react/jsx-runtime";
+import { jsx as jsx353 } from "react/jsx-runtime";
+import { jsx as jsx354 } from "react/jsx-runtime";
+import { jsx as jsx355 } from "react/jsx-runtime";
+import { jsx as jsx356 } from "react/jsx-runtime";
+import { jsx as jsx357 } from "react/jsx-runtime";
+import { jsx as jsx358 } from "react/jsx-runtime";
+import { jsx as jsx359 } from "react/jsx-runtime";
+import { jsx as jsx360 } from "react/jsx-runtime";
+import { jsx as jsx361 } from "react/jsx-runtime";
+import { jsx as jsx362 } from "react/jsx-runtime";
+import { jsx as jsx363 } from "react/jsx-runtime";
+import { jsx as jsx364 } from "react/jsx-runtime";
+import { jsx as jsx365 } from "react/jsx-runtime";
+import { jsx as jsx366 } from "react/jsx-runtime";
+import { jsx as jsx367 } from "react/jsx-runtime";
+import { jsx as jsx368 } from "react/jsx-runtime";
+import { jsx as jsx369 } from "react/jsx-runtime";
+import { jsx as jsx370 } from "react/jsx-runtime";
+import { jsx as jsx371 } from "react/jsx-runtime";
+import { jsx as jsx372 } from "react/jsx-runtime";
+import { jsx as jsx373 } from "react/jsx-runtime";
+import { jsx as jsx374 } from "react/jsx-runtime";
+import { jsx as jsx375 } from "react/jsx-runtime";
+import { jsx as jsx376 } from "react/jsx-runtime";
+import { jsx as jsx377 } from "react/jsx-runtime";
+import { jsx as jsx378 } from "react/jsx-runtime";
+import { jsx as jsx379 } from "react/jsx-runtime";
+import { jsx as jsx380 } from "react/jsx-runtime";
+import { jsx as jsx381 } from "react/jsx-runtime";
+import { jsx as jsx382 } from "react/jsx-runtime";
+import { jsx as jsx383 } from "react/jsx-runtime";
+import { jsx as jsx384 } from "react/jsx-runtime";
+import { jsx as jsx385 } from "react/jsx-runtime";
+import { jsx as jsx386 } from "react/jsx-runtime";
+import { jsx as jsx387 } from "react/jsx-runtime";
+var StyledIcon2 = styled4.div`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: ${(props) => props.$size};
+  height: ${(props) => props.$size};
+  color: ${(props) => props.$color};
+
+  svg {
+    width: 100%;
+    height: 100%;
   }
-);
+`;
+var BaseIcon = ({
+  variant = "line",
+  size = 24,
+  color = "currentColor",
+  solidContent: solidContent387,
+  lineContent: lineContent387,
+  className,
+  style,
+  "data-testid": testId,
+  "aria-label": ariaLabel,
+  "aria-hidden": ariaHidden
+}) => {
+  const svgContent = variant === "line" ? lineContent387 : solidContent387;
+  const sizeValue = typeof size === "number" ? `${size}px` : size;
+  return /* @__PURE__ */ jsx4(
+    StyledIcon2,
+    {
+      $size: sizeValue,
+      $color: color,
+      className,
+      style,
+      "data-testid": testId,
+      role: ariaLabel ? "img" : void 0,
+      "aria-label": ariaLabel,
+      "aria-hidden": ariaHidden != null ? ariaHidden : ariaLabel ? void 0 : true,
+      dangerouslySetInnerHTML: { __html: svgContent }
+    }
+  );
+};
+var solidContent71 = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><g id="icon_chevron-down--solid"><path id="Union" d="M7.19337 11.1943C6.75239 10.7533 7.06471 9.99933 7.68834 9.99933L16.3084 9.99933C16.9321 9.99933 17.2444 10.7533 16.8034 11.1943L12.7055 15.2922C12.315 15.6827 11.6818 15.6827 11.2913 15.2922L7.19337 11.1943Z" style="fill: currentColor"/></g></svg>`;
+var lineContent71 = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><g id="icon_chevron-down--line"><path id="Union" d="M12.7178 15.7808C12.3273 16.1713 11.6942 16.1713 11.3036 15.7808L4.30371 8.78084L5.71777 7.36678L12.0107 13.6597L18.3037 7.36678L19.7178 8.78084L12.7178 15.7808Z" style="fill: currentColor"/></g></svg>`;
+var ChevronDown = (props) => /* @__PURE__ */ jsx72(BaseIcon, { ...props, solidContent: solidContent71, lineContent: lineContent71 });
+var solidContent80 = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><g id="icon_chevron-up--solid"><path id="Union" d="M16.8066 12.8057C17.2476 13.2467 16.9352 14.0007 16.3116 14.0007H7.69152C7.06788 14.0007 6.75557 13.2467 7.19654 12.8057L11.2945 8.70778C11.685 8.31726 12.3181 8.31726 12.7087 8.70778L16.8066 12.8057Z" style="fill: currentColor"/></g></svg>`;
+var lineContent80 = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><g id="icon_chevron-up--line"><path id="Union" d="M11.2929 7.93945C11.6834 7.54893 12.3166 7.54893 12.7071 7.93945L19.707 14.9394L18.293 16.3534L12 10.0605L5.70703 16.3534L4.29297 14.9394L11.2929 7.93945Z" style="fill: currentColor"/></g></svg>`;
+var ChevronUp = (props) => /* @__PURE__ */ jsx81(BaseIcon, { ...props, solidContent: solidContent80, lineContent: lineContent80 });
+var solidContent89 = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><g id="icon_exclamation-mark-cr--solid"><path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 16C11.4477 16 11 16.4477 11 17C11 17.5523 11.4477 18 12 18C12.5523 18 13 17.5523 13 17C13 16.4477 12.5523 16 12 16ZM11 6V14H13V6H11Z" style="fill: currentColor"/></g></svg>`;
+var lineContent89 = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><g id="icon_exclamation-mark-cr--line"><g id="Union"><path d="M13 17C13 17.5523 12.5523 18 12 18C11.4477 18 11 17.5523 11 17C11 16.4477 11.4477 16 12 16C12.5523 16 13 16.4477 13 17Z" style="fill: currentColor"/><path d="M13 14H11V6H13V14Z" style="fill: currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4Z" style="fill: currentColor"/></g></g></svg>`;
+var ExclamationMarkCr = (props) => /* @__PURE__ */ jsx90(BaseIcon, { ...props, solidContent: solidContent89, lineContent: lineContent89 });
+var solidContent373 = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><g id="icon_search--line"><path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M10 2C14.4183 2 18 5.58172 18 10C18 11.8484 17.3711 13.5488 16.3184 14.9033L21.957 20.543L20.543 21.957L14.9033 16.3174C13.5487 17.3703 11.8486 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2ZM10 4C6.68629 4 4 6.68629 4 10C4 13.3137 6.68629 16 10 16C13.3137 16 16 13.3137 16 10C16 6.68629 13.3137 4 10 4Z" style="fill: currentColor"/></g></svg>`;
+var lineContent373 = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><g id="icon_search--line"><path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M10 2C14.4183 2 18 5.58172 18 10C18 11.8484 17.3711 13.5488 16.3184 14.9033L21.957 20.543L20.543 21.957L14.9033 16.3174C13.5487 17.3703 11.8486 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2ZM10 4C6.68629 4 4 6.68629 4 10C4 13.3137 6.68629 16 10 16C13.3137 16 16 13.3137 16 10C16 6.68629 13.3137 4 10 4Z" style="fill: currentColor"/></g></svg>`;
+var Search = (props) => /* @__PURE__ */ jsx374(BaseIcon, { ...props, solidContent: solidContent373, lineContent: lineContent373 });
+
+// src/Select.tsx
+import { jsx as jsx388, jsxs } from "react/jsx-runtime";
 var Select = ({
   value,
   placeholder = "Select",
@@ -348,9 +698,11 @@ var Select = ({
   searchable = false,
   searchPlaceholder = "Search",
   noOptionsMessage = "No results",
-  maxHeight = 300
+  maxHeight = 300,
+  themeMode,
+  themeProductContext
 }) => {
-  const { theme } = useDesignSystem();
+  const { theme } = useResolvedTheme({ themeMode, themeProductContext });
   const [isOpen, setIsOpen] = useState(false);
   const [selectedValue, setSelectedValue] = useState(value);
   const [searchValue, setSearchValue] = useState("");
@@ -370,7 +722,7 @@ var Select = ({
     if (isFocus && selectedItemRef.current && dropdownRef.current) {
       const timeoutId = setTimeout(() => {
         const selectedItem = selectedItemRef.current;
-        if (selectedItem) {
+        if (selectedItem && isWeb) {
           selectedItem.scrollIntoView({ block: "nearest" });
         }
       }, 0);
@@ -460,7 +812,7 @@ var Select = ({
       width: "100%",
       position: "relative",
       children: [
-        label && /* @__PURE__ */ jsx4(
+        label && /* @__PURE__ */ jsx388(
           Text,
           {
             color: theme.colors.content.secondary,
@@ -490,8 +842,8 @@ var Select = ({
               borderColor: inputColors.borderHover
             } : void 0,
             children: [
-              iconLeft && /* @__PURE__ */ jsx4(Box, { alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsx4(Icon, { size: sizeStyles.iconSize, color: iconColor, children: iconLeft }) }),
-              !iconOnly && /* @__PURE__ */ jsx4(Box, { flex: 1, height: "100%", justifyContent: "center", children: /* @__PURE__ */ jsx4(
+              iconLeft && /* @__PURE__ */ jsx388(Box, { alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsx388(Icon, { size: sizeStyles.iconSize, color: iconColor, children: iconLeft }) }),
+              !iconOnly && /* @__PURE__ */ jsx388(Box, { flex: 1, height: "100%", justifyContent: "center", children: /* @__PURE__ */ jsx388(
                 Text,
                 {
                   color: textColor,
@@ -501,15 +853,15 @@ var Select = ({
                 }
               ) }),
               /* @__PURE__ */ jsxs(Box, { flexDirection: "row", alignItems: "center", gap: 4, children: [
-                isError && /* @__PURE__ */ jsx4(
+                isError && /* @__PURE__ */ jsx388(
                   Icon,
                   {
                     size: sizeStyles.iconSize,
                     color: theme.colors.content.alert.primary,
-                    children: /* @__PURE__ */ jsx4(ExclamationMarkCr, {})
+                    children: /* @__PURE__ */ jsx388(ExclamationMarkCr, {})
                   }
                 ),
-                /* @__PURE__ */ jsx4(Icon, { size: sizeStyles.iconSize, color: iconColor, children: iconRight !== void 0 ? iconRight : isFocus ? /* @__PURE__ */ jsx4(ChevronUp, {}) : /* @__PURE__ */ jsx4(ChevronDown, {}) })
+                /* @__PURE__ */ jsx388(Icon, { size: sizeStyles.iconSize, color: iconColor, children: iconRight !== void 0 ? iconRight : isFocus ? /* @__PURE__ */ jsx388(ChevronUp, {}) : /* @__PURE__ */ jsx388(ChevronDown, {}) })
               ] })
             ]
           }
@@ -527,11 +879,11 @@ var Select = ({
             borderRadius: theme.radius.button,
             style: {
               zIndex: 1e3,
-              boxShadow: "0 4px 12px rgba(0,0,0,0.1)",
+              ...isNative ? { elevation: 4 } : { boxShadow: "0 4px 12px rgba(0,0,0,0.1)" },
               minWidth: iconOnly ? sizeStyles.height * 3 : void 0
             },
             children: [
-              searchable && /* @__PURE__ */ jsx4(
+              searchable && !isNative && /* @__PURE__ */ jsx388(
                 Box,
                 {
                   paddingHorizontal: sizeStyles.paddingHorizontal,
@@ -546,15 +898,15 @@ var Select = ({
                       gap: sizeStyles.paddingHorizontal / 2,
                       paddingHorizontal: 4,
                       children: [
-                        /* @__PURE__ */ jsx4(
+                        /* @__PURE__ */ jsx388(
                           Icon,
                           {
                             size: sizeStyles.iconSize - 2,
                             color: inputColors.placeholder,
-                            children: /* @__PURE__ */ jsx4(SearchIcon, {})
+                            children: /* @__PURE__ */ jsx388(Search, {})
                           }
                         ),
-                        /* @__PURE__ */ jsx4(
+                        /* @__PURE__ */ jsx388(
                           Box,
                           {
                             as: "input",
@@ -579,21 +931,22 @@ var Select = ({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx4(
+              /* @__PURE__ */ jsx388(
                 Box,
                 {
                   paddingVertical: 4,
+                  overflow: "scroll",
                   style: {
                     maxHeight: searchable ? maxHeight - 60 : maxHeight,
-                    overflowY: "auto"
+                    ...isWeb ? { overflowY: "auto" } : {}
                   },
-                  children: filteredOptions.length === 0 ? /* @__PURE__ */ jsx4(
+                  children: filteredOptions.length === 0 ? /* @__PURE__ */ jsx388(
                     Box,
                     {
                       paddingVertical: sizeStyles.paddingVertical * 2,
                       paddingHorizontal: sizeStyles.paddingHorizontal,
                       alignItems: "center",
-                      children: /* @__PURE__ */ jsx4(
+                      children: /* @__PURE__ */ jsx388(
                         Text,
                         {
                           color: theme.colors.content.tertiary,
@@ -609,7 +962,7 @@ var Select = ({
                     const isSelected = optionValue === selectedValue;
                     const brandColors = theme.colors.control.brand.primary;
                     const contentColors = theme.colors.content;
-                    return /* @__PURE__ */ jsx4(
+                    return /* @__PURE__ */ jsx388(
                       Box,
                       {
                         ref: isSelected ? selectedItemRef : void 0,
@@ -621,13 +974,15 @@ var Select = ({
                         justifyContent: "space-between",
                         backgroundColor: isSelected ? brandColors.bg : "transparent",
                         style: {
-                          cursor: isOptionDisabled ? "not-allowed" : "pointer",
+                          ...isWeb ? {
+                            cursor: isOptionDisabled ? "not-allowed" : "pointer"
+                          } : {},
                           opacity: isOptionDisabled ? 0.5 : 1
                         },
                         hoverStyle: !isSelected && !isOptionDisabled ? {
                           backgroundColor: theme.colors.control.input.bgHover
                         } : void 0,
-                        children: /* @__PURE__ */ jsx4(
+                        children: /* @__PURE__ */ jsx388(
                           Text,
                           {
                             color: isSelected ? contentColors.on.brand : theme.colors.content.secondary,
@@ -645,7 +1000,7 @@ var Select = ({
             ]
           }
         ),
-        isError && errorMessage && /* @__PURE__ */ jsx4(
+        isError && errorMessage && /* @__PURE__ */ jsx388(
           Text,
           {
             color: theme.colors.content.alert.primary,