@xsolla/xui-b2b-sidebar 0.201.4 → 0.202.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsolla/xui-b2b-sidebar",
-  "version": "0.201.4",
+  "version": "0.202.0",
   "main": "./web/index.js",
   "module": "./web/index.mjs",
   "types": "./web/index.d.ts",
@@ -13,11 +13,11 @@
     "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "@xsolla/xui-core": "0.201.4",
-    "@xsolla/xui-icons-base": "0.201.4",
-    "@xsolla/xui-primitives-core": "0.201.4",
-    "@xsolla/xui-tooltip": "0.201.4",
-    "@xsolla/xui-typography": "0.201.4"
+    "@xsolla/xui-core": "0.202.0",
+    "@xsolla/xui-icons-base": "0.202.0",
+    "@xsolla/xui-primitives-core": "0.202.0",
+    "@xsolla/xui-tooltip": "0.202.0",
+    "@xsolla/xui-typography": "0.202.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0",

package/web/index.js

@@ -1117,6 +1117,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",
@@ -1226,11 +1227,14 @@ var StyledBox = (0, import_styled_components4.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 {
@@ -1281,6 +1285,7 @@ var Box = import_react4.default.forwardRef(
           alt: alt || "",
           onError,
           onLoad,
+          "data-testid": dataTestId || testID,
           style: {
             display: "block",
             objectFit: "cover",