@xsolla/xui-multi-select 0.133.0 → 0.135.0

package/web/index.mjs

@@ -687,9 +687,8 @@ import {
 } from "react";
 
 // ../tag/dist/web/index.mjs
-import React22 from "react";
+import React2 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";
@@ -698,7 +697,6 @@ 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";
 
@@ -781,109 +779,7 @@ var X = createLucideIcon("X", [
 
 // ../icons/dist/web/index.mjs
 import { jsx as jsx2100 } from "react/jsx-runtime";
-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)`
+var StyledIcon3 = styled5.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -905,109 +801,7 @@ var X2 = (props) => /* @__PURE__ */ jsx2100(Icon3, { ...props, children: /* @__P
 
 // ../tag/dist/web/index.mjs
 import { jsx as jsx410, jsxs } from "react/jsx-runtime";
-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)`
+var StyledBox2 = styled6.div`
   display: flex;
   box-sizing: border-box;
   background-color: ${(props) => props.backgroundColor || "transparent"};
@@ -1094,7 +888,7 @@ var StyledBox2 = styled6(FilteredDiv2)`
     ${(props) => props.pressStyle?.backgroundColor && `background-color: ${props.pressStyle.backgroundColor};`}
   }
 `;
-var Box2 = React22.forwardRef(
+var Box2 = React2.forwardRef(
   ({
     children,
     onPress,
@@ -1146,7 +940,7 @@ var Box2 = React22.forwardRef(
       StyledBox2,
       {
         ref,
-        elementType: as,
+        as,
         id,
         type: as === "button" ? type || "button" : void 0,
         disabled: as === "button" ? disabled : void 0,
@@ -1173,8 +967,7 @@ var Box2 = React22.forwardRef(
   }
 );
 Box2.displayName = "Box";
-var FilteredSpan = createFilteredElement2("span");
-var StyledText2 = styled22(FilteredSpan)`
+var StyledText2 = styled22.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"};
@@ -1203,8 +996,7 @@ var Text2 = ({
     }
   );
 };
-var FilteredDiv22 = createFilteredElement2("div");
-var StyledIcon4 = styled32(FilteredDiv22)`
+var StyledIcon4 = styled32.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1222,14 +1014,10 @@ var StyledIcon4 = styled32(FilteredDiv22)`
 var Icon4 = ({ children, ...props }) => {
   return /* @__PURE__ */ jsx390(StyledIcon4, { ...props, children });
 };
-var SELECTABLE_BORDER_RADIUS = 8;
 var Tag = ({
   size = "md",
   tone = "primary",
   type = "solid",
-  variant = "default",
-  selected = false,
-  onPress,
   children,
   iconLeft,
   iconRight,
@@ -1240,20 +1028,6 @@ var Tag = ({
   const { theme } = useResolvedTheme({ themeMode, themeProductContext });
   const sizeStyles = theme.sizing.tag(size);
   const resolveColors = () => {
-    if (variant === "selectable") {
-      if (selected) {
-        return {
-          bg: theme.colors.control.brand.secondary.bg,
-          text: theme.colors.content.brand.primary,
-          border: theme.colors.border.secondary
-        };
-      }
-      return {
-        bg: theme.colors.overlay.mono,
-        text: theme.colors.content.primary,
-        border: theme.colors.border.secondary
-      };
-    }
     const isOutlined = type === "outlined";
     switch (tone) {
       case "primary":
@@ -1307,16 +1081,12 @@ var Tag = ({
     }
   };
   const { bg, text, border } = resolveColors();
-  const isSelectable = variant === "selectable";
-  const borderRadius = isSelectable ? SELECTABLE_BORDER_RADIUS : sizeStyles.radius;
   const isIconOnly = !children && (!!iconLeft || !!iconRight);
   return /* @__PURE__ */ jsxs(
     Box2,
     {
-      as: isSelectable ? "button" : void 0,
-      onPress: isSelectable ? onPress : void 0,
       backgroundColor: bg,
-      borderRadius,
+      borderRadius: sizeStyles.radius,
       height: sizeStyles.height,
       width: isIconOnly ? sizeStyles.height : void 0,
       paddingHorizontal: isIconOnly ? 0 : sizeStyles.padding,
@@ -1327,8 +1097,6 @@ var Tag = ({
       borderWidth: sizeStyles.borderWidth,
       borderColor: border,
       borderStyle: "solid",
-      cursor: isSelectable ? "pointer" : "default",
-      hoverStyle: isSelectable && !selected ? { backgroundColor: theme.colors.control.brand.tertiary.bgHover } : void 0,
       style: {
         overflow: "hidden",
         textOverflow: "ellipsis",