@xsolla/xui-multi-select 0.132.0 → 0.133.0

package/web/index.mjs

@@ -687,8 +687,9 @@ import {
 } from "react";
 
 // ../tag/dist/web/index.mjs
-import React2 from "react";
+import React22 from "react";
 import styled6 from "styled-components";
+import React3 from "react";
 import { jsx as jsx389 } from "react/jsx-runtime";
 import styled22 from "styled-components";
 import { jsx as jsx2101 } from "react/jsx-runtime";
@@ -697,6 +698,7 @@ import { jsx as jsx390 } from "react/jsx-runtime";
 import { useResolvedTheme } from "@xsolla/xui-core";
 
 // ../icons/dist/web/index.mjs
+import React2 from "react";
 import styled5 from "styled-components";
 import { jsx as jsx388 } from "react/jsx-runtime";
 
@@ -779,7 +781,109 @@ var X = createLucideIcon("X", [
 
 // ../icons/dist/web/index.mjs
 import { jsx as jsx2100 } from "react/jsx-runtime";
-var StyledIcon3 = styled5.div`
+var NON_HTML_PROPS = /* @__PURE__ */ new Set([
+  // BoxProps — layout & styling
+  "backgroundColor",
+  "borderColor",
+  "borderWidth",
+  "borderBottomWidth",
+  "borderBottomColor",
+  "borderTopWidth",
+  "borderTopColor",
+  "borderLeftWidth",
+  "borderLeftColor",
+  "borderRightWidth",
+  "borderRightColor",
+  "borderRadius",
+  "borderStyle",
+  "flexDirection",
+  "flexWrap",
+  "alignItems",
+  "justifyContent",
+  "alignSelf",
+  "flex",
+  "flexShrink",
+  "gap",
+  "position",
+  "top",
+  "bottom",
+  "left",
+  "right",
+  "outline",
+  "overflow",
+  "overflowX",
+  "overflowY",
+  "zIndex",
+  "cursor",
+  "padding",
+  "paddingHorizontal",
+  "paddingVertical",
+  "paddingTop",
+  "paddingBottom",
+  "paddingLeft",
+  "paddingRight",
+  "margin",
+  "marginTop",
+  "marginBottom",
+  "marginLeft",
+  "marginRight",
+  "minWidth",
+  "minHeight",
+  "maxWidth",
+  "maxHeight",
+  "hoverStyle",
+  "pressStyle",
+  "focusStyle",
+  "outlineColor",
+  "outlineWidth",
+  "outlineOffset",
+  "outlineStyle",
+  // BoxProps — RN-only
+  "onPress",
+  "onLayout",
+  "onMoveShouldSetResponder",
+  "onResponderGrant",
+  "onResponderMove",
+  "onResponderRelease",
+  "onResponderTerminate",
+  "testID",
+  // Box — custom element type
+  "elementType",
+  // TextProps
+  "fontSize",
+  "fontWeight",
+  "fontFamily",
+  "lineHeight",
+  "whiteSpace",
+  "textAlign",
+  "textDecoration",
+  "numberOfLines",
+  "letterSpacing",
+  "textTransform",
+  // SpinnerProps
+  "strokeWidth",
+  // DividerProps
+  "vertical",
+  "dashStroke"
+]);
+function createFilteredElement(defaultTag) {
+  const Component = React2.forwardRef(
+    ({ children, elementType, ...props }, ref) => {
+      const Tag2 = elementType || defaultTag;
+      const htmlProps = {};
+      for (const key of Object.keys(props)) {
+        if (!NON_HTML_PROPS.has(key)) {
+          htmlProps[key] = props[key];
+        }
+      }
+      return React2.createElement(Tag2, { ref, ...htmlProps }, children);
+    }
+  );
+  Component.displayName = `Filtered(${defaultTag})`;
+  return Component;
+}
+var FilteredDiv = createFilteredElement("div");
+var StyledIcon3 = styled5(FilteredDiv)`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -801,7 +905,109 @@ var X2 = (props) => /* @__PURE__ */ jsx2100(Icon3, { ...props, children: /* @__P
 
 // ../tag/dist/web/index.mjs
 import { jsx as jsx410, jsxs } from "react/jsx-runtime";
-var StyledBox2 = styled6.div`
+var NON_HTML_PROPS2 = /* @__PURE__ */ new Set([
+  // BoxProps — layout & styling
+  "backgroundColor",
+  "borderColor",
+  "borderWidth",
+  "borderBottomWidth",
+  "borderBottomColor",
+  "borderTopWidth",
+  "borderTopColor",
+  "borderLeftWidth",
+  "borderLeftColor",
+  "borderRightWidth",
+  "borderRightColor",
+  "borderRadius",
+  "borderStyle",
+  "flexDirection",
+  "flexWrap",
+  "alignItems",
+  "justifyContent",
+  "alignSelf",
+  "flex",
+  "flexShrink",
+  "gap",
+  "position",
+  "top",
+  "bottom",
+  "left",
+  "right",
+  "outline",
+  "overflow",
+  "overflowX",
+  "overflowY",
+  "zIndex",
+  "cursor",
+  "padding",
+  "paddingHorizontal",
+  "paddingVertical",
+  "paddingTop",
+  "paddingBottom",
+  "paddingLeft",
+  "paddingRight",
+  "margin",
+  "marginTop",
+  "marginBottom",
+  "marginLeft",
+  "marginRight",
+  "minWidth",
+  "minHeight",
+  "maxWidth",
+  "maxHeight",
+  "hoverStyle",
+  "pressStyle",
+  "focusStyle",
+  "outlineColor",
+  "outlineWidth",
+  "outlineOffset",
+  "outlineStyle",
+  // BoxProps — RN-only
+  "onPress",
+  "onLayout",
+  "onMoveShouldSetResponder",
+  "onResponderGrant",
+  "onResponderMove",
+  "onResponderRelease",
+  "onResponderTerminate",
+  "testID",
+  // Box — custom element type
+  "elementType",
+  // TextProps
+  "fontSize",
+  "fontWeight",
+  "fontFamily",
+  "lineHeight",
+  "whiteSpace",
+  "textAlign",
+  "textDecoration",
+  "numberOfLines",
+  "letterSpacing",
+  "textTransform",
+  // SpinnerProps
+  "strokeWidth",
+  // DividerProps
+  "vertical",
+  "dashStroke"
+]);
+function createFilteredElement2(defaultTag) {
+  const Component = React3.forwardRef(
+    ({ children, elementType, ...props }, ref) => {
+      const Tag2 = elementType || defaultTag;
+      const htmlProps = {};
+      for (const key of Object.keys(props)) {
+        if (!NON_HTML_PROPS2.has(key)) {
+          htmlProps[key] = props[key];
+        }
+      }
+      return React3.createElement(Tag2, { ref, ...htmlProps }, children);
+    }
+  );
+  Component.displayName = `Filtered(${defaultTag})`;
+  return Component;
+}
+var FilteredDiv2 = createFilteredElement2("div");
+var StyledBox2 = styled6(FilteredDiv2)`
   display: flex;
   box-sizing: border-box;
   background-color: ${(props) => props.backgroundColor || "transparent"};
@@ -888,7 +1094,7 @@ var StyledBox2 = styled6.div`
     ${(props) => props.pressStyle?.backgroundColor && `background-color: ${props.pressStyle.backgroundColor};`}
   }
 `;
-var Box2 = React2.forwardRef(
+var Box2 = React22.forwardRef(
   ({
     children,
     onPress,
@@ -940,7 +1146,7 @@ var Box2 = React2.forwardRef(
       StyledBox2,
       {
         ref,
-        as,
+        elementType: as,
         id,
         type: as === "button" ? type || "button" : void 0,
         disabled: as === "button" ? disabled : void 0,
@@ -967,7 +1173,8 @@ var Box2 = React2.forwardRef(
   }
 );
 Box2.displayName = "Box";
-var StyledText2 = styled22.span`
+var FilteredSpan = createFilteredElement2("span");
+var StyledText2 = styled22(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"};
@@ -996,7 +1203,8 @@ var Text2 = ({
     }
   );
 };
-var StyledIcon4 = styled32.div`
+var FilteredDiv22 = createFilteredElement2("div");
+var StyledIcon4 = styled32(FilteredDiv22)`
   display: flex;
   align-items: center;
   justify-content: center;