@xsolla/xui-button 0.209.1 → 0.211.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xsolla/xui-button",
3
- "version": "0.209.1",
3
+ "version": "0.211.0",
4
4
  "main": "./web/index.js",
5
5
  "module": "./web/index.mjs",
6
6
  "types": "./web/index.d.ts",
@@ -13,9 +13,9 @@
13
13
  "test:coverage": "vitest run --coverage"
14
14
  },
15
15
  "dependencies": {
16
- "@xsolla/xui-core": "0.209.1",
17
- "@xsolla/xui-icons": "0.209.1",
18
- "@xsolla/xui-primitives-core": "0.209.1"
16
+ "@xsolla/xui-core": "0.211.0",
17
+ "@xsolla/xui-icons": "0.211.0",
18
+ "@xsolla/xui-primitives-core": "0.211.0"
19
19
  },
20
20
  "peerDependencies": {
21
21
  "react": ">=16.8.0",
package/web/index.js CHANGED
@@ -204,12 +204,18 @@ var StyledBox = (0, import_styled_components.default)(FilteredDiv)`
204
204
  opacity: ${(props) => props.opacity != null ? props.opacity : props.disabled ? 0.5 : 1};
205
205
  pointer-events: ${(props) => props.disabled ? "none" : "auto"};
206
206
 
207
+ /* \`background\` is emitted before \`background-color\` so a caller passing
208
+ both still gets backgroundColor as the winner. Use the shorthand for a
209
+ layered fill (e.g. an overlay tint over a resting surface colour), which
210
+ a single background-color cannot express. */
207
211
  &:hover {
212
+ ${(props) => props.hoverStyle?.background && `background: ${props.hoverStyle.background};`}
208
213
  ${(props) => props.hoverStyle?.backgroundColor && `background-color: ${props.hoverStyle.backgroundColor};`}
209
214
  ${(props) => props.hoverStyle?.borderColor && `border-color: ${props.hoverStyle.borderColor};`}
210
215
  }
211
216
 
212
217
  &:active {
218
+ ${(props) => props.pressStyle?.background && `background: ${props.pressStyle.background};`}
213
219
  ${(props) => props.pressStyle?.backgroundColor && `background-color: ${props.pressStyle.backgroundColor};`}
214
220
  }
215
221
  `;