@xsolla/xui-multi-select 0.136.0 → 0.138.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsolla/xui-multi-select",
-  "version": "0.136.0",
+  "version": "0.138.0",
   "main": "./web/index.js",
   "module": "./web/index.mjs",
   "types": "./web/index.d.ts",
@@ -10,10 +10,10 @@
     "build:native": "PLATFORM=native tsup"
   },
   "dependencies": {
-    "@xsolla/xui-checkbox": "0.136.0",
-    "@xsolla/xui-core": "0.136.0",
-    "@xsolla/xui-dropdown": "0.136.0",
-    "@xsolla/xui-primitives-core": "0.136.0"
+    "@xsolla/xui-checkbox": "0.138.0",
+    "@xsolla/xui-core": "0.138.0",
+    "@xsolla/xui-dropdown": "0.138.0",
+    "@xsolla/xui-primitives-core": "0.138.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0",

package/web/index.js

@@ -35,13 +35,85 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/MultiSelect.tsx
-var import_react8 = require("react");
+var import_react11 = require("react");
 
 // ../primitives-web/src/Box.tsx
-var import_react = __toESM(require("react"));
+var import_react2 = __toESM(require("react"));
 var import_styled_components = __toESM(require("styled-components"));
+
+// ../primitives-web/src/filterDOMProps.ts
+var import_react = __toESM(require("react"));
+
+// ../../node_modules/@emotion/memoize/dist/memoize.esm.js
+function memoize(fn) {
+  var cache = {};
+  return function(arg) {
+    if (cache[arg] === void 0) cache[arg] = fn(arg);
+    return cache[arg];
+  };
+}
+var memoize_esm_default = memoize;
+
+// ../../node_modules/@emotion/is-prop-valid/dist/is-prop-valid.esm.js
+var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|download|draggable|encType|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|inert|itemProp|itemScope|itemType|itemID|itemRef|on|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/;
+var index = memoize_esm_default(
+  function(prop) {
+    return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111 && prop.charCodeAt(1) === 110 && prop.charCodeAt(2) < 91;
+  }
+  /* Z+1 */
+);
+var is_prop_valid_esm_default = index;
+
+// ../primitives-web/src/filterDOMProps.ts
+var ADDITIONAL_BLOCKED_PROPS = /* @__PURE__ */ new Set([
+  // RN-only event handlers (pass isPropValid's on* pattern)
+  "onPress",
+  "onChangeText",
+  "onLayout",
+  "onMoveShouldSetResponder",
+  "onResponderGrant",
+  "onResponderMove",
+  "onResponderRelease",
+  "onResponderTerminate",
+  // SVG attributes that pass isPropValid
+  "strokeWidth",
+  // CSS properties that pass isPropValid but are used as component props
+  "overflow",
+  "cursor",
+  "fontSize",
+  "fontWeight",
+  "fontFamily",
+  "textDecoration"
+]);
+function shouldForwardProp(key) {
+  if (ADDITIONAL_BLOCKED_PROPS.has(key)) return false;
+  return is_prop_valid_esm_default(key);
+}
+function createFilteredElement(defaultTag) {
+  const Component = import_react.default.forwardRef(
+    ({ children, elementType, ...props }, ref) => {
+      const Tag2 = elementType || defaultTag;
+      const htmlProps = {};
+      for (const key of Object.keys(props)) {
+        if (shouldForwardProp(key)) {
+          htmlProps[key] = props[key];
+        }
+      }
+      return import_react.default.createElement(
+        Tag2,
+        { ref, ...htmlProps },
+        children
+      );
+    }
+  );
+  Component.displayName = `Filtered(${defaultTag})`;
+  return Component;
+}
+
+// ../primitives-web/src/Box.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var StyledBox = import_styled_components.default.div`
+var FilteredDiv = createFilteredElement("div");
+var StyledBox = (0, import_styled_components.default)(FilteredDiv)`
   display: flex;
   box-sizing: border-box;
   background-color: ${(props) => props.backgroundColor || "transparent"};
@@ -128,7 +200,7 @@ var StyledBox = import_styled_components.default.div`
     ${(props) => props.pressStyle?.backgroundColor && `background-color: ${props.pressStyle.backgroundColor};`}
   }
 `;
-var Box = import_react.default.forwardRef(
+var Box = import_react2.default.forwardRef(
   ({
     children,
     onPress,
@@ -153,6 +225,8 @@ var Box = import_react.default.forwardRef(
     type,
     disabled,
     id,
+    testID,
+    "data-testid": dataTestId,
     ...props
   }, ref) => {
     if (as === "img" && src) {
@@ -180,7 +254,7 @@ var Box = import_react.default.forwardRef(
       StyledBox,
       {
         ref,
-        as,
+        elementType: as,
         id,
         type: as === "button" ? type || "button" : void 0,
         disabled: as === "button" ? disabled : void 0,
@@ -200,6 +274,7 @@ var Box = import_react.default.forwardRef(
         "aria-controls": ariaControls,
         "aria-live": ariaLive,
         tabIndex: tabIndex !== void 0 ? tabIndex : void 0,
+        "data-testid": dataTestId || testID,
         ...props,
         children
       }
@@ -211,7 +286,8 @@ Box.displayName = "Box";
 // ../primitives-web/src/Text.tsx
 var import_styled_components2 = __toESM(require("styled-components"));
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var StyledText = import_styled_components2.default.span`
+var FilteredSpan = createFilteredElement("span");
+var StyledText = (0, import_styled_components2.default)(FilteredSpan)`
   color: ${(props) => props.color || "inherit"};
   font-size: ${(props) => typeof props.fontSize === "number" ? `${props.fontSize}px` : props.fontSize || "inherit"};
   font-weight: ${(props) => props.fontWeight || "normal"};
@@ -244,7 +320,8 @@ var Text = ({
 // ../primitives-web/src/Icon.tsx
 var import_styled_components3 = __toESM(require("styled-components"));
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var StyledIcon = import_styled_components3.default.div`
+var FilteredDiv2 = createFilteredElement("div");
+var StyledIcon = (0, import_styled_components3.default)(FilteredDiv2)`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -267,7 +344,7 @@ var Icon = ({ children, ...props }) => {
 var import_xui_core4 = require("@xsolla/xui-core");
 
 // src/MultiSelectControl.tsx
-var import_react6 = require("react");
+var import_react9 = require("react");
 var import_xui_core3 = require("@xsolla/xui-core");
 
 // ../icons-base/dist/web/index.mjs
@@ -715,11 +792,12 @@ var lineContent113 = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.
 var Remove = (props) => /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(BaseIcon, { ...props, solidContent: solidContent113, lineContent: lineContent113 });
 
 // src/useMultiSelectControl.tsx
-var import_react5 = require("react");
+var import_react8 = require("react");
 
 // ../tag/dist/web/index.mjs
-var import_react4 = __toESM(require("react"), 1);
+var import_react6 = __toESM(require("react"), 1);
 var import_styled_components6 = __toESM(require("styled-components"), 1);
+var import_react7 = __toESM(require("react"), 1);
 var import_jsx_runtime393 = require("react/jsx-runtime");
 var import_styled_components7 = __toESM(require("styled-components"), 1);
 var import_jsx_runtime394 = require("react/jsx-runtime");
@@ -728,20 +806,21 @@ var import_jsx_runtime395 = require("react/jsx-runtime");
 var import_xui_core = require("@xsolla/xui-core");
 
 // ../icons/dist/web/index.mjs
+var import_react5 = __toESM(require("react"), 1);
 var import_styled_components5 = __toESM(require("styled-components"), 1);
 var import_jsx_runtime391 = require("react/jsx-runtime");
 
 // ../../node_modules/lucide-react/dist/esm/createLucideIcon.js
-var import_react3 = require("react");
+var import_react4 = 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();
-var mergeClasses = (...classes) => classes.filter((className, index, array) => {
-  return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index;
+var mergeClasses = (...classes) => classes.filter((className, index4, array) => {
+  return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index4;
 }).join(" ").trim();
 
 // ../../node_modules/lucide-react/dist/esm/Icon.js
-var import_react2 = require("react");
+var import_react3 = require("react");
 
 // ../../node_modules/lucide-react/dist/esm/defaultAttributes.js
 var defaultAttributes = {
@@ -757,7 +836,7 @@ var defaultAttributes = {
 };
 
 // ../../node_modules/lucide-react/dist/esm/Icon.js
-var Icon2 = (0, import_react2.forwardRef)(
+var Icon2 = (0, import_react3.forwardRef)(
   ({
     color = "currentColor",
     size = 24,
@@ -768,7 +847,7 @@ var Icon2 = (0, import_react2.forwardRef)(
     iconNode,
     ...rest
   }, ref) => {
-    return (0, import_react2.createElement)(
+    return (0, import_react3.createElement)(
       "svg",
       {
         ref,
@@ -781,7 +860,7 @@ var Icon2 = (0, import_react2.forwardRef)(
         ...rest
       },
       [
-        ...iconNode.map(([tag, attrs]) => (0, import_react2.createElement)(tag, attrs)),
+        ...iconNode.map(([tag, attrs]) => (0, import_react3.createElement)(tag, attrs)),
         ...Array.isArray(children) ? children : [children]
       ]
     );
@@ -790,8 +869,8 @@ var Icon2 = (0, import_react2.forwardRef)(
 
 // ../../node_modules/lucide-react/dist/esm/createLucideIcon.js
 var createLucideIcon = (iconName, iconNode) => {
-  const Component = (0, import_react3.forwardRef)(
-    ({ className, ...props }, ref) => (0, import_react3.createElement)(Icon2, {
+  const Component = (0, import_react4.forwardRef)(
+    ({ className, ...props }, ref) => (0, import_react4.createElement)(Icon2, {
       ref,
       iconNode,
       className: mergeClasses(`lucide-${toKebabCase(iconName)}`, className),
@@ -810,7 +889,68 @@ var X = createLucideIcon("X", [
 
 // ../icons/dist/web/index.mjs
 var import_jsx_runtime392 = require("react/jsx-runtime");
-var StyledIcon3 = import_styled_components5.default.div`
+function memoize2(fn) {
+  var cache = {};
+  return function(arg) {
+    if (cache[arg] === void 0) cache[arg] = fn(arg);
+    return cache[arg];
+  };
+}
+var memoize_esm_default2 = memoize2;
+var reactPropsRegex2 = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|download|draggable|encType|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|inert|itemProp|itemScope|itemType|itemID|itemRef|on|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/;
+var index2 = memoize_esm_default2(
+  function(prop) {
+    return reactPropsRegex2.test(prop) || prop.charCodeAt(0) === 111 && prop.charCodeAt(1) === 110 && prop.charCodeAt(2) < 91;
+  }
+  /* Z+1 */
+);
+var is_prop_valid_esm_default2 = index2;
+var ADDITIONAL_BLOCKED_PROPS2 = /* @__PURE__ */ new Set([
+  // RN-only event handlers (pass isPropValid's on* pattern)
+  "onPress",
+  "onChangeText",
+  "onLayout",
+  "onMoveShouldSetResponder",
+  "onResponderGrant",
+  "onResponderMove",
+  "onResponderRelease",
+  "onResponderTerminate",
+  // SVG attributes that pass isPropValid
+  "strokeWidth",
+  // CSS properties that pass isPropValid but are used as component props
+  "overflow",
+  "cursor",
+  "fontSize",
+  "fontWeight",
+  "fontFamily",
+  "textDecoration"
+]);
+function shouldForwardProp2(key) {
+  if (ADDITIONAL_BLOCKED_PROPS2.has(key)) return false;
+  return is_prop_valid_esm_default2(key);
+}
+function createFilteredElement2(defaultTag) {
+  const Component = import_react5.default.forwardRef(
+    ({ children, elementType, ...props }, ref) => {
+      const Tag2 = elementType || defaultTag;
+      const htmlProps = {};
+      for (const key of Object.keys(props)) {
+        if (shouldForwardProp2(key)) {
+          htmlProps[key] = props[key];
+        }
+      }
+      return import_react5.default.createElement(
+        Tag2,
+        { ref, ...htmlProps },
+        children
+      );
+    }
+  );
+  Component.displayName = `Filtered(${defaultTag})`;
+  return Component;
+}
+var FilteredDiv3 = createFilteredElement2("div");
+var StyledIcon3 = (0, import_styled_components5.default)(FilteredDiv3)`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -832,7 +972,68 @@ var X2 = (props) => /* @__PURE__ */ (0, import_jsx_runtime392.jsx)(Icon3, { ...p
 
 // ../tag/dist/web/index.mjs
 var import_jsx_runtime396 = require("react/jsx-runtime");
-var StyledBox2 = import_styled_components6.default.div`
+function memoize3(fn) {
+  var cache = {};
+  return function(arg) {
+    if (cache[arg] === void 0) cache[arg] = fn(arg);
+    return cache[arg];
+  };
+}
+var memoize_esm_default3 = memoize3;
+var reactPropsRegex3 = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|download|draggable|encType|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|inert|itemProp|itemScope|itemType|itemID|itemRef|on|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/;
+var index3 = memoize_esm_default3(
+  function(prop) {
+    return reactPropsRegex3.test(prop) || prop.charCodeAt(0) === 111 && prop.charCodeAt(1) === 110 && prop.charCodeAt(2) < 91;
+  }
+  /* Z+1 */
+);
+var is_prop_valid_esm_default3 = index3;
+var ADDITIONAL_BLOCKED_PROPS3 = /* @__PURE__ */ new Set([
+  // RN-only event handlers (pass isPropValid's on* pattern)
+  "onPress",
+  "onChangeText",
+  "onLayout",
+  "onMoveShouldSetResponder",
+  "onResponderGrant",
+  "onResponderMove",
+  "onResponderRelease",
+  "onResponderTerminate",
+  // SVG attributes that pass isPropValid
+  "strokeWidth",
+  // CSS properties that pass isPropValid but are used as component props
+  "overflow",
+  "cursor",
+  "fontSize",
+  "fontWeight",
+  "fontFamily",
+  "textDecoration"
+]);
+function shouldForwardProp3(key) {
+  if (ADDITIONAL_BLOCKED_PROPS3.has(key)) return false;
+  return is_prop_valid_esm_default3(key);
+}
+function createFilteredElement3(defaultTag) {
+  const Component = import_react7.default.forwardRef(
+    ({ children, elementType, ...props }, ref) => {
+      const Tag2 = elementType || defaultTag;
+      const htmlProps = {};
+      for (const key of Object.keys(props)) {
+        if (shouldForwardProp3(key)) {
+          htmlProps[key] = props[key];
+        }
+      }
+      return import_react7.default.createElement(
+        Tag2,
+        { ref, ...htmlProps },
+        children
+      );
+    }
+  );
+  Component.displayName = `Filtered(${defaultTag})`;
+  return Component;
+}
+var FilteredDiv4 = createFilteredElement3("div");
+var StyledBox2 = (0, import_styled_components6.default)(FilteredDiv4)`
   display: flex;
   box-sizing: border-box;
   background-color: ${(props) => props.backgroundColor || "transparent"};
@@ -919,7 +1120,7 @@ var StyledBox2 = import_styled_components6.default.div`
     ${(props) => props.pressStyle?.backgroundColor && `background-color: ${props.pressStyle.backgroundColor};`}
   }
 `;
-var Box2 = import_react4.default.forwardRef(
+var Box2 = import_react6.default.forwardRef(
   ({
     children,
     onPress,
@@ -944,6 +1145,8 @@ var Box2 = import_react4.default.forwardRef(
     type,
     disabled,
     id,
+    testID,
+    "data-testid": dataTestId,
     ...props
   }, ref) => {
     if (as === "img" && src) {
@@ -971,7 +1174,7 @@ var Box2 = import_react4.default.forwardRef(
       StyledBox2,
       {
         ref,
-        as,
+        elementType: as,
         id,
         type: as === "button" ? type || "button" : void 0,
         disabled: as === "button" ? disabled : void 0,
@@ -991,6 +1194,7 @@ var Box2 = import_react4.default.forwardRef(
         "aria-controls": ariaControls,
         "aria-live": ariaLive,
         tabIndex: tabIndex !== void 0 ? tabIndex : void 0,
+        "data-testid": dataTestId || testID,
         ...props,
         children
       }
@@ -998,7 +1202,8 @@ var Box2 = import_react4.default.forwardRef(
   }
 );
 Box2.displayName = "Box";
-var StyledText2 = import_styled_components7.default.span`
+var FilteredSpan2 = createFilteredElement3("span");
+var StyledText2 = (0, import_styled_components7.default)(FilteredSpan2)`
   color: ${(props) => props.color || "inherit"};
   font-size: ${(props) => typeof props.fontSize === "number" ? `${props.fontSize}px` : props.fontSize || "inherit"};
   font-weight: ${(props) => props.fontWeight || "normal"};
@@ -1027,7 +1232,8 @@ var Text2 = ({
     }
   );
 };
-var StyledIcon4 = import_styled_components8.default.div`
+var FilteredDiv22 = createFilteredElement3("div");
+var StyledIcon4 = (0, import_styled_components8.default)(FilteredDiv22)`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1175,15 +1381,15 @@ var useMultiSelectControl = ({
   themeProductContext
 }) => {
   const { theme } = (0, import_xui_core2.useResolvedTheme)({ themeMode, themeProductContext });
-  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)(
+  const displayStateRef = (0, import_react8.useRef)(0 /* Placeholder */);
+  const savedWidthsRef = (0, import_react8.useRef)(null);
+  const itemsRef = (0, import_react8.useRef)(null);
+  const [itemsWidth, setItemsWidth] = (0, import_react8.useState)(0);
+  const [selectedContent, setSelectedContent] = (0, import_react8.useState)(
     null
   );
   const isPlaceholder = !selectedItems || selectedItems.length === 0;
-  (0, import_react5.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (!containerRef.current) return;
     const resizeObserver = new ResizeObserver((entries) => {
       for (const entry of entries) {
@@ -1193,7 +1399,7 @@ var useMultiSelectControl = ({
     resizeObserver.observe(containerRef.current);
     return () => resizeObserver.disconnect();
   }, [containerRef]);
-  const widthsDependencies = (0, import_react5.useMemo)(
+  const widthsDependencies = (0, import_react8.useMemo)(
     () => ({
       stateList: stateList.map((item) => item.value),
       variant,
@@ -1267,9 +1473,9 @@ var useMultiSelectControl = ({
       const countText = displayStateRef.current === 1 /* PreRender */ ? `+${itemsList.length}` : `+${itemsList.length - displayedItems.length}`;
       displayedItems.push({ value: COUNT_ITEM_VALUE, label: countText });
     }
-    const content = displayedItems.map((item, index) => {
+    const content = displayedItems.map((item, index4) => {
       const isCount = item.value === COUNT_ITEM_VALUE;
-      const isReducable = index === 0 && displayStateRef.current === 3 /* Render */ && displayedItemsCount === 0 || flexible;
+      const isReducable = index4 === 0 && displayStateRef.current === 3 /* Render */ && displayedItemsCount === 0 || flexible;
       if (variant === "tag") {
         return /* @__PURE__ */ (0, import_jsx_runtime397.jsx)(
           Box,
@@ -1300,7 +1506,7 @@ var useMultiSelectControl = ({
         );
       }
       const isCountItem = hasHidden;
-      const needsComma = index < displayedItems.length - 2 || index < displayedItems.length - 1 && !isCountItem;
+      const needsComma = index4 < displayedItems.length - 2 || index4 < displayedItems.length - 1 && !isCountItem;
       return /* @__PURE__ */ (0, import_jsx_runtime397.jsxs)(
         Text,
         {
@@ -1336,11 +1542,11 @@ var useMultiSelectControl = ({
     const countItemWidth = countEl.getBoundingClientRect().width;
     const columnGap = parseInt(getComputedStyle(itemsRef.current).columnGap || "0", 10) || 0;
     const tagsWidths = {};
-    let index = 0;
+    let index4 = 0;
     for (const el of allItems) {
-      const key = index < allItems.length - 1 ? stateList[index].value : COUNT_ITEM_VALUE;
+      const key = index4 < allItems.length - 1 ? stateList[index4].value : COUNT_ITEM_VALUE;
       tagsWidths[key] = el.getBoundingClientRect().width;
-      index++;
+      index4++;
     }
     savedWidthsRef.current = {
       tagsWidths,
@@ -1351,7 +1557,7 @@ var useMultiSelectControl = ({
     displayStateRef.current = 3 /* Render */;
     setItemsRender();
   };
-  (0, import_react5.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (isPlaceholder) {
       displayStateRef.current = 0 /* Placeholder */;
       setPlaceholder();
@@ -1385,7 +1591,7 @@ var useMultiSelectControl = ({
     widthsDependencies,
     stateList
   ]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (displayStateRef.current !== 2 /* Calculation */) return;
     const rafId = requestAnimationFrame(() => {
       if (displayStateRef.current === 2 /* Calculation */) {
@@ -1404,7 +1610,7 @@ var useMultiSelectControl = ({
 
 // src/MultiSelectControl.tsx
 var import_jsx_runtime398 = require("react/jsx-runtime");
-var MultiSelectControl = (0, import_react6.forwardRef)(
+var MultiSelectControl = (0, import_react9.forwardRef)(
   ({
     variant = "tag",
     flexible = true,
@@ -1432,7 +1638,7 @@ var MultiSelectControl = (0, import_react6.forwardRef)(
     const inputColors = theme.colors.control.input;
     const state = externalState || (disabled ? "disable" : "default");
     const isDisable = state === "disable" || disabled;
-    const containerRef = (0, import_react6.useRef)(null);
+    const containerRef = (0, import_react9.useRef)(null);
     const { itemsRef, selectedContent, isCalculating } = useMultiSelectControl({
       variant,
       flexible,
@@ -1555,7 +1761,7 @@ var MultiSelectControl = (0, import_react6.forwardRef)(
 MultiSelectControl.displayName = "MultiSelectControl";
 
 // src/useMultiSelect.ts
-var import_react7 = require("react");
+var import_react10 = require("react");
 var initialState = {
   values: [],
   selectedItems: [],
@@ -1566,12 +1772,12 @@ var useMultiSelect = ({
   value = [],
   onChange
 }) => {
-  const [state, setState] = (0, import_react7.useState)(initialState);
-  const optionsRef = (0, import_react7.useRef)(options);
-  (0, import_react7.useEffect)(() => {
+  const [state, setState] = (0, import_react10.useState)(initialState);
+  const optionsRef = (0, import_react10.useRef)(options);
+  (0, import_react10.useEffect)(() => {
     optionsRef.current = options;
   }, [options]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const selectedItems = options.filter((opt) => value.includes(opt.value));
     setState((prevState) => ({
       ...prevState,
@@ -1579,7 +1785,7 @@ var useMultiSelect = ({
       selectedItems
     }));
   }, [options, value]);
-  const onChoose = (0, import_react7.useCallback)(
+  const onChoose = (0, import_react10.useCallback)(
     (selectedIds) => {
       const newValues = optionsRef.current.filter((opt) => selectedIds.includes(String(opt.value))).map((opt) => opt.value);
       const newSelectedItems = optionsRef.current.filter(
@@ -1594,7 +1800,7 @@ var useMultiSelect = ({
     },
     [onChange]
   );
-  const onRemove = (0, import_react7.useCallback)(
+  const onRemove = (0, import_react10.useCallback)(
     (value2, event) => {
       event?.stopPropagation();
       setState((prev) => {
@@ -1612,7 +1818,7 @@ var useMultiSelect = ({
     },
     [onChange]
   );
-  const onRemoveAll = (0, import_react7.useCallback)(() => {
+  const onRemoveAll = (0, import_react10.useCallback)(() => {
     setState((prevState) => ({
       ...prevState,
       values: [],
@@ -1620,13 +1826,13 @@ var useMultiSelect = ({
     }));
     onChange?.([]);
   }, [onChange]);
-  const onSelectClick = (0, import_react7.useCallback)(() => {
+  const onSelectClick = (0, import_react10.useCallback)(() => {
     setState((prevState) => ({
       ...prevState,
       isOpen: !prevState.isOpen
     }));
   }, []);
-  const onClose = (0, import_react7.useCallback)(() => {
+  const onClose = (0, import_react10.useCallback)(() => {
     setState((prevState) => ({
       ...prevState,
       isOpen: false
@@ -1647,7 +1853,7 @@ var useMultiSelect = ({
 
 // src/MultiSelect.tsx
 var import_jsx_runtime399 = require("react/jsx-runtime");
-var MultiSelect = (0, import_react8.forwardRef)(
+var MultiSelect = (0, import_react11.forwardRef)(
   ({
     options,
     errorMessage,
@@ -1669,8 +1875,8 @@ var MultiSelect = (0, import_react8.forwardRef)(
     themeProductContext
   }, ref) => {
     const { theme } = (0, import_xui_core4.useResolvedTheme)({ themeMode, themeProductContext });
-    const controlRef = (0, import_react8.useRef)(null);
-    const menuRef = (0, import_react8.useRef)(null);
+    const controlRef = (0, import_react11.useRef)(null);
+    const menuRef = (0, import_react11.useRef)(null);
     const sizeStyles = theme.sizing.input(size);
     const state = externalState || (disabled ? "disable" : "default");
     const isDisable = state === "disable" || disabled;
@@ -1691,7 +1897,7 @@ var MultiSelect = (0, import_react8.forwardRef)(
       value,
       onChange
     });
-    (0, import_react8.useEffect)(() => {
+    (0, import_react11.useEffect)(() => {
       if (isDisable) {
         onClose();
       }