@xsolla/xui-b2b-sidebar 0.201.4 → 0.202.0

package/web/index.mjs

@@ -1077,6 +1077,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",
@@ -1186,11 +1187,14 @@ var StyledBox = styled4(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 {
@@ -1241,6 +1245,7 @@ var Box = React4.forwardRef(
           alt: alt || "",
           onError,
           onLoad,
+          "data-testid": dataTestId || testID,
           style: {
             display: "block",
             objectFit: "cover",