@xsolla/xui-b2c-image-thumbnail 0.209.1 → 0.211.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsolla/xui-b2c-image-thumbnail",
-  "version": "0.209.1",
+  "version": "0.211.0",
   "main": "./web/index.js",
   "module": "./web/index.mjs",
   "types": "./web/index.d.ts",
@@ -13,8 +13,8 @@
     "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "@xsolla/xui-core": "0.209.1",
-    "@xsolla/xui-primitives-core": "0.209.1"
+    "@xsolla/xui-core": "0.211.0",
+    "@xsolla/xui-primitives-core": "0.211.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0"

package/web/index.js

@@ -3687,12 +3687,18 @@ var StyledBox = styled_components_esm_default(FilteredDiv)`
   opacity: ${(props) => props.opacity != null ? props.opacity : props.disabled ? 0.5 : 1};
   pointer-events: ${(props) => props.disabled ? "none" : "auto"};
 
+  /* \`background\` is emitted before \`background-color\` so a caller passing
+     both still gets backgroundColor as the winner. Use the shorthand for a
+     layered fill (e.g. an overlay tint over a resting surface colour), which
+     a single background-color cannot express. */
   &:hover {
+    ${(props) => props.hoverStyle?.background && `background: ${props.hoverStyle.background};`}
     ${(props) => props.hoverStyle?.backgroundColor && `background-color: ${props.hoverStyle.backgroundColor};`}
     ${(props) => props.hoverStyle?.borderColor && `border-color: ${props.hoverStyle.borderColor};`}
   }
 
   &:active {
+    ${(props) => props.pressStyle?.background && `background: ${props.pressStyle.background};`}
     ${(props) => props.pressStyle?.backgroundColor && `background-color: ${props.pressStyle.backgroundColor};`}
   }
 `;