@xsolla/xui-input-phone 0.131.0 → 0.133.0

package/web/index.mjs

@@ -1,5 +1,5 @@
 // src/InputPhone.tsx
-import React3, {
+import React4, {
   useState,
   forwardRef as forwardRef2,
   useRef,
@@ -7,10 +7,117 @@ import React3, {
 } from "react";
 
 // ../primitives-web/src/Box.tsx
-import React from "react";
+import React2 from "react";
 import styled from "styled-components";
+
+// ../primitives-web/src/filterDOMProps.ts
+import React from "react";
+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 = React.forwardRef(
+    ({ children, elementType, ...props }, ref) => {
+      const Tag = elementType || defaultTag;
+      const htmlProps = {};
+      for (const key of Object.keys(props)) {
+        if (!NON_HTML_PROPS.has(key)) {
+          htmlProps[key] = props[key];
+        }
+      }
+      return React.createElement(Tag, { ref, ...htmlProps }, children);
+    }
+  );
+  Component.displayName = `Filtered(${defaultTag})`;
+  return Component;
+}
+
+// ../primitives-web/src/Box.tsx
 import { jsx } from "react/jsx-runtime";
-var StyledBox = styled.div`
+var FilteredDiv = createFilteredElement("div");
+var StyledBox = styled(FilteredDiv)`
   display: flex;
   box-sizing: border-box;
   background-color: ${(props) => props.backgroundColor || "transparent"};
@@ -97,7 +204,7 @@ var StyledBox = styled.div`
     ${(props) => props.pressStyle?.backgroundColor && `background-color: ${props.pressStyle.backgroundColor};`}
   }
 `;
-var Box = React.forwardRef(
+var Box = React2.forwardRef(
   ({
     children,
     onPress,
@@ -149,7 +256,7 @@ var Box = React.forwardRef(
       StyledBox,
       {
         ref,
-        as,
+        elementType: as,
         id,
         type: as === "button" ? type || "button" : void 0,
         disabled: as === "button" ? disabled : void 0,
@@ -180,7 +287,8 @@ Box.displayName = "Box";
 // ../primitives-web/src/Text.tsx
 import styled2 from "styled-components";
 import { jsx as jsx2 } from "react/jsx-runtime";
-var StyledText = styled2.span`
+var FilteredSpan = createFilteredElement("span");
+var StyledText = styled2(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"};
@@ -213,7 +321,8 @@ var Text = ({
 // ../primitives-web/src/Icon.tsx
 import styled3 from "styled-components";
 import { jsx as jsx3 } from "react/jsx-runtime";
-var StyledIcon = styled3.div`
+var FilteredDiv2 = createFilteredElement("div");
+var StyledIcon = styled3(FilteredDiv2)`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2304,7 +2413,7 @@ var InputPhone = forwardRef2(
     const inputId = providedId || `input-phone-${safeId}`;
     const errorId = `${inputId}-error`;
     const dropdownId = `${inputId}-dropdown`;
-    React3.useImperativeHandle(
+    React4.useImperativeHandle(
       ref,
       () => inputRef.current,
       []
@@ -2611,7 +2720,7 @@ var InputPhone = forwardRef2(
                       borderColor: inputColors.borderHover
                     } : void 0,
                     children: [
-                      selectedCountry?.flag ? /* @__PURE__ */ jsx258(Box, { width: flagSize, height: flagSize, children: React3.isValidElement(selectedCountry.flag) ? React3.cloneElement(
+                      selectedCountry?.flag ? /* @__PURE__ */ jsx258(Box, { width: flagSize, height: flagSize, children: React4.isValidElement(selectedCountry.flag) ? React4.cloneElement(
                         selectedCountry.flag,
                         { size: flagSize }
                       ) : selectedCountry.flag }) : /* @__PURE__ */ jsx258(Location, { size: flagSize, variant: "line", color: iconColor }),
@@ -2872,7 +2981,7 @@ var InputPhone = forwardRef2(
                                   backgroundColor: inputColors.bgHover
                                 } : void 0,
                                 children: [
-                                  country.flag ? /* @__PURE__ */ jsx258(Box, { width: flagSize, height: flagSize, children: React3.isValidElement(country.flag) ? React3.cloneElement(
+                                  country.flag ? /* @__PURE__ */ jsx258(Box, { width: flagSize, height: flagSize, children: React4.isValidElement(country.flag) ? React4.cloneElement(
                                     country.flag,
                                     { size: flagSize }
                                   ) : country.flag }) : /* @__PURE__ */ jsx258(