@xsolla/xui-multi-select 0.89.0 → 0.91.0

package/web/index.js

@@ -35,7 +35,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/MultiSelect.tsx
-var import_react15 = require("react");
+var import_react8 = require("react");
 
 // ../primitives-web/src/Box.tsx
 var import_react = __toESM(require("react"));
@@ -238,54 +238,10 @@ var Text = ({
   );
 };
 
-// ../primitives-web/src/Spinner.tsx
+// ../primitives-web/src/Icon.tsx
 var import_styled_components3 = __toESM(require("styled-components"));
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var rotate = import_styled_components3.keyframes`
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-`;
-var StyledSpinner = import_styled_components3.default.div`
-  width: ${(props) => typeof props.size === "number" ? `${props.size}px` : props.size || "24px"};
-  height: ${(props) => typeof props.size === "number" ? `${props.size}px` : props.size || "24px"};
-  border: ${(props) => props.strokeWidth || 2}px solid
-    ${(props) => props.color || "currentColor"};
-  border-bottom-color: transparent;
-  border-radius: 50%;
-  display: inline-block;
-  box-sizing: border-box;
-  animation: ${rotate} 1s linear infinite;
-`;
-var Spinner = ({
-  role = "status",
-  "aria-label": ariaLabel,
-  "aria-live": ariaLive = "polite",
-  "aria-describedby": ariaDescribedBy,
-  testID,
-  ...props
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    StyledSpinner,
-    {
-      role,
-      "aria-label": ariaLabel,
-      "aria-live": ariaLive,
-      "aria-describedby": ariaDescribedBy,
-      "data-testid": testID,
-      ...props
-    }
-  );
-};
-Spinner.displayName = "Spinner";
-
-// ../primitives-web/src/Icon.tsx
-var import_styled_components4 = __toESM(require("styled-components"));
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var StyledIcon = import_styled_components4.default.div`
+var StyledIcon = import_styled_components3.default.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -301,202 +257,22 @@ var StyledIcon = import_styled_components4.default.div`
   }
 `;
 var Icon = ({ children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(StyledIcon, { ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StyledIcon, { ...props, children });
 };
 
-// ../primitives-web/src/Divider.tsx
-var import_styled_components5 = __toESM(require("styled-components"));
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var StyledDivider = import_styled_components5.default.div`
-  background-color: ${(props) => props.dashStroke ? "transparent" : props.color || "rgba(255, 255, 255, 0.15)"};
-  width: ${(props) => props.vertical ? typeof props.width === "number" ? `${props.width}px` : props.width || "1px" : "100%"};
-  height: ${(props) => props.vertical ? "100%" : typeof props.height === "number" ? `${props.height}px` : props.height || "1px"};
-
-  ${(props) => props.dashStroke && `
-    border-style: dashed;
-    border-color: ${props.color || "rgba(255, 255, 255, 0.15)"};
-    border-width: 0;
-    ${props.vertical ? `
-      border-left-width: ${typeof props.width === "number" ? `${props.width}px` : props.width || "1px"};
-      height: 100%;
-    ` : `
-      border-top-width: ${typeof props.height === "number" ? `${props.height}px` : props.height || "1px"};
-      width: 100%;
-    `}
-  `}
-`;
-
-// ../primitives-web/src/Input.tsx
-var import_react2 = require("react");
-var import_styled_components6 = __toESM(require("styled-components"));
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var StyledInput = import_styled_components6.default.input`
-  background: transparent;
-  border: none;
-  outline: none;
-  width: 100%;
-  height: 100%;
-  padding: 0;
-  margin: 0;
-  color: ${(props) => props.color || "inherit"};
-  font-size: ${(props) => typeof props.fontSize === "number" ? `${props.fontSize}px` : props.fontSize || "inherit"};
-  font-family: inherit;
-  text-align: inherit;
-
-  &::placeholder {
-    color: ${(props) => props.placeholderTextColor || "rgba(255, 255, 255, 0.5)"};
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-  }
-`;
-var InputPrimitive = (0, import_react2.forwardRef)(
-  ({
-    value,
-    placeholder,
-    onChange,
-    onChangeText,
-    onFocus,
-    onBlur,
-    onKeyDown,
-    disabled,
-    secureTextEntry,
-    style,
-    color,
-    fontSize,
-    placeholderTextColor,
-    maxLength,
-    name,
-    type,
-    inputMode,
-    autoComplete,
-    id,
-    "aria-invalid": ariaInvalid,
-    "aria-describedby": ariaDescribedBy,
-    "aria-labelledby": ariaLabelledBy,
-    "aria-label": ariaLabel,
-    "aria-disabled": ariaDisabled,
-    "data-testid": dataTestId,
-    ...rest
-  }, ref) => {
-    const handleChange = (e) => {
-      if (onChange) {
-        onChange(e);
-      }
-      if (onChangeText) {
-        onChangeText(e.target.value);
-      }
-    };
-    const inputValue = value !== void 0 ? value : "";
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      StyledInput,
-      {
-        ref,
-        id,
-        value: inputValue,
-        name,
-        placeholder,
-        onChange: handleChange,
-        onFocus,
-        onBlur,
-        onKeyDown,
-        disabled,
-        type: secureTextEntry ? "password" : type || "text",
-        inputMode,
-        autoComplete,
-        style,
-        color,
-        fontSize,
-        placeholderTextColor,
-        maxLength,
-        "aria-invalid": ariaInvalid,
-        "aria-describedby": ariaDescribedBy,
-        "aria-labelledby": ariaLabelledBy,
-        "aria-label": ariaLabel,
-        "aria-disabled": ariaDisabled,
-        "data-testid": dataTestId,
-        ...rest
-      }
-    );
-  }
-);
-InputPrimitive.displayName = "InputPrimitive";
-
-// ../primitives-web/src/TextArea.tsx
-var import_react3 = require("react");
-var import_styled_components7 = __toESM(require("styled-components"));
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var StyledTextArea = import_styled_components7.default.textarea`
-  background: transparent;
-  border: none;
-  outline: none;
-  width: 100%;
-  height: 100%;
-  padding: 0;
-  margin: 0;
-  color: ${(props) => props.color || "inherit"};
-  font-size: ${(props) => typeof props.fontSize === "number" ? `${props.fontSize}px` : props.fontSize || "inherit"};
-  font-family: inherit;
-  text-align: inherit;
-  resize: none;
-
-  &::placeholder {
-    color: ${(props) => props.placeholderTextColor || "rgba(255, 255, 255, 0.5)"};
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-  }
-`;
-var TextAreaPrimitive = (0, import_react3.forwardRef)(
-  ({
-    value,
-    placeholder,
-    onChangeText,
-    onFocus,
-    onBlur,
-    onKeyDown,
-    disabled,
-    style,
-    color,
-    fontSize,
-    placeholderTextColor,
-    maxLength,
-    rows
-  }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      StyledTextArea,
-      {
-        ref,
-        value,
-        placeholder,
-        onChange: (e) => onChangeText?.(e.target.value),
-        onFocus,
-        onBlur,
-        onKeyDown,
-        disabled,
-        style,
-        color,
-        fontSize,
-        placeholderTextColor,
-        maxLength,
-        rows
-      }
-    );
-  }
-);
-TextAreaPrimitive.displayName = "TextAreaPrimitive";
-
 // src/MultiSelect.tsx
 var import_xui_core4 = require("@xsolla/xui-core");
 
 // src/MultiSelectControl.tsx
-var import_react13 = require("react");
+var import_react6 = require("react");
 var import_xui_core3 = require("@xsolla/xui-core");
 
 // ../icons-base/dist/web/index.mjs
-var import_styled_components8 = __toESM(require("styled-components"), 1);
+var import_styled_components4 = __toESM(require("styled-components"), 1);
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var import_jsx_runtime10 = require("react/jsx-runtime");
@@ -874,11 +650,7 @@ var import_jsx_runtime381 = require("react/jsx-runtime");
 var import_jsx_runtime382 = require("react/jsx-runtime");
 var import_jsx_runtime383 = require("react/jsx-runtime");
 var import_jsx_runtime384 = require("react/jsx-runtime");
-var import_jsx_runtime385 = require("react/jsx-runtime");
-var import_jsx_runtime386 = require("react/jsx-runtime");
-var import_jsx_runtime387 = require("react/jsx-runtime");
-var import_jsx_runtime388 = require("react/jsx-runtime");
-var StyledIcon2 = import_styled_components8.default.div`
+var StyledIcon2 = import_styled_components4.default.div`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -905,7 +677,7 @@ var BaseIcon = ({
 }) => {
   const svgContent = variant === "line" ? lineContent381 : solidContent381;
   const sizeValue = typeof size === "number" ? `${size}px` : size;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     StyledIcon2,
     {
       $size: sizeValue,
@@ -922,61 +694,36 @@ var BaseIcon = ({
 };
 var solidContent69 = `<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.19471 10.195C6.75374 9.754 7.06605 9 7.68969 9L16.3098 9C16.9334 9 17.2457 9.754 16.8048 10.195L12.7068 14.2929C12.3163 14.6834 11.6832 14.6834 11.2926 14.2929L7.19471 10.195Z" style="fill: currentColor"/></g></svg>`;
 var lineContent69 = `<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__ */ (0, import_jsx_runtime77.jsx)(BaseIcon, { ...props, solidContent: solidContent69, lineContent: lineContent69 });
+var ChevronDown = (props) => /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(BaseIcon, { ...props, solidContent: solidContent69, lineContent: lineContent69 });
 var solidContent78 = `<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.8048 12.8049C17.2457 13.2458 16.9334 13.9998 16.3098 13.9998H7.68968C7.06605 13.9998 6.75373 13.2458 7.19471 12.8049L11.2926 8.70696C11.6832 8.31643 12.3163 8.31643 12.7068 8.70696L16.8048 12.8049Z" style="fill: currentColor"/></g></svg>`;
 var lineContent78 = `<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__ */ (0, import_jsx_runtime86.jsx)(BaseIcon, { ...props, solidContent: solidContent78, lineContent: lineContent78 });
+var ChevronUp = (props) => /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(BaseIcon, { ...props, solidContent: solidContent78, lineContent: lineContent78 });
 var solidContent87 = `<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 lineContent87 = `<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__ */ (0, import_jsx_runtime95.jsx)(BaseIcon, { ...props, solidContent: solidContent87, lineContent: lineContent87 });
+var ExclamationMarkCr = (props) => /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(BaseIcon, { ...props, solidContent: solidContent87, lineContent: lineContent87 });
 var solidContent111 = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><g id="icon_remove--solid"><path id="Union" d="M19.7789 7.05003C20.1695 7.44056 20.1695 8.07372 19.7789 8.46424L16.2434 11.9998L19.7789 15.5353C20.1695 15.9258 20.1695 16.559 19.7789 16.9495L16.9505 19.778C16.56 20.1685 15.9268 20.1685 15.5363 19.778L12.0008 16.2424L8.46522 19.778C8.0747 20.1685 7.44153 20.1685 7.05101 19.778L4.22258 16.9495C3.83206 16.559 3.83206 15.9258 4.22258 15.5353L7.75811 11.9998L4.22258 8.46424C3.83206 8.07372 3.83206 7.44056 4.22258 7.05003L7.05101 4.2216C7.44153 3.83108 8.0747 3.83108 8.46522 4.2216L12.0008 7.75714L15.5363 4.2216C15.9268 3.83108 16.56 3.83108 16.9505 4.2216L19.7789 7.05003Z" style="fill: currentColor"/></g></svg>`;
 var lineContent111 = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><g id="icon_remove--line"><path id="Union" d="M20.0303 5.41455L13.4199 12.0249L20.0195 18.6245L18.6055 20.0386L12.0059 13.439L5.41406 20.0308L4 18.6167L10.5918 12.0249L4.00879 5.44189L5.42285 4.02783L12.0059 10.6108L18.6162 4.00049L20.0303 5.41455Z" style="fill: currentColor"/></g></svg>`;
-var Remove = (props) => /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(BaseIcon, { ...props, solidContent: solidContent111, lineContent: lineContent111 });
+var Remove = (props) => /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(BaseIcon, { ...props, solidContent: solidContent111, lineContent: lineContent111 });
 
 // src/useMultiSelectControl.tsx
-var import_react12 = require("react");
+var import_react5 = require("react");
 
 // ../tag/dist/web/index.mjs
-var import_react9 = __toESM(require("react"), 1);
-var import_styled_components16 = __toESM(require("styled-components"), 1);
-var import_jsx_runtime397 = require("react/jsx-runtime");
-var import_styled_components17 = __toESM(require("styled-components"), 1);
-var import_jsx_runtime398 = require("react/jsx-runtime");
-var import_styled_components18 = __toESM(require("styled-components"), 1);
-var import_jsx_runtime399 = require("react/jsx-runtime");
-var import_styled_components19 = __toESM(require("styled-components"), 1);
-var import_jsx_runtime400 = require("react/jsx-runtime");
-var import_styled_components20 = __toESM(require("styled-components"), 1);
-var import_jsx_runtime401 = require("react/jsx-runtime");
-var import_react10 = require("react");
-var import_styled_components21 = __toESM(require("styled-components"), 1);
-var import_jsx_runtime402 = require("react/jsx-runtime");
-var import_react11 = require("react");
-var import_styled_components22 = __toESM(require("styled-components"), 1);
-var import_jsx_runtime403 = require("react/jsx-runtime");
+var import_react4 = __toESM(require("react"), 1);
+var import_styled_components6 = __toESM(require("styled-components"), 1);
+var import_jsx_runtime387 = require("react/jsx-runtime");
+var import_styled_components7 = __toESM(require("styled-components"), 1);
+var import_jsx_runtime388 = require("react/jsx-runtime");
+var import_styled_components8 = __toESM(require("styled-components"), 1);
+var import_jsx_runtime389 = require("react/jsx-runtime");
 var import_xui_core = require("@xsolla/xui-core");
 
 // ../icons/dist/web/index.mjs
-var import_react6 = __toESM(require("react"), 1);
-var import_styled_components9 = __toESM(require("styled-components"), 1);
-var import_jsx_runtime389 = require("react/jsx-runtime");
-var import_styled_components10 = __toESM(require("styled-components"), 1);
-var import_jsx_runtime390 = require("react/jsx-runtime");
-var import_styled_components11 = __toESM(require("styled-components"), 1);
-var import_jsx_runtime391 = require("react/jsx-runtime");
-var import_styled_components12 = __toESM(require("styled-components"), 1);
-var import_jsx_runtime392 = require("react/jsx-runtime");
-var import_styled_components13 = __toESM(require("styled-components"), 1);
-var import_jsx_runtime393 = require("react/jsx-runtime");
-var import_react7 = require("react");
-var import_styled_components14 = __toESM(require("styled-components"), 1);
-var import_jsx_runtime394 = require("react/jsx-runtime");
-var import_react8 = require("react");
-var import_styled_components15 = __toESM(require("styled-components"), 1);
-var import_jsx_runtime395 = require("react/jsx-runtime");
+var import_styled_components5 = __toESM(require("styled-components"), 1);
+var import_jsx_runtime385 = require("react/jsx-runtime");
 
 // ../../node_modules/lucide-react/dist/esm/createLucideIcon.js
-var import_react5 = require("react");
+var import_react3 = require("react");
 
 // ../../node_modules/lucide-react/dist/esm/shared/src/utils.js
 var toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
@@ -985,7 +732,7 @@ var mergeClasses = (...classes) => classes.filter((className, index, array) => {
 }).join(" ").trim();
 
 // ../../node_modules/lucide-react/dist/esm/Icon.js
-var import_react4 = require("react");
+var import_react2 = require("react");
 
 // ../../node_modules/lucide-react/dist/esm/defaultAttributes.js
 var defaultAttributes = {
@@ -1001,7 +748,7 @@ var defaultAttributes = {
 };
 
 // ../../node_modules/lucide-react/dist/esm/Icon.js
-var Icon2 = (0, import_react4.forwardRef)(
+var Icon2 = (0, import_react2.forwardRef)(
   ({
     color = "currentColor",
     size = 24,
@@ -1012,7 +759,7 @@ var Icon2 = (0, import_react4.forwardRef)(
     iconNode,
     ...rest
   }, ref) => {
-    return (0, import_react4.createElement)(
+    return (0, import_react2.createElement)(
       "svg",
       {
         ref,
@@ -1025,7 +772,7 @@ var Icon2 = (0, import_react4.forwardRef)(
         ...rest
       },
       [
-        ...iconNode.map(([tag, attrs]) => (0, import_react4.createElement)(tag, attrs)),
+        ...iconNode.map(([tag, attrs]) => (0, import_react2.createElement)(tag, attrs)),
         ...Array.isArray(children) ? children : [children]
       ]
     );
@@ -1034,8 +781,8 @@ var Icon2 = (0, import_react4.forwardRef)(
 
 // ../../node_modules/lucide-react/dist/esm/createLucideIcon.js
 var createLucideIcon = (iconName, iconNode) => {
-  const Component = (0, import_react5.forwardRef)(
-    ({ className, ...props }, ref) => (0, import_react5.createElement)(Icon2, {
+  const Component = (0, import_react3.forwardRef)(
+    ({ className, ...props }, ref) => (0, import_react3.createElement)(Icon2, {
       ref,
       iconNode,
       className: mergeClasses(`lucide-${toKebabCase(iconName)}`, className),
@@ -1053,222 +800,8 @@ var X = createLucideIcon("X", [
 ]);
 
 // ../icons/dist/web/index.mjs
-var import_jsx_runtime396 = require("react/jsx-runtime");
-var StyledBox2 = import_styled_components9.default.div`
-  display: flex;
-  box-sizing: border-box;
-  background-color: ${(props) => props.backgroundColor || "transparent"};
-  border-color: ${(props) => props.borderColor || "transparent"};
-  border-width: ${(props) => typeof props.borderWidth === "number" ? `${props.borderWidth}px` : props.borderWidth || 0};
-
-  ${(props) => props.borderBottomWidth !== void 0 && `
-    border-bottom-width: ${typeof props.borderBottomWidth === "number" ? `${props.borderBottomWidth}px` : props.borderBottomWidth};
-    border-bottom-color: ${props.borderBottomColor || props.borderColor || "transparent"};
-    border-bottom-style: solid;
-  `}
-  ${(props) => props.borderTopWidth !== void 0 && `
-    border-top-width: ${typeof props.borderTopWidth === "number" ? `${props.borderTopWidth}px` : props.borderTopWidth};
-    border-top-color: ${props.borderTopColor || props.borderColor || "transparent"};
-    border-top-style: solid;
-  `}
-  ${(props) => props.borderLeftWidth !== void 0 && `
-    border-left-width: ${typeof props.borderLeftWidth === "number" ? `${props.borderLeftWidth}px` : props.borderLeftWidth};
-    border-left-color: ${props.borderLeftColor || props.borderColor || "transparent"};
-    border-left-style: solid;
-  `}
-  ${(props) => props.borderRightWidth !== void 0 && `
-    border-right-width: ${typeof props.borderRightWidth === "number" ? `${props.borderRightWidth}px` : props.borderRightWidth};
-    border-right-color: ${props.borderRightColor || props.borderColor || "transparent"};
-    border-right-style: solid;
-  `}
-
-  border-style: ${(props) => props.borderStyle || (props.borderWidth || props.borderBottomWidth || props.borderTopWidth || props.borderLeftWidth || props.borderRightWidth ? "solid" : "none")};
-  border-radius: ${(props) => typeof props.borderRadius === "number" ? `${props.borderRadius}px` : props.borderRadius || 0};
-  height: ${(props) => typeof props.height === "number" ? `${props.height}px` : props.height || "auto"};
-  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"};
-
-  padding: ${(props) => typeof props.padding === "number" ? `${props.padding}px` : props.padding || 0};
-  ${(props) => props.paddingHorizontal && `
-    padding-left: ${typeof props.paddingHorizontal === "number" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};
-    padding-right: ${typeof props.paddingHorizontal === "number" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};
-  `}
-  ${(props) => props.paddingVertical && `
-    padding-top: ${typeof props.paddingVertical === "number" ? `${props.paddingVertical}px` : props.paddingVertical};
-    padding-bottom: ${typeof props.paddingVertical === "number" ? `${props.paddingVertical}px` : props.paddingVertical};
-  `}
-  ${(props) => props.paddingTop !== void 0 && `padding-top: ${typeof props.paddingTop === "number" ? `${props.paddingTop}px` : props.paddingTop};`}
-  ${(props) => props.paddingBottom !== void 0 && `padding-bottom: ${typeof props.paddingBottom === "number" ? `${props.paddingBottom}px` : props.paddingBottom};`}
-  ${(props) => props.paddingLeft !== void 0 && `padding-left: ${typeof props.paddingLeft === "number" ? `${props.paddingLeft}px` : props.paddingLeft};`}
-  ${(props) => props.paddingRight !== void 0 && `padding-right: ${typeof props.paddingRight === "number" ? `${props.paddingRight}px` : props.paddingRight};`}
-
-  margin: ${(props) => typeof props.margin === "number" ? `${props.margin}px` : props.margin || 0};
-  ${(props) => props.marginTop !== void 0 && `margin-top: ${typeof props.marginTop === "number" ? `${props.marginTop}px` : props.marginTop};`}
-  ${(props) => props.marginBottom !== void 0 && `margin-bottom: ${typeof props.marginBottom === "number" ? `${props.marginBottom}px` : props.marginBottom};`}
-  ${(props) => props.marginLeft !== void 0 && `margin-left: ${typeof props.marginLeft === "number" ? `${props.marginLeft}px` : props.marginLeft};`}
-  ${(props) => props.marginRight !== void 0 && `margin-right: ${typeof props.marginRight === "number" ? `${props.marginRight}px` : props.marginRight};`}
-
-  flex-direction: ${(props) => props.flexDirection || "column"};
-  flex-wrap: ${(props) => props.flexWrap || "nowrap"};
-  align-items: ${(props) => props.alignItems || "stretch"};
-  justify-content: ${(props) => props.justifyContent || "flex-start"};
-  cursor: ${(props) => props.cursor ? props.cursor : props.onClick || props.onPress ? "pointer" : "inherit"};
-  position: ${(props) => props.position || "static"};
-  top: ${(props) => typeof props.top === "number" ? `${props.top}px` : props.top};
-  bottom: ${(props) => typeof props.bottom === "number" ? `${props.bottom}px` : props.bottom};
-  left: ${(props) => typeof props.left === "number" ? `${props.left}px` : props.left};
-  right: ${(props) => typeof props.right === "number" ? `${props.right}px` : props.right};
-  flex: ${(props) => props.flex};
-  flex-shrink: ${(props) => props.flexShrink ?? 1};
-  gap: ${(props) => typeof props.gap === "number" ? `${props.gap}px` : props.gap || 0};
-  align-self: ${(props) => props.alignSelf || "auto"};
-  overflow: ${(props) => props.overflow || "visible"};
-  overflow-x: ${(props) => props.overflowX || "visible"};
-  overflow-y: ${(props) => props.overflowY || "visible"};
-  z-index: ${(props) => props.zIndex};
-  opacity: ${(props) => props.disabled ? 0.5 : 1};
-  pointer-events: ${(props) => props.disabled ? "none" : "auto"};
-
-  &:hover {
-    ${(props) => props.hoverStyle?.backgroundColor && `background-color: ${props.hoverStyle.backgroundColor};`}
-    ${(props) => props.hoverStyle?.borderColor && `border-color: ${props.hoverStyle.borderColor};`}
-  }
-
-  &:active {
-    ${(props) => props.pressStyle?.backgroundColor && `background-color: ${props.pressStyle.backgroundColor};`}
-  }
-`;
-var Box2 = import_react6.default.forwardRef(
-  ({
-    children,
-    onPress,
-    onKeyDown,
-    onKeyUp,
-    role,
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
-    "aria-current": ariaCurrent,
-    "aria-disabled": ariaDisabled,
-    "aria-live": ariaLive,
-    "aria-busy": ariaBusy,
-    "aria-describedby": ariaDescribedBy,
-    "aria-expanded": ariaExpanded,
-    "aria-haspopup": ariaHasPopup,
-    "aria-pressed": ariaPressed,
-    "aria-controls": ariaControls,
-    tabIndex,
-    as,
-    src,
-    alt,
-    type,
-    disabled,
-    id,
-    ...props
-  }, ref) => {
-    if (as === "img" && src) {
-      return /* @__PURE__ */ (0, import_jsx_runtime389.jsx)(
-        "img",
-        {
-          src,
-          alt: alt || "",
-          style: {
-            display: "block",
-            objectFit: "cover",
-            width: typeof props.width === "number" ? `${props.width}px` : props.width,
-            height: typeof props.height === "number" ? `${props.height}px` : props.height,
-            borderRadius: typeof props.borderRadius === "number" ? `${props.borderRadius}px` : props.borderRadius,
-            position: props.position,
-            top: typeof props.top === "number" ? `${props.top}px` : props.top,
-            left: typeof props.left === "number" ? `${props.left}px` : props.left,
-            right: typeof props.right === "number" ? `${props.right}px` : props.right,
-            bottom: typeof props.bottom === "number" ? `${props.bottom}px` : props.bottom
-          }
-        }
-      );
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime389.jsx)(
-      StyledBox2,
-      {
-        ref,
-        as,
-        id,
-        type: as === "button" ? type || "button" : void 0,
-        disabled: as === "button" ? disabled : void 0,
-        onClick: onPress,
-        onKeyDown,
-        onKeyUp,
-        role,
-        "aria-label": ariaLabel,
-        "aria-labelledby": ariaLabelledBy,
-        "aria-current": ariaCurrent,
-        "aria-disabled": ariaDisabled,
-        "aria-busy": ariaBusy,
-        "aria-describedby": ariaDescribedBy,
-        "aria-expanded": ariaExpanded,
-        "aria-haspopup": ariaHasPopup,
-        "aria-pressed": ariaPressed,
-        "aria-controls": ariaControls,
-        "aria-live": ariaLive,
-        tabIndex: tabIndex !== void 0 ? tabIndex : void 0,
-        ...props,
-        children
-      }
-    );
-  }
-);
-Box2.displayName = "Box";
-var StyledText2 = import_styled_components10.default.span`
-  color: ${(props) => props.color || "inherit"};
-  font-size: ${(props) => typeof props.fontSize === "number" ? `${props.fontSize}px` : props.fontSize || "inherit"};
-  font-weight: ${(props) => props.fontWeight || "normal"};
-  font-family: ${(props) => props.fontFamily || '"Pilat Wide Bold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important'};
-  line-height: ${(props) => typeof props.lineHeight === "number" ? `${props.lineHeight}px` : props.lineHeight || "inherit"};
-  white-space: ${(props) => props.whiteSpace || "normal"};
-  text-align: ${(props) => props.textAlign || "inherit"};
-  text-decoration: ${(props) => props.textDecoration || "none"};
-`;
-var rotate2 = import_styled_components11.keyframes`
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-`;
-var StyledSpinner2 = import_styled_components11.default.div`
-  width: ${(props) => typeof props.size === "number" ? `${props.size}px` : props.size || "24px"};
-  height: ${(props) => typeof props.size === "number" ? `${props.size}px` : props.size || "24px"};
-  border: ${(props) => props.strokeWidth || 2}px solid
-    ${(props) => props.color || "currentColor"};
-  border-bottom-color: transparent;
-  border-radius: 50%;
-  display: inline-block;
-  box-sizing: border-box;
-  animation: ${rotate2} 1s linear infinite;
-`;
-var Spinner2 = ({
-  role = "status",
-  "aria-label": ariaLabel,
-  "aria-live": ariaLive = "polite",
-  "aria-describedby": ariaDescribedBy,
-  testID,
-  ...props
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime391.jsx)(
-    StyledSpinner2,
-    {
-      role,
-      "aria-label": ariaLabel,
-      "aria-live": ariaLive,
-      "aria-describedby": ariaDescribedBy,
-      "data-testid": testID,
-      ...props
-    }
-  );
-};
-Spinner2.displayName = "Spinner";
-var StyledIcon3 = import_styled_components12.default.div`
+var import_jsx_runtime386 = require("react/jsx-runtime");
+var StyledIcon3 = import_styled_components5.default.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1284,183 +817,13 @@ var StyledIcon3 = import_styled_components12.default.div`
   }
 `;
 var Icon3 = ({ children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime392.jsx)(StyledIcon3, { ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime385.jsx)(StyledIcon3, { ...props, children });
 };
-var StyledDivider2 = import_styled_components13.default.div`
-  background-color: ${(props) => props.dashStroke ? "transparent" : props.color || "rgba(255, 255, 255, 0.15)"};
-  width: ${(props) => props.vertical ? typeof props.width === "number" ? `${props.width}px` : props.width || "1px" : "100%"};
-  height: ${(props) => props.vertical ? "100%" : typeof props.height === "number" ? `${props.height}px` : props.height || "1px"};
-
-  ${(props) => props.dashStroke && `
-    border-style: dashed;
-    border-color: ${props.color || "rgba(255, 255, 255, 0.15)"};
-    border-width: 0;
-    ${props.vertical ? `
-      border-left-width: ${typeof props.width === "number" ? `${props.width}px` : props.width || "1px"};
-      height: 100%;
-    ` : `
-      border-top-width: ${typeof props.height === "number" ? `${props.height}px` : props.height || "1px"};
-      width: 100%;
-    `}
-  `}
-`;
-var StyledInput2 = import_styled_components14.default.input`
-  background: transparent;
-  border: none;
-  outline: none;
-  width: 100%;
-  height: 100%;
-  padding: 0;
-  margin: 0;
-  color: ${(props) => props.color || "inherit"};
-  font-size: ${(props) => typeof props.fontSize === "number" ? `${props.fontSize}px` : props.fontSize || "inherit"};
-  font-family: inherit;
-  text-align: inherit;
-
-  &::placeholder {
-    color: ${(props) => props.placeholderTextColor || "rgba(255, 255, 255, 0.5)"};
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-  }
-`;
-var InputPrimitive2 = (0, import_react7.forwardRef)(
-  ({
-    value,
-    placeholder,
-    onChange,
-    onChangeText,
-    onFocus,
-    onBlur,
-    onKeyDown,
-    disabled,
-    secureTextEntry,
-    style,
-    color,
-    fontSize,
-    placeholderTextColor,
-    maxLength,
-    name,
-    type,
-    inputMode,
-    autoComplete,
-    id,
-    "aria-invalid": ariaInvalid,
-    "aria-describedby": ariaDescribedBy,
-    "aria-labelledby": ariaLabelledBy,
-    "aria-label": ariaLabel,
-    "aria-disabled": ariaDisabled,
-    "data-testid": dataTestId,
-    ...rest
-  }, ref) => {
-    const handleChange = (e) => {
-      if (onChange) {
-        onChange(e);
-      }
-      if (onChangeText) {
-        onChangeText(e.target.value);
-      }
-    };
-    const inputValue = value !== void 0 ? value : "";
-    return /* @__PURE__ */ (0, import_jsx_runtime394.jsx)(
-      StyledInput2,
-      {
-        ref,
-        id,
-        value: inputValue,
-        name,
-        placeholder,
-        onChange: handleChange,
-        onFocus,
-        onBlur,
-        onKeyDown,
-        disabled,
-        type: secureTextEntry ? "password" : type || "text",
-        inputMode,
-        autoComplete,
-        style,
-        color,
-        fontSize,
-        placeholderTextColor,
-        maxLength,
-        "aria-invalid": ariaInvalid,
-        "aria-describedby": ariaDescribedBy,
-        "aria-labelledby": ariaLabelledBy,
-        "aria-label": ariaLabel,
-        "aria-disabled": ariaDisabled,
-        "data-testid": dataTestId,
-        ...rest
-      }
-    );
-  }
-);
-InputPrimitive2.displayName = "InputPrimitive";
-var StyledTextArea2 = import_styled_components15.default.textarea`
-  background: transparent;
-  border: none;
-  outline: none;
-  width: 100%;
-  height: 100%;
-  padding: 0;
-  margin: 0;
-  color: ${(props) => props.color || "inherit"};
-  font-size: ${(props) => typeof props.fontSize === "number" ? `${props.fontSize}px` : props.fontSize || "inherit"};
-  font-family: inherit;
-  text-align: inherit;
-  resize: none;
-
-  &::placeholder {
-    color: ${(props) => props.placeholderTextColor || "rgba(255, 255, 255, 0.5)"};
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-  }
-`;
-var TextAreaPrimitive2 = (0, import_react8.forwardRef)(
-  ({
-    value,
-    placeholder,
-    onChangeText,
-    onFocus,
-    onBlur,
-    onKeyDown,
-    disabled,
-    style,
-    color,
-    fontSize,
-    placeholderTextColor,
-    maxLength,
-    rows
-  }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime395.jsx)(
-      StyledTextArea2,
-      {
-        ref,
-        value,
-        placeholder,
-        onChange: (e) => onChangeText?.(e.target.value),
-        onFocus,
-        onBlur,
-        onKeyDown,
-        disabled,
-        style,
-        color,
-        fontSize,
-        placeholderTextColor,
-        maxLength,
-        rows
-      }
-    );
-  }
-);
-TextAreaPrimitive2.displayName = "TextAreaPrimitive";
-var X2 = (props) => /* @__PURE__ */ (0, import_jsx_runtime396.jsx)(Icon3, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime396.jsx)(X, { size: "100%" }) });
+var X2 = (props) => /* @__PURE__ */ (0, import_jsx_runtime386.jsx)(Icon3, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime386.jsx)(X, { size: "100%" }) });
 
 // ../tag/dist/web/index.mjs
