@xsolla/xui-button 0.201.4 → 0.202.0

package/web/index.js

@@ -84,6 +84,7 @@ var ADDITIONAL_BLOCKED_PROPS = /* @__PURE__ */ new Set([
   "strokeWidth",
   // CSS properties that pass isPropValid but are used as component props
   "overflow",
+  "opacity",
   "cursor",
   "fontSize",
   "fontWeight",
@@ -193,11 +194,14 @@ var StyledBox = (0, import_styled_components.default)(FilteredDiv)`
   flex-shrink: ${(props) => props.flexShrink ?? 1};
   gap: ${(props) => typeof props.gap === "number" ? `${props.gap}px` : props.gap || 0};
   align-self: ${(props) => props.alignSelf || "auto"};
+  /* Only emit overflow-x/y when explicitly set. Defaulting them to
+     visible after overflow would override the shorthand and break
+     clipping (e.g. OtherCard bottom-right promo image). */
   overflow: ${(props) => props.overflow || "visible"};
-  overflow-x: ${(props) => props.overflowX || "visible"};
-  overflow-y: ${(props) => props.overflowY || "visible"};
+  ${(props) => props.overflowX != null ? `overflow-x: ${props.overflowX};` : ""}
+  ${(props) => props.overflowY != null ? `overflow-y: ${props.overflowY};` : ""}
   z-index: ${(props) => props.zIndex};
-  opacity: ${(props) => props.disabled ? 0.5 : 1};
+  opacity: ${(props) => props.opacity != null ? props.opacity : props.disabled ? 0.5 : 1};
   pointer-events: ${(props) => props.disabled ? "none" : "auto"};
 
   &:hover {
@@ -248,6 +252,7 @@ var Box = import_react2.default.forwardRef(
           alt: alt || "",
           onError,
           onLoad,
+          "data-testid": dataTestId || testID,
           style: {
             display: "block",
             objectFit: "cover",
@@ -1004,8 +1009,8 @@ var FlexButton = (0, import_react5.forwardRef)(
     const getVariantColors = (currentState) => {
       if (isDisabled) {
         return {
-          bg: background ? theme.colors.overlay.mono : "transparent",
-          text: theme.colors.control.text.disable,
+          bg: background ? theme.colors.control.brand.primary.bgDisable : "transparent",
+          text: theme.colors.control.brand.text.disable,
           border: void 0
         };
       }