-var import_jsx_runtime404 = require("react/jsx-runtime");
-var StyledBox3 = import_styled_components16.default.div`
+var import_jsx_runtime390 = require("react/jsx-runtime");
+var StyledBox2 = import_styled_components6.default.div`
   display: flex;
   box-sizing: border-box;
   background-color: ${(props) => props.backgroundColor || "transparent"};
@@ -1545,7 +908,7 @@ var StyledBox3 = import_styled_components16.default.div`
     ${(props) => props.pressStyle?.backgroundColor && `background-color: ${props.pressStyle.backgroundColor};`}
   }
 `;
-var Box3 = import_react9.default.forwardRef(
+var Box2 = import_react4.default.forwardRef(
   ({
     children,
     onPress,
@@ -1573,7 +936,7 @@ var Box3 = import_react9.default.forwardRef(
     ...props
   }, ref) => {
     if (as === "img" && src) {
-      return /* @__PURE__ */ (0, import_jsx_runtime397.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime387.jsx)(
         "img",
         {
           src,
@@ -1593,8 +956,8 @@ var Box3 = import_react9.default.forwardRef(
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime397.jsx)(
-      StyledBox3,
+    return /* @__PURE__ */ (0, import_jsx_runtime387.jsx)(
+      StyledBox2,
       {
         ref,
         as,
@@ -1623,8 +986,8 @@ var Box3 = import_react9.default.forwardRef(
     );
   }
 );
-Box3.displayName = "Box";
-var StyledText3 = import_styled_components17.default.span`
+Box2.displayName = "Box";
+var StyledText2 = import_styled_components7.default.span`
   color: ${(props) => props.color || "inherit"};
   font-size: ${(props) => typeof props.fontSize === "number" ? `${props.fontSize}px` : props.fontSize || "inherit"};
   font-weight: ${(props) => props.fontWeight || "normal"};
@@ -1641,8 +1004,8 @@ var Text2 = ({
   role,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime398.jsx)(
-    StyledText3,
+  return /* @__PURE__ */ (0, import_jsx_runtime388.jsx)(
+    StyledText2,
     {
       ...props,
       style,
@@ -1652,47 +1015,7 @@ var Text2 = ({
     }
   );
 };
-var rotate3 = import_styled_components18.keyframes`
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-`;
-var StyledSpinner3 = import_styled_components18.default.div`
-  width: ${(props) => typeof props.size === "number" ? `${props.size}px` : props.size || "24px"};
-  height: ${(props) => typeof props.size === "number" ? `${props.size}px` : props.size || "24px"};
-  border: ${(props) => props.strokeWidth || 2}px solid
-    ${(props) => props.color || "currentColor"};
-  border-bottom-color: transparent;
-  border-radius: 50%;
-  display: inline-block;
-  box-sizing: border-box;
-  animation: ${rotate3} 1s linear infinite;
-`;
-var Spinner3 = ({
-  role = "status",
-  "aria-label": ariaLabel,
-  "aria-live": ariaLive = "polite",
-  "aria-describedby": ariaDescribedBy,
-  testID,
-  ...props
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime399.jsx)(
-    StyledSpinner3,
-    {
-      role,
-      "aria-label": ariaLabel,
-      "aria-live": ariaLive,
-      "aria-describedby": ariaDescribedBy,
-      "data-testid": testID,
-      ...props
-    }
-  );
-};
-Spinner3.displayName = "Spinner";
-var StyledIcon4 = import_styled_components19.default.div`
+var StyledIcon4 = import_styled_components8.default.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1708,178 +1031,8 @@ var StyledIcon4 = import_styled_components19.default.div`
   }
 `;
 var Icon4 = ({ children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime400.jsx)(StyledIcon4, { ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime389.jsx)(StyledIcon4, { ...props, children });
 };
-var StyledDivider3 = import_styled_components20.default.div`
-  background-color: ${(props) => props.dashStroke ? "transparent" : props.color || "rgba(255, 255, 255, 0.15)"};
-  width: ${(props) => props.vertical ? typeof props.width === "number" ? `${props.width}px` : props.width || "1px" : "100%"};
-  height: ${(props) => props.vertical ? "100%" : typeof props.height === "number" ? `${props.height}px` : props.height || "1px"};
-
-  ${(props) => props.dashStroke && `
-    border-style: dashed;
-    border-color: ${props.color || "rgba(255, 255, 255, 0.15)"};
-    border-width: 0;
-    ${props.vertical ? `
-      border-left-width: ${typeof props.width === "number" ? `${props.width}px` : props.width || "1px"};
-      height: 100%;
-    ` : `
-      border-top-width: ${typeof props.height === "number" ? `${props.height}px` : props.height || "1px"};
-      width: 100%;
-    `}
-  `}
-`;
-var StyledInput3 = import_styled_components21.default.input`
-  background: transparent;
-  border: none;
-  outline: none;
-  width: 100%;
-  height: 100%;
-  padding: 0;
-  margin: 0;
-  color: ${(props) => props.color || "inherit"};
-  font-size: ${(props) => typeof props.fontSize === "number" ? `${props.fontSize}px` : props.fontSize || "inherit"};
-  font-family: inherit;
-  text-align: inherit;
-
-  &::placeholder {
-    color: ${(props) => props.placeholderTextColor || "rgba(255, 255, 255, 0.5)"};
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-  }
-`;
-var InputPrimitive3 = (0, import_react10.forwardRef)(
-  ({
-    value,
-    placeholder,
-    onChange,
-    onChangeText,
-    onFocus,
-    onBlur,
-    onKeyDown,
-    disabled,
-    secureTextEntry,
-    style,
-    color,
-    fontSize,
-    placeholderTextColor,
-    maxLength,
-    name,
-    type,
-    inputMode,
-    autoComplete,
-    id,
-    "aria-invalid": ariaInvalid,
-    "aria-describedby": ariaDescribedBy,
-    "aria-labelledby": ariaLabelledBy,
-    "aria-label": ariaLabel,
-    "aria-disabled": ariaDisabled,
-    "data-testid": dataTestId,
-    ...rest
-  }, ref) => {
-    const handleChange = (e) => {
-      if (onChange) {
-        onChange(e);
-      }
-      if (onChangeText) {
-        onChangeText(e.target.value);
-      }
-    };
-    const inputValue = value !== void 0 ? value : "";
-    return /* @__PURE__ */ (0, import_jsx_runtime402.jsx)(
-      StyledInput3,
-      {
-        ref,
-        id,
-        value: inputValue,
-        name,
-        placeholder,
-        onChange: handleChange,
-        onFocus,
-        onBlur,
-        onKeyDown,
-        disabled,
-        type: secureTextEntry ? "password" : type || "text",
-        inputMode,
-        autoComplete,
-        style,
-        color,
-        fontSize,
-        placeholderTextColor,
-        maxLength,
-        "aria-invalid": ariaInvalid,
-        "aria-describedby": ariaDescribedBy,
-        "aria-labelledby": ariaLabelledBy,
-        "aria-label": ariaLabel,
-        "aria-disabled": ariaDisabled,
-        "data-testid": dataTestId,
-        ...rest
-      }
-    );
-  }
-);
-InputPrimitive3.displayName = "InputPrimitive";
-var StyledTextArea3 = import_styled_components22.default.textarea`
-  background: transparent;
-  border: none;
-  outline: none;
-  width: 100%;
-  height: 100%;
-  padding: 0;
-  margin: 0;
-  color: ${(props) => props.color || "inherit"};
-  font-size: ${(props) => typeof props.fontSize === "number" ? `${props.fontSize}px` : props.fontSize || "inherit"};
-  font-family: inherit;
-  text-align: inherit;
-  resize: none;
-
-  &::placeholder {
-    color: ${(props) => props.placeholderTextColor || "rgba(255, 255, 255, 0.5)"};
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-  }
-`;
-var TextAreaPrimitive3 = (0, import_react11.forwardRef)(
-  ({
-    value,
-    placeholder,
-    onChangeText,
-    onFocus,
-    onBlur,
-    onKeyDown,
-    disabled,
-    style,
-    color,
-    fontSize,
-    placeholderTextColor,
-    maxLength,
-    rows
-  }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime403.jsx)(
-      StyledTextArea3,
-      {
-        ref,
-        value,
-        placeholder,
-        onChange: (e) => onChangeText?.(e.target.value),
-        onFocus,
-        onBlur,
-        onKeyDown,
-        disabled,
-        style,
-        color,
-        fontSize,
-        placeholderTextColor,
-        maxLength,
-        rows
-      }
-    );
-  }
-);
-TextAreaPrimitive3.displayName = "TextAreaPrimitive";
 var Tag = ({
   size = "md",
   tone = "primary",
@@ -1939,8 +1092,8 @@ var Tag = ({
     }
   };
   const { bg, text } = resolveColors();
-  return /* @__PURE__ */ (0, import_jsx_runtime404.jsxs)(
-    Box3,
+  return /* @__PURE__ */ (0, import_jsx_runtime390.jsxs)(
+    Box2,
     {
       backgroundColor: bg,
       borderRadius: sizeStyles.radius,
@@ -1956,8 +1109,8 @@ var Tag = ({
         whiteSpace: "nowrap"
       },
       children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime404.jsx)(Icon4, { size: sizeStyles.iconSize, color: text, children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime404.jsx)(
+        icon && /* @__PURE__ */ (0, import_jsx_runtime390.jsx)(Icon4, { size: sizeStyles.iconSize, color: text, children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime390.jsx)(
           Text2,
           {
             color: text,
@@ -1971,7 +1124,7 @@ var Tag = ({
             children
           }
         ),
-        onRemove && /* @__PURE__ */ (0, import_jsx_runtime404.jsx)(Box3, { onPress: onRemove, children: /* @__PURE__ */ (0, import_jsx_runtime404.jsx)(X2, { size: sizeStyles.iconSize, color: text }) })
+        onRemove && /* @__PURE__ */ (0, import_jsx_runtime390.jsx)(Box2, { onPress: onRemove, children: /* @__PURE__ */ (0, import_jsx_runtime390.jsx)(X2, { size: sizeStyles.iconSize, color: text }) })
       ]
     }
   );
@@ -1979,7 +1132,7 @@ var Tag = ({
 
 // src/useMultiSelectControl.tsx
 var import_xui_core2 = require("@xsolla/xui-core");
-var import_jsx_runtime405 = require("react/jsx-runtime");
+var import_jsx_runtime391 = require("react/jsx-runtime");
 var COUNT_ITEM_VALUE = "count-item";
 var useMultiSelectControl = ({
   variant,
@@ -1994,15 +1147,15 @@ var useMultiSelectControl = ({
   containerRef
 }) => {
   const { theme } = (0, import_xui_core2.useDesignSystem)();
-  const displayStateRef = (0, import_react12.useRef)(0 /* Placeholder */);
-  const savedWidthsRef = (0, import_react12.useRef)(null);
-  const itemsRef = (0, import_react12.useRef)(null);
-  const [itemsWidth, setItemsWidth] = (0, import_react12.useState)(0);
-  const [selectedContent, setSelectedContent] = (0, import_react12.useState)(
+  const displayStateRef = (0, import_react5.useRef)(0 /* Placeholder */);
+  const savedWidthsRef = (0, import_react5.useRef)(null);
+  const itemsRef = (0, import_react5.useRef)(null);
+  const [itemsWidth, setItemsWidth] = (0, import_react5.useState)(0);
+  const [selectedContent, setSelectedContent] = (0, import_react5.useState)(
     null
   );
   const isPlaceholder = !selectedItems || selectedItems.length === 0;
-  (0, import_react12.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (!containerRef.current) return;
     const resizeObserver = new ResizeObserver((entries) => {
       for (const entry of entries) {
@@ -2012,7 +1165,7 @@ var useMultiSelectControl = ({
     resizeObserver.observe(containerRef.current);
     return () => resizeObserver.disconnect();
   }, [containerRef]);
-  const widthsDependencies = (0, import_react12.useMemo)(
+  const widthsDependencies = (0, import_react5.useMemo)(
     () => ({
       stateList: stateList.map((item) => item.value),
       variant,
@@ -2039,7 +1192,7 @@ var useMultiSelectControl = ({
   };
   const setPlaceholder = () => {
     setSelectedContent(
-      /* @__PURE__ */ (0, import_jsx_runtime405.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime391.jsx)(
         Text,
         {
           color: theme.colors.control.input.placeholder,
@@ -2090,7 +1243,7 @@ var useMultiSelectControl = ({
       const isCount = item.value === COUNT_ITEM_VALUE;
       const isReducable = index === 0 && displayStateRef.current === 3 /* Render */ && displayedItemsCount === 0 || flexible;
       if (variant === "tag") {
-        return /* @__PURE__ */ (0, import_jsx_runtime405.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime391.jsx)(
           Box,
           {
             onPress: !isCount ? (e) => {
@@ -2102,7 +1255,7 @@ var useMultiSelectControl = ({
               opacity: disabled ? 0.5 : 1,
               cursor: disabled || isCount ? "not-allowed" : "pointer"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime405.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime391.jsx)(
               Tag,
               {
                 size,
@@ -2120,7 +1273,7 @@ var useMultiSelectControl = ({
       }
       const isCountItem = hasHidden;
       const needsComma = index < displayedItems.length - 2 || index < displayedItems.length - 1 && !isCountItem;
-      return /* @__PURE__ */ (0, import_jsx_runtime405.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime391.jsxs)(
         Text,
         {
           color: theme.colors.content.primary,
@@ -2170,7 +1323,7 @@ var useMultiSelectControl = ({
     displayStateRef.current = 3 /* Render */;
     setItemsRender();
   };
-  (0, import_react12.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (isPlaceholder) {
       displayStateRef.current = 0 /* Placeholder */;
       setPlaceholder();
@@ -2204,7 +1357,7 @@ var useMultiSelectControl = ({
     widthsDependencies,
     stateList
   ]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (displayStateRef.current !== 2 /* Calculation */) return;
     const rafId = requestAnimationFrame(() => {
       if (displayStateRef.current === 2 /* Calculation */) {
@@ -2222,8 +1375,8 @@ var useMultiSelectControl = ({
 };
 
 // src/MultiSelectControl.tsx
-var import_jsx_runtime406 = require("react/jsx-runtime");
-var MultiSelectControl = (0, import_react13.forwardRef)(
+var import_jsx_runtime392 = require("react/jsx-runtime");
+var MultiSelectControl = (0, import_react6.forwardRef)(
   ({
     variant = "tag",
     flexible = true,
@@ -2249,7 +1402,7 @@ var MultiSelectControl = (0, import_react13.forwardRef)(
     const inputColors = theme.colors.control.input;
     const state = externalState || (disabled ? "disable" : "default");
     const isDisable = state === "disable" || disabled;
-    const containerRef = (0, import_react13.useRef)(null);
+    const containerRef = (0, import_react6.useRef)(null);
     const { itemsRef, selectedContent, isCalculating } = useMultiSelectControl({
       variant,
       flexible,
@@ -2285,7 +1438,7 @@ var MultiSelectControl = (0, import_react13.forwardRef)(
       borderColor = inputColors.borderHover;
     }
     const iconColor = isDisable ? inputColors.textDisable : inputColors.placeholder;
-    return /* @__PURE__ */ (0, import_jsx_runtime406.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime392.jsxs)(
       Box,
       {
         ref,
@@ -2313,7 +1466,7 @@ var MultiSelectControl = (0, import_react13.forwardRef)(
           borderColor: inputColors.borderHover
         } : void 0,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime406.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime392.jsxs)(
             Box,
             {
               ref: containerRef,
@@ -2323,8 +1476,8 @@ var MultiSelectControl = (0, import_react13.forwardRef)(
               gap: 8,
               style: { minWidth: 0 },
               children: [
-                iconLeft && /* @__PURE__ */ (0, import_jsx_runtime406.jsx)(Icon, { size: sizeStyles.iconSize, color: iconColor, variant: "line", children: iconLeft }),
-                /* @__PURE__ */ (0, import_jsx_runtime406.jsx)(
+                iconLeft && /* @__PURE__ */ (0, import_jsx_runtime392.jsx)(Icon, { size: sizeStyles.iconSize, color: iconColor, variant: "line", children: iconLeft }),
+                /* @__PURE__ */ (0, import_jsx_runtime392.jsx)(
                   Box,
                   {
                     ref: itemsRef,
@@ -2343,8 +1496,8 @@ var MultiSelectControl = (0, import_react13.forwardRef)(
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime406.jsxs)(Box, { flexDirection: "row", alignItems: "center", gap: 4, children: [
-            extraClear && selectedItems.length > 0 && !isDisable && /* @__PURE__ */ (0, import_jsx_runtime406.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime392.jsxs)(Box, { flexDirection: "row", alignItems: "center", gap: 4, children: [
+            extraClear && selectedItems.length > 0 && !isDisable && /* @__PURE__ */ (0, import_jsx_runtime392.jsx)(
               Box,
               {
                 onPress: (e) => {
@@ -2352,17 +1505,17 @@ var MultiSelectControl = (0, import_react13.forwardRef)(
                   removeAllValues();
                 },
                 style: { cursor: "pointer" },
-                children: /* @__PURE__ */ (0, import_jsx_runtime406.jsx)(Remove, { size: 18, color: iconColor, variant: "line" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime392.jsx)(Remove, { size: 18, color: iconColor, variant: "line" })
               }
             ),
-            isError && /* @__PURE__ */ (0, import_jsx_runtime406.jsx)(
+            isError && /* @__PURE__ */ (0, import_jsx_runtime392.jsx)(
               ExclamationMarkCr,
               {
                 size: 18,
                 color: theme.colors.content.alert.primary
               }
             ),
-            iconRight ? iconRight : isOpen ? /* @__PURE__ */ (0, import_jsx_runtime406.jsx)(ChevronUp, { size: 18, color: iconColor, variant: "line" }) : /* @__PURE__ */ (0, import_jsx_runtime406.jsx)(ChevronDown, { size: 18, color: iconColor })
+            iconRight ? iconRight : isOpen ? /* @__PURE__ */ (0, import_jsx_runtime392.jsx)(ChevronUp, { size: 18, color: iconColor, variant: "line" }) : /* @__PURE__ */ (0, import_jsx_runtime392.jsx)(ChevronDown, { size: 18, color: iconColor })
           ] })
         ]
       }
@@ -2372,7 +1525,7 @@ var MultiSelectControl = (0, import_react13.forwardRef)(
 MultiSelectControl.displayName = "MultiSelectControl";
 
 // src/useMultiSelect.ts
-var import_react14 = require("react");
+var import_react7 = require("react");
 var initialState = {
   values: [],
   selectedItems: [],
@@ -2383,12 +1536,12 @@ var useMultiSelect = ({
   value = [],
   onChange
 }) => {
-  const [state, setState] = (0, import_react14.useState)(initialState);
-  const optionsRef = (0, import_react14.useRef)(options);
-  (0, import_react14.useEffect)(() => {
+  const [state, setState] = (0, import_react7.useState)(initialState);
+  const optionsRef = (0, import_react7.useRef)(options);
+  (0, import_react7.useEffect)(() => {
     optionsRef.current = options;
   }, [options]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     const selectedItems = options.filter((opt) => value.includes(opt.value));
     setState((prevState) => ({
       ...prevState,
@@ -2396,7 +1549,7 @@ var useMultiSelect = ({
       selectedItems
     }));
   }, [options, value]);
-  const onChoose = (0, import_react14.useCallback)(
+  const onChoose = (0, import_react7.useCallback)(
     (selectedIds) => {
       const newValues = optionsRef.current.filter((opt) => selectedIds.includes(String(opt.value))).map((opt) => opt.value);
       const newSelectedItems = optionsRef.current.filter(
@@ -2411,7 +1564,7 @@ var useMultiSelect = ({
     },
     [onChange]
   );
-  const onRemove = (0, import_react14.useCallback)(
+  const onRemove = (0, import_react7.useCallback)(
     (value2, event) => {
       event?.stopPropagation();
       setState((prev) => {
@@ -2429,7 +1582,7 @@ var useMultiSelect = ({
     },
     [onChange]
   );
-  const onRemoveAll = (0, import_react14.useCallback)(() => {
+  const onRemoveAll = (0, import_react7.useCallback)(() => {
     setState((prevState) => ({
       ...prevState,
       values: [],
@@ -2437,13 +1590,13 @@ var useMultiSelect = ({
     }));
     onChange?.([]);
   }, [onChange]);
-  const onSelectClick = (0, import_react14.useCallback)(() => {
+  const onSelectClick = (0, import_react7.useCallback)(() => {
     setState((prevState) => ({
       ...prevState,
       isOpen: !prevState.isOpen
     }));
   }, []);
-  const onClose = (0, import_react14.useCallback)(() => {
+  const onClose = (0, import_react7.useCallback)(() => {
     setState((prevState) => ({
       ...prevState,
       isOpen: false
@@ -2463,8 +1616,8 @@ var useMultiSelect = ({
 };
 
 // src/MultiSelect.tsx
-var import_jsx_runtime407 = require("react/jsx-runtime");
-var MultiSelect = (0, import_react15.forwardRef)(
+var import_jsx_runtime393 = require("react/jsx-runtime");
+var MultiSelect = (0, import_react8.forwardRef)(
   ({
     options,
     errorMessage,
@@ -2484,8 +1637,8 @@ var MultiSelect = (0, import_react15.forwardRef)(
     maxHeight = 300
   }, ref) => {
     const { theme } = (0, import_xui_core4.useDesignSystem)();
-    const controlRef = (0, import_react15.useRef)(null);
-    const menuRef = (0, import_react15.useRef)(null);
+    const controlRef = (0, import_react8.useRef)(null);
+    const menuRef = (0, import_react8.useRef)(null);
     const sizeStyles = theme.sizing.input(size);
     const state = externalState || (disabled ? "disable" : "default");
     const isDisable = state === "disable" || disabled;
@@ -2506,7 +1659,7 @@ var MultiSelect = (0, import_react15.forwardRef)(
       value,
       onChange
     });
-    (0, import_react15.useEffect)(() => {
+    (0, import_react8.useEffect)(() => {
       if (isDisable) {
         onClose();
       }
@@ -2527,8 +1680,8 @@ var MultiSelect = (0, import_react15.forwardRef)(
       const newValues = checked ? [...values, value2] : values.filter((v) => v !== value2);
       onChoose(newValues.map(String));
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime407.jsxs)(Box, { flexDirection: "column", gap: sizeStyles.fieldGap, children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime407.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime393.jsxs)(Box, { flexDirection: "column", gap: sizeStyles.fieldGap, children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime393.jsx)(
         Text,
         {
           color: theme.colors.content.secondary,
@@ -2537,7 +1690,7 @@ var MultiSelect = (0, import_react15.forwardRef)(
           children: label
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime407.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime393.jsxs)(
         Box,
         {
           ref,
@@ -2545,7 +1698,7 @@ var MultiSelect = (0, import_react15.forwardRef)(
             position: "relative"
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime407.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime393.jsx)(
               MultiSelectControl,
               {
                 ref: controlRef,
@@ -2569,8 +1722,8 @@ var MultiSelect = (0, import_react15.forwardRef)(
                 extraClear
               }
             ),
-            isOpen && !isDisable && /* @__PURE__ */ (0, import_jsx_runtime407.jsxs)(import_jsx_runtime407.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime407.jsx)(
+            isOpen && !isDisable && /* @__PURE__ */ (0, import_jsx_runtime393.jsxs)(import_jsx_runtime393.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime393.jsx)(
                 Box,
                 {
                   style: {
@@ -2585,7 +1738,7 @@ var MultiSelect = (0, import_react15.forwardRef)(
                   onPress: onClose
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime407.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime393.jsx)(
                 Box,
                 {
                   ref: menuRef,
@@ -2609,7 +1762,7 @@ var MultiSelect = (0, import_react15.forwardRef)(
                   children: menuItems.map((item, _index) => {
                     const brandColors = theme.colors.control.brand.primary;
                     const contentColors = theme.colors.content;
-                    return /* @__PURE__ */ (0, import_jsx_runtime407.jsx)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime393.jsx)(
                       Box,
                       {
                         paddingHorizontal: sizeStyles.paddingHorizontal,
@@ -2630,7 +1783,7 @@ var MultiSelect = (0, import_react15.forwardRef)(
                           cursor: item.disabled ? "not-allowed" : "pointer",
                           opacity: item.disabled ? 0.5 : 1
                         },
-                        children: /* @__PURE__ */ (0, import_jsx_runtime407.jsx)(
+                        children: /* @__PURE__ */ (0, import_jsx_runtime393.jsx)(
                           Text,
                           {
                             color: item.checked ? contentColors.on.brand : theme.colors.content.secondary,
@@ -2649,7 +1802,7 @@ var MultiSelect = (0, import_react15.forwardRef)(
           ]
         }
       ),
-      errorMessage && /* @__PURE__ */ (0, import_jsx_runtime407.jsx)(
+      errorMessage && /* @__PURE__ */ (0, import_jsx_runtime393.jsx)(
         Text,
         {
           color: theme.colors.content.alert.primary